/* ===================================================================
   Clock 'N' Compass — inner-page compositions
   Extends cnc-home.css (the master system). Same tokens, same idiom:
   field-manual structure, route lines, specimens, colour-as-meaning.
   Load AFTER cnc-home.css.
   =================================================================== */

/* quiet inner-page label — replaces numbered mono kickers on inner pages */
.plabel{ font-family:var(--body); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px; }

/* active nav link — quiet lime underline */
.nav-links a[aria-current="page"]{ color:var(--ink); position:relative; }
.nav-links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--lime); border-radius:2px; }
.drawer-links a[aria-current="page"]{ color:var(--lime-ink); }

/* ===================== PAGE HERO (inner) ===================== */
.page-hero{ position:relative; padding:140px 0 56px; overflow:hidden; }
.page-hero.rule-bottom{ border-bottom:1px solid var(--line); }
.ph-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.ph-grid.solo{ grid-template-columns:1fr; max-width:880px; }
.ph-copy h1{ font-size:clamp(33px,4.4vw,50px); font-weight:600; line-height:1.08; letter-spacing:-.016em; text-wrap:balance; }
.ph-copy h1 em{ font-style:italic; color:var(--blue); }
.ph-sub{ font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--ink-2); margin:22px 0 0; max-width:34em; text-wrap:pretty; }
.ph-cta{ display:flex; gap:13px; margin-top:28px; flex-wrap:wrap; }
.ph-meta{ display:flex; gap:22px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line); flex-wrap:wrap; }
.ph-meta .m{ display:flex; flex-direction:column; gap:2px; }
.ph-meta .m .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.ph-meta .m .v{ font-family:var(--display); font-size:18px; font-weight:700; color:var(--ink); }

/* small instrument figure for page-hero right side */
.ph-figure{ position:relative; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-md); }
.ph-figure .fig-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ph-figure .fig-stamp{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px 9px; }
.ph-figure .fig-no{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); }
.ph-figure svg{ width:100%; height:auto; display:block; }

/* framed instrument object (page-hero) — a captioned editorial figure */
.ph-object{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.ph-object .po-stage{ display:flex; align-items:center; justify-content:center; padding:30px 28px 22px;
  background:radial-gradient(closest-side, rgba(22,35,58,.05), transparent 78%); }
.ph-object .po-stage img{ width:100%; max-width:330px; height:auto; }
.ph-object .po-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:12px 18px; border-top:1px solid var(--line); }
.ph-object .po-cap .t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.ph-object .po-cap .s{ font-size:12.5px; color:var(--ink-3); text-align:right; }

/* dial tick mark — small graduation used as a label marker */
.tickm{ display:inline-block; width:10px; height:2.5px; flex-shrink:0; background:var(--ink-3); }
.tickm.lime{ background:var(--lime); } .tickm.cyan{ background:var(--cyan); }
.tickm.amber{ background:var(--amber); } .tickm.coral{ background:var(--coral); }

