/* ============================================================================
   ASK EVARA — knowledge hub / answer library
   Editorial, reading-first layer on top of the flagship "AI dawn" system.
   Signature moments: glass "In short" answer card over a dreamscape hero,
   a sticky numbered contents rail, mono section indices, and glass figures.
   Loads AFTER evara.css — reuses its tokens (fonts, colours, easings, radii).
   ========================================================================== */

:root{
  --ask-measure: 68ch;          /* long-form reading measure */
  --ask-toc-w: 232px;
  --ask-ink-2: #3a2f44;         /* slightly softer than --ink for body runs */
}

/* evara.css sets body{overflow-x:hidden}, which forces overflow-y:auto and makes
   body a scroll container — that silently breaks position:sticky for the contents
   rail. `clip` prevents horizontal scroll the same way WITHOUT creating a scroll
   container, so the sticky TOC pins to the viewport. Scoped to Ask pages only. */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

/* ---- Reading progress bar (under the fixed nav) --------------------------- */
.readbar{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:120;
  background:var(--grad); box-shadow:0 0 14px rgba(176,155,233,.6); transition:width .1s linear; }
@media (prefers-reduced-motion: reduce){ .readbar{ display:none; } }

/* ============================================================================
   GUIDE HERO  —  question over the bespoke glass-on-dreamscape feature image
   ========================================================================== */
.ghead{ position:relative; overflow:hidden; color:var(--tx-on-dark);
  padding-top:clamp(128px,17vh,190px); padding-bottom:clamp(64px,8vw,104px); }
.ghead__bg{ position:absolute; inset:0; z-index:0; }
.ghead__bg img{ width:100%; height:100%; object-fit:cover; }
/* horizontal readability scrim — heavy at the left where the headline sits, gone by mid-page
   so the right-hand side of the feature image stays visible */
.ghead__bg::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(20,14,26,.82) 0%, rgba(20,14,26,.7) 20%, rgba(20,14,26,.44) 38%, rgba(20,14,26,.14) 52%, rgba(20,14,26,0) 64%); }
/* deep readable scrim, warmer at the foot where the glass card overlaps */
.ghead__bg::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(178deg, rgba(20,14,26,.34) 0%, rgba(20,14,26,.2) 30%, rgba(20,14,26,.62) 78%, rgba(20,14,26,.82) 100%); }
.ghead .wrap{ position:relative; z-index:1; }
.ghead__crumb{ margin-bottom:22px; }
.ghead__tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.ghead h1{ font-family:var(--f-display); font-weight:340; letter-spacing:-.02em;
  line-height:1.04; font-size:clamp(2.1rem,5.2vw,4rem); max-width:19ch; color:#fff;
  text-shadow:0 2px 42px rgba(18,12,24,.5); text-wrap:balance; }
.ghead h1 em{ font-style:italic; background:var(--grad-warm); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.ghead__meta{ margin-top:26px; display:flex; align-items:center; gap:10px 20px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em; color:rgba(255,255,255,.82); }
.ghead__meta .who{ display:flex; align-items:center; gap:10px; }
.ghead__meta .who img{ width:30px; height:30px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(255,255,255,.5); }
.ghead__meta .sep{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.45); }

/* topic + format pills (mono, glassy) */
.gtag{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px); color:#fff; display:inline-flex; align-items:center; gap:7px; }
.gtag .dot{ width:6px; height:6px; border-radius:50%; background:var(--peach-hi); }
.gtag--format .dot{ background:var(--lavender-hi); }

/* ============================================================================
   "IN SHORT" ANSWER CARD  —  the extractable snippet + Speakable target
   Overlaps the hero into the first content section (the signature moment).
   ========================================================================== */
/* Flat editorial treatment — no card, no rule, no plate. The answer simply opens the page,
   set on a light porcelain field with a generous margin of quiet around it. */
