/* ════════════════════
   00 · FONTS
   Self-hosted, so the site has no third-party origin at all: no DNS lookup,
   no TLS handshake, and one fewer thing that can be slow or blocked.

   These are VARIABLE fonts. Google serves one file per family and synthesises
   every weight from it — the per-weight URLs on fonts.gstatic.com are byte
   identical, which is why there are two files here and not seven. The
   consequence worth knowing: any weight in the range renders correctly, so
   adding a font-weight later needs no new download and cannot silently fall
   back to a synthesised approximation the way Inter 700 was doing.

   unicode-range is Google's "latin" subset, which covers every Spanish accent.
════════════════════ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter.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: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight.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;
}

/* ═══════════════════════════════════════════
   Valencia Guide — vlc-guide.com
   ═══════════════════════════════════════════ */

/* ─── TOKENS ─── */
:root {
  --cream:  #FFF5DB;
  --black:  #000000;
  --yellow: #FFEDBE;
  --white:  #FFFDF6;
  --pink:   #FFBEDD;
  --blue:   #DBE8FF;
  --radius: 16px;
  --font-h: 'Inter Tight', system-ui, sans-serif;
  --font-b: 'Inter', system-ui, sans-serif;
  /* Measured height of the sticky nav. site.js keeps this accurate once the
     webfont has loaded; this value is the pre-JS fallback. */
  --nav-h: 69px;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--black); font-family: var(--font-b); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; border-radius: 4px; }

/* ─── UTILS ─── */
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.tag {
  display: inline-block;
  font-family: var(--font-h);
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--yellow);
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 100px;
  padding: 4px 14px;
}
.btn {
  display: inline-block;
  font-family: var(--font-h); font-weight: 700; font-size: 15px;
  background: var(--black); color: var(--white);
  border: none; border-radius: 100px; padding: 14px 32px;
  cursor: pointer; transition: opacity .2s, transform .1s;
  text-align: center;
}
.btn:hover { opacity: .8; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-busy { opacity: .5; pointer-events: none; }
.btn-outline { background: transparent; color: var(--black); border: 1.5px solid var(--black); }
.btn-pink  { background: var(--pink);  color: var(--black); }
.btn-blue  { background: var(--blue);  color: var(--black); }
.section-label {
  font-family: var(--font-h); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .45; margin-bottom: 12px;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--black); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-family: var(--font-h); font-weight: 600; font-size: 14px;
}
.skip-link:focus { left: 0; top: 0; }

/* ════════════════════
   01 · NAV
════════════════════ */
nav.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 14px 0;
}
nav.site-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav-logo { font-family: var(--font-h); font-weight: 800; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a { font-size: 14px; opacity: .6; font-weight: 500; white-space: nowrap; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-cta { padding: 10px 22px; font-size: 13px; white-space: nowrap; }
.nav-links a.nav-cta { opacity: 1; }

/* ════════════════════
   02 · HERO
════════════════════ */
.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #1a1610;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('photo-hero.webp');
  background-size: cover; background-position: center;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 100%);
}
.hero-card {
  position: relative; z-index: 2;
  background: var(--cream); border-radius: 24px;
  padding: 48px 40px; max-width: 440px;
  width: calc(100% - 48px); text-align: left;
}
.hero-card h1 {
  font-family: var(--font-h); font-weight: 800;
  font-size: clamp(44px, 10vw, 68px);
  line-height: 1.0; letter-spacing: -.04em; margin-bottom: 16px;
}
.hero-card p { font-size: 16px; line-height: 1.6; opacity: .7; margin-bottom: 32px; }
.hero-card-actions { display: flex; flex-direction: column; gap: 10px; }
.hero-card-meta { margin-top: 16px; font-size: 12px; opacity: .4; font-family: var(--font-h); font-weight: 500; }
.hero-authors {
  position: absolute; bottom: 28px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 12px;
}
.hero-author-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 100px; padding: 6px 14px 6px 6px; color: #fff;
}
.hero-author-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yellow); overflow: hidden; flex-shrink: 0;
}
.hero-author-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-author-name { font-size: 13px; font-family: var(--font-h); font-weight: 600; }
.hero-author-handle { font-size: 11px; opacity: .55; }

