/* ============================================================
   Niche2SM — www.niche2sm.com

   ONE stylesheet for the whole commercial site. It lives in
   `public/` rather than `src/styles/` on purpose: the four legal
   pages are hand-written static HTML served straight out of
   `public/`, so they are never processed by Vite and cannot
   import anything. Putting the stylesheet where both the Astro
   pages and those static files can link it is what keeps the
   landing and the legal pages looking like one site.

   Palette mirrors the app (apps/web/src/styles.css): cream
   background, navy text, teal accent, Fraunces for headings.
   ============================================================ */

/* ─────────────────────── self-hosted fonts ───────────────────────
   Never the Google Fonts CDN: it would hand every visitor's IP to a
   third country on page load, which is the GDPR problem apps/web
   already decided not to have. Files are vendored under
   /fonts/ (SIL OFL 1.1, licences alongside them), latin subset only.

   Fraunces ships here as a wght-only variable font whose DEFAULT IS
   900 — every heading renders black unless a weight is set. `h1,h2,h3`
   below set 400 explicitly. Do not remove that.
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────── tokens ─────────────────────────── */
:root {
  --bg: #f3ede4;
  --surface: #fffdf9;
  --surface-2: #faf5ee;

  --text: #10233f;
  --text-sec: #385170;
  --text-mut: #54708f;

  --accent: #19706d;
  --accent-soft: rgba(25, 112, 109, 0.1);
  --accent-ink: #0f4f4d;

  --navy: #10233f;

  --line: rgba(16, 35, 63, 0.1);
  --line-strong: rgba(16, 35, 63, 0.18);

  --shadow: 0 20px 48px rgba(16, 35, 63, 0.11);
  --shadow-lg: 0 40px 90px rgba(16, 35, 63, 0.16);

  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  --yt: #d92d20;
  --ig: #bc1888;
  --fb: #1877f2;

  --maxw: 1180px;

  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #101418;
  --surface: #181d23;
  --surface-2: #1e242c;

  --text: #e9eef3;
  --text-sec: #a7b4c2;
  --text-mut: #7d8b9b;

  --accent: #1f8a85;
  --accent-soft: rgba(31, 138, 133, 0.16);
  --accent-ink: #8fd9d4;

  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  --shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 40px 90px rgba(0, 0, 0, 0.6);

  --yt: #ff3b30;
  --ig: #e4405f;
  --fb: #4c8df6;

  color-scheme: dark;
}

/* ─────────────────────────── base ─────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  transition: background 0.35s ease, color 0.35s ease;
}

h1, h2, h3, .serif {
  font-family: 'Fraunces Variable', 'Iowan Old Style', Georgia, serif;
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
code { font-size: 0.92em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.sec { padding: 104px 0; }
.muted { color: var(--text-mut); }
.small { font-size: 14px; line-height: 1.55; }
.grid { display: grid; gap: 20px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  margin-top: 0.42em;
}

.lede { color: var(--text-sec); font-size: 1.12em; max-width: 62ch; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.2s ease, border-color 0.2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-p { background: var(--accent); color: #fff; box-shadow: 0 10px 26px var(--accent-soft); }
.btn-p:hover { box-shadow: 0 16px 34px rgba(25, 112, 109, 0.28); }
.btn-g { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-g:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 9px 16px; font-size: 14px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); }
.pill-neutral { background: var(--surface-2); color: var(--text-mut); border: 1px solid var(--line); }

/* Reveal on scroll. `.rv` starts hidden ONLY when JS is running: the head
   script swaps `no-js` for `js` before first paint, so a visitor without
   JavaScript sees every section at full opacity instead of a blank page. */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; z-index: 100; font-weight: 600; }
.skip:focus { left: 0; }

