@font-face{
  font-family:"JetBrains Mono";
  src:url("assets/JetBrainsMono-400.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("assets/Figtree.ttf") format("truetype");
  font-weight:300 900;
  font-display:swap;
}

/* Colour structure:
   light = pale grey page, white capsule bar, ink text, near-black stage
   dark  = near-black page, translucent bar, white text, slightly lifted stage
   red is only ever the small accent (dot, logo roof) */
:root{
  --red:#E1252D;
  --page-top:#F8F8F7;
  --page-bot:#EBEBEA;
  --bar:rgba(255,255,255,.72);
  --bar-line:rgba(10,13,18,.08);
  --text:#0A0D12;
  --muted:#4B4E54;
  --line:rgba(10,13,18,.55);
  --solid-bg:#0A0D12;
  --solid-fg:#FFFFFF;
  --stage:#161616;
  --stage-line:transparent;
  --surface:#FBFBFA;
  --card:#FFFFFF;
  --card-text:#0A0D12;
  --card-shadow:0 18px 40px -18px rgba(10,13,18,.28),0 2px 6px rgba(10,13,18,.06);
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --page-top:#121212;
  --page-bot:#0B0B0B;
  --bar:rgba(255,255,255,.03);
  --bar-line:rgba(255,255,255,.1);
  --text:#FFFFFF;
  --muted:#A7A9AD;
  --line:rgba(255,255,255,.55);
  --solid-bg:#E9E9E9;
  --solid-fg:#0A0D12;
  --stage:#1A1A1A;
  --stage-line:rgba(255,255,255,.06);
  --surface:#141414;
  --card:#1F1F1F;
  --card-text:#FFFFFF;
  --card-shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* nav links land with the section fully in view, below the floating bar */
main[id],section[id]{scroll-margin-top:86px}
body{
  margin:0;min-height:100svh;
  background:linear-gradient(180deg,var(--page-top) 0,var(--page-bot) 520px,var(--page-bot) 100%);
  background-color:var(--page-bot);
  color:var(--text);
  font-family:"Figtree",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s ease,color .4s ease;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}

/* ---------- Bar: full-width capsule ---------- */
.bar{
  position:sticky;top:10px;z-index:10;
  margin:10px 12px 0;
  height:64px;padding:0 10px 0 22px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:var(--bar);
  border:1px solid var(--bar-line);
  border-radius:20px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:drop .8s var(--ease) both;
}
.bar__logo{justify-self:start;line-height:0}
.logo{height:30px;width:auto}
.logo--white{display:none}
[data-theme="dark"] .logo--ink{display:none}
[data-theme="dark"] .logo--white{display:block}

.bar__links{display:flex;gap:4px}
.bar__links a{font-size:14px;font-weight:450;padding:8px 14px;border-radius:10px;transition:background .25s}
.bar__links a:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}

.bar__right{justify-self:end;display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;transition:background .25s}
.icon-btn:hover{background:color-mix(in srgb,var(--text) 6%,transparent)}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
[data-theme="dark"] .theme-toggle .i-moon{display:none}
.menu-btn{display:none}
.menu-btn svg{fill:currentColor;stroke:none}

.pill{
  height:40px;display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;font-size:13.5px;font-weight:500;
  transition:transform .35s var(--ease),box-shadow .35s ease,background .3s;
}
.pill--line{padding:0 18px;border:1px solid var(--line)}
.pill--line:hover{box-shadow:0 0 0 1px var(--red) inset,0 0 18px rgba(225,37,45,.28)}
.pill--solid{width:84px;justify-content:center;background:var(--solid-bg);color:var(--solid-fg)}
.pill--solid svg{width:18px;height:18px;fill:currentColor;transition:transform .6s var(--ease)}
button.pill{cursor:pointer}
.pill--solid:hover svg{transform:rotate(90deg) scale(1.1)}
.pill:active{transform:scale(.97)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(225,37,45,.18)}

/* ---------- Hero ---------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:76px 12px 12px}
.tag{
  margin:0;display:inline-flex;align-items:center;gap:8px;
  height:28px;padding:0 14px;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;color:var(--muted);
  animation:up .9s var(--ease) .1s backwards;
}
.tag svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero__title{
  margin:16px 0 0;font-weight:500;
  font-size:clamp(30px,3.2vw,46px);line-height:1.18;letter-spacing:-.02em;
  animation:up 1s var(--ease) .18s backwards;
}
.hero__title span{display:inline-block;text-wrap:balance}

.stage{
  position:relative;width:100%;margin-top:44px;
  height:min(76svh,820px);min-height:420px;
  border-radius:28px;overflow:hidden;
  background:var(--stage);
  box-shadow:0 0 0 1px var(--stage-line) inset;
  animation:up 1.1s var(--ease) .3s backwards;
}
.stage__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage__name{
  position:absolute;left:34px;bottom:26px;margin:0;
  color:#fff;font-size:clamp(26px,2.4vw,36px);font-weight:400;letter-spacing:-.01em;
}


.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Mobile menu ---------- */
.menu{display:none}

/* ---------- 1b. One home for your... ---------- */
.home{position:relative;height:420svh}
.home__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(20px,6vw,96px);overflow:hidden}
.home__line{display:flex;align-items:center;gap:.28em;font-size:clamp(36px,5.3vw,92px);font-weight:500;letter-spacing:-.045em;line-height:1}
.home__lead{flex:0 0 auto;white-space:nowrap}
.home__wheel{position:relative;flex:1;height:3.4em;margin:0;padding:0;list-style:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 66%,transparent 100%);
  overflow:visible}
