/* Layout: full-bleed alternating rows. Media runs to the viewport edge on one side,
   text sits in the opposite half. The hero is a live cluster network on navy.       */
:root{
  --navy:#01193f; --blue:#005bfd; --paper:#fbfaf7; --rule:#e3e0d8; --tint:#eef2f7;
  --accent:var(--blue);
  --display:"Inter Tight",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --dtrack:-.032em; --dweight:700;
  --sans:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:max(22px,env(safe-area-inset-left,0px));
  --gutr:max(22px,env(safe-area-inset-right,0px));
  --maxw:1320px; --half:660px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--navy);
  font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img,video{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:var(--dweight);letter-spacing:var(--dtrack);
  text-wrap:balance;margin:0;line-height:1.03}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
.band{width:100%}
/* Every dark band carries the same field as the hero: the same five systems,
   the same traffic between them. It is the one piece of decoration on the
   site and it means something, so it belongs wherever the ground is dark. */
.band--navy{position:relative;overflow:hidden;isolation:isolate}
.band--navy>.wrap{position:relative;z-index:2}
.net{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.band__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to bottom,rgba(1,25,63,.62) 0%,rgba(1,25,63,.70) 50%,rgba(1,25,63,.82) 100%)}
.band--navy{background:var(--navy);color:var(--paper)}
.band--tint{background:var(--tint)}
.band>.wrap{padding-block:clamp(60px,8vw,118px)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin:0 0 18px;
  display:flex;align-items:center;gap:14px}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.22}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:24px;padding-block:14px}
.logo{height:54px;width:auto;flex-shrink:0}
.nav{display:flex;gap:30px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 24px;border-radius:2px;font-family:var(--sans);font-size:15px;font-weight:600;
  cursor:pointer;border:1px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn--p{background:var(--accent);color:#fff}
.btn--p:hover{background:color-mix(in srgb,var(--accent) 82%,#000);text-decoration:none}
.btn--oL{background:transparent;color:var(--paper);border-color:color-mix(in srgb,var(--paper) 50%,transparent)}
.btn--oL:hover{background:var(--paper);color:var(--navy);text-decoration:none}
.hdr .btn{flex-shrink:0}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:var(--paper);overflow:hidden;isolation:isolate;
  min-height:min(90vh,840px);display:flex;align-items:center}
#net{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(to bottom,rgba(1,25,63,.44) 0%,rgba(1,25,63,.56) 48%,rgba(1,25,63,.78) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(90px,11vw,140px);width:100%}
/* Above the breakpoint the argument takes both halves: the problem on the left,
   what we do about it on the right, so the payoff is read at the same moment as
   the problem rather than ten lines under it.                               */
@media (min-width:1040px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(48px,6vw,104px);align-items:start}
  .hero__kicker,.hero h1,.hero__sub{grid-column:1}
  .hero__p{grid-column:2;grid-row:3;margin-top:26px}
  .hero__cta,.hero__rule{grid-column:1/-1}
}
.hero__p{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px;max-width:46ch}
.hero__p li{padding-top:15px;border-top:1px solid color-mix(in srgb,var(--paper) 22%,transparent)}
.hero__p b{display:block;font-family:var(--display);font-size:clamp(19px,1.9vw,23px);
  font-weight:var(--dweight);letter-spacing:var(--dtrack);margin-bottom:5px}
.hero__p span{display:block;font-size:15.5px;line-height:1.5;
  color:color-mix(in srgb,var(--paper) 72%,transparent)}
.hero__kicker{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 66%,transparent);margin:0 0 26px}
.hero h1{font-size:clamp(34px,5.6vw,78px);max-width:19ch;line-height:1.0;
  text-shadow:0 2px 30px rgba(1,25,63,.60)}
.hero__sub{font-size:clamp(16.5px,1.5vw,19px);line-height:1.58;max-width:52ch;margin:22px 0 0;
  color:color-mix(in srgb,var(--paper) 72%,transparent)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__rule{margin-top:50px;border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent);padding-top:18px;
  display:flex;flex-wrap:wrap;gap:8px 34px;font-size:13px;
  color:color-mix(in srgb,var(--paper) 60%,transparent)}

/* ---------- inner page hero ---------- */
.phero{background:var(--navy);color:var(--paper)}
.phero .wrap{padding-block:clamp(56px,7.5vw,104px)}
.phero .eyebrow{color:color-mix(in srgb,var(--paper) 64%,transparent)}
.phero h1{font-size:clamp(33px,5.6vw,74px);max-width:17ch;line-height:.99}
.phero p{font-size:clamp(17px,1.7vw,21px);line-height:1.56;max-width:56ch;margin:26px 0 0;
  color:color-mix(in srgb,var(--paper) 78%,transparent)}

/* ---------- full-bleed alternating rows ---------- */
.rows{padding-block:clamp(60px,8vw,110px)}
.rows__head{max-width:var(--maxw);margin:0 auto clamp(40px,5vw,66px);
  padding-left:var(--gut);padding-right:var(--gutr)}
.rows__head h2{font-size:clamp(30px,4.2vw,56px);max-width:16ch}
.row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,4vw,76px)}
.row+.row{margin-top:clamp(66px,8vw,124px)}
.row__media,.row__txt{min-width:0}
.row__txt{max-width:var(--half);padding-right:var(--gutr);justify-self:start}
.row--flip .row__media{order:2}
/* a row whose media has not been supplied: the text takes the gutter and a
   readable measure rather than half a grid with a hole in it. */
/* The portrait is 800x800 native and is never upscaled. It is held at 400px,
   so a 2x display gets exactly the pixels it asks for and nothing is
   interpolated. The earlier 4:5 crop threw away a quarter of the width and
   then had to be shown larger than it was, which is what made it soft.   */
.row__media--p{display:flex;justify-content:flex-end}
.row--flip .row__media--p{justify-content:flex-start}
.pfoto{display:block;width:100%;max-width:400px;height:auto}
@media (max-width:900px){
  .row__media--p{justify-content:flex-start;padding-left:var(--gut)}
  .pfoto{max-width:320px}
}
.row--solo{grid-template-columns:1fr}
.row--solo .row__txt{padding-left:var(--gut);padding-right:var(--gutr);
  max-width:min(var(--maxw),72ch);margin:0 auto;justify-self:stretch}
.row--flip .row__txt{order:1;padding-right:0;padding-left:var(--gut);justify-self:end}
.row__txt h3{font-size:clamp(27px,3.2vw,44px);max-width:17ch;margin:0 0 20px}
.row__txt p{font-size:17.5px;line-height:1.62;max-width:50ch;color:color-mix(in srgb,var(--navy) 80%,transparent);margin:0 0 16px}
.row__txt p.lede{font-size:19.5px;color:color-mix(in srgb,var(--navy) 92%,transparent)}
.ptag{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin:0 0 22px;
  color:color-mix(in srgb,var(--navy) 48%,transparent)}
.ptag b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;text-transform:none;
  color:var(--navy);font-weight:700}
.ptag img{display:block;width:auto}
.ptag__r,.sig__r{display:block;width:1px;height:15px;background:var(--rule);flex:none}
/* cut to a common cap height, so the overall heights differ on purpose */
.lg--pm{height:22px}.lg--ps{height:23px}.lg--te{height:19px}
.sig{display:flex;align-items:center;gap:12px;margin:26px 0 0;padding-top:18px;
  border-top:1px solid var(--rule);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--navy) 48%,transparent)}
.sig img{display:block;width:auto}
.stat{font-family:var(--display);font-size:clamp(52px,7.4vw,104px);font-weight:var(--dweight);line-height:.9;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin:0 0 10px}
.stat--b{color:var(--accent)}
.statlab{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--navy) 55%,transparent);margin:0 0 30px;max-width:30ch}

/* ---------- media ---------- */
.shot{border:1px solid var(--rule);background:#fff;overflow:hidden;
  box-shadow:0 2px 4px rgba(1,25,63,.05),0 26px 60px -30px rgba(1,25,63,.42)}
