/* ============================================================
   THE OBSIDIAN CO.™ — Brand Book June 2026 compliance
   Primary palette   p.32 : #020202 #E4E4E4 #F2F2F2 #F9F9F9 #3380AB #6CAA33
   Secondary palette p.33 : #607B8C #8094A2 #CED5DB
   Typography        p.27-30 : Quasimoda Light / Regular / Medium (+ italics)
                     Arial is the approved substitute font
   Type scale        p.29 : Heading 280% · Sub-Heading 160%
                            Body Heading 100% (Medium) · Body Copy 100% (Light)
   NOTE: no weight above Medium (500) is used anywhere on this page.
   ============================================================ */
:root{
  /* Primary */
  --black:#020202;
  --grey-1:#E4E4E4;
  --grey-2:#F2F2F2;
  --grey-3:#F9F9F9;
  --sand:#F1ECE3;        /* the warm band the branding section sits on */
  --sand-line:#E3D9C9;
  --sand-dark:#6B5B45;   /* the sand band, taken dark: for buttons on it */
  --blue:#3380AB;
  --green:#6CAA33;
  /* Secondary */
  --slate:#607B8C;
  --slate-2:#8094A2;
  --slate-3:#CED5DB;
  /* Engine health states — mirrors the Ecommerce Engine™ Dashboard */
  --state-healthy:#6CAA33;
  --state-monitor:#3380AB;
  --state-bottleneck:#B4483F;

  --font:"quasimoda",Arial,Helvetica,sans-serif;

  /* ---------- Type scale ----------
     One ladder for the whole site, per Brand Book p.29. clamp() so type
     tracks the viewport between a readable floor and a ceiling that keeps
     ultrawide and 4K displays sane. Note the page renders at zoom:.9 from
     900px up, so on screen these land at .9x the numbers below. */
  --text-micro:14px;                         /* uppercase eyebrows, keys, tags */
  --text-small:clamp(14px,1.05vw,15px);         /* captions, hints, legal */
  --text-label:clamp(15px,1.15vw,16.5px);      /* metadata, secondary copy */
  --text-base:clamp(17.5px,1.25vw,19.5px);        /* body */
  --text-large:clamp(19px,1.5vw,23px);       /* lede, hero supporting copy */
  --text-nav:clamp(16.5px,1.15vw,18px);
  --text-btn:clamp(17px,1.3vw,19px);
  --heading-4:clamp(21px,2.1vw,30px);
  --heading-3:clamp(25px,2.6vw,38px);
  --heading-2:clamp(27px,2.8vw,40px);
  --heading-1:clamp(45px,5.1vw,78px);
  /* the green trial button is the same box wherever it appears */
  --cta-py:8px;
  --cta-px:22px;
  --measure:min(68ch,750px);                 /* a readable line of body copy, capped on big monitors */

  /* kept so older rules keep resolving, now pointing at the ladder above */
  --t-body:var(--text-base);
  --t-body-heading:var(--heading-4);
  --t-sub:var(--heading-3);
  --t-heading:var(--heading-2);

  --wrap:2200px;
  --gutter:clamp(20px,calc(8vw - 12px),128px);
}

*{box-sizing:border-box;}
html{--zoom:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;}
/* Overall scale: a notch smaller on desktop, untouched on phones */
body{
  margin:0;
  /* the page fills the screen at the least, so the footer is never left
     hanging with empty space under it on a tall display */
  min-height:100vh;
  min-height:calc(100vh / var(--zoom, 1));
  min-height:calc(100dvh / var(--zoom, 1));
  display:flex;
  flex-direction:column;
  background:var(--grey-3);
  color:var(--black);
  font-family:var(--font);
  font-size:var(--text-base);
  font-weight:300;              /* Quasimoda Light — body copy */
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--blue);color:#fff;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}

/* ---------- Typography ---------- */
h1,h2{
  font-weight:500;              /* Quasimoda Medium */
  letter-spacing:-0.017em;margin:0;text-wrap:balance;
}
h1{font-size:var(--heading-1);line-height:1.05;}
/* A section heading always steps down from the page title, at every width. */
h2{font-size:var(--heading-2);line-height:1.1;}
h3{
  font-weight:400;              /* Quasimoda Regular — sub-heading */
  font-size:var(--heading-3);
  line-height:1.2;letter-spacing:-0.012em;margin:0;text-wrap:balance;
}
h4{
  font-weight:500;              /* Medium — body heading */
  font-size:var(--heading-4);line-height:1.25;letter-spacing:-0.005em;margin:0;
}
p{margin:0;}
strong{font-weight:500;}
em{font-style:italic;}

.eyebrow{
  font-size:var(--text-micro);font-weight:400;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--slate-2);margin:0;
}
.eyebrow--blue{color:var(--blue);}
.lede{font-size:var(--text-large);font-weight:300;line-height:1.5;color:var(--slate);}
.tm{font-size:0.62em;vertical-align:0.42em;letter-spacing:0;}
/* A product name is one unit and should never break across lines. */
.keep{white-space:nowrap;}

section{padding-block:clamp(44px,5vw,68px);}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:var(--measure);}

/* ---------- Buttons (CTA language per Brand Book p.78) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font);font-size:var(--text-btn);font-weight:400;letter-spacing:0;
  padding:16px 30px;border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
/* Every "Free 4-Week Trial" button is the nav bar's button, wherever it sits,
   so the same offer never turns up in three different sizes down one page. */
.btn--green{
  padding:var(--cta-py) var(--cta-px);
  font-size:var(--text-nav);line-height:1.6;font-weight:500;white-space:nowrap;
}
/* a cta-pair stretches its buttons to the tallest, which pulled the green one
   off its size; the pair now sits centred and both take the same box */
.cta-pair{align-items:center;}
.cta-pair .btn{padding:var(--cta-py) var(--cta-px);font-size:var(--text-nav);line-height:1.6;}
.btn--primary{background:var(--black);color:var(--grey-3);}
.btn--primary:hover{background:#232323;}
.btn--green{background:var(--green);color:#fff;}
.btn--green:hover{background:#5E9A2A;}
.btn--sand{background:var(--sand-dark);color:#fff;}
.btn--sand:hover{background:#584A38;}
.btn--outline{border-color:var(--grey-1);color:var(--black);background:transparent;}
.btn--outline:hover{border-color:var(--black);}
.btn--onblack{border-color:rgba(255,255,255,.3);color:#fff;}
.btn--onblack:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6);}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(249,249,249,.62);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(2,2,2,.08);}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:22px;height:68px;}
.nav__logo{flex:0 0 auto;display:flex;align-items:center;min-height:44px;}
.nav__logo img{height:18px;width:auto;display:block;}
@media(max-width:600px){ .nav__logo img{height:15px;}}
/* The bar's button is not a page CTA: at the page size it filled two thirds
   of a 62px bar. It also inherited the body line-height (1.6), which left
   the wording sitting off-centre in its own box; a line box of 1 puts it
   back in the middle of the padding. */
.nav .btn{padding:var(--cta-py) var(--cta-px);font-size:var(--text-nav);font-weight:300;line-height:1.6;white-space:nowrap;}
.nav__act{display:flex;align-items:center;gap:20px;flex:0 0 auto;}

/* ---------- Section bar: sits under the hero, then under the main nav ---------- */
.subnav{
  position:sticky;top:var(--navh,68px);z-index:55;
  background:var(--blue);border-bottom:1px solid rgba(255,255,255,.16);
}
.subnav__in{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);height:50px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.subnav__in::-webkit-scrollbar{display:none;}
.subnav a{
  font-size:var(--text-nav);font-weight:300;color:rgba(255,255,255,.76);white-space:nowrap;
  padding:15px 0 13px;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.subnav a:hover{color:#fff;}
.subnav a.is-here{color:#fff;border-bottom-color:#fff;}
.subnav a:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* anchors land below both bars */
[id]{scroll-margin-top:calc(var(--navh,68px) + 62px);}
@media(max-width:600px){
  .subnav__in{height:46px;gap:18px;}
  .subnav a{font-size:var(--text-label);}
}

/* ---------- Main menu ---------- */
.nav__in{gap:clamp(14px,1.4vw,18px);}
.nav__menu{display:flex;align-items:center;gap:clamp(10px,1.1vw,14px);margin-right:auto;}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font);font-size:var(--text-nav);font-weight:300;color:var(--slate);
  background:none;border:0;padding:9px 0;cursor:pointer;white-space:nowrap;
  transition:color .18s ease;
}
.nav__link:hover{color:var(--black);}
.nav__link.is-here{color:var(--black);font-weight:400;}
.nav__link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.nav__dropbtn svg{width:11px;height:8px;transition:transform .2s ease;}
.nav__dropbtn[aria-expanded="true"] svg{transform:rotate(180deg);}

.nav__drop{position:relative;}
.nav__panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  width:min(560px,86vw);z-index:70;
  background:#fff;border:1px solid var(--grey-1);
  box-shadow:0 20px 46px -26px rgba(2,2,2,.4);
  padding:20px 22px 8px;
}
.nav__panel[hidden]{display:none;}
.nav__panelhead{
  font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);
  margin-bottom:14px;
}
.nav__grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;}
.nav__svc{
  display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  transition:background .16s ease;
}
.nav__svc:hover{background:var(--grey-3);}
.nav__svc b{font-size:var(--text-label);font-weight:400;color:var(--black);}
.nav__svc span{font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);}
.nav__svc.is-here b{font-weight:500;}
.nav__svc.is-here span{color:var(--green);}
.nav__panelfoot{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:14px;padding:14px 12px;border-top:1px solid var(--grey-1);
  font-size:var(--text-small);color:var(--blue);
}
.nav__panelfoot:hover{color:var(--black);}

.nav__burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;
}
.nav__burger span{display:block;height:1.5px;background:var(--black);transition:transform .2s ease,opacity .2s ease;}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

@media(max-width:1340.98px){
  .nav__burger{display:flex;order:3;}
  .nav__act{order:2;margin-left:auto;}
  .nav__menu{
    order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:8px 0 18px;border-top:1px solid var(--grey-1);
  }
  .nav__menu[hidden]{display:none;}
  .nav__in{flex-wrap:wrap;height:auto;padding-block:11px;}
  .nav__link{padding:13px 2px;font-size:var(--text-nav);}
  .nav__drop{position:static;}
  .nav__panel{
    position:static;transform:none;width:auto;border:0;box-shadow:none;
    padding:4px 0 12px;background:none;
  }
  .nav__grid{grid-template-columns:1fr;}
  .nav__svc{padding:11px 12px;background:var(--grey-3);}
  .nav__panelfoot{padding-inline:12px;}
}
@media(max-width:640px){.nav__act{gap:12px;}}
.nav .nav__login,.nav .nav__quiet{background:none;border:none;color:var(--slate);padding:9px 2px;}
.nav .nav__login:hover,.nav .nav__quiet:hover{color:var(--black);background:none;}
.nav .nav__quiet.is-here{color:var(--black);}
@media(max-width:640px){
  .nav__login span{display:none;}
  .nav__act{gap:14px;}
  .nav .nav__login{min-height:44px;min-width:44px;padding:0;}
  .nav .btn{min-height:44px;}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--black);color:#fff;overflow:hidden;min-height:clamp(440px,62vh,700px);display:flex;align-items:center;padding-block:0;}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__placeholder{
  position:absolute;inset:0;
  background:
    radial-gradient(110% 80% at 20% 20%, rgba(51,128,171,.22) 0%, rgba(2,2,2,0) 60%),
    radial-gradient(90% 70% at 85% 85%, rgba(108,170,51,.13) 0%, rgba(2,2,2,0) 62%),
    linear-gradient(180deg,#0C0C0C 0%,#020202 70%);
}
.hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(2,2,2,.5) 0%,rgba(2,2,2,.12) 32%,rgba(2,2,2,.88) 100%);}
.hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(64px,7vw,110px);}
.hero__top{
  /* Both columns share the row. A fixed film column starved the copy as the
     window narrowed (689px down to 285px at 1024), which is what pushed the
     headline to five and six lines; as fractions they shrink together. */
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(28px,3.2vw,48px);align-items:center;
}
/* h1 carries leading above its cap height; nudge the video to match optically. */
.hero__top .vsl{padding-top:6px;}
@media(max-width:1000px){.hero__top .vsl{padding-top:0;}}
@media(max-width:1000px){.hero__top{grid-template-columns:1fr;}}
/* Title sits at the top, subtitle at the foot, so the column matches the
   height of the video plus its caption. */
.hero__lead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(22px,2.6vw,34px);
  /* the column takes the row: at 1180px the headline was forced onto a third
     line. Everything under it carries its own narrower cap. */
  max-width:100%;margin-inline:auto;}
.hero__svc{
  list-style:none;margin:4px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.hero__svc li{
  flex:1 1 auto;text-align:center;
  font-size:var(--text-micro);font-weight:300;line-height:1.3;letter-spacing:.01em;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.2);padding:6px 10px;
}
@media(max-width:1000px){.hero__lead{justify-content:flex-start;gap:30px;}}
.hero__right{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,30px);}
.hero__copy{display:flex;flex-direction:column;gap:30px;margin-top:20px;}
/* Sized so the headline and subtitle finish level with the video beside them,
   rather than running past the bottom of the frame. */
.hero h1{color:#fff;max-width:none;line-height:1.14;
  /* the site standard: every other h1 is heading-1, and at the old 43px this
     one sat only 3px above its own h2s. The headline was shortened to two
     lines so it carries the larger setting. */
  font-size:var(--heading-1);letter-spacing:-0.02em;}
/* the headline is set in three lines, each one its own line box */
.hero h1 .h1l{display:block;}
/* the offer, stated as a mark rather than as the tail of the sentence, with the
   intake clock running beside it */
.hero__offer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;margin:0;max-width:1180px;}
.hero__badge{margin:0;padding:0;border:0;background:none;font:inherit;cursor:pointer;}
.hero__badge span{transition:background .18s ease,transform .18s ease;}
.hero__badge:hover span{background:color-mix(in srgb, var(--green) 86%, #000);}
.hero__badge:active span{transform:translateY(1px);}
.hero__badge:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.hero__cd{display:flex;align-items:baseline;gap:7px;color:#fff;}
.hero__cdl{font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-right:3px;}
.hcd b{font-size:var(--text-base);font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}
.hcd i{font-style:normal;font-size:var(--text-micro);color:rgba(255,255,255,.55);margin-left:1px;}
.hero__badge span{
  display:inline-block;background:var(--green);color:#fff;
  font-size:var(--text-small);letter-spacing:.12em;text-transform:uppercase;
  padding:7px 14px;border-radius:2px;
}
.hero__sub{margin-top:0;max-width:100%;font-size:var(--heading-4);font-weight:300;line-height:1.55;color:rgba(255,255,255,.8);}

/* Hero video sales letter */
.vsl{display:flex;flex-direction:column;gap:11px;height:100%;}
.vsl__frame{
  position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;overflow:hidden;
  border:1px solid rgba(255,255,255,.2);background:#0A0A0A;cursor:pointer;
  font-family:var(--font);
}
.vsl__frame:focus-visible{outline:3px solid var(--green);outline-offset:3px;}
.vsl__poster{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .25s ease,transform .4s ease;}
.vsl__frame:hover .vsl__poster{opacity:.75;transform:scale(1.02);}
.vsl__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:70px;height:70px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 30px rgba(2,2,2,.45);transition:transform .22s ease;
}
.vsl__frame:hover .vsl__play{transform:translate(-50%,-50%) scale(1.07);}
.vsl__play svg{width:28px;height:28px;margin-left:3px;}
.trustbar{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-top:26px;}
.trustbar__faces{display:flex;align-items:center;}
.trustbar__faces img{
  width:34px;height:34px;border-radius:50%;display:block;
  border:2px solid #0B0B0B;object-fit:cover;
}
.trustbar__faces img + img{margin-left:-11px;}
.trustbar__body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.trustbar__stars{display:flex;gap:2px;}
.trustbar__stars svg{width:13px;height:13px;fill:#E0A32E;}
.trustbar__txt{font-size:var(--text-small);color:rgba(255,255,255,.8);line-height:1.3;}
.vsl iframe,.vsl video{width:100%;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.2);display:block;background:#000;}
.vsl.is-live .vsl__frame{display:none;}

/* ---------- Offer ---------- */
.offer{background:var(--grey-3);}
.offer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);margin-top:56px;}
@media(max-width:860px){.offer__grid{grid-template-columns:1fr;}}
.offer__cell{background:var(--grey-3);padding:36px 30px 40px;display:flex;flex-direction:column;gap:12px;}
.offer__cell p{font-size:var(--text-label);color:var(--slate);}
.offer__terms{margin-top:26px;border:1px solid var(--grey-1);background:#fff;padding:26px 30px;font-size:var(--text-label);color:var(--slate);}
.offer__terms strong{color:var(--black);}

/* ---------- The diagnosis ---------- */
.diag{background:var(--grey-3);padding-block:clamp(18px,2vw,26px) clamp(44px,5vw,68px);}
.belief{
  margin-top:0;
  background:#fff;border-left:2px solid var(--green);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;
}
.belief__copy{
  margin:0;
  padding:clamp(30px,3.4vw,46px) clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;justify-content:center;
}
.belief__pic{margin:0;position:relative;overflow:hidden;min-height:clamp(260px,26vw,360px);}
.belief__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 38%;display:block;}
@media(max-width:820px){
  .belief{grid-template-columns:1fr;}
  .belief__pic{min-height:240px;}
}
.belief__lab{
  font-size:var(--text-micro);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);
  text-wrap:wrap;
  margin-bottom:14px;
}
.belief__t{
  margin:0;font-size:var(--heading-4);font-weight:400;line-height:1.55;
  letter-spacing:-0.012em;color:var(--black);
}
.belief__by{
  margin-top:clamp(18px,2vw,24px);padding-top:16px;border-top:1px solid var(--grey-1);
  display:flex;flex-wrap:wrap;gap:6px clamp(20px,3vw,38px);
}
/* both founders stand behind it, side by side while there is room */
.belief__who{display:flex;flex-direction:column;gap:3px;}
.belief__by b{font-size:var(--text-label);font-weight:500;color:var(--black);}
.belief__who span{font-size:var(--text-small);color:var(--slate-2);}
.diag__lead{margin-top:clamp(40px,4.4vw,58px);max-width:var(--measure);}
.diag__lead h3{font-size:var(--heading-3);line-height:1.35;margin-bottom:10px;}
.diag__lead p{font-size:var(--text-base);color:var(--slate);line-height:1.7;}

/* ---------- Live Ecommerce Engine ---------- */
.eng{margin-top:clamp(26px,3vw,38px);}
.eng__toggles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px,2vw,24px);}
.eng__tog{
  font:inherit;font-size:var(--text-small);font-weight:300;color:var(--slate);cursor:pointer;
  background:#fff;border:1px solid var(--grey-1);padding:9px 16px;
  transition:color .18s,border-color .18s,background .18s;
}
.eng__tog:hover{color:var(--black);border-color:var(--slate-3);}
.eng__tog.is-on{background:var(--black);border-color:var(--black);color:#fff;font-weight:400;}

.eng__stage{background:#fff;border:1px solid var(--grey-1);padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,34px);}
.eng__note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 clamp(20px,2.4vw,30px);padding-bottom:14px;border-bottom:1px solid var(--grey-2);
  font-size:var(--text-small);color:var(--slate-2);line-height:1.5;
}
.eng__note span{
  font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
  border:1px solid var(--grey-1);padding:4px 9px;flex:0 0 auto;
}
.eng__row{
  --cube:clamp(112px,12.5vw,168px);
  --depth:calc(var(--cube) * .30);
  display:grid;grid-template-columns:26px 1fr 54px 1fr 54px 1fr 26px;
  align-items:start;
}

.eng__unit{--c:var(--state-healthy);position:relative;z-index:1;text-align:center;padding:0 clamp(6px,1vw,14px);}

/* ---- the chamber: flat, square, brand palette only ---- */
.core{
  position:relative;z-index:1;width:var(--cube);height:var(--cube);
  margin:0 auto clamp(26px,3vw,36px);
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 7%, #fff);
  border:1px solid color-mix(in srgb, var(--c) 42%, var(--grey-1));
  transition:background .45s ease,border-color .45s ease;
}
.core__disc{
  width:54%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;background:var(--c);
  transition:background .45s ease;
}
.core__disc b{
  color:#fff;font-size:clamp(19px,2.2vw,27px);font-weight:500;
  letter-spacing:-0.02em;font-variant-numeric:tabular-nums;line-height:1;
}
/* the score each chamber is measured against, under the disc */
.core__of{
  position:absolute;left:0;right:0;bottom:calc(var(--cube) * .075);
  font-size:clamp(9px,.85vw,11px);font-style:normal;letter-spacing:.08em;
  color:var(--slate-2);text-align:center;
}

/* ---- pipes, and the throughput running through them ---- */
.eng__pipe{
  position:relative;z-index:0;display:block;height:calc(var(--cube) * .075);
  margin-top:calc(var(--cube) * .46);background:var(--grey-1);
  width:calc(100% + var(--cube) * .86);margin-inline:calc(var(--cube) * -.43);
}
/* A chamber sits centred in a column wider than itself, so on a wide screen the
   run stops short of it. These two tails carry the line the rest of the way.
   They sit in the same layer as the run, under the chamber, so the segments
   moving through stay visible right up to the chamber wall. */
.eng__pipe::before,.eng__pipe::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--cube);
  background:var(--grey-1);
}
.eng__pipe::before{right:100%;}
.eng__pipe::after{left:100%;}
.eng__pipe--stub{opacity:.85;}
/* The intake and outlet stubs tuck inward only, so nothing bleeds past the box. */
.eng__row > .eng__pipe--stub:first-child{
  margin-left:0;margin-right:calc(var(--cube) * -.43);
  width:calc(100% + var(--cube) * .43);
}
.eng__row > .eng__pipe--stub:last-child{
  margin-right:0;margin-left:calc(var(--cube) * -.43);
  width:calc(100% + var(--cube) * .43);
}
.eng__row > .eng__pipe--stub:first-child::before,
.eng__row > .eng__pipe--stub:last-child::after{display:none;}
.eng__flow{position:absolute;inset:0;overflow:hidden;}
.eng__flow i{
  --dur:1.7s;
  position:absolute;top:0;bottom:0;left:-19%;width:19%;
  background:var(--fc,var(--state-healthy));opacity:var(--fo,.9);
  animation:engFlow var(--dur) linear infinite;
  transition:background .5s ease,opacity .5s ease;
}
@keyframes engFlow{ to{ left:101%; } }
/* Spacing is a fraction of the cycle, not a fixed number of seconds, so the
   five segments stay evenly spread when a blocked section slows the flow down.
   Negative delays start each one already partway along. */
.eng__flow i:nth-child(1){animation-delay:calc(var(--dur) * 0);}
.eng__flow i:nth-child(2){animation-delay:calc(var(--dur) * -0.2);}
.eng__flow i:nth-child(3){animation-delay:calc(var(--dur) * -0.4);}
.eng__flow i:nth-child(4){animation-delay:calc(var(--dur) * -0.6);}
.eng__flow i:nth-child(5){animation-delay:calc(var(--dur) * -0.8);}
@media(prefers-reduced-motion:reduce){ .eng__flow i{animation:none;left:37%;} }

.eng__t{font-size:var(--text-large);font-weight:500;line-height:1.25;margin-bottom:12px;}
.eng__n{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);margin-bottom:5px;}
.eng__chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;}
.eng__chips > span{
  position:relative;cursor:help;
  font-size:11px;color:var(--slate);border:1px solid var(--grey-1);padding:4px 9px;
  transition:color .25s,border-color .25s,background .25s;
}
.eng__chips > span.is-hit{background:var(--c);border-color:var(--c);color:#fff;}

/* What each service is scored on, on hover. */
.kpi{
  position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  width:max-content;max-width:186px;
  background:var(--black);color:#fff;border:0;padding:8px 10px;
  font-size:var(--text-micro);font-weight:300;line-height:1.5;letter-spacing:0;
  text-transform:none;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .16s ease;z-index:6;
}
.kpi b{
  display:block;margin-bottom:3px;
  font-size:var(--text-micro);font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.eng__chips > span:hover .kpi{opacity:1;}
/* nothing to hover on a touch screen, and the panel would only crowd it */
@media(hover:none),(max-width:760px){ .kpi{display:none;} }

.eng__read{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;
  background:#fff;border:1px solid var(--grey-1);border-top:0;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,34px);
}
.eng__mlab,.eng__slab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);margin-bottom:8px;}
.eng__mrow{display:flex;align-items:baseline;gap:7px;}
.eng__mrow b{font-size:clamp(30px,3.4vw,42px);font-weight:500;letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;}
.eng__mrow span{font-size:var(--text-label);color:var(--slate-2);}
.eng__slab{color:var(--state-bottleneck);}
.eng__slab.is-clear{color:#4E8A1F;}
.eng__stxt{font-size:var(--text-label);color:var(--slate);line-height:1.65;max-width:var(--measure);}
.eng__stxt b{color:var(--black);font-weight:500;}

.eng__key{display:flex;gap:20px;margin-top:14px;font-size:var(--text-micro);color:var(--slate-2);}
.eng__key span{display:flex;align-items:center;gap:7px;}
.k{width:9px;height:9px;display:block;}
.k--ok{background:var(--state-healthy);} .k--watch{background:var(--state-monitor);} .k--stop{background:var(--state-bottleneck);}

/* ================================================================
   RESTORED COMPONENTS
   Recovered verbatim from the pre-extraction stylesheet after a
   regex deletion removed this range.
   ================================================================ */
/* Overall scale on desktop: 90%, between the old 81% (too small) and the
   true size (too large). Phones are untouched. */
/* ---- Display scaling.
   A first attempt scaled up with CSS width alone, which was wrong: a 27 inch
   1440p monitor has physically LARGER css pixels than a 13 inch laptop, so at
   the same zoom its text already renders about 23% bigger. Multiplying that
   again made the chrome enormous.
   The case that genuinely needs help is a physically large panel running many
   pixels - a 4K monitor at 100% scaling - where text falls to roughly 82% of
   laptop size. That case is identifiable: a very wide viewport AND a low device
   pixel ratio. A retina laptop reports dpr 2 at a modest width and is excluded,
   as is a 1440p monitor, which is already comfortable.
   The correction needed there is about 1.1x, not the 2.1x used before.
   --zoom must track each value: the full-height rules divide 100vh by it. ---- */
@media(min-width:900px){html{--zoom:0.9;zoom:0.9;}}
@media(min-width:2600px) and (max-resolution:1.5dppx){html{--zoom:1.0;zoom:1.0;}}
@media(min-width:3700px) and (max-resolution:1.5dppx){html{--zoom:1.15;zoom:1.15;}}
/* ---------- The 4 week process: a repeating cycle ---------- */
.engine{background:#fff;}
.cycle{--gap:clamp(16px,2.2vw,30px);position:relative;margin-top:clamp(52px,5.5vw,72px);}
.track{
  --gap:clamp(16px,2.2vw,30px);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
}
@media(max-width:520px){.track{grid-template-columns:1fr;}}
.step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;}
.step__dot{
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--slate-2);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-label);color:var(--slate);position:relative;z-index:1;
  font-variant-numeric:tabular-nums;margin-bottom:5px;
}
.step--first .step__dot{border-color:var(--green);color:#4E8A1F;}
.step:not(:last-child)::after{
  content:"";position:absolute;top:19px;left:38px;
  width:calc(100% - 38px + var(--gap));height:1px;background:var(--slate-2);
}
.step__week{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);}
.step h4{font-size:var(--text-large);letter-spacing:-0.01em;}
.step p{font-size:var(--text-label);color:var(--slate);line-height:1.6;}
.step__eg{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.step__eg span{
  font-size:var(--text-micro);line-height:1.35;color:var(--slate);
  border:1px solid var(--grey-1);padding:4px 8px;
}
/* the return path, from step 4 back round to step 1 */
.cycle__back{
  position:relative;height:34px;margin-top:26px;
  margin-left:19px;margin-right:calc(25% - (var(--gap,26px) * 0.75) - 19px);
  border-bottom:1px solid var(--slate-2);
}
.cycle__label{
  margin-top:12px;font-size:var(--text-small);color:var(--slate);text-align:center;
}
/* ---------- Terminology / bottleneck callout ---------- */
.callout{background:var(--grey-2);}
.callout__box{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--grey-1);background:#fff;margin-top:52px;}
.callout__l{padding:clamp(28px,4vw,48px);border-right:1px solid var(--grey-1);}
.callout__r{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:20px;}
.deflist{display:flex;flex-direction:column;gap:20px;margin-top:26px;}
.def{display:flex;flex-direction:column;gap:5px;}
.def dt{font-size:var(--text-label);font-weight:500;}
.def dd{margin:0;font-size:var(--text-label);color:var(--slate);line-height:1.6;}
.bnote{border-left:2px solid var(--state-bottleneck);padding-left:20px;}
.bnote span{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--state-bottleneck);}
.bnote p{margin-top:8px;font-size:var(--text-label);}
/* ---------- Dashboard / app ---------- */
.dash{background:var(--grey-3);}
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:60px;}
@media(max-width:920px){.split{grid-template-columns:1fr;}}
.split__text{display:flex;flex-direction:column;gap:18px;}
.split__text p{color:var(--slate);}
.ticks{display:flex;flex-direction:column;gap:12px;margin-top:4px;}
.tick{display:flex;gap:13px;align-items:flex-start;font-size:var(--text-label);}
.tick::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:9px;background:var(--green);}
.shot{border:1px solid var(--grey-1);background:var(--grey-2);overflow:hidden;}
.shot__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--grey-1);border-bottom:1px solid #D6D6D6;}
.shot__dot{width:8px;height:8px;border-radius:50%;background:#C2C2C2;}
.shot__url{margin-left:10px;font-size:var(--text-micro);color:var(--slate-2);background:#fff;padding:4px 12px;}
.shot__view{overflow:hidden;}
.shot--crop .shot__view{max-height:430px;}
/* ---------- Weekly loop ---------- */
.loop{background:#fff;}
.loop__ring{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:60px;}
.node{position:relative;border:1px solid var(--grey-1);padding:28px 24px 30px;display:flex;flex-direction:column;gap:11px;}
.node__n{font-size:var(--text-micro);letter-spacing:.2em;color:var(--slate-2);}
.node p{font-size:var(--text-label);color:var(--slate);line-height:1.6;}
.node--repeat{background:var(--black);border-color:var(--black);}
.node--repeat h4{color:#fff;}
.node--repeat .node__n{color:var(--green);}
.node--repeat p{color:rgba(255,255,255,.6);}
/* ---------- 4 weeks ---------- */
.weeks{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border-top:1px solid var(--black);}
.week{padding:30px 26px 38px;border-right:1px solid var(--grey-1);display:flex;flex-direction:column;gap:14px;}
.week:last-child{border-right:0;}
.week__n{font-size:clamp(36px,4.4vw,54px);font-weight:300;letter-spacing:-0.04em;line-height:1;}
.week__t{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);}
.week p{font-size:var(--text-label);color:var(--slate);line-height:1.6;}
.week ul{margin:0;padding-left:17px;font-size:var(--text-label);color:var(--slate);line-height:1.8;}
/* ---------- Process (5 steps) ---------- */
.process{background:var(--grey-2);}
.steps{display:flex;flex-direction:column;margin-top:52px;border-top:1px solid var(--grey-1);}
.pstep{display:grid;grid-template-columns:96px 1fr 1.3fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--grey-1);align-items:baseline;}
.pstep__n{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.pstep p{font-size:var(--text-label);color:var(--slate);}
/* ---------- Calculators ---------- */
.calc{background:var(--black);color:rgba(255,255,255,.72);}
.calc h2,.calc h3,.calc h4{color:#fff;}
.calc .lede{color:rgba(255,255,255,.62);}
.calc .eyebrow{color:rgba(255,255,255,.42);}
.calc__live{margin-top:60px;border:1px solid rgba(255,255,255,.16);display:grid;grid-template-columns:1fr 1fr;}
.calc__inputs{padding:clamp(28px,4vw,46px);border-right:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;gap:26px;}
.field{display:flex;flex-direction:column;gap:10px;}
.field label{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.field__row{display:flex;align-items:center;gap:16px;}
.field input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:1px;background:rgba(255,255,255,.28);outline:none;}
.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#fff;cursor:pointer;border:none;}
.field input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#fff;cursor:pointer;border:none;}
.field input[type=range]:focus-visible{outline:2px solid var(--green);outline-offset:8px;}
.field__val{min-width:112px;text-align:right;font-size:var(--text-large);font-weight:400;color:#fff;font-variant-numeric:tabular-nums;}
.calc__out{padding:clamp(28px,4vw,46px);display:flex;flex-direction:column;gap:26px;}
.calc__big output{display:block;font-size:clamp(46px,6.6vw,80px);font-weight:300;color:#fff;letter-spacing:-0.045em;line-height:1;font-variant-numeric:tabular-nums;margin-top:10px;}
.calc__verdict{font-size:var(--text-label);color:rgba(255,255,255,.55);margin-top:12px;}
.calc__table{border-top:1px solid rgba(255,255,255,.16);}
.calc__row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:var(--text-label);color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;}
.calc__row b{color:#fff;font-weight:300;}
.calc__row--total{border-bottom:0;padding-top:14px;color:#fff;}
.calc__row--total b{font-weight:500;}
.calc__disclaim{font-size:var(--text-small);color:rgba(255,255,255,.4);line-height:1.55;}
.calc__shots{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:64px;}
.calc__shots .shot{border-color:rgba(255,255,255,.16);}
.shotcap{margin-top:14px;font-size:var(--text-label);color:rgba(255,255,255,.55);line-height:1.55;}
.shotcap b{display:block;color:#fff;font-weight:500;font-size:var(--text-label);margin-bottom:4px;}
/* ---------- Case studies ---------- */
.cases{background:var(--grey-3);padding-bottom:clamp(26px,3vw,38px);}
/* the title reads as one line, and the intro keeps its own measure */
.cases .sec-head{max-width:none;}
@media(min-width:900px){ .cases .sec-head h2{white-space:nowrap;} }
.cases .sec-head .lede{max-width:var(--measure);}
/* the homepage lede is written to land in two lines, which needs a longer
   measure than the 68ch default; results.html keeps its own shorter copy
   on the standard measure */
.home .cases .sec-head .lede{max-width:min(87ch,880px);}
@media(max-width:760px){.cases .sec-head h2{white-space:normal;}}
/* The case studies run past rather than stack, so the section stays short. */
.case__rail{
  margin-top:clamp(28px,3.2vw,42px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.case__track{display:flex;gap:24px;width:max-content;animation:caseRoll 64s linear infinite;}
.case__rail:hover .case__track{animation-play-state:paused;}
@keyframes caseRoll{from{transform:translate3d(0,0,0);}to{transform:translate3d(calc(-50% - 12px),0,0);}}
@media(prefers-reduced-motion:reduce){.case__track{animation:none;}}
.case__track .case{flex:0 0 clamp(280px,29vw,330px);}
.cases__more{margin-top:clamp(24px,2.6vw,32px);}
.case{border:1px solid var(--grey-1);background:#fff;display:flex;flex-direction:column;transition:border-color .2s ease;}
.case:hover{border-color:var(--black);}
.case__img{aspect-ratio:16/7;overflow:hidden;background:var(--grey-2);border-bottom:1px solid var(--grey-1);}
.case__img img{width:100%;height:100%;object-fit:cover;}
.case__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:7px;flex:1;}
/* what the engine flagged, then the number it moved, then how long it took */
.case__probe{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.case__block{font-size:var(--text-label);font-weight:500;line-height:1.35;color:var(--black);display:flex;flex-direction:column;gap:2px;}
.case__block i{font-style:normal;font-size:var(--text-small);font-weight:400;color:var(--slate);}
.case__kpi{margin-top:8px;font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--slate);}
.case__move{
  display:flex;align-items:baseline;gap:9px;margin-top:2px;
  font-size:clamp(26px,2.7vw,33px);font-weight:300;letter-spacing:-0.035em;line-height:1;
}
.case__move b{font-weight:300;font-variant-numeric:tabular-nums;}
.case__move .is-up{color:#4E8A1F;}
.case__move i{font-style:normal;font-size:.5em;color:var(--slate-2);}
.case__period{font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);}
.case__title{font-size:var(--text-small);font-weight:400;line-height:1.45;color:var(--slate);margin-top:8px;}
.case__link{margin-top:auto;padding-top:14px;font-size:var(--text-small);color:var(--blue);}
.cases__note{margin-top:14px;font-size:var(--text-small);line-height:1.55;color:var(--slate-2);max-width:var(--measure);}
/* ---------- Photography ---------- */
.photoband{position:relative;overflow:hidden;background:var(--grey-2);}
.photoband img{width:100%;height:clamp(280px,42vw,460px);object-fit:cover;display:block;}
.photoband figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px var(--gutter);
  background:linear-gradient(180deg,rgba(2,2,2,0) 0%,rgba(2,2,2,.72) 100%);
  color:#fff;font-size:var(--text-label);font-weight:300;
}
.photoband figcaption b{display:block;font-weight:500;font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px;}
.photo-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:56px;}
.photo-split--flip .photo-split__img{order:2;}
.photo-split__img{overflow:hidden;aspect-ratio:5/4;background:var(--grey-2);border:1px solid var(--grey-1);}
.engine .photo-split__img{border-color:rgba(255,255,255,.16);background:#111;}
.photo-split__img img{width:100%;height:100%;object-fit:cover;}
.photo-split__text{display:flex;flex-direction:column;gap:16px;}
.photo-split__text p{color:var(--slate);}
.engine .photo-split__text p{color:rgba(255,255,255,.6);}
.gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:52px;}
.gallery figure{margin:0;overflow:hidden;background:var(--grey-2);border:1px solid var(--grey-1);}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;}
.gallery figure:nth-child(1){grid-row:span 2;}
.gallery figure:nth-child(1) img{aspect-ratio:4/5;}
/* Intake and countdown, at the foot of Who Qualifies */
.intakeband{background:#fff;border-bottom:1px solid var(--grey-1);padding-block:0;}
.intake{
  padding-block:clamp(24px,2.6vw,34px);
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);
  align-items:center;justify-content:space-between;
}
.intake__col{display:flex;flex-direction:column;gap:10px;}
.intake__lab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.intake__slots{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.intake .slots__dots{display:flex;gap:5px;}
.intake .slots__dots i{width:24px;height:4px;display:block;background:var(--grey-1);}
.intake .slots__dots i.is-taken{background:var(--state-bottleneck);}
.intake .slots__dots i.is-free{background:var(--green);}
.intake__txt{font-size:var(--text-label);color:var(--black);font-weight:300;}
.intake__txt b{font-weight:500;}
.intake__txt em{font-style:normal;color:#4E8A1F;}
.cd{display:flex;gap:8px;}
.cd__u{
  min-width:56px;border:1px solid var(--grey-1);background:var(--grey-3);
  padding:8px 8px 7px;text-align:center;
}
.cd__n{
  display:block;font-size:var(--heading-4);font-weight:400;color:var(--black);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
}
.cd__l{display:block;margin-top:5px;font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
@media(max-width:700px){.intake{gap:22px;} .cd__u{min-width:0;flex:1;}}
/* ---------- Qualification: the three stages ---------- */
.qual{background:var(--grey-2);padding-block:clamp(36px,4vw,54px);}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(30px,3.2vw,40px);align-items:start;}
.stage{
  position:relative;background:#fff;border:1px solid var(--grey-1);
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:9px;
}
.stage--here{border-color:var(--green);box-shadow:0 0 0 1px var(--green);}
.stage__flag{
  position:absolute;top:0;left:30px;transform:translateY(-50%);
  background:var(--green);color:#fff;
  font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;
}
.stage__flag--no{background:var(--grey-1);color:var(--slate);}
.stage__req{color:var(--black);font-weight:500;}
.stage--here .stage__req{color:#4E8A1F;}
.stage__n{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.stage--here .stage__n{color:var(--green);}
.stage__t{font-size:var(--heading-4);font-weight:500;line-height:1.25;letter-spacing:-0.015em;}
.stage__d{font-size:var(--text-label);color:var(--slate);line-height:1.6;}
.stage__lab{
  margin-top:8px;padding-top:16px;border-top:1px solid var(--grey-1);
  font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);
}
.stage__list{margin:0;padding-left:19px;font-size:var(--text-label);color:var(--slate);line-height:1.8;}
/* Stage 2 to Stage 3, and what moves a business between them */
.qual__move{
  margin-top:clamp(18px,2vw,26px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
/* Straight drop from the Stage 2 card to the line below it */
.qual__drop{display:block;width:12px;height:64px;color:var(--green);margin-bottom:20px;}
/* Under threshold notice inside the form */
.f__warn{
  display:none;margin-top:10px;padding:12px 14px;font-size:var(--text-small);line-height:1.55;
  border-left:2px solid var(--state-bottleneck);background:var(--grey-2);color:var(--slate);
}
.f__warn.is-on{display:block;}
/* Awards selector: trophies on the left, detail on the right */
.awards{
  margin-top:clamp(60px,6.2vw,90px);
  padding-top:clamp(20px,2vw,28px);
  border-top:1px solid rgba(255,255,255,.28);
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(20px,2.4vw,30px);align-items:stretch;
}
@media(max-width:1080px){.awards{grid-template-columns:1fr;}}
/* The trophies keep their own company. The columns cap out, so a wider screen
   adds margin around the group instead of prising the awards apart; below the
   cap they still share the width, so nothing overflows on a small laptop. */
.awards__tiles{display:grid;grid-template-columns:repeat(8,minmax(0,128px));
  justify-content:center;gap:clamp(6px,1.1vw,20px);align-items:stretch;}
@media(max-width:860px){.awards__tiles{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.awards__tiles{grid-template-columns:repeat(2,1fr);}}
.atile{
  position:relative;
  border:0;background:none;
  padding:10px 4px 14px;cursor:pointer;font-family:var(--font);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;
  transition:opacity .3s ease,filter .3s ease;
  opacity:.34;
}
/* the countdown to the next trophy, along the foot of the tile */
.atile__bar{
  position:absolute;left:18%;right:18%;bottom:0;height:2px;border-radius:2px;
  background:var(--green);
  transform:scaleX(0);transform-origin:left center;opacity:0;pointer-events:none;
}
.atile.is-on .atile__bar{opacity:1;}
@media(prefers-reduced-motion:reduce){ .atile__bar{display:none;} }
.atile:hover{opacity:.65;}
.atile:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.atile.is-on{opacity:1;filter:brightness(1.12);}
.atile__img{height:104px;display:flex;align-items:center;justify-content:center;}
.atile__lab{
  font-size:var(--text-micro);letter-spacing:.1em;line-height:1.3;text-align:center;
  color:rgba(255,255,255,.6);
}
.atile.is-on .atile__lab{color:#fff;}
.atile__img img{max-height:104px;max-width:100%;width:auto;}
.awards__detail{min-width:0;align-self:center;}
.awards__year{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--green);}
.awards__title{font-size:var(--heading-4);color:#fff;margin-top:8px;line-height:1.25;min-height:2.5em;}
.awards__desc{font-size:var(--text-label);color:rgba(255,255,255,.6);line-height:1.6;margin-top:10px;min-height:4.8em;}
/* ---------- Award visualisation carousel ---------- */
.carousel{margin-top:52px;}
.carousel__win{overflow:hidden;}
.carousel__track{display:flex;gap:20px;transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.acard{
  flex:0 0 calc((100% - 40px) / 3);border:1px solid var(--grey-1);background:#fff;
  display:flex;flex-direction:column;
}
.acard__img{
  aspect-ratio:5/4;background:#F4F4F4;border-bottom:1px solid var(--grey-1);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
}
.acard__img img{height:100%;width:auto;max-width:100%;object-fit:contain;}
.acard__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:7px;flex:1;}
.acard__y{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.acard__t{font-size:var(--text-base);font-weight:500;line-height:1.35;letter-spacing:-0.01em;}
.acard__d{font-size:var(--text-label);color:var(--slate);line-height:1.55;margin-top:auto;padding-top:8px;}
.carousel__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:26px;}
.carousel__dots{display:flex;gap:7px;}
.carousel__dots button{
  width:26px;height:3px;padding:0;border:0;background:var(--grey-1);cursor:pointer;
}
.carousel__dots button.is-here{background:var(--green);}
.carousel__dots button:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}
.carousel__arrows{display:flex;gap:8px;}
.carousel__arrows button{
  width:42px;height:42px;border:1px solid var(--grey-1);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--black);
  transition:border-color .2s ease,background .2s ease;
}
.carousel__arrows button:hover{border-color:var(--black);}
.carousel__arrows button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.carousel__arrows svg{width:16px;height:16px;}
/* ---------- Awards ---------- */
.proof{background:#fff;}
.awardgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);margin-top:52px;}
.aw{background:#fff;padding:26px 22px 24px;display:flex;flex-direction:column;gap:14px;}
.aw__mark{height:74px;display:flex;align-items:center;justify-content:center;}
.aw__mark img{max-height:74px;max-width:100%;width:auto;object-fit:contain;}
.aw__meta{display:flex;flex-direction:column;gap:5px;padding-top:14px;border-top:1px solid var(--grey-2);margin-top:auto;}
.aw__y{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.aw__t{font-size:var(--text-label);font-weight:400;line-height:1.4;}
/* ---------- Reviews ---------- */
.reviews{background:var(--grey-2);}
.rev__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
/* A review leads with who said it: their picture, their name, the size of the
   business they run, then the stars, then the words. */
.rev{background:#fff;border:1px solid var(--grey-1);padding:26px 24px;display:flex;flex-direction:column;gap:11px;}
.rev__pic{
  width:54px;height:54px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--grey-2);color:var(--slate);display:grid;place-items:center;
  font-size:var(--text-label);letter-spacing:.06em;
}
.rev__pic img{width:100%;height:100%;object-fit:cover;}
/* the person on the left, the company they run on the right */
.rev__top{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.rev__logo{height:34px;max-width:44%;display:grid;place-items:center;}
.rev__logo img{max-height:34px;max-width:100%;object-fit:contain;display:block;filter:brightness(0);opacity:.62;}
.rev__logo--txt{
  height:auto;border:1px solid var(--grey-1);padding:6px 10px;text-align:center;
  font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);line-height:1.3;
}
.rev__who{display:flex;flex-direction:column;gap:3px;}
.rev__who b{font-size:var(--text-label);font-weight:500;color:var(--black);}
.rev__who span{font-size:var(--text-small);line-height:1.45;color:var(--slate);}
.rev__meta{color:var(--slate-2);}
.rev__who .rev__meta--rev{
  align-self:flex-start;margin-top:4px;background:var(--grey-2);padding:4px 10px;
  font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
}
.rev__meta--rev b{font-size:var(--text-small);font-weight:500;letter-spacing:0;color:var(--black);margin-left:5px;}
.rev__stars{color:var(--green);font-size:var(--text-label);letter-spacing:.16em;margin-top:2px;}
.rev__q{font-size:var(--text-label);line-height:1.6;color:var(--black);}
.rev__by b{display:block;font-weight:500;color:var(--black);font-size:var(--text-label);}
.rev__score{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:52px;
  border:1px solid var(--grey-1);background:#fff;padding:24px 28px;
}
.rev__score img{height:38px;width:auto;}
.rev__num{font-size:var(--heading-2);font-weight:400;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;}
.rev__num span{font-size:var(--text-label);color:var(--slate-2);}
.rev__scoretxt{font-size:var(--text-label);color:var(--slate);}
.rev__scoretxt a{color:var(--blue);border-bottom:1px solid currentColor;display:inline-block;padding-block:6px;}
/* ---------- Founder block ---------- */
.founder{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:56px;}
.founder__img{border:1px solid var(--grey-1);overflow:hidden;aspect-ratio:4/3;background:var(--grey-2);}
.founder__img img{width:100%;height:100%;object-fit:cover;}
.founder__text{display:flex;flex-direction:column;gap:16px;}
.founder__text p{color:var(--slate);}
/* ---------- FAQ ---------- */
.faq{background:var(--grey-3);}
.qa{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);margin-top:52px;}
.qa__item{background:var(--grey-3);padding:32px 28px;display:flex;flex-direction:column;gap:12px;}
.qa__item p{font-size:var(--text-label);color:var(--slate);line-height:1.65;}
/* ---------- Close ---------- */
.close{background:var(--black);color:rgba(255,255,255,.68);}
.close h2{color:#fff;max-width:17ch;}
.close__in{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(32px,6vw,80px);align-items:end;}
.close__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}
.close__note{margin-top:20px;font-size:var(--text-small);color:rgba(255,255,255,.42);max-width:52ch;}
.close__sig{padding-top:26px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-direction:column;gap:8px;}
.close__sig b{color:#fff;font-weight:500;font-size:var(--text-base);}
.close__sig span{font-size:var(--text-label);color:rgba(255,255,255,.5);}
/* ---------- Footer ---------- */
.foot{margin-top:auto;background:var(--black);color:rgba(255,255,255,.4);padding-block:44px 56px;border-top:1px solid rgba(255,255,255,.14);}
.foot__in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;font-size:var(--text-small);}
.foot__links{display:flex;gap:8px 24px;flex-wrap:wrap;}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;}
.foot__links a:hover{color:#fff;}
.foot__legal{max-width:640px;margin-top:26px;font-size:var(--text-small);line-height:1.65;color:rgba(255,255,255,.28);}
.btn__ico{width:16px;height:16px;flex:0 0 auto;}
.cta-pair{display:flex;flex-wrap:wrap;gap:10px;}
.sticky__pair{display:grid;grid-template-columns:1fr auto;gap:8px;}
.sticky__pair .btn{width:100%;padding-inline:14px;font-size:var(--text-label);}
/* ---------- CTA bands ---------- */
.band{border-block:1px solid var(--grey-1);background:var(--grey-3);}
.band--dark{background:var(--black);border-color:rgba(255,255,255,.14);}
.band__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:clamp(30px,4vw,44px);}
.band .cta-pair{flex:0 0 auto;}
.band__t{font-size:var(--heading-4);font-weight:400;letter-spacing:-0.012em;max-width:44ch;line-height:1.35;}
.band--dark .band__t{color:#fff;}
.band__sub{font-size:var(--text-label);color:var(--slate);margin-top:6px;}
.band--dark .band__sub{color:rgba(255,255,255,.45);}
/* ---------- Sticky CTA (small screens) ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(2,2,2,.94);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.14);
}
.sticky .btn{width:100%;}
/* ---------- Floating section navigator ---------- */
.sidenav{
  position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:54;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.sidenav.is-on{opacity:1;pointer-events:auto;}
.sidenav a{
  display:flex;align-items:center;gap:12px;padding:5px 0;
  color:var(--slate-2);font-size:var(--text-small);font-weight:300;text-decoration:none;
  transition:color .2s ease;
}
.sidenav__tick{
  flex:0 0 auto;width:22px;height:2px;background:currentColor;opacity:.5;
  transition:width .22s ease,opacity .22s ease;
}
.sidenav__lab{
  white-space:nowrap;opacity:0;transform:translateX(-6px);
  transition:opacity .22s ease,transform .22s ease;
}
.sidenav:hover a .sidenav__lab{opacity:1;transform:translateX(0);}
.sidenav a:hover{color:var(--black);}
.sidenav a:hover .sidenav__tick{width:32px;opacity:1;}
.sidenav a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.sidenav a.is-here{color:var(--black);}
.sidenav a.is-here .sidenav__tick{width:38px;opacity:1;background:var(--green);}
.sidenav a.is-here .sidenav__lab{opacity:1;transform:translateX(0);font-weight:400;}
/* Legible over the dark sections too */
.sidenav.on-dark a{color:rgba(255,255,255,.5);}
.sidenav.on-dark a:hover,.sidenav.on-dark a.is-here{color:#fff;}
@media(max-width:1180px){.sidenav{display:none;}}
/* ---------- Floating WhatsApp bubble ---------- */
.wabubble{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  box-shadow:0 6px 22px rgba(2,2,2,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.wabubble:hover{transform:scale(1.06);box-shadow:0 8px 26px rgba(2,2,2,.34);}
.wabubble:focus-visible{outline:3px solid var(--black);outline-offset:3px;}
.wabubble svg{width:29px;height:29px;}
/* ---------- WhatsApp prompt card ---------- */
.waprompt{
  position:fixed;right:22px;bottom:92px;z-index:81;width:min(346px,calc(100vw - 44px));
  background:#fff;border:1px solid var(--grey-1);
  box-shadow:0 14px 40px rgba(2,2,2,.22);
  padding:20px 20px 18px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
.waprompt.is-open{opacity:1;transform:translateY(0);pointer-events:auto;}
.waprompt[hidden]{display:none!important;}
.waprompt__top{display:flex;gap:12px;align-items:flex-start;padding-right:22px;}
.waprompt__av{flex:0 0 auto;width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--grey-2);}
.waprompt__av img{width:100%;height:100%;object-fit:cover;object-position:center;}
.waprompt__who{display:flex;flex-direction:column;gap:1px;}
.waprompt__who b{font-size:var(--text-label);font-weight:500;}
.waprompt__who span{font-size:var(--text-small);color:var(--slate);}
.waprompt__msg{margin-top:14px;font-size:var(--text-label);line-height:1.55;color:var(--black);}
/* Pre-set questions, so nobody has to work out what to ask. */
.waprompt__qs{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.waprompt__q{
  font:inherit;font-size:var(--text-small);line-height:1.35;text-align:left;color:var(--slate);
  background:var(--grey-3);border:1px solid var(--grey-1);padding:8px 10px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.waprompt__q:hover{color:var(--black);border-color:var(--slate-3);}
.waprompt__q.is-on{background:var(--black);border-color:var(--black);color:#fff;}
.waprompt__q:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.waprompt__lab{
  display:block;margin-top:14px;margin-bottom:5px;
  font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);
}
.waprompt__ta{
  width:100%;font:inherit;font-size:var(--text-small);line-height:1.5;color:var(--black);
  background:#fff;border:1px solid var(--grey-1);padding:9px 11px;resize:vertical;
  margin-bottom:12px;
}
.waprompt__ta:focus{outline:2px solid var(--blue);outline-offset:-1px;}
.waprompt .btn{width:100%;margin-top:14px;padding:13px 18px;font-size:var(--text-label);}
.waprompt__x{
  position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;background:transparent;
  color:var(--slate-2);font-size:var(--text-large);line-height:1;cursor:pointer;font-family:var(--font);
}
.waprompt__x:hover{color:var(--black);}
.waprompt__x:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
/* ---------- Modal form ---------- */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal[hidden]{display:none!important;}
.modal__scrim{position:absolute;inset:0;background:rgba(2,2,2,.72);backdrop-filter:blur(3px);}
.modal__panel{
  position:relative;z-index:1;width:min(720px,100%);max-height:92vh;overflow-y:auto;
  background:var(--grey-3);border:1px solid var(--grey-1);
}
.modal__head{
  position:sticky;top:0;background:var(--black);color:#fff;
  padding:26px clamp(24px,4vw,40px);display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
}
.modal__head h2{color:#fff;font-size:var(--heading-4);}
.modal__head p{font-size:var(--text-label);color:rgba(255,255,255,.55);margin-top:8px;max-width:44ch;}
.modal__close{
  flex:0 0 auto;width:34px;height:34px;border:1px solid rgba(255,255,255,.28);background:transparent;
  color:#fff;font-size:var(--text-large);line-height:1;cursor:pointer;font-family:var(--font);
}
.modal__close:hover{background:rgba(255,255,255,.1);}
.modal__close:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.modal__body{padding:clamp(24px,4vw,40px);}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.fgrid .span2{grid-column:1/-1;}
.f{display:flex;flex-direction:column;gap:7px;}
.f label{font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--slate);}
.f label .req{color:var(--state-bottleneck);}
.f input,.f select{
  font-family:var(--font);font-size:var(--text-base);font-weight:300;color:var(--black);
  padding:13px 14px;border:1px solid var(--grey-1);background:#fff;border-radius:0;
  transition:border-color .18s ease;width:100%;
}
.f input:focus,.f select:focus{outline:none;border-color:var(--blue);}
.f input:focus-visible,.f select:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;}
.f__hint{font-size:var(--text-small);color:var(--slate-2);}
.phone{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;}
@media(min-width:1100px){.phone{grid-template-columns:minmax(0,220px) minmax(0,1fr);}}
@media(max-width:480px){.phone{grid-template-columns:1fr;}}
.modal__foot{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.modal__foot .btn{width:100%;}
.modal__legal{font-size:var(--text-small);color:var(--slate-2);line-height:1.6;}
.modal__done{display:none;text-align:center;padding:20px 0 8px;}
.modal__done h2{font-size:var(--heading-4);margin-bottom:10px;}
.modal__done p{font-size:var(--text-label);color:var(--slate);max-width:44ch;margin-inline:auto;}
.is-sent .modal__form{display:none;}
.is-sent .modal__done{display:block;}

/* ================================================================
   THE FREE 4 WEEKS, SHOWN ON THE ENGINE
   Three steps across the top, then the Engine beneath them. The
   engine is the same component as the diagnosis section further
   down, only smaller, so there is one engine on the page rather
   than two that can drift apart.
   ================================================================ */
.fw{background:var(--grey-2);padding-block:clamp(30px,3.1vw,40px) clamp(44px,4.8vw,64px);}
/* The homepage runs long and each section carries its own idea, so the gaps
   between them are opened up beyond the inner-page rhythm. Scoped to the
   home body class: .fw, .cases and .portal are shared with 14 other pages.
   The bands that are meant to read tight - the trial CTA, the black
   diagnosis strip, the qualifier - keep their own spacing. */
.home .fw{padding-block:clamp(52px,5.4vw,76px) clamp(62px,6.5vw,92px);}
.home .cases{padding-top:clamp(56px,6vw,84px);padding-bottom:clamp(40px,4.2vw,58px);}
.home .portal{padding-block:clamp(56px,6vw,84px);}

/* Heading at hero scale on one line, and an intro that uses the full width
   rather than a narrow column, so the steps and the engine both fit one screen. */
.fw__head{max-width:none;gap:10px;}
.fw__head h2{font-size:var(--heading-2);line-height:1.15;}
.fw__lede{
  font-size:var(--text-base);font-weight:300;line-height:1.55;
  color:var(--slate);max-width:none;
}

/* ---- the three steps ---- */
.fw__steps{
  list-style:none;margin:clamp(14px,1.8vw,20px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--grey-1);border:1px solid var(--grey-1);
}
@media(max-width:900px){.fw__steps{grid-template-columns:1fr;}}
.fw__step{display:flex;}
.fw__body{
  width:100%;background:#fff;
  padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,24px);
  display:flex;flex-direction:column;gap:6px;
}
.fw__n{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}

/* Step one carries the examples, and picking one drives the engine below. */
.fw__step .fw__egl{
  font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);
  margin-top:10px;
}
.fw__opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.fw__opt{
  font:inherit;font-size:var(--text-micro);font-weight:300;line-height:1.25;color:var(--slate);
  background:#fff;border:1px solid var(--grey-1);padding:6px 10px;cursor:pointer;text-align:left;
  transition:color .18s,border-color .18s,background .18s;
}
.fw__opt:hover{color:var(--black);border-color:var(--slate-3);}
.fw__opt.is-on{background:var(--black);border-color:var(--black);color:#fff;}
.fw__opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

/* Steps two and three read out of the example that is selected. */
.fw__gen{
  margin-top:auto;padding:12px 14px;background:var(--grey-3);
  border-left:2px solid var(--gen,var(--state-healthy));
}
.fw__genl{
  font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);
  margin-bottom:5px;
}
.fw__gent{font-size:var(--text-small);line-height:1.55;color:var(--black);}
.fw__step h3{font-size:var(--text-large);font-weight:500;line-height:1.28;}
.fw__step p{font-size:var(--text-small);color:var(--slate);line-height:1.55;}

/* ---- the engine, borrowed from the diagnosis section ---- */
.fw__stage{
  background:#fff;border:1px solid var(--grey-1);border-top:0;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,32px) clamp(18px,2.2vw,26px);
}
.fw__enginetitle{
  font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);
  margin-bottom:clamp(26px,3vw,40px);
}
/* what the engine is and where the scores come from, said once, where the
   numbers first appear */
.fw__enginelede{
  font-size:var(--text-small);line-height:1.6;color:var(--slate);max-width:none;
  margin-bottom:clamp(34px,4vw,56px);
}
.fw__more{margin-top:clamp(22px,2.6vw,32px);}
.fw__stage .eng__row{--cube:clamp(96px,12.5vw,168px);}
.fw__stage .core__disc b{font-size:clamp(18px,2.2vw,27px);}
.fw__stage .eng__t{font-size:var(--text-base);margin-bottom:9px;}
.fw__stage .eng__chips > span{font-size:10.5px;padding:3px 8px;}
/* The pipe carries grey tails that reach under the chambers on either side.
   The flow runs through the tails as well, so no stretch of pipe sits empty. */
.fw__stage .eng__row{container-type:inline-size;}
.fw__stage .eng__flow{z-index:1;}
@media(min-width:761px){
  /* from the pipe's end to the middle of the chamber beside it: half a column,
     less the part of the chamber the pipe already runs under */
  .fw__stage .eng__pipe{--reach:max(0px, calc((100cqw - 160px) / 6 - var(--cube) * .43 + 1px));}
  .fw__stage .eng__pipe::before,.fw__stage .eng__pipe::after{width:var(--reach);}
  .fw__stage .eng__flow{left:calc(var(--reach) * -1);right:calc(var(--reach) * -1);}
  .fw__stage .eng__row > .eng__pipe--stub:first-child .eng__flow{left:0;}
  .fw__stage .eng__row > .eng__pipe--stub:last-child .eng__flow{right:0;}
}

/* On a phone the three chambers and their runs have to fit the screen, so the
   edge and mid columns narrow and the chamber takes a third of what is left. */
@media(max-width:760px){
  .eng__row,.fw__stage .eng__row{
    grid-template-columns:8px 1fr 18px 1fr 18px 1fr 8px;
    --cube:min(92px, calc((100vw - 148px) / 3));
  }
  .core__disc b,.fw__stage .core__disc b{font-size:clamp(15px,4.4vw,19px);}
  .core__of{font-size:8px;letter-spacing:.04em;bottom:calc(var(--cube) * .03);}
  .eng__t,.fw__stage .eng__t{font-size:var(--text-small);margin-bottom:7px;}
  .eng__n{font-size:9px;letter-spacing:.14em;}
  .eng__chips > span,.fw__stage .eng__chips > span{font-size:9.5px;padding:3px 6px;}
}

/* the ring marks the section the strategy is aimed at */
.fw__stage .eng__unit .core::after{
  content:"";position:absolute;inset:-10px;border:1.5px solid var(--c);
  opacity:0;pointer-events:none;
}
.eng__row[data-state="2"] .eng__unit[data-unit="1"] .core::after{
  opacity:1;animation:fwRing 1.9s ease-out infinite;
}
@keyframes fwRing{0%{transform:scale(.95);opacity:.9;}70%{transform:scale(1.07);opacity:0;}100%{opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .eng__row[data-state="2"] .eng__unit[data-unit="1"] .core::after{animation:none;}
}

/* ---- the readout beneath the engine ---- */
.fwe__read{
  margin-top:clamp(16px,2vw,22px);padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid var(--grey-1);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start;
}
@media(max-width:760px){.fwe__read{grid-template-columns:1fr;gap:16px;}}
.fwe__score{display:flex;flex-direction:column;gap:4px;}
.fwe__score span{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.fwe__score b{
  font-size:clamp(24px,2.6vw,32px);font-weight:500;letter-spacing:-0.03em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--black);
}
.fwe__score i{font-style:normal;font-size:var(--text-small);color:var(--slate-2);}
.fwe__lab{
  font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--state-bottleneck);margin-bottom:8px;transition:color .3s ease;
}
.fwe__lab.is-clear{color:#4E8A1F;}
.fwe__say{font-size:var(--text-label);color:var(--slate);line-height:1.6;max-width:var(--measure);min-height:2.9em;}

/* ================================================================
   RESTORED: components added after the stylesheet was extracted
   ================================================================ */

/* ---- hero: the product name ---- */
.engine-mark{
  background-image:linear-gradient(100deg,
    #FFFFFF 0%, #FFFFFF 22%, var(--green) 38%, #BFE39A 46%,
    var(--blue) 58%, #8FC4DE 66%, #FFFFFF 84%, #FFFFFF 100%);
  background-size:260% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:engineSheen 7s cubic-bezier(.5,0,.5,1) infinite;padding-inline:.02em;
}
@keyframes engineSheen{0%,10%{background-position:120% 0;}55%,100%{background-position:-40% 0;}}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){
  .engine-mark{color:#fff;-webkit-text-fill-color:#fff;background-image:none;}
}
@media(prefers-reduced-motion:reduce){.engine-mark{animation:none;background-position:38% 0;}}

/* ---- who qualifies, folded into the intake band ---- */
.whoq{border-top:0;}
.whoq summary{
  list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(12px,1.3vw,16px);padding:clamp(28px,3.2vw,44px) 0 clamp(24px,2.8vw,36px);
}
.whoq summary::-webkit-details-marker{display:none;}
.whoq summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.whoq__sum{display:flex;flex-direction:column;gap:clamp(8px,.9vw,12px);color:var(--slate);}
/* the question reads as the section title, the line under it as its subtitle */
.whoq__q{
  display:block;color:var(--black);font-weight:500;
  font-size:var(--heading-2);letter-spacing:-0.02em;line-height:1.2;
}
.whoq__line{display:block;font-size:var(--text-base);line-height:1.55;}
.whoq__more{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  font-size:var(--text-small);color:var(--blue);white-space:nowrap;
}
.whoq__more i{font-style:normal;}
.whoq__more svg{width:11px;height:8px;transition:transform .22s ease;}
.whoq[open] .whoq__more svg{transform:rotate(180deg);}
.whoq__c{display:none;}
.whoq[open] .whoq__o{display:none;}
.whoq[open] .whoq__c{display:inline;}
.whoq summary:hover .whoq__more{color:var(--black);}
.whoq__body{padding-top:clamp(10px,1.4vw,18px);padding-bottom:clamp(26px,3vw,40px);}
.whoq__title{
  font-size:var(--heading-2);font-weight:500;letter-spacing:-0.02em;line-height:1.25;
  color:var(--black);margin:clamp(18px,2.4vw,30px) 0 clamp(24px,2.8vw,34px);
  max-width:none;text-wrap:balance;
}
@media(max-width:640px){.whoq__title{font-size:var(--heading-4);}}
.whoq .stages{margin-top:0;}

/* Stage 3 is the destination, not a rejection. */
.stage__flag--goal{background:var(--black);color:#fff;}
.stage--goal{border-color:var(--black);box-shadow:0 0 0 1px var(--black);}
.stage--goal .stage__n{color:var(--black);}

/* ---- the weekly cycle's return path ---- */
.cycle__rise{position:absolute;bottom:0;width:1px;background:var(--slate-2);}
.cycle__rise--l{left:-1px;height:calc(34px + var(--up-l,20px));}
.cycle__rise--r{right:-1px;height:calc(34px + var(--up-r,20px));}
.cycle__rise--l::before{
  content:"";position:absolute;left:-4px;top:0;width:9px;height:9px;
  border-left:1px solid var(--green);border-top:1px solid var(--green);transform:rotate(45deg);
}

/* ---- reviews: a continuously rolling rail ---- */
.rev__rail{
  margin-top:52px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.rev__track{display:flex;gap:24px;width:max-content;animation:revRoll 52s linear infinite;}
.rev__rail:hover .rev__track{animation-play-state:paused;}
@keyframes revRoll{from{transform:translate3d(0,0,0);}to{transform:translate3d(calc(-50% - 12px),0,0);}}
@media(prefers-reduced-motion:reduce){.rev__track{animation:none;}}
.rev__track .rev{flex:0 0 clamp(280px,31vw,430px);}

/* ---- the diagnosis readout ---- */
.eng__metric,.eng__say{min-width:0;}

/* ================================================================
   SERVICE PAGES
   ================================================================ */
.svchero{background:var(--black);color:#fff;}
.svchero__in{padding-block:clamp(24px,2.6vw,40px) clamp(48px,5.5vw,78px);}
.svchero .eyebrow{color:rgba(255,255,255,.42);}
.svchero h1{color:#fff;max-width:20ch;margin-top:16px;}
.svchero__lede{
  margin-top:clamp(18px,2.2vw,26px);max-width:var(--measure);
  font-size:var(--heading-4);line-height:1.62;color:rgba(255,255,255,.72);font-weight:300;
}
.svchero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px);}
/* the intro above the comparison runs the table's full width, which lands it
   in two lines instead of four and squares it up with the table below */
.svx__p.svx__p--wide{max-width:none;}
/* the trial headline holds one line: at the default heading-2 it needed 620px
   in a 605px column around 1280px wide, so it is set a little smaller here */
.p-seo .svoff__t{font-size:clamp(25px,2.66vw,38px);}

.does{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--grey-1);
  border:1px solid var(--grey-1);margin-top:clamp(28px,3.2vw,42px);}
@media(max-width:820px){.does{grid-template-columns:1fr;}}
.doe{background:#fff;padding:26px 26px 28px;display:flex;flex-direction:column;gap:9px;}
.doe h3{font-size:var(--heading-4);font-weight:500;line-height:1.3;}
.doe p{font-size:var(--text-label);color:var(--slate);line-height:1.68;}

.mets{margin:clamp(28px,3.2vw,42px) 0 0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);}
@media(max-width:760px){.mets{grid-template-columns:1fr;}}
.met{background:var(--grey-3);padding:24px 24px 26px;}
.met dt{font-size:var(--text-base);font-weight:500;color:var(--black);margin-bottom:8px;}
.met dd{margin:0;font-size:var(--text-label);color:var(--slate);line-height:1.62;}

.svcnote{margin-top:clamp(26px,3vw,38px);padding-left:20px;border-left:2px solid var(--green);
  font-size:var(--text-label);color:var(--slate);line-height:1.68;max-width:var(--measure);}

.faqs{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--grey-1);}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:var(--text-large);font-weight:400;color:var(--black);line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--slate-2);border-bottom:1.5px solid var(--slate-2);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq summary:hover{color:var(--green);}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.faq p{padding:0 60px 24px 0;font-size:var(--text-label);color:var(--slate);line-height:1.72;max-width:var(--measure);}

.more{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grey-1);
  border:1px solid var(--grey-1);margin-top:clamp(26px,3vw,38px);}
@media(max-width:820px){.more{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.more{grid-template-columns:1fr;}}
.more__i{background:#fff;padding:20px 22px 22px;display:flex;flex-direction:column;gap:4px;
  transition:background .16s ease;}
.more__i:hover{background:var(--grey-3);}
.more__i b{font-size:var(--text-base);font-weight:400;color:var(--black);}
.more__i span{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.case__note{margin-top:8px;font-size:var(--text-label);color:var(--slate);line-height:1.6;}

/* ================================================================
   RESOURCES, ARTICLES AND TOOLS
   ================================================================ */
.rescats{display:flex;gap:10px;margin-top:clamp(26px,3vw,36px);flex-wrap:wrap;}
.rescats a{display:flex;align-items:baseline;gap:10px;padding:11px 18px;
  border:1px solid rgba(255,255,255,.24);transition:border-color .18s ease,background .18s ease;}
.rescats a:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.rescats b{font-size:var(--text-label);font-weight:400;color:#fff;}
.rescats span{font-size:var(--text-micro);color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:.08em;}

.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--grey-1);
  border:1px solid var(--grey-1);margin-top:clamp(28px,3.2vw,42px);}
@media(max-width:900px){.arts{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.arts{grid-template-columns:1fr;}}
.art{background:#fff;padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px;
  transition:background .16s ease;}
.art:hover{background:var(--grey-3);}
.art__cat{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--green);}
.art--tool .art__cat{color:var(--blue);}
.art h3{font-size:var(--heading-4);font-weight:500;line-height:1.32;}
.art p{font-size:var(--text-label);color:var(--slate);line-height:1.62;}
.art__meta{margin-top:auto;padding-top:14px;font-size:var(--text-small);color:var(--slate-2);}

.post{background:#fff;}
.post__head{padding-block:calc(68px + clamp(24px,2.6vw,40px)) clamp(24px,3vw,34px);}
.post__head .eyebrow a{color:var(--blue);}
.post__head .eyebrow a:hover{color:var(--black);}
.post__head h1{max-width:22ch;margin-top:14px;}
.post__stand{margin-top:clamp(16px,2vw,22px);max-width:var(--measure);
  font-size:var(--heading-4);font-weight:300;line-height:1.55;color:var(--slate);}
.post__meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--grey-1);
  font-size:var(--text-small);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);}
.post__body{padding-bottom:clamp(44px,5vw,72px);}
.post__sec{max-width:var(--measure);}
.post__sec + .post__sec{margin-top:clamp(26px,3vw,38px);}
.post__sec h2{font-size:var(--heading-3);margin-bottom:12px;}
.post__sec p{font-size:var(--text-base);color:var(--slate);line-height:1.75;}
.post__cta{margin-top:clamp(34px,4vw,52px);padding:clamp(22px,2.6vw,30px);
  background:var(--grey-3);border-left:2px solid var(--green);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;max-width:var(--measure);}
.post__cta b{font-size:var(--text-base);font-weight:500;color:var(--black);}

.calc2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;
  background:var(--grey-1);border:1px solid var(--grey-1);margin-top:clamp(24px,3vw,36px);}
@media(max-width:820px){.calc2{grid-template-columns:1fr;}}
.calc2__in{background:#fff;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:18px;}
.calc2__out{background:var(--black);color:#fff;margin:0;padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:18px;}
.calc2__lab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.calc2__out .calc2__lab{color:rgba(255,255,255,.4);}
.calc2__hint{font-size:var(--text-small);color:var(--slate-2);margin-top:2px;}
.tf{display:flex;flex-direction:column;gap:8px;}
.tf label{font-size:var(--text-small);color:var(--slate);display:flex;align-items:baseline;gap:7px;}
.tf__u{font-size:var(--text-micro);color:var(--slate-2);letter-spacing:.1em;}
.tf input{font-family:var(--font);font-size:var(--text-large);font-weight:400;color:var(--black);
  padding:12px 14px;border:1px solid var(--grey-1);background:var(--grey-3);
  border-radius:0;width:100%;font-variant-numeric:tabular-nums;}
.tf input:focus{outline:none;border-color:var(--blue);background:#fff;}
.to{display:flex;flex-direction:column;gap:5px;padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,.14);}
.to:last-child{border-bottom:0;padding-bottom:0;}
.to dt{font-size:var(--text-small);color:rgba(255,255,255,.5);}
.to dd{margin:0;display:flex;align-items:baseline;gap:6px;
  font-size:clamp(26px,3.2vw,38px);font-weight:400;color:#fff;
  letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1;}
.to dd i{font-style:normal;font-size:15px;color:rgba(255,255,255,.45);letter-spacing:0;}
.to.is-bad dd{color:var(--state-bottleneck);}

/* ================================================================
   ABOUT
   ================================================================ */
.about{background:#fff;}
.about__cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,60px);align-items:start;margin-top:clamp(28px,3.2vw,42px);}
@media(max-width:860px){.about__cols{grid-template-columns:1fr;gap:26px;}}
.about__text p{font-size:var(--text-base);color:var(--slate);line-height:1.72;}
.about__text p + p{margin-top:15px;}
.about__pic{margin:0;}
.about__pic img{width:100%;height:auto;display:block;border:1px solid var(--grey-1);}
.facts{margin:clamp(32px,3.8vw,50px) 0 0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.facts{grid-template-columns:1fr;}}
.fact{background:var(--grey-3);padding:24px 22px 26px;}
.fact dt{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);margin-bottom:10px;}
.fact dd{margin:0;font-size:var(--heading-4);font-weight:500;color:var(--black);
  letter-spacing:-0.015em;line-height:1.2;}
.fact p{margin-top:9px;font-size:var(--text-small);color:var(--slate);line-height:1.55;}
.about__founders{margin-top:clamp(24px,2.8vw,34px);padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--grey-1);font-size:var(--text-label);color:var(--slate);line-height:1.65;max-width:var(--measure);}
.about__founders b{color:var(--black);font-weight:500;}

/* ================================================================
   THE ENGINE PAGE
   ================================================================ */
.esecs{display:grid;gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);
  margin-top:clamp(28px,3.2vw,42px);}
.esec{background:#fff;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(22px,3vw,48px);padding:clamp(26px,3vw,38px) clamp(24px,2.8vw,34px);}
@media(max-width:860px){.esec{grid-template-columns:1fr;gap:20px;}}
.esec__n{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.esec__head h3{font-size:var(--heading-3);font-weight:500;line-height:1.22;margin:8px 0 10px;}
.esec__lead{font-size:var(--text-label);color:var(--slate);line-height:1.62;}
.esec__lab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);margin-bottom:10px;}
.esec__lab + .esec__lab,.ecomps + .esec__lab{margin-top:22px;}
.ecomps{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
@media(max-width:600px){.ecomps{grid-template-columns:1fr;}}
.ecomp{display:flex;flex-direction:column;gap:3px;padding:11px 13px;background:var(--grey-3);
  transition:background .16s ease;}
.ecomp:hover{background:var(--grey-2);}
.ecomp b{font-size:var(--text-label);font-weight:500;color:var(--black);}
.ecomp span{font-size:var(--text-small);color:var(--slate);line-height:1.45;}
.esec__list{margin:0;padding-left:18px;font-size:var(--text-label);color:var(--slate);line-height:1.85;}
.esec__note{margin-top:20px;padding-top:16px;border-top:1px solid var(--grey-1);
  font-size:var(--text-label);color:var(--black);line-height:1.68;}

/* ================================================================
   THE OBSIDIAN SCIENCE FELLOWSHIP (csr.html)
   ================================================================ */
.csrhero{position:relative;background:var(--black);color:#fff;overflow:hidden;}
.csrhero__field{position:absolute;inset:0;opacity:.85;}
.csrhero__in{padding-block:clamp(24px,2.6vw,40px) clamp(96px,11vw,150px);position:relative;z-index:1;}
.csrhero .eyebrow{color:rgba(255,255,255,.45);}
.eyebrow--mark{color:var(--green);letter-spacing:.18em;}
.csrhero h1{color:#fff;max-width:15ch;}
.csrhero__lede{margin-top:clamp(20px,2.4vw,30px);max-width:var(--measure);
  font-size:var(--heading-4);line-height:1.6;color:rgba(255,255,255,.72);font-weight:300;}
.csrhero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px);}
.csrhero__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:clamp(28px,4vw,56px);align-items:center;}
@media(max-width:900px){.csrhero__cols{grid-template-columns:1fr;}}
.herolist{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;
  display:flex;flex-direction:column;gap:11px;}
.herolist li{position:relative;padding-left:24px;font-size:var(--text-label);line-height:1.5;color:rgba(255,255,255,.72);}
.herolist li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--green);}
.csrhero__next{margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(24px,2.8vw,32px);
  border-top:1px solid rgba(255,255,255,.16);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-size:var(--heading-4);color:#fff;letter-spacing:-0.015em;}
.csrhero__next span{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--green);}

/* the fellowship mark */
.seal{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,22px);}
.seal__svg{width:100%;max-width:clamp(220px,26vw,320px);height:auto;display:block;overflow:visible;}
.seal__ring{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;}
.seal__ring--in{stroke:var(--green);stroke-width:1.5;}
.seal__around{fill:#fff;font-family:var(--font);font-size:var(--text-small);font-weight:400;
  letter-spacing:1.7px;text-transform:uppercase;}
.seal__node line{stroke:var(--green);stroke-width:1.4;}
.seal__node circle{fill:var(--green);}
.seal__node circle:first-of-type{fill:#fff;}
.seal__word{fill:#fff;font-family:var(--font);font-size:var(--heading-4);font-weight:500;letter-spacing:4px;}
.seal__rule{stroke:rgba(255,255,255,.3);stroke-width:1;}
.seal__year{fill:rgba(255,255,255,.5);font-family:var(--font);font-size:11px;letter-spacing:3px;}
.seal__cap{font-size:var(--text-small);color:rgba(255,255,255,.42);text-align:center;max-width:34ch;line-height:1.5;}
.seal__svg--dark .seal__ring{stroke:var(--grey-1);}
.seal__svg--dark .seal__ring--in{stroke:var(--green);}
.seal__svg--dark .seal__around,.seal__svg--dark .seal__word{fill:var(--black);}
.seal__svg--dark .seal__rule{stroke:var(--grey-1);}
.seal__svg--dark .seal__year{fill:var(--slate-2);}
.seal__svg--dark .seal__node circle:first-of-type{fill:var(--black);}

/* what a researcher gets */
.gives{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--grey-1);
  border:1px solid var(--grey-1);margin-top:clamp(34px,3.6vw,46px);}
@media(max-width:1000px){.gives{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.gives{grid-template-columns:1fr;}}
.give{background:#fff;padding:26px 24px 28px;display:flex;flex-direction:column;gap:8px;}
.give__n{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.give h3{font-size:var(--text-large);font-weight:500;line-height:1.3;}
.give p{font-size:var(--text-label);color:var(--slate);line-height:1.6;}

.terms{margin-top:clamp(30px,3.4vw,44px);border-left:2px solid var(--green);background:#fff;
  border-top:1px solid var(--grey-1);border-right:1px solid var(--grey-1);border-bottom:1px solid var(--grey-1);
  padding:clamp(24px,2.8vw,34px) clamp(24px,3vw,38px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);}
@media(max-width:820px){.terms{grid-template-columns:1fr;}}
.term b{display:block;font-size:var(--text-label);font-weight:500;margin-bottom:6px;}
.term p{font-size:var(--text-label);color:var(--slate);line-height:1.6;}

.crit{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grey-1);
  border:1px solid var(--grey-1);margin-top:clamp(30px,3.4vw,42px);}
@media(max-width:760px){.crit{grid-template-columns:1fr;}}
.crit__i{background:var(--grey-3);padding:28px 26px;display:flex;gap:16px;align-items:flex-start;}
.crit__k{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--green);color:#4E8A1F;
  display:grid;place-items:center;font-size:var(--text-small);font-variant-numeric:tabular-nums;}
.crit__t{font-size:var(--text-base);font-weight:500;margin-bottom:5px;}
.crit__d{font-size:var(--text-label);color:var(--slate);line-height:1.6;}

/* selection */
.qual--alt{background:var(--grey-3);}
.sel__date{margin-top:4px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:var(--text-label);color:var(--slate);}
.sel__date span{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:#4E8A1F;}
.sel__date b{font-size:var(--text-large);font-weight:500;color:var(--black);letter-spacing:-0.015em;}
.pick{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:1px;
  background:var(--grey-1);border:1px solid var(--grey-1);margin-top:clamp(30px,3.4vw,44px);}
@media(max-width:860px){.pick{grid-template-columns:1fr;}}
.pick__stat{background:var(--black);padding:clamp(28px,3vw,38px) clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;}
.pick__n{font-size:clamp(64px,8vw,110px);font-weight:300;letter-spacing:-0.05em;line-height:.85;
  color:var(--green);font-variant-numeric:tabular-nums;}
.pick__t{margin-top:18px;font-size:var(--text-base);font-weight:500;color:#fff;}
.pick__c{margin-top:4px;font-size:var(--text-label);color:rgba(255,255,255,.45);}
.pick__who{margin-top:auto;padding-top:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;}
.pick__who p{padding-top:14px;border-top:1px solid rgba(255,255,255,.16);}
.pick__who b{display:block;font-size:var(--text-label);font-weight:500;color:#fff;}
.pick__who span{font-size:var(--text-small);color:rgba(255,255,255,.45);}
.pick__body{background:#fff;padding:clamp(28px,3vw,38px) clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;gap:clamp(18px,2vw,24px);}
.pick__pic{margin:0;}
.pick__pic img{width:100%;height:auto;display:block;border:1px solid var(--grey-1);}
.pick__d{font-size:var(--text-base);color:var(--black);line-height:1.65;}
.pick__crit{margin-top:auto;padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--grey-1);
  font-size:var(--text-label);color:var(--slate);line-height:1.65;}
.pick__crit span{display:block;font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate-2);margin-bottom:7px;}

/* the six month plan */
.plan{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--grey-1);
  border:1px solid var(--grey-1);margin-top:clamp(30px,3.4vw,44px);}
@media(max-width:820px){.plan{grid-template-columns:1fr;}}
.phase{background:#fff;padding:clamp(26px,3vw,36px) clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;gap:11px;}
.phase__m{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);}
.phase h3{font-size:var(--heading-4);font-weight:500;line-height:1.3;}
.phase p{font-size:var(--text-label);color:var(--slate);line-height:1.68;}
.phase p b{color:var(--black);font-weight:500;}
.phase__out{margin-top:auto;padding-top:16px;border-top:1px solid var(--grey-1);
  font-size:var(--text-label);color:var(--black);}
.phase__out span{display:block;font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate-2);margin-bottom:6px;}

/* the fellowship afterwards */
.fell{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(30px,3.4vw,44px);}
@media(max-width:900px){.fell{grid-template-columns:1fr;gap:30px;}}
.fell__mark{display:flex;justify-content:center;}
.fell__cols{display:grid;gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);}
.fell__i{background:#fff;padding:24px 26px 26px;display:flex;flex-direction:column;gap:8px;}
.fell__n{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.fell__i h3{font-size:var(--heading-4);font-weight:500;line-height:1.3;}
.fell__i p{font-size:var(--text-label);color:var(--slate);line-height:1.68;}

/* a photograph beside a passage of text */
.detail{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(26px,4vw,58px);align-items:center;margin-top:clamp(38px,4.4vw,60px);}
.detail--flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);}
.detail--flip .detail__pic{order:2;}
@media(max-width:860px){
  .detail,.detail--flip{grid-template-columns:1fr;gap:24px;}
  .detail--flip .detail__pic{order:0;}
  .detail__pic{max-width:460px;}
}
.detail__pic{margin:0;}
.detail__pic img{width:100%;height:auto;display:block;border:1px solid var(--grey-1);}
.detail__text h3{font-size:var(--heading-3);margin-bottom:14px;}
.detail__text p{font-size:var(--text-base);color:var(--slate);line-height:1.72;}
.detail__text p + p{margin-top:14px;}

.step--last{}
.sticky--solo .btn{width:100%;}

/* ================================================================
   THE FELLOWSHIP APPLICATION FORM
   ================================================================ */
.modal__panel--wide{width:min(880px,100%);background:#fff;}
.modal__panel--wide .modal__body{padding:clamp(20px,3vw,34px) clamp(22px,3.4vw,40px) clamp(26px,3.4vw,40px);}
.modal__panel--wide .af{margin-top:0;}
.modal__panel--wide .af__set:first-of-type{border-top:0;padding-top:6px;}

.af{margin-top:clamp(30px,3.6vw,46px);}
.af__set{border:0;border-top:1px solid var(--grey-1);margin:0;padding:clamp(26px,3vw,38px) 0 0;}
.af__set--last{padding-bottom:0;}
.af__leg{display:flex;align-items:baseline;gap:14px;padding:0;margin-bottom:clamp(20px,2.4vw,28px);
  font-size:var(--heading-4);font-weight:500;letter-spacing:-0.012em;color:var(--black);}
.af__leg span{font-size:var(--text-micro);letter-spacing:.2em;color:var(--slate-2);font-weight:300;
  font-variant-numeric:tabular-nums;}
.af__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,22px);}
@media(max-width:860px){.af__grid{grid-template-columns:1fr;}}
.af__span2{grid-column:1 / -1;}
@media(max-width:860px){.af__span2{grid-column:auto;}}
.af .f{display:flex;flex-direction:column;gap:8px;}
.af label{font-size:var(--text-small);letter-spacing:.06em;text-transform:uppercase;color:var(--slate);}
.af .req{color:var(--state-bottleneck);font-weight:400;}
.af .f.is-bad input,.af .f.is-bad select,.af .f.is-bad textarea{border-color:var(--state-bottleneck);}
.af .f.is-bad label{color:var(--state-bottleneck);}
.af__count{font-variant-numeric:tabular-nums;}
.af__count.is-full{color:var(--state-bottleneck);}
.af__cond{margin-top:clamp(18px,2vw,24px);padding:clamp(20px,2.4vw,28px);
  background:var(--grey-3);border-left:2px solid var(--blue);}
.af__condlab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;}
.af__checks{display:flex;flex-direction:column;gap:14px;}
.chk{display:flex;gap:13px;align-items:flex-start;cursor:pointer;}
.chk input{flex:0 0 auto;appearance:none;-webkit-appearance:none;width:19px;height:19px;margin-top:2px;
  border:1px solid var(--slate-2);background:#fff;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;}
.chk input:checked{background:var(--green);border-color:var(--green);}
.chk input:checked::after{content:"";display:block;width:5px;height:9px;margin:2px auto 0;
  border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);}
.chk input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.chk span{font-size:var(--text-label);color:var(--slate);line-height:1.55;text-transform:none;letter-spacing:0;}
.chk.is-bad input{border-color:var(--state-bottleneck);}
.chk.is-bad span{color:var(--state-bottleneck);}
.af__send{margin-top:clamp(26px,3vw,36px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--grey-1);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;}
@media(max-width:860px){.af__send{grid-template-columns:1fr;gap:18px;}.af__send .btn{width:100%;}}
.af__legal{font-size:var(--text-small);color:var(--slate-2);line-height:1.6;max-width:var(--measure);}
.af__legal a{color:var(--blue);border-bottom:1px solid currentColor;display:inline-block;padding-block:8px;}
.af__error{margin-top:18px;padding:14px 18px;border-left:2px solid var(--state-bottleneck);
  background:#FBF3F2;font-size:var(--text-label);color:var(--state-bottleneck);}
.af__done{margin-top:clamp(30px,3.6vw,46px);border:1px solid var(--green);border-left-width:2px;
  background:var(--grey-3);padding:clamp(30px,3.6vw,48px);}
.af__done h3{font-size:var(--heading-3);margin-bottom:12px;}
.af__done p{font-size:var(--text-base);color:var(--slate);line-height:1.7;max-width:var(--measure);}
.f textarea{resize:vertical;min-height:84px;line-height:1.55;}

/* the mid pipes need no modifier of their own; the stubs carry the exception */
.eng__pipe--mid{}
.esec__body{min-width:0;}

/* ---------------------------------------------------------------------------
   Responsive rules for grids and the floating controls. These stack the
   two and three column blocks before they run past the edge of a phone.
   --------------------------------------------------------------------------- */
@media(max-width:1024px){
  .sticky{display:block;}
  .wabubble{bottom:88px;right:16px;width:52px;height:52px;}
  .wabubble svg{width:27px;height:27px;}
  .waprompt{bottom:150px;right:16px;}
}
@media(max-width:920px){
  .stages{grid-template-columns:1fr;gap:34px;}
}
@media(max-width:860px){
  .eng__read{grid-template-columns:1fr;gap:18px;}
}
@media(max-width:600px){
  .fgrid{grid-template-columns:1fr;}
  /* the two calls to action sit side by side until there is no room for them */
  .band .cta-pair{flex:1 1 100%;}
  .cta-pair .btn{flex:1 1 100%;justify-content:center;}
}

/* ---------------------------------------------------------------------------
   THE OBSIDIAN PORTAL: the path to getting one, then the portal itself playing
   through on the right. The screens are drawn in markup, so they stay sharp at
   any size and weigh nothing.
   --------------------------------------------------------------------------- */
.portal{background:#fff;}
.portal .lede b{color:var(--black);font-weight:500;}
/* the intro runs the full width, two lines of it */
.portal .sec-head{max-width:none;}
/* the name sat in the narrow side column, which forced it down to 32px to
   hold one line; above the grid it takes the same size as every other
   section heading on the page */
.portal__head{margin-bottom:clamp(24px,3vw,40px);}
@media(min-width:1001px){ .portal__head .lede{max-width:none;white-space:nowrap;} }
.portal .lede{max-width:none;}

/* ---- how you get there ---- */
.pjourney{
  list-style:none;margin:clamp(26px,3.2vw,42px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--grey-1);border:1px solid var(--grey-1);
}
.pjourney li{background:#fff;padding:clamp(14px,1.6vw,20px) clamp(13px,1.5vw,18px);
  display:flex;flex-direction:column;gap:5px;}
.pj__n{font-size:10px;letter-spacing:.16em;color:var(--slate-2);font-variant-numeric:tabular-nums;}
.pjourney h3{font-size:var(--text-large);font-weight:500;line-height:1.28;letter-spacing:-0.01em;}
.pjourney p{font-size:var(--text-small);line-height:1.5;color:var(--slate);}
@media(max-width:1000px){.pjourney{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.pjourney{grid-template-columns:1fr;}}

.portal__inside{
  margin-top:clamp(30px,3.6vw,46px);
  font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);
}

/* ---- what is inside: a row of tabs over one full width screen ---- */
.portal__tabs{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(10px,1.4vw,14px);
}
.pt{
  font:inherit;font-size:var(--text-small);font-weight:300;color:var(--slate);cursor:pointer;
  background:#fff;border:1px solid var(--grey-1);padding:9px 16px;
  transition:color .18s,border-color .18s,background .18s;
}
.pt:hover{color:var(--black);border-color:var(--slate-3);}
.pt.is-on{background:var(--black);border-color:var(--black);color:#fff;}
.pt:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

.portal__screen{
  position:relative;margin-top:clamp(14px,1.8vw,20px);
  aspect-ratio:16 / 10;border:1px solid var(--grey-1);background:var(--grey-3);overflow:hidden;
}
.pshot{margin:0;position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .45s ease;}
.pshot.is-on{opacity:1;pointer-events:auto;}
@media(prefers-reduced-motion:reduce){.pshot{transition:none;}}
.pshot--img img{width:100%;height:100%;object-fit:contain;display:block;background:var(--grey-3);}
.portal__cap{margin-top:12px;font-size:var(--text-small);line-height:1.55;color:var(--slate);}

/* the portal itself: sidebar and page */
.papp{
  height:100%;display:grid;grid-template-columns:clamp(118px,13%,168px) minmax(0,1fr);
  background:#fff;overflow:hidden;
}
.papp__side{border-right:1px solid var(--grey-1);padding:11px 9px;display:flex;flex-direction:column;}
.papp__logo{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:500;letter-spacing:.03em;margin-bottom:10px;}
.papp__logo i{
  width:13px;height:13px;border-radius:3px;background:var(--black);color:#fff;
  font-style:normal;font-size:7px;display:grid;place-items:center;flex:0 0 auto;
}
.papp__nav{display:flex;flex-direction:column;gap:2px;}
.papp__nav span{font-size:8.5px;line-height:1.3;color:var(--slate);padding:5px 6px;border-radius:3px;}
.papp__nav .is-on{background:var(--black);color:#fff;}
.papp__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:8.5px;color:var(--slate-2);padding-top:10px;border-top:1px solid var(--grey-1);}
.papp__me{display:flex;align-items:center;gap:6px;color:var(--black);}
.papp__me i{
  width:16px;height:16px;border-radius:50%;background:var(--black);color:#fff;
  font-style:normal;font-size:7px;display:grid;place-items:center;
}
.papp__main{background:var(--grey-3);padding:13px 15px;display:flex;flex-direction:column;gap:8px;overflow:hidden;}
.papp__eyebrow{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.papp__h{font-size:clamp(14px,1.5vw,17px);font-weight:500;letter-spacing:-0.015em;line-height:1.2;}
.papp__sub{font-size:9.5px;line-height:1.45;color:var(--slate-2);}

/* announcements */
.pann{
  background:var(--black);color:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:7px;
  min-height:96px;justify-content:center;
}
.pann__e{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);}
.pann__q{font-size:12.5px;line-height:1.35;letter-spacing:-0.01em;max-width:46ch;}
.pann__dots{display:flex;gap:5px;margin-top:4px;}
.pann__dots i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3);}
.pann__dots .is-on{background:#fff;width:6px;height:6px;margin:-1.5px 0;}
.pcard{background:#fff;border:1px solid var(--grey-1);padding:9px 11px;font-size:10px;}
.pcard--row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pcard--row b{display:block;font-size:10.5px;font-weight:500;}
.pcard--row i{display:block;font-style:normal;font-size:9px;color:var(--slate-2);margin-top:2px;}
.pcard--empty{text-align:center;color:var(--slate-2);padding:16px 11px;flex:1;display:grid;place-items:center;}
.pcard__chk{color:var(--slate-2);font-size:9px;display:flex;align-items:center;gap:5px;}
.pcard__chk::before{content:"";width:8px;height:8px;background:var(--blue);display:inline-block;}
.pcard__v{color:var(--slate-3);}
.pcard__tag{
  flex:0 0 auto;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);
  border:1px solid var(--grey-1);padding:3px 7px;
}
.pcard__tag--live{color:#4E8A1F;border-color:color-mix(in srgb, var(--green) 40%, var(--grey-1));}

/* the agreement */
.pmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 12px;background:#fff;border:1px solid var(--grey-1);padding:11px;}
.pmeta span{font-size:10.5px;display:flex;flex-direction:column;gap:2px;}
.pmeta i{font-style:normal;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);}
.pmeta__on{
  font-weight:400;color:#4E8A1F;background:color-mix(in srgb, var(--green) 14%, #fff);
  padding:1px 7px;align-self:flex-start;font-size:9.5px;
}

/* the engine, in miniature */
.peng{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;background:#fff;
  border:1px solid var(--grey-1);padding:13px 11px;
}
.peng__lab{font-size:9px;color:var(--slate-2);text-align:center;line-height:1.3;}
.peng__box{position:relative;aspect-ratio:1.35;display:grid;place-items:center;}
.peng__box::before{
  content:"";position:absolute;left:-14%;right:-14%;top:50%;height:5px;transform:translateY(-50%);
  background:var(--grey-1);
}
.peng__box i{
  position:relative;width:56%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:12px;color:#fff;font-variant-numeric:tabular-nums;
}
.peng__box--ok{background:color-mix(in srgb, var(--state-healthy) 8%, #fff);border:1px solid color-mix(in srgb, var(--state-healthy) 40%, var(--grey-1));}
.peng__box--ok i{background:var(--state-healthy);}
.peng__box--stop{background:color-mix(in srgb, var(--state-bottleneck) 8%, #fff);border:1px solid color-mix(in srgb, var(--state-bottleneck) 40%, var(--grey-1));}
.peng__box--stop i{background:var(--state-bottleneck);}

/* stat tiles */
.ptiles2{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ptiles2--4{grid-template-columns:repeat(4,1fr);}
.ptiles2 span{
  background:#fff;border:1px solid var(--grey-1);padding:9px 10px;
  font-size:17px;font-weight:400;letter-spacing:-0.02em;display:flex;flex-direction:column;gap:3px;
}
.ptiles2 i{font-style:normal;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);}
.ptiles2 b{font-weight:400;font-size:10px;color:var(--slate-2);}
.ptiles2 .is-done{color:#4E8A1F;background:color-mix(in srgb, var(--green) 7%, #fff);}
.ptiles2 .is-prog{color:#8A5A1F;background:color-mix(in srgb, #C58A3A 12%, #fff);}
.ptiles2 .is-done i,.ptiles2 .is-prog i{color:var(--slate-2);}
.pbtn{background:var(--black);color:#fff;text-align:center;font-size:11.5px;padding:8px 10px;}
.pbtn--tiny{padding:5px 10px;font-size:9.5px;flex:0 0 auto;}
.pbtn--dark{background:var(--black);color:#fff;}

/* the calendar */
.pcal{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--grey-1);
  border:1px solid var(--grey-1);
}
.pcal span,.pcal i{background:#fff;font-style:normal;font-size:8px;color:var(--slate-2);padding:4px 5px;}
.pcal span{text-align:center;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;}
.pcal i{min-height:20px;color:var(--slate);}
.pcal .today{background:var(--black);color:#fff;}
.pcal .has{color:#4E8A1F;font-weight:500;}

.portal__more{margin-top:clamp(22px,2.6vw,32px);}
@media(max-width:640px){
  .papp{grid-template-columns:1fr;}
  .papp__side{display:none;}
  .pmeta{grid-template-columns:repeat(2,1fr);}
  .ptiles2,.ptiles2--4{grid-template-columns:repeat(2,1fr);}
  .portal__screen{aspect-ratio:auto;min-height:330px;}
}

/* ---------------------------------------------------------------------------
   PRICING: every figure read from the plan builder in the portal.
   --------------------------------------------------------------------------- */
.prices{background:#fff;}
.prices--alt{background:var(--grey-3);}
.prlist{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--grey-1);}
.pr{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);
  align-items:start;padding:clamp(20px,2.4vw,28px) 0;border-bottom:1px solid var(--grey-1);
}
.pr__l{display:flex;flex-direction:column;gap:6px;}
.pr h3{font-size:var(--heading-4);font-weight:500;line-height:1.3;letter-spacing:-0.015em;}
.pr__sub{font-size:var(--text-small);letter-spacing:.06em;color:var(--slate-2);}
.pr__d{font-size:var(--text-label);line-height:1.6;color:var(--slate);max-width:var(--measure);}
.pr__p{
  text-align:right;display:flex;flex-direction:column;gap:3px;white-space:nowrap;
}
.pr__p b{font-size:var(--heading-2);font-weight:300;letter-spacing:-0.035em;line-height:1;}
.pr__p span{font-size:var(--text-small);letter-spacing:.12em;text-transform:uppercase;color:var(--slate-2);}
@media(max-width:640px){
  .pr{grid-template-columns:1fr;gap:12px;}
  .pr__p{text-align:left;}
}

.prtable{margin-top:clamp(28px,3.4vw,44px);}
.prtable__t{font-size:var(--text-large);font-weight:500;letter-spacing:-0.012em;}
.prtable__s{font-size:var(--text-label);line-height:1.6;color:var(--slate);margin-top:5px;max-width:var(--measure);}
.prtable__n{font-size:var(--text-small);color:var(--slate-2);margin-top:12px;}
.prtable table{
  width:100%;border-collapse:collapse;margin-top:14px;
  border:1px solid var(--grey-1);background:#fff;
}
.prtable th,.prtable td{
  text-align:left;padding:11px 14px;font-size:var(--text-label);border-bottom:1px solid var(--grey-1);
}
.prtable th{
  font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);font-weight:400;
}
.prtable td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.prtable tbody tr:last-child td{border-bottom:0;}

.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--grey-1);border:1px solid var(--grey-1);margin-top:clamp(26px,3vw,40px);
}
.pillars .pill{background:#fff;padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:7px;}
.pillars h3{font-size:var(--text-large);font-weight:500;line-height:1.3;}
.pillars p{font-size:var(--text-label);line-height:1.6;color:var(--slate);}
@media(max-width:760px){.pillars{grid-template-columns:1fr;}}

.prband{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px);
  margin-top:clamp(22px,2.6vw,32px);padding:clamp(20px,2.4vw,28px);
  background:var(--grey-3);border-left:2px solid var(--green);
}
.prband__l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.prband__v{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.prband__v b{font-size:var(--heading-2);font-weight:300;letter-spacing:-0.035em;line-height:1;}
.prband__v span{font-size:var(--text-small);line-height:1.5;color:var(--slate);}
@media(max-width:760px){.prband{grid-template-columns:1fr;}}

.faqs{margin-top:clamp(24px,2.8vw,36px);border-top:1px solid var(--grey-1);}

/* ---- pricing: the currency switch, the plan steps, one card per service ---- */
.cursel{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:clamp(18px,2vw,24px);}
.cursel__l{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-right:6px;}
.cursel button{
  font:inherit;font-size:var(--text-small);font-weight:400;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.28);
  padding:7px 14px;transition:background .18s,color .18s,border-color .18s;
}
.cursel button:hover{color:#fff;border-color:rgba(255,255,255,.6);}
.cursel button.is-on{background:#fff;color:var(--black);border-color:#fff;}
.cursel button:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

.prsteps{
  list-style:none;margin:clamp(24px,2.8vw,36px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--grey-1);border:1px solid var(--grey-1);
}
.prsteps li{background:#fff;padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:6px;}
.prsteps__n{font-size:10px;letter-spacing:.16em;color:var(--slate-2);}
.prsteps h3{font-size:var(--text-large);font-weight:500;}
.prsteps p{font-size:var(--text-label);line-height:1.6;color:var(--slate);}
@media(max-width:760px){.prsteps{grid-template-columns:1fr;}}

.svcgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(24px,2.8vw,36px);}
@media(max-width:900px){.svcgrid{grid-template-columns:1fr;}}
.svcp{background:#fff;border:1px solid var(--grey-1);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;}
.svcp--wide{margin-top:clamp(20px,2.4vw,28px);}
.svcp__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.svcp__head h3{font-size:var(--heading-4);font-weight:500;line-height:1.3;letter-spacing:-0.015em;margin-top:6px;}
.svcp__tag{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);border:1px solid var(--grey-1);padding:3px 7px;}
.svcp__tag--mo{color:#4E8A1F;border-color:color-mix(in srgb, var(--green) 40%, var(--grey-1));}
.svcp__price{text-align:right;display:flex;flex-direction:column;gap:3px;white-space:nowrap;}
.svcp__price b{font-size:var(--heading-2);font-weight:300;letter-spacing:-0.035em;line-height:1;}
.svcp__price span{font-size:var(--text-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);}
.svcp__d{font-size:var(--text-label);line-height:1.6;color:var(--slate);}
.svcp table{width:100%;border-collapse:collapse;border:1px solid var(--grey-1);margin-top:4px;}
.svcp th,.svcp td{text-align:left;padding:9px 12px;font-size:var(--text-small);border-bottom:1px solid var(--grey-1);}
.svcp th{font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);font-weight:400;background:var(--grey-3);}
.svcp td:last-child,.svcp th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.svcp tbody tr:last-child td{border-bottom:0;}

.prex table tfoot td{font-weight:500;background:var(--grey-3);border-top:1px solid var(--grey-1);}
.prex{margin-top:clamp(22px,2.6vw,32px);}
/* on a phone the tables tighten up, and can never push the page wider than the screen */
.prtable,.svcp{overflow-x:auto;}
@media(max-width:560px){
  .prtable th,.prtable td,.svcp th,.svcp td{padding:9px 9px;font-size:var(--text-small);}
  .prtable td:nth-child(2){white-space:normal;}
}

/* ---------------------------------------------------------------------------
   SERVICE PAGES built from the SEO briefs: shared blocks.
   --------------------------------------------------------------------------- */
.sec-head--wide{max-width:none;}
.sec-head--wide .lede{max-width:var(--measure);}
.svx__p{font-size:var(--text-label);line-height:1.7;color:var(--slate);max-width:var(--measure);margin-top:14px;}
.svx__p--lg{font-size:var(--text-large);color:var(--black);max-width:var(--measure);margin-top:18px;}
.svx__cta{margin-top:clamp(20px,2.4vw,28px);}
.svx__sub{margin-top:clamp(30px,3.4vw,44px);font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}

.pillars--2{grid-template-columns:repeat(2,1fr);}
.pillars--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.pillars--4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.pillars--2,.pillars--4{grid-template-columns:1fr;}}
.pill .checks{margin-top:4px;}
.pill__n{font-size:var(--text-small);line-height:1.6;color:var(--slate);margin-top:6px;}
.pill__cta{margin-top:12px;align-self:flex-start;}

.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.checks li{position:relative;padding-left:20px;font-size:var(--text-label);line-height:1.5;color:var(--slate);}
.checks li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:6px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);}
.checks--cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin-top:18px;max-width:900px;}
@media(max-width:640px){.checks--cols{grid-template-columns:1fr;}}

.prtable--cmp{margin-top:clamp(20px,2.4vw,28px);}
.prtable--cmp td,.prtable--cmp th{text-align:left !important;white-space:normal !important;}
/* The comparison reads as a real table: the row labels hold their own grey
   column on the left, and the two cases are separated by column rules
   rather than being left to float in white space. */
.prtable--cmp th,.prtable--cmp td{
  padding:14px 18px;vertical-align:top;line-height:1.5;
  border-right:1px solid var(--grey-1);
}
.prtable--cmp th:last-child,.prtable--cmp td:last-child{border-right:0;}
.prtable--cmp thead th{background:var(--grey-3);border-bottom:1px solid var(--grey-1);}
.prtable--cmp thead th:not(:first-child){
  font-size:var(--text-label);letter-spacing:0;text-transform:none;
  color:var(--black);font-weight:700;
}
.prtable--cmp td:first-child,.prtable--cmp thead th:first-child{
  width:26%;background:var(--grey-3);font-weight:700;color:var(--black);
}
/* the two cases being compared get the same width instead of dividing what
   is left by how much text each happens to hold */
.prtable--cmp td:not(:first-child),.prtable--cmp thead th:not(:first-child){width:37%;}
.prtable--cmp tbody tr:hover td{background:rgba(2,2,2,.022);}
.prtable--cmp tbody tr:hover td:first-child{background:var(--grey-2);}
@media(max-width:700px){.prtable--cmp th,.prtable--cmp td{padding:11px 12px;}
  .prtable--cmp td:first-child,.prtable--cmp thead th:first-child{width:34%;}}

/* the offer band, with the same month end clock as the home page */
.svoff{background:var(--black);color:#fff;padding-block:clamp(36px,4vw,56px);}
.svoff__in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center;}
@media(max-width:860px){.svoff__in{grid-template-columns:1fr;}}
.svoff__t{color:#fff;font-size:var(--heading-2);font-weight:500;line-height:1.16;letter-spacing:-0.017em;margin:0;}
.svoff__p{margin-top:12px;font-size:var(--text-label);line-height:1.65;color:rgba(255,255,255,.72);max-width:var(--measure);}
.svoff__act{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.svoff__cd{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;color:#fff;margin-top:clamp(14px,1.6vw,18px);}
.svoff__act .svoff__cd{margin-top:0;}
.svoff__cdl{font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-right:3px;}

/* the specialist */
.expert{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);align-items:center;}
@media(max-width:760px){.expert{grid-template-columns:1fr;}}
.expert__pic{aspect-ratio:4/5;background:var(--grey-2);overflow:hidden;display:grid;place-items:center;max-height:460px;}
.expert__pic img{width:100%;height:100%;object-fit:cover;}
.expert__mono{font-size:var(--heading-1);font-weight:300;color:var(--slate-3);}
.expert__name{display:flex;flex-direction:column;gap:2px;margin-top:14px;}
.expert__name b{font-size:var(--text-base);font-weight:500;}
.expert__name span{font-size:var(--text-small);color:var(--slate-2);letter-spacing:.04em;}

/* platforms */
.plat{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;}
/* the platform names used to sit in bordered boxes under the heading; the
   marks themselves now carry that on the right, with a line underneath */
.plat__marks{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right;}
.plat__row{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap;justify-content:flex-end;}
.plat__logo{height:clamp(38px,4vw,54px);width:auto;max-width:100%;display:block;}
.plat__cap{font-size:var(--text-small);line-height:1.6;color:var(--slate-2);margin:0;max-width:34ch;}
@media(max-width:700px){
  .plat__marks{align-items:flex-start;text-align:left;}
  .plat__row{justify-content:flex-start;}
}

/* the funnel, drawn as a run of stages */
.funnel{list-style:none;margin:clamp(24px,2.8vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);}
.funnel li{background:#fff;padding:18px 16px;display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--green);}
.funnel__n{font-size:var(--text-micro);letter-spacing:.16em;color:var(--slate-2);}
.funnel h3{font-size:var(--text-large);font-weight:500;line-height:1.3;}
.funnel p{font-size:var(--text-small);line-height:1.55;color:var(--slate);}
@media(max-width:1100px){.funnel{grid-template-columns:repeat(4,1fr);}}
@media(max-width:700px){.funnel{grid-template-columns:1fr;}}

/* FAQ questions carry an h3 inside the summary, styled as the summary */
.faq__q{display:inline;font:inherit;font-size:inherit;font-weight:inherit;margin:0;letter-spacing:inherit;line-height:inherit;}

/* ---------- navigation: logo, then the links straight after it, actions right ---------- */
@media(min-width:1341px){
  .nav__menu{margin-left:clamp(28px,3vw,48px);margin-right:auto;}
}
/* the section bar starts where the main menu's first link starts. The script
   on the home page measures that and sets --subx; the sum below (gutter, logo,
   header gap, menu lead-in) is only the fallback before it runs */
@media(min-width:1341px){
  .subnav__in{padding-left:var(--subx, calc(var(--gutter) + 182px + 14px + clamp(28px,3vw,48px)));}
}

/* the service boxes sit under the headline, as a compact row */
.hero__lead .hero__svc{margin-top:0;justify-content:center;}
.hero__lead .hero__svc li{flex:0 0 auto;}
/* the terms, set small and quiet under the trial, with the air below them */
.hero__note{margin:calc(-1 * clamp(14px,1.7vw,22px)) 0 0;max-width:none;font-size:var(--text-small);font-style:italic;font-weight:300;line-height:1.5;color:rgba(255,255,255,.62);}

/* The menu items are held apart by the gap alone; the hairline that used to
   sit between them is gone. Desktop only: below 1341px the menu is a list. */
@media(min-width:1341px){
  .nav__menu{--mg:clamp(22px,2.2vw,32px);gap:var(--mg);}
  .nav__menu > *{position:relative;}
}
/* the same on the section bar, a lighter line on the blue */
.subnav__in{--sg:clamp(22px,3vw,46px);gap:var(--sg);}
.subnav__in > a{position:relative;}
.subnav__in > a + a::before{
  content:"";position:absolute;left:calc(var(--sg) / -2);top:50%;
  width:1px;height:14px;transform:translateY(-50%);
  background:rgba(255,255,255,.34);pointer-events:none;
}
@media(max-width:600px){ .subnav__in{--sg:22px;} }

/* services and the industries we specialise in, one labelled row each */
.hero__tags{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:7px 14px;margin-top:clamp(16px,1.6vw,20px);
}
.hero__tagl{
  margin:0;font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);white-space:nowrap;
}
.hero__svc--ind li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.82);}

/* The portal: title, subtitle and the screen list in a narrow column on the
   left, a fifth of the width, and the chosen screen at 16:9 across the rest. */
.portal__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:12px;}
.portal__foot .portal__cap,.portal__foot .portal__more{margin:0;}
@media(min-width:1001px){
  .portal__grid{
    display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,4fr);
    gap:clamp(28px,3vw,48px);align-items:start;
  }
  /* the name always holds one line: the column is given a little more
     room and the title a size that fits it at every width, so the
     .keep nowrap can stand rather than being undone here */
  .portal__side .portal__tabs{flex-direction:column;flex-wrap:nowrap;}
  .portal__side .pt{width:100%;text-align:left;}
  .portal__main .portal__screen{margin-top:0;}
}

/* ---- under each chamber: the section on the left, its services and the KPIs
   that make up its score on the right ---- */
.fw__stage .eng__body{text-align:center;}
.fw__stage .eng__head{margin-bottom:12px;}
.fw__stage .eng__head .eng__t{margin-bottom:0;}
.fw__stage .eng__svcs{display:flex;flex-direction:column;gap:10px;}
/* each service folds open to show the KPIs its score is built from */
.fw__stage .eng__svcs{gap:6px;width:100%;max-width:250px;margin-inline:auto;text-align:left;}
.esvc > summary{list-style:none;}
.esvc > summary::-webkit-details-marker{display:none;}
.esvc__n{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:11.5px;font-weight:500;line-height:1.3;color:var(--black);
  border:1px solid var(--grey-1);padding:5px 8px;
  transition:color .25s,border-color .25s,background .25s;
}
.esvc__n:hover{border-color:var(--slate-3);}
.esvc__n:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.esvc__sc{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;}
.esvc__sc b{font-weight:500;}
.esvc__sc i,.esvc__k i{font-style:normal;font-weight:300;opacity:.55;}
.esvc__n svg{flex:0 0 auto;width:9px;height:6px;opacity:.6;transition:transform .2s ease;}
.esvc[open] > .esvc__n svg{transform:rotate(180deg);}
.esvc.is-hit > .esvc__n{background:var(--c,var(--state-bottleneck));
  border-color:var(--c,var(--state-bottleneck));color:#fff;}
.esvc__k{list-style:none;margin:0;padding:6px 0 4px 9px;display:flex;flex-direction:column;gap:3px;}
.esvc__khead{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:4px 8px;
  font-size:var(--text-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-3);
  padding:2px 0 3px 9px;}
.esvc__khead span:last-child{justify-self:end;}
.esvc__k li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:baseline;gap:0 7px;font-size:var(--text-micro);line-height:1.4;color:var(--slate);}
/* each KPI reads current, goal, then how far through the goal that is */
.esvc__cur{color:var(--black);font-variant-numeric:tabular-nums;}
.esvc__goal{color:var(--slate-2);font-variant-numeric:tabular-nums;}
.esvc__goal::before{content:'vs ';opacity:.6;}
.esvc__k li > b{justify-self:end;padding-left:12px;}
.esvc__kl{white-space:nowrap;}
.esvc__k b{font-weight:500;color:var(--black);font-variant-numeric:tabular-nums;transition:color .3s ease;}
.esvc__k b.is-low{color:var(--state-bottleneck);}
.fw__enginenote{margin-top:clamp(18px,2vw,26px);font-size:var(--text-small);line-height:1.55;color:var(--slate-2);}
/* on a phone the columns are too narrow for the KPIs, so only the services show */
@media(max-width:760px){
  .fw__stage .eng__body{text-align:center;}
  .fw__stage .eng__svcs{gap:4px;}
  .esvc__k,.esvc__sc,.esvc__n svg{display:none;}
  .esvc__n{justify-content:center;font-size:9.5px;font-weight:300;padding:3px 6px;pointer-events:none;}
}

/* ---- case studies with the client's testimonial on the same card ---- */
.case--cs{overflow:hidden;}
.case--cs:hover{border-color:var(--black);}
.case__media{position:relative;aspect-ratio:16/7;background:var(--grey-2);overflow:hidden;}
.case__media > img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.case--cs:hover .case__media > img{transform:scale(1.03);}
.case__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,2,2,0) 45%,rgba(2,2,2,.55) 100%);pointer-events:none;}
.case__logo{
  position:absolute;left:16px;bottom:14px;z-index:1;
  display:flex;align-items:center;justify-content:center;
  height:38px;min-width:92px;padding:6px 12px;background:#fff;
}
.case__logo img{max-height:24px;max-width:110px;object-fit:contain;filter:brightness(0);opacity:.8;display:block;}
.case__rev{
  position:absolute;right:16px;bottom:16px;z-index:1;text-align:right;
  font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75);
  display:flex;flex-direction:column;gap:2px;
}
.case__rev b{font-size:var(--text-label);letter-spacing:0;text-transform:none;font-weight:500;color:#fff;}
.case__rev b.is-todo{font-size:var(--text-small);color:rgba(255,255,255,.7);font-weight:400;}
/* the client industry sits opposite the mark, on the same bottom scrim */
.case__ind{
  position:absolute;right:16px;bottom:16px;z-index:1;text-align:right;
  /* the mark bottom-left is at most 150px wide, so stop short of it at
     every card width rather than trusting a percentage */
  max-width:calc(100% - 172px);
  font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;line-height:1.35;
  color:rgba(255,255,255,.9);
}
/* on narrow cards the column left for it is ~110px, so the longest single
   word ("accessories") needs a smaller setting to fit */
@media(max-width:1200px){.case__ind{font-size:12px;letter-spacing:.07em;}}
.case--cs .case__body{padding:20px 20px 18px;gap:14px;}
.case--cs .case__probe{display:flex;align-items:center;gap:8px;font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.case__prob{display:flex;flex-direction:column;gap:7px;}
.case--cs .case__block{display:block;font-size:var(--text-label);font-weight:500;line-height:1.35;color:var(--black);}
/* the box used to hold the place on the engine as a small-caps tag; it now
   holds the problem itself, so it is set as a phrase rather than a label */
.case--cs .case__block em{
  display:inline-block;font-style:normal;
  font-size:var(--text-label);font-weight:500;letter-spacing:0;text-transform:none;line-height:1.35;
  color:var(--blue);background:color-mix(in srgb, var(--blue) 9%, #fff);padding:5px 9px;
}
.case__res{background:var(--grey-3);border:1px solid var(--grey-1);padding:14px 16px 13px;display:flex;flex-direction:column;gap:6px;}
.case--cs .case__move{display:flex;align-items:baseline;gap:10px;font-size:clamp(30px,2.6vw,38px);line-height:1.05;letter-spacing:-0.02em;}
.case--cs .case__move b{font-weight:300;}
.case--cs .case__move b:first-child{color:var(--slate-2);}
.case--cs .case__move i{font-size:.5em;}
.case__resfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.case--cs .case__kpi{margin:0;font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--slate);}
.case--cs .case__period{display:inline-flex;align-items:center;gap:5px;font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--black);background:#fff;border:1px solid var(--grey-1);padding:3px 8px;}
.case--cs .case__period svg{width:11px;height:11px;}
.case__testi{position:relative;padding:4px 0 0 30px;}
.case__qmark{position:absolute;left:0;top:-6px;font-size:var(--heading-1);line-height:1;color:var(--blue);font-family:Georgia,serif;}
.case__quote{font-size:var(--text-label);line-height:1.55;color:var(--black);}
.case__who{display:flex;align-items:center;gap:10px;margin-top:10px;}
.case__pic{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--black);color:#fff;font-size:var(--text-micro);font-weight:500;letter-spacing:.04em;overflow:hidden;
}
.case__pic img{width:100%;height:100%;object-fit:cover;}
.case__whot{display:flex;flex-direction:column;gap:1px;min-width:0;}
.case__whot b{font-size:var(--text-small);font-weight:500;color:var(--black);}
.case__whot i{font-style:normal;font-size:var(--text-micro);line-height:1.4;color:var(--slate-2);}
.case--cs .case__link{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--grey-1);
  display:flex;align-items:center;justify-content:space-between;font-size:var(--text-small);color:var(--blue);
}
.case--cs .case__link svg{width:16px;height:16px;transition:transform .2s ease;}
.case--cs:hover .case__link svg{transform:translateX(3px);}
/* what is still to come from the client reads as a gap, not as content */
.case--cs .is-todo{color:var(--slate-2);font-weight:400;}
.case__quote.is-todo{font-style:italic;}
.case__pic.is-todo{border:1px dashed var(--slate-3);background:#fff;}

/* the carousel shows three cards at a time, sized from the width of the rail */
.case__rail{container-type:inline-size;}
.case__track .case--cs{flex:0 0 calc((100cqw - 48px) / 3);}
@media(max-width:999px){ .case__track .case--cs{flex-basis:calc((100cqw - 24px) / 2);} }
@media(max-width:600px){ .case__track .case--cs{flex-basis:86cqw;} }

/* when the script drives the carousel it replaces the CSS roll, and the rail
   can be grabbed and dragged */
.case__rail.is-js .case__track{animation:none;will-change:transform;}
.case__rail.is-js{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;}
.case__rail.is-drag{cursor:grabbing;}
.case__rail.is-js img{-webkit-user-drag:none;}

/* ---- the results page: the same case cards, laid out as a filterable grid ---- */
.cfilt{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(20px,2.4vw,28px);}
.cfilt__b{
  font:inherit;font-size:var(--text-small);font-weight:300;color:var(--slate);cursor:pointer;
  background:#fff;border:1px solid var(--grey-1);padding:9px 16px;
  transition:color .18s,border-color .18s,background .18s;
}
.cfilt__b:hover{color:var(--black);border-color:var(--slate-3);}
.cfilt__b.is-on{background:var(--black);border-color:var(--black);color:#fff;}
.cfilt__b:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.cases__grid--cs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin-top:clamp(18px,2vw,24px);
}
@media(max-width:999px){ .cases__grid--cs{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:600px){ .cases__grid--cs{grid-template-columns:1fr;} }

/* ---- what we believe, as a call to action on black ---- */
.diag--cta{background:var(--black);padding-block:0;border-block:1px solid rgba(255,255,255,.14);}
.diag--cta .belief{background:transparent;border-left:0;}
.diag--cta .belief__copy{padding:clamp(40px,4.6vw,64px) clamp(28px,3.6vw,52px) clamp(40px,4.6vw,64px) 0;}
.diag--cta .belief__lab{color:rgba(255,255,255,.5);}
/* This is a belief, not a section heading: it was set at --heading-2 and read
   as a title. As a quote it takes the site's own quote idiom - a hanging mark
   and a calmer size - with the call to action beneath it. */
.diag--cta .belief__quote{margin:0;position:relative;padding-left:clamp(26px,2.4vw,38px);}
.diag--cta .belief__qmark{position:absolute;left:0;top:-0.18em;
  font-size:var(--heading-1);line-height:1;color:var(--green);}
.diag--cta .belief__quote p{margin:0;color:#fff;font-size:var(--text-large);font-weight:300;
  line-height:1.55;letter-spacing:-0.008em;}
.diag--cta .cta-pair{margin-top:clamp(24px,2.8vw,36px);}
.diag--cta .belief__pic{min-height:clamp(300px,30vw,460px);}
@media(max-width:820px){
  .diag--cta .belief__copy{padding-right:0;}
  .diag--cta .belief__pic{margin-bottom:clamp(28px,6vw,40px);}
}

/* how we work: the engine named on the first line, the trial under it */
.fw__head h2 .fw__h2a{display:inline;}
/* the descriptor rides on the same line as the name, at reading weight so the
   product name still carries the heading */
.fw__head h2 .fw__h2b{display:inline;font-size:var(--text-large);font-weight:300;
  letter-spacing:0;color:var(--slate);}

/* the team photo runs in from the right edge of the page and fades into the
   black towards the middle, with the statement and buttons over the left */
.diag--cta{position:relative;overflow:hidden;}
.diag--cta .belief{grid-template-columns:minmax(0,1fr);position:relative;z-index:1;}
.diag--cta .belief__copy{max-width:min(640px,50%);padding:clamp(56px,6.4vw,100px) 0;}
.belief__bg{position:absolute;top:0;right:0;bottom:0;width:62%;margin:0;z-index:0;}
.belief__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 32%;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 58%);
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 58%);
}
@media(max-width:820px){
  .diag--cta .belief__copy{max-width:none;padding:clamp(48px,10vw,72px) 0;}
  .belief__bg{width:100%;opacity:.3;}
  .belief__bg img{-webkit-mask-image:none;mask-image:none;}
}

/* ---- the engine page: score your own engine ---- */
.ecalc{background:var(--grey-3);}
.ecalc .sec-head{max-width:none;}
.ecalc .sec-head .lede{max-width:var(--measure);}
.ecalc__stage{background:#fff;border:1px solid var(--grey-1);padding:clamp(24px,2.8vw,36px) clamp(18px,2.4vw,32px);margin-top:clamp(24px,2.8vw,34px);}
.ecalc .eng__svcs{max-width:none;}
.ecalc .esvc__k{padding:8px 0 4px;gap:7px;}
.ecalc .esvc__k li{display:grid;grid-template-columns:minmax(0,1fr) 84px 52px;align-items:center;gap:8px;}
.ecalc__lab{display:flex;flex-direction:column;gap:1px;min-width:0;}
.ecalc__lab span{font-size:var(--text-micro);color:var(--black);line-height:1.3;}
.ecalc__lab em{font-style:normal;font-size:var(--text-micro);color:var(--slate-2);}
.ecalc__in{display:flex;align-items:center;background:#fff;border:1px solid var(--grey-1);transition:border-color .15s;}
.ecalc__in:focus-within{border-color:var(--blue);}
.ecalc__in input{width:100%;min-width:0;border:0;background:transparent;padding:6px 7px;font:inherit;font-size:var(--text-small);color:var(--black);-moz-appearance:textfield;appearance:textfield;}
.ecalc__in input::-webkit-outer-spin-button,.ecalc__in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ecalc__in input::placeholder{color:var(--slate-3);}
.ecalc__in input:focus{outline:none;}
.ecalc__in i{font-style:normal;font-size:var(--text-micro);color:var(--slate-2);padding:0 7px 0 0;}
.ecalc__in i.pre{padding:0 0 0 7px;}
.ecalc__sc{font-size:var(--text-micro);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--slate-2);}
.ecalc__sc b{font-weight:500;color:var(--black);}
.ecalc__sc b.is-low{color:var(--state-bottleneck);}
.ecalc__sc i{font-style:normal;opacity:.55;}
.ecalc__actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:clamp(20px,2.4vw,28px);}
.ecalc__reset{font:inherit;font-size:var(--text-small);color:var(--slate);background:none;border:0;padding:8px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.ecalc__msg{font-size:var(--text-small);color:var(--state-bottleneck);}
/* the note runs the full width of the calculator, so it lands in fewer lines
   than the 68ch body measure allowed */
.ecalc__note{margin-top:12px;font-size:var(--text-small);line-height:1.55;color:var(--slate-2);max-width:none;}
/* the feedback, on black like every call to action */
.ecalc__out{
  margin-top:clamp(20px,2.4vw,28px);background:var(--black);color:#fff;
  padding:clamp(24px,3vw,40px) clamp(20px,3vw,40px);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;
}
.ecalc__score{display:flex;flex-direction:column;gap:6px;min-width:150px;}
.ecalc__score small{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.ecalc__score b{font-size:var(--heading-1);font-weight:300;line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;}
.ecalc__score b i{font-style:normal;font-size:.36em;color:rgba(255,255,255,.5);margin-left:4px;}
.ecalc__verdict{font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;align-self:flex-start;color:#fff;background:var(--vc,var(--state-healthy));}
.ecalc__fb h3{font-size:var(--heading-4);font-weight:400;line-height:1.35;color:#fff;margin-bottom:12px;}
.ecalc__fb p{font-size:var(--text-label);line-height:1.65;color:rgba(255,255,255,.78);margin-top:10px;}
.ecalc__fb p b{color:#fff;font-weight:500;}
.ecalc__secs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.ecalc__secs span{font-size:var(--text-small);color:#fff;border:1px solid rgba(255,255,255,.2);padding:5px 10px;display:inline-flex;align-items:center;gap:7px;}
.ecalc__secs span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dc,var(--state-healthy));}
.ecalc__fb .cta-pair{margin-top:20px;}
@media(max-width:1000px){
  .ecalc .eng__row{grid-template-columns:1fr;row-gap:28px;}
  .ecalc .eng__pipe{display:none;}
}
@media(max-width:700px){
  .ecalc__out{grid-template-columns:1fr;}
}
.ecalc .eng__unit{--c:var(--slate-3);}
.ecalc__stage.fw__stage{border-top:1px solid var(--grey-1);}
/* on a phone the calculator keeps its inputs, stacked one section under the next */
@media(max-width:760px){
  .ecalc .esvc__k{display:flex;}
  .ecalc .esvc__sc{display:inline;}
  .ecalc .esvc__n svg{display:block;}
  .ecalc .esvc__n{pointer-events:auto;justify-content:flex-start;font-size:11.5px;font-weight:500;padding:5px 8px;}
  .ecalc .eng__body{text-align:left;}
  .ecalc .eng__row{--cube:96px;}
}

/* ---- the portal page ---- */
.portal--journey{background:var(--grey-3);}
.portal--journey .pjourney{margin-top:clamp(18px,2.2vw,28px);}
.pareas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);margin-top:clamp(18px,2.2vw,28px);}
.parea{background:#fff;padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:6px;}
.parea h3{font-size:var(--text-large);font-weight:500;line-height:1.3;}
.parea p{font-size:var(--text-small);line-height:1.55;color:var(--slate);}
@media(max-width:900px){.pareas{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.pareas{grid-template-columns:1fr;}}

/* ---- the example blocks read as buttons: a hint, a pulse that runs across
   the ones not chosen, and a bar showing when the next example arrives.
   All of it stops once someone clicks one. ---- */
.fw__hint{display:flex;align-items:center;gap:7px;margin:2px 0 8px;font-size:var(--text-small);color:var(--blue);}
.fw__hint svg{width:17px;height:17px;flex:0 0 auto;transform-origin:50% 90%;animation:fwHand 1.6s ease-in-out infinite;}
@keyframes fwHand{0%,100%{transform:translate(0,0) rotate(0);}40%{transform:translate(2px,-3px) rotate(-8deg);}60%{transform:translate(2px,0) rotate(-8deg);}}
.fw__opt{position:relative;overflow:hidden;transition:color .18s,border-color .18s,background .18s,transform .18s,box-shadow .18s;}
.fw__opt:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(2,2,2,.35);}
.fw__opt:active{transform:translateY(0);}
.fw__tryit:not(.is-used) .fw__opt:not(.is-on){animation:fwNudge 3.2s ease-in-out infinite;}
.fw__tryit:not(.is-used) .fw__opt:nth-child(2){animation-delay:.4s;}
.fw__tryit:not(.is-used) .fw__opt:nth-child(3){animation-delay:.8s;}
.fw__tryit:not(.is-used) .fw__opt:nth-child(4){animation-delay:1.2s;}
@keyframes fwNudge{
  0%,55%,100%{box-shadow:0 0 0 0 rgba(34,74,154,0);border-color:var(--grey-1);}
  20%{box-shadow:0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent);border-color:var(--blue);color:var(--black);}
}
/* the bar on the chosen example fills in time with the automatic switch */
.fw__tryit:not(.is-used) .fw__opt.is-on::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--green);transform-origin:0 50%;animation:fwProg 6s linear forwards;
}
.fw__tryit:not(.is-used):hover .fw__opt.is-on::after{animation-play-state:paused;}
@keyframes fwProg{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.fw__tryit.is-used .fw__hint{visibility:hidden;}
@media(prefers-reduced-motion:reduce){
  .fw__hint svg,.fw__tryit:not(.is-used) .fw__opt:not(.is-on),.fw__tryit:not(.is-used) .fw__opt.is-on::after{animation:none;}
}

/* each benchmark can be overwritten with the visitor's own sector number */
.ecalc .esvc__k li{grid-template-columns:minmax(0,1fr) 82px 52px;}
.ecalc__lab > label{font-size:var(--text-micro);color:var(--black);line-height:1.3;cursor:pointer;}
.ecalc__bmrow{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:var(--text-micro);color:var(--slate-2);}
.ecalc__bmrow label{cursor:pointer;}
.ecalc__bmin{display:inline-flex;align-items:center;border-bottom:1px dashed var(--slate-3);transition:border-color .15s;}
.ecalc__bmin:focus-within,.ecalc__bmin:hover{border-bottom-color:var(--blue);}
.ecalc__bmin input{width:46px;border:0;background:transparent;padding:1px 2px;font:inherit;font-size:var(--text-micro);color:var(--black);-moz-appearance:textfield;appearance:textfield;}
.ecalc__bmin input::-webkit-outer-spin-button,.ecalc__bmin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ecalc__bmin input:focus{outline:none;}
.ecalc__bmin i{font-style:normal;font-size:var(--text-micro);color:var(--slate-2);}
.ecalc__bmin i.pre{padding:0;}

/* ---- the engine page questions: the heading and a way to ask on the left,
   the questions as numbered cards on the right ---- */
.efaq{background:var(--grey-3);}
.efaq__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:clamp(32px,5vw,88px);align-items:start;}
.efaq__side{position:sticky;top:calc(var(--navh,68px) + 32px);display:flex;flex-direction:column;gap:14px;}
.efaq__side h2{font-size:var(--heading-2);line-height:1.18;}
.efaq__lede{font-size:var(--text-label);line-height:1.65;color:var(--slate);max-width:40ch;}
.efaq__box{margin-top:clamp(10px,1.4vw,18px);background:var(--black);color:#fff;padding:clamp(20px,2.2vw,28px);}
.efaq__bt{font-size:var(--text-large);font-weight:500;color:#fff;}
.efaq__bs{margin-top:6px;font-size:var(--text-small);line-height:1.6;color:rgba(255,255,255,.65);}
.efaq__box .cta-pair{margin-top:16px;}
.efaq__box .cta-pair .btn{flex:1 1 auto;justify-content:center;}
.efaq .faqs{margin-top:0;border-top:0;counter-reset:q;display:flex;flex-direction:column;gap:10px;}
.efaq .faq{background:#fff;border:1px solid var(--grey-1);counter-increment:q;transition:border-color .2s ease,box-shadow .2s ease;}
.efaq .faq:hover{border-color:var(--slate-3);}
.efaq .faq[open]{border-color:var(--black);box-shadow:0 10px 26px -18px rgba(2,2,2,.4);}
.efaq .faq summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:clamp(18px,1.8vw,22px) clamp(18px,2vw,26px);border:0;
  font-size:var(--text-base);font-weight:500;line-height:1.35;color:var(--black);
}
.efaq .faq summary::before{
  content:counter(q, decimal-leading-zero);font-size:var(--text-micro);font-weight:400;letter-spacing:.14em;
  color:var(--slate-2);font-variant-numeric:tabular-nums;
}
.efaq .faq summary::after{
  content:"+";position:static;transform:none;border:0;width:28px;height:28px;display:grid;place-items:center;
  font-size:var(--text-large);font-weight:300;line-height:1;color:var(--black);border:1px solid var(--grey-1);border-radius:50%;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.efaq .faq[open] summary::after{content:"\2212";transform:none;background:var(--black);color:#fff;border-color:var(--black);}
.efaq .faq summary:hover{color:var(--black);}
.efaq .faq p{padding:0 clamp(18px,2vw,26px) clamp(20px,2vw,24px) calc(clamp(18px,2vw,26px) + 36px);font-size:var(--text-label);line-height:1.7;max-width:none;}
@media(max-width:900px){
  .efaq__in{grid-template-columns:1fr;}
  .efaq__side{position:static;}
  .efaq .faq p{padding-left:clamp(18px,2vw,26px);}
}

/* a switch on each service: off greys it out and leaves it out of the score */
.ecalc__tog{position:relative;display:inline-flex;flex:0 0 auto;width:30px;height:17px;cursor:pointer;}
.ecalc__tog input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.ecalc__tog span{position:absolute;inset:0;border-radius:17px;background:var(--slate-3);transition:background .2s ease;}
.ecalc__tog span::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(2,2,2,.3);transition:transform .2s ease;}
.ecalc__tog input:checked + span{background:var(--green);}
.ecalc__tog input:checked + span::after{transform:translateX(13px);}
.ecalc__tog input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px;}
.ecalc .esvc__n{gap:10px;}
.ecalc .esvc.is-off .esvc__n > span:first-child,.ecalc .esvc.is-off .esvc__sc{opacity:.45;text-decoration:line-through;text-decoration-thickness:1px;}
.ecalc .esvc.is-off .esvc__n{background:var(--grey-3);}
.ecalc .esvc.is-off .esvc__k{opacity:.4;filter:grayscale(1);pointer-events:none;}
.ecalc .esvc.is-off .ecalc__in{background:var(--grey-3);}

/* the plan in the feedback: every weak section, in the order to fix them */
.ecalc__lab2{margin-top:6px !important;font-size:var(--text-micro) !important;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5) !important;}
.ecalc__plan{list-style:none;margin:10px 0 4px;padding:0;display:flex;flex-direction:column;}
.ecalc__plan li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid rgba(255,255,255,.14);}
.ecalc__plan li:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.ecalc__pn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--dc);color:#fff;font-size:var(--text-small);font-weight:500;}
.ecalc__pt{display:block;color:#fff;font-size:var(--text-label);font-weight:500;}
.ecalc__plan p{margin-top:4px !important;font-size:var(--text-label) !important;}

/* up and down arrows beside every number */
.ecalc .esvc__k li{grid-template-columns:minmax(0,1fr) 104px 52px;}
.ecalc__in{align-items:stretch;}
.ecalc__in > i{align-self:center;}
.ecalc__step{display:flex;flex-direction:column;flex:0 0 auto;border-left:1px solid var(--grey-1);}
.ecalc__step button{flex:1 1 0;display:grid;place-items:center;width:20px;min-height:12px;padding:0;border:0;background:transparent;color:var(--slate-2);cursor:pointer;transition:background .15s,color .15s;}
.ecalc__step button:hover{background:var(--grey-3);color:var(--black);}
.ecalc__step button:active{background:var(--grey-1);}
.ecalc__step button + button{border-top:1px solid var(--grey-1);}
.ecalc__step svg{width:8px;height:5px;}
.ecalc__bmin .ecalc__step{border-left:0;margin-left:3px;}
.ecalc__bmin .ecalc__step button{width:14px;min-height:8px;}
.ecalc__bmin .ecalc__step button + button{border-top:0;}
.ecalc__bmin .ecalc__step svg{width:7px;height:4px;}
.ecalc .esvc.is-off .ecalc__step{pointer-events:none;opacity:.5;}

/* ---- pricing: the plan builder, as it is in the portal ---- */
.pbuild{background:var(--grey-3);padding-top:clamp(28px,3.4vw,48px);}
.pb__bar{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-end;margin-bottom:clamp(18px,2vw,24px);}
.pb__group{display:flex;flex-direction:column;gap:8px;}
.pb__lab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.pb__regions,.pb__tabs{display:flex;flex-wrap:wrap;gap:6px;}
.pb__regions button,.pb__tabs button{
  font:inherit;font-size:var(--text-small);font-weight:300;color:var(--slate);cursor:pointer;
  background:#fff;border:1px solid var(--grey-1);padding:9px 14px;transition:color .18s,border-color .18s,background .18s;
}
.pb__regions button i{font-style:normal;color:var(--slate-2);margin-left:4px;}
.pb__regions button:hover,.pb__tabs button:hover{color:var(--black);border-color:var(--slate-3);}
.pb__regions button.is-on,.pb__tabs button.is-on{background:var(--black);border-color:var(--black);color:#fff;}
.pb__regions button.is-on i{color:rgba(255,255,255,.6);}
.pb__panel{display:flex;flex-direction:column;gap:14px;}
.pb__card{background:#fff;border:1px solid var(--grey-1);}
.pb__card--rec{border-color:color-mix(in srgb, var(--green) 45%, var(--grey-1));}
.pb__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:16px clamp(16px,2vw,24px);border-bottom:1px solid var(--grey-1);}
.pb__head b{font-size:var(--text-base);font-weight:500;}
.pb__head span{font-size:var(--text-small);color:var(--slate-2);}
.pb__card--rec .pb__head{background:color-mix(in srgb, var(--green) 7%, #fff);}
.pb__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) minmax(120px,.6fr);gap:16px;align-items:center;padding:14px clamp(16px,2vw,24px);border-top:1px solid var(--grey-1);transition:background .2s;}
.pb__head + .pb__row{border-top:0;}
.pb__row.is-on{background:color-mix(in srgb, var(--green) 5%, #fff);}
.pb__name{display:flex;flex-direction:column;gap:2px;}
.pb__name b{font-size:var(--text-label);font-weight:500;}
.pb__name span{font-size:var(--text-small);color:var(--slate-2);line-height:1.45;}
.pb__ctl{display:flex;align-items:center;gap:12px;}
.pb__hint{font-size:var(--text-small);color:var(--slate-2);line-height:1.4;}
.pb__qty{display:inline-flex;align-items:stretch;border:1px solid var(--grey-1);background:#fff;flex:0 0 auto;}
.pb__qty button{width:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--slate);cursor:pointer;transition:background .15s,color .15s;}
.pb__qty button:hover{background:var(--grey-3);color:var(--black);}
.pb__qty svg{width:11px;height:11px;}
.pb__qty input{width:46px;border:0;border-inline:1px solid var(--grey-1);text-align:center;font:inherit;font-size:var(--text-label);padding:8px 0;-moz-appearance:textfield;appearance:textfield;}
.pb__qty input::-webkit-outer-spin-button,.pb__qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pb__qty input:focus{outline:2px solid var(--blue);outline-offset:-2px;}
.pb__ctl select{font:inherit;font-size:var(--text-small);padding:8px 10px;border:1px solid var(--grey-1);background:#fff;max-width:100%;min-width:0;flex:1 1 auto;}
.pb__sum{text-align:right;display:flex;flex-direction:column;gap:2px;}
.pb__sum b{font-size:var(--text-base);font-weight:500;font-variant-numeric:tabular-nums;}
.pb__sum span{font-size:var(--text-small);color:var(--slate-2);}
.pb__sum i,.pb__big i,.pb__total i,.pb__seg i{font-style:normal;}
.pb__note{font-size:var(--text-small);color:var(--slate-2);}
.pb__brand{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--grey-1);}
.pb__brand > div{background:#fff;padding:18px clamp(16px,2vw,24px);display:flex;flex-direction:column;gap:4px;}
.pb__big{font-size:var(--heading-2);font-weight:300;letter-spacing:-0.02em;line-height:1.1;}
.pb__brand span{font-size:var(--text-small);color:var(--slate-2);}
.pb__apps{display:flex;flex-direction:column;}
.pb__app{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px clamp(16px,2vw,24px);border-top:1px solid var(--grey-1);}
.pb__app:first-child{border-top:0;}
.pb__app > span{font-size:var(--text-label);}
.pb__seg{display:inline-flex;border:1px solid var(--grey-1);}
.pb__seg label{position:relative;cursor:pointer;}
.pb__seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;}
.pb__seg span{display:block;font-size:var(--text-small);color:var(--slate);padding:7px 11px;border-left:1px solid var(--grey-1);white-space:nowrap;transition:background .15s,color .15s;}
.pb__seg label:first-child span{border-left:0;}
.pb__seg input:checked + span{background:var(--black);color:#fff;}
.pb__seg input:focus-visible + span{outline:2px solid var(--blue);outline-offset:-2px;}
/* the totals, on black like every call to action */
.pb__total{
  margin-top:14px;background:var(--black);color:#fff;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px clamp(24px,3vw,44px);
  padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px);
  position:sticky;bottom:12px;z-index:5;box-shadow:0 18px 40px -24px rgba(2,2,2,.6);
}
.pb__tl{display:flex;flex-direction:column;gap:3px;}
.pb__tl span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.pb__tl b{font-size:clamp(20px,2vw,26px);font-weight:400;font-variant-numeric:tabular-nums;}
.pb__tl em{font-style:normal;}
.pb__tl small{font-size:13px;color:rgba(255,255,255,.55);}
.pb__tl--due b{color:var(--green);}
.pb__total .cta-pair{margin-left:auto;}
@media(max-width:860px){
  .pb__row{grid-template-columns:minmax(0,1fr);gap:10px;}
  .pb__row > *{min-width:0;}
  .pb__ctl{flex-wrap:wrap;}
  .pb__ctl select{width:100%;flex:1 1 100%;}
  .pb__sum{text-align:left;flex-direction:row;gap:10px;align-items:baseline;}
  .pb__brand{grid-template-columns:1fr;}
  .pb__app{grid-template-columns:1fr;}
  .pb__seg{flex-wrap:wrap;}
  .pb__total{position:static;}
  .pb__total .cta-pair{margin-left:0;width:100%;}
}
/* the hidden attribute wins over the layout rules above */
.pb__panel[hidden],.pb__tl[hidden]{display:none;}

/* The Ecommerce Engine and The Obsidian Portal as black boxes beside the trial
   button; in the mobile menu they stay in the list */
.nav__act{gap:8px;}
.nav__act .nav__login{margin-left:10px;}

/* ---- Resources dropdown: article covers and the portal's calculators ---- */
.nav__panel--res{width:min(860px,92vw);padding:22px 24px 10px;}
.rpan{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:28px;}
.rpan__col{display:flex;flex-direction:column;min-width:0;}
.rpan__col--tools{border-left:1px solid var(--grey-1);padding-left:24px;}
.rpan__arts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:4px;}
.rart{display:flex;flex-direction:column;gap:6px;color:var(--black);}
.rart__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--grey-3);border:1px solid var(--grey-1);}
.rart__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.rart:hover .rart__img img{transform:scale(1.04);}
/* the whole headline shows: the card grows to fit it rather than cutting it */
.rart b{font-size:var(--text-small);font-weight:500;line-height:1.35;}
.rart:hover b{color:var(--blue);}
.rart > span:last-child{font-size:var(--text-micro);color:var(--slate-2);}
.rpan__grp{margin:10px 0 4px;font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.rpan__grp:first-of-type{margin-top:4px;}
.rtool{display:flex;flex-direction:column;gap:2px;padding:9px 10px;margin:0 -10px;color:var(--black);transition:background .15s;}
.rtool:hover{background:var(--grey-3);}
.rtool b{font-size:var(--text-small);font-weight:500;}
.rtool span{font-size:var(--text-micro);color:var(--slate-2);line-height:1.4;}
.nav__panel--res .nav__panelfoot{margin-top:auto;padding-top:14px;}
@media(max-width:1340.98px){
  .nav__panel--res{width:auto;padding:12px 0 6px;}
  .rpan{grid-template-columns:1fr;gap:10px;}
  .rpan__col--tools{border-left:0;padding-left:0;}
  .rpan__arts{grid-template-columns:1fr;gap:6px;}
  .rart__img{display:none;}
}

/* the covers carry their own writing, so they keep their square shape everywhere */
.rpan__arts{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.rart__img{aspect-ratio:1/1;background:#fff;}
.rart__img img{object-fit:contain;}
.rart b{font-size:var(--text-small);}

/* ---- articles page ---- */
.alist{background:var(--grey-3);padding-top:clamp(24px,3vw,40px);}
.agrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:clamp(18px,2vw,26px);}
@media(max-width:1100px){.agrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:760px){.agrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:460px){.agrid{grid-template-columns:1fr;}}
.acv{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--grey-1);padding:12px 12px 16px;color:var(--black);transition:border-color .2s,box-shadow .2s;}
.acv:hover{border-color:var(--black);box-shadow:0 14px 30px -22px rgba(2,2,2,.45);}
.acv[hidden]{display:none;}
.acv__img{display:block;aspect-ratio:1/1;overflow:hidden;background:#fff;}
.acv__img img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .4s ease;}
.acv:hover .acv__img img{transform:scale(1.03);}
.acv__img--type{background:var(--black);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(14px,1.6vw,20px);}
.acv__brand{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.acv__tt{font-size:var(--heading-4);line-height:1.2;letter-spacing:-0.01em;}
.acv__meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:var(--text-micro);color:var(--slate-2);}
.acv__meta em{font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
.acv__t{font-size:var(--text-label);font-weight:500;line-height:1.35;}
.acv:hover .acv__t{color:var(--blue);}

/* ---- tools page ---- */
.tools{background:var(--grey-3);padding-top:clamp(24px,3vw,40px);}
.tgroup{font-size:var(--text-micro);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);margin:clamp(22px,2.6vw,34px) 0 12px;}
.tgroup:first-child{margin-top:0;}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);}
@media(max-width:900px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.tgrid{grid-template-columns:1fr;}}
.tcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--grey-1);padding:clamp(18px,2vw,24px);color:var(--black);transition:border-color .2s,box-shadow .2s;}
.tcard:hover{border-color:var(--black);box-shadow:0 14px 30px -22px rgba(2,2,2,.45);}
.tcard b{font-size:var(--text-base);font-weight:500;line-height:1.3;}
.tcard__d{font-size:var(--text-small);line-height:1.55;color:var(--slate);}
.tcard__tag{align-self:flex-start;font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--green);background:color-mix(in srgb, var(--green) 10%, #fff);padding:3px 8px;}
.tcard__tag--portal{color:var(--blue);background:color-mix(in srgb, var(--blue) 10%, #fff);}
.tcard__go{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:8px;font-size:var(--text-small);color:var(--blue);}
.tcard__go svg{width:15px;height:15px;transition:transform .2s ease;}
.tcard:hover .tcard__go svg{transform:translateX(3px);}

/* the dropdown arrow sits on the middle of the lower case letters, not the line box */
.nav__dropbtn svg{position:relative;top:1px;}

/* ---- about: the story, the awards and the contact form on one page ---- */
.ahero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center;}
.ahero__pic{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.14);}
.ahero__pic img{width:100%;height:auto;display:block;}
.aintro{background:#fff;}
.aintro__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;}
.aintro__text p{font-size:var(--text-base);line-height:1.75;color:var(--slate);margin-top:14px;}
.aintro__text p:first-child{margin-top:0;font-size:var(--heading-4);line-height:1.55;color:var(--black);}
.aintro__text b{color:var(--black);font-weight:500;}
.agal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.agal__i{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--grey-3);}
.agal__i:first-child{grid-column:1 / -1;aspect-ratio:16/8;}
.agal__i img{width:100%;height:100%;object-fit:cover;display:block;}
.aclients{background:var(--grey-3);}
.alogos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);margin-top:clamp(20px,2.4vw,30px);}
.alogo{background:#fff;display:grid;place-items:center;padding:18px;aspect-ratio:2/1;}
.alogo img{max-width:100%;max-height:44px;object-fit:contain;filter:brightness(0);opacity:.72;}
.ayears{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(20px,2.4vw,30px);}
.ayear{background:#fff;border:1px solid var(--grey-1);padding:clamp(18px,2vw,24px);}
.ayear__y{font-size:var(--heading-2);font-weight:300;letter-spacing:-0.02em;}
.ayear ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ayear li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;font-size:var(--text-small);line-height:1.5;color:var(--slate);}
.ayear li svg{width:14px;height:14px;margin-top:3px;color:var(--green);}
.afounders{background:var(--black);color:#fff;}
.afounders__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center;}
.afounders__pic{margin:0;overflow:hidden;}
.afounders__pic img{width:100%;height:auto;display:block;}
.afounders .eyebrow{color:rgba(255,255,255,.55);}
.afounders blockquote{margin:14px 0 0;font-size:var(--heading-3);line-height:1.5;font-weight:300;color:#fff;}
.afounders__by{display:flex;flex-wrap:wrap;gap:12px 36px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);}
.afounders__by span{display:flex;flex-direction:column;gap:2px;font-size:var(--text-small);color:rgba(255,255,255,.6);}
.afounders__by b{font-size:var(--text-label);font-weight:500;color:#fff;}
.astory{background:#fff;}
.astory__list{list-style:none;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-top:2px solid var(--black);}
.astory__i{padding:18px 18px 0 0;position:relative;}
.astory__i::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #fff;}
.astory__i:last-child::before{background:#fff;border-color:var(--slate-3);}
.astory__y{font-size:var(--text-small);letter-spacing:.18em;color:var(--slate-2);}
.astory__i h3{font-size:var(--text-large);font-weight:500;margin:4px 0 8px;}
.astory__i p{font-size:var(--text-small);line-height:1.6;color:var(--slate);margin-top:8px;}
.aawards{background:var(--grey-3);}
.aawards__head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,60px);align-items:start;}
.aawards__text p{font-size:var(--text-label);line-height:1.7;color:var(--slate);margin-top:12px;}
.aawards__text p:first-child{margin-top:0;}
.awds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,18px);margin-top:clamp(22px,2.6vw,34px);}
.awd{background:#fff;border:1px solid var(--grey-1);padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:12px;}
.awd__img{display:grid;place-items:center;aspect-ratio:4/3;background:var(--grey-3);}
.awd__img img{max-width:80%;max-height:80%;object-fit:contain;}
.awd p{font-size:var(--text-label);line-height:1.5;color:var(--black);}
.acontact{background:#fff;}
.acontact__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start;}
.acontact h2{font-size:var(--heading-2);line-height:1.25;margin-top:8px;}
.ainfo{display:grid;gap:18px;margin-top:22px;}
.ainfo__l{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);margin-bottom:4px;}
.ainfo p,.ainfo a{font-size:var(--text-label);line-height:1.6;color:var(--black);}
.ainfo a{color:var(--blue);}
.ainfo__resp{margin-top:22px;font-size:var(--text-small);line-height:1.6;color:var(--slate);}
.ainfo__resp b{color:var(--black);font-weight:500;}
.aform{background:var(--grey-3);border:1px solid var(--grey-1);padding:clamp(20px,2.4vw,32px);}
.aform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.aform__f{display:flex;flex-direction:column;gap:6px;font-size:var(--text-small);color:var(--slate);}
.aform__f--full{grid-column:1 / -1;}
.aform__f input,.aform__f select,.aform__f textarea{font:inherit;font-size:var(--text-label);color:var(--black);background:#fff;border:1px solid var(--grey-1);padding:10px 12px;width:100%;}
.aform__f textarea{resize:vertical;min-height:110px;line-height:1.55;}
.aform__f input:focus,.aform__f select:focus,.aform__f textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;}
.aform__c{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;margin-top:14px;font-size:var(--text-small);line-height:1.55;color:var(--slate);cursor:pointer;}
.aform__c input{margin-top:3px;}
.aform .is-bad input,.aform .is-bad select,.aform .is-bad textarea{border-color:var(--state-bottleneck);}
.aform__c.is-bad span{color:var(--state-bottleneck);}
.aform__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px;}
.aform__msg{font-size:var(--text-small);color:var(--slate);}
@media(max-width:1000px){
  .ahero__in,.aintro__in,.afounders__in,.aawards__head,.acontact__in{grid-template-columns:1fr;}
  .alogos{grid-template-columns:repeat(4,minmax(0,1fr));}
  .ayears{grid-template-columns:1fr;}
  .astory__list{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--black);}
  .astory__i{padding:0 0 22px 22px;}
  .astory__i::before{top:2px;left:-7px;}
  .awds{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){
  .alogos{grid-template-columns:repeat(3,minmax(0,1fr));}
  .aform__grid{grid-template-columns:1fr;}
  .awds{grid-template-columns:1fr;}
}

