/* ============================================================================ tools.css: shared add-ons for the per-tool detail pages (/tools/
/)
   Sits on top of the homepage design system (home-v2.css). Each tool page adds
   a body class (.t-fca, .t-at, …) that sets the per-tool accent (--tool), so the
   layout is identical across pages and only the accent + content change.
   ============================================================================ */

/* ---- per-tool accent palette (echoes the in-app draft-type colours) ---- */
body{--tool:#1C6A4D;--tool-soft:#E6F2EA}      /* default = FCA green */
.t-fca{--tool:#1C6A4D;--tool-soft:#E6F2EA}
.t-at {--tool:#6D49C0;--tool-soft:#F0EAFB}
.t-hal{--tool:#2F6DB0;--tool-soft:#E7F0FA}
.t-sah{--tool:#157070;--tool-soft:#DFF0F0}
.t-chm{--tool:#A66312;--tool-soft:#F7EEDC}
.t-pr {--tool:#B24C35;--tool-soft:#F8E9E4}
.t-nar{--tool:#A4356A;--tool-soft:#F8E4EF}

/* ---- LIGHT hero (tool + hub pages only) ----
   The homepage keeps its dark hero because it does NOT load this stylesheet.
   Tool pages use a plain  (no .is-home) so the shared header renders its
   dark-text variant, readable over the cream hero. */
.hero{background:#fbfaf6}
.hero-content{max-width:900px}
.hero h1{color:var(--heading)}
.hero p{color:var(--body);max-width:700px}
.hero-img{border-color:var(--border)}
.hero-scroll{color:#0a0a0a;background:rgba(10,10,10,.05);border-color:rgba(10,10,10,.12)}

/* eyebrow: tool-tinted chip (readable on the light hero) */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tool);background:var(--tool-soft);
  border:1px solid transparent;padding:6px 14px;border-radius:999px;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border-radius:999px;font-size:16px;font-weight:500;cursor:pointer;
  background:transparent;border:1px solid rgba(10,10,10,.22);color:#0a0a0a;
  transition:background .2s,border-color .2s;
}
.btn-line:hover{background:rgba(10,10,10,.05);border-color:rgba(10,10,10,.5)}
/* cap the peeking hero shot so its top edge clears the (taller) hero copy */
@media(min-width:768px){.hero-img{height:min(54vh, calc(100dvh - 470px))}}
/* mobile: the longer tool-page copy exceeds 100dvh, so stack the hero
   (copy above, screenshot below) instead of overlapping the peek */
@media(max-width:767px){
  .hero{height:auto;min-height:auto}
  .hero-pad{padding-bottom:0}
  .hero-content{padding-bottom:28px}
  .hero-img{position:static;width:100%;max-width:none;height:auto;border-bottom:none;border-radius:14px}
  .hero-scroll{display:none}
}
/* in-content screenshots already carry their own rounded window + shadow */
.split-media img.shot{border:none;box-shadow:none;border-radius:0}

/* ---- section eyebrow (light sections, tool-tinted) ---- */
.sec-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tool);margin-bottom:14px}
.sec-eyebrow::before{content:"";width:18px;height:2px;background:var(--tool);border-radius:2px}
.split-copy h2 .now{color:var(--tool)}

/* lede paragraph under a definitional H2 */
.lede{font-size:19px;line-height:1.6;color:#33414f}
@media(min-width:768px){.lede{font-size:20px}}

/* ---- steps (numbered “how it works”) ---- */
.steps{display:grid;grid-template-columns:1fr;gap:20px;width:100%;max-width:var(--max);margin:0 auto}
@media(min-width:768px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.step .n{width:36px;height:36px;border-radius:10px;background:var(--tool);color:#fff;display:grid;place-items:center;font-weight:700;font-size:16px}
.step h3{font-size:19px;color:var(--heading);font-weight:600}
.step p{color:var(--body);font-size:14.5px;line-height:1.55}

/* ---- differentiator cards: tool-tinted icon (overrides homepage green check) ---- */
.feat-card .feat-ic{width:38px;height:38px;border-radius:10px;background:var(--tool-soft);display:grid;place-items:center}
.feat-card .feat-ic svg{width:20px;height:20px;stroke:var(--tool);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- report anatomy (numbered list of report sections) ---- */
.anatomy{width:100%;max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:0}
.an-row{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:22px 4px;border-bottom:1px solid var(--border)}
.an-row:last-child{border-bottom:none}
.an-n{width:34px;height:34px;border-radius:9px;background:var(--tool-soft);color:var(--tool);display:grid;place-items:center;font-size:14px;font-weight:700;flex:none}
.an-b h3{font-size:18px;color:var(--heading);font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
.an-b p{font-size:14.5px;color:var(--body);line-height:1.55}

/* ---- assessment-pills callout panel ---- */
.axpanel{width:100%;max-width:var(--max);margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:24px;padding:40px 32px;text-align:center;box-shadow:0 18px 44px rgba(10,30,20,.06)}
@media(min-width:768px){.axpanel{padding:52px 56px}}
.axpanel h2{font-size:28px;font-weight:500}
.axpanel p{color:var(--body);max-width:680px;margin:12px auto 0}
.pillwrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 8px}
.apill{font-size:14px;font-weight:500;color:var(--heading);background:#fbfaf6;border:1px solid var(--border);border-radius:999px;padding:8px 16px}
.apill.more{color:var(--tool);border-color:var(--tool);background:var(--tool-soft)}
.axlink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;color:var(--tool);font-weight:600;font-size:15.5px}
.axlink:hover{text-decoration:underline}
.axlink svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---- scheme / scope strip (small facts under the hero) ---- */
.factstrip{width:100%;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
@media(min-width:640px){.factstrip{grid-template-columns:repeat(3,1fr)}}
.factcell{background:#fff;padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.factcell .fl{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8a9aa0}
.factcell .fv{font-size:16px;color:var(--heading);font-weight:500;line-height:1.4}

/* ---- related tools grid (internal linking) ---- */
.rel{width:100%;max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:40px}
.relgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.relgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.relgrid{grid-template-columns:repeat(4,1fr)}}
.relcard{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:16px;transition:transform .2s,box-shadow .2s,border-color .2s;min-height:150px}
.relcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(10,30,20,.10);border-color:var(--rc,#1C6A4D)}
.relcard .rc-ic{width:42px;height:42px;border-radius:11px;background:var(--rcs,#E6F2EA);display:grid;place-items:center}
.relcard .rc-ic svg{width:22px;height:22px;stroke:var(--rc,#1C6A4D);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.relcard h3{font-size:17px;color:var(--heading);font-weight:600;display:flex;align-items:center;gap:8px}
.relcard p{font-size:13.5px;color:var(--body);line-height:1.5}
.relcard .rc-go{margin-top:auto;color:var(--rc,#1C6A4D);font-weight:600;font-size:14px}
/* per-card accents so the related grid stays colour-coded to each tool */
.rc-fca{--rc:#1C6A4D;--rcs:#E6F2EA}.rc-at{--rc:#6D49C0;--rcs:#F0EAFB}.rc-hal{--rc:#2F6DB0;--rcs:#E7F0FA}
.rc-sah{--rc:#157070;--rcs:#DFF0F0}.rc-chm{--rc:#A66312;--rcs:#F7EEDC}.rc-pr{--rc:#B24C35;--rcs:#F8E9E4}
.rc-nar{--rc:#A4356A;--rcs:#F8E4EF}.rc-ask{--rc:#0A0A0A;--rcs:#EEF0F0}

/* ---- FAQ accordion (from enterprise) ---- */
.faq{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s}
.faq-item.open{border-color:var(--tool)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;padding:18px 22px;font:inherit;font-size:16px;font-weight:500;color:var(--heading);background:none;border:none;cursor:pointer}
.faq-ic{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;font-size:16px;color:var(--body);transition:transform .22s,background .18s,border-color .18s,color .18s}
.faq-item.open .faq-ic{transform:rotate(45deg);background:var(--tool);border-color:var(--tool);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;color:var(--body);font-size:14.5px;line-height:1.7;padding:0 22px}
.faq-item.open .faq-a{max-height:32rem;padding:0 22px 20px}

/* ---- dark CTA panel (from enterprise) ---- */
.ctapanel.dark{background:#0c1a14}
.ctapanel.dark h3{color:#fff}
.ctapanel.dark p{color:rgba(255,255,255,.6)}
.cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-outline-d{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:999px;font-size:16px;font-weight:500;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;transition:background .2s,border-color .2s}
.btn-outline-d:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.75)}

/* ---- tools hub: rich tool cards (the /tools/ landing grid) ---- */
.toolgrid{display:grid;grid-template-columns:1fr;gap:18px;width:100%;max-width:var(--max);margin:0 auto}
@media(min-width:640px){.toolgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.toolgrid{grid-template-columns:repeat(3,1fr)}}
.toolcard{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:18px;transition:transform .2s,box-shadow .2s,border-color .2s;min-height:230px}
.toolcard:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(10,30,20,.12);border-color:var(--rc,#1C6A4D)}
.toolcard .tc-top{display:flex;align-items:center;gap:14px}
.toolcard .tc-ic{width:50px;height:50px;border-radius:13px;background:var(--rcs,#E6F2EA);display:grid;place-items:center;flex:none}
.toolcard .tc-ic svg{width:26px;height:26px;stroke:var(--rc,#1C6A4D);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.toolcard .tc-code{font-size:21px;font-weight:600;color:var(--heading);letter-spacing:-.01em;line-height:1.1}
.toolcard .tc-pill{position:absolute;top:18px;right:18px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rc,#1C6A4D);background:var(--rcs,#E6F2EA);padding:4px 11px;border-radius:999px}
.toolcard .tc-name{font-size:15px;font-weight:500;color:var(--heading)}
.toolcard p{font-size:14px;color:var(--body);line-height:1.55;flex:1}
.toolcard .tc-go{color:var(--rc,#1C6A4D);font-weight:600;font-size:14.5px}

/* small helper: tool tag pinned in a section head */
.tool-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--tool);background:var(--tool-soft);padding:3px 10px;border-radius:999px;vertical-align:middle;margin-left:10px}