.sect-light:has(> .ask-answer-wrap){ background:var(--porcelain); }
.ask-answer-wrap{ position:relative; z-index:5;
  padding-block:clamp(52px,7vw,104px); }
.answer-box{ position:relative; max-width:52rem; }
.answer-box__k{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lavender-deep); display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.answer-box__k svg{ width:16px; height:16px; }
.answer-box__t{ font-family:var(--f-display); font-weight:360; font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.36; letter-spacing:-.01em; color:var(--ink); text-wrap:pretty; }
.answer-box__t b, .answer-box__t strong{ font-weight:600;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }
.answer-box__foot{ margin-top:20px; padding-top:18px; border-top:1px solid var(--hair-l);
  display:flex; align-items:center; gap:10px; font-size:.86rem; color:var(--tx-on-light-mute);
  font-family:var(--f-mono); letter-spacing:.02em; }

/* ============================================================================
   READING LAYOUT  —  sticky contents rail + article column
   ========================================================================== */
.gwrap{ display:grid; grid-template-columns:var(--ask-toc-w) minmax(0,1fr); gap:clamp(32px,5vw,72px);
  align-items:start; padding-top:clamp(48px,6vw,76px); }

/* sticky numbered contents — pinned to the viewport the whole way down the article */
.gtoc{ position:sticky; top:96px; align-self:start; z-index:10;
  max-height:calc(100vh - 120px); overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.gtoc::-webkit-scrollbar{ width:5px; } .gtoc::-webkit-scrollbar-thumb{ background:var(--hair-l); border-radius:4px; }
.gtoc__k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lavender-deep); margin-bottom:18px; display:flex; align-items:center; gap:9px; }
.gtoc__k::before{ content:""; width:18px; height:1px; background:currentColor; opacity:.6; }
.gtoc ol{ list-style:none; counter-reset:toc; display:flex; flex-direction:column; }
.gtoc li{ counter-increment:toc; }
.gtoc a{ display:grid; grid-template-columns:auto 1fr; gap:12px; padding:9px 0; align-items:baseline;
  font-size:.9rem; line-height:1.35; color:var(--tx-on-light-mute); transition:color .3s; }
.gtoc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--f-mono); font-size:.66rem;
  color:var(--tx-on-light-mute); opacity:.6; transition:color .3s, opacity .3s; }
.gtoc a:hover{ color:var(--ink); }
.gtoc a.active{ color:var(--lavender-deep); font-weight:600; }
.gtoc a.active::before{ color:var(--lavender-deep); opacity:1; }

/* the reading column */
.gbody{ min-width:0; }
.gprose{ max-width:var(--ask-measure); }
.gprose > *{ margin-inline:0; }

/* section heading with mono index (JS injects data-i) */
.gsec{ scroll-margin-top:100px; margin-top:clamp(46px,6vw,72px); }
.gsec:first-of-type{ margin-top:8px; }
.gsec__h{ font-family:var(--f-display); font-weight:380; letter-spacing:-.015em; line-height:1.12;
  font-size:clamp(1.55rem,3vw,2.15rem); color:var(--ink); text-wrap:balance; position:relative; }
.gsec__i{ display:block; font-family:var(--f-mono); font-size:1.15rem; font-weight:500; letter-spacing:.1em;
  color:var(--peach-deep); margin-bottom:14px; }

/* body typography */
.gprose p{ font-size:clamp(1.06rem,1.15vw,1.16rem); line-height:1.78; color:var(--ask-ink-2);
  margin-top:20px; text-wrap:pretty; }
.gprose p:first-child{ margin-top:0; }
.gprose h3{ font-family:var(--f-display); font-weight:440; font-size:1.28rem; line-height:1.25;
  color:var(--ink); margin-top:38px; letter-spacing:-.01em; }
.gprose h3 + p{ margin-top:12px; }
.gprose a{ color:var(--lavender-deep); text-decoration:underline; text-decoration-color:rgba(126,102,196,.35);
  text-underline-offset:3px; text-decoration-thickness:1.5px; transition:text-decoration-color .3s, color .3s; }
