:root{--hera-font-inter:'Inter';--hera-public-family-display:'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;--hera-public-weight-display:300;--hera-colour-canvas:#EFF3FD;--hera-colour-surface:#FFFFFF;--hera-colour-surface-sunken:#E9EDFA;--hera-colour-surface-raised:#F7F9FF;--hera-colour-border:#DCE3F5;--hera-colour-border-strong:#B9BEDF;--hera-colour-text-primary:#13172F;--hera-colour-text-secondary:#3A4066;--hera-colour-text-muted:#5C6280;--hera-colour-text-inverse:#FFFFFF;--hera-colour-accent:#4F46E5;--hera-colour-accent-hover:#4338CA;--hera-colour-accent-subtle:#E0E7FF;--hera-colour-accent-border:#C7D2FE;--hera-colour-accent-text:#4F46E5;--hera-colour-success:#059669;--hera-colour-success-subtle:#D1FAE5;--hera-colour-success-ink:#065F46;--hera-colour-warning:#A0480B;--hera-colour-warning-subtle:#FEF3C7;--hera-colour-warning-ink:#92400E;--hera-colour-danger:#DC2626;--hera-colour-danger-subtle:#FEE2E2;--hera-colour-danger-ink:#991B1B;--hera-colour-focus-ring:#6366F1;--hera-colour-identity-1-bg:#eef2ff;--hera-colour-identity-1-edge:#6366f1;--hera-colour-identity-1-ink:#3730a3;--hera-colour-identity-2-bg:#fdf2f8;--hera-colour-identity-2-edge:#ec4899;--hera-colour-identity-2-ink:#9d174d;--hera-colour-identity-3-bg:#ecfdf5;--hera-colour-identity-3-edge:#10b981;--hera-colour-identity-3-ink:#065f46;--hera-colour-identity-4-bg:#fffbeb;--hera-colour-identity-4-edge:#f59e0b;--hera-colour-identity-4-ink:#92400e;--hera-colour-identity-5-bg:#eff6ff;--hera-colour-identity-5-edge:#3b82f6;--hera-colour-identity-5-ink:#1e40af;--hera-colour-identity-6-bg:#fdf4ff;--hera-colour-identity-6-edge:#d946ef;--hera-colour-identity-6-ink:#86198f;--hera-colour-interaction-hover-surface:#ECF0FF;--hera-colour-interaction-selected-surface:#E4E9FF;--hera-colour-interaction-selected-foreground:#3730A3;--hera-colour-interaction-selected-border:#C7D2FE;--hera-colour-interaction-selected-hover-surface:#DCE3FF;--hera-colour-interaction-pressed-surface:#D4DCFB;--hera-colour-interaction-disabled-surface:#EDEFF7;--hera-colour-interaction-disabled-foreground:#6B7194;--hera-colour-gradient-surface-from:#FFFFFF;--hera-colour-gradient-surface-to:#EFF3FD;--hera-colour-gradient-accent-from:#5B54E8;--hera-colour-gradient-accent-to:#4338CA;--hera-colour-shimmer-base:#CFD9EF;--hera-colour-shimmer-sheen:#FFFFFF;--hera-colour-warning-edge:#F59E0B;--hera-colour-danger-edge:#F87171;--hera-colour-scrim:rgba(20, 24, 40, 0.28);--hera-colour-glass-surface:rgba(255, 255, 255, 0.72);--hera-colour-glass-edge:rgba(255, 255, 255, 0.55);--hera-colour-accent-ink:#312E81;--hera-colour-border-subtle:#EBEEF8;--hera-colour-brand-slate:#1B1C2E;--hera-typography-family-sans:var(--hera-font-inter), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;--hera-typography-family-numeric:tabular-nums;--hera-typography-size-display:2rem;--hera-typography-size-heading:1.375rem;--hera-typography-size-body:1rem;--hera-typography-size-small:0.875rem;--hera-typography-size-label:0.75rem;--hera-typography-weight-regular:400;--hera-typography-weight-medium:500;--hera-typography-weight-semibold:600;--hera-typography-weight-bold:700;--hera-typography-label-transform:uppercase;--hera-typography-label-tracking:0.08em;--hera-typography-leading-display:1.15;--hera-typography-leading-heading:1.25;--hera-typography-leading-body:1.55;--hera-typography-leading-small:1.5;--hera-typography-leading-label:1.4;--hera-typography-tracking-display:-0.025em;--hera-typography-tracking-heading:-0.018em;--hera-typography-tracking-body:-0.006em;--hera-typography-tracking-small:0;--hera-typography-size-hero:2.75rem;--hera-typography-leading-hero:1.05;--hera-typography-tracking-hero:-0.03em;--hera-spacing-unit:0.25rem;--hera-spacing-gutter:1.5rem;--hera-spacing-section:2rem;--hera-spacing-card-padding:1.5rem;--hera-spacing-measure-prose:42rem;--hera-spacing-measure-content:72rem;--hera-spacing-measure-wide:96rem;--hera-radius-sm:0.375rem;--hera-radius-md:0.5rem;--hera-radius-lg:0.75rem;--hera-radius-xl:1rem;--hera-radius-pill:9999px;--hera-radius-2xl:1.25rem;--hera-shadow-none:none;--hera-shadow-card:0 1px 2px rgba(49, 46, 129, 0.06), 0 2px 6px -2px rgba(49, 46, 129, 0.10);--hera-shadow-raised:0 2px 4px rgba(49, 46, 129, 0.07), 0 8px 20px -6px rgba(49, 46, 129, 0.16);--hera-shadow-overlay:0 4px 10px rgba(49, 46, 129, 0.10), 0 24px 48px -12px rgba(49, 46, 129, 0.28);--hera-shadow-focus:0 0 0 3px rgba(199, 210, 254, 0.9);--hera-shadow-accent:0 1px 2px rgba(79, 70, 229, 0.20), 0 10px 24px -6px rgba(79, 70, 229, 0.38);--hera-shadow-accent-hover:0 2px 4px rgba(79, 70, 229, 0.24), 0 16px 32px -8px rgba(79, 70, 229, 0.46);--hera-density-default:comfortable;--hera-density-row-height:2.5rem;--hera-density-control-height:2.25rem;--hera-effect-blur-glass:12px;--hera-effect-blur-scrim:2px;--hera-motion-duration-fast:120ms;--hera-motion-duration-base:200ms;--hera-motion-easing:cubic-bezier(0.4, 0, 0.2, 1);--hera-motion-respects-reduced-motion:true;--hera-motion-duration-overlay:200ms;--hera-motion-duration-dialog:220ms;--hera-motion-duration-layout-max:250ms;--hera-motion-easing-entrance:cubic-bezier(0.16, 1, 0.3, 1);--hera-motion-duration-entrance:320ms;--hera-motion-delay-placeholder:150ms}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:300 400;font-display:swap;src:url(/fonts/newsreader-latin-normal.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/newsreader-latin-italic.woff2) format('woff2')}

h1,.hera-type-display{font-size:var(--hera-typography-size-display);line-height:var(--hera-typography-leading-display);letter-spacing:var(--hera-typography-tracking-display);font-weight:var(--hera-typography-weight-bold)}
h2,h3,.hera-type-heading{font-size:var(--hera-typography-size-heading);line-height:var(--hera-typography-leading-heading);letter-spacing:var(--hera-typography-tracking-heading);font-weight:var(--hera-typography-weight-semibold)}
.hera-type-hero{font-size:var(--hera-typography-size-hero);line-height:var(--hera-typography-leading-hero);letter-spacing:var(--hera-typography-tracking-hero);font-weight:var(--hera-typography-weight-bold)}
.hera-type-editorial{font-size:clamp(var(--hera-typography-size-hero),5.6vw,5rem);line-height:var(--hera-typography-leading-hero);letter-spacing:var(--hera-typography-tracking-hero);font-weight:var(--hera-typography-weight-bold)}
@media (max-height:820px) and (min-width:768px){.hera-type-editorial{font-size:clamp(var(--hera-typography-size-hero),4.4vw,3.75rem)}}
.hera-type-small{font-size:var(--hera-typography-size-small)}
.hera-type-label{font-size:var(--hera-typography-size-label);letter-spacing:var(--hera-typography-label-tracking);text-transform:var(--hera-typography-label-transform);font-weight:var(--hera-typography-weight-semibold)}
.hera-surface{background:var(--hera-colour-surface);border:1px solid var(--hera-colour-border);box-shadow:var(--hera-shadow-card)}
.hera-surface-raised{background:linear-gradient(158deg,var(--hera-colour-gradient-surface-from) 0%,var(--hera-colour-gradient-surface-to) 100%);border:1px solid var(--hera-colour-border);box-shadow:var(--hera-shadow-raised)}
.hera-band-slate{background:var(--hera-colour-brand-slate);color:var(--hera-colour-text-inverse)}
.hera-band-slate .hera-type-label{color:var(--hera-colour-accent-border)}
.hera-glass{background:var(--hera-colour-glass-surface);-webkit-backdrop-filter:blur(var(--hera-effect-blur-glass)) saturate(160%);backdrop-filter:blur(var(--hera-effect-blur-glass)) saturate(160%);border-bottom:1px solid var(--hera-colour-glass-edge)}
@supports not (backdrop-filter:blur(1px)){.hera-glass{background:var(--hera-colour-surface)}}
.hera-lift-accent{box-shadow:var(--hera-shadow-accent);transition:box-shadow var(--hera-motion-duration-base) var(--hera-motion-easing),transform var(--hera-motion-duration-base) var(--hera-motion-easing)}
.hera-lift-accent:hover{box-shadow:var(--hera-shadow-accent-hover);transform:translateY(-1px)}
.hera-tab{position:relative;display:inline-flex;align-items:center;padding:0.5rem 0.75rem;font-weight:500;color:var(--hera-colour-text-muted);background:transparent;border:0;text-decoration:none;box-shadow:inset 0 -2px 0 0 transparent;transition:color var(--hera-motion-duration-fast) var(--hera-motion-easing),box-shadow var(--hera-motion-duration-fast) var(--hera-motion-easing)}
.hera-tab:hover{color:var(--hera-colour-text-primary)}
.hera-tab:active:not([aria-current="page"]){color:var(--hera-colour-text-primary);box-shadow:inset 0 -2px 0 0 var(--hera-colour-border-strong);transition-duration:0s}
.hera-tab[aria-current="page"]{color:var(--hera-colour-text-primary);font-weight:600;box-shadow:inset 0 -2px 0 0 var(--hera-colour-accent)}
:focus-visible{outline:2px solid var(--hera-colour-focus-ring);outline-offset:2px}

.act[data-variant="primary"]{background:var(--hera-colour-accent);color:var(--hera-colour-text-inverse);border-color:var(--hera-colour-accent);transition-duration:var(--hera-motion-duration-fast);cursor:pointer}
@media (hover:hover){.act[data-variant="primary"]:hover{background:var(--hera-colour-accent-hover);color:var(--hera-colour-text-inverse);border-color:var(--hera-colour-accent);transition-duration:var(--hera-motion-duration-fast);cursor:pointer}}
.act[data-variant="primary"]:active{background:var(--hera-colour-accent-hover);color:var(--hera-colour-text-inverse);border-color:var(--hera-colour-accent);transition-duration:0s;cursor:pointer}
.act[data-variant="secondary"]{background:var(--hera-colour-surface);color:var(--hera-colour-accent-text);border-color:var(--hera-colour-border);transition-duration:var(--hera-motion-duration-fast);cursor:pointer}
@media (hover:hover){.act[data-variant="secondary"]:hover{background:var(--hera-colour-interaction-hover-surface);color:var(--hera-colour-accent-text);border-color:var(--hera-colour-border-strong);transition-duration:var(--hera-motion-duration-fast);cursor:pointer}}
.act[data-variant="secondary"]:active{background:var(--hera-colour-interaction-pressed-surface);color:var(--hera-colour-accent-text);border-color:var(--hera-colour-border-strong);transition-duration:0s;cursor:pointer}


html{-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
/* ONE family for the page and for every control on it. A form control inherits
   neither family nor size, so the floor states them for both — a SECOND
   font-family declaration is what the oracle refuses, not a wider selector. */
body,input,button,textarea,select{font-family:var(--hera-typography-family-sans)}
body{margin:0;background:var(--hera-colour-canvas);color:var(--hera-colour-text-primary);font-size:var(--hera-typography-size-body);line-height:var(--hera-typography-leading-body);letter-spacing:var(--hera-typography-tracking-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
h1,h2,h3,p{margin:0;overflow-wrap:break-word}
a{color:var(--hera-colour-accent-text)}
.wrap{max-width:var(--hera-spacing-measure-wide);margin-inline:auto;padding-inline:var(--hera-spacing-gutter)}
@media (min-width:640px){.wrap{padding-inline:calc(var(--hera-spacing-unit)*8)}}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:var(--hera-spacing-gutter);top:calc(var(--hera-spacing-unit)*2);z-index:10;background:var(--hera-colour-surface);padding:calc(var(--hera-spacing-unit)*2) calc(var(--hera-spacing-unit)*3);border-radius:var(--hera-radius-md)}

.site-header{position:sticky;top:0;z-index:5}
.bar-row{display:flex;align-items:center;gap:calc(var(--hera-spacing-unit)*4);min-height:64px}
.mark{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.mark img{display:block;height:28px;width:auto}
.tabs{display:flex;align-items:stretch;gap:0.125rem;align-self:stretch}
.bar-acts{margin-left:auto;display:flex;align-items:center;gap:calc(var(--hera-spacing-unit)*2)}
.site-menu{display:none;margin-left:auto}
.site-menu summary{display:flex;align-items:center;min-height:44px;padding-inline:calc(var(--hera-spacing-unit)*3);cursor:pointer;color:var(--hera-colour-text-secondary);font-weight:var(--hera-typography-weight-medium);list-style:none}
.site-menu summary::-webkit-details-marker{display:none}
.site-menu[open] .menu-panel{position:absolute;left:0;right:0;top:64px;display:flex;flex-direction:column;padding:calc(var(--hera-spacing-unit)*2) var(--hera-spacing-gutter) calc(var(--hera-spacing-unit)*4)}
.menu-panel{display:none}
.menu-panel .hera-tab{min-height:44px;width:100%}
@media (max-width:899px){.tabs,.bar-acts .act[data-variant="secondary"]{display:none}.site-menu{display:block}.bar-acts{margin-left:0}}

.act{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--hera-spacing-unit)*2);min-height:44px;padding-inline:calc(var(--hera-spacing-unit)*3);border:1px solid;border-radius:var(--hera-radius-md);font-size:var(--hera-typography-size-small);font-weight:var(--hera-typography-weight-medium);text-decoration:none;white-space:nowrap;transition-property:background-color,border-color,color,box-shadow,transform;transition-timing-function:var(--hera-motion-easing)}
.act[data-size="lg"]{min-height:calc(var(--hera-spacing-unit)*12);padding-inline:calc(var(--hera-spacing-unit)*5);border-radius:var(--hera-radius-lg);font-size:var(--hera-typography-size-body)}

.band{padding-block:3.5rem}
@media (min-width:640px){.band{padding-block:6rem}}
@media (min-width:1024px){.band{padding-block:7rem}}
.band-tight{padding-block:2.5rem}
@media (min-width:640px){.band-tight{padding-block:4rem}}
.band-surface{background:var(--hera-colour-surface);border-block:1px solid var(--hera-colour-border-subtle)}
.hero{padding-block:4rem 3.5rem}
@media (min-width:640px){.hero{padding-block:7rem 5rem}}
.hero .hera-type-label{color:var(--hera-colour-accent-text)}
.hero h1{margin-top:calc(var(--hera-spacing-unit)*4);max-width:18ch}
.subtitle{margin-top:calc(var(--hera-spacing-unit)*5);max-width:var(--hera-spacing-measure-prose);font-size:var(--hera-typography-size-heading);line-height:var(--hera-typography-leading-heading);color:var(--hera-colour-text-secondary)}
.subtitle + .subtitle{margin-top:calc(var(--hera-spacing-unit)*3)}
.acts{display:flex;flex-wrap:wrap;gap:calc(var(--hera-spacing-unit)*3);margin-top:calc(var(--hera-spacing-unit)*8)}
.stages{display:flex;flex-wrap:wrap;gap:calc(var(--hera-spacing-unit)*8);list-style:none;margin:calc(var(--hera-spacing-unit)*12) 0 0;padding:0;color:var(--hera-colour-accent-text)}

.section-head{max-width:var(--hera-spacing-measure-prose)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:calc(var(--hera-spacing-unit)*4);margin:calc(var(--hera-spacing-unit)*8) 0 0;padding:0;list-style:none}
.grid>*{min-width:0}
.card{border-radius:var(--hera-radius-lg);padding:calc(var(--hera-spacing-unit)*6)}
.card-h{font-size:var(--hera-typography-size-heading);line-height:var(--hera-typography-leading-heading);letter-spacing:var(--hera-typography-tracking-heading);font-weight:var(--hera-typography-weight-semibold)}
.card p{margin-top:calc(var(--hera-spacing-unit)*3);color:var(--hera-colour-text-secondary)}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(var(--hera-spacing-unit)*3)}
.marker{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--hera-radius-md);background:var(--hera-colour-accent-subtle);color:var(--hera-colour-accent-ink);margin-bottom:calc(var(--hera-spacing-unit)*4)}
.status{flex:none;display:inline-flex;align-items:center;min-height:1.75rem;padding-inline:calc(var(--hera-spacing-unit)*2.5);border-radius:var(--hera-radius-pill);font-size:var(--hera-typography-size-label);font-weight:var(--hera-typography-weight-semibold);border:1px solid var(--hera-colour-border);color:var(--hera-colour-text-secondary);background:var(--hera-colour-surface-sunken)}
.status[data-status="available"],.status[data-status="in-production"]{border-color:var(--hera-colour-accent-border);color:var(--hera-colour-accent-ink);background:var(--hera-colour-accent-subtle)}
.panel{border-radius:var(--hera-radius-xl);padding:calc(var(--hera-spacing-unit)*8);max-width:var(--hera-spacing-measure-prose);margin-top:calc(var(--hera-spacing-unit)*8)}
.panel p{color:var(--hera-colour-text-secondary);margin-top:calc(var(--hera-spacing-unit)*3)}
.panel .acts{margin-top:calc(var(--hera-spacing-unit)*6)}
.prose{max-width:var(--hera-spacing-measure-prose)}
.prose h2{margin-top:calc(var(--hera-spacing-unit)*10)}
.prose p{margin-top:calc(var(--hera-spacing-unit)*3);color:var(--hera-colour-text-secondary)}

