/* ArkByTech site. Approved design: docs/mockups/e-continue.html */
:root { --pad:clamp(16px,3vw,48px); --word:min(11vw,19svh); --bar:60px; --overlap:36px; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; scroll-padding-top:var(--bar); }
body { background:var(--scene-1); color:var(--ink); font:400 17px/1.55 Manrope,system-ui,sans-serif; overflow-x:clip; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--violet); outline-offset:3px; }
.on-scene :focus-visible { outline-color:var(--violet-soft); }
.card :focus-visible, .light :focus-visible { outline-color:var(--violet); }
h1,h2,h3 { font-family:'Space Grotesk',Manrope,sans-serif; font-weight:700; line-height:1.06; letter-spacing:-.02em; }
ul, ol { padding:0; list-style:none; }
button { font:inherit; color:inherit; cursor:pointer; }
.hide { display:none !important; }

/* top bar */
.bar { position:sticky; top:0; z-index:30; height:var(--bar); display:flex; align-items:center; gap:24px; padding:0 var(--pad); box-shadow:0 10px 30px -18px rgba(0,0,0,.8); }
.bar img { height:30px; width:auto; display:block; }
.bar > a:first-child { border-radius:10px; }
.bar nav { display:flex; gap:4px; margin-left:auto; }
.bar nav a { min-height:44px; display:flex; align-items:center; padding:0 12px; border-radius:var(--r-btn); text-decoration:none; font-size:16px; font-weight:500; transition:background-color .18s; }
.bar nav a:hover { background:rgba(255,255,255,.1); }
.bar .btn { min-height:44px; padding:0 18px; font-size:16px; }