/* ─────────────────────────── header ─────────────────────────── */
header.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
header.nav.stuck { border-bottom-color: var(--line); }
.nav-in { display: flex; align-items: center; gap: 22px; height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 18px; }
.brand svg { width: 26px; height: 26px; flex: none; color: var(--accent); }
.nav-links { display: flex; gap: 26px; margin-left: 14px; font-size: 15px; color: var(--text-sec); font-weight: 500; }
.nav-links a:hover { color: var(--accent); }
.nav-act { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.seg { display: flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg a, .seg button {
  border: 0;
  background: transparent;
  color: var(--text-mut);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.2s;
  line-height: 1.4;
}
.seg a[aria-current='true'], .seg button[aria-pressed='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text-sec);
  transition: 0.2s;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }
[data-theme='light'] .i-sun { display: none; }
[data-theme='dark'] .i-moon { display: none; }

@media (max-width: 1000px) { .nav-links { display: none; } }
@media (max-width: 620px) { .nav-act .btn-g { display: none; } }
@media (max-width: 470px) {
  .nav-in { gap: 12px; }
  .nav-act { gap: 7px; }
  .brand { font-size: 16px; }
  .seg a, .seg button { padding: 5px 8px; font-size: 12px; }
  .icon-btn { width: 32px; height: 32px; }
  .nav-act .btn-p { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 400px) {
  .brand { font-size: 0; gap: 0; }
  .brand svg { width: 28px; height: 28px; }
}

/* ─────────────────────────── hero ─────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 76px 0 40px; }
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70vh;
  pointer-events: none;
  background: radial-gradient(60% 60% at 70% 10%, var(--accent-soft), transparent 70%);
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6.2vw, 78px); margin: 18px 0 20px; }
.hero h1 em { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.14em; border-radius: 99px; background: var(--accent); opacity: 0.22; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 18px; }
.hero-note { font-size: 13.5px; color: var(--text-mut); display: flex; align-items: center; gap: 8px; }
.hero-note svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.hero-art { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.phone { width: 298px; border-radius: 38px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #000; }
.float {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 15px;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 11px;
}
.float .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.float small { display: block; font-weight: 500; color: var(--text-mut); font-size: 11.5px; }
.f1 { top: 7%; left: -10%; }
.f2 { bottom: 9%; right: -9%; }

@media (max-width: 940px) {
  .hero-in { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { order: 2; }
  .f1 { left: 0; }
  .f2 { right: 0; }
}
@media (max-width: 560px) { .float { display: none; } .phone { width: 262px; } }

/* platform strip */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.strip-in { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.strip-lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mut); }
.plat { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--text-sec); }
.plat svg { width: 22px; height: 22px; }
.plat.soon { opacity: 0.5; }
.plat.soon .pill { font-size: 10.5px; padding: 2px 8px; }

/* ─────────────────────────── sections ─────────────────────────── */
.head { max-width: 760px; margin-bottom: 52px; }
.head h2 { font-size: clamp(32px, 4.2vw, 50px); margin: 16px 0 16px; }

.prob { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.prob > div { padding: 32px; border-right: 1px solid var(--line); }
.prob > div:last-child { border-right: 0; }
.prob b { font-family: 'Fraunces Variable', Georgia, serif; font-weight: 600; font-size: 20px; display: block; margin-bottom: 8px; }
.prob .n { font-family: 'Fraunces Variable', Georgia, serif; font-size: 36px; color: var(--accent); opacity: 0.35; line-height: 1; margin-bottom: 14px; }
@media (max-width: 860px) {
  .prob { grid-template-columns: 1fr; }
  .prob > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .prob > div:last-child { border-bottom: 0; }
}

.pipe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.pipe::before {
  content: '';
  position: absolute;
  top: 31px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}
.step { position: relative; }
.step .num { width: 62px; height: 62px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); display: grid; place-items: center; margin-bottom: 20px; position: relative; z-index: 1; color: var(--accent); box-shadow: var(--shadow); }
.step .num svg { width: 25px; height: 25px; }
.step b { display: block; font-family: 'Fraunces Variable', Georgia, serif; font-weight: 600; font-size: 19px; margin-bottom: 7px; }
.step p { font-size: 14.5px; color: var(--text-mut); line-height: 1.55; }
.step .k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); opacity: 0.7; margin-bottom: 6px; }
@media (max-width: 900px) { .pipe { grid-template-columns: 1fr 1fr; } .pipe::before { display: none; } }
@media (max-width: 560px) { .pipe { grid-template-columns: 1fr; } }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.b { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; transition: border-color 0.25s, transform 0.25s; }
.b:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.b .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; }
.b .ic svg { width: 20px; height: 20px; }
.b b { display: block; font-family: 'Fraunces Variable', Georgia, serif; font-weight: 600; font-size: 20px; margin-bottom: 8px; }
.b p { font-size: 14.5px; color: var(--text-mut); line-height: 1.58; }
.b-3 { grid-column: span 3; }
.b-2 { grid-column: span 2; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-sec); }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .b-3, .b-2 { grid-column: span 2; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .b-3, .b-2 { grid-column: span 1; } }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 96px; }
.row:last-child { margin-bottom: 0; }
.row > * { min-width: 0; }
.row.wide-art { grid-template-columns: 0.95fr 1.15fr; }
.row.rev .txt { order: 2; }
.row h3 { font-size: clamp(26px, 3.2vw, 38px); margin: 14px 0 16px; }
.row ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.row li { display: flex; gap: 11px; font-size: 15px; color: var(--text-sec); line-height: 1.5; }
.row li svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }
@media (max-width: 900px) {
  .row, .row.wide-art { grid-template-columns: 1fr; gap: 34px; margin-bottom: 64px; }
  .row.rev .txt { order: 0; }
}

