/* Pre-Trip guides: a legal-content surface on the Kesey brand chassis.
   The identity (bus/route motif, lime and violet) carries structure; statute
   text gets typographic seriousness: a 66ch measure, real citation styling,
   severity colors used only with their scanner meanings. No em-dashes. */

.guide{background:var(--ink);}

/* ---------- breadcrumbs (E2) ---------- */
.breadcrumbs{border-bottom:1px solid var(--line); background:rgba(14,13,18,.6);}
.breadcrumbs .wrap{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--dim);}
.breadcrumbs a{color:var(--dim);} .breadcrumbs a:hover{color:var(--bone);}
.breadcrumbs [aria-current]{color:var(--lime);}
.bc-sep{color:var(--line);}

/* ---------- article shell: the reading measure ---------- */
.guide-wrap{display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:52px; align-items:start;
  max-width:1120px; margin:0 auto; padding:0 28px;}
.guide-main{min-width:0; padding:44px 0 12px;}
.guide-main > *{max-width:66ch;}
.guide-main .full{max-width:none;}
.guide-hero{max-width:none; margin-bottom:14px;}
.guide-kicker{color:var(--lime); margin-bottom:16px;}
.guide-main h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,4.2vw,46px);
  line-height:1.08; letter-spacing:-.02em; margin-bottom:16px; max-width:20ch;}
.guide-dek{font-size:19px; color:var(--dim); line-height:1.5; margin-bottom:20px; max-width:60ch;}
.guide-main h2{font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-.01em;
  margin:14px 0 12px;}
.guide-main h3{font-family:var(--display); font-weight:600; font-size:19px; margin:22px 0 8px;}
.guide-main p{font-size:16.5px; line-height:1.72; color:#D9D4E4; margin-bottom:16px;}
.guide-main p strong{color:var(--bone); font-weight:600;}
.guide-main a:not(.btn){color:var(--cyan); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;}
.guide-main a:not(.btn):hover{color:var(--bone);}
.guide-main ul, .guide-main ol{margin:0 0 18px 0; padding-left:22px; color:#D9D4E4;}
.guide-main li{font-size:16.5px; line-height:1.66; margin-bottom:8px;}

/* the direct answer, the AI-citation surface: set apart, first thing read */
.answer{max-width:66ch; margin:6px 0 30px; padding:20px 24px; border-radius:16px;
  background:linear-gradient(180deg,rgba(200,245,66,.06),rgba(124,92,255,.05));
  border:1px solid var(--line); border-left:3px solid var(--lime);}
.answer p{font-size:18px; line-height:1.6; color:var(--bone); margin:0;}
.answer p + p{margin-top:12px;}

/* ---------- route-stop section markers (the real reading sequence) ---------- */
.stop{display:flex; align-items:center; gap:12px; margin:40px 0 6px; max-width:none;}
.stop-dot{width:13px; height:13px; border-radius:50%; flex:none; position:relative;
  background:var(--ink2); border:2px solid var(--violet);}
.stop-dot::before{content:""; position:absolute; left:5px; top:13px; width:2px; height:34px;
  background:linear-gradient(var(--violet),transparent);}
.stop-n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--violet);}
.stop-label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);}

/* ---------- signature 1: the statute artifact (D4) ---------- */
.artifact{margin:18px 0 24px; max-width:66ch; border:1px solid var(--line); border-radius:16px;
  background:var(--ink2); overflow:hidden;}
.art-quote{margin:0; padding:20px 24px 14px; font-family:var(--mono); font-size:14px; line-height:1.7;
  color:var(--bone); border-bottom:1px dashed var(--line);}
.art-cap{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:13px 24px;
  background:rgba(124,92,255,.06);}
.art-cite{font-family:var(--mono); font-size:12px; color:var(--bone);}
.art-cite a{color:var(--cyan);}
.art-eff{font-family:var(--mono); font-size:11px; color:var(--dim);}
.art-verified{margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:11px; letter-spacing:.04em; color:var(--lime);}
.art-tick{width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(200,245,66,.15);}
.art-pending{color:var(--orange);}

