/* Sandbucket site: base tokens and components. A theme (themes/<name>/theme.css) is appended for previews and
   may change values, layout and structure. Type system (Sandbucket-Type/docs/TYPE-SYSTEM.md): Helvetica Neue from
   her Adobe web project for headlines and interface, Inter for reading. Foundations: private/marketing-site/16. */
@font-face { font-family: "Inter"; src: url("/fonts/inter/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* color roles (semantic) */
  --bg: #ffffff; --surface: #f6f7f8; --text: #111418; --muted: #4f5a66; --line: #e3e6ea; --line-strong: #111418;
  --accent: #111418; --accent-text: #ffffff; --focus: #2563eb;
  --band: #111418; --on-band: #f5f6f7; --on-band-muted: #b9c0c8;
  /* type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "helvetica-neue-lt-pro", "Helvetica Neue", "Inter", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --h1: clamp(2.5rem, 4.6vw + 1rem, 4.5rem); --h1-weight: 500; --h1-track: -0.03em; --h1-lh: 1.03;
  --h2: clamp(1.6rem, 1.6vw + 1rem, 2.25rem); --h2-weight: 500;
  /* space: 4px base */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;
  --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem; --s32: 8rem;
  --section: clamp(4rem, 7vw, 7rem);
  /* layout and shape */
  --measure: 42rem; --wide: 76rem; --gutter: clamp(1rem, 3vw, 2rem); --radius: 6px; --radius-button: 6px;
  /* motion (Material 3 durations, standard easing) */
  --dur-press: 100ms; --dur-hover: 150ms; --dur-move: 200ms; --dur-enter: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
}
@media (prefers-color-scheme: dark) {
  :root.theme-default { --bg: #0d1014; --surface: #151a20; --text: #eef1f4; --muted: #a3adb8; --line: #252c34; --line-strong: #eef1f4;
    --accent: #eef1f4; --accent-text: #0d1014; --focus: #60a5fa; --band: #eef1f4; --on-band: #0d1014; --on-band-muted: #4f5a66; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1.0625rem/1.6 var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px;
  transition: color var(--dur-hover) var(--ease), text-decoration-color var(--dur-hover) var(--ease); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--bg); padding: 0.5rem 0.75rem; z-index: 20; }
.skip:focus { left: 0.5rem; }
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; text-wrap: balance; margin: 0 0 var(--s4); }
h1 { font-size: var(--h1); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); line-height: var(--h1-lh); }
h2 { font-size: var(--h2); font-weight: var(--h2-weight); letter-spacing: -0.02em; }
h3 { font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em; }
p, ul, ol, dl { margin: 0 0 var(--s4); }
q { quotes: "\201C" "\201D"; }
.prose { max-width: calc(var(--measure) + 2 * var(--gutter)); padding-top: var(--s16); padding-bottom: var(--s20); }
.prose h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); }
.prose h2 { font-size: 1.4rem; margin-top: var(--s12); }

/* small type */
.eyebrow { font: 700 0.75rem/1.3 var(--font-head); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s4); }
.lead { font-size: clamp(1.15rem, 0.4vw + 1rem, 1.35rem); line-height: 1.5; color: var(--muted); max-width: 40rem; }
.fine { font-size: 0.875rem; color: var(--muted); }
.avail { font: 500 0.95rem/1.4 var(--font-head); }
.status { font: 500 0.9rem/1.4 var(--font-head); color: var(--muted); }
.pk { display: block; font: 700 0.7rem/1.3 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ph { background: #fef3c7; color: #78350f; border-radius: 4px; padding: 0.1rem 0.35rem; font: 0.85rem/1.4 var(--font); }

/* buttons and links */
.button { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent); color: var(--accent-text);
  padding: 0.8rem 1.2rem; border-radius: var(--radius-button); text-decoration: none; font: 500 1rem/1.2 var(--font-head);
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease); }
.button:hover { filter: brightness(1.08); }
.button:active { transform: scale(0.98); }
.button-small { padding: 0.5rem 0.85rem; font-size: 0.9rem; }
.more { font: 500 1rem/1.4 var(--font-head); text-decoration: none; border-bottom: 1px solid currentColor; }
.more::after { content: "\2192"; display: inline-block; margin-left: 0.4em; transition: transform var(--dur-move) var(--ease); }
.more:hover::after { transform: translateX(4px); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); margin: var(--s8) 0 var(--s4); }

