/* TitleWave.AI — "Data Backed SEO" — glass UI.
   Brand: navy ink #0B1B3F, plus the blues sampled straight from public/logo.svg,
   whose wave runs #2F7BEA -> #2233A8. The logo's light stop is too pale to carry
   white text (4.08:1), so --accent sits 30% along that same gradient at #2B65D6
   and --accent-hover is the logo's deep stop exactly. Aqua #38BDF8 is not in the
   logo and is used only where no text sits on it: the blobs and the progress bar.
   Amber is reserved for genuine warnings, green for success and "Copied".
   Logo lives in one file: public/logo.svg (top bar <img> + favicon).
   No inline styles anywhere (vercel.json CSP has no 'unsafe-inline' for style-src). */

/* ---------------- tokens ---------------- */
:root {
  --ink: #0B1B3F;
  --ink-soft: #2A3E6B;
  --muted: #4D5D86;
  --accent: #2B65D6;
  --accent-hover: #2233A8;
  --accent-2: #38BDF8;
  --accent-ink: #FFFFFF;
  --brand-from: #0B1B3F;
  --brand-to: #2B65D6;
  --brand-ink: #FFFFFF;
  --bg: #F2F6FD;
  --bg-deep: #E4EDFB;
  --surface: #FFFFFF;
  --line: #D3DFF2;
  --line-strong: #A6BCDF;
  --chip: #EFF5FE;
  --ok: #0F7340;
  --ok-soft: #DDF3E8;
  --ok-ink: #FFFFFF;
  --warn: #9A4B07;
  --warn-soft: #FDEBD6;
  --error: #C62D2D;
  --focus: #2750C2;
  --note-bg: #FFF6E8;
  --note-line: #F5D3A0;
  --sk: #DEE8F8;
  --on-ink: #FFFFFF;

  /* glass */
  --glass: rgba(255, 255, 255, 0.62);
  --glass-solid: #FBFDFF;
  --glass-line: rgba(11, 27, 63, 0.10);
  --glass-top: rgba(255, 255, 255, 0.92);
  --glass-inner: rgba(255, 255, 255, 0.45);
  --glass-drop: 0 1px 2px rgba(11, 27, 63, 0.05), 0 16px 32px -18px rgba(11, 27, 63, 0.22), 0 40px 72px -40px rgba(11, 27, 63, 0.28);
  --field: rgba(255, 255, 255, 0.72);
  --field-solid: #FFFFFF;

  /* backdrop: the logo's two blues plus aqua, for a "wave" feel */
  --blob-1: rgba(47, 123, 234, 0.38);
  --blob-2: rgba(56, 189, 248, 0.42);
  --blob-3: rgba(34, 51, 168, 0.26);
  --grid-ink: rgba(11, 27, 63, 0.06);

  --radius: 22px;
  --radius-sm: 14px;
  --topbar: 58px;
  color-scheme: light;
}

