/* LobbyUp public landing v4.2 (Phiz edits Nov 11, 2026, 2:07 PM CT; wordmark enlarged, line 4 emphasis).
   Ported from the QA-passed mock. Own file so the cache-first SW cannot serve a stale copy. */
:root{--brand:#0f3550;--navy2:#0a2236;--accent:#0b6fa0;--sky:#7cc4ea;--soft:#e4f1f8;--ink:#16222c;--ink2:#3e4c58;--pass:#1c8a4b;--kill:#c22d2d;--watch:#1565c0;--line:#dde3e9;--gold:#ffb703}
*{box-sizing:border-box;margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.logo{font-weight:800;font-size:clamp(40px,4.6vw,56px);letter-spacing:-.02em;color:#fff;white-space:nowrap}.logo b{color:var(--sky)}
.cta{display:inline-block;background:var(--gold);color:#0a2236;text-decoration:none;font-weight:800;border-radius:999px;padding:18px 34px;font-size:20px;box-shadow:0 10px 30px rgba(255,183,3,.35)}
.cta.sm{padding:10px 20px;font-size:15px;box-shadow:none}
.cta.blue{background:var(--accent);color:#fff;box-shadow:0 10px 30px rgba(11,111,160,.3)}
section{padding:96px 0;position:relative}
h1{font-size:clamp(52px,6.4vw,96px);line-height:.98;letter-spacing:-.05em;font-weight:900}
h2{font-size:clamp(42px,5vw,72px);line-height:1;letter-spacing:-.045em;font-weight:900}
.eyebrow{font-weight:800;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.sub{font-size:clamp(22px,2.2vw,28px);color:var(--ink2);line-height:1.35;margin:22px 0 34px;max-width:720px}
/* HERO */
.hero{background:radial-gradient(1200px 600px at 85% 10%,#1d5f8a 0%,transparent 60%),linear-gradient(160deg,#0f3550,#0a2236 70%);color:#fff;padding:0 0 56px;overflow:hidden}
.hero .eyebrow{color:var(--sky)}
.hero h1{font-size:clamp(20px,2.4vw,30px);line-height:1.15;letter-spacing:-.03em;font-weight:800}
.hero .sub{color:#fff;font-size:clamp(44px,5.2vw,64px);line-height:1.08;letter-spacing:-.04em;font-weight:900;margin:10px 0 22px;max-width:none;overflow-wrap:normal;word-break:normal;hyphens:none}
.herogrid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start;margin-top:8px}
.ar{display:inline-flex;gap:8px;font-weight:800;color:#0a2236;background:var(--sky);border-radius:999px;padding:8px 16px;font-size:15px;margin-bottom:22px}
.arbrand{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;padding:5px 14px 5px 5px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;line-height:1}
.arbrand .flag{width:56px;height:37px;flex:0 0 auto;display:block;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.arbrand .state{width:26px;height:auto;flex:0 0 auto;display:block}
.arbrand b{font-weight:800;font-size:15px;letter-spacing:.01em;color:#fff}
.free{display:inline-block;font-weight:900;font-size:clamp(24px,2.4vw,32px);color:var(--gold);margin:22px 0 30px}
.stack{position:relative;height:440px}
.bill{position:absolute;left:0;right:0;background:#fff;color:var(--ink);border-radius:20px;padding:22px 24px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.bill .t{font-weight:800;font-size:22px}.bill .d{color:#5b6977;font-size:16px;margin-top:6px}
.pill{display:inline-block;color:#fff;font-weight:800;border-radius:999px;padding:6px 14px;font-size:15px;float:right}
.b1{top:0;transform:rotate(-3deg)}.b2{top:140px;left:30px;right:-30px;transform:rotate(2deg)}.b3{top:280px;left:-10px;right:10px;transform:rotate(-1deg)}
.alert{position:absolute;right:-6px;top:-18px;background:var(--gold);color:#0a2236;font-weight:900;border-radius:14px;padding:10px 14px;font-size:15px;box-shadow:0 12px 24px rgba(0,0,0,.3);z-index:3}
.stat{display:flex;gap:28px;align-items:baseline;margin-top:64px;border-top:1px solid rgba(255,255,255,.15);padding-top:28px;flex-wrap:wrap}
.stat .n{font-size:clamp(56px,6vw,88px);font-weight:900;letter-spacing:-.04em;color:#fff}
.stat .l{font-size:24px;color:#cfe0ec;max-width:520px;line-height:1.3}
/* CORE */
.core{background:#f3f6f9}
.big4{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:44px}
.tile{border-radius:24px;padding:30px;font-size:28px;font-weight:850;letter-spacing:-.02em;line-height:1.1;color:#fff;min-height:170px;display:flex;align-items:flex-end}
.tile small{display:block;font-size:18px;font-weight:500;opacity:.9;margin-top:8px;letter-spacing:0}
/* AI */
.ai{background:#0a2236;color:#fff}.ai .eyebrow{color:var(--sky)}.ai .sub{color:#cfe0ec}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.card{border-radius:24px;padding:32px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14)}
.card h3{font-size:30px;line-height:1.08;letter-spacing:-.025em;font-weight:850;margin-bottom:12px}
.card p{font-size:20px;line-height:1.4;color:#cfe0ec}
.card.hot{background:linear-gradient(160deg,#0b6fa0,#0f3550);border-color:transparent}
.card .big{font-size:64px;font-weight:900;color:var(--gold);letter-spacing:-.04em;line-height:1}
.beta{font-size:14px;background:var(--sky);color:#0a2236;border-radius:999px;padding:3px 10px;vertical-align:middle;font-weight:800}
/* YEAR + TEAMS split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.panel{border-radius:28px;padding:48px}
.panel h2{font-size:clamp(36px,3.6vw,52px)}
.list{margin-top:28px;display:grid;gap:12px}
.list div{font-size:26px;font-weight:800;padding:18px 22px;border-radius:16px;background:#fff;letter-spacing:-.01em}
.p1{background:var(--soft)}.p2{background:#0f3550;color:#fff}.p2 .eyebrow{color:var(--sky)}.p2 .sub{color:#cfe0ec;font-size:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.chip{border-radius:999px;padding:10px 18px;font-weight:800;font-size:17px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
/* PORTAL */
.portal{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.pm{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 60px rgba(15,23,42,.14);overflow:hidden}
.pm .hd{background:var(--brand);color:#fff;padding:16px 24px;font-weight:800;font-size:18px;display:flex;justify-content:space-between}
.pm .row{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);font-size:19px}
/* PLANS */
.plans{background:#f3f6f9}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.tier{background:#fff;border-radius:24px;padding:34px;border-top:8px solid var(--accent)}
.tier:nth-child(2){border-top-color:var(--gold)}.tier:nth-child(3){border-top-color:var(--pass)}
.tier h3{font-size:30px;letter-spacing:-.02em;font-weight:900}.tier .who{font-size:18px;color:#5b6977;margin-top:4px}
.tier .price{font-weight:800;color:#9a6400;margin-top:10px;font-size:16px}
.tier ul{margin-top:18px;padding-left:22px;font-size:20px;line-height:1.6;color:var(--ink2)}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}
footer{padding:36px;text-align:center;color:#6b7785;font-size:15px}
.app-wrap{position:relative;padding-top:36px}
.app-wrap .alert{top:0;right:0}
@media(max-width:900px){.herogrid,.split,.portal,.cards,.tiers{grid-template-columns:1fr}.stack{height:420px}.app-wrap{padding-top:36px}.app-wrap .alert{top:0;right:8px;font-size:13px;padding:7px 10px}}


.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:28px}
.fc{border-radius:22px;padding:26px;background:#fff;border:1px solid var(--line)}
.fc .ic{font-size:30px;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--soft);margin-bottom:14px}
.fc h3{font-size:30px;line-height:1.05;letter-spacing:-.025em;font-weight:900}.fc p{font-size:20px;line-height:1.35;color:var(--ink2);margin-top:8px}
.dk .fc{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}.dk .fc p{color:#cfe0ec}.dk .fc .ic{background:rgba(124,196,234,.18)}
.app{background:#fff;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.4);overflow:hidden;color:var(--ink)}
.app .bar{background:#eef2f5;padding:10px 16px;display:flex;gap:6px;align-items:center;font-size:14px;color:#5b6977}
.app .bar i{width:11px;height:11px;border-radius:50%;background:#c3ccd4;display:inline-block}
.app .rw{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);font-size:19px}
.lu-row{display:grid;grid-template-columns:5px auto 1fr auto;gap:8px 10px;align-items:center;padding:9px 14px 9px 0;border-bottom:1px solid var(--line)}
.lu-row .lu-rail{align-self:stretch;width:5px;border-radius:0 2px 2px 0}
.lu-row.pass{background:#f3faf5}.lu-row.pass .lu-rail{background:var(--pass)}
.lu-row.kill{background:#fdf4f4}.lu-row.kill .lu-rail{background:var(--kill)}
.lu-row.watch{background:#f3f7fc}.lu-row.watch .lu-rail{background:var(--watch)}
.lu-num{font-weight:900;font-size:18px;letter-spacing:-.03em;color:var(--brand);line-height:1;min-width:4.4em}
.lu-title{font-weight:700;font-size:13.5px;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.lu-sp{font-size:11px;font-weight:600;color:#6b7785;margin-top:2px;line-height:1.2}
.lu-row .pill{float:none;padding:4px 10px;font-size:11px;letter-spacing:.03em}
.lu-sp .lu-more{text-decoration:underline;margin-left:.25em;white-space:nowrap}
.fc.askbill{display:flex;gap:12px;align-items:center;grid-column:span 2}
.fc.askbill img{width:86px;height:86px;border-radius:16px;object-fit:cover;object-position:center 12%;flex:0 0 auto;background:#f4ead8}
.fc.askbill .ic{display:none}
.fc.askbill .ab-copy{min-width:0}
h2.track-ai{font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:-.03em;max-width:1100px}
.gauge{width:220px;height:120px;border-radius:220px 220px 0 0;background:conic-gradient(from 270deg at 50% 100%,var(--gold) 0 155deg,rgba(255,255,255,.15) 155deg 180deg,transparent 180deg);position:relative;margin:0 auto}
.gauge:after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:80px;border-radius:160px 160px 0 0;background:#0b5a85}
.numrow{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;background:linear-gradient(160deg,#0b6fa0,#0f3550);border-radius:28px;padding:36px 44px;margin-top:36px;color:#fff}
.close{background:var(--gold);color:#0a2236;text-align:center;padding:80px 24px}
.close h2{font-size:clamp(44px,5.4vw,80px)}
.close .cta{background:#0a2236;color:#fff;box-shadow:none}

@media(max-width:560px){
  .grid4{grid-template-columns:1fr}
  .fc.askbill{grid-column:1/-1}
  .numrow{grid-template-columns:1fr;gap:16px;padding:24px 18px}
  .app .bar{font-size:12px;padding:8px 10px}
  .lu-num{font-size:16px}
  .lu-title{font-size:12.5px}
}
/* Live bits kept from the old landing: Sign in in the nav, Privacy/Terms/Sign in in the footer. */
.navr{display:flex;align-items:center;gap:16px}
.navin{color:#fff;text-decoration:none;font-weight:700;font-size:15px;opacity:.9}
footer a{color:#6b7785;margin:0 8px}
@media(max-width:560px){.navin{display:none}}
@media(max-width:560px){.hero nav .cta.sm{white-space:nowrap;padding:8px 12px;font-size:13px}}
@media(max-width:429px){.hero nav .cta.sm{display:none}.logo{font-size:52px}}
/* Landing package (Phiz 4:54 PM CT Nov 11, 2026 go), ported from the accepted mock landing-ai-boxes.html. */
/* Vote Predictor is a regular feature box. */
.vp-box .ic.vp-num{font-size:22px;font-weight:900;letter-spacing:-.04em;color:#ffb703;background:rgba(255,183,3,.16);width:56px;height:56px}
/* Portal showcase is web-only until the mobile portal is right. */
@media (max-width: 900px) { #portal-demo { display: none !important; } }
/* Accepted 4:53 PM CT: Ask Bill photo fills the box height; fonts unchanged. Explicit px only. */
.fc.askbill{align-items:center;gap:20px}
.fc.askbill img{width:224px !important;height:224px !important;object-fit:cover;object-position:center 12%;border-radius:16px;flex:0 0 auto}
.fc.askbill .ab-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
@media (max-width: 900px) { .fc.askbill img{width:140px !important;height:140px !important} }

/* ===== Landing round 2 ship (Phiz "ship", ~4:39 PM CT Nov 12, 2026). Ported verbatim from the
   Layout-passed mock /workspace/landing-top-pass/LobbyUp-landing-top-pass.html (sha 5cf86087...35f3). ===== */
/* Landing 25% bigger + tightened hero gap.
   Phiz 12:34 PM CT Nov 12: "Make everything on the landing page 25% bigger."
   and "tighten this space" (navy gap under "Free through January 31" before
   "The Tracking that 50,000 Arkansans Loved").
   Type, buttons, logos, icons, photos, and the hero bill widget are 1.25x.
   Wrap width stays 1200 so the page still fits a 1280 window (a full-page
   zoom would overflow). Section padding is not enlarged; the circled gap
   is tightened. Copy is unchanged. */

/* ---- 25% type and UI ---- */
.logo{font-size:clamp(50px,5.75vw,70px)}
@media(max-width:429px){.logo{font-size:65px}}
.navin{font-size:19px}
.cta{font-size:25px;padding:22px 42px}
.cta.sm{font-size:19px;padding:12px 25px}
@media(max-width:560px){.hero nav .cta.sm{padding:10px 15px;font-size:16px}}
.hero h1{font-size:clamp(25px,3vw,38px)}
.hero .sub{font-size:clamp(55px,6.5vw,80px);margin:12px 0 28px}
.hero .free, .free{font-size:30px !important}
.arbrand{gap:11px;margin:0 0 18px;padding:6px 18px 6px 6px}
.arbrand .flag{width:70px;height:46px;border-radius:6px}
.arbrand .state{width:33px}
.arbrand b{font-size:19px}
h2{font-size:clamp(52px,6.25vw,90px)}
h2.track-ai{font-size:clamp(35px,4.25vw,55px)}
/* agencies heading is an inline clamp(34px,3.6vw,52px) */
.panel h2, .p2 h2{font-size:clamp(42px,4.5vw,65px) !important}
/* portal heading inline clamp(32px,3.8vw,52px) */
#portal-demo h2{font-size:clamp(40px,4.75vw,65px) !important}
.fc{padding:32px;border-radius:24px}
.fc .ic{font-size:38px;width:70px;height:70px;border-radius:20px;margin-bottom:18px}
.fc h3{font-size:38px}
.fc p{font-size:25px;margin-top:10px}
.fc.askbill{gap:25px}
.fc.askbill img{width:280px !important;height:280px !important}
@media(max-width:900px){.fc.askbill img{width:175px !important;height:175px !important}}
.vp-box .ic.vp-num{font-size:28px;width:70px;height:70px}
.beta{font-size:18px;padding:4px 12px}
.grid4{gap:20px;margin-top:32px}
/* hero widget */
.app-wrap{padding-top:36px}
.app .bar{padding:12px 20px;font-size:18px}
.app .bar i{width:14px;height:14px}
.lu-row{padding:11px 18px 11px 0;gap:10px 12px}
.lu-num{font-size:22px}
.lu-title{font-size:17px}
.lu-sp{font-size:14px}
.lu-row .pill{padding:5px 12px;font-size:14px}
.alert{font-size:19px;padding:12px 18px;border-radius:16px}
/* year-round / teams / plans / close */
.panel{padding:48px}
.list div{font-size:32px;padding:22px 28px}
.p2 .sub{font-size:28px}
.chips .chip, .chip{font-size:21px;padding:12px 22px}
.tier{padding:42px;border-top-width:10px;border-radius:28px}
.tier h3{font-size:38px}
.tier .who{font-size:22px}
.tier ul{font-size:25px;margin-top:22px}
.tiers{gap:22px;margin-top:48px}
.close{padding:80px 24px}
.close h2{font-size:clamp(55px,6.75vw,100px)}
footer{font-size:19px;padding:40px}
.numrow{padding:45px 55px;margin-top:45px}

/* ---- Tighten the circled gap: leftover hero height + 56px + 80px navy ----
   Sit the left hero column on the bottom of the grid so "Free through January 31"
   lines up with the bottom of the bill widget, then cut the two paddings. */
.hero{padding-bottom:16px}
.herogrid{align-items:end;margin-top:8px}
.hero .free, .free{margin:18px 0 0 !important}
section.ai.dk, section.ai{padding-top:24px !important;padding-bottom:80px !important}

/* Top-pass declutter.
   Phiz 12:56 PM CT Nov 12, in the Tech+bAIb room:
   "this is still very cluttered. Can you please make another pass at this top part?"
   The 25% bigger headline wrapped to four lines and ran into the bill list.
   This pass sizes that headline so it stays three lines (same wrap as live),
   top-aligns the bill widget with the headline again, and tightens the
   leftover hero spacing. Logo, nav, and CTAs stay 25% bigger. Copy is
   unchanged except the extra dots on "Now more than ever" (live had four).
   Portal cleanup and the tightened gap under the hero stay. */

.hero .sub{
  font-size:clamp(48px,5.4vw,68px);
  line-height:1.05;
  margin:8px 0 18px;
  letter-spacing:-.045em;
}
.hero h1{margin:0 0 2px}
.arbrand{margin:0 0 12px}
.herogrid{align-items:start;margin-top:4px;gap:28px}
.hero .free, .free{margin:14px 0 0 !important}

/* Landing top notes, Phiz 2:14 PM CT Nov 12 (DECISIONS t3298u).
   1. "Your bill just moved" alert removed, plus the 36px it reserved above the bill widget.
   2. Logo = Phiz's exact image (dark background removed), 20% wider than the old text logo
      (old 5.153em wide at the same .logo font-size; new 6.183em).
   3. "Now More Than Ever..." italic; "The Most Advanced..." shrunk so "Free through January 31"
      ends level with the bottom of the bill widget. */
.app-wrap{padding-top:0}
@media(max-width:900px){.app-wrap{padding-top:0}}
.logo img{display:block;width:6.1834em;height:auto}
.hero h1{font-style:italic}
.hero .sub{font-size:clamp(35.58px,4.002vw,50.40px)}

/* Sign In pill, Phiz 2:43 PM CT Nov 12.
   Same pill as the header "Join the waitlist" (.cta.sm: height, radius, padding, size, weight),
   in LobbyUp green (--pass #1c8a4b) with white text. Same spot and gap; hidden on phones as before. */
.hero nav .navin.cta.sm{background:var(--pass);color:#fff;opacity:1;font-weight:800}

/* Phone logo fit (fix to the 2:14 logo change): logo fits the screen, no sideways scroll. */
@media(max-width:429px){.logo img{width:calc(100vw - 48px);height:auto}}


/* Landing top notes, Phiz 2:49 + 2:52 PM CT Nov 12.
   2:49: shrink "The Tracking..." 10%; "Now with the Power of AI" 20% larger with a
   high-tech AI treatment; hero waitlist pill bigger type, same height, extend
   right to the Free line (Marketing picked B). Header Sign In / waitlist pills
   unchanged. Footer CTA unchanged.
   2:52: line the Free line bottom up with the 4-bill sample box; spread the
   slack across the left-column gaps (desktop two-column only). */
h2.track-ai .track-line{font-size:clamp(31.5px,3.825vw,49.5px)}
h2.track-ai .power-line{font-size:clamp(42px,5.1vw,66px)}
h2.track-ai .ai-accent{color:#0ab6fe}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h2.track-ai .ai-accent{
    background-image:linear-gradient(90deg,#0ab6fe,#9aedff,#f3fcff);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 6px rgba(10,182,254,.8)) drop-shadow(0 0 12px rgba(154,237,255,.7));
  }
}

/* Hero waitlist pill (B): same 73px height, larger type, left edge fixed,
   right edge matches the "Free through January 31" text. */
.hero-cta-stack{display:inline-block;max-width:100%;vertical-align:top}
.hero-cta-stack .free{width:max-content;max-width:100%}
.hero-cta-stack>a.cta{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:0;
  min-width:100%;
  height:73px;
  font-size:40px;
  line-height:1;
  font-weight:800;
  padding:0 25px;
  white-space:nowrap;
}
/* Phone: if B's 40px type cannot keep sensible side padding in the narrow
   column (Free wraps at ~390), fall back to A's sizing — same 73px height,
   30px type, original shrink-to-content width. */
@media(max-width:429px){
  .hero-cta-stack{display:block;width:auto}
  .hero-cta-stack .free{width:auto;max-width:100%}
  .hero-cta-stack>a.cta{
    display:inline-flex;
    width:auto;
    min-width:0;
    font-size:30px;
    padding:0 23px;
  }
}

/* 2:52: Free line bottom even with the sample-track box. +2px on each of the
   four left-column gaps (12/8/18/14 → 14/10/20/16) uses the ~7.8px slack.
   Two-column hero only; phone stack stays as-is. */
@media(min-width:901px){
  .hero .arbrand{margin-bottom:14px}
  .hero h1{margin-bottom:0}
  .hero .sub{margin-top:10px;margin-bottom:20px}
  .hero .hero-cta-stack .free,.hero .free{margin-top:16px !important}
}
@media(max-width:429px){.fc.askbill{gap:20px}.fc.askbill img{width:140px!important;height:140px!important}}
@media(max-width:374px){.lu-row{gap:10px 8px}.lu-row .pill{padding:5px 8px}.lu-num{font-size:18px}}