/* Adames AI sales page. Colours and fonts only through the tokens;
   light fills are mixed from the tokens, never written by hand. */
:root {
  --tint-lime: color-mix(in oklab, var(--site-highlight) 30%, var(--sc-surface));
  --tint-lime-soft: color-mix(in oklab, var(--site-highlight) 12%, var(--sc-surface));
  --tint-coral: color-mix(in oklab, var(--site-label-3) 13%, var(--sc-surface));
  --dark-soft: color-mix(in oklab, var(--sc-canvas) 74%, var(--sc-accent));
  --dark-line: color-mix(in oklab, var(--sc-canvas) 22%, var(--sc-accent));
  --dark-card: color-mix(in oklab, var(--sc-canvas) 7%, var(--sc-accent));
  --line-strong: var(--sc-ink);
}
body.sales main, body.small-page main { padding-top: 0; }
body { background: var(--sc-canvas); color: var(--sc-ink); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.sales p, .small-page p { max-width: var(--sc-measure); }
.sc-section--tight { padding-top: var(--sc-8); }
mark { background: none; color: inherit; box-shadow: inset 0 -0.4em 0 var(--site-highlight); }

/* the action: black with lime letters, the last one lime */
.cta { color: var(--site-highlight); border: var(--site-card-line-width) solid var(--sc-ink); gap: var(--sc-2); min-height: 56px; padding: var(--sc-3) var(--sc-6); font-size: var(--sc-t-base); }
.cta--lime { background: var(--site-highlight); color: var(--site-highlight-ink); }
.dark .cta { border-color: var(--site-highlight); }
.dark .cta:focus-visible { outline-color: var(--site-highlight); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); margin: 0; }
.btn-row--dark { margin-top: var(--sc-9); }
.vat-note { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.dark .vat-note { color: var(--dark-soft); }
.need { display: inline-block; background: var(--tint-coral); color: var(--site-label-3); padding: 0 var(--sc-2); border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm); font-weight: 500; }
.dark .need { background: var(--sc-canvas); }

.label--lime { color: var(--site-label-2); }
.dark .label--lime { color: var(--site-highlight); }

/* chips: the kit's small labels on a fill */
.chip { display: inline-flex; align-items: center; margin: 0; padding: 4px 10px; border-radius: 999px; font-size: var(--site-label-size); font-weight: 600; letter-spacing: 0.08em; text-transform: var(--site-label-case); line-height: 1.4; }
.chip--lime { background: var(--site-highlight); color: var(--site-highlight-ink); }
.chip--dark { background: var(--sc-accent); color: var(--site-highlight); }

/* check marks and cross marks, one line each */
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.marks li { position: relative; padding-left: 2.4rem; font-size: var(--sc-t-lg); line-height: 1.4; max-width: 40ch; }
.marks li::before { content: ""; position: absolute; left: 0; top: 0.1em; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: var(--site-card-line-width) solid var(--line-strong); background: var(--site-highlight); }
.marks li::after { content: "\2713"; position: absolute; left: 0; top: 0.1em; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; font-weight: 700; font-size: 0.95rem; color: var(--site-highlight-ink); }
.marks--no li::before { background: var(--tint-coral); border-color: var(--site-label-3); }
.marks--no li::after { content: "\00d7"; color: var(--site-label-3); font-size: 1.15rem; }

/* 1. title page */
.title { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; gap: var(--sc-6); padding: var(--sc-5) var(--sc-gutter) var(--sc-8); max-width: var(--sc-maxw); margin-inline: auto; }
.title__top img { height: 34px; width: auto; display: block; }
.title__mid { display: grid; align-content: center; justify-items: start; gap: var(--sc-5); padding-block: var(--sc-6) var(--sc-6); }
.title h1 { font-family: var(--sc-font-display); font-size: clamp(2.35rem, 7.2vw, 5.9rem); line-height: 1.04; letter-spacing: var(--sc-track-tight); max-width: 17ch; margin: 0; }
.title__sub { font-size: clamp(1.1rem, 1.45vw, 1.4rem); color: var(--sc-ink-soft); max-width: 44ch; line-height: 1.5; margin: 0; }
.title .btn-row { margin-top: var(--sc-2); }
.title .vat-note { margin-top: calc(-1 * var(--sc-2)); }

/* dark grounds: restate colour on the subtree */
.dark { background: var(--sc-accent); color: var(--sc-canvas); padding-block: var(--sc-section); }
.dark p, .dark li { line-height: 1.62; letter-spacing: 0.004em; }
.dark .label { color: var(--dark-soft); }

/* 3. results */
.chapter { margin-bottom: var(--sc-10); }
.chapter .label { margin-bottom: var(--sc-3); }
.chapter h2 { font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.98; margin: 0; }
.result { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 15rem; gap: var(--sc-4) var(--sc-6); padding-block: var(--sc-7); border-top: 1px solid var(--dark-line); align-items: start; }
.result__n { font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; color: var(--site-highlight); letter-spacing: var(--sc-track-tight); font-variant-numeric: tabular-nums; }
.result__body h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; margin: 0 0 var(--sc-3); letter-spacing: var(--sc-track-snug); }
.result__body p { margin: 0; color: var(--sc-canvas); max-width: 56ch; }
.result__note { margin: 0; font-size: var(--sc-t-sm); color: var(--site-highlight); border-left: 1px solid var(--site-highlight); padding-left: var(--sc-3); align-self: end; }
.results .sc-wrap > .result:last-of-type { border-bottom: 1px solid var(--dark-line); }

/* 4. how it works: the flow diagram */
.how h2 { margin-bottom: var(--sc-8); }
.flow { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(3rem, 6rem) minmax(13rem, 1.1fr) minmax(3rem, 6rem) minmax(12rem, 1.2fr); align-items: center; gap: 0; margin-bottom: var(--sc-10); }
.flow ul, .flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.flow__col-title { font-size: var(--site-label-size); font-weight: var(--site-label-weight); letter-spacing: var(--site-label-tracking); text-transform: var(--site-label-case); color: var(--site-label-2); padding-bottom: var(--sc-1); }
.flow__in li:not(.flow__col-title), .flow__out li:not(.flow__col-title) { border: var(--site-card-line-width) solid var(--line-strong); background: var(--sc-surface); border-radius: var(--sc-r-sm); padding: var(--sc-2) var(--sc-3); font-size: var(--sc-t-sm); line-height: 1.3; }
.flow__out li:not(.flow__col-title) { background: var(--tint-lime-soft); }
.flow__lines { width: 100%; height: 100%; min-height: 14rem; display: block; }
.flow__lines path { fill: none; stroke: var(--site-highlight); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.flow__core { background: var(--sc-accent); color: var(--sc-canvas); border-radius: var(--sc-r-md); padding: var(--sc-5); text-align: center; display: grid; gap: var(--sc-2); }
.flow__core .label { color: var(--site-highlight); }
.flow__core-title { font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; margin: 0; letter-spacing: var(--sc-track-snug); }
.flow__core-title span { background: var(--site-highlight); color: var(--site-highlight-ink); padding: 0 0.3em; border-radius: 4px; }
.flow__core p:last-child { margin: 0; color: var(--dark-soft); font-size: var(--sc-t-sm); }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: var(--sc-4); padding-block: var(--sc-6); border-top: 1px solid var(--site-line); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: var(--sc-t-xl); line-height: 1; color: var(--site-label-2); font-variant-numeric: tabular-nums; }
.steps h3 { grid-column: 2; margin: 0 0 var(--sc-2); font-size: var(--sc-t-lg); line-height: 1.2; letter-spacing: var(--sc-track-snug); }
.steps p { grid-column: 2; margin: 0; color: var(--sc-ink-soft); }

