/* EPG site — one stylesheet for every page */

/* Fonts are subsets built by tools/subset_fonts.py (weights 400–700; "ext" = only ă ș ț ş ţ ő ű). If you change
   what a file holds, keep its unicode-range here in step with that script. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0150-0151, U+015E-015F, U+0162-0163, U+0170-0171, U+0218-021B;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2212;
}

:root {
  --bg: #0f0e0d;
  --surface: #171514;
  --surface-2: #201d1b;
  --line: rgba(242, 238, 232, .1);
  --line-strong: rgba(242, 238, 232, .2);
  --text: #f2eee8;
  --text-2: #ddd7cf;   /* body copy that has to be read, not skimmed */
  --muted: #b3aa9e;    /* labels, notes, metadata */
  --faint: #7a7368;
  --red: #c42b2b;
  --red-hover: #d93a33;
  --red-soft: rgba(196, 43, 43, .12);
  --ok: #7fc99a;
  --error: #f08a7e;
  --radius: 8px;
  --radius-lg: 14px;
  --max: 1160px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(56px, 8vw, 96px);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Language: both versions live in the markup, only the active one shows */
html:not([data-lang]) [lang="en"]:not(html),
html[data-lang="ro"] [lang="en"]:not(html),
html[data-lang="en"] [lang="ro"]:not(html) { display: none !important; }
/* .lang-both: for a line whose two languages wrap at different widths. Both stay in one grid cell, the other one
   invisible, so the line is always as tall as the longer one and switching language never moves what's below. */
html[data-lang] .lang-both { display: grid; }
html[data-lang] .lang-both > [lang] { display: block !important; grid-area: 1 / 1; }
html[data-lang="ro"] .lang-both > [lang="en"], html[data-lang="en"] .lang-both > [lang="ro"] { visibility: hidden; }

/* Ad-variant headlines (?v=clinici) */
[data-variant]:not([data-variant="default"]) { display: none; }
html[data-v="clinici"] [data-variant="clinici"] { display: revert; }
html[data-v="clinici"] [data-variant="default"] { display: none; }

/* Funnel state from this visitor's earlier steps */
html:not(.has-lead) .if-lead,
html:not(.has-booking) .if-booking,
html:not(.has-partial) .if-partial,
html:not(.has-resource) .if-resource,
html.has-lead .no-lead,
html.has-partial .no-partial,
html.has-resource .no-resource { display: none !important; }

/* Booking track (consult vs short triage call) and whether a real video is configured */
html[data-track="triage"] .t-consult,
html:not([data-track="triage"]) .t-triage,
html:not(.has-video) .if-video,
html.has-video .no-video { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0; font-weight: 700; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.025em; }
h2 { font-size: clamp(28px, 3.3vw, 40px); line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; text-wrap: pretty; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: 14px; line-height: 1.55; }
.lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: var(--text-2); max-width: 600px; }
.kicker { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 18px; }
.kicker--red { color: var(--red); }

/* Buttons and links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 15px/1 var(--font); color: #fff; background: var(--red);
  padding: 17px 24px; border: 0; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; transition: background .15s;
}
.btn:hover { background: var(--red-hover); color: #fff; }
.btn:disabled { background: var(--surface-2); color: var(--faint); cursor: not-allowed; }
.btn--sm { font-size: 14px; padding: 11px 16px; }
.btn--block { width: 100%; }
.btn--quiet { background: transparent; color: var(--text); border: 1px solid var(--line-strong); }
.btn--quiet:hover { background: var(--surface-2); color: var(--text); }
.link {
  font-weight: 600; color: var(--text); text-decoration: underline;
  text-decoration-color: var(--line-strong); text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: text-decoration-color .15s; background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; cursor: pointer;
}
.link:hover { text-decoration-color: var(--text); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(15, 14, 13, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand img { height: 46px; width: auto; }
.main-nav { display: flex; gap: 28px; margin-left: auto; }
.main-nav a { font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .15s; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.site-header--funnel .header-actions { margin-left: auto; }
.header-phone { font-size: 14px; color: var(--muted); text-decoration: none; }
.header-phone:hover { color: var(--text); }

.lang-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.lang-switch button {
  font: 600 12px/1 var(--font); letter-spacing: .04em; color: var(--faint);
  background: transparent; border: 0; padding: 8px 10px; cursor: pointer; transition: color .15s, background .15s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { color: var(--text); background: rgba(242, 238, 232, .14); }

.menu-btn { display: none; width: 40px; height: 40px; background: transparent; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--text); content: ''; transition: transform .2s; }
.menu-btn span { top: 16px; }
.menu-btn span::before { left: 0; right: 0; top: 7px; }
.site-header.is-open .menu-btn span { transform: translateY(3.5px) rotate(45deg); }
.site-header.is-open .menu-btn span::before { transform: translateY(-7px) rotate(-90deg); }

@media (max-width: 860px) {
  .header-inner { gap: 12px; }
  .main-nav {
    display: none; position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .main-nav a { font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-header.is-open .main-nav { display: flex; }
  .header-actions { margin-left: auto; gap: 10px; }
  .header-phone { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 420px) { .header-actions .btn--sm { display: none; } }

/* Sections */
.section { padding: var(--section) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section--tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head p { margin-top: 14px; }

/* Hero: copy on the left, the deck (or the VSL once recorded) on the right */
.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 7vw, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-grid h1 { font-size: clamp(34px, 3.9vw, 52px); }
.hero .lead { margin-top: 24px; }
.hero-note { font-size: 14px; color: var(--faint); }

/* The offer: the free booking review, stated the same way on every page */
.offer { margin-top: 28px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line-strong); max-width: 560px; }
.offer-title { font-weight: 600; font-size: 16px; }
.offer-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.offer-list li { position: relative; padding-left: 22px; font-size: 15px; color: var(--text-2); line-height: 1.5; }
.offer-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--line-strong); }
.offer-meta { margin-top: 14px; font-size: 14px; color: var(--muted); }
.apply-intro .offer-list { margin-top: 18px; max-width: 520px; }
.hero .offer + .actions { margin-top: 24px; }
.resume { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-size: 15px; max-width: 520px; }
.resume::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }

