:root{
  --background:var(--md-sys-color-surface); --foreground:var(--md-sys-color-on-surface);
  --card:var(--md-sys-color-surface-container-lowest); --muted:var(--md-sys-color-surface-container);
  --muted-foreground:#47454f;
  --border:var(--md-sys-color-outline-variant); --input:#c7c3cf;
  --input-strong:var(--md-sys-color-outline);
  --primary:var(--md-sys-color-primary); --primary-foreground:var(--md-sys-color-on-primary);
  --accent:var(--md-sys-color-secondary-container); --ring:#6356c7;
  --destructive:var(--md-sys-color-error); --ok:#347247;

  /* Status tones - the six StatusChip pairs, verbatim from
     spec/machine/tokens.json statusTone. Bound to names, not to the media
     palette (composition-contract section 11 forbids type colour for status).
     error and neutral are exact aliases onto the pairs the shell already
     ships, so the vocabulary is complete and greppable in one place. */
  --status-ok-bg:#caff84; --status-ok-fg:#315500;
  --status-info-bg:#dce9ff; --status-info-fg:#2459b8;
  --status-warn-bg:#fff0ae; --status-warn-fg:#705800;
  --status-violet-bg:#f5f2fb; --status-violet-fg:#5145b2;
  --status-error-bg:var(--md-sys-color-error-container); --status-error-fg:var(--md-sys-color-on-error-container);
  --status-neutral-bg:var(--muted); --status-neutral-fg:var(--muted-foreground);

  --editor-canvas:#f8f7fc; --editor-ink:#1b1a21;
  --editor-selection:#caff84; --editor-selection-strong:#78a91d;
  --editor-image:#dce9ff; --editor-image-foreground:#2459b8;
  --editor-video:#dfffb1; --editor-video-foreground:#315500;
  --editor-audio:#fff0ae; --editor-audio-foreground:#705800;
  --editor-text:#e5deff; --editor-text-foreground:#5145b2;

  --tok-key:#6b4fd4; --tok-str:#2f6f3e; --tok-ref:#b5451b; --tok-num:#3b6fd4;
  --node-shadow:0 1px 2px #33265a12,0 8px 24px #33265a12;
  --edge-stroke:#b1b1b7; --edge-stroke-selected:#555;
  --scrim:#16181d40;
  color-scheme:light;
}
[data-theme=dark]{
  --background:var(--md-sys-color-surface); --foreground:var(--md-sys-color-on-surface);
  --card:var(--md-sys-color-surface-container-low); --muted:var(--md-sys-color-surface-container);
  --muted-foreground:#c9c5d0;
  --border:var(--md-sys-color-outline-variant); --input:var(--md-sys-color-outline);
  --input-strong:#c7c3cf;
  --primary:var(--md-sys-color-primary); --primary-foreground:var(--md-sys-color-on-primary);
  --accent:var(--md-sys-color-secondary-container); --ring:#c6bfff;
  --destructive:var(--md-sys-color-error); --ok:#91d5a5;

  --status-ok-bg:#355200; --status-ok-fg:#caff84;
  --status-info-bg:#233b66; --status-info-fg:#a9c7ff;
  --status-warn-bg:#594800; --status-warn-fg:#ffe27a;
  --status-violet-bg:#2a2735; --status-violet-fg:#d8d0ff;
  --status-error-bg:var(--md-sys-color-error-container); --status-error-fg:var(--md-sys-color-on-error-container);
  --status-neutral-bg:var(--muted); --status-neutral-fg:var(--muted-foreground);

  --editor-canvas:#131219; --editor-ink:#e6e1eb;
  --editor-selection:#355200; --editor-selection-strong:#b8ef63;
  --editor-image:#233b66; --editor-image-foreground:#a9c7ff;
  --editor-video:#294600; --editor-video-foreground:#caff84;
  --editor-audio:#594800; --editor-audio-foreground:#ffe27a;
  --editor-text:#474078; --editor-text-foreground:#d8d0ff;

  --tok-key:#b9a6f5; --tok-str:#8fd3a3; --tok-ref:#f0a37f; --tok-num:#8fb6f5;
  --node-shadow:0 1px 2px #0007,0 8px 24px #0007;
  --edge-stroke:#56535f; --edge-stroke-selected:#aaa5b1;
  --scrim:#05070a99;
  color-scheme:dark;
}

/* M3 color system — tonal palettes + role tokens.
   Key hues are taken from the existing Blokks palette, not invented: the primary tonal
   palette is built around --primary #4f7200 (tone 40) and its dark-mode flip #b8ef63
   (tone 80), which is exactly the M3 light/dark primary mapping. Tertiary is built around
   the lavender accent #e5deff (tone 90) and --ring #6356c7. Neutrals keep the system's
   violet tint (--foreground #1b1a21 is neutral tone 10). See m3.material.io/styles/color. */
:root{
  /* --- primary (olive / moss) --- */
  --md-ref-primary-0:#000000; --md-ref-primary-10:#182000; --md-ref-primary-20:#2b3900;
  --md-ref-primary-30:#3d5400; --md-ref-primary-40:#4f7200; --md-ref-primary-50:#659010;
  --md-ref-primary-60:#7fac2c; --md-ref-primary-70:#9ac947; --md-ref-primary-80:#b8ef63;
  --md-ref-primary-90:#d3ff9c; --md-ref-primary-95:#e9ffcc; --md-ref-primary-99:#f9ffe8;
  --md-ref-primary-100:#ffffff;
  /* --- secondary (desaturated moss) --- */
  --md-ref-secondary-10:#161e08; --md-ref-secondary-20:#2a331c; --md-ref-secondary-30:#404a30;
  --md-ref-secondary-40:#576245; --md-ref-secondary-80:#c0cba7; --md-ref-secondary-90:#dce7c2;
  /* --- tertiary (lavender / violet) --- */
  --md-ref-tertiary-10:#1a1163; --md-ref-tertiary-20:#2f247c; --md-ref-tertiary-30:#463b96;
  --md-ref-tertiary-40:#6356c7; --md-ref-tertiary-80:#c6bfff; --md-ref-tertiary-90:#e5deff;
  /* --- error --- */
  --md-ref-error-10:#410e05; --md-ref-error-20:#5f1a0d; --md-ref-error-30:#8a2814;
  --md-ref-error-40:#c53a22; --md-ref-error-80:#ffb4a8; --md-ref-error-90:#ffdad3;
  /* --- neutral / neutral-variant (violet-tinted, never pure gray) --- */
  --md-ref-neutral-0:#000000; --md-ref-neutral-10:#1b1a21; --md-ref-neutral-20:#303039;
  --md-ref-neutral-30:#464550; --md-ref-neutral-40:#5e5c68; --md-ref-neutral-50:#777581;
  --md-ref-neutral-60:#918e9b; --md-ref-neutral-70:#aca9b6; --md-ref-neutral-80:#c8c5d2;
  --md-ref-neutral-90:#e5e1ee; --md-ref-neutral-95:#f3f0fd; --md-ref-neutral-98:#fbf8ff;
  --md-ref-neutral-100:#ffffff;
  --md-ref-neutral-variant-30:#47454f; --md-ref-neutral-variant-50:#78757f;
  --md-ref-neutral-variant-60:#928f99; --md-ref-neutral-variant-80:#c9c5d0;
  --md-ref-neutral-variant-90:#e5e1ec;

  /* --- light scheme roles --- */
  --md-sys-color-primary:var(--md-ref-primary-40);
  --md-sys-color-on-primary:var(--md-ref-primary-100);
  --md-sys-color-primary-container:var(--md-ref-primary-90);
  --md-sys-color-on-primary-container:var(--md-ref-primary-10);
  --md-sys-color-secondary:var(--md-ref-secondary-40);
  --md-sys-color-on-secondary:#ffffff;
  --md-sys-color-secondary-container:var(--md-ref-secondary-90);
  --md-sys-color-on-secondary-container:var(--md-ref-secondary-10);
  --md-sys-color-tertiary:var(--md-ref-tertiary-40);
  --md-sys-color-on-tertiary:#ffffff;
  --md-sys-color-tertiary-container:var(--md-ref-tertiary-90);
  --md-sys-color-on-tertiary-container:var(--md-ref-tertiary-10);
  --md-sys-color-error:var(--md-ref-error-40);
  --md-sys-color-on-error:#ffffff;
  --md-sys-color-error-container:#f9dedc;
  --md-sys-color-on-error-container:#601410;

  --md-sys-color-surface:#f7f6fc;
  --md-sys-color-on-surface:var(--md-ref-neutral-10);
  --md-sys-color-on-surface-variant:var(--md-ref-neutral-variant-30);
  --md-sys-color-surface-dim:#dedae8;
  --md-sys-color-surface-bright:#fbf9ff;
  --md-sys-color-surface-container-lowest:#ffffff;
  --md-sys-color-surface-container-low:#f5f2fb;
  --md-sys-color-surface-container:#efedf5;
  --md-sys-color-surface-container-high:#e9e6f0;
  --md-sys-color-surface-container-highest:#e3e0eb;
  --md-sys-color-outline:var(--md-ref-neutral-variant-50);
  --md-sys-color-outline-variant:#d7d3df;
  --md-sys-color-inverse-surface:#302f37;
  --md-sys-color-inverse-on-surface:#f3f0f9;
  --md-sys-color-inverse-primary:var(--md-ref-primary-80);
  --md-sys-color-scrim:#16181d;
  --md-sys-color-shadow:#33265a;

  /* --- state layer opacities (m3.material.io/foundations/interaction/states) --- */
  --md-sys-state-hover-opacity:.08; /* @kind other */
  --md-sys-state-focus-opacity:.10; /* @kind other */
  --md-sys-state-pressed-opacity:.10; /* @kind other */
  --md-sys-state-dragged-opacity:.16; /* @kind other */
  --md-sys-state-disabled-content-opacity:.38; /* @kind other */
  --md-sys-state-disabled-container-opacity:.12; /* @kind other */
}
[data-theme=dark]{
  --md-sys-color-primary:var(--md-ref-primary-80);
  --md-sys-color-on-primary:var(--md-ref-primary-20);
  --md-sys-color-primary-container:var(--md-ref-primary-30);
  --md-sys-color-on-primary-container:var(--md-ref-primary-90);
  --md-sys-color-secondary:var(--md-ref-secondary-80);
  --md-sys-color-on-secondary:var(--md-ref-secondary-20);
  --md-sys-color-secondary-container:var(--md-ref-secondary-30);
  --md-sys-color-on-secondary-container:var(--md-ref-secondary-90);
  --md-sys-color-tertiary:var(--md-ref-tertiary-80);
  --md-sys-color-on-tertiary:var(--md-ref-tertiary-20);
  --md-sys-color-tertiary-container:var(--md-ref-tertiary-30);
  --md-sys-color-on-tertiary-container:var(--md-ref-tertiary-90);
  --md-sys-color-error:var(--md-ref-error-80);
  --md-sys-color-on-error:var(--md-ref-error-20);
  --md-sys-color-error-container:#5c1a12;
  --md-sys-color-on-error-container:#ffb4a8;

  --md-sys-color-surface:#111117;
  --md-sys-color-on-surface:#e6e1eb;
  --md-sys-color-on-surface-variant:var(--md-ref-neutral-variant-80);
  --md-sys-color-surface-dim:#111117;
  --md-sys-color-surface-bright:#37363f;
  --md-sys-color-surface-container-lowest:#0b0b10;
  --md-sys-color-surface-container-low:#1a1921;
  --md-sys-color-surface-container:#1e1d26;
  --md-sys-color-surface-container-high:#292831;
  --md-sys-color-surface-container-highest:#34333d;
  --md-sys-color-outline:var(--md-ref-neutral-variant-60);
  --md-sys-color-outline-variant:#47454f;
  --md-sys-color-inverse-surface:#e6e1eb;
  --md-sys-color-inverse-on-surface:#303039;
  --md-sys-color-inverse-primary:var(--md-ref-primary-40);
  --md-sys-color-scrim:#05070a;
  --md-sys-color-shadow:#000000;
}

