/* Temple — site v4 (fourth-version). Built from Figma PYFyDN0K4boapNBsz0UrYl, page Screens, Section 1 (3 Nov 2026).
   Desktop frames are 1728 wide. Sections drawn as fixed compositions (For doers, App, What's included) scale with
   --u (one Figma pixel), capped at 1728. Other sections use fluid type clamped between phone and Figma sizes. */
@font-face{font-family:Switzer;src:url('assets/Switzer-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

@font-face{font-family:'Temple Beauchesne';src:url('assets/TempleBeauchesne-Regular.woff') format('woff');font-weight:400;font-display:swap}
:root{
  --paper:#f6f3ed;--stone:#e8e3d8;--ink:#292c26;--muted:#62675d;--app:#eeece5;--night:#00080c;
  --serif:'Cormorant Garamond',Georgia,serif;--sans:Switzer,Arial,sans-serif;--voice:Switzer,Arial,sans-serif;
  --script:'Temple Beauchesne',Georgia,serif;
  --edge:clamp(24px,5.556vw,96px);--edge-wide:clamp(24px,8.1vw,140px);
  --gutter:var(--edge);--body:1.125rem;--support:.875rem;--caption:.75rem;--heading:2.75rem;
  --radius-control:4px;--radius-dialog:8px;--reserve-space:0px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;scroll-padding-bottom:calc(var(--reserve-space) + 20px)}
body{margin:0;color:var(--ink);background:var(--paper);font:var(--body)/1.6 var(--sans);padding-bottom:var(--reserve-space);overflow-x:clip}
button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}summary{border:0}
:focus-visible{outline:2px solid #435b48;outline-offset:5px}
img{display:block;max-width:100%;height:auto}figure,h1,h2,h3,p,blockquote,ol,ul{margin:0}ol,ul{padding:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;overflow-wrap:break-word}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;z-index:30;left:16px;top:16px;padding:12px 24px;background:var(--ink);color:var(--paper);transform:translateY(-160%)}.skip:focus{transform:none}
.edge{width:100%;max-width:1728px;margin-inline:auto;padding-inline:var(--edge)}
.design-box{--u:calc(min(100vw,1728px)/1728);width:100%;max-width:1728px;margin-inline:auto;position:relative}
.eyebrow{font:400 max(11px,calc(var(--u,1px)*12))/1.3 var(--sans);text-transform:uppercase;letter-spacing:.02em}
.button{display:inline-flex;align-items:center;justify-content:center;padding:16px 24px;min-height:52px;font:500 .9375rem/1.25rem var(--sans);background:var(--ink);color:var(--paper);border-radius:var(--radius-control);text-align:center;transition:background .16s ease}
.button:hover{background:#454c3e}.button:active{background:#151c14}.button:disabled{opacity:.55;cursor:not-allowed}
.icon{width:20px;height:20px;flex-shrink:0;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Placeholders: clearly marked, never mistaken for final content. */
.placeholder{border:1.5px dashed #292c2666;border-radius:12px;display:grid;place-items:center;padding:24px;background:repeating-linear-gradient(135deg,#292c260a 0 12px,transparent 12px 24px)}
.placeholder-label{font:400 .875rem/1.5 var(--sans);color:var(--ink);text-align:center;max-width:32ch;background:#f6f3edd9;padding:8px 14px;border-radius:6px}
.placeholder-label strong{display:block;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.75rem;margin-bottom:2px}
.copy-slot{outline:1px dashed #b07c2a;outline-offset:3px;border-radius:2px}

/* Light: the live caustic shader behind hero, finishes and app. */
.light-surface{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 80% 60%,#fffff5c7 0,transparent 40%),radial-gradient(ellipse at 58% 35%,#e3e2dc 0,transparent 60%) var(--paper)}
.light-surface canvas{display:block;width:100%;height:100%;opacity:.9;visibility:hidden}.light-surface canvas.is-ready{visibility:visible}
.light-control{position:absolute;right:var(--edge);bottom:16px;min-width:44px;min-height:44px;padding:12px;display:flex;align-items:center;gap:8px;color:var(--muted);z-index:2}
.light-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.play-icon{display:none}.light-control[aria-pressed=true] .pause-icon{display:none}.light-control[aria-pressed=true] .play-icon{display:block}

/* 01 Header + hero — Figma 563:219 */
.opening{position:relative;isolation:isolate;z-index:3;min-height:max(600px,min(100svh,56.25vw))}
.opening .light-surface{mask-image:linear-gradient(#000 80%,transparent);-webkit-mask-image:linear-gradient(#000 80%,transparent)}
.site-header{position:absolute;z-index:5;inset:0 0 auto;max-width:1728px;margin-inline:auto;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:clamp(20px,2.78vw,48px) var(--edge) 0}
.wordmark{display:inline-block;font:400 clamp(28px,2.315vw,40px)/1.25 var(--serif);letter-spacing:0}
.brand-tagline{font:400 clamp(16px,1.505vw,26px)/1.3 var(--script);margin-top:clamp(2px,.35vw,6px)}
.site-nav{display:flex;align-items:center;gap:clamp(16px,3.24vw,56px);font:400 clamp(14px,1.042vw,18px)/1.5 var(--sans);padding-top:clamp(4px,.7vw,12px)}
.site-nav a,.site-nav button{display:inline-flex;align-items:center;min-height:44px}
.site-nav a:hover,.nav-preorder{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.nav-preorder:disabled{opacity:.55;text-decoration:none;cursor:not-allowed}
.nav-todo{cursor:not-allowed;opacity:.7}
.hero{position:relative;min-height:inherit;display:grid;align-items:end;padding:0 var(--edge) clamp(40px,3.9vw,67px);max-width:1728px;margin-inline:auto}
.hero-visual{position:absolute;top:clamp(140px,13vw,220px);bottom:clamp(40px,4vw,67px);right:var(--edge);left:52%}
.hero-copy{position:relative;z-index:1}
.hero h1{font-size:clamp(40px,4.63vw,80px);line-height:1.1;letter-spacing:0}
.hero-description{font-size:clamp(17px,1.389vw,24px);line-height:1.5;margin-top:clamp(16px,1.6vw,28px)}
.hero-action{margin-top:16px}.hero-action:empty{display:none}

/* 02 Find your finish — Figma 590:172 */
.finishes{position:relative;isolation:isolate;overflow:hidden}
.finishes-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:clamp(420px,26.3vw,454px);padding-inline:var(--edge-wide);padding-block:48px}
.finishes h2{font-size:clamp(36px,3.704vw,64px);line-height:1.08;letter-spacing:-.015em}
.finish-swatches{border:0;padding:0;margin:clamp(24px,2.3vw,40px) 0 0;display:grid;grid-template-columns:repeat(3,120px);column-gap:70px}
.finish-swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;font:400 18px/1.6 var(--sans)}
.finish-swatch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.swatch-dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;position:relative}
.swatch-dot:before{content:"";width:24px;height:24px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #292c26}
.swatch-dot:after{content:"";position:absolute;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px #292c26;opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.finish-swatch input:checked+.swatch-dot:after{opacity:1;transform:none}
.finish-swatch input:focus-visible+.swatch-dot{outline:2px solid var(--ink);outline-offset:2px}
.swatch-name{white-space:nowrap}
.finishes .button{margin-top:clamp(28px,2.6vw,36px);font:400 18px/1.6 var(--sans);padding:12px 24px;min-height:53px}
.finish-stage{position:relative;justify-self:center;width:clamp(240px,25.46vw,440px);aspect-ratio:1;margin-left:clamp(0px,8vw,140px)}
.finish-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.finish-stage img.is-shown{opacity:1;transform:none}

/* 03 Moment — Figma 577:21 … 594:23. Pinned while scrolling through the four states. */
.moment{position:relative;background:#121a1f;color:#f6f3ed}
.moment-stage{position:relative;overflow:hidden;min-height:100svh}
.moment-photo,.moment-photo img{position:absolute;inset:0;width:100%;height:100%}
.moment-photo img{object-fit:cover;object-position:60% 50%}
.moment-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b1116a6 0,#0b111640 40%,transparent 60%)}
.moment-inner{position:relative;z-index:1;min-height:100svh;padding-block:clamp(48px,9.9svh,120px) 64px;display:flex;flex-direction:column}
.moment h2{font:400 clamp(34px,3.704vw,64px)/1.1 var(--voice);letter-spacing:0;max-width:12em}
.moment-sub{font:400 clamp(17px,1.389vw,24px)/1.1 var(--sans);margin-top:clamp(16px,2.1vw,36px)}
.moment-steps{list-style:none;margin-top:clamp(40px,12svh,120px);display:grid}
.moment-step{grid-area:1/1}
.moment-speaker{font:400 clamp(14px,1.042vw,18px)/1.1 var(--voice);letter-spacing:.1em;text-transform:uppercase}
.moment-line{font:400 clamp(26px,2.778vw,48px)/1.2 var(--voice);letter-spacing:-.01em;margin-top:clamp(20px,2.9vw,50px)}
.saved-idea{width:clamp(300px,21.82vw,377px);padding:clamp(28px,2.37vw,41px);border-radius:28px;background:#f6f3ed1f;border:1px solid #f6f3ed40;-webkit-backdrop-filter:blur(24px) saturate(1.1);backdrop-filter:blur(24px) saturate(1.1);box-shadow:inset 0 1px 3px #ffffff26,0 24px 60px -20px #0006;font-family:var(--voice)}
.saved-label{font:400 clamp(14px,1.042vw,18px)/1.25 var(--voice);letter-spacing:.12em;text-transform:uppercase}
.saved-idea h3{font:400 clamp(28px,2.083vw,36px)/1.15 var(--voice);letter-spacing:-.01em;margin-top:clamp(18px,1.4vw,24px)}
.saved-body{font:400 clamp(18px,1.389vw,24px)/1.25 var(--voice);margin-top:clamp(16px,1.4vw,24px)}
.saved-meta{font:400 clamp(16px,1.215vw,21px)/1.25 var(--voice);color:#bbc8c6;margin-top:clamp(18px,1.4vw,24px)}
.saved-meta span{text-transform:uppercase}
/* JS (sections.js) pins the stage and steps through the states; without it all four read in order. */
.moment:not(.is-pinned) .moment-steps{gap:48px}
.moment:not(.is-pinned) .moment-step{grid-area:auto}
.moment.is-pinned{height:420svh}
.moment.is-pinned .moment-stage{position:sticky;top:0;height:100svh}
.moment.is-pinned .moment-step{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .8s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.moment.is-pinned .moment-step.is-active{opacity:1;transform:none;pointer-events:auto}
.moment.is-pinned .moment-step.is-past{transform:translateY(-24px)}
.moment-progress{display:none}

/* 05 For doers — Figma 704:736 (R12) */
.doers{background:var(--paper)}
.doers-inner{height:calc(var(--u)*972);color:#363930}
.doers-copy{position:absolute;left:calc(var(--u)*62);top:calc(var(--u)*294);width:calc(var(--u)*450)}
.doers .eyebrow{color:#7d796e;margin-left:calc(var(--u)*2)}
.doers h2{font-size:max(30px,calc(var(--u)*50));line-height:1.25;letter-spacing:0;margin-top:calc(var(--u)*40)}
.doers-body{font:400 max(15px,calc(var(--u)*20))/1.6 var(--sans);color:#68695f;margin:calc(var(--u)*56) 0 0 calc(var(--u)*2);max-width:calc(var(--u)*350)}
.doers-mosaic{position:absolute;left:calc(var(--u)*552);top:calc(var(--u)*52);width:calc(var(--u)*1152);height:calc(var(--u)*868);border-radius:calc(var(--u)*64);background:#e9e6df;box-shadow:inset 0 0 0 1.2px #fff}
.tile{position:absolute;overflow:hidden;border-radius:calc(var(--u)*32);background:#dcd8cf}
.tile img{width:100%;height:100%;object-fit:cover}
.t1{left:calc(var(--u)*28);top:calc(var(--u)*28);width:calc(var(--u)*420);height:calc(var(--u)*454)}
.t2{left:calc(var(--u)*28);top:calc(var(--u)*510);width:calc(var(--u)*420);height:calc(var(--u)*330)}
.t3{left:calc(var(--u)*476);top:calc(var(--u)*28);width:calc(var(--u)*282);height:calc(var(--u)*252)}
.t4{left:calc(var(--u)*786);top:calc(var(--u)*28);width:calc(var(--u)*338);height:calc(var(--u)*320)}
.t5{left:calc(var(--u)*476);top:calc(var(--u)*308);width:calc(var(--u)*282);height:calc(var(--u)*532)}
.t6{left:calc(var(--u)*786);top:calc(var(--u)*376);width:calc(var(--u)*338);height:calc(var(--u)*464)}

/* 06 App — Figma 672:1600 (R04). The phone scene is drawn in scene units (--k). */
.app{position:relative;isolation:isolate;overflow:hidden}
.app-inner{height:calc(var(--u)*972)}
.app-scene{--k:var(--u);position:absolute;left:calc(var(--u)*92);top:calc(var(--u)*76);width:calc(var(--k)*840);height:calc(var(--k)*894);font-family:var(--sans)}
.app-scene>*,.app-phone>*,.app-card>*{position:absolute;margin:0}
.glass{background:#ffffff24;border:calc(var(--k)*1.1) solid #ffffffe6;-webkit-backdrop-filter:blur(calc(var(--k)*12)) saturate(1.05);backdrop-filter:blur(calc(var(--k)*12)) saturate(1.05);box-shadow:inset 0 calc(var(--k)*1) 0 #fff9}
.app-shadow{left:calc(var(--k)*92);top:calc(var(--k)*736);width:calc(var(--k)*670);height:calc(var(--k)*158);background:radial-gradient(closest-side,#615e5430,#615e540f 45%,transparent)}
.app-phone{left:calc(var(--k)*186);top:0;width:calc(var(--k)*450);height:calc(var(--k)*816);border-radius:calc(var(--k)*56)}
.app-title{left:calc(var(--k)*40);top:calc(var(--k)*37);font:400 calc(var(--k)*32)/1.25 var(--serif);color:#30312d}
.app-dots{left:calc(var(--k)*391);top:calc(var(--k)*56);display:flex;gap:calc(var(--k)*2)}
.app-dots i{width:calc(var(--k)*3);height:calc(var(--k)*3);border-radius:50%;background:#898579}
.app-orb{left:calc(var(--k)*159);top:calc(var(--k)*117);width:calc(var(--k)*132);height:calc(var(--k)*132)}
.app-status{left:0;right:0;top:calc(var(--k)*266);text-align:center;font-size:calc(var(--k)*13);line-height:1.3;color:#888579}
.app-who{left:calc(var(--k)*41);font-size:calc(var(--k)*10);line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:#918d80}
.app-who-you{top:calc(var(--k)*334)}.app-who-temple{top:calc(var(--k)*474)}
.app-you{left:calc(var(--k)*41);top:calc(var(--k)*361);font-size:calc(var(--k)*20);line-height:1.45;color:#47483f}
.app-rule{left:calc(var(--k)*41);top:calc(var(--k)*442);width:calc(var(--k)*368);border:0;border-top:calc(var(--k)*.8) solid #c9c6b9}
.app-reply{left:calc(var(--k)*41);top:calc(var(--k)*503);font:400 calc(var(--k)*22)/1.59 var(--serif);color:#363930;white-space:nowrap}
.app-controls{left:calc(var(--k)*143);top:calc(var(--k)*724);width:calc(var(--k)*265);height:calc(var(--k)*44)}
.app-listening{position:absolute;left:0;top:calc(var(--k)*1);width:calc(var(--k)*164);height:calc(var(--k)*43);border-radius:calc(var(--k)*22);background:#ffffff61;border:calc(var(--k)*.7) solid #fff;display:flex;align-items:center;gap:calc(var(--k)*19);padding-left:calc(var(--k)*20);font-size:calc(var(--k)*13);color:#747267}
.app-wave{display:flex;align-items:center;gap:calc(var(--k)*3);height:calc(var(--k)*21)}
.app-wave i,.conversation-voice i{width:calc(var(--k)*2);height:100%;border-radius:2px;background:#898577;transform:scaleY(.4);animation:wave 1.4s ease-in-out infinite}
.app-wave i:nth-child(2),.conversation-voice i:nth-child(2){animation-delay:-.3s}.app-wave i:nth-child(3),.conversation-voice i:nth-child(3){animation-delay:-.6s}.app-wave i:nth-child(4),.conversation-voice i:nth-child(4){animation-delay:-.9s}.app-wave i:nth-child(5),.conversation-voice i:nth-child(5){animation-delay:-1.1s}
.app-stop{position:absolute;right:0;top:0;width:calc(var(--k)*44);height:calc(var(--k)*44);border-radius:50%;background:#35372f;display:grid;place-items:center}
.app-stop:after{content:"";width:calc(var(--k)*10);height:calc(var(--k)*10);border-radius:calc(var(--k)*2);background:#f8f6ef}
.app-card-shadow{background:radial-gradient(closest-side,#615e542e,#615e540d 45%,transparent)}
.app-card-glass{border-radius:calc(var(--k)*26)}
.app-memory{left:calc(var(--k)*16);top:calc(var(--k)*535);width:calc(var(--k)*348);height:calc(var(--k)*203)}
.app-memory .app-card-shadow{left:0;top:calc(var(--k)*149);width:calc(var(--k)*348);height:calc(var(--k)*54)}
.app-memory .app-card-glass{left:calc(var(--k)*2);top:0;width:calc(var(--k)*330);height:calc(var(--k)*178)}
.app-memory-title{left:calc(var(--k)*27);top:calc(var(--k)*19);font-size:calc(var(--k)*16);line-height:1.3;color:#45463e}
.app-memory-label{left:calc(var(--k)*27);top:calc(var(--k)*51);font-size:calc(var(--k)*9);line-height:1.3;letter-spacing:.02em;text-transform:uppercase;color:#8a8578}
.app-memory-text{left:calc(var(--k)*26);top:calc(var(--k)*73);font:400 calc(var(--k)*24)/1.25 var(--serif);color:#363930;white-space:nowrap}
.app-akari{left:calc(var(--k)*573);top:calc(var(--k)*62);width:calc(var(--k)*258);height:calc(var(--k)*361)}
.app-akari .app-card-shadow{left:0;top:calc(var(--k)*307);width:calc(var(--k)*258);height:calc(var(--k)*54)}
.app-akari .app-card-glass{left:calc(var(--k)*9);top:0;width:calc(var(--k)*240);height:calc(var(--k)*340)}
.app-akari-photo{left:calc(var(--k)*15);top:calc(var(--k)*6);width:calc(var(--k)*228);height:calc(var(--k)*204);object-fit:cover;border-radius:calc(var(--k)*21)}
.app-chip{left:calc(var(--k)*27);top:calc(var(--k)*18);height:calc(var(--k)*24);padding:0 calc(var(--k)*11);border-radius:calc(var(--k)*12);background:#ffffffd1;font-size:calc(var(--k)*11);line-height:calc(var(--k)*24);color:#45463e}
.app-akari-title{left:calc(var(--k)*29);top:calc(var(--k)*216);font:400 calc(var(--k)*28)/1.25 var(--serif);color:#363930}
.app-akari-by{left:calc(var(--k)*30);top:calc(var(--k)*254);font-size:calc(var(--k)*13);line-height:1.3;color:#5f6055}
.app-akari-rule{left:calc(var(--k)*30);top:calc(var(--k)*290);width:calc(var(--k)*195);border:0;border-top:calc(var(--k)*.7) solid #8a857880}
.app-akari-link{left:calc(var(--k)*30);top:calc(var(--k)*306);width:calc(var(--k)*195);display:flex;justify-content:space-between;align-items:center;font-size:calc(var(--k)*12);line-height:1.3;color:#45463e;text-decoration:underline;text-underline-offset:2px}
.app-akari-link svg{width:calc(var(--k)*8);height:calc(var(--k)*8);fill:none;stroke:#45463e;stroke-width:1.1}
.app-copy{position:absolute;left:calc(var(--u)*1127);top:calc(var(--u)*316);width:calc(var(--u)*520);color:#30312d}
.app .eyebrow{color:#827e73;margin-left:calc(var(--u)*3)}
.app h2{font-size:max(32px,calc(var(--u)*62));line-height:1.29;letter-spacing:0;margin-top:calc(var(--u)*28)}
.app-body{font:400 max(16px,calc(var(--u)*22))/1.32 var(--sans);color:#77756c;margin:calc(var(--u)*33) 0 0 calc(var(--u)*3);max-width:calc(var(--u)*380)}

@keyframes wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* 07 Belief — Figma 590:163 */
.belief{background:var(--paper);color:#000}
.belief-inner{padding-block:clamp(56px,6vw,104px)}
.belief h2{font:400 clamp(36px,3.704vw,64px)/1.05 var(--voice);letter-spacing:-.03em}
.belief-body{font:400 clamp(17px,1.505vw,26px)/1.45 var(--voice);max-width:31em;margin-top:clamp(18px,1.5vw,26px)}
.belief-button{margin-top:clamp(20px,1.5vw,26px)}

/* 08 What's included — Figma 707:968 (R13) */
.included{position:relative;background:#0b1417;color:#f6f3ed;overflow:hidden}
.included-photo,.included-photo img{position:absolute;inset:0;width:100%;height:100%}
.included-photo img{object-fit:cover;object-position:70% 50%}
.included-inner{height:max(640px,calc(var(--u)*972))}
.included-copy{position:absolute;left:calc(var(--u)*100);top:calc(var(--u)*146);width:max(380px,calc(var(--u)*540))}
.included .eyebrow{color:#b4c4bf;margin-left:calc(var(--u)*4)}
.included h2{font-size:max(32px,calc(var(--u)*50));line-height:1.25;letter-spacing:0;margin-top:calc(var(--u)*38)}
.included-list{list-style:none;margin:calc(var(--u)*52) 0 0 calc(var(--u)*4);width:max(320px,calc(var(--u)*468))}
.included-list li{padding-bottom:calc(var(--u)*18)}
.included-list li+li{border-top:1px solid #f6f3ed2e;padding-top:calc(var(--u)*18)}
.included-list h3{font-size:max(18px,calc(var(--u)*22));line-height:1.25;letter-spacing:0}
.included-list p{font:400 max(14px,calc(var(--u)*17))/1.3 var(--sans);color:#d4dcd7;margin-top:calc(var(--u)*8)}

/* 09 Offer + FAQ — Figma 590:181 / 590:184 / 617:98 */
.offer{background:var(--paper)}
.offer-layout{display:grid;grid-template-columns:minmax(0,620px) minmax(0,688px);justify-content:space-between;gap:48px;padding-inline:var(--edge-wide);padding-block:clamp(64px,10vw,180px)}
.offer h2{font-size:clamp(30px,3.704vw,64px);line-height:1.08;letter-spacing:-.015em}
.offer-price{margin-top:32px;display:flex;align-items:baseline;gap:10px}
.offer-amount{font:400 2rem/1.25 var(--serif);letter-spacing:-.015em}
.offer-price del{font:400 1.125rem/1.6 var(--sans);color:var(--muted);text-decoration-thickness:1px}
.offer-label{font-size:.875rem;line-height:1.5;color:var(--muted);margin-top:8px}
.offer-description{font-size:1.125rem;line-height:1.6;margin-top:24px}
.offer-description .mobile-break{display:none}
.offer-terms{font-size:.875rem;line-height:1.5;color:var(--muted);margin-top:8px}
.offer-copy>.button{margin-top:32px}
.faq{align-self:start;border-bottom:1px solid #292c2633}
.faq details{border-top:1px solid #292c2633}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px;padding-block:12px;font:400 1.125rem/1.6 var(--sans);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.disclosure-icon{display:inline-flex;width:24px;height:24px;flex-shrink:0}.disclosure-icon .icon{width:24px;height:24px;stroke-width:1.5}
.collapse-icon{display:none}details[open]>summary .expand-icon{display:none}details[open]>summary .collapse-icon{display:block}
.faq details>:not(summary){font-size:1.125rem;line-height:1.6;color:var(--muted);padding-right:32px}
.faq details>summary+*{margin-top:0}.faq details>:last-child{padding-bottom:22px}
.faq details p+p,.faq details ul+p{padding-top:12px}
.faq details ul{padding:8px 32px 0 26px}
.faq details strong{font-weight:500;color:var(--ink)}
.faq details a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.faq .answer-reveal{animation:answer-in .2s ease-out}
@keyframes answer-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Footer, mobile pre-order bar, dialogs */
.footer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 40px;padding-block:28px;align-items:center;border-top:1px solid #292c261a}
.footer-wordmark{display:inline-flex;align-items:center;gap:10px;min-height:44px}.footer-wordmark img{width:24px;height:24px}.footer-wordmark span{font:400 2rem/1 var(--serif)}
.legal-links{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 20px;font:.875rem/1.5 var(--sans);color:var(--muted)}
.legal-links a,.legal-links .temple-cookie-settings{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font:inherit;color:inherit;background:none;text-decoration:underline;text-underline-offset:3px;border:0}
.mobile-reserve{display:none}
dialog{border:0;border-radius:var(--radius-dialog);background:var(--paper);color:var(--ink);width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:48px;box-shadow:0 24px 80px #0002}
dialog::backdrop{background:#252a2466}dialog>img{margin-bottom:32px}dialog h2{font-size:2rem;line-height:1.25;margin-bottom:24px}dialog>p{font-size:1rem;margin-bottom:16px}
.dialog-close{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center}.dialog-return{margin-top:16px}
#finish-dialog{width:min(560px,calc(100% - 24px));text-align:center;padding:40px}
#finish-dialog h2{font-size:1.75rem;margin-bottom:0}
#finish-dialog .selected-ring-image{width:200px;height:200px;object-fit:contain;margin:16px auto 8px}
#finish-dialog .selected-finish-name{font-size:1rem;margin:0 0 12px}
.finish-picker{border:0;padding:0;margin:0 0 24px}
.finish-choice-list{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.finish-choice{position:relative;width:44px;height:44px;display:grid;place-items:center;cursor:pointer}
.finish-choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.finish-choice span{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px #292c2630;pointer-events:none}
.finish-choice input:checked+span{outline:1px solid var(--ink);outline-offset:5px}
.finish-choice input:focus-visible+span{outline:2px solid var(--ink);outline-offset:5px}
#finish-dialog .finish-checkout-price{font:1.25rem/1.4 var(--serif);margin:0 0 20px}
.finish-checkout-price del,.mobile-reserve del{color:var(--muted);font:.875rem var(--sans);margin-left:8px}
.finish-checkout-price small{display:block;font:var(--caption)/1.5 var(--sans);color:var(--muted);margin-top:4px}
.finish-checkout{width:100%}

/* Scroll reveals (sections.js adds .is-in). Nothing is hidden without JS. */
.js [data-reveal],.js [data-reveal-group]>*{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-in,.js [data-reveal-group].is-in>*{opacity:1;transform:none}
.js [data-reveal-group].is-in>*:nth-child(2){transition-delay:.08s}.js [data-reveal-group].is-in>*:nth-child(3){transition-delay:.16s}
.js [data-reveal-group].is-in>*:nth-child(4){transition-delay:.24s}.js [data-reveal-group].is-in>*:nth-child(5){transition-delay:.32s}.js [data-reveal-group].is-in>*:nth-child(6){transition-delay:.4s}
.js .app-scene[data-reveal-group]>.app-memory{transform:translate(-32px,16px)}.js .app-scene[data-reveal-group]>.app-akari{transform:translate(32px,-12px)}
.js .app-scene[data-reveal-group].is-in>.app-memory,.js .app-scene[data-reveal-group].is-in>.app-akari{transform:none}
.js .app-scene[data-reveal-group].is-in>.app-memory{transition-delay:.35s}.js .app-scene[data-reveal-group].is-in>.app-akari{transition-delay:.5s}

/* Tablet and phone: stacked layouts (no phone frames in Figma except Object and Offer + FAQ). */
@media(max-width:1023px){
  .finishes-inner{grid-template-columns:1fr;justify-items:start;gap:8px;padding-block:56px}
  .finish-stage{order:-1;justify-self:center;margin:0;width:min(78vw,360px)}
  .doers-inner,.app-inner,.included-inner{height:auto;--u:1px}
  .doers-inner{padding:64px var(--edge)}
  .doers-copy,.app-copy,.included-copy{position:static;width:auto}
  .doers .eyebrow,.app .eyebrow,.included .eyebrow{margin-left:0}
  .doers h2{margin-top:20px}.doers-body{margin:24px 0 0;max-width:34ch}
  .doers-mosaic{position:relative;inset:auto;width:auto;height:auto;margin-top:40px;border-radius:24px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .tile{position:relative;inset:auto;width:auto;height:auto;border-radius:12px}
  .t1,.t2{grid-column:1/-1}.t1{aspect-ratio:420/454}.t2{aspect-ratio:420/330;order:6}.t3{aspect-ratio:282/252}.t4{aspect-ratio:282/252}.t5{aspect-ratio:282/532}.t6{aspect-ratio:282/532}
  .app-inner{display:flex;flex-direction:column;padding:64px 0 48px}
  .app-copy{order:-1;padding-inline:var(--edge)}
  .app h2{margin-top:20px}.app-body{margin:20px 0 0;max-width:34ch}
  .app-scene{--k:calc(min(100vw - 32px,820px)/840);position:relative;left:auto;top:auto;margin:32px auto 0;flex-shrink:0;align-self:center}
  .included{display:flex;flex-direction:column}
  .included-photo{position:relative;inset:auto;height:auto;aspect-ratio:1}
  .included-photo img{position:absolute;object-position:95% 50%}
  .included-photo:after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,#0b1417)}
  .included-inner{padding:8px var(--edge) 64px}
  .included h2{margin-top:20px}.included-list{margin:32px 0 0;width:auto}
  .included-list li{padding-bottom:18px}.included-list li+li{padding-top:18px}.included-list p{margin-top:6px}
  .offer-layout{grid-template-columns:1fr;gap:56px}
  .hero-visual{left:var(--edge);top:clamp(140px,22vw,200px);bottom:auto;height:42%}
}
@media(max-width:700px){
  .site-header{padding-top:16px;gap:12px}
  .brand-tagline{font-size:15px}
  .site-nav{gap:14px;font-size:14px;padding-top:2px}
  .opening{min-height:max(560px,88svh)}
  .hero{padding-bottom:40px}
  .hero-visual{top:112px;height:auto;bottom:250px}
  .hero h1{font-size:34px;line-height:1.15}
  .hero-description{font-size:16px;margin-top:12px}
  .light-control{bottom:auto;top:96px;right:8px;padding:8px}.light-control .icon{width:16px;height:16px}
  .finishes h2{font-size:34px;text-align:center}
  .finishes-inner>div:not(.finish-stage){width:100%}
  .hero-copy{text-align:center}
  .finish-swatches{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px;width:100%}
  .finish-swatch{font-size:15px}
  .finishes .button{width:100%;font-size:16px}
  .moment-photo img{object-position:50% 40%}
  .moment-photo:after{background:linear-gradient(180deg,#0b1116d9 0,#0b111633 34%,transparent 46%,#0b111680 64%,#0b1116f2 100%)}
  .moment-inner{padding-block:40px calc(32px + var(--reserve-space))}
  .moment.is-pinned .moment-steps{margin-top:auto}
  .moment h2{font-size:30px}
  .moment-line{font-size:24px;margin-top:14px}
  .saved-idea{width:100%;max-width:342px;padding:24px;border-radius:24px}
  .saved-idea h3{font-size:24px;margin-top:12px}.saved-body{font-size:17px;margin-top:12px}.saved-meta{font-size:15px;margin-top:12px}
  .doers-inner,.app-inner{padding-top:56px}
  .belief h2{font-size:34px}
  .offer-layout{padding-block:48px 56px}
  .offer h2{font-size:30px;line-height:1.25}
  .offer-description .dot-sep{display:none}.offer-description .mobile-break{display:inline}
  .offer-copy>.button{width:100%;font-size:1rem}
  .faq summary{font-size:1rem;min-height:64px}
  .faq details>:not(summary){font-size:1rem;padding-right:16px}.faq details ul{padding-right:16px}
  .footer{grid-template-columns:1fr;gap:12px}.legal-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:start;gap:0 16px}
  .mobile-reserve:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;align-items:center;justify-content:space-between;gap:12px;padding:8px 24px calc(8px + env(safe-area-inset-bottom));background:var(--paper);box-shadow:0 -1px 0 #292c2612;z-index:10}
  .mobile-reserve>span{font:var(--support)/1.4 var(--sans)}.mobile-reserve small{display:block;font:.75rem/1.5 var(--sans);color:var(--muted);margin-top:2px}.mobile-reserve del{font-size:.75rem;margin-left:4px}
  .mobile-reserve .button{flex-shrink:0;min-width:100px;padding-inline:16px}
  dialog{padding:40px 24px}#finish-dialog{padding:32px 24px 24px}#finish-dialog .selected-ring-image{width:180px;height:180px}
}
@media(max-width:359px){.site-nav{gap:10px;font-size:13px}.wordmark{font-size:24px}.brand-tagline{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.button,.belief-button{border:1px solid ButtonText}.placeholder{border-color:CanvasText}}

/* 04 Object — carried over unchanged from site/third-version (built 2 Nov, Figma 590:154 + 683:*) */
/* Object section: scroll-scrubbed exploded ring (2026-11-02) */
.object-scroll{--object-bg:#00080c;background:radial-gradient(ellipse 70% 60% at 70% 50%,#03232c 0%,#021b23 38%,#00080c 85%) #00080c;--object-ink:#f6f3ed;--object-muted:#f6f3ed9e;position:relative;color:var(--object-ink);margin-top:var(--section-gap)}
.object-stage{position:relative}
.object-layout{width:min(calc(100% - var(--gutter)*2),1200px);margin-inline:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding-block:64px}
.object-visual{grid-column:6/13;grid-row:1;position:relative;aspect-ratio:4/5;max-height:88vh;justify-self:center;width:100%}
.object-visual canvas,.object-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.object-visual canvas{display:none}
.object-copy{grid-column:1/6;grid-row:1;position:relative}
.object-features{list-style:none;margin:0;padding:0}
.object-step+.object-features,.object-features>.object-step+.object-step{margin-top:48px}
.object-bookend,.object-ticks{display:none}
.object-index{font-size:var(--support);color:var(--object-muted);letter-spacing:.08em;margin-bottom:16px;font-variant-numeric:tabular-nums}
.object-step h3{font-size:2rem;line-height:1.25}
.object-line{margin-top:16px;font-size:var(--body);line-height:1.6;color:var(--object-muted);max-width:34ch}
.object-bookend-title{font:var(--heading)/1.2 var(--serif);letter-spacing:-.015em}
/* Timed loop, with native page scrolling and a static reduced-motion fallback. */
.object-scroll.is-scrubbing{height:auto}
.is-scrubbing .object-stage{position:relative;min-height:640px;height:100svh;overflow:hidden;display:flex;align-items:center}
.is-scrubbing .object-layout{padding-block:0;height:100%}
.is-scrubbing .object-layout{grid-template-rows:minmax(0,1fr)}
.is-scrubbing .object-visual{height:min(92vh,92svh,calc((min(100vw,1200px + var(--gutter)*2) - var(--gutter)*2)*.6*1.25));max-height:none;width:auto;align-self:center}
.is-scrubbing .object-visual canvas{display:block}
.is-scrubbing.has-frames .object-poster{display:none}
.is-scrubbing .object-steps{position:relative;min-height:20rem}
.is-scrubbing .object-features>.object-step+.object-step,.is-scrubbing .object-step+.object-features{margin-top:0}
.is-scrubbing .object-step{position:absolute;left:0;right:0;top:50%;opacity:0;transform:translateY(calc(-50% + 24px));pointer-events:none}
.is-live .object-step{transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.is-scrubbing .object-step.is-active{opacity:1;transform:translateY(-50%)}
.is-scrubbing .object-bookend{display:block}
.is-scrubbing .object-ticks{display:flex;gap:8px;margin-top:8px;position:absolute;left:0;top:calc(50% + 12rem)}
.object-ticks span{width:24px;height:2px;background:#f6f3ed2e;transition:background .4s ease}
.object-ticks span.is-on{background:var(--object-ink)}
@media(max-width:900px){
 .object-layout{display:flex;flex-direction:column;align-items:stretch}
 .object-visual{width:100%;max-width:520px;align-self:center}
 .object-copy{margin-top:32px}
 .is-scrubbing .object-layout{justify-content:flex-start;padding-bottom:var(--reserve-space,0px)}
 .is-scrubbing .object-visual{flex:1 1 auto;min-height:0;height:auto;width:100%;max-width:none;aspect-ratio:auto}
 .is-scrubbing .object-copy{flex:0 0 auto;margin-top:0;padding-bottom:32px}
 .is-scrubbing .object-steps{min-height:13.5rem}
 .is-scrubbing .object-step{top:0;transform:translateY(16px)}
 .is-scrubbing .object-step.is-active{transform:none}
 .is-scrubbing .object-ticks{display:none}
}
@media(max-width:600px){.object-step h3{font-size:1.5rem}.object-line{margin-top:12px}.is-scrubbing .object-steps{min-height:12.5rem}}
.object-stage{isolation:isolate}.object-ambient{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity .8s ease}.object-ambient.is-ready{opacity:1}
@media(max-width:900px){.object-scroll{background:radial-gradient(ellipse 90% 45% at 50% 35%,#03232c 0%,#021b23 40%,#00080c 90%) #00080c}}
.faq details p+p,.faq details ul+p{padding-top:8px}.faq details ul{margin:0;padding:8px 32px 0 22px;font-size:1rem;line-height:1.6;color:var(--muted)}.faq details strong{font-weight:500;color:var(--ink)}@media(max-width:600px){.faq details ul{padding-right:16px}}

/* Phone hero: header on one line, film in normal flow under the header, copy right after it (no empty gap). */
@media(max-width:700px){
  .site-header{align-items:flex-start}
  .brand-lockup{min-width:0}
  .wordmark{font-size:26px}
  .brand-tagline{font-size:14px;white-space:nowrap}
  .site-nav a,.site-nav button{white-space:nowrap}
  .opening{min-height:0}
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding-top:112px;padding-bottom:48px}
  .hero-visual{position:relative;inset:auto;width:100%;max-height:none}
  .light-control{top:72px}
}
@media(max-width:359px){.brand-tagline{font-size:12px}.wordmark{font-size:23px}}
@media(max-width:700px){.moment-line{font-size:22px}}
@media(max-width:374px){.moment-line{font-size:20px}}

/* Full bleed hero film with contrast for copy across every shot. */
.opening{min-height:max(640px,100svh);overflow:hidden;background:#061216;color:var(--paper)}
.hero-visual{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;overflow:hidden;border-radius:0;pointer-events:none}
.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#020a0d70 0%,#020a0d10 38%,#020a0db8 100%),linear-gradient(90deg,#020a0d40,transparent 75%)}
.hero-film{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero{z-index:1;width:100%}
.hero-copy{max-width:760px;text-shadow:0 2px 24px #0005}
.opening .nav-todo{opacity:.85}
@media(max-width:700px){
  .opening{min-height:max(640px,88svh)}
  .hero{display:grid;align-items:end;gap:0;padding-top:140px;padding-bottom:48px}
  .hero-copy{width:100%;padding-bottom:0}
}
/* Scaled sections (For doers, App, What's included) on tablet and phone: explicit type sizes. */
@media(max-width:1023px){.doers h2,.included h2{font-size:40px}.app h2{font-size:44px}.doers-body,.app-body{font-size:18px}.eyebrow{font-size:12px}}
@media(max-width:700px){.doers h2,.included h2,.app h2{font-size:32px}.doers-body,.app-body{font-size:16px}.included-list h3{font-size:19px}.included-list p{font-size:15px}}
@media(max-width:700px){:root{--edge-wide:24px}}

/* Hero navigation and copy are visible immediately, independently of video playback. */
@media(max-width:700px){
  .site-header{gap:16px}
  .site-nav>a{display:none}
  .site-nav{flex-shrink:0;gap:0}
  .site-nav .nav-preorder{white-space:nowrap}
  .brand-tagline{font-size:clamp(12px,3.4vw,14px);white-space:nowrap}
}

.finish-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;background:transparent;opacity:0;transition:opacity .4s ease}
.finish-stage.is-3d-ready iframe{opacity:1}
.finish-stage.is-3d-ready>img{opacity:0}

/* Case emblem: exact ring contours and small circular mark. */
.wordmark{display:inline-flex;align-items:center;gap:.22em}
.wordmark img{display:block;width:1em;height:1em;flex-shrink:0}

/* Preferred Beauchesne lettering from Figma Branding579:4495. */
.brand-tagline{line-height:0;margin-top:6px}
.brand-tagline-art{display:block;width:clamp(220px,17vw,294px);max-width:100%;height:auto}
@media(max-width:700px){.brand-tagline-art{width:clamp(170px,46vw,200px)}}

/* Pinned conversation: a bounded reading slot keeps the saved card fully visible. */
.moment.is-pinned .moment-inner{height:100svh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(16px,3svh,32px);padding-top:clamp(24px,5svh,48px);padding-bottom:calc(24px + var(--reserve-space,0px))}
.moment.is-pinned .moment-steps{position:relative;min-height:0;margin:0;display:block}
.moment.is-pinned .moment-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.moment.is-pinned .moment-step-card{display:block}
.moment.is-pinned .saved-idea{position:absolute;left:0;top:50%;max-width:100%;padding:clamp(20px,2.4svh,32px);transform-origin:top left;transform:scale(var(--idea-scale,1)) translateY(-50%)}
.moment.is-pinned .saved-label{font-size:clamp(12px,1.8svh,16px)}
.moment.is-pinned .saved-idea h3{font-size:clamp(24px,3.5svh,32px);margin-top:16px}
.moment.is-pinned .saved-body{font-size:clamp(16px,2.5svh,20px);margin-top:16px}
.moment.is-pinned .saved-meta{font-size:clamp(14px,2.2svh,18px);margin-top:16px}
@media(max-height:600px){.moment.is-pinned h2{font-size:clamp(24px,5svh,32px)}.moment.is-pinned .moment-sub{font-size:16px;margin-top:12px}.moment.is-pinned .moment-line{font-size:clamp(20px,4.5svh,26px);margin-top:12px}}
@media(min-width:540px) and (max-height:600px){.moment.is-pinned .moment-inner{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);align-items:center;column-gap:40px}.moment.is-pinned .moment-steps{height:100%}}

/* Founder revision: a native scrolling conversation and concrete use cases. */
.hero-copy{max-width:1000px}.hero h1{font-size:clamp(38px,4.25vw,74px);max-width:14em}
.moment.is-conversation{height:auto}.moment.is-conversation .moment-stage{position:relative;min-height:820px}
.moment.is-conversation .moment-inner{min-height:820px;display:grid;grid-template-rows:auto minmax(400px,1fr);gap:44px;padding-block:64px}
.conversation-demo{position:relative;max-width:620px;display:flex;flex-direction:column;justify-content:center;min-height:410px}
.conversation-voice{height:40px;display:flex;align-items:center;gap:3px;margin-bottom:20px}
.conversation-voice i{width:2px;height:24px;transform-origin:center;border-radius:2px;background:#f6f3ed}
.moment:not(.is-speaking) .conversation-voice i{animation:none;transform:scaleY(.35)}
.conversation-token{opacity:0}
.is-conversation .moment-steps{position:relative;margin:0;display:grid;min-height:300px;align-items:center;gap:0!important}
.is-conversation .moment-step{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s;align-self:center}
.is-conversation .moment-step.is-active{opacity:1;visibility:visible;pointer-events:auto}
.is-conversation .moment-line{font-size:clamp(25px,2.5vw,42px);line-height:1.25;margin-top:20px;min-height:4.9em;max-width:24ch}
.memory-prompt p{font:italic 400 clamp(32px,3.4vw,52px)/1.3 var(--serif)}
.is-conversation .saved-idea{width:min(420px,100%);padding:28px;border-radius:28px}.is-conversation .saved-idea h3{font-size:28px}.is-conversation .saved-body{font-size:19px}.is-conversation .saved-meta{font-size:16px}
.conversation-controls{display:flex;gap:24px;margin-top:28px;font-size:14px;color:#f6f3edb3}.conversation-controls button{min-height:44px;text-decoration:underline;text-underline-offset:5px}
html:not(.js) .conversation-controls{display:none}
.use-cases{position:relative;isolation:isolate;overflow:hidden;background:#00151c;color:var(--paper)}
.use-cases .object-ambient{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.use-cases-inner{padding-block:90px 100px}.use-cases .eyebrow{color:#bdcecb}.use-cases h2{font-size:clamp(40px,4.3vw,70px);line-height:1.12;margin-top:24px}
.use-cases-intro{max-width:42ch;color:#c0ceca;font-size:20px;line-height:1.5;margin-top:24px}
.use-case-tabs{display:flex;gap:32px;border-bottom:1px solid #f6f3ed30;margin-top:52px}.use-case-tabs button{min-height:56px;padding:12px 0;border-bottom:2px solid transparent;color:#b9c9c6;font-size:17px}.use-case-tabs button[aria-selected=true]{color:#fff;border-color:#f6f3ed}
.use-case-panels{margin-top:48px;min-height:350px}.use-case-panels article{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,8vw,140px);align-items:center}.use-case-number{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#b9ceca}.use-case-panels h3{font-size:clamp(32px,3vw,48px);line-height:1.15;margin-top:20px}.use-case-panels article>div>p:not(.use-case-number){max-width:39ch;color:#bccdc9;margin-top:24px;line-height:1.65}
.use-case-note{padding:36px;border-radius:28px;background:linear-gradient(130deg,#ffffff18,#ffffff06);border:1px solid #ffffff35;box-shadow:inset 0 1px 1px #fff3,0 32px 80px #0003;backdrop-filter:blur(16px)}.use-case-note blockquote{font:400 clamp(24px,2.25vw,34px)/1.4 var(--serif);margin-top:22px}.note-wave{display:block;color:#c7e3dc;margin-bottom:26px;letter-spacing:5px}.note-result{font-size:15px;color:#bbcfc8}.use-case-note .moment-speaker{font-size:12px}
.doers-inner{height:auto;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:64px;padding:90px var(--edge)}
.doers-copy{position:static;width:auto}.doers h2{font-size:clamp(36px,3.5vw,56px);margin-top:24px;line-height:1.2}.doers-body{font-size:20px;margin:28px 0 0;max-width:36ch}.doers-reasons{list-style:none;margin-top:30px;max-width:38ch;font-size:17px;line-height:1.6;color:#68695f}.doers-reasons li{padding:14px 0;border-top:1px solid #292c2620}.doers-reasons strong{color:#363930;font-weight:500}
.doers-mosaic{position:relative;inset:auto;width:100%;height:620px;--u:calc(min(42vw,620px)/1152);border-radius:28px;margin:0}
@media(max-width:1023px){.doers-inner{gap:36px;padding-block:64px}.doers-mosaic{height:calc(42vw * .754)}.doers-body{font-size:18px}.doers-reasons{font-size:15px}}
@media(max-width:700px){.hero-copy{max-width:100%}.hero h1{font-size:clamp(34px,8.5vw,54px);line-height:1.14}.hero-film{object-position:50% 50%}.hero{padding-bottom:50px}.hero-description{font-size:17px}
.moment.is-conversation .moment-stage{min-height:760px}.moment.is-conversation .moment-inner{min-height:760px;grid-template-rows:auto minmax(390px,1fr);gap:24px;padding-block:44px}.moment h2{font-size:32px}.conversation-demo{min-height:410px}.is-conversation .moment-line{font-size:26px;max-width:23ch}.is-conversation .saved-idea{padding:24px}.is-conversation .saved-idea h3{font-size:26px}.conversation-voice{margin-bottom:14px}
.use-cases-inner{padding-block:60px}.use-cases-intro{font-size:18px}.use-case-tabs{gap:20px;overflow-x:auto;margin-top:32px}.use-case-tabs button{font-size:14px;white-space:nowrap}.use-case-panels article{grid-template-columns:1fr;gap:32px}.use-case-panels{min-height:660px;margin-top:32px}.use-case-note{padding:28px}.use-case-panels h3{font-size:34px}
.doers-inner{display:flex;flex-direction:column;align-items:stretch;padding-block:60px;gap:36px}.doers-body{font-size:18px}.doers-reasons{font-size:16px}.doers-mosaic{height:auto;--u:1px;border-radius:24px;margin:0}.doers-mosaic .tile{border-radius:12px}
}
@media(prefers-reduced-motion:reduce){.conversation-demo .conversation-voice,.conversation-controls{display:none}.moment-steps{display:block}.moment-step{margin-top:32px}.memory-prompt{font-style:italic}}
.finishes-intro{max-width:34ch;margin-top:22px;font-size:clamp(17px,1.4vw,22px);line-height:1.5;color:var(--muted)}
@media(max-width:700px){.finishes-intro{margin-inline:auto;text-align:center}}
@media(min-width:1024px){.doers-mosaic{height:auto;aspect-ratio:1152/868;container-type:inline-size;--u:calc(100cqw / 1152)}}
@media(min-width:701px) and (max-width:1023px){.doers-inner{grid-template-columns:1.1fr 1fr}.doers-mosaic{height:auto;aspect-ratio:auto;align-self:center}.doers-mosaic .tile{aspect-ratio:1;grid-column:auto;order:initial}.doers-mosaic .t1,.doers-mosaic .t2{grid-column:1/-1;aspect-ratio:2/1}}
@media(max-width:700px){.doers-mosaic{aspect-ratio:auto}.doers-mosaic .tile{grid-column:auto;order:initial;aspect-ratio:1.3}.doers-mosaic .t1,.doers-mosaic .t2{aspect-ratio:1.3}}
.moment.is-conversation .moment-step{grid-area:1/1}

/* Memory keeps its prompt while the card grows into the space below it.
   Never fade an ancestor of backdrop-filter: that postpones its glass composite. */
.moment.is-conversation .moment-steps{min-height:420px}
.moment.is-conversation .memory-result{opacity:1;visibility:visible;transition:none;width:min(420px,100%);clip-path:inset(0 0 100% 0);pointer-events:none}
.moment.is-conversation .memory-result.is-active{clip-path:none;pointer-events:auto}
.moment.is-conversation .memory-prompt{font:italic 400 clamp(19px,1.65vw,24px)/1.4 var(--serif);min-height:0;margin:0;max-width:none}
.memory-card-reveal{display:grid;grid-template-rows:0fr;margin-top:0;transition:grid-template-rows .65s cubic-bezier(.22,.7,.2,1),margin-top .65s cubic-bezier(.22,.7,.2,1)}
.memory-card-reveal>div{min-height:0;overflow:hidden;padding-inline:1px}
.memory-result.is-saved .memory-card-reveal{grid-template-rows:1fr;margin-top:20px}
.memory-card-reveal .saved-idea{opacity:1;visibility:visible;transform:none;transition:none;isolation:auto}
@media(prefers-reduced-motion:reduce){.memory-card-reveal{grid-template-rows:1fr;margin-top:20px;transition:none}.memory-prompt{font:italic 400 22px/1.4 var(--serif)}}
.moment:not(.is-conversation) .memory-card-reveal{grid-template-rows:1fr;margin-top:20px}

.memory-result.is-reveal-complete .memory-card-reveal>div{overflow:visible}

/* Give the doers mosaic a larger share while retaining readable copy. */
@media(min-width:1024px){.doers-inner{grid-template-columns:minmax(340px,.85fr) minmax(0,1.35fr);gap:48px}.doers h2{font-size:clamp(36px,3.2vw,54px)}}
@media(min-width:701px) and (max-width:1023px){.doers-inner{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:32px}}
@media(max-width:700px){.doers-mosaic .tile,.doers-mosaic .t1,.doers-mosaic .t2{aspect-ratio:.95}}

.doers h2{text-wrap:balance}

/* Founder app example: current priorities and a sourced product perspective. */
.app-reply{font-size:calc(var(--k)*20);line-height:1.55}
.app-akari{height:calc(var(--k)*417)}
.app-akari .app-card-glass{height:calc(var(--k)*396)}
.app-akari .app-card-shadow{top:calc(var(--k)*363)}
.app-akari-title{font-size:calc(var(--k)*25);top:calc(var(--k)*222)}
.app-akari-by{top:calc(var(--k)*259)}
.app-inspiration-work{left:calc(var(--k)*30);top:calc(var(--k)*286);width:calc(var(--k)*195);font:400 calc(var(--k)*17)/1.3 var(--serif);color:#363930}
.app-akari-rule{top:calc(var(--k)*346)}
.app-akari-link{top:calc(var(--k)*363)}

.app-memory{top:calc(var(--k)*535)}

/* Customer interview AI example; overlay positions remain unchanged. */
.app-you{top:calc(var(--k)*355);font-size:calc(var(--k)*18);line-height:1.45}
.app-rule{top:calc(var(--k)*477)}
.app-who-temple{top:calc(var(--k)*503)}
.app-reply{top:calc(var(--k)*533);font-size:calc(var(--k)*18.5);line-height:1.5}
.app-controls{top:calc(var(--k)*744)}
.app-memory-text{font-size:calc(var(--k)*22);line-height:1.35}
.app-akari-photo{object-position:50% 40%}

/* Give the camera-cast ring shadow room beyond the product bounds. */
.finish-stage iframe{left:-25%;width:150%;right:auto}

/* No differently framed poster while WebGL starts. */
.js .finish-stage>img{opacity:0;visibility:hidden;transform:none;transition:none}
.js .finish-stage.is-viewer-fallback>img.is-shown{opacity:1;visibility:visible}
.finish-stage iframe{transition:opacity .25s ease}
@media(prefers-reduced-motion:reduce){.finish-stage iframe{transition:none}}

/* Fill behind translucent mobile browser chrome; keep copy in the visible viewport. */
@media(max-width:700px){
  .opening{min-height:100vh;min-height:100lvh}
  .opening .hero{min-height:100vh;min-height:100dvh;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
}

/* Paint the hero edge to edge while its controls stay inside device cutouts. */
@media(max-width:700px){
  .opening .site-header{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:max(var(--edge),env(safe-area-inset-left,0px));padding-right:max(var(--edge),env(safe-area-inset-right,0px))}
  .opening .hero{padding-left:max(var(--edge),env(safe-area-inset-left,0px));padding-right:max(var(--edge),env(safe-area-inset-right,0px))}
}

/* Safari samples the page canvas for its safe-area/browser backgrounds. */
@media(max-width:700px){
  html[data-hero-chrome],html[data-hero-chrome] body{background-color:#061216}
  html[data-hero-chrome] main,html[data-hero-chrome] .footer{background-color:var(--paper)}
}

/* Rounded preorder CTAs across desktop and mobile. */
[data-reserve].button{border-radius:999px}
.site-header .site-nav [data-reserve],.site-header .mobile-icon-nav [data-reserve]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .16s ease}
.site-header .site-nav [data-reserve]:hover,.site-header .mobile-icon-nav [data-reserve]:hover{background:var(--stone);text-decoration:none}
@media(max-width:359px){.site-header .mobile-icon-nav [data-reserve]{padding-inline:14px}}

/* Approved Cormorant hero: 25% larger than the original headline scale. */
.hero h1{font-size:clamp(47.5px,5.3125vw,92.5px)}
@media(max-width:700px){.hero h1{font-size:clamp(42.5px,10.625vw,67.5px)}}

/* Discreet playback control stays available for the repeating product demonstration. */
.object-playback{position:absolute;z-index:2;right:var(--gutter);top:16px;min-width:64px;min-height:44px;padding:10px 12px;border:1px solid #f6f3ed40;border-radius:999px;color:var(--object-ink);background:#00080c66;font:400 12px/1.4 var(--sans)}
.object-playback:hover{background:#f6f3ed18}

/* A direct user gesture starts the film when the browser blocks autoplay. */
.hero-visual{pointer-events:auto}
.hero-visual:after{pointer-events:none}
.hero-play-film{position:absolute;z-index:3;left:50%;top:48%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;border:1px solid #f6f3ed70;border-radius:999px;padding:13px 20px;background:#06121680;color:#f6f3ed;font:500 14px/1.2 Switzer,Arial,sans-serif;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;min-height:48px}
.hero-play-film:before{content:'';width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.hero-play-film[hidden]{display:none}
.hero-play-film:focus-visible{outline:2px solid #f6f3ed;outline-offset:5px}

/* The still stays visible until a real playing event, including blocked autoplay. */
.hero-film-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.hero-film{position:relative;opacity:0;transition:opacity .3s linear}
.has-hero-playback .hero-film{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-film{transition:none}}