/* 5. bonuses: lime and paper alternate, each with its tag */
.bonuses h2 { margin-bottom: var(--sc-7); }
.plates { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); }
.plate { border: var(--site-card-line-width) solid var(--line-strong); background: var(--sc-surface); border-radius: var(--sc-r-md); padding: var(--sc-5) var(--sc-6); display: grid; grid-template-columns: auto minmax(0, 16rem) minmax(0, 1fr); gap: var(--sc-2) var(--sc-6); align-items: center; }
.plate:nth-child(odd) { background: var(--tint-lime); }
.plate h3 { margin: 0; font-size: var(--sc-t-lg); line-height: 1.2; letter-spacing: var(--sc-track-snug); }
.plate p { margin: 0; color: var(--sc-ink-soft); }
.plate:nth-child(even) .chip--lime { background: var(--sc-accent); color: var(--site-highlight); }

/* 6. who this is for */
.fit__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sc-9); align-items: start; }
.fit__for { display: grid; gap: var(--sc-6); }
.fit__for h2 { margin: 0; }
.notfor { border: var(--site-card-line-width) solid var(--line-strong); background: var(--tint-coral); border-radius: var(--sc-r-md); padding: var(--sc-6); display: grid; gap: var(--sc-5); }
.notfor h3 { margin: 0; font-size: var(--sc-t-xl); color: var(--site-label-3); }
.notfor .marks li { font-size: var(--sc-t-base); }

/* 7. Robert */
.who__grid { display: grid; grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr); gap: var(--sc-10); align-items: center; }
.who__photo { position: relative; background: var(--tint-lime); border: var(--site-card-line-width) solid var(--line-strong); border-radius: var(--sc-r-md); padding: var(--sc-6) var(--sc-6) var(--sc-8); display: grid; justify-items: center; gap: var(--sc-4); }
.who__photo img { width: 100%; height: auto; display: block; border-radius: 50%; border: var(--site-card-line-width) solid var(--line-strong); }
.who__photo .chip { position: absolute; bottom: calc(-1 * var(--sc-4)); }
.who__text { display: grid; gap: var(--sc-4); max-width: 50ch; }
.who__text h2 { margin: 0 0 var(--sc-2); }
.who__text p { margin: 0; }
.who__quote { font-size: var(--sc-t-xl); line-height: 1.25; font-weight: 600; letter-spacing: var(--sc-track-snug); margin-top: var(--sc-3) !important; }
.who__sign { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); padding-top: var(--sc-3); border-top: 1px solid var(--site-line); }

/* 8. the price: the stack */
.price__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-10); align-items: start; }
.stackwrap { display: grid; gap: var(--sc-4); }
.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stack li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sc-3); align-items: center; padding: var(--sc-3) var(--sc-4); background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: var(--sc-r-sm); font-size: var(--sc-t-base); }
.stack li::after { content: "\2713"; color: var(--site-highlight); font-weight: 700; }
.stack__n { color: var(--site-highlight); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2rem; }
.stack__bonus { border-color: color-mix(in oklab, var(--site-highlight) 45%, var(--sc-accent)) !important; }
.stack__total { background: var(--site-highlight) !important; color: var(--site-highlight-ink); border-color: var(--site-highlight) !important; font-weight: 600; margin-top: var(--sc-2); }
.stack__total::after { content: "" !important; }
.stack__total .sc-nums { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1; letter-spacing: var(--sc-track-tight); }
.price__block { display: grid; gap: var(--sc-6); position: sticky; top: var(--sc-6); }
.price__amount { display: grid; gap: var(--sc-2); margin: 0; line-height: 1; }
.price__eur { font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: clamp(4.5rem, 12vw, 9rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--site-highlight); font-variant-numeric: tabular-nums; }
.price__once { font-size: var(--sc-t-base); line-height: 1.35; color: var(--dark-soft); font-weight: 500; }
.guarantee { background: var(--sc-canvas); color: var(--sc-ink); border-radius: var(--sc-r-md); padding: var(--sc-6); border: 3px solid var(--site-highlight); display: grid; gap: var(--sc-4); justify-items: start; box-shadow: 0 16px 40px hsl(var(--sc-shadow-color) / 0.35); }
.guarantee .marks { gap: var(--sc-3); }
.guarantee .marks li { font-size: var(--sc-t-lg); line-height: 1.3; font-weight: 600; letter-spacing: var(--sc-track-snug); }
.guarantee__law { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.4; letter-spacing: 0; }
.guarantee a { color: inherit; }

/* 9. questions */
.faq__wrap { max-width: 64ch; }
.faq h2 { margin-bottom: var(--sc-6); }
.faq details { border-top: 1px solid var(--site-line); }
.faq details:last-child { border-bottom: 1px solid var(--site-line); }
.faq summary { cursor: pointer; padding: var(--sc-4) 0; font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.3; list-style: none; display: flex; justify-content: space-between; gap: var(--sc-4); align-items: center; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 500; color: var(--site-label-2); font-size: 1.4em; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; border-radius: 4px; }
.faq details p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); }
.faq a { color: inherit; }

/* 10. close, centred under the questions */
.close { padding-bottom: var(--sc-10); }
.close__wrap { display: grid; gap: var(--sc-5); justify-items: center; text-align: center; max-width: 64ch; }
.close h2 { margin: 0; }
.close .btn-row { justify-content: center; }
.close .vat-note { margin-top: calc(-1 * var(--sc-2)); }
.close__line { margin: 0; color: var(--sc-ink-soft); }

/* inline links keep a 44px hit area without changing how the line looks */
.guarantee a, .faq a, .plain p a { display: inline-block; padding-block: 12px; margin-block: -12px; }