.duo { display: flex; justify-content: center; gap: 18px; }
.duo img { width: 238px; max-width: 46%; border-radius: 32px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.duo img.lower { margin-top: 38px; }
@media (max-width: 430px) { .duo img.lower { display: none; } .duo img { max-width: 78%; } }

.trio { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }

/* desktop mock — a recreation of the real app shell, not a screenshot */
.mock-scroll { overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.mock-scroll::-webkit-scrollbar { height: 5px; }
.mock-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.mock { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lg); font-size: 12px; line-height: 1.4; min-width: 540px; }
.mock-main, .mock-grid, .mock-cols, .kpi, .panelc { min-width: 0; }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); display: block; }
.mock-url { margin-left: 10px; font-size: 10.5px; color: var(--text-mut); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; }
.mock-body { display: grid; grid-template-columns: 158px 1fr; min-height: 352px; }
.mock-side { border-right: 1px solid var(--line); padding: 13px 11px; background: var(--surface); }
.mock-side .lg { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 12.5px; margin-bottom: 16px; }
.mock-side .lg svg { width: 16px; height: 16px; }
.mock-side .grp { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-mut); margin: 14px 0 6px; font-weight: 700; }
.mock-side .it { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; color: var(--text-sec); margin-bottom: 1px; }
.mock-side .it.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mock-side .it svg { width: 13px; height: 13px; flex: none; }
.mock-side .it .badge { margin-left: auto; font-size: 9.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; color: var(--text-mut); }
.mock-main { background: var(--bg); }
.mock-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.mock-head b { font-size: 13.5px; font-family: 'Fraunces Variable', Georgia, serif; font-weight: 600; }
.mock-head .sub { font-size: 10px; color: var(--text-mut); }
.mock-head .sp { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.mock-head .search { width: 150px; height: 23px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.mock-head .new { background: var(--accent); color: #fff; border-radius: 7px; padding: 4px 11px; font-size: 10.5px; font-weight: 600; }
.mock-grid { padding: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px; }
.kpi .l { font-size: 9.5px; color: var(--text-mut); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; }
.kpi .v { font-family: 'Fraunces Variable', Georgia, serif; font-size: 22px; font-weight: 600; margin-top: 3px; }
.kpi .d { font-size: 10px; color: var(--accent); font-weight: 600; }
.kpi .d.bad { color: #b02a37; }
[data-theme='dark'] .kpi .d.bad { color: #ff7b72; }
.mock-cols { padding: 0 14px 14px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; }
.panelc { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.panelc b { font-size: 11.5px; display: block; margin-bottom: 2px; }
.panelc .sub { font-size: 9.5px; color: var(--text-mut); margin-bottom: 10px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 78px; }
.bars i { flex: 1; background: var(--accent-soft); border-radius: 4px 4px 0 0; display: block; border-bottom: 2px solid var(--accent); }
.bars i.hi { background: var(--accent); }
.lrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.lrow:last-child { border-bottom: 0; }
.lrow .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.lrow .n { margin-left: auto; font-weight: 700; }

/* mobile gallery */
.gal { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 26px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.gal figure { margin: 0; flex: none; width: 250px; scroll-snap-align: center; }
.gal img { border-radius: 32px; box-shadow: var(--shadow); border: 1px solid var(--line); background: #000; }
.gal figcaption { margin-top: 14px; font-size: 13.5px; color: var(--text-mut); text-align: center; font-weight: 500; }
.gal::-webkit-scrollbar { height: 6px; }
.gal::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }

/* pricing */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.plan.hot { border-color: var(--accent); box-shadow: 0 24px 60px var(--accent-soft); transform: translateY(-8px); }
.plan .tag { position: absolute; top: -13px; left: 32px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 13px; border-radius: 99px; }
.plan h3 { font-size: 23px; font-weight: 600; }
.plan .p { font-family: 'Fraunces Variable', Georgia, serif; font-size: 46px; font-weight: 600; line-height: 1; margin: 14px 0 2px; }
.plan .p span { font-family: 'Inter Variable', sans-serif; font-size: 15px; font-weight: 500; color: var(--text-mut); }
.plan .desc { font-size: 14px; color: var(--text-mut); min-height: 42px; margin-bottom: 12px; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 26px; display: grid; gap: 11px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-sec); line-height: 1.45; }
.plan li svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }
.plan .btn { justify-content: center; width: 100%; }
.price-foot { margin-top: 26px; font-size: 13.5px; color: var(--text-mut); text-align: center; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } .plan.hot { transform: none; } }

/* faq */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: 'Fraunces Variable', Georgia, serif; font-size: 19px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--text-mut);
  border-bottom: 2px solid var(--text-mut);
  transform: rotate(45deg);
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .a { padding: 0 40px 22px 0; color: var(--text-sec); font-size: 15.5px; }

/* final cta */
.final { background: var(--navy); color: #f8fbff; border-radius: var(--r-xl); padding: 74px 56px; text-align: center; position: relative; overflow: hidden; }
[data-theme='dark'] .final { background: linear-gradient(160deg, #16323d, #101418); border: 1px solid var(--line); }
.final::after { content: ''; position: absolute; inset: auto -20% -60% -20%; height: 60%; background: radial-gradient(50% 100% at 50% 0, rgba(31, 138, 133, 0.5), transparent 70%); }
.final h2 { font-size: clamp(32px, 4.4vw, 54px); margin-bottom: 18px; position: relative; }
.final p { color: rgba(248, 251, 255, 0.72); max-width: 52ch; margin: 0 auto 32px; position: relative; }
.final .btn-p { background: #fff; color: var(--navy); }
.final .btn-g { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.final .btn-g:hover { border-color: #fff; color: #fff; }
.final .row-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
@media (max-width: 600px) { .final { padding: 52px 26px; } }

/* ─────────────────────────── footer ─────────────────────────── */
footer.site { padding: 64px 0 40px; border-top: 1px solid var(--line); margin-top: 104px; }
.foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.foot h2 { font-family: 'Inter Variable', sans-serif; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-mut); margin: 0 0 14px; font-weight: 700; line-height: 1.4; }
.foot a { display: block; font-size: 14.5px; color: var(--text-sec); padding: 5px 0; }
.foot a:hover { color: var(--accent); }
.foot-b { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-mut); }
@media (max-width: 820px) { .foot { grid-template-columns: 1fr 1fr; } }

@media (max-width: 820px) { .sec { padding: 68px 0; } body { font-size: 16px; } }

/* ============================================================
   Legal pages

   The four documents under public/*.html keep their markup and
   their wording untouched — only the skin changes. Everything
   below styles that existing structure: .legal .wrap is the
   narrow measure, and the headings, lists, cards and the
   in-page ES/EN nav inherit the site tokens.
   ============================================================ */
.legal main .wrap { max-width: 50rem; padding-top: 56px; padding-bottom: 24px; }

.legal main header.doc { border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 12px; }
.legal main h1 { font-size: clamp(34px, 5vw, 46px); margin: 0 0 12px; line-height: 1.08; }
.legal main h2 {
  font-size: clamp(22px, 2.6vw, 27px);
  margin: 56px 0 14px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  line-height: 1.2;
}
.legal main h3 { font-size: 18px; font-weight: 600; margin: 30px 0 8px; line-height: 1.3; }
/* The document header already draws a rule; the first heading under it must
   not draw a second one right below. */
.legal main header.doc + section > h2:first-child,
.legal main header.doc + h2 { border-top: 0; padding-top: 0; margin-top: 40px; }
.legal main p { margin: 0 0 16px; color: var(--text-sec); }
.legal main .meta { color: var(--text-mut); font-size: 14px; margin: 0; }
.legal main a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.legal main a:hover { text-decoration-thickness: 2px; }
.legal main ol, .legal main ul { padding-left: 1.3rem; margin: 0 0 16px; color: var(--text-sec); }
.legal main li { margin: 0.4rem 0; }
.legal main strong { color: var(--text); font-weight: 600; }
.legal main table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.legal main th, .legal main td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-sec); }
.legal main th { color: var(--text); font-weight: 600; }
.legal main .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  margin: 22px 0;
}
.legal main .card p:last-child { margin-bottom: 0; }
.legal main section { scroll-margin-top: 88px; }

/* The in-page language / sibling-document nav each legal file already ships. */
.legal main .langnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.legal main .langnav a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text-sec);
  transition: 0.2s;
}
.legal main .langnav a:hover { border-color: var(--accent); color: var(--accent); }

/* Each document ends with its own <footer> of sibling links. The site
   footer sits below it, so this one is reduced to a quiet rule. */
.legal .wrap > footer {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--text-mut);
  font-size: 14px;
}
.legal .wrap > footer a { color: var(--text-sec); }
.legal .wrap > footer a:hover { color: var(--accent); }

/* 404. Scoped to <main> for the same reason the legal rules are: an
   unscoped `.err .wrap` would also narrow the site header's own .wrap. */
.err main .wrap { max-width: 44rem; padding-top: 72px; }
.err main h1 { font-size: clamp(36px, 5.5vw, 54px); margin: 0 0 16px; }
.err main .note { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin: 30px 0 0; color: var(--text-mut); font-size: 15px; }
.err main .note p { margin: 0 0 10px; }
.err main .note p:last-child { margin-bottom: 0; }
.err main a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }