:root {
    --navy:#082868; --navy-2:#002C86; --blue:#3143A7;
    --teal:#08594A; --teal-2:#37A686; --orange:#F55E31; --gold:#FDCE3E;
    --ink:#0f1b33; --ink-soft:#4a5670; --paper:#ffffff; --paper-2:#f4f6fb;
    --card:#ffffff; --line:#e2e7f1; --danger:#c0442a;
    --radius:0; --maxw:1120px;
    --sans:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --shadow:0 1px 2px rgba(8,40,104,.05), 0 10px 30px rgba(8,40,104,.08);
  }
  @media (prefers-color-scheme: dark){ :root{
    --navy:#6b9bff; --navy-2:#4d82f0; --blue:#7d8cf0; --teal:#4fbf9f; --teal-2:#37a686;
    --ink:#eaf0fb; --ink-soft:#a7b2cc; --paper:#0a1020; --paper-2:#0e1526; --card:#121a2e; --line:#212c45; --danger:#ff8566;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5); } }
  :root[data-theme="dark"]{ --navy:#6b9bff; --navy-2:#4d82f0; --blue:#7d8cf0; --teal:#4fbf9f; --teal-2:#37a686;
    --ink:#eaf0fb; --ink-soft:#a7b2cc; --paper:#0a1020; --paper-2:#0e1526; --card:#121a2e; --line:#212c45; --danger:#ff8566;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5); }
  :root[data-theme="light"]{ --navy:#082868; --navy-2:#002C86; --blue:#3143A7; --teal:#08594A; --teal-2:#37A686;
    --ink:#0f1b33; --ink-soft:#4a5670; --paper:#ffffff; --paper-2:#f4f6fb; --card:#ffffff; --line:#e2e7f1; --danger:#c0442a;
    --shadow:0 1px 2px rgba(8,40,104,.05), 0 10px 30px rgba(8,40,104,.08); }

  * { box-sizing:border-box; }
  .rw { font-family:var(--sans); color:var(--ink); background:var(--paper); margin:0; line-height:1.55; -webkit-font-smoothing:antialiased; }
  .rw section { padding:72px 24px; }
  .wrap { max-width:var(--maxw); margin:0 auto; }
  .rw h1,.rw h2,.rw h3 { line-height:1.12; letter-spacing:-.02em; margin:0; text-wrap:balance; }
  .eyebrow { font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-2); margin:0 0 14px; }
  .h2 { font-size:clamp(26px,3.6vw,38px); font-weight:800; }
  .lead { color:var(--ink-soft); font-size:17px; margin-top:14px; }
  .center { text-align:center; max-width:48ch; margin:0 auto; }
  /* keep the header-to-body gap on centered leads: .center's margin:0 auto would
     otherwise zero the .lead top margin (Proof + Build-vs-Buy), matching "Why Reportworq exists". */
  .lead.center { margin-top:14px; }
  .cta { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; padding:14px 26px; border-radius:0; text-decoration:none; cursor:pointer; border:0; }
  .cta-primary { background:var(--orange); color:#fff; box-shadow:0 6px 18px rgba(245,94,49,.35); }
  .cta-onnavy { background:#fff; color:var(--navy); }
  .arrow { color:var(--teal-2); font-weight:800; align-self:center; }

  .nav { display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:20px 24px; }
  .logo { display:flex; align-items:center; }
  .brandlogo svg { height:30px; width:auto; display:block; }
  @media (prefers-color-scheme: dark){ .brandlogo .st1{ fill:#eaf0fb; } }
  :root[data-theme="dark"] .brandlogo .st1{ fill:#eaf0fb; }
  :root[data-theme="light"] .brandlogo .st1{ fill:#262626; }
  .navlinks { display:flex; gap:26px; align-items:center; }
  .navtoggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; margin-left:auto; border:0; background:transparent; color:var(--ink); cursor:pointer; }
  .navtoggle svg { width:26px; height:26px; }
  @media (max-width:820px){
    .nav { position:relative; flex-wrap:wrap; }
    .nav .navtoggle { display:inline-flex; }
    .nav .navlinks { display:none; position:absolute; top:100%; left:0; right:0; z-index:60; flex-direction:column; align-items:stretch; gap:0; background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:var(--shadow); padding:6px 0; }
    .nav .navlinks.open { display:flex; }
    .nav .navlinks > a:not(.cta) { padding:13px 24px; font-size:16px; }
    .nav .navlinks .dropdown { position:static; }
    .nav .navlinks .dropdown > a { display:block; padding:13px 24px; font-size:16px; }
    .nav .navlinks .dropdown > a::after { content:""; }
    .nav .dropdown-menu { display:block; position:static; margin:0; padding:0 0 6px; border:0; box-shadow:none; min-width:0; background:transparent; }
    .nav .dropdown-menu a { padding:10px 24px 10px 40px; font-size:14.5px; }
    .nav .navsearch { display:none; }
    .nav .navlinks .cta { display:flex; margin:12px 24px; justify-content:center; }
  }
  .navlinks a { color:var(--ink-soft); text-decoration:none; font-size:14.5px; font-weight:600; }
  .navlinks a.cta-primary { color:#fff; box-shadow:none; }
  .navsearch { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:0; background:transparent; color:var(--ink-soft); cursor:pointer; }
  .navsearch svg { width:18px; height:18px; }
  .navlinks .dropdown { position:relative; }
  .navlinks .dropdown > a::after { content:" \25BE"; font-size:10px; }
  .dropdown-menu { display:none; position:absolute; top:100%; left:0; margin-top:0; background:var(--card); border:1px solid var(--line); min-width:170px; box-shadow:var(--shadow); padding:6px 0; z-index:20; }
  .navlinks .dropdown:hover .dropdown-menu, .navlinks .dropdown:focus-within .dropdown-menu { display:block; }
  .dropdown-menu a { display:block; padding:9px 16px; color:var(--ink-soft); font-size:14px; font-weight:600; text-decoration:none; margin:0; }
  .dropdown-menu a:hover { background:var(--paper-2); color:var(--navy); }

  .hero { background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); text-align:left; padding:96px 24px; position:relative; overflow:hidden; }
  .hero .wrap { max-width:var(--maxw); margin:0 auto; }
  .hero .eyebrow, .hero h1, .hero .sub, .hero .herocta { max-width:760px; }
  .hero .eyebrow { color:var(--orange); }
  .hero h1 { font-size:clamp(34px,5vw,54px); font-weight:800; color:#fff; max-width:16ch; margin:0; }
  .hero h1 .accent { color:var(--teal-2); font-style:italic; }
  .hero .sub { font-size:18px; color:rgba(255,255,255,.82); max-width:56ch; margin:24px 0 32px; }
  .hero .herocta { display:flex; gap:14px; flex-wrap:wrap; }
  .cta-onnavy-outline { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
  .chips { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
  .chips .vchip { font-size:13px; font-weight:800; letter-spacing:.02em; color:var(--navy); background:color-mix(in srgb,var(--navy) 8%,var(--card)); border:1px solid color-mix(in srgb,var(--navy) 22%,var(--line)); border-radius:0; padding:8px 16px; }
  .workswith { margin-top:44px; text-align:center; }
  .workswith .cap { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
  .logorow { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px auto 0; max-width:780px; }
  .logorow span { font-size:13px; font-weight:700; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:0; padding:8px 12px; box-shadow:var(--shadow); }
  .logorow span.more { background:var(--navy); color:#fff; border-color:var(--navy); }

  .time { background:var(--paper-2); text-align:center; }
  .chain { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:36px 0 28px; }
  .chain .node { background:var(--card); border:1px solid var(--line); border-radius:0; padding:16px 22px; font-size:16.5px; font-weight:700; box-shadow:var(--shadow); }
  .chain .node.end { background:var(--navy); color:#fff; border-color:var(--navy); }
  @media (max-width:560px){
    .time .chain { gap:6px 6px; }
    .time .chain .node { padding:9px 12px; font-size:12.5px; box-shadow:none; }
    .time .chain .arrow { font-size:14px; }
  }
  .painwrap { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; max-width:60ch; margin:0 auto; }
  .painwrap span { font-size:13px; color:var(--danger); background:color-mix(in srgb,var(--danger) 9%,var(--card)); border:1px solid color-mix(in srgb,var(--danger) 26%,var(--line)); border-radius:0; padding:6px 13px; font-weight:600; }
  .closeline { margin-top:26px; font-size:18px; font-weight:800; color:var(--navy); letter-spacing:-.01em; }

  .layer { text-align:center; }
  .flow3 { display:flex; gap:14px; justify-content:center; align-items:stretch; flex-wrap:wrap; margin:36px 0 22px; }
  .flow3 .box { flex:1; min-width:200px; max-width:300px; background:var(--card); border:1px solid var(--line); border-radius:0; padding:22px; box-shadow:var(--shadow); font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center; }
  .flow3 .box.core { background:var(--navy); color:#fff; border-color:var(--navy); font-size:20px; }

  .caps { background:var(--paper-2); }
  .cap-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px; }
  @media (max-width:780px){ .cap-grid{ grid-template-columns:1fr; } }
  .cap-card { background:var(--card); border:1px solid var(--line); border-radius:0; padding:26px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
  .cap-card::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--accent); }
  .cap-card .v { font-size:21px; font-weight:800; letter-spacing:-.01em; color:var(--accent); }
  .cap-card h3 { font-size:15px; font-weight:700; margin:6px 0 10px; color:var(--ink); }
  .cap-card p { color:var(--ink-soft); font-size:15px; margin:0; }
  .capwheel { position:relative; display:inline-block; line-height:0; width:100%; max-width:520px; }
  .capwheel img { width:100%; height:auto; display:block; }
  /* Build-vs-Buy native comparison table (obs. 10) */
  .compare-desktop { overflow-x:auto; }
  .bvb-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:14.5px; min-width:640px; }
  .bvb-table th, .bvb-table td { text-align:left; padding:14px 18px; vertical-align:top; border-bottom:1px solid var(--line); }
  .bvb-table thead th { color:#fff; font-weight:800; font-size:15px; }
  .bvb-table thead th span { display:block; font-size:12.5px; font-weight:600; opacity:.85; margin-top:3px; }
  .bvb-table thead th.diy { background:var(--ink); }
  .bvb-table thead th.rw { background:var(--teal); }
  .bvb-table thead th:first-child { background:transparent; border-bottom:0; }
  .bvb-table tbody th { font-weight:700; color:var(--ink); width:20%; }
  .bvb-table tbody td { color:var(--ink-soft); }
  .bvb-table tbody td:last-child { color:var(--ink); font-weight:600; }
  .bvb-table tbody tr:nth-child(even) th, .bvb-table tbody tr:nth-child(even) td { background:color-mix(in srgb, var(--teal) 5%, var(--card)); }
  /* Platform: wheel left, tabbed capabilities right (obs. v2) */
  .platform-split { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; margin-top:40px; }
  .platform-split .platform-wheel { display:flex; justify-content:center; }
  .platform-split .capwheel { width:100%; max-width:440px; }
  .tabrow { display:flex; flex-wrap:wrap; gap:6px 8px; border-bottom:1px solid var(--line); }
  .tab { appearance:none; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; padding:10px 6px; font:inherit; font-weight:700; font-size:15px; color:var(--ink-soft); cursor:pointer; }
  .tab:hover { color:var(--ink); }
  .tab.is-active { color:var(--accent); border-bottom-color:var(--accent); }
  .tabpanels { margin-top:24px; display:grid; }
  .tabpanel { grid-area:1 / 1; }                          /* stack all panels in one cell */
  .tabpanel[hidden] { display:block; visibility:hidden; } /* keep occupying space so the tabs never shift */
  .tabpanel h3 { font-size:clamp(20px,2.4vw,26px); font-weight:800; color:var(--ink); margin:0 0 12px; letter-spacing:-.01em; }
  .tabpanel p { color:var(--ink-soft); font-size:16px; line-height:1.6; margin:0 0 20px; max-width:48ch; }
  .tabpanel .learnmore { display:inline-block; color:var(--accent); font-weight:800; font-size:15px; text-decoration:none; }
  .tabpanel .learnmore:hover { text-decoration:underline; }
  @media (max-width:900px){ .platform-split { grid-template-columns:1fr; gap:28px; } .platform-split .platform-wheel { order:-1; } .platform-split .capwheel { max-width:360px; } }
  .capwheel .q { position:absolute; width:50%; height:50%; display:block; background:none; border:0; padding:0; cursor:pointer; }
  .capwheel .q.q-int { top:0; left:0; } .capwheel .q.q-dist { top:0; right:0; }
  .capwheel .q.q-ai { bottom:0; left:0; } .capwheel .q.q-con { bottom:0; right:0; }
  /* Customer logo marquee (obs. 8) — continuous A-Z scroll, pauses on hover */
  .logo-marquee { overflow:hidden; margin-top:34px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
  .logo-track { display:flex; align-items:center; gap:34px; width:max-content; animation:logoscroll 55s linear infinite; }
  .logo-marquee:hover .logo-track { animation-play-state:paused; }
  .logo-track img { width:150px; height:52px; object-fit:contain; flex:none; }
  @keyframes logoscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){ .logo-track { animation:none; flex-wrap:wrap; justify-content:center; width:auto; } }
  /* TCO native animated chart (obs. 9) — draws in on scroll */
  .tco-chart { background:var(--card); border:1px solid var(--line); padding:22px 20px 12px; margin-top:8px; }
  .tco-title { text-align:center; font-weight:800; font-size:17px; color:var(--ink); letter-spacing:-.01em; }
  .tco-legend { display:flex; gap:24px; justify-content:center; margin:8px 0 2px; font-size:13px; font-weight:700; color:var(--ink-soft); }
  .tco-legend .lg::before { content:""; display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:7px; vertical-align:middle; }
  .tco-legend .lg-build::before { background:var(--orange); }
  .tco-legend .lg-rw::before { background:var(--teal); }
  .tco-svg { width:100%; height:auto; display:block; }
  .tco-svg .grid { stroke:var(--line); stroke-width:1; }
  .tco-svg .axis { stroke:var(--ink-soft); stroke-width:1.25; opacity:.5; }
  .tco-svg text { fill:var(--ink-soft); font-size:13px; font-weight:600; }
  .tco-svg .area { fill:var(--teal); opacity:0; transition:opacity 1.1s ease .35s; }
  .tco-svg .line { fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 1.5s ease; }
  .tco-svg .line-build { stroke:var(--orange); }
  .tco-svg .line-rw { stroke:var(--teal); }
  .tco-svg .dot-build circle { fill:var(--orange); }
  .tco-svg .dot-rw circle { fill:var(--teal); }
  .tco-svg .dot circle { opacity:0; transition:opacity .5s ease; }
  .tco-chart.in-view .area { opacity:.16; }
  .tco-chart.in-view .line { stroke-dashoffset:0; }
  .tco-chart.in-view .dot circle { opacity:1; transition-delay:1.05s; }
  @media (prefers-reduced-motion:reduce){ .tco-svg .area{opacity:.16;} .tco-svg .line{stroke-dashoffset:0;} .tco-svg .dot circle{opacity:1;} }
  .c-prep{--accent:var(--orange);} .c-del{--accent:var(--teal);} .c-col{--accent:var(--navy);} .c-ai{--accent:var(--teal-2);}

  .aisec { background:var(--navy); color:#fff; }
  .aisec .eyebrow{ color:var(--teal-2); } .aisec h2{ color:#fff; }
  .vs { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px; }
  @media (max-width:780px){ .vs{ grid-template-columns:1fr; } }
  .vs .col { border-radius:0; padding:24px; }
  .vs .bad { background:rgba(255,255,255,.06); border:1px solid rgba(255,120,90,.4); }
  .vs .good { background:rgba(55,166,134,.16); border:1px solid rgba(79,191,159,.5); }
  .vs h4 { margin:0 0 14px; font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
  .vs .bad h4{ color:#ff8566; } .vs .good h4{ color:#8ee0c6; }
  .vs .src { display:flex; flex-direction:column; gap:7px; }
  .vs .src span { font-size:13.5px; background:rgba(255,255,255,.07); border-radius:0; padding:8px 11px; }
  .vs .out { margin-top:14px; font-weight:800; }
  .vs .bad .out{ color:#ff8566; } .vs .good .out{ color:#8ee0c6; }
  .aisec .closeline { color:#fff; margin-top:32px; text-align:center; font-size:18px; }
  .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; }
  .cmp-wrap { overflow-x:auto; max-width:900px; margin:34px auto 0; }
  .cmp-table { width:100%; min-width:480px; border-collapse:collapse; }
  .cmp-table th, .cmp-table td { text-align:left; padding:10px 16px; vertical-align:top; font-size:13.5px; }
  .cmp-table th:first-child, .cmp-table td:first-child { width:84px; padding-right:4px; } /* narrow row-label column so SOURCES/OUTCOME hug the data */
  .cmp-table thead th { font-size:13px; letter-spacing:.12em; text-transform:uppercase; padding-bottom:12px; }
  .cmp-table thead th.bad { color:#ff8566; } .cmp-table thead th.good { color:#8ee0c6; }
  .cmp-table tbody th { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:700; white-space:nowrap; }
  .cmp-table tbody td.bad { background:rgba(255,255,255,.06); border:1px solid rgba(255,120,90,.4); }
  .cmp-table tbody td.good { background:rgba(55,166,134,.16); border:1px solid rgba(79,191,159,.5); }
  .cmp-table tbody tr.out td { font-weight:800; background:transparent; border:0; padding-top:10px; }
  .cmp-table tbody tr.out td.bad { color:#ff8566; } .cmp-table tbody tr.out td.good { color:#8ee0c6; }
  .cmp-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
  .vs-sub { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.5); font-weight:700; margin:16px 0 6px; }
  .vs .col h4 { margin-bottom:0; }
  .cmp-mobile { display:none; }
  @media (max-width:600px){ .aisec .cmp-desktop { display:none; } .aisec .cmp-mobile { display:grid; margin-top:30px; } }

  .build { text-align:center; }
  .reqs { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; max-width:56ch; margin:26px auto 0; }
  .reqs span { font-size:13px; font-weight:700; color:var(--ink); background:var(--paper-2); border:1px solid var(--line); border-radius:0; padding:8px 13px; }
  /* Build-vs-buy: TCO chart + comparison table (from the Build vs. Buy collateral) */
  .tco { margin:32px auto 4px; max-width:640px; }
  .tco svg { width:100%; height:auto; display:block; }
  .tco-legend { display:flex; gap:24px; justify-content:center; margin-bottom:8px; }
  .tco-legend .lg { font-size:13px; font-weight:700; color:var(--ink-soft); display:inline-flex; align-items:center; gap:7px; }
  .tco-legend .lg::before { content:""; width:11px; height:11px; border-radius:50%; }
  .tco-legend .lg-build::before { background:var(--orange); }
  .tco-legend .lg-rw::before { background:var(--teal); } /* match the darker-green Reportworq line (was --teal-2, lighter) */
  .tco-axis { stroke:var(--line); stroke-width:1.5; }
  .tco-area { fill:#EBE9E3; opacity:1; }
  .tco-build { fill:none; stroke:var(--orange); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
  .tco-rw { fill:none; stroke:var(--teal-2); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
  .tco-x line { stroke:var(--ink); stroke-width:2.5; stroke-linecap:round; }
  .dot-build { fill:var(--orange); } .dot-rw { fill:var(--teal-2); }
  .tco-ylab, .tco-xlab { fill:var(--ink-soft); font-weight:700; font-family:var(--sans); text-anchor:middle; }
  .tco-ylab { font-size:17px; }
  .tco-xlab { font-size:15px; }
  .tco figcaption { margin-top:12px; font-size:12.5px; color:var(--ink-soft); }
  .compare { margin:34px auto 0; max-width:840px; overflow-x:auto; }
  .compare table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; min-width:560px; }
  .compare thead th { padding:15px 18px; vertical-align:top; font-weight:800; color:#fff; }
  .compare thead th span { display:block; font-size:12px; font-weight:600; opacity:.85; margin-top:3px; }
  .compare thead th.c-feat { background:transparent; }
  .compare thead th.c-diy { background:var(--ink); }
  .compare thead th.c-rw { background:var(--teal); }
  .compare tbody th { text-align:left; font-weight:700; color:var(--ink); padding:13px 18px; vertical-align:top; background:var(--paper-2); width:20%; white-space:nowrap; }
  .compare tbody td { padding:13px 18px; vertical-align:top; color:var(--ink-soft); border-bottom:1px solid var(--line); width:40%; }
  .compare tbody td.c-rw { color:var(--ink); font-weight:600; }
  .compare-mobile { display:none; }
  .compare-mobile .cmp-card { border:1px solid var(--line); margin-top:16px; box-shadow:var(--shadow); }
  .compare-mobile .cmp-card h4 { margin:0; padding:14px 18px; color:#fff; font-size:15px; font-weight:800; }
  .compare-mobile .cmp-card h4 span { display:block; font-size:12px; font-weight:600; opacity:.85; margin-top:3px; }
  .compare-mobile .cmp-card.diy h4 { background:var(--ink); }
  .compare-mobile .cmp-card.rw h4 { background:var(--teal); }
  .compare-mobile dl { margin:0; padding:4px 18px 16px; }
  .compare-mobile dt { font-weight:700; color:var(--ink); font-size:13.5px; margin-top:14px; }
  .compare-mobile dd { margin:3px 0 0; color:var(--ink-soft); font-size:14px; }
  @media (max-width:600px){ .build .compare-desktop { display:none; } .build .compare-mobile { display:block; } }

  .stories { background:var(--paper-2); }
  .story-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:38px; }
  @media (max-width:900px){ .story-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .story-grid{ grid-template-columns:1fr; } }
  .story { background:var(--card); border:1px solid var(--line); border-radius:0; padding:26px; box-shadow:var(--shadow); border-top:4px solid var(--teal-2); }
  .story .who { font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--teal-2); }
  .story .out { font-size:19px; font-weight:800; margin-top:10px; letter-spacing:-.01em; }

  .eco { text-align:center; }
  .eco-grid { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:34px 0 22px; }
  .eco-grid div { background:var(--card); border:1px solid var(--line); border-radius:0; padding:18px 24px; font-weight:800; color:var(--navy); box-shadow:var(--shadow); }

  .tech { background:var(--navy-2); color:#fff; }
  .tech .eyebrow{ color:var(--teal-2); } .tech h2{ color:#fff; font-size:clamp(22px,3vw,30px); }
  .tech .lead{ color:rgba(255,255,255,.8); }
  .specs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
  .specs span { font-size:12.5px; font-weight:700; font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; color:#cdd9ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:0; padding:6px 11px; }

  .final { background:linear-gradient(135deg, var(--navy), var(--navy-2)); color:#fff; text-align:center; }
  .final h2 { color:#fff; font-size:clamp(24px,3.4vw,34px); font-weight:800; }
  .final p { color:rgba(255,255,255,.82); margin:14px auto 26px; max-width:42ch; }

  .midcta { text-align:center; padding-top:0; }
  .band { background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:#fff; text-align:center; padding:40px 24px; }
  .band .line { font-size:clamp(21px,3.2vw,30px); font-weight:800; letter-spacing:-.01em; max-width:24ch; margin:0 auto; line-height:1.2; }
  .band .line b { color:var(--teal-2); }
  .know .scatter, .know .becomes { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
  .know .scatter span { font-size:13px; font-weight:700; color:var(--ink-soft); background:var(--card); border:1px solid var(--line); border-radius:0; padding:8px 12px; box-shadow:var(--shadow); }
  .know .lead2 { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:28px; }
  .know .becomes span { font-size:13.5px; font-weight:800; color:#fff; background:var(--teal-2); border-radius:0; padding:8px 16px; }
  .know .closeline { max-width:36ch; margin-left:auto; margin-right:auto; }
  /* Widen this section so the H2's first line ("Finance creates knowledge.") fits on
     one line instead of wrapping; the <br> still forces the intended two-line break. */
  .know .center { max-width:680px; }
  .notrepl { display:flex; flex-direction:column; gap:5px; margin:22px 0 8px; font-size:clamp(18px,2.6vw,24px); font-weight:800; color:var(--ink-soft); }
  .notrepl .yes { color:var(--teal-2); font-size:clamp(22px,3vw,30px); margin-top:6px; }
  .foot { padding:30px 24px; text-align:center; color:var(--ink-soft); font-size:12.5px; border-top:1px solid var(--line); }
  .note { max-width:var(--maxw); margin:0 auto; padding:14px 24px 0; }
  .note div { background:color-mix(in srgb, var(--gold) 14%, var(--paper)); border:1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius:0; padding:12px 16px; font-size:12.5px; color:var(--ink); }

  .faq { }
  .faq details { background:var(--card); border:1px solid var(--line); margin-bottom:10px; padding:4px 18px; }
  .faq summary { cursor:pointer; font-weight:700; font-size:15px; padding:14px 0; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; font-size:20px; color:var(--teal-2); font-weight:400; }
  .faq details[open] summary::after { content:"\2212"; }
  .faq p { color:var(--ink-soft); font-size:14.5px; margin:0 0 16px; }

  .footer { background:var(--paper-2); border-top:1px solid var(--line); padding:48px 24px 24px; }
  .footer .cols { display:grid; grid-template-columns:repeat(5,1fr); gap:24px; max-width:1120px; margin:0 auto; }
  @media (max-width:860px){ .footer .cols{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:480px){ .footer .cols{ grid-template-columns:1fr; } }
  .footer h4 { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin:0 0 12px; }
  .footer a { display:block; color:var(--ink); text-decoration:none; font-size:14px; margin-bottom:8px; }
  .footer .newsletter { display:flex; gap:0; margin:36px auto 0; max-width:420px; border:1px solid var(--line); }
  .footer .newsletter input { flex:1; border:0; padding:12px 14px; font-size:14px; background:var(--card); color:var(--ink); }
  .footer .newsletter button { border:0; background:var(--teal); color:#fff; padding:12px 18px; font-weight:700; font-size:13.5px; }
  .footer .bottom { display:flex; justify-content:space-between; align-items:center; max-width:1120px; margin:36px auto 0; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-soft); flex-wrap:wrap; gap:10px; }

  .shot { }
  .shot .frame { border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; background:var(--card); }
  .shot img { display:block; width:100%; height:auto; }
  .shot .caption { margin-top:12px; font-size:12.5px; color:var(--ink-soft); text-align:center; }

  .logo .logo-dark{display:none}
  @media (prefers-color-scheme:dark){.logo .logo-light{display:none}.logo .logo-dark{display:block}}
  :root[data-theme="dark"] .logo .logo-light{display:none} :root[data-theme="dark"] .logo .logo-dark{display:block}
  :root[data-theme="light"] .logo .logo-light{display:block} :root[data-theme="light"] .logo .logo-dark{display:none}
  .carousel { max-width:100%; }
  .carousel-viewport { position:relative; overflow:hidden; transition:height .35s ease; }
  .carousel-track { display:flex; transition:transform .35s ease; }
  .carousel-slide { min-width:100%; flex:0 0 100%; }
  .carousel-slide .frame { border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; background:var(--card); }
  .carousel-slide img { display:block; width:100%; height:auto; }
  .carousel-btn { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; border-radius:50%; background:rgba(8,40,104,.55); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; padding:0; }
  .carousel-btn:hover { background:rgba(8,40,104,.82); }
  .carousel-btn.prev { left:12px; } .carousel-btn.next { right:12px; }
  .carousel-dots { display:flex; gap:9px; justify-content:center; margin-top:16px; }
  .carousel-dots .dot { width:10px; height:10px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0; }
  .carousel-dots .dot.active { background:var(--teal-2); }