/* ============================================================
   Pithy Marketing × Deka+  ·  Strategic Portal
   Palette: Pithy cyan only. No magenta anywhere.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ground */
  --void:#070B10;
  --deep:#0B1118;
  --panel:rgba(16,23,32,.62);
  --panel-solid:#101720;
  --edge:rgba(255,255,255,.09);
  --edge-hot:rgba(0,180,197,.34);

  /* brand — cyan and only cyan */
  --cyan:#00B4C5;
  --cyan-hot:#4FE2F0;
  --cyan-deep:#0A6E80;
  --cyan-wash:rgba(0,180,197,.10);

  /* text */
  --paper:#F2F5F8;
  --paper-dim:#C3CED9;
  --mute:#8797A6;
  --mute-deep:#5A6976;

  /* data severity */
  --crit:#FF5C7A;
  --high:#FFB443;
  --good:#3FE0A8;

  /* type */
  --display:'Poppins',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* metrics */
  --rail:150px;
  --gut:clamp(22px,3.4vw,58px);
  --maxw:1560px;
  --ease:cubic-bezier(.22,.8,.3,1);
  --slow:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--body);
  font-weight:300;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:var(--cyan-hot);text-decoration:none;border-bottom:1px solid rgba(79,226,240,.32);transition:border-color .25s var(--ease),color .25s var(--ease)}
a:hover{color:#fff;border-bottom-color:#fff}

:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:3px;border-radius:2px}
::selection{background:var(--cyan);color:#04141a}

/* ---------- ambient field ----------
   z-index 3 puts the network above the pane photography so the effect
   carries across the whole portal, not only where the ground is bare.
   It starts at the rail's right edge so the menu is never crossed, and
   stays below the notes dock (100) and the gate (300). */
/* A canvas is a replaced element: with width:auto it keeps its intrinsic
   300×150 and the left/right offsets are ignored, which is how the whole
   network ended up crammed into the top-left corner. Size it explicitly.
   The rail is avoided in the drawing coordinates, not by insetting here. */
#field{
  position:fixed;
  top:0;left:0;
  width:100vw;height:100vh;
  z-index:3;pointer-events:none;
  opacity:.6;
}
.scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 75% at 50% -12%, rgba(0,180,197,.13), transparent 62%),
    radial-gradient(80% 55% at 100% 105%, rgba(10,110,128,.16), transparent 66%);
}

/* ============================================================
   GATE — video hero
   ============================================================ */
/* Flex + margin:auto on the card centres it, and still lets a short window
   scroll to the top of it (grid centring clips the overflow instead). */
.gate{
  position:fixed;inset:0;z-index:300;
  display:flex;
  padding:var(--gut);
  overflow-y:auto;overscroll-behavior:contain;
  transition:opacity .9s var(--slow),visibility .9s;
}
.gate[hidden]{display:none}
.gate.is-out{opacity:0;visibility:hidden}

/* Reds and magentas are graded out of the clip itself (see assets/video),
   so the footage can stay bright. Fixed, so it stays full-screen while the
   card scrolls; the veil darkens the middle, where the card sits. */
.gate__video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:contrast(1.06) saturate(1.1)}
.gate__veil{
  position:fixed;inset:0;z-index:1;
  background:
    radial-gradient(60% 75% at 50% 50%, rgba(7,11,16,.62), rgba(7,11,16,.3) 70%, rgba(7,11,16,.5) 100%),
    linear-gradient(180deg,rgba(7,11,16,.2),rgba(7,11,16,.55)),
    radial-gradient(90% 70% at 50% 50%, rgba(0,180,197,.12), transparent 70%);
}

.gate__card{
  position:relative;z-index:2;
  width:min(520px,100%);margin:auto;
  background:rgba(11,17,24,.66);
  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);
  border:1px solid var(--edge);
  border-radius:4px;
  padding:clamp(32px,4.4vw,52px);
  box-shadow:0 50px 140px rgba(0,0,0,.72);
  animation:cardUp 1s var(--slow) .2s both;
}
@keyframes cardUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.gate__logo{width:150px;margin-bottom:38px}
.gate__kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 16px;
}
.gate__title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,3.2vw,40px);line-height:1.08;
  letter-spacing:-.03em;margin:0 0 14px;
}
.gate__sub{color:var(--paper-dim);font-size:16px;margin:0 0 32px;line-height:1.6}

.f{margin-bottom:18px}
.f__label{
  display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:10px;
}
.f__input{
  width:100%;background:rgba(7,11,16,.72);
  border:1px solid rgba(255,255,255,.14);
  border-radius:3px;color:var(--paper);
  font-family:var(--body);font-size:17px;padding:15px 16px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.f__input:focus{
  outline:none;border-color:var(--cyan);
  background:rgba(7,11,16,.9);
  box-shadow:0 0 0 3px rgba(0,180,197,.15);
}
.f__input::placeholder{color:var(--mute-deep)}

.btn{
  width:100%;background:var(--cyan);color:#04141a;
  border:0;border-radius:3px;
  font-family:var(--display);font-weight:600;font-size:16px;
  padding:16px;cursor:pointer;margin-top:8px;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{background:var(--cyan-hot);transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,180,197,.34)}

.gate__err{color:var(--crit);font-family:var(--mono);font-size:13px;min-height:20px;margin:14px 0 0}
.gate__hint{
  margin:26px 0 0;padding-top:22px;
  border-top:1px solid var(--edge);
  color:var(--mute);font-size:13.5px;line-height:1.65;
}

/* ============================================================
   LOGO TRANSITION
   ============================================================ */
.bridge{
  position:fixed;inset:0;z-index:290;
  display:grid;place-items:center;
  background:var(--void);
  opacity:0;visibility:hidden;
}
.bridge.is-on{opacity:1;visibility:visible}
.bridge__logo{
  width:min(340px,58vw);
  opacity:0;
  filter:drop-shadow(0 0 40px rgba(0,180,197,.5));
}
.bridge.is-on .bridge__logo{animation:markIn 1.6s var(--slow) both}
@keyframes markIn{
  0%{opacity:0;transform:scale(.86)}
  36%{opacity:1;transform:scale(1)}
  74%{opacity:1;transform:scale(1.02)}
  100%{opacity:0;transform:scale(1.14)}
}
.bridge__sweep{
  position:absolute;left:0;right:0;height:1px;top:50%;
  background:linear-gradient(90deg,transparent,var(--cyan-hot),transparent);
  transform:scaleX(0);
}
.bridge.is-on .bridge__sweep{animation:sweepOut 1.6s var(--slow) both}
@keyframes sweepOut{
  0%{transform:scaleX(0);opacity:0}
  40%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

/* ============================================================
   SHELL
   ============================================================ */
.shell{position:relative;z-index:2;opacity:0;transition:opacity 1s var(--slow)}
.shell.is-live{opacity:1}

.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:22px;
  padding:0 var(--gut);height:74px;
  background:rgba(7,11,16,.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--edge);
}
.topbar__logo{width:118px;flex:none}
.topbar__tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
}
.topbar__tag b{color:var(--cyan);font-weight:500}
.topbar__spacer{flex:1}

.layout{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);align-items:start}

/* ---------- rail ---------- */
.rail{
  position:sticky;top:74px;height:calc(100vh - 74px);
  border-right:1px solid var(--edge);
  padding:32px 0;display:flex;flex-direction:column;gap:1px;
}
.rail__item{
  position:relative;display:block;width:100%;
  background:none;border:0;text-align:left;
  padding:15px 18px 15px 24px;cursor:pointer;color:var(--mute);
  font-family:var(--display);font-weight:500;font-size:15px;
  letter-spacing:-.005em;line-height:1.3;
  transition:color .3s var(--ease),background .3s var(--ease),padding-left .3s var(--ease);
}
.rail__item::before{
  content:'';position:absolute;left:0;top:50%;
  width:2px;height:0;background:var(--cyan);
  transform:translateY(-50%);transition:height .4s var(--ease);
}
.rail__item:hover{color:var(--paper-dim);padding-left:28px}
.rail__item.is-on{color:var(--paper);font-weight:600}
.rail__item.is-on::before{height:56%}
.rail__badge{
  position:absolute;top:11px;right:12px;
  min-width:17px;height:17px;border-radius:100px;
  background:var(--cyan);color:#04141a;
  font-family:var(--mono);font-size:10px;font-weight:600;
  display:none;place-items:center;padding:0 5px;
}
.rail__badge.is-on{display:grid}

/* ---------- panes ---------- */
.stage{min-width:0;padding-bottom:180px}
.pane{display:none;position:relative}
.pane.is-on{display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}

/* ============================================================
   BACKGROUND BANDS
   ============================================================ */
/* z-index -1 keeps a band strictly behind the copy that follows it.
   Without it an absolutely-positioned band paints over the static
   headings below and washes them out. */
