/* Tradial. One stylesheet, no build step.
   Sizes are in rem so the page follows the reader's own text size. */
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans.woff2") format("woff2");font-weight:100 1000;font-display:swap}

:root{
  color-scheme:dark;
  --ink:#0c0d0f; --ink-2:#121316; --ink-3:#191b1f; --line:#ffffff14; --line-2:#ffffff24;
  --paper:#f6f5f1; --muted:#a3a7af; --dim:#c9cbd0; --amber:#ffb547; --amber-ink:#1a1305;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* springs. A plain curve first, for browsers without linear(); the sampled springs replace it below. */
  --spring:cubic-bezier(.2,.9,.25,1); --bounce:cubic-bezier(.3,1.35,.45,1);
  --r:1.125rem; --nav:4.5rem;
  --glass:#0c0d0fb8; --glass-blur:saturate(180%) blur(20px);
}
/* critically damped for most things; a little bounce only where something was thrown */
@supports (animation-timing-function:linear(0,1)){:root{
  --spring:linear(0,.058,.1815,.3227,.4574,.5754,.6735,.7523,.8141,.8618,.898,.9252,.9454,.9604,.9713,.9794,.9852,.9894,.9924,.9946,.9962,.9973,.9981,.9986,1);
  --bounce:linear(0,.0575,.1883,.3463,.5029,.6424,.7577,.8474,.9134,.9593,.9892,1.007,1.0162,1.0197,1.0195,1.0174,1.0144,1.0112,1.0082,1.0057,1.0037,1.0022,1.0012,1.0004,1,.9997,.9996,.9996,1);
}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + .75rem);-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--ink);color:var(--paper);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-optical-sizing:auto;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3,p,figure,ul{margin:0}
:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:6px}
.skip{position:fixed;top:-5rem;left:.75rem;background:var(--amber);color:var(--amber-ink);padding:.625rem .875rem;z-index:200;border-radius:.5rem;font-weight:650}
.skip:focus{top:.75rem}
.wrap{width:min(73.75rem,calc(100% - 2.5rem - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));margin-inline:auto}
@media(min-width:60em){.wrap{width:min(73.75rem,calc(100% - 6rem - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}}
[hidden]{display:none!important}

/* ---------- type: tracking tightens as the size grows, leading loosens as it shrinks ---------- */
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--amber);margin-bottom:1.375rem}
.kicker{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:650;color:var(--amber);margin-bottom:.75rem}
h1{font-size:clamp(2.25rem,10vw,5.75rem);line-height:.97;letter-spacing:-.042em;font-weight:640;text-wrap:balance}
h2{font-size:clamp(2.25rem,5.4vw,4.5rem);line-height:1.02;letter-spacing:-.04em;font-weight:600;margin-bottom:1.5rem;text-wrap:balance}
h2>span{color:var(--muted)}
em{font-style:normal;color:var(--amber);white-space:nowrap}
h3{font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.12;letter-spacing:-.028em;font-weight:600;text-wrap:balance}
.lead{font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.55;color:var(--dim);max-width:40rem;text-wrap:pretty}
.section-head{max-width:51.25rem;margin-bottom:3rem}
section{padding-block:clamp(4.5rem,10vw,8.75rem)}
br.wide{display:none}@media(min-width:47.5em){br.wide{display:inline}}

