/* ══════════════════════════════════════════════════════════════
   SunoSync — page-level styles.
   Only what Counter does not already provide: the sticky nav shell,
   the tree listing, step numbering and the two payment tiles.
   Anything that could be a Counter component is a Counter component.
   ══════════════════════════════════════════════════════════════ */

body { background: var(--paper); }

/* Nav — the kit's .topbar floating inside a sticky rail */
.nav-rail { position: sticky; top: 0; z-index: 40; padding: 16px 0; background: transparent; }
.nav-rail .page { display: block; }
.nav-rail .topbar { max-width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 8px; }

/* Bands alternate paper and void; .invert comes from the kit */
.band.invert { border-top: 0; }
.band-tight { padding: 64px 0; }

/* Hero */
.masthead .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.masthead .under {
  margin-top: 18px; font-family: var(--t-mono); font-size: 13.8px; color: var(--ink-3);
}

/* Catalogue screenshots — one frame, two themes, a curtain between them.
   aspect-ratio holds the height before the images load, so the band never
   jumps; max-width keeps a 2000px shot from stretching the page. */
.ba {
  position: relative; margin: 0 auto; max-width: 980px;
  aspect-ratio: 2000 / 1250; border-radius: var(--r-card);
  overflow: hidden; border: 1px solid var(--line); background: var(--paper-2);
  touch-action: pan-y;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ba-over { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--ink-inv); opacity: .9;
}
.ba-line i {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--ink-inv); box-shadow: 0 2px 10px rgb(0 0 0 / .35);
}
/* Two chevrons drawn with borders — no icon file for a 12px hint. */
.ba-line i::before, .ba-line i::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px;
  border: 2px solid var(--ink-1); border-width: 2px 2px 0 0;
}
.ba-line i::before { left: 11px; translate: 0 -50%; rotate: -135deg; }
.ba-line i::after { right: 11px; translate: 0 -50%; rotate: 45deg; }
.ba-tag {
  position: absolute; top: 12px; z-index: 2;
  font-family: var(--t-mono); font-size: 11.5px; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 999px;
  background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(4px);
}
.ba-l { left: 12px; }
.ba-r { right: 12px; }
/* The range is the control: invisible, but it owns focus, keyboard and drag. */
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize; appearance: none; background: none;
}
.ba-range:focus-visible { outline: none; }
.ba-range:focus-visible ~ .ba-line { box-shadow: 0 0 0 3px var(--flare); }
.ba figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 14px 10px; text-align: center;
  font-family: var(--t-mono); font-size: 12px; color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / .6), transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .ba { touch-action: auto; } }

/* Steps — numbered without a list marker, mono ordinals */
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.steps-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; }
.steps-list .n {
  font-family: var(--t-mono); font-size: 13.8px; color: var(--ink-3);
  padding-top: 6px; letter-spacing: .08em;
}
.steps-list h3 { margin: 0 0 8px; font-size: 25px; font-weight: 500; letter-spacing: -0.018em; }
.steps-list p { margin: 0; color: var(--ink-2); font-size: 17.3px; line-height: 1.55; max-width: 62ch; }

/* Payment tiles on /pro — two ways to pay, described, not just labelled */
.pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.pay {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper);
}
.pay h4 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -0.018em; }
.pay p { margin: 0; color: var(--ink-2); font-size: 16.1px; line-height: 1.5; }
.pay .btn { width: 100%; }

/* Brand marks. Each sits on its own white tile: the card logos are drawn for a
   light ground and would lose their edges straight on the void band. */
.paylogos {
  list-style: none; margin: auto 0 0; padding: 8px 0 2px;
  display: flex; flex-wrap: wrap; gap: 14px 12px;
}
.paylogos li { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 60px; }
.paylogo {
  display: grid; place-items: center;
  width: 60px; height: 38px; border-radius: 8px;
  background: #fff; box-shadow: inset 0 0 0 1px oklch(16% 0 0 / .10);
}
.paylogo-name {
  font-size: 12px; line-height: 1.2; text-align: center; color: var(--ink-3);
  letter-spacing: -0.005em;
}
.pay-note { margin: 20px 0 0; font-size: 15.5px; color: var(--ink-3); max-width: 62ch; }

/* Checkout feedback — the kit's .banner, hidden until something happens */
#checkout-status[hidden] { display: none; }
#checkout-status { margin-top: 20px; }