.shot__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#f1f1f0;border-bottom:1px solid var(--rule)}
.shot__bar i{width:9px;height:9px;border-radius:50%;background:#babcbc;display:block}
.shot__url{margin-left:10px;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:color-mix(in srgb,var(--navy) 52%,transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot img,.shot video{width:100%;height:auto}
.cap{font-size:13px;line-height:1.5;margin:13px 0 0;color:color-mix(in srgb,var(--navy) 58%,transparent);
  padding-left:var(--gut);padding-right:var(--gutr);max-width:62ch}
.row:not(.row--flip) .cap{padding-left:var(--gut)}
.ph{border:2px dashed color-mix(in srgb,var(--navy) 30%,transparent);
  background:repeating-linear-gradient(135deg,transparent,transparent 11px,color-mix(in srgb,var(--navy) 4%,transparent) 11px,color-mix(in srgb,var(--navy) 4%,transparent) 22px);
  display:grid;place-items:center;text-align:center;padding:40px 24px;min-height:330px}
.ph b{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--navy) 66%,transparent);margin-bottom:10px}
.ph span{font-size:14px;max-width:34ch;color:color-mix(in srgb,var(--navy) 58%,transparent)}
.ph--sq{aspect-ratio:4/5;min-height:0}

/* ---------- figures rebuilt from anonymised client reviews ---------- */
.fig{border:1px solid var(--rule);background:#fff;max-width:100%;padding:clamp(16px,2.2vw,28px);overflow-x:auto;
  box-shadow:0 2px 4px rgba(1,25,63,.05),0 26px 60px -30px rgba(1,25,63,.42)}
.fig__t{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.018em;margin:0 0 5px}
.fig__s{font-size:12.5px;line-height:1.45;margin:0 0 20px;max-width:58ch;
  color:color-mix(in srgb,var(--navy) 56%,transparent)}
.fig__f{font-size:11.5px;line-height:1.5;margin:18px 0 0;padding-top:14px;max-width:62ch;
  border-top:1px solid var(--rule);color:color-mix(in srgb,var(--navy) 52%,transparent)}

.mx{width:100%;border-collapse:separate;border-spacing:2px;font-variant-numeric:tabular-nums;margin:0}
.mx th{border:0;padding:0 0 9px;font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;text-align:center;vertical-align:bottom;
  color:color-mix(in srgb,var(--navy) 50%,transparent)}
.mx thead th.rh{text-align:left;padding:0 10px 9px 0;font-size:10px}
.mx tbody th.rh{text-align:left;padding:0 10px 0 0;white-space:nowrap;font-size:11.5px;
  letter-spacing:0;text-transform:none;font-weight:600;vertical-align:middle;color:var(--navy)}
.mx tbody th.rh em{display:block;font-style:normal;font-size:9.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:color-mix(in srgb,var(--navy) 45%,transparent)}
.mx td{border:0;padding:6px 2px;text-align:center;font-size:10.5px;font-weight:700;border-radius:1px}

.bars{display:grid;gap:9px}
.bars .b{display:grid;grid-template-columns:minmax(0,14ch) 1fr 4ch;align-items:center;gap:12px}
.bars .bl{font-size:12.5px;line-height:1.25;color:color-mix(in srgb,var(--navy) 78%,transparent)}
.bars .bt{display:block;height:13px;background:color-mix(in srgb,var(--navy) 7%,transparent)}
.bars .bt i{display:block;height:100%;background:var(--navy)}
.bars b{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

.trg{width:100%;border-collapse:collapse;margin:0}
.trg td{padding:12px 12px 12px 0;border-top:1px solid var(--rule);vertical-align:middle;
  font-size:13px;line-height:1.4}
.trg tr:first-child td{border-top:0}
.trg td.sets{color:color-mix(in srgb,var(--navy) 55%,transparent);font-size:12px}
.trg td.st{padding-right:0;text-align:right;width:1%}
.trg tr.off td{font-weight:600}
.pill{display:inline-block;padding:4px 10px;border-radius:2px;font-size:10.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  background:color-mix(in srgb,var(--navy) 8%,transparent);
  color:color-mix(in srgb,var(--navy) 60%,transparent)}
.pill--off{background:var(--accent);color:#fff}

.shot--2{margin-top:14px}

/* ---------- take-out ---------- */
.takeout{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,80px);margin-top:48px}
.takeout div{display:flex;gap:20px;align-items:baseline;padding:21px 0;
  border-top:1px solid color-mix(in srgb,var(--paper) 18%,transparent)}
.takeout b{font-family:var(--display);font-size:14px;font-weight:var(--dweight);font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--paper) 46%,transparent);flex-shrink:0;width:26px}
.takeout span{font-size:18px}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;margin-top:46px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:22px 16px 22px 0;border-top:1px solid var(--rule);vertical-align:baseline}
thead th{border-top:0;border-bottom:2px solid var(--navy);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding-bottom:13px;font-weight:700}
/* ---------- stage flow ----------
   Four stages drawn as one run rather than four rows, because the point is that
   they follow on. The spine is a single pseudo-element on the list, so it never
   breaks across a column gap, and it draws itself when the block is reached.
   The stage number IS the node: a filled marker sitting on the line, which is
   what stops this reading as a bulleted list. Run's line does not stop at its
   marker, it carries on off the end, which is the one honest difference between
   Run and the other three.
   Everything that starts hidden is behind .js, set on boot, so a script that
   never runs leaves the stages and their prices on the page.               */