/* M3 shape scale — m3.material.io/styles/shape. Mapped onto the corner sizes the
   Blokks source already uses: md 12px matches --radius-md, xl 28px matches the modal. */
:root{
  --md-sys-shape-corner-none:0px;
  --md-sys-shape-corner-extra-small:4px;
  --md-sys-shape-corner-small:8px;
  --md-sys-shape-corner-medium:12px;
  --md-sys-shape-corner-large:16px;
  --md-sys-shape-corner-large-increased:20px;
  --md-sys-shape-corner-extra-large:28px;
  --md-sys-shape-corner-extra-large-increased:32px;
  --md-sys-shape-corner-extra-extra-large:48px;
  --md-sys-shape-corner-full:999px;
}

/* M3 elevation levels 0-5 — m3.material.io/styles/elevation.
   Shadow color is the system's warm violet (--md-sys-color-shadow #33265a), not black,
   so elevation stays consistent with the source app's node-card shadow. */
:root{
  --md-sys-elevation-level0:none;
  --md-sys-elevation-level1:0 1px 2px #33265a12,0 8px 24px #33265a12;
  --md-sys-elevation-level2:0 1px 2px #33265a20,0 2px 6px 2px #33265a14;
  --md-sys-elevation-level3:0 4px 8px 3px #33265a14,0 1px 3px #33265a24;
  --md-sys-elevation-level4:0 6px 10px 4px #33265a14,0 2px 3px #33265a24;
  --md-sys-elevation-level5:0 8px 12px 6px #33265a16,0 4px 4px #33265a24;
}
[data-theme=dark]{
  --md-sys-elevation-level1:0 1px 2px #0007,0 8px 24px #0007;
  --md-sys-elevation-level2:0 1px 2px #00000059,0 2px 6px 2px #0000002e;
  --md-sys-elevation-level3:0 4px 8px 3px #0009,0 1px 3px #000b;
  --md-sys-elevation-level4:0 6px 10px 4px #0000002e,0 2px 3px #00000059;
  --md-sys-elevation-level5:0 8px 12px 6px #00000033,0 4px 4px #00000059;
}

:root{
  /* M3 typeface roles, using Google's own newer Roboto family (per m3.material.io/styles/typography/fonts):
     Brand = Roboto Serif (expressive display/headline face), Plain = Roboto Flex (modern
     variable UI/body face), plus Roboto Mono for anything code-like. Replaces Space Grotesk +
     Inter + Geist Mono — see readme.md "Intentional additions". */
  /* Brand = the logo's own treatment: a tight, bold grotesque. The app icon sets its
     wordmark in the system UI stack at weight 700 / letter-spacing -7 on 132px (-.053em),
     so it names no distinct typeface — Roboto Flex at heavy weight and tight tracking
     reproduces that character and keeps the whole system on one variable family. */
  --font-brand:"Roboto Flex","Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,ui-sans-serif,system-ui,sans-serif;
  --font-brand-weight:700;
  --font-brand-tracking:-.053em;
  --font-plain:"Roboto Flex","Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,ui-sans-serif,system-ui,sans-serif;
  --font-sans:var(--font-plain);
  --font-mono:"Roboto Mono",ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,monospace;

  /* M3 type scale, adapted to Blokks' dense UI proportions. Display/Headline use --font-brand;
     Title/Body/Label use --font-plain, matching the app's existing small, utilitarian sizing. */
  --type-display-large-font:var(--font-brand); --type-display-large-size:40px; --type-display-large-line:1.1; --type-display-large-weight:700; --type-display-large-tracking:-.053em;
  --type-display-medium-font:var(--font-brand); --type-display-medium-size:32px; --type-display-medium-line:1.15; --type-display-medium-weight:700; --type-display-medium-tracking:-.053em;
  --type-display-small-font:var(--font-brand); --type-display-small-size:26px; --type-display-small-line:1.2; --type-display-small-weight:700; --type-display-small-tracking:-.045em;
  --type-headline-large-font:var(--font-brand); --type-headline-large-size:24px; --type-headline-large-line:1.25; --type-headline-large-weight:700; --type-headline-large-tracking:-.04em;
  --type-headline-medium-font:var(--font-brand); --type-headline-medium-size:20px; --type-headline-medium-line:1.28; --type-headline-medium-weight:700; --type-headline-medium-tracking:-.035em;
  --type-headline-small-font:var(--font-brand); --type-headline-small-size:18px; --type-headline-small-line:1.3; --type-headline-small-weight:700; --type-headline-small-tracking:-.053em;
  --type-title-large-font:var(--font-plain); --type-title-large-size:14px; --type-title-large-line:1.3; --type-title-large-weight:600;
  --type-title-medium-font:var(--font-plain); --type-title-medium-size:13px; --type-title-medium-line:1.3; --type-title-medium-weight:600;
  --type-title-small-font:var(--font-plain); --type-title-small-size:12.5px; --type-title-small-line:1.3; --type-title-small-weight:600;
  --type-body-large-font:var(--font-plain); --type-body-large-size:14px; --type-body-large-line:1.4; --type-body-large-weight:400;
  --type-body-medium-font:var(--font-plain); --type-body-medium-size:13px; --type-body-medium-line:1.4; --type-body-medium-weight:400;
  --type-body-small-font:var(--font-plain); --type-body-small-size:12px; --type-body-small-line:1.4; --type-body-small-weight:400;
  --type-label-large-font:var(--font-plain); --type-label-large-size:.75rem; --type-label-large-line:1rem; --type-label-large-weight:500;
  --type-label-medium-font:var(--font-plain); --type-label-medium-size:11px; --type-label-medium-line:1.3; --type-label-medium-weight:500;
  --type-label-small-font:var(--font-mono); --type-label-small-size:10.5px; --type-label-small-line:1.3; --type-label-small-weight:500;

  /* Product type roles (spec/machine/tokens.json type.roles): the seven
     --type-role-* names as font shorthands (weight size family), with
     tracking companions where the role declares tracking. Where a role's px
     differs from its claimed M3 alias (display 32 vs 26, heading 20 vs 18,
     subhead 15 vs 13, caption 10.5 vs 11, mono 11 vs 10.5), the tokens.json
     px value is declared here and the alias claim holds for family/weight
     only (heading: family only - shipping headline-small weight is 700, the
     role declares 600). The fifteen M3 --type-* roles above stay declared;
     neither set replaces the other. */
  --type-role-display:700 32px var(--font-brand); --type-role-display-tracking:-.05em;
  --type-role-heading:600 20px var(--font-brand); --type-role-heading-tracking:-.02em;
  --type-role-subhead:600 15px var(--font-plain); --type-role-subhead-tracking:-.01em;
  --type-role-body:var(--type-body-medium-weight) var(--type-body-medium-size) var(--font-plain);
  --type-role-label:500 var(--type-label-large-size) var(--font-plain);
  --type-role-caption:500 10.5px var(--font-plain);
  --type-role-mono:500 11px var(--font-mono);

  /* Page density type. Canvas remains the default; page surfaces opt in explicitly. */
  --type-page-title-size:46px; --type-page-title-line:1.02;
  --type-page-detail-title-size:30px;
  --type-page-section-size:19px; --type-page-section-weight:600; --type-page-section-tracking:-.01em;
  --type-page-card-title-size:18.5px; --type-page-card-title-weight:600; --type-page-card-title-tracking:-.015em;
  --type-page-body-size:13.5px; --type-page-body-line:1.55;
  --type-page-deck-size:15px;
  --type-page-control-size:14px;
  --type-page-meta-size:12.5px;
  --type-page-hero-size:40px; --type-page-hero-weight:600; --type-page-hero-tracking:-.03em;
  --type-page-eyebrow-size:12.5px; --type-page-eyebrow-tracking:.1em;

  /* M3 "editorial treatment" axes — Roboto Flex is variable, so hero/expressive moments (never
     labels or plain info text) can push weight/width/grade/optical-size instead of switching
     typeface. Baseline stays at wght 400-600; the editorial variant widens and lightens for
     a large display moment. */
  --type-editorial-hero-variation:"wght" 380,"wdth" 118,"opsz" 96,"GRAD" -25;
  --type-editorial-hero-tracking:-.03em;

  --text-body-size:14px; --text-body-line:1.4;
  --text-caption-size:.75rem; --text-caption-line:1rem;
  --text-node-title-size:14px; --text-node-title-weight:600;
  --text-panel-title-size:32px; --text-panel-title-tracking:-.04em;
  --text-kicker-size:11px; --text-kicker-tracking:.12em;
}