/* ════════════════════
   03 · WHAT'S INSIDE
════════════════════ */
.inside { background: var(--cream); padding: 80px 0; }
.inside h2 { font-family: var(--font-h); font-weight: 800; font-size: 32px; letter-spacing: -.02em; margin-bottom: 8px; }
.inside-subtitle { font-size: 16px; opacity: .65; margin-bottom: 40px; }
.inside-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inside-card {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.08); padding: 24px;
}
.inside-card .icon { font-size: 28px; margin-bottom: 14px; }
.inside-card h3 { font-family: var(--font-h); font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.inside-card ul { list-style: none; }
.inside-card ul li {
  font-size: 14px; opacity: .7; padding: 5px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; gap: 8px;
}
.inside-card ul li::before { content: '+'; opacity: .35; flex-shrink: 0; }
.inside-stat {
  grid-column: 1 / -1;
  background: var(--black); color: var(--white);
  border-radius: var(--radius); padding: 32px;
  display: flex; align-items: center; justify-content: space-around;
}
.inside-stat-item { text-align: center; }
.inside-stat-num { font-family: var(--font-h); font-weight: 800; font-size: 36px; letter-spacing: -.03em; }
.inside-stat-label { font-size: 13px; opacity: .5; margin-top: 2px; }

/* ════════════════════
   04 · DEMO
════════════════════ */
.demo { padding: 80px 0; overflow: hidden; }
.demo .container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.demo-text h2 { font-family: var(--font-h); font-weight: 800; font-size: 32px; letter-spacing: -.02em; margin-bottom: 16px; }
.demo-text p { font-size: 16px; opacity: .7; margin-bottom: 28px; }
.demo-shot {
  width: 100%; height: 380px;
  object-fit: cover; object-position: center top;
  border-radius: var(--radius);
}

/* ════════════════════
   05 · PRICING
════════════════════ */
.pricing { background: var(--black); color: var(--white); padding: 80px 0; text-align: center; }
.pricing h2 { font-family: var(--font-h); font-weight: 800; font-size: 32px; letter-spacing: -.02em; margin-bottom: 48px; }
.pricing-card {
  background: var(--cream); color: var(--black);
  border-radius: 24px; padding: 48px 40px;
  max-width: 400px; margin: 0 auto; text-align: left;
}
.pricing-card-photo {
  margin: -48px -40px 32px;
  border-radius: 24px 24px 0 0;
  overflow: hidden; height: 200px;
}
.pricing-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.pricing-price { font-family: var(--font-h); font-weight: 800; font-size: 52px; letter-spacing: -.04em; line-height: 1; margin-bottom: 32px; }
.pricing-features { list-style: none; margin-bottom: 36px; }
.pricing-features li {
  font-size: 15px; padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex; gap: 10px; align-items: flex-start;
}
.pricing-features li .check { color: #3D9A3D; font-size: 16px; flex-shrink: 0; }
.pricing-cta { width: 100%; font-size: 16px; padding: 16px; border-radius: 100px; }
.pricing-note { font-size: 12px; opacity: .35; margin-top: 14px; text-align: center; }

/* ════════════════════
   06 · AUTHORS
════════════════════ */
.authors { padding: 80px 0; }
.authors .container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.authors-intro { grid-column: 1 / -1; }
.authors-intro h2 { font-family: var(--font-h); font-weight: 800; font-size: 32px; letter-spacing: -.02em; margin-bottom: 12px; }
.authors-intro p { font-size: 16px; opacity: .7; max-width: 500px; }
.author-card {
  background: var(--cream); border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.08); padding: 28px;
}
.author-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  overflow: hidden; border: 2px solid rgba(0,0,0,.08);
  margin-bottom: 14px; background: var(--yellow);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.author-name { font-family: var(--font-h); font-weight: 700; font-size: 16px; margin-bottom: 4px; }
/* An <a>, so it must not inherit the site's link colour and underline.
   It keeps the muted look of the name above it and only reveals itself as a
   link on hover and on keyboard focus. */
.author-handle {
  display: inline-block;
  font-size: 13px;
  opacity: .45;
  margin-bottom: 12px;
  color: inherit;
  text-decoration: none;
  transition: opacity .15s ease;
}
a.author-handle:hover,
a.author-handle:focus-visible { opacity: .9; text-decoration: underline; }
.author-bio { font-size: 14px; line-height: 1.55; opacity: .7; }

/* ════════════════════
   07 · FAQ  (native <details> accordion)
════════════════════ */
.faq { padding: 80px 0; background: var(--cream); }
.faq h2 { font-family: var(--font-h); font-weight: 800; font-size: 32px; letter-spacing: -.02em; margin-bottom: 40px; }
.faq-item { border-top: 1px solid rgba(0,0,0,.1); }
.faq-item:last-of-type { border-bottom: 1px solid rgba(0,0,0,.1); }
.faq-q {
  font-family: var(--font-h); font-weight: 700; font-size: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+'; font-size: 20px; opacity: .35; flex-shrink: 0;
  line-height: 1; transition: transform .2s;
}
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-a { font-size: 15px; opacity: .65; line-height: 1.6; padding: 0 32px 20px 0; }
.faq-a a { text-decoration: underline; }

/* ════════════════════
   08 · FOOTER
════════════════════ */
footer.site-footer { background: var(--black); color: var(--white); padding: 48px 0 32px; }
.footer-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap; margin-bottom: 40px;
}
.footer-logo { font-family: var(--font-h); font-weight: 800; font-size: 18px; }
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer-nav a { font-size: 14px; opacity: .5; transition: opacity .2s; }
.footer-nav a:hover { opacity: 1; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.footer-copy { font-size: 12px; opacity: .3; }

/* ════════════════════
   09 · MODAL  (free preview capture)
════════════════════ */
.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.modal-box {
  position: relative; z-index: 1;
  background: var(--cream); border-radius: 24px;
  padding: 40px 36px; width: 100%; max-width: 420px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  animation: modal-in .22s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal-box { animation: none; } }
.modal-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; opacity: .35; padding: 4px;
  font-family: var(--font-b);
}
.modal-close:hover { opacity: .8; }
.modal-box .modal-title { font-family: var(--font-h); font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin-bottom: 10px; padding-right: 24px; }
.modal-box p.modal-sub { font-size: 15px; opacity: .7; margin-bottom: 24px; }

