/* Campaign landing pages (/go/…). Built on styles.css (tokens, .wrap, .btn, .eyebrow, .section,
   h2.title) and claude-check.css (the example email, the pilot block and its form), so the page stays
   inside the locked design system. Only the landing page's own layout lives here: a header with no
   navigation, the hero, the three-point grid and a minimal footer. Section backgrounds sit in the
   page's own <style> (build_campaign_landing_page.py), where check_backgrounds.py can see them. */
.lp-head{position:absolute;top:0;left:0;right:0;z-index:5}
.lp-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:96px}
.lp-logo{display:flex;align-items:center}
.lp-logo img{height:66px;width:auto;display:block}
.lp-head .btn{padding:11px 18px;font-size:.92rem;white-space:nowrap}

.lp-hero{padding:140px 0 72px}
.lp-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.lp-hero h1{font-size:clamp(2rem,4.4vw,3.3rem);text-transform:uppercase;font-weight:700;letter-spacing:-.025em;line-height:1.02;margin-top:18px;max-width:20ch}
.lp-hero .sub{font-size:clamp(1.05rem,1.6vw,1.18rem);color:var(--muted);margin-top:20px;max-width:56ch}
.lp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px}

.lp-band{padding:80px 0}
.lp-band .section-head{margin-bottom:36px}
.lp-gets{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0}
.lp-gets li{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;gap:12px;align-items:flex-start;
  font-weight:500;color:var(--ink);line-height:1.45}
.lp-gets svg{width:22px;height:22px;flex:none;color:var(--primary);margin-top:1px}

.lp-lead{margin-top:16px;font-size:1.1rem;color:var(--muted);max-width:60ch}
.lp-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
.lp-shots-2{grid-template-columns:1fr 1fr;gap:28px;margin-top:0}
.lp-shot{margin:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(11,13,18,.04),0 18px 40px -22px rgba(11,13,18,.22)}
.lp-shot-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--border);background:#f4f4f6}
.lp-shot-bar i{width:8px;height:8px;border-radius:999px;background:#d6d7dc}
.lp-shot-bar span{margin-left:8px;font-size:.78rem;font-weight:600;color:var(--muted)}
.lp-shot img{display:block;width:100%;height:auto;cursor:zoom-in;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.lp-shot{transition:box-shadow .35s,transform .35s cubic-bezier(.22,.61,.36,1)}
.lp-shot:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(11,13,18,.04),0 28px 56px -24px rgba(11,13,18,.3)}
.lp-shot img:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}

/* The enlarged screenshot (z-index 80: above the site header, mega menu and drawer on the solution
   page, which keeps them): a little larger than the cards, centered over a dimmed page, with a close
   button and arrows to step through every screen. The screenshots are 16:10. */
