/* ============================================================
   Governly — product page components (Governly · Governly Prep)
   Products own the deep feature detail, switched by ORG TYPE.
   Reuses styles.css + components.css (solbar, seg, feat-, tab-,
   z2m-, hm-). Adds the org-toggle visibility + product chrome.
   Org switcher mirrors the persona pattern: default School Boards.
   ============================================================ */

/* ---------- org visibility (.os school · .oc commission) ---------- */
.os{display:block}
.oc{display:none}
body[data-org="commission"] .os{display:none}
body[data-org="commission"] .oc{display:block}
/* inline org spans inside running text */
span.os,span.oc{display:none}
body:not([data-org="commission"]) span.os{display:inline}
body[data-org="commission"] span.oc{display:inline}
/* keep list items as list items, not block, when toggled */
li.os,li.oc{display:none}
body:not([data-org="commission"]) li.os{display:flex}
body[data-org="commission"] li.oc{display:flex}

/* reserve two lines on org-swapped headings so the lead never jumps */
.prod-hero h1,.zone2-head h2,#capabilities .reveal > h2{min-height:1.15em}

/* ---------- product sub-bar org switcher (reuses .solbar/.seg) ---------- */
.solbar .seg button{padding:7px 18px}
.solbar .seg button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ---------- product hero (lighter than the navy solution hero) ---------- */
.prod-hero .eyebrow{display:inline-block;margin-bottom:20px}
.prod-hero{padding-block:0}
.prod-hero .hero-grid{align-items:start}
.prod-hero .wrap{padding-block:clamp(30px,3.4vw,52px) clamp(40px,5vw,64px)}
.prod-hero h1.h-display{font-size:calc(clamp(2.4rem,4.4vw,3.6rem)*var(--type-scale))}
.prod-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
/* when moved beneath the hero image, center the pills and tighten the gap to the mockup */
.hero-visual .prod-meta{margin-top:18px;justify-content:center}
.prod-meta .m{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;
  color:var(--ink-soft);background:color-mix(in srgb,var(--navy) 5%,transparent);
  border:1px solid var(--line-soft);border-radius:999px;padding:8px 14px}
