/* ==========================================================================
   Arvano — site stylesheet

   Structure
   1. Tokens          design tokens, fluid between 1024px and 1600px
   2. Fonts           self-hosted variable fonts (OFL licensed)
   3. Base            reset, focus, typography scale
   4. Layout          .wrap, 12-column grid, section rhythm
   5. Surfaces        .field gradients, .card, .panel, .pill
   6. Navigation      sticky bar, logo, mobile menu
   7. Hero            headline grid, product window, phone window
   8. Content blocks  logo band, punctuation marks, comparisons, FAQ, pricing
   9. Footer
   10. Motion         reveal system (gated by html.js), reduced motion
   11. Responsive     tokens ≤1024, single column ≤768, transforms ≤900/≤640
   12. Utilities
   ========================================================================== */

/* 1. TOKENS ----------------------------------------------------------------
   Every fluid value interpolates between its size at 1024px and at 1600px,
   then clamps. One mechanism for the whole page, no breakpoints to maintain. */
:root {
  /* palette */
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-low: #F4F4F5;
  --text: #0A0A0A; --text-2: #52525B; --text-3: #71717A; --line: #E4E4E7;
  --accent: #68D1BF; --accent-text: #12796A; --ink-product: #0D121F; --brand-dot: #2DD4BF;
  /* elevation */
  --e1: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  --e2: 0 2px 4px rgba(0,0,0,.05), 0 20px 48px rgba(0,0,0,.06);
  --e3: 0 4px 8px rgba(0,0,0,.06), 0 40px 88px rgba(0,0,0,.08);
  /* gradient field: four stops, one warm */
  --f1: #7FD69E; --f2: #68D1BF; --f3: #6FC0DA; --f4: #F2C08D; --f-base: #9BDCCB;
  /* grid */
  --margin: 24px; --col: min(1360px, 84vw); --gutter: 24px;
  /* spacing, shared by every block */
  --s-block: clamp(72px, calc(72px + 40 * (100vw - 1024px) / 576), 112px);
  --s-title: clamp(36px, calc(36px + 16 * (100vw - 1024px) / 576), 52px);
  --s-lg: clamp(20px, calc(20px + 8 * (100vw - 1024px) / 576), 28px);
  --s-md: clamp(22px, calc(22px + 10 * (100vw - 1024px) / 576), 32px);
  --s-sm: clamp(12px, calc(12px + 4 * (100vw - 1024px) / 576), 16px);
  /* components */
  --card-pad: clamp(36px, calc(36px + 28 * (100vw - 1024px) / 576), 64px);
  --panel-pad: clamp(24px, calc(24px + 16 * (100vw - 1024px) / 576), 40px);
  --field-pad: clamp(24px, calc(24px + 16 * (100vw - 1024px) / 576), 40px);
  --stack-pad: clamp(36px, calc(36px + 28 * (100vw - 1024px) / 576), 64px);
  --band-h: clamp(150px, calc(150px + 66 * (100vw - 1024px) / 576), 216px);
  --r-card: 20px; --r-panel: 16px; --r-stack: 24px;
  /* buttons, one set for all */
  --btn-h: 42px; --btn-px: 23px; --btn-fs: 15px;
  /* typography: display > h1 > h2 > lead > body */
  --t-display: clamp(34px, calc(34px + 17 * (100vw - 1024px) / 576), 51px);
  --w-display: 400; --k-display: -.005em; --l-display: 1.15;
  --t-h1: clamp(28px, calc(28px + 12 * (100vw - 1024px) / 576), 40px); --w-h1: 400;
  --t-h2: clamp(22px, calc(22px + 6 * (100vw - 1024px) / 576), 28px);
  --t-lead: clamp(18px, calc(18px + 4 * (100vw - 1024px) / 576), 22px);
  --t-body: clamp(16px, calc(16px + 2 * (100vw - 1024px) / 576), 18px);
  /* the hero promise keeps its own size, independent of h2 */
  --t-promise: clamp(17px, calc(17px + 2 * (100vw - 1024px) / 576), 19px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* reveal travel distance */
  --rv-y: 24px;
}

/* 2. FONTS -----------------------------------------------------------------
   Self-hosted so no request leaves the origin (GDPR-safe, no render-blocking
   third-party CSS). Both families are variable fonts: one file per subset
   covers every weight used. */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 3. BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; margin: 0; padding: 0; background: none; border: 0; appearance: none; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
main:focus { outline: none; }
main[hidden] { display: none; }

/* skip link: visually hidden until focused */
.skip {
  position: absolute; left: var(--margin); top: -100px; z-index: 200;
  padding: 10px 16px; border-radius: 999px; background: var(--text); color: #fff; font-size: 14px; font-weight: 500;
}
.skip:focus { top: 14px; }

/* typography scale */
.display { font-size: var(--t-display); font-weight: var(--w-display); letter-spacing: var(--k-display); line-height: var(--l-display); margin: 0; }
h1, .h1 { font-size: var(--t-h1); font-weight: var(--w-h1); letter-spacing: -.008em; line-height: 1.12; margin: 0; }
h2, .h2 { font-size: var(--t-h2); font-weight: 500; letter-spacing: -.018em; line-height: 1.2; margin: 0; }
.body { font-size: var(--t-body); font-weight: 400; line-height: 1.6; margin: 0; color: var(--text-2); }
.label { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.meta { font-size: 14px; font-weight: 400; line-height: 1.4; margin: 0; color: var(--text-2); }
.meta b { font-weight: 600; color: var(--text); }
strong { color: var(--text); font-weight: 500; }

/* 4. LAYOUT ---------------------------------------------------------------- */
.wrap { width: var(--col); max-width: calc(100% - var(--margin) * 2); margin: 0 auto; }
/* the grid: 12 columns, one gutter. All text aligns to it. */
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
main { position: relative; padding-block-end: var(--s-block); }
main > section { position: relative; z-index: 1; padding-block-start: var(--s-block); }
/* end-of-block rule with two dots: only where two blocks of pure typography
   follow each other. Elsewhere a card or a band already marks the break. */
main > section.sep::before {
  content: ""; position: absolute; z-index: 0;
  top: calc(var(--s-block) / 2); left: 50%; transform: translateX(-50%); height: 5px;
  width: var(--col); max-width: calc(100% - var(--margin) * 2); pointer-events: none;
  background:
    radial-gradient(circle at 0 50%, var(--text-3) 0 2px, transparent 2.5px) left center / 9px 100% no-repeat,
    radial-gradient(circle at 100% 50%, var(--text-3) 0 2px, transparent 2.5px) right center / 9px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}
.mt-title { margin-block-start: var(--s-title); }
.mt-lg { margin-block-start: var(--s-lg); }
.mt-md { margin-block-start: var(--s-md); }
.mt-sm { margin-block-start: var(--s-sm); }
.rule { height: 1px; background: var(--line); }

.blocktitle { position: relative; }
.blocktitle::before {
  content: ""; position: absolute; left: -28px; top: 22px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent);
}

/* 5. SURFACES -------------------------------------------------------------- */
.field {
  position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--f-base);
  background-image:
    radial-gradient(58% 60% at 88% 84%, var(--f4) 0%, transparent 64%),
    radial-gradient(120% 92% at 14% 16%, var(--f1) 0%, transparent 58%),
    radial-gradient(112% 100% at 82% 26%, var(--f3) 0%, transparent 60%),
    radial-gradient(132% 112% at 46% 96%, var(--f2) 0%, transparent 68%);
}
.field--b { background-image:
    radial-gradient(56% 58% at 10% 88%, var(--f4) 0%, transparent 62%),
    radial-gradient(120% 92% at 84% 20%, var(--f1) 0%, transparent 58%),
    radial-gradient(112% 100% at 18% 34%, var(--f3) 0%, transparent 60%),
    radial-gradient(132% 112% at 58% 92%, var(--f2) 0%, transparent 68%); }