/* Dark mode: same tokens, system-driven, with a manual [data-theme] escape hatch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8EEFA; --ink-soft: #BFCCE6; --muted: #93A4C6;
    --accent: #78A9F1; --accent-hover: #97BDF5; --accent-2: #38BDF8; --accent-ink: #06142F;
    --brand-from: #101C4F; --brand-to: #2B65D6; --brand-ink: #FFFFFF;
    --bg: #061024; --bg-deep: #03080F; --surface: #121E3D;
    --line: #27365C; --line-strong: #3C4F80; --chip: #192747;
    --ok: #4FD69A; --ok-soft: rgba(79, 214, 154, 0.16); --ok-ink: #06140D;
    --warn: #F6BE6B; --warn-soft: rgba(246, 190, 107, 0.16);
    --error: #FF9A9A; --focus: #97BDF5;
    --note-bg: rgba(246, 190, 107, 0.11); --note-line: rgba(246, 190, 107, 0.32);
    --sk: #1B2747; --on-ink: #061024;

    --glass: rgba(14, 26, 54, 0.58);
    --glass-solid: #111C38;
    --glass-line: rgba(255, 255, 255, 0.10);
    --glass-top: rgba(255, 255, 255, 0.14);
    --glass-inner: rgba(255, 255, 255, 0.05);
    --glass-drop: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 36px -18px rgba(0, 0, 0, 0.55), 0 48px 80px -44px rgba(0, 0, 0, 0.6);
    --field: rgba(4, 10, 24, 0.42);
    --field-solid: #0D1730;
    --blob-1: rgba(47, 123, 234, 0.32);
    --blob-2: rgba(56, 189, 248, 0.20);
    --blob-3: rgba(34, 51, 168, 0.42);
    --grid-ink: rgba(255, 255, 255, 0.05);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #E8EEFA; --ink-soft: #BFCCE6; --muted: #93A4C6;
  --accent: #78A9F1; --accent-hover: #97BDF5; --accent-2: #38BDF8; --accent-ink: #06142F;
  --brand-from: #101C4F; --brand-to: #2B65D6; --brand-ink: #FFFFFF;
  --bg: #061024; --bg-deep: #03080F; --surface: #121E3D;
  --line: #27365C; --line-strong: #3C4F80; --chip: #192747;
  --ok: #4FD69A; --ok-soft: rgba(79, 214, 154, 0.16); --ok-ink: #06140D;
  --warn: #F6BE6B; --warn-soft: rgba(246, 190, 107, 0.16);
  --error: #FF9A9A; --focus: #97BDF5;
  --note-bg: rgba(246, 190, 107, 0.11); --note-line: rgba(246, 190, 107, 0.32);
  --sk: #1B2747; --on-ink: #061024;
  --glass: rgba(14, 26, 54, 0.58);
  --glass-solid: #111C38;
  --glass-line: rgba(255, 255, 255, 0.10);
  --glass-top: rgba(255, 255, 255, 0.14);
  --glass-inner: rgba(255, 255, 255, 0.05);
  --glass-drop: 0 1px 2px rgba(0, 0, 0, 0.35), 0 18px 36px -18px rgba(0, 0, 0, 0.55), 0 48px 80px -44px rgba(0, 0, 0, 0.6);
  --field: rgba(4, 10, 24, 0.42);
  --field-solid: #0D1730;
  --blob-1: rgba(47, 123, 234, 0.32);
  --blob-2: rgba(56, 189, 248, 0.20);
  --blob-3: rgba(34, 51, 168, 0.42);
  --grid-ink: rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}

/* ---------------- base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* No overflow-x here on purpose: it would turn <body> into a scroll
     container and break the sticky results panel. The blobs are clipped
     by .backdrop instead. */
}
h1, h2 { font-family: "Bricolage Grotesque", "Figtree", system-ui, sans-serif; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* ---------------- decorative backdrop ---------------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  will-change: transform;
}
.blob-a {
  width: 46vmax; height: 46vmax; top: -18vmax; left: -12vmax;
  background: radial-gradient(circle at 50% 50%, var(--blob-1), transparent 66%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.blob-b {
  width: 40vmax; height: 40vmax; top: 24vmax; right: -16vmax;
  background: radial-gradient(circle at 50% 50%, var(--blob-2), transparent 66%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.blob-c {
  width: 34vmax; height: 34vmax; bottom: -16vmax; left: 28vw;
  background: radial-gradient(circle at 50% 50%, var(--blob-3), transparent 68%);
  animation: drift-a 38s ease-in-out infinite alternate-reverse;
}
@keyframes drift-a { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-5vmax, -6vmax, 0) scale(1.08); } }

/* Faint grid, masked so it fades out towards the edges. */
.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 32%, #000 18%, rgba(0, 0, 0, 0.5) 52%, transparent 84%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 32%, #000 18%, rgba(0, 0, 0, 0.5) 52%, transparent 84%);
}

/* ---------------- glass recipe ----------------
   Default is a solid card; the translucent version is layered on only where
   backdrop-filter is actually supported. */
.glass {
  position: relative;
  background: var(--glass-solid);
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 0 var(--glass-top),
    inset 0 0 0 1px var(--glass-inner),
    var(--glass-drop);
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .glass {
    background: var(--glass);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
  }
  .topbar { background: var(--glass); }
}

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--glass-solid);
  border-bottom: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 -1px 0 var(--glass-inner);
}
.topbar-in {
  max-width: 1180px;
  margin: 0 auto;
  min-height: var(--topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
/* The mark is a transparent-background wave, so it gets no tile, ring or drop
   shadow — those would frame empty space. Its artwork sits inside the viewBox
   with its own margin, so it is set a little larger than a plate would be. */
.mark { display: block; flex: none; width: 34px; height: 34px; }
.brand-name {
  font-family: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  font-weight: 700; font-size: 17px; letter-spacing: -0.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ".AI" picks up the same gradient the logo's wave runs through. */
.brand-ai { color: var(--accent-hover); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-ai {
    background-image: linear-gradient(120deg, var(--accent) 0%, var(--accent-hover) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.topbar-tag {
  flex: none;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line);
}
.topbar-link {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding: 0 14px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.topbar-link:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.topbar-arrow { font-size: 13px; line-height: 1; }

/* ---------------- shell ---------------- */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px max(16px, env(safe-area-inset-right)) 48px max(16px, env(safe-area-inset-left));
}

/* ---------------- hero ---------------- */
.hero { margin-bottom: 30px; }
.hero-copy { max-width: 760px; }
h1 {
  font-size: clamp(34px, 6.6vw, 58px);
  font-weight: 800; line-height: 1.03; letter-spacing: -0.035em;
}
/* Gradient headline, but only where clipping to text works — otherwise the
   words would disappear. */
.h1-accent { color: var(--accent-hover); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .h1-accent {
    background-image: linear-gradient(100deg, var(--ink) 0%, var(--accent-hover) 42%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.lede { margin: 16px 0 0; font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); max-width: 620px; }

/* 3-step strip */
.steps {
  list-style: none;
  margin: 24px 0 0;
  padding: 10px 16px;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  background: var(--glass-solid);
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-top), 0 8px 22px -14px rgba(11, 27, 63, 0.3);
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .steps { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
.step { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; }
.step-n {
  display: grid; place-items: center;
  width: 23px; height: 23px; border-radius: 50%;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
  background: var(--accent);
}
.step + .step::before {
  content: "";
  width: 7px; height: 7px; margin-right: 2px;
  border-top: 2px solid var(--line-strong);
  border-right: 2px solid var(--line-strong);
  transform: rotate(45deg);
}

/* slim stats row under the step strip */
.stats {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px;
  font-size: 13.5px; color: var(--muted);
}
.stats li { display: flex; align-items: center; gap: 10px; }
/* drawn, not a "·" character, so it is never read out */
.stats li + li::before {
  content: ""; flex: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--line-strong);
}

/* ---------------- hero example card (desktop only) ----------------
   Three states on #example: "ready" is the finished look and the default in
   the markup, so no-JS and reduced-motion land straight on it. JS switches to
   "playing" (before at full strength, title emptied, chips hidden) and then to
   "done" once the typing finishes, which fades the before and pops the chips. */
.example { display: none; }

@media (min-width: 1100px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: 40px;
    /* start, not center: centring let a card taller than the copy ride up
       under the sticky top bar. This pins its top to the headline's top, so
       it keeps the hero's padding as breathing room at every width. */
    align-items: start;
  }
  .example { display: block; padding: 22px 24px 24px; }
}

.example-label {
  margin: 0 0 15px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.example-row { display: grid; gap: 7px; justify-items: start; }
.example-tag {
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
/* Neutral chip behind these: on a red/green tint, 11px coloured label text
   only reached ~4.1:1 and ~4.3:1. The text colour still carries the meaning. */
.example-tag-before { color: var(--error); background: var(--chip); }
.example-tag-after { color: var(--ok); background: var(--chip); }
.example-title { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.45; }
/* Full-strength muted text so the words stay readable (6.3:1 light, 6.7:1
   dark against the card); only the line itself is red. */
.example-struck {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--error);
  text-decoration-thickness: 2px;
}
.example-typed { min-height: 1.45em; }
.example-arrow { display: grid; place-items: center; margin: 11px 0; color: var(--accent); }

.example-chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.example-chips li {
  padding: 5px 11px; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 500; line-height: 1.2;
}

/* state: playing. The before row fades IN and then stays fully opaque —
   dimming it at rest was what made the struck-through words hard to read. */
.example[data-state="playing"] .example-before { animation: example-fade 0.5s ease-out both; }
.example[data-state="playing"] .example-chips li { opacity: 0; }
.example[data-state="playing"] .example-typed::after {
  content: ""; display: inline-block;
  width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px;
  background: var(--accent);
  animation: example-caret 0.75s steps(1) infinite;
}
@keyframes example-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes example-caret { 50% { opacity: 0; } }

/* states: ready (final) and done (final, with the chips popping in) */
.example[data-state="done"] .example-chips li {
  animation: example-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.example-chips li:nth-child(1) { animation-delay: 30ms; }
.example-chips li:nth-child(2) { animation-delay: 100ms; }
.example-chips li:nth-child(3) { animation-delay: 170ms; }
.example-chips li:nth-child(4) { animation-delay: 240ms; }
@keyframes example-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* ---------------- layout ---------------- */
.grid { display: grid; gap: 22px; }
@media (min-width: 860px) {
  .wrap { padding-top: 46px; }
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 34px; align-items: start; }
  .panel { position: sticky; top: calc(var(--topbar) + 18px); }
}

/* ---------------- form ---------------- */
.form {
  display: grid;
  gap: 26px;
  padding: 26px clamp(18px, 3vw, 30px) 28px;
  scroll-margin-top: calc(var(--topbar) + 14px);
}
.sec { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; }
.sec + .sec { padding-top: 26px; border-top: 1px solid var(--glass-line); }
.sec-head {
  display: flex; align-items: center; gap: 11px;
  font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
}
.sec-num {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 10px;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
  background: linear-gradient(150deg, var(--brand-to), var(--brand-from));
  box-shadow: 0 4px 12px -5px color-mix(in srgb, var(--accent) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.sec-title { min-width: 0; }

.field { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; min-width: 0; }
label, legend { font-weight: 600; font-size: 16.5px; padding: 0; line-height: 1.35; }
.req {
  display: inline-block; margin-left: 4px; padding: 1px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--on-ink); background: var(--ink);
  vertical-align: 1px;
}
.hint { margin: -1px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }
.sec-hint { margin: -8px 0 0; font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.rec {
  display: inline-block; margin-left: 4px; padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent);
  vertical-align: 1px;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 430px) { .row { grid-template-columns: 1fr; } }

input[type="text"], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 17px; /* >=16px stops iOS zooming on focus */
  color: var(--ink);
  background: var(--field-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  min-height: 52px;
  box-shadow: inset 0 1px 2px rgba(11, 27, 63, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  -webkit-appearance: none; appearance: none;
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  input[type="text"], select, textarea { background: var(--field); }
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 20%, transparent);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
input[aria-invalid="true"] { border-color: var(--error); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--error) 20%, transparent); }

.select { position: relative; }
.select select { padding-right: 44px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.error { margin: 2px 0 0; color: var(--error); font-size: 14.5px; font-weight: 600; }
.error:empty { display: none; }

/* segmented control with a sliding thumb */
.seg {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 5px;
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  box-shadow: inset 0 1px 3px rgba(11, 27, 63, 0.06);
}
.seg-thumb {
  position: absolute;
  top: 5px; left: 5px;
  width: calc(50% - 5px); height: calc(100% - 10px);
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 2px 8px -2px rgba(11, 27, 63, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.3s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.seg[data-active="yes"] .seg-thumb { transform: translateX(100%); }
.seg button {
  position: relative; z-index: 1;
  font: inherit; font-weight: 600; font-size: 16.5px;
  min-height: 46px;
  border: 0; border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s;
}
.seg button[aria-checked="true"] { color: var(--on-ink); }
.seg button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* primary action */
.cta {
  justify-self: start;
  font: inherit; font-weight: 700; font-size: 18px;
  color: var(--brand-ink);
  /* Pure navy-to-blue: tinting the last stop with aqua lifted it to 4.49:1
     against the white label. Aqua is kept to the blobs and the progress bar. */
  background: linear-gradient(118deg, var(--brand-from) 0%, color-mix(in srgb, var(--brand-to) 62%, var(--brand-from)) 48%, var(--brand-to) 100%);
  border: 0; border-radius: 999px;
  min-height: 58px; min-width: 272px; padding: 0 32px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 2px 6px -1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 14px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.cta:hover { filter: brightness(1.04) saturate(1.05); }
.cta:active { transform: translateY(1px); }
.cta:disabled { cursor: progress; filter: saturate(0.55) opacity(0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); }
@media (max-width: 540px) { .cta { justify-self: stretch; } }

/* ---------------- results panel ---------------- */
.panel {
  padding: 26px clamp(18px, 3vw, 34px) 28px;
  scroll-margin-top: calc(var(--topbar) + 14px);
}

/* empty state */
.empty-mark {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 14px;
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.empty-title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.empty-lede { margin: 10px 0 20px; color: var(--muted); font-size: 16.5px; }
.tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tip {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--chip);
  border: 1px solid var(--glass-line);
  font-size: 15.5px; line-height: 1.5;
}
.tip-n {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent-ink); background: var(--accent);
}
.tip-body strong { font-weight: 700; }

/* loading state */
.loading-msg {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 22px;
  font-size: 16px; font-weight: 600; color: var(--ink-soft);
  min-height: 24px;
}
.spinner {
  flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { animation: msg-in 0.4s ease both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.sk { background: var(--sk); border-radius: 10px; position: relative; overflow: hidden; }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.4s infinite;
}
.sk-h { width: 92px; height: 22px; margin-bottom: 15px; }
.sk-gap { margin-top: 30px; }
.sk-t { height: 17px; margin-bottom: 10px; }
.sk-t.short { width: 58%; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-c { display: inline-block; width: 118px; height: 36px; border-radius: 999px; }
.sk-c:nth-child(2n) { width: 94px; }
.sk-c:nth-child(3n) { width: 138px; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* result state */
.result-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 18px;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.015em;
  border: 1px solid transparent;
}
.badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge[data-source="ai"] {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 32%, transparent);
}
.badge[data-source="fallback"] {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

.block + .block { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--glass-line); }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 44px; }
.block-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }

.copy {
  font: inherit; font-weight: 600; font-size: 15px;
  min-height: 44px; min-width: 116px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--field-solid);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-top), 0 1px 2px rgba(11, 27, 63, 0.05);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.copy:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.copy.ok { background: var(--ok); border-color: var(--ok); color: var(--ok-ink); }
.copy.fail { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }

.title-box textarea {
  resize: vertical; min-height: 96px;
  font-weight: 500; line-height: 1.45;
  background: var(--chip);
}

/* title character progress */
.progress {
  margin-top: 12px;
  height: 7px; border-radius: 999px;
  background: var(--sk);
  overflow: hidden;
}
.progress-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-hover), var(--accent-2));
  transition: width 0.3s ease, background 0.3s;
}
.progress-fill.near { background: var(--warn); }
.progress-fill.over { background: var(--error); }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 14px; margin-top: 9px;
  font-size: 14px; color: var(--muted);
}
.count { font-variant-numeric: tabular-nums; font-weight: 600; }
.count.near { color: var(--warn); }
.count.over { color: var(--error); }
.meta-hint { font-size: 13.5px; }

.first5 {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-left-width: 3px;
}
.first5-label {
  display: inline-block; margin-bottom: 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-hover);
}
.first5-text { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.4; }

/* tag chips */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 9px 8px 14px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line);
  font-weight: 500; font-size: 15px; line-height: 1.2;
  box-shadow: inset 0 1px 0 var(--glass-top);
  animation: chip-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes chip-in { from { opacity: 0; transform: translateY(7px) scale(0.94); } to { opacity: 1; transform: none; } }
.chips .n {
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--field-solid);
  border-radius: 999px; padding: 2px 7px;
}
.summary { justify-content: flex-start; margin-top: 14px; }
.manual { margin-top: 12px; font-size: 16px; }

/* Etsy checks */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
/* flex-start, not center: the "fill all 13 tags" hint wraps to two lines. */
.check {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 15.5px; line-height: 1.4;
}
.check-mark {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.check-mark::before { content: "\2713"; }
.check[data-ok="true"] .check-mark { color: var(--ok); background: var(--ok-soft); }
.check[data-ok="false"] .check-mark { color: var(--warn); background: var(--warn-soft); }
.check[data-ok="false"] .check-mark::before { content: "\0021"; }
.check[data-ok="false"] .check-text { color: var(--warn); font-weight: 600; }

.note {
  margin: 24px 0 0;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  font-size: 15px; color: var(--ink);
}

/* mobile-only jump back to the form */
.edit-answers {
  display: none;
  width: 100%;
  margin-top: 22px;
  min-height: 50px;
  font: inherit; font-weight: 600; font-size: 16px;
  color: var(--ink);
  background: var(--field-solid);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-top);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.edit-answers:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
@media (max-width: 859px) { .edit-answers { display: block; } }

/* ---------------- optional photo scan ----------------
   One slim row, deliberately quieter than the fields below it. */
.scan { display: grid; gap: 8px; }
.scan-input { display: none; }

.scan-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 9px 13px;
  font: inherit; text-align: left;
  color: var(--ink);
  background: var(--field-solid);
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--line));
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-top);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .scan-row { background: var(--field); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
.scan-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--field-solid)); }
.scan-row:disabled { cursor: progress; opacity: 0.65; }
.scan.dragging .scan-row {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, var(--field-solid));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
}
.scan-icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  color: var(--accent-hover); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.scan-text { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.35; }
.scan-opt {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-hover);
}
.scan-sep { color: var(--muted); margin: 0 3px; }
.scan-cta {
  flex: none;
  font-size: 13.5px; font-weight: 700;
  color: var(--accent-ink); background: var(--accent);
  padding: 6px 13px; border-radius: 999px;
}
.scan-or { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; }