/* Deck sales letter */
.deck { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.deck:focus-visible { outline-offset: 4px; }
.deck-stage { display: grid; min-height: clamp(330px, 32vw, 400px); touch-action: pan-y; }
.deck-slide {
  grid-area: 1 / 1; padding: clamp(24px, 3.2vw, 40px); display: flex; flex-direction: column; justify-content: flex-start;
  opacity: 0; visibility: hidden; transform: translateX(14px); transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.deck-slide.is-active { opacity: 1; visibility: visible; transform: none; }
.deck-tag { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.deck-slide h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.deck-slide p { color: var(--text-2); margin-top: 16px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; max-width: 600px; }
.deck-slide .deck-hint { margin-top: 24px; font-size: 14px; font-weight: 600; color: var(--muted); }
.deck-slide .deck-lead { margin-top: 12px; }
.deck-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.deck-points li { position: relative; padding-left: 22px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; color: var(--text-2); }
.deck-points li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--line-strong); }
.deck-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.deck-chain > span { font-size: 14px; font-weight: 600; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg); }
.deck-chain i { font-style: normal; color: var(--faint); }
.deck-chain .is-weak { border-style: dashed; color: var(--muted); }
.deck-chain .is-end { border-color: var(--red); color: var(--text); background: var(--red-soft); }
.deck-steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: ds; display: grid; gap: 8px; }
.deck-steps li { counter-increment: ds; position: relative; padding-left: 34px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.45; }
.deck-steps li::before { content: counter(ds); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.deck-rates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.deck-rates div { padding: 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: 13px; line-height: 1.4; color: var(--text-2); }
.deck-rates b { display: block; color: var(--text); font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; margin-bottom: 2px; }
.deck-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.deck-col { padding: 14px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.deck-col b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.deck-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.deck-col li { position: relative; padding-left: 18px; font-size: 15px; color: var(--text-2); line-height: 1.45; }
.deck-col li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 2px; background: var(--line-strong); }
.deck-col.is-yes li::before, .deck-col.is-no li::before { content: '✓'; top: 0; width: auto; height: auto; background: none; font-weight: 700; color: var(--ok); font-size: 12px; }
.deck-col.is-no li::before { content: '✕'; color: var(--faint); }
.deck-qa { margin: 18px 0 0; display: grid; gap: 10px; }
.deck-qa div { display: grid; grid-template-columns: minmax(120px, .55fr) 1fr; gap: 10px; font-size: 15px; line-height: 1.5; }
.deck-qa dt { font-weight: 600; }
.deck-qa dd { margin: 0; color: var(--text-2); }
.deck-contact { font-size: 14px; color: var(--muted); }
.deck-contact .link { font-size: 14px; }
@media (max-width: 560px) { .deck-cols, .deck-rates { grid-template-columns: 1fr; } .deck-qa div { grid-template-columns: 1fr; gap: 2px; } }
.deck-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.deck-weeks div { padding: 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--text-2); }
.deck-weeks b { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.deck-slide .actions { margin-top: 22px; }
.deck-bar { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .18); }
.deck-progress { flex: 1; display: flex; gap: 4px; }
.deck-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--line-strong); transition: background .2s; }
.deck-progress span.is-done { background: var(--red); }
.deck-count { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }
.deck-nav { display: flex; gap: 6px; }
.deck-nav button {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 600 16px/1 var(--font);
}
.deck-nav button:hover:not(:disabled) { background: var(--surface-2); }
.deck-nav button:disabled { opacity: .35; cursor: default; }
.deck-nav .deck-next { background: var(--red); border-color: var(--red); }
.deck-nav .deck-next:hover:not(:disabled) { background: var(--red-hover); }
/* Slide 1: the next button reads "Start →" and nudges until the visitor moves the deck once */
.deck-next .deck-start { display: none; }
.deck.is-first .deck-nav .deck-next { width: auto; padding: 0 16px; gap: 6px; display: inline-flex; align-items: center; font-size: 15px; }
.deck.is-first .deck-next .deck-start { display: inline; }
.deck.is-first:not(.is-touched) .deck-next { animation: deckNudge 2.6s ease-in-out 1.2s infinite; }
@keyframes deckNudge { 0%, 72%, 100% { transform: none; } 80% { transform: translateX(5px); } 88% { transform: none; } 94% { transform: translateX(3px); } }
@media (max-width: 560px) { .deck-weeks { grid-template-columns: 1fr 1fr; } }
/* Phones: the deck is as tall as the slide on screen, not its tallest slide (that left slide 1 above ~400px of empty
   box). Only the active slide is laid out and it fades in; deck.js brings the deck's top back into view on a move. */
@media (max-width: 560px) {
  .deck-stage { display: block; min-height: 0; }
  .deck-slide:not(.is-active) { display: none; }
  .deck-slide.is-active { animation: deckIn .3s ease; }
}
@keyframes deckIn { from { opacity: 0; transform: translateX(14px); } }

/* Video slot (VSL / pre-call) once a real video exists */
.video { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #000; border: 1px solid var(--line-strong); }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Proof band — the nudge toward /projects */
.proof-band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding: 22px 0; text-decoration: none; color: var(--text);
}
.proof-thumb { width: 92px; height: 58px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); padding: 8px; display: grid; gap: 4px; align-content: start; }
.proof-thumb i { display: block; height: 6px; border-radius: 3px; background: var(--line-strong); }
.proof-thumb i:nth-child(1) { width: 60%; background: var(--red); }
.proof-thumb i:nth-child(3) { width: 75%; }
.proof-thumb i:nth-child(4) { width: 45%; }
.proof-tag { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.proof-text { font-size: 17px; line-height: 1.45; }
.proof-cta { font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .15s; }
.proof:hover .proof-cta { color: var(--text); }
.proof--card { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 820px) { .proof { grid-template-columns: 1fr; gap: 12px; } .proof-thumb { display: none; } }

/* Pillars with live mini-screens */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 18px 24px; display: flex; flex-direction: column; }
.pillar h3 { margin-top: 20px; padding: 0 6px; }
.pillar p { color: var(--text-2); font-size: 16px; margin-top: 8px; padding: 0 6px; }
@media (max-width: 920px) { .pillars { grid-template-columns: 1fr; } }