/* small pages */
.plain { padding-block: var(--sc-8) var(--sc-10); min-height: 70svh; }
.plain__mark img { height: 34px; width: auto; display: block; margin-bottom: var(--sc-8); }
.plain__small { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.plain h2 { margin-top: var(--sc-8); font-size: var(--sc-t-xl); }
.plain h3 { margin-top: var(--sc-6); font-size: var(--sc-t-lg); }
.plain ul, .plain ol { max-width: var(--sc-measure); }
.plain table { border-collapse: collapse; width: 100%; max-width: 80ch; font-size: var(--sc-t-sm); }
.plain th, .plain td { text-align: left; padding: var(--sc-2) var(--sc-3); border-top: 1px solid var(--site-line); vertical-align: top; }
.plain th { font-weight: 600; }
.plain .sources { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.plain a { color: inherit; }
.plain .cta { color: var(--site-highlight); }
.plain .btn-row { margin-top: var(--sc-6); margin-bottom: var(--sc-4); }
.withdraw { border: var(--site-card-line-width) solid var(--line-strong); background: var(--tint-lime); border-radius: var(--sc-r-md); padding: var(--sc-5) var(--sc-6); max-width: var(--sc-measure); }
.withdraw h2 { margin-top: 0; }
.withdraw__step { margin-top: var(--sc-4); }
.withdraw__step > summary { list-style: none; cursor: pointer; }
.withdraw__step > summary::-webkit-details-marker { display: none; }
.withdraw__form { display: grid; gap: var(--sc-2); margin-top: var(--sc-5); }
.withdraw__form label { font-weight: 600; font-size: var(--sc-t-sm); margin-top: var(--sc-2); }
.withdraw__form input { min-height: 48px; width: 100%; padding: var(--sc-2) var(--sc-3); font: inherit; font-size: 16px; color: var(--sc-ink); background: var(--sc-canvas); border: 1px solid var(--line-strong); border-radius: var(--sc-r-sm); }
.withdraw__form input:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.withdraw__form button { margin-top: var(--sc-4); justify-self: start; cursor: pointer; }
.withdraw__trap { position: absolute; left: -9999px; }
.plain .withdraw__form .cta--lime { color: var(--site-highlight-ink); }
.plain > h1 { margin-bottom: var(--sc-5); }
.plain > .sc-lede { margin-bottom: var(--sc-5); }
.plain > h2 { margin-bottom: var(--sc-3); }
.plain > p + p { margin-top: var(--sc-3); }
.plain > .withdraw { margin-top: var(--sc-7); }
.plain__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--sc-2) var(--sc-5); margin: var(--sc-4) 0 0; max-width: var(--sc-measure); }
.plain__facts dt { font-weight: 600; }
.plain__facts dd { margin: 0; }
.plain__facts a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.withdraw__model { margin-top: var(--sc-5); font-size: var(--sc-t-sm); }
.withdraw__model > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; text-decoration: underline; }
.withdraw__model blockquote { margin: var(--sc-3) 0 0; padding-left: var(--sc-4); border-left: 2px solid var(--line-strong); }

/* footer */
.site-foot { flex-direction: column; gap: var(--sc-3); }
.site-foot p { margin: 0; max-width: none; }

/* phones and narrow screens */
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: var(--sc-4); }
  .flow__lines { display: none; }
  .flow__in, .flow__out { grid-template-columns: 1fr 1fr; }
  .flow__col-title { grid-column: 1 / -1; }
  .flow__core { border-left: 4px solid var(--site-highlight); }
  .price__grid, .who__grid, .fit__grid { grid-template-columns: 1fr; }
  .result { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .result__note { grid-column: 2; align-self: start; }
  .plate { grid-template-columns: auto minmax(0, 1fr); }
  .plate p { grid-column: 1 / -1; }
  /* the price first on a phone, then the stack as a tight receipt instead of 15 cards (phone check 2026-11-04) */
  .price__block { position: static; order: -1; }
  .stack { gap: 0; }
  .stack li { background: none; border: 0; border-top: 1px solid var(--dark-line); border-radius: 0; padding: 9px 0; font-size: 0.95rem; gap: 10px; }
  .stack li:first-child { border-top: 0; }
  .stack__n { min-width: 1.6rem; }
  .stack__bonus { border-top-color: var(--dark-line) !important; }
  .stack__bonus .chip { font-size: 0.68rem; padding: 2px 8px; }
  .stack__total { background: var(--site-highlight) !important; border: 0 !important; padding: 10px 14px; border-radius: var(--sc-r-sm); margin-top: var(--sc-4); }
  .price__grid { gap: var(--sc-7); }
  .who__grid { gap: var(--sc-8); }
  .who__photo { max-width: 22rem; }
}
@media (max-width: 700px) {
  .title { padding: var(--sc-4) var(--sc-gutter) var(--sc-6); gap: var(--sc-4); }
  .title__mid { padding-block: var(--sc-5) var(--sc-4); gap: var(--sc-4); }
  .title h1 { font-size: clamp(1.85rem, 8.6vw, 2.4rem); }
  .cta { width: 100%; }
  .btn-row { width: 100%; }
  .chapter h2 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .chapter h2 br { display: none; }
  .result { padding-block: var(--sc-6); }
  .marks li { font-size: var(--sc-t-base); }
  .flow__in, .flow__out { grid-template-columns: 1fr; }
  .plain table, .plain tbody, .plain tr, .plain td, .plain th { display: block; width: 100%; }
  .plain tr:first-child { display: none; }
  .plain td { border-top: 0; padding: var(--sc-1) 0; }
  .plain tr { border-top: 1px solid var(--site-line); padding-block: var(--sc-3); }
  .plain td:first-child { font-weight: 600; }
}


/* ===== Round 2 (Robert's review of 2026-11-02) ===== */

/* top: bigger logo, the name as a line of its own, headline a touch smaller */
.title__top img { height: 44px; }
.launchpad { margin: 0; display: flex; align-items: baseline; gap: 0.35em; font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: clamp(1.35rem, 2.4vw, 2.1rem); letter-spacing: var(--sc-track-snug); line-height: 1.1; }
.title h1 { font-size: clamp(2.2rem, 6.4vw, 5.2rem); }
.title__mid { gap: var(--sc-5); }

/* the product box: read first, then scroll */

/* results: the fold sits lower, descenders have room, the button sits on the text column */
.results { padding-top: calc(var(--sc-section) + var(--sc-8)); }
.chapter__in { padding-bottom: 0.25em; }
.chapter h2 { line-height: 1.04; }
.result--cta { border-top: 0; padding-top: var(--sc-4); grid-template-columns: 5rem minmax(0, 1fr) 15rem; }
.result--cta .btn-row--dark { margin-top: 0; }
.result--cta .vat-note { margin-top: var(--sc-4); }
.price__block .vat-note { margin-top: calc(-1 * var(--sc-4)); }

/* who this is for: two columns of marks, not-for below */
.fit__wrap { display: grid; gap: var(--sc-6); }
.fit__wrap h2 { margin: 0; }
.marks--two { grid-template-columns: 1fr 1fr; column-gap: var(--sc-8); }
.marks--two li { max-width: 34ch; }
.fit .notfor { margin-top: var(--sc-4); }

/* Robert: paper plate, not lime */
.who__photo { background: var(--sc-surface); }

/* FAQ heading air */
.faq h2 { line-height: 1.15; }

