/* Hardpost marketing site v20. White, airy, soft sky gradients and layered shadows (direction: commas.com),
   made ours with the live cut demo, the live B roll editor, real product snippets and the looping headline.
   Plain CSS, no build step. Brand: docs/brand/BRAND.md.
   Owner rules: no dashes in copy, no serif or mono display type, no "AI" tags, no neon glows, no gradient body text.
   Motion (full spec table at the top of site.js): press 120ms scale(.97), hover lift 1 to 3px at 220ms. Scroll
   entrances, text reveals, parallax, callouts, the lightbox and Lenis smooth scrolling are GSAP, loaded after first
   paint by site.js; nothing here hides content, so without that layer the page simply rests in its final state.
   Transform, opacity, filter only (the FAQ height is the one sanctioned exception). Reduced motion: final states,
   no smooth scroll, nothing loops. */

/* Metric matched fallbacks so the font swap does not move the layout (CLS near 0). */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); ascent-override: 90.4%; descent-override: 22.5%; line-gap-override: 0%; size-adjust: 107.1%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); ascent-override: 96.8%; descent-override: 24.1%; line-gap-override: 0%; size-adjust: 100%; }

:root {
  --bg: #ffffff;
  --tint: #f7f9fc;
  --sky: #eaf3fe;
  --ink: #141414;
  --ink2: #5b6472;
  --ink3: #66707d;           /* 4.9:1 on white, 4.6:1 on the tinted sections: small grey text stays readable */
  --line: #eef0f3;
  --line2: #e4e7ec;
  --accent: #138cf5;
  --accent-ink: #0b6fd6;
  --accent-wash: #f0f7ff;
  --cut: #e5484d;
  --cut-ink: #b4292e;
  --cut-wash: #fdecec;
  --ok: #16a34a;
  --ph: #138cf5;
  --dark: #0f1b2b;

  --grad-brand: linear-gradient(145deg, #7dd3fc 0%, #138cf5 55%, #0b5fc7 100%);
  --grad-btn: linear-gradient(180deg, #88c0fd, #2e78ef);
  /* Every gradient fill goes through --grad-fill, which pins the origin to border-box in the same declaration. The
     background shorthand resets background-origin to padding-box, so a gradient set with plain var(--grad-btn) tiles
     into any border and its light top colour shows as a line along the bottom edge (the owner's "white underline").
     tests/test_site_polish.py fails if a gradient is set without border-box. */
  --grad-fill: var(--grad-btn) border-box;
  /* BRAND.md button shadow: hairline drop plus the two inner bevels. No coloured glow under the button. */
  --sh-btn: 0 1px 2px rgb(16 24 40 / .08), inset -1px -1px 1px rgb(28 72 143 / .5), inset 1px 1px 1px rgb(255 255 255 / .5);

  --sh-1: 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .04);
  --sh-2: 0 1px 2px rgb(16 24 40 / .04), 0 4px 10px -2px rgb(16 24 40 / .05), 0 14px 28px -8px rgb(16 24 40 / .07);
  --sh-3: 0 2px 4px rgb(16 24 40 / .03), 0 12px 24px -8px rgb(16 24 40 / .08), 0 32px 64px -20px rgb(19 90 180 / .18);
  --sh-blue: 0 2px 4px rgb(16 24 40 / .03), 0 16px 32px -10px rgb(19 110 230 / .18), 0 40px 80px -24px rgb(19 110 230 / .22);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --sh-lift: 0 2px 4px rgb(16 24 40 / .04), 0 18px 36px -14px rgb(19 80 170 / .2);

  --wrap: 1152px;
  --gut: 24px;
  --r-card: 20px;
  --font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Inter Tight", "Inter Tight Fallback", "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: clip; scrollbar-gutter: stable; }
/* Lenis (smooth wheel scrolling on mouse and trackpad only, set up by site.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink2);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; }
h1, h2 { font-family: var(--display); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; }
b, strong { color: var(--ink); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgb(19 140 245 / .2); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.top-sentinel { position: absolute; top: 0; left: 0; height: 8px; width: 1px; }
.wrap { max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding-inline: var(--gut); }

/* ---------- Buttons: the gradient with inner shading (BRAND.md), and a white hairline secondary ----------
   The shared base for every gradient button on the site, the affiliate page and (copied) the sign in page:
   border 0 and the gradient pinned to border-box, so no light line can ever show along the bottom edge. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
  background: var(--grad-fill); color: #fff; box-shadow: var(--sh-btn);
  font: 600 15px/1 var(--font); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 1px rgb(28 72 143 / .22);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: filter 160ms ease, transform 160ms var(--ease-out), box-shadow 160ms ease, background-color 160ms ease;
}
.btn:active { transform: scale(.97); transition-duration: 160ms, 120ms, 160ms, 160ms; box-shadow: inset 0 1px 2px rgb(16 40 90 / .25), 0 1px 2px rgb(16 24 40 / .08); }
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.06); transform: translateY(-1px); } .btn:hover:active { transform: scale(.97); } }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn-xs { height: 30px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
.btn-lg { height: 50px; padding: 0 22px; font-size: 16px; }
.btn-full { width: 100%; }
.btn-line { background: #fff; color: var(--ink); text-shadow: none; box-shadow: 0 1px 2px rgb(16 24 40 / .05), inset 0 0 0 1px var(--line2); }
.btn-line:active { box-shadow: inset 0 0 0 1px #d6dbe2, inset 0 1px 2px rgb(16 24 40 / .08); }
.btn-ink { background: linear-gradient(180deg, #3a3f47, #141414) border-box; box-shadow: 0 1px 2px rgb(0 0 0 / .1), inset -1px -1px 1px rgb(0 0 0 / .5), inset 1px 1px 1px rgb(255 255 255 / .22); text-shadow: none; }
.btn-ar { width: 15px; height: 15px; flex: none; margin-right: -3px; transition: transform 200ms var(--ease-out); }
.btn-ic { width: 20px; height: 20px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-line:hover { filter: none; background: #fafbfc; box-shadow: 0 2px 6px rgb(16 24 40 / .07), inset 0 0 0 1px #d6dbe2; }
  .btn-ink:hover { filter: brightness(1.18); }
  .btn:hover .btn-ar { transform: translateX(2px); }
}

/* ---------- Announcement bar + sky header ---------- */
.bar { background: #fff; border-bottom: 1px solid var(--line); text-align: center; font-size: 13.5px; padding: 9px var(--gut); color: var(--ink2); }
.bar p { margin: 0 auto; max-width: 900px; }
.bar-ic { width: 17px; height: 17px; vertical-align: -4px; margin-right: 8px; color: #5865f2; }
.bar a { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.bar a svg { width: 13px; height: 13px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bar a:hover svg { transform: translateX(2px); } }

.nav {
  position: sticky; top: -8px; z-index: 50;
  background: rgb(234 243 254 / .9); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid rgb(19 140 245 / .07); transition: box-shadow 200ms ease, border-color 200ms ease;
}
.nav.scrolled { background: rgb(234 243 254 / .94); border-bottom-color: rgb(19 140 245 / .12); box-shadow: 0 6px 20px -12px rgb(19 90 180 / .25); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 68px; }
/* condense: the bar is sticky at top -8px, so once it sticks only 60px of it shows. The items drop 4px to sit
   centred in that and the mark shrinks a touch. Transform only, so nothing below moves. */
.nav-in > * { transition: transform 260ms var(--ease-out); }
.nav.scrolled .nav-in > * { transform: translateY(4px); }
.nav .brand-mk { transition: transform 260ms var(--ease-out); }
.nav.scrolled .brand-mk { transform: scale(.9); }
.brand { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; color: var(--ink); border-radius: 10px; }
.brand-mk { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 4px rgb(19 110 230 / .25)); }
.brand b { font: 600 21px/1 var(--display); letter-spacing: -0.03em; }
.nav-links { display: flex; gap: 2px; margin-left: 12px; }
.nav-links a { padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 14.5px; font-weight: 500; color: #3b4350; transition: color 150ms ease, background-color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); background: rgb(255 255 255 / .75); } }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* phone and tablet menu (nav.js): under 980px the links live in a small sheet under the header */
.nav-menu {
  display: none; place-items: center; width: 40px; height: 38px; padding: 0; border: 0; border-radius: 11px; cursor: pointer;
  background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(16 24 40 / .05), inset 0 0 0 1px var(--line2);
  -webkit-tap-highlight-color: transparent; transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.nav-menu:active { transform: scale(.95); }
.nav-menu svg { width: 18px; height: 18px; }
.nav-menu .x, .nav-menu[aria-expanded="true"] .m { display: none; }
.nav-menu[aria-expanded="true"] .x { display: block; }
.nav-sheet {
  position: absolute; left: var(--gut); right: var(--gut); top: calc(100% + 8px); z-index: 60; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-3);
  transform-origin: 50% 0; opacity: 0; transform: translate3d(0, -6px, 0) scale(.98); visibility: hidden;
  transition: opacity 160ms ease, transform 220ms var(--ease-out), visibility 0s linear 220ms;
}
.nav.open .nav-sheet { opacity: 1; transform: none; visibility: visible; transition: opacity 160ms ease, transform 220ms var(--ease-out), visibility 0s; }
.nav-sheet nav { display: grid; }
.nav-sheet a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav-sheet a:focus-visible { outline-offset: -2px; }
.nav-sheet .nav-sheet-login { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; color: var(--accent-ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .nav-sheet a:hover { background: var(--tint); } .nav-menu:hover { background: #fafbfc; } }
@media (max-width: 980px) { .nav-menu { display: grid; } }
@media (min-width: 981px) { .nav-sheet { display: none; } }
@media (max-width: 720px) { .nav-cta .nav-login { display: none; } }

/* ---------- Eyebrows above headlines: quiet accent text with a small icon, no box, no fill (no pill tags) ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 16px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--accent-ink); letter-spacing: -0.005em;
}
.tag svg { width: 16px; height: 16px; flex: none; }

/* ---------- Section heads ---------- */
.sec { padding-block: 96px; position: relative; }
.tint { background: linear-gradient(180deg, #f5f8fd 0%, #f9fbfe 55%, #fff 100%); }
.head { max-width: 760px; margin-bottom: 56px; }
.head:has(.head-row) { max-width: none; }
.head h2, .comm-copy h2, .faq-head h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; max-width: 820px; }
.head > p:not(.tag), .head-row p { margin-top: 18px; font-size: 18px; line-height: 1.55; max-width: 620px; text-wrap: pretty; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.head-c { margin-inline: auto; text-align: center; }
.head-c h2, .head-c > p:not(.tag) { margin-inline: auto; }
.fine { font-size: 13px; color: var(--ink3); margin-top: 24px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 48px; padding-bottom: 40px; overflow-x: clip; }
.hero-glow {
  position: absolute; inset: 0 0 auto; height: 980px; pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 0%, rgb(136 192 253 / .34), rgb(136 192 253 / 0) 72%),
    radial-gradient(30% 28% at 16% 14%, rgb(125 211 252 / .16), rgb(125 211 252 / 0) 72%),
    radial-gradient(30% 28% at 84% 14%, rgb(125 211 252 / .16), rgb(125 211 252 / 0) 72%),
    linear-gradient(180deg, #f3f8ff 0%, #fff 520px);
}
/* one soft wash centred over the headline; it drifts a little while the hero is on screen. The second, off axis
   blob read as a smudge on the right at 1440 and is gone. */
.hero-glow { overflow: hidden; }
.hero-glow::before { content: ""; position: absolute; border-radius: 50%; pointer-events: none; will-change: transform;
  width: 900px; height: 900px; left: 50%; top: -420px; margin-left: -450px;
  background: radial-gradient(closest-side, rgb(125 211 252 / .26), rgb(125 211 252 / 0)); animation: glow-a 18s ease-in-out infinite alternate; }
.hero.off .hero-glow::before { animation-play-state: paused; }
@keyframes glow-a { from { transform: translate3d(-60px, 0, 0) scale(1); } to { transform: translate3d(60px, 40px, 0) scale(1.08); } }
.hero-c { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero .tag { color: var(--ink2); font-weight: 500; margin-bottom: 20px; }
h1 { font-size: clamp(48px, 7vw, 88px); line-height: 1.02; letter-spacing: -0.042em; font-weight: 600; }
.hl { background: linear-gradient(180deg, #4aa6fd 0%, #1b74ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin-top: 24px; font-size: 18.5px; line-height: 1.55; max-width: 660px; text-wrap: pretty; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero .cta-row { justify-content: center; }
.micro { font-size: 13.5px; color: var(--ink3); margin-top: 14px; text-wrap: balance; }
.micro a, .head-row p a, .faq-head p a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Headline animation ----------
   Final layout is the resting state, so the heading is readable and laid out from the first frame and
   reduced motion simply skips the keyframes. Each play ("Shoot it raw." then "Post it hard."): the first line starts loose (words apart and tilted,
   with two small filler words in the gaps); the playhead sweeps it, the fillers get struck and cut, and the
   gaps close. Then the second line snaps together and "hard." lands with a small stamp (scale and drop, never from opacity 0, so the LCP text is always painted). About 2s, transform and opacity only.
   It plays once on load and then rests (no endless loop next to text people are reading, WCAG 2.2.2). */
.ha-box { position: relative; }
.ha-l { display: block; width: max-content; margin-inline: auto; position: relative; white-space: nowrap; }
.ha-w { display: inline-block; position: relative; transform-origin: 50% 70%; }
/* fillers: generated content, so they never join the heading text */
.ha-w[data-f]::before {
  content: attr(data-f); position: absolute; top: 0; bottom: 0; right: calc(100% + .28em); width: 2.2em;
  display: flex; align-items: center; justify-content: center;
  font-size: .5em; font-weight: 600; letter-spacing: 0; color: #c8373c;
  pointer-events: none; opacity: 0;
}
.ha-w[data-f]::after {
  content: ""; position: absolute; top: 50%; right: calc(100% + .26em); width: .86em; height: .055em; margin-top: -.01em;
  border-radius: 1em; background: var(--cut); pointer-events: none;
  opacity: 0; transform: scaleX(0); transform-origin: 0 50%;
}
.ha-w.w3[data-f]::after { width: .6em; right: calc(100% + .39em); }
.ha-ph { position: absolute; top: -.04em; bottom: .04em; left: -1.05em; right: -1.05em; pointer-events: none; opacity: 0; }
.ha-ph i { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--ph); border-radius: 2px; }
.ha-ph i::before { content: ""; position: absolute; left: 50%; top: -4px; width: 13px; height: 10px; transform: translateX(-50%); background: var(--ph); border-radius: 3px 3px 6px 6px; }

.ha.play .w1 { animation: ha-w1 1.6s var(--ease-expo) both; }
.ha.play .w2 { animation: ha-w2 1.6s var(--ease-expo) both; }
.ha.play .w3 { animation: ha-w3 1.6s var(--ease-expo) both; }
.ha.play .ha-w[data-f]::before { animation: ha-f 1.25s var(--ease-out) both; }
.ha.play .w2::after { animation: ha-strike 1.25s linear both; }
.ha.play .w3::after { animation: ha-strike2 1.25s linear both; }
.ha.play .ha-ph { animation: ha-ph 1.05s linear both; }
.ha.play .v1 { animation: ha-v1 .75s var(--ease-expo) 1.2s both; }
.ha.play .v2 { animation: ha-v2 .75s var(--ease-expo) 1.2s both; }
.ha.play .v3 { transform-origin: 0% 90%; animation: ha-v3 .8s cubic-bezier(.23, 1, .32, 1) 1.25s both; }

@keyframes ha-w1 { 0%, 56% { transform: translate(-1.14em, .05em) rotate(-4deg); } 100% { transform: none; } }
@keyframes ha-w2 { 0%, 56% { transform: translateY(-.04em) rotate(3deg); } 100% { transform: none; } }
@keyframes ha-w3 { 0%, 56% { transform: translate(1em, .06em) rotate(-2.5deg); } 100% { transform: none; } }
@keyframes ha-f { 0%, 68% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: scale(.4, .7); } }
@keyframes ha-strike { 0%, 20% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.23, 1, .32, 1); } 33% { opacity: 1; transform: scaleX(1); } 68% { opacity: 1; transform: scaleX(1); } 92%, 100% { opacity: 0; transform: scale(.4, 1); } }
@keyframes ha-strike2 { 0%, 35% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(.23, 1, .32, 1); } 47% { opacity: 1; transform: scaleX(1); } 68% { opacity: 1; transform: scaleX(1); } 92%, 100% { opacity: 0; transform: scale(.4, 1); } }
@keyframes ha-ph { 0% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 80% { opacity: 1; transform: translateX(100%); } 100% { opacity: 0; transform: translateX(100%); } }
@keyframes ha-v1 { from { transform: translate(-.16em, .03em); } to { transform: none; } }
@keyframes ha-v2 { from { transform: translateY(-.05em); } to { transform: none; } }
@keyframes ha-v3 { 0% { transform: translate(.18em, .04em) scale(.97); } 42% { transform: translateY(-.07em) scale(1.12) rotate(-2deg); } 74% { transform: translateY(.02em) scale(.985); } 100% { transform: none; } }

/* ---------- Hero video ----------
   A framed product film under the CTAs: 1px sky gradient border, a translucent white mat, layered shadows and a
   soft sky glow behind. site.js tilts and scales .hv as it scrolls in (resting state is flat, so nothing depends on
   the motion layer). The video keeps its 16:9 box from the first frame (aspect ratio plus width and height), so
   loading it never moves the layout. */
.hv-wrap { margin-top: 56px; }
.hv { position: relative; isolation: isolate; max-width: 1080px; margin: 0 auto; transform-origin: 50% 80%; will-change: transform; }
.hv::before {
  content: ""; position: absolute; inset: 8% 6% -6%; z-index: -1; border-radius: 40px; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 45%, rgb(46 120 239 / .26), rgb(125 211 252 / .12) 55%, rgb(125 211 252 / 0) 80%);
  filter: blur(36px);
}
.hv-frame {
  position: relative; padding: 8px; border-radius: 28px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .78), rgb(240 247 255 / .7)) padding-box,
    linear-gradient(160deg, #cfe6ff 0%, #8cc4fd 32%, #e6f2ff 58%, #a7d0fb 100%) border-box;
  box-shadow: 0 1px 2px rgb(16 24 40 / .04), 0 12px 24px -10px rgb(16 24 40 / .08), 0 36px 72px -24px rgb(19 90 180 / .26), 0 80px 120px -60px rgb(19 110 230 / .3);
}
.hv-vid {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px;
  background: var(--sky); box-shadow: inset 0 0 0 1px rgb(16 24 40 / .05);
}
.hv.zoomable .hv-vid { cursor: zoom-in; }
.hv-vid:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the film is silent, so its only control is a quiet pause (WCAG 2.2.2: anything moving longer than 5s can stop) */
.hv-pause {
  position: absolute; right: 18px; bottom: 18px; z-index: 2; display: grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 11px; cursor: pointer;
  background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  color: var(--ink); box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 6px 16px -6px rgb(16 24 40 / .22);
  transition: background-color 160ms ease, transform 120ms var(--ease-out);
}
.hv-pause svg { width: 13px; height: 13px; }
.hv-pause:active { transform: scale(.95); }
.hv-pause:focus-visible, .hv-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hv.err .hv-pause { display: none; }
.hv-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .94); color: var(--ink);
  box-shadow: 0 2px 4px rgb(16 24 40 / .06), 0 12px 32px -8px rgb(4 18 40 / .35);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.hv-play svg { width: 28px; height: 28px; margin-left: 3px; }
.hv-play:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .hv-pause:hover { background: #fff; }
  .hv-play:hover { transform: scale(1.05); background: #fff; }
  .hv-play:hover:active { transform: scale(.96); }
}
.live-sec { position: relative; padding-bottom: 40px; }

/* ---------- Sky panel with the live demo ---------- */
.sky {
  position: relative; margin-top: 64px; border-radius: 28px; padding: 52px 48px 60px;
  background:
    radial-gradient(34% 26% at 12% 16%, rgb(255 255 255 / .92), rgb(255 255 255 / 0) 70%),
    radial-gradient(28% 22% at 88% 10%, rgb(255 255 255 / .75), rgb(255 255 255 / 0) 70%),
    radial-gradient(40% 24% at 22% 98%, rgb(255 255 255 / .8), rgb(255 255 255 / 0) 70%),
    radial-gradient(36% 22% at 86% 94%, rgb(255 255 255 / .7), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #a7d0fb 0%, #c4e0fd 40%, #dcecfe 75%, #eaf3fe 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6), 0 30px 60px -40px rgb(19 90 180 / .35);
}
.sky-head { text-align: center; max-width: 640px; margin: 0 auto; }
.sky-head h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.035em; }
.sky-head p { margin-top: 14px; font-size: 17px; color: #3f4a5a; text-wrap: pretty; }
.sky-stage { position: relative; max-width: 720px; margin: 36px auto 0; }
.shell {
  position: relative; z-index: 2; padding: 8px; border-radius: 24px;
  background: rgb(255 255 255 / .5); border: 1px solid rgb(255 255 255 / .9);
  box-shadow: 0 2px 4px rgb(16 24 40 / .04), 0 24px 48px -16px rgb(19 80 170 / .3);
}
.snap.side { display: none; position: absolute; z-index: 3; width: 180px; }   /* they sit beside the demo card, never over it */
@media (min-width: 1180px) {
  .snap.side { display: block; }
  .s-cap { left: -192px; bottom: 6px; transform: rotate(-3deg); }
  .s-zoom { right: -192px; top: 34px; width: 180px; transform: rotate(2.5deg); }
}

/* ---------- Live cut demo (built mock, loops slowly) ---------- */
.live { background: #fff; border: 1px solid var(--line); border-radius: 17px; padding: 20px 24px 18px; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.live-top, .live-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.live-file { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cut); box-shadow: 0 0 0 3px var(--cut-wash); flex: none; }
.live-time { display: inline-flex; align-items: center; gap: 8px; color: var(--ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-arrow { width: 14px; height: 14px; }
.live-time b { color: var(--ink); font-size: 17px; font-weight: 700; min-width: 4.2ch; text-align: right; }
.live-tx { margin: 18px 0 20px; font-size: clamp(19px, 2vw, 23px); line-height: 1.6; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); text-wrap: pretty; text-align: left; }
.live-tx .w { border-radius: 5px; padding: 1px 2px; margin: 0 -2px; transition: color 240ms ease, background-color 240ms ease, text-decoration-color 240ms ease, opacity 500ms ease; text-decoration: line-through 2px transparent; }
.live-tx .w.x.on { color: var(--cut-ink); background: var(--cut-wash); text-decoration-color: var(--cut); }
.live.gone .live-tx .w.x.on { opacity: .42; }
.live-tl { position: relative; overflow-x: clip; padding: 10px 12px 12px; background: var(--tint); border: 1px solid var(--line); border-radius: 12px; }
.live-ruler { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; margin-bottom: 6px; padding-right: 2px; }
.live-track { position: relative; display: flex; height: 46px; }
.live-track .c {
  flex: var(--w) 1 0; min-width: 0; height: 100%; margin-right: 2px; border-radius: 6px; position: relative; overflow: hidden;
  transform-origin: 0 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='22' viewBox='0 0 36 22'%3E%3Cg fill='%23138CF5' fill-opacity='.75'%3E%3Crect x='1' y='8' width='2' height='6' rx='1'/%3E%3Crect x='5' y='4' width='2' height='14' rx='1'/%3E%3Crect x='9' y='1' width='2' height='20' rx='1'/%3E%3Crect x='13' y='6' width='2' height='10' rx='1'/%3E%3Crect x='17' y='3' width='2' height='16' rx='1'/%3E%3Crect x='21' y='7' width='2' height='8' rx='1'/%3E%3Crect x='25' y='2' width='2' height='18' rx='1'/%3E%3Crect x='29' y='5' width='2' height='12' rx='1'/%3E%3Crect x='33' y='9' width='2' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E") 0 50% / 36px 22px repeat-x,
    #dcebfb;
}
.live-track .c:nth-last-child(2) { margin-right: 0; }
.live-track .c.x::before { content: ""; position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(135deg, rgb(229 72 77 / .26) 0 5px, rgb(229 72 77 / .1) 5px 10px), #fbe3e3; box-shadow: inset 2px 0 0 var(--cut); transition: opacity 240ms ease; }
.live-track .c.x::after { content: ""; position: absolute; left: 0; top: 0; width: 7px; height: 9px; background: var(--cut); border-radius: 0 0 3px 0; opacity: 0; transition: opacity 240ms ease; }
.live-track .c.x.on::before, .live-track .c.x.on::after { opacity: 1; }
.live.packing .live-track .c { transition: transform 800ms var(--ease-expo), opacity 420ms ease; }
.live-ph { position: absolute; inset: -6px 0 -4px; pointer-events: none; transform: translateX(0); }
.live-ph i { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ph); border-radius: 1px; box-shadow: 0 0 0 1px rgb(255 255 255 / .7); }
.live-ph i::before { content: ""; position: absolute; left: 50%; top: -2px; width: 11px; height: 9px; transform: translateX(-50%); background: var(--ph); border-radius: 2px 2px 5px 5px; }
.live.glide .live-ph { transition: transform 800ms var(--ease-expo); }
.live-foot { margin-top: 14px; color: var(--ink3); flex-wrap: wrap; }
.lv-legend { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.lg-cut { width: 3px; height: 12px; border-radius: 2px; background: var(--cut); }
.sync { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 600; margin-left: auto; }
.sync svg { width: 15px; height: 15px; }
.live-foot > *, .live-time .lv-from, .live-time .lv-arrow { transition: opacity 300ms ease; }
.demo .live:not(.done) .live-foot .sync { opacity: 0; }
.demo .live:not(.marked) .lv-legend { opacity: 0; }
.live-pause {
  width: 32px; height: 32px; border-radius: 10px; border: 0; background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgb(16 24 40 / .05), inset 0 0 0 1px var(--line2);
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background-color 150ms ease, transform 120ms var(--ease-out);
}
.live-pause svg { width: 13px; height: 13px; }
.live-pause:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .live-pause:hover { background: var(--tint); } }

/* ---------- Product snippets: small framed crops of the real app ---------- */
.snap { position: relative; margin: 0; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-3); }
.snap-f { display: block; overflow: hidden; border-radius: 11px; background: var(--dark); transform: translateZ(0); }
.snap img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; }
/* every snippet opens in the lightbox (site.js adds .zoomable once it is wired) */
.snap.zoomable { cursor: zoom-in; }
.snap.zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* floating callouts: small UI notes that pop up beside a snippet once it lands (true things the product does) */
.callout { position: absolute; z-index: 4; pointer-events: none; }
.callout.c-tr { top: -14px; right: -12px; }
.callout.c-br { bottom: -15px; right: 16px; }
.callout.c-side { top: 71%; right: -22px; }
.callout-in {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 9px; border-radius: 10px;
  background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgb(16 24 40 / .06), 0 2px 4px rgb(16 24 40 / .05), 0 12px 24px -10px rgb(19 80 170 / .28);
}
.callout-in svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.callout.c-cut .callout-in svg { color: var(--cut); }
.callout.c-ok .callout-in svg { color: var(--ok); }
.snap figcaption { padding: 7px 7px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink3); }
.snaps { position: relative; }
.snaps > .snap { position: absolute; }
@media (hover: hover) and (pointer: fine) { .snaps > .snap:hover { z-index: 5; } }
.snap-solo { width: 100%; }
.snap-narrow { max-width: 440px; margin-inline: auto; }

/* ---------- Carousels (examples and creators) ---------- */
.car-nav { display: flex; gap: 8px; flex: none; }
.car-btn {
  width: 42px; height: 42px; border-radius: 12px; border: 0; background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgb(16 24 40 / .05), inset 0 0 0 1px var(--line2);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 150ms ease, transform 120ms var(--ease-out), opacity 150ms ease;
}
.car-btn svg { width: 16px; height: 16px; }
.car-btn:active { transform: scale(.95); }
.car-btn:disabled { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .car-btn:not(:disabled):hover { background: #fafbfc; } }
.car {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(400px, calc(100% - 24px)); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; overscroll-behavior-x: contain;
  padding: 8px 8px 28px; margin: -8px -8px 0; scrollbar-width: thin; scrollbar-color: #cdd6e2 transparent;
}
.car:focus-visible { outline-offset: 0; border-radius: 22px; }
.ex { scroll-snap-align: start; display: grid; gap: 16px; align-content: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; box-shadow: var(--sh-2); }
.ex-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ex-top h3 { font-size: 17px; letter-spacing: -0.02em; line-height: 1.3; min-height: 2.6em; }   /* two lines, so every card's videos start at the same height */
/* the card cut off at the column edge fades out while there is more to scroll (site.js sets .more) */
.car.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 72px), transparent); }
.ex-by { font-size: 13px; color: var(--ink3); white-space: nowrap; }
.ex-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex-v { display: grid; gap: 8px; }
.ex-lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--ink2); }
.ex-lab span { font-weight: 500; color: var(--ink3); font-variant-numeric: tabular-nums; }
.ex-v.after .ex-lab { color: var(--accent-ink); }
.ex-vid { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--dark); }
.ex-v.after .ex-vid { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9fcaf6; }
.ex-vid video { width: 100%; height: 100%; object-fit: cover; }
.ex-play {
  position: absolute; inset: auto 8px 8px auto; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgb(255 255 255 / .94); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / .25); transition: transform 120ms var(--ease-out);
}
.ex-play:active { transform: scale(.92); }
.ex-play svg { width: 14px; height: 14px; }
/* sound for one video at a time */
.ex-snd {
  position: absolute; left: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgb(15 27 43 / .62); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.ex-snd svg { width: 17px; height: 17px; }
.ex-snd:active { transform: scale(.92); }
.ex-snd[aria-pressed="true"] { background: rgb(255 255 255 / .94); color: var(--accent-ink); }
.ex-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; background: var(--tint); border: 1px solid var(--line); }
.ex-stats div { padding: 12px 14px; display: grid; gap: 2px; }
.ex-stats div + div { border-left: 1px solid var(--line); }
.ex-stats b { font: 600 21px/1.2 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ex-stats b.save { color: var(--accent-ink); }
.ex-stats span { font-size: 12.5px; color: var(--ink3); }
.ex-note { font-size: 14px; line-height: 1.5; }

/* ---------- Old way / Hardpost way ---------- */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.way { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; display: flex; flex-direction: column; box-shadow: var(--sh-2); }
.way h3 { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 22px; font-size: 17px; letter-spacing: -0.02em; background: var(--tint); border-bottom: 1px solid var(--line); }
.way li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "a c" "b c"; column-gap: 16px; padding: 14px 22px; align-items: center; }
.way li + li { border-top: 1px solid var(--line); }
.way li span { grid-area: a; color: var(--ink); font-weight: 600; font-size: 15.5px; }
.way li em { grid-area: b; font-style: normal; font-size: 13.5px; color: var(--ink3); }
.way li b { grid-area: c; font-size: 15px; text-align: right; }
.way-old li b { color: var(--ink2); }
.way-old li span::before { content: ""; display: inline-block; width: 3px; height: 13px; border-radius: 2px; background: var(--cut); margin-right: 10px; vertical-align: -1px; }
.way-new { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(160deg, #a9d4fe, #2e78ef) border-box; box-shadow: var(--sh-blue); }
.way-new h3 { background: linear-gradient(180deg, #f2f8ff, #e5f0fe); border-bottom-color: #dbe9fb; }
.way-new li b { color: var(--accent-ink); }
.way-new li b::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.way-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid #dbe9fb; background: #f5f9ff; }
.way-foot p { font-size: 15px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 26px 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--sh-2); }
.num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad-fill); box-shadow: var(--sh-btn); color: #fff; font: 600 16px/1 var(--display); text-shadow: 0 1px 1px rgb(28 72 143 / .22); }
.step h3 { font-size: 20px; letter-spacing: -0.025em; margin-top: 18px; }
.step p { margin: 8px 0 24px; font-size: 15.5px; }
.snap-step { margin: auto -6px 0; padding: 5px 5px 0; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -8px 24px -14px rgb(16 24 40 / .2); background: var(--tint); }
.snap-step .snap-f { border-radius: 10px 10px 0 0; }
.snap-step img { height: auto; aspect-ratio: 11 / 5; object-fit: cover; }   /* the crops are shot at 11:5 (tools/shoot_site_snaps.mjs), so nothing is cut at any width */
.snap-step figcaption { display: none; }

/* ---------- Feature rows: copy next to a soft sky panel holding real snippets ---------- */
.row { display: grid; grid-template-columns: 1fr 1.12fr; gap: 72px; align-items: center; padding-block: 44px; }
.row-flip .row-copy { order: 2; }
.big-num { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.big-num::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--grad-fill); transform: scaleY(var(--bar, 1)); transform-origin: 50% 100%; }
.row h3 { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; }
.row-copy > p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; }
.ticks { display: grid; gap: 11px; margin-top: 22px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.row-media {
  position: relative; border-radius: 24px; padding: 36px; border: 1px solid #e3edf9;
  background:
    radial-gradient(rgb(19 140 245 / .09) 1px, transparent 1.3px) 0 0 / 16px 16px,
    radial-gradient(60% 50% at 20% 0%, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / 0) 70%),
    radial-gradient(50% 40% at 90% 100%, rgb(255 255 255 / .7) 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(160deg, #cfe5fd 0%, #e4f0fe 50%, #f4f9ff 100%);
  border-color: #dae8f8;
  box-shadow: inset 0 1px 0 #fff, var(--sh-1);
}
.row-media-solo { display: grid; align-content: center; min-height: 340px; }

/* feature collages */
.snaps-cut { aspect-ratio: 550 / 500; }
.snaps-cut .s-tx { left: 0; top: 0; width: 76%; }
.snaps-cut .s-sel { right: 0; top: 64%; width: 66%; z-index: 2; transform: rotate(-1deg); }
.snaps-cap { aspect-ratio: 550 / 420; }
.snaps-cap .s-cbox { left: 0; top: 3%; width: 50%; }
.snaps-cap .s-looks { right: 0; top: 28%; width: 58%; z-index: 2; transform: rotate(1.5deg); }
/* the sound list sits under the split screen shot and right of the safe zone shot, so no caption is covered */
.snaps-post { aspect-ratio: 550 / 540; }
.snaps-post .s-sz { left: 0; top: 0; width: 38%; }
.snaps-post .s-split { left: 41%; top: 4%; width: 28%; z-index: 2; transform: rotate(2deg); }
.snaps-post .s-snd { right: 1%; top: 64%; width: 52%; z-index: 3; transform: rotate(-1deg); }
@media (min-width: 721px) { .snaps-post .s-sz .callout.c-side { right: 10px; top: 66%; } }

/* ---------- Live B roll and voiceover editor ----------
   A small copy of the app's timeline in its graphite look (web/app.css tokens): film strip and a dense mirrored
   waveform on the video track, a red voice clip on the voice track, the green B roll band, a red snip for the
   magnetic cut and the white playhead. site.js draws the canvases once and drives one 8s clock with transform,
   opacity and filter. This CSS is the finished frame, so no JS and reduced motion both rest on it. */
.row-media-ed { padding: 30px; }
.ed {
  --g-bg: #16181c; --g-well: #0d0f12; --g-strip: #1c2430; --g-text: #eef0f3; --g-dim: #b4bac4; --g-faint: #626a76;
  position: relative; margin: 0; padding: 14px 14px 16px; border-radius: 16px; color: var(--g-text);
  background: var(--g-bg);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), 0 2px 6px rgb(15 27 43 / .18), 0 28px 56px -22px rgb(15 27 43 / .55);
  font: 500 12px/1.3 var(--font); font-variant-numeric: tabular-nums;
}
.ed-top { display: flex; align-items: center; gap: 10px; height: 28px; margin: 0 40px 10px 2px; }
.ed-rec { display: inline-flex; align-items: center; gap: 7px; }
.ed-rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d5e; box-shadow: 0 0 0 3px rgb(255 77 94 / .22); opacity: .35; }
.ed-rec b { font-size: 11px; font-weight: 700; letter-spacing: .07em; color: #ff8a95; }
.ed-time { font-size: 13.5px; font-weight: 600; color: var(--g-text); min-width: 4.4ch; }
.ed-status { position: relative; flex: 1; height: 16px; min-width: 0; }
.ed-status > span { position: absolute; right: 0; top: 0; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--g-dim); opacity: 0; transform: translateY(4px); transition: opacity 240ms ease, transform 320ms var(--ease-out); }
.ed[data-step="rec"] [data-s="rec"], .ed[data-step="broll"] [data-s="broll"], .ed[data-step="cut"] [data-s="cut"], .ed[data-step="play"] [data-s="play"] { opacity: 1; transform: none; }
.ed[data-step="broll"] [data-s="broll"] { color: #9ff0cf; }
.ed[data-step="cut"] [data-s="cut"] { color: #ff9ba5; }
.ed-pause {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: rgb(255 255 255 / .06); color: var(--g-dim); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
  display: grid; place-items: center; cursor: pointer; transition: background-color 150ms ease, transform 120ms var(--ease-out);
}
.ed-pause svg { width: 12px; height: 12px; }
.ed-pause:active { transform: scale(.95); }
@media (hover: hover) and (pointer: fine) { .ed-pause:hover { background: rgb(255 255 255 / .11); color: var(--g-text); } }

.ed-tl { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
.ed-labels, .ed-area { display: grid; grid-template-rows: 18px 30px 60px 34px; row-gap: 6px; }
.ed-labels span { display: flex; align-items: center; font-size: 11px; font-weight: 600; color: var(--g-faint); }
.ed-area { position: relative; }
.ed-ruler { position: relative; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .16) 0 1px, transparent 1px calc(100% / 11)) 0 100% / 100% 5px no-repeat; }
.ed-ruler span { position: absolute; top: 0; left: calc(var(--x) * 100%); padding-left: 4px; font-size: 10px; color: var(--g-faint); }
.ed-lane { position: relative; border-radius: 6px; background: var(--g-well); }
.ed-seg, .ed-broll, .ed-snip, .ed-vo { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; }
.ed-seg { overflow: hidden; background: var(--g-strip); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.ed canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.ed-cutseg { opacity: 0; transform-origin: 50% 50%; }
.ed-tail { transform: translateX(-54.5455%); }
.ed-broll, .ed-vo { overflow: hidden; z-index: 2; }
.ed-in { position: absolute; inset: 0; border-radius: inherit; }
.ed-broll .ed-in { background: rgb(46 204 140 / .2); box-shadow: inset 0 0 0 1.5px rgb(46 204 140 / .9); }
.ed-broll canvas { opacity: .92; }
.ed-broll span, .ed-vo span { position: absolute; left: 7px; font-size: 10.5px; font-weight: 650; white-space: nowrap; text-shadow: 0 1px 2px rgb(0 0 0 / .7); }
.ed-broll span { top: 50%; left: 5px; margin-top: -8px; padding: 1px 5px; border-radius: 4px; background: rgb(8 44 32 / .78); color: #c9f8e4; text-shadow: none; }
.ed-vo .ed-in { background: rgb(255 107 107 / .18); box-shadow: inset 0 0 0 1.5px rgb(255 107 107 / .8); }
.ed-vo span { top: 50%; margin-top: -7px; color: #ffd6d6; }
.ed-snip { z-index: 3; opacity: 0; background: repeating-linear-gradient(135deg, rgb(255 77 94 / .38) 0 3px, rgb(255 77 94 / .12) 3px 7px); box-shadow: inset 0 0 0 1.5px #ff4d5e; transform-origin: 50% 50%; }
.ed-ph { position: absolute; z-index: 6; left: 88%; top: 2px; bottom: -2px; width: 2px; margin-left: -1px; background: #fff; border-radius: 1px; box-shadow: 0 0 0 1px rgb(0 0 0 / .35); pointer-events: none; }
.ed-ph::before { content: ""; position: absolute; top: -1px; left: -6px; width: 14px; height: 11px; border-radius: 3px 3px 7px 7px; background: #fff; }
.ed.live-on .ed-ph { left: 0; will-change: transform; }
.ed.live-on .ed-tail, .ed.live-on .ed-vo, .ed.live-on .ed-broll, .ed.live-on .ed-in { will-change: transform; }
@media (max-width: 720px) {
  .row-media-ed { padding: 14px; }
  .ed { padding: 12px 10px 12px; border-radius: 14px; }
  .ed-top { margin-right: 36px; gap: 8px; }
  .ed-pause { top: 10px; right: 8px; }
  .ed-tl { grid-template-columns: 34px minmax(0, 1fr); gap: 6px; }
  .ed-labels span { font-size: 10.5px; }
  .ed-status > span { font-size: 11.5px; }
}

/* ---------- Segmented control: one sliding gradient highlight for every choice of two on the site ----------
   Pricing Monthly or Yearly (.bill, radios) and the Shop check or Templates tabs (.tabs) share it, and the trial
   walkthrough's Free or Pro picture uses the same look. Equal segments; the thumb is one absolutely positioned
   element under the labels that moves by transform only (220ms, the house ease out). --i is the picked index:
   CSS sets it from :has() so it works without JS, site.js also sets it for older browsers. Reduced motion: no slide. */
.seg {
  --i: 0; --n: 2; --pad: 4px; --gap: 2px;
  position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--gap);
  padding: var(--pad); border-radius: 13px; background: #f1f3f6; border: 1px solid var(--line); margin: 0; min-width: 0;
}
.seg-thumb {
  position: absolute; z-index: 0; top: var(--pad); bottom: var(--pad); left: var(--pad); pointer-events: none;
  width: calc((100% - 2 * var(--pad) - (var(--n) - 1) * var(--gap)) / var(--n)); border-radius: 10px;
  background: var(--grad-fill); box-shadow: var(--sh-btn);
  transform: translate3d(calc(var(--i) * (100% + var(--gap))), 0, 0); transition: transform 220ms var(--ease-out);
}
.seg > label, .seg > button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 8px 16px;
  border: 0; border-radius: 10px; background: none; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink2);
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color 180ms ease, text-shadow 180ms ease, transform 120ms var(--ease-out);
}
.seg > label:active, .seg > button:active { transform: scale(.97); }
.seg > .on, .seg > button[aria-selected="true"], .seg > input:checked + label { color: #fff; text-shadow: 0 1px 1px rgb(28 72 143 / .22); }
@media (hover: hover) and (pointer: fine) { .seg > label:hover, .seg > button:hover { color: var(--ink); } .seg > .on:hover, .seg > button[aria-selected="true"]:hover, .seg > input:checked + label:hover { color: #fff; } }
.seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .seg-thumb { transition: none; } }

/* tabs (feature 08) */
.tabs { margin-top: 26px; }
.tabs:has(> button:nth-of-type(2)[aria-selected="true"]) { --i: 1; }

/* the two panes share one grid cell, so the panel is always as tall as the taller one and switching never moves the
   page below; the picked pane fades in over the other (opacity only) */
.panes > .pane { grid-area: 1 / 1; align-self: center; transition: opacity 220ms ease, visibility 0s linear 0s; }
.panes > .pane.off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 160ms; }

/* Shop check card */
.check { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--sh-3); }
.check-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.check-h b { font-size: 16px; }
.check-h span { font-size: 13.5px; color: var(--ink3); }
.check-l li { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); transition: opacity 200ms ease; }
.check-l .ts { font-size: 13px; font-weight: 600; color: var(--ink3); padding-top: 2px; font-variant-numeric: tabular-nums; }
.check-l p { font-size: 15px; color: var(--ink); }
.check-l mark { background: var(--cut-wash); color: var(--cut-ink); padding: 1px 3px; border-radius: 4px; }
.check-l small { display: block; margin-top: 4px; font-size: 13px; color: var(--ink3); }
.check-l li.gone > div { opacity: .45; text-decoration: line-through; text-decoration-color: var(--cut); }
.check-note { font-size: 13px; color: var(--ink3); margin-top: 14px; }

/* Hooks (07): Generate, Custom hooks and Hook stacking as built mockups. White cards on the sky stage, the same
   snippet shadow as the screenshots. The markup is the finished state; .arm (set by site.js only for cards fully
   below the screen, never with reduced motion) holds the start state and .on plays it once. */
.hk { padding-block: 44px; }
.hk-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 72px; align-items: end; margin-bottom: 36px; }
.hk-intro h3 { font-family: var(--display); font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.035em; text-wrap: balance; }
.hk-intro > p { margin-top: 16px; font-size: 16.5px; line-height: 1.6; max-width: 560px; }
.hk-ticks { margin-top: 0; padding-bottom: 4px; }
.hk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hk-cell { display: flex; flex-direction: column; gap: 22px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-2); min-width: 0; }
.hk-copy h4 { font-family: var(--display); font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; }
.hk-copy > p { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.hk-mini { gap: 9px; margin-top: 18px; }
.hk-mini li { font-size: 14.5px; }
.hk-fine { font-size: 13px; line-height: 1.5; color: var(--ink3); }
.hk-stage {
  flex: 1; display: grid; place-items: center; padding: 28px 24px; border-radius: 16px; border: 1px solid #dae8f8;
  background:
    radial-gradient(rgb(19 140 245 / .09) 1px, transparent 1.3px) 0 0 / 16px 16px,
    radial-gradient(60% 50% at 20% 0%, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(160deg, #d6e9fd 0%, #e8f2fe 55%, #f5f9ff 100%);
  box-shadow: inset 0 1px 0 #fff;
}
.hk-ui { width: 100%; max-width: 440px; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-3); color: var(--ink2); }
.hk-ui svg { flex: none; }

/* Generate */
.hk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hk-field { position: relative; display: grid; gap: 1px; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; min-width: 0; }
.hk-field i { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.hk-field b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-sel { padding-right: 28px; background: var(--tint); }
.hk-sel svg { position: absolute; right: 9px; top: 50%; width: 12px; height: 12px; margin-top: -6px; color: var(--ink3); }
.hk-deck { position: relative; margin-top: 14px; padding-bottom: 14px; }
.hk-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.hk-card-top { position: relative; z-index: 2; padding: 14px; box-shadow: var(--sh-2); }
.hk-card-back, .hk-card-back2 { position: absolute; height: 48px; background: var(--tint); }
.hk-card-back { z-index: 1; left: 10px; right: 10px; bottom: 7px; }
.hk-card-back2 { z-index: 0; left: 22px; right: 22px; bottom: 0; background: #f1f4f8; }
.hk-card-row { display: flex; align-items: flex-start; gap: 12px; }
.hk-ring { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; }
.hk-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hk-ring circle { fill: none; stroke: #e7eef7; stroke-width: 4; }
.hk-ring .hk-ring-v { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--s) * 100); }
.hk-ring b { position: relative; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hk-line { padding-top: 2px; font-size: 15px; font-weight: 500; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.hk-why { margin-top: 12px; font-size: 13px; line-height: 1.5; }
.hk-why b { margin-right: 4px; font-size: 13px; }
.hk-ok { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ok); }
.hk-ok svg { width: 15px; height: 15px; }

/* Custom hooks */
.hk-mine { padding: 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--tint); }
.hk-input { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.hk-input::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); }
.hk-verdict { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line2); }
.hk-verdict p { font-size: 13px; line-height: 1.45; padding-top: 3px; }
.hk-score { flex: none; display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 7px; background: var(--accent-wash); color: var(--accent-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hk-score.hk-low { background: var(--cut-wash); color: var(--cut-ink); }
.hk-sub { margin: 16px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.hk-rw li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hk-rw li:last-child { border-bottom: 0; padding-bottom: 2px; }
.hk-rw p { font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.hk-save { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--line2); border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--ink2); background: #fff; }
.hk-save svg { width: 13px; height: 13px; }
.hk-save.on { border-color: transparent; background: var(--accent-wash); color: var(--accent-ink); }

/* Hook stacking */
.hk-stack { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 40px; align-items: center; }
.hk-stack .hk-stage { height: 100%; }
.hk-stackui { max-width: 560px; padding: 18px; }
.hk-take-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hk-take-h b { font-size: 14px; }
.hk-take-h span { font-size: 12px; color: var(--ink3); }
.hk-take, .hk-strip { display: flex; gap: 3px; }
.hk-take { height: 42px; margin-top: 10px; }
.hk-s {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden;
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .14) 0 2px, transparent 2px 5px);
}
.hk-s em { font-style: normal; margin-right: .3em; }
.hk-s.h1 { background-color: #138cf5; }
.hk-s.h2 { background-color: #7a5af8; }
.hk-s.h3 { background-color: #0ea5a0; }
.hk-s.hb { flex-grow: 4.2; background-color: #e6edf6; color: var(--ink2); background-image: repeating-linear-gradient(90deg, rgb(15 27 43 / .06) 0 2px, transparent 2px 5px); }
.hk-s.hc { flex-grow: 1.3; background-color: var(--dark); }
.hk-flow { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.hk-flow-l { flex: 1; height: 1px; background: var(--line2); }
.hk-exp { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--grad-fill); box-shadow: var(--sh-btn); color: #fff; font-size: 12.5px; font-weight: 600; }
.hk-exp svg { width: 15px; height: 15px; }
.hk-outs li { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hk-outs li:last-child { border-bottom: 0; padding-bottom: 0; }
.hk-strip { height: 28px; }
.hk-strip .hk-s { border-radius: 5px; }
.hk-name { display: grid; gap: 2px; min-width: 0; }
.hk-name b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-name small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--ok); }
.hk-name small svg { width: 13px; height: 13px; }

/* one play per visit: start states only while armed, the finished frame is the default */
.hk-cell .hk-card-top, .hk-cell .hk-why, .hk-cell .hk-ok, .hk-cell .hk-verdict, .hk-cell .hk-rw li, .hk-cell .hk-exp, .hk-cell .hk-outs li, .hk-cell .hk-strip .hk-s {
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-expo);
}
.hk-cell .hk-ring-v { transition: stroke-dashoffset 1200ms var(--ease-expo) 350ms; }
.hk-cell.arm:not(.on) .hk-ring-v { stroke-dashoffset: 100; }
.hk-cell.arm:not(.on) .hk-card-top { opacity: 0; transform: translateY(12px); }
.hk-cell.arm:not(.on) .hk-why, .hk-cell.arm:not(.on) .hk-ok, .hk-cell.arm:not(.on) .hk-verdict { opacity: 0; transform: translateY(6px); }
.hk-cell.arm:not(.on) .hk-rw li { opacity: 0; transform: translateY(10px); }
.hk-cell.arm:not(.on) .hk-exp { opacity: 0; transform: scale(.9); }
.hk-cell.arm:not(.on) .hk-outs li { opacity: 0; transform: translateY(-10px); }
.hk-cell.arm:not(.on) .hk-strip .hk-s:first-child { transform: translateX(-14px); }
.hk-cell.on .hk-card-top { transition-delay: 150ms; }
.hk-cell.on .hk-why { transition-delay: 600ms; }
.hk-cell.on .hk-ok { transition-delay: 760ms; }
.hk-cell.on .hk-verdict { transition-delay: 250ms; }
.hk-cell.on .hk-rw li:nth-child(1) { transition-delay: 520ms; }
.hk-cell.on .hk-rw li:nth-child(2) { transition-delay: 640ms; }
.hk-cell.on .hk-rw li:nth-child(3) { transition-delay: 760ms; }
.hk-cell.on .hk-exp { transition-delay: 300ms; }
.hk-cell.on .hk-outs li:nth-child(1), .hk-cell.on .hk-outs li:nth-child(1) .hk-s { transition-delay: 560ms; }
.hk-cell.on .hk-outs li:nth-child(2), .hk-cell.on .hk-outs li:nth-child(2) .hk-s { transition-delay: 700ms; }
.hk-cell.on .hk-outs li:nth-child(3), .hk-cell.on .hk-outs li:nth-child(3) .hk-s { transition-delay: 840ms; }
@media (prefers-reduced-motion: reduce) {
  .hk-cell.arm:not(.on) * { opacity: 1 !important; transform: none !important; }
  .hk-cell.arm:not(.on) .hk-ring-v { stroke-dashoffset: calc(100 - var(--s) * 100); }
}

@media (max-width: 980px) {
  .hk { padding-block: 36px; }
  .hk-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
  .hk-grid { grid-template-columns: 1fr; }
  .hk-stack { grid-template-columns: 1fr; gap: 22px; }
  .hk-ui, .hk-stackui { max-width: 520px; }
}
@media (max-width: 720px) {
  .hk-grid { gap: 14px; }
  .hk-cell { padding: 18px; gap: 18px; border-radius: 20px; }
  .hk-copy h4 { font-size: 19px; }
  .hk-stage { padding: 16px 12px; border-radius: 14px; }
  .hk-ui, .hk-stackui { padding: 12px; border-radius: 13px; }
  .hk-line { font-size: 14.5px; }
  .hk-rw li { gap: 8px; }
  .hk-rw p { font-size: 13px; }
  .hk-save { padding: 0 7px; }
  .hk-take { height: 38px; }
  .hk-take .hk-s em { display: none; }
  .hk-s.hb { flex-grow: 2.8; }
  .hk-s.hc { flex-grow: 1.2; }
  .hk-outs li { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; }
  .hk-name b { font-size: 12.5px; }
  .hk-strip { height: 24px; }
}

/* hub */
.hub { margin-top: 56px; border: 1px solid var(--line); border-radius: 24px; padding: 34px; background: #fff; box-shadow: var(--sh-2); }
.hub-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.hub h3 { font-size: 20px; letter-spacing: -0.02em; }
.hub-h p { font-size: 15px; color: var(--ink3); }
.hub-h2 { margin-top: 34px; }
.hub ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px 24px; }
.hub li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); font-weight: 500; }
.hub li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; background: var(--accent); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Community ---------- */
.comm { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.comm-copy { position: sticky; top: 110px; }
.comm-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(180deg, #7d87ff, #5865f2); color: #fff; margin-bottom: 22px; box-shadow: 0 1px 2px rgb(0 0 0 / .06), inset -1px -1px 1px rgb(40 46 140 / .45), inset 1px 1px 1px rgb(255 255 255 / .45), 0 8px 18px -10px rgb(16 24 40 / .22); }   /* neutral lift, no coloured glow */
.comm-ic svg { width: 30px; height: 30px; }
.comm-copy > p:not(.micro):not(.tag) { margin-top: 18px; font-size: 18px; max-width: 470px; }
.comm-copy .tag { display: flex; width: max-content; }
.perks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.perks li { position: relative; padding: 22px 22px 22px 24px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-2); }
.perks li:first-child { border: 1.5px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(160deg, #a9d4fe, #2e78ef) border-box; box-shadow: var(--sh-blue); }
.perk-wide { grid-column: 1 / -1; }
.perks h3 { font-size: 17px; letter-spacing: -0.02em; }
.perks p { margin-top: 6px; font-size: 15px; line-height: 1.5; }

/* ---------- Creator stories ---------- */
.crs { grid-auto-columns: 260px; gap: 18px; }
.cr { scroll-snap-align: start; display: grid; gap: 12px; align-content: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 10px 16px; box-shadow: var(--sh-2); }
.cr-vid { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: var(--dark); }
.cr-vid video, .cr-vid img { width: 100%; height: 100%; object-fit: cover; }
.cr-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; padding: 0; border-radius: 12px; }
.cr-play span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .94); color: var(--ink); box-shadow: 0 4px 16px rgb(0 0 0 / .3); transition: transform 160ms var(--ease-out), opacity 200ms ease; }
.cr-play svg { width: 20px; height: 20px; }
.cr-play:active span { transform: scale(.94); }
.cr.playing .cr-play span { opacity: 0; }
.cr.playing .cr-play:focus-visible span { opacity: 1; }
.cr-body { display: grid; gap: 8px; padding: 0 6px; }
.cr blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.cr-who b { display: block; font-size: 15px; }
.cr-who span { font-size: 13px; color: var(--ink3); }
.rev-wrap { margin-top: 48px; }
.rev-h { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 20px; }
.revs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.rev { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh-2); }
.stars { display: flex; gap: 2px; color: #f5a524; }
.stars svg { width: 17px; height: 17px; }
.rev blockquote { margin: 0; font-size: 15.5px; color: var(--ink); line-height: 1.55; flex: 1; }
.rev video { border-radius: 10px; aspect-ratio: 9 / 16; max-height: 340px; object-fit: cover; background: var(--dark); }
.rev-who { display: flex; align-items: center; gap: 12px; }
.rev-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--accent-wash); color: var(--accent-ink); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.rev-who b { display: block; font-size: 15px; }
.rev-who span { font-size: 13px; color: var(--ink3); }

/* ---------- Compare (Oct 9 2026): one white card, a row per capability, two columns of marks ----------
   Hardpost's column sits on a soft blue band with a gradient check (the button gradient, pinned to border-box);
   competitors get a quiet grey check or a soft red X. A real table on every width: on phones the label column wraps
   and the two mark columns shrink, so it reads the same with nothing scrolling sideways. Group rows keep the band
   running (their empty cells carry it). */
.cmp-card { max-width: 880px; margin: 0 auto; padding: 6px 10px 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-2); }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 16px; }
.cmp col.c-us, .cmp col.c-them { width: 170px; }
.cmp th, .cmp td { padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cmp thead th { padding: 22px 18px 18px; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink2); text-align: center; border-bottom-color: var(--line2); }
.cmp tbody th { text-align: left; font-weight: 500; line-height: 1.4; color: var(--ink); text-wrap: pretty; }
.cmp td { text-align: center; line-height: 0; }
.cmp .us { background: #f5f9ff; border-bottom-color: #e7effa; box-shadow: inset 1px 0 #e3edfb, inset -1px 0 #e3edfb; }
.cmp thead .us { border-radius: 14px 14px 0 0; border-bottom-color: #dce8f9; box-shadow: inset 1px 0 #e3edfb, inset -1px 0 #e3edfb, inset 0 1px #e3edfb; }
.cmp tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.cmp tbody:last-of-type tr:last-child .us { border-radius: 0 0 14px 14px; box-shadow: inset 1px 0 #e3edfb, inset -1px 0 #e3edfb, inset 0 -1px #e3edfb; }
.cmp-brand { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 600 17px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.cmp-brand img { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 2px 4px rgb(19 110 230 / .25)); }
/* group rows: a quiet sentence case label, no rule under it, so the rows read as one block */
.cmp tbody .cmp-g th { padding: 26px 18px 8px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink3); }
.cmp .cmp-g > * { border-bottom: 0; }
.cmp tbody:first-of-type .cmp-g th { padding-top: 18px; }
/* the marks */
.ck { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
.ck svg { width: 16px; height: 16px; }
.ck.hp { background: var(--grad-fill); color: #fff; box-shadow: 0 1px 2px rgb(16 24 40 / .1), inset -1px -1px 1px rgb(28 72 143 / .4), inset 1px 1px 1px rgb(255 255 255 / .45); }
.ck.ok { background: #edf0f4; color: #4a5361; }
.ck.no { background: #fdeeee; color: #d4464c; }
.ck.no svg { width: 15px; height: 15px; }
.cmp-note { max-width: 880px; margin: 18px auto 0; text-align: center; text-wrap: balance; }
.cmp-note a { color: var(--accent-ink); }
@media (max-width: 720px) {
  .cmp-card { padding: 2px 4px 6px; border-radius: 18px; }
  .cmp { font-size: 15px; }
  .cmp col.c-us { width: 76px; }
  .cmp col.c-them { width: 94px; }
  .cmp th, .cmp td { padding: 12px 6px; }
  .cmp tbody th { padding-left: 12px; padding-right: 10px; }
  .cmp thead th { padding: 16px 4px 13px; font-size: 13px; }
  .cmp-brand { flex-direction: column; gap: 6px; font-size: 14px; }
  .cmp-brand img { width: 20px; height: 20px; }
  .cmp tbody .cmp-g th { padding: 22px 12px 6px; font-size: 12.5px; }
  .cmp tbody:first-of-type .cmp-g th { padding-top: 16px; }
  .ck { width: 24px; height: 24px; }
  .ck svg { width: 15px; height: 15px; }
  .ck.no svg { width: 14px; height: 14px; }
}

/* ---------- Pricing ---------- */
.pricing-sec { background: radial-gradient(48% 34% at 50% 36%, rgb(136 192 253 / .26), rgb(136 192 253 / 0) 72%), linear-gradient(180deg, #fff 0%, #f6f9fe 100%); }
/* the period switch is the shared .seg control (radios, so it works without JS) */
.bill { width: max-content; }
.bill input { position: absolute; opacity: 0; pointer-events: none; }
.bill > label { min-width: 104px; }
.bill:has(#by:checked), .pricing[data-bill="y"] .bill { --i: 1; }
.bill:has(#bm:checked) { --i: 0; }
.bill-note { margin: 14px auto 52px; max-width: 34em; text-align: center; font-size: 14.5px; color: var(--ink2); min-height: 1.55em; }
.bill input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 30px 24px 26px; display: flex; flex-direction: column; box-shadow: var(--sh-2); }
/* pricing type, shared with the PC and phone apps: Montserrat Bold for plan names and prices (owner pick, Oct 8 2026), the body font for the rest */
.plans { --price-font: "Montserrat", "Inter Tight", system-ui, sans-serif; }
.plan h3 { font: 700 24px/1.1 var(--price-font); letter-spacing: -0.02em; font-optical-sizing: auto; }
.best { font-size: 14.5px; line-height: 1.5; margin-top: 8px; min-height: 3em; }
.price { display: flex; align-items: baseline; gap: 4px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.amt { font: 800 56px/1 var(--price-font); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; font-optical-sizing: auto; white-space: nowrap; }
.cur { position: relative; top: .16em; vertical-align: top; margin-right: .04em; font-size: .46em; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.per { font-size: 15px; font-weight: 500; color: var(--ink3); letter-spacing: 0; }
.billed { font-size: 14px; color: var(--ink2); margin-top: 14px; min-height: 1.55em; }
.save-line { font-size: 14px; font-weight: 600; color: var(--ok); margin: 4px 0 24px; min-height: 1.5em; }
.plan .quota { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink2); }
.plan .quota b { font-size: 17px; }
.plan .ticks { margin-top: 16px; }
.plan .ticks li { font-size: 14.5px; }
.plan .ticks li.plus { font-weight: 600; color: var(--ink); padding-left: 0; }
.plan .ticks li.plus::before { display: none; }
/* the Pro card stands out by its gradient border and tint only: no glow, nothing that pulses (no gradient glows) */
.plan-hi { isolation: isolate; border: 1.5px solid transparent; background: linear-gradient(180deg, #f3f8ff 0%, #fff 46%) padding-box, linear-gradient(170deg, #9ccdfe, #2e78ef) border-box; box-shadow: var(--sh-blue); }
/* the radios drive the prices: :has works without JS, data-bill (set by site.js) covers older browsers */
.pricing[data-bill="y"] .a-m, .pricing[data-bill="m"] .a-y { display: none; }
.pricing:has(#by:checked) .a-m { display: none; }
.pricing:has(#by:checked) .a-y { display: inline; }
.pricing:has(#bm:checked) .a-y { display: none; }
.pricing:has(#bm:checked) .a-m { display: inline; }
/* period switch: the newly shown amounts roll up out of a soft blur and the lines under them crossfade.
   CSS animations restart whenever an element goes from display none to shown, so each toggle replays them.
   site.js adds .flip on the first change, so nothing plays on load. */
.amt > span { display: inline-block; }
.pricing:has(#by:checked) .amt .a-y, .pricing:has(#bm:checked) .amt .a-m { display: inline-block; }
.pricing.flip .amt > span { animation: price-in 420ms var(--ease-expo) both; }
.pricing.flip .per > span, .pricing.flip .billed > span, .pricing.flip .save-line > span, .pricing.flip .bill-note > span { animation: line-in 320ms ease both; }
@keyframes price-in { from { opacity: 0; transform: translateY(.32em); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes line-in { from { opacity: 0; } to { opacity: 1; } }
.price-foot { margin-top: 22px; text-align: center; font-size: 14.5px; color: var(--ink3); }
.plan-trial { display: flex; align-items: flex-start; gap: 7px; margin-top: auto; padding-top: 18px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--accent-ink); }
.plan-trial svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
/* one screen (Oct 8 2026): at 1440 the heading, the period switch, all four cards and the policy line fit in one
   viewport height. The trial walkthrough moved to its own section below. Prices and plan names are Montserrat. */
.sec.pricing-sec { padding-block: 40px 36px; }
.pricing-sec .head { margin-bottom: 18px; max-width: 1080px; }
.pricing-sec .head h2 { font-size: clamp(32px, 3.2vw, 42px); }
.pricing-sec .head > p:not(.tag) { margin-top: 8px; font-size: 15.5px; max-width: 1060px; }
.pricing-sec .tag { margin-bottom: 10px; }
/* the period switch and its note share one row. The switch sits alone in the middle column and the note starts in
   the right one, so the note changing length (Monthly 211px, Yearly 289px at 1440) never moves the switch while its
   thumb slides. Phones stack the note under the switch (720px block below). */
.bill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 14px; }
.bill-row > .bill { grid-column: 2; }
.bill-row > .bill-note { grid-column: 3; justify-self: start; margin: 0; max-width: 22em; min-height: 0; text-align: left; font-size: 14px; }
.pricing .plans { margin-top: 18px; }
.plans { gap: 16px; }
.plan { padding: 22px 20px 20px; border-radius: 20px; }
.plan h3 { font: 700 22px/1.1 var(--price-font); letter-spacing: -0.02em; }
.best { font-size: 13.5px; line-height: 1.45; margin-top: 6px; min-height: 2.9em; }   /* two lines on every card, so the four buttons line up */
.price { margin-top: 12px; padding-top: 12px; }
.amt { font: 800 44px/1 var(--price-font); letter-spacing: -0.03em; }
.cur { font-size: .48em; top: .14em; }
.billed { font-size: 13.5px; margin-top: 8px; }
.save-line { font-size: 13.5px; margin: 2px 0 12px; }
.plan .ticks { margin-top: 12px; gap: 5px; }
.plan .ticks li { font-size: 13.5px; line-height: 1.4; padding-left: 24px; }
.plan .ticks li::before { width: 16px; height: 16px; top: 1px; }
.plan .ticks li:first-child { font-weight: 600; color: var(--ink); }
.price-foot { margin-top: 16px; font-size: 14px; }
.plan-trial { padding-top: 12px; font-size: 12.5px; }
.sec.trial-sec { padding-block: 36px 96px; background: linear-gradient(180deg, #f6f9fe 0%, #fff 100%); }
.trial-sec .tw { margin-top: 0; }

/* ---------- Trial walkthrough ----------
   The resting CSS is the finished state. site.js adds .arm and drives everything from one clock: --p on .tw
   (the bar and its head) and per step values derived from it (--c card, --d dot, --ro/--rs ring, --ha hint in,
   --hm hint motion, --bell). Only transform, opacity and filter move; nothing changes size or position in flow. */
.tw { position: relative; margin: 44px auto 0; max-width: 1000px; }
.tw-title { text-align: center; font-size: 19px; letter-spacing: -0.015em; margin-bottom: 26px; color: var(--ink); }
.tw-rail { position: relative; }
.tw-steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tw-step { display: grid; grid-template-rows: auto auto 1fr; justify-items: center; text-align: center; }
.tw-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #d6e7fb; }
.tw-dot::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--grad-brand) border-box; }
.tw-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; }
.tw-day { margin: 10px 0 12px; font-size: 11.5px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); }
.tw-card { width: 100%; height: 100%; display: grid; grid-template-rows: 40px auto; align-content: start; justify-items: center; gap: 14px; padding: 20px 20px 22px; border: 1px solid rgb(16 24 40 / .055); border-radius: 18px; background: rgb(255 255 255 / .92); box-shadow: 0 1px 2px rgb(16 24 40 / .03), 0 10px 24px -14px rgb(16 24 40 / .1); }
.tw-card > p { font-size: 14.5px; line-height: 1.5; color: var(--ink2); max-width: 280px; }
.tw-ui { height: 40px; display: grid; place-items: center; }
.tw-track { position: absolute; z-index: 0; left: calc(100% / 6); right: calc(100% / 6); top: 6.5px; height: 3px; border-radius: 3px; background: #e9f1fb; overflow: hidden; pointer-events: none; }
.tw-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #c4e5fe 0%, #6cb8fb 45%, #138cf5 100%); transform-origin: 0 50%; transform: scaleX(1); }
.tw-head { position: absolute; z-index: 0; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2.5px #138cf5, 0 0 10px 3px rgb(19 140 245 / .45), 0 0 22px 6px rgb(19 140 245 / .18); opacity: 0; pointer-events: none; }

/* mini UI hints */
.tw-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 5px; border-radius: 8px; background: #f0faf4; color: #15803d; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px #d8f1e1; }
.tw-chip i { position: relative; overflow: hidden; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--ok); color: #fff; }
.tw-chip i::after { content: ""; position: absolute; inset: 0; background: var(--ok); transform: translateX(100%); }
.tw-chip svg { width: 14px; height: 14px; }
.tw-note { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 14px; background: #fff; text-align: left; box-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 6px 16px -8px rgb(16 24 40 / .14); border: 1px solid rgb(16 24 40 / .06); }
.tw-note i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--grad-fill); color: #fff; box-shadow: var(--sh-btn); }
.tw-note svg { width: 16px; height: 16px; transform-origin: 50% 15%; }
.tw-note b { display: block; font-size: 12px; line-height: 1.2; color: var(--ink); }
.tw-note span span { display: block; font-size: 12px; line-height: 1.3; color: var(--ink2); white-space: nowrap; }
.tw-pick { position: relative; display: inline-grid; grid-template-columns: 62px 62px; height: 34px; padding: 3px; border-radius: 11px; background: #f2f5f9; box-shadow: inset 0 0 0 1px var(--line2); font-size: 13px; font-weight: 600; }
.tw-pick > span:not(.tw-knob) { position: relative; display: grid; place-items: center; color: var(--ink2); }
.tw-pick > span:last-child { color: #fff; text-shadow: 0 1px 1px rgb(28 72 143 / .22); }
/* the same sliding gradient highlight as the site's segmented controls */
.tw-knob { position: absolute; top: 3px; left: 3px; width: 62px; height: 28px; border-radius: 8px; background: var(--grad-fill); box-shadow: var(--sh-btn); transform: translate3d(62px, 0, 0); }

/* armed: every moving value reads the clock's custom properties */
.tw.arm .tw-fill { transform: scaleX(var(--p, 0)); }
.tw.arm .tw-head { opacity: min(1, calc(var(--p, 0) * 40), calc((1 - var(--p, 0)) * 30)); transform: translate3d(calc(var(--p, 0) * var(--len, 0px)), 0, 0); will-change: transform, opacity; }
.tw.arm[data-ax="y"] .tw-head { transform: translate3d(0, calc(var(--p, 0) * var(--len, 0px)), 0); }
.tw.arm .tw-dot { transform: scale(calc(.82 + .18 * var(--d, 0))); }
.tw.arm .tw-dot::before { transform: scale(var(--d, 0)); }
.tw.arm .tw-dot::after { opacity: var(--ro, 0); transform: scale(var(--rs, 1)); }
.tw.arm .tw-card { opacity: var(--c, 0); transform: translate3d(0, calc((1 - var(--c, 0)) * 10px), 0); filter: blur(calc((1 - var(--c, 0)) * 6px)); will-change: transform, opacity, filter; }
.tw.arm .tw-ui > * { opacity: var(--ha, 0); transform: translate3d(0, calc((1 - var(--ha, 0)) * 4px), 0) scale(calc(.94 + .06 * var(--ha, 0))); }
.tw.arm .tw-chip i::after { transform: translate3d(calc(var(--hm, 0) * 100%), 0, 0); }
.tw.arm .tw-note svg { transform: rotate(calc(var(--bell, 0) * 1deg)); }
.tw.arm .tw-knob { transform: translate3d(calc(var(--hm, 0) * 62px), 0, 0); }
.tw.arm .tw-pick > span:nth-child(2) { color: color-mix(in srgb, #fff calc((1 - clamp(0, var(--hm, 0), 1)) * 100%), var(--ink2)); }
.tw.arm .tw-pick > span:last-child { color: color-mix(in srgb, #fff calc(clamp(0, var(--hm, 0), 1) * 100%), var(--ink2)); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.faq-head { position: sticky; top: 110px; }
.faq-head p:not(.tag) { margin-top: 18px; font-size: 16.5px; max-width: 360px; }
.faq-head a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }
.faq { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 6px 28px; box-shadow: var(--sh-2); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 16.5px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; transition: color 150ms ease; border-radius: 8px; }
.faq summary::-webkit-details-marker { display: none; }
/* the chip (::after) never turns; only the plus glyph (::before, laid over the chip) turns into a cross, so an open item
   shows an upright square with an x, not a tilted diamond. It turns back as soon as the answer starts to fold (.shut). */
.faq summary { position: relative; }
.faq summary::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 8px; background-color: #f1f3f6; transition: background-color 150ms ease; }
.faq summary::before {
  content: ""; position: absolute; z-index: 1; right: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M9 13h8M13 9v8' stroke='%23141414' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat;
  transition: transform 220ms var(--ease-out);
}
.faq details[open]:not(.shut) summary::before { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent-ink); } .faq summary:hover::after { background-color: var(--accent-wash); } }
.faq details p { padding: 0 44px 22px 0; font-size: 15.5px; line-height: 1.65; }
/* open and close: the answer's grid row goes 0fr to 1fr (the one height animation on the page; an accordion has no
   transform equivalent). site.js adds .shut for the closed frame and removes [open] only after it lands. */
.faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 280ms var(--ease-out); }
.faq-in { min-height: 0; overflow: hidden; }
.faq-in p { transition: opacity 240ms ease, transform 280ms var(--ease-out); }
.js .faq details:not([open]) .faq-a, .faq details.shut .faq-a { grid-template-rows: 0fr; }
.js .faq details:not([open]) .faq-in p, .faq details.shut .faq-in p { opacity: 0; transform: translateY(-4px); }

/* ---------- Final CTA and footer in a sky ---------- */
.sky-foot {
  position: relative; padding-bottom: 48px;
  background:
    radial-gradient(28% 12% at 16% 40%, rgb(255 255 255 / .95), rgb(255 255 255 / 0) 70%),
    radial-gradient(24% 10% at 82% 34%, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 70%),
    radial-gradient(40% 12% at 26% 97%, rgb(255 255 255 / .85), rgb(255 255 255 / 0) 70%),
    radial-gradient(34% 10% at 84% 93%, rgb(255 255 255 / .8), rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #fff 0%, #eef6fe 20%, #d4e8fd 52%, #b6d8fc 80%, #a3cdfa 100%);
}
.final { padding: 120px 0 88px; text-align: center; }
.final-in { display: flex; flex-direction: column; align-items: center; }
.final h2 { font-size: clamp(34px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -0.04em; max-width: 800px; text-wrap: balance; }
.final-in > p:not(.micro) { margin-top: 20px; font-size: 18px; max-width: 540px; color: #3f4a5a; text-wrap: balance; }
.final .cta-row { justify-content: center; }
.final .micro { color: #55606f; }
.foot-card {
  border-radius: 28px; padding: 44px 48px 28px;
  background: rgb(255 255 255 / .66); border: 1px solid rgb(255 255 255 / .9);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 2px 4px rgb(16 24 40 / .03), 0 30px 60px -28px rgb(19 80 170 / .35);
}
.foot-in { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; }
.foot-line { margin-top: 22px; font: 600 28px/1.12 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.foot-brand p:not(.foot-line) { margin-top: 10px; font-size: 15px; max-width: 300px; }
.foot-dc { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; border-radius: 8px; }
.foot-dc svg { width: 20px; height: 20px; color: #5865f2; }
@media (hover: hover) and (pointer: fine) { .foot-dc:hover { color: var(--accent-ink); } }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-cols .foot-h { font-size: 13px; font-weight: 600; color: var(--ink3); margin-bottom: 12px; }
.foot-cols a { display: block; width: max-content; padding: 5px 0; font-size: 15px; text-decoration: none; color: var(--ink); border-radius: 6px; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .foot-cols a:hover { color: var(--accent-ink); } }
.foot-base { display: flex; justify-content: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 20px; border-top: 1px solid rgb(16 24 40 / .07); font-size: 13px; color: var(--ink3); }

/* while a GSAP entrance runs on an element, its own CSS transform transition stays out of the way */
.gs-calm { transition: none !important; }

/* ---------- Hover lift on cards (pointer devices only) ----------
   3px up over 220ms; the deeper shadow is a pseudo element that fades, so only opacity and transform move. */
.plan, .perks li, .step, .way, .ex { transition: transform 220ms var(--ease-out); }
.plan::after, .perks li::after, .ex::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--sh-lift); opacity: 0; pointer-events: none; transition: opacity 220ms ease;
}
.ex { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .plan:hover, .perks li:hover, .step:hover, .way:hover, .ex:hover { transform: translateY(-3px); }
  .plan:hover::after, .perks li:hover::after, .ex:hover::after { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation: none !important; }
  /* the headline rests in its clean final state; nothing loops */
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-links a { padding: 8px 9px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .plan { padding: 30px 26px 26px; }
  .amt { font-size: 54px; }
}
@media (max-width: 980px) {
  .nav-links { display: none; }
  .sec { padding-block: 80px; }
  .comm { grid-template-columns: 1fr; gap: 40px; }
  .comm-copy { position: static; }
  .row { grid-template-columns: 1fr; gap: 32px; padding-block: 36px; }
  .row-flip .row-copy { order: 0; }
  .steps { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .hub ul { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-head { position: static; }
  .foot-in { grid-template-columns: 1fr; gap: 36px; }
  .ways { grid-template-columns: 1fr; max-width: 580px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .tw { margin-top: 36px; }
  .tw-title { font-size: 18px; margin-bottom: 22px; }
  .tw-steps { grid-template-columns: 1fr; gap: 16px; }
  .tw-step { grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; justify-items: start; text-align: left; }
  .tw-dot { grid-column: 1; grid-row: 1; }
  .tw-day { grid-column: 2; grid-row: 1; margin: 0 0 8px; line-height: 16px; }
  .tw-card { grid-column: 2; grid-row: 2; justify-items: start; padding: 16px 16px 18px; gap: 12px; }
  .tw-ui { place-items: center start; }
  .tw-track { left: 6.5px; right: auto; width: 3px; top: 8px; bottom: 40px; height: auto; }
  .tw-fill { background: linear-gradient(180deg, #c4e5fe 0%, #6cb8fb 45%, #138cf5 100%); transform-origin: 50% 0; transform: scaleY(1); }
  .tw.arm .tw-fill { transform: scaleY(var(--p, 0)); }
  :root { --gut: 16px; }
  html { scroll-padding-top: 62px; }
  .bar { font-size: 12.5px; padding-block: 8px; }
  .bar-ic { display: none; }
  .nav-in { height: 60px; gap: 10px; }
  .brand { gap: 11px; }
  .brand-mk { width: 28px; height: 28px; }
  .brand b { font-size: 19px; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { padding: 0 12px; height: 36px; font-size: 13.5px; }
  .nav-cta .btn-ar { display: none; }
  .hero { padding-top: 36px; padding-bottom: 24px; }
  .tag { font-size: 13px; margin-bottom: 12px; }
  .hero .tag { margin-bottom: 16px; }
  h1 { font-size: clamp(40px, 12.4vw, 56px); }
  .lede { font-size: 16.5px; margin-top: 20px; }
  .cta-row { flex-direction: column; width: 100%; }
  .cta-row .btn { width: 100%; }
  .sky { margin: 48px calc(var(--gut) * -0.5) 0; padding: 32px 12px 14px; border-radius: 24px; }
  .sky-head { padding-inline: 8px; }
  .sky-head p { font-size: 15.5px; }
  .sky-stage { margin-top: 24px; }
  .shell { padding: 5px; border-radius: 20px; }
  .hv-wrap { margin-top: 36px; padding-inline: calc(var(--gut) * .5); }
  .hv-frame { padding: 5px; border-radius: 20px; }
  .hv-vid { border-radius: 15px; }
  .hv-pause { right: 10px; bottom: 10px; width: 30px; height: 30px; }
  .hv-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .hv-play svg { width: 24px; height: 24px; }
  .live-sec { padding-bottom: 24px; }
  .live { padding: 14px 14px 12px; border-radius: 15px; }
  .live-tx { margin: 14px 0 16px; font-size: 18px; }
  .live-track { height: 40px; }
  .live-track .c { margin-right: 1.5px; }
  .live-ruler span:nth-child(even) { visibility: hidden; }
  .live-foot { font-size: 12.5px; gap: 10px; }
  .sec { padding-block: 64px; }
  .head { margin-bottom: 36px; }
  .head > p:not(.tag), .head-row p { font-size: 16.5px; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .head-row .btn { width: 100%; }
  .car { grid-auto-columns: calc(100% - 36px); gap: 12px; }
  .ex { padding: 14px; gap: 14px; }
  .ex-top { flex-direction: column; gap: 2px; }
  .ex-pair { gap: 10px; }
  .ex-stats div { padding: 10px; }
  .ex-stats b { font-size: 17px; }
  .ex-stats span { font-size: 11.5px; }
  .way li { padding: 13px 16px; }
  .way li b { font-size: 14px; }
  .way-foot { padding: 16px; }
  .way-foot .btn { width: 100%; }
  .row-media { padding: 18px; border-radius: 20px; }
  .row-media-solo { min-height: 0; }
  .snaps { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .snaps > .snap { position: relative; width: auto; transform: none; }   /* each snippet stays the containing block of its own callout */
  .row-media .snaps > .snap { inset: auto; }   /* and the desktop collage offsets stay off */
  .callout.c-tr { top: -12px; right: 8px; }
  .callout.c-br { bottom: -12px; right: 8px; }
  .callout.c-side { top: 64%; bottom: auto; right: auto; left: 50%; translate: -50% 0; }
  .callout-in { height: 28px; padding: 0 10px 0 8px; font-size: 12px; gap: 5px; }
  .callout-in svg { width: 14px; height: 14px; }
  .snaps .wide, .snaps-cut .s-tx { grid-column: 1 / -1; }
  .snaps-cap .s-looks { grid-column: auto; }
  .snaps-cut .s-sel { width: 92%; justify-self: end; transform: rotate(-1deg); }
  /* one readable snippet per feature on phones: the collage's lead shot alone at full width. The extra shots stay on
     larger screens; at half a phone's width each one was a small UI crop that could not be read (Box style and Caption
     looks came out 144px wide). */
  .snaps-cut .s-sel, .snaps-cap .s-cbox, .snaps-post .s-sz, .snaps-post .s-split { display: none; }
  .row-media .snaps { grid-template-columns: minmax(0, 1fr); }
  .row-media .snaps > .snap { grid-column: 1 / -1; width: auto; justify-self: stretch; transform: none; }
  .snap { padding: 4px; border-radius: 13px; }
  .snap-f { border-radius: 9px; }
  .snap figcaption { font-size: 11px; padding: 6px 5px 1px; }
  .tabs { display: grid; width: 100%; }
  .tabs > button { padding: 8px 10px; font-size: 14px; }
  .check { padding: 16px; }
  .check-l li { grid-template-columns: 1fr auto; }
  .check-l .ts { grid-column: 1 / -1; padding: 0; }
  .hub { padding: 22px 18px; border-radius: 20px; }
  .hub ul { grid-template-columns: 1fr; gap: 10px; }
  .hub li { font-size: 14.5px; padding-left: 24px; }
  .hub li::before { width: 16px; height: 16px; }
  .perks { grid-template-columns: 1fr; }
  .perks li { padding: 18px 18px 18px 20px; }
  .crs { grid-auto-columns: 72%; gap: 12px; }
  .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 32px; }
  .best { min-height: 0; }
  .save-line.spacer { display: none; }
  .plan[data-plan="free"] .billed { margin-bottom: 22px; }
  .plan { padding: 26px 22px 24px; border-radius: 20px; }
  .plan h3 { font-size: 22px; }
  .price { margin-top: 20px; padding-top: 20px; }
  .amt { font-size: 48px; }
  .faq { padding: 2px 18px; border-radius: 20px; }
  .faq summary { font-size: 16px; padding: 18px 0; }
  .faq details p { padding: 0 0 20px; }
  .final { padding: 88px 0 64px; }
  .final-in > p:not(.micro) { font-size: 16.5px; }
  .foot-card { padding: 28px 22px 22px; border-radius: 22px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-line { font-size: 24px; }
}

/* ---------- Lightbox: any snippet opens large and sharp. site.js flies the image from its thumbnail (FLIP),
   the backdrop fades in with a soft blur, Escape or a click closes it, focus stays inside while open. ---------- */
.lb { position: fixed; inset: 0; z-index: 100; }
.lb-bg { position: absolute; inset: 0; background: rgb(14 24 38 / .42); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.lb-img { position: absolute; left: 0; top: 0; max-width: none; border-radius: 0; background: var(--dark); box-shadow: 0 30px 80px -20px rgb(4 18 40 / .55); transform-origin: 0 0; will-change: transform; cursor: zoom-out; }
.lb-vid { object-fit: contain; cursor: auto; }
.lb-cap { position: absolute; left: 16px; right: 16px; top: 0; text-align: center; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .01em; text-shadow: 0 1px 2px rgb(0 0 0 / .3); pointer-events: none; }
.lb-x {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: rgb(255 255 255 / .92); color: var(--ink); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 1px 2px rgb(16 24 40 / .08), 0 8px 20px -8px rgb(16 24 40 / .3); transition: transform 120ms var(--ease-out), background-color 150ms ease;
}
.lb-x svg { width: 18px; height: 18px; }
.lb-x:active { transform: scale(.95); }
.lb-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lb-x:hover { background: #fff; } }

/* ---------- Invite banner (ref.js): shown on the site after a /r/<code> landing ---------- */
.refbar { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 52px 10px var(--gut); background: linear-gradient(90deg, #e3f0fe, #f0f7ff 50%, #e3f0fe) border-box; border-bottom: 1px solid rgb(19 140 245 / .16); font-size: 14px; line-height: 1.45; color: var(--ink); animation: refin 420ms var(--ease-out) both; }
.refbar p { margin: 0; text-align: center; text-wrap: balance; }
.refbar b { font-weight: 600; }
.refbar span { color: var(--ink2); }
.refbar a { margin-left: 6px; color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
.refbar button { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--ink2); font-size: 19px; line-height: 1; cursor: pointer; transition: background-color 150ms ease; }
.refbar button:hover { background: rgb(19 140 245 / .1); }
@keyframes refin { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .refbar { animation: none; } }
@media (max-width: 720px) { .refbar { font-size: 13px; padding-right: 44px; } .refbar span { display: none; } }

/* ---------- Affiliate page (/affiliates, aff.js) ---------- */
.aff-hero { padding-bottom: 24px; }
.aff-h1 { max-width: 980px; text-wrap: balance; }
.aff-facts { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 920px; }
.aff-facts li { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; background: rgb(255 255 255 / .82); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-2); text-align: center; }
.aff-facts b { font: 600 26px/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.aff-facts span { font-size: 13.5px; color: var(--ink2); }
.aff-calc-sec { padding-top: 40px; }
.aff-calc { margin-top: 0; }
.calc-card { max-width: 720px; margin: 36px auto 0; background: #fff; border-radius: 22px; padding: 28px 28px 22px; box-shadow: var(--sh-3); }
.calc-l { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.calc-l output { font: 600 30px/1 var(--display); letter-spacing: -0.03em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.aff-calc input[type=range] { --p: 5%; width: 100%; margin: 18px 0 6px; height: 28px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.aff-calc input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #4aa6fd, #1b74ea) 0 / var(--p) 100% no-repeat, #e6edf6; }
.aff-calc input[type=range]::-moz-range-track { height: 8px; border-radius: 8px; background: #e6edf6; }
.aff-calc input[type=range]::-moz-range-progress { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #4aa6fd, #1b74ea); }
.aff-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(16 24 40 / .08), 0 4px 12px -2px rgb(19 90 180 / .35); transition: transform 160ms var(--ease-out); }
.aff-calc input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(16 24 40 / .08), 0 4px 12px -2px rgb(19 90 180 / .35); }
.aff-calc input[type=range]:active::-webkit-slider-thumb { transform: scale(1.08); }
.aff-calc input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.calc-out { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; gap: 12px; margin-top: 16px; }
.calc-out div { padding: 16px; border-radius: 16px; background: var(--tint); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.calc-out span { font-size: 13px; color: var(--ink2); }
.calc-out b { font: 600 30px/1.05 var(--display); letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-out div:first-child { background: var(--accent-wash); border-color: rgb(19 140 245 / .18); }
.calc-out div:first-child b { color: var(--accent-ink); }
.calc-note { margin: 16px 2px 0; font-size: 13.5px; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.aff-steps .step { padding-bottom: 4px; }
.aff-invite { display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; padding: 20px 24px; border-radius: 20px; background: var(--accent-wash); border: 1px solid rgb(19 140 245 / .16); }
.aff-invite svg { width: 26px; height: 26px; flex: none; color: var(--accent-ink); margin-top: 1px; }
.aff-invite div { display: flex; flex-direction: column; gap: 4px; }
.aff-invite b { font-size: 16.5px; color: var(--ink); }
.aff-invite span { font-size: 15px; color: var(--ink2); line-height: 1.55; }
.aff-rules-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: start; }
.aff-rules { list-style: none; margin: 0; padding: 8px 28px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--sh-2); }
.aff-rules li { position: relative; padding: 16px 0 16px 34px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.aff-rules li + li { border-top: 1px solid var(--line); }
.aff-rules li::before { content: ""; position: absolute; left: 0; top: 17px; width: 22px; height: 22px; border-radius: 7px; background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%230b6fd6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
@media (max-width: 980px) {
  .aff-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aff-rules-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .aff-facts { margin-top: 32px; gap: 10px; }
  .aff-facts li { padding: 14px 10px; border-radius: 16px; }
  .aff-facts b { font-size: 22px; }
  .aff-facts span { font-size: 12.5px; }
  .calc-card { padding: 20px 16px 16px; border-radius: 18px; margin-top: 24px; }
  .calc-out { grid-template-columns: 1fr 1fr; }
  .calc-out div:last-child { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .calc-out b { font-size: 26px; }
  .aff-rules { padding: 2px 18px; border-radius: 20px; }
  .aff-invite { padding: 16px 18px; }
}
/* phone pricing (Oct 8 2026): one swipeable row of cards with snap, so every plan's name, price and main limit sit on
   the first screen instead of four tall cards stacked; the next card peeks to show there is more */
@media (max-width: 720px) {
  .sec.pricing-sec { padding-block: 26px 22px; }
  .bill-row { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 8px; }
  .bill-row > .bill, .bill-row > .bill-note { grid-column: 1; }
  .bill-row > .bill-note { justify-self: center; text-align: center; }
  .pricing .plans { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; max-width: none;
    margin: 16px calc(-1 * var(--gut)) 0; padding: 4px var(--gut) 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pricing .plans::-webkit-scrollbar { display: none; }
  .pricing .plan { scroll-snap-align: start; padding: 20px 18px 18px; }
  .pricing .plan .amt { font-size: 40px; }
  .price-foot { margin-top: 6px; }
}