/* =========================================================================
   FlowCut / Daniel Media — single source of truth stylesheet.
   Dark "tool UI" aesthetic. Swap the WHOLE theme by editing --accent below.
   ========================================================================= */

/* ---------- 1. Theme tokens ---------- */
:root {
  /* >>> CHANGE THIS ONE LINE TO RE-SKIN THE SITE <<< */
  --accent:     #8b5cf6;            /* leading color (violet placeholder) */
  --accent-2:   #a855f7;            /* gradient partner */
  --accent-rgb: 139, 92, 246;       /* same as --accent, for glows */

  --bg:        #0a0a0f;   /* page background */
  --bg-2:      #0e0e15;   /* alt sections */
  --surface:   #141420;   /* cards */
  --surface-2: #1a1a28;   /* card hover / raised */
  --text:      #f2f2f7;   /* primary text */
  --muted:     rgba(242, 242, 247, 0.60);
  --faint:     rgba(242, 242, 247, 0.40);
  --line:      rgba(242, 242, 247, 0.09);
  --line-2:    rgba(242, 242, 247, 0.16);
  --gold:      #f5c451;   /* stars */
  --green:     #34d399;   /* free / success */

  /* MONEY palette — restrained, NOT neon: a calm confident green for buy/price/action */
  --money:      #3a9d6a;
  --money-2:    #2f855a;
  --money-rgb:  58, 157, 106;
  --cta2:       #c98a3c;   /* muted amber, used once for secondary checkout */
  --cta2-2:     #b9772e;

  /* Distinctive, designer-grade pairing — not the default AI/Helvetica look:
     Clash Display (characterful display) + Satoshi (clean modern body),
     Newsreader italic as a single serif accent. */
  --font-head:   'Clash Display', 'Helvetica Neue', Arial, sans-serif;
  --font-body:   'Satoshi', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:   'Satoshi', 'Helvetica Neue', Arial, sans-serif;

  --stripe:   #635bff;   /* Stripe brand violet — used only on the pay action */
  --stripe-2: #7a73ff;

  --maxw: 1200px;
  --gutter: clamp(18px, 5vw, 48px);
  --radius: 14px;
  --radius-sm: 9px;
  --header-h: 66px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* quiet, premium backdrop — no neon glow */
  background-image: radial-gradient(1100px 520px at 50% -120px, rgba(255,255,255,0.035), transparent 70%);
  background-attachment: fixed;
}

/* ambient gradient field — slow continuous drift so the page never feels flat */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 560px at 82% 6%, rgba(var(--accent-rgb),0.14), transparent 62%),
    radial-gradient(640px 520px at 8% 30%, rgba(var(--accent-rgb),0.07), transparent 62%),
    radial-gradient(620px 600px at 60% 96%, rgba(var(--accent-rgb),0.08), transparent 62%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2.5%, 0) scale(1.08); }
}

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease), transform .75s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

/* subtle life on the wordmark */
.brand-name { background-size: 220% auto; animation: shimmer 7s linear infinite; }
@keyframes shimmer { to { background-position: 220% center; } }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .brand-name { animation: none; }
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--money); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; }
/* Clash Display only on big display headings; small headings use Satoshi (far more legible) */
h1, h2 { font-family: var(--font-head); }
h3, h4 { font-family: var(--font-body); font-weight: 700; letter-spacing: -0.005em; }
.display { font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.18rem; }
p { color: var(--muted); }
.lead { font-size: clamp(1.02rem, 1.8vw, 1.22rem); color: var(--muted); max-width: 60ch; }
.grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* hero display accent — elegant serif italic (the Helvetica companion) */
.haccent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.005em; }
/* registered-trademark mark on FlowCut — small superscript */
.reg { font-size: 0.5em; vertical-align: super; font-weight: 600; line-height: 0; letter-spacing: 0.02em; }

/* key phrase — quiet emphasis, no glow */
.hl { font-weight: 700; color: var(--text); }

/* ---------- 4. Ticker / urgency ---------- */
.ticker {
  background: linear-gradient(90deg, rgba(var(--money-rgb),0.16), rgba(var(--money-rgb),0.05));
  border-bottom: 1px solid rgba(var(--money-rgb),0.22);
  font-size: 0.85rem;
}
.ticker-inner {
  max-width: var(--maxw); margin-inline: auto; padding: 9px var(--gutter);
  display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.ticker-text { color: var(--muted); }
.ticker-text strong { color: var(--money); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.countdown { font-family: var(--font-body); font-weight: 700; color: var(--text); letter-spacing: 0.03em; background: rgba(0,0,0,0.32); border: 1px solid rgba(var(--money-rgb),0.32); padding: 2px 9px; border-radius: 6px; }

/* ---------- 5. Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--accent), var(--accent-2) 70%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* header trust line (replaces the search bar) with a pulsing glowing dot */
.header-trust { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 0.88rem; color: var(--muted); }
.header-trust strong { color: var(--text); }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--money); flex-shrink: 0; animation: dotpulse 1.7s ease-in-out infinite; }
@keyframes dotpulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--money-rgb),0.7), 0 0 8px rgba(var(--money-rgb),0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(var(--money-rgb),0), 0 0 16px rgba(var(--money-rgb),0.95); }
  100% { box-shadow: 0 0 0 0 rgba(var(--money-rgb),0), 0 0 8px rgba(var(--money-rgb),0.55); }
}
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* Launch price in the header — quiet violet, same register as the plugin's labels */
.sale-text { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); }
.sale-sub { color: var(--muted); font-size: 0.85rem; }
.header-sale .countdown { border-color: rgba(var(--accent-rgb),0.35); }
.header-sale .pulse-dot { background: var(--accent); animation: dotpulse-warm 1.7s ease-in-out infinite; }
@keyframes dotpulse-warm {
  0%   { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(var(--accent-rgb),0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0); }
}
@media (prefers-reduced-motion: reduce) { .header-sale .pulse-dot { animation: none; } }

.header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ig { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; transition: filter .2s; }
.ig svg { width: 18px; height: 18px; fill: none; stroke: #e1306c; stroke-width: 1.8; }
.ig span { font-weight: 600;
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ig:hover { filter: brightness(1.12); }
.cart-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); transition: border-color .2s, background .2s; }
.cart-btn:hover { border-color: var(--money); background: var(--surface-2); }
.cart-btn svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cart-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--money); color: #fff; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }

/* ---------- 6. Hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(48px, 8vw, 104px) var(--gutter) clamp(28px, 4vw, 56px);
  text-align: left;
}
.hero-copy { max-width: 560px; }
/* the plugin panel, docked to the right edge like inside Premiere */
.hero-panel { position: relative; }
.hero-panel img, .hero-panel video {
  display: block; width: 114%; max-width: none; height: auto;
  background: #0b0b0f;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; text-align: left; }
  .hero-panel img, .hero-panel video { width: 100%; border-right: 1px solid var(--line-2); border-radius: 12px; }
}
#bestsellers { padding-top: clamp(10px, 1.6vw, 18px); }
#bestsellers .section-head { margin-bottom: 16px; }
/* eyebrow = plugin-style category label (like "1 BRIGHT" / "SAAS" in FlowCut's UI) */
.eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 16px; }
/* main hero heading keeps the previous (Helvetica) face; Clash Display stays everywhere else */
.hero .display { margin-bottom: 18px; font-family: var(--font-head); font-weight: 600; font-size: clamp(2.7rem, 5.6vw, 4.6rem); line-height: 1.04; }
.hero .lead { margin: 0 0 8px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-cta .btn-cta { padding: 14px 30px; font-size: 1rem; text-decoration: none; display: inline-flex; align-items: center; }
.btn-ghost-lg { font-family: var(--font-head); font-weight: 600; font-size: 1rem; padding: 14px 28px; border-radius: 12px; border: 1px solid var(--line-2); color: var(--text); transition: border-color .2s, color .2s, box-shadow .2s; }
.btn-ghost-lg:hover { border-color: var(--money); color: var(--money); box-shadow: 0 0 26px rgba(var(--money-rgb),0.22); }

/* "Made for Premiere Pro" trust badge (compatibility = removes friction) */
.made-for { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; margin-top: 20px; padding: 7px 14px 7px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,0.03); font-size: 0.84rem; font-weight: 500; color: var(--muted); }
.made-for .pr-logo { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; }
.hero .made-for { margin-top: 24px; }
.buybox .made-for { margin-top: 0; }
/* second subtitle line — emphasised with a green gradient + soft glow */
.lead-accent { display: block; margin-top: 8px; font-weight: 600; color: var(--text); }
.trust { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; align-items: center; font-size: 0.92rem; color: var(--muted); }
.trust strong { color: var(--text); }
.stars { color: var(--gold); letter-spacing: 2px; }
.dot { color: var(--faint); }

