/* BuffrX main site, on top of site.css (the earlier landing page's styles, kept for privacy, compare, roadmap, questions, pricing and the close).
 * This file sets the main site's own voice: JetBrains Mono for everything, a Waybar-style bar, a split hero, tiled panes that
 * hold the app, and the two feature sections (Timeline, Quick Share) with the animations drawn over them. */

:root {
  --nav: 44px;
  /* the bar sits a touch below the very top edge, so it reads as a strip laid on the page rather than the
     window frame; every offset that measures from the top adds this */
  --nav-top: 6px;
  --display: var(--mono);
  --sans: var(--mono);
  --pane-in: 22px;
  /* a lighter, warmer ground than the app's own near-black, for a page that is read in a room: the app palette lifted a step toward its text colour and a touch toward its accent (light themes keep their own) */
  --ground: light-dark(var(--bx-ground), color-mix(in srgb, var(--bx-ground) 94%, var(--bx-fg)));
  --s1: light-dark(var(--bx-tile), color-mix(in srgb, var(--bx-tile) 91%, var(--bx-fg)));
  --s2: light-dark(var(--bx-raised), color-mix(in srgb, var(--bx-raised) 87%, var(--bx-fg)));
  --s3: color-mix(in srgb, var(--s2) 88%, var(--fg));
  --line: light-dark(var(--bx-line), color-mix(in srgb, var(--bx-line) 78%, var(--bx-fg)));
  --muted: light-dark(var(--bx-muted), color-mix(in srgb, var(--bx-muted) 80%, var(--bx-fg)));
  --glow: 30%; /* how strong the accent glows are; the light themes take less */
}
[data-theme='lobby'], [data-theme='sandstorm'] { --glow: 15%; }
body { font-size: 15px; line-height: 1.7; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); line-height: 1.1; }
h3 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.25; }
.lede { font-size: clamp(1rem, 1.35vw, 1.1rem); line-height: 1.65; }
.claim p, .nevers span { font-size: 14.5px; }
.sec { padding-top: clamp(80px, 10vw, 140px); }

/* ---- the bar: a flat Waybar strip. A filled tag, numbered markers that follow the section in view, the theme swatches, the demo, the download ---- */
.wb { position: fixed; inset: var(--nav-top) 0 auto; z-index: 50; height: var(--nav); display: flex; align-items: stretch; background: color-mix(in srgb, var(--s1) 94%, transparent); border-bottom: 1px solid var(--line); font: 600 13px var(--mono); }
.wb.stuck { backdrop-filter: blur(10px) saturate(1.2); }
.wb-tag { flex: none; display: grid; place-items: center; width: 92px; background: var(--acc); transition: background 200ms; }
.wb-tag:hover { background: color-mix(in srgb, var(--acc) 88%, #fff); }
.wb-tag i { width: 58px; height: 20px; background: var(--on); -webkit-mask: url(buffrx-logo.svg) center / contain no-repeat; mask: url(buffrx-logo.svg) center / contain no-repeat; }
.wb-tabs { position: relative; display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.wb-tabs::-webkit-scrollbar { display: none; }
.wb-tabs a { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--muted); text-decoration: none; white-space: nowrap; transition: color 200ms, background 200ms; }
.wb-tabs a b { color: var(--muted); font-weight: 700; transition: color 200ms; }
.wb-tabs a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.wb-tabs a[aria-current='true'] { color: var(--fg); }
.wb-tabs a[aria-current='true'] b { color: var(--acc-t); }
.wb-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--ink-w, 0); transform: translateX(var(--ink-x, 0)); background: var(--acc); transition: transform 520ms var(--ease), width 520ms var(--ease); }
.wb-grow { flex: 1; }
.wb-themes { flex: none; display: flex; align-items: center; gap: 6px; margin-left: 6px; padding: 0 14px; border-left: 1px solid var(--line); }
.th { display: grid; place-items: center; width: 34px; height: 26px; border: 1px solid transparent; background: transparent; transition: border-color 200ms, background 200ms; }
.th .sw3 { grid-template-columns: repeat(3, 7px); height: 14px; }
.th:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.th[aria-checked='true'] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); }
.wb-ico { flex: none; display: grid; place-items: center; width: 40px; color: var(--muted); transition: color 200ms, background 200ms; }
.wb-ico:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.wb-link { flex: none; display: grid; place-items: center; padding: 0 16px; color: var(--muted); text-decoration: none; transition: color 200ms, background 200ms; }
.wb-link:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.wb-dl { flex: none; display: grid; place-items: center; padding: 0 20px; background: var(--acc); color: var(--on); font-weight: 700; text-decoration: none; transition: background 200ms, transform 260ms var(--ease); }
.wb-dl:hover { background: color-mix(in srgb, var(--acc) 88%, #fff); }
.wb-dl.lean, .btn.lean { transform: translate(var(--lx, 0), var(--ly, 0)); }
.wb :focus-visible { outline-offset: -3px; }

/* ---- the hero: the words on the left, the app on the right ---- */
.hero { display: grid; grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; max-width: 1280px; margin: 0 auto; padding: calc(var(--nav) + clamp(40px, 6vw, 84px)) 24px 0; text-align: left; overflow: visible; }
.hero::before { content: none; }
.hero h1 { margin: 0; font-size: clamp(2.2rem, 4.6vw, 4.2rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1.02; text-align: left; }
.hero h1 .st { margin-inline: 0; }
.hero .lede { margin: 24px 0 0; max-width: 40ch; }
.hero .cta { justify-content: flex-start; margin-top: 30px; }
.hero .fine { margin-top: 16px; font-size: 13px; }
.btn[data-dl]:hover .arrow { transform: translateY(3px); }
.js:not(.title-go) .hero-stage { position: relative; perspective: 1800px; animation: stageIn 1300ms var(--ease) 700ms both; }
.hero-stage::before { content: ''; position: absolute; z-index: -1; inset: -14% -10% -6% -4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) calc(var(--glow) + 14%), transparent), transparent 100%); filter: blur(24px); pointer-events: none; }
.pane { position: relative; margin: 0; border: 1px solid var(--line2); background: var(--s1); }
.pane figcaption { position: absolute; z-index: 3; left: 14px; top: -9px; padding: 0 8px; background: var(--ground); color: var(--muted); font: 700 11px/16px var(--mono); letter-spacing: 0.1em; }
.pane img { width: 100%; height: auto; }
.hero-pane { overflow: hidden; box-shadow: 0 40px 90px -34px var(--shade); }
.hero-pane figcaption { top: 0; left: 0; padding: 4px 10px; background: var(--ground); border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.scan { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, transparent, var(--acc), transparent) bottom / 100% 2px no-repeat; pointer-events: none; animation: scan 7s linear 2.4s infinite; }
@keyframes scan { 0% { transform: translateY(-100%); opacity: 0; } 8% { opacity: 0.8; } 92% { opacity: 0.8; } 100% { transform: translateY(0); opacity: 0; } }
@supports (animation-timeline: view()) {
  .hero-pane { animation: tilt linear both; animation-timeline: view(); animation-range: entry 5% cover 34%; }
  @keyframes tilt { from { transform: rotateX(9deg) translateY(24px) scale(0.96); } to { transform: none; } }
}
.statusline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 16px; color: var(--muted); font: 600 12px var(--mono); }
.statusline b { color: var(--fg); font-variant-numeric: tabular-nums; }
.statusline .grow, .site-foot .grow { flex: 1; }
.statusline .rec { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); }
.statusline .rec i { width: 8px; height: 8px; background: var(--bad); animation: blink 1.4s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

/* ---- feature sections: words on one side, a pane on the other, and the sides swap ---- */
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.feat .sec-head { margin-bottom: 24px; }
.feat.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feat.flip .feat-copy { order: 2; }
.feat.flip .share-stage { order: 1; }
.lines { border-bottom: 1px solid var(--line); }
.lines li { display: grid; gap: 3px; padding: 16px 0; border-top: 1px solid var(--line); }
.lines b { font: 700 15px var(--mono); }
.lines span { color: var(--muted); font-size: 14.5px; text-wrap: pretty; }
.lines .chip { margin-left: 10px; vertical-align: 2px; }

/* ---- Quick Share: the share sheet, cropped to the sheet itself, and under it the wire a link travels ---- */
.crop { position: relative; aspect-ratio: 480 / 555; overflow: hidden; }
.crop img { position: absolute; width: 266.67%; max-width: none; left: -83.33%; top: -40.54%; }
.share-stage { display: grid; gap: 22px; width: 100%; max-width: 520px; justify-self: center; }
.wire { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line2); background: var(--s1); font: 500 12.5px var(--mono); transition: border-color 300ms; }
.share-row.live .wire { border-color: var(--acc); }
.wire-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 20px; }
.wire .k { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.wire code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; color: var(--fg); }
.wire code::after { content: ''; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--acc); animation: blink 1s steps(2, jump-none) infinite; }
.wire .cells { display: grid; gap: 3px; }
.wire .cells i { height: 10px; background: var(--line); transition: background 160ms; }
.wire .cells i.on { background: var(--acc); }
.wire b { min-width: 3.4ch; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; }
#wireState[data-tone='ok'] { color: var(--ok); }
#wireState[data-tone='warn'] { color: var(--warn); }

/* ---- the close and the foot ---- */
.get-note { margin-top: 16px; color: var(--on); font-size: 14px; }
.foot-btn { font: inherit; color: inherit; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; }
.foot-btn:hover { color: var(--fg); }
.site-foot { font-size: 13px; }

/* ---- smaller screens ---- */
@media (max-width: 960px) {
  .hero, .feat, .feat.flip { grid-template-columns: minmax(0, 1fr); }
  .feat.flip .feat-copy, .feat.flip .share-stage { order: 0; }
  .hero .lede { max-width: 54ch; }
  .hero-stage::before { inset: -8% -4%; }
}
@media (max-width: 760px) {
  .wb-tag { width: 64px; }
  .wb-tag i { width: 42px; height: 15px; }
  .wb-tabs a { padding: 0 10px; }
  .wb-tabs a span { display: none; }
  .wb-tabs a[aria-current='true'] span { display: inline; }
  .wb-link { display: none; }
  .wb-themes { padding: 0 8px; gap: 2px; }
  .th { width: 28px; }
  .wb-dl { padding: 0 12px; }
  .tl-top { padding: 8px 12px; }
  .wire-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
}
@media (max-width: 480px) {
  .wb-themes { display: none; }
  .hero h1 { font-size: clamp(2rem, 11vw, 2.6rem); }

}
@media (prefers-reduced-motion: reduce) {
  .scan { display: none; }
  .statusline .rec i, .tl-live i, .wire code::after { animation: none; }
  .hero-pane, .hero-stage { animation: none; }
}

.cmp-note { max-width: 70ch; margin-top: 18px; color: var(--muted); font-size: 13px; }


/* ---- the page's own light: three soft glows behind everything. They hold still on purpose: the drift
   cost three full-screen layers plus a backdrop blur recomputed over them every frame, and that is felt
   as a low frame rate while a game is running. The light stays; only the movement went. ---- */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 74vmax; height: 74vmax; border-radius: 50%; }
