/* Hitters Franchisee Portal
   Built in hittersfranchising.com's visual language: fixed dark header with the
   bat burger, full-bleed photo hero with layered overlays, Anton headings with a
   red <em>, hairline stat rows, red hard-shadow buttons, stitch seams between
   bands. Same fonts, same vars, same button physics. */

@font-face{font-family:'Anton';src:url('/assets/fonts/anton-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/barlow-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow';src:url('/assets/fonts/barlow-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --navy:#0f1f33;
  --navy-deep:#0a1522;
  --blue:#325987;
  --red:#db3327;
  --red-dark:#b52a20;
  --light:#e5ebf7;
  --white:#fff;
  --page:#f4f6fb;
  --line:#dbe2ef;
  --muted:#5d6b80;
  --max:1180px;
  --head-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow',system-ui,sans-serif;font-weight:300;
  color:var(--navy);background:var(--white);line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.01em;
  line-height:1.05;text-transform:uppercase}
h1 em,h2 em{font-style:normal;color:var(--red)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
svg{flex:none}
picture{display:contents}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
@media(max-width:700px){ .wrap{padding:0 20px} }

.eyebrow{font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.35em;
  color:var(--red);text-transform:uppercase;display:block}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Anton',sans-serif;letter-spacing:.06em;font-size:15px;
  text-transform:uppercase;padding:16px 30px;border-radius:3px;
  border:2px solid transparent;cursor:pointer;white-space:nowrap;flex:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 0 var(--red-dark)}
.btn-red:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--red-dark)}
.btn-red:active{transform:translateY(6px);box-shadow:0 0 0 var(--red-dark)}
.btn-red[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:0 6px 0 var(--red-dark)}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline:hover{border-color:#fff}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{padding:11px 20px;font-size:13px}

/* stitch seam — straight from the marketing site */
.seam{height:26px;width:100%;background:var(--navy);position:relative;overflow:hidden}
.seam svg{position:absolute;inset:0;width:100%;height:100%}

/* ============================================================== HEADER */

header.site{
  position:fixed;top:0;left:0;right:0;z-index:300;
  background:rgba(10,21,34,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
header.site nav{
  max-width:var(--max);margin:0 auto;padding:14px 32px;
  display:flex;align-items:center;gap:26px;
}
@media(max-width:700px){ header.site nav{padding:14px 20px} }
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand img{height:32px;width:auto}
.brand span{color:var(--red);font-size:10.5px;letter-spacing:.28em;
  font-family:'Barlow';font-weight:600;text-transform:uppercase}
@media(max-width:900px){ .brand span{display:none} }

.topnav{display:flex;align-items:center;gap:6px;margin-left:8px;flex:1}
@media(max-width:1000px){ .topnav{display:none} }
.topnav .grp{position:relative}
.topnav .grp > button{
  display:flex;align-items:center;gap:6px;padding:10px 11px;border-radius:4px;
  color:var(--light);font-size:14px;font-weight:500;letter-spacing:.02em;
  white-space:nowrap;  /* five groups + Get Help must stay on one line */
  transition:background .13s ease,color .13s ease;
}
.topnav .grp > button:hover{background:rgba(255,255,255,.08);color:#fff}
.topnav .grp[data-open="true"] > button{background:rgba(255,255,255,.1);color:#fff}
.topnav .grp > button .caret{transition:transform .18s ease}
.topnav .grp[data-open="true"] > button .caret{transform:rotate(180deg)}
.menu{
  position:absolute;top:calc(100% + 9px);left:0;min-width:290px;z-index:310;
  background:var(--white);border-radius:5px;padding:8px;
  box-shadow:0 18px 44px rgba(10,21,34,.28);border:1px solid var(--line);
  display:none;
}
.topnav .grp[data-open="true"] .menu{display:block}
.menu a{
  display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:4px;
  transition:background .12s ease;
}
.menu a:hover{background:var(--page)}
.menu a svg{color:var(--blue);margin-top:2px}
.menu a b{display:block;font-family:'Barlow';font-weight:600;font-size:14.5px}
.menu a small{display:block;font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.45}

.navright{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
.locchip{
  display:none;align-items:center;gap:7px;padding:6px 13px;border-radius:100px;
  background:rgba(255,255,255,.1);color:var(--light);font-size:12.5px;font-weight:500;
}
@media(min-width:1100px){ .locchip{display:inline-flex} }
.locchip b{font-weight:600;color:#fff}

.locpick{position:relative}
/* The static franchisee chip is decoration and hides on narrow screens; the HQ
   picker is a control, so it stays until there is genuinely no room. */
.locchip.as-btn{display:inline-flex;cursor:pointer;transition:background .13s ease}
@media(max-width:620px){ .locchip.as-btn{display:none} }
.locchip.as-btn:hover{background:rgba(255,255,255,.17)}
.locchip .caret{display:flex;opacity:.7}
.locpick[data-open="true"] .locmenu{display:block}
.locmenu{right:auto;left:0;min-width:270px}
.locmenu button{align-items:flex-start}

.userbtn{display:flex;align-items:center;gap:9px;padding:5px;border-radius:100px;
  transition:background .13s ease}
.userbtn:hover{background:rgba(255,255,255,.09)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--blue);flex:none;
  display:grid;place-items:center;font-family:'Anton',sans-serif;font-size:13px;color:#fff}
.usermenu{
  position:absolute;top:calc(100% + 9px);right:0;min-width:250px;z-index:310;
  background:var(--white);border-radius:5px;border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(10,21,34,.28);display:none;overflow:hidden;
}
.navright{position:relative}
.navright[data-open="true"] .usermenu{display:block}
.usermenu .who{padding:16px 17px;border-bottom:1px solid var(--line)}
.usermenu .who b{display:block;font-family:'Barlow';font-weight:600;font-size:15px}
.usermenu .who span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.usermenu button,.usermenu a{display:flex;align-items:center;gap:10px;width:100%;
  padding:13px 17px;font-size:14.5px;text-align:left;transition:background .12s ease}
.usermenu button:hover,.usermenu a:hover{background:var(--page)}

/* bat burger, morphing to an X — same gesture as the marketing site */
.burger{display:none;align-items:center;gap:10px;padding:6px 4px;margin-left:auto}
@media(max-width:1000px){ .burger{display:flex} }
.burger-label{color:#fff;font-family:'Anton',sans-serif;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase}
.burger-icon{display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:32px;height:32px}
.burger-icon .bat{display:block;width:31px;height:11px;color:#fff;transform-origin:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.burger[aria-expanded="true"] .bat-1{transform:translateY(11px) rotate(40deg)}
.burger[aria-expanded="true"] .bat-2{opacity:0;transform:scale(.5)}
.burger[aria-expanded="true"] .bat-3{transform:translateY(-11px) rotate(-40deg)}

#mobileMenu{
  position:fixed;inset:0;z-index:150;background:var(--navy-deep);
  padding:calc(var(--head-h) + 24px) 24px 48px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
}
#mobileMenu.open{opacity:1;visibility:visible;transform:none}
#mobileMenu .mgrp{max-width:520px;margin:0 auto 30px}
#mobileMenu .mgrp > span{display:block;font-family:'Anton',sans-serif;font-size:11px;
  letter-spacing:.3em;color:var(--red);text-transform:uppercase;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:6px}
#mobileMenu a{display:block;color:#fff;padding:13px 0;font-family:'Anton',sans-serif;
  font-size:clamp(20px,4.4vw,28px);letter-spacing:.02em;text-transform:uppercase}
#mobileMenu a:hover{color:var(--red)}

/* ================================================================ HERO */

main{padding-top:var(--head-h)}

.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;
  padding:96px 0 84px}
.hero.compact{padding:60px 0 54px}
.hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:65% 40%}
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(219,51,39,.22), transparent 55%),
    linear-gradient(90deg, rgba(10,21,34,.97) 0%, rgba(10,21,34,.9) 32%, rgba(10,21,34,.6) 58%, rgba(10,21,34,.32) 100%),
    linear-gradient(180deg, rgba(10,21,34,.75) 0%, rgba(10,21,34,.15) 30%, rgba(10,21,34,.35) 75%, rgba(10,21,34,.85) 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:760px}
.hero h1{font-size:clamp(34px,5.6vw,62px);color:#fff;margin:14px 0 20px}
.hero.compact h1{font-size:clamp(30px,4.4vw,46px);margin:12px 0 12px}
.hero p.lead{font-size:18.5px;font-weight:300;max-width:560px;
  color:rgba(255,255,255,.85);margin-bottom:30px}
.hero.compact p.lead{margin-bottom:0;font-size:17px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px}
.hero-stats{display:flex;flex-wrap:wrap;margin-top:48px;
  border-top:1px solid rgba(255,255,255,.2);padding-top:26px}
.hero-stats div{padding-right:36px;margin-right:36px;
  border-right:1px solid rgba(255,255,255,.2);margin-bottom:10px}
.hero-stats div:last-child{border-right:none;padding-right:0;margin-right:0}
.hero-stats b{font-family:'Anton',sans-serif;font-size:26px;color:#fff;display:block;
  text-shadow:0 2px 12px rgba(0,0,0,.4)}
.hero-stats span{font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.6);
  text-transform:uppercase;margin-top:4px;display:block}

/* breadcrumb inside a compact hero */
.crumbs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px;
  color:rgba(255,255,255,.65);margin-bottom:18px}
.crumbs a{color:rgba(255,255,255,.85);font-weight:400}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs .sep{opacity:.45}

/* ============================================================== BANDS */

.band{padding:74px 0;background:var(--white)}
.band.tintband{background:var(--page)}
.band.navyband{background:var(--navy);color:#fff}
.band.tight{padding:52px 0}
.band-head{margin-bottom:34px;max-width:680px}
.band-head h2{font-size:clamp(26px,3.4vw,38px);margin:12px 0 12px}
.band.navyband .band-head h2{color:#fff}
.band-head p{color:var(--muted);font-size:16.5px}
.band.navyband .band-head p{color:rgba(229,235,247,.75)}

/* ---- group cards (the "what you need" grid) ---- */
.gridcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.gcard{
  background:var(--white);border:1px solid var(--line);border-radius:6px;padding:26px;
  display:flex;flex-direction:column;gap:12px;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.gcard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,31,51,.12);
  border-color:var(--blue)}
.gcard .ic{width:44px;height:44px;border-radius:6px;background:var(--light);
  color:var(--blue);display:grid;place-items:center}
.gcard h3{font-size:17px;letter-spacing:.05em}
/* Blurb must NOT flex:1 — pushing the list to the bottom leaves a ragged gap on
   groups with fewer sections. Top-aligned lists read as one row. */
.gcard p{font-size:14.5px;color:var(--muted);line-height:1.55}
.gcard .more{font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.14em;
  color:var(--red);display:flex;align-items:center;gap:7px}

/* ---- announcements ---- */
.anns{display:flex;flex-direction:column;gap:18px}
.ann{background:var(--white);border:1px solid var(--line);border-radius:6px;
  padding:26px 28px;position:relative;overflow:hidden}
.ann.unread{border-left:4px solid var(--red);padding-left:26px}
.ann-top{display:flex;align-items:center;gap:11px;margin-bottom:10px;flex-wrap:wrap}
.ann h3{font-size:19px;letter-spacing:.03em;flex:1;min-width:220px}
.ann .when{font-size:13px;color:var(--muted);white-space:nowrap}
.pin{font-family:'Anton',sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--red);color:#fff;padding:4px 9px;border-radius:3px}
.ann p.body{font-size:15.5px;color:#33415a;white-space:pre-line;line-height:1.65;font-weight:300}
.ann .by{font-size:13px;color:var(--muted);margin-top:14px}
.ann .act{margin-top:16px}
.ann .read-at{font-size:13px;color:#2e7d4f;margin-top:15px;display:flex;align-items:center;gap:7px}

/* ---- quick links on navy ---- */
.qlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.qlink{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:6px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  transition:background .14s ease,border-color .14s ease}
.qlink:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.25)}
.qlink svg{color:#fff;opacity:.8}
.qlink b{display:block;font-family:'Barlow';font-weight:600;font-size:15.5px;color:#fff}
.qlink small{display:block;font-size:13px;color:rgba(229,235,247,.65);font-weight:300;line-height:1.45}
.qlink .go{margin-left:auto;color:rgba(255,255,255,.5)}
.qlink.off{opacity:.45;cursor:default}

/* ---- roadmap ---- */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0}
.rstep{padding:0 16px 0 0;position:relative}
.rstep .dot{width:13px;height:13px;border-radius:50%;background:var(--line);
  margin-bottom:14px;position:relative;z-index:2}
.rstep.done .dot{background:#2e7d4f}
.rstep.now .dot{background:var(--red);box-shadow:0 0 0 5px rgba(219,51,39,.18)}
.rstep::before{content:'';position:absolute;left:6px;top:6px;right:0;height:2px;
  background:var(--line);z-index:1}
.rstep:last-child::before{display:none}
.rstep b{display:block;font-family:'Barlow';font-weight:600;font-size:14.5px;line-height:1.35}
.rstep span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
@media(max-width:760px){
  .roadmap{grid-template-columns:1fr;gap:0}
  .rstep{padding:0 0 20px 26px}
  .rstep .dot{position:absolute;left:0;top:2px;margin:0}
  .rstep::before{left:6px;top:14px;bottom:0;right:auto;width:2px;height:auto}
}

/* ---- folders + files ---- */
.folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px;
  margin-bottom:34px}
.folder{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:20px;
  display:flex;align-items:center;gap:13px;cursor:pointer;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.folder:hover{border-color:var(--blue);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(15,31,51,.1)}
.folder svg{color:var(--blue)}
.folder b{font-family:'Barlow';font-weight:600;font-size:15.5px}

.files{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.file{display:flex;align-items:center;gap:16px;padding:17px 22px;
  border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s ease}
.file:last-child{border-bottom:none}
.file:hover{background:var(--page)}
.ficon{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;flex:none;
  background:var(--light);color:var(--blue)}
.ficon.pdf{background:#fdecea;color:var(--red)}
.ficon.sheet{background:#e7f4ec;color:#1d6b3d}
.ficon.image{background:#eaf0fb;color:var(--blue)}
.ficon.deck{background:#fff2d9;color:#9a6b04}
.fmeta{flex:1;min-width:0}
.fmeta b{display:block;font-family:'Barlow';font-weight:500;font-size:15.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmeta span{font-size:13px;color:var(--muted)}
.fdl{color:var(--muted);padding:10px;border-radius:5px;display:grid;place-items:center}
.fdl:hover{color:var(--blue);background:var(--light)}

/* ---- gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.tile{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,31,51,.14);
  border-color:var(--blue)}
.tile .shot{height:168px;background:var(--navy-deep);display:grid;place-items:center;
  overflow:hidden;position:relative}
.tile .shot img{width:100%;height:100%;object-fit:cover;display:block}
.tile .shot img.contain{object-fit:contain;padding:18px}
.tile .shot > span{color:rgba(229,235,247,.38)}
.tile .cap{padding:14px 16px}
.tile .cap b{display:block;font-family:'Barlow';font-weight:500;font-size:14.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .cap span{font-size:12px;color:var(--muted)}

/* ---- empty / loading ---- */
.empty{background:var(--white);border:1px dashed var(--line);border-radius:6px;
  padding:64px 30px;text-align:center;color:var(--muted)}
.empty svg{color:var(--line);margin:0 auto 16px}
.empty b{display:block;font-family:'Anton',sans-serif;font-size:19px;color:var(--navy);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.skeleton{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:24px}
.sk{height:15px;background:linear-gradient(90deg,#eef1f7,#e2e8f4,#eef1f7);
  background-size:200% 100%;border-radius:4px;animation:sk 1.3s infinite;margin-bottom:14px}
.sk:last-child{margin-bottom:0}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---- forms ---- */
.field{margin-bottom:20px}
.field label{display:block;font-family:'Anton',sans-serif;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy);margin-bottom:9px}
.field input,.field textarea,.field select{
  width:100%;padding:15px 16px;border:2px solid var(--line);border-radius:4px;
  background:var(--white);font-size:16px;font-weight:400;transition:border-color .15s ease}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue)}
.field textarea{resize:vertical;min-height:150px;line-height:1.6}
.msg{padding:15px 17px;border-radius:4px;font-size:15px;margin-bottom:22px;line-height:1.55}
.msg-ok{background:#eaf5ee;border-left:3px solid #2e7d4f;color:#1d5335}
.msg-err{background:#fdeceb;border-left:3px solid var(--red);color:#8d2019}
.msg-dev{background:#fff8e6;border-left:3px solid #b8860b;color:#6b4d05;word-break:break-all}
.msg-dev a{color:var(--blue);font-weight:600;text-decoration:underline}

.panel{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.panel-head{padding:20px 26px;border-bottom:1px solid var(--line)}
.panel-head h3{font-size:17px;letter-spacing:.07em}
.panel-body{padding:26px}
.panel-body.tight{padding:10px}
.linklist a{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:5px;
  transition:background .13s ease}
.linklist a:hover{background:var(--page)}
.linklist a svg{color:var(--blue)}
.linklist a b{display:block;font-family:'Barlow';font-weight:600;font-size:15px}
.linklist a small{display:block;font-size:13px;color:var(--muted);font-weight:300}
.linklist a .go{margin-left:auto;color:var(--muted)}
.helpwrap{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}
@media(max-width:900px){ .helpwrap{grid-template-columns:1fr} }
.panel-note{font-size:14px;color:var(--muted);line-height:1.65;padding:0 26px 26px}
.panel-note b{color:var(--navy);font-weight:600}
.note{font-size:13.5px;color:var(--muted);margin-top:20px;line-height:1.65}

/* section links inside a group card on the home page */
.seclist{display:flex;flex-direction:column;gap:1px;margin-top:4px;
  border-top:1px solid var(--line);padding-top:12px}
.seclist a{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:14.5px;
  color:var(--navy);transition:color .12s ease}
.seclist a:hover{color:var(--red)}
.seclist a svg{color:var(--red);opacity:.65}

/* ============================================================== LOGIN */

.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-art{position:relative;background:var(--navy-deep);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:56px}
.login-art img.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.login-art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,21,34,.96) 8%,rgba(10,21,34,.45) 70%,rgba(10,21,34,.7))}
.login-art .art-copy{position:relative;z-index:2;color:#fff;max-width:460px}
.login-art h2{font-size:clamp(38px,4vw,58px);color:#fff;margin:14px 0 16px}
.login-art p{font-weight:300;color:rgba(229,235,247,.82);font-size:17px}
.login-art .mark{position:absolute;right:-70px;bottom:-70px;width:380px;opacity:.06;z-index:1}
.login-form{display:flex;flex-direction:column;justify-content:center;padding:56px;background:var(--white)}
.login-inner{width:100%;max-width:392px;margin:0 auto}
.login-inner img.logo{height:44px;width:auto;margin-bottom:38px}
.login-inner h1{font-size:34px;margin:12px 0 10px}
.login-inner .sub{color:var(--muted);margin-bottom:28px;font-size:15px}
@media(max-width:900px){
  .login{grid-template-columns:1fr}
  .login-art{display:none}
  .login-form{padding:38px 24px}
}

/* ========================================================== CORPORATE */

.corp-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.tallies{display:flex;gap:0;flex-wrap:wrap;flex:1}
.tallies div{padding-right:28px;margin-right:28px;border-right:1px solid var(--line)}
.tallies div:last-child{border-right:none;padding-right:0;margin-right:0}
.tallies b{display:block;font-family:'Anton',sans-serif;font-size:26px;line-height:1;
  font-variant-numeric:tabular-nums}
.tallies span{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-top:5px}

/* pipeline board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(238px,1fr);gap:14px;
  overflow-x:auto;padding-bottom:10px;align-items:start}
.col{background:var(--white);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.colhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-bottom:1px solid var(--line);background:var(--white)}
.colhead b{font-family:'Anton',sans-serif;font-weight:400;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase}
.colhead span{font-size:12px;font-weight:600;color:var(--muted);background:var(--page);
  border-radius:100px;padding:2px 9px;font-variant-numeric:tabular-nums}
.colbody{padding:10px;display:flex;flex-direction:column;gap:10px;min-height:70px}
.colempty{font-size:13px;color:var(--muted);text-align:center;padding:16px 8px}

.pcard{background:var(--page);border:1px solid var(--line);border-radius:5px;padding:13px 14px;
  display:flex;flex-direction:column;gap:6px;cursor:pointer;
  transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.pcard:hover{border-color:var(--blue);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(15,31,51,.1)}
.pcard b{font-family:'Barlow';font-weight:600;font-size:14.5px;line-height:1.3}
.pcard .mkt{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.pcard .step{font-size:13px;color:#33415a;line-height:1.45}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px}
.pfoot .due{font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pfoot .due.over{color:var(--red)}
.pfoot .own{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  background:var(--light);color:var(--blue);padding:2px 8px;border-radius:100px}

.lostbox{margin-top:22px;background:var(--white);border:1px solid var(--line);border-radius:6px}
.lostbox summary{padding:15px 20px;cursor:pointer;font-family:'Anton',sans-serif;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase}
.lostgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;
  padding:0 16px 16px}

/* ---- Admin button + corporate sub-nav ---- */
.adminbtn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:9px 17px;border-radius:100px;border:1.5px solid rgba(219,51,39,.55);
  background:rgba(219,51,39,.16);color:#fff;
  font-family:'Anton',sans-serif;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.adminbtn:hover{background:var(--red);border-color:var(--red);transform:translateY(-1px)}
.adminbtn svg{opacity:.9}
@media(max-width:1000px){ .adminbtn{display:none} }
#mobileMenu .madmin{
  display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;
  padding:14px 24px;border-radius:100px;font-size:clamp(18px,3.6vw,22px);
  box-shadow:0 5px 0 var(--red-dark);margin-bottom:6px;
}
#mobileMenu .madmin:hover{color:#fff}

.corptabs{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.09)}
.corptabs .wrap{display:flex;gap:4px;overflow-x:auto;padding-top:0;padding-bottom:0}
.corptabs a{
  display:inline-flex;align-items:center;gap:7px;padding:15px 15px;white-space:nowrap;
  color:rgba(229,235,247,.66);font-size:13.5px;font-weight:500;
  border-bottom:3px solid transparent;transition:color .13s ease,border-color .13s ease;
}
.corptabs a:hover{color:#fff}
.corptabs a.on{color:#fff;border-bottom-color:var(--red)}
.corptabs::-webkit-scrollbar{height:0}

.corptile{text-decoration:none}
.corptile .tilestat{
  font-family:'Anton',sans-serif;font-size:21px;color:var(--red);letter-spacing:.01em;
  margin:-4px 0 2px;
}

/* ---- admin door ---- */
.adminswitch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
footer.site .adminlink{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:7px 14px;border:1px solid rgba(229,235,247,.22);border-radius:100px;
  color:rgba(229,235,247,.72);font-size:12.5px;font-weight:500;transition:all .14s ease}
footer.site .adminlink:hover{border-color:var(--red);color:#fff;background:rgba(219,51,39,.18)}

.adminpage{min-height:100vh;background:var(--navy-deep);display:grid;place-items:center;
  padding:40px 24px;position:relative;overflow:hidden}
.adminpage .mark{position:absolute;right:-120px;bottom:-120px;width:520px;opacity:.05}
.adminbox{position:relative;z-index:2;width:100%;max-width:420px;background:var(--white);
  border-radius:8px;padding:44px 40px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
@media(max-width:520px){ .adminbox{padding:32px 24px} }
.adminbox .logo{height:34px;width:auto;margin-bottom:30px}
.adminbox h1{font-size:30px;margin:11px 0 10px}
.adminbox .sub{color:var(--muted);font-size:15px;margin-bottom:26px}
.adminbox .sub a{color:var(--blue);font-weight:500}
.adminbox .note{font-size:13px;color:var(--muted);margin-top:22px;line-height:1.6;
  padding-top:18px;border-top:1px solid var(--line)}

/* ---- franchisee directory ---- */
.searchrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.searchrow input{flex:1;padding:13px 16px;border:2px solid var(--line);border-radius:4px;
  font-size:15px;background:var(--white)}
.searchrow input:focus{outline:none;border-color:var(--blue)}
.searchrow span{font-size:13px;color:var(--muted);white-space:nowrap}

.frangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.francard{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:22px;
  display:flex;flex-direction:column;gap:14px}
.franhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.franhead b{font-family:'Barlow';font-weight:600;font-size:16.5px;display:block}
.franhead span{font-size:13px;color:var(--muted);display:block;margin-top:2px}
.franusers{display:flex;flex-direction:column;gap:6px;padding:12px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fu{font-size:13.5px;display:flex;align-items:center;gap:9px}
.fu i{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;background:var(--light);color:var(--blue);
  padding:2px 7px;border-radius:100px;flex:none}
.fu.none{color:var(--muted);font-style:italic}
.franact{display:flex;gap:10px;flex-wrap:wrap}

.viewingas{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:rgba(219,51,39,.16);border:1px solid rgba(219,51,39,.4);
  color:#fff;font-size:13.5px;padding:8px 15px;border-radius:100px;margin-bottom:14px}
.viewingas b{font-weight:600}
.viewingas a{color:#fff;text-decoration:underline;opacity:.85;margin-left:4px}
.viewingas a:hover{opacity:1}

/* ---- corporate team ---- */
.teamgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.teamcard{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:22px;
  display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:start}
.avatar.big{width:48px;height:48px;font-size:16px}
.tinfo{min-width:0}
.tinfo b{font-family:'Barlow';font-weight:600;font-size:16px;display:block}
.tinfo span{display:block;font-size:13px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tinfo .ttitle{color:var(--blue);font-weight:500;margin-top:2px}
/* Must beat `.tinfo span{display:block}`, which would stretch the badge full-width. */
.tinfo b .you{display:inline-block;width:auto;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;background:var(--light);color:var(--blue);
  padding:2px 8px;border-radius:100px;vertical-align:2px;margin-left:6px}
.pwstate{grid-column:1/-1;font-size:12px;font-weight:600;padding:5px 12px;border-radius:100px;
  justify-self:start}
.pwstate.on{background:#e7f2eb;color:#1f6b45}
.pwstate.off{background:#faf1dc;color:#8a6106}
.tact{grid-column:1/-1;display:flex;gap:9px}
.teamnote{font-size:14px;color:var(--muted);line-height:1.65;max-width:70ch;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}

.subhead{font-size:15px;letter-spacing:.06em;margin:26px 0 6px;padding-top:20px;
  border-top:1px solid var(--line)}
.subnote{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.userrow{display:grid;grid-template-columns:1fr 1.3fr 96px;gap:10px;margin-bottom:10px}
.userrow input,.userrow select{padding:11px 13px;border:2px solid var(--line);border-radius:4px;
  font-size:14.5px;background:var(--white);min-width:0}
.userrow input:focus,.userrow select:focus{outline:none;border-color:var(--blue)}
@media(max-width:560px){ .userrow{grid-template-columns:1fr} }

/* The token is the one thing anyone actually needs off this panel, so it gets
   its own row rather than being buried in the middle of a code sample. */
.tokenrow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--red);border-radius:6px;padding:16px 18px;margin-bottom:16px}
.tokenrow .tlabel{display:block;font-family:'Anton',sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tokenrow code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  color:var(--navy);word-break:break-all;user-select:all}
.snipwrap{margin-bottom:16px}
.snipwrap summary{cursor:pointer;font-size:14px;color:var(--blue);font-weight:500;
  padding:6px 0}
.snipwrap summary:hover{text-decoration:underline}

/* website form → pipeline setup */
.intakebox{margin-top:26px;background:var(--white);border:1px solid var(--line);border-radius:6px}
.intakebox summary{padding:16px 22px;cursor:pointer;display:flex;align-items:center;gap:11px;
  flex-wrap:wrap;font-family:'Anton',sans-serif;font-size:13px;letter-spacing:.09em;
  text-transform:uppercase}
.intakebox summary svg{color:var(--blue)}
.ibadge{font-family:'Barlow';font-weight:600;font-size:11px;letter-spacing:.06em;
  text-transform:none;padding:3px 10px;border-radius:100px}
.ibadge.on{background:#e7f2eb;color:#1f6b45}
.ibadge.off{background:#faf1dc;color:#8a6106}
.intakebody{padding:0 22px 22px}
.intakebody > p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:72ch;margin-bottom:16px}
.intakebody b{color:var(--navy);font-weight:600}
.codewrap{position:relative;background:var(--navy-deep);border-radius:6px;overflow:hidden}
.codewrap button{position:absolute;top:10px;right:10px;z-index:2;
  background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.codewrap button:hover{background:rgba(255,255,255,.2);color:#fff;border-color:#fff}
.codewrap pre{margin:0;padding:20px 22px;overflow-x:auto;color:#dbe6f7;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.65}
.intakefoot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted)}

/* tracker — status palette (validated): green/amber/red + a labeled neutral */
.st-done{--st:#1f6b45;--st-bg:#e7f2eb}
.st-prog{--st:#bd8117;--st-bg:#faf1dc}
.st-block{--st:#b52a20;--st-bg:#fdecea}
.st-todo{--st:#8ea2c6;--st-bg:#edf1f8}

.trackmeta{font-size:13px;color:var(--muted);margin-bottom:22px}

.progresspanel{margin-bottom:30px}
.progresspanel .panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.legend{display:flex;gap:16px;flex-wrap:wrap}
.legend .lg{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted)}
.legend .lg i{width:11px;height:11px;border-radius:3px;background:var(--st);display:block}

.progressrows{display:flex;flex-direction:column;gap:4px}
.prow{display:grid;grid-template-columns:220px 1fr 52px;align-items:center;gap:16px;
  width:100%;padding:9px 10px;border-radius:5px;text-align:left;
  transition:background .12s ease;cursor:pointer}
.prow:hover{background:var(--page)}
.prow .pname{font-family:'Barlow';font-weight:600;font-size:14.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppct{font-family:'Anton',sans-serif;font-size:15px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--navy)}
@media(max-width:700px){
  .prow{grid-template-columns:1fr 60px;grid-template-rows:auto auto;gap:6px 12px}
  .prow .pname{grid-column:1/-1}
}

/* stacked bar: 2px surface gaps between segments, rounded ends */
.stack{display:flex;gap:2px;height:14px;min-width:120px;flex:1}
.stack.big{height:18px}
.stack .seg{display:block;border-radius:2px;background:var(--st);min-width:6px}
.stack .seg:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}
.stack .seg:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}

.tooltip{position:absolute;z-index:500;background:var(--navy);color:#fff;font-size:12.5px;
  font-weight:500;padding:6px 11px;border-radius:4px;pointer-events:none;
  transform:translateX(-50%);white-space:nowrap;box-shadow:0 6px 18px rgba(10,21,34,.3)}

/* workstream sections */
.wsec{margin-top:34px;scroll-margin-top:calc(var(--head-h) + 16px)}
.wsec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:14px}
.wsec-head h3{font-size:20px;letter-spacing:.05em}
.wsec-head p{font-size:14px;color:var(--muted);margin-top:5px;max-width:560px}
.wsec-side{display:flex;align-items:center;gap:12px;min-width:220px;flex:0 1 300px}

.tracktable{border-collapse:collapse;width:100%;min-width:760px;background:var(--white);
  font-size:14.5px}
.tracktable th,.tracktable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
.tracktable thead th{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;
  font-size:12px;letter-spacing:.09em;border-bottom:2px solid var(--line);white-space:nowrap;
  color:var(--muted)}
.tracktable tbody tr:last-child td{border-bottom:none}
.tracktable tbody tr:hover{background:var(--page)}
.tracktable .cnum{width:34px;color:var(--muted);font-variant-numeric:tabular-nums}
.tracktable .ctask b{font-family:'Barlow';font-weight:600;font-size:14.8px;display:block}
.tracktable .ctask small{display:block;font-size:13px;color:var(--muted);line-height:1.5;
  margin-top:3px;max-width:52ch}
.tracktable .ctask small.tnote{color:#8a6106}
.scroller{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:6px}

/* inline editors — selects styled as what they set */
.tracktable select{border:1px solid transparent;border-radius:100px;padding:5px 26px 5px 12px;
  font-size:13px;font-weight:600;cursor:pointer;background:var(--page);color:var(--navy);
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235d6b80' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border-color .13s ease}
.tracktable select:hover{border-color:var(--blue)}
.tracktable select:disabled{opacity:.5}
.tracktable select.stsel{background-color:var(--st-bg);color:var(--st)}
.tracktable .cown select{max-width:110px;overflow:hidden;text-overflow:ellipsis}

.prio{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  white-space:nowrap;color:var(--muted)}
.prio.critical{color:var(--red)}
.prio.high{color:var(--navy)}

/* upload dropzone */
.drop{background:var(--white);border:2px dashed var(--line);border-radius:8px;
  padding:44px 26px;text-align:center;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:9px;transition:border-color .15s ease,background .15s ease}
.drop.small{padding:28px 22px;margin-top:22px}
.drop:hover,.drop.over{border-color:var(--red);background:#fffafa}
.drop svg{color:var(--blue)}
.drop b{font-family:'Anton',sans-serif;font-size:17px;letter-spacing:.05em;text-transform:uppercase}
.drop span{font-size:14px;color:var(--muted);max-width:420px}
#tmsg,#umsg{margin-top:16px}

/* edit sheet */
.overlay.sheet{align-items:center;justify-content:center;padding:24px}
.sheetbox{background:var(--white);border-radius:8px;width:100%;max-width:620px;
  max-height:100%;display:flex;flex-direction:column;overflow:hidden}
.sheethead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 24px;border-bottom:1px solid var(--line)}
.sheethead h3{font-size:18px;letter-spacing:.05em}
.sheethead .x{color:var(--muted);padding:8px;border-radius:5px;display:grid;place-items:center}
.sheethead .x:hover{color:var(--navy);background:var(--page)}
.sheetbody{padding:24px;overflow-y:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){ .two{grid-template-columns:1fr} }
.sheetact{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}

/* ---- preview overlay ---- */
.overlay{position:fixed;inset:0;background:rgba(10,21,34,.9);z-index:400;
  display:flex;flex-direction:column;padding:26px}
.overlay-bar{display:flex;align-items:center;gap:14px;color:#fff;margin-bottom:16px}
.overlay-bar b{font-family:'Barlow';font-weight:600;font-size:16px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overlay-bar .x{color:rgba(255,255,255,.75);padding:9px;border-radius:5px;
  display:grid;place-items:center}
.overlay-bar .x:hover{color:#fff;background:rgba(255,255,255,.12)}
.overlay-body{flex:1;min-height:0;background:#fff;border-radius:6px;overflow:hidden;
  display:grid;place-items:center}
.overlay-body iframe{width:100%;height:100%;border:none}
.overlay-body img{max-width:100%;max-height:100%;object-fit:contain}
.overlay-body .fallback{text-align:center;padding:60px 30px;color:var(--muted)}
.overlay-body .fallback svg{margin:0 auto 16px;color:var(--line)}

/* ---- footer ---- */
footer.site{background:var(--navy-deep);color:rgba(229,235,247,.6);padding:44px 0;
  font-size:13.5px}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center}
footer.site img{height:26px;width:auto;opacity:.85}
footer.site a{color:var(--light);text-decoration:underline}
footer.site .spacer{flex:1}

/* ---- dev banner ---- */
.devbar{background:#7a5504;color:#fff5df;font-size:13.5px;padding:10px 0}
.devbar .wrap{display:flex;align-items:center;gap:10px}
.devbar b{font-weight:700}