/* ===================== WEEKLY NOTE (Commentary hero artifact) ===================== */
.wnote-wrap{ position:relative; }
.wnote-wrap::before{ content:""; position:absolute; inset:0; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-lg); transform:rotate(1.6deg) translate(6px,4px); }
.wnote{ position:relative; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-md); }
.wnote .wn-h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:13px 22px; border-bottom:1px solid var(--line); background:var(--paper); }
.wnote .wn-h .t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.wnote .wn-h .n{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); letter-spacing:.06em; }
.wnote .wn-b{ padding:22px 26px 22px; display:flex; flex-direction:column; gap:12px; }
.wnote .wn-open{ font-family:var(--display); font-size:17.5px; font-weight:600; line-height:1.45; margin:0; max-width:36ch; }
.wnote .wn-open mark{ background:rgba(207,146,42,.28); padding:1px 3px; color:inherit; }
.wnote .wn-sec{ display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--line); }
.wnote .wn-lab{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.wnote .wn-mono{ font-family:var(--mono); font-size:13.5px; color:var(--ink); }
.wnote .wn-sc{ display:flex; gap:9px; align-items:baseline; font-size:14.5px; color:var(--ink-2); line-height:1.45; }
.wnote .wn-sc .pin{ transform:translateY(-1px); }
.wnote .wn-margin{ display:flex; gap:10px; align-items:flex-start; padding-top:8px; }
.wnote .wn-margin .tickm{ margin-top:8px; }
.wnote .wn-margin p{ margin:0; font-family:var(--display); font-style:italic; font-size:15px; color:var(--cyan-ink); }
.wnote .wn-cap{ font-family:var(--display); font-style:italic; font-size:12.5px; color:var(--ink-3); margin:0; padding:11px 18px; border-top:1px solid var(--line); }

/* ===================== MODULE SHEET (Education) ===================== */
.msheet{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.msheet .ms-h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:13px 24px; border-bottom:1px solid var(--line); background:var(--paper); }
.msheet .ms-h .t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.msheet .ms-h .n{ font-family:var(--mono); font-size:10.5px; color:var(--ink-4); }
.msheet .ms-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:36px; padding:4px 24px; }
.msheet .ms-row{ display:grid; grid-template-columns:28px 1fr; gap:12px; padding:15px 0 14px; border-top:1px solid var(--line); align-items:baseline; }
.msheet .ms-row:nth-child(-n+2){ border-top:none; }
.msheet .ms-row .mn{ font-family:var(--mono); font-size:12px; color:var(--lime-ink); }
.msheet .ms-row .ms-t{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.msheet .ms-row h4{ font-family:var(--display); font-size:16.5px; font-weight:700; margin:0; }
.msheet .ms-row p{ margin:0; font-size:13px; color:var(--ink-3); line-height:1.45; }
.msheet .ms-f{ display:flex; align-items:center; gap:12px; padding:13px 24px; border-top:1px solid var(--line); background:var(--paper); }
.msheet .ms-f .out{ font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--ink); }