.bg{
  position:absolute;left:0;right:0;
  overflow:hidden;pointer-events:none;z-index:-1;
}
.bg img,.bg video{
  width:100%;height:100%;object-fit:cover;
  opacity:.82;
  filter:grayscale(.2) contrast(1.06) brightness(.8) saturate(.75);
  transform:scale(1.05);
  transition:transform 2.4s var(--slow);
}
.pane.is-on .bg img,.pane.is-on .bg video{transform:scale(1)}
/* the clips are colour-graded at encode time, so they can run brighter */
.bg video{opacity:.92;filter:contrast(1.08) brightness(.92)}
/* The photograph stays legible on the right, where there is no copy,
   and darkens under the text column on the left. */
.bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(7,11,16,.34) 0%,rgba(7,11,16,.55) 52%,var(--void) 98%),
    linear-gradient(90deg,rgba(7,11,16,.86) 0%,rgba(7,11,16,.62) 34%,rgba(7,11,16,.12) 68%,transparent 100%),
    radial-gradient(75% 85% at 82% 14%, rgba(0,180,197,.18), transparent 62%);
}
.bg--top{top:0;height:min(96vh,980px)}
.bg--mid{height:min(70vh,740px)}
.bg--mid::after{
  background:
    linear-gradient(180deg,var(--void) 0%,rgba(7,11,16,.4) 20%,rgba(7,11,16,.56) 70%,var(--void) 100%),
    radial-gradient(70% 80% at 18% 50%, rgba(0,180,197,.14), transparent 66%);
}

/* A band carrying type keeps a dark floor under the text column on the
   left, and lets the footage read on the right where there is no copy. */
.bg--under::after{
  background:
    linear-gradient(180deg,var(--void) 0%,rgba(7,11,16,.28) 16%,rgba(7,11,16,.34) 74%,var(--void) 100%),
    linear-gradient(90deg,rgba(7,11,16,.9) 0%,rgba(7,11,16,.66) 32%,rgba(7,11,16,.1) 72%,transparent 100%),
    radial-gradient(70% 80% at 86% 20%, rgba(0,180,197,.2), transparent 60%);
}
/* footage in a mid band gets a touch more presence than a still */
.bg--under video{opacity:.96;filter:grayscale(.06) contrast(1.08) brightness(.94) saturate(.9)}

/* ============================================================
   TYPE
   ============================================================ */
/* ---------- labels ----------
   Three different jobs, three different treatments. Nothing here is a
   tiny tracked-out capital, because everything ends up looking the same
   when it is. */

/* hero label — a rule and a plain sentence, set in the body face */
.kicker{
  display:flex;align-items:center;gap:14px;
  font-family:var(--body);font-weight:400;
  font-size:clamp(14px,1.05vw,16px);
  letter-spacing:.005em;text-transform:none;
  color:var(--cyan-hot);
  margin:0 0 clamp(18px,2vw,28px);
}
.kicker::before{
  content:'';flex:none;
  width:34px;height:2px;
  background:var(--cyan);
}

/* section label — an oversized outlined word, sitting over the heading */
.head .kicker{
  display:block;
  font-family:var(--display);font-weight:800;
  font-size:clamp(30px,4vw,56px);
  line-height:.92;letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.3px rgba(0,180,197,.5);
  margin:0 0 clamp(4px,.6vw,10px);
}
.head .kicker::before{display:none}

/* if text-stroke is unavailable, fall back to a ghosted fill */
@supports not (-webkit-text-stroke: 1px currentColor){
  .head .kicker{color:rgba(0,180,197,.28);-webkit-text-stroke:0}
}

h1.mega{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,5.6vw,84px);line-height:1;
  letter-spacing:-.042em;margin:0 0 28px;max-width:24ch;
}
h2.big{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3.5vw,50px);line-height:1.06;
  letter-spacing:-.034em;margin:0 0 22px;max-width:26ch;
}
h3.mid{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,1.7vw,25px);line-height:1.22;
  letter-spacing:-.02em;margin:0 0 14px;
}
h4.sm{
  font-family:var(--display);font-weight:600;
  font-size:18px;line-height:1.3;letter-spacing:-.015em;margin:0 0 10px;
}

.lede{
  font-size:clamp(19px,1.5vw,23px);line-height:1.62;
  color:var(--paper-dim);max-width:36ch;margin:0 0 clamp(28px,3vw,42px);font-weight:300;
}
.lede--wide{max-width:54ch}
p.body{font-size:17px;line-height:1.76;color:var(--paper-dim);margin:0 0 20px;max-width:58ch}
p.body:last-child{margin-bottom:0}
.dim{color:var(--mute)}
.hl{color:var(--cyan-hot)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(70px,10vw,150px) 0 clamp(48px,6vw,86px)}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(40px,6vw,110px);align-items:start;
}
.hero__aside{padding-top:clamp(8px,1.6vw,26px)}
.hero__aside .lede{margin-bottom:clamp(22px,2.4vw,34px)}

/* ---------- pull quote ----------
   Quote left, the thought it sets up on the right. */
.pull{
  position:relative;margin:clamp(50px,7vw,96px) 0;
  padding:clamp(34px,4vw,56px) 0;
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4.5vw,96px);
  align-items:end;
}
.pull__q{
  font-family:var(--display);font-weight:600;
  font-size:clamp(26px,4vw,54px);line-height:1.08;
  letter-spacing:-.035em;margin:0 0 18px;max-width:18ch;
}
.pull__by{
  font-family:var(--body);font-size:15px;letter-spacing:.005em;
  text-transform:none;color:var(--cyan-hot);
  display:flex;align-items:center;gap:12px;
}
.pull__by::before{content:'';flex:none;width:26px;height:2px;background:var(--cyan)}
.pull__note{margin:0;padding-bottom:6px;font-size:17px;line-height:1.76;color:var(--paper-dim)}
.pull__note:last-child{margin-bottom:0}

@media (max-width:1000px){
  .pull{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
}

/* ============================================================
   DATA
   ============================================================ */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(20px,2.4vw,40px);margin:clamp(34px,4vw,56px) 0;
}
.stat{position:relative;padding-top:20px;border-top:1px solid var(--edge)}
.stat::before{
  content:'';position:absolute;top:-1px;left:0;height:2px;width:0;
  background:var(--cyan);transition:width 1.2s var(--slow);
}
.stat.is-in::before{width:var(--fill,38%)}
.stat__v{
  font-family:var(--display);font-weight:700;
  font-size:clamp(38px,4.6vw,66px);line-height:.94;
  letter-spacing:-.045em;display:block;margin-bottom:12px;
}
.stat__v.up{color:var(--good)}
.stat__v.down{color:var(--cyan-hot)}
.stat__v.bad{color:var(--crit)}
.stat__l{font-size:15px;line-height:1.5;color:var(--mute);display:block;max-width:24ch}

/* ---------- charts ---------- */
.chart{margin:clamp(34px,4vw,60px) 0}
.chart__h{
  font-family:var(--display);font-weight:500;
  font-size:16px;letter-spacing:-.01em;text-transform:none;
  color:var(--paper-dim);margin:0 0 clamp(22px,2.4vw,32px);
  padding-bottom:14px;border-bottom:1px solid var(--edge);
}
.chart svg{width:100%;height:auto;overflow:visible}
.bar{transition:width 1.3s var(--slow)}
.bar-track{fill:rgba(255,255,255,.07)}
.bar-lbl{font-family:var(--body);font-size:15px;fill:var(--paper-dim)}
.bar-val{font-family:var(--display);font-size:17px;font-weight:600;fill:var(--paper)}

/* ---------- donut / gauge ---------- */
.gauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(22px,3vw,44px);margin:clamp(32px,4vw,54px) 0}
.gauge{text-align:center}
.gauge svg{width:100%;max-width:168px;height:auto;margin:0 auto 18px;display:block;overflow:visible}
.gauge__ring{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7}
.gauge__arc{
  fill:none;stroke-width:7;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:center;
  transition:stroke-dashoffset 1.5s var(--slow);
}
.gauge__num{
  font-family:var(--display);font-weight:700;font-size:27px;
  fill:var(--paper);text-anchor:middle;dominant-baseline:central;
  letter-spacing:-.03em;
}
.gauge__t{font-family:var(--display);font-weight:600;font-size:17px;margin:0 0 6px}
.gauge__d{font-size:14.5px;color:var(--mute);margin:0;line-height:1.5}

/* ============================================================
   PANELS
   ============================================================ */
.cols{display:grid;gap:clamp(20px,2.4vw,34px);margin:clamp(30px,3.6vw,52px) 0}
.cols--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.cols--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols--aside{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start}

.panel{
  background:var(--panel);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--edge);
  border-radius:4px;
  padding:clamp(26px,2.6vw,38px);
  transition:border-color .45s var(--ease),transform .45s var(--ease),background .45s var(--ease);
}
.panel:hover{border-color:var(--edge-hot);transform:translateY(-4px);background:rgba(16,23,32,.76)}
.panel p{font-size:16.5px;line-height:1.68;color:var(--paper-dim);margin:0 0 16px}
.panel p:last-child{margin-bottom:0}