[data-hero-tone="navy"] .prod-hero .prod-meta .m{color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.prod-meta .m svg{width:15px;height:15px;color:var(--accent)}
[data-hero-tone="navy"] .prod-meta .m svg{color:color-mix(in srgb,var(--accent) 60%,#fff)}

/* ---------- capability strip (what's inside the product) ---------- */
.capstrip{background:var(--bg-b);border-bottom:1px solid var(--line-soft)}
.capstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-block:34px}
.cap{display:flex;flex-direction:column;gap:6px}
.cap .ci{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;margin-bottom:6px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.cap .ci svg{width:19px;height:19px}
.cap h4{font-family:var(--sans);font-size:.95rem;font-weight:800}
.cap p{font-size:.84rem;color:var(--muted);line-height:1.5}

/* ---------- product closing cross-link to the OTHER product ---------- */
.pair{background:var(--bg-a)}
.pair-card{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  padding:clamp(26px,3vw,40px);max-width:920px;margin-inline:auto}
.pair-card .pc-ey{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:10px}
.pair-card h3{font-size:1.4rem;margin-bottom:8px}
.pair-card p{color:var(--ink-soft);max-width:52ch}
.pair-card .pc-cta{flex:none}
@media (max-width:760px){
  .pair-card{grid-template-columns:1fr}
  .capstrip .wrap{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:480px){
  .capstrip .wrap{grid-template-columns:1fr}
}

/* ---------- solution hand-off banner (used when a Solutions role routes in) ---------- */
.routed{background:color-mix(in srgb,var(--accent) 7%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,transparent)}
.routed .wrap{display:flex;align-items:center;gap:12px;padding-block:12px;font-size:.88rem;color:var(--ink-soft)}
.routed svg{width:18px;height:18px;color:var(--accent);flex:none}
.routed a{font-weight:700;color:var(--navy);border-bottom:1.5px solid var(--line)}
.routed a:hover{border-color:var(--accent)}

/* ============================================================
   Governly Prep mockups (staff agenda-prep · built in HTML)
   ============================================================ */
/* draft editor */
.prep-doc{padding:16px 18px;background:#fff}
.prep-doc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid #D8D4CC}
.prep-doc-head .t{font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#4A6274}
.prep-flag{font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.prep-flag.draft{color:#9a6a16;background:rgba(217,142,43,.14);border:1px solid rgba(217,142,43,.34)}
.prep-flag.ready{color:#1a7a2a;background:rgba(40,200,64,.12);border:1px solid rgba(40,200,64,.32)}
.prep-title{font-family:var(--serif);font-size:.96rem;font-weight:700;color:#1B2A4A;line-height:1.35;margin-bottom:8px}
.prep-lines{display:flex;flex-direction:column;gap:6px}
.prep-line{height:8px;border-radius:4px;background:#EBEDF1}
.prep-line.w90{width:90%}.prep-line.w70{width:70%}.prep-line.w80{width:80%}
.prep-line.gap{background:repeating-linear-gradient(45deg,rgba(232,97,77,.12),rgba(232,97,77,.12) 6px,transparent 6px,transparent 12px);
  border:1px dashed rgba(232,97,77,.5)}
.prep-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:9px 11px;border-radius:7px;
  background:rgba(232,97,77,.06);border:1px solid rgba(232,97,77,.22);font-size:.68rem;color:#1B2A4A;line-height:1.5}
.prep-note .pin{color:#E8614D;font-weight:800;flex:none}

/* the five-way analysis read-out (reuses dais lenses) */
.prep-reads{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:12px}
.prep-read{background:#f5f3ee;border:1px solid #D8D4CC;border-radius:7px;padding:9px 8px;text-align:center}
.prep-read .rl{font-size:.58rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#4A6274;display:block}
.prep-read .rv{font-size:.64rem;color:#1B2A4A;margin-top:3px;display:block;line-height:1.3}
.prep-read.alert{border-color:rgba(232,97,77,.4);background:rgba(232,97,77,.06)}
.prep-read.alert .rl{color:#E8614D}

/* Lenses — recurring voices in the room */
.lens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.lens{background:#fff;border:1px solid #D8D4CC;border-radius:8px;padding:11px 12px}
.lens-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.lens-ava{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.64rem;font-weight:800;color:#fff;background:var(--navy)}
.lens-ava.a2{background:#3E7C8C}.lens-ava.a3{background:#9a6a16}
.lens-nm{display:block;font-size:.72rem;font-weight:700;color:#1B2A4A;line-height:1.15}
.lens-rl{display:block;font-size:.58rem;color:#4A6274;margin-top:1px}
.lens-q{font-size:.67rem;color:#1B2A4A;line-height:1.5;padding-left:10px;border-left:2px solid #E8614D;font-style:italic}

/* Lens Library window (zone2 z2) */
.ll-ava{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:.6rem;font-weight:800;color:#fff;background:var(--navy)}
.ll-ava.c2{background:#3E7C8C}.ll-ava.c3{background:#9a6a16}.ll-ava.c4{background:#1F8A5B}.ll-ava.c5{background:#4A50D2}.ll-ava.c6{background:#8C3E5E}
.llg{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 15px;background:#fff}
.llg-card{border:1px solid #E2DED6;border-radius:9px;padding:10px 12px;background:#fff}
.llg-top{display:flex;align-items:center;gap:8px}
.llg-nm{display:block;font-size:.74rem;font-weight:700;color:#1B2A4A;line-height:1.15}
.llg-rl{display:block;font-size:.6rem;color:#4A6274;margin-top:1px}
.llg-q{margin-top:7px;font-size:.66rem;color:#1B2A4A;line-height:1.45;padding-left:9px;border-left:2px solid #E8614D;font-style:italic}
.ll-foot{display:flex;align-items:center;gap:8px;padding:12px 17px;border-top:1px solid var(--pp-line);background:#fff;font-size:.78rem;font-weight:600;color:var(--pp)}
.ll-foot svg{width:15px;height:15px;flex:none}
.ll-foot .car{margin-left:1px;font-size:.6rem}
/* scoped to the Agenda Prep page — Meeting Prep's own #z2 keeps the 482px default */
body[data-page="agenda-prep"] #z2 .ppwin{max-width:560px}

/* version rail */
.ver-rail{display:flex;align-items:stretch;gap:0;margin-top:4px}
.ver{flex:1;text-align:center;position:relative;padding:0 6px}
.ver-dot{width:13px;height:13px;border-radius:50%;background:#D8D4CC;margin:0 auto 9px;position:relative;z-index:1;border:2px solid #fff;box-shadow:0 0 0 1px #D8D4CC}
.ver.done .ver-dot{background:#E8614D;box-shadow:0 0 0 1px #E8614D}
.ver::before{content:'';position:absolute;top:6px;left:-50%;width:100%;height:2px;background:#D8D4CC;z-index:0}
.ver:first-child::before{display:none}
.ver.done::before{background:#E8614D}
.ver-v{font-size:.66rem;font-weight:800;color:#1B2A4A}
.ver-meta{font-size:.58rem;color:#4A6274;margin-top:2px;line-height:1.3}
.ver-score{font-family:var(--serif);font-size:1.05rem;font-weight:900;color:#4A6274;margin-top:5px;display:block}
.ver.done .ver-score{color:#1a7a2a}

/* Meeting Dashboard window (zone2 z1) */
.md{padding:16px 15px;background:#fff;display:flex;flex-direction:column;gap:10px}
.md-sec{border:1px solid #E2DED6;border-radius:10px;overflow:hidden;background:#fff}
.md-sec-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#f5f3ee;border-bottom:1px solid #E2DED6}
.md-sec-hd svg{width:14px;height:14px;color:#4A6274;flex:none}
.md-sec-nm{font-size:.74rem;font-weight:800;color:#1B2A4A}
.md-sec-dt{font-size:.64rem;color:#4A6274}
.md-sec-dt-s{display:none;font-size:.64rem;color:#4A6274}
.md-sec-sp{flex:1}
.md-sec-ct{font-size:.62rem;color:#4A6274;white-space:nowrap}
.md-ic{width:20px;height:20px;display:grid;place-items:center;color:#4A6274;border-radius:5px;flex:none}
.md-ic svg{width:12px;height:12px}
.md-cols{display:grid;grid-template-columns:1fr 52px 86px;gap:10px;padding:7px 12px;font-size:.55rem;letter-spacing:.7px;text-transform:uppercase;font-weight:700;color:#4A6274;border-bottom:1px solid #EFECE6}
.md-row{display:grid;grid-template-columns:1fr 52px 86px;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid #EFECE6}
.md-row:last-child{border-bottom:none}
.md-t{font-size:.71rem;font-weight:700;color:#1B2A4A;line-height:1.3}
.md-ver{font-size:.58rem;font-weight:800;color:#4A6274;background:#f5f3ee;border:1px solid #E2DED6;border-radius:5px;padding:1px 7px;justify-self:start}
.md-up{font-size:.63rem;color:#4A6274}
.md-foot{display:flex;gap:8px;align-items:center;padding:12px 15px;border-top:1px solid var(--pp-line);background:#fff}
.md-foot-meta{font-size:.63rem;color:#4A6274}
.md-btn{display:flex;align-items:center;gap:6px;font-size:.68rem;font-weight:700;color:#1B2A4A;border:1px solid #D8D4CC;border-radius:8px;padding:6px 12px;background:#fff}
.md-btn svg{width:12px;height:12px}
.md-btn.pri{background:#E8614D;border-color:#E8614D;color:#fff;box-shadow:0 3px 8px rgba(232,97,77,.3);margin-left:auto}

@media (max-width:560px){
  .lens-grid,.prep-reads,.llg{grid-template-columns:1fr}
  .prep-reads{grid-template-columns:1fr 1fr}
  .md-cols{grid-template-columns:1fr 40px 62px;padding:7px 10px}
  .md-row{grid-template-columns:1fr 40px 62px;gap:7px;padding:8px 10px}
  .md-up{font-size:.58rem}
  .md-sec-dt{display:none}
  .md-sec-dt-s{display:inline}
  .md-foot-meta{display:none}
}