.aurora i:nth-child(1) { left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) calc(var(--glow) * 1.1), transparent), transparent); }
.aurora i:nth-child(2) { right: -28vmax; top: 6vh; background: radial-gradient(closest-side, color-mix(in srgb, var(--warn) calc(var(--glow) * 0.65), transparent), transparent); }
.aurora i:nth-child(3) { left: 14vw; bottom: -46vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) calc(var(--glow) * 0.85), transparent), transparent); }
@keyframes driftA { to { transform: translate(34vw, 26vh) scale(1.2); } }
@keyframes driftB { to { transform: translate(-30vw, 34vh) scale(0.85); } }
@keyframes driftC { to { transform: translate(30vw, -22vh) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }
@media (max-width: 760px) { .wb-ico { display: none; } .wb-themes { margin-left: 0; } }

/* ---- a shorter page: tighter sections, the Tour of real screenshots, two-column questions ---- */
.sec { padding-top: clamp(48px, 5vw, 72px); --dv: clamp(28px, 3.5vw, 48px); }
.sec-head { margin-bottom: clamp(20px, 2.6vw, 32px); }
h2 { font-size: clamp(1.875rem, 2.9vw, 2.3rem); }
.hero { padding-top: calc(var(--nav) + clamp(28px, 4vw, 56px)); }
.hero-clip { display: block; width: 100%; height: auto; aspect-ratio: 1360 / 860; background: var(--s1); }
.hero-pane { overflow: hidden; }
.tour-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 34px) clamp(18px, 2vw, 26px); margin-top: clamp(28px, 3.4vw, 44px); }
.tile h3 { margin: 18px 0 6px; font-size: 1.05rem; letter-spacing: -0.02em; }
.tile.big h3 { font-size: 1.3rem; }
.tile p { color: var(--muted); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.tile .pane { background: var(--s1); }
.shot { position: relative; overflow: hidden; aspect-ratio: var(--cw) / var(--ch); background: var(--s1); }
.shot { display: block; }
.shot img { position: absolute; display: block; max-width: none; height: auto; width: calc(var(--sw, 1280) / var(--cw) * 100%); left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); }
.shot.fit { background: var(--s1); }
.shot.fit img { position: absolute; inset: 0; width: 100%; height: 100%; left: 0; top: 0; object-fit: contain; }
.c-share { --cx: 160; --cy: 90; --cw: 960; --ch: 600; }
.c-options { --cx: 8; --cy: 470; --cw: 472; --ch: 295; }
.c-compact { --sw: 442; --cx: 0; --cy: 130; --cw: 442; --ch: 276; }
.c-tl { --sw: 1600; --cx: 0; --cy: 0; --cw: 1600; --ch: 760; }
.c-capture, .c-hotkeys, .c-theme { --cx: 330; --cy: 66; --cw: 880; --ch: 550; }
.c-editor { --sw: 1266; --cx: 0; --cy: 0; --cw: 1266; --ch: 806; }
.tl-pane { margin: 0; }

.tour-top .wire { margin-top: 14px; }
#qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); align-items: start; border-top: 0; }
#qa .q { border-top: 1px solid var(--line); }
#qa .q h3 > button { padding: 16px 4px; }
.cmp th, .cmp td { padding: 12px 18px; }
.nevers li { padding: 14px 0; }
.stage { padding: clamp(16px, 2vw, 24px); gap: 10px; }
.stage li { padding: 9px 0; }
.plan { padding: clamp(18px, 2.4vw, 28px); gap: 10px; }
.get { margin-top: clamp(56px, 7vw, 96px); }
.get-in { padding-block: clamp(48px, 6vw, 84px); }
@media (max-width: 960px) {
  .tour-top { grid-template-columns: minmax(0, 1fr); }
  .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #qa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .tour-grid { grid-template-columns: minmax(0, 1fr); } }

/* a little tighter again: the comparison rows, the plan lists and the closing block */
.cmp th, .cmp td { padding: 9px 16px; }
.cmp tbody th small { font-size: 13px; }
.race { margin-bottom: 10px; }
.chips { margin-bottom: 14px; }
.verdict { margin-top: 14px; padding: 16px 20px; }
.perks li { padding: 8px 0; }
.price b { font-size: clamp(2.2rem, 4.5vw, 3rem); }
/* The pricing head is a heading alone now: the bills sit closer, so a heading and three small
   pills do not read as two unrelated blocks. */
#pricing { padding-top: clamp(30px, 3.4vw, 54px); }  /* the word sits closer to the chart than a section's usual air */
#pricing .sec-head { margin-bottom: clamp(22px, 2.8vw, 34px); }
/* The facts carry an icon and a bold line of their own: the small square the earlier page put before
   each one is a second marker for no reason, so it goes. */
.facts li::before { display: none; }
/* The facts take the plenty-more treatment: a bright title over body text of the same warmth. site.css
   set --muted on the whole item, so the title was muted with it. */
.facts li { color: var(--fg); }
.facts b { color: var(--fg); }
[data-theme='clutch'] .facts span { color: color-mix(in srgb, var(--fg) 78%, var(--ground)); }

/* The per-line under the price keeps one line whatever the billing period says, so switching
   Monthly / Yearly / Lifetime never moves the card's content. */
.price [data-k='per'] { min-height: 1.5em; white-space: nowrap; }

/* The refusal line sits under the Upgrade button. Out of the flow, inside the card's own bottom
   padding, so the two buttons stay on one line and nothing moves when the joke lands or leaves. */
.plan .nope { position: absolute; left: clamp(22px, 3vw, 36px); right: clamp(22px, 3vw, 36px); bottom: clamp(12px, 1.8vw, 20px); margin: 0; min-height: 0; color: var(--muted); font: 500 14px var(--sans); text-align: center; }
.plan .nope .say { font-style: normal; }

.billing { margin-bottom: 14px; }
.faq { margin-top: 18px; }
.plain { margin-top: 18px; }
.get-in { padding-block: clamp(36px, 5vw, 64px); }


/* ---- round five: a big hero, rows of large pictures, panes that arrive and lean ---- */
.hero { display: block; max-width: 1240px; padding: calc(var(--nav) + clamp(26px, 3.6vw, 48px)) 24px 0; }
.hero-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px clamp(32px, 5vw, 84px); align-items: end; }
.hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.7rem); }
.hero-side .lede { margin: 0; max-width: 52ch; }
.hero-side .cta { margin-top: 20px; }
.hero-side .fine { margin-top: 12px; }
.hero-stage { margin-top: clamp(22px, 3vw, 40px); }
.hero-stage::before { inset: -8% -6% -10% -6%; }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(36px, 4.6vw, 64px); }
.row.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.row.flip .row-copy { order: 2; }
.row-copy h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.15; margin: 0; }
.row-copy p { margin-top: 12px; max-width: 46ch; color: var(--muted); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.row .wire { margin-top: 20px; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); margin-top: clamp(36px, 4.6vw, 64px); }
.duo .tile h3 { margin: 20px 0 6px; font-size: 1.2rem; }
.duo .tile p { font-size: 14.5px; max-width: 52ch; }
.c-share { --cx: 270; --cy: 100; --cw: 740; --ch: 570; }
.c-tl { --sw: 2000; --cx: 0; --cy: 0; --cw: 2000; --ch: 1126; }
/* the pictures sit a little softer against the page: the app is near-black with bright orange, and the page is not */
.pane img, .hero-clip { filter: contrast(0.92) saturate(0.93) brightness(1.03); }
.pane { background: color-mix(in srgb, var(--s1) 70%, var(--ground)); box-shadow: 0 30px 70px -36px var(--shade); }
.pane[data-r='pane'] { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; transition: transform 600ms var(--ease), box-shadow 400ms; }
.pane[data-r='pane']:hover { transform: perspective(1500px) rotateX(var(--rx)) rotateY(var(--ry)); transition-duration: 120ms, 400ms; box-shadow: 0 40px 90px -34px var(--shade), 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent); }
.js .pane[data-r='pane']:not(.in) { opacity: 0; }
.js .pane[data-r='pane'].in { animation: paneIn 1200ms var(--ease) backwards; }
@keyframes paneIn {
  0% { clip-path: inset(0 0 100% 0); transform: perspective(1500px) rotateX(14deg) translateY(46px) scale(0.95); filter: brightness(1.9) blur(8px); }
  55% { filter: brightness(1.2) blur(0); }
  100% { clip-path: inset(-3% -3% -3% -3%); transform: none; filter: none; }
}
.pane[data-r='pane']::before, .pane[data-r='pane']::after { content: ''; position: absolute; z-index: 5; inset: 20px; opacity: 0; pointer-events: none; transition: inset 800ms var(--ease) 350ms, opacity 500ms 350ms; }
.pane[data-r='pane']::before { background: linear-gradient(var(--acc), var(--acc)) 0 0 / 18px 2px no-repeat, linear-gradient(var(--acc), var(--acc)) 0 0 / 2px 18px no-repeat, linear-gradient(var(--acc), var(--acc)) 100% 100% / 18px 2px no-repeat, linear-gradient(var(--acc), var(--acc)) 100% 100% / 2px 18px no-repeat; }
.pane[data-r='pane']::after { background: linear-gradient(var(--acc), var(--acc)) 100% 0 / 18px 2px no-repeat, linear-gradient(var(--acc), var(--acc)) 100% 0 / 2px 18px no-repeat, linear-gradient(var(--acc), var(--acc)) 0 100% / 18px 2px no-repeat, linear-gradient(var(--acc), var(--acc)) 0 100% / 2px 18px no-repeat; }
.pane[data-r='pane'].in::before, .pane[data-r='pane'].in::after { inset: -8px; opacity: 1; }
.pane[data-r='pane'] .shot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.16), transparent 46%); opacity: 0; transition: opacity 300ms; }
.pane[data-r='pane']:hover .shot::after { opacity: 1; }
@media (max-width: 960px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); }
  .row, .row.flip, .duo { grid-template-columns: minmax(0, 1fr); }
  .row.flip .row-copy { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .js .pane[data-r='pane'].in { animation: none; } .pane[data-r='pane'] { transition: none; } }

