/* The olith.app landing page in Tesla-calm: one calm field, display type, the product itself as the
   picture, blue only on what plays. Reads the dashboard profile (the Tesla-calm values) through local
   aliases, like review.css; values come from design/tokens.css. The picture values below (the hero deck's
   material, its light and grain, the readout panels) sit between the profile's surfaces and belong to this page only. */
:root{--r-in:var(--auris-dashboard-inner-radius);--r-panel:var(--auris-dashboard-panel-radius);--r-pill:var(--auris-dashboard-pill-radius);--ease:var(--auris-dashboard-ease-out);--d-press:var(--auris-dashboard-duration-press);--d-ui:var(--auris-dashboard-duration-ui);--press:var(--auris-dashboard-press-scale);--sans:var(--auris-font-sans);--ctl:var(--auris-dashboard-control-height);--tap:var(--auris-dashboard-phone-target);--wrap:min(1312px,100% - 128px);
  /* Landing scale: seven steps. The product pictures use the app's own steps (--fs-*). */
  --l-small:14px;--l-body:17px;--l-lead:20px;--l-title:28px;--l-state:clamp(28px,3vw,44px);--l-display:clamp(52px,6.6vw,96px);--l-fig:clamp(72px,9vw,140px);
  --fs-meta:12px;--fs-body:14px;--fs-section:16px;--fs-title:20px;--fs-large:28px;
  --bg:var(--auris-dashboard-light-bg);--surface:var(--auris-dashboard-light-surface);--raised:var(--auris-dashboard-light-raised);--hover:var(--auris-dashboard-light-hover);--line:var(--auris-dashboard-light-line);--outline:var(--auris-dashboard-light-outline);--ink:var(--auris-dashboard-light-ink);--muted:var(--auris-dashboard-light-muted);--faint:var(--auris-dashboard-light-faint);--inv:var(--auris-dashboard-light-inverse);--inv-ink:var(--auris-dashboard-light-inverse-ink);--sig:var(--auris-dashboard-light-sig);--wave:var(--auris-dashboard-light-wave);--range:var(--auris-dashboard-light-range);--dock:var(--auris-dashboard-light-dock);--ok:var(--auris-dashboard-light-green);--ok-bg:var(--auris-dashboard-light-green-bg);--warn:var(--auris-dashboard-light-amber);--warn-bg:var(--auris-dashboard-light-amber-bg);--bad:var(--auris-dashboard-light-error);
  --deck-a:#fff;--deck-b:#f7f7f7;--deck-edge:rgba(0,0,0,.07);--deck-lit:rgba(255,255,255,1);--deck-shade:0 1px 2px rgba(0,0,0,.06),0 24px 48px -24px rgba(0,0,0,.22),0 64px 120px -48px rgba(0,0,0,.18);--glow:color-mix(in srgb,var(--sig) 14%,transparent);--grain:.05;--env:#cfcfcf;--well:#f4f4f4;--tile-a:#fff;--tile-b:#e9e9e9;--on-sig:#fff;--card-shade:0 14px 32px -14px rgba(0,0,0,.3);color-scheme:light}
:root[data-theme="dark"]{--bg:var(--auris-dashboard-dark-bg);--surface:var(--auris-dashboard-dark-surface);--raised:var(--auris-dashboard-dark-raised);--hover:var(--auris-dashboard-dark-hover);--line:var(--auris-dashboard-dark-line);--outline:var(--auris-dashboard-dark-outline);--ink:var(--auris-dashboard-dark-ink);--muted:var(--auris-dashboard-dark-muted);--faint:var(--auris-dashboard-dark-faint);--inv:var(--auris-dashboard-dark-inverse);--inv-ink:var(--auris-dashboard-dark-inverse-ink);--sig:var(--auris-dashboard-dark-sig);--wave:var(--auris-dashboard-dark-wave);--range:var(--auris-dashboard-dark-range);--dock:var(--auris-dashboard-dark-dock);--ok:var(--auris-dashboard-dark-green);--ok-bg:var(--auris-dashboard-dark-green-bg);--warn:var(--auris-dashboard-dark-amber);--warn-bg:var(--auris-dashboard-dark-amber-bg);--bad:var(--auris-dashboard-dark-error);
  --deck-a:#18181a;--deck-b:#0e0e0f;--deck-edge:rgba(255,255,255,.07);--deck-lit:rgba(255,255,255,.09);--deck-shade:0 40px 80px -32px rgba(0,0,0,.9);--glow:color-mix(in srgb,var(--sig) 22%,transparent);--grain:.07;--env:#3b3b3e;--well:#0a0a0b;--tile-a:#111;--tile-b:#1a1a1a;--on-sig:#000;--card-shade:0 18px 40px -16px rgba(0,0,0,.7);color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;scrollbar-color:var(--hover) transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--l-body);line-height:1.5;font-feature-settings:"tnum" 1;overflow-x:clip}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--range)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.theme-swap *,.theme-swap *::before,.theme-swap *::after{transition:none!important}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:10;display:flex;align-items:center;min-height:var(--tap);padding:0 18px;border-radius:var(--r-pill);background:var(--inv);color:var(--inv-ink);font-size:var(--l-small);font-weight:500}
.skip:focus{top:16px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:var(--wrap);margin-inline:auto}
.sp{flex:1}
section{scroll-margin-top:24px}

/* ---------- controls, as the app draws them ---------- */
svg.i{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl);padding:0 18px;border-radius:var(--r-pill);border:1px solid transparent;background:var(--raised);color:var(--ink);font-size:var(--l-small);font-weight:500;line-height:1;white-space:nowrap;transition-property:background-color,border-color,color,transform;transition-duration:var(--d-ui);transition-timing-function:var(--ease)}
.btn svg.i{width:16px;height:16px}
.btn.primary{background:var(--inv);color:var(--inv-ink)}
.btn.outline{background:transparent;border-color:var(--outline)}
.btn.quiet{background:transparent;color:var(--muted);padding:0 12px}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.big{height:52px;padding:0 26px;font-size:var(--l-body)}
.btn.sm{height:36px;padding:0 14px;font-size:var(--fs-body)}
a.btn:hover{background:var(--hover)}
a.btn.primary:hover{background:var(--muted)}
a.btn.outline:hover{background:var(--raised)}
a.btn.quiet:hover{color:var(--ink);background:var(--raised)}
a.btn:active,button.play:active,.icon-btn:active{transform:scale(var(--press));transition-duration:var(--d-press)}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:50%;border:0;padding:0;display:inline-grid;place-items:center;background:transparent;color:var(--muted);transition-property:background-color,color,transform;transition-duration:var(--d-ui);transition-timing-function:var(--ease)}
.icon-btn:hover{background:var(--raised);color:var(--ink)}
.theme-btn .moon,:root[data-theme="dark"] .theme-btn .sun{display:block}
.theme-btn .sun,:root[data-theme="dark"] .theme-btn .moon{display:none}
:root:not(.js) .theme-btn{display:none}
.play{width:56px;height:56px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;flex:none;background:var(--inv);color:var(--inv-ink);transition:transform var(--d-press) var(--ease)}
.play svg.i{width:24px;height:24px}
.play:disabled{cursor:default}
.play .ic-pause,.play.playing .ic-play{display:none}
.play.playing .ic-pause{display:block}
.seg{display:inline-flex;padding:4px;gap:2px;border-radius:var(--r-pill);background:var(--raised)}
.seg>span{display:inline-flex;align-items:center;height:32px;padding:0 16px;border-radius:var(--r-pill);color:var(--muted);font-size:var(--fs-body);font-weight:500;white-space:nowrap}
.seg>.on{background:var(--inv);color:var(--inv-ink)}
.switch{position:relative;display:inline-block;width:44px;height:26px;flex:none;border-radius:var(--r-pill);background:var(--outline)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.switch.on{background:var(--ink)}
.switch.on::after{transform:translateX(18px)}
.pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--raised);font-size:var(--fs-meta);font-weight:500;white-space:nowrap}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--r-pill);font-size:var(--fs-body);font-weight:500;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip svg.i{width:16px;height:16px;stroke-width:2}
.time{color:var(--sig);font-weight:500;font-variant-numeric:tabular-nums}
.wordmark{display:block;width:88px;height:24px;line-height:0}
.wordmark img{width:100%;height:100%;object-fit:contain}
:root[data-theme="dark"] .wordmark img{filter:invert(1)}