/* header */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); position: relative; z-index: 10; }
.header-row { display: flex; align-items: center; gap: var(--s6); min-height: 4.25rem; }
.wordmark { font: 700 1.2rem/1 var(--font-head); letter-spacing: -0.02em; text-decoration: none; margin-right: auto; }
.nav-main ul, .menu-panel ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s6); }
.nav-main a, .menu-panel nav a { text-decoration: none; font: 500 0.95rem/1 var(--font-head); color: var(--muted); }
.nav-main a:hover, .nav-main a[aria-current="page"] { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: var(--s5); }
.signin { font: 500 0.95rem/1 var(--font-head); color: var(--muted); text-decoration: none; }
.signin:hover { color: var(--text); text-decoration: underline; }
.menu { display: none; }
.menu summary { cursor: pointer; list-style: none; font: 500 0.95rem/1 var(--font-head); padding: 0.55rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--s6) var(--gutter) var(--s8); }
.menu-panel ul { flex-direction: column; gap: var(--s4); margin-bottom: var(--s6); }
.menu-panel nav a { font-size: 1.4rem; color: var(--text); }
@media (max-width: 60rem) {
  .nav-main, .header-actions { display: none; }
  .menu { display: block; }
}

/* sections */
.sec { padding: var(--section) 0; }
.sec-head { max-width: 46rem; margin-bottom: var(--s10); }
.sec-head h2 { margin-bottom: var(--s3); }
.sec-lead { color: var(--muted); font-size: 1.1rem; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s12); align-items: start; }
.split > .sec-head { margin-bottom: 0; }
.sec-hero { padding: clamp(4rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem); }
.sec-hero-page { padding-bottom: var(--s12); }
.hero h1 { max-width: 15ch; }
.sec-hero-page .hero h1 { max-width: 22ch; }
.sec + .sec:not(.sec-band) { border-top: 1px solid var(--line); }

/* situations: an index of rows */
.situations { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.situations li { border-top: 1px solid var(--line); }
.situations a { display: grid; grid-template-columns: 3rem minmax(0, 1.15fr) minmax(0, 1fr) 11rem 1.5rem; gap: var(--s5);
  align-items: baseline; padding: var(--s5) 0; text-decoration: none; }
.situations a::after { content: "\2192"; color: var(--muted); transition: transform var(--dur-move) var(--ease), color var(--dur-move) var(--ease); }
.situations a:hover::after { transform: translateX(4px); color: var(--text); }
.situations .n { font: 500 0.85rem/1 var(--font-head); color: var(--muted); }
.situations .say { font: 500 1.2rem/1.35 var(--font-head); letter-spacing: -0.01em; }
.situations .change { color: var(--muted); }

/* packages: three columns */
.packages { list-style: none; margin: 0 0 var(--s8); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.pkg { display: flex; flex-direction: column; }
.pkg .shape { width: 7rem; height: auto; margin-bottom: var(--s5); overflow: visible; }
.shape-define { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; }
.shape-build { fill: none; stroke: var(--text); stroke-width: 2; }
.shape-deliver { fill: var(--accent); stroke: var(--accent); stroke-width: 2; }
.pkg-n { font: 500 0.85rem/1 var(--font-head); color: var(--muted); margin-bottom: var(--s2); }
.pkg h3 { font-size: 1.6rem; margin-bottom: var(--s1); }
.pkg-sub { font: 500 1rem/1.3 var(--font-head); color: var(--muted); }
.pkg-line { margin-bottom: var(--s4); }
.pkg-offers { list-style: none; padding: 0; margin: 0 0 var(--s5); border-top: 1px solid var(--line); }
.pkg-offers li { padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.pkg .more { margin-top: auto; align-self: flex-start; }

/* offer rows (services) */
.offer-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.offer-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 0.8fr); gap: var(--s6); padding: var(--s6) 0; border-top: 1px solid var(--line); scroll-margin-top: var(--s8); }
.offer-rows h3 { margin: 0; }
.offer-rows p { margin: 0; }
.offer-rows .shape { font: 500 0.875rem/1.5 var(--font-head); color: var(--muted); }

/* tests and steps: numbered rows */
.tests, .steps, .ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); }
.steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.tests li, .steps li, .ways li { border-top: 2px solid var(--line-strong); padding-top: var(--s4); }
.tests .n, .steps .n, .ways .n { display: block; font: 500 0.85rem/1 var(--font-head); color: var(--muted); margin-bottom: var(--s3); }
.tests strong, .steps strong { display: block; font: 500 1.15rem/1.3 var(--font-head); margin-bottom: var(--s2); }
.t-note { display: block; color: var(--muted); font-size: 0.95rem; }
.tests .pk { margin-top: var(--s3); color: var(--accent); }

