/* Eazy Signage landing — reads tokens.css roles only. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font:400 1rem/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:"Plus Jakarta Sans",Inter,sans-serif; line-height:1.15; margin:0 0 .5em; }
h1{ font-size:clamp(2rem,4.5vw,3.25rem); font-weight:800; }
h2{ font-size:clamp(1.5rem,3vw,2.25rem); font-weight:800; }
h3{ font-size:1.125rem; font-weight:700; }
p{ margin:0 0 1em; }
img{ max-width:100%; display:block; height:auto; }
.container{ max-width:1120px; margin:0 auto; padding:0 24px; }
section{ padding:80px 0; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- dark brand bands: near-black in BOTH themes (kit §7b) ---------- */
.band--dark{ background:var(--n-950); color:#FFFFFF;
             --focus:var(--v-300); }  /* v-500 ring is 2.28:1 on near-black (tokens.css note) */
.band--dark a{ color:var(--v-300); }
.band--dark a:hover{ color:var(--v-200); }
.band--dark .muted{ color:var(--n-300); }
.muted{ color:var(--ink-2); }

/* ---------- section-header rhythm (kicker + centered H2, uniform gap) ---------- */
.kicker{ display:block; text-align:center; color:var(--accent); font-weight:600;
         letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; margin-bottom:12px; }
.band--dark .kicker{ color:var(--v-300); }
section h2{ text-align:center; margin-bottom:.5em; }
section h2 + .muted{ text-align:center; max-width:56ch; margin:0 auto; }
.step-grid,.feature-grid,.shots,.quote-grid,.pricing-card,.faq,.stat-row{ margin-top:44px; }

/* ---------- nav ---------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--surface);
      border-bottom:1px solid var(--line); }
.nav .container{ display:flex; align-items:center; gap:32px; height:72px; }
.nav__logo img{ width:170px; }
/* Theme-aware lockup: full-color on light surfaces, all-white on dark (kit logo rules —
   same selector pattern as the tokens.css theme blocks). */
.nav__logo-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nav__logo-light{ display:none; }
  :root:not([data-theme="light"]) .nav__logo-dark{ display:block; }
}
:root[data-theme="dark"] .nav__logo-light{ display:none; }
:root[data-theme="dark"] .nav__logo-dark{ display:block; }
.nav__logo img.nav__logo-icon{ width:40px; display:none; }  /* mobile-only (kit: icon for mobile-scale) */
.nav .btn-primary{ white-space:nowrap; }  /* the bar is 72px tall — the CTA must stay one line */
.nav__links{ display:flex; gap:28px; margin-left:auto; list-style:none; padding:0; }
.nav__links a{ color:var(--ink-2); text-decoration:none; font-weight:500; }
.nav__links a:hover{ color:var(--ink); }