.flow{position:relative;list-style:none;margin:clamp(42px,5vw,64px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.flow.rv{opacity:1;transform:none;transition:none}

.flow::before{content:"";position:absolute;top:18.5px;left:0;right:0;height:1px;
  background:var(--rule);transform-origin:left center}
.js .flow::before{transform:scaleX(0);transition:transform 1.15s cubic-bezier(.22,.61,.36,1)}
.flow.in::before{transform:scaleX(1)}

.flow::after{content:"";position:absolute;top:14px;right:-1px;width:9px;height:9px;
  border-top:1px solid var(--rule);border-right:1px solid var(--rule);transform:rotate(45deg)}
.js .flow::after{opacity:0;transition:opacity .5s ease 1.05s}
.flow.in::after{opacity:1}

/* grid items stretch, so the description takes up the slack and all four
   price rules land on one line however long the descriptions run.     */
.flow__s{position:relative;min-width:0;padding:62px clamp(22px,2.8vw,42px) 0 0;
  display:flex;flex-direction:column}
.flow__s:last-child{padding-right:0}
.js .flow__s{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.flow.in .flow__s{opacity:1;transform:none}

.flow__n{position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;
  background:var(--navy);color:var(--paper);display:grid;place-items:center;
  font-family:var(--display);font-variant-numeric:tabular-nums;font-size:13.5px;
  font-weight:var(--dweight);letter-spacing:.03em}
.js .flow__n{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.32,.64,1)}
.flow.in .flow__n{transform:scale(1)}

/* stagger: each stage lands just behind the spine as it passes */
.flow.in .flow__s:nth-child(1) .flow__n{transition-delay:.14s}
.flow.in .flow__s:nth-child(2) .flow__n{transition-delay:.40s}
.flow.in .flow__s:nth-child(3) .flow__n{transition-delay:.66s}
.flow.in .flow__s:nth-child(4) .flow__n{transition-delay:.92s}
.flow.in .flow__s:nth-child(1){transition-delay:.20s}
.flow.in .flow__s:nth-child(2){transition-delay:.46s}
.flow.in .flow__s:nth-child(3){transition-delay:.72s}
.flow.in .flow__s:nth-child(4){transition-delay:.98s}

/* ---------- stage diagram ----------
   Four frames of one system, not four diagrams. The boxes sit at the same
   coordinates in every panel, so what the eye tracks is the middle changing:
   the person who is the integration in Diagnose is bypassed once in Prove,
   bypassed entirely in Build, and in Run the loop closes and carries on.
   Navy, blue and the hairline. Nothing else, and no gradient anywhere.     */
.flow__fig{margin:0 0 clamp(14px,1.6vw,20px)}
.dg{display:block;width:100%;height:auto}
.dg__b{fill:none;stroke:var(--rule);stroke-width:1.3}
.dg__r{stroke:var(--rule);stroke-width:1.3;stroke-linecap:round}
.dg__l{font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;text-anchor:middle;
  fill:color-mix(in srgb,var(--navy) 42%,transparent)}
.dg__m{fill:none;stroke:color-mix(in srgb,var(--navy) 32%,transparent);
  stroke-width:1.3;stroke-dasharray:2.6 3.4;stroke-linecap:round}
.dg__a{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round}
.dg__a--loop{stroke-width:1.8}
.dg__p{fill:var(--navy)}
.dg__p--out{fill:color-mix(in srgb,var(--navy) 15%,transparent)}
.dg__tip{fill:var(--blue)}
.dg__live{fill:var(--blue)}

/* the blue links draw themselves, behind the stage they belong to */
.js .dg__a{stroke-dasharray:320;stroke-dashoffset:320;
  transition:stroke-dashoffset .85s cubic-bezier(.22,.61,.36,1)}
.flow.in .dg__a{stroke-dashoffset:0}
.flow.in .flow__s:nth-child(1) .dg__a{transition-delay:calc(.30s + var(--i) * .11s)}
.flow.in .flow__s:nth-child(2) .dg__a{transition-delay:calc(.56s + var(--i) * .11s)}
.flow.in .flow__s:nth-child(3) .dg__a{transition-delay:calc(.82s + var(--i) * .11s)}
.flow.in .flow__s:nth-child(4) .dg__a{transition-delay:calc(1.08s + var(--i) * .11s)}
.js .dg__tip,.js .dg__live{opacity:0;transition:opacity .4s ease 1.5s}
.flow.in .dg__tip,.flow.in .dg__live{opacity:1}

@media (max-width:900px){
  /* vertical run: the figure would dominate, so it holds a readable width */
  .flow__fig{max-width:300px}
}
@media (prefers-reduced-motion:reduce){
  .js .dg__a{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .dg__tip,.js .dg__live{opacity:1;transition:none}
}

.flow__h{font-family:var(--display);font-size:clamp(21px,2.3vw,28px);font-weight:var(--dweight);
  letter-spacing:var(--dtrack);line-height:1.04;margin:0 0 11px}
.flow__w{font-size:15.5px;line-height:1.5;margin:0 0 16px;flex:1 0 auto;
  color:color-mix(in srgb,var(--navy) 76%,transparent)}
.flow__p{font-size:16px;font-weight:700;margin:0;font-variant-numeric:tabular-nums;
  padding-top:13px;border-top:1px solid var(--rule)}

/* Below four columns the run turns vertical rather than wrapping, so it stays
   one line and every stage keeps its description instead of losing it.      */
@media (max-width:900px){
  .flow{grid-template-columns:1fr;padding-left:58px;margin-top:38px}
  .flow::before{top:18.5px;bottom:0;left:18.5px;right:auto;width:1px;height:auto;
    transform-origin:center top}
  .js .flow::before{transform:scaleY(0);transition:transform 1.05s cubic-bezier(.22,.61,.36,1)}
  .flow.in::before{transform:scaleY(1)}
  .flow::after{top:auto;bottom:-4px;left:14px;right:auto;transform:rotate(135deg)}
  .flow__s,.flow__s:last-child{padding:0 0 34px}
  .flow__s:last-child{padding-bottom:0}
  .flow__n{left:-58px;top:-4px}
  .flow__w{margin-bottom:12px;flex:0 0 auto}
  .flow__p{display:inline-block;padding-top:11px}
}

@media (prefers-reduced-motion:reduce){
  .js .flow::before{transform:none;transition:none}
  .js .flow::after{opacity:1;transition:none}
  .js .flow__s{opacity:1;transform:none;transition:none}
  .js .flow__n{transform:scale(1);transition:none}
}

/* ---------- further findings ----------
   The homepage carried six full data blocks, which is three too many for an MD
   reading on a phone. The three quietest keep their number and the one line
   that earns it; the tables they came off live on /proof, where a reader who
   wants them has gone looking.                                             */
/* .rows is full bleed so the evidence media can run to the edge. This block
   is text, so it takes the same container as .rows__head rather than sitting
   flush against the viewport.                                            */
.finds{max-width:var(--maxw);margin:clamp(42px,5vw,70px) auto 0;
  padding:clamp(28px,3vw,42px) var(--gutr) 0 var(--gut);
  border-top:1px solid var(--rule)}
.finds__h{font-family:var(--display);font-size:clamp(19px,2vw,25px);font-weight:var(--dweight);
  letter-spacing:var(--dtrack);margin:0 0 clamp(24px,2.8vw,34px)}
.finds ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,38px)}
.finds li{min-width:0;padding-right:clamp(12px,2vw,30px)}
.finds b{display:block;font-family:var(--display);font-size:clamp(27px,3.3vw,42px);
  font-weight:var(--dweight);letter-spacing:var(--dtrack);font-variant-numeric:tabular-nums;
  line-height:1;margin:0 0 12px}
.finds span{display:block;font-size:15.5px;line-height:1.55;
  color:color-mix(in srgb,var(--navy) 76%,transparent)}
.finds__a{display:inline-block;margin-top:clamp(28px,3vw,40px);font-size:16px;font-weight:600}
@media (max-width:820px){
  .finds ul{grid-template-columns:1fr;gap:26px}
  .finds li{padding-right:0}
}

/* ---------- straight answers ----------
   Deliberately not an accordion. Hiding the answer to "who can see our data"
   behind a click is a vendor habit, and this site argues the other way.    */
.qa{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
.qa>div{display:grid;grid-template-columns:minmax(0,24ch) minmax(0,1fr);
  gap:clamp(16px,3vw,52px);padding:clamp(24px,2.8vw,34px) 0;
  border-bottom:1px solid var(--rule)}
.qa h3{font-family:var(--display);font-size:clamp(17px,1.9vw,22px);font-weight:var(--dweight);
  letter-spacing:var(--dtrack);line-height:1.25;margin:0}
.qa p{margin:0;font-size:16.5px;line-height:1.62;
  color:color-mix(in srgb,var(--navy) 80%,transparent)}
.qa p+p{margin-top:13px}
@media (max-width:760px){.qa>div{grid-template-columns:1fr;gap:11px}}

/* ---------- the rest of the house ----------
   The only block on the site about other companies, so it sits on navy to
   mark it as a different kind of content, and because both supplied logos are
   light versions made for a dark ground. Logos are brand assets, so their own
   gradients are exempt from the no-gradient rule; nothing else here is.   */
.house{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,70px);
  margin-top:clamp(36px,4.4vw,56px)}
.house__c{display:block;min-width:0;padding-top:22px;
  border-top:2px solid color-mix(in srgb,var(--paper) 30%,transparent);
  color:var(--paper);text-decoration:none;transition:border-color .18s ease}
.house__c:hover{border-top-color:var(--paper);text-decoration:none}
/* Each product shows its own mark and nothing else of its identity; the name
   beside it is set in the house face, so two brands read as one family. The
   marks keep their own gradients, which is the documented exemption.     */
.house__m{display:flex;align-items:flex-end;height:62px;margin:0 0 16px}
.house__m img{height:100%;width:auto}
.house__r{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 14px;color:color-mix(in srgb,var(--paper) 62%,transparent)}
.house__d{font-size:16.5px;line-height:1.6;margin:0 0 16px;
  color:color-mix(in srgb,var(--paper) 84%,transparent)}
.house__l{font-size:14px;font-weight:600;color:var(--paper)}
.house__c:hover .house__l{text-decoration:underline}
@media (max-width:820px){.house{grid-template-columns:1fr;gap:34px}}

/* ---------- who you deal with ----------
   An FM buyer who has watched good demos fail wants to know who is behind
   this before they read the evidence, not after it. Small, one line, and it
   points at the About page rather than repeating it.                     */
.whois{display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,3vw,40px);align-items:center}
.whois__p{width:clamp(96px,11vw,132px);height:auto;display:block}
.whois__t{font-size:clamp(17px,1.8vw,20px);line-height:1.55;margin:10px 0 0;max-width:62ch}
.whois__m{font-size:15.5px;margin:14px 0 0;color:color-mix(in srgb,var(--navy) 62%,transparent)}
.whois__m a{font-weight:600}
@media (max-width:700px){
  .whois{grid-template-columns:1fr;gap:18px}
  .whois__p{width:104px}
}