.scan-busy {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--chip);
}
.scan-thumb {
  position: relative; flex: none; overflow: hidden;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--sk);
}
.scan-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scan-busy.scanning .scan-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}
.scan-busy-text { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.scan-busy-text:empty { display: none; }
.scan-remove {
  flex: none;
  margin-left: auto; /* stays right once the status text clears */
  min-height: 44px; padding: 0 15px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink);
  background: var(--field-solid);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.scan-remove:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

.scan-note {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 14.5px; line-height: 1.45;
  color: var(--ink);
}
.scan-note[data-kind="warn"] { background: var(--note-bg); border: 1px solid var(--note-line); }
.scan-note[data-kind="ok"] { background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent); }

/* brief blue glow on a field the photo filled in */
@keyframes field-glow {
  from {
    box-shadow: inset 0 1px 2px rgba(11, 27, 63, 0.04), 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
    background-color: color-mix(in srgb, var(--accent) 18%, var(--field-solid));
  }
  to {
    box-shadow: inset 0 1px 2px rgba(11, 27, 63, 0.04), 0 0 0 4px transparent;
  }
}
.glow { animation: field-glow 1.5s ease-out 1; }

/* ---------------- title options ---------------- */
.options-wrap { display: grid; gap: 9px; margin-bottom: 14px; }
.options-label { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.options { display: grid; gap: 9px; }
.option {
  display: grid; gap: 5px;
  width: 100%;
  padding: 12px 14px;
  font: inherit; text-align: left;
  color: var(--ink);
  background: var(--field-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-top);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .option { background: var(--field); }
}
.option:hover { border-color: var(--line-strong); }
.option[aria-checked="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--field-solid));
  box-shadow: inset 0 1px 0 var(--glass-top), 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.option-n {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted);
}
.option-n::before {
  content: ""; flex: none;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.option[aria-checked="true"] .option-n { color: var(--accent-hover); }
.option[aria-checked="true"] .option-n::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2.5px var(--field-solid);
}
.option-text { font-size: 15.5px; font-weight: 500; line-height: 1.4; }
.option-meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------- regenerate ---------------- */
.regen {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px;
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--ink);
  background: var(--field-solid);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 var(--glass-top);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.regen:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.regen:disabled { cursor: progress; opacity: 0.6; }
.regen-icon { display: grid; place-items: center; flex: none; }

/* ---------------- recent ---------------- */
.recent { margin-top: 22px; padding: 16px clamp(14px, 2.5vw, 22px) 18px; }
.recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.recent-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.recent-clear {
  font: inherit; font-size: 14px; font-weight: 600;
  min-height: 44px; padding: 0 10px;
  color: var(--muted);
  background: none; border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.recent-clear:hover { color: var(--ink); }
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.recent-item {
  display: grid; gap: 2px;
  min-height: 44px; padding: 7px 14px;
  font: inherit; text-align: left;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.recent-item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--chip)); }