.close-band h2{margin-top:calc(var(--hera-spacing-unit)*3);max-width:20ch}
.close-band p{margin-top:calc(var(--hera-spacing-unit)*4);max-width:var(--hera-spacing-measure-prose);color:var(--hera-colour-text-inverse)}

.foot{background:var(--hera-colour-surface);border-top:1px solid var(--hera-colour-border)}
.foot-row{display:flex;flex-wrap:wrap;gap:calc(var(--hera-spacing-unit)*6);justify-content:space-between;align-items:flex-start;padding-block:calc(var(--hera-spacing-unit)*10)}
.foot-mark{color:var(--hera-colour-text-primary);display:inline-flex}
.foot-mark svg{height:24px;width:auto}
.foot-tagline{margin-top:calc(var(--hera-spacing-unit)*3);font-size:var(--hera-typography-size-small);font-style:italic;color:var(--hera-colour-text-primary)}
.foot p{margin-top:calc(var(--hera-spacing-unit)*3);color:var(--hera-colour-text-secondary)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 calc(var(--hera-spacing-unit)*5)}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--hera-colour-text-secondary);text-decoration:none}
.foot nav a:hover{color:var(--hera-colour-text-primary)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.hera-lift-accent:hover{transform:none}}
@media print{.site-header,.site-menu,.close-band,.skip{display:none!important}html,body{background:var(--hera-colour-surface)!important;color:var(--hera-colour-text-primary)!important}.hera-band-slate,.hera-surface,.hera-surface-raised,.hera-glass,.band-surface{background:none!important;box-shadow:none!important;color:inherit!important}h2,h3{break-after:avoid}section,article,li{break-inside:avoid}}