/* ---------- 7. Sections ---------- */
.section { padding-block: clamp(40px, 6vw, 72px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 30px; }
/* numbered category label — same vernacular as FlowCut's own UI ("1 BRIGHT", "SAAS") */
.sec-num { flex-basis: 100%; font-family: var(--font-body); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); }
.section-tag { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.section-tag strong { color: var(--money); }

/* ---------- 8. Featured (bestsellers + free) ---------- */
.featured-grid { display: grid; grid-template-columns: 1.32fr 1fr 0.82fr; gap: 18px; align-items: stretch; }
/* bundle = the hero of the row: bigger, brighter, money-glow border */
.feat-lg { border-color: rgba(var(--money-rgb),0.4); box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 46px rgba(var(--money-rgb),0.10); }
.feat-lg .feat-media { aspect-ratio: 16/9.2; }
.feat-lg .feat-art .art-tag { font-size: clamp(2.1rem, 4.6vw, 3rem); }
.feat-lg h3 { font-size: 1.5rem; }
.feat-lg .feat-body { gap: 11px; }
@media (max-width: 980px) { .featured-grid { grid-template-columns: 1.15fr 1fr; } .free-card { grid-column: 1 / -1; } }
@media (max-width: 640px) { .featured-grid { grid-template-columns: 1fr; } }

.feat-card { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.feat-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.feat-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb),0.45); box-shadow: 0 22px 55px rgba(0,0,0,0.5); }
.feat-card:hover::after { opacity: 1; }
.feat-media { position: relative; aspect-ratio: 16/10; }
.feat-art { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.art-flowcut { background: radial-gradient(120% 120% at 30% 12%, rgba(var(--money-rgb),0.22), transparent 58%), radial-gradient(100% 100% at 85% 90%, rgba(var(--accent-rgb),0.16), transparent 60%), linear-gradient(135deg, #15161a, #0d0e11); }
.art-bundle { background: radial-gradient(120% 120% at 70% 12%, rgba(var(--money-rgb),0.30), transparent 58%), radial-gradient(100% 100% at 12% 90%, rgba(var(--accent-rgb),0.16), transparent 60%), linear-gradient(135deg, #141816, #0d0e11); }
.art-tag { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0.02em;
  background: linear-gradient(120deg, #ffffff, #9af3c2 65%, var(--money));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(var(--money-rgb),0.45)); }
.art-sub { font-family: var(--font-mono); font-size: 0.78rem; color: var(--faint); }
.badge { position: absolute; top: 38px; left: 14px; z-index: 2; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; padding: 4px 9px; border-radius: 7px; letter-spacing: 0.02em; } /* below the window-chrome bar */
.badge-hot { background: rgba(255,255,255,0.07); color: var(--text); border: 1px solid var(--line-2); }
.badge-best { background: var(--money); color: #06281a; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; }
@keyframes badgePulse { 0%,100% { box-shadow: 0 0 18px rgba(var(--money-rgb),0.5); } 50% { box-shadow: 0 0 30px rgba(var(--money-rgb),0.85); } }
@media (prefers-reduced-motion: reduce) { .badge-best { animation: none; } }
.badge-free { position: static; display: inline-block; background: rgba(var(--money-rgb),0.14); color: var(--money); border: 1px solid rgba(var(--money-rgb),0.35); margin-bottom: 4px; }

.feat-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.feat-meta { display: flex; justify-content: space-between; align-items: center; }
.kind { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
.ministars { color: var(--gold); font-size: 0.82rem; font-family: var(--font-mono); }
.feat-body p { font-size: 0.92rem; flex: 1; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 6px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price { flex-wrap: wrap; }
.price .now { font-family: var(--font-head); font-weight: 700; font-size: 1.7rem; }
.price .was { font-size: 1.35rem; font-weight: 600; color: #ff7a6b; text-decoration: line-through; text-decoration-thickness: 2px; }
.save-badge { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #042b18; background: var(--money); padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 18px rgba(var(--money-rgb),0.6); }

/* Free hook card */
.free-card { position: relative; overflow: hidden; background: linear-gradient(160deg, rgba(var(--money-rgb),0.07), var(--surface) 55%); border: 1px solid rgba(var(--money-rgb),0.28); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.free-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); background: radial-gradient(420px 240px at 50% 0%, rgba(var(--money-rgb),0.22), transparent 70%); }
.free-card:hover { transform: translateY(-5px); border-color: rgba(var(--money-rgb),0.45); box-shadow: 0 20px 48px rgba(0,0,0,0.45), 0 0 32px rgba(var(--money-rgb),0.22); }
.free-card:hover::after { opacity: 1; }
.free-glow { display: none; }
.free-card h3 { font-size: 1.35rem; }
.free-card p { font-size: 0.92rem; }
.free-list { display: flex; flex-direction: column; gap: 5px; margin: 2px 0 4px; }
.free-list li { font-size: 0.86rem; color: var(--muted); padding-left: 20px; position: relative; }
.free-list li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }

/* ---------- 9. Buttons ---------- */
.btn { font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; padding: 10px 16px; border-radius: 10px; transition: transform .15s, filter .2s, background .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(100deg, var(--money-2), var(--money) 60%, #57df96); color: #042b18; box-shadow: 0 6px 24px rgba(var(--money-rgb),0.45), 0 0 0 1px rgba(var(--money-rgb),0.35); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 34px rgba(var(--money-rgb),0.65); }
.btn-free { background: linear-gradient(100deg, var(--money-2), var(--money) 60%, #57df96); color: #042b18; margin-top: auto; align-self: flex-start; box-shadow: 0 6px 24px rgba(var(--money-rgb),0.45); }
.btn-free:hover { filter: brightness(1.08); box-shadow: 0 8px 34px rgba(var(--money-rgb),0.65); }
.btn-block { width: 100%; padding: 13px; }
.btn.added { background: #1f7a55; color: #fff; }

/* ---------- 10. Filters ---------- */
.filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }
.chip { font-family: var(--font-mono); font-size: 0.84rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); transition: all .2s; }
.chip:hover { border-color: var(--money); color: var(--text); }
.chip.active { background: rgba(var(--money-rgb),0.14); border-color: rgba(var(--money-rgb),0.5); color: var(--money); }

/* ---------- 11. Product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
/* five single packs: give them their own row rather than leaving one stranded */
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(5, 1fr); } .grid .card-wide { grid-column: 1 / -1; } }
@media (min-width: 700px) and (max-width: 1179px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid .card-wide { grid-column: 1 / -1; } }
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform .22s var(--ease), border-color .22s, box-shadow .22s; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); background: radial-gradient(380px 200px at 50% 0%, rgba(var(--money-rgb),0.18), transparent 70%); }
.card:hover { transform: translateY(-5px); border-color: rgba(var(--money-rgb),0.45); box-shadow: 0 18px 42px rgba(0,0,0,0.45), 0 0 28px rgba(var(--money-rgb),0.20); }
.card:hover::after { opacity: 1; }
.card-media { aspect-ratio: 16/10; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, #16121f, #0c0c14); }
.card-media .ptag { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.85); opacity: 0.85; }
.card-media .ptype { position: absolute; top: 36px; left: 12px; font-family: var(--font-body); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 6px; }
.card-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-body h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; }
.card-body .pdesc { font-size: 0.84rem; color: var(--muted); flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.card-foot { flex-wrap: wrap; }
.card-foot .pprice { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; display: inline-flex; align-items: baseline; }
.btn-add { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--money); color: var(--money); transition: all .18s; }
.btn-add:hover { background: var(--money); color: #fff; }
.btn-add.added { background: #1f7a55; border-color: #1f7a55; color: #fff; }
.no-results { text-align: center; color: var(--muted); padding: 30px; }

/* Asset Bundle — full-width highlighted feature under the singles */
.card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 300px 1fr; align-items: stretch; border-color: rgba(var(--money-rgb),0.42); box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 52px rgba(var(--money-rgb),0.13); margin-top: 4px; }
.cw-media { position: relative; min-height: 168px; display: grid; place-items: center; }
.cw-media .ptype { position: absolute; top: 38px; left: 14px; font-family: var(--font-body); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: rgba(255,255,255,0.06); border: 1px solid var(--line-2); padding: 2px 7px; border-radius: 6px; }
.cw-media .ptag { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 2.7rem); background: linear-gradient(120deg, #fff, #9af3c2 65%, var(--money)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(var(--money-rgb),0.4)); }
.cw-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; flex-wrap: wrap; }
.cw-text { max-width: 48ch; }
.cw-badge { display: inline-block; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #042b18; background: linear-gradient(100deg, var(--money-2), var(--money) 70%, #57df96); padding: 4px 11px; border-radius: 999px; box-shadow: 0 0 18px rgba(var(--money-rgb),0.55); margin-bottom: 10px; }
.cw-text h4 { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; margin-bottom: 6px; }
.cw-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.cw-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cw-price .pprice { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; }
.cw-price s { font-size: 1.4rem; font-weight: 600; color: #ff7a6b; text-decoration: line-through; text-decoration-thickness: 2px; }
.cw-buy .btn-add { font-size: 0.95rem; padding: 12px 24px; }
@media (max-width: 700px) { .card-wide { grid-template-columns: 1fr; } .cw-body { justify-content: flex-start; } .cw-buy { align-items: stretch; width: 100%; } .cw-price { justify-content: flex-start; } }

/* ---------- 12. Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.review:hover { transform: translateY(-3px); border-color: rgba(var(--money-rgb),0.35); box-shadow: 0 14px 36px rgba(0,0,0,0.4), 0 0 30px rgba(var(--money-rgb),0.10); }
.review blockquote { color: var(--text); font-size: 0.98rem; line-height: 1.55; }
.review figcaption { font-size: 0.84rem; color: var(--muted); }
.review figcaption span { color: var(--money); }
.review-placeholder { border-style: dashed; opacity: 0.7; }
.review-placeholder blockquote { color: var(--muted); font-style: italic; }

/* ---------- 13. Coming soon ---------- */
.soon { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.soon-badge { display: inline-block; font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #042b18; background: linear-gradient(100deg, var(--money-2), var(--money) 70%, #57df96); padding: 5px 12px; border-radius: 999px; box-shadow: 0 0 20px rgba(var(--money-rgb),0.55); animation: badgePulse 2.4s ease-in-out infinite; }
.soon-title { margin: 12px 0 8px; }
.soon p { max-width: 46ch; }
.soon-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.soon-pill { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: color .2s, border-color .2s; }
.soon-pill:hover { color: var(--money); border-color: rgba(var(--money-rgb),0.5); }

/* ---------- 14. Footer ---------- */
.footer { border-top: 1px solid var(--line); margin-top: 30px; background: var(--bg-2); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-block: 34px; flex-wrap: wrap; }
.footer-note { font-size: 0.88rem; margin-top: 10px; max-width: 40ch; }
.ig-foot { font-size: 0.95rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 28px; font-size: 0.82rem; color: var(--faint); border-top: 1px solid var(--line); padding-top: 18px; }
.pay { display: inline-flex; align-items: center; gap: 7px; }
.pay-stripe { height: 16px; width: auto; opacity: 0.85; }

/* ---------- 15. Cart drawer ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 90; opacity: 0; transition: opacity .25s; }
.drawer-overlay.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: min(400px, 92vw); background: var(--bg-2); border-left: 1px solid var(--line-2); z-index: 100; transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-close { font-size: 1.1rem; color: var(--muted); width: 32px; height: 32px; border-radius: 8px; }
.drawer-close:hover { background: var(--surface); color: var(--text); }
.drawer-items { flex: 1; overflow-y: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.drawer-empty { color: var(--faint); text-align: center; padding: 40px 0; }
.di { display: flex; gap: 12px; align-items: center; }
.di-thumb { width: 46px; height: 46px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex-shrink: 0; opacity: 0.85; }
.di-info { flex: 1; min-width: 0; }
.di-title { font-size: 0.92rem; font-weight: 600; }
.di-price { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }
.di-remove { color: var(--faint); font-size: 0.8rem; }
.di-remove:hover { color: #ff6b6b; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.drawer-total { display: flex; justify-content: space-between; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; }
.drawer-fine { font-size: 0.76rem; color: var(--faint); text-align: center; }

/* ---------- 16. Card extras (discount + crossed price) ---------- */
.poff { position: absolute; top: 10px; right: 10px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 6px; box-shadow: 0 0 12px rgba(var(--accent-rgb),0.5); }
.card-foot .pprice s { color: #ff8a7a; font-size: 1.15rem; font-weight: 600; text-decoration-thickness: 2px; margin-left: 6px; }

/* ---------- 17. Buttons: ghost ---------- */
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: var(--money); background: var(--surface-2); }

/* ---------- 18. PRODUCT PAGE ---------- */
.product-page { padding-block: clamp(20px, 3vw, 36px) clamp(40px, 6vw, 72px); }
.pp-crumb { font-family: var(--font-mono); font-size: 0.8rem; color: var(--faint); margin-bottom: 22px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pp-crumb a { color: var(--muted); }
.pp-crumb a:hover { color: var(--money); text-decoration: underline; }
.pp-crumb strong { color: var(--text); }

.pp-grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(20px, 3.5vw, 40px); align-items: start; }
@media (max-width: 880px) { .pp-grid { grid-template-columns: 1fr; }
  .buybox { position: static; } }
/* on a genuinely short window the box would pin with its button off screen —
   better to let it scroll away with the page than to clip the buy button */
@media (max-height: 760px) { .buybox { position: static; } }

/* left: preview + included */
.pp-left { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 880px) { .pp-left { position: static; } }
.pp-media { position: relative; aspect-ratio: 16/11; border-radius: var(--radius); border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.pp-media .art-tag { font-size: clamp(2rem, 5vw, 3.4rem); }
.pp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pp-thumbs .th { aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(135deg, #16121f, #0c0c14); }
.pp-includes { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid rgba(var(--money-rgb),0.22); border-radius: var(--radius); padding: 18px 20px; box-shadow: 0 0 40px rgba(var(--money-rgb),0.07); }
.pp-includes::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--money), #7af0b0, transparent); box-shadow: 0 0 14px rgba(var(--money-rgb),0.6); }
.pp-includes h4 { font-family: var(--font-head); font-size: 1rem; margin-bottom: 12px; }
.pp-includes ul { display: grid; gap: 9px; }
.pp-includes li { font-size: 0.92rem; color: var(--text); padding-left: 26px; position: relative; }
.pp-includes li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--money); font-weight: 800; filter: drop-shadow(0 0 8px rgba(var(--money-rgb),0.7)); }
.pp-includes li.bx-bonus { font-weight: 700; background: linear-gradient(100deg, var(--cta2), #f0b25e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 9px rgba(201,138,60,0.45)); }
.pp-includes li.bx-bonus::before { content: "★"; color: var(--cta2); filter: drop-shadow(0 0 7px rgba(201,138,60,0.6)); }

/* right: the buy box (the conversion engine) */
/* The buy box rides along while the left column scrolls, so the price and the
   button are never off screen. It stops on its own at the end of .pp-grid —
   which is the bottom of "Everything FlowCut does" — and the FAQ below gets the
   page to itself. If the box is taller than the window it scrolls inside. */
.buybox { position: sticky; top: calc(var(--header-h) + 12px); align-self: start; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid rgba(var(--money-rgb),0.22); border-radius: 18px; padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 60px rgba(var(--money-rgb),0.10); }
.buybox > * { flex-shrink: 0; }
/* Tighter rhythm inside the box: at 125% Windows scaling a 1080p laptop gives
   about 780 CSS px of window, and the whole box — down to "Buy now" and the
   trust lines — has to fit inside that or sticky is pointless. */
.buybox { gap: 9px; padding: clamp(16px, 2vw, 19px); }
.buybox .bx-title { font-size: clamp(1.35rem, 2.4vw, 1.65rem); }
.buybox .made-for { margin-top: 2px; padding: 5px 12px 5px 7px; font-size: 0.8rem; }
.buybox .made-for .pr-logo { width: 19px; height: 19px; }
.buybox .bx-checklist { gap: 7px; margin: 0; }
.buybox .pricebox { margin-top: 0; padding: 12px 15px; }
.buybox .pb-now { font-size: clamp(2rem, 4vw, 2.5rem); }
.buybox .pb-was { font-size: 1.3rem; }
.buybox .pb-anchor { margin-top: 5px; font-size: 0.9rem; }
.buybox .btn-cta { padding: 13px; font-size: 1rem; }
.buybox .bx-actions { gap: 8px; margin-top: 0; }
/* three trust lines on one wrapped row instead of three stacked ones */
.buybox .bx-trust { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; padding-top: 10px; }
.buybox .bx-trust li { font-size: 0.78rem; }
.buybox::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--money), #7af0b0, var(--money), transparent); box-shadow: 0 0 18px rgba(var(--money-rgb),0.7); }
.bx-flag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--money); border: 1px solid rgba(var(--money-rgb),0.4); background: rgba(var(--money-rgb),0.10); padding: 5px 11px; border-radius: 999px; }
.bx-title { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; }
.bx-sub { font-size: 0.95rem; color: var(--muted); margin-top: -4px; }

.bx-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; color: var(--muted); }
.bx-excellent { font-weight: 700; color: var(--money); }
.bx-rating .stars { color: var(--gold); letter-spacing: 1px; }
.bx-rating strong { color: var(--text); }
.bx-rating a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.bx-rating a:hover { color: var(--money); }

.bx-checklist { display: grid; gap: 9px; margin: 2px 0; }
.bx-checklist li { font-size: 0.94rem; color: var(--text); padding-left: 26px; position: relative; }
.bx-checklist li::before { content: "✓"; position: absolute; left: 0; top: -1px; color: var(--money); font-weight: 800; }
/* bonus lines — stand out: bold, warm gradient, soft glow */
.bx-checklist li.bx-bonus { font-weight: 700; letter-spacing: -0.01em;
  background: linear-gradient(100deg, var(--cta2), #f0b25e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(201,138,60,0.45)); }
.bx-checklist li.bx-bonus::before { content: "★"; color: var(--cta2); -webkit-text-fill-color: var(--cta2); filter: drop-shadow(0 0 8px rgba(201,138,60,0.6)); }

/* price — calm, confident panel (green kept for the number itself) */
.pricebox { position: relative; margin-top: 4px; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 5px; overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(var(--money-rgb),0.35); }
.pb-row { display: flex; align-items: baseline; gap: 10px; }
.pb-now { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1; letter-spacing: -0.02em; color: #6fe2a4; }
.pb-was { font-size: 1.5rem; font-weight: 600; color: #ff7a6b; text-decoration: line-through; text-decoration-thickness: 2px; }
.pb-save { font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #042b18; background: var(--money); padding: 4px 9px; border-radius: 999px; box-shadow: 0 0 16px rgba(var(--money-rgb),0.5); }
.pb-note { font-size: 0.86rem; color: var(--muted); }
.pb-note strong { color: #cdeedd; font-weight: 600; }
.pricebox-free .pb-now { color: #6fe2a4; }

.bx-meta { display: flex; }
.bx-pill { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 12px; width: 100%; text-align: center; }

.bx-countdown { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--line); }
.bx-cd-label { font-size: 0.78rem; color: var(--muted); }
.bx-cd { font-family: var(--font-mono); font-weight: 600; color: var(--text); letter-spacing: 0.04em; }
.bx-cd b { background: rgba(var(--money-rgb),0.14); color: var(--money); border: 1px solid rgba(var(--money-rgb),0.3); padding: 2px 6px; border-radius: 6px; }

/* free gift stack */
.freebies { border: 1px solid var(--line-2); border-radius: 14px; padding: 14px; background: rgba(255,255,255,0.015); display: flex; flex-direction: column; gap: 10px; }
.fb-head { font-size: 0.84rem; color: var(--muted); }
.fb-head strong { color: var(--money); }
.freebie { display: flex; align-items: center; gap: 12px; }
.fb-thumb { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; color: var(--money); background: rgba(var(--money-rgb),0.12); border: 1px solid rgba(var(--money-rgb),0.3); flex-shrink: 0; }
.fb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fb-title { font-size: 0.9rem; font-weight: 600; }
.fb-note { font-size: 0.78rem; color: var(--faint); }
.fb-free { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--money); }

/* big CTAs */
.bx-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.btn-cta { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; padding: 15px; border-radius: 12px; transition: transform .15s, filter .2s, box-shadow .2s; letter-spacing: -0.01em; }
.btn-cta:active { transform: scale(0.985); }
.btn-buy { background: var(--money); color: #06281a; box-shadow: 0 4px 18px rgba(0,0,0,0.4); }
.btn-buy:hover { filter: brightness(1.1); }
.btn-buy.added { background: var(--money-2); color: #fff; }
.btn-checkout { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn-checkout:hover { border-color: var(--money); color: var(--money); box-shadow: 0 0 24px rgba(var(--money-rgb),0.25); }

.bx-trust { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); }
.bx-trust li { font-size: 0.82rem; color: var(--muted); }
.bx-trust .bx-social { color: var(--money); font-weight: 600; }

/* ---------- 19. CHECKOUT PAGE ---------- */
.checkout-page { padding-block: clamp(20px, 3vw, 36px) clamp(40px, 6vw, 72px); }
.co-grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: clamp(20px, 3.5vw, 40px); align-items: start; }
@media (max-width: 880px) { .co-grid { grid-template-columns: 1fr; } }

.co-summary h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.02em; margin-bottom: 18px; }
.co-items { display: flex; flex-direction: column; gap: 10px; }
.co-item { display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
/* Was a flat green square: a placeholder that read as a broken image, and green
   is the money colour here, so it competed with the price for attention. The
   real product shot does the one job this slot has, which is letting somebody
   confirm at a glance that the right thing is in the cart. */
.co-thumb { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; display: block; background: var(--surface-2); border: 1px solid var(--line); }
.co-thumb-blank { background: linear-gradient(135deg, var(--surface-2), var(--surface)); }

/* The line you are about to pay twice for, and the way out of it. */
.co-item.is-dupe { border-color: rgba(201, 138, 60, 0.45); background: rgba(201, 138, 60, 0.07); }
.co-item.is-dupe .co-price { color: var(--cta2); text-decoration: line-through; text-decoration-color: rgba(201, 138, 60, 0.6); }

.co-dupe { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; padding: 16px 18px; border: 1px solid rgba(201, 138, 60, 0.4); border-radius: var(--radius-sm); background: rgba(201, 138, 60, 0.08); }
.co-dupe-text { margin: 0; font-size: 0.95rem; color: var(--text); }
.co-dupe-text strong { color: var(--cta2); font-weight: 600; }
.co-dupe-fix { font-weight: 700; font-size: 0.92rem; color: var(--bg); background: var(--cta2); border-radius: 9px; padding: 9px 16px; }
.co-dupe-fix:hover { background: var(--cta2-2); }
.co-name { font-weight: 600; }
.co-price { font-family: var(--font-head); font-weight: 700; }
.co-remove { color: var(--faint); font-size: 0.9rem; width: 26px; height: 26px; border-radius: 7px; }
.co-remove:hover { color: #ff6b6b; background: rgba(255,255,255,0.05); }
.co-totals { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.co-line { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.95rem; }
.co-grand { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--text); }

/* Stripe-styled pay panel — violet accent on the pay action */
.co-pay { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid rgba(99,91,255,0.28); border-radius: 18px; padding: clamp(20px, 3vw, 26px); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 60px rgba(99,91,255,0.12); }
.co-pay::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--stripe), var(--stripe-2), var(--stripe), transparent); box-shadow: 0 0 18px rgba(99,91,255,0.7); }
.co-pay-head { display: flex; align-items: center; justify-content: space-between; }
.co-pay-head > span:first-child { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.co-stripe-logo { height: 26px; width: auto; display: block; }
.co-total-big { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; border-radius: 12px; background: linear-gradient(160deg, rgba(99,91,255,0.10), var(--surface)); border: 1px solid rgba(99,91,255,0.3); }
.co-total-big span { color: var(--muted); }
.co-total-big strong { font-family: var(--font-head); font-size: 1.7rem; color: var(--text); }
.co-pay .btn-cta { width: 100%; }
.btn-stripe { background: linear-gradient(100deg, var(--stripe), var(--stripe-2)); color: #fff; box-shadow: 0 8px 30px rgba(99,91,255,0.5), 0 0 0 1px rgba(99,91,255,0.4); display: flex; align-items: center; justify-content: center; gap: 7px; }
.btn-stripe:hover { filter: brightness(1.08); box-shadow: 0 10px 42px rgba(99,91,255,0.72); }
.btn-stripe-logo { height: 18px; width: auto; filter: brightness(0) invert(1); display: block; position: relative; top: 1px; }
.co-accepted { font-size: 0.8rem; color: var(--muted); text-align: center; line-height: 1.5; }
.co-wallets { font-size: 0.82rem; color: var(--muted); text-align: center; }
.co-methods { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.co-methods span { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 10px; }
.co-secured { font-size: 0.78rem; color: var(--faint); text-align: center; }
.co-secured strong { color: var(--stripe-2); }

.co-empty { text-align: center; padding: clamp(40px, 8vw, 90px) 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.co-empty h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.co-empty .btn-cta { padding: 13px 26px; }

/* ---------- 20. COOKIE CONSENT ---------- */
.cookie { position: fixed; left: 50%; bottom: 16px; transform: translate(-50%, 160%); z-index: 120; width: min(700px, calc(100% - 24px)); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 18px; box-shadow: 0 20px 60px rgba(0,0,0,0.55); transition: transform .35s var(--ease); flex-wrap: wrap; }
.cookie.show { transform: translate(-50%, 0); }
.cookie p { font-size: 0.86rem; color: var(--muted); flex: 1; min-width: 220px; line-height: 1.5; }
.cookie-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.cookie .btn-cta { padding: 10px 24px; font-size: 0.92rem; }
.cookie-decline { font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; color: var(--muted); padding: 9px 14px; border-radius: 9px; transition: color .2s, background .2s; }
.cookie-decline:hover { color: var(--text); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }

/* ---------- 21. Conversion additions ---------- */

/* hero + buy-box rating */
.hero-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.95rem; color: var(--muted); }
.hero-rating .stars, .bx-rating .stars { color: var(--gold); letter-spacing: 1px; }
.hero-rating strong, .bx-rating strong { color: var(--text); }

/* value stack — itemized proof of the bundle's worth */
.value-stack { border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; background: rgba(255,255,255,0.015); }
.vs-head { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 2px; }
.vs-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.92rem; color: var(--muted); }
.vs-row span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.vs-total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 3px; }
.vs-total span:first-child { color: var(--text); font-weight: 600; }
.vs-was { color: #ff7a6b !important; text-decoration: line-through; text-decoration-thickness: 2px; font-weight: 600; }
.vs-today span:first-child { color: var(--money); font-weight: 700; }
.vs-now { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--money) !important; }

/* full-width product-card CTA */
.btn-cart-full { width: 100%; margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; padding: 11px; border-radius: 10px; background: var(--money); color: #042b18; transition: filter .2s, box-shadow .2s; }
.btn-cart-full:hover { filter: brightness(1.08); box-shadow: 0 6px 22px rgba(var(--money-rgb),0.4); }
.btn-cart-full.added { background: var(--money-2); color: #fff; }

/* FAQ */
.faq { max-width: 760px; margin: clamp(36px,6vw,64px) auto 0; }
.faq h2 { font-size: clamp(1.5rem,3vw,2rem); margin-bottom: 18px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; background: var(--surface); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--money); font-size: 1.3rem; font-weight: 700; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding: 0 0 16px; font-size: 0.95rem; line-height: 1.6; }
.faq a { color: var(--money); text-decoration: underline; }

/* mobile sticky buy bar */
.mobile-buybar { display: none; }
@media (max-width: 880px) {
  .mobile-buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(12,12,18,0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line-2); }
  .mb-price { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
  .mb-price s { font-size: 1rem; color: #ff8a7a; font-weight: 600; }
  .mobile-buybar .btn-cta { padding: 12px 22px; font-size: 0.95rem; }
  .product-page { padding-bottom: 92px; }
}

/* email gate modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(3px); z-index: 130; opacity: 0; transition: opacity .25s; }
.modal-overlay.show { opacity: 1; }
.email-gate { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%); z-index: 140; width: min(440px, calc(100% - 32px)); background: linear-gradient(180deg, var(--surface), var(--bg-2)); border: 1px solid var(--line-2); border-radius: 18px; padding: 28px; opacity: 0; transition: opacity .25s, transform .25s var(--ease); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.email-gate.open { opacity: 1; transform: translate(-50%, -50%); }
.gate-close { position: absolute; top: 14px; right: 14px; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; font-size: 0.9rem; }
.gate-close:hover { background: var(--surface-2); color: var(--text); }
.email-gate h3 { font-size: 1.4rem; margin: 12px 0 8px; }
.email-gate > p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
#gateForm { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
#gateEmail { background: var(--bg); border: 1px solid var(--line-2); color: var(--text); padding: 13px 14px; border-radius: 10px; font-size: 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
#gateEmail:focus { border-color: var(--money); box-shadow: 0 0 0 3px rgba(var(--money-rgb),0.16); }
#gateForm .btn-cta { width: 100%; }
.gate-fine { font-size: 0.76rem; color: var(--faint); text-align: center; margin-top: 10px; }
.gate-success { color: var(--money); font-weight: 600; text-align: center; margin-top: 14px; }

/* footer legal links */
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; padding-bottom: 14px; }
.footer-legal a { font-size: 0.82rem; color: var(--muted); }
.footer-legal a:hover { color: var(--money); }

/* ---------- 22. Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(36px,7vw,80px) var(--gutter); }
.legal .back { display: inline-block; margin-bottom: 22px; color: var(--muted); font-size: 0.86rem; }
.legal .back:hover { color: var(--money); }
.legal h1 { font-size: clamp(2rem,5vw,3rem); margin-bottom: 6px; }
.legal .legal-meta { color: var(--faint); font-size: 0.85rem; margin-bottom: 26px; }
.legal .note { background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 16px; font-size: 0.84rem; color: var(--muted); margin-bottom: 26px; }
.legal h2 { font-size: 1.25rem; margin: 26px 0 10px; }
.legal p, .legal li { color: var(--muted); line-height: 1.7; }
/* the legal pages carry real prose now, and paragraphs ran into each other */
.legal p { margin-bottom: 12px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }
.legal ul { padding-left: 20px; list-style: disc; margin: 8px 0; }
.legal a { color: var(--money); text-decoration: underline; }

@media (max-width: 760px) {
  .header-trust { display: none; }
  .ig span { display: none; }
  .header-inner { gap: 10px; justify-content: space-between; }
}

/* ---------- 23. Spec sheet (product pages) — editorial, no cards ---------- */
.pp-features { margin-top: 28px; }
.pp-features > h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
.spec-sheet { margin-top: 14px; border-top: 1px solid var(--line-2); }
.spec-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 8px 22px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.spec-name { font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; color: var(--text); }
.spec-items { font-size: 0.93rem; color: var(--muted); line-height: 1.75; }
.spec-items .sep { font-style: normal; color: rgba(var(--accent-rgb),0.8); padding: 0 7px; }
@media (max-width: 620px) { .spec-row { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- 24. Conversion elements (trust row, guarantee, urgency) ---------- */
/* hero trust row — replaces the fake rating with real, checkable facts */
.hero-trust { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }
.hero-trust li { position: relative; padding-left: 24px; font-size: 0.92rem; font-weight: 500; color: var(--muted); }
.hero-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.hero-under { margin-top: 14px; color: var(--faint); font-style: italic; font-family: var(--font-accent); font-size: 1rem; }

/* (legacy guarantee band — replaced by .guarantee-line) */
.legacy-guarantee-band-marker { display: none; }
/* guarantee band — risk reversal, the honest closer */
.guarantee {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "seal text" "seal points";
  gap: 10px 30px; align-items: center;
  background: linear-gradient(160deg, rgba(var(--money-rgb),0.09), var(--surface) 55%);
  border: 1px solid rgba(var(--money-rgb),0.30);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 44px);
}
.guarantee::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(560px 300px at 12% 30%, rgba(var(--money-rgb),0.14), transparent 70%); }
.g-seal {
  grid-area: seal; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 108px; height: 108px; border-radius: 50%;
  border: 2px dashed rgba(var(--money-rgb),0.55);
  background: rgba(var(--money-rgb),0.08);
  box-shadow: 0 0 34px rgba(var(--money-rgb),0.25), inset 0 0 22px rgba(var(--money-rgb),0.12);
}
.g-days { font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--money);
  filter: drop-shadow(0 0 10px rgba(var(--money-rgb),0.6)); }
.g-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.g-text { grid-area: text; }
.g-text h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); letter-spacing: -0.01em; margin-bottom: 8px; }
.g-text p { max-width: 62ch; font-size: 0.95rem; }
.g-zero { color: var(--money); font-weight: 700; }
.g-points { grid-area: points; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.g-points span {
  font-size: 0.8rem; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 13px;
  background: rgba(255,255,255,0.03);
}
@media (max-width: 640px) {
  .guarantee { grid-template-columns: 1fr; grid-template-areas: "seal" "text" "points"; justify-items: start; }
}

/* buy-box urgency pill — real launch-price scarcity, live countdown */
.bx-urgency {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.86rem; font-weight: 600; color: var(--muted);
  border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 999px;
  padding: 6px 14px; margin: 2px 0 6px;
  background: rgba(var(--accent-rgb),0.07);
}
.bx-urgency .countdown-inline { color: var(--text); font-variant-numeric: tabular-nums; }

/* price-box anchor line — "price of one dinner" reframe */
.pb-anchor { display: block; margin-top: 7px; font-family: var(--font-accent); font-style: italic; font-size: 0.95rem; color: var(--faint); }

/* checkout guarantee — last-second anxiety killer next to the pay button */
.co-guarantee { margin-top: 12px; font-size: 0.85rem; color: var(--muted); line-height: 1.55;
  border-top: 1px solid var(--line); padding-top: 12px; }
.co-guarantee strong { color: var(--money); }

/* ---------- 25. De-generic pass: film grain + faux plugin-panel art ---------- */
/* subtle film grain over everything — kills the flat "AI gradient" look.
   pointer-events none, so it never blocks clicks. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* art tiles = screenshot SLOTS styled as an editor panel window.
   When Daniel's real screenshots arrive, drop an <img class="art-shot"> inside
   .feat-art / .pp-media and these skeletons disappear behind it. */
.feat-art::before, .pp-media::before, .card-media::before, .cw-media::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background:
    radial-gradient(circle 4px at 16px 14px, rgba(255,95,87,0.85) 3.5px, transparent 4.5px),
    radial-gradient(circle 4px at 34px 14px, rgba(254,188,46,0.85) 3.5px, transparent 4.5px),
    radial-gradient(circle 4px at 52px 14px, rgba(40,200,64,0.85) 3.5px, transparent 4.5px),
    linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-bottom: 1px solid var(--line);
}
/* two skeleton timeline tracks at the bottom — reads as "plugin UI", not "AI card" */
.feat-art::after, .pp-media::after, .card-media::after, .cw-media::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 14px; height: 26px;
  pointer-events: none; opacity: 0.75;
  background:
    linear-gradient(90deg,
      rgba(var(--money-rgb),0.38) 0 34%, transparent 34% 37%,
      rgba(255,255,255,0.10) 37% 63%, transparent 63% 66%,
      rgba(var(--accent-rgb),0.30) 66% 88%, transparent 88%) top / 100% 10px no-repeat,
    linear-gradient(90deg,
      transparent 0 8%, rgba(255,255,255,0.08) 8% 46%, transparent 46% 49%,
      rgba(var(--money-rgb),0.24) 49% 78%, transparent 78%) bottom / 100% 10px no-repeat;
  border-radius: 3px;
}
/* ---------- 27a. Capability ticker — full-bleed credits-style divider band ---------- */
.cap-ticker {
  display: block; overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px 0; margin: clamp(26px, 4vw, 48px) 0;
  background: rgba(255,255,255,0.015);
}
.ct-track { display: inline-flex; animation: ticker 36s linear infinite; will-change: transform; }
.cap-ticker:hover .ct-track { animation-play-state: paused; }
.ct-seq {
  font-family: var(--font-head); font-weight: 600; font-size: 0.98rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
  padding-right: 0.6em;
}
.ct-seq b { color: var(--text); font-weight: 600; }
.ct-seq i { font-style: normal; color: var(--accent); padding: 0 0.9em; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ct-track { animation: none; }
  .cap-ticker { overflow-x: auto; }
}

/* ---------- 27. End-of-list reframe + exploded bundle stack ---------- */
/* "Can't decide?" — keeps an empty-basket browser in buying mode (help, not rejection) */
.cant-decide {
  margin-top: 34px; padding: clamp(22px, 4vw, 36px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.cant-decide h3 { font-family: var(--font-head); font-size: 1.35rem; margin-bottom: 4px; }
.cant-decide p { font-size: 0.95rem; max-width: 44ch; }
.cd-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cd-actions .btn-cta { padding: 13px 24px; font-size: 0.98rem; }
.cd-alt { font-size: 0.9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cd-alt:hover { color: var(--accent); }


/* real screenshot drop-in: fills the tile below the chrome bar, above the skeletons */
.art-shot { position: absolute; inset: 28px 0 0; width: 100%; height: calc(100% - 28px); object-fit: cover; object-position: center top; z-index: 1; }
/* when a real shot is in, hide the placeholder tag text + skeleton tracks */
.art-shot ~ .art-tag, .art-shot ~ .art-sub, .art-shot ~ .ptag { display: none; }
/* a tile clip sits in the same frame as a still — dark under it so there is no
   flash of empty box before the poster paints */
video.art-shot { background: #0b0b0f; }
/* The product-page frame is 16/11, so a 16/9 clip either got its wordmark
   sliced off (cover) or sat above a slab of empty black (contain). With a clip
   the frame just takes its height from the clip instead: title bar + 16/9. */
.pp-media.has-clip { aspect-ratio: auto; padding-top: 28px; }
.pp-media.has-clip video.art-shot { position: static; width: 100%; height: auto;
  aspect-ratio: 16/9; object-fit: cover; }

/* ---------- 26. "Inside the plugin" showcase (real screenshots) ---------- */
.showcase { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 56px); margin-top: 30px; }
.sc-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(22px, 4vw, 52px); align-items: center; }
.sc-row:nth-child(even) .sc-shot { order: 2; }
.sc-shot { position: relative; }
.sc-shot img,
.sc-shot video { display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 26px 70px rgba(0,0,0,0.55); }
/* the clips are silent UI captures: they play themselves in view, no chrome */
.sc-shot video { background: #0b0b0f; aspect-ratio: 16 / 9; object-fit: cover; }
/* editor's margin note — Newsreader italic, slightly askew, like a scribble on a print */
.margin-note {
  position: absolute; right: 10px; bottom: -26px; transform: rotate(-2deg);
  font-family: var(--font-accent); font-style: italic; font-size: 1.02rem;
  color: rgba(var(--accent-rgb), 0.85); pointer-events: none; white-space: nowrap;
}
.sc-row:nth-child(even) .margin-note { right: auto; left: 10px; transform: rotate(1.6deg); }
.sc-kicker { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
  background: rgba(var(--accent-rgb),0.08); }
.sc-copy h3 { font-family: var(--font-head); font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.01em; margin-bottom: 10px; }
.sc-copy p { font-size: 0.98rem; max-width: 52ch; }
.sc-copy p strong { color: var(--text); }
.sc-list { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.sc-list li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--muted); }
.sc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
@media (max-width: 860px) {
  .sc-row { grid-template-columns: 1fr; }
  .sc-row:nth-child(even) .sc-shot { order: 0; }
}


/* ---------- 28. Maker's note — the human behind the product ---------- */
.maker { padding: clamp(30px, 5vw, 64px) var(--gutter) clamp(40px, 6vw, 80px); max-width: 880px; }
.mk-quote {
  font-family: var(--font-accent); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.35; color: var(--text);
}
.mk-quote em { color: var(--accent); font-style: italic; }
.mk-sig { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-size: 0.95rem; color: var(--muted); }
.mk-dash { width: 44px; height: 1px; background: var(--accent); flex-shrink: 0; }
.mk-sig strong { color: var(--text); }
.mk-sig a { color: var(--accent); margin-left: 6px; }
.mk-sig a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- 29. Steps, subscription math, honesty block ---------- */

/* subscription math — two columns, ours wins on facts alone */
.math-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mg-col { border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.mg-col h3 { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 14px; }
.mg-col ul { display: flex; flex-direction: column; gap: 9px; }
.mg-col li { position: relative; padding-left: 24px; font-size: 0.95rem; color: var(--muted); }
.mg-col li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }
.mg-col li em { font-style: normal; color: var(--text); font-weight: 600; }
.mg-us { border-color: rgba(var(--money-rgb),0.4); background: rgba(var(--money-rgb),0.04); }
.mg-us li::before { content: "✓"; color: var(--money); }
.mg-total { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); }
.mg-total strong { color: var(--text); }
.mg-us .mg-total strong { color: #6fe2a4; }
@media (max-width: 700px) { .math-grid { grid-template-columns: 1fr; } }

/* ---------- 30. Buy now everywhere — low-friction two-button pattern ---------- */
.btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--money); color: var(--money); }
.buy-btns { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.card-btns .btn { padding: 10px 8px; font-size: 0.88rem; }


/* ---------- 31. FlowCut brand lockup — icon + CSS wordmark (animatable) ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; }
.brand-word { display: inline-flex; align-items: baseline; font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; letter-spacing: -0.015em; color: var(--text); line-height: 1; }
.brand-word .reg { font-size: 0.5em; margin-left: 3px; color: var(--muted); }
/* the slash IS the cut — one violet stroke */
.bw-slash { display: inline-block; width: 2.5px; height: 1.06em; margin: 0 6px; border-radius: 2px; background: var(--accent); transform: rotate(18deg) translateY(0.08em); transform-origin: center; }

/* cut-reveal on load: the halves close onto the slash, slash snaps in */
@keyframes bwFlow  { from { transform: translateX(-9px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bwCut   { from { transform: translateX(9px);  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bwSlash { 0% { transform: rotate(18deg) translateY(0.08em) scaleY(0); } 60% { transform: rotate(18deg) translateY(0.08em) scaleY(0); } 100% { transform: rotate(18deg) translateY(0.08em) scaleY(1); } }
.header .bw-flow  { animation: bwFlow  .55s var(--ease) both; }
.header .bw-cut   { animation: bwCut   .55s var(--ease) both; }
.header .bw-slash { animation: bwSlash .8s  var(--ease) both; }
/* hover: the blade leans in */
.brand:hover .bw-slash { transform: rotate(28deg) translateY(0.08em); transition: transform .25s var(--ease); }
@media (prefers-reduced-motion: reduce) { .header .bw-flow, .header .bw-cut, .header .bw-slash { animation: none; } }

/* ---------- 32. The stack (competitor math) + compact guarantee ---------- */
.stack { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(18px, 3vw, 40px); align-items: start; }
.stack-list { border-top: 1px solid var(--line-2); }
.st-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.st-item { font-size: 0.96rem; color: var(--muted); }
.st-cost { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--text); white-space: nowrap; }
.st-cost em { font-style: normal; font-weight: 400; font-size: 0.84rem; color: var(--faint); }
.st-sum .st-item { color: var(--text); font-weight: 600; }
.st-sum .st-cost { font-size: 1.35rem; color: #ff8f7f; }
.st-fine { margin-top: 12px; font-size: 0.85rem; color: var(--faint); line-height: 1.6; }

.stack-us { border: 1px solid rgba(var(--money-rgb),0.4); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); background: rgba(var(--money-rgb),0.05); }
.su-label { font-family: var(--font-body); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--money); }
.su-price { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 16px; }
.su-price strong { font-family: var(--font-head); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1; color: #6fe2a4; }
.su-price span { color: var(--muted); font-size: 1rem; }
.su-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; }
.su-list li { position: relative; padding-left: 24px; font-size: 0.93rem; color: var(--muted); }
.su-list li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }
.stack-us .btn-cta { width: 100%; }
.su-note { margin-top: 12px; font-size: 0.84rem; color: var(--faint); }
.su-note strong { color: var(--text); }
@media (max-width: 800px) { .stack { grid-template-columns: 1fr; } }

/* closing block — free pack first, guarantee as quiet reassurance beside it */
.closer { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(26px, 4vw, 46px);
  background: linear-gradient(150deg, rgba(var(--money-rgb),0.06), var(--surface) 60%); }
.cl-main h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 10px; letter-spacing: -0.015em; }
.cl-main p { font-size: 0.98rem; max-width: 46ch; }
.cl-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.cl-actions .btn-cta { padding: 14px 26px; }
.cl-alt { font-size: 0.92rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cl-alt:hover { color: var(--accent); }
.cl-side { border-left: 1px solid var(--line-2); padding-left: clamp(20px, 3vw, 34px); }
.cl-guarantee { font-size: 0.92rem; line-height: 1.65; color: var(--muted); }
.cl-guarantee strong { color: var(--text); }
.cl-points { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.cl-points li { position: relative; padding-left: 22px; font-size: 0.88rem; color: var(--faint); }
.cl-points li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }
@media (max-width: 760px) {
  .closer { grid-template-columns: 1fr; }
  .cl-side { border-left: none; border-top: 1px solid var(--line-2); padding: 22px 0 0; }
}

.co-error { margin-top: 12px; font-size: 0.86rem; color: #ff8f7f; line-height: 1.5; }

/* success page download list */
.dl-list { list-style: none; padding: 0; margin: 14px 0 6px; display: flex; flex-direction: column; gap: 10px; }
.dl-list li a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid rgba(var(--money-rgb),0.35);
  border-radius: 10px; background: rgba(var(--money-rgb),0.06); color: var(--text); font-weight: 600; text-decoration: none; }
.dl-list li a::before { content: "↓"; color: var(--money); font-weight: 700; }
.dl-list li a:hover { border-color: var(--money); background: rgba(var(--money-rgb),0.12); }

/* licence key on the success page */
.key-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; }
.key-row code { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text); background: var(--surface); border: 1px solid rgba(var(--accent-rgb),0.4);
  border-radius: 10px; padding: 13px 18px; }
.key-copy { font-family: var(--font-head); font-weight: 600; font-size: 0.86rem; padding: 10px 18px;
  border-radius: 9px; border: 1px solid var(--line-2); color: var(--text); background: transparent; }
.key-copy:hover { border-color: var(--accent); color: var(--accent); }

/* demo banner — must never be mistaken for a real receipt */
.demo-banner { background: rgba(var(--accent-rgb),0.14); border-bottom: 1px solid rgba(var(--accent-rgb),0.4);
  color: var(--text); font-size: 0.9rem; line-height: 1.6; padding: 14px clamp(18px,5vw,48px); }
.demo-banner strong { color: var(--accent); }


/* ---------- 33. Local AI band + system requirements ---------- */
.local { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.lc-kicker { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),0.35); border-radius: 999px; padding: 4px 12px;
  background: rgba(var(--accent-rgb),0.08); margin-bottom: 14px; }
.lc-copy h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -0.015em; margin-bottom: 14px; }
.lc-copy p { font-size: 0.98rem; max-width: 54ch; }
.lc-copy p strong { color: var(--text); }
.lc-why { margin-top: 14px; padding-left: 16px; border-left: 2px solid rgba(var(--accent-rgb),0.45);
  font-size: 0.93rem; color: var(--faint); }
.lc-facts { display: flex; flex-direction: column; gap: 14px; }
.lc-facts li { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 15px 18px; }
.lc-facts strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.98rem; color: var(--text); margin-bottom: 4px; }
.lc-facts span { font-size: 0.87rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 820px) { .local { grid-template-columns: 1fr; } }

/* requirements — a plain table beats a designed one: people scan it for one fact */
#requirements { padding-block: clamp(24px, 4vw, 44px); }
.reqs { border-top: 1px solid var(--line-2); max-width: 720px; }
.rq { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rq-k { font-size: 0.93rem; color: var(--muted); }
.rq-v { font-size: 0.93rem; color: var(--text); font-weight: 500; text-align: right; }
.reqs-note { margin-top: 16px; font-size: 0.88rem; color: var(--faint); }

/* "why there is less here" — the anti-bloat argument, on every product page */
.essentials { margin-top: 18px; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 20px 22px; background: var(--surface); }
.essentials h4 { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; margin-bottom: 8px; }
.essentials p { font-size: 0.93rem; line-height: 1.65; color: var(--muted); }
.es-line { margin-top: 10px; color: var(--text); font-weight: 600; }

/* how much is in a pack — the honest version of "hundreds of files" */
.bx-count { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--money); margin-bottom: 6px; }
.bx-note { margin-top: 10px; padding-left: 14px; border-left: 2px solid rgba(var(--accent-rgb),0.45);
  font-size: 0.88rem; line-height: 1.6; color: var(--faint); }
.card-count { font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; color: var(--money); margin-bottom: 4px; }

.gate-error { margin-top: 10px; font-size: 0.85rem; color: #ff8f7f; }

/* ---------- 34. Shop page ---------- */
.header-link { font-size: 0.9rem; color: var(--muted); }
.header-link:hover { color: var(--text); }

.shop-head { padding: clamp(40px, 6vw, 76px) var(--gutter) clamp(20px, 3vw, 32px); }
.shop-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -0.025em; margin-bottom: 10px; }
.shop-head p { font-size: 1.02rem; }

/* Three columns. The middle one is the bundle and is the only card that is
   raised — the comparison does the persuading, the styling just points at it. */
.plans { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 16px; align-items: start; }
.plan { position: relative; border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px); background: var(--surface); }
.plan h2 { font-family: var(--font-head); font-size: 1.3rem; margin-bottom: 10px; }
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.plan-price strong { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1; color: var(--text); }
.plan-price s { color: #ff8f7f; font-size: 1.05rem; }
.plan-sub { font-size: 0.92rem; margin-bottom: 18px; }
.plan-btns { display: flex; flex-direction: column; gap: 8px; }
.plan-cta { width: 100%; padding: 13px; font-size: 0.98rem; }
.plan-list { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.plan-list li { position: relative; padding-left: 26px; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--money); font-weight: 700; }
.plan-list li.no { color: var(--faint); }
.plan-list li.no::before { content: "—"; color: var(--faint); }
.plan-list li.part::before { content: "~"; color: var(--muted); }

.plan-best { border-color: rgba(var(--money-rgb),0.45); background: linear-gradient(165deg, rgba(var(--money-rgb),0.07), var(--surface) 58%); }
.plan-best .plan-price strong { color: #6fe2a4; }
.plan-flag { position: absolute; top: -11px; left: clamp(22px, 3vw, 30px);
  background: var(--money); color: #06281a; font-family: var(--font-body); font-weight: 700;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 999px; }
.plan-math { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.plan-math strong { color: var(--text); }
/* the whole plan card opens the product page — say so, and look clickable */
.plan[data-open] { cursor: pointer; transition: border-color .2s, transform .2s; }
.plan[data-open]:hover { border-color: rgba(var(--money-rgb),0.45); transform: translateY(-2px); }
.plan-more { display: block; margin-top: 16px; font-family: var(--font-head); font-weight: 600;
  font-size: 0.88rem; color: var(--money); }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan-best { order: -1; }   /* on a phone the bundle goes first, not middle */
}

.shop-sub { margin-top: 8px; font-size: 0.94rem; color: var(--faint); }
.shop-sub a { color: var(--accent); margin-left: 4px; }
.shop-sub a:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------- 35. Walkthrough, labelled thumbnails, shop button ---------- */
.walkthrough { margin: 4px 0 28px; }
.wt-play { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; background: #000; }
/* the thumbnail is finished artwork now, so barely dim it */
.wt-play img { width: 100%; display: block; opacity: 0.92; transition: opacity .25s var(--ease); }
.wt-play:hover img { opacity: 1; }
/* Dead centre, where everyone looks for it. The artwork is busiest exactly
   there, so a soft pool of shadow sits under the badge and calms the icons
   down — same trick a video thumbnail anywhere else uses. */
.wt-play::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 40% 52% at 50% 50%, rgba(0,0,0,0.66), rgba(0,0,0,0) 72%);
  transition: opacity .25s var(--ease); }
.wt-play:hover::before { opacity: 0.7; }
.wt-btn { position: absolute; inset: 0; margin: auto; z-index: 2;
  width: clamp(78px, 9vw, 108px); height: clamp(78px, 9vw, 108px); border-radius: 50%;
  background: rgba(var(--accent-rgb),0.96);
  box-shadow: 0 14px 46px rgba(0,0,0,0.6);
  transition: transform .25s var(--ease); }
.wt-play:hover .wt-btn { transform: scale(1.06); }
.wt-btn::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent;
  transform: translateX(4px); }
.wt-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); display: block; }

/* thumbnails made to carry a label: keep the name on top of the art */
.is-labelled .ptag, .is-labelled .art-tag {
  display: grid; place-items: center; position: absolute; inset: 0; z-index: 2;
  padding: 0; text-align: center;
  font-family: var(--font-head); font-weight: 700; letter-spacing: 0.04em;
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.8); background: none; filter: none;
}
.is-labelled .art-sub { display: none; }

.header-shop { font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
  padding: 8px 18px; border-radius: 999px; background: var(--money); color: #06281a; }
.header-shop:hover { filter: brightness(1.08); }

/* ---------- 36. Depth pass: lit cards, glow on the one that matters ---------- */
/* Cards were flat rectangles. A light source at the top edge and a real shadow
   underneath is what makes a panel read as raised rather than drawn. */
.plan {
  background: linear-gradient(180deg, rgba(255,255,255,0.045) 0%, var(--surface) 42%);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
}
.plan::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
}

/* The bundle is the choice we want made, so it is the only one that glows. */
.plan-best {
  background: linear-gradient(180deg, rgba(var(--money-rgb),0.16) 0%, var(--surface) 46%);
  border-color: rgba(var(--money-rgb),0.55);
  box-shadow: 0 0 0 1px rgba(var(--money-rgb),0.25),
              0 0 60px rgba(var(--money-rgb),0.22),
              0 26px 60px rgba(0,0,0,0.55);
}
.plan-best::before { background: linear-gradient(90deg, transparent, rgba(var(--money-rgb),0.7), transparent); }
.plan-flag { box-shadow: 0 0 24px rgba(var(--money-rgb),0.55); }

/* Same treatment for the product cards, quieter, and only on hover. */
.card, .card-wide {
  background: linear-gradient(180deg, rgba(255,255,255,0.035) 0%, var(--surface) 40%);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.card:hover, .card-wide:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--money-rgb),0.4);
  box-shadow: 0 22px 50px rgba(0,0,0,0.5), 0 0 34px rgba(var(--money-rgb),0.14);
}
.card-wide { box-shadow: 0 0 0 1px rgba(var(--money-rgb),0.18), 0 18px 44px rgba(0,0,0,0.45); }

/* Buy now is the action; give it enough presence to be found without hunting. */
.btn-primary { box-shadow: 0 6px 22px rgba(var(--money-rgb),0.38); }
.btn-primary:hover { box-shadow: 0 8px 30px rgba(var(--money-rgb),0.55); }

/* ---------- 33. Mobile: air ----------
   Desktop is untouched. On a phone the page was one long squeeze: the gutter
   was thin, sections ran into each other, and the spec sheet turned into
   paragraphs of dot-separated text that nobody reads. This block only adds
   space and breaks the dense runs into scannable lines. */
@media (max-width: 700px) {
  :root { --gutter: 22px; }

  /* The header had no mobile rules at all: brand + launch-price countdown +
     Shop + @danielm.media + cart cannot fit 430 px, and flex items refuse to
     shrink past their text, so the whole page got pushed sideways. The
     countdown lives in every buy box anyway, and the IG handle is a link the
     icon already makes. */
  .header-trust { display: none; }
  .ig span { display: none; }
  .header-right { gap: 10px; }
  .header-inner { gap: 10px; justify-content: space-between; }

  /* room between sections, and a real gap under each heading */
  .section { padding-block: 54px; }
  .section-head { margin-bottom: 24px; }
  .section p, .hero p { line-height: 1.72; }

  /* HERO — the first screen decides whether anyone scrolls */
  .hero { padding: 34px var(--gutter) 46px; gap: 34px; }
  .hero .display { font-size: clamp(2.2rem, 8.6vw, 2.7rem); line-height: 1.1; margin-bottom: 18px; }
  .hero .lead { font-size: 1rem; margin-bottom: 4px; }
  .lead-accent { margin-top: 14px; font-size: 1.05rem; }
  /* two buttons of different widths read as a mistake — make them one column */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 26px; }
  .hero-cta .btn-cta, .hero-cta .btn-ghost-lg { width: 100%; justify-content: center; text-align: center; }
  .hero-trust { gap: 10px 20px; margin-top: 24px; }
  .hero-under { margin-top: 18px; }

  /* SPEC SHEET — one fact per line instead of a wall of middots */
  .spec-row { padding: 18px 0; gap: 10px; }
  .spec-name { font-size: 1.02rem; }
  .spec-items { display: grid; gap: 9px; line-height: 1.55; }
  .spec-items .sep { display: none; }
  .spec-items .si { position: relative; padding-left: 18px; }
  .spec-items .si::before { content: "·"; position: absolute; left: 5px; font-weight: 700;
    color: rgba(var(--accent-rgb),0.85); }

  /* SHOWCASE — clip and its copy need a gap, not a seam */
  .showcase { gap: 46px; margin-top: 26px; }
  .sc-row { gap: 20px; }
  .sc-copy h3 { margin-bottom: 12px; }
  .sc-list { margin-top: 18px; gap: 11px; }

  /* Both of these wrapped into ragged 2-then-1 shapes that read as broken
     layout. On a phone they are lists, so they get one item per line. */
  .hero-trust { flex-direction: column; gap: 9px; }
  /* the "how fast is it" note had a quote bar down its side, which made an
     ordinary sentence look like a pull quote */
  .lc-why { border-left: 0; padding-left: 0; }

  /* product page: the same air between stacked blocks */
  .pp-left { gap: 22px; }
  .pp-grid { gap: 26px; }

  /* ALL PRODUCTS — a full-screen card per pack meant five swipes to see five
     packs; two columns fixed that but left the fifth pack sitting alone in the
     last row. So: one column of horizontal rows, thumbnail left, everything
     else right. An odd number of packs cannot strand anything, and five rows
     take less height than the two-column grid did. The description goes — at
     this width the title plus the count ("130+ LUTs") is the whole story, and
     the row opens the full page anyway. */
  .grid { grid-template-columns: 1fr; gap: 12px; }
  /* Wider thumbnail, and the text column stacked tight so the row stays short:
     a tall narrow thumbnail is what was slicing the artwork in half. */
  /* :not(.card-wide) matters — the Asset Bundle is a full-width feature and
     these row rules were overriding its own stacked layout, squeezing its copy
     into a sliver next to a thumbnail. */
  .grid .card:not(.card-wide) { display: grid; grid-template-columns: 162px 1fr; align-items: center; }
  /* Keep the thumbnail at the artwork's own 16:10 and centre it in the row.
     Stretched to full row height it was a tall narrow box, and cover had to
     throw away a third of every image to fill it. */
  .grid .card:not(.card-wide) .card-media { aspect-ratio: 16/10; min-height: 0;
    margin: 10px 0 10px 10px; border-radius: 10px; overflow: hidden; }
  .grid .card:not(.card-wide) .art-shot { inset: 0; height: 100%; object-position: center; }
  .grid .card-wide { grid-template-columns: 1fr; }
  .card-body { padding: 11px 12px; gap: 2px; }
  .card-body h4 { font-size: 0.97rem; line-height: 1.22; }
  .card-body .pdesc { display: none; }
  .card-count { font-size: 0.8rem; margin-bottom: 0; }
  .card-foot { margin-top: 3px; }
  .card-foot .pprice { font-size: 1.1rem; }
  .card-btns { gap: 6px; margin-top: 8px; }
  .card-btns .btn { padding: 8px 4px; font-size: 0.78rem; }
  .card-media .ptag { font-size: 1rem; }
  /* the category chip collided with the window dots in a 116px thumbnail, and
     the title says the same thing anyway */
  .grid .card:not(.card-wide) .card-media .ptype { display: none; }

  /* the Asset Bundle keeps the full width, just less of it */
  .cw-media { min-height: 132px; }
  .cw-body { padding: 16px 16px 18px; gap: 14px; }
  .cw-text h4 { font-size: 1.25rem; }
  .cw-text .pdesc { font-size: 0.88rem; }
}

/* ---------- 34. Language switcher ---------- */
.lang-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); flex-shrink: 0; }
.lang-btn { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 9px; border-radius: 999px; color: var(--faint); transition: color .18s, background .18s; }
.lang-btn:hover { color: var(--text); }
.lang-btn.on { background: rgba(var(--accent-rgb),0.16); color: var(--accent); }
/* The legal pages have no header, so the switcher shares a row with the back link. */
.legal-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.legal-top .back { margin-bottom: 0; }