/* card label — a short heavy rule above a real-sized word */
.sev{
  display:block;position:relative;
  font-family:var(--display);font-weight:600;
  font-size:clamp(15px,1.15vw,17.5px);
  letter-spacing:-.012em;text-transform:none;
  padding-top:16px;margin-bottom:clamp(14px,1.4vw,20px);
}
.sev::before{
  content:'';position:absolute;left:0;top:0;
  width:40px;height:3px;border-radius:2px;
}
.sev--crit{color:var(--crit)} .sev--crit::before{background:var(--crit)}
.sev--high{color:var(--high)} .sev--high::before{background:var(--high)}
.sev--good{color:var(--good)} .sev--good::before{background:var(--good)}
.sev--flat{color:var(--cyan-hot)} .sev--flat::before{background:var(--cyan)}

/* lists */
.pts{margin:0;padding:0;list-style:none}
.pts li{
  position:relative;padding-left:26px;margin-bottom:15px;
  font-size:16.5px;line-height:1.62;color:var(--paper-dim);
}
.pts li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:12px;height:1px;background:var(--cyan);
}
.pts li:last-child{margin-bottom:0}
.pts b{color:var(--paper);font-weight:500}

/* ---------- folded detail ---------- */
.pts__more{
  display:none;
  animation:moreIn .5s var(--slow) both;
}
.pts.is-open .pts__more{display:list-item}
@keyframes moreIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.more{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:16px;padding:0;
  background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:14.5px;
  letter-spacing:-.005em;color:var(--cyan);
  transition:color .25s var(--ease),gap .25s var(--ease);
}
.more:hover{color:var(--cyan-hot);gap:14px}
.more__x{
  position:relative;flex:none;width:15px;height:15px;
  transition:transform .4s var(--slow);
}
.more__x::before,.more__x::after{
  content:'';position:absolute;top:50%;left:50%;
  background:currentColor;transform:translate(-50%,-50%);
}
.more__x::before{width:13px;height:1.5px}
.more__x::after{width:1.5px;height:13px;transition:opacity .3s var(--ease)}
.more[aria-expanded="true"] .more__x{transform:rotate(90deg)}
.more[aria-expanded="true"] .more__x::after{opacity:0}

/* list intro — a dash and a sentence, sized to be read */
.lbl{
  display:flex;align-items:baseline;gap:11px;
  font-family:var(--display);font-weight:500;
  font-size:15.5px;letter-spacing:-.008em;text-transform:none;
  color:var(--paper-dim);margin:clamp(24px,2.6vw,34px) 0 14px;
}
.lbl::before{
  content:'';flex:none;
  width:16px;height:1px;
  background:var(--cyan);
  transform:translateY(-4px);
}
.lbl:first-child{margin-top:0}

/* ============================================================
   EXPANDING PANELS
   ============================================================ */
.ex{border-bottom:1px solid var(--edge);position:relative}
.ex:first-of-type{border-top:1px solid var(--edge)}
.ex__btn{
  display:flex;align-items:baseline;gap:clamp(18px,2.4vw,40px);
  width:100%;background:none;border:0;
  padding:clamp(26px,2.8vw,38px) 0;
  cursor:pointer;text-align:left;
  transition:padding-left .45s var(--ease);
}
.ex__btn:hover{padding-left:14px}
.ex__tag{
  flex:none;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;color:var(--cyan);width:58px;
  padding-top:6px;
}
.ex__txt{flex:1;min-width:0}
.ex__t{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.1vw,30px);line-height:1.16;
  letter-spacing:-.025em;color:var(--paper);margin-bottom:8px;
  transition:color .3s var(--ease);
}
.ex__btn:hover .ex__t{color:var(--cyan-hot)}
.ex__s{display:block;font-size:16.5px;color:var(--mute);line-height:1.55;max-width:56ch}
.ex__x{
  flex:none;width:30px;height:30px;position:relative;
  transition:transform .5s var(--slow);
}
.ex__x::before,.ex__x::after{
  content:'';position:absolute;top:50%;left:50%;
  background:var(--cyan);transform:translate(-50%,-50%);
}
.ex__x::before{width:16px;height:1.5px}
.ex__x::after{width:1.5px;height:16px;transition:opacity .4s var(--ease)}
.ex__btn[aria-expanded="true"] .ex__x{transform:rotate(180deg)}
.ex__btn[aria-expanded="true"] .ex__x::after{opacity:0}

.ex__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .65s var(--slow)}
.ex__body>div{overflow:hidden}
.ex__btn[aria-expanded="true"]+.ex__body{grid-template-rows:1fr}
.ex__pad{
  padding:0 0 clamp(32px,3.6vw,52px) clamp(76px,7vw,98px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,46px);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--slow) .12s,transform .6s var(--slow) .12s;
}
.ex__btn[aria-expanded="true"]+.ex__body .ex__pad{opacity:1;transform:none}
.ex__block h4{
  font-family:var(--display);font-weight:600;
  font-size:17px;letter-spacing:-.015em;text-transform:none;
  color:var(--cyan-hot);margin:0 0 14px;
  padding-bottom:12px;border-bottom:1px solid var(--edge);
}
.ex__block p{font-size:16.5px;line-height:1.72;color:var(--paper-dim);margin:0 0 14px}
.ex__block p:last-child{margin-bottom:0}
.ex__block em{color:var(--cyan-hot);font-style:normal}

/* ============================================================
   FIGURES — big, clickable
   ============================================================ */
.figure{
  position:relative;margin:clamp(30px,3.4vw,50px) 0;
  border:1px solid var(--edge);border-radius:4px;
  background:rgba(16,23,32,.5);
  overflow:hidden;cursor:zoom-in;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.figure:hover{border-color:var(--edge-hot);transform:translateY(-4px);box-shadow:0 26px 70px rgba(0,0,0,.5)}
.figure__cap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px;border-bottom:1px solid var(--edge);
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}
.figure__zoom{color:var(--cyan);white-space:nowrap;font-size:11px}
.figure__img{background:#fff}
.figure__img img{width:100%;height:auto;transition:transform .9s var(--slow)}
.figure:hover .figure__img img{transform:scale(1.015)}

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.2vw,30px);margin:clamp(30px,3.4vw,50px) 0}
.fig{
  border:1px solid var(--edge);border-radius:4px;overflow:hidden;
  background:rgba(16,23,32,.55);backdrop-filter:blur(12px);cursor:zoom-in;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.fig:hover{border-color:var(--edge-hot);transform:translateY(-5px);box-shadow:0 22px 56px rgba(0,0,0,.48)}
.fig img{width:100%;height:210px;object-fit:cover;object-position:top center;background:#fff;transition:transform .8s var(--slow)}
.fig:hover img{transform:scale(1.03)}
.fig__t{padding:20px 22px 24px}
.fig__t b{display:block;font-family:var(--display);font-weight:600;font-size:18px;margin-bottom:8px;letter-spacing:-.015em}
.fig__t span{font-size:15.5px;color:var(--mute);line-height:1.55}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:250;
  display:grid;place-items:center;padding:clamp(20px,4vw,60px);
  background:rgba(4,7,10,.94);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
  cursor:zoom-out;
}
.lb.is-on{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:86vh;border-radius:3px;box-shadow:0 40px 120px rgba(0,0,0,.7);background:#fff}
.lb__cap{
  position:absolute;bottom:clamp(16px,3vw,34px);left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim);background:rgba(11,17,24,.85);
  padding:11px 22px;border-radius:100px;border:1px solid var(--edge);
  max-width:80vw;text-align:center;
}
.lb__x{
  position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);
  width:46px;height:46px;border-radius:50%;
  background:rgba(16,23,32,.85);border:1px solid var(--edge);
  color:var(--paper);font-size:22px;line-height:1;cursor:pointer;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.lb__x:hover{border-color:var(--cyan);transform:rotate(90deg)}

/* ---------- code ---------- */
.code{
  background:rgba(4,7,10,.8);border:1px solid var(--edge);
  border-left:2px solid var(--crit);border-radius:4px;
  padding:26px 28px;font-family:var(--mono);font-size:14.5px;
  line-height:2;overflow-x:auto;margin:26px 0;
}
.code .k{color:var(--cyan)}
.code .v{color:var(--paper-dim)}
.code .bad{color:var(--crit);font-weight:500}
.code .empty{color:var(--high)}

/* ---------- price ---------- */
.price{
  display:inline-flex;align-items:baseline;gap:14px;
  font-family:var(--display);color:var(--good);
  border-left:2px solid var(--good);padding:6px 0 6px 18px;margin:26px 0 0;
}
.price b{font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.03em}
.price span{font-size:15px;color:var(--mute);font-family:var(--body)}

/* ---------- section head ----------
   The heading holds the left column and its supporting copy sits to the
   right, so a section reads across the page instead of stacking down one
   side of it. */
.head{
  margin:clamp(70px,8vw,130px) 0 0;
  padding-top:clamp(40px,4.4vw,64px);
  border-top:1px solid var(--edge);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.5vw,96px);
  align-items:end;
}
.head:first-of-type{margin-top:clamp(40px,5vw,72px);border-top:0;padding-top:0}
.head__l{min-width:0}
.head__l h2.big{margin-bottom:0}
.head__r{min-width:0;padding-bottom:6px}
.head__r .lede{margin-bottom:0;max-width:44ch}
.head__r .lede + .price{margin-top:clamp(20px,2.2vw,30px)}