/* ─── FORMS ─── */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-family: var(--font-h); font-weight: 600;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  opacity: .5; margin-bottom: 6px;
}
.field input[type=email], .field input[type=text] {
  width: 100%; font-family: var(--font-b); font-size: 16px;
  padding: 13px 16px; border-radius: 12px;
  border: 1.5px solid rgba(0,0,0,.18);
  background: var(--white); color: var(--black);
}
.field input:focus { outline: none; border-color: var(--black); }
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; opacity: .7; margin: 16px 0 20px; line-height: 1.5; }
.form-consent input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: #000; }
.form-consent a { text-decoration: underline; }
.form-submit { width: 100%; }
.form-msg { font-size: 14px; margin-top: 14px; line-height: 1.5; }
.form-msg.is-error { color: #B3261E; }
.form-msg.is-ok { color: #1F6F3F; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ─── SPINNER ─── */
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: -2px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════
   10 · PLAIN PAGES  (success, legal, 404)
════════════════════ */
.page { padding: 72px 0 96px; min-height: 60vh; }
.page-narrow { max-width: 720px; }
.page h1 { font-family: var(--font-h); font-weight: 800; font-size: clamp(32px, 6vw, 44px); letter-spacing: -.03em; margin-bottom: 16px; line-height: 1.1; }
.page h2 { font-family: var(--font-h); font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 36px 0 10px; }
.page h3 { font-family: var(--font-h); font-weight: 700; font-size: 16px; margin: 24px 0 8px; }
.page p, .page li { font-size: 15px; line-height: 1.7; opacity: .78; margin-bottom: 12px; }
.page ul, .page ol { padding-left: 22px; margin-bottom: 16px; }
.page li { margin-bottom: 6px; }
.page a:not(.btn) { text-decoration: underline; }
.page .updated { font-size: 13px; opacity: .4; margin-bottom: 32px; }
.page table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: 14px; }
.page th, .page td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.1); vertical-align: top; }
.page th { font-family: var(--font-h); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.page-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* success / download panel */
.panel {
  background: var(--cream); border-radius: 24px;
  padding: 40px 36px; margin: 28px 0;
  border: 1px solid rgba(0,0,0,.08);
}
.panel h2 { margin-top: 0; }
.panel p { margin-bottom: 12px; }
.download-row { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.download-note { font-size: 13px; opacity: .55; line-height: 1.6; }
.status-line { display: flex; align-items: center; gap: 10px; font-size: 15px; opacity: .7; }
.checkmark {
  width: 56px; height: 56px; border-radius: 50%;
  background: #E3F3E6; color: #1F6F3F;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin-bottom: 22px;
}

/* ════════════════════
   11 · CHECKOUT  (Stripe embedded, two columns)
════════════════════ */
.checkout-page { min-height: 100vh; background: var(--white); }
.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  max-width: 1080px; margin: 0 auto; min-height: calc(100vh - 69px);
}

/* left: what you are buying */
.checkout-summary {
  background: var(--cream);
  padding: 56px 48px 56px 24px;
  border-right: 1px solid rgba(0,0,0,.08);
}
.checkout-summary-inner { max-width: 420px; margin-left: auto; }
.checkout-eyebrow {
  font-family: var(--font-h); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; opacity: .45;
  margin-bottom: 10px;
}
.checkout-price {
  font-family: var(--font-h); font-weight: 800;
  font-size: 46px; letter-spacing: -.04em; line-height: 1; margin-bottom: 6px;
}
.checkout-price-note { font-size: 13px; opacity: .5; margin-bottom: 28px; }
.checkout-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 0; border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid rgba(0,0,0,.1); margin-bottom: 22px;
}
.checkout-item img {
  width: 64px; height: 64px; border-radius: 10px;
  object-fit: cover; flex-shrink: 0;
}
.checkout-item-name { font-family: var(--font-h); font-weight: 700; font-size: 15px; margin-bottom: 3px; }
.checkout-item-desc { font-size: 13px; opacity: .6; line-height: 1.5; }
.checkout-item-price { font-family: var(--font-h); font-weight: 700; font-size: 15px; margin-left: auto; white-space: nowrap; }
.checkout-features { list-style: none; margin-bottom: 24px; }
.checkout-features li {
  font-size: 14px; opacity: .75; padding: 5px 0;
  display: flex; gap: 9px; align-items: flex-start; line-height: 1.5;
}
.checkout-features li .check { color: #3D9A3D; flex-shrink: 0; }
.checkout-trust { font-size: 12.5px; opacity: .5; line-height: 1.65; }
.checkout-trust a { text-decoration: underline; }

/* right: the Stripe form */
.checkout-pay { padding: 56px 24px 56px 48px; }
.checkout-pay-inner { max-width: 460px; }
#stripe-checkout { min-height: 420px; }
.checkout-loading {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; opacity: .6; padding: 40px 0;
}
.checkout-error {
  background: var(--cream); border: 1px solid rgba(179,38,30,.3);
  border-radius: 14px; padding: 24px; font-size: 15px; line-height: 1.6;
}
.checkout-error h2 { font-family: var(--font-h); font-size: 18px; margin: 0 0 8px; }
.checkout-error a { text-decoration: underline; }
.checkout-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; opacity: .55; margin-bottom: 26px;
}
.checkout-back:hover { opacity: 1; }

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; min-height: 0; }
  .checkout-summary {
    padding: 32px 24px; border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .checkout-summary-inner { max-width: 100%; margin-left: 0; }
  .checkout-pay { padding: 32px 24px 56px; }
  .checkout-pay-inner { max-width: 100%; }
  .checkout-price { font-size: 38px; }
}