.home__wheel li{position:absolute;left:0;top:1.12em;white-space:nowrap;transform-origin:0 50%;will-change:transform,opacity;color:var(--text)}
.home__wheel li.is-last{color:var(--red)}
.home__notes{position:relative;margin:clamp(28px,4vw,52px) 0 0;padding:0;list-style:none;height:150px;max-width:620px}
.home__notes > li{position:absolute;left:0;top:0;right:0;display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:22px;
  background:var(--card);box-shadow:var(--card-shadow);will-change:transform,opacity}
.home__notes > li:last-child .hc__pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.35;color:var(--card-text)}
.hc__pts li{display:flex;align-items:flex-start;gap:9px}
.hc__pts svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.home__count{position:absolute;left:clamp(20px,6vw,96px);bottom:clamp(20px,4vh,40px);margin:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;color:var(--muted)}
.home__n{color:var(--text)}

/* ---------- 2. Click anywhere ---------- */
.play{
  position:relative;margin:12px;border-radius:28px;overflow:hidden;
  background:var(--surface);height:calc(100svh - 98px);min-height:560px;max-height:900px;
  box-shadow:0 0 0 1px var(--stage-line) inset;
}
.play__ticker{position:absolute;top:0;left:0;right:0;height:64px;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.play__track{display:flex;gap:56px;white-space:nowrap;animation:tick 40s linear infinite;padding-left:56px}
.play__track span{font-size:18px;color:color-mix(in srgb,var(--text) 42%,transparent);display:inline-flex;align-items:center;gap:56px}
.play__track span::after{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
@keyframes tick{to{transform:translateX(-50%)}}
.play__lead{position:absolute;z-index:3;top:84px;left:50%;transform:translateX(-50%);margin:0;width:min(560px,86%);
  text-align:center;font-size:clamp(15px,1.2vw,17px);line-height:1.5;color:var(--muted);pointer-events:none}
.play__note{position:absolute;z-index:3;right:18px;bottom:14px;margin:0;padding:3px 8px;border-radius:6px;font-size:11px;pointer-events:none;
  background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted)}
.play__field{position:absolute;inset:0;z-index:2;cursor:crosshair;outline:none}
.play__field:focus-visible{box-shadow:0 0 0 2px var(--red) inset;border-radius:28px}
.play__word{position:absolute;z-index:1;left:50%;bottom:-4%;transform:translateX(-50%);width:min(88%,1250px);height:auto;pointer-events:none;user-select:none}
img.play__word.logo--white{display:none}
[data-theme="dark"] img.play__word.logo--ink{display:none}
[data-theme="dark"] img.play__word.logo--white{display:block}

.card{
  position:absolute;width:250px;padding:16px 18px 18px;border-radius:20px;
  background:var(--card);color:var(--card-text);box-shadow:var(--card-shadow);
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1));
  animation:cardIn .7s cubic-bezier(.34,1.56,.64,1) both;pointer-events:none;
}
.card.is-out{animation:cardOut .5s var(--ease) both}
.card__trade{display:flex;align-items:center;gap:8px;font-size:12.5px;color:color-mix(in srgb,var(--card-text) 55%,transparent)}
.card__trade::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.card__main{display:block;margin-top:10px;font-size:20px;font-weight:550;letter-spacing:-.01em;line-height:1.2}
.card__sub{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:color-mix(in srgb,var(--card-text) 62%,transparent)}
.card__tag{display:inline-block;margin-top:12px;font-size:12px;font-weight:500;padding:5px 10px;border-radius:8px;
  background:color-mix(in srgb,var(--card-text) 7%,transparent)}
@keyframes cardIn{from{opacity:0;transform:translate(-50%,-30%) rotate(calc(var(--r,0deg) * -1)) scale(.6)}to{opacity:1}}
@keyframes cardOut{to{opacity:0;transform:translate(-50%,-70%) rotate(var(--r,0deg)) scale(.85)}}