@media (max-width:1000px){
  .head{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
  .head__r{padding-bottom:0}
}

/* ---------- reveal ----------
   Each item is observed on its own, so a list arrives row by row on the
   way down rather than all at once. */
.rv{opacity:0;transform:translateY(34px)}
.rv.is-in{opacity:1;transform:none;transition:opacity .95s var(--slow),transform .95s var(--slow)}
.rv.is-in.d1{transition-delay:.09s}
.rv.is-in.d2{transition-delay:.18s}
.rv.is-in.d3{transition-delay:.27s}
.rv.is-in.d4{transition-delay:.36s}

/* a row slides in from the edge and settles its rule */
.rv--row{opacity:0;transform:translateX(-34px)}
.rv--row.is-in{
  opacity:1;transform:none;
  transition:opacity .8s var(--slow),transform .8s var(--slow);
}
.rv--row .ex__t{opacity:0;transform:translateY(10px)}
.rv--row.is-in .ex__t{
  opacity:1;transform:none;
  transition:opacity .7s var(--slow) .12s,transform .7s var(--slow) .12s;
}
.rv--row .ex__s{opacity:0}
.rv--row.is-in .ex__s{opacity:1;transition:opacity .8s var(--slow) .26s}

/* a heading lifts a little further than the body around it */
.rv--head{opacity:0;transform:translateY(52px)}
.rv--head.is-in{
  opacity:1;transform:none;
  transition:opacity 1.05s var(--slow),transform 1.05s var(--slow);
}

/* ============================================================
   NOTES — one thread per page
   ============================================================ */
.notes__where{
  padding:16px 28px;border-bottom:1px solid var(--edge);
  background:var(--cyan-wash);
}
.notes__where span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:6px}
.notes__where b{font-family:var(--display);font-size:19px;font-weight:600;color:var(--cyan-hot);letter-spacing:-.02em}

.notes__feed{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:22px}
.notes__feed::-webkit-scrollbar{width:8px}
.notes__feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}

.blank{text-align:center;padding:60px 18px;color:var(--mute-deep)}
.blank svg{width:40px;height:40px;margin:0 auto 18px;opacity:.45}
.blank p{font-size:15.5px;line-height:1.65;margin:0;max-width:28ch;margin-inline:auto}

.note{animation:noteIn .5s var(--slow) both}
@keyframes noteIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.note__top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.note__av{
  width:30px;height:30px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);
  font-weight:700;font-size:11px;background:var(--cyan);color:#04141a;
}
.note__who{font-family:var(--display);font-weight:600;font-size:15px}
.note__when{font-family:var(--mono);font-size:11px;color:var(--mute-deep);margin-left:auto}
.note__body{
  margin-left:41px;background:rgba(255,255,255,.04);
  border:1px solid var(--edge);border-radius:4px;
  padding:15px 17px;font-size:15.5px;line-height:1.65;
  color:var(--paper-dim);white-space:pre-wrap;word-break:break-word;
}
.note__meta{margin:8px 0 0 41px;display:flex;align-items:center;gap:14px}
.note__sent{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.note__sent.ok{color:var(--good)}
.note__sent.wait{color:var(--high)}
.note__del{background:none;border:0;color:var(--mute-deep);font-family:var(--mono);font-size:11px;cursor:pointer;padding:0}
.note__del:hover{color:var(--crit)}

.notes__form{border-top:1px solid var(--edge);padding:20px 28px 26px}
.notes__ta{
  width:100%;background:rgba(7,11,16,.8);
  border:1px solid rgba(255,255,255,.14);border-radius:4px;
  color:var(--paper);font-family:var(--body);font-size:15.5px;line-height:1.6;
  padding:14px 15px;resize:vertical;min-height:92px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.notes__ta:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,180,197,.14)}
.notes__ta::placeholder{color:var(--mute-deep)}
.notes__send{
  width:100%;margin-top:12px;background:var(--cyan);color:#04141a;
  border:0;border-radius:4px;font-family:var(--display);font-weight:600;font-size:15px;
  padding:14px;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.notes__send:hover{background:var(--cyan-hot);transform:translateY(-2px)}
.notes__foot{margin:14px 0 0;font-size:12.5px;color:var(--mute-deep);line-height:1.55;text-align:center}

.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,22px);
  z-index:300;background:rgba(11,17,24,.96);border:1px solid var(--cyan);
  border-radius:4px;padding:15px 26px;font-family:var(--body);font-size:14.5px;
  color:var(--paper);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  box-shadow:0 18px 50px rgba(0,0,0,.6);max-width:min(460px,90vw);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   APPLICATION — sign out, dock, drawer
   ============================================================ */
body.is-locked{overflow:hidden}

.signout{
  display:flex;align-items:center;gap:10px;
  background:none;border:1px solid var(--edge);border-radius:100px;
  color:var(--paper-dim);font-family:var(--display);font-weight:500;font-size:14px;
  padding:9px 18px 9px 14px;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);
}
.signout svg{width:17px;height:17px;flex:none}
.signout:hover{border-color:var(--cyan);color:#fff;background:var(--cyan-wash)}
.signout:disabled{opacity:.5;cursor:wait}

/* ---------- dock: Ask + Notes ---------- */
.dock__toggle{
  position:fixed;right:28px;bottom:28px;z-index:90;
  display:flex;align-items:center;gap:12px;
  background:var(--cyan);color:#04141a;border:0;border-radius:100px;
  padding:16px 26px;font-family:var(--display);font-weight:600;font-size:15px;
  cursor:pointer;box-shadow:0 16px 46px rgba(0,180,197,.34);
  transition:transform .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease),opacity .3s var(--ease);
}
.dock__toggle:hover{transform:translateY(-3px);background:var(--cyan-hot);box-shadow:0 22px 58px rgba(0,180,197,.46)}
.dock__toggle svg{width:19px;height:19px;flex:none}
.dock-open .dock__toggle{opacity:0;pointer-events:none}
.notes__n{background:rgba(0,0,0,.24);border-radius:100px;padding:2px 9px;font-family:var(--mono);font-size:12px}