:root{
  --radius-2xs:.25rem; --radius-xs:.5rem; --radius-sm:.625rem; --radius-md:.75rem;
  --radius-lg:.875rem; --radius-xl:1.25rem; --radius-2xl:1.75rem; --radius-pill:999px;
  --space-1:4px; --space-2:6px; --space-3:8px; --space-4:10px;
  --space-5:12px; --space-6:14px; --space-7:16px; --space-8:20px;
  --palette-w:248px; --panel-w:388px;
  --node-w:288px;
  /* Quick controls wrap before their value becomes unreadable. */
  --nqc-col-min:104px; --nqc-field-w:56px;

  /* Page density — library, workspace, detail and dialog surfaces. */
  --page-max:1560px; --page-pad:28px; --page-rail-w:348px; --page-col-gap:28px;
  --page-btn-h:40px; --page-btn-ghost-h:36px; --page-search-h:44px; --page-segment-h:36px;
  --page-mark:52px; --page-card-pad:20px; --page-grid-gap:32px; --page-grid-gap-plain:20px;
  --page-col-min:320px; --page-col-min-preview:400px;
  --page-spine-gutter:34px;

  /* Layout token requests answered in the final fix wave (T1b pattern):
     the tooltip cap and the Settings page columns. */
  --tooltip-max-w:320px;
  --settings-nav-w:236px; --settings-content-max:1180px; --settings-search-max:320px;

  /* Control geometry - answers the wave-2 token requests from T3 (form/nav)
     and T5 (state). The field heights are aliases onto the page button
     heights the fields already rode, so the two stay in step by construction.
     --control-h-sm/-md name the shipped .btn-sm/.btn heights as vocabulary;
     the 224 .btn call sites are wave-3 work and are untouched here. */
  --border-w-hairline:1px; --check-stroke-w:2px; --focus-ring-w:3px;
  --field-h-md:var(--page-btn-ghost-h); --field-h-lg:var(--page-btn-h);
  --control-h-sm:28px; --control-h-md:32px;

  /* C7 hit-size contract (spec/machine/tokens.json hitSize). Ordinary fine
     pointer controls use --hit-standard; paid/destructive controls use
     --hit-money; coarse node tuning uses --hit-coarse at 100% and is hidden
     below that zoom so its screen-space target never shrinks below the floor. */
  --hit-standard:32px; --hit-money:40px; --hit-coarse:48px;

  /* State-primitive geometry (T5): skeleton shapes carried from the retired
     .billing-skeleton / .skeleton-card ancestors, and the empty-state minimum
     from the page-41 specimen. */
  --skeleton-row-h:62px; --skeleton-card-h:172px; --skeleton-block-h:36px;
  --empty-min-h:150px;
}

:root{
  --motion-press:90ms; /* @kind other */
  --motion-fast:120ms; /* @kind other */
  --helper-stagger-delay:40ms; /* one-third of --motion-fast; motion-list-stagger specimen */
  --motion-default:210ms; /* @kind other */
  --motion-slow:300ms; /* @kind other; value coincides with --md-sys-motion-duration-medium2 */
  --motion-skeleton:1800ms; /* skeleton sweep cadence - a loop, not a transition, so it sits outside the transition scale */
  --ease-spatial:cubic-bezier(.16,1,.3,1); /* @kind other */
  --ease-effects:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-exit:cubic-bezier(.55,0,1,.45); /* @kind other */
}

html {
  min-height: 100%;
  background: var(--md-sys-color-surface);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
.landing {
  margin: 0;
  min-height: 100vh;
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  font-family: var(--font-plain);
  font-size: var(--type-page-body-size);
  line-height: var(--type-page-body-line);
}

body.landing-surface {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

img {
  display: block;
  max-width: 100%;
}

a {
  min-height: 44px;
  color: inherit;
  border-radius: var(--radius-pill);
  transition:
    color var(--motion-fast) var(--ease-effects),
    background-color var(--motion-fast) var(--ease-effects),
    border-color var(--motion-fast) var(--ease-effects),
    box-shadow var(--motion-default) var(--ease-effects),
    transform var(--motion-fast) var(--ease-spatial);
}

a:hover {
  background-color: color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent);
  box-shadow: var(--md-sys-elevation-level1);
}

a:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 3px;
}

a:active {
  transform: scale(.97);
}

.landing-header,
.landing-main,
.landing-footer,
.landing-hero,
.landing-rails,
.landing-human,
.hero-layout,
.batch-machine,
.machine-output-rail,
.cost-strip,
.rails-layout,
.rails-sequence,
.human-layout {
  min-width: 0;
}

.landing-shell {
  width: min(calc(100% - 64px), 1280px);
  margin-inline: auto;
}

.landing-header {
  position: relative;
  z-index: 4;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
}

.landing-header-shell,
.landing-footer-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing-header-shell {
  min-height: 64px;
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: -8px;
  padding: 4px 8px;
  text-decoration: none;
}

.landing-brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  clip-path: inset(9% round 20%);
}

.landing-brand-name,
.landing-hero-title,
.landing-rails h2,
.landing-human h2,
.landing-not-found h1 {
  font-family: var(--font-brand);
  font-weight: var(--font-brand-weight);
  letter-spacing: var(--font-brand-tracking);
}

.landing-brand-name {
  font-size: 1.35rem;
  line-height: 1;
}

.landing-brand-byline {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--type-label-small-size);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.landing-header-cta,
.landing-primary-cta,
.landing-contact-link,
.landing-secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 18px;
  border: 1px solid transparent;
  font-weight: 750;
  text-decoration: none;
}

.landing-header-cta,
.landing-primary-cta {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
}

.landing-header-cta:hover,
.landing-primary-cta:hover {
  color: var(--md-sys-color-on-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) 90%, var(--md-sys-color-on-surface));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent);
}

.landing-main {
  overflow: hidden;
}

.landing-hero {
  position: relative;
  isolation: isolate;
  padding-block-end: 28px;
  overflow: hidden;
  background-color: var(--md-sys-color-surface);
  background-image:
    radial-gradient(circle at 82% 15%, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent), transparent 32%),
    radial-gradient(circle at 54% 88%, color-mix(in srgb, var(--md-sys-color-tertiary) 12%, transparent), transparent 34%);
}

.landing-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, transparent, var(--md-sys-color-scrim) 46%);
}

.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 56px;
  padding-block: 72px 42px;
  width: min(calc(100% - 64px), 1600px);
}

.hero-copy,
.batch-machine,
.cost-strip,
.rails-layout,
.human-layout {
  animation: content-enter var(--motion-slow) var(--ease-spatial) both;
}

.batch-machine,
.cost-strip {
  animation-delay: var(--motion-fast);
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.landing-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  color: var(--md-sys-color-primary);
  font-size: var(--type-page-eyebrow-size);
  font-weight: 800;
  letter-spacing: var(--type-page-eyebrow-tracking);
  text-transform: uppercase;
}

.landing-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
  box-shadow: 0 0 18px var(--md-sys-color-primary);
}

.landing-hero-title {
  max-width: 650px;
  margin: 0;
  font-size: clamp(3.8rem, 6.4vw, 6rem);
  line-height: .9;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.landing-hero-title::after {
  content: "";
  display: block;
  width: 1.05em;
  height: .09em;
  margin-block-start: .16em;
  border-radius: var(--radius-pill);
  background: var(--md-sys-color-primary);
}

.landing-deck {
  max-width: 48ch;
  margin: 24px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--type-page-deck-size);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-block-start: 28px;
}

.landing-provenance,
.product-forms {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--type-label-small-size);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.batch-machine {
  position: relative;
  z-index: 2;
  height: 700px;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-xl);
  background-color: var(--md-sys-color-surface-container-lowest);
  background-image:
    linear-gradient(color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--md-sys-color-on-surface) 3%, transparent) 1px, transparent 1px),
    linear-gradient(155deg, color-mix(in srgb, var(--md-sys-color-primary-container) 14%, transparent), transparent 46%),
    linear-gradient(340deg, color-mix(in srgb, var(--md-sys-color-tertiary-container) 14%, transparent), transparent 54%);
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: var(--md-sys-elevation-level3), inset 0 1px color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
}

.machine-header {
  position: relative;
  z-index: 8;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-inline: 16px;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-low);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.machine-header-outcome {
  margin-inline-start: auto;
  color: var(--md-sys-color-primary);
  font: inherit;
}

.machine-stage-labels {
  position: absolute;
  z-index: 8;
  inset-block-start: 52px;
  inset-inline: 32px;
  display: grid;
  grid-template-columns: 1.05fr 1fr .9fr;
  gap: 28px;
  pointer-events: none;
}

.machine-stage-labels span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--md-sys-color-on-surface-variant);
}

.machine-stage-labels b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
  font-size: .78rem;
}

.machine-stage-labels strong {
  color: var(--md-sys-color-on-surface);
  font-size: .8rem;
}

.machine-stage-labels small {
  font-size: .62rem;
}

.machine-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--md-sys-color-primary);
}

.machine-source {
  position: absolute;
  z-index: 5;
  inset-block-start: 104px;
  inset-inline-start: 28px;
  width: 190px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-large-increased);
  background-color: var(--md-sys-color-surface-container-lowest);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-level1);
  animation: machine-source-cycle 7s var(--ease-effects) infinite;
}

.machine-source img,
.machine-output-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.machine-source img {
  clip-path: inset(112px 0 0);
}

.machine-source img {
  filter: saturate(.86) contrast(.96);
}

.machine-source strong,
.machine-source small {
  position: absolute;
  z-index: 2;
  inset-inline: 12px;
}

.machine-source strong {
  inset-block-start: 12px;
  color: var(--md-sys-color-on-surface);
  font-size: .7rem;
}

.machine-source small {
  inset-block-start: 30px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: .58rem;
}

.machine-source > strong,
.machine-source > small {
  display: none;
}

.machine-source::after {
  content: "Client\A Lifestyle brand\A\A Project / Pack\A Spring Launch\A\A Folder\A Q2 campaigns";
  position: absolute;
  z-index: 3;
  inset: 14px 12px auto;
  color: var(--md-sys-color-on-surface-variant);
  white-space: pre;
  font-size: .58rem;
  font-weight: 650;
  line-height: 1.45;
}

.machine-source span {
  position: absolute;
  z-index: 1;
  inset-inline-start: 8px;
  inset-block-end: 8px;
  padding: 3px 5px;
  border-radius: var(--radius-pill);
  color: var(--md-sys-color-on-primary-container);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 82%, transparent);
  font-family: var(--font-mono);
  font-size: .48rem;
  font-weight: 700;
}

.machine-instruction {
  position: absolute;
  z-index: 6;
  inset-block-start: 108px;
  inset-inline: 264px 386px;
  display: grid;
  grid-template-columns: minmax(160px, .72fr) minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  min-height: 70px;
  padding: 13px 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large-increased);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-low);
  box-shadow: var(--md-sys-elevation-level1);
}

.machine-instruction {
  display: none;
}

.machine-instruction strong {
  grid-row: 1 / 3;
  justify-self: start;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  color: var(--md-sys-color-on-tertiary-container);
  background: var(--md-sys-color-tertiary-container);
  font-family: var(--font-mono);
  font-size: .58rem;
}

.machine-instruction span {
  overflow: hidden;
  color: var(--md-sys-color-on-surface);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.machine-instruction small {
  color: var(--md-sys-color-on-surface-variant);
  font-size: .6rem;
}

.machine-matrix {
  position: absolute;
  z-index: 4;
  inset-block-start: 130px;
  inset-inline: 246px 354px;
  height: 450px;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large-increased);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-level1);
}

.machine-matrix-head,
.machine-matrix-row {
  display: grid;
  grid-template-columns: 34px repeat(4, minmax(0, 1fr));
}