@media (max-width: 860px) {
  .marks--two { grid-template-columns: 1fr; }
  .result--cta { grid-template-columns: 3.2rem minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .title__top img { height: 38px; }
  .title h1 { font-size: clamp(1.8rem, 8.2vw, 2.3rem); }
  .launchpad { font-size: 1.2rem; }
}

.close__wrap { max-width: 58rem; }
.close h2 { max-width: 18ch; }

/* ===== the top, round 3: brand block above, headline well below ===== */
.title { grid-template-rows: auto 1fr; }
.title__top { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sc-5) var(--sc-7); padding-bottom: var(--sc-5); border-bottom: 1px solid var(--site-line); }
.title__top img { height: 46px; }
.launchpad { justify-self: end; margin: 0; display: grid; justify-items: end; gap: 0.2em; text-align: right; font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: clamp(1.5rem, 2.6vw, 2.4rem); letter-spacing: var(--sc-track-snug); line-height: 1.1; }
.launchpad__label { font-size: var(--site-label-size); font-weight: var(--site-label-weight); letter-spacing: var(--site-label-tracking); text-transform: var(--site-label-case); color: var(--site-label-2); }
.launchpad__name { background: none; color: var(--sc-ink); padding: 0; border-radius: 0; box-shadow: inset 0 -0.35em 0 var(--site-highlight); }
.title__mid { padding-top: var(--sc-10); }
@media (max-width: 860px) {
  .title__top { grid-template-columns: 1fr; }
  .launchpad { justify-self: start; justify-items: start; text-align: left; white-space: normal; font-size: clamp(1.35rem, 5.6vw, 1.9rem); }
  .title__mid { padding-top: var(--sc-8); }
}

.title__marks { margin-top: var(--sc-2); }
.title__marks li { font-weight: 600; font-size: var(--sc-t-lg); }

/* ===== block 2, the path (2026-11-03): You at the start, your first client at the end, six stops in between ===== */
.situation__h { max-width: 30ch; margin: 0 0 var(--sc-8); font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: 1.02; }
.path { --mid: 4.75rem; --gap: var(--sc-7); --t: clamp(0, calc((var(--sc-p, 1) - 0.14) / 0.3), 1); position: relative; display: grid; grid-template-columns: auto repeat(7, minmax(0, 1fr)) auto; grid-template-rows: auto var(--mid) auto; column-gap: var(--sc-3); row-gap: var(--gap); align-items: start; }
.path__line { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 0; align-self: stretch; }
.path__line::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--t) * 100%); border-top: 2px dashed var(--line-strong); }
.path__end { position: relative; z-index: 1; grid-row: 2; align-self: center; margin: 0; display: grid; justify-items: center; gap: 2px; border-radius: 999px; border: var(--site-card-line-width) solid var(--line-strong); font-family: var(--sc-font-display); letter-spacing: var(--sc-track-snug); line-height: 1.1; }
.path__end--you { grid-column: 1; background: var(--sc-accent); color: var(--sc-canvas); padding: var(--sc-3) var(--sc-6); }
.path__end--you strong { color: var(--sc-canvas); font-weight: var(--site-weight-heading); font-size: var(--sc-t-xl); }
.path__end--you span { color: var(--site-highlight); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: var(--site-label-case); text-align: center; max-width: 9em; line-height: 1.25; }
.path__end--goal { grid-column: 9; background: var(--site-highlight); color: var(--site-highlight-ink); padding: var(--sc-3) var(--sc-6); }
.path__end--goal strong { color: var(--site-highlight-ink); font-weight: var(--site-weight-heading); font-size: var(--sc-t-lg); white-space: nowrap; }
.path__stops { grid-column: 2 / 9; grid-row: 1 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.stop { position: relative; z-index: 1; background: var(--sc-surface); border: var(--site-card-line-width) solid var(--line-strong); border-radius: var(--sc-r-sm); padding: var(--sc-4) var(--sc-4); display: grid; gap: 6px; align-self: end; }
.stop strong { font-size: var(--sc-t-base); line-height: 1.25; letter-spacing: var(--sc-track-snug); color: var(--sc-ink); }
.stop span { font-size: var(--sc-t-sm); line-height: 1.45; color: var(--sc-ink-soft); }
.stop:nth-child(1) { grid-column: 1 / 3; }
.stop:nth-child(2) { grid-column: 2 / 4; }
.stop:nth-child(3) { grid-column: 3 / 5; }
.stop:nth-child(4) { grid-column: 4 / 6; }
.stop:nth-child(5) { grid-column: 5 / 7; }
.stop:nth-child(6) { grid-column: 6 / 8; }
.stop:nth-child(odd) { grid-row: 1; align-self: end; }
.stop:nth-child(even) { grid-row: 3; align-self: start; }
/* the stem from the card to the line, and the numbered stop on the line */
.stop::before { content: ""; position: absolute; left: 50%; width: var(--site-card-line-width); height: calc(var(--gap) + var(--mid) / 2); background: var(--line-strong); transform: translateX(-50%); }
.stop::after { counter-increment: stop; content: counter(stop); position: absolute; left: 50%; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sc-accent); color: var(--site-highlight); font-weight: 600; font-size: var(--sc-t-sm); display: grid; place-items: center; z-index: 2; }
.stop:nth-child(odd)::before { top: 100%; }
.stop:nth-child(odd)::after { top: calc(100% + var(--gap) + var(--mid) / 2); transform: translate(-50%, -50%); }
.stop:nth-child(even)::before { bottom: 100%; }
.stop:nth-child(even)::after { bottom: calc(100% + var(--gap) + var(--mid) / 2); transform: translate(-50%, 50%); }
.situation .situation__turn { text-align: center; margin-top: var(--sc-8); padding-top: 0; border-top: 0; font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: var(--sc-track-snug); max-width: none; }
@media (prefers-reduced-motion: reduce) { .path { --t: 1; } }
@media (max-width: 1100px) {
  /* a phone or tablet reads the path top to bottom: You, the six stops down a dashed line, your first client */
  .situation__h { margin-bottom: var(--sc-6); }
  .path { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--sc-4); justify-items: start; }
  .path__line { display: none; }
  .path__end { grid-column: 1; grid-row: auto; }
  .path__end--you { margin-left: 0; }
  .path__end--goal { margin-left: 0; }
  .path__stops { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: none; grid-template-rows: none; gap: var(--sc-4); width: 100%; margin: var(--sc-2) 0 var(--sc-2) 1.25rem; padding-left: var(--sc-6); border-left: 2px dashed var(--line-strong); box-sizing: border-box; }
  .stop, .stop:nth-child(odd), .stop:nth-child(even) { grid-column: auto; grid-row: auto; align-self: auto; }
  .stop::before { display: none; }
  .stop::after, .stop:nth-child(odd)::after, .stop:nth-child(even)::after { top: 50%; bottom: auto; left: calc(-1 * var(--sc-6) - 1px); transform: translate(-50%, -50%); }
}

/* ===== 2026-11-03, the new top: eight stops on a wider column, the How it works plate, the diagram alone ===== */
.situation__wrap { max-width: 88rem; }
/* the pains in coral, gently (Robert, 2026-11-03: look D, a little more gentle) */
.stop, .stop--big { background: color-mix(in oklab, var(--site-label-3) 8%, var(--sc-surface)); }
@media (min-width: 1101px) {
  .path { grid-template-columns: auto repeat(9, minmax(0, 1fr)) auto; column-gap: var(--sc-2); }
  .path__end--goal { grid-column: 11; }
  .path__end--goal strong { white-space: normal; text-align: center; max-width: 5.5em; }
  .path__stops { grid-column: 2 / 11; }
  .stop { padding: var(--sc-3); }
  .stop:nth-child(7) { grid-column: 7 / 9; }
  .stop:nth-child(8) { grid-column: 8 / 10; }
}
@media (max-width: 1100px) {
  .path__stops { width: auto; justify-self: stretch; }
}