.dock{
  position:fixed;right:0;top:0;bottom:0;z-index:100;
  width:min(500px,100vw);
  background:rgba(11,17,24,.95);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-left:1px solid var(--edge-hot);
  display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .6s var(--slow);
  box-shadow:-40px 0 100px rgba(0,0,0,.6);
}
.dock.is-open{transform:none}
.dock__head{display:flex;align-items:center;gap:16px;padding:18px 22px 0 28px;border-bottom:1px solid var(--edge)}
.dock__tabs{display:flex;gap:6px;flex:1}
.dock__tab{
  position:relative;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--mute);
  padding:12px 14px 16px;transition:color .25s var(--ease);
}
.dock__tab:first-child{padding-left:0}
.dock__tab::after{
  content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:var(--cyan);transform:scaleX(0);transition:transform .4s var(--slow);
}
.dock__tab:first-child::after{left:0}
.dock__tab:hover{color:var(--paper-dim)}
.dock__tab.is-on{color:var(--paper)}
.dock__tab.is-on::after{transform:scaleX(1)}
.dock__n{font-family:var(--mono);font-size:12px;color:var(--cyan-hot);margin-left:4px}
.notes__x{
  background:none;border:1px solid var(--edge);border-radius:3px;
  color:var(--mute);width:34px;height:34px;flex:none;cursor:pointer;font-size:18px;line-height:1;
  transition:color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.notes__x:hover{color:var(--paper);border-color:var(--paper);transform:rotate(90deg)}

.dock__panel{display:none;flex:1;min-height:0;flex-direction:column}
.dock__panel.is-on{display:flex}
.dock__form{border-top:1px solid var(--edge);padding:18px 28px 24px}
.dock__form .notes__ta{min-height:70px}
.dock__row{display:flex;gap:10px;align-items:center;margin-top:12px}
.dock__row .notes__send{margin-top:0;flex:1}
.notes__send:disabled{opacity:.55;cursor:wait;transform:none}

/* ---------- ask ---------- */
.ask__intro{padding:24px 28px 6px}
.ask__intro h2{font-family:var(--display);font-weight:700;font-size:22px;margin:0 0 8px;letter-spacing:-.025em}
.ask__intro p{margin:0;font-size:14.5px;color:var(--mute);line-height:1.6}
.ask__feed{flex:1;overflow-y:auto;padding:18px 28px;display:flex;flex-direction:column;gap:14px}
.ask__feed::-webkit-scrollbar{width:8px}
.ask__feed::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.ask__chips{display:flex;flex-direction:column;gap:8px;padding:0 28px 18px}
.ask__chips[hidden]{display:none}
.chip{
  text-align:left;background:rgba(255,255,255,.035);border:1px solid var(--edge);border-radius:6px;
  color:var(--paper-dim);font-family:var(--body);font-size:15px;padding:12px 15px;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.chip:hover{border-color:var(--edge-hot);color:#fff;transform:translateX(4px)}
.ask__clear{
  background:none;border:1px solid var(--edge);border-radius:4px;color:var(--mute);
  font-family:var(--display);font-weight:500;font-size:14px;padding:13px 16px;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.ask__clear:hover{color:var(--paper);border-color:var(--paper-dim)}

.msg{display:flex;flex-direction:column;animation:noteIn .45s var(--slow) both}
.msg__body{
  max-width:88%;padding:13px 16px;border-radius:12px;font-size:15.5px;line-height:1.62;
  white-space:pre-wrap;word-break:break-word;
}
.msg--user{align-items:flex-end}
.msg--user .msg__body{background:var(--cyan);color:#04141a;border-bottom-right-radius:3px;font-weight:400}
.msg--assistant .msg__body{background:rgba(255,255,255,.05);border:1px solid var(--edge);color:var(--paper-dim);border-bottom-left-radius:3px}
.msg--err .msg__body{border-color:rgba(255,180,67,.4);color:var(--paper)}
.msg.is-typing .msg__body::after{
  content:'';display:inline-block;width:34px;height:10px;
  background:radial-gradient(circle,var(--cyan-hot) 38%,transparent 42%) 0 50%/11px 10px repeat-x;
  animation:typing 1s steps(3) infinite;
}
@keyframes typing{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.msg__act{
  align-self:flex-start;margin-top:8px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--cyan-hot);font-family:var(--display);font-weight:500;font-size:14px;
}
.msg__act:hover{color:#fff}
.note--mine .note__body{border-color:var(--edge-hot)}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none}
.drawer.is-on{visibility:visible;pointer-events:auto}
.drawer__veil{
  position:absolute;inset:0;background:rgba(4,8,12,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .45s var(--ease);
}
.drawer.is-on .drawer__veil{opacity:1}
.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(660px,100vw);
  background:linear-gradient(180deg,rgba(14,21,30,.98),rgba(9,14,20,.98));
  border-left:1px solid var(--edge-hot);box-shadow:-50px 0 120px rgba(0,0,0,.65);
  overflow-y:auto;overscroll-behavior:contain;outline:none;
  transform:translateX(104%);transition:transform .6s var(--slow);
}
.drawer.is-on .drawer__panel{transform:none}
.drawer__panel::-webkit-scrollbar{width:8px}
.drawer__panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}
.drawer__x{
  position:sticky;top:18px;float:right;margin:18px 18px 0 0;z-index:2;
  width:40px;height:40px;border-radius:50%;background:rgba(7,11,16,.85);
  border:1px solid var(--edge);color:var(--paper-dim);font-size:20px;line-height:1;cursor:pointer;
  transition:transform .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.drawer__x:hover{transform:rotate(90deg);border-color:var(--cyan);color:#fff}
.drawer__body{padding:clamp(34px,4vw,54px) clamp(24px,3.4vw,50px) 60px}
.drawer.is-on .drawer__body>*{animation:drIn .6s var(--slow) both}
.drawer.is-on .drawer__body>*:nth-child(2){animation-delay:.04s}
.drawer.is-on .drawer__body>*:nth-child(3){animation-delay:.08s}
.drawer.is-on .drawer__body>*:nth-child(4){animation-delay:.12s}
.drawer.is-on .drawer__body>*:nth-child(n+5){animation-delay:.16s}
@keyframes drIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.drawer__back{
  background:none;border:0;padding:0;margin:0 0 22px;cursor:pointer;
  color:var(--cyan-hot);font-family:var(--display);font-weight:500;font-size:14.5px;
}
.drawer__back:hover{color:#fff}

.dr__kicker{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 16px;font-size:14.5px;color:var(--mute)}
.dr__t{font-family:var(--display);font-weight:700;font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.03em;margin:0 0 26px;max-width:22ch}
.dr__lede{font-size:19px;line-height:1.62;color:var(--paper);margin:0 0 26px}
.dr__sec{margin:0 0 26px}
.dr__sec h4{
  font-family:var(--display);font-weight:600;font-size:15px;color:var(--cyan-hot);
  margin:0 0 8px;letter-spacing:-.005em;
}
.dr__sec p{margin:0;font-size:16.5px;line-height:1.72;color:var(--paper-dim)}
.dr__sec--hot{
  background:var(--cyan-wash);border-left:2px solid var(--cyan);
  padding:18px 20px;border-radius:0 6px 6px 0;
}
.dr__sec--hot p{color:var(--paper)}
.dr__sec .pts li{font-size:16px}
.pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:5px 13px;
  font-family:var(--display);font-weight:600;font-size:13px;
}
.pill--pass{background:rgba(63,224,168,.14);color:var(--good)}
.pill--fail{background:rgba(255,92,122,.14);color:var(--crit)}

.dr__fig{margin:0 0 26px;border:1px solid var(--edge);border-radius:6px;overflow:hidden;cursor:zoom-in;background:#fff}
.dr__fig img{width:100%;height:auto;transition:transform .8s var(--slow)}
.dr__fig:hover img{transform:scale(1.015)}
.dr__fig figcaption,.dr__code figcaption{
  background:var(--panel-solid);padding:12px 16px;font-size:13.5px;color:var(--mute);
  display:flex;justify-content:space-between;gap:12px;
}
.dr__fig figcaption span{color:var(--cyan);white-space:nowrap}
.dr__code{margin:0 0 26px;border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.dr__code .code{margin:0;border:0;border-radius:0;white-space:pre-wrap}

.dr__quote{margin:0 0 28px;padding:0 0 0 22px;border-left:2px solid var(--cyan)}
.dr__quote p{margin:0 0 10px;font-family:var(--display);font-weight:500;font-size:19px;line-height:1.5;color:var(--paper);letter-spacing:-.01em}
.dr__quote cite{font-style:normal;font-size:14px;color:var(--mute)}

.opts{display:grid;gap:12px}
.opt{border:1px solid var(--edge);border-radius:6px;padding:16px 18px;background:rgba(255,255,255,.025)}
.opt b{display:block;font-family:var(--display);font-weight:600;font-size:16.5px;margin:0 0 8px}
.dr__sec .opt p{font-size:15px;line-height:1.6;margin:0 0 6px}
.dr__sec .opt p:last-child{margin-bottom:0}
.opt p span{display:inline-block;min-width:78px;font-family:var(--display);font-weight:500;font-size:13px;color:var(--mute)}

.dr__terms{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 28px;padding-top:22px;border-top:1px solid var(--edge)}
.dr__terms>span{font-size:14px;color:var(--mute);margin-right:4px}
.dr__links{display:flex;flex-direction:column;gap:8px}
.dr__link{
  text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--edge);border-radius:6px;
  padding:12px 15px;cursor:pointer;font-family:var(--body);font-size:15px;color:var(--paper-dim);
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.dr__link:hover{border-color:var(--edge-hot);transform:translateX(4px)}
.dr__link--pass{border-left:2px solid var(--good)}
.dr__link--fail{border-left:2px solid var(--crit)}
.dr__ask{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--cyan);color:#04141a;border:0;border-radius:100px;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:15px;padding:14px 24px;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.dr__ask::before{content:'?';display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.2);font-size:12px}
.dr__ask:hover{background:var(--cyan-hot);transform:translateY(-2px)}

/* ---------- a term: opens its explainer ---------- */
.term{
  display:inline;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--cyan-hot);
  border-bottom:1px dashed rgba(79,226,240,.55);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.term:hover{color:#fff;border-bottom-color:#fff}
.dr__terms .term,.chk__terms .term,.glossary .term{
  display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(0,180,197,.3);border-radius:100px;
  padding:6px 13px 6px 10px;font-family:var(--body);font-size:13.5px;background:rgba(0,180,197,.06);
}
.dr__terms .term::before,.chk__terms .term::before,.glossary .term::before{
  content:'i';display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  border:1px solid currentColor;font-family:var(--display);font-weight:700;font-size:10px;font-style:normal;
}
.dr__terms .term:hover,.chk__terms .term:hover,.glossary .term:hover{border-color:var(--cyan);background:var(--cyan-wash)}

/* ============================================================
   PAGES
   ============================================================ */
.head--sub{margin-top:clamp(36px,4vw,56px)}

/* ---------- welcome ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.tile{
  position:relative;text-align:left;cursor:pointer;color:var(--paper);font:inherit;
  display:flex;flex-direction:column;gap:10px;min-height:250px;
  padding:clamp(22px,2.2vw,32px);border-radius:6px;
  background:rgba(16,23,32,.55);border:1px solid var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
}
.tile:hover{border-color:var(--edge-hot);transform:translateY(-6px);background:rgba(16,23,32,.8)}
.tile__n{font-family:var(--display);font-weight:800;font-size:clamp(40px,4vw,62px);line-height:1;letter-spacing:-.04em;color:var(--cyan-hot)}
.tile__t{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em;margin-top:auto}
.tile__s{font-size:15px;line-height:1.55;color:var(--mute);min-height:4.65em}
.tile__go{position:absolute;top:24px;right:26px;font-size:22px;color:var(--mute);transition:transform .35s var(--ease),color .35s var(--ease)}
.tile:hover .tile__go{transform:translateX(6px);color:var(--cyan-hot)}
.how__i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--cyan-wash);color:var(--cyan-hot);margin-bottom:18px}
.how__i svg{width:22px;height:22px}
.confid{
  display:flex;align-items:center;gap:16px;margin:clamp(40px,5vw,70px) 0 0;
  padding:18px 22px;border:1px solid var(--edge);border-radius:6px;background:rgba(16,23,32,.5);
}
.confid svg{width:22px;height:22px;flex:none;color:var(--cyan-hot)}
.confid p{margin:0;font-size:15.5px;line-height:1.55;color:var(--paper-dim)}
.confid b{color:var(--paper);font-weight:600}

/* ---------- your questions ---------- */
.qs{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:clamp(16px,1.8vw,26px)}
.q{
  position:relative;text-align:left;cursor:pointer;color:var(--paper);font:inherit;
  display:flex;flex-direction:column;gap:12px;min-height:280px;
  padding:clamp(24px,2.4vw,34px);border-radius:6px;
  background:rgba(16,23,32,.58);border:1px solid var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
  overflow:hidden;
}
.q::before{
  content:'';position:absolute;left:0;top:0;height:2px;width:0;background:var(--cyan);
  transition:width .6s var(--slow);
}
.q:hover{border-color:var(--edge-hot);transform:translateY(-6px);background:rgba(16,23,32,.82)}
.q:hover::before{width:100%}
.q__n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--cyan)}
.q__t{font-family:var(--display);font-weight:700;font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.03em}
.q__by{font-size:14px;color:var(--mute)}
.q__s{font-size:15.5px;line-height:1.6;color:var(--paper-dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.q__go{margin-top:auto;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--cyan-hot);display:flex;gap:8px;transition:gap .3s var(--ease)}
.q:hover .q__go{gap:14px}

/* ---------- audit ---------- */
.intro{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,60px);
  padding:clamp(26px,3vw,44px);border-radius:8px;
  background:rgba(16,23,32,.62);border:1px solid var(--edge);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.intro__t{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;margin:0 0 16px}
.intro__l p{font-size:17px;line-height:1.72;color:var(--paper-dim);margin:0 0 14px}
.intro__l p:last-child{margin-bottom:0}
.intro__h{font-family:var(--display);font-weight:600;font-size:16px;color:var(--cyan-hot);margin:6px 0 14px}
.tools{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.tools li{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;background:rgba(11,17,24,.92);font-size:15px}
.tools b{font-weight:500;color:var(--paper)}
.tools span{color:var(--mute);font-size:14px;text-align:right}
.intro__note{margin:12px 0 0;font-size:14px;color:var(--mute)}
.intro__stamp{
  grid-column:1/-1;display:flex;align-items:center;gap:12px;
  padding-top:20px;border-top:1px solid var(--edge);font-size:15px;color:var(--paper-dim);
}
.intro__stamp svg{width:20px;height:20px;flex:none;color:var(--cyan-hot)}
.intro__stamp b{color:var(--paper);font-weight:600}

.score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,4vw,64px);align-items:center;margin:clamp(70px,8vw,120px) 0 clamp(30px,3.4vw,50px)}
.score__ring{position:relative;width:clamp(150px,14vw,200px)}
.score__ring svg{width:100%;height:auto;display:block;overflow:visible}
.score__num{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;padding-top:34%;font-family:var(--display);font-size:22px;font-weight:600;color:var(--mute)}
.score__num b{font-size:clamp(44px,4.4vw,64px);font-weight:800;color:var(--good);letter-spacing:-.04em;line-height:1}
.score__txt h2.big{margin-bottom:12px}
.score__txt .lede{margin-bottom:18px}
.score__key{display:flex;gap:20px;margin:0;font-size:15px}
.sk{display:flex;align-items:center;gap:8px}
.sk::before{content:'';width:10px;height:10px;border-radius:50%}
.sk--pass{color:var(--good)} .sk--pass::before{background:var(--good)}
.sk--fail{color:var(--crit)} .sk--fail::before{background:var(--crit)}

.chks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.chk{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 20px;
  padding:clamp(20px,2vw,28px);border-radius:6px;
  background:rgba(16,23,32,.6);border:1px solid var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
}
.chk:hover{transform:translateY(-4px);background:rgba(16,23,32,.84)}
.chk--pass:hover{border-color:rgba(63,224,168,.45)}
.chk--fail:hover{border-color:rgba(255,92,122,.45)}
.chk__mark{grid-row:1/3;display:grid;place-items:center;width:46px;height:46px;border-radius:50%}
.chk__mark svg{width:22px;height:22px}
.chk--pass .chk__mark{background:rgba(63,224,168,.14);color:var(--good);box-shadow:0 0 0 1px rgba(63,224,168,.35)}
.chk--fail .chk__mark{background:rgba(255,92,122,.13);color:var(--crit);box-shadow:0 0 0 1px rgba(255,92,122,.32)}
.chk__state{font-size:13.5px;color:var(--mute)}
.chk--pass .chk__state{color:var(--good)}
.chk--fail .chk__state{color:var(--crit)}
.chk__t{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.5vw,22px);line-height:1.25;letter-spacing:-.02em;margin:6px 0 8px}
.chk__s{margin:0;font-size:15.5px;line-height:1.6;color:var(--paper-dim)}
.chk__foot{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px}
/* the whole card opens the finding; the term chips sit above that */
.chk__open{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--cyan-hot);
  display:flex;gap:8px;transition:gap .3s var(--ease),color .3s var(--ease);
}
.chk__open::after{content:'';position:absolute;inset:0;border-radius:6px}
.chk:hover .chk__open{gap:14px;color:#fff}
.chk__terms{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}

.glossary{margin:clamp(34px,4vw,56px) 0 0}
.glossary__h{font-family:var(--display);font-weight:600;font-size:16px;color:var(--paper-dim);margin:0 0 14px}
.glossary__list{display:flex;flex-wrap:wrap;gap:8px}

.subnav{
  position:sticky;top:86px;z-index:20;display:flex;gap:6px;flex-wrap:wrap;
  margin:clamp(28px,3vw,44px) 0 0;padding:6px;border-radius:100px;width:max-content;max-width:100%;
  background:rgba(11,17,24,.86);border:1px solid var(--edge);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.subnav__b{
  background:none;border:0;border-radius:100px;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:15px;color:var(--mute);
  padding:11px 20px;transition:color .25s var(--ease),background .25s var(--ease);
}
.subnav__b:hover{color:var(--paper)}
.subnav__b.is-on{background:var(--cyan);color:#04141a;font-weight:600}
.deep{display:none}
.deep.is-on{display:block;animation:drIn .6s var(--slow) both}

/* ---------- pithy ---------- */
.depts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:clamp(30px,3.6vw,52px) 0;background:var(--edge);border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.dept{
  display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2vw,28px);
  background:rgba(11,17,24,.82);transition:background .3s var(--ease);
}
.dept:hover{background:rgba(16,28,38,.92)}
.dept b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.015em}
.dept span{font-size:15px;line-height:1.55;color:var(--mute)}

@media (max-width:1150px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .depts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intro{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .chks{grid-template-columns:minmax(0,1fr)}
  .subnav{top:128px;border-radius:10px}
  .score{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .tiles,.depts{grid-template-columns:minmax(0,1fr)}
  .tile{min-height:0}
  .qs{grid-template-columns:minmax(0,1fr)}
  .q{min-height:0}
  .subnav{top:112px}
  .subnav__b{padding:9px 14px;font-size:14px}
  .chk{grid-template-columns:minmax(0,1fr)}
  .chk__mark{grid-row:auto;width:38px;height:38px}
  .chk__foot{grid-column:1}
  .dock__form,.ask__intro,.ask__feed,.ask__chips{padding-left:18px;padding-right:18px}
  .dock__head{padding-left:18px}
}

/* ============================================================
   NOTES, PANELS AND CARDS THAT OPEN
   Three ways to open something, so the portal doesn't read the
   same everywhere: a short note beside what you clicked (.pop),
   a panel in the middle (.drawer--center, the audit findings),
   and the panel from the right (the open questions).
   ============================================================ */

/* ---------- pop: a short note ---------- */
.pop{
  position:fixed;z-index:260;left:0;top:0;
  width:min(380px,calc(100vw - 32px));max-height:min(62vh,520px);overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(18,27,37,.98),rgba(11,17,24,.98));
  border:1px solid var(--edge-hot);border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(0,180,197,.06);
  padding:22px 22px 20px;outline:none;
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.98);transform-origin:var(--arrow,50%) 0;
  transition:opacity .22s var(--ease),transform .32s var(--slow),visibility .22s;
}
.pop.is-on{opacity:1;visibility:visible;transform:none}
.pop{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.pop::-webkit-scrollbar{width:6px}
.pop::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.pop--up{transform-origin:var(--arrow,50%) 100%}
.pop__arrow{
  position:absolute;top:-7px;left:var(--arrow,50%);width:12px;height:12px;margin-left:-6px;
  background:rgba(18,27,37,.98);border-left:1px solid var(--edge-hot);border-top:1px solid var(--edge-hot);
  transform:rotate(45deg);
}
.pop--up .pop__arrow{top:auto;bottom:-7px;transform:rotate(225deg);background:rgba(11,17,24,.98)}
.pop__x{
  position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;
  background:none;border:1px solid var(--edge);color:var(--mute);font-size:16px;line-height:1;cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),transform .25s var(--ease);
}
.pop__x:hover{color:#fff;border-color:var(--cyan);transform:rotate(90deg)}
.pop__body>*{animation:drIn .45s var(--slow) both}
.pop__t{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.02em;margin:0 36px 10px 0;color:var(--paper)}
.pop__p{margin:0;font-size:15.5px;line-height:1.65;color:var(--paper-dim)}
.pop__deka{margin:14px 0 0;padding:11px 14px;border-left:2px solid var(--cyan);background:var(--cyan-wash);border-radius:0 6px 6px 0;font-size:14.5px;line-height:1.55;color:var(--paper)}
/* a glossary term reuses its drawer template, set smaller */
.pop .dr__kicker{font-size:13px;margin-bottom:6px}
.pop .dr__t{font-size:21px;margin:0 36px 10px 0;max-width:none}
.pop .dr__lede{font-size:15.5px;line-height:1.62;margin-bottom:14px}
.pop .dr__sec{margin-bottom:14px}
.pop .dr__sec--hot{padding:12px 14px}
.pop .dr__sec p{font-size:14.5px;line-height:1.6}
.pop .dr__sec h4{font-size:13.5px}
.pop .dr__link{font-size:14px;padding:9px 12px}
.pop .dr__ask{font-size:14px;padding:11px 18px}
/* on a phone: rises from the bottom, never the whole screen */
.pop--sheet{
  left:10px!important;right:10px;top:auto!important;bottom:10px;width:auto;max-height:58vh;
  transform:translateY(24px);border-radius:14px;
}
.pop--sheet.is-on{transform:none}
.pop--sheet .pop__arrow{display:none}

/* ---------- drawer, centred ---------- */
.drawer.drawer--center .drawer__panel{
  top:50%;left:50%;right:auto;bottom:auto;
  width:min(820px,calc(100vw - 32px));max-height:min(88vh,940px);
  border:1px solid var(--edge-hot);border-radius:14px;
  box-shadow:0 50px 140px rgba(0,0,0,.7);
  transform:translate(-50%,-47%) scale(.965);opacity:0;
  transition:transform .55s var(--slow),opacity .3s var(--ease);
}
.drawer.drawer--center.is-on .drawer__panel{transform:translate(-50%,-50%);opacity:1}
.drawer--center .drawer__body{padding:clamp(28px,3.4vw,46px) clamp(22px,3.4vw,48px) 44px}

/* ---------- welcome ---------- */
.punch{
  font-family:var(--display);font-weight:600;font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.025em;
  margin:22px 0 0;color:var(--paper-dim);
}
.punch span{color:var(--cyan-hot)}
.tile__i{
  display:grid;place-items:center;width:58px;height:58px;border-radius:16px;
  background:linear-gradient(145deg,rgba(0,180,197,.22),rgba(0,180,197,.05));
  border:1px solid rgba(0,180,197,.32);color:var(--cyan-hot);
  transition:transform .45s var(--slow),background .35s var(--ease);
}
.tile__i svg{width:27px;height:27px}
.tile:hover .tile__i{transform:rotate(-6deg) scale(1.06);background:linear-gradient(145deg,rgba(0,180,197,.34),rgba(0,180,197,.08))}
.tile .tile__t{font-size:clamp(25px,2.1vw,32px);font-weight:700;letter-spacing:-.03em;margin-top:auto;line-height:1.1}
.tile .tile__go{
  position:static;margin-top:6px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--cyan-hot);
  display:flex;gap:8px;transition:gap .3s var(--ease);
}
.tile:hover .tile__go{transform:none;gap:14px;color:#fff}

/* ---------- plan: the reminder ---------- */
.recap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin:clamp(30px,3.6vw,50px) 0 clamp(60px,7vw,100px)}
.recap__c{
  position:relative;text-align:left;cursor:pointer;font:inherit;color:var(--paper);
  display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2vw,28px);border-radius:8px;
  background:rgba(16,23,32,.6);border:1px solid var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
}
.recap__c:hover{border-color:var(--edge-hot);transform:translateY(-5px);background:rgba(16,23,32,.85)}
.recap__i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--cyan-wash);color:var(--cyan-hot);margin-bottom:6px}
.recap__i svg{width:22px;height:22px}
.recap__c b{font-family:var(--display);font-weight:600;font-size:clamp(18px,1.4vw,21px);line-height:1.25;letter-spacing:-.02em}
.recap__c>span:last-child{font-size:15px;line-height:1.55;color:var(--mute)}

/* ---------- pithy: numbers and teams that open ---------- */
.stat--b{
  text-align:left;font:inherit;color:inherit;background:none;border:0;border-top:1px solid var(--edge);
  cursor:pointer;padding:20px 40px 0 0;border-radius:0;transition:transform .35s var(--ease);
}
.stat--b:hover{transform:translateY(-4px)}
.stat--b:hover .stat__v{color:var(--cyan-hot)}
.stat__more{
  position:absolute;top:22px;right:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--edge-hot);color:var(--cyan-hot);font-family:var(--display);font-weight:500;font-size:17px;line-height:1;
  transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.stat--b:hover .stat__more,.stat--b[aria-expanded="true"] .stat__more{background:var(--cyan);color:#04141a;transform:rotate(90deg)}
.stat__v{transition:color .3s var(--ease)}

button.dept{text-align:left;font:inherit;color:inherit;border:0;cursor:pointer;position:relative}
.dept__go{
  margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:8px;
  font-family:var(--display);font-weight:500;font-size:13.5px;color:var(--cyan-hot)!important;
}
.dept__go i{
  font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1px solid currentColor;font-size:13px;line-height:1;transition:transform .35s var(--ease);
}
.dept:hover .dept__go i,.dept[aria-expanded="true"] .dept__go i{transform:rotate(90deg)}
.dept[aria-expanded="true"]{background:rgba(0,60,70,.55)}

/* ---------- audit: the tools list opens too ---------- */
.intro__h span{font-family:var(--body);font-weight:400;font-size:13.5px;color:var(--mute);margin-left:10px}
.tools li{padding:0}
.tools__b{
  width:100%;display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:11px 15px;background:none;border:0;cursor:pointer;font:inherit;color:inherit;text-align:left;
  transition:background .25s var(--ease);
}
.tools__b:hover,.tools__b[aria-expanded="true"]{background:rgba(0,180,197,.08)}
.tools__b b::after{content:' +';color:var(--cyan-hot);font-weight:500}

/* ---------- ask: buttons under an answer ---------- */
.msg__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;max-width:92%}
.msg__acts .msg__act{
  margin:0;align-self:auto;padding:8px 14px;border:1px solid var(--edge-hot);border-radius:100px;
  background:rgba(0,180,197,.07);font-size:13.5px;text-align:left;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.msg__acts .msg__act:hover{background:var(--cyan-wash);border-color:var(--cyan);color:#fff}
.msg__act--team{background:var(--cyan)!important;color:#04141a!important;border-color:var(--cyan)!important;font-weight:600}
.msg__act--team:hover{background:var(--cyan-hot)!important}
.msg__act:disabled{opacity:.6;cursor:wait}
.msg__sent{margin:0;font-size:13.5px;color:var(--good)}

@media (max-width:1150px){
  .recap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .recap{grid-template-columns:minmax(0,1fr)}
  .tile__i{width:48px;height:48px;border-radius:13px}
  .drawer.drawer--center .drawer__panel{width:calc(100vw - 20px);max-height:90vh}
  .intro__h span{display:block;margin:4px 0 0}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1150px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .cols--aside{grid-template-columns:minmax(0,1fr)}
  h1.mega{max-width:20ch}
}

@media (max-width:900px){
  :root{--rail:0px}
  body{font-size:16px}
  .layout{grid-template-columns:minmax(0,1fr)}
  .rail{
    position:sticky;top:74px;height:auto;flex-direction:row;
    overflow-x:auto;border-right:0;border-bottom:1px solid var(--edge);
    padding:0;background:rgba(7,11,16,.94);backdrop-filter:blur(20px);
    z-index:55;scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail__item{width:auto;flex:none;padding:16px 20px;white-space:nowrap;font-size:14.5px}
  .rail__item:hover{padding-left:20px}
  .rail__item::before{left:50%;bottom:0;top:auto;transform:translateX(-50%);width:0;height:2px;transition:width .4s var(--ease)}
  .rail__item.is-on::before{height:2px;width:58%}
  .rail__badge{top:8px;right:6px}
  .ex__pad{padding-left:0}
  .ex__btn{gap:16px}
  .ex__tag{width:42px;font-size:11px}
  .dock{width:100vw}
  .dock__toggle{right:18px;bottom:18px;padding:14px 20px;font-size:14px}
  .topbar__tag{display:none}
}

@media (max-width:560px){
  .topbar{height:62px;gap:14px}
  .rail{top:62px}
  .signout span{display:none}
  .signout{padding:9px}
  .stats{grid-template-columns:repeat(2,1fr);gap:22px}
  .fig img{height:180px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .rv{opacity:1;transform:none}
  #field{display:none}
  .gate__video{display:none}
}

/* ============================================================
   THE PLAN — photographs
   Every section carries one, placed differently so the page doesn't
   repeat itself: a small photo on each row, beside the text or across
   it when the row opens, on top of a card, behind a card, beside the
   quote, and one wide photo to close.
   ============================================================ */
.ex--img .ex__btn{align-items:center}
.ex__img{
  flex:none;width:clamp(84px,8.4vw,128px);aspect-ratio:3/2;
  border-radius:4px;overflow:hidden;border:1px solid var(--edge);background:var(--deep);
}
.ex__img img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:brightness(.8) saturate(.88);transform:scale(1.02);
  transition:filter .45s var(--ease),transform .9s var(--slow);
}
.ex__btn:hover .ex__img img,.ex__btn[aria-expanded="true"] .ex__img img{filter:none;transform:scale(1.08)}

.ex__pad--fig,.ex__pad--band{padding-left:0}
.ex__pad--fig{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
.ex__fig{
  margin:0;position:relative;border-radius:4px;overflow:hidden;
  border:1px solid var(--edge);background:var(--deep);
}
.ex__fig img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.ex__fig::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(7,11,16,.38));
}
.ex__fig--band{grid-column:1/-1}
.ex__fig--band img{aspect-ratio:21/8}

/* the quote, with the portrait on its right */
.pull--photo{grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) minmax(0,.62fr);align-items:end}
.pull__img{
  order:3;margin:0;align-self:stretch;min-height:340px;
  border-radius:4px;overflow:hidden;border:1px solid var(--edge);
}
.pull__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}

/* a photo on top of a card */
.panel--img{padding-top:0;overflow:hidden}
.panel__img{
  margin:0 calc(-1 * clamp(26px,2.6vw,38px)) clamp(22px,2.2vw,30px);
  aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--edge);
}
.panel__img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--slow)}
.panel--img:hover .panel__img img{transform:scale(1.04)}

/* a photo behind a card, the copy on its dark side */
.panel--photo{
  position:relative;overflow:hidden;
  min-height:clamp(340px,30vw,440px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.panel--photo>:not(.panel__bg){position:relative;max-width:60ch}
.panel__bg{position:absolute;inset:0}
.panel__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.62}
.panel__bg::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,11,16,.97) 0%,rgba(7,11,16,.88) 40%,rgba(7,11,16,.34) 78%,rgba(7,11,16,.18) 100%),
    linear-gradient(0deg,rgba(7,11,16,.6),transparent 55%);
}