.gprose a:hover{ color:var(--peach-deep); text-decoration-color:currentColor; }
.gprose strong{ font-weight:600; color:var(--ink); }
.gprose ul, .gprose ol{ margin-top:20px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.gprose li{ position:relative; padding-left:30px; font-size:clamp(1.04rem,1.1vw,1.12rem); line-height:1.68; color:var(--ask-ink-2); }
.gprose ul li::before{ content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px; border-radius:50%;
  background:var(--grad-warm); }
.gprose ol{ counter-reset:li; }
.gprose ol li{ counter-increment:li; }
.gprose ol li::before{ content:counter(li); position:absolute; left:0; top:.05em; width:22px; height:22px;
  border-radius:50%; background:rgba(176,155,233,.16); color:var(--lavender-deep); font-family:var(--f-mono);
  font-size:.72rem; display:grid; place-items:center; }
.gprose blockquote{ margin-top:28px; padding-left:22px; border-left:3px solid transparent;
  border-image:var(--grad) 1; }
.gprose blockquote p{ font-family:var(--f-display); font-style:italic; font-size:clamp(1.2rem,1.7vw,1.42rem);
  line-height:1.44; color:var(--ink); }
.gprose code{ font-family:var(--f-mono); font-size:.86em; background:rgba(40,30,46,.06);
  border:1px solid var(--hair-l-soft); padding:2px 7px; border-radius:7px; color:var(--dusk); }
.gprose hr{ border:0; height:1px; background:var(--hair-l); margin:clamp(40px,5vw,60px) 0; }
/* inline emphasis must stay in the readable body font, never the display serif italic */
.gprose em, .gprose i, .gprose cite,
.keybox em, .keybox i, .tipbox em, .tipbox i, .step__d em, .step__d i, .defcard em, .defcard i, .answer-box__t em{
  font-family:var(--f-body); font-style:italic; font-weight:500; font-variation-settings:normal; letter-spacing:0; }

/* ---- Digest components (break up long text) ------------------------------- */

/* key-takeaway inset */
.keybox{ margin-top:32px; padding:24px 26px; border-radius:var(--radius-lg);
  background:linear-gradient(130deg, rgba(176,155,233,.12), rgba(255,184,138,.09));
  border:1px solid var(--glass-brd); }
.keybox__k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lavender-deep); display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.keybox__k svg{ width:15px; height:15px; }
.keybox p{ margin-top:0 !important; font-size:1.04rem !important; color:var(--ink) !important; }

/* definition card */
.defcard{ margin-top:30px; padding:22px 26px; border-radius:var(--radius-lg); background:var(--porcelain);
  border:1px solid var(--hair-l); box-shadow:0 20px 44px -30px rgba(40,26,50,.28); }
.defcard__term{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--peach-deep); margin-bottom:8px; }
.defcard__def{ font-family:var(--f-display); font-weight:360; font-size:1.16rem; line-height:1.44; color:var(--ink); }

/* numbered step cards (how-tos) */
.steps{ margin-top:32px; display:flex; flex-direction:column; gap:14px; counter-reset:step; border:none; overflow:visible; }
.step{ counter-increment:step; position:relative; display:grid; grid-template-columns:auto 1fr; gap:20px;
  padding:24px 26px; border-radius:var(--radius-lg); background:var(--porcelain);
  border:1px solid var(--hair-l); box-shadow:0 22px 46px -30px rgba(40,26,50,.42);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.step:hover{ transform:translateY(-3px); box-shadow:0 34px 62px -32px rgba(40,26,50,.5); }
.step__n{ width:44px; height:44px; border-radius:14px; background:var(--grad-warm); color:#fff;
  display:grid; place-items:center; font-family:var(--f-display); font-size:1.3rem; box-shadow:0 10px 22px -10px rgba(240,149,94,.6); }
.step__n::before{ content:counter(step); }
.step__t{ font-family:var(--f-display); font-weight:440; font-size:1.18rem; color:var(--ink); line-height:1.2; }
.step__d{ margin-top:8px; color:var(--ask-ink-2); font-size:1rem; line-height:1.62; }
.step__d p{ margin-top:10px; font-size:1rem !important; }

/* comparison table */
.ctable-wrap{ margin-top:32px; overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--hair-l);
  box-shadow:0 24px 50px -34px rgba(40,26,50,.34); background:var(--porcelain); }