/* ---------- 3. How it works (pinned): black half on top, one-app-everywhere below ---------- */
.how{position:relative;height:700svh;margin:0 12px}
.how__pin{position:sticky;top:86px;height:calc(100svh - 98px);min-height:640px;display:flex;flex-direction:column;gap:12px}
.how__dark{position:relative;flex:0 0 50%;transform-origin:50% 0;will-change:transform;border-radius:28px;overflow:hidden;background:var(--stage);color:#fff;box-shadow:0 0 0 1px var(--stage-line) inset}
.how__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.how__copy{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,5vw,72px);max-width:min(820px,64%)}
.how__label{margin:0 0 16px;font-size:14px;font-weight:450;color:#A7A9AD}
.how__steps{list-style:none;margin:0;padding:0;display:grid}
.how__steps li{grid-area:1/1;opacity:0;transform:translateY(22px);transition:opacity .22s ease,transform .3s ease;pointer-events:none}
.how__steps li.is-on{opacity:1;transform:none;transition:opacity .6s var(--ease) .22s,transform .8s var(--ease) .22s}
.how__steps li.is-past{opacity:0;transform:translateY(-22px)}
.how__big{margin:0;font-size:clamp(28px,3.4vw,52px);font-weight:500;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.how__small{margin:12px 0 0;max-width:34em;font-size:clamp(14px,1.1vw,17px);line-height:1.5;color:#BDBEC1}
.how__count{position:absolute;left:clamp(24px,5vw,72px);bottom:26px;margin:0;font-size:13px;color:#8E9095}
.how__n{color:#fff}
.how__steps li.is-scrub{transition:none;will-change:transform,opacity;transform-origin:0 50%}
.hw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin-bottom:-.12em}
.hwi{display:inline-block;will-change:transform}
.how__steps li.is-scrub .how__small{will-change:transform,opacity}
.how__bar{position:absolute;left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);bottom:12px;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.how__bar i{display:block;height:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}

/* one app, four devices */
.sync{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(16px,3vw,48px);padding:0 clamp(12px,4vw,60px)}
.sync__title{margin:0;font-size:clamp(28px,3.2vw,50px);font-weight:500;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.sync__text{margin:16px 0 0;max-width:26em;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:var(--muted)}

.sync__devices{position:relative;justify-self:center;width:min(100%,calc((100svh - 98px) * .5 * 1.9));aspect-ratio:1.9/1;container-type:inline-size}
.dev{position:absolute}
.dev__screen{position:relative;overflow:hidden;background:#F6F6F5;color:#0A0D12;font-size:1.25cqw;line-height:1.25}
[data-theme="dark"] .dev__screen{background:#1E1E1E;color:#fff;border-color:#3A3A3C!important}
[data-theme="dark"] .dev__foot{background:#3A3A3C}
.dev--desktop{left:28%;top:0;width:44%}
.dev--desktop .dev__screen{aspect-ratio:16/10;border-radius:1.4cqw;border:.7cqw solid #0B0B0C}
.dev__stand{display:block;margin:0 auto;width:14%;height:6cqw;background:linear-gradient(#cfcfcf,#a9a9a9);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.dev--laptop{left:2%;top:32%;width:40%}
.dev--laptop .dev__screen{aspect-ratio:16/10;border-radius:1.2cqw 1.2cqw 0 0;border:.6cqw solid #0B0B0C;border-bottom-width:.9cqw}
.dev__base{display:block;margin-left:-6%;width:112%;height:1.3cqw;border-radius:0 0 1.2cqw 1.2cqw;background:linear-gradient(#d6d6d6,#9e9e9e)}
.dev--till{right:2%;top:24%;width:24%}
.dev--till .dev__screen{aspect-ratio:4/3;border-radius:1.2cqw;border:.8cqw solid #1a1a1a}
.dev__pole{display:block;margin:0 auto;width:10%;height:9cqw;background:linear-gradient(90deg,#8e8e8e,#cfcfcf,#8e8e8e)}
.dev__foot{display:block;margin:0 auto;width:62%;height:1.6cqw;border-radius:1cqw;background:#1a1a1a}
.dev--phone{left:45.5%;top:40%;width:11.5%;z-index:3}
.dev--phone .dev__screen{aspect-ratio:9/19;border-radius:2.4cqw;border:.6cqw solid #0B0B0C;font-size:1cqw}
.dev{filter:drop-shadow(0 2cqw 2.4cqw rgba(0,0,0,.18))}
[data-theme="dark"] .dev{filter:drop-shadow(0 2cqw 2.4cqw rgba(0,0,0,.6))}
.dev__label{position:absolute;font-size:max(11px,1.05cqw);color:var(--muted)}
.dev__label--desktop{left:58%;top:30cqw}
.dev__label--laptop{left:2%;bottom:3%}
.dev__label--till{right:6%;bottom:3%}
.dev__label--phone{left:51.25%;bottom:-1%;transform:translateX(-50%)}

/* the app inside every screen: one look, four native layouts. Sizes in cqw so each device scales together. */
.ui{height:100%;display:flex;font-size:.82cqw;line-height:1.3;color:inherit}
.ui small{display:block;opacity:.55;font-size:.86em}
.ui b{font-weight:600}
.ui__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.9em}
.ui__head b{font-size:1.25em}
.side{flex:0 0 19%;display:flex;flex-direction:column;gap:.55em;padding:1.1em .9em;background:#0A0D12;color:#cfd0d2}
.side__logo{color:#fff;margin-bottom:.6em;font-size:1.15em;letter-spacing:-.02em}
.side span{padding:.35em .55em;border-radius:.45em}
.side span.on{background:rgba(255,255,255,.12);color:#fff}
.ui main{flex:1;min-width:0;padding:1.1em 1.2em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;margin-bottom:1em}
.stats--2 span:nth-child(3){display:none}.stats--2{grid-template-columns:1fr 1fr}
.stats span{padding:.6em .7em;border-radius:.6em;background:#fff}
.stats b{display:block;margin-top:.15em;font-size:1.15em;font-variant-numeric:tabular-nums}
.th,.tr{display:grid;grid-template-columns:1.5fr 1fr .7fr .9fr;gap:.5em;padding:.55em .7em;align-items:center}
.ui--lap .tr{grid-template-columns:1.5fr 1fr .9fr}
.th{opacity:.5;font-size:.9em}
.tr{border-radius:.5em;background:#fff;margin-bottom:.35em;white-space:nowrap}
.tr b,.th span:last-child{text-align:right}
.tr span{overflow:hidden;text-overflow:ellipsis}

.ui--till{font-size:1.05cqw}
.tkeys{flex:1.15;display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;padding:.8em;align-content:start}
.tkeys span{display:grid;place-items:center;text-align:center;aspect-ratio:1.25;padding:.3em;border-radius:.6em;background:#fff;font-weight:500}
.ticket{flex:1;display:flex;flex-direction:column;padding:.8em .8em .8em 0}
.q{display:flex;justify-content:space-between;gap:.4em;padding:.5em .6em;margin-bottom:.35em;border-radius:.5em;background:#fff;white-space:nowrap}
.q span{overflow:hidden;text-overflow:ellipsis}
.charge{margin-top:auto;padding:.7em;border-radius:.6em;background:#0A0D12;color:#fff;text-align:center}

.ui--phone{flex-direction:column;padding:2.6cqw .9cqw 0;font-size:.74cqw}
.pstat{margin-bottom:.8em}
.pstat b{display:block;font-size:1.5em;font-variant-numeric:tabular-nums}
.pr{display:flex;justify-content:space-between;align-items:center;gap:.4em;padding:.55em .6em;margin-bottom:.4em;border-radius:.6em;background:#fff}
.pr span{min-width:0;overflow:hidden}
.pr span b,.pr small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.tabs{margin:auto -1cqw 0;display:flex;justify-content:space-around;padding:.7em 0 1em;font-size:.85em;opacity:.7;background:rgba(0,0,0,.04)}
.tabs .on{opacity:1;font-weight:600}

[data-theme="dark"] .stats span,[data-theme="dark"] .tr,[data-theme="dark"] .tkeys span,[data-theme="dark"] .q,[data-theme="dark"] .pr{background:#2A2A2A}
[data-theme="dark"] .charge{background:#fff;color:#0A0D12}
[data-theme="dark"] .tabs{background:rgba(255,255,255,.05)}

.rows .is-new{animation:rowFade .8s ease both}
@keyframes rowFade{from{opacity:0}to{opacity:1}}
@keyframes rowIn{from{opacity:0;transform:translateY(-60%) scale(.96)}to{opacity:1;transform:none}}
.dev__screen.is-ping{animation:ping .9s ease-out}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(225,37,45,.55)}100%{box-shadow:0 0 0 1.6cqw rgba(225,37,45,0)}}

/* ---------- 4. What we set up (stacked panels) ---------- */
.what{margin:12px;padding-bottom:12px}
.panel{
  position:sticky;top:86px;
  height:calc(100svh - 110px);min-height:520px;margin-bottom:24px;
  border-radius:28px;overflow:hidden;
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;
  padding:0 clamp(24px,5vw,72px);
  transform-origin:50% 0;will-change:transform;
}
.panel:nth-of-type(2){top:100px}.panel:nth-of-type(3){top:114px}.panel:nth-of-type(4){top:128px}
.panel--light{background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--bar-line) inset}
[data-theme="dark"] .panel--light{background:#ECECEA;color:#0A0D12;box-shadow:none}
.panel--dark{background:var(--stage);color:#fff;box-shadow:0 0 0 1px var(--stage-line) inset}
.panel__word{margin:0;font-size:clamp(56px,8.6vw,148px);font-weight:500;letter-spacing:-.045em;line-height:.95}
.panel__copy p{margin:28px 0 0;max-width:27em;font-size:clamp(16px,1.35vw,20px);line-height:1.5;opacity:.72}
.phone{justify-self:center;align-self:end;margin-bottom:-14%;width:min(320px,26vw);aspect-ratio:9/19;border-radius:46px;
  background:#0B0B0C;padding:10px;box-shadow:0 40px 80px -30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08) inset}
.screen{height:100%;border-radius:37px;background:#F6F6F5;color:#0A0D12;padding:54px 16px 16px;overflow:hidden;font-size:13.5px}
.panel--dark .screen{background:#202020;color:#fff}
.scr__url{margin:0 0 18px;text-align:center;font-size:12px;opacity:.55}
.scr__h{margin:0 0 10px;font-size:13px;opacity:.6}
.scr__h--gap{margin-top:22px}
.scr__big{margin:0;font-size:34px;font-weight:550;letter-spacing:-.02em}
.scr__note{margin:4px 0 18px;font-size:12.5px;opacity:.55}
.scr__row{display:flex;justify-content:space-between;gap:8px;padding:13px 14px;margin-bottom:8px;border-radius:14px;background:#fff}
.panel--dark .scr__row{background:#2A2A2A}
.scr__row b{font-weight:550}
.scr__btn{margin-top:14px;padding:14px;border-radius:14px;text-align:center;background:#0A0D12;color:#fff;font-weight:550}

/* ---- 4b. Colour-coded panels: blue = sell, green = get paid, purple = deliver or book, ink = run it ---- */
.panel--sell{--p-bg:#EAF2FF;--p-ink:#0B2547;--p-accent:#2F6FE0;--p-soft:#D4E4FF;--p-screen:#F5F9FF;--p-row:#FFFFFF}
.panel--paid{--p-bg:#E6F6EC;--p-ink:#0B2E1A;--p-accent:#178A4C;--p-soft:#CDEED9;--p-screen:#F4FBF7;--p-row:#FFFFFF}
.panel--book{--p-bg:#F0ECFF;--p-ink:#1E1442;--p-accent:#6A4BE0;--p-soft:#DFD6FF;--p-screen:#F8F6FF;--p-row:#FFFFFF}
.panel--run {--p-bg:#141518;--p-ink:#FFFFFF;--p-accent:#FFFFFF;--p-soft:rgba(255,255,255,.08);--p-screen:#1E1F23;--p-row:#2A2B30}
[data-theme="dark"] .panel--sell{--p-bg:#0E1A2E;--p-ink:#EAF2FF;--p-accent:#6EA6FF;--p-soft:rgba(110,166,255,.16);--p-screen:#14223A;--p-row:#1B2C48}
[data-theme="dark"] .panel--paid{--p-bg:#0C2016;--p-ink:#E6F6EC;--p-accent:#3DD68C;--p-soft:rgba(61,214,140,.15);--p-screen:#12291D;--p-row:#183526}
[data-theme="dark"] .panel--book{--p-bg:#17112C;--p-ink:#F0ECFF;--p-accent:#A58BFF;--p-soft:rgba(165,139,255,.16);--p-screen:#1F1838;--p-row:#2A2148}
[data-theme="dark"] .panel--run {--p-bg:#1A1B1E}
.panel--sell,.panel--paid,.panel--book,.panel--run{background:var(--p-bg);color:var(--p-ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--p-accent) 14%,transparent) inset}
.panel__copy p{opacity:.78}
.panel__badge{display:grid;place-items:center;width:64px;height:64px;margin-bottom:28px;border-radius:20px;background:var(--p-accent);color:#fff;
  box-shadow:0 14px 30px -14px var(--p-accent)}
.panel--run .panel__badge{background:conic-gradient(from 210deg,#2F6FE0,#178A4C,#6A4BE0,#2F6FE0);}
.panel__badge svg,.pt__ic svg,.scr__chip svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel__badge svg{width:30px;height:30px}
.panel__word{font-size:clamp(52px,7.4vw,124px)}
.panel__pts{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.panel__pts li{display:flex;align-items:center;gap:14px;font-size:clamp(15px,1.15vw,17px);font-weight:500}
.pt__ic{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--p-soft);color:var(--p-accent)}
.panel--run .pt__ic{color:#fff}
.pt__ic svg{width:20px;height:20px}

/* phone screens pick up their panel's colour */
.panel .screen{background:var(--p-screen);color:var(--p-ink)}
.panel .scr__row{background:var(--p-row)}
.panel .scr__btn{background:var(--p-accent);color:#fff}
.scr__foot{margin:14px 0 0;text-align:center;font-size:12px;opacity:.6}
.scr__chip{display:inline-flex;align-items:center;gap:6px;margin:6px 0 18px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:550;
  background:var(--p-soft);color:var(--p-accent)}
.scr__chip svg{width:14px;height:14px;stroke-width:2.2}
.scr__good{color:var(--p-accent)}
.scr__tag{font-size:11.5px;padding:3px 8px;border-radius:7px;background:var(--p-soft);color:var(--p-accent)}
.scr__map{position:relative;height:120px;margin:0 0 12px;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,transparent 46%,color-mix(in srgb,var(--p-accent) 22%,transparent) 46% 50%,transparent 50%),
             linear-gradient(45deg,transparent 60%,color-mix(in srgb,var(--p-ink) 8%,transparent) 60% 63%,transparent 63%),var(--p-row)}
.scr__map i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--p-accent);box-shadow:0 0 0 5px var(--p-soft)}
.scr__map i:nth-child(1){left:22%;top:62%}.scr__map i:nth-child(2){left:52%;top:40%}.scr__map i:nth-child(3){left:78%;top:24%}
.scr__map span{position:absolute;left:22%;top:66%;width:56%;height:2px;background:var(--p-accent);transform-origin:0 0;transform:rotate(-22deg);opacity:.6}
.scr__tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.scr__tiles .t{padding:10px 11px;border-radius:14px;background:var(--p-row)}
.scr__tiles .t small{display:block;font-size:11px;opacity:.6}
.scr__tiles .t b{display:block;margin-top:2px;font-size:18px;font-weight:600}
.t--blue{background:rgba(47,111,224,.22)!important}.t--green{background:rgba(23,138,76,.24)!important}.t--purple{background:rgba(106,75,224,.26)!important}

/* ---------- 5. Keys (word reveal) ---------- */
.keys{padding:clamp(90px,14vw,200px) clamp(20px,6vw,96px)}
.keys__label{margin:0 0 30px;font-size:15px;font-weight:450;color:var(--muted)}
.keys__text{margin:0;max-width:20em;font-size:clamp(28px,4vw,62px);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.keys__text .w{opacity:.16;transition:opacity .35s ease}
.keys__text .w.on{opacity:1}

/* ---------- 6. Numbers ---------- */
.numbers{padding:0 clamp(20px,6vw,96px) clamp(90px,12vw,180px)}
.numbers__line{margin:0;font-size:clamp(38px,5.9vw,100px);font-weight:500;letter-spacing:-.045em;line-height:1.02}
.numbers__line--muted{color:color-mix(in srgb,var(--text) 35%,transparent)}
.numbers__line .num{font-variant-numeric:tabular-nums}
.numbers__note{margin:32px 0 0;font-size:clamp(15px,1.2vw,17px);color:var(--muted)}

/* ---------- 7. Closing: statement, one call pill, side links, fading wordmark ---------- */
.close{position:relative;overflow:hidden;padding:clamp(100px,11vw,160px) 0 0;text-align:center}
.close__centre{display:flex;flex-direction:column;align-items:center}
.close__statement{margin:0 auto;max-width:19em;font-size:clamp(30px,4.2vw,64px);font-weight:500;letter-spacing:-.035em;line-height:1.08;
  color:color-mix(in srgb,var(--text) 34%,transparent);text-wrap:balance}
.close__statement span{color:var(--text)}
.callpill{display:inline-flex;align-items:center;gap:12px;margin-top:44px;padding:6px 22px 6px 6px;border-radius:999px;
  background:#16171A;color:#fff;text-align:left;box-shadow:0 10px 30px -12px rgba(10,13,18,.5),0 0 0 1px rgba(255,255,255,.06) inset;
  transition:transform .4s var(--ease),box-shadow .4s ease}
[data-theme="dark"] .callpill{background:#F2F2F0;color:#0A0D12;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.callpill:hover{transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(225,37,45,.55),0 0 0 1px rgba(225,37,45,.55) inset}
.callpill__img{width:44px;height:44px;border-radius:50%;overflow:hidden;background:#fff;display:grid;place-items:center}
.callpill__img img{width:100%;height:100%}
.callpill__txt b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:550}
.callpill__txt b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.callpill:hover b svg{transform:translateX(3px)}
.callpill__txt small{display:block;margin-top:1px;font-size:12.5px;opacity:.6}
.close__alt{margin:16px 0 0;font-size:14px;color:var(--muted)}
.close__alt a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--text) 30%,transparent)}
.close__alt a:hover{text-decoration-color:var(--red)}

.close__word{margin:clamp(64px,7vw,110px) auto 0;width:min(78%,1080px);line-height:0;
  -webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 92%);mask-image:linear-gradient(180deg,#000 10%,transparent 92%);
  opacity:.16;margin-bottom:-9%}
[data-theme="dark"] .close__word{opacity:.12}
.close__word img{width:100%;height:auto}
.close__word .logo--white{display:none}
[data-theme="dark"] .close__word .logo--ink{display:none}
[data-theme="dark"] .close__word .logo--white{display:block}
.close__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) minmax(0,1fr);align-items:center;gap:24px;
  padding:0 clamp(12px,2.5vw,36px)}
.side-col{display:flex;flex-direction:column;gap:10px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;
  font-size:12.5px;line-height:1.5;color:var(--muted);letter-spacing:-.01em}
.side-col--left{align-items:flex-start;text-align:left}
.side-col--right{align-items:flex-end;text-align:right}
.side-col p{margin:0}
.side-col a{color:var(--text)}
.side-col a:hover{color:var(--red)}
.close--doc{padding-top:40px}
.close--doc .close__grid{grid-template-columns:1fr 1fr;align-items:end}
.side-col__legal{margin-top:14px !important;max-width:26ch;font-size:11px;opacity:.8}

/* ---------- 8. Footer ---------- */
.foot{margin:12px;padding:44px clamp(20px,4vw,48px) 40px;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:end;color:var(--muted);font-size:13.5px;line-height:1.55}
.foot__logo{line-height:0}
.foot__legal{margin:0;max-width:52em}
.foot__links{margin:0;display:flex;gap:22px;white-space:nowrap}
.foot__links a{color:var(--text)}
.foot__links a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- /privacy ---------- */
.doc{max-width:720px;margin:0 auto;padding:96px 24px 120px;font-size:17px;line-height:1.65}
.doc h1{margin:0;font-size:clamp(40px,5vw,64px);font-weight:500;letter-spacing:-.035em;line-height:1.05}
.doc__lead{margin:18px 0 56px;font-size:19px;color:var(--muted)}
.doc h2{margin:48px 0 10px;font-size:22px;font-weight:550;letter-spacing:-.01em}
.doc p,.doc li{color:color-mix(in srgb,var(--text) 82%,transparent)}
.doc ul{padding-left:1.2em}
.doc li{margin:6px 0}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc strong{font-weight:550;color:var(--text)}
.doc__date{margin-top:56px;font-size:14px;color:var(--muted)}
.todo{background:color-mix(in srgb,var(--red) 14%,transparent);border-radius:4px;padding:0 4px}

/* reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

@keyframes drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1.06)}}

/* ---------- Tablet / mobile ---------- */
@media (max-width:1080px){
  .bar__links{display:none}
  .bar{grid-template-columns:1fr auto}
}
@media (max-width:760px){
  .bar{margin:8px 8px 0;height:58px;padding:0 8px 0 16px;border-radius:18px}
  .logo{height:26px}
  .pill{display:none}
  .menu-btn{display:grid}
  .bar__right{gap:2px}
  .hero{padding:52px 8px 8px}
  .hero__title{font-size:clamp(26px,7.4vw,34px);line-height:1.15;text-wrap:balance}
  .hero__title br{display:none}
  .hero__title span{display:block;margin-top:2px}
  .stage{margin-top:30px;border-radius:24px;height:68svh}
  .stage__name{left:22px;bottom:18px}
}

@media (max-width:760px){
  main[id],section[id]{scroll-margin-top:74px}
  .home__line{flex-direction:column;align-items:flex-start;gap:.12em;font-size:clamp(26px,9.6vw,46px)}
  .home__wheel{flex:none;width:100%}
  .home__notes{height:210px}
  .home__notes > li{padding:14px 16px;gap:12px;border-radius:18px}
    .hc__pts{font-size:14px}
  .menu{position:absolute;top:calc(100% + 8px);left:0;right:0;display:flex;flex-direction:column;gap:2px;padding:10px;
    border-radius:18px;background:var(--bar);border:1px solid var(--bar-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
  .bar.is-open .menu{opacity:1;transform:none;pointer-events:auto}
  .menu > a{padding:13px 12px;border-radius:12px;font-size:16px}
  .menu__actions{display:flex;gap:8px;padding:8px 4px 4px}
  .menu__actions .pill{display:inline-flex;flex:1;justify-content:center}

  .play{margin:8px;border-radius:24px;height:86svh;min-height:560px}
  .play__ticker{height:52px}
  .play__track span{font-size:15px}
  .play__lead{top:62px}
  .play__word{width:94%;bottom:-2%}
  .card{width:210px;padding:14px 15px 15px}
  .card__main{font-size:17px}

  .how{margin:0 8px}
  .how__pin{top:74px;height:calc(100svh - 84px);min-height:600px;gap:8px}
  .how__dark{flex-basis:48%;border-radius:24px}
  .how__canvas{display:none}
  .how__copy{max-width:100%;padding:0 22px}
  .how__big{font-size:clamp(24px,6.6vw,30px)}
  .how__small{font-size:13.5px}
  .how__count{bottom:22px;left:22px}
  .how__bar{left:22px;right:22px;bottom:12px}
  .sync{grid-template-columns:1fr;align-content:center;gap:10px;padding:4px 6px 0}
  .sync__title{font-size:clamp(22px,6vw,28px)}
  .sync__text{margin-top:6px;font-size:13.5px}
  .sync__devices{width:min(100%,calc(((100svh - 84px) * .52 - 170px) * 1.9))}
  .dev__label{display:none}

  .what{margin:8px}
  .panel{grid-template-columns:1fr;align-items:start;padding:40px 22px 0;top:74px;height:calc(100svh - 90px);border-radius:24px}
  .panel:nth-of-type(2){top:84px}.panel:nth-of-type(3){top:94px}.panel:nth-of-type(4){top:104px}
  .panel__copy p{margin-top:12px;font-size:15px}
  .panel__badge{width:46px;height:46px;margin-bottom:14px;border-radius:14px}
  .panel__badge svg{width:24px;height:24px}
  .panel__word{font-size:clamp(40px,12vw,54px)}
  .panel__pts{margin-top:16px;gap:8px}
  .panel__pts li{font-size:14px;gap:10px}
  .pt__ic{width:32px;height:32px;border-radius:10px}
  .pt__ic svg{width:17px;height:17px}
  .phone{width:min(250px,62vw);margin-bottom:-40%;align-self:start;margin-top:28px}

  .close{padding:90px 0 0}
  .close__grid{grid-template-columns:1fr 1fr;gap:40px 16px;padding:0 18px}
  .close__centre{grid-column:1/-1;order:-1}
  .side-col{font-size:12px}
  .side-col__legal{max-width:none}
  .callpill{margin-top:32px}
  .close__word{width:100%;margin-top:56px;margin-bottom:-5%}

  .foot{grid-template-columns:1fr;gap:18px;margin:8px}
  .foot__links{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .home{height:auto}
  .home__pin{position:relative;height:auto;padding-top:80px;padding-bottom:80px}
  .home__wheel{height:auto;-webkit-mask-image:none;mask-image:none}
  .home__wheel li{position:static;display:inline}
  .home__wheel li:not(:last-child)::after{content:', '}
  .home__line{display:block}
  .home__notes,.home__count{display:none}
  .play__track{animation:none}
  [data-reveal]{opacity:1;transform:none}
  .keys__text .w{opacity:1}
  .how{height:auto}
  .how__pin{position:relative;top:0;height:auto}
  .how__dark{padding:48px 0}
  .how__steps{gap:36px}
  .how__steps li{grid-area:auto;opacity:1;transform:none}
  .how__count{display:none}
  .panel{position:relative;top:0!important}

  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 404 ---------- */
.lost{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 clamp(24px,8vw,120px);gap:18px}
.lost__logo{line-height:0;margin-bottom:24px}
.lost__title{margin:0;font-size:clamp(40px,6vw,88px);font-weight:500;letter-spacing:-.04em;line-height:1}
.lost__text{margin:0;font-size:18px;color:var(--muted)}
.lost__links{flex-direction:row;gap:22px;margin-top:10px}


/* ---------- Hero swap (top-right sparkle): the closing view takes the hero's place ---------- */
.hero{position:relative}
.hero > .tag,.hero > .hero__title,.hero > .stage{transition:opacity .55s var(--ease),transform .7s var(--ease),filter .55s ease}
.hero.is-alt > .tag,.hero.is-alt > .hero__title,.hero.is-alt > .stage{opacity:0;transform:translateY(-14px) scale(.985);filter:blur(4px);pointer-events:none}
.hero__alt{position:absolute;left:0;right:0;top:40px;bottom:0;display:flex;flex-direction:column;justify-content:center;
  text-align:center;overflow:hidden;opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .6s var(--ease) .1s,transform .8s var(--ease) .1s}
.hero.is-alt .hero__alt{opacity:1;transform:none;pointer-events:auto}
.hero__alt .close__grid{width:100%}
.hero__alt .close__word{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);margin:0;width:min(70%,960px)}
.hero__alt .close__statement{font-size:clamp(30px,4vw,60px)}
@media (max-width:760px){
  .hero__alt{top:20px;justify-content:flex-start;padding-top:24px}
  .hero__alt .close__grid{gap:24px 12px}
  .hero__alt .close__word{width:92%;bottom:-2%}
}

/* in-between widths (tablets, half-screen laptops): the closing stacks cleanly instead of three thin columns */
@media (min-width:761px) and (max-width:1180px){
  .close__grid{grid-template-columns:1fr 1fr;gap:56px 24px;padding:0 32px}
  .close__centre{grid-column:1/-1;order:-1}
  .side-col__legal{max-width:34ch}
}