/* the sprint timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--s5); position: relative; }
.timeline::before { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; top: 0.72rem; height: 2px; background: var(--line); }
.timeline li { position: relative; padding-top: 2.5rem; }
.timeline .node { position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border: 2px solid var(--accent); background: var(--bg); color: var(--accent); border-radius: 50%; font: 700 0.72rem/1 var(--font-head); }
.timeline .before .node { border-style: dashed; border-color: var(--muted); color: var(--muted); }
.timeline strong { display: block; font: 500 1.05rem/1.3 var(--font-head); }
.timeline .pk { margin-top: var(--s2); color: var(--accent); }

/* work */
.work-list { list-style: none; margin: 0 0 var(--s8); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.work-item { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.work-media { display: grid; place-items: end start; aspect-ratio: 16 / 10; background: var(--surface); border-radius: var(--radius); padding: var(--s6);
  font: 500 clamp(2rem, 4vw, 3.5rem)/1 var(--font-head); letter-spacing: -0.03em; color: var(--muted); margin-bottom: var(--s5);
  transition: background-color var(--dur-move) var(--ease); }
.work-item:hover .work-media { background: var(--line); }
.work-title { display: block; font: 500 1.3rem/1.3 var(--font-head); letter-spacing: -0.01em; margin: var(--s2) 0; }
.work-item:hover .work-title { text-decoration: underline; text-decoration-thickness: 1px; }
.work-meta { display: block; color: var(--muted); font-size: 0.95rem; }

/* founder */
.founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s12); align-items: center; }
.portrait { margin: 0; }
.portrait img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius); }
.portrait .ph { display: grid; place-items: center; aspect-ratio: 5 / 6; text-align: center; padding: var(--s6); }
.founder h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.5rem); }

/* booking band */
.sec-band { padding: 0 0 var(--section); }
.band { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s10); align-items: end;
  background: var(--band); color: var(--on-band); border-radius: var(--radius); padding: clamp(2rem, 5vw, 4rem); }
.band h2 { font-size: clamp(1.8rem, 2.4vw + 1rem, 3rem); }
.band p { color: var(--on-band-muted); }
.band .cta { margin: 0 0 var(--s3); }
.band .button { background: var(--on-band); color: var(--band); }
.band .fine a { color: var(--on-band); }

/* sprint page */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s10); }
.checks, .crosses { list-style: none; padding: 0; }
.checks li, .crosses li { position: relative; padding: var(--s3) 0 var(--s3) 2rem; border-top: 1px solid var(--line); }
.checks li::before { content: "\2713"; position: absolute; left: 0; top: var(--s3); color: var(--accent); font-weight: 700; }
.crosses li::before { content: "\2715"; position: absolute; left: 0; top: var(--s3); color: var(--muted); }
.example { color: var(--muted); }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s5) 0; font: 500 1.1rem/1.35 var(--font-head); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.4rem; line-height: 1; transition: transform var(--dur-move) var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details > :not(summary) { max-width: var(--measure); }
.qa details ul { padding-left: 1.1rem; }
.weeks { margin: var(--s10) 0 var(--s4); }
.terms-grid, .details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12); }
.details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.terms-grid h2 { font-size: 1.35rem; margin-top: var(--s8); }
.terms-grid h2:first-child, .terms-grid div > h2:first-child { margin-top: 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.table-wrap { overflow-x: auto; }
th, td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--line); }
th { font: 700 0.75rem/1.3 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* case pages */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0 0 var(--s8); font: 500 0.875rem/1.3 var(--font-head); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--s2); }
.case { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s12); align-items: start; }
.facts { position: sticky; top: var(--s6); }
.facts dl { margin: 0; }
.facts dt { font: 700 0.7rem/1.3 var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: var(--s4); border-top: 1px solid var(--line); }
.facts dd { margin: var(--s1) 0 var(--s4); font-size: 0.95rem; }
.case-body { max-width: var(--measure); }
.case-body h2 { font-size: 1.5rem; margin-top: var(--s12); }
.case-body h2:first-child { margin-top: 0; }
.decisions { padding-left: 1.25rem; }
.decisions li { margin-bottom: var(--s4); }
.decisions strong { font-family: var(--font-head); font-weight: 500; }

/* about */
.about-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s12); align-items: end; }
.ways h3 { font-size: 1.3rem; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: var(--s16) 0 var(--s8); font-size: 0.95rem; }
.footer-name { font: 700 clamp(2.5rem, 7vw, 5rem)/0.95 var(--font-head); letter-spacing: -0.045em; margin: 0 0 var(--s10); }
.footer-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); padding-bottom: var(--s10); }
.footer-index h2 { margin-bottom: var(--s3); }
.footer-index ul { list-style: none; padding: 0; margin: 0; }
.footer-index li { margin-bottom: var(--s2); }
.footer-index a { text-decoration: none; }
.footer-index a:hover { text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); border-top: 1px solid var(--line); padding-top: var(--s5); color: var(--muted); font-size: 0.85rem; }
.footer-legal p { margin: 0; }