/* ---- pricing explained: each price, what it covers, then its table ---- */
.phow__jump{margin-top:14px;font-size:var(--text-label);}
.phow__jump a{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4);}
.phow{background:#fff;}
.phow .sec-head{max-width:none;}
.phow .sec-head .lede{max-width:var(--measure);}
.phow__steps{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--grey-1);border:1px solid var(--grey-1);}
.phow__steps li{background:var(--grey-3);padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:6px;}
.phow__n{font-size:var(--text-micro);letter-spacing:.18em;color:var(--slate-2);font-variant-numeric:tabular-nums;}
.phow__steps h3{font-size:var(--text-large);font-weight:500;}
.phow__steps p{font-size:var(--text-small);line-height:1.55;color:var(--slate);}
.phow__h{font-size:var(--heading-3);margin:clamp(34px,4vw,54px) 0 0;}
.phow__list{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--grey-1);}
.phow__svc{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3.4vw,56px);padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--grey-1);align-items:start;}
.phow__tag{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--green);}
.phow__copy h3{font-size:var(--heading-4);font-weight:500;margin-top:4px;}
.phow__price{margin-top:6px;font-size:var(--text-label);color:var(--slate-2);}
.phow__price b{font-size:var(--heading-3);font-weight:400;color:var(--black);letter-spacing:-0.01em;}
.phow__copy p:not(.phow__tag):not(.phow__price){font-size:var(--text-label);line-height:1.7;color:var(--slate);margin-top:10px;}
.phow__copy b{color:var(--black);font-weight:500;}
.phow i[data-cur]{font-style:normal;}
.ptab{overflow-x:auto;border:1px solid var(--grey-1);}
.ptab table{width:100%;border-collapse:collapse;font-size:var(--text-label);}
.ptab th{text-align:left;font-size:var(--text-micro);font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);background:var(--grey-3);padding:10px 14px;border-bottom:1px solid var(--grey-1);}
.ptab td{padding:10px 14px;border-bottom:1px solid var(--grey-1);font-variant-numeric:tabular-nums;}
.ptab tr:last-child td{border-bottom:0;}
.ptab th:last-child,.ptab td:last-child{text-align:right;}
.ptab td:last-child{font-weight:500;}
.ptab tbody tr:hover td{background:color-mix(in srgb, var(--green) 5%, #fff);}
.phow__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);margin-top:clamp(34px,4vw,54px);}
.phow__card{background:var(--grey-3);border:1px solid var(--grey-1);padding:clamp(18px,2vw,26px);}
.phow__card h3{font-size:var(--text-large);font-weight:500;}
.phow__card p,.phow__card li{font-size:var(--text-label);line-height:1.65;color:var(--slate);}
.phow__card p{margin-top:10px;}
.phow__card b{color:var(--black);font-weight:500;}
.phow__card ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;}
@media(max-width:1000px){
  .phow__steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .phow__svc{grid-template-columns:1fr;}
  .phow__grid{grid-template-columns:1fr;}
}
@media(max-width:560px){ .phow__steps{grid-template-columns:1fr;} }