.vig { position: relative; height: 200px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); padding: 16px; overflow: hidden; font-size: 13px; }
.vig b { font-weight: 600; }
/* 1 — qualification */
.vq-title { font-weight: 600; margin-bottom: 10px; }
.vq-opt { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; margin-top: 6px; color: var(--muted); }
.vq-opt:first-of-type { animation: vqPick 6s infinite; }
.vq-chip { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; color: #fff; background: var(--red); padding: 5px 9px; border-radius: 5px; opacity: 0; animation: vqChip 6s infinite; }
@keyframes vqPick { 0%, 22% { border-color: var(--line-strong); color: var(--muted); background: transparent; } 30%, 90% { border-color: var(--red); color: var(--text); background: var(--red-soft); } 100% { border-color: var(--line-strong); color: var(--muted); background: transparent; } }
@keyframes vqChip { 0%, 40% { opacity: 0; transform: translateY(6px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 2 — speed to lead */
.vf-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); opacity: 0; }
.vf-item + .vf-item { margin-top: 8px; }
.vf-1 { animation: vfIn 6s infinite; }
.vf-2 { animation: vfIn2 6s infinite; }
.vf-3 { animation: vfIn3 6s infinite; }
.vf-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.vf-check { flex: none; color: var(--ok); font-weight: 700; }
.vf-time { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
@keyframes vfIn { 0% { opacity: 0; transform: translateY(-8px); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vfIn2 { 0%, 30% { opacity: 0; transform: translateY(-8px); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vfIn3 { 0%, 55% { opacity: 0; transform: translateY(-8px); } 63%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 3 — confirmation to show */
.vc-sms { max-width: 80%; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: var(--surface-2); color: var(--text); }
.vc-reply { margin: 8px 0 0 auto; width: fit-content; padding: 8px 14px; border-radius: 12px 12px 4px 12px; background: var(--red); color: #fff; font-weight: 700; opacity: 0; animation: vcReply 6s infinite; }
.vc-status { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; gap: 6px; }
.vc-status > span { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 4px; border-radius: 5px; border: 1px solid var(--line); color: var(--faint); }
.vc-status .s1 { animation: vcS1 6s infinite; }
.vc-status .s2 { animation: vcS2 6s infinite; }
.vc-status .s3 { animation: vcS3 6s infinite; }
@keyframes vcReply { 0%, 25% { opacity: 0; transform: translateY(6px); } 33%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vcS1 { 0%, 30% { color: var(--text); border-color: var(--line-strong); } 36%, 100% { color: var(--faint); border-color: var(--line); } }
@keyframes vcS2 { 0%, 34% { color: var(--faint); border-color: var(--line); } 40%, 62% { color: var(--text); border-color: var(--line-strong); } 68%, 100% { color: var(--faint); border-color: var(--line); } }
@keyframes vcS3 { 0%, 66% { color: var(--faint); border-color: var(--line); background: transparent; } 72%, 92% { color: #fff; border-color: var(--red); background: var(--red); } 100% { color: var(--faint); border-color: var(--line); background: transparent; } }

/* Calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
.calc-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); }
.calc-field + .calc-field { margin-top: 28px; }
.calc-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.calc-field output { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc input[type="range"] { width: 100%; accent-color: var(--red); height: 24px; }
.calc-note { margin-top: 26px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.calc-big { font-size: clamp(34px, 4.4vw, 52px); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc-big-label { color: var(--muted); font-size: 15px; margin-top: 8px; }
.calc-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 26px 0 0; }
.calc-chain div { padding: 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); }
.calc-chain dt { font-size: 12px; color: var(--faint); }
.calc-chain dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-capture { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.calc-capture > p { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
@media (max-width: 920px) { .calc { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .calc-chain { grid-template-columns: 1fr 1fr; } }

/* Small capture form (email or phone) */
.capture-row { display: flex; gap: 8px; }
.capture-row input {
  flex: 1; min-width: 0; font: 400 16px/1.4 var(--font); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 13px 14px;
}
.capture-row input::placeholder { color: var(--faint); }
.capture-row input:focus { outline: none; border-color: var(--text); }
.capture-row .btn { padding: 13px 18px; white-space: nowrap; }
.capture .check { margin: 10px 0 0; font-size: 13px; }
.capture-msg { font-size: 14px; margin-top: 10px; }
.capture-msg:empty { display: none; }
.capture-msg.is-error { color: var(--error); }
.capture.is-done .capture-row, .capture.is-done .check { display: none; }
.capture.is-done .capture-msg { color: var(--ok); margin-top: 0; }
@media (max-width: 420px) { .capture-row { flex-direction: column; } }

/* Problem list */
.problem { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.problem li { padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); font-size: 18px; font-weight: 600; line-height: 1.35; }
.problem li::before { content: '✕'; display: block; color: var(--red); font-size: 16px; margin-bottom: 12px; }
@media (max-width: 820px) { .problem { grid-template-columns: 1fr; } }

/* Numbered list — what you get */
.numbered { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.numbered li::before { content: counter(n, decimal-leading-zero); font-weight: 700; font-size: 15px; color: var(--red); padding-top: 3px; }
.numbered p { color: var(--muted); margin-top: 6px; font-size: 16px; }
@media (max-width: 820px) { .numbered { grid-template-columns: 1fr; } }

/* The 90 days */
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stages li { padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.stage-when { font-size: 13px; font-weight: 700; color: var(--red); }
.stages h3 { margin-top: 10px; font-size: 18px; }
.stages p { color: var(--muted); font-size: 15px; margin-top: 8px; }
@media (max-width: 920px) { .stages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stages { grid-template-columns: 1fr; } }

/* Fit / not fit */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fit > div { padding: 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.fit h3 { margin-bottom: 12px; }
.fit ul { list-style: none; margin: 0; padding: 0; }
.fit li { padding: 8px 0 8px 26px; position: relative; color: var(--muted); }
.fit li::before { position: absolute; left: 0; top: 8px; font-weight: 700; }
.fit-yes li::before { content: '✓'; color: var(--ok); }
.fit-no li::before { content: '✕'; color: var(--faint); }
.fit--single { grid-template-columns: 1fr; max-width: 720px; }
.fit--single li { color: var(--text-2); }
@media (max-width: 820px) { .fit { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 780px; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px;
  padding: 20px 0; font-size: 18px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 24px; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-2); padding: 0 40px 22px 0; }

/* Final CTA */
.cta-final { border-top: 1px solid var(--line); padding: clamp(72px, 10vw, 120px) 0; }
.cta-final h2 { font-size: clamp(32px, 4.4vw, 52px); max-width: 760px; }
.cta-final p { margin-top: 16px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 32px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid img { height: 42px; width: auto; margin-bottom: 14px; }
.footer-grid h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--faint); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li + li { margin-top: 8px; }
.footer-grid a { color: var(--muted); text-decoration: none; }
.footer-grid a:hover { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }
/* Under 420 px the long Gmail address no longer fits half the width (it pushed 360 px phones 15 px sideways):
   Pages and Legal sit side by side, Contact gets its own full-width row under them */
@media (max-width: 420px) { .footer-grid > :nth-child(3) { grid-column: 1 / -1; order: 1; } }
.footer-grid a { overflow-wrap: anywhere; }

.funnel-footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: 13px; color: var(--faint); }
.funnel-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.funnel-footer a { color: var(--faint); margin-left: 18px; }
.funnel-footer a:hover { color: var(--text); }
/* The income disclaimer, under the legal line on every page (Razvan, 18 Oct) */
.footer-disclaimer { flex-basis: 100%; max-width: 760px; margin: 0; font-size: 13px; line-height: 1.55; color: var(--faint); }

/* Sticky mobile bar */
.mbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; gap: 8px;
  padding: 8px; border-radius: 12px; background: rgba(23, 21, 20, .96); border: 1px solid var(--line-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5); transform: translateY(140%); transition: transform .25s ease;
}
.mbar.is-on { transform: none; }
.mbar .btn { flex: 1; padding: 14px 12px; }
@media (max-width: 760px) { .mbar { display: flex; } body.has-mbar { padding-bottom: 84px; } }

/* "Not ready yet?" card */
.nudge {
  position: fixed; right: 20px; bottom: 20px; z-index: 45; width: min(380px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.nudge.is-on { opacity: 1; visibility: visible; transform: none; }
.nudge h3 { font-size: 19px; padding-right: 28px; }
.nudge > p { color: var(--muted); font-size: 15px; margin: 8px 0 16px; }
.nudge-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.nudge-close:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 760px) { .nudge { right: 12px; bottom: 96px; } }

/* ---------- Funnel: /apply ---------- */
.apply-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "intro form" "deck form";
  grid-template-rows: auto 1fr; column-gap: clamp(36px, 5vw, 72px); row-gap: 28px; align-items: start;
  padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 7vw, 88px);
}
.apply-intro { grid-area: intro; }
.apply-intro h1 { font-size: clamp(32px, 4.2vw, 48px); }
.apply-intro .lead { margin-top: 18px; }
.apply-deck { grid-area: deck; }
.apply-form { grid-area: form; position: sticky; top: 96px; }
@media (max-width: 980px) {
  .apply-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "deck"; grid-template-rows: auto; }
  .apply-form { position: static; }
}

.card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 30px); }
.card-note { margin-top: 14px; font-size: 13px; color: var(--faint); text-align: center; }
.card-note a { color: var(--muted); }

.progress { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font-size: 13px; color: var(--faint); }
.progress-bar { flex: 1; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; background: var(--red); transition: width .35s ease; }

.step[hidden] { display: none; }
.step legend, .step .step-title { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 18px; padding: 0; }
.step fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.step-sub { color: var(--muted); font-size: 15px; margin: -8px 0 18px; }

.opts { display: grid; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  font: 500 16px/1.35 var(--font); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s;
}
.opt:hover { border-color: var(--text); }
.opt.is-selected { border-color: var(--red); background: var(--red-soft); }
.opt kbd { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; font: 600 12px/1 var(--font); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; }
.opt small { display: block; color: var(--faint); font-size: 13px; margin-top: 2px; font-weight: 400; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.field input {
  width: 100%; font: 400 16px/1.4 var(--font); color: var(--text);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 13px 14px; transition: border-color .15s;
}
.field input::placeholder { color: var(--faint); }
.field input:focus { outline: none; border-color: var(--text); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.field-error { display: block; margin-top: 6px; font-size: 13px; color: var(--error); }
.field-error:empty { display: none; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); margin: 6px 0 20px; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--red); }
.check a { color: var(--text); }

.step-back { display: inline-block; margin-top: 16px; font: 500 14px/1 var(--font); color: var(--faint); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.step-back:hover { color: var(--text); }
.step-done { text-align: center; padding: 20px 0 8px; }
.step-done p { color: var(--muted); margin-top: 10px; }
.spinner { width: 22px; height: 22px; margin: 22px auto 0; border: 2px solid var(--line-strong); border-top-color: var(--red); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Funnel: /schedule ---------- */
.schedule-hero { display: grid; grid-template-columns: minmax(0, 1fr) 500px; gap: clamp(36px, 5vw, 72px); align-items: start; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 88px); }
.schedule-hero h1 { font-size: clamp(30px, 4vw, 46px); }
.schedule-hero .lead { margin-top: 18px; }
.call-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 24px; font-size: 15px; color: var(--muted); }
.call-meta strong { color: var(--text); font-weight: 600; }
.agenda { margin-top: 30px; }
.agenda h2 { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.agenda ul { list-style: none; margin: 12px 0 0; padding: 0; max-width: 540px; }
.agenda li { position: relative; padding: 9px 0 9px 22px; font-size: 16px; }
.agenda li::before { content: ''; position: absolute; left: 2px; top: 20px; width: 8px; height: 2px; background: var(--line-strong); }
.gift { display: flex; gap: 14px; align-items: flex-start; margin-top: 26px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-strong); max-width: 540px; }
.gift strong { display: block; margin-bottom: 2px; }
.gift p { color: var(--muted); font-size: 15px; }
.gift ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.gift li { position: relative; padding-left: 18px; font-size: 15px; color: var(--muted); line-height: 1.45; }
.gift li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 2px; background: var(--line-strong); }
.gift-icon { flex: none; width: 34px; height: 34px; border-radius: 8px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; font-weight: 700; }
/* The "how we get you there" path, shown to people who ticked the 90-day box on /apply */
.path { list-style: none; margin: 26px 0 0; padding: 0; max-width: 540px; display: grid; gap: 8px; counter-reset: p; }
.path li { padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--text-2); }
.path li b { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.path li em { display: block; font-style: normal; color: var(--red); font-weight: 600; margin-top: 6px; }
.path li.is-now { border-color: var(--red); background: var(--red-soft); }
.check--goal { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--text); font-weight: 500; margin: 4px 0 14px; }
.check--goal:hover { border-color: var(--text); }
@media (max-width: 1040px) { .schedule-hero { grid-template-columns: minmax(0, 1fr); } }

.days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.day { font: 500 14px/1.3 var(--font); color: var(--muted); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 11px 8px; cursor: pointer; text-align: center; }
.day strong { display: block; color: var(--text); font-size: 16px; font-weight: 600; text-transform: capitalize; }
.day[aria-pressed="true"] { border-color: var(--text); background: var(--surface-2); }
.slots-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
/* Fixed hours; the chosen hour opens its four 15-minute starts right underneath */
.hours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.hour, .slot { font: 600 14px/1 var(--font); color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px 0; cursor: pointer; transition: border-color .15s, background .15s; }
.hour:hover:not(:disabled), .slot:hover:not(:disabled) { border-color: var(--text); }
.hour:disabled, .slot:disabled { color: var(--faint); border-color: var(--line); cursor: default; opacity: .55; }
.hour[aria-pressed="true"] { border-color: var(--text); background: var(--surface-2); }
.quarters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; padding: 8px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.slot[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.field-opt { font-weight: 400; color: var(--faint); }
.tz-note { font-size: 13px; color: var(--faint); margin: 10px 0 18px; }
.callback { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.callback .capture { margin-top: 12px; }
.embed { width: 100%; min-height: 640px; border: 0; border-radius: var(--radius); background: var(--bg); }
@media (max-width: 400px) { .hours { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Funnel: /thank-you (confirmation page) ----------
   First screen holds everything: headline, the one action and the questions on the left,
   the confirm card at the far right. Phones: head → confirm card → questions. */
.ty-top {
  max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  grid-template-areas: "head side" "qa side"; column-gap: clamp(32px, 4.5vw, 72px); align-items: start;
  padding-top: clamp(32px, 4vw, 52px); padding-bottom: clamp(48px, 6vw, 80px);
}
.ty-head { grid-area: head; }
.ty-side { grid-area: side; display: grid; gap: 14px; }
.ty-qa { grid-area: qa; margin-top: 28px; }
.ty-head h1 { font-size: clamp(32px, 4vw, 50px); }
.booked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 18px; font-size: 16px; }
.booked-when { font-weight: 700; }
.booked-meta { color: var(--muted); font-size: 15px; }
.ty-action { margin-top: 16px; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.ty-action strong { display: block; color: var(--text); font-weight: 600; }
.ty-video { margin-top: 24px; max-width: 760px; }
.ty-qa h2 { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-bottom: 10px; }

/* Questions: the question and a bold one-line answer always show; the rest opens */
.qa-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; column-gap: 16px; padding: 16px 0; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .2s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa-q { grid-column: 1; font-size: 15px; color: var(--muted); }
.qa-a { grid-column: 1; margin-top: 3px; font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--text); }
.qa-more { color: var(--text-2); font-size: 16px; line-height: 1.6; padding: 0 40px 18px 0; max-width: 720px; }

.confirm-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: 22px; }
.confirm-card h2 { font-size: 20px; letter-spacing: -.01em; margin-bottom: 14px; }
.confirm { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; gap: 10px; }
.confirm > li { counter-increment: c; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.confirm > li::before { content: counter(c); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 700; font-size: 13px; }
.confirm h3 { font-size: 16px; }
.confirm p { color: var(--text-2); margin-top: 4px; font-size: 15px; line-height: 1.5; }
.confirm .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.confirm .btn--sm { font-size: 13px; padding: 10px 12px; }
.confirm-foot { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.confirm-foot b { color: var(--text); font-weight: 600; white-space: nowrap; }

.ask { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 22px; }
.ask h2 { font-size: 16px; letter-spacing: 0; }
.ask-row { display: flex; gap: 8px; margin-top: 12px; }
.ask-row .btn { flex: 1; }
.ask-more { margin-top: 12px; font-size: 14px; font-weight: 500; }
.ask .capture { margin-top: 12px; }
.ask .capture-row { flex-direction: column; }

.ty-proof { padding-bottom: clamp(32px, 4vw, 48px); }

@media (max-width: 1000px) {
  .ty-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "qa"; }
  .ty-side { margin-top: 24px; }
}

/* Legal pages */
.legal { padding: clamp(48px, 8vw, 96px) 0; }
.legal h1 { font-size: clamp(32px, 4vw, 44px); }
.legal .updated { color: var(--faint); font-size: 14px; margin-top: 12px; }
.legal-body { max-width: 760px; margin-top: 40px; }
.legal-body h2 { font-size: 22px; margin: 40px 0 12px; }
.legal-body p, .legal-body li { color: var(--muted); font-size: 16px; }
.legal-body p + p { margin-top: 12px; }
.legal-body ul { padding-left: 20px; margin: 12px 0 0; }
.legal-body li + li { margin-top: 6px; }
.legal-body a { color: var(--text); }
.placeholder { color: var(--red); font-weight: 600; }

/* ---------- Projects: our software (the proof page) ----------
   The app's screens, rebuilt from the app itself in its light mode: its tokens, Inter, its tiles, pills and
   tables (Intermediar globals.css). Demo data only. projects.js steps each panel through data-step while it's
   on screen (the HTML holds the last step, so without JS the still frame shows). Every label is a
   ro/en pair and each changing state sits in one grid cell, so the language switch never moves anything. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0102-0103, U+0150-0151, U+015E-015F, U+0162-0163, U+0170-0171, U+0218-021B; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pp-ask { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 560px; }
.pp-ask-q { font-size: 18px; font-weight: 600; color: var(--text); }
.pp-ask .actions { margin-top: 14px; }
.pp-ask-note { margin-top: 12px; font-size: 14px; color: var(--muted); }

.pp-shot { position: relative; margin: 0; }
.pp-cap { margin-top: 16px; font-size: 13px; color: var(--faint); text-align: center; }

/* The app, light mode */
.ix {
  --ix-bg: #fefefe; --ix-surface: #fff; --ix-surface-2: #fafafa; --ix-surface-3: #f4f4f4;
  --ix-line: rgba(0, 0, 0, .06); --ix-line-2: rgba(0, 0, 0, .1);
  --ix-text: #1a1a1a; --ix-muted: #6b7280; --ix-faint: #a1a1aa;
  --ix-accent: #a50ebc; --ix-accent-hover: #8f0ca3; --ix-accent-tint: #faf1fb; --ix-accent-soft: #e9c7ef;
  --ix-ok-s: #ecfdf5; --ix-ok-t: #047857; --ix-ok: #059669;
  --ix-warn-s: #fefce8; --ix-warn-t: #854d0e;
  --ix-bad-s: #fef2f2; --ix-bad-t: #b91c1c; --ix-bad: #dc2626;
  --ix-info-s: #eff6ff; --ix-info-t: #1d4ed8;
  position: relative; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px; line-height: 1.4; color: var(--ix-text); text-align: left;
}
:where(.ix) p { margin: 0; }
:where(.ix) svg { flex: none; }
.ix-win { position: relative; padding: 18px; border-radius: 14px; background: var(--ix-bg); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 24px 60px rgba(0, 0, 0, .45); overflow: hidden; }
.ix-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ix-eyebrow { margin-bottom: 2px; font-size: 12px; color: var(--ix-muted); }
.ix-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ix-sub { margin-top: 3px; font-size: 12.5px; color: var(--ix-muted); }
.ix-demo { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--ix-surface-3); font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ix-muted); white-space: nowrap; }
.ix-sec { margin: 16px 0 8px; font-size: 12.5px; color: var(--ix-muted); }
.ix-sec b { font-weight: 600; color: var(--ix-text); }

.ix-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ix-tile { padding: 12px 14px; border: 1px solid var(--ix-line-2); border-radius: 12px; background: var(--ix-surface); }
.ix-tile.is-accent { border-color: transparent; background: var(--ix-accent-tint); }
.ix-k { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ix-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-k svg { width: 12px; height: 12px; }
.ix-tile.is-accent .ix-k, .ix-tile.is-accent .ix-num { color: var(--ix-accent); }
.ix-num { display: block; margin-top: 6px; font-size: 26px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ix-tsub { display: block; margin-top: 4px; font-size: 12px; color: var(--ix-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 8px; }
.ix-bars i { flex: 1; height: 100%; border-radius: 2px; background: var(--ix-accent-soft); transform: scaleY(var(--h)); transform-origin: bottom; transition: transform .6s ease; }
.ix-bars i.is-now { background: var(--ix-accent); }

.ix-table, .ix-grid { border: 1px solid var(--ix-line-2); border-radius: 12px; background: var(--ix-surface); overflow: hidden; }
.ix-table { margin-top: 14px; }
.ix-tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) 66px 118px auto; align-items: center; gap: 10px; padding: 10px 14px; }
.ix-th, .ix-gh { padding-top: 9px; padding-bottom: 9px; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ix-muted); }
.ix-th { border-bottom: 1px solid var(--ix-line); }
.ix-row + .ix-row { border-top: 1px solid var(--ix-line); }
.ix-row.is-fade { opacity: .45; }
.ix-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 10.5px; font-weight: 600; }
.av-1 { background: #e0e7ff; color: #4f46e5; } .av-2 { background: #ccfbf1; color: #0d9488; } .av-4 { background: #ede9fe; color: #7c3aed; } .av-5 { background: #e0f2fe; color: #0284c7; }
.ix-who { min-width: 0; }
.ix-who b { display: block; font-size: 13.5px; font-weight: 500; }
.ix-who small { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ix-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-when { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ix-muted); white-space: nowrap; }
.ix-when svg { width: 11px; height: 11px; color: #16a34a; }
.ix-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.ix-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ix-pill.is-warn { background: var(--ix-warn-s); color: var(--ix-warn-t); }
.ix-pill.is-ok { background: var(--ix-ok-s); color: var(--ix-ok-t); }
.ix-pill.is-info { background: var(--ix-info-s); color: var(--ix-info-t); }
.ix-pill.is-bad { background: var(--ix-bad-s); color: var(--ix-bad-t); }
.ix-live { animation: ixLive 1.1s ease-in-out infinite; }
@keyframes ixLive { 50% { opacity: .3; transform: scale(.7); } }
.ix-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px; background: var(--ix-accent); font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; transition: transform .15s ease, background .15s ease; }
.ix-btn svg { width: 12px; height: 12px; }
.ix-btn.is-quiet { background: transparent; border: 1px solid var(--ix-line-2); color: var(--ix-text); }

/* A changing state: every version in one grid cell, the current step's one shows */
.ix-swap { display: inline-grid; }
.ix-swap > * { grid-area: 1 / 1; opacity: 0; transition: opacity .3s ease; }
.ix-status { justify-items: start; }

/* The callout pinned above a panel (hero, scoreboard) */
.ix-score { padding-top: 46px; }
.ix-callout { position: absolute; top: 0; left: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: opacity .3s ease; }
.ix-callout::after { content: ''; position: absolute; left: 30px; top: 100%; width: 2px; height: 14px; background: rgba(255, 255, 255, .35); }
.ix-callout svg { width: 14px; height: 14px; color: var(--ix-accent); }
.ix-callout b { min-width: 2.4em; font-weight: 600; color: var(--ix-accent); font-variant-numeric: tabular-nums; }

/* Hero (cursor and call, 18 Oct): the queue, then Maria's lead page. Steps:
   0 empty · 1 Maria lands, the clock runs, the cursor comes in · 2 hover her row · 3 click her avatar · 4 zoom into her
   lead · 5 the lead settles (Script tab), cursor to Call · 6 click Call · 7 calling · 8 the attempt is logged · 9 booked
   · 10 back out to the queue: Booked, 0:47 (the still frame). The queue and the lead share one grid cell; the lead is
   size-contained, so the queue alone sets the panel's height at every step and in both languages. projects.js's aim()
   measures Maria's avatar and the Call button (AIM.hero) and sets the px variables used below, only ever inside transforms. */
.ix-hero { --ez: cubic-bezier(.6, 0, .2, 1); --x: var(--x0); --y: var(--y0); padding-top: 46px; }
.ix-views { position: relative; display: grid; }
.ix-vq, .ix-vl { grid-area: 1 / 1; position: relative; }
.ix-vq { transform-origin: var(--qx) var(--qy); transition: transform .8s var(--ez), opacity .3s ease; }
.ix-vl { contain: size; overflow: hidden; background: var(--ix-bg); opacity: 0; transform-origin: var(--lx) var(--ly); transform: translate(calc(-1 * var(--zx)), calc(-1 * var(--zy))) scale(calc(1 / var(--zs))); transition: transform .8s var(--ez), opacity .35s ease .4s; }
.ix-hero:is([data-step="4"],[data-step="5"],[data-step="6"],[data-step="7"],[data-step="8"],[data-step="9"]) .ix-vq { opacity: 0; transform: translate(var(--zx), var(--zy)) scale(var(--zs)); transition: transform .8s var(--ez), opacity .35s ease .05s; }
.ix-hero:is([data-step="4"],[data-step="5"],[data-step="6"],[data-step="7"],[data-step="8"],[data-step="9"]) .ix-vl { opacity: 1; transform: none; transition: transform .8s var(--ez), opacity .4s ease .2s; }

/* the queue */
.ix-hero .is-new { position: relative; isolation: isolate; transition: opacity .45s ease, transform .45s ease; }
.ix-hero .is-new::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ix-accent-tint); opacity: 0; transition: opacity .2s ease; }
.ix-hero:is([data-step="2"],[data-step="3"],[data-step="4"]) .is-new::before { opacity: 1; }
.ix-hero[data-step="0"] .is-new { opacity: 0; transform: translateY(-10px); }
.ix-hero[data-step="0"] .ix-callout { opacity: 0; }
.ix-hero:not([data-step="10"]) .s1, .ix-hero[data-step="10"] .s3 { opacity: 1; }
.ix-hero[data-step="10"] .ix-bars .is-now { transform: scaleY(var(--h2)); }

/* a press: the target dips, a ripple spreads from it */
.ix-tap { position: relative; isolation: isolate; transition: transform .15s ease, opacity .3s ease; }
.ix-tap::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--ix-accent); opacity: 0; }
.ix-hero[data-step="3"] .ix-vq .ix-tap { transform: scale(.9); }
.ix-hero[data-step="3"] .ix-vq .ix-tap::after, .ix-hero[data-step="6"] .ix-call::after { animation: ixTap .6s ease-out; }
@keyframes ixTap { from { opacity: .4; transform: scale(.5); } to { opacity: 0; transform: scale(2.3); } }

/* the lead: the app's Panel (header, tiles, tabs) with the Script tab open */
.ix-lh { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ix-lav { width: 44px; height: 44px; font-size: 15px; }
.ix-name { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.ix-lsub { margin-top: 2px; font-size: 12px; color: var(--ix-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-lsub u { text-underline-offset: 2px; text-decoration-color: var(--ix-faint); }
.ix-act { justify-items: end; }
.ix-act .ix-pill { padding: 6px 11px; font-size: 12px; transform: scale(.94); transition: opacity .3s ease, transform .3s ease; }
.ix-act svg { width: 13px; height: 13px; }
.ix-call { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--ix-accent); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ix-call::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .14); opacity: 0; transition: opacity .15s ease; }
.ix-hero[data-step="5"] .ix-call::before { opacity: 1; transition-delay: 1.05s; }
.ix-hero[data-step="6"] .ix-call::before { opacity: 1; }
.ix-hero[data-step="6"] .ix-call { transform: scale(.95); }
.ix-hero:not([data-step="7"]):not([data-step="8"]):not([data-step="9"]):not([data-step="10"]) .p1, .ix-hero[data-step="7"] .p2, .ix-hero[data-step="8"] .p3, .ix-hero:is([data-step="9"],[data-step="10"]) .p4 { opacity: 1; }
.ix-hero[data-step="7"] .p2, .ix-hero[data-step="8"] .p3, .ix-hero:is([data-step="9"],[data-step="10"]) .p4 { transform: none; }
.ix-pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.ix-pt { padding: 9px 4px; border-radius: 10px; background: var(--ix-surface-2); text-align: center; }
.ix-pt.is-accent { background: var(--ix-accent-tint); color: var(--ix-accent); }
.ix-ptk { display: block; font-size: 11px; font-weight: 500; color: var(--ix-muted); white-space: nowrap; }
.ix-pt.is-accent .ix-ptk { color: inherit; }
.ix-ptv { display: grid; place-items: center; min-height: 22px; margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ix-ptv > .ix-swap { justify-items: center; align-items: center; }
.ix-ptv .ix-pill { font-size: 11.5px; }
.ix-none { font-size: 14px; font-weight: 500; color: var(--ix-muted); }
.ix-att { display: inline-flex; align-items: center; gap: 4px; }
.ix-hero:not([data-step="9"]):not([data-step="10"]) .g1, .ix-hero:is([data-step="9"],[data-step="10"]) .g2,
.ix-hero:not([data-step="8"]):not([data-step="9"]):not([data-step="10"]) .a1, .ix-hero[data-step="8"] .a2, .ix-hero:is([data-step="9"],[data-step="10"]) .a3 { opacity: 1; }
.ix-tabs { display: flex; gap: 2px; margin-top: 12px; border-bottom: 1px solid var(--ix-line); }
.ix-tab { display: flex; align-items: center; gap: 5px; margin-bottom: -1px; padding: 8px 9px; border-bottom: 2px solid transparent; font-size: 12.5px; font-weight: 500; color: var(--ix-muted); white-space: nowrap; }
.ix-tab.is-on { border-color: var(--ix-accent); color: var(--ix-accent); }
.ix-tab i { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--ix-surface-3); font-size: 10.5px; font-weight: 600; font-style: normal; text-align: center; color: #52525b; }
.ix-scr { margin-top: 12px; padding: 13px 16px 14px; border: 1px solid var(--ix-line); border-radius: 14px; background: var(--ix-surface); box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .06); }
.ix-st { font-size: 12px; color: var(--ix-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-st b { font-size: 14px; font-weight: 600; color: var(--ix-text); }
.ix-sk { margin-top: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ix-accent); }
.ix-sl { position: relative; margin-top: 3px; font-size: 13.5px; line-height: 1.45; }
.ix-sk, .ix-sl { opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.ix-hero:is([data-step="5"],[data-step="6"],[data-step="7"],[data-step="8"],[data-step="9"],[data-step="10"]) :is(.ix-sk, .ix-sl) { opacity: 1; transform: none; transition-delay: calc(var(--i) * 70ms); }
/* while she's on the phone, the line being said is marked */
.ix-sl::before { content: ''; position: absolute; left: -10px; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--ix-accent); opacity: 0; }
.ix-hero[data-step="7"] .k1::before { animation: ixMark 1.9s ease both; }
.ix-hero[data-step="7"] .k2::before { animation: ixMark 1.9s ease .9s both; }
@keyframes ixMark { 0%, 55%, 100% { opacity: 0; } 10%, 45% { opacity: 1; } }

/* the cursor: X and Y ease differently, so it travels on a soft curve */
.ix-cur { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0; transform: translateX(var(--x)); transition: transform .95s cubic-bezier(.55, 0, .25, 1), opacity .3s ease; }
.ix-cur > i { display: block; transform: translateY(var(--y)); transition: transform .95s cubic-bezier(.3, .1, .3, 1); }
.ix-cur svg { display: block; width: 20px; height: 20px; transform-origin: 3px 2px; transition: transform .12s ease; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }
.ix-hero:not([data-step="0"]):not([data-step="10"]) .ix-cur { opacity: 1; }
.ix-hero:is([data-step="1"],[data-step="2"],[data-step="3"]) { --x: var(--x1); --y: var(--y1); }
.ix-hero[data-step="4"] { --x: var(--x2); --y: var(--y2); }
.ix-hero:is([data-step="5"],[data-step="6"]) { --x: var(--x3); --y: var(--y3); }
.ix-hero:is([data-step="7"],[data-step="8"],[data-step="9"],[data-step="10"]) { --x: var(--x4); --y: var(--y4); }
.ix-hero[data-step="0"] :is(.ix-cur, .ix-cur > i) { transition: none; }
.ix-hero[data-step="1"] .ix-cur { transition-delay: .4s, .25s; }
.ix-hero[data-step="1"] .ix-cur > i { transition-delay: .4s; }
.ix-hero[data-step="4"] :is(.ix-cur, .ix-cur > i) { transition: transform .8s var(--ez), opacity .3s ease; }
.ix-hero[data-step="5"] :is(.ix-cur, .ix-cur > i) { transition-duration: .85s; transition-delay: .3s, 0s; }
.ix-hero[data-step="7"] :is(.ix-cur, .ix-cur > i) { transition-duration: 1.1s; transition-delay: .45s, 0s; }
.ix-hero:is([data-step="3"],[data-step="6"]) .ix-cur svg { transform: scale(.84); }

/* two columns but a narrower panel (981–1239px): the header wraps like the app's does */
@media (min-width: 981px) and (max-width: 1239px) {
  .ix-lh { grid-template-columns: 44px minmax(0, 1fr); row-gap: 10px; }
  .ix-act { grid-column: 1 / -1; justify-items: start; }
  .ix-of, .ix-scr .ix-wide, .ix-hero .ix-when, .ix-hero .h-when { display: none; }
  .ix-hero .ix-tr { grid-template-columns: 28px minmax(0, 1fr) 118px auto; }
}
@media (max-width: 560px) {
  .ix-lh { grid-template-columns: 38px minmax(0, 1fr); gap: 8px 10px; }
  .ix-lav { width: 38px; height: 38px; font-size: 13px; }
  .ix-name { font-size: 16px; }
  .ix-act { grid-column: 1 / -1; justify-items: start; }
  .ix-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .ix-pts .ix-wide, .ix-tabs .ix-wide, .ix-scr .ix-wide, .ix-of { display: none; }
  .ix-ptk { font-size: 10.5px; }
  .ix-ptv { font-size: 14px; }
  .ix-none { font-size: 13px; }
  .ix-tabs { margin-top: 10px; }
  .ix-scr { margin-top: 10px; padding: 12px 14px; }
  .ix-sl { font-size: 13px; }
}
/* small phones (320–374px): the three lead tiles are a few px too tight for "niciuna încă" and the pills */
@media (max-width: 374px) {
  .ix-pts { gap: 6px; }
  .ix-pt { padding: 8px 2px; }
  .ix-none { font-size: 12px; }
  .ix-ptv .ix-pill { padding: 3px 7px; font-size: 11px; }
}

/* Scoreboard: 0 empty → 1 the numbers come in → 2 hold */
.ix-gr { display: grid; grid-template-columns: minmax(0, .9fr) 58px minmax(0, 1.3fr) 48px; align-items: center; gap: 10px; padding: 10px 14px; }
.ix-gh { background: var(--ix-accent-tint); color: var(--ix-accent); }
.ix-gr:not(.ix-gh) + .ix-gr { border-top: 1px solid var(--ix-line); }
.ix-gr .n { text-align: right; font-variant-numeric: tabular-nums; }
.ix-rank { margin-right: 4px; color: var(--ix-faint); }
.ix-meter { display: flex; align-items: center; gap: 8px; }
.ix-meter i { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--ix-surface-3); overflow: hidden; }
.ix-meter i::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 3px; background: var(--ix-ok); transition: width 1.3s cubic-bezier(.2, .7, .2, 1); }
.ix-meter b { min-width: 2.6em; text-align: right; font-size: 12px; font-weight: 500; color: var(--ix-ok-t); font-variant-numeric: tabular-nums; }
.ix-score[data-step="0"] .ix-meter i::after { width: 0; }
.ix-score[data-step="0"] .ix-callout { opacity: 0; }
.ix-score .ix-meter b { transition: opacity .4s ease .5s; }
.ix-score[data-step="0"] .ix-meter b { opacity: 0; transition-delay: 0s; }

/* To confirm (front desk): 0 empty → 1 the booking arrives (email + text) → 2 Confirm is tapped → 3 confirmed */
.ix-desk { padding-top: 46px; }
.ix-toast { position: absolute; top: 0; right: 22px; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 78%; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: opacity .35s ease, transform .35s ease; }
.ix-toast svg { width: 18px; height: 18px; color: var(--ix-accent); }
.ix-toast > span { min-width: 0; }
.ix-toast b { display: block; font-size: 12.5px; font-weight: 600; }
.ix-toast small { display: block; font-size: 11.5px; color: var(--ix-muted); }
.ix-desk[data-step="0"] .ix-toast { opacity: 0; transform: translateY(-8px); }
.ix-chip { justify-items: end; }
.ix-desk[data-step="1"] .c1, .ix-desk[data-step="2"] .c1, .ix-desk[data-step="3"] .c2 { opacity: 1; }
.ix-card { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ix-line-2); border-radius: 12px; background: var(--ix-surface); }
.ix-slot { display: grid; }
.ix-slot > * { grid-area: 1 / 1; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.ix-desk[data-step="1"] .w1, .ix-desk[data-step="2"] .w1, .ix-desk[data-step="3"] .w2 { opacity: 1; }
.ix-desk[data-step="0"] .w1 { transform: translateY(-8px); }
.ix-desk[data-step="2"] .w1 .ix-btn { transform: scale(.93); background: var(--ix-accent-hover); }
.ix-empty { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 8px 12px; border-radius: 12px; background: var(--ix-surface-2); text-align: center; }
.ix-empty-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ix-surface-3); color: var(--ix-muted); }
.ix-empty-ic svg { width: 13px; height: 13px; }
.ix-empty b { font-size: 12.5px; font-weight: 600; }
.ix-empty small { font-size: 11.5px; color: var(--ix-muted); }
.ix-list { display: grid; gap: 8px; }
.ix-desk .is-arriving { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease, transform .4s ease; }
.ix-desk[data-step="3"] .is-arriving { opacity: 1; transform: none; }

@media (max-width: 560px) {
  .ix-win { padding: 14px; }
  .ix-tr { grid-template-columns: 28px minmax(0, 1fr) 104px; padding: 9px 12px; }
  .ix-when, .ix-row .ix-btn, .ix-th .h-when, .ix-th .h-btn { display: none; }
  .ix-gr { grid-template-columns: minmax(0, 1fr) 50px 68px 38px; gap: 8px; padding: 9px 12px; }
  .ix-gh { font-size: 10px; letter-spacing: .03em; }
  .ix-meter { justify-content: flex-end; }
  .ix-meter i { display: none; }
  .ix-score .ix-k { white-space: normal; }
  .pp-ask { margin-top: 24px; padding-top: 20px; }
  .ix-num { font-size: 22px; }
  .ix-tsub { white-space: normal; }
  .ix-hero .ix-tsub { display: none; }
  .ix-callout { left: 12px; }
  .ix-toast { right: 8px; max-width: 92%; }
}

/* The numbers: plain text, the + and % in red, the digits count up once (stats: 0 → 1) */
.pp-stats { padding: clamp(40px, 6vw, 64px) 0; border-top: 1px solid var(--line); }
.pp-stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pp-stat { text-align: center; }
.pp-stat b { display: block; font-size: clamp(40px, 5vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.pp-stat b i { font-style: normal; color: var(--red); }
.pp-stat > span { display: block; margin-top: 12px; font-size: 16px; color: var(--text-2); text-wrap: balance; }
/* Phones: a compact table, numbers right-aligned in one column so the % signs line up, labels beside them */
@media (max-width: 560px) {
  .pp-stat-row { grid-template-columns: auto minmax(0, 1fr); gap: 18px 16px; align-items: center; max-width: 380px; margin: 0 auto; }
  .pp-stat { display: contents; }
  .pp-stat b { font-size: 40px; text-align: right; }
  .pp-stat > span { margin-top: 0; font-size: 15.5px; line-height: 1.4; text-align: left; text-wrap: pretty; }
}

/* Inside the app: two panels side by side */
.pp-show-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: start; }
.pp-show figure { margin: 0; }
.pp-show figcaption { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--text-2); text-align: center; }
@media (max-width: 980px) { .pp-show-grid { grid-template-columns: 1fr; gap: 48px; } }

/* The gap: one line, one number */
.section.pp-gap { padding: clamp(40px, 6vw, 64px) 0; }
.pp-gap-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 6vw, 80px); align-items: center; }
.pp-gap h2 { max-width: 620px; }
.pp-gap-note { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.pp-gap-stat b, .pp-gap-stat span, .pp-gap-stat small { display: block; }
.pp-gap-stat b { font-size: clamp(40px, 5vw, 60px); line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.pp-gap-stat span { margin-top: 10px; font-size: 16px; color: var(--text-2); }
.pp-gap-stat small { margin-top: 4px; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .pp-gap-grid { grid-template-columns: 1fr; } }

/* What it does: three breakouts */
.pp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pp-card { padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.pp-card svg { display: block; width: 22px; height: 22px; color: var(--red); }
.pp-card h3 { margin-top: 14px; font-size: 18px; }
.pp-card p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 860px) { .pp-cards { grid-template-columns: 1fr; } }

/* Proof, kept small: the client's iMessage, rebuilt as a bubble (iOS light: #e9e9eb, 18px radius, system font) */
.pp-proof .kicker { margin-bottom: 14px; }
.pp-msg { width: fit-content; max-width: 100%; margin: 0; }
.pp-msg-screen { padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.pp-bubble { display: inline-block; max-width: 100%; margin: 0; padding: 8px 14px; border-radius: 18px; background: #e9e9eb; color: #000; font: 400 17px/1.3 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif; letter-spacing: -.01em; }
.pp-msg figcaption { margin-top: 10px; font-size: 13px; color: var(--faint); }
.pp-fact { margin-top: 18px; font-size: 16px; color: var(--text); }
.pp-fact b { font-weight: 600; }

.pp-faq .qa-list { max-width: 820px; }

/* No prefers-reduced-motion switch: the animations play for everyone (Razvan, 18 Oct; Windows' "animation effects
   off" was freezing them for visitors who never chose it). They're short, transform/opacity only, and pause off screen. */