/* ecommerces.io landing: one stylesheet, no build step.
   Layer order is fixed here; later layers win regardless of specificity. */
@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100dvh; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-inline-size: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; }
  p, h1, h2, h3, li, dd, summary { overflow-wrap: break-word; }
  [hidden] { display: none !important; }
}

@layer tokens {
  /* Self-hosted OFL fonts: Plus Jakarta Sans 700 (display) and IBM Plex Sans 400/600 (body, renamed "Vereo Text"
     because "Plex" is a Reserved Font Name and subsets are modified versions), Latin + Latin Extended-A subset (č ć đ š ž), built by scripts/build-fonts.py.
     Fallback faces are metric-matched to Arial/Liberation Sans so the swap does not shift layout. */
  @font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/jakarta-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC; }
  @font-face { font-family: "Vereo Text"; src: url("/assets/fonts/plex-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC; }
  @font-face { font-family: "Vereo Text"; src: url("/assets/fonts/plex-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0100-017F, U+2000-206F, U+20AC; }
  @font-face { font-family: "Jakarta Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
    font-weight: 700; size-adjust: 99.94%; ascent-override: 103.86%; descent-override: 22.21%; line-gap-override: 0%; }
  @font-face { font-family: "Vereo Text Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
    font-weight: 400; size-adjust: 100.47%; ascent-override: 102.02%; descent-override: 27.37%; line-gap-override: 0%; }
  @font-face { font-family: "Vereo Text Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
    font-weight: 600; size-adjust: 97.24%; ascent-override: 105.41%; descent-override: 28.28%; line-gap-override: 0%; }
  :root {
    color-scheme: light;
    /* Vereo brand palette, Direction B "Calm Teal Verified" (marketing/vereo-brand.md).
       Hex from the brand doc, converted to oklch; ratios in scripts/contrast.mjs. */
    --ink:        oklch(20.77% 0.0398 265.75);   /* #0F172A deep ink */
    --ink-muted:  oklch(55.44% 0.0407 257.42);   /* #64748B slate, 4.76:1 on white */
    --paper:      oklch(100% 0 0);               /* #FFFFFF page base */
    --surface:    oklch(100% 0 0);               /* #FFFFFF */
    --line:       oklch(92.88% 0.0126 255.51);   /* #E2E8F0 decorative only */
    --brand-teal: oklch(60.02% 0.1038 184.70);   /* #0D9488: 3.74:1 on white, so non-text and large text only */
    --accent:     oklch(51.09% 0.0861 186.39);   /* #0F766E teal deep: links, small text, button fills (5.47:1) */
    --accent-ink: oklch(100% 0 0);
    --accent-soft: oklch(98.36% 0.0142 180.72);  /* #F0FDFA sky wash: hero band, soft cards */
    --ok:    oklch(50% 0.12 150);
    --warn:  oklch(68% 0.14 75);
    --error: oklch(52% 0.19 27);
    /* derived (contrast-checked in scripts/contrast.mjs) */
    --accent-hover: oklch(43.70% 0.0705 188.22);  /* #115E59, one step darker than teal deep */
    --error-soft: color-mix(in oklab, var(--error) 10%, var(--surface));   /* oklab: no hue swing towards white's hue 0 */
    --ok-soft: color-mix(in oklab, var(--ok) 12%, var(--surface));
    --warn-soft: color-mix(in oklab, var(--warn) 35%, var(--surface));
    --field-line: var(--ink-muted);           /* form borders need 3:1, --line is decorative only */
    --focus: var(--brand-teal);               /* 3.74:1 on white, 3.59:1 on sky wash (non-text, needs 3:1) */
    --mock-bg: oklch(98.42% 0.0034 247.86);   /* #F8FAFC slate-50: keeps slate text at 4.5:1+ */
    --shadow: oklch(20.77% 0.0398 265.75);
    --stamp: var(--accent);                   /* receipt PRIMJER stamp */
    --stamp-red: oklch(53.08% 0.1969 19.54);  /* #C41E3A optional brand-moment token (seal); never in admin UI, never a CTA */

    --font-display: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font: "Vereo Text", "Vereo Text Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.925rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1: clamp(1.25rem, 1.18rem + 0.35vw, 1.4rem);
    --step-2: clamp(1.56rem, 1.42rem + 0.7vw, 1.95rem);
    --step-3: clamp(1.95rem, 1.7rem + 1.25vw, 2.75rem);

    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2.5rem; --space-7: 4rem;
    --radius-s: 6px; --radius-m: 10px;
    --measure: 39em;              /* = 65ch in IBM Plex; em, not ch, so the font swap does not rewrap */
    --page: 72rem;
    --ease: cubic-bezier(.2, 0, 0, 1);
    --dur-fast: 120ms; --dur: 200ms;
  }
  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; }
  }
}

@layer base {
  html { scroll-padding-block-start: var(--space-5); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body { font-family: var(--font); font-size: var(--step-0); color: var(--ink); background: var(--paper); }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-wrap: balance; letter-spacing: -0.015em; }
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
  h3 { font-size: var(--step-1); }
  strong, b { font-weight: 600; }
  p { text-wrap: pretty; }
  a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px;
      &:hover { text-decoration-thickness: 2px; } }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
  ::selection { background: var(--accent-soft); }
  code, .mono { font-family: var(--mono); font-size: .92em; }
  @view-transition { navigation: auto; }
  @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
}

