@charset "UTF-8";
  :root{
    /* Same names as app.css so one concept has one name across both
       stylesheets. The marketing site links its own fonts per page, so a swap
       here is these two lines plus the <link> in each page's head. */
    --pe-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --pe-font-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --navy:#1a1a2e;
    --navy-dark:#111124;
    --sky:#38bdf8;
    --sky-strong:#0ea5e9;
    --sky-deep:#0284c7;
    --amber:#f59e0b;
    --amber-dark:#b45309;
    --bg:#f4f5f8;
    --card:#ffffff;
    --line:#e5e7eb;
    --text:#131826;
    --muted:#667085;
    --radius:14px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--pe-font);
    color:var(--text);
    background:var(--bg);
    line-height:1.55;
  }
  a{color:inherit;}
  img{max-width:100%;}
  h1,h2,h3,h4,.logo{font-family:var(--pe-font-display);}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  .badge{
    display:inline-block;
    background:rgba(56,189,248,0.12);
    color:var(--sky);
    border:1px solid rgba(56,189,248,0.35);
    font-size:13px;
    font-weight:600;
    padding:6px 14px;
    border-radius:999px;
    letter-spacing:.02em;
  }
  /* Nav */
  header.site{
    position:sticky;top:0;z-index:50;
    background:var(--navy);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,0.06);
    transition:background .4s ease, box-shadow .4s ease;
  }
  header.site.is-scrolled{
    background:var(--navy-dark);
    box-shadow:0 6px 24px rgba(0,0,0,0.28);
  }
  /* Full-width header from page load: logo hard-left, menu hard-right, edge to
     edge. The bar darkens slightly on scroll (header.site.is-scrolled above) to
     separate it from the content below. */
  nav.wrap{
    display:flex;align-items:center;gap:28px;
    padding:12px 40px;max-width:100%;margin:0 auto;
  }
  .logo{display:flex;align-items:center;gap:10px;flex:none;}
  /* Nav links + CTAs grouped on the right */
  .nav-right{display:flex;align-items:center;gap:28px;flex:0 1 auto;margin-left:auto;}
  .logo img{height:34px;width:auto;display:block;}
  .navlinks{display:flex;gap:26px;font-size:14.5px;font-weight:500;}
  .navlinks a{opacity:.88;text-decoration:none;}
  .navlinks a:hover{opacity:1;}
  .navcta{display:flex;gap:24px;align-items:center;}
  .nav-login{color:#fff;font-weight:600;font-size:14.5px;text-decoration:none;opacity:.9;}
  .nav-login:hover{opacity:1;}
  .btn{
    display:inline-block;
    padding:11px 20px;
    border-radius:9px;
    font-weight:700;
    font-size:14.5px;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:background .15s ease,border-color .15s ease;
  }
  .btn-sky{background:var(--sky-strong);color:#04263a;}
  .btn-sky:hover{background:var(--sky);}
  .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.35);}
  .btn-ghost:hover{border-color:#fff;}
  .btn-navy{background:var(--navy);color:#fff;}
  .btn-navy:hover{background:var(--navy-dark);}
  .btn-white{background:#ffffff;color:var(--navy);}
  .btn-white:hover{background:#eef1f7;}
  @media (max-width:860px){ .navlinks{display:none;} .navcta{display:none;} .nav-toggle{display:flex;} nav.wrap{padding:12px 20px;} }

  /* Hero */
  .hero{
    background:radial-gradient(1100px 480px at 15% -10%, rgba(56,189,248,0.20), transparent),
               linear-gradient(180deg,var(--navy) 0%, var(--navy-dark) 100%);
    color:#fff;
    padding:70px 0 90px;
  }
  .hero .wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:50px;align-items:center;}
  @media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;} }
  .hero h1{
    font-size:46px;line-height:1.08;margin:18px 0 16px;font-weight:800;letter-spacing:-.5px;
  }
  .hero h1 .accent{color:var(--sky);}
  .hero p.lead{font-size:18px;color:#c9d0e0;max-width:520px;margin:0 0 26px;}
  .hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
  .hero .fineprint{font-size:13px;color:#98a2ba;}

  .hero-card{
    background:var(--card);
    border-radius:18px;
    padding:22px;
    color:var(--text);
    box-shadow:0 30px 60px rgba(0,0,0,0.35);
  }
  .hero-card .tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
  .hero-card .tab{
    font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:7px;
    background:var(--bg);color:var(--muted);
  }
  .hero-card .tab.active{background:var(--navy);color:#fff;}
  .hero-card .row{
    display:flex;justify-content:space-between;align-items:center;
    padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;gap:12px;
  }
  .hero-card .row:last-child{border-bottom:none;}
  .hero-card .row .name{font-weight:700;}
  .hero-card .row .meta{color:var(--muted);font-size:12.5px;}
  .pill{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;}
  .pill.green{background:#e5f6ec;color:#1c8a4b;}
  .pill.blue{background:#e7edff;color:#3450c9;}
  .pill.gold{background:rgba(245,158,11,0.16);color:var(--amber-dark);}

  section{padding:76px 0;}
  h2.section-title{
    font-size:32px;font-weight:800;color:var(--navy);margin:0 0 12px;
    text-align:center;letter-spacing:-.4px;
  }
  p.section-sub{
    text-align:center;color:var(--muted);font-size:16.5px;max-width:640px;margin:0 auto 46px;
  }

  /* Roles */
  .role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
  @media (max-width:820px){ .role-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto;} }
  .role-card{
    background:var(--card);border:1px solid var(--line);border-radius:16px;
    padding:32px 28px;
    box-shadow:0 1px 2px rgba(16,24,40,0.04), 0 10px 28px rgba(16,24,40,0.05);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .role-card:hover{box-shadow:0 16px 36px rgba(16,24,40,0.09);}
  .role-card h3{margin:0 0 12px;font-size:20px;color:var(--navy);letter-spacing:-.2px;}
  .role-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6;}
  .role-card .quote{
    font-size:13.5px;font-style:italic;color:var(--navy);
    border-left:3px solid var(--sky);padding-left:12px;margin-top:18px;
  }

  /* Features — grouped by workflow (Launch / Run the season / Grow)

     This band is WIDER than the site container (Robb, 2026-09-17: "make this
     wider"). Three columns inside the shared 1120px .wrap left each one 333px,
     which is about 49 characters a line — under the comfortable 45-75 band and
     low enough that headings like "Seasons, teams & a schedule that checks
     itself" broke across lines awkwardly. At 1280 a column is 381px, about 56
     characters. Not wider than that: at 1280 a 1366px laptop still keeps 43px
     each side, where 1320 would leave 23 and read as crowded.

     A per-section .wrap override, the same device .mission already uses for a
     NARROWER band — the shared container is not touched, so no other section
     moves. The gap grows with the columns so three of them still read as three. */
  #features .wrap{max-width:1280px;}
  .feat-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;}
  #features .feat-groups{column-gap:44px;}
  @media (max-width:820px){ .feat-groups{grid-template-columns:1fr;gap:30px;max-width:620px;margin:0 auto;} }
  .feat-gh{
    font-family:var(--pe-font-display);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--sky-deep);padding-bottom:12px;margin-bottom:20px;border-bottom:2px solid var(--line);
    display:flex;align-items:center;gap:8px;
  }
  .feat-item{margin-bottom:20px;}
  .feat-item:last-child{margin-bottom:0;}
  .feat-item b{display:block;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:3px;}
  .feat-item span{display:block;font-size:13.5px;color:var(--muted);line-height:1.55;}
  .pro-tag{
    font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--sky-deep);
    background:rgba(56,189,248,0.12);border:1px solid rgba(56,189,248,0.3);
    padding:1px 8px;border-radius:999px;
  }
  .feat-item .pro-tag{display:inline-block;margin-top:6px;}
  /* AI badge — mirrors .pro-tag's flat pill but in violet (the AI-convention
     hue) so it reads as a different category from the sky-blue PRO tag. Small
     sparkle signals "AI" at a glance. Sits inline after a feature title.
     Scoped `.feat-item .ai-tag` (0,2,0) so it beats `.feat-item span` (0,1,1),
     which would otherwise force display:block + muted colour on this span. */
  .feat-item .ai-tag{
    display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:7px;
    font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
    color:#6d28d9;background:rgba(124,58,237,0.10);border:1px solid rgba(124,58,237,0.30);
    padding:1px 8px 1px 6px;border-radius:999px;line-height:1.7;
  }
  .feat-item .ai-tag svg{width:11px;height:11px;flex:0 0 auto;}

  /* Local / founding */
  .local{
    background:linear-gradient(180deg,#fff, var(--bg));
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .local-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  @media (max-width:900px){ .local-grid{grid-template-columns:1fr;} }
  .local h2{font-size:30px;color:var(--navy);margin-top:0;}
  .local ul{padding-left:0;list-style:none;margin:20px 0;}
  .local ul li{
    padding:10px 0 10px 30px;position:relative;font-size:15px;color:var(--text);
    border-bottom:1px solid var(--line);
  }
  .local ul li:before{
    content:"✓";position:absolute;left:0;top:9px;color:var(--sky-deep);font-weight:800;
  }
  .target-list{
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:22px;
  }
  .target-list h4{margin:0 0 4px;color:var(--navy);font-size:15px;}
  .target-list .note{font-size:12.5px;color:var(--muted);margin-bottom:16px;}
  .target-list .chip{
    display:inline-block;margin:4px 6px 4px 0;padding:7px 12px;border-radius:8px;
    background:var(--bg);border:1px solid var(--line);font-size:13px;color:var(--text);
  }

  /* Segments — clean text pills */
  .seg-list{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:840px;margin:0 auto;}
  .seg{
    background:var(--card);border:1px solid var(--line);border-radius:999px;
    padding:11px 20px;font-size:14.5px;font-weight:600;color:var(--navy);
  }

  /* Pricing */
  .price-head{max-width:640px;margin:0 auto 40px;text-align:center;}
  .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto;align-items:stretch;}
  @media (max-width:760px){ .price-grid{grid-template-columns:1fr;} }
  .plan{
    background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 28px;
    display:flex;flex-direction:column;position:relative;
  }
  .plan.pro{border-color:var(--sky-strong);box-shadow:0 20px 40px rgba(14,165,233,0.14);}
  .plan .popular{
    position:absolute;top:-12px;right:22px;background:var(--sky-strong);color:#04263a;
    font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 12px;border-radius:999px;
  }
  .plan h3{margin:0 0 4px;font-size:20px;color:var(--navy);}
  .plan .who{color:var(--muted);font-size:13.5px;margin:0 0 18px;min-height:20px;}
  .plan .amt{font-size:44px;font-weight:800;color:var(--navy);line-height:1;font-family:var(--pe-font-display);}
  .plan .amt span{font-size:16px;font-weight:600;color:var(--muted);}
  .plan .annual{color:var(--sky-deep);font-size:13.5px;font-weight:700;margin:8px 0 20px;}
  .plan ul{list-style:none;padding:0;margin:0 0 24px;font-size:14px;flex:1;}
  .plan ul li{padding:7px 0 7px 26px;position:relative;color:var(--text);border-bottom:1px solid var(--line);}
  .plan ul li:last-child{border-bottom:none;}
  .plan ul li:before{content:"✓";position:absolute;left:0;top:7px;color:var(--sky-deep);font-weight:800;}
  .plan ul li.everything{font-weight:700;color:var(--navy);}
  .plan ul li.everything:before{content:"★";color:var(--amber);}
  .plan .btn{width:100%;text-align:center;}
  .price-foot{max-width:860px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:13.5px;}
  .price-foot strong{color:var(--text);}

  /* Compare table */
  .compare-wrap{max-width:860px;margin:44px auto 0;overflow-x:auto;}
  table.compare{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
  table.compare th, table.compare td{padding:13px 16px;text-align:left;font-size:14px;border-bottom:1px solid var(--line);color:var(--text);}
  table.compare th{background:var(--navy);color:#fff;font-size:13px;}
  table.compare tr:last-child td{border-bottom:none;}
  table.compare td.center, table.compare th.center{text-align:center;}
  .disclaimer{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px;}

  /* FAQ */
  .faq{max-width:1040px;margin:0 auto;}   /* was 760px — Robb, 2026-09-17: "make these wider" */
  details{
    background:var(--card);border:1px solid var(--line);border-radius:11px;
    padding:16px 20px;margin-bottom:12px;
  }
  summary{font-weight:700;color:var(--navy);cursor:pointer;font-size:15.5px;}
  details p{color:var(--muted);font-size:14.5px;margin:10px 0 2px;}

  /* Eyebrow (shared) */
  .eyebrow{
    display:block;text-align:center;font-size:12.5px;font-weight:800;letter-spacing:.10em;
    text-transform:uppercase;color:var(--sky-deep);margin:0 0 12px;
  }

  /* Why ProElite band */
  .why{background:linear-gradient(180deg,var(--navy) 0%, var(--navy-dark) 100%);color:#fff;}
  .why .eyebrow{color:var(--sky);}
  .why h2.section-title{color:#fff;}
  .why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 28px;margin-top:30px;}
  @media (max-width:900px){ .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 30px;} }
  @media (max-width:520px){ .why-grid{grid-template-columns:1fr;gap:28px;} }
  /* Editorial index: a hairline sky rule over each reason + a big numeral, no box. */
  .why-item{text-align:left;border-top:2px solid rgba(56,189,248,0.5);padding-top:16px;}
  .why-item .n{
    color:var(--sky);font-weight:800;font-size:32px;line-height:1;margin-bottom:14px;
    font-family:var(--pe-font-display);letter-spacing:-0.01em;
  }
  .why-item h4{margin:0 0 7px;font-size:16px;color:#fff;}
  .why-item p{margin:0;font-size:14px;color:#c9d0e0;line-height:1.55;}

  /* Mission band */
  .mission{background:#fff;border-top:1px solid var(--line);}
  .mission .wrap{max-width:820px;text-align:center;}
  .mission h2{font-size:30px;font-weight:800;color:var(--navy);margin:0 0 16px;letter-spacing:-.3px;}
  .mission p{font-size:19px;line-height:1.55;color:var(--text);margin:0;}

  /* CTA footer band */
  .cta-band{
    background:linear-gradient(135deg,var(--navy) 0%, var(--sky-deep) 100%);
    color:#ffffff;text-align:center;padding:60px 0;
  }
  .cta-band h2{font-size:28px;margin:0 0 10px;color:#ffffff;}
  .cta-band p{color:rgba(255,255,255,0.82);margin:0 0 26px;font-size:15.5px;}

  footer{background:var(--navy-dark);color:#a9b1c9;padding:52px 0 26px;font-size:14px;}
  footer a{text-decoration:none;color:#c9d0e0;}
  footer .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;align-items:start;}
  footer .foot-brand{max-width:340px;}
  footer .foot-logo img{height:28px;width:auto;opacity:.95;display:block;margin-bottom:14px;}
  footer .foot-tag{margin:0 0 12px;color:#9aa4bd;font-size:14px;line-height:1.55;}
  footer .foot-email{color:var(--sky);font-weight:600;}
  footer .foot-email:hover{color:#7dd3fc;}
  footer .foot-col h4{font-family:var(--pe-font-display);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#eef2fb;margin:0 0 14px;}
  footer .foot-col a{display:block;color:#c9d0e0;margin-bottom:10px;}
  footer .foot-col a:hover{color:#fff;}
  footer .foot-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.09);}
  footer .foot-copy{color:#8b93a8;font-size:13px;}
  /* wrap: four links at 13px overflow a 375px phone, and .foot-bar wrapping
     doesn't help because the overflow is INSIDE this flex row. */
  footer .foot-legal{display:flex;flex-wrap:wrap;gap:10px 20px;}
  footer .foot-legal a{color:#a9b1c9;font-size:13px;}
  footer .foot-legal a:hover{color:#fff;}
  @media (max-width:760px){
    footer .foot-grid{grid-template-columns:1fr 1fr;gap:28px 24px;}
    footer .foot-brand{grid-column:1 / -1;max-width:none;}
  }

  /* ── Sub-page hero ── */
  .page-hero{background:radial-gradient(900px 380px at 20% -20%, rgba(56,189,248,0.18), transparent),linear-gradient(180deg,var(--navy) 0%, var(--navy-dark) 100%);color:#fff;text-align:center;padding:64px 0 56px;}
  .page-hero .eyebrow{color:var(--sky);}
  .page-hero h1{font-size:38px;font-weight:800;margin:0 0 14px;letter-spacing:-.5px;}
  .page-hero p{color:#c9d0e0;font-size:17px;max-width:640px;margin:0 auto;line-height:1.55;}
  /* ── Feature-comparison cells ── */
  .compare .yes{color:#1c8a4b;font-weight:800;}
  .compare .no{color:#b9bfca;}
  .compare.tiers tr:nth-child(even) td{background:#fafbfc;}
  /* ── Sub-page helpers ── */
  .subpage-section{padding:60px 0;}
  .faq-cta{max-width:1040px;margin:34px auto 0;text-align:center;color:var(--muted);font-size:15px;}
  .faq-cta a{color:var(--sky-deep);font-weight:700;text-decoration:none;}

  /* ── Mobile menu (hamburger + slide-in panel, built by marketing.js) ── */
  .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:9px;background:none;border:0;cursor:pointer;margin-left:auto;}
  .nav-toggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .25s ease, opacity .2s ease;}
  html.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  html.nav-open .nav-toggle span:nth-child(2){opacity:0;}
  html.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-backdrop{position:fixed;inset:0;background:rgba(9,9,20,.55);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:44;}
  html.nav-open .nav-backdrop{opacity:1;visibility:visible;}
  .nav-mobile{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--navy-dark);padding:80px 26px 34px;display:flex;flex-direction:column;gap:2px;z-index:45;transform:translateX(100%);transition:transform .28s ease;box-shadow:-10px 0 44px rgba(0,0,0,.45);overflow-y:auto;}
  html.nav-open .nav-mobile{transform:translateX(0);}
  .nav-mobile a{color:#fff;text-decoration:none;font-family:var(--pe-font-display);}
  .nav-m-link,.nav-m-login{font-size:17px;font-weight:600;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.09);opacity:.92;}
  .nav-m-link:hover,.nav-m-login:hover{opacity:1;}
  .nav-m-cta{margin-top:22px;background:var(--sky-strong);color:#04263a;text-align:center;border-radius:11px;font-weight:800;font-size:16px;padding:15px;}
  .nav-m-cta:hover{background:var(--sky);}

  /* ── Terms acceptance (mig 258) ──
     Deliberately duplicated from app.css: checkout.html loads THIS stylesheet
     and not that one, and the consent row must look the same on every signup
     surface. Keep the two in step — if you change one, change both. ── */
  .form-consent{margin:18px 0 4px;}
  .consent-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;min-height:44px;padding:6px 0;font-size:14px;line-height:1.45;color:#475569;}
  .consent-row input[type="checkbox"]{width:18px;height:18px;margin:1px 0 0;flex-shrink:0;accent-color:var(--sky-strong,#38bdf8);cursor:pointer;}
  .consent-row a{color:#0284c7;text-decoration:underline;text-underline-offset:2px;}
  .consent-row a:hover{opacity:.85;}

  /* ── Small-screen polish (phones) ── */
  @media (max-width:600px){
    section{padding:52px 0;}
    .hero{padding:34px 0 38px;}
    .hero h1{font-size:33px;margin:4px 0 14px;}
    .hero p.lead{font-size:16.5px;margin-bottom:18px;}
    .hero .cta-row{margin-bottom:16px;}
    h2.section-title{font-size:26px;}
    p.section-sub{font-size:15.5px;margin-bottom:32px;}
    .page-hero{padding:44px 0 38px;}
    .page-hero h1{font-size:29px;}
    .page-hero p{font-size:16px;}
    .plan{padding:26px 22px;}
    .plan .amt{font-size:38px;}
    .cta-band{padding:46px 0;}
    .cta-band h2{font-size:24px;}
    .mission h2{font-size:25px;}
    .mission p{font-size:17px;}
    footer{padding:44px 0 22px;}
    /* Two columns, NOT one. The 760px rule above already pairs Product with
       Company and spans the brand across both; this block used to collapse
       that back to a single stack, which made the footer 863px — a whole
       phone screen of links. Only the gap is tightened here now. */
    footer .foot-grid{gap:26px 18px;}
    /* The bottom bar centres, and the legal links sit above the copyright. */
    footer .foot-bar{flex-direction:column;align-items:center;text-align:center;gap:14px;}
    footer .foot-legal{order:1;justify-content:center;}
    footer .foot-copy{order:2;}
  }

  /* Reveal the hamburger below 860px — LAST so it wins over the base
     .nav-toggle{display:none} above regardless of source order. */
  @media (max-width:860px){ .nav-toggle{display:flex;} }
  /* Mobile pass (2026-09-13 audit): no control under 16px (iOS zooms on focus),
     footer links and the role-demo buttons get a real tap height (they were
     19–22px tall). */
  @media (max-width:599px){
    input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size:16px !important; }
    /* 44px of hit area for every footer link. The column links grow their own
       padding to exactly 44px — a pitch of 44 means no overlap onto the
       neighbour above or below. The legal row sits in a horizontal strip, so
       those get the area from a pseudo-element instead and the visual text
       size is left alone, the way the app.css mobile pass does it. */
    footer .foot-col a { padding:11px 0; margin-bottom:0; }
    footer .foot-email { display:inline-block; padding:11px 0; }
    footer .foot-legal a { position:relative; }
    footer .foot-legal a::after {
      content:""; position:absolute; left:0; right:0; top:50%;
      height:44px; transform:translateY(-50%);
    }
    .role-demo { min-height:44px; }
  }

  /* ── Buyer section + Trust section (home.html, 2026-09-17) ──────────────
     Four buyer cards (League admins / Parks & Rec / Athletic directors /
     Trainers) reuse .role-card; the trust grid is six plain items. No icons,
     by standing rule. */
  /* .buyers-wrap, .buyer-grid and .buyer-card removed 2026-10-05 — zero uses
     once the rail-and-panel chooser replaced the four cards. .buyer-list below
     stays: the chooser panels still use it. */
  .buyer-list{list-style:none;padding:0;margin:0 0 18px;flex:1;}
  .buyer-list li{position:relative;padding:7px 0 7px 22px;font-size:13.5px;line-height:1.5;color:var(--text);border-bottom:1px solid var(--line);}
  .buyer-list li:last-child{border-bottom:none;}
  .buyer-list li:before{content:"✓";position:absolute;left:0;top:7px;color:var(--sky-deep);font-weight:800;}
  .buyer-list li em{color:var(--muted);font-style:italic;}

  .trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 32px;max-width:1120px;margin:0 auto;text-align:left;}
  @media (max-width:900px){ .trust-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .trust-grid{grid-template-columns:1fr;} }
  .trust-item{border-top:2px solid var(--sky);padding-top:14px;}
  .trust-item h4{margin:0 0 6px;font-size:15.5px;color:var(--navy);}
  .trust-item p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);}

  /* Links into the "Your website" page from the buyer cards and the Features
     column (2026-09-17 — the page used to be reachable from the footer only). */
  /* NOT scoped to .buyer-card any more. That card is gone, so this link had
     silently fallen back to dark underlined body text on the live page. */
  .buyer-more{display:block;font-size:13px;font-weight:700;color:#0284c7;text-decoration:none;margin:-6px 0 12px;}
  .buyer-more:hover{color:#0369a1;text-decoration:underline;}
  .feat-item span a{color:#0284c7;font-weight:700;text-decoration:none;white-space:nowrap;}
  .feat-item span a:hover{text-decoration:underline;}

  /* Buyer section, Option A (Robb, 2026-09-17): a navy band like .why, white
     cards on it, a "For …" tag above each title and a one-line promise under it.
     The tag and the promise do the work an icon would — no icons, by rule. */
  /* Bluer than the hero above it, with a sky glow radiating up behind the cards
     and a thin sky rule at the seam — so the band reads as a new chapter, not
     more hero (Robb, 2026-09-17: "a different color, or some kind of glow"). */
  /* Fades OUT of the hero rather than repeating it (Robb picked this from three
     treatments, 2026-10-05). It begins on the hero's own navy-dark, so the two
     sections meet with no seam and no border, and reaches white before the
     chooser starts. Stops are percentages so the fade stretches with the
     section — it is ~870px on a desktop and ~1,170px on a phone, and a fixed
     pixel ramp would land the white halfway up the heading on one of them. */
  .buyers-band{position:relative;isolation:isolate;border-top:0;
    background:linear-gradient(180deg,
      var(--navy-dark) 0%,
      #16203c 22%,
      #e9edf4 52%,
      #ffffff 72%);}
  .buyers-band .eyebrow{color:var(--sky);}
  .buyers-band h2.section-title{color:#fff;}
  .buyers-band p.section-sub{color:#c9d0e0;}
  /* The sky dot grid Robb picked from five mocked patterns (2026-09-17) stays,
     but only over the dark top — it is invisible on white and would just be
     noise there, so it is masked to fade out before the gradient does. */
  .buyers-band::before{content:"";position:absolute;inset:0 0 auto;height:46%;z-index:-1;pointer-events:none;
    background-image:radial-gradient(rgba(56,189,248,.30) 1.2px, transparent 1.6px);background-size:22px 22px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%, transparent 92%);
            mask-image:linear-gradient(180deg,#000 0%, transparent 92%);}
  /* .buyer-card / .buyer-tag removed 2026-10-05: no page has carried that
     markup since the rail-and-panel chooser replaced the four cards. The live
     equivalents are .chooser-tab .t-tag and .chooser-card .promise below. */

  /* ══════════════════════════════════════════════════════════════════════
     REDESIGN (staging, /new — 2026-10-05)

     The live page measured 11,418px on a 375px phone (14 screens) and 6,426px
     on desktop, with 1,648 words, no in-page navigation and exactly two images
     — both the logo. This block adds what the audit said was missing: a way to
     jump, a way to self-select instead of reading four near-identical cards,
     collapsible depth, and a product visual on the phone, where the hero sim
     was hidden.

     Standing rules observed: nothing lifts on hover (shadow/border/background
     only), no pill buttons, no icons or emoji, 44px tap targets, no control
     under 16px below 600px.
     ══════════════════════════════════════════════════════════════════════ */

  /* ── Nav: the hamburger arrived too late ──────────────────────────────
     The six links plus Log in and the CTA need ~1,019px to sit on one line,
     but the hamburger only appeared at 860px. Every width between those two
     broke each link mid-phrase and grew the bar to 92px. Raised to 1040px,
     with nowrap as the belt to the braces. */
  .navlinks a, .nav-login, .navcta .btn{white-space:nowrap;}
  @media (max-width:1040px){
    .navlinks{display:none;}
    .navcta{display:none;}
    .nav-toggle{display:flex;}
    nav.wrap{padding:12px 20px;}
  }

  /* ── Jump bar ─────────────────────────────────────────────────────────
     Sticks under the header so the page is navigable instead of merely
     scrollable. Scrolls sideways on a phone rather than wrapping to two rows,
     which would eat a third of the viewport. Not pills — 10px radius, and the
     active state is an underline. */
  /* FIXED, not sticky-in-flow. In the flow it was a full-width white strip
     between two navy sections — an orphan band at page load, before it was any
     use. Out of the flow there is nothing between the hero and the buyers band
     until you have scrolled past the hero, and then it docks under the nav and
     reads as part of it: same dark bar, same full-width padding as nav.wrap, so
     the first chip lines up with the logo.
     --pe-header-h is measured by the page script, because the header is 71px on
     desktop and 64–65px once the hamburger takes over, and a guessed value
     leaves a seam the hero shows through. */
  .jumpbar{
    position:fixed;top:var(--pe-header-h,70px);left:0;right:0;z-index:40;
    background:var(--navy-dark);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 10px 26px rgba(0,0,0,.30);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  }
  .jumpbar.is-on{opacity:1;visibility:visible;transform:none;}
  .jumpbar .wrap{display:flex;gap:8px;max-width:100%;padding:0 40px;overflow-x:auto;scrollbar-width:none;}
  .jumpbar .wrap::-webkit-scrollbar{display:none;}
  .jumpbar a{
    flex:none;
    display:inline-flex;align-items:center;
    min-height:44px;padding:0 14px;
    font-family:var(--pe-font-display);font-weight:700;font-size:14px;
    color:rgba(255,255,255,.70);text-decoration:none;
    border-bottom:2px solid transparent;
    transition:color .15s ease,border-color .15s ease,background .15s ease;
  }
  .jumpbar a:hover{color:#fff;background:rgba(255,255,255,.07);}
  .jumpbar a.on{color:var(--sky);border-bottom-color:var(--sky);}
  @media (max-width:1040px){ .jumpbar .wrap{padding:0 20px;} }
  /* Not on a phone. Six chips need 618px of a 375px screen and the scroll-spy
     centres the active one, so a label was always sliced at both edges. The
     hamburger carries the navigation there. */
  @media (max-width:600px){ .jumpbar{display:none;} }
  /* A fixed bar covers the top of whatever an anchor lands on, so every jump
     target clears the header AND the bar. */
  #buyers,#roles,#features,#why,#trust{scroll-margin-top:118px;}

  /* ── Hero: a product visual on the phone ──────────────────────────────
     The desktop hero sim is hidden below 1000px, which left the phone hero as
     65 words and two buttons — no picture of the product anywhere on an
     11,000px page. This frames the role sim, which does work on a phone. */
  .hero-phone{display:none;}
  @media (max-width:1000px){
    .hero-phone{
      display:block;width:100%;max-width:360px;margin:22px auto 0;
      height:560px;border:0;background:transparent;
    }
  }
  /* On a phone the hero ran 1,173px — 1.44 screens — and this iframe was 560px
     of it on its own. sim-role draws a phone at a fixed size, so it cannot be
     given a smaller height without clipping the tab bar off the bottom; it is
     scaled instead. A transform does not change layout height, so the leftover
     box (560 − 560×0.72 = 157px) is pulled back with a negative margin. */
  @media (max-width:600px){
    /* The hero grid keeps its desktop 50px gap when it stacks, which with the
       iframe margin left 66px of empty navy between the fine print and the
       sim. The sim carries its own spacing. */
    .hero .wrap{gap:0;}
    .hero-phone{
      margin-top:14px;
      transform:scale(.72);transform-origin:top center;
      margin-bottom:-157px;
    }
  }
  .hero-eyebrow{
    display:block;font-family:var(--pe-font-display);
    font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--sky);margin-bottom:6px;
  }

  /* ── Buyer chooser: rail + panel (Option A, Robb 2026-10-05) ──────────
     Four near-identical 700px cards became a rail of four and one detail
     panel. The visitor picks themselves in a tap instead of reading ~370
     words to find which card is theirs.

     Tabs on TOP was the first attempt and it left roughly 40% of a tall white
     panel empty, because only a short "Fits + button" column held the right
     half open. A rail down the LEFT fixes that structurally: it is a stretch
     flex column, so the four tabs divide the panel's height between them and
     there is no corner left over — whichever audience is selected. */
  .chooser{display:grid;grid-template-columns:272px minmax(0,1fr);gap:18px;align-items:stretch;}
  .chooser-tabs{display:flex;flex-direction:column;gap:10px;}
  /* The rail sits on the pale end of the band now, so every tab is a white card
     and the selected one is marked by a sky edge and a ring rather than by
     being the only light thing. Still no lift. */
  .chooser-tab{
    flex:1;                       /* <- what keeps the rail level with the panel */
    display:flex;flex-direction:column;justify-content:center;gap:2px;
    min-height:60px;padding:14px 16px;text-align:left;cursor:pointer;
    background:#fff;
    border:1px solid var(--line);
    border-left:3px solid transparent;
    border-radius:12px;color:var(--navy);
    box-shadow:0 8px 22px rgba(0,0,0,.16);
    font-family:var(--pe-font-display);
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  .chooser-tab:hover{border-color:#c7d0dd;}
  .chooser-tab .t-tag{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
  .chooser-tab .t-name{font-size:16px;font-weight:700;line-height:1.25;color:var(--navy);}
  .chooser-tab[aria-selected="true"]{
    border-color:var(--sky);border-left-color:var(--sky);
    box-shadow:0 0 0 1px var(--sky), 0 14px 30px rgba(0,0,0,.22);
  }
  .chooser-tab[aria-selected="true"] .t-tag{color:var(--sky-deep);}

  .chooser-panel{display:none;}
  .chooser-panel.on{display:block;}
  .chooser-card{
    background:var(--card);border-radius:16px;padding:26px 28px;color:var(--text);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
  }
  .chooser-card h3{font-size:21px;margin:0 0 6px;}
  .chooser-card .promise{font-family:var(--pe-font-display);font-weight:700;font-size:15px;color:var(--navy);margin:0 0 8px;line-height:1.35;}
  .chooser-card .who{color:var(--muted);font-size:14.5px;margin:0 0 14px;}
  /* Two columns so the list fills the panel instead of running as one narrow
     stripe down the left. break-inside stops a bullet splitting across them. */
  .chooser-card .buyer-list{margin:0 0 18px;columns:2;column-gap:34px;}
  .chooser-card .buyer-list li{break-inside:avoid;border-bottom:0;padding:7px 0 7px 22px;font-size:14.5px;}
  /* The footer runs the full width of the panel rather than stacking in a
     column beside the list — that column was the empty 40%. */
  .chooser-foot{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:16px;
  }
  .chooser-foot .fit{font-size:13.5px;color:var(--muted);margin:0 auto 0 0;}
  .chooser-foot .btn{min-height:44px;display:inline-flex;align-items:center;}
  .chooser-foot .buyer-more{font-size:13.5px;}

  @media (max-width:860px){
    /* A 2×2 grid, NOT a sideways scroller. Four tiles of uneven width
       (190/234/206/240) inside a 327px column overflowed by 567px, so the
       third and fourth were sliced mid-word at the edge and read as broken.
       All four fit now, and the accent moves to the top edge because there is
       no longer a left edge to put it on. */
    .chooser{grid-template-columns:1fr;gap:16px;}
    .chooser-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .chooser-tab{
      min-width:0;justify-content:flex-start;
      border-left-width:1px;border-top:3px solid transparent;
    }
    .chooser-tab[aria-selected="true"]{border-left-color:#fff;border-top-color:var(--sky);}
    .chooser-card{padding:24px 22px;}
    .chooser-card .buyer-list{columns:1;}
  }
  @media (max-width:600px){
    .chooser-tab{padding:12px;}
    .chooser-tab .t-tag{font-size:10.5px;}
    .chooser-tab .t-name{font-size:14px;}
    .chooser-card h3{font-size:20px;}
    .chooser-card .buyer-list li{font-size:15px;}
    /* A text link still needs a real hit area on a phone. */
    .chooser-foot .buyer-more{display:inline-flex;align-items:center;min-height:44px;}
  }

  /* ── Accordion (Features) ─────────────────────────────────────────────
     Seventeen stacked feature items ran 2,389px on a phone. Collapsed by
     default there, always open above 860px where the three columns fit. */
  .acc-head{display:none;}
  @media (max-width:860px){
    .acc .feat-group{border-top:1px solid var(--line);padding-top:0;}
    .acc .feat-group .feat-gh{display:none;}
    .acc-head{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      width:100%;min-height:56px;padding:14px 0;
      background:none;border:0;cursor:pointer;text-align:left;
      font-family:var(--pe-font-display);font-weight:800;font-size:17px;color:var(--navy);
    }
    .acc-head .acc-mark{flex:none;width:22px;height:22px;position:relative;}
    .acc-head .acc-mark:before,.acc-head .acc-mark:after{
      content:"";position:absolute;background:var(--sky-deep);border-radius:2px;
    }
    .acc-head .acc-mark:before{left:0;right:0;top:10px;height:2px;}
    .acc-head .acc-mark:after{top:0;bottom:0;left:10px;width:2px;transition:opacity .2s ease;}
    .acc-head[aria-expanded="true"] .acc-mark:after{opacity:0;}
    .acc-body{display:none;padding-bottom:10px;}
    .acc-body.on{display:block;}
  }

  /* ── Phone type ───────────────────────────────────────────────────────
     The selling copy was 13.5px. 15px is the floor for body text a customer is
     meant to actually read on a phone; meta stays above the 12px floor. */
  @media (max-width:600px){
    .buyer-list li{font-size:15px;line-height:1.5;}
    .feat-item span{font-size:14.5px;}
    .feat-item b{font-size:15.5px;}
    .role-card p{font-size:15px;}
    .quote{font-size:14.5px;}
    .trust-item p{font-size:14.5px;}
    .why-item p{font-size:14.5px;}
    .hero .fineprint{font-size:13.5px;}
  }

  /* The same accordion, applied to the three role cards. Restructuring the
     buyers band left "Who uses it" as the tallest section on a phone (1,668px
     of three stacked cards), which is the fault the chooser had just fixed one
     section earlier. One disclosure pattern for both, not a third one. */
  @media (max-width:860px){
    .acc-roles .role-grid{gap:0;}
    .acc-roles .role-card{
      padding:0;border-radius:0;border:0;border-top:1px solid var(--line);
      background:none;box-shadow:none;
    }
    .acc-roles .role-card h3{display:none;}
    .acc-roles .role-card .acc-body{padding-bottom:18px;}
    .acc-roles .role-demo{margin-top:12px;min-height:44px;}
  }

  /* Above the accordion breakpoint the wrapper must stay a flex child, or
     .role-demo{margin-top:auto} loses its flex parent and the three "Watch it
     work" links stop aligning across the cards. */
  @media (min-width:861px){
    .acc-roles .role-card .acc-body{display:flex;flex-direction:column;flex:1;}
  }

  /* ── Product shots (Features) ─────────────────────────────────────────
     Real captures of the app — dashboard, schedule, tournament bracket, and a
     league's own public site — taken against a seeded demo league
     (scripts/seed-demo-league.php) so every figure on screen is a real row
     rather than a retouched one. Each sits in browser chrome so it reads as
     the product and not as a stock image.

     ONE AT A TIME, at every width. Two across put a 1440px-wide desktop UI
     into a ~600px column — a 0.42× reduction, which on a smaller laptop was
     too small to read. Full width of the 1120px wrap is 0.78× life size, and
     the images were re-exported at 1600px so that is a downscale, not a
     stretch. A phone shows the portrait phone capture instead (-m.webp). */
  .shots-carousel{position:relative;margin:0 0 40px;}
  .shots{
    display:flex;gap:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0;padding:0;
  }
  .shots::-webkit-scrollbar{display:none;}
  .shot{flex:none;width:100%;margin:0;min-width:0;scroll-snap-align:center;}
  .shot .shot-win{
    border-radius:12px;overflow:hidden;background:#fff;
    border:1px solid var(--line);
    box-shadow:0 14px 34px rgba(17,17,36,.13);
  }
  .shot .shot-bar{
    display:flex;align-items:center;gap:5px;
    padding:8px 11px;background:#eef1f6;border-bottom:1px solid var(--line);
  }
  .shot .shot-bar i{width:8px;height:8px;border-radius:50%;background:#cfd6e2;display:block;}
  /* Declared per breakpoint so neither variant shifts while it loads. */
  .shot img{display:block;width:100%;height:auto;aspect-ratio:1600/933;}
  .shot figcaption{
    font-size:14px;line-height:1.45;color:var(--muted);
    margin:12px 2px 0;
  }
  .shot figcaption b{color:var(--text);font-family:var(--pe-font-display);font-weight:700;}

  /* ── Carousel controls ────────────────────────────────────────────────
     Bars, not dots, and 10px rectangles for the arrows — nothing here takes a
     999px radius, per the no-pill rule. The visible bar is 5px tall but the
     button around it is 44px, so the hit area is honest on a phone. */
  .shots-nav{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:6px;
  }
  .shots-dots{display:flex;gap:6px;}
  .shots-dots button{
    width:34px;height:44px;padding:0;border:0;background:none;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .shots-dots button::before{
    content:"";display:block;width:28px;height:5px;border-radius:3px;
    background:#d3d9e4;transition:background .15s ease;
  }
  .shots-dots button[aria-selected="true"]::before{background:var(--sky-deep);}
  .shots-dots button:hover::before{background:#9fb0c6;}
  .shots-dots button[aria-selected="true"]:hover::before{background:var(--sky-deep);}

  .shots-arrows{display:flex;gap:8px;}
  .shots-arrows button{
    width:44px;height:44px;padding:0;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--line);border-radius:10px;
    color:var(--navy);
    transition:background .15s ease,border-color .15s ease,opacity .15s ease;
  }
  .shots-arrows button:hover{background:#f3f6fa;border-color:#c7d0dd;}
  .shots-arrows button[disabled]{opacity:.35;cursor:default;}
  .shots-arrows button[disabled]:hover{background:#fff;border-color:var(--line);}
  .shots-arrows svg{width:18px;height:18px;display:block;}

  @media (max-width:860px){
    /* The phone capture is portrait, so the slot changes shape with it. */
    .shot img{aspect-ratio:700/1032;}
    .shot figcaption{font-size:13.5px;min-height:38px;}
  }
  @media (max-width:600px){
    /* Swiping is the native gesture here and the arrows would crowd a 375px
       row, so the bars carry the "there is more" signal on their own. */
    .shots-arrows{display:none;}
    .shots-nav{justify-content:center;}
  }