/* ==========================================================================
   Funnel IQ – site stylesheet
   Shared by index.html, sales-forecast-accuracy.html,
   forward-revenue-diligence.html and legal.html.
   Palette: Funnel IQ style guide. Written for Funnel IQ Limited, 2026.
   Funnel IQ site v1.12
   ========================================================================== */

/* ---- 1. Tokens -------------------------------------------------------- */
:root{
  /* brand colours */
  --fiq-electric:#163E93;   /* Electric Blue */
  --fiq-cyan:#30A3DA;       /* Cyan: accents, rules, hover */
  --fiq-cyan-lt:#5CC7EE;    /* light cyan: accents on dark */
  --fiq-deep:#051C2A;       /* Deep Blue: footer, dark cards */
  --fiq-ink:#060200;        /* Quasi Black: text on light */
  --fiq-ink-2:#4E5E6A;      /* secondary text on light */
  --fiq-mist:#C9D6E4;       /* secondary text on dark */
  --fiq-paper:#F0F0F0;      /* light grey page ground */
  --fiq-rule:#E2E6E9;       /* hairlines on light */
  /* type */
  --fiq-serif:'Georgia Pro',Georgia,'Times New Roman',serif;
  --fiq-sans:Calibri,Carlito,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --fiq-sans-lt:'Calibri Light',Calibri,Carlito,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  /* layout */
  --fiq-page:1032px;
  --fiq-head-h:84px;
  --fiq-corner:4px;
  /* grounds: a bright cyan-blue glow from the top right over a deep navy sweep */
  --fiq-hero-bg:
    radial-gradient(112% 120% at 100% 0%, rgba(52,88,255,.95) 0%, rgba(52,88,255,.88) 16%, rgba(52,88,255,.6) 34%, rgba(52,88,255,.3) 52%, rgba(52,88,255,.12) 72%, rgba(52,88,255,0) 100%),
    linear-gradient(90deg, #0A1920 0%, #071744 50%, #00063C 100%);
  --fiq-band-bg:
    radial-gradient(62vw 62vw at 85% 85%, #163E93 0%, #0C2A5A 38%, #051C2A 78%),
    #051C2A;
}

/* ---- 2. Base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:#fff;scroll-padding-top:var(--fiq-head-h)}
body{
  font:300 18px/1.6 var(--fiq-sans-lt);
  color:var(--fiq-ink);background:var(--fiq-paper);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--fiq-electric)}
:focus-visible{outline:3px solid var(--fiq-cyan);outline-offset:2px}
b,strong{font-weight:700}
h1,h2{font-family:var(--fiq-serif);font-weight:700}
h3,h4{font-family:var(--fiq-sans);font-weight:700}
h2{font-size:clamp(1.8rem,3vw,2.3rem);line-height:1.2;letter-spacing:-.01em;color:var(--fiq-ink);margin-bottom:.4rem}
.wrap{width:min(100% - 48px, var(--fiq-page));margin-inline:auto}
section{padding-block:74px}

/* keyboard users can jump past the header */
.skip-link{position:absolute;top:8px;left:8px;z-index:200;padding:10px 18px;background:var(--fiq-electric);color:#fff;
  clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{clip-path:none}

/* ---- 3. Header -------------------------------------------------------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--fiq-rule)}
header.site .wrap{height:var(--fiq-head-h);display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{display:block;height:60px;width:auto}
.brand .tag{display:none;padding-left:14px;border-left:1px solid #A2AAAD;
  font:700 .74rem/1.3 var(--fiq-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fiq-electric)}
@media(min-width:640px){.brand .tag{display:block}}
@media(max-width:400px){.brand img{height:46px}}

nav.top{display:flex;gap:26px}
nav.top a{font:300 1rem/1.6 var(--fiq-sans-lt);color:var(--fiq-ink);text-decoration:none;
  padding-bottom:5px;background:linear-gradient(var(--fiq-cyan),var(--fiq-cyan)) 0 100%/0 2px no-repeat;
  transition:background-size .25s ease}
nav.top a:hover,nav.top a:focus-visible{background-size:100% 2px}
/* hub: route links shorten on phones */
nav.top .short{display:none}
@media(max-width:640px){
  nav.top{gap:16px}
  nav.top a{font-size:.9rem}
  nav.top .long{display:none}
  nav.top .short{display:inline}
}
/* audience pages: section links give way to Contact on phones */
@media(max-width:760px){nav.top.page a:not(.keep){display:none}}

/* ---- 4. Hero ---------------------------------------------------------- */
.hero{background:var(--fiq-hero-bg);color:#fff;
  min-height:calc(88vh - var(--fiq-head-h));min-height:calc(88svh - var(--fiq-head-h));
  display:grid;align-items:center;padding-block:72px 96px}
.hero.page{min-height:calc(78vh - var(--fiq-head-h));min-height:calc(78svh - var(--fiq-head-h))}
.hero .eyebrow{font:700 .95rem/1.6 var(--fiq-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fiq-cyan-lt);margin-bottom:1.2rem}
.hero h1{font-size:clamp(2rem,3.8vw,2.85rem);line-height:1.16;letter-spacing:-.015em;color:#fff}
.hero h1 span{display:block;text-wrap:balance}
.hero h1 span + span{margin-top:.12em}
.hero h1 .dash{display:inline;font-weight:400}
.hero p.sub{margin-top:clamp(2.4rem,6vh,3.6rem);max-width:62ch;font-size:1.15rem;color:#E6ECF2;text-wrap:pretty}
.hero p.sub2{margin:1.1rem 0 clamp(2.8rem,7vh,4.2rem);color:#fff}
.hero .co{font-weight:700;color:#fff}
.hero br.d{display:none}
@media(min-width:820px){.hero br.d{display:inline}.hero p.sub{max-width:none}}
.hero .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px}

/* ---- 5. Text-link calls to action --------------------------------------
   Label and chevron. Hovering the link draws a cyan rule under the label;
   on the route cards, hovering anywhere on the card turns the chevron cyan. */
.more,.door .go{display:inline-flex;align-items:center;gap:12px;font:700 1.15rem/1.6 var(--fiq-sans);color:#fff;text-decoration:none}
.more .t,.door .go .t{padding-bottom:4px;background:linear-gradient(var(--fiq-cyan),var(--fiq-cyan)) 0 100%/0 2px no-repeat;transition:background-size .25s ease}
.more:hover .t,.more:focus-visible .t,.door .go:hover .t,.door:focus-visible .go .t{background-size:100% 2px}
.chev{flex:none;color:currentColor;transition:color .2s ease,translate .25s ease}
.more .chev{rotate:90deg}
.more.right .chev{rotate:0deg}
.more:hover .chev,.more:focus-visible .chev,.door:hover .go .chev,.door:focus-visible .go .chev{color:var(--fiq-cyan)}
.more.right:hover .chev,.door:hover .go .chev,.door:focus-visible .go .chev{translate:3px 0}
.more:not(.right):hover .chev{translate:0 3px}
.more.onlight{color:var(--fiq-ink)}

/* ---- 6. Lede, grids, step columns -------------------------------------- */
.lede{max-width:62ch;margin:1rem 0 2.2rem;font-size:1.1rem;color:var(--fiq-ink-2)}
.lede b{font-family:var(--fiq-sans);color:var(--fiq-ink)}
.lede.wide{max-width:none}
#evidence .lede{max-width:none;margin-bottom:2.8rem;font-size:1.2rem;text-wrap:pretty}

.grid{display:grid;grid-template-columns:1fr;gap:22px}
.grid.three{gap:36px}
@media(min-width:640px){.grid.four{grid-template-columns:1fr 1fr}}
@media(min-width:700px){.grid.two{grid-template-columns:1fr 1fr}}
@media(min-width:820px){.grid.three{grid-template-columns:repeat(3,1fr);gap:52px}}
@media(min-width:1000px){.grid.four{grid-template-columns:repeat(4,1fr)}}

.card.step{border-top:2px solid var(--fiq-cyan);padding:22px 4px 0}
.card.step .num{display:block;margin-bottom:14px;font:700 1.9rem/1 var(--fiq-serif);color:var(--fiq-cyan)}
.card.step .tag{display:block;margin-bottom:10px;font:700 .74rem/1.6 var(--fiq-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fiq-cyan)}
.card.step h3{font:700 1.3rem/1.25 var(--fiq-serif);color:var(--fiq-ink);margin-bottom:.7rem}
.card.step p{font-size:1.02rem;color:var(--fiq-ink-2)}

/* ---- 7. Proof, callout and closing line (light sections) -------------- */
.proof,.callout{margin-top:48px;background:#fff;border-left:4px solid var(--fiq-cyan);
  border-radius:0 var(--fiq-corner) var(--fiq-corner) 0;box-shadow:0 2px 14px rgba(5,28,42,.07)}
.proof{display:flex;align-items:center;gap:26px;padding:22px 28px}
.proof b{flex:none;font:700 2.8rem/1 var(--fiq-serif);letter-spacing:-.02em;color:var(--fiq-electric)}
.proof p{font-style:italic;font-size:1.08rem;color:var(--fiq-ink)}
@media(max-width:560px){.proof{flex-direction:column;align-items:flex-start;gap:10px}}
.callout{padding:24px 30px}
.callout h3{font:700 1.35rem/1.6 var(--fiq-serif);color:var(--fiq-ink);margin-bottom:.4rem}
.callout p{font-size:1.05rem;color:var(--fiq-ink-2)}
.check{margin-top:26px;font-size:1rem;color:var(--fiq-ink-2)}
.check b{font-family:var(--fiq-sans);color:var(--fiq-ink)}

/* ---- 8. Dark bands and the route cards --------------------------------- */
.route,section.dark{background:var(--fiq-band-bg);color:#fff}
.route{padding-block:84px 90px}
.route h2,section.dark h2,section.dark h3{color:#fff}
.route .lede,section.dark .lede{color:var(--fiq-mist)}
.route .lede{max-width:none;margin:1rem 0 2.8rem}
.grid.doors{gap:32px}
.door{display:flex;flex-direction:column;padding:28px 34px 34px;color:#fff;text-decoration:none;
  border:1px solid rgba(171,232,255,.22);border-radius:var(--fiq-corner);
  background:rgba(5,28,42,.55);box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.05);
  transition:translate .35s ease,box-shadow .35s ease,border-color .25s ease}
.door:hover,.door:focus-visible{translate:0 -3px;border-color:rgba(48,163,218,.7);
  box-shadow:inset 0 0 0 100vmax rgba(255,255,255,.09),0 16px 36px rgba(0,0,0,.35)}
.door h3{font:700 1.6rem/1.6 var(--fiq-serif);letter-spacing:-.01em;color:#fff;margin-bottom:1.1rem}
.door p{flex:1;font-size:1.02rem;color:var(--fiq-mist)}
.door .go{align-self:flex-start;margin-top:28px}
section.dark .card.step{border-top-color:var(--fiq-cyan-lt)}
section.dark .card.step p{color:var(--fiq-mist)}

/* ---- 9. Audience-page components --------------------------------------- */
section.white{background:#fff}
.center-cta{margin-top:40px}

.split{display:grid;grid-template-columns:1fr;gap:28px 64px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split p{font-size:1.08rem;color:var(--fiq-ink-2)}
.split p + p{margin-top:1rem}
.split .pull{padding-left:22px;border-left:3px solid var(--fiq-cyan);
  font:700 clamp(1.3rem,2.2vw,1.6rem)/1.3 var(--fiq-serif);color:var(--fiq-ink)}

.seg{display:flex;flex-direction:column;padding:30px 30px 32px;background:#fff;border:1px solid var(--fiq-rule);
  border-radius:var(--fiq-corner);box-shadow:0 2px 14px rgba(5,28,42,.06)}
.seg .who{margin-bottom:.6rem;font:700 .78rem/1.6 var(--fiq-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fiq-electric)}
.seg h3{font:700 1.4rem/1.25 var(--fiq-serif);color:var(--fiq-ink);margin-bottom:.8rem}
.seg > p{margin-bottom:1rem;font-size:1rem;color:var(--fiq-ink-2)}
.seg .sub{margin:.4rem 0 .3rem;font:700 .9rem/1.6 var(--fiq-sans);color:var(--fiq-ink)}
.seg .foot{margin-top:auto;padding-top:14px;font-size:.92rem;font-style:italic;color:var(--fiq-ink-2)}

/* lists with a small drawn chevron marker */
ul.chev-list{list-style:none;margin-bottom:.6rem}
ul.chev-list li{position:relative;margin:.45rem 0;padding-left:22px;font-size:.98rem;line-height:1.5;color:var(--fiq-ink-2)}
ul.chev-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--fiq-cyan);
  clip-path:polygon(0 0,35% 0,100% 50%,35% 100%,0 100%,65% 50%)}
ul.chev-list.big li{margin:.7rem 0;font-size:1.1rem;color:var(--fiq-ink)}
section.dark ul.chev-list li{color:#E6ECF2}
section.dark ul.chev-list li::before{background:var(--fiq-cyan-lt)}

/* case study */
.case-kicker{display:inline-block;margin-bottom:.8rem;font:700 .76rem/1.6 var(--fiq-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fiq-cyan-lt)}
.case-meta{margin-top:.2rem;font-style:italic;color:var(--fiq-mist)}
.stats{display:grid;grid-template-columns:1fr;gap:24px;margin:40px 0 44px}
@media(min-width:720px){.stats{grid-template-columns:repeat(3,1fr);gap:40px}}
.stat{padding-top:18px;border-top:2px solid var(--fiq-cyan-lt)}
.stat b{display:block;font:700 clamp(2.4rem,4.4vw,3.2rem)/1 var(--fiq-serif);letter-spacing:-.02em;color:#fff}
.stat span{display:block;margin-top:10px;font:700 .8rem/1.45 var(--fiq-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--fiq-mist)}
.case-body h3{margin-bottom:.35rem;font-size:1.08rem;color:#fff}
.case-body p{font-size:1rem;color:var(--fiq-mist)}
.case-body .grid,.outcome .grid{row-gap:28px}
.outcome{margin-top:44px;padding-top:28px;border-top:1px solid rgba(201,214,228,.25)}
.outcome h4{margin-bottom:.4rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fiq-cyan-lt)}
.outcome p{font-size:1rem;color:#E6ECF2}
.case-note{margin-top:34px;font-size:.85rem;font-style:italic;color:#A9B7C6}

/* FAQs */
.faqs{display:grid;grid-template-columns:1fr;gap:34px 64px}
@media(min-width:900px){.faqs{grid-template-columns:1fr 1fr}}
.faq h3{margin-bottom:.45rem;font-size:1.08rem;line-height:1.35;color:var(--fiq-ink)}
.faq p{font-size:1rem;color:var(--fiq-ink-2)}

/* contact band */
.contact-grid{display:grid;grid-template-columns:1fr;gap:26px 40px;margin-top:10px}
@media(min-width:640px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.contact-grid{grid-template-columns:repeat(4,1fr)}}
.contact-grid h4{margin-bottom:6px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fiq-cyan-lt)}
.contact-grid p,.contact-grid a{font-size:1.05rem;color:#E6ECF2;text-decoration:none}
.contact-grid a{border-bottom:1px solid rgba(230,236,242,.35);transition:color .2s,border-color .2s}
.contact-grid a:hover,.contact-grid a:focus-visible{color:var(--fiq-cyan-lt);border-color:var(--fiq-cyan-lt)}
.founder{display:flex;align-items:center;gap:22px;max-width:760px;margin-top:46px;padding:24px 26px;
  background:var(--fiq-deep);border:1px solid rgba(171,232,255,.18);border-radius:var(--fiq-corner)}
.founder img{flex:none;width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid var(--fiq-cyan-lt)}
.founder b{display:block;font-family:var(--fiq-sans);font-size:1.02rem;color:#fff}
.founder .role{display:block;margin-bottom:6px;font-size:.85rem;color:#A9B7C6}
.founder p{font-size:.95rem;color:var(--fiq-mist)}
@media(max-width:520px){.founder{flex-direction:column;align-items:flex-start}}

/* ---- 10. Legal page ------------------------------------------------------ */
.legal-head{background:#fff;padding-block:64px 8px}
.legal-head h1{margin-bottom:.4rem;font-size:clamp(2rem,3.6vw,2.6rem);color:var(--fiq-ink)}
.legal-head p{color:var(--fiq-ink-2)}
.legal{background:#fff;padding-block:24px 80px}
.legal .wrap > div{max-width:74ch}
.legal h2{margin:2.6rem 0 .8rem;font-size:clamp(1.4rem,2.4vw,1.7rem)}
.legal h3{margin:1.6rem 0 .4rem;font-size:1.05rem;color:var(--fiq-ink)}
.legal p,.legal li{font-size:1.02rem;color:var(--fiq-ink-2)}
.legal p + p{margin-top:.8rem}
.legal ul{margin:.5rem 0 0 1.2rem}
.legal li{margin:.3rem 0}
.legal dl{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.6rem;margin-top:.6rem}
.legal dt{font-family:var(--fiq-sans);font-weight:700;color:var(--fiq-ink)}
.legal dd{color:var(--fiq-ink-2)}
@media(max-width:560px){.legal dl{grid-template-columns:1fr}.legal dd{margin-bottom:.6rem}}
.legal .todo{padding:1px 6px;border-radius:3px;background:#FFF4D6;color:var(--fiq-ink)}

/* ---- 11. Footer ------------------------------------------------------- */
footer.site{padding-block:32px;background:var(--fiq-deep);color:#C2CAD1;font-size:.85rem}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
footer.site .foot-col{display:flex;flex-direction:column;gap:6px}
footer.site .foot-col.end{align-items:flex-end}
@media(max-width:640px){footer.site .foot-col.end{align-items:flex-start}}
footer.site a{color:#F2F5F8;text-decoration:underline;text-decoration-color:rgba(242,245,248,.4);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
footer.site a:hover,footer.site a:focus-visible{color:var(--fiq-cyan);text-decoration-color:var(--fiq-cyan)}
/* LinkedIn link: the official logo in white, turning to LinkedIn blue on hover */
footer.site a.social{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
footer.site a.social:hover{text-decoration:underline}
footer.site .social-icon{flex:none;width:17px;height:15px;background:url(linkedin-icon.png) center/contain no-repeat}
footer.site a.social:hover .social-icon,footer.site a.social:focus-visible .social-icon{background-image:url(linkedin-icon-blue.png)}
/* fetch the blue version in advance, so the first hover doesn't flicker */
footer.site a.social::after{content:url(linkedin-icon-blue.png);position:absolute;width:0;height:0;overflow:hidden;opacity:0}

/* ---- 12. Motion: fade-in (added by script), and reduced-motion respect -- */
.fade-up{opacity:0;translate:0 14px}
.fade-in-ready{transition:opacity .6s ease,translate .6s ease}
@media(prefers-reduced-motion:reduce){
  .fade-up{opacity:1;translate:none}
  .fade-in-ready,.door,.chev,nav.top a,.more .t{transition:none}
}

/* ---- 13. Print -------------------------------------------------------- */
@media print{
  header.site,.more,.chev{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  section{padding-block:16pt;break-inside:avoid}
  .hero,.route,section.dark{background:none;color:#000;min-height:0}
  .hero h1,.hero p.sub,.route h2,section.dark h2,section.dark h3,.door,.door h3,.door p,.stat b,.case-body p,.outcome p{color:#000}
  .door,.proof,.callout,.seg{border:1pt solid #999;box-shadow:none}
  footer.site{background:none;color:#333}
}

/* ---- 14. Hub route section: light ground, white cards ------------------
   Overrides the dark-band defaults in section 8. */
#evidence{background:#fff}
.route{background:var(--fiq-paper);color:var(--fiq-ink)}
.route h2{color:var(--fiq-ink)}
.route .lede{color:var(--fiq-ink-2)}
.door{color:var(--fiq-ink);background:#fff;box-shadow:0 2px 14px rgba(5,28,42,.07);border:1px solid var(--fiq-rule);border-top:3px solid var(--fiq-cyan)}
.door:hover,.door:focus-visible{box-shadow:0 16px 36px rgba(5,28,42,.16);border-color:var(--fiq-rule);border-top-color:var(--fiq-cyan)}
.door h3{color:var(--fiq-ink)}
.door p{color:var(--fiq-ink-2)}
.door .go{color:var(--fiq-ink)}

/* ---- 15. Header lifts off the page once the reader scrolls ------------- */
header.site{transition:box-shadow .25s ease}
header.site.lifted{box-shadow:0 2px 14px rgba(5,28,42,.10)}

/* ---- 16. Cost cards: pain, cost, and what forensics shows --------------- */
.cost h3{font:700 1.3rem/1.25 var(--fiq-serif);color:var(--fiq-ink);margin-bottom:.7rem}
.cost p{font-size:1.02rem;color:var(--fiq-ink)}
.cost .shows{display:block;margin:1.1rem 0 .3rem;font:700 .74rem/1.6 var(--fiq-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--fiq-cyan)}
.cost p.reveal{color:var(--fiq-ink-2)}

/* ---- 17. Contact section on a light ground ------------------------------ */
section.contact-light{background:#fff}
section.contact-light .lede{color:var(--fiq-ink-2)}
.contact-light .contact-grid h4{color:var(--fiq-electric)}
.contact-light .contact-grid p,.contact-light .contact-grid a{color:var(--fiq-ink)}
.contact-light .contact-grid a{border-bottom-color:rgba(6,2,0,.25)}
.contact-light .contact-grid a:hover,.contact-light .contact-grid a:focus-visible{color:var(--fiq-electric);border-color:var(--fiq-cyan)}
.contact-light .founder{background:var(--fiq-paper);border-color:var(--fiq-rule)}
.contact-light .founder b{color:var(--fiq-ink)}
.contact-light .founder .role{color:var(--fiq-ink-2)}
.contact-light .founder p{color:var(--fiq-ink-2)}
.contact-light .founder img{border-color:var(--fiq-cyan)}
.more.onlight .chev{color:var(--fiq-ink)}
.more.onlight:hover .chev,.more.onlight:focus-visible .chev{color:var(--fiq-cyan)}

/* ---- 18. FAQs read down each column, newspaper-style -------------------- */
.faqs{display:block;columns:1;column-gap:64px}
@media(min-width:900px){.faqs{columns:2}}
.faq{break-inside:avoid;margin-bottom:34px}

/* ---- 19. Question cards: question, what we show, why it matters -------- */
.cost h3{font-size:1.35rem}
.cost .shows{margin-top:1.2rem}

/* ---- 20. Outcome columns and the evidence afterword --------------------- */
.card.step.outcome-col h3{font:700 1.3rem/1.25 var(--fiq-serif);color:var(--fiq-ink);margin-bottom:.7rem}
.afterword{margin-top:40px;padding-top:22px;border-top:1px solid var(--fiq-rule);font-size:1.02rem;color:var(--fiq-ink-2);max-width:none}
.afterword b{font-family:var(--fiq-sans);color:var(--fiq-ink)}
.stat b small{font-size:.55em;font-weight:700;margin:0 .15em;color:var(--fiq-cyan-lt)}

/* ---- 21. Route-card hover: flat at rest; on hover the card
   stays put and lifts visually with a close, darker shadow ---------------- */
.door{box-shadow:none;transition:box-shadow .25s ease,border-color .25s ease}
.door:hover,.door:focus-visible{translate:none;box-shadow:0 8px 22px rgba(5,28,42,.22),0 2px 6px rgba(5,28,42,.10)}

/* ---- 22. Case-study figures: narrower columns, more air between --------- */
@media(min-width:720px){.stats{grid-template-columns:repeat(3,minmax(0,250px));gap:72px;justify-content:start}}

/* ---- 23. Engagement path: a single quiet line rather than more cards ---- */
.path{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:2rem;padding:22px 0 0;border-top:2px solid var(--fiq-cyan)}
.path li{font:700 1.08rem/1.4 var(--fiq-sans);color:var(--fiq-ink)}
.path li span{display:block;font:300 .95rem/1.5 var(--fiq-sans-lt);color:var(--fiq-ink-2)}
.path .sep{flex:none;color:var(--fiq-cyan)}
@media(max-width:700px){.path{flex-direction:column;align-items:flex-start}.path .sep{rotate:90deg}}

/* ---- 24. Question cards: rows aligned across the three cards ------------
   Each card spans four shared rows (question, finding, label, consequence),
   so "Why it matters" lines up whatever the text lengths. */
.grid.three.aligned{row-gap:0}
.grid.three.aligned .cost{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
.grid.three.aligned .cost h3{align-self:end}
@media(max-width:819px){.grid.three.aligned .cost{margin-bottom:36px}}

/* ---- 25. Case-study figures span the full content width ----------------- */
@media(min-width:720px){.stats{grid-template-columns:repeat(3,minmax(0,260px));justify-content:space-between;gap:48px}}

/* ---- 26. Engagement path: three stages in a row, chevrons between ------- */
.path{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;gap:0 28px}
.path .sep{padding-top:4px}
@media(max-width:700px){.path{grid-template-columns:1fr;gap:10px}.path .sep{padding:0}}

/* ---- 27. Segment cards: list sits directly under the heading ----------- */
.seg h3{margin-bottom:1rem}

/* ---- 28. Phones: the two halves of a hero headline run on, rather than
   each starting a fresh line (avoids "you won’t / have to walk back") --- */
@media(max-width:600px){.hero h1 span{display:inline}.hero h1 span + span{margin-top:0}}