/* fonts: self-hosted, see tools/site_v4/shared/fonts/ (SIL OFL) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');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:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/michroma-latin-ext.woff2) format('woff2');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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/michroma-latin.woff2) format('woff2');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}

/* Optimus Build, site V4 (built by tools/site_v4/build.py).
   One idea: the output is the image. Every picture on the site is something the product made, shown as the sheet
   the buyer receives: white paper, a thin rule, a title block. The page around it is quiet: one typeface
   (Inter, self-hosted), black ink, one accent (the brand cyan, deepened to teal for text on white, pure on dark)
   used only for actions and for the rule under a proof. No glow, no grid, no decoration that the product did
   not make. The demo film is the first thing on the home page because it is the first proof. */

:root{
  --ink:#15181d;
  --ink-2:#596069;
  --ink-3:#8b919a;
  --paper:#ffffff;
  --grey:#f4f5f7;
  --grey-2:#e9ebef;
  --rule:#dfe2e7;
  --teal:#0a7d8c;          /* the brand cyan, deepened for text and small marks on white (AA) */
  --cyan:#2fd5e8;          /* the brand cyan, on dark ground only */
  --navy:#0b0f16;          /* the dark sections; the platform's own dark */
  --ok:#1f8a4c;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --navh:60px;
  --max:1180px;
  --gutter:40px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:1100px){:root{--gutter:32px}}