/* the last word of the plan, and a photo of what it asks for */
.plan-close{
  max-width:min(100%,920px);margin:clamp(34px,4vw,56px) 0 clamp(60px,7vw,100px) auto;
  border-radius:4px;overflow:hidden;border:1px solid var(--edge);position:relative;
}
.plan-close img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;object-position:92% 50%}

@media (max-width:1100px){
  .ex__pad--fig{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex__pad--fig .ex__fig{grid-column:1/-1}
  .ex__pad--fig .ex__fig img{aspect-ratio:21/9}
  .pull--photo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pull__img{order:-1;grid-column:1/-1;min-height:0;aspect-ratio:16/9}
}
@media (max-width:1000px){
  .pull--photo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .ex__pad--fig{grid-template-columns:minmax(0,1fr)}
  .ex__img{width:66px}
  .ex__fig--band img{aspect-ratio:16/9}
  .pull__img{aspect-ratio:4/3}
  .plan-close img{aspect-ratio:4/3;object-position:80% 50%}
  .panel__bg img{opacity:.4}
}
@media (max-width:480px){
  .ex__tag + .ex__img{display:none}
}

/* ============================================================
   THE AUDIT — everything we looked at, and the ten that matter
   ============================================================ */
.imp{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.01em;
  padding:3px 10px;border-radius:999px;border:1px solid currentColor;
}
.imp--critical{color:var(--crit);background:rgba(255,92,122,.1)}
.imp--high{color:var(--high);background:rgba(255,180,67,.08)}
.imp--medium{color:var(--cyan-hot);background:var(--cyan-wash)}
.imp--low{color:var(--mute);background:rgba(255,255,255,.03)}

.aud{margin:clamp(30px,3.6vw,50px) 0 clamp(70px,8vw,120px)}
.aud__area{margin-bottom:clamp(30px,3.4vw,46px)}
.aud__h{
  display:flex;align-items:baseline;gap:12px;margin:0 0 12px;
  font-family:var(--display);font-weight:600;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em;
}
.aud__h span{font-family:var(--body);font-weight:400;font-size:14px;color:var(--mute);letter-spacing:0}
.aud__t{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--edge);border-radius:4px;overflow:hidden}
.aud__t th{
  text-align:left;font-family:var(--display);font-weight:500;font-size:13px;color:var(--mute);
  padding:12px 16px;border-bottom:1px solid var(--edge);background:rgba(255,255,255,.02)
}
.aud__t td{padding:14px 16px;border-bottom:1px solid var(--edge);vertical-align:top;font-size:15px;line-height:1.5;color:var(--paper-dim)}
.aud__t tr:last-child td{border-bottom:0}
.aud__r{transition:background .3s var(--ease)}
.aud__r:hover{background:rgba(0,180,197,.05)}
.aud__what{width:38%}
.aud__what b{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--paper);letter-spacing:-.01em;margin-bottom:3px}
.aud__n{float:left;width:34px;font-family:var(--mono);font-size:12px;color:var(--cyan);padding-top:3px}
.aud__note{display:block;margin-left:34px;font-size:14px;color:var(--mute)}
.aud__what b{margin-left:34px}
.aud__why{width:30%}
.aud__imp{width:12%}
.aud__res{width:20%;white-space:nowrap}
.res{font-family:var(--display);font-weight:600;font-size:14px}
.res--pass{color:var(--good)}
.res--fail{color:var(--crit)}
.res--watch{color:var(--high)}
.aud__open{
  margin-left:10px;padding:3px 10px;border-radius:999px;cursor:pointer;
  background:none;border:1px solid var(--edge-hot);color:var(--cyan-hot);
  font-family:var(--display);font-weight:500;font-size:12.5px;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.aud__open:hover{background:var(--cyan-wash);border-color:var(--cyan)}
.aud__foot{margin:6px 0 0;font-size:15px;color:var(--mute)}

@media (max-width:900px){
  .aud__t thead{display:none}
  .aud__t,.aud__t tbody,.aud__t tr,.aud__t td{display:block;width:100%}
  .aud__t tr{padding:14px 16px;border-bottom:1px solid var(--edge)}
  .aud__t tr:last-child{border-bottom:0}
  .aud__t td{padding:0;border:0}
  .aud__why{margin:8px 0 10px 34px;width:auto!important}
  .aud__imp,.aud__res{display:inline-block!important;width:auto!important;margin-left:34px}
  .aud__res{margin-left:10px;white-space:normal}
}

/* the ten: a big number, a title that says what it measures, one line */
.chk__mark--n{position:relative;width:62px;height:62px;border-radius:14px}
.chk__mark--n b{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.04em;line-height:1}
.chk__mark--n i{
  position:absolute;right:-7px;bottom:-7px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--void);box-shadow:0 0 0 1px currentColor;
}
.chk__mark--n i svg{width:13px;height:13px}
.chk__state{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.chk__state .imp{font-size:11.5px;padding:2px 9px}
.chk__t{font-size:clamp(21px,1.7vw,25px)}
.chk__s{font-size:16px;color:var(--paper)}
@media (max-width:560px){
  .chk__mark--n{width:52px;height:52px}
  .chk__mark--n b{font-size:25px}
}

/* in the finding and the open-question panels */
.dr__sec h4 .imp{margin-left:10px;font-size:11.5px;padding:2px 9px;vertical-align:2px}
.dr__impact{color:var(--paper);font-weight:500}
.dr__sign{
  margin:30px 0 22px;padding-top:18px;border-top:1px solid var(--edge);
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--paper);
}
.dr__sign span{display:block;font-family:var(--body);font-weight:400;font-size:14px;color:var(--mute);margin-top:2px}

/* where the assistant just took you */
.is-spot{animation:spot 2.4s var(--ease) both}
@keyframes spot{
  0%{box-shadow:0 0 0 0 rgba(79,226,240,0)}
  15%{box-shadow:0 0 0 3px rgba(79,226,240,.55),0 0 40px rgba(0,180,197,.25)}
  100%{box-shadow:0 0 0 0 rgba(79,226,240,0)}
}