.field--c { background-image:
    radial-gradient(52% 66% at 94% 18%, var(--f4) 0%, transparent 62%),
    radial-gradient(126% 96% at 50% 8%, var(--f3) 0%, transparent 56%),
    radial-gradient(118% 104% at 8% 78%, var(--f1) 0%, transparent 62%),
    radial-gradient(126% 108% at 92% 84%, var(--f2) 0%, transparent 66%); }
.field--now { background-image:
    radial-gradient(96% 62% at 14% 6%, var(--f4) 0%, transparent 66%),
    radial-gradient(88% 58% at 92% 96%, var(--f4) 0%, transparent 62%),
    radial-gradient(96% 80% at 96% 8%, var(--f1) 0%, transparent 54%),
    radial-gradient(110% 92% at 6% 98%, var(--f2) 0%, transparent 58%); }
/* grain */
.field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--e1); padding: var(--card-pad); }
.card-field { box-shadow: var(--e2); padding: var(--field-pad); }
.card-field--tight { padding: 14px; }
.card-field > .panel { position: relative; z-index: 1; }
.card-major { box-shadow: var(--e3); }
.panel { background: var(--surface); border-radius: var(--r-panel); padding: var(--panel-pad); }
.panel--cta { padding: var(--s-title) var(--card-pad); }