@media (max-width:640px){:root{--gutter:18px;--navh:56px}}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--navh)}
body{font-family:var(--sans);font-size:17px;line-height:1.5;letter-spacing:-.011em;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:"cv11","ss01","tnum" 0}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
b,strong{font-weight:600}
::selection{background:#bdeff6}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:15px;transition:top .2s}
.skip:focus{top:12px}
main:focus{outline:none}
.wrap{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
section{padding:120px 0}
@media (max-width:760px){section{padding:76px 0}}
.grey{background:var(--grey)}
.center{text-align:center}
.nw{white-space:nowrap}

/* ---------- type ---------- */
h1{font-size:clamp(42px,5.1vw,72px);font-weight:600;line-height:1.04;letter-spacing:-.032em;text-wrap:balance}
h2{font-size:clamp(32px,3.7vw,52px);font-weight:600;line-height:1.06;letter-spacing:-.028em;text-wrap:balance}
h3{font-weight:600;letter-spacing:-.02em}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--cyan)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.45;letter-spacing:-.015em;color:var(--ink-2);margin-top:20px;max-width:40em}
.lead b{color:var(--ink)}
.head{max-width:820px;margin-bottom:64px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head.center .lead{margin-left:auto;margin-right:auto;max-width:36em}
.head.center .ctas{justify-content:center}
.dim{color:var(--ink-3)}
.caption{font-size:14px;color:var(--ink-3);margin-top:16px;text-align:center;letter-spacing:-.005em;line-height:1.45}
.caption.left{text-align:left}
.small{font-size:14px;color:var(--ink-3)}
.link{color:var(--teal);font-weight:500;display:inline-flex;align-items:center;gap:4px}
.link::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg);margin-left:3px}
.link:hover{text-decoration:underline}
.statement{font-size:clamp(26px,3vw,42px);font-weight:600;line-height:1.14;letter-spacing:-.028em;max-width:26em}
.statement span{color:var(--ink-3)}
.more{margin-top:36px}
.more-c{text-align:center;margin-top:40px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1;height:48px;padding:0 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s;white-space:nowrap}
.btn svg{width:14px;height:14px}
.btn.sm{height:34px;padding:0 14px;font-size:14px;border-radius:9px}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#000}
.btn.line{border-color:rgba(21,24,29,.3);color:var(--ink);background:transparent}
.btn.line:hover{border-color:var(--ink)}
.btn.light{background:#fff;color:var(--ink)}
.btn.light:hover{background:#e8e8ed}
.btn.line-l{border-color:rgba(255,255,255,.45);color:#fff}
.btn.line-l:hover{border-color:#fff}
.btn.cyan{background:var(--cyan);color:#000}
.btn.cyan:hover{background:#5ee1f0}
.btn:active{transform:scale(.98)}
.ctas{display:flex;align-items:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.ctas .link{margin-left:6px}
.note{font-size:14px;color:var(--ink-3);margin-top:18px;line-height:1.5}

/* ---------- logo: the platform lockup ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.logo svg{width:26px;height:26px;flex:none}
.nav .logo{gap:14px}
.nav .logo svg{width:32px;height:32px}
.nav .logo .lk{font-size:14px}
.logo .lk{display:inline-flex;flex-direction:column;align-items:center;gap:.36em;font-family:'Michroma',var(--sans);font-weight:400;line-height:1;white-space:nowrap;font-size:11.5px;letter-spacing:0}
.logo .lk-n{letter-spacing:.14em;margin-right:-.14em}
.logo .lk-b{display:flex;align-items:center;gap:.63em;font-size:.73em;color:var(--teal)}
.logo .lk-b > span{letter-spacing:.42em;margin-right:-.42em}
.logo .lk-b::before,.logo .lk-b::after{content:"";width:1.26em;height:1px;background:currentColor}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);background:rgba(255,255,255,0);transition:background .3s,box-shadow .3s}
.nav.scrolled,.nav.open{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 0 var(--rule)}
.nav.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
.nav .wrap{display:flex;align-items:center;height:100%;gap:24px}
.nav .brand{flex:none;display:flex}
/* the links sit left, after the logo; the actions keep the right (Stefan, 19.10: not centred) */
.nav .links{display:flex;align-items:center;gap:2px;margin:0 0 0 20px}
.nav .links > a,.nav .drop > button{font:inherit;font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);background:none;border:0;padding:6px 12px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:color .15s}
.nav .links > a:hover,.nav .drop > button:hover,.nav .drop.open > button,.nav .links > a[aria-current]{color:var(--ink)}
.nav .drop{position:relative}
.nav .drop > button svg{width:9px;height:9px;opacity:.6;transition:transform .2s}
.nav .drop.open > button svg{transform:rotate(180deg)}
.nav .menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:360px;background:#fff;border-radius:16px;padding:8px;box-shadow:0 20px 60px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.06);display:none}
.nav .drop.open .menu{display:block}
.nav .menu a{display:block;padding:12px 14px;border-radius:10px;transition:background .15s}
.nav .menu a:hover{background:var(--grey)}
.nav .menu b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.nav .menu span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px;line-height:1.4}
.nav .links .only-m{display:none}
.nav .right{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.nav .login,.nav .txt{font-size:14px;font-weight:500;color:var(--ink-2);padding:6px 10px}
.nav .login:hover,.nav .txt:hover{color:var(--ink)}
.nav .burger{display:none;width:40px;height:40px;border:0;background:none;color:var(--ink);cursor:pointer;margin-right:-10px}
.nav .burger svg{width:22px;height:22px}
.nav .burger path{transition:transform .25s var(--ease);transform-origin:center}
.nav.open .burger .b1{transform:translateY(3px) rotate(45deg)}
.nav.open .burger .b2{transform:translateY(-3px) rotate(-45deg)}
@media (max-width:1040px){
  .nav .login,.nav .txt{display:none}
  .nav .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav .right{margin-left:auto}
  .nav .links{display:none;position:fixed;top:var(--navh);left:0;right:0;bottom:0;margin:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px var(--gutter) 40px;gap:0;overflow-y:auto}
  .nav.open .links{display:flex}
  .nav .links > a,.nav .drop > button{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ink);padding:12px 0;border-radius:0;width:100%;justify-content:space-between;border-bottom:1px solid var(--rule)}
  .nav .drop > button svg{width:14px;height:14px}
  .nav .links .only-m{display:flex}
  .nav .links .only-m:last-child{color:var(--teal)}
  .nav .menu{position:static;transform:none;width:auto;box-shadow:none;background:none;padding:4px 0 12px}
  .nav .menu a{padding:9px 0}
  .nav .menu b{font-size:17px;font-weight:500}
  .nav .menu span{display:none}
}
body.menu-open{overflow:hidden}

/* ---------- the sheet: a drawing as the buyer receives it ----------
   white paper, a hairline, a title block. The picture is the output; the block says what it is. */
.sheet{background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--rule),0 1px 2px rgba(0,0,0,.04);overflow:hidden;display:flex;flex-direction:column}
.sheet .img{position:relative;background:var(--grey);aspect-ratio:4/3;overflow:hidden}
.sheet .img img{width:100%;height:100%;object-fit:cover}
.sheet .img.tall{aspect-ratio:3/4}
.sheet .img.wide{aspect-ratio:16/10}
.sheet .img.contain{background:#fff}
.sheet .img.contain img{object-fit:contain}
.sheet .tb{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--rule);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:#fff}
.sheet .tb b{color:var(--ink);font-weight:600}
.sheet .tb i{font-style:normal;color:var(--ink-3);font-weight:500;letter-spacing:.06em}
.sheet .tb em{font-style:normal;color:var(--teal);white-space:nowrap}
.sheet.shadow{box-shadow:0 0 0 1px var(--rule),0 30px 70px rgba(15,20,30,.14)}

/* ---------- home hero: the promise beside the demo ---------- */
.hero{position:relative;padding:calc(var(--navh) + 72px) 0 72px;background:linear-gradient(180deg,#fff 0,#f7f8fa 100%);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:64px;align-items:center}
.hero .copy{max-width:600px}
.hero h1{font-size:clamp(40px,4.5vw,64px)}
.hero .lead{font-size:clamp(17px,1.35vw,20px);color:#3b414a;margin-top:24px;max-width:30em}
.hero .note{margin-top:22px;max-width:34em}
.hero .eyebrow{margin-bottom:20px}
.hero .note{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.hero .note .pill{margin:0}
.hero .film-wrap{position:relative}
.hero .frame{border-radius:14px;box-shadow:0 0 0 1px var(--rule),0 30px 70px rgba(15,20,30,.16);aspect-ratio:16/10;background:#0b0f16}
.hero .frame img,.hero .frame video{object-fit:cover}
/* the play control is absolutely positioned with inset:0 + margin:auto; without an explicit width it would stretch
   across the frame, so the pill takes the width of its own text */
.hero .frame .play{width:max-content;height:56px;padding:0 22px 0 18px;border-radius:999px;gap:10px;font:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero .frame .play span{display:inline}
.hero .frame .play:hover{background:#fff;transform:scale(1.04)}
.hero .frame .play svg{width:20px;height:20px;margin:0}
.hero .tb{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px 0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hero .tb b{color:var(--ink-2);font-weight:600}
@media (max-width:980px){
  .hero{padding:calc(var(--navh) + 40px) 0 56px}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .hero .copy{max-width:600px}
  .hero h1{font-size:clamp(38px,8.5vw,56px)}
}
@media (max-width:640px){
  .hero{padding:calc(var(--navh) + 28px) 0 44px}
  .hero h1{font-size:38px}
  .hero .lead{font-size:16.5px;margin-top:16px}
  .hero .ctas{margin-top:24px;gap:10px}
  .hero .btn{height:46px;padding:0 18px;font-size:15.5px}
  .hero .frame .play{height:48px;font-size:14px;padding:0 18px 0 14px}
}

/* ---------- the first screen with the loop behind it: the slogan, two buttons, the building moving ----------
   The poster paints first (it is the LCP image); the video fades in over it once it plays. A gradient keeps
   white type readable over any clip; the copy is centred because the picture has no side to share. */
.hero.film-bg{min-height:100svh;min-height:calc(100vh - 0px);padding:calc(var(--navh) + 48px) 0 88px;display:flex;align-items:center;background:var(--navy);color:#fff}
.hero.film-bg .bg{position:absolute;inset:0;overflow:hidden}
.hero.film-bg .bg img,.hero.film-bg .bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.hero.film-bg .bg video{opacity:0;transition:opacity 1.2s ease}
.hero.film-bg .bg video.on{opacity:1}
/* two veils: a navy wash over the whole frame, which also pulls the clip's colours toward the palette, and a
   soft shade behind the copy, so the type reads even when the clip's sky is at its brightest */
.hero.film-bg .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,22,.72) 0,rgba(11,15,22,.5) 40%,rgba(11,15,22,.82) 100%),radial-gradient(ellipse 60% 55% at 50% 52%,rgba(11,15,22,.55) 0,rgba(11,15,22,0) 100%)}
.hero.film-bg .wrap{display:block;position:relative;z-index:1;text-align:center}
.hero.film-bg .copy{max-width:860px;margin:0 auto}
.hero.film-bg h1{color:#fff;font-size:clamp(42px,5.8vw,82px);text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero.film-bg .lead{color:rgba(255,255,255,.92);margin:26px auto 0;max-width:40em;font-size:clamp(18px,1.5vw,22px);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero.film-bg .lead.second{color:rgba(255,255,255,.7);margin-top:14px;font-size:clamp(16px,1.2vw,18px)}
.hero.film-bg .ctas{justify-content:center;margin-top:38px}
.hero.film-bg .btn.light{height:52px;padding:0 26px;font-size:17px}
.hero.film-bg .btn.line-l{height:52px;padding:0 24px;font-size:17px;border-color:rgba(255,255,255,.55)}
.hero.film-bg + .proof{padding-top:88px}
/* the nav over the dark first screen, until it scrolls onto white: a frosted dark bar, because the clip's sky is
   bright at the top and a white logo on it alone does not read; the bar dissolves into the white one on scroll */
body[data-page="home"] .nav:not(.scrolled):not(.open){background:rgba(11,15,22,.5);backdrop-filter:saturate(1.2) blur(16px);-webkit-backdrop-filter:saturate(1.2) blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.1)}
body[data-page="home"] .nav:not(.scrolled):not(.open) .links > a,body[data-page="home"] .nav:not(.scrolled):not(.open) .drop > button,body[data-page="home"] .nav:not(.scrolled):not(.open) .txt,body[data-page="home"] .nav:not(.scrolled):not(.open) .burger{color:rgba(255,255,255,.88)}
body[data-page="home"] .nav:not(.scrolled):not(.open) .links > a:hover,body[data-page="home"] .nav:not(.scrolled):not(.open) .drop > button:hover{color:#fff}
body[data-page="home"] .nav:not(.scrolled):not(.open) .logo{color:#fff}
body[data-page="home"] .nav:not(.scrolled):not(.open) .logo .lk-b{color:var(--cyan)}
body[data-page="home"] .nav:not(.scrolled):not(.open) .btn.dark{background:#fff;color:var(--ink)}
body[data-page="home"] .nav:not(.scrolled):not(.open) .btn.dark:hover{background:#e8e8ed}
@media (max-width:640px){
  .hero.film-bg{padding:calc(var(--navh) + 32px) 0 64px}
  .hero.film-bg h1{font-size:40px}
  .hero.film-bg .lead{font-size:16.5px;margin-top:18px}
  .hero.film-bg .ctas{margin-top:28px}
  .hero.film-bg .ctas .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.hero.film-bg .bg video{display:none}}

/* ---------- the plan line: every plan named, one quiet line ---------- */
.planline{list-style:none;display:flex;flex-wrap:wrap;gap:8px 0;margin:28px 0 0 -22px;font-size:15px;line-height:1.4;color:var(--ink-2);clip-path:inset(0 0 0 22px)}
.planline li{white-space:nowrap;position:relative;padding-left:22px;display:inline-flex;align-items:center;gap:8px}
.planline li::before{content:"\00b7";position:absolute;left:0;width:22px;text-align:center;color:var(--ink-3)}
.planline .pill{font-size:12px;padding:3px 9px 3px 8px}
.planline .pill::before{width:6px;height:6px;box-shadow:none}
@media (max-width:640px){.planline{font-size:14.5px;margin-left:-18px;clip-path:inset(0 0 0 18px)}.planline li{padding-left:18px}.planline li::before{width:18px}}

/* ---------- callout: one bold line with a quiet tail ---------- */
.callout{font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.022em;line-height:1.3;color:var(--ink-3);max-width:34em;margin-top:56px}
.callout b{color:var(--ink)}
.dark .callout{color:#8b919a}
.dark .callout b{color:#f5f5f7}

/* ---------- the pill: a status that is true today ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-2);background:#fff;padding:6px 12px 6px 10px;border-radius:999px;box-shadow:0 0 0 1px var(--rule)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(47,213,232,.22)}
.pill.soon::before{background:var(--ink-3);box-shadow:0 0 0 3px rgba(139,145,154,.2)}

/* ---------- the facts: a navy band that continues the first screen, three columns parted by hairlines ---------- */
.proof{padding:44px 0 48px;background:var(--navy);color:#f5f5f7}
.proof .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.proof .wrap > div{padding:6px 40px 6px 0}
.proof .wrap > div + div{border-left:1px solid rgba(255,255,255,.14);padding-left:40px}
.proof b{display:block;font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:#fff}
.proof span{display:block;font-size:15px;color:#a7adb6;margin-top:8px;line-height:1.45}
.proof a.link{margin-top:10px;font-size:15px;color:var(--cyan)}
.hero.film-bg + .proof{padding-top:44px}
@media (max-width:900px){
  .proof{padding:12px 0 28px}
  .proof .wrap{grid-template-columns:1fr}
  .proof .wrap > div{padding:22px 0}
  .proof .wrap > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:0}
}

/* ---------- compare: today beside with Optimus Build ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.compare > div{border-radius:16px;padding:30px 32px 10px;background:var(--grey)}
.compare > div.us{background:#fff;box-shadow:0 0 0 1px var(--rule)}
.compare h3{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-bottom:16px;border-bottom:1px solid var(--rule)}
.compare .us h3{color:var(--teal);border-bottom-color:var(--cyan)}
.compare dl{margin:0}
.compare dl > div{display:grid;grid-template-columns:118px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.compare dl > div:last-child{border-bottom:0}
.compare dt{font-size:14px;font-weight:600;color:var(--ink-3);padding-top:2px}
.compare dd{font-size:16.5px;line-height:1.45;color:var(--ink-2)}
.compare .us dd{color:var(--ink)}
.compare .us dd b{color:var(--teal)}
@media (max-width:900px){.compare{grid-template-columns:1fr}.compare > div{padding:24px 22px 6px}.compare dl > div{grid-template-columns:96px 1fr;gap:12px;padding:14px 0}.compare dd{font-size:16px}}

/* ---------- the pack: the sheets of a concept, side by side ---------- */
.pack{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px}
.pack .sheet .img{aspect-ratio:4/3.4}
.pack .sheet .tb{padding:10px 12px;font-size:10.5px}
@media (max-width:1000px){.pack{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .pack{display:flex;gap:12px;margin:8px calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pack::-webkit-scrollbar{display:none}
  .pack .sheet{flex:0 0 72vw;scroll-snap-align:start}
}

/* ---------- steps: numbered, the cyan mark on each rule ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;counter-reset:step}
.steps.s4{grid-template-columns:repeat(4,1fr);gap:0 32px}
.steps li{position:relative;border-top:1px solid var(--rule);padding-top:22px}
.steps li::after{content:"";position:absolute;left:0;top:-1px;width:44px;height:2px;background:var(--cyan)}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);display:block;font-size:13px;font-weight:600;color:var(--teal);margin-bottom:14px;letter-spacing:.06em}
.steps b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.steps span{display:block;font-size:16.5px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.steps small{display:block;font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.dark .steps li{border-top-color:rgba(255,255,255,.16)}
.dark .steps li::before{color:var(--cyan)}
.dark .steps b{color:#f5f5f7}
.dark .steps span{color:#a7adb6}
@media (max-width:900px){.steps,.steps.s4{grid-template-columns:1fr;gap:28px}.steps b{font-size:20px}.steps span{font-size:16px}}

/* ---------- chain: one decision rippling across disciplines; the payoff in ink ---------- */
.chain{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px}
.chain li{position:relative;padding:24px 26px;background:#fff;border-radius:14px;margin-right:30px;box-shadow:0 0 0 1px var(--rule)}
.chain li:last-child{margin-right:0;background:var(--ink);color:#fff;box-shadow:none}
.chain li + li::before{content:"";position:absolute;left:-23px;top:50%;width:10px;height:10px;border-right:1.8px solid var(--teal);border-top:1.8px solid var(--teal);transform:translateY(-50%) rotate(45deg)}
.chain small{display:block;font-size:11px;font-weight:600;color:var(--teal);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.chain li:last-child small{color:var(--cyan)}
.chain b{display:block;font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.grey .chain li{background:#fff}
.grey .chain li:last-child{background:var(--ink)}
@media (max-width:900px){
  .chain{grid-template-columns:1fr;gap:26px}
  .chain li{margin-right:0;padding:20px 22px}
  .chain li + li::before{left:50%;top:-18px;transform:translateX(-50%) rotate(135deg)}
}

/* ---------- two columns: text beside a sheet ---------- */
.row-o{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:72px;align-items:center}
.row-o.rev{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.row-o.rev > .txt{order:2}
.rows{display:flex;flex-direction:column;gap:120px}
.row-o .eyebrow{margin-bottom:14px}
.row-o h3{font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.026em;text-wrap:balance}
.row-o h3 span{color:var(--ink-3)}
.row-o h2{font-size:clamp(30px,3.2vw,44px)}
.row-o .txt > p:not(.eyebrow){font-size:clamp(17px,1.3vw,18.5px);color:var(--ink-2);margin-top:16px;line-height:1.5}
.row-o .txt > p:not(.eyebrow) b{color:var(--ink)}
.row-o .txt .link{margin-top:18px}
.row-o .txt .ctas{margin-top:24px}
.row-o figure{margin:0}
.row-o figcaption{font-size:14px;color:var(--ink-3);margin-top:12px;line-height:1.45}
.dark .row-o .txt > p:not(.eyebrow){color:#a7adb6}
.dark .row-o h3 span{color:#8b919a}
@media (max-width:900px){
  .rows{gap:80px}
  .row-o,.row-o.rev{grid-template-columns:1fr;gap:28px}
  .row-o.rev > .txt{order:0}
}
@media (max-width:640px){.rows{gap:64px}.row-o h3{font-size:26px}.row-o .txt > p:not(.eyebrow){font-size:16.5px}}

/* ---------- specs: a ruled grid of title + text, 3 columns ---------- */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;margin-top:72px}
.specs div{padding:24px 0 26px;border-top:1px solid var(--rule)}
.specs b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.specs span{display:block;font-size:16px;color:var(--ink-2);margin-top:8px;line-height:1.5}
.specs .pill{margin-top:12px;font-size:12px}
.dark .specs div{border-top-color:rgba(255,255,255,.16)}
.dark .specs b{color:#f5f5f7}
.dark .specs span{color:#a7adb6}
.dark .specs .pill{background:#161b24;box-shadow:0 0 0 1px rgba(255,255,255,.14);color:#cfd4db}
@media (max-width:900px){.specs{grid-template-columns:1fr 1fr;gap:0 28px}}
@media (max-width:560px){.specs{grid-template-columns:1fr;margin-top:48px}.specs div{padding:18px 0 20px}}

/* ---------- dark: the full project ---------- */
.dark{background:var(--navy);color:#f5f5f7}
.dark .eyebrow{color:var(--cyan)}
.dark .eyebrow::before{background:var(--cyan)}
.dark .lead{color:#a7adb6}
.dark .lead b{color:#f5f5f7}
.dark .link{color:var(--cyan)}
.dark .caption{color:#8b919a}
.dark .dim{color:#8b919a}
.dark .sheet{background:#121720;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.dark .sheet .tb{background:#121720;border-top-color:rgba(255,255,255,.1);color:#a7adb6}
.dark .sheet .tb b{color:#f5f5f7}
.dark .sheet .tb em{color:var(--cyan)}

/* ---------- frames: a film on the page ---------- */
.frame{position:relative;border-radius:14px;overflow:hidden;background:#111;aspect-ratio:16/10}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame.film{max-width:1040px;margin:0 auto;box-shadow:0 0 0 1px var(--rule),0 30px 70px rgba(15,20,30,.14)}
.dark .frame.film{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
/* product films on the page: the poster is cropped to the drawing, without the app's chrome; a playing film shows
   the whole frame, letterboxed. .crop-ui = the five-minute film (x 300-1448, y 240-1000 of 1448x1080);
   .crop-ui.str = the structure film (x 286-1340, y 60-1000). */
.frame.crop-ui{aspect-ratio:1148/760}
.frame.crop-ui img,.frame.crop-ui video{width:126.13%;max-width:none;height:auto;aspect-ratio:1448/1080;margin:-20.906% 0 0 -26.13%;object-fit:cover}
.frame.crop-ui.str{aspect-ratio:1054/940;max-width:860px}
.frame.crop-ui.str img,.frame.crop-ui.str video{width:137.38%;margin:-5.693% 0 0 -27.13%}
.frame.crop-ui.playing video{width:100%;height:100%;aspect-ratio:auto;margin:0;object-fit:contain;background:#000}
.frame .play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),background .25s;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.frame .play:hover{transform:scale(1.06);background:#fff}
.frame .play svg{width:24px;height:24px;margin-left:3px}
.frame .play span{display:none}
.frame.playing .play{display:none}
.frame.playing video{object-fit:contain;background:#000}

/* ---------- facts: four figures in a row ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1040px;margin:0 auto 64px;text-align:center}
.facts b{display:block;font-size:clamp(36px,4.2vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.facts b small{font-size:.45em;letter-spacing:-.01em;font-weight:600}
.facts b small.ab{display:block;font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-bottom:8px;line-height:1.2}
.facts span{display:block;font-size:16px;color:var(--ink-2);margin-top:10px}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr;gap:32px 16px;margin-bottom:44px}.facts span{font-size:15px}}

/* ---------- personas ---------- */
.personas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.personas a{display:flex;flex-direction:column;padding:24px 24px 22px;border-radius:16px;background:var(--grey);min-height:180px;transition:transform .3s var(--ease),background .3s}
.grey .personas a{background:#fff;box-shadow:0 0 0 1px var(--rule)}
.personas a:hover{transform:translateY(-3px);background:var(--grey-2)}
.grey .personas a:hover{background:#fff}
.personas b{font-size:20px;font-weight:600;letter-spacing:-.022em;line-height:1.2}
.personas span{font-size:15.5px;color:var(--ink-2);margin-top:8px;line-height:1.42}
.personas i{font-style:normal;font-size:14.5px;color:var(--teal);margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.personas i::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(45deg)}
@media (max-width:980px){.personas{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .personas{grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
  .personas a,.grey .personas a{background:none;box-shadow:none;border-radius:0;min-height:0;padding:18px 28px 18px 0;border-bottom:1px solid var(--rule);position:relative}
  .personas a:hover{transform:none;background:none}
  .personas b{font-size:18px}
  .personas i{position:absolute;right:4px;top:50%;margin:0;padding:0;font-size:0;transform:translateY(-50%)}
  .personas i::after{width:9px;height:9px;border-color:var(--ink-3)}
}

/* ---------- cards ---------- */
.cards{display:grid;gap:16px}
.cards.g2{grid-template-columns:repeat(2,1fr)}
.cards.g3{grid-template-columns:repeat(3,1fr)}
.cards.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--grey);border-radius:16px;padding:28px 28px 30px;display:flex;flex-direction:column}
.grey .card{background:#fff;box-shadow:0 0 0 1px var(--rule)}
.dark .card{background:#121720;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.card .ico{width:28px;height:28px;fill:none;stroke:var(--teal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px;flex:none}
.dark .card .ico{stroke:var(--cyan)}
.card h3{font-size:clamp(21px,1.8vw,26px);line-height:1.15;letter-spacing:-.024em}
.card h4{font-size:18px;font-weight:600;letter-spacing:-.018em;line-height:1.25}
.card p{font-size:16px;color:var(--ink-2);margin-top:8px;line-height:1.5}
.dark .card p{color:#a7adb6}
.card .link{margin-top:auto;padding-top:18px}
.card.big{padding:36px 36px 36px}
.card .pill{align-self:flex-start;margin-bottom:16px}
@media (max-width:1060px){.cards.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.cards.g3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards.g2,.cards.g3,.cards.g4{grid-template-columns:1fr;gap:12px}.card,.card.big{padding:22px 22px 24px;border-radius:14px}}

/* ---------- pricing modules ---------- */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.price > div{background:#fff;border-radius:16px;padding:28px 28px 30px;box-shadow:0 0 0 1px var(--rule);display:flex;flex-direction:column}
.price > div.full{box-shadow:0 0 0 2px var(--ink)}
.price small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.price b{display:block;font-size:24px;font-weight:600;letter-spacing:-.024em;line-height:1.15}
.price p{font-size:16px;color:var(--ink-2);margin-top:10px;line-height:1.5}
.price ul{list-style:none;margin-top:18px;border-top:1px solid var(--rule)}
.price li{padding:10px 0 10px 24px;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink);position:relative;line-height:1.4}
.price li::before{content:"";position:absolute;left:3px;top:17px;width:10px;height:5px;border-left:1.7px solid var(--teal);border-bottom:1.7px solid var(--teal);transform:rotate(-45deg)}
.price .unit{margin-top:auto;padding-top:20px;font-size:14px;color:var(--ink-3)}
@media (max-width:900px){.price{grid-template-columns:1fr}}

/* ---------- ticks: a ruled list with check marks ---------- */
.ticks{list-style:none;margin-top:24px;border-bottom:1px solid var(--rule)}
.ticks li{position:relative;padding:14px 0 14px 32px;border-top:1px solid var(--rule);font-size:16.5px;line-height:1.45;color:var(--ink-2)}
.ticks li b{color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:4px;top:21px;width:12px;height:6px;border-left:1.8px solid var(--teal);border-bottom:1.8px solid var(--teal);transform:rotate(-45deg)}
.ticks a.inl{color:var(--teal);font-weight:500}
.ticks a.inl:hover{text-decoration:underline}
.dark .ticks,.dark .ticks li{border-color:rgba(255,255,255,.16);color:#a7adb6}
.dark .ticks li b{color:#f5f5f7}
.dark .ticks li::before{border-color:var(--cyan)}
@media (max-width:640px){.ticks li{font-size:16px;padding:12px 0 12px 28px}.ticks li::before{top:19px;left:2px}}

/* ---------- split: two columns ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start}
.split h2{font-size:clamp(28px,3.2vw,44px)}
.split .lead{margin-top:18px}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}}

/* ---------- tiers: the standard ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tiers > div{background:var(--grey);border-radius:14px;padding:22px 22px 24px}
.grey .tiers > div{background:#fff;box-shadow:0 0 0 1px var(--rule)}
.tiers i{display:flex;gap:4px;margin-bottom:16px}
.tiers i span{display:block;width:22px;height:4px;border-radius:2px;background:var(--rule)}
.tiers i span.on{background:var(--cyan)}
.tiers b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.tiers p{font-size:15.5px;color:var(--ink-2);margin-top:8px;line-height:1.45}
@media (max-width:1000px){.tiers{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiers{grid-template-columns:1fr;gap:12px}}

/* ---------- chips ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips li{font-size:15px;font-weight:500;padding:8px 14px;border-radius:999px;background:var(--grey);color:var(--ink)}
.grey .chips li{background:#fff;box-shadow:0 0 0 1px var(--rule)}
.chips li.on{background:var(--ink);color:#fff;box-shadow:none}
.chips-l{font-size:14px;font-weight:600;color:var(--ink);margin-top:32px;letter-spacing:-.005em}
.chips-l + .chips{margin-top:10px}

/* ---------- quotes: the design partners, when there are any ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.quote{margin:0;background:#fff;border-radius:16px;padding:28px 28px 26px;box-shadow:0 0 0 1px var(--rule);display:flex;flex-direction:column}
.quote blockquote{font-size:18px;line-height:1.45;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.quote blockquote::before{content:"\201C";display:block;font-size:40px;line-height:.6;color:var(--cyan);margin-bottom:14px}
.quote figcaption{margin-top:auto;padding-top:22px;font-size:14px;color:var(--ink-2)}
.quote figcaption b{display:block;color:var(--ink)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.018em;line-height:1.3;text-wrap:balance}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;color:var(--teal);background:linear-gradient(currentColor,currentColor) center/100% 1.7px no-repeat,linear-gradient(currentColor,currentColor) center/1.7px 100% no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > p{color:var(--ink-2);font-size:16.5px;line-height:1.55;padding:0 56px 26px 0;max-width:46em}
.faq details > p + p{margin-top:-12px}
.faq a:not(.btn){color:var(--teal);font-weight:500}
.faq a:not(.btn):hover{text-decoration:underline}
@media (max-width:640px){.faq summary{padding:18px 0;font-size:17px}.faq details > p{font-size:16px;padding:0 8px 20px 0}}

/* ---------- deliverables: the country links and the documents of each stage ---------- */
.seg-wrap{display:flex;justify-content:center;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg-wrap::-webkit-scrollbar{display:none}
.seg{display:inline-flex;gap:2px;padding:4px;background:var(--grey);border-radius:999px;flex:none}
.grey .seg{background:var(--grey-2)}
.seg button,.seg a{font:inherit;font-size:15px;font-weight:500;letter-spacing:-.01em;border:0;background:none;padding:9px 18px;border-radius:999px;color:var(--ink-2);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;display:inline-block}
.seg button:hover,.seg a:hover{color:var(--ink)}
.seg button[aria-selected=true],.seg a[aria-current]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.dgroups{margin-top:56px}
.dgroup{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;padding:40px 0;border-top:1px solid var(--rule)}
.dgroup:first-child{border-top:1px solid var(--ink)}
.dgroup h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.024em;line-height:1.15}
.dgroup .gsub{display:block;font-size:15px;color:var(--ink-3);margin-top:8px;line-height:1.4}
.docs{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-content:start}
.doc{padding:0 0 20px}
.doc b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
.doc span{display:block;font-size:15px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.dnote{font-size:14px;color:var(--ink-3);margin-top:8px;padding-top:22px;border-top:1px solid var(--rule)}
.dline{font-size:15px;color:var(--ink-2);margin-top:28px;max-width:46em}
.cstatus{display:flex;justify-content:center;margin-top:28px}
@media (max-width:900px){.dgroup{grid-template-columns:1fr;gap:18px;padding:32px 0}}
@media (max-width:640px){.seg-wrap{justify-content:flex-start}.seg button,.seg a{font-size:14px;padding:8px 11px}.docs{grid-template-columns:1fr}.doc{padding-bottom:16px}}

/* ---------- page hero (subpages): the copy beside the proof sheet, or centred ---------- */
.p-hero{position:relative;padding:calc(var(--navh) + 72px) 0 0;background:linear-gradient(180deg,#fff 0,#f7f8fa 100%)}
.p-hero .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center;padding-bottom:88px}
.p-hero .copy{max-width:560px}
.p-hero h1{font-size:clamp(38px,4.4vw,62px)}
.p-hero .sub{font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.16;color:var(--ink-3);margin-top:8px;text-wrap:balance}
.p-hero .lead{font-size:clamp(17px,1.3vw,19px);color:#3b414a;margin-top:22px;max-width:30em}
.p-hero .pill{margin-bottom:22px}
.p-hero figure{margin:0}
.p-hero figure figcaption{font-size:14px;color:var(--ink-3);margin-top:12px;line-height:1.45}
.p-hero.c{text-align:center;padding-bottom:0}
.p-hero.c .copy{max-width:820px;margin:0 auto;padding-bottom:88px}
.p-hero.c h1{font-size:clamp(40px,5vw,72px)}
.p-hero.c .lead{margin-left:auto;margin-right:auto;max-width:36em}
.p-hero.c .ctas{justify-content:center}
.p-hero.c .pill{margin:0 auto 22px}
.toc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:32px;list-style:none}
.toc a{display:inline-block;font-size:14px;font-weight:500;color:var(--ink);background:#fff;padding:8px 14px;border-radius:999px;box-shadow:0 0 0 1px var(--rule);transition:background .2s}
.toc a:hover{background:var(--grey)}
@media (max-width:900px){
  .p-hero{padding-top:calc(var(--navh) + 40px)}
  .p-hero .grid{grid-template-columns:1fr;gap:36px;padding-bottom:64px}
  .p-hero .copy{max-width:600px}
  .p-hero.c .copy{padding-bottom:64px}
}
@media (max-width:640px){
  .p-hero{padding-top:calc(var(--navh) + 28px)}
  .p-hero h1,.p-hero.c h1{font-size:36px}
  .p-hero .sub{font-size:21px}
  .p-hero .lead{font-size:16.5px;margin-top:16px}
  .p-hero .grid{padding-bottom:48px}
  .p-hero.c .copy{padding-bottom:48px}
  .toc{margin-top:24px;gap:6px}
  .toc a{font-size:13.5px;padding:7px 12px}
}

/* ---------- gallery: sheets in a grid (the sample project) ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery .sheet.w2{grid-column:span 2}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}.gallery .sheet.w2{grid-column:1/-1}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}

/* ---------- closing ---------- */
.closing{background:var(--navy);color:#f5f5f7;text-align:center;padding:130px 0 140px}
.closing .chrome{width:min(300px,64vw);height:auto;margin:0 auto 48px}
.closing h2{max-width:16em;margin:0 auto}
.closing h2 span{color:#8b919a}
.closing .lead{color:#a7adb6;margin:22px auto 0;max-width:32em}
.closing .ctas{justify-content:center;margin-top:36px}
.closing .note{color:#8b919a}
.closing .tag{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin-bottom:22px}
@media (max-width:640px){.closing{padding:88px 0 96px}.closing .chrome{margin-bottom:36px}}

/* ---------- footer ---------- */
footer{background:var(--grey);padding:56px 0 30px;font-size:14px;color:var(--ink-2);letter-spacing:-.005em}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
footer .f-brand p{margin-top:16px;max-width:32ch;line-height:1.45}
footer .f-brand .status{margin-top:10px;color:var(--ink)}
footer .f-brand .tag{margin-top:14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
footer h5{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:12px}
footer .cols a{display:block;padding:4px 0}
footer .cols > div > a:hover{color:var(--ink);text-decoration:underline}
footer .base{display:flex;justify-content:space-between;gap:16px;margin-top:44px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-3);flex-wrap:wrap}
footer .legal{display:flex;gap:18px}
footer .legal a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}footer .f-brand{grid-column:1/-1}}

/* ---------- dialog ---------- */
.dlg{margin:auto;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:#fff;color:var(--ink);border:0;border-radius:20px;padding:40px 40px 34px;box-shadow:0 40px 120px rgba(0,0,0,.28);overflow-y:auto}
.dlg::backdrop{background:rgba(11,15,22,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dlg[open]{animation:sheet .3s var(--ease)}
@keyframes sheet{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dlg .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--grey);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.dlg .x svg{width:14px;height:14px}
.dlg .x:hover{background:var(--grey-2);color:var(--ink)}
.dlg h3{font-size:28px;letter-spacing:-.028em;line-height:1.1;padding-right:30px}
.dlg h3:focus{outline:none}
.dlg p{color:var(--ink-2);margin-top:12px;font-size:16px;line-height:1.5}
.dlg .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
.dlg .acts .small{margin-left:4px}
.d-ok{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#dcf2f5;color:var(--teal);margin-bottom:18px}
.d-ok svg{width:26px;height:26px}
.lf{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.lf label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.lf label em{font-style:normal;color:var(--ink-3);font-weight:400}
.lf label.solo{grid-column:1/-1}
.lf .wide{grid-column:1/-1}
.lf input,.lf select,.lf textarea{font:inherit;font-size:16px;letter-spacing:-.01em;color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:10px;padding:11px 13px;width:100%;outline:none;resize:vertical;transition:border-color .15s,box-shadow .15s}
.lf select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23596069' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:36px}
.lf input:focus,.lf select:focus,.lf textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(10,125,140,.14)}
.lf .bad{border-color:#d93025;box-shadow:0 0 0 4px rgba(217,48,37,.1)}
.lf .trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* file pickers: the native input is invisible; a dashed field shows the names chosen and the total size */
.lf-file{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.lf-file .pick{position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px dashed var(--rule);border-radius:10px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.lf-file .pick:hover{border-color:var(--teal);background:#f7fbfc}
.lf-file .pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.lf-file .pick b{flex:none;font-size:14px;font-weight:600;color:var(--teal)}
.lf-file .pick i{font-style:normal;font-size:14px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lf-file.has .pick{border-style:solid;border-color:var(--teal)}
.lf-file.has .pick i{color:var(--ink)}
.lf-file small{font-size:12.5px;color:var(--ink-3);line-height:1.4;font-weight:400}
.lf-file.bad .pick{border-color:#d93025}
/* consent: a checkbox and one line with the link */
.lf-consent{flex-direction:row!important;align-items:flex-start!important;gap:10px!important;font-weight:400!important;color:var(--ink)!important;font-size:14px!important;margin-top:4px}
.lf-consent input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--teal)}
.lf-consent a{color:var(--teal);font-weight:500}
.lf-consent a:hover{text-decoration:underline}
.lf-consent.bad span{color:#c5221f}
.lf-err{color:#c5221f!important;font-size:15px!important;margin-top:16px!important}
@media (max-width:560px){
  .dlg{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:18px 18px 0 0;padding:30px 18px calc(22px + env(safe-area-inset-bottom))}
  .dlg h3{font-size:25px}
  .lf{gap:12px 10px}
  .lf label{grid-column:1/-1}
  .lf label:has(select){grid-column:auto}
  .dlg .acts .btn{flex:1}
  .dlg .acts .small{margin:4px 0 0;width:100%;text-align:center}
}

/* ---------- film dialog ---------- */
.film-dlg{margin:auto;width:min(1100px,calc(100vw - 48px),calc((100dvh - 48px) * 1.3407));background:#000;border:0;border-radius:16px;padding:0;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.4)}
.film-dlg::backdrop{background:rgba(0,0,0,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.film-dlg video{width:100%;aspect-ratio:1448/1080;background:#000}
.film-dlg .x{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.film-dlg .x svg{width:14px;height:14px}
.film-dlg .x:hover{background:rgba(0,0,0,.85)}
@media (max-width:560px){.film-dlg{width:calc(100vw - 20px);border-radius:12px}}

/* ---------- 404 ---------- */
.lost{padding:calc(var(--navh) + 120px) 0 140px;text-align:center}
.lost h1{font-size:clamp(40px,5vw,72px)}
.lost .lead{margin:20px auto 0}

/* ---------- helpers ---------- */
.mt-0{margin-top:0!important}.mb-0{margin-bottom:0!important}.mt-s{margin-top:32px}.mt-m{margin-top:64px}.mt-l{margin-top:96px}.pt-s{padding-top:64px}
.section-tight{padding:88px 0}
@media (max-width:760px){.section-tight{padding:60px 0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

/* ---------- rates: the price list that is also the order form ----------
   One component for both. The rows are the price list a buyer reads (the specialty, what it covers, what it
   costs for the project on the slider) and, through their boxes, what the simulator adds up. Each rate lives
   once, in its row (data-rate), and is never printed: the script writes the amount for the chosen area, so the
   words and the arithmetic cannot drift apart. The whole-project row is in ink: it is the recommended choice,
   and the one the discount belongs to. */
.rates{list-style:none;border-top:1px solid var(--rule)}
.rates li{border-bottom:1px solid var(--rule)}
.rates label{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:4px 18px;align-items:start;padding:20px 0;cursor:pointer}
.rates input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:2px 0 0;border:1.5px solid var(--ink-3);border-radius:7px;background:#fff;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
.rates input:checked{background:var(--ink);border-color:var(--ink)}
.rates input:checked::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.rates input:disabled{cursor:default;opacity:.65}
.rates input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.rates .nm{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rates b{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.rates .tag{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.rates .what{grid-column:2;font-size:15.5px;color:var(--ink-2);line-height:1.45;max-width:44em}
.rates .rate{grid-column:3;grid-row:1/span 2;text-align:right;white-space:nowrap;font-size:19px;font-weight:600;letter-spacing:-.02em;font-feature-settings:"tnum"}
.rates .rate small{display:block;font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-top:3px}
.rates .rate s{display:block;font-size:14px;font-weight:500;color:var(--ink-3);text-decoration:line-through;margin-bottom:2px}
.rates .rate s:empty{display:none}
.rates li.all{background:var(--ink);color:#fff;border-radius:14px;margin-top:14px;border-bottom:0}
.rates li.all label{padding:22px 24px}
.rates li.all input{border-color:rgba(255,255,255,.6);background:transparent}
.rates li.all input:checked{background:var(--cyan);border-color:var(--cyan)}
.rates li.all input:checked::after{border-color:#000}
.rates li.all .tag{color:var(--cyan)}
.rates li.all .what{color:#a7adb6}
.rates li.all .rate small,.rates li.all .rate s{color:#8b919a}
@media (max-width:640px){
  .rates label{grid-template-columns:24px minmax(0,1fr);gap:4px 14px;padding:16px 0}
  .rates .rate{grid-column:2;grid-row:auto;text-align:left;margin-top:4px;font-size:17px}
  .rates .rate small{display:inline;margin-left:6px}
  .rates .rate s{display:inline;margin-right:6px}
  .rates li.all label{padding:18px 16px}
  .rates b{font-size:17px}.rates .what{font-size:15px}
}

/* ---------- windows: how long the project stays open for work ----------
   Three cards, as .tiers: the bars count the months at a glance and the total under each is filled live by the
   simulator, so the three prices are seen side by side before choosing. No multiplier is printed: the price of a
   window is a figure, not a sentence about months (Stefan, 20.10.2026). */
.windows{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.windows label{position:relative;display:block;background:#fff;border-radius:14px;padding:18px 18px 20px;box-shadow:0 0 0 1px var(--rule);cursor:pointer;transition:box-shadow .15s}
.windows label:hover{box-shadow:0 0 0 1px var(--ink-3)}
.windows label:has(input:checked){box-shadow:0 0 0 2px var(--ink)}
.windows input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.windows label:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:3px}
.windows i{display:flex;gap:4px;margin-bottom:14px}
.windows i span{display:block;width:22px;height:4px;border-radius:2px;background:var(--rule)}
.windows i span.on{background:var(--cyan)}
.windows b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}
.windows p{font-size:14.5px;color:var(--ink-2);margin-top:6px;line-height:1.45;min-height:3em}
.windows .tot{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:18px;font-weight:600;letter-spacing:-.02em;font-feature-settings:"tnum"}
@media (max-width:900px){.windows{grid-template-columns:1fr}.windows p{min-height:0}}

/* ---------- the simulator: one project's price, live ----------
   What the buyer chooses on the left (the area, the specialties, the window); the total on the right, sticky, so
   it is in view while anything changes. On the phone the total also rides in a bar along the bottom of the
   screen while the controls are on screen and the panel is not. */
.sim{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:56px;align-items:start}
.sim h3{font-size:20px;letter-spacing:-.02em;margin-bottom:16px}
.sim h3 .ctx{font-size:14px;font-weight:500;color:var(--ink-3);margin-left:10px;letter-spacing:0;font-feature-settings:"tnum"}
.sim .blk + .blk{margin-top:52px}
.sim-area{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sim-area .in{display:flex;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:0 16px;height:56px;flex:1 1 200px;max-width:320px;transition:border-color .15s,box-shadow .15s}
.sim-area .in:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(10,125,140,.14)}
.sim-area input{font:inherit;font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--ink);border:0;outline:none;background:none;width:100%;min-width:0;font-feature-settings:"tnum"}
.sim-area input::-webkit-outer-spin-button,.sim-area input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sim-area input[type=number]{-moz-appearance:textfield;appearance:textfield}
.sim-area .seg{flex:none}
.sim-area .seg button{padding:8px 14px;font-size:14px}
/* the slider: a 4 px track painted by the script up to the thumb (ink), the rest in rule grey; the thumb in ink */
.sim-slider{margin-top:22px;padding:0 2px}
.sim-slider input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:4px;border-radius:2px;background:var(--rule);margin:10px 0;cursor:pointer;outline:none}
.sim-slider input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:transparent}
.sim-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.28);margin-top:-11px;transition:transform .15s}
.sim-slider input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.06)}
.sim-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(10,125,140,.3)}
.sim-slider input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:transparent}
.sim-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.28)}
.sim-slider .ends{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);margin-top:6px;font-feature-settings:"tnum"}
.sim .own{display:flex;align-items:flex-start;gap:12px;margin-top:20px;font-size:15px;color:var(--ink-2);line-height:1.45;cursor:pointer}
.sim .own input{width:18px;height:18px;accent-color:var(--ink);margin:3px 0 0;flex:none}
.sim .note{margin-top:16px}
/* who works in it: the editors stepper (two come with the project) and the viewers, unlimited */
.people{border-top:1px solid var(--rule)}
.people .row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.people b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.people span{display:block;font-size:15px;color:var(--ink-2);margin-top:4px;line-height:1.45;max-width:38em}
.people .step{display:inline-flex;align-items:center;gap:6px;flex:none}
.people .step button{width:36px;height:36px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 1px var(--rule);color:var(--ink);font:inherit;font-size:20px;line-height:1;cursor:pointer;transition:box-shadow .15s,background .15s}
.people .step button:hover{box-shadow:0 0 0 1px var(--ink-3)}
.people .step button:disabled{color:var(--ink-3);cursor:default;box-shadow:0 0 0 1px var(--rule)}
.people .step output{min-width:36px;text-align:center;font-size:20px;font-weight:600;letter-spacing:-.02em;font-feature-settings:"tnum"}
.people .unl{flex:none;font-size:14px;font-weight:600;color:var(--teal);letter-spacing:.02em}
@media (max-width:640px){.people .row{gap:14px;padding:14px 0}.people b{font-size:16px}.people span{font-size:14.5px}}
.sim-out{position:sticky;top:calc(var(--navh) + 24px);background:#fff;border-radius:18px;padding:30px;box-shadow:0 0 0 1px var(--rule)}
.sim-out .l{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.sim-out .tot{display:block;font-size:clamp(40px,4.2vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1;font-feature-settings:"tnum";white-space:nowrap}
.sim-out .for{font-size:15px;color:var(--ink-2);margin-top:12px;line-height:1.45}
.sim-out .lines{list-style:none;margin-top:22px;border-top:1px solid var(--rule)}
.sim-out .lines:empty{display:none}
.sim-out .lines li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;color:var(--ink-2);font-feature-settings:"tnum";line-height:1.4}
.sim-out .lines li span:last-child{white-space:nowrap}
.sim-out .lines li.sum{color:var(--ink);font-weight:600}
.sim-out .lines li.off{color:var(--ok)}
.sim-out .nudge{margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--grey);font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.sim-out .nudge b{color:var(--ink)}
.sim-out .nudge button{font:inherit;font-size:14.5px;font-weight:500;color:var(--teal);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.sim-out .note{margin-top:18px}
.sim-out .btn{margin-top:18px;width:100%}
.sim-bar{display:none}
@media (max-width:900px){
  .sim{grid-template-columns:1fr;gap:44px}
  .sim-out{position:static;padding:24px}
  .sim-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gutter) 12px;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 -1px 0 var(--rule);font-size:13px;color:var(--ink-2);line-height:1.3}
  .sim-bar[hidden]{display:none}
  .sim-bar b{display:block;font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--ink);font-feature-settings:"tnum";margin-top:2px}
  .sim-bar a{color:var(--teal);font-weight:500;font-size:14px;white-space:nowrap}
}