/* ── Bootstrap 5.3.3 reboot neutraliser ─────────────────────────────────
   Bootstrap loads first; these rules hand typography back to the Crelio kit
   below (which sets its own sizes/margins per class). */
body{line-height:revert;font-size:revert}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,figure,pre{margin:revert;font-size:revert;font-weight:revert;line-height:revert}
ol,ul{padding-left:revert}
a{color:inherit;text-decoration:revert}
label{display:revert}
button,input,select,textarea{font-family:revert;font-size:revert;line-height:revert;margin:revert}
button{border-radius:revert}
img,svg{vertical-align:revert}
pre{font-family:revert;font-size:revert;overflow:revert}
blockquote,figure{margin:revert}


:root{
  --g:#1C9323;        /* action green — buttons, links, green text on LIGHT */
  --gi:#00A82D;       /* icon green — strokes, gradient stops, glows        */
  --g2:#3FD15F;       /* glow green — green on DARK only                    */
  --glogo:#3BA341;    /* logo mark only                                     */
  --gsoft:#E8F7EC;    /* the only tinted fill                               */
  --gline:#C2E2C4;    /* the only pill border                               */

  --ink:#0E0E0E; --muted:#4E4E4E; --faint:#7A827A;
  --line:#EBEBEB; --line2:#ECECEC;
  --black:#000; --black2:#0A0A0A; --panel:#F7F9F8;
  /* The live site keeps two dark grounds: a neutral black for the home page
     and a dark green-black for product pages. Both are in use — do not
     collapse them into one. */
  --darkg:#0B1A12; --darkg2:#10241A;
  /* Two soft tints, also both in use: the home page's is far lighter. */
  --tint-home:rgba(59,163,65,.05); --tint-page:#E8F7EC;
  --lined:rgba(255,255,255,.10);

  --serif:"Libertinus Serif Display";
  --sans:'Inter',system-ui,-apple-system,sans-serif;

  --r-pill:999px; --r-xl:24px; --r-lg:20px; --r-md:16px; --r-sm:14px; --r-xs:10px;

  --sh-flat:0 1px 2px rgba(15,23,42,.04);
  --sh-lift:0 20px 40px -20px rgba(0,168,45,.18);
  --sh-cta:0 12px 30px -8px rgba(0,168,45,.4);
  --sh-ui:0 10px 30px rgba(15,23,42,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:#0f172a;background:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.cr-sec{padding:100px 0;background:#fff;position:relative}
.cr-sec--dark{background:var(--black);color:#fff}
.cr-sec--ink{background:var(--black2);color:#fff}
.cr-sec--tint{background:var(--gsoft)}
.cr-sec--panel{background:var(--panel)}
.cr-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.cr-wrap--wide{max-width:1320px}
.cr-wrap--narrow{max-width:1100px}
.cr-head{margin-bottom:56px}
.cr-head--center{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.cr-head .cr-pill{margin-bottom:22px}

.cr-g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.cr-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cr-g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cr-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.cr-split--rev>*:first-child{order:2}
.cr-bento-a{display:grid;grid-template-columns:1fr 1.6fr;gap:20px;margin-bottom:20px}
.cr-bento-b{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cr-headrow{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;
  margin-bottom:56px}

/* ── TYPE ───────────────────────────────────────────────────────────────── */
.cr-t{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.02em;
  margin:0;color:var(--ink);text-wrap:balance}
.cr-t--hero{font-size:64px;color:#fff}
.cr-t--feat{font-size:56px}
.cr-t--sec{font-size:48px}
.cr-t em{font-style:normal;color:var(--g)}
.cr-sec--dark .cr-t,.cr-sec--ink .cr-t{color:#fff}
.cr-sec--dark .cr-t em,.cr-sec--ink .cr-t em{color:var(--g2)}

.cr-lead{font-size:16px;line-height:24px;letter-spacing:-.011em;font-weight:400;
  color:var(--muted);max-width:520px;margin:0}
.cr-sec--dark .cr-lead,.cr-sec--ink .cr-lead{color:rgba(255,255,255,.72)}
.cr-lead--fade{color:var(--ink)}
.cr-lead--fade span{color:rgba(78,78,78,.55)}
.cr-sec--dark .cr-lead--fade{color:#fff}
.cr-sec--dark .cr-lead--fade span{color:rgba(255,255,255,.45)}

.cr-ct{font-size:16px;line-height:24px;letter-spacing:-.02em;font-weight:500;
  color:var(--ink);margin:0 0 8px}
.cr-cb{font-size:14px;line-height:20px;letter-spacing:-.01em;font-weight:400;
  color:var(--muted);margin:0}
.cr-sec--dark .cr-ct,.cr-sec--ink .cr-ct{color:#fff}
.cr-sec--dark .cr-cb,.cr-sec--ink .cr-cb{color:rgba(255,255,255,.6)}
.cr-micro{font-size:13px;line-height:18px;color:var(--faint);margin:0}

/* ── PILLS / TAGS ───────────────────────────────────────────────────────── */
.cr-pill{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--gline);background:#fff;color:var(--g);border-radius:99px;
  padding:6px 12px;font-size:16px;font-weight:500;line-height:24px;letter-spacing:-.02em}
.cr-sec--dark .cr-pill,.cr-sec--ink .cr-pill{background:transparent;
  border-color:rgba(63,209,95,.35);color:var(--g2)}
.cr-tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;
  font-size:12px;font-weight:500;color:var(--g);background:var(--gsoft)}
.cr-eyebrow{display:inline-block;padding:8px 10px;border-radius:200px;
  background:rgba(235,235,235,.4);color:#0a0a0a;font-size:12px;font-weight:600;
  line-height:16px;letter-spacing:.04em;text-transform:uppercase}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.cr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 32px;border-radius:99px;border:0;font-family:var(--sans);
  font-size:16px;font-weight:500;line-height:23.52px;letter-spacing:-.02em;
  text-decoration:none;cursor:pointer;transition:transform .2s ease}
.cr-btn:hover{transform:scale(1.02)}
.cr-btn--p{background:var(--g);color:#fff;box-shadow:var(--sh-cta)}
.cr-btn--w{background:#fff;color:rgba(7,11,18,1)}
.cr-btn--ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.45)}
.cr-btn--soft{background:rgba(235,246,236,1);color:var(--g)}
.cr-btn--lg{padding:16px 32px;font-size:15px}
.cr-btns{display:flex;flex-wrap:wrap;gap:14px}
.cr-link{display:inline-flex;align-items:center;gap:6px;color:var(--g);font-size:14px;
  font-weight:500;text-decoration:none;transition:gap .2s ease}
.cr-link:hover{gap:11px}
.cr-sec--dark .cr-link,.cr-sec--ink .cr-link{color:var(--g2)}

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.cr-card{background:#fff;border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:26px;height:100%;box-shadow:var(--sh-flat);
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}

/* THE VISUAL SLOT INSIDE A CARD.
   Fixed height is deliberate: it is what keeps three cards in a row aligned.
   Never replace this with an inline style — unequal visual heights are the
   single most common cause of a page looking "misaligned". */
.cr-vis{height:216px;flex:none;border-radius:var(--r-md);background:var(--panel);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;
  margin:-4px -4px 22px;position:relative}
.cr-vis--tall{height:270px}
.cr-vis--short{height:158px}
.cr-vis>*{max-width:100%}
/* The text block under a card visual. Because .cr-vis has a fixed height,
   every card in a row starts its text at the same y automatically. Do not add
   margin-top:auto here — that pushes shorter cards down and breaks the row. */
.cr-card__txt{margin-top:0}
.cr-card:hover{transform:translateY(-4px);border-color:rgba(0,168,45,.3);box-shadow:var(--sh-lift)}
.cr-card--green{background:radial-gradient(100.15% 100.15% at 0% -0.15%,#28BE56 0%,#00A62F 100%);
  border:0;color:#fff}
.cr-card--green .cr-ct,.cr-card--green .cr-cb{color:#fff}
.cr-card--green .cr-cb{color:rgba(255,255,255,.85)}
.cr-card--green .cr-link{color:#fff}
.cr-card--flat{box-shadow:none}
.cr-card--flat:hover{transform:none;box-shadow:var(--sh-lift)}
.cr-card--dark{background:var(--black2);border:1px solid rgba(63,209,95,.25);
  border-radius:var(--r-md);box-shadow:0 0 40px rgba(63,209,95,.08) inset;color:#fff;padding:0;
  overflow:hidden;height:100%;display:flex;flex-direction:column}
.cr-card--dark .cr-vis{background:transparent;margin:0;height:200px}
.cr-card--dark .cr-card__txt{padding:0 22px 26px}
.cr-card--pad{padding:26px}

.cr-chip{width:40px;height:40px;border-radius:12px;flex:none;background:var(--gsoft);
  color:var(--gi);display:inline-flex;align-items:center;justify-content:center}
.cr-chip--solid{background:linear-gradient(180deg,#3FD15F,#00A82D);color:#fff}
.cr-chip--lg{width:48px;height:48px;border-radius:14px}
.cr-chip svg{width:20px;height:20px;stroke-width:1.75;fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round}
.cr-sec--dark .cr-chip{background:rgba(63,209,95,.14);color:var(--g2)}

/* row: chip + text, the most-used sub-layout on the site */
.cr-row{display:flex;gap:16px;align-items:flex-start}
.cr-rows{display:flex;flex-direction:column}
.cr-rows>.cr-row{padding:20px 0;border-top:1px solid var(--line)}
.cr-rows>.cr-row:first-child{border-top:0;padding-top:0}
.cr-sec--dark .cr-rows>.cr-row{border-color:var(--lined)}

/* ── SIGNATURE DEVICES ──────────────────────────────────────────────────── */
.cr-mesh{background-image:radial-gradient(rgba(63,209,95,.07) 1px,transparent 1px);
  background-size:22px 22px}
.cr-mesh--dark{background-image:radial-gradient(rgba(63,209,95,.10) 1px,transparent 1px);
  background-size:22px 22px}
.cr-panel{background:var(--panel);border-radius:var(--r-lg);padding:34px;position:relative;
  overflow:hidden;min-height:340px;display:flex;align-items:center;justify-content:center}

/* the green dome — ONCE per page, between the closing CTA and the footer */
.cr-dome{position:relative;width:100%;height:340px;overflow:hidden;isolation:isolate;
  background-color:#fff;
  background-image:radial-gradient(140.64% 100% at 50% 100%,
    rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 38.07%,#00A62F 73.08%,#000 100%)}
.cr-dome--up{transform:scaleY(-1)}

/* the full-width gradient CTA band that closes a bento section */
.cr-band{margin-top:56px;padding:24px 32px;border-radius:var(--r-md);
  background:linear-gradient(90deg,#35BA55,#0F8A2A);color:#fff;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:16px}
.cr-band p{font-size:18px;font-weight:500;line-height:24px;letter-spacing:-.02em;margin:0}
.cr-band a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap}

/* ── PHOTO SLOT ─────────────────────────────────────────────────────────────
   Artifacts cannot load external images. This renders a deliberate, designed
   dark banner so the page reads as complete, and carries the production <img>
   markup in a comment for the developer. Never leave a bare broken <img>.     */
.cr-photo{position:relative;width:100%;height:100%;overflow:hidden;
  background:
    radial-gradient(65% 55% at 74% 26%,rgba(150,175,160,.42) 0%,transparent 62%),
    radial-gradient(48% 42% at 86% 58%,rgba(63,209,95,.20) 0%,transparent 64%),
    radial-gradient(80% 62% at 16% 34%,rgba(52,86,70,.42) 0%,transparent 66%),
    radial-gradient(120% 90% at 50% 120%,rgba(0,166,47,.30) 0%,transparent 58%),
    linear-gradient(180deg,#182020 0%,#0d1210 52%,#000 100%)}
.cr-photo::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,15px 15px;
  -webkit-mask-image:radial-gradient(90% 70% at 60% 40%,#000 0%,transparent 78%);
          mask-image:radial-gradient(90% 70% at 60% 40%,#000 0%,transparent 78%)}
.cr-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.55) 58%,#000 100%)}
/* Bottom-left, not top-right: the fixed header lives top-right and the two
   collided on every hero. (F-17) */
.cr-photo__note{position:absolute;left:16px;bottom:16px;z-index:3;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.40);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 11px;
  backdrop-filter:blur(4px)}

/* ══════════════════════════════════════════════════════════════════════════
   THE DRAWN-UI KIT
   This is what makes a Crelio page look expensive. Never draw a plain box
   with a label in it — build the real thing out of these parts.
   ══════════════════════════════════════════════════════════════════════════ */

/* app frame — the browser/dashboard shell */
.ui{background:#fff;border:1px solid var(--line2);border-radius:var(--r-sm);
  box-shadow:var(--sh-ui);overflow:hidden;font-size:12px;color:#0f172a;width:100%}
.ui__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;
  border-bottom:1px solid var(--line2);background:#fbfcfb}
.ui__dot{width:8px;height:8px;border-radius:50%;background:#E2E6E2}
.ui__dot--g{background:#4ED06A}.ui__dot--a{background:#F0C674}.ui__dot--r{background:#EE8878}
.ui__title{margin-left:8px;font-size:11.5px;font-weight:600;color:var(--ink)}
.ui__body{padding:14px}
.ui__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ui__hd h5{margin:0;font-size:13px;font-weight:600;color:var(--ink)}

/* data rows — patient lists, order lists, sample lists */
.ui-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-xs);
  border:1px solid var(--line2);background:#fff;margin-bottom:7px}
.ui-row:last-child{margin-bottom:0}
.ui-row--hi{border-color:rgba(0,168,45,.35);background:rgba(232,247,236,.5)}
.ui-av{width:26px;height:26px;border-radius:50%;flex:none;background:var(--gsoft);
  color:var(--g);display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:600}
.ui-row__m{flex:1;min-width:0}
.ui-row__m b{display:block;font-size:11.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-row__m span{display:block;font-size:10px;color:var(--faint);margin-top:1px}

/* status pills — colour AND word, never colour alone */
.ui-pill{font-size:9.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;
  flex:none}
.ui-pill--g{background:var(--gsoft);color:#137019}
.ui-pill--a{background:#FEF6E7;color:#8C6410}
.ui-pill--r{background:#FCEBE9;color:#A63325}
.ui-pill--b{background:#E9F0FD;color:#1856B8}
.ui-pill--n{background:#F1F3F1;color:#5C655C}

/* KPI tiles */
.ui-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px}
.ui-kpi{border:1px solid var(--line2);border-radius:var(--r-xs);padding:10px 11px;background:#fff}
.ui-kpi span{display:block;font-size:9.5px;color:var(--faint);letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:4px}
.ui-kpi b{display:block;font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.ui-kpi i{display:block;font-style:normal;font-size:9.5px;margin-top:3px;color:var(--g)}
.ui-kpi i.dn{color:#C0392B}

/* key/value grid */
.ui-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.ui-kv div span{display:block;font-size:9.5px;color:var(--faint);margin-bottom:2px}
.ui-kv div b{display:block;font-size:12px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* table */
.ui-tb{width:100%;border-collapse:collapse;font-size:11px}
.ui-tb th{text-align:left;font-size:9px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);padding:7px 8px;border-bottom:1px solid var(--line2)}
.ui-tb td{padding:8px;border-bottom:1px solid #F4F6F4;color:#293029;
  font-variant-numeric:tabular-nums}
.ui-tb tr:last-child td{border-bottom:0}

/* bar chart */
.ui-bars{display:flex;align-items:flex-end;gap:6px;height:88px;padding-top:8px}
.ui-bars i{flex:1;background:#EDF0ED;border-radius:3px 3px 0 0;display:block;position:relative}
.ui-bars i.on{background:linear-gradient(180deg,#3FD15F,#00A82D)}
.ui-bars i.on::after{content:attr(data-v);position:absolute;top:-15px;left:50%;
  transform:translateX(-50%);font-size:9px;font-weight:600;color:var(--g)}
.ui-axis{display:flex;gap:6px;margin-top:6px}
.ui-axis span{flex:1;text-align:center;font-size:8.5px;color:var(--faint)}

/* area chart — inline SVG, scales to its box */
.ui-area{width:100%;height:96px;display:block}

/* donut — pure CSS conic */
.ui-donut{width:104px;height:104px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--g) 0 62%,#7DE083 62% 79%,#CFE9D4 79% 100%)}
.ui-donut::after{content:"";position:absolute;inset:15px;border-radius:50%;background:#fff}
.ui-donut__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;z-index:2}
.ui-donut__c b{font-size:17px;font-weight:600;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums}
.ui-donut__c span{font-size:8.5px;color:var(--faint);margin-top:2px}
.ui-legend{display:flex;flex-direction:column;gap:7px;font-size:10.5px}
.ui-legend div{display:flex;align-items:center;gap:7px;color:#3A423A}
.ui-legend i{width:8px;height:8px;border-radius:2px;flex:none}
.ui-legend b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink)}

/* progress meter */
.ui-meter{height:6px;border-radius:99px;background:#EDF0ED;overflow:hidden;flex:1}
.ui-meter i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#3FD15F,#00A82D)}

/* alert card — dark, for exception/critical UI */
.ui-alert{border-radius:var(--r-sm);overflow:hidden;background:#0f1310;
  border:1px solid rgba(255,255,255,.09)}
.ui-alert__h{background:linear-gradient(90deg,#00A82D,#067A24);color:#fff;padding:9px 13px;
  font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.ui-alert__h.warn{background:linear-gradient(90deg,#C9971C,#96690A)}
.ui-alert__b{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:14px}
.ui-alert__b span{display:block;font-size:9.5px;color:#8A948C;margin-bottom:3px}
.ui-alert__b b{display:block;font-size:12.5px;color:#fff;font-weight:500;
  font-variant-numeric:tabular-nums}
.ui-alert__b b.warn{color:#F2C14E}

/* flow diagram — node → node → node */
.ui-flow{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;justify-content:center;
  width:100%}
.ui-node{border:1px solid var(--line2);border-radius:var(--r-xs);background:#fff;padding:10px 6px;
  text-align:center;flex:1 1 0;min-width:0;position:relative}
.ui-node b{display:block;width:30px;height:30px;margin:0 auto 7px;border-radius:9px;
  background:var(--gsoft);color:var(--gi);display:flex;align-items:center;justify-content:center}
.ui-node b svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.ui-node.on b{background:linear-gradient(180deg,#3FD15F,#00A82D);color:#fff}
.ui-node span{font-size:9.5px;color:#3A423A;display:block;line-height:1.3}
.ui-node__i{position:absolute;top:6px;right:7px;font-size:8.5px;color:var(--faint);
  font-weight:600}
.ui-arrow{color:#C8D0C9;flex:none}
.ui-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* hub-and-spoke — the "everything connects to Crelio" diagram */
.ui-hub{position:relative;width:100%;max-width:330px;aspect-ratio:1/.72;margin:0 auto}
.ui-hub__c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;
  height:78px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#4EE07A 0%,
  #17B93E 60%,#009E29 100%);box-shadow:0 12px 34px -10px rgba(0,168,45,.55);display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:600;z-index:2}
.ui-hub__n{position:absolute;width:38px;height:38px;border-radius:11px;background:#fff;
  border:1px solid var(--line2);box-shadow:var(--sh-flat);display:flex;align-items:center;
  justify-content:center;color:var(--gi);z-index:2}
.ui-hub__n svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ui-hub__l{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}

/* phone frame */
.ui-phone{width:216px;border-radius:26px;border:8px solid #141815;background:#fff;
  overflow:hidden;box-shadow:0 26px 60px -22px rgba(0,0,0,.45);margin:0 auto}
.ui-phone__n{height:20px;background:#141815;position:relative}
.ui-phone__n::after{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);
  width:56px;height:5px;border-radius:99px;background:#2A302C}
.ui-phone__b{padding:12px}

/* barcode */
.ui-code{display:flex;align-items:flex-end;gap:1.5px;height:38px}
.ui-code i{width:2px;background:var(--ink);border-radius:1px;height:100%}
.ui-code i:nth-child(3n){width:3.5px}
.ui-code i:nth-child(4n){height:76%}
.ui-code i:nth-child(5n){width:1.5px;height:88%}

/* floating stat card — for the panel compositions */
.ui-stat{background:#fff;border-radius:var(--r-sm);box-shadow:var(--sh-ui);padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:212px}
.ui-stat b{display:block;font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.ui-stat span{display:block;font-size:11.5px;color:var(--faint);margin-top:3px}

/* ── PROCESS RAIL ───────────────────────────────────────────────────────── */
.cr-rail{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative}
.cr-rail__s{text-align:center;padding:0 10px;position:relative}
.cr-rail__s::before{content:"";position:absolute;top:17px;left:0;width:100%;height:2px;
  background:var(--line)}
.cr-rail__s.done::before{background:var(--g)}
.cr-rail__s:first-child::before{left:50%;width:50%}
.cr-rail__s:last-child::before{width:50%}
.cr-rail__d{position:relative;z-index:2;width:36px;height:36px;border-radius:50%;margin:0 auto 14px;
  background:#fff;border:2px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:600;color:var(--faint)}
.cr-rail__s.done .cr-rail__d{background:var(--g);border-color:var(--g);color:#fff}
.cr-rail__s.now .cr-rail__d{border-color:var(--g);color:var(--g)}
.cr-rail__s h4{margin:0 0 6px;font-size:16px;font-weight:500;color:var(--ink);
  letter-spacing:-.02em}
.cr-rail__s p{margin:0 auto;font-size:14px;line-height:20px;color:var(--muted);max-width:180px}
.cr-rail__f{position:absolute;top:-26px;left:50%;transform:translateX(-50%);background:var(--g);
  color:#fff;font-size:11px;font-weight:500;padding:5px 11px;border-radius:99px;
  white-space:nowrap;box-shadow:var(--sh-cta)}

/* ── TRUST / SECURITY GRID ──────────────────────────────────────────────── */
.cr-tdark{background:var(--black2);border-radius:var(--r-lg);padding:36px 32px;height:100%;
  color:#fff;display:flex;flex-direction:column}
.cr-tdark__e{color:var(--g2);font-size:14px;font-weight:500;margin:0 0 8px}
.cr-tdark h3{font-size:24px;line-height:32px;font-weight:500;letter-spacing:-.02em;margin:0 0 22px}
.cr-tlist{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:14px}
.cr-tlist li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:20px;
  letter-spacing:-.01em;color:rgba(255,255,255,.92)}
.cr-tlist .ck{width:26px;height:26px;border-radius:50%;background:rgba(63,209,95,.16);
  color:var(--g2);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cr-tlist .ck svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.cr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08)}
.cr-chips span{font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:5px 9px}

.cr-cells{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line2);
  border-radius:var(--r-lg);overflow:hidden;height:100%;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.cr-cells:hover{transform:translateY(-4px);border-color:rgba(0,168,45,.3);box-shadow:var(--sh-lift)}
.cr-cell{padding:26px 22px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);
  background:#fff}
.cr-cell:nth-child(3n){border-right:0}
.cr-cell:nth-child(n+4){border-bottom:0}
.cr-cell__i{color:var(--gi);margin-bottom:14px}
.cr-cell__i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}

/* ── PROOF BAND ─────────────────────────────────────────────────────────── */
.cr-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:44px}
.cr-stat{text-align:center;padding:0 16px;border-left:1px solid rgba(0,0,0,.08)}
.cr-stat:first-child{border-left:0}
.cr-stat b{display:block;font-family:var(--serif);font-weight:400;font-size:48px;line-height:1;
  letter-spacing:-.02em;color:var(--g)}
.cr-stat span{display:block;font-size:14px;color:var(--muted);margin-top:10px}
.cr-quote{background:#fff;border-radius:var(--r-lg);padding:26px;height:100%;display:flex;
  flex-direction:column}
.cr-quote__m{font-size:26px;line-height:1;color:var(--g);opacity:.55;margin-bottom:12px;
  font-family:var(--serif)}
.cr-quote p{font-size:16px;line-height:24px;color:var(--ink);margin:0 0 auto;letter-spacing:-.01em}
.cr-quote__w{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line)}
.cr-quote__w i{width:34px;height:34px;border-radius:50%;background:var(--gsoft);color:var(--g);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;
  font-style:normal;flex:none}
.cr-quote__w b{display:block;font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.cr-quote__w span{display:block;font-size:14px;color:var(--muted)}

/* ── MOTION ─────────────────────────────────────────────────────────────── */
.cr-words .w{display:inline-block;opacity:0;filter:blur(12px);
  transform:translate3d(0,.35em,0);
  transition:opacity 700ms var(--ease),filter 700ms var(--ease),transform 700ms var(--ease);
  transition-delay:calc(var(--i,0) * 60ms)}
.cr-words.in .w{opacity:1;filter:blur(0);transform:none}
.cr-up{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cr-up.in{opacity:1;transform:none}
@keyframes cr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cr-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.cr-anim-float{animation:cr-float 6s ease-in-out infinite}
.cr-anim-pulse{animation:cr-pulse 3.2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .cr-words .w{opacity:1!important;filter:none!important;transform:none!important;
    transition:none!important}
  .cr-up{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:991px){
  .cr-sec{padding:64px 0}
  .cr-head,.cr-headrow{margin-bottom:36px}
  .cr-t--hero{font-size:40px}.cr-t--feat{font-size:36px}.cr-t--sec{font-size:32px}
  .cr-g2,.cr-g3,.cr-g4,.cr-bento-a,.cr-bento-b{grid-template-columns:1fr}
  .cr-split,.cr-headrow{grid-template-columns:1fr;gap:32px;align-items:start}
  .cr-split--rev>*:first-child{order:0}
  .cr-rail{grid-auto-flow:row;gap:26px}
  .cr-rail__s::before{display:none}
  .cr-cells{grid-template-columns:1fr}
  .cr-cell{border-right:0}
  .cr-cell:last-child{border-bottom:0}
  .cr-stats{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .cr-stat:nth-child(3){border-left:0}
  .cr-band{flex-direction:column;align-items:flex-start}
  .cr-dome{height:220px}
}
@media (max-width:575px){
  .cr-sec{padding:48px 0}
  .cr-t--hero{font-size:32px}.cr-t--sec{font-size:27px}
  .cr-card{padding:20px}
  .cr-stats{grid-template-columns:1fr}
  .cr-stat{border-left:0}
}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--g);outline-offset:3px;
  border-radius:6px}
.cr-sec--dark :where(a,button,[tabindex]):focus-visible{outline-color:var(--g2)}

/* ── GENERATED BANNER ─────────────────────────────────────────────────────
   Output of make-banner.py. Unique per page slug, no external file, cannot
   break. The inline <svg> fills the slot; the scrim is already baked in.    */
.cr-photo--gen{background:#000}
.cr-photo--gen::before,.cr-photo--gen::after{display:none}
.cr-photo--gen>svg{position:absolute;inset:0;width:100%;height:100%;display:block}


/* ══════════════════════════════════════════════════════════════════════════
   REPEATED SECTIONS
   --------------------------------------------------------------------------
   Eight sections appear on every solutions page. Their DESIGN IS FROZEN —
   only the words, links and images inside them change. Copy the block from
   blocks.html and swap the content. Never restyle them, never rebuild them
   from scratch, never "improve" them for one page. The developer builds each
   of these once and reuses it; a page that renders them differently is a
   page he has to unpick by hand.

   The eight:  BADGES · BROCHURE · COMPLIANCE · TESTIMONIAL
               EXPLORE · BLOGS · FAQ · CTA
   ══════════════════════════════════════════════════════════════════════════ */

/* ── BADGES ────────────────────────────────────────────────────────────────
   Sits directly under the hero, on the same black, so the hero photo fades
   into it and the two read as one opening. Never on a light ground — the G2
   shields are white and vanish.                                            */
.cr-badges{background:var(--black);padding:52px 0 60px}
.cr-badges__in{display:flex;align-items:center;gap:28px 48px;flex-wrap:wrap}
.cr-badges__lb{flex:0 0 auto;font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -2%;
    color: rgba(255,255,255,.85);
  }
.cr-badges__row{display:flex;align-items:center;gap:16px 34px;flex-wrap:wrap;
  margin-left:auto}
.cr-badges__row img{display:block;height:80px;width:auto}
.cr-badges__row img.cr-badge--wide{height:52px}
@media (max-width:991px){
  .cr-badges{padding:38px 0 42px}
  .cr-badges__in{gap:20px}
  .cr-badges__row{margin-left:0;gap:14px 24px}
  .cr-badges__row img{height:58px}
  .cr-badges__row img.cr-badge--wide{height:38px}
}

/* The same claim at section scale, as outlined pills — used inside PROOF,
   never as a substitute for the badge band.                                */
.cr-rate{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.cr-rate span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);
  background:#fff;border-radius:var(--r-pill);padding:7px 15px;font-size:12.5px;
  font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.cr-rate svg{width:12px;height:12px;flex:none;color:var(--g)}
.cr-sec--dark .cr-rate span,.cr-sec--ink .cr-rate span{background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.14);color:#E7EFE8}
.cr-sec--dark .cr-rate svg,.cr-sec--ink .cr-rate svg{color:var(--g2)}

/* ── COMPLIANCE ────────────────────────────────────────────────────────────
   A black card carrying the promise, a hairline grid carrying the proof.
   The headline here is SANS, not serif — it is a statement of fact, not a
   section title, and the home page sets it that way.                       */
.cr-comply{display:grid;grid-template-columns:.86fr 1.5fr;gap:26px;align-items:stretch}
.cr-comply__card{background:var(--black2);border-radius:var(--r-md);padding:34px 32px;
  display:flex;flex-direction:column}
.cr-comply__card .cr-eyebrow{background:transparent;padding:0;color:var(--g2);
  margin-bottom:12px;letter-spacing:.01em;text-transform:none;font-size:14px;font-weight:500}
.cr-comply__card h3{margin:0 0 24px;font-family:var(--sans);font-size:24px;font-weight:500;
  line-height:1.24;letter-spacing:-.02em;color:#fff}
.cr-comply__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.cr-comply__list li{display:flex;align-items:flex-start;gap:11px;font-size:15px;
  line-height:1.45;color:rgba(255,255,255,.86)}
.cr-comply__list svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--g2)}
.cr-comply__seal{margin-top:auto;padding-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.cr-comply__seal span{border:1px solid rgba(255,255,255,.20);border-radius:var(--r-xs);
  padding:6px 12px;font-size:12px;font-weight:500;color:rgba(255,255,255,.82)}
.cr-comply__grid{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;
  border:1px solid var(--line2);border-radius:var(--r-md);overflow:hidden}
.cr-comply__grid>div{padding:26px 24px 28px;border-right:1px solid var(--line2);
  border-bottom:1px solid var(--line2)}
.cr-comply__grid>div:nth-child(3n){border-right:0}
.cr-comply__grid>div:nth-last-child(-n+3){border-bottom:0}
.cr-comply__grid svg{width:22px;height:22px;display:block;margin-bottom:16px;color:var(--gi)}
.cr-comply__grid b{display:block;font-size:16px;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:6px}
.cr-comply__grid p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:991px){
  .cr-comply{grid-template-columns:1fr}
  .cr-comply__grid{grid-template-columns:repeat(2,1fr)}
  .cr-comply__grid>div{border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
  .cr-comply__grid>div:nth-child(2n){border-right:0}
  .cr-comply__grid>div:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:575px){
  .cr-comply__grid{grid-template-columns:1fr}
  .cr-comply__grid>div{border-right:0;border-bottom:1px solid var(--line2)}
  .cr-comply__grid>div:last-child{border-bottom:0}
}

/* ── BROCHURE ──────────────────────────────────────────────────────────────
   Page-specific PDF. If the page has no brochure, DELETE THE WHOLE BLOCK —
   never ship it pointing at a file that does not exist.                    */
.cr-broch{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;
  background:#fff;border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:38px 40px;box-shadow:var(--sh-flat)}
.cr-broch h3{margin:14px 0 10px;font-family:var(--serif);font-size:32px;font-weight:400;
  line-height:110%;letter-spacing:-.02em;color:var(--ink)}
.cr-broch h3 em{font-style:normal;color:var(--g)}
.cr-broch p{margin:0 0 22px;font-size:16px;line-height:1.55;color:var(--muted);max-width:52ch}
.cr-broch__meta{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;
  color:var(--faint)}
.cr-broch__doc{position:relative;justify-self:end;width:100%;max-width:230px;aspect-ratio:210/297;
  background:linear-gradient(160deg,#fff,#F2F7F3);border:1px solid var(--line2);
  border-radius:var(--r-sm);box-shadow:var(--sh-ui);overflow:hidden;padding:22px 20px;
  display:flex;flex-direction:column;gap:9px}
.cr-broch__doc::after{content:"";position:absolute;right:-38px;bottom:-52px;width:150px;
  height:150px;border-radius:50%;background:radial-gradient(circle,rgba(0,168,45,.20),transparent 68%)}
.cr-broch__doc i{display:block;height:7px;border-radius:var(--r-pill);background:var(--line2)}
.cr-broch__doc i:nth-child(1){width:56%;height:11px;background:var(--gsoft)}
.cr-broch__doc i:nth-child(2){width:100%}
.cr-broch__doc i:nth-child(3){width:88%}
.cr-broch__doc i:nth-child(4){width:94%}
.cr-broch__doc i:nth-child(5){width:62%;margin-bottom:6px}
.cr-broch__doc b{display:block;height:52px;border-radius:var(--r-xs);
  background:linear-gradient(135deg,rgba(0,168,45,.14),rgba(0,168,45,.04));
  border:1px solid rgba(0,168,45,.18)}
@media (max-width:991px){
  .cr-broch{grid-template-columns:1fr;gap:30px;padding:30px 26px}
  .cr-broch__doc{justify-self:start;max-width:180px}
}

/* ── EXPLORE MORE WAYS ─────────────────────────────────────────────────────
   Exactly three links to sibling solution pages. Never two, never four.    */
.cr-explore{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cr-explore a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line2);
  border-radius:var(--r-lg);padding:26px;text-decoration:none;box-shadow:var(--sh-flat);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.cr-explore a:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);
  border-color:var(--gline)}
.cr-explore svg.cr-explore__i{width:26px;height:26px;color:var(--gi);margin-bottom:18px}
.cr-explore b{font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--ink);
  margin-bottom:8px}
.cr-explore p{margin:0 0 20px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.cr-explore__go{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:14px;
  font-weight:500;color:var(--g)}
.cr-explore__go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.cr-explore a:hover .cr-explore__go svg{transform:translateX(4px)}
@media (max-width:991px){.cr-explore{grid-template-columns:1fr}}

/* ── BLOG GRID ─────────────────────────────────────────────────────────────
   Three real posts from the page's own blog category, then one CTA to that
   category. The thumbnail is a drawn .cr-vis until real images exist.      */
.cr-blogs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cr-blogs a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line2);
  border-radius:var(--r-lg);overflow:hidden;text-decoration:none;box-shadow:var(--sh-flat);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.cr-blogs a:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);border-color:var(--gline)}
.cr-blogs__th{position:relative;height:172px;flex:none;overflow:hidden;
  border-bottom:1px solid var(--line2);
  background:
    radial-gradient(120% 92% at 78% 6%,rgba(0,168,45,.17),transparent 62%),
    linear-gradient(152deg,#EFF6F1 0%,#F7F9F8 54%,#E7F3EA 100%)}
/* A blog card with a flat grey thumbnail is an empty box (F-06). Until real
   thumbnails exist this carries the dot mesh so the card reads as finished.
   PRODUCTION: put <img> inside .cr-blogs__th; it covers this entirely. */
.cr-blogs__th::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(14,14,14,.11) 1px,transparent 1px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(86% 86% at 26% 104%,#000 10%,transparent 74%);
          mask-image:radial-gradient(86% 86% at 26% 104%,#000 10%,transparent 74%)}
.cr-blogs__th img{width:100%;height:100%;object-fit:cover;display:block}
.cr-blogs__b{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.cr-blogs__b .cr-tag{align-self:flex-start;margin-bottom:12px}
.cr-blogs__b b{font-size:17px;font-weight:500;line-height:1.35;letter-spacing:-.02em;
  color:var(--ink)}
.cr-blogs__m{margin-top:auto;padding-top:18px;font-size:13px;color:var(--faint)}
@media (max-width:991px){.cr-blogs{grid-template-columns:1fr}}

/* ── FAQ ───────────────────────────────────────────────────────────────────
   Native <details>. No script, so it cannot break, and it stays open for
   Ctrl-F and for search engines.                                          */
.cr-faq{border-top:1px solid var(--line2)}
.cr-faq details{border-bottom:1px solid var(--line2)}
.cr-faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:20px;
  padding:22px 0;font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.02em;
  color:var(--ink);transition:color .2s ease}
.cr-faq summary::-webkit-details-marker{display:none}
.cr-faq summary:hover{color:var(--g)}
.cr-faq summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px;
  margin-top:7px;border-right:2px solid var(--g);border-bottom:2px solid var(--g);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.cr-faq details[open] summary::after{transform:rotate(-135deg)}
.cr-faq details>div{padding:0 44px 24px 0;font-size:16px;line-height:1.6;color:var(--muted);
  max-width:78ch}
.cr-faq details>div p{margin:0 0 12px}
.cr-faq details>div p:last-child{margin-bottom:0}
.cr-sec--dark .cr-faq,.cr-sec--dark .cr-faq details{border-color:var(--lined)}
.cr-sec--dark .cr-faq summary{color:#F2F6F2}
.cr-sec--dark .cr-faq summary:hover{color:var(--g2)}
.cr-sec--dark .cr-faq summary::after{border-color:var(--g2)}
.cr-sec--dark .cr-faq details>div{color:rgba(255,255,255,.70)}
@media (max-width:575px){
  .cr-faq summary{font-size:16.5px;gap:14px}
  .cr-faq details>div{padding-right:0;font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════════════
   FIXES FOLDED UP FROM PAGE RUNS
   Each of these was patched by hand inside a built page. A fix that lives in
   one page is a fix the next page does not get, so they belong here.
   ══════════════════════════════════════════════════════════════════════════ */

/* The glow green is scoped to .cr-sec--dark / .cr-sec--ink. The hero and the
   closing CTA are dark grounds carrying NEITHER class, so their emphasis fell
   back to --g on black — 3.0:1, and visibly duller than every dark section
   between them. Those two are the first places a stranger compares. */
.cr-hero .cr-t em,.cr-cta .cr-t em{color:var(--g2)}
.cr-hero .cr-lead,.cr-cta .cr-lead{color:rgba(255,255,255,.72)}

/* A dark card pinned .cr-vis to its own height and out-ranked .cr-vis--tall,
   clipping the taller compositions. */
.cr-card--dark .cr-vis--tall{height:270px}

/* .cr-panel is --panel, the same value as a panel-ground section, so on that
   ground it vanished. Lift it to white and give it the card hairline. */
.cr-sec--panel .cr-panel{background:#fff;border:1px solid var(--line2)}

/* 520px is the measure for a lead sitting BESIDE a headline, not under one.
   Centred leads were reading as narrow ragged columns. */
.cr-head--center .cr-lead{max-width:660px;margin-left:auto;margin-right:auto;
  text-align:center}

/* Five stacked feature rows read as one undifferentiated column without this. */
.cr-sec .cr-split+.cr-headrow{margin-top:104px}
@media (max-width:991px){.cr-sec .cr-split+.cr-headrow{margin-top:64px}}

/* Any block that sets .cr-split columns with an INLINE style out-ranks the
   kit's mobile rule and stays two-up on a phone. !important is the only thing
   that beats an inline declaration, so it is used deliberately and only here. */
@media (max-width:991px){.cr-sec .cr-split{grid-template-columns:1fr!important}}

/* The quote mark at 26px / .55 opacity disappeared. */
.cr-quote__m{font-size:40px;opacity:.75;margin-bottom:14px}


/* ══════════════════════════════════════════════════════════════════════════
   THE HERO
   --------------------------------------------------------------------------
   Four layers, in this order, exactly as the live site builds it:
     1  .cr-hero__img     the photograph, object-position top
     2  .cr-hero__scrim   a vertical scrim that ends in SOLID black
     3  .cr-hero__glow    an off-centre oval, soft-light, half opacity
     4  .cr-hero__in      the content

   The scrim reaching pure black at 100% is what lets the hero cut straight
   into the next section with no transition device. That hard cut is the
   design — do not soften it, and do not put a dome under it.
   ══════════════════════════════════════════════════════════════════════════ */
.cr-hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;
  overflow:hidden;
  background:linear-gradient(rgba(0,0,0,.4) 0%,rgba(0,0,0,.6) 60%,#000 100%),var(--black2)}
.cr-hero>.cr-photo,.cr-hero__img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center top;animation:cr-hero-fade .3s ease-out both}
@keyframes cr-hero-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cr-hero__img{animation:none}}

/* Solutions pages start the scrim at 10%; the home page starts it at 40%.
   Ours are solutions pages, so 10% is the default — the headline sits low
   and needs the depth. */
.cr-hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0) 10%,#000 100%)}
.cr-hero__scrim--home{background:linear-gradient(rgba(0,0,0,0) 40%,#000 100%)}

/* The signature oval. The live site loads a PNG; this is the same figure as a
   gradient so the page still needs no external file. Keep the blend mode and
   the opacity — at soft-light .5 it lifts the photo without lighting it. */
.cr-hero__glow{position:absolute;left:-339px;top:150px;width:1115px;height:610px;
  z-index:1;pointer-events:none;mix-blend-mode:soft-light;opacity:.5;
  background:radial-gradient(58% 66% at 42% 78%,
    rgba(255,255,255,.95) 0%,rgba(198,241,210,.55) 34%,
    rgba(0,166,47,.28) 58%,rgba(0,166,47,0) 78%)}

.cr-hero__in{position:relative;z-index:3;width:100%;padding-bottom:40px;padding-top:160px}
.cr-hero__grid{display:grid;grid-template-columns:1.25fr .95fr;gap:56px;align-items:end}
.cr-hero__badge{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:13px;
  font-weight:500;margin-bottom:22px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);border-radius:var(--r-pill);padding:7px 14px}
.cr-hero__badge svg{width:14px;height:14px;fill:none;stroke:var(--g2);stroke-width:1.7;
  stroke-linejoin:round}
.cr-hero__side{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.cr-hero__desc{font-size:16px;line-height:24px;letter-spacing:-.011em;color:#fff;margin:0;
  max-width:460px}
@media (max-width:991px){
  .cr-hero{min-height:auto}
  .cr-hero__grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .cr-hero__in{padding:130px 0 56px}
  .cr-hero__glow{left:-40%;width:140%;top:120px;height:440px}
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE-SCOPED ADDITIONS — smart-reports only.
   Every rule below is scoped to one of THIS page's own sections. Nothing here
   touches a REPEAT: block, the header, the footer or the kit's own selectors.
   If a rule proves useful on a second page, fold it up into kit.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* --ink is a dark ground, but .cr-panel and .cr-eyebrow are both defined for
   light. Give them dark counterparts rather than hand-styling each instance. */
.cr-sec--ink .cr-panel{background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09)}
.cr-sec--ink .cr-eyebrow,.cr-sec--dark .cr-eyebrow{background:rgba(255,255,255,.08);
  color:#EAF2EB}

/* The comparison panels sit top-aligned, not centre-aligned: the two sides are
   different heights by design and centring them floats the shorter one. */
.cr-split--top{align-items:start}
.cr-panel--flush{display:block;min-height:0;padding:26px}

/* Mono, for the webhook payload only. Inter's tabular figures are not enough —
   a JSON block has to read as machine output. */
.cr-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:20px;letter-spacing:0}

/* A drawn QR. Real modules, crisp edges, no external file. */
.ui-qr{width:64px;height:64px;flex:none;background:#fff;border-radius:6px;padding:4px}
.ui-qr svg{display:block;width:100%;height:100%;shape-rendering:crispEdges}

/* The reference-range bar under a result. */
.ui-range{position:relative;height:30px;margin:10px 0 6px}
.ui-range__t{position:absolute;left:0;right:0;top:11px;height:7px;border-radius:99px;
  background:linear-gradient(90deg,#F3D9A0 0%,#CFE9D4 22%,#CFE9D4 58%,#F6C9B8 78%,#F1A99A 100%)}
.ui-range__p{position:absolute;top:6px;width:3px;height:17px;border-radius:2px;
  background:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.ui-range__s{display:flex;justify-content:space-between;font-size:9px;color:var(--faint);
  font-variant-numeric:tabular-nums}

/* The four report-style previews are pages, so they get a paper edge. */
.ui-page{background:#fff;border-radius:6px;box-shadow:0 8px 22px -10px rgba(0,0,0,.55);
  width:100%;overflow:hidden;font-size:11px;color:#0f172a}
.ui-page__h{display:flex;align-items:center;gap:8px;padding:9px 11px;
  border-bottom:1px solid var(--line2)}
.ui-page__h div b{font-size:10.5px;font-weight:600;color:var(--ink);display:block;
  line-height:1.2}
.ui-page__h div span{font-size:8.5px;color:var(--faint);display:block}
.ui-page__b{padding:11px}
.ui-page__t{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:11px}
.ui-page__f{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 11px;border-top:1px solid var(--line2);font-size:8px;color:var(--faint)}

/* One explained result inside a preview page. */
.ui-res{padding:7px 0;border-top:1px solid #F4F6F4}
.ui-res:first-child{border-top:0;padding-top:0}
.ui-res__t{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ui-res__t b{font-size:10.5px;font-weight:600;color:var(--ink)}
.ui-res__t i{font-style:normal;font-size:12px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-res p{margin:3px 0 0;font-size:8.5px;line-height:1.45;color:#5B645C}




/* The CTA banner carries a real photograph, so .cr-photo's drawn stand-in
   texture comes off and the image covers the slot. The ::after scrim stays —
   it is what keeps the headline legible. (F-27) */
.cr-cta .cr-photo::before{display:none}
/* This banner has a bright white report page right where the lead sits, so the
   stock .cr-photo scrim is not enough. Measured at 1440 and 390. (F-27) */
.cr-cta .cr-photo::after{background:
  radial-gradient(72% 58% at 50% 46%,rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 100%),
  linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.62) 55%,#000 100%)}
.cr-cta .cr-photo img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 64%}

/* KIT BUG — .cr-btn--ghost is white-on-transparent with a white hairline, so
   the "View all blogs" button inside REPEAT: BLOGS (a .cr-sec--panel, light)
   renders invisible. Giving the ghost button a light-ground variant fixes the
   frozen block everywhere instead of unpicking it on this page. The CTA's own
   ghost button is on .cr-cta, not .cr-sec, so it is untouched. Belongs in
   kit.css. */
.cr-sec--panel .cr-btn--ghost{background:#fff;color:var(--ink);
  border-color:var(--line2)}
.cr-sec--panel .cr-btn--ghost:hover{border-color:var(--gline);color:var(--g)}

/* KIT BUG — .cr-hero__in carries both .cr-hero__in and .cr-wrap, and the
   mobile rule sets the `padding` SHORTHAND, which zeroes .cr-wrap's 24px side
   gutter. The hero headline then runs off both edges of a phone. Scoped here;
   belongs in kit.css. */
@media(max-width:991px){.cr-hero__in.cr-wrap{padding-left:24px;padding-right:24px}}


/* ── REPORT STYLES (tabbed sheet, after the badge band) ─────────────────────
   Structure taken from the old page's hero: four style tabs driving one live
   report sheet. Tabs are real buttons (role=tab); panels are role=tabpanel. */
.sr-styles__split{grid-template-columns:.9fr 1.1fr}
.sr-tabs{display:flex;flex-direction:column;margin-top:36px;border-top:1px solid var(--line)}
.sr-tab{display:flex;align-items:center;gap:16px;width:100%;padding:18px 4px;background:none;
  border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;
  font-family:var(--sans);color:var(--muted);transition:color .25s var(--ease)}
.sr-tab__n{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--faint);
  font-variant-numeric:tabular-nums;width:22px;flex:none;transition:color .25s var(--ease)}
.sr-tab__l{flex:1;font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.sr-tab__a{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sr-tab:hover{color:var(--ink)}
.sr-tab[aria-selected="true"]{color:var(--ink)}
.sr-tab[aria-selected="true"] .sr-tab__n{color:var(--g)}
.sr-tab[aria-selected="true"] .sr-tab__a{opacity:1;transform:none;color:var(--g)}
.sr-tab[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--g);padding-left:16px}
.sr-tab{transition:color .25s var(--ease),padding .25s var(--ease),box-shadow .25s var(--ease)}

.sr-styles__stage{padding:40px 34px}
.sr-sheet{width:100%;max-width:480px;background:#fff;border:1px solid var(--line2);
  border-radius:var(--r-xs);box-shadow:var(--sh-card);overflow:hidden;color:#0f172a;
  position:relative;z-index:1}
.sr-sheet__bar{height:6px;background:linear-gradient(90deg,#3FD15F,#00A82D)}
.sr-sheet__h{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--line2)}
.sr-sheet__lab{display:flex;align-items:center;gap:12px;min-width:0}
.sr-sheet__mark{width:38px;height:38px;border-radius:var(--r-xs);flex:none;
  background:linear-gradient(180deg,#3FD15F,#00A82D);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--serif);font-size:18px}
.sr-sheet__lab div b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.sr-sheet__lab div span{display:block;font-size:11px;color:var(--faint);margin-top:1px}
.sr-sheet__pt{text-align:right;font-size:11px;line-height:1.55;color:var(--faint)}
.sr-sheet__pt span{display:block}
.sr-sheet__body{position:relative;min-height:372px}
.sr-panel{padding:18px 24px 20px;animation:sr-in .4s var(--ease) both}
.sr-panel[hidden]{display:none}
@keyframes sr-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sr-sheet__f{display:flex;align-items:center;gap:12px;padding:12px 24px;
  border-top:1px solid var(--line2);background:var(--panel)}
.sr-sheet__f .ui-qr{width:38px;height:38px;padding:3px;border:1px solid var(--line2)}
.sr-sheet__v{flex:1;font-size:10.5px;line-height:1.45;color:var(--faint)}
.sr-sheet__pg{font-size:10px;color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums}

.is-ok{color:var(--g)!important}.is-warn{color:#8C6410!important}.is-flag{color:#A63325!important}

/* classic */
.sr-res{padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid #F1F3F1}
.sr-res:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.sr-res__t{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sr-res__t b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;
  font-weight:600;color:var(--ink)}
.sr-res__t b>span:not(.ui-pill){font-weight:400;font-size:12px;color:var(--faint)}
.sr-res__t i{font-style:normal;font-size:16px;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sr-res__t small,.sr-kpis small{font-size:11px;font-weight:400;color:var(--faint)}
.sr-res p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.sr-bar{position:relative;display:flex;height:6px;border-radius:99px;overflow:visible;margin:10px 0 9px}
.sr-bar i{display:block;height:100%}
.sr-bar i:first-child{border-radius:99px 0 0 99px}
.sr-bar i.flag{flex:1;border-radius:0 99px 99px 0}
.sr-bar i.ok{background:#CFE9D4}.sr-bar i.warn{background:#F3D9A0}.sr-bar i.flag{background:#F6C9B8}
.sr-bar u{position:absolute;top:-4px;width:3px;height:14px;border-radius:2px;background:var(--ink);
  box-shadow:0 0 0 2px #fff}

/* ledger */
.sr-ledger{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
.sr-ledger th{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);text-align:right;padding:0 0 9px;border-bottom:1px solid var(--line)}
.sr-ledger td{padding:11px 0;border-bottom:1px solid #F1F3F1;text-align:right;color:var(--ink)}
.sr-ledger th:first-child,.sr-ledger td:first-child{text-align:left}
.sr-ledger td:nth-child(3),.sr-ledger td:nth-child(4){color:var(--faint)}
.sr-ledger tr:last-child td{border-bottom:0}
.sr-cap{font-size:10px;letter-spacing:.06em;color:var(--faint);padding-top:12px;margin-top:4px;
  border-top:1px solid #F1F3F1}
.sr-cap--top{border-top:0;padding-top:0;margin:0 0 12px}

/* education */
.sr-edu__t{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:16px}
.sr-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.sr-kpis div{border:1px solid var(--line2);border-radius:var(--r-xs);padding:14px 16px}
.sr-kpis span{display:block;font-size:11.5px;color:var(--faint);margin-bottom:4px}
.sr-kpis b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.sr-edu__p{margin:0 0 14px;font-size:13px;line-height:1.7;color:var(--muted)}
.sr-edu__p b{color:var(--ink);font-weight:600}

/* trend */
.sr-trend{display:flex;align-items:center;gap:14px;padding:0 0 16px;margin-bottom:16px;
  border-bottom:1px solid #F1F3F1}
.sr-trend__m{flex:1;min-width:0}
.sr-trend__m b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.sr-trend__m span{display:block;font-size:11px;color:var(--faint);margin-top:2px;
  font-variant-numeric:tabular-nums}
.sr-trend svg{width:90px;height:30px;flex:none}
.sr-trend svg polyline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-trend i{font-style:normal;font-size:11px;font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.sr-trend+.sr-cap{margin-top:0;border-top:0;padding-top:0}

@media(max-width:991px){
  .sr-tabs{flex-direction:row;flex-wrap:wrap;gap:8px;border-top:0;margin-top:28px}
  .sr-tab{width:auto;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;gap:8px}
  .sr-tab[aria-selected="true"]{padding-left:14px;box-shadow:none;background:var(--g);
    border-color:var(--g);color:#fff}
  .sr-tab[aria-selected="true"] .sr-tab__n{color:rgba(255,255,255,.8)}
  .sr-tab__l{font-size:14px}
  .sr-tab__a{display:none}
  .sr-styles__stage{padding:24px 16px}
}
@media(max-width:575px){
  .sr-sheet__h,.sr-panel,.sr-sheet__f{padding-left:16px;padding-right:16px}
  .sr-sheet__pt{text-align:left}
  .sr-kpis{grid-template-columns:1fr}
  .sr-sheet__body{min-height:0}
}


/* ── HOW IT WORKS · stepper (after the homepage "Workflow Overview") ── */
.sr-wf-track{position:relative;padding-top:56px}
.sr-wf-line{position:absolute;top:78px;left:12.5%;right:12.5%;height:2px;border-radius:2px;
  background:rgba(15,23,42,.10);overflow:hidden}
.sr-wf-fill{display:block;height:100%;width:100%;background:var(--g);
  transition:width .7s cubic-bezier(.4,0,.2,1),height .7s cubic-bezier(.4,0,.2,1)}
.sr-wf.is-running .sr-wf-fill{width:0}
.sr-wf-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sr-wf-step{position:relative;text-align:center;min-width:0}
.sr-wf-step .cr-cb{max-width:240px;margin:6px auto 0}
.sr-wf-node{position:relative;width:44px;height:44px;border-radius:50%;background:#fff;
  border:2px solid rgba(15,23,42,.12);display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:22px;transition:background .4s ease,border-color .4s ease,transform .4s ease,box-shadow .4s ease}
.sr-wf-num{font-size:15px;font-weight:600;color:var(--muted);line-height:1;transition:opacity .25s ease}
.sr-wf-icon,.sr-wf-check{position:absolute;width:20px;height:20px;color:#fff;opacity:0;transition:opacity .3s ease}
/* default (no JS / finished): every step done */
.sr-wf-step .sr-wf-node,.sr-wf-step.is-done .sr-wf-node,.sr-wf-step.is-active .sr-wf-node{
  background:var(--g);border-color:var(--g)}
.sr-wf-step .sr-wf-num{opacity:0}
.sr-wf-step .sr-wf-check{opacity:1}
/* while running: upcoming steps are neutral */
.sr-wf.is-running .sr-wf-step:not(.is-done):not(.is-active) .sr-wf-node{background:#fff;border-color:rgba(15,23,42,.12)}
.sr-wf.is-running .sr-wf-step:not(.is-done):not(.is-active) .sr-wf-num{opacity:1}
.sr-wf.is-running .sr-wf-step:not(.is-done) .sr-wf-check{opacity:0}
.sr-wf-step.is-active .sr-wf-icon{opacity:1}
.sr-wf-step.is-active .sr-wf-num{opacity:0}
.sr-wf-step.is-active .sr-wf-node{transform:scale(1.08);box-shadow:0 8px 22px -6px rgba(0,168,45,.45)}
.sr-wf-step.is-active .sr-wf-node::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--g);opacity:.35;animation:sr-wf-pulse 1.6s ease-out infinite}
@keyframes sr-wf-pulse{0%{transform:scale(.85);opacity:.55}70%,100%{transform:scale(1.25);opacity:0}}
/* each step's screen */
.sr-wf-vis{margin-top:26px;text-align:left;border:1px solid var(--line2);border-radius:var(--r-md);
  background:#fff;padding:4px;transition:opacity .5s ease,filter .5s ease,transform .5s ease,border-color .5s ease,box-shadow .5s ease}
.sr-wf-vis .cr-vis{margin:0}
.sr-wf.is-running .sr-wf-step:not(.is-done):not(.is-active) .sr-wf-vis{opacity:.4;filter:grayscale(.7);transform:translateY(6px)}
.sr-wf-step.is-active .sr-wf-vis{border-color:rgba(0,168,45,.35);box-shadow:var(--sh-lift)}
/* travelling badge */
.sr-wf-badge{position:absolute;top:0;left:0;transform:translateX(-50%);background:var(--g);color:#fff;
  padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;line-height:18px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;pointer-events:none;
  box-shadow:0 10px 24px -8px rgba(0,168,45,.55);opacity:0;
  transition:opacity .4s ease,left .7s cubic-bezier(.4,0,.2,1)}
.sr-wf-badge.is-visible{opacity:1}
.sr-wf-badge::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;
  background:var(--g);transform:translateX(-50%) rotate(45deg)}
.sr-wf-badge__ic{display:inline-flex}
.sr-wf-badge__ic svg{width:14px;height:14px}
@media (max-width:1100px) and (min-width:901px){.sr-wf-steps{gap:16px}}
@media (max-width:900px){
  .sr-wf-track{padding-top:0}
  .sr-wf-badge{display:none}
  .sr-wf-steps{grid-template-columns:1fr;gap:36px}
  /* one connector per step, so the line stops at the last node */
  .sr-wf-line{display:none}
  .sr-wf-step:not(:last-child)::after{content:"";position:absolute;left:21px;top:44px;bottom:-36px;
    width:2px;background:var(--g);transition:background .5s ease}
  .sr-wf.is-running .sr-wf-step:not(.is-done)::after{background:rgba(15,23,42,.10)}
  .sr-wf-step{text-align:left;padding-left:68px;min-height:44px}
  .sr-wf-node{position:absolute;left:0;top:0;margin:0}
  .sr-wf-step .cr-cb{max-width:none;margin-left:0}
  .sr-wf-vis{margin-top:18px}
}

/* Smart Reports step screens */
/* Step text runs to different lengths; the screens bottom-align so the row reads level. */
.sr-wf-step{display:flex;flex-direction:column}
.sr-wf-step .sr-wf-node{align-self:center}
.sr-wf-step .sr-wf-vis{margin-top:auto}
.sr-wf-step .cr-cb{margin-bottom:26px}
@media (max-width:900px){.sr-wf-step .sr-wf-node{align-self:auto}.sr-wf-step .cr-cb{margin-bottom:18px}}
.sr-wf .cr-vis .ui{box-shadow:none}
.sr-json{margin:0;padding:10px 11px;border-radius:var(--r-xs);background:#0f1310;color:#CFE0D2;
  font-size:9.5px;line-height:16px;white-space:pre;overflow:hidden}
.sr-json b{color:#3FD15F;font-weight:500}.sr-json i{font-style:normal;color:#F2C14E}
.sr-kvr{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #F1F4F1}
.sr-kvr:first-of-type{border-top:0}
.sr-kvr b.wrap{white-space:normal;line-height:1.35}
.sr-kvr span{font-size:9px;color:var(--faint);width:52px;flex:none;letter-spacing:.04em;text-transform:uppercase}
.sr-kvr b{flex:1;min-width:0;font-size:10.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.sr-kvr svg{width:11px;height:11px;flex:none;color:#137019;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.sr-note{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:9px;
  background:var(--gsoft);border:1px solid rgba(0,168,45,.22);font-size:9.5px;line-height:1.3;color:#137019}
.sr-note--r{background:#FCEBE9;border-color:rgba(166,51,37,.22);color:#A63325}
.sr-note .ui-av{background:#fff;color:inherit;width:22px;height:22px}
.sr-cmp{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;
  border-top:1px solid #F1F4F1;font-size:10px;color:var(--muted)}
.sr-cmp:first-of-type{border-top:0}
.sr-wf .ui-bars{height:62px}
.sr-wf .ui-bars i.hi{background:linear-gradient(180deg,#E97A6A,#C0392B)}
.sr-wf .ui-bars i.hi::after{content:attr(data-v);position:absolute;top:-15px;left:50%;
  transform:translateX(-50%);font-size:9px;font-weight:600;color:#A63325}
.sr-pages{position:relative;height:104px;margin:0 auto 12px;width:150px}
.sr-pages>div{position:absolute;width:104px;height:100px;background:#fff;border:1px solid var(--line2);
  border-radius:6px;box-shadow:0 8px 18px -10px rgba(15,23,42,.35);overflow:hidden;padding:0 0 6px}
.sr-pages>div:nth-child(1){left:0;top:4px;transform:rotate(-6deg)}
.sr-pages>div:nth-child(2){left:22px;top:2px;transform:rotate(-2deg)}
.sr-pages>div:nth-child(3){left:44px;top:0}
.sr-pages>div::before{content:"";display:block;height:4px;background:linear-gradient(90deg,#3FD15F,#00A82D)}
.sr-pages i{display:block;height:4px;border-radius:2px;background:#E4E8E4;margin:6px 8px 0}
.sr-pages i:first-of-type{width:44%;background:var(--gsoft);height:6px;margin-top:8px}
.sr-pages u{position:absolute;right:6px;bottom:5px;font-size:7px;text-decoration:none;color:var(--faint)}
.sr-ch{display:flex;gap:7px;flex-wrap:nowrap}
.sr-ch div{flex:1 1 0;min-width:0;border:1px solid var(--line2);background:#fff;border-radius:10px;
  padding:8px 4px;text-align:center;font-size:8.5px;color:#3A423A}
.sr-ch div span{display:flex;width:24px;height:24px;margin:0 auto 5px;border-radius:10px;align-items:center;
  justify-content:center;background:var(--gsoft);color:var(--gi)}
.sr-ch div svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round}
.sr-wf .cr-band{margin-top:64px}


/* ── 05 · WHAT'S INSIDE — icon feature cards ──────────────────────────────
   No drawn screen: a 48 chip + title + body. On hover the card lifts and the
   chip fills solid green with a white glyph. */
.sr-feats .sr-feat{padding:30px 28px 32px;border-radius:var(--r-lg);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.sr-feat__ic{margin-bottom:24px;background:rgba(63,209,95,.12);color:var(--g2);
  border:1px solid rgba(63,209,95,.22);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.sr-feat .cr-ct{font-size:18px;line-height:26px;margin-bottom:10px;transition:color .3s var(--ease)}
.sr-feat:hover{transform:translateY(-4px);border-color:rgba(63,209,95,.55);
  box-shadow:0 0 40px rgba(63,209,95,.08) inset,0 20px 40px -20px rgba(0,168,45,.45)}
.sr-feat:hover .sr-feat__ic{background:linear-gradient(180deg,#3FD15F,#00A82D);color:#fff;
  border-color:transparent;transform:scale(1.06);box-shadow:0 10px 24px -8px rgba(0,168,45,.6)}
.sr-feat:hover .cr-ct{color:var(--g2)}
@media(max-width:991px){.sr-feats .sr-feat{padding:26px 22px 28px}}

/* AI narrative summary — switch reveals the sample narrative. */
.sr-feat__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sr-switch{position:relative;width:44px;height:24px;flex:none;border-radius:999px;cursor:pointer;
  padding:0;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.sr-switch__k{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .3s var(--ease)}
.sr-switch:hover{border-color:rgba(63,209,95,.6)}
.sr-switch[aria-pressed="true"]{background:linear-gradient(180deg,#3FD15F,#00A82D);border-color:transparent}
.sr-switch[aria-pressed="true"] .sr-switch__k{left:22px}
.sr-switch:focus-visible{outline:2px solid var(--g2);outline-offset:3px}
.sr-ai{display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .45s var(--ease),visibility 0s linear .45s}
.sr-ai__in{overflow:hidden;min-height:0}
.sr-ai.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease)}
.sr-ai__q{margin:18px 0 0;padding:14px 16px;border-radius:var(--r-xs);
  border:1px solid rgba(63,209,95,.22);border-left:3px solid var(--g2);
  background:rgba(63,209,95,.06);font-size:14px;line-height:22px;letter-spacing:-.01em;
  color:rgba(255,255,255,.86);opacity:0;transform:translateY(-6px);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.sr-ai.is-open .sr-ai__q{opacity:1;transform:none;transition-delay:.1s}

/* ── 03 · WHITE-LABEL — pick-a-lab chips drive the branded sheet ─────────
   Each chip carries its lab's colour in --lab; the sheet inherits it. */
.sr-labs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.sr-lab{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 8px;border-radius:999px;
  background:#fff;border:1px solid var(--line2);font-family:var(--sans);font-size:14px;font-weight:500;
  letter-spacing:-.01em;color:var(--muted);cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.sr-lab__m{width:24px;height:24px;border-radius:999px;flex:none;background:var(--lab);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.sr-lab:hover{color:var(--ink);border-color:var(--gline);transform:translateY(-1px)}
.sr-lab[aria-pressed="true"]{color:var(--ink);border-color:var(--g);box-shadow:0 0 0 3px rgba(0,168,45,.12)}
.sr-wl{align-items:center}
.sr-wlsheet .sr-wl__bar{background:var(--lab);transition:background .35s var(--ease)}
.sr-wlsheet .sr-wl__mark{background:var(--lab);transition:background .35s var(--ease)}
.sr-wl__body{padding:20px 24px 22px}
.sr-wl__label{font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--lab);
  margin-bottom:12px;transition:color .35s var(--ease)}
.sr-wl__row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink);
  padding:10px 0;border-bottom:1px solid #F1F3F1}
.sr-wl__row:last-child{border-bottom:0;padding-bottom:0}
.sr-wl__row b{font-weight:600;font-variant-numeric:tabular-nums}
.sr-wlsheet.is-swap .sr-sheet__h,.sr-wlsheet.is-swap .sr-sheet__v{animation:sr-in .4s var(--ease) both}
.sr-wlsheet .sr-sheet__h{flex-direction:column;align-items:flex-start;gap:10px}
.sr-wlsheet .sr-sheet__pt{text-align:left;padding-left:50px}
@media(max-width:991px){.sr-labs{margin-bottom:28px}
  .sr-wl>.cr-panel{order:-1}}
@media(max-width:575px){.sr-wl__body{padding:16px}}


/* ══════════════════════════════════════════════════════════════════════════
   HERO · light split (replaces the photo banner)
   Copy left, live report sheet right. Pill tabs reuse .sr-tab + JS.
   ══════════════════════════════════════════════════════════════════════════ */
.sr-hero{background:#FAF9F6;padding:150px 0 110px;border-bottom:1px solid var(--line)}
.sr-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:72px;align-items:center}
.sr-hero__eyebrow{display:block;font-size:13px;font-weight:600;letter-spacing:.24em;color:var(--g);margin-bottom:28px}
.sr-hero__t{font-size:64px;line-height:110.00000000000001%;letter-spacing:-2%;font-weight: 400;}
.sr-hero__desc{font-size:19px;line-height:30px;letter-spacing:-.011em;color:var(--muted);margin:32px 0 36px;max-width:520px;text-wrap:pretty}
.sr-btn--line{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.sr-btn--line:hover{border-color:var(--gline);color:var(--g)}
.sr-hero__note{display:flex;align-items:center;gap:10px;margin:32px 0 0;font-size:14px;line-height:20px;color:var(--muted)}
.sr-hero__note span{width:8px;height:8px;border-radius:50%;background:var(--g);flex:none}
.sr-hero__vis{display:flex;flex-direction:column;align-items:stretch;gap:20px}
.sr-hero__vis .sr-sheet{max-width:none;box-shadow:0 30px 60px -30px rgba(15,23,42,.25),0 1px 2px rgba(15,23,42,.04)}

/* Pill tabs above the sheet (overrides the stacked .sr-tabs list) */
.sr-tabs--pill{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:0;border-top:0}
.sr-tabs--pill .sr-tab{width:auto;padding:9px 16px;gap:0;border:1px solid var(--line2);border-radius:999px;
  background:#fff;color:var(--muted);box-shadow:none}
.sr-tabs--pill .sr-tab__n,.sr-tabs--pill .sr-tab__a{display:none}
.sr-tabs--pill .sr-tab__l{font-size:14px;font-weight:500;letter-spacing:-.01em}
.sr-tabs--pill .sr-tab:hover{color:var(--ink);border-color:var(--gline)}
.sr-tabs--pill .sr-tab[aria-selected="true"]{padding-left:16px;background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}

@media(max-width:991px){
  .sr-hero{padding:120px 0 72px}
  .sr-hero__grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .sr-hero__t{max-width:none}
  .sr-tabs--pill .sr-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
}
@media(max-width:575px){
  .sr-hero{padding:104px 0 56px}
  .sr-hero__desc{font-size:17px;line-height:27px;margin:24px 0 28px}
  .sr-hero__eyebrow{margin-bottom:20px}
}