/* ===================== ACCESS PASS (Pricing) ===================== */
.apass{ display:grid; grid-template-columns:1fr 300px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.apass .ckrows::before{ left:43px; }
.ap-stub{ position:relative; border-left:2px dashed var(--line-2); background:var(--paper); padding:28px 26px; display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.ap-stub::before, .ap-stub::after{ content:""; position:absolute; left:-9px; width:16px; height:16px; border-radius:50%; background:var(--paper-2); border:1px solid var(--line); }
.ap-stub::before{ top:-9px; } .ap-stub::after{ bottom:-9px; }
.ap-stub .vseal{ width:84px; height:84px; }
.ap-stub .vseal .s1{ font-size:8.5px; } .ap-stub .vseal .s2{ font-size:12.5px; }
.stub-k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.stub-row{ display:flex; flex-direction:column; gap:3px; }
.stub-row .sv{ font-size:14px; font-weight:600; color:var(--ink); }

/* ===================== FEATURE / FACT / PRINCIPLE LISTS (no icon circles) ===================== */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.fact{ padding:26px 24px; border-right:1px solid var(--line); }
.fact:last-child{ border-right:none; }
.fact .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.fact .v{ font-family:var(--display); font-size:30px; font-weight:600; margin:8px 0 4px; letter-spacing:-.01em; }
.fact p{ margin:0; font-size:13.5px; color:var(--ink-3); line-height:1.5; }
.fact.lime .v{ color:var(--lime-ink); } .fact.cyan .v{ color:var(--cyan-ink); } .fact.amber .v{ color:var(--amber-ink); }

/* numbered principle rows (About) — ruled list, no cards */
.principles{ border-top:1px solid var(--line); }
.principle{ display:grid; grid-template-columns:54px 1fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.principle .pn{ font-family:var(--mono); font-size:13px; color:var(--ink-4); }
.principle h3{ font-size:19px; font-weight:700; margin-bottom:6px; }
.principle p{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.55; max-width:58ch; }

/* ===================== DOCUMENT CARD (registered business / official) ===================== */
.doc-card{ position:relative; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-md); }
.doc-card .doc-h{ display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.doc-card .doc-h .t{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.doc-card .doc-h .seal{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--lime); color:var(--lime-ink); display:flex; align-items:center; justify-content:center; }
.doc-card .doc-h .seal .ic{ width:17px; height:17px; }
.doc-row{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:11px 0; border-bottom:1px dashed var(--line); }
.doc-row:last-child{ border-bottom:none; }
.doc-row .dk{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); padding-top:2px; }
.doc-row .dv{ font-size:15px; color:var(--ink); line-height:1.5; }
.doc-row .dv a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

/* ===================== CONTACT CHANNELS / DESK ===================== */
.channels{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.channel{ display:flex; gap:16px; align-items:flex-start; padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .18s, box-shadow .18s, transform .18s; }
.channel:hover{ border-color:var(--ink-4); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.channel .ch-ic{ width:46px; height:46px; border-radius:var(--r-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.channel.lime .ch-ic{ background:var(--lime-soft); color:var(--lime-ink); }
.channel.cyan .ch-ic{ background:var(--cyan-soft); color:var(--cyan-ink); }
.channel .ch-ic .ic{ width:22px; height:22px; }
.channel h3{ font-size:17px; font-weight:700; margin-bottom:3px; }
.channel .ch-v{ font-size:15px; color:var(--ink); }
.channel .ch-n{ font-size:12.5px; color:var(--ink-3); margin-top:5px; line-height:1.45; }

/* form (contact) — calm, no glass */
.form-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-sm); }
.form-card .fc-h{ font-family:var(--display); font-size:22px; font-weight:700; margin-bottom:4px; }
.form-card .fc-sub{ font-size:14px; color:var(--ink-3); margin-bottom:24px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.field input, .field select, .field textarea{ width:100%; font-family:var(--body); font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-md); padding:12px 14px; transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,79,138,.13); }
.field textarea{ resize:vertical; min-height:120px; }
.consent{ display:flex; gap:11px; align-items:flex-start; margin-bottom:18px; }
.consent input{ margin-top:3px; width:16px; height:16px; flex-shrink:0; accent-color:var(--blue); }
.consent label{ font-size:12.5px; color:var(--ink-3); line-height:1.5; }
.form-err{ display:none; font-size:13px; color:var(--coral-ink); margin-bottom:14px; }
.form-note{ font-size:12px; color:var(--ink-4); margin-top:14px; }
.form-note a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

/* ===================== COMPARISON LEDGER (Pricing) ===================== */
.ledger-tbl{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden; }
.ledger-tbl th, .ledger-tbl td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--line); }
.ledger-tbl thead th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:500; background:var(--paper); }
.ledger-tbl tbody th{ font-weight:600; font-size:14.5px; color:var(--ink); }
.ledger-tbl td{ text-align:center; font-size:14px; color:var(--ink-2); }
.ledger-tbl td.yes{ color:var(--lime-ink); font-weight:700; }
.ledger-tbl td.no{ color:var(--ink-4); }
.ledger-tbl tr:last-child th, .ledger-tbl tbody tr:last-child td{ border-bottom:none; }
.ledger-tbl .pr{ font-family:var(--display); font-size:18px; font-weight:700; color:var(--ink); }
.ledger-tbl col.hl, .ledger-tbl .hl{ background:rgba(143,187,31,.07); }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===================== CONTENT PROSE (Commentary / generic) ===================== */
.copy-cols{ columns:2; column-gap:48px; }
.copy-cols p{ margin:0 0 16px; break-inside:avoid; font-size:15.5px; line-height:1.65; color:var(--ink-2); }

/* receive-each-week checklist (Commentary) */
.receive{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; }
.receive .r{ display:flex; gap:12px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line); }
.receive .r .tk{ width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--cyan-ink); }
.receive .r h4{ font-size:16px; font-weight:700; margin-bottom:3px; }
.receive .r p{ margin:0; font-size:13.5px; color:var(--ink-3); line-height:1.5; }