.ctable{ width:100%; border-collapse:collapse; min-width:520px; background:transparent; }
.ctable caption{ text-align:left; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx-on-dark-soft); padding:18px 24px;
  background:linear-gradient(120deg, var(--dusk) 0%, var(--dusk-2) 55%, var(--night) 100%); border-bottom:0; }
.ctable th, .ctable td{ padding:17px 24px; text-align:left; font-size:1rem; line-height:1.5; vertical-align:top; }
.ctable thead th{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dusk); background:linear-gradient(180deg, rgba(176,155,233,.16), rgba(176,155,233,.08));
  border-bottom:2px solid rgba(176,155,233,.4); font-weight:500; }
.ctable tbody tr{ transition:background .25s; }
.ctable tbody tr:nth-child(even){ background:rgba(40,30,46,.022); }
.ctable tbody tr:hover{ background:rgba(176,155,233,.09); }
.ctable tbody td{ border-top:1px solid var(--hair-l-soft); }
.ctable tbody tr:first-child td{ border-top:0; }
.ctable td:first-child{ font-weight:600; color:var(--ink); }
.ctable td:not(:first-child){ color:var(--tx-on-light-soft); font-variant-numeric:tabular-nums; }

/* pull-stats row */
.pstats{ margin-top:36px; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; }
.pstat{ padding:24px; border-radius:var(--radius-lg); background:var(--porcelain); border:1px solid var(--hair-l);
  text-align:left; display:flex; flex-direction:column; }