/* ── ONE THOUGHT PER SCREEN ────────────────────────────────────────────────
   Not a viewport-height trick: a 100vh moment is a phone with a cropped sentence
   and a laptop with a hole in it. What makes a moment read alone is whitespace
   above and below it and a measure narrow enough that the eye has nowhere else to
   go. So each moment is generous padding plus a short line. */
.moment{padding-block:calc(var(--hera-spacing-unit)*14)}
@media (min-width:640px){.moment{padding-block:calc(var(--hera-spacing-unit)*22)}}
@media (min-width:1024px){.moment{padding-block:calc(var(--hera-spacing-unit)*34)}}
.moment-label{color:var(--hera-colour-accent-text)}
.hera-band-slate .moment-label{color:var(--hera-colour-accent-border)}

/* THE STATEMENT. The estate's scale stops at a heading because the product has no
   reason to shout; this page has one. Weight goes DOWN as size goes up — at
   4.5rem, semibold is a headline and bold is a shout — and tracking comes in, or
   large text reads loose. The measure is stated in characters, not pixels: a
   statement stops being one thought at about 24 characters a line. */
/* WEIGHT GOES DOWN AS SIZE GOES UP. At 32px, semibold is emphasis; at 72px it is
   mass, and mass is exactly what makes large type read as "a big website heading"
   rather than as display. 400 is the lightest weight this estate vendors — there is
   no 300 — and it is the ruling for anything above about 3.5rem.
   TRACKING AND LEADING ARE DERIVED, NOT WRITTEN. The ramp has one display tracking
   and one display leading; both are right at 44px and both are loose at 72px. A
   literal here would leave the ramp behind, so they are scaled off the token and a
   theme change still reaches them. */