/* ---- round five, part two: three pictures fewer, the rest larger ---- */
.tour { max-width: 1280px; }
@media (min-width: 961px) {
  .row { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); }
  .row.flip { grid-template-columns: minmax(0, 7.8fr) minmax(0, 4.2fr); }
}
.c-main { --cx: 0; --cy: 0; --cw: 1280; --ch: 820; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(24px, 3vw, 44px); margin-top: clamp(36px, 4.6vw, 64px); border-top: 1px solid var(--line); }
.facts li { display: grid; gap: 4px; padding-top: 18px; }
.facts b { font: 700 1.05rem var(--mono); letter-spacing: -0.02em; }
.facts span { color: var(--muted); font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 960px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.hero-copy { max-width: none; margin: 0; }


/* ---- round six: a 3D hero of crisp frames, the Timeline as its own section, the Share dialog alone ---- */
.pane img, .hero-clip { filter: none; }
.scan { display: none; }
.hero-stage { margin-top: clamp(18px, 2.6vw, 34px); }
.hero-stage::before { content: none; }
.scene { position: relative; perspective: 2200px; aspect-ratio: 1190 / 760; }
.scene::before { content: ''; position: absolute; z-index: -1; inset: -12% -8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) calc(var(--glow) + 12%), transparent), transparent); filter: blur(30px); pointer-events: none; }
.scene-inner { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--sx, 3deg)) rotateY(var(--sy, -7deg)); transition: transform 600ms var(--ease); }
.win { position: absolute; background: #000; outline: 1px solid var(--line2); box-shadow: 0 40px 80px -30px var(--shade); }
.win img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 360ms ease; user-select: none; -webkit-user-drag: none; }
.win img.on { opacity: 1; }
.win-main { left: 0; top: 4%; width: 83%; aspect-ratio: 1280 / 820; }
.win-compact { right: 0; bottom: 0; width: 29.5%; aspect-ratio: 442 / 696; transform: translateZ(120px); box-shadow: 0 50px 90px -24px var(--shade), 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent); }
.hcursor { position: absolute; z-index: 4; left: 112%; top: 106%; width: 20px; height: 32px; margin: -3px 0 0 -3px; pointer-events: none; transition: left 900ms cubic-bezier(0.45, 0, 0.2, 1), top 900ms cubic-bezier(0.45, 0, 0.2, 1); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55)); }
.hcursor.reset { transition: none; }
.hcursor svg { display: block; width: 100%; height: 100%; fill: #fff; stroke: #000; stroke-width: 1.3; stroke-linejoin: round; }
.hcursor i { position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border: 2px solid var(--acc); border-radius: 50%; opacity: 0; }
.hcursor.press i { animation: ripple 520ms var(--ease); }
@keyframes ripple { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.8); } }
.hcaps { position: absolute; z-index: 4; left: 50%; bottom: 10%; display: flex; gap: 8px; opacity: 0; transform: translate(-50%, 12px); transition: opacity 240ms, transform 400ms var(--ease); pointer-events: none; }
.hcaps.on { opacity: 1; transform: translate(-50%, 0); }
.hcaps kbd { min-width: 46px; height: 42px; font-size: 18px; background: var(--acc); border-color: var(--acc); color: var(--on); }
.sec-head.wide { max-width: none; }
.sec-head.wide .lede { max-width: 66ch; }
.tl3d { position: relative; max-width: 1240px; margin: clamp(84px, 9vw, 120px) auto 0; perspective: 2400px; --ty: 0deg; }
.tl3d-stack { transform-style: preserve-3d; transform: rotateX(6deg) rotateY(var(--ty)); transition: transform 600ms var(--ease); }
.tl3d-bar { position: relative; z-index: 2; transform: translateZ(90px); }
.tl3d-video { position: relative; margin-top: 14px; }
.tl3d .shot { outline: 1px solid var(--line2); box-shadow: 0 30px 70px -30px var(--shade); }
.c-tlbar { --sw: 2000; --cx: 0; --cy: 0; --cw: 2000; --ch: 316; }
.c-tlvid { --sw: 2000; --cx: 0; --cy: 316; --cw: 2000; --ch: 810; }
.tl3d-tags { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.tl-tag { position: absolute; bottom: 100%; padding: 6px 11px; background: var(--acc); color: var(--on); font: 700 12.5px var(--mono); white-space: nowrap; opacity: 0; translate: 0 10px; transition: opacity 500ms, translate 700ms var(--ease); }
.tl-tag::after { content: ''; position: absolute; top: 100%; width: 2px; height: var(--h); background: var(--acc); }
.tl-tag.t1 { left: 59.7%; margin-bottom: 16px; --h: 34px; transform: translateX(-50%); }
.tl-tag.t1::after, .tl-tag.t2::after { left: calc(50% - 1px); }
.tl-tag.t2 { left: 65.2%; margin-bottom: 54px; --h: 133px; transform: translateX(-50%); }
.tl-tag.t3 { left: 96.5%; margin-bottom: 16px; --h: 142px; transform: translateX(-100%); }
.tl-tag.t3::after { right: 24px; }
.tl3d.in .tl-tag { opacity: 1; translate: 0 0; }
.tl3d.in .t1 { transition-delay: 700ms; }
.tl3d.in .t2 { transition-delay: 1000ms; }
.tl3d.in .t3 { transition-delay: 1300ms; }
@supports (animation-timeline: view()) {
  .tl3d-stack { animation: tlTilt linear both; animation-timeline: view(); animation-range: entry 5% cover 45%; }
  .tl3d-bar { animation: tlLift linear both; animation-timeline: view(); animation-range: entry 5% cover 50%; }
}
@keyframes tlTilt { from { transform: rotateX(24deg) rotateY(var(--ty)); } to { transform: rotateX(6deg) rotateY(var(--ty)); } }
@keyframes tlLift { from { transform: translateZ(0) translateY(0); } to { transform: translateZ(110px) translateY(-18px); } }
.float-dlg { border: 0; background: none; box-shadow: none; width: min(100%, 460px); justify-self: center; }
.float-dlg img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 36px rgba(0, 0, 0, 0.5)); }
.js .float-dlg.in img { animation: bob 7s ease-in-out 1.4s infinite; }
@keyframes bob { 50% { transform: translateY(-12px); } }
@media (max-width: 760px) {
  .tl3d-tags { display: none; }
  .tl3d { margin-top: 24px; }
  .tl3d-stack, .tl3d-bar { animation: none; transform: none; }
  .scene-inner { transform: none; }
  .win-compact { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .scene-inner, .tl3d-stack, .tl3d-bar { animation: none; } .js .float-dlg.in img { animation: none; } .hcursor { transition: none; } }
.tl-tag.t1 { transform: translateX(-100%); }
.tl-tag.t1::after { left: auto; right: 0; }


/* ---- round seven: everything faces the visitor, a wider hero, calmer sections ---- */
:root { --bandbg: color-mix(in srgb, var(--s1) 46%, transparent); }
.scene-inner { transform: none; transition: none; }
.win-compact { transform: none; }
.pane[data-r='pane']:hover { transform: translateY(-4px); }
@keyframes paneIn {
  0% { clip-path: inset(0 0 100% 0); transform: translateY(34px); filter: brightness(1.8) blur(8px); }
  55% { filter: brightness(1.2) blur(0); }
  100% { clip-path: inset(-3% -3% -3% -3%); transform: none; filter: none; }
}
/* the hero: the words across the top of a wider page, the scene below it at its widest sharp size */
.hero { max-width: 1680px; padding-inline: clamp(24px, 4.5vw, 72px); }
.hero-copy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px clamp(36px, 5vw, 100px); }
.hero-lede .lede { margin: 0; max-width: 40ch; }
.hero-lede .fine { margin-top: 14px; }
.hero-copy .cta { flex-direction: column; align-items: stretch; margin: 0; min-width: 250px; }
.hero-stage { max-width: 1480px; margin-inline: auto; }
@media (max-width: 1100px) { .hero-copy { grid-template-columns: minmax(0, 1fr); } .hero-copy .cta { flex-direction: row; min-width: 0; } }
/* Timeline: the footage alone, outlined in the theme's accent, under the bar */
.tl3d { perspective: none; }
.tl3d-stack, .tl3d-bar { transform: none; }
.tl3d-video { width: 61.85%; margin: 22px auto 0; }
.c-tlvid { --sw: 2000; --cx: 381; --cy: 375; --cw: 1237; --ch: 694; }
.tl3d-video .shot { outline: 2px solid var(--acc); box-shadow: 0 0 0 7px color-mix(in srgb, var(--acc) 16%, transparent), 0 40px 80px -30px var(--shade); }
@supports (animation-timeline: view()) {
  .tl3d-stack { animation: none; }
  .tl3d-bar { animation: tlLift linear both; animation-timeline: view(); animation-range: entry 5% cover 50%; }
  .tl3d-video { animation: tlDrop linear both; animation-timeline: view(); animation-range: entry 5% cover 50%; }
}
@keyframes tlLift { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes tlDrop { from { transform: translateY(0); } to { transform: translateY(16px); } }
@media (max-width: 760px) { .tl3d-video { width: 100%; } .tl3d-bar, .tl3d-video { animation: none; } }
/* sections: tinted bands, more air between groups */
.band { position: relative; padding-bottom: clamp(48px, 6vw, 84px); background: var(--bandbg); box-shadow: 0 0 0 100vmax var(--bandbg); clip-path: inset(0 -100vmax); }
.sec { padding-top: clamp(56px, 6vw, 88px); }
/* the comparison: no scoreboard, and the verdict as three quiet, separate cards */
.verdict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; padding: 0; border: 0; background: none; }
.verdict > div { padding: 18px 20px 20px; border: 1px solid var(--line); background: var(--s1); }
.verdict h3 { margin: 0 0 12px; color: var(--muted); font: 700 11.5px var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
.verdict p { color: var(--fg); font-size: 14.5px; line-height: 1.6; }
.verdict ul { display: grid; gap: 10px; }
.verdict li b { display: block; font: 700 13.5px var(--mono); }
.verdict li span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 860px) { .verdict { grid-template-columns: minmax(0, 1fr); } }
/* privacy: six short lines in three columns */
.priv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(28px, 4vw, 56px); }
.priv-grid li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.priv-grid .nv { margin-top: 2px; }
.priv-grid b { font: 700 15px var(--mono); }
.priv-grid span { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 860px) { .priv-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.sec-head .lede { max-width: 52ch; }
/* labels stop at the bar instead of crossing its text */
.tl-tag.t1 { --h: 26px; }
.tl-tag.t2 { --h: 64px; }
.tl-tag.t3 { --h: 26px; }
.tl-tag.t3::after { right: 24px; }
.sec, .band { padding-bottom: clamp(36px, 4.5vw, 64px); }
.sec { padding-top: clamp(48px, 5vw, 72px); }

#qa .q { border-top: 0; }
.qcol { border-top: 1px solid var(--line); }
.facts li { align-content: start; }
.site-foot, .site-foot span, .site-foot a, .site-foot .foot-btn { color: var(--on); }
.site-foot a, .site-foot .foot-btn { text-decoration-color: color-mix(in srgb, var(--on) 55%, transparent); }

/* the Share dialog: its picture is the inside only; the border and the title are drawn here, in the theme's accent, so the edge is exact */
.float-dlg { width: min(100%, 454px); }
.float-dlg img { filter: none; }
.dlg { position: relative; border: 2px solid var(--acc); border-top: 0; background: var(--s1); filter: drop-shadow(0 30px 36px rgba(0, 0, 0, 0.5)); }
.dlg img { display: block; width: 100%; height: auto; }
.pane .dlg-top { position: absolute; left: -2px; right: -2px; top: -9px; z-index: 1; display: flex; align-items: center; height: 18px; padding: 0; background: none; border: 0; }
.dlg-top i { height: 2px; background: var(--acc); }
.dlg-top i:first-child { width: 14px; }
.dlg-top i:last-child { flex: 1; }
.dlg-top span { padding: 0 9px; color: var(--acc); font: 700 12px/18px var(--mono); letter-spacing: 0.1em; white-space: nowrap; }
.js .float-dlg.in .dlg { animation: bob 7s ease-in-out 1.4s infinite; }
.js .float-dlg.in img { animation: none; }
@media (prefers-reduced-motion: reduce) { .js .float-dlg.in .dlg { animation: none; } }

/* ---- more contrast on the main theme: a deeper ground, brighter text, firmer lines and panes, a stronger glow ---- */
[data-theme='clutch'] {
  --ground: color-mix(in srgb, var(--bx-ground) 97%, var(--bx-fg));
  --s1: color-mix(in srgb, var(--bx-tile) 86%, var(--bx-fg));
  --s2: color-mix(in srgb, var(--bx-raised) 80%, var(--bx-fg));
  --fg: #f7f3eb;
  --muted: color-mix(in srgb, var(--bx-muted) 62%, var(--bx-fg));
  --line: color-mix(in srgb, var(--bx-line) 62%, var(--bx-fg));
  --bandbg: color-mix(in srgb, var(--s1) 70%, transparent);
  --glow: 36%;
}
[data-theme='clutch'] .lede, [data-theme='clutch'] .row-copy p, [data-theme='clutch'] .facts span, [data-theme='clutch'] .priv-grid span { color: color-mix(in srgb, var(--fg) 78%, var(--ground)); }
/* the demo is 3D again: it follows the pointer */
.scene { perspective: 1800px; }
.scene-inner { transform-style: preserve-3d; transform: rotateX(var(--sx, 0deg)) rotateY(var(--sy, 0deg)); transition: transform 180ms ease-out; will-change: transform; }
.win-compact { transform: translateZ(110px); }
.win-main { transform: translateZ(0); }
@media (max-width: 760px) { .scene-inner { transform: none; } .win-compact { transform: none; } }
@media (prefers-reduced-motion: reduce) { .scene-inner { transform: none; transition: none; } }

/* ---- hero, after the reference: words left, scene right with a neon glow, a four-part strip and a framed base line ---- */
.hero { display: block; max-width: 1680px; padding: calc(var(--nav) + clamp(28px, 4vw, 56px)) clamp(24px, 5vw, 96px) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.hero-left { min-width: 0; }
.hero-tag { display: inline-flex; gap: 12px; padding: 9px 16px; border: 1px solid var(--line2); color: var(--muted); font: 600 12.5px var(--mono); letter-spacing: 0.1em; }
.hero-tag b { color: var(--acc); font-weight: 700; }
.hero-left h1 { margin: 26px 0 0; font-size: clamp(2.8rem, 5.2vw, 5rem); line-height: 1.02; }
.hero h1 .st { white-space: nowrap; }
.hero-left .st { margin-inline: 0; }
.pd { color: var(--acc); font-style: normal; }
.hero-left .lede { margin: 30px 0 0; max-width: 34ch; color: var(--fg); }
.hero-left .fine { margin-top: 14px; }
.hero-left .cta { margin-top: 30px; justify-content: flex-start; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 12px 0; margin-top: 30px; color: var(--muted); font: 500 13px var(--mono); }
.hero-trust li { display: inline-flex; align-items: center; gap: 9px; padding: 0 20px; border-left: 1px solid var(--line2); }
.hero-trust li:first-child { padding-left: 0; border-left: 0; }
.hero-trust svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-stage { max-width: none; margin: 0; }
.scene::before { inset: -14% -10%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc) 52%, transparent), transparent); filter: blur(46px); }
.win { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent), 0 0 70px -6px color-mix(in srgb, var(--acc) 55%, transparent), 0 40px 80px -30px var(--shade); outline: 0; }
.hero-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 72px); padding-top: 34px; border-top: 1px solid var(--line2); }
.hero-feats li { display: flex; align-items: flex-start; gap: 16px; padding: 0 clamp(16px, 2.4vw, 40px); border-left: 1px solid var(--line); }
.hero-feats li:first-child { padding-left: 0; border-left: 0; }
.hero-feats svg { flex: none; width: 36px; height: 36px; fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 8; }
.hero-feats svg.round { stroke-linecap: round; stroke-linejoin: round; }
.hero-feats b { display: block; font: 700 1.05rem var(--mono); }
.hero-feats span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.hero-base { position: relative; height: 38px; margin: clamp(28px, 4vw, 48px) 0 -6px; }
.hero-base svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--acc); stroke-width: 2; }
.hero-base path { vector-effect: non-scaling-stroke; }
.hero-base span { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 6px; color: var(--acc); font: 700 13px var(--mono); letter-spacing: 0.5em; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; } .hero-feats li:nth-child(3) { padding-left: 0; border-left: 0; } .hero-base { display: none; } }
@media (max-width: 560px) { .hero-trust li { padding: 0 12px; } }
.pd { margin-left: -0.12em; }
.hcaps kbd { min-width: 34px; height: 32px; font-size: 14px; }