.machine-matrix-head {
  height: 42px;
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-high);
}

.machine-matrix-head span,
.machine-matrix-row > * {
  min-width: 0;
  padding-inline: 8px;
  overflow: hidden;
  border-inline-end: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-matrix-head span {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .48rem;
  font-weight: 500;
  text-transform: uppercase;
}

.machine-matrix-row {
  position: relative;
  height: 92px;
  border-block-start: 1px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-low);
}

.machine-matrix-row > * {
  display: flex;
  align-items: center;
  font-size: .55rem;
}

.machine-matrix-row > :first-child {
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--font-mono);
}

.machine-matrix-row i::before {
  content: "";
  width: 100%;
  height: 7px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 15%, transparent);
}

.machine-matrix-row i:nth-child(odd)::before {
  background: color-mix(in srgb, var(--md-sys-color-primary) 13%, transparent);
}

.machine-matrix-row-example {
  color: var(--md-sys-color-on-surface);
  animation: machine-row-cycle 7s var(--ease-effects) infinite;
}

.machine-matrix-row-example > :not(:first-child) {
  animation: machine-value-cycle 7s var(--ease-effects) infinite;
}

.machine-matrix-row-example > :nth-child(3) {
  color: var(--md-sys-color-primary);
  font-weight: 650;
}

.machine-wires {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.machine-wires path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.machine-wire-base {
  stroke: color-mix(in srgb, var(--md-sys-color-outline) 44%, transparent);
  stroke-width: 2.5;
}

.machine-wire-signal,
.machine-wire-fan {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 220;
  opacity: 0;
}

.machine-wire-signal {
  stroke: var(--md-sys-color-primary);
  animation: machine-wire-cycle 7s linear infinite;
}

.machine-wire-fan {
  stroke: var(--md-sys-color-tertiary);
  animation: machine-fan-cycle 7s linear infinite;
}

.machine-run-action {
  position: absolute;
  z-index: 7;
  inset-block-start: auto;
  inset-block-end: 28px;
  inset-inline-start: 53%;
  min-width: 124px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--radius-pill);
  color: var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-level1);
  font-size: .65rem;
  font-weight: 700;
  transform: translateX(-50%);
  animation: machine-run-cycle 7s var(--ease-effects) infinite;
}

.machine-output-rail {
  position: absolute;
  z-index: 5;
  inset-inline: auto 32px;
  inset-block: 130px 118px;
  width: 310px;
  padding-block-start: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  justify-content: space-between;
  gap: 14px;
}

.machine-output-rail::before {
  content: "Outputs  ·  Review and approve";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.machine-output-card {
  position: relative;
  display: grid;
  min-width: 0;
  aspect-ratio: 9 / 16;
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large-increased);
  color: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container-lowest);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-level1);
  opacity: 1;
  filter: none;
  transform: none;
  animation: machine-output-group-a 7s var(--ease-spatial) infinite;
}

.machine-output-card:nth-child(3),
.machine-output-card:nth-child(4) {
  animation-name: machine-output-group-b;
}

.machine-output-card:nth-child(5),
.machine-output-card:nth-child(6) {
  animation-name: machine-output-group-c;
}

.machine-output-card b {
  position: relative;
  z-index: 1;
  height: 23px;
  display: flex;
  align-items: center;
  padding-inline: 6px;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
  font-family: var(--font-mono);
  font-size: .46rem;
}

.machine-output-card img {
  z-index: 0;
  filter: saturate(.84) contrast(.97);
  transition: filter var(--motion-default) var(--ease-effects);
}

.machine-output-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--md-sys-color-scrim) 12%, transparent), transparent 42%, color-mix(in srgb, var(--md-sys-color-scrim) 68%, transparent));
}

.machine-output-card b,
.machine-output-card i,
.machine-output-card em {
  z-index: 2;
}

.machine-output-card em {
  position: absolute;
  inset-inline: 8px;
  inset-block-end: 30px;
  color: white;
  font-size: .56rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
}

.machine-output-card i {
  top: auto;
  bottom: 10px;
  height: 14px;
  width: 34px;
  border: 1px solid color-mix(in srgb, white 65%, transparent);
  background: color-mix(in srgb, var(--md-sys-color-scrim) 70%, transparent);
}

.machine-output-card i {
  position: absolute;
  inset-inline: 7px;
  inset-block-start: 63%;
  height: 12%;
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--md-sys-color-on-surface-variant) 14%, transparent);
}

.machine-render-state {
  position: absolute;
  z-index: 7;
  inset-inline-end: 14px;
  inset-block-end: 30px;
  width: 310px;
}

.machine-render-status {
  position: relative;
  height: 24px;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--font-mono);
  font-size: .45rem;
  line-height: 1.25;
  text-align: end;
}

.machine-render-status span {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
}

.machine-status-ready {
  animation: machine-status-ready 7s var(--ease-effects) infinite;
}

.machine-status-rendered {
  animation: machine-status-rendered 7s var(--ease-effects) infinite;
}

.machine-status-review {
  opacity: 1;
  color: var(--md-sys-color-primary);
  animation: machine-status-review 7s var(--ease-effects) infinite;
}

.machine-progress {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--md-sys-color-surface-container-high);
}

.machine-progress-fill {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: var(--md-sys-color-primary);
  transform-origin: left;
  animation: machine-progress-cycle 7s var(--ease-spatial) infinite;
}

.cost-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding: 14px 22px;
  border-block: 1px solid var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-surface-container-low);
}

.cost-entry {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.cost-entry:last-child {
  justify-content: flex-end;
}

.cost-entry strong {
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 3vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.cost-entry span,
.cost-versus {
  color: var(--md-sys-color-on-surface-variant);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.cost-entry-blokks strong {
  color: var(--md-sys-color-primary);
}

.cost-qualification {
  position: relative;
  z-index: 1;
  margin-block: 12px 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: .78rem;
  line-height: 1.5;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.landing-rails {
  padding-block: 92px;
  border-block: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-lowest);
}

.rails-layout {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 64px;
}

.rails-heading h2,
.landing-human h2 {
  margin: 0;
  font-size: clamp(3rem, 5.4vw, 5.25rem);
  line-height: .92;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.rails-heading > p:last-child {
  max-width: 48ch;
  margin: 24px 0 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--type-page-deck-size);
  line-height: 1.55;
}

.rails-sequence {
  align-self: center;
  border-block-start: 1px solid var(--md-sys-color-outline-variant);
}

.rail-item {
  display: grid;
  grid-template-columns: 36px minmax(130px, .65fr) minmax(0, 1.35fr);
  gap: 14px;
  align-items: baseline;
  padding-block: 19px;
  border-block-end: 1px solid var(--md-sys-color-outline-variant);
}

.rail-item > span {
  color: var(--md-sys-color-primary);
  font-family: var(--font-mono);
  font-size: .67rem;
}

.rail-item strong {
  font-size: var(--type-title-small-size);
}

.rail-item p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.5;
}

.rails-closing {
  grid-column: 2;
  margin: 0;
  color: var(--md-sys-color-primary);
  font-family: var(--font-brand);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: var(--font-brand-weight);
  letter-spacing: var(--font-brand-tracking);
}

.landing-human {
  padding-block: 98px;
  background-color: var(--md-sys-color-surface);
  background-image: radial-gradient(circle at 76% 50%, color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent), transparent 34%);
}

.human-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, .38fr);
  align-items: center;
  gap: 64px;
}

.landing-human h2 span {
  display: block;
  color: var(--md-sys-color-primary);
}

.human-copy {
  display: grid;
  justify-items: start;
  gap: 20px;
}

.human-copy > p {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.6;
}

.human-copy .product-forms {
  color: var(--md-sys-color-on-surface);
}

.landing-footer {
  padding-block: 20px;
  border-block-start: 1px solid var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  background: var(--md-sys-color-surface-container-lowest);
}

.landing-footer p {
  margin: 0;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.landing-flow {
  display: grid;
  padding-block: 48px;
}

.landing-section {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: 32px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--radius-xl);
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-level1);
  animation: content-enter var(--motion-slow) var(--ease-spatial) both;
}

.landing-not-found-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.landing-contact-link {
  color: var(--md-sys-color-on-primary);
  background: var(--md-sys-color-primary);
}

.landing-secondary-link {
  border-color: var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-low);
}

/* The seven-second CSS-only loop is the approved hero choreography exception.
   Every animated machine state shares this timeline; no JavaScript timer participates. */
@keyframes machine-source-cycle {
  0%, 5%, 22%, 100% {
    border-color: var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-level1);
  }
  9%, 17% {
    border-color: var(--md-sys-color-primary);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent),
      var(--md-sys-elevation-level1);
  }
}

@keyframes machine-reference-float {
  0%, 100% { transform: translateY(0) rotate(.15deg); }
  50% { transform: translateY(-5px) rotate(-.15deg); }
}

@keyframes machine-wire-cycle {
  0%, 5% { opacity: 0; stroke-dashoffset: 0; }
  9%, 40% { opacity: .9; stroke-dashoffset: -210; }
  45%, 100% { opacity: 0; stroke-dashoffset: -210; }
}

@keyframes machine-row-cycle {
  0%, 17%, 100% {
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container-low);
  }
  24%, 43% {
    color: var(--md-sys-color-on-surface);
    background: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface-container-low));
  }
}

@keyframes machine-value-cycle {
  0%, 17%, 100% {
    opacity: .7;
    transform: translateX(-4px);
  }
  24%, 92% {
    opacity: 1;
    transform: none;
  }
}

@keyframes machine-run-cycle {
  0%, 39%, 47%, 100% {
    border-color: var(--md-sys-color-outline);
    box-shadow: var(--md-sys-elevation-level1);
    transform: translateX(-50%) scale(1);
  }
  42%, 45% {
    color: var(--md-sys-color-on-primary);
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent);
    transform: translateX(-50%) scale(.97);
  }
}

@keyframes machine-fan-cycle {
  0%, 44% { opacity: 0; stroke-dashoffset: 0; }
  49%, 75% { opacity: .82; stroke-dashoffset: -280; }
  80%, 100% { opacity: 0; stroke-dashoffset: -280; }
}

@keyframes machine-output-group-a {
  0%, 45%, 100% {
    opacity: .32;
    filter: saturate(.58);
    transform: translateY(8px);
    box-shadow: var(--md-sys-elevation-level1);
  }
  49%, 52% {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent),
      var(--md-sys-elevation-level1);
  }
  56%, 94% {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow: var(--md-sys-elevation-level1);
  }
}

@keyframes machine-output-group-b {
  0%, 55%, 100% {
    opacity: .32;
    filter: saturate(.58);
    transform: translateY(8px);
    box-shadow: var(--md-sys-elevation-level1);
  }
  59%, 62% {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent),
      var(--md-sys-elevation-level1);
  }
  66%, 94% {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow: var(--md-sys-elevation-level1);
  }
}