/* ===================== CTA BAND ===================== */
.cta-band{ background:var(--ink); border-radius:var(--r-xl); padding:48px; text-align:center; position:relative; overflow:hidden; }
.cta-band h2{ color:#fff; font-size:clamp(24px,3vw,34px); font-weight:700; }
.cta-band p{ color:rgba(255,255,255,.66); font-size:16px; margin:14px auto 0; max-width:46ch; }
.cta-band .ph-cta{ justify-content:center; border:none; margin-top:26px; padding:0; }

/* ===================== LEGAL ===================== */
.legal-wrap{ display:grid; grid-template-columns:260px 1fr; gap:54px; padding:130px 0 80px; align-items:start; }
.legal-side{ position:sticky; top:110px; }
.legal-side .ls-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.legal-docs{ display:flex; flex-direction:column; gap:2px; margin-bottom:28px; }
.legal-docs a{ display:flex; gap:10px; align-items:baseline; padding:9px 12px; border-radius:var(--r-sm); font-size:14px; color:var(--ink-2); transition:background .15s,color .15s; }
.legal-docs a .dn{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.legal-docs a:hover{ background:var(--paper-2); color:var(--ink); }
.legal-docs a.active{ background:var(--ink); color:#fff; }
.legal-docs a.active .dn{ color:var(--lime); }
.legal-toc{ border-top:1px solid var(--line); padding-top:18px; }
.legal-toc #toc{ display:flex; flex-direction:column; gap:9px; }
.legal-toc .lt-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
.legal-toc a{ font-size:13px; color:var(--ink-3); line-height:1.4; }
.legal-toc a:hover{ color:var(--blue); }
.legal-main .legal-head{ padding-bottom:24px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.legal-main .legal-head h1{ font-size:clamp(30px,4vw,44px); font-weight:600; letter-spacing:-.015em; }
.legal-main .legal-head .updated{ font-family:var(--mono); font-size:12px; color:var(--ink-4); margin-top:12px; }
.legal-prose h2{ font-family:var(--display); font-weight:600; font-size:23px; color:var(--ink); margin:38px 0 12px; letter-spacing:-.01em; scroll-margin-top:120px; display:flex; align-items:baseline; gap:12px; }
.legal-prose h2 .sx{ font-family:var(--mono); font-size:13px; color:var(--lime-ink); font-weight:500; }
.legal-prose h3{ font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); margin:24px 0 9px; }
.legal-prose p{ color:var(--ink-2); line-height:1.7; margin:0 0 15px; font-size:15.5px; max-width:68ch; }
.legal-prose ul{ margin:0 0 18px; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.legal-prose ul li{ position:relative; padding-left:22px; color:var(--ink-2); line-height:1.6; font-size:15.5px; max-width:66ch; }
.legal-prose ul li::before{ content:""; position:absolute; left:2px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--lime); }
.legal-prose a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.legal-prose strong{ color:var(--ink); font-weight:600; }
.legal-foot{ margin-top:34px; padding:22px 24px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); }
.legal-foot p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.legal-foot a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

/* ===================== UTILITY (404 / thank-you) ===================== */
.util{ min-height:88vh; display:flex; align-items:center; justify-content:center; padding:150px 0 90px; text-align:center; position:relative; overflow:hidden; }
.util-inner{ max-width:600px; margin:0 auto; position:relative; z-index:1; }
.util .big{ font-family:var(--display); font-size:clamp(72px,14vw,128px); font-weight:600; line-height:.95; letter-spacing:-.02em; color:var(--ink); }
.util h1{ font-size:clamp(26px,3.6vw,38px); font-weight:600; line-height:1.12; margin-top:6px; text-wrap:balance; }
.util h1 em{ font-style:italic; color:var(--blue); }
.util p{ font-size:17px; color:var(--ink-2); line-height:1.55; margin:18px auto 0; max-width:44ch; }
.util .ph-cta{ justify-content:center; border:none; padding:0; margin-top:30px; }
.util .util-note{ font-family:var(--mono); font-size:12px; color:var(--ink-4); margin-top:30px; }
.util .util-note a{ color:var(--blue); }
.seal-badge{ width:64px; height:64px; border-radius:50%; border:1.5px solid var(--lime); color:var(--lime-ink); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; background:var(--surface); }
.seal-badge .ic{ width:30px; height:30px; }

/* page-level section helpers */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.grid-2.wide-left{ grid-template-columns:1.15fr .85fr; }
.stack-head{ max-width:620px; margin-bottom:36px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:960px){
  .ph-grid{ grid-template-columns:1fr; gap:30px; }
  .grid-2, .grid-2.wide-left{ grid-template-columns:1fr; gap:30px; }
  .copy-cols{ columns:1; }
  .msheet .ms-grid{ grid-template-columns:1fr; }
  .msheet .ms-row:nth-child(2){ border-top:1px solid var(--line); }
  .legal-wrap{ grid-template-columns:1fr; gap:30px; padding-top:120px; }
  .legal-side{ position:static; }
  .legal-docs{ flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:680px){
  .facts{ grid-template-columns:1fr; }
  .fact{ border-right:none; border-bottom:1px solid var(--line); }
  .fact:last-child{ border-bottom:none; }
  .channels{ grid-template-columns:1fr; }
  .receive{ grid-template-columns:1fr; }
  .principle{ grid-template-columns:1fr; gap:6px; }
  .doc-row{ grid-template-columns:1fr; gap:2px; }
  .doc-row .dk{ padding-top:0; }
  .cta-band, .doc-card, .form-card{ padding:28px 22px; }
  .apass{ grid-template-columns:1fr; }
  .ap-stub{ border-left:none; border-top:2px dashed var(--line-2); }
  .ap-stub::before{ top:-9px; left:-9px; }
  .ap-stub::after{ top:-9px; left:auto; right:-9px; bottom:auto; }
  .wnote .wn-b{ padding:18px 20px; }
  .msheet .ms-grid{ padding:4px 18px; }
}

/* ===================================================================
   LEGAL — small-viewport hardening (320px). The privacy doc carries a
   wide CCPA category table; it must scroll in its own box, never the page.
   =================================================================== */
.tbl-scroll{ max-width:100%; }
.legal-side{ min-width:0; }
.legal-main{ min-width:0; }
.legal-prose{ min-width:0; }
.legal-prose p, .legal-prose ul li{ overflow-wrap:anywhere; }
.legal-prose a{ overflow-wrap:anywhere; }
.legal-foot p{ overflow-wrap:anywhere; }
.legal-prose .tbl-scroll{ margin:0 0 18px; border:1px solid var(--line); border-radius:var(--r-md); }
.legal-prose table{ border-collapse:collapse; width:100%; min-width:480px; font-size:13.5px; margin:0; background:var(--surface); }
.legal-prose thead th{ background:var(--paper-2); font-family:var(--body); font-weight:600; text-align:left; color:var(--ink); }
.legal-prose th, .legal-prose td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; line-height:1.5; }
.legal-prose th:last-child, .legal-prose td:last-child{ border-right:none; }
.legal-prose tbody tr:last-child td{ border-bottom:none; }

/* ===================================================================
   PRICING — interactive layer (plan-detail panel, payment <dialog>)
   Presentation only. The data + flow live in Pricing.html's script.
   =================================================================== */
.hidden{ display:none !important; }

/* selected-state highlight on a pass card (URL ?plan= or click) */
.pass.plan-selected{ outline:2px solid var(--lime); outline-offset:3px; }
.pass [data-plan-badge]{ display:flex; align-items:center; gap:6px; }

/* ---- plan detail panel ---- */
.pd-wrap{ max-width:680px; margin:0 auto; }
.pd-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-md); }
.pd-back{ display:inline-flex; align-items:center; gap:7px; background:none; border:none; font-size:13.5px; font-weight:600; color:var(--ink-3); margin-bottom:20px; padding:0; }
.pd-back:hover{ color:var(--ink); }
.pd-back .ic{ width:15px; height:15px; }
.pd-head h3{ font-family:var(--display); font-size:23px; font-weight:700; margin-bottom:4px; }
.pd-head .pd-price{ font-family:var(--mono); font-size:13px; color:var(--ink-3); }
.pd-sect{ margin-top:22px; }
.pd-sect .pd-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-bottom:12px; }
#pd-includes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
#pd-includes li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--ink-2); line-height:1.5; }
#pd-includes li .ic{ width:17px; height:17px; flex-shrink:0; margin-top:2px; color:var(--lime-ink); }
.pd-box{ margin-top:14px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; }
.pd-box h4{ font-family:var(--display); font-size:14px; font-weight:700; margin-bottom:5px; }
.pd-box p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.55; }
.pd-box a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; font-size:12.5px; display:inline-block; margin-top:8px; }
.pd-box.risk{ background:var(--coral-soft); border-color:#eccabf; }
.pd-box.risk h4{ color:var(--coral-ink); }
.pd-foot-note{ text-align:center; font-size:13px; color:var(--ink-3); margin-top:16px; }
.pd-foot-note a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

/* ---- payment modal (native <dialog>) ---- */
dialog.pay-modal{ width:min(calc(100vw - 24px),470px); max-width:calc(100vw - 24px); border:none; border-radius:var(--r-lg); padding:0; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); max-height:92vh; overflow:hidden; }
dialog.pay-modal::backdrop{ background:rgba(22,35,58,.5); }
dialog.pay-modal, dialog.pay-modal *{ box-sizing:border-box; max-width:100%; }
.pm-head{ position:sticky; top:0; z-index:2; background:var(--surface); border-bottom:1px solid var(--line); padding:18px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pm-head .pm-eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--lime-ink); display:block; margin-bottom:5px; }
.pm-head h2{ font-family:var(--display); font-size:19px; font-weight:700; line-height:1.15; }
.pm-x{ flex-shrink:0; width:36px; height:36px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); }
.pm-x .ic{ width:18px; height:18px; }
.pm-body{ padding:18px 20px; display:flex; flex-direction:column; gap:15px; max-height:calc(92vh - 72px); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.pm-notice{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; font-size:13px; color:var(--ink-2); line-height:1.55; }
.pm-notice strong{ color:var(--ink); font-weight:600; }
.pm-priceline{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.pm-priceline .pm-price{ font-family:var(--display); font-size:25px; font-weight:700; color:var(--ink); overflow-wrap:anywhere; }
.cur-toggle{ display:flex; gap:4px; padding:4px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-pill); flex-shrink:0; }
.cur-btn{ padding:7px 15px; border:none; background:none; border-radius:var(--r-pill); font-size:13px; font-weight:600; color:var(--ink-3); }
.cur-btn.active{ background:var(--ink); color:#fff; }
.pm-acct{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.pm-acct-title{ padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper); font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.pm-acct .pm-acct-rows{ padding:15px 16px; display:flex; flex-direction:column; gap:12px; }
.pm-acct .ar{ display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:14.5px; min-width:0; }
.pm-acct .ar.bdr{ padding-bottom:12px; border-bottom:1px solid var(--line); align-items:flex-start; }
.pm-acct .ar .lab{ color:var(--ink-3); flex-shrink:0; }
.pm-acct .ar .val{ color:var(--ink); font-weight:600; text-align:right; line-height:1.35; overflow-wrap:anywhere; }
.pm-acct #pm-account-number{ font-family:var(--mono); letter-spacing:.1em; font-size:15px; color:var(--ink); font-weight:600; overflow-wrap:anywhere; }
.pm-acct .account-value{ display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; flex-wrap:wrap; }
.pm-copy-small{ min-height:30px; padding:0 12px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line-2); color:var(--ink); font-size:12px; font-weight:600; white-space:normal; }
.pm-copy-small:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); }
.pm-copy-small:disabled{ opacity:.55; cursor:default; }
.pm-acct .copy-row{ display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; flex-wrap:wrap; }
.pm-copy-btn{ min-height:32px; padding:0 12px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line-2); color:var(--ink); font-size:12px; font-weight:600; white-space:normal; }
.pm-copy-btn:hover:not(:disabled){ background:var(--ink); color:#fff; border-color:var(--ink); }
.pm-copy-btn:disabled{ opacity:.55; cursor:default; }
#pm-amount-note{ background:var(--amber-soft); border-top:1px solid #ecdcbe; padding:11px 16px; font-size:12.5px; color:var(--amber-ink); line-height:1.5; }
.pm-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.pm-steps li{ display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--ink-2); line-height:1.45; }
.pm-steps li .n{ flex-shrink:0; width:20px; height:20px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--mono); font-size:11px; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.pm-proof{ display:flex; flex-direction:column; gap:10px; }
.pm-proof .btn{ width:100%; padding:12px 14px; font-size:14px; white-space:normal; min-width:0; }
.pm-disclaimer{ background:var(--coral-soft); border-left:3px solid var(--coral); border-radius:var(--r-sm); padding:13px 15px; font-size:12.5px; color:var(--ink-2); line-height:1.55; }
.pm-disclaimer strong{ color:var(--ink); font-weight:600; display:block; margin-bottom:3px; }
.pm-disclaimer a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:560px){
  .pd-card{ padding:24px 20px; }
  dialog.pay-modal{ max-height:calc(100vh - 16px); }
  .pm-head{ padding:16px; }
  .pm-body{ padding:16px; max-height:calc(100vh - 88px); }
  .pm-priceline{ align-items:flex-start; flex-direction:column; }
  .cur-toggle{ width:100%; }
  .cur-btn{ flex:1; }
  .pm-acct .ar{ align-items:flex-start; flex-direction:column; gap:4px; }
  .pm-acct .ar .val{ text-align:left; }
  .pm-acct .account-value{ align-items:center; justify-content:flex-start; flex-direction:row; gap:8px; width:100%; }
  .pm-acct #pm-account-number{ letter-spacing:.04em; }
  .pm-copy-small{ width:auto; min-height:28px; padding:0 8px; font-size:11.5px; white-space:nowrap; }
  .pm-acct .copy-row{ justify-content:flex-start; }
  .pm-copy-btn{ width:100%; }
}