/* Token system: research/V2-SYSTEM.md (every value below traces to a token defined here; sources cited there). */
    :root, [data-theme="mainstreet"] {
      /* Palette: research/COLOR.md */
      --bg: #FEFAE0; --surface: #FFFFFF; --text: #283618; --muted: #5E674A;
      --accent: #606C38; --accent-contrast: #FEFAE0; --border: #283618;
      --focus: #BC6C25; --tint-caramel: #DDA15E;
      --color-base-100: var(--bg); --color-base-200: var(--surface); --color-base-300: var(--tint-caramel);
      --color-base-content: var(--text); --color-primary: var(--accent); --color-primary-content: var(--accent-contrast);
      --color-secondary: var(--tint-caramel); --color-secondary-content: var(--text);
      --color-accent: var(--accent); --color-accent-content: var(--accent-contrast);
      --color-neutral: var(--text); --color-neutral-content: var(--surface);

      /* Type: Utopia 360px/18px/1.2 to 1240px/20px/1.25 (utopia-core 1.6.0) */
      --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
      --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
      --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
      --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
      --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
      --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
      --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
      --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
      --leading-body: 1.5; --leading-label: 1.33; --leading-solid: 1; --leading-heading: calc(1em + .5rem);
      --tracking-display: -0.025em; --tracking-caps: 0.05em;
      --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
      --font-display: "Fraunces", Georgia, serif; --font-body: "DM Sans", sans-serif;
      --axes-display: "SOFT" 100, "WONK" 1; --axes-sub: "SOFT" 50, "WONK" 0;
      --measure: 52ch;

      /* Space: Utopia default palette, base = step 0 */
      --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
      --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
      --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
      --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
      --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
      --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
      --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
      --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
      --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
      --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
      --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
      --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
      --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
      --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);
      --space-s-xl: clamp(1.125rem, 0.0511rem + 4.7727vw, 3.75rem);

      /* Layout. Breakpoints (media queries cannot read custom properties): 40rem, 48rem, 64rem */
      --grid-max-width: 77.5rem; --grid-gutter: var(--space-s-m); --space-section: var(--space-2xl-3xl);

      /* Shape: daisyUI radius roles */
      --radius-box: 1.5rem; --radius-field: 999px; --radius-selector: .5rem; --radius-round: 50%;
      --border-hairline: 1px; --border-strong: 2px;
      --shadow-offset: 4px; --shadow-hard: var(--shadow-offset) var(--shadow-offset) 0 0 var(--text);
      --divider: color-mix(in srgb, var(--text) 20%, transparent);
      --rule: color-mix(in srgb, var(--text) 7%, transparent);

      /* Sizes */
      --tap-min: 2.75rem; --btn-h-sm: var(--tap-min); --btn-h: 3rem; --btn-h-lg: 3.5rem;
      --btn-px-sm: 1rem; --btn-px: 1.25rem; --btn-px-lg: 1.5rem;
      --icon-m: 1.5rem; --icon-l: 2.5rem; --size-marker: 3rem; --rotate-close: 45deg;
      --stroke-icon: 2px; --stroke-mark: 3px;

      /* Interaction states (Material 3 state layers, GOV.UK disabled) */
      --state-hover: 8%; --state-pressed: 12%; --disabled-opacity: .5;
      --focus-width: 3px; --focus-offset: 2px; --focus-ring: var(--focus);
      --focus-halo: 0 0 0 var(--focus-offset) var(--surface);
      --link-underline: max(1px, .0625rem); --link-underline-hover: max(3px, .1875rem, .12em); --link-offset: .1578em;

      /* Motion */
      --dur-press: 100ms; --dur-icon: 150ms; --dur-strike: 200ms; --dur-expand: 250ms; --dur-row: 250ms;
      --dur-tick: 300ms; --dur-draw: 500ms; --stagger: 60ms; --motion-failsafe: 2000ms;
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

      /* Authored art direction (PLAN.md), kept as named tokens */
      --tilt-card: 1deg; --tilt-sticker: -3deg; --nudge-card: var(--space-m);
      --mark-top: 61%; --mark-bottom: 94%; --mark-bleed: .06em; --stroke-drop: .11em; --stroke-band: .16em;
      --z-under: -1; --z-bar: 10; --z-skip: 20;

      /* Sticky mobile bar */
      --bar-pad: var(--space-2xs);
      --bar-h: calc(var(--btn-h-sm) + 2 * var(--bar-pad) + var(--border-strong));

      color-scheme: light; font-synthesis: none;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { background: var(--bg); scroll-padding-top: var(--space-m); }
    body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: var(--weight-regular) var(--step-0)/var(--leading-body) var(--font-body); }
    h1, h2, h3, p, figure { margin: 0; }
    h1, h2 { font-family: var(--font-display); font-weight: var(--weight-semibold); font-variation-settings: var(--axes-display); text-wrap: balance; line-height: var(--leading-heading); letter-spacing: var(--tracking-display); }
    h1 { font-size: var(--step-5); }
    h2 { font-size: var(--step-4); }
    h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-variation-settings: var(--axes-sub); font-size: var(--step-1); line-height: var(--leading-heading); }
    p { text-wrap: pretty; }
    h1, h2, h3, p, li { overflow-wrap: anywhere; }

    /* Links: GOV.UK link underline settings */
    a { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: var(--link-underline); text-underline-offset: var(--link-offset); }
    a:active { text-decoration-thickness: var(--link-underline-hover); }
    button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    button { font: inherit; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

    /* Focus: ring + surface halo filling the offset gap */
    :root :focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); box-shadow: var(--focus-halo); }
    :root main:focus { outline: none; box-shadow: none; }
    .process-band, .featured { --focus-ring: var(--text); }
    svg { display: block; max-width: 100%; }

    .wrap { max-width: var(--grid-max-width); padding-inline: var(--grid-gutter); margin-inline: auto; }
    .reading { max-width: var(--measure); margin-inline: auto; }
    .section { padding-block: var(--space-section); }
    .section-head { text-align: center; margin-bottom: var(--space-l); }
    .answer { margin-top: var(--space-m); color: var(--muted); }
    .mark { position: relative; isolation: isolate; white-space: normal; }
    .mark::before { content: ""; position: absolute; z-index: var(--z-under); inset: 0 calc(-1 * var(--mark-bleed)); background: linear-gradient(transparent var(--mark-top), var(--tint-caramel) var(--mark-top), var(--tint-caramel) var(--mark-bottom), transparent var(--mark-bottom)); }
    .mark.has-sweep::before { background: none; }
    .mark-sweep { position: absolute; z-index: var(--z-under); inset: 0 calc(-1 * var(--mark-bleed)); pointer-events: none; background: linear-gradient(transparent var(--mark-top), var(--tint-caramel) var(--mark-top), var(--tint-caramel) var(--mark-bottom), transparent var(--mark-bottom)); }

    /* Skip link: GOV.UK visually-hidden-focusable pattern */
    .skip { position: fixed; top: var(--space-xs); left: var(--space-xs); z-index: var(--z-skip); display: inline-flex; align-items: center; min-height: var(--tap-min); padding: var(--space-2xs) var(--space-s); background: var(--surface); color: var(--text); border: var(--border-strong) solid var(--text); border-radius: var(--radius-selector); font-weight: var(--weight-bold); }
    .skip:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

    .site-header { padding-block: var(--space-s); border-bottom: var(--border-strong) solid var(--text); }
    .header-inner, .primary-nav, .nav-links { display: flex; align-items: center; }
    .header-inner { justify-content: space-between; gap: var(--grid-gutter); }
    .wordmark { display: inline-flex; align-items: center; min-height: var(--tap-min); font: italic var(--weight-semibold) var(--step-2)/var(--leading-heading) var(--font-display); font-variation-settings: var(--axes-display); color: var(--text); text-decoration: none; white-space: nowrap; }
    .primary-nav, .nav-links { gap: var(--space-s-m); }
    .nav-links { display: none; }
    .nav-links a, .footer-nav a { color: var(--text); font-size: var(--step--1); font-weight: var(--weight-semibold); text-decoration: none; min-height: var(--tap-min); min-width: var(--tap-min); display: inline-flex; align-items: center; }
    .nav-links a:active, .footer-nav a:active { text-decoration: underline var(--link-underline-hover); text-underline-offset: var(--link-offset); }

    /* Buttons. Unlayered rules beat daisyUI's layered .btn rules. */
    .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-shadow: var(--shadow-hard);
      display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2xs); min-height: var(--btn-h); height: auto; padding: var(--space-2xs) var(--btn-px); border: var(--border-strong) solid var(--text); border-radius: var(--radius-field); background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow); text-decoration: none; font: var(--weight-bold) var(--step--1)/var(--leading-body) var(--font-body); cursor: pointer; text-align: center; position: relative; transition: none; }
    .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--accent-contrast); }
    .btn-small { min-height: var(--btn-h-sm); padding-inline: var(--btn-px-sm); }
    .btn-large { min-height: var(--btn-h-lg); padding-inline: var(--btn-px-lg); font-size: var(--step-0); }
    .btn:active { background: color-mix(in srgb, var(--btn-fg) var(--state-pressed), var(--btn-bg)); --btn-shadow: 0 0 0 0 var(--text); translate: none; }
    .btn-primary:active { background: color-mix(in srgb, var(--btn-fg) var(--state-hover), var(--btn-bg)); }
    :root .btn:focus-visible { box-shadow: var(--focus-halo), var(--btn-shadow); }
    .btn:disabled, .btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: default; background: var(--btn-bg); --btn-shadow: var(--shadow-hard); }
    .text-link { display: inline-flex; align-items: center; min-height: var(--tap-min); font-weight: var(--weight-bold); }

    .hero { display: block; padding-top: var(--space-xl-2xl); padding-bottom: var(--space-xl); text-align: center; }
    .hero-subhead { max-width: var(--measure); margin: var(--space-m) auto 0; font-size: var(--step-1); color: var(--muted); }
    .hero-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); margin-top: var(--space-m); }
    .reassurance { margin: var(--space-s) auto 0; max-width: var(--measure); font-size: var(--step--1); color: var(--muted); }
    .headline-stroke { position: absolute; left: 0; width: 100%; bottom: calc(-1 * var(--stroke-drop)); height: var(--stroke-band); overflow: visible; pointer-events: none; }
    .headline-stroke path { stroke: var(--accent); stroke-width: var(--stroke-mark); vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; }

    .planner { margin: var(--space-l-xl) auto 0; width: 100%; border: var(--border-strong) solid var(--text); border-radius: var(--radius-box); background: var(--surface); box-shadow: var(--shadow-hard); padding: var(--space-s-m); text-align: left; }
    .planner-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding-bottom: var(--space-s); border-bottom: var(--border-strong) solid var(--text); }
    .planner-title, .day-label { font-family: var(--font-display); font-weight: var(--weight-medium); font-variation-settings: var(--axes-sub); line-height: var(--leading-heading); }
    .planner-title { font-size: var(--step-2); }
    .day-label { font-size: var(--step-1); }
    .badge { display: inline-flex; align-items: center; height: auto; width: fit-content; padding: var(--space-3xs) var(--space-xs); border: var(--border-strong) solid var(--text); border-radius: var(--radius-selector); background: var(--tint-caramel); color: var(--text); font: var(--weight-bold) var(--step--2)/var(--leading-label) var(--font-body); white-space: normal; }
    .example-sticker, .done-sticker { transform: rotate(var(--tilt-sticker)); }
    .planner-days { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; margin: var(--space-m) 0; }
    .planner-day { display: grid; grid-template-columns: max-content minmax(0, 1fr) var(--icon-m); align-items: center; gap: var(--space-s); min-width: 0; padding-block: var(--space-s); border-bottom: var(--border-hairline) solid var(--divider); }
    .planner-day:last-child { border-bottom: 0; }
    .day-label abbr { text-decoration: none; }
    .planner-task { position: relative; }
    .task-label { display: block; font-size: var(--step--1); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
    .task-note { display: block; margin-top: var(--space-3xs); font-size: var(--step--1); line-height: var(--leading-body); color: var(--muted); }
    .planner .task-strokes { position: absolute; inset: calc(-1 * var(--space-3xs)) 0; width: 100%; height: calc(100% + 2 * var(--space-3xs)); overflow: visible; pointer-events: none; }
    .scribble, .strike { stroke: var(--focus); stroke-width: var(--stroke-icon); vector-effect: non-scaling-stroke; fill: none; opacity: 0; }
    .strike { stroke-linecap: round; }
    .tick, .trust-tick { flex-shrink: 0; width: var(--icon-m); height: var(--icon-m); stroke: var(--accent); stroke-width: var(--stroke-mark); vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .planner-result { text-align: center; margin-bottom: var(--space-s); }
    .planner-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
    .planner-caption { max-width: var(--measure); font-size: var(--step--1); color: var(--muted); }
    .replay { display: none; flex-shrink: 0; }

    .grid-six { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gutter); }
    .card { transition: none; display: flex; flex-direction: column; border: var(--border-strong) solid var(--text); border-radius: var(--radius-box); background: var(--surface); box-shadow: var(--shadow-hard); }
    .task-card { padding: var(--space-s-m); gap: var(--space-xs-s); }
    .task-card p { color: var(--muted); font-size: var(--step--1); }
    .task-icon { width: var(--icon-l); height: var(--icon-l); stroke: var(--accent); stroke-width: var(--stroke-icon); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; fill: none; }

    .process-band .answer { color: var(--text); }
    .process-band { background: var(--tint-caramel); border-block: var(--border-strong) solid var(--text); }
    .steps { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-auto-columns: auto; counter-reset: none; gap: var(--space-xl); list-style: none; padding: 0; margin: 0; overflow: visible; }
    .process-step { position: relative; min-width: 0; padding-left: calc(var(--size-marker) + var(--space-s)); }
    .step-number { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: var(--size-marker); height: var(--size-marker); margin-bottom: var(--space-s); border: var(--border-strong) solid var(--text); border-radius: var(--radius-round); background: var(--accent); color: var(--accent-contrast); font: var(--weight-medium) var(--step-2)/var(--leading-solid) var(--font-display); font-variation-settings: var(--axes-sub); }
    .process-step h3 { margin-bottom: var(--space-xs); }
    .process-step p { font-size: var(--step--1); }
    .step-arrow { position: absolute; fill: none; stroke: var(--accent); stroke-width: var(--stroke-mark); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
    .step-arrow-horizontal { display: none; top: 0; left: calc(var(--size-marker) + var(--space-s)); width: calc(100% - var(--size-marker) - var(--space-s)); height: var(--size-marker); }
    .step-arrow-vertical { left: calc((var(--size-marker) - var(--icon-l)) / 2); top: calc(var(--size-marker) + var(--space-2xs)); width: var(--icon-l); height: var(--space-xl); }
    .process-step:last-child .step-arrow { display: none; }

    .examples-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gutter); }
    .example-card { padding: var(--space-s-m); gap: var(--space-xs-s); }
    .example-card h3 { margin-top: var(--space-3xs); }
    .before-after { margin: 0; }
    .before-after dt { font-weight: var(--weight-bold); font-size: var(--step--1); margin-bottom: var(--space-3xs); }
    .before-after dd { margin: 0 0 var(--space-s); font-size: var(--step--1); color: var(--muted); }
    .before-after dd:last-child { margin-bottom: 0; }
    .after-label { color: var(--accent); }
    .proof-note { margin-top: var(--space-m); text-align: center; color: var(--muted); font-size: var(--step--1); }

    .about-section, .trust-section, .pricing-section, .book-section { padding-top: 0; }
    .about-paper, .book-panel { padding: var(--space-l-xl) var(--space-s-xl); border: var(--border-strong) solid var(--text); border-radius: var(--radius-box); box-shadow: var(--shadow-hard); }
    .about-paper { background: var(--surface); }
    .about-paper .answer { color: var(--text); }
    .about-paper .reading + .reading { margin-top: var(--space-xl); }

    .notebook { position: relative; max-width: var(--measure); margin: auto; border: var(--border-strong) solid var(--text); border-radius: var(--radius-box); background: var(--surface); box-shadow: var(--shadow-hard); padding: var(--space-l-xl) var(--space-s-xl); font-size: var(--step--1);
      background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1lh - var(--border-hairline)), var(--rule) calc(1lh - var(--border-hairline)), var(--rule) 1lh); }
    .notebook::before { content: ""; position: absolute; top: var(--space-l); bottom: var(--space-l); left: var(--space-2xs); width: var(--space-2xs); background: radial-gradient(circle, var(--bg) calc(var(--space-2xs) / 2 - var(--border-hairline)), var(--text) calc(var(--space-2xs) / 2 - var(--border-hairline)), var(--text) calc(var(--space-2xs) / 2), transparent calc(var(--space-2xs) / 2)) center top / var(--space-2xs) 2lh repeat-y; }
    .trust-list { list-style: none; padding: 0 0 0 var(--space-s); margin: 0; border-left: var(--border-strong) solid var(--focus); }
    .trust-list li { display: flex; gap: var(--space-s); padding: var(--space-s) 0; border-bottom: var(--border-hairline) solid var(--border); }
    .trust-list li:first-child { padding-top: 0; }
    .trust-list li:last-child { padding-bottom: 0; border-bottom: 0; }
    .trust-tick { margin-top: calc((1lh - var(--icon-m)) / 2); }
    .trust-list strong { display: block; font-size: var(--step-0); }
    .trust-list p { color: var(--muted); margin-top: var(--space-3xs); }

    .price-card { padding: var(--space-s-m); position: relative; }
    .price-card:last-child { grid-column: 1 / -1; }
    .price-card.featured { background: var(--tint-caramel); }
    .start-sticker { position: absolute; top: calc(-1 * var(--space-s)); left: var(--space-s-m); transform: rotate(var(--tilt-sticker)); box-shadow: calc(var(--shadow-offset) / 2) calc(var(--shadow-offset) / 2) 0 0 var(--text); }
    .price-purpose { margin-top: var(--space-xs); min-block-size: 2lh; font-size: var(--step--1); }
    .price { font: var(--weight-semibold) var(--step-3)/var(--leading-heading) var(--font-display); margin-top: var(--space-s); }
    .price small, .price .from { font: var(--weight-medium) var(--step--1)/var(--leading-body) var(--font-body); }
    .price .from { display: block; }
    .price-period { font-size: var(--step--1); margin-top: var(--space-3xs); }
    .package-list { list-style: disc; padding-left: var(--space-s); margin: var(--space-m) 0; font-size: var(--step--1); }
    .package-list li::marker { color: var(--accent); }
    .package-list li { padding-left: var(--space-3xs); margin-bottom: var(--space-2xs); }
    .price-card .btn { margin-top: auto; width: 100%; }
    .price-grid { row-gap: var(--space-l); }

    /* FAQ: native details as cards */
    .faq-section { border-top: var(--border-strong) solid var(--text); }
    .faq-list { max-width: var(--measure); margin-inline: auto; display: grid; gap: var(--space-xs); }
    details { border: var(--border-strong) solid var(--text); border-radius: var(--radius-box); background: var(--surface); }
    summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-s-m); min-height: var(--tap-min); font-weight: var(--weight-bold); cursor: pointer; list-style: none; border-radius: calc(var(--radius-box) - var(--border-strong)); }
    summary::-webkit-details-marker { display: none; }
    summary:active { background: color-mix(in srgb, var(--text) var(--state-pressed), var(--surface)); }
    .faq-plus { display: inline-grid; place-items: center; flex: 0 0 var(--icon-m); width: var(--icon-m); height: var(--icon-m); border: var(--border-strong) solid var(--text); border-radius: var(--radius-round); font: var(--weight-regular) var(--step-0)/var(--leading-solid) var(--font-body); }
    details[open] .faq-plus { transform: rotate(var(--rotate-close)); }
    .faq-answer { padding: 0 var(--space-s-m) var(--space-s-m); color: var(--muted); }

    .book-panel { position: relative; background: var(--accent); color: var(--accent-contrast); text-align: center; }
    .book-panel .answer { color: var(--accent-contrast); }
    .book-actions { position: relative; display: inline-block; margin-top: var(--space-m); }
    .book-arrow { display: none; position: absolute; left: calc(-1 * (var(--space-2xl) + var(--space-s))); top: calc(-1 * var(--space-s)); width: var(--space-2xl); aspect-ratio: 100 / 84; height: auto; fill: none; stroke: var(--tint-caramel); stroke-width: var(--stroke-mark); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
    .book-email { margin-top: var(--space-m); }
    .book-email a { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--accent-contrast); }
    .reply-note { font-size: var(--step--1); margin-top: var(--space-2xs); }

    .site-footer { padding-bottom: var(--space-l); }
    .footer-top, .footer-bottom { display: flex; flex-direction: column; }
    .footer-top { gap: var(--space-m-l); padding-bottom: var(--space-l); }
    .footer-copy p { max-width: var(--measure); font-size: var(--step--1); color: var(--muted); margin-top: var(--space-xs); }
    .footer-copy > a:last-child { display: inline-flex; align-items: center; min-height: var(--tap-min); margin-top: var(--space-2xs); font-size: var(--step--1); }
    .footer-nav { display: flex; flex-wrap: wrap; align-content: start; gap: var(--space-2xs) var(--space-m); }
    .footer-bottom { border-top: var(--border-strong) solid var(--text); padding-top: var(--space-m); justify-content: space-between; gap: var(--space-2xs); color: var(--muted); font-size: var(--step--1); }

    /* Sticky mobile booking bar (< 40rem). Instant show/hide, no animation. */
    body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
    html { scroll-padding-bottom: calc(var(--bar-h) + var(--space-2xs) + env(safe-area-inset-bottom)); }
    .primary-nav .btn { display: none; }
    .mobile-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-bar); display: flex; justify-content: center; padding: var(--bar-pad) var(--grid-gutter); padding-bottom: calc(var(--bar-pad) + env(safe-area-inset-bottom)); background: var(--bg); border-top: var(--border-strong) solid var(--text); }
    .mobile-cta[data-hidden] { display: none; }
    .mobile-cta .btn { width: 100%; min-height: var(--btn-h-sm); }

    @media (min-width: 40rem) {
      body { padding-bottom: 0; }
      html { scroll-padding-bottom: 0; }
      .mobile-cta { display: none; }
      .primary-nav .btn { display: inline-flex; }
      .hero h1 .mark { white-space: nowrap; }
      .hero-actions { flex-direction: row; flex-wrap: wrap; gap: var(--space-s) var(--space-m); }
      .planner-bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-s); }
      .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-l); }
      .process-step { padding-left: 0; }
      .step-number { position: static; }
      .step-arrow-vertical { display: none; }
      .step-arrow-horizontal { display: block; }
      .process-step:nth-child(2n) .step-arrow { display: none; }
      .footer-top, .footer-bottom { flex-direction: row; }
      .footer-top { gap: var(--space-m-l); }
      .footer-bottom { gap: var(--space-s); }
      .book-arrow { display: block; }
      .grid-six, .examples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 48rem) {
      .nav-links { display: flex; }
      .grid-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .task-card, .price-card, .price-card:last-child { grid-column: span 2; }
      .price-grid { row-gap: var(--grid-gutter); }
    }
    @media (min-width: 64rem) {
      .planner-days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      .planner-day { display: block; padding: 0 var(--space-xs); border-bottom: 0; border-left: var(--border-hairline) solid var(--divider); }
      .planner-day:first-child { border-left: 0; padding-left: 0; }
      .planner-task { margin-top: var(--space-s); }
      .tick { margin-top: var(--space-3xs); }
      .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .process-step:nth-child(2n) .step-arrow-horizontal { display: block; }
      .process-step:last-child .step-arrow { display: none; }
      .task-card:nth-child(odd) { transform: rotate(calc(-1 * var(--tilt-card))); }
      .task-card:nth-child(even) { transform: rotate(var(--tilt-card)); }
      .task-card:nth-child(2), .task-card:nth-child(5) { transform: translateY(var(--nudge-card)) rotate(var(--tilt-card)); }
      #services .section-head, #examples .section-head, #pricing .section-head { text-align: left; }
    }
    @media (hover: hover) and (pointer: fine) {
      a:hover { text-decoration-thickness: var(--link-underline-hover); }
      .nav-links a:hover, .footer-nav a:hover { text-decoration: underline var(--link-underline-hover); text-underline-offset: var(--link-offset); }
      .btn:hover { background: color-mix(in srgb, var(--btn-fg) var(--state-hover), var(--btn-bg)); }
      summary:hover { background: color-mix(in srgb, var(--text) var(--state-hover), var(--surface)); }
      .btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--btn-bg); }
    }

    /* Motion: opt in only. Nothing below applies under prefers-reduced-motion: reduce. */
    @media (prefers-reduced-motion: no-preference) {
      .btn { transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-press) var(--ease-out); }
      .btn:active { transform: translate(var(--shadow-offset), var(--shadow-offset)); }
      .btn:disabled:active, .btn[aria-disabled="true"]:active { transform: none; }
      :is(.motion-pending, .js-motion) .scribble { opacity: 1; }
      :is(.motion-pending, .js-motion) .strike, :is(.motion-pending, .js-motion) .tick path,
      :is(.motion-pending, .js-motion) .headline-stroke path, :is(.motion-pending, .js-motion) .step-arrow path,
      :is(.motion-pending, .js-motion) .trust-tick path, :is(.motion-pending, .js-motion) .book-arrow path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
      :is(.motion-pending, .js-motion) .done-sticker { opacity: 0; }
      .faq-plus { transition: transform var(--dur-icon) var(--ease-out); }
      .js-motion .replay { display: inline-flex; }
      @supports (interpolate-size: allow-keywords) {
        :root { interpolate-size: allow-keywords; }
        details::details-content { transition: height var(--dur-expand) var(--ease-out), content-visibility var(--dur-expand) allow-discrete; height: 0; overflow: clip; }
        details[open]::details-content { height: auto; }
      }
    }
    /* G10: unlayered, so it beats every daisyUI layered transition/animation without !important. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition: none; animation: none; }
    }

    /* Use cases, booking form, and 404. */
    @media (min-width: 48rem) {
      .primary-nav, .nav-links { flex-wrap: wrap; justify-content: flex-end; }
    }
    .nav-links a[aria-current="page"], .footer-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--link-underline-hover); text-underline-offset: var(--link-offset); }
    .crumb { margin-top: var(--space-m); font-size: var(--step--1); font-weight: var(--weight-semibold); }
    .section-head .answer + .answer, .stack .answer + .answer { margin-top: var(--space-s); }
    .help-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--grid-gutter); }
    .help-card { gap: var(--space-2xs); padding: var(--space-s-m); color: var(--text); text-decoration: none; height: 100%; }
    .help-card h3 { color: var(--text); }
    .help-card p, .example-card p { color: var(--muted); font-size: var(--step--1); }
    .example-card h3 { margin-top: var(--space-3xs); }
    main > .book-section:first-child { padding-top: var(--space-xl-2xl); }
    .reading.stack { margin-top: var(--space-m); text-align: center; }
    .cost-card { padding: var(--space-s-m); max-width: 42rem; margin-inline: auto; }
    .cost-card .package-list { margin-bottom: 0; }
    .faq-list h3 { flex: 1; margin: 0; font-family: var(--font-body); font-weight: var(--weight-bold); font-variation-settings: normal; font-size: inherit; line-height: var(--leading-body); letter-spacing: normal; text-wrap: pretty; }
    .faq-answer p + p { margin-top: var(--space-s); }
    .error-page { text-align: center; padding-block: var(--space-2xl-3xl); }
    .error-page .hero-subhead { margin-inline: auto; }
    .contact-form { max-width: 40rem; margin: var(--space-m) auto 0; text-align: left; display: grid; gap: var(--space-s); min-width: 0; }
    .contact-title { color: var(--accent-contrast); text-align: center; }
    .form-note { font-size: var(--step--1); text-align: center; }
    .field-row { display: grid; gap: var(--space-s); }
    .field { display: grid; gap: var(--space-3xs); min-width: 0; }
    .field label { font-weight: var(--weight-semibold); line-height: var(--leading-label); }
    .field .optional { font-weight: var(--weight-regular); }
    .field input, .field textarea { width: 100%; min-height: 3rem; padding: .625rem 1rem; border: var(--border-strong) solid var(--text); border-radius: var(--radius-selector); background: var(--surface); color: var(--text); font: var(--weight-regular) max(16px, var(--step-0))/var(--leading-body) var(--font-body); box-shadow: var(--shadow-hard); }
    .field textarea { resize: vertical; min-height: 6rem; height: auto; max-height: 50vh; }
    .field-error { justify-self: start; margin-top: .25rem; padding: .25rem .625rem; border-radius: var(--radius-selector); background: #FBE9D8; color: #7A2A10; font-size: max(16px, var(--step--1)); font-weight: var(--weight-semibold); line-height: 1.3; }
    .field-error[hidden] { display: none; }
    .field input:focus-visible, .field textarea:focus-visible { outline: var(--focus-width) solid var(--tint-caramel); outline-offset: var(--focus-offset); }
    .field [aria-invalid="true"] { border-color: var(--focus); }
    .field-hint { font-size: var(--step--1); }
    .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
    .contact-form .book-actions { display: block; justify-self: stretch; margin-top: var(--space-2xs); }
    .contact-form .book-actions .btn { width: 100%; min-height: 3.5rem; }
    .contact-form button[disabled] { opacity: var(--disabled-opacity); cursor: wait; }
    .form-status { text-align: center; font-weight: var(--weight-semibold); min-height: 1.5em; }
    .form-status:empty { display: none; }
    .form-status.is-ok, .form-status.is-error { padding: var(--space-2xs) var(--space-s); border: var(--border-strong) solid var(--text); border-radius: var(--radius-selector); background: var(--surface); color: var(--text); }
    .form-status.is-error { background: #FBE9D8; }
    @media (min-width: 40rem) {
      .field-row, .help-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .contact-form .book-actions { justify-self: center; }
      .contact-form .book-actions .btn { width: auto; }
    }