.recent-name { font-size: 15px; font-weight: 600; line-height: 1.25; }
.recent-meta { font-size: 12.5px; color: var(--muted); line-height: 1.25; }

/* ---------------- footer ---------------- */
.foot { margin-top: 40px; color: var(--muted); font-size: 14px; }
.foot p { margin: 0; max-width: 640px; }

/* ---------------- batch: product cards ----------------
   One card is the single-product form exactly as it was: `body.batch` (2+
   products) is what turns the header, numbering and per-card controls on. */
.cards { display: grid; gap: 18px; }
.card { display: grid; }
body.batch .card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--chip) 60%, transparent);
  overflow: hidden;
}

/* The header only exists in batch mode. */
.card-head { display: none; }
body.batch .card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 6px;
  border-bottom: 1px solid transparent;
}
body.batch .card[data-open="true"] .card-head { border-bottom-color: var(--line); }

.card-toggle {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 8px;
  font: inherit; font-size: 15.5px; font-weight: 600; text-align: left;
  color: var(--ink);
  background: none; border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
}
.card-toggle:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.card-n {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 7px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
  background: linear-gradient(150deg, var(--brand-to), var(--brand-from));
}
.card-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-chev { flex: none; display: grid; place-items: center; color: var(--muted); transition: transform 0.2s; }
.card[data-open="false"] .card-chev { transform: rotate(-90deg); }

