/* GENERATED by src/build.py from src/css/pages.css — edit the source, not this file. */
/* CEEZ AI — components shared by Resources, Why CEEZ, Trust (security) and Company. Loaded after inner.css / legal.css. */

/* a fact still to be confirmed by the company: visible in staging so it is never shipped by accident (build.py --strict fails on it) */
.tbc{display:inline-block;margin-left:6px;padding:2px 8px;border:1px dashed var(--line2);border-radius:var(--r-pill);font:500 10.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);vertical-align:1px;white-space:nowrap}

.ticks{display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.ticks li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--ink-strong)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--acc)}
.ticks b{font-weight:500;color:var(--text)}
.ticks.is-quiet li{color:var(--muted)}
.ticks.is-quiet li::before{background:var(--line2)}

/* engagement: four phases in order, then what each side brings */
.eng{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:eng}
.eng li{display:flex;flex-direction:column;padding:clamp(20px,2vw,28px);counter-increment:eng}
.eng li::before{content:"0" counter(eng);font:400 34px/1 var(--serif);color:var(--acc-italic);margin-bottom:14px}
.eng h3{margin:10px 0 8px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,27px);line-height:1.1;color:var(--text)}
.eng p:not(.eyebrow){font-size:15px;line-height:1.55;font-weight:300;color:var(--muted)}
.give{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px);margin-top:clamp(24px,4vh,44px)}
.give .ticks{margin-top:14px;padding-top:0;border-top:0}

/* autonomy: a ladder of four levels */
.ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);position:relative;padding-top:6px}
.ladder li{position:relative;padding-top:26px;border-top:1px solid var(--line2)}
.ladder li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--acc)}
.ladder li:nth-child(1)::before{opacity:.35}.ladder li:nth-child(2)::before{opacity:.6}.ladder li:nth-child(3)::before{opacity:.85}
.ladder h3{margin:12px 0 8px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,27px);line-height:1.1;color:var(--text)}
.ladder p{font-size:15px;line-height:1.55;font-weight:300;color:var(--muted)}

/* before / after */
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ba>div{padding:clamp(22px,2.6vw,34px)}
.ba .ticks{margin-top:16px;padding-top:0;border-top:0}
.ba .is-add{border-color:var(--acc-border);background:var(--acc-tint)}

@media(max-width:1100px){.eng,.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}.give{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.eng,.ladder,.ba{grid-template-columns:minmax(0,1fr)}}

/* a doc page at the site's full content width (Trust): tables and cards run wide, running text keeps a readable line */
.doc-wide .doc{max-width:calc(var(--mw) + var(--pad)*2)}
.doc-wide .doc>p,.doc-wide .doc>ul,.doc-wide .doc>ol,.doc-wide .doc>h3{max-width:80ch}
.doc-wide .doc .lede{max-width:72ch}
.doc-wide .doc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.doc-wide .toc ol{columns:2;column-gap:40px}
.doc-wide .toc li{break-inside:avoid}
@media(max-width:900px){.doc-wide .doc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.doc-wide .toc ol{columns:1}}
@media(max-width:560px){.doc-wide .doc-cards{grid-template-columns:minmax(0,1fr)}}
.doc-wide .doc>p.meta{max-width:none}

/* four cards across on wide doc pages (beliefs, vision, values) */
.doc-wide .doc-cards.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.doc-wide .doc h3{max-width:none}
@media(max-width:1100px){.doc-wide .doc-cards.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.doc-wide .doc-cards.is-four{grid-template-columns:minmax(0,1fr)}}

