/* Qframe site - direction B "Model space". Design notes: site/DESIGN.md.
   Phone first; wider layouts are added at 640px and 960px. */

@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800; font-stretch: 75% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url("/static/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 400 800; font-stretch: 75% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-latin.woff2") format("woff2");
  font-weight: 400 600; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/plex-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* Palette - names from the subject (see DESIGN.md) */
  --night: #0b1428;       /* page: the app's model space */
  --ink: #101b33;         /* brand navy: raised areas, text on orange */
  --sheet: #e7ebf0;       /* primary text */
  --mist: #a9b3c1;        /* secondary text, dimension lines (8.5:1 on night) */
  --rule: #26334f;        /* section rules */
  --axis: #3c4a66;        /* grid-axis lines */
  --primer: #c4553a;      /* red-oxide steel members (drawings only) */
  --galvanized: #7f8b9b;  /* secondary steel */
  --signal: #d28115;      /* brand orange: the one filled button ("Try the demo"); "Sign in" outline */
  --signal-hover: #e3922a;
  --todo: #f2d24b;

  --f-draw: "Archivo", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  /* Type scale 1.25 */
  --t-13: .8125rem; --t-16: 1rem; --t-18: 1.125rem; --t-20: 1.25rem; --t-25: 1.5625rem;
  --t-31: 1.9375rem; --t-39: 2.4375rem; --t-49: 3.0625rem; --t-61: 3.8125rem;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--sheet); font: 400 var(--t-16)/1.6 var(--f-body); }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-draw); margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--t-31); font-weight: 780; font-stretch: 104%; line-height: 1.08; }
h2 { font-size: var(--t-25); font-weight: 720; font-stretch: 104%; line-height: 1.15; }
h3 { font-size: var(--t-20); font-weight: 650; font-stretch: 92%; line-height: 1.25; }
p { margin: 0 0 1em; max-width: 68ch; }
.lede { font-size: var(--t-18); color: var(--mist); max-width: 40ch; }
mark.todo { background: var(--todo); color: var(--ink); padding: 0 .2em; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sheet); color: var(--ink); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; }

/* Buttons: square corners, as on a drawing. One loud button per view. */
.btn { display: inline-block; font: 650 var(--t-18)/1 var(--f-draw); font-stretch: 105%; text-decoration: none;
       padding: 17px 24px; text-align: center; border: 0; cursor: pointer; }
.btn--primary { background: var(--signal); color: var(--ink); }
.btn--primary:hover { background: var(--signal-hover); }
.btn--small { padding: 10px 14px; font-size: var(--t-16); }
/* Outline buttons: same size as the filled one (the border is an inset
   shadow, so it adds nothing to the size). Orange = "Sign in" in the nav;
   light = the second choice next to "Try the demo". */
.btn--outline { background: transparent; color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); }
.btn--outline:hover { color: var(--signal-hover); box-shadow: inset 0 0 0 2px var(--signal-hover); background: rgba(210, 129, 21, .1); }
.btn--secondary { background: transparent; color: var(--sheet); box-shadow: inset 0 0 0 2px var(--mist); }
.btn--secondary:hover { box-shadow: inset 0 0 0 2px var(--sheet); background: rgba(231, 235, 240, .06); }
.link-secondary { font-weight: 500; }
.actions { display: flex; flex-direction: column; gap: 16px; align-items: stretch; text-align: center; }

/* Header */
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.logo { display: block; color: var(--sheet); }
.logo svg { height: 26px; width: auto; }
.nav--desktop { display: none; }
.nav--phone summary { list-style: none; cursor: pointer; font-weight: 500; border: 1.5px solid var(--mist); padding: 6px 12px; }
.nav--phone summary::-webkit-details-marker { display: none; }
.nav--phone[open] nav { position: absolute; left: 0; right: 0; top: 60px; z-index: 5; background: var(--ink);
  border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; padding: 8px var(--gutter) 20px; }