/* ---------- buttons: they answer on the press, not the release ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:3rem;padding:.875rem 1.625rem;border-radius:999px;font-weight:650;font-size:1rem;line-height:1.2;border:1px solid transparent;white-space:nowrap;transition:transform .5s var(--spring),background .2s,border-color .2s,color .2s}
.btn.primary{background:var(--amber);color:var(--amber-ink)}
.btn.ghost{background:#ffffff10;border-color:var(--line-2);color:var(--paper)}
.pill{display:inline-flex;align-items:center;white-space:nowrap;min-height:2.5rem;padding:.5rem 1rem;border-radius:999px;background:var(--paper);color:var(--ink);font-weight:650;font-size:.875rem;transition:transform .5s var(--spring),background .2s}
@media(hover:hover){.btn:hover{transform:scale(1.025)}.btn.primary:hover{background:#ffc66a}.btn.ghost:hover{background:#ffffff1a}.pill:hover{background:#fff;transform:scale(1.03)}}
.btn:active,.pill:active{transform:scale(.96);transition-duration:.08s}
.wide-btn{width:100%;margin-top:1.375rem}
.round-btn{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line-2);background:#ffffff12;color:#fff;display:grid;place-items:center;flex:none;transition:background .2s,transform .5s var(--spring)}
.round-btn svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.round-btn:hover{background:#ffffff24}}
.round-btn:active{transform:scale(.9);transition-duration:.08s}

/* ---------- nav: a sheet of glass the page slides under ---------- */
header{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0);transition:transform .6s var(--spring)}
header::before{content:"";position:absolute;inset:0;background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 1px 0 var(--line);opacity:0;transition:opacity .35s}
header.solid::before,header.menu-open::before{opacity:1}
header.hide{transform:translateY(-100%)}
header:focus-within{transform:none}
nav.wrap{position:relative;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:block;flex:none}
.brand img{width:7.375rem;height:auto}
.navend{display:flex;align-items:center;gap:.625rem}
.menubtn{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line-2);background:#ffffff10;display:grid;place-content:center;gap:.375rem}
.menubtn span{display:block;width:1.125rem;height:2px;border-radius:2px;background:#fff;transition:transform .45s var(--spring)}
.menu-open .menubtn span:first-child{transform:translateY(.25rem) rotate(45deg)}
.menu-open .menubtn span:last-child{transform:translateY(-.25rem) rotate(-45deg)}
.navlinks{position:absolute;top:calc(100% + .5rem);right:0;min-width:14rem;display:grid;padding:.5rem;border-radius:1.125rem;background:#16181ce6;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line-2);box-shadow:0 1.5rem 3.5rem #000000a0;
  transform-origin:calc(100% - 1.375rem) -0.5rem;transform:scale(.9);opacity:0;visibility:hidden;transition:transform .45s var(--spring),opacity .2s,visibility 0s .25s}
.menu-open .navlinks{transform:none;opacity:1;visibility:visible;transition:transform .5s var(--spring),opacity .18s,visibility 0s}
.navlinks a{white-space:nowrap;padding:.75rem .875rem;border-radius:.75rem;font-size:1rem;color:var(--paper)}
.navlinks a:active{background:#ffffff14}
.navlinks a[aria-current]{color:var(--amber)}
@media(min-width:68em){
  .menubtn{display:none}
  .navlinks{position:static;display:flex;gap:1.75rem;min-width:0;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none;opacity:1;visibility:visible;transition:none;font-size:.875rem}
  .navlinks a{position:relative;padding:.375rem 0;border-radius:0;font-size:.875rem;color:var(--dim);transition:color .2s}
  .navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--spring)}
  .navlinks a:hover,.navlinks a[aria-current]{color:#fff}
  .navlinks a:hover::after,.navlinks a[aria-current]::after{transform:none}
}

/* ---------- hero ---------- */
.hero{padding-top:calc(var(--nav) + env(safe-area-inset-top,0px) + clamp(2.25rem,6vw,4.5rem));padding-bottom:clamp(3.75rem,8vw,6.875rem);position:relative;overflow:clip}
.hero::before{content:"";position:absolute;left:50%;top:-10%;width:120vw;height:70vh;transform:translateX(-50%);background:radial-gradient(60% 60% at 50% 30%,#ffb54722,transparent 70%);pointer-events:none}
.hero-copy{text-align:center;position:relative;max-width:56.25rem}
.hero-copy .lead{margin:1.625rem auto 2.125rem;max-width:42.5rem}
.hero-copy>*{opacity:0;transform:translateY(1.125rem);animation:rise .9s var(--spring) forwards}
.hero-copy>:nth-child(2){animation-delay:.07s}.hero-copy>:nth-child(3){animation-delay:.14s}.hero-copy>:nth-child(4){animation-delay:.21s}
.cta-row{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
@keyframes rise{to{opacity:1;transform:none}}

.hero-stage{margin-top:clamp(2.5rem,5vw,3.75rem);perspective:100rem;position:relative}
.stage-note{text-align:center;color:var(--muted);font-size:.8125rem;margin-top:1.375rem;opacity:0;animation:rise .8s var(--spring) 1.2s forwards}
.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.625rem;transform-style:preserve-3d}
@media(min-width:35em){.tile-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}}
@media(min-width:60em){.tile-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.875rem}}
.tile{position:relative;aspect-ratio:1/.98;border-radius:1rem;padding:.875rem;display:flex;flex-direction:column;text-align:left;border:0;color:#e8eaee;
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 26%,#15181d),#101317 62%,color-mix(in srgb,var(--acc) 12%,#0c0e11));
  box-shadow:0 2px 8px #00000040,inset 0 0 0 1px #ffffff0a;
  opacity:0;transform:translateY(1.75rem) scale(.94);
  transition:transform .7s var(--bounce),box-shadow .45s var(--ease),opacity .45s;
  -webkit-user-select:none;user-select:none}
.tile.in{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){.tile.in:hover{transform:translateY(-.375rem) scale(1.03);box-shadow:0 1.125rem 2.5rem #00000070,0 0 0 1px color-mix(in srgb,var(--acc) 50%,transparent)}}
.tile.in.pressed{transform:scale(.955);transition-duration:.09s}
.tile .ic{width:2.75rem;height:2.75rem;border-radius:.6875rem;background:var(--acc);display:grid;place-items:center;flex:none}
.tile .ic svg{width:1.5625rem;height:1.5625rem;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile .st{margin-top:auto;overflow-wrap:anywhere;font-size:.75rem;line-height:1.35;color:#b9bfc8;font-weight:500}
.tile .nm{font-size:1.0625rem;font-weight:650;letter-spacing:-.02em;line-height:1.15;margin-top:.3125rem;color:#fff}
.tile .bd{position:absolute;top:.625rem;right:.625rem;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:.625rem;background:var(--amber);color:var(--amber-ink);font-size:.6875rem;font-weight:700;line-height:1.25rem;text-align:center}
@media(min-width:60em){.tile{padding:1.125rem;aspect-ratio:1/.9}.tile .ic{width:3.375rem;height:3.375rem;border-radius:.75rem}.tile .ic svg{width:1.875rem;height:1.875rem}.tile .st{font-size:.8125rem}.tile .nm{font-size:1.25rem}}
.tile.more{display:none}@media(min-width:35em){.tile.more{display:flex}}

/* ---------- frames: a window, a phone, a sheet of paper ---------- */
.shot{display:block;width:100%;padding:0;border:0;background:none;text-align:inherit;cursor:zoom-in;position:relative}
.phone-frame{position:relative;aspect-ratio:390/844;width:100%;max-width:21.25rem;margin-inline:auto;border-radius:2.75rem;background:#000;padding:.625rem;box-shadow:0 0 0 1px #2a2c31,0 0 0 4px #0a0b0d,0 1.875rem 4.375rem #00000080,inset 0 0 0 1px #ffffff10;overflow:hidden}
.phone-frame>img,.phone-frame>video{position:absolute;inset:.625rem;width:calc(100% - 1.25rem);height:calc(100% - 1.25rem);object-fit:cover;object-position:top;border-radius:2.125rem;background:var(--ink)}
.window-frame{position:relative;border-radius:.875rem;overflow:hidden;background:var(--ink);box-shadow:0 0 0 1px #2a2c31,0 1.875rem 4.375rem #00000080;aspect-ratio:1600/1051}
.window-bar{height:5%;min-height:1.125rem;max-height:2rem;background:#17191d;display:flex;align-items:center;gap:.4375rem;padding-left:.875rem;border-bottom:1px solid #ffffff10;position:absolute;inset:0 0 auto;z-index:2}
.window-bar i{width:.6875rem;height:.6875rem;border-radius:50%;background:#3a3d44}
.window-bar i:first-child{background:#ff5f57}.window-bar i:nth-child(2){background:#febc2e}.window-bar i:nth-child(3){background:#28c840}
.window-frame>img,.window-frame>video{position:absolute;left:0;right:0;bottom:0;width:100%;height:95.15%;object-fit:cover;object-position:top}
.paper-frame{border-radius:.625rem;overflow:hidden;background:#fff;box-shadow:0 0 0 1px #2a2c31,0 1.875rem 4.375rem #00000080}
.paper-frame img{width:100%;height:auto}
.shot::after{content:"";position:absolute;right:.75rem;bottom:.75rem;width:2.25rem;height:2.25rem;border-radius:50%;z-index:3;
  background:#0c0d0fcc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='5.5'/%3E%3Cpath d='M15 15l4.5 4.5M10.5 8.2v4.6M8.2 10.5h4.6'/%3E%3C/svg%3E") center/1.125rem no-repeat;
  box-shadow:0 0 0 1px #ffffff2a;opacity:0;transform:scale(.8);transition:opacity .2s,transform .45s var(--spring)}
@media(hover:hover){.shot:hover::after{opacity:1;transform:none}}
.shot:focus-visible::after{opacity:1;transform:none}
@media(hover:none){.shot::after{opacity:.9;transform:none}}
.shot:active{transform:scale(.992)}

/* stacked steps inside a frame: a cross-fade, the new screen settling forward */
.stack>img{opacity:0;transform:scale(1.012);transition:opacity .5s var(--ease),transform .7s var(--spring)}
.stack>img.on{opacity:1;transform:none}


/* ---------- two documents ---------- */
.twodocs{background:var(--ink-2);border-top:1px solid var(--line)}
.twodocs .section-head{max-width:53.75rem}
.lead.strong{color:var(--paper);font-weight:600;margin-top:1.125rem}
.docs-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start;margin-top:3.5rem}
@media(min-width:60em){.docs-grid{grid-template-columns:1fr 1.3fr;gap:3rem}}
.docs-grid figure{display:flex;flex-direction:column;gap:1.25rem}
.docs-grid figcaption{padding:0}
.docs-grid figcaption strong{display:block;font-size:1.5rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.5rem}
.docs-grid figcaption>span:last-child{font-size:.9375rem;color:var(--dim);display:block;max-width:27.5rem}
.window-frame.tall{aspect-ratio:1344/1842;max-width:30rem}
.window-frame.tall .window-bar{height:4.4%}
.window-frame.tall>img{height:95.6%}
.docs-foot{color:var(--dim);font-size:1rem;margin-top:2.5rem;max-width:40rem}
.tpl-head{margin-top:clamp(3.5rem,8vw,6rem);max-width:42.5rem}
.tpl-head h3{margin-bottom:.75rem}
.tpl-head p{color:var(--dim);font-size:1.0625rem}
.tpl-grid{display:grid;grid-template-columns:1fr;gap:1.75rem;margin-top:2.25rem}
@media(min-width:47.5em){.tpl-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.tpl-grid figure{display:flex;flex-direction:column;gap:.875rem}
.tpl-grid figcaption{padding:0}
.tpl-grid figcaption strong{display:block;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.tpl-grid figcaption span{font-size:.875rem;color:var(--muted)}

/* ---------- the pack reader ---------- */
.pack{background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.pack-notes{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:clamp(2.5rem,6vw,4.5rem)}
@media(min-width:47.5em){.pack-notes{grid-template-columns:repeat(3,1fr);gap:2rem}}
.pack-notes>div{border-top:1px solid var(--line-2);padding-top:1.25rem}
.pack-notes p{color:var(--dim);font-size:.9375rem}

/* ---------- surveys ---------- */
.survey-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
@media(min-width:60em){.survey-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2.5rem,4vw,4rem)}}
.survey-grid figcaption span{display:block;margin-top:.25rem}
.rows .row{border-top:1px solid var(--line-2);padding:1.375rem 0 1.5rem}
.rows .row:last-child{border-bottom:1px solid var(--line-2)}
.rows .row p{color:var(--dim);font-size:1rem;max-width:30rem}
.survey-cards{margin-top:clamp(3rem,7vw,5.5rem)}

/* ---------- certificates ---------- */
.certs{background:var(--ink-2);border-block:1px solid var(--line)}
.certs-head{display:grid;grid-template-columns:1fr;gap:2rem;align-items:end;margin-bottom:3rem}
.certs-head .section-head{margin-bottom:0}
@media(min-width:60em){.certs-head{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem)}}
.photo-frame{border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px #2a2c31,0 1.875rem 4.375rem #00000080;background:var(--ink)}
.photo-frame img{width:100%;height:auto}
.board-photo{max-width:30rem}
.board-photo figcaption span{display:block;margin-top:.25rem}
.scene-text .step p a{color:var(--amber);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

/* ---------- scroll scenes ---------- */
.scene{position:relative}
.scene-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.scene-text .step p{color:var(--dim);font-size:clamp(1rem,1.3vw,1.1875rem);margin-top:.875rem;max-width:27.5rem}
.scene-visual{display:none}
.step-phone{max-width:15rem;margin:1.75rem auto 0;border-radius:2rem;padding:.4375rem}
.step-phone>img{inset:.4375rem;width:calc(100% - .875rem);height:calc(100% - .875rem);border-radius:1.5625rem}
.scene-text .step{padding-block:2rem}
.scene-text .step+.step{border-top:1px solid var(--line)}
.dots{display:none}
@media(min-width:40em) and (max-width:59.99em){
  .scene-text .step{display:grid;grid-template-columns:1fr 13.75rem;grid-template-rows:1fr auto auto auto 1fr;column-gap:2.5rem}
  .scene-text .step .kicker{grid-area:2/1}.scene-text .step h3{grid-area:3/1}.scene-text .step p{grid-area:4/1}
  .step-phone{grid-area:1/2/-1/2;margin:0;align-self:center}
}
@media(min-width:60em){
  .scene[data-scene="devices"]{height:280vh}
  .scene[data-scene="journey"]{height:600vh}
  .scene[data-scene="certs"]{height:360vh}
  .scene[data-scene="pack"]{height:440vh}
  .scene-pin{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));height:calc(100svh - var(--nav));display:flex;align-items:center}
  .scene-grid{width:min(85rem,calc(100% - 5rem));grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:clamp(2rem,3.5vw,3.5rem)}
  .scene-grid.visual-first{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
  .scene-grid.visual-first .scene-visual{order:-1}
  .scene-visual{display:block;position:relative}
  .scene-text{position:relative;min-height:22rem}
  .scene-text .step{position:absolute;inset:0 0 2.5rem;display:flex;flex-direction:column;justify-content:center;padding:0;border:0!important;opacity:0;transform:translateY(1.25rem);transition:opacity .4s var(--ease),transform .7s var(--spring);pointer-events:none}
  .scene-text .step.on{opacity:1;transform:none;pointer-events:auto}
  .step-phone{display:none}
  .dots{display:flex;gap:.5rem;position:absolute;left:0;bottom:0}
  .dots button{width:1.75rem;height:1.75rem;padding:0;border:0;background:none;display:grid;place-items:center}
  .dots button::before{content:"";width:.5rem;height:.5rem;border-radius:.25rem;background:#ffffff3a;transition:width .5s var(--spring),background .25s}
  .dots button.on::before{width:1.5rem;background:var(--amber)}
  /* the pack: the panel lifted out of the window beside it, big enough to read */
  .with-panel{padding-right:12%}
  .panel-card{position:absolute;right:0;top:50%;width:37%;aspect-ratio:880/1500;translate:0 -50%;border-radius:.875rem;overflow:hidden;background:var(--ink);box-shadow:0 0 0 1px #34373d,0 1.875rem 4.375rem #000000b0;transition:opacity .4s var(--ease),transform .7s var(--spring)}
  .panel-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
  .panel-card.empty{opacity:0;transform:translateX(1.5rem) scale(.97);pointer-events:none;visibility:hidden;transition:opacity .4s var(--ease),transform .7s var(--spring),visibility 0s .4s}
  /* the devices: a phone standing in front of the window */
  .with-phone{padding-left:9%}
  .scene-phone{position:absolute;left:0;bottom:-7%;width:25%;max-width:none;z-index:2;border-radius:min(2.75rem,14%/6.5%);padding:.5rem;margin:0}
  .scene-phone>img{inset:.5rem;width:calc(100% - 1rem);height:calc(100% - 1rem);border-radius:1.75rem}
}
@media(min-width:60em) and (max-height:43rem){.scene-text .step p{font-size:1rem}.panel-card{width:33%}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(1.625rem);transition:opacity .7s var(--ease),transform .9s var(--spring)}
.reveal.in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.07s}.reveal:nth-child(3){transition-delay:.14s}

/* ---------- recordings ---------- */
.watch{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.watch-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:end;margin-top:clamp(3rem,6vw,5rem)}
@media(min-width:60em){.watch-grid{grid-template-columns:minmax(0,1fr) minmax(0,2.35fr);gap:3rem}.watch-grid.flip{grid-template-columns:minmax(0,2.35fr) minmax(0,1fr)}}
figcaption{padding:1.25rem .25rem 0}
figcaption strong{display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
figcaption span{font-size:.875rem;color:var(--muted)}
.phone-frame.video{max-width:20rem}
.window-frame.video{aspect-ratio:1920/1262}
.video video{cursor:pointer}
.wide-clip{margin:0}
.vbar{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;z-index:4;display:flex;align-items:center;gap:.75rem;padding:.375rem .875rem .375rem .375rem;border-radius:999px;background:#0c0d0fb3;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 0 0 1px #ffffff1f;transition:opacity .3s,transform .5s var(--spring)}
.phone-frame .vbar{left:1.375rem;right:1.375rem;bottom:1.5rem}
.vplay{width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:#ffffffe6;color:#111;display:grid;place-items:center;flex:none;transition:transform .45s var(--spring),background .2s}
.vplay:active{transform:scale(.88);transition-duration:.08s}
.vplay svg{width:1.125rem;height:1.125rem;fill:currentColor}
.vplay .i-pause{display:none}
.playing .vplay .i-play{display:none}.playing .vplay .i-pause{display:block}
.vtrack{position:relative;flex:1;height:1.75rem;cursor:pointer;touch-action:none}
.vtrack::before{content:"";position:absolute;left:0;right:0;top:50%;height:.25rem;margin-top:-.125rem;border-radius:.125rem;background:#ffffff30}
.vtrack i{position:absolute;left:0;top:50%;height:.25rem;margin-top:-.125rem;border-radius:.125rem;background:var(--amber);width:100%;transform-origin:left;transform:scaleX(0)}
.vtime{font-size:.75rem;color:var(--dim);font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){.playing .vbar{opacity:0;transform:translateY(.375rem)}.video:hover .vbar,.video:focus-within .vbar{opacity:1;transform:none}}

/* ---------- who sees what ---------- */
.access-grid{display:grid;grid-template-columns:1fr;gap:1.75rem}
@media(min-width:47.5em){.access-grid{grid-template-columns:1fr 1fr}}
.access-card{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.375rem;align-items:start;padding:1.75rem;border-radius:var(--r);background:var(--ink-3);border:1px solid var(--line)}
.phone-frame.mini{max-width:7.5rem;border-radius:1.375rem;padding:.3125rem;margin:0;box-shadow:0 0 0 1px #2a2c31,0 .75rem 2rem #00000070}
.phone-frame.mini>img{inset:.3125rem;width:calc(100% - .625rem);height:calc(100% - .625rem);border-radius:1.0625rem}
.access-copy p{color:var(--dim);font-size:1rem;margin-top:.75rem}
@media(min-width:60em){.access-card{grid-template-columns:10.5rem minmax(0,1fr);padding:2.25rem;gap:2rem}.phone-frame.mini{max-width:10.5rem;border-radius:1.75rem;padding:.375rem}.phone-frame.mini>img{inset:.375rem;width:calc(100% - .75rem);height:calc(100% - .75rem);border-radius:1.375rem}}

/* ---------- essentials ---------- */
.ess-grid{display:grid;grid-template-columns:1fr;gap:2.25rem}
@media(min-width:47.5em){.ess-grid{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
.ess-grid article{border-top:1px solid var(--line-2);padding-top:1.75rem}
.phone-frame.peek{margin:0 0 1.625rem;max-width:13.75rem;aspect-ratio:390/520;border-radius:2rem 2rem 0 0;padding:.4375rem .4375rem 0;box-shadow:0 0 0 1px #2a2c31,0 1.25rem 3.125rem #00000070;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.phone-frame.peek>img{inset:.4375rem .4375rem auto;width:calc(100% - .875rem);height:auto;border-radius:1.5625rem 1.5625rem 0 0}
.ess-grid h3{margin-bottom:.75rem}
.ess-grid p{color:var(--dim);font-size:1rem}

/* ---------- measure ---------- */
.measure{background:var(--amber);color:var(--amber-ink)}
.measure .eyebrow{color:#5e400c}
.measure h2{color:var(--amber-ink)}.measure em{color:#6d4b10}
.measure-grid{display:grid;grid-template-columns:1fr;gap:2.75rem}
@media(min-width:60em){.measure-grid{grid-template-columns:1.1fr 1fr;gap:5rem}}
.mrow{border-top:1px solid #00000022;padding:1.375rem 0 .875rem}
.mrow .kicker{color:#5e400c}
.mrow h3{margin-bottom:.625rem}
.mrow p{color:#3d2c0a;font-size:1rem;max-width:28.75rem}
.measure :focus-visible{outline-color:var(--amber-ink)}

/* ---------- story ---------- */
.story{background:var(--ink-2)}
.story-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:60em){.story-grid{grid-template-columns:1fr 2fr;gap:3.75rem}}
.story-grid>div{max-width:42.5rem}
.story-grid .lead{margin-bottom:1.125rem}
.story-grid>div>p:not(.lead){font-size:1.0625rem;color:var(--dim)}
.signature{margin-top:2rem;font-size:1.375rem;color:var(--amber);font-weight:600;letter-spacing:-.02em}
.signature span{display:block;font-size:.8125rem;color:var(--muted);font-weight:500;margin-top:.25rem;letter-spacing:0}

/* ---------- faq ---------- */
.faq-grid{display:grid;grid-template-columns:1fr;gap:1.875rem}
@media(min-width:60em){.faq-grid{grid-template-columns:1fr 1.5fr;gap:5rem}}
details{border-top:1px solid var(--line-2);interpolate-size:allow-keywords}
details:last-child{border-bottom:1px solid var(--line-2)}
summary{cursor:pointer;font-size:1.125rem;font-weight:550;padding:1.25rem 2.75rem 1.25rem 0;list-style:none;position:relative;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:.25rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;background:linear-gradient(var(--amber),var(--amber)) center/100% 2px no-repeat,linear-gradient(var(--amber),var(--amber)) center/2px 100% no-repeat;transition:transform .5s var(--spring)}
details[open]>summary::after{transform:rotate(45deg)}
details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--spring),content-visibility .5s allow-discrete}
details[open]::details-content{block-size:auto}
details p{color:var(--dim);font-size:1rem;padding:0 1.5rem 1.375rem 0;max-width:42.5rem}
details a{color:var(--amber);text-decoration:underline;text-underline-offset:.2em}

/* ---------- early access ---------- */
.early{border-top:1px solid var(--line)}
.early-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:60em){.early-grid{grid-template-columns:1fr 1fr;gap:5.625rem;align-items:start}}
.interest-form{padding:1.75rem;background:var(--ink-3);border:1px solid var(--line-2);border-radius:var(--r)}
label{display:block;font-size:.8125rem;color:var(--dim);margin:1rem 0 .4375rem}
label:first-child{margin-top:0}
input,select,textarea{width:100%;background:var(--ink);border:1px solid #7d818a;border-radius:.625rem;padding:.8125rem .875rem;min-width:0;min-height:3rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--amber);box-shadow:0 0 0 3px #ffb54733}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#ff8f7a}
textarea{resize:vertical}
.two{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:35em){.two{grid-template-columns:1fr 1fr;gap:1rem}}
.form-note{font-size:.8125rem;color:var(--muted);margin-top:.875rem}
.form-status{font-size:.875rem;color:var(--amber);margin-top:.5rem;min-height:1.3em}
.form-status.bad{color:#ff8f7a}
.form-status a{text-decoration:underline;text-underline-offset:.2em}
.btn.busy{pointer-events:none;position:relative;color:transparent}
.btn.busy::after{content:"";position:absolute;width:1.125rem;height:1.125rem;border-radius:50%;border:2px solid var(--amber-ink);border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- the mark ---------- */
.reveal-band{padding-block:clamp(2rem,6vw,4rem);background:#0a0b0e;position:relative;display:grid;place-items:center;border-top:1px solid var(--line)}
.logo-reveal{width:min(60rem,100%);aspect-ratio:16/9;object-fit:cover;background:#0a0b0e;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
@media(max-width:39.99em) and (orientation:portrait){.logo-reveal{width:100%;aspect-ratio:1080/1150}}
.replay{position:absolute;right:max(1.25rem,calc((100% - 60rem)/2));bottom:1.25rem;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line-2);background:#ffffff10;color:var(--dim);display:grid;place-items:center;transition:background .2s,transform .5s var(--spring)}
.replay svg{width:1.25rem;height:1.25rem}
.replay:active{transform:scale(.9) rotate(-40deg);transition-duration:.08s}

/* ---------- footer ---------- */
footer{padding:2.25rem 0 calc(2rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.foot{display:grid;gap:1.125rem 2rem;align-items:center;font-size:.8125rem;color:var(--muted)}
.footlinks{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.footlinks a{color:var(--dim);padding:.625rem 0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.25em;transition:text-decoration-color .2s}
.footlinks a:hover{text-decoration-color:currentColor}
.legal{max-width:46rem}
@media(min-width:60em){.foot{grid-template-columns:auto 1fr;}.footlinks{justify-content:flex-end}.legal{grid-column:1/-1}}

/* ---------- tile sheet: up from the bottom on a phone, out of its tile on a desk ---------- */
.sheet{position:fixed;inset:0;z-index:100;display:grid;place-items:end center}
.scrim,.lb-scrim{position:absolute;inset:0;background:#000000a6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .35s var(--ease)}
.sheet.open .scrim,.lightbox.open .lb-scrim{opacity:1}
.sheet-panel{position:relative;width:100%;max-width:70rem;max-height:calc(100vh - 2.5rem);max-height:calc(100dvh - 2.5rem - env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;background:#141619;border:1px solid var(--line-2);border-bottom:0;border-radius:1.625rem 1.625rem 0 0;box-shadow:0 -1.25rem 3.75rem #00000080;padding:.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom,0px));transform:translateY(105%);will-change:transform;outline:0}
.sheet-grab{display:grid;place-items:center;height:1.75rem;margin:0 -1.25rem .5rem;touch-action:none;cursor:grab}
.sheet-grab span{width:2.5rem;height:.3125rem;border-radius:.1875rem;background:#ffffff3a}
.sheet-close{position:absolute;top:1rem;right:1rem;z-index:2}
.sheet-body{display:grid;grid-template-columns:1fr;gap:1.75rem}
.sheet-icon{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:.875rem;background:var(--acc,#333);margin-bottom:1.375rem}
.sheet-icon svg{width:2rem;height:2rem;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sheet-copy h3{font-size:clamp(1.75rem,3vw,2.5rem);margin-bottom:.75rem}
.sheet-copy p{color:var(--dim);font-size:1.0625rem}
.sheet-copy ul{list-style:none;padding:0;margin-top:1.375rem}
.sheet-copy li{padding:.625rem 0;border-top:1px solid var(--line-2);font-size:.9375rem}
.sheet-nav{display:flex;align-items:center;gap:.875rem;margin-top:1.625rem;color:var(--muted);font-size:.8125rem;font-variant-numeric:tabular-nums}
.sheet-shots{position:relative;display:grid;place-items:center}
.sheet-shots .window-frame{display:none}
.sheet-shots .phone-frame{max-width:15rem;border-radius:2rem;padding:.4375rem}
.sheet-shots .phone-frame>img{inset:.4375rem;width:calc(100% - .875rem);height:calc(100% - .875rem);border-radius:1.5625rem}
.sheet-shots img{transition:opacity .25s}
.sheet-shots.swap img{opacity:0}
@media(min-width:60em){
  .sheet{place-items:center}
  .sheet-panel{border:1px solid var(--line-2);border-radius:1.625rem;padding:2.5rem;max-height:calc(100vh - 4rem);box-shadow:0 2.5rem 6.25rem #000000a0;transform:scale(.9);opacity:0}
  .sheet-grab{display:none}
  .sheet-body{grid-template-columns:1fr 1.7fr;gap:2.75rem;align-items:center}
  .sheet-shots{display:block;padding:0 0 1.875rem 2.5rem}
  .sheet-shots .window-frame{display:block}
  .sheet-shots .phone-frame{position:absolute;left:0;bottom:0;width:9.375rem;max-width:none;border-radius:1.625rem;padding:.375rem}
  .sheet-shots .phone-frame>img{inset:.375rem;width:calc(100% - .75rem);height:calc(100% - .75rem);border-radius:1.25rem}
}
body.locked{overflow:hidden}

/* ---------- look closer ---------- */
.lightbox{position:fixed;inset:0;z-index:120}
.lb-stage{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;outline:0;cursor:zoom-out;-webkit-overflow-scrolling:touch}
#lb-img{position:absolute;left:0;top:0;max-width:none;border-radius:.75rem;box-shadow:0 0 0 1px #34373d,0 2.5rem 6.25rem #000000c0;transform-origin:0 0;will-change:transform;background:var(--ink)}
.lb-close{position:fixed;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;background:#16181ce6;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);opacity:0;transition:opacity .25s,background .2s,transform .5s var(--spring)}
.lightbox.open .lb-close{opacity:1}

/* ---------- 404 and the privacy page ---------- */
.page{padding-top:calc(var(--nav) + 3rem);padding-bottom:5rem;min-height:72vh}
.page h1{font-size:clamp(2.25rem,5vw,3.75rem);margin-bottom:1.5rem}
.page h2{font-size:1.375rem;letter-spacing:-.02em;margin:2.5rem 0 .75rem}
.page p,.page li{color:var(--dim);max-width:44rem;font-size:1.0625rem}
.page .eyebrow{color:var(--amber);font-size:.75rem}
.page p+p{margin-top:.875rem}
.page ul{padding-left:1.25rem;margin-top:.75rem}
.page li+li{margin-top:.375rem}
.page a:not(.btn){color:var(--amber);text-decoration:underline;text-underline-offset:.2em}
.notfound{display:grid;place-items:center;text-align:center}
.notfound p{margin-inline:auto}
.notfound .lead{margin:1.125rem auto 1.75rem}

/* ---------- people who ask for less: motion, transparency, more contrast ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important}
  .hero-copy>*,.stage-note,.tile,.reveal{opacity:1;transform:none;transition:none}
  .tile.in:hover,.tile.in.pressed,.btn:hover,.btn:active,.pill:hover,.pill:active,.shot:active{transform:none}
  .stack>img,.scene-text .step,.panel-card,header,.navlinks,.menubtn span,summary::after,details::details-content,.vbar{transition:opacity .2s linear,visibility 0s!important;transform:none!important}
  header.hide{transform:none!important}
}
@media(prefers-reduced-transparency:reduce){
  :root{--glass:#0c0d0f;--glass-blur:none}
  .navlinks,.lb-close{background:#16181c}
  .scrim,.lb-scrim{background:#000000e0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .vbar{background:#0c0d0f}
}
@media(prefers-contrast:more){
  :root{--muted:#d2d5da;--dim:#eceef0;--line:#ffffff40;--line-2:#ffffff66;--glass:#0c0d0f;--glass-blur:none}
  .btn.ghost,.round-btn,.menubtn,.interest-form,.access-card,.sheet-panel{border-color:#ffffff99}
  input,select,textarea{border-color:#ffffffaa}
}
@media print{header,.sheet,.lightbox,.vbar,.reveal-band,.dots{display:none!important}.reveal,.tile,.hero-copy>*{opacity:1!important;transform:none!important}body{background:#fff;color:#000}}

/* ---------- the film: sixty seconds with sound, played on a tap, never on its own ---------- */
.film{padding-block:clamp(1rem,3vw,2rem) clamp(4.5rem,9vw,7.5rem);position:relative}
.film-head{text-align:center;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.film-head .eyebrow{margin-bottom:.875rem}
.film-frame{position:relative;margin:0 auto;aspect-ratio:16/9;width:min(100%,calc((100svh - 23rem) * 16 / 9));min-width:min(100%,36rem);max-width:64rem;border-radius:var(--r);overflow:hidden;background:#000;
  box-shadow:0 0 0 1px #2a2c31,0 2.5rem 6rem #00000090,0 0 7rem #ffb54714}
.film-frame.tall{aspect-ratio:9/16;width:min(100%,calc((100svh - var(--nav) - 3rem) * 9 / 16));max-width:26rem}
.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.film-play{position:absolute;left:50%;bottom:clamp(1rem,4%,2rem);transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:.75rem;
  min-height:3.25rem;padding:.375rem 1.25rem .375rem .375rem;border-radius:999px;border:0;cursor:pointer;
  background:#0c0d0fb3;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 0 0 1px #ffffff26,0 .75rem 2rem #00000070;
  color:var(--paper);font:inherit;font-weight:650;font-size:1rem;white-space:nowrap;transition:transform .5s var(--spring),background .2s}
.film-play .film-ic{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--amber);color:var(--amber-ink);display:grid;place-items:center;flex:none}
.film-play svg{width:1.125rem;height:1.125rem;fill:currentColor;margin-left:.125rem}
.film-play .film-len{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.film-frame:not(.started) video{cursor:pointer}
@media(hover:hover) and (pointer:fine){.film-play:hover{transform:translateX(-50%) scale(1.04);background:#16181ccc}}
.film-play:active{transform:translateX(-50%) scale(.95);transition-duration:.08s}
@media print{.film{display:none!important}}