.pstat__n{ font-family:var(--f-display); font-weight:380; font-size:clamp(2.2rem,4vw,2.9rem); line-height:1;
  letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pstat__l{ margin-top:10px; font-size:.92rem; line-height:1.45; color:var(--tx-on-light-soft); }
/* source line pinned to the foot of every card so it aligns across the row regardless of label length */
.pstat__src{ margin-top:auto; padding-top:14px; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.04em; color:var(--tx-on-light-mute); }

/* ============================================================================
   AUDIT SHOWCASE  —  dark product card: copy + CTA left, live report image right
   ========================================================================== */
.auditshow{ padding-block:clamp(48px,6vw,80px) 0; }
.auditcard{ position:relative; overflow:hidden; border-radius:var(--radius-xl);
  background:radial-gradient(130% 130% at 88% 0%, #2c2038 0%, #1b1324 52%, #130d1b 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 44px 90px -44px rgba(18,12,24,.72), inset 0 1px 0 rgba(255,255,255,.09);
  display:grid; grid-template-columns:1.02fr .98fr; align-items:stretch; }
.auditcard__text{ padding:clamp(30px,4.2vw,58px); align-self:center; }
.auditcard__eyebrow{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lavender-hi); display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; }
.auditcard__eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--peach-hi); }
.auditcard__h{ font-family:var(--f-display); font-weight:340; font-size:clamp(1.7rem,3vw,2.45rem); line-height:1.08;
  letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.auditcard__h em{ font-style:italic; background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auditcard__sub{ margin-top:16px; font-size:1.02rem; line-height:1.6; color:rgba(255,255,255,.74); max-width:44ch; }
.auditcard__cta{ margin-top:28px; }
.auditcard__media{ position:relative; min-height:clamp(300px,34vw,440px); border-left:1px solid rgba(255,255,255,.09); }
.auditcard__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
/* soften the image edges into the dark card */
.auditcard__media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 70px 22px rgba(19,13,27,.55); }
@media (max-width:760px){
  .auditcard{ grid-template-columns:1fr; }
  .auditcard__text{ order:1; }
  .auditcard__media{ order:2; min-height:0; height:clamp(220px,58vw,300px);
    border-left:0; border-top:1px solid rgba(255,255,255,.09); }
}

/* large pull quote */
.pullq{ margin:40px 0; padding-left:clamp(20px,3vw,34px); position:relative; }
.pullq::before{ content:"\201C"; position:absolute; left:-6px; top:-18px; font-family:var(--f-display);
  font-size:5rem; line-height:1; color:var(--lavender); opacity:.4; }
.pullq p{ font-family:var(--f-display); font-style:italic; font-weight:340; font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.34; color:var(--ink); margin:0 !important; }
.pullq cite{ display:block; margin-top:14px; font-family:var(--f-mono); font-style:normal; font-size:.74rem;
  letter-spacing:.05em; color:var(--tx-on-light-mute); }

/* checklist — elevated cards, matching the .steps treatment */
.checklist{ margin-top:32px; display:flex; flex-direction:column; gap:14px; }
.checklist li{ list-style:none; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:22px 26px; border-radius:var(--radius-lg); background:var(--porcelain);
  border:1px solid var(--hair-l); box-shadow:0 22px 46px -30px rgba(40,26,50,.42);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.checklist li:hover{ transform:translateY(-3px); box-shadow:0 34px 62px -32px rgba(40,26,50,.5); }
.checklist li::before{ display:none; }
.checklist .tick{ width:30px; height:30px; border-radius:10px; background:var(--grad-warm); color:#fff;
  display:grid; place-items:center; margin-top:1px; box-shadow:0 10px 22px -10px rgba(240,149,94,.6); }
.checklist .tick svg{ width:16px; height:16px; }
.checklist b{ color:var(--ink); font-weight:600; }
.checklist span{ display:block; color:var(--ask-ink-2); font-size:1rem; line-height:1.6; margin-top:2px; }

/* tip / warning callouts */
.tipbox{ margin-top:30px; padding:20px 24px; border-radius:var(--radius-lg); display:grid;
  grid-template-columns:auto 1fr; gap:16px; align-items:start; border:1px solid var(--hair-l); }
.tipbox--tip{ background:rgba(176,155,233,.1); border-color:rgba(176,155,233,.34); }
.tipbox--warn{ background:rgba(240,149,94,.1); border-color:rgba(240,149,94,.34); }
.tipbox__ico{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; }
.tipbox--tip .tipbox__ico{ background:var(--lavender-deep); }
.tipbox--warn .tipbox__ico{ background:var(--peach-deep); }
.tipbox__ico svg{ width:17px; height:17px; }
.tipbox p{ margin-top:0 !important; font-size:1rem !important; }
.tipbox b{ color:var(--ink); }

/* glass figure (bespoke in-guide illustration) */
.gfig{ margin:22px 0 32px; }
.gfig img{ width:100%; height:400px; object-fit:cover; border-radius:var(--radius-lg); display:block; }
.gfig figcaption{ margin-top:12px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.03em;
  color:var(--tx-on-light-mute); text-align:center; }
@media(max-width:600px){ .gfig img{ height:260px; } }

/* let heavy visuals breathe past the reading measure */
.bleed{ max-width:none; }

/* ---- inline FAQ block (reuses .faq__ from evara.css, adds a heading) ------ */
.gfaq{ margin-top:clamp(46px,6vw,72px); }

/* ============================================================================
   ARTICLE FOOTER  —  author, sources, related answers
   ========================================================================== */
.gfoot{ max-width:var(--ask-measure); margin-top:clamp(40px,5vw,60px); padding-top:0; }

.byline{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  padding:22px 24px; border-radius:var(--radius-lg); background:var(--porcelain); border:1px solid var(--hair-l); }
.byline img{ width:112px; height:112px; border-radius:50%; object-fit:cover; border:1px solid var(--glass-hi); }
.byline__n{ font-family:var(--f-display); font-size:1.16rem; color:var(--ink);
  display:flex; align-items:center; gap:10px; }
/* LinkedIn — inline SVG, explicitly sized (never an icon font or emoji) */
.byline__li{ display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; flex:0 0 26px;
  color:var(--lavender-deep); border:1px solid var(--hair-l); background:rgba(126,102,196,.07);
  transition:color .25s ease, background .25s ease, border-color .25s ease; }
.byline__li svg{ width:14px; height:14px; display:block; }
.byline__li:hover{ color:#fff; background:var(--lavender-deep); border-color:var(--lavender-deep); }
.byline__role{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lavender-deep); margin-top:6px; }
.byline__r{ font-size:.9rem; color:var(--tx-on-light-soft); margin-top:8px; }
.byline__r a{ color:var(--lavender-deep); font-weight:600; text-decoration:none; white-space:nowrap;
  transition:color .25s var(--ease-out); }
.byline__r a:hover{ color:var(--peach-deep); }

.sources{ margin-top:32px; }
.sources__k, .related__k{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-on-light-mute); margin-bottom:14px; }
.sources ol{ list-style:none; counter-reset:src; display:flex; flex-direction:column; gap:10px; padding:0; }
.sources li{ counter-increment:src; position:relative; padding-left:30px; font-size:.92rem; line-height:1.5;
  color:var(--tx-on-light-soft); }
.sources li::before{ content:counter(src); position:absolute; left:0; top:1px; width:20px; height:20px;
  border-radius:50%; background:rgba(40,30,46,.06); font-family:var(--f-mono); font-size:.66rem;
  color:var(--tx-on-light-mute); display:grid; place-items:center; }
.sources a{ color:var(--lavender-deep); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }

/* related-answer cards (.related/.relcard) now live in evara.css — shared with the service pages */

/* ============================================================================
   HUB INDEX
   ========================================================================== */
.askhero{ position:relative; overflow:hidden; color:var(--tx-on-dark);
  padding-top:clamp(140px,18vh,200px); padding-bottom:clamp(150px,17vw,240px); }
.askhero__bg{ position:absolute; inset:0; z-index:0; }
.askhero__bg img{ width:100%; height:100%; object-fit:cover; }
.askhero__bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(172deg, rgba(20,14,26,.42), rgba(20,14,26,.28) 40%, rgba(20,14,26,.72)); }
.askhero .wrap{ position:relative; z-index:1; }
.askhero h1{ font-family:var(--f-display); font-weight:330; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(2.6rem,6.4vw,5rem); max-width:15ch; color:#fff;
  text-shadow:0 1px 3px rgba(16,10,22,.72), 0 2px 22px rgba(16,10,22,.6), 0 4px 60px rgba(16,10,22,.5); }
