/* Arcadia — landing page, light edition (2026-10-15).
   Static site: no frameworks or remotely fetched fonts. App privacy is described in the policy.

   The page is paper: warm off-white, warm greys for type, and the app's own cyan and
   periwinkle for accents, with a little coral so the whole thing feels sunlit rather than
   clinical. The launcher itself is dark glass over a wallpaper; here the wallpapers are
   drawn in the page and the glass is frosted white, so the abstract pieces read as the
   same idea in daylight. */

:root{
  --paper:#f7f3ec;
  --paper-2:#efe9df;
  --paper-3:#e6ddd0;
  --white:#fffdf9;
  --ink:#1c1916;
  --ink-2:#433d35;
  --muted:#6e675d;
  --line:rgba(70,52,28,.12);
  --line-strong:rgba(70,52,28,.24);
  /* the app icon's cyan and periwinkle, plus text-safe deeper cuts of each */
  --cyan:#2ec6f0;
  --cyan-deep:#0b86b3;
  --violet:#5b61e3;
  --violet-deep:#4a4fc9;
  --coral:#ee7a5a;
  --amber:#f2b350;
  --mint:#3cc49c;
  --grad:linear-gradient(100deg,var(--cyan-deep),var(--violet) 55%,var(--coral));
  --shadow:0 28px 60px -30px rgba(70,45,15,.32),0 2px 6px -2px rgba(70,45,15,.08);
  --shadow-soft:0 14px 34px -22px rgba(70,45,15,.28);
  --maxw:1120px;
  --r:22px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
code{font-size:.88em;padding:.12em .4em;border-radius:6px;background:rgba(70,52,28,.08)}
::selection{background:rgba(46,198,240,.35)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}

/* ---------- backdrop: a wallpaper under the paper ---------- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(1100px 700px at 85% -10%,rgba(255,205,170,.55) 0%,transparent 60%),
  radial-gradient(900px 600px at -5% 15%,rgba(190,235,250,.6) 0%,transparent 55%),
  var(--paper)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.b1{width:44vw;height:44vw;left:-10vw;top:-8vw;background:radial-gradient(circle at 40% 40%,rgba(46,198,240,.55),transparent 65%);animation:drift1 30s ease-in-out infinite}
.b2{width:40vw;height:40vw;right:-8vw;top:4vh;background:radial-gradient(circle at 60% 40%,rgba(238,122,90,.5),transparent 66%);animation:drift2 36s ease-in-out infinite}
.b3{width:36vw;height:36vw;left:30vw;top:56vh;background:radial-gradient(circle at 50% 50%,rgba(91,97,227,.42),transparent 68%);opacity:.32;animation:drift3 42s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8vw,6vh,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1.04)}50%{transform:translate3d(-7vw,10vh,0) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(6vw,-8vh,0) scale(1.08)}}
/* a dot grid, fading out below the first screen, in place of the old ruled one */
.grid-veil{position:absolute;inset:0;
  background-image:radial-gradient(rgba(70,52,28,.22) 1px,transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  opacity:.55}
.noise{position:absolute;inset:0;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.9rem clamp(1rem,4vw,2.5rem);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(247,243,236,.74);
  border-bottom:1px solid var(--line);
  transition:padding .4s ease,background .4s ease}
body.scrolled .nav{padding-block:.55rem;background:rgba(247,243,236,.9)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.2px;text-decoration:none}
.brand img{border-radius:8px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
.nav nav{display:flex;gap:1.5rem;font-size:.92rem}
.nav nav a{color:var(--muted);text-decoration:none;transition:color .25s}
.nav nav a:hover{color:var(--ink)}
.nav .btn.tiny{padding:.5rem 1.1rem;font-size:.85rem}

/* ---------- shared ---------- */
section{padding:clamp(4rem,9vw,8rem) clamp(1rem,4vw,2.5rem);max-width:var(--maxw);margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.eyebrow::before{content:"";width:1.4rem;height:1px;background:var(--coral)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.opener .dot{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
h1{font-size:clamp(2.4rem,6.2vw,4.3rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 1.1rem;font-weight:700}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 1rem;font-weight:700}
h3{font-size:1.2rem;margin:0 0 .5rem;font-weight:650;letter-spacing:-.012em}
/* The emphasis voice: an italic serif in the app's colours. One typographic move, used only
   for the words that carry the idea in each heading. */
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* A gradient fill is painted into the element's box and clipped to the glyphs; a block-level em
   in a tight-leaded heading had the tail of its descenders unpainted. The padding gives the
   gradient somewhere to land, the negative margin keeps the layout put. */
.hero h1 em,.opener h1 em{padding-bottom:.14em;margin-bottom:-.14em}
.lede{color:var(--ink-2);font-size:clamp(1rem,1.5vw,1.14rem);max-width:56ch;margin:0 0 1.8rem}
.fine{color:var(--muted);font-size:.86rem;margin-top:1.2rem}

/* Section heads are editorial: the heading on the left, the lede beside it, both sitting on
   the same baseline, with the eyebrow above the pair. */
.sec-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:.6rem clamp(2rem,5vw,4rem);align-items:end;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.sec-head .eyebrow{grid-column:1/-1}
.sec-head h2{margin:0;max-width:16ch}
.sec-head .lede{margin:0;padding-bottom:.3rem}
@media (max-width:900px){
  .sec-head{grid-template-columns:1fr;max-width:60ch}
  .sec-head h2{max-width:none}
  .sec-head .lede{margin-top:.6rem}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;font-weight:600;font-size:.97rem;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background .28s,color .28s}
.btn.primary{color:var(--paper);background:var(--ink);position:relative;overflow:hidden;
  box-shadow:0 12px 30px -14px rgba(28,25,22,.6)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(74,79,201,.55)}
.btn.primary::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.btn.primary:hover::after{transform:translateX(120%)}
.btn.ghost{color:var(--ink);border:1px solid var(--line-strong);background:var(--white)}
.btn.ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.cta{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.delay-1{transition-delay:.11s}
.delay-2{transition-delay:.22s}

/* =============================================================== the opener
   Same abstract launcher as the Play feature graphic, drawn in the page: a wallpaper, a grid
   of app shapes, one of them held, and a frosted sheet rising off it. */
.opener{
  position:relative;max-width:var(--maxw);margin:0 auto;
  min-height:calc(100vh - 57px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  align-items:center;gap:56px;padding:40px 20px 72px;
}
.opener-copy{position:relative}
.opener h1{
  font-size:clamp(54px,7.4vw,96px);line-height:.98;letter-spacing:-.04em;font-weight:650;
  margin:18px 0 0;display:flex;flex-direction:column;
}
.opener h1 span,.opener h1 em{display:block;animation:openerRise .7s cubic-bezier(.22,.9,.2,1) both}
.opener h1 span:nth-child(2){animation-delay:.09s}
.opener h1 em{animation-delay:.18s;font-weight:400;letter-spacing:-.02em}
.opener .lede{margin-top:22px;max-width:30ch;font-size:clamp(16px,1.5vw,19px);color:var(--ink-2);
  animation:openerRise .7s cubic-bezier(.22,.9,.2,1) .27s both}
.opener .cta{margin-top:30px;animation:openerRise .7s cubic-bezier(.22,.9,.2,1) .34s both}
.opener .eyebrow{animation:openerRise .6s cubic-bezier(.22,.9,.2,1) both}
@keyframes openerRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.opener-art{position:relative;justify-self:center;width:100%;max-width:396px;
  animation:openerRise .9s cubic-bezier(.22,.9,.2,1) .2s both}
/* the wallpaper: a warm gradient with two soft lights in it */
.opener-art .slab{
  position:relative;aspect-ratio:352/500;border-radius:34px;padding:26px 26px 0;overflow:hidden;
  background:
    radial-gradient(60% 45% at 85% 10%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(50% 40% at 10% 90%,rgba(255,255,255,.4),transparent 70%),
    linear-gradient(160deg,#ffd4bd 0%,#f5c7dc 36%,#c7d3ff 70%,#bdebf8 100%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.8);
}
.opener-art .apps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px 18px}
.opener-art .apps i{
  display:block;aspect-ratio:1;border-radius:30%;opacity:.92;
  background:linear-gradient(160deg,hsl(var(--h) 72% 66%),hsl(var(--h) 62% 48%));
  box-shadow:0 8px 18px -8px rgba(70,45,15,.35),inset 0 1px 0 rgba(255,255,255,.45);
}
/* The loop (8 s), drawn the way the app does it. A finger lands on an icon and holds; at the
   long press the icon buzzes once and lifts, the whole home dims, and the panel grows out of
   the icon (OriginRevealUi): header, the notification, the hosted widget, the shortcut chips
   and the App info row arrive one after the other. While the first finger keeps holding, a
   second finger taps a widget tile (it lights) and then a shortcut (it fills) - the app lets a
   second finger act while the owner finger holds. Then the first finger lifts and the panel
   shrinks back into the icon. The held icon is the 7th tile: row 2, column 3 of a 4-column grid
   inside 26px padding; it stays above the panel. */
.opener-art .slab{--col:calc((100% - 52px - 54px) / 4)}
.opener-art .apps i.held{position:relative;z-index:7;opacity:1;animation:openerHeld 8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes openerHeld{
  0%,10%{transform:none;box-shadow:0 8px 18px -8px rgba(70,45,15,.35),inset 0 1px 0 rgba(255,255,255,.45)}
  11.5%{transform:translateX(-2px) scale(1.06)}
  12.5%{transform:translateX(2px) scale(1.06)}
  13.5%{transform:translateX(-1px) scale(1.08)}
  16%,78%{transform:scale(1.14);box-shadow:0 0 0 2.5px #fff,0 0 0 5px rgba(46,198,240,.9),0 14px 30px -10px rgba(11,134,179,.6)}
  86%,100%{transform:none;box-shadow:0 8px 18px -8px rgba(70,45,15,.35),inset 0 1px 0 rgba(255,255,255,.45)}
}
/* the whole home dims behind the panel, as on the phone - not icon by icon */
.opener-art .shade{position:absolute;inset:0;z-index:2;background:rgba(14,13,24,.74);opacity:0;
  animation:openerShade 8s ease-in-out infinite}
@keyframes openerShade{0%,14%{opacity:0}21%,78%{opacity:1}86%,100%{opacity:0}}
/* the finger: a soft disc that comes in from the lower right, lands on the held icon, holds, lifts */
.opener-art .finger{position:absolute;z-index:8;width:46px;height:46px;border-radius:50%;
  left:calc(26px + 2 * var(--col) + 2 * 18px + var(--col) / 2 - 23px + 8px);
  top:calc(26px + var(--col) + 15px + var(--col) / 2 - 23px + 10px);
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.95),rgba(255,255,255,.55) 60%,rgba(255,255,255,0) 70%);
  box-shadow:0 10px 24px -10px rgba(70,45,15,.5);opacity:0;
  animation:openerFinger 8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes openerFinger{
  0%{opacity:0;transform:translate(70px,90px) scale(1.1)}
  10%{opacity:.95;transform:translate(0,0) scale(1)}
  14%,78%{opacity:.85;transform:translate(0,0) scale(.86)}
  84%{opacity:0;transform:translate(10px,-40px) scale(1.1)}
  100%{opacity:0;transform:translate(70px,90px) scale(1.1)}
}
/* the ring that grows while the finger holds: the long-press timer */
.opener-art .press-ring{position:absolute;z-index:8;width:64px;height:64px;border-radius:50%;
  left:calc(26px + 2 * var(--col) + 2 * 18px + var(--col) / 2 - 32px);
  top:calc(26px + var(--col) + 15px + var(--col) / 2 - 32px);
  border:3px solid rgba(46,198,240,0);opacity:0;
  animation:openerRing 8s linear infinite}
@keyframes openerRing{
  0%,10%{opacity:0;transform:scale(.6);border-color:rgba(46,198,240,0)}
  11%{opacity:1;transform:scale(.8);border-color:rgba(46,198,240,.9)}
  16%{opacity:1;transform:scale(1.15);border-color:rgba(46,198,240,.9)}
  20%,100%{opacity:0;transform:scale(1.35);border-color:rgba(46,198,240,0)}
}
/* the panel: dark, as the app draws it over any wallpaper; it grows out of the held icon */
.opener-art .sheet{
  position:absolute;z-index:4;left:13px;right:13px;bottom:13px;border-radius:22px;padding:13px 14px;
  background:rgba(27,27,40,.96);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 26px 54px -20px rgba(30,20,60,.6);
  transform-origin:62% 0;
  animation:openerSheet 8s cubic-bezier(.22,.9,.2,1) infinite;
}
@keyframes openerSheet{
  0%,15%{opacity:0;transform:scale(.55)}
  22%,78%{opacity:1;transform:none}
  86%,100%{opacity:0;transform:scale(.55)}
}
/* inside the panel, things arrive in the order the app composes them: header, the notification,
   the widget, the shortcut chips, the App info row - each a beat after the last */
.opener-art .sheet-head,.opener-art .sheet-note,.opener-art .sheet-widget,.opener-art .chip,.opener-art .sheet-actions{
  animation:openerRow 8s cubic-bezier(.22,.9,.2,1) infinite}
.opener-art .sheet-note{animation-delay:.08s}
.opener-art .sheet-widget{animation-delay:.16s}
.opener-art .chip:nth-child(1){animation-delay:.22s}
.opener-art .chip:nth-child(2){animation-delay:.28s}
.opener-art .chip:nth-child(3){animation-delay:.34s}
.opener-art .chip:nth-child(4){animation-delay:.40s}
.opener-art .sheet-actions{animation-delay:.46s}
@keyframes openerRow{0%,17%{opacity:0;transform:translateY(8px)}25%,78%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(5px)}}
.opener-art .lines{flex:1 1 auto;display:grid;gap:5px}
.opener-art b{display:block;height:8px;border-radius:5px;background:rgba(255,255,255,.3)}
.opener-art b.sm{height:6px;background:rgba(255,255,255,.16)}
/* header: the app's round icon, its name, when it was last opened; a rule under it */
.opener-art .sheet-head{display:flex;align-items:center;gap:11px;padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.opener-art .sheet-ic{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(circle at 50% 56%,#f3f3f3 0 34%,transparent 36%),conic-gradient(#ff7a59,#ffcf3d,#48d17a,#3f9dff,#ff7a59);
  box-shadow:0 0 0 4px rgba(255,255,255,.12)}
/* one notification row: the sender's picture, two lines, the time it arrived */
.opener-art .sheet-note{display:flex;gap:10px;align-items:center;padding:8px 10px;margin-bottom:10px;
  border-radius:13px;background:rgba(255,255,255,.07)}
.opener-art .dot2{width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(160deg,hsl(var(--h) 72% 66%),hsl(var(--h) 60% 48%))}
.opener-art .when{width:22px;height:6px;background:rgba(255,255,255,.16);align-self:flex-start;margin-top:2px}
/* the hosted widget: a card with its own small header and a row of tiles, one of them lit */
.opener-art .sheet-widget{border-radius:14px;padding:10px;margin-bottom:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06)}
.opener-art .widget-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.opener-art .widget-ic{width:14px;height:14px;border-radius:4px;flex:0 0 auto;background:linear-gradient(160deg,#5fd8ff,#1c9fd2)}
.opener-art .widget-head b{height:7px;width:30%}
.opener-art .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.opener-art .tiles span{position:relative;display:block;height:38px;border-radius:10px;background:rgba(255,255,255,.09)}
.opener-art .tiles span::before{content:"";position:absolute;left:8px;top:7px;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.55)}
.opener-art .tiles span::after{content:"";position:absolute;left:8px;right:10px;bottom:8px;height:5px;border-radius:3px;background:rgba(255,255,255,.22)}
/* the second finger's tap switches this tile on: the amber the app uses for an "On" tile */
.opener-art .tiles .lit{animation:openerTile 8s linear infinite}
.opener-art .tiles .lit::before{animation:openerTileDot 8s linear infinite}
@keyframes openerTile{0%,39%{background:rgba(255,255,255,.09);box-shadow:none}41%,78%{background:rgba(214,164,52,.34);box-shadow:inset 0 0 0 1px rgba(255,205,90,.4)}86%,100%{background:rgba(255,255,255,.09);box-shadow:none}}
@keyframes openerTileDot{0%,39%{background:rgba(255,255,255,.55)}41%,78%{background:#ffd264}86%,100%{background:rgba(255,255,255,.55)}}
/* the shortcut chips: pills that wrap, each with its little symbol and its name; a rule above */
.opener-art .sheet-chips{display:flex;flex-wrap:wrap;gap:7px;padding-top:11px;margin-bottom:11px;border-top:1px solid rgba(255,255,255,.1)}
.opener-art .chip{position:relative;display:block;width:var(--w);height:24px;border-radius:999px;
  background:rgba(118,104,228,.2);border:1px solid rgba(140,130,255,.28)}
.opener-art .chip::before{content:"";position:absolute;left:8px;top:7px;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6)}
.opener-art .chip::after{content:"";position:absolute;left:23px;right:12px;top:9px;height:5px;border-radius:3px;background:rgba(255,255,255,.3)}
.opener-art .chip.tap{animation:openerRow 8s cubic-bezier(.22,.9,.2,1) infinite,openerChip 8s linear infinite}
@keyframes openerChip{0%,53%{background:rgba(118,104,228,.2)}55%,78%{background:rgba(118,104,228,.62)}86%,100%{background:rgba(118,104,228,.2)}}
/* App info and Create folder, side by side */
.opener-art .sheet-actions{display:flex;gap:8px}
.opener-art .sheet-actions span{position:relative;flex:1 1 0;height:30px;border-radius:999px;background:rgba(255,255,255,.08)}
.opener-art .sheet-actions span::before{content:"";position:absolute;left:12px;top:10px;width:10px;height:10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6)}
.opener-art .sheet-actions span::after{content:"";position:absolute;left:30px;right:16px;top:12px;height:6px;border-radius:3px;background:rgba(255,255,255,.32)}
/* the second finger: comes in while the first holds, taps the second tile, then the first chip,
   and leaves. Placed from the bottom, because the panel is; the travel to the chip is a fixed
   delta (3 px off at the narrowest width, under a 40 px disc) */
.opener-art .finger2{position:absolute;z-index:8;width:40px;height:40px;border-radius:50%;
  left:calc(43px + 1.5 * ((100% - 92px) / 4) - 20px);bottom:142px;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.95),rgba(255,255,255,.55) 60%,rgba(255,255,255,0) 70%);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);opacity:0;
  animation:openerFinger2 8s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes openerFinger2{
  0%,30%{opacity:0;transform:translate(90px,110px) scale(1.1)}
  36%{opacity:.95;transform:translate(0,0) scale(1)}
  38%,41%{opacity:.85;transform:translate(0,0) scale(.86)}
  44%{opacity:.95;transform:translate(0,-6px) scale(1)}
  50%{opacity:.95;transform:translate(-60px,63px) scale(1)}
  52%,55%{opacity:.85;transform:translate(-60px,63px) scale(.86)}
  58%{opacity:.95;transform:translate(-60px,56px) scale(1)}
  64%,100%{opacity:0;transform:translate(70px,130px) scale(1.1)}
}

@media (max-width:900px){
  .opener{grid-template-columns:1fr;min-height:0;gap:40px;padding-top:24px;padding-bottom:56px}
  .opener-art{max-width:340px}
  .opener h1{font-size:clamp(46px,13vw,72px)}
  .opener .lede{max-width:none}
}

/* =============================================================== hero: the real devices
   Wider than the rest of the page and weighted towards the devices. The geometry below was
   measured at 365, 874 and 1440 CSS px (a Fold shut, open, and a desktop) and is kept as is:
   the hero has to grow with the screen, and stacking ends just under the folded width so
   opening the phone visibly changes the first thing on screen. */
.hero{max-width:min(1540px,94vw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-top:clamp(1.75rem,3.5vw,3rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero-copy{min-width:0}
.hero .lede{margin-inline:0}
.hero .cta{justify-content:flex-start}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:clamp(1.5rem,5vw,2.5rem)}
  .hero .lede{margin-inline:auto}
  .hero .cta{justify-content:center}
  .hero .eyebrow{justify-content:center}
}
@media (min-width:821px) and (max-width:1200px){
  .hero{gap:clamp(1.2rem,3vw,2.2rem)}
  .hero h1{font-size:clamp(2rem,4.3vw,3.1rem)}
  .hero .lede{font-size:1rem}
}
/* headline words rise in sequence */
.hero h1{perspective:800px}
.hero h1 em{display:inline-block}
.reveal.in .word{animation:riseWord .9s cubic-bezier(.2,.85,.25,1) backwards}
@keyframes riseWord{from{opacity:0;transform:translateY(38px) rotateX(35deg)}to{opacity:1;transform:none}}

/* The pair's natural ratio is 1.187:1; giving the box that aspect lets a narrow column shrink
   it by width and a short viewport by height. */
.hero-devices{display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1.187;max-height:min(680px,calc(100svh - 205px));margin-inline:auto}
.dev{margin:0;height:100%;display:flex;align-items:center;position:relative}
.dev img{height:100%;width:auto;max-width:none;display:block}
.dev.fold img{filter:drop-shadow(0 34px 50px rgba(70,45,15,.38))}
.dev.fold{height:88%}
.dev.bar{height:100%;margin-left:-5%;filter:drop-shadow(0 34px 50px rgba(70,45,15,.38))}
@media (max-width:1200px){
  .hero-devices{aspect-ratio:auto;height:auto;max-height:none;align-items:flex-end;
    max-width:min(100%,620px)}
  .dev{height:auto}
  .dev img{width:100%;height:auto}
  .dev.fold{width:60%;height:auto}
  .dev.bar{width:34%;height:auto;margin-left:-4%}
  .demo .phone{height:auto}
}

/* ---------- the hero demo: hold an icon, the panel opens ----------
   Layers over the shell PNG: the real home screen, a press, then a real panel capture. The
   screen rectangle, the press and the hold target are measured from the captures and are not
   to be eyeballed: the screen is 702x1641 at 75,93 in 851x1849; Google Home is the fourth
   dock icon at 44.4% of the width and 89.5% of the height (15 Oct 2026 light capture). */
.demo{position:relative;padding-bottom:1.9rem}
.demo .shell{position:relative;z-index:0}
/* W34: the screen is placed in a box that is exactly the shell image. Placed in the figure, its
   percentages also counted the caption's padding-bottom, so the capture sat 9 px low and 21 px
   past the glass on a 1127 px desktop. Glass measured from phone-shell.png's pixels: x 76-776,
   y 94-1732 of 851x1849 -> 75,93 702x1641 with the anti-aliased edge. */
.demo .phone{position:relative;display:block;height:100%}
.demo .screen{position:absolute;overflow:hidden;z-index:1;
  left:8.8132%;top:5.0297%;width:82.4912%;height:88.7507%;
  /* the shell's screen corners are circles of 60 px in the 702x1641 screen (measured from the
     black-pixel profile of phone-shell.png): 60/702 across, 60/1641 down, so the capture is
     clipped to the glass instead of poking square corners into the bezel (W29) */
  border-radius:8.547% / 3.656%}
.demo .home{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0}
.demo .press{position:absolute;z-index:3;left:44.4%;top:89.5%;width:11%;aspect-ratio:1;
  /* centred on the icon both ways: a vertical margin % is of the width, as the size is (W34) */
  margin-left:-5.5%;margin-top:-5.5%;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 0 0 0 rgba(255,255,255,.55);opacity:0;transform:scale(.4);
  animation:demoPress 7s cubic-bezier(.2,.8,.2,1) infinite}
.demo .panel{position:absolute;z-index:2;left:5%;right:5%;bottom:13.5%;width:90%;height:auto;
  object-fit:contain;border-radius:12px;opacity:0;
  transform:translateY(14%) scale(.86);transform-origin:44% 100%;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  animation:demoPanel 7s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes demoPress{
  0%,8%{opacity:0;transform:scale(.4)}
  12%{opacity:.85;transform:scale(1)}
  20%{opacity:.5;transform:scale(1.25)}
  30%,100%{opacity:0;transform:scale(1.5)}
}
@keyframes demoPanel{
  0%,16%{opacity:0;transform:translateY(14%) scale(.72)}
  28%{opacity:1;transform:translateY(0) scale(1)}
  82%{opacity:1;transform:translateY(0) scale(1)}
  92%,100%{opacity:0;transform:translateY(6%) scale(.96)}
}
/* hold it yourself: the loop is an attract mode until the first press */
.demo .hold{position:absolute;z-index:4;left:44.4%;top:89.5%;width:13%;aspect-ratio:1;
  margin-left:-6.5%;margin-top:-6.5%;padding:0;border:0;border-radius:50%;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.demo .hold-ring{position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(46,198,240,.95);opacity:0;transform:scale(.8);
  transition:opacity .25s ease,transform .25s ease}
.demo.live .hold-ring{opacity:.95;transform:scale(1);animation:holdInvite 2.4s ease-in-out infinite}
.demo .hold:focus-visible{outline:none}
.demo .hold:focus-visible .hold-ring{opacity:1;transform:scale(1.05);
  border-color:#fff;box-shadow:0 0 0 3px rgba(46,198,240,.6)}
@keyframes holdInvite{
  0%,100%{box-shadow:0 0 0 0 rgba(46,198,240,.5)}
  60%{box-shadow:0 0 0 10px rgba(46,198,240,0)}
}
.demo.live .press,.demo.live .panel{animation:none}
.demo.live .press{opacity:0;transform:scale(.4);transition:opacity .18s ease,transform .18s ease}
.demo.live .panel{opacity:0;transform:translateY(14%) scale(.72);
  transition:opacity .26s cubic-bezier(.2,.8,.2,1),transform .26s cubic-bezier(.2,.8,.2,1)}
.demo.live.holding .press{opacity:.85;transform:scale(1.1)}
.demo.live.holding .panel{opacity:1;transform:translateY(0) scale(1)}
.demo.live.holding .hold-ring{opacity:0;animation:none}
/* out of flow, because a figcaption sizes its figure and this one widened the phone past the
   column on a cover screen */
.demo-hint{position:absolute;left:50%;top:100%;transform:translate(-50%,-1.6rem);
  margin:0;width:max-content;max-width:min(100%,16rem);text-align:center;
  font-size:.84rem;color:var(--muted);letter-spacing:.02em;line-height:1.3;
  padding:0;border:0;background:none}
.demo.live.holding .demo-hint{color:var(--cyan-deep)}
@media (max-width:560px){ .demo{padding-bottom:0} .demo-hint{display:none} }

/* ---------- marquee strip ---------- */
.strip{padding-block:0;max-width:none;overflow:hidden;border-block:1px solid var(--line);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.strip-inner{display:flex;gap:1.6rem;align-items:center;white-space:nowrap;padding:1.05rem 0;
  width:max-content;animation:marquee 44s linear infinite;color:var(--muted);font-size:.9rem;
  letter-spacing:.04em;font-weight:500}
.strip-inner i{width:5px;height:5px;border-radius:50%;background:var(--coral);opacity:.8;flex:0 0 auto}
@keyframes marquee{to{transform:translateX(-50%)}}
.strip:hover .strip-inner{animation-play-state:paused}

/* ---------- media frames ---------- */
figure{margin:0}
figcaption{padding:.85rem 1rem;font-size:.86rem;line-height:1.5;color:var(--muted);
  border-top:1px solid var(--line);background:var(--paper-2)}
.frame,.stage-shot,.split-media,.strip-shot,.screen-pair figure,.trio-media,.clip{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--white);
  box-shadow:var(--shadow)}
/* Frames that hold a phone screen narrower than themselves sit the shot on a soft wallpaper,
   so the empty width around it reads as a backdrop rather than a gap. The same frames take
   the light-mode captures when they are redone. */
.stage-shot,.split-media,.screen-pair figure,.trio-item.tall .trio-media{
  background:linear-gradient(160deg,#e6f3fb 0%,#efe6f4 50%,#fbe8df 100%)}
/* a soft tinted halo under each frame once it has arrived. A pseudo-element behind the frame
   was the old way, and an overflow-hidden frame clips its own pseudo-element, so it was never
   seen; a coloured shadow is outside the clip. */
.glow{position:relative;transition:box-shadow .9s ease}
.glow.in,.reveal.in .glow,.glow:hover{box-shadow:var(--shadow),0 44px 90px -36px rgba(91,97,227,.28)}

/* ---------- showcase: shot beside numbered notes ---------- */
.feature-stage{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
/* capped and centred so the shot does not set the height of the row */
.stage-shot img{width:auto;max-width:100%;max-height:46vh;display:block;margin-inline:auto}
.stage-shot figcaption{font-size:.82rem}
.stage-notes{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem}
.stage-notes li{display:flex;gap:1rem;align-items:flex-start;
  opacity:0;transform:translateX(18px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in .stage-notes li{opacity:1;transform:none}
.reveal.in .stage-notes li:nth-child(1){transition-delay:.10s}
.reveal.in .stage-notes li:nth-child(2){transition-delay:.22s}
.reveal.in .stage-notes li:nth-child(3){transition-delay:.34s}
.stage-notes .n{flex:0 0 auto;font-size:.74rem;font-weight:700;letter-spacing:.1em;color:#fff;
  background:linear-gradient(135deg,var(--cyan-deep),var(--violet));border-radius:8px;
  padding:.32rem .5rem;margin-top:.2rem;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.stage-notes li:hover .n{transform:translateY(-2px) scale(1.06);box-shadow:0 8px 20px -8px rgba(11,134,179,.7)}
.stage-notes h3{margin:0 0 .25rem}
.stage-notes p{margin:0;color:var(--muted);font-size:.95rem}
@media (max-width:900px){ .feature-stage{grid-template-columns:1fr} }

/* the panel, mapped: a small diagram per point with its own band lit */
.panel-map{display:grid;gap:3px;width:104px;padding:7px;margin-top:.7rem;
  border-radius:10px;border:1px solid var(--line);background:var(--white)}
.pm-head{height:9px;border-radius:3px;background:rgba(70,52,28,.22)}
.pm-band{display:flex;gap:3px;min-height:9px}
.pm-band.tall{min-height:22px;border-radius:4px;background:rgba(70,52,28,.1)}
.pm-band i{flex:1;height:9px;border-radius:3px;background:rgba(70,52,28,.1)}
.pm-band.lit i,.pm-band.tall.lit{background:linear-gradient(100deg,var(--cyan),var(--violet));
  box-shadow:0 0 10px rgba(46,198,240,.45)}
.pm-band.lit{min-height:9px}

/* ---------- notifications: a wide, short shot, then three points beside each other ---------- */
.strip-shot{margin:0 0 clamp(1.6rem,3.5vw,2.4rem)}
/* grouped phone shots (W25): several captures in one picture, no frame of their own */
.group-shot{margin:clamp(1.6rem,3.5vw,2.4rem) auto 0;max-width:1040px}
.group-shot img{width:100%;height:auto;display:block}
.group-shot figcaption{color:var(--muted);font-size:.86rem;line-height:1.5;padding:.7rem .2rem 0;text-align:center}
.feature-stage .group-shot{margin:0}
.feature-stage .group-shot img{width:100%;max-height:none}
.strip-shot img{width:100%;display:block}
.wide-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2rem);
  list-style:none;padding:0;margin:0}
.wide-notes li{display:flex;gap:.8rem;opacity:1;transform:none}
@media (max-width:820px){ .wide-notes{grid-template-columns:1fr} }

/* ---------- phones and foldables ----------
   Sized by how much screen they may take, not by their column: two phone shots at column
   width were two screens of scrolling. Kept subtle on purpose (Kashim, 2026-10-03). */
.screens .screen-pair{display:grid;grid-template-columns:.62fr 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
.screen-pair figure{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.screen-pair figure:hover{transform:translateY(-3px)}
.screen-pair img{display:block;width:auto;max-width:100%;max-height:26vh;margin-inline:auto}
.screen-pair .cover{transform:translateY(14px) scale(.985);
  transition:transform .95s cubic-bezier(.2,.8,.2,1),opacity .95s ease}
.screen-pair .open{transform:translateY(24px) scale(.985);
  transition:transform .95s cubic-bezier(.2,.8,.2,1) .12s,opacity .95s ease .12s}
.reveal.in .screen-pair .cover,.reveal.in .screen-pair .open{transform:none}
@media (max-width:820px){
  .screens .screen-pair{grid-template-columns:1fr}
  .screens .screen-pair img{max-height:22vh}
  .screens{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3rem,7vw,5rem)}
}

/* ---------- split section (scenes) ---------- */
.split-section{padding-block:clamp(3rem,7vw,6rem)}
.split-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split-media img{width:auto;max-width:100%;max-height:44vh;display:block;margin-inline:auto}
.ticks{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.6rem}
.ticks li{position:relative;padding-left:1.7rem;color:var(--ink-2);font-size:.96rem;
  opacity:0;transform:translateY(10px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;
  background:linear-gradient(135deg,var(--cyan),var(--violet))}
.reveal.in .ticks li{opacity:1;transform:none}
.reveal.in .ticks li:nth-child(1){transition-delay:.12s}
.reveal.in .ticks li:nth-child(2){transition-delay:.22s}
.reveal.in .ticks li:nth-child(3){transition-delay:.32s}
@media (max-width:900px){
  .split-inner{grid-template-columns:1fr}
  .split-copy{text-align:center}
  .split-copy .eyebrow{justify-content:center}
  .split-copy .ticks li{text-align:left}
  .split-copy .lede{margin-inline:auto}
}

/* ---------- widgets: three features read together ----------
   The three have nothing in common dimensionally (0.45 tall, 1.07 square, 2.4 wide), so each
   keeps its own proportions: the tall shot runs down the left over two rows, the square clip
   and the wide strip beside it. */
.showcase.alt{padding-top:0}
.media-trio{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:clamp(1rem,2.4vw,1.8rem)}
.trio-item{margin:0;display:flex;flex-direction:column;gap:.85rem;min-width:0;align-self:start}
.trio-item.tall{grid-row:1/3;align-self:stretch}
.trio-media{position:relative}
.trio-media img,.trio-media video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.trio-item.tall .trio-media{flex:1;min-height:clamp(320px,34vw,460px)}
.trio-item.tall .trio-media img{object-fit:contain;object-position:center}
.trio-item.square .trio-media{aspect-ratio:720/672;background:var(--paper-3)}
.trio-item.wide .trio-media{aspect-ratio:960/400}
.trio-item figcaption{color:var(--muted);font-size:.92rem;line-height:1.5;
  padding:0;border-top:0;background:none}
.trio-item figcaption strong{display:block;color:var(--ink);font-weight:650;margin-bottom:.25rem}
.clip{max-width:760px;margin:0 auto clamp(2rem,5vw,3rem)}
.clip video{width:100%;display:block;background:var(--paper-3)}
@media (max-width:760px){
  .media-trio{grid-template-columns:1fr}
  .trio-item.tall{grid-row:auto;align-self:start}
  .trio-item.tall .trio-media{flex:none;aspect-ratio:1080/2412}
}

/* =============================================================== under a held icon
   Three things the long-press menu can carry, each explained by an abstract animation drawn
   in the page: shapes for icons, a finger, and the thing that appears under it. Every
   animation is transform and opacity only, shares one 7-second clock, is paused while off
   screen (app.js adds .idle), and is a single still for anyone who asked for less motion. */
.explain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.8rem)}
.explain-card{position:relative;padding:.9rem .9rem 1.6rem;border-radius:calc(var(--r) + 4px);
  background:var(--white);border:1px solid var(--line);box-shadow:var(--shadow-soft);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.explain-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.explain-card h3{margin:1.2rem .5rem .45rem}
.explain-card p{margin:0 .5rem;color:var(--muted);font-size:.95rem}
.explain-card .how{margin:.9rem .5rem 0;font-size:.8rem;color:var(--muted);letter-spacing:.02em;
  display:flex;align-items:center;gap:.5rem}
.explain-card .how::before{content:"";width:1rem;height:1px;background:var(--coral)}
@media (max-width:760px){ .explain-grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto} }

/* the stage: a wallpaper, sized in container units so every shape scales with the card */
.anim{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;
  container-type:inline-size;isolation:isolate;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.anim-stack{background:
  radial-gradient(55% 45% at 90% 8%,rgba(255,255,255,.55),transparent 70%),
  linear-gradient(160deg,#ffd9c4 0%,#f6cbe0 45%,#c9d5ff 100%)}
.anim-games{background:
  radial-gradient(55% 45% at 10% 10%,rgba(255,255,255,.55),transparent 70%),
  linear-gradient(200deg,#c4f0e4 0%,#bfe6fb 50%,#d6ccff 100%)}
.anim-media{background:
  radial-gradient(50% 40% at 85% 90%,rgba(255,255,255,.5),transparent 70%),
  linear-gradient(150deg,#ffd0c4 0%,#f3c5d9 40%,#c8cdff 100%)}
.anim *{position:absolute;box-sizing:border-box}
.anim .ic{width:13cqw;height:13cqw;border-radius:28%;
  background:linear-gradient(160deg,hsl(var(--h) 72% 66%),hsl(var(--h) 62% 48%));
  box-shadow:0 1.2cqw 2.6cqw -1cqw rgba(70,45,15,.35),inset 0 .3cqw 0 rgba(255,255,255,.4)}
.anim .ic svg{position:static;display:block;width:100%;height:100%;padding:24%;color:#fff}
.anim .ic.bg{opacity:.5}
.anim .held{z-index:3}
/* sits 1.2cqw outside the held icon's box and scales with it */
.anim .ring{z-index:2;border-radius:30%;width:15.4cqw;height:15.4cqw;
  border:.9cqw solid rgba(255,255,255,.95);box-shadow:0 0 0 .9cqw rgba(46,198,240,.85);
  opacity:0;transform:scale(.9)}
.anim .finger{z-index:6;width:14cqw;height:14cqw;border-radius:50%;
  background:rgba(255,255,255,.55);border:.5cqw solid rgba(255,255,255,.95);
  box-shadow:0 1.5cqw 4cqw -1cqw rgba(70,45,15,.4);opacity:0}
.anim .sheet{z-index:4;border-radius:3.6cqw;background:rgba(255,253,249,.92);
  border:.3cqw solid rgba(255,255,255,.95);
  box-shadow:0 5cqw 10cqw -4cqw rgba(70,45,15,.45);opacity:0}
.anim .sheet b{display:block;border-radius:1cqw;background:rgba(70,52,28,.2)}
.anim .row{display:flex;align-items:center;gap:2cqw;height:7cqw;opacity:0}
.anim .row i{position:static;width:6cqw;height:6cqw;border-radius:30%;flex:0 0 auto;
  background:linear-gradient(160deg,hsl(var(--h) 72% 66%),hsl(var(--h) 62% 48%))}
.anim .row b{position:static;height:1.6cqw;width:var(--w,16cqw)}

/* A: icon stacks. Hold an icon; a sheet opens under it with the stack of small icons. */
.anim-stack .ic{top:10cqw}
.anim-stack .r2{top:30cqw}
.anim-stack .c1{left:7.5cqw}.anim-stack .c2{left:29.5cqw}.anim-stack .c3{left:51.5cqw}.anim-stack .c4{left:73.5cqw}
.anim-stack .held{animation:heldIcon 7s ease-in-out infinite}
.anim-stack .ring{top:8.8cqw;left:28.3cqw;animation:ringIn 7s ease-in-out infinite}
.anim-stack .finger{left:33cqw;top:12.5cqw;animation:fingerIn 7s cubic-bezier(.2,.8,.2,1) infinite}
.anim-stack .sheet{left:24cqw;top:27cqw;width:42cqw;padding:3cqw 3cqw;transform-origin:30% 0;
  animation:sheetOpen 7s cubic-bezier(.2,.8,.2,1) infinite}
.anim-stack .row{position:relative;animation:rowIn 7s cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay:calc(var(--i) * .09s)}
.anim-stack .row + .row{margin-top:1.2cqw}
.anim-stack .r2{animation:dimRow 7s ease-in-out infinite}
@keyframes fingerIn{
  0%{opacity:0;transform:translate(28cqw,34cqw) scale(1)}
  10%{opacity:1;transform:translate(0,0) scale(1)}
  14%,78%{opacity:1;transform:translate(0,0) scale(.84)}
  86%,100%{opacity:0;transform:translate(0,-7cqw) scale(1)}
}
@keyframes heldIcon{0%,12%{transform:none}16%,80%{transform:scale(1.12)}88%,100%{transform:none}}
@keyframes ringIn{0%,12%{opacity:0;transform:scale(.9)}16%,80%{opacity:1;transform:scale(1.12)}88%,100%{opacity:0;transform:scale(.9)}}
@keyframes sheetOpen{0%,14%{opacity:0;transform:translateY(-2cqw) scale(.94)}22%,80%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(-2cqw) scale(.94)}}
@keyframes rowIn{0%,18%{opacity:0;transform:translateY(-2cqw)}26%,80%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(-2cqw)}}
@keyframes dimRow{0%,14%{opacity:1}22%,80%{opacity:.35}88%,100%{opacity:1}}

/* B: game launcher. Hold the launcher icon; a row of game chips slides out above the dock. */
.anim-games .dock{left:8cqw;right:8cqw;top:54cqw;height:19cqw;border-radius:5cqw;
  background:rgba(255,253,249,.5);border:.3cqw solid rgba(255,255,255,.8)}
.anim-games .ic{top:57cqw}
.anim-games .ic.bg{top:9cqw;left:auto;right:8cqw;opacity:.55}
.anim-games .c1{left:13.5cqw}.anim-games .c2{left:33.5cqw}.anim-games .c3{left:53.5cqw}.anim-games .c4{left:73.5cqw}
.anim-games .held{animation:heldIcon 7s ease-in-out infinite}
.anim-games .ring{top:55.8cqw;left:32.3cqw;animation:ringIn 7s ease-in-out infinite}
.anim-games .finger{left:37cqw;top:59.5cqw;animation:fingerGames 7s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes fingerGames{
  0%{opacity:0;transform:translate(30cqw,-30cqw) scale(1)}
  10%{opacity:1;transform:translate(0,0) scale(1)}
  14%,78%{opacity:1;transform:translate(0,0) scale(.84)}
  86%,100%{opacity:0;transform:translate(0,-7cqw) scale(1)}
}
.anim-games .chips{z-index:4;left:8cqw;top:5cqw;display:flex;flex-direction:column;gap:1.5cqw;width:56cqw}
.anim-games .chip{position:relative;display:flex;align-items:center;gap:1.8cqw;height:6.9cqw;
  padding:0 3cqw 0 1.6cqw;border-radius:999px;background:rgba(255,253,249,.94);
  border:.3cqw solid rgba(255,255,255,.95);box-shadow:0 2.4cqw 5cqw -2cqw rgba(70,45,15,.35);
  opacity:0;animation:chipIn 7s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--i) * .07s)}
.anim-games .chip i{position:static;width:4.6cqw;height:4.6cqw;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(160deg,hsl(var(--h) 72% 64%),hsl(var(--h) 62% 46%))}
.anim-games .chip b{position:static;display:block;height:1.6cqw;border-radius:1cqw;
  width:var(--w,10cqw);background:rgba(70,52,28,.24)}
@keyframes chipIn{0%,14%{opacity:0;transform:translateY(5cqw) scale(.94)}24%,80%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateY(5cqw) scale(.94)}}

/* C: media controls. Hold a playing app; a card shows the artwork and play, pause, next,
   with the progress line moving. */
.anim-media .ic{top:8cqw}
.anim-media .c1{left:20.5cqw}.anim-media .c2{left:43.5cqw}.anim-media .c3{left:66.5cqw}
.anim-media .held{animation:heldIcon 7s ease-in-out infinite}
.anim-media .ring{top:6.8cqw;left:42.3cqw;animation:ringIn 7s ease-in-out infinite}
.anim-media .finger{left:47cqw;top:10.5cqw;animation:fingerMedia 7s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes fingerMedia{
  0%{opacity:0;transform:translate(26cqw,36cqw) scale(1)}
  10%{opacity:1;transform:translate(0,0) scale(1)}
  14%,78%{opacity:1;transform:translate(0,0) scale(.84)}
  86%,100%{opacity:0;transform:translate(0,-7cqw) scale(1)}
}
.anim-media .sheet{left:11cqw;top:27cqw;width:78cqw;height:37cqw;padding:3.4cqw;transform-origin:50% 0;
  animation:sheetOpen 7s cubic-bezier(.2,.8,.2,1) infinite}
.anim-media .art{left:3.4cqw;top:3.4cqw;width:26cqw;height:26cqw;border-radius:3cqw;overflow:hidden;
  background:linear-gradient(145deg,#ffb27e,#e06f8f 55%,#6b6ee8);
  box-shadow:inset 0 .3cqw 0 rgba(255,255,255,.4)}
.anim-media .disc{left:18%;top:18%;width:64%;height:64%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,255,255,.1),rgba(255,255,255,.55),rgba(255,255,255,.1),rgba(255,255,255,.5),rgba(255,255,255,.1));
  animation:discSpin 7s linear infinite}
.anim-media .disc::after{content:"";position:absolute;inset:40%;border-radius:50%;background:rgba(40,25,60,.55)}
@keyframes discSpin{0%,22%{transform:rotate(0)}80%,100%{transform:rotate(320deg)}}
.anim-media .title{left:33.4cqw;top:5.2cqw;width:30cqw;height:2.2cqw}
.anim-media .sub{left:33.4cqw;top:9.2cqw;width:18cqw;height:1.6cqw;background:rgba(70,52,28,.12)}
.anim-media .btn-row{left:33.4cqw;top:14.6cqw;width:40cqw;height:10cqw;display:flex;gap:3cqw;align-items:center}
.anim-media .ctl{position:static;width:8.6cqw;height:8.6cqw;border-radius:50%;flex:0 0 auto;
  background:rgba(70,52,28,.08);display:grid;place-items:center;color:var(--ink)}
.anim-media .ctl.play{width:10cqw;height:10cqw;background:var(--ink);color:var(--paper)}
.anim-media .ctl svg{position:static;width:46%;height:46%;display:block}
.anim-media .track{left:3.4cqw;top:31.6cqw;width:71.2cqw;height:1.4cqw;border-radius:1cqw;background:rgba(70,52,28,.12)}
.anim-media .fill{left:0;top:0;width:100%;height:100%;border-radius:1cqw;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan-deep),var(--violet));transform:scaleX(.18);
  animation:progress 7s linear infinite}
.anim-media .knob{top:-1cqw;left:0;width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--violet);
  border:.5cqw solid #fff;box-shadow:0 .6cqw 1.6cqw -.4cqw rgba(70,45,15,.5);
  animation:knob 7s linear infinite}
@keyframes progress{0%,22%{transform:scaleX(.18)}80%{transform:scaleX(.64)}88%,100%{transform:scaleX(.18)}}
@keyframes knob{0%,22%{transform:translateX(11.1cqw)}80%{transform:translateX(43.9cqw)}88%,100%{transform:translateX(11.1cqw)}}

/* paused while off screen */
.idle *{animation-play-state:paused!important}

/* ---------- control cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.1rem}
.card{position:relative;padding:1.7rem 1.6rem;border-radius:var(--r);border:1px solid var(--line);
  background:var(--white);overflow:hidden;will-change:transform;
  box-shadow:0 1px 2px rgba(70,45,15,.04);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.card::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(46,198,240,.16),transparent 45%)}
.card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.card:hover::after{opacity:1}
.card .ic{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;margin-bottom:1rem;
  color:#fff;background:linear-gradient(135deg,var(--cyan-deep),var(--violet) 60%,var(--coral));
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.card .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card:hover .ic{transform:rotate(-6deg) scale(1.07)}
.card p{color:var(--muted);margin:0;font-size:.96rem}

/* ---------- privacy ---------- */
.privacy-inner{border:1px solid var(--line);border-radius:calc(var(--r) + 8px);padding:clamp(2rem,5vw,3.6rem);
  background:
    radial-gradient(60% 70% at 100% 0%,rgba(190,235,250,.7),transparent 60%),
    radial-gradient(50% 60% at 0% 100%,rgba(255,215,190,.6),transparent 60%),
    var(--white);
  box-shadow:var(--shadow-soft)}
.privacy-inner h2{max-width:30ch}
.pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.pill{padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--white);
  font-size:.88rem;color:var(--ink-2);animation:pillIn .55s backwards}
.pills .pill:nth-child(1){animation-delay:.05s}.pills .pill:nth-child(2){animation-delay:.11s}
.pills .pill:nth-child(3){animation-delay:.17s}.pills .pill:nth-child(4){animation-delay:.23s}
.pills .pill:nth-child(5){animation-delay:.29s}.pills .pill:nth-child(6){animation-delay:.35s}
@keyframes pillIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- get: the one dark card, the app's own glass ---------- */
.get{text-align:center}
.get-inner{border-radius:calc(var(--r) + 8px);padding:clamp(2.4rem,6vw,4.5rem) 1.5rem;
  color:var(--paper);background:
    radial-gradient(700px 320px at 50% 0%,rgba(91,97,227,.45),transparent 70%),
    radial-gradient(500px 260px at 100% 100%,rgba(238,122,90,.3),transparent 70%),
    #16171f;
  box-shadow:var(--shadow)}
.get-inner h2{color:#fff}
.get .lede{margin-inline:auto;color:rgba(247,243,236,.72)}
.get .cta{justify-content:center}
.get .btn.primary{background:var(--paper);color:var(--ink);box-shadow:0 12px 30px -12px rgba(0,0,0,.6)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:2.6rem clamp(1rem,4vw,2.5rem);margin-top:2rem;background:var(--paper-2)}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;align-items:center;
  gap:.5rem;text-align:center}
.foot-inner img{border-radius:8px}
.foot-inner p{margin:0;font-size:.9rem;color:var(--muted)}
.foot-inner a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-strong)}
/* readable but clearly subordinate: a disclaimer nobody can find protects nobody */
.legal{max-width:76ch;margin:clamp(1.8rem,4vw,2.6rem) auto 0;padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--line);text-align:left}
.legal h2{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin:0 0 .9rem}
.legal p{font-size:.82rem;line-height:1.65;color:var(--muted);margin:0 0 .75rem}
.legal p:last-child{margin-bottom:0}

/* ---------- responsive odds and ends ---------- */
@media (max-width:900px){ .nav nav{display:none} }

/* ---------- respect motion preferences ----------
   Everything arrives rather than travels. The three feature animations become their final
   frame: the finger down, the thing it opened fully open. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .reveal.in .word,.stage-notes li,.ticks li,.screen-pair .cover,.screen-pair .open,.pill{
    opacity:1!important;transform:none!important;animation:none!important}
  .opener h1 span,.opener h1 em,.opener .lede,.opener .cta,.opener .eyebrow,
  .opener-art,.opener-art .sheet,.opener-art .shade,.opener-art .apps i.held,.opener-art .apps i,.opener-art .sheet-head,.opener-art .sheet-note,.opener-art .sheet-widget,.opener-art .chip,.opener-art .sheet-actions,.opener-art .tiles .lit,.opener-art .tiles .lit::before,.opener-art .finger,.opener-art .finger2,.opener-art .press-ring,.opener .dot{animation:none!important;opacity:1;transform:none}
  .opener-art .apps i.held{transform:scale(1.14);box-shadow:0 0 0 2.5px #fff,0 0 0 5px rgba(46,198,240,.9),0 14px 30px -10px rgba(11,134,179,.6)}
  .opener-art .shade{opacity:1}.opener-art .finger,.opener-art .finger2,.opener-art .press-ring{opacity:0}.opener-art .tiles .lit{background:rgba(214,164,52,.34)}.opener-art .tiles .lit::before{background:#ffd264}.opener-art .chip.tap{background:rgba(118,104,228,.62)}
  .strip-inner{animation:none}
  /* the hero demo: the panel is simply shown, and still answers a hold, instantly */
  .demo .press{display:none}
  .demo .panel{opacity:1;transform:none;animation:none}
  .demo.live .panel{opacity:0;transform:none;transition:none}
  .demo.live.holding .panel{opacity:1;transform:none}
  .demo.live .press{display:block;transition:none}
  .demo.live .hold-ring{animation:none}
  /* the three explained features, as stills */
  .anim *{animation:none!important}
  .anim .finger{opacity:1;transform:scale(.84)}
  .anim .held{transform:scale(1.12)}
  .anim .ring{opacity:1;transform:scale(1.12)}
  .anim .sheet,.anim .row,.anim-games .chip{opacity:1;transform:none}
  .anim-stack .r2{opacity:.35}
  .anim-media .fill{transform:scaleX(.64)}
  .anim-media .knob{transform:translateX(43.9cqw)}
  .anim-media .disc{transform:rotate(320deg)}
}

/* Original panel slot: native source images, not a resized/rotated raster montage.
   Max widths retain at least 3 source pixels per CSS pixel on dense displays. */
#panel .feature-stage{grid-template-columns:1fr;gap:2rem}
#panel .panel-captures{display:grid;grid-template-columns:minmax(0,.483333fr) minmax(0,1fr);
  gap:24px;max-width:914px;margin-inline:auto;align-items:center}
#panel .panel-captures a{display:block;min-width:0;border-radius:18px;overflow:hidden;background:#050508}
#panel .panel-captures img{width:100%;height:auto;max-height:none;display:block;margin:0}
#panel .stage-notes{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){
  #panel .panel-captures{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  #panel .panel-cover{width:100%;max-width:290px;margin-inline:auto}
  #panel .panel-open{width:100%;max-width:600px;margin-inline:auto}
  #panel .stage-notes{grid-template-columns:minmax(0,1fr)}
}