/* ---- a taller bar and a much larger demo ---- */
:root { --nav: 58px; }
.wb { font-size: 15px; }
.wb-tag { width: 112px; }
.wb-tag i { width: 70px; height: 24px; }
.wb-tabs a { padding: 0 17px; }
.th { width: 38px; height: 32px; }
.th .sw3 { grid-template-columns: repeat(3, 8px); height: 16px; }
.wb-ico { width: 48px; }
.wb-ico svg { width: 20px; height: 20px; }
.wb-link, .wb-dl { padding-inline: 22px; }
.hero { max-width: none; padding-right: 0; }
.hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 56px); }
.hero-stage { margin-right: 0; }
.hero-feats, .hero-base { margin-right: clamp(24px, 5vw, 96px); }
.scene { aspect-ratio: 1190 / 790; }
.win-main { width: 86%; }
.win-compact { width: 31%; }
@media (max-width: 1000px) { .hero { padding-right: clamp(24px, 5vw, 96px); } }
@media (max-width: 760px) { :root { --nav: 52px; } .wb-tag { width: 72px; } .wb-tag i { width: 46px; height: 17px; } }

/* ---- liquid glass: the bands and the tiles are frosted, show the glow through, and fade into the page instead of ending in a hard edge ---- */
.band { background: none; box-shadow: none; clip-path: none; isolation: isolate; }
.glass { position: absolute; z-index: -1; inset: 0 -100vmax; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--fg) 5%, transparent), color-mix(in srgb, var(--fg) 2%, transparent)); backdrop-filter: blur(22px) saturate(1.25); -webkit-backdrop-filter: blur(22px) saturate(1.25); -webkit-mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent); }
.verdict > div, .cmpwrap, .stage, .plan, .wire {
  background: linear-gradient(160deg, color-mix(in srgb, var(--fg) 8%, transparent), color-mix(in srgb, var(--fg) 2.5%, transparent));
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-color: color-mix(in srgb, var(--fg) 14%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 16%, transparent), 0 20px 50px -28px var(--shade);
}
.cmp .us { background: color-mix(in srgb, var(--acc) 14%, transparent); }
.cmp thead .us { background: var(--acc); }

/* the demo fits the screen: no bleed past the edge, a little smaller, the compact panel pulled in */
.hero { padding-right: clamp(24px, 4.5vw, 84px); }
.hero-stage { max-width: 1240px; margin-left: auto; }
.hero-feats, .hero-base { margin-right: 0; }
.win-main { width: 84%; }
.win-compact { width: 29%; right: 3%; }
.scene { padding-right: 0; }
.hero-stage { width: 100%; }

/* the share dialog stays still (the bob blurred its border); the hero is tighter */
.js .float-dlg.in .dlg, .js .float-dlg.in img { animation: none; }
.hero { max-width: 1560px; padding-top: calc(var(--nav) + clamp(16px, 2.2vw, 32px)); padding-right: clamp(24px, 3vw, 56px); padding-left: clamp(24px, 3vw, 56px); }
.hero-grid { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(16px, 2vw, 32px); }
.hero-stage { max-width: none; margin: 0; width: 100%; }
.hero-left h1 { margin-top: 0; }
.hero-left .lede { margin-top: 20px; }
.hero-left .cta { margin-top: 22px; }
.hero-trust { margin-top: 20px; }
.hero-feats { margin-top: clamp(20px, 2.4vw, 32px); padding-top: 22px; }
.hero-base { margin-top: clamp(16px, 2vw, 24px); }

/* bigger demo: wider column, windows fill more of it */
.hero { max-width: 1760px; padding-left: clamp(24px, 2.4vw, 48px); padding-right: clamp(24px, 2.4vw, 48px); }
.hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(12px, 1.4vw, 24px); }
.win-main { width: 90%; }
.win-compact { width: 31%; right: 1%; }

/* ---- the bar, newer: a floating glass pill with room between the tabs; the ink is a pill behind the section in view ---- */
:root { --nav: 70px; }
.wb { inset: 10px clamp(10px, 1.4vw, 24px) auto; height: 58px; padding: 6px; gap: 6px; border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--s1) 72%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 14%, transparent), 0 14px 40px -18px var(--shade); }
.wb-tag { width: 104px; border-radius: 11px; }
.wb-tabs { gap: 6px; margin-left: 10px; }
.wb-tabs a { padding: 0 18px; border-radius: 10px; position: relative; z-index: 1; }
.wb-tabs a:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.wb-ink { top: 0; bottom: 0; height: auto; z-index: 0; border-radius: 10px; background: color-mix(in srgb, var(--acc) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 55%, transparent); }
.wb-themes { margin-left: 0; padding: 0 14px; gap: 8px; border-left: 0; border-radius: 10px; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.wb-ico { width: 44px; border-radius: 10px; }
.wb-link { padding-inline: 18px; border-radius: 10px; }
.wb-dl { padding-inline: 24px; border-radius: 11px; }
@media (max-width: 1100px) { .wb-tabs a { padding: 0 12px; } .wb-tag { width: 72px; } }
@media (max-width: 760px) { :root { --nav: 64px; } .wb { height: 52px; inset: 8px 8px auto; } .wb-tag { width: 56px; } .wb-tabs { margin-left: 4px; gap: 2px; } }

/* ---- bar, square like the app: no rounded corners; tabs fit at laptop widths (8 tabs, so tighter padding and gaps) ---- */
.wb, .wb-tag, .wb-tabs a, .wb-ink, .wb-themes, .wb-ico, .wb-link, .wb-dl { border-radius: 0; }
.wb { font-size: 14px; gap: 4px; }
.wb-tag { width: 96px; }
.wb-tag i { width: 62px; height: 21px; }
.wb-tabs { gap: 2px; margin-left: 6px; }
.wb-tabs a { padding: 0 12px; gap: 6px; }
.wb-ico { width: 40px; }
.wb-link { padding-inline: 14px; }
.wb-dl { padding-inline: 20px; }
@media (max-width: 1280px) { .wb-tabs a { padding: 0 9px; gap: 4px; } .wb-themes { padding: 0 8px; gap: 4px; } }
@media (max-width: 1320px) { .wb-tabs a { padding: 0 8px; } .wb-tabs a span { display: none; } .wb-tabs a[aria-current='true'] span { display: inline; } .wb-link { display: none; } }
@media (max-width: 760px) { .wb { gap: 2px; } .wb-tag { width: 52px; } .wb-tag i { width: 36px; height: 14px; } .wb-tabs a { padding: 0 7px; } }

/* ---- phone and tablet: the hero is one column (the wide-screen grid above would otherwise win) ---- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-left .lede { max-width: 44ch; }
}
@media (max-width: 560px) {
  .hero-left h1 { font-size: clamp(2.4rem, 13vw, 3.2rem); }
  .hero-left .cta .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 960px) {
  .row, .row.flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .row.flip .row-copy { order: 0; }
}
@media (max-width: 560px) { .hero-trust { flex-wrap: wrap; gap: 8px 18px; } .hero-trust li, .hero-trust li + li { padding: 0; border: 0; } }

/* ---- round eight: more air under the bar and between sections; "Free. Simple. No bloat."; Timeline as one framed picture with three steps ---- */
.hero { padding-top: calc(var(--nav) + clamp(48px, 6.5vw, 112px)); }
.hero-feats { margin-top: clamp(48px, 5vw, 80px); padding-top: 28px; }
.hero-base { margin-top: clamp(24px, 3vw, 40px); }
.sec { padding-top: clamp(88px, 9vw, 144px); --dv: clamp(40px, 4.6vw, 72px); }
.sec, .band { padding-bottom: clamp(24px, 3vw, 48px); }
.band { padding-bottom: clamp(72px, 8vw, 120px); }
.sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.row { margin-top: clamp(64px, 8vw, 120px); }
.facts { margin-top: clamp(56px, 7vw, 96px); }
.get { margin-top: clamp(72px, 9vw, 128px); }

.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.why-grid li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 2px solid var(--acc); }
.why-grid b { font: 700 clamp(1.15rem, 1.8vw, 1.5rem) var(--mono); letter-spacing: -0.03em; }
.why-grid span { max-width: 38ch; color: var(--muted); font-size: 15px; line-height: 1.65; text-wrap: pretty; }
[data-theme='clutch'] .why-grid span, [data-theme='clutch'] .tl-steps span { color: color-mix(in srgb, var(--fg) 78%, var(--ground)); }

.tl-pane { max-width: 1240px; margin-inline: auto; box-shadow: 0 40px 90px -40px var(--shade); }
.c-tlfull { --sw: 2000; --cx: 0; --cy: 0; --cw: 2000; --ch: 1126; }
.tl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); max-width: 1240px; margin: clamp(32px, 4vw, 56px) auto 0; }
.tl-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; }
.tl-steps i { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; background: var(--acc); color: var(--on); font: 700 14px var(--mono); font-style: normal; }
.tl-steps b { font: 700 1.05rem var(--mono); letter-spacing: -0.02em; align-self: center; }
.tl-steps span { color: var(--muted); font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }

@media (max-width: 860px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tl-steps { gap: 22px; }
}
@media (max-width: 760px) {
  .hero { padding-top: calc(var(--nav) + 36px); }
  .sec { padding-top: clamp(72px, 16vw, 96px); }
}
.sec-head + .row, .sec-head + .tl-pane { margin-top: 0; }

/* the hero's own base line already ends the hero, so the first section gets no second rule under it */
#about::before, #about::after { display: none; }
#why { padding-top: clamp(56px, 6vw, 96px); }