@keyframes machine-output-group-c {
  0%, 65%, 100% {
    opacity: .32;
    filter: saturate(.58);
    transform: translateY(8px);
    box-shadow: var(--md-sys-elevation-level1);
  }
  69%, 72% {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--md-sys-color-primary) 28%, transparent),
      var(--md-sys-elevation-level1);
  }
  76%, 94% {
    opacity: 1;
    filter: none;
    transform: none;
    box-shadow: var(--md-sys-elevation-level1);
  }
}

@keyframes machine-status-ready {
  0%, 76% { opacity: 1; }
  77%, 100% { opacity: 0; }
}

@keyframes machine-status-rendered {
  0%, 76% { opacity: 0; }
  77%, 89% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

@keyframes machine-status-review {
  0%, 89% { opacity: 0; }
  90%, 100% { opacity: 1; }
}

@keyframes machine-progress-cycle {
  0%, 76% { transform: scaleX(0); }
  77%, 100% { transform: scaleX(1); }
}

@keyframes content-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1000px) {
  .machine-stage-labels {
    display: none;
  }

  .hero-layout,
  .rails-layout,
  .human-layout {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    gap: 38px;
  }

  .batch-machine {
    width: min(100%, 760px);
    justify-self: center;
  }

  .rails-layout,
  .human-layout {
    gap: 42px;
  }

  .rails-closing {
    grid-column: 1;
  }

  .human-copy {
    max-width: 560px;
  }
}