.nav--phone nav a:not(.btn) { padding: 12px 0; text-decoration: none; font-size: var(--t-18); border-bottom: 1px solid var(--rule); }
.nav--phone nav .btn { margin-top: 16px; }
.site-header { position: relative; }
[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }

/* Hero */
/* Phones and tablets (below 1024 px): the drawing under the text, full
   width. aspect-ratio keeps its place before frame-model.js has drawn it
   (it then sets the exact ratio), so nothing shifts. */
.hero { position: relative; padding-bottom: 40px; display: flex; flex-direction: column; }
.hero__figure { width: 100%; margin: 32px auto 0; }
.hero__model { width: 100%; height: auto; padding: 0 6px; aspect-ratio: 2.2 / 1; }
.hero__model text { font-family: var(--f-draw); font-stretch: 75%; fill: var(--mist); }
.hero__copy { padding-top: 8px; }
.hero h1 { margin-bottom: 14px; }
.hero__reassure { margin: 14px 0 0; font-size: .9375rem; color: var(--mist); }
.hero__reassure span { white-space: nowrap; }

/* Sections */
.section { border-top: 1px solid var(--rule); padding: 56px 0; }
.section--tight { padding: 32px 0; }
.section h2 { margin-bottom: 24px; }
.page-intro { padding: 32px 0 48px; }
.page-intro h1 { margin-bottom: 16px; max-width: 22ch; }
.page-intro .actions { margin-top: 24px; }
.prose > * { max-width: 760px; }  /* narrow measure, still aligned with the page grid */
.notice { border-left: 3px solid var(--signal); padding: 8px 14px; background: var(--ink); color: var(--sheet); max-width: 60ch; }

/* "Why": a rule under the heading, then three facts - a big orange figure
   (drawing lettering), the claim in white, a grey note - and the sources */
.why__title { max-width: 22ch; }
.facts { list-style: none; margin: 40px 0 0; padding: 32px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 32px; }
.facts__item p { margin: 0; }
.facts__figure { font: 720 var(--t-31)/1.1 var(--f-draw); font-stretch: 104%; color: var(--signal); }
.facts__claim { font-weight: 600; color: var(--sheet); margin-top: 14px !important; max-width: 30ch; }
.facts__note { color: var(--mist); margin-top: 8px !important; max-width: 34ch; }
.facts__sources { font-size: var(--t-13); color: var(--mist); margin: 40px 0 0; max-width: 90ch; }
/* How it works: numbered with grid-axis bubbles, joined by an axis line */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.steps__item { position: relative; padding-left: 56px; }
.steps__item p { color: var(--mist); }
.steps__item h3 { margin: 6px 0 8px; }
.steps__shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 4px 0 20px; border: 1px solid var(--rule); }
.bubble { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--mist);
  display: grid; place-items: center; font: 650 var(--t-18)/1 var(--f-draw); font-stretch: 75%; background: var(--night); }

/* Engine */
/* Live cross-section ("Change one thing, and the whole frame follows"):
   text left, a panel right (controls, drawing, readout), stacked below
   900 px. A lighter band than the page; the panel sits on the page colour. */
