/* CutterLog marketing site.
   Deliberately plain CSS with no build step — this deploys as its own Netlify site so the
   copy can change without redeploying the product. Palette and fonts are lifted from
   src/styles/index.css so the site and the app read as one thing. */

/* Self-hosted from site/fonts rather than fetched from Google. A <link> to
   fonts.googleapis.com hands every visitor's IP to Google on page load — before the cookie
   banner has asked them anything, and with no way for it to intervene. Its own copy because
   this deploys separately from the app; the two sets are identical files.

   Variable fonts: one file per family+subset covers every weight. latin and latin-ext only. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy:#1a2744; --navy-2:#243258; --navy-3:#0f1524;
  --blue:#4a9eff; --blue-soft:#6ba9ff;
  --bg:#f0f2f7; --surface:#ffffff; --border:#e4e8f0;
  --text:#1a2744; --text2:#6b7a99; --text3:#9ba8c0;
  --green:#22c55e; --orange:#f97316; --red:#ef4444; --teal:#14b8a6;
  --r:10px; --r-lg:14px;
  --shadow-sm:0 1px 3px rgba(26,39,68,.06),0 1px 2px rgba(26,39,68,.04);
  --shadow:0 4px 16px rgba(26,39,68,.08),0 1px 4px rgba(26,39,68,.04);
  --shadow-lg:0 24px 60px rgba(15,21,36,.28);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

* { box-sizing:border-box; margin:0; padding:0; }

html { scroll-behavior:smooth; }

body {
  font-family:var(--font);
  color:var(--text);
  background:var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a { color:inherit; text-decoration:none; }

.wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 24px; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-block; padding:13px 26px; border-radius:var(--r);
  font-size:15px; font-weight:700; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; transition:transform .12s, box-shadow .12s, background .12s;
  white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--blue); color:#fff; box-shadow:0 4px 14px rgba(74,158,255,.35); }
.btn-primary:hover { background:#3d8ef0; box-shadow:0 8px 22px rgba(74,158,255,.45); }
.btn-ghost-light { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22); }
.btn-ghost-light:hover { background:rgba(255,255,255,.15); }
.btn-outline { background:transparent; color:var(--navy); border-color:var(--border); }
.btn-outline:hover { border-color:var(--blue); color:var(--blue); }
.btn-sm { padding:9px 18px; font-size:14px; }
.btn-block { display:block; width:100%; text-align:center; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(26,39,68,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner { display:flex; align-items:center; gap:32px; height:64px; }
.logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; color:#fff; letter-spacing:-.02em; }
.logo img { width:26px; height:26px; }
.nav-links { display:flex; gap:26px; margin-left:auto; }
.nav-links a { color:rgba(255,255,255,.7); font-size:14.5px; font-weight:600; transition:color .12s; }
.nav-links a:hover { color:#fff; }
.nav-cta { display:flex; gap:10px; align-items:center; }

/* Language switcher. Shared between the nav here and the operator guide's print-language tabs
   (site/operator-guide.html), which is why this lives in the common stylesheet rather than
   either page's own <style> block — one component, two unrelated click handlers. */