/* a caption says what kind of evidence it is, in the same words every time */
.cap__k{display:inline-block;margin-right:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.legend{display:flex;flex-wrap:wrap;gap:6px 26px;margin:18px 0 0;font-size:13px;
  color:color-mix(in srgb,var(--navy) 58%,transparent)}
.legend b{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);margin-right:6px}

.pq{font-family:var(--display);font-size:clamp(30px,5vw,62px);line-height:1.04;font-weight:var(--dweight);
  letter-spacing:-.04em;max-width:16ch;margin:clamp(56px,7vw,96px) 0 0;text-wrap:balance}

.oneline{text-align:center;padding-block:clamp(50px,6vw,84px)}
.oneline p{font-family:var(--display);font-size:clamp(24px,3.4vw,44px);font-weight:var(--dweight);
  letter-spacing:var(--dtrack);margin:0;line-height:1.1}
.oneline a{font-size:16px;font-family:var(--sans);font-weight:600;display:inline-block;margin-top:20px;letter-spacing:0}
.badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.badge{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:2px;
  padding:9px 15px;font-size:13px;font-weight:600;color:color-mix(in srgb,var(--navy) 70%,transparent)}
.contact__row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;margin-top:38px}
.contact__row a.mail{color:var(--paper);font-size:18px;font-weight:500;border-bottom:1px solid color-mix(in srgb,var(--paper) 40%,transparent)}
/* adapts to the band it sits on: currentColor is paper on navy, navy on paper */
.pending{font-size:13px;border:1px dashed color-mix(in srgb,currentColor 42%,transparent);
  padding:8px 13px;border-radius:2px;color:color-mix(in srgb,currentColor 66%,transparent)}