.askhero h1 em{ font-style:italic; background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; }
.askhero__sub{ margin-top:22px; max-width:52ch; font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.55;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(16,10,22,.72), 0 2px 22px rgba(16,10,22,.6), 0 4px 60px rgba(16,10,22,.5); }
/* breadcrumb: cream for readability, with the same 3-layer shadow as the on-scene eyebrow */
.askhero .breadcrumb, .askhero .breadcrumb a{ color:var(--cream); }
.askhero .breadcrumb{ text-shadow:0 1px 3px rgba(16,10,22,.72), 0 2px 22px rgba(16,10,22,.6), 0 4px 60px rgba(16,10,22,.5); }

/* filter bar — a frosted glass panel that overlaps the bottom of the hero, then
   sticks to the top on scroll (unsticks at the CTA via the .askzone wrapper) */
.askfilter{ position:sticky; top:70px; z-index:40; margin-top:calc(-1 * clamp(84px,10vw,132px)); }
.askfilter .wrap{ max-width:1180px; background:rgba(24,17,30,.72);
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-xl);
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);
  box-shadow:0 30px 60px -30px rgba(18,12,24,.7), inset 0 1px 0 rgba(255,255,255,.16); }
.askfilter__row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.askfilter__search{ flex:1; min-width:180px; display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:15px 22px; }
.askfilter__search svg{ width:18px; height:18px; color:rgba(255,255,255,.7); flex:0 0 auto; }
.askfilter__search input{ border:0; outline:0; background:transparent; width:100%; font-size:1rem; color:#fff; }
.askfilter__search input::placeholder{ color:rgba(255,255,255,.62); }
/* pills on the dark glass */
.askfilter .fgroup__label{ color:rgba(255,255,255,.55); }
.askfilter .fpill{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.88); }
.askfilter .fpill:hover{ background:rgba(255,255,255,.17); border-color:var(--lavender-hi); color:#fff; }
.askfilter .fpill.active{ background:#fff; color:var(--ink); border-color:#fff; }
.fgroup{ display:flex; gap:9px; flex-wrap:nowrap; align-items:center; overflow-x:auto; scrollbar-width:none; }
.fgroup::-webkit-scrollbar{ display:none; }
.fgroup > .fpill{ flex:0 0 auto; }
.fgroup + .fgroup{ margin-top:10px; }
.fgroup__label{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--tx-on-light-mute); margin-right:6px; min-width:52px; }
.fpill{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.02em; padding:8px 16px; border-radius:999px;
  border:1px solid var(--hair-l); color:var(--tx-on-light-soft); background:#fff; cursor:pointer; transition:.3s var(--ease-out); white-space:nowrap; }
.fpill:hover{ border-color:var(--lavender); color:var(--ink); }
/* topic pills: solid ink when active */
.fpill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
/* format pills: smaller, pill-outline, lavender when active — a visibly different axis */
.fpill--fmt{ font-size:.68rem; padding:7px 14px; text-transform:uppercase; letter-spacing:.08em; }
.fpill--fmt.active{ background:var(--lavender-deep); color:#fff; border-color:var(--lavender-deep); }

/* pillar sections + cards */
.askpillar{ margin-top:clamp(48px,6vw,80px); }
.askpillar__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px 40px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--hair-l); margin-bottom:28px; }
.askpillar__head > div{ display:flex; flex-direction:column; }
.askpillar__d{ margin-bottom:2px; }
.askpillar__t{ font-family:var(--f-display); font-weight:380; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--ink);
  letter-spacing:-.015em; }