/* ---------- buttons (extends tokens.css recipes) ---------- */
.btn-primary{ display:inline-block; text-decoration:none; text-align:center;
              background:var(--v-500); color:#FFFFFF; }         /* filled violet keeps v-500 both themes */
.btn-primary:hover{ color:#FFFFFF; }
.btn-primary{ box-shadow:var(--shadow-sm); }
/* .band--dark a (0,1,1) out-specifies .btn-primary (0,1,0): without the rule
   below, dark-band CTAs would render violet-300 text on violet-500. */
.band--dark .btn-primary,
.band--dark .btn-primary:hover,
.band--dark .btn-primary:active{ color:#FFFFFF; }
.sms-cta{ font-size:1.125rem; padding:16px 28px; }

/* ---------- hero ---------- */
.hero{ padding:72px 0 88px; overflow:hidden; }  /* the shot may outgrow its column; never the page */
.hero__grid{ display:grid; grid-template-columns:minmax(0,10fr) minmax(0,11fr); gap:40px; align-items:center; }
.hero .kicker{ text-align:left; margin-bottom:14px; }
.hero h1{ text-align:left; }
.lede{ font-size:1.1rem; max-width:54ch; }
/* CTA + QR: one left-aligned unit on a shared vertical rhythm */
.hero__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:28px; }
.hero__cta .reassure{ font-size:.9rem; margin:0; }
.qr-chip{ display:inline-flex; align-items:center; gap:14px; margin-top:10px;
          border:1px solid var(--n-800); background:var(--n-900);
          border-radius:var(--r-card); padding:10px 18px 10px 10px; }
.qr-chip p{ margin:0; font-size:.9rem; max-width:16ch; line-height:1.4; }
.qr{ display:block; background:#FFFFFF; border-radius:var(--r-badge); padding:8px; width:88px; flex:none; }
.qr img{ width:100%; }
/* the art is wider than 16:9 and transparent — let it outscale the column for drama */
.hero__shot img{ width:118%; max-width:none; }

/* ---------- how it works ---------- */
.step-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
       padding:24px 28px 28px; display:flex; flex-direction:column; }
.step__art{ background:var(--accent-wash); color:var(--accent-ink); border-radius:var(--r-tile);
            display:flex; align-items:center; justify-content:center; padding:18px 0 14px;
            margin:0 0 20px; }
.step__head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.step__head h3{ margin:0; }
.step__num{ width:36px; height:36px; flex:none; border-radius:var(--r-pill); background:var(--accent-wash);
            color:var(--accent-ink); font-weight:700; display:flex; align-items:center;
            justify-content:center; }
.step p{ margin:0; }
.step .badge{ margin-left:6px; vertical-align:middle; }

/* ---------- proof / stats ---------- */
.proof{ text-align:center; padding:64px 0; background:var(--accent-wash); }
.proof h2{ margin-bottom:.35em; }
.stat-row{ display:flex; justify-content:center; align-items:stretch; }
.stat{ display:flex; flex-direction:column; gap:4px; padding:0 48px; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat__num{ font-family:"Plus Jakarta Sans",Inter,sans-serif; font-weight:800;
            font-size:clamp(2.1rem,3.4vw,2.75rem); line-height:1.1; color:var(--accent-ink); }
.stat__num small{ font-size:.45em; font-weight:600; }
.stat__label{ font-size:.9rem; color:var(--ink-2); }

/* ---------- features ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature{ padding:28px; display:flex; flex-direction:column; }
.feature p{ margin:0; }
.icon-tile{ width:48px; height:48px; flex:none; border-radius:var(--r-tile);
            background:var(--accent-wash); color:var(--accent-ink);
            display:flex; align-items:center; justify-content:center; margin-bottom:18px; }

/* ---------- screenshot band ---------- */
/* The graphics carry their own dark rounded-blob grounds; they float on the band
   inside radius-clipped tiles (no bezel chrome needed). */
.shots{ display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; }
.shot{ margin:0; }
.shot--wide{ grid-column:1 / -1; }
.shot img{ width:100%; border-radius:var(--r-tile); overflow:hidden; }
.shot figcaption{ text-align:center; color:var(--n-300); font-size:.95rem; margin-top:14px; }

/* ---------- pricing ---------- */
.pricing-card{ max-width:460px; margin-left:auto; margin-right:auto; text-align:center; padding:40px; }
.price{ font-family:"Plus Jakarta Sans",sans-serif; font-size:3.5rem; font-weight:800; margin:.1em 0; }
.price small{ font-size:1rem; font-weight:500; color:var(--ink-2); }
.pricing-card ul{ list-style:none; padding:0; margin:24px 0; text-align:left; }
.pricing-card li{ padding:9px 0 9px 30px; position:relative; border-bottom:1px solid var(--line-soft); }
.pricing-card li::before{ content:"✓"; position:absolute; left:2px; color:var(--ok); font-weight:700; }
.pricing-card .muted{ margin-bottom:0; }
.pricing-card > .muted + .btn-primary{ margin-top:24px; }
.pricing-card .btn-primary{ width:100%; }

/* ---------- quotes ---------- */
.quote-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.quote{ padding:26px 28px 24px; display:flex; flex-direction:column; }
.quote::before{ content:"\201C"; font-family:"Plus Jakarta Sans",Inter,sans-serif;
                font-size:3rem; line-height:.6; color:var(--accent); display:block;
                margin:8px 0 14px; }
.quote p:first-of-type{ font-size:1.05rem; margin-bottom:1.25em; }
.quote footer{ color:var(--ink-2); font-size:.9rem; margin-top:auto; padding-top:12px;
               border-top:1px solid var(--line-soft); }

/* ---------- faq ---------- */
.faq{ max-width:760px; margin-left:auto; margin-right:auto; }
.faq details{ background:var(--surface); border:1px solid var(--line);
              border-radius:var(--r-control); padding:16px 20px; margin-bottom:12px; }
.faq summary{ font-weight:600; cursor:pointer; list-style:none;
              display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; width:9px; height:9px; flex:none; margin-right:2px;
                     border-right:2px solid var(--ink-2); border-bottom:2px solid var(--ink-2);
                     transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
.faq details[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.faq details[open] summary{ color:var(--accent); margin-bottom:8px; }
.faq details p{ margin:8px 0 4px; }

/* ---------- final cta ---------- */
.cta-final{ text-align:center; }
.cta-final .lede{ margin:0 auto 1.75em; max-width:44ch; }
/* CTA, then QR chip, one centered column — never side by side */
.cta-final .sms-cta{ display:block; width:max-content; margin:0 auto; }
.cta-final .qr-chip{ margin-top:24px; text-align:left; }
.cta-final__tiles{ margin:56px auto 0; max-width:620px; }
.cta-final__tiles img{ border-radius:var(--r-tile); }
.cta-final__tiles figcaption{ font-size:.9rem; margin-top:14px; }

/* ---------- footer ---------- */
.footer{ padding:56px 0 32px; }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
.footer__grid ul{ list-style:none; padding:0; margin:0; }
.footer__grid li{ margin-bottom:10px; }
.footer img{ width:160px; }
.footer h3{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em;
            color:var(--n-400); margin-bottom:14px; }
.footer .tagline{ color:var(--n-300); margin-top:14px; max-width:26ch; }
.theme-toggle{ display:flex; gap:8px; margin-top:20px; }
.theme-toggle button{ background:transparent; border:1px solid var(--n-700); color:var(--n-300);
                      border-radius:var(--r-control); padding:6px 14px; cursor:pointer; }
.theme-toggle button[aria-pressed="true"]{ background:var(--v-500); color:#FFFFFF; border-color:transparent; }
.footer .legal{ border-top:1px solid var(--n-800); padding-top:24px; font-size:.85rem; color:var(--n-400); }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .step-grid,.feature-grid,.quote-grid{ grid-template-columns:1fr 1fr; }
  .hero__grid{ grid-template-columns:1fr; gap:8px; }
  .hero__shot{ order:2; margin-top:32px; }
  .hero__shot img{ width:100%; }         /* stacked: the art sits below the copy at column width */
  .shots{ grid-template-columns:1fr; }
  .shot--wide{ grid-column:auto; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .nav__links{ display:none; }        /* nav collapses to logo + CTA; anchor links live in footer */
  .nav .btn-primary{ margin-left:auto; }
}
@media (max-width:640px){
  section{ padding:56px 0; }
  .hero{ padding:56px 0 64px; }
  .step-grid,.feature-grid,.quote-grid{ grid-template-columns:1fr; }
  /* kit rule: horizontal lockup never below 140px — mobile gets the icon instead (spec §8) */
  .nav .nav__logo .nav__logo-light,
  .nav .nav__logo .nav__logo-dark{ display:none; }
  .nav .nav__logo .nav__logo-icon{ display:block; }
  .nav .container{ gap:16px; }        /* icon logo + one-line CTA must fit a 390px bar */
  .nav .btn-primary{ padding:11px 14px; }
  .qr-chip{ display:none; }           /* phones don't need a QR — they ARE the phone */
  .hero__cta .btn-primary{ width:100%; }
  .stat-row{ flex-direction:column; align-items:center; gap:24px; }
  .stat{ padding:0; }
  .stat + .stat{ border-left:0; }
  .cta-final__tiles{ margin-top:40px; }
  .footer__grid{ grid-template-columns:1fr; }
}