/* lst — shared public-site design system
   Used by index.html and service-thanks.html, both scoped under
   body.page-public so they share one token set and one set of real
   components (button, price-card, field, faq, etc.) instead of parallel
   stylesheets. Blue (--brand scale) is the primary action color, used
   sparingly on CTAs and progress indicators; a functional red (--flag)
   marks flagged listing issues; a muted green (--good) is reserved for
   "what's working" / resolved states. */

/* ==================== shared: index.html / service-thanks.html ==================== */

  body.page-public{
    --ink:#161A22;
    --ink-2:#3B4250;
    --muted:#69727F;
    --muted-2:#8A93A0;
    --bg:#FFFFFF;
    --surface:#ffffff;
    --surface-2:#F3F3F3;
    --surface-3:#F8F8F8;
    --line:#EAEAEA;
    --line-soft:#F0F0F0;
    /* brand scale, lightest to darkest — brand + brand-light are the two
       gradient stops for CTAs/badges; brand-dark is the contrast-safe
       anchor for text and icon-on-pale-bg pairs; brand-soft is backgrounds
       and rings. This blue is darker than the old cyan (L53% vs L68%), so
       it needs WHITE text on solid fills, never ink (2.4:1, fails AA). */
    --brand-soft:#EAEDFF;
    --brand-light:#4C63FF;
    --brand:#102EFF;
    --brand-mid:#0C24D6;
    --brand-dark:#0B1F8F;
    --flag:#DA5F4A;
    --flag-dark:#AC4B39;
    --flag-soft:#FFE5DF;
    --warn:#D68A3E;
    --warn-dark:#A8691F;
    --warn-soft:#FFECDF;
    --good:#5FA37D;
    --good-dark:#3F7D5C;
    --good-soft:#E3F8EC;
    --shadow-lg:0 28px 80px rgba(22,26,34,.09);
    --shadow-md:0 16px 44px rgba(22,26,34,.07);
    --shadow-sm:0 6px 18px rgba(22,26,34,.045);
    /* radius scale — sm for small controls/tags, md for inline photo/panel
       frames, lg for standalone photo frames, xl for primary content cards,
       full for pills and circles */
    --radius-sm:12px;
    --radius-md:16px;
    --radius-lg:20px;
    --radius-xl:24px;
    --radius-full:999px;
    --max:1180px;
  }
  body.page-public *{box-sizing:border-box}
  html:has(body.page-public){scroll-behavior:smooth}
  body.page-public{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
  body.page-public img, body.page-public svg{display:block;max-width:100%}
  body.page-public a{color:inherit}
  body.page-public button, body.page-public input, body.page-public select, body.page-public textarea{font:inherit}
  body.page-public .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  body.page-public :focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent);outline-offset:3px}

  body.page-public .skip-link{position:fixed;left:16px;top:12px;z-index:9999;padding:12px 16px;border-radius:var(--radius-sm);background:var(--ink);color:#fff;transform:translateY(-150%)}
  body.page-public .skip-link:focus{transform:none}

  /* header / brand / nav — static, not fixed, no divider line */
  body.page-public .site-header{background:var(--bg)}
  body.page-public .nav{max-width:var(--max);height:72px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
  body.page-public .brand{display:inline-flex;align-items:center;text-decoration:none}
  body.page-public .brand-logo{display:inline-block;height:28px;width:auto;aspect-ratio:234/101;margin-bottom:32px;background-color:var(--ink);-webkit-mask-image:url("asset/full-logo-dark.svg");mask-image:url("asset/full-logo-dark.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:left center;mask-position:left center}
  body.page-public #footer-logo{background-color:var(--muted-2)}
  body.page-public .nav-links{display:flex;align-items:center;gap:28px}
  body.page-public .nav-link{font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
  body.page-public .nav-link:hover{color:var(--ink)}

  /* buttons — three tiers, shared by every page: primary (solid indigo),
     outline (bordered), plain (text-only). Red stays reserved for the
     flagged-issue UI and never appears on a button. */
  body.page-public .button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius-full);text-decoration:none;font-size:14px;font-weight:600;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
  body.page-public .button:hover{transform:translateY(-1px)}
  body.page-public .button-primary{background-color:var(--brand);background-image:linear-gradient(to top, var(--brand), var(--brand-light));color:#fff;box-shadow:0 8px 22px rgba(35,49,54,.08)}
  body.page-public .button-outline{background:#fff;border:1px solid var(--line-soft);color:var(--ink-2)}
  body.page-public .button-outline:hover{transform:translateY(-1px)}
  body.page-public .button-plain{min-height:auto;padding:0;border:0;background:transparent;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
  body.page-public .button-plain:hover{transform:none}

  body.page-public .eyebrow{margin:0 0 16px;color:var(--ink-2);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

  /* hero — full-bleed gradient wash behind content, a hint of brand-soft
     fading to white, not a wash. .section-soft reuses the same recipe
     elsewhere since it's already full-bleed and needs no pseudo-element. */
  body.page-public .hero{position:relative}
  body.page-public .hero::before{
    content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;
    z-index:0;pointer-events:none;
    background:linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 40%, white) 0%, #fff 62%);
  }
  body.page-public .hero > *{position:relative;z-index:1}
  body.page-public .hero{padding:96px 28px;text-align:center}
  body.page-public .hero-content{max-width:800px;margin:0 auto}
  body.page-public h1, body.page-public h2, body.page-public h3, body.page-public p{overflow-wrap:break-word}
  body.page-public h1, body.page-public h2, body.page-public h3{font-family:"Mona Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  body.page-public h1{margin:16px 0 0;font-size:clamp(32px,4.6vw,54px);font-weight:800;line-height:1.14;letter-spacing:-.035em;color:var(--ink)}
  body.page-public .hero-copy{max-width:600px;margin:24px auto 0;color:var(--muted);font-size:19px;line-height:1.68;letter-spacing:-.012em}
  body.page-public .hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-top:36px}
  body.page-public .hero-actions .button{min-height:48px;padding:0 20px;font-size:14.5px}
  body.page-public .hero-trust{margin:16px 0 0;color:var(--muted-2);font-size:13.5px;font-weight:500}
  body.page-public .hero-trust::before{content:"✓ "}


  /* section shell */
  body.page-public .section{max-width:var(--max);margin:0 auto;padding:120px 28px}
  body.page-public .section-soft{max-width:none;background:linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 40%, white) 0%, #fff 60%)}
  body.page-public .section-head{max-width:640px;margin-bottom:48px}
  body.page-public .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
  body.page-public h2{margin:0;color:var(--ink);font-size:clamp(28px,3.6vw,44px);font-weight:800;line-height:1.14;letter-spacing:-.03em}
  body.page-public .section-head>p:not(.eyebrow){max-width:720px;margin:20px 0 0;color:var(--muted);font-size:17px;line-height:1.7}
  body.page-public .section-head.center>p:not(.eyebrow){margin-left:auto;margin-right:auto}
  body.page-public .lead{max-width:652px;margin:24px 0 0;color:var(--muted);font-size:18px;line-height:1.72}
  body.page-public .section-head .section-note{max-width:none;margin-top:12px;color:var(--muted-2);font-size:13px;font-weight:500}

  body.page-public .disclaimer{max-width:820px;margin:28px auto 0;padding:8px 16px;border-left:3px solid color-mix(in srgb, var(--flag) 55%, white);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-2);font-size:13.5px;text-align:left}
  body.page-public .disclaimer strong{color:var(--flag)}

  /* pricing / package cards — two tiers side by side. Selecting a tier
     collapses the other card and expands an inline form on the right,
     with a back arrow to return to the two-card view. */
  body.page-public .pricing-interactive{display:flex;gap:24px;align-items:stretch;max-width:920px;margin:44px auto 0}
  body.page-public .pricing-interactive .price-card{flex:1 1 0;min-width:0}
  body.page-public .pricing-interactive.is-open .price-card:not(.is-selected){display:none}
  body.page-public .pricing-interactive.is-open .price-card.is-selected{flex:0 0 384px;order:1}
  body.page-public .pricing-interactive.is-open .price-card.is-selected .pricing-select{display:none}
  body.page-public .pricing-form-panel{order:2;flex:1 1 0;min-width:0;border-radius:var(--radius-xl);background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);padding:32px;opacity:0;transform:translateX(16px);transition:opacity .35s ease, transform .35s ease}
  body.page-public .pricing-form-panel:not([hidden]){display:block}
  body.page-public .pricing-interactive.is-open .pricing-form-panel{opacity:1;transform:translateX(0)}
  body.page-public .pricing-form-panel .section-head{max-width:none;margin-bottom:0}
  body.page-public .pricing-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:0;border:0;background:transparent;padding:0;color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer}
  body.page-public .pricing-back:hover{color:var(--ink)}
  body.page-public .price-card{display:flex;flex-direction:column;padding:32px;border-radius:var(--radius-xl);background:#fff;border:1px solid var(--line-soft)}
  body.page-public .price-card-featured{border:1px solid color-mix(in srgb, var(--brand) 55%, white);box-shadow:0 0 0 3px var(--brand-soft);background:#fff}
  body.page-public .price-badge{align-self:flex-start;display:inline-flex;padding:8px 12px;border-radius:var(--radius-full);background:#fff;color:var(--ink-2);border:1px solid var(--line-soft);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  body.page-public .price-card-featured .price-badge{background-color:var(--brand);background-image:linear-gradient(to top, var(--brand), var(--brand-light));color:#fff;border-color:var(--brand-light)}
  body.page-public .price-card h3{margin:16px 0 0;font-size:18px;font-weight:600;color:var(--muted)}
  body.page-public .price-amount{margin:8px 0 4px;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
  body.page-public .price-unit{font-size:12.5px;font-weight:600;color:var(--muted-2);letter-spacing:0}
  body.page-public .price-desc, body.page-public .price-card>p:not(.fine){margin:0 0 20px;color:var(--muted);font-size:13.5px}
  body.page-public .price-list{display:grid;gap:12px;margin:0 0 24px;padding:0;list-style:none}
  body.page-public .price-list li{position:relative;padding-left:24px;color:var(--ink-2);font-size:14px;line-height:1.5}
  body.page-public .price-list li::before{content:"✓";position:absolute;left:0;color:var(--brand-dark);font-weight:600}
  body.page-public .price-card .button{width:100%}
  body.page-public .fine{margin-top:auto;color:var(--muted-2);font-size:12px;font-weight:500;line-height:1.6}

  /* form */
  body.page-public .tally-embed{width:100%;border:0;zoom:.9}
  body.page-public .tally-embed:not([hidden]){display:block}
  body.page-public .trust-note{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted-2)}

  /* faq */
  body.page-public .faq-list, body.page-public .faq{max-width:832px;margin:0 auto}
  body.page-public details{border-bottom:1px solid #cfd6d4}
  body.page-public summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:500;letter-spacing:-.015em}
  body.page-public summary::-webkit-details-marker{display:none}
  body.page-public summary::after{content:"+";color:var(--ink-2);font-size:24px;font-weight:400}
  body.page-public details[open] summary::after{content:"−"}
  body.page-public details p{max-width:700px;margin:-4px 0 24px;color:var(--muted);font-size:15px;line-height:1.72}

  body.page-public footer{max-width:var(--max);margin:0 auto;padding:40px 28px 52px;display:flex;align-items:center;justify-content:space-between;color:var(--muted-2);font-size:12px}
  body.page-public footer #footer-logo{opacity:.5;height:20px;width:auto}

  @media(max-width:760px){
    body.page-public .pricing-interactive{flex-direction:column;max-width:480px}
    body.page-public .pricing-interactive.is-open .price-card.is-selected{flex:none}
  }
  @media(max-width:760px){
    body.page-public .nav{height:68px;padding:0 20px}
    body.page-public .nav-link{font-size:12.5px}
    body.page-public .button{min-height:44px}
    body.page-public .hero{padding:48px 20px 40px}
    body.page-public h1{font-size:36px}
    body.page-public .hero-copy{font-size:17px}
    body.page-public .hero-actions{display:grid;grid-template-columns:1fr}
    body.page-public .hero-actions .button:not(.button-plain){width:100%}
    body.page-public .section{padding:64px 20px 76px}
    body.page-public .section-head{margin-bottom:36px}
    body.page-public .section-head>p:not(.eyebrow){font-size:16px}
    body.page-public footer{padding:32px 20px 44px;align-items:center;flex-direction:column}
  }
  @media(prefers-reduced-motion:reduce){html:has(body.page-public){scroll-behavior:auto}body.page-public *, body.page-public *::before, body.page-public *::after{transition:none!important;animation:none!important}}
  @media(prefers-contrast:more){body.page-public{--muted:#445258;--muted-2:#536167}body.page-public .button-outline{border-width:2px}}

/* ==================== index.html specific ==================== */

  /* split layout: a real interior next to a section's own content, used by
     why/how/journey below. .split-right flips which side the photo sits on
     for rhythm; stacks photo-above-content on narrow screens. */
  body.page-public .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:var(--max);margin:0 auto}
  body.page-public .split-media{order:1}
  body.page-public .split-content{order:2}
  body.page-public .split-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-md)}
  body.page-public .split-content .section-head{max-width:none;margin-bottom:32px}
  body.page-public .split-right .split-media{order:2}
  body.page-public .split-right .split-content{order:1}
  body.page-public .split-content .value-grid, body.page-public .split-content .journey-grid{grid-template-columns:1fr;gap:24px;margin-top:32px;margin-bottom:32px}
  body.page-public .split-content .credibility-tags{justify-content:flex-start;margin-left:0}
  body.page-public .split-content .flow{margin-top:32px;margin-bottom:32px;max-width:none}
  @media(max-width:900px){
    body.page-public .split{grid-template-columns:1fr;gap:28px}
    body.page-public .split-right .split-media{order:1}
    body.page-public .split-right .split-content{order:2}
    body.page-public .split-media img{aspect-ratio:1/1}
  }

  /* what you'll get: a static annotated listing next to the actual
     findings document — this is the real deliverable format, not a
     product demo, so nothing here is clickable */
  body.page-public .annotated-mock{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;max-width:1040px;margin:44px auto 0}
  body.page-public .listing-mock-frame{border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
  body.page-public .listing-mock-bar{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;height:40px;padding:0 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
  body.page-public .listing-mock-dots{display:flex;gap:4px}
  body.page-public .listing-mock-dots span{width:7px;height:7px;border-radius:50%;background:var(--line);border:1px solid var(--muted-2)}
  body.page-public .listing-mock-url{justify-self:center;padding:4px 16px;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
  body.page-public .listing-mock-body{padding:24px 24px 28px}
  body.page-public .listing-photo{position:relative;height:220px;margin-bottom:20px;border-radius:var(--radius-md);overflow:hidden}
  body.page-public .listing-photo img{width:100%;height:100%;object-fit:cover}
  body.page-public .listing-title{display:flex;align-items:flex-start;gap:12px;margin:0 0 8px;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
  body.page-public .listing-meta{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--muted);font-size:13.5px}
  body.page-public .listing-desc{position:relative;margin:0;padding-right:28px;color:var(--ink-2);font-size:14px;line-height:1.7}

  body.page-public .annotation-mark{
    flex:none;width:24px;height:24px;display:inline-grid;place-items:center;
    margin-top:0;border:2px solid #fff;border-radius:50%;background:var(--ink);color:#fff;
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;line-height:1;
    box-shadow:0 2px 6px rgba(22,26,34,.35);
  }
  /* colored to match the severity of the finding each number maps to, so a
     host can tell impact at a glance without cross-referencing the list */
  body.page-public .annotation-mark-high{background:var(--flag-dark)}
  body.page-public .annotation-mark-medium{background:var(--warn-dark)}
  body.page-public .annotation-mark-good{background:var(--good-dark)}
  .listing-photo .annotation-mark{position:absolute}
  .listing-desc .annotation-mark{position:absolute;right:-4px;bottom:0}
  body.page-public .demo-hint{max-width:1040px;margin:16px auto 0;color:var(--muted-2);font-size:12.5px;text-align:center}
  @media(max-width:860px){
    body.page-public .annotated-mock{grid-template-columns:1fr;max-width:560px}
  }
  @media(max-width:520px){
    body.page-public .listing-mock-body{padding:20px}
    body.page-public .listing-photo{height:192px}
  }

  /* deliverable preview: what the review report itself looks like */
  body.page-public .deliverable-preview{border-radius:var(--radius-md);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md)}
  body.page-public .deliverable-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;background:var(--ink-2);color:#fff}
  body.page-public .deliverable-head strong{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
  body.page-public .deliverable-head span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:rgba(255,255,255,.6)}
  body.page-public .deliverable-body{padding:24px 24px 28px;display:grid;gap:20px}
  /* severity system: red = hurts the listing most, amber = worth fixing,
     green = already working well. Set explicitly per finding, never by
     position — the color is a signal, not decoration. */
  body.page-public .deliverable-finding{padding-left:16px;border-left:3px solid var(--line)}
  body.page-public .deliverable-finding-high{border-left-color:color-mix(in srgb, var(--flag) 55%, white)}
  body.page-public .deliverable-finding-medium{border-left-color:color-mix(in srgb, var(--warn) 55%, white)}
  body.page-public .deliverable-finding-good{border-left-color:color-mix(in srgb, var(--good) 55%, white)}
  body.page-public .deliverable-finding-tag{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
  body.page-public .severity-dot{width:6px;height:6px;border-radius:50%;background:var(--line)}
  body.page-public .deliverable-finding-high .severity-dot{background:var(--flag)}
  body.page-public .deliverable-finding-medium .severity-dot{background:var(--warn)}
  body.page-public .deliverable-finding-good .severity-dot{background:var(--good)}
  body.page-public .deliverable-finding h4{margin:0 0 8px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
  body.page-public .deliverable-finding p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.6}

  /* why lst: three scannable value props, dot-grid + a faint blob backdrop
     since this is the USP section and earns more visual presence */
  body.page-public .why-section{
    position:relative;overflow:hidden;
    background:
      /** radial-gradient(circle, var(--surface-3) 1px, transparent 1.6px) 0 0/22px 22px, **/
      linear-gradient(180deg, color-mix(in srgb, var(--brand-soft) 40%, white) 0%, #fff 60%);
  }
  body.page-public .why-section > *{position:relative;z-index:1}
  body.page-public .value-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;max-width:var(--max);margin:44px auto 0}
  body.page-public .credibility-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:36px auto 0;max-width:var(--max)}
  body.page-public .credibility-tags span{display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--radius-full);background:#fff;border:1px solid var(--line);color:var(--ink-2);font-size:12.5px;font-weight:500}
  @media(max-width:760px){
    body.page-public .value-grid{grid-template-columns:1fr;gap:32px}
  }

  /* item card: shared by the why-section value-grid (no label) and the
     features journey-grid (with label) — icon sits beside the heading
     instead of stacked above it, so cards stay compact next to the split
     photo rather than towering over it */
  body.page-public .item-card{padding:0}
  body.page-public .item-head{display:flex;align-items:flex-start;gap:16px}
  body.page-public .item-icon{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--radius-full);background:var(--brand-soft);color:var(--brand)}
  body.page-public .item-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  body.page-public .item-heading{flex:1;min-width:0}
  body.page-public .item-label{display:block;margin-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  body.page-public .item-card h3{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:-.015em}
  body.page-public .item-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}

  /* how it works: numbered 1-2-3 steps, step 2 (human) visually emphasized */
  body.page-public .flow{position:relative;max-width:640px;margin:48px auto 0}
  body.page-public .flow::before{content:"";position:absolute;left:23px;top:28px;bottom:28px;width:2px;background:var(--line-soft)}
  body.page-public .flow-fill{position:absolute;left:23px;top:28px;bottom:28px;width:2px;background:var(--brand);transform:scaleY(var(--flow-progress,0));transform-origin:top;transition:transform .1s linear}
  @media(prefers-reduced-motion:reduce){body.page-public .flow-fill{transition:none}}
  body.page-public .flow-step{position:relative;display:flex;align-items:center;gap:24px;padding-bottom:24px}
  body.page-public .flow-step:last-child{padding-bottom:0}
  body.page-public .flow-icon{position:relative;z-index:1;flex:none;width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--surface-2);color:var(--line-soft);display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;transition:background .25s ease,border-color .25s ease,color .25s ease}
  body.page-public .flow-icon.is-active{background-color:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand)}
  @media(prefers-reduced-motion:reduce){body.page-public .flow-icon{transition:none}}
  body.page-public .flow-text h3{margin:0;font-size:17px;font-weight:600}

  /* what we look at: borderless icon grid, matches why-section language */
  body.page-public .journey-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:var(--max);margin:44px auto 0}
  @media(max-width:900px){
    body.page-public .journey-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  }
  @media(max-width:520px){
    body.page-public .journey-grid{grid-template-columns:1fr}
  }

/* ==================== service-thanks.html specific ==================== */

  body.page-public.page-thanks{min-height:100vh;display:grid;place-items:center;padding:24px}
  body.page-public .card{max-width:620px;padding:48px;border-radius:var(--radius-xl);background:#fff;box-shadow:var(--shadow-md)}
  body.page-public .card .icon{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--good-soft);color:var(--good-dark);font-size:24px;font-weight:600}
  body.page-public .card h1{margin:24px 0 12px;font-size:40px;line-height:1.1}
  body.page-public .card p{margin:0;color:var(--muted);font-size:16px;line-height:1.7}
  body.page-public .card .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
  @media(max-width:600px){
    body.page-public .card{padding:32px 28px}
    body.page-public .card h1{font-size:33px}
    body.page-public .card .actions{display:grid}
    body.page-public .card .actions .button{width:100%}
  }