/* =========================================================
   pages.css — blog posts, FAQ, About, legal pages, 404
   (loaded after styles.css; reuses its tokens)
   ========================================================= */

/* ---------- article meta ---------- */
.crumbs{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); margin-bottom:22px}
.crumbs a{color:var(--mist); text-decoration:none; border-bottom:1px solid var(--line-d2); display:inline-block; padding:6px 0}
.crumbs a:hover{color:var(--teal-hi); border-color:var(--teal-hi)}
.crumbs span{margin:0 6px}
.byline{font-size:.95rem; color:var(--mist); margin:18px 0 0; max-width:none}
.byline a{color:var(--light); font-weight:700; text-decoration:none; border-bottom:1px solid var(--teal)}
.byline a:hover{color:var(--teal-hi)}
.byline span{margin:0 6px}

/* tables scroll inside themselves on small screens */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.8em 0}
.table-scroll table{margin:0; min-width:520px}
.table-scroll:focus-visible{outline:2px solid var(--teal); outline-offset:3px}

.article-body .post-closer{margin-top:2.2em; padding:22px 24px; border-left:3px solid var(--teal); background:var(--cloud); color:var(--ink)}

/* related posts */
.related{max-width:72ch; margin-top:56px; padding-top:34px; border-top:1px solid var(--line-l)}
.related h2{color:var(--ink); font-size:1.3rem; margin-bottom:18px}
.related ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.related a{display:block; padding:16px 18px; border:1px solid var(--line-l); background:#fff; color:var(--ink); font-weight:700; text-decoration:none; line-height:1.35; transition:border-color .25s, transform .25s}
.related a:hover{border-color:var(--teal); transform:translateX(3px)}
.related .meta{display:block; font-family:var(--mono); font-weight:400; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:6px}

/* end-of-post CTA */
.post-cta{padding:100px 0}
.post-cta .sec-sub{margin-top:1em}
.post-cta .contact-row{gap:16px}

/* blog index cards use h2 for correct heading order */
.post-card h2{color:var(--light); font-size:1.16rem; line-height:1.3; letter-spacing:-.01em}
.blog-list{padding-top:70px}

/* ---------- newsletter / checklist capture ---------- */
.nl-band{padding:80px 0}
.nl-box{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; border:1px solid var(--line-d2); background:var(--panel); padding:44px}
.nl-title{font-size:clamp(1.5rem,3vw,2.1rem)}
.nl-copy p{color:var(--mist); margin:0}
.nl-form-wrap .lead-form label:first-of-type{margin-top:0}
.nl-form-wrap .btn{width:100%; justify-content:center}
.nl-form-wrap .form-consent a, .nl-form-wrap .form-success a{color:var(--teal-hi)}
@media (max-width:820px){
  .nl-box{grid-template-columns:1fr; gap:26px; padding:30px 22px}
}

/* ---------- generic page hero (FAQ, About, legal, 404) ---------- */
.page-hero{padding:170px 0 70px; background:var(--void); position:relative; overflow:hidden}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(46,159,232,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(46,159,232,.07) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, transparent 100%);
}
.page-hero .wrap{position:relative; max-width:940px}
.page-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); max-width:22ch}
.page-hero .sec-sub{margin-top:.6em}
.page-hero .hero-ctas{margin-top:30px}

/* ---------- FAQ page ---------- */
.faq-page .faq{max-width:860px}
.faq-page .faq details p, .faq-page .faq details ul{color:var(--mist)}
.faq-page .faq details a{color:var(--teal-hi)}
.faq-page .faq summary{min-height:44px}
.faq-page .faq .faq-q{font-size:1.08rem; margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.35; color:var(--light)}
.faq-group-title{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal-hi); margin:56px 0 8px}
.faq-group-title:first-child{margin-top:0}

/* ---------- About page ---------- */
.about-page .portrait img{height:auto}
.about-lede{font-size:1.2rem; color:var(--light); max-width:60ch}
.about-copy p{color:var(--mist); max-width:64ch}
.fact-list{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:1px; background:var(--line-d); border:1px solid var(--line-d)}
.fact-list li{background:var(--deep); padding:16px 20px; display:grid; grid-template-columns:150px 1fr; gap:16px; font-size:.96rem}
.fact-list .k{font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); padding-top:3px}
@media (max-width:560px){ .fact-list li{grid-template-columns:1fr; gap:4px} }
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px}
.svc{border:1px solid var(--line-d2); background:var(--panel); padding:32px 28px; scroll-margin-top:110px}
.svc h3{font-size:1.25rem}
.svc .price{font-size:1.6rem; font-weight:800; color:var(--light); margin:.2em 0 .6em}
.svc .price small{display:block; font-family:var(--mono); font-weight:400; font-size:.6rem; letter-spacing:.14em; color:var(--mist); margin-top:6px; text-transform:uppercase}
.svc p, .svc li{color:var(--mist); font-size:.95rem}
.svc ul{padding-left:18px; margin:0}
.svc .note{font-size:.85rem; color:var(--gold); margin-top:14px}
.principles{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:10px}
.principle{border-top:2px solid var(--teal); padding-top:18px}
.principle h3{font-size:1.1rem}
.principle p{color:var(--mist); font-size:.95rem; margin:0}

/* ---------- legal pages ---------- */
.legal .article-body{font-size:1.04rem; line-height:1.75}
.legal .article-body h2{font-size:1.4rem; margin-top:2.2em}
.legal .article-body h3{color:var(--ink); font-size:1.1rem; margin-top:1.6em}
.legal .article-body ul{color:#33475A; padding-left:22px; margin:0 0 1.35em}
.legal .article-body li{margin-bottom:.45em}
.legal-summary{border:1px solid var(--line-l); border-left:3px solid var(--teal); background:#fff; padding:22px 24px; margin-bottom:2em}
.legal-summary h2{margin-top:0!important}
.legal-summary ul{margin-bottom:0!important}
.legal-meta{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mist); margin-top:14px}
.toc{columns:2; column-gap:32px; font-size:.95rem; padding-left:20px!important}
@media (max-width:640px){ .toc{columns:1} }

/* ---------- 404 ---------- */
.nf{min-height:calc(100svh - 80px); display:flex; align-items:center; padding:150px 0 90px}
.nf .wrap{width:100%}
.nf .code{font-family:var(--mono); font-size:.8rem; letter-spacing:.3em; color:var(--gold); margin-bottom:18px}
.nf-links{list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; max-width:860px}
.nf-links a{display:block; padding:18px 20px; border:1px solid var(--line-d2); background:var(--panel); color:var(--light); text-decoration:none; font-weight:700; min-height:44px; transition:border-color .25s, transform .25s}
.nf-links a:hover{border-color:var(--teal); transform:translateY(-3px)}
.nf-links small{display:block; font-family:var(--mono); font-weight:400; font-size:.62rem; letter-spacing:.14em; color:var(--mist); text-transform:uppercase; margin-top:6px}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .article-hero, .page-hero{padding:130px 0 56px}
  .article-body-wrap{padding:56px 0 70px}
  .article-body{font-size:1.06rem}
  .article-body .lede{font-size:1.2rem}
  .article-body h2{font-size:1.45rem}
  .post-cta{padding:72px 0}
  .post-cta .contact-row .btn{width:100%; justify-content:center}
  .page-hero .hero-ctas .btn{width:100%; justify-content:center}
}
@media (prefers-reduced-motion: reduce){
  .related a, .nf-links a{transition:none}
  .related a:hover, .nf-links a:hover{transform:none}
}