/* the old draft's helper classes, kept for the plain pages */
.muted { color: var(--muted); }
.draft-banner { background: #fef3c7; color: #78350f; padding: 0.75rem 1rem; border-radius: var(--radius); font-weight: 500; }

@media (max-width: 60rem) {
  .split, .founder, .case, .about-hero, .fit, .terms-grid { grid-template-columns: 1fr; gap: var(--s8); }
  .packages, .work-list, .ways { grid-template-columns: 1fr; }
  .tests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .situations a { grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; }
  .situations .change, .situations .pk { grid-column: 2; }
  .situations a::after { grid-column: 3; grid-row: 1; }
  .offer-rows li { grid-template-columns: 1fr; gap: var(--s2); }
  .facts { position: static; }
  .portrait { max-width: 24rem; }
}
@media (max-width: 40rem) {
  .tests, .steps, .details-grid, .footer-index { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; gap: var(--s6); }
  .timeline::before { left: 0.7rem; right: auto; top: 0.75rem; bottom: 0.75rem; width: 2px; height: auto; }
  .timeline li { padding: 0 0 0 2.5rem; }
  .band { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (prefers-color-scheme: dark) { .ph { background: #422006; color: #fde68a; } }

/* contact: three doors by intent (precedent noted in the private marketing-site notes, file 23) */
.doors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.doors a { display: flex; flex-direction: column; gap: var(--s3); height: 100%; padding: var(--s6); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none;
  transition: border-color var(--dur-move) var(--ease), background-color var(--dur-move) var(--ease); }
.doors a:hover { border-color: var(--line-strong); }
.doors strong { font: 500 1.3rem/1.2 var(--font-head); }
.doors span { color: var(--muted); }
.doors em { margin-top: auto; font: 500 0.95rem/1.3 var(--font-head); font-style: normal; }
.doors em::after { content: " \2192"; }
@media (max-width: 60rem) { .doors { grid-template-columns: 1fr; } }

/* Engagements on the services page: the default is the three-up ways list; themes swap in rows, one line or numbers (snippets/engagements.html) */
.eng-rows { list-style: none; margin: 0; padding: 0; }
.eng-rows li { display: grid; grid-template-columns: 11rem minmax(0, 16rem) 1fr; gap: var(--s4); align-items: baseline; padding: var(--s4) 0; border-top: 1px solid var(--line); }
.eng-rows li:last-child { border-bottom: 1px solid var(--line); }
.eng-label { font: 500 0.8rem/1.3 var(--font-head); color: var(--muted); }
.eng-rows a { font: 500 1.15rem/1.3 var(--font-head); text-decoration: none; }
.eng-rows a:hover { text-decoration: underline; }
.eng-rows li > span:last-child { color: var(--muted); }
.eng-line { font: 400 clamp(1.25rem, 1vw + 1rem, 1.6rem)/1.45 var(--font-head); max-width: 44rem; margin: 0; }
.eng-line a { text-underline-offset: 0.2em; }
.eng-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.eng-nums b { display: block; font: 500 clamp(2.4rem, 3vw + 1rem, 3.6rem)/1 var(--font-head); letter-spacing: -0.02em; margin-bottom: var(--s3); }
.eng-nums a { color: inherit; }
@media (max-width: 48rem) { .eng-rows li { grid-template-columns: 1fr; gap: var(--s1); } .eng-nums { grid-template-columns: 1fr; gap: var(--s6); } }
/* Space between the blocks inside a section (13 Nov: the figures, the two lists and the closing lines ran together) */
.sec-ways .wrap > * + * { margin-top: var(--s8); }
.sec-ways .wrap > .sec-head + * { margin-top: 0; }
.sec-ways .wrap > p + p { margin-top: var(--s4); }
.terms-grid h3 { font-size: 1.1rem; margin: 0 0 var(--s3); }
.terms-grid ul { margin: 0; padding-left: 1.2rem; }
.eng-nums li > span { display: block; }
/* Space after a list or table when a line follows it (13 Nov device check: they touched in every theme) */
main .wrap > ul + p, main .wrap > ol + p, main .wrap > .table-wrap + p, .package-detail > ul + p, .offer-rows + p { margin-top: var(--s6); }