/* Zenith subpages — v6 components (2026-07-11 sitewide redesign).
   Loads AFTER home.css: home.css is the design system (tokens, nav, footer,
   buttons, .label, .plans, .faq-item, .vault, modal bridge), this sheet adds
   only what the subpages need on top. Same palette, light-only, like the home. */

/* ============ PAGE RHYTHM ============ */
main{position:relative;z-index:2}
.pg{position:relative;padding:11vh 0}
.pg--tight{padding:6vh 0}
.pg--center{text-align:center}
.pg--center .label{justify-content:center}
.pg--center .label::before{display:none}

/* page hero: pill nav floats above, so clear it generously */
.p-hero{padding:calc(96px + 12vh) 0 10vh}
.p-hero h1{font-size:clamp(42px,6.6vw,96px);line-height:1.06;letter-spacing:-.014em;max-width:12em}
.p-hero h1 em{font-style:italic;color:var(--accent);text-shadow:0 0 30px rgba(63,106,140,.12)}
.p-hero .p-lede{color:var(--slate);margin-top:30px;font-size:clamp(15px,1.4vw,18px);line-height:1.75;max-width:36em}
.p-hero .p-lede strong{color:var(--ink-dim);font-weight:500}
.p-hero .label{margin-bottom:clamp(24px,4vh,40px)}

/* shared headings */
.h-lg{font-size:clamp(34px,4.2vw,64px);line-height:1.08;letter-spacing:-.012em}
.h-md{font-size:clamp(28px,3.2vw,46px);line-height:1.12;letter-spacing:-.01em}
.copy{color:var(--slate);font-size:15px;line-height:1.75;max-width:30em}
.copy strong{color:var(--ink-dim);font-weight:500}
.copy a{color:var(--accent);border-bottom:1px solid var(--accent-dim)}
.copy a:hover{color:var(--accent-bright)}

/* ============ GLASS CARD ============ */
.glass{position:relative;border-radius:24px;border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.6);box-shadow:0 18px 44px rgba(35,45,62,.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.glass--lift{transition:box-shadow .7s var(--ease-out), transform .7s var(--ease-out)}
.glass--lift:hover{box-shadow:0 26px 60px rgba(35,45,62,.09);transform:translateY(-3px)}

/* ============ DUO (text + figure) ============ */
.duo{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:clamp(40px,6vw,100px);align-items:center}
.duo.rev{grid-template-columns:7fr minmax(300px,5fr)}
.duo.rev .duo-text{order:2}
.duo.rev .duo-fig{order:1}
.duo h2{margin-top:26px}
.duo .copy{margin-top:28px}

/* the figure card: same furniture as the home's chart shell */
.duo-fig{border-radius:24px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.6);
  box-shadow:0 18px 44px rgba(35,45,62,.05);padding:clamp(24px,2.6vw,36px) clamp(20px,2.4vw,32px) 18px;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.duo-fig .fine-note{margin-top:14px}

/* ============ LIVE DEMOS (explain.js bridge) ============ */
/* explain.js + the demo SVGs were written against global.css names; give
   those names v6 values so the same script drives the new skin. */
:root{
  --knob-face:#FCFBF7;
  --caution:#B08A4F;
}
.graph__svg{display:block;width:100%;height:auto;overflow:visible}
.graph__stage{position:relative}
.graph__knobs{position:absolute;inset:0;pointer-events:none}
.graph__knob{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;border:0;padding:0;background:none;cursor:grab}
.graph__cap{display:flex;justify-content:space-between;gap:16px;margin-top:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate-dim)}
.graph__cap span:last-child{text-align:right}
.graph__cap-mid{color:var(--accent);white-space:nowrap}
.graph__control{margin-top:18px}
[data-js-only][hidden]{display:none}
.est__compliance{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--slate-dim);margin-top:12px}

.z-knob{transition:scale .18s var(--ease-out), filter .18s var(--ease-out)}
.z-knob:hover,.z-knob--grab{scale:1.14;filter:drop-shadow(0 3px 9px rgba(35,45,62,.3))}
.z-knob:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.reduced .z-knob{transition:none}

/* the v6 slider: hairline track, accent fill (explain.js drives background-size) */
.est__field label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);margin-bottom:12px}
.est__field label b{font-family:var(--serif);font-size:17px;letter-spacing:0;text-transform:none;
  color:var(--accent-bright);font-variant-numeric:tabular-nums;font-weight:400}
.est__field input[type='range']{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:2px;cursor:pointer;
  background-color:var(--hair);
  background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-size:0% 100%;
}
.est__field input[type='range']::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--knob-face);border:1.5px solid var(--accent);box-shadow:0 4px 12px rgba(63,106,140,.32);
}
.est__field input[type='range']::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--knob-face);border:1.5px solid var(--accent);box-shadow:0 4px 12px rgba(63,106,140,.32);
}
.est__field input[type='range']:focus-visible{outline:none}
.est__field input[type='range']:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent);outline-offset:3px}

/* ============ PRICING TIERS ============ */
/* Free and Plus are not equals; the layout says so. Plus takes the wider
   column and the fuller card; Free top-aligns, sizes to its content, and
   speaks more quietly. */
.plans--tiered{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.plans--tiered .plan:not(.plus){
  background:rgba(255,255,255,.48);
  box-shadow:0 12px 30px rgba(35,45,62,.04);
  padding:clamp(28px,2.8vw,42px);
}
.plans--tiered .plan:not(.plus) .pl-price{font-size:clamp(36px,3.2vw,50px)}
.plans--tiered .plan:not(.plus) ul{margin-top:30px;gap:16px}
.plans--tiered .plan:not(.plus) li{font-size:13.5px}
.plans--tiered .plan:not(.plus) .pl-cta{padding-top:34px}
.plans--tiered .plan.plus{padding:clamp(38px,3.8vw,58px)}
@media (max-width:900px){.plans--tiered{grid-template-columns:1fr}}

/* ============ JOURNAL: THE PUBLICATION ============ */
/* The bloggy read: one featured piece, then dated editorial rows under
   hairlines. No cards — a publication's index, not a product grid. */
.feat{border-top:1px solid var(--hair);padding-top:clamp(28px,3.4vw,44px);display:block;color:var(--ink)}
.feat .j-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.feat .feat-kicker{color:var(--accent)}
.feat h2{font-size:clamp(30px,4vw,56px);line-height:1.12;letter-spacing:-.012em;max-width:16em;margin-top:18px;transition:color .35s var(--ease-out)}
.feat:hover h2{color:var(--accent-bright)}
.feat .j-excerpt{color:var(--slate);font-size:clamp(14.5px,1.3vw,16.5px);line-height:1.75;max-width:40em;margin-top:18px}
.feat .j-more{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.j-rows{margin-top:clamp(40px,6vh,72px);border-top:1px solid var(--hair)}
.j-row{display:grid;grid-template-columns:minmax(130px,200px) 1fr auto;gap:clamp(18px,3vw,48px);align-items:baseline;
  padding:clamp(24px,3vh,34px) 0;border-bottom:1px solid var(--hair);color:var(--ink)}
.j-row .j-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.j-row h2{font-size:clamp(20px,2vw,28px);line-height:1.25;letter-spacing:-.008em;transition:color .35s var(--ease-out)}
.j-row .j-excerpt{color:var(--slate);font-size:14px;line-height:1.7;max-width:38em;margin-top:8px}
.j-row .j-more{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate-dim);white-space:nowrap;transition:color .35s var(--ease-out)}
.j-row:hover h2{color:var(--accent-bright)}
.j-row:hover .j-more{color:var(--accent)}
@media (max-width:900px){.j-row{grid-template-columns:1fr;gap:8px}.j-row .j-more{display:none}}

/* ============ ABOUT: THE STANDARDS PAGE ============ */
/* The methodology ledger: numbered commitments, drawn like a register. */
.ledger{border-top:1px solid var(--hair)}
/* top-aligned with optical corrections: baseline alignment glued the big
   serif title to the small copy's first baseline, which read as the title
   hanging lower than the paragraph beside it */
.lg-row{display:grid;grid-template-columns:90px minmax(220px,340px) 1fr;gap:clamp(20px,3.4vw,64px);
  align-items:start;padding:clamp(26px,3.2vh,38px) 0;border-bottom:1px solid var(--hair)}
.lg-no{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--accent);padding-top:2px}
.lg-row h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.005em;line-height:1.25}
.lg-row p{color:var(--slate);font-size:14.5px;line-height:1.75;max-width:38em}
.lg-row p b{color:var(--ink-dim);font-weight:500}
@media (max-width:900px){.lg-row{grid-template-columns:1fr;gap:8px}}

/* refusal cells: what Zenith declines to build */
.cell .never{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--slate-dim)}
.cell .never::before{content:'✕';color:var(--accent);margin-right:10px;font-size:11px}

/* the quiet trust strip */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;
  padding:clamp(20px,2.4vw,30px) clamp(24px,3vw,44px);border-radius:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.trust-strip span{display:flex;align-items:center}
.trust-strip span + span::before{content:'·';margin:0 clamp(12px,1.6vw,22px);color:var(--accent-dim)}

/* ============ CENTERED SECTION HEAD ============ */
.sec-head{max-width:720px;margin:0 auto 7vh;text-align:center}
.sec-head .label{justify-content:center}
.sec-head .label::before{display:none}
.sec-head h2{margin-top:26px}
.sec-head .copy{margin:24px auto 0;max-width:34em}

/* ============ CELL GRIDS (glossary, principles) ============ */
.cells{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.cells--2{grid-template-columns:repeat(2,1fr)}
.cell{padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:12px}
.cell h3{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.005em}
.cell p{color:var(--slate);font-size:13.5px;line-height:1.7}
.cell .v-icon{margin-bottom:12px}
.cell .v-icon svg{display:block;stroke:#4A708C;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cell .v-icon .ic{stroke-width:1.6}

/* ============ VERSUS (comparison) ============ */
.versus{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);align-items:stretch}
.versus .vs-col{padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,38px);display:flex;flex-direction:column;gap:14px}
.versus .vs-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--slate)}
.versus h3{font-size:clamp(20px,1.8vw,26px);letter-spacing:-.005em}
.versus p{color:var(--slate);font-size:14px;line-height:1.7}
.versus .vs-art{height:64px;display:flex;align-items:center;margin-bottom:6px}
.versus .vs-art svg{display:block;overflow:visible}
.versus .vs-art .a1{stroke:#4A708C;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.versus .vs-art .a2{stroke:var(--slate-dim);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-dasharray:2 5}
.versus .vs-art .afill{fill:#4A708C;stroke:none}
.versus .vs-col.zen{border-color:var(--accent-dim);
  background:linear-gradient(165deg, rgba(63,106,140,.07), rgba(255,255,255,.78));
  box-shadow:0 0 110px rgba(63,106,140,.07), inset 0 0 80px rgba(63,106,140,.025)}
.versus .vs-col.zen .vs-tag{color:var(--accent)}

/* ============ JOURNAL ============ */
.j-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.j-card{display:flex;flex-direction:column;gap:14px;padding:clamp(30px,3.2vw,46px);color:var(--ink)}
.j-card:hover{color:var(--ink)}
.j-card .j-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.j-card h2{font-size:clamp(22px,2vw,30px);line-height:1.2;letter-spacing:-.008em;transition:color .35s var(--ease-out)}
.j-card:hover h2{color:var(--accent-bright)}
.j-card .j-excerpt{color:var(--slate);font-size:14px;line-height:1.7;max-width:36em}
.j-card .j-more{margin-top:auto;padding-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

/* ============ ESSAY (about) ============ */
.essay{max-width:720px}
.essay p{color:var(--ink-dim);font-size:clamp(16px,1.5vw,19px);line-height:1.85}
.essay p + p{margin-top:28px}
.essay em{font-family:var(--serif);font-style:italic;color:var(--accent)}
.essay strong{color:var(--ink);font-weight:500}

/* the signed note card */
.note-card{max-width:760px;margin:0 auto;padding:clamp(34px,4vw,56px)}
.note-card .note-body{font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);line-height:1.7;color:var(--ink-dim);margin-top:22px}
.note-card .note-sig{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);margin-top:26px}

/* ============ FINAL CTA ============ */
.cta-final{padding:16vh 0 8vh;text-align:center}
.cta-final h2{font-size:clamp(38px,5.6vw,88px);line-height:1.05;letter-spacing:-.014em}
.cta-final h2 .lum{font-style:italic;color:var(--accent);text-shadow:0 0 30px rgba(63,106,140,.12)}
.cta-final .cta-sub{color:var(--slate);margin:30px auto 0;max-width:28em;font-size:15px;line-height:1.75}
.cta-final .cta-row{margin-top:44px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
/* the waitlist ask sits on its own glass card, separated from the sky.
   Card-scale type: billboard sizes belong to the open page, not a box. */
.cta-final .cta-card{max-width:780px;margin:0 auto;
  padding:clamp(40px,4.6vw,60px) clamp(28px,4vw,56px);border-radius:28px;
  border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.6);
  box-shadow:0 24px 60px rgba(35,45,62,.07);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15)}
.cta-final .cta-card h2{font-size:clamp(30px,3.7vw,52px);line-height:1.12}
.cta-final .cta-card .cta-sub{margin:18px auto 0;font-size:14.5px;max-width:32em}
.cta-final .cta-card .cta-row{margin-top:32px}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .duo,.duo.rev{grid-template-columns:1fr}
  .duo.rev .duo-text{order:1}
  .duo.rev .duo-fig{order:2}
  .cells,.cells--2,.versus,.j-grid{grid-template-columns:1fr}
  .p-hero{padding-top:calc(88px + 8vh)}
  .pg{padding:8vh 0}
}