/* ============================================================
   ASK SADHI — answer pages
   Same palette as the home page, tuned for long-form reading:
   lighter background, larger type, generous line height.
   ============================================================ */
:root{
  --night:#0A1024; --night2:#111A38; --indigo:#22336B;
  --teal:#3FA9A5; --marigold:#F5A623; --saffron:#E8622C;
  --ivory:#F4EFE2; --mut:#98A2BE; --line:rgba(244,239,226,.13);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Karla',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--night); color:var(--ivory); font-family:var(--sans);
  font-weight:300; line-height:1.75; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56vw 40vh at 50% 0%, rgba(245,166,35,.10), transparent 62%),
    radial-gradient(48vw 40vh at 4% 40%, rgba(63,169,165,.08), transparent 64%);
}
.wrap{position:relative; z-index:1; max-width:720px; margin:0 auto; padding:0 24px}

/* ---- nav ---- */
nav{display:flex; align-items:center; justify-content:space-between; padding:24px 0; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif);
  font-size:18px; color:var(--ivory); text-decoration:none}
.seed{width:10px; height:10px; border-radius:50%; background:var(--marigold);
  box-shadow:0 0 0 4px rgba(245,166,35,.14), 0 0 18px rgba(245,166,35,.7)}
.navlink{font-size:13.5px; color:var(--mut); text-decoration:none;
  border-bottom:1px solid transparent; padding-bottom:2px; transition:.25s; white-space:nowrap}
.navlink:hover{color:var(--ivory); border-bottom-color:var(--marigold)}

/* ---- article head ---- */
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--marigold); margin-bottom:14px}
h1{font-family:var(--serif); font-weight:300; font-size:clamp(30px,5.4vw,46px);
  line-height:1.12; letter-spacing:-.02em; margin-bottom:14px}
.standfirst{font-size:18.5px; color:var(--ivory); opacity:.86; margin-bottom:10px}
.byline{font-family:var(--mono); font-size:11px; color:var(--mut);
  letter-spacing:.1em; margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--line)}

/* ---- body copy ---- */
article p{margin-bottom:20px; color:#E4E0D4}
article h2{font-family:var(--serif); font-weight:500; font-size:clamp(22px,3.4vw,29px);
  line-height:1.2; margin:40px 0 14px; letter-spacing:-.012em; color:var(--ivory)}
article h3{font-family:var(--sans); font-weight:600; font-size:18px; margin:28px 0 8px}
article ul,article ol{margin:0 0 20px 22px; color:#E4E0D4}
article li{margin-bottom:9px}
article a{color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(63,169,165,.4)}
article a:hover{border-bottom-color:var(--teal)}
article strong{color:#FFF6E4; font-weight:600}
article em{font-style:italic; color:var(--ivory)}

/* ---- devices ---- */
.callout{background:linear-gradient(160deg,rgba(34,51,107,.42),rgba(17,26,56,.26));
  border:1px solid var(--line); border-left:3px solid var(--marigold);
  border-radius:0 12px 12px 0; padding:18px 20px; margin:26px 0}
.callout .ct{font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--marigold); margin-bottom:7px}
.callout p:last-child{margin-bottom:0}
.warn{border-left-color:var(--saffron)}
.warn .ct{color:var(--saffron)}
table{width:100%; border-collapse:collapse; margin:24px 0; font-size:15px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line)}
th{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--marigold); font-weight:400}
td{color:#E4E0D4}

/* ---- CTA + footer ---- */
.cta-box{background:linear-gradient(160deg,rgba(34,51,107,.5),rgba(17,26,56,.3));
  border:1px solid var(--line); border-radius:14px; padding:26px 24px; margin:44px 0 10px; text-align:center}
.cta-box h3{font-family:var(--serif); font-weight:500; font-size:21px; margin-bottom:8px}
.cta-box p{font-size:15px; color:var(--mut); margin-bottom:18px}
.cta{display:inline-flex; align-items:center; gap:10px; background:var(--marigold);
  color:#20160A; text-decoration:none; font-weight:600; font-size:15.5px;
  padding:13px 28px; border-radius:100px; box-shadow:0 5px 24px rgba(245,166,35,.3); transition:.3s}
.cta:hover{transform:translateY(-2px); box-shadow:0 10px 34px rgba(245,166,35,.44)}

footer{border-top:1px solid var(--line); margin-top:50px; padding:30px 0 54px;
  font-size:13px; color:var(--mut)}
.disclaimer{background:rgba(232,98,44,.07); border-left:2px solid rgba(232,98,44,.5);
  padding:13px 16px; border-radius:0 8px 8px 0; margin-bottom:22px; font-size:12.5px; line-height:1.65}
.frow{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.frow a{color:var(--mut); text-decoration:none}
.frow a:hover{color:var(--ivory)}
.copyline{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:12px; color:var(--mut); opacity:.8; letter-spacing:.2px}

/* ---- index / hub ---- */
.qlist{list-style:none; margin:0; padding:0}
.qlist li{margin:0; border-bottom:1px solid var(--line)}
.qlist a{display:block; padding:22px 0; text-decoration:none; border:0; transition:.2s}
.qlist a:hover{padding-left:8px}
.qlist .qt{font-family:var(--serif); font-size:21px; font-weight:500; color:var(--ivory);
  line-height:1.25; margin-bottom:5px}
.qlist a:hover .qt{color:var(--marigold)}
.qlist .qd{font-size:14.5px; color:var(--mut); line-height:1.55}
.soon{opacity:.45}
.soon .qt{color:var(--mut)}
.tag{display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--teal); border:1px solid rgba(63,169,165,.38);
  border-radius:20px; padding:2px 9px; margin-left:8px; vertical-align:2px}

@media(max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  nav{padding:18px 0}
}