/* ---- engine page: How we work sits inside the black hero, as a white panel ---- */
.ehero .svchero__in{padding-block:clamp(24px,2.6vw,40px) clamp(44px,5vw,72px);}
.ehero .svchero__lede{max-width:56ch;}
.fw.ehero__panel{
  background:#fff;color:var(--black);
  margin-top:clamp(28px,3.2vw,44px);
  padding:clamp(22px,2.6vw,36px) clamp(18px,2.4vw,34px) clamp(24px,2.8vw,38px);
}
.svchero .ehero__panel .eyebrow{color:var(--blue);}
.ehero__panel .fw__head h2{color:var(--black);font-size:var(--heading-3);max-width:none;margin-top:0;}
.ehero .svchero__cta{margin-top:clamp(24px,2.8vw,34px);}
/* the engine's pipe tails stay inside the white panel on small screens */
.fw.ehero__panel{overflow:hidden;}
.ehero__panel .fw__head{margin-bottom:4px;}

/* the ad budget row: an input, not a KPI, so it carries no goal and no score */
.ecalc__budget .ecalc__bmrow{color:var(--slate-2);font-style:italic;}
.ecalc__sc--na{font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-3);}
.ecalc__budget{padding-bottom:6px;margin-bottom:2px;border-bottom:1px dashed var(--grey-1);}
.ecalc__bmin input{width:58px;}