.pill {
  display: inline-flex; align-items: center; height: var(--btn-h); padding: 0 var(--btn-px);
  border-radius: 999px; font-size: var(--btn-fs); font-weight: 500; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.pill--ink { background: var(--text); color: #fff; }
.pill--ink:hover { background: #26262B; }
.pill--ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.pill--ghost:hover { background: var(--surface-low); }

/* stage marker: same treatment as the field, only the stops change */
.stage { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; box-shadow: var(--e1); }

/* 6. NAVIGATION ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100; height: 72px;
  background: rgba(250, 250, 250, .8);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); transition: background-color .3s var(--ease);
}
.nav.is-scrolled { background: rgba(250, 250, 250, .92); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
/* the logo. Brand spec: Bricolage Grotesque, "a" at 800, "rvano" at 700, teal dot, -.03em tracking. */
.logo {
  display: inline-flex; font-family: "Bricolage Grotesque", "Schibsted Grotesk", sans-serif; font-size: 25px;
  letter-spacing: -.03em; color: var(--text); line-height: 1;
}
.logo-a, .logo-dot { font-weight: 800; }
.logo-rest { font-weight: 700; }
.logo-dot { color: var(--brand-dot); }
.navlinks { display: flex; gap: 32px; font-size: 15px; color: var(--text-2); }
.navlinks a { transition: color .2s var(--ease); }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--text); }
.navright { display: flex; align-items: center; gap: 12px; }

/* mobile menu: a button toggles the sheet; state lives in aria-expanded */
.burger {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface); flex: 0 0 auto;
}
.burger i { display: block; width: 17px; height: 1.5px; background: var(--text); position: relative; transition: background-color .25s var(--ease); }
.burger i::before, .burger i::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--text);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.burger i::before { top: -5px; }
.burger i::after { top: 5px; }
.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }
.sheet {
  position: fixed; inset: 60px 0 0; z-index: 99; background: var(--bg); padding: var(--s-md) 0;
  display: none; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.sheet.is-open { display: flex; }
.sheet a { display: block; padding: 16px var(--margin); font-size: 22px; font-weight: 500; letter-spacing: -.01em; border-bottom: 1px solid var(--line); }
.sheet a:last-child { border-bottom: 0; }
.sheet .sheet-low { color: var(--text-2); }
body.menu-open { overflow: hidden; }

/* 7. HERO ------------------------------------------------------------------
   Headline and promise share a baseline; the product fills the column below. */
#hero { padding-block-start: var(--s-block); }
.hero-top { align-items: baseline; }
.hero-head { grid-column: 1 / 7; }
.hero-promise { grid-column: 8 / 13; font-size: var(--t-promise); font-weight: 400; letter-spacing: 0; line-height: 1.45; color: var(--text-2); margin: 0; }
.hero-product { position: relative; padding-block-end: 104px; }

/* product window, modelled on the real app: icon rail, tab bar, the video fills
   the surface and the assistant card floats over it. */
.mock {
  position: relative; border-radius: var(--r-stack); background: var(--ink-product);
  box-shadow: var(--e2); overflow: hidden; display: grid; grid-template-columns: 72px minmax(0, 1fr);
}
.mdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; flex: 0 0 auto; }
.mdot--sm { width: 6px; height: 6px; }
.rail { border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 20px 0; }
.rail .ic { width: 22px; height: 22px; color: rgba(255,255,255,.34); }
.rail .ic.on { color: var(--accent); }
.rail .me {
  margin-top: auto; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6);
}
.mock-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
.mock-timer { display: flex; align-items: center; gap: 9px; }
.mock-time { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.mock-tabs { display: flex; gap: 8px; font-size: 13px; color: rgba(255,255,255,.42); background: rgba(255,255,255,.05); border-radius: 999px; padding: 5px 6px; }
.mock-tabs span { padding: 5px 11px; border-radius: 999px; }
.mock-tabs span.on { background: rgba(255,255,255,.09); color: rgba(255,255,255,.88); }

.vstage { position: relative; padding: 0 22px 14px; }
.video { position: relative; aspect-ratio: 1.85; border-radius: 16px; overflow: hidden; background: #243040; border: 1.5px solid var(--accent); }
.video img { width: 100%; height: 100%; object-fit: cover; }
.video > img { position: absolute; inset: 0; object-position: 53% 34%; }
/* veil: seats the card on the image and unifies the top of the frame */
.video::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56%; z-index: 1;
  background: linear-gradient(rgba(8,12,18,.5), rgba(8,12,18,.22) 62%, rgba(8,12,18,0));
}
.self {
  position: absolute; right: 12px; bottom: 12px; width: 19%; aspect-ratio: 16 / 10; border-radius: 12px;
  overflow: hidden; background: #141C26; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 26px rgba(0,0,0,.45); z-index: 3;
}
.namelabel {
  position: absolute; left: 10px; top: 12px; font-size: 11px; font-weight: 500; color: #fff;
  background: rgba(10,14,20,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 4px 9px; border-radius: 6px; z-index: 2;
}
.self .namelabel { left: 6px; top: auto; bottom: 5px; font-size: 9px; padding: 3px 7px; border-radius: 5px; }

/* the pair over the video: what the prospect just said, then the answer */
.overlay {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); top: 20px;
  width: min(620px, 78%); display: flex; flex-direction: column; align-items: center; gap: 11px;
}
.said {
  width: 100%; display: flex; align-items: baseline; gap: 12px;
  background: rgba(12,17,24,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 10px; padding: 10px 14px;
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.said .who { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.36); flex: 0 0 auto; }
.said p { margin: 0; flex: 1; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.72); }
.said .stamp { font-size: 11px; color: rgba(255,255,255,.3); white-space: nowrap; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sugg {
  width: 100%; transition: opacity .5s var(--ease), transform .5s var(--ease);
  background: rgba(22,28,38,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 16px 18px; box-shadow: 0 18px 44px rgba(0,0,0,.42);
}
.sugg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 9px; }
.sugg .eyebrow, .livecard .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.sugg .delta, .livecard .delta { font-size: 13px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.sugg .line { font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; }
.sugg .why, .livecard .why { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.45); margin-top: 7px; }
.chips { display: flex; gap: 8px; white-space: nowrap; }
.pt {
  font-size: 12px; font-weight: 500; color: rgba(255,255,255,.78); background: rgba(22,28,38,.86);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.09); border-radius: 999px; padding: 7px 13px;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.ask {
  margin: 0 22px 12px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 13px 16px; font-size: 13px; color: rgba(255,255,255,.4);
}
.ask .send { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.09); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); }
.controls { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 22px 20px; }
.ctl { width: 38px; height: 38px; border-radius: 999px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.66); }
.ctl svg { width: 17px; height: 17px; }
.end { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #fff; background: #D9483F; padding: 11px 18px; border-radius: 999px; margin-left: 14px; }

/* phone window: same product, other channel. Proves the "phone" half of the
   headline. Same ink, same radius, smaller and in front of the video window. */
.phonewin {
  position: absolute; left: calc(var(--margin) * -1.4); bottom: 0; width: min(340px, 30%);
  background: var(--ink-product); border: 1px solid #1E2735; border-radius: 20px; box-shadow: var(--e3); z-index: 4; overflow: hidden;
}
.pw-top { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.pw-t { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.pw-tab { margin-left: auto; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.88); background: rgba(255,255,255,.09); padding: 5px 11px; border-radius: 999px; }
.pw-body { padding: 22px 20px 16px; text-align: center; }
.pw-txt { display: block; }
.pw-av { width: 60px; height: 60px; border-radius: 50%; background: #2C3A36; color: #fff; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.pw-num { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 15px 0 0; font-size: 19px; font-weight: 600; color: #fff; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pw-num svg { color: var(--accent); flex: 0 0 auto; }
.pw-name { margin: 5px 0 0; font-size: 14px; font-weight: 400; color: rgba(255,255,255,.5); }
.pw-ctl { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px 20px; }
.pw-hang { width: 40px; height: 40px; border-radius: 50%; background: #DD524C; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: 5px; }

/* 8. CONTENT BLOCKS -------------------------------------------------------- */
/* logo band */
.logoband { background: var(--surface-low); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logoband .wrap { position: relative; height: var(--band-h); display: flex; flex-direction: column; justify-content: center; gap: var(--s-md); }
.logos { display: flex; align-items: center; justify-content: space-between; }
.logos span { font-size: 24px; font-weight: 600; letter-spacing: -.015em; color: var(--text-3); }
/* logos are monochrome, sized to the cap height of the words */
.logos .lg { width: auto; opacity: .9; }
.lg-yavin { height: 33px; }
.lg-fullwhere { height: 25px; }
.lg-enrow { height: 26px; }
.lg-napplied { height: 31px; }

/* punctuation: the same object returns three times, alternating sides.
   It gives the page a rhythm instead of a flat sequence. */
.punct { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-md); align-items: stretch; }
.punct > .card, .punct > .field { grid-column: 1 / 10; }
.punct > .mark { grid-column: 10 / 13; }
.punct--left > .card, .punct--left > .field { grid-column: 4 / 13; }
.punct--left > .mark { grid-column: 1 / 4; order: -1; }
.mark { position: relative; align-self: stretch; }
.mark .field { position: absolute; border-radius: var(--r-card); }
.mark .m1 { left: 0; top: 0; width: 56.25%; height: 56.25%; box-shadow: var(--e1); }
.mark .m2 { left: 18.75%; top: 18.75%; width: 62.5%; height: 62.5%; box-shadow: var(--e2); }
.mark .m3 { left: 31.25%; top: 31.25%; width: 68.75%; height: 68.75%; box-shadow: var(--e3); }
.punct--left .mark .m1 { left: auto; right: 0; }
.punct--left .mark .m2 { left: auto; right: 18.75%; }
.punct--left .mark .m3 { left: auto; right: 31.25%; }

/* testimonial byline */
.byline { display: flex; align-items: center; gap: 16px; }
.ava { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--line); }

/* the four questions */
.q-row { padding-block-start: var(--s-md); }
.q-rule { height: 1px; background: var(--line); transform-origin: left center; }

/* two columns answering each other */
.cmp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.cmp > *:first-child { grid-column: 1 / 7; }
.cmp > *:last-child { grid-column: 7 / 13; }
.wlist { margin: 0; padding: 0; list-style: none; }
.wlist li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); line-height: 1.55; color: var(--text-2); }
.wlist li:first-child { padding-top: 0; }

/* results: a number, a sentence */
.res { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: baseline; padding: var(--s-md) 0; border-bottom: 1px solid var(--line); }
.res .who { grid-column: 1 / 4; font-size: var(--t-h2); font-weight: 500; letter-spacing: -.008em; }
.res .what { grid-column: 4 / 11; font-size: var(--t-body); color: var(--text-2); line-height: 1.55; }

/* the bill: three lines of spend closing on one */
.sum { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.sum > * { grid-column: 1 / 7; }
.sum > *:last-child { grid-column: 8 / 13; }
.bill { margin: 0; padding: 0; list-style: none; }
.bill li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--text-2); }
.bill li:first-child { padding-top: 0; }
.bill li b { font-weight: 400; }
.bill li.tot { border-bottom: 0; padding-top: 20px; font-weight: 500; color: var(--text); }