/* ---------- signature 2: the findings-styled example pair (D3) ---------- */
.pair{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0 26px; max-width:none;}
.pair-side{border:1px solid var(--line); border-radius:14px; background:var(--ink2); padding:16px 18px; border-left-width:4px;}
.pair-flag.sev-high{border-left-color:var(--pink); background:linear-gradient(180deg,rgba(255,77,157,.06),transparent);}
.pair-flag.sev-standard{border-left-color:var(--orange); background:linear-gradient(180deg,rgba(255,122,47,.06),transparent);}
.pair-flag.sev-counsel{border-left-color:var(--violet); background:linear-gradient(180deg,rgba(124,92,255,.07),transparent);}
.pair-pass{border-left-color:var(--lime); background:linear-gradient(180deg,rgba(200,245,66,.05),transparent);}
.pair-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.pair-verdict{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-left:auto;}
.pair-quote{margin:0 0 10px; padding:11px 14px; border-radius:9px; background:var(--ink); font-size:14.5px;
  line-height:1.55; color:var(--bone); font-style:italic; border:1px solid var(--line);}
.pair-why{font-size:13.5px; line-height:1.55; color:var(--dim); margin:0 0 8px;}
.pair-rule{font-family:var(--mono); font-size:11px; color:var(--dim); margin:0;}
.pair-src{color:var(--cyan);}
.chip-pass{background:rgba(200,245,66,.12); color:var(--lime);}
.chip-pass i{background:var(--lime);}

/* ---------- penalty tiers + variance data visuals ---------- */
.tiers{list-style:none; margin:14px 0 24px; padding:0; max-width:66ch; display:grid; gap:8px;}
.tier{display:flex; gap:16px; align-items:baseline; padding:12px 16px; border-radius:11px;
  background:var(--ink2); border:1px solid var(--line); border-left:3px solid var(--dim);}
.tier-criminal{border-left-color:var(--pink);}
.tier-civil{border-left-color:var(--orange);}
.tier-license{border-left-color:var(--violet);}
.tier-k{flex:0 0 40%; font-weight:600; font-size:14.5px; color:var(--bone);}
.tier-v{flex:1; font-size:14px; color:var(--dim); line-height:1.5;}

