/* =========================================================
       Tokens — kept in sync with the rest of the Fizook pages
       ========================================================= */
    *,*::before,*::after{box-sizing:border-box}
    :root{
      --bg:#0b1220;
      --surface:#ffffff;
      --surface-2:#f8fafc;
      --border:#e5e7eb;
      --text:#0f172a;
      --muted:#64748b;
      --primary:#2481bc;
      --primary-dark:#1a6494;
      --success:#16a34a;
      --success-light:#dcfce7;
      --danger:#dc2626;
      --warn:#f59e0b;
      --accent:#7c3aed;
      --shadow-sm:0 1px 3px rgba(15,23,42,.10);
      --shadow:0 6px 20px rgba(15,23,42,.14);
      --shadow-lg:0 20px 48px rgba(15,23,42,.24);
      --radius:14px;
      --radius-sm:10px;
      --radius-lg:20px;
      --radius-button:6px;
    }
    html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--surface-2);scroll-behavior:smooth}
    /* Vendor-portal background gradients — amber + green (matches
       the vendor visual theme). The diner portal (index.html) uses
       purple + blue in the same positions. Stays visually distinct
       so vendors instantly know they're on the vendor side. */
    body{
      min-height:100vh;
      background:
        radial-gradient(900px 500px at 10% -10%, rgba(245,158,11,.10), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(22,163,74,.12), transparent 60%),
        radial-gradient(700px 420px at 50% 60%, rgba(245,158,11,.06), transparent 70%),
        #eef2f7;
    }
    img{max-width:100%;display:block}
    button{font-family:inherit}
    a{color:inherit}

    /* Scroll-progress bar — fixed 3px strip at top; width driven by JS. */
    .scroll-progress{
      position:fixed;top:0;left:0;height:3px;width:0%;z-index:90;
      background:linear-gradient(90deg,#22d3ee,#7c3aed,#16a34a);
      box-shadow:0 0 12px rgba(124,58,237,.5);
      transition:width .1s linear;
    }

    /* =========================================================
       Top bar — sticky nav (same as diner side, different links)
       =========================================================
       Only four nav links: How It Works / Build Offer / Sign Up / Log In.
       No Profile/History because vendors reach those via the vendor-side
       dashboard (fizook-vendor.html) instead. Includes a .live-status
       "N diners hungry" pill visible on ≥1100px. */
    .topbar{
      position:sticky;top:0;z-index:50;
      background:rgba(11,18,32,.92);backdrop-filter:saturate(1.4) blur(10px);
      color:#fff;border-bottom:1px solid rgba(255,255,255,.08);
    }
    .topbar-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 16px}

    /* --- Admin dropdown (Documentation / Vendor tools / Portals) ---
       Same discovery menu shipped across the whole app; toggled by JS
       below with outside-click and Escape handlers. */
    .admin-menu{position:relative;display:inline-block;flex:0 0 auto}
    .admin-btn{
      background:rgba(255,255,255,.08);color:#fff;border:0;
      border-radius:6px;padding:7px 12px;cursor:pointer;
      font-family:inherit;font-size:.92rem;font-weight:700;
      display:inline-flex;align-items:center;gap:8px;
      transition:background .15s ease;
    }
    .admin-btn:hover{background:rgba(255,255,255,.18)}
    .admin-btn[aria-expanded="true"]{background:rgba(255,255,255,.18)}
    .admin-btn > i.fa-cogs{color:#22d3ee;font-size:.95rem}
    .admin-btn .admin-caret{color:#cbd5e1;font-size:.78rem;margin-left:2px;transition:transform .2s ease}
    .admin-btn[aria-expanded="true"] .admin-caret{transform:rotate(180deg)}
    .admin-dropdown{
      position:absolute;top:100%;right:0;left:auto;
      margin-top:6px;min-width:210px;
      background:rgba(11,18,32,.98);
      border:1px solid rgba(255,255,255,.12);
      border-radius:10px;padding:6px;
      box-shadow:0 16px 40px rgba(0,0,0,.5);
      z-index:60;
    }
    .admin-dropdown[hidden]{display:none}
    .admin-link{
      display:flex;align-items:center;gap:10px;
      padding:9px 12px;border-radius:6px;
      color:#cbd5e1;text-decoration:none;
      font-size:.92rem;font-weight:600;
      transition:background .15s ease,color .15s ease;
    }
    .admin-link:hover{background:rgba(255,255,255,.10);color:#fff}
    .admin-link.active{background:rgba(34,211,238,.15);color:#fff}
    .admin-link i{color:#22d3ee;width:14px;text-align:center;font-size:.92rem}
    .admin-section-label{
      font-size:.66rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
      color:#94a3b8;padding:8px 12px 4px;
    }
    .admin-divider{
      height:1px;background:rgba(255,255,255,.10);margin:6px 4px;
    }
    /* Amber warning box shown inside the login card. Diners who
       accidentally sign in here get a one-click bail-out to the
       diner portal. Mirror of the same block on the diner side
       that sends restaurant owners over here. */
    .wrong-portal{
      display:flex;align-items:flex-start;gap:10px;
      padding:11px 14px;border-radius:12px;
      background:linear-gradient(135deg,rgba(245,158,11,.10),rgba(245,158,11,.04));
      border:1px solid rgba(245,158,11,.35);
      color:#92400e;font-size:.84rem;line-height:1.45;
      margin-top:12px;
    }
    .wrong-portal i{color:#b45309;font-size:1rem;margin-top:1px;flex:0 0 auto}
    .wrong-portal strong{color:#7c2d12;font-weight:800}
    .wrong-portal a{color:#b45309;font-weight:800;text-decoration:none;white-space:nowrap}
    .wrong-portal a:hover{text-decoration:underline}
    @media (max-width:559.98px){
      .admin-btn{padding:6px 10px;font-size:.86rem;gap:6px}
      .admin-btn-label{display:none}
    }
    .brand{
      font-weight:800;letter-spacing:.5px;font-size:1.25rem;
      display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
    }
    .brand .dot{
      width:10px;height:10px;border-radius:50%;
      background:linear-gradient(135deg,#22d3ee,#7c3aed);
      box-shadow:0 0 16px rgba(34,211,238,.7);
    }
    /* "N diners hungry near you right now" pill in the topbar.
       Vendor-specific — this side of the app leans hard on "there's
       demand waiting for you" as its core message. The count is
       auto-incremented in the JS every 4.5s for the alive-feeling
       effect. Only rendered on ≥1100px where there's horizontal room. */
    .live-status{
      display:none;align-items:center;gap:8px;font-size:.78rem;color:#cbd5e1;
      padding:5px 10px;border-radius:999px;background:rgba(34,197,94,.12);
      border:1px solid rgba(34,197,94,.25);
    }
    .live-status .pulse-dot{
      width:7px;height:7px;border-radius:50%;background:#22c55e;
      box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pulse 1.6s infinite;
    }
    /* Shared pulse keyframe — reused by hero tag + live peek tag + this pill. */
    @keyframes pulse{
      0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
      70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}
      100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
    }
    @media (min-width:1100px){.live-status{display:inline-flex}}
    .nav-toggle{margin-left:auto;background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:6px;padding:11px 14px;min-width:44px;min-height:44px;cursor:pointer}
    .topnav{display:none}
    .nav-link{
      background:transparent;border:0;font-family:inherit;color:#cbd5e1;
      text-decoration:none;font-size:.92rem;padding:6px 10px;border-radius:8px;
      display:inline-flex;align-items:center;gap:6px;cursor:pointer;
    }
    .nav-link:hover{background:rgba(255,255,255,.14);color:#fff}
    .nav-link.active{background:rgba(36,129,188,.25);color:#fff}
    @media (min-width:900px){
      .nav-toggle{display:none}
      .topnav{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
    }
    .topnav.open{
      display:flex;flex-direction:column;align-items:stretch;gap:2px;
      padding:8px 12px;background:rgba(11,18,32,.98);
      position:absolute;top:100%;left:0;right:0;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    @media (min-width:900px){.topnav.open{position:static;flex-direction:row;background:transparent;padding:0;border:0}}

    /* =========================================================
       Hero — vendor-themed split: pitch (left) + login card (right)
       =========================================================
       Same 2-column split as index.html but with a green→amber
       gradient background (vendor visual theme) instead of blue→purple.
       Two decorative floating blobs: green (top-left) and amber
       (bottom-right). Six falling emojis include vendor-relevant
       icons (🍴🏆🍳🥇) instead of only coins. */
    .hero{
      position:relative;overflow:hidden;
      background:linear-gradient(135deg,#0b1220,#15803d 45%,#f59e0b 110%);
      color:#fff;padding:60px 20px 80px;
    }
    /* Green/amber decorative blobs — clipped by .hero{overflow:hidden}. */
    .hero::before,.hero::after{
      content:"";position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;pointer-events:none;
    }
    .hero::before{width:340px;height:340px;background:#22c55e;top:-100px;left:-80px;animation:floatA 9s ease-in-out infinite}
    .hero::after {width:380px;height:380px;background:#f59e0b;bottom:-140px;right:-80px;animation:floatB 11s ease-in-out infinite}
    @keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(20px)}}
    @keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,-18px)}}

    /* --- Falling emoji column ---
       Six spans (💰🍴🏆🍳💵🥇) — vendor-themed to reinforce "food
       coming out, customers winning" instead of just "money falling".
       Positioned at fixed left-% columns, staggered animation delays. */
    .coin{position:absolute;font-size:1.4rem;opacity:.85;pointer-events:none;animation:coinFall linear infinite}
    .coin.c1{left:8%; top:-40px;animation-duration:9s; animation-delay:0s}
    .coin.c2{left:24%;top:-40px;animation-duration:11s;animation-delay:1.6s}
    .coin.c3{left:40%;top:-40px;animation-duration:8s; animation-delay:.8s}
    .coin.c4{left:62%;top:-40px;animation-duration:12s;animation-delay:3s}
    .coin.c5{left:78%;top:-40px;animation-duration:10s;animation-delay:2.2s}
    .coin.c6{left:92%;top:-40px;animation-duration:13s;animation-delay:4.5s}
    @keyframes coinFall{
      0%  {transform:translateY(-40px) rotate(0);opacity:0}
      10% {opacity:.9}
      90% {opacity:.9}
      100%{transform:translateY(110vh) rotate(720deg);opacity:0}
    }

    /* Hero content container — single column on phones, 1.1fr : 420px
       split at ≥980px (pitch dominates on desktop). */
    .hero-inner{
      position:relative;z-index:1;
      max-width:1240px;margin:0 auto;
      display:grid;gap:38px;align-items:center;
      grid-template-columns:1fr;
    }
    @media (min-width:980px){
      .hero-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,420px);gap:48px}
    }

    /* --- LEFT COLUMN: marketing pitch (slides in from the left) --- */
    .pitch{display:flex;flex-direction:column;gap:18px;animation:slideInL .7s ease both}
    @keyframes slideInL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
    /* "Live · diners are waiting" pill. Same white-on-transparent style
       as index.html (green background is on hero-tag on the diner page). */
    .hero-tag{
      display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
      background:rgba(255,255,255,.12);padding:6px 14px;border-radius:999px;
      font-size:.74rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
    }
    .hero-tag .pulse-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 1.6s infinite}
    /* Fluid headline — clamp() 1.9rem tiny → 3.4rem desktop. */
    .hero h1{
      margin:0;font-size:clamp(1.9rem,4.5vw,3.4rem);
      font-weight:800;letter-spacing:-1px;line-height:1.05;max-width:680px;
    }
    /* Vendor-side gradient text: cream → mint → lime (different palette
       from the diner side's cyan → purple → pink). Same shimmer via gradShift. */
    .hero h1 .gradient-text{
      background:linear-gradient(135deg,#fde68a 0%,#a7f3d0 50%,#bef264 100%);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      background-size:200% 200%;animation:gradShift 8s ease infinite;
    }
    @keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    .hero p.lead{margin:0;font-size:clamp(.95rem,1.4vw,1.1rem);line-height:1.55;opacity:.92;max-width:560px}
    /* Two-CTA row (Become a vendor / See how it works). */
    .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

    /* --- Mini stat pills row (below the CTA) ---
       "$0 to start / 0% upfront / Pay-per-win only" — three glass pills
       reinforcing the zero-risk value prop. */
    .pitch-stats{
      display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;
    }
    .pitch-stat{
      background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
      border-radius:10px;padding:8px 12px;
      backdrop-filter:saturate(1.4) blur(8px);
      display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;
    }
    .pitch-stat strong{font-weight:800;font-size:1rem}
    .pitch-stat.green strong{color:#a7f3d0}
    .pitch-stat.cyan  strong{color:#a5f3fc}
    .pitch-stat.pink  strong{color:#fbcfe8}

    /* --- RIGHT COLUMN: glassmorphic vendor login card ---
       Frosted white card that slides in from the right. ::before
       pseudo is a green→amber→gold halo behind the card (matching
       the vendor theme — diner side uses cyan→purple→pink). */
    .login-card{
      position:relative;
      background:rgba(255,255,255,.94);
      backdrop-filter:saturate(1.4) blur(10px);
      border:1px solid rgba(255,255,255,.6);
      color:var(--text);
      border-radius:var(--radius-lg);
      padding:24px 22px 22px;
      box-shadow:var(--shadow-lg);
      animation:slideInR .7s ease both;
    }
    @keyframes slideInR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
    /* Vendor-themed halo — green (success), amber (money), gold (win). */
    .login-card::before{
      content:"";position:absolute;inset:-1px;border-radius:var(--radius-lg);
      background:linear-gradient(135deg,rgba(34,197,94,.7),rgba(245,158,11,.7),rgba(251,191,36,.7));
      z-index:-1;filter:blur(14px);opacity:.55;
    }
    /* Card header — "Vendor sign in" + subtitle. */
    .login-head{text-align:center;margin-bottom:16px}
    .login-head h2{margin:0;font-size:1.4rem;font-weight:800;letter-spacing:-.3px}
    .login-head p{margin:4px 0 0;font-size:.86rem;color:var(--muted)}

    /* --- Form field primitives ---
       Standard label + input-wrap with absolute leading icon.
       Password fields also get a .pw-toggle eye button. */
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0}
    .field label{
      font-size:.7rem;color:var(--muted);text-transform:uppercase;
      letter-spacing:.6px;font-weight:700;
    }
    .input-wrap{position:relative}
    .input-wrap > i{
      position:absolute;left:12px;top:50%;transform:translateY(-50%);
      color:var(--muted);font-size:.95rem;pointer-events:none;
    }
    /* Base input. font-size:1rem (16px) prevents iOS Safari auto-zoom on focus. */
    .input{
      width:100%;font-family:inherit;color:var(--text);
      background:#fff;border:1px solid var(--border);border-radius:10px;
      padding:11px 12px 11px 36px;font-size:1rem;
      transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
    }
    .input:focus{
      outline:0;border-color:var(--primary);
      box-shadow:0 0 0 3px rgba(36,129,188,.18);
      background:#fff;
    }
    /* Show/hide password eye button. 40×40 tap target (meets iOS/Android minimums). */
    .pw-toggle{
      position:absolute;right:6px;top:50%;transform:translateY(-50%);
      width:40px;height:40px;border-radius:8px;border:0;background:transparent;color:var(--muted);
      cursor:pointer;display:grid;place-items:center;
      transition:background .15s ease,color .15s ease;
    }
    .pw-toggle:hover{background:#f1f5f9;color:var(--text)}

    /* "Remember me" checkbox (left) + "Forgot password?" link (right). */
    .row-inline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 14px;font-size:.86rem}
    .check-row{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--text)}
    .check-row input{accent-color:var(--primary);width:auto}
    .row-inline a{color:var(--primary);font-weight:700;text-decoration:none}
    .row-inline a:hover{text-decoration:underline}

    /* --- Button system —
       Same variant classes used across the Fizook surface (.btn-primary/
       -success/-ghost/-ghost-light). .btn-block spans full width,
       .btn-lg bumps padding for hero-sized CTAs. */
    .btn{
      appearance:none;border:0;cursor:pointer;font-weight:700;
      padding:11px 16px;border-radius:var(--radius-button);font-size:.95rem;
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      font-family:inherit;text-decoration:none;
      transition:transform .15s ease,box-shadow .15s ease,background .15s ease,opacity .15s ease;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:linear-gradient(135deg,#2481bc,#1a6494);color:#fff;box-shadow:0 4px 12px rgba(36,129,188,.32)}
    /* Green success = primary CTA on this page ("Sign in as vendor"). */
    .btn-success{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 6px 18px rgba(22,163,74,.4);position:relative;overflow:hidden}
    .btn-success::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
      transform:translateX(-100%);transition:transform .6s ease;pointer-events:none;
    }
    .btn-success:hover::after{transform:translateX(100%)}
    .btn-ghost{background:#f1f5f9;color:var(--text);border:1px solid var(--border)}
    .btn-ghost:hover{background:#e2e8f0}
    /* Dark-on-transparent variant for placement over the dark hero. */
    .btn-ghost-light{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
    .btn-ghost-light:hover{background:rgba(255,255,255,.26)}
    .btn-block{width:100%}
    .btn-lg{padding:13px 20px;font-size:1rem}

    /* "OR" divider between the email/password form and social buttons. */
    .or-divider{
      display:flex;align-items:center;gap:10px;margin:14px 0;
      color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.6px;
    }
    .or-divider::before,.or-divider::after{
      content:"";flex:1;height:1px;background:var(--border);
    }

    /* Social sign-in stack (Google / Facebook / Apple). Stub buttons —
       no OAuth wiring in this demo. */
    .social{display:grid;gap:8px}
    .btn-social{
      width:100%;background:#fff;color:#1f2937;border:1px solid var(--border);
      transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
    }
    .btn-social:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:#cbd5e1}
    .btn-social i{font-size:1.05rem;transition:transform .15s ease}
    .btn-social:hover i{transform:scale(1.15)}
    .btn-social.google i{color:#DB4437}
    .btn-social.facebook{background:#1877F2;color:#fff;border-color:transparent}
    .btn-social.facebook:hover{background:#1564d1}
    .btn-social.apple{background:#0f172a;color:#fff;border-color:transparent}
    .btn-social.apple:hover{background:#020617}

    /* "Not a Fizook vendor yet?" text below the social buttons. */
    .login-foot{
      text-align:center;margin-top:14px;font-size:.86rem;color:var(--muted);
    }
    .login-foot a{color:var(--primary);font-weight:700;text-decoration:none}
    .login-foot a:hover{text-decoration:underline}

    /* =========================================================
       Layout below hero — vertical spine holding stat/live/features
       =========================================================
       margin-top:-40px lifts the first below-fold section into the
       hero's bottom edge so it reads as a single composition. */
    .wrap{
      max-width:1240px;margin:-40px auto 0;padding:0 16px 60px;position:relative;z-index:2;
      display:grid;gap:32px;
    }

    /* =========================================================
       Stat strip — 4 counters (Covers / Win rate / $ won / Fee)
       =========================================================
       Same pattern as index.html. Numbers animate up from 0 via
       animateCount() in the JS, triggered by IntersectionObserver
       at 50% visibility. */
    .stat-strip{
      display:grid;gap:14px;
      grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius-lg);padding:22px;
      box-shadow:var(--shadow-lg);
      animation:cardIn .6s ease both;
    }
    .stat-tile{
      text-align:center;padding:14px 10px;border-radius:var(--radius);
      background:linear-gradient(180deg,rgba(36,129,188,.04),rgba(124,58,237,.04));
      border:1px solid rgba(36,129,188,.1);
      transition:transform .2s ease,box-shadow .2s ease;
    }
    .stat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .stat-tile .v{
      font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;letter-spacing:-.5px;line-height:1;
      background:linear-gradient(135deg,#2481bc,#7c3aed);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .stat-tile .v.green{background:linear-gradient(135deg,#16a34a,#15803d);-webkit-background-clip:text;background-clip:text;color:transparent}
    .stat-tile .v.amber{background:linear-gradient(135deg,#f59e0b,#b45309);-webkit-background-clip:text;background-clip:text;color:transparent}
    .stat-tile .v.cyan {background:linear-gradient(135deg,#22d3ee,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent}
    .stat-tile .k{margin-top:6px;font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px}

    /* =========================================================
       Section heads & reveal-on-scroll
       =========================================================
       .block gets a slide-up-fade on initial paint. .reveal
       elements start opacity:0 until the JS IntersectionObserver
       adds .in when they scroll into view. */
    section.block{animation:cardIn .6s ease both}
    @keyframes cardIn{
      0%{opacity:0;transform:translateY(20px)}
      100%{opacity:1;transform:translateY(0)}
    }
    .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
    .reveal.in{opacity:1;transform:translateY(0)}
    /* Shared centered header pattern (tag pill → h2 → lead). */
    .section-head{text-align:center;max-width:720px;margin:0 auto 22px}
    .section-tag{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(36,129,188,.10);color:var(--primary);
      padding:5px 12px;border-radius:999px;font-size:.7rem;font-weight:800;
      letter-spacing:.7px;text-transform:uppercase;
    }
    .section-head h2{margin:14px 0 10px;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.5px;line-height:1.15}
    .section-head p{margin:0;color:var(--muted);line-height:1.55;font-size:1rem}

    /* =========================================================
       Live peek — animated bidder-grid demo (vendor perspective)
       =========================================================
       Dark card showing an in-progress auction with the vendor's
       own tile ("YOU") mixed among the competitors. The tick loop
       in the JS drops each price and migrates the BEST badge to
       whichever tile is cheapest — so the demo often shows the
       vendor winning to reinforce the message. Green gradient
       background matches the vendor theme (blue on diner side). */
    .live-peek{
      background:linear-gradient(180deg,#0b1220,#15803d 80%,#0b1220);
      color:#fff;border-radius:var(--radius-lg);padding:30px 24px;
      box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
    }
    /* Green (top-left) + amber (bottom-right) corner glows — vendor theme. */
    .live-peek::before{content:"";position:absolute;left:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#22c55e,transparent 70%);opacity:.45;pointer-events:none}
    .live-peek::after {content:"";position:absolute;right:-40px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,#f59e0b,transparent 70%);opacity:.45;pointer-events:none}
    .live-peek-head{text-align:center;margin-bottom:18px;position:relative;z-index:1}
    .live-peek-head .tag{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;
      font-size:.7rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
    }
    .live-peek-head .tag .pulse-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:pulse 1.6s infinite}
    .live-peek-head h2{margin:12px 0 6px;font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.3px}
    .live-peek-head p{margin:0;opacity:.85;font-size:.95rem}
    /* Bidder tile grid — 3 columns on desktop, 2 on phones. Six .bd-card
       children (see markup below). One is pre-marked .best on load;
       the JS migrates that class every tick. */
    .bidder-grid-demo{
      position:relative;z-index:1;
      display:grid;gap:10px;grid-template-columns:repeat(3,1fr);
      max-width:680px;margin:0 auto;
    }
    @media (max-width:559.98px){.bidder-grid-demo{grid-template-columns:repeat(2,1fr)}}
    /* Single restaurant tile — glass card with initials logo → name →
       strike-through original → live price. .best variant adds the
       green ring + BEST badge (via ::after pseudo — no DOM change needed). */
    .bd-card{
      background:rgba(255,255,255,.06);
      backdrop-filter:saturate(1.4) blur(8px);
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px;padding:12px 10px;text-align:center;position:relative;overflow:hidden;
    }
    .bd-card.best{border-color:rgba(34,197,94,.7);box-shadow:0 0 0 2px rgba(34,197,94,.25)}
    /* BEST ribbon top-right of the current cheapest tile. */
    .bd-card.best::after{
      content:"BEST";position:absolute;top:6px;right:6px;
      font-size:.6rem;font-weight:800;letter-spacing:.5px;
      background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;
      padding:2px 6px;border-radius:999px;
    }
    /* Fake restaurant logo circle — colored gradient with initials.
       On this page one of them says "YOU" (the vendor's own tile) so
       the demo directly implicates the viewer. */
    .bd-logo{
      width:42px;height:42px;border-radius:50%;
      margin:0 auto 8px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.86rem;
    }
    .bd-logo.b1{background:linear-gradient(135deg,#ef4444,#b91c1c)}
    .bd-logo.b2{background:linear-gradient(135deg,#f59e0b,#b45309)}
    .bd-logo.b3{background:linear-gradient(135deg,#10b981,#047857)}
    .bd-logo.b4{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
    .bd-logo.b5{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}
    .bd-logo.b6{background:linear-gradient(135deg,#ec4899,#be185d)}
    .bd-name{font-size:.7rem;opacity:.8;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bd-was{font-size:.65rem;opacity:.65;text-decoration:line-through;display:block}
    /* Live price. JS toggles .flash on each tick to briefly scale + tint
       the number green — visual "just dropped" signal. */
    .bd-price{
      font-size:1rem;font-weight:800;color:#a5f3fc;
      transition:color .3s ease,transform .3s ease;
    }
    .bd-price.flash{color:#a7f3d0;transform:scale(1.18)}
    /* Two-CTA row below the demo grid (Build offer / See full auction). */
    .live-peek-foot{
      text-align:center;margin-top:18px;position:relative;z-index:1;
      display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
    }

    /* =========================================================
       "Why vendors choose Fizook" — 4 feature cards
       =========================================================
       Same visual pattern as index.html: white card + colored left
       stripe (::before) + soft corner glow (::after), both keyed to
       the inner icon color via :has(). Content is vendor-specific
       (No upfront cost / Fill quiet hours / Pre-qualified diners /
       Analytics). */
    .feature-grid{
      display:grid;gap:14px;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }
    .feature-card{
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius);padding:20px 20px 20px 24px;
      box-shadow:var(--shadow);
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
      position:relative;overflow:hidden;
    }
    .feature-card::before{
      content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
      background:linear-gradient(180deg,#2481bc,#1a6494);
      border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);
      z-index:1;
    }
    .feature-card::after{
      content:"";position:absolute;left:0;top:0;width:60%;height:140px;
      background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%);
      pointer-events:none;z-index:0;
    }
    .feature-card:has(.feature-icon.blue)::before  {background:linear-gradient(180deg,#2481bc,#1a6494)}
    .feature-card:has(.feature-icon.blue)::after   {background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%)}
    .feature-card:has(.feature-icon.purple)::before{background:linear-gradient(180deg,#7c3aed,#5b21b6)}
    .feature-card:has(.feature-icon.purple)::after {background:radial-gradient(ellipse at top left,rgba(124,58,237,.10),transparent 70%)}
    .feature-card:has(.feature-icon.green)::before {background:linear-gradient(180deg,#16a34a,#15803d)}
    .feature-card:has(.feature-icon.green)::after  {background:radial-gradient(ellipse at top left,rgba(22,163,74,.10),transparent 70%)}
    .feature-card:has(.feature-icon.amber)::before {background:linear-gradient(180deg,#f59e0b,#b45309)}
    .feature-card:has(.feature-icon.amber)::after  {background:radial-gradient(ellipse at top left,rgba(245,158,11,.10),transparent 70%)}
    .feature-card > *{position:relative;z-index:2}
    .feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#cbd5e1}
    .feature-icon{
      width:42px;height:42px;border-radius:11px;
      display:grid;place-items:center;color:#fff;font-size:1.05rem;
      box-shadow:var(--shadow-sm);transition:transform .25s ease;
    }
    .feature-card:hover .feature-icon{transform:rotate(-8deg) scale(1.08)}
    .feature-icon.blue{background:linear-gradient(135deg,#2481bc,#1a6494)}
    .feature-icon.purple{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
    .feature-icon.green{background:linear-gradient(135deg,#16a34a,#15803d)}
    .feature-icon.amber{background:linear-gradient(135deg,#f59e0b,#b45309)}
    .feature-card h3{margin:14px 0 6px;font-size:1.05rem;font-weight:800}
    .feature-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}

    /* =========================================================
       Audience picker — 3 vendor-flow entry cards
       =========================================================
       New vendor → sign up | Existing → offer builder | Returning
       → auction history. Same visual pattern as index.html's
       diner-side audience picker but different destinations. */
    .aud-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
    .aud-card{
      position:relative;overflow:hidden;
      background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius);padding:24px 24px 24px 28px;text-align:left;
      box-shadow:var(--shadow);
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
      display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
    }
    .aud-card::before{
      content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
      background:linear-gradient(180deg,#2481bc,#1a6494);
      border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);
      z-index:1;
    }
    .aud-card::after{
      content:"";position:absolute;left:0;top:0;width:60%;height:140px;
      background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%);
      pointer-events:none;z-index:0;
    }
    .aud-card.diner::before    {background:linear-gradient(180deg,#2481bc,#1a6494)}
    .aud-card.diner::after     {background:radial-gradient(ellipse at top left,rgba(36,129,188,.10),transparent 70%)}
    .aud-card.vendor::before   {background:linear-gradient(180deg,#f59e0b,#b45309)}
    .aud-card.vendor::after    {background:radial-gradient(ellipse at top left,rgba(245,158,11,.10),transparent 70%)}
    .aud-card.returning::before{background:linear-gradient(180deg,#16a34a,#15803d)}
    .aud-card.returning::after {background:radial-gradient(ellipse at top left,rgba(22,163,74,.10),transparent 70%)}
    .aud-card > *{position:relative;z-index:2}
    .aud-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#cbd5e1}
    .aud-card .aud-ico{
      width:44px;height:44px;border-radius:12px;
      display:grid;place-items:center;color:#fff;font-size:1.1rem;
      transition:transform .25s ease;
    }
    .aud-card:hover .aud-ico{transform:rotate(-8deg) scale(1.08)}
    .aud-card.diner    .aud-ico{background:linear-gradient(135deg,#2481bc,#1a6494)}
    .aud-card.vendor   .aud-ico{background:linear-gradient(135deg,#f59e0b,#b45309)}
    .aud-card.returning .aud-ico{background:linear-gradient(135deg,#16a34a,#15803d)}
    .aud-card h3{margin:6px 0 0;font-size:1.15rem;font-weight:800}
    .aud-card p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
    .aud-card .aud-link{
      margin-top:auto;display:inline-flex;align-items:center;gap:6px;
      color:var(--primary);font-weight:800;font-size:.88rem;
    }
    .aud-card .aud-link i{transition:transform .2s ease}
    .aud-card:hover .aud-link i{transform:translateX(4px)}

    /* =========================================================
       Final CTA — last-chance conversion band (green→teal gradient)
       ========================================================= */
    .final-cta{
      background:linear-gradient(135deg,#16a34a 0%,#15803d 50%,#0e7490 100%);
      color:#fff;border-radius:var(--radius-lg);
      padding:36px 26px;text-align:center;
      box-shadow:var(--shadow-lg);position:relative;overflow:hidden;
    }
    .final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 30% -20%, rgba(255,255,255,.18), transparent 70%);pointer-events:none}
    .final-cta h2{margin:0 0 8px;font-size:clamp(1.5rem,2.8vw,2rem);font-weight:800;letter-spacing:-.3px;position:relative;z-index:1}
    .final-cta p{margin:0 0 18px;opacity:.92;font-size:1rem;position:relative;z-index:1}
    .final-cta .cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

    /* =========================================================
       Footer — dark 4-column link grid + copyright bar
       ========================================================= */
    footer.fz-footer{background:#0b1220;color:#cbd5e1;border-top:1px solid rgba(255,255,255,.08);margin-top:32px}
    .fz-footer-inner{max-width:1240px;margin:0 auto;padding:40px 24px 24px;display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    .fz-footer h3{margin:0 0 12px;color:#fff;font-size:1.1rem;font-weight:800}
    .fz-footer h4{margin:0 0 12px;color:#fff;font-size:.92rem;font-weight:700;letter-spacing:.4px}
    .fz-footer p{margin:0 0 14px;font-size:.86rem;line-height:1.55;opacity:.8}
    .fz-footer ul{list-style:none;padding:0;margin:0}
    .fz-footer li{margin-bottom:8px}
    .fz-footer a{color:#cbd5e1;text-decoration:none;font-size:.86rem;transition:color .15s ease}
    .fz-footer a:hover{color:#fff}
    .fz-footer .socials{display:flex;gap:10px;margin-top:14px}
    .fz-footer .socials a{
      width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);
      display:inline-flex;align-items:center;justify-content:center;
      transition:background .2s ease,transform .2s ease;
    }
    .fz-footer .socials a:hover{background:rgba(34,211,238,.25);transform:translateY(-2px)}
    .fz-footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);
      max-width:1240px;margin:0 auto;padding:14px 24px;
      display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
      font-size:.78rem;opacity:.75;
    }
    .fz-footer-bottom a{color:#cbd5e1;text-decoration:none;margin-left:14px}

    /* =========================================================
       Responsive breakpoints — 3 tiers
       ========================================================= */

    /* Phone portrait — shrink hero + card padding. */
    @media (max-width:559.98px){
      .hero{padding:42px 18px 60px}
      .login-card{padding:20px 18px}
      .wrap{margin-top:-30px;padding:0 12px 36px;gap:24px}
      .stat-strip{padding:16px}
    }

    /* Tiny portrait phones (≤420, e.g. iPhone SE) — full-width stat pills. */
    @media (max-width:419.98px){
      .hero h1{font-size:1.6rem;line-height:1.1}
      .hero p.lead{font-size:.9rem}
      .pitch-stat{flex:1 1 100%;justify-content:center}
      .login-card{padding:18px 16px}
      .stat-tile .v{font-size:1.5rem}
    }

    /* Phone landscape (short viewport) — compress hero so the login
       card is reachable without scrolling past a giant gradient.
       Hides falling emojis to save vertical space. */
    @media (orientation:landscape) and (max-height:500px){
      .topbar-inner{padding:8px 14px}
      .hero{padding:22px 18px 32px}
      .hero::before,.hero::after{width:200px;height:200px}
      .hero-inner{gap:18px}
      .hero h1{font-size:1.6rem;line-height:1.1;letter-spacing:-.5px}
      .hero p.lead{font-size:.86rem}
      .pitch{gap:10px}
      .pitch-stats{gap:6px}
      .pitch-stat{padding:6px 10px;font-size:.78rem}
      .coin{display:none}
      .login-card{padding:18px 16px}
      .reg-head h2,.login-head h2{font-size:1.2rem}
      .field{margin-bottom:10px}
      .input{padding:9px 12px 9px 34px;font-size:1rem}
      .or-divider{margin:10px 0}
      .wrap{margin-top:18px;padding:0 16px 24px;gap:18px}
      .stat-strip{padding:14px}
      .stat-strip{grid-template-columns:repeat(4,1fr)}
      .stat-tile .v{font-size:1.5rem}
      .live-peek{padding:22px 18px}
      .feature-grid,.aud-grid{gap:10px}
      .feature-card,.aud-card{padding:16px}
      .final-cta{padding:24px 20px}
    }