.lang-tabs { display:flex; gap:6px; background:rgba(255,255,255,.1); padding:3px; border-radius:8px; }
.lang-tab {
  border:none; background:transparent; color:rgba(255,255,255,.65); font-family:var(--font);
  font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:6px; cursor:pointer;
}
.lang-tab.active { background:#fff; color:var(--navy); }
/* Marks a footer link as English-only while browsing in pt-BR/es — terms.html and privacy.html
   have no translation yet (pending legal review), and this is cheaper and more honest than
   silently sending a non-English reader to a page that doesn't say so. Toggled by i18n.js. */
.lang-note { font-size:11px; color:rgba(255,255,255,.4); }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-3) 100%);
  color:#fff; padding:78px 0 96px; overflow:hidden;
}
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.eyebrow {
  display:inline-block; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-soft);
  background:rgba(74,158,255,.12); border:1px solid rgba(74,158,255,.25);
  padding:5px 11px; border-radius:100px; margin-bottom:20px;
}
.hero h1 { font-size:clamp(34px,4.4vw,52px); line-height:1.1; letter-spacing:-.03em; font-weight:800; margin-bottom:20px; }
.hero h1 em { font-style:normal; color:var(--blue-soft); }
.hero p.lead { font-size:17.5px; color:rgba(255,255,255,.72); max-width:520px; margin-bottom:30px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.hero-note { font-size:13.5px; color:rgba(255,255,255,.5); }
.hero-note strong { color:rgba(255,255,255,.8); font-weight:600; }

/* Illustrative UI, built from divs rather than a screenshot so it never goes stale. */
.mock { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; color:var(--text); }
.mock-bar { display:flex; align-items:center; gap:6px; padding:11px 14px; background:#f7f8fc; border-bottom:1px solid var(--border); }
.mock-dot { width:9px; height:9px; border-radius:50%; background:#dfe4ee; }
.mock-title { margin-left:8px; font-size:12px; font-weight:700; color:var(--text2); }
.mock-body { padding:16px; }
.mock-row { display:grid; grid-template-columns:56px 1fr auto auto; gap:10px; align-items:center; padding:9px 4px; border-bottom:1px solid var(--border); font-size:12.5px; }
.mock-row:last-child { border-bottom:0; }
.mock-code { font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--navy); background:var(--bg); padding:3px 6px; border-radius:5px; text-align:center; }
.mock-desc { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mock-stock { font-family:var(--mono); font-size:12px; font-weight:700; }
.pill { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:100px; letter-spacing:.02em; }
.pill-ok { background:rgba(34,197,94,.13); color:#15803d; }
.pill-low { background:rgba(249,115,22,.14); color:#c2410c; }
.pill-out { background:rgba(239,68,68,.13); color:#b91c1c; }

/* ── generic section furniture ───────────────────────────────────────────── */
.section { padding:88px 0; }
/* The nav is sticky, so an anchored jump would otherwise land with the heading hidden
   underneath it. */
.section[id], header[id] { scroll-margin-top:72px; }
.section-alt { background:var(--bg); }
.section-navy { background:var(--navy); color:#fff; }
.section-head { max-width:660px; margin:0 auto 52px; text-align:center; }
.section-head h2 { font-size:clamp(27px,3.2vw,38px); line-height:1.18; letter-spacing:-.025em; font-weight:800; margin-bottom:14px; }
.section-head p { font-size:16.5px; color:var(--text2); }
.section-navy .section-head p { color:rgba(255,255,255,.66); }
.kicker {
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue); font-weight:700; margin-bottom:12px; display:block;
}

/* ── problem ─────────────────────────────────────────────────────────────── */
.problems { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.problem {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--shadow-sm);
}
.problem-icon { font-size:22px; margin-bottom:12px; display:block; }
.problem h3 { font-size:17px; font-weight:700; letter-spacing:-.015em; margin-bottom:8px; }
.problem p { font-size:14.5px; color:var(--text2); }

/* ── features ────────────────────────────────────────────────────────────── */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.feature {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px 24px; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.feature:hover { border-color:rgba(74,158,255,.4); transform:translateY(-2px); box-shadow:var(--shadow); }
.feature-icon {
  width:40px; height:40px; border-radius:var(--r); display:grid; place-items:center;
  font-size:19px; margin-bottom:14px; background:rgba(74,158,255,.1);
}
.feature-icon svg { display:block; }
.feature h3 { font-size:16.5px; font-weight:700; letter-spacing:-.015em; margin-bottom:7px; }
.feature p { font-size:14.5px; color:var(--text2); }

/* ── how it works ────────────────────────────────────────────────────────── */
/* Steps stack in one column so the printed label sits beside them at full size — the label is
   the whole mechanic of the product and reads as nothing shrunk into a third of a row. */
.how-grid { display:grid; grid-template-columns:1fr 300px; gap:56px; align-items:center; }
.steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; counter-reset:step; }
.how-grid .steps { grid-template-columns:1fr; gap:30px; }
.step { position:relative; padding-top:8px; }
.step-num {
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(74,158,255,.14); border:1px solid rgba(74,158,255,.3);
  color:var(--blue-soft); font-family:var(--mono); font-weight:700; font-size:15px; margin-bottom:16px;
}
.step h3 { font-size:17.5px; font-weight:700; letter-spacing:-.015em; margin-bottom:8px; }
.step p { font-size:15px; color:rgba(255,255,255,.66); }

/* ── printed assembly label ──────────────────────────────────────────────── */
/* Deliberately not var(--mono): the real printed sticker (.label-sheet in src/styles/index.css)
   sets its own plain Helvetica for print realism rather than the app UI's mono font, and this
   mock matches that — colors and proportions below are lifted from the same source, scaled ~1.8x
   for on-screen legibility. Keep the two in sync if that component's design changes. */
.label-fig { text-align:center; }
.label-card {
  background:#fff; color:var(--text); border-radius:12px; padding:16px 18px;
  box-shadow:var(--shadow-lg); transform:rotate(-1.6deg); text-align:left; max-width:300px; margin:0 auto;
}
.label-top { display:flex; gap:12px; align-items:flex-start; }
.label-qr { display:block; width:76px; height:76px; flex:none; }
.label-top-info { min-width:0; }
.label-code { font-size:17px; font-weight:700; color:#0f766e; line-height:1.15; overflow-wrap:anywhere; }
.label-name { font-size:12px; color:#3c3c3c; margin-top:3px; line-height:1.35; }
.label-machine { font-size:11px; color:#787878; margin-top:2px; }
.label-strip {
  display:flex; flex-direction:column; gap:6px;
  border-top:1px solid var(--border); margin-top:12px; padding-top:10px;
}
.label-slot { display:grid; grid-template-columns:32px auto 1fr; gap:8px; align-items:baseline; }
.label-slot .lbl { font-size:10px; color:#969696; }
.label-slot .code { font-size:12px; font-weight:700; color:#1e1e1e; overflow-wrap:anywhere; }
.label-slot .desc { font-size:11px; color:#787878; overflow-wrap:anywhere; }
.label-oal {
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--border); margin-top:10px; padding-top:10px;
}
.label-oal span { font-size:10px; color:#969696; }
.label-oal b { font-size:15px; color:#1e1e1e; }
.label-fig figcaption { margin-top:22px; font-size:13.5px; color:rgba(255,255,255,.62); }

/* ── KPI summary mock ────────────────────────────────────────────────────── */
.kpi-mock { max-width:960px; margin:0 auto 52px; }
.kpi-body { padding:20px 18px 22px; }
.kpi-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:22px; }
.kpi-stat {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:13px 14px; display:grid; gap:2px;
}
.kpi-value { font-size:23px; font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--teal); }
.kpi-value.alert { color:var(--red); }
.kpi-label { font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text2); }
.kpi-delta { font-size:11px; font-weight:700; color:var(--text3); }
.kpi-delta.bad { color:var(--red); }
.kpi-delta.good { color:#15803d; }
.kpi-charts { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.kpi-chart { border:1px solid var(--border); border-radius:var(--r); padding:14px 15px 12px; }
.kpi-chart-title {
  font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text2); margin-bottom:14px;
}
.kpi-bars { display:flex; align-items:flex-end; gap:9px; height:96px; }
.kpi-bars span { flex:1; background:var(--orange); border-radius:3px 3px 0 0; }
.kpi-hbars { display:grid; gap:10px; padding-top:4px; }
/* Grid, not flex: the bar is the 1fr cell itself, so its inline width:% is an exact share of a
   track that every row shares. As a flex item it would shrink and distort the proportions. */
.kpi-hrow { display:grid; grid-template-columns:34px 1fr 52px; gap:9px; align-items:center; }
.kpi-hname { font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--text2); }
.kpi-hbar { height:13px; border-radius:3px; background:var(--green); }
.kpi-hval { font-family:var(--mono); font-size:10.5px; color:var(--text3); text-align:right; }

/* ── dashboard mock ──────────────────────────────────────────────────────── */
/* One caption style for every mock that isn't the hero's, so they read as a labelled set. */
.mock-cap { text-align:center; font-size:14.5px; color:var(--text2); margin:52px 0 20px; }
.mock-cap-light { color:rgba(255,255,255,.62); }
.dash-mock { max-width:960px; margin:0 auto; }
.dash-body { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; padding:18px; }
.dash-card { border:1px solid var(--border); border-radius:var(--r); padding:14px 15px; }
.dash-title { font-size:13px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px; }
.dash-big { font-size:26px; font-weight:800; letter-spacing:-.035em; line-height:1.1; color:var(--green); }
.dash-sub { font-size:11px; color:var(--text3); margin-top:3px; }
.dash-list { list-style:none; margin-top:12px; display:grid; gap:1px; }
.dash-list li {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--text2); padding:6px 0; border-bottom:1px solid var(--border);
}
.dash-list li:last-child { border-bottom:0; }
.dash-list b { font-family:var(--mono); font-size:11.5px; color:var(--text); }
.dash-list-codes { margin-top:0; }
.dash-badge {
  background:rgba(249,115,22,.14); color:#c2410c; border-radius:100px;
  padding:1px 9px; font-size:11px;
}
.kpi-bars.bars-red span { background:var(--red); }
.dash-line { display:block; width:100%; height:96px; }

/* ── lifespan mock ───────────────────────────────────────────────────────── */
.lifespan-mock { max-width:960px; margin:0 auto; }
.lifespan-summary {
  display:flex; flex-wrap:wrap; gap:26px; padding:16px 18px;
  border-bottom:1px solid var(--border);
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text2);
}
.lifespan-summary b { font-family:var(--font); font-size:20px; letter-spacing:-.03em; color:var(--navy); margin-right:6px; }
.lifespan-summary b.alert { color:var(--red); }
.lifespan-summary b.accent { color:var(--blue); }
.lifespan-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.lifespan-table th {
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text3); text-align:left;
  padding:11px 10px; border-bottom:1px solid var(--border);
}
.lifespan-table td { padding:10px; border-bottom:1px solid var(--border); color:var(--text2); }
.lifespan-table tr:last-child td { border-bottom:0; }
.lifespan-table th:first-child, .lifespan-table td:first-child { padding-left:18px; color:var(--text3); }
.lifespan-table th:last-child, .lifespan-table td:last-child { padding-right:18px; }
.lifespan-table .num { text-align:right; }
.lifespan-table .code { font-family:var(--mono); font-weight:700; color:var(--blue); }
/* The point of the whole table: the shorter the lifespan, the louder the number. */
.lifespan-table .avg { font-family:var(--mono); font-weight:700; color:var(--red); white-space:nowrap; }
.lifespan-table .col-last { font-family:var(--mono); font-size:11.5px; color:var(--text3); }
.tag {
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background:rgba(74,158,255,.12); color:#2f6fbe;
  padding:2px 7px; border-radius:5px;
}

/* ── pricing ─────────────────────────────────────────────────────────────── */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; align-items:start; }
.plan {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:30px 26px; box-shadow:var(--shadow-sm); position:relative;
}
.plan-featured { border-color:var(--blue); box-shadow:0 12px 34px rgba(74,158,255,.18); }
.plan-badge {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:4px 13px; border-radius:100px;
  white-space:nowrap;
}
/* Same shape as the "Most popular" badge but green and outlined, so the two read as
   different kinds of label rather than competing for the same emphasis. */
.plan-badge-trial { background:#fff; color:#15803d; border:1px solid rgba(34,197,94,.45); }
.plan-name { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin-bottom:14px; }
.plan-price { display:flex; align-items:baseline; gap:5px; margin-bottom:6px; }
.plan-price .amount { font-size:40px; font-weight:800; letter-spacing:-.035em; line-height:1; }
.plan-price .period { font-size:14.5px; color:var(--text3); font-weight:600; }
.plan-for { font-size:14px; color:var(--text2); min-height:42px; margin-bottom:20px; }

/* Monthly/yearly toggle above the plan cards. Each card carries both price blocks in the
   markup; the toggle only ever flips which one is visible via [data-billing] on the shared
   grid, no build step and no framework needed for a plain-HTML page. */
.billing-toggle { display:flex; justify-content:center; align-items:center; gap:10px; margin:-6px 0 32px; flex-wrap:wrap; }
.billing-toggle-btn {
  font:inherit; font-size:14px; font-weight:700; padding:8px 20px; border-radius:100px;
  border:1px solid var(--border); background:#fff; color:var(--text2); cursor:pointer; transition:all .15s;
}
.billing-toggle-btn:hover { border-color:var(--blue); color:var(--blue); }
.billing-toggle-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.billing-save { font-size:12.5px; font-weight:700; color:#15803d; background:rgba(34,197,94,.12); border-radius:100px; padding:5px 12px; }
.plan .price-annual { display:none; }
.plan-price-sub { font-size:12px; color:var(--text3); margin:-2px 0 16px; display:none; }
[data-billing="year"] .plan .price-monthly { display:none; }
[data-billing="year"] .plan .price-annual { display:flex; }
[data-billing="year"] .plan-price-sub { display:block; }
.plan ul { list-style:none; margin-bottom:24px; }
.plan li { font-size:14.5px; padding:7px 0 7px 25px; position:relative; color:var(--text); }
.plan li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:800; }
.plan li.muted { color:var(--text3); }
.plan li.muted::before { content:"—"; color:var(--text3); }
.pricing-foot { text-align:center; margin-top:34px; font-size:14.5px; color:var(--text2); }
.pricing-foot strong { color:var(--text); font-weight:700; }

/* ── story ───────────────────────────────────────────────────────────────── */
.story { max-width:720px; margin:0 auto; }
.story h2 { font-size:clamp(25px,3vw,34px); letter-spacing:-.025em; font-weight:800; margin-bottom:20px; }
.story p { font-size:16.5px; color:var(--text2); margin-bottom:16px; }
.story blockquote {
  border-left:3px solid var(--blue); padding:4px 0 4px 20px; margin:26px 0;
  font-size:17.5px; font-weight:600; color:var(--text); letter-spacing:-.01em;
}

/* ── final cta ───────────────────────────────────────────────────────────── */
.cta-final { text-align:center; }
.cta-final h2 { font-size:clamp(28px,3.4vw,40px); letter-spacing:-.03em; font-weight:800; margin-bottom:14px; }
.cta-final p { font-size:17px; color:rgba(255,255,255,.7); max-width:520px; margin:0 auto 30px; }
.cta-final .hero-cta { justify-content:center; }

/* ── legal pages ─────────────────────────────────────────────────────────── */
.legal { max-width:780px; margin:0 auto; padding:56px 0 80px; }
.legal-head { border-bottom:1px solid var(--border); padding-bottom:26px; margin-bottom:36px; }
.legal-head h1 { font-size:clamp(28px,3.6vw,40px); letter-spacing:-.03em; font-weight:800; margin-bottom:10px; }
.legal-meta { font-size:14px; color:var(--text3); }
.legal h2 {
  font-size:20px; font-weight:700; letter-spacing:-.02em;
  margin:38px 0 12px; padding-top:6px;
}
.legal h3 { font-size:16px; font-weight:700; margin:22px 0 8px; }
.legal p, .legal li { font-size:15.5px; color:var(--text2); }
.legal p { margin-bottom:14px; }
.legal ul, .legal ol { margin:0 0 16px 22px; }
.legal li { margin-bottom:7px; }
.legal strong { color:var(--text); font-weight:700; }
.legal a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.legal table { width:100%; border-collapse:collapse; margin:8px 0 20px; font-size:14.5px; }
.legal th, .legal td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
.legal th { font-weight:700; color:var(--text); font-size:13px; letter-spacing:.03em; text-transform:uppercase; }
.legal td { color:var(--text2); }
.legal-scroll { overflow-x:auto; }
.legal-toc {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:20px 24px; margin-bottom:34px;
}
.legal-toc ol { margin:0 0 0 18px; }
.legal-toc li { margin-bottom:4px; font-size:14.5px; }
.legal-toc a { color:var(--text2); text-decoration:none; }
.legal-toc a:hover { color:var(--blue); }
/* Editable placeholders left for a real entity name / jurisdiction. Visually loud on
   purpose — publishing with one of these still in the page would be embarrassing. */
.todo {
  background:rgba(249,115,22,.13); color:#c2410c; font-weight:700;
  padding:1px 6px; border-radius:4px; font-family:var(--mono); font-size:13px;
}
.notice {
  background:rgba(74,158,255,.08); border:1px solid rgba(74,158,255,.28);
  border-radius:var(--r); padding:16px 18px; margin-bottom:30px; font-size:14.5px; color:var(--text2);
}

/* ── cookie consent ──────────────────────────────────────────────────────── */
/* Injected by consent.js, and only when a GA measurement ID is configured. Sits above
   the page rather than blocking it — the site stays readable while the choice is open,
   because a cookie wall is not valid consent. */
.consent {
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -8px 30px rgba(15,21,36,.14);
  animation:consent-up .22s ease-out;
}
@keyframes consent-up { from { transform:translateY(100%); } to { transform:translateY(0); } }
.consent-inner {
  max-width:1120px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.consent-text { flex:1 1 420px; font-size:14px; color:var(--text2); line-height:1.55; }
.consent-text strong { color:var(--text); font-weight:700; }
.consent-text a { color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
/* Equal weight on purpose. A reject button that is smaller, greyer or one click deeper
   than accept is not valid consent, and is the pattern regulators have actually fined. */
.consent-actions { display:flex; gap:10px; flex:0 0 auto; }
.consent-actions .btn { min-width:112px; text-align:center; }
@media (max-width:560px) {
  .consent-inner { padding:16px 18px; gap:14px; }
  .consent-actions { width:100%; }
  .consent-actions .btn { flex:1; min-width:0; }
}
@media (prefers-reduced-motion:reduce) { .consent { animation:none; } }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer { background:var(--navy-3); color:rgba(255,255,255,.55); padding:44px 0 34px; font-size:14px; }
.footer-inner { display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.footer a { color:rgba(255,255,255,.55); transition:color .12s; }
.footer a:hover { color:#fff; }
.footer-links { display:flex; gap:22px; flex-wrap:wrap; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:44px; }
  .hero { padding:56px 0 70px; }
  .nav-links { display:none; }
  .section { padding:64px 0; }
  .how-grid { grid-template-columns:1fr; gap:44px; }
  .how-grid .steps { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
  .lifespan-table .col-last { display:none; }
}
@media (max-width:700px) {
  .kpi-charts { grid-template-columns:1fr; }
  .lifespan-table .col-mac { display:none; }
}
@media (max-width:560px) {
  .wrap { padding:0 18px; }
  .nav-inner { gap:12px; }
  .nav-cta { gap:6px; }
  .lang-tab { padding:6px 8px; }
  .hero-cta .btn { width:100%; text-align:center; }
  .mock-row { grid-template-columns:52px 1fr auto; }
  .mock-row .mock-stock { display:none; }
  .lifespan-table .col-cat { display:none; }
  .lifespan-table { font-size:11.5px; }
  /* .mock clips its overflow, so a table that can't reach the container width loses its last
     column's text rather than scrolling. Letting the lifespan figure wrap is what buys the room
     to keep every remaining column on a 375px screen. */
  .lifespan-table .avg { white-space:normal; }
  .lifespan-table th, .lifespan-table td { padding:9px 7px; }
  .lifespan-table th:first-child, .lifespan-table td:first-child { padding-left:14px; }
  .lifespan-table th:last-child, .lifespan-table td:last-child { padding-right:14px; }
  .lifespan-summary { gap:16px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .btn:hover, .feature:hover { transform:none; }
}