/* the diagram's section now holds only the heading and the diagram */
.how .flow { margin-bottom: 0; }

/* ===== block 3, How it works v3 (Robert, 2026-11-03: full-bleed black like the other black blocks, a fifth of the text, readable in one look) ===== */
.howto { display: grid; gap: var(--sc-8); }
.howto .sc-wrap { display: grid; gap: var(--sc-8); }
.howto__head .label--lime { color: var(--site-highlight); margin-bottom: var(--sc-3); }
.howto__head h2 { margin: 0; max-width: 24ch; }
.howto__head mark { color: var(--sc-canvas); }
.howto__lede { margin: var(--sc-4) 0 0; color: var(--dark-soft); font-size: var(--sc-t-lg); line-height: 1.4; max-width: 40ch; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-6); }
.stage { display: grid; grid-template-columns: 1fr; align-content: start; row-gap: var(--sc-2); padding-top: var(--sc-4); border-top: 1px solid var(--dark-line); }
.stage__n { font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: var(--sc-t-2xl); line-height: 1; color: var(--site-highlight); letter-spacing: var(--sc-track-snug); margin-bottom: var(--sc-2); }
.stage h3 { grid-column: 1 / -1; margin: 0; color: var(--sc-canvas); font-size: var(--sc-t-lg); line-height: 1.2; letter-spacing: var(--sc-track-snug); }
.stage p { grid-column: 1 / -1; margin: 0; color: var(--dark-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.stage .stage__you { color: var(--sc-canvas); padding-top: var(--sc-1); }
.stage__you b { color: var(--site-highlight); font-weight: 600; }
.howto__foot { display: grid; grid-template-columns: 1fr 1fr 1.4fr 1fr; gap: var(--sc-6); padding-top: var(--sc-6); border-top: 1px solid var(--dark-line); }
.howto__foot p { margin: 0; color: var(--dark-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.howto__foot b { color: var(--sc-canvas); font-weight: 600; }
@media (max-width: 1100px) {
  .stages { grid-template-columns: 1fr 1fr 1fr; }
  .howto__foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .stages { grid-template-columns: 1fr; gap: var(--sc-5); }
  .howto__foot { grid-template-columns: 1fr; gap: var(--sc-4); }
  .howto__lede { font-size: var(--sc-t-base); }
}

/* ===== block 6, the website without a developer (2026-11-03; the chat on a phone, Robert 2026-11-04; look C, the phone in the middle, Robert 2026-11-04) ===== */
.webarg .sc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sc-7) var(--sc-7); align-items: center; }
.webarg h2 { grid-column: 1 / -1; margin: 0; max-width: 24ch; }
/* the lines: the list dissolves into the grid, lines 1 to 3 left of the phone, 4 to 6 right of it, one row each, centred against the phone's height */
.webarg__text, .webarg__lines { display: contents; }
.webarg__lines { counter-reset: line; }
.webarg__lines li { counter-increment: line; font-size: var(--sc-t-base); line-height: 1.45; max-width: 30ch; padding-left: 2.6rem; align-self: center; }
.webarg__lines li:nth-child(-n+3) { grid-column: 1; }
.webarg__lines li:nth-child(n+4) { grid-column: 3; }
.webarg__lines li:nth-child(1), .webarg__lines li:nth-child(4) { grid-row: 2; }
.webarg__lines li:nth-child(2), .webarg__lines li:nth-child(5) { grid-row: 3; }
.webarg__lines li:nth-child(3), .webarg__lines li:nth-child(6) { grid-row: 4; }
.webarg__lines li::after { content: none; }
.webarg__lines li::before { content: counter(line); top: 0; width: 1.8rem; height: 1.8rem; border: 0; border-radius: 6px; background: var(--site-highlight); color: var(--site-highlight-ink); display: grid; place-items: center; font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.webarg__lines li:nth-child(n+4)::before { background: var(--sc-ink); color: var(--site-highlight); }
/* the phone's column spans the three rows */
.webarg__show { grid-column: 2; grid-row: 2 / 5; display: grid; justify-items: center; align-self: center; }
/* the phone, drawn like an iPhone: black frame, the island, the home bar, side buttons. No image: the screen is markup in the site's own style */
.phone { --phone-w: 250px; position: relative; margin: 0; width: var(--phone-w); display: grid; gap: var(--sc-4); justify-items: center; padding: 0 4px; transform: rotate(-3deg);
  background:
    linear-gradient(var(--sc-ink), var(--sc-ink)) left 0 top 84px / 3px 26px no-repeat,
    linear-gradient(var(--sc-ink), var(--sc-ink)) left 0 top 124px / 3px 48px no-repeat,
    linear-gradient(var(--sc-ink), var(--sc-ink)) left 0 top 180px / 3px 48px no-repeat,
    linear-gradient(var(--sc-ink), var(--sc-ink)) right 0 top 140px / 3px 76px no-repeat; }
.screen { width: 100%; aspect-ratio: 9 / 18; box-sizing: border-box; padding: 44px 12px 26px; border: 9px solid var(--sc-ink); border-radius: 42px; background: var(--sc-canvas); display: grid; grid-template-rows: auto 1fr; gap: var(--sc-3); overflow: hidden; box-shadow: 0 0 0 1px hsl(var(--sc-shadow-color) / 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 30px 50px -22px hsl(var(--sc-shadow-color) / 0.55); }
.phone::before { content: ""; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 66px; height: 19px; border-radius: 999px; background: var(--sc-ink); }
.phone::after { content: ""; position: absolute; left: 50%; top: calc((var(--phone-w) - 8px) * 2 - 9px - 11px); transform: translateX(-50%); width: 72px; height: 4px; border-radius: 999px; background: var(--sc-ink); opacity: 0.85; }
.screen__top { margin: 0; padding-bottom: var(--sc-2); border-bottom: 1px solid var(--site-line); }
.screen__top img { display: block; width: 84px; height: auto; }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; align-content: end; }
/* bubbles like WhatsApp: tight, soft colours (Robert, 2026-11-04): you on the right in the pale lime tint, the AI on the left in white, a wider gap when the sender changes, two ticks under yours */
.chat li { position: relative; font-size: 0.74rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; padding: 6px 9px; border-radius: 10px; max-width: 92%; box-shadow: 0 1px 1px hsl(var(--sc-shadow-color) / 0.12); }
.chat__you { justify-self: end; background: var(--tint-lime); color: var(--sc-ink); border-top-right-radius: 3px; }
.chat__you::after { content: "✓✓"; display: inline-block; margin-left: 7px; vertical-align: -1px; font-size: 0.55rem; letter-spacing: -0.15em; color: var(--site-label-2); }
.chat__ai { justify-self: start; background: var(--sc-surface); color: var(--sc-ink); border-top-left-radius: 3px; }
.chat__ai + .chat__you, .chat__you + .chat__ai { margin-top: 8px; }
.chat .chat__live { background: var(--tint-lime-soft); border: var(--site-card-line-width) solid var(--site-highlight); }
/* the real page the AI shows back: this site's own top, tiny */
.chat__preview { display: grid; gap: 5px; justify-items: start; margin-top: 6px; padding: 8px 9px 9px; border: 1px solid var(--site-line); border-radius: 6px; background: var(--sc-canvas); width: 150px; }
.chat__preview img { display: block; width: 44px; height: auto; margin-bottom: 2px; }
.chat__preview-title { font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: 0.62rem; line-height: 1.15; letter-spacing: var(--sc-track-tight); }
.chat__preview-title mark { box-shadow: inset 0 -0.3em 0 var(--site-highlight); }
.chat__preview-btn { display: inline-block; margin-top: 2px; padding: 3px 7px; border-radius: 4px; background: var(--sc-ink); color: var(--site-highlight); font-size: 0.5rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
/* the message field under the chat, drawn: a rounded field with the lime send dot */
.chat::after { content: ""; justify-self: stretch; max-width: none; height: 30px; margin-top: var(--sc-3); border: 1px solid var(--site-line); border-radius: 999px; background: radial-gradient(circle at calc(100% - 15px) 50%, var(--site-highlight) 0 8px, transparent 9px) var(--sc-surface); box-shadow: none; }
.webarg__caption { margin-top: var(--sc-3); text-align: center; color: var(--site-label-2); font-family: var(--sc-font-display); font-weight: var(--site-label-weight); font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: var(--site-label-tracking); text-transform: var(--site-label-case); max-width: none; transform: rotate(3deg); }
.webarg__caption:empty { display: none; }
@media (max-width: 1100px) {
  .webarg .sc-wrap { grid-template-columns: 1fr; gap: var(--sc-4); align-items: start; }
  .webarg h2 { margin-bottom: var(--sc-4); }
  .webarg__lines li:nth-child(n), .webarg__show { grid-column: 1; grid-row: auto; }
  .webarg__lines li:nth-child(n) { max-width: 40ch; margin-bottom: var(--sc-2); }
  .webarg__show { margin-top: var(--sc-6); }
}
@media (max-width: 700px) {
  .webarg__show { justify-items: center; gap: var(--sc-7); }
  .phone { --phone-w: 240px; transform: none; }
  .webarg__caption { transform: none; }
}

/* the diagram's one line (2026-11-03) */
.how h2:has(+ .how__lede) { margin-bottom: var(--sc-3); }
.how__lede { margin: 0 0 var(--sc-8); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.4; max-width: 44ch; }

/* ===== the proof card with the stamp (Robert, 2026-11-03: the lime box was too intense; make it nice and fun) ===== */
.proofcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-5) var(--sc-7); align-items: center; max-width: 68ch; margin-top: var(--sc-4); padding: var(--sc-5) var(--sc-6); border: var(--site-card-line-width) solid var(--line-strong); border-radius: var(--sc-r-md); background: var(--sc-surface); }
.proofcard .title__marks { margin: 0; gap: var(--sc-3); }
.proofcard .title__marks li { font-size: var(--sc-t-base); max-width: 34ch; }
.stamp { margin: 0; display: grid; justify-items: center; padding: var(--sc-4) var(--sc-5); border: 4px double var(--site-label-2); border-radius: 12px; color: var(--site-label-2); font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; white-space: nowrap; transform: rotate(-7deg); opacity: 0.92; animation: stamp-in 480ms cubic-bezier(0.2, 1.4, 0.4, 1) 700ms both; }
.stamp span:last-child { font-size: 1.45rem; letter-spacing: 0.08em; margin-top: 4px; }
@keyframes stamp-in { from { transform: rotate(-16deg) scale(1.6); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: 0.92; } }
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }
@media (max-width: 700px) {
  .proofcard { grid-template-columns: 1fr; justify-items: start; gap: var(--sc-4); padding: var(--sc-4) var(--sc-5); }
  .stamp { justify-self: center; font-size: 0.8rem; padding: var(--sc-3) var(--sc-4); margin-block: var(--sc-2); }
  .stamp span:last-child { font-size: 1.1rem; }
}

/* the top is as tall as its content, not the screen (Robert, 2026-11-03: fix the spacing) */
.title { min-height: 0; padding-bottom: var(--sc-6); }
.title__mid { padding-bottom: var(--sc-2); }
.title .vat-note { margin-top: 0; }
.proofcard { margin-top: var(--sc-2); }

/* ===== the turn line under the path (Robert, 2026-11-04: stand out more; his pick, the small green lead and the big answer) ===== */
.situation .situation__turn { display: grid; justify-items: center; gap: var(--sc-2); margin-top: var(--sc-9); font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); letter-spacing: var(--sc-track-tight); text-wrap: balance; }
.turn__a { color: var(--site-label-2); font-size: clamp(0.95rem, 1.3vw, 1.15rem); font-weight: var(--site-label-weight); letter-spacing: var(--site-label-tracking); text-transform: var(--site-label-case); margin-bottom: var(--sc-1); }
.turn__b { font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.02; }