.statement{font-family:var(--hera-public-family-display);
  font-size:clamp(2rem,5.6vw,4.5rem);
  line-height:calc(var(--hera-typography-leading-hero)*0.95);
  letter-spacing:calc(var(--hera-typography-tracking-hero)*1.15);
  font-weight:var(--hera-public-weight-display);max-width:24ch;text-wrap:balance}
.statement-second{margin-top:calc(var(--hera-spacing-unit)*3)}
.opening{font-family:var(--hera-public-family-display);font-weight:var(--hera-typography-weight-regular);
  font-size:clamp(1.375rem,3vw,2.125rem);line-height:1.25;
  letter-spacing:calc(var(--hera-typography-tracking-hero)*0.6);
  color:var(--hera-colour-text-secondary);max-width:26ch}
/* ── THE FIVE WANTS ────────────────────────────────────────────────────────
   The frozen direction carried these in a cross-fading sequence with dots and a
   play control. The MECHANISM is not built — it needs a script this site does not
   ship, and five photographs that do not exist; in the artboard each scene is a
   solid tone panel captioned with the photograph that should be there. The CONTENT
   is built, and shown all at once: a sequence hides four of five statements behind
   time, and the range is the whole point. Five lines a reader takes in at a glance
   say it faster than five screens they have to wait for. */