.lp-zoom{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(11,13,18,.62);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.lp-zoom.on{opacity:1;visibility:visible;transition:opacity .25s}
.lp-zoom-in{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
.lp-zoom figure{margin:0;width:min(820px,64vw,96vh);background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);transform:scale(.94);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.lp-zoom.on figure{transform:scale(1)}
.lp-zoom img{display:block;width:100%;height:auto}
.lp-zoom figcaption{padding:12px 18px;font-size:.95rem;color:var(--muted)}
.lp-zoom figcaption b{color:var(--ink)}
.lp-zoom-nav,.lp-zoom-x{display:grid;place-items:center;border:0;cursor:pointer;background:#fff;color:var(--ink);
  border-radius:999px;box-shadow:0 8px 24px -8px rgba(0,0,0,.45);transition:background .15s,color .15s}
.lp-zoom-nav{width:52px;height:52px}
.lp-zoom-nav svg{width:24px;height:24px}
.lp-zoom-nav:hover,.lp-zoom-x:hover{background:var(--primary);color:#fff}
.lp-zoom-x{position:absolute;top:-56px;right:70px;width:44px;height:44px}
.lp-zoom-x svg{width:22px;height:22px}
.lp-zoom-n{grid-column:2;margin:0;text-align:center;color:rgba(255,255,255,.8);font-size:.9rem}
.lp-zoom button:focus-visible{outline:3px solid #fff;outline-offset:3px}
html.lp-zoomed{overflow:hidden}
.lp-shot figcaption{padding:12px 16px 14px;border-top:1px solid var(--border);font-size:.92rem;color:var(--muted);line-height:1.45}
.lp-shot figcaption b{color:var(--ink)}
.lp-demo{margin-top:18px;font-size:.86rem;color:var(--muted)}
.lp-demo-top{margin-top:32px}
.lp-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-point{border:1px solid var(--border);border-radius:var(--radius);padding:22px;background:#fff}
.lp-point .ic{width:42px;height:42px;border-radius:var(--radius);border:1px solid var(--border);display:grid;place-items:center;color:var(--primary);background:#fff}
.lp-point .ic svg{width:22px;height:22px}
.lp-point h3{font-size:1.08rem;margin-top:14px;letter-spacing:-.01em}
.lp-point p{margin-top:8px;color:var(--muted);line-height:1.55}
.lp-proof{margin-top:28px;display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
.lp-proof p{margin:0;max-width:62ch}
/* The site's Marketplace badge (scripts/marketplace_badge.py), with its hover lift. */
.mp-badge{display:inline-flex;align-items:center;justify-content:center;height:60px;box-sizing:border-box;padding:0 10px;background:#fff;
  border:1px solid var(--border);border-radius:12px;line-height:0;transition:transform .15s,box-shadow .15s}
.mp-badge img{display:block;height:52px;width:auto}
.mp-badge:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,27,51,.15)}

/* The pilot countdown: real time left to the application deadline, and how much of the window has gone. */
.lp-timer{margin-top:14px;display:grid;gap:10px}
.lp-count{display:flex;gap:8px;margin:0}
.lp-count span{display:grid;justify-items:center;min-width:62px;padding:8px 6px 7px;border:1px solid var(--border);border-radius:var(--radius);
  background:#f4f4f6;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lp-count b{font-family:var(--font-head);font-size:1.5rem;line-height:1.1;letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums}
.lp-window{height:6px;border-radius:999px;background:#eaf1fb;overflow:hidden}
.lp-window i{display:block;height:100%;width:0;border-radius:999px;background:var(--primary);transition:width 1.6s cubic-bezier(.22,.61,.36,1)}
.lp-pilot{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:0 24px 56px -22px rgba(11,13,18,.18)}

.lp-close{padding:84px 0;color:#fff;text-align:center}
.lp-close h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;line-height:1.05;max-width:24ch;margin:0 auto}
.lp-close p{margin:16px auto 0;max-width:56ch;color:rgba(255,255,255,.86)}
.lp-close .lp-actions{justify-content:center}
.lp-close .btn-white{background:#fff;color:var(--primary);border-color:#fff}
.lp-close .btn-white:hover{background:#eaf1fb;transform:translateY(-2px)}
.lp-close .btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.lp-close .btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.lp-band.lp-more{padding:56px 0}
.lp-more-row{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.lp-more h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-top:12px;letter-spacing:-.015em}
.lp-more p{margin:10px 0 0;color:var(--muted);max-width:62ch}

/* Light footer: the gray of the band above it, a thin divider, gray text (Marvin, 2026-10-20). */
.lp-foot{padding:24px 0 28px;background:#f4f4f6;color:var(--muted);font-size:.86rem}
.lp-foot .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;border-top:1px solid var(--border);padding-top:24px}
.lp-foot a{color:var(--muted)}
.lp-foot a:hover{color:var(--primary)}

@media (prefers-reduced-motion:reduce){
  .lp-shot,.lp-shot img,.lp-zoom,.lp-zoom.on,.lp-zoom figure,.mp-badge,.lp-window i{transition:none}
  .mp-badge:hover{transform:none}
  .lp-shot:hover{transform:none}
}
@media (max-width:960px){
  .lp-hero-grid{grid-template-columns:1fr;gap:40px}
  .lp-gets,.lp-points{grid-template-columns:1fr 1fr}
  .lp-shots{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .lp-head .wrap{height:80px}
  .lp-head .btn{padding:10px 12px;font-size:.82rem;gap:6px}
  .lp-head .btn svg{width:16px;height:16px}
  .lp-logo img{height:40px}
  .lp-hero{padding:108px 0 56px}
  .lp-band,.lp-close{padding:60px 0}
  .lp-gets,.lp-points,.lp-shots,.lp-shots-2{grid-template-columns:1fr}
  .lp-pilot{padding:22px 18px}
  .lp-count span{min-width:0;flex:1 1 0;padding:8px 2px 7px}
  .lp-actions .btn{width:100%}
  /* On a phone the screen sets the width; the arrows sit under the picture. */
  .lp-zoom{padding:12px}
  .lp-zoom-in{grid-template-columns:1fr 1fr;gap:12px}
  .lp-zoom figure{grid-column:1/-1;grid-row:1;width:calc(100vw - 24px)}
  .lp-zoom-nav.prev{grid-row:2;justify-self:end}
  .lp-zoom-nav.next{grid-row:2;justify-self:start}
  .lp-zoom-n{grid-column:1/-1;grid-row:3}
  .lp-zoom-x{top:-52px;right:0}
}

/* The example email is a picture of the real one: its button does nothing here. */
.lp-hero span.sc-fix,.lp-hero span.sc-fix:hover{cursor:default;background:var(--primary)}