/* ═══════════════════════════════════════════════════════════════════════════
   STATFORM — BRAND
   Colours sampled from the Ellchart logo, not approximated:
     navy  #002D62   red  #FF1717   grey  #68696E
   Navy carries the interface. Red is an ACCENT and is rationed — it marks the
   live module, the sign-in action, and anything that needs attention. A red
   that appears everywhere stops meaning anything, and this one is loud enough
   that it has to earn each appearance.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --navy:#002D62; --navy-700:#00214A; --navy-500:#0B4A92; --navy-300:#5B84BC;
  --red:#FF1717;  --red-700:#D40E0E;  --red-tint:#FFF1F1;
  --grey:#68696E; --grey-400:#9A9BA1;
  --ink:#10192B; --page:#F4F6FA; --card:#FFFFFF;
  --tint:#E9F0F9; --line:#DCE3EE;
  --ok:#1A6B2B; --warn:#8A5A00;
  --r:12px; --shadow:0 1px 2px rgba(16,25,43,.06), 0 8px 24px rgba(16,25,43,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;background:var(--page);color:var(--ink);
     -webkit-font-smoothing:antialiased;line-height:1.5}
h1,h2,h3,.brandword{font-family:'Poppins','Inter',system-ui,sans-serif;letter-spacing:-.01em}
a{color:var(--navy-500)}

/* The three-square motif from the logo, used as a small mark in the header. */
.mark{display:inline-grid;grid-template-columns:10px 10px;grid-template-rows:10px 10px;gap:2px;flex:0 0 auto}
.mark i{border-radius:2px;display:block}
.mark i:nth-child(1){background:var(--grey)}
.mark i:nth-child(2){background:transparent}
.mark i:nth-child(3){background:var(--navy)}
.mark i:nth-child(4){background:var(--red)}