@layer layout {
  .wrap { inline-size: min(100% - 2 * var(--space-4), var(--page)); margin-inline: auto; }
  .site-header { padding-block: var(--space-4); border-block-end: 1px solid var(--line);
    & .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } }
  main > section { padding-block: var(--space-7) 0; }
  main > section:last-of-type { padding-block-end: var(--space-7); }
  .section-head { max-inline-size: var(--measure); margin-block-end: var(--space-5);
    & p { color: var(--ink-muted); margin-block-start: var(--space-2); } }
  /* sky-wash band behind the hero, full-bleed without extra markup or overflow */
  .hero { border-image: linear-gradient(var(--accent-soft) 0 0) fill 0 / / 0 100vmax; padding-block-end: var(--space-6);
    display: grid; gap: var(--space-6); align-items: center; padding-block-start: var(--space-6);
    @media (min-width: 56rem) { grid-template-columns: 1.15fr 1fr; } }
  .grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .split { display: grid; gap: var(--space-6); align-items: start;
    @media (min-width: 56rem) { grid-template-columns: 1fr 1.1fr; } }
  .site-footer { border-block-start: 1px solid var(--line); padding-block: var(--space-6); color: var(--ink-muted); font-size: var(--step--1);
    & .wrap { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
    & h2 { font-size: var(--step-0); color: var(--ink); margin-block-end: var(--space-2); }
    & ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); } }
  .narrow { max-inline-size: var(--measure); }
  .plain { list-style: none; padding: 0; }
  .page-simple { padding-block: var(--space-6) var(--space-7);
    & h1 { margin-block-end: var(--space-4); } & h2 { margin-block: var(--space-6) var(--space-3); font-size: var(--step-1); }
    & p, & ul { margin-block-end: var(--space-3); } & li { margin-block-end: var(--space-1); } }
}

