/* Nav chrome lives in nav.css so the standalone /tools pages can load the
   same header without the rest of this stylesheet. Must stay first. */
@import url("nav.css?v=2");

:root{
    --navy:#14377D; --navy-d:#0E2A5A; --royal:#006FB9; --evergreen:#009D48; --leaf:#84C778;
    --tint:#D6EFD7; --charcoal:#203232; --grey:#555A5E; --line:#E2E6EC; --bg:#F4F7FA;
    --soft:#B8CCE4; --white:#fff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  [id]{scroll-margin-top:90px}
  body{font-family:'Lato',Arial,sans-serif;color:var(--charcoal);line-height:1.6;background:var(--white);-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .container{max-width:1160px;margin:0 auto;padding:0 28px}
  /* 56px of gutter is a fifth of a 280px screen; narrow devices need the room */
  @media(max-width:340px){.container{padding:0 16px}}
  .kicker{color:var(--evergreen);font-weight:700;font-size:.78rem;letter-spacing:2.4px;text-transform:uppercase;margin-bottom:14px}
  h1,h2,h3{color:var(--navy);font-weight:700;line-height:1.12}
  h2{font-size:2rem;margin-bottom:14px}
  .sub{color:var(--grey);font-size:1.05rem;max-width:640px}
  .btn{display:inline-block;font-weight:700;font-size:.95rem;padding:13px 24px;border-radius:7px;border:1.5px solid transparent;transition:.15s;cursor:pointer;white-space:nowrap;text-align:center}
  .btn-primary{background:var(--evergreen);color:#fff;border-color:var(--evergreen)}
  .btn-primary:hover{background:#00853d}
  .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
  .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  .btn-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
  .btn-navy:hover{background:var(--navy-d)}
  .btn-white{background:#fff;color:var(--evergreen);border-color:#fff}
  .btn-white:hover{background:#eafaf0}

  /* HERO */
  .hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:74px 0 60px}
  .hero-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center}
  .hero .kicker{color:var(--leaf)}
  .hero h1{color:#fff;font-size:2.9rem;margin-bottom:20px}
  .hero .lead{color:var(--soft);font-size:1.16rem;max-width:560px;margin-bottom:28px}
  .hero-btns{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:22px}
  .hero-assure{display:flex;align-items:center;gap:9px;color:var(--soft);font-size:.92rem}
  .hero-assure .ck{color:var(--leaf);font-weight:700;font-size:1.05rem}
  .hero-src{color:var(--soft);font-size:.8rem;opacity:.85;margin:0 0 16px}
  .hero-src a{color:inherit;text-decoration:underline;text-underline-offset:2px}
  .hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .hero-chips .iso-badge{margin-top:0}
  .hero-visual .hero-assure{justify-content:center;margin-top:18px}
  .hero-visual .hero-chips{justify-content:center}
  .mock-cap{display:block;text-align:center;color:var(--soft);font-size:.85rem;margin-top:16px}
  .mock-cap:hover{color:#fff}
  .flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .flow .chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.82rem;font-weight:700;padding:6px 13px;border-radius:20px;white-space:nowrap}
  .flow .chip.hi{background:var(--evergreen);border-color:var(--evergreen)}
  .flow .arr{color:var(--leaf);font-weight:700}
  /* hero visual: AI maturity assessment card */
  .mock{display:block;background:#fff;border-radius:14px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.28);color:var(--charcoal);transition:transform .15s,box-shadow .15s}
  a.mock:hover{transform:translateY(-3px);box-shadow:0 30px 68px rgba(0,0,0,.34)}
  .mock .tag{display:inline-block;background:var(--tint);color:var(--evergreen);font-weight:700;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;border-radius:20px;margin-bottom:14px}
  .mock h3{font-size:1.18rem;margin-bottom:14px}
  .mock .stages{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
  .mock .stage{display:flex;align-items:center;gap:12px;padding:10px 13px;border:1px solid var(--line);border-radius:10px;background:#F7F9FC}
  .mock .stage .sn{flex:none;width:23px;height:23px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--grey);font-size:.74rem;font-weight:800;display:flex;align-items:center;justify-content:center}
  .mock .stage b{display:block;font-size:.92rem;color:var(--navy);line-height:1.25}
  .mock .stage .sd{display:block;font-size:.78rem;color:var(--grey)}
  .mock .stage.lead{background:var(--tint);border-color:#B6DFB8}
  .mock .stage.lead .sn{background:var(--evergreen);border-color:var(--evergreen);color:#fff}
  .mock .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .mock .fname{font-size:.85rem;color:var(--grey)}
  .mock .go{background:var(--evergreen);color:#fff;font-weight:700;font-size:.85rem;padding:9px 16px;border-radius:7px}

  /* SECTIONS */
  section.band{padding:72px 0}
  .band.alt{background:var(--bg)}
  .band.dark{background:var(--navy);color:#fff}
  .band.dark h2{color:#fff}
  .band.dark .kicker{color:var(--leaf)}
  .band.dark .center .sub{color:var(--soft)}
  .gov-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
  .gov-badges .iso-badge{margin-top:0}
  .center{text-align:center;margin:0 auto 44px;max-width:720px}
  .center .sub{margin:0 auto}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;border-top:4px solid var(--evergreen)}
  .card h3{font-size:1.15rem;margin-bottom:8px}
  .card p{color:var(--grey);font-size:.95rem}
  .card .cic{width:44px;height:44px;border-radius:10px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  .card .cic svg{width:24px;height:24px;fill:none;stroke:var(--evergreen);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .card .meta{color:var(--evergreen);font-weight:700;font-size:.78rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
  .card .meta.gray{color:var(--grey)}
  .card .meta.ok{color:var(--evergreen)}
  .card.freetier{background:#F4FBF7}
  .subhead{font-size:.8rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--grey);margin:36px 0 16px}
  .featured{background:#fff;border:1px solid var(--line);border-top:4px solid var(--evergreen);border-radius:14px;padding:30px 32px;box-shadow:0 10px 30px rgba(20,55,125,.06)}
  .featured-head{display:flex;justify-content:space-between;gap:28px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
  .featured-head h3{font-size:1.5rem;margin:12px 0 8px}
  .featured-head p{color:var(--grey);max-width:560px}
  .featured-cta{display:flex;flex-direction:column;gap:10px;min-width:240px}
  .badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:4px 11px;border-radius:20px}
  .badge.ok{background:var(--tint);color:var(--evergreen)}
  .agent-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px;border-top:1px solid var(--line);padding-top:22px}
  .agent b{display:block;font-size:.95rem;color:var(--navy);margin-bottom:3px}
  .agent span{font-size:.85rem;color:var(--grey);line-height:1.4}
  .btn-ghost-navy{background:transparent;color:var(--navy);border-color:var(--soft)}
  .btn-ghost-navy:hover{border-color:var(--navy);background:var(--bg)}
  .svc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;border-top:4px solid var(--evergreen)}
  .svc h3{font-size:1.15rem;margin-bottom:6px}
  .svc>p{color:var(--grey);font-size:.95rem;margin-bottom:14px}
  .svc ul{margin:0;padding-left:18px}
  .svc li{font-size:.9rem;color:var(--charcoal);margin-bottom:6px}
  .actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:30px}
  .note{text-align:center;font-size:.88rem;color:var(--grey);max-width:680px;margin:22px auto 0}
  .chip-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
  .chip-link{font-size:.9rem;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px 16px}
  .chip-link:hover{border-color:var(--evergreen);color:var(--evergreen)}


  /* steps */
  .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
  .step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center}
  .step.hi{background:var(--tint);border-color:var(--leaf)}
  .step .n{color:var(--evergreen);font-weight:900;font-size:1.4rem;margin-bottom:6px}
  .step h3{font-size:1rem;margin-bottom:4px}
  .step p{font-size:.82rem;color:var(--grey)}

  /* free band */
  .free{background:var(--evergreen);color:#fff;border-radius:18px;padding:48px 52px;display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center}
  .free .kicker{color:#fff;opacity:.85}
  .free h2{color:#fff;font-size:2rem}
  .free p{color:#eafaf0;font-size:1.08rem;margin:12px 0 22px;max-width:560px}
  .free .note{font-size:.86rem;color:#cdebd8;margin-top:14px}
  .free-right{text-align:center}
  .free-right .big{font-size:2.6rem;font-weight:900;line-height:1.1}
  .free-right .sm{color:#eafaf0;font-size:.92rem}

  /* why */
  .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .why .c{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
  .why .ic{flex:0 0 44px;height:44px;border-radius:10px;background:var(--tint);color:var(--evergreen);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.2rem}
  .why .c h3{font-size:1.08rem;margin-bottom:5px}
  .why .c p{color:var(--grey);font-size:.93rem}

  /* CTA band */
  .cta{background:var(--navy);color:#fff;text-align:center;padding:64px 0}
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
  .tier{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column}
  .tier.feat{border-color:var(--evergreen);box-shadow:0 18px 42px -24px rgba(0,157,72,.5);position:relative}
  .tier .badge-feat{position:absolute;top:-11px;left:24px;background:var(--evergreen);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.6px;padding:3px 11px;border-radius:20px}
  .tier .tname{font-weight:900;color:var(--navy);font-size:1.12rem}
  .tier .tprice{font-size:2rem;font-weight:900;color:var(--navy);margin:8px 0 2px}
  .tier .tdesc{color:var(--grey);font-size:.92rem;margin-bottom:16px}
  .tier ul{list-style:none;margin:0 0 22px;flex:1}
  .tier li{font-size:.92rem;color:var(--charcoal);padding:6px 0 6px 24px;position:relative}
  .tier li:before{content:"✓";position:absolute;left:0;color:var(--evergreen);font-weight:900}
  .tier .btn{display:flex;justify-content:center;width:100%;margin-top:auto}
  /* --soft is a light tint for navy backgrounds; this note sits on white, so it
     needs the body grey or it drops to ~1.6:1 and reads as blank space */
  .pricing-note{text-align:center;color:var(--grey);font-size:.86rem;margin-top:18px}
  .tracks{display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left;margin-top:12px}
  .track{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column}
  .track.feat{border-color:var(--evergreen);box-shadow:0 18px 42px -24px rgba(0,157,72,.5)}
  .track .track-tag{font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--evergreen);margin-bottom:8px}
  .track h3{font-size:1.3rem;margin-bottom:8px}
  .track p{color:var(--grey);font-size:.96rem;margin-bottom:16px;flex:1}
  .track .chip-links{justify-content:flex-start;margin:0}
  .track .btn{align-self:flex-start}
  .funcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:8px}
  .func.feat{border-color:var(--evergreen)}
  .func-link{display:inline-block;margin-top:10px;color:var(--royal);font-weight:700;font-size:.86rem}
  /* advise vs engineer — capability matrix. Deliberately not cards: the menu
     below owns the card shell, so this band reads as argument, not options. */
  .matrix-wrap{max-width:900px;margin:0 auto;overflow-x:auto}
  .matrix{width:100%;border-collapse:collapse;table-layout:fixed}
  .matrix thead th:first-child{width:32%}
  .matrix th,.matrix td{padding:15px 8px;text-align:center;vertical-align:middle}
  .matrix thead th{font-size:.72rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--grey)}
  .matrix tbody th{text-align:left;font-size:.95rem;font-weight:700;color:var(--grey);border-left:4px solid transparent;padding-left:14px}
  .matrix tbody tr{border-top:1px solid var(--line)}
  .matrix .y{color:var(--evergreen);font-weight:900;font-size:1.1rem;line-height:1}
  .matrix .n{color:#C9CFD6;font-size:1rem;line-height:1}
  .matrix tr.us{background:#F4FBF7}
  .matrix tr.us th{color:var(--navy);border-left-color:var(--evergreen)}
  .matrix tr.us .y{font-size:1.3rem}
  /* Below 680px the six columns cannot fit legibly, so the table keeps a floor
     width and .matrix-wrap scrolls it. Shrinking type to fit instead drove the
     header to 9px and squeezed the row labels into 60px slivers. */
  @media(max-width:680px){
    .matrix{min-width:560px}
    .matrix thead th:first-child{width:28%}
    .matrix th,.matrix td{padding:12px 6px}
    .matrix thead th{font-size:.66rem;letter-spacing:.4px}
    .matrix tbody th{font-size:.85rem;padding-left:9px}
    /* Edge shading is the only cue that the table scrolls. The white "cover"
       layers scroll with the content (background-attachment:local) so each
       shadow disappears once you reach that end. Section bg is white. */
    .matrix-wrap{
      background:
        linear-gradient(to right,#fff 40%,rgba(255,255,255,0)) 0 0,
        linear-gradient(to left,#fff 40%,rgba(255,255,255,0)) 100% 0,
        radial-gradient(farthest-side at 0 50%,rgba(20,55,125,.16),rgba(20,55,125,0)) 0 0,
        radial-gradient(farthest-side at 100% 50%,rgba(20,55,125,.16),rgba(20,55,125,0)) 100% 0;
      background-repeat:no-repeat;
      background-size:32px 100%,32px 100%,13px 100%,13px 100%;
      background-attachment:local,local,scroll,scroll;
    }
  }

  /* service menu — 5 cards as 3 + 2 centred */
  .svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;margin-top:8px}
  .svc-grid>.card{grid-column:span 2;display:flex;flex-direction:column}
  .svc-grid>.card:nth-child(4){grid-column:2/span 2}
  .svc-grid>.card p{flex:1}
  @media(max-width:960px){
    .svc-grid{grid-template-columns:repeat(4,1fr)}
    .svc-grid>.card:nth-child(4){grid-column:auto/span 2}
  }
  @media(max-width:680px){
    .svc-grid{grid-template-columns:1fr}
    .svc-grid>.card,.svc-grid>.card:nth-child(4){grid-column:auto}
  }
  @media(max-width:760px){.tracks{grid-template-columns:1fr}}
  @media(max-width:760px){.tiers{grid-template-columns:1fr}}
  .cta h2{color:#fff;font-size:2.1rem;margin-bottom:10px}
  .cta p{color:var(--soft);margin-bottom:26px;font-size:1.05rem}
  .cta .btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

  /* FOOTER */
  footer{background:var(--navy-d);color:#cdd8ea;padding:54px 0 26px;font-size:.9rem}
  .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.12)}
  footer img{height:30px;margin-bottom:14px}
  .foot-tag{color:var(--leaf);font-weight:700;font-size:.92rem;margin-bottom:8px}
  .foot-blurb{color:var(--soft);max-width:260px;font-size:.86rem}
  .iso-badge{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 14px;border:1px solid rgba(132,199,120,.45);border-radius:8px;background:rgba(132,199,120,.10);color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.3px}
  footer h4{color:#fff;font-size:.82rem;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:14px}
  footer ul{list-style:none}
  footer li{margin-bottom:9px}
  footer li a:hover{color:#fff}
  .foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:10px;color:var(--soft);font-size:.82rem}

  @media(max-width:960px){
    .hero-inner{grid-template-columns:1fr;gap:36px}
    .hero h1{font-size:2.3rem}
    .grid4{grid-template-columns:repeat(2,1fr)}
    .agent-list{grid-template-columns:repeat(2,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
    .free{grid-template-columns:1fr;padding:36px}
    .foot-top{grid-template-columns:1fr 1fr;gap:24px}
  }
  @media(max-width:680px){
    .grid3,.grid4,.stand,.why-grid,.agent-list{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .featured-cta{min-width:0;width:100%}
    h2{font-size:1.6rem}
    .hero h1{font-size:1.9rem}
    .foot-top{grid-template-columns:1fr}
  }

  /* ==========================================================
     THE RUN STRIP — the this-not-that band on the service pages.
     Two rows drawn on one shared 620x130 coordinate grid: the
     usual way in grey, ours in green, glyph-for-glyph aligned so
     the difference is read by scanning down. Ruled, never boxed.
     ========================================================== */
  .split{max-width:1040px;margin:0 auto;border-top:1px solid var(--line)}
  .split-row{position:relative;display:grid;grid-template-columns:minmax(0,264px) minmax(0,1fr);gap:44px;
    align-items:center;padding:30px 24px 30px 24px;border-bottom:1px solid var(--line)}
  .split-row:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
  .split-ours{background:linear-gradient(90deg,#F4FBF7 0%,#F4FBF7 62%,rgba(244,251,247,0) 100%)}
  .split-ours:before{background:var(--evergreen)}
  .split-tag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#98A3B2;margin-bottom:10px}
  .split-ours .split-tag{color:var(--evergreen)}
  .split-copy h3{font-size:1.2rem;margin-bottom:8px}
  .split-text{color:var(--grey);font-size:.95rem}
  .split-viz{min-width:0}
  .split-viz svg{display:block;width:100%;height:auto}
  /* the only motion in the band: ours is a line that keeps running */
  .split .flowline{stroke-dasharray:5 9;animation:split-flow 9s linear infinite}
  @keyframes split-flow{to{stroke-dashoffset:-56}}
  @media(max-width:880px){
    .split-row{grid-template-columns:minmax(0,1fr);gap:18px;padding:26px 0 28px 18px}
    .split-viz{padding-right:4px}
  }
  @media(prefers-reduced-motion:reduce){.split .flowline{animation:none}}

  /* ==========================================================
     HOMEPAGE 2026 — band system.
     Scoped to body.home so every other page keeps the styles
     above unchanged. The nav, the .mock hero card, the .wwo
     "way forward" diagram and the .band.dark proof cards are
     deliberately inherited from the legacy styles as-is.
     ========================================================== */
  body.home{font-family:"Helvetica Neue",Helvetica,-apple-system,"Segoe UI",Arial,sans-serif;font-size:17px;background:#fff;
    --hair:rgba(255,255,255,.11); --hair-s:rgba(255,255,255,.22)}
  body.home .hero h1,body.home .sec-head h2,body.home .cta-band h2{font-weight:500;letter-spacing:-.03em;text-wrap:balance}
  body.home .kicker{font-size:11px;letter-spacing:.18em;margin-bottom:20px}
  body.home .fail{color:#FF5C5C}
  body.home a:focus-visible,body.home button:focus-visible{outline:2px solid var(--evergreen);outline-offset:3px;border-radius:4px}
  body.home .hero a:focus-visible,body.home .darkband a:focus-visible{outline-color:var(--leaf)}
  body.home .tlink{display:inline-block;font-size:15px;font-weight:700;color:#fff;border-bottom:1px solid var(--hair-s);padding-bottom:2px;transition:border-color .2s;white-space:nowrap}
  body.home .tlink:hover{border-color:#fff}
  body.home .lightband .tlink{color:var(--navy);border-color:var(--soft)}
  body.home .lightband .tlink:hover{border-color:var(--navy)}

  /* hero */
  body.home .hero{position:relative;overflow:hidden;background:var(--navy);color:#fff;padding:92px 0 80px}
  body.home .hero-inner{position:relative;z-index:2;grid-template-columns:1.1fr .9fr;gap:64px}
  body.home .hero h1{color:#fff;font-size:clamp(2.5rem,4.5vw,3.95rem);line-height:1.04;margin-bottom:30px}
  body.home .hero p.lead{color:var(--soft);font-size:1.1rem;line-height:1.6;max-width:34em;margin-bottom:14px}
  /* .stage.lead inside the maturity card would otherwise inherit .hero .lead's paragraph spacing */
  body.home .hero .mock .stage.lead{color:inherit;font-size:inherit;max-width:none;margin-bottom:0}
  body.home .hero-btns{margin-top:30px;margin-bottom:20px;align-items:center;gap:26px}
  body.home .hero-src{font-size:12.5px;opacity:.72;margin:0}
  body.home .hero-visual{position:relative;z-index:2}
  body.home .hero-assure{font-size:.88rem;justify-content:center;margin-top:16px}
  body.home .aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  body.home .aur{position:absolute;border-radius:50%;filter:blur(76px)}
  body.home .aur1{top:-160px;left:2%;width:940px;height:470px;background:radial-gradient(ellipse at center,rgba(132,199,120,.26),transparent 64%);transform:rotate(-9deg);animation:home-drift 16s ease-in-out infinite alternate}
  body.home .aur2{top:-120px;right:-8%;width:760px;height:420px;background:radial-gradient(ellipse at center,rgba(0,111,185,.34),transparent 64%);transform:rotate(7deg);animation:home-drift 19s ease-in-out infinite alternate-reverse}
  body.home .aur3{top:60px;left:34%;width:520px;height:240px;background:radial-gradient(ellipse at center,rgba(132,199,120,.13),transparent 68%);transform:rotate(-14deg);animation:home-drift 22s ease-in-out infinite alternate}
  @keyframes home-drift{from{transform:translateX(-30px) rotate(-9deg)}to{transform:translateX(40px) rotate(-4deg)}}
  body.home .hero-bg{z-index:1}
  body.home .hero-bg .tw{animation:home-twinkle 4.5s ease-in-out infinite}
  body.home .hero-bg .tw2{animation:home-twinkle 5.5s ease-in-out 1.8s infinite}
  @keyframes home-twinkle{0%,100%{opacity:.8}50%{opacity:.32}}

  /* the 95/5 meter */
  body.home .meter{max-width:520px;margin-bottom:30px}
  body.home .meter-bar{position:relative;height:6px;margin-bottom:10px}
  body.home .meter-bar span{position:absolute;top:0;height:100%;border-radius:3px}
  body.home .m95{left:0;width:calc(95% - 3px);background:rgba(255,255,255,.15);transform-origin:left;animation:home-sweep .9s cubic-bezier(.25,.7,.3,1) both}
  body.home .m5{right:0;width:calc(5% - 3px);background:var(--leaf);box-shadow:0 0 14px rgba(132,199,120,.8),0 0 34px rgba(132,199,120,.4);transform-origin:right;animation:home-snap .45s cubic-bezier(.2,.9,.3,1.4) .9s both}
  body.home .meter-labels{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--soft)}
  body.home .meter-labels .m5l{color:var(--leaf);font-weight:700;text-align:right}
  @keyframes home-sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes home-snap{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
  body.home .rise{animation:home-rise .7s cubic-bezier(.2,.7,.3,1) both}
  body.home .rise.d1{animation-delay:.08s}body.home .rise.d2{animation-delay:.16s}
  body.home .rise.d3{animation-delay:.24s}body.home .rise.d4{animation-delay:.32s}
  @keyframes home-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* bands */
  body.home .lightband,body.home .darkband{position:relative;padding:100px 0;overflow:hidden}
  body.home .lightband .container,body.home .darkband .container{position:relative;z-index:1}
  body.home .lightband{background:#fff;color:var(--grey)}
  body.home .lightband .kicker{color:var(--evergreen)}
  body.home .lightband h2{color:var(--navy)}
  body.home .darkband{background:var(--navy);color:var(--soft)}
  body.home .darkband.deep{background:var(--navy-d)}
  body.home .darkband .kicker{color:var(--leaf)}
  body.home .darkband h2{color:#fff}
  body.home .dots{position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle, rgba(255,255,255,.11) 1.3px, transparent 1.3px);background-size:28px 28px;
    -webkit-mask-image:radial-gradient(ellipse 80% 72% at 50% 45%, #000 32%, transparent 84%);
    mask-image:radial-gradient(ellipse 80% 72% at 50% 45%, #000 32%, transparent 84%)}
  body.home .sec-head{max-width:760px;margin-bottom:64px}
  body.home .sec-head h2{font-size:clamp(1.9rem,3vw,2.5rem);margin:0}
  body.home .sec-head .after{margin-top:20px;font-size:1.06rem;line-height:1.6;max-width:38em}
  body.home .lightband .sec-head .after{color:var(--grey)}
  body.home .darkband .sec-head .after{color:var(--soft)}
  body.home .darkband .sec-head .after b{color:#fff}

  /* the three forces — ruled columns on deep navy */
  body.home .forces{display:grid;grid-template-columns:repeat(3,1fr)}
  body.home .force{padding:0 40px}
  body.home .force:first-child{padding-left:0}
  body.home .force:last-child{padding-right:0}
  body.home .force+.force{border-left:1px solid var(--hair)}
  body.home .ftag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(184,204,228,.55);margin-bottom:10px}
  body.home .force h3{font-size:1.1rem;color:#fff;font-weight:700;margin-bottom:22px}
  body.home .fnum{font-size:clamp(3rem,4.8vw,4.4rem);font-weight:300;line-height:1;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
  body.home .fnum sup{font-size:.38em;font-weight:400;color:var(--leaf);vertical-align:.9em;margin-left:2px}
  body.home .fwhat{margin-top:12px;font-size:15px;line-height:1.55;color:var(--soft)}
  body.home .fquote{margin-top:14px;font-size:14.5px;font-style:italic;color:rgba(184,204,228,.75)}
  body.home .resolve{margin-top:60px;display:flex;gap:14px;align-items:center;justify-content:center;text-align:center;flex-wrap:wrap;
    background:rgba(132,199,120,.08);border:1px solid rgba(132,199,120,.26);border-radius:12px;padding:20px 28px;
    font-size:1.08rem;color:#fff}
  body.home .resolve .tick{color:var(--leaf);font-weight:700;flex:none}
  body.home .resolve b{color:var(--leaf);font-weight:700}

  /* closing CTA */
  body.home .cta-band{text-align:center}
  body.home .cta-band h2{font-size:clamp(1.8rem,2.8vw,2.3rem);margin-bottom:14px}
  body.home .cta-band p{font-size:1.05rem;margin-bottom:30px}
  /* the row is .cta-band .btns, NOT .cta .btns, so site.css's shared button-row
     rule never reaches it — without this the button and the .tlink sit an HTML
     space apart. 26px matches body.home .hero-btns: a text link needs more air
     than a button pair, since it has no padding of its own to separate them. */
  body.home .cta-band .btns{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
  body.home .darkband.cta-band p{color:var(--soft)}
  body.home .lightband.cta-band p{color:var(--grey)}

  /* way-forward cards: 16px keeps every card description to two lines.
     text-wrap balance/pretty both push the longest one onto a third. */
  body.home .wwo-card>div:last-child{font-size:16px!important;line-height:1.5}

  @media(max-width:960px){
    body.home .hero{padding:64px 0 56px}
    body.home .hero-inner{grid-template-columns:1fr;gap:44px}
    body.home .lightband,body.home .darkband{padding:72px 0}
    body.home .sec-head{margin-bottom:48px}
    body.home .forces{grid-template-columns:1fr}
    body.home .force{padding:0}
    body.home .force+.force{border-left:0;border-top:1px solid var(--hair);margin-top:36px;padding-top:36px}
  }
  @media(max-width:600px){
    body.home .hero h1{font-size:2.2rem}
  }
  @media(prefers-reduced-motion:reduce){
    body.home .aur1,body.home .aur2,body.home .aur3,
    body.home .hero-bg .tw,body.home .hero-bg .tw2,
    body.home .m95,body.home .m5,body.home .rise{animation:none}
    body.home *{transition:none!important}
  }

  /* ==========================================================
     AI AGENTS & TOOLS (agent-suites.html).
     Three product families share one page, so each gets its own
     ground AND its own object language — same ground twice would
     read as one continuous list:
       01 Agent Suites — white; one big card + quiet "soon" cards
       02 AI BOTs      — deep navy; glass tiles, icon on top
       03 MCP servers  — paper; horizontal connector rows
     Scoped to body.agents so no other page shifts.
     ========================================================== */

  /* family header — the numeral is the separator that survives scrolling */
  body.agents .fam{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}
  body.agents .fam .n{font-size:.7rem;font-weight:900;letter-spacing:.1em;color:var(--evergreen);border:1px solid rgba(0,157,72,.34);border-radius:20px;padding:3px 10px;line-height:1.5}
  body.agents .fam .k{font-size:.78rem;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--evergreen)}

  /* first band: paper ground so the page has a top under the white nav,
     and so the white Finance card reads as a card rather than as the page */
  body.agents .ag-top{background:linear-gradient(180deg,#E9EFF7,#F7F9FC);padding-top:64px}

  /* 01 — the one live suite, deliberately the biggest object on the page */
  body.agents .suite{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:20px;padding:38px 40px 36px;box-shadow:0 26px 58px -30px rgba(20,55,125,.42)}
  body.agents .suite:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--evergreen),var(--leaf))}
  body.agents .suite:after{content:"";position:absolute;top:-140px;right:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(132,199,120,.18),transparent 66%);pointer-events:none}
  body.agents .suite-in{position:relative;z-index:1;display:grid;grid-template-columns:.84fr 1.16fr;gap:46px;align-items:start}
  body.agents .suite h3{font-size:1.8rem;letter-spacing:-.01em;margin:14px 0 12px}
  body.agents .suite .lead{color:var(--grey);font-size:1rem;margin-bottom:24px}
  body.agents .suite-cta{display:flex;flex-direction:column;gap:12px;max-width:290px}
  body.agents .suite-foot{display:flex;align-items:flex-start;gap:9px;margin-top:20px;font-size:.85rem;color:var(--grey);line-height:1.45}
  body.agents .suite-foot svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--evergreen);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  body.agents .a-head{font-size:.72rem;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--grey);margin-bottom:14px}
  body.agents .a-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  body.agents .atile{display:flex;gap:13px;align-items:flex-start;background:#FBFCFE;border:1px solid var(--line);border-radius:12px;padding:14px 15px;transition:background .18s,border-color .18s}
  body.agents .atile:hover{border-color:#B6DFB8;background:#F5FBF7}
  body.agents .aic{flex:none;width:36px;height:36px;border-radius:9px;background:var(--tint);display:flex;align-items:center;justify-content:center}
  body.agents .aic svg{width:19px;height:19px;fill:none;stroke:var(--evergreen);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  body.agents .atile b{display:block;font-size:.92rem;color:var(--navy);line-height:1.3;margin-bottom:2px}
  /* .d, not a bare span — a `.atile span` selector also matches .aic and
     out-specifies its display:flex, which pins every glyph to the tile's corner */
  body.agents .atile .d{display:block;font-size:.82rem;color:var(--grey);line-height:1.4}

  /* 01 — the not-yet suites: dashed and small, so "soon" is legible at a glance */
  body.agents .soon-head{margin:46px 0 16px}
  body.agents .soon{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  body.agents .scard{background:#fff;border:1px dashed #D2D9E3;border-radius:12px;padding:18px 20px}
  body.agents .scard h4{font-size:1.02rem;font-weight:700;color:var(--navy);margin-bottom:5px}
  body.agents .scard p{font-size:.86rem;color:var(--grey);line-height:1.45}
  body.agents .scard.invite{border-style:solid;border-color:#B6DFB8;background:#F5FBF7}
  body.agents .scard .slink{display:inline-block;margin-top:10px;font-size:.85rem;font-weight:700;color:var(--evergreen)}
  body.agents .scard .slink:hover{color:var(--navy)}
  body.agents .pill{display:inline-block;font-size:.63rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:20px;margin-bottom:11px;background:#EDF1F6;color:#79818B}
  body.agents .pill.go{background:var(--tint);color:var(--evergreen)}

  /* 02 — AI BOTs on deep navy: the hard break from the suites above */
  body.agents .botband{position:relative;overflow:hidden;background:var(--navy-d);padding:82px 0}
  body.agents .botband .container{position:relative;z-index:1}
  body.agents .agdots{position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(circle,rgba(255,255,255,.10) 1.3px,transparent 1.3px);background-size:28px 28px;
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 42%,#000 30%,transparent 82%);
    mask-image:radial-gradient(ellipse 80% 70% at 50% 42%,#000 30%,transparent 82%)}
  body.agents .botband h2{color:#fff}
  body.agents .botband .center .sub{color:var(--soft)}
  body.agents .botband .fam .k{color:var(--leaf)}
  body.agents .botband .fam .n{color:var(--leaf);border-color:rgba(132,199,120,.42)}
  body.agents .bots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  body.agents .bot{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:22px;transition:transform .18s,background .18s,border-color .18s}
  body.agents .bot:hover{background:rgba(255,255,255,.09);border-color:rgba(132,199,120,.5);transform:translateY(-3px)}
  body.agents .bic{width:42px;height:42px;border-radius:11px;background:rgba(132,199,120,.14);border:1px solid rgba(132,199,120,.3);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
  body.agents .bic svg{width:21px;height:21px;fill:none;stroke:var(--leaf);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  body.agents .bot b{display:block;font-size:1.02rem;color:#fff;margin-bottom:6px}
  body.agents .bot .d{display:block;font-size:.88rem;color:var(--soft);line-height:1.5}
  body.agents .botnote{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px;padding:16px 24px;
    background:rgba(132,199,120,.08);border:1px solid rgba(132,199,120,.26);border-radius:12px;color:#fff;font-size:.95rem;text-align:center}
  body.agents .botnote .tick{color:var(--leaf);font-weight:900;flex:none}
  body.agents .botband .actions .btn-ghost-navy{color:#fff;border-color:rgba(255,255,255,.42)}
  body.agents .botband .actions .btn-ghost-navy:hover{border-color:#fff;background:rgba(255,255,255,.08)}

  /* 03 — MCP servers: a directory, not cards. Horizontal rows read as a list of systems. */
  body.agents .mcpband{background:var(--bg);padding:82px 0}
  body.agents .conns{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:900px;margin:0 auto}
  body.agents .conn{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px 16px}
  body.agents .cnic{flex:none;width:40px;height:40px;border-radius:10px;background:#EDF2F8;display:flex;align-items:center;justify-content:center}
  body.agents .cnic svg{width:20px;height:20px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  body.agents .conn b{flex:1;font-size:.97rem;color:var(--navy)}
  body.agents .conn.live{border-color:#B6DFB8}
  body.agents .conn.live .cnic{background:var(--tint)}
  body.agents .conn.live .cnic svg{stroke:var(--evergreen)}
  body.agents .st{flex:none;font-size:.64rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:4px 10px;border-radius:20px;background:#EDF1F6;color:#79818B}
  body.agents .st.on{background:var(--tint);color:var(--evergreen)}
  body.agents .guard{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-top:26px;font-size:.89rem;color:var(--grey)}
  body.agents .guard span i{font-style:normal;color:var(--evergreen);font-weight:900;margin-right:7px}

  @media(max-width:960px){
    body.agents .suite{padding:28px 24px}
    body.agents .suite-in{grid-template-columns:1fr;gap:30px}
    /* one column: side-by-side keeps the buttons from spanning the whole card */
    body.agents .suite-cta{flex-direction:row;flex-wrap:wrap;max-width:none}
    body.agents .soon{grid-template-columns:1fr}
    body.agents .bots{grid-template-columns:1fr 1fr}
  }
  @media(max-width:680px){
    body.agents .a-grid{grid-template-columns:1fr}
    body.agents .bots,body.agents .conns{grid-template-columns:1fr}
    body.agents .suite-cta{flex-direction:column}
    body.agents .suite h3{font-size:1.45rem}
  }
  @media(prefers-reduced-motion:reduce){
    body.agents *{transition:none!important}
  }