/* ---- the free trial page: details first, then the booking calendar ---- */
.trhero__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:start;}
.trhero__list{list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.trhero__list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:var(--text-label);line-height:1.55;color:rgba(255,255,255,.78);}
.trhero__list svg{width:16px;height:16px;margin-top:3px;color:var(--green);}
.trcard{background:#fff;color:var(--black);padding:clamp(20px,2.6vw,34px);scroll-margin-top:calc(var(--navh,68px) + 16px);}
.trsteps{list-style:none;margin:0 0 clamp(18px,2vw,24px);padding:0 0 16px;display:flex;gap:22px;border-bottom:1px solid var(--grey-1);}
.trsteps li{display:flex;align-items:center;gap:9px;font-size:var(--text-small);color:var(--slate-2);}
.trsteps li span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:var(--text-small);border:1px solid var(--grey-1);color:var(--slate-2);}
.trsteps li.is-on{color:var(--black);font-weight:500;}
.trsteps li.is-on span{background:var(--black);border-color:var(--black);color:#fff;}
.trsteps li.is-done span{background:var(--green);border-color:var(--green);color:#fff;}
.trform__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.trform .aform__f input,.trform .aform__f select{background:#fff;}
.trform__hint{font-style:normal;font-size:var(--text-micro);color:var(--slate-2);}
.trform .is-bad input,.trform .is-bad select{border-color:var(--state-bottleneck);}
.trform .is-bad > span{color:var(--state-bottleneck);}
.trcal__hi{font-size:var(--text-base);font-weight:500;margin-bottom:12px;}
.trcal__box{height:1100px;border:1px solid var(--grey-1);background:var(--grey-3);transition:height .25s ease;overflow:hidden;}
.trcal__box iframe{display:block;width:100%;height:100% !important;border:0;}
.trcal__box .calendly-inline-widget{height:100% !important;}
.trcal__alt{margin-top:10px;font-size:var(--text-small);color:var(--slate);}
.trcal__alt a{color:var(--blue);}
@media(max-width:1000px){ .trhero__in{grid-template-columns:1fr;} }
@media(max-width:560px){ .trform__grid{grid-template-columns:1fr;} }

/* the initiation meeting agenda, beside the form */
.trhero h1{max-width:none;margin-top:0;font-size:var(--heading-2);line-height:1.12;}
.trhero h1 .trh1{display:block;}
/* the title now sets at the shared heading size, so it wraps rather than
   being held to one line and overrunning its column */
.tragenda{margin-top:clamp(24px,2.8vw,34px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid rgba(255,255,255,.14);}
.tragenda__lab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.tragenda__who{display:flex;align-items:center;gap:12px;margin-top:14px;}
.tragenda__who img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid rgba(255,255,255,.2);}
.tragenda__who p{font-size:var(--text-label);line-height:1.5;color:rgba(255,255,255,.78);}
.tragenda__who b{color:#fff;font-weight:500;}
.tragenda__list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.tragenda__list li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;}
.tragenda__n{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:var(--text-small);color:#fff;border:1px solid rgba(255,255,255,.3);}
.tragenda__list li:last-child .tragenda__n{background:var(--green);border-color:var(--green);}
.tragenda__list b{display:block;font-size:var(--text-label);font-weight:500;color:#fff;line-height:1.35;}
.tragenda__list p{font-size:var(--text-small);line-height:1.5;color:rgba(255,255,255,.62);margin-top:2px;}
.tragenda__link{display:inline-block;margin-top:16px;font-size:var(--text-small);color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4);}
/* who qualifies, folded under the agenda */
.trqual{margin-top:18px;border-top:1px solid rgba(255,255,255,.14);}
.trqual summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;font-size:var(--text-label);color:#fff;}
.trqual summary::-webkit-details-marker{display:none;}
.trqual summary svg{width:12px;height:8px;color:rgba(255,255,255,.6);transition:transform .2s ease;}
.trqual[open] summary svg{transform:rotate(180deg);}
.trqual summary:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.trqual__body{padding:0 0 6px;}
.trqual__body p{font-size:var(--text-label);line-height:1.6;color:rgba(255,255,255,.75);}
.trqual__lab{margin-top:12px;font-size:var(--text-micro) !important;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5) !important;}
.trqual__body ul{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;}
.trqual__body li{font-size:var(--text-small);line-height:1.5;color:rgba(255,255,255,.75);}
.tragenda__dur{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:var(--text-small);color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.18);padding:6px 12px;}
.tragenda__dur svg{width:15px;height:15px;color:var(--green);}
.tragenda__dur b{color:#fff;font-weight:500;}
/* the trial page starts closer to the menu */
.trhero .svchero__in{padding-top:clamp(24px,2.6vw,40px);}

/* every page but the home page opens with the same space under the menu */
.ahero__in{align-items:start;padding-block:clamp(24px,2.6vw,40px) clamp(48px,5.5vw,78px);}

/* ---- single article, on the Semrush model: light hero, the article beside a
   sticky sidebar, trial boxes, a slide-in trial pop-up ---- */
.blog__progress{position:sticky;top:var(--navh,68px);z-index:50;height:3px;background:transparent;}
.blog__progress span{display:block;height:100%;width:0;background:var(--green);transition:width .1s linear;}
.blog__hero{background:var(--grey-3);border-bottom:1px solid var(--grey-1);padding:calc(68px + clamp(24px,2.6vw,40px) - 3px) 0 clamp(30px,3.4vw,46px);}
.blog__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--text-small);color:var(--slate-2);}
.blog__crumbs a{color:var(--slate);}
.blog__crumbs a:hover{color:var(--blue);}
.blog__cat{margin-top:18px;font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--blue);}
.blog__hero h1{margin-top:10px;max-width:24ch;font-size:var(--heading-1);line-height:1.1;letter-spacing:-0.02em;}
.blog__stand{margin-top:16px;max-width:var(--measure);font-size:var(--text-large);line-height:1.6;color:var(--slate);}
.blog__meta{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:18px;font-size:var(--text-small);color:var(--slate-2);}
.blog__meta span+span::before{content:"";display:inline-block;width:1px;height:12px;background:var(--grey-1);margin:0 12px;vertical-align:-1px;}
.blog__meta b{color:var(--black);font-weight:500;}
.blog__grid{display:grid;grid-template-columns:minmax(0,820px) 300px;justify-content:space-between;gap:clamp(32px,5vw,80px);align-items:start;padding-block:clamp(34px,4vw,56px);}
.blog__main{min-width:0;}
.blog__sec{padding:0;scroll-margin-top:calc(var(--navh,68px) + 24px);}
.blog__sec + .blog__sec{margin-top:clamp(28px,3vw,40px);}
.blog__sec h2{font-size:var(--heading-2);line-height:1.2;letter-spacing:-0.015em;margin-bottom:14px;}
.blog__sec h3{font-size:var(--heading-4);margin:22px 0 10px;}
.blog__sec p,.blog__sec li{font-size:var(--text-base);line-height:1.75;color:var(--slate);}
.blog__sec p+p{margin-top:14px;}
.blog__sec strong,.blog__sec b{color:var(--black);font-weight:500;}
.blog__sec ul,.blog__sec ol{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px;}
.blog__sec a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.blog__sec table{width:100%;border-collapse:collapse;margin-top:16px;font-size:var(--text-label);}
.blog__sec th,.blog__sec td{padding:10px 14px;border-bottom:1px solid var(--grey-1);text-align:left;}
.blog__sec th{background:var(--grey-3);font-weight:500;}
.blog__inline{margin:clamp(28px,3vw,40px) 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 28px;align-items:center;background:var(--black);color:#fff;padding:clamp(20px,2.2vw,28px);}
.blog__it{font-size:var(--text-large);font-weight:500;margin-top:4px;color:#fff;}
.blog__inline p:not(.blog__plab):not(.blog__it){font-size:var(--text-label);line-height:1.6;color:rgba(255,255,255,.7);margin-top:6px;}
.blog__plab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--green);}
.blog__tocm{display:none;}
.blog__side{position:relative;height:100%;}
.blog__sticky{position:sticky;top:calc(var(--navh,68px) + 24px);display:flex;flex-direction:column;gap:18px;}
.blog__toc ol{list-style:none;margin:10px 0 0;padding:0;border-left:1px solid var(--grey-1);display:flex;flex-direction:column;}
.blog__toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:var(--text-small);line-height:1.45;color:var(--slate);}
.blog__toc a:hover{color:var(--black);}
.blog__toc a.is-here{border-left-color:var(--blue);color:var(--black);font-weight:500;}
.blog__toc .blog__plab{color:var(--slate-2);}
.blog__share{display:flex;align-items:center;gap:8px;font-size:var(--text-small);color:var(--slate-2);}
.blog__share span{margin-right:4px;}
.blog__sh{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--grey-1);color:var(--black);background:#fff;transition:border-color .15s,color .15s,background .15s;}
.blog__sh:hover{border-color:var(--black);background:var(--black);color:#fff;}
.blog__sh svg{width:15px;height:15px;}
.blog__promo,.blog__popin{background:var(--black);color:#fff;padding:22px;}
.blog__pt{font-size:var(--text-large);font-weight:500;line-height:1.3;margin-top:6px;color:#fff;}
.blog__promo ul,.blog__popin ul{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:9px;}
.blog__promo li,.blog__popin li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;font-size:var(--text-small);line-height:1.45;color:rgba(255,255,255,.8);}
.blog__promo li svg,.blog__popin li svg{width:14px;height:14px;margin-top:3px;color:var(--green);}
.blog__promo .btn,.blog__popin .btn{width:100%;justify-content:center;}
.blog__pnote{margin-top:10px;font-size:var(--text-small);color:rgba(255,255,255,.5);text-align:center;}
.blog__end{margin-top:clamp(36px,4vw,52px);padding-top:clamp(22px,2.4vw,30px);border-top:1px solid var(--grey-1);display:flex;flex-direction:column;gap:22px;}
.blog__author{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;background:var(--grey-3);border:1px solid var(--grey-1);padding:18px;}
.blog__amark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--black);color:#fff;font-size:var(--heading-4);font-weight:500;}
.blog__author b{font-size:var(--text-label);font-weight:500;}
.blog__author p{font-size:var(--text-label);line-height:1.55;color:var(--slate);margin-top:3px;}
.blog__related{background:var(--grey-3);border-top:1px solid var(--grey-1);padding-block:clamp(40px,4.6vw,64px);}
.blog__related h2{font-size:var(--heading-2);}
.blog__relgrid{max-width:1000px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px);margin-top:clamp(18px,2vw,24px);}
.blog__rel{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--grey-1);padding:12px 12px 16px;color:var(--black);transition:border-color .2s,box-shadow .2s;}
.blog__rel:hover{border-color:var(--black);box-shadow:0 14px 30px -22px rgba(2,2,2,.45);}
.blog__relimg{display:block;aspect-ratio:1/1;overflow:hidden;background:#fff;}
.blog__relimg img{width:100%;height:100%;object-fit:contain;display:block;}
.blog__relimg--type{background:var(--black);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(14px,1.6vw,20px);}
.blog__relbrand{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.blog__reltt{font-size:var(--heading-4);line-height:1.2;letter-spacing:-0.01em;}
.blog__relcat{font-size:var(--text-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
.blog__rel b{font-size:var(--text-label);font-weight:500;line-height:1.35;}
.blog__all{display:inline-block;margin-top:18px;font-size:var(--text-label);color:var(--blue);}
/* the pop-up slides in from the bottom right once the reader is well into the article */
.blog__pop{position:fixed;right:clamp(12px,2vw,28px);bottom:96px;z-index:80;width:min(340px,calc(100vw - 24px));box-shadow:0 24px 60px -24px rgba(2,2,2,.6);animation:blogPopIn .35s ease;}
.blog__pop[hidden]{display:none;}
.blog__pop.is-away{opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .25s,transform .25s;}
@keyframes blogPopIn{from{transform:translateY(24px);opacity:0;}to{transform:none;opacity:1;}}
.blog__popx{position:absolute;top:6px;right:8px;z-index:1;width:30px;height:30px;border:0;background:transparent;color:rgba(255,255,255,.7);font-size:var(--heading-4);line-height:1;cursor:pointer;}
.blog__popx:hover{color:#fff;}
@media(prefers-reduced-motion:reduce){.blog__pop{animation:none;}}
@media(max-width:600px){.blog__meta{gap:4px 16px;}.blog__meta span+span::before{display:none;}}
@media(max-width:1000px){
  .blog__grid{grid-template-columns:1fr;}
  .blog__side{display:none;}
  .blog__tocm{display:block;margin-bottom:26px;border:1px solid var(--grey-1);background:var(--grey-3);}
  .blog__tocm summary{cursor:pointer;padding:12px 16px;font-size:var(--text-label);font-weight:500;}
  .blog__tocm ol{margin:0;padding:0 16px 14px 34px;display:flex;flex-direction:column;gap:6px;}
  .blog__tocm a{font-size:var(--text-label);color:var(--slate);}
  .blog__relgrid{grid-template-columns:1fr;}
  .blog__inline{grid-template-columns:1fr;}
}

/* ---- About as our home: the team photo hung on the wall, the awards on shelves ---- */
.ahome{position:relative;color:var(--black);background:
  radial-gradient(ellipse 55% 70% at 74% 42%,#fff 0%,rgba(255,255,255,0) 70%),
  linear-gradient(180deg,var(--grey-3) 0%,#ececea 100%);}
.ahome .eyebrow{color:var(--blue);}
.ahome h1{color:var(--black);}
.ahome .svchero__lede{color:var(--slate);}
.ahome .ahero__in{align-items:center;padding-bottom:clamp(64px,7vw,104px);}
/* skirting board along the bottom of the wall */
.ahome::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(14px,1.4vw,20px);background:#fff;border-top:1px solid var(--grey-1);box-shadow:0 -1px 0 rgba(255,255,255,.8),0 -8px 16px -12px rgba(2,2,2,.25);}
.ahang{position:relative;margin:clamp(38px,4vw,56px) 0 0;padding-top:clamp(30px,3vw,44px);transform:rotate(-.7deg);transform-origin:50% 0;transition:transform .6s cubic-bezier(.3,1.6,.5,1);}
.ahang:hover{transform:rotate(0deg);}
.ahang__nail{position:absolute;top:-6px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 35%,#d9d9d9,#6d6d6d 60%,#3a3a3a);box-shadow:0 2px 3px rgba(2,2,2,.35);}
.ahang__wire{position:absolute;top:-2px;left:22%;width:56%;height:calc(clamp(30px,3vw,44px) + 4px);overflow:visible;}
.ahang__wire path{fill:none;stroke:#5c5c5c;stroke-width:1.3;vector-effect:non-scaling-stroke;}
.ahang__frame{position:relative;display:block;padding:clamp(10px,1.1vw,16px);background:linear-gradient(145deg,#2a2a2a,#050505 55%,#1d1d1d);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 0 rgba(255,255,255,.12),0 2px 3px rgba(2,2,2,.25),0 34px 50px -26px rgba(2,2,2,.55),18px 26px 50px -30px rgba(2,2,2,.35);}
.ahang__mat{display:block;padding:clamp(14px,2vw,30px);background:#fff;box-shadow:inset 0 1px 6px rgba(2,2,2,.18);}
.ahang__mat img{display:block;width:100%;height:auto;box-shadow:0 0 0 1px rgba(2,2,2,.14),0 0 0 4px #f4f4f2;}
.ahang__plaque{display:flex;flex-direction:column;align-items:center;gap:2px;width:max-content;margin:clamp(16px,1.8vw,24px) auto 0;padding:8px 18px;
  background:linear-gradient(180deg,#f2f2f2,#d6d6d6);border:1px solid #bdbdbd;box-shadow:0 2px 4px rgba(2,2,2,.18),inset 0 1px 0 #fff;}
.ahang__plaque b{font-size:var(--text-micro);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--black);}
.ahang__plaque span{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);}
@media(prefers-reduced-motion:reduce){.ahang{transition:none;}}
@media(max-width:1000px){.ahang{margin-top:clamp(24px,5vw,40px);}}

.ashelf{background:linear-gradient(180deg,#ececea 0%,var(--grey-3) 30%);}
.ashelf .aawards__head{margin-bottom:clamp(48px,5.5vw,80px);}
.shelves{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.4vw,34px);row-gap:clamp(56px,6vw,88px);}
.trophy{margin:0;display:flex;flex-direction:column;min-width:0;}
.trophy__stage{height:clamp(150px,14vw,200px);display:flex;align-items:flex-end;justify-content:center;padding:0 6%;}
.trophy__frame{display:block;width:100%;aspect-ratio:4/3;padding:9px;background:#0a0a0a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 16px 18px -14px rgba(2,2,2,.6),10px 4px 16px -10px rgba(2,2,2,.35);transform-origin:50% 100%;transition:transform .35s ease;}
.trophy__frame img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;padding:12% 13%;box-shadow:inset 0 1px 4px rgba(2,2,2,.2);}
/* a lived-in shelf: frames of different sizes and finishes, some leaning */
.trophy:nth-child(4n+1) .trophy__frame{width:92%;}
.trophy:nth-child(4n+2) .trophy__frame{width:78%;background:#fff;box-shadow:0 0 0 1px var(--grey-1),0 16px 18px -14px rgba(2,2,2,.5);transform:rotate(-3deg);}
.trophy:nth-child(4n+3) .trophy__frame{width:100%;background:linear-gradient(145deg,#8f8f8f,#d8d8d8 45%,#9d9d9d);}
.trophy:nth-child(4n+4) .trophy__frame{width:84%;transform:rotate(2deg);}
.trophy:hover .trophy__frame{transform:translateY(-4px) rotate(0deg);}
/* the board runs through the gaps so each row reads as one shelf */
.trophy__board{position:relative;display:block;height:14px;margin:0 calc(clamp(18px,2.4vw,34px) / -2);
  background:linear-gradient(180deg,#2b2b2b 0,#111 5px,#050505 100%);box-shadow:0 14px 16px -10px rgba(2,2,2,.45),0 1px 0 rgba(255,255,255,.08) inset;}
.trophy:nth-child(4n+1) .trophy__board{margin-left:-10px;}
.trophy:nth-child(4n+4) .trophy__board{margin-right:-10px;}
/* wall brackets under the ends of each shelf */
.trophy__board::after{content:"";position:absolute;top:100%;width:8px;height:16px;display:none;
  background:linear-gradient(90deg,#1a1a1a,#3a3a3a);clip-path:polygon(0 0,100% 0,100% 100%,0 20%);}
.trophy:nth-child(4n+1) .trophy__board::after{display:block;left:22%;}
.trophy:nth-child(4n+4) .trophy__board::after{display:block;right:22%;transform:scaleX(-1);}
.trophy figcaption{margin-top:30px;padding:0 4%;font-size:var(--text-small);line-height:1.5;color:var(--black);text-align:center;}
@media(max-width:1000px){
  .shelves{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trophy:nth-child(n) .trophy__board{margin:0 calc(clamp(18px,2.4vw,34px) / -2);}
  .trophy:nth-child(2n+1) .trophy__board{margin-left:-10px;}
  .trophy:nth-child(2n) .trophy__board{margin-right:-10px;}
  .trophy:nth-child(n) .trophy__board::after{display:none;}
  .trophy:nth-child(2n+1) .trophy__board::after{display:block;left:22%;right:auto;transform:none;}
  .trophy:nth-child(2n) .trophy__board::after{display:block;right:22%;left:auto;transform:scaleX(-1);}
}

/* ---- the portal, shown with the real screens ---- */
.pshot--img a{display:block;width:100%;height:100%;}
.pp-sample{margin-left:10px;letter-spacing:.04em;text-transform:none;font-style:italic;color:var(--slate-2);}
.pp-hero__in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center;}
.pp-frame{margin:0;min-width:0;}
.pp-zoom{display:block;width:100%;padding:0;border:1px solid var(--grey-1);background:var(--grey-3);cursor:zoom-in;overflow:hidden;
  box-shadow:0 30px 60px -38px rgba(2,2,2,.5);}
.pp-zoom img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;transition:transform .5s ease;}
.pp-zoom:hover img{transform:scale(1.012);}
.pp-zoom:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.pp-zoom--flat{height:100%;border:0;box-shadow:none;}
.pp-zoom--flat img{height:100%;}
.pp-hero .pp-zoom{border-color:rgba(255,255,255,.16);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);}
.pp-frame figcaption{margin-top:10px;font-size:var(--text-small);color:var(--slate);}
.pp-tour{background:#fff;}
.pp-tour .sec-head{margin-bottom:clamp(10px,1.4vw,18px);}
.pp-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.5vw,72px);align-items:center;
  padding-block:clamp(36px,4.6vw,66px);border-top:1px solid var(--grey-1);scroll-margin-top:calc(var(--navh,68px) + 24px);}
.pp-row:nth-of-type(even) .pp-row__text{order:2;}
.pp-row h3{font-size:var(--heading-3);font-weight:400;letter-spacing:-0.015em;line-height:1.2;margin-top:8px;}
.pp-row p{margin-top:12px;font-size:var(--text-base);line-height:1.7;color:var(--slate);}
.pp-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px;}
.pp-list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;font-size:var(--text-label);line-height:1.5;color:var(--black);}
.pp-list svg{width:15px;height:15px;margin-top:3px;color:var(--green);}
.pp-lb{position:fixed;inset:0;z-index:300;background:rgba(2,2,2,.88);display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,48px);cursor:zoom-out;}
.pp-lb[hidden]{display:none;}
.pp-lb img{max-width:100%;max-height:100%;width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.6);cursor:default;}
.pp-lb__x{position:absolute;top:14px;right:18px;width:42px;height:42px;border:1px solid rgba(255,255,255,.3);background:transparent;
  color:#fff;font-size:var(--heading-3);line-height:1;cursor:pointer;}
.pp-lb__x:hover{background:#fff;color:var(--black);}
@media(max-width:1000px){
  .pp-hero__in,.pp-row,  .pp-row:nth-of-type(even) .pp-row__text{order:0;}
  }

/* article body extras: wide tables scroll on their own, images and small headings */
.blog__sec table{display:block;max-width:100%;overflow-x:auto;}
.blog__sec th,.blog__sec td{overflow-wrap:anywhere;min-width:110px;}
.blog__sec figure{margin:24px 0;}
.blog__sec img{display:block;max-width:100%;height:auto;}
.blog__sec figcaption{margin-top:8px;font-size:var(--text-small);color:var(--slate-2);}
.blog__sec h4{font-size:var(--text-base);font-weight:500;margin:18px 0 8px;color:var(--black);}

/* ---- the example blocks read unmistakably as buttons: bigger cards with a
   status dot and an arrow, and a "Try it" label ---- */
.fw__hint{margin:4px 0 12px;gap:10px;font-size:var(--text-small);line-height:1.35;color:var(--black);}
.fw__hint svg{width:20px;height:20px;color:var(--blue);}
.fw__try{flex:0 0 auto;display:inline-flex;align-items:center;padding:4px 9px;background:var(--blue);color:#fff;
  font-size:var(--text-micro);font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.fw__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px;}
.fw__opt{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 12px;font-size:var(--text-small);font-weight:400;line-height:1.3;
  color:var(--black);background:#fff;border:1px solid var(--slate-3);box-shadow:0 2px 0 var(--grey-1);}
.fw__dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--state-bottleneck);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--state-bottleneck) 18%, transparent);}
.fw__opt[data-sc="healthy"] .fw__dot{background:var(--state-healthy);box-shadow:0 0 0 3px color-mix(in srgb, var(--state-healthy) 22%, transparent);}
.fw__lbl{flex:1 1 auto;min-width:0;}
.fw__go{flex:0 0 auto;width:15px;height:15px;opacity:.45;transition:transform .2s ease,opacity .2s ease;}
.fw__opt:hover{color:var(--black);border-color:var(--black);transform:translateY(-2px);box-shadow:0 12px 20px -14px rgba(2,2,2,.55);}
.fw__opt:hover .fw__go{opacity:1;transform:translateX(3px);}
.fw__opt.is-on{background:var(--black);border-color:var(--black);color:#fff;box-shadow:0 12px 20px -14px rgba(2,2,2,.7);}
.fw__opt.is-on .fw__go{opacity:1;}
/* the services in the engine open to show their KPIs */
.esvc__n{padding:7px 9px;font-size:12px;background:#fff;border-color:var(--slate-3);}
.esvc__n:hover{background:var(--grey-3);border-color:var(--black);}
.esvc__n svg{width:18px;height:18px;padding:5px;box-sizing:border-box;border:1px solid var(--grey-1);border-radius:50%;opacity:1;background:#fff;}
.esvc[open] > .esvc__n{border-color:var(--black);}
@media(max-width:560px){.fw__opts{grid-template-columns:1fr;}}

/* ---- full size menu: a slimmer header so everything fits on one line from
   1341px, where the burger menu hands over ---- */
@media(min-width:1341px){
  .nav__in{gap:14px;}
  .nav__logo img{height:16px;}
  /* line-height:1 pulled the label a third of a pixel below the menu's own
     baseline, so the buttons take the same 1.6 the links use and lose the
     matching amount of padding to keep the box the height it was */
  .nav .btn{padding:var(--cta-py) var(--cta-px);font-size:var(--text-nav);font-weight:300;line-height:1.6;}
  .nav .btn--green{font-weight:500;}
  .nav__act{gap:18px;}
  .nav__act .nav__login{margin-left:4px;}
  .nav__login span{display:none;}
  /* the hairlines sit halfway into this gap, so the gap is set through --mg */
  .nav__menu{--mg:16px;}
}

/* the trust line sits straight under the award details. The details take only
   the room the longest award needs (the script holds that height), so nothing
   jumps and there is no empty band between the text and the trust line. */
.awards__detail{align-self:center;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:14px;}
.awards__detail .trustbar{justify-content:center;}
.awards__detail .awards__title{min-height:0;margin-top:6px;}
.awards__detail .awards__desc{min-height:0;margin-top:6px;}
.hero__lead .trustbar{margin-top:0;justify-content:center;}

/* ---- hero: the brand topography pattern. The lines are always on show and
   bend around the pointer; the bending is drawn on a canvas (WebGL), and the
   still pattern underneath is the fallback when that is not available ---- */
.hero__topo{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.hero__topo-base{position:absolute;inset:-6%;background:url(../img/pattern/topography-white.svg) center top / 100% auto repeat-y;
  opacity:.075;animation:topoDrift 70s ease-in-out infinite alternate;}
.hero__topo.is-gl .hero__topo-base{display:none;}
.hero__warp{position:absolute;inset:0;width:100%;height:100%;display:block;}
@keyframes topoDrift{from{transform:translate3d(0,0,0) scale(1);}to{transform:translate3d(-2.5%,-1.8%,0) scale(1.05);}}
@media(prefers-reduced-motion:reduce){.hero__topo-base{animation:none;}}

/* the portal screen on the home page sits a little smaller than its column,
   aligned to the right edge; the spare room opens up beside the tabs */
@media(min-width:1001px){
  .portal__grid .portal__main{width:100%;max-width:88%;justify-self:end;}
}

/* ---- engine page: example engines above the calculator. Cards that read as
   buttons, a "Try it" label, and a pulse across them until one is used ---- */
.epre{margin:clamp(24px,2.8vw,40px) 0 clamp(18px,2vw,26px);padding:clamp(16px,1.8vw,22px);background:#fff;border:1px solid var(--grey-1);border-left:3px solid var(--green);}
.epre__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.epre__head p{margin:0;font-size:var(--text-label);line-height:1.5;color:var(--slate);}
.epre__head b{color:var(--black);font-weight:500;}
.epre__opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px;}
.epre__opt{position:relative;display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;font:inherit;text-align:left;cursor:pointer;
  color:var(--black);background:#fff;border:1px solid var(--slate-3);box-shadow:0 2px 0 var(--grey-1);
  transition:transform .18s,box-shadow .18s,border-color .18s,background .18s,color .18s;}
.epre__lbl{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.epre__lbl b{font-size:var(--text-small);font-weight:500;line-height:1.3;}
.epre__lbl i{font-style:normal;font-size:var(--text-small);line-height:1.35;color:var(--slate);}
.epre__opt:hover{border-color:var(--black);transform:translateY(-2px);box-shadow:0 12px 20px -14px rgba(2,2,2,.55);}
.epre__opt:hover .fw__go{opacity:1;transform:translateX(3px);}
.epre__opt.is-on{background:var(--black);border-color:var(--black);color:#fff;box-shadow:0 12px 20px -14px rgba(2,2,2,.7);}
.epre__opt.is-on .epre__lbl i{color:rgba(255,255,255,.7);}
.epre__opt.is-on .fw__go{opacity:1;}
.epre__opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.epre__opt[data-pre="healthy"] .fw__dot{background:var(--state-healthy);box-shadow:0 0 0 3px color-mix(in srgb, var(--state-healthy) 22%, transparent);}
.epre:not(.is-used) .epre__opt{animation:epreNudge 3.2s ease-in-out infinite;}
.epre:not(.is-used) .epre__opt:nth-child(2){animation-delay:0.3s;}
.epre:not(.is-used) .epre__opt:nth-child(3){animation-delay:0.6s;}
.epre:not(.is-used) .epre__opt:nth-child(4){animation-delay:0.9s;}
.epre:not(.is-used) .epre__opt:nth-child(5){animation-delay:1.2s;}
.epre:not(.is-used) .epre__opt:nth-child(6){animation-delay:1.5s;}
.epre:not(.is-used) .epre__opt:nth-child(7){animation-delay:1.8s;}
.epre:not(.is-used) .epre__opt:nth-child(8){animation-delay:2.1s;}
@keyframes epreNudge{
  0%,55%,100%{box-shadow:0 2px 0 var(--grey-1);border-color:var(--slate-3);}
  20%{box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent);border-color:var(--green);}
}
@media(max-width:1100px){.epre__opts{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.epre__opts{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.epre .epre__opt{animation:none;}}

/* ---- engine page: the story of the engine, told as four steps ---- */
.estory{background:var(--grey-3);}
.estory .sec-head{max-width:760px;}
@media(min-width:1001px){.estory .astory__list{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* ---- the pattern on every hero: js/topo.js adds the layer behind the
   content, white lines on dark heroes and faint blue on light ones ---- */
.topo-host{position:relative;isolation:isolate;overflow:hidden;}
.hero__topo--auto{z-index:-1;}
.topo-light .hero__topo-base{background-image:url(../img/pattern/topography-blue.svg);opacity:.14;}
/* a boxed title block (the tools) lets the pattern fade out before its edges */
.topo-boxed .hero__topo{-webkit-mask-image:radial-gradient(ellipse 72% 78% at 50% 50%, #000 40%, transparent 100%);
          mask-image:radial-gradient(ellipse 72% 78% at 50% 50%, #000 40%, transparent 100%);}

/* ---- tools: currency switch, hints, "don't know" switches, a headline
   result and a compact breakdown with a plain summary underneath ---- */
.tf select{display:block;width:100%;height:48px;padding:0 14px;font:inherit;font-size:var(--text-base);color:var(--black);background:var(--grey-3);border:1px solid var(--grey-1);border-radius:0;}
.tf__hint{display:block;margin-top:5px;font-size:var(--text-small);line-height:1.4;color:var(--slate-2);}
.tf__dk{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-small);color:var(--slate);cursor:pointer;white-space:nowrap;}
/* a field with a "don't know" switch: the name on the left, the switch on the right, on one line */
.tf:has(.tf__dk){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:baseline;}
.tf:has(.tf__dk) > input,.tf:has(.tf__dk) > .tf__hint{grid-column:1 / -1;}
.tf__dk input{width:14px;height:14px;margin:0;accent-color:var(--black);}
.tf.is-dk input[type="number"]{opacity:.4;}
.to--head .to__note{margin-top:6px;font-size:var(--text-small);color:rgba(255,255,255,.62);}
.to--head.is-gain dd{color:var(--green);}
.to--head.is-loss dd{color:var(--state-bottleneck);}
.calc2__rows{margin:14px 0 0;display:flex;flex-direction:column;}
.calc2__rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.calc2__rows dt{font-size:var(--text-small);color:rgba(255,255,255,.7);}
.calc2__rows dd{margin:0;font-size:var(--text-label);color:#fff;font-variant-numeric:tabular-nums;text-align:right;}
.calc2__sum{margin-top:18px;font-size:var(--text-label);line-height:1.65;color:rgba(255,255,255,.78);}

/* ---- portal hero: just the sign in card, floating on the black hero ---- */
.pp-login{margin:0;justify-self:center;width:min(100%,420px);}
.pp-login img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 50px rgba(0,0,0,.6)) drop-shadow(0 2px 6px rgba(0,0,0,.35));}
@media(max-width:1000px){.pp-login{width:min(100%,360px);margin-top:8px;}}

/* ---- single case study ---- */
.cs-hero{background:var(--black);color:#fff;padding:calc(68px + clamp(24px,2.6vw,40px)) 0 clamp(30px,3.4vw,46px);position:relative;}
/* the client picture sits on the right of the hero and fades away to the left,
   behind the logo, with the left side kept solid so the headline stays readable */
.cs-hero__bg{position:absolute;inset:0 0 0 auto;width:min(62%,900px);z-index:0;
  background-position:center right;background-size:cover;background-repeat:no-repeat;opacity:.5;
  -webkit-mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%);
          mask-image:linear-gradient(to left,#000 0%,rgba(0,0,0,.55) 45%,transparent 92%);}
.cs-hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,var(--black) 0%,rgba(2,2,2,.55) 45%,rgba(2,2,2,.25) 100%);}
.cs-hero .wrap{position:relative;z-index:1;}
@media(max-width:1000px){.cs-hero__bg{width:100%;opacity:.32;
  -webkit-mask-image:linear-gradient(to left,#000 0%,transparent 95%);mask-image:linear-gradient(to left,#000 0%,transparent 95%);}}
.cs-hero .blog__crumbs a{color:rgba(255,255,255,.7);}
.cs-hero .blog__crumbs a:hover{color:#fff;}
.cs-hero .blog__crumbs span{color:rgba(255,255,255,.45);}
.cs-hero__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(18px,2vw,26px);}
.cs-hero__logo{display:block;height:clamp(52px,6vw,88px);margin:0;justify-self:end;}
.cs-hero__logo img{height:100%;width:auto;filter:brightness(0) invert(1);opacity:.9;}
.cs-hero h1{color:#fff;margin-top:0;max-width:20ch;font-size:var(--heading-1);line-height:1.12;letter-spacing:-0.02em;}
.cs-hero__stand{margin-top:14px;max-width:56ch;font-size:var(--text-base);line-height:1.6;color:rgba(255,255,255,.66);}
/* the result and the client's words sit side by side under the overview */
.cs-outcome{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(18px,2.2vw,30px);align-items:stretch;
  margin-bottom:clamp(30px,3.6vw,52px);}
.cs-res{background:#fff;border:1px solid var(--grey-1);border-left:3px solid var(--green);
  padding:clamp(20px,2.2vw,26px);color:var(--black);display:flex;flex-direction:column;justify-content:center;}
.cs-res__lab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.cs-res__move{display:flex;align-items:baseline;gap:10px;margin-top:12px;font-size:var(--heading-1);line-height:1;}
.cs-res__move b{color:var(--black);font-weight:400;}
.cs-res__move .is-up{color:var(--green);}
.cs-res__move i{font-style:normal;font-size:.6em;color:var(--slate-2);}
.cs-res__move .is-up{color:var(--green);}
.cs-res__kpi{margin-top:10px;font-size:var(--text-label);color:var(--slate);}
.cs-res__foot{margin-top:4px;font-size:var(--text-small);color:var(--slate-2);}
/* client, industry and website: a compact line above the story */
.cs-facts{display:flex;flex-wrap:wrap;gap:8px clamp(24px,3vw,44px);margin:0 0 clamp(20px,2.4vw,28px);
  padding-bottom:clamp(14px,1.6vw,18px);border-bottom:1px solid var(--grey-1);}
.cs-facts > div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cs-facts dt{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.cs-facts dd{margin:0;font-size:var(--text-label);font-weight:500;color:var(--black);}
.cs-facts a{color:var(--blue);}
.cs-facts a:hover{color:var(--black);}
.cs-sec + .cs-sec{margin-top:clamp(26px,3vw,38px);}
.cs-sec h2{font-size:var(--heading-2);line-height:1.2;letter-spacing:-0.015em;margin-bottom:12px;}
.cs-sec p{font-size:var(--text-base);line-height:1.75;color:var(--slate);}
.cs-sec b{color:var(--black);font-weight:500;}
.cs-more{background:var(--grey-3);border-top:1px solid var(--grey-1);padding-block:clamp(40px,4.6vw,64px);}
.cs-more h2{font-size:var(--heading-2);}
@media(max-width:1000px){
  .cs-hero__in{grid-template-columns:1fr;gap:clamp(18px,3vw,28px);}
  .cs-hero__logo{justify-self:start;order:-1;}
  .cs-res{max-width:none;}
}
@media(max-width:560px){}

/* ---- case study: a wide overview with the pictures at its top right, then
   the story full width, the client's review, a call to action and the rest ---- */
.cs-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(28px,4vw,64px);align-items:start;padding-block:clamp(30px,3.6vw,52px);}
.cs-over h2{font-size:var(--heading-2);line-height:1.15;letter-spacing:-0.02em;margin-bottom:12px;}
.cs-part + .cs-part{margin-top:clamp(22px,2.6vw,34px);}
.cs-over p{font-size:var(--heading-4);line-height:1.65;color:var(--slate);}
.cs-over p + p{margin-top:14px;}
.cs-over b{color:var(--black);font-weight:500;}
.cs-gal{position:relative;}
.cs-gal:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}
.cs-gal__view{overflow:hidden;border:1px solid var(--grey-1);background:var(--grey-3);}
.cs-gal__track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);}
.cs-gal__slide{flex:0 0 100%;min-width:0;}
.cs-gal__slide img{display:block;width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;}
.cs-gal__slide--add{display:grid;place-items:center;aspect-ratio:1 / 1;background:var(--grey-3);}
.cs-gal__slide--add span{font-size:var(--text-small);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);
  border:1px dashed var(--grey-1);padding:10px 16px;}
.cs-gal__nav{position:absolute;top:calc(50% - 22px);width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid var(--grey-1);color:var(--black);transition:background .18s,color .18s;}
.cs-gal__nav:hover{background:var(--black);color:#fff;border-color:var(--black);}
.cs-gal__nav svg{width:15px;height:15px;}
.cs-gal__nav--prev{left:10px;}
.cs-gal__nav--next{right:10px;}
.cs-gal__dots{display:flex;justify-content:center;gap:7px;margin-top:12px;}
.cs-gal__dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:var(--grey-1);cursor:pointer;}
.cs-gal__dots button.is-on{background:var(--black);}
.cs-gal__cap{margin-top:8px;font-size:var(--text-small);line-height:1.5;color:var(--slate-2);text-align:center;}
.cs-gal.is-single .cs-gal__nav,.cs-gal.is-single .cs-gal__dots{display:none;}
.cs-top + .wrap .cs-review{margin-top:0;}
.cs-review{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.4vw,30px);align-items:start;
  background:var(--grey-3);border-left:3px solid var(--green);padding:clamp(22px,2.6vw,34px);margin:0;}
.cs-review__pic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--black);color:#fff;font-size:var(--heading-4);font-weight:500;}
.cs-review__pic img{width:100%;height:100%;object-fit:cover;}
.cs-review blockquote{margin:0;font-size:var(--heading-4);line-height:1.5;letter-spacing:-0.01em;color:var(--black);}
.cs-review__who{margin-top:14px;display:flex;flex-direction:column;gap:2px;}
.cs-review__who b{font-size:var(--text-label);font-weight:500;}
.cs-review__who span{font-size:var(--text-small);color:var(--slate);}
.cs-more .cases__grid{margin-top:clamp(18px,2vw,24px);}
@media(min-width:1001px){.cs-more .cases__grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:1000px){
  .cs-outcome{grid-template-columns:1fr;}
  .cs-top{grid-template-columns:1fr;}
  .cs-over{order:2;}
  .cs-gal{order:1;}
  .cs-review{grid-template-columns:auto minmax(0,1fr);}
}

/* a filtered out case is laid out with flex, so the hidden attribute needs saying twice */
.case[hidden],.cases__grid .case[hidden]{display:none;}

/* ---- Obsidians: the team dashboard, a design preview for now ---- */
.obs{background:var(--grey-3);padding-block:calc(68px + clamp(24px,2.6vw,40px)) clamp(40px,5vw,72px);min-height:70vh;}
.obs__gate{display:flex;justify-content:center;}
.obs__card{width:min(100%,420px);background:#fff;border:1px solid var(--grey-1);padding:clamp(24px,3vw,36px);}
.obs__card h1{font-size:var(--heading-2);margin-top:6px;}
.obs__sub{margin-top:8px;font-size:var(--text-label);color:var(--slate);}
.obs__card form{margin-top:22px;display:flex;flex-direction:column;gap:14px;}
.obs__go{width:100%;justify-content:center;margin-top:4px;}
.obs__note{margin-top:18px;font-size:var(--text-small);line-height:1.55;color:var(--slate-2);}
.obs__note b{color:var(--black);font-weight:500;}
.obs__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;}
.obs__bar h1{font-size:var(--heading-2);margin-top:6px;}
.obs__tabs{display:flex;gap:6px;margin-top:clamp(18px,2vw,24px);}
.obs__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(16px,2vw,22px);align-items:start;}
.obs__form{background:#fff;border:1px solid var(--grey-1);padding:clamp(18px,2.2vw,26px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;}
.obs__form .tf--wide{grid-column:1 / -1;}
.obs__form textarea{display:block;width:100%;font:inherit;font-size:var(--text-label);color:var(--black);background:var(--grey-3);
  border:1px solid var(--grey-1);padding:12px 14px;resize:vertical;}
.obs__side{background:#fff;border:1px solid var(--grey-1);padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:14px;}
/* each group announces itself, with a rule above it and room to breathe */
.obs__side .calc2__lab{margin:0;font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.obs__side > .calc2__lab + *{margin-top:-4px;}
.obs__side > * + .calc2__lab{margin-top:10px;padding-top:18px;border-top:1px solid var(--grey-1);}
.obs__side .obs__serp{margin-top:0;}
.obs__side .obs__checks{gap:9px;}
.obs__side .obs__checks li{padding-left:22px;line-height:1.5;}
.obs__side .obs__outline{gap:7px;}
.obs__side .obs__code{margin-top:0;max-height:none;overflow:visible;}
.obs__side .obs__acts{margin-top:4px;padding-top:18px;border-top:1px solid var(--grey-1);gap:10px;}
.obs__side .obs__msg{margin-top:0;}
.obs__side .obs__out{margin-top:0;}
.obs__side .obs__note{margin-top:0;padding-top:4px;}
.obs__prev{margin-top:12px;padding:16px;background:var(--grey-3);min-height:180px;}
.obs__pl{font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.obs__pt{margin-top:6px;font-size:var(--text-large);line-height:1.25;color:var(--black);}
.obs__pm{margin-top:10px;font-size:var(--text-label);color:var(--slate);}
.obs__pm .is-up{color:var(--green);}
.obs__pb{margin-top:10px;font-size:var(--text-small);line-height:1.55;color:var(--slate);}
.obs__pb b{color:var(--black);font-weight:500;margin-right:4px;}
.obs__pq{margin-top:10px;font-size:var(--text-small);line-height:1.55;color:var(--black);}
.obs__pq i{font-style:normal;color:var(--slate-2);}
.obs__ps{margin:8px 0 0;padding-left:18px;font-size:var(--text-small);color:var(--slate);display:flex;flex-direction:column;gap:4px;}
.obs__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.obs__acts .btn{flex:1 1 auto;justify-content:center;}
.obs__msg{margin-top:10px;font-size:var(--text-small);color:var(--green);min-height:1.2em;}
@media(max-width:1000px){
  .obs__grid{grid-template-columns:1fr;}
  .obs__side{position:static;}
}
@media(max-width:600px){.obs__form{grid-template-columns:1fr;}}

/* ---- Obsidians: the hub and the two editors ---- */
.obs__pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);margin-top:clamp(20px,2.4vw,30px);}
.obs__pickcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--grey-1);padding:clamp(20px,2.4vw,30px);color:var(--black);
  transition:border-color .2s,box-shadow .2s;}
.obs__pickcard:hover{border-color:var(--black);box-shadow:0 16px 30px -24px rgba(2,2,2,.45);}
.obs__pickn{font-size:var(--text-micro);letter-spacing:.18em;color:var(--slate-2);}
.obs__pickcard b{font-size:var(--text-large);font-weight:500;}
.obs__pickcard > span:not(.obs__pickn):not(.case__link){font-size:var(--text-label);line-height:1.55;color:var(--slate);}
.obs__lab{grid-column:1 / -1;margin-top:6px;font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.obs__serp{margin-top:10px;padding:14px;background:#fff;border:1px solid var(--grey-1);}
.obs__serpu{font-size:var(--text-small);color:#0b7a3b;}
.obs__serpt{margin-top:4px;font-size:var(--text-large);line-height:1.3;color:#1a0dab;}
.obs__serpd{margin-top:4px;font-size:var(--text-small);line-height:1.5;color:var(--slate);}
.obs__checks{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.obs__checks li{position:relative;padding-left:20px;font-size:var(--text-small);line-height:1.45;color:var(--slate);}
.obs__checks li::before{position:absolute;left:0;top:0;font-size:var(--text-small);}
.obs__checks .is-ok::before{content:"\2713";color:var(--green);}
.obs__checks .is-warn::before{content:"!";color:#b8860b;font-weight:600;}
.obs__checks .is-bad::before{content:"\00d7";color:var(--state-bottleneck);}
.obs__code{margin-top:10px;padding:12px;background:var(--black);color:rgba(255,255,255,.85);font-size:var(--text-micro);line-height:1.5;
  overflow:auto;max-height:190px;white-space:pre-wrap;word-break:break-word;}
@media(max-width:700px){.obs__pick{grid-template-columns:1fr;}}

/* the arrow on the hub cards is an icon, not a picture */
.obs__pickcard .case__link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:var(--text-label);color:var(--blue);}
.obs__pickcard .case__link svg{width:15px;height:15px;flex:0 0 auto;}

/* ---- Obsidians: the article block builder ---- */
.obb{margin-top:clamp(14px,1.8vw,20px);background:#fff;border:1px solid var(--grey-1);padding:clamp(18px,2.2vw,26px);}
.obb__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;}
.obb__add{display:flex;flex-wrap:wrap;gap:6px;}
.obb__add .pt{font-size:var(--text-small);padding:7px 12px;}
.obb__list{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.obb__b{border:1px solid var(--grey-1);background:var(--grey-3);}
.obb__head{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:1px solid var(--grey-1);background:#fff;}
.obb__head b{font-size:var(--text-small);font-weight:500;}
.obb__tag{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 7px;background:var(--black);color:#fff;
  font-size:var(--text-micro);letter-spacing:.08em;font-weight:500;}
.obb__tag--h1{background:var(--blue);}
.obb__tag--h2{background:#2f6f8f;}
.obb__tag--h3{background:#5b8ea6;}
.obb__tag--p{background:var(--slate);}
.obb__tag--img,.obb__tag--chart{background:var(--green);}
.obb__tag--list,.obb__tag--quote{background:var(--slate-2);}
.obb__tools{margin-left:auto;display:flex;gap:4px;}
.obb__tools button{width:26px;height:26px;border:1px solid var(--grey-1);background:#fff;color:var(--slate);cursor:pointer;font-size:var(--text-small);line-height:1;}
.obb__tools button:hover{border-color:var(--black);color:var(--black);}
.obb__body{padding:12px 10px;display:flex;flex-direction:column;gap:10px;}
.obb__f{display:flex;flex-direction:column;gap:4px;}
.obb__f > span{font-size:var(--text-micro);color:var(--slate-2);}
.obb__f input,.obb__f textarea{font:inherit;font-size:var(--text-label);color:var(--black);background:#fff;border:1px solid var(--grey-1);padding:9px 11px;resize:vertical;}
.obb__check{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-small);color:var(--slate);}
.obs__outline{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;}
.obs__outline li{display:flex;align-items:baseline;gap:8px;font-size:var(--text-small);line-height:1.4;color:var(--black);}
.obs__outline li span{flex:0 0 auto;min-width:26px;font-size:var(--text-micro);letter-spacing:.08em;color:#fff;background:var(--slate-2);padding:2px 5px;text-align:center;}
.obs__outline .lv-h1 span{background:var(--blue);}
.obs__outline .lv-h2 span{background:#2f6f8f;}
.obs__outline .lv-h3{padding-left:18px;}
.obs__outline .lv-h3 span{background:#5b8ea6;}
.obs__outline i{color:var(--slate-2);}

/* a chart inside a finished article */
.blog__chart{margin:24px 0;padding:18px;background:var(--grey-3);border:1px solid var(--grey-1);}
.blog__chart figcaption{font-size:var(--text-label);font-weight:500;color:var(--black);margin-bottom:14px;}
.blog__bars{display:flex;flex-direction:column;gap:10px;}
.blog__bar{display:grid;grid-template-columns:minmax(90px,28%) minmax(0,1fr) auto;align-items:center;gap:12px;font-size:var(--text-label);}
.blog__bar::after{content:"";grid-column:2;height:10px;background:var(--green);width:calc(var(--v) * 100%);}
.blog__bar span{color:var(--slate);}
.blog__bar b{grid-column:3;font-weight:500;font-variant-numeric:tabular-nums;}
.blog__cap{margin-top:12px;font-size:var(--text-small);color:var(--slate-2);}

/* the article preview under the builder, in the article's own styles */
.obs__preview{margin-top:clamp(14px,1.8vw,20px);background:#fff;border:1px solid var(--grey-1);padding:clamp(18px,2.2vw,26px);}
.obs__paper{margin-top:12px;padding:clamp(18px,2.4vw,32px);background:#fff;border:1px dashed var(--grey-1);}
.obs__paper .blog{max-width:760px;margin:0 auto;}
.obs__paper h1{font-size:var(--heading-1);line-height:1.12;letter-spacing:-0.02em;max-width:24ch;}
.obs__paper .blog__stand{margin-top:14px;}
.obs__paper .blog__meta{margin-top:14px;}
.obs__paper .blog__sec:first-of-type{margin-top:clamp(20px,2.4vw,30px);}
.obs__paper figure{margin:20px 0;}
.obs__paper figure img{display:block;width:100%;height:auto;}
.obs__paper figcaption{margin-top:8px;font-size:var(--text-small);color:var(--slate-2);}
.obs__paper blockquote{margin:20px 0;padding:16px 20px;background:var(--grey-3);border-left:3px solid var(--green);}
.obs__paper blockquote p{font-size:var(--text-base);line-height:1.5;color:var(--black);}
.obs__paper blockquote footer{margin-top:8px;font-size:var(--text-small);color:var(--slate);}
.obs__paper i{color:var(--slate-2);}

/* ---- Obsidians: writers ---- */
.obs__writers{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.obs__w{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 12px;background:var(--grey-3);border:1px solid var(--grey-1);}
.obs__w b{font-size:var(--text-label);font-weight:500;}
.obs__w span{font-size:var(--text-small);color:var(--slate);}
.obs__w i{margin-left:auto;font-style:normal;font-size:var(--text-micro);color:var(--slate-2);}
.obs__byline{padding:14px;}
.obs__bname{font-size:var(--text-label);color:var(--black);}
.obs__bbio{margin-top:6px;font-size:var(--text-small);line-height:1.55;color:var(--slate);}
.obs__bknow{margin-top:6px;font-size:var(--text-small);color:var(--slate-2);}
/* the author box on a finished article */
.blog__apic{width:52px;height:52px;border-radius:50%;overflow:hidden;display:block;}
.blog__apic img{width:100%;height:100%;object-fit:cover;display:block;}
.blog__author i{display:block;font-style:normal;font-size:var(--text-small);color:var(--slate);margin-top:2px;}
.blog__aknow,.blog__acred{margin-top:6px;font-size:var(--text-small);color:var(--slate-2);}
.blog__alinks{margin-top:8px;display:flex;flex-wrap:wrap;gap:12px;}
.blog__alinks a{font-size:var(--text-small);color:var(--blue);}
.blog__alinks a:hover{color:var(--black);}

/* ---- Obsidians: the bar for whoever is signed in ---- */
.obsbar{background:var(--black);color:#fff;position:sticky;top:var(--navh,68px);z-index:54;}
.obsbar__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);min-height:52px;flex-wrap:wrap;}
.obsbar__hi{font-size:var(--text-small);color:rgba(255,255,255,.6);}
.obsbar__hi b{color:#fff;font-weight:500;}
.obsbar__nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);margin-left:clamp(8px,2vw,26px);}
.obsbar__nav a{font-size:var(--text-small);color:rgba(255,255,255,.72);padding:15px 0 13px;border-bottom:2px solid transparent;}
.obsbar__nav a:hover{color:#fff;}
.obsbar__nav a.is-on{color:#fff;border-bottom-color:var(--green);}
.obsbar__out{margin-left:auto;font:inherit;font-size:var(--text-small);color:rgba(255,255,255,.8);background:transparent;
  border:1px solid rgba(255,255,255,.28);padding:7px 14px;cursor:pointer;}
.obsbar__out:hover{background:#fff;color:var(--black);border-color:#fff;}
@media(max-width:600px){.obsbar__in{gap:10px;padding-block:10px;}.obsbar__nav{margin-left:0;}}

/* ---- Obsidians: choosing what to edit ---- */
.obs__open{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px;padding:12px 14px;background:#fff;border:1px solid var(--grey-1);}
.obs__open label{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);}
.obs__open select{flex:1 1 260px;font:inherit;font-size:var(--text-label);color:var(--black);background:var(--grey-3);border:1px solid var(--grey-1);padding:9px 11px;}
.obs__open .obs__msg{margin:0;color:var(--slate-2);}

/* the finished entry, always shown so it can be selected by hand */
.obs__out{display:block;width:100%;margin-top:10px;font:inherit;font-size:var(--text-micro);line-height:1.5;color:var(--slate);
  background:var(--grey-3);border:1px solid var(--grey-1);padding:10px;resize:vertical;white-space:pre;overflow:auto;}

/* ---- home: ecommerce branding, with the work beside it ---- */
.ebrand{position:relative;overflow:hidden;padding-block:0;background:var(--sand);border-top:1px solid var(--sand-line);border-bottom:1px solid var(--sand-line);}
.ebrand__in{padding-block:clamp(22px,2.4vw,34px);margin-block:0;}
.ebrand__copy{position:relative;z-index:1;max-width:min(54%,760px);}
.ebrand__copy h2{margin-top:8px;font-size:var(--heading-2);line-height:1.12;letter-spacing:-0.02em;max-width:27ch;}
.ebrand__copy .lede{margin-top:12px;max-width:54ch;}
.ebrand__p{margin-top:10px;max-width:var(--measure);font-size:var(--text-label);line-height:1.6;color:var(--slate);}
.ebrand__copy .cta-pair{margin-top:clamp(16px,1.8vw,22px);}
/* the branding pictures, one fading into the next */
/* the pictures run the whole height of the band and off its right edge,
   fading into the sand about halfway so the two sides meet in the middle */
.efade{position:absolute;top:0;right:0;bottom:0;width:min(48%,1000px);}
.efade__stack{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 26%,#000 58%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.45) 26%,#000 58%);}
.efade__s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease;}
.efade__s.is-on{opacity:1;}
.efade__s img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 32%;}
.efade__s figcaption{position:absolute;right:14px;bottom:14px;padding:7px 12px;font-size:var(--text-small);letter-spacing:.02em;
  color:#fff;background:rgba(2,2,2,.55);opacity:0;transition:opacity .35s ease;}
.efade__s.is-on figcaption{opacity:1;transition-delay:.75s;}
@media(prefers-reduced-motion:reduce){.efade__s{transition:none;}}
@media(max-width:1000px){
  .ebrand__copy{max-width:none;}
  .efade{position:relative;width:auto;margin-top:26px;}
  .efade__stack{position:relative;inset:auto;aspect-ratio:16/10;-webkit-mask-image:none;mask-image:none;
    border:1px solid var(--sand-line);}
}

/* the button that follows a tour row */
.pp-row__cta{margin-top:clamp(18px,2vw,24px);}

/* the engine is the reason to open the portal, so its row sits on black,
   full width, while the grid inside stays the same as every other row */
.pp-tour{overflow:hidden;}
.pp-row--key{position:relative;color:#fff;border-top:0;}
.pp-row--key::before{content:"";position:absolute;top:0;bottom:0;left:-50vw;right:-50vw;background:var(--blue);z-index:0;}
.pp-row--key > *{position:relative;z-index:1;}
.pp-row--key h3{color:#fff;}
.pp-row--key p{color:rgba(255,255,255,.82);}
.pp-row--key .pp-list li{color:rgba(255,255,255,.92);}
.pp-row--key .pp-list svg{color:#fff;}
.pp-row--key .pj__n{color:rgba(255,255,255,.62);}
.pp-row--key .pp-zoom{border-color:rgba(255,255,255,.25);box-shadow:0 30px 60px -34px rgba(2,2,2,.55);}
.pp-row + .pp-row--key,.pp-row--key + .pp-row{border-top:0;}

/* ---- free trial: one question at a time ---- */
.trq{display:flex;flex-direction:column;}
.trq__bar{height:3px;background:rgba(255,255,255,.14);overflow:hidden;}
.trq__bar span{display:block;height:100%;width:16%;background:var(--green);transition:width .3s ease;}
.trq__count{margin-top:14px;font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;color:var(--slate-2);}
.trq__q{margin-top:18px;}
.trq__q[hidden]{display:none;}
.trq__q .aform__f span{font-size:var(--heading-4);font-weight:400;letter-spacing:-0.01em;}
.trq__q .aform__f input,.trq__q .aform__f select{margin-top:12px;font-size:var(--text-base);}
.trq__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.trq__nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,2.4vw,28px);}
/* these buttons are flex items, so the hidden attribute needs saying twice */
.trq__nav .btn[hidden]{display:none;}
.trq__nav .btn{min-width:150px;justify-content:center;}
@media(max-width:600px){.trq__pair{grid-template-columns:1fr;}.trq__nav .btn{flex:1 1 auto;}}

/* ---- the engine calculator: weights per service, and coloured scores ---- */
.ecalc__wt{display:inline-flex;flex-direction:column;align-items:center;gap:1px;margin-left:8px;flex:0 0 auto;
  border:1px solid var(--grey-1);background:#fff;padding:2px 4px;line-height:1.1;}
.ecalc__wt input{width:42px;font:inherit;font-size:var(--text-micro);text-align:center;border:0;background:transparent;color:var(--black);padding:0;
  -moz-appearance:textfield;}
.ecalc__wt input::-webkit-outer-spin-button,.ecalc__wt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ecalc__wt i{font-style:normal;font-size:var(--text-micro);color:var(--slate-2);}
.ecalc__share{display:block;font-style:normal;font-size:var(--text-micro);white-space:nowrap;color:var(--slate-2);}
.ecalc .esvc.is-off .ecalc__wt{opacity:.45;}
.ecalc .esvc__sc b.is-ok{color:var(--state-healthy);}
.ecalc .esvc__sc b.is-watch{color:var(--state-monitor);}
.ecalc .esvc__sc b.is-stop{color:var(--state-bottleneck);}
.ecalc .esvc.is-hit .esvc__sc b{color:#fff;}

/* the phone question: country code, then the number */
.trq__phone{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;}
.trq__phone select{flex:0 0 auto;width:auto;max-width:100%;padding-right:38px;margin-top:0;}
.trq__phone input{flex:1 1 240px;min-width:0;margin-top:0;}
@media(max-width:600px){.trq__phone select,.trq__phone input{flex:1 1 100%;}}

/* the writers list: each one opens for editing */
.obs__whead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;}
.obs__whead .btn{font-size:var(--text-small);padding:8px 14px;}
.obs__whead .obs__lab{margin-top:0;}
button.obs__w{width:100%;font:inherit;text-align:left;cursor:pointer;color:var(--black);
  transition:border-color .2s,background .2s;}
button.obs__w:hover{border-color:var(--black);background:#fff;}
button.obs__w.is-on{border-color:var(--blue);background:#fff;}
button.obs__w.is-on i{color:var(--blue);}

/* the way between the blocks and the preview, without scrolling for it */
.obb__jump{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-small);color:var(--blue);white-space:nowrap;}
.obb__jump svg{width:14px;height:14px;flex:0 0 auto;}
.obb__jump:hover{text-decoration:underline;}
.obs__preview,#obbList{scroll-margin-top:calc(var(--navh,68px) + 70px);}
.obs__preview > .obb__top{margin-bottom:6px;}

/* ---- Obsidians: who can sign in ---- */
.obsp__warn{margin-top:14px;}
.obsp__list{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.obsp__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;
  padding:14px 16px;background:#fff;border:1px solid var(--grey-1);}
.obsp__who{display:flex;flex-direction:column;gap:2px;min-width:0;}
.obsp__who b{font-size:var(--text-label);font-weight:500;}
.obsp__who span{font-size:var(--text-small);color:var(--slate-2);word-break:break-word;}
.obsp__role{justify-self:start;font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);
  border:1px solid var(--grey-1);padding:4px 8px;}
.obsp__role.is-admin{color:var(--blue);border-color:var(--blue);}
.obsp__acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.obsp__b{font:inherit;font-size:var(--text-small);color:var(--blue);background:none;border:0;padding:0;cursor:pointer;}
.obsp__b:hover{text-decoration:underline;}
.obsp__b--off{color:var(--state-bottleneck);}
.obsp__you{font-size:var(--text-small);color:var(--slate-2);}
.obsp__reset{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.obsp__reset[hidden]{display:none;}
.obsp__reset input{flex:1 1 200px;min-width:0;font:inherit;font-size:var(--text-label);color:var(--black);background:var(--grey-3);
  border:1px solid var(--grey-1);padding:8px 10px;}
.obsp__reset .btn{font-size:var(--text-small);padding:8px 14px;}
.obsp__add{display:flex;flex-direction:column;gap:12px;}
.obsp__add .btn{justify-content:center;}
.obs__err{margin-top:10px;font-size:var(--text-small);color:var(--state-bottleneck);min-height:1.2em;}
.obsbar__role{margin-left:8px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.45);padding:3px 7px;}
/* hidden must win over the layouts these sit in */
.obs__pickcard[hidden]{display:none;}
.obsbar__nav a[hidden]{display:none;}
@media(max-width:560px){.obsp__row{grid-template-columns:1fr;}}

/* ---- tables in an article ---- */
.blog__table{margin:26px 0 0;}
.blog__tablewrap{overflow-x:auto;border:1px solid var(--grey-1);background:#fff;}
.blog__table table{width:100%;border-collapse:collapse;font-size:var(--text-label);line-height:1.5;}
.blog__table th{padding:13px 16px;background:var(--black);color:#fff;font-weight:400;font-size:var(--text-micro);
  letter-spacing:.14em;text-transform:uppercase;text-align:left;white-space:nowrap;}
.blog__table td{padding:12px 16px;border-top:1px solid var(--grey-1);color:var(--black);vertical-align:top;}
.blog__table tbody tr:nth-child(even) td{background:var(--grey-3);}
.blog__table tbody td:first-child{font-weight:400;}
.blog__table .ta-c{text-align:center;}
.blog__table .ta-r{text-align:right;font-variant-numeric:tabular-nums;}
.blog__table figcaption{margin-top:9px;font-size:var(--text-small);color:var(--slate-2);}

/* ---- building one in the editor ---- */
.obb__tbl{display:flex;flex-direction:column;gap:12px;}
.obb__tbltop{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;}
.obb__f--row{flex-direction:row;align-items:center;gap:8px;}
.obb__f--row select{font:inherit;font-size:var(--text-small);padding:6px 8px;border:1px solid var(--grey-1);background:#fff;}
.obb__tblscroll{overflow-x:auto;}
.obb__tblgrid{border-collapse:collapse;width:100%;}
.obb__tblgrid td{padding:3px;vertical-align:middle;}
.obb__tblcols td{padding-bottom:6px;}
.obb__tblcols select{font:inherit;font-size:var(--text-micro);padding:4px 6px;border:1px solid var(--grey-1);background:#fff;color:var(--slate);}
.obb__tblcols button,.obb__tblrn button{font:inherit;font-size:var(--text-small);line-height:1;color:var(--slate-2);background:none;
  border:0;padding:2px 5px;cursor:pointer;}
.obb__tblcols button:hover,.obb__tblrn button:hover{color:var(--state-bottleneck);}
.obb__tblrn{white-space:nowrap;text-align:right;}
.obb__tblrn i{font-style:normal;font-size:var(--text-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);}
.obb__tblgrid input{width:100%;min-width:130px;font:inherit;font-size:var(--text-label);color:var(--black);background:#fff;
  border:1px solid var(--grey-1);padding:8px 10px;}
.obb__tblgrid input:focus{outline:2px solid var(--blue);outline-offset:-1px;}
.obb__tblacts{display:flex;flex-wrap:wrap;gap:6px;}

/* ---- the articles page: text only, no cover pictures ---- */
.aposts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,22px);margin-top:clamp(18px,2vw,26px);}
/* the row grows past the thumbnail when the writing needs it, so a headline
   is never squeezed to a single clipped line */
.apost{--thumb:clamp(150px,17vw,200px);display:grid;grid-template-columns:var(--thumb) minmax(0,1fr);
  grid-template-rows:minmax(var(--thumb),auto);align-items:stretch;
  background:#fff;border:1px solid var(--grey-1);color:var(--black);transition:border-color .2s,box-shadow .2s;}
.apost:hover{border-color:var(--black);box-shadow:0 14px 30px -22px rgba(2,2,2,.45);}
.apost[hidden]{display:none;}
.apost__cat{font-size:var(--text-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);}
.apost__t{font-size:var(--text-large);font-weight:500;line-height:1.38;letter-spacing:-0.01em;}
.apost:hover .apost__t{color:var(--blue);}
.apost__sub{font-size:var(--text-label);line-height:1.55;color:var(--slate);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:2px;}
.apost__meta{margin-top:auto;padding-top:13px;border-top:1px solid var(--grey-1);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;font-size:var(--text-micro);color:var(--slate-2);}
.apost__meta > span + span::before{content:"\00b7";margin-right:9px;color:var(--slate-3);}
.apost__who{color:var(--black);}
.apost__pic{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:0 0 auto;}
.apost__pic img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:900px){.aposts{grid-template-columns:1fr;}}
@media(max-width:520px){.apost{grid-template-columns:1fr;grid-template-rows:auto auto;}
  .apost__img{aspect-ratio:1/1;height:auto;}}

/* ---- the writer, beside the article ---- */
.blog__sideauth{background:var(--grey-3);border:1px solid var(--grey-1);padding:16px;}
.blog__sideauth .blog__plab{color:var(--slate-2);}
.blog__sidewho{display:flex;align-items:center;gap:12px;margin-top:10px;}
.blog__sidewho b{display:block;font-size:var(--text-label);font-weight:500;}
.blog__sidewho i{display:block;font-style:normal;font-size:var(--text-small);line-height:1.35;color:var(--slate-2);margin-top:2px;}
.blog__sidebio{margin-top:11px;font-size:var(--text-small);line-height:1.55;color:var(--slate);}
.blog__sideauth .blog__aknow{margin-top:8px;}

/* the contents beside the article: closed until asked for */
.blog__toc > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  list-style:none;padding:2px 0;}
.blog__toc > summary::-webkit-details-marker{display:none;}
.blog__toc > summary:hover{color:var(--black);}
.blog__toc > summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.blog__tocx{position:relative;width:9px;height:9px;flex:0 0 auto;}
.blog__tocx::before,.blog__tocx::after{content:"";position:absolute;background:currentColor;transition:transform .2s ease;}
.blog__tocx::before{top:4px;left:0;width:9px;height:1px;}
.blog__tocx::after{left:4px;top:0;width:1px;height:9px;}
.blog__toc[open] .blog__tocx::after{transform:scaleY(0);}

/* ---- the articles page: categories along the top ---- */
.cnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:clamp(20px,2.4vw,28px);}
.cnav__drop{position:relative;display:inline-flex;}
.cnav__b,.cnav__s{font:inherit;font-size:var(--text-small);color:var(--slate);background:#fff;border:1px solid var(--grey-1);
  padding:9px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .2s,border-color .2s,background .2s;}
.cnav__b:hover,.cnav__s:hover{color:var(--black);border-color:var(--slate-3);}
.cnav__b.is-on,.cnav__s.is-on{background:var(--black);border-color:var(--black);color:#fff;}
.cnav__b svg{width:10px;height:7px;opacity:.6;transition:transform .2s ease;}
.cnav__b[aria-expanded="true"] svg{transform:rotate(180deg);}
.cnav__panel{position:absolute;top:100%;left:0;z-index:20;min-width:210px;background:#fff;
  border:1px solid var(--grey-1);box-shadow:0 18px 40px -26px rgba(2,2,2,.5);padding:6px;
  display:flex;flex-direction:column;gap:2px;}
.cnav__panel[hidden]{display:none;}
.cnav__panel .cnav__s{border:0;justify-content:flex-start;text-align:left;padding:8px 12px;font-size:var(--text-small);}
.alist__count{margin-top:14px;font-size:var(--text-small);letter-spacing:.14em;text-transform:uppercase;color:var(--slate-2);}

/* the article cards, with their pictures back */
.apost__img{display:block;width:100%;height:100%;overflow:hidden;background:var(--grey-3);}
.apost__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease;}
.apost:hover .apost__img img{transform:scale(1.03);}
.apost__img--type{background:var(--black);color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(14px,1.6vw,20px);}
.apost__brand{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.apost__tt{font-size:var(--text-large);line-height:1.2;letter-spacing:-0.01em;}
.apost__body{display:flex;flex-direction:column;gap:5px;min-width:0;min-height:0;overflow:hidden;
  padding:clamp(12px,1.2vw,17px);}
.apost__tags{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;}
.apost__subcat{font-size:var(--text-micro);color:var(--slate-2);}
.apost__subcat::before{content:"\00b7";margin-right:7px;color:var(--slate-3);}
.apost__t{margin-top:2px;display:block;flex:0 0 auto;padding-bottom:2px;}

/* the bands and the gatherings below the articles */
.aband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 30px;
  margin-top:clamp(26px,3vw,40px);padding:clamp(20px,2.2vw,30px) clamp(22px,2.4vw,34px);background:var(--black);color:#fff;}
.aband--engine{background:var(--blue);}
.aband__lab{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--green);}
.aband--engine .aband__lab{color:#fff;opacity:.75;}
.aband__t{margin-top:6px;font-size:var(--heading-4);line-height:1.3;letter-spacing:-0.012em;max-width:34ch;}
.aband__p{margin-top:14px;font-size:var(--text-base);line-height:1.6;color:rgba(255,255,255,.72);max-width:54ch;}
.aband--engine .aband__p{color:rgba(255,255,255,.85);}
.aband__pts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.aband__pts li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;font-size:var(--text-label);line-height:1.45;color:rgba(255,255,255,.88);}
.aband__pts svg{width:15px;height:15px;margin-top:3px;color:var(--green);}
.aband--engine .aband__pts svg{color:#fff;}
.aband__act{display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.aband__act .btn{width:100%;justify-content:center;font-size:var(--text-label);padding:16px 22px;}
.aband__note{font-size:var(--text-small);line-height:1.5;color:rgba(255,255,255,.6);}
.aband__second{font-size:var(--text-small);color:#fff;text-decoration:underline;text-underline-offset:3px;}
.apicks,.atopics{margin-top:clamp(26px,3vw,40px);}
.apicks h2,.atopics h2{font-size:var(--heading-3);letter-spacing:-0.01em;}
.apicks .aposts,.atopic .aposts{margin-top:clamp(14px,1.6vw,20px);}
.atopic{margin-top:clamp(20px,2.4vw,30px);}
.atopic h3{font-size:var(--heading-4);font-weight:500;padding-bottom:9px;border-bottom:1px solid var(--grey-1);}
@media(max-width:820px){.aband{grid-template-columns:1fr;}.aband__act{align-items:stretch;}}

/* the subcategories under each category, in the back office */
.catsubs{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.catsub{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;background:var(--grey-3);border:1px solid var(--grey-1);}
.catsub b{font-size:var(--text-small);font-weight:400;color:var(--black);}
.catsub .obsp__b{font-size:var(--text-micro);}

/* the pages under the first set of articles */
.apage{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:clamp(18px,2vw,26px);}
.apage__b,.apage__n{font:inherit;font-size:var(--text-small);color:var(--slate);background:#fff;border:1px solid var(--grey-1);
  padding:9px 14px;cursor:pointer;min-width:42px;transition:color .2s,border-color .2s,background .2s;}
.apage__b:hover:not(:disabled),.apage__n:hover{color:var(--black);border-color:var(--slate-3);}
.apage__n.is-on{background:var(--black);border-color:var(--black);color:#fff;}
.apage__b:disabled{opacity:.4;cursor:default;}

/* the service areas, moved along a card at a time */
.atopic__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:9px;border-bottom:1px solid var(--grey-1);}
.atopic__head h3{padding:0;border:0;}
.arow__nav{display:flex;gap:6px;}
.arow__nav button{width:34px;height:34px;display:grid;place-items:center;background:#fff;border:1px solid var(--grey-1);
  color:var(--black);cursor:pointer;transition:border-color .2s,opacity .2s;}
.arow__nav button:hover:not(:disabled){border-color:var(--black);}
.arow__nav button:disabled{opacity:.35;cursor:default;}
.arow__nav svg{width:15px;height:15px;}
.arow__nav button[data-go="prev"] svg{transform:rotate(180deg);}
.arow__track{--gap:clamp(16px,1.8vw,22px);display:flex;gap:var(--gap);margin-top:clamp(14px,1.6vw,20px);
  overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin;}
.arow__track .apost{flex:0 0 calc((100% - var(--gap)) / 2);scroll-snap-align:start;}
@media(max-width:760px){.arow__track .apost{flex:0 0 100%;}}

/* one article at a time, the full width of the page */
.abig{margin-top:clamp(18px,2.2vw,28px);}
.abig__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--grey-1);}
.abig__head h2{font-size:var(--heading-3);letter-spacing:-0.01em;}
.abig__track{display:flex;gap:0;margin-top:clamp(14px,1.6vw,20px);overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;}
.abig__track::-webkit-scrollbar{display:none;}
.abig__slide{--big:clamp(230px,26vw,380px);flex:0 0 100%;scroll-snap-align:start;
  display:grid;grid-template-columns:var(--big) minmax(0,1fr);grid-template-rows:var(--big);
  background:#fff;border:1px solid var(--grey-1);color:var(--black);transition:border-color .2s;}
.abig__slide:hover{border-color:var(--black);}
.abig__img{display:block;width:100%;height:100%;overflow:hidden;background:var(--grey-3);}
.abig__img img{width:100%;height:100%;object-fit:cover;display:block;}
.abig__img--type{background:var(--black);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.8vw,24px);}
.abig__brand{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.abig__tt{font-size:var(--heading-3);line-height:1.2;letter-spacing:-0.01em;}
.abig__body{display:flex;flex-direction:column;gap:9px;min-width:0;min-height:0;overflow:hidden;
  padding:clamp(20px,2.4vw,36px);justify-content:center;}
.abig__t{font-size:var(--heading-2);font-weight:500;line-height:1.3;letter-spacing:-0.02em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:2px;}
.abig__slide:hover .abig__t{color:var(--blue);}
.abig__sub{font-size:var(--text-base);line-height:1.6;color:var(--slate);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:2px;}
.abig__dots{display:flex;gap:7px;margin-top:14px;}
.abig__dots button{width:26px;height:4px;border:0;padding:0;background:var(--grey-1);cursor:pointer;}
.abig__dots button.is-on{background:var(--black);}
.alist__h1{font-size:var(--heading-1);letter-spacing:-0.02em;line-height:1.05;}
.alist--top{padding-top:clamp(20px,2.6vw,34px);}
@media(max-width:760px){.abig__slide{grid-template-columns:1fr;grid-template-rows:auto auto;}
  .abig__img{aspect-ratio:1/1;height:auto;}}

/* the heading over the whole list, set apart from the carousel above */
.alist__h2{margin-top:clamp(40px,5vw,72px);font-size:var(--heading-3);letter-spacing:-0.01em;
  padding-bottom:10px;border-bottom:1px solid var(--grey-1);}
.alist__h2 + .alist__count{margin-top:12px;}

/* hidden must win over what these sit in */
.abig[hidden],.atopics[hidden],.apicks[hidden]{display:none;}

/* ---------------------------------------------------------------
   The Ecommerce Engine, drawn flat (js/engine2d.js).
   One stage per page. The services feeding each section sit beneath
   the drawing rather than inside it, so the engine stays readable and
   the KPI controls keep their room.
   --------------------------------------------------------------- */
.e2stage{position:relative;background:var(--grey-3);border:1px solid var(--grey-1);overflow:hidden;}
.e2legend{display:none;}
#eng2d{width:100%;display:block;padding:clamp(6px,0.9vw,12px) clamp(6px,1vw,14px);}
#eng2d .e2{width:100%;height:auto;display:block;overflow:visible;}

.e2__tube{fill:url(#e2tube);stroke:var(--grey-1);stroke-width:1.5;
  transition:fill .45s ease,stroke .45s ease;}
.e2 .e2__tube[data-state="ok"]   {fill:#EEF7E9;stroke:#B7D9A5;filter:drop-shadow(0 0 16px rgba(108,170,51,.42));}
.e2 .e2__tube[data-state="watch"]{fill:#EAF4FA;stroke:#A9CFE4;filter:drop-shadow(0 0 16px rgba(51,128,171,.38));}
.e2 .e2__tube[data-state="stop"] {fill:#FCEFED;stroke:#E9B9B4;filter:drop-shadow(0 0 16px rgba(180,72,63,.38));}

.e2__leg{will-change:transform;}
.e2__dot{fill:var(--slate-3);transition:fill .45s ease,opacity .45s ease;}
.e2 .e2__leg[data-state="ok"]    .e2__dot{fill:var(--state-healthy);opacity:.95;}
.e2 .e2__leg[data-state="watch"] .e2__dot{fill:var(--state-monitor);opacity:.88;}
.e2 .e2__leg[data-state="stop"]  .e2__dot{fill:var(--state-bottleneck);opacity:.72;}

.e2__glass{fill:#ffffff;stroke:var(--grey-1);stroke-width:2;stroke-linejoin:miter;
  transition:fill .45s ease,stroke .45s ease;filter:drop-shadow(0 10px 22px rgba(2,2,2,.06));}
.e2__halo{fill:none;stroke-width:16;opacity:.5;transition:stroke .45s ease,opacity .45s ease;
  animation:e2Pulse 3.4s ease-in-out infinite;}
.e2__disc{fill:#ffffff;fill-opacity:.5;stroke:#ffffff;stroke-opacity:.75;stroke-width:1.5;}
.e2__score{fill:var(--black);font-family:var(--font);font-size:29px;font-weight:500;letter-spacing:-0.01em;}
.e2__name{fill:var(--slate-2);font-family:var(--font);font-size:14px;letter-spacing:.18em;text-transform:uppercase;}
@keyframes e2Pulse{0%,100%{opacity:.42;}50%{opacity:.62;}}

.e2 [data-state="ok"]    .e2__halo{stroke:var(--state-healthy);}
.e2 [data-state="watch"] .e2__halo{stroke:var(--state-monitor);}
.e2 [data-state="stop"]  .e2__halo{stroke:var(--state-bottleneck);}
.e2 [data-state="none"]  .e2__halo{stroke:var(--slate-3);}
.e2 [data-state="ok"]    .e2__glass{fill:#eef7e9;stroke:#b7d9a5;}
.e2 [data-state="watch"] .e2__glass{fill:#eaf4fa;stroke:#a9cfe4;}
.e2 [data-state="stop"]  .e2__glass{fill:#fcefed;stroke:#e9b9b4;}
.e2 [data-state="stop"]  .e2__halo{animation-duration:1.5s;}
@media(prefers-reduced-motion:reduce){ .e2__halo{animation:none;} }

/* the services that feed each chamber, in the order the engine reads them */
.e2svcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px);margin-top:clamp(16px,2vw,24px);}
.e2svcs__col{display:flex;flex-direction:column;gap:9px;min-width:0;}
.e2svcs__n{font-size:var(--text-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--slate-2);margin:0;}
.e2svcs__t{font-size:var(--text-large);font-weight:500;letter-spacing:-0.01em;line-height:1.25;margin:0 0 2px;}
.e2svcs .eng__svcs{display:flex;flex-direction:column;gap:8px;max-width:none;margin:0;width:100%;text-align:left;}
@media(max-width:860px){ .e2svcs{grid-template-columns:1fr;gap:20px;} }

/* ---- Try it: the four example blocks, an arrow, and the strategy they produce.
   The steps that used to explain this in prose are gone; the engine below says it. ---- */
.fw__tryit{margin-top:clamp(18px,2.2vw,28px);background:#fff;border:1px solid var(--grey-1);
  padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,24px);}
.fw__tryrow{display:grid;grid-template-columns:minmax(0,1.15fr) auto minmax(0,1fr);
  gap:clamp(14px,1.8vw,24px);align-items:center;}
.fw__arrow{display:flex;align-items:center;justify-content:center;color:var(--slate-3);}
.fw__arrow svg{width:clamp(20px,2vw,28px);height:auto;}
.fw__tryit .fw__gen{margin-top:0;}
@media(max-width:900px){
  .fw__tryrow{grid-template-columns:1fr;}
  .fw__arrow{transform:rotate(90deg);margin:4px auto;}
}
/* each service group sits under the chamber it feeds, so the drawing labels the
   section once and the list below needs no heading of its own */
.fw__stage .e2svcs{margin-top:clamp(8px,1.2vw,14px);padding-inline:12.1%;}
@media(max-width:860px){.fw__stage .e2svcs{padding-inline:0;}}

/* ---- How we work, in three. Hairlines do the dividing instead of boxes, so
   the steps read as one continuous method rather than detached blocks, and each
   opens with a pill-badged number. Below 860px the rules turn horizontal. ---- */
.fw__head--mid{align-items:center;text-align:center;margin-inline:auto;}
/* the home page's two section subtitles are written to land on one line,
   which needs a longer measure than the reading default allows */
.fw--how .sec-head,.fw--engine .sec-head{max-width:none;}
@media(min-width:1001px){
  .fw--how .sec-head .lede,.fw--engine .sec-head .lede{max-width:none;white-space:nowrap;}
}
.fw__how{list-style:none;margin:clamp(26px,3.2vw,44px) 0 0;padding:clamp(22px,2.8vw,38px) 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);
  border-top:1px solid rgba(2,2,2,.14);}
.fw__howstep{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(9px,1vw,13px);
  padding-inline:clamp(0px,1.4vw,22px);}
.fw__howstep + .fw__howstep{border-left:1px solid rgba(2,2,2,.14);}

/* Each step opens with a real screen from the Portal, so the method is shown
   rather than asserted. The frame keeps its own aspect so the three columns
   start level whatever the copy underneath does. */
/* all three step media are 16:9 now - the two films and the call still, so the
   frame matches them exactly: nothing is cropped and nothing is letterboxed */
.fw__howshot{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(2,2,2,.12);border-radius:0;background:#fff;}
.fw__howshot img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block;}
/* Step 1 plays a looping explainer in the same frame the others hold a
   screenshot, so the three columns stay level. The film is 1.985:1 against a
   16/10 frame, so cover trims the sides rather than letterboxing the row. */
.fw__howshot video{width:100%;height:100%;object-fit:contain;display:block;background:#fff;}
@media(prefers-reduced-motion:reduce){
  .fw__howshot video{object-position:center;}
}
/* hard edges, like the buttons and the "Try it" pill — the rounded capsule
   was the one soft shape in an otherwise square-cornered site */
.fw__hown{display:inline-block;background:var(--blue);color:#fff;
  font-size:var(--text-micro);line-height:1;letter-spacing:.04em;
  padding:7px 12px;border-radius:0;}
/* the first step is the one people can act on, so its tag carries the brand
   green rather than the blue the rest of the run uses */
.fw__hown--go{background:var(--green);}
.fw__howcta{margin-top:clamp(6px,.8vw,10px);align-self:flex-start;}
.fw__howh{font-size:var(--text-large);font-weight:500;line-height:1.28;margin:0;color:#020202;}
.fw__howt{font-size:var(--text-base);line-height:1.6;color:var(--slate);margin:0;}
/* Four steps, no pictures, one row across: the columns are text only, so they
   hold four abreast without the shrinking that made the images unreadable. */
.fw__how--4{grid-template-columns:repeat(4,minmax(0,1fr));}
/* six steps run three to a row; the dividing rule belongs between columns,
   and the second row gets its own rule across the top instead */
.fw__how--6{row-gap:0;}
.fw__how--6 .fw__howstep:nth-child(3n+1){border-left:0;}
.fw__how--6 .fw__howstep:nth-child(n+4){
  margin-top:clamp(20px,2.6vw,36px);padding-top:clamp(22px,2.8vw,38px);
  border-top:1px solid rgba(2,2,2,.14);
}
@media(max-width:900px){
  .fw__how--6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fw__how--6 .fw__howstep:nth-child(3n+1){border-left:1px solid rgba(2,2,2,.14);}
  .fw__how--6 .fw__howstep:nth-child(2n+1){border-left:0;}
  .fw__how--6 .fw__howstep:nth-child(n+3){
    margin-top:clamp(20px,2.6vw,36px);padding-top:clamp(22px,2.8vw,38px);
    border-top:1px solid rgba(2,2,2,.14);
  }
}
/* a link inside a step has to look like one */
.fw__howt a,.fw__howh a{color:var(--blue);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;}
.fw__howt a:hover,.fw__howh a:hover{color:var(--black);}
@media(max-width:860px){
  .fw__how{grid-template-columns:1fr;gap:0;}
  .fw__howstep{padding-inline:0;padding-block:clamp(18px,3vw,26px);}
  .fw__howstep + .fw__howstep{border-left:0;border-top:1px solid rgba(2,2,2,.14);}
}
@media(max-width:900px){
  .fw__how--4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(22px,3vw,32px);}
  .fw__how--4 .fw__howstep + .fw__howstep{border-left:0;}
  .fw__how--4 .fw__howstep:nth-child(even){border-left:1px solid rgba(2,2,2,.14);}
  .fw__how--4 .fw__howstep:nth-child(n+3){border-top:1px solid rgba(2,2,2,.14);padding-top:clamp(22px,3vw,32px);}
}
@media(max-width:560px){
  .fw__how--4{grid-template-columns:1fr;row-gap:0;}
  .fw__how--4 .fw__howstep{padding-inline:0;padding-block:clamp(18px,3vw,26px);}
  .fw__how--4 .fw__howstep:nth-child(even){border-left:0;}
  .fw__how--4 .fw__howstep + .fw__howstep{border-top:1px solid rgba(2,2,2,.14);}
}
/* the sticky header must not sit over the section the step links to */
#services{scroll-margin-top:80px;}

/* ---- On the home page the engine stands on the section itself: no panel, no
   grey plate behind the drawing, and the services directly beneath it. The
   calculator on engine.html keeps its panel, so this is scoped to .fw. ---- */
.fw .fw__stage{background:none;border:0;padding:clamp(8px,1vw,14px) 0 0;}
.fw .e2stage{background:none;border:0;}
.fw .fw__stage .e2svcs{margin-top:clamp(2px,0.6vw,8px);}

/* The centred hero is roomy on a desktop, but four stacked groups plus that
   padding overran a phone screen, so the air is dialled back at narrow widths. */
@media(max-width:760px){
  .hero__in{padding-block:clamp(34px,7vw,48px);}
  .hero__lead{gap:clamp(16px,3.4vw,22px);}
  .hero__offer{gap:10px 14px;}
}

/* ---- The client logo bar: a single row that slides continuously. The set is
   repeated once in the markup, so shifting the track by half its width loops
   seamlessly. Marks are knocked back to white to sit on the dark hero. ---- */
/* The proof band: the client marks and the founders' line now sit on the black
   trial CTA, so the invitation lands where the evidence is. The marks need no
   recolouring here — white is what the base .logobar rule already draws. */
/* the generic section padding put 68px over the headline and nothing under
   the button, so the band read top-heavy. The air is redistributed: less
   over the line, a proper gap under the text and the button. */
.band.proof{padding-block:clamp(24px,2.8vw,36px);}
.proof .band__in{padding-block:clamp(4px,0.5vw,8px) clamp(20px,2.3vw,30px);flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px clamp(18px,2vw,30px);}
/* the founders' line has gone from this band, so the marks run its full width */
/* the marks sit close under the line, on a hairline rather than a gap */
.proofrow{display:block;padding-block:clamp(14px,1.6vw,20px);
  border-top:1px solid rgba(255,255,255,.14);}

/* The logo bar shows five marks at a time. The set is repeated once, so the
   track is 36 slots wide and shifting it by half lands on an identical frame. */
.logobar{position:relative;overflow:hidden;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.logobar__track{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  width:600%;animation:logobarRun 46s linear infinite;}
.logobar__track li{flex:0 0 calc(100% / 24);display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(5px,0.6vw,11px);}
.logobar__track img{max-width:100%;height:clamp(30px,3.3vw,46px);width:auto;display:block;
  filter:brightness(0) invert(1);opacity:.6;transition:opacity .25s ease;}
.logobar__track li:hover img{opacity:.95;}
/* the numbered exports sit in a padded 300x150 box, so they need more height */
.logobar__track img[src*="about/client-"]{height:clamp(43px,4.7vw,63px);}
/* The track is 24 slots (the set of 12, repeated once), so the number of
   marks on screen is 2400/width%. A wide display earns more of them
   rather than more space between them; the half-track shift that makes
   the loop seamless holds at every width. */
@media(min-width:560px){.logobar__track{width:400%;}}      /* 6 marks  */
@media(min-width:900px){.logobar__track{width:300%;}}      /* 8 marks  */
@media(min-width:1400px){.logobar__track{width:266.666%;}} /* 9 marks  */
@media(min-width:1700px){.logobar__track{width:240%;}}     /* 10 marks */
@media(min-width:2200px){.logobar__track{width:218.181%;}} /* 11 marks */
@keyframes logobarRun{from{transform:translateX(-50%);}to{transform:translateX(0);}}
@media(prefers-reduced-motion:reduce){
  .logobar__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}
}

/* ---- The engine section, put in order. The prompt, the four example blocks
   and the strategy they produce are gathered onto one quiet panel, so they read
   as a single control rather than five things adrift on the background; the
   drawing itself keeps the open ground, which is the part worth floating.
   Scoped to .fw--engine, so the calculator on engine.html is untouched. ---- */
.fw--engine .fw__head{align-items:flex-start;text-align:left;margin-inline:0;}
.fw--engine .fw__head h2 .fw__h2b{display:block;margin-top:7px;}

/* the panel lines up with the engine drawing below it: both are children of
   the same .wrap, so dropping the 1250px cap makes their left and right
   edges identical at every width. Hard edges, like the rest of the site. */
.fw--engine .fw__tryit{margin:clamp(26px,3vw,40px) auto 0;
  max-width:100%;background:#fff;border:1px solid rgba(2,2,2,.10);
  border-radius:0;padding:clamp(18px,2vw,26px) clamp(16px,2vw,28px);
  display:flex;flex-direction:column;align-items:center;}
.fw--engine .fw__hint{justify-content:center;margin:0 0 clamp(14px,1.6vw,20px);text-align:center;}
/* the four example blocks hold one row: they share the width equally and are
   allowed to shrink, so the row never breaks onto a second line */
.fw--engine .fw__opts{display:flex;flex-wrap:nowrap;justify-content:center;
  gap:clamp(6px,0.8vw,12px);margin-top:0;width:100%;}
.fw--engine .fw__opt{flex:1 1 0;min-width:0;min-height:0;
  padding:10px 12px;gap:9px;}
/* The four example blocks hold one row at every width. The label inside holds
   one line too, but only where it genuinely fits: below ~1200px "Low open rate
   in email marketing" would need ~9px type to stay on one line, so nowrap is
   lifted there and it wraps rather than being clipped mid-word. */
.fw--engine .fw__opt .fw__lbl{min-width:0;white-space:normal;}
@media(min-width:1200px){
  .fw--engine .fw__opt .fw__lbl{white-space:nowrap;}
}
/* The prompt is hidden site-wide once the picker has been used, but it is hidden
   by visibility, so its empty band stayed behind and left the panel lopsided.
   Here it simply stays: the panel is then exactly one height, always. */
.fw--engine .fw__tryit.is-used .fw__hint{visibility:visible;}
/* the drawing stands clear of the panel that drives it */
/* the engine sits in the same white box as the picker above it, so the two
   read as one panel rather than a card followed by a loose diagram */
.fw--engine .fw__stage{
  margin-top:clamp(14px,1.6vw,20px);
  background:#fff;border:1px solid rgba(2,2,2,.1);border-radius:0;
  padding:clamp(20px,2.4vw,30px) clamp(18px,2.2vw,28px);
}
/* on a phone there is no width to share, so they stack instead */
@media(max-width:620px){
  .fw--engine .fw__opts{flex-wrap:wrap;flex-direction:column;align-items:stretch;}
  .fw--engine .fw__opt{flex:0 0 auto;}
}

/* ---- The KPI rows read as a table, so they carry column headings. The heading
   is an li inside .esvc__k, which already indents its list by 9px, so the
   heading drops its own left padding to sit flush with the values beneath it.
   "vs" before the goal was doing the job the Target heading now does, so it
   goes. Scoped to .fw--engine: engine.html's calculator rows are a different
   shape (three tracks, with inputs) and must not inherit any of this. ---- */
.fw--engine .esvc__khead{padding-left:0;}
/* A table needs one set of columns, not one per row. Each li was its own grid,
   so every row sized its own tracks and the headings sat wide of the values
   beneath them. The list itself becomes the grid and the rows dissolve into it,
   so every cell shares a track and the numbers line up under their heading. */
.fw--engine .esvc__k{display:grid;grid-template-columns:minmax(min-content,1fr) auto auto auto;
  gap:5px 9px;align-items:baseline;}
/* The label column was nowrap inside a minmax(0,1fr) track, so a long KPI name
   ("Checkout completion") could not wrap and the track collapsed to zero width
   instead: the heading then overlapped the value beside it. Letting the name
   wrap, and giving the track a min-content floor, keeps all four columns inside
   the 228px the accordion has to spend. */
.fw--engine .esvc__kl{white-space:normal;line-height:1.3;}
.fw--engine .esvc__k > li{display:contents;}
/* the orphaned heading style used --slate-3, which is ~1.6:1 on white and all
   but invisible; these are the labels that make the table readable, so they take
   a colour that can actually be read, and less tracking to fit a narrow column */
/* uppercase cost ~58px across the four headings, which this column cannot
   afford, so the headings read in sentence case */
.fw--engine .esvc__khead > span{font-size:var(--text-micro);letter-spacing:0;
  text-transform:none;color:var(--slate);font-weight:500;
  padding-bottom:3px;border-bottom:1px solid rgba(2,2,2,.10);}
/* the three numeric columns read from the right, headings included */
.fw--engine .esvc__khead > span:not(:first-child),
.fw--engine .esvc__k .esvc__cur,
.fw--engine .esvc__k .esvc__goal{justify-self:end;}
.fw--engine .esvc__goal::before{content:none;}

/* ---- The band headline holds one line, so it takes the full width of the band
   instead of sharing the row with the button: the supporting line and the call
   to action drop beneath it. The site-wide 44ch cap is lifted here, and the size
   eases down with the viewport so the sentence stays unbroken. ---- */
.proof .band__t{max-width:none;flex:1 1 auto;min-width:0;font-size:clamp(17px,1.75vw,26px);line-height:1.3;}
.proof__foot{flex:0 0 auto;margin-top:0;display:flex;align-items:center;}
.proof__foot .band__sub{margin-top:0;}
.proof__foot .cta-pair{flex:0 0 auto;}

/* ---- Qualification: the site's second call to action, asked rather than
   stated. The section is centred on its own axis - heading, card and the three
   stages all share one centre line - because a left-aligned 684px card left
   663px of the band empty beside it. The .qual namespace belongs to six other
   pages, so this one is .qz. The options borrow the engine picker's idiom,
   dot and label and arrow, so choosing here feels like choosing there. ---- */
/* the band carries a ground so the white card reads as a surface; vacating
   the shared .qual namespace took away the grey it had been borrowing */
/* ---- The second call to action, so the band carries green rather than another
   grey. White on the brand #6CAA33 is only 2.82:1 - under even the 3.0 large-text
   floor - so the band deepens to #4F821F, where white reaches 4.62:1 and passes
   for body copy. The brand green stays on the pills and buttons in the card. ---- */
#qualify{background:#4F821F;}
#qualify .eyebrow{color:rgba(255,255,255,.74);}
#qualify .qz__head h2{color:#fff;}
#qualify .qz__lede{color:rgba(255,255,255,.88);}
/* Two columns: the ask on the left, the quiz on the right. Centred and stacked,
   this band ran 785px tall and was a lot of green. */
/* Two columns: the ask and the stages note stack on the left, the quiz holds
   the right across both rows. Centred and stacked this band ran 785px tall. */
/* Two columns: the ask on the left, the quiz on the right. Centred and stacked
   this band ran 785px tall and was a great deal of green. */
.qz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(26px,3.6vw,60px);align-items:center;
  padding-block:clamp(26px,2.8vw,40px);}
.qz__head{max-width:none;align-items:flex-start;text-align:left;margin:0;}
/* the headline sat at 50px over 14px options - 3.6x - so the page read as a
   chapter opener with a form parked under it. Stepped down one level, the
   card becomes the thing you look at. */
.qz__head h2{font-size:var(--heading-3);line-height:1.15;}
.qz__lede{font-size:var(--text-base);line-height:1.6;max-width:44ch;margin-inline:0;}

/* the card is a surface: white on the band, not the 2% difference it had */
.qz__card{max-width:none;margin:0;background:#fff;border:1px solid var(--grey-1);
  box-shadow:0 18px 40px -30px rgba(2,2,2,.45);padding:clamp(22px,2.4vw,32px);}
.qz__bar{height:4px;background:var(--grey-1);border-radius:999px;overflow:hidden;}
.qz__bar span{display:block;height:100%;width:0;background:var(--green);
  border-radius:999px;transition:width .35s ease;}
.qz__count{display:inline-block;margin-top:clamp(16px,1.8vw,22px);background:var(--green);color:#fff;
  font-size:var(--text-micro);line-height:1;letter-spacing:.04em;padding:7px 12px;border-radius:999px;}
.qz__count[hidden]{display:none;}
.qz__q[hidden]{display:none;}
.qz__ask{margin-top:clamp(14px,1.6vw,18px);font-size:clamp(19px,1.65vw,24px);
  font-weight:500;letter-spacing:-0.012em;line-height:1.3;color:var(--black);}
.qz__opts{display:flex;flex-direction:column;gap:9px;margin-top:clamp(16px,1.8vw,22px);}
.qz__opt{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;
  font:inherit;font-size:var(--text-base);line-height:1.35;text-align:left;color:var(--black);
  background:#fff;border:1px solid var(--slate-3);box-shadow:0 2px 0 var(--grey-1);
  padding:13px 16px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s,transform .18s,box-shadow .18s;}
.qz__dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--slate-2);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;}
.qz__lbl{flex:1 1 auto;min-width:0;}
.qz__go{flex:0 0 auto;width:15px;height:15px;opacity:.4;transition:transform .2s ease,opacity .2s ease;}
.qz__opt:hover{border-color:var(--black);transform:translateY(-2px);
  box-shadow:0 12px 20px -14px rgba(2,2,2,.55);}
.qz__opt:hover .qz__go{opacity:1;transform:translateX(3px);}
.qz__opt:hover .qz__dot{background:var(--green);border-color:var(--green);
  box-shadow:0 0 0 3px rgba(108,170,51,.18);}
.qz__opt:active{transform:translateY(0);}
.qz__opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.qz__opt.is-on{background:var(--black);border-color:var(--black);color:#fff;
  box-shadow:0 12px 20px -14px rgba(2,2,2,.7);}
.qz__opt.is-on .qz__dot{background:var(--green);border-color:var(--green);
  box-shadow:0 0 0 3px rgba(108,170,51,.3);}
.qz__opt.is-on .qz__go{opacity:1;}

/* In the verdict state the counter pill is hidden, and it was the only thing
   putting space under the progress bar - so the flag sat against it. */
.qz__out{margin-top:clamp(16px,1.8vw,22px);}
.qz__out[hidden]{display:none;}
.qz__flag{display:inline-flex;align-items:center;font-size:var(--text-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--green);
  padding:6px 12px;border-radius:999px;}
.qz__out--no .qz__flag{background:var(--slate);}
.qz__out--past .qz__flag{background:var(--blue);}
.qz__verdict{margin-top:clamp(14px,1.6vw,18px);font-size:var(--heading-4);font-weight:500;
  line-height:1.25;letter-spacing:-0.015em;color:var(--black);}
.qz__why{margin-top:12px;font-size:var(--text-label);line-height:1.65;color:var(--slate);}
.qz__cta{margin-top:clamp(16px,2vw,22px);}
/* the card's content is left-aligned, so the nav follows it rather than
   floating centred under it */
.qz__nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,1.8vw,22px);}
.qz__nav .btn[hidden]{display:none;}
.qz__nav .btn{font-size:var(--text-small);padding:9px 16px;}

/* the three stages stay available, centred under the card */

@media(max-width:900px){
  .qz{grid-template-columns:1fr;gap:clamp(20px,3vw,28px);}
}
@media(max-width:560px){
  .qz__card{padding:18px 16px;}
}

/* ---- The film sits under the free trial offer, centred on the hero's own axis
   rather than in the old right-hand column. .vsl was written to fill the height
   of that column, so it reverts to its natural height here. ---- */
.hero__vsl{width:100%;max-width:min(100%,720px);margin-inline:auto;}
.hero__vsl .vsl{height:auto;}


/* ==========================================================================
   === PHONE LAYOUT ===  (<=700px)
   The phone is treated as its own layout rather than a narrowed desktop.
   Appended last so it settles ties with everything above it.
   ========================================================================== */
@media(max-width:700px){

  /* ---- the header is one compact row: the mark on the left, the menu on
     the right. It was wrapping onto three rows (mark / trial button / burger)
     and, being sticky, carried 186px of chrome down the whole page. The trial
     button is not lost: the bar pinned to the bottom carries it everywhere. */
  /* the row stays wrap: the drawer is a flex-basis:100% sibling and needs a
     second line to land on. With the trial button gone the mark, the portal
     icon and the burger fit the first line on their own. */
  .nav__in{flex-wrap:wrap;height:auto;min-height:56px;padding-block:0;gap:10px;align-content:center;}
  .nav__logo{flex:0 1 auto;min-width:0;}
  .nav__logo img{width:min(146px,46vw);height:auto;}
  .nav__act{order:2;margin-left:auto;gap:2px;flex:0 0 auto;}
  .nav__act .btn--green{display:none;}
  .nav .nav__login span{display:none;}
  .nav .nav__login{min-width:44px;min-height:44px;padding:0;justify-content:center;}
  .nav__burger{order:3;flex:0 0 auto;margin-right:-10px;}

  /* the drawer scrolls on its own rather than growing the sticky header past
     the height of the screen */
  .nav__menu{
    order:4;margin:0;
    max-height:calc(100vh - 56px);max-height:calc(100dvh - 56px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:6px 0 calc(22px + env(safe-area-inset-bottom));
  }

  /* ---- everything you tap clears 44px ---- */
  .nav__link{padding:14px 2px;}
  .nav__svc{padding:14px 12px;}
  .nav__panelfoot{padding-block:14px;}
  .esvc__n{padding:14px 11px;font-size:13px;}
  .hero__badge{min-height:44px;}   /* it is a link to the trial, so it is a target */
  .waprompt__x{width:44px;height:44px;}
  .waprompt__q{padding-block:12px;}
  .rtool{padding-block:13px;}

  /* ---- the bottom bar: both labels hold one line ---- */
  .sticky{padding:10px 14px calc(10px + env(safe-area-inset-bottom));}
  .sticky__pair{gap:8px;}
  .sticky__pair .btn{padding-inline:12px;font-size:14px;white-space:nowrap;min-height:46px;}

  /* ---- the WhatsApp card never grows past the screen ---- */
  .waprompt{max-height:calc(100dvh - 210px);overflow-y:auto;overscroll-behavior:contain;}

  /* ---- the engine drawing: its labels cannot be read at quarter size, so
     the names and scores are read from the legend underneath instead ---- */
  .e2__name{display:none;}
  .e2__score{font-size:50px;}
  .e2legend{
    display:grid;gap:1px;list-style:none;margin:0;padding:0;
    background:var(--grey-1);border-top:1px solid var(--grey-1);
  }
  .e2legend li{display:flex;align-items:center;gap:10px;background:#fff;padding:12px 14px;font-size:14px;line-height:1.3;}
  .e2legend__dot{width:9px;height:9px;flex:0 0 auto;background:var(--slate-3);}
  .e2legend li[data-state="ok"]    .e2legend__dot{background:var(--state-healthy);}
  .e2legend li[data-state="watch"] .e2legend__dot{background:var(--state-monitor);}
  .e2legend li[data-state="stop"]  .e2legend__dot{background:var(--state-bottleneck);}
  .e2legend__n{flex:1 1 auto;min-width:0;color:var(--black);}
  .e2legend__v{font-weight:500;font-variant-numeric:tabular-nums;color:var(--black);}

  /* ---- the last few taps under 44px ---- */
  .fw--engine .fw__opt{min-height:48px;}
  .pt{min-height:46px;}

  /* ---- nothing on the page sets smaller than 13px ---- */
  .case__ind{font-size:13px;}
}

/* ---- how the SEO credits work: plain prose on a readable measure, with the
   opening and closing lines carrying more weight than the two between ---- */
.svcred{margin-top:clamp(18px,2.2vw,26px);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:start;}
.svcred__txt{max-width:var(--measure);}
.svcred__fig{margin:0;}
.svcred__fig img{width:100%;height:auto;display:block;border:1px solid var(--grey-1);background:#fff;}
.svcred__fig figcaption{margin-top:12px;font-size:var(--text-small);line-height:1.6;color:var(--slate-2);}
@media(max-width:900px){.svcred{grid-template-columns:1fr;gap:clamp(24px,3vw,32px);}}
.svcred p{font-size:var(--text-label);line-height:1.7;color:var(--slate);}
.svcred p + p{margin-top:14px;}
.svcred p.svcred__lead{font-size:var(--text-large);line-height:1.5;color:var(--black);}
.svcred p.svcred__close{color:var(--black);font-weight:500;}
.svcred a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
.svcred a:hover{color:var(--black);}

/* ---- The service hero borrows the homepage hero wholesale: centred, dark,
   the green trial pill and the countdown. No film, and where the homepage
   shows its awards this shows the tools the work is done with. ---- */
.hero--svc h1{max-width:19ch;margin-inline:auto;}
.hero--svc .svchero__lede{margin-top:0;margin-inline:auto;max-width:min(72ch,900px);font-size:clamp(19px,1.85vw,26px);}
.hero--svc .svchero__lede + .svchero__lede{margin-top:clamp(12px,1.2vw,16px);}
/* the tiles are fixed rather than taking turns: a toolkit is a list, not a story */
.stackrow__tiles{grid-template-columns:repeat(6,minmax(0,150px));align-items:center;}
.atile--static{opacity:1;cursor:default;padding:12px 6px;}
.atile--static .atile__lab{font-size:var(--text-label);letter-spacing:.02em;color:rgba(255,255,255,.72);}
@media(max-width:860px){.stackrow__tiles{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.stackrow__tiles{grid-template-columns:repeat(2,1fr);}}

/* The homepage hero lifts its topography out of the black with a blue cast and
   a green counterweight. The service heroes had the pattern on flat black, so
   it barely read; this is the same wash, as a layer under the pattern. */
.hero--svc::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(110% 80% at 20% 20%, rgba(51,128,171,.22) 0%, rgba(2,2,2,0) 60%),
    radial-gradient(90% 70% at 85% 85%, rgba(108,170,51,.13) 0%, rgba(2,2,2,0) 62%);
}
/* both headlines set in two lines: the h1 takes the full row rather than the
   1180px the lead column caps it at, which was forcing a third line */
.hero h1{max-width:none;}
.hero__lead > h1{width:100%;}
.hero--svc h1{max-width:30ch;}

/* The homepage headline is 87 characters against the service pages' 48, so at
   the shared heading-1 its longer line needs ~1580px in a 1294px row and spills
   to a fourth line. Sized to the width instead, which holds it at two lines and
   still sets it well clear of the 40px h2 below. */
/* Two lines, one sentence each. The longer sentence needs 933px at 52px, so
   the size is tied to the width of the copy column rather than set flat:
   2.85vw is the largest that keeps it on one line from 1000px upward. */
/* The cap is the largest the copy column can carry with each sentence still
   on one line: measured at 44.7px on a 1512 row and 57.8 on a 1920 one, so
   58 lets the headline grow into the space instead of floating in it. */
.home .hero h1{font-size:clamp(24px,2.85vw,58px);}

/* The homepage hero reads across: the headline and the offer set flush left,
   the film flush right on the same row, and the awards run under both. The
   service heroes have no film, so they keep their centred column. */
/* flush with the mark in the nav and the awards row below: the copy column
   fills its grid track instead of shrink-wrapping and drifting 20px right */
.home .hero__lead{align-items:flex-start;text-align:left;
  width:100%;max-width:none;margin-inline:0;}
/* the film fills its track rather than stopping at a fixed 640px */
.home .hero__vsl{margin-inline:0 0;margin-left:auto;max-width:100%;}
@media(max-width:1000px){
  .home .hero__lead{align-items:center;text-align:center;}
  .home .hero__vsl{margin-inline:auto;}
}

/* ---- The homepage hero opens on exactly one screen: the headline, the trial
   offer and the film, centred in the space under the nav. The awards begin
   immediately after it, so they sit just past the fold and are found by
   scrolling rather than competing for the first view. The nav is sticky and
   ~62px, and vh is not adjusted for the root zoom, hence the divide. ---- */
@media(min-width:1001px){
  .home .hero{min-height:0;}
  /* nothing follows the top row inside the hero now, so the foot padding
     goes and the hero measures exactly one screen */
  .home .hero__in{padding-block:clamp(40px,4vw,64px) 0;}
  .home .hero__top{
    min-height:calc(100vh / var(--zoom,1) - 69px - clamp(40px,4vw,64px));
    min-height:calc(100svh / var(--zoom,1) - 69px - clamp(40px,4vw,64px));
    /* centred, but against a box padded at the foot, so the copy and the
       film sit above the middle rather than on it */
    align-content:center;padding-bottom:clamp(90px,16vh,220px);
  }
}

/* ---- The hero background film ---------------------------------------------
   It sits at the very back of the hero. The placeholder gradient above it
   keeps its blue and green washes but loses its opaque base, so the film shows
   through tinted rather than replaced, and a flat dark layer holds the white
   copy legible over whatever the frame happens to be. ---- */
.hero__bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.hero.has-herovid .hero__placeholder{background:rgba(0,0,0,.40);}
@media(prefers-reduced-motion:reduce){.hero__bg{display:none;}}

/* ---- The bar over a dark hero -------------------------------------------
   At the very top of a page that opens on one of the dark heroes the bar has
   no ground of its own: the hero runs behind it and the wording is white.
   js/navtop.js adds .is-clear at the top and drops it on the first scroll, so
   below the fold the usual light bar returns. Pages that open on light ground
   never get the class. ---- */
/* The dark hero starts at the very top of the page and the bar sits over it,
   so the film and the pattern run behind the bar instead of beginning under
   it. The pull up and the padding are equal, so nothing inside the hero
   moves; only the ground behind the bar changes. js/navtop.js measures the
   bar and writes --navh, because its height differs across the breakpoints. */
.under-nav{margin-top:calc(var(--navh,69px) * -1);padding-top:var(--navh,69px);}
.nav{transition:background .25s ease,border-color .25s ease,-webkit-backdrop-filter .25s ease,backdrop-filter .25s ease;}
.nav.is-clear{
  background:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom-color:transparent;
}
.nav.is-clear .nav__logo img{filter:brightness(0) invert(1);}
.nav.is-clear .nav__link{color:rgba(255,255,255,.76);}
.nav.is-clear .nav__link:hover,
.nav.is-clear .nav__link.is-here{color:#fff;}
.nav.is-clear .nav__login,.nav.is-clear .nav__quiet{color:rgba(255,255,255,.76);}
.nav.is-clear .nav__login:hover,.nav.is-clear .nav__quiet:hover{color:#fff;}
.nav.is-clear .nav__quiet.is-here{color:#fff;}
.nav.is-clear .nav__burger span{background:#fff;}
/* the drawer and the panels have light ground of their own, so while either is
   open the bar takes its solid state back or the wording would be unreadable */
.nav.is-clear:has(.nav__burger[aria-expanded="true"]),
.nav.is-clear:has(.nav__panel:not([hidden])){
  background:rgba(249,249,249,.94);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(2,2,2,.08);
}
.nav.is-clear:has(.nav__burger[aria-expanded="true"]) .nav__logo img,
.nav.is-clear:has(.nav__panel:not([hidden])) .nav__logo img{filter:none;}
.nav.is-clear:has(.nav__burger[aria-expanded="true"]) .nav__link,
.nav.is-clear:has(.nav__panel:not([hidden])) .nav__link{color:var(--slate);}
.nav.is-clear:has(.nav__burger[aria-expanded="true"]) .nav__link.is-here,
.nav.is-clear:has(.nav__panel:not([hidden])) .nav__link.is-here{color:var(--black);}
.nav.is-clear:has(.nav__burger[aria-expanded="true"]) .nav__burger span,
.nav.is-clear:has(.nav__panel:not([hidden])) .nav__burger span{background:var(--black);}
.nav.is-clear:has(.nav__burger[aria-expanded="true"]) .nav__login,
.nav.is-clear:has(.nav__panel:not([hidden])) .nav__login{color:var(--slate);}

/* ---- The hero film, opened large ------------------------------------------
   The poster in the hero is only a few hundred pixels wide, so pressing it
   lifts the film onto the page at the size of the window instead of playing
   it in place. It keeps the form modal's scrim and z-index. ---- */
.vmodal{padding:clamp(16px,3vw,48px);}
.vmodal__panel{
  position:relative;z-index:1;width:100%;
  max-width:min(100%, calc((100vh - 140px) * 16 / 9), 1400px);
}
.vmodal__frame{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border:1px solid rgba(255,255,255,.14);overflow:hidden;
}
.vmodal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.vmodal__close{
  position:absolute;top:-46px;right:0;
  width:38px;height:38px;border:1px solid rgba(255,255,255,.3);background:transparent;
  color:#fff;font-size:var(--text-large);line-height:1;cursor:pointer;font-family:var(--font);
  transition:border-color .18s ease,background .18s ease;
}
.vmodal__close:hover{border-color:#fff;background:rgba(255,255,255,.1);}
@media(max-width:700px){.vmodal__close{top:-42px;width:34px;height:34px;}}

/* the line under the hero film, offered quietly rather than sold */
.hero__vslcap{
  margin:10px 0 0;text-align:right;
  font-size:var(--text-small);font-style:italic;font-weight:300;
  line-height:1.45;color:rgba(255,255,255,.6);
}

/* ---- Who we are: the standing on which the awards below it rest ---------- */
.who{background:var(--grey-3);position:relative;overflow:hidden;}
.who .wrap{position:relative;z-index:1;}


.who .sec-head{align-items:flex-start;text-align:left;}
/* the words are theirs, so they are set as a quotation with the two of them
   named underneath, and a picture of the room alongside */
.who__copy{max-width:none;margin-top:clamp(16px,1.8vw,24px);text-align:center;}
.who__quote{margin:0;}
/* with the heading gone the words carry the section on their own, so they are
   set at statement size rather than body size */
.who__quote p{font-size:clamp(19px,2.05vw,29px);line-height:1.45;font-weight:300;
  letter-spacing:-0.012em;color:var(--black);}
.who__quote p + p{margin-top:clamp(15px,1.6vw,23px);}


/* The awards sit on the section's own light ground, so every word written for
   the dark hero is turned dark here. */
/* the trophies follow straight on from the words: no rule between them, and
   none of the standing-off the hero version needed. Everything in this
   section reads from the left, the row of tiles and their wording included. */
/* the awards lead the section now, so the gap that used to separate them from
   the copy above is dead space */
.who .awards{margin-top:0;padding-top:0;border-top:0;}
/* The row of tiles begins at the section's left edge, but each tile is its own
   container: inside it the trophy and its label sit centred. The longest label
   needs 105px of a 128px tile, so it holds one line. */

.who .atile{align-items:center;padding-left:4px;padding-right:4px;}
/* the trophies carry this section on their own now, so they are given more
   room than the row that used to sit under the hero */

.who .atile__lab{text-align:center;white-space:normal;text-wrap:balance;
  max-width:min(100%,150px);margin-inline:auto;line-height:1.35;}
/* the timer runs the whole width of its tile, edge to edge, rather than the
   inset stub the centred version used */
.who .atile__bar{left:0;right:0;width:auto;border-radius:0;}


.who .awards__detail .trustbar{justify-content:flex-start;}
/* Every trophy is shown at full strength; the timer line under the active one
   carries the selection. The 12% lift the dark version uses blows out the
   white Google, Shopify and GPTW plaques, so here it is barely there. */
.who .atile,.who .atile:hover,.who .atile .atile__img{opacity:1;}


/* ---- The award shelf -------------------------------------------------
   Eight trophies in a single row left each one about 150px wide, which is
   too small for work this section is meant to lead on. On a desktop they
   run four across in two rows, so each gets roughly twice the width, and
   the award being shown sits in its own column beside them rather than
   stranded underneath. ------------------------------------------------ */


/* ---- The case ---------------------------------------------------------
   The trophies were floating on the section's own grey with nothing to hold
   them. Each one now sits in its own white case with a hairline edge, the
   live one marked by a green bar across its head, and the award being shown
   reads out of a sand panel with a green spine. --------------------------- */
.who .awards__eyebrow{
  display:flex;align-items:center;gap:16px;margin:0 0 clamp(18px,2vw,28px);
  font-size:var(--text-micro);letter-spacing:.18em;text-transform:uppercase;
  color:var(--green);font-weight:500;
}
.who .awards__eyebrow i{flex:1;height:1px;background:var(--grey-1);}
.who .awards__eyebrow b{font-weight:500;color:var(--slate-2);letter-spacing:.14em;}



/* the timer reads as the case's header rule rather than a stub at its foot */
.who .atile__bar{top:-1px;bottom:auto;left:-1px;right:-1px;height:3px;border-radius:0;}

/* ---- The award carousel ----------------------------------------------
   Five trophies on the rail at a time, the live one on the centre line and
   much larger than its neighbours. Nothing is boxed: the scale, the colour
   and the label carry the selection. Slots are a fifth of the stage, so the
   same percentage drives both the tile width and the shift, and the script
   only has to set --i. --------------------------------------------------- */
/* the rail's controls sit outside the stage, so the edge fade cannot dim them */
.awrail{position:relative;}
.awnav{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--grey-1);border-radius:0;
  color:var(--slate);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.awnav svg{width:22px;height:22px;}
.awnav:hover{color:var(--black);border-color:var(--slate-3);box-shadow:0 6px 18px rgba(2,2,2,.08);}
.awnav:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.awnav--prev{left:0;}
.awnav--next{right:0;}
@media(max-width:700px){
  .awnav{width:44px;height:44px;}
  .awnav svg{width:20px;height:20px;}
}

.awstage{
  --step:20%;
  position:relative;overflow:hidden;
  /* the live tile grows upward from its baseline, so the stage carries the
     headroom that growth needs or the clip cuts the trophy's head off */
  padding-block:clamp(54px,5.2vw,78px) clamp(14px,1.8vw,26px);
  /* the fade only softens the cut at the rail's ends; at 14% it was eating
     the outermost of the five on show */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.who .awards__tiles{
  display:flex;flex-wrap:nowrap;gap:0;justify-content:flex-start;
  position:relative;left:50%;
  transform:translateX(calc((var(--i,0) + .5) * var(--step) * -1));
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.who .atile{
  flex:0 0 var(--step);box-sizing:border-box;
  padding:0 6px 16px;gap:2px;
  background:none;border:0;box-shadow:none;
  transform:scale(.52);transform-origin:center bottom;
  opacity:.45;filter:grayscale(.4);
  transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .45s ease,filter .45s ease;
}
.who .atile__img{justify-content:center;align-items:flex-end;height:clamp(128px,11vw,178px);}
.who .atile__img img{max-height:clamp(128px,11vw,178px);}
/* the rail steps up to its centre and back down: small, medium, large,
   medium, small. The tile before the live one is reached with :has(), the
   one after with a sibling combinator. */
.who .atile.is-on + .atile,
.who .atile:has(+ .atile.is-on){
  transform:scale(.8);opacity:.78;filter:grayscale(.12);
}
.who .atile:hover{opacity:.85;filter:grayscale(0);}
/* the one on the centre line */
.who .atile.is-on{
  transform:scale(1.22);opacity:1;filter:none;z-index:2;
  background:none;border:0;box-shadow:none;
}
.who .atile.is-on .atile__lab{color:var(--black);font-weight:500;}
.who .atile__bar{top:auto;bottom:0;left:22%;right:22%;height:2px;border-radius:0;}

/* the award reads out under the rail, centred and unboxed */
.who .awards__detail{
  max-width:none;margin-inline:auto;text-align:center;align-items:center;
}
/* the award's name gets the full width so it holds one line; the sentence
   under it keeps a readable measure */
@media(min-width:1001px){
  .who .awards__title{white-space:nowrap;min-height:0;}
}
/* the trophies now carry the awarding body's full name, so the sentence that
   repeated it is gone */
.who .awards__desc{display:none;}
/* the proof link rides on the award's own line rather than under it */
.awards__cert{
  margin-left:.5em;font-size:.72em;color:var(--slate);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(96,123,140,.4);
  transition:color .2s ease,text-decoration-color .2s ease;
}
.awards__cert:hover{color:var(--black);text-decoration-color:currentColor;}

@media(max-width:1000px){ .awstage{--step:33.3333%;} }
@media(max-width:620px){  .awstage{--step:50%;} }
@media(prefers-reduced-motion:reduce){
  .who .awards__tiles,.who .atile{transition:none;}
}

/* The award reads out under the rail with nothing around it. */
.who .awards__detail{position:relative;background:none;border:0;padding:0;}
.who .awards__year{
  color:var(--green);font-size:var(--text-micro);letter-spacing:.2em;font-weight:500;
}
.who .awards__title{
  font-size:clamp(16px,1.45vw,21px);line-height:1.25;letter-spacing:-0.005em;
  color:var(--black);font-weight:400;margin-top:12px;
}
.who .awards__desc{
  font-size:var(--text-label);line-height:1.65;color:var(--slate);margin-top:14px;
}
.who .awards__link{margin-top:18px;}
.who .awards__link a{
  color:var(--green);font-weight:500;
  text-decoration-color:rgba(108,170,51,.4);
}
.who .awards__link a:hover{color:var(--black);text-decoration-color:currentColor;}
.who .atile__lab{color:var(--slate);}
.who .atile.is-on .atile__lab{color:var(--black);font-weight:500;}
.who .awards__title{color:var(--black);}
/* the verification link under an award, shown only where there is one */
.awards__link{margin-top:12px;}
.awards__link a{
  font-size:var(--text-label);color:var(--slate);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(0,0,0,.25);transition:color .2s ease,text-decoration-color .2s ease;
}
.awards__link a:hover{color:var(--black);text-decoration-color:currentColor;}
.who .awards__desc{color:var(--slate);}
/* the brand green is mixed for a dark ground; #4E8A1F is the tone this
   stylesheet already uses for green on light */
.who .awards__year{color:#4E8A1F;}

/* ---- "Live" in the headline, marked the way a broadcast marks itself: a red
   dot with a slow ring going out from it. Sized in em so it tracks the
   headline through every clamp step. ---- */
/* An inline-flex box takes its baseline from its first item, and that item is
   the dot, which dropped the word below the line. Left as plain inline text
   with the dot set beside it, the word keeps the headline's baseline. */
.h1live{white-space:nowrap;}
.h1live__dot{
  display:inline-block;width:.34em;height:.34em;border-radius:50%;
  margin-right:.30em;vertical-align:.14em;
  background:#D8524A;
  /* a steady glow so the dot reads as lit, plus a ring going out from it */
  animation:h1liveRing 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes h1liveRing{
  0%  {box-shadow:0 0 .55em .02em rgba(216,82,74,.9), 0 0 0 0 rgba(216,82,74,.55);}
  70% {box-shadow:0 0 .55em .02em rgba(216,82,74,.9), 0 0 0 .70em rgba(216,82,74,0);}
  100%{box-shadow:0 0 .55em .02em rgba(216,82,74,.9), 0 0 0 0 rgba(216,82,74,0);}
}
@media(prefers-reduced-motion:reduce){
  .h1live__dot{animation:none;box-shadow:0 0 .5em .02em rgba(216,82,74,.9);}
}


/* ---- Reviews ------------------------------------------------------------
   The heading and the controls hold a column on the left; the reviews run
   past them on a rail that scrolls, each card a speech bubble with the
   person underneath it. Square edges, to match the rest of the site. ---- */
.revs{background:var(--grey-3);}
.revs__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px);}
@media(min-width:1001px){
  .revs__in{grid-template-columns:minmax(220px,300px) minmax(0,1fr);
    gap:clamp(32px,4vw,72px);align-items:start;}
}
.revs__side{display:flex;flex-direction:column;align-items:flex-start;}
.revs__mark{
  font-size:clamp(64px,7vw,104px);line-height:.72;color:var(--slate-3);
  font-weight:700;letter-spacing:-0.04em;
}
.revs__side h2{margin:clamp(14px,1.6vw,22px) 0 0;font-size:var(--heading-3);
  line-height:1.15;letter-spacing:-0.015em;color:var(--black);}
.revs__nav{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,2.4vw,32px);width:100%;}
.revs__arrow{
  flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;color:var(--slate);cursor:pointer;
  transition:color .2s ease;
}
.revs__arrow:hover{color:var(--black);}
.revs__arrow:disabled{color:var(--grey-1);cursor:default;}
.revs__arrow:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.revs__arrow svg{width:22px;height:22px;}
.revs__track{position:relative;flex:1 1 auto;height:1px;background:var(--grey-1);}
.revs__track i{
  position:absolute;left:0;top:-1px;height:3px;width:30%;
  background:var(--black);transition:left .3s ease,width .3s ease;
}

.revs__rail{
  display:flex;gap:clamp(16px,1.8vw,26px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:6px;scrollbar-width:none;
}
.revs__rail::-webkit-scrollbar{display:none;}
.rev{flex:0 0 clamp(260px,26vw,340px);scroll-snap-align:start;}
.rev__bubble{
  position:relative;background:#fff;border:1px solid var(--grey-1);
  padding:clamp(20px,2.2vw,28px);
}
/* the tail that makes the card read as something someone said */
.rev__bubble::after{
  content:"";position:absolute;left:26px;bottom:-11px;width:20px;height:11px;
  background:#fff;clip-path:polygon(0 0,100% 0,0 100%);
  border-left:1px solid var(--grey-1);border-bottom:1px solid var(--grey-1);
}
.rev__bubble p{margin:0;font-size:var(--text-label);line-height:1.65;color:var(--slate);}
.rev__stars{display:flex;gap:3px;margin-top:16px;}
.rev__stars svg{width:15px;height:15px;fill:var(--green);}
.rev__stars svg.is-off{fill:var(--grey-1);}
.revs__source{margin:12px 0 0;font-size:var(--text-small);color:var(--slate);line-height:1.5;}
.revs__source b{color:var(--black);font-weight:500;}
.revs__source a{color:var(--slate);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(96,123,140,.4);}
.revs__source a:hover{color:var(--black);text-decoration-color:currentColor;}
.rev__who{display:flex;align-items:center;gap:12px;margin-top:22px;padding-left:4px;}
.rev__name{display:flex;flex-direction:column;min-width:0;}
.rev__name b{font-size:var(--text-label);font-weight:500;color:var(--black);line-height:1.3;}
.rev__name span{font-size:var(--text-small);color:var(--slate-2);line-height:1.35;}
@media(prefers-reduced-motion:reduce){ .revs__track i{transition:none;} }