/* ---------- top bar ---------- */
.lp-top{height:72px;display:flex;align-items:center;gap:10px}
.lp-brand{display:flex;align-items:center;gap:9px;min-height:var(--tap);color:var(--ink)}
/* The header's Growth rings mark is drawn as note-shaped layers, outermost first, ink and page background in turn, each
   scaled about the stone's focus, so it can build from the inner ring outward once on load (see the motion block below). */
.rings{display:block;flex:none}
.rings path{transform-box:view-box;transform-origin:40px 60px;transform:scale(var(--k))}
.rings .rl{fill:currentColor}
.rings .ri{fill:var(--bg)}
.lp-top .lp-brand{margin-right:28px}
.lp-nav{display:flex;gap:4px}
.lp-nav a{padding:8px 12px;border-radius:var(--r-pill);color:var(--muted);font-size:var(--l-small);font-weight:500;transition-property:background-color,color;transition-duration:var(--d-ui);transition-timing-function:var(--ease)}
.lp-nav a:hover{color:var(--ink);background:var(--raised)}

/* ---------- hero: the headline, then Night Drive open in the workspace. The deck is the one lit object on the page:
   a raised panel with a top edge catching light, a faint grain and the signal colour glowing behind it. ---------- */
.hero{display:flex;flex-direction:column;padding-top:40px}
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 40px;align-items:end}
.hero h1{grid-column:1/-1;margin-left:-.04em;font-size:var(--l-display);font-weight:500;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.hero p{max-width:46ch;color:var(--muted);font-size:var(--l-lead);line-height:1.45}
.hero p b{color:var(--ink);font-weight:500}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.stack{position:relative;margin-top:64px;perspective:1600px}
.stack::before{content:"";position:absolute;left:8%;right:8%;top:-60px;height:70%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(30px);pointer-events:none}
.turn{transform-origin:50% 40%;will-change:transform}
.deck{position:relative;border-radius:var(--r-panel);background:linear-gradient(180deg,var(--deck-a),var(--deck-b) 70%);box-shadow:inset 0 1px 0 var(--deck-lit),0 0 0 1px var(--deck-edge),var(--deck-shade);overflow:hidden;isolation:isolate;transform-origin:50% 0}
.deck::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.deck-top{display:flex;align-items:center;gap:14px;padding:14px 18px;box-shadow:inset 0 -1px 0 var(--deck-edge)}
.deck-top .art{width:40px;height:40px;flex:none;border-radius:var(--r-in);object-fit:cover;box-shadow:0 0 0 1px var(--deck-edge)}
.deck-top .who{display:grid;line-height:1.3}
.deck-top .who b{font-size:var(--fs-section);font-weight:500}
.deck-top .who span{color:var(--faint);font-size:var(--fs-meta)}
.crew{display:flex;align-items:center;gap:8px;margin-left:12px;color:var(--faint);font-size:var(--fs-meta);white-space:nowrap}
.faces{display:flex}
.faces img{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--deck-a)}
.faces img+img{margin-left:-7px}
.match{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--fs-body);white-space:nowrap}
.deck-body{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.deck-main{position:relative;min-width:0;padding:0 0 18px}
.deck .ui{position:relative;z-index:2;display:flex;align-items:center;gap:18px;padding:22px 28px 10px}
.deck .clock{min-width:5.6em;font-size:var(--fs-title);font-variant-numeric:tabular-nums}
.deck .clock .of{color:var(--faint)}
.deck .read{font-size:var(--fs-large);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.deck .read small{margin-left:4px;color:var(--muted);font-size:var(--fs-meta);letter-spacing:0}
/* Left and right channel levels: they move while Mix 12 plays and rest when it stops. */
.meter{display:flex;gap:3px;height:28px;align-items:flex-end}
.meter i{width:4px;height:100%;border-radius:2px;background:linear-gradient(to top,var(--sig) 0 70%,var(--warn) 70% 88%,var(--bad) 88%);transform-origin:50% 100%;transform:scaleY(.62);opacity:.9}
.meter i+i{transform:scaleY(.56)}
/* The played part is a window whose edge is the playhead; the window and the waveform inside it move in
   opposite directions, so the waveform stays put and only transforms animate. */
.motif{position:relative;height:clamp(220px,26vw,340px);margin:0 28px}
.motif svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.m-base{fill:var(--env)}
.m-base .r{opacity:.4}
.m-win,.m-track{position:absolute;inset:0}
.m-win{overflow:hidden;transform:translateX(-49.32%)}
.m-play{fill:var(--sig);transform:translateX(49.32%);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--sig) 55%,transparent))}
.m-play .r{opacity:.32}
.m-track{transform:translateX(50.68%)}
.m-head{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;margin-left:-1px;border-radius:1px;background:var(--ink);box-shadow:0 0 18px 2px var(--glow)}
.m-head::before{content:"";position:absolute;top:0;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--ink)}
.marks{position:relative;height:34px;margin:10px 28px 0;color:var(--faint);font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.marks>*{position:absolute;left:var(--at)}
.marks .t{bottom:0}
/* The reviewers' notes, pinned where they fall in the song: a face on a stem, a band for a section, and a card that
   opens from the pin. The markup is the still picture (every pin, the approval open); while the hero plays,
   landing.js opens one note at a time and the pins arrive as their notes do. */
.rv{position:absolute;inset:-8px 0 -6px;z-index:2;pointer-events:none}
.rn{position:absolute;inset:0;--cw:272px}
.rn.open{z-index:2}
.rn .band{position:absolute;top:18px;bottom:0;left:var(--at);width:var(--w);border-radius:4px;background:color-mix(in srgb,var(--sig) 12%,transparent);box-shadow:inset 0 2px 0 var(--sig);transform-origin:0 50%}
.rn .stem{position:absolute;left:var(--at);top:18px;bottom:0;width:1px;margin-left:-.5px;background:linear-gradient(var(--ink),transparent);opacity:.45;transform-origin:50% 0}
.rn .face{position:absolute;left:var(--at);top:0;width:28px;height:28px;margin-left:-14px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--deck-b),0 0 0 3.5px var(--sig);pointer-events:auto}
.rn .card{position:absolute;top:40px;left:clamp(0px,calc(var(--at) - var(--cw)/2),calc(100% - var(--cw)));width:var(--cw);display:grid;gap:8px;padding:12px 14px 14px;border-radius:var(--r-in);background:var(--deck-a);box-shadow:0 0 0 1px var(--deck-edge),var(--card-shade);color:var(--ink);font-size:var(--fs-body);line-height:1.4;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.92);transform-origin:var(--ox,50%) 0;transition:opacity 260ms var(--ease),transform 420ms var(--ease),visibility 0s linear 420ms}
.rn.open .card{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.rn p{max-width:none;color:inherit;font-size:inherit;line-height:inherit}
.rn svg.i{position:static;width:14px;height:14px;stroke-width:2}
.rn .by{display:flex;align-items:center;gap:8px;color:var(--faint);font-size:var(--fs-meta)}
.rn .by img{width:24px;height:24px;flex:none;border-radius:50%;object-fit:cover}
.rn .by b{color:var(--ink);font-size:var(--fs-body);font-weight:500}
.rn .time{margin-right:8px}
.rn .chip{justify-self:start;height:28px;padding:0 10px;font-size:var(--fs-meta)}
.stack.run .rn .face{opacity:0;transform:scale(.3);transition:opacity 220ms var(--ease),transform 520ms var(--ease)}
.stack.run .rn .stem,.stack.run .rn .band{opacity:0;transition:opacity 420ms var(--ease),transform 620ms var(--ease)}
.stack.run .rn .stem{transform:scaleY(0)}
.stack.run .rn .band{transform:scaleX(0)}
.stack.run .rn.on .face,.stack.run .rn.on .band{opacity:1;transform:none}
.stack.run .rn.on .stem{opacity:.45;transform:none}
@media (hover:hover) and (pointer:fine){
  .rn:has(.face:hover){z-index:3}
  .rn.on .face:hover~.card{opacity:1;visibility:visible;transform:none;transition-delay:0s}
}
.versions{position:relative;display:grid;align-content:start;gap:2px;padding:14px 12px 14px 22px;box-shadow:inset 1px 0 0 var(--deck-edge)}
.versions::before{content:"";position:absolute;left:31px;top:34px;bottom:auto;height:calc(4*58px);width:2px;border-radius:1px;background:var(--hover)}
.versions li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1px 10px;padding:10px 12px 10px 24px;border-radius:var(--r-in);font-size:var(--fs-meta);line-height:1.35}
.versions li::before{content:"";position:absolute;left:5px;top:15px;width:10px;height:10px;border-radius:50%;background:var(--deck-b);box-shadow:inset 0 0 0 2px var(--outline)}
.versions b{font-size:var(--fs-body);font-weight:500}
.versions span{grid-column:1/-1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.versions small{grid-row:1;grid-column:2;justify-self:end;align-self:center;color:var(--faint);font-size:var(--fs-meta)}
.versions .on{background:var(--hover)}
:root:not([data-theme="dark"]) .versions .on{background:var(--well)}
.versions .on::before{background:var(--sig);box-shadow:0 0 0 3px color-mix(in srgb,var(--sig) 28%,transparent)}

/* ---------- the artist's side: the review page on a phone, in front of the song's shape ---------- */
.show{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end;gap:40px;padding:96px 0}
.names{display:grid;font-size:var(--l-state);font-weight:500;line-height:1.15;letter-spacing:-.02em}
.names-h{margin-bottom:6px;color:var(--faint);font:inherit;letter-spacing:inherit}
.names-list{display:grid;justify-items:start}
.names-list button{position:relative;min-height:var(--tap);padding:2px 0;border:0;background:none;color:var(--faint);font:inherit;letter-spacing:inherit;text-align:left;transition:color var(--d-ui) var(--ease)}
.names-list button::before{content:"";position:absolute;left:-.5em;top:50%;width:.22em;height:.22em;margin-top:-.11em;border-radius:50%;background:currentColor;opacity:0;transition:opacity var(--d-ui) var(--ease)}
.names-list button[aria-selected="true"]{color:var(--ink)}
.names-list button[aria-selected="true"]::before{opacity:1}
.names-list button:hover{color:var(--muted)}
.names-list button[aria-selected="true"]:hover{color:var(--ink)}
.show-stage{position:relative;height:max(600px,min(76svh,720px));border-radius:var(--r-panel)}
.show-stage:focus-visible{outline-offset:8px}
.show-stage::before{content:"";position:absolute;left:42%;top:8%;width:560px;height:80%;margin-left:-280px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent);filter:blur(30px);pointer-events:none}
.shape{position:absolute;left:0;right:-64px;top:12%;height:64%}
.shape svg{display:block;width:100%;height:100%;fill:var(--sig)}
.fact{position:absolute;right:0;top:calc(76% + 40px);width:min(21ch,58% - 174px);text-align:right}
.phone{position:absolute;left:42%;top:0;z-index:1;transform:translateX(-50%);width:300px;height:100%;max-height:640px;padding:18px 16px;border-radius:40px;background:var(--bg);outline:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-body);line-height:1.45}
:root:not([data-theme="dark"]) .phone{outline-color:var(--outline)}
.ph-brand{display:flex;align-items:center;gap:6px;flex:none;height:16px}
.ph-brand .wordmark{width:53px;height:14px}
.ph-head-row{display:flex;align-items:center;gap:12px;flex:none;margin-top:4px}
.ph-art{width:44px;height:44px;flex:none;border-radius:var(--r-in);object-fit:cover}
.ph-title{min-width:0;font-size:30px;font-weight:500;letter-spacing:-.04em;line-height:1}
.ph-from{display:flex;align-items:center;gap:8px;flex:none;color:var(--muted);font-size:var(--fs-meta)}
.ph-from img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.ph-from b{color:var(--ink);font-weight:500}
.ph-road{position:relative;flex:1 1 auto;min-height:96px;border-radius:var(--r-in);background:var(--surface);overflow:hidden;isolation:isolate}
.ph-persp{position:absolute;inset:0;perspective:270px;perspective-origin:50% 22%;overflow:hidden}
.ph-plane{position:absolute;left:50%;bottom:-4px;width:210px;height:1050px;margin-left:-105px;transform-origin:50% 100%;transform:rotateX(74deg)}
.ph-plane svg{display:block;width:100%;height:100%;overflow:visible}
.r-env{fill:var(--wave)}
.r-env.r-near{fill:var(--sig)}
.r-edge{stroke:var(--outline);stroke-width:3}
.r-dash{stroke:var(--ink);stroke-width:5;stroke-dasharray:40 60;opacity:.5}
.r-note{stroke:var(--ink);stroke-width:5}
.ph-sign{position:absolute;top:12px;z-index:1;display:grid;max-width:46%;line-height:1.25}
.ph-sign.now{left:14px}
.ph-sign.next{right:14px;text-align:right}
.ph-sign b{font-size:var(--fs-section);font-weight:400;letter-spacing:-.02em}
.ph-sign.next b{color:var(--muted)}
.ph-sign span{color:var(--muted);font-size:var(--fs-meta)}
.ph-row{display:flex;align-items:center;gap:12px;flex:none}
.ph-row .play{width:44px;height:44px}
.ph-row .play svg.i{width:20px;height:20px}
.ph-row .clock{font-size:var(--fs-title);font-variant-numeric:tabular-nums}
.ph-row .clock span{color:var(--faint)}
.ph-wave{position:relative;flex:none;height:44px}
.ph-wave svg{position:absolute;inset:0;width:100%;height:100%}
.w-rest{fill:var(--wave)}
.w-played{fill:var(--sig)}
.ph-head,.ph-pin,.ph-range{position:absolute;top:-6px;bottom:-6px}
.ph-head{left:50.68%;width:2px;margin-left:-1px;background:var(--ink)}
.ph-pin,.ph-range{opacity:0;transition:opacity 240ms var(--ease)}
.ph-pin{left:25.3%;width:2px;margin-left:-1px;background:var(--ink)}
.ph-range{left:93.2%;width:5.9%;border:1px solid var(--sig);border-radius:4px;background:var(--range)}
.ph-pin img{position:absolute;max-width:none;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--sig)}
.phone[data-state="moment"] .ph-pin,.phone[data-state="section"] .ph-range{opacity:1}
.ph-states{position:relative;flex:none;height:136px}
.ph-s{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 240ms var(--ease),visibility 0s linear 240ms}
.phone[data-state="listen"] [data-s="listen"],.phone[data-state="moment"] [data-s="moment"],.phone[data-state="section"] [data-s="section"],.phone[data-state="voice"] [data-s="voice"],.phone[data-state="approve"] [data-s="approve"]{opacity:1;visibility:visible;transition-delay:0s}
.ph-tip{padding-top:2px;color:var(--muted)}
.ph-card{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-in);background:var(--surface)}
.ph-label{display:flex;align-items:center;gap:8px;color:var(--sig);font-size:var(--fs-meta);font-weight:500}
.ph-label img{width:20px;height:20px;border-radius:50%;object-fit:cover}
.ph-card p{line-height:1.4}
.ph-acts{display:flex;gap:8px;margin-top:2px}
.ph-acts .btn{flex:1 1 0;min-width:0;padding:0 10px}
.ph-rec{display:flex;align-items:center;gap:10px;height:30px}
.ph-rec .dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--bad)}
.ph-rec .t{flex:none;color:var(--muted);font-size:var(--fs-meta);font-variant-numeric:tabular-nums}
.levels{flex:1;min-width:0;height:28px;display:flex;align-items:center;gap:2px;overflow:hidden}
.levels i{width:3px;flex:none;border-radius:2px;background:var(--bad)}
.ph-ok{display:grid;justify-items:start;gap:6px;padding-top:2px}
.ph-ok .disc{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--inv);color:var(--inv-ink)}
.ph-ok .disc svg.i{width:24px;height:24px;stroke-width:2}
.ph-ok b{font-size:var(--fs-title);font-weight:500;letter-spacing:-.01em;line-height:1.2}
.ph-ok span{color:var(--muted)}
.ph-dock{flex:none;display:grid;margin:auto -16px -18px;padding:12px 16px 18px;background:var(--dock)}
.d-open,.d-done{grid-area:1/1;display:flex;align-items:center;gap:8px;transition:opacity 240ms var(--ease),visibility 0s linear 240ms}
.d-open .btn{flex:1 1 auto;min-width:0;padding:0 12px;font-size:var(--fs-body)}
.d-done{opacity:0;visibility:hidden}
.d-done .chip{flex:1 1 0}
.phone[data-state="approve"] .d-open{opacity:0;visibility:hidden}
.phone[data-state="approve"] .d-done{opacity:1;visibility:visible;transition-delay:0s}