/* ===== How it works head (Robert, 2026-11-04: the label was too small, the stripe made the line hard to read; his pick B) ===== */
.howto__head mark { box-shadow: none; color: var(--site-highlight); }
/* the small labels a size up, on every black block and above Robert, so they match */
.dark .label, .who__text .label { font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 600; letter-spacing: 0.14em; }
.howto__head .label--lime { margin-bottom: var(--sc-4); }

/* ===== the How it works foot dissolved (Robert, 2026-11-04, option 1): each line goes to the block that owns it ===== */
/* block 3 ends on one line: "And it stays yours." big and centred, the rest under it */
.sales .howto__yours { display: grid; justify-items: center; gap: var(--sc-2); margin: var(--sc-4) 0 0; max-width: none; text-align: center; text-wrap: balance; color: var(--dark-soft); font-size: var(--sc-t-base); line-height: 1.5; padding-top: var(--sc-8); border-top: 1px solid var(--dark-line); }
.howto__yours b { display: block; color: var(--sc-canvas); font-family: var(--sc-font-display); font-weight: var(--site-weight-heading); font-size: clamp(1.9rem, 4vw, 3.3rem); line-height: 1.02; letter-spacing: var(--sc-track-tight); }
/* who this is for: what you need, one line under the yes-list */
/* .fit__need retired 2026-11-04: the line is now the .needs card */
/* the price: what happens right after the click, under the button */
.price__after { margin: 0; color: var(--dark-soft); font-size: var(--sc-t-sm); line-height: 1.5; max-width: 44ch; }
.price__after b { color: var(--sc-canvas); font-weight: 600; }
/* the guarantee: the definition of following the program, under the marks */
.guarantee__def { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink); line-height: 1.45; letter-spacing: 0; }
/* "yours." in lime (Robert's pick A, 2026-11-04); the line centred in the block, not the paragraph measure */
.howto__yours .yours { color: var(--site-highlight); }
/* more air between the closing headline and its line (Robert, 2026-11-04); the line stays one long line */
.sales .howto__yours { gap: var(--sc-4); }

