/* Extra components for the Ava CRM tour, ROI calculator, comparison, what's new, help centre,
   partners, status and FAQ sections. Loaded after /css/site.css, which provides the tokens. */

.crumbs-bar{font-size:.9rem;color:var(--muted);margin-bottom:6px}
.crumbs-bar a{color:var(--muted)}
.page-lead{max-width:62ch;color:var(--muted);font-size:1.08rem}

/* FAQ (same look as the Ava CRM page) */
.faq{display:grid;gap:10px;max-width:80ch}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.faq summary{cursor:pointer;padding:16px 20px;font-size:1.05rem;color:var(--ink)}
.faq summary::marker{color:var(--blue)}
.faq details>div{padding:0 20px 18px;color:var(--muted);display:grid;gap:10px}

/* Product tour */
.tour{display:grid;gap:24px}
.tour-nav{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tour-nav button{font:inherit;font-size:.9rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;cursor:pointer}
.tour-nav button[aria-current="step"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.tour-steps{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.tour-step{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.tour-step .shot{display:block;border-radius:28px;border:6px solid #0f1b33;overflow:hidden;box-shadow:0 18px 40px rgb(0 0 0 / .18);background:#0f1b33}
.tour-step .shot img{display:block;width:100%;height:auto}
.tour-step .txt{display:grid;gap:12px;align-content:start}
.tour-step .who{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--crimson)}
.tour-step .count{color:var(--muted);font-size:.9rem}
.tour-step ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted)}
.tour.js .tour-step{display:none}
.tour.js .tour-step.on{display:grid}
.tour-ctrl{display:none;gap:12px;flex-wrap:wrap}
.tour.js .tour-ctrl{display:flex}
@media (max-width:720px){.tour-step{grid-template-columns:1fr}.tour-step .shot{max-width:280px;margin:0 auto}}

/* ROI calculator */
.roi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.roi form{display:grid;gap:16px}
.roi .field input{width:100%}
.roi .hint{font-size:.85rem;color:var(--muted)}
.roi-out{background:var(--navy);color:var(--on-navy);border-radius:20px;padding:clamp(22px,4vw,34px);display:grid;gap:16px;position:sticky;top:96px}
.roi-out h2{color:var(--on-navy);margin:0;font-size:1.4rem}
.roi-out dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0}
.roi-out dt{opacity:.85}
.roi-out dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.roi-out .big{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1.1}
.roi-out .btn{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)}
.roi-out p{opacity:.9;font-size:.92rem}
@media (max-width:820px){.roi{grid-template-columns:1fr}.roi-out{position:static}}

/* Comparison table */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.cmp{border-collapse:collapse;width:100%;min-width:720px;font-size:.95rem}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp thead th{background:var(--band);font-weight:400;color:var(--ink)}
.cmp thead th.ava{background:var(--navy);color:var(--on-navy)}
.cmp tbody th{font-weight:600;color:var(--ink);width:20%}
.cmp td{color:var(--muted)}
.cmp td.ava{color:var(--ink);background:color-mix(in srgb,var(--band) 60%,transparent)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.yes::before{content:"✓ ";color:var(--lime-ink,#4c7a00)}
.no::before{content:"✕ ";color:var(--crimson)}

/* What's new */
.releases{display:grid;gap:20px;max-width:80ch}
.release{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(14px,2vw,20px);display:grid;gap:8px}
.release h2{font-size:1.3rem;margin:0}
.release .date{color:var(--muted);font-size:.9rem}
.release ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted)}
.release ul b{color:var(--ink);font-weight:600}

/* Help centre */
.help-search{display:grid;gap:6px;max-width:560px}
.help-search input{font:inherit;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.help-toc{columns:2 260px;column-gap:24px;padding-left:20px;margin:0}
.help-toc li{margin-bottom:6px;break-inside:avoid}
.help-group{font-size:1.4rem;margin:28px 0 4px}
.help-article{background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;max-width:80ch}
.help-article summary{cursor:pointer;padding:16px 20px;font-size:1.05rem;color:var(--ink)}
.help-article summary::marker{color:var(--blue)}
.help-article>div{padding:0 20px 18px;color:var(--muted);display:grid;gap:10px}
.help-article>div ol,.help-article>div ul{margin:0;padding-left:22px;display:grid;gap:6px}
.help-article b{color:var(--ink);font-weight:600}
.help-empty{color:var(--muted)}

/* Status page */
.status-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:760px}
.status-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.status-list .name{display:grid;gap:2px}
.status-list .name small{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:4px 12px;font-size:.88rem;border:1px solid currentColor}
.pill::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.pill.up{color:var(--wa)}
.pill.down{color:var(--crimson)}
.pill.wait{color:var(--muted)}
.status-summary{font-size:1.25rem}

/* Partner programme */
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){.split2{grid-template-columns:1fr}}

/* Customer stories (shown only once there are stories) */
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.story{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:12px;margin:0}
.story blockquote{margin:0;font-size:1.08rem;color:var(--ink)}
.story figcaption{color:var(--muted);font-size:.92rem}
.story .result{font-size:1.6rem;color:var(--navy)}

/* Insights search and the 404 page */
.search-box{display:flex;gap:8px;flex-wrap:wrap;max-width:560px;margin-top:16px}
.search-box input{flex:1 1 220px;font:inherit;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.search-note{color:var(--muted);font-size:.92rem;margin-top:8px}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;width:100%;max-width:820px;margin:24px auto 0;text-align:left}
.linkgrid a{display:grid;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--navy)}
.linkgrid a small{color:var(--muted)}

/* Shared with the Ava CRM page (used on the comparison page) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.role{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,28px);display:grid;gap:12px;align-content:start;min-width:0}
.role h3{font-size:1.4rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks li{padding-left:26px;position:relative}
.ticks li::before{content:"";position:absolute;left:4px;top:.5em;width:10px;height:5px;border-left:2px solid var(--wa);border-bottom:2px solid var(--wa);transform:rotate(-45deg)}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;color:var(--muted);font-size:.96rem}
.steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--on-navy);font-size:.85rem;margin-bottom:8px}
.steps strong{color:var(--ink);font-weight:600;display:block;margin-bottom:4px}
.help-toc{list-style:none;padding-left:0}
.help-toc>li{margin-bottom:14px}
.help-toc ul{padding-left:18px;margin:6px 0 0}

.center .linkgrid{justify-self:stretch}
.center>*{max-width:100%;min-width:0}
#nfLatest{justify-self:stretch}

.story.example{max-width:80ch}
.story.example h3{font-size:1.3rem}
.story.example p{margin:0;color:var(--muted)}
.story.example .post-tag{color:var(--crimson);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}

/* Insights list: compact header band (title and intro left, follow buttons and search right) */
.ins-head{padding-block:16px 18px}
.ins-head-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,440px);gap:12px 40px;align-items:center}
.ins-head h1{margin:0}
.ins-head-in > div > p{margin:4px 0 0;color:var(--muted);max-width:60ch;font-size:.98rem}
.ins-tools .actions{margin:0}
.ins-tools .search-box{margin-top:10px;max-width:none}
.ins-tools .search-note:empty{display:none}
@media (max-width:820px){.ins-head-in{grid-template-columns:1fr}}