/* ---------- how it works: the product's progress bar, enlarged; widths follow how long each step takes ---------- */
.how{padding:72px 0 120px}
.sec-h{max-width:14ch;margin-bottom:64px;font-size:var(--l-display);font-weight:500;letter-spacing:-.045em;line-height:1;text-wrap:balance}
.bar{display:flex;gap:6px}
.bar .st{flex:var(--g) 1 0;min-width:200px;display:grid;grid-template-rows:22vh auto;gap:18px}
.bar .blk{position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:20px;border-radius:var(--r-panel);font-size:var(--l-title);letter-spacing:-.02em;line-height:1.1;overflow:hidden}
/* Each step's block shows it happening to Glass Hours. */
.vis{position:relative;display:flex;align-items:flex-end;gap:10px;min-height:64px;font-size:var(--fs-body);letter-spacing:0;line-height:1.3}
.mini{display:block;width:100%;height:44px;fill:currentColor;opacity:.3}
.v-measure{flex-wrap:wrap;align-content:flex-end}
.v-measure .mini{flex:1 0 100%;opacity:.45;fill:var(--sig)}
.v-read{display:flex;align-items:baseline;gap:4px}
.v-read b{font-size:var(--fs-large);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.v-read small{color:var(--muted);font-size:var(--fs-meta)}
.v-measure .pill{margin-left:auto}
.qr-mini{width:56px;height:56px;flex:none;border-radius:6px}
.v-link{display:grid;min-width:0}
.v-link b{font-weight:500}
.v-link>span{color:var(--muted);font-size:var(--fs-meta)}
.v-link .v-copied{display:flex;align-items:center;gap:4px;margin-top:4px;color:var(--ink);font-weight:500}
.v-copied svg.i{width:14px;height:14px;stroke-width:2.2}
.v-notes{display:block;height:88px}
.v-notes .mini{position:absolute;left:0;right:0;bottom:0}
.v-band{position:absolute;bottom:0;left:var(--at);width:var(--w);height:58px;border-radius:4px;background:color-mix(in srgb,var(--on-sig) 14%,transparent);box-shadow:inset 0 2px 0 var(--on-sig)}
.v-pin{position:absolute;bottom:0;left:var(--at);display:grid;justify-items:center;gap:2px;width:40px;margin-left:-20px}
.v-pin img{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--sig),0 0 0 3.5px var(--on-sig)}
.v-pin small{font-size:var(--fs-meta);font-weight:500;font-variant-numeric:tabular-nums}
.v-pin:last-child{bottom:30px}
.v-tap{display:grid;align-items:end}
.v-btn,.v-done{grid-area:1/1;justify-self:start;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--r-pill);font-size:var(--fs-body);font-weight:500;white-space:nowrap}
.v-btn{background:var(--inv-ink);color:var(--inv)}
.v-btn svg.i{width:16px;height:16px;stroke-width:2}
.v-done{gap:8px;padding-left:8px;background:var(--ok-bg);color:var(--ok);opacity:0}
.v-done img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.how:not(.armed) .v-btn{opacity:0}
.how:not(.armed) .v-done{opacity:1}
.bar .st:nth-child(1) .blk{background:var(--raised)}
.bar .st:nth-child(2) .blk{background:var(--hover)}
.bar .st:nth-child(3) .blk{background:var(--sig);color:var(--on-sig)}
.bar .st:nth-child(4) .blk{background:var(--inv);color:var(--inv-ink)}
.bar p{max-width:26ch;color:var(--muted)}
.bar .st:nth-child(3) .v-pin small,.bar .st:nth-child(3) .mini{color:var(--on-sig)}
.bar .st:nth-child(3) .mini{opacity:.35}
.bar p b{color:var(--ink);font-weight:500}