.wants{list-style:none;margin:calc(var(--hera-spacing-unit)*10) 0 0;padding:0;
  display:grid;gap:calc(var(--hera-spacing-unit)*3)}
.wants li{font-family:var(--hera-public-family-display);font-weight:var(--hera-public-weight-display);
  font-size:clamp(1.5rem,3.4vw,2.75rem);line-height:1.15;
  letter-spacing:calc(var(--hera-typography-tracking-hero)*0.9);
  color:var(--hera-colour-text-primary);max-width:30ch;text-wrap:balance}
@media (min-width:900px){.wants{gap:calc(var(--hera-spacing-unit)*4)}}
.wants+.moment-label{margin-top:calc(var(--hera-spacing-unit)*16)}
.opening+.moment-label{margin-top:calc(var(--hera-spacing-unit)*14)}
.moment-label+.statement{margin-top:calc(var(--hera-spacing-unit)*4)}
.moment-body{margin-top:calc(var(--hera-spacing-unit)*7);max-width:42ch;
  font-size:clamp(1.0625rem,1.7vw,1.3125rem);line-height:1.5;color:var(--hera-colour-text-secondary)}
.moment-body-wide{max-width:54ch}
.hera-band-slate .moment-body,.hera-band-slate .motto{color:var(--hera-colour-text-inverse);opacity:0.8}
.motto{margin-top:calc(var(--hera-spacing-unit)*5);font-family:var(--hera-public-family-display);
  font-style:italic;font-weight:var(--hera-public-weight-display);
  font-size:clamp(1.375rem,2.6vw,1.875rem);line-height:1.3}
.beliefs{display:grid;gap:calc(var(--hera-spacing-unit)*16)}
@media (min-width:1024px){.beliefs{gap:calc(var(--hera-spacing-unit)*28)}}

/* ── THE HERO ──────────────────────────────────────────────────────────────
   The question, and the field that answers it. The photograph is the ground and
   never runs under the words: on a phone it is a block of its own beneath them,
   and from 900px it starts at the column edge and fades LEFT into the canvas, so
   the faces keep the light and the sentence keeps the page. Inherited, not
   redrawn — this arrangement was measured and repaired on 2026-09-20 after it
   passed every gate and rendered as an empty screen. */
