/* ==========================================================================
   Viralow (ex Dub Studio) — public pages (offers, sign-up, login)
   Dark: white type on a violet-tinted near-black, thin rules; soft violet
   and teal glows behind the page (the user found plain black too bare,
   30/09/2026). The accent marks the Pro offer.
   ========================================================================== */

:root {
  --bg: #0b0a14;
  --bg-2: #13121f;
  --bg-3: #1a1829;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --ink: #f4f4f6;
  --ink-2: #a3a3ac;
  --ink-3: #6d6d77;
  --accent: #8b7cff;
  --accent-soft: rgba(139, 124, 255, 0.12);
  --accent-line: rgba(139, 124, 255, 0.55);
  --accent-text: #bdb4ff;
  --r: 10px;
  --r-lg: 18px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1080px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* the colour: two soft glows fixed behind the page, violet above, teal aside */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 40% at 50% -6%, rgba(139, 124, 255, .38), transparent 70%),
    radial-gradient(38% 34% at 92% 18%, rgba(45, 212, 191, .13), transparent 70%),
    radial-gradient(42% 38% at 4% 72%, rgba(139, 124, 255, .17), transparent 70%);
}
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.12; font-weight: 650; }
p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 560px) { .wrap { padding: 0 16px; } }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r); border: 1px solid transparent; padding: 11px 18px;
  font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn-primary { background: var(--ink); color: #0a0a0c; }
.btn-primary:hover { background: #fff; }
.btn-line { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: var(--ink-3); background: var(--bg-3); }
.btn-lg { padding: 14px 22px; font-size: 16px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.link:hover { color: var(--ink); }

/* ---------------------------------------------------------------- nav -- */

.nav { border-bottom: 1px solid var(--line); background: rgba(11, 10, 20, .8); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
/* the logo: the V mark (logo.svg) and "viralow" in Outfit, white fading to lavender */
.logo { font-family: "Outfit", var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; text-decoration: none; display: flex; align-items: baseline; gap: 0; white-space: nowrap; }
.logo-mark { width: 1.12em; height: 1.12em; display: block; position: relative; top: .1em; margin-right: -.13em; }
.logo-mark svg { width: 100%; height: 100%; display: block; }
.logo-text { background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #b9a9ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav nav { display: flex; gap: 24px; font-size: 15px; }
.nav nav a { color: var(--ink-2); text-decoration: none; }
.nav nav a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; }
@media (max-width: 760px) { .nav nav { display: none; } .nav .wrap { gap: 12px; } .nav-cta { gap: 12px; } }
.logo, .nav-cta a { white-space: nowrap; }
@media (max-width: 440px) { .nav-cta .btn { display: none; } }

/* --------------------------------------------------------------- hero -- */

.hero { padding: 64px 0 88px; }
.hero-text { max-width: 760px; margin: 0 auto; text-align: center; }
.kicker {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 5px 12px; margin-bottom: 20px;
}
.hero h1 { font-size: clamp(34px, 5vw, 56px); }
.lead { font-size: 18px; color: var(--ink-2); margin: 20px auto 0; max-width: 34em; }
.hero-cta { display: flex; gap: 12px; margin-top: 30px; justify-content: center; flex-wrap: wrap; }

/* before / after: the video as sent, the result, and the subtitle styles
   to pick from — the result wears the one picked, live (tarifs.js) */
.show {
  max-width: 1040px; margin: 56px auto 0; padding: 44px 32px 36px;
  display: grid; grid-template-columns: auto auto auto auto; justify-content: center; align-items: start; gap: 36px 26px;
  border: 1px solid var(--line-2); border-radius: 28px;
  background: radial-gradient(120% 90% at 50% 0%, #211f33 0%, var(--bg-2) 60%);
}
@media (max-width: 800px) {
  .show { grid-template-columns: 1fr; padding: 28px 16px; gap: 22px; margin-top: 40px; border-radius: 22px; }
}
.show-side { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
/* what is what, at a glance: big AVANT / APRÈS, and an arrow from one to the other */
.show-label { font-size: 30px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: var(--ink-3); }
.show-side.after .show-label { color: var(--ink); }
.show-side.after .show-label::after { content: ""; display: block; height: 3px; margin: 7px auto 0; width: 60%; border-radius: 3px; background: var(--accent); }
.show-arrow { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--accent-text); margin-right: 24px; align-self: center; }
.show-arrow span { font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--ink); }
.show-arrow svg { width: 104px; height: auto; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@media (max-width: 800px) {
  .show-arrow { margin: 0; flex-direction: row; gap: 10px; }
  .show-arrow svg { width: 56px; transform: rotate(90deg); animation: none; }
}
.show-phone {
  position: relative; width: 236px; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line-2); background: #000; container-type: inline-size;
}
.show-phone video, .stack-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.show-pill {
  font-size: 13.5px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-2); border-radius: 100px; padding: 7px 15px; white-space: nowrap;
}
.show-pill b { color: var(--accent-text); font-weight: 650; }

/* the result, in front of two cards that peek out behind it */
.show-stack { position: relative; width: 262px; max-width: 100%; aspect-ratio: 9 / 16; display: grid; place-items: center; }
.show-phone.front {
  width: 100%; z-index: 2; border-color: var(--accent-line);
  box-shadow: 0 0 0 1px var(--accent-line), 0 30px 70px -24px rgba(0, 0, 0, .9);
}
.stack-card {
  position: absolute; inset: 7% 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line);
  filter: brightness(.38) saturate(.7); transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.stack-card.left { transform: translateX(-17%) scale(.84) rotate(-2.5deg); }
.stack-card.right { transform: translateX(17%) scale(.84) rotate(2.5deg); }
.show.swap .stack-card.left { transform: translateX(-21%) scale(.84) rotate(-4deg); }
.show.swap .stack-card.right { transform: translateX(21%) scale(.84) rotate(4deg); }
.show.swap .show-phone.front { animation: card-swap .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes card-swap {
  0% { transform: none; } 35% { transform: scale(.955) translateY(6px); } 100% { transform: none; }
}

/* the styles to pick from: each tile shows the style itself on a plain tile */
.show-styles { display: flex; flex-direction: column; gap: 12px; align-self: center; }
.show-styles-head { display: flex; flex-direction: column; gap: 2px; }
.show-styles-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; }
.show-styles-sub { font-size: 13.5px; color: var(--ink-3); }
.style-picker { display: grid; grid-template-columns: repeat(2, 128px); gap: 10px; }
@media (max-width: 1000px) and (min-width: 801px) { .style-picker { grid-template-columns: 128px; max-height: 480px; overflow-y: auto; } }
@media (max-width: 800px) { .show-styles { width: 100%; max-width: 360px; justify-self: center; } .style-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.style-chip {
  position: relative; height: 72px; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-2); background: #3a3a44;
  display: flex; flex-direction: column; justify-content: flex-end; text-align: center; color: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.style-chip:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.style-chip[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-line), 0 10px 26px -10px rgba(139, 124, 255, .7); }
.style-chip .sample { position: absolute; left: 5px; right: 5px; top: 13px; line-height: 1.1; paint-order: stroke fill; white-space: nowrap; }
.style-chip .chip-name {
  position: relative; z-index: 1; font-size: 11px; font-weight: 650; color: var(--ink); padding: 3px 0;
  background: rgba(10, 10, 12, .78);
}
.style-chip[aria-selected="true"] .chip-name { background: var(--accent); color: #fff; }
.style-chip .st-contour { font-size: 14.5px; } .style-chip .st-tiktok, .style-chip .st-dynamique { font-size: 11.5px; }
.style-chip .st-karaoke { font-size: 10px; } .style-chip .st-mot, .style-chip .st-geant { font-size: 19px; }
.style-chip .st-ecriture { font-size: 12.5px; } .style-chip .st-classique, .style-chip .st-minimal { font-size: 11.5px; white-space: normal; }
.style-chip .st-neon { font-size: 13px; }

.listen {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: transparent;
  border-radius: 100px; padding: 5px 11px 5px 9px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-2);
}
.listen:hover { background: var(--bg-3); color: var(--ink); }
.listen svg { width: 15px; height: 15px; }
.listen[aria-pressed="true"] { background: var(--ink); color: #0a0a0c; border-color: var(--ink); }

/* the live captions, drawn like the software burns them (subtitles.py). The
   numbers come from its styles, on a 1080 px wide video: an ASS font size is
   the font's full height (Segoe UI 1.33 em, Arial Black 1.41, Impact 1.22), its
   outline lies outside the letters (a stroke twice as wide, half hidden under
   the fill) and its shadow is the outlined text, offset (drop-shadow) */
.live-cap {
  position: absolute; left: 6%; right: 6%; bottom: 22%; z-index: 3; text-align: center; line-height: 1.15;
  color: #fff; pointer-events: none; paint-order: stroke fill;
}
.live-cap .c { display: inline-block; }
.live-cap.pop .c { animation: cap-pop .16s ease-out; }
@keyframes cap-pop { from { transform: scale(1.18); } to { transform: none; } }
.st-contour { font: italic 900 4.5cqw "Segoe UI Black", "Arial Black", var(--sans); text-transform: uppercase;
  -webkit-text-stroke: .216em #000; }
.st-contour .c, .style-chip .st-contour { transform: scaleX(.95); filter: drop-shadow(.117em .117em 0 #000); }
.st-tiktok { font: 900 5.25cqw "Arial Black", var(--sans); text-transform: uppercase; -webkit-text-stroke: .21em #000; }
.st-tiktok .c, .style-chip .st-tiktok { filter: drop-shadow(.035em .035em 0 rgba(0, 0, 0, .5)); }
.st-tiktok .on { color: #ffe600; }
.st-dynamique { font: 900 5.1cqw "Arial Black", var(--sans); text-transform: uppercase; -webkit-text-stroke: .217em #000; }
.st-dynamique .c, .style-chip .st-dynamique { filter: drop-shadow(.054em .054em 0 rgba(0, 0, 0, .5)); }
.st-dynamique { word-spacing: .33em; }
.st-dynamique .on { color: #39ff14; display: inline-block; transform: scale(1.12); }
.st-karaoke { font: 900 4.2cqw "Arial Black", var(--sans); text-transform: uppercase; -webkit-text-stroke: .22em #000; }
.st-karaoke .c, .style-chip .st-karaoke { filter: drop-shadow(.044em .044em 0 rgba(0, 0, 0, .5)); }
.st-karaoke .said { color: #3df5ff; }
.st-mot { font: 8.35cqw Impact, "Arial Black", var(--sans); text-transform: uppercase; -webkit-text-stroke: .155em #000; }
.st-mot .c, .style-chip .st-mot { filter: drop-shadow(.033em .033em 0 rgba(0, 0, 0, .5)); }
.st-geant { font: 9.4cqw Impact, "Arial Black", var(--sans); text-transform: uppercase; color: #ffe600;
  -webkit-text-stroke: .157em #000; }
.st-geant .c, .style-chip .st-geant { filter: drop-shadow(.089em .089em 0 #000); }
.st-ecriture { font: 900 4.3cqw "Segoe UI Black", "Arial Black", var(--sans); -webkit-text-stroke: .215em #000; }
.st-ecriture .c, .style-chip .st-ecriture { filter: drop-shadow(.043em .043em 0 rgba(0, 0, 0, .5)); }
.st-ecriture .later { visibility: hidden; }
.st-classique { font: 700 3.5cqw "Segoe UI", var(--sans); }
.st-classique .c { background: rgba(0, 0, 0, .5); padding: .28em .37em; border-radius: .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; line-height: 1.6; }
.st-minimal { font: 700 3.35cqw "Segoe UI", var(--sans); -webkit-text-stroke: .08em rgba(0, 0, 0, .62); }
.st-minimal .c, .style-chip .st-minimal { filter: drop-shadow(.05em .05em .02em rgba(0, 0, 0, .5)); }
.st-neon { font: 900 5cqw "Arial Black", var(--sans); text-transform: uppercase; -webkit-text-stroke: .05em #ff2edb;
  text-shadow: 0 0 .1em #ff2edb, 0 0 .22em #ff2edb, 0 0 .4em #ff2edb; }

/* things slide in as the page scrolls */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .show *, .live-cap .c { animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------- sections -- */

.section { padding: 88px 0; border-top: 1px solid var(--line); }
.section-head { max-width: 640px; margin: 0 auto 36px; text-align: center; }
.section-head h2 { font-size: clamp(30px, 3.8vw, 42px); }
.section-head p { color: var(--ink-2); margin-top: 12px; font-size: 17px; }

/* ------------------------------------------------------------ pricing -- */

.period-row { display: flex; justify-content: center; margin-bottom: 44px; }
.period { display: inline-flex; border: 1px solid var(--line-2); border-radius: 100px; padding: 4px; gap: 4px; background: var(--bg-2); }
.period button { border: 0; background: none; padding: 8px 18px; border-radius: 100px; cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.period button[aria-pressed="true"] { background: var(--ink); color: #0a0a0c; }
.period .save { font-size: 12px; font-weight: 650; color: var(--accent-text); background: var(--accent-soft); border-radius: 100px; padding: 2px 8px; }
.period button[aria-pressed="true"] .save { color: #4a3fb3; background: #e7e3ff; }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: 20px; justify-content: center; align-items: stretch; }
@media (max-width: 800px) { .plans { grid-template-columns: minmax(0, 480px); gap: 32px; } }
.plan { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 28px; background: var(--bg-2); display: flex; flex-direction: column; }
@media (max-width: 560px) { .plan { padding: 22px; } }
.plan.featured { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  background: var(--accent); color: #fff; border-radius: 100px; padding: 4px 12px;
}
.plan h3 { font-size: 22px; }
.plan-tagline { color: var(--ink-2); margin-top: 6px; font-size: 14.5px; }

.price-box {
  margin-top: 22px; border: 1px solid var(--line); background: var(--bg-3); border-radius: 14px;
  padding: 18px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.price-was { display: block; color: var(--ink-3); text-decoration: line-through; font-size: 15px; font-weight: 600; min-height: 1.4em; }
.price-now { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-unit { display: block; color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.credits-now { text-align: right; }
.credits-now b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.credits-now span { color: var(--ink-3); font-size: 13px; }

.plan-est { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.plan-est b { color: var(--ink); }
.plan-more { margin-top: 4px; font-size: 14.5px; font-weight: 650; color: var(--accent-text); min-height: 1.5em; }
.plan .btn { margin-top: 20px; }
.plan-note { text-align: center; color: var(--ink-3); font-size: 13px; margin-top: 8px; }

/* the same rows on every card: ✓ what's in it, ✗ (dimmed) what isn't */
.features { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.features li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
.features li::before {
  content: ""; width: 11px; height: 6px; margin: 6px 0 0 2px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}
.features li.off { color: var(--ink-3); }
.features li.off::before { content: "✕"; width: auto; height: auto; margin: 0 0 0 2px; border: 0; transform: none;
  font-size: 13px; line-height: 1.5; color: var(--ink-3); }

.fine { color: var(--ink-3); font-size: 13.5px; margin-top: 22px; text-align: center; }

/* ---------------------------------------------- credits + simulator -- */

.credits {
  max-width: 900px; margin: 56px auto 0; display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--bg-2); overflow: hidden;
}
@media (max-width: 800px) { .credits { grid-template-columns: 1fr; } }
.credits > div { padding: 28px; }
@media (max-width: 560px) { .credits > div { padding: 22px; } }
.credits > div + div { border-left: 1px solid var(--line); }
@media (max-width: 800px) { .credits > div + div { border-left: 0; border-top: 1px solid var(--line); } }
.credits h3 { font-size: 18px; margin-bottom: 18px; }
.rates { list-style: none; margin: 0; padding: 0; }
.rates li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rates li:first-child { padding-top: 0; }
.rates span { color: var(--ink-2); }
.rates b { text-align: right; font-variant-numeric: tabular-nums; }
.rates-note { color: var(--ink-3); font-size: 13.5px; margin-top: 14px; }

.seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.seg button { border: 0; border-right: 1px solid var(--line-2); background: transparent; padding: 9px 0; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #0a0a0c; }
.control-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 14.5px; font-weight: 600; cursor: pointer; margin-top: 16px; }
.switch { appearance: none; width: 42px; height: 24px; border-radius: 100px; background: var(--line-2); position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; margin: 0; }
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::before { transform: translateX(18px); }
.sim-cost { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 8px; }
.sim-cost b { font-size: 30px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sim-cost span { color: var(--ink-3); font-size: 14px; }
.sim-plans { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sim-plans li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; }
.sim-plans li span { color: var(--ink-2); }
.sim-plans li b { font-variant-numeric: tabular-nums; text-align: right; }
.sim-plans li.pro { border-color: var(--accent-line); }

/* ---------------------------------------------------------------- faq -- */

.faq { max-width: 740px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-2); margin-top: 10px; }

/* ------------------------------------------------------------- footer -- */

.footer { border-top: 1px solid var(--line); padding: 30px 0; color: var(--ink-3); font-size: 14px; }
.footer .wrap { display: flex; gap: 22px; flex-wrap: wrap; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer .spacer { flex: 1; }

/* ---------------------------------------------- legal pages (plain text) -- */

.legal { padding: 56px 0 80px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 8px; }
.legal h2 { font-size: 20px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--ink-2); font-size: 15.5px; }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 8px 0 0; padding-left: 22px; }
.legal li + li { margin-top: 6px; }
.legal b { color: var(--ink); }
.legal a { color: var(--ink); }
.legal mark { background: rgba(255, 200, 0, .18); color: #ffd666; padding: 1px 5px; border-radius: 4px; }
.legal-date { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.legal-links { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.legal-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.legal-table th { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .legal-table { font-size: 13px; } .legal-table th, .legal-table td { padding: 7px 6px; } }

.co-accept { display: flex; gap: 9px; align-items: flex-start; text-align: left; cursor: pointer; }
.co-accept input { margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }

/* --------------------------------------------------------------- log-in -- */

.auth { min-height: calc(100vh - 65px); display: grid; place-items: center; padding: 48px 24px; }
.auth-box { width: 100%; max-width: 420px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 760px) { .auth { padding: 32px 16px; } }
.auth-form { padding: 36px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 560px) { .auth-form { padding: 24px; } }
.auth-form h1 { font-size: 26px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 14px; font-weight: 600; }
.field input {
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; background: var(--bg-3); outline: none; width: 100%;
}
.field input::placeholder { color: var(--ink-3); }
.field input:focus { border-color: var(--ink-2); }
.form-error { color: #ff7b72; font-size: 14px; }
.form-error a { color: inherit; }

/* ------------------------------------------- checkout, over the offers -- */

body.modal-open { overflow: hidden; }
.checkout-backdrop {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: flex-start; padding: 48px 16px; overflow-y: auto;
}
.checkout {
  position: relative; width: 100%; max-width: 500px; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 560px) { .checkout-backdrop { padding: 0; } .checkout { border-radius: 0; min-height: 100%; padding: 22px 16px; } }
.co-close {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ink-3); font-size: 24px; line-height: 1; cursor: pointer;
}
.co-close:hover { background: var(--bg-3); color: var(--ink); }
.checkout h2 { font-size: 23px; padding-right: 36px; }
.co-credits { color: var(--accent-text); font-variant-numeric: tabular-nums; }
.co-sub { font-size: 14px; color: var(--ink-2); margin-top: -8px; display: flex; align-items: center; gap: 8px; }
.co-sub b { color: var(--ink); }
.tick { width: 10px; height: 6px; border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(-45deg) translateY(-2px); flex-shrink: 0; }
.co-trust {
  list-style: none; margin: 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2);
}
.co-trust li { display: flex; align-items: center; gap: 8px; }
.co-trust svg { width: 14px; height: 14px; color: var(--accent-text); }

.co-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.co-plan b { display: block; font-size: 16px; }
.co-plan small { display: block; color: var(--ink-3); font-size: 13.5px; }
.co-plan > div:first-child { min-width: 0; }
.co-plan .period button { padding: 6px 11px; font-size: 13px; }

.co-pay { border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg-3); padding: 14px; }
.co-card-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.co-card-head svg { width: 17px; height: 17px; color: var(--ink-2); }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.co-input { padding: 11px 14px; color: var(--ink-3); font-size: 15px; background: var(--bg-2); user-select: none; }
.co-input.wide { grid-column: 1 / -1; border-bottom: 1px solid var(--line-2); }
.co-input + .co-input:not(.wide) { border-left: 1px solid var(--line-2); }
.co-test { font-size: 13px; color: var(--ink-3); }

.co-sum { margin: 0; border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.co-sum div { display: flex; justify-content: space-between; gap: 12px; }
.co-sum dt { color: var(--ink-2); }
.co-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.co-sum .co-total { font-weight: 650; font-size: 16px; }
.co-sum .co-total dt { color: var(--ink); }
.co-legal, .co-login { text-align: center; font-size: 13px; color: var(--ink-3); }
.co-legal { margin-top: -4px; }
.co-legal a, .co-login a { color: var(--ink-2); }
.co-login { margin-top: -6px; }

.period.small button { padding: 6px 14px; font-size: 13.5px; }