/* ---------- close-ups: one mix's readout as one panel, then three working pieces at their own size ---------- */
.board{padding-bottom:40px}
.board-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 40px;align-items:end;margin-bottom:48px}
.board-head .sec-h{margin:0}
.board-head p{max-width:40ch;color:var(--muted)}
.cap{display:grid;gap:2px}
.cap h3,.cell h3{font-size:var(--l-body);font-weight:500;line-height:1.35}
.cap p,.cell>p{max-width:40ch;color:var(--muted);font-size:var(--l-small)}
.sheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:var(--r-panel);background:var(--tile-a);overflow:hidden;box-shadow:0 0 0 1px var(--deck-edge),0 48px 120px -56px var(--glow)}
.sheet-read{display:grid;align-content:start;gap:0;padding:32px 36px 36px}
.sheet-read .lbl{color:var(--muted);font-size:var(--l-small)}
.sheet-read .big{margin:4px 0 0 -.05em;font-size:var(--l-fig);font-weight:300;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet-read .big small{margin-left:.18em;color:var(--muted);font-size:.22em;font-weight:400;letter-spacing:0}
.reads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;margin:32px 0 40px}
.reads dt{color:var(--muted);font-size:var(--l-small)}
.reads dd{margin:2px 0 0;font-size:var(--fs-large);font-weight:300;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.reads dd small{color:var(--muted);font-size:var(--fs-meta);letter-spacing:0}
.reads .warn{color:var(--warn)}
.sheet-targets{display:grid;align-content:start;gap:28px;padding:32px 36px 36px;background:var(--tile-b)}
.targets{display:grid;gap:14px}
.targets li{display:grid;grid-template-columns:8.5em minmax(0,1fr) 4.5em;align-items:center;gap:16px;font-size:var(--fs-section)}
.targets b{font-weight:500}
.targets i{position:relative;height:8px;border-radius:4px;background:var(--hover);overflow:hidden}
:root:not([data-theme="dark"]) .targets i{background:var(--tile-a)}
.targets i::after{content:"";position:absolute;inset:0;border-radius:4px;background:var(--ink);transform-origin:0 50%;transform:scaleX(calc(var(--v)/3))}
.targets span{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.headroom{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;color:var(--muted);font-size:var(--l-small)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.cell{display:grid;grid-template-rows:1fr auto auto;gap:2px;min-height:232px;padding:28px 28px 26px;border-radius:var(--r-panel);background:var(--tile-a)}
/* One card language across the page: the panel radius, a hairline edge, and on hover a 2 px lift with a brighter edge. */
.cell,.pcard{box-shadow:0 0 0 1px var(--deck-edge)}
.cell,.pcard,.bar .blk{transition-property:transform,box-shadow;transition-duration:var(--d-ui);transition-timing-function:var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cell:hover,.pcard:hover,.bar .blk:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--outline),0 18px 40px -24px var(--glow)}
}
.cell .fx{align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:28px;font-size:var(--fs-body)}
.cell .note{flex-wrap:nowrap;align-items:flex-start;gap:12px;font-size:var(--l-body);line-height:1.35}
.cell .note .av{width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover}
.cell .note .by{display:block;color:var(--muted);font-size:var(--fs-body)}
.cell .note .by b{color:var(--ink);font-weight:500}
.cell .note .time{display:block;font-size:var(--fs-body)}
.cell .qr{display:block;width:120px;height:120px;border-radius:var(--r-in)}

/* ---------- pricing: the plan names are the heading; one stage shows the selected plan ---------- */
.price{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:start;padding:160px 0 140px}
.plans{grid-column:1/8;display:grid;justify-items:start}
.plans button{position:relative;padding:0;border:0;background:none;color:var(--faint);font-size:var(--l-display);font-weight:500;letter-spacing:-.045em;line-height:1.08;text-align:left;transition:color var(--d-ui) var(--ease)}
.plans button::before{content:"";position:absolute;left:-.42em;top:50%;width:.26em;height:.26em;margin-top:-.1em;border-radius:50%;background:currentColor;opacity:0;transition:opacity var(--d-ui) var(--ease)}
.plans button[aria-selected="true"]{color:var(--ink)}
.plans button[aria-selected="true"]::before{opacity:1}
.plans button:hover{color:var(--muted)}
.plans button[aria-selected="true"]:hover{color:var(--ink)}
.stages{grid-column:8/13;grid-row:1/span 2;display:grid;align-content:start}
.pcard{grid-column:1/7;grid-row:2;align-self:start;display:grid;gap:14px;max-width:460px;margin-top:56px;padding:20px 22px 22px;border-radius:var(--r-panel);background:var(--tile-a);font-size:var(--fs-body)}
.pc-top{display:flex;align-items:center;gap:12px}
.pc-art{width:44px;height:44px;flex:none;border-radius:var(--r-in);object-fit:cover}
.pc-who{display:grid;flex:1;min-width:0;line-height:1.3}
.pc-who b{font-size:var(--fs-section);font-weight:500}
.pc-who span{color:var(--faint);font-size:var(--fs-meta)}
.pcard .faces img{box-shadow:0 0 0 2px var(--tile-a)}
.pc-row{display:flex;justify-content:space-between;gap:12px;color:var(--muted)}
.pc-row b{color:var(--ink);font-weight:500}
.pc-row .pc-on{color:var(--ok)}
.pc-bar{position:relative;display:block;height:8px;margin-top:-6px;border-radius:4px;background:var(--hover);overflow:hidden}
:root:not([data-theme="dark"]) .pc-bar{background:var(--raised)}
.pc-bar i{position:absolute;inset:0;border-radius:4px;background:var(--sig);transform-origin:0 50%;transform:scaleX(.008);min-width:4px;transition:transform 600ms var(--ease)}
.price[data-plan="free"] .pc-bar i{transform:scaleX(.4)}
.price[data-plan="free"] .if-pro,.price:not([data-plan="free"]) .if-free{display:none}
.pstage{grid-area:1/1;display:none;gap:18px;padding-top:14px}
.pstage.on,:root:not(.js) .pstage{display:grid}
:root:not(.js) .pstage{grid-area:auto;padding-bottom:40px}
.pstage .fig{max-width:none;color:var(--ink);font-size:var(--l-fig);font-weight:300;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.pstage .fig small{margin-left:10px;color:var(--muted);font-size:var(--l-lead);font-weight:400;letter-spacing:0}
.pstage p{max-width:40ch;color:var(--muted)}
.pstage .btn{justify-self:start;border-radius:var(--r-in)}
.pstage .rev{color:var(--faint);font-size:var(--l-small)}

/* ---------- questions ---------- */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;padding:40px 0 160px}
.faq-head{grid-column:1/6;display:grid;gap:28px}
.faq-head p{max-width:30ch;color:var(--muted);font-size:var(--l-lead);line-height:1.4}
.faq-head b{color:var(--ink);font-weight:500}
.faq h2{font-size:var(--l-display);font-weight:500;letter-spacing:-.045em;line-height:1}
.faq-list{grid-column:6/13;display:grid;gap:8px}
.faq details{border-radius:var(--r-panel);background:var(--surface);transition-property:background-color,color;transition-duration:var(--d-ui);transition-timing-function:var(--ease)}
.faq summary{min-height:72px;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:var(--r-panel);font-size:var(--l-lead);font-weight:500;line-height:1.3;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline-offset:-4px}
.faq summary i{position:relative;width:16px;height:16px;flex:none}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;top:6.5px;width:16px;height:3px;border-radius:2px;background:currentColor;transition:transform var(--d-ui) var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open]{background:var(--inv);color:var(--inv-ink)}
.faq details[open] summary:focus-visible{outline-color:var(--inv-ink)}
.faq details[open] summary i::after{transform:none}
.faq details p{padding:0 24px 24px;text-wrap:pretty}