.home-hero{position:relative;isolation:isolate;overflow:clip;margin-top:-4rem;padding-block:calc(var(--hera-spacing-unit)*24) calc(var(--hera-spacing-unit)*16)}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 42%}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,var(--hera-colour-canvas) 0%,transparent 26%),
  linear-gradient(0deg,var(--hera-colour-canvas) 12%,transparent 58%)}
/* INHERITED DEFECT, REPAIRED AND KEPT REPAIRED — measured at 375px on 2026-09-27.
   .home-hero is a flex container below 900px, so this is a FLEX ITEM, and a flex
   item's default min-width of auto refuses to shrink below its min-content width,
   which a bare <input> floors at about 236px. The hero measured 431px inside a
   375px phone and the page scrolled sideways by 56px. A browser found this; no
   gate did. */
.hero-inner{position:relative;min-width:0;max-width:100%}
.hero-words-top{max-width:34rem}
.home-hero h1{font-family:var(--hera-public-family-display);
  font-size:clamp(2.5rem,7.2vw,3.5rem);
  line-height:calc(var(--hera-typography-leading-hero)*0.95);
  letter-spacing:calc(var(--hera-typography-tracking-hero)*1.15);
  font-weight:var(--hera-public-weight-display);text-wrap:balance}
.hero-lede{margin-top:calc(var(--hera-spacing-unit)*5);max-width:27rem;font-size:var(--hera-typography-size-heading);line-height:var(--hera-typography-leading-heading);color:var(--hera-colour-text-secondary)}

/* BELOW 900 THE PHOTOGRAPH STOPS BEING A BED FOR THE WORDS. Measured 2026-09-20:
   the desktop treatment needs a wide hero; on a phone the hero is short, both
   fades overlap and the picture disappears, and at 768 the headline lands straight
   across a face. Stacking is not a fallback at that width — it is the only honest
   arrangement. Every property this block sets, the wide block answers. */
.home-hero{display:flex;flex-direction:column-reverse;margin-top:0;padding-block:calc(var(--hera-spacing-unit)*10) 0;overflow:visible}
.hero-media{position:relative;inset:auto;z-index:0;width:100%;aspect-ratio:16/11;overflow:clip;margin-top:calc(var(--hera-spacing-unit)*10)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;left:auto;right:auto;object-position:58% 40%}
.hero-veil{display:none}

/* ── THE ASK ───────────────────────────────────────────────────────────────
   The primary experience of the page, so it is the widest, quietest thing in the
   hero and the only control in it. The field is a surface rather than a box drawn
   with a border: it sits on the same glass the rest of the site sits on, so it
   belongs to the page rather than being pasted onto the photograph. */
.ask-form{margin-top:calc(var(--hera-spacing-unit)*7)}
.ask-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ask-row{display:flex;align-items:center;gap:calc(var(--hera-spacing-unit)*2);
  padding:calc(var(--hera-spacing-unit)*2);
  background:var(--hera-colour-surface);border:1px solid var(--hera-colour-border);
  border-radius:var(--hera-radius-xl);box-shadow:var(--hera-shadow-card);
  transition:box-shadow var(--hera-motion-duration-base) var(--hera-motion-easing),border-color var(--hera-motion-duration-base) var(--hera-motion-easing)}
.ask-row:focus-within{border-color:var(--hera-colour-accent-border);box-shadow:var(--hera-shadow-raised)}
.ask-mark{display:flex;padding-inline-start:calc(var(--hera-spacing-unit)*2);color:var(--hera-colour-text-muted)}
/* The sentence a visitor types appears in the same voice the question was asked in.
   It reverts to the interface face below 560, where the field drops to body size and a
   text serif at 16px in a control is neither readable nor honest about being a control. */
.ask-field{flex:1 1 auto;min-width:0;border:0;background:transparent;
  font-family:var(--hera-public-family-display);
  font-size:var(--hera-typography-size-heading);
  color:var(--hera-colour-text-primary);padding-block:calc(var(--hera-spacing-unit)*2)}
.ask-field::placeholder{color:var(--hera-colour-text-muted)}
.ask-field:focus{outline:none}
.ask-row .act{flex:0 0 auto}
/* MEASURED at 375px, and found twice — once by the type ruling and once by a witness
   reading the rendered page: with the act beside it the field holds 182px, the
   placeholder needs about 210px, and a visitor reads "I paid 40 for a tax". The
   sentence in the field is the sentence the demonstration resolves, so clipping it
   breaks the one thing that pre-explains the control. Below 560 the act takes its own
   line and the field takes the width. The field never drops below body size, which is
   what stops a phone zooming on focus. */
@media (max-width:560px){
  .ask-row{flex-wrap:wrap}
  /* 60%, not 100%: a 100% basis pushes the field onto its own line and leaves the
     magnifier stranded on a line by itself. The mark and the field stay together —
     they are one control — and only the act takes the new line. */
  .ask-field{flex:1 1 60%;font-size:var(--hera-typography-size-body);font-family:var(--hera-typography-family-sans)}
  .ask-row .act{flex:1 1 100%}
}

/* The entrances are OPTIONS leading to the act, so they are tinted and never
   filled — a filled option competes with the act it exists to lead to. */