/* story: stacked rounded sections by default, html.live pins them into one scene */
.track,.field,.stage > .streaks { display:none; }
.beat { position:relative; display:grid; gap:20px; padding:32px 12px; margin:8px; border-radius:28px; overflow:clip; }
.beat > * { min-width:0; }
.hero { margin:0; border-radius:0; padding:32px var(--pad) 40px; }
.hero .streaks { z-index:0; }
.hero > :not(.streaks), .a1 > *, .a2 > * { position:relative; z-index:1; }
.a1 { background:var(--scene); }
.a2 { background:radial-gradient(120% 90% at 80% 10%,#8a63ea 0%,var(--violet) 48%,var(--violet-deep) 100%); color:#fff; --on-scene-2:#fff; }
.a3 { background:radial-gradient(110% 80% at 70% 0%,#fff 0%,var(--violet-tint) 60%,#e1d8fb 100%); color:var(--ink); padding-bottom:60px; }
.a1 .word,.a2 .word,.a3 .word,.a1 .copy,.a2 .copy,.a3 .copy,.a3 .fl-wrap { padding-inline:4px; }
.tagline { font:900 5.8vw/1.1 Orbitron,sans-serif; white-space:nowrap; color:var(--violet-soft); margin-bottom:6px; }
h2.word { font:900 min(13vw,96px)/1.05 Orbitron,sans-serif; letter-spacing:0; white-space:nowrap; }
.a3 h2.word { color:var(--violet-deep); }
.copy { display:flex; flex-direction:column; gap:14px; align-items:flex-start; min-width:0; }
.copy h1 { font-size:clamp(35px,3.9vw,60px); }
.copy p { color:var(--on-scene-2); }
.a3 .copy p { color:inherit; }
.big { font-size:clamp(20px,1.9vw,27px); line-height:1.3; font-weight:500; color:inherit !important; }
.acts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips .chip { white-space:normal; padding:6px 13px; line-height:1.3; }
.a2 .chip { background:rgba(255,255,255,.18); color:#fff; }
.rig { position:relative; min-width:0; margin-block:44px; }
.rig-code { margin-block:0; }
.co-t { bottom:calc(100% - 12px); left:6%; z-index:2; }
.co-b { top:calc(100% - 12px); right:6%; z-index:2; }

/* editor window */
.editor { position:relative; background:#141126; color:#e9e6f7; border-radius:var(--r-tile); overflow:hidden; box-shadow:0 0 0 1px rgba(183,156,255,.28), 0 34px 110px -22px rgba(110,66,216,.85), 0 8px 24px -8px rgba(0,0,0,.5); }
.editor::after { content:''; position:absolute; inset:-30% -60%; pointer-events:none; background:linear-gradient(105deg,transparent 44%,rgba(183,156,255,.09) 50%,transparent 56%); animation:ark-sheen 7s ease-in-out infinite; }
.ed-top { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; padding:12px 18px; background:#1e1838; font-size:14px; }
.ed-top b { font:400 14px 'JetBrains Mono',monospace; color:var(--violet-soft); }
.ed-top span { color:#c9c5dc; }
.code { margin:0; padding:clamp(14px,1.6vw,24px); font:400 clamp(13.5px,1.05vw,16px)/1.6 'JetBrains Mono',monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.code .rest { color:transparent; }
.code .c { color:#a79fcd; } .code .s { color:#ffd9a0; } .code .k { color:var(--violet-soft); font-weight:400; } .code .n { color:#8fe3c0; }
.caret { display:inline-block; width:.55em; height:1.1em; margin-right:-.55em; background:var(--violet-soft); vertical-align:text-bottom; animation:ed-blink 1s steps(2) infinite; }
@keyframes ed-blink { 50% { opacity:0; } }

/* the app switcher: one rounded control with a sliding highlight */
.switch { position:sticky; top:calc(var(--bar) + 8px); z-index:20; display:flex; margin:8px; padding:4px; border-radius:999px; background:rgba(18,13,38,.86); box-shadow:var(--float); }
.switch .thumb { position:absolute; left:0; top:4px; bottom:4px; width:0; border-radius:999px; background:var(--violet-soft); box-shadow:0 8px 22px -8px rgba(183,156,255,.9); transition:transform .38s cubic-bezier(.3,1.3,.5,1), width .3s var(--ease); }
.switch button { position:relative; flex:1 1 auto; min-height:44px; padding:0 8px; border:0; border-radius:999px; background:none; color:#f3f5f7; font-size:15px; font-weight:600; white-space:nowrap; transition:color .2s; }
.switch button[aria-pressed=true] { color:#150d30; font-weight:700; }
.switch button:not([aria-pressed=true]):hover { background:rgba(255,255,255,.1); }
.switch button:focus-visible { outline:3px solid var(--violet-soft); outline-offset:1px; }

/* interactive fragments inside the Look screens */
.ui .good { background:var(--ok-tint); color:var(--ok); border-radius:12px; padding:8px 12px; font-weight:700; }
.ui .menu { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ui .pick { min-height:44px; padding:6px 12px; display:flex; justify-content:space-between; gap:8px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--ink); font-size:15px; font-weight:600; text-align:left; box-shadow:0 1px 3px rgba(30,20,70,.08); transition:transform .15s var(--ease), background-color .15s; }
.ui .pick:hover { background:var(--violet-tint); transform:translateY(-1px); }
.ui .pick:active { transform:scale(.97); }
.ui .pick[aria-pressed=true] { background:var(--violet); color:#fff; border-color:var(--violet); }
.ui .result { min-height:48px; background:var(--violet-tint); color:var(--violet-deep); border-radius:12px; padding:8px 12px; font-size:15px; font-weight:700; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.ui .result button { background:none; border:0; border-radius:10px; min-height:44px; padding:0 10px; color:var(--violet-deep); font-weight:700; white-space:nowrap; }
.ui .result button:hover { background:rgba(110,66,216,.12); }
.ui .times { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ui label { display:block; font-size:13px; font-weight:600; color:var(--muted); }
.ui input { width:100%; min-height:44px; margin-top:4px; padding:6px 10px; font:inherit; font-size:16px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.ui .nfc-card { width:100%; max-width:320px; margin:4px auto; border:0; font-size:16px; text-align:left; cursor:pointer; transition:transform .25s var(--ease); }
.ui .nfc-card:hover { transform:translateY(-3px) rotate(-1deg); }
.ui .nfc-card b { font-size:19px; }
.ui .nfc-card svg { position:absolute; right:7%; top:12%; width:44px; height:44px; }
.ui .page { background:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 1px 3px rgba(30,20,70,.08); }
.ui .page .acts3 { margin-top:8px; }
.ui .page .acts3 > * { display:flex; align-items:center; justify-content:center; min-height:44px; padding:2px; border:0; border-radius:10px; font-size:13px; font-weight:700; text-align:center; white-space:nowrap; background:var(--violet-tint); color:var(--violet-deep); }
.ui .page .acts3 button { background:var(--violet); color:#fff; }
.ui pre { margin-top:8px; font:400 12px/1.45 'JetBrains Mono',monospace; white-space:pre-wrap; overflow-wrap:anywhere; }

/* cards that float around the settled tablet */
.fl-wrap { display:grid; gap:12px; }
.fl .card { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:14px 16px; border-radius:var(--r-tile); font-weight:700; line-height:1.3; }
.fl .num { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--violet); color:#fff; font:700 18px 'Space Grotesk',sans-serif; }
.fl:nth-child(even) .num { background:var(--violet-tint); color:var(--violet-deep); }

/* product sections: stacked rounded sheets */
.sec { position:relative; margin-top:calc(var(--overlap) * -1); border-radius:var(--overlap) var(--overlap) 0 0; padding:calc(clamp(56px,7vw,112px) + 8px) var(--pad) calc(clamp(56px,7vw,112px) + var(--overlap)); display:grid; gap:28px clamp(24px,4vw,64px); }
.sec > :not(.streaks) { position:relative; z-index:1; min-width:0; }
.light { background:var(--page); color:var(--ink); }
.lit-violet { background:radial-gradient(90% 90% at 25% 30%,#8a63ea 0%,var(--violet) 50%,var(--violet-deep) 100%); color:#fff; --on-scene-2:#fff; }
.lit-violet .chip { background:rgba(255,255,255,.18); color:#fff; }
.tint { background:radial-gradient(90% 70% at 85% 10%,#fff 0%,var(--violet-tint) 70%); color:var(--ink); }
.name { font-size:clamp(40px,6vw,88px); }
.lead { font-size:clamp(20px,1.9vw,26px); line-height:1.32; font-weight:500; }
.small { font-size:16px; }
.hook { font:700 clamp(21px,2.1vw,30px)/1.2 'Space Grotesk',sans-serif; letter-spacing:-.01em; color:var(--violet-deep); }
.on-scene .hook { color:var(--violet-soft); }
.stack { display:flex; flex-direction:column; gap:16px; align-items:flex-start; min-width:0; }
.feat { display:grid; gap:10px; width:100%; }
.feat li { display:grid; grid-template-columns:12px 1fr; gap:12px; }
.feat li::before { content:''; width:10px; height:10px; margin-top:.55em; border-radius:50%; background:var(--violet); box-shadow:0 0 0 4px rgba(110,66,216,.16); }
.on-scene .feat li::before { background:var(--violet-soft); box-shadow:0 0 0 4px rgba(183,156,255,.2); }
.lit-violet .feat li::before { background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.22); }
.price { font:700 clamp(30px,4vw,56px)/1 'Space Grotesk',sans-serif; white-space:nowrap; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.buy { display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:22px; border-radius:var(--r-tile); width:100%; }
.buy p { font-size:16px; }
.raised { background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(183,156,255,.24); }
.lit-violet .raised { background:rgba(18,13,38,.3); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.w100 { width:100%; }

/* ArkBrew */
.be-tile { position:relative; display:flex; flex-direction:column; gap:10px; width:100%; padding:18px 20px; border-radius:var(--r-tile); background:var(--violet-tint); color:var(--ink); box-shadow:var(--float-lg); }
.be-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.be-top h3 { font-size:clamp(20px,1.7vw,24px); }
.be-top span { padding:2px 10px; border-radius:999px; background:#fff; font-size:13px; font-weight:700; color:var(--ink-2); white-space:nowrap; }
.be-sales { font:800 clamp(30px,3vw,42px)/1.05 Manrope,sans-serif; white-space:nowrap; font-variant-numeric:tabular-nums; }
.meter { position:relative; padding-top:22px; }
.meter .be-track { height:16px; border-radius:999px; background:#fff; box-shadow:inset 0 1px 3px rgba(30,20,70,.15); overflow:hidden; }
.meter .fill { height:100%; border-radius:999px; background:var(--violet); transform-origin:left; transition:background-color .25s; }
.meter .mark { position:absolute; top:0; bottom:-3px; width:2px; background:var(--ink-2); border-radius:2px; }
.meter .mark span { position:absolute; top:-2px; right:6px; font-size:13px; font-weight:700; white-space:nowrap; color:var(--ink-2); }
.cov .fill { background:var(--ok); }
.cov .be-track { animation:cov-pulse 1.1s ease-out 2; }
@keyframes cov-pulse { from { box-shadow:0 0 0 0 rgba(20,128,74,.55); } to { box-shadow:0 0 0 14px rgba(20,128,74,0); } }
.pill { align-self:flex-start; display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px; background:var(--ok-tint); color:var(--ok); font-weight:800; white-space:nowrap; box-shadow:var(--float); transition:opacity .25s, transform .25s var(--ease); }
.be-tile:not(.cov) .pill { opacity:0; transform:scale(.8); }
.be-note { font-size:15px; color:var(--ink-2); line-height:1.35; }
.be-tile .ghost { align-self:flex-start; margin-left:-16px; color:var(--ink); }
.pos-stage { display:grid; gap:12px; justify-items:center; }
.pos-stage .tablet { width:100%; position:relative; margin-bottom:44px; }
.pos-phone { width:min(100%,250px); display:grid; gap:8px; justify-items:start; }
/* Easy Payroll */
.pay-mid .buy { margin-top:16px; }
/* Kaha */
.kaha-stage { position:relative; display:flex; justify-content:center; }
.kaha-back { display:none; }
.kaha-front { width:min(100%,380px); position:relative; z-index:1; }
/* NFC */
.nfc-stage { display:grid; gap:20px; justify-items:center; margin-top:24px; }
.nfc-peek { width:min(100%,250px); }
/* Custom */
.fromto { display:grid; gap:12px; width:100%; }
.paper { background:#fffdf5; color:var(--ink-2); border-radius:var(--r-card); padding:14px 18px; box-shadow:var(--float); transform:rotate(-2deg); font-size:16px; }
.paper b { display:block; margin-bottom:6px; color:var(--ink); }
.paper div { padding:5px 0; border-bottom:1px solid #e8e2d0; display:flex; justify-content:space-between; gap:12px; }
.paper small { display:block; margin-top:8px; font-size:13px; color:var(--muted); }
.brief { padding:clamp(18px,2.4vw,36px); border-radius:var(--r-tile); box-shadow:var(--float-lg); border:0; }
.q { border:0; padding:0; margin-bottom:22px; }
.q legend,.q label { font-weight:700; margin-bottom:8px; display:block; padding:0; font-size:18px; }
.opts { display:flex; flex-wrap:wrap; gap:8px; }
.opts button { min-height:44px; padding:0 16px; background:var(--violet-tint); color:var(--violet-deep); font-size:16px; font-weight:600; border:0; border-radius:999px; white-space:nowrap; transition:transform .15s var(--ease), background-color .15s, color .15s; }
.opts button:hover { transform:translateY(-2px); }
.opts button[aria-pressed=true] { background:var(--violet); color:#fff; font-weight:700; box-shadow:0 10px 22px -10px rgba(110,66,216,.8); }
.q input { width:100%; min-height:48px; font:inherit; font-size:16px; padding:8px 14px; background:#fff; color:var(--ink); border:1px solid var(--line); }
.q input::placeholder { color:var(--muted); }
.snippet { background:var(--violet-tint); border-radius:var(--r-card); padding:16px 18px; margin-bottom:14px; }
.snippet small { display:block; font-size:14px; font-weight:600; color:var(--violet-deep); margin-bottom:6px; }
.snippet p { font-size:18px; font-weight:500; }
/* Contact */

/* Glowing NFC card that flips, from mockup D */
.flip-wrap { position:relative; display:grid; place-items:center; padding:14px 6px; }
.flip-wrap::before { content:''; position:absolute; inset:-14% -12%; background:radial-gradient(closest-side, rgba(183,156,255,.5), transparent); pointer-events:none; }
.swap { position:relative; display:block; width:100%; max-width:440px; aspect-ratio:1.586; padding:0; background:none; border:0; border-radius:18px; text-align:left; }
.swap .nfc-card { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; }
.swap .nfc-card img { width:58%; height:auto; display:block; }
.swap .hint { position:relative; font-size:15px; color:#d9d4ec; }
.swap .waves { position:absolute; right:7%; bottom:9%; width:12%; height:auto; }
.nfc-card.white { background:linear-gradient(135deg,#fff,#eceef6 70%); color:var(--ink); }
.nfc-card.white .hint { color:var(--ink-2); }
.nfc-card.white::after { background:linear-gradient(105deg,transparent 42%,rgba(110,66,216,.1) 50%,transparent 58%); }
.swap .is-front { z-index:2; transform:none; }
.swap .is-back { z-index:1; transform:translate(9%,-11%) rotate(5deg) scale(.96); }
.swap .go-back { animation:to-back .62s cubic-bezier(.4,.1,.3,1); }
.swap .go-front { animation:to-front .62s cubic-bezier(.4,.1,.3,1); }
@keyframes to-back { 0% { z-index:2; transform:none; } 50% { z-index:2; transform:translate(58%,-6%) rotate(11deg); } 51% { z-index:1; } 100% { z-index:1; transform:translate(9%,-11%) rotate(5deg) scale(.96); } }
@keyframes to-front { 0% { z-index:1; transform:translate(9%,-11%) rotate(5deg) scale(.96); } 50% { z-index:1; transform:translate(-26%,5%) rotate(-5deg); } 51% { z-index:2; } 100% { z-index:2; transform:none; } }
.flip-note { position:relative; font-size:16px; text-align:center; margin-top:6px; }

/* Packages: separate tiles with their own product art */
.pk { display:grid; gap:30px; }
.pk h3 { font-size:clamp(24px,2.4vw,34px); }
.pk-sub { margin:2px 0 14px; color:var(--on-scene-2); }
.pk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.pack { position:relative; display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:var(--r-tile); text-decoration:none; color:var(--ink); }
.pk-grid .pack:nth-child(odd) { rotate:-.7deg; } .pk-grid .pack:nth-child(even) { rotate:.7deg; }
.pk-grid .pack { transition:transform .22s var(--ease), box-shadow .22s var(--ease), rotate .22s var(--ease); }
.pk-grid .pack:hover { rotate:0deg; }
.pack b { font-size:18px; line-height:1.25; }
.pack small { font-size:15px; line-height:1.35; color:var(--muted); }
.pack .amt { margin-top:auto; padding-top:10px; font:700 clamp(24px,2.2vw,30px) 'Space Grotesk',sans-serif; white-space:nowrap; font-variant-numeric:tabular-nums; }
.art { position:relative; height:168px; margin-bottom:8px; border-radius:14px; background:var(--violet-tint); overflow:hidden; }
.art .mv { position:absolute; inset:0; }
.mc { position:absolute; left:50%; top:28px; width:172px; aspect-ratio:1.586; margin-left:-86px; display:flex; flex-direction:column; justify-content:flex-start; padding:12px; border-radius:11px; background:linear-gradient(135deg,#221945,#120d26 70%); box-shadow:0 10px 20px -8px rgba(32,16,84,.6); transform-origin:50% 130%; transform:rotate(calc(var(--k) * 6deg)) translateX(calc(var(--k) * 10px)); transition:transform .32s cubic-bezier(.3,1.35,.5,1); }
.mc.w { background:linear-gradient(135deg,#fff,#eceef6 70%); }
.mc img { width:72%; height:auto; display:block; }
.mc svg { position:absolute; right:9px; bottom:8px; width:24px; height:24px; }
.art.solo .mc { width:212px; margin-left:-106px; top:20px; }
.art.solo .mc img { width:58%; }
.pack:hover .mc { transform:rotate(calc(var(--k) * 12deg)) translateX(calc(var(--k) * 22px)) translateY(-3px); }
.ms { position:absolute; left:50%; top:26px; width:84px; height:116px; margin-left:calc(-42px + var(--s) * 60px); padding:9px 6px; border-radius:11px 11px 5px 5px; background:linear-gradient(160deg,#35247a,#1d1540); color:#f3f5f7; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; font-size:11px; font-weight:700; line-height:1.15; font-style:normal; box-shadow:0 10px 20px -8px rgba(32,16,84,.6); transition:transform .3s cubic-bezier(.3,1.35,.5,1); transform:rotate(calc(var(--s) * 5deg)); }
.ms::after { content:''; position:absolute; left:-7px; right:-7px; bottom:-7px; height:7px; border-radius:3px; background:#120d26; }
.ms svg { width:26px; height:26px; color:#ffcf66; }
.ms .wv { width:22px; height:22px; color:#b79cff; }
.pack:hover .ms { transform:translateY(-5px) rotate(calc(var(--s) * 5deg)); }
.art.both .mc { left:37%; }
.art.both .ms { left:80%; }
.art .ph { position:absolute; left:74%; top:18px; width:66px; height:128px; border-radius:9px; background:#14111f; padding:3px; box-shadow:0 8px 16px -6px rgba(32,16,84,.55); }
.art .ph::after { content:''; display:block; height:100%; border-radius:6px; background:linear-gradient(#fff 45%,var(--violet-tint) 45%); }
.art.withph .mc { left:38%; width:172px; margin-left:-86px; top:34px; }
.art.withph .mc img { width:72%; }
.art .x { position:absolute; right:10px; top:10px; padding:1px 9px; border-radius:999px; background:var(--violet); color:#fff; font-size:13px; font-weight:800; }
.pack.feature { display:grid; gap:18px; padding:clamp(20px,3vw,40px); background:var(--violet); color:#fff; border:0; box-shadow:0 26px 70px -18px rgba(183,156,255,.9); }
.pack.feature:hover { box-shadow:0 34px 86px -16px rgba(183,156,255,1); }
.pack.feature small { color:#fff; font-size:17px; }
.pack.feature b { font:700 clamp(30px,3.6vw,50px)/1.05 'Space Grotesk',sans-serif; }
.pack.feature .amt { font-size:clamp(36px,4.4vw,60px); padding-top:6px; margin:0; }
.pack.feature .cta { align-self:flex-start; background:#fff; color:var(--violet-deep); box-shadow:0 12px 28px -10px rgba(18,13,38,.6); }
.pack.feature:hover .cta { transform:translateY(-2px); }
.pack.feature .art { height:270px; background:rgba(255,255,255,.14); }
.pack.feature .art .mv { inset:auto; left:50%; top:50%; width:100%; height:168px; transform:translate(-50%,-50%) scale(1.3); }
.pickline { align-self:flex-start; padding:1px 12px; border-radius:999px; font-size:14px; font-weight:700; background:rgba(255,255,255,.2); }

/* Page style picker: the real DevNFC styles */
.styles { display:grid; gap:22px; align-items:center; padding:clamp(18px,3vw,40px); border-radius:var(--r-tile); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(183,156,255,.22); }
.st-head h3 { font-size:clamp(26px,3vw,42px); }
.st-head p { color:var(--on-scene-2); margin:6px 0 16px; }
.st-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.st { display:flex; flex-direction:column; padding:0; overflow:hidden; border:0; border-radius:14px; background:#fff; color:var(--ink); text-align:left; box-shadow:var(--rest); transition:transform .2s var(--ease), box-shadow .2s; }
.st:hover { transform:translateY(-3px); box-shadow:0 12px 26px -10px rgba(183,156,255,.9); }
.st[aria-pressed=true] { box-shadow:0 0 0 3px var(--violet-soft), 0 14px 30px -10px rgba(183,156,255,.95); }
.st i { display:grid; justify-items:center; gap:4px; padding:9px 0; background:var(--b); }
.st i::before { content:''; width:20px; height:20px; border-radius:50%; background:var(--a); }
.st i::after { content:''; width:44px; height:8px; border-radius:9px; background:var(--a); }
.st b { padding:7px 9px 1px; font-size:14px; line-height:1.2; }
.st small { padding:0 9px 8px; font-size:13px; line-height:1.25; color:var(--muted); }
.st-phone { position:relative; justify-self:center; width:min(100%,290px); isolation:isolate; }
.st-phone::before { content:''; position:absolute; inset:-16% -22%; z-index:-1; background:radial-gradient(closest-side, var(--glow,rgba(183,156,255,.5)), transparent); transition:background .4s; }
.pg { min-height:470px; display:flex; flex-direction:column; gap:10px; padding:18px 16px; background:var(--bg); color:var(--tx); font-family:var(--ff); animation:pg-in .4s var(--ease); }
@keyframes pg-in { from { opacity:0; transform:translateY(10px); } }
.pg .av { width:84px; height:84px; display:grid; place-items:center; border-radius:50%; background:var(--ac); color:var(--on); font-size:28px; font-weight:700; }
.pg.center { align-items:center; text-align:center; }
.pg.hex .av { width:96px; border-radius:0; clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
.pg.sq .av { border-radius:18px; }
.pg.ring .av { background:var(--card); color:var(--ac); box-shadow:0 0 0 2px var(--ac), 0 0 0 6px var(--card), 0 0 0 7px var(--ln); }
.pg h4 { font-size:23px; line-height:1.15; font-weight:700; }
.pg p { font-size:14px; color:var(--mu); line-height:1.35; }
.pg .cta { display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; background:var(--ac); color:var(--on); border-radius:12px; font-size:15px; font-weight:700; }
.pg.rnd .cta { border-radius:999px; }
.pg.flat .cta { border-radius:2px; letter-spacing:.12em; text-transform:uppercase; font-size:13px; }
.pg.hex .cta { border-radius:0; clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%); }
.pg .rows { width:100%; padding:10px 12px; border-radius:12px; background:var(--card); border:1px solid var(--ln); font-size:14px; text-align:left; }
.pg .rows div { display:flex; justify-content:space-between; gap:8px; padding:3px 0; }
.pg .rows span { color:var(--mu); }
.pg .btm { margin-top:auto; padding-top:8px; font-size:12px; color:var(--mu); }

/* Payroll tiles, each with its own moving picture */
.pay-tiles { display:grid; gap:14px; }
.pt { position:relative; display:flex; flex-direction:column; gap:12px; justify-content:space-between; min-height:210px; padding:20px; border-radius:var(--r-tile); overflow:hidden; color:var(--ink); background:#fff; box-shadow:var(--float); }
.pt h3 { font-size:clamp(19px,1.7vw,24px); line-height:1.2; }
.pt.dark { background:var(--scene); color:#f3f5f7; }
.pt.vio { background:radial-gradient(90% 90% at 80% 10%,#8a63ea,var(--violet) 55%,var(--violet-deep)); color:#fff; box-shadow:0 22px 50px -16px rgba(110,66,216,.8); }
.pt.tint { background:var(--violet-tint); }
.pt small { font-size:14px; line-height:1.35; }
.shift { position:relative; height:54px; }
.shift .line { position:absolute; left:0; right:0; top:24px; height:10px; border-radius:9px; background:rgba(255,255,255,.14); }
.shift .run { position:absolute; left:8%; right:6%; top:24px; height:10px; border-radius:9px; background:var(--violet-soft); transform-origin:left; }
.shift .mid { position:absolute; left:36%; top:12px; width:2px; height:34px; background:#fff; }
.shift span { position:absolute; top:0; font-size:13px; font-weight:700; white-space:nowrap; }
.shift .moon { position:absolute; left:calc(36% - 13px); top:-2px; width:26px; height:26px; }
.shift b { position:absolute; top:38px; font-size:13px; font-weight:700; white-space:nowrap; }
.eq { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font:700 clamp(21px,2.1vw,30px) 'Space Grotesk',sans-serif; font-variant-numeric:tabular-nums; }
.eq em { font-style:normal; color:#ffe39c; }
.eq-no { font-size:15px; opacity:1; }
.eq-no s { text-decoration-thickness:2px; }
.gov { display:flex; flex-wrap:wrap; gap:7px; }
.gov span { padding:6px 12px; border-radius:999px; background:var(--violet-tint); color:var(--violet-deep); font-weight:700; font-size:14px; white-space:nowrap; }
.door { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:var(--rest); }
.door i { flex:none; width:14px; height:14px; border-radius:50%; background:var(--ok); animation:door-pulse 1.8s ease-out infinite; }
@keyframes door-pulse { from { box-shadow:0 0 0 0 rgba(20,128,74,.5); } to { box-shadow:0 0 0 14px rgba(20,128,74,0); } }
.door b { display:block; font-size:18px; font-variant-numeric:tabular-nums; }
.docs { position:relative; height:92px; }
.docs i { position:absolute; left:50%; top:4px; width:72px; height:86px; margin-left:-36px; border-radius:8px; background:#fff; box-shadow:0 8px 18px -8px rgba(32,16,84,.5); transform:rotate(calc(var(--k) * 9deg)) translateX(calc(var(--k) * 34px)); transition:transform .3s cubic-bezier(.3,1.35,.5,1); font-style:normal; padding:8px; font-size:12px; font-weight:800; color:var(--violet-deep); line-height:1.1; }
.pt:hover .docs i { transform:rotate(calc(var(--k) * 14deg)) translateX(calc(var(--k) * 46px)) translateY(-3px); }
.floor { position:relative; display:flex; align-items:flex-end; gap:6px; height:72px; padding-bottom:12px; }
.floor i { flex:1; border-radius:6px 6px 2px 2px; background:var(--violet-soft); height:var(--h); min-height:3px; }
.floor::after { content:'₱0'; position:absolute; left:0; right:0; bottom:0; border-top:2px solid #fff; padding-top:1px; font-size:12px; font-weight:800; line-height:1; color:#fff; transform:translateY(100%); }
.js-reveal.shown .shift .run { animation:shift-run 1.2s var(--ease) backwards .2s; }
@keyframes shift-run { from { transform:scaleX(0); } }
.js-reveal.shown .eq > * { animation:ark-up .45s var(--ease) backwards; }
.js-reveal.shown .eq > :nth-child(2) { animation-delay:.12s; } .js-reveal.shown .eq > :nth-child(3) { animation-delay:.24s; } .js-reveal.shown .eq > :nth-child(4) { animation-delay:.36s; } .js-reveal.shown .eq > :nth-child(5) { animation-delay:.48s; }
.js-reveal.shown .gov span { animation:ark-up .45s var(--ease) backwards; animation-delay:calc(var(--j) * 90ms); }
.js-reveal.shown .floor i { animation:ark-grow .6s var(--ease) backwards; animation-delay:calc(var(--j) * 70ms); transform-origin:bottom; }

/* Payroll: calendar, rate review and setup picker */
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; font-size:14px; text-align:center; }
.cal-grid em { font-style:normal; font-size:12px; font-weight:700; color:var(--muted); }
.cal-grid span, .cal-grid button { display:grid; place-items:center; aspect-ratio:1.25; border:0; border-radius:9px; background:#f5f3fb; color:var(--ink-2); font:inherit; }
.cal-grid button { position:relative; font-weight:800; color:#fff; background:var(--ev); transition:transform .18s var(--ease), box-shadow .18s; }
.cal-grid button:hover { transform:translateY(-2px) scale(1.06); box-shadow:0 8px 16px -6px var(--ev); }
.cal-grid button[aria-pressed=true] { box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--ev); }
.cal-out { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-height:48px; padding:8px 12px; border-radius:12px; background:var(--violet-tint); }
.cal-out b { font-size:16px; }
.cal-out span { font-size:14px; color:var(--ink-2); }
.rate-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; font-size:15px; font-weight:600; }
.rate-row:nth-child(odd) { background:rgba(255,255,255,.1); }
.rate-row i { font-style:normal; padding:1px 10px; border-radius:999px; font-size:13px; font-weight:700; background:rgba(255,255,255,.16); white-space:nowrap; transition:background-color .2s, color .2s; }
.rate-row.done i { background:#c9f2da; color:#0d5c34; animation:rate-pop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes rate-pop { from { transform:scale(.6); } }
.pt-hook { font:700 clamp(21px,2.1vw,30px)/1.15 'Space Grotesk',sans-serif; }
.pt-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.run-seg { display:flex; flex-wrap:wrap; gap:6px; }
.run-seg button { flex:1 1 auto; min-height:44px; padding:0 14px; border:0; border-radius:12px; background:rgba(255,255,255,.1); color:#f3f5f7; font-weight:700; white-space:nowrap; transition:background-color .2s, color .2s, transform .18s; }
.run-seg button:hover { transform:translateY(-1px); background:rgba(255,255,255,.18); }
.run-seg button[aria-pressed=true] { background:var(--violet-soft); color:#150d30; box-shadow:0 10px 24px -8px rgba(183,156,255,.9); }
.run-svg { width:100%; height:auto; display:block; animation:pg-in .4s var(--ease); }
.run-svg .wire { fill:none; stroke:rgba(183,156,255,.55); stroke-width:3; stroke-linecap:round; }
.run-svg .room { fill:rgba(255,255,255,.05); stroke:rgba(183,156,255,.5); stroke-width:2; stroke-dasharray:8 8; }
.run-svg .shell { fill:#2a2150; stroke:#b79cff; stroke-width:2; }
.run-svg .scr { fill:#f4f5fa; }
.run-svg .scr-b { fill:#cdbdf6; } .run-svg .scr-a { fill:#6e42d8; }
.run-svg .led { fill:#3ff3ae; animation:led 1.4s steps(2) infinite; }
.run-svg .led.b { animation-delay:.5s; fill:#b79cff; }
@keyframes led { 50% { opacity:.25; } }
.run-svg .ring { fill:none; stroke:#b79cff; stroke-width:3; stroke-linecap:round; animation:led 1.6s ease-in-out infinite; }
.run-svg .pkt { fill:#3ff3ae; }
.run-svg .pkt.v { fill:#fff; }
.run-svg text { fill:#f3f5f7; font:700 18px Manrope,sans-serif; text-anchor:middle; }
.run-svg text.tag { font-size:15px; font-weight:600; fill:#d9d4ec; text-anchor:start; }
.run-svg text.big { font-size:22px; }
.pt.run-tile { background:radial-gradient(70% 90% at 76% 45%,#46309c 0%,#241a54 60%,#150f30 100%); }
.run-copy b { display:block; font-size:18px; margin-bottom:2px; }
/* Update demo: the shared progress card, section 11 of the design note */
.pt.upd { background:radial-gradient(90% 110% at 85% 20%,#8a63ea,var(--violet) 50%,var(--violet-deep)); color:#fff; }
.upd h3 { font-size:clamp(24px,2.5vw,36px); }
.upd small { font-size:15px; }
.upd-ctrl { display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; }
.sw { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:700; cursor:pointer; }
.sw input { appearance:none; -webkit-appearance:none; position:relative; width:48px; height:28px; margin:0; border-radius:999px; background:rgba(255,255,255,.28); cursor:pointer; transition:background-color .2s; }
.sw input::after { content:''; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:transform .22s cubic-bezier(.3,1.4,.5,1); }
.sw input:checked { background:#f5b14c; }
.sw input:checked::after { transform:translateX(20px); }
.sw input:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.upc { display:grid; gap:12px; padding:18px; border-radius:18px; background:#fff; color:var(--ink); box-shadow:0 30px 60px -22px rgba(18,13,38,.75); rotate:-1deg; transition:rotate .25s var(--ease); }
.upd:hover .upc { rotate:0deg; }
.upc-top { display:flex; align-items:center; gap:12px; }
.upc-ico { flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:var(--violet-tint); color:var(--violet-deep); transition:background-color .25s, color .25s; }
.upc-ico svg { width:26px; height:26px; }
.upc-top b { display:block; font-size:18px; line-height:1.2; }
.upc-top small { display:block; font-size:14px; color:var(--muted); }
.upc-pct { margin-left:auto; font:800 24px Manrope,sans-serif; font-variant-numeric:tabular-nums; }
.upc-bar { height:12px; border-radius:999px; background:var(--violet-tint); overflow:hidden; }
.upc-bar i { display:block; height:100%; width:100%; border-radius:999px; background:var(--violet); transform:scaleX(var(--p,0)); transform-origin:left; transition:transform .5s var(--ease), background-color .25s; }
.upc-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding:0; }
.upc-steps li { padding:8px 6px; border-radius:10px; background:#f5f3fb; color:var(--muted); text-align:center; font-size:13px; font-weight:700; line-height:1.2; transition:background-color .25s, color .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.upc-steps li.now { background:var(--violet-tint); color:var(--violet-deep); transform:translateY(-2px); }
.upc-steps li.done { background:var(--ok-tint); color:var(--ok); }
.upc-end { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:44px; }
.upc-end p { font-size:15px; font-weight:600; flex:1 1 200px; }
.upc-end .ghost { min-height:44px; color:var(--ink); }
.upc.ok .upc-ico { background:var(--ok-tint); color:var(--ok); } .upc.ok .upc-bar i { background:var(--ok); }
.upc.wait .upc-ico { background:var(--warn-tint); color:var(--warn); } .upc.wait .upc-bar i { background:var(--warn); }
.upc.wait .upc-end p { color:var(--warn); }
.door-rows { display:grid; gap:7px; }
.door { padding:9px 12px; }
.door b { font-size:16px; }
.js-reveal.shown .door { animation:ark-up .45s var(--ease) backwards; animation-delay:calc(var(--j) * 200ms + .2s); }
.docs { height:128px; }
.docs i { width:92px; height:116px; margin-left:-46px; font-size:14px; }

/* Your turn: sticky notes fly off a notebook and become a system */
.custom { background:radial-gradient(70% 60% at 76% 42%,#7a52e6 0%,#4f2cb0 45%,#21174e 100%); color:#fff; --on-scene-2:#fff; }
.cu-head { grid-column:1/-1; max-width:980px; }
.cu-head h2 { font-size:clamp(42px,6.4vw,96px); }
.cu-head p { margin-top:12px; font-size:clamp(20px,2.1vw,28px); line-height:1.3; font-weight:500; }
.cu-stage { grid-column:1/-1; display:grid; gap:28px; align-items:center; }
.desk { position:relative; padding:58px 18px 24px; border-radius:14px; background-color:#fffdf2; color:#2b2413; transform:rotate(-1.6deg); box-shadow:0 34px 70px -24px rgba(10,5,40,.8); }
.desk.lines { background-image:repeating-linear-gradient(transparent 0 33px,#cfdcf1 33px 35px); }
.desk.sheet { background-image:linear-gradient(#cbe3cd 2px,transparent 2px),linear-gradient(90deg,#cbe3cd 2px,transparent 2px); background-size:74px 34px; }
.desk.old { background-color:#e6e6ea; }
.desk-title { position:absolute; left:20px; top:12px; font:700 clamp(26px,2.6vw,36px)/1.1 Caveat,cursive; }
.notes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.note { position:relative; display:flex; align-items:center; min-height:96px; padding:12px 14px; border:0; border-radius:3px 3px 16px 3px; background:var(--n); color:#2b2413; font:700 clamp(21px,2vw,26px)/1.08 Caveat,cursive; text-align:left; box-shadow:0 12px 18px -10px rgba(40,25,5,.55); rotate:var(--r); transition:transform .22s cubic-bezier(.3,1.5,.5,1), box-shadow .2s, opacity .25s; }
.note::before { content:''; position:absolute; left:50%; top:-8px; width:54px; height:18px; margin-left:-27px; background:rgba(255,255,255,.65); box-shadow:0 1px 2px rgba(0,0,0,.14); rotate:-3deg; }
.note:hover { transform:translateY(-6px) scale(1.04); box-shadow:0 22px 26px -12px rgba(40,25,5,.6); }
.note:active { transform:scale(.97); }
.note[aria-pressed=true] { opacity:.62; text-decoration:line-through; text-decoration-thickness:2px; }
.note[aria-pressed=true]::after { content:'Added'; position:absolute; right:6px; bottom:4px; padding:0 8px; border-radius:999px; background:#14804a; color:#fff; font:700 12px Manrope,sans-serif; line-height:1.6; text-decoration:none; }
.flying { position:fixed; z-index:40; margin:0; pointer-events:none; }
.now-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:16px; }
.now-row b { font:700 22px Caveat,cursive; }
.now-row button { min-height:44px; padding:0 14px; border:0; border-radius:999px; background:rgba(43,36,19,.09); color:#2b2413; font-size:15px; font-weight:700; white-space:nowrap; transition:background-color .15s, color .15s; }
.now-row button:hover { background:rgba(43,36,19,.18); }
.now-row button[aria-pressed=true] { background:#2b2413; color:#fffdf2; }
.glowpad { position:relative; min-width:0; isolation:isolate; }
.glowpad::before { content:''; position:absolute; inset:-12% -8%; z-index:-1; background:radial-gradient(closest-side,rgba(205,189,255,.65),transparent); }
.glowpad .device { box-shadow:0 44px 100px -24px rgba(10,5,40,.85), 0 0 0 1px rgba(183,156,255,.3); }
.sys-top { display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:800; font-size:clamp(15px,1.4vw,19px); }
.sys-top span:last-child { flex:none; padding:3px 12px; border-radius:999px; background:var(--violet); color:#fff; font-size:13px; }
.slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.slot { position:relative; min-width:0; min-height:124px; border-radius:12px; border:2px dashed #d6cff0; display:flex; }
.slot.on { border:0; }
.slot-ghost { margin:auto; padding:6px; font-size:12px; font-weight:600; color:#8f88a8; text-align:center; }
.mod { width:100%; padding:10px 12px; border-radius:12px; background:#fff; box-shadow:0 4px 12px rgba(30,20,70,.14); min-width:0; animation:mod-in .55s cubic-bezier(.3,1.5,.5,1); }
@keyframes mod-in { 0% { opacity:0; transform:scale(.55); box-shadow:0 0 0 0 rgba(110,66,216,.8); } 60% { opacity:1; box-shadow:0 0 0 12px rgba(110,66,216,0); } }
.mod > span { display:block; font-size:12px; color:var(--muted); }
.mod > b { display:block; font-size:15px; line-height:1.2; }
.mod .mini { display:flex; align-items:flex-end; gap:3px; height:42px; margin-top:6px; }
.mod .mini i { flex:1; border-radius:3px 3px 1px 1px; background:#cdbdf6; height:var(--h); }
.mod .mini i:last-child { background:var(--violet); }
.mod .week { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-top:6px; }
.mod .week i { height:16px; border-radius:3px; background:var(--violet-tint); }
.mod .week i.on { background:var(--violet); }
.mod .ok { margin-top:6px; padding:5px 8px; border-radius:8px; background:var(--ok-tint); color:var(--ok); font-size:13px; font-weight:800; }
.mod .ln { display:flex; justify-content:space-between; gap:6px; font-size:13px; padding:2px 0; }
.mod .ln em { font-style:normal; font-weight:700; color:var(--warn); white-space:nowrap; }
.cu-note { margin-top:14px; font-size:15px; font-weight:600; text-align:center; color:#fff; }
.quote { grid-column:1/-1; }
.quote .brief { padding:clamp(18px,2.4vw,30px); justify-content:center; }
.q-row { display:grid; gap:12px; align-items:end; }
.q-row .q { margin:0; }
.q-row .btn { width:100%; font-size:18px; min-height:56px; }
.quote h3 { font-size:clamp(24px,2.6vw,36px); margin-bottom:10px; color:var(--ink); }
.quote p.lead-q { color:var(--ink-2); margin-bottom:14px; }
.cu-steps { grid-column:1/-1; display:grid; gap:12px; }
.cu-steps li { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; padding:14px 16px; border-radius:var(--r-tile); background:rgba(255,255,255,.12); color:#fff; font-weight:700; line-height:1.3; }
.cu-steps .num { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--violet-deep); font:700 17px 'Space Grotesk',sans-serif; }
.cu-quote { grid-column:1/-1; font-size:16px; }

/* ArkTap delivery and renewal answers */
.pk-mo { font-weight:700; color:var(--ink-2) !important; }
.pk-ship { align-self:flex-start; margin-top:4px; padding:1px 10px; border-radius:999px; background:var(--ok-tint); color:var(--ok); font-size:13px; font-weight:700; white-space:nowrap; }
.pk-faq h3 { font-size:clamp(24px,2.4vw,34px); margin-bottom:12px; }
.pk-qs { display:grid; gap:10px; }
.pk-qs details { padding:0 18px; border-radius:16px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(183,156,255,.24); }
.pk-qs summary { display:flex; align-items:center; min-height:52px; font-weight:700; cursor:pointer; }
.pk-qs p { padding-bottom:14px; color:var(--on-scene-2); }
@media (min-width:720px) { .pk-qs { grid-template-columns:1fr 1fr; align-items:start; } }

/* Brief form flips to the ready message */
.flip-form { perspective:1600px; }
.flip-form .inner { display:grid; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.3,1.25,.5,1); }
.flip-form.flipped .inner { transform:rotateY(180deg); }
.flip-form .brief { grid-area:1/1; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; }
.flip-form .brief.back { transform:rotateY(180deg); justify-content:center; }

/* Pocket of app passes */
.pocket-sec { grid-template-columns:minmax(0,1fr); }
.pocket { width:100%; }
.passes { display:flex; flex-direction:column; padding:0 8px; }
.pass { position:relative; display:flex; flex-direction:column; gap:2px; align-items:flex-start; width:100%; height:128px; margin-bottom:-48px; padding:14px 16px; border:0; border-radius:20px; color:var(--pc,var(--ink)); background:var(--pb,#fff); text-align:left; box-shadow:0 -6px 20px -8px rgba(32,16,84,.4); transition:transform .28s cubic-bezier(.3,1.35,.5,1), box-shadow .22s; }
.pass svg { width:30px; height:30px; margin-bottom:4px; flex:none; }
.pass b { font:700 19px/1.2 'Space Grotesk',sans-serif; }
.pass span { font-size:15px; line-height:1.3; }
.pass:hover, .pass:focus-visible { transform:translateY(-10px); box-shadow:0 -10px 34px -6px rgba(110,66,216,.7); }
.pass:active { transform:translateY(-4px) scale(.99); }
.pocket-front { position:relative; z-index:6; padding:20px 18px; border-radius:22px; background:var(--scene); color:#f3f5f7; box-shadow:var(--float); }
.pocket-front p { padding-top:12px; border-top:2px dashed rgba(183,156,255,.5); text-align:center; font-size:16px; }

/* Drawer: right side on PC, snapping sheet on phones */
.scrim { position:fixed; inset:0; z-index:59; background:rgba(10,6,28,.55); opacity:0; transition:opacity .28s; }
.scrim.open { opacity:1; }
.drawer { position:fixed; z-index:60; left:0; right:0; bottom:0; height:92svh; display:flex; flex-direction:column; background:var(--page); color:var(--ink); border-radius:24px 24px 0 0; box-shadow:var(--float-lg); transform:translateY(100%); transition:transform .34s var(--ease); }
.drawer.open { transform:translateY(calc(92svh - var(--snap,50svh))); }
.drawer.drag { transition:none; }
.dr-grab { flex:none; display:flex; align-items:center; gap:10px; min-height:60px; padding:8px 8px 8px 20px; touch-action:none; cursor:grab; position:relative; }
.dr-grab::before { content:''; position:absolute; left:50%; top:7px; width:44px; height:5px; margin-left:-22px; border-radius:9px; background:#c9c3dd; }
.dr-grab h2 { font-size:24px; flex:1; min-width:0; padding-top:6px; }
.dr-x { flex:none; width:44px; height:44px; border:0; border-radius:50%; background:transparent; font-size:22px; line-height:1; color:var(--ink); }
.dr-x:hover { background:rgba(110,66,216,.1); }
.dr-body { height:calc(var(--snap,50svh) - 60px); overflow-y:auto; overscroll-behavior:contain; padding:4px 20px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.dr-body .device { flex:none; width:100%; }
.dr-body .device.phone { width:min(100%,280px); }
.dr-body .ui .two { grid-template-columns:minmax(0,1fr); }
.dr-body .price { font-size:clamp(28px,3vw,40px); }
.dr-acts { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.dr-note { font-size:15px; color:var(--muted); }

/* Tile closing the page: card overlapping its edge, from mockup D */
.contact-tile { position:relative; display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:clamp(24px,3vw,44px); border-radius:var(--r-tile); background:var(--scene); box-shadow:var(--float-lg); min-height:300px; }
.contact-tile > :not(.streaks, .peek) { position:relative; z-index:1; }
.contact-tile h2 { font-size:clamp(32px,4vw,56px); }
.contact-tile .btn { margin-top:auto; }
.peek { position:relative; width:min(100%,290px); margin-top:8px; align-self:flex-end; z-index:2; }
.peek img { width:58%; height:auto; display:block; }
.peek .nfc-card { padding:8%; }
.peek small { display:block; font-size:14px; color:#d9d4ec; }
.peek .num { display:block; font-size:clamp(17px,1.6vw,21px); font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums; }
.reach { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.reach a { display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:110px; padding:16px 18px; border-radius:var(--r-tile); text-decoration:none; color:var(--ink); }
.reach a.wide { grid-column:1/-1; }
.reach b { font:700 clamp(19px,1.7vw,24px)/1.2 'Space Grotesk',sans-serif; }
.reach span { font-size:16px; color:var(--ink-2); overflow-wrap:anywhere; }
.reach .tel { font:700 clamp(21px,1.9vw,27px) 'Space Grotesk',sans-serif; color:var(--violet-deep); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Compact footer */
.end { position:relative; overflow:hidden; margin-top:calc(var(--overlap) * -1); border-radius:var(--overlap) var(--overlap) 0 0; padding:22px var(--pad) calc(18px + env(safe-area-inset-bottom)); background:var(--scene-1); color:var(--on-scene-2); font-size:14px; line-height:1.45; }
.end > :not(.end-rings) { position:relative; z-index:1; }
.end-rings { position:absolute; right:-70px; bottom:-90px; width:300px; height:300px; pointer-events:none; }
.end-rings i { position:absolute; inset:0; border-radius:50%; border:10px solid rgba(183,156,255,.3); opacity:0; animation:end-ring 4.5s ease-out infinite; }
.end-rings i:nth-child(2) { animation-delay:1.5s; } .end-rings i:nth-child(3) { animation-delay:3s; }
@keyframes end-ring { 0% { transform:scale(.2); opacity:0; } 20% { opacity:1; } 100% { transform:scale(1.15); opacity:0; } }
.end-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; margin-bottom:12px; }
.end-logo { position:relative; overflow:hidden; display:block; border-radius:6px; }
.end-logo::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%); transform:translateX(-110%); animation:end-shine 5s ease-in-out infinite; }
@keyframes end-shine { 0%, 55% { transform:translateX(-110%); } 80%, 100% { transform:translateX(110%); } }
.end-top img { height:32px; width:auto; display:block; }
.end-top nav { display:flex; flex-wrap:wrap; gap:2px; margin-left:auto; }
.end-top nav a { position:relative; display:flex; align-items:center; min-height:36px; padding:0 10px; border-radius:10px; color:#f3f5f7; text-decoration:none; font-size:15px; font-weight:500; }
.end-top nav a::after { content:''; position:absolute; left:10px; right:10px; bottom:5px; height:2px; border-radius:2px; background:var(--violet-soft); transform:scaleX(0); transform-origin:left; transition:transform .26s var(--ease); }
.end-top nav a:hover::after, .end-top nav a:focus-visible::after { transform:scaleX(1); }
.end details { max-width:110ch; }
.end summary { display:inline-flex; align-items:center; min-height:32px; cursor:pointer; color:#f3f5f7; text-decoration:underline; text-underline-offset:3px; }
.end details p { margin:4px 0 0; }
@media (pointer:coarse) { .end-top nav a { min-height:44px; } }
.streaks { border-radius:inherit; }
/* section devices and bars wait for their reveal */
.js-reveal:not(.shown) .bars i { animation:none; }

/* phone: gentle tilts only, nothing wider than the screen */
@media (max-width:719px) {
  .bar nav { display:none; } .bar .btn { margin-left:auto; }
  .tilt-l { transform:perspective(900px) rotateY(5deg) rotateX(2deg); }
  .tilt-r { transform:perspective(900px) rotateY(-5deg) rotateX(2deg); }
  .hero-chips { display:none; }
  .ui { padding:10px; }
  .ui .t, .ui .box { padding:8px 9px; }
  .fl:nth-child(odd) .card { transform:rotate(-.8deg); }
  .fl:nth-child(even) .card { transform:rotate(.8deg); }
  .hero .acts, .hero .btn-live { width:100%; }
}
@media (max-width:719px) {
  .kaha-stage { margin-top:-64px; }
  /* The tablet stays pinned while thumbs tap the notes below it */
  .custom { grid-template-columns:minmax(0,1fr); }
  .cu-stage { display:flex; flex-direction:column; align-items:stretch; }
  .glowpad { order:1; position:sticky; top:calc(var(--bar) + 6px); z-index:5; }
  .desk { order:2; }
  .glowpad .ui { padding:8px; gap:6px; }
  .slot { min-height:62px; }
  .slots { gap:5px; }
  .slot-ghost { font-size:11px; padding:3px; }
  .mod { padding:6px 7px; }
  .mod > b { font-size:12px; line-height:1.15; }
  .mod > span, .mod .ok, .mod .ln { display:none; }
  .mod .mini { height:18px; margin-top:4px; }
  .mod .week i { height:7px; }
  .cu-note { font-size:13px; margin-top:6px; line-height:1.25; }
  .note { min-height:88px; }
  .pt.w12 { min-height:0; }
  .run-svg text { font-size:22px; } .run-svg text.tag { font-size:18px; }
  .upc-pct { font-size:20px; }
  .upc-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Tiles swipe right under the preview, so a tap shows its change without scrolling away */
  .styles { display:flex; flex-direction:column; align-items:stretch; }
  .st-head { display:contents; }
  .st-head h3, .st-head p { order:1; margin-bottom:0; }
  .st-phone { order:2; }
  .st-grid { order:3; display:flex; overflow-x:auto; scroll-snap-type:x proximity; margin-inline:-18px; padding:6px 18px 10px; }
  .st { flex:0 0 124px; scroll-snap-align:center; }
  .pg { min-height:400px; }
  .pack.feature .art { height:200px; }
  .pack.feature .art .mv { transform:translate(-50%,-50%) scale(1); }
  .pos-stage { margin-bottom:-52px; }
  .peek { margin-right:-24px; }
  .reach a.ph2 { grid-column:1/-1; }
  .end-top nav { margin-left:-10px; }
}
/* wider, not pinned: two columns */
@media (min-width:720px) {
  .tagline { font-size:2.5vw; }
  html:not(.live) .beat { grid-template-columns:5fr 7fr; gap:24px 40px; align-items:center; padding:48px 32px; }
  html:not(.live) .hero { padding:48px var(--pad); }
  html:not(.live) .beat .word, html:not(.live) .tagline { grid-column:1/-1; }
  html:not(.live) .a3 .fl-wrap { grid-column:1/-1; grid-template-columns:1fr 1fr; }
  html:not(.live) .switch { max-width:560px; margin-inline:auto; }
  .pos, .kaha, .custom, .contact, .nfc .head { grid-template-columns:5fr 7fr; align-items:center; }
  .kaha { grid-template-columns:7fr 5fr; }
  .cu-stage { grid-template-columns:5fr 7fr; }
  .glowpad { margin-left:-34px; z-index:2; }
  .q-row { grid-template-columns:1fr auto; }
  .q-row .btn { width:auto; padding:0 34px; }
  .cu-steps { grid-template-columns:repeat(4,1fr); }
  .contact { align-items:stretch; grid-template-columns:7fr 5fr; }
  .contact-tile h2, .contact-tile p { max-width:60%; }
  .peek { position:absolute; right:-30px; bottom:30px; width:min(290px,42%); margin:0; }
  .pocket-sec { grid-template-columns:4fr 8fr; align-items:end; }
  .pocket { margin-top:-130px; }
  .passes { flex-direction:row; justify-content:center; padding:0 18px; }
  .pass { flex:0 1 210px; min-width:0; height:230px; margin:0 -10px -80px; padding:16px 26px 16px 16px; }
  .pass:nth-child(odd) { rotate:-3deg; } .pass:nth-child(even) { rotate:2.5deg; }
  .pass:hover, .pass:focus-visible { transform:translateY(-34px); rotate:0deg; z-index:5 !important; }
  .drawer { left:auto; top:0; height:auto; width:clamp(360px,36vw,520px); border-radius:24px 0 0 24px; transform:translateX(100%); }
  .drawer.open { transform:none; }
  .dr-grab { cursor:default; touch-action:auto; padding-top:16px; }
  .dr-grab::before { display:none; }
  .dr-body { height:auto; flex:1; min-height:0; }
  .nfc .head { display:grid; gap:32px clamp(24px,4vw,64px); }
  .pack.feature { grid-template-columns:5fr 6fr; align-items:center; }
  .styles { grid-template-columns:7fr 4fr; }
  .st-grid { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); }
  .pay-tiles { grid-template-columns:repeat(12,1fr); }
  .pt { grid-column:span 4; }
  .pt.w12 { grid-column:span 12; display:grid; grid-template-columns:5fr 7fr; gap:14px 28px; align-items:center; }
  .run-tile #runArt { grid-column:2; grid-row:1 / span 3; }
  .upd { grid-template-columns:5fr 7fr; }
  .upd .upc { grid-column:2; grid-row:1 / span 3; }
  .cal-grid span, .cal-grid button { aspect-ratio:1.9; }
  .pt.w5 { grid-column:span 5; } .pt.w7 { grid-column:span 7; } .pt.w3 { grid-column:span 3; }
  .kaha-stage { padding-left:24%; justify-content:flex-start; }
  .kaha-back { display:block; position:absolute; left:0; top:44px; width:44%; }
  .fromto { grid-template-columns:2fr 3fr; align-items:center; }
  .paper { margin-right:-20px; position:relative; z-index:2; }
  .pay-head { display:grid; grid-template-columns:5fr 7fr; gap:16px clamp(24px,4vw,64px); align-items:end; }
  .pay-mid { display:grid; grid-template-columns:repeat(12,1fr); align-items:end; }
  .pay-mid > :first-child { grid-column:1/9; grid-row:1; }
  .pay-mid > .buy { grid-column:9/-1; grid-row:1; margin:0 0 -28px -40px; width:auto; z-index:2; }
}
@media (min-width:1000px) {
  /* Devices cross into the next or previous sheet, through the empty padding between sections */
  .pos-stage { position:relative; display:block; padding-bottom:300px; align-self:end; margin-bottom:-120px; }
  .be-tile { position:absolute; right:-10px; bottom:0; width:58%; z-index:3; }
  .kaha-stage { align-self:start; margin-top:-150px; }

  .pos-stage .tablet { margin-bottom:0; }
  .pos-phone { position:absolute; left:-44px; bottom:0; width:190px; z-index:2; }
  .nfc-stage { position:relative; display:block; min-height:440px; align-self:start; margin-top:-110px; }
  .nfc-stage .flip-wrap { position:relative; z-index:2; width:70%; margin-top:70px; }
  .nfc-stage .flip-note { width:70%; }
  .nfc-peek { position:absolute; right:0; top:0; width:42%; max-width:290px; }
}

/* pinned story: PC only, motion allowed, tall enough */
html.live .story { height:640svh; }
html.live .stage { position:sticky; top:var(--bar); height:calc(100svh - var(--bar)); overflow:hidden; --track:#f3f5f7; background:var(--scene-1); }
html.live .stage[data-act="2"] { --track:#fff; }
html.live .stage[data-act="3"] { --track:var(--violet-deep); }
html.live .pair { display:contents; }
html.live .field { display:block; position:absolute; inset:0; opacity:0; }
html.live .field.deep { background:var(--scene); opacity:1; }
html.live .field.violet { background:radial-gradient(70% 90% at 72% 40%,#8f6bee 0%,var(--violet) 55%,var(--violet-deep) 100%); }
html.live .field.light { background:radial-gradient(70% 80% at 55% 35%,#fff 0%,#f6f2ff 45%,var(--violet-tint) 100%); }
html.live .stage > .streaks { display:block; }
html.live .track { display:flex; gap:.42em; width:max-content; position:absolute; top:0; left:var(--pad); z-index:1; font:900 var(--word)/1.1 Orbitron,sans-serif; white-space:nowrap; color:var(--track); transform-origin:0 0; will-change:transform; transition:color .5s; }
html.live .track span { opacity:.2; transition:opacity .35s; }
html.live .track span.on { opacity:1; }
html.live .stage[data-act="0"] .track span { opacity:.72; }
html.live .tagline, html.live .rig-lone { display:none; }
html.live .beat { display:contents; }
html.live .beat h2.word { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
html.live .beat > .streaks { display:none; }
html.live .copy { position:absolute; z-index:3; left:var(--pad); top:calc(var(--word) * 1.1 + 24px); width:36%; max-width:560px; padding:0; }
html.live .hero .copy { top:calc(14% + 8vw); }
html.live .beat:not(.on) .copy { visibility:hidden; transition:visibility 0s .35s; }
html.live .copy > * { opacity:0; transform:translateY(22px); transition:opacity .35s var(--ease), transform .45s var(--ease); }
html.live .beat.on .copy > * { opacity:1; transform:none; transition-delay:calc(var(--i,0) * 70ms); }
html.live .copy .chip { opacity:0; transform:scale(.7); transition:opacity .3s var(--ease), transform .4s cubic-bezier(.3,1.5,.5,1); }
html.live .beat.on .copy .chip { opacity:1; transform:none; transition-delay:calc(.25s + var(--j,0) * 90ms); }
@media (max-height:720px) { html.live .hero-chips { display:none; } }
html.live .a3 .copy { width:27%; }
html.live .a3 .big { font-size:clamp(19px,1.6vw,23px); }
html.live .rig { position:absolute; z-index:2; right:var(--pad); top:50%; width:min(56%,880px); margin:0; visibility:hidden; will-change:transform,opacity; }
html.live .rig-hero { width:min(58%,900px); }
html.live .rig-tablet { width:min(54%,820px); }
html.live .rig-tablet .callout { opacity:0; transform:scale(.6) translateY(10px); transition:opacity .25s var(--ease), transform .4s cubic-bezier(.3,1.5,.5,1); }
html.live .rig-tablet.popped .callout { opacity:1; transform:none; }
html.live .rig-tablet.popped .co-b { transition-delay:.14s; }
html.live .fl-wrap { position:absolute; z-index:3; display:flex; flex-direction:column; gap:14px; width:27%; pointer-events:none; }
html.live .fl-l { left:var(--pad); top:calc(var(--word) * 1.1 + 132px); }
html.live .fl-r { right:var(--pad); top:24%; }
html.live .fl { opacity:0; visibility:hidden; }
html.live .fl .card { box-shadow:var(--float); }
html.live .switch { position:absolute; z-index:4; top:auto; left:var(--pad); bottom:24px; width:36%; min-width:320px; max-width:520px; margin:0; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility 0s .3s; }
html.live .switch.show { opacity:1; visibility:visible; transition-delay:0s; }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .caret { display:none; }
  .opts button:hover, .ui .pick:hover, .ui .nfc-card:hover { transform:none; }
}