.topbar{background:var(--navy);color:#fff;padding:14px 24px;display:flex;align-items:center;gap:14px}
.topbar .logo{height:30px;width:auto;display:block;background:#fff;padding:5px 9px;border-radius:6px}
.topbar .brandword{font-weight:600;font-size:1.05rem;letter-spacing:.02em}
.topbar .spacer{flex:1}
.topbar .who{font-size:.85rem;color:#C7D5E8}
.topbar a.navlink:hover{color:#fff}
@media(max-width:560px){ .topbar a.navlink{display:none} }
.btn{font:inherit;font-weight:600;border:0;border-radius:8px;padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-700)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn[disabled]{background:var(--line);color:var(--grey-400);cursor:not-allowed}

.wrap{max-width:1040px;margin:0 auto;padding:34px 24px 64px}
.lede{color:var(--grey);margin-top:6px}

.clientblock{margin-top:30px}
.clientname{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.clientname h2{font-size:1.15rem}
.clientname .count{color:var(--grey);font-size:.85rem}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;
      box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
/* A red rule marks a module that is live. Muted tiles get no rule at all — the
   difference should be visible before any text is read. */
.tile.live::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--red)}
.tile.muted{background:#FAFBFD;border-style:dashed}
.tile h3{font-size:1.05rem}
.tile p{color:var(--grey);font-size:.9rem;min-height:38px}
.tile .foot{margin-top:auto;display:flex;align-items:center;gap:10px;justify-content:space-between}
.badge{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
       padding:4px 9px;border-radius:999px;white-space:nowrap}
.badge.active{background:var(--tint);color:var(--navy)}
.badge.suspended,.badge.expired{background:var(--red-tint);color:var(--red-700)}
.badge.none{background:#F0F1F3;color:var(--grey)}
.limits{font-size:.8rem;color:var(--grey)}

.adminstrip{margin-top:34px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--navy);
            border-radius:var(--r);background:var(--card)}
.adminstrip h3{font-size:.95rem;margin-bottom:4px}
.adminstrip .links{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:.9rem}

.signin{max-width:400px;margin:70px auto;background:var(--card);border:1px solid var(--line);
        border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.signin h1{font-size:1.3rem;margin-bottom:4px}
.field{margin-top:16px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--grey);margin-bottom:5px}
.field input{width:100%;font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.field input:focus{outline:2px solid var(--navy-300);outline-offset:1px;border-color:var(--navy-500)}
.msg{margin-top:14px;padding:11px 13px;border-radius:8px;font-size:.88rem;display:none}
.msg.err{display:block;background:var(--red-tint);color:var(--red-700);border:1px solid #FFD3D3}
.msg.info{display:block;background:var(--tint);color:var(--navy);border:1px solid #CFE0F2}
.foot-note{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);color:var(--grey);font-size:.83rem}
.skeleton{color:var(--grey);padding:26px 0}
@media (max-width:560px){ .topbar{flex-wrap:wrap} .topbar .who{width:100%;order:9} }
/* ═══════════════════════════════════════════════════════════════════════════
   MARKETING HOME
   Structure and photography follow the existing ebsmasterclass Digital Tools
   page — same Pexels images, same card rhythm — restated in Statform's brand
   colours and the Prepare / Review / Consolidate naming.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav{background:var(--navy);color:#fff;padding:13px 24px;display:flex;align-items:center;gap:13px;position:sticky;top:0;z-index:20}
.nav .logo{height:30px;width:auto;display:block;background:#fff;padding:5px 9px;border-radius:6px}
.nav .brandword{font-weight:600;font-size:1.05rem}
.nav .spacer{flex:1}
.nav a.navlink{color:#C7D5E8;text-decoration:none;font-weight:500;font-size:.92rem;margin-right:18px}
.nav a.navlink:hover{color:#fff}
@media(max-width:640px){ .nav a.navlink{display:none} }

.hero{position:relative;color:#fff;padding:92px 24px 96px;text-align:center;
  background-color:var(--navy);
  background-image:linear-gradient(rgba(0,45,98,.78),rgba(0,33,74,.86)),
    url("https://images.pexels.com/photos/30688592/pexels-photo-30688592.jpeg?auto=compress&cs=tinysrgb&w=1600");
  background-size:cover;background-position:center}
.hero .inner{max-width:880px;margin:0 auto}
.hero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;font-weight:700;letter-spacing:.12em;
               text-transform:uppercase;color:#A9C6E8;margin-bottom:18px}
.hero .eyebrow::before{content:"";width:26px;height:3px;background:var(--red);border-radius:2px}
.hero h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.14}
.hero p{margin:20px auto 0;font-size:1.08rem;color:#DCE7F4;max-width:62ch}
.hero .cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.section{max-width:1120px;margin:0 auto;padding:60px 24px}
.section h2{font-size:1.65rem}
.section .sub{color:var(--grey);margin-top:8px;max-width:64ch}

.modcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:32px}
.modcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
         box-shadow:var(--shadow);display:flex;flex-direction:column}
.modcard .pic{height:172px;background-size:cover;background-position:center;
  background-color:#1D4E86;background-image:linear-gradient(135deg,#12406F,#2A6AAE)}
.modcard .body{padding:22px;display:flex;flex-direction:column;flex:1}
.tag{display:inline-block;align-self:flex-start;background:var(--tint);color:var(--navy);font-size:.68rem;font-weight:700;
     letter-spacing:.09em;text-transform:uppercase;padding:6px 11px;border-radius:6px;margin-bottom:12px}
.tag.accent{background:var(--red-tint);color:var(--red-700)}
.modcard h3{font-size:1.3rem}
.modcard p{color:var(--grey);font-size:.94rem;margin-top:11px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.chips span{background:var(--page);border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:.79rem;color:var(--ink)}
.modcard .acts{margin-top:auto;padding-top:18px;display:flex;gap:9px;flex-wrap:wrap}
.btn-sm{padding:8px 13px;font-size:.87rem}
.btn-line{background:#fff;color:var(--navy);border:1px solid var(--line)}
.btn-line:hover{background:var(--tint)}

.band{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:26px;margin-top:26px}
.point .num{font-family:'Poppins',sans-serif;font-weight:600;color:var(--red);font-size:.95rem;display:block;margin-bottom:5px}
.point h3{font-size:1.02rem;margin-bottom:6px}
.point p{color:var(--grey);font-size:.92rem}

.who{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.89rem;font-weight:500}

.closing{background:var(--navy);color:#fff;padding:58px 24px;text-align:center}
.closing h2{font-size:1.65rem}
.closing p{color:#DCE7F4;margin:12px auto 26px;max-width:56ch}
.closing .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sitefoot{padding:28px 24px;color:var(--grey);font-size:.86rem;text-align:center;background:var(--page)}
.sitefoot a{color:var(--navy-500)}

/* ═══════════════════════════════════════════════════════════════════════════
   MODULE PAGES  (Prepare / Review / Consolidate)
   One template, three sets of content. Everything reuses the home page's nav,
   hero, section and band rules so the site reads as one property rather than
   three products that happen to share a domain.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero.module{padding:76px 24px 80px;text-align:left}
.hero.module .inner{max-width:1120px;padding:0 0}
.hero.module h1{font-size:clamp(1.8rem,3.6vw,2.5rem);max-width:26ch}
.hero.module p{margin-left:0;font-size:1.04rem;max-width:64ch}
.hero.module .cta{justify-content:flex-start}
.hero.module .eyebrow{color:#fff}

.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.card h3{font-size:1.04rem;margin-bottom:8px}
.card p{color:var(--grey);font-size:.92rem}
.band .card{background:#fff}

.featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px 30px;margin-top:26px}
.feat{border-top:2px solid var(--tint);padding-top:14px}
.feat h3{font-size:.98rem;margin-bottom:5px}
.feat p{color:var(--grey);font-size:.9rem}

.ticks{margin-top:22px;max-width:78ch;display:grid;gap:11px}
.ticks li{list-style:none;position:relative;padding-left:28px;color:var(--grey);font-size:.94rem}
.ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.ticks li b{color:var(--ink);font-weight:600}

.faq{margin-top:24px;max-width:80ch;display:grid;gap:2px}
.faq details{background:var(--card);border:1px solid var(--line);padding:15px 18px}
.faq details:first-of-type{border-radius:var(--r) var(--r) 0 0}
.faq details:last-of-type{border-radius:0 0 var(--r) var(--r)}
.faq summary{font-weight:600;cursor:pointer;font-size:.96rem}
.faq summary::marker{color:var(--red)}
.faq p{color:var(--grey);font-size:.92rem;margin-top:9px}

.crumb{max-width:1120px;margin:0 auto;padding:14px 24px 0;font-size:.85rem;color:var(--grey)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN CONSOLE  (/app/admin/)
   One console for the whole platform. The client is the row; the three modules
   are columns on that row. That layout is the argument: you cannot look at this
   screen and fail to notice that a client already exists.
   ═══════════════════════════════════════════════════════════════════════════ */
.adminwrap{max-width:1240px;margin:0 auto;padding:26px 22px 70px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:18px 0 22px}
.tab{background:none;border:0;font:inherit;font-weight:600;font-size:.93rem;color:var(--grey);
     padding:10px 15px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--navy);border-bottom-color:var(--red)}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kpi .n{font-family:'Poppins',sans-serif;font-size:1.5rem;font-weight:600;color:var(--navy);line-height:1.1}
.kpi .k{font-size:.76rem;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
.kpi.warn .n{color:var(--red)}

.banner{background:var(--red-tint);border:1px solid #FFD3D3;color:var(--red-700);
        border-radius:var(--r);padding:13px 16px;margin-bottom:18px;font-size:.9rem}
.banner b{color:var(--red-700)}
.banner.info{background:var(--tint);border-color:#CFE0F2;color:var(--navy)}

table.grid{width:100%;border-collapse:collapse;background:var(--card);
           border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
table.grid th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;
              color:var(--grey);font-weight:700;padding:11px 14px;background:#FAFBFD;border-bottom:1px solid var(--line)}
table.grid td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
table.grid tr:last-child td{border-bottom:0}
table.grid tr.row:hover td{background:#FAFBFD;cursor:pointer}
table.grid td .sub{color:var(--grey);font-size:.82rem;margin-top:2px}
.dupflag{display:inline-block;background:var(--red-tint);color:var(--red-700);font-size:.68rem;font-weight:700;
         letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-left:7px;vertical-align:1px}

.mods{display:flex;gap:6px;flex-wrap:wrap}
.modchip{font-size:.72rem;font-weight:700;letter-spacing:.03em;padding:4px 9px;border-radius:6px;white-space:nowrap;
         border:1px solid transparent}
.modchip.active{background:var(--tint);color:var(--navy);border-color:#CFE0F2}
.modchip.suspended,.modchip.expired{background:var(--red-tint);color:var(--red-700);border-color:#FFD3D3}
.modchip.none{background:#F4F5F7;color:var(--grey-400);border-color:var(--line)}

.drawer{background:#FAFBFD;border-top:1px solid var(--line)}
.drawer td{padding:18px 16px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.dbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.dbox h4{font-family:'Poppins',sans-serif;font-size:.86rem;margin-bottom:8px;color:var(--navy)}
.dbox .line{font-size:.85rem;padding:4px 0;color:var(--ink)}
.dbox .line span{color:var(--grey)}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;
       box-shadow:var(--shadow);margin-bottom:20px}
.panel h2{font-size:1.1rem;margin-bottom:4px}
.panel .lede{margin-bottom:14px}
.modpick{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-top:10px;background:#FAFBFD}
.modpick label.head{display:flex;align-items:center;gap:9px;font-weight:600;font-size:.92rem;cursor:pointer}
.modpick .fields{margin-top:11px;display:none}
.modpick.on .fields{display:grid}
.modpick.on{background:#fff;border-color:#CFE0F2}
.hint{font-size:.8rem;color:var(--grey);margin-top:5px}
.right{margin-left:auto}
.rowflex{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.field.tight{margin-top:10px}
.field.tight label{font-size:.78rem}
.linkbtn{background:none;border:0;color:var(--navy-500);font:inherit;font-size:.85rem;cursor:pointer;padding:0;text-decoration:underline}
.audit li{list-style:none;padding:9px 0;border-bottom:1px solid var(--line);font-size:.87rem}
.audit li:last-child{border-bottom:0}
.audit .when{color:var(--grey);font-size:.78rem}