/* ============================================================
   Vento LP design tokens
   Values marked (ad) are verbatim from _reference/feed.css /
   reels.css — do not tune them independently of the creatives.
   Type scale maps the 1080px ad canvas onto a fluid 390→1280
   viewport: mobile sizes are proportionally larger (as small
   screens require), desktop caps land on the ad's own values.
   ============================================================ */

/* ---- Google Fonts (inlined) ----------------------------------
   These @font-face blocks are the verbatim latin-subset css2
   response for Inter 400;600;700;800 + Newsreader 400;500 with
   display=swap. Inlining removes the render-blocking
   fonts.googleapis.com request from the LCP critical chain;
   the font files themselves are still served by Google Fonts
   (fonts.gstatic.com — pages preconnect + preload them). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.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;
}
/* Newsreader ships as a glyph-subsetted variable font (opsz 6..72 kept,
   wght pinned at the brand's display 500): printable ASCII + typographic
   punctuation (— – ‘ ’ “ ” · −). 41.6KB vs 132KB for the full latin file;
   the H1 is the LCP element, so Newsreader bytes gate LCP directly.
   Newsreader only renders headlines, whose copy is frozen in
   copy/lp-copy.md. To regenerate (e.g. after adding non-ASCII glyphs):
   css2?family=Newsreader:opsz,wght@6..72,500&display=swap&text=<chars>.
   This face also serves weight-400 requests (only face in the family). */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/l/font?kit=cY9VfjOCX1hbuyalUrK49dLafXjalZCsZBsSBjbPN_czSAxh0loWl-TJJu1sGx-XsWmR7hNzBdMTDIsJCP15xvUklcXM7IoH-A9Qz0xqK0xDHbZO0gHMyRhxHxl79zQjt75u2yDtj-2PGgw7Z_S-jhGwpp-iN-VwfG0u930UG27sBESBsR8GohqR6Qz483MVJj79ElBM&skey=e69ba3232be0ce27&v=v26) format('woff2');
  unicode-range: U+20-7e, U+b7, U+2013-2014, U+2018-2019, U+201c-201d, U+2212;
}

:root{
  /* ---- color (ad) ---- */
  --paper:#fff;
  --ink:#0d0d0c;
  --ink600:#565143;
  --ink500:#7e7969;
  --gray2:#8a8a86;
  --wash:#f6f6f4;
  --border:#e5e3db;
  --line:#efefef;
  --accent:#ff4d00;   /* one word per headline + CTA — nothing else */
  --green:#35b060;    /* positive "clock" line + decision-card accents only */
  --pos:#2f8a4d;
  --neg:#d5453b;

  /* ---- type ---- */
  --serif:'Newsreader',Georgia,serif;
  --sans:'Inter',ui-sans-serif,system-ui,sans-serif;

  --fs-display:clamp(2.5rem,10.2vw,5.5rem);          /* h1 · caps at 88px (ad .head) */
  --fs-display-2:clamp(1.875rem,5vw + .9rem,3.25rem);/* h2 */
  --fs-lead:clamp(1.0625rem,.95rem + .5vw,1.3125rem);/* hero sub / section lead */
  --fs-body:1.0625rem;
  --fs-eyebrow:.8125rem;
  --fs-small:.875rem;

  --lh-display:1.03;    /* (ad) */
  --lh-sub:1.42;        /* (ad) */
  --lh-body:1.55;
  --ls-display:-.02em;  /* (ad) */
  --ls-eyebrow:.17em;   /* (ad) */

  /* ---- space ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:3rem;  --sp-8:4rem;   --sp-9:6rem;
  --section-pad:clamp(4rem,6vw + 2rem,7.5rem);

  /* ---- shape + shadow (ad) ---- */
  --r-card:18px;
  --r-pill:999px;
  --shadow-card:0 24px 60px -28px rgba(13,13,12,.35);
  --shadow-cta:0 10px 34px -10px rgba(255,77,0,.55);

  /* ---- photography treatment (ad) ---- */
  --photo-filter:grayscale(1) contrast(1.07) brightness(.92);
  --scrim-hero:linear-gradient(178deg,rgba(13,13,12,.62) 0%,rgba(13,13,12,.10) 30%,rgba(13,13,12,.12) 55%,rgba(13,13,12,.88) 100%);

  /* focus ring color — dark contexts override to #fff */
  --focus-ring:var(--ink);
}

/* ============================================================
   Brand conventions (classes, not just variables)
   ============================================================ */

/* the one orange word per headline (ad .hot) */
.hot{color:var(--accent)}

/* eyebrow / kicker (ad .ey) — ink600 not ink500: 13px text needs AA 4.5:1 */
.eyebrow{
  font:600 var(--fs-eyebrow)/1.3 var(--sans);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--ink600);
  margin-bottom:var(--sp-5);
}

/* display headings (ad .head) */
.display-1,.display-2{
  font-family:var(--serif);
  font-weight:500;
  font-optical-sizing:auto;
  letter-spacing:var(--ls-display);
  line-height:var(--lh-display);
}
.display-1{font-size:var(--fs-display)}
.display-2{font-size:var(--fs-display-2)}

/* hero sub / section lead (ad .sub) */
.lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-sub);
  color:var(--ink600);
}
.lead b,.lead strong{font-weight:700;color:var(--ink)}

/* the positive green "clock" line (reels .clock) — the ONLY green text use.
   --pos on light backgrounds (AA); dark contexts restore --green (base.css). */
.clock{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:clamp(1.5rem,1.3rem + .8vw,1.75rem);
  color:var(--pos);
}

/* pill CTA (ad .ovcta): orange pill, trailing arrow, always "Book a demo" */
.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  background:var(--accent);
  color:#fff;
  font:700 1.1875rem/1 var(--sans);  /* 19px bold = WCAG large text on orange */
  padding:1.0625rem 2.125rem;
  border-radius:var(--r-pill);
  border:0;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow-cta);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-cta::after{content:"\2192";font-size:1.15em;line-height:1}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 14px 38px -10px rgba(255,77,0,.6)}
.btn-cta:active{transform:none;box-shadow:var(--shadow-cta)}