.card-status {
  flex: none;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--muted); background: var(--chip);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.card-status[data-state="generating"] {
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.card-status[data-state="done"] {
  color: var(--ok); background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 32%, transparent);
}
.card-status[data-state="fallback"] {
  color: var(--warn); background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

.card-btn {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--muted);
  background: none; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.card-btn:hover:not(:disabled) { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.card-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.card-body { display: grid; gap: 18px; }
body.batch .card-body { padding: 18px clamp(12px, 2.5vw, 18px) 20px; }
/* The card number replaces the per-card step numbers in batch mode. */
body.batch .sec-num { display: none; }
body.batch .sec-head { font-size: 17px; }
body.batch .sec + .sec { padding-top: 20px; }

/* per-card photo */
.card-photo {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--chip);
}
.card-thumb {
  position: relative; flex: none; overflow: hidden;
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--sk);
}
.card-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-photo.scanning .card-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}
.card-photo-text { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.card-photo-text[data-kind="ok"] { color: var(--ok); }
.card-photo-text[data-kind="warn"] { color: var(--warn); }
.card-photo-remove {
  flex: none;
  min-height: 44px; padding: 0 13px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink);
  background: var(--field-solid);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.card-photo-remove:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* add another product */
.add-wrap { display: grid; gap: 7px; justify-items: start; }
.add-product {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 18px;
  font: inherit; font-size: 15.5px; font-weight: 600;
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 8%, var(--field-solid));
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.add-product:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 14%, var(--field-solid));
  border-color: var(--accent);
}
.add-product:disabled { opacity: 0.5; cursor: not-allowed; }
.add-plus { font-size: 19px; line-height: 1; font-weight: 700; }
.add-hint { margin: 0; font-size: 13.5px; color: var(--muted); }

.market-field { max-width: 280px; }

/* ---------------- batch: progress ---------------- */
.batch-progress {
  margin: 0 0 10px;
  font-size: 15.5px; font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.batch-track { margin: 0 0 20px; }

/* ---------------- batch: results ---------------- */
.batch-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 14px;
  margin: 0 0 18px; padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-line);
}
.batch-count { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.batch-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-all-manual { flex-basis: 100%; margin-top: 4px; font-size: 15px; line-height: 1.5; }

.result-blocks { display: grid; }
.result-blocks.many { gap: 12px; }

/* A single product keeps the plain, header-less panel it has always had. */
.rblock-head { display: none; }
.result-blocks.many .rblock {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: color-mix(in srgb, var(--chip) 55%, transparent);
}
.result-blocks.many .rblock-head { display: flex; }
.result-blocks.many .rblock-body { padding: 16px clamp(12px, 2.5vw, 18px) 20px; }

.rblock-toggle {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 12px;
  font: inherit; font-size: 15.5px; font-weight: 600; text-align: left;
  color: var(--ink);
  background: none; border: 0;
  cursor: pointer;
}
.rblock-toggle:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rblock-n {
  display: grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 7px;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--brand-ink);
  background: linear-gradient(150deg, var(--brand-to), var(--brand-from));
}
.rblock-thumb {
  flex: none; overflow: hidden;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--sk);
}
.rblock-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rblock-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rblock-chev { flex: none; display: grid; place-items: center; color: var(--muted); transition: transform 0.2s; }
.rblock[data-open="false"] .rblock-chev { transform: rotate(-90deg); }
.rblock-busy { opacity: 0.72; }