.askpillar__i{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--peach-deep); display:block; margin-bottom:8px; }
.askpillar__d{ font-size:.98rem; color:var(--tx-on-light-soft); max-width:40ch; }

.askgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:20px; }
.askcard{ display:flex; flex-direction:column; padding:26px; border-radius:var(--radius-lg); background:var(--porcelain);
  border:1px solid var(--hair-l); overflow:hidden; position:relative; min-height:100%;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s; }
.askcard:hover{ transform:translateY(-6px); box-shadow:0 40px 74px -36px rgba(40,26,50,.5); border-color:var(--lavender); }
.askcard__media{ margin:-26px -26px 22px; aspect-ratio:16/9; overflow:hidden; background:var(--mist); }
.askcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.askcard:hover .askcard__media img{ transform:scale(1.05); }
.askcard__tags{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.askcard__tag{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-on-light-mute); padding:4px 10px; border-radius:999px; border:1px solid var(--hair-l); }
.askcard__q{ font-family:var(--f-display); font-weight:400; font-size:1.28rem; line-height:1.18; color:var(--ink);
  letter-spacing:-.01em; }
.askcard__a{ margin-top:12px; font-size:.96rem; line-height:1.55; color:var(--tx-on-light-soft); flex:1; }
.askcard__foot{ margin-top:20px; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.04em; color:var(--tx-on-light-mute); }
.askcard__go{ display:inline-flex; align-items:center; gap:6px; color:var(--lavender-deep); font-weight:600; }
.askcard__go svg{ width:14px; height:14px; }
.askcard.is-hidden{ display:none; }