/* ---- more features: a tidy grid of short notes ---- */
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px) clamp(24px, 3vw, 48px); }
.more-grid li { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line2); }
.more-grid svg { width: 26px; height: 26px; margin-bottom: 6px; fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.more-grid b { font: 700 1.05rem var(--mono); letter-spacing: -0.02em; }
.more-grid span { max-width: 40ch; color: var(--muted); font-size: 14.5px; line-height: 1.6; text-wrap: pretty; }
[data-theme='clutch'] .more-grid span { color: color-mix(in srgb, var(--fg) 78%, var(--ground)); }
@media (max-width: 960px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .more-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- type: Chakra Petch for headings (sharp, techy, made for screens), IBM Plex Sans for reading, JetBrains Mono kept for keys, labels and the bar ---- */
@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-latin-600-normal.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-latin-700-normal.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans'; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
:root { --display: 'Chakra Petch', 'JetBrains Mono', ui-monospace, monospace; --sans: 'IBM Plex Sans', system-ui, 'Segoe UI', Roboto, sans-serif; }
h1, h2, h3, .btn, .wb-dl, .hero-feats b, .why-grid b, .more-grid b, .tl-steps b, .facts b, .priv-grid b, .lines b, .perks b, .stage b, .qa .q, dt { font-family: var(--display); }
h1, h2, h3 { letter-spacing: -0.01em; }
.hero-left h1 { letter-spacing: 0; font-weight: 700; }
.lede, .row-copy p, .facts span, .priv-grid span, .why-grid span, .more-grid span, .tl-steps span, .hero-feats span, .perks span, .stage span, dd { font-family: var(--sans); }
.fine, .get-note, .cmp-note, .plain, .qa p, .qa .a, .sec-head .lede, .priv-grid span, .nope { font-family: var(--sans); }
.fine { font-size: 14px; }

/* ---- round ten: a clearer bar, no section rules, tighter air, a footer of its own shade ---- */
.wb { background: color-mix(in srgb, var(--s1) 34%, transparent); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); border-color: color-mix(in srgb, var(--fg) 12%, transparent); box-shadow: 0 10px 30px -20px var(--shade); }
.wb-themes { background: color-mix(in srgb, var(--fg) 6%, transparent); }

/* the sections are told apart by space and the tinted bands, not by drawn rules */
.sec:not(.about)::before, .sec:not(.about)::after { display: block; }
.facts, .qcol { border-top: 0; }
.sec { padding-top: clamp(80px, 8vw, 120px); --dv: clamp(32px, 3.6vw, 52px); }
.sec, .band { padding-bottom: 0; }
.band { padding-bottom: clamp(56px, 6vw, 88px); }
.sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.row { margin-top: clamp(48px, 6vw, 88px); }
.facts { margin-top: clamp(40px, 5vw, 64px); }
.cmp-note { margin-bottom: 0; }
#why { padding-top: clamp(40px, 5vw, 72px); }  /* the hero's base line is its rule */
.get { margin-top: clamp(64px, 7vw, 104px); }

/* the foot: its own shade, apart from the orange block above it */
.site-foot { margin-top: 0; padding-block: 18px; background: var(--s2); border-top: 1px solid var(--line2); }
.site-foot, .site-foot span, .site-foot a, .site-foot .foot-btn { color: var(--muted); }
.site-foot a:hover, .site-foot .foot-btn:hover { color: var(--fg); }
.site-foot a, .site-foot .foot-btn { text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }

/* a phone sees every part: the earlier phone block hid questions, the requirements and the foot */
@media (max-width: 640px), (pointer: coarse) and (max-width: 960px) and (max-height: 500px) {
  .site-foot { display: flex; }
}
.sec { border-top: 0; border-bottom: 0; }
#roadmap { border-top: 0; }
.facts svg { width: 26px; height: 26px; margin-bottom: 6px; fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wire code { color: #6db3ff; }
[data-theme='sandstorm'] .wire code { color: #1b5fd1; }

/* ---- expanded picture ---- */
.zoomable { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity 140ms ease; cursor: zoom-out; }
.lb.on { opacity: 1; }
.lb img { max-width: min(96vw, 1700px); max-height: calc(100vh - 2 * clamp(12px, 3vw, 40px)); width: auto; height: auto; object-fit: contain; border: 2px solid var(--acc); background: var(--s1); box-shadow: 0 40px 100px -30px var(--shade); cursor: default; transform: scale(0.97); transition: transform 180ms var(--ease); }
.lb.on img { transform: none; }
.lb-x { position: absolute; top: clamp(10px, 2vw, 24px); right: clamp(10px, 2vw, 24px); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line2); background: var(--s1); color: var(--fg); cursor: pointer; }
.lb-x:hover { background: var(--acc); color: var(--on); }
.lb-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .lb, .lb img { transition: none; transform: none; } }

/* the foot: one line, a deep shade leaning toward the accent */
.site-foot { background: color-mix(in srgb, var(--ground) 86%, var(--acc) 14%); border-top: 1px solid color-mix(in srgb, var(--acc) 28%, var(--line2)); gap: 10px 26px; }
@media (min-width: 900px) { .site-foot { flex-wrap: nowrap; padding-inline: clamp(24px, 4vw, 72px); } .site-foot > * { white-space: nowrap; } }
.sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head + .row { margin-top: clamp(24px, 3.5vw, 56px); }

/* no second corner marks on the panes: the crosshair's brackets are the only ones */
.pane[data-r='pane']::before, .pane[data-r='pane']::after { display: none; }
.zoomable { transition: transform 200ms ease-out; will-change: transform; }

/* ---- round eleven: the hero is one full screen (words and demo centred, the four strip items and the base line at its foot); sections breathe more ---- */
.hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-bottom: clamp(20px, 3vh, 36px); }
.hero-grid { flex: 1; align-content: center; align-items: center; }
.hero-feats { margin-top: clamp(20px, 3vh, 40px); }
.hero-base { margin-top: clamp(14px, 2vh, 24px); }
@media (max-width: 1000px) { .hero { min-height: 0; } }

.sec { padding-top: clamp(104px, 11vw, 168px); --dv: clamp(44px, 5vw, 76px); }
#why { padding-top: clamp(88px, 9vw, 140px); }
.band { padding-bottom: clamp(88px, 9vw, 136px); }
.sec-head { margin-bottom: clamp(36px, 4.4vw, 64px); }
.row { margin-top: clamp(64px, 8vw, 120px); }
.get { margin-top: clamp(96px, 10vw, 152px); }
@media (max-width: 760px) { .sec { padding-top: clamp(88px, 20vw, 112px); } #why { padding-top: 72px; } }
@media (min-width: 1001px) { .hero-stage { width: min(100%, calc((100svh - 340px) * 1.5)); margin-left: auto; } }
.hero { gap: 0; }
@media (min-width: 1001px) { .hero-stage { width: min(100%, calc((100svh - 380px) * 1.5)); } }
@media (min-width: 961px) { .get-in > div:first-child { padding-left: clamp(24px, 7vw, 130px); align-self: center; } }
#about::before, #about::after { display: none; }
.hero { padding-top: calc(var(--nav) + clamp(8px, 1.4vw, 24px)); }
@media (min-width: 1001px) { .hero-stage { width: min(100%, calc((100svh - 300px) * 1.5)); } }
.hero > .hero-grid, .hero > .hero-feats, .hero > .hero-base { width: 100%; align-self: stretch; }
#about, #why { padding-top: clamp(88px, 9vw, 140px); }
#about { padding-top: clamp(64px, 6vw, 96px); }
.hero-grid { position: relative; top: calc(-1 * clamp(6px, 2vh, 18px)); }
/* the hero demo is 20% larger, laid out for real (not scaled): a wider column and a wider stage, still tied to the screen height */
@media (min-width: 1001px) {
  .hero-grid { grid-template-columns: minmax(0, 3.3fr) minmax(0, 8.7fr); }
  .hero-stage { width: min(100%, calc((100svh - 340px) * 1.8)); margin-left: auto; }
}
/* hero only: more room at the left and right edges */
.hero { padding-inline: clamp(24px, 6.5vw, 140px); }
/* hero only, corrected: the hero reaches out toward the screen edges, with a wide gap between the words and the demo */
.hero { max-width: none; padding-inline: clamp(24px, 3vw, 64px); }
@media (min-width: 1001px) { .hero-grid { grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); column-gap: clamp(48px, 6vw, 130px); } }
@media (min-width: 1001px) { .hero-stage { width: min(100%, calc((100svh - 380px) * 1.5)); margin-left: auto; } }
.hero { padding-inline: clamp(40px, 6.5vw, 130px); }
@media (min-width: 1001px) { .hero-stage { width: min(100%, calc((100svh - 420px) * 1.5)); margin-left: auto; } }

/* ---- the hero run: sharper frame swaps, the hotkey bar under the preview, a hidden cursor between presses ---- */
.win img { transition: opacity 110ms linear; image-rendering: auto; }
.win img.tlp { object-fit: cover; }
.hcursor { transition: left 760ms cubic-bezier(0.45, 0, 0.2, 1), top 760ms cubic-bezier(0.45, 0, 0.2, 1), opacity 260ms; }
.hcursor.hide { opacity: 0; }
.hcaps { display: none; }
.hbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: clamp(12px, 1.6vw, 22px); }
.hk { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line2); background: color-mix(in srgb, var(--s1) 55%, transparent); color: var(--muted); font: 600 12.5px var(--mono); transition: background 160ms, color 160ms, border-color 160ms, box-shadow 220ms; }
.hk kbd { padding: 2px 6px; border: 1px solid currentColor; font: inherit; }
.hk b { opacity: 0.6; font-weight: 600; }
.hk i { margin-left: 6px; font-style: normal; font-family: var(--sans); font-weight: 500; }
.hk.on { background: var(--acc); border-color: var(--acc); color: var(--on); box-shadow: 0 0 22px -4px var(--acc); }
@media (min-width: 1001px) { .hero-stage { width: min(100%, calc((100svh - 430px) * 1.5)); margin-left: auto; } }
@media (max-width: 560px) { .hk i { display: none; } }
.hbar { flex-wrap: nowrap; gap: 8px; }
.hk { padding: 6px 9px; font-size: 11.5px; gap: 5px; white-space: nowrap; }
.hk i { margin-left: 4px; }
@media (max-width: 760px) { .hbar { flex-wrap: wrap; } }

/* round: no flashing; a smaller cursor; one hotkey at a time under the preview */
.hcursor { width: 13px; height: 21px; margin: -2px 0 0 -2px; }
.hcursor i { display: none; }
.hbar { min-height: 38px; justify-content: center; }
.hk { opacity: 0; background: color-mix(in srgb, var(--s1) 70%, transparent); border-color: var(--line2); color: var(--fg); box-shadow: none; transition: opacity 140ms linear; }
.hk.on { opacity: 1; background: color-mix(in srgb, var(--s1) 70%, transparent); border-color: var(--acc); color: var(--fg); box-shadow: none; }
.hk b { opacity: 0.55; }

.win canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 110ms linear; user-select: none; }
.win canvas.on { opacity: 1; }
/* frames swap at once: a fade between two frames dips the picture (both are half there) and shows as a blink on every step */
.win img, .win canvas { transition: none; }

/* the compact panel in front is a little smaller; the hotkey shown under the preview is plain text with two small keys, always at the same spot */
@media (min-width: 1001px) { .win-compact { width: 26%; right: 1%; } }
.hbar { display: flex; justify-content: center; align-items: center; min-height: 30px; margin-top: clamp(10px, 1.4vw, 18px); }
/* The hotkey under the preview sits on top of a screenshot, so it carries its own ground and its own
   weight: at 11 px of muted text over a game frame, nobody reads it. Scoped to the hero strip. */
.hbar .hk { padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); background: color-mix(in srgb, var(--ground) 84%, transparent); gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--fg); }
.hbar .hk.on { border-color: color-mix(in srgb, var(--fg) 20%, transparent); background: color-mix(in srgb, var(--ground) 84%, transparent); color: var(--fg); }
.hbar .hk kbd { padding: 3px 9px; border: 1px solid color-mix(in srgb, var(--fg) 42%, transparent); background: color-mix(in srgb, var(--s1) 90%, transparent); color: var(--fg); font-weight: 700; }
.hbar .hk i { margin-left: 6px; color: var(--fg); }
.hbar .hk b { opacity: 0.9; }

/* zoom: nothing in the hero is sized from the screen's height any more. A height in CSS pixels shrinks when the page is zoomed in and grows when it is
   zoomed out, the opposite of everything sized in pixels or rems, so the demo moved against the rest of the page. Its width follows the page's width, like the
   words beside it. The tilt layer is not kept as a separate GPU layer either (a layer rasterised once looks soft when it tilts). */
.hero { padding-bottom: clamp(20px, 2.4vw, 36px); }
.hero-feats { margin-top: clamp(20px, 2.6vw, 40px); }
.hero-base { margin-top: clamp(14px, 1.6vw, 24px); }
.hero-grid { top: -10px; }
@media (min-width: 1001px) { .hero-stage { width: min(100%, 49vw); margin-left: auto; } }
.zoomable { will-change: auto; }

/* a very wide page (zoomed far out) keeps the hero and the bar at a working width, so the words and the demo do not drift apart */
.hero { max-width: 2000px; margin-inline: auto; }
.wb { max-width: 1960px; margin-inline: auto; }
@media (min-width: 1001px) { .hero-stage { width: min(100%, 49vw, 1100px); } }
/* the two windows are ordinary layers, not planes in one 3D space: a tilted compact panel used to cut through the main window (they met in 3D) and a wedge of it vanished */
.scene, .scene-inner { transform-style: flat; }
.win-main { z-index: 1; }
.win-compact { z-index: 2; transform: none; }