/* About: the mission, vision, values and technology cards, in the site's own layout */
.ab-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,3vh,32px)}
.ab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ab-grid.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.ab-card{padding:clamp(20px,2.2vw,28px)}
.ab-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.01em;color:var(--text)}
.ab-card p{margin-top:10px;font-size:15px;line-height:1.6;font-weight:300;color:var(--muted)}
.ab-sub{margin:clamp(24px,4vh,40px) 0 14px;font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ab-sub:first-of-type{margin-top:0}
.ab-story{display:grid;gap:14px;max-width:62ch}
.ab-story p{font-size:clamp(16px,1.3vw,19px);line-height:1.6;font-weight:300;color:var(--muted)}
@media(max-width:1100px){.ab-grid.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.ab-grid{grid-template-columns:minmax(0,1fr)}.ab-grid.is-four{grid-template-columns:minmax(0,1fr)}}

/* Trust page: an animated field behind the header (see js/security.js); the text stays above it */
.doc-page main{position:relative}
.sec-bg{position:absolute;left:0;right:0;top:0;height:min(760px,92vh);overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.sec-bg canvas{display:block}
.sec-bg~.doc{position:relative;z-index:2}
@media(max-width:760px){.sec-bg{opacity:.55}}
.sec-bg{opacity:.8}

/* pages the navigation points at that have no content yet: deliberate, calm, and clearly marked */
.ph{padding-bottom:clamp(72px,12vh,140px)}
.ph .display{font-size:clamp(40px,5vw,72px);max-width:20ch}
.ph-headline{margin-top:clamp(14px,2.4vh,24px);max-width:26ch;font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,40px);line-height:1.15;color:var(--acc-italic);text-wrap:balance}
.ph .lede{margin-top:clamp(14px,2.4vh,22px)}
.ph-status{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(20px,3.4vh,32px);padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--r-pill);font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.ph-dot{width:7px;height:7px;background:var(--acc)}
.ph .cta-row{margin-top:clamp(20px,3.4vh,32px)}

/* ═══ SHARED BLOCKS: flows, the architecture stack, four-part tiles, dials, tiles, cards ═══ */

/* a flow of steps: across on wide screens, down on narrow; the arrows are CSS so the list stays a plain <ol> */
.flow{--n:6;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(10px,1.4vw,18px);counter-reset:fl}
.flow.is-8{--n:4}.flow.is-4{--n:4}.flow.is-5{--n:5}.flow.is-7{--n:7}.flow.is-3{--n:3}
.flow li{position:relative;padding:14px 4px 0;border-top:1px solid var(--acc-border);counter-increment:fl}
.flow li::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;background:var(--acc)}
.flow b{display:block;font-size:15.5px;font-weight:500;color:var(--text)}
.flow span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;font-weight:300;color:var(--muted)}
.flow.is-vertical{grid-template-columns:minmax(0,1fr);max-width:560px}
.flow.is-vertical li{padding:12px 0 14px 26px;border-top:0;border-left:1px solid var(--acc-border)}
.flow.is-vertical li::before{left:-5px;top:16px}
@media(max-width:900px){
  .flow{grid-template-columns:minmax(0,1fr);max-width:560px}
  .flow li{padding:12px 0 14px 26px;border-top:0;border-left:1px solid var(--acc-border)}
  .flow li::before{left:-5px;top:16px}
}

/* the architecture stack: one row per layer, each a short paragraph */
.arch{display:grid;gap:0;max-width:880px}
.arch li{position:relative;display:grid;grid-template-columns:clamp(120px,16vw,190px) minmax(0,1fr);gap:clamp(14px,3vw,36px);align-items:start;padding:clamp(14px,2.2vh,22px) clamp(16px,2vw,26px);border:1px solid var(--border);border-radius:var(--r-card);background:var(--glass)}
.arch li+li{margin-top:22px}
.arch li+li::before{content:"↓";position:absolute;left:clamp(16px,2vw,26px);top:-21px;font:400 15px/1 var(--mono);color:var(--acc2)}
.arch h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.1;color:var(--text)}
.arch h3 a{color:inherit}.arch h3 a:hover{color:var(--acc-italic)}
.arch p{font-size:15px;line-height:1.55;font-weight:300;color:var(--muted)}
.arch li.is-end{border-color:var(--acc-border);background:var(--acc-tint)}
@media(max-width:700px){.arch li{grid-template-columns:minmax(0,1fr);gap:6px}}