.entrances{display:flex;flex-wrap:wrap;gap:calc(var(--hera-spacing-unit)*2);margin-top:calc(var(--hera-spacing-unit)*4)}
.entrance{display:inline-flex;align-items:center;gap:calc(var(--hera-spacing-unit)*1);
  min-height:44px;padding:calc(var(--hera-spacing-unit)*2) calc(var(--hera-spacing-unit)*4);
  border-radius:var(--hera-radius-pill);border:1px solid var(--hera-colour-accent-border);
  background:var(--hera-colour-accent-subtle);color:var(--hera-colour-accent-text);
  font-size:var(--hera-typography-size-small);text-decoration:none;
  transition:background var(--hera-motion-duration-fast) var(--hera-motion-easing)}
.entrance:hover{background:var(--hera-colour-surface-sunken)}
.ask-examples{list-style:none;margin-top:calc(var(--hera-spacing-unit)*6);padding:0;display:grid;gap:calc(var(--hera-spacing-unit)*1);
  font-size:var(--hera-typography-size-small);color:var(--hera-colour-text-muted);font-style:italic}

/* ── THE DEMONSTRATION ─────────────────────────────────────────────────────
   One object, four rows, hairlines between them: label on the left, consequence on
   the right, the way a document reads. Four cards would have stated four equal
   things and lost the sequence, which is the whole content of this moment. */
.demo{margin-top:calc(var(--hera-spacing-unit)*10);border:1px solid var(--hera-colour-border);
  border-radius:var(--hera-radius-lg);background:var(--hera-colour-canvas);overflow:clip}
.demo-row{display:grid;gap:calc(var(--hera-spacing-unit)*3);padding:calc(var(--hera-spacing-unit)*6);
  border-top:1px solid var(--hera-colour-border)}
.demo-row:first-child{border-top:0}
/* 760, not the floor's 560: the label column is 13rem, and a 560px screen would leave
   the consequence 8rem of measure. The label goes above its row until there is room
   for both. Every other width on this page is 560, 900 or 1280. */
@media (min-width:760px){.demo-row{grid-template-columns:13rem minmax(0,1fr);gap:calc(var(--hera-spacing-unit)*8);
  padding:calc(var(--hera-spacing-unit)*7) calc(var(--hera-spacing-unit)*9)}}
.demo-label{color:var(--hera-colour-text-muted);padding-top:0.35em}
.demo-said{font-family:var(--hera-public-family-display);font-weight:var(--hera-typography-weight-regular);
  font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.2;
  letter-spacing:calc(var(--hera-typography-tracking-hero)*0.5)}
.demo-truth,.demo-next-body{font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.5;color:var(--hera-colour-text-secondary);max-width:58ch}
.demo-next{font-family:var(--hera-public-family-display);font-weight:var(--hera-typography-weight-regular);
  font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.25}
.demo-next+.demo-next-body{margin-top:calc(var(--hera-spacing-unit)*2)}
.demo-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:calc(var(--hera-spacing-unit)*2)}
.demo-chips li{display:inline-flex;align-items:center;min-height:2.25rem;padding-inline:calc(var(--hera-spacing-unit)*4);
  border:1px solid var(--hera-colour-border-strong);border-radius:var(--hera-radius-pill);
  font-size:var(--hera-typography-size-small);color:var(--hera-colour-text-primary)}

/* ── THE TWO ADMISSIONS ────────────────────────────────────────────────────
   What is already real, and what is not yet. They sit side by side deliberately:
   either one alone is a sales sentence, and the pair is the page's argument. */
.admissions{display:grid;gap:calc(var(--hera-spacing-unit)*10);margin-top:calc(var(--hera-spacing-unit)*16)}
@media (min-width:900px){.admissions{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--hera-spacing-unit)*14)}}
.admission{padding-top:calc(var(--hera-spacing-unit)*5);border-top:2px solid var(--hera-colour-text-primary)}
/* 1.375rem is the floor deliberately: Newsreader is a TEXT serif with an optical-size
   axis and it is wrong under about 22px, so the display voice stops here rather than
   following the page down to label sizes. */
.admission h3{font-family:var(--hera-public-family-display);font-weight:var(--hera-typography-weight-regular);
  font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.25;
  letter-spacing:calc(var(--hera-typography-tracking-hero)*0.5)}
.admission p{margin-top:calc(var(--hera-spacing-unit)*4);color:var(--hera-colour-text-secondary)}

/* ── HOW HERA WORKS ────────────────────────────────────────────────────────
   A numbered list on hairlines. The order is the content. */
.steps{list-style:none;margin:calc(var(--hera-spacing-unit)*14) 0 0;padding:0;border-top:1px solid var(--hera-colour-border)}
.step{display:grid;gap:calc(var(--hera-spacing-unit)*2);padding-block:calc(var(--hera-spacing-unit)*6);border-bottom:1px solid var(--hera-colour-border)}
@media (min-width:760px){.step{grid-template-columns:3rem minmax(0,19rem) minmax(0,1fr);
  gap:calc(var(--hera-spacing-unit)*6);align-items:baseline;padding-block:calc(var(--hera-spacing-unit)*7)}}
.step-n{color:var(--hera-colour-text-muted);font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(1.1875rem,2vw,1.4375rem);line-height:1.3;letter-spacing:-0.015em;font-weight:var(--hera-typography-weight-semibold)}
.step p{color:var(--hera-colour-text-secondary)}