.ftr{border-top:1px solid var(--rule);background:var(--paper)}
.ftr .wrap{padding-block:54px}
.ftr__nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px;font-weight:500;margin:26px 0 0}
.ftr__nav a{color:var(--navy)}
.ftr__tend{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule);font-size:14.5px;
  color:color-mix(in srgb,var(--navy) 64%,transparent)}
.legal{font-size:12.5px;line-height:1.65;color:color-mix(in srgb,var(--navy) 52%,transparent);
  margin:26px 0 0;max-width:72ch}


.rv{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

@media (max-width:920px){
  .row{grid-template-columns:1fr;gap:26px}
  .row--flip .row__media,.row--flip .row__txt{order:0}
  .row__txt,.row--flip .row__txt{padding-left:var(--gut);padding-right:var(--gutr);max-width:none;justify-self:stretch}
  .takeout{grid-template-columns:1fr}
  .nav{display:none}
  .hero{min-height:0}
  .hero__veil{background:linear-gradient(to bottom,color-mix(in srgb,var(--navy) 84%,transparent),color-mix(in srgb,var(--navy) 66%,transparent))}
}
@media (max-width:560px){
  body{font-size:16px}
  .mx{border-spacing:1px}
  .mx th{font-size:8.5px}
  .mx tbody th.rh{font-size:10px;padding-right:6px}
  .mx tbody th.rh em{font-size:8.5px}
  .mx td{font-size:9px;padding:5px 1px}
  .bars .b{grid-template-columns:minmax(0,11ch) 1fr 4ch;gap:9px}
  .bars .bl{font-size:11.5px}
  .trg td{font-size:12px;padding:10px 8px 10px 0}
  .trg td.sets{display:none}
  .hdr .wrap{gap:10px}
  .hdr .btn{padding:0 14px;font-size:13.5px}
  .logo{height:40px}
  .hero__rule{gap:7px 20px;font-size:12.5px}
  th,td{padding:16px 10px 16px 0}
}