/* Colour, type and radii below are the values used by the visual reference,
read from its own stylesheet and markup rather than estimated from a
screenshot. Two of them matter most and are easy to get wrong by eye:
headings are Manrope at weight 400, and tracking is effectively neutral
(-0.1315px at 48px is about -0.003em, not the -0.04em a display face
usually gets). */
/* ═══════════════════════════════════════════════════════════════════
The design system is clodo.ai's, read out of its own stylesheets
(_next/static/css/*.css) rather than sampled off a screenshot:
Inter with weights 450/500/550/600, Tailwind's zinc scale for every
neutral, alpha-black hairlines, 4/6/8px radii, very soft shadows,
a 1200px column on a 64px header, and green reserved for status.
The primary action is black, as it is there.
═══════════════════════════════════════════════════════════════════ */
:root{
/* grounds */
--fia-bg:#fff;
--fia-white:#fff;
--fia-band:#fff; /* one light ground: white */
--fia-band-2:#fff;
--fia-surface:#f4f4f5; /* zinc-100, the card ground */
--fia-app:#fafafa;
/* type colours — zinc */
--fia-text:#003080; /* headings, brand, key labels — the token itself */
--fia-text-deep:#0b1e3d; /* running text: navy-black, never pure black */
--fia-text-soft:#3f3f46; /* zinc-700 */
--fia-muted:#71717a; /* zinc-500 */
--fia-faint:#a1a1aa; /* zinc-400 */
/* ZeroBase navy is the one brand hue: the primary action, the marks,
the accents. Green stays what it is on the reference — status only. */
--fia-accent:#003080;
--fia-accent-ink:#00235e;
--fia-accent-soft:rgba(0,48,128,.07);
--fia-accent-line:rgba(0,48,128,.2);
--fia-accent-hover:#00246b;
--fia-ok:#166534;
--fia-ok-soft:rgba(16,185,129,.1);
--fia-ok-line:rgba(16,185,129,.22);
/* hairlines */
--fia-line:rgba(0,48,128,.1);
--fia-line-soft:rgba(0,48,128,.06);
--fia-line-strong:rgba(0,48,128,.18);
/* the dark ground */
--fia-ink:#003080; /* the deepest ground is the brand */
--fia-ink-2:#0b3c92; /* a surface raised off it */
--fia-ink-3:#1a4ba6; /* a control on it */
--fia-scrim:0,36,100; /* rgb triplet for scrims and gradients */
--fia-on-ink:#f4f7fc;
--fia-on-ink-soft:rgba(244,247,252,.72);
--fia-on-ink-accent:#a9c0e8;
--fia-on-ink-line:hsla(0,0%,100%,.14);
/* measure */
--fia-shell:1200px;
--fia-gutter:clamp(24px,4vw,40px);
/* 100vw, not 100%: a custom property is substituted at the point of use,
so a percentage would re-resolve against each nested element and a
full-bleed band would only break out by the gutter. */
--fia-edge:calc(max(0px,(100vw - var(--fia-shell))/2) + var(--fia-gutter));
--fia-header:64px;
/* shape */
--fia-radius-xs:4px;
--fia-radius-sm:6px;
--fia-radius:8px;
--fia-radius-lg:12px;
--fia-pill:999px;
--fia-shadow-s:0 1px 2px rgba(0,36,100,.05);
--fia-shadow-m:0 4px 16px rgba(0,36,100,.08);
--fia-shadow-l:0 8px 32px rgba(0,36,100,.1);
/* type */
--fia-track:-.011em;
--fia-track-h:-.025em;
--fia-font:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--fia-mono:"Geist Mono","SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--fia-bg);color:var(--fia-text-deep);font-family:var(--fia-font);font-size:15px;font-weight:400;line-height:1.55;letter-spacing:var(--fia-track);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul{list-style:none;margin:0;padding:0}
::selection{background:var(--fia-accent-line)}
.svg-library{position:absolute;overflow:hidden}
.skip-link{position:fixed;top:10px;left:10px;z-index:999;transform:translateY(-200%);padding:9px 16px;background:var(--fia-text);color:#fff;border-radius:var(--fia-pill);font-size:13px}
.skip-link:focus{transform:none}
/* Navigation */
.masthead{position:fixed;inset:0 0 auto;z-index:100;background:hsla(0,0%,100%,.85);backdrop-filter:saturate(1.8) blur(12px);border-bottom:1px solid transparent;transition:border-color .15s ease,background .15s ease}
.masthead.stuck{border-bottom-color:var(--fia-line);background:hsla(0,0%,100%,.95)}
.nav{min-width:0;width:100%;height:var(--fia-header);padding-inline:var(--fia-edge);display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.035em;color:var(--fia-text);white-space:nowrap}
.brand img{width:18px;height:18px}
.nav-links{margin-inline:auto;display:flex;align-items:center;gap:2px;white-space:nowrap}
.nav-links a{flex:none;padding:8px 14px;border-radius:var(--fia-radius-xs);color:var(--fia-text-deep);font-size:.875rem;font-weight:400;line-height:1;transition:color .15s ease,background .15s ease}
.nav-links a:hover{color:var(--fia-text);background:var(--fia-surface)}
.nav-links a[aria-current]{color:var(--fia-text);font-weight:500}
.nav-toggle{display:none;width:34px;height:34px;margin-left:auto;border:0;background:transparent}
.nav-toggle span{display:block;width:15px;height:1px;margin:4px auto;background:var(--fia-text)}
.nav>*{min-width:0}
.nav .brand{overflow:hidden;text-overflow:ellipsis}
.nav .pill-small{flex:0 1 auto;overflow:hidden}
.pill{height:40px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--fia-accent);border-radius:var(--fia-radius-sm);background:var(--fia-accent);color:#fff;font-size:.875rem;font-weight:500;letter-spacing:0;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}
.pill:hover{background:var(--fia-accent-hover);border-color:var(--fia-accent-hover)}
.pill.on-ink{background:#fff;border-color:#fff;color:var(--fia-ink)}
.pill.on-ink:hover{background:#e4e4e7;border-color:#e4e4e7}
.pill-small{height:34px;padding:0 14px;font-size:.8125rem}
/* Type */
.eyebrow{display:inline-block;color:var(--fia-muted);font-size:13px;font-weight:500;letter-spacing:0}
.eyebrow a{color:inherit}
.eyebrow a:hover{color:var(--fia-text)}
h1,h2,h3,h4{font-weight:600;letter-spacing:var(--fia-track-h);line-height:1.2;color:var(--fia-text)}
h1{letter-spacing:-.03em}
h3,h4{font-weight:550;letter-spacing:-.015em;line-height:1.25}
h2 span{color:var(--fia-muted);font-weight:600}
/* Hero */
/* Context */
/* Source of truth */
/* Assistant */
.status{height:19px;padding:0 7px;display:inline-flex;align-items:center;border-radius:6px;font-size:8.5px;font-weight:550;white-space:nowrap}
.status.redesign{background:#fbf1e4;color:#8a6524}
.status.remove{background:#fbece8;color:#a5462a}
.status.automate{background:#edf1f7;color:var(--fia-text-soft)}
.status.keep{background:#edf3ee;color:#166534}
/* Workflow builder */
/* Workspace table */
/* grid/flex children default to min-content width; without this a wide
table pushes the whole document past the viewport on small screens */
/* Human authority */
/* Decision memory */
/* Closing and footer */
/* Legal page compatibility */
.legal-page{min-height:100vh;padding:170px max(24px,calc((100vw - 760px)/2)) 90px}
.legal-page h1{margin-top:20px;font-size:48px;line-height:1.05}
.legal-page h2{margin-top:38px;font-size:19px;font-weight:500;letter-spacing:-.02em}
.legal-page p{margin-top:12px;color:var(--fia-text-soft);font-size:15px;line-height:1.75}
/* Motion */
/* Motion, taken from the reference's own keyframes: fragments settle from
.85 keeping their rotation, chips and bubbles pop from .8, the leads fade
to .9, a dead end pulses, rows rise 10px and everything else rises 6px. */
@keyframes fia-frag-in{0%{opacity:0;transform:rotate(var(--r,0deg)) scale(.85)}to{opacity:1;transform:rotate(var(--r,0deg)) scale(1)}}
@keyframes fia-pop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes fia-edge-in{0%{opacity:0}to{opacity:1}}
@keyframes fia-bad-pulse{0%,to{opacity:1}50%{opacity:.55}}
@keyframes fia-row-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fia-fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fia-marquee{0%{transform:translateX(0)}to{transform:translateX(-50%)}}
[data-reveal]{transition:opacity .5s ease,transform .5s ease}
[data-reveal].armed{opacity:0;transform:translateY(6px)}
[data-reveal].in{opacity:1;transform:none}
@media (max-width:760px){
.masthead{inset:12px 0 auto}
.nav{width:calc(100% - 24px);height:50px;padding-left:15px;gap:10px}
.nav-links{display:none}
.nav-links.open{position:absolute;top:61px;left:0;right:0;padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--fia-line);border-radius:var(--fia-radius-lg)}
.nav-toggle{display:block}
.pill-small{height:34px;padding:0 12px;font-size:10px}
.legal-page{padding-top:130px}
.legal-page h1{font-size:clamp(28px,7.4vw,36px)}
/* these two keep a fixed second column unless named here: the base rule
groups .workflow-head with .assistant-head, and .authority-head sets
its own. Both overflow a 390px viewport otherwise. */
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
html{scroll-behavior:auto}
[data-reveal].armed{opacity:1;transform:none}}
/* ==========================================================================
INNER PAGES
Same tokens, same type scale as the homepage. Only the shell differs:
a static header/footer instead of the homepage's image-anchored one.
========================================================================== */
.page{width:100%;padding:calc(var(--fia-header) + clamp(36px,4vw,64px)) var(--fia-edge) 0}
.page-hero{max-width:760px;padding-bottom:clamp(40px,4.5vw,64px);border-bottom:1px solid var(--fia-line)}
.page-hero h1{margin-top:20px;font-size:clamp(30px,3.6vw,44px);line-height:1.3}
.page-hero>p:last-child{margin-top:20px;color:var(--fia-text-soft);font-size:16px;line-height:1.6}
.page-section{padding:clamp(48px,4.8vw,72px) 0;border-bottom:1px solid var(--fia-line)}
.page-section:last-of-type{border-bottom:0}
.page-section>h2{max-width:20ch;font-size:clamp(26px,2.8vw,36px);line-height:1.4}
.page-section>p{max-width:66ch;margin-top:16px;color:var(--fia-text-soft);font-size:15px;line-height:1.65}
.page-lead{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:start}
.page-lead>p{margin:0;color:var(--fia-text-soft);font-size:14px;line-height:1.65}
/* key/value specification rows */
.spec{margin-top:36px;border-top:1px solid var(--fia-line)}
.spec>div{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:16px 0;border-bottom:1px solid var(--fia-line)}
.spec dt{color:var(--fia-muted);font-size:13px}
.spec dd{margin:0;font-size:14px;line-height:1.6}
.spec dd b{font-weight:500}
/* a two-column fit / not-a-fit list */
/* the seven product primitives */
/* vertical solution cards */
/* gap-separated rounded cards, so the grid under the mosaic band reads as
the same family of surfaces rather than a second, unrelated table. */
.verticals{margin-top:clamp(30px,3.2vw,44px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.verticals article{padding:clamp(24px,2.4vw,32px);border:1px solid var(--fia-line);border-radius:var(--fia-radius-lg);background:var(--fia-white);box-shadow:var(--fia-shadow-s)}
.verticals .spec>div:last-child{border-bottom:0;padding-bottom:0}
.verticals h3{font-size:18px;font-weight:500}
.verticals ul{margin-top:14px;display:grid;gap:7px}
.verticals li{color:var(--fia-text-soft);font-size:13.5px}
/* a soft ground for a closing block, so a page does not end on bare cream */
.panel{margin-top:clamp(28px,3vw,40px);padding:clamp(24px,2.8vw,40px);border:1px solid var(--fia-line);border-radius:var(--fia-radius-lg);background:linear-gradient(180deg,var(--fia-band),#fff)}
.panel>.spec{margin-top:0;border-top:0}
.panel>.spec>div:first-child{padding-top:0}
.panel>.spec>div:last-child{border-bottom:0;padding-bottom:0}
/* static footer for inner pages */
.page-footer{margin-top:clamp(48px,5vw,76px);padding:44px var(--fia-edge) 34px;border-top:1px solid var(--fia-line)}
.page-footer p{margin-left:auto;color:var(--fia-muted);font-size:13px}
.page-footer nav{display:flex;flex-wrap:wrap;gap:22px;width:100%;margin-top:26px;padding-top:20px;border-top:1px solid var(--fia-line);color:var(--fia-text-soft);font-size:13px}
.page-footer nav a:hover{color:var(--fia-text)}
@media (max-width:860px){
.page-lead,.verticals{grid-template-columns:1fr;gap:28px}
.spec>div{grid-template-columns:1fr;gap:6px}
}
/* ── The Curious Lab credit ──────────────────────────────────
The engineering identity behind the product. Navy is its own
brand colour and happens to match --fia-accent; it is set
literally here so a change to the product accent never
silently restyles another company's mark. */
/* ── Before / after band ─────────────────────────────────────
The old way beside the new one. The left column is deliberately
photographic and soft; the right is product UI at product density.
That contrast is the argument — do not style them alike. */
/* the product screen inside the "after" column */
/* ── Evidence pathway diagram ────────────────────────────────
Source systems to decision memory as one continuous path. The
accent line is the only colour: it marks the flow and nothing
else. Deliberately not a node cloud — each stage is a real
surface in the product, so each one is drawn as a real panel. */
/* the continuous line, with a node at each stage */
/* source system row */
/* the small evidence / permission chips */
/* ==========================================================================
TRUST PAGE
The page argues that the product is inspectable, so nothing on it is
asserted in prose alone: each principle is a card with the control it
maps to, the permission model is a real panel with a default-deny header,
and every pipeline stage carries the window it actually lives in. Depth
comes from soft shadow on white over the warm ground, not heavier rules —
1px borders at this scale are what read as unfinished.
========================================================================== */
/* the lead pair keeps the bare-h2 scale so all four sections read as peers */
/* ── Window chrome, shared by every product surface on the page ──────── */
.win{border:1px solid var(--fia-line);border-radius:12px;background:var(--fia-white);overflow:hidden;box-shadow:var(--fia-shadow-m)}
.win-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--fia-line-soft);background:linear-gradient(180deg,#fff,var(--fia-band-2))}
.win-dots{display:flex;gap:5px;flex:none}
.win-dots i{width:8px;height:8px;border-radius:50%;background:#e4e4e7}
.win-bar b{min-width:0;color:var(--fia-muted);font-family:var(--fia-mono);font-size:10px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-tag{margin-left:auto;flex:none;padding:3px 9px;border:1px solid var(--fia-accent-line);border-radius:var(--fia-pill);background:var(--fia-accent-soft);color:var(--fia-accent-ink);font-family:var(--fia-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.win-tag.ok{border-color:var(--fia-ok-line);background:var(--fia-ok-soft);color:var(--fia-ok)}
.win-tag.hold{border-color:#e8dfc9;background:#fbf7ec;color:#7a5c1b}
/* ── The three principles, stated once under the hero ────────────────
They used to be three cards and then said again, stage by stage, in the
passage below. Kept here as one strip: the claim, the sentence that makes
it checkable, and the control it resolves to. */
/* ── The permission model, as the panel it is ────────────────────────── */
.page-lead+.perm{margin-top:clamp(28px,3vw,40px)}
.perm-grid{display:grid;grid-template-columns:1fr 1fr}
.perm-col{padding:22px 26px 26px}
.perm-col+.perm-col{border-left:1px solid var(--fia-line-soft);background:linear-gradient(180deg,#fff,var(--fia-band-2))}
.perm-col h3{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500}
.perm-col h3 small{margin-left:auto;color:var(--fia-muted);font-family:var(--fia-mono);font-size:9.5px;font-weight:400;letter-spacing:.09em;text-transform:uppercase}
.perm-col li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--fia-line-soft);color:var(--fia-text-soft);font-size:13.5px;line-height:1.5}
.perm-col li:first-child{margin-top:8px}
.perm-col li::before{content:"";flex:none;margin-top:1px;width:17px;height:17px;border:1px solid var(--fia-accent-line);border-radius:5px;background:var(--fia-accent-soft) url("data:image/svg+xml;utf8,") no-repeat center/10px 10px}
.perm-col.no li{color:var(--fia-muted)}
.perm-col.no li::before{border-color:var(--fia-line);background:#f5f6f8 url("data:image/svg+xml;utf8,") no-repeat center/10px 10px}
/* ── One passage, six alternating rows ───────────────────────
Each row is a claim on one side and the surface that enforces it on the
other, sides swapping down the page so the eye has somewhere to go. The
copy sits on the page ground; only the surface gets a panel, which is
what makes it read as a screen rather than a text box. */
.rows{margin-top:clamp(34px,3.6vw,52px);display:grid;gap:clamp(34px,4.4vw,72px)}
.row{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:clamp(26px,4.5vw,84px);align-items:center}
.row.alt{grid-template-columns:minmax(0,1fr) minmax(0,330px)}
.row.alt .row-copy{order:2}
.row-k{display:block;color:var(--fia-muted);font-family:var(--fia-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.row-copy h3{margin-top:13px;font-size:clamp(1.35rem,2.3vw,1.9rem);font-weight:500;line-height:1.2;letter-spacing:-.025em}
.row-copy>p{margin-top:13px;color:var(--fia-text-soft);font-size:14px;line-height:1.65}
.row-ui{padding:clamp(20px,2.4vw,36px);border:1px solid var(--fia-line);border-radius:var(--fia-radius-lg);background:var(--fia-white);box-shadow:var(--fia-shadow-s)}
/* the interface fragment each stage carries */
.pipe-ui-b{padding:4px 15px 11px}
.pipe-ui-b span{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;font-size:12.5px;color:var(--fia-text-soft);line-height:1.4}
.pipe-ui-b span+span{border-top:1px solid var(--fia-line-soft)}
.pipe-ui-b b{color:var(--fia-text);font-weight:500}
.pipe-ui-b em{font-style:normal;color:var(--fia-muted);font-family:var(--fia-mono);font-size:11px;text-align:right}
.pipe-src{display:flex;flex-wrap:wrap;gap:8px;padding:15px}
.pipe-src span{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border:1px solid var(--fia-line);border-radius:8px;background:var(--fia-white);box-shadow:var(--fia-shadow-s);color:var(--fia-text-soft);font-size:11.5px;font-weight:500}
.pipe-src svg{flex:none;height:15px}
.pipe-allow{display:flex;flex-wrap:wrap;gap:6px;padding:15px 15px 5px}
.pipe-allow i{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--fia-pill);font-style:normal;font-family:var(--fia-mono);font-size:10px;letter-spacing:.04em}
.pipe-allow i::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
.pipe-allow.yes i{border:1px solid var(--fia-ok-line);background:var(--fia-ok-soft);color:var(--fia-ok)}
.pipe-allow.no{padding:8px 15px 15px}
.pipe-allow.no i{border:1px solid var(--fia-line);background:var(--fia-surface);color:var(--fia-muted)}
/* ══════════════════════════════════════════════════════════════
BEFORE / AFTER — the same question, two ways
The chase is drawn rather than described: real-looking windows
scattered on a canvas, each one carrying the dead end it hit,
joined by dotted leads that go nowhere. Then one arrow down and
the same question answered on a single surface. The collage is a
fixed 1000×740 canvas scaled by transform, so every coordinate
below is authored once and never reflows.
══════════════════════════════════════════════════════════════ */
.ba-lead{max-width:660px;margin:0 auto;text-align:center}
.ba-lead h2{font-size:clamp(24px,2.6vw,33px);line-height:1.35}
.ba-lead p{margin-top:16px;color:var(--fia-text-soft);font-size:14.5px;line-height:1.65}
.ba-h{text-align:center;font-size:clamp(21px,2.2vw,28px);font-weight:400;line-height:1.35;letter-spacing:var(--fia-track)}
.page-section>.ba-note{max-width:none;margin-top:18px;text-align:center;color:var(--fia-muted);font-size:12px}
.ba-arrow{display:flex;flex-direction:column;align-items:center;margin:clamp(18px,2.4vw,30px) 0 clamp(20px,2.6vw,34px)}
.ba-arrow span{width:1px;height:clamp(44px,5vw,74px);background:linear-gradient(180deg,transparent,var(--fia-accent-line))}
.ba-arrow svg{width:15px;height:9px;margin-top:3px;fill:none;stroke:var(--fia-muted);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
/* the canvas */
.collage-wrap{position:relative;overflow:hidden;height:740px;margin-top:clamp(22px,2.6vw,36px)}
.collage{position:absolute;top:0;left:50%;width:1000px;height:740px;margin-left:-500px;transform-origin:top center}
.collage-lines{position:absolute;inset:0;z-index:0;width:1000px;height:740px}
.collage-lines path{fill:none;stroke:#d4d4d8;stroke-width:1.1;stroke-dasharray:2 5.5}
.collage-lines circle{fill:#d4d4d8}
/* the taped brief */
.note{position:absolute;z-index:4;left:var(--x);top:var(--y);width:var(--w);padding:20px 22px 22px;border:1px solid #ece4d0;border-radius:2px;background:#f8f4e8;box-shadow:0 14px 30px -16px rgba(52,44,24,.45);transform:rotate(var(--r,0deg))}
.note::before{content:"";position:absolute;left:50%;top:-11px;width:104px;height:22px;margin-left:-52px;background:rgba(212,200,170,.5);border-inline:1px solid rgba(255,255,255,.55);transform:rotate(-1.6deg)}
.note b{display:block;color:#8d8262;font-family:var(--fia-mono);font-size:10px;font-weight:400;letter-spacing:.17em;text-transform:uppercase}
.note p{margin-top:11px;color:#3d3728;font-size:13px;line-height:1.62}
.note em{font-style:normal;font-weight:600;color:#2a261a}
/* a window on the canvas */
.cw{position:absolute;z-index:1;left:var(--x);top:var(--y);width:var(--w);border-radius:6px;background:var(--fia-white);box-shadow:0 1px 2px rgba(20,28,45,.07),0 18px 32px -18px rgba(20,28,45,.55);transform:rotate(var(--r,0deg));overflow:hidden}
.cw-bar{display:flex;align-items:center;gap:7px;padding:6px 9px;border-bottom:1px solid #f4f4f5;background:var(--fia-band-2)}
.cw-bar em{display:flex;gap:3px;flex:none}
.cw-bar em i{width:4.5px;height:4.5px;border-radius:50%;background:#e4e4e7}
.cw-bar b{min-width:0;color:var(--fia-muted);font-size:8.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-body{position:relative}
/* ── Screenshot stand-ins ────────────────────────────────────
At 150–250px a real screenshot is unreadable anyway, so each
window is rebuilt from the few things that make a screen legible
at a glance: a coloured app bar, a toolbar, and then the one
structure that surface actually is — a table, a sheet, a thread,
a form. Widths vary through :nth-child so the markup stays free
of per-element styling. */
/* the dead end a window hit, printed over it */
.cw-over{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:7px 12px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.93) 26%,rgba(255,255,255,.93) 74%,rgba(255,255,255,0));text-align:center;color:var(--fia-muted);font-size:9.5px;font-weight:600;line-height:1.35}
/* a failure the chase produced */
.cchip{position:absolute;z-index:3;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border:1px solid #f1d5d5;border-radius:6px;background:#fdf3f3;color:#a03a3a;font-size:11px;white-space:nowrap;box-shadow:0 8px 16px -10px rgba(120,40,40,.5)}
.cchip::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;background:#cc5252 url("data:image/svg+xml;utf8,") no-repeat center/6px 6px}
/* somebody asking for it again */
.cbub{position:absolute;z-index:3;left:var(--x);top:var(--y);width:var(--w,152px);display:flex;gap:8px;align-items:flex-start;padding:8px 11px;border-radius:9px;background:var(--fia-white);color:var(--fia-text);font-size:11.5px;line-height:1.36;box-shadow:0 1px 2px rgba(20,28,45,.07),0 14px 26px -16px rgba(20,28,45,.55)}
.cbub::before{content:"";flex:none;margin-top:1px;width:15px;height:15px;border-radius:50%;background:linear-gradient(140deg,#d4d4d8,#a1a1aa)}
/* the inbox it all ends up in */
.cmail{position:absolute;z-index:3;left:var(--x);top:var(--y);width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--fia-white);box-shadow:0 1px 2px rgba(20,28,45,.07),0 14px 26px -16px rgba(20,28,45,.55)}
.cmail svg{width:19px;height:19px;fill:none;stroke:var(--fia-faint);stroke-width:1.3}
.cmail b{position:absolute;top:-6px;right:-9px;padding:1px 5px;border-radius:99px;background:#cc5252;color:#fff;font-family:var(--fia-mono);font-size:8px;font-weight:400}
/* the chase, summarised where the canvas will not fit */
.ba-fallback{display:none;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.ba-fallback span{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid #f1d5d5;border-radius:6px;background:#fdf3f3;color:#a03a3a;font-size:11.5px}
.ba-fallback span::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#cc5252}
/* ── The answer, on one surface ──────────────────────────────
The wrapper is what is positioned, not the inside
it: an `img` child selector silently misses through and
drops the photo back into flow. */
.scene{position:relative;margin-top:clamp(20px,2.4vw,32px);border-radius:var(--fia-radius-lg);overflow:hidden;background:var(--fia-ink);box-shadow:var(--fia-shadow-l)}
.scene picture{position:absolute;inset:0;z-index:0}
.scene picture img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.scene::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(var(--fia-scrim),.58),rgba(var(--fia-scrim),.4) 42%,rgba(var(--fia-scrim),.62))}
.scene-in{position:relative;z-index:2;padding:clamp(24px,3.2vw,44px) clamp(16px,3vw,44px);display:grid;justify-items:center;gap:11px}
.sc-brief{position:relative;width:min(580px,100%);padding:17px 60px 17px 19px;border-radius:11px;background:rgba(246,247,248,.94);color:var(--fia-text);font-size:13.5px;line-height:1.58;box-shadow:0 20px 44px -22px rgba(0,0,0,.75)}
.sc-send{position:absolute;top:14px;right:14px;width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:var(--fia-ink-3)}
.sc-send svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sc-chev{width:13px;height:8px;fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sc-src{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.sc-src span{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--fia-pill);background:rgba(255,255,255,.95);color:var(--fia-text-soft);font-size:11.5px;font-weight:500;box-shadow:0 12px 26px -16px rgba(0,0,0,.8)}
.sc-src svg{flex:none;height:13px}
.sc-src span.more{color:var(--fia-muted);font-weight:400;background:rgba(255,255,255,.9)}
.sc-rows{width:min(580px,100%);display:grid;gap:8px}
.sc-row{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:10px;background:rgba(246,247,248,.94);box-shadow:0 18px 38px -22px rgba(0,0,0,.78)}
.sc-av{flex:none;width:31px;height:31px;display:grid;place-items:center;border-radius:8px;background:#e4e4e7;color:var(--fia-muted);font-family:var(--fia-mono);font-size:9px}
.sc-row>div{flex:1;min-width:0}
.sc-row b{display:block;font-size:12.5px;font-weight:500;color:var(--fia-text)}
.sc-row small{display:block;margin-top:2px;color:var(--fia-muted);font-size:11px;line-height:1.42;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-badge{flex:none;padding:4px 9px;border-radius:5px;background:rgba(16,185,129,.14);color:#166534;font-family:var(--fia-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.sc-badge.amber{background:#f8ecd1;color:#7a5915}
.sc-done{display:inline-flex;align-items:center;gap:9px;margin-top:3px;padding:7px 15px;border-radius:var(--fia-pill);background:rgba(255,255,255,.95);color:#166534;font-size:12px;font-weight:500;box-shadow:0 14px 30px -18px rgba(0,0,0,.8)}
.sc-done svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1080px){
.row,.row.alt{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:34px}
.row.alt .row-copy{order:0}
.collage{transform:scale(.86)}
.collage-wrap{height:636px}
}
@media (max-width:900px){
.collage{transform:scale(.62)}
.collage-wrap{height:459px}
}
@media (max-width:860px){
.row,.row.alt{grid-template-columns:minmax(0,1fr);gap:22px}
.perm-grid{grid-template-columns:1fr}
.perm-col+.perm-col{border-left:0;border-top:1px solid var(--fia-line-soft)}
}
@media (max-width:760px){
/* below this the canvas is a texture rather than a thing you can read */
.collage-wrap{display:none}
.ba-fallback{display:flex}
.ba-arrow{margin-top:26px}
}
/* ══════════════════════════════════════════════════════════════
SOLUTIONS — the mosaic band
One dark full-bleed band carrying two views of the same offer:
the functions a review starts in, and the kinds of work it goes
after. The tiles are deliberately uneven — a tall one, a wide
one, two small — so the eye reads a composition rather than a
row of equal thumbnails. The band breaks out of .page's gutter
with a negative inline margin instead of 100vw, which would add
the scrollbar's width and force a horizontal scroll.
══════════════════════════════════════════════════════════════ */
.mosaic-band{
width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);
margin-top:clamp(44px,4.6vw,72px);padding:clamp(38px,4.2vw,64px) var(--fia-edge) clamp(42px,4.6vw,70px);
background:var(--fia-ink);color:var(--fia-on-ink);
}
.mosaic-band .eyebrow{color:var(--fia-on-ink-soft)}
.mosaic-band .eyebrow::before{background:var(--fia-on-ink-accent)}
.mosaic-head{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:20px 28px;flex-wrap:wrap}
.mosaic-head h2{font-size:clamp(21px,2.3vw,29px);font-weight:400;line-height:1.3;letter-spacing:var(--fia-track);color:#fff}
.mosaic-head h2 span{color:var(--fia-on-ink-accent)}
/* the two views */
.seg{display:inline-flex;flex:none;gap:2px;padding:3px;border:1px solid var(--fia-on-ink-line);border-radius:var(--fia-pill);background:rgba(255,255,255,.06)}
.seg button{padding:8px 17px;border:0;border-radius:var(--fia-pill);background:transparent;color:var(--fia-on-ink-soft);font-size:13px;letter-spacing:var(--fia-track);white-space:nowrap;cursor:pointer;transition:background .16s,color .16s}
.seg button:hover{color:var(--fia-on-ink)}
.seg button[aria-selected="true"]{background:var(--fia-on-ink);color:var(--fia-ink)}
.seg button:focus-visible{outline:2px solid var(--fia-on-ink-accent);outline-offset:2px}
.mosaic{margin-top:clamp(20px,2.4vw,32px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(148px,14.5vw,204px);gap:12px}
.mosaic[hidden]{display:none}
.tile{position:relative;display:block;margin:0;color:inherit;overflow:hidden;border-radius:var(--fia-radius);background:var(--fia-ink-2)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--fia-scrim),0) 18%,rgba(var(--fia-scrim),.44) 52%,rgba(var(--fia-scrim),.93) 100%)}
.tile:hover img{transform:scale(1.045)}
a.tile::before{content:"";position:absolute;z-index:2;inset:0;border-radius:inherit;border:1px solid transparent;transition:border-color .16s}
a.tile:hover::before{border-color:rgba(255,255,255,.28)}
a.tile:focus-visible{outline:2px solid var(--fia-on-ink-accent);outline-offset:3px}
.tile figcaption,.tile-cap{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:clamp(14px,1.5vw,20px)}
.tile b{display:block;font-size:clamp(15px,1.5vw,19px);font-weight:500;letter-spacing:var(--fia-track)}
.tile small{display:block;margin-top:6px;max-width:44ch;color:var(--fia-on-ink-soft);font-size:12.5px;line-height:1.48}
/* the composition: tall left, wide top-right, two under it, one full-width */
.t-a{grid-column:1;grid-row:1/3}
.t-b{grid-column:2/4;grid-row:1}
.t-c{grid-column:2;grid-row:2}
.t-d{grid-column:3;grid-row:2}
.t-e{grid-column:1/4;grid-row:3}
@media (max-width:900px){
.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(140px,20vw,178px)}
.t-a,.t-b,.t-e{grid-column:1/3}
.t-a{grid-row:1}
.t-b{grid-row:2}
.t-c{grid-column:1;grid-row:3}
.t-d{grid-column:2;grid-row:3}
.t-e{grid-row:4}
}
@media (max-width:560px){
.mosaic{grid-template-columns:1fr;grid-auto-rows:158px}
.tile{grid-column:1;grid-row:auto}
.mosaic-head{gap:16px}
.seg button{padding:8px 14px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
.tile:hover img{transform:none} }
/* ══════════════════════════════════════════════════════════════
SOLUTION PAGES — one template, four functions
Copy and a single framed photograph, the briefs you would
actually type, one proof panel on a second ground, then the
surfaces. Same components as the rest of the site; only the
arrangement is specific to these pages.
══════════════════════════════════════════════════════════════ */
.vhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(28px,5vw,80px);align-items:center;padding-bottom:clamp(34px,3.8vw,56px)}
.vhero h1{margin-top:16px;font-size:clamp(2.2rem,4.6vw,4rem);font-weight:400;line-height:1.06;letter-spacing:-.035em}
.vhero h1 b{font-weight:700;letter-spacing:-.04em}
.vhero-copy>p{margin-top:18px;max-width:52ch;color:var(--fia-text-soft);font-size:15.5px;line-height:1.65}
.vhero .pill{margin-top:26px}
.vhero figure{margin:0;aspect-ratio:4/3;border:1px solid var(--fia-line);border-radius:var(--fia-radius-lg);background:var(--fia-ink-2);box-shadow:var(--fia-shadow-m);overflow:hidden}
.vhero figure img{width:100%;height:100%;object-fit:cover}
/* the one solid button on a light page */
/* what the review is allowed to read — the honest version of a logo strip */
.reads{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:clamp(22px,2.4vw,32px) 0;border-top:1px solid var(--fia-line)}
.reads>b{color:var(--fia-muted);font-size:12.5px;font-weight:400;letter-spacing:.02em}
.reads span{display:inline-flex;align-items:center;gap:8px;color:var(--fia-text-soft);font-size:13px;font-weight:500;opacity:.78}
.reads svg{flex:none;height:15px}
/* the briefs, on a shelf that runs past both edges */
.rail{width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding:clamp(24px,2.8vw,38px) 0;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail ul{display:flex;gap:12px;width:max-content;padding-inline:var(--fia-edge)}
.rail li{width:290px;padding:15px 17px 17px;border:1px solid var(--fia-line);border-radius:12px;background:var(--fia-white);box-shadow:var(--fia-shadow-s);color:var(--fia-text-soft);font-size:13px;line-height:1.55}
.rail li svg{display:block;width:14px;height:14px;margin-bottom:11px;color:var(--fia-muted)}
/* a second ground, for the section that carries the proof */
.band{width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding:clamp(44px,4.8vw,74px) var(--fia-edge);background:var(--fia-band);border-block:1px solid var(--fia-line)}
.band-lead{max-width:640px}
.band-lead h2{font-size:clamp(23px,2.5vw,32px);font-weight:400;line-height:1.3;letter-spacing:var(--fia-track)}
.band-lead p{margin-top:14px;color:var(--fia-text-soft);font-size:14.5px;line-height:1.65}
/* the review, answered on one surface */
/* the page ends by asking for the review */
@media (max-width:900px){
.vhero{grid-template-columns:1fr;gap:30px}
.vhero figure{aspect-ratio:16/9}
}
@media (max-width:560px){
.rail li{width:250px} }
/* ══════════════════════════════════════════════════════════════
MOTION AND SURFACES, MATCHED TO THE REFERENCE
The collage settles rather than appearing: leads first, then the
windows, then the dead ends popping on top of them and pulsing.
Every duration and easing below is the reference's own.
══════════════════════════════════════════════════════════════ */
/* Hidden only once the observer has armed them, so a page whose script
never runs still shows the whole collage. */
.collage-wrap.armed .collage-lines path,.collage-wrap.armed .collage-lines circle,.collage-wrap.armed .note,.collage-wrap.armed .cw,.collage-wrap.armed .cchip,.collage-wrap.armed .cbub,.collage-wrap.armed .cmail{opacity:0}
.collage-wrap.in .collage-lines path,.collage-wrap.in .collage-lines circle{animation:fia-edge-in .6s ease both;animation-delay:.25s}
.collage-wrap.in .note{animation:fia-fade-up .5s ease both}
.collage-wrap.in .cw{animation:fia-frag-in .55s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}
.collage-wrap.in .cbub{animation:fia-pop .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--d,0s)}
.collage-wrap.in .cmail{animation:fia-pop .45s ease both;animation-delay:var(--d,0s)}
.collage-wrap.in .cchip{animation:fia-pop .45s ease both,fia-bad-pulse 1.6s ease-in-out infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + .45s)}
/* the answer assembles top-down, as it does there */
.scene.armed .scene-in>*,.scene.armed .sc-row{opacity:0}
.scene.in .scene-in>*{animation:fia-fade-up .5s ease both;animation-delay:var(--d,0s)}
.scene.in .sc-row{animation:fia-row-in .5s ease both;animation-delay:var(--d,0s)}
/* the reveal wrapper itself only moves the block; its children carry the rest */
.scene[data-reveal].armed,.collage-wrap[data-reveal].armed{opacity:1;transform:none}
/* the brief shelf runs by itself, and stops when you want to read it */
.rail{overflow:hidden}
.rail ul{animation:fia-marquee 64s linear infinite}
.rail:hover ul,.rail:focus-within ul{animation-play-state:paused}
/* logo strips are greyed until you look at them, as on the reference */
.reads span{opacity:.65;filter:grayscale(100%);transition:opacity .2s ease,filter .2s ease}
.reads:hover span{opacity:1;filter:none}
/* ── Surfaces, on the reference's card language ────────────────
A product surface is treated as a screenshot: 6px, a 10% hairline
and one deep soft shadow. Content cards are the white-to-zinc-50
gradient with an 8px radius. */
.win{border:1px solid var(--fia-line-strong);border-radius:var(--fia-radius-sm);box-shadow:0 12px 40px -8px rgba(0,36,100,.18)}
.row-ui,.panel,.verticals article{background:linear-gradient(180deg,#fff,var(--fia-band-2));border-color:var(--fia-line-strong)}
.row-ui,.panel{border-radius:var(--fia-radius)}
.verticals article{border-radius:var(--fia-radius);box-shadow:none}
.tile{border-radius:10px}
.vhero figure{border-radius:10px;border-color:var(--fia-line-strong);background:var(--fia-surface);box-shadow:0 12px 40px -8px rgba(0,36,100,.18)}
.rail li{border-radius:var(--fia-radius-sm);border-color:var(--fia-line);box-shadow:none}
/* section headings sit on the reference's 2rem/600 step */
.page-section>h2,.page-lead>h2,.ba-lead h2,.band-lead h2,.mosaic-head h2{
font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;line-height:1.2;letter-spacing:-.025em}
.page-hero h1{font-size:clamp(1.75rem,3.6vw,2.75rem);font-weight:600;line-height:1.15;letter-spacing:-.03em}
@media (max-width:760px){
.page-section>h2,.page-lead>h2,.ba-lead h2,.band-lead h2,.mosaic-head h2{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){
.collage .note,.collage .cw,.collage .cchip,.collage .cbub,.collage .cmail,.collage-lines path,.collage-lines circle,.scene-in>*,.sc-row{opacity:1!important;animation:none!important}
.rail ul{animation:none}
.scene-in>*,.sc-row{animation:none!important}
}
/* ══════════════════════════════════════════════════════════════
HOME — the reference's own page order
A dark cinematic hero with the strip riding its bottom edge, a
two-tone statement and one photograph carrying a real prompt, a
four-step process that advances itself, the mosaic, an accordion
and a dark close. Our navy is the one accent inside it.
══════════════════════════════════════════════════════════════ */
.dhero{position:relative;width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);min-height:min(760px,100svh);display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;background:var(--fia-ink)}
.dhero>picture{position:absolute;inset:0;z-index:0}
.dhero>picture img{width:100%;height:100%;object-fit:cover}
.dhero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(var(--fia-scrim),.86),rgba(var(--fia-scrim),.72) 42%,rgba(var(--fia-scrim),.94))}
.dhero-in{position:relative;z-index:2;padding:calc(var(--fia-header) + clamp(70px,11vw,150px)) var(--fia-edge) clamp(60px,8vw,110px);color:var(--fia-on-ink)}
.dhero h1{max-width:16ch;margin-top:22px;color:#fff;font-size:clamp(2.4rem,6vw,4.5rem);font-weight:600;line-height:1.03;letter-spacing:-.04em}
.dhero-in>p{max-width:46ch;margin-top:22px;color:hsla(0,0%,100%,.8);font-size:clamp(15px,1.35vw,17px);line-height:1.55}
.dhero .pill{margin-top:32px}
/* the strip rides the hero's bottom edge, as it does there */
.strip{position:relative;z-index:2;width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding:26px 0;background:var(--fia-ink);border-top:1px solid var(--fia-on-ink-line);overflow:hidden}
.strip ul{display:flex;align-items:center;gap:14px;width:max-content;padding-inline:var(--fia-edge);animation:fia-marquee 48s linear infinite}
.strip li{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:6px;background:hsla(0,0%,100%,.94);color:var(--fia-text-deep);font-size:13.5px;font-weight:500;white-space:nowrap}
.strip .blogo{height:16px}
.strip:hover ul{animation-play-state:paused}
/* the two-tone statement */
.statement{width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding:clamp(56px,7vw,110px) var(--fia-edge);background:var(--fia-band)}
.statement h2{max-width:24ch;font-size:clamp(1.6rem,3.2vw,2.55rem);font-weight:600;line-height:1.22;letter-spacing:-.03em}
.statement h2 span{color:var(--fia-muted);font-weight:600}
.statement h2 i{font-style:italic}
.statement .pill{margin-top:30px}
/* one photograph, carrying the brief you would actually type */
/* the four steps, advancing on their own */
.process{padding:clamp(56px,7vw,104px) 0 clamp(50px,6vw,88px)}
.process>h2{max-width:22ch;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-.025em}
.steps{margin-top:clamp(26px,3vw,42px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.step-tab{position:relative;padding:16px 4px 0;border:0;border-top:1.5px solid var(--fia-line);background:none;text-align:left;color:var(--fia-muted);font:inherit;font-size:clamp(14px,1.3vw,17px);cursor:pointer;transition:color .15s ease}
.step-tab b{margin-right:9px;font-family:var(--fia-mono);font-size:.72em;font-weight:400;color:var(--fia-faint)}
.step-tab:hover{color:var(--fia-text-soft)}
.step-tab[aria-selected="true"]{color:var(--fia-text)}
.step-tab[aria-selected="true"] b{color:var(--fia-accent)}
.step-tab[aria-selected="true"]::before{content:"";position:absolute;top:-1.5px;left:0;height:1.5px;width:0;background:var(--fia-accent);animation:fia-step-bar 6s linear forwards}
@keyframes fia-step-bar{0%{width:0}to{width:100%}}
.step-panel{margin-top:clamp(24px,3vw,40px);padding:clamp(20px,2.6vw,38px);border:1px solid var(--fia-line-strong);border-radius:var(--fia-radius);background:linear-gradient(180deg,#fff,var(--fia-band-2))}
.step-panel[hidden]{display:none}
.step-panel .win{max-width:720px;margin-inline:auto;animation:fia-fade-up .45s ease both}
.step-copy{max-width:56ch;margin:0 auto clamp(18px,2.2vw,28px);text-align:center;color:var(--fia-text-soft);font-size:14px;line-height:1.6}
/* the accordion, on the dark ground */
.faq{width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding:clamp(56px,7vw,104px) var(--fia-edge);background:var(--fia-ink);color:var(--fia-on-ink)}
.faq>h2{max-width:20ch;margin:0 auto;text-align:center;color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-.025em}
.faq-list{max-width:760px;margin:clamp(26px,3vw,44px) auto 0}
.faq details{border-bottom:1px solid var(--fia-on-ink-line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;color:hsla(0,0%,100%,.92);font-size:15px;cursor:pointer;list-style:none;transition:color .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#fff}
.faq summary svg{flex:none;width:13px;height:8px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details>p{padding:0 0 20px;max-width:64ch;color:var(--fia-on-ink-soft);font-size:14px;line-height:1.65;animation:fia-fade-up .3s ease both}
/* the close */
.dark-cta{width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding:clamp(48px,6vw,84px) var(--fia-edge);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;background:var(--fia-ink);color:var(--fia-on-ink);border-top:1px solid var(--fia-on-ink-line)}
.dark-cta h2{max-width:20ch;color:#fff;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.03em}
.dark-cta p{margin-top:10px;color:var(--fia-on-ink-soft);font-size:14px}
@media (max-width:860px){
.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.dhero h1{max-width:none}
}
@media (max-width:560px){
.steps{grid-template-columns:1fr}
.step-tab{padding-top:13px}
}
/* the header rides the dark hero until the page moves */
.mark-light{display:none}
.home .masthead:not(.stuck){background:transparent;backdrop-filter:none;border-bottom-color:transparent}
.home .masthead:not(.stuck) .brand{color:#fff}
.home .masthead:not(.stuck) .mark-dark{display:none}
.home .masthead:not(.stuck) .mark-light{display:block}
.home .masthead:not(.stuck) .nav-links a{color:hsla(0,0%,100%,.72)}
.home .masthead:not(.stuck) .nav-links a:hover{color:#fff;background:hsla(0,0%,100%,.12)}
.home .masthead:not(.stuck) .nav-links a[aria-current]{color:#fff}
.home .masthead:not(.stuck) .pill{background:#fff;border-color:#fff;color:var(--fia-ink)}
.home .masthead:not(.stuck) .nav-toggle span{background:#fff}
/* the home page opens on the hero, so it carries no header offset */
.home .page{padding-top:0}
/* the footer closes on the same dark ground as the reference's */
.page-footer{margin-top:0;background:var(--fia-ink);color:var(--fia-on-ink-soft);border-top:1px solid var(--fia-on-ink-line)}
.page-footer .brand{color:#fff}
.page-footer .brand .mark-dark{display:none}
.page-footer .brand .mark-light{display:block}
.page-footer p{color:var(--fia-on-ink-soft)}
.page-footer nav{border-top-color:var(--fia-on-ink-line);color:var(--fia-on-ink-soft)}
.page-footer nav a:hover{color:#fff}
/* ══════════════════════════════════════════════════════════════
CONSOLIDATION — the components the merged pages needed
══════════════════════════════════════════════════════════════ */
/* the proof slot in the hero: one synthetic review's figures */
/* figures on a light ground */
/* the usual route against this one */
/* small cards in threes */
.dirs{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dirs article{padding:18px 20px;border:1px solid var(--fia-line-strong);border-radius:var(--fia-radius);background:linear-gradient(180deg,#fff,var(--fia-band-2))}
.dirs b{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:550}
.dirs b::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--fia-accent)}
.dirs p{margin-top:8px;color:var(--fia-text-soft);font-size:13px;line-height:1.55}
/* the three classes on the home page: no card, a line icon over each
column, generous gutters. Scoped so the start page's six cards keep
their zinc ground. */
.classes .dirs{margin-top:clamp(36px,4.5vw,56px);padding-top:clamp(28px,3.5vw,44px);gap:clamp(28px,4vw,56px);border-top:1px solid var(--fia-line)}
.classes .dirs article{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.classes .dirs .ico{display:block;width:26px;height:26px;margin-bottom:22px;color:var(--fia-accent)}
.classes .dirs .ico svg{display:block;width:100%;height:100%}
.classes .dirs b{display:block;font-size:17px;font-weight:550;line-height:1.3;letter-spacing:-.01em;color:var(--fia-text-deep)}
.classes .dirs b::before{content:none}
.classes .dirs p{margin-top:8px;max-width:34ch;font-size:15px;line-height:1.6;color:var(--fia-text-soft)}
/* a wide product shot straight under a hero */
/* the fit list reuses the permission panel; its columns just read differently */
.perm.fit-panel .perm-col h3 small{letter-spacing:.09em}
@media (max-width:860px){
.dirs{grid-template-columns:1fr}
.classes .dirs{gap:32px}
.classes .dirs .ico{margin-bottom:14px}
.classes .dirs p{max-width:none}
}
/* ══════════════════════════════════════════════════════════════
SOLUTION PAGES, SECOND PASS — the reference's cream passage
One warm band carries the section lead and then three feature
rows, every panel on the right, copy on the left. A white
"returns into your systems" strip and a two-column close follow.
══════════════════════════════════════════════════════════════ */
.band .rows{margin-top:clamp(30px,3.6vw,52px);gap:clamp(40px,5vw,84px)}
.band .row,.band .row.alt{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.band .row.alt .row-copy{order:0}
.band .row-ui{background:#fff;box-shadow:0 12px 40px -8px rgba(0,36,100,.14)}
.band .row-ui>.win{border:0;box-shadow:none;border-radius:0}
.band .row-ui>.win .win-bar{display:none}
/* the answer list: a query, a count, the rows, a "more" line */
.ans-q{padding:13px 15px;border-radius:var(--fia-radius-sm);background:var(--fia-surface);font-size:13px;line-height:1.5;color:var(--fia-text)}
.ans-n{margin:14px 0 8px;color:var(--fia-muted);font-size:12px}
.ans-n b{color:var(--fia-text);font-weight:500}
.ans-r{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--fia-line);border-radius:var(--fia-radius-sm);background:#fff}
.ans-r+.ans-r{margin-top:6px}
.ans-r.top{border-color:var(--fia-line-strong);background:linear-gradient(180deg,#fff,var(--fia-band-2))}
.ans-r>i{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:7px;background:var(--fia-accent-soft);color:var(--fia-accent-ink);font-family:var(--fia-mono);font-size:9.5px;font-style:normal;font-weight:500}
.ans-r>div{flex:1;min-width:0}
.ans-r b{display:block;font-size:12.5px;font-weight:550}
.ans-r b span{margin-left:6px;color:var(--fia-muted);font-weight:400}
.ans-r small{display:block;margin-top:2px;color:var(--fia-muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ans-r em{flex:none;font-style:normal;padding:3px 8px;border-radius:4px;background:var(--fia-ok-soft);border:1px solid var(--fia-ok-line);color:var(--fia-ok);font-family:var(--fia-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase}
.ans-r em.hold{background:#fbf7ec;border-color:#e8dfc9;color:#7a5c1b}
.ans-more{margin-top:12px;color:var(--fia-muted);font-size:12px}
/* the signals card: one activity, its badge, the signals behind it */
.sig-head{display:flex;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--fia-line)}
.sig-head>i{flex:none;min-width:36px;height:36px;padding:0 9px;display:grid;place-items:center;white-space:nowrap;border-radius:8px;background:var(--fia-accent-soft);color:var(--fia-accent-ink);font-family:var(--fia-mono);font-size:10px;font-style:normal;font-weight:500}
.sig-head>div{flex:1;min-width:0}
.sig-head b{display:block;font-size:14px;font-weight:550}
.sig-head small{display:block;margin-top:2px;color:var(--fia-muted);font-size:12px}
.sig-badge{flex:none;padding:4px 9px;border-radius:4px;background:var(--fia-accent);color:#fff;font-family:var(--fia-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase}
.sig-k{margin:16px 0 10px;color:var(--fia-muted);font-family:var(--fia-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.sig{padding:12px 14px;border:1px solid var(--fia-line);border-radius:var(--fia-radius-sm);background:var(--fia-band-2)}
.sig+.sig{margin-top:8px}
.sig b{display:block;font-size:12.5px;font-weight:550}
.sig p{margin-top:3px;color:var(--fia-text-soft);font-size:12px;line-height:1.5}
.sig-src{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.sig-src span{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--fia-line);border-radius:4px;background:#fff;color:var(--fia-text-soft);font-family:var(--fia-mono);font-size:10px}
.sig-src svg{flex:none;height:10px}
/* the ranked table */
.rank-k{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--fia-text-soft);font-size:12.5px;font-weight:500}
.rank-k svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4}
.rank-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rank{width:100%;min-width:560px;border-collapse:collapse;font-size:11.5px;border:1px solid var(--fia-line);border-radius:var(--fia-radius-sm);overflow:hidden}
.rank th{padding:7px 10px;text-align:left;color:var(--fia-muted);font-family:var(--fia-mono);font-size:9.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;background:var(--fia-surface);border-bottom:1px solid var(--fia-line)}
.rank td{padding:7px 10px;border-bottom:1px solid var(--fia-line-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.rank tr:last-child td{border-bottom:0}
.rank td.n{font-family:var(--fia-mono);color:var(--fia-accent-ink);font-weight:500;text-align:right}
.rank td.n.ok{color:var(--fia-ok)}
.rank td.n.warn{color:#7a5c1b}
.rank .status{font-size:9px}
/* returns into the systems you already run */
.exports{padding:clamp(48px,6vw,88px) 0 clamp(30px,4vw,56px);border-bottom:1px solid var(--fia-line)}
.exports h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;letter-spacing:-.025em}
.exports>p{max-width:56ch;margin-top:12px;color:var(--fia-text-soft);font-size:14.5px;line-height:1.6}
.exports ul{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.exports li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--fia-line-strong);border-radius:var(--fia-radius-sm);background:#fff;font-size:13px;font-weight:500}
.exports li svg{flex:none;height:14px}
.exports small{display:block;margin-top:14px;color:var(--fia-muted);font-size:12px}
/* the close, in two columns as on the reference */
.cta-by{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--fia-muted);font-size:12.5px}
.cta-by img{width:14px;height:14px}
.cta-by b{color:var(--fia-text);font-weight:500}
/* ── the footer, in four columns ── */
.page-footer{padding:clamp(40px,5vw,64px) var(--fia-edge) 36px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px clamp(24px,4vw,64px)}
.foot-grid .brand{color:#fff}
.foot-grid>div>p{margin:14px 0 0;max-width:32ch;color:var(--fia-on-ink-soft);font-size:13px;line-height:1.55}
.foot-grid h4{margin:0 0 14px;color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.foot-grid ul{display:grid;gap:10px}
.foot-grid li a{color:var(--fia-on-ink-soft);font-size:13.5px;transition:color .15s ease}
.foot-grid li a:hover{color:#fff}
.foot-line{margin-top:clamp(28px,3.4vw,44px);padding-top:20px;border-top:1px solid var(--fia-on-ink-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;color:var(--fia-on-ink-soft);font-size:12.5px}
@media (max-width:860px){
.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.band .row,.band .row.alt{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
.foot-grid{grid-template-columns:1fr} }
/* ── Marks, each beside the name it belongs to ── */
.cta-by img{width:16px;height:16px}
.foot-by{margin-top:22px!important;max-width:none!important}
.foot-by span{display:block;margin-bottom:10px;color:var(--fia-on-ink-soft);font-size:11.5px;letter-spacing:.02em}
.foot-by img{display:block;width:auto;height:34px;opacity:.92;transition:opacity .15s ease}
.foot-by a:hover img{opacity:1}
/* the collage windows carry rendered screens, not sketches */
.cw-body>img{display:block;width:100%;height:auto}
.cw-over{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 22%,rgba(255,255,255,.96) 78%,rgba(255,255,255,0));font-size:10px}
/* ══════════════════════════════════════════════════════════════
HOW IT WORKS — the page that answers "what would you build today"
Centered hero with the capability list, a slanted photo band, one
verified quote, the problem in three cards, the three things the
product is, the four steps, tabbed starting scopes with a run card
over a photograph, five capability rows against a dark gridded
panel, the stack grid, the maintenance promise, the comparison.
══════════════════════════════════════════════════════════════ */
.hiw-hero{width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding:clamp(48px,7vw,120px) var(--fia-edge) clamp(56px,7vw,110px);background:var(--fia-band-2);text-align:center}
.kicker{display:inline-block;color:var(--fia-accent);font-family:var(--fia-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.hiw-hero h1{max-width:14ch;margin:18px auto 0;font-size:clamp(2.4rem,6vw,4.75rem);font-weight:500;line-height:1.02;letter-spacing:-.04em}
.caplist{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:780px;margin:26px auto 0}
.caplist li{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--fia-text-deep)}
.caplist svg{width:15px;height:15px;fill:var(--fia-accent)}
.hiw-hero>p{max-width:62ch;margin:26px auto 0;color:var(--fia-text-soft);font-size:15.5px;line-height:1.6}
.hiw-hero .pill{margin-top:30px;height:52px;padding:0 26px;font-size:15px}
/* the slanted photograph */
.slant{position:relative;width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);height:clamp(220px,32vw,440px);background:var(--fia-band-2);overflow:hidden}
.slant img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* one verified quote */
.quote{max-width:820px;margin:0 auto;padding:clamp(56px,7vw,110px) 0 clamp(44px,5vw,80px);text-align:center}
.quote blockquote{font-size:clamp(1.35rem,2.6vw,2rem);font-weight:500;line-height:1.3;letter-spacing:-.025em;color:var(--fia-text)}
.quote figcaption{margin-top:20px;color:var(--fia-muted);font-size:13.5px}
.quote figcaption b{color:var(--fia-text-deep);font-weight:500}
.quote figcaption i{font-style:italic}
.quote>p{max-width:60ch;margin:30px auto 0;padding-top:26px;border-top:1px solid var(--fia-line);color:var(--fia-text-soft);font-size:15px;line-height:1.65}
/* two-column sections in the second reference's rhythm */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);padding:clamp(56px,7vw,110px) 0;align-items:start}
.two.b{border-top:1px solid var(--fia-line)}
.two h2{margin-top:16px;font-size:clamp(1.9rem,3.6vw,3rem);font-weight:500;line-height:1.08;letter-spacing:-.035em}
.two>div>p{margin-top:20px;max-width:52ch;color:var(--fia-text-soft);font-size:16px;line-height:1.7}
.two>div>p.strong{color:var(--fia-text-deep);font-weight:600;font-size:15px}
.two .pill{margin-top:26px}
.stack-cards{display:grid;gap:12px}
.stack-cards article{padding:26px 28px;border-radius:var(--fia-radius);background:var(--fia-surface)}
.stack-cards h3{font-size:1.35rem;font-weight:500;letter-spacing:-.02em}
.stack-cards p{margin-top:8px;color:var(--fia-text-soft);font-size:14px;line-height:1.6}
/* three cards, with an icon each */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(30px,4vw,56px)}
.three article{padding:28px 26px 30px;border-radius:var(--fia-radius);background:var(--fia-surface)}
.three svg{width:20px;height:20px;fill:none;stroke:var(--fia-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.three h3{margin-top:56px;font-size:1.3rem;font-weight:500;letter-spacing:-.02em;line-height:1.2}
.three p{margin-top:10px;color:var(--fia-text-soft);font-size:14px;line-height:1.6}
.three.compact h3{margin-top:22px}
/* tabbed starting scopes */
.scopes{padding:clamp(56px,7vw,110px) 0 clamp(40px,5vw,72px);text-align:center}
.scopes>h2{max-width:20ch;margin:0 auto;font-size:clamp(1.9rem,3.6vw,3rem);font-weight:500;line-height:1.08;letter-spacing:-.035em}
.scopes>p{max-width:46ch;margin:18px auto 0;color:var(--fia-text-soft);font-size:15.5px;line-height:1.6}
.scope-tabs{width:calc(100% + var(--fia-edge)*2);margin:clamp(30px,4vw,52px) calc(var(--fia-edge)*-1) 0;padding:0 var(--fia-edge);border-block:1px solid var(--fia-line);background:var(--fia-band-2);overflow-x:auto;scrollbar-width:none}
.scope-tabs::-webkit-scrollbar{display:none}
.scope-tabs>div{display:flex;justify-content:center;gap:4px;width:max-content;min-width:100%}
.scope-tab{display:inline-flex;align-items:center;gap:8px;padding:18px 16px;border:0;border-bottom:2px solid transparent;background:none;color:var(--fia-text-soft);font:inherit;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .15s ease}
.scope-tab svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.scope-tab:hover{color:var(--fia-text)}
.scope-tab[aria-selected="true"]{color:var(--fia-text);border-bottom-color:var(--fia-accent)}
.scope-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;padding-top:clamp(30px,4vw,52px);text-align:left}
.scope-panel[hidden]{display:none}
.scope-panel h3{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:500;line-height:1.1;letter-spacing:-.03em}
.scope-panel>div>p{margin-top:16px;max-width:44ch;color:var(--fia-text-soft);font-size:15px;line-height:1.65}
.scope-panel .pill{margin-top:22px}
.scope-steps{margin-top:24px;display:grid;gap:10px}
.scope-steps li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px}
.scope-steps b{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:4px;background:var(--fia-surface);font-family:var(--fia-mono);font-size:10.5px;font-weight:500;color:var(--fia-text-deep)}
.scope-steps span{display:block;color:var(--fia-muted);font-size:12.5px}
.scope-steps li>div>strong{font-weight:600;color:var(--fia-text-deep)}
/* the run card over its photograph */
.shotcard{position:relative;min-height:440px;border-radius:var(--fia-radius);overflow:hidden;background:var(--fia-ink-2)}
.shotcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.shotcard::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1px) 0 0/6px 6px}
.run{position:relative;z-index:2;width:min(430px,calc(100% - 40px));margin:clamp(28px,4vw,56px) auto;border-radius:var(--fia-radius-sm);background:rgba(255,255,255,.9);backdrop-filter:blur(8px);box-shadow:0 20px 50px -20px rgba(0,36,100,.5);animation:fia-fade-up .45s ease both}
.run-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--fia-line)}
.run-bar i{width:8px;height:8px;border-radius:50%}
.run-bar span{margin-left:auto;font-family:var(--fia-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fia-muted)}
.run-head{display:flex;gap:12px;padding:14px 16px 12px}
.run-head i{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:var(--fia-accent-soft)}
.run-head svg{width:14px;height:14px;fill:none;stroke:var(--fia-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.run-head b{display:block;font-size:14.5px;font-weight:600}
.run-head small{display:block;margin-top:2px;color:var(--fia-muted);font-size:11.5px}
.run-bars{display:flex;align-items:flex-end;gap:6px;height:88px;margin:0 16px;padding:12px 10px 0;border-radius:6px;background:var(--fia-surface)}
.run-bars i{flex:1;border-radius:3px 3px 0 0;background:#c9d2e2}
.run-bars i.hi{background:var(--fia-accent)}
.run-rows{padding:12px 16px 4px}
.run-rows div{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;background:var(--fia-surface);font-size:12px;margin-bottom:6px}
.run-rows svg{width:13px;height:13px;fill:none;stroke:var(--fia-ok);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.run-foot{display:flex;justify-content:space-between;padding:10px 16px 14px;font-size:12px;color:var(--fia-muted)}
.run-foot b{color:var(--fia-text-deep);font-weight:600}
/* the five capabilities against the dark gridded panel */
.caps{display:grid;gap:clamp(40px,6vw,96px);padding:clamp(56px,7vw,110px) 0}
.cap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.cap.alt .cap-copy{order:2}
.cap-copy .kicker{color:var(--fia-muted)}
.cap-copy h3{margin-top:16px;font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:500;line-height:1.08;letter-spacing:-.035em}
.cap-copy .line{display:flex;align-items:center;gap:9px;margin-top:20px;color:var(--fia-text-deep);font-size:15px;font-weight:500}
.cap-copy .line svg{width:15px;height:15px;fill:var(--fia-accent);flex:none}
.cap-copy p{margin-top:18px;max-width:46ch;color:var(--fia-text-soft);font-size:15px;line-height:1.7}
.cap-panel{position:relative;padding:clamp(28px,5vw,72px) clamp(22px,4vw,56px);border-radius:var(--fia-radius);background:var(--fia-ink);background-image:repeating-linear-gradient(90deg,hsla(0,0%,100%,.09) 0 1px,transparent 1px 25%);background-position:12.5% 0;overflow:hidden}
.cap-panel img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 0 1px hsla(0,0%,100%,.12)}
/* the stack grid */
.stackgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stackgrid article{padding:22px 22px 24px;border-radius:var(--fia-radius);background:var(--fia-surface)}
.stackgrid .kicker{color:var(--fia-muted);font-size:10px}
.stackgrid ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.stackgrid li{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 12px;border-radius:6px;background:#fff;border:1px solid var(--fia-line);font-size:12.5px;font-weight:500}
.stackgrid li svg{height:15px;flex:none}
.stackgrid li.txt{font-family:var(--fia-mono);font-size:11px;letter-spacing:.04em}
.stack-lines{margin-top:36px;border-top:1px solid var(--fia-line)}
.stack-lines li{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--fia-line);font-size:14px;color:var(--fia-text-soft);line-height:1.5}
.stack-lines li b{color:var(--fia-text-deep);font-weight:600}
.stack-lines svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--fia-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the comparison */
.cmp{padding:clamp(56px,7vw,110px) 0}
.cmp .kicker{color:var(--fia-muted)}
.cmp h2{margin-top:16px;max-width:22ch;font-size:clamp(1.9rem,3.6vw,3rem);font-weight:500;line-height:1.08;letter-spacing:-.035em}
.cmp>p{margin-top:18px;max-width:64ch;color:var(--fia-text-soft);font-size:16px;line-height:1.65}
.cmp table{width:100%;margin-top:clamp(28px,4vw,48px);border-collapse:separate;border-spacing:0;border:1px solid var(--fia-line);border-radius:var(--fia-radius-sm);overflow:hidden}
.cmp th{padding:18px 20px;text-align:left;font-size:14px;font-weight:600;background:var(--fia-surface);border-bottom:1px solid var(--fia-line)}
.cmp th+th,.cmp td+td{border-left:1px solid var(--fia-line)}
.cmp td{position:relative;padding:20px 20px 20px 48px;font-size:14.5px;color:var(--fia-text-soft);border-bottom:1px solid var(--fia-line);vertical-align:top;width:50%}
.cmp td.y{color:var(--fia-text-deep)}
.cmp td svg{position:absolute;left:20px;top:21px;width:16px;height:16px;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cmp td.n svg{stroke:var(--fia-muted)}
.cmp td.y svg{stroke:var(--fia-accent)}
.cmp tfoot td{border-bottom:0;padding:16px 20px}
.cmp tfoot td{padding-left:20px}
.cmp tfoot a{color:var(--fia-text-deep);font-weight:600}
@media (max-width:900px){
.two,.cap,.cap.alt,.scope-panel{grid-template-columns:1fr}
.cap.alt .cap-copy{order:0}
.three{grid-template-columns:1fr}
.stackgrid{grid-template-columns:1fr}
.shotcard{min-height:0}
.cmp td,.cmp th{display:block;width:auto;border-left:0}
.cmp tr{display:block}
}
/* the attribution carries the YC mark inline */
.yc-line{display:inline-flex;align-items:center;gap:6px;vertical-align:-1px}
.yc{width:15px;height:15px;flex:none}
/* ── How it works, tightened: less air between the beats ── */
.hiw-hero{padding:clamp(40px,6vw,88px) var(--fia-edge) clamp(44px,6vw,84px)}
.quote{padding:clamp(44px,6vw,80px) 0 clamp(36px,4vw,60px)}
.two{padding:clamp(44px,6vw,84px) 0}
.scopes{padding:clamp(44px,6vw,84px) 0 clamp(32px,4vw,56px)}
.caps{gap:clamp(32px,5vw,64px);padding:clamp(44px,6vw,84px) 0;border-top:1px solid var(--fia-line)}
.cmp{padding:clamp(44px,6vw,84px) 0}
.stack-cards p,.three p{font-size:13.5px}
/* the passage on the home page sits on the warm ground, as it does on the reference */
.ba-home{width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding:clamp(48px,6vw,88px) var(--fia-edge);border-bottom:0;background:var(--fia-band)}
.ba-home .scene{margin-inline:auto;max-width:1000px}
.ba-home .ba-note{color:var(--fia-muted)}
/* the hero says the job in three verbs, not in figures */
/* ── Real brand marks, as : one height, natural width ── */
.blogo{display:inline-block;height:15px;width:auto;max-width:150px;vertical-align:middle;flex:none}
.reads .blogo{height:16px}
.sc-src .blogo,.pipe-src .blogo,.exports .blogo,.stackgrid .blogo{height:14px}
.sig-src .blogo{height:10px}
.rank .blogo{height:11px}
/* ── The nav dot: one filled point that glides to whatever the cursor is on ── */
.nav-links{position:relative}
.nav-dot{position:absolute;left:0;bottom:-3px;width:5px;height:5px;border-radius:50%;background:var(--fia-accent);opacity:0;transform:translateX(var(--x,0px)) scale(.6);pointer-events:none;transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .18s ease}
.nav-dot.on{opacity:1;transform:translateX(var(--x,0px)) scale(1)}
.home .masthead:not(.stuck) .nav-dot{background:#fff}
@media (max-width:900px){
.nav-dot{display:none}}
@media (prefers-reduced-motion:reduce){
.nav-dot{transition:none}}
/* ══════════════════════════════════════════════════════════════
ONE SYSTEM — the unification pass
Pages were built in passes and drifted: three hero scales, four
section-title scales, two card languages, three closes. This
block sits last and settles each of those to a single rule.
══════════════════════════════════════════════════════════════ */
:root{
--fia-h1:clamp(2.2rem,4.6vw,3.6rem);
--fia-h2:clamp(1.75rem,3vw,2.5rem);
--fia-sec:clamp(44px,6vw,84px);
}
/* type: one display scale */
.dhero h1,.hiw-hero h1,.vhero h1,.page-hero h1,.legal-page h1{font-size:var(--fia-h1);font-weight:500;line-height:1.06;letter-spacing:-.035em}
.vhero h1 b{font-weight:700}
.page-section>h2,.page-lead>h2,.two h2,.scopes>h2,.cmp h2,.band-lead h2,.ba-lead h2,.mosaic-head h2,.faq>h2,.dark-cta h2,.exports h2,.statement h2,.process>h2,.legal-page h2{
font-size:var(--fia-h2);font-weight:500;line-height:1.12;letter-spacing:-.03em}
.statement h2{max-width:26ch}
.dark-cta h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
/* labels: one kicker */
.eyebrow,.kicker,.row-k,.stackgrid .kicker,.cap-copy .kicker,.cmp .kicker{display:inline-block;color:var(--fia-accent);font-family:var(--fia-mono);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.page-hero h1,.vhero h1{margin-top:16px}
/* grounds: white and one cream, alternating */
.hiw-hero{background:#fff}
.quote{width:calc(100% + var(--fia-edge)*2);max-width:none;margin-inline:calc(var(--fia-edge)*-1);padding:var(--fia-sec) var(--fia-edge);background:var(--fia-band)}
.quote blockquote,.quote figcaption,.quote>p{max-width:820px;margin-inline:auto}
.quote>p{max-width:60ch}
.ground{width:calc(100% + var(--fia-edge)*2);margin-inline:calc(var(--fia-edge)*-1);padding-inline:var(--fia-edge);background:var(--fia-band);border-bottom:0}
/* rhythm */
.page-section,.two,.scopes,.caps,.cmp,.exports,.band,.statement,.process,.faq{padding-top:var(--fia-sec);padding-bottom:var(--fia-sec)}
.two.b{border-top:0}
.caps{border-top:0}
/* cards: text sits flat on zinc-100, screens sit framed on white */
.verticals article,.panel,.dirs article,.three article,.stack-cards article,.stackgrid article{border:0;border-radius:var(--fia-radius);background:var(--fia-surface);box-shadow:none}
.ground .verticals article,.ground .panel,.ground .dirs article{background:#fff}
.row-ui,.win,.cap-panel,.step-panel{box-shadow:0 12px 40px -8px rgba(0,36,100,.15)}
/* one close everywhere */
.dark-cta{margin-top:0}
.dark-cta .cta-by{color:var(--fia-on-ink-soft)}
.dark-cta .cta-by b{color:#fff}
.legal-page h2{font-size:clamp(1.25rem,2vw,1.6rem)}
.legal-page .eyebrow{color:var(--fia-accent)}
/* ── The slanted band, as a three-panel strip: one skew, no gaps but the seams ── */
.slant{height:clamp(240px,34vw,460px);background:#fff}
.slant img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slant .p1{left:0;width:23%;clip-path:polygon(0 0,100% 0,65.2% 100%,0 100%);object-position:50% 50%}
.slant .p2{clip-path:polygon(25% 0,85% 0,77% 100%,17% 100%);object-position:50% 35%}
.slant .p3{left:auto;right:0;width:21%;clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);object-position:50% 30%}
@media (max-width:760px){
.slant .p1{width:30%;clip-path:polygon(0 0,100% 0,73% 100%,0 100%)}
.slant .p2{clip-path:polygon(32% 0,100% 0,100% 100%,24% 100%)}
.slant .p3{display:none}
}
/* ── Hero, shorter; the strip as white marks flowing on navy; the statement centred and compact ── */
.dhero{min-height:0}
.dhero-in{padding:calc(var(--fia-header) + clamp(48px,7vw,88px)) var(--fia-edge) clamp(40px,5.5vw,64px)}
.dhero-in>p{margin-top:18px;max-width:44ch}
.dhero .pill{margin-top:26px}
.strip{padding:22px 0}
.strip ul{gap:clamp(40px,5.5vw,72px)}
.strip li{padding:0;border-radius:0;background:none;color:hsla(0,0%,100%,.82);font-size:13.5px}
.strip .blogo{height:18px;max-width:150px;filter:brightness(0) invert(1);opacity:.88}
.strip img[src$="sap-white.svg"]{filter:none}
.statement{text-align:center}
.statement h2{max-width:30ch;margin-inline:auto;font-size:clamp(1.35rem,2.3vw,1.85rem);font-weight:400;line-height:1.35;letter-spacing:-.02em;color:var(--fia-text)}
.statement h2 span{font-weight:400;color:var(--fia-text-soft)}
.statement .pill{margin-top:26px}
/* ── Hero, tighter still ── */
.dhero-in{padding:calc(var(--fia-header) + clamp(36px,5.5vw,64px)) var(--fia-edge) clamp(36px,5vw,56px)}
.dhero h1{max-width:15ch}
.dhero-in>p{margin-top:16px;max-width:46ch;font-size:clamp(14.5px,1.2vw,16px)}
.dhero .pill{margin-top:22px}
.strip img[src$="zendesk.svg"]{height:26px}
.strip img[src$="powerbi.svg"],.strip img[src$="microsoft365.svg"],.strip img[src$="slack.svg"]{height:17px}
/* ── Hero: no kicker, wider text column, tighter still ── */
.dhero-in{padding:calc(var(--fia-header) + clamp(28px,4.5vw,52px)) var(--fia-edge) clamp(30px,4.2vw,48px)}
.dhero h1{max-width:19ch;margin-top:0}
.dhero-in>p{max-width:60ch}
/* ── Hero a touch taller; the statement left-set and wide, as on the reference ── */
.dhero-in{padding-top:calc(var(--fia-header) + clamp(40px,6vw,76px));padding-bottom:clamp(44px,6vw,80px)}
.statement{text-align:left}
.statement h2{max-width:46ch;margin-inline:0;font-size:clamp(1.45rem,2.5vw,2rem)}
.statement .pill{margin-top:28px}
/* ── Statement: smaller, centred, still wide ── */
.statement{text-align:center}
.statement h2{max-width:56ch;margin-inline:auto;font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5}
.statement .pill{margin-top:24px}
/* ── Two grounds only: navy where it matters, white everywhere else.
The former cream sections keep their edges as hairlines. ── */
.statement,.ba-home,.band,.ground,.quote{background:#fff;border-top:1px solid var(--fia-line)}
.ba-home{border-bottom:1px solid var(--fia-line)}
.band{border-bottom:1px solid var(--fia-line)}
.scope-tabs{background:#fff}
.hiw-hero{background:#fff}
/* the band carries real photographs: team at work, planning wall, reviewers at a laptop */
.slant .p1{object-position:45% 50%}
.slant .p3{object-position:50% 40%}
.slant .p2{object-position:50% 22%}
/* ══════════════════════════════════════════════════════════════
PRODUCT — two products, one question
Two cards that float in, a self-advancing four-screen tour for
Review, a staggered timeline with a live experiment bar for Memory.
══════════════════════════════════════════════════════════════ */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3.4vw,44px)}
.duo-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,32px);border:1px solid var(--fia-line);border-radius:var(--fia-radius-lg);background:#fff;color:inherit;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .2s ease}
.duo-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(0,36,100,.35);border-color:var(--fia-accent-line)}
.duo-card h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:500;line-height:1.12;letter-spacing:-.03em}
.duo-card>p{max-width:46ch;color:var(--fia-text-soft);font-size:14.5px;line-height:1.6}
.duo-chips{display:flex;flex-wrap:wrap;gap:6px}
.duo-chips span{padding:4px 9px;border:1px solid var(--fia-line);border-radius:4px;font-family:var(--fia-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fia-text-soft)}
.duo-shot{margin-top:6px;border-radius:var(--fia-radius);background:var(--fia-ink);padding:clamp(14px,2vw,24px) clamp(14px,2vw,24px) 0;overflow:hidden;background-image:repeating-linear-gradient(90deg,hsla(0,0%,100%,.08) 0 1px,transparent 1px 25%)}
.duo-shot img{display:block;width:100%;height:auto;border-radius:6px 6px 0 0;box-shadow:0 20px 50px -18px rgba(0,0,0,.6),0 0 0 1px hsla(0,0%,100%,.12);transform:translateY(6px);transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.duo-card:hover .duo-shot img{transform:translateY(0)}
.duo-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--fia-accent);font-size:14px;font-weight:500}
.duo-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.duo-card:hover .duo-go svg{transform:translateX(3px)}
/* the tour: dark panel, screens swap with a rise */
.tour .step-panel{padding:0;border:0;background:var(--fia-ink);background-image:repeating-linear-gradient(90deg,hsla(0,0%,100%,.08) 0 1px,transparent 1px 25%);box-shadow:none;overflow:hidden}
.tour .step-copy{margin:0;padding:clamp(18px,2.4vw,28px) clamp(18px,3vw,40px) 0;text-align:left;color:var(--fia-on-ink-soft);max-width:none;display:flex;gap:16px;align-items:baseline}
.tour .step-copy b{flex:none;color:#fff;font-weight:600}
.tour .step-shot{padding:clamp(16px,2.4vw,32px) clamp(18px,3vw,40px) 0}
.tour .step-shot img,.tour .step-shot .win{display:block;width:100%;height:auto;max-width:none;margin:0;border-radius:6px 6px 0 0;box-shadow:0 30px 70px -20px rgba(0,0,0,.6),0 0 0 1px hsla(0,0%,100%,.12);animation:fia-fade-up .5s ease both}
.tour .step-shot .win{border-radius:6px;margin-bottom:clamp(16px,2.4vw,32px)}
/* the memory timeline */
.tl{position:relative;display:grid;gap:0;padding-left:26px}
.tl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1.5px;background:var(--fia-line-strong)}
.tl li{position:relative;padding:12px 0 18px}
.tl li::before{content:"";position:absolute;left:-23px;top:16px;width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid var(--fia-accent)}
.tl li.on::before{background:var(--fia-accent);box-shadow:0 0 0 4px var(--fia-accent-soft)}
.tl b{display:block;font-size:14.5px;font-weight:600}
.tl small{display:block;margin-top:3px;color:var(--fia-muted);font-size:12.5px;line-height:1.45}
.tl .k{font-family:var(--fia-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fia-accent)}
.bar{margin-top:9px;height:6px;border-radius:99px;background:var(--fia-surface);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--fia-accent)}
.stagger.armed>*{opacity:0}
.stagger.in>*{animation:fia-row-in .5s ease both}
.stagger.in>*:nth-child(2){animation-delay:.12s}
.stagger.in>*:nth-child(3){animation-delay:.24s}
.stagger.in>*:nth-child(4){animation-delay:.36s}
.stagger.in>*:nth-child(5){animation-delay:.48s}
.stagger.in .bar i{animation:fia-bar 1.6s cubic-bezier(.2,.7,.3,1) .5s both}
@keyframes fia-bar{0%{width:0}to{width:var(--w,38%)}}
.stagger[data-reveal].armed{opacity:1;transform:none}
@media (max-width:860px){
.duo{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
.duo-card,.duo-shot img{transition:none}
.stagger.armed>*{opacity:1}
.stagger.in>*,.stagger.in .bar i{animation:none}
.bar i{width:var(--w,38%)}}
/* ══════════════════════════════════════════════════════════════
THE QUESTION — one form everywhere, and the places it is answered
══════════════════════════════════════════════════════════════ */
/* the answer for one function, under a solution hero's h1 */
.ask{margin-top:22px;padding-left:18px;border-left:2px solid var(--fia-accent)}
.ask-q{display:block;color:var(--fia-accent);font-family:var(--fia-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.ask p{margin:8px 0 0;max-width:44ch;color:var(--fia-text-deep);font-size:17px;font-weight:500;line-height:1.45;letter-spacing:-.012em}
.vhero-copy .ask+p{margin-top:22px}
/* the four questions, under the three classes on the home page */
.fourq{margin-top:clamp(36px,4.5vw,56px);padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--fia-line)}
.fourq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:18px}
.fourq .n{display:block;color:var(--fia-accent);font-family:var(--fia-mono);font-size:10.5px;letter-spacing:.12em}
.fourq b{display:block;margin-top:10px;font-size:15.5px;font-weight:550;line-height:1.3;letter-spacing:-.01em;color:var(--fia-text-deep)}
.fourq p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--fia-muted)}
/* inherited · why it existed · if built today: one row per class */
.askm-grid{margin-top:clamp(28px,3.5vw,44px);border-top:1px solid var(--fia-line-strong)}
.askm-head,.askm-row{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,2.6vw,36px);align-items:start}
.askm-head{padding:12px 0;border-bottom:1px solid var(--fia-line)}
.askm-head span{color:var(--fia-muted);font-family:var(--fia-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.askm-row{padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--fia-line)}
.askm-cls{display:flex;align-items:center;gap:10px;padding-top:2px;font-size:15.5px;font-weight:550;letter-spacing:-.01em;color:var(--fia-text-deep)}
.askm-cls svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--fia-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.askm-was,.askm-now{padding:12px 14px 6px;border-radius:var(--fia-radius-sm)}
.askm-was{border:1px solid var(--fia-line);background:var(--fia-surface)}
.askm-now{border:1px solid var(--fia-accent-line);background:#fff;padding-bottom:14px}
.askm-was>b,.askm-now>b{display:block;padding-bottom:8px;border-bottom:1px solid var(--fia-line-soft);font-size:13px;font-weight:550;letter-spacing:-.005em;color:var(--fia-text)}
.askm-was span{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:12px;line-height:1.35;color:var(--fia-text-soft)}
.askm-was span+span{border-top:1px solid var(--fia-line-soft)}
.askm-was em{flex:none;font-style:normal;font-family:var(--fia-mono);font-size:11px;color:var(--fia-muted);text-align:right}
.askm-now p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:var(--fia-text-deep)}
.askm-why{margin:0;padding-top:2px;font-size:14px;line-height:1.6;color:var(--fia-text-soft)}
.askm-row [data-k]::before{content:attr(data-k);display:none;margin-bottom:6px;color:var(--fia-muted);font-family:var(--fia-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
@media (max-width:960px){
.askm-head{display:none}
.askm-row{grid-template-columns:1fr 1fr;gap:18px}
.askm-cls{grid-column:1/-1}
.askm-row [data-k]::before{display:block}
.askm-was,.askm-now{padding-top:10px}
.askm-was>b,.askm-now>b{padding-top:0}
}
@media (max-width:600px){.askm-row{grid-template-columns:1fr}}
/* what a founder would still build: four tiles */
.keep{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(28px,3.5vw,44px)}
.keep article{padding:24px 22px 26px;border-radius:var(--fia-radius);background:var(--fia-surface)}
.keep svg{width:20px;height:20px;fill:none;stroke:var(--fia-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.keep h3{margin-top:18px;font-size:1.05rem;font-weight:550;letter-spacing:-.015em;line-height:1.25}
.keep p{margin-top:8px;color:var(--fia-text-soft);font-size:13.5px;line-height:1.55}
.keep-note{margin-top:20px;max-width:70ch;color:var(--fia-muted);font-size:13.5px;line-height:1.6}
.keep-note b{font-weight:550;color:var(--fia-text-deep)}
@media (max-width:960px){.keep{grid-template-columns:1fr 1fr}}
@media (max-width:860px){.fourq-grid{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:560px){.keep,.fourq-grid{grid-template-columns:1fr}}