/* state-variance table */
.variance{max-width:none; margin:16px 0 26px; overflow-x:auto; border:1px solid var(--line); border-radius:14px;}
.variance table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px;}
.variance th{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  text-align:left; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--ink2);}
.variance td{padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:#D9D4E4; line-height:1.5;}
.variance tr:last-child td{border-bottom:none;}
.variance .v-state{font-weight:600; color:var(--bone); white-space:nowrap;}
.variance .v-cite{font-family:var(--mono); font-size:11.5px; color:var(--cyan);}

/* banned-claims inventory list ("words you can't use") */
.inv{list-style:none; margin:14px 0 24px; padding:0; max-width:66ch; display:grid; gap:10px;}
.inv-item{padding:14px 18px; border-radius:12px; background:var(--ink2); border:1px solid var(--line);}
.inv-head{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.inv-desc{font-size:15px; color:var(--bone); font-weight:600;}
.inv-why{font-size:13.5px; color:var(--dim); line-height:1.55; margin:0;}
.inv-src{font-family:var(--mono); font-size:11px; color:var(--cyan); margin-top:6px;}

/* risk chips reuse the scanner's severity language */
.chip-risk-high{background:rgba(255,77,157,.12); color:var(--pink);}
.chip-risk-high i{background:var(--pink);}
.chip-risk-standard{background:rgba(255,122,47,.12); color:var(--orange);}
.chip-risk-standard i{background:var(--orange);}

/* ---------- CTA block (D5) ---------- */
.cta{margin:34px 0 10px; max-width:66ch; padding:26px 28px; border-radius:20px;
  background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(255,77,157,.1));
  border:1px solid rgba(124,92,255,.4);}
.cta-eyebrow{color:var(--lime); margin-bottom:12px;}
.cta-title{font-family:var(--display); font-weight:800; font-size:26px; line-height:1.1; margin-bottom:10px; color:var(--bone);}
.cta-body{font-size:16px; color:#D9D4E4; line-height:1.6; margin-bottom:14px;}
.cta-consent{font-size:13.5px; color:var(--bone); margin-bottom:16px;}
.cta-btn{margin-bottom:12px;}
.cta-note{font-size:12.5px; color:var(--dim); margin:0;}

/* inline CTA directly under the answer: the early conversion point */
.cta-inline{max-width:66ch; margin:0 0 32px; padding:13px 16px 13px 20px; border-radius:14px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(255,77,157,.08));
  border:1px solid rgba(124,92,255,.34);}
.cta-inline-txt{flex:1 1 230px; font-size:14.5px; line-height:1.5; color:#D9D4E4; margin:0;}
.cta-inline-txt strong{color:var(--bone); font-weight:600;}
.cta-inline .btn{flex:none; white-space:nowrap; padding:11px 22px; font-size:14.5px;}

/* sticky sidebar CTA card: rides the whole scroll on desktop */
.side-cta{border-radius:14px; padding:18px;
  background:linear-gradient(135deg,rgba(124,92,255,.17),rgba(255,77,157,.11));
  border:1px solid rgba(124,92,255,.45);}
.side-cta-eyebrow{color:var(--lime); margin-bottom:8px;}
.side-cta-title{font-family:var(--display); font-weight:700; font-size:17px; line-height:1.16; color:var(--bone); margin-bottom:13px;}
.side-cta .btn{display:block; text-align:center; padding:11px 18px; font-size:14px;}
.side-cta-note{font-size:11.5px; color:var(--dim); margin:11px 0 0; line-height:1.45;}

/* ---------- sources + not-legal-advice ---------- */
.sources{margin:28px 0 8px; max-width:66ch; padding:18px 22px; border:1px solid var(--line); border-radius:14px; background:var(--ink2);}
.sources-h{color:var(--dim); margin-bottom:10px;}
.sources ul{list-style:none; margin:0; padding:0; display:grid; gap:7px;}
.sources li{font-size:13.5px; line-height:1.5;}
.sources a{color:var(--cyan);}
.src-primary{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lime); border:1px solid rgba(200,245,66,.3); border-radius:999px; padding:1px 7px; margin-left:6px;}
.legal-note{max-width:66ch; margin:22px 0 0; padding:14px 18px; border-radius:12px; border:1px dashed var(--line);
  font-size:13px; color:var(--dim); line-height:1.6;}

/* ---------- sidebar (E3) ---------- */
.side{position:sticky; top:88px; padding:44px 0 12px; display:flex; flex-direction:column; gap:24px;}
.side-block{border:1px solid var(--line); border-radius:14px; background:var(--ink2); padding:16px 18px;}
.side-h{color:var(--lime); margin-bottom:10px;}
.side-block ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.side-block a{font-size:14px; color:var(--dim); line-height:1.4;}
.side-block a:hover{color:var(--bone);}

/* ---------- illustration frames ---------- */
.spot{margin:10px 0 22px; max-width:66ch;}
.spot svg{width:100%; height:auto; display:block;}
.minimap{max-width:none; margin:0;}
.minimap svg{width:100%; max-width:200px; height:auto;}
.hero-flex{display:flex; gap:30px; align-items:center; justify-content:space-between;}
.hero-txt{flex:1 1 auto; min-width:0;}
.guide-hero .minimap, .spot-illo{flex:0 0 auto; width:154px; opacity:.92; margin:0;}
.guide-hero .minimap svg{max-width:154px; max-height:128px;}
.spot-illo svg{width:154px; height:auto;}
@media (max-width:640px){
  .hero-flex{flex-direction:column; align-items:flex-start; gap:14px;}
  .guide-hero .minimap, .spot-illo{width:118px;}
}

/* ---------- footer additions ---------- */
.foot-legal{font-size:12.5px; color:var(--dim);}
.foot-right{text-align:right; color:var(--dim); font-size:13px; line-height:1.7;}

/* ---------- hub page ---------- */
.hub-cluster{margin-top:40px;}
.hub-cluster > h2{font-family:var(--display); font-weight:800; font-size:28px; margin-bottom:6px;}
.hub-cluster > p{color:var(--dim); font-size:16px; margin-bottom:20px; max-width:60ch;}
.hub-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.hub-card{display:block; padding:22px 24px; border-radius:16px; background:var(--ink2); border:1px solid var(--line);
  transition:transform .18s ease, border-color .18s ease;}
.hub-card:hover{transform:translateY(-3px); border-color:#3a3648;}
.hub-card .hc-tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--violet);}
.hub-card h3{font-family:var(--display); font-weight:600; font-size:18px; margin:8px 0 6px; color:var(--bone);}
.hub-card p{font-size:14px; color:var(--dim); line-height:1.5; margin:0;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .guide-wrap{grid-template-columns:1fr; gap:0;}
  .side{position:static; padding-top:8px; border-top:1px solid var(--line);}
}
@media (max-width:640px){
  .pair{grid-template-columns:1fr;}
  .tier-k{flex-basis:auto;}
  /* drop the decorative hero spot on phones so the answer and inline CTA
     come up the page; state silhouettes (minimap) stay, they carry meaning */
  .guide-hero .spot-illo{display:none;}
  .answer{margin-top:0;}
}
@media (prefers-reduced-motion:reduce){
  .hub-card{transition:none;}
}