:root{ /* Lime, not emerald. Kiwi fruit flesh is yellow-green, and the reference build proved the warmer cream ground carries it better than a neutral grey. */ --ground:#F7F7F4; --card:#FFFFFF; --ink:#0A0A0A; --text-2:#57603F; --muted:#8A9576; --hairline:#1A2E050F; --green:#65A30D; --green-bright:#84CC16; --green-dark:#4D7C0F; --pastel:#ECFCCB; --ink-warm:#1A2E05; --sans:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace; --r-card:20px; --r-pill:999px; --on-ink:#fff; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:linear-gradient(180deg,var(--pastel) 0,rgba(236,252,203,.35) 300px, rgba(236,252,203,0) 760px) no-repeat,var(--ground); color:var(--ink);font-family:var(--sans); -webkit-font-smoothing:antialiased;line-height:1.5} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} section{padding:110px 0} h1,h2,h3{letter-spacing:-.03em;font-weight:800;line-height:1.04} a{color:inherit} /* ── floating pill nav ─────────────────────────────────────────────── */ .nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:50; display:flex;align-items:center;gap:26px;padding:9px 9px 9px 20px; /* Liquid glass: the look comes from the specular edges, not the blur. A bright inset line along the top and a fainter one along the bottom read as light catching a curved surface; without them heavy blur just looks like fog. */ background:rgba(255,255,255,.62); backdrop-filter:saturate(200%) blur(26px); -webkit-backdrop-filter:saturate(200%) blur(26px); border:1px solid rgba(26,46,5,.09); border-radius:var(--r-pill); box-shadow: 0 10px 34px -8px rgba(26,46,5,.16), 0 2px 8px rgba(26,46,5,.05), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.34);} .brandmark{text-decoration:none;display:flex;align-items:center;gap:8px; font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--ink)} .brandmark img{width:26px;height:26px;display:block;flex:0 0 auto} .nav .brand{text-decoration:none;display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px; letter-spacing:-.02em} .nav .brand .kface{width:26px;height:26px;display:block;transition:transform .07s ease-out} .nav .brand .kface.down{transform:translateY(2px) scale(.92)} .nav .btn{text-decoration:none;white-space:nowrap;flex:0 0 auto} /* nowrap and no shrink belong here, not only in the desktop block. Without them a two word link wraps: "Try it" collapses to the width of "Try", and under more pressure the labels break to one letter a line. */ .nav a.link{font-size:13.5px;color:var(--text-2);text-decoration:none;font-weight:500; white-space:nowrap;flex:0 0 auto} .nav a.link:hover{color:var(--ink)} /* Past the hero the pill becomes a full width bar. The section links go with it: once you are reading the page they are just noise, and the counter is the thing worth watching. Desktop only, since the pill already spans a phone. */ @media(min-width:900px){ /* 0.42s and a long tail out, which is the shape Apple uses for a container that grows. Width is driven in JS: CSS cannot interpolate max-content to a length, so the bar used to snap to full width in a single frame no matter what the transition said. */ .nav{transition:top .42s cubic-bezier(.32,.72,0,1), width .42s cubic-bezier(.32,.72,0,1), border-radius .42s cubic-bezier(.32,.72,0,1), padding .42s cubic-bezier(.32,.72,0,1), background .34s ease,box-shadow .34s ease,border-color .34s ease; max-width:none} /* 85% rather than edge to edge: the glass needs ground either side of it to read as glass at all. Full bleed turned it into an opaque strip. */ body.docked .nav{top:12px; border-radius:20px; padding:12px clamp(18px,2.4vw,30px); background:rgba(255,255,255,.62); backdrop-filter:saturate(210%) blur(30px); -webkit-backdrop-filter:saturate(210%) blur(30px); border:1px solid rgba(26,46,5,.09); box-shadow: 0 14px 40px -10px rgba(26,46,5,.18), 0 2px 10px rgba(26,46,5,.06), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.3);} .nav a.link{opacity:1;white-space:nowrap} /* The links used to fade to opacity:0 on dock, so the only affordance left on a 12,000px page was a counter. They stay now; the counter goes right, which is where a vanity metric belongs relative to Pricing and Download. */ body.docked .nav .thocks{margin-left:auto;font-size:13.5px} } @media(max-width:720px){.nav a.link{display:none}} /* ── buttons ───────────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer; font-family:inherit;font-weight:600;text-decoration:none;border-radius:var(--r-pill); transition:transform .15s ease,box-shadow .15s ease,background .15s ease} .btn-dark{background:var(--ink);color:var(--on-ink);padding:13px 24px;font-size:15px; box-shadow:0 2px 12px rgba(0,0,0,.16)} .btn-dark:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,0,0,.22)} /* The mark sits a hair above the baseline, the way Apple sets it on their own download buttons; optically centred rather than box centred. */ .btn .apple{width:1em;height:1em;margin-right:.12em;position:relative;top:-.06em;flex:0 0 auto} .btn-sm .apple{width:.95em;height:.95em} .btn-sm{padding:9px 17px;font-size:13.5px} /* ── hero ──────────────────────────────────────────────────────────── */ .hero{padding-top:190px;padding-bottom:0;text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600; color:var(--text-2);margin-bottom:26px} .hero h1{font-size:clamp(44px,7.4vw,86px);margin-bottom:22px} .hero h1 em{font-style:normal;color:var(--green)} .hero p.sub{font-size:clamp(16px,1.7vw,19px);color:var(--text-2);max-width:560px; margin:0 auto 32px;line-height:1.55;font-weight:400} /* Ink at 60%, not the sage muted token: with the hero washes gone this row sits directly on green hills, and a sage grey on green is invisible. The dark CTA section keeps its own colour. */ .micro{margin-top:16px;font-size:12.5px;color:rgba(10,10,10,.6);display:flex;gap:30px; justify-content:center;flex-wrap:wrap} /* ── mac frame ─────────────────────────────────────────────────────── */ .stage{margin-top:66px;position:relative} .stage::before{content:"";position:absolute;inset:8% 10% 0;border-radius:50%; background:radial-gradient(ellipse at center,rgba(132,204,22,.16),transparent 68%); filter:blur(50px);z-index:0} /* MacBook, not a slab: the lid needs a chin and a base or it reads as a tablet. */ .mac{position:relative;z-index:1;max-width:920px;margin:0 auto} .lid{background:#1C1C1E;border-radius:17px 17px 5px 5px;padding:9px 9px 13px; box-shadow:0 40px 80px -22px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.07)} .base{position:relative;width:112%;margin-left:-6%;height:13px; background:linear-gradient(#d3d4d8 0%,#b3b4b9 38%,#8e8f95 100%); border-radius:2px 2px 11px 11px; box-shadow:0 12px 22px -8px rgba(0,0,0,.35)} /* The 12% overhang is wider than the page gutter below about 1030px, and pushed the page into a sideways scroll. */ @media(max-width:1040px){.base{width:104%;margin-left:-2%}} .base::after{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%); width:98px;height:7px;background:linear-gradient(#9a9ba1,#babbc0); border-radius:0 0 7px 7px} /* Desktop wallpaper, drawn rather than shipped: the references lean on real photography, but an external image is a licence question we do not need. */ /* Desktop wallpaper. Drawn as an inline SVG rather than shipped as a file: it is four gradients and three curves, so a data URI costs less than a request and cannot drift out of step with the palette. Two crossing ridges instead of parallel bands, because parallel bands read as stripes; lit from the top right, matching where the light comes from in the hero photograph. */ .screen{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10.1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='base' x1='.1' y1='0' x2='.55' y2='1'%3E%3Cstop offset='0' stop-color='%231B5638'/%3E%3Cstop offset='.45' stop-color='%23123F2A'/%3E%3Cstop offset='1' stop-color='%23072115'/%3E%3C/linearGradient%3E%3CradialGradient id='sun' cx='.8' cy='.02' r='.85'%3E%3Cstop offset='0' stop-color='%23ECFCCB' stop-opacity='.72'/%3E%3Cstop offset='.28' stop-color='%23BEF264' stop-opacity='.34'/%3E%3Cstop offset='.62' stop-color='%2384CC16' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='%2384CC16' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='r1' x1='0' y1='0' x2='1' y2='.25'%3E%3Cstop offset='0' stop-color='%233F7A2E' stop-opacity='.42'/%3E%3Cstop offset='.5' stop-color='%2384CC16' stop-opacity='.62'/%3E%3Cstop offset='1' stop-color='%23D9F99D' stop-opacity='.44'/%3E%3C/linearGradient%3E%3ClinearGradient id='r2' x1='0' y1='0' x2='1' y2='.15'%3E%3Cstop offset='0' stop-color='%2312492E' stop-opacity='.92'/%3E%3Cstop offset='.62' stop-color='%231C6B3C' stop-opacity='.78'/%3E%3Cstop offset='1' stop-color='%232F8C4A' stop-opacity='.6'/%3E%3C/linearGradient%3E%3ClinearGradient id='r3' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23072115' stop-opacity='.96'/%3E%3Cstop offset='1' stop-color='%230C3020' stop-opacity='.9'/%3E%3C/linearGradient%3E%3ClinearGradient id='lit' x1='.05' y1='0' x2='.95' y2='0'%3E%3Cstop offset='0' stop-color='%23ECFCCB' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%23ECFCCB' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23ECFCCB' stop-opacity='.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1440' height='900' fill='url(%23base)'/%3E%3Crect width='1440' height='900' fill='url(%23sun)'/%3E%3Cpath d='M0 452 C 290 372 600 486 880 402 C 1110 334 1300 380 1440 330 L1440 900 L0 900 Z' fill='url(%23r1)'/%3E%3Cpath d='M0 452 C 290 372 600 486 880 402 C 1110 334 1300 380 1440 330' fill='none' stroke='url(%23lit)' stroke-width='3'/%3E%3Cpath d='M0 636 C 240 548 470 664 770 596 C 1030 538 1250 596 1440 540 L1440 900 L0 900 Z' fill='url(%23r2)'/%3E%3Cpath d='M0 806 C 300 742 560 806 830 764 C 1090 724 1270 758 1440 730 L1440 900 L0 900 Z' fill='url(%23r3)'/%3E%3C/svg%3E") center/cover no-repeat,#0C3020} /* Corner falloff. A real display is never evenly lit, and without this the Dock's glass edge disappears into the wallpaper at the bottom centre. */ .screen::before{content:"";position:absolute;inset:0;z-index:1; background: radial-gradient(120% 60% at 50% 112%, rgba(4,16,10,.26), transparent 64%), radial-gradient(70% 55% at -10% 104%, rgba(4,16,10,.20), transparent 62%), radial-gradient(70% 55% at 110% 100%, rgba(4,16,10,.18), transparent 62%)} /* soft grain keeps the gradient from banding on wide displays */ .screen::after{content:"";position:absolute;inset:0;z-index:2;opacity:.16; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode:overlay;pointer-events:none} .notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:19px; background:#0D0D0F;border-radius:0 0 11px 11px;z-index:7} .menubar{position:absolute;top:0;left:0;right:0;height:25px;z-index:6; background:rgba(255,255,255,.13);backdrop-filter:blur(20px); display:flex;align-items:center;justify-content:flex-end;gap:15px; padding:0 13px;font-size:11px;color:#fff} .menubar .kiiwi{background:rgba(255,255,255,.28);border-radius:5px;padding:2px 5px; display:inline-flex;align-items:center} /* The flat build, which is what the real menu bar draws at this size. */ .menubar .kiiwi img{width:13px;height:13px;display:block} /* The app menu, rebuilt from the real one. The screen is 902px standing in for a 1440pt display, so a 250pt macOS menu belongs at ~157px. This lands at 172: near enough to true scale that the menu reads as a menu bar drop-down rather than a window, while keeping the type above the size where it turns to mush. Everything inside is scaled with it, or the box shrinks and the rows do not. */ .appmenu{position:absolute;top:28px;right:14px;width:196px;z-index:8; background:rgba(250,250,248,.92);backdrop-filter:saturate(180%) blur(30px); border:.5px solid rgba(26,46,5,.12);border-radius:9px;padding:4px; box-shadow:0 18px 42px rgba(26,46,5,.22);font-size:10.5px;color:#1A2E05;text-align:left} .appmenu .status{padding:3px 9px 5px;font-size:9.5px;color:#8A9576;font-weight:500} .appmenu .row{display:flex;align-items:center;gap:7px;padding:4px 9px;border-radius:4px} .appmenu .row .tick{color:var(--green);font-weight:700;font-size:9.5px;width:8px} .appmenu .mi{width:11px;height:11px;fill:currentColor;color:#6B7A54;flex:none} .appmenu .row{padding-left:6px} .menubar .mbi{width:12px;height:12px;fill:currentColor} .appmenu .row .sp{margin-left:auto;color:#8A9576;font-size:9.5px} .appmenu .sep{height:.5px;background:rgba(26,46,5,.13);margin:4px 7px} .appmenu .vol{display:flex;align-items:center;gap:7px;padding:5px 9px} .appmenu .track{flex:1;height:3px;border-radius:2px;background:rgba(26,46,5,.16);position:relative} .appmenu .fill{position:absolute;inset:0;background:var(--green);border-radius:2px} .appmenu .knob{position:absolute;left:calc(100% - 7px);top:50%;width:15px;height:12px; transform:translate(-50%,-50%);background:linear-gradient(#fbfbfd,#d6d6dc); border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,.45)} .appmenu .pct{font-size:9.5px;color:#8A9576;font-variant-numeric:tabular-nums} /* ── section headings ──────────────────────────────────────────────── */ /* Section rhythm. Every section opening with the same centred kicker/headline/ subtitle is what makes a page read as generated, so centring is now reserved for the two places it is actually right: the hero, and the closing call to action. Everything in between alternates. */ .head{text-align:center;margin-bottom:56px} .head-left{text-align:left;margin-bottom:48px;max-width:660px} .head.head-left p{margin-left:0;margin-right:0;text-align:left} /* Numbers sit on a tinted band, which breaks the run of white sections without adding another layout. On the tint the cards lose their chrome and become typography with a rule above, which suits measured figures. */ /* A second, quieter band so white sections never run three deep. */ #try{background:#F4F4F0} #how .dive{gap:14px 40px} #how .dv{background:transparent;border:0;border-top:1px solid rgba(26,46,5,.16); border-radius:0;padding:20px 0 0} #how .dv .num{color:var(--green-dark)} .specs .faq{max-width:none;margin:0} .head .kicker,.specs-aside .kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--green-dark);margin-bottom:14px} .head h2{font-size:clamp(30px,4.3vw,50px);margin-bottom:14px} .head p{color:var(--text-2);font-size:17px;max-width:520px;margin:0 auto;font-weight:400} /* ── pack browser ──────────────────────────────────────────────────── */ .tabs{display:flex;gap:6px;justify-content:center;margin-bottom:30px;flex-wrap:wrap} .tab{padding:8px 17px;border-radius:var(--r-pill);border:1px solid var(--hairline); background:var(--card);font-family:inherit;font-size:13.5px;font-weight:600; cursor:pointer;color:var(--text-2);transition:.15s} .tab:hover{color:var(--ink)} .tab.on{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} .packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px} .pack{display:flex;align-items:center;gap:12px;padding:13px 15px;background:var(--card); border:1px solid var(--hairline);border-radius:15px;cursor:pointer;text-align:left; font-family:inherit;transition:.16s ease;width:100%} .pack:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08); border-color:#00000022} .pack.playing{border-color:var(--green);box-shadow:0 0 0 3px rgba(132,204,22,.14)} .cap{width:26px;height:26px;border-radius:7px;flex:none;position:relative; box-shadow:inset 0 -2px 0 rgba(0,0,0,.16),0 1px 2px rgba(0,0,0,.14)} .cap::after{content:"";position:absolute;inset:0;margin:auto;width:11px;height:11px; background: linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)) center/3px 11px no-repeat, linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)) center/11px 3px no-repeat} .pack .meta{min-width:0;flex:1;display:flex;flex-direction:column} .pack .nm{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pack .sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--muted);margin-top:1px} .play{width:25px;height:25px;border-radius:50%;flex:none;background:#0000000a; display:grid;place-items:center;transition:.15s} .pack:hover .play{background:var(--green);color:#fff} .play svg{width:9px;height:9px} /* ── features ──────────────────────────────────────────────────────── */ /* Editorial two-column list, not a card grid. The uniform grid of icon cards is the single most generic pattern on a software landing page; a numbered list with hairlines reads as a spec sheet someone wrote, which is what it is. */ .specs{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:64px;align-items:start} .specs-aside{position:sticky;top:96px} .specs-aside h2{font-size:clamp(28px,3.6vw,42px);line-height:1.06;letter-spacing:-.035em;margin-bottom:16px} .specs-aside p{color:var(--text-2);font-size:15.5px;line-height:1.6;font-weight:400} .specs-aside .pip{margin-top:40px;width:88px;height:88px} .spec{display:grid;grid-template-columns:44px 1fr;gap:20px; padding:22px 0;border-top:1px solid var(--hairline)} .spec:first-child{border-top:0;padding-top:0} .spec .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted); letter-spacing:.02em;padding-top:3px;font-variant-numeric:tabular-nums} .spec h3{font-size:17px;font-weight:650;margin-bottom:7px;letter-spacing:-.022em} .spec p{font-size:14.5px;color:var(--text-2);line-height:1.62;font-weight:400;max-width:60ch} .spec .tag,.g9 .tag{display:inline-block;margin-left:9px;font-family:var(--mono);font-size:10.5px; font-weight:600;letter-spacing:.04em;color:var(--green);vertical-align:2px} @media(max-width:860px){ .specs{grid-template-columns:1fr;gap:36px} .specs-aside{position:static} .specs-aside .pip{display:none} } .feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px} .feat{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card); padding:26px} .feat .ic{width:36px;height:36px;border-radius:10px;background:rgba(132,204,22,.12); display:grid;place-items:center;margin-bottom:15px;font-size:17px} .feat h3{font-size:16.5px;font-weight:700;margin-bottom:7px;letter-spacing:-.02em} .feat p{font-size:14px;color:var(--text-2);line-height:1.55;font-weight:400} /* ── typing test ───────────────────────────────────────────────────── */ .pad{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card); padding:44px 30px;text-align:center;cursor:text} .pad.live{border-color:var(--green);box-shadow:0 0 0 4px rgba(132,204,22,.12)} .keys{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-bottom:22px} .k{width:38px;height:38px;border-radius:8px;background:#00000008; border:1px solid var(--hairline);display:grid;place-items:center;font-size:12px; font-weight:600;color:var(--text-2);font-family:var(--mono);transition:.06s} .k.hit{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(2px)} .pad .hint{font-size:13.5px;color:var(--muted)} .counter{font-family:var(--mono);font-size:13px;color:var(--text-2);margin-top:14px} .counter b{color:var(--green-dark);font-variant-numeric:tabular-nums} /* ── cta + footer ──────────────────────────────────────────────────── */ .cta{text-align:center;background:var(--ink);color:var(--on-ink);border-radius:30px; padding:88px 30px;margin:0 24px} .cta h2{font-size:clamp(32px,4.6vw,54px);margin-bottom:16px;color:#fff} .cta p{color:#A3A3A3;font-size:17px;margin-bottom:32px;font-weight:400} .cta .btn-dark{background:var(--on-ink);color:var(--ink)} .cta .micro{color:#6E6E70} /* Every keycap face lifts a touch under the pointer. */ .kface.hov:not(.down){transform:translateY(-2px) rotate(-4deg)} .pip.kface,.pc-app .kface{transition:transform .12s ease-out} footer{border-top:1px solid var(--hairline);padding:34px 0;margin-top:110px} footer .in{display:flex;justify-content:space-between;align-items:center; font-size:13px;color:var(--muted);flex-wrap:wrap;gap:12px} footer a{text-decoration:none} /* Not the buttons: they are links too, and ink on ink is invisible text. */ footer a:not(.btn):hover{color:var(--ink)} /* ── the Dock inside the screen ────────────────────────────────────── */ /* Bottom-centred and floating, the way Ventura onwards draws it. The icons are 34px because that is what the menu's 12px type implies at this scale: any bigger and the Dock, not the menu, becomes the subject of the picture. */ .dock{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);z-index:5; display:flex;align-items:flex-end;gap:9px;padding:7px 9px; background:rgba(255,255,255,.17);backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px); border:.5px solid rgba(255,255,255,.22);border-radius:15px; box-shadow:0 10px 26px rgba(6,26,16,.34)} .dock img{width:34px;height:34px;display:block;border-radius:7px} /* Kiiwi's own mark is the last icon and the only one with a running dot, since the section's whole claim is that this is the app you are looking at. */ .dock .dk-sep{width:.5px;align-self:stretch;background:rgba(255,255,255,.28);margin:2px 2px} /* The Dock's one control. Bare button so the icon keeps the Dock's metrics. */ .dock .dk-app{padding:0;border:0;background:none;cursor:pointer;line-height:0; border-radius:7px;transition:transform .16s ease} .dock .dk-app:hover{transform:translateY(-4px)} .dock .dk-app:focus-visible{outline:2px solid #ECFCCB;outline-offset:3px} .dock .dk-app[aria-expanded="true"]{transform:translateY(-4px)} /* Quill's card, anchored above the Dock inside the screen. */ /* display:flex below would otherwise beat the [hidden] attribute's display:none (same specificity, this rule comes later), so hidden would set the attribute and change nothing on screen. Same fix as .share[hidden] and .sheet[hidden]. */ .qcard[hidden]{display:none} .qcard{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:6; display:flex;align-items:flex-start;gap:11px;width:250px;padding:12px 14px; background:rgba(250,250,248,.94);backdrop-filter:saturate(180%) blur(30px); -webkit-backdrop-filter:saturate(180%) blur(30px); border:.5px solid rgba(26,46,5,.12);border-radius:12px;text-align:left; box-shadow:0 20px 46px rgba(6,26,16,.4)} .qcard img{width:38px;height:38px;border-radius:8px;flex:none} .qcard b{display:block;font-size:12.5px;color:#1A2E05;letter-spacing:-.01em} .qcard p{margin-top:3px;font-size:11.5px;line-height:1.45;color:#5A6650} /* The little pointer down at the icon it belongs to. */ .qcard::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px; transform:translateX(-50%) rotate(45deg);background:rgba(250,250,248,.94); border-right:.5px solid rgba(26,46,5,.12);border-bottom:.5px solid rgba(26,46,5,.12)} .dock .dk-on{position:relative} .dock .dk-on::after{content:"";position:absolute;left:50%;bottom:-5px; transform:translateX(-50%);width:3px;height:3px;border-radius:50%; background:rgba(255,255,255,.8)} .sp-more{font-size:11px;color:var(--muted);padding:4px 10px 8px} /* ── stats band ────────────────────────────────────────────────────── */ .band{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline); padding:38px 0} .band .in{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px; text-align:center} .band b{display:block;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em} .band span{font-size:12.5px;color:var(--muted);margin-top:5px;display:block} /* ── annotated menu walkthrough ────────────────────────────────────── */ .walk{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center; margin-top:72px} /* Once the walkthrough stacks, its menu card lands right under the MacBook showing the same menu, so it goes; the numbered notes carry the section. */ @media(max-width:860px){.walk{grid-template-columns:1fr;gap:36px}} .walk .shot{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card); padding:34px;display:grid;place-items:center} /* After .walk .shot on purpose: same specificity, so source order decides. */ @media(max-width:860px){.walk .shot{display:none}} .walk .appmenu{position:static;width:100%;max-width:280px} .notes{display:flex;flex-direction:column;gap:0} .note{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid var(--hairline)} .note:last-child{border-bottom:0} .note .n{width:24px;height:24px;flex:none;border-radius:50%;background:var(--ink);color:var(--on-ink); display:grid;place-items:center;font-size:11.5px;font-weight:700} .note h3{font-size:15.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px} .note p{font-size:13.5px;color:var(--text-2);line-height:1.6;font-weight:400} /* ── live map ──────────────────────────────────────────────────────── */ .live-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px} .live-top .head{margin-bottom:0;max-width:820px} .live-dim{color:var(--muted)} .kicker .live-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green); margin-right:8px;vertical-align:1px;animation:livePulse 2s ease-in-out infinite} @keyframes livePulse{50%{opacity:.35}} .live-stat{font-size:15px;color:var(--text-2);font-variant-numeric:tabular-nums;text-align:right;line-height:1.5} .live-stat b{color:var(--ink);font-size:24px;font-weight:800;letter-spacing:-.02em} .live-stat b:nth-of-type(2){font-size:15px;font-weight:700} .live-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card); padding:28px 28px 20px;box-shadow:0 30px 60px -40px rgba(26,46,5,.25)} .live-map canvas{display:block;width:100%} .live-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:18px} .live-you{font-size:14px;color:var(--text-2)} .live-you b{color:var(--ink);font-weight:650} .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px} .live-key{display:flex;gap:6px 16px;flex-wrap:wrap;list-style:none;font-size:13px;color:var(--text-2)} .live-key i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px} .live-key b{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums} .live-key li.lead{color:var(--ink);font-weight:600} .live-key li.lead::after{content:"leads";margin-left:6px;padding:1px 7px;border-radius:99px;font-size:11px; font-weight:700;background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)} .live-country{text-align:center;font-size:14px;color:var(--text-2);margin-top:18px;text-wrap:balance} .live-country b{color:var(--ink);font-weight:650} .live-country a,.live-rank{color:var(--green);font-weight:600;text-decoration:none} .live-top3{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px} .live-top-i{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .live-top-i i{font-style:normal;font-size:11px;font-weight:700;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--hairline);color:var(--text-2)} .live-top-i:first-child i{background:var(--green);color:#fff} .live-note{display:block;margin-top:8px} .live-top-i em{font-style:normal;color:var(--green);font-weight:650} /* One slot under the map: the latest thocks while people are typing, the busiest cities when it goes quiet. livemap.js sets .live-active. */ .live-feed{list-style:none;padding:0;margin:18px 0 0;display:none;font-size:14px;color:var(--text-2)} #live.live-active .live-feed{display:block} #live.live-active .live-top3,#live.live-active .live-country .live-note{display:none} .live-feed li{display:flex;justify-content:center;align-items:center;line-height:1.9} .live-feed li:first-child{animation:feedIn .5s ease-out} .live-feed b{color:var(--ink);font-weight:650} .live-feed time{margin-left:8px;font-size:12px} .live-feed .live-note{display:block;text-align:center;margin-top:8px} @keyframes feedIn{from{opacity:0;transform:translateY(-6px)}} @media (prefers-reduced-motion:reduce){.live-feed li:first-child{animation:none}} @media (max-width:640px){.live-card{padding:16px 12px 14px}.live-stat{text-align:left}} @media (prefers-reduced-motion:reduce){.kicker .live-pulse{animation:none}} /* ── category explainers ───────────────────────────────────────────── */ .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px; margin-top:58px;margin-bottom:34px} .cat{background:var(--card);border:1px solid var(--hairline);border-radius:15px;padding:20px} .cat .top{display:flex;align-items:center;gap:9px;margin-bottom:8px} .cat .dot{width:9px;height:9px;border-radius:50%} .cat h4{font-size:14.5px;font-weight:700;letter-spacing:-.02em} .cat .ct{margin-left:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums} .cat p{font-size:13px;color:var(--text-2);line-height:1.55;font-weight:400} /* The card is the tab. Selected state has to survive a colour-blind reader, so it is a border, a lift and a tint, not just the dot that was always there. */ .cat{cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%; transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease} .cat:hover{border-color:rgba(101,163,13,.34);transform:translateY(-1px)} .cat[aria-pressed="true"]{border-color:rgba(101,163,13,.55); background:linear-gradient(180deg,rgba(236,252,203,.5),var(--card)); box-shadow:0 1px 0 rgba(101,163,13,.18),0 6px 18px -12px rgba(20,40,10,.4)} .cat[aria-pressed="true"] .ct{color:var(--ink);font-weight:600} .cat:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* now-playing strip */ .now{display:flex;align-items:center;gap:14px;background:var(--card); border:1px solid var(--hairline);border-radius:var(--r-pill);padding:11px 18px; margin:0 auto 26px;max-width:520px;opacity:0;transition:opacity .25s} .now.on{opacity:1} .now .nm{font-size:14px;font-weight:600;white-space:nowrap} .now .desc{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis; white-space:nowrap;flex:1} /* ── deep dive ─────────────────────────────────────────────────────── */ .dive{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} .dv{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card); padding:28px} .dv .num{font-family:var(--mono);font-size:30px;font-weight:700;letter-spacing:-.04em; color:var(--green-dark);margin-bottom:10px} .dv h3{font-size:16px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em} .dv p{font-size:13.5px;color:var(--text-2);line-height:1.6;font-weight:400} /* ── playground extras ─────────────────────────────────────────────── */ .padtop{display:flex;justify-content:space-between;align-items:center;gap:14px; margin-bottom:24px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2); background:#00000008;border:1px solid var(--hairline);border-radius:var(--r-pill); padding:6px 13px;font-weight:500} .chip b{color:var(--ink);font-weight:600} .toggle{cursor:pointer;user-select:none} .toggle.on{background:var(--green);border-color:var(--green);color:#fff} .toggle.on b{color:#fff} .sample{font-family:var(--mono);font-size:15px;color:var(--muted);margin-bottom:22px; letter-spacing:.01em} .sample b{color:var(--ink);font-weight:500} .stats3 div{text-align:center} .stats3 b{display:block;font-family:var(--mono);font-size:20px;color:var(--ink); font-variant-numeric:tabular-nums} .stats3 span{font-size:11.5px;color:var(--muted)} .pad{text-align:center} /* ── typing test ───────────────────────────────────────────────────── */ /* Sans and large, following the Keeby reference. The old mono at 20px in #A9A9A3 was the problem: untyped text sat too close to the background to read, so the word you were on looked like it had vanished. */ .words{font-family:var(--sans);font-size:clamp(23px,2.6vw,32px);line-height:1.6; letter-spacing:-.015em;font-weight:500; color:#A6AA9C;max-width:860px;margin:0 auto 30px;text-align:left; min-height:150px;user-select:none} .words w{display:inline-block;margin-right:.42em} /* The word you are on is brand green, so it never blends into the ground the way a grey-on-grey highlight did. :not() rather than source order, so a typed character inside the current word still reads as typed. */ .words w.cur c:not(.ok):not(.bad){color:var(--green)} /* Green text alone was not enough: one green word among a page of greenish grey does not read as "you are here". The pill does. */ .words w.cur{font-weight:650;background:rgba(132,204,22,.18); border-radius:8px;box-shadow:0 0 0 4px rgba(132,204,22,.18)} .words c.ok{color:var(--ink)} .words c.at{color:var(--green)} .words c.bad{color:#DC2626;text-decoration:underline;text-decoration-thickness:1.5px} .words w.cur{position:relative} /* ── Hero click target ─────────────────────────────────────────────────── */ .clickme{background:none;border:0;padding:0;cursor:pointer;display:flex; flex-direction:column;align-items:center;gap:2px;margin:0 auto 26px} .cm-key{width:92px;height:92px;transition:transform .09s ease-out,rotate .25s ease-out,translate .25s ease-out} .clickme:active .cm-key,.cm-key.down{transform:translateY(4px) scale(.95)} .cm-arrow{width:172px;height:auto;opacity:.72;pointer-events:none} .thocks{font-size:13px;color:var(--muted);white-space:nowrap;margin-right:2px;flex:0 0 auto} .thocks b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums; display:inline-block;min-width:7ch;text-align:right} @media(max-width:860px){.thocks{display:none}} /* ── Typing test chrome ──────────────────────────────────────────────────── Label and live stats on one line above the words, switch picker and restart on one line below the board. The point is that everything you need is on the page: no trial, no sign in, no app required to hear the pick of them. */ .padhead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px} .padlabel{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-2)} .padlabel img{width:30px;height:30px;flex:0 0 auto;transition:transform .07s ease-out} .padlabel img.down{transform:translateY(2px) scale(.94)} .padstats{display:flex;gap:26px;align-items:baseline} .padstats span{font-size:12.5px;color:var(--muted)} .padstats b{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink); margin-right:5px;font-variant-numeric:tabular-nums} /* Width is set in kbFit to match the board, so Switches sits under its left edge and Share/Restart under its right, whatever the board scales to. */ .padfoot{display:flex;align-items:center;justify-content:space-between;gap:16px; margin:26px auto 0;width:100%} /* Switch picker */ .switchpick{position:relative;display:flex;align-items:center;gap:12px} .sp-label{font-size:14px;color:var(--text-2)} .sp-btn{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--hairline); border-radius:var(--r-pill);padding:9px 14px 9px 10px;font:600 14px var(--sans);color:var(--ink); cursor:pointer;box-shadow:0 1px 2px rgba(26,46,5,.05)} .sp-btn:hover{border-color:#0000001f} /* Swatches are keycaps, so they get the Cherry MX cross stem the app draws on them. currentColor is set per swatch from the pack colour's luminance, so the stem stays visible on both a black Ink and a cream POM. */ .sw{position:relative} .sw::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px; background: linear-gradient(currentColor,currentColor) center/2px 7px no-repeat, linear-gradient(currentColor,currentColor) center/7px 2px no-repeat; opacity:.55} .sp-btn .sw{width:17px;height:17px;border-radius:5px;display:block;flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .sp-caret{width:13px;height:13px;color:var(--muted);flex:0 0 auto} .sp-menu{position:absolute;bottom:calc(100% + 10px);left:62px;z-index:40;width:290px; max-height:330px;overflow-y:auto;background:var(--card);border:1px solid var(--hairline); border-radius:16px;box-shadow:0 18px 44px -16px rgba(26,46,5,.28);padding:7px} .sp-group{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; color:var(--muted);padding:11px 12px 5px} .sp-item{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0; padding:9px 12px;border-radius:10px;font:500 14px var(--sans);color:var(--ink);cursor:pointer;text-align:left} .sp-item:hover{background:#1A2E050A} .sp-item[aria-selected="true"]{background:var(--pastel);font-weight:650} .sp-item .sw{width:17px;height:17px;border-radius:5px;flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .restart{display:flex;align-items:center;gap:7px} .restart svg{width:14px;height:14px} /* Audio menu */ .audiomenu{position:relative} .am-btn{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer; font:600 14px var(--sans);color:var(--text-2);padding:7px 4px} .am-btn:hover{color:var(--ink)} .am-btn svg{width:15px;height:15px} .am-caret{width:12px;height:12px} .am-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:60;width:310px; background:var(--card);border:1px solid var(--hairline);border-radius:16px; box-shadow:0 18px 44px -16px rgba(26,46,5,.28);padding:5px} .am-row{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;border-radius:12px} .am-row+.am-row{border-top:1px solid var(--hairline)} .am-row:hover{background:#1A2E050A} .am-row>svg{width:17px;height:17px;color:var(--text-2);flex:0 0 auto} .am-row span{flex:1;display:flex;flex-direction:column;gap:2px} .am-row b{font-size:14px;font-weight:650} .am-row i{font-style:normal;font-size:12.5px;color:var(--muted);line-height:1.35} /* A real checkbox, restyled, so it stays keyboard reachable and announced. */ .am-row input{appearance:none;width:40px;height:23px;border-radius:999px;background:#D9D9D2; position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s} .am-row input:checked{background:var(--ink)} .am-row input::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px; border-radius:50%;background:#fff;transition:transform .15s} .am-row input:checked::after{transform:translateX(17px)} /* Zen mode: everything but the pad steps out of the way. */ body.zen{overflow:hidden} body.zen .nav{background:transparent;box-shadow:none;border-color:transparent} body.zen .nav .link,body.zen .nav .btn,body.zen .nav .brand{display:none} body.zen>section:not(#try),body.zen .band,body.zen footer{display:none} body.zen #try{position:fixed;inset:0;z-index:30;background:var(--ground); display:flex;align-items:center;padding:0;overflow:auto} body.zen #try .head{display:none} body.zen #try .wrap{width:100%} .zen-exit{display:none} body.zen .zen-exit{display:block;position:fixed;top:18px;left:22px;z-index:70; font-size:12.5px;color:var(--muted)} /* Desktop only. The panel is 310px wide and right-aligned to a button sitting mid-pill, so on a phone it hangs off the left edge and clips its own labels. Zen mode is also meaningless there, since the typing test it full-screens is itself hidden below this width. */ @media(max-width:760px){.audiomenu{display:none}} /* ── result and share ─────────────────────────────────────────────────── */ /* No card behind the test. The reference sits the numbers, the text and the board straight on the page ground, and the white panel was only ever there to make the old grey type readable. */ .pad{background:none;border:0;border-radius:0;padding:34px 0 0;box-shadow:none} .pad.live{border:0;box-shadow:none} .result{display:none;gap:clamp(40px,7vw,96px);justify-content:center;align-items:flex-start; margin:10px 0 54px;text-align:center} .pad.done .result{display:flex} .pad.done .words{display:none} /* The reference clears everything above the numbers: no hint, no live counters, just the score. Anything else competes with the one thing you came back for. */ .pad.done .padhead{display:none} .result b{display:block;font-size:clamp(72px,11vw,150px);font-weight:800; letter-spacing:-.06em;line-height:.84;font-variant-numeric:tabular-nums;color:var(--ink)} .result i{font-style:normal;color:#9AA48C} .result > div > span{display:block;font-size:14px;color:var(--muted);margin-top:20px} .padacts{display:flex;align-items:center;gap:10px} .share[hidden]{display:none} .share{display:flex;align-items:center;gap:7px;background:var(--ink);color:var(--on-ink); border:0;border-radius:var(--r-pill);padding:9px 20px;font-family:inherit; font-size:13px;font-weight:600;cursor:pointer} .share svg{width:14px;height:14px} .share:hover{opacity:.86} .padcta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:-30px 0 40px;text-align:center} .padcta[hidden]{display:none} .padcta p{font-size:16px;color:var(--ink);margin:0} .padcta a{text-decoration:none;font-size:15px;padding:11px 24px} .padcta small{font-size:13px;color:var(--muted)} .sheet[hidden]{display:none} .sheet{position:fixed;inset:0;z-index:90;display:flex;align-items:center; justify-content:center;padding:24px;background:rgba(26,46,5,.42); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .sheet-in{display:flex;flex-direction:column;align-items:center;gap:16px;max-height:100%} #card{width:auto;height:auto;max-height:74vh;max-width:min(92vw,440px); border-radius:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)} .sheet-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .sheet-acts .btn{padding:11px 20px;font-size:14px} .btn-x{background:#000;color:#fff;display:inline-flex;align-items:center;gap:8px} .btn-x:hover{opacity:.85} .btn-x .chev{opacity:.65} /* ── Mobile ──────────────────────────────────────────────────────────────── Two sections are removed rather than shrunk, because shrinking them would be worse than not having them: The menu bar section. A laptop rendered at 340px is a picture of a laptop, not a product shot, and its whole job is showing the menu in situ. Hearing the switches is still covered on a phone: the hero card plays them and its chip rail switches between them, which is why the list inside the Mac can go now and could not before. The typing test. A physical keyboard is the entire premise, and on a phone the on-screen keyboard covers the words you are meant to be reading. */ @media(max-width:760px){ section{padding:44px 0} .wrap{padding:0 20px} .hero{padding-top:130px} /* The Mac, the switch list and the now-playing bar all live in here. */ #menu{display:none} /* The hero's second CTA, "Hear it first". It pointed at #packs, which is the next thing a thumb reaches anyway, and the hero card it used to sit beside is itself hidden at this width. Scoped to the hero: .btn-ghost is the share sheet's Close button too. */ .hero .ctarow .btn-ghost{display:none} /* #menu is gone on a phone, so #features' 140px lead-in stacks on top of #packs' own padding and reads as a dead screen. Same for #faq under the pricing card. The tempo rules below are for the desktop rhythm. */ .head{margin-bottom:34px} /* The spec strip. Four figures stacked two by two is a screen of numbers between the hero and the first real claim, and every one of them is said again where it belongs: the packs in the library, the size and the latency in the features list. */ .band{display:none} /* The typing test needs a keyboard the phone does not have. */ #try{display:none} .nav a.link[href="#try"]{display:none} footer li:has(a[href="#try"]){display:none} .cm-key{width:74px;height:74px} .cm-arrow{width:138px} .result{gap:32px} .stats5{gap:18px} .cols{grid-template-columns:1fr 1fr;gap:28px} } @media(max-width:420px){ .cols{grid-template-columns:1fr} .micro{gap:16px;font-size:11.5px} .btn{padding:12px 20px} } /* ── Keyboard ────────────────────────────────────────────────────────────── Layout, geometry and Mint colourway follow Keyb by Himan (keyb.himan.me), a Keychron K2 inspired component. That one is React and Tailwind; this is the same construction in plain DOM so it drops into a static page. The depth is not a shadow. Each key is a 50px base in the variant colour at 80% alpha, with a 37px top face inset 6.5px on each side, plus two hairlines rotated 70deg forming the side bevels. Keys butt together with no gap, so what reads as a metal plate is really the bases showing around the faces. Rows overlap by 4px, which is what tucks them into each other. */ .kb-wrap{display:flex;justify-content:center;margin:24px auto 4px} .kb-scale{transform-origin:top center} /* The board is built by script; reserve its scaled box (828x308) so nothing below jumps. */ .kb-wrap{aspect-ratio:828/308;max-height:308px} /* Colourway: every colour on the board is a variable on .kb-case, set per switch by kbTheme(), so picking a sound repaints the board in one place. */ .kb-case{--case:#1d1f22;--plate:#0b0c0d;--kl:#EEEEEE;--kl-fg:#447B82;--kd:#447B82;--kd-fg:rgba(255,255,255,.72); --ka:#86C8AC;--ka-fg:rgba(255,255,255,.92); background:linear-gradient(180deg,color-mix(in srgb,var(--case) 88%,#fff),var(--case) 30%,color-mix(in srgb,var(--case) 82%,#000)); border:1px solid color-mix(in srgb,var(--case) 70%,#000);padding:12px;border-radius:18px;width:fit-content; box-shadow:0 1px 0 color-mix(in srgb,var(--case) 60%,#fff) inset,0 10px 0 -2px color-mix(in srgb,var(--case) 70%,#000), 0 30px 50px -24px #0006;transition:background .35s,border-color .35s,box-shadow .35s} .kb-plate{background:var(--plate);border:1px solid #0008;border-radius:8px 8px 5px 5px;overflow:hidden;transition:background .35s} .kb-key.v-l{--k:var(--kl);--kf:var(--kl-fg)} .kb-key.v-d{--k:var(--kd);--kf:var(--kd-fg)} .kb-key.v-a{--k:var(--ka);--kf:var(--ka-fg)} .kb-key .kb-base{background:color-mix(in srgb,var(--k) 78%,#000);transition:height .1s,background .35s} /* Top-lit, slightly dished face: the highlight is what makes it read as a sculpted cap rather than a flat tile. */ .kb-key .kb-face{background:linear-gradient(180deg,color-mix(in srgb,var(--k) 86%,#fff),var(--k) 55%,color-mix(in srgb,var(--k) 92%,#000)); color:var(--kf);box-shadow:0 1px 0 color-mix(in srgb,var(--k) 70%,#fff) inset;transition:height .1s,background .35s,color .35s} .kb-rows{border-radius:5px;overflow:hidden} .kb-row{display:flex;margin-top:-4px} /* The overlap tucks each row under the one above it; the first row has nothing above it, so the lift only clipped the function keys. */ .kb-row:first-child{margin-top:0} .kb-key{height:50px;padding:0;border:0;background:none;display:flex;align-items:flex-end; cursor:pointer;touch-action:none;-webkit-appearance:none} .kb-key:focus{outline:none} .kb-base{position:relative;overflow:hidden;height:50px;border-radius:12px 12px 4px 4px; border:1px solid rgba(0,0,0,.4);display:flex;align-items:flex-start;justify-content:center; transition:height .1s} .kb-key.on .kb-base{height:45px} .kb-face{position:relative;z-index:1;height:37px;border-radius:6px; border:1px solid rgba(0,0,0,.4);border-top:0;font:500 9px/1.1 var(--sans); display:flex;flex-direction:column;align-items:center;justify-content:space-between; padding:4px;gap:2px;user-select:none;transition:height .1s} .kb-bevel{position:absolute;z-index:0;bottom:0;height:1px;width:32px;background:rgba(0,0,0,.3); transition:transform .1s} .kb-bevel.r{right:0;transform:translateX(14px) rotate(70deg)} .kb-bevel.l{left:0;transform:translateX(-14px) rotate(-70deg)} .kb-key.on .kb-bevel.r{transform:translateX(14px) rotate(60deg)} .kb-key.on .kb-bevel.l{transform:translateX(-14px) rotate(-60deg)} .kb-face .g{font-size:12px} .kb-face svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .padface{display:flex;align-items:center;gap:12px} /* The keycap depresses on every keystroke, the mark doing the thing the app does. Swapping the whole SVG would flash on first paint, so both frames are preloaded and only opacity changes. */ .padface #mascot{width:52px;height:52px;flex:0 0 auto;transition:transform .07s ease-out} .padface #mascot.down{transform:translateY(3px) scale(.94)} .words c.at{border-left:2px solid var(--green);margin-left:-2px;animation:blink 1s step-end infinite} @keyframes blink{50%{border-color:transparent}} /* No margin-top. It is a leftover from when Restart was a standalone centred button below the stats, and inside the flex row it pushed Restart 11px below Switches and Share. align-items:center cannot undo a margin. */ .restart{background:none;border:1px solid var(--hairline); border-radius:var(--r-pill);padding:9px 20px;font-family:inherit;font-size:13px; font-weight:600;color:var(--text-2);cursor:pointer;transition:.15s; display:flex;align-items:center;gap:7px;line-height:1} .restart:hover{color:var(--ink);border-color:#00000026} .stats3{display:flex;gap:34px;justify-content:center;margin-top:22px;flex-wrap:wrap} /* ── faq ───────────────────────────────────────────────────────────── */ .faq{max-width:760px;margin:0 auto} .qa{border-bottom:1px solid var(--hairline)} .qa summary{cursor:pointer;list-style:none;padding:21px 0;font-size:16px;font-weight:600; letter-spacing:-.02em;display:flex;align-items:center;gap:14px} .qa summary::-webkit-details-marker{display:none} /* Ask AI row under the FAQ. The icons carry the brand colour, the words stay quiet, so it reads as a row of options rather than six loud buttons. */ .ask-ai{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:26px;font-size:13.5px} .ask-k{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .ask-ai a{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);text-decoration:none;font-weight:500} .ask-ai a:hover{color:var(--ink)} .ask-ai svg{width:14px;height:14px;color:var(--c)} .ask-sep{width:1px;height:14px;background:var(--hairline)} .qa summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--muted); font-weight:400;transition:transform .2s} .qa[open] summary::after{transform:rotate(45deg)} .qa p{padding:0 0 21px 0;font-size:14.5px;color:var(--text-2);line-height:1.65; font-weight:400;max-width:640px} .qa p+p{margin-top:-9px} .qa code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink); background:rgba(26,46,5,.06);padding:2px 6px;border-radius:5px;overflow-wrap:anywhere} /* The author photo. Drop a square crop at assets/brand/author.jpg and it appears in the story byline and the footer credit. Until then both show a quiet circle rather than a broken image. */ .av{display:inline-block;border-radius:50%;background:rgba(20,40,10,.1) center/cover no-repeat; background-image:url("assets/brand/author.jpg");flex:0 0 auto} /* ── footer ────────────────────────────────────────────────────────── */ footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px} @media(max-width:760px){footer .cols{grid-template-columns:1fr;gap:30px}} /* Sentence case headings in ink over quieter links, every link flush under its heading. margin and padding are set in full because the standing pages give bare h3 and ul their own spacing, which leaked in as a 20px link indent. */ footer h3{font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--ink); margin:0 0 15px;white-space:nowrap} footer ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0} footer li a{font-size:13.5px;color:var(--text-2);text-decoration:none;white-space:nowrap} footer li a .ext{font-size:11px;margin-left:4px;opacity:.7} footer li a:hover{color:var(--ink)} footer .ft-credit .av{width:22px;height:22px;vertical-align:-6px;margin-right:7px} .byline .av{width:38px;height:38px} footer .blurb{font-size:13.5px;color:var(--text-2);line-height:1.6;max-width:280px; font-weight:400;margin-top:11px} @media(max-width:640px){.hero{padding-top:140px}} /* ── video bleed: hero and footer ──────────────────────────────────── */ /* One pattern used twice. A media plate at the back, then scrims that are doing all the design work, then content above them. The scrims are what make photography usable behind text: without them this is a hero with a legibility problem and a wordmark nobody can read. */ .bleed{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .bleed-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* Hero art sits 10px higher than the box. Done by moving the box and growing it back, not object-position: the source and the box are near enough the same ratio that cover leaves no vertical slack to pan into. The extra 10px of height keeps the bottom edge covered so no ground shows through. */ .hero .bleed-media{top:-10px;height:calc(100% + 10px)} .scrim{position:absolute;inset:0} /* 88px, not 150: .hero-copy below already centres the copy inside calc(100vh - 260px), which adds ~69px above it on a normal window, so 150 double-counted the breathing room and left twice the space above the mascot that the reference sites use. 88 lands the nav-to-mascot gap at ~81px. Do not go lower: on a window too short for the centring the slack clamps to 0 and this padding is the only thing holding the mascot off the nav (88 leaves ~12px there, 80 leaves 4). */ .hero{position:relative;overflow:hidden;padding-top:88px;padding-bottom:96px;text-align:center} /* Ends the section without a seam: the photo dissolves into the page colour rather than stopping at an edge. */ .hero .scrim-page{top:auto;height:34%;background:linear-gradient(180deg,rgba(247,247,244,0) 0%,var(--ground) 100%)} .hero-in{position:relative;z-index:2} .hero h1{font-size:clamp(44px,6.4vw,84px);line-height:1.04;letter-spacing:-.03em;margin-bottom:20px} .hero p.sub{font-size:clamp(16px,1.5vw,20px);max-width:720px;color:#0A0A0A9E; line-height:1.55;margin:0 auto 26px} /* ── sound signature card ──────────────────────────────────────────── */ .sig{margin-top:54px;text-align:left;border-radius:22px;overflow:hidden; background:rgba(255,255,255,.68);backdrop-filter:saturate(160%) blur(13px); -webkit-backdrop-filter:saturate(160%) blur(13px); box-shadow:0 30px 70px rgba(10,10,10,.17),inset 0 1px 0 rgba(255,255,255,.7)} .sig-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px; padding:22px 28px 20px} .sig-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;color:#0A0A0A57;margin-bottom:7px} .sig-name-row{display:flex;align-items:center;gap:11px;flex-wrap:wrap} .sig-name-row h2{font-size:27px;font-weight:800;letter-spacing:-.026em;line-height:1.1} .sig-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px; border-radius:var(--r-pill);background:rgba(101,163,13,.14)} .sig-tag i{width:6px;height:6px;border-radius:50%;background:var(--green)} .sig-tag b{font-size:12px;font-weight:700;color:#3F6212} .sig-note{margin-top:7px;font-size:13.5px;color:#0A0A0A9E;line-height:1.5;max-width:640px} .sig-play{flex:0 0 auto;width:52px;height:52px;border:0;border-radius:50%;cursor:pointer; background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:0 10px 26px rgba(10,10,10,.22);transition:transform .12s ease-out} .sig-play svg{width:19px;height:19px;margin-left:2px} /* The button becomes a key display while the preview runs: the black cap shows the letter being struck, in the brand green, so the sound stops being blind. */ .sig-key{display:none;font-size:19px;font-weight:800;line-height:1; color:var(--green-bright);font-family:var(--sans)} .sig-play.keying svg{display:none} .sig-play.keying .sig-key{display:block} .sig-key.hit{animation:keypop .18s ease-out} @keyframes keypop{0%{transform:scale(1.45);opacity:.55}100%{transform:scale(1);opacity:1}} .sig-play:hover{transform:scale(1.05)} .sig-play:active{transform:scale(.94)} .sig-play.playing{transform:scale(.94)} .sig-wave{display:flex;align-items:center;justify-content:space-between;height:172px; padding:0 28px;overflow:hidden} .sig-wave i{flex:0 0 4px;border-radius:var(--r-pill); background:rgba(10,10,10,.18);transition:background .12s} .sig-wave i.on{background:var(--green)} .sig-rule{height:1px;background:rgba(10,10,10,.07)} .sig-metrics{display:flex;padding:0 28px} .sig-metrics>div{flex:1;padding:20px 0 22px 22px;border-left:1px solid rgba(10,10,10,.07)} .sig-metrics>div:first-child{padding-left:0;border-left:0} .sig-metrics b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em} .sig-metrics span{display:block;margin-top:5px;font-size:12.5px;color:#0A0A0A9E} /* ── switch chip rail ──────────────────────────────────────────────── */ .rail{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px} .rail button{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:0; padding:9px 15px;border-radius:var(--r-pill);background:rgba(255,255,255,.64); font:inherit;font-size:13px;font-weight:600;color:#0A0A0AC7; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 18px rgba(10,10,10,.05)} .rail button i{width:9px;height:9px;border-radius:2px;flex:0 0 auto} .rail button.on{background:var(--ink);color:var(--on-ink);font-weight:700} /* ── footer: video bleed ───────────────────────────────────────────── */ footer{position:relative;overflow:hidden;border-top:0;margin-top:110px; padding:56px 0 0;min-height:780px} footer .ft-v{background:linear-gradient(180deg,rgba(247,247,244,.92) 0%,rgba(247,247,244,.42) 46%,rgba(247,247,244,.06) 100%)} footer .ft-h{background:linear-gradient(90deg,rgba(247,247,244,.84) 0%,rgba(247,247,244,.18) 50%,rgba(247,247,244,.56) 100%)} .ft-in{position:relative;z-index:2;display:flex;gap:56px;align-items:flex-start} .ft-intro{width:380px;flex:0 0 auto} .ft-head{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.06; margin:26px 0 14px;max-width:360px} footer .blurb{max-width:360px;margin:0} .ft-cta{margin-top:26px} .ft-credit{margin-top:34px;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted)} .ft-credit a{color:var(--text-2)} footer .cols{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:0} footer .cols li{font-size:13.5px;color:var(--text-2)} .ft-feat{margin-top:28px} .ft-feat-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .ft-feat-view{max-width:220px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)} .ft-feat-track{display:flex;width:max-content;animation:ft-feat-scroll 18s linear infinite} .ft-feat-view:hover .ft-feat-track{animation-play-state:paused} .ft-feat-set{display:flex;gap:32px;padding-right:32px;align-items:center} .ft-feat-set>a>img{display:block;height:48px!important;width:auto!important;max-width:none!important;max-height:none!important} .ft-feat-set>a[href*="justhunt.co"]{zoom:.7} @keyframes ft-feat-scroll{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ft-feat-track{animation:none}.ft-feat-set[aria-hidden]{display:none}.ft-feat-view{-webkit-mask-image:none;mask-image:none}} /* Oversized, crushed line-height, cropped by the footer. The bleed off three edges is the effect; a wordmark that fits inside the box is just a word. */ /* Aligned to the content column, not the viewport, so it reads as the footer's own signature rather than a stray graphic. */ .ft-wordmark{position:absolute;left:50%;transform:translateX(-50%); width:1080px;max-width:100%;padding:0 24px;box-sizing:border-box;bottom:-7%;z-index:1; font-size:clamp(140px,29vw,420px);font-weight:900;letter-spacing:-.05em;line-height:.76; color:rgba(10,10,10,.92);user-select:none;pointer-events:none} @media(max-width:1080px){ /* Below this the intro and four columns cannot share a row without the columns squeezing their links onto two lines, so the intro goes on top. The comment sits inside the block: sync-footer.py matches on selector text, and a comment in front of @media hid this rule from it. */ .ft-in{flex-direction:column;gap:44px} .ft-intro{width:100%} footer .cols{width:100%} /* The wordmark scales with the viewport (29vw at .76 line height), so the room kept for it has to as well, or it lands on the last row of links. */ footer{min-height:0;padding-bottom:max(120px,24vw)} } @media(max-width:900px){ /* No scrim override here on purpose: the footer wash is the desktop one at every width. The old override held .88 to 62% depth, which stacked with .ft-h left the top of the footer 99% washed and the meadow showing only in the last fifth. Dropping .ft-h as well went too far the other way: with no horizontal wash the video ran unwashed at the left edge, where desktop takes it to .84, and read as a darker footer than the desktop one. Both scrims are therefore inherited: .ft-v .92/.42/.06 down, .ft-h .84/.18/.56 across. Only the type colours below are phone-specific, and those cost the artwork nothing. */ footer li a,footer .ft-credit{color:var(--ink)} .ft-wordmark{bottom:-4%} } @media(max-width:760px){ /* One column, not two. Two columns of three or four links each put four headings in a 2x2 block that reads as a table of contents; stacked, each group is a heading with its links under it, which is the shape the reference footers use and the shape a thumb scrolls past. */ footer .cols{grid-template-columns:1fr;gap:30px;width:100%} /* 10px clear of where the 900px rule puts it. */ .ft-wordmark{bottom:calc(-4% + 10px)} .hero{padding-top:70px;padding-bottom:64px} /* No subheading on a phone: the headline already says it, and dropping it lifts the button and the requirements row clear of the flowers. */ .hero p.sub{display:none} /* The headline alone moves up 10px: the negative top margin lifts it, the larger bottom margin gives the space straight back, so the button and the requirements row stay exactly where they were. */ .hero h1{margin-top:-10px;margin-bottom:28px} /* One line under the button, not three. The macOS version and the architecture are both in the footer's Requirements column; on a phone they were two rows of small grey type sitting in the flowers. */ .micro{margin-top:14px;font-weight:500} .micro span+span{display:none} /* How far #what climbs into the hero's tail. The scrim below is sized from the same number, so the fade always ends exactly where that section's background begins. Change this one value, not the two rules. */ :root{--hero-pull:150px} /* The meadow moves down, the copy stays. The photo is cover-fitted to the section, so its grass sits at the section's bottom edge: growing the bottom padding drops that edge below the headline instead of behind it, and the art stays at full strength rather than being washed out to make room. Was 64px. Every copy element keeps its exact y position. 285 is measured, not guessed: the grass edge sits at 60.2% of the photo's box, so grass-y = 0.602 x (408 + padding) - 10. 150 cleared the headline but left the price line on moss; 285 puts the edge at ~408, ten px under the last line of copy. */ .hero{padding-bottom:285px} /* The seam under the hero. --ground is rgb(247,247,244) and #what is rgb(244,244,240), and the spec band that used to sit between them is display:none at this width, so the fade landed on a 3-value step against the next section and read as a line. Ends on #what's own colour instead. The fade is sized to the overlap and lands exactly on #what's top edge, so the two backgrounds meet at identical colour with nothing flat in between. Bottom-anchored at the pull distance and the same height as it: fully transparent where #what's edge is still 150px away, solid #F4F4F0 the pixel it arrives. That is a 150px ramp where the old version had 77px and then a flat sliver, which is what read as an edge. Stops approximate ease-in-out rather than a straight line. A linear alpha ramp over this distance bands visibly on a phone: the eye picks up the constant rate of change as a boundary of its own. */ .hero .scrim-page{top:auto;bottom:var(--hero-pull);height:var(--hero-pull); background:linear-gradient(180deg,rgba(244,244,240,0) 0%, rgba(244,244,240,.06) 18%,rgba(244,244,240,.22) 36%, rgba(244,244,240,.5) 54%,rgba(244,244,240,.78) 72%, rgba(244,244,240,.94) 88%,#F4F4F0 100%)} /* Overlapping the hero's tail rather than shortening it. The padding down there is what holds the meadow edge below the price line; shrinking it by 150 would put grass back at y=317, above the button. position/z-index are load-bearing, not tidying. .hero is position:relative and this section is static, so the hero's bleed painted over anything in the overlap: at -50px that clipped the top of the kicker, and at -150px it would swallow the heading whole. */ #what{position:relative;z-index:1;margin-top:calc(-1 * var(--hero-pull))} /* No pill on a phone, and no thock counter: a phone can read the count but can't type to move it. The header is the logo on the left and Buy on the right, plain on the page, and it scrolls away with it. */ .nav{position:absolute;top:18px;left:0;right:0;transform:none;width:auto; padding:0 16px;gap:0;justify-content:space-between; background:none;border:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} .nav a.link,.nav .thocks{display:none} .nav .btn{padding:8px 15px;font-size:13.5px;gap:6px} .nav .btn .apple{width:13px;height:13px} .nav .nb-more{display:none} /* Hero and footer keep their backdrops, video included. */ .sig-wave{height:120px} .sig-metrics{flex-wrap:wrap} .sig-metrics>div{flex:1 0 44%;padding-left:18px} .sig-metrics>div:nth-child(3){padding-left:0;border-left:0} .sig-head{flex-direction:row;padding:18px 20px 16px} .sig-wave,.sig-metrics{padding-left:20px;padding-right:20px} } /* ── tempo ─────────────────────────────────────────────────────────── */ /* Every section 110px apart reads as a list, not a page. A claim and the evidence for it sit close; a new idea gets air in front of it. */ #menu{padding:150px 0 64px} #try{padding:64px 0 140px} #features{padding:140px 0 64px} #faq{padding:140px 0 110px} /* Tablets: the desktop tempo above left 220-260px of empty page between sections, which on a 768-1024px screen is most of a screenful. Same rhythm, about 60% of the air. Phones have their own rules below. */ @media(min-width:761px) and (max-width:1080px){ section{padding:64px 0} #menu{padding:80px 0 40px} #try{padding:40px 0 80px} #features{padding:80px 0 40px} #faq{padding:80px 0 64px} } /* The desktop tempo above is measured against #menu and #try, both of which a phone does not get. Left alone, #features opened with a 140px lead-in directly under the pack list and read as a dead screen. These have to sit after the rules they override: same specificity, so source order decides. */ @media(max-width:760px){ #packs{padding-bottom:40px} #features{padding:40px 0 44px} #pricing{padding:44px 0 40px} #faq{padding:40px 0 40px} #download{padding-top:44px} } /* One section at a different measure, so the page has a quiet passage rather than seven variations of the same 1080px column. */ /* 87 characters a line, measured. Comfortable reading tops out around 75. */ .specs .faq .qa p{max-width:62ch} /* ── the hero card is cut by the fold ──────────────────────────────── */ /* The pull downward comes from the card being interrupted, not from arrows telling people to scroll. Copy centres in whatever is left above it, so the crop happens at any window height rather than only on a laptop. */ @media(min-width:761px){ .hero-copy{min-height:calc(100vh - 260px);display:flex;flex-direction:column; align-items:center;justify-content:center} .sig{margin-top:0} } /* ── hero typeface ─────────────────────────────────────────────────── */ /* Self-hosted, not the Google Fonts link. Two files served from our own origin beat a render-blocking stylesheet plus a second DNS lookup, and the page keeps its property of making zero third-party requests. Latin subset only: the headline is four words. Both faces are OFL. */ @font-face{font-family:"Inter Display";src:url(assets/fonts/inter-800-latin.woff2) format("woff2"); font-weight:800;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212} @font-face{font-family:"Instrument Serif";src:url(assets/fonts/instrument-serif-italic-latin.woff2) format("woff2"); font-weight:400;font-style:italic;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212} /* Metrics from the comp, expressed as ratios so they survive the clamp: 88px / 106px line / -3.4px tracking, and the serif line at 92px / 106% / -1.5px. Tracking in em, because -3.4px on a 44px phone headline is a pile-up. */ .hero h1{font-family:"Inter Display",var(--sans);font-weight:800; font-size:clamp(40px,6.7vw,88px);line-height:1.205;letter-spacing:-.0386em} .hero h1 em{display:block;font-family:"Instrument Serif",Georgia,"Times New Roman",serif; font-style:italic;font-weight:400;font-size:1.045em;line-height:1.06; letter-spacing:-.0163em;color:var(--green)} /* The waveform is a control, not a picture: click it to hear that moment. */ /* Clickable: the x axis is the preview's timeline, so clicking part way along starts the sound there. Bars rest neutral and fill green as it plays. */ .sig-wave{cursor:pointer} /* Zen mode leaves two items in a full width bar, which left them hugging the left edge. Centre what remains. */ /* The pill is padded 20px on the left for the brand and 9px on the right for the button. With both hidden that asymmetry offsets what is left, so even the padding out. */ body.zen .nav{justify-content:center;padding-left:9px} /* ══ merged-page additions ═════════════════════════════════════════════ Structure comes from the v2 comp, skin and every figure from this page. Nothing here introduces a second design system: all of it is built from the tokens at the top of the file. */ /* ── hero: state pill + two CTAs ───────────────────────────────────── */ .ctarow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* Used by the share sheet's Close button too, which had no rule at all. */ .btn-ghost{background:rgba(255,255,255,.72);color:var(--ink);padding:13px 22px; font-size:15px;border:1px solid var(--hairline); -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px)} .btn-ghost:hover{background:#fff;transform:translateY(-1px)} .btn-ghost .pl{width:.8em;height:.8em;flex:0 0 auto} /* No checkout provider yet, so BUY_URL is empty and these lose their href. Better to look unavailable than to look live and do nothing. */ .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;box-shadow:none} .btn[aria-disabled="true"]:hover{transform:none;box-shadow:none} .micro b{font-weight:700;color:var(--ink)} /* ── the library: all 36, grouped by feel ──────────────────────────── */ .groups{display:flex;flex-direction:column;gap:40px;margin-top:34px} position:relative;top:-1px} /* One grid for every group, so a 9-pack family and an 18-pack family line up on the same column rhythm instead of each picking its own. */ .grp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px} .grp-more{display:inline-block;margin-top:16px;font-size:13px;color:var(--text-2); text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:2px; transition:color .14s ease,border-color .14s ease} .grp-more:hover{color:var(--ink);border-color:var(--ink)} /* Full switch names are the point of this section, so the name gets the slack and the waveform gives it up. "SteelSeries Apex Pro TKL" was ellipsised. */ .grp-list .pk{grid-template-columns:11px minmax(0,1fr) 66px 30px} .sig-list{display:none} /* ── the numbers, folded into Features ─────────────────────────────── */ .numbers{margin-top:86px;padding-top:52px;border-top:1px solid var(--hairline)} .num-head{margin-bottom:30px} .num-head h3{font-size:22px;font-weight:800;letter-spacing:-.03em;margin-bottom:7px} .num-head p{font-size:14.5px;color:var(--text-2);font-weight:400} /* ── why this exists ───────────────────────────────────────────────── */ #story{background:var(--pastel)} .said-lede{max-width:560px;margin:0 auto;font-size:16px;line-height:1.55;color:var(--text-2)} .said{columns:3 280px;column-gap:16px} .said figure{break-inside:avoid;margin:0 0 16px;padding:20px 20px 18px;border-radius:var(--r-card); background:var(--card);box-shadow:inset 0 0 0 1px var(--hairline),0 6px 18px rgba(26,46,5,.05)} .said figure.more{display:none} .said.open figure.more{display:block} .said figcaption{display:flex;align-items:center;gap:10px} .said .av{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%; background:#E6E6E0;color:#4A4A4A;font:600 13px var(--mono)} .said .who b{display:block;font:600 13px var(--mono);color:#2B2B2B} .said .who span{display:block;font:12px var(--mono);color:var(--muted)} .said blockquote{margin-top:14px;font-size:15.5px;line-height:1.55;font-style:italic;color:#3A3A3A} .said mark{background:none;color:var(--ink);font-style:normal;font-weight:700;box-shadow:inset 0 -.42em 0 var(--pastel)} .said-all{display:block;margin:20px auto 0;padding:12px 24px;border-radius:var(--r-pill);border:1px solid #D5D8CC; background:var(--card);font:600 15px var(--sans);color:var(--ink);cursor:pointer} .said-all:hover{border-color:var(--ink)} .story p{font-size:16px;line-height:1.7;color:var(--text-2);font-weight:400; margin-bottom:20px;max-width:64ch} .story p b{color:var(--ink);font-weight:650} .byline{display:flex;align-items:center;gap:13px;margin-top:34px;padding-top:26px; border-top:1px solid var(--hairline)} .byline img{width:38px;height:38px;flex:0 0 auto} .byline b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em} .byline span{font-size:13px;color:var(--muted)} /* ── pricing ───────────────────────────────────────────────────────── */ .pcard{max-width:430px;margin:0 auto;background:var(--card); border:1px solid rgba(101,163,13,.4);border-radius:20px;padding:26px 26px 24px; box-shadow:0 1px 0 rgba(101,163,13,.14),0 22px 50px -34px rgba(20,40,10,.5); text-align:center} /* Segmented, not three cards: the only thing that changes is the number. */ .pc-price{display:flex;align-items:baseline;justify-content:center;gap:10px} .pc-price b{font-size:52px;font-weight:800;letter-spacing:-.045em;line-height:1} .pc-price s{font-size:22px;font-weight:600;color:var(--muted);text-decoration-thickness:2px} .pc-once{font-size:13px;color:var(--muted);margin-top:6px} .pc-blurb{font-size:13.5px;color:var(--text-2);line-height:1.55;font-weight:400; margin:14px auto 0;max-width:30ch} .pmile{max-width:600px;margin:0 auto 40px;padding-top:30px} .pm-track{position:relative;display:flex;align-items:center;margin-bottom:16px} .pm-line{position:relative;flex:1;height:6px;margin:0 8px;border-radius:6px; background:rgba(20,40,10,.1)} .pm-fill{position:absolute;inset:0 auto 0 0;width:var(--p);border-radius:inherit; background:var(--green);transition:width .9s cubic-bezier(.2,.8,.2,1)} .pm-me{position:absolute;top:50%;left:var(--p);transform:translate(-50%,-50%); display:flex;transition:left .9s cubic-bezier(.2,.8,.2,1)} .pm-dot.start{width:10px;height:10px;border:0;background:var(--green)} .pm-dot{width:12px;height:12px;border-radius:50%;flex:none; background:var(--card);border:2px solid rgba(20,40,10,.25)} .pm-dot.on{width:16px;height:16px;border:0;background:var(--green); box-shadow:0 0 0 6px rgba(132,204,22,.22);animation:pm-pulse 2.4s ease-in-out infinite} @keyframes pm-pulse{50%{box-shadow:0 0 0 10px rgba(132,204,22,.08)}} .pm-here{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%); white-space:nowrap;padding:4px 10px;border-radius:var(--r-pill);background:var(--ink); color:var(--on-ink);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .pm-here::after{content:"";position:absolute;left:50%;top:100%;margin-left:-4px; border:4px solid transparent;border-top-color:var(--ink)} .pm-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} .pm-row b{display:flex;align-items:center;gap:8px;font-size:40px;font-weight:800; letter-spacing:-.04em;line-height:1} .pm-row small{display:block;margin-top:8px;font-size:11.5px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} #pmSpots{color:var(--green-dark)} .pm-next{text-align:right} .pm-next b{justify-content:flex-end;color:var(--muted);font-weight:700} @media(max-width:520px){.pm-row b{font-size:30px}.pm-row small{font-size:9.5px;letter-spacing:.05em}} @media (prefers-reduced-motion:reduce){.pm-dot.on{animation:none}.pm-fill,.pm-me{transition:none}} /* Phones get "Try free on Mac" in the hero, so a price line under it contradicts the button. Same test as PHONE in the script. */ @media (hover:none) and (pointer:coarse){#heroLaunch{display:none}} #pcTrial{scroll-margin-top:24px} .pc-tax{font-size:12.5px;color:var(--muted);margin-top:14px} .pc-have{font-size:13.5px;color:var(--text-2);margin-top:6px} .pc-have a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .pc-cta{width:100%;justify-content:center;margin-top:20px} .pc-app{display:flex;align-items:center;justify-content:center;gap:10px; margin-bottom:20px;font-size:15px;font-weight:700;letter-spacing:-.02em} .pc-app img{border-radius:7px} .pc-list{list-style:none;text-align:left;margin-top:22px;display:flex; flex-direction:column;gap:11px} .pc-list li{position:relative;padding-left:26px;font-size:13.5px;font-weight:400; color:var(--text-2);line-height:1.5} .pc-list li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px; border-radius:50%;background:rgba(101,163,13,.15); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%23415c1a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:14px;background-position:center;background-repeat:no-repeat} .pc-trial{margin-top:22px;padding-top:20px;border-top:1px solid var(--hairline);text-align:left} .pc-trial-h{font-size:14px;color:var(--text-2);line-height:1.5;margin-bottom:12px} .pc-trial-h b{color:var(--ink)} .pc-trial-row{display:flex;flex-direction:column;gap:10px} .pc-trial input{font:inherit;font-size:16px;padding:12px 14px;border-radius:12px; border:1px solid var(--hairline);background:#fff;color:var(--ink);width:100%} .pc-trial input:focus{outline:2px solid #527EFE;outline-offset:1px} .pc-trial .btn{justify-content:center} .pc-trial-note{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5} .pc-trial-note.err{color:#b42318} .pc-trial.done .pc-trial-row{display:none} .pc-trial.lead{margin-top:20px;padding-top:0;border-top:0} /* On the card the trial is the light option and buying stays the dark one. */ #pcTrial .btn{background:var(--card);color:var(--ink);border:1px solid var(--hairline);box-shadow:none} #pcTrial + .pc-cta{margin-top:12px;width:100%;justify-content:center} .ctarow-m{display:none} @media (hover: none) and (pointer: coarse){.ctarow-m{order:5;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}} .ctarow-m-note{font-size:12.5px;color:var(--muted)} .trial-dlg{margin:auto;border:0;border-radius:20px;padding:28px 22px 22px;width:min(420px,calc(100vw - 32px)); background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.25)} .trial-dlg::backdrop{background:rgba(10,10,10,.45)} .trial-dlg h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 32px 8px 0} .trial-dlg>p{font-size:14.5px;color:var(--text-2);line-height:1.5;margin-bottom:16px} .trial-dlg .pc-trial{margin:0;padding:0;border:0} .trial-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:none; font-size:26px;line-height:1;color:var(--muted);cursor:pointer} .pc-cta.alt{background:none;color:var(--ink);border:1px solid var(--hairline);box-shadow:none;margin-top:12px;width:100%} .pc-fine b{color:var(--text-2);font-weight:600} @media(max-width:860px){ .pcard{padding:22px 20px} } @media(max-width:760px){ .grp-list{grid-template-columns:1fr} .numbers{margin-top:56px;padding-top:38px} /* Sized to its own words rather than stretched to the column. A single full-bleed button on a phone reads as a form submit, not as an invitation, and the hero now has only this one. */ .ctarow{flex-direction:column;align-items:center;margin:0 auto} .ctarow .btn{justify-content:center;width:auto} .pc-cta{width:auto;margin-left:auto;margin-right:auto} } /* ── is / isn't ────────────────────────────────────────────────────── */ /* The tint stops 90px early and dissolves into the page ground. A flat #F4F4F0 ended against #packs, which has no background of its own, so the body's #f7f7f4 met it as a 3-value step and read as a hairline. Same mismatch the hero fade above was taught to avoid, at this section's other edge, and it is not phone-specific: the step is there at every width. */ #what{background:linear-gradient(180deg,#F4F4F0 0%, #F4F4F0 calc(100% - 90px),#f7f7f4 100%)} .isnt{display:grid;grid-template-columns:1fr 1fr;gap:14px} .isnt>div{background:var(--card);border:1px solid var(--hairline); border-radius:var(--r-card);padding:26px 28px} .isnt h3{font-size:15.5px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px} .isnt ul{list-style:none;display:flex;flex-direction:column;gap:12px} .isnt li{font-size:14px;color:var(--text-2);font-weight:400;line-height:1.55; display:flex;align-items:flex-start;gap:11px} .isnt li::before{content:"";width:16px;height:16px;flex:0 0 auto;margin-top:2px; border-radius:50%;background-size:contain;background-repeat:no-repeat} .col-is li::before{background-color:var(--pastel); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%234D7C0F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .col-isnt li::before{background-color:rgba(10,10,10,.06); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.4 5.4l5.2 5.2M10.6 5.4l-5.2 5.2' fill='none' stroke='%23767C6B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")} .oneline{margin-top:26px;text-align:center;font-size:14.5px;font-weight:500; color:var(--ink-warm)} .oneline+*{margin-top:0} /* ── first run ─────────────────────────────────────────────────────── */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .step{background:var(--card);border:1px solid var(--hairline); border-radius:var(--r-card);padding:26px 26px 28px} .step .sn{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--on-ink); display:grid;place-items:center;font-size:12.5px;font-weight:700;margin-bottom:16px} .step h3{font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:9px} .step p{font-size:13.5px;color:var(--text-2);line-height:1.6;font-weight:400} /* ── playground + footer notes ─────────────────────────────────────── */ .padnote{margin-top:14px;font-size:12.5px;color:var(--muted);font-weight:400; max-width:520px;margin-left:auto;margin-right:auto} @media(max-width:860px){ .isnt,.steps{grid-template-columns:1fr} } /* ── compact switch list, phones only ────────────────────────────────── The tall card is three quarters waveform, which is a luxury a 390px screen does not have. Same six packs, same names, one row each: dot, name, family, its waveform, a play control that turns into the key being struck. */ .sig-list{display:none;flex-direction:column;gap:8px;margin-top:18px} /* Grid, not flex: with flex the waveform started wherever the switch name happened to end, so no two rows lined up. */ .pk{display:grid;grid-template-columns:11px minmax(0,1fr) 88px 30px; align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer; border:1px solid var(--hairline);border-radius:14px;padding:11px 12px;font:inherit; background:rgba(255,255,255,.72); -webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px); transition:background .15s,border-color .15s} .pk.on{background:rgba(236,252,203,.9);border-color:rgba(101,163,13,.35)} .pk-dot{width:11px;height:11px;border-radius:3px;flex:0 0 auto} .pk-name{display:flex;flex-direction:column;gap:1px;min-width:0} .pk-name b{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .pk-name em{font-style:normal;font-size:11.5px;color:var(--muted)} .pk-wave{display:flex;align-items:center;justify-content:space-between;height:30px} .pk-wave i{flex:0 0 2px;height:34%;border-radius:1px;background:rgba(10,10,10,.18); transition:background .12s} .pk-wave i.on{background:var(--green)} .pk-play{width:30px;height:30px;border-radius:50%;display:flex; align-items:center;justify-content:center;background:var(--ink);color:var(--on-ink)} .pk-play svg{width:12px;height:12px;margin-left:1px} .pk-play b{display:none;font-size:13px;font-weight:800;color:var(--green-bright);line-height:1} .pk.playing .pk-play svg{display:none} .pk.playing .pk-play b{display:block} .pk-play b.hit{animation:keypop .18s ease-out} @media(max-width:760px){ /* The tall hero card is three quarters waveform, a luxury 390px does not have. On phones the library below carries the same packs as rows. */ .sig,.rail{display:none} } /* ── Stats (1.1) ───────────────────────────────────────────────────── Copy on the left, three real share cards fanned on the right. The cards are rendered by the app itself (ShareCard), not mocked. */ #stats .stats-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center} #stats .head{margin-bottom:28px} .stats-list{list-style:none;display:grid;gap:16px;margin:0;padding:0} .stats-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start} .stats-list .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:var(--pastel);color:var(--green-dark)} .stats-list .ic svg{width:17px;height:17px} .stats-list b{display:block;font-size:15.5px;color:var(--ink);margin-bottom:2px} .stats-list span{color:var(--text-2);font-size:14.5px;line-height:1.5} .stats-note{margin-top:24px;color:var(--muted);font-size:13.5px;display:flex;gap:8px;align-items:center} .stats-note svg{width:14px;height:14px;flex:none} .stats-cards{position:relative;height:440px} .stats-cards img{position:absolute;width:290px;height:auto;border-radius:24px; box-shadow:0 24px 60px -18px #1A2E0566,0 4px 14px -6px #1A2E0533;transition:transform .45s cubic-bezier(.2,.8,.2,1)} .stats-cards .c1{left:0;top:56px;transform:rotate(-8deg)} .stats-cards .c2{left:50%;top:0;transform:translateX(-50%) rotate(0deg);z-index:2} .stats-cards .c3{right:0;top:56px;transform:rotate(8deg)} .stats-cards:hover .c1{transform:rotate(-11deg) translate(-14px,6px)} .stats-cards:hover .c3{transform:rotate(11deg) translate(14px,6px)} .stats-cap{text-align:center;color:var(--muted);font-size:13px;margin-top:8px} @media (max-width:900px){ #stats .stats-grid{grid-template-columns:1fr;gap:28px} .stats-cards{height:350px;max-width:440px;margin:0 auto;width:100%} .stats-cards img{width:220px} } @media (max-width:480px){ .stats-cards{height:270px} .stats-cards img{width:170px;border-radius:18px} } @media (prefers-reduced-motion:reduce){.stats-cards img{transition:none}} .rec-pill{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;padding:4.5px 9px 4.5px 7.5px; border-radius:var(--r-pill);background:var(--card);border:1px solid var(--hairline); font-size:9.75px;font-weight:600;color:var(--ink-warm);box-shadow:0 1px 2px #1A2E050D} .rec-dot{width:6px;height:6px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 2px #E5484D26} /* ── dark mode ───────────────────────────────────────────────────────── Set on by the head script: the visitor's choice from the nav, or their Mac's setting. Tokens first, then the handful of components that were painted with literal light colours. */ :root[data-theme=dark]{ --ground:#111112; --card:#19191B; --ink:#F2F2F0; --text-2:#B4B4AE; --muted:#8E8E89; --hairline:#FFFFFF14; --green:#84CC16; --green-dark:#A3E635; --pastel:#1C1E1A; --ink-warm:#ECECE6; --on-ink:#111112; color-scheme:dark} [data-theme=dark] body{background:linear-gradient(180deg,#151a12 0,rgba(22,33,12,.35) 300px,rgba(22,33,12,0) 760px) no-repeat,var(--ground)} [data-theme=dark] .nav{background:rgba(28,28,30,.66);border-color:#FFFFFF1A; box-shadow:0 10px 34px -8px #0009,0 2px 8px #0005,inset 0 1px 0 #ffffff1a,inset 0 -1px 0 #ffffff0a} [data-theme=dark] .hero p.sub,[data-theme=dark] .sig-note,[data-theme=dark] .sig-metrics span{color:#F2F2F0B8} [data-theme=dark] .hero .scrim-page{background:linear-gradient(180deg,rgba(21,21,23,0) 0%,#151517 100%)} /* The hero photo is a bright meadow; dim it so the copy over it holds up. */ [data-theme=dark] .hero::before{content:"";position:absolute;inset:0;z-index:1;background:#1111128C;pointer-events:none} [data-theme=dark] .sig{background:rgba(28,28,30,.72);box-shadow:0 30px 70px #0008,inset 0 1px 0 #ffffff14} [data-theme=dark] .sig-eyebrow{color:#F2F2F070} [data-theme=dark] .sig-wave i,[data-theme=dark] .pk-wave i{background:#F2F2F02E} /* The played bars: re-stated after the dark base colour, which matched their specificity and came later, so the wave never filled in dark mode. */ [data-theme=dark] .sig-wave i.on,[data-theme=dark] .pk-wave i.on{background:var(--green)} [data-theme=dark] .rail button.on{background:var(--ink);color:var(--on-ink);box-shadow:none} [data-theme=dark] .k.hit{background:var(--green)} [data-theme=dark] .sig-rule{background:#F2F2F012} [data-theme=dark] .rail button{background:rgba(28,28,30,.7);color:#F2F2F0D0;box-shadow:inset 0 1px 0 #ffffff12,0 6px 18px #0004} [data-theme=dark] .appmenu,[data-theme=dark] .qcard,[data-theme=dark] .qcard::after{background:rgba(36,38,34,.94);color:#F2F2F0;border-color:#ffffff1f} [data-theme=dark] .qcard b{color:#F2F2F0} [data-theme=dark] .appmenu .sep{background:#ffffff1f} [data-theme=dark] .appmenu .track{background:#ffffff29} [data-theme=dark] .play,[data-theme=dark] .chip,[data-theme=dark] .k{background:#ffffff0d} [data-theme=dark] .pack:hover{border-color:#ffffff24;box-shadow:0 8px 22px #0006} [data-theme=dark] .sp-item:hover,[data-theme=dark] .am-row:hover{background:#ffffff0d} [data-theme=dark] .sp-btn:hover,[data-theme=dark] .restart:hover{border-color:#ffffff2e} [data-theme=dark] .btn-ghost:hover{background:var(--card)} [data-theme=dark] .qa code{background:#ffffff12} [data-theme=dark] #how .dv{border-top-color:#FFFFFF1F} [data-theme=dark] .col-isnt li::before{background-color:#ffffff12} [data-theme=dark] footer .ft-v{background:linear-gradient(180deg,rgba(17,17,18,.94) 0%,rgba(17,17,18,.5) 46%,rgba(17,17,18,.12) 100%)} [data-theme=dark] footer .ft-h{background:linear-gradient(90deg,rgba(17,17,18,.88) 0%,rgba(17,17,18,.2) 50%,rgba(17,17,18,.6) 100%)} [data-theme=dark] .rec-pill{box-shadow:none} [data-theme=dark] .stats-cards img{box-shadow:0 24px 60px -18px #000c,0 4px 14px -6px #0008} [data-theme=dark] .sheet{background:#000a} [data-theme=dark] .sig-play{background:#F2F2F0;color:#111112;box-shadow:0 10px 26px #0008} [data-theme=dark] .btn-ghost{background:rgba(28,28,30,.72);color:var(--ink);border-color:#ffffff1f} [data-theme=dark] .sig-tag{background:#84CC1626} [data-theme=dark] .sig-tag b{color:#BEF264} [data-theme=dark] body.docked .nav{background:rgba(28,28,30,.7);border-color:#FFFFFF1A; box-shadow:0 14px 40px -10px #000a,0 2px 10px #0006,inset 0 1px 0 #ffffff17,inset 0 -1px 0 #ffffff0a} [data-theme=dark] .pk{background:rgba(28,28,30,.72)} [data-theme=dark] .pk.on{background:#84CC1624;border-color:#84CC1666} /* The light-grey band (#F4F4F0) behind #what and #try, and the seam that fades the hero into it, become a slightly raised dark band. */ [data-theme=dark] #try{background:#151517} [data-theme=dark] .cta{background:linear-gradient(180deg,#1C1E1A,#161618);border:1px solid #FFFFFF1F;color:var(--ink)} [data-theme=dark] .cta h2{color:var(--ink)} [data-theme=dark] .cta .btn-dark{background:var(--ink);color:var(--on-ink)} [data-theme=dark] #what{background:linear-gradient(180deg,#151517 0%,#151517 calc(100% - 90px),var(--ground) 100%)} /* ── theme button in the nav: one round button, Auto → Light → Dark ── */ .theme-btn{width:34px;height:34px;flex:none;border:0;border-radius:50%;cursor:pointer; display:grid;place-items:center;background:transparent;color:var(--text-2);transition:background .15s,color .15s} .theme-btn:hover{background:#1A2E050F;color:var(--ink)} [data-theme=dark] .theme-btn:hover{background:#ffffff14} .theme-btn svg{width:17px;height:17px;grid-area:1/1;display:none} [data-pref=system] .theme-btn .ic-auto,[data-pref=light] .theme-btn .ic-light,[data-pref=dark] .theme-btn .ic-dark{display:block} /* ── the details: bento of clips + icon grid (from the parked v2 design) ── */ .dt-head{text-align:center;margin-bottom:40px} .dt-head .kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:12px} .dt-head h2{font-size:clamp(30px,4.3vw,50px);margin-bottom:12px} .dt-head p{color:var(--text-2);font-size:17px} .bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:750px;margin:0 auto} .cell{display:flex;flex-direction:column;align-items:center;min-height:300px;border-radius:24px; background:#F4F4F5;overflow:hidden;border:1px solid var(--hairline)} .cell video{display:block;width:100%;max-width:368px;aspect-ratio:980/556;object-fit:cover;flex:none} .cell-copy{display:flex;flex-direction:column;gap:7px;padding:0 20px 28px;text-align:center;margin-top:auto} .cell h3{font-size:16.5px;font-weight:650;letter-spacing:-.02em;color:#18181b} .cell p{font-size:13.5px;line-height:1.5;color:rgba(24,24,27,.72);max-width:300px;margin:0 auto} .grid9{display:grid;grid-template-columns:repeat(3,1fr);max-width:1000px;margin:48px auto 0} .g9{padding:28px 26px 30px;border-left:1px solid var(--hairline);border-top:1px solid var(--hairline)} .g9:nth-child(3n+1){border-left:0} .g9:nth-child(-n+3){border-top:0} .g9 svg{width:22px;height:22px;color:var(--green);margin-bottom:14px} .g9 h3{font-size:17px;font-weight:650;letter-spacing:-.015em;margin-bottom:8px;display:flex;align-items:center;gap:8px} .g9 h3 b{font-variant-numeric:tabular-nums} .g9 p{font-size:14.5px;line-height:1.5;color:var(--text-2);max-width:280px} /* The clips are drawn on a light panel, so in dark mode the cells keep that panel as a deliberate lit card rather than fighting the video's edges. */ [data-theme=dark] .cell{background:#F4F4F5;border-color:#ffffff14} @media (max-width:860px){ .bento{grid-template-columns:1fr}.cell{min-height:0}.cell-copy{padding-top:8px} .grid9{grid-template-columns:1fr 1fr} .g9:nth-child(n){border-left:1px solid var(--hairline);border-top:1px solid var(--hairline)} .g9:nth-child(2n+1){border-left:0}.g9:nth-child(-n+2){border-top:0} } @media (max-width:560px){ .grid9{grid-template-columns:1fr} .g9:nth-child(n){border-left:0;border-top:1px solid var(--hairline)}.g9:first-child{border-top:0} } /* ── privacy band ─────────────────────────────────────────────────── */ .pv{position:relative;margin:30px 0 0;padding:110px 24px 100px;text-align:center;color:#fff; background:radial-gradient(70% 60% at 50% 70%,#1d3a0a 0%,#0f1d07 45%,#080d05 100%)} .pv-kicker{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--r-pill); background:rgba(244,244,245,.1);font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85)} .pv h2{margin:20px auto 0;max-width:680px;font-size:clamp(32px,4.4vw,48px);line-height:1.15;letter-spacing:-.03em; background:linear-gradient(0deg,#cfe9a6 0%,#f4f5f2 70%);-webkit-background-clip:text;background-clip:text;color:transparent} .pv-lede{max-width:540px;margin:18px auto 0;font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.8)} .pv-art{position:relative;width:min(640px,100%);height:280px;margin:44px auto 0} .pv-art::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 20% 80%,transparent)} .pv-art::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(transparent,rgba(255,255,255,.16) 20% 80%,transparent)} .pv-frame{position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:26px; background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)} .pv-cap{position:absolute;left:50%;top:50%;width:164px;height:164px;margin:-82px 0 0 -82px;border-radius:30px;display:grid;place-items:center; background:radial-gradient(90% 90% at 70% 20%,#3d6a15,#101a0a 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 60px rgba(143,210,28,.35)} .pv-cap img{width:84px;height:84px;filter:drop-shadow(0 0 18px rgba(160,230,40,.55))} .pv-pts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:960px;margin:40px auto 0;text-align:left} .pv-pts div{padding:18px 18px 16px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .pv-pts b{display:block;font-size:15px;color:#fff;letter-spacing:-.01em} .pv-pts span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.7)} @media (max-width:860px){.pv-pts{grid-template-columns:1fr 1fr}} @media (max-width:480px){.pv-pts{grid-template-columns:1fr}} .pv-foot{margin-top:26px;font-size:15.5px;color:rgba(255,255,255,.75)} .pv-foot a{display:block;margin-top:8px;color:#fff;text-decoration:underline;text-underline-offset:3px} @media (max-width:560px){.pv{padding:80px 20px 72px}.pv-art{height:220px}} /* ── feature list under pricing (from the parked v2 design) ─────────── */ .feats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);max-width:960px;margin:56px auto 0;padding:0} .feats li{display:flex;align-items:center;gap:12px;padding:16px 8px;font-size:15px;color:var(--ink); border-top:1px solid var(--hairline)} .feats li:nth-child(-n+3){border-top:0} .feats svg{width:18px;height:18px;flex:none;color:var(--green)} @media (max-width:760px){.feats{grid-template-columns:1fr 1fr}.feats li:nth-child(3){border-top:1px solid var(--hairline)}} @media (max-width:480px){.feats{gap:0 14px;margin-top:40px}.feats li{font-size:13.5px;padding:13px 2px;gap:9px}.feats svg{width:16px;height:16px}} /* Measured reuses the details grid; a little more air between rows. */ .numbers .dt-head{margin-top:90px} .grid6 .g9 p{max-width:300px} /* ── switch chips under the playground keyboard ─────────────────────── */ .kbpick{text-align:center;margin:22px auto 6px;max-width:820px} .kbpick-hint{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:14px} .kbpick-fam{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:#1A2E050D;border:1px solid var(--hairline);margin-bottom:14px} [data-theme=dark] .kbpick-fam{background:#ffffff0d} .kbpick-fam button{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--text-2); padding:7px 16px;border-radius:var(--r-pill);cursor:pointer;transition:background .15s,color .15s} .kbpick-fam button[aria-selected=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #0000001f} .kbpick-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .kbpick-list button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hairline);background:var(--card); font:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:9px 16px 9px 12px;border-radius:var(--r-pill); cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .1s} .kbpick-list button:hover{border-color:#1A2E0533} [data-theme=dark] .kbpick-list button:hover{border-color:#ffffff33} .kbpick-list button:active{transform:scale(.97)} .kbpick-list button[aria-selected=true]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)} /* The solid keycap swatch the dropdown used: switch colour plus its stem. */ .kbpick-list .sw{width:17px;height:17px;border-radius:5px;flex:none;box-shadow:inset 0 0 0 1px #0000002e} .kbpick-desc{margin-top:14px;font-size:14px;color:var(--text-2);min-height:21px} /* The chips replace the dropdown picker that sat beside Restart. */ .padfoot .switchpick{display:none} .padfoot{justify-content:flex-end} /* ── setup: stacked rows with a stage each (from the parked v2 design) ── */ #setup .head{margin-bottom:64px} .st-row{display:grid;grid-template-columns:minmax(0,340px) minmax(0,416px);justify-content:space-between;align-items:center;gap:48px;margin:0 auto 68px;max-width:820px} .st-row:last-child{margin-bottom:0} .st-row.st-flip{grid-template-columns:minmax(0,416px) minmax(0,340px)} .st-row.st-flip .st-copy{order:2} .st-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px} .st-num{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--r-pill);background:#e2edfc;color:#1f56b0; font-size:13px;font-weight:600;font-variant-numeric:tabular-nums} [data-theme=dark] .st-num{background:#1f2a3d;color:#9cc0ff} .st-copy h3{font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.03em;text-wrap:balance} .st-copy p{font-size:15px;line-height:1.55;color:var(--text-2)} /* The stage: a crisp top-left corner, the right and bottom edges dissolving into the page. */ .st-panel{position:relative;width:100%;aspect-ratio:555/492;border-radius:24px;overflow:hidden;background:var(--tint); -webkit-mask:linear-gradient(90deg,#000 58%,transparent 99%),linear-gradient(180deg,#000 62%,transparent 99%);-webkit-mask-composite:source-in; mask:linear-gradient(90deg,#000 58%,transparent 99%),linear-gradient(180deg,#000 62%,transparent 99%);mask-composite:intersect} .st-flip .st-panel{-webkit-mask:linear-gradient(270deg,#000 80%,transparent 100%),linear-gradient(180deg,#000 62%,transparent 99%);-webkit-mask-composite:source-in; mask:linear-gradient(270deg,#000 80%,transparent 100%),linear-gradient(180deg,#000 62%,transparent 99%);mask-composite:intersect} [data-theme=dark] .st-panel{background:var(--tint-d)} .st-mock{position:absolute;inset:0;display:grid;place-items:center} .st-drag{display:flex;align-items:center;gap:22px} .st-drag img{width:82px;height:82px;filter:drop-shadow(0 18px 24px rgba(40,80,10,.3))} .st-drag i{width:52px;height:2px;background:linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.35));position:relative} .st-drag i::after{content:"";position:absolute;right:-2px;top:-5px;width:10px;height:10px;border-top:2px solid rgba(0,0,0,.35);border-right:2px solid rgba(0,0,0,.35);transform:rotate(45deg)} [data-theme=dark] .st-drag i{background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.4))} [data-theme=dark] .st-drag i::after{border-color:rgba(255,255,255,.4)} .st-fold{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#3f3f46} [data-theme=dark] .st-fold{color:#d4d4d8} .st-fold svg{width:82px;height:82px} .st-perm{width:min(285px,86%);border-radius:12px;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 24px 50px -24px rgba(0,0,0,.35); font:500 13px/1 -apple-system,var(--sans);color:#1d1d1f;overflow:hidden} [data-theme=dark] .st-perm{background:#26262a;color:#f2f2f0;box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 24px 50px -24px #000} .st-perm .st-h5{font-weight:700;padding:13px 14px 10px} .st-perm div{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid rgba(0,0,0,.07)} [data-theme=dark] .st-perm div{border-top-color:rgba(255,255,255,.08)} .st-perm div span{flex:1} .st-perm img{width:22px;height:22px} .st-tg{width:38px;height:22px;border-radius:11px;background:#34c759;position:relative} .st-tg::after{content:"";position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3)} .st-tg.off{background:#dcdcdc} [data-theme=dark] .st-tg.off{background:#4a4a4f} .st-tg.off::after{right:auto;left:2px} .st-typed{font:700 23px/1.2 -apple-system,var(--sans);letter-spacing:-.02em;color:#1d1d1f;display:flex;align-items:center;gap:4px} [data-theme=dark] .st-typed{color:#f2f2f0} .st-typed i{width:3px;height:1em;background:#e5a50a;animation:stcaret 1s steps(1) infinite} @keyframes stcaret{50%{opacity:0}} @media (prefers-reduced-motion:reduce){.st-typed i{animation:none}} @media (max-width:860px){ .st-row,.st-row.st-flip{grid-template-columns:1fr;justify-items:center;gap:30px;margin-bottom:70px} .st-row.st-flip .st-copy{order:0} .st-copy{max-width:520px;width:100%} .st-panel{max-width:416px} .st-copy h3{font-size:24px} } /* Phones: the dissolving edges read as a cropped image at one column, so the stage becomes a plain card, and each step's copy centres over it. */ @media (max-width:760px){ .st-copy{align-items:center;text-align:center} .st-panel,.st-flip .st-panel{-webkit-mask:none;mask:none;aspect-ratio:16/11; border:1px solid var(--hairline)} /* One alignment for every section head: centred, as most already are. Long prose and lists under them stay left, where they read best. */ .head-left,.specs-aside{text-align:center;margin-left:auto;margin-right:auto} .specs-aside .kicker,.head-left .kicker{justify-content:center} .head.head-left p{text-align:center;margin-left:auto;margin-right:auto} } /* ── hero keyboard ──────────────────────────────────────────────────── */ .hero-kb{margin-top:26px} .hero-kb .kb-wrap{margin:0 auto} .hero-kb-line{margin-top:16px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--text-2)} .hero-kb-line a{color:var(--ink);font-weight:650;text-decoration:none} .hero-kb-line a:hover{text-decoration:underline} .hero-kb-line .dotsep{opacity:.5} .sndline{border:0;background:none;font:inherit;color:inherit;padding:0;cursor:default} .sndline.off{cursor:pointer} .sndline b{color:var(--ink);font-weight:650} /* Phones: no keyboard and no switch pills, the hero is the pitch and the button. */ .sig[hidden]{display:none} /* With the sound card gone, the switch chips sit straight under the CTAs. */ .hero .rail{margin-top:44px} .hero .rail{margin-top:0!important} /* ── hero B (compare page) ─────────────────────────────────────────── */ .hero.hero-b{position:relative;overflow:hidden;padding:150px 0 70px;text-align:left;isolation:isolate} .hb-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#e8e2dc; -webkit-mask:linear-gradient(#000 70%,transparent 100%);mask:linear-gradient(#000 70%,transparent 100%)} .hb-bg.novid{background:url(assets/hero-b/tunnel-poster.jpg) center/cover} /* Phones skip the video. The poster is set here rather than by the script's novid class, which runs at the end of the page: it is the largest thing on a phone screen, and waiting for the script cost about 5s of LCP. */ @media (hover: none) and (pointer: coarse){.hb-bg{background:url(assets/hero-b/tunnel-poster.jpg) center/cover}.hb-bg video{display:none}} .hb-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hb-wash{position:absolute;inset:0;background:radial-gradient(60% 55% at 22% 40%,rgba(255,255,255,.78),rgba(255,255,255,.3) 60%,transparent 100%)} [data-theme=dark] .hb-bg{background:#111112} /* Dark: the tunnel loop is a light video, so the wash dims all of it and the bottom fades fully into the page colour, or its bright lower edge shows as a beige band above the next section. */ [data-theme=dark] .hb-wash{background:linear-gradient(180deg,rgba(17,17,18,0) 45%,#111112 96%), radial-gradient(60% 55% at 50% 35%,rgba(17,17,18,.82),rgba(17,17,18,.62) 60%,rgba(17,17,18,.5) 100%)} /* The price line was painted in light-mode ink and vanished on the dark video. */ [data-theme=dark] .micro{color:rgba(242,242,240,.72)} .hb-in{position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:40px;align-items:center} .hb-copy{text-align:left} .hb-copy h1{font-size:clamp(36px,3.7vw,58px);line-height:1.04;letter-spacing:-.035em;margin:4px 0 16px} .hb-copy h1 .nb{white-space:nowrap} .hb-copy .rec-pill{margin-bottom:18px} /* Phones: the pill's claim moves under the headline as plain copy. */ .rec-line{display:none} @media (max-width:760px){ .hb-copy .rec-pill{display:none} .rec-line{display:block;font-size:16px;line-height:1.5;color:var(--text-2);margin:12px auto 22px} } /* Mascot in the copy column, left-aligned with the text, the arrow to its right. */ .hb-copy .hb-mascot{display:flex;align-items:center;gap:6px;margin:0 0 14px -4px;flex-direction:row} .hb-copy .hb-mascot .cm-key{width:76px;height:76px} .hb-copy .hb-mascot .cm-arrow{display:none} /* Order at every width: mascot, headline, sound count, then the proof line above the buttons. */ .hb-copy{display:flex;flex-direction:column;align-items:center} .hb-copy .hb-mascot{order:1} .hb-copy h1{order:2} .hb-copy .sub{order:3} .hb-copy .rec-pill,.hb-copy .rec-line{order:4} .hb-copy .ctarow{order:5} .hb-copy .micro{order:6} @media(min-width:761px){ .hb-copy .hb-mascot{margin:6px auto 28px} .hb-copy .sub{margin-bottom:16px} .hb-copy .rec-pill{margin:0 0 26px} } @media(max-width:760px){ .hero .hb-copy p.sub{display:block;font-size:17px;margin:0 auto 6px} .hb-copy .ctarow,.hb-copy .micro{display:none} .hb-copy .rec-line{display:none} .hb-in{gap:14px} .hero-kb-line .dotsep{display:none} .sub-d{display:none} } @media(min-width:761px){.sub-m{display:none}} @media(max-width:760px){.hero.hero-b{padding-top:125px}} .sig-dd{display:none} .kbm-m{display:none} @media(max-width:760px){ #sigRail.hb-rail{display:none} .kbm-d{display:none}.kbm-m{display:inline} .sig-dd{display:flex;flex-direction:column;align-items:center;margin:4px auto 0} .sig-sel{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;border:1px solid var(--hairline); background:#fffffff2;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.06);outline:none} .sig-sel:focus-visible{box-shadow:0 0 0 2px rgba(26,46,5,.25)} .sig-sel i,.kbdd-list i{width:10px;height:10px;border-radius:3px;flex:none} .sig-sel svg{width:10px;height:10px;margin-left:4px;transition:transform .15s} .sig-sel[aria-expanded=true] svg{transform:rotate(180deg)} /* Opens in the flow, under the pill, so nothing is covered. */ .kbdd-list{margin:8px 0 0;padding:4px;list-style:none;width:min(240px,100%);border-radius:14px;background:#fff; border:1px solid var(--hairline);box-shadow:0 6px 20px -8px rgba(26,46,5,.18)} .kbdd-list[hidden]{display:none} .kbdd-list li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left} .kbdd-list li.on{background:rgba(26,46,5,.07)} } [data-theme=dark] .sig-sel,[data-theme=dark] .kbdd-list{background:var(--card);color:var(--ink)} @media(max-width:760px){ .hb-copy .hb-mascot .cm-arrow{display:block} .hb-copy .hb-mascot{flex-direction:column-reverse;gap:2px;width:fit-content;margin-left:auto;margin-right:auto} .hb-copy .hb-mascot .cm-arrow{width:min(138px,40vw)} } .hb-copy h1 em{display:block;font-style:normal;color:var(--green)} .hb-copy .sub{font-size:18px;line-height:1.5;max-width:460px;margin:0 0 28px;color:var(--text-2)} .hb-copy .ctarow{justify-content:flex-start} .hb-copy .micro{justify-content:flex-start} .hb-stage{position:relative;display:flex;flex-direction:column;align-items:center} .hb-mascot{margin-bottom:0} /* This hero has its own wash; the main page's photo dimmer is not for it. */ [data-theme=dark] .hero.hero-b::before{display:none} .hb-board{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:14px;align-items:start;width:100%} .hb-board .hero-kb{margin:0} .hb-side{padding-top:2px} .hb-label{font-size:12.5px;font-weight:650;color:var(--text-2);margin-bottom:8px} .hb-rail{display:flex;flex-direction:column;gap:6px;margin:0!important;align-items:stretch} .hb-rail button{justify-content:flex-start;padding:7px 11px;font-size:12px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Stacked layout at every width (Tamil's pick, Oct 3). */ .hb-in{grid-template-columns:minmax(0,1fr);gap:36px} .hb-copy{text-align:center}.hb-copy .sub{margin-left:auto;margin-right:auto} .hb-copy .hb-mascot{justify-content:center;margin-left:auto;margin-right:auto} .hb-copy .micro span{text-wrap:balance} .hb-copy .ctarow,.hb-copy .micro{justify-content:center} .hb-board{grid-template-columns:minmax(0,1fr)} .hb-stage{min-width:0;width:100%} .hb-rail{flex-direction:row;flex-wrap:wrap;justify-content:center}.hb-rail button{width:auto} .hb-label{text-align:center} /* Live status line inside an FAQ answer: a soft green pill. */ .qa-status{display:inline-flex;align-items:center;margin:0 0 14px;padding:4px 12px; border-radius:var(--r-pill);background:#84CC161F;color:var(--green-dark);font-size:13px;font-weight:600;line-height:1.4} /* ── "Every row recorded" card: a live keyboard, rows lighting in turn ── */ .rowdemo{width:100%;max-width:368px;aspect-ratio:980/556;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 18px;flex:none} .rd-row{display:grid;grid-template-columns:70px 1fr 40px;align-items:center;gap:6px} .rd-name{font-size:8.5px;font-weight:600;color:#71717a;white-space:nowrap;animation:rdname 10s infinite;animation-delay:calc(var(--i) * 2s)} .rd-keys{display:flex;gap:2px} /* The stagger of a real board: top row half a key in, home three quarters, bottom a key and a quarter. */ .rd-row:nth-child(2) .rd-keys{padding-left:8px} .rd-row:nth-child(3) .rd-keys{padding-left:12px} .rd-row:nth-child(4) .rd-keys{padding-left:20px} .rd-row:nth-child(5) .rd-keys{padding-left:36px} .rd-keys b{flex:0 0 auto;width:14px;height:14px;border-radius:3px;background:#fff;box-shadow:0 1px 0 #0000001f,0 0 0 .5px #0000001a; font:600 6.5px/14px -apple-system,var(--sans);color:#71717a;text-align:center;animation:rdkey 10s infinite;animation-delay:calc(var(--i) * 2s)} .rd-keys b.space{width:96px} .rd-keys b.ret{width:30px} .rd-wave{display:flex;align-items:center;gap:1px;height:14px} .rd-wave i{flex:0 0 1.5px;background:#d4d4d8;border-radius:1px;animation:rdwave 10s infinite;animation-delay:calc(var(--i) * 2s)} @keyframes rdkey{0%,18%{background:#ECFCCB;color:#3F6212;box-shadow:0 1px 0 #65A30D40,0 0 0 .5px #65A30D59}20%,100%{background:#fff;color:#71717a}} @keyframes rdname{0%,18%{color:#3F6212}20%,100%{color:#71717a}} @keyframes rdwave{0%,18%{background:#65A30D}20%,100%{background:#d4d4d8}} @media (prefers-reduced-motion:reduce){.rd-name,.rd-keys b,.rd-wave i{animation:none}}