.result-top-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.retry { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.retry:hover:not(:disabled) { background: var(--warn); color: var(--on-ink); border-color: var(--warn); }

/* The panel cannot stay sticky once it holds a stack of products: a sticky box
   taller than the viewport pins its top and puts its bottom out of reach. */
@media (min-width: 860px) {
  body.batch .panel { position: static; }
}

/* ================================================================
   Accounts, plans and billing

   Same tokens as everything above: navy ink, the logo's blues for accents,
   amber only for warnings and green only for success. No inline styles, so
   anything dynamic (meter width, card state) is a class or a token.
   ================================================================ */

.topbar-end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-home { text-decoration: none; color: inherit; }
.brand-home:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }

.topbar-signin {
  font: inherit; font-weight: 700; font-size: 14px;
  /* brand-ink, not accent-ink: the label sits on the navy-to-blue gradient,
     and accent-ink is dark navy in dark mode (3.43:1). */
  color: var(--brand-ink);
  background: linear-gradient(120deg, var(--brand-from), var(--brand-to));
  border: 0; border-radius: 999px;
  min-height: 38px; padding: 0 18px;
  cursor: pointer;
}
.topbar-signin:hover { filter: brightness(1.06); }
.topbar-signin:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------------- account menu ---------------- */

.account { position: relative; }
.account-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 700; font-size: 14px;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--line-strong); border-radius: 999px;
  min-height: 38px; padding: 0 12px 0 14px;
  cursor: pointer;
}
.account-btn:hover { border-color: var(--accent); color: var(--accent-hover); }
.account-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.account-plan { white-space: nowrap; }
.account-chev { display: inline-flex; color: var(--muted); }
.account-btn[aria-expanded="true"] .account-chev { transform: rotate(180deg); }

.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: 252px; padding: 14px;
  display: grid; gap: 8px;
  background: var(--glass-solid);
  border: 1px solid var(--glass-line); border-radius: 16px;
  box-shadow: 0 18px 44px -16px rgba(11, 27, 63, 0.35);
}
.account-email {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
  overflow-wrap: anywhere;
}
.account-usage { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.account-renews { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }

.meter {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--sk);
}
.meter-fill {
  display: block; height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-hover), var(--accent-2));
  transition: width 0.3s ease;
}
.meter-fill.near { background: var(--warn); }
.meter-fill.full { background: var(--error); }

.account-item {
  font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 0; border-radius: 10px;
  min-height: 44px; padding: 0 10px;
  display: flex; align-items: center;
  cursor: pointer;
}
.account-item:hover { background: var(--chip); color: var(--accent-hover); }
.account-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }
.account-item-quiet { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }

/* ---------------- a ghost CTA, for the quieter of two buttons ---------------- */

.cta-ghost {
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none;
  color: var(--accent-hover);
  background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: 999px;
  min-height: 52px; padding: 0 26px;
  cursor: pointer;
}
.cta-ghost:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.cta-ghost:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cta-ghost:disabled { cursor: progress; opacity: 0.7; }

/* ---------------- the sign-in sheet ---------------- */

.sheet {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  color: var(--ink);
  background: var(--glass-solid);
  border: 1px solid var(--glass-line); border-radius: 22px;
  box-shadow: 0 32px 80px -24px rgba(11, 27, 63, 0.55);
}
.sheet::backdrop { background: rgba(6, 16, 36, 0.55); backdrop-filter: blur(3px); }
.sheet-in { position: relative; display: grid; gap: 14px; padding: 26px 24px 22px; }
.sheet-x {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: var(--muted);
  background: transparent; border: 0; border-radius: 999px;
  cursor: pointer;
}
.sheet-x:hover { background: var(--chip); color: var(--ink); }
.sheet-x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.sheet-title {
  margin: 0; padding-right: 40px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 25px; font-weight: 800; letter-spacing: -0.015em;
}
.sheet-lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.sheet-cta { min-width: 0; width: 100%; justify-self: stretch; min-height: 52px; font-size: 16px; }
.sheet-sent { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.sheet-sent strong { color: var(--ink); overflow-wrap: anywhere; }

.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px;
  font: inherit; font-weight: 700; font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: 999px;
  cursor: pointer;
}
.google-btn:hover { border-color: var(--accent); }
.google-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.google-btn:disabled { cursor: progress; opacity: 0.7; }

