/* Shared page layout — 13 pages: solvers, engagement, trust, industries, industry-financial-services, industry-healthcare, industry-retail, industry-logistics, industry-manufacturing, industry-public-sector, case-insurer, case-logistics, case-manufacturer
   Extracted verbatim from inline <style>. Order is load-bearing:
   this file's rules are overridden by, and override, neighbours by document
   order alone. Do not reorder the <link> tags that reference it. */

:root{--paper:#faf9f6;--paper-2:#f2f0ea;--ink:#111110;--ink-soft:#3d3c38;--ink-mute:#6f6d66;--line:#dcd9d0;--disp:'Space Mono',ui-monospace,monospace;--body:'Manrope',sans-serif;--mono:'IBM Plex Mono',monospace;--max:1080px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit}
h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-link{display:flex;align-items:baseline;gap:1px;text-decoration:none}

.logo-link .dotai{font-family:var(--disp);font-weight:600;font-size:16px;transform:translateY(-1px)}
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink);border-bottom:1.5px solid var(--ink)}
.nav-cta{border:1.5px solid var(--ink);padding:8px 16px;border-radius:2px;font-weight:600;color:var(--ink)!important}
@media(max-width:960px){.nav-links a:not(.nav-cta){display:none}}
/* Resting state only — hover, active and the transition list are the button
   system in site.css. */
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:2px;border:1.5px solid var(--ink)}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn.ghost{color:var(--ink)}
header{min-height:74svh;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.hero-in{max-width:var(--max);margin:0 auto;padding:140px 24px 70px;width:100%}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:22px}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(34px,5.8vw,64px);line-height:1.05;letter-spacing:-0.024em;max-width:18ch}
.hero-sub{max-width:58ch;margin-top:26px;font-size:clamp(17px,2vw,19.5px);color:var(--ink-soft)}
.hero-sub strong{font-weight:700;color:var(--ink)}
.hero-ctas{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
section{padding:84px 0;border-top:1px solid var(--line)}
.ch-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px;display:flex;align-items:center;gap:12px}
.ch-eyebrow::before{content:"";width:9px;height:9px;background:var(--ink);display:inline-block;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(26px,3.8vw,40px);line-height:1.12;letter-spacing:-0.02em;max-width:26ch;margin-bottom:20px}
.lede{font-size:clamp(16.5px,1.85vw,19px);color:var(--ink-soft);max-width:66ch}
.lede+.lede{margin-top:14px}
.lede strong{color:var(--ink);font-weight:700}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
@media(max-width:820px){.roles{grid-template-columns:1fr}}
.role{border:1.5px solid var(--ink);border-radius:2px;padding:30px 28px;background:var(--paper)}
.role .rk{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:12px}
.role h3{font-family:var(--head);font-weight:600;font-size:clamp(19px,2.2vw,23px);letter-spacing:-0.014em;margin-bottom:10px}
.role p{font-size:15px;color:var(--ink-soft)}
.phases{margin-top:48px;display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.phase{display:grid;grid-template-columns:220px 1fr 190px;border-bottom:1px solid var(--line);background:var(--paper)}
.phase:last-child{border-bottom:none}
@media(max-width:900px){.phase{grid-template-columns:1fr}}
.phase .pn{padding:28px 26px;background:var(--paper-2)}
.phase .pn .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:8px}
.phase .pn h3{font-family:var(--head);font-weight:600;font-size:20px;letter-spacing:-0.014em}
.phase .pn .ev{font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);margin-top:8px;display:block}
.phase .pb{padding:28px 28px}
.phase .pb p{font-size:15px;color:var(--ink-soft);max-width:60ch}
.phase .pb ul{margin-top:12px;list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.phase .pb li{font-family:var(--mono);font-size:12px;letter-spacing:.05em;border:1px solid var(--line);padding:6px 12px;border-radius:2px;color:var(--ink-soft)}
.phase .po{padding:28px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:6px}
@media(max-width:900px){.phase .po{border-left:none;border-top:1px solid var(--line);flex-direction:row;align-items:baseline;gap:14px}}
.phase .po .ov{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-0.02em}
.phase .po .ol{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.pull{font-family:var(--disp);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.3;letter-spacing:-0.015em;border-left:1.5px solid var(--ink);padding-left:22px;margin:40px 0 0;max-width:36ch}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
@media(max-width:980px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid4{grid-template-columns:1fr}}
/* Sibling of .grid4, same gap and same breakpoints, for sets of three or six.
   .grid3 also exists in index.css and both *.late.css; none of those three
   sheets is linked by any page that links this one, so the name cannot collide. */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:980px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid3{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--paper-2);padding:26px 24px;border-radius:2px}
.card .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);display:block;margin-bottom:10px}
.card h3{font-family:var(--head);font-weight:600;font-size:17px;margin-bottom:8px}
.card p{font-size:14px;color:var(--ink-soft)}
/* A card that is a destination — opt in with .dest, never by default.

   Every rule below is scoped to the modifier for one reason: `.card` is used by
   solvers, trust and the six industry pages, and an unqualified
   `.card{position:relative}` reaches all of them. It changes no pixel — a static
   box with no offsets lays out identically once positioned — so it passes a
   screenshot diff and fails the computed-style check, which is where the gate
   caught it. A card only needs a containing block when it actually holds an
   overlay, so the modifier is the honest scope.

   The h3's anchor paints that overlay across the whole plate to make the card
   the target; the paragraph's anchor is raised above it so it stays
   independently clickable. Two anchors, neither nested in the other.
   Hover and keyboard focus are already handled — site.css:55 colours the border
   on :hover and :413 does the same for :focus-within.

   The underline is the treatment site.css:102 gives .lede a and article p a,
   repeated here rather than added to that selector list so it cannot reach a
   page other than the one that opts in. */