/* four-part tiles (Ground, Crew, Govern, Prove) */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.four a{display:flex;flex-direction:column;height:100%;padding:clamp(18px,2vw,26px);border:1px solid var(--border);border-radius:var(--r-card);background:var(--glass);transition:border-color .2s,transform .2s}
.four a:hover{border-color:var(--acc-border);transform:translateY(-3px)}
.four .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.four h3{margin:12px 0 8px;font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.05;color:var(--text)}
.four p{font-size:15px;line-height:1.5;font-weight:300;color:var(--muted)}
.four.is-five{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.four.is-five h3{font-size:clamp(22px,1.9vw,28px)}
@media(max-width:1200px){.four.is-five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.four,.four.is-five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.four,.four.is-five{grid-template-columns:minmax(0,1fr)}}

/* three dials: autonomy, authority, consequence */
.dials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dial{padding:clamp(20px,2.2vw,30px)}
.dial h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.4vw,34px);line-height:1.05;color:var(--text)}
.dial .q{margin-top:6px;font-size:15px;font-style:italic;color:var(--acc-italic)}
.dial ul{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px}
.dial li{position:relative;padding-left:16px;font-size:14.5px;color:var(--muted)}
.dial li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--acc)}
@media(max-width:900px){.dials{grid-template-columns:minmax(0,1fr)}}

/* outcome tiles */
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.tile{padding:clamp(16px,1.8vw,22px);border:1px solid var(--border);border-radius:var(--r-card);background:var(--glass)}
.tile svg{width:26px;height:26px;fill:none;stroke:var(--acc2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tile h3{margin:12px 0 4px;font-size:16px;font-weight:500;color:var(--text)}
.tile p{font-size:13.5px;line-height:1.45;color:var(--muted)}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* leader cards and objective cards */
.lcards,.ocards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lcard,.ocard{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,28px);border:1px solid var(--border);border-radius:var(--r-card);background:var(--glass);transition:border-color .2s,transform .2s}
a.lcard:hover,a.ocard:hover{border-color:var(--acc-border);transform:translateY(-3px)}
.lcard .k,.ocard .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.lcard h3,.ocard h3{margin:12px 0 8px;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.12;color:var(--text)}
.lcard p,.ocard p{font-size:14.5px;line-height:1.5;font-weight:300;color:var(--muted)}
.lcard .more{margin-top:auto;padding-top:14px;font-size:14px;color:var(--text)}
.lcards.is-five{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.lcards.is-five .lcard{padding:clamp(16px,1.5vw,22px)}.lcards.is-five .lcard h3{font-size:clamp(18px,1.55vw,23px)}
@media(max-width:1200px){.lcards.is-five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){.lcards,.ocards,.lcards.is-five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.lcards,.ocards,.lcards.is-five{grid-template-columns:minmax(0,1fr)}}

/* numbered differentiators (Why Ceez) */
.diffs{display:grid;gap:0;max-width:980px}
.diffs li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 22px;padding:clamp(16px,2.4vh,24px) 0;border-top:1px solid var(--line2)}
.diffs li:last-child{border-bottom:1px solid var(--line2)}
.diffs .n{font:400 36px/1 var(--serif);color:var(--acc-italic)}
.diffs h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.1;color:var(--text)}
.diffs p{margin-top:6px;font-size:15.5px;line-height:1.55;font-weight:300;color:var(--muted)}
.diffs a{color:var(--text);border-bottom:1px solid var(--line2)}
@media(max-width:600px){.diffs li{grid-template-columns:minmax(0,1fr)}}