/* ---- questions: a list on the left, the answer large on the right ---- */
.faq-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; max-width: none; }
.faq-head .lede { margin-top: 12px; }
.faq-dc { flex: none; gap: 10px; }
.fq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.fq-list { border-bottom: 1px solid var(--line2); }
.fq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 14px; border: 0; border-top: 1px solid var(--line2); border-left: 2px solid transparent; background: none; color: var(--fg); font: 600 15px/1.35 var(--display); text-align: left; cursor: pointer; transition: background 160ms, border-color 160ms, color 160ms; }
.fq-q:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
.fq-i.on .fq-q { background: color-mix(in srgb, var(--acc) 12%, transparent); border-left-color: var(--acc); }
.fq-ch { flex: none; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); rotate: 45deg; transition: translate 160ms, border-color 160ms; }
.fq-i.on .fq-ch { border-color: var(--acc); translate: 3px 0; }
.fq-stage { position: sticky; top: 96px; }
.fq-a { padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--line2); border-top: 2px solid var(--acc); background: linear-gradient(160deg, color-mix(in srgb, var(--fg) 8%, transparent), color-mix(in srgb, var(--fg) 2.5%, transparent)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fq-a h3 { margin: 0 0 14px; font: 700 clamp(1.15rem, 1.7vw, 1.5rem)/1.25 var(--display); letter-spacing: -0.01em; }
.fq-body p { margin: 0 0 12px; max-width: 58ch; color: color-mix(in srgb, var(--fg) 84%, var(--ground)); font: 400 clamp(15px, 1.15vw, 17px)/1.7 var(--sans); }
.fq-body p:last-child { margin-bottom: 0; }
.fq-body a { color: var(--acc-t); }
@media (max-width: 860px) {
  .fq { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fq-stage { display: none; }
  .fq-a { margin: 0 0 4px; border-top-width: 1px; }
  .fq-a[hidden] { display: none; }
  .fq-i.on .fq-ch { rotate: 135deg; translate: 0 0; }
}
/* "Meet BuffrX" and "Free. Simple. No bloat." read as one block: no rule between them, a smaller gap */
#why::before, #why::after { display: none; }
#why { padding-top: clamp(48px, 5vw, 72px); }

/* the Tour opens straight on its first row (no heading of its own), and that row's title is the section's heading */
.row-copy h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.15; margin: 0; }
.tour > .row:first-child { margin-top: 0; }
.tour > .glass + .row, .tour > .row:first-of-type { margin-top: 0; }
/* more air around the rule between "Free. Simple. No bloat." and "Rewind your match." */
#why { padding-bottom: clamp(32px, 4vw, 64px); }
#features { --dv: clamp(56px, 6vw, 96px); padding-top: calc(clamp(56px, 6vw, 96px) + clamp(88px, 9vw, 140px)); }

/* the three small facts under the Tour sit in one box, the width of the rows above it, with a rule between them */
.facts { gap: 0; padding: clamp(22px, 2.6vw, 36px) 0; border: 1px solid var(--line2); border-top-color: color-mix(in srgb, var(--acc) 60%, var(--line2)); background: linear-gradient(160deg, color-mix(in srgb, var(--fg) 7%, transparent), color-mix(in srgb, var(--fg) 2%, transparent)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.facts li { gap: 8px; padding: 0 clamp(20px, 2.6vw, 40px); border-left: 1px solid var(--line2); align-content: start; }
.facts li:first-child { border-left: 0; }
.facts svg { margin-bottom: 4px; }
@media (max-width: 960px) {
  .facts { padding: 8px 0; }
  .facts li { padding: 18px clamp(18px, 4vw, 28px); border-left: 0; border-top: 1px solid var(--line2); }
  .facts li:first-child { border-top: 0; }
}
/* the Tour and "And plenty more." read as one stretch: no rule between them, and a much smaller gap */
#more::before, #more::after { display: none; }
#tour { padding-bottom: clamp(40px, 4vw, 64px); }
#more { padding-top: clamp(40px, 4vw, 64px); }

/* the hotkey shown during the run sits right under the main window, at its left edge, in capitals */
.hero-stage { position: relative; }
.hero-stage .hbar { position: absolute; left: 0; right: 0; top: calc(90.9% + 10px); justify-content: center; min-height: 0; margin: 0; flex-wrap: nowrap; pointer-events: none; }
.hk { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }
.hk i { font-family: var(--mono); font-weight: 600; letter-spacing: 0.1em; }
.hk kbd { text-transform: uppercase; }

/* the rule above "Rewind your match." is the hero's notched line, turned upside down */
#features::before, #features::after { display: none; }
.notch { position: absolute; z-index: 0; top: var(--dv); inset-inline: 24px; width: calc(100% - 48px); height: 38px; fill: none; stroke: var(--acc); stroke-width: 2; pointer-events: none; overflow: visible; }
.notch path { vector-effect: non-scaling-stroke; }
@media (max-width: 720px) { .notch { inset-inline: 16px; width: calc(100% - 32px); } }
/* the turned notch is exactly as long as the hero's own line above it (the hero's width, less its side padding), centred on the page */
.notch { inset-inline: auto; left: 50%; translate: -50% 0; width: calc(min(100vw - var(--sbw, 0px), 2000px) - 2 * clamp(24px, 3vw, 64px)); }
@media (max-width: 1000px) { .notch { display: none; } }
@media (max-width: 1000px) { #features::before, #features::after { display: block; } }
.notch { max-width: none; width: calc(min(100vw - var(--sbw, 0px), 2000px) - 2 * clamp(40px, 6.5vw, 130px)); }
/* theme swatches: the swatch sits dead centre in its box, the same gap on all four sides, and the selected frame is a plain even square */
.th { box-sizing: border-box; width: 38px; height: 30px; padding: 0; gap: 0; display: grid; place-items: center; transform: none; }
.th:hover { transform: none; }
.th .sw3 { box-sizing: border-box; width: 26px; height: 18px; grid-template-columns: repeat(3, 8px); }
.th .sw3 i { width: 8px; height: 16px; }
@media (max-width: 760px) { .th { width: 32px; } }

/* the product chips are always one straight row: they share the width when there is room, and scroll sideways when there is not */
#chips.chips { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#chips.chips::-webkit-scrollbar { display: none; }
#chips.chips button { flex: 1 0 auto; white-space: nowrap; padding-inline: clamp(8px, 1.1vw, 18px); font-size: clamp(11px, 0.95vw, 13px); }

/* one rhythm for every section rule: the space above the rule and the space under it are the same (--g), so no line sits nearer one side */
:root { --g: clamp(72px, 7vw, 120px); }
.sec[id]:not(#x):not(#about):not(#why):not(#more) { --dv: calc(var(--g) / 2); padding-top: calc(var(--g) * 1.5); padding-bottom: calc(var(--g) / 2); }
#why, #more { padding-bottom: calc(var(--g) / 2); }

/* pictures arrive whole: a short fade and a small rise, no wipe from the top, no blur */
@keyframes paneSoft { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } }
.js .pane[data-r='pane'].in { animation: paneSoft 620ms cubic-bezier(0.22, 0.7, 0.2, 1) backwards; clip-path: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .js .pane[data-r='pane'].in { animation: none; } }

/* ---- reading text: Exo 2, set a size larger and spaced out (a little open tracking, a taller line) ---- */
@font-face { font-family: 'Exo 2'; src: url('fonts/exo-2-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/exo-2-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('fonts/exo-2-latin-600-normal.woff2') format('woff2'); font-weight: 600 900; font-display: swap; }
:root { --sans: 'Exo 2', 'IBM Plex Sans', system-ui, 'Segoe UI', Roboto, sans-serif; }
body { font-size: 16px; letter-spacing: 0.02em; }
.lede, .row-copy p, .facts span, .priv-grid span, .why-grid span, .more-grid span, .tl-steps span, .hero-feats span, .fq-body p, .fine, .cmp-note, .get-note, .plain, .tile p, .lines span, .verdict p, .claim p { font-family: var(--sans); letter-spacing: 0.03em; }
.lede { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; }
.row-copy p, .why-grid span, .tl-steps span, .more-grid span, .facts span { font-size: 16px; line-height: 1.75; }
.hero-feats span, .priv-grid span, .tile p, .lines span, .verdict p, .claim p { font-size: 15.5px; line-height: 1.65; }
.fine, .cmp-note, .get-note { font-size: 14.5px; letter-spacing: 0.03em; }
.fq-body p { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.8; }
.site-foot { font-size: 14px; letter-spacing: 0.03em; }
.hk i { letter-spacing: 0.1em; }

/* the two plans are the same height inside, and the two buttons are the same size on the same line */
.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan .perks { flex: 1; }
.plan > .btn { width: 100%; height: 50px; min-height: 50px; margin-top: 22px; justify-content: center; }
.plan, .plan.prem { padding-bottom: 32px; }

/* the bar is in capitals, and nothing in it is clipped at the end */
.wb, .wb a, .wb-dl, .wb-tabs a span { text-transform: uppercase; letter-spacing: 0.06em; }
.wb-tabs { padding-right: 2px; }
@media (min-width: 1321px) { .wb-tabs { overflow: visible; } }
@media (max-width: 1399px) { .wb-tabs a { padding: 0 8px; } .wb-tabs a span { display: none; } .wb-tabs a[aria-current='true'] span { display: inline; } .wb-link { display: none; } .wb-tabs { overflow-x: auto; } }
@media (min-width: 1400px) { .wb-tabs { overflow: visible; } }

/* no numbers in the bar; every tab shows its name; the spacing is between the letters (tracking), not between words */
.wb-tabs a b { display: none; }
.wb-tabs a span, .wb-tabs a[aria-current='true'] span { display: inline; }
.wb, .wb a, .wb-dl { letter-spacing: 0.12em; word-spacing: 0; }
.wb-tabs a { padding: 0 clamp(8px, 1vw, 16px); gap: 0; }
.wb-tabs { overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1400px) { .wb-tabs { overflow: visible; } }
@media (max-width: 1100px) { .wb-ico { display: none; } .wb-themes { display: none; } }

/* ---- polish pass: a 12 px floor for text, real touch targets, a calmer bar on a phone ---- */
.pane figcaption, .wire .k, .verdict h3, .hk, .hk kbd, kbd, .dlg-top span, .tl-tag { font-size: max(12px, 1em); }
.pane figcaption, .wire .k, .verdict h3 { font-size: 12px; }
#chips.chips button { font-size: clamp(12px, 0.95vw, 13px); }
.site-foot a, .site-foot .foot-btn { padding-block: 6px; }
@media (max-width: 760px) {
  .btn { min-height: 48px; }
  .hero-left .cta .btn { min-height: 48px; padding-block: 12px; }
  .wb-dl { letter-spacing: 0.06em; padding-inline: 12px; font-size: 12px; }
  .wb-tabs a { padding-inline: 8px; letter-spacing: 0.08em; font-size: 12px; }
}
@media (pointer: coarse) { .site-foot a, .site-foot .foot-btn, .qa a, .facts a, .th { min-height: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 760px) { .wb { height: 60px; } :root { --nav: 72px; } }

/* the expanded panel with the compact panel in front of it, at the foot of the picture */
.pane:has(.mini) { overflow: visible; margin-bottom: clamp(24px, 4vw, 56px); }
.pane .mini { position: absolute; z-index: 2; right: clamp(-28px, -2vw, -10px); bottom: clamp(-56px, -4vw, -20px); width: 25%; display: block; outline: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); box-shadow: 0 30px 60px -24px var(--shade); background: var(--s1); line-height: 0; }
.pane .mini img { display: block; width: 100%; height: auto; }
@media (max-width: 960px) { .pane .mini { right: 4px; bottom: -28px; width: 30%; } }

/* a quiet hint under the panel picture: the pictures open full size */
.pane .pane-hint { position: absolute; left: 0; top: calc(100% + 14px); margin: 0; font: 500 12px/16px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pane .pane-hint b { color: var(--acc); font-weight: 700; }
@media (max-width: 960px) { .pane .pane-hint { top: calc(100% + 12px); } }
@media (max-width: 960px) { .pane .pane-hint { max-width: 62%; } }

/* ===== phone overhaul (2026-11-09): a menu instead of a sideways strip of tabs, a shorter page, calmer rows, a way back to the top ===== */
.wb-menu, .sheet, .sheet-scrim, .to-top { display: none; }
html.menu-open { overflow: hidden; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 760px) {
  :root { --g: 44px; }
  html { -webkit-text-size-adjust: 100%; }
  a, button, [role='radio'] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

  /* the bar: logo, the section you are in (opens the menu), Download */
  .wb .wb-tabs, .wb .wb-themes, .wb .wb-ico, .wb .wb-grow, .wb .wb-link { display: none; }
  .wb-menu { display: flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px; padding: 0 14px; border: 0; background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); font: 700 13px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 160ms; }
  .wb-menu:active { background: color-mix(in srgb, var(--fg) 14%, transparent); }
  .wb-menu span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wb-menu svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }
  .wb-menu .cls, .wb-menu[aria-expanded='true'] .ham { display: none; }
  .wb-menu[aria-expanded='true'] .cls { display: block; }
  .wb .wb-dl { padding-inline: 14px; }

  /* the menu: every section one tap away, the theme, and the two links that were in the bar */
  .sheet-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 48; background: color-mix(in srgb, var(--ground) 62%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: scrimIn 160ms ease-out; }
  .sheet:not([hidden]) { display: block; position: fixed; z-index: 49; top: calc(var(--nav) + var(--nav-top) + 26px); left: 8px; right: 8px; max-height: calc(100svh - 88px); overflow-y: auto; overscroll-behavior: contain; background: var(--s1); border: 1px solid var(--line2); box-shadow: 0 30px 60px -20px var(--shade); animation: sheetIn 180ms var(--ease); }
  .sheet-links { list-style: none; margin: 0; padding: 0; }
  .sheet-links a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--fg); font: 600 15px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
  .sheet-links a::after { content: ''; width: 7px; height: 7px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); opacity: 0.7; }
  .sheet-links a:active { background: color-mix(in srgb, var(--fg) 8%, transparent); }
  .sheet-links a[aria-current='true'] { background: color-mix(in srgb, var(--acc) 14%, transparent); box-shadow: inset 3px 0 0 var(--acc); }
  .sheet-links a[aria-current='true']::after { border-color: var(--acc); opacity: 1; }
  .sheet-foot { display: grid; gap: 14px; padding: 16px 16px 18px; }
  .sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font: 600 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
  .sheet .wb-themes { display: flex !important; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; }
  .sheet .th { width: 50px; height: 44px; }
  .sheet .th .sw3 { grid-template-columns: repeat(3, 9px); height: 16px; }
  .sheet-btns a { flex: 1; display: grid; place-items: center; min-height: 48px; border: 1px solid var(--line2); color: var(--fg); text-decoration: none; letter-spacing: 0.12em; }
  .sheet-btns a:active { background: color-mix(in srgb, var(--fg) 8%, transparent); }

  /* back to the top, once the page is long behind you */
  .to-top { display: grid; place-items: center; position: fixed; z-index: 40; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 48px; height: 48px; background: var(--s1); border: 1px solid var(--line2); color: var(--fg); box-shadow: 0 12px 28px -12px var(--shade); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 180ms, transform 180ms var(--ease), visibility 0s 180ms; }
  .to-top.show { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-open .to-top { visibility: hidden; }
  .to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }

  /* reading: bigger headings to scan by, copy that is a little less airy */
  .sec-head h2, #about h2 { font-size: clamp(28px, 8.2vw, 30px); line-height: 1.1; }
  .get h2 { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.1; }
  .row-copy h3 { font-size: 24px; line-height: 1.15; }
  .lede { font-size: 17px; line-height: 1.55; }
  .row-copy p, .why-grid span, .tl-steps span, .more-grid span, .facts span { font-size: 15.5px; line-height: 1.6; }
  .priv-grid span { font-size: 15px; line-height: 1.5; }
  .sec-head { margin-bottom: 22px; }
  .why-grid { gap: 18px; }
  .why-grid li { padding-top: 16px; gap: 6px; }
  .tl-steps { gap: 18px; margin-top: 22px; }
  .row { gap: 18px; margin-top: 40px; }
  .row-copy p { margin-top: 8px; }

  /* "And plenty more": an icon beside each item instead of above it, so nine items take far less scrolling */
  .more .more-grid { gap: 0; }
  .more .more-grid li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; padding: 16px 0; }
  .more .more-grid svg { grid-row: 1 / 3; width: 24px; height: 24px; margin: 1px 0 0; }
  .more .more-grid b { font-size: 1rem; }
  .more .more-grid span { grid-column: 2; }

  /* the comparison's choices wrap instead of scrolling sideways */
  #chips.chips { flex-wrap: wrap; overflow: visible; }
  #chips.chips button { flex: 1 1 auto; min-height: 44px; font-size: 12px; }

  /* system requirements: one row per line, so every value starts on the same edge; the label column
     narrows to leave the value room on a phone */
  .reqs > div { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; padding: 14px 0; }
  .reqs-box { margin-top: 28px; }
}
@media (max-width: 760px) and (max-height: 700px) { .sheet-links a { min-height: 46px; } .sheet-foot { padding-block: 12px 14px; gap: 10px; } }

/* faster hero run: the cursor's trip is shorter; the hotkey caption is smaller */
.hcursor { transition: left 560ms cubic-bezier(0.45, 0, 0.2, 1), top 560ms cubic-bezier(0.45, 0, 0.2, 1), opacity 200ms; }
.hk { gap: 5px; letter-spacing: 0.05em; }
.hk kbd { padding: 1px 5px; }
.hk i { margin-left: 2px; letter-spacing: 0.06em; }
.hk, .hk kbd, .hk i { font-size: 11px; }
@media (max-width: 760px) { .hero { padding-top: calc(var(--nav) + 28px); } }

/* audit fixes, 2026-11-09: the bar fits its markers between 761 and 860; the comparison's choices wrap
   instead of scrolling sideways with no cue; billing tabs take the 44px touch floor; Sandstorm's wire
   status text clears 4.5:1; the Tour hint says Tap on a touch screen; new hero frames stay hidden
   until drawn, so a theme change never flashes an empty picture */
@media (max-width: 860px) and (min-width: 761px) {
  .wb-tag { width: 64px; }
  .wb-tag i { width: 42px; height: 15px; }
  .wb-tabs a { padding-inline: 4px; }
}
@media (max-width: 1100px) {
  #chips.chips { flex-wrap: wrap; overflow: visible; }
  #chips.chips button { min-height: 44px; }
}
#billing button { min-height: 44px; }
[data-theme='sandstorm'] #wireState[data-tone='ok'] { color: #2e5a18; }
[data-theme='sandstorm'] #wireState[data-tone='warn'] { color: #7d4a00; }
.pane-hint .tap { display: none; }
@media (pointer: coarse) {
  .pane-hint .click { display: none; }
  .pane-hint .tap { display: inline; }
}
canvas.fr.pending { display: none; }

/* theme swap ring: the accent spreads from the swatch while the page itself swaps in one frame */
.ring {
  position: fixed; left: var(--x); top: var(--y);
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border-radius: 50%; border: 2px solid var(--acc);
  pointer-events: none; z-index: 120; opacity: 0;
}
/* the footer wraps instead of pushing the page sideways between 900 and ~1180 */
@media (min-width: 900px) { .site-foot { flex-wrap: wrap; } }

/* the bar holds its own colour through the theme wipe: a snapshot drops backdrop-filter, which left the glass bar see-through */
html.wiping .wb { background: var(--s1); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* the timeline steps share one grid: a fixed first row puts every heading and paragraph on the same line */
.tl-steps li { grid-template-rows: 30px auto; }
.tl-steps span { align-self: start; }

/* a tall window (a zoomed-out browser) stretched the hero to the full viewport and left two holes around a width-bound picture: it stops growing at 900 px */
@media (min-width: 1001px) { .hero { min-height: min(100svh, 900px); } }

/* Timeline and Tour are one section now: the tour starts with air after the steps */
#features .tour { margin-top: clamp(40px, 5vw, 72px); }

/* more air under the bar: the hero opened right against it */
@media (min-width: 1001px) { .hero { padding-top: calc(var(--nav) + clamp(56px, 5.5vw, 104px)); } }

/* the trust row no longer stands there before the hero: it waits for the headline and fades in after the copy */
.js:not(.title-go) .hero-trust { opacity: 0; }
.hero-trust { animation: fadeUp 700ms var(--ease) 1450ms both; }
@media (prefers-reduced-motion: reduce) { .hero-trust { animation: none; } }


/* the version the Download button fetches: one small line under the buttons, not a paragraph */
.dl-ver { margin-top: 10px; color: color-mix(in srgb, var(--on) 88%, transparent); font: 700 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; }

/* The hero is one screen: a real breath under the bar, and the four strip items at the foot of the
   viewport instead of wherever the demo happens to end. The later rule replaces an earlier cap that
   stopped the hero at 900px on tall screens. */
@media (min-width: 1001px) {
  .hero { min-height: 100svh; padding-top: calc(var(--nav) + clamp(28px, 3vw, 64px)); }
  .hero-feats { margin-top: auto; }
  /* a shorter screen gets a smaller demo, so the four strip items stay on the first screen */
  .hero-stage { width: min(100%, calc((100svh - 520px) * 1.5)); }
}

/* The hero's line is longer than the one it replaced: the words get a little more of the grid so it
   holds two lines on a desktop, and the demo keeps the larger share. */
@media (min-width: 1001px) {
  .hero-grid { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); }
  .hero-left .lede { max-width: 58ch; }
}
/* The Timeline steps end and the Tour begins in the same section: give the tour its own air so the
   numbered steps and the panel picture do not read as one block. */
.tl-steps + .tour { margin-top: clamp(88px, 9vw, 150px); }

/* "And plenty more" follows the facts card closely: its old top padding left a hole. */
#more { padding-top: clamp(8px, 1.2vw, 20px); }

/* The billing pills were 44px tall and read as buttons, not a segmented control. Desktop keeps a
   slimmer bar; a coarse pointer keeps the 44px touch target. */
.billing { padding: 2px; }
.billing button { height: 36px; min-height: 36px; }
@media (pointer: coarse) {
  .billing button { height: 44px; min-height: 44px; }
}
/* The bar is 6px lower now, so everything that measured from the very top moves with it. */
html { scroll-padding-top: calc(var(--nav) + var(--nav-top) + 8px); }
/* The close's big B arrives with the ember field, not before it: it used to sit on the dark ground
   while the field wiped in behind. Same trigger as the field (`.get.in`), one beat behind it. */
.js .get-mark { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 900ms var(--ease) 180ms, transform 1200ms var(--ease) 180ms; }
.js .get.in .get-mark { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .get-mark { opacity: 1; transform: none; transition: none; }
}
/* The whole hero sits a tenth of the screen higher: the words, the demo and the four strip items
   move together, and the room that frees up lands under the strip rather than above it. */
@media (min-width: 1001px) {
  /* The hero is a tenth of a screen shorter, so the strip and everything after it sit higher; the words
     stay where they were, which is what lifting the block by a transform got wrong (it left a hole). */
  .hero { min-height: 91svh; }
}
/* "Meet BuffrX." and its two rows hug the line above and leave a hole under them: the block is pushed
   down to sit between the two rules, and the Timeline's own top padding gives some of that room back. */
#about { padding-top: clamp(32px, 3.2vw, 56px); padding-bottom: clamp(4px, 0.8vw, 12px); }
#features { padding-top: clamp(72px, 6.6vw, 96px); }
/* ---- final touches ---- */
/* hero demo +10%: wider column and a taller-screen-bound stage */
@media (min-width: 1001px) {
  .hero-grid { grid-template-columns: minmax(300px, 3.2fr) minmax(0, 8.8fr); }
  /* the demo is a picture: it never drops below 46% of the window, or a short screen leaves it stranded in a wide column */
  .hero-stage { width: min(100%, clamp(520px, max(46vw, calc((100svh - 420px) * 1.65)), 1100px)); }
}
/* a short screen — a phone on its side, a window dragged low - gets a demo that answers to the height, not to the width */
@media (min-width: 560px) and (max-width: 1000px) and (max-height: 620px) {
  .hero-stage { width: min(100%, calc((100svh - 200px) * 1.55)); margin-inline: auto; }
}

/* more air between the timeline steps and the tour (the id rule above beat the earlier clamp) */
#features .tl-steps + .tour { margin-top: clamp(130px, 13vw, 220px); }
/* tour pictures larger, rows further apart */
.tour { max-width: 1440px; }
@media (min-width: 961px) {
  .row { grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); margin-top: clamp(96px, 11vw, 176px); }
  .row.flip { grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr); }
}
.tour > .row:first-child, .tour > .row:first-of-type { margin-top: 0; }
.float-dlg { width: min(100%, 520px); }
/* billing: slimmer, three equal cells, so the white highlight is the same size on each */
.billing { display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 3px; margin-bottom: 28px; }
.billing button { height: 30px; min-height: 30px; padding: 0 22px; min-width: 104px; }
@media (pointer: coarse) { .billing button { height: 40px; min-height: 40px; } }
/* pricing: roomier cards, one clear header, price, four rows, button, joke in flow */
.plans { gap: clamp(24px, 3vw, 40px); max-width: 1000px; margin-inline: auto; }
.billing { display: grid; width: max-content; margin-inline: auto; }
.plan, .plan.prem { padding: clamp(28px, 3.2vw, 44px); padding-bottom: clamp(24px, 2.6vw, 36px); gap: 0; }
.plan-head h3 { margin: 0; font-size: 1.35rem; }
.plan-head p { margin: 6px 0 0; color: var(--muted); font: 500 15px var(--sans); }
.plan .price { margin: 26px 0 28px; align-items: baseline; }
.plan .perks li { padding: 16px 0; gap: 4px; }
.plan .perks b { font-size: 16px; }
.plan .perks span { font-size: 15px; line-height: 1.5; }
.plan > .btn { margin-top: 32px; }
.plan .nope, .plan .nope-gap { position: static; display: block; margin: 14px 0 0; min-height: 1.5em; text-align: center; }
/* the per-line stays on the price's row, never under it */
.plan .price { flex-wrap: nowrap; gap: 10px; }
.plan .price b { font-size: 2.4rem; min-width: 0; }
.plan .price s { font-size: 1.15rem; }
.plan .price [data-k='per'], .plan .price span { font-size: 14px; white-space: nowrap; }
/* demo nudged right, away from the headline */
@media (min-width: 1001px) { .hero-stage { left: clamp(0px, 2.8vw, 64px); } }
.float-dlg { width: min(100%, 400px); }