@layer components {
  /* brand + language switch */
  .brand { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.1; color: var(--ink); text-decoration: none;
    display: inline-flex; align-items: center; gap: var(--space-3); letter-spacing: -0.01em;
    & img { inline-size: 2rem; block-size: 2rem; flex: none; }
    & span { display: grid; }
    & small { font-family: var(--font); font-weight: 400; font-size: .8125rem; letter-spacing: 0; color: var(--ink-muted); } }
  .lang { display: flex; gap: var(--space-1); list-style: none; padding: 0; font-size: var(--step--1);
    & a { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding-inline: var(--space-3); border-radius: var(--radius-s); text-decoration: none; color: var(--ink); }
    & a:hover { background: var(--accent-soft); }
    & [aria-current="page"] { font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: .3em; } }

  /* hero */
  .eyebrow { display: inline-flex; gap: var(--space-2); align-items: center; font-size: var(--step--1); font-weight: 600; color: var(--accent);
    padding: var(--space-1) var(--space-3); border: 1px solid currentColor; border-radius: 999px; margin-block-end: var(--space-4); }
  .lede { font-size: var(--step-1); line-height: 1.45; color: var(--ink); max-inline-size: 22.8em; margin-block: var(--space-4) var(--space-2); font-weight: 400; }
  .source { font-size: var(--step--1); color: var(--ink-muted); & a { padding-block: .25rem; } }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block: var(--space-5) var(--space-3); }
  .for-whom { font-size: var(--step--1); color: var(--ink-muted); display: flex; gap: var(--space-2); align-items: center;
    &::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--brand-teal); } }

  .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-5); border-radius: var(--radius-s); border: 1px solid var(--accent);
    background: var(--accent); color: var(--accent-ink); font-weight: 650; text-decoration: none; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    &:hover { background: var(--accent-hover); text-decoration: none; }
    &:active { transform: translateY(1px); }
    &.secondary { background: var(--surface); color: var(--accent); &:hover { background: var(--accent-soft); } }
    &[aria-busy="true"] { cursor: progress; opacity: .85; } }

  /* term explanations: <button popovertarget> + [popover] */
  .term { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: help; min-inline-size: 24px; text-align: start;
    text-decoration: underline dotted var(--accent) 2px; text-underline-offset: .22em; min-block-size: 24px; }
  .term:hover { color: var(--accent); }
  .tip { max-inline-size: min(22rem, 100vw - 2rem); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m);
    background: var(--surface); color: var(--ink); font-size: var(--step--1); line-height: 1.5; box-shadow: 0 8px 24px color-mix(in oklab, var(--shadow) 14%, transparent);
    & strong { display: block; margin-block-end: var(--space-1); }
    opacity: 1; transition: opacity var(--dur) var(--ease), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete;
    @starting-style { &:popover-open { opacity: 0; } } }
  @supports (anchor-name: --a) {
    #t-fisk { anchor-name: --t-fisk; } #p-fisk { position-anchor: --t-fisk; }
    #t-jir  { anchor-name: --t-jir; }  #p-jir  { position-anchor: --t-jir; }
    #t-zki  { anchor-name: --t-zki; }  #p-zki  { position-anchor: --t-zki; }
    #t-oss  { anchor-name: --t-oss; }  #p-oss  { position-anchor: --t-oss; }
    .tip { margin: 0; inset: auto; position-area: block-end span-inline-end; margin-block-start: var(--space-2); position-try-fallbacks: flip-block, flip-inline; }
  }

  /* sample receipt (illustrative) */
  .receipt-figure { justify-self: center; inline-size: min(100%, 23rem);
    & figcaption { font-size: var(--step--1); color: var(--ink-muted); margin-block-start: var(--space-3); } }   /* start-aligned: a centred line would move when the font swaps (CLS) */
  .receipt { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
    padding: var(--space-5); font-family: var(--mono); font-size: .8125rem; line-height: 1.5; color: var(--ink);
    box-shadow: 0 1px 0 var(--line), 0 18px 40px -18px color-mix(in oklab, var(--shadow) 28%, transparent);
    & header { text-align: center; padding-block-end: var(--space-3); border-block-end: 1px dashed var(--field-line); }
    & dl { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--space-3); padding-block: var(--space-3); border-block-end: 1px dashed var(--field-line); }
    & dt { color: var(--ink-muted); } & dd { text-align: end; }
    & .items { padding-block: var(--space-3); border-block-end: 1px dashed var(--field-line); display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-3); }
    & .total { font-weight: 700; }
    & .codes { padding-block-start: var(--space-3); display: grid; grid-template-columns: 1fr 5.5rem; gap: var(--space-3); align-items: center; }
    & .codes p { overflow-wrap: anywhere; } & .codes b { display: block; color: var(--ink-muted); font-weight: 600; }
    & .jir { grid-column: 1 / -1; }
    & .qr { inline-size: 5.5rem; block-size: 5.5rem; color: var(--ink); } }
  .receipt-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-block-start: var(--space-4);
    padding-block-start: var(--space-3); border-block-start: 1px dashed var(--field-line); color: var(--ink-muted); }
  .stamp { rotate: -8deg; border: 3px solid var(--stamp); color: var(--stamp); font: 700 1.2rem/1 var(--font-display); letter-spacing: .18em;
    padding: .35rem .6rem .3rem .8rem; border-radius: var(--radius-s); opacity: .85;
    inline-size: 8.5rem; text-align: center; white-space: nowrap; }   /* fixed width: no shift when the font swaps */

  /* cards with container queries */
  .card { container-type: inline-size; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-5);
    & h3 { margin-block-end: var(--space-2); }
    & p { color: var(--ink-muted); }
    & .source { margin-block-start: var(--space-3); } }
  .feature { display: grid; gap: var(--space-3); align-content: start;
    & .icon { inline-size: 2.5rem; block-size: 2.5rem; padding: .5rem; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--accent); }
    & h3 { font-size: var(--step-0); margin: 0; } & p { font-size: var(--step--1); }
    @container (min-width: 22rem) { grid-template-columns: auto 1fr; column-gap: var(--space-4);
      & .icon { grid-row: span 2; } } }

  .steps { list-style: none; padding: 0; display: grid; gap: var(--space-4); counter-reset: step;
    & li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-1) var(--space-4); }
    & li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
      background: var(--accent); color: var(--accent-ink); font-weight: 700; }
    & h3 { font-size: var(--step-0); align-self: center; } & p { color: var(--ink-muted); } }

  /* faithful mock of the admin Home screen (dev/shots/home-default.png) */
  .preview { margin: 0;
    & figcaption { font-size: var(--step--1); color: var(--ink-muted); margin-block-start: var(--space-3); } }
  .mock { container-type: inline-size; background: var(--mock-bg); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4);
    font-size: .8125rem; line-height: 1.45; color: var(--ink); display: grid; gap: var(--space-3);
    & .mock-title { font-size: 1.05rem; font-weight: 700; }
    & .mock-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: var(--space-4); display: grid; gap: var(--space-2); }
    & .mock-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-weight: 650; }
    & .mock-muted { color: var(--ink-muted); }
    & ol { list-style: none; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
    & ol li { padding: var(--space-3); display: grid; grid-template-columns: 1.1rem 1fr; gap: var(--space-1) var(--space-2); }
    & ol li + li { border-block-start: 1px solid var(--line); }
    & .box { inline-size: .85rem; block-size: .85rem; border: 1.5px solid var(--ink); border-radius: 3px; margin-block-start: .2rem; }
    & .done { inline-size: .95rem; block-size: .95rem; border-radius: 50%; border: 1.5px solid var(--ok); margin-block-start: .15rem; position: relative;
      &::after { content: ""; position: absolute; inset: .18rem .3rem .3rem .26rem; border: solid var(--ok); border-width: 0 1.5px 1.5px 0; rotate: 45deg; } }
    & .sub { grid-column: 2; color: var(--ink-muted); }
    & .mbtn { grid-column: 2; justify-self: start; padding: .2rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; box-shadow: 0 1px 0 var(--line); }
    & .mbtn.primary { background: oklch(30% 0.01 250); color: var(--accent-ink); border-color: oklch(30% 0.01 250); }
    & .badge { font-size: .75rem; font-weight: 550; padding: .05rem .5rem; border-radius: 6px; background: oklch(93% 0.004 250); color: var(--ink); }
    & .row { display: grid; grid-template-columns: 1fr; gap: var(--space-1);
      @container (min-width: 26rem) { grid-template-columns: 9rem 1fr; } } }

  /* pricing promise + accountants */
  .promise { background: var(--accent-soft); border-radius: var(--radius-m); padding: var(--space-6) var(--space-5);
    & p { font-size: var(--step-1); max-inline-size: 24em; margin-block-start: var(--space-3); } }
  .callout { border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); background: var(--surface); border-radius: var(--radius-m); padding: var(--space-5);
    display: grid; gap: var(--space-4); justify-items: start;
    & p { max-inline-size: var(--measure); color: var(--ink-muted); } }

  /* FAQ */
  .faq { display: grid; gap: var(--space-2); max-inline-size: 48rem;
    & details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
    & summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); min-block-size: 2.75rem; }
    & summary::-webkit-details-marker { display: none; }
    & summary::after { content: "+"; font-weight: 400; font-size: 1.25em; line-height: 1; color: var(--accent); transition: rotate var(--dur) var(--ease); }
    & details[open] summary::after { rotate: 45deg; }
    & .answer { padding: 0 var(--space-5) var(--space-5); color: var(--ink-muted); display: grid; gap: var(--space-2); max-inline-size: var(--measure); } }

  /* waitlist form */
  .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-5);
    @media (min-width: 40rem) { padding: var(--space-6); } }
  .form { display: grid; gap: var(--space-5); }
  .field { display: grid; gap: var(--space-2); }
  .field > label, fieldset > legend { font-weight: 600; }
  .req { font-weight: 400; color: var(--ink-muted); font-size: var(--step--1); }
  .hint { font-size: var(--step--1); color: var(--ink-muted); }
  input:not([type="checkbox"], [type="radio"]), select {
    inline-size: 100%; min-block-size: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--field-line); border-radius: var(--radius-s);
    background: var(--surface); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
  input:not([type="checkbox"], [type="radio"]):focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
  input[type="checkbox"], input[type="radio"] { inline-size: 1.5rem; block-size: 1.5rem; accent-color: var(--accent); flex: none; margin-block-start: .15rem; }
  fieldset { border: 0; padding: 0; display: grid; gap: var(--space-2); min-inline-size: 0; }
  .choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
  .check { display: flex; gap: var(--space-3); align-items: flex-start; min-block-size: 24px; cursor: pointer; }
  .consent { padding: var(--space-4); border: 1px solid var(--field-line); border-radius: var(--radius-s); background: var(--paper);
    &:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } }
  .role { padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); background: var(--paper); }
  .error { color: var(--error); font-size: var(--step--1); font-weight: 600; display: flex; gap: var(--space-2);
    &::before { content: "!"; flex: none; display: inline-grid; place-items: center; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: var(--error); color: var(--surface); font-size: .75rem; margin-block-start: .1rem; } }
  .field:has([aria-invalid="true"]) :is(input:not([type="checkbox"], [type="radio"]), select) { border-color: var(--error); border-width: 2px; }
  .consent:has([aria-invalid="true"]) { border-color: var(--error); border-width: 2px; background: var(--error-soft);
    & .req, & .hint { color: var(--ink); } }   /* slate is 4.1:1 on error-soft, ink 15.5:1 */
  /* no-JS niceties: what the user typed is checked once they leave the field */
  input:user-invalid:not([type="checkbox"]) { border-color: var(--error); }
  /* merchant-only fields hide for accountants: pure CSS, works without JS */
  .form:has(#role-accountant:checked) .merchant-only { display: none; }
  .form:has(#role-merchant:checked) .accountant-only, .form:not(:has(#role-accountant:checked)) .accountant-only { display: none; }
  .other-text { display: none; }
  .consent a, .site-footer li a { display: inline-block; padding-block: .2rem; }
  .form:has(#current option[value="other"]:checked) .other-text { display: grid; }
  .turnstile-slot { min-block-size: 65px; inline-size: min(100%, 300px); border-radius: var(--radius-s);
    &:empty { background: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in oklch, var(--line) 50%, transparent) 8px 9px); } }
  .summary { border: 2px solid var(--error); background: var(--error-soft); border-radius: var(--radius-s); padding: var(--space-4);
    & h3 { font-size: var(--step-0); color: var(--error); margin-block-end: var(--space-2); }
    & ul { padding-inline-start: var(--space-5); display: grid; gap: var(--space-1); } }
  .form-foot { display: grid; gap: var(--space-3); justify-items: start; }
  .success { border: 1px solid color-mix(in oklab, var(--ok) 40%, var(--surface)); background: var(--ok-soft); border-radius: var(--radius-m); padding: var(--space-5);
    display: grid; gap: var(--space-3); view-transition-name: waitlist;
    & h3 { display: flex; align-items: center; gap: var(--space-3); }
    & h3::before { content: ""; inline-size: 1.6rem; block-size: 1.6rem; border-radius: 50%; flex: none;
      background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat; } }
  .form-card .form { view-transition-name: waitlist; }

  /* privacy dialog */
  .dialog { inline-size: min(100% - 2rem, 46rem); max-block-size: min(100dvh - 2rem, 48rem); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-m);
    color: var(--ink); background: var(--surface); margin: auto;
    &::backdrop { background: color-mix(in oklab, var(--shadow) 45%, transparent); }
    & .dialog-bar { position: sticky; inset-block-start: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
      padding: var(--space-3) var(--space-5); background: var(--surface); border-block-end: 1px solid var(--line); }
    & .dialog-body { padding: var(--space-5); & h1 { font-size: var(--step-2); } & h2 { font-size: var(--step-1); margin-block: var(--space-5) var(--space-2); } & p, & ul { margin-block-end: var(--space-3); } }
    opacity: 1; transition: opacity var(--dur) var(--ease), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete;
    @starting-style { &[open] { opacity: 0; } } }
  .close { min-block-size: 2.75rem; min-inline-size: 2.75rem; border: 1px solid var(--field-line); background: var(--surface); border-radius: var(--radius-s); cursor: pointer; font-weight: 600; padding-inline: var(--space-3); }
  .placeholder { background: var(--warn-soft); color: var(--ink); padding-inline: .3em; border-radius: 3px; font-style: normal; }
  .draft-note { border: 1px dashed var(--ink-muted); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); background: var(--surface); font-size: var(--step--1); }
}

@layer utilities {
  .visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip { position: absolute; inset-inline-start: var(--space-4); inset-block-start: -10rem; background: var(--surface); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); z-index: 10;
    &:focus { inset-block-start: var(--space-3); } }
  .muted { color: var(--ink-muted); }
  .nb { white-space: nowrap; }
  .mt-4 { margin-block-start: var(--space-4); }
  /* subtle scroll-linked reveal, only where supported and motion is welcome */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
      @keyframes reveal { from { opacity: .35; translate: 0 .75rem; } to { opacity: 1; translate: 0 0; } }
    }
  }
}