@media (max-width: 720px) {
  .pay-grid { grid-template-columns: minmax(0, 1fr); }
  .steps-list li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .steps-list .n { padding-top: 0; }
}

/* ---------- single-link grab (masthead) ---------- */
.grab{max-width:760px;margin:32px auto 0}
.grab-form{display:flex;gap:10px;align-items:center;padding:8px;border-radius:20px;
  border:1px solid var(--line,#2a2a30);background:var(--paper-2,#f5f5f5);transition:border-color .18s cubic-bezier(.22,.61,.36,1)}

.grab-form.is-busy{opacity:.6}
.grab-form input{flex:1;border:0;background:none;outline:none;font:inherit;padding:12px 14px;color:inherit;min-width:0}
.grab-form button{flex:none}
.grab-checks{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
/* No border of its own: the pill around the group is the only frame, so the
   two do not stack into a double outline. */
.grab-check{display:inline-flex;align-items:center;gap:8px;padding:0;
  cursor:pointer;font-size:14.5px;user-select:none;white-space:nowrap}

.grab-check.is-off{opacity:.4;cursor:not-allowed}
.grab-check input{accent-color:var(--flare);margin:0}
.grab-size{font-size:12px;opacity:.6;font-variant-numeric:tabular-nums}
.grab-card{display:flex;gap:18px;margin-top:20px;padding:18px;border-radius:22px;
  border:1px solid var(--line,#2a2a30);text-align:left}
.grab-cover{width:132px;height:132px;border-radius:14px;object-fit:cover;background:var(--paper-3,#eee);flex:none}
.grab-body{flex:1;min-width:0}
.grab-body h3{margin:0 0 4px;font-size:19px;letter-spacing:-.01em}
.grab-meta{font-size:13px;opacity:.65;margin:0 0 8px}
.grab-styles{font-size:13px;opacity:.8;margin:0 0 10px}
.grab-sliders{display:flex;gap:16px;list-style:none;padding:0;margin:0 0 10px;font-size:12px;flex-wrap:wrap}
.grab-sliders li{display:flex;gap:6px;opacity:.75}
.grab-sliders b{font-variant-numeric:tabular-nums}
.grab-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.grab-status{font-size:13px;opacity:.7;margin:0}
.grab-error{color:var(--negative-ink,#e0524a)}
@media (max-width:640px){.grab-card{flex-direction:column}.grab-cover{width:100%;height:190px}}

/* ================= theme ==================================================
   counter.css defines the light palette on :root. Dark is the default here,
   so the tokens are re-pointed rather than the components restyled, and
   [data-theme="light"] puts the original values back. Values match the
   library viewer so both surfaces read as one product.
   ========================================================================= */
:root{
  --paper:#0d0d0f; --paper-2:#151518; --paper-3:#1e1e23;
  --void:#151518;  --void-2:#1e1e23;  --void-3:#26262d;
  --ink-1:#f2f2f4; --ink-2:#a8a8b3; --ink-3:#6f6f7c; --ink-4:#4a4a55;
  --ink-inv:#0d0d0f;
  --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.07); --line-firm:rgba(255,255,255,.3);
  --e-1:0 1px 2px rgba(0,0,0,.5); --e-2:0 8px 24px rgba(0,0,0,.55); --e-3:0 24px 64px rgba(0,0,0,.6);
  --ring:0 0 0 2px var(--paper), 0 0 0 4px var(--ink-1);
  /* one accent, always a gradient */
  --grad:linear-gradient(100deg,#ff7a2f 0%,#f5384f 46%,#f51bee 100%);
  --grad-edge:linear-gradient(100deg,#ff7a2f,#f51bee);
  --flare:#f51bee; --flare-deep:#c614be; --flare-wash:rgba(245,27,238,.14); --halo:#ff7a2f;
  --flare-ink:#ff8ae8;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --paper:#fff; --paper-2:oklch(96.5% 0 0); --paper-3:oklch(93% 0 0);
  --void:oklch(14% 0 0); --void-2:oklch(19% 0 0); --void-3:oklch(25% 0 0);
  --ink-1:oklch(16% 0 0); --ink-2:oklch(42% 0 0); --ink-3:oklch(58% 0 0); --ink-4:oklch(74% 0 0);
  --ink-inv:#fff;
  --line:oklch(16% 0 0 / .12); --line-soft:oklch(16% 0 0 / .07); --line-firm:oklch(16% 0 0 / .28);
  --e-1:0 1px 2px oklch(16% 0 0 / .06); --e-2:0 8px 24px oklch(16% 0 0 / .08); --e-3:0 24px 64px oklch(16% 0 0 / .14);
  --flare-ink:var(--flare-deep);
  color-scheme:light;
}
html,body{background:var(--paper);color:var(--ink-1)}

/* accent surfaces become the gradient */
.btn-accent,.btn-primary{background-image:var(--grad);background-color:transparent;color:#fff;border-color:transparent}
.btn-accent:hover,.btn-primary:hover{background-image:var(--grad);filter:brightness(1.08)}
.mark-glyph{background-image:var(--grad)!important}
.masthead h1 em{background-image:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- theme toggle ---------- */
.theme-toggle{position:relative;display:inline-flex;align-items:center;gap:2px;width:60px;height:32px;
  padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);cursor:pointer;flex:none}
.theme-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:var(--ink-1);transition:transform .22s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
:root[data-theme="light"] .theme-knob{transform:translateX(26px)}
.theme-ico{position:relative;width:26px;height:26px;padding:5px;fill:none;stroke:currentColor;stroke-width:1.7;
  color:var(--ink-3);transition:color .2s}
.theme-ico.sun{color:var(--paper);fill:var(--paper);stroke:var(--paper)}
:root[data-theme="light"] .theme-ico.sun{color:var(--ink-3);fill:none;stroke:var(--ink-3)}
:root[data-theme="light"] .theme-ico.moon{color:var(--paper);fill:var(--paper);stroke:none}
.theme-ico.moon{fill:var(--ink-3);stroke:none}

/* ---------- the three tasks ---------- */
.tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 18px}
.task{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-radius:18px;
  border:1px solid var(--line);background:var(--paper-2);text-decoration:none;color:inherit;
  transition:transform .18s var(--ease-out,cubic-bezier(.22,.61,.36,1)),border-color .18s}
.task:hover{transform:translateY(-4px);border-color:var(--line-firm)}
.task-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;
  background:var(--paper-3);font-size:16px}
.task-pro .task-ico{background-image:var(--grad);color:#fff}
.task-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.task-body b{font-size:15px;font-weight:600}
.task-body i{font-style:normal;font-size:13px;color:var(--ink-3);line-height:1.4}
@media (max-width:760px){.tasks{grid-template-columns:1fr}}

/* ---------- grab moved above the fold ---------- */
.grab-lead{margin:0 auto 34px}
.grab-form:focus-within{border-color:var(--ink-3)}
.grab-check:has(input:checked){border-color:var(--ink-3);background:var(--paper-3)}
.task-ico svg{width:17px;height:17px}
/* Only the recommended plan carries the accent; the others are surfaces. */
.plan-top-mute{background:var(--paper-3);color:var(--ink-1)}
.badge.glow{background-image:var(--grad);color:#fff}

/* Two plans, not three: keep the pair from stretching the width of the page. */
.plans-pair{max-width:860px;margin-inline:auto}

/* Desktop: the icon tile matches the height of the text beside it, so the card
   has the same gap on all four sides instead of a hole under a small square. */
@media (min-width: 761px){
  .task{padding:18px;gap:16px}
  .task-ico{width:40px;height:40px;border-radius:13px}
  .task-ico svg{width:21px;height:21px}
}

/* ══════════════════════════════════════════════════════════════
   Sign-in — one modal on a scrim, no nav rail and no footer.
   Signing in is the only thing on the screen, so nothing else is on it.
   ══════════════════════════════════════════════════════════════ */
.auth-scrim{min-height:100vh;display:grid;place-items:center;padding:24px;
  position:relative;background:var(--void);overflow:hidden}
.auth-scrim::before{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 90% at 50% 0%,oklch(24% 0 0),oklch(14% 0 0))}
.auth-card{position:relative;width:100%;max-width:440px;background:var(--paper-2);
  border:1px solid var(--line-soft);border-radius:var(--r-media);
  box-shadow:var(--e-3);padding:28px}
.auth-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-head h1{margin:0;font-size:25.3px;font-weight:500;letter-spacing:-.02em}
.auth-head .mark-glyph{width:22px;height:22px;border-radius:999px;
  background-image:var(--grad);flex:none}
.auth-x{margin-left:auto;color:var(--ink-3);line-height:0;padding:6px;border-radius:999px}
.auth-x:hover{color:var(--ink-1);background:oklch(100% 0 0/.06)}
.auth-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round}
/* Google is white because that is the button people recognise, not because it
   is the accent — the accent stays on the one primary action below. */
.btn-google{background:#fff;color:#111;border:0;gap:10px}
.btn-google:hover{background:oklch(92% 0 0)}
.btn-google svg{width:18px;height:18px}
.auth-or{display:flex;align-items:center;gap:14px;margin:20px 0;
  color:var(--ink-3);font-size:14px}
.auth-or::before,.auth-or::after{content:"";height:1px;flex:1;background:var(--line)}
.auth-legal{margin:22px 0 0;text-align:center;font-size:13px;color:var(--ink-4);line-height:1.5}
.auth-legal a{color:var(--ink-3);border-bottom:1px solid var(--line)}
.auth-note{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.auth-note b{color:var(--ink-1);font-weight:500}
/* The six digits: wide tracking so a typed code is checkable at a glance. */
.auth-code{font-family:var(--t-mono);font-size:26px;letter-spacing:.34em;text-align:center}
@media (max-width:480px){.auth-card{padding:22px}}

/* ---------- code field: Counter's .otp cells over one real input ---------- */
.otp{position:relative;justify-content:center;gap:8px}
.otp .otp-input{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;background:none;font:inherit;
  letter-spacing:1em;text-align:center;cursor:text;
}
.otp .otp-input:focus{outline:none}
.otp span{background:var(--paper-2);border-color:var(--line);color:var(--ink-1);
  transition:border-color .18s var(--ease-out)}
.otp.is-error span{border-color:var(--negative);color:var(--negative)}
@media (max-width:480px){
  .otp{gap:6px}
  .otp span{width:44px;height:52px;font-size:21px}
}

/* ---------- our validation messages, never the browser's bubble ---------- */
.field-error{margin:7px 0 0;font-size:13.5px;line-height:1.45;color:var(--negative)}
.input.is-error{border-color:var(--negative)}

/* ---------- the code the cabinet gives out ---------- */
.code-give{margin:8px 0 34px;max-width:380px}
.otp.is-static{pointer-events:none;justify-content:flex-start}
.code-clock{display:flex;align-items:center;gap:12px;margin-top:14px}
.code-bar{flex:1;height:3px;border-radius:999px;background:var(--paper-3);overflow:hidden}
.code-bar i{display:block;height:100%;width:100%;background-image:var(--grad);
  transform-origin:left;transition:transform 1s linear}
.code-left{font-size:12.5px;color:var(--ink-3);min-width:34px;text-align:right}
.code-give.is-dead .otp span{opacity:.35}
.code-give.is-dead .code-clock{display:none}
.code-again{margin-top:14px}

/* ---------- hero: copy and cards on the left, the flow on the right ---------- */
.hero-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,380px); gap: 48px; align-items: start; }
.hero-copy { min-width: 0; }
/* Two cards side by side; the hero column is narrower than the page, so the
   three-across default would squeeze them. */
.tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.task-slot { display: flex; flex-direction: column; }
.task-slot .task { height: 100%; }

/* Supported browsers, under the card they belong to. Not the avatar stack:
   overlapping four round marks by 12px turns them into one illegible blob. */
.browsers {
  list-style: none; display: flex; gap: 8px;
  margin: 10px 0 0; padding: 0 0 0 2px;
}
.browsers li {
  width: 26px; height: 26px; border-radius: 999px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.browsers svg { width: 100%; height: 100%; display: block; }
@media (max-width: 620px) { .tasks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the flow: their servers → your disk ---------- */
.flow {
  display: grid; gap: 0; align-content: start;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--paper); padding: 22px 20px; position: sticky; top: 96px;
}
.flow-node { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.flow-node b { font-size: 15px; font-weight: 600; }
.flow-node i {
  grid-column: 2; font-style: normal; font-size: 12.5px; color: var(--ink-3);
}
.flow-dot, .flow-disk { width: 34px; height: 34px; border-radius: 12px; grid-row: span 2; }
.flow-dot { background-image: var(--grad); }
.flow-disk { background: var(--paper-3); box-shadow: inset 0 0 0 1px var(--line-firm); }

/* The channel. Overflow hidden so a tile appears and vanishes inside it. */
.flow-pipe {
  position: relative; height: 168px; margin: 14px 0 14px 16px;
  border-left: 2px dashed var(--line-firm);
}
.flow-bit {
  position: absolute; left: -1px; top: 0; translate: -50% 0;
  font-family: var(--t-mono); font-size: 11px; line-height: 1;
  padding: 5px 8px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--line);
  color: var(--ink-2); white-space: nowrap;
  animation: flow-fall 4.5s linear infinite; animation-delay: var(--d);
  opacity: 0;
}
@keyframes flow-fall {
  0%   { top: 0;    opacity: 0; }
  8%   {             opacity: 1; }
  92%  {             opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-bit { animation: none; opacity: 1; }
  .flow-bit:nth-child(1) { top: 4%; }
  .flow-bit:nth-child(2) { top: 26%; }
  .flow-bit:nth-child(3) { top: 48%; }
  .flow-bit:nth-child(4) { top: 70%; }
  .flow-bit:nth-child(5) { top: 92%; }
}
@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .flow { position: static; max-width: 420px; }
  .tasks { max-width: none; }
}

/* One panel, three surfaces. The outer frame is the shelf everything sits on.
   The link box is darker and keeps its own border and its own rounding on all
   four sides, so it reads as set into the panel rather than stuck to its top.
   The free choices are the lightest block — nearest the eye; the Pro group
   stays on the panel's own surface, a step further back. */
.grab-panel{
  border:1px solid var(--line);border-radius:26px;background:var(--paper);
  padding:8px;display:flex;flex-direction:column;gap:6px
}
/* No border of its own — the panel's is the only stroke in here. The link box
   is told apart by its fill and by the lighter shelf below it. */
.grab-panel .grab-form{
  border:0;background:none;border-radius:20px;padding:10px 10px 10px 6px;gap:10px
}

.grab-opts{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:0}
.grab-free{
  flex:1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:12px 20px;background:var(--paper-3);border-radius:18px
}
.grab-locked{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 18px}
.grab-locked .grab-check{opacity:.5;cursor:not-allowed}
/* A word, not a badge: the accent already belongs to the one primary button. */
.grab-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--flare-ink)}

/* The format switch: the same segmented control the catalogue uses. */
.seg{display:inline-flex;gap:2px;background:var(--paper);border-radius:999px;padding:3px;flex:none}
.seg button{border:0;background:none;font:inherit;font-size:13.5px;font-weight:500;
  color:var(--ink-3);padding:7px 16px;border-radius:999px;cursor:pointer;
  transition:background .18s var(--ease-out),color .18s var(--ease-out)}
.seg button[aria-pressed="true"]{background:var(--paper-3);color:var(--ink-1)}
.seg button:disabled{cursor:not-allowed}
.grab-locked .seg{opacity:.75}

@media (max-width:760px){
  .grab-free{flex:1 1 100%}
  .grab-locked{flex:1 1 100%;justify-content:center;padding-top:4px}
}

/* Free vs Pro — Counter's .plan, with ticks and crosses drawn as strokes. */
.plan-list svg { fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.plan-list .cross { stroke-width: 1.9; }
.plan-body .price .per { font-size: 16px; color: var(--ink-3); letter-spacing: 0; }
.plan.featured .plan-body .price .per { color: oklch(100% 0 0 / .55); }
.plan.featured .plan-top { background-image: var(--grad); }
.plan-body .btn { margin-top: auto; width: 100%; }

/* Touch targets: Design.md asks for 44px, and 46px below 720. The chip has no
   box of its own now, so the room goes above and below the label. */
@media (max-width: 720px) {
  /* Explicit, not padding arithmetic: the chip has no box, so its height is
     whatever the label happens to be. 44px is the number Design.md asks for. */
  .grab-check { min-height: 44px; padding: 0; font-size: 15px; }
  .grab-check input { width: 20px; height: 20px; }
  .seg button { min-height: 44px; padding: 0 18px; }
  .grab-free, .grab-locked { gap: 12px 18px; padding: 10px 16px; }
  .browsers li { width: 30px; height: 30px; }
  .grab-form { flex-wrap: wrap; }
  .grab-form input { flex: 1 1 100%; }
  .grab-form button { width: 100%; }
}

/* The browser marks and the one-line promise share a row under the cards. */
.hero-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.hero-foot .under { margin: 0; }
.hero-foot .browsers { margin: 0; }
@media (max-width: 620px) { .hero-foot { gap: 10px; } }