/* ---------- footer: a last call to start, the site map and the contact line ---------- */
.lp-foot{padding:40px 0 28px}
.foot-top{position:relative;isolation:isolate;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:48px 0 56px;box-shadow:inset 0 -1px 0 var(--line)}
.foot-shape{position:absolute;inset:8px 0 0;z-index:-1;width:100%;height:calc(100% - 8px);fill:var(--sig);opacity:.08;pointer-events:none}
.foot-line{font-size:var(--l-state);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.foot-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:56px;font-size:var(--l-small)}
.foot-cols nav{grid-column:span 2;display:grid;align-content:start;gap:8px}
.foot-cols b{margin-bottom:4px;font-weight:500}
.foot-cols a{justify-self:start;color:var(--muted);transition:color var(--d-ui) var(--ease)}
.foot-cols a:hover{color:var(--ink)}
.foot-cols .contact{grid-column:9/13;display:grid;align-content:start;gap:16px;color:var(--muted);line-height:1.6}
.foot-cols .contact p{max-width:44ch}
.foot-cols .contact b{display:block;margin-bottom:4px;color:var(--ink)}
.foot-last{display:flex;align-items:center;gap:16px;margin-top:64px;color:var(--faint);font-size:var(--l-small)}
.foot-last .wordmark{width:73px;height:20px}
.foot-last .icon-btn{background:var(--raised);color:var(--ink)}