/* the comparison: four moments, two columns answering line by line */
.cmp-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.cmp-head p:first-child { grid-column: 4 / 8; }
.cmp-head p:last-child { grid-column: 8 / 13; }
.mrow { margin-block-start: var(--s-lg); }
.mgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; padding-block-start: var(--s-md); }
.mgrid .k { grid-column: 1 / 4; font-size: var(--t-lead); font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 14px; margin: 0; }
.mgrid .body { grid-column: 4 / 8; }
.mgrid .body.on { grid-column: 8 / 13; color: var(--text); }

/* one agent per line */
.alone { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: baseline; padding-block-start: var(--s-md); }
.alone .k { grid-column: 1 / 4; font-size: var(--t-lead); font-weight: 500; color: var(--text); display: flex; align-items: center; gap: 14px; }
.alone .body { grid-column: 4 / 10; max-width: none; }

/* FAQ: native details/summary, keyboard accessible, indexable, no JS */
.faq { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: baseline;
  padding: var(--s-md) 0; font-size: var(--t-lead); font-weight: 500; color: var(--text); line-height: 1.35; transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { grid-column: 1 / 8; }
.faq summary::after {
  content: ""; grid-column: 12; justify-self: end; align-self: center; width: 13px; height: 13px;
  background:
    linear-gradient(var(--text-3), var(--text-3)) center / 13px 1.5px no-repeat,
    linear-gradient(var(--text-3), var(--text-3)) center / 1.5px 13px no-repeat;
  transition: background-size .3s var(--ease);
}
.faq[open] summary::after { background-size: 13px 1.5px, 1.5px 0; }
.faq summary:hover { color: var(--accent-text); }
.faq .a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-block-end: var(--s-md); }
.faq .a p { grid-column: 1 / 8; font-size: var(--t-body); color: var(--text-2); line-height: 1.6; margin: 0; }

