/* Speech Away - SEO guide pages. Mirrors the app's monochrome editorial
   system (see design.md / tailwind.config.js). Self-contained: these pages do
   not load the app's Tailwind build. */
:root{
  --ink:#000;--ink-soft:#2b2b2b;--paper:#fff;--paper-alt:#f7f7f7;
  --n100:#e5e5e5;--n200:#bababa;--n300:#808080;--n400:#767676;--n500:#545454;
  --good:#1b6b3a;--surface:#1c1c1c;
  --serif:"Crimson Text","Adobe Garamond Pro",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --reading:720px;--text:640px;--container:1100px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:#000;color:#fff}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;letter-spacing:-.2px}
p{text-wrap:pretty}
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.reading{max-width:var(--reading);margin:0 auto;padding:0 24px}

/* header / footer */
.site{border-bottom:1px solid var(--n100)}
.bar-row{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px}
.brand{font-family:var(--serif);font-size:17px;text-decoration:none;letter-spacing:-.2px}
.cta-link{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:var(--n400);text-decoration:none;min-height:40px;display:inline-flex;align-items:center;transition:color .2s}
.cta-link:hover{color:var(--ink)}
.site-foot{border-top:1px solid var(--n100);margin-top:96px;padding:40px 0}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:20px}
.foot-links a{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--n400);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--ink)}
.fine{font-size:11px;letter-spacing:1px;color:var(--n300)}
.fine a{color:var(--n300);text-decoration:none}
.fine a:hover{color:var(--ink)}

/* shared bits */
.eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;color:var(--n400);margin:0 0 0;display:block}
.crumbs{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--n400);margin:40px 0 28px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumbs a{color:var(--n400);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{color:var(--n200)}
.crumbs [aria-current]{color:var(--ink)}
.lede{font-size:20px;line-height:1.4;color:var(--n500);max-width:var(--text)}

/* article */
article{padding-bottom:8px}
article h1{font-size:clamp(34px,5vw,48px);line-height:1.08;margin:12px 0 0}
article h2{font-size:27px;line-height:1.12;margin:48px 0 14px}
article h3{font-size:21px;line-height:1.14;margin:28px 0 10px}
article p{margin:0 0 16px;max-width:var(--text)}
article section p,article section li{color:var(--ink-soft)}
article ul,article ol{max-width:var(--text);padding-left:22px;margin:0 0 16px;color:var(--ink-soft)}
article li{margin:0 0 10px;line-height:1.5}
article a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--n200)}
article a:hover{text-decoration-color:var(--ink)}
em{font-style:italic}

/* quick-answer + callouts */
.answer{border-left:2px solid var(--ink);background:var(--paper-alt);padding:18px 22px;margin:24px 0 8px;max-width:var(--text)}
.answer-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;color:var(--n400);margin:0 0 8px}
.answer p{margin:0;color:var(--ink)}
.callout{border:1px solid var(--n100);padding:18px 22px;margin:20px 0;max-width:var(--text)}
.callout p{margin:0 0 10px}
.callout p:last-child{margin:0}

/* FAQ */
.faq{margin-top:56px}
.faq h2{font-size:27px;margin:8px 0 8px}
.faq-item{border-top:1px solid var(--n100);padding:20px 0}
.faq-q{font-size:19px;margin:0 0 8px}
.faq-a{margin:0;color:var(--ink-soft);max-width:var(--text)}

/* CTA band */
.cta-band{background:var(--surface);color:var(--paper);padding:40px;margin:56px 0 8px}
.cta-band .eyebrow{color:var(--n300)}
.cta-band h2{color:var(--paper);font-size:30px;margin:10px 0 12px}
.cta-sub{color:#d6d6d6;max-width:var(--text);margin:0 0 22px}
.btn,.cta-band .btn{display:inline-flex;align-items:center;min-height:44px;padding:0 24px;background:var(--paper);color:var(--ink);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.6px;text-decoration:none;transition:transform .1s}
.btn:active{transform:scale(.96)}

/* related */
.related{margin-top:48px}
.rel-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--n100)}
.rel-card{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-bottom:1px solid var(--n100);text-decoration:none;transition:padding-left .2s}
.rel-card:hover{padding-left:8px}
.rel-title{font-family:var(--serif);font-size:21px;color:var(--ink)}

/* hub */
.hub-hero{padding-top:48px;padding-bottom:8px}
.hub-hero h1{font-size:clamp(40px,7vw,68px);line-height:1.04;letter-spacing:-.5px;margin:12px 0 18px}
.hub-hero .lede{max-width:620px}
.wave{display:flex;align-items:center;gap:3px;height:48px;margin:36px 0 8px}
.wave .bar{display:block;width:3px;height:100%;background:var(--ink);transform:scaleY(var(--hi));transform-origin:center;animation-name:lf-wave;animation-timing-function:cubic-bezier(.37,0,.63,1);animation-iteration-count:infinite;will-change:transform}
@keyframes lf-wave{0%,100%{transform:scaleY(calc(var(--hi)*.35))}50%{transform:scaleY(var(--hi))}}
.hub-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--n100);margin-top:24px}
.hub-card{display:flex;flex-direction:column;gap:8px;padding:28px 0;border-bottom:1px solid var(--n100);text-decoration:none;transition:padding-left .2s}
.hub-card:hover{padding-left:10px}
.hub-title{font-family:var(--serif);font-size:27px;line-height:1.1;color:var(--ink)}
.hub-sub{color:var(--n500);max-width:var(--text)}
.hub-more{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;color:var(--n400)}

@media (min-width:768px){
  .rel-grid{grid-template-columns:1fr 1fr;gap:0 32px}
  .hub-grid{grid-template-columns:1fr 1fr;gap:0 48px}
}
@media (prefers-reduced-motion:reduce){
  .wave .bar{animation:none;transform:scaleY(var(--hi))}
  *{transition:none!important}
}