/* the trailer's place: an empty frame the size the video will be */
.trailer-slot { display: grid; place-items: center; max-width: 1060px; margin: 0 auto clamp(44px, 5vw, 72px); aspect-ratio: 16 / 9; }
.trailer-slot span { color: var(--muted); font: 700 13px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.trailer-slot video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--s1); }

/* the trailer's frame: accent edge, a glow, and corner brackets standing off it */
.trailer-slot { overflow: visible; border: 2px solid var(--acc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 12%, transparent), 0 0 70px -6px color-mix(in srgb, var(--acc) 45%, transparent), 0 40px 80px -30px var(--shade); }
.trailer-slot[data-r='pane']::before, .trailer-slot[data-r='pane']::after { display: block; content: ''; position: absolute; inset: -16px; opacity: 1; pointer-events: none; z-index: 5; transition: none; }
.trailer-slot[data-r='pane']::before { background:
  linear-gradient(var(--acc), var(--acc)) 0 0 / 28px 3px no-repeat, linear-gradient(var(--acc), var(--acc)) 0 0 / 3px 28px no-repeat,
  linear-gradient(var(--acc), var(--acc)) 100% 0 / 28px 3px no-repeat, linear-gradient(var(--acc), var(--acc)) 100% 0 / 3px 28px no-repeat; }