.sheet-or {
  display: flex; align-items: center; gap: 12px;
  margin: 2px 0; font-size: 13px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sheet-or::before, .sheet-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.code-input {
  font-size: 26px; font-weight: 700; letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sheet-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sheet-links-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.link-btn {
  font: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--accent-hover);
  background: transparent; border: 0; border-radius: 8px;
  min-height: 44px; padding: 0 2px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }
.link-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.sheet-error {
  margin: 0; padding: 10px 12px;
  font-size: 14.5px; font-weight: 600; line-height: 1.5;
  color: var(--error);
  background: color-mix(in srgb, var(--error) 10%, var(--glass-solid));
  border: 1px solid color-mix(in srgb, var(--error) 34%, transparent);
  border-radius: 12px;
}
.sheet-fine { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------------- first sign-in ---------------- */

.welcome-badge {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 12px 14px;
  font-size: 16px; font-weight: 700; line-height: 1.4;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  border-radius: 14px;
}
.welcome-choices { display: grid; gap: 10px; }
.choice {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line-strong); border-radius: 14px;
  min-height: 52px; padding: 0 20px;
  cursor: pointer;
}
.choice:hover { border-color: var(--accent); color: var(--accent-hover); }
.choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.welcome-ok {
  margin: 0; padding: 10px 12px;
  font-size: 14.5px; font-weight: 600; line-height: 1.5;
  color: var(--ok); background: var(--ok-soft);
  border-radius: 12px;
}

/* ---------------- out of allowance ---------------- */

.limit { display: grid; gap: 12px; padding: 4px 0; }
.limit-eyebrow {
  margin: 0; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.limit-title {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 27px; font-weight: 800; letter-spacing: -0.015em;
}
.limit-lede { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.limit-plans { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.limit-plan {
  display: grid; gap: 2px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--chip) 60%, var(--glass-solid));
  border: 1px solid var(--line); border-radius: 14px;
}
.limit-plan-hero {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.limit-plan-name { font-size: 17px; font-weight: 800; }
.limit-plan-detail { font-size: 14.5px; color: var(--ink-soft); }
.limit-plan-note { font-size: 13px; font-weight: 600; color: var(--accent-hover); }
.limit-cta { margin-top: 4px; }

/* ---------------- card states added by the account layer ---------------- */

.card-status[data-state="skipped"] {
  color: var(--muted); background: var(--chip); border-color: var(--line-strong);
}
.card-status[data-state="limit"] {
  color: var(--warn); background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
}

/* ================================================================
   Pricing page
   ================================================================ */

.price-main {
  width: min(1120px, 100% - 32px);
  margin: 0 auto; padding: 28px 0 56px;
  display: grid; gap: 26px;
}
.price-head { display: grid; gap: 14px; justify-items: start; max-width: 680px; }
.price-head h1 {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(32px, 7vw, 50px); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em;
}
.price-member-line {
  margin: 0; padding: 9px 14px;
  font-size: 14.5px; font-weight: 700; line-height: 1.45;
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 11%, var(--glass-solid));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
}
.price-state { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); }

.billing-seg {
  display: inline-flex; gap: 4px;
  padding: 5px;
  background: var(--chip);
  border: 1px solid var(--line-strong); border-radius: 999px;
}
.billing-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-weight: 700; font-size: 15px;
  color: var(--ink-soft);
  background: transparent; border: 0; border-radius: 999px;
  min-height: 44px; padding: 0 20px;
  cursor: pointer;
}
.billing-btn:hover { color: var(--accent-hover); }
.billing-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.billing-btn[aria-pressed="true"] {
  color: var(--on-ink);
  background: var(--ink);
}
.billing-save {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: var(--ok); background: var(--ok-soft);
}
.billing-btn[aria-pressed="true"] .billing-save { color: var(--ok); background: var(--ok-soft); }

.price-grid { display: grid; gap: 16px; }

