@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Civic Mesa — section layouts for the marketing page (index + keystone).
   Builds on styles.css tokens; pairs with mock.css product visuals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* inline code in prose */
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; background:rgba(18,35,61,.06); color:var(--gold-deep); padding:.08em .38em; border-radius:5px; }
.section--navy code { background:rgba(227,198,135,.12); color:var(--gold-bright); }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero { padding:56px 0 84px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:56px; align-items:center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:9px; }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:#7BD3A5; box-shadow:0 0 0 0 rgba(123,211,165,.6); animation:pulse 2.4s infinite; }
@keyframes pulse { 0%{ box-shadow:0 0 0 0 rgba(123,211,165,.55);} 70%{ box-shadow:0 0 0 7px rgba(123,211,165,0);} 100%{ box-shadow:0 0 0 0 rgba(123,211,165,0);} }
@media (prefers-reduced-motion:reduce){ .pulse-dot{ animation:none; } }
.hero-h1 { font-size:clamp(34px,4.6vw,53px); font-weight:600; letter-spacing:-.022em; line-height:1.05; color:#fff; text-wrap:balance; }
.hero-h1 .g { color:var(--gold); }
.hero-lead { margin-top:20px; font-size:17.5px; line-height:1.56; color:var(--nv-soft); max-width:47ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-proof { display:flex; gap:30px; margin-top:38px; flex-wrap:wrap; }
.hero-proof .hp { display:flex; flex-direction:column; gap:6px; padding-left:15px; border-left:2px solid var(--gold); }
.hero-proof .hp b { font-size:27px; color:#fff; line-height:1; }
.hero-proof .hp span { font-size:12.5px; color:var(--nv-mute); line-height:1.35; }
.hero-visual { min-width:0; }
.hero-console { transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg); transform-origin:left center; transition:transform .8s cubic-bezier(.2,.7,.3,1), opacity .7s ease; will-change:transform; }
.hero-console.flat, .hero-visual:hover .hero-console { transform:perspective(1600px) rotateY(0) rotateX(0); }
.js .hero-console.introing { opacity:0; transform:perspective(1600px) rotateY(-8deg) rotateX(2deg) translateY(16px) scale(.99); }
.hero-console .plat { height:498px; }
.hero-console .plat-rail { overflow:hidden; }
.hero-console .plat-content { overflow:hidden; }
.hero-foot { margin-top:16px; font-size:12.5px; color:var(--nv-mute); text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; }
@media (max-width:1000px){
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero-console { transform:none; }
  .hero-console .plat { height:auto; min-height:440px; }
}

/* ── CONSOLIDATION before/after ────────────────────────────────────────── */
.ba-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:stretch; }
.ba-card { border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--panel); box-shadow:var(--elev-1); display:flex; flex-direction:column; }
.ba-before { background:#F1EEE6; }
.ba-label { font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.ba-tiles { display:flex; flex-wrap:wrap; gap:9px; flex:1; align-content:flex-start; }
.ba-tile { font-size:13px; font-weight:600; color:#7C8478; background:#FBFAF6; border:1px dashed #CFC8B7; border-radius:8px; padding:9px 12px; }
.ba-foot { margin-top:18px; font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px; line-height:1.4; }
.ba-foot.bad { color:#9a6b62; } .ba-foot.good { color:var(--ok); }
.dotx { width:8px; height:8px; border-radius:50%; background:var(--danger); flex-shrink:0; box-shadow:0 0 0 3px rgba(177,68,59,.14); }
.dotok { width:8px; height:8px; border-radius:50%; background:var(--ok); flex-shrink:0; box-shadow:0 0 0 3px rgba(47,125,87,.14); }
.ba-arrow { display:grid; place-items:center; color:var(--gold-deep); }
.ba-after { border-color:#E3D9BF; box-shadow:var(--elev-2); }
.ba-core { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:8px 0; }
.core-node { text-align:center; background:linear-gradient(165deg,#16294A,var(--cm-navy)); color:#fff; border-radius:14px; padding:16px 22px; box-shadow:var(--elev-2); }
.core-node img { margin:0 auto 8px; }
.core-node b { display:block; font-family:var(--font-display); font-size:16px; }
.core-node span { font-size:11.5px; color:var(--nv-mute); }
.core-spokes { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; max-width:340px; }
.spoke { font-size:11.5px; font-weight:600; color:var(--gold-deep); background:var(--gold-tint-2); border:1px solid var(--gold-tint); border-radius:20px; padding:4px 11px; position:relative; }
@media (max-width:820px){
  .ba-grid { grid-template-columns:1fr; }
  .ba-arrow { transform:rotate(90deg); padding:4px 0; }
}

/* ── STRATA diagram + modules ──────────────────────────────────────────── */
.strata-wrap { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.strata-copy .lead { margin-top:16px; }
.strata-diagram { display:flex; flex-direction:column; align-items:center; gap:10px; }
.strata-cap, .strata-band { border-radius:12px; display:grid; place-items:center; text-align:center; box-shadow:var(--elev-1); }
.strata-cap { width:100%; height:66px; background:linear-gradient(180deg,#D4AF5C,var(--gold)); color:var(--cm-navy-deep); }
.strata-cap span { font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.01em; }
.strata-band { color:var(--nv-soft); background:linear-gradient(180deg,#183258,#12233D); border:1px solid rgba(227,198,135,.14); font-size:13.5px; font-weight:600; height:54px; }
.strata-band span { color:#EAEFF7; }
.strata-band.b1 { width:100%; } .strata-band.b2 { width:88%; } .strata-band.b3 { width:76%; } .strata-band.b4 { width:64%; }
.module-grid .card h3 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dep { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-deep); background:var(--gold-tint-2); border:1px solid var(--gold-tint); padding:2px 7px; border-radius:20px; }
.mtag { display:inline-block; margin-top:14px; font-size:12px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
@media (max-width:820px){ .strata-wrap { grid-template-columns:1fr; gap:32px; } }

/* ── FLOW strip ────────────────────────────────────────────────────────── */
.flow { display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:wrap; }
.flow-step { flex:1 1 0; min-width:150px; max-width:230px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:0 8px; }
.fs-ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(160deg,#16294A,var(--cm-navy)); color:var(--gold-bright); box-shadow:var(--elev-1); flex-shrink:0; }
.fs-body p { font-size:13px; color:var(--muted); margin-top:8px; line-height:1.45; }
.flow-join { align-self:flex-start; margin-top:22px; flex:0 0 34px; height:2px; background:linear-gradient(90deg,var(--gold-tint),var(--gold)); border-radius:2px; position:relative; }
.flow-join::after { content:''; position:absolute; right:-1px; top:-3px; width:8px; height:8px; border-top:2px solid var(--gold); border-right:2px solid var(--gold); transform:rotate(45deg); }
.flow-caption { text-align:center; margin-top:34px; font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.01em; }
@media (max-width:820px){
  .flow { flex-direction:column; align-items:center; gap:6px; }
  .flow-step { max-width:340px; }
  .flow-join { width:2px; height:26px; margin:2px 0 0; background:linear-gradient(180deg,var(--gold-tint),var(--gold)); }
  .flow-join::after { right:-3px; top:auto; bottom:-1px; transform:rotate(135deg); }
}

/* ── KEYSTONE band ─────────────────────────────────────────────────────── */
.keystone-band { border-top:1px solid rgba(227,198,135,.14); border-bottom:1px solid rgba(227,198,135,.14); }
.ks { display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:start; }
.ks-rail { display:flex; flex-direction:column; gap:3px; position:sticky; top:92px; }
.ks-tab { display:flex; align-items:center; gap:13px; width:100%; text-align:left; background:transparent; border:0; border-radius:10px; padding:13px 15px; color:var(--nv-soft); cursor:pointer; font-family:var(--font); position:relative; transition:background .15s,color .15s; }
.ks-tab .ks-n { font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--gold-bright); font-variant-numeric:tabular-nums; opacity:.7; }
.ks-tab .ks-l { flex:1; font-size:14.5px; font-weight:600; }
.ks-tab .ks-c { opacity:0; color:var(--gold-bright); transition:opacity .15s,transform .15s; transform:translateX(-4px); }
.ks-tab:hover { background:rgba(255,255,255,.04); color:#fff; }
.ks-tab.active { background:rgba(227,198,135,.10); color:#fff; }
.ks-tab.active .ks-n { opacity:1; }
.ks-tab.active .ks-c { opacity:1; transform:none; }
.ks-tab.active::before { content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--gold); }
.ks-stage { min-width:0; }
.ks-frame .plat { height:520px; }
.ks-frame .plat.ks-screen { display:none; }
.ks-frame .plat.ks-screen.active { display:flex; }
.ks-frame .mock { position:relative; }
.ks-spark .spark-line { stroke-dasharray:1400; stroke-dashoffset:0; }
.ks-spark.draw .spark-line { animation:draw 1.1s ease forwards; }
@keyframes draw { from{ stroke-dashoffset:1400; } to{ stroke-dashoffset:0; } }
.pl-lbl { display:block; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--pl-muted); margin-bottom:5px; }
.pl-inp { height:32px; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(246,243,236,.96); color:var(--cm-navy-deep); display:flex; align-items:center; padding:0 11px; font-size:12.5px; font-weight:500; }
.pl-inp.gold { border-color:var(--gold); box-shadow:var(--focus-ring); }
.ks-cards .card h3 { font-size:16px; }
.ks-more { text-align:center; margin-top:32px; }
@media (max-width:900px){
  .ks { grid-template-columns:1fr; gap:20px; }
  .ks-rail { position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .ks-tab { flex:0 0 auto; padding:10px 14px; }
  .ks-tab .ks-l { white-space:nowrap; } .ks-tab .ks-c { display:none; }
  .ks-tab.active::before { display:none; }
  .ks-frame .plat { height:auto; min-height:460px; }
}

/* ── SECURITY exhibit ──────────────────────────────────────────────────── */
.sec-exhibit { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; }
.codeplate { background:var(--cm-navy-deep); border:1px solid #1E3350; border-radius:14px; overflow:hidden; box-shadow:var(--elev-3); }
.cp-bar { display:flex; align-items:center; gap:12px; padding:11px 15px; background:linear-gradient(180deg,#12233D,#0C1A2E); border-bottom:1px solid rgba(255,255,255,.07); }
.cp-bar .dots { display:flex; gap:7px; } .cp-bar .dots i { width:11px; height:11px; border-radius:50%; display:block; } .cp-bar .dots i:nth-child(1){background:#E5695E}.cp-bar .dots i:nth-child(2){background:#E7B24C}.cp-bar .dots i:nth-child(3){background:#6BBE68}
.cp-file { font-size:12px; color:var(--nv-mute); }
.codeplate pre { margin:0; padding:20px 22px; overflow-x:auto; }
.codeplate code { background:none; padding:0; border-radius:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.75; color:#C7D2E4; display:block; white-space:pre; }
.c-com { color:#6E8199; font-style:italic; } .c-kw { color:#E3C687; font-weight:600; } .c-ty { color:#8FB8E0; } .c-st { color:#9FD3B0; }
.sec-callouts { display:flex; flex-direction:column; gap:16px; }
.sec-pin { display:flex; gap:13px; padding:18px 20px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--elev-1); }
.pin-dot { width:10px; height:10px; border-radius:50%; background:var(--gold); flex-shrink:0; margin-top:5px; box-shadow:0 0 0 4px var(--gold-tint-2); }
.pin-dot.ok { background:var(--ok); box-shadow:0 0 0 4px var(--ok-bg); }
.sec-pin b { font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--ink); }
.sec-pin p { font-size:13.5px; color:var(--muted); line-height:1.55; margin-top:5px; }
.pass-chip { display:inline-flex; align-items:center; gap:5px; margin-top:8px; font-size:12px; font-weight:700; color:var(--ok); background:var(--ok-bg); border-radius:20px; padding:3px 10px; }
.sec-note { margin-top:36px; font-size:15px; color:var(--ink-soft); text-align:center; }
.muted-note { display:block; margin-top:8px; font-size:13px; color:var(--faint); }
@media (max-width:860px){ .sec-exhibit { grid-template-columns:1fr; gap:22px; } }
/* plain-language data-separation visual (replaces the SQL code-plate) */
.sep-visual { background:var(--cm-navy-deep); border:1px solid #1E3350; border-radius:14px; box-shadow:var(--elev-3); padding:22px 22px 20px; color:var(--nv-soft); }
.sv-head { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:15.5px; color:#fff; margin-bottom:18px; }
.sv-head svg { color:var(--gold-bright); flex-shrink:0; }
.sv-row { display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.045); border:1px solid var(--nv-line); border-radius:12px; padding:14px 16px; }
.sv-seal { width:36px; height:36px; border-radius:9px; background:var(--cm-navy); display:grid; place-items:center; flex-shrink:0; border:1px solid rgba(255,255,255,.08); }
.sv-row > div { flex:1; min-width:0; }
.sv-row b { display:block; color:#fff; font-size:15px; font-weight:600; }
.sv-row > div span { font-size:12.5px; color:var(--nv-mute); }
.sv-lock { color:var(--gold-bright); flex-shrink:0; display:grid; place-items:center; }
.sv-wall { display:flex; align-items:center; gap:14px; padding:11px 2px; color:var(--nv-mute); font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap; }
.sv-wall::before, .sv-wall::after { content:''; height:0; flex:1; border-top:2px dashed rgba(201,162,74,.45); }
.sv-note { margin-top:16px; padding-top:15px; border-top:1px solid var(--nv-line); font-size:13px; color:var(--nv-soft); line-height:1.5; }

/* ── MIGRATION wizard mock ─────────────────────────────────────────────── */
.wiz-steps { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.wz { font-size:11.5px; font-weight:600; color:var(--muted); background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:4px 11px; }
.wz.done { color:var(--ok); background:var(--ok-bg); border-color:transparent; }
.wz.active { color:var(--cm-navy-deep); background:var(--gold); border-color:transparent; }

/* ── PORTAL + GIS ──────────────────────────────────────────────────────── */
.pg-split { display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:stretch; }
.pg-portal { display:flex; flex-direction:column; }
.portal-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:var(--elev-2); padding:22px; width:100%; }
.portal-head { display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line-soft); margin-bottom:16px; }
.portal-head b { display:block; font-family:var(--font-display); font-size:15px; }
.portal-head span { font-size:12px; color:var(--muted); }
.pc-lbl { display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:12px 0 5px; }
.pc-field { display:flex; align-items:center; height:38px; padding:0 12px; border:1px solid #DAD4C5; border-radius:9px; background:var(--panel-2); font-size:13.5px; color:var(--ink); }
.pc-photos { display:flex; gap:8px; }
.pc-photos span { width:44px; height:44px; border-radius:8px; background:linear-gradient(135deg,#e7e2d6,#d9d3c4); border:1px solid var(--line); }
.pc-photos .add { display:grid; place-items:center; color:var(--muted); font-size:20px; background:var(--panel-2); border:1px dashed #CFC8B7; }
.pc-anon { display:flex; align-items:center; gap:9px; margin:16px 0; font-size:13px; color:var(--ink-soft); font-weight:500; }
.tgl-sm { width:32px; height:18px; border-radius:20px; background:#CFC9BA; position:relative; flex-shrink:0; }
.tgl-sm.on { background:var(--gold); } .tgl-sm::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); } .tgl-sm.on::after { left:16px; }
.pc-submit { height:42px; border-radius:9px; background:var(--gold); color:var(--cm-navy-deep); font-weight:700; display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 8px rgba(201,162,74,.24); }
.pc-track { margin-top:14px; font-size:12.5px; color:var(--muted); line-height:1.5; }
.pc-track b { display:inline-block; margin-left:4px; font-family:var(--font-display); color:var(--gold-deep); letter-spacing:.04em; background:var(--gold-tint-2); border:1px solid var(--gold-tint); border-radius:6px; padding:1px 8px; }
.pg-map { display:flex; flex-direction:column; }
.mapframe { position:relative; flex:1; min-height:340px; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--elev-2); }
.map-canvas { position:absolute; inset:0; }
.mapframe .map-layers { position:absolute; top:16px; right:16px; width:196px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--elev-2); overflow:hidden; }
.mapframe .ml-head { display:flex; align-items:center; padding:10px 13px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.mapframe .ml-row { display:flex; align-items:center; gap:9px; padding:7px 13px; font-size:12.5px; color:var(--ink-soft); }
.mapframe .ml-row .rad { width:14px; height:14px; border-radius:50%; border:1.5px solid #C9C2B1; flex-shrink:0; position:relative; }
.mapframe .ml-row.on { color:var(--ink); font-weight:600; }
.mapframe .ml-row.on .rad { border-color:var(--gold); }
.mapframe .ml-row.on .rad::after { content:''; position:absolute; inset:2.5px; border-radius:50%; background:var(--gold); }
.pg-map-cap { margin-top:12px; font-size:13px; color:var(--muted); }
@media (max-width:860px){ .pg-split { grid-template-columns:1fr; } }

/* ── POSTURE band ──────────────────────────────────────────────────────── */
.posture-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.pf { display:flex; flex-direction:column; gap:10px; padding-left:16px; border-left:2px solid var(--gold); }
.pf b { font-size:30px; color:#fff; line-height:1; letter-spacing:-.02em; }
.pf span { font-size:13px; color:var(--nv-soft); line-height:1.45; }
@media (max-width:860px){ .posture-grid { grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:520px){ .posture-grid { grid-template-columns:1fr; } }

/* ── FINAL CTA caprock ─────────────────────────────────────────────────── */
.cta-sec { position:relative; overflow:hidden; }
.caprock { position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(520px,80%); height:6px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,rgba(201,162,74,0),var(--gold) 22%,var(--gold-bright) 50%,var(--gold) 78%,rgba(201,162,74,0)); box-shadow:0 0 26px rgba(201,162,74,.4); }
.cta-inner { text-align:center; max-width:760px; margin:0 auto; }
.cta-inner h2 { font-size:clamp(30px,4vw,46px); }
.cta-inner .lead { margin:18px auto 0; color:var(--nv-soft); max-width:600px; }
.cta-cards { margin-top:48px; text-align:left; }
.cta-cards .card { background:rgba(255,255,255,.03); border-color:var(--nv-line); }
.cta-cards .card h3 { color:#fff; font-size:16px; }
.cta-cards .card p { color:var(--nv-soft); }
.cta-cards .mtag { color:var(--gold-bright); }

/* ── FOOTER extras ─────────────────────────────────────────────────────── */
.foot-brand .wordmark { margin-bottom:4px; }
.foot-links { white-space:nowrap; }
.foot-links a { display:inline; padding:0; }
.foot-links a:hover { color:var(--gold-bright); }

/* ── sticky nav scrolled state ─────────────────────────────────────────── */
.site-nav.scrolled { box-shadow:0 1px 0 var(--line), 0 8px 24px rgba(18,35,61,.07); }

/* ── Keystone deep-dive page ───────────────────────────────────────────── */
.ks-hero { padding:82px 0 70px; }
.ks-hero-inner { max-width:800px; }
.ks-hero h1 { font-size:clamp(34px,5vw,56px); color:#fff; letter-spacing:-.022em; line-height:1.06; }
.ks-hero .lead { margin-top:20px; max-width:60ch; color:var(--nv-soft); }
.ks-hero-jump { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.ks-hero-jump a { font-size:13px; font-weight:600; color:var(--nv-soft); background:rgba(255,255,255,.035); border:1px solid var(--nv-line); border-radius:20px; padding:7px 14px; transition:border-color .14s, color .14s, background .14s; }
.ks-hero-jump a:hover { border-color:rgba(227,198,135,.5); color:#fff; background:rgba(227,198,135,.08); }
.eyebrow .ks-num { margin-right:6px; font-family:var(--font-display); font-weight:700; }
.frow em { font-style:normal; color:var(--gold-deep); font-weight:600; }
.frow-media .winframe .plat { min-height:420px; }

/* ── generic reveal groups already in styles.css ───────────────────────── */

/* ── County refocus: hero staff-app sizing ─────────────────────────────── */
.hero-console .app, .hero-console .app .shell { height:498px; }
.hero-console .app .main { overflow:hidden; }
@media (max-width:1000px){ .hero-console .app, .hero-console .app .shell { height:auto; min-height:440px; } }

/* ── Module overview cards ─────────────────────────────────────────────── */
.mod-card { display:flex; flex-direction:column; }
.mod-card h3 { font-size:17px; }
.mod-card p { flex:1; }
.mod-who { margin-top:16px; font-size:11.5px; font-weight:650; color:var(--faint); letter-spacing:.01em; }
.mod-more { margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--gold-deep); transition:gap .16s; }
.mod-card:hover .mod-more { gap:10px; }
.mod-more svg { width:14px; height:14px; }

/* ── Module deep-dive page (modules.html) ──────────────────────────────── */
.mod-hero { padding:80px 0 66px; }
.mod-hero-inner { max-width:820px; }
.mod-hero h1 { font-size:clamp(32px,4.6vw,52px); color:#fff; letter-spacing:-.022em; line-height:1.07; }
.mod-hero .lead { margin-top:18px; max-width:62ch; color:var(--nv-soft); }
.mod-jump { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.mod-jump a { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--nv-soft); background:rgba(255,255,255,.035); border:1px solid var(--nv-line); border-radius:20px; padding:7px 14px; transition:border-color .14s,color .14s,background .14s; }
.mod-jump a:hover { border-color:rgba(227,198,135,.5); color:#fff; background:rgba(227,198,135,.08); }
.mod-jump a svg { width:14px; height:14px; color:var(--gold-bright); }
.mod-sec { scroll-margin-top:90px; }
/* module rows: top-align the columns (heights differ a lot). On mobile, always
   show the copy before the mockup regardless of desktop column order. */
.mod-sec .frow { align-items:start; }
@media (max-width:860px){
  .mod-sec .frow-media { order:2; }
  .mod-sec .frow-copy { order:1; }
}
.mod-eyebrow { display:inline-flex; align-items:center; gap:10px; }
.mod-eyebrow .mod-ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(160deg,#16294A,var(--cm-navy)); color:var(--gold-bright); flex-shrink:0; }
.mod-eyebrow .mod-ic svg { width:18px; height:18px; }
.mod-feats { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px; }
.mod-feats li { display:flex; gap:13px; }
.mod-feats li .fx { width:24px; height:24px; border-radius:7px; background:var(--gold-tint-2); color:var(--gold-deep); display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.mod-feats li .fx svg { width:13px; height:13px; }
.mod-feats li b { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); display:block; margin-bottom:3px; }
.mod-feats li p { font-size:13.5px; color:var(--muted); line-height:1.5; }
.mod-who-line { display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:12.5px; font-weight:600; color:var(--muted); }
.mod-who-line svg { width:15px; height:15px; color:var(--gold-deep); }
.mod-feats.two { grid-template-columns:1fr 1fr; gap:16px 28px; }
@media (max-width:760px){ .mod-feats.two { grid-template-columns:1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Real product screenshots (WebP in browser-window frames)
   ═══════════════════════════════════════════════════════════════════════════ */
.winframe img.screenshot { display:block; width:100%; height:auto; background:#0C1A2E; }
.winframe img.crop { aspect-ratio:16/8.7; object-fit:cover; object-position:top left; }

/* ── Hero: centered copy + big product shot ─────────────────────────────── */
.hero-stack { max-width:880px; margin:0 auto; text-align:center; }
.hero-stack .hero-eyebrow { justify-content:center; }
.hero-stack .hero-lead { margin:20px auto 0; max-width:680px; }
.hero-stack .hero-cta { justify-content:center; }
.hero-stack .hero-proof { justify-content:center; gap:38px 44px; margin-top:34px; }
.hero-shot { margin:54px auto 0; max-width:1160px; }
.hero-shot .winbar .env-pill { color:var(--gold-bright); }
.hero-shot img { display:block; width:100%; }
.hero-foot2 { margin-top:16px; text-align:center; font-size:12.5px; color:var(--nv-mute); }
@media (max-width:1000px){ .hero-shot { margin-top:38px; } }

/* ── Product showcase grid ─────────────────────────────────────────────── */
.showcase { display:grid; grid-template-columns:1fr 1fr; gap:26px 24px; }
.showcase-item .winframe { box-shadow:var(--elev-2); }
.showcase-item .sc-cap { margin-top:15px; padding:0 2px; }
.showcase-item .sc-cap b { font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--ink); display:block; }
.showcase-item .sc-cap p { font-size:14px; color:var(--muted); line-height:1.5; margin-top:4px; }
.section--navy .showcase-item .sc-cap b { color:#fff; }
.section--navy .showcase-item .sc-cap p { color:var(--nv-soft); }
@media (max-width:820px){ .showcase { grid-template-columns:1fr; } }

/* ── modules.html: full-width screenshot per module ─────────────────────── */
.mod-sec2 { scroll-margin-top:90px; }
.mod-head2 { max-width:760px; margin-bottom:26px; }
.mod-head2 h3 { font-size:clamp(24px,3vw,32px); margin-top:4px; }
.mod-head2 .lead { margin-top:14px; font-size:17px; }
.mod-shot { margin:0 0 30px; }
.mod-shot .winbar .env-pill { display:none; }
.mod-feats-row { display:grid; grid-template-columns:1fr 1fr; gap:16px 34px; }
@media (max-width:760px){ .mod-feats-row { grid-template-columns:1fr; } }
.mod-feats-row li { display:flex; gap:12px; list-style:none; }
.mod-feats-row li .fx { width:24px; height:24px; border-radius:7px; background:var(--gold-tint-2); color:var(--gold-deep); display:grid; place-items:center; flex-shrink:0; margin-top:1px; }
.mod-feats-row li .fx svg { width:13px; height:13px; }
.mod-feats-row li b { font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); display:block; margin-bottom:3px; }
.mod-feats-row li p { font-size:13.5px; color:var(--muted); line-height:1.5; }
.mod-feats-row.ul { margin:0; padding:0; }
.dep.new { color:var(--ok); background:var(--ok-bg); border-color:transparent; }

/* ── Mobile / apps section ─────────────────────────────────────────────── */
.appsec .app-grid { display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; }
.app-copy h2 { max-width:15ch; }
.app-copy .lead { margin-top:14px; max-width:46ch; }
.app-feats { list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
.app-feats li { display:flex; gap:14px; align-items:flex-start; }
.af-ic { flex-shrink:0; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--gold-tint-2); color:var(--gold-deep); border:1px solid var(--gold-tint); }
.app-feats li > div b { font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); display:block; margin-bottom:2px; }
.app-feats li > div span { font-size:14px; color:var(--muted); line-height:1.55; display:block; }

.store-wrap { margin-top:30px; }
.store-badges { display:flex; gap:12px; flex-wrap:wrap; }
.store-badge { display:inline-flex; align-items:center; gap:11px; padding:9px 20px 9px 16px; background:var(--cm-navy-deep); color:#fff; border-radius:13px; border:1px solid #26374e; transition:transform .14s ease, box-shadow .14s ease; }
.store-badge:hover { transform:translateY(-2px); box-shadow:0 10px 24px -8px rgba(12,26,46,.4); }
.sb-ic { display:grid; place-items:center; color:#fff; }
.sb-txt { display:flex; flex-direction:column; line-height:1.12; text-align:left; }
.sb-txt small { font-size:10.5px; letter-spacing:.01em; opacity:.8; }
.sb-txt b { font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; margin-top:1px; }
.app-note { margin-top:16px; font-size:12.5px; color:var(--faint); line-height:1.65; max-width:54ch; }

.app-stage { position:relative; display:grid; place-items:center; padding:44px 32px; border-radius:24px; background:radial-gradient(125% 120% at 50% 0,#16294a 0,#0C1A2E 68%); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.app-stage .phone-glow { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,74,.26),transparent 66%); filter:blur(22px); z-index:1; }
.phone { position:relative; z-index:2; width:290px; max-width:78%; padding:11px; background:#05101f; border-radius:46px; box-shadow:0 0 0 2px #2a3c57, 0 36px 72px -24px rgba(0,0,0,.72); }
.phone-shot { display:block; width:100%; height:auto; border-radius:34px; background:#0C1A2E; }
.phone-notch { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:116px; height:26px; background:#05101f; border-radius:0 0 15px 15px; z-index:3; }

@media (max-width:920px){
  .appsec .app-grid { grid-template-columns:1fr; gap:36px; }
  .app-stage { padding:38px 24px; }
  .phone { width:270px; }
}
@media (max-width:480px){
  .store-badge { flex:1 1 auto; }
}

/* ── Modules grouped by business function ──────────────────────────────── */
.mod-groups { display:flex; flex-direction:column; margin-top:8px; }
.mod-group { display:grid; grid-template-columns:250px 1fr; gap:34px; align-items:start; padding:32px 0; border-top:1px solid var(--line); }
.mod-group:first-child { border-top:0; padding-top:6px; }
.mg-head { position:sticky; top:98px; }
.mg-head .mg-ic { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--cm-navy-deep); color:var(--gold); margin-bottom:13px; }
.mg-head .mg-ic svg { width:22px; height:22px; }
.mg-head h3 { font-family:var(--font-display); font-weight:600; font-size:21px; letter-spacing:-.02em; color:var(--ink); }
.mg-head p { margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.55; max-width:25ch; }
.mg-count { display:inline-block; margin-top:12px; font-size:11.5px; font-weight:600; color:var(--gold-deep); background:var(--gold-tint-2); border:1px solid var(--gold-tint); border-radius:999px; padding:3px 11px; }
.mg-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:1024px){ .mod-group { grid-template-columns:210px 1fr; gap:24px; } }
@media (max-width:820px){ .mod-group { grid-template-columns:1fr; gap:16px; padding:26px 0; } .mg-head { position:static; } .mg-head p { max-width:none; } .mg-cards { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); } }

.mod-xcut { margin-top:30px; padding:20px 24px; border-radius:var(--radius); background:var(--panel-2); border:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.mod-xcut .xcut-label { font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); }
.xcut-items { display:flex; flex-wrap:wrap; gap:8px; }
.xcut-chip { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:550; color:var(--ink-soft); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 14px; transition:background .12s, color .12s, border-color .12s; }
.xcut-chip svg { width:15px; height:15px; color:var(--gold-deep); }
.xcut-chip:hover { border-color:var(--gold); color:var(--ink); }

/* ── Pricing: flat per-module, unlimited users ─────────────────────────── */
.price-metrics { display:flex; flex-wrap:wrap; gap:14px; margin:4px 0 26px; }
.price-metrics .pm { flex:1 1 200px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); padding:18px 22px; }
.price-metrics .pm b { font-family:var(--font-display); font-size:34px; color:var(--gold-deep); display:block; line-height:1; letter-spacing:-.01em; }
.price-metrics .pm span { display:block; margin-top:7px; font-size:14px; color:var(--muted); }
.price-compare { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.pc { border-radius:var(--radius); padding:26px 26px 28px; border:1px solid var(--line); background:var(--panel); }
.pc-new { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 22px 44px -26px rgba(201,162,74,.45); background:linear-gradient(180deg,#fff,var(--gold-tint-2)); }
.pc-tag { display:inline-block; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:4px 12px; }
.pc-old .pc-tag { color:var(--danger); background:var(--danger-bg); }
.pc-new .pc-tag { color:var(--gold-deep); background:var(--gold-tint); }
.pc h3 { font-family:var(--font-display); font-weight:600; font-size:19px; margin-top:14px; letter-spacing:-.01em; color:var(--ink); }
.pc ul { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.pc li { display:flex; gap:11px; font-size:14.5px; color:var(--ink-soft); line-height:1.5; }
.pc li .pc-mk { flex-shrink:0; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; margin-top:1px; }
.pc-mk svg { width:13px; height:13px; }
.pc-old li .pc-mk { background:var(--danger-bg); color:var(--danger); }
.pc-new li .pc-mk { background:var(--gold-tint); color:var(--gold-deep); }
@media (max-width:760px){ .price-compare { grid-template-columns:1fr; } }