.trailer-slot[data-r='pane']::after { background:
  linear-gradient(var(--acc), var(--acc)) 0 100% / 28px 3px no-repeat, linear-gradient(var(--acc), var(--acc)) 0 100% / 3px 28px no-repeat,
  linear-gradient(var(--acc), var(--acc)) 100% 100% / 28px 3px no-repeat, linear-gradient(var(--acc), var(--acc)) 100% 100% / 3px 28px no-repeat; }
.trailer-slot video { pointer-events: none; }
/* the three cards stay without their heading: closer to the About cards above them */
#about { padding-bottom: 0; }
#why { padding-top: clamp(40px, 4.5vw, 72px); }

/* ===== phone only (2026-11-10): short words, full-width pictures, room under the bar, calm scrolling ===== */
@media (max-width: 760px) {
  html { scroll-behavior: smooth; }
  body { font-size: 16px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
  .sec { padding-top: clamp(56px, 15vw, 76px); padding-inline: 20px; }
  .sec-head { margin-bottom: 24px; }
  h2 { font-size: clamp(1.6rem, 7.2vw, 2rem); line-height: 1.12; }

  /* the hero: air under the bar, no key pop-up under the demo, the four strip items as a compact grid */
  .hero { padding-top: calc(var(--nav) + 44px); }
  .hero-grid { top: 0; gap: 26px; }
  .hbar { display: none; }
  .hero-left .lede { max-width: none; font-size: 17px; }
  .hero-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin-top: 28px; }
  .hero-feats li { padding: 0; border: 0; }
  .hero-feats span { display: none; }
  .hero-base { display: none; }

  /* few words: every description holds two lines at most */
  .row-copy p, .why-grid span, .tl-steps span, .facts span, .more-grid span, .priv-grid span, .sec-head .lede {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    font-size: 15.5px; line-height: 1.55; max-width: none;
  }
  .row-copy .wire { display: none; }

  /* rows: one column, the picture full width and big enough to read */
  .row, .row.flip { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 52px; }
  .row.flip .row-copy { order: 0; }
  .row-copy h3 { font-size: 1.35rem; }
  .row .pane, .float-dlg { width: 100%; max-width: 100%; }
  .float-dlg { max-width: 340px; margin-inline: auto; }
  .pane figcaption { white-space: nowrap; width: max-content; max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; }
  .pane .mini { width: 34%; right: 8px; bottom: -20px; }
  .pane .pane-hint { display: none; }
  .row .pane { margin-bottom: 26px; }
  .tl-pane { margin-inline: -8px; }
  .tl-steps { gap: 16px; margin-top: 26px; }
  .tl-steps li { grid-template-rows: auto; }
  #features .tl-steps + .tour { margin-top: 64px; }
  .why-grid, .facts { gap: 22px; }
  .trailer-slot { margin-bottom: 36px; }

  /* tap targets and readable small print */
  .btn, .billing button { min-height: 48px; }
  .plans { gap: 28px; }
  dt, .qa .q { font-size: 1.05rem; }
}

/* ===== phone only, round two: less to read, fewer parts ===== */
@media (max-width: 760px) {
  /* "And plenty more" comes back (site.css hid it on phones), as a plain list of titles */
  #more.sec { display: block !important; padding-top: clamp(40px, 10vw, 56px); }
  .more .sec-head .lede { display: none; }
  .more .more-grid li { padding: 12px 0; }
  .more .more-grid span { display: none; }

  /* parts a phone does not need: Roadmap, Pricing, System requirements (and their menu links) */
  #roadmap, #pricing, .reqs-box,
  a[href='#roadmap'], a[href='#pricing'] { display: none !important; }

  /* titles carry the message; descriptions only where a heading alone says too little */
  .sec-head .lede, .row-copy p, .tl-steps span, .facts span, .priv-grid span, #why .why-grid span { display: none; }
  #about .why-grid span { display: -webkit-box; }
  .tl-steps { gap: 12px; }
  .tl-steps li { align-items: center; }
  .facts li { padding-top: 14px; }
  .why-grid, .facts { gap: 14px; }
  .row, .row.flip { margin-top: 44px; gap: 16px; }
}

/* short explainers exist only for phones; two extra "plenty more" lines too */
.m-short, .more-grid .m-only { display: none; }
@media (max-width: 760px) {
  #why .why-grid .m-short, .facts .m-short { display: block; color: var(--muted); font-size: 15px; line-height: 1.5; }
  .more .more-grid .m-only { display: grid; }
}
@media (max-width: 760px) {
  /* the two facts moved into "And plenty more" on phones, with their one-line explainers */
  .tour .facts { display: none; }
  .more .more-grid .m-only .m-short { display: none; }
}

@media (max-width: 760px) {
  /* the compare chart, short: the first five rows only, tighter cells, just the "best for" verdict */
  #cmp tbody tr:nth-child(n+6) { display: none; }
  #cmp tbody tr { margin-bottom: 8px; }
  #cmp tbody td, #cmp tbody th { padding-block: 8px; }
  .verdict > div:not(:first-child) { display: none; }
  .cmp-note { display: none; }
}

/* ===== phone only, round three: what each part says, and how wide it stands ===== */
@media (max-width: 760px) {
  /* the three cards keep their full sentence on a phone */
  #why .why-grid > li > span:not(.m-short) { display: block; overflow: visible; }
  #why .why-grid .m-short { display: none; }

  /* "Why it exists" takes the short line instead */
  #about .why-grid li.why-short > span:not(.m-short) { display: none; }
  #about .why-grid li.why-short .m-short { display: block; color: var(--muted); font-size: 15px; line-height: 1.5; }

  /* the three Timeline steps run across the phone, number over title */
  .tl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .tl-steps li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; align-items: start; }
  .tl-steps i { grid-row: auto; width: 26px; height: 26px; font-size: 13px; }
  .tl-steps b { font-size: 0.85rem; line-height: 1.25; }

  /* the share sheet is a picture of a dialog: it does not need the whole width */
  .share-row .float-dlg { max-width: 260px; }
}

/* phone: the hero arrives as one short run instead of a slow queue, so the two buttons are there at once */
@media (max-width: 760px) {
  .hero h1 .st1 { animation: stClip 520ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms both; }
  .hero h1 .st2 { animation: stCut 520ms cubic-bezier(0.7, 0, 0.2, 1) 240ms both, stGlitch 200ms steps(3, jump-none) 700ms both; }
  .hero h1 .st3 { animation: stSend 520ms cubic-bezier(0.16, 0.84, 0.3, 1) 470ms both, stGlitch 200ms steps(3, jump-none) 880ms both; }
  .hero .lede { animation-delay: 600ms; animation-duration: 620ms; }
  .hero .cta { animation-delay: 720ms; animation-duration: 520ms; }
  .hero .fine { animation-delay: 800ms; }
  .hero-trust { animation-delay: 860ms; animation-duration: 480ms; }
}

/* phone: a rule under the four features, so they end before "Meet BuffrX." begins */
@media (max-width: 760px) {
  .hero-feats { border-bottom: 1px solid var(--line2); padding-bottom: 28px; }
  #about { padding-top: 26px; }
}

/* phone: the rule above "Everything you need" sits the same distance from the text on both sides */
@media (max-width: 760px) {
  #why { padding-top: 20px; }
  #why .why-grid li:first-child { padding-top: 20px; }
}

/* phone: more air between a row's headline and the picture under it */
@media (max-width: 760px) {
  .row, .row.flip { gap: 34px; }
}

/* phone: the last row hands straight over to "And plenty more" */
@media (max-width: 760px) {
  #features { padding-bottom: 6px; }
  .share-row .float-dlg { margin-bottom: 0; }
  #more.sec { margin-top: 0; padding-top: 28px; }
}

/* phone: the feature rows read from the middle — the headline, the picture and its caption */
@media (max-width: 760px) {
  .row .row-copy { text-align: center; }
  .row .row-copy p { margin-inline: auto; }
  .row .pane { margin-inline: auto; }
  .row .pane figcaption { left: 50%; transform: translateX(-50%); }

  /* the Timeline's headline and its three steps sit on the same middle axis */
  #features > .sec-head { text-align: center; }
  #features > .sec-head .lede { margin-inline: auto; }
  .tl-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .tl-steps b { align-self: center; }
}

/* a cursor switch means nothing on a touch screen */
@media (pointer: coarse) { #xhsw { display: none; } }