@media (max-width: 620px) {
  .landing-shell {
    width: min(calc(100% - 24px), 1280px);
  }

  .landing-header-shell {
    min-height: 58px;
    gap: 8px;
  }

  .landing-brand {
    gap: 7px;
  }

  .landing-brand-mark {
    width: 30px;
    height: 30px;
  }

  .landing-brand-name {
    font-size: 1.12rem;
  }

  .landing-brand-byline {
    font-size: .47rem;
  }

  .landing-header-cta {
    padding-inline: 13px;
    font-size: .76rem;
  }

  .hero-layout {
    gap: 28px;
    padding-block: 40px 24px;
  }

  .landing-hero-title {
    font-size: clamp(3.05rem, 14vw, 3.45rem);
  }

  .landing-deck {
    margin-block-start: 20px;
    font-size: .95rem;
  }

  .hero-actions {
    margin-block-start: 22px;
  }

  .landing-provenance {
    font-size: .55rem;
  }

  .batch-machine {
    height: 315px;
    border-radius: var(--radius-lg);
  }

  .machine-header {
    height: 40px;
    padding-inline: 12px;
    font-size: .65625rem;
  }

  .machine-header-outcome {
    font-size: inherit;
  }

  .machine-source {
    inset-block-start: 58px;
    inset-inline-start: 12px;
    width: 62px;
    border-radius: var(--radius-md);
  }

  .machine-source span {
    display: none;
  }

  .machine-instruction {
    inset-block-start: 52px;
    inset-inline: 88px 12px;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 9px;
    border-radius: var(--radius-md);
  }

  .machine-instruction strong {
    grid-row: auto;
    font-size: .65625rem;
  }

  .machine-instruction span {
    font-size: .65625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .machine-instruction small {
    display: none;
  }

  .machine-matrix {
    inset-block-start: 126px;
    inset-inline: 88px 12px;
    height: 94px;
    border-radius: var(--radius-md);
  }

  .machine-matrix-head,
  .machine-matrix-row {
    grid-template-columns: 26px repeat(4, minmax(0, 1fr));
  }

  .machine-matrix-head {
    height: 25px;
  }

  .machine-matrix-row {
    height: 23px;
  }

  .machine-matrix-head span,
  .machine-matrix-row > * {
    padding-inline: 4px;
  }

  .machine-matrix-head span {
    font-size: .65625rem;
  }

  .machine-matrix-row > * {
    font-size: .65625rem;
  }

  .machine-wires {
    display: none;
  }

  .machine-run-action {
    inset-block-start: 214px;
    inset-inline-start: 56%;
    min-width: 74px;
    min-height: 28px;
    padding-inline: 9px;
    font-size: .65625rem;
  }

  .machine-output-rail {
    inset-inline: 88px 80px;
    inset-block-end: 11px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
  }

  .machine-output-card {
    border-radius: calc(var(--radius-md) - 2px);
  }

  .machine-output-card b {
    display: none;
  }

  .machine-output-card i,
  .machine-output-card em {
    inset-inline: 4px;
  }

  .machine-output-card em {
    display: none;
  }

  .machine-render-state {
    inset-inline-end: 7px;
    inset-block-end: 11px;
    width: 68px;
  }

  .machine-render-status {
    height: 28px;
    font-size: .65625rem;
  }


  .cost-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-height: 74px;
    padding: 13px 12px;
  }

  .cost-versus {
    display: none;
  }

  .cost-entry,
  .cost-entry:last-child {
    display: block;
  }

  .cost-entry:last-child {
    text-align: end;
  }

  .cost-entry strong,
  .cost-entry span {
    display: block;
  }

  .cost-entry strong {
    font-size: 1.75rem;
  }

  .cost-entry span {
    margin-block-start: 4px;
    font-size: .5rem;
  }

  .cost-qualification {
    font-size: .75rem;
    line-height: 1.45;
  }

  .landing-rails,
  .landing-human {
    padding-block: 58px;
  }

  .rails-heading h2,
  .landing-human h2 {
    font-size: clamp(3rem, 14vw, 3.8rem);
  }

  .rail-item {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px 10px;
    padding-block: 16px;
  }

  .rail-item p {
    grid-column: 2;
    font-size: .85rem;
  }

  .landing-footer-shell {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .landing-section {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .batch-machine,
  .cost-strip,
  .rails-layout,
  .human-layout,
  .landing-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .machine-source,
  .machine-matrix-row-example,
  .machine-matrix-row-example > *,
  .machine-run-action,
  .machine-output-card,
  .machine-status-ready,
  .machine-status-rendered,
  .machine-status-review,
  .machine-progress-fill {
    animation: none !important;
  }

  .machine-matrix-row-example > *,
  .machine-output-card {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .machine-wire-signal,
  .machine-wire-fan,
  .machine-status-ready,
  .machine-status-rendered {
    display: none !important;
  }

  .machine-run-action {
    transform: translateX(-50%);
  }

  .machine-status-review {
    position: static;
    display: block;
    opacity: 1;
  }

  .machine-progress-fill {
    transform: none;
  }

  a {
    transition: none;
  }

  a:active {
    transform: none;
  }
}

/* Final cost-layout overrides sit last so the legacy proof-card rules cannot flatten the ledger. */
.cost-proof-comparison {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .66fr) minmax(0, 1fr);
  gap: 14px;
}

.cost-entry,
.cost-entry:last-child {
  justify-content: flex-start;
  gap: 18px;
  padding: 22px;
}

.cost-line strong {
  color: rgba(249, 249, 250, .9);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: -.02em;
}

.cost-versus strong { font-size: clamp(2rem, 3.35vw, 3.5rem); }

@media (max-width: 1000px) {
  .cost-proof-comparison {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr) minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .cost-proof-comparison { grid-template-columns: 1fr 1fr; }
  .cost-entry,
  .cost-entry:last-child { padding: 15px 12px; gap: 13px; }
  .cost-line strong { font-size: .55rem; }
  .cost-versus { min-height: 86px; }
}

/* Wide-screen guides and progress direction. */
.cost-strip {
  width: min(calc(100% - 64px), 1600px);
}

.machine-review-title i u,
.machine-control-progress u {
  transform-origin: left center;
}

@media (max-width: 620px) {
  .cost-strip { width: min(calc(100% - 24px), 1600px); }
}

.rails-layout,
.human-layout {
  width: min(calc(100% - 64px), 1600px);
}

@media (max-width: 620px) {
  .rails-layout,
  .human-layout { width: min(calc(100% - 24px), 1600px); }
}

/* Cost proof v2: show the work that never reaches an approved output. */
.machine-app-logo img {
  clip-path: inset(9% round 20%);
}

.cost-proof-comparison {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .66fr) minmax(0, 1fr);
  gap: 14px;
}

.cost-entry,
.cost-entry:last-child {
  justify-content: flex-start;
  gap: 18px;
  padding: 22px;
}

.cost-entry header {
  display: grid;
  gap: 5px;
}

.cost-entry header > span {
  color: rgba(239, 239, 243, .58);
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cost-entry header > strong {
  font-family: var(--font-brand);
  font-size: clamp(2.65rem, 4.1vw, 4.25rem);
  line-height: .88;
  letter-spacing: -.06em;
}

.cost-entry header > small {
  color: rgba(239, 239, 243, .48);
  font-size: .64rem;
}

.cost-stack {
  width: 100%;
  height: 10px;
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .08);
}

.cost-stack i {
  height: 100%;
  border-inline-end: 2px solid #1b1f25;
}

.cost-entry-agent .cost-stack i:nth-child(1) { width: 43.09%; background: #77717f; }
.cost-entry-agent .cost-stack i:nth-child(2) { width: 11.13%; background: #a18462; }
.cost-entry-agent .cost-stack i:nth-child(3) { width: 41.97%; background: #555b64; }
.cost-entry-agent .cost-stack i:nth-child(4) { width: 3.81%; min-width: 8px; border: 0; background: var(--md-sys-color-primary); }
.cost-entry-blokks .cost-stack i:nth-child(1) { width: 2%; min-width: 8px; background: #77717f; }
.cost-entry-blokks .cost-stack i:nth-child(2) { flex: 1; border: 0; background: var(--md-sys-color-primary); }

.cost-ledger {
  display: grid;
  gap: 0;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
}

.cost-line {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0 9px 10px;
  border-block-end: 1px solid rgba(255, 255, 255, .06);
  border-inline-start: 3px solid #77717f;
}

.cost-line span {
  color: rgba(239, 239, 243, .62);
  font-size: .58rem;
  line-height: 1.25;
}

.cost-line strong {
  color: rgba(249, 249, 250, .9);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: -.02em;
}

.cost-line[data-cost-type="repair"] { border-inline-start-color: #a18462; }
.cost-line[data-cost-type="rejected"] { border-inline-start-color: #555b64; }
.cost-line[data-cost-type="approved"] { border-inline-start-color: var(--md-sys-color-primary); }
.cost-line[data-cost-type="control"] { border-inline-start-color: #77717f; }

.cost-versus {
  gap: 7px;
  padding-inline: 6px;
}

.cost-versus strong {
  font-size: clamp(2rem, 3.35vw, 3.5rem);
}

.cost-versus b {
  margin-block-start: 5px;
  padding: 6px 10px;
  border: 1px solid rgba(183, 239, 82, .28);
  border-radius: var(--radius-pill);
  color: var(--md-sys-color-primary);
  background: rgba(183, 239, 82, .07);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 1000px) {
  .cost-proof-comparison {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr) minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .cost-proof-comparison { grid-template-columns: 1fr 1fr; }
  .cost-entry,
  .cost-entry:last-child { padding: 15px 12px; gap: 13px; }
  .cost-entry header > strong { font-size: 2.25rem; }
  .cost-entry header > span { font-size: .5rem; }
  .cost-entry header > small { font-size: .53rem; }
  .cost-line { grid-template-columns: 1fr; gap: 3px; padding: 7px 0 7px 8px; }
  .cost-line span { font-size: .49rem; }
  .cost-line strong { font-size: .55rem; }
  .cost-versus { grid-column: 1 / -1; grid-row: 2; min-height: 86px; }
}

/* 14-second build-from-empty hero storyboard. */
.batch-machine { animation: machine-story-breathe 14s var(--ease-spatial) infinite; }

.machine-context-fields label span strong {
  color: inherit;
  font: inherit;
  font-weight: 450;
  opacity: 0;
  transform: translateY(4px);
}

.machine-context-fields label:nth-child(1) span strong { animation: context-fill-one 14s var(--ease-effects) infinite; }
.machine-context-fields label:nth-child(2) span strong { animation: context-fill-two 14s var(--ease-effects) infinite; }
.machine-context-fields label:nth-child(3) span strong { animation: context-fill-three 14s var(--ease-effects) infinite; }

.machine-context-fields label span {
  animation: context-field-focus 14s var(--ease-effects) infinite;
}

.machine-context-fields label:nth-child(2) span { animation-name: context-field-focus-two; }
.machine-context-fields label:nth-child(3) span { animation-name: context-field-focus-three; }

.machine-source { animation: source-shell-build 14s var(--ease-effects) infinite; }
.machine-source img { animation: source-media-build 14s var(--ease-spatial) infinite; }
.machine-source span,
.machine-brief-copy { animation: source-meta-build 14s var(--ease-effects) infinite; }

.machine-matrix-title strong,
.machine-matrix-title small { animation: matrix-title-build 14s var(--ease-effects) infinite; }

.machine-matrix-grid > b { animation: matrix-header-build 14s var(--ease-effects) infinite; }
.machine-matrix-grid > span,
.machine-matrix-grid > small {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

.machine-matrix-grid > :nth-child(n+5):nth-child(-n+8) { animation: matrix-row-one 14s var(--ease-effects) infinite; }
.machine-matrix-grid > :nth-child(n+9):nth-child(-n+12) { animation: matrix-row-two 14s var(--ease-effects) infinite; }
.machine-matrix-grid > :nth-child(n+13):nth-child(-n+16) { animation: matrix-row-three 14s var(--ease-effects) infinite; }
.machine-matrix-grid > :nth-child(n+17):nth-child(-n+20) { animation: matrix-more-build 14s var(--ease-effects) infinite; }

.machine-preview-cta strong,
.machine-preview-cta small { animation: matrix-preview-build 14s var(--ease-effects) infinite; }

.machine-review-title > strong { animation: review-title-build 14s var(--ease-effects) infinite; }
.machine-render-count { animation: render-count-build 14s var(--ease-effects) infinite; }

.machine-output-card,
.machine-output-card:nth-child(n) {
  animation: none;
  border-color: rgba(255, 255, 255, .075);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
}

.machine-output-card img,
.machine-output-card em,
.machine-output-card b {
  opacity: 0;
  transform: translateY(8px) scale(.97);
}

.machine-output-card:nth-child(1) :is(img, em, b) { animation: output-build-one 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(2) :is(img, em, b) { animation: output-build-two 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(3) :is(img, em, b) { animation: output-build-three 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(4) :is(img, em, b) { animation: output-build-four 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(5) :is(img, em, b) { animation: output-build-five 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(6) :is(img, em, b) { animation: output-build-six 14s var(--ease-spatial) infinite; }

.machine-output-card:nth-child(1) { animation: output-shell-one 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(2) { animation: output-shell-two 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(3) { animation: output-shell-three 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(4) { animation: output-shell-four 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(5) { animation: output-shell-five 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(6) { animation: output-shell-six 14s var(--ease-effects) infinite; }

.machine-review-title i u,
.machine-control-progress u { animation: approval-build 14s var(--ease-spatial) infinite; }

.machine-ready,
.machine-approved-count,
.machine-review-note { animation: approval-copy-build 14s var(--ease-effects) infinite; }

.machine-controls button:not(.machine-save) { animation: run-action-build 14s var(--ease-effects) infinite; }

@keyframes machine-story-breathe {
  0%, 100% { transform: perspective(1800px) rotateY(-4.8deg) rotateX(1.6deg) rotateZ(-.7deg) translateY(0); }
  36% { transform: perspective(1800px) rotateY(-4.15deg) rotateX(1.3deg) rotateZ(-.5deg) translateY(-3px); }
  76% { transform: perspective(1800px) rotateY(-5.05deg) rotateX(1.75deg) rotateZ(-.78deg) translateY(-5px); }
  94% { transform: perspective(1800px) rotateY(-4.55deg) rotateX(1.45deg) rotateZ(-.62deg) translateY(-2px); }
}

@keyframes context-field-focus {
  0%, 8%, 22%, 96%, 100% { border-color: rgba(255, 255, 255, .11); box-shadow: none; }
  10%, 16% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 0 0 2px rgba(183, 239, 82, .08); }
}
@keyframes context-field-focus-two {
  0%, 14%, 28%, 96%, 100% { border-color: rgba(255, 255, 255, .11); box-shadow: none; }
  16%, 22% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 0 0 2px rgba(183, 239, 82, .08); }
}
@keyframes context-field-focus-three {
  0%, 20%, 34%, 96%, 100% { border-color: rgba(255, 255, 255, .11); box-shadow: none; }
  22%, 28% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 0 0 2px rgba(183, 239, 82, .08); }
}

@keyframes context-fill-one {
  0%, 10% { opacity: 0; transform: translateY(4px); }
  14%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes context-fill-two {
  0%, 16% { opacity: 0; transform: translateY(4px); }
  20%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes context-fill-three {
  0%, 22% { opacity: 0; transform: translateY(4px); }
  26%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes source-shell-build {
  0%, 22% { border-color: rgba(255, 255, 255, .07); box-shadow: none; }
  27%, 34% { border-color: rgba(183, 239, 82, .48); box-shadow: 0 10px 30px rgba(183, 239, 82, .12); }
  39%, 96% { border-color: rgba(255, 255, 255, .09); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
  99%, 100% { border-color: rgba(255, 255, 255, .07); box-shadow: none; }
}
@keyframes source-media-build {
  0%, 24% { opacity: 0; transform: scale(1.06); filter: saturate(.5) brightness(.45); }
  31%, 96% { opacity: 1; transform: scale(1); filter: saturate(.76) contrast(.94) brightness(.82); }
  99%, 100% { opacity: 0; transform: scale(.99); }
}
@keyframes source-meta-build {
  0%, 29% { opacity: 0; transform: translateY(5px); }
  34%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes matrix-title-build {
  0%, 28% { opacity: 0; transform: translateY(5px); }
  33%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; }
}
@keyframes matrix-header-build {
  0%, 32% { opacity: 0; clip-path: inset(0 100% 0 0); }
  38%, 96% { opacity: 1; clip-path: inset(0); }
  99%, 100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
@keyframes matrix-row-one {
  0%, 37% { opacity: 0; clip-path: inset(0 100% 0 0); background: transparent; }
  43%, 49% { opacity: 1; clip-path: inset(0); background: rgba(183, 239, 82, .1); }
  53%, 96% { opacity: 1; clip-path: inset(0); background: transparent; }
  99%, 100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
@keyframes matrix-row-two {
  0%, 43% { opacity: 0; clip-path: inset(0 100% 0 0); background: transparent; }
  49%, 55% { opacity: 1; clip-path: inset(0); background: rgba(183, 239, 82, .1); }
  59%, 96% { opacity: 1; clip-path: inset(0); background: transparent; }
  99%, 100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
@keyframes matrix-row-three {
  0%, 49% { opacity: 0; clip-path: inset(0 100% 0 0); background: transparent; }
  55%, 61% { opacity: 1; clip-path: inset(0); background: rgba(183, 239, 82, .1); }
  65%, 96% { opacity: 1; clip-path: inset(0); background: transparent; }
  99%, 100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}
@keyframes matrix-more-build {
  0%, 54% { opacity: 0; clip-path: inset(0 100% 0 0); }
  60%, 96% { opacity: 1; clip-path: inset(0); }
  99%, 100% { opacity: 0; }
}
@keyframes matrix-preview-build {
  0%, 57% { opacity: 0; transform: translateY(4px); }
  63%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; }
}

@keyframes review-title-build {
  0%, 50% { opacity: 0; transform: translateY(4px); }
  56%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; }
}
@keyframes render-count-build {
  0%, 76% { opacity: 0; transform: translateY(4px); }
  82%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; }
}

@keyframes output-build-one { 0%, 55% { opacity: 0; transform: translateY(9px) scale(.96); } 61%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes output-build-two { 0%, 59% { opacity: 0; transform: translateY(9px) scale(.96); } 65%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes output-build-three { 0%, 63% { opacity: 0; transform: translateY(9px) scale(.96); } 69%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes output-build-four { 0%, 67% { opacity: 0; transform: translateY(9px) scale(.96); } 73%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes output-build-five { 0%, 71% { opacity: 0; transform: translateY(9px) scale(.96); } 77%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes output-build-six { 0%, 75% { opacity: 0; transform: translateY(9px) scale(.96); } 81%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; transform: translateY(-3px); } }

@keyframes output-shell-one { 0%, 55%, 96%, 100% { border-color: rgba(255, 255, 255, .075); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); } 59%, 64% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 10px 25px rgba(183, 239, 82, .14); } }
@keyframes output-shell-two { 0%, 59%, 96%, 100% { border-color: rgba(255, 255, 255, .075); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); } 63%, 68% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 10px 25px rgba(183, 239, 82, .14); } }
@keyframes output-shell-three { 0%, 63%, 96%, 100% { border-color: rgba(255, 255, 255, .075); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); } 67%, 72% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 10px 25px rgba(183, 239, 82, .14); } }
@keyframes output-shell-four { 0%, 67%, 96%, 100% { border-color: rgba(255, 255, 255, .075); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); } 71%, 76% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 10px 25px rgba(183, 239, 82, .14); } }
@keyframes output-shell-five { 0%, 71%, 96%, 100% { border-color: rgba(255, 255, 255, .075); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); } 75%, 80% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 10px 25px rgba(183, 239, 82, .14); } }
@keyframes output-shell-six { 0%, 75%, 96%, 100% { border-color: rgba(255, 255, 255, .075); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); } 79%, 84% { border-color: rgba(183, 239, 82, .55); box-shadow: 0 10px 25px rgba(183, 239, 82, .14); } }

@keyframes approval-build {
  0%, 76% { transform: scaleX(.03); }
  88%, 96% { transform: scaleX(.72); }
  99%, 100% { transform: scaleX(.03); }
}
@keyframes approval-copy-build {
  0%, 80% { opacity: 0; transform: translateY(4px); }
  86%, 96% { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; }
}
@keyframes run-action-build {
  0%, 84% { opacity: .34; transform: translateY(2px); box-shadow: none; }
  89%, 96% { opacity: 1; transform: translateY(-2px); box-shadow: 0 9px 30px rgba(183, 239, 82, .22); }
  99%, 100% { opacity: .34; transform: translateY(2px); box-shadow: none; }
}

@media (max-width: 1000px) {
  .batch-machine { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .batch-machine,
  .machine-context-fields label span,
  .machine-context-fields label span strong,
  .machine-source,
  .machine-source img,
  .machine-source span,
  .machine-brief-copy,
  .machine-matrix-title strong,
  .machine-matrix-title small,
  .machine-matrix-grid > *,
  .machine-preview-cta strong,
  .machine-preview-cta small,
  .machine-review-title > *,
  .machine-output-card,
  .machine-output-card > *,
  .machine-review-title i u,
  .machine-control-progress u,
  .machine-ready,
  .machine-approved-count,
  .machine-review-note,
  .machine-controls button:not(.machine-save) {
    animation: none !important;
    opacity: 1;
    clip-path: none;
    transform: none;
  }
}

/* Final cost-layout overrides: keep after the legacy proof-card rules. */
.cost-proof-comparison {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .66fr) minmax(0, 1fr);
  gap: 14px;
}

.cost-entry,
.cost-entry:last-child {
  justify-content: flex-start;
  gap: 18px;
  padding: 22px;
}

.cost-line strong {
  color: rgba(249, 249, 250, .9);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: -.02em;
}

.cost-versus strong { font-size: clamp(2rem, 3.35vw, 3.5rem); }

@media (max-width: 1000px) {
  .cost-proof-comparison {
    grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr) minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .cost-proof-comparison { grid-template-columns: 1fr 1fr; }
  .cost-entry,
  .cost-entry:last-child { padding: 15px 12px; gap: 13px; }
  .cost-line strong { font-size: .55rem; }
  .cost-versus { min-height: 86px; }
}

/* Native hero batch UI — raster is limited to UGC preview photography. */
.batch-machine {
  height: 700px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 66%, transparent);
  border-radius: 28px;
  background: #12151a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .52), inset 0 1px rgba(255, 255, 255, .05);
  transform: perspective(1800px) rotateY(-4.8deg) rotateX(1.6deg) rotateZ(-.7deg);
  transform-origin: 50% 48%;
  transition: transform 700ms var(--ease-spatial);
}

.batch-machine:hover {
  transform: perspective(1800px) rotateY(-3deg) rotateX(.8deg) rotateZ(-.35deg) translateY(-4px);
}

.batch-machine > * {
  opacity: 1;
  pointer-events: auto;
}

.machine-appbar {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-block-end: 1px solid rgba(255, 255, 255, .09);
  color: rgba(244, 244, 247, .76);
  background: #16191f;
  font-size: .72rem;
}

.machine-app-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #f7f7f8;
  font-size: .82rem;
  font-weight: 750;
}

.machine-app-logo img {
  width: 19px;
  height: 19px;
}

.machine-app-divider { color: rgba(255, 255, 255, .25); }

.machine-new-batch {
  margin-inline-start: auto;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  color: #11140d;
  background: var(--md-sys-color-primary);
  font-size: .68rem;
  font-weight: 800;
}

.machine-workspace {
  height: 548px;
  display: grid;
  grid-template-columns: .78fr 1.08fr 1.26fr;
  gap: 14px;
  padding: 18px 18px 14px;
}

.machine-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.machine-section-title {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 4px;
  color: rgba(246, 246, 249, .92);
}

.machine-section-title b {
  width: 23px;
  height: 23px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #11140d;
  background: var(--md-sys-color-primary);
  font-size: .63rem;
}

.machine-section-title strong {
  font-size: .72rem;
  white-space: nowrap;
}

.machine-section-title small {
  overflow: hidden;
  color: rgba(229, 229, 234, .46);
  font-size: .54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.machine-context-fields,
.machine-matrix,
.machine-review-panel,
.machine-controls {
  border: 1px solid rgba(255, 255, 255, .07);
  background: #1b1f25;
  box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 12px 32px rgba(0, 0, 0, .18);
}

.machine-context-fields {
  padding: 12px;
  display: grid;
  gap: 10px;
  border-radius: 17px;
}

.machine-context-fields label {
  display: grid;
  gap: 4px;
  color: rgba(248, 248, 250, .82);
  font-size: .52rem;
  font-weight: 650;
}

.machine-context-fields label span {
  position: relative;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  color: rgba(248, 248, 250, .82);
  background: #1c2026;
  font-size: .58rem;
  font-weight: 450;
}

.machine-context-fields label span::after {
  content: "";
  position: absolute;
  inset-inline-end: 11px;
  width: 5px;
  height: 5px;
  border-inline-end: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.machine-source {
  position: relative;
  inset: auto;
  width: auto;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 15px;
  animation: none;
}

.machine-source::after { display: none; }

.machine-source img,
.machine-output-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: none;
  filter: saturate(.76) contrast(.94) brightness(.82);
}

.machine-source span {
  inset: auto auto 9px 9px;
  padding: 4px 8px;
  color: white;
  background: rgba(8, 9, 11, .78);
  font-size: .52rem;
}

.machine-brief-copy {
  padding: 0 5px;
  color: rgba(238, 238, 242, .62);
  font-size: .53rem;
  line-height: 1.42;
}

.machine-brief-copy strong {
  color: rgba(248, 248, 250, .9);
  font-size: .56rem;
}

.machine-brief-copy p { margin: 4px 0 0; }

.machine-matrix {
  position: relative;
  inset: auto;
  height: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 19px;
}

.machine-matrix-title {
  display: grid;
  gap: 4px;
  padding: 20px 20px 16px;
}

.machine-matrix-title strong,
.machine-review-title strong {
  color: rgba(250, 250, 251, .94);
  font-size: .78rem;
}

.machine-matrix-title small,
.machine-review-title span {
  color: rgba(235, 235, 239, .55);
  font-size: .56rem;
}

.machine-matrix-grid {
  margin: 0 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block-start: 1px solid rgba(255, 255, 255, .1);
  border-inline-start: 1px solid rgba(255, 255, 255, .1);
}

.machine-matrix-grid > * {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-inline-end: 1px solid rgba(255, 255, 255, .1);
  border-block-end: 1px solid rgba(255, 255, 255, .1);
  color: rgba(242, 242, 245, .75);
  font-size: .48rem;
  font-style: normal;
  line-height: 1.22;
  text-align: center;
}

.machine-matrix-grid b {
  min-height: 34px;
  color: var(--md-sys-color-primary);
  font-family: var(--font-mono);
  font-size: .47rem;
  text-transform: uppercase;
}

.machine-matrix-grid small {
  min-height: 38px;
  color: rgba(242, 242, 245, .62);
}

.machine-preview-cta {
  margin: auto 14px 14px;
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 16px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 12px;
}

.machine-preview-cta strong {
  color: rgba(249, 249, 250, .88);
  font-size: .62rem;
}

.machine-preview-cta small {
  color: rgba(235, 235, 239, .48);
  font-size: .52rem;
}

.machine-review-panel {
  flex: 1;
  min-height: 0;
  padding: 18px;
  border-radius: 19px;
}

.machine-review-title {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.machine-review-title i {
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
}

.machine-review-title i u {
  display: block;
  width: 58%;
  height: 100%;
  border-radius: inherit;
  background: var(--md-sys-color-primary);
  text-decoration: none;
}

.machine-output-rail {
  position: relative;
  inset: auto;
  width: auto;
  height: calc(100% - 58px);
  padding: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.machine-output-rail::before { display: none; }

.machine-output-card,
.machine-output-card:nth-child(n) {
  position: relative;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  background: #15181d;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  animation: machine-native-card 8s var(--ease-spatial) infinite;
}

.machine-output-card:nth-child(2) { animation-delay: 100ms; }
.machine-output-card:nth-child(3) { animation-delay: 200ms; }
.machine-output-card:nth-child(4) { animation-delay: 300ms; }
.machine-output-card:nth-child(5) { animation-delay: 400ms; }
.machine-output-card:nth-child(6) { animation-delay: 500ms; }

.machine-output-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(7, 8, 10, .2) 24%, rgba(7, 8, 10, .82));
}

.machine-output-card em {
  z-index: 2;
  inset: auto 7px 23px;
  color: white;
  font-size: .48rem;
  font-weight: 650;
  line-height: 1.14;
  text-shadow: 0 1px 4px #000, 0 2px 10px rgba(0, 0, 0, .72);
}

.machine-output-card b {
  position: absolute;
  z-index: 2;
  inset: auto auto 7px 7px;
  height: auto;
  padding: 3px 5px;
  border: 0;
  border-radius: 4px;
  color: white;
  background: rgba(7, 8, 10, .78);
  font-size: .43rem;
  font-weight: 650;
}

.machine-controls {
  height: 72px;
  margin: 0 18px 18px;
  display: grid;
  grid-template-columns: .72fr .9fr 1.45fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-radius: 17px;
}

.machine-controls > div {
  display: grid;
  gap: 4px;
  padding-inline-end: 14px;
  border-inline-end: 1px solid rgba(255, 255, 255, .09);
}

.machine-controls small,
.machine-controls p {
  margin: 0;
  color: rgba(234, 234, 238, .48);
  font-size: .52rem;
  line-height: 1.35;
}

.machine-controls strong {
  color: rgba(250, 250, 251, .9);
  font-size: .64rem;
}

.machine-controls .machine-ready {
  width: max-content;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--md-sys-color-primary);
  background: rgba(183, 239, 82, .1);
}

.machine-control-progress {
  width: 68px;
  height: 3px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .13);
}

.machine-control-progress u {
  display: block;
  width: 50%;
  height: 100%;
  background: var(--md-sys-color-primary);
  text-decoration: none;
}

.machine-controls button {
  min-width: 92px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--md-sys-color-primary);
  border-radius: var(--radius-pill);
  color: #11140d;
  background: var(--md-sys-color-primary);
  font: inherit;
  font-size: .58rem;
  font-weight: 750;
}

.machine-controls .machine-save {
  border-color: rgba(255, 255, 255, .28);
  color: rgba(248, 248, 250, .82);
  background: transparent;
}

@keyframes machine-native-card {
  0%, 68%, 100% { transform: translateY(0); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); }
  74%, 82% { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(183, 239, 82, .13); }
}

@media (max-width: 1000px) {
  .batch-machine,
  .batch-machine:hover {
    transform: none;
  }
}

@media (max-width: 620px) {
  .batch-machine { height: 360px; }
  .machine-appbar { height: 42px; padding-inline: 12px; }
  .machine-new-batch { padding: 6px 10px; }
  .machine-workspace { height: 260px; grid-template-columns: .74fr 1.1fr; gap: 7px; padding: 9px; }
  .machine-outputs-column { display: none; }
  .machine-section-title small { display: none; }
  .machine-section-title b { width: 18px; height: 18px; font-size: .48rem; }
  .machine-section-title strong { font-size: .55rem; }
  .machine-context-fields { gap: 5px; padding: 7px; }
  .machine-context-fields label { gap: 2px; font-size: .42rem; }
  .machine-context-fields label span { min-height: 23px; padding-inline: 7px; font-size: .44rem; }
  .machine-source, .machine-brief-copy { display: none; }
  .machine-matrix-title { padding: 10px; }
  .machine-matrix-grid { margin-inline: 7px; }
  .machine-matrix-grid > * { min-height: 31px; padding: 3px; font-size: .37rem; }
  .machine-matrix-grid b { min-height: 24px; font-size: .36rem; }
  .machine-matrix-grid small { min-height: 25px; }
  .machine-preview-cta { min-height: 42px; margin: auto 7px 7px; padding: 6px 9px; }
  .machine-preview-cta strong { font-size: .45rem; }
  .machine-preview-cta small { display: none; }
  .machine-controls { height: 48px; margin: 0 9px 9px; grid-template-columns: 1fr 1fr auto; gap: 7px; padding: 6px 8px; }
  .machine-controls p, .machine-controls .machine-save { display: none; }
  .machine-controls small { font-size: .4rem; }
  .machine-controls strong { font-size: .48rem; }
  .machine-controls button { min-width: 70px; height: 30px; font-size: .46rem; }
}

/* Cost proof card. */
.cost-strip {
  min-height: 0;
  margin-block: 14px 34px;
  padding: 34px;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.55fr);
  gap: 30px 42px;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  background: #15181e;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .04);
}

.cost-proof-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline-end: 30px;
  border-inline-end: 1px solid rgba(255, 255, 255, .09);
}

.cost-proof-heading .landing-eyebrow { margin: 0 0 15px; }

.cost-proof-heading h2 {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-family: var(--font-brand);
  font-size: clamp(2.25rem, 3.5vw, 3.7rem);
  line-height: .9;
  letter-spacing: -.055em;
}

.cost-proof-heading h2 span { color: var(--md-sys-color-primary); }

.cost-proof-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}

.cost-entry {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 19px;
  background: #1b1f25;
}

.cost-entry:last-child { justify-content: center; }

.cost-entry > span {
  color: rgba(239, 239, 243, .58);
  font-size: .62rem;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cost-entry strong {
  font-family: var(--font-brand);
  font-size: clamp(2.6rem, 4.7vw, 4.8rem);
  line-height: .9;
  letter-spacing: -.06em;
}

.cost-entry small {
  color: rgba(239, 239, 243, .48);
  font-size: .66rem;
}

.cost-entry-blokks {
  border-color: rgba(183, 239, 82, .32);
  background: #1a201a;
}

.cost-entry-blokks strong { color: var(--md-sys-color-primary); }

.cost-bar {
  width: 100%;
  height: 4px;
  display: block;
  flex: 0 0 auto;
  margin-block-start: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .09);
}

.cost-bar u {
  display: block;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(239, 239, 243, .42);
  text-decoration: none;
}

.cost-entry-agent .cost-bar u { width: 100%; }
.cost-entry-blokks .cost-bar u { width: 3.9%; min-width: 12px; background: var(--md-sys-color-primary); }

.cost-versus {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px 8px;
  color: rgba(244, 244, 247, .6);
  text-align: center;
}

.cost-versus small,
.cost-versus span {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.cost-versus strong {
  color: var(--md-sys-color-on-surface);
  font-family: var(--font-brand);
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.cost-method {
  grid-column: 1 / -1;
  padding-block-start: 20px;
  border-block-start: 1px solid rgba(255, 255, 255, .08);
}

.cost-method summary {
  width: max-content;
  color: rgba(244, 244, 247, .68);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
}

.cost-method[open] summary { color: var(--md-sys-color-primary); }

.cost-qualification {
  max-width: 120ch;
  margin: 14px 0 0;
  color: rgba(235, 235, 239, .48);
  font-size: .66rem;
  line-height: 1.55;
}

/* Authoritative 14s hero timeline. Keep this after the native machine layout. */
.batch-machine { animation: machine-story-breathe 14s var(--ease-spatial) infinite; }
.machine-context-fields label:nth-child(1) span strong { animation: context-fill-one 14s var(--ease-effects) infinite; }
.machine-context-fields label:nth-child(2) span strong { animation: context-fill-two 14s var(--ease-effects) infinite; }
.machine-context-fields label:nth-child(3) span strong { animation: context-fill-three 14s var(--ease-effects) infinite; }
.machine-context-fields label span { animation: context-field-focus 14s var(--ease-effects) infinite; }
.machine-context-fields label:nth-child(2) span { animation-name: context-field-focus-two; }
.machine-context-fields label:nth-child(3) span { animation-name: context-field-focus-three; }
.machine-source { animation: source-shell-build 14s var(--ease-effects) infinite; }
.machine-source img { animation: source-media-build 14s var(--ease-spatial) infinite; }
.machine-source span,
.machine-brief-copy { animation: source-meta-build 14s var(--ease-effects) infinite; }
.machine-matrix-title strong,
.machine-matrix-title small { animation: matrix-title-build 14s var(--ease-effects) infinite; }
.machine-matrix-grid > b { animation: matrix-header-build 14s var(--ease-effects) infinite; }
.machine-matrix-grid > :nth-child(n+5):nth-child(-n+8) { animation: matrix-row-one 14s var(--ease-effects) infinite; }
.machine-matrix-grid > :nth-child(n+9):nth-child(-n+12) { animation: matrix-row-two 14s var(--ease-effects) infinite; }
.machine-matrix-grid > :nth-child(n+13):nth-child(-n+16) { animation: matrix-row-three 14s var(--ease-effects) infinite; }
.machine-matrix-grid > :nth-child(n+17):nth-child(-n+20) { animation: matrix-more-build 14s var(--ease-effects) infinite; }
.machine-preview-cta strong,
.machine-preview-cta small { animation: matrix-preview-build 14s var(--ease-effects) infinite; }
.machine-review-title > strong { animation: review-title-build 14s var(--ease-effects) infinite; }
.machine-render-count { animation: render-count-build 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(1) { animation: output-shell-one 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(2) { animation: output-shell-two 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(3) { animation: output-shell-three 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(4) { animation: output-shell-four 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(5) { animation: output-shell-five 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(6) { animation: output-shell-six 14s var(--ease-effects) infinite; }
.machine-output-card:nth-child(1) :is(img, em, b) { animation: output-build-one 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(2) :is(img, em, b) { animation: output-build-two 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(3) :is(img, em, b) { animation: output-build-three 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(4) :is(img, em, b) { animation: output-build-four 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(5) :is(img, em, b) { animation: output-build-five 14s var(--ease-spatial) infinite; }
.machine-output-card:nth-child(6) :is(img, em, b) { animation: output-build-six 14s var(--ease-spatial) infinite; }
.machine-review-title i u,
.machine-control-progress u { animation: approval-build 14s var(--ease-spatial) infinite; }
.machine-ready,
.machine-approved-count,
.machine-review-note { animation: approval-copy-build 14s var(--ease-effects) infinite; }
.machine-controls button:not(.machine-save) { animation: run-action-build 14s var(--ease-effects) infinite; }

@media (max-width: 1000px) {
  .batch-machine { animation: none; }
  .cost-strip { grid-template-columns: 1fr; }
  .cost-proof-heading { padding: 0 0 24px; border-inline-end: 0; border-block-end: 1px solid rgba(255, 255, 255, .09); }
}

@media (max-width: 620px) {
  .cost-strip { margin-block: 10px 24px; padding: 20px 14px; gap: 20px; border-radius: 20px; }
  .cost-proof-heading h2 { font-size: 2.6rem; }
  .cost-proof-comparison { grid-template-columns: 1fr 1fr; gap: 9px; }
  .cost-entry { padding: 16px 12px; border-radius: 15px; }
  .cost-entry strong { font-size: 2.35rem; }
  .cost-versus { grid-column: 1 / -1; grid-row: 2; min-height: 74px; }
  .cost-versus strong { font-size: 2.45rem; }
  .cost-method summary { font-size: .66rem; }
  .cost-qualification { font-size: .61rem; }
}

@media (prefers-reduced-motion: reduce) {
  .batch-machine,
  .machine-context-fields label span,
  .machine-context-fields label span strong,
  .machine-source,
  .machine-source img,
  .machine-source span,
  .machine-brief-copy,
  .machine-matrix-title strong,
  .machine-matrix-title small,
  .machine-matrix-grid > *,
  .machine-preview-cta strong,
  .machine-preview-cta small,
  .machine-review-title > *,
  .machine-output-card,
  .machine-output-card > *,
  .machine-review-title i u,
  .machine-control-progress u,
  .machine-ready,
  .machine-approved-count,
  .machine-review-note,
  .machine-controls button:not(.machine-save) {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}

/* Final cost-layout overrides: keep after the legacy proof-card rules. */
.cost-proof-comparison {
  grid-template-columns: minmax(0, 1fr) minmax(150px, .66fr) minmax(0, 1fr);
  gap: 14px;
}
.cost-entry,
.cost-entry:last-child { justify-content: flex-start; gap: 18px; padding: 22px; }
.cost-line strong { color: rgba(249, 249, 250, .9); font-family: var(--font-mono); font-size: .64rem; letter-spacing: -.02em; }
.cost-versus strong { font-size: clamp(2rem, 3.35vw, 3.5rem); }

@media (max-width: 1000px) {
  .cost-proof-comparison { grid-template-columns: minmax(0, 1fr) minmax(120px, .55fr) minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .cost-proof-comparison { grid-template-columns: 1fr 1fr; }
  .cost-entry,
  .cost-entry:last-child { padding: 15px 12px; gap: 13px; }
  .cost-line strong { font-size: .55rem; }
  .cost-versus { min-height: 86px; }
}