.card.dest{position:relative;display:flex;flex-direction:column}
.card.dest h3 a{text-decoration:none}
.card.dest h3 a::after{content:"";position:absolute;inset:0}
/* The action line sits on the floor of the plate, so all six align across a row
   however many lines the sector name and its keyword label take. And it is left
   aligned, not justified: site.css:474 justifies .card p because a card's body
   is prose, but this paragraph is the card's action, and :475 already left-aligns
   every other action in the system (.btn, .chip). Justified, its six words
   stretched to the full measure and read as a broken line rather than a link. */
.card.dest p{margin-top:auto;text-align:left;hyphens:none}
.card.dest p a{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .32s var(--ease);text-decoration:none;font-weight:600;position:relative;z-index:1}
.card.dest p a:hover{background-size:100% 1.5px}
/* Verified record table. Extracted verbatim from index.css:112-119, which is the
   only place these rules existed — and index.html is not one of the thirteen
   pages that link this file, so the six industry pages using .rec-table rendered
   it with no grid, no border and no padding at all.
   index.css sits before site.css on index.html exactly as this file does here,
   so the copy lands in the same slot in the cascade and the refinements in
   site.css that are meant to win still win: :36 mobile padding, :56 row hover,
   :140 the hairline at 2dppx.
   Copied unchanged, including .fn's weight 600 — Space Mono has no 600 and it
   resolves to bold. It does that on index.html today; correcting it here would
   make these six pages disagree with the homepage. Recorded in FINDINGS.md. */
.rec-table{margin-top:44px;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.rrow{border-bottom:1px solid var(--line);background:var(--paper);padding:20px 26px;display:grid;grid-template-columns:1.4fr 1fr .9fr;gap:16px;align-items:baseline}
@media(max-width:820px){.rrow{grid-template-columns:1fr}}
.rrow:last-child{border-bottom:none}
.rrow .fn{font-family:var(--disp);font-weight:600;font-size:16.5px}
.rrow .fn small{display:block;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--ink-mute);margin-top:3px;letter-spacing:.04em}
.rrow .rs{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.2vw,24px)}
.rrow .st{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute);text-align:right}
.dark{background:var(--ink);color:var(--paper)}
.dark .ch-eyebrow{color:#9b9992}.dark .ch-eyebrow::before{background:var(--paper)}
.dark h2{color:var(--paper)}.dark .lede{color:#c9c7bf}.dark .lede strong{color:var(--paper)}
footer{border-top:1px solid var(--line);padding:40px 0 52px}
.foot-in{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .legal{font-family:var(--mono);font-size:12px;color:var(--ink-mute);max-width:62ch}
footer img{height:18px;width:auto;display:block}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}