/* ===== the diagram's two columns (Robert, 2026-11-04: balanced and elegant as they are, a little more standing out; his pick F, all four lifts at half a step, then sharper text and bigger column titles) ===== */
.flow__in li:not(.flow__col-title), .flow__out li:not(.flow__col-title) { font-size: 0.95rem; font-weight: 600; color: var(--sc-ink); line-height: 1.35; padding: var(--sc-2) var(--sc-3); border-width: 2px; box-shadow: 0 6px 18px hsl(var(--sc-shadow-color) / 0.10), 0 1px 2px hsl(var(--sc-shadow-color) / 0.08); }
.flow__out li:not(.flow__col-title) { background: var(--tint-lime); }
.flow__col-title { font-size: clamp(1rem, 1.3vw, 1.2rem); font-weight: 600; letter-spacing: 0.14em; padding-bottom: var(--sc-2); }
/* the labels on black in lime like "How it works" (Robert, 2026-11-04): the older grey rule no longer wins */
.dark .label.label--lime { color: var(--site-highlight); }
/* "guaranteed." in lime letters in the results heading, no stripe (Robert, 2026-11-04) */
.chapter h2 mark { box-shadow: none; color: var(--site-highlight); }

/* ===== the diagram on a phone: in, system, out (Robert's pick, 2026-11-04, from the mobile check: thin black arrows above the system card, lime arrowheads with a black outline above You get) =====
   Under 860 px the curved lines are hidden and the three parts stack. Two rows of three arrows say what flows where.
   The arrows are masks, so their colours are the tokens. The lists' small parallax stays on; the gaps leave room for it. */
@media (max-width: 860px) {
  .flow { --arrow-in: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M12 2v22M4 16l8 8 8-8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M2 2h20L12 14z' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); --arrow-out-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M5.2 3.8h13.6L12 10.9z'/%3E%3C/svg%3E"); }
  .flow .flow__core, .flow .flow__out { position: relative; margin-top: var(--sc-8); }
  .flow .flow__core::before, .flow .flow__out::before, .flow .flow__out::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
  /* three black arrows with a shaft, above the system card */
  .flow .flow__core::before { bottom: calc(100% + var(--sc-3)); width: 7.5rem; height: 1.9rem; background: var(--sc-ink); -webkit-mask: var(--arrow-in) left center / auto 100% no-repeat, var(--arrow-in) center / auto 100% no-repeat, var(--arrow-in) right center / auto 100% no-repeat; mask: var(--arrow-in) left center / auto 100% no-repeat, var(--arrow-in) center / auto 100% no-repeat, var(--arrow-in) right center / auto 100% no-repeat; }
  /* three lime arrowheads with a black outline, above You get: the outline layer, then the lime fill on top */
  .flow .flow__out::before, .flow .flow__out::after { bottom: calc(100% + var(--sc-3)); width: 7.9rem; height: 1.5rem; }
  .flow .flow__out::before { background: var(--sc-ink); -webkit-mask: var(--arrow-out) left center / auto 100% no-repeat, var(--arrow-out) center / auto 100% no-repeat, var(--arrow-out) right center / auto 100% no-repeat; mask: var(--arrow-out) left center / auto 100% no-repeat, var(--arrow-out) center / auto 100% no-repeat, var(--arrow-out) right center / auto 100% no-repeat; }
  .flow .flow__out::after { background: var(--site-highlight); -webkit-mask: var(--arrow-out-fill) left center / auto 100% no-repeat, var(--arrow-out-fill) center / auto 100% no-repeat, var(--arrow-out-fill) right center / auto 100% no-repeat; mask: var(--arrow-out-fill) left center / auto 100% no-repeat, var(--arrow-out-fill) center / auto 100% no-repeat, var(--arrow-out-fill) right center / auto 100% no-repeat; }
}

/* ===== block 6, the phone's ground and its place (Robert's pick D, 2026-11-04, evening): the screen was the page's cream, the phone too far right and too close to the heading =====
   The screen is a dotted chat wallpaper on sand (the page's cream a step darker, mixed from the line colour) with a white header strip like a chat app;
   the AI's bubbles and the message field white on it. The phone a size smaller, more air under the heading, both text blocks pulled in to the phone
   at the same gap, the cluster centred. The caption may be wider than the phone and breaks after the comma; the figure's column is pinned to the phone's
   width so the caption never widens the screen. */
@media (min-width: 701px) { .phone { --phone-w: 228px; } }
@media (min-width: 1101px) {
  .webarg h2 { margin-bottom: var(--sc-6); }
  .webarg__lines li { width: min(100%, 30ch); box-sizing: border-box; }
  .webarg__lines li:nth-child(-n+3) { justify-self: end; }
  .webarg__lines li:nth-child(n+4) { justify-self: start; }
}
.phone { grid-template-columns: 100%; }
.webarg__caption { width: max-content; max-width: 13em; justify-self: center; }
.screen { background: radial-gradient(circle, color-mix(in oklab, var(--sc-ink) 9%, transparent) 1px, transparent 1.6px) 0 0 / 13px 13px, color-mix(in oklab, var(--site-line) 24%, var(--sc-canvas)); }
.screen__top { margin: -44px -12px 0; padding: 44px 12px 8px; background: var(--sc-surface); border-bottom: 1px solid var(--site-line); }
.chat__ai { background: var(--sc-surface); }
.chat .chat__live { background: var(--sc-surface); }
.chat::after { background: radial-gradient(circle at calc(100% - 15px) 50%, var(--site-highlight) 0 8px, transparent 9px) var(--sc-surface); }

/* ===== block 7, the bonuses (Robert's picks, 2026-11-04, evening): look A, two columns of three cards in a checkerboard of lime and paper,
   the chip a breath above the title, the text at a reading measure; D's count, +1 to +6 top right, made gentle: a size down, medium weight, dark green =====
   The count is a CSS counter, no words change. Under 860 px one column, the count a size smaller again. */
.bonuses .plates { grid-template-columns: 1fr 1fr; gap: var(--sc-5); counter-reset: bonus; }
.bonuses .plate { counter-increment: bonus; position: relative; grid-template-columns: 1fr; align-content: start; gap: var(--sc-3); padding: var(--sc-6) var(--sc-7) var(--sc-7); }
.bonuses .plate .chip { justify-self: start; margin-bottom: var(--sc-2); }
.bonuses .plate h3 { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-tight); padding-right: 3.5rem; }
.bonuses .plate p { font-size: var(--sc-t-base); max-width: 46ch; }
.bonuses .plate:nth-child(odd) { background: var(--sc-surface); }
.bonuses .plate:nth-child(4n+1), .bonuses .plate:nth-child(4n+4) { background: var(--tint-lime); }
.bonuses .plate:nth-child(n) .chip--lime { background: var(--site-highlight); color: var(--site-highlight-ink); }
.bonuses .plate:nth-child(4n+2) .chip--lime, .bonuses .plate:nth-child(4n+3) .chip--lime { background: var(--sc-accent); color: var(--site-highlight); }
.bonuses .plate::before { content: "+" counter(bonus); position: absolute; top: var(--sc-5); right: var(--sc-6); font-family: var(--sc-font-display); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; font-size: clamp(1.4rem, 1.75vw, 1.75rem); letter-spacing: var(--sc-track-snug); color: var(--site-label-2); opacity: 0.8; }
@media (max-width: 860px) {
  .bonuses .plates { grid-template-columns: 1fr; }
  .bonuses .plate { padding: var(--sc-5) var(--sc-5) var(--sc-6); }
  .bonuses .plate p { grid-column: auto; }
  .bonuses .plate::before { font-size: 1.35rem; top: var(--sc-4); right: var(--sc-5); }
}

