/*
 * Landing page layout. The herOS mark and its motion come from the shared brand module -
 * see docs/design/BRAND.md section 10 and src/brand/horizon.css. Do not redraw the mark here.
 */
:root{--font:var(--ds-font-sans);--display:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--serif:"Iowan Old Style",Baskerville,"Palatino Linotype",Georgia,serif;color-scheme:dark;font-family:var(--font);font-size:16px;color:var(--ink);background:var(--ds-bg-canvas)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--ds-focus-ring);outline-offset:6px}a:hover{color:var(--ds-text-primary)}button{cursor:pointer}p,h1,h2,h3{margin:0}p{line-height:1.6}h1,h2,h3{font-weight:400}::selection{background:#cbb9ff;color:var(--ds-bg-canvas)}.wrap{width:min(1280px,calc(100% - 112px));margin-inline:auto}.skip-link{position:fixed;top:12px;left:12px;transform:translateY(-150%);padding:var(--ds-space-4);background:var(--ds-text-primary);color:var(--ds-bg-canvas);z-index:40}.skip-link:focus{transform:none}.site-header{position:absolute;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:var(--ds-space-5) var(--ds-space-6);gap:var(--ds-space-4)}.wordmark{width:64px;height:58px;border:1px solid color-mix(in srgb,var(--ds-text-primary) 46%,transparent);border-radius:24px;display:flex;align-items:center;justify-content:center;letter-spacing:-2px;font-size:30px;color:var(--ds-text-primary);background:color-mix(in srgb,var(--ds-text-primary) 2%,transparent);backdrop-filter:blur(12px)}.brand-point{display:none}.site-header nav{display:flex;align-items:center;gap:var(--ds-space-5);font-size:13px;color:var(--ds-chrome-text-5)}.nav-cta{padding:var(--ds-space-4) var(--ds-space-5);border-radius:var(--ds-radius-panel);background:color-mix(in srgb,var(--ds-text-primary) 5%,transparent);backdrop-filter:blur(20px);color:var(--ds-text-primary);border:1px solid color-mix(in srgb,var(--ds-text-primary) 7%,transparent);min-width:160px;display:flex;justify-content:space-between;gap:var(--ds-space-5)}.cinema-hero{position:relative;min-height:920px;min-height:max(850px,100svh);padding:128px var(--ds-space-5) 128px;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden}.hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-4;filter:brightness(.48) saturate(.72);animation:scene-in 1.5s ease-out both}.hero-shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,#090a0b55 0%,#090a0b25 48%,var(--ds-bg-canvas) 100%)}.ghost-title{position:absolute;top:95px;left:4%;right:0;font-size:clamp(95px,11.2vw,180px);line-height:.94;letter-spacing:-.065em;color:#efebe742;filter:blur(3.5px);z-index:-2;user-select:none;pointer-events:none}.glass-hero{width:min(760px,100%);border:1px solid color-mix(in srgb,var(--ds-text-primary) 33%,transparent);outline:1px solid color-mix(in srgb,var(--ds-text-primary) 9%,transparent);outline-offset:9px;border-radius:24px;background:linear-gradient(140deg,color-mix(in srgb,var(--ds-text-primary) 5%,transparent),color-mix(in srgb,var(--ds-text-primary) 1%,transparent));box-shadow:0 45px 130px #0009,inset 0 1px 0 #ffffff30;backdrop-filter:blur(19px);overflow:hidden}.glass-content{padding:var(--ds-space-6) var(--ds-space-6) var(--ds-space-6);text-align:center}.hero-oracle{border-radius:18px;width:56px;height:56px;box-shadow:0 0 35px #9685dd30}.glass-content h1{font-size:clamp(43px,4.5vw,66px);line-height:1.025;letter-spacing:-.04em;font-weight:400}.glass-content h1 em{font-style:normal;color:var(--ds-chrome-text-5)}.button{border-radius:var(--ds-radius-pill);display:inline-flex;align-items:center;justify-content:space-between;gap:var(--ds-space-6);padding:var(--ds-space-4) var(--ds-space-5);font-size:14px;transition:background .2s,transform .2s}.button-light{color:var(--ds-text-on-accent);background:var(--ds-accent)}.button-light:hover{color:var(--ds-bg-canvas);background:#daccff;transform:translateY(-2px)}.glass-content .button-light{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(90deg,var(--ds-illustration-emphasis-rose),var(--ds-illustration-emphasis-sand),var(--ds-illustration-emphasis-leaf),var(--ds-illustration-emphasis-sky),var(--ds-illustration-emphasis-lilac),var(--ds-illustration-emphasis-rose));background-size:220% 100%;transition:transform .25s ease,box-shadow .55s ease,color .45s ease}.glass-content .button-light::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ds-accent);opacity:1;transition:opacity .2s ease}

.glass-content .button-light .button-label{position:relative;z-index:1}
.glass-content .button-light:hover::before{opacity:0}
.glass-content .button-light:hover{color:var(--ds-bg-canvas);box-shadow:0 0 34px #c4b2ed55,0 0 70px #f1a5b633}
@media(prefers-reduced-motion:reduce){.glass-content .button-light,.glass-content .button-light:hover{animation:none}}.make-section{padding-block:128px}.demo-note{font-size:12px;text-align:center;color:var(--ds-chrome-text-2);margin-top:var(--ds-space-3)}.keep-section{background:var(--ds-bg-surface);border-block:1px solid #292c2a;padding-block:128px}.cloud-note{font-size:12px;color:var(--ds-chrome-text-3);margin-top:var(--ds-space-6);padding-top:var(--ds-space-5);border-top:1px solid var(--ds-border-subtle);line-height:1.8}.text-link{display:inline-flex;align-items:center;gap:var(--ds-space-5);min-height:44px;font-size:14px;white-space:nowrap}.site-footer{padding-top:var(--ds-space-6);border-top:1px solid var(--line);overflow:hidden}.footer-wordmark{font-size:clamp(150px,25vw,350px);display:flex;align-items:baseline;letter-spacing:-.075em;line-height:1.25;color:var(--ds-chrome-text-4)}.footer-wordmark>span{font-size:.38em;letter-spacing:-.07em}.footer-wordmark>i{font-size:.6em;line-height:1;font-style:normal;margin-left:auto;align-self:center;color:var(--ds-text-faint);padding-right:var(--ds-space-3)}.footer-bottom{display:flex;justify-content:space-between;gap:var(--ds-space-5);font-size:12px;color:var(--ds-chrome-text-2);border-top:1px solid var(--line);padding:var(--ds-space-5) 0 var(--ds-space-6);letter-spacing:.5px}
@keyframes scene-in{from{transform:scale(1.045)}to{transform:scale(1)}}@keyframes glass-in{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes enter-section{from{opacity:.35;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}

@media(min-width:1600px){.cinema-hero{padding-block:128px 128px}.glass-hero{width:820px}.glass-content{padding-block:var(--ds-space-7)}.glass-content h1{font-size:74px}}
@media(max-width:1150px){.wrap{width:calc(100% - 64px)}.glass-hero{width:700px}.cinema-hero{min-height:850px}.glass-content h1{font-size:60px}}
@media(max-width:800px){.wrap{width:calc(100% - 40px)}.site-header{padding:var(--ds-space-4) var(--ds-space-4)}.site-header nav>a:not(.nav-cta){display:none}.nav-cta{min-width:140px;padding:var(--ds-space-3) var(--ds-space-4);font-size:12px}.wordmark{width:55px;height:50px;border-radius:var(--ds-radius-panel);font-size:26px}.cinema-hero{min-height:820px;min-height:max(780px,100svh);padding:128px var(--ds-space-5) 96px}.hero-scene{object-position:65% center}.ghost-title{font-size:19vw;left:0;top:105px;letter-spacing:-.065em;line-height:1.03;filter:blur(3px)}.glass-hero{border-radius:24px;outline-offset:6px;backdrop-filter:blur(14px)}.glass-content{padding:var(--ds-space-6) var(--ds-space-4)}.hero-oracle{width:48px;height:48px;border-radius:14px}.glass-content h1{font-size:clamp(40px,7.6vw,56px);letter-spacing:-2px;line-height:1.08}.make-section{padding-block:64px}.keep-section{padding-block:64px}.cloud-note{font-size:14px}.footer-wordmark{font-size:27vw;padding-block:var(--ds-space-4)}.footer-wordmark>i{padding-right:var(--ds-space-1)}.footer-bottom{font-size:12px;flex-wrap:wrap;gap:var(--ds-space-4)}.footer-bottom>span:nth-child(2){order:3;width:100%;font-size:12px}.footer-bottom>span:last-child{margin-left:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.glass-hero{opacity:1;transform:none}}



/* Motion is a progressive enhancement. Content stays visible without JS. */
.cinema-hero{perspective:none}.glass-hero{transform:none!important;transform-style:flat;will-change:auto}.ghost-title{will-change:transform}.glass-content{position:relative}.glass-content::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:24px;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,20%),color-mix(in srgb,var(--ds-text-primary) 6%,transparent),transparent 60%);opacity:.75}.hero-oracle{transition:transform .4s ease,box-shadow .4s ease}.glass-hero:hover .hero-oracle{transform:translateY(-3px);box-shadow:0 0 45px #ac93ff45}.text-link span,.nav-cta span{transition:transform .25s ease}.text-link:hover span,.nav-cta:hover span{transform:translate(3px,-3px)}.button:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.glass-hero,.ghost-title{will-change:auto}.glass-hero:hover .hero-oracle,.text-link:hover span,.nav-cta:hover span,.button:active{transform:none}.hero-scene{animation:none}}

.horizon-lab h2{font-size:clamp(44px,6vw,84px);font-weight:400;line-height:1.05;letter-spacing:-.04em}.horizon-lab{text-align:center;padding-bottom:96px}.horizon-stage{display:grid;justify-items:center;gap:var(--ds-space-5);padding:var(--ds-space-7) 0 var(--ds-space-4)}.horizon-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ds-space-2)}.horizon-controls button{font:inherit;color:var(--ds-chrome-text-5);background:transparent;border:1px solid var(--ds-border-subtle);border-radius:24px;padding:var(--ds-space-2) var(--ds-space-4);cursor:pointer}.horizon-controls button[aria-pressed="true"]{background:var(--ds-text-primary);color:var(--ds-bg-canvas)}

@media(max-width:800px){.site-header nav a[href="#our-horizon"]{display:none}}
@media(prefers-reduced-motion:reduce){.horizon,.horizon>span{animation:none!important}}

/* Founder-led narrative: the letter is the second screen and the page's spine. */
:root{--ink:var(--ds-text-primary);--accent:var(--ds-accent);--line:var(--ds-border-subtle);--muted:var(--ds-text-muted)}
.site-header .wordmark{width:auto;height:auto;padding:0;border:0;background:none;backdrop-filter:none;border-radius:0;gap:var(--ds-space-3);font-size:27px;letter-spacing:-1.2px}.site-header .brand-point{display:inline-block;font-size:35px;letter-spacing:0;line-height:1}.site-header nav{font-size:14px}.glass-content h1{font-size:clamp(40px,4.6vw,68px);line-height:1.06;letter-spacing:-.04em}.hero-oracle{box-shadow:none}.glass-hero:hover .hero-oracle{box-shadow:none}.cinema-hero{min-height:max(740px,100svh)}
.letter-film{position:relative;padding-top:96px;background:var(--ds-bg-canvas);border-top:1px solid var(--line)}.letter-opening{padding-bottom:64px}.letter-opening h2,.use-cases h2{font-size:clamp(40px,6.8vw,92px);letter-spacing:-.04em;line-height:1.06;font-weight:400}.letter-opening h2 em,.use-cases h2 em{font-family:var(--serif);font-weight:400;color:var(--ds-chrome-text-4)}.letter-opening>p:last-child{font-size:18px;color:var(--ds-chrome-text-4);margin-top:var(--ds-space-5)}.letter-layout{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}.letter-screen{position:relative;top:0;height:74svh;max-height:760px;min-height:390px;border:1px solid #52504b;border-radius:16px;overflow:hidden;isolation:isolate;background:#151616}.letter-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;filter:brightness(.3) saturate(.45);transition:transform 1.5s ease,filter 1.5s ease;z-index:-2}.letter-screen-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#131415f5,transparent 85%)}.letter-screen-top{display:flex;justify-content:space-between;padding:24px;font-size:14px;color:#d1cdc6}.letter-symbol{position:absolute;left:50%;top:40%;margin:-65px 0 0 -65px;width:130px;height:130px;border-width:3px}.letter-screen-caption{position:absolute;left:28px;right:24px;bottom:46px}.letter-screen-caption>span{font-size:12px;letter-spacing:1.3px;color:#c5c0b7}.letter-screen-caption>p{font-family:var(--serif);font-size:clamp(25px,3vw,40px);line-height:1.22;letter-spacing:-.025em;margin-top:16px;white-space:pre-line}.letter-progress{position:absolute;inset:auto 0 0;height:3px;background:color-mix(in srgb,var(--ds-text-primary) 7%,transparent)}.letter-progress>span{display:block;width:20%;height:100%;background:var(--ds-accent);transition:width .7s ease}.letter-film[data-chapter="1"] .letter-progress>span{width:40%}.letter-film[data-chapter="2"] .letter-progress>span{width:60%}.letter-film[data-chapter="3"] .letter-progress>span{width:80%}.letter-film[data-chapter="4"] .letter-progress>span{width:100%}.letter-film[data-chapter="1"] .letter-screen>img{transform:scale(1.08);filter:brightness(.25) saturate(.3)}.letter-film[data-chapter="2"] .letter-screen>img{transform:scale(1.14);filter:brightness(.4) saturate(.7)}.letter-film[data-chapter="3"] .letter-screen>img{transform:scale(1.05);filter:brightness(.35) saturate(.5)}.letter-film[data-chapter="4"] .letter-screen>img{transform:scale(1);filter:brightness(.6) saturate(.8)}.letter-chapter{min-height:0;display:flex;flex-direction:column;justify-content:center;padding:65px 0;scroll-margin-top:80px}.letter-chapter h3{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.04em;line-height:1.12;margin-bottom:28px}.letter-chapter>p:not(.eyebrow){font-size:18px;line-height:1.75;color:#bfc0bc;max-width:480px;margin-bottom:18px}.letter-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--ds-space-2);padding-block:var(--ds-space-5) var(--ds-space-7)}.letter-controls>span{font-size:12px;letter-spacing:1px;margin-right:var(--ds-space-3)}.letter-controls button{min-width:44px;min-height:44px;border:1px solid var(--ds-border-subtle);background:transparent;color:var(--ds-chrome-text-5);border-radius:50%;font-size:14px}.letter-controls button[aria-pressed=true]{background:var(--ds-accent);color:var(--ds-text-on-accent)}.letter-controls #pause-horizon{border-radius:24px;padding:var(--ds-space-2) var(--ds-space-4);margin-left:var(--ds-space-3)}.use-cases{padding-block:128px}.use-cases>.demo-note{text-align:left;margin-top:var(--ds-space-6)}.motion-library{border-top:1px solid var(--line);margin-block:var(--ds-space-6) 64px}.motion-library summary{font-size:18px;cursor:pointer;padding:var(--ds-space-5) 0;list-style:none}.motion-library summary span{float:right}.motion-library summary:focus-visible,select:focus-visible{outline:3px solid var(--ds-focus-ring);outline-offset:5px}.horizon-lab{padding:var(--ds-space-6) 0 var(--ds-space-7)}.horizon-lab h2{font-size:42px}.download-section{display:grid;grid-template-columns:1.2fr 1fr;gap:96px;padding:64px 0 96px;border-top:1px solid var(--line)}.download-section h2{font-size:clamp(38px,5vw,66px);line-height:1.06;letter-spacing:-.04em;margin:var(--ds-space-5) 0}.download-section p{color:var(--ds-chrome-text-4)}.download-choice{display:flex;flex-direction:column;align-items:stretch;gap:var(--ds-space-4);align-self:center}.download-choice label{font-size:14px}.download-choice select{background:var(--ds-bg-surface);border:1px solid var(--ds-border-strong);color:var(--ds-text-primary);padding:var(--ds-space-4);font:inherit;border-radius:var(--ds-radius-control);max-width:100%}.download-choice .button{border:0}.download-choice .button:disabled{opacity:.55;cursor:not-allowed}.download-choice #download-status{font-size:14px;line-height:1.5}.download-choice .download-help{font-size:12px}.footer-wordmark>span{font-size:1em;letter-spacing:inherit}.footer-wordmark{font-size:clamp(100px,21vw,280px)}.footer-wordmark>i{font-size:.65em;color:var(--ds-accent)}.demo-note,.cloud-note{color:var(--ds-chrome-text-4)}.horizon.hero-oracle{border-radius:50%}
html[data-horizon-paused=true] .horizon,html[data-horizon-paused=true] .horizon>span{animation-play-state:paused!important}
@media(max-width:900px){.letter-layout{gap:var(--ds-space-6)}.letter-screen-caption{left:20px;right:20px}.letter-chapter h3{font-size:34px}.download-section{gap:var(--ds-space-6)}}
@media(max-width:700px){.site-header .wordmark{font-size:23px;width:auto}.site-header .brand-point{font-size:30px}.glass-content h1{font-size:clamp(40px,8vw,52px)}.cinema-hero{min-height:max(740px,100svh)}.letter-film{padding-top:64px}.letter-opening{padding-bottom:var(--ds-space-6)}.letter-layout{grid-template-columns:1fr;gap:var(--ds-space-4)}.letter-screen{position:relative;top:0;min-height:340px;height:390px;max-height:none}.letter-chapter{min-height:0;padding:48px 0;border-bottom:1px solid var(--line)}.letter-chapter h3{font-size:35px}.letter-chapter>p:not(.eyebrow){max-width:none}.letter-opening h2,.use-cases h2{font-size:42px}.letter-controls{padding-top:var(--ds-space-6)}.letter-controls>span{width:100%;text-align:center;margin-bottom:var(--ds-space-2)}.use-cases{padding-block:64px}.download-section{grid-template-columns:1fr;padding-block:64px}.horizon-lab h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.letter-screen{position:relative;top:0}.letter-chapter{min-height:0;padding:40px 0}.letter-screen>img{transition:none;transform:none!important}.letter-progress>span{transition:none}.horizon,.horizon>span{animation:none!important}}

@media(min-width:701px) and (prefers-reduced-motion:no-preference){.letter-film[data-enhanced=true] .letter-screen{position:sticky;top:12svh}.letter-film[data-enhanced=true] .letter-chapter{min-height:82svh}}

/* Minimal editorial pass: one message per component. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.glass-content{padding:var(--ds-space-7) var(--ds-space-6)}.glass-content h1{margin:var(--ds-space-5) 0 var(--ds-space-6)}.glass-hero{outline:none;border-color:color-mix(in srgb,var(--ds-text-primary) 15%,transparent);border-radius:24px}.ghost-title{font-family:Arial,sans-serif;font-size:80vw;line-height:1;top:-25vw;left:0;color:#efebe70c;filter:blur(7px)}.glass-content::before{opacity:.35}.make-section{padding-block:96px}.keep-section{padding-block:96px}.letter-chapter h3{margin-bottom:24px}.letter-screen-caption>p{margin-top:0}.download-help summary{cursor:pointer;min-height:32px;display:flex;align-items:center}.download-help p{margin-top:var(--ds-space-2)}.download-section{padding-block:64px}.footer-bottom{border-top:0}.footer-wordmark{line-height:1.15}.horizon-lab{padding-top:var(--ds-space-2)}
@media(max-width:700px){.glass-content{padding:var(--ds-space-6) var(--ds-space-4)}.make-section,.keep-section{padding-block:64px}.letter-chapter{padding-block:40px}.download-section{padding-block:var(--ds-space-7)}}

/* Cinematic pacing without an intro gate or scroll capture. */
.hero-scene{animation:none}/* An alpha is a USE of a colour, not a role, so there is no token for it: a token per alpha is
   how a palette grows to three hundred entries. `color-mix` keeps the value referenced rather
   than restated; 19% and 3% are 0x30 and 0x08 of 255, and both round-trip exactly. */
.glass-hero{background:linear-gradient(140deg,color-mix(in srgb,var(--ds-bg-canvas) 19%,transparent),color-mix(in srgb,var(--ds-bg-canvas) 3%,transparent));border-color:transparent;box-shadow:none;backdrop-filter:blur(5px)}.glass-content::before{display:none}.hero-shade{background:linear-gradient(180deg,#090a0b75,transparent 45%,var(--ds-bg-canvas) 100%)}.hero-scene{filter:brightness(.4) saturate(.65)}.cinema-hero::after{content:"";position:absolute;inset:auto 0 0;height:18vh;background:linear-gradient(transparent,var(--ds-bg-canvas));pointer-events:none}.glass-content h1{font-size:clamp(42px,5.3vw,78px)}.letter-film{border-top:0;background:linear-gradient(var(--ds-bg-canvas),var(--ds-bg-canvas) 25%,var(--ds-bg-canvas))}.letter-screen{border:0;border-radius:2px;box-shadow:0 30px 80px #0004}.letter-screen::after{content:"";position:absolute;inset:0;pointer-events:none}.letter-screen>img{transition:transform 1.8s cubic-bezier(.2,.7,.2,1),filter 1.5s ease}.letter-screen-top{padding-top:35px}.letter-screen-caption{bottom:50px}.letter-progress{bottom:21px;z-index:1}.use-cases,.make-section,.keep-section,.download-section{position:relative}.keep-section{border:0;background:linear-gradient(var(--ds-bg-canvas),var(--ds-bg-surface) 30%,var(--ds-bg-surface) 65%,var(--ds-bg-canvas))}.use-cases{padding-block:128px}.make-section{padding-bottom:128px}.download-section{border-top:0;padding-block:128px}.site-footer{border-top:0}.letter-chapter h3{transform-origin:left bottom}
@media(max-width:700px){.glass-content h1{font-size:clamp(40px,8.5vw,52px)}.glass-hero{backdrop-filter:none}.letter-screen{height:360px;min-height:0}.use-cases{padding-block:64px}.make-section{padding-bottom:64px}.download-section{padding-block:64px}}
@media(prefers-reduced-motion:reduce){.hero-scene{clip-path:none;opacity:1;transform:none}.letter-screen>img{transition:none}}

/* Horizon cinema: a quiet opening, dissolving shots, and a sharp final frame. */
.cinema-dimmer{position:fixed;inset:0;z-index:20;background:#030404;opacity:0;pointer-events:none}
.site-header{position:fixed;top:18px;left:50%;right:auto;transform:translateX(-50%);z-index:40;width:min(920px,calc(100% - 40px));padding:var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) var(--ds-space-5);border:1px solid color-mix(in srgb,var(--ds-text-primary) 19%,transparent);border-radius:var(--ds-radius-pill);background:color-mix(in srgb,var(--ds-bg-surface) 74%,transparent);backdrop-filter:blur(24px);box-shadow:0 12px 40px #0003,inset 0 1px #ffffff12}
.site-header nav{gap:var(--ds-space-5)}.site-header nav>a{transition:color .2s ease}.site-header nav>a:hover{color:var(--ds-text-primary)}.site-header .nav-cta{background:var(--ds-accent);color:var(--ds-text-on-accent);border:0;border-radius:var(--ds-radius-pill);padding:var(--ds-space-3) var(--ds-space-4)}
.hero-scene{filter:brightness(.52) saturate(.65)}
.glass-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--ds-text-primary) 14%,transparent),color-mix(in srgb,var(--ds-bg-surface) 33%,transparent) 60%,color-mix(in srgb,var(--ds-text-primary) 5%,transparent));border:1px solid color-mix(in srgb,var(--ds-text-primary) 40%,transparent);border-radius:24px;backdrop-filter:blur(24px) saturate(1.25);-webkit-backdrop-filter:blur(24px) saturate(1.25);box-shadow:0 36px 100px #0007,inset 0 1px 1px #ffffff60,inset 0 -1px 1px #ffffff16;outline:1px solid color-mix(in srgb,var(--ds-text-primary) 7%,transparent);outline-offset:8px}
.letter-film{padding-top:0}.letter-opening{position:relative;z-index:24;min-height:100svh;display:flex;flex-direction:column;justify-content:center;text-align:center;padding-block:96px;pointer-events:none}.letter-opening h2{font-size:clamp(44px,7.5vw,108px)}
.letter-photos{position:absolute;inset:0;z-index:-2;overflow:hidden}.letter-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);filter:brightness(.65) saturate(.75);transition:opacity 1s ease,transform 6s cubic-bezier(.2,.6,.2,1)}.letter-photos img[data-active=true]{opacity:1;transform:scale(1)}.letter-screen-shade{background:linear-gradient(0deg,#101112f5,transparent 85%)}.letter-symbol{opacity:0;transition:opacity .8s ease}.letter-symbol[data-active=true]{opacity:1}.letter-symbol[data-active=false],.letter-symbol[data-active=false]>span{animation-play-state:paused!important}
.ownership-pair{padding-block:128px}.ownership-pair>h2{text-align:center;font-size:clamp(38px,5vw,70px);font-weight:400;letter-spacing:-.04em;margin-bottom:64px}.ownership-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ds-border-subtle);border-bottom:1px solid var(--ds-border-subtle)}.ownership-pair-grid>a{display:flex;flex-direction:column;align-items:flex-start;padding:var(--ds-space-7);transition:background .3s ease}.ownership-pair-grid>a+a{border-left:1px solid var(--ds-border-subtle)}.ownership-pair-grid>a:hover{background:color-mix(in srgb,var(--ds-text-primary) 2%,transparent)}.ownership-pair h3{font-size:clamp(32px,3.5vw,48px);letter-spacing:-.04em;font-weight:400;margin-bottom:var(--ds-space-4)}.ownership-pair p{font-size:16px;color:var(--ds-chrome-text-4);line-height:1.6}
.site-footer{background:var(--ds-accent);color:var(--ds-text-on-accent);padding:var(--ds-space-7) 0 var(--ds-space-5)}.site-footer .footer-wordmark,.site-footer .footer-wordmark i{color:var(--ds-text-on-accent)}.site-footer .footer-bottom{border-top:1px solid color-mix(in srgb,var(--ds-text-on-accent) 40%,transparent);padding-top:var(--ds-space-5);color:var(--ds-text-on-accent)}.site-footer a{color:var(--ds-text-on-accent)}.site-footer a:focus-visible{outline-color:var(--ds-focus-ring)}
@media(max-width:700px){.site-header{top:12px;width:calc(100% - 28px);padding:var(--ds-space-2) var(--ds-space-3) var(--ds-space-2) var(--ds-space-4)}.site-header nav{gap:var(--ds-space-3)}.site-header .nav-cta{padding:var(--ds-space-2) var(--ds-space-3)}.glass-hero{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.letter-opening{min-height:90svh;padding-block:64px}.ownership-pair{padding-block:64px}.ownership-pair>h2{margin-bottom:var(--ds-space-6)}.ownership-pair-grid{grid-template-columns:1fr}.ownership-pair-grid>a{padding:var(--ds-space-6) var(--ds-space-4)}.ownership-pair-grid>a+a{border-left:0;border-top:1px solid var(--ds-border-subtle)}.site-footer{padding-top:var(--ds-space-6)}}
@media(prefers-reduced-motion:reduce){.cinema-dimmer{display:none}.letter-opening{min-height:0;padding-block:64px}.letter-photos img,.letter-symbol{transition:none;transform:none}.glass-hero{transform:none!important;opacity:1!important}}

.site-header nav>a.nav-cta:hover{background:var(--ds-text-primary);color:var(--ds-bg-canvas)}.skip-link{z-index:50}

/* A steady pane in a moving pool of light. Only illumination responds to the pointer. */
.glass-hero{background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,30%),color-mix(in srgb,var(--ds-text-primary) 17%,transparent),transparent 65%),linear-gradient(135deg,color-mix(in srgb,var(--ds-text-primary) 9%,transparent),color-mix(in srgb,var(--ds-bg-surface) 40%,transparent) 65%,color-mix(in srgb,var(--ds-text-primary) 5%,transparent));box-shadow:var(--shadow-x,0px) var(--shadow-y,42px) 95px 8px #0009,inset 0 1px 1px #fff5,inset 0 -1px 1px #ffffff12;transition:box-shadow .35s ease-out;border-color:color-mix(in srgb,var(--ds-text-primary) 26%,transparent)}
.glass-content::before{display:block;opacity:.65;background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,30%),color-mix(in srgb,var(--ds-text-primary) 27%,transparent),transparent 65%);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:1px;border-radius:24px}
.glass-hero:hover .hero-oracle{transform:none;box-shadow:none}.ghost-title{color:#efebe714;filter:blur(9px);text-shadow:0 0 70px #efdfc51a}
@media(prefers-reduced-motion:reduce){.glass-hero{transition:none}}

/* The opening holds its frame as the next title scrolls into the light. */
@media(prefers-reduced-motion:no-preference){
.hero-sequence{--hero-height:max(740px,100svh);height:calc(var(--hero-height) * 2);position:relative}
.hero-sequence .cinema-hero{position:sticky;top:0;height:var(--hero-height);min-height:var(--hero-height)}
.hero-sequence+.letter-film{margin-top:calc(-1 * max(740px,100svh));background:linear-gradient(transparent 0,var(--ds-bg-canvas) 100svh,var(--ds-bg-canvas) 40%,var(--ds-bg-canvas))}
}

/* Pointer light is anchored to the pane; the pane has no tilt or translation. */
.glass-hero,.glass-hero:hover{transform:none!important;rotate:none;translate:none;scale:none}
.glass-hero{background:radial-gradient(circle 210px at var(--shine-x,50%) var(--shine-y,50%),#fff1d957 0%,color-mix(in srgb,var(--ds-text-primary) 15%,transparent) 35%,transparent 100%),linear-gradient(135deg,color-mix(in srgb,var(--ds-text-primary) 9%,transparent),color-mix(in srgb,var(--ds-bg-surface) 40%,transparent) 65%,color-mix(in srgb,var(--ds-text-primary) 5%,transparent))}
.glass-content::before{background:radial-gradient(circle 260px at var(--shine-x,50%) var(--shine-y,50%),#fffbdbe6,transparent 100%);opacity:.85}

/* Open navigation becomes a compact capsule as the first scene disappears. */
.site-header{transition:width .65s cubic-bezier(.22,1,.36,1),background .5s ease,border-color .5s ease,box-shadow .5s ease,backdrop-filter .5s ease}
.site-header[data-compact=false]{width:min(1400px,calc(100% - 64px));background:color-mix(in srgb,var(--ds-bg-canvas) 45%,transparent);border-color:transparent;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:none}
.site-header[data-compact=true]{-webkit-backdrop-filter:blur(24px)}
@media(max-width:700px){.site-header[data-compact=false]{width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}}

/* One projected horizon: its source glyph is invisible, so there is no doubled mark. */
.ghost-title{color:transparent;text-shadow:var(--projection-x,0px) var(--projection-y,0px) 12px #efebe735;filter:blur(3px);transition:text-shadow .35s ease-out}
@media(prefers-reduced-motion:reduce){.ghost-title{transition:none}}

/* Personal worlds: layouts and logic, not just a coat of paint. */
.ownership-pair h3{font-size:clamp(42px,5.2vw,76px);line-height:1.02;letter-spacing:-.055em}
.section-lede{font-size:clamp(18px,2vw,24px);line-height:1.55;color:var(--ds-chrome-text-4);margin-top:var(--ds-space-5);margin-bottom:var(--ds-space-7);padding-bottom:var(--ds-space-7)}
.showroom-heading{text-align:center;margin-bottom:var(--ds-space-7)}.showroom-heading h2,.base-heading h2{font-size:clamp(48px,7vw,96px);line-height:1.03;letter-spacing:-.04em}.showroom-controls{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--ds-space-4);margin-bottom:var(--ds-space-5)}.interface-tabs,.device-tabs{display:flex;gap:6px;flex-wrap:wrap}.showroom-controls button{background:transparent;border:1px solid transparent;border-radius:var(--ds-radius-pill);min-height:44px;color:var(--ds-chrome-text-4);padding:var(--ds-space-2) var(--ds-space-4);font-size:14px}.showroom-controls button[aria-pressed=true]{color:var(--ds-text-on-accent);background:var(--ds-accent)}.device-tabs button[aria-pressed=true]{background:#ffffff0d;border-color:#757972;color:#f4f2ed}.device-stage{min-height:570px;display:flex;justify-content:center;align-items:flex-start;padding:20px 0 30px;background:radial-gradient(ellipse at center,#87947812,transparent 68%)}.device-shell{width:100%;max-width:1100px;border:1px solid #666b6155;border-radius:20px;background:#151916;overflow:hidden;box-shadow:0 25px 80px #0005;transition:max-width .65s cubic-bezier(.22,1,.36,1),border-radius .65s ease}.device-top{display:flex;justify-content:space-between;align-items:center;padding:17px 24px;border-bottom:1px solid #ffffff12;color:#aaa;font-size:12px}.device-location{opacity:0}.showroom[data-device=browser] .device-location{opacity:1}.showroom[data-device=browser] .device-shell{max-width:950px;border-radius:10px}.showroom[data-device=mobile] .device-shell{max-width:360px;border-radius:34px;border-width:5px}.showroom[data-device=mobile] .device-top{padding:18px 20px}.interface-panel{padding:36px;min-height:440px}.interface-panel[hidden]{display:none!important}.workspace-heading{display:flex;justify-content:space-between;gap:var(--ds-space-4);align-items:center;margin-bottom:var(--ds-space-6)}.workspace-heading h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.045em;margin-top:var(--ds-space-3)}.sample-overline{font-size:10px;letter-spacing:1.5px;color:#a6b19f}.sample-pill{border:1px solid #87967c44;border-radius:20px;padding:8px 12px;font-size:12px;color:#c2ccba;white-space:nowrap}.work-grid{display:grid;grid-template-columns:1.1fr 1.25fr .85fr;gap:var(--ds-space-3)}.sample-block{padding:24px;background:#ffffff06;border:1px solid #ffffff12;border-radius:12px}.sample-block h4{font-size:24px;line-height:1.15;letter-spacing:-.03em;font-weight:400;margin:18px 0}.sample-block p{font-size:13px;color:#bbc0b5;line-height:1.6}.focus-block{background:#b7c6a5;color:#1c261b}.focus-block .sample-overline,.focus-block p{color:#3c5136}.focus-bars{display:flex;gap:6px;align-items:flex-end;height:45px;margin-top:22px}.focus-bars i{display:block;width:14px;height:60%;background:#52644a}.focus-bars i:nth-child(2n){height:90%}.focus-bars i:nth-child(3n){height:40%}.sample-list{list-style:none;padding:0;margin:14px 0}.sample-list li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #ffffff15;padding:12px 0;font-size:12px;color:#b9c0b3}.sample-list b{font-weight:400;color:#e1e9d8}.sample-block button,.companion-panel>button{border:1px solid #ffffff30;background:#ffffff08;border-radius:30px;padding:10px 15px;color:inherit;min-height:44px;font-size:12px}.sample-result{margin-top:12px}.rule-block{display:flex;flex-direction:column;justify-content:space-between;gap:20px}.rule-block p{font-size:19px}.rule-block strong{color:#e4e8df;font-weight:400}.sample-rule-line{width:45px;height:2px;background:#bec9b2}.sample-prompt{font-family:var(--serif);font-size:18px;line-height:1.5;color:#bfc7b7;margin:28px 0 0}.family-panel{background:#e7decf;color:#302d27}.family-panel .sample-overline{color:#76664f}.family-panel .sample-block{background:#f5eee0;border-color:#aa927933}.family-panel .sample-list li,.family-panel .sample-list b,.family-panel .sample-block p{color:#61523d}.family-panel .sample-list li{border-color:#c4b49c66}.family-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ds-space-4)}.family-panel button{border-color:#a58a6855;color:#4b3822;background:#e4d1ad}.family-panel .sample-prompt{color:#76664f}.sample-sun{font-size:60px;color:#af794a}.companion-panel{text-align:center;background:radial-gradient(ellipse at top,#8e587061,transparent 70%),#231c26;color:#efdce7}.companion-orbit{height:135px;display:flex;align-items:center;justify-content:center}.companion-orbit>span{font-size:105px;line-height:1;color:#e7b6c7;text-shadow:0 0 60px #d88aa155}.companion-panel h3{font-family:var(--serif);font-size:38px;margin:16px 0}.companion-panel>p:not(.sample-prompt){font-size:15px;line-height:1.6;color:#cdbaca;margin:15px auto 24px;max-width:440px}.companion-panel .sample-prompt{color:#bfa4b8;font-size:16px}.minimal-panel{text-align:center;background:#101112;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:480px}.minimal-oracle{border:0;background:none;color:var(--ds-accent);font-size:82px;line-height:1;padding:18px;cursor:pointer;transition:filter .25s ease}.minimal-oracle:hover{filter:drop-shadow(0 0 20px #fff5)}.minimal-panel h3{font-size:26px;letter-spacing:-.04em;margin:28px 0 14px}.minimal-panel>p{font-size:13px;color:#9c9f9b}.minimal-panel .sample-prompt{margin-top:36px}.showroom[data-device=mobile] .interface-panel{padding:24px 18px}.showroom[data-device=mobile] .work-grid,.showroom[data-device=mobile] .family-grid{grid-template-columns:1fr}.showroom[data-device=mobile] .sample-pill{display:none}.showroom[data-device=mobile] .workspace-heading h3{font-size:28px}.showroom[data-device=mobile] .companion-panel h3{font-size:30px}
.block-explainer{margin-top:96px;display:grid;grid-template-columns:1fr 1fr;gap:96px}.block-intro h3{font-size:clamp(35px,4.2vw,58px);letter-spacing:-.05em;line-height:1.08;margin-bottom:var(--ds-space-5)}.block-intro>p:last-child{font-size:17px;line-height:1.7;color:var(--ds-chrome-text-4);max-width:440px}.block-steps article{border-top:1px solid var(--ds-border-subtle);padding:var(--ds-space-5) 0 var(--ds-space-6)}.block-steps article>span{color:var(--ds-chrome-text-3);font-size:11px;letter-spacing:1px}.block-steps h4{font-size:24px;font-weight:400;margin:var(--ds-space-3) 0}.block-steps p{font-size:15px;line-height:1.65;color:var(--ds-chrome-text-4)}.technology-note{border-top:1px solid color-mix(in srgb,var(--ds-text-primary) 9%,transparent);margin-top:var(--ds-space-6);padding-top:var(--ds-space-4);font-size:13px;color:var(--ds-chrome-text-4)}.technology-note summary{cursor:pointer;min-height:44px;line-height:1.6}.technology-note p{max-width:800px;line-height:1.7;padding:var(--ds-space-3) 0 var(--ds-space-4)}
.base-heading{text-align:center}.base-heading h2 em{font-family:var(--serif);font-weight:400;color:var(--ds-chrome-text-4)}.base-diagram{max-width:760px;margin:64px auto}.base-machine{width:270px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:13px;background:#232923;border:1px solid #82947766;border-radius:16px;padding:28px;box-shadow:0 20px 60px #0003}.base-mark{font-size:56px;line-height:1;color:#c5d4b5}.base-machine strong{font-size:23px;font-weight:400}.base-machine>span:not(.base-mark),.base-machine small{font-size:12px;color:#b5c1aa}.base-branches{display:flex;width:68%;height:80px;margin:auto;position:relative;border-top:1px solid #647259;top:30px}.base-branches::before{content:"";position:absolute;top:-30px;left:50%;height:30px;border-left:1px solid #647259}.base-branches span{width:50%;height:50px;border-left:1px solid #647259}.base-branches span:last-child{width:0}.go-clients{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center}.go-clients>div{display:flex;flex-direction:column;align-items:center;gap:17px}.go-clients strong{font-size:14px;font-weight:400;color:#cbd5c1}.client-outline{display:flex;align-items:center;justify-content:center;width:115px;height:76px;border:1px solid #829477;border-radius:8px;font-size:27px;color:#b3c6a0;background:#232a20}.mobile-outline{width:44px;border-radius:var(--ds-radius-control)}.browser-outline{border-top-width:9px}.base-facts{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:950px;margin:64px auto var(--ds-space-6)}.base-facts h3{font-size:30px;letter-spacing:-.035em;line-height:1.15;margin-bottom:var(--ds-space-5)}.base-facts p{font-size:16px;color:var(--ds-chrome-text-4);line-height:1.7}.keep-section .cloud-note{text-align:center;max-width:780px;margin:var(--ds-space-5) auto}.keep-section .technology-note{max-width:950px;margin-inline:auto}
.life-scenes{display:grid;grid-template-columns:repeat(6,1fr);gap:42px 24px;margin-top:60px}.life-scenes article{grid-column:span 2;border-top:1px solid #51554d;padding-top:25px}.life-scenes article:nth-child(n+4){grid-column:span 3}.scene-category{font-size:11px;letter-spacing:1.2px;color:#a0ac96}.life-scenes h3{font-size:30px;letter-spacing:-.035em;line-height:1.15;margin:24px 0}.life-scenes blockquote{font-family:var(--serif);font-size:20px;line-height:1.5;color:#b9c1b1;margin:0 0 25px}.scene-block{background:#ffffff04;border:1px solid #ffffff12;border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:16px}.scene-block>span{font-size:12px;color:#a2b293}.scene-block strong{font-size:16px;line-height:1.5;font-weight:400;color:#e3e8dc}.scene-block small{font-size:12px;color:#b0b5aa;line-height:1.5}.no-app-vision{text-align:center;margin-top:128px}.no-app-vision h3{font-size:clamp(38px,6vw,80px);letter-spacing:-.055em;line-height:1.1;margin-bottom:var(--ds-space-6)}.no-app-vision h3 em{font-family:var(--serif);font-weight:400;color:var(--ds-chrome-text-4)}.no-app-vision>p:last-child{color:var(--ds-chrome-text-4);font-size:17px;line-height:1.7}
@media(max-width:900px){.work-grid{grid-template-columns:1fr 1fr}.rule-block{grid-column:1/-1}.block-explainer{gap:var(--ds-space-6)}.base-facts{gap:var(--ds-space-6)}.life-scenes article,.life-scenes article:nth-child(n+4){grid-column:span 3}}
@media(max-width:700px){.ownership-pair h3{font-size:48px}.interface-tabs{gap:3px}.showroom-controls button{padding:var(--ds-space-2) var(--ds-space-3);font-size:12px}.showroom-controls{gap:var(--ds-space-3)}.interface-panel{padding:24px 18px}.device-stage{min-height:0}.device-top{padding:15px}.work-grid,.family-grid{grid-template-columns:1fr}.rule-block{grid-column:auto}.workspace-heading h3{font-size:28px}.sample-pill{display:none}.block-explainer{grid-template-columns:1fr;gap:var(--ds-space-6);margin-top:64px}.base-machine{width:220px}.base-diagram{margin-block:var(--ds-space-7)}.client-outline{width:75px;height:60px}.mobile-outline{width:36px}.go-clients{gap:10px}.go-clients strong{font-size:11px}.base-facts{grid-template-columns:1fr;margin-top:var(--ds-space-7)}.life-scenes{grid-template-columns:1fr;gap:36px}.life-scenes article,.life-scenes article:nth-child(n+4){grid-column:auto}.no-app-vision{margin-top:96px}.companion-panel h3{font-size:30px}.section-lede br{display:none}}
@media(prefers-reduced-motion:reduce){.device-shell,.minimal-oracle{transition:none}}

@keyframes interface-enter{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.interface-panel:not([hidden]){animation:interface-enter .5s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.interface-panel:not([hidden]){animation:none}}

/* Editorial title, edge light, and a single gently tilting projection. */
.glass-content{padding:var(--ds-space-7) var(--ds-space-6)}.glass-content h1{font-family:var(--display);font-weight:500;font-size:clamp(42px,5.1vw,74px);letter-spacing:-.04em;line-height:1.08;margin:var(--ds-space-5) 0 var(--ds-space-5);text-wrap:balance}.glass-content h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.04em;color:var(--ds-text-primary)}.hero-subtitle{max-width:390px;margin:0 auto var(--ds-space-5);font-size:16px;line-height:1.55;color:var(--ds-chrome-text-5);text-wrap:balance}
.glass-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--ds-text-primary) 6%,transparent),color-mix(in srgb,var(--ds-bg-surface) 31%,transparent));box-shadow:0 38px 95px #0007;border-color:color-mix(in srgb,var(--ds-text-primary) 14%,transparent)}.glass-content::before{background:radial-gradient(circle 280px at var(--shine-x,50%) var(--shine-y,50%),#fff4c9,transparent 100%);opacity:.9;padding:1px}.ghost-title{transform:rotate(var(--projection-angle,0deg));transform-origin:50% 55%;transition:text-shadow .45s ease-out,transform .7s cubic-bezier(.22,1,.36,1)}
.letter-ending{min-height:90svh;display:flex;align-items:center;justify-content:center;text-align:center;padding-block:96px}.letter-ending h2{font-size:clamp(46px,7.5vw,108px);line-height:1.08;letter-spacing:-.04em}.letter-ending h2 em{font-family:var(--serif);font-weight:400;color:var(--ds-chrome-text-4)}.letter-opening h2{letter-spacing:-.04em}.github-link{white-space:nowrap}.site-footer .footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:700px){.glass-content{padding:var(--ds-space-6) var(--ds-space-5)}.glass-content h1{font-size:clamp(40px,8.3vw,52px)}.hero-subtitle{font-size:14px}.letter-ending{min-height:75svh;padding-block:64px}}
@media(prefers-reduced-motion:reduce){.ghost-title{transform:none;transition:none}.letter-ending{min-height:0}}

@media(max-width:800px){.site-header nav>.github-link{display:inline-flex;font-size:12px}.site-header{gap:var(--ds-space-3)}.site-header .nav-cta{min-width:0;padding:var(--ds-space-2) var(--ds-space-3)}}



.site-header .nav-cta{justify-content:center;align-items:center;text-align:center;line-height:1.25;min-height:44px;gap:0}
[data-title-line]{display:block;will-change:transform,opacity}.letter-opening{opacity:1!important}.letter-ending [data-title-line]{margin:0}
.showroom[data-device=mobile] .device-shell{height:620px;max-height:75svh;display:flex;flex-direction:column}.showroom[data-device=mobile] .device-top{flex-shrink:0}.showroom[data-device=mobile] .interface-panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a7ad9c transparent}.showroom[data-device=mobile] .minimal-panel{justify-content:flex-start}
.story-choices{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.story-choices button{border:1px solid #ffffff30;background:#ffffff08;border-radius:30px;padding:12px 18px;color:inherit;min-height:44px}.minimal-compose{display:flex;gap:8px;max-width:420px;width:100%;margin:20px auto}.minimal-compose input{min-width:0;width:100%;background:#ffffff06;border:1px solid #ffffff30;border-radius:12px;color:#eee;padding:12px;font:inherit;font-size:13px}.minimal-compose button{border:1px solid #ffffff35;background:var(--ds-accent);color:var(--ds-text-on-accent);border-radius:12px;padding:10px 16px}.focus-block button{border-color:#52644a66;background:#ffffff30}.sample-block button{margin-top:12px}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ds-space-6);margin:64px 0 var(--ds-space-6)}.trust-grid article{border-top:1px solid #84977455;padding-top:var(--ds-space-5)}.trust-grid h3{font-size:27px;letter-spacing:-.035em;line-height:1.15;margin-bottom:var(--ds-space-4)}.trust-grid p{font-size:15px;color:var(--ds-chrome-text-4);line-height:1.7}.trust-grid a{margin-top:var(--ds-space-4)}
.day-timeline{display:block;max-width:940px;margin:70px auto 0;border-left:1px solid #66715c;padding-left:60px}.day-timeline article,.day-timeline article:nth-child(n+4){position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:50px;border-top:0;padding:0 0 70px}.day-timeline article::before{content:"";position:absolute;left:-66px;top:8px;width:11px;height:11px;background:#d4c5aa;border:3px solid var(--ds-bg-canvas);border-radius:50%}.day-timeline .scene-time{font-size:28px;letter-spacing:-1px;color:#d4c5aa}.day-timeline .scene-category{grid-column:1;margin-top:12px}.day-timeline h3{grid-column:1;margin-top:20px}.day-timeline blockquote{grid-column:1}.day-timeline .scene-block{grid-column:2;grid-row:1/5;align-self:center}.day-timeline article:last-child{padding-bottom:0}
.footer-invitation{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-space-6);padding:var(--ds-space-6) 0 var(--ds-space-7);border-bottom:1px solid color-mix(in srgb,var(--ds-text-on-accent) 20%,transparent)}.footer-invitation p{font-family:var(--serif);font-size:clamp(32px,4vw,52px);letter-spacing:-.035em}.footer-invitation>div>span{display:block;font-size:14px;color:var(--ds-text-on-accent);margin-top:var(--ds-space-3)}.footer-star{background:var(--ds-bg-canvas);color:var(--ds-text-primary)!important;border-radius:var(--ds-radius-pill);padding:var(--ds-space-4) var(--ds-space-5);display:inline-flex;gap:var(--ds-space-6);white-space:nowrap}.site-footer .footer-wordmark{padding-block:var(--ds-space-5)}.footer-bottom nav{display:flex;gap:var(--ds-space-5)}.site-footer .footer-bottom{align-items:center;flex-wrap:wrap}.site-footer .footer-bottom>a[href^="https"]{display:none}
@media(max-width:700px){.trust-grid{grid-template-columns:1fr;gap:var(--ds-space-6)}.day-timeline{padding-left:28px}.day-timeline article,.day-timeline article:nth-child(n+4){display:block;padding-bottom:50px}.day-timeline article::before{left:-34px}.day-timeline .scene-category{display:block}.day-timeline .scene-block{margin-top:24px}.footer-invitation{align-items:flex-start;flex-direction:column;padding-block:var(--ds-space-4) var(--ds-space-6)}.footer-bottom nav{gap:var(--ds-space-4);flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){[data-title-line]{will-change:auto;opacity:1!important;transform:none!important}}


.letter-opening h2,.letter-ending h2{overflow:visible}
.site-footer{padding-bottom:0}.site-footer .footer-bottom{padding-block:var(--ds-space-5) var(--ds-space-6)}.site-footer .footer-wordmark{padding:0;margin:0 0 -.12em;line-height:1;flex-shrink:0}.site-footer .footer-wordmark i{align-self:center}.footer-inner{display:flex;flex-direction:column}
@media(max-width:700px){.site-footer .footer-wordmark{padding:0;margin-bottom:-.12em}.site-footer .footer-bottom{padding-bottom:var(--ds-space-6)}}

/* Quiet ownership panels, portrait tablet, and a scroll-paced day. */
.ownership-pair>h2.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ownership-pair-grid>a{padding:64px var(--ds-space-7);justify-content:center;gap:var(--ds-space-4)}
.ownership-pair-grid h3,.ownership-pair-grid p{margin:0}
.ownership-pair-grid p{max-width:34ch}
.hero-subtitle{max-width:54ch;margin-inline:auto;text-wrap:pretty}
.showroom[data-device=tablet] .device-shell{max-width:720px;height:760px;max-height:85svh;border-width:6px;border-radius:30px;display:flex;flex-direction:column}
.showroom[data-device=tablet] .interface-panel{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
.showroom[data-device=tablet] .device-top{flex-shrink:0}
.showroom[data-device=tablet] .work-grid{grid-template-columns:1fr 1fr}
.showroom[data-device=tablet] .rule-block{grid-column:1/-1}
.day-timeline{position:relative;border-left-color:#ffffff1a}
.day-timeline::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:linear-gradient(var(--ds-illustration-emphasis-peach),var(--ds-illustration-emphasis-rose),var(--ds-illustration-emphasis-lilac));transform:scaleY(var(--day-progress,1));transform-origin:top}
.day-timeline article::before{box-shadow:0 0 0 calc(var(--moment,0) * 5px) #f1a5b612}
@media(max-width:700px){.ownership-pair-grid>a{padding:var(--ds-space-7) var(--ds-space-5)}.showroom[data-device=tablet] .work-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.day-timeline::before{transform:none}.day-timeline article::before{box-shadow:none}}

/* The closing letters occupy the whole final edge, independent of content gutters. */
.site-footer .footer-wordmark{display:block;width:100%;padding:0;margin:0;line-height:0;overflow:hidden}
.footer-wordmark svg{display:block;width:100%;height:auto;fill:currentColor;overflow:hidden}

/* Native select remains the no-script fallback. */
.platform-picker[hidden],#download-platform[hidden]{display:none}
.platform-picker{position:relative;width:100%;z-index:2;margin-block:var(--ds-space-3) var(--ds-space-4)}
.platform-picker summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-5);list-style:none;cursor:pointer;padding:var(--ds-space-4) var(--ds-space-4);border:1px solid color-mix(in srgb,var(--ds-text-primary) 19%,transparent);border-radius:var(--ds-radius-panel);background:var(--ds-bg-surface);color:var(--ds-text-primary);font-size:15px}
.platform-picker summary::-webkit-details-marker{display:none}
.platform-picker summary:focus-visible{outline:2px solid #c4b2ed;outline-offset:4px}
.platform-chevron{color:var(--ds-chrome-text-4);transition:transform .2s}
.platform-picker[open] .platform-chevron{transform:rotate(180deg)}
.platform-picker[open] summary{border-color:#c4b2ed88}
.platform-options{position:absolute;top:calc(100% + 8px);left:0;right:0;padding:var(--ds-space-1);background:var(--ds-bg-surface);border:1px solid color-mix(in srgb,var(--ds-text-primary) 15%,transparent);border-radius:24px;box-shadow:0 20px 55px #0008;overflow:hidden}
.platform-options button{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-4);width:100%;min-height:54px;padding:var(--ds-space-3) var(--ds-space-4);border:0;border-radius:var(--ds-radius-control);background:transparent;color:var(--ds-text-primary);text-align:left;font-size:15px}
.platform-options small{font-size:12px;color:var(--ds-chrome-text-4)}
.platform-options button:hover,.platform-options button:focus-visible{background:color-mix(in srgb,var(--ds-text-primary) 5%,transparent);outline:none}
.platform-options button[aria-pressed=true]{background:#c4b2ed20;color:#e3d5ff}
@media(prefers-reduced-motion:reduce){.platform-chevron{transition:none}}

.faq-section{padding-block:96px;display:grid;grid-template-columns:1fr 1.25fr;gap:64px;border-top:1px solid color-mix(in srgb,var(--ds-text-primary) 9%,transparent)}
.faq-heading h2{font-size:clamp(38px,5vw,64px);letter-spacing:-.04em;line-height:1.1}
.faq-heading p{color:var(--ds-chrome-text-4);margin-top:var(--ds-space-4);font-size:16px}
.faq-item{border-bottom:1px solid color-mix(in srgb,var(--ds-text-primary) 13%,transparent)}
.faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-5);padding:var(--ds-space-5) 0;cursor:pointer;font-size:18px;line-height:1.4}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:25px;font-weight:300;color:#c4b2ed;flex-shrink:0}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:focus-visible{outline:2px solid #c4b2ed;outline-offset:6px;border-radius:var(--ds-radius-control)}
.faq-item p{padding:0 var(--ds-space-6) var(--ds-space-5) 0;font-size:15px;color:var(--ds-chrome-text-4);line-height:1.8;max-width:65ch}
@media(max-width:700px){.faq-section{padding-block:64px;grid-template-columns:1fr;gap:var(--ds-space-6)}.faq-item summary{font-size:17px}.faq-item p{padding-right:0}}

.go-clients{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.base-branches{width:75%}
.base-branches span{width:33.333333%}
.base-branches span:last-child{width:0}
.tablet-outline{width:62px;height:76px;border-radius:var(--ds-radius-control)}
@media(max-width:700px){.go-clients .client-outline{max-width:85%}.go-clients .tablet-outline{width:46px;height:60px}.go-clients strong{font-size:10px}}

/* Slow color motion: light moves, the glass stays still. */
@keyframes projection-spectrum{0%,100%{filter:blur(5px) drop-shadow(0 0 22px #ef889955)}33%{filter:blur(6px) drop-shadow(0 0 30px #91e1ba66)}66%{filter:blur(5px) drop-shadow(0 0 25px #a3a0f077)}}
.ghost-title{animation:projection-spectrum 18s ease-in-out infinite}


.letter-photos{container-type:size}
.letter-photos img[data-letter-photo="3"]{inset:auto;left:50%;top:50%;width:max(230%,335cqh);max-width:none;height:auto;object-fit:fill;transform:translate(-77%,-80%);transform-origin:center;transition:opacity 1s ease}
body:has(#pause-horizon[aria-pressed="true"]) .ds-text-emphasis--motion,body:has(#pause-horizon[aria-pressed="true"]) .ghost-title{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ghost-title{animation:none!important}.ghost-title{filter:blur(3px)}}


/* The repo link is the mark itself; the hero scene is a gentle ambient loop. */
.github-link{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.github-mark{display:block}
.hero-scene{transform:translateY(var(--scene-drift,0px));will-change:transform}
.ghost-title{transform:rotate(var(--projection-angle,0deg)) translateY(var(--hero-drift,0px))}
.hero-subtitle{font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ds-chrome-text-5);max-width:42ch;text-wrap:pretty}
.subtitle-key{font-style:italic;color:var(--ds-text-primary)}

/* One voice for every section lede: same scale, same color, comfortably narrow. */
.section-lede{font-size:clamp(17px,1.7vw,22px);line-height:1.6;color:var(--ds-chrome-text-4);max-width:46ch;text-wrap:pretty}
.showroom-heading .section-lede,.base-heading .section-lede,.no-app-vision .section-lede{margin-inline:auto}
.no-app-vision .section-lede{margin-top:var(--ds-space-5)}
.faq-heading p{font-size:17px;line-height:1.6;color:var(--ds-chrome-text-4);max-width:46ch}
.block-intro>p:last-child{max-width:46ch}

/* The day keeps one moment in the light while the rest of the page dims around it. */
@property --scene-glow{syntax:"<color>";inherits:false;initial-value:#d9a8b8}
.use-cases{isolation:isolate}
.use-cases .wrap{position:relative;z-index:1}
.day-ambience{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 130% 52% at 50% 24%,var(--scene-glow) 0%,transparent 62%),radial-gradient(ellipse 90% 40% at 50% 100%,var(--scene-glow) 0%,transparent 70%);opacity:.14;transition:--scene-glow 1.4s ease}
.use-cases[data-active-scene="0"] .day-ambience{--scene-glow:#d9a8b8}
.use-cases[data-active-scene="1"] .day-ambience{--scene-glow:#93a7c4}
.use-cases[data-active-scene="2"] .day-ambience{--scene-glow:#e4c98f}
.use-cases[data-active-scene="3"] .day-ambience{--scene-glow:#dfab72}
.use-cases[data-active-scene="4"] .day-ambience{--scene-glow:#e08d60}
.use-cases[data-active-scene="5"] .day-ambience{--scene-glow:#9cb98a}
.use-cases[data-active-scene="6"] .day-ambience{--scene-glow:#a58fd6}
.day-timeline article{transform-origin:center top;transform:scale(calc(1 + var(--moment,0)*.30));will-change:transform,opacity}
.scene-chat{gap:22px;box-shadow:0 calc(var(--moment,0) * 26px) calc(var(--moment,0) * 64px) #00000066;transform:scale(calc(1 + var(--moment,0)*.12)) translateY(calc((0.5 - var(--moment,0)) * 36px));transform-origin:center;transition:box-shadow .5s ease,transform .5s ease}
.day-timeline{position:relative}
.day-timeline .scene-block{position:sticky;top:calc(50svh - 240px)}
.chat-user{align-self:flex-end;max-width:88%;margin:0;padding:11px 15px;border-radius:14px 14px 4px 14px;border:1px solid #d4c5aa33;background:#d4c5aa12;color:#e7decb;font-size:13px;line-height:1.55;font-style:italic}
.chat-reply{align-self:flex-start;max-width:97%;margin:0;padding:13px 15px 14px;border-radius:4px 14px 14px 14px;border:1px solid #ffffff14;background:#ffffff07}
.chat-from{display:block;font-size:10px;letter-spacing:1.4px;color:#a9bfa0;margin-bottom:6px}
.chat-reply p{margin:0;font-size:13px;line-height:1.65;color:#d9dfcf}
.chat-choices{display:block;margin-top:9px;font-size:12px;letter-spacing:.4px;color:#d4c5aa}
.use-cases h2{margin-bottom:var(--ds-space-4)}
.no-app-vision{margin-top:96px}
@media(max-width:800px){.site-header nav>a.github-link{display:inline-flex}}
@media(max-width:700px){.day-ambience{background:radial-gradient(ellipse 160% 40% at 50% 12%,var(--scene-glow) 0%,transparent 65%)}.no-app-vision{margin-top:64px}}
@media(prefers-reduced-motion:reduce){.day-ambience{transition:none}.day-timeline article,.hero-scene{will-change:auto}.hero-scene{transform:none}.scene-chat{box-shadow:none}}

/* The header pair reads as one control: the mark sits close to the button and matches its height. */
.site-header nav{gap:var(--ds-space-3)}
.site-header .nav-cta{min-width:0;padding:var(--ds-space-2) var(--ds-space-4);border-radius:var(--ds-radius-pill)}
.site-header nav>a.github-link{width:44px;height:44px;border-radius:var(--ds-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ds-text-primary) 8%,transparent);border:1px solid color-mix(in srgb,var(--ds-text-primary) 12%,transparent);color:var(--ds-text-primary);transition:background .2s,transform .2s}
.site-header nav>a.github-link:hover{background:color-mix(in srgb,var(--ds-text-primary) 15%,transparent);transform:translateY(-2px)}
.github-mark{width:24px;height:24px}
@media(max-width:800px){.site-header nav{gap:var(--ds-space-2)}.site-header .nav-cta{padding:var(--ds-space-2) var(--ds-space-4)}.site-header nav>a.github-link{min-width:44px;min-height:44px;width:44px;height:44px}.github-mark{width:21px;height:21px}}

/* The hero card carries the primary call, so its button outweighs the header's. */
.glass-content .button{font-size:16px;padding:var(--ds-space-4) var(--ds-space-6);gap:0;border-radius:var(--ds-radius-pill)}
@media(max-width:700px){.glass-content .button{font-size:15px;padding:var(--ds-space-4) var(--ds-space-5)}}

/* The subtitle reads across the card instead of down a narrow column. */
.hero-subtitle{max-width:min(560px,100%);font-size:18px;line-height:1.6}
@media(max-width:700px){.hero-subtitle{max-width:100%;font-size:15px}}

/* One scale for every section title and its lede, so the page reads as one document. */
.showroom-heading h2,.base-heading h2,.use-cases h2,.no-app-vision h3,.faq-heading h2,.download-section h2,.security-heading h2{font-size:clamp(42px,6.2vw,86px);letter-spacing:-.04em;line-height:1.05;font-weight:400;margin-bottom:var(--ds-space-5)}
.showroom-heading .section-lede,.base-heading .section-lede,.no-app-vision>p.section-lede,.faq-heading p,.block-intro>p:last-child,.security-heading .section-lede{font-size:17px;line-height:1.6;color:var(--ds-chrome-text-4);max-width:46ch;margin-top:0}
.download-section h2{margin:0 0 var(--ds-space-5)}

/* Every lede reads at the width of the title above it, and the hero subtitle is one of them. */
.showroom-heading .section-lede,.base-heading .section-lede,.no-app-vision>p.section-lede,.faq-heading p{max-width:min(70ch,100%)}
.hero-subtitle{font-family:var(--ds-font-sans);font-size:17px;line-height:1.6;color:var(--ds-chrome-text-4);max-width:min(70ch,100%)}
.subtitle-key{font-style:italic;color:var(--ds-chrome-text-5)}
@media(max-width:700px){.hero-subtitle{font-size:15px;max-width:100%}}
.no-app-vision>p.section-lede{text-wrap:pretty}

/* The hour in view carries a readable conversation; the hours around it recede. */
.day-timeline article{transition:opacity .45s ease,transform .45s ease}
.day-timeline .scene-block{padding:26px 24px}
.scene-chat{gap:16px}
.chat-user{max-width:90%;padding:13px 17px;font-size:15px;line-height:1.5}
.chat-reply{max-width:98%;padding:15px 17px 16px}
.chat-reply p{font-size:15px;line-height:1.6}
.chat-from{font-size:11px;margin-bottom:8px}
.chat-choices{font-size:13px;margin-top:11px}
@media(max-width:700px){.day-timeline .scene-block{padding:22px 18px}.chat-user,.chat-reply p{font-size:14px}}

/* A collapsed disclosure sits on its own line rather than above a gap. */
.motion-library:not([open]){margin-block:var(--ds-space-6) var(--ds-space-6)}

/* A keyword in the subtitle that leads somewhere says so. */
a.subtitle-key,.no-app-vision .section-lede a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ds-text-primary) 30%,transparent);text-underline-offset:3px;transition:text-decoration-color .2s,color .2s}
a.subtitle-key:hover,.no-app-vision .section-lede a:hover{color:var(--ds-text-primary);text-decoration-color:var(--ds-text-primary)}

/* Three domains, read as three plain statements rather than a diagram. */
.security-section{padding-block:128px}
.security-heading{text-align:center;margin-bottom:64px}
.security-heading .section-lede{margin-inline:auto}
.security-heading h2 em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--ds-chrome-text-4)}






.security-section .technology-note{max-width:70ch;margin:var(--ds-space-5) auto 0}
@media(max-width:900px){.security-section{padding-block:64px}}

/* The security section matches its peers, and the diagram carries the explanation. */
.security-heading .section-lede{max-width:min(70ch,100%);margin-inline:auto}
.security-diagram{margin:0 auto;max-width:640px;padding:0}
.security-diagram svg{width:100%;height:auto;display:block;overflow:visible}
.dg-frame{fill:none;stroke:#ffffff1c;stroke-dasharray:4 7}
.dg-frame-label{font-size:11px;letter-spacing:.14em;fill:#8f958c}
.dg-box{fill:#ffffff07;stroke:#ffffff26}
.dg-host{fill:#c9c3b512}
.dg-runtime{stroke:#a9bfa03d;stroke-dasharray:7 6;fill:#a9bfa00d}
.dg-title{font-size:21px;fill:#f0f0ea;letter-spacing:-.02em}
.dg-sub{font-size:14px;fill:#aeb3a7}
.dg-host .dg-sub{font-size:13px}
.dg-link{stroke:#ffffff26;stroke-width:1;stroke-dasharray:4 5;fill:none}
.dg-socket{stroke:#d4c5aa;stroke-width:2}
.dg-dot{fill:#d4c5aa}
.dg-note{font-size:11px;letter-spacing:.14em;fill:#8f958c;text-anchor:middle}
.dg-cut{stroke:#e0876a;stroke-width:2}
.dg-ok{stroke:#8fbe8f;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.security-points{list-style:none;margin:var(--ds-space-7) auto 0;padding:0;max-width:min(70ch,100%);display:grid;gap:var(--ds-space-4)}
.security-points li{border-top:1px solid color-mix(in srgb,var(--ds-text-primary) 8%,transparent);padding-top:var(--ds-space-4)}
.security-points span{display:block;margin-bottom:var(--ds-space-2)}
.security-section .technology-note{max-width:min(70ch,100%);margin:var(--ds-space-6) auto 0}
.security-section .technology-note ul{margin:var(--ds-space-3) 0 0;padding-left:var(--ds-space-4);display:grid;gap:var(--ds-space-2)}
@media(max-width:700px){.security-diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}.security-diagram svg{min-width:560px}.security-points{margin-top:var(--ds-space-6)}}

/* The download button belongs to the floating bar, not the opening view. */
.site-header[data-compact=false] .nav-cta{opacity:0;transform:scale(.9);pointer-events:none;width:0;min-width:0;padding-inline:0;margin:0;overflow:hidden;border:0}
.site-header .nav-cta{transition:opacity .4s ease,transform .4s ease}

/* A keyword that leads somewhere reads as emphasis first, a link on hover. */
a.subtitle-key,.no-app-vision .section-lede a{font-weight:500;text-decoration:none;color:var(--ds-chrome-text-5)}
a.subtitle-key:hover,a.subtitle-key:focus-visible,.no-app-vision .section-lede a:hover,.no-app-vision .section-lede a:focus-visible{color:var(--ds-text-primary);text-decoration:underline;text-decoration-color:var(--ds-text-primary);text-underline-offset:3px}

/* The footer button centres its label against the arrow. */
.footer-star{align-items:center;line-height:1}

/* The mark throws a few stars, in case the invitation is not obvious. */
.site-header nav>a.github-link{position:relative;overflow:visible}
.star-spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-4px 0 0 -4px;background:#f5c542;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:0;pointer-events:none}
.site-header nav>a.github-link:hover .star-spark,.site-header nav>a.github-link:focus-visible .star-spark{animation:star-bump 1.5s ease-out infinite}
.star-spark:nth-of-type(2){animation-delay:.16s}
.star-spark:nth-of-type(3){animation-delay:.32s}
@keyframes star-bump{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0deg)}12%{opacity:1}55%{opacity:.9}100%{opacity:0;transform:translate(var(--sx,14px),var(--sy,-26px)) scale(1) rotate(150deg)}}
.star-spark:nth-of-type(1){--sx:-16px;--sy:-24px}
.star-spark:nth-of-type(2){--sx:15px;--sy:-27px}
.star-spark:nth-of-type(3){--sx:2px;--sy:-31px}
@media(prefers-reduced-motion:reduce){.star-spark{display:none}}
@media(max-width:700px){.security-diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}.security-diagram svg{min-width:520px}.security-points{margin-top:var(--ds-space-6)}}

/* ── One type system for the page chrome. Five roles, one accent face. ──
   Simulated app UI inside the device mockups keeps its own smaller scale,
   because there it is depicting a product, not setting this page's text. */
:root{--fs-title-l:clamp(28px,3.4vw,36px);--fs-title-m:28px;--fs-title-s:18px;--fs-lede:17px;--fs-body:16px;--fs-small:14px;--fs-eyebrow:11px;--lh-lede:1.6;--lh-body:1.65;--ls-eyebrow:.14em;--ink-lede:var(--ds-chrome-text-4);--ink-body:var(--ds-chrome-text-4);--ink-small:var(--ds-chrome-text-3);--ink-eyebrow:var(--ds-chrome-text-4)}

/* Accent face: every highlighted half of a title, in one serif. */
.ds-text-emphasis,.letter-opening h2 em,.letter-ending h2 em,.base-heading h2 em,.showroom-heading h2 em,.no-app-vision h3 em,.security-heading h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
#letter-title,#letter-title .ds-text-emphasis,.letter-ending h2,.letter-ending h2 em{line-height:1.25}

/* Lede: the hero subtitle, every section lede, and every letter chapter. */
.hero-subtitle,.section-lede,.faq-heading p,.block-intro>p:last-child,.letter-chapter>p:not(.eyebrow){font-size:var(--fs-lede);line-height:var(--lh-lede);color:var(--ink-lede)}

/* Body: card and list copy. */
.trust-grid p,.base-facts p,.ownership-pair p,.security-points li,.faq-item p,.block-steps p,.horizon-lab>p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-body)}

/* Small: notes, fine print and disclosures. */
.demo-note,.cloud-note,.technology-note,.technology-note summary,.technology-note p,.technology-note li,.download-section p,.download-help summary{font-size:var(--fs-small);line-height:1.65;color:var(--ink-small)}

/* Eyebrow: every small uppercase label. */
.scene-category,.chat-from,.security-points span,.block-steps>article>span,.platform-soon{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-eyebrow)}

/* Card titles: one size for every card heading. */
.life-scenes h3,.trust-grid h3,.base-facts h3,.day-timeline h3{font-size:var(--fs-title-m);line-height:1.18;letter-spacing:-.03em}
.day-timeline .scene-time{letter-spacing:-.03em}
.block-steps h4,.base-machine strong{font-size:24px;line-height:1.2;letter-spacing:-.02em}
.footer-bottom nav a,.footer-bottom>a,.footer-bottom span{font-size:var(--fs-small);letter-spacing:.02em}
.letter-chapter h3,.block-intro h3{font-size:var(--fs-title-l);line-height:1.12;letter-spacing:-.035em}
.faq-item summary,.motion-library summary{font-size:var(--fs-title-s);line-height:1.4}

/* One disclosure marker everywhere. */
.motion-library summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-5);list-style:none}
.motion-library summary span{display:none}
.motion-library summary::after,.technology-note summary::after{content:"+";font-size:25px;font-weight:300;color:#c4b2ed;flex-shrink:0;line-height:1}
.motion-library[open] summary::after,.technology-note[open] summary::after{content:"−"}
.technology-note summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-5);list-style:none}
.technology-note summary::-webkit-details-marker,.motion-library summary::-webkit-details-marker{display:none}

/* The collapsed disclosure closes against the next rule, with no gap below. */
.motion-library:not([open]){margin-block:var(--ds-space-6) 0}

/* The footer arrow moves on hover, like every other arrow on the page. */
.footer-star span{transition:transform .25s ease}
.footer-star:hover span{transform:translate(3px,-3px)}

/* Once the opening view is behind you, a way back to it. */
.to-top{position:fixed;right:26px;bottom:26px;z-index:45;width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:19px;color:var(--ds-text-primary);background:color-mix(in srgb,var(--ds-bg-surface) 80%,transparent);border:1px solid color-mix(in srgb,var(--ds-text-primary) 17%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s ease,transform .35s ease,background .2s ease}
[data-past-hero=true] .to-top{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:color-mix(in srgb,var(--ds-bg-surface) 60%,transparent);transform:translateY(-2px)}
@media(max-width:700px){.to-top{right:16px;bottom:16px;width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}


.letter-body{font-size:clamp(19px,2.1vw,24px);line-height:1.75;color:var(--ds-chrome-text-4);letter-spacing:-.01em;max-width:34ch;font-weight:400}
.letter-line{display:block;opacity:1}
.letter-line:first-child{font-size:clamp(24px,2.5vw,28px);line-height:1.25;color:var(--ds-text-primary);letter-spacing:-.03em}
.letter-line+.letter-line{margin-top:var(--ds-space-6)}

.letter-chapter{align-items:flex-start}

#letter-frame{white-space:pre-line}

#letter-frame,.letter-screen-caption>p{font-family:var(--serif);font-size:clamp(26px,3vw,42px);line-height:1.22;letter-spacing:-.025em}


.footer-mark-fill{animation:footer-horizon-breathe 3.2s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){.footer-wordmark circle,.footer-mark-fill{animation:none}}

/* The letter reads at the page's main size; the lede rule had shrunk it. */
.letter-chapter>p.letter-body{font-size:clamp(19px,2.1vw,24px);line-height:1.75;color:#c9c7bf;letter-spacing:-.01em}
/* Every line of a letter chapter shares one style: the title look, at 24px. */
.letter-chapter>p.letter-body>.letter-line{font-size:clamp(20px,2.4vw,24px);line-height:1.25;color:#f0efea;letter-spacing:-.03em}

/* ── A day with herOS: each hour pins its stage at the vertical centre, like the letter's
   screen, and scrolling through the hour's runway plays its conversation one message at a
   time. The article's own scale is retired: the focus scale now lives on the stage. */
.day-timeline article{transform:none}
@media(min-width:701px){
  .day-timeline article,.day-timeline article:nth-child(n+4){display:block;min-height:200vh;padding:0}
  .day-timeline article::before{display:none}
  .day-timeline .scene-stage{position:sticky;top:0;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;column-gap:50px;align-content:center;align-items:center;transform-origin:center}
  .day-timeline .scene-stage::before{content:"";position:absolute;left:-66px;top:50%;width:11px;height:11px;margin-top:-8px;background:#d4c5aa;border:3px solid var(--ds-bg-canvas);border-radius:50%;box-shadow:0 0 0 calc(var(--moment,0) * 5px) #f1a5b612}
  .day-timeline .scene-stage{grid-template-rows:1fr auto auto auto 1fr}
  .day-timeline .scene-stage>time,.day-timeline .scene-heading>.scene-category,.day-timeline .scene-heading>h3{grid-column:1;align-self:start}
  .day-timeline .scene-stage>time{grid-row:2}.day-timeline .scene-heading>.scene-category{grid-row:3}.day-timeline .scene-heading>h3{grid-row:4}
  .day-timeline .scene-block{position:relative;top:auto;grid-column:2;grid-row:1/-1;align-self:center;margin-top:0}
  .day-timeline .scene-chat{gap:30px;transform:scale(calc(.94 + var(--scene-in,1) * .06));transform-origin:center;transition:none}
}
@media(prefers-reduced-motion:reduce){.day-timeline .scene-chat{transform:none}}

/* ── A day with herOS, staged: one card pins as the day arrives and stays put through every
   hour until the last releases it. On the left, each hour is its hour mark with its category
   and title under it. They scroll in together; the title pins level with the card while the
   hour mark carries on up, until the next hour pushes it off. The hours' own cards stay in
   the markup for phones, reduced motion and no-JS readers. */
.day-card-rail{display:none}
.scene-heading{display:contents}
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
  /* A title pins with its top 50px above the centre, so a two-line title sits level with the
     card's centre. Its hour mark is the 36px line above it (plus an 8px gap), and the dot sits
     level with the mark, 18px down the hour. So when a title pins, its dot is 76px above the
     centre; motion.js puts the progress line's tip there, and the line reaches a dot as its
     title pins. The top padding (50vh - 50px - 44px) lets the first title pin as the card
     does; the bottom padding lets the last leave as it does. */
  .day-timeline[data-staged=true]{--day-card-column:calc(50% - 25px);padding-top:calc(50vh - 94px);padding-bottom:calc(50vh - 50px)}
  .day-timeline[data-staged=true] article,.day-timeline[data-staged=true] article:nth-child(n+4){width:calc(100% - var(--day-card-column) - 50px);min-height:100vh}
  .day-timeline[data-staged=true] .scene-stage{position:relative;top:auto;min-height:100vh;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start}
  .day-timeline[data-staged=true] .scene-stage::before{top:18px}
  .day-timeline[data-staged=true] .scene-stage>time{grid-column:1;grid-row:1;margin:0;line-height:36px}
  .day-timeline[data-staged=true] .scene-heading{display:block;grid-column:1;grid-row:2/-1;align-self:start;margin-top:8px;position:sticky;top:calc(50vh - 50px)}
  .day-timeline[data-staged=true] .scene-heading>.scene-category{display:block;margin:0 0 12px}
  .day-timeline[data-staged=true] .scene-heading>h3{margin:0}
  .day-timeline[data-staged=true] article .scene-block{display:none}
  .day-timeline[data-staged=true] .day-card-rail{display:block;position:absolute;top:0;bottom:0;right:0;width:var(--day-card-column);pointer-events:none}
  .day-timeline[data-staged=true] .day-card-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
  .day-timeline[data-staged=true] .day-card{position:relative;top:auto;display:grid;width:100%;margin:0;transform:none}
  .day-card-layer{grid-area:1/1;align-self:center;display:flex;flex-direction:column;gap:30px}
  /* Waiting messages sit below with no transition, so a message always plays in from below;
     playing ones settle in place, and an hour that has handed the card on lifts its messages
     up and out. motion.js staggers both with transition-delay. */
  .day-card-layer>.chat-user,.day-card-layer>.chat-reply{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .day-card-layer>[data-state=waiting]{transition:none}
  .day-card-layer>[data-state=in]{opacity:1;transform:none}
  .day-card-layer>[data-state=out]{transform:translateY(-28px);transition-duration:.45s,.55s}
}

/* QG-583: --display is the hero's "clean system sans headline" (BRAND, Founder voice and title cards), as --serif
   is its italic emphasis; both are the founder-approved title-card faces (2026-09-22). */
/* QG-583: the copy BRAND.md requires, styled from the design-system tokens only: section 1's supporting line and section
   5's visible "Illustrative example." label. */
.hero-promise{margin:0 0 var(--ds-space-4);font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.6vw,22px);line-height:1.4;color:var(--ds-text-primary)}
.illustrative-label{margin:var(--ds-space-2) 0 0;font-size:14px;color:var(--ds-text-muted)}
#showroom-note .illustrative-label{margin:0;color:var(--ds-text-primary)}
/* QG-583, owner 2026-10-01: the hero title stays within three lines, with "actually yours." kept on one line. On a narrow
   screen the forced break goes, so the title flows around the phrase instead of leaving "yours." alone. */
.glass-content h1 em{white-space:nowrap}
@media(max-width:700px){.glass-content h1 br{display:none}}