/* landing-1101: the front page's design tokens (SPEC §2). Task A owns this file; every landing stylesheet imports it.
 * Use the --lp-* names only; ask Task A before adding one. */
:root {
  /* surfaces: deep black, quiet panels one step up, hairline edges */
  --lp-page: #050505;            /* page behind everything */
  --lp-sheet: #070707;           /* the two rounded "sheets" */
  --lp-sheet-edge: rgba(255,255,255,.07);  /* 1px top/side hairline on sheets */
  --lp-card: #0d0d0d;            /* cards inside sheets  */
  --lp-card-2: #131313;          /* inner tiles, inputs */
  --lp-hover: #171717;           /* grey hover tile (owner rule) */
  --lp-hover-2: #202020;
  --lp-line: rgba(255,255,255,.07);
  --lp-line-2: rgba(255,255,255,.12);
  --lp-band: #030303;            /* the darkest band */

  /* text */
  --lp-ink: #fafafa;
  --lp-ink-2: #a3a3a3;           /* subcopy  */
  --lp-ink-3: #7a7a7a;           /* eyebrows, captions */
  --lp-ink-hero: rgba(255,255,255,.75);    /* hero lead */

  /* accent: white. Pure white for the emphasised word and the primary button, soft white light for glows and lit parts. */
  --lp-accent: #ffffff;
  /* the one orange left on the front page: the word "cheaper." in the hero headline (owner 2026-11-02) */
  --lp-orange: #f97316;
  --lp-glow: rgba(255,255,255,.07);        /* a soft glow behind a part */
  --lp-glow-2: rgba(255,255,255,.14);      /* a lit part's glow */
  --lp-edge-top: inset 0 1px 0 rgba(255,255,255,.06);   /* the faint highlight along a card's top edge */
  --lp-sheen: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 150px);   /* white-on-black depth, no colour */

  /* buttons */
  --lp-btn-primary-bg: #ffffff;  /* owner rule: primary buttons pure white */
  --lp-btn-primary-ink: #050505;
  --lp-btn-primary-hover: #e8e8e8;
  --lp-btn-ghost-ink: #d4d4d4;

  /* type */
  --lp-font-display: "Google Sans Flex", "Google Sans", "Product Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lp-font-serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --lp-font-body: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lp-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --lp-h1: 72px;  --lp-h1-lh: 1.1;  --lp-h1-ls: -0.025em;   /* 36px at ≤640 */
  --lp-h2: 48px;  --lp-h2-lh: 1.0;  --lp-h2-ls: -0.025em;   /* 30px/1.2 at ≤640 */
  --lp-h3: 24px;  --lp-h3-lh: 32px;                         /* step titles, 600 */
  --lp-h4: 18px;  --lp-h4-lh: 28px;                         /* feature card titles, 700 */
  --lp-lead: 20px; --lp-lead-lh: 32px;                      /* hero sub; 16/26 at ≤640 */
  --lp-sub: 18px;  --lp-sub-lh: 28px;                       /* section sub; 16/24 at ≤640 */
  --lp-body: 15px; --lp-body-lh: 24px;
  --lp-small: 14px; --lp-small-lh: 22px;
  --lp-eyebrow: 12px;  /* Geist 700, uppercase, letter-spacing .2em, --lp-ink-3 */

  /* layout */
  --lp-container: 1280px;  --lp-gutter: 24px;  /* 16px at ≤640 */
  --lp-content: 1024px;    /* card width */
  --lp-narrow: 768px;      /* FAQ */
  --lp-sub-max: 672px;     /* section subcopy max width */
  --lp-section-y: 96px;    /* 64px at ≤640 */
  --lp-nav-h: 64px;

  /* radii */
  --lp-r-sheet: 16px;  --lp-r-card: 16px;  --lp-r-frame: 20px;  --lp-r-tile: 12px;
  --lp-r-thumb: 10px;  --lp-r-chip: 10px;  --lp-r-pill: 999px;

  /* shadows */
  --lp-shadow-card: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 12px rgba(0,0,0,.5);
  --lp-shadow-frame: 0 40px 120px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08);
  --lp-shadow-cta: 0 60px 140px -20px rgba(0,0,0,.95), 0 40px 90px -20px rgba(0,0,0,.7);

  /* motion */
  --lp-ease: cubic-bezier(.2,.7,.2,1);
  --lp-reveal-dur: 600ms;

  /* grain (data: URIs are allowed by our img-src 'self' data:) */
  --lp-grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --lp-grain-streak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.11' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncA type='linear' slope='0' intercept='0.32'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* hero2: the calm black top and the product band under it (hero.css) */
  --lp-hero-bg: #030303;         /* announcement, nav and hero (a little grain on top brings it to the page's black) */
  --lp-hero-w: 1104px;           /* hero text column = the product frame's width, so their left edges line up */
  --lp-hero-h1: 64px; --lp-hero-h1-lh: 1.04; --lp-hero-h1-ls: -0.032em;   /* 40px at ≤640 */
  --lp-shadow-modal: 0 2px 6px rgba(0,0,0,.5), 0 30px 80px -24px rgba(0,0,0,.8), 0 70px 140px -50px rgba(0,0,0,.9);
  --lp-grain-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncA type='linear' slope='0' intercept='0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* The page's own art, all drawn here in CSS (no raster, no colour): concentric hairline rings that rise from below a band
   * like an orbit, and the soft white light they sit in. Used by the API band (hero.css) and the closing card (end.css).
   * The rings are 1px lines every 150px; each user fades them out with a radial mask. */
  --lp-rings: repeating-radial-gradient(circle at 50% 118%, transparent 0 149px, rgba(255,255,255,.1) 149px 150px);
  --lp-ring-fade: radial-gradient(75% 95% at 50% 118%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
  --lp-halo-top: radial-gradient(52% 62% at 50% 0%, rgba(255,255,255,.1), rgba(255,255,255,0) 72%);
  --lp-halo-low: radial-gradient(60% 70% at 50% 108%, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);

  /* the lower page (everything under the hero): calm near-black, quiet panels, lots of air */
  --lp-page-lower: #050505;      /* page colour below the hero */
  --lp-hero-end: #050505;        /* colour the hero ends on; the first lower section fades from it */
  --lp-surface: #0d0d0d;         /* panels and cards on the lower page */
  --lp-surface-2: #141414;       /* inner tiles inside a panel */
  --lp-surface-3: #1c1c1c;       /* pressed / selected inner tiles */
  --lp-hair: rgba(255,255,255,.07);        /* panel hairline */
  --lp-ink-soft: rgba(250,250,250,.78);    /* intro paragraphs */
  --lp-ink-muted: #9b9b9b;                 /* small grey card labels */
  --lp-wrap: 1104px;             /* lower-page content column */
  --lp-lower-y: 168px;           /* space between lower sections (96px on a phone) */
  --lp-intro-h: 38px;  --lp-intro-lh: 1.16;  --lp-intro-ls: -0.022em;
  --lp-r-panel: 28px;  --lp-r-media: 18px;
  --lp-grain-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0' intercept='0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
  :root { --lp-hero-h1: 40px; --lp-h1: 36px; --lp-h2: 30px; --lp-h2-lh: 1.2; --lp-lead: 16px; --lp-lead-lh: 26px; --lp-sub: 16px; --lp-sub-lh: 24px; --lp-gutter: 16px; --lp-section-y: 64px; --lp-lower-y: 96px; --lp-intro-h: 30px; --lp-intro-lh: 1.2; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  :root { --lp-h1: 56px; --lp-h2: 40px; --lp-section-y: 80px; --lp-lower-y: 128px; --lp-intro-h: 34px; }
}