/* the use-case card: a few labelled fields, only the ones that exist */
.ucards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ucard{padding:clamp(20px,2.2vw,28px)}
.ucard h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.08;color:var(--text)}
.ucard .obj{margin-top:6px;font-size:15.5px;font-style:italic;color:var(--acc-italic)}
.ucard dl{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:10px}
.ucard dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
.ucard dt{font:500 10.5px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ucard dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media(max-width:860px){.ucards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.ucard dl>div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* the problem, drawn: what you have, the four breaks, how work still gets done */
.gapviz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1fr);gap:clamp(14px,2.4vw,32px);align-items:stretch}
.gap-side{padding:clamp(18px,2vw,26px);border:1px solid var(--border-strong);border-radius:var(--r-card);background:var(--glass)}
.gap-side .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.gap-side ul{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.gap-side li{padding:6px 12px;border:1px solid var(--border-strong);border-radius:var(--r-pill);font-size:14px;color:var(--ink-strong)}
.gap-side.is-work li{color:var(--muted);border-style:dashed}
.meaning{padding:clamp(20px,2.4vw,32px);border:1px solid var(--border-strong);border-radius:var(--r-card);background:var(--glass)}
.meaning .k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.meaning-row{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.meaning-row li{padding-top:12px;border-top:1px solid var(--acc-border)}
.meaning-row b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.1;color:var(--text)}
.meaning-row span{display:block;margin-top:6px;font-size:15px;line-height:1.45;font-weight:300;color:var(--muted)}
.meaning-then{margin-top:18px;font-size:clamp(16px,1.3vw,19px);color:var(--ink-strong)}
.gap-row{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 10px;padding:0;list-style:none}
.gap-row::before{content:"What is missing";align-self:center;margin-right:6px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.gap-row li{padding:6px 12px;border:1px solid var(--acc-border);border-radius:var(--r-pill);font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc2)}
@media(max-width:700px){.meaning-row{grid-template-columns:minmax(0,1fr)}}
.gap-mid{display:grid;align-content:center;gap:10px}
.gap-mid li{position:relative;padding:8px 12px 8px 26px;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc2)}
.gap-mid li::before{content:"";position:absolute;left:0;top:50%;width:18px;border-top:1px dashed var(--acc-border)}
.gap-mid li::after{content:"";position:absolute;left:18px;top:calc(50% - 4px);width:7px;height:7px;border-right:1.5px solid var(--acc);border-top:1.5px solid var(--acc);transform:rotate(45deg) translate(-1px,1px);opacity:.5}
@media(max-width:900px){.gapviz{grid-template-columns:minmax(0,1fr)}.gap-mid{grid-auto-flow:row}}

/* two panels side by side (Govern and Prove on Home) */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pair>div{padding:clamp(22px,2.6vw,34px)}
.pair h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.08;color:var(--text)}
.pair p{margin-top:10px;font-size:15.5px;line-height:1.55;font-weight:300;color:var(--muted)}
.pair .flow{margin-top:18px}
.pair .link{margin-top:20px}
@media(max-width:900px){.pair{grid-template-columns:minmax(0,1fr)}}

/* progressive disclosure: a plain <details> that looks like a row */
.disc{border:1px solid var(--border);border-radius:var(--r-card);background:var(--glass)}
.disc+.disc{margin-top:8px}
.disc summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 20px;font-size:16px;font-weight:500;color:var(--text)}
.disc summary::-webkit-details-marker{display:none}
.disc summary span{font-size:14px;font-weight:300;color:var(--soft)}
.disc summary::after{content:"+";margin-left:auto;font-weight:300;font-size:22px;line-height:1;color:var(--acc2);transition:transform .2s}
.disc[open] summary::after{transform:rotate(45deg)}
.disc>div{padding:0 20px 18px;font-size:15px;line-height:1.6;font-weight:300;color:var(--muted)}
.disc>div a{color:var(--text);border-bottom:1px solid var(--line2)}
.disc summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r-card)}

/* a compact strip of stage or capability chips under a section head */
.stagestrip{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.stagestrip li{padding:7px 14px;border:1px solid var(--border-strong);border-radius:var(--r-pill);font-size:14px;color:var(--ink-strong)}

/* the closing call to action band used by the pillar pages */
.endcta{text-align:left}
.endcta .h2{max-width:20ch}

/* the sample audit record, shared by Prove and the security detail */
.rec{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.rec table{width:100%;border-collapse:collapse;font-size:14.5px}
.rec th,.rec td{padding:11px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:var(--muted)}
.rec thead th{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.rec tbody th{font-weight:500;color:var(--text)}
.rec tbody tr:last-child th,.rec tbody tr:last-child td{border-bottom:0}
.rec code{font-family:var(--mono);font-size:.88em;color:var(--ink-strong)}
.rec-note{margin-top:10px;font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.c-note{position:absolute;right:clamp(16px,4vw,64px);bottom:22px;z-index:3;font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}