/* ===== the bonuses heading: a straight lime underline under one word (Robert's pick J of the words session's mocks, 2026-11-04; markup bff5c42) =====
   No stripe behind the words, because the block above already has one. */
.lime-under { text-decoration: underline; text-decoration-color: var(--site-highlight); text-decoration-thickness: 0.14em; text-underline-offset: 0.08em; text-decoration-skip-ink: none; }

/* ===== block 8, who this is for (Robert's pick I of the words session's ten mocks, 2026-11-04): gentle. One step more air under the title,
   the yes-dot in the soft lime of the plates with the check in dark green; size, ring and place unchanged, the no-marks untouched. ===== */
.fit__wrap { gap: var(--sc-7); }
.fit .marks--yes li::before { background: var(--tint-lime); }
.fit .marks--yes li::after { color: var(--site-label-2); }

/* ===== block 8, "Everything you need" (Robert's pick A, 2026-11-04, evening): the what-you-need line is a small block of its own, between the
   yes-list and Who it isn't for. An outlined card on paper, a green label, three ticked lines in the soft lime of the list's dots. Words by the
   words session (h3.needs__title, ul.needs__list); p.fit__need and its rules are retired. ===== */
.needs { display: grid; gap: var(--sc-3); padding: var(--sc-5) var(--sc-6); border: var(--site-card-line-width) solid var(--line-strong); border-radius: var(--sc-r-md); background: var(--sc-surface); max-width: 36rem; }
.needs__title { margin: 0; font-size: var(--site-label-size); font-weight: var(--site-label-weight); letter-spacing: var(--site-label-tracking); text-transform: var(--site-label-case); color: var(--site-label-2); }
.needs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-2); }
.needs__list li { position: relative; padding-left: 1.9rem; font-size: var(--sc-t-base); line-height: 1.4; font-weight: 500; }
.needs__list li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: var(--site-card-line-width) solid var(--line-strong); background: var(--tint-lime); }
.needs__list li::after { content: "✓"; position: absolute; left: 0; top: 0.2em; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; font-weight: 700; font-size: 0.7rem; color: var(--site-label-2); }
/* the card centred under the list, the label centred too (Robert's pick B of five placements, 2026-11-04) */
.needs { justify-self: center; width: 100%; }
.needs__title { text-align: center; }
.needs__list { justify-self: center; }

/* ===== blocks 6 to 8 on a phone (mobile check, Robert's OK, 2026-11-04, evening) =====
   1. Who this is for: the sixteen lines fade in together under 860 px. The list is taller than a phone screen there, and the
      engine's 90 ms stagger (written inline, hence the !important) left lines 3 to 16 still invisible when a reader reached them.
   2. The chat on the phone a step bigger under 700 px: bubbles 0.82rem, the card 156 px, its title and button up with it. Not above
      0.82rem: the first bubble would wrap to three lines and the card would no longer fit its bubble.
   3. The caption on one line: the 13em cap was for an older caption that broke after a comma. The figure's column is pinned to the
      phone's width, so the wider caption never widens the layout.
   4. The website heading 48 px above its first line under 1100 px, like the bonuses and Who this is for headings.
   5. The check-mark dots centred on the first line under 700 px, where the list drops to the base size and the dot did not move. */
@media (max-width: 860px) {
  .fit .marks--yes > li { transition-delay: 0s !important; }
}
@media (max-width: 700px) {
  .chat li { font-size: 0.82rem; }
  .chat__preview { width: 156px; }
  .chat__preview-title { font-size: 0.7rem; }
  .chat__preview-btn { font-size: 0.58rem; }
  .marks li::before, .marks li::after { top: -0.08em; }
}
.webarg__caption { max-width: none; }
@media (max-width: 1100px) {
  .webarg h2 { margin-bottom: var(--sc-6); }
}

/* ===== who this is for: the two columns flow on their own (Robert, 2026-11-04, evening: a hole in the right column, spare space at the bottom) =====
   The grid shared its rows, so a three-line item on the left stretched the item beside it. From 861 px the list is two CSS columns, eight lines
   each (a column break after the eighth), items never split; the ul's gap is a margin here. Reading order: down the left, then the right, as the
   words session wrote it. Under 860 px the one-column grid stays. The engine's stagger still reaches every li. */
@media (min-width: 861px) {
  .marks--two { display: block; columns: 2; column-gap: var(--sc-8); }
  .marks--two > li { break-inside: avoid; margin-bottom: var(--sc-4); }
  .marks--two > li:nth-child(8) { break-after: column; }
  .marks--two > li:last-child { margin-bottom: 0; }
}

/* ===== the close block spaced like the rest of the page (the words session's measure, Robert, 2026-11-05) =====
   32 px from the heading to the button and from the VAT note to the closing line, the price block's rhythm; the button keeps its 16 px to the VAT note. */
.close__wrap { gap: var(--sc-6); }
.close .vat-note { margin-top: calc(-1 * var(--sc-4)); }

/* ===== the close block, three asks (Robert, 2026-11-05, through the words session) =====
   1. The heading on two lines at 1440: the 18ch cap and the wrap's 58rem cap kept "running in two weeks." from one line at the large size;
      lifted for the heading, balance off so the forced break decides. Three lines on a phone, as allowed.
   2. The closing line looks like "Who's behind this" above Robert's block: the dark green label a size up, weight 600, 0.14em tracking.
   3. The block closer to the FAQ on a laptop: 138 px from the last question to the heading (was 194), the phone's 136 kept. */
.close__wrap { max-width: none; }
.close h2 { max-width: none; text-wrap: initial; }
.close .close__line { font-family: var(--sc-font-display); font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 600; line-height: 1.3; letter-spacing: var(--sc-track-snug); color: var(--site-label-2); text-transform: none; max-width: none; } /* the display font like a small heading, not spaced capitals (Robert's pick E, 2026-11-05) */
@media (min-width: 861px) { .close { padding-top: var(--sc-2); } }
/* more air between the close heading and the button: 48 px, the button itself unchanged (Robert's pick A of five button looks, 2026-11-05) */
.close h2 { margin-bottom: var(--sc-4); }

/* ===== two small ones (Robert, 2026-11-05, through the words session) =====
   Robert's block sits at the tight gap like the bonuses and Who this is for above it, so three blocks in a row share one rhythm.
   On a phone the Bonus chips in the price stack were the smallest text on the page (10.9 px); now the chips' own size, 12 px. */
.who { padding-top: var(--sc-8); }
@media (max-width: 860px) { .stack__bonus .chip { font-size: var(--site-label-size); padding: 3px 9px; } }

/* ===== Robert's block: the plate around the photo goes (Robert's pick A of five, 2026-11-05) =====
   The round photo alone with its black hairline on the cream, the chip in the flow under it. */
.who__photo { background: none; border: 0; border-radius: 0; padding: 0; gap: var(--sc-4); }
.who__photo .chip { position: static; }