/* ════════════════════════════
   RESPONSIVE
   — laptop:  <=1280px
   — tablet:  <=768px
   — mobile:  <=480px
════════════════════════════ */
@media (max-width: 1280px) {
  .container { max-width: 680px; }
}

@media (max-width: 768px) {
  .container { max-width: 100%; padding: 0 32px; }
  .nav-links a:not(.btn) { display: none; }
  .nav-links { gap: 0; }
  .hero { min-height: 75vh; align-items: flex-end; padding-bottom: 80px; }
  .hero-card { max-width: 100%; width: calc(100% - 64px); padding: 36px 32px; }
  .hero-card h1 { font-size: clamp(36px, 8vw, 56px); }
  .hero-authors { bottom: 20px; }
  .inside { padding: 60px 0; }
  .inside-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .inside-stat { padding: 24px 20px; }
  .inside-stat-num { font-size: 28px; }
  .demo { padding: 60px 0; }
  .demo .container { grid-template-columns: 1fr; gap: 32px; }
  .demo-text { order: 1; }
  .demo-shot { order: 2; height: 280px; }
  .pricing { padding: 60px 0; }
  .pricing-card { padding: 40px 32px; }
  .pricing-card-photo { margin: -40px -32px 28px; border-radius: 24px 24px 0 0; }
  .authors { padding: 60px 0; }
  .authors .container { grid-template-columns: 1fr 1fr; }
  .faq { padding: 60px 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer-nav { gap: 16px; }
  .page { padding: 56px 0 72px; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .nav-cta { padding: 9px 18px; font-size: 12px; }
  /* The nav is sticky, so it occupies flow space above the hero. Subtract it
     or the author chips fall below the fold. */
  .hero { min-height: calc(100svh - var(--nav-h)); align-items: center; padding-bottom: 0; }
  .hero-card { width: calc(100% - 32px); padding: 28px 24px; border-radius: 20px; }
  .hero-card h1 { font-size: clamp(32px, 11vw, 44px); margin-bottom: 12px; }
  .hero-card p { font-size: 15px; margin-bottom: 24px; }
  .hero-card-actions .btn { font-size: 14px; padding: 13px 24px; }
  .hero-authors { bottom: 16px; flex-direction: column; align-items: center; gap: 8px; }
  .inside { padding: 48px 0; }
  .inside h2 { font-size: 26px; }
  .inside-grid { grid-template-columns: 1fr; gap: 10px; }
  .inside-stat { flex-wrap: wrap; padding: 20px; justify-content: space-around; }
  .inside-stat-item { flex: 0 0 50%; padding: 12px 0; }
  .inside-stat-num { font-size: 30px; }
  .demo { padding: 48px 0; }
  .demo-shot { height: 240px; }
  .demo-text h2 { font-size: 26px; }
  .pricing { padding: 48px 0; }
  .pricing h2 { font-size: 26px; margin-bottom: 32px; }
  .pricing-card { padding: 28px 20px; border-radius: 20px; }
  .pricing-card-photo { margin: -28px -20px 24px; height: 160px; border-radius: 20px 20px 0 0; }
  .pricing-price { font-size: 42px; margin-bottom: 24px; }
  .pricing-features li { font-size: 14px; }
  .pricing-cta { font-size: 15px; padding: 14px; }
  .authors { padding: 48px 0; }
  .authors .container { grid-template-columns: 1fr; }
  .authors-intro h2 { font-size: 26px; }
  .faq { padding: 48px 0; }
  .faq h2 { font-size: 26px; margin-bottom: 28px; }
  .faq-q { font-size: 15px; }
  .faq-a { font-size: 14px; }
  .footer-nav { flex-direction: column; gap: 12px; align-items: flex-start; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .modal { padding: 12px; }
  .modal-box { padding: 32px 24px; border-radius: 20px; }
  .panel { padding: 28px 22px; border-radius: 20px; }
}

/* ── Spacing utilities ──
   These replace style="" attributes. Inline styles need
   style-src 'unsafe-inline', which defeats the point of a CSP, so the
   pages carry no style attributes at all. */
.note-gap { margin-top: 14px; }
.note-gap-lg { margin-top: 18px; }
.no-gap-after { margin-bottom: 0; }

/* ════════════════════
   10 · COOKIE CONSENT
   Deliberately small and corner-pinned: no overlay, no focus trap, nothing
   covering the CTA. It sits above the sticky nav (100) and below the preview
   modal (500), so opening the modal hides it rather than stacking two things.
════════════════════ */
.consent {
  position: fixed; left: 16px; bottom: 16px; z-index: 300;
  width: calc(100% - 32px); max-width: 340px;
  background: var(--cream); color: var(--black);
  border: 1px solid rgba(0,0,0,.14); border-radius: 14px;
  padding: 14px 16px 13px;
  box-shadow: 0 6px 24px rgba(0,0,0,.16);
  animation: consent-in .24s ease-out;
}
.consent[hidden] { display: none; }
@keyframes consent-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

.consent-text { font-size: 13px; line-height: 1.45; opacity: .8; margin-bottom: 11px; }
.consent-text a { text-decoration: underline; }

.consent-actions { display: flex; gap: 8px; }
/* Both buttons are the same size and weight. Declining has to be as easy as
   accepting or the consent is not freely given, which makes it worthless. */
.consent-btn {
  flex: 1 1 0; cursor: pointer;
  font-family: var(--font-h); font-weight: 600; font-size: 13px;
  padding: 9px 12px; border-radius: 100px;
  border: 1.5px solid var(--black);
  transition: opacity .2s;
}
.consent-btn:hover { opacity: .75; }
.consent-yes { background: var(--black); color: var(--white); }
.consent-no  { background: transparent; color: var(--black); }

/* The mobile hero is exactly one screen tall and the author chips sit in its
   last 113px, with 9px of clear space above them — so there is nowhere to move
   either element to. Anything docked to the bottom overlaps them while it is
   open. Trimmed as far as it goes instead: tighter padding, smaller controls. */
@media (max-width: 768px) {
  .consent {
    left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none;
    padding: 11px 13px 11px;
  }
  .consent-text { font-size: 12.5px; margin-bottom: 9px; }
  /* 10px keeps the tap target near 38px. The height saved by going tighter
     buys nothing — the banner overlaps the chips at any height — and a
     cramped target is a real cost on a phone. */
  .consent-btn { padding: 10px 10px; font-size: 12.5px; }
}