/* ---------- motion: the one exception to feedback-only (see design/guidance.md). The header mark's rings
   build from the inner one outward, each 110 ms after the one inside it. The hero arrives once: the copy
   rises, the deck settles from a slight tilt, the history lands row by row and the bars grow from the centre line;
   then Mix 12 plays for 48 seconds behind a pause button while its levels move. The readout bars fill once when
   they scroll into view, where the browser can tie them to scroll. Below the hero, each section's picture (marked
   data-depth) takes a lighter version of the hero's turn as it passes; landing.js sets --dx, --dy and --dz.
   Reduced motion keeps all of it still. ---------- */
@media (prefers-reduced-motion:no-preference){
  .rings.build path{animation:ring-grow 1400ms cubic-bezier(.23,1,.32,1) backwards;animation-delay:calc(var(--i)*110ms)}
  [data-depth]{--lift:0px;transform:perspective(1400px) translate3d(0,var(--lift),var(--dz,0px)) rotateX(var(--dx,0deg)) rotateY(var(--dy,0deg));transform-origin:50% 60%;will-change:transform}
  .pcard[data-depth]:hover{--lift:-2px;transform:perspective(1400px) translate3d(0,var(--lift),var(--dz,0px)) rotateX(var(--dx,0deg)) rotateY(var(--dy,0deg))}
  .hero-copy>*{animation:rise 600ms var(--ease) backwards;animation-delay:calc(var(--d,0)*80ms)}
  .deck{animation:settle 1100ms var(--ease) 180ms backwards}
  .versions li{animation:land 520ms var(--ease) backwards;animation-delay:calc(var(--i)*70ms + 640ms)}
  .motif{animation:grow 900ms var(--ease) 420ms backwards}
  .stack.run .m-win{animation:win 48s linear 1.1s forwards}
  .stack.run .m-play{animation:win-in 48s linear 1.1s forwards}
  .stack.run .m-track{animation:head 48s linear 1.1s forwards}
  .stack.run .meter i{animation:lvl 1.7s ease-in-out 1.1s infinite alternate}
  .stack.run .meter i+i{animation-duration:1.3s;animation-delay:1.25s}
  .stack:has(.play:not(.playing)) .meter i{animation-play-state:paused}
  .how.armed .v-measure .mini{clip-path:inset(0 100% 0 0)}
  .how.armed .v-pin,.how.armed .v-band{opacity:0}
  .how.armed .qr-mini,.how.armed .v-copied{opacity:0}
  .how.seen .v-measure .mini{animation:wipe 1100ms var(--ease) forwards}
  .how.seen .qr-mini{animation:pop 520ms var(--ease) 500ms forwards}
  .how.seen .v-copied{animation:pop 420ms var(--ease) 1200ms forwards}
  .how.seen .v-pin{animation:pop 520ms var(--ease) forwards;animation-delay:calc(900ms + var(--i)*600ms)}
  .how.seen .v-band{animation:pop 520ms var(--ease) 1500ms forwards}
  .how.seen .v-btn{animation:press 700ms var(--ease) 2600ms forwards}
  .how.seen .v-done{animation:pop 420ms var(--ease) 3150ms forwards}
  .pstage.swap>*{animation:rise 420ms var(--ease) backwards}
  .pstage.swap>:nth-child(2){animation-delay:40ms}
  .pstage.swap>:nth-child(3){animation-delay:80ms}
  .pstage.swap>:nth-child(4){animation-delay:120ms}
  @supports (animation-timeline:view()){
    .targets i::after{animation:fill linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
  }
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes settle{from{opacity:0;transform:translateY(48px) rotateX(9deg) scale(.97)}}
@keyframes land{from{opacity:0;transform:translateX(16px)}}
@keyframes grow{from{opacity:0;transform:scaleY(.2)}}
@keyframes lvl{0%{transform:scaleY(.58)}22%{transform:scaleY(.8)}41%{transform:scaleY(.64)}63%{transform:scaleY(.9)}80%{transform:scaleY(.7)}100%{transform:scaleY(.76)}}
@keyframes fill{from{transform:scaleX(0)}}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.9)}to{opacity:1;transform:none}}
@keyframes press{40%{transform:scale(.94)}100%{opacity:0;transform:scale(.94)}}
@keyframes win{to{transform:translateX(-27.6%)}}
@keyframes ring-grow{from{transform:scale(var(--s0));opacity:0}22%{opacity:1}}
@keyframes win-in{to{transform:translateX(27.6%)}}
@keyframes head{to{transform:translateX(72.4%)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  :root{--wrap:calc(100% - 80px)}
  .lp-nav{display:none}
  .deck-body{grid-template-columns:minmax(0,1fr) 248px}
  .versions span{display:none}
  .shape{right:-40px}
  .bar{flex-direction:column}
  .bar .st{flex:none;min-width:0;grid-template-rows:auto;gap:12px}
  .bar .blk{min-height:150px}
  .bar .st:nth-child(3) .blk{min-height:200px}
  .bar p{max-width:46ch;margin-bottom:18px}
  .sheet{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .trio .cell:last-child{grid-column:1/-1}
}
@media (max-width:900px){
  .hero-copy{grid-template-columns:minmax(0,1fr);gap:18px}
  .show{grid-template-columns:minmax(0,1fr);min-height:0;gap:32px;padding:88px 0}
  .names-list{display:flex;flex-wrap:wrap;gap:0 22px}
  .names-list button::before{left:-.42em}
  .show-stage{height:auto;display:grid;justify-items:center;gap:18px}
  .phone{position:relative;left:auto;transform:none;height:600px}
  .show-stage::before{left:0;right:0;width:auto;margin:0}
  .shape{left:-40px;right:-40px;top:70px;height:420px}
  .fact{position:static;width:auto;text-align:center}
  .deck-body{grid-template-columns:minmax(0,1fr)}
  .versions{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:12px 16px 16px;box-shadow:inset 0 1px 0 var(--deck-edge)}
  .versions::before{display:none}
  .versions li:nth-child(n+4){display:none}
  .versions li{padding:10px 12px 10px 28px}
  .versions li::before{left:10px}
}
@media (max-width:760px){
  :root{--wrap:calc(100% - 32px)}
  .lp-top{height:60px}
  .lp-top .lp-brand{margin-right:auto}
  .lp-top .btn{height:var(--tap)}
  .lp-top .top-start{display:none}
  .hero{min-height:calc(100svh - 60px)}
  .cta{flex-direction:column}
  .cta .btn{width:100%}
  .stack{margin-top:48px;margin-inline:-8px}
  .deck-top{gap:10px;padding:12px 14px}
  .deck-top .seg,.deck-top .match{display:none}
  .deck .ui{gap:12px;padding:16px 16px 6px}
  .deck .ui .pill,.deck .read small,.meter{display:none}
  .deck .read{font-size:var(--fs-title)}
  .motif{height:200px;margin:0 16px}
  .marks{margin:8px 16px 0}
  .rn{--cw:220px}
  .rn .face{width:24px;height:24px;margin-left:-12px}
  .rn .card{top:34px;gap:6px;padding:10px 12px 12px;font-size:var(--fs-meta)}
  .rn .by b{font-size:var(--fs-meta)}
  .crew{display:none}
  .marks .t:nth-child(4),.marks .t:nth-child(6){display:none}
  .versions{grid-template-columns:minmax(0,1fr);gap:2px}
  .versions li:nth-child(n+3){display:none}
  .shape{left:-16px;right:-16px}
  .how{padding:40px 0 72px}
  .sec-h{margin-bottom:32px}
  .board-head{margin-bottom:32px}
  .sheet-read,.sheet-targets{padding:24px 20px 26px}
  .reads{margin:24px 0 28px;gap:16px}
  .targets li{grid-template-columns:7.2em minmax(0,1fr) 4em;gap:10px;font-size:var(--fs-body)}
  .trio{grid-template-columns:minmax(0,1fr);gap:6px;margin-top:6px}
  .cell{min-height:0;padding:22px 20px}
  .foot-top{padding:32px 0 40px}
  .foot-top .btn{width:100%}
  .price{grid-template-columns:minmax(0,1fr);padding:96px 0}
  .plans,.stages{grid-column:1/-1}
  .plans button{font-size:var(--l-state);line-height:1.3;min-height:var(--tap)}
  .names-list button::before,.plans button::before{display:none}
  .names-list button[aria-selected="true"],.plans button[aria-selected="true"]{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.16em}
  .stages{margin:14px 0 22px}
  .pstage{padding-top:0}
  .pstage .btn{width:100%;justify-self:stretch}
  .pcard{grid-column:1/-1;grid-row:3;margin-top:8px;max-width:none}
  .stages{grid-row:2}
  .v-pin:last-child{bottom:38px}
  .faq{grid-template-columns:minmax(0,1fr);padding-bottom:96px}
  .faq-head,.faq-list{grid-column:1/-1}
  .faq-head{gap:16px}
  .faq-list{gap:6px}
  .faq summary{min-height:64px;padding:14px 20px}
  .faq details p{padding:0 20px 20px}
  .foot-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 16px}
  .foot-cols nav{grid-column:auto;gap:0}
  .foot-cols a{display:flex;align-items:center;min-height:var(--tap)}
  .foot-cols .contact{grid-column:1/-1}
}