.asknone{ display:none; padding:40px 0; color:var(--tx-on-light-soft); font-size:1rem; }
.asknone.show{ display:block; }

/* glossary teaser strip on the index */
.glossband{ margin-top:clamp(52px,7vw,88px); padding:clamp(28px,4vw,44px); border-radius:var(--radius-xl);
  background:linear-gradient(135deg, rgba(176,155,233,.16), rgba(255,184,138,.12)); border:1px solid var(--glass-brd);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.glossband h3{ font-family:var(--f-display); font-weight:380; font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--ink);
  letter-spacing:-.01em; max-width:22ch; }

/* ============================================================================
   GLOSSARY
   ========================================================================== */
.glossary{ max-width:820px; }
/* A-Z jump index — styled to match the Ask hub filter bar: one dark-glass panel of mono pills */
.glossary__jump{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:40px;
  position:sticky; top:70px; z-index:40;
  background:rgba(24,17,30,.72); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius-xl);
  padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,26px);
  box-shadow:0 30px 60px -30px rgba(18,12,24,.7), inset 0 1px 0 rgba(255,255,255,.16); }
.glossary__jump-label{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-right:6px; }
.glossary__jump a{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.02em;
  min-width:38px; padding:8px 12px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.88);
  transition:.3s var(--ease-out); }
.glossary__jump a:hover{ background:rgba(255,255,255,.17); border-color:var(--lavender-hi); color:#fff; }
.glossary__jump a:active,.glossary__jump a:focus-visible{ background:#fff; color:var(--ink); border-color:#fff; }
.glossary dl{ display:flex; flex-direction:column; }
.glossary dt{ scroll-margin-top:100px; font-family:var(--f-display); font-weight:440; font-size:1.35rem; color:var(--ink);
  margin-top:34px; display:flex; align-items:center; gap:12px; }
.glossary dt .abbr{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--peach-deep); border:1px solid var(--hair-l); padding:3px 9px; border-radius:999px; }
.glossary dd{ margin-top:12px; font-size:1.08rem; line-height:1.72; color:var(--ask-ink-2); }
.glossary dd a{ color:var(--lavender-deep); text-decoration:underline; text-underline-offset:2px; }
.glossary__group{ padding-top:20px; border-top:1px solid var(--hair-l); margin-top:28px; }
.glossary__letter{ font-family:var(--f-display); font-size:2rem; color:var(--lavender); font-weight:300; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px){
  .gwrap{ grid-template-columns:1fr; gap:0; }
  .gtoc{ position:static; margin-bottom:8px; }
  .gtoc__box{ border:1px solid var(--hair-l); border-radius:var(--radius-lg); padding:18px 20px; background:var(--porcelain); }
  .gtoc ol{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease-io); }
  .gtoc.open ol{ max-height:600px; }
  .gtoc__toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; cursor:pointer; }
  .gtoc__toggle svg{ width:18px; height:18px; transition:transform .4s; }
  .gtoc.open .gtoc__toggle svg{ transform:rotate(180deg); }
  .gprose, .gfoot, .glossary{ max-width:100%; }
}
@media (min-width: 901px){
  .gtoc__toggle svg{ display:none; }
}
@media (max-width: 600px){
  .ghead__meta{ font-size:.68rem; }
  .askfilter{ top:64px; }
  .askcard__media{ margin:-26px -26px 20px; }
}

/* desktop: contents toggle is not interactive (always open) */
@media (min-width: 901px){ .gtoc__toggle{ pointer-events:none; } }

@media (prefers-reduced-motion: reduce){
  .step, .relcard, .askcard, .askcard__media img{ transition:none; }
}