/* pricing */
.amount { display: block; font-size: clamp(46px, calc(46px + 26 * (100vw - 1024px) / 576), 72px); font-weight: 400; letter-spacing: -.02em; line-height: 1; margin: 0; }
.pr-title { display: block; }
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--t-body); color: var(--text-2); }
.ticks li i { font-style: normal; color: var(--accent-text); flex: 0 0 auto; }

/* the three moments, all visible, no tabs: this block IS the argument */
.row-a { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; }
.row-a > * { grid-column: span 4; display: flex; flex-direction: column; }
.row-2 > :first-child { grid-column: 1 / 7; }
.row-2 > :last-child { grid-column: 7 / 13; }
/* "during" stands out by depth, never by colour */
.row-a > .card-field { padding: 14px; }
.row-a .panel { padding: var(--panel-pad); flex: 1; display: flex; flex-direction: column; }
.always { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: baseline; }
.always > .a-head { grid-column: 1 / 4; }
.always > .a-body { grid-column: 4 / 11; }
.always--wide > .a-head { grid-column: 1 / 5; }
.always--wide > .a-body { grid-column: 5 / 12; }

/* product captures: they sit in the card like a window, top-left corner
   visible, the rest running off bottom and right */
.shot { margin-top: auto; border-radius: var(--r-panel); background: var(--surface-low); border: 1px solid var(--line); padding: 18px; min-height: 186px; overflow: hidden; display: flex; flex-direction: column; }
.shot .chip { display: inline-block; align-self: flex-start; background: var(--ink-product); color: #fff; font-size: 12px; font-weight: 500; padding: 7px 13px; border-radius: 6px; }
.shot .chip--now { background: var(--accent-text); }
.shot img { width: 100%; margin-top: 14px; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--e1); }
/* the live card: same object as in the hero */
.shot--live { background: var(--ink-product); border-color: #1E2735; }
.livecard { margin-top: 14px; background: rgba(22,28,38,.9); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 15px 16px; box-shadow: 0 18px 44px rgba(0,0,0,.42); }
.livecard .line { font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; }

/* usages */
.usages { display: flex; align-items: baseline; gap: var(--s-md); flex-wrap: wrap; }
.u-side { display: flex; align-items: baseline; gap: var(--s-md); flex-wrap: wrap; }
.u-split { flex: 0 0 auto; font-size: var(--t-h2); font-weight: 400; color: var(--text-3); }
.usages span { font-size: var(--t-h2); font-weight: 400; letter-spacing: -.008em; color: var(--text-3); }
.usages .keep { font-size: calc(var(--t-h2) * 1.6); line-height: 1.05; letter-spacing: -.008em; color: var(--accent-text); white-space: nowrap; }

/* the three after-call artefacts: notes, follow up, next step */
.stackpanel { border-radius: var(--r-stack); padding: var(--stack-pad); }
.stack { display: flex; flex-direction: column; gap: var(--gutter); }
.note { background: var(--surface); border-radius: var(--r-panel); padding: 18px; box-shadow: var(--e2); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.note .chipmeta { justify-self: start; background: var(--ink-product); color: #fff; font-size: 13px; font-weight: 500; padding: 7px 15px; border-radius: 6px; }
/* fade on the right: cropped lines read as a continuation, not a bug */
.note .win { position: relative; display: block; border-radius: 10px; border: 1px solid var(--line); overflow: hidden; }
.note .win::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 14%; background: linear-gradient(90deg, rgba(246,248,252,0), rgba(246,248,252,1)); }
.note img { width: 100%; }

/* 9. FOOTER ---------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding-block: var(--s-block) var(--s-md); margin-block-start: var(--s-block); }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.foot-brand { grid-column: 1 / 5; }
.foot-col { grid-column: span 2; }
.foot-col:nth-of-type(2) { grid-column: 7 / 9; }
.foot-col:nth-of-type(3) { grid-column: 9 / 11; }
.foot-col:nth-of-type(4) { grid-column: 11 / 13; }
.foot h4 { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s-sm); }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { padding: 6px 0; }
.foot a { font-size: 15px; color: var(--text-2); transition: color .2s var(--ease); }
.foot a:hover { color: var(--text); }
.foot-legal { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-block-start: var(--s-block); padding-block-start: var(--s-md); border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }

/* 10. MOTION ---------------------------------------------------------------
   Nothing is hidden until the script adds html.js. If the script fails, the
   page loses its animations, never its content. Only opacity and transform
   animate, so every reveal runs on the compositor. */
.rv { transition: opacity .66s var(--ease), transform .66s var(--ease); }
.js .rv { opacity: 0; transform: translateY(var(--rv-y)); }
.rv.in { opacity: 1; transform: none; }
/* generic reveal: any title, paragraph or row settles on entering the screen.
   Shorter and quieter than .rv, which is reserved for objects. */
.ru { transition: opacity .62s var(--ease), transform .62s var(--ease); }
.js .ru { opacity: 0; transform: translateY(14px); }
.ru.in { opacity: 1; transform: none; }
/* the hero sequence plays on load */
.js .said, .js .sugg { opacity: 0; transform: translateY(8px); }
.js .sugg { transform: translateY(10px); }
.js .pt { opacity: 0; transform: translateY(6px); }
.said.in, .sugg.in, .pt.in { opacity: 1; transform: none; }
/* the four questions: rule draws, text sharpens */
.q-rule { transition: transform .36s var(--ease); }
.js .q-rule { transform: scaleX(0); }
.q-rule.in { transform: scaleX(1); }
.q-text { transition: opacity .36s var(--ease); }
.js .q-text { opacity: .4; }
.q-text.in { opacity: 1; }
.keep { transition: opacity .3s var(--ease); }
.js .keep { opacity: 0; }
.keep.in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rv, .ru, .said, .sugg, .pt, .q-text, .keep { opacity: 1 !important; transform: none !important; transition: none !important; }
  .q-rule { transform: none !important; transition: none !important; }
  .nav, .pill, .navlinks a, .foot a, .faq summary, .faq summary::after, .burger i, .burger i::before, .burger i::after { transition: none !important; }
}

/* 11. RESPONSIVE ------------------------------------------------------------
   Three layers. 1) Tokens keep shrinking below 1024 down to 360 instead of
   freezing. 2) Below 768 the 12-column grid becomes one column. 3) Three
   objects do not shrink, they transform: the product window, the phone
   window and the with/without comparison. */

/* touch targets */
@media (pointer: coarse) {
  :root { --btn-h: 44px; }
}

/* 1. tokens keep descending to 360 */
@media (max-width: 1024px) {
  :root {
    --margin: 20px;
    --col: min(1360px, 92vw);
    --gutter: 16px;
    --s-block: clamp(56px, calc(56px + 16 * (100vw - 360px) / 664), 72px);
    --s-title: clamp(26px, calc(26px + 10 * (100vw - 360px) / 664), 36px);
    --s-lg: clamp(16px, calc(16px + 4 * (100vw - 360px) / 664), 20px);
    --s-md: clamp(16px, calc(16px + 6 * (100vw - 360px) / 664), 22px);
    --s-sm: clamp(10px, calc(10px + 2 * (100vw - 360px) / 664), 12px);
    --card-pad: clamp(24px, calc(24px + 12 * (100vw - 360px) / 664), 36px);
    --panel-pad: clamp(20px, calc(20px + 4 * (100vw - 360px) / 664), 24px);
    --field-pad: clamp(20px, calc(20px + 4 * (100vw - 360px) / 664), 24px);
    --stack-pad: clamp(20px, calc(20px + 16 * (100vw - 360px) / 664), 36px);
    --t-display: clamp(30px, calc(30px + 4 * (100vw - 360px) / 664), 34px);
    --t-h1: clamp(24px, calc(24px + 4 * (100vw - 360px) / 664), 28px);
    --t-h2: clamp(19px, calc(19px + 3 * (100vw - 360px) / 664), 22px);
    --t-lead: clamp(17px, calc(17px + 1 * (100vw - 360px) / 664), 18px);
    --t-body: 16px;
    --t-promise: clamp(16px, calc(16px + 1 * (100vw - 360px) / 664), 17px);
  }
  .hero-top { display: flex; flex-direction: column; gap: var(--s-md); align-items: flex-start; }
  .hero-head { display: contents; }
  .hero-top .display, .hero-top .pr-h1 { order: 1; }
  .hero-promise { order: 2; }
  .hero-head > .mt-md { order: 3; margin-block-start: 0; }
  .row-a > *, .row-a.row-2 > * { grid-column: span 12; }
  .usages { flex-direction: column; align-items: flex-start; }
  .u-split { align-self: flex-start; }
  .mark { display: none; }
  .punct > .card, .punct > .field, .punct--left > .card, .punct--left > .field { grid-column: 1 / -1; }
}

/* 2. below 768, one column */
@media (max-width: 768px) {
  :root { --rv-y: 16px; }
  .blocktitle { padding-left: 22px; }
  .blocktitle::before { left: 0; top: 12px; width: 10px; height: 10px; }

  /* every 12-column grid collapses, including explicit placements */
  .g12, .cmp, .sum, .res, .mgrid, .cmp-head, .row-a, .foot-grid, .always, .punct, .alone {
    grid-template-columns: 1fr !important; gap: var(--s-md) !important;
  }
  .g12 > *, .cmp > *, .sum > *, .res > *, .mgrid > *, .cmp-head > *, .row-a > *, .foot-grid > *, .always > *, .punct > *, .alone > * {
    grid-column: 1 / -1 !important;
  }

  /* FAQ: question and sign stay on one line */
  .faq summary { grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
  .faq summary span { grid-column: 1; }
  .faq summary::after { grid-column: 2; }
  .faq .a { grid-template-columns: 1fr; }
  .faq .a p { grid-column: 1; }

  .bill li { gap: 14px; }

  /* logo band becomes a two-column grid */
  .logoband .wrap { height: auto; padding-block: var(--s-md); }
  .logos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px var(--s-md); justify-content: start; }
  .logos span { font-size: 17px; }
  .lg-yavin { height: 23px; } .lg-enrow { height: 18px; } .lg-napplied { height: 22px; } .lg-fullwhere { height: 18px; }
  .note { grid-template-columns: 1fr; gap: 12px; }

  .u-side { gap: var(--s-sm); }
  .usages .keep { font-size: calc(var(--t-h2) * 1.35); }
  .foot-legal { flex-direction: column; gap: 8px; }
  .amount { font-size: 44px; }

  /* the comparison: two columns become two stacked blocks, each with its
     own label, otherwise the reader loses track of which one they are in */
  .cmp-head { display: none; }
  .mgrid .k { font-size: var(--t-h2); margin-block-end: 4px; }
  .mgrid .body::before { content: "Without Arvano"; display: block; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
  .mgrid .body.on::before { content: "With Arvano"; color: var(--accent-text); }
  .mgrid .body.on { margin-block-start: var(--s-sm); }

  /* navigation: links move into the sheet */
  .nav { height: 60px; }
  .navlinks { display: none; }
  .navright .pill--ghost { display: none; }
  .burger { display: flex; }
}

/* 3. the objects that transform */
@media (max-width: 900px) {
  /* product window: rail and tabs go, the card stays ON the video */
  .mock { grid-template-columns: 1fr; }
  .rail, .mock-tabs { display: none; }
  .mock-top { padding: 14px 16px; }
  .vstage { padding: 0 12px 12px; }
  .video { aspect-ratio: 3 / 2; }
  .overlay { left: 20px; right: 20px; top: 18px; bottom: auto; width: auto; transform: none; z-index: 5; gap: 9px; align-items: stretch; }
  /* the card takes the top: the prospect's name moves to the bottom */
  .video > .namelabel { top: auto; bottom: 10px; }
  /* the prospect line: label above the quote, timestamp top right */
  .said { flex-direction: column; align-items: flex-start; gap: 4px; position: relative; padding: 11px 14px; }
  .said .stamp { position: absolute; right: 14px; top: 11px; font-size: 10px; }
  .said p { font-size: 15px; }
  .said .who { font-size: 9px; }
  .sugg { border-radius: 12px; padding: 13px 14px; }
  .sugg .line { font-size: 16px; }
  .sugg .why { font-size: 12px; margin-top: 5px; }
  .sugg .eyebrow { font-size: 9px; }
  .sugg .delta { font-size: 12px; }
  .chips { flex-wrap: wrap; justify-content: flex-start; gap: 7px; }
  .pt { font-size: 11px; padding: 6px 11px; }
  .self { width: 30%; right: 10px; bottom: 10px; }
  .ask { margin: 0 12px 10px; font-size: 12px; }
  .controls { gap: 7px; padding: 0 12px 16px; flex-wrap: wrap; }
  .ctl { width: 34px; height: 34px; }
  .end { padding: 10px 15px; font-size: 12px; margin-left: 6px; }

  /* phone window: no longer overflows, it sits below the video */
  .hero-product { padding-block-end: 0; }
  .phonewin { position: static; width: 100%; margin-block-start: var(--s-md); border-radius: 18px; box-shadow: var(--e2); }
  .pw-body { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; }
  .pw-av { width: 44px; height: 44px; font-size: 14px; margin: 0; }
  .pw-num { margin: 0; justify-content: flex-start; font-size: 17px; }
  .pw-name { margin-top: 3px; font-size: 13px; }
  .pw-txt { min-width: 0; }
  .pw-ctl { padding: 0 18px 18px; justify-content: flex-start; }
}

@media (max-width: 640px) {
  /* on a phone the card keeps the essentials: what was said, and the answer */
  .chips { display: none; }
  .pw-body { padding: 14px 16px; gap: 12px; }
  .pw-av { width: 40px; height: 40px; font-size: 13px; }
  .pw-num { font-size: 16px; }
  .pw-ctl { padding: 0 16px 16px; gap: 8px; }
  .video { aspect-ratio: 3 / 4; }
  .self { width: 36%; right: 8px; bottom: 8px; }
}

@media (min-width: 769px) {
  .sheet, .burger { display: none !important; }
}

/* 12. UTILITIES ------------------------------------------------------------ */
.accent { color: var(--accent-text); }
.mw-300 { max-width: 300px; }
.mw-660 { max-width: 660px; }
.mw-760 { max-width: 760px; }
.mw-820 { max-width: 820px; }
.mw-860 { max-width: 860px; }
.mw-960 { max-width: 960px; }
.mw-1040 { max-width: 1040px; }
/* a label and its content always keep the same gap, whatever sits below.
   Last in the sheet so it wins over margin:0 resets. */
.label + *:not(.label) { margin-block-start: var(--s-md); }