.price-card {
  display: grid; gap: 10px; align-content: start;
  padding: 24px 22px;
  background: var(--glass-solid);
  border: 1px solid var(--glass-line); border-radius: 20px;
  box-shadow: 0 16px 40px -22px rgba(11, 27, 63, 0.3);
}
.price-hero {
  order: -1; /* on a phone the hero card comes first */
  border-color: var(--accent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
    0 26px 60px -24px color-mix(in srgb, var(--accent) 55%, transparent);
}
.price-card.is-current { border-color: var(--ok); }

.price-badge {
  justify-self: start;
  margin: 0; padding: 4px 11px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--brand-ink);
  background: linear-gradient(120deg, var(--brand-from), var(--brand-to));
  border-radius: 999px;
}
.price-name {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 22px; font-weight: 800;
}
.price-amount { display: flex; align-items: baseline; gap: 2px; margin: 0; }
.price-cur { font-size: 22px; font-weight: 700; color: var(--ink-soft); }
.price-big {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.price-per { font-size: 16px; font-weight: 600; color: var(--muted); }
.price-billed { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.price-blurb { margin: 6px 0 0; font-size: 16px; font-weight: 700; }
.price-note { margin: 0; font-size: 14px; font-weight: 600; color: var(--accent-hover); }
.price-note-quiet { color: var(--muted); }

.price-features { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.price-features li {
  position: relative; padding-left: 24px;
  font-size: 15px; line-height: 1.45; color: var(--ink-soft);
}
.price-features li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  font-weight: 800; color: var(--accent);
}
.price-fine { color: var(--muted); font-size: 13px; }

.price-cta { width: 100%; justify-self: stretch; margin-top: 8px; min-width: 0; }
.price-yours {
  margin: 0; text-align: center;
  font-size: 13.5px; font-weight: 700;
  color: var(--ok);
}

/* ---------------- FAQ ---------------- */

.faq { display: grid; gap: 14px; }
.faq-title {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 24px; font-weight: 800;
}
.faq-list { margin: 0; display: grid; gap: 14px; }
.faq-item { display: grid; gap: 4px; }
.faq-item dt { font-size: 16px; font-weight: 700; }
.faq-item dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.fair-use {
  margin: 4px 0 0; padding: 14px 16px;
  font-size: 13px; line-height: 1.6; color: var(--muted);
  background: var(--chip);
  border-radius: 14px;
}
.fair-use strong { color: var(--ink-soft); }

/* ================================================================
   Admin
   ================================================================ */

.admin-main {
  width: min(1120px, 100% - 32px);
  margin: 0 auto; padding: 28px 0 56px;
  display: grid; gap: 20px;
}
.admin-gate { margin: 40px 0; font-size: 17px; font-weight: 600; color: var(--ink-soft); }
.admin-sec { display: grid; gap: 14px; }
.admin-h {
  margin: 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 21px; font-weight: 800;
}
.admin-lede { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.admin-note { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.admin-status { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); min-height: 1.2em; }

.admin-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.admin-grow { flex: 1 1 220px; }
.admin-btn { min-height: 48px; min-width: 0; font-size: 15px; padding: 0 20px; }

.stats-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat-tile {
  display: grid; gap: 2px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--chip) 60%, var(--glass-solid));
  border: 1px solid var(--line); border-radius: 14px;
}
.stat-value {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 28px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.stat-sub { font-size: 12px; color: var(--muted); }

.preview {
  display: grid; gap: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--accent) 7%, var(--glass-solid));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 16px;
}
.preview-h { margin: 0; font-size: 17px; font-weight: 800; }
.preview-counts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.preview-count {
  display: grid; gap: 1px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
}
.preview-count-v { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.preview-count-l { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.preview-warn {
  margin: 0; padding: 10px 12px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: 12px;
}
.deact-list {
  margin: 8px 0; padding: 10px 12px 10px 28px;
  max-height: 190px; overflow: auto;
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
}
.admin-check {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  min-height: 44px; cursor: pointer;
}
.admin-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.preview-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.preview-actions .cta, .preview-actions .cta-ghost { min-width: 0; min-height: 48px; font-size: 15px; padding: 0 22px; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
  padding: 9px 12px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-table th {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
}
.admin-table td:first-child { white-space: normal; overflow-wrap: anywhere; }
.admin-table tbody tr:hover { background: var(--chip); }

.admin-actions { display: flex; gap: 8px; }
.admin-mini {
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--accent-hover);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 999px;
  min-height: 36px; padding: 0 14px;
  cursor: pointer;
}
.admin-mini:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.admin-mini:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.admin-mini:disabled { opacity: 0.6; cursor: progress; }
.admin-mini-quiet { color: var(--muted); }

/* ---------------- wider screens ---------------- */

@media (min-width: 760px) {
  .price-grid { grid-template-columns: repeat(3, 1fr); align-items: start; }
  /* Left to right it reads Free, Pro, Expert, while the markup keeps the
     hero card first for phones. */
  .price-card[data-plan="free"] { order: 1; }
  .price-card[data-plan="pro"] { order: 2; }
  .price-card[data-plan="expert"] { order: 3; }
  .price-hero { padding: 30px 26px; }
  .price-hero .price-big { font-size: 54px; }
  .faq-list { grid-template-columns: repeat(2, 1fr); gap: 18px 28px; }
}

@media (max-width: 480px) {
  .topbar-end { gap: 7px; }
  .topbar-end .topbar-link { display: none; }
  .account-menu { width: min(272px, calc(100vw - 24px)); }
  .sheet { width: calc(100vw - 20px); }
  .sheet-in { padding: 22px 18px 18px; }
  .limit-title { font-size: 23px; }
  .price-main, .admin-main { width: calc(100% - 20px); }
  .admin-btn { width: 100%; }
}

/* ---------------- phones ----------------
   Tightens the hero so the form starts inside the first screen at 390px.
   Must stay after the rules it overrides. Nothing here drops below 16px for
   an input or 44px for a tap target. */
@media (max-width: 480px) {
  .wrap { padding-top: 20px; padding-bottom: 36px; }
  .hero { margin-bottom: 20px; }
  h1 { font-size: 31px; letter-spacing: -0.04em; }
  .lede { margin-top: 11px; font-size: 16.5px; line-height: 1.5; }
  .steps {
    display: flex;
    margin-top: 16px;
    padding: 9px 13px;
    gap: 7px 11px;
    border-radius: 18px; /* 999px looks wrong once the strip wraps to two rows */
  }
  .step { font-size: 14.5px; gap: 8px; }
  .step-n { width: 21px; height: 21px; font-size: 12px; }
  .form { padding-top: 22px; gap: 22px; }
  .sec { gap: 16px; }
  .sec + .sec { padding-top: 22px; }
  .foot { margin-top: 32px; }
  /* keep the scan row slim on a phone: drop the chip, shrink the label */
  .scan-cta { display: none; }
  .scan-text { font-size: 14px; }
  .scan-row { gap: 10px; }
  .topbar-tag { font-size: 11.5px; padding: 0 11px; letter-spacing: 0.03em; }
  .brand-name { font-size: 16px; }
  .option-text { font-size: 15px; }
  .recent-item { width: 100%; }
  .stats { margin-top: 12px; font-size: 13px; gap: 4px 9px; }
  .stats li { gap: 9px; }

  /* batch on a phone: cards go full width, headers stay one tidy row, and
     the export buttons split the width rather than wrapping awkwardly. */
  .cards { gap: 14px; }
  body.batch .card-body { padding: 14px 12px 16px; gap: 16px; }
  .card-toggle { font-size: 15px; gap: 8px; padding: 0 4px; }
  body.batch .card-head { padding: 5px 5px 5px 4px; gap: 2px; }
  .card-status { padding: 3px 7px; font-size: 10.5px; letter-spacing: 0.02em; }
  .card-btn { width: 44px; height: 44px; }
  .card-photo { flex-wrap: wrap; }
  .card-photo-text { flex-basis: 100%; order: 3; }
  .add-product { width: 100%; justify-content: center; }
  .add-wrap { justify-items: stretch; }
  .market-field { max-width: none; }
  .batch-actions { gap: 10px; }
  .batch-buttons { width: 100%; }
  .batch-buttons .copy { flex: 1; min-width: 0; }
  .result-blocks.many .rblock-body { padding: 14px 12px 18px; }
  .rblock-toggle { font-size: 15px; gap: 8px; padding: 6px 8px; }
  .result-top-actions { width: 100%; }
  .result-top-actions .regen { flex: 1; justify-content: center; }
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .blob { transform: none !important; }
  .chips li { opacity: 1; }
}