.section--geo { background: var(--ink); }
.geo { display: grid; gap: 40px; }
.geo__eyebrow { font: 600 var(--t-13)/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); margin: 0 0 14px; }
.section .geo h2 { margin-bottom: 20px; }
.geo__lead { color: var(--mist); font-size: var(--t-18); max-width: 46ch; }
.geo__points { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.geo__points li { display: flex; gap: 14px; }
.geo__points li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .55em; background: var(--signal); }
.geo-panel { background: var(--night); border: 1px solid var(--axis); }
.geo-controls { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; padding: 18px 16px 16px; border-bottom: 1px solid var(--axis); }
.geo-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.geo-field legend, .geo-label { display: block; padding: 0; margin-bottom: 8px; font-size: var(--t-13); color: var(--mist); }
.geo-value { color: var(--sheet); font-weight: 600; margin-left: 6px; }
.geo-seg { display: grid; border: 1px solid var(--galvanized); }   /* phones: one choice per row */
.geo-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.geo-seg label { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: var(--t-16); color: var(--sheet); cursor: pointer; }
.geo-seg label + input + label { border-top: 1px solid var(--galvanized); }
.geo-seg input:checked + label { background: var(--signal); color: var(--ink); font-weight: 600; }
/* focus ring outside the button, against the dark panel (6:1) - also on the orange selected one */
.geo-seg input:focus-visible + label { outline: 3px solid var(--signal); outline-offset: 2px; position: relative; z-index: 1; }
.geo-step { display: inline-flex; align-items: center; border: 1px solid var(--galvanized); }
.geo-step button { width: 44px; height: 44px; background: transparent; border: 0; color: var(--sheet); font-size: 1.375rem; line-height: 1; cursor: pointer; }
.geo-step button:hover:not(:disabled) { background: var(--ink); }
.geo-step button:disabled { color: #6b7688; cursor: not-allowed; }
.geo-step output { min-width: 36px; text-align: center; font-weight: 600; }
.geo-field input[type=range] { display: block; width: 180px; height: 44px; margin: 0; accent-color: var(--signal); cursor: pointer; }
.geo-reset { min-height: 44px; padding: 0 2px; background: transparent; border: 0; color: var(--sheet); font: inherit; font-size: var(--t-16);
             text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 6px; text-decoration-thickness: 2px; cursor: pointer; }
.geo-reset:hover { color: #fff; }
/* fixed proportions (reserved before the script runs - nothing shifts);
   the script draws into exactly this box, so labels keep their size */
.geo-drawing { aspect-ratio: 3 / 2; padding: 0; }
.geo-drawing svg { display: block; width: 100%; height: 100%; }
:is(.geo-drawing, .geo-drawing-static) text { font-family: var(--f-draw); font-stretch: 85%; fill: var(--sheet); }
:is(.geo-drawing, .geo-drawing-static) .gs-col { stroke: var(--primer); stroke-width: 3.5; }
:is(.geo-drawing, .geo-drawing-static) .gs-chord { stroke: var(--primer); stroke-width: 2; }
:is(.geo-drawing, .geo-drawing-static) .gs-web { stroke: var(--primer); stroke-width: 1; opacity: .85; }
:is(.geo-drawing, .geo-drawing-static) .gs-ground { stroke: var(--galvanized); stroke-width: 1.5; }
:is(.geo-drawing, .geo-drawing-static) .gs-dim, :is(.geo-drawing, .geo-drawing-static) .gs-leader { stroke: var(--mist); stroke-width: 1; }
:is(.geo-drawing, .geo-drawing-static) .gs-axis { stroke: var(--galvanized); stroke-width: 1; stroke-dasharray: 4 4; }
:is(.geo-drawing, .geo-drawing-static) .gs-level { stroke: var(--galvanized); stroke-width: 1; stroke-dasharray: 2 3; }
:is(.geo-drawing, .geo-drawing-static) .gs-mark { fill: var(--mist); }
:is(.geo-drawing, .geo-drawing-static) .gs-bubble { fill: none; stroke: var(--sheet); stroke-width: 1.3; }
.geo-readout { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 12px 16px 16px; border-top: 1px solid var(--axis); color: var(--mist); }
.geo-readout b { color: var(--sheet); font-weight: 600; }
.geo-caption { margin: 14px 0 0; font-size: var(--t-16); color: var(--mist); max-width: 70ch; }
.geo-cta { display: block; margin-top: 20px; }
.geo-note { margin: 10px 0 0; font-size: var(--t-13); color: var(--mist); }
@media (min-width: 560px) {
  .geo-drawing { aspect-ratio: 8 / 3; }
  .geo-seg { display: flex; }
  .geo-seg label + input + label { border-top: 0; border-left: 1px solid var(--galvanized); }
  .geo-cta { display: inline-block; }
}
@media (min-width: 900px) {
  .geo { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
}

/* Audiences */
.audiences { display: grid; gap: 28px; }
.audiences__item { border-top: 1.5px solid var(--axis); padding-top: 16px; }
.audiences__item p { color: var(--mist); margin: 8px 0 0; }
.audiences__item h3 { margin: 0; }
/* one column on phones, two up to 1000 px, four above */
@media (min-width: 561px) { .audiences { grid-template-columns: 1fr 1fr; gap: 36px 48px; } }
@media (min-width: 1001px) { .audiences { grid-template-columns: repeat(4, 1fr); gap: 40px; } }

/* Help us choose what comes next: toggle chips (off: dashed + "+", on:
   solid orange + check mark - never colour alone), then the link to the
   waiting list, inactive until something is picked. */
.section--next { background: var(--ink); }
.next__lead { color: var(--mist); font-size: var(--t-18); max-width: 52ch; margin: 0; }
.chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 10px 18px;
        background: transparent; color: var(--sheet); font: 600 var(--t-16)/1.3 var(--f-body); text-align: left;
        border: 2px dashed var(--galvanized); cursor: pointer; }
/* the "+" / check mark are decoration: screen readers hear "toggle button, pressed / not pressed" */
.chip::before { content: "+"; content: "+" / ""; flex: none; width: 16px; text-align: center; color: var(--mist); }
.chip:hover { border-color: var(--sheet); }
.chip[aria-pressed="true"] { border-style: solid; border-color: var(--signal); background: rgba(210, 129, 21, .14); }
.chip[aria-pressed="true"]::before { content: "\2713"; content: "\2713" / ""; color: var(--signal); }
.next__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.next__cta { display: block; width: 100%; }   /* phones: full width */
@media (min-width: 561px) { .next__cta { display: inline-block; width: auto; } }
.next__cta[aria-disabled="true"] { background: transparent; color: var(--mist); box-shadow: inset 0 0 0 2px var(--axis); cursor: not-allowed; }
.next__status { margin: 0; color: var(--mist); }
.next__plain { margin: 24px 0; padding-left: 1.2em; }
.next__plain li + li { margin-top: 6px; }
.interests { display: grid; gap: 6px; }
.interests legend { font-weight: 600; margin-bottom: 4px; padding: 0; }
.interests .hint { margin: 0 0 4px; }
.interests .check { min-height: 32px; align-items: center; }
.interests .check input { margin: 0; }

/* Closing */
.closing h2 { font-size: var(--t-31); margin-bottom: 12px; }
.closing p { color: var(--mist); }
.closing .actions { margin-top: 24px; }

/* Product features */
.feature__inner { display: grid; gap: 24px; }
.feature__text p { color: var(--mist); }
/* app pictures read as windows: a thin frame on the dark page */
.feature__media { margin: 0; border: 1px solid var(--axis); background: var(--night); }
.feature__media img { display: block; width: 100%; height: auto; }
.feature__media--drawing { border: 0; background: none; }
.geo-figure { display: block; width: 100%; height: auto; }
.feature__media figcaption { margin-top: 10px; font-size: var(--t-13); color: var(--mist); }
@media (min-width: 900px) { .feature--media .feature__inner { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; } }

/* Product FAQ: native details/summary */
.faq { border-top: 1px solid var(--axis); max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--axis); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0;
                     cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: var(--t-18); }
.faq__item summary::after { content: "+"; content: "+" / ""; flex: none; width: 28px; text-align: center; font: 600 1.5rem/1 var(--f-body); color: var(--signal); }
.faq__item[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq__item p { margin: 0 0 20px; color: var(--mist); max-width: 68ch; }
.faq__item p a { color: var(--sheet); }

/* About: the source link under a fact, the inputs -> engine -> model diagram */
.source { display: block; margin-top: 6px; font-size: var(--t-13); color: var(--mist); }
.flow { margin: 28px 0; max-width: 760px; }
.flow__svg { display: block; width: 100%; height: auto; }
.flow__svg--wide { display: none; }
.flow__box { fill: var(--night); stroke: var(--primer); stroke-width: 2; }
.flow__box--engine { fill: var(--ink); stroke-width: 3; }
.flow__text { fill: var(--sheet); font: 600 20px var(--f-draw); font-stretch: 95%; }
.flow__line { stroke: var(--primer); stroke-width: 2; }
.flow__head { fill: var(--primer); }
@media (min-width: 560px) { .flow__svg--wide { display: block; } .flow__svg--tall { display: none; } }
.closing__note { margin-top: 20px; }
.closing__note a { color: var(--sheet); }

/* Video */
.video { margin: 0; }
.video video { width: 100%; height: auto; background: var(--ink); border: 1px solid var(--rule); }
.video figcaption { font-size: var(--t-13); color: var(--mist); margin-top: 10px; }

/* Contact */
.contact { display: grid; gap: 40px; }
.contact__details { margin: 0; display: grid; gap: 18px; align-content: start; }
.contact__details dt { font: 600 var(--t-13) var(--f-draw); font-stretch: 80%; color: var(--mist); }
.contact__details dd { margin: 2px 0 0; font-size: var(--t-18); }
.form h2 { margin-bottom: 16px; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 560px; }
.form fieldset[disabled] { opacity: .55; }
.form label { display: grid; gap: 6px; font-weight: 500; }
.form input, .form textarea { font: inherit; color: var(--sheet); background: var(--ink); border: 1.5px solid var(--axis); padding: 12px; }
.form input:focus-visible, .form textarea:focus-visible { border-color: var(--signal); }
.hint { font-size: var(--t-13); color: var(--mist); margin: -8px 0 0; }
/* Waiting-list form (contact page) */
.form select { font: inherit; color: var(--sheet); background: var(--ink); border: 1.5px solid var(--axis); padding: 12px; }
.form select:focus-visible { border-color: var(--signal); }
.form [aria-invalid="true"] { border-color: #ff8f7a; }
.form fieldset > label { margin-bottom: -10px; }
.field-error { color: #ffb4a6; font-size: var(--t-13); margin: -6px 0 0; }
.check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--signal); }
.check label { display: block; font-weight: 400; }
.check label a { text-decoration: underline; }
.form-status { margin: 0; min-height: 1.5em; font-weight: 500; }
.form-status--ok { color: var(--sheet); border-left: 3px solid var(--signal); padding-left: 12px; }
.form-status--error { color: #ffb4a6; }
/* Bot trap: off-screen for people, hidden from screen readers (aria-hidden). */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Text only screen readers read (e.g. "opens in a new tab"). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 40px 0 32px; font-size: .9375rem; color: var(--mist); }
.site-footer__inner { display: grid; gap: 24px; }
.site-footer .logo svg { height: 24px; }
.site-footer__brand p { margin: 12px 0 0; }
.site-footer__links, .site-footer__contact { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__links a, .site-footer__contact a { color: var(--sheet); }
.site-footer__legal { margin: 0; font-size: var(--t-13); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.site-footer__legal p { margin: 0; }
/* Quiet on purpose: visible if you look, never competing with the CTA. */
.site-footer__views { font-family: var(--f-draw); font-stretch: 85%; letter-spacing: .01em; }
.site-footer__views::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px;
  border-radius: 50%; background: var(--galvanized); }

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .actions { flex-direction: row; align-items: center; gap: 28px; text-align: left; }
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; }
  .site-footer__legal { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  :root { --gutter: 40px; }
  h1 { font-size: var(--t-61); font-stretch: 118%; }
  h2 { font-size: var(--t-39); }
  .lede { font-size: var(--t-20); }
  .site-header__inner { min-height: 76px; }
  .logo svg { height: 32px; }
  .nav--desktop { display: flex; align-items: center; gap: 28px; }
  .nav--desktop a:not(.btn) { text-decoration: none; font-weight: 500; }
  .nav--desktop a:not(.btn):hover, .nav--desktop [aria-current="page"] { text-decoration: underline; }
  .nav--phone { display: none; }

  .hero__copy { padding-top: 56px; width: 100%; }
  .hero h1 { max-width: 12ch; }
  .hero__reassure { white-space: nowrap; }
  .page-intro { padding: 72px 0 80px; }
}

/* 1024 px and up: the hero IS the first screen. Two columns: the text
   (lined up with the header's logo, buttons side by side) and the drawing,
   as large as the rest of the width allows, centred vertically and never
   taller than the screen. "How it works" starts below. */
@media (min-width: 1024px) {
  /* Equal margins left and right (the whole composition centred, at most
     1680 px wide). The text column is as wide as its own content (the
     headline); the drawing takes all the rest and reaches --hero-reach
     under the text column, where its top-left corner is empty - the text
     never touches the drawn lines (pixel-checked at every size). */
  .hero { --hero-reach: clamp(40px, 7vw - 30px, 120px); display: grid; column-gap: 32px; align-items: center;
          grid-template-columns: max-content minmax(0, 1fr);
          min-height: calc(100vh - 76px); min-height: calc(100svh - 76px);
          padding: 24px max(var(--gutter), calc(50% - 840px)); }
  /* home page: the header uses the hero's width, so the logo lines up with
     the headline and "Sign in" with the drawing's right edge */
  .page-home .site-header__inner { max-width: calc(1680px + 2 * var(--gutter)); }
  .hero .hero__copy { padding: 0; margin: 0; max-width: none; position: relative; z-index: 1; }
  /* The headline: four fixed lines ("Configure / your building / and let
     Qframe / do the job."). On short laptop screens the size follows the
     screen height (full size from ~870 px). */
  .hero h1 { max-width: none; font-size: clamp(2.75rem, min(4.6vw, 7vh), 3.8125rem); }
  .hero__line { display: block; white-space: nowrap; }
  .hero .lede { max-width: 34ch; }
  .hero__reassure { white-space: normal; }   /* phrases stay whole (spans), the line may break between them */
  /* the two buttons side by side, a little smaller than elsewhere */
  .hero .actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }
  .hero .actions .btn { padding: 14px 20px; font-size: 1.0625rem; }
  .hero__figure { margin: 0 0 0 calc(-1 * var(--hero-reach)); width: calc(100% + var(--hero-reach)); }
  .hero__model { padding: 0; aspect-ratio: 2 / 1; max-height: calc(100vh - 124px); max-height: calc(100svh - 124px); }
}

@media (min-width: 960px) {
  .page-intro h1 { font-size: var(--t-49); }

  .section { padding: 96px 0; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .facts { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; padding-top: 56px; }
  .facts__figure { font-size: var(--t-39); }
  .steps__item { padding: 60px 0 0; }
  .steps__item::before { content: ""; position: absolute; left: 38px; right: -40px; top: 19px; border-top: 1px dashed var(--axis); }
  .steps__item:last-child::before { right: 0; }
  .closing h2 { font-size: var(--t-49); }
  .contact { grid-template-columns: 1fr 1.4fr; gap: 80px; }
  .site-footer__inner { grid-template-columns: 2fr 1fr 1.3fr; }
}

/* The one motion: the frame assembles (columns, trusses, secondary steel,
   then dimensions) on load and twice more, 9 s apart, fading out before
   each repeat (frame-model.js). Reduced motion = finished drawing, no
   motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__model { transition: opacity .4s ease; }
  .hero__model.is-fading { opacity: 0; }
  .assemble .s-col path, .assemble .s-truss path, .assemble .s-sec path, .assemble .s-dim path {
    stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .6s ease-out forwards; }
  .assemble .s-col path { animation-duration: .35s; animation-delay: calc(var(--i) * 8ms); }
  .assemble .s-truss path { animation-delay: calc(500ms + var(--i) * 30ms); }
  .assemble .s-sec path { animation-duration: .5s; animation-delay: calc(1250ms + var(--i) * 10ms); }
  .assemble .s-dim path { animation-duration: .5s; animation-delay: 1800ms; }
  .assemble .s-dim text, .assemble .s-dim circle, .assemble .s-dim polygon { opacity: 0; animation: show .4s ease-out 2000ms forwards; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes show { to { opacity: 1; } }