/* ── WHOSE PROGRESS THIS IS ────────────────────────────────────────────────
   The most consequential paragraph on the page and the least decorated thing on
   it: one column, prose measure, no card and no figure. */
.money{margin-top:calc(var(--hera-spacing-unit)*16);padding-top:calc(var(--hera-spacing-unit)*10);border-top:1px solid var(--hera-colour-glass-edge);max-width:var(--hera-spacing-measure-prose)}
.money-body{margin-top:calc(var(--hera-spacing-unit)*5);font-size:clamp(1.0625rem,1.7vw,1.3125rem);line-height:1.5;color:var(--hera-colour-text-inverse);opacity:0.8}
.money-closing{position:relative;display:inline-block;margin-top:calc(var(--hera-spacing-unit)*6);
  font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.3;color:var(--hera-colour-text-inverse)}
.money-closing .note-rule{position:absolute;left:0;right:0;bottom:calc(var(--hera-spacing-unit)*-3);width:100%;height:7px;color:var(--hera-colour-accent-border);opacity:0.6}
.money-quiet{margin-top:calc(var(--hera-spacing-unit)*10);font-size:var(--hera-typography-size-small);color:var(--hera-colour-text-inverse);opacity:0.7}
.money-quiet a{color:var(--hera-colour-accent-border)}

/* The two sides of HERA, STATED and linked — never offered as a choice of side.
   Owner ruling R1, 2026-09-27: a stranger is not classified before their intent
   gives HERA reason to. */
.family{margin-top:calc(var(--hera-spacing-unit)*14);padding-top:calc(var(--hera-spacing-unit)*6);
  border-top:1px solid var(--hera-colour-border);max-width:46ch}
.family-lead{font-size:var(--hera-typography-size-small);color:var(--hera-colour-text-muted)}
.siblings{list-style:none;margin:calc(var(--hera-spacing-unit)*3) 0 0;padding:0;display:grid;gap:calc(var(--hera-spacing-unit)*1)}
.siblings li{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--hera-spacing-unit)*3);
  font-size:var(--hera-typography-size-small);color:var(--hera-colour-text-muted)}
.siblings a{min-width:6.5rem;font-weight:var(--hera-typography-weight-medium);text-decoration:none}
.siblings a:hover{text-decoration:underline}
.side-vertical{display:inline-flex;align-items:center;min-height:2.75rem}

/* ── BEGIN ─────────────────────────────────────────────────────────────────
   The page ends where it began, and this time the question is the field's own
   label — the same sentence, out loud, for the eye and for a screen reader. */
.moment-begin .ask-form{margin-top:calc(var(--hera-spacing-unit)*10);max-width:46rem}
.ask-question{display:block;max-width:22ch}
.begin-note{margin-top:calc(var(--hera-spacing-unit)*6);font-size:var(--hera-typography-size-small);color:var(--hera-colour-text-muted)}

@media (min-width:900px){
  .home-hero{overflow:clip;margin-top:-4rem}
  .hero-media{position:absolute;inset:0;z-index:-1;aspect-ratio:auto;margin-top:0;width:auto;height:auto}
  .hero-veil{display:block;background:
    linear-gradient(90deg,var(--hera-colour-canvas) 0%,var(--hera-colour-canvas) 38%,transparent 68%),
    linear-gradient(180deg,var(--hera-colour-canvas) 0%,transparent 14%),
    linear-gradient(0deg,var(--hera-colour-canvas) 0%,transparent 42%)}
  .hero-inner{width:100%}
  .home-hero{display:grid;align-items:center;min-height:41rem;padding-block:calc(var(--hera-spacing-unit)*22) calc(var(--hera-spacing-unit)*14)}
  .hero-media img{left:30%;width:auto;right:0;object-position:56% 44%}
  /* 80px is the ceiling, and it is a MEASURED one rather than a taste: the artboard
     sets this line at 144px, but the artboard's hero carries no field. Ours does, and
     the field has to stay visible at 1440x900. 5rem is the largest this line goes
     without pushing the one control the page exists for below the fold. */
  .home-hero h1{font-size:clamp(3rem,5.6vw,5rem)}
  .ask-row{padding:calc(var(--hera-spacing-unit)*2) calc(var(--hera-spacing-unit)*3)}
}
@media (min-width:1280px){.hero-words-top{max-width:38rem}.hero-media img{left:34%}}

/* PRINT. The floor resets .hera-band-slate to inherit, but a CHILD that states its
   own inverse ink is not reached by an ancestor's inherit — so the two slate moments
   printed white on white. Every inverse ink on this page is listed here by name.
   The Ask prints as its label rather than as an empty box: a printed input is a
   mystery rectangle, and the visually-hidden label is the sentence it was asking for. */
@media print{
  .hero-media,.note-rule{display:none!important}
  .demo,.ask-row{background:none!important;box-shadow:none!important}
  .statement{font-size:2rem}
  .hera-band-slate .moment-body,.hera-band-slate .motto,.money-body,.money-closing,.money-quiet,.money-quiet a{color:var(--hera-colour-text-primary)!important;opacity:1!important}
  .ask-row{display:none}
  .ask-label{position:static;width:auto;height:auto;margin:0;clip-path:none;white-space:normal}
}