/* ==========================================================================
   ConradBI — marketing site stylesheet
   Brand tokens taken from conradbi.com (teal / dark teal / orange).
   Mobile-first. No frameworks. The only external request on the site is the
   Calendly booking widget on contact.html.
   ========================================================================== */

/* --------------------------------------------------------- design tokens */
:root{
  --ink:#16343C;
  --navy:#2D7A8E;          /* primary teal */
  --navy-dark:#215F70;
  --accent:#FF831F;        /* brand orange */
  --accent-dark:#C96208;
  --bg:#F5F8F8;
  --card-dark:#173A42;
  --card-darker:#102B31;
  --muted:#557077;
  --soft:#E4EFF1;
  --white:#fff;
  --line:#D5E2E5;

  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(22,52,60,.06), 0 2px 8px rgba(22,52,60,.06);
  --shadow-md:0 4px 12px rgba(22,52,60,.08), 0 12px 32px rgba(22,52,60,.09);
  --shadow-lg:0 12px 28px rgba(22,52,60,.12), 0 28px 64px rgba(22,52,60,.12);

  --sans:"Segoe UI",Arial,Helvetica,sans-serif;
  --mono:Consolas,"Courier New",monospace;

  --wrap:1140px;
  --gap:clamp(28px,5vw,56px);
  --sec-y:clamp(48px,7vw,86px);
}

/* --------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;}
/* any explicit display: below would otherwise beat the UA's [hidden]{display:none} */
[hidden]{display:none !important;}
a{color:var(--navy);text-decoration:none;}
a:hover{color:var(--accent-dark);}
h1,h2,h3,h4{line-height:1.16;margin:0 0 .5em;font-weight:800;letter-spacing:-.012em;}
h1{font-size:clamp(2.05rem,5.1vw,3.35rem);}
h2{font-size:clamp(1.6rem,3.5vw,2.3rem);}
h3{font-size:clamp(1.1rem,2vw,1.32rem);}
p{margin:0 0 1rem;}
ul{margin:0;padding:0;}
button{font:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:#fff;padding:12px 20px;font-weight:700;border-radius:0 0 8px 0;
}
.skip:focus{left:0;color:#fff;}

/* ------------------------------------------------------------- helpers */
.wrap{width:min(var(--wrap),calc(100% - 2*clamp(18px,5vw,34px)));margin-inline:auto;}
.section{padding-block:var(--sec-y);}
.section--tint{background:var(--white);}
.section--soft{background:linear-gradient(180deg,var(--soft),#EEF5F6);}
.center{text-align:center;}
.lede{font-size:clamp(1rem,1.55vw,1.12rem);color:var(--muted);max-width:64ch;}
.center .lede{margin-inline:auto;}
.muted{color:var(--muted);}
.nowrap{white-space:nowrap;}

.kicker{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  /* a shade darker than --navy: at 11px on the --soft band, --navy is only
     4.18:1. Visually identical, and it lifts every kicker on the site to 5.4:1. */
  color:#256676;font-weight:700;display:block;margin-bottom:.6rem;
}
.kicker--light{color:var(--accent);}
.sec-head{max-width:66ch;margin-bottom:clamp(26px,3.4vw,44px);}
.sec-head.center{margin-inline:auto;}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.82em 1.5em;border-radius:var(--radius);border:2px solid transparent;
  font-weight:700;font-size:.95rem;letter-spacing:.01em;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
  text-align:center;
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(255,131,31,.32);}
.btn--primary:hover{background:var(--accent-dark);color:#fff;box-shadow:0 8px 22px rgba(255,131,31,.4);}
.btn--ghost{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn--ghost:hover{background:var(--navy);color:#fff;}
.btn--light{background:#fff;color:var(--ink);}
.btn--light:hover{background:var(--soft);color:var(--ink);}
.btn--outline-light{border-color:rgba(255,255,255,.5);color:#fff;}
.btn--outline-light:hover{background:rgba(255,255,255,.12);color:#fff;}
.btn--block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.center .btn-row{justify-content:center;}

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky;top:0;z-index:100;background:rgba(245,248,248,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;}
.brand{display:flex;align-items:center;flex:0 0 auto;}
.brand img{height:34px;width:auto;}
.nav{display:flex;align-items:center;gap:6px;}
.nav a{
  padding:9px 14px;border-radius:8px;color:var(--ink);font-weight:600;font-size:.94rem;
  transition:background .15s ease,color .15s ease;
}
.nav a:hover{background:var(--soft);color:var(--navy);}
.nav a[aria-current="page"]{color:var(--navy);background:var(--soft);}
/* ------------------------------------------------------- nav dropdown */
.nav__item{position:relative;display:flex;align-items:center;}
.nav__item > a{display:inline-flex;align-items:center;gap:5px;}
.nav__item > a .caret{width:9px;height:9px;flex:0 0 auto;transition:transform .18s ease;}
.subnav{
  list-style:none;margin:0;padding:7px;position:absolute;top:calc(100% + 4px);left:0;
  min-width:250px;max-width:300px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow-md);z-index:120;
  /* visibility rather than display, so leaving can be given a grace period */
  visibility:hidden;opacity:0;transform:translateY(-5px);
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .4s;
}
.nav__item:hover .subnav,
.nav__item.open .subnav{
  visibility:visible;opacity:1;transform:none;
  transition:opacity .14s ease,transform .14s ease,visibility 0s;
}
/* Invisible bridge across the 4px gap between the nav item and the panel.
   Hung off .subnav rather than .nav__item so it spans the panel's full width
   — the panel overhangs its parent by ~140px, and a diagonal move toward an
   item would otherwise leave :hover mid-flight. Inherits visibility:hidden
   when closed, so it never blocks anything. */
.subnav::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px;}
@media (prefers-reduced-motion:reduce){
  .subnav{transform:none;transition:visibility 0s linear .4s;}
  .nav__item:hover .subnav,
  .nav__item.open .subnav{transition:visibility 0s;}
}
.nav__item:hover > a .caret,
.nav__item.open > a .caret{transform:rotate(180deg);}
.subnav a{display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;}
.subnav b{display:block;font-weight:700;}
.subnav span{display:block;font-size:.74rem;color:var(--muted);font-weight:400;line-height:1.35;margin-top:1px;}
.subnav a:hover span{color:var(--navy);}

/* --------------------------------------------------- resource section tabs */
.rtabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,38px);}
.rtabs a{
  border:1.5px solid var(--line);border-radius:30px;padding:8px 16px;
  font-size:.88rem;font-weight:700;color:var(--ink);background:#fff;
}
.rtabs a:hover{border-color:var(--navy);color:var(--navy);}
.rtabs a[aria-current="page"]{background:var(--navy);border-color:var(--navy);color:#fff;}

/* --------------------------------------------------------- resource search */
.rsearch{margin-bottom:clamp(20px,2.6vw,30px);}
.rsearch__field{
  display:flex;align-items:center;gap:10px;background:#fff;
  border:1.5px solid var(--line);border-radius:30px;padding:0 8px 0 16px;
  max-width:520px;transition:border-color .16s ease,box-shadow .16s ease;
}
.rsearch__field:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(45,122,142,.14);}
.rsearch__field svg{width:17px;height:17px;color:var(--muted);flex:0 0 auto;}
.rsearch__field input{
  flex:1;min-width:0;border:0;background:none;padding:12px 0;font:inherit;
  font-size:.95rem;color:var(--ink);outline:none;
}
.rsearch__field input::-webkit-search-cancel-button{display:none;}
.rsearch__clear{
  flex:0 0 auto;border:0;background:var(--soft);color:var(--navy);cursor:pointer;
  width:26px;height:26px;border-radius:50%;font-size:1rem;line-height:1;
}
.rsearch__clear:hover{background:var(--navy);color:#fff;}
.rsearch__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.rchip{
  border:1.5px solid var(--line);background:#fff;border-radius:30px;cursor:pointer;
  padding:6px 14px;font:inherit;font-size:.82rem;font-weight:700;color:var(--muted);
}
.rchip:hover{border-color:var(--navy);color:var(--navy);}
.rchip.is-on{background:var(--navy);border-color:var(--navy);color:#fff;}
.rresults__count{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;
}

/* ------------------------------- featured item at the top of a section page */
.feat{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:clamp(26px,3.6vw,42px);
}
.feat__media{display:block;background:var(--card-dark);}
.feat__media img{display:block;width:100%;height:100%;min-height:170px;object-fit:cover;}
.feat__body{padding:clamp(22px,3vw,34px);}
.feat__label{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-dark);margin-bottom:11px;
}
.feat h1{font-size:clamp(1.3rem,3vw,2rem);line-height:1.2;margin-bottom:.42em;}
.feat h1 a{color:inherit;}
.feat h1 a:hover{color:var(--navy);}
.feat p{color:var(--muted);max-width:62ch;}
.feat__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;
  border-top:1px solid var(--line);margin-top:18px;padding-top:14px;
  font-size:.8rem;color:var(--muted);
}
.feat__meta a{font-weight:700;color:var(--navy);}

/* placeholder shown when a section has nothing to feature yet */
.feat--empty{background:transparent;border-style:dashed;border-width:1.5px;box-shadow:none;}
.feat--empty .feat__body{text-align:center;padding-block:clamp(28px,4vw,46px);}
.feat--empty p{margin-inline:auto;max-width:56ch;}
.feat--empty .btn-row{justify-content:center;}

@media (min-width:760px){
  .feat--item{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);align-items:stretch;}
}

/* ------------------------------------------------------- empty-state panel */
.empty{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,48px);box-shadow:var(--shadow-sm);text-align:center;
  max-width:70ch;margin-inline:auto;
}
.empty__ico{
  width:54px;height:54px;border-radius:14px;background:var(--soft);color:var(--navy);
  display:grid;place-items:center;margin:0 auto 18px;
}
.empty__ico svg{width:26px;height:26px;}
.empty h2{font-size:clamp(1.3rem,2.6vw,1.7rem);}
.empty p{color:var(--muted);max-width:56ch;margin-inline:auto;}
.empty .btn-row{justify-content:center;}
.empty__list{
  list-style:none;margin:22px auto 0;padding:0;max-width:44ch;text-align:left;display:grid;gap:9px;
}
.empty__list li{position:relative;padding-left:24px;font-size:.93rem;color:var(--muted);}
.empty__list li::before{
  content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:2px;
  background:var(--accent);
}

.head-cta{display:flex;align-items:center;gap:10px;}
.head-cta .btn{padding:.62em 1.15em;font-size:.9rem;}
.nav-toggle{
  display:none;background:none;border:1.5px solid var(--line);border-radius:8px;
  padding:8px 10px;line-height:0;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;transition:.2s;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ------------------------------------------------------------------ hero */
.hero{padding-block:clamp(40px,6vw,76px) clamp(44px,6vw,80px);position:relative;overflow:hidden;}
.hero::after{
  content:"";position:absolute;inset:auto -12% -55% 55%;height:70%;
  background:radial-gradient(closest-side,rgba(45,122,142,.13),transparent);
  pointer-events:none;
}
.hero__grid{display:grid;gap:clamp(30px,4vw,50px);align-items:center;}
.hero h1{margin-bottom:.42em;}
.hero h1 .acc{color:var(--accent);}
.hero .lede{font-size:clamp(1.02rem,1.7vw,1.18rem);}
.hero__note{margin-top:20px;font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;}
.hero__note span{display:inline-flex;align-items:center;gap:7px;}
.hero__note span::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;
}

/* ------------------------------------------------- dashboard mock (hero) */
.mock{
  background:var(--card-dark);border-radius:var(--radius-lg);padding:14px;
  box-shadow:var(--shadow-lg);position:relative;
}
.mock__bar{display:flex;align-items:center;gap:6px;padding:2px 4px 12px;}
.mock__bar i{width:9px;height:9px;border-radius:50%;background:#3C5A63;display:block;}
.mock__bar i:first-child{background:var(--accent);}
.mock__bar b{
  margin-left:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  color:#9CC1CC;font-weight:400;text-transform:uppercase;
}
.mock__body{background:#fff;border-radius:10px;padding:14px;display:grid;gap:12px;}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.kpi{background:var(--soft);border-radius:8px;padding:9px 11px;}
.kpi b{display:block;font-size:1.12rem;color:var(--ink);line-height:1.2;}
.kpi span{font-family:var(--mono);font-size:.53rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;}
.kpi.up b{color:var(--navy);}
.mock__charts{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;}
.chart{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;}
.chart h4{
  font-family:var(--mono);font-size:.53rem;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;margin:0 0 9px;font-weight:700;
}
.bars{display:flex;align-items:flex-end;gap:7px;height:86px;}
.bars i{flex:1;background:linear-gradient(180deg,var(--navy),#4E96A8);border-radius:3px 3px 0 0;display:block;}
.bars i.hi{background:linear-gradient(180deg,var(--accent),#FFA355);}
.spark{height:86px;width:100%;}
.mock__table{width:100%;border-collapse:collapse;font-size:.7rem;}
.mock__table th{
  text-align:left;font-family:var(--mono);font-size:.53rem;letter-spacing:.09em;
  color:var(--muted);text-transform:uppercase;padding:0 0 6px;font-weight:700;
}
.mock__table td{padding:5px 0;border-top:1px solid var(--line);color:#33525A;}
.mock__table td:last-child,.mock__table th:last-child{text-align:right;}
.mock__table .pos{color:#2E7D4F;font-weight:700;}
.mock__table .neg{color:#B3431E;font-weight:700;}

/* ------------------------------------------------------------ stat strip */
.stats{background:var(--card-dark);color:#fff;}
.stats__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.13);}
.stat{background:var(--card-dark);padding:24px 16px;text-align:center;}
.stat b{
  display:block;font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;color:var(--accent);
  line-height:1.1;letter-spacing:-.02em;
}
.stat em{
  display:block;font-style:normal;font-weight:700;color:#fff;font-size:.94rem;margin-top:4px;
}
.stat span{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:#9CC1CC;display:block;margin-top:7px;line-height:1.45;
}

/* -------------------------------------------------------------- problem */
.split{display:grid;gap:clamp(26px,4vw,48px);}
.split--2{grid-template-columns:1fr;}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);}
.pcard--dark{background:var(--card-dark);color:#D8E7EB;border-color:transparent;}
.pcard--dark h3{color:#fff;}
.pcard--dark .kicker{color:var(--accent);}
.pcard ul{list-style:none;margin-top:14px;}
.pcard li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.95rem;}
.pcard li::before{
  content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;
  background:var(--accent);
}
.pcard--dark li::before{background:var(--accent);}

/* ------------------------------- home 01/02: "three answers vs one answer"
   The figure carries the argument, so the copy around it stays short. Both
   halves ask the same question so the contrast lands without explanation. */
.vq{
  font-family:var(--mono);font-size:.82rem;color:var(--muted);
  margin:18px 0 12px;font-style:normal;
}
.vq--light{color:#9CC1CC;}
.vfig{display:grid;gap:8px;}

/* 01 — same metric, three different numbers, each highlighted in turn */
.vrow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  animation:vpulse 4.8s ease-in-out infinite;
}
.vrow:nth-child(2){animation-delay:1.6s;}
.vrow:nth-child(3){animation-delay:3.2s;}
.vrow__src{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}
.vrow__num{font-size:1.18rem;font-weight:800;color:var(--ink);letter-spacing:-.015em;}
@keyframes vpulse{
  0%,10%,30%,100%{border-color:var(--line);background:var(--bg);}
  16%,24%{border-color:#E3A98D;background:#FFF4EC;}
}
.vask{margin:14px 0 0;font-size:.94rem;font-weight:700;color:#B3431E;}

/* 02 — the same three sources converging on one number */
.vsrcs{display:flex;flex-wrap:wrap;gap:7px;}
.vsrcs span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:#CFE2E6;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:6px 12px;
}
.vflow{height:34px;position:relative;display:grid;place-items:center;}
.vflow::before{content:"";width:2px;height:100%;background:rgba(255,255,255,.16);}
.vflow i{
  position:absolute;top:0;width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:vdrop 2.1s linear infinite;
}
.vflow i:nth-child(2){animation-delay:.7s;}
.vflow i:nth-child(3){animation-delay:1.4s;}
@keyframes vdrop{
  0%{transform:translateY(-6px);opacity:0;}
  20%{opacity:1;}
  80%{opacity:1;}
  100%{transform:translateY(32px);opacity:0;}
}
.vone{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:16px;text-align:center;
}
.vone__lbl{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:#9CC1CC;display:block;
}
.vone b{display:block;font-size:1.85rem;font-weight:800;color:#fff;line-height:1.15;margin:5px 0 4px;}
.vone__ok{
  display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:#8FE0B0;
}
.vone__ok::before{
  content:"";width:11px;height:6px;border-left:2.5px solid #8FE0B0;
  border-bottom:2.5px solid #8FE0B0;transform:rotate(-45deg) translateY(-1px);flex:0 0 auto;
}
/* double class: the generic `.chips li` rule is declared later in this file
   and would otherwise win on source order, leaving navy text on a dark card */
/* the ask exchange folded into the 02 card — same idea as the brochures */
.askbox{margin-top:16px;border-top:1px solid rgba(255,255,255,.18);padding-top:14px;}
.askbox__lbl{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:700;display:block;margin-bottom:9px;
}
.askbox__me{
  background:var(--accent);color:var(--ink);font-weight:700;font-size:.86rem;
  padding:8px 12px;border-radius:10px 10px 3px 10px;margin:0 0 6px;line-height:1.4;
}
.askbox__ai{
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:#E4F0F3;
  font-size:.85rem;padding:9px 12px;border-radius:10px 10px 10px 3px;margin:0;line-height:1.5;
}
.askbox__ai small{display:block;color:#9CC1CC;font-size:.74rem;margin-top:6px;line-height:1.45;}

.chips.chips--light li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#DCEAEE;}
/* .pcard li::before draws a square bullet — it must not leak onto chip lists */
.pcard .chips li::before{content:none;}
.pcard .chips li{margin-bottom:0;}

@media (prefers-reduced-motion:reduce){
  .vrow,.vflow i{animation:none;}
  .vflow i{opacity:.85;}
  .vflow i:nth-child(1){transform:translateY(2px);}
  .vflow i:nth-child(2){transform:translateY(13px);}
  .vflow i:nth-child(3){transform:translateY(24px);}
}

/* ------------------------------------------------------------- workflow */
.steps{display:grid;gap:14px;grid-template-columns:1fr;counter-reset:s;}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 20px 22px;position:relative;transition:transform .18s ease,box-shadow .18s ease;
}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.step__n{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;color:var(--navy);
  font-weight:700;display:block;margin-bottom:8px;
}
.step h3{font-size:1.02rem;margin-bottom:.35em;}
.step p{font-size:.88rem;color:var(--muted);margin:0;}
.step__ico{
  width:34px;height:34px;border-radius:8px;background:var(--soft);color:var(--navy);
  display:grid;place-items:center;margin-bottom:12px;
}
.step__ico svg{width:18px;height:18px;}

/* ------------------------------------------------- the AI around the steps
   Ask Conrad is not a sixth step, it is the thing that can do any of the five.
   The tag straddles the top border so the box reads as the AI holding the
   steps, rather than as one more card in the row. */
.aiwrap{
  position:relative;border:2px solid var(--navy);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(45,122,142,.055),rgba(45,122,142,.015));
  padding:clamp(26px,3vw,32px) clamp(16px,2vw,22px) clamp(16px,2vw,20px);
  margin-top:22px;
}
.aiwrap__tag{
  /* white on --accent-dark is only 4.01:1; #A04E06 clears AA for a 10px label
     while still reading as the brand orange */
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  background:#A04E06;color:#fff;font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;padding:5px 12px;border-radius:3px;
  white-space:nowrap;
}
.aiwrap__foot{
  display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);line-height:1.55;
}
.aiwrap__foot svg{width:18px;height:18px;color:var(--navy);flex:0 0 auto;margin-top:2px;}
.aiwrap__foot strong{color:var(--ink);}

/* ------------------------------------------------------------ value band */
.valueband{
  background:linear-gradient(120deg,var(--card-dark),var(--navy-dark));
  color:#fff;border-radius:var(--radius-lg);padding:clamp(26px,4vw,44px);
  display:grid;gap:24px;align-items:center;box-shadow:var(--shadow-md);
}
.valueband h2{color:#fff;}
.valueband p{color:#C5DCE2;margin-bottom:0;}
.valueband__fig{text-align:center;border-top:1px solid rgba(255,255,255,.18);padding-top:22px;}
.valueband__fig b{display:block;font-size:clamp(2rem,5vw,3rem);font-weight:800;color:var(--accent);line-height:1;}
.valueband__fig span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:#9CC1CC;display:block;margin-top:9px;
}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;gap:18px;grid-template-columns:1fr;}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.4em;}
.card p:last-child{margin-bottom:0;}
.card__ico{
  width:42px;height:42px;border-radius:10px;background:var(--soft);color:var(--navy);
  display:grid;place-items:center;margin-bottom:14px;
}
.card__ico svg{width:21px;height:21px;}

/* a capability we have not shipped yet — say so on the card, not in a footnote */
.card--soon{border-style:dashed;background:transparent;}
.soon{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;
  /* #A04E06 not --accent-dark: on a 15%% orange tint the latter is only 3.3:1 */
  font-weight:700;color:#A04E06;background:rgba(255,131,31,.15);
  border-radius:999px;padding:3px 8px;
}
.card--soon .card__ico{background:transparent;border:1.5px dashed var(--line);color:var(--muted);}

/* --------------------------------------------------------------- pricing */
.tiers{display:grid;gap:20px;grid-template-columns:1fr;align-items:start;}
.tier{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  position:relative;
}
.tier--feat{
  background:var(--card-dark);color:#D8E7EB;border-color:var(--card-dark);
  box-shadow:var(--shadow-lg);
}
.tier--feat h3{color:#fff;}
.tier__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.13em;text-transform:uppercase;font-weight:700;padding:5px 13px;border-radius:20px;
  white-space:nowrap;
}
.tier__price{font-size:clamp(2rem,4.2vw,2.6rem);font-weight:800;line-height:1.05;margin:6px 0 2px;}
.tier--feat .tier__price{color:#fff;}
.tier__price small{font-size:.85rem;font-weight:600;color:var(--muted);}
.tier--feat .tier__price small{color:#9CC1CC;}
.tier__for{font-size:.88rem;color:var(--muted);min-height:2.6em;margin-bottom:14px;}
.tier--feat .tier__for{color:#BFD6DC;}
.tier__list{list-style:none;margin:16px 0 22px;flex:1;}
.tier__list li{position:relative;padding-left:25px;margin-bottom:9px;font-size:.9rem;}
.tier__list li::before{
  content:"";position:absolute;left:0;top:.42em;width:12px;height:7px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}
.tier__note{
  font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:13px;margin-top:14px;
}
.tier--feat .tier__note{color:#9CC1CC;border-top-color:rgba(255,255,255,.16);}

/* the "Everything in X, plus" lead line above a tier's list */
.tier__plus{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);font-weight:700;border-top:1px solid var(--line);padding-top:12px;margin:2px 0 0;
}
.tier--feat .tier__plus{color:var(--accent);border-top-color:rgba(255,255,255,.16);}

/* Custom sits as a band under the three cards, not as a fourth column —
   it has no spec, so a one-line card next to three full ones reads broken */
.custombar{
  margin-top:clamp(20px,2.6vw,30px);background:var(--card-dark);color:#D8E7EB;
  border-radius:var(--radius-lg);padding:clamp(20px,2.8vw,30px);
  display:grid;gap:16px;align-items:center;
}
.custombar h3{color:#fff;margin-bottom:.3em;}
.custombar .kicker{color:var(--accent);}
.custombar p{margin:0;color:#BFD6DC;}
.custombar .btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.custombar .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;}
/* same band, light — Student sits beside Custom without two dark slabs */
.custombar--light{background:#fff;color:var(--ink);border:1px solid var(--line);}
.custombar--light h3{color:var(--ink);}
.custombar--light p{color:var(--muted);}
.custombar--light .btn--ghost{border-color:var(--navy);color:var(--navy);}
.custombar--light .btn--ghost:hover{background:var(--navy);color:#fff;}
.custombar + .custombar{margin-top:14px;}

/* visually hidden, still read aloud — the tick/dash cells need a real word */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ------------------------------------------------- plan comparison matrix */
/* fixed layout: the label column takes 38% and the three tier columns split
   the rest EQUALLY — auto layout was sizing them 183/227/269px by content.
   The uniform cell height keeps every data row the same height whether it
   holds a checkmark, a word, or a dash. */
/* below 1020px the wrapper scrolls sideways instead of letting cells wrap,
   so the 54px row height holds at every viewport */
/* ---- the feature comparison: a table on wide screens, a plan-at-a-time list on phones ----
   NOTE: table.cmp (later in this file) also sets min-width at equal specificity, so the
   min-width rule needs the extra class to win. */
table.cmp.cmp--matrix{min-width:760px;}
table.cmp--matrix{table-layout:fixed;}
table.cmp--matrix thead th{
  text-align:center;vertical-align:bottom;padding:16px 12px 14px;
  background:var(--navy-dark,#173A42);color:#fff;
}
table.cmp--matrix thead th:first-child{width:42%;text-align:left;}
table.cmp--matrix thead .cmp-plan{
  display:block;font-family:var(--sans);font-size:1.05rem;font-weight:800;letter-spacing:0;text-transform:none;
}
table.cmp--matrix thead th small{
  display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:0;text-transform:none;
  font-weight:600;color:#9CC1CC;margin-top:3px;
}
table.cmp--matrix tbody th,table.cmp--matrix tbody td{height:62px;vertical-align:middle;padding:8px 12px;}
table.cmp--matrix tbody th{font-weight:500;color:var(--ink);font-size:.9rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
table.cmp--matrix tbody th small{display:block;font-size:.74rem;font-weight:400;color:var(--muted);margin-top:2px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
table.cmp--matrix tbody tr.group th{
  height:auto;padding:18px 12px 8px;background:var(--soft);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--navy);border-bottom:1px solid var(--line);
}
/* the extra class beats table.cmp td{text-align:left} further down — ticks sit dead centre */
table.cmp.cmp--matrix td{text-align:center;font-size:.88rem;}
table.cmp--matrix td.yes{color:#2E7D4F;font-size:1.1rem;font-weight:700;}
table.cmp--matrix td.no{color:#B9C4C8;font-weight:400;font-size:1.1rem;}
table.cmp--matrix tbody tr:not(.group):hover th,table.cmp--matrix tbody tr:not(.group):hover td{background:#F5F8F8;}

/* phones: the same rows, one plan at a time */
.cmp-mobile{display:none;}
@media (max-width:760px){
  .tblwrap--matrix{display:none;}
  .cmp-mobile{display:block;}
  .cmp-tabs{display:grid;gap:6px;margin-bottom:6px;}
  .cmp-tabs button{
    border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px 6px;
    font:inherit;font-weight:700;font-size:.9rem;color:var(--ink);cursor:pointer;
  }
  .cmp-tabs button small{display:block;font-size:.72rem;font-weight:600;color:var(--muted);margin-top:2px;}
  .cmp-tabs button[aria-selected="true"]{background:var(--navy-dark,#173A42);color:#fff;border-color:transparent;}
  .cmp-tabs button[aria-selected="true"] small{color:#9CC1CC;}
  .cmp-list h4{
    font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--navy);margin:22px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--line);
  }
  .cmp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:8px 0;border-bottom:1px solid var(--line);box-sizing:border-box;}
  /* a plan's answer can be words now ("Scheduled, any frequency", "25 (+$15/mo each, max 100)"), not only a
     tick: give the answer the room it needs, whole words only, and let the feature name wrap instead */
  .cmp-name{flex:1 1 38%;min-width:0;font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.3;overflow-wrap:anywhere;}
  .cmp-name small{display:block;font-size:.74rem;color:var(--muted);font-weight:400;margin-top:2px;}
  .cmp-val{flex:0 1 auto;max-width:62%;text-align:right;font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.3;overflow-wrap:normal;}
  /* a worded answer keeps the tick's green but the text size, not the tick's big glyph size */
  .cmp-val.yes > span{font-size:.86rem !important;}
  .cmp-val.yes{color:#2E7D4F;font-size:1.15rem;}
  .cmp-val.no{color:#B9C4C8;font-size:1.15rem;}
  .cmp-val[hidden]{display:none;}
}
/* group header rows — the thing that makes 30 rows scannable */
.cmp__group th{
  background:var(--soft);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);font-weight:700;padding:11px 16px;
}
tr.cmp__group + tr th,tr.cmp__group + tr td{border-top:none;}

/* ---------------------------------------------------------- comparison */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;}
table.cmp{width:100%;border-collapse:collapse;min-width:620px;}
table.cmp th,table.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem;}
table.cmp thead th{
  background:var(--card-dark);color:#fff;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.11em;text-transform:uppercase;
}
table.cmp tbody th{font-weight:700;color:var(--ink);}
table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:none;}
table.cmp .hi{background:#FFF6ED;font-weight:700;color:var(--ink);}
table.cmp .yes{color:#2E7D4F;font-weight:700;}
table.cmp .no{color:#B3431E;}

/* ------------------------------------------- head start block in the calc */
.calc__head{
  border-top:1px solid rgba(255,255,255,.18);margin-top:16px;padding-top:14px;
}
.calc__head b{display:block;font-size:1.5rem;font-weight:800;color:var(--accent);line-height:1.1;}
/* the head start leads the output card now, so its rule flips to the bottom */
.calc__head--first{border-top:0;margin:0 0 16px;padding:0 0 14px;
  border-bottom:1px solid rgba(255,255,255,.18);}
.calc__head--first b{font-size:clamp(1.7rem,3.4vw,2.2rem);}
.calc__head p{font-size:.8rem;color:#9CC1CC;margin:6px 0 0;line-height:1.5;}

/* --------------------------------- three-year cost AND value, side by side */
.worth{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3.2vw,36px);margin-top:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm);
}
.worth__head{max-width:62ch;margin-bottom:clamp(20px,2.6vw,28px);}
.worth__head h3{font-size:clamp(1.15rem,2.2vw,1.42rem);margin-bottom:.35em;}
.worth__head p{margin:0;font-size:.9rem;}
.worth__rows{display:grid;gap:18px;}
.worth__row{display:grid;gap:8px;}
.worth__lbl{font-size:.9rem;font-weight:700;line-height:1.3;}
.worth__lbl em{display:block;font-style:normal;font-weight:400;font-size:.78rem;color:var(--muted);}
.worth__track{display:flex;height:38px;background:var(--soft);border-radius:4px;overflow:hidden;}
.worth__track i{display:flex;align-items:center;height:100%;overflow:hidden;}
.worth__track span{
  font-size:.72rem;font-weight:700;white-space:nowrap;padding:0 10px;letter-spacing:.01em;
}
/* the cost blocks: one per line of the table this chart replaced. They carry
   no text — several are only a few pixels wide — so the legend below names
   each one and its amount, and each block also has a title for hover. */
.worth__seg{flex:0 0 auto;}
/* Hairlines rather than borders: an inset shadow costs no width, so the blocks
   stay exactly proportional while every boundary stays visible. */
.worth__seg + .worth__seg{box-shadow:inset 1px 0 0 rgba(255,255,255,.75);}
.worth__left{box-shadow:inset 2px 0 0 #fff;}
/* Cost is neutral slate on both bars. The ONE saturated block on the chart is
   what you keep with ConradBI, so the eye lands there first; the per-user
   route's value is a deep muted slate. The two read 2.11:1 apart in GRAYSCALE,
   so the highlight survives a photocopy instead of collapsing to one tone. */
.worth__left{background:#2D7A8E;color:#fff;}
.worth__left--hero{background:#FF831F;color:#16343C;}
/* value never earned while the other route is still being built. Hatched and
   deliberately given no dollar figure — it is money not made, not money paid. */
.worth__ghost{background:repeating-linear-gradient(45deg,#CBDCE0 0 4px,#E8F0F2 4px 8px);
  box-shadow:inset 2px 0 0 #fff;}
.worth__gk{background:repeating-linear-gradient(45deg,#CBDCE0 0 3px,#E8F0F2 3px 6px);}
.worth__rate{font-size:1.15rem;font-weight:800;color:var(--navy);line-height:1.1;}
.worth__rate em{font-style:normal;font-weight:600;font-size:.72rem;color:var(--muted);margin-left:6px;}

/* stark strip: the three numbers worth remembering */
.worth__stats{
  list-style:none;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:0 0 clamp(18px,2.4vw,24px);
}
.worth__stats li{background:#fff;padding:14px 16px;}
.worth__stats b{display:block;font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:800;color:var(--navy);line-height:1.1;}
.worth__stats span{display:block;font-size:.76rem;color:var(--muted);margin-top:4px;line-height:1.4;}
.worth__cap{font-size:.9rem;color:var(--muted);margin:0 0 16px;max-width:74ch;line-height:1.6;}
.worth__lbl em b{font-weight:700;color:var(--ink);}
/* the page-level .disclosure is centred with its own measure; inside this card
   it has to line up with the note above it or it reads as a stray indent */
.worth .disclosure{max-width:none;margin-left:0;margin-right:0;text-align:left;}

/* legend — this is where the deleted table's line items now live */
.worth__key{
  list-style:none;display:flex;flex-wrap:wrap;gap:7px 20px;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--line);font-size:.8rem;color:var(--muted);
}
.worth__key li{display:flex;align-items:center;gap:7px;}
.worth__key span{width:11px;height:11px;border-radius:2px;flex:0 0 auto;}
.worth__key b{color:var(--ink);font-weight:700;}

/* The bars are sorted by size, so ORDER identifies each block and the
   colour-swatch legend is gone. These are plain sentences, one per route —
   they must NOT inherit the old legend's flex layout, which spread the words
   out with gaps. Declared after .worth__key li so it wins on source order. */
.worth__key--plain{display:block;gap:0;border-top:1px solid var(--line);}
.worth__key--plain li{display:block;gap:0;margin-bottom:6px;line-height:1.55;}
.worth__key--plain li:last-child{margin-bottom:0;}
/* on a wide legend this sits our own line apart from their four; stacked on a
   phone the auto margin just reads as a stray indent */
.worth__key--ours{margin-left:0;}
@media (min-width:760px){ .worth__key--ours{margin-left:auto;} }

/* the five reasons the money moves */
.whys{display:grid;gap:14px;}
.why{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow-sm);
}
.why__tag{
  display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#256676;background:var(--soft);border-radius:3px;padding:3px 8px;
}
.why h4{font-size:1rem;margin:10px 0 6px;line-height:1.3;}
.why p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.62;}
.why p b{color:var(--ink);font-weight:700;}
/* the five whys as one-line bullets — the cards said the same thing in forty
   words each; the tag chip plus a clause says it in ten */
.whylist{list-style:none;max-width:56rem;margin:0 auto;display:grid;gap:8px;}
.whylist li{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 16px;font-size:.92rem;line-height:1.55;color:var(--muted);
}
.whylist li b{color:var(--ink);}
.whylist .why__tag{margin-right:9px;}
@media (min-width:640px){
  .worth__stats{grid-template-columns:repeat(3,1fr);}
  .worth__stats--4{grid-template-columns:repeat(2,1fr);}
  .whys{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:980px){
  .whys{grid-template-columns:repeat(5,1fr);}
  .why{padding:20px 18px;}
}
.worth__note{
  background:var(--soft);border-left:3.5px solid var(--accent);padding:12px 15px;
  font-size:.92rem;line-height:1.6;margin:20px 0 0;
}
@media (min-width:760px){
  .worth__row{grid-template-columns:1.72in 1fr 1.05in;align-items:center;gap:14px;}
  .worth__rate{text-align:right;}
  .worth__rate em{display:block;margin-left:0;}
}

/* --------------------------------------------------------- ROI calculator */
.calc{display:grid;gap:22px;}
.calc__inputs{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.field{margin-bottom:18px;}
.field:last-child{margin-bottom:0;}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:7px;}
.field .hint{font-weight:400;color:var(--muted);font-size:.8rem;}
.field input[type=range]{width:100%;accent-color:var(--accent);height:26px;}
.field .val{font-family:var(--mono);color:var(--navy);font-weight:700;}
.calc__out{
  background:linear-gradient(120deg,var(--card-dark),var(--navy-dark));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-md);
}
.calc__big{font-size:clamp(2rem,5vw,2.9rem);font-weight:800;color:var(--accent);line-height:1.05;}
.calc__lbl{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:#9CC1CC;display:block;margin-bottom:4px;
}
.calc__rows{margin-top:20px;border-top:1px solid rgba(255,255,255,.18);padding-top:16px;}
.calc__row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:.92rem;color:#C5DCE2;}
.calc__row b{color:#fff;}
.calc__row--tot{
  border-top:1px solid rgba(255,255,255,.18);margin-top:8px;padding-top:13px;font-size:1rem;
}
.calc__row--tot b{color:var(--accent);font-size:1.1rem;}
.calc__disc{font-size:.74rem;color:#9CC1CC;margin:16px 0 0;line-height:1.5;}

/* ------------------------------------------------------------------ FAQ */
.faq{max-width:820px;margin-inline:auto;}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:11px;overflow:hidden;}
.faq__q{
  width:100%;text-align:left;background:none;border:0;padding:17px 52px 17px 20px;
  font-weight:700;font-size:.98rem;color:var(--ink);position:relative;
}
.faq__q::after{
  content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;
  border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq__q[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg);}
.faq__q:hover{color:var(--navy);}
.faq__a{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease;}
.faq__a p{font-size:.93rem;color:var(--muted);margin:0 0 16px;}
.faq__item.open .faq__a{max-height:340px;padding-top:2px;}

/* ----------------------------------------------------------------- forms */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);}
.form .field label{margin-bottom:6px;}
.form input,.form select,.form textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;
  font:inherit;font-size:.94rem;color:var(--ink);background:#fff;transition:border-color .15s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--navy);outline-offset:1px;}
.form textarea{min-height:110px;resize:vertical;}
.form .row2{display:grid;gap:0;grid-template-columns:1fr;}
.req{color:var(--accent-dark);}
.err{display:none;color:#B3431E;font-size:.8rem;margin-top:5px;font-weight:600;}
.field.invalid input,.field.invalid select{border-color:#B3431E;}
.field.invalid .err{display:block;}
.form__ok{
  display:none;background:#EAF6EE;border:1.5px solid #9AD0B0;border-radius:var(--radius);
  padding:22px;text-align:center;
}
.form__ok h3{color:#2E7D4F;margin-bottom:.35em;}
.form__ok p{margin:0;font-size:.92rem;color:#3B5C48;}
.form.sent .form__body{display:none;}
.form.sent .form__ok{display:block;}

/* --------------------------------------------------- booking (Calendly) */
.booker{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);
}
.booker .calendly-inline-widget{margin-top:14px;}
/* shown only while/if the widget fails to replace it */
.booker__fallback{
  border:1.5px dashed var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,28px);text-align:center;
}
.booker__fallback p{font-size:.93rem;color:var(--muted);max-width:46ch;margin-inline:auto;}
.booker__fallback p:last-child{margin-bottom:0;margin-top:18px;}

/* ---------------------------------------------------------------- steps3 */
.next{list-style:none;counter-reset:n;display:grid;gap:16px;}
.next li{counter-increment:n;position:relative;padding-left:52px;}
.next li::before{
  content:counter(n);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.95rem;
}
.next b{display:block;margin-bottom:2px;}
.next p{font-size:.9rem;color:var(--muted);margin:0;}

/* ------------------------------------------------------- proof-build band */
.proof{
  background:linear-gradient(120deg,var(--card-dark),var(--navy-dark));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(26px,4vw,46px);box-shadow:var(--shadow-lg);
  display:grid;gap:26px;align-items:center;
}
.proof h2{color:#fff;}
.proof p{color:#C5DCE2;}
.proof p:last-of-type{margin-bottom:0;}
.proof__num{text-align:center;}
.proof__num b{
  display:block;font-size:clamp(2.4rem,6vw,3.6rem);font-weight:800;color:var(--accent);line-height:1;
}
.proof__num span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;
  color:#9CC1CC;display:block;margin-top:10px;line-height:1.5;
}
.proof__steps{list-style:none;margin-top:18px;display:grid;gap:9px;}
.proof__steps li{position:relative;padding-left:26px;font-size:.95rem;color:#D8E7EB;}
.proof__steps li::before{
  content:"";position:absolute;left:0;top:.45em;width:11px;height:6px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg);
}

/* --------------------------------------------------- local-support strip */
.local{display:grid;gap:16px;align-items:center;}
.local__badge{
  display:inline-flex;align-items:center;gap:9px;background:var(--soft);color:var(--navy);
  border-radius:30px;padding:8px 16px;font-weight:700;font-size:.85rem;
}
.local__badge svg{width:16px;height:16px;}

/* ------------------------------------------------------------- BI game */
.game{
  background:linear-gradient(120deg,var(--card-dark),var(--navy-dark));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(22px,3.4vw,40px);box-shadow:var(--shadow-lg);
}
.game h2{color:#fff;}
.game__lede{color:#C5DCE2;max-width:58ch;}
.game__grid{display:grid;gap:22px;margin-top:24px;}
/* grid items may never force their track wider than the game box — the raw
   table's intrinsic width was pushing the card through the border on phones */
.game__grid > *{min-width:0;}

/* raw data panel */
.g-raw{background:rgba(0,0,0,.22);border-radius:var(--radius);padding:14px 14px 6px;}
.g-raw h3{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:#9CC1CC;margin:0 0 10px;font-weight:700;
}
.g-tablewrap{max-height:290px;overflow:auto;}
.g-tablewrap table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.66rem;}
.g-tablewrap th{
  position:sticky;top:0;background:#0E272D;color:#9CC1CC;text-align:left;
  padding:6px 7px;font-weight:700;letter-spacing:.05em;
}
.g-tablewrap td{padding:5px 7px;color:#CFE2E6;border-top:1px solid rgba(255,255,255,.07);}
.g-tablewrap td.n{text-align:right;}
@media (max-width:430px){
  .g-tablewrap table{font-size:.6rem;}
  .g-tablewrap th,.g-tablewrap td{padding:5px;}
}

/* play panel */
.g-step{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
.g-q{font-size:clamp(1.05rem,2vw,1.28rem);font-weight:800;margin:6px 0 16px;line-height:1.3;}
.g-dots{display:flex;gap:6px;margin-bottom:14px;}
.g-dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);display:block;}
.g-dots i.now{background:var(--accent);}
.g-dots i.done{background:#6FA9B8;}

.g-ctl{margin-bottom:12px;}
.g-ctl > span{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:#9CC1CC;display:block;margin-bottom:6px;
}
.g-chipset{display:flex;flex-wrap:wrap;gap:7px;}
.g-chip{
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);color:#E4F0F3;
  border-radius:7px;padding:7px 13px;font-size:.85rem;font-weight:700;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.g-chip:hover{background:rgba(255,255,255,.16);}
.g-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}

#g-chart{margin-top:16px;min-height:150px;}
.g-empty{color:#9CC1CC;font-size:.9rem;padding:26px 0;margin:0;}
.g-chart-title{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:#9CC1CC;margin:0 0 10px;
}
.g-bars{display:grid;gap:7px;}
.g-bar{
  display:grid;grid-template-columns:78px 1fr 68px;align-items:center;gap:10px;
  background:transparent;border:1.5px solid transparent;border-radius:8px;
  padding:6px 8px;text-align:left;color:#E4F0F3;width:100%;
  transition:background .15s ease,border-color .15s ease;
}
.g-bar:not(:disabled):hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25);}
.g-bar:disabled{cursor:default;opacity:.75;}
.g-bar.is-answer{border-color:var(--accent);background:rgba(255,131,31,.14);opacity:1;}
.g-bar-k{font-size:.82rem;font-weight:700;}
.g-bar-t{background:rgba(255,255,255,.09);border-radius:4px;height:20px;overflow:hidden;}
.g-bar-f{display:block;height:100%;border-radius:4px;background:#5FA3B5;transition:width .45s ease;}
.g-bar.neg .g-bar-f{background:var(--accent);}
.g-bar-v{font-family:var(--mono);font-size:.72rem;text-align:right;color:#CFE2E6;}

.g-feedback{margin-top:14px;font-size:.9rem;line-height:1.55;color:#D8E7EB;}
.g-feedback:empty{display:none;}
.g-feedback.warn{color:#FFD9B5;}
.g-feedback.good strong{color:#8FE0B0;}
.g-feedback.bad strong{color:#FFB48A;}
.g-next{
  background:var(--accent);color:#fff;border:none;border-radius:7px;
  padding:7px 14px;font-weight:700;font-size:.82rem;margin-left:6px;white-space:nowrap;
}
.g-next:hover{background:var(--accent-dark);}

#g-done h3{color:#fff;margin:6px 0 .5em;}
#g-done p{color:#C5DCE2;}
.g-score{
  font-family:var(--mono);font-size:1.5rem;font-weight:800;color:var(--accent);margin:0;
}
.g-done-note{color:#9CC1CC!important;font-size:.9rem;}

@media (prefers-reduced-motion:reduce){
  .g-bar-f{transition:none;}
}

/* ----------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0;list-style:none;padding:0;}
.chips li{
  background:var(--soft);color:var(--navy);border-radius:6px;
  padding:5px 10px;font-size:.78rem;font-weight:700;line-height:1.3;
}
.chips--plain li{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:600;}
/* article keyword tags — sit under the summary line on cards and article pages */
.chips--tags li{font-size:.7rem;padding:4px 9px;font-weight:600;letter-spacing:.01em;}
.res-card .chips--tags{margin:10px 0 0;}
.feat .chips--tags{margin-top:14px;}
.article__tags{margin:14px 0 0;}

/* free / paid badge — used on the two how-to routes */
.pbadge{
  display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;border-radius:999px;
  padding:5px 12px;margin-bottom:14px;
}
.pbadge--free{background:var(--soft);color:var(--navy);}
.pbadge--paid{background:rgba(255,131,31,.15);color:#A04E06;}   /* same tint, same fix */
.pcard--dark .pbadge--paid{background:rgba(255,131,31,.22);color:var(--accent);}

/* limits list — a dash marker, so it reads as "excluded" against .ticks */
.limits{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:11px;}
.limits li{position:relative;padding-left:26px;font-size:.92rem;line-height:1.55;color:var(--muted);}
.limits li::before{
  content:"";position:absolute;left:0;top:.64em;width:13px;height:2px;
  background:var(--muted);border-radius:1px;
}
.limits strong{color:var(--ink);font-weight:700;}

/* tight tick list — scannable, no paragraphs */
.ticks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;}
.ticks li{position:relative;padding-left:24px;font-size:.93rem;line-height:1.5;}
.ticks li::before{
  content:"";position:absolute;left:2px;top:.42em;width:10px;height:5px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}
.ticks--light li{color:#D8E7EB;}

/* ------------------------------------------------------------------ team */
.team{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);}
.person{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px;text-align:center;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;
}
.person:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.person img{
  width:118px;height:118px;border-radius:50%;object-fit:cover;object-position:center top;
  margin:0 auto 14px;display:block;border:3px solid var(--soft);
}
.person h3{font-size:1.02rem;margin-bottom:.2em;}
.person .role{font-size:.83rem;color:var(--navy);font-weight:700;line-height:1.45;}
.person .role em{display:block;font-style:normal;color:var(--muted);font-weight:400;}
.person .li{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-top:11px;
  font-size:.76rem;font-weight:700;color:var(--navy);
}
/* solid glyph reads heavier than the label, so size it under the text cap-height */
.person .li svg{width:12px;height:12px;flex:0 0 auto;}
.person .li:hover{color:var(--accent);}

/* ------------------------------------------------------------- resources */
.res-grid{display:grid;gap:20px;grid-template-columns:1fr;}
.res-card{
  --pad:clamp(20px,2.6vw,28px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--pad);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;
}
.res-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.res-card__tag{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);font-weight:700;margin-bottom:10px;display:block;
}
.res-card h3{font-size:1.14rem;line-height:1.28;margin-bottom:.45em;}
.res-card h3 a{color:var(--ink);}
.res-card h3 a:hover{color:var(--navy);}
.res-card p{font-size:.92rem;color:var(--muted);flex:1;}
.res-card__meta{
  font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);
  padding-top:12px;margin-top:14px;display:flex;justify-content:space-between;gap:12px;
}
.res-card__meta a{font-weight:700;}

/* --------------------------------------------------------------- article */
.article{padding-block:clamp(30px,4vw,52px) clamp(40px,5vw,64px);}
.article__hero{
  width:100%;height:auto;display:block;border-radius:var(--radius-lg);
  margin:0 0 clamp(22px,3vw,32px);box-shadow:var(--shadow-md);
}
.res-card__thumb{
  /* full-bleed out of the card's padding; max-width:none defeats the global img reset */
  width:calc(100% + var(--pad) + var(--pad));
  max-width:none;
  margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 16px;
  height:132px;object-fit:cover;display:block;flex:0 0 auto;
}
.article__inner{width:min(74ch,calc(100% - 2*clamp(18px,5vw,34px)));margin-inline:auto;}
.crumbs{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px;
}
.crumbs a{color:var(--navy);display:inline-block;padding:10px 4px;margin:-10px -4px;}
.article h1{font-size:clamp(1.85rem,4.2vw,2.65rem);margin-bottom:.3em;}
.article__dek{font-size:clamp(1rem,1.6vw,1.15rem);color:var(--muted);margin-bottom:14px;}
.article__meta{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:30px;
}
.prose h2{font-size:clamp(1.28rem,2.4vw,1.6rem);margin:1.9em 0 .55em;}
.prose h3{font-size:clamp(1.04rem,1.8vw,1.18rem);margin:1.5em 0 .45em;}
.prose p{margin:0 0 1.1rem;line-height:1.75;}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-left:1.35rem;}
.prose li{margin-bottom:.5rem;line-height:1.7;}
.prose strong{color:var(--ink);}
.prose a{text-decoration:underline;text-underline-offset:2px;}
.prose blockquote{
  margin:1.5rem 0;padding:16px 20px;background:var(--soft);border-left:4px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
}
.prose blockquote p:last-child{margin-bottom:0;}
.prose table{
  width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.92rem;
  display:block;overflow-x:auto;white-space:nowrap;
}
.prose table thead th{
  background:var(--card-dark);color:#fff;text-align:left;padding:11px 14px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
}
.prose table td,.prose table th{padding:11px 14px;border-bottom:1px solid var(--line);}
.prose table tbody th{text-align:left;font-weight:700;}
.takeaways{
  background:var(--soft);border-radius:var(--radius-lg);padding:22px 24px;margin:0 0 32px;
}
.takeaways h2{font-size:.68rem!important;font-family:var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--navy);margin:0 0 12px!important;}
.takeaways ul{margin:0;padding-left:1.2rem;}
.takeaways li{font-size:.94rem;margin-bottom:.45rem;}
.article__cta{
  background:linear-gradient(120deg,var(--card-dark),var(--navy-dark));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(24px,3.4vw,36px);margin-top:44px;
}
.article__cta h2{color:#fff;font-size:1.3rem;margin:0 0 .5em;}
.article__cta p{color:#C5DCE2;font-size:.95rem;}
.article__cta p:last-of-type{margin-bottom:0;}
.article__foot{
  border-top:1px solid var(--line);margin-top:40px;padding-top:22px;
  font-size:.82rem;color:var(--muted);line-height:1.7;
}

/* ------------------------------------------------------------- CTA band */
.ctaband{background:var(--card-dark);color:#fff;text-align:center;}

/* "be featured" banner on the resources hub — stands in for the empty case-study and
   inspiration sections until they have content */
.feature-cta{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,40px);box-shadow:var(--shadow-lg);}
.feature-cta__head{max-width:62rem;margin:0 auto 22px;text-align:center;}
.feature-cta__head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:8px 0 10px;}
.feature-cta__head p{color:var(--muted);line-height:1.6;}
.feature-cta__cols{display:grid;gap:22px;}
.feature-cta__col{background:var(--soft,#F5F8F8);border-radius:var(--radius);padding:20px 22px;
  display:flex;flex-direction:column;}
.feature-cta__col h3{font-size:1.05rem;margin:0 0 10px;}
.feature-cta__col .ticks{margin:0 0 18px;flex:1;}
.feature-cta__col .btn{align-self:flex-start;}
@media (min-width:760px){.feature-cta__cols{grid-template-columns:1fr 1fr;}}
.ctaband h2{color:#fff;}
.ctaband p{color:#C5DCE2;max-width:56ch;margin-inline:auto;}

/* ---------------------------------------------------------------- footer */
.site-foot{background:var(--card-darker);color:#B9CFD5;padding-block:44px 26px;font-size:.9rem;}
.site-foot__grid{display:grid;gap:28px;grid-template-columns:1fr;}
.site-foot img{height:34px;margin-bottom:14px;}
.site-foot h4{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;font-weight:700;
}
.site-foot a{color:#D8E7EB;}
.site-foot a:hover{color:var(--accent);}
.site-foot ul{list-style:none;}
.site-foot li{margin-bottom:7px;}
.site-foot__bot{
  border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:.78rem;color:#7F9BA3;
}

/* --------------------------------------------------------------- mockups */
.figure{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(16px,2.4vw,24px);box-shadow:var(--shadow-sm);
}
.figure svg{width:100%;height:auto;display:block;}
.figcap{
  font-family:var(--mono);font-size:.70rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:12px;text-align:center;
}
/* Long disclosures must actually be readable — never the uppercase mono caption. */
.disclosure{
  font-size:.82rem;line-height:1.65;color:var(--muted);max-width:78ch;
  margin:16px auto 0;text-align:left;
}
/* small print runs at 13px — --navy links only reach 4.18:1 on a tinted band */
.disclosure a{color:#256676;}

/* code compare */
.codecmp{display:grid;gap:14px;grid-template-columns:1fr;}
.codebox{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;}
.codebox__h{
  padding:9px 14px;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;
}
.codebox--old .codebox__h{background:#F2E7E2;color:#8C3F1D;}
.codebox--new .codebox__h{background:var(--soft);color:var(--navy);}
.codebox pre{
  margin:0;padding:14px;font-family:var(--mono);font-size:.76rem;line-height:1.65;
  color:#33525A;overflow-x:auto;white-space:pre;
}
.codebox--new pre{color:var(--ink);}
.codebox .k{color:var(--accent-dark);font-weight:700;}
.codebox .c{color:#5A7780;}   /* the lighter grey was only 3.2:1 on white */

/* chat mock */
.chat{background:var(--card-dark);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-md);}
.chat__h{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:#9CC1CC;padding:0 4px 12px;display:flex;align-items:center;gap:8px;
}
.chat__h i{width:8px;height:8px;border-radius:50%;background:#4ED08A;display:block;}
.bubble{border-radius:12px;padding:11px 14px;margin-bottom:10px;font-size:.88rem;max-width:88%;}
/* ink on orange, not white: white on --accent is only 2.47:1 */
.bubble--me{background:var(--accent);color:var(--ink);margin-left:auto;border-bottom-right-radius:3px;font-weight:600;}
.bubble--ai{background:#fff;color:var(--ink);border-bottom-left-radius:3px;}
.bubble--ai b{color:var(--navy);}
.bubble small{display:block;font-size:.74rem;color:var(--muted);margin-top:5px;}

/* seat/viewer diagram */
.seatviz{display:grid;gap:16px;grid-template-columns:1fr;}
.seatviz__col{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff;}
.seatviz__col h4{font-size:.95rem;margin:0 0 4px;}
.seatviz__col .price{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-bottom:12px;}
.dots{display:flex;flex-wrap:wrap;gap:5px;}
.dots i{width:15px;height:15px;border-radius:4px;background:var(--navy);display:block;}
.dots i.free{background:#B7D5DC;}
.dots i.paid{background:var(--accent);}
.seatviz__col--them .price{color:#B3431E;font-weight:700;}
.seatviz__col--us .price{color:#2E7D4F;font-weight:700;}

/* `.reveal` is kept as a hook for optional future animation, but it never
   hides content: marketing copy must be readable with or without scripts. */
@media (prefers-reduced-motion:reduce){
  .btn:hover,.step:hover{transform:none;}
}

/* ============================================================ responsive */
@media (min-width:560px){
  .split--2{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .grid{grid-template-columns:1fr 1fr;}
  .form .row2{grid-template-columns:1fr 1fr;gap:0 18px;}
  .codecmp{grid-template-columns:1fr 1fr;}
  .seatviz{grid-template-columns:1fr 1fr;}
  .stats__grid{grid-template-columns:repeat(4,1fr);}
}
@media (min-width:860px){
  .proof{grid-template-columns:1.55fr 1fr;}
  .proof__num{border-left:1px solid rgba(255,255,255,.18);padding-left:32px;}
  .local{grid-template-columns:auto 1fr;gap:24px;}
  .hero__grid{grid-template-columns:1.04fr .96fr;}
  .steps{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1120px){
  /* five steps, five columns — a 3+2 row reads as a missing sixth card */
  .steps{grid-template-columns:repeat(5,1fr);gap:12px;}
  .steps .step{padding:18px 16px 20px;}
  .steps .step h3{font-size:.96rem;}
  .steps .step p{font-size:.85rem;}
  .game__grid{grid-template-columns:.85fr 1.15fr;gap:30px;align-items:start;}
  .team{grid-template-columns:repeat(4,1fr);}
  .res-grid{grid-template-columns:repeat(3,1fr);}
  .grid--3{grid-template-columns:repeat(3,1fr);}
  .grid--4{grid-template-columns:repeat(4,1fr);}
  /* four tiers: 2x2 here, going to one row only when there's real width for it.
     stretch (not start) so the cards match height and .tier__list's flex:1
     pushes every CTA onto the same baseline — it reads as a comparison table. */
  .tiers{grid-template-columns:repeat(2,1fr);align-items:stretch;}
  /* Three tiers stack until there is room for them side by side. Below ~900px
     the cards get so narrow that one bullet list runs a line longer than the
     others and knocks the buttons out of line, so they stay stacked instead. */
  .tiers--3{grid-template-columns:1fr;}
  /* Line the three cards up slot for slot. Each card is a flex column with
     .tier__list taking the slack, so reserving the variable-height slots —
     the "who it's for" line and the footnote — puts every price, list and
     button on the same baseline. */
  /* the unit on its own line in every card: $2,000 /mo per company wraps at
     narrow widths while $50 /mo per user does not, which knocked everything
     below it out of line */
  .tiers--3 .tier__price small{display:block;margin-top:2px;}
  /* Reserve WHOLE line-heights, not a round em: 4.6em falls between two and
     three lines, so a card whose text really wraps to three sits ~4px lower
     than one padded up to the reservation. 3 x 1.62 = 4.86em is exact. */
  .tiers--3 .tier__for{line-height:1.62;min-height:4.86em;}
  .tiers--3 .tier__plus{min-height:2.9em;}
  .tiers--3 .tier__note{min-height:4.4em;}
  .custombar{grid-template-columns:1fr auto;}
  .valueband{grid-template-columns:1.5fr 1fr;}
  .valueband__fig{border-top:none;border-left:1px solid rgba(255,255,255,.18);padding-top:0;padding-left:30px;}
  .calc{grid-template-columns:1fr 1fr;align-items:start;}
  .site-foot__grid{grid-template-columns:2fr 1fr 1fr;}
  .split--wide{grid-template-columns:1.1fr .9fr;align-items:center;}
  .split--wide.rev .split__media{order:-1;}
}
@media (min-width:900px){
  .tiers--3{grid-template-columns:repeat(3,1fr);}
}
@media (min-width:1060px){
  /* below this the four tier cards get too narrow to read side by side */
  .tiers{grid-template-columns:repeat(4,1fr);gap:16px;}
  .tiers--3{grid-template-columns:repeat(3,1fr);gap:20px;}
  .tier{padding:clamp(18px,2.2vw,24px);}
  .tier__price{font-size:clamp(1.6rem,3vw,2rem);}
  .tier__for{min-height:4.7em;}
}
@media (max-width:859px){
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:2px;padding:12px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);display:none;
  }
  .nav.open{display:flex;}
  .nav a{padding:12px 14px;}
  /* dropdown flattens into an indented list on mobile */
  .nav__item{display:block;}
  .nav__item::after{content:none;}          /* no hover bridge inside the drawer */
  .nav__item > a .caret{display:none;}
  .subnav{
    display:block;position:static;border:none;box-shadow:none;padding:0 0 4px 12px;
    min-width:0;background:transparent;
    /* the drawer is always open on mobile — undo the hover-reveal state */
    visibility:visible;opacity:1;transform:none;transition:none;
  }
  .subnav a{padding:9px 14px;font-size:.9rem;}
  .subnav span{display:none;}
  .nav-toggle{display:block;}
  .head-cta .btn--primary{display:none;}
  .site-head__in{position:relative;}
}
@media (max-width:559px){
  .kpis{grid-template-columns:1fr 1fr;}
  .mock__charts{grid-template-columns:1fr;}
  .btn-row .btn{width:100%;}
}

/* ------------------------------------------------------------------ print */
@media print{
  .site-head,.nav-toggle,.ctaband,.btn{display:none!important;}
  body{background:#fff;}
}

@media (min-width:900px){
  .worth__stats--4{grid-template-columns:repeat(4,1fr);}
}

/* --- comparison table: a sign-up button under every plan column --- */
table.cmp.cmp--matrix tfoot td{text-align:center;padding:16px 12px;border-bottom:none;background:var(--soft);}
.btn--sm{padding:8px 14px;font-size:.84rem;}
@media (max-width:760px){
  .cmp-cta{margin-top:18px;}
  .cmp-cta > span[hidden]{display:none;}
}

/* --- Resources dropdown: Case studies and Inspiration stay hidden everywhere until they have
   content — including the pages rendered by the web app, which share this stylesheet.
   Remove when the sections open. --- */
.subnav li:has(> a[href$="case-studies"]),.subnav li:has(> a[href$="case-studies.html"]),
.subnav li:has(> a[href$="inspiration"]),.subnav li:has(> a[href$="inspiration.html"]){display:none;}

/* --- estimator: Collab wears the brand teal instead of orange, so the plan being priced is
   unmistakable. #7FD1E3 on the dark panel reads 9.4:1. --- */
.calc--collab .calc__head b,.calc--collab .calc__big,.calc--collab .calc__row--tot b{color:#7FD1E3;}
.calc--collab .field input[type=range]{accent-color:var(--navy);}
.calc--collab .field .val{color:var(--navy);}
.btn--navy{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn--navy:hover,.btn--navy:focus-visible{background:#25677A;color:#fff;border-color:#25677A;}

/* ---- viewers by plan (product 03), a three-person team (about), equal matrix buttons (pricing) */
.seatviz--plans{grid-template-columns:1fr;}
.seatviz--plans .seatviz__col{display:grid;gap:10px 18px;align-items:center;}
.seatviz--plans .seatviz__col .price{margin-bottom:0;}
.seatviz--plans .price--none{color:var(--muted);}
.seatviz__note{margin:0;font-size:.86rem;color:var(--muted);line-height:1.5;}
.dots i.extra{background:transparent;border:2px solid var(--navy);box-sizing:border-box;}
.dots .dots__more{font-family:var(--mono);font-size:.74rem;color:var(--muted);align-self:center;padding-left:2px;}
.seatviz__legend{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;align-items:center;margin-top:12px;}
.seatviz__legend span{display:inline-flex;align-items:center;gap:6px;}
.seatviz__legend i{width:12px;height:12px;border-radius:3px;display:inline-block;background:#B7D5DC;}
.seatviz__legend i.extra{background:transparent;border:2px solid var(--navy);box-sizing:border-box;}
@media (min-width:560px){
  .seatviz--plans{grid-template-columns:1fr;}
  .seatviz--plans .seatviz__col{grid-template-columns:150px 1fr;}
}
/* three people: two up and one centred below on a phone, one row of three from tablet up */
.team--3{display:flex;flex-wrap:wrap;justify-content:center;}
.team--3 .person{flex:0 1 calc(50% - 10px);}
@media (min-width:860px){.team--3 .person{flex-basis:calc(33.333% - 14px);}}
/* the matrix footer: one button per plan, all the same width and height whatever the label */
table.cmp.cmp--matrix tfoot .btn{display:flex;width:100%;min-height:44px;padding:6px 10px;white-space:normal;line-height:1.2;}
/* a phone: the banner button stacks under the text, so give its label room to sit on two lines, not three */
@media (max-width:559px){.custombar .btn{padding-left:1em;padding-right:1em;}}

/* ---- the Resources item is a menu, not a page: a button dressed as the other nav links */
.nav__trigger{
  display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:8px;border:0;
  background:none;color:var(--ink);font:inherit;font-weight:600;font-size:.94rem;line-height:inherit;
  cursor:pointer;transition:background .15s ease,color .15s ease;
}
.nav__trigger:hover,.nav__trigger.is-current{background:var(--soft);color:var(--navy);}
.nav__trigger .caret{width:9px;height:9px;flex:0 0 auto;transition:transform .18s ease;}
/* a click (touch, keyboard) holds the menu open (.open, set by site.js); hover still opens it on a desktop */
.nav__item.open > .nav__trigger .caret,.nav__item:hover > .nav__trigger .caret{transform:rotate(180deg);}
.nav__trigger:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
@media (max-width:859px){
  .nav__trigger{display:block;width:100%;text-align:left;padding:12px 14px;}
  .nav__trigger .caret{display:none;}
}
/* a real post's header image can be any shape: while the card is stacked (image above the words) cap
   the image; side by side, from 760px up, it fills its column as the design always did */
@media (max-width:759px){.feat--post .feat__media img{max-height:340px;}}
/* ---- the estimator shows its working: a plain disclosure under the figures */
.calc__how{margin-top:12px;font-size:.8rem;line-height:1.5;}
.calc__how summary{cursor:pointer;font-weight:700;}
.calc__how summary:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.calc__how ul{margin:8px 0 0 1.1em;padding:0;}
.calc__how li{margin:4px 0;}
.calc__how p{margin:8px 0 0;opacity:.9;}
/* ---- the request-info page: the form beside a slim panel, fields in named groups */
.rq-grid{display:grid;gap:clamp(22px,3vw,36px);align-items:start;}
@media (min-width:900px){.rq-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}}
.rq-section{border:0;padding:0;margin:0 0 24px;min-width:0;}
.rq-section legend{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy);font-weight:700;margin-bottom:12px;padding:0;
}
.rq-section .rq-opt{font-family:inherit;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:600;}
.rq-topics__grid{display:grid;gap:8px 20px;}
@media (min-width:560px){.rq-topics__grid{grid-template-columns:1fr 1fr;}}
.rq-topics label{display:flex;align-items:flex-start;gap:10px;font-weight:500;font-size:.95rem;margin:0;cursor:pointer;}
.form .rq-topics input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--navy);}
.rq-topics.invalid .err{display:block;margin-top:10px;}
.rq-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px;}
.rq-preview{white-space:pre-wrap;font-family:var(--mono);font-size:.82rem;line-height:1.55;background:var(--soft);border-radius:var(--radius);padding:14px;margin:12px 0 14px;max-width:100%;overflow-x:auto;}
.form__ok .btn-row{margin-top:0;}
.rq-aside .kicker{display:block;margin-bottom:8px;}
.rq-aside p{margin:0 0 6px;}
.rq-aside p.muted{font-size:.9rem;line-height:1.55;}
.rq-aside .btn--sm{margin-top:8px;}
.rq-aside__block + .rq-aside__block{border-top:1px solid var(--line);margin-top:20px;padding-top:20px;}
@media (max-width:559px){.rq-actions .btn{width:100%;}}
/* a section opened from a link lands below the sticky header, not under it */
#tiers,#calculator,#compare{scroll-margin-top:96px;}
/* ---- "Request info": a small pill in the premium card's top-right corner, readable on the dark card */
.tier__info{
  position:absolute;top:16px;right:16px;z-index:1;
  font-size:.9rem;font-weight:700;letter-spacing:.01em;line-height:1;padding:12px 18px;border-radius:var(--radius);
  color:#fff;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.6);text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.tier__info:hover,.tier__info:focus-visible{background:#fff;color:var(--card-dark,#173A42);}
.tier__info:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.tier:not(.tier--feat) .tier__info{color:var(--navy);border-color:var(--navy);background:#fff;}
.tier:not(.tier--feat) .tier__info:hover{background:var(--navy);color:#fff;}
.tier__info ~ h3{padding-right:140px;}
/* the request page: a one-line header, so the form sits high */
.hero--slim{padding-block:clamp(28px,4vw,44px) clamp(22px,3vw,34px);}
.hero--slim .sec-head{margin-bottom:0;}
.hero--slim h1{margin-bottom:0;}
.hero--slim .sec-head{max-width:none;}
/* ---- "Sign up now" stays in the header on a phone: compact buttons so brand, Sign in, Sign up and the menu all fit */
@media (max-width:859px){
  .head-cta .btn--primary{display:inline-flex;}
  .head-cta{gap:8px;}
  .site-head__in{gap:10px;}
  .head-cta .btn{padding:7px 11px;font-size:.84rem;}
}
@media (max-width:359px){.head-cta .btn--ghost{display:none;}}

/* ======================================================================= v2 (the redesign, page by page)
   Scoped to html.v2 so pages not yet redone keep their look. Fonts are self-hosted: no request leaves the site. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500 700;font-display:swap;src:url("../fonts/BricolageGrotesque-latin.woff2") format("woff2");}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/PublicSans-latin.woff2") format("woff2");}
html.v2{
  --paper:#F5F7F6;--ink:#16343C;--navy:#1F5E6E;--navy-dark:#173A42;--teal-soft:#E3EEF1;--muted:#4A5E65;--line:#D7E0E2;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--body-font:"Public Sans","Segoe UI",system-ui,sans-serif;
}
html.v2 body{background:var(--paper);color:var(--ink);font-family:var(--body-font);font-size:17px;line-height:1.55;font-variant-numeric:tabular-nums;}
html.v2 h1,html.v2 h2,html.v2 h3{font-family:var(--display);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0;}
html.v2 h1{font-size:clamp(2.3rem,4.8vw,3.7rem);font-weight:700;}
html.v2 h2{font-size:clamp(1.55rem,2.8vw,2.15rem);font-weight:600;}
html.v2 h3{font-size:1.15rem;font-weight:600;}
html.v2 p{margin:0;}
html.v2 .lede{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:36em;}
html.v2 .btn{border-radius:10px;font-family:var(--body-font);}
html.v2 .btn--primary{color:var(--ink);box-shadow:none;}
html.v2 .btn--primary:hover,html.v2 .btn--primary:focus-visible{background:#F27716;color:var(--ink);box-shadow:none;}
html.v2 .btn--ghost{background:#fff;}
html.v2 .btn:hover{transform:none;}
html.v2 .btn:focus-visible,html.v2 a:focus-visible,html.v2 summary:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
html.v2 .textlink{font-weight:700;color:var(--navy);padding:12px 6px;}
html.v2 .site-head{background:#fff;border-bottom:1px solid var(--line);backdrop-filter:none;}
html.v2 .nav a,html.v2 .nav__trigger{font-family:var(--body-font);}
html.v2 .wrap{max-width:1140px;}

/* 1. promise and proof */
html.v2 .hero2{padding:clamp(40px,6vw,84px) 0 clamp(34px,5vw,64px);}
html.v2 .hero2__grid{display:grid;gap:34px;align-items:center;}
@media (min-width:920px){html.v2 .hero2__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:52px;}}
html.v2 .hero2 .lede{margin:18px 0 26px;}
html.v2 .hero2 .btn-row{margin-top:0;}
html.v2 .hero2__note{margin-top:14px;color:var(--muted);font-size:.92rem;}
html.v2 .mock{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(22,52,60,.10);overflow:hidden;}
html.v2 .mock__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:#FAFBFB;font-size:.82rem;color:var(--muted);}
html.v2 .mock__bar span{width:9px;height:9px;border-radius:50%;background:#D7E0E2;}
html.v2 .mock__bar b{margin-left:8px;color:var(--ink);font-weight:600;font-family:var(--body-font);font-size:.8rem;letter-spacing:0;text-transform:none;}
html.v2 .mock__body{padding:18px 18px 16px;}
html.v2 .mock__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
html.v2 .mock__kpis div{background:var(--teal-soft);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
html.v2 .mock__kpis small{display:block;font-size:.72rem;color:var(--muted);}
html.v2 .mock__kpis b{font-family:var(--display);font-size:1.35rem;font-weight:700;line-height:1.1;margin-top:auto;}
html.v2 .mock__row{display:grid;grid-template-columns:76px 1fr 54px;align-items:center;gap:10px;margin:7px 0;font-size:.86rem;}
html.v2 .mock__row span{color:var(--muted);}
html.v2 .mock__row em{font-style:normal;font-weight:700;text-align:right;}
html.v2 .bar{height:14px;background:#EEF2F3;border-radius:7px;overflow:hidden;}
html.v2 .bar i{display:block;height:100%;width:calc(var(--v) * 100%);background:var(--navy);border-radius:7px;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1);}
html.v2 .mock__row:first-child .bar i{background:var(--accent);}
html.v2 .mock__ask{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px;}
html.v2 .mock__me{justify-self:end;background:var(--ink);color:#fff;border-radius:14px 14px 4px 14px;padding:8px 12px;font-size:.88rem;max-width:80%;}
html.v2 .mock__ai{background:var(--teal-soft);border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:.88rem;max-width:90%;}
html.v2 .mock__ai b{display:block;font-size:.72rem;color:var(--navy);margin-bottom:2px;}
html.v2 .mock figcaption{font-size:.78rem;color:var(--muted);padding:0 18px 14px;}
@media (prefers-reduced-motion:reduce){html.v2 .bar i{transition:none;transform:none;}}

/* 2. how it works */
html.v2 .steps2{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);}
html.v2 .steps2__list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:26px;counter-reset:step;}
@media (min-width:800px){html.v2 .steps2__list{grid-template-columns:repeat(3,1fr);gap:32px;}}
html.v2 .steps2__list li{counter-increment:step;border-top:3px solid var(--ink);padding-top:14px;}
html.v2 .steps2__list li::before{content:counter(step);font-family:var(--display);font-weight:700;font-size:1.5rem;display:block;margin-bottom:6px;}
html.v2 .steps2__list p{color:var(--muted);margin:6px 0 14px;}
html.v2 .steps2__art{width:100%;height:auto;display:block;background:#fff;border:1px solid var(--line);border-radius:12px;font-family:var(--body-font);}
html.v2 .svg-box rect{fill:#fff;stroke:#B9C8CC;stroke-width:1.2;}
html.v2 .svg-box text,html.v2 .svg-app text,html.v2 .svg-ask text{font-size:11px;fill:var(--ink);text-anchor:middle;font-weight:600;}
html.v2 .svg-app rect{fill:var(--ink);}
html.v2 .svg-app text{fill:#fff;}
html.v2 .svg-link{stroke:var(--navy);stroke-width:1.5;fill:none;}
html.v2 .svg-label{font-size:10.5px;fill:var(--muted);}
html.v2 .svg-ask rect{fill:var(--ink);}
html.v2 .svg-ask text{fill:#fff;text-anchor:start;font-weight:500;}
html.v2 .svg-reply rect{fill:var(--teal-soft);}
html.v2 .svg-reply text{font-size:11px;fill:var(--ink);font-weight:500;}
html.v2 .svg-row text{font-size:10px;fill:var(--muted);}
html.v2 .svg-row .svg-val{fill:var(--ink);font-weight:700;text-anchor:end;}
html.v2 .svg-track{fill:#E9EFF1;}
html.v2 .svg-barfill{fill:var(--navy);}
html.v2 .svg-barfill--hi{fill:var(--accent);}

/* 3. who it's for */
html.v2 .who2{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);}
html.v2 .who2 h2{max-width:22em;}
html.v2 .who2__close{margin-top:22px;font-size:1.1rem;}

/* 4. price path: the catalog cards, restyled only */
html.v2 #pricing-summary{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);background:#fff;}
html.v2 #pricing-summary .sec-head{margin-bottom:26px;}
html.v2 #pricing-summary .lede{margin:12px auto 0;}
html.v2 .tier{border-radius:14px;box-shadow:none;border-color:var(--line);}
html.v2 .tier--feat{border-color:var(--ink);}
html.v2 .tier__flag{color:var(--ink);font-family:var(--body-font);letter-spacing:.04em;text-transform:none;font-size:.72rem;}
html.v2 .tier h3{font-size:1.2rem;}
html.v2 .tier__price{font-family:var(--display);}
html.v2 .disclosure{color:var(--muted);}

/* 5. questions */
html.v2 .faqv2{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);}
html.v2 .faqv2__list{max-width:46em;margin-top:18px;border-top:1px solid var(--line);}
html.v2 .faqv2__item{border-bottom:1px solid var(--line);}
html.v2 .faqv2__item summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px;}
html.v2 .faqv2__item summary::-webkit-details-marker{display:none;}
html.v2 .faqv2__item summary::after{content:"+";color:var(--navy);font-weight:700;flex:0 0 auto;}
html.v2 .faqv2__item[open] summary::after{content:"\2013";}
html.v2 .faqv2__item p{color:var(--muted);padding:0 0 18px;max-width:44em;}

/* 6. one closing band */
html.v2 .band2{padding:0 0 clamp(40px,6vw,84px);}
html.v2 .band2__in{background:var(--ink);color:#fff;border-radius:18px;padding:clamp(28px,4vw,48px);display:grid;gap:18px;}
@media (min-width:800px){html.v2 .band2__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;}}
html.v2 .band2 h2{color:#fff;}
html.v2 .band2 p{color:#C9DADF;margin-top:8px;max-width:36em;}
html.v2 .band2 .btn-row{margin-top:0;}
html.v2 .site-foot{font-family:var(--body-font);}
/* a11y: skip link readable on orange; focus rings stay visible on the dark band, card, footer and launch band */
html.v2 .skip,html.v2 .skip:focus{color:var(--ink);}
html.v2 .band2 a:focus-visible,html.v2 .band2 .btn:focus-visible,html.v2 .tier--feat a:focus-visible,html.v2 .tier--feat .btn:focus-visible,
html.v2 .site-foot a:focus-visible,html.v2 .lb-in a:focus-visible{outline-color:#fff;}
/* footer links: 24px targets without moving anything */
html.v2 .site-foot li a,html.v2 .site-foot__bot a{display:inline-block;padding:4px 0;margin:-4px 0;}
/* the illustration reflows down to 320px */
@media (max-width:429px){
  html.v2 .mock__kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  html.v2 .mock__kpis div{padding:8px 8px;}
  html.v2 .mock__kpis small{font-size:.7rem;}
}
@media (max-width:379px){
  html.v2 .mock__body{padding:14px 12px 12px;}
  html.v2 .mock__kpis{margin-bottom:12px;}
  html.v2 .mock__kpis b{font-size:1.05rem;}
  html.v2 .mock__row{grid-template-columns:66px minmax(0,1fr) 46px;gap:8px;font-size:.8rem;}
  html.v2 .mock figcaption{padding:0 12px 12px;}
}
/* phone header: brand, Sign in, Sign up now and the menu share one line */
@media (max-width:859px){html.v2 .head-cta .btn{white-space:nowrap;}}
@media (max-width:429px){
  html.v2 .brand img{height:30px;}
  html.v2 .site-head__in{gap:8px;}
  html.v2 .head-cta{gap:6px;}
  html.v2 .head-cta .btn{padding:7px 8px;font-size:.78rem;}
}
/* tablet: each step runs its text beside the illustration instead of a full-width drawing */
@media (min-width:600px) and (max-width:799px){
  html.v2 .steps2__list li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start;}
  html.v2 .steps2__list li::before,html.v2 .steps2__list h3,html.v2 .steps2__detail{grid-column:1;}
  html.v2 .steps2__art{grid-column:2;grid-row:1/4;align-self:center;}
}
/* how it works: heading + drawing show; the detail opens on click (every detail is visible without JS) */
html.v2 .steps2__item h3{margin:0;}
html.v2 .steps2__toggle{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;cursor:pointer;font:inherit;color:inherit;padding:2px 0 12px;}
html.v2 .steps2__toggle::after{content:"+";color:var(--navy);font-weight:700;font-size:1.25rem;line-height:1;flex:0 0 auto;}
html.v2 .steps2__toggle[aria-expanded="true"]::after{content:"\2013";}
html.v2 .steps2__toggle:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px;}
html.v2 .steps2__art{cursor:pointer;}
html.js .steps2__detail:not(.is-open){display:none;}
html.v2 .steps2__detail{animation:step-in .18s ease-out;}
html.v2 .steps2__detail p{margin:12px 0 0;}
@keyframes step-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){html.v2 .steps2__detail{animation:none;}}
/* hero illustration: three asks on a loop (connect, model, dashboard); still for reduced motion, pausable by hand */
html.v2 .mock__bar b{flex:1 1 auto;}
html.v2 .mock__pause{all:unset;box-sizing:border-box;font:inherit;font-size:.74rem;font-weight:600;color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;background:#fff;}
html.v2 .mock__pause:hover{background:var(--teal-soft);}
html.v2 .mock__pause:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
html.v2 .mock__stage{position:relative;height:222px;}
@media (max-width:640px){html.v2 .mock__stage{height:200px;}}
html.v2 .scene{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;}
html.v2 .scene svg{width:100%;height:100%;display:block;font-family:var(--body-font);}
html.v2 .mock[data-scene="1"] .scene--1,html.v2 .mock[data-scene="2"] .scene--2,html.v2 .mock[data-scene="3"] .scene--3{opacity:1;}
html.v2 .scene .svg-box,html.v2 .scene .svg-app{opacity:0;transition:opacity .35s ease;}
html.v2 .scene .svg-link{stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset .55s ease;}
html.v2 .mock[data-scene="1"] .s1a{opacity:1;transition-delay:.9s;}
html.v2 .mock[data-scene="1"] .s1b{opacity:1;transition-delay:1.15s;}
html.v2 .mock[data-scene="1"] .s1c{opacity:1;transition-delay:1.4s;}
html.v2 .mock[data-scene="1"] .scene--1 .svg-link{stroke-dashoffset:0;transition-delay:1.8s;}
html.v2 .mock[data-scene="1"] .s1d{opacity:1;transition-delay:2.2s;}
html.v2 .mock[data-scene="2"] .s2a{opacity:1;transition-delay:.9s;}
html.v2 .mock[data-scene="2"] .scene--2 .svg-link{stroke-dashoffset:0;transition-delay:1.3s;}
html.v2 .mock[data-scene="2"] .s2b{opacity:1;transition-delay:1.6s;}
html.v2 .mock[data-scene="2"] .s2c{opacity:1;transition-delay:1.8s;}
html.v2 .mock[data-scene="2"] .s2d{opacity:1;transition-delay:2s;}
html.v2 .mock[data-scene="2"] .s2e{opacity:1;transition-delay:2.2s;}
html.v2 .scene--3 .mock__kpis div{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;}
html.v2 .mock[data-scene="3"] .mock__kpis div{opacity:1;transform:none;}
html.v2 .mock[data-scene="3"] .mock__kpis div:nth-child(1){transition-delay:.9s;}
html.v2 .mock[data-scene="3"] .mock__kpis div:nth-child(2){transition-delay:1.05s;}
html.v2 .mock[data-scene="3"] .mock__kpis div:nth-child(3){transition-delay:1.2s;}
html.v2 .scene--3 .mock__row em{opacity:0;transition:opacity .3s ease;}
html.v2 .mock[data-scene="3"] .mock__row em{opacity:1;}
html.v2 .mock[data-scene="3"] .bar i{transform:scaleX(1);}
html.v2 .mock[data-scene="3"] .mock__row:nth-child(1) .bar i,html.v2 .mock[data-scene="3"] .mock__row:nth-child(1) em{transition-delay:1.4s;}
html.v2 .mock[data-scene="3"] .mock__row:nth-child(2) .bar i,html.v2 .mock[data-scene="3"] .mock__row:nth-child(2) em{transition-delay:1.55s;}
html.v2 .mock[data-scene="3"] .mock__row:nth-child(3) .bar i,html.v2 .mock[data-scene="3"] .mock__row:nth-child(3) em{transition-delay:1.7s;}
html.v2 .mock[data-scene="3"] .mock__row:nth-child(4) .bar i,html.v2 .mock[data-scene="3"] .mock__row:nth-child(4) em{transition-delay:1.85s;}
html.v2 .mock__ask{min-height:140px;}
@media (max-width:640px){html.v2 .mock__ask{min-height:164px;}}
@media (max-width:379px){html.v2 .mock__ask{min-height:186px;}}
html.v2 .turn{display:none;gap:8px;}
html.v2 .mock[data-scene="1"] .turn--1,html.v2 .mock[data-scene="2"] .turn--2,html.v2 .mock[data-scene="3"] .turn--3{display:grid;}
html.v2 .turn .mock__me{animation:bubble-in .35s ease both;}
html.v2 .turn .mock__ai{animation:bubble-in .35s ease .8s both;}
@keyframes bubble-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  html.v2 .scene,html.v2 .scene *,html.v2 .scene--3 .mock__kpis div,html.v2 .scene--3 .mock__row em{transition:none!important;}
  html.v2 .turn .mock__me,html.v2 .turn .mock__ai{animation:none;}
  html.v2 .mock__pause{display:none;}
}
/* ============================================================ product page (v2) */
html.v2 .pd-hero{padding:clamp(40px,6vw,84px) 0 clamp(34px,5vw,64px);}
html.v2 .pd-hero__grid{display:grid;gap:34px;align-items:center;}
@media (min-width:920px){html.v2 .pd-hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:52px;}}
html.v2 .pd-hero .lede{margin:18px 0 24px;}
html.v2 .pd-hero .btn-row{margin-top:0;}
html.v2 .pd-hero__note{margin-top:14px;color:var(--muted);font-size:.92rem;}
/* a drawn app window, used by the hero and the two modes */
html.v2 .pd-app{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(22,52,60,.10);overflow:hidden;}
html.v2 .pd-app__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:#FAFBFB;}
html.v2 .pd-app__bar i{width:9px;height:9px;border-radius:50%;background:#D7E0E2;}
html.v2 .pd-app__modes{margin-left:10px;display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:#fff;font-size:.74rem;font-weight:600;}
html.v2 .pd-app__modes span{padding:4px 10px;border-radius:999px;color:var(--muted);}
html.v2 .pd-app__modes span.on{background:var(--ink);color:#fff;}
html.v2 .pd-app figcaption{font-size:.78rem;color:var(--muted);padding:0 18px 14px;}
html.v2 .pd-ask{padding:22px 18px 16px;}
html.v2 .pd-ask__title{font-family:var(--display);font-weight:600;font-size:1.25rem;text-align:center;}
html.v2 .pd-ask__sub{color:var(--muted);font-size:.84rem;text-align:center;max-width:36em;margin:6px auto 16px;}
html.v2 .pd-ask__cards{display:grid;gap:8px;}
@media (min-width:560px){html.v2 .pd-ask__cards{grid-template-columns:1fr 1fr;}}
html.v2 .pd-ask__cards div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.8rem;line-height:1.35;}
html.v2 .pd-ask__cards b{display:block;font-size:.86rem;margin-bottom:2px;}
html.v2 .pd-ask__cards span{color:var(--muted);}
html.v2 .pd-ask__input{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--muted);font-size:.86rem;display:flex;justify-content:space-between;align-items:center;gap:10px;}
html.v2 .pd-ask__input i{width:26px;height:26px;border-radius:50%;background:var(--ink);flex:0 0 auto;}
/* two modes: the switch, then one drawing and one column of text per mode */
html.v2 .pd-modes{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);background:#fff;}
html.v2 .pd-modes .lede{margin-top:12px;}
html.v2 .pd-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff;margin-top:18px;}
html.v2 .pd-seg button{all:unset;box-sizing:border-box;padding:9px 18px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--muted);font-family:var(--body-font);}
html.v2 .pd-seg button[aria-selected="true"]{background:var(--ink);color:#fff;}
html.v2 .pd-seg button:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
html.v2 .pd-mode{margin-top:22px;display:grid;gap:22px;}
@media (min-width:1000px){html.v2 .pd-mode{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:36px;align-items:start;}}
html.js .pd-mode:not(.is-on){display:none;}
html.v2 .pd-mode h3{font-size:1.35rem;line-height:1.15;}
html.v2 .pd-mode p{color:var(--muted);margin-top:10px;}
html.v2 .pd-mode ul{margin:12px 0 0;padding-left:0;list-style:none;display:grid;gap:8px;color:var(--muted);}
html.v2 .pd-mode li{padding-left:16px;position:relative;}
html.v2 .pd-mode li b{color:var(--ink);font-weight:600;}
html.v2 .pd-mode li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--navy);}
html.v2 .pd-cm{display:grid;}
@media (min-width:640px){html.v2 .pd-cm{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);}}
html.v2 .pd-cm__chat{padding:16px;border-bottom:1px solid var(--line);display:grid;gap:8px;align-content:start;}
@media (min-width:640px){html.v2 .pd-cm__chat{border-bottom:0;border-right:1px solid var(--line);}}
html.v2 .pd-cm .mock__me,html.v2 .pd-cm .mock__ai{font-size:.84rem;margin:0;}
html.v2 .pd-cm .mock__me{color:#fff;}
html.v2 .pd-cm .mock__ai{color:var(--ink);}
html.v2 .pd-cm__plan{padding:14px 16px 16px;font-size:.8rem;}
html.v2 .pd-cm__plan > b{display:block;font-size:.92rem;font-family:var(--display);font-weight:600;}
html.v2 .pd-cm__sub{color:var(--muted);margin:2px 0 10px;}
html.v2 .pd-stage{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);}
html.v2 .pd-stage i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:.68rem;color:var(--muted);}
html.v2 .pd-stage i.ok{background:var(--navy);border-color:var(--navy);color:#fff;}
html.v2 .pd-stage i.now{border-color:var(--accent);color:var(--ink);}
html.v2 .pd-stage small{display:block;color:var(--muted);font-size:.72rem;}
html.v2 .pd-chip{font-size:.68rem;font-weight:600;border-radius:999px;padding:3px 8px;background:var(--paper);color:var(--muted);white-space:nowrap;}
html.v2 .pd-chip--ok{background:var(--teal-soft);color:var(--navy);}
html.v2 .pd-chip--now{background:#FFE7D1;color:#7A4100;}
html.v2 .pd-dm{display:grid;grid-template-columns:minmax(0,1fr);}
@media (min-width:1100px){html.v2 .pd-dm{grid-template-columns:160px minmax(0,1fr);}}
html.v2 .pd-dm__tree{display:none;padding:14px;border-right:1px solid var(--line);font-size:.78rem;color:var(--muted);}
@media (min-width:1100px){html.v2 .pd-dm__tree{display:block;}}
html.v2 .pd-dm__tree b{display:flex;justify-content:space-between;color:var(--ink);font-weight:600;margin-top:8px;}
html.v2 .pd-dm__tree b:first-child{margin-top:0;}
html.v2 .pd-dm__tree span{display:block;padding:3px 0 3px 10px;}
html.v2 .pd-dm__tree b span{display:inline;padding:0;}
html.v2 .pd-dm__tree span.sel{background:var(--teal-soft);color:var(--ink);border-radius:6px;font-weight:600;}
html.v2 .pd-dm__edit{padding:14px 16px 16px;font-size:.8rem;min-width:0;}
html.v2 .pd-field{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-bottom:8px;}
html.v2 .pd-field span{color:var(--muted);flex:0 0 auto;}
html.v2 .pd-field b{border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-weight:500;}
html.v2 .pd-dm__lbl{display:block;font-weight:600;margin:10px 0 4px;color:var(--ink);}
html.v2 .pd-dm__hint{color:var(--muted);font-size:.74rem;margin-bottom:6px;}
html.v2 .pd-dm__tbl{width:100%;max-width:100%;border-collapse:collapse;display:block;overflow-x:auto;}
html.v2 .pd-dm__tbl th,html.v2 .pd-dm__tbl td{text-align:left;padding:5px 6px;border-top:1px solid var(--line);font-size:.76rem;white-space:nowrap;}
html.v2 .pd-dm__tbl th{color:var(--muted);font-weight:600;border-top:0;}
html.v2 .pd-calc{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:4px;}
html.v2 .pd-calc .pd-field{margin-bottom:6px;}
html.v2 .pd-calc pre{margin:0;background:var(--teal-soft);border-radius:8px;padding:8px 10px;font-family:var(--mono);font-size:.74rem;line-height:1.5;overflow:auto;color:var(--ink);}
/* the game, in the v2 system: a white card, ink text, orange for progress and the answer */
html.v2 .pd-game{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);}
html.v2 .game{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(22,52,60,.08);}
html.v2 .game h2{color:var(--ink);}
html.v2 .game__lede{color:var(--muted);margin-top:10px;}
html.v2 .game__lede strong{color:var(--ink);}
html.v2 .g-raw{background:var(--paper);border:1px solid var(--line);}
html.v2 .g-raw h3{font-family:var(--body-font);font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:600;}
html.v2 .g-tablewrap table{font-family:var(--body-font);font-size:.8rem;}
html.v2 .g-tablewrap th{background:var(--teal-soft);color:var(--ink);letter-spacing:0;font-weight:600;}
html.v2 .g-tablewrap td{color:var(--ink);border-top-color:var(--line);}
html.v2 .g-step{font-family:var(--body-font);font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--navy);}
html.v2 .g-q{font-family:var(--display);font-weight:600;}
html.v2 .g-dots i{background:var(--line);}
html.v2 .g-dots i.now{background:var(--accent);}
html.v2 .g-dots i.done{background:var(--navy);}
html.v2 .g-ctl > span{font-family:var(--body-font);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--muted);}
html.v2 .g-chip{background:#fff;border:1.5px solid var(--navy);color:var(--navy);font-family:var(--body-font);cursor:pointer;}
html.v2 .g-chip:hover{background:var(--teal-soft);}
html.v2 .g-chip:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
html.v2 .g-chip.on{background:var(--ink);border-color:var(--ink);color:#fff;}
html.v2 .g-hint{color:var(--muted);font-size:.84rem;margin:2px 0 0;}
html.v2 .g-empty,html.v2 .g-chart-title{color:var(--muted);font-family:var(--body-font);letter-spacing:0;text-transform:none;font-size:.84rem;}
html.v2 .g-bar{color:var(--ink);font-family:var(--body-font);}
html.v2 .g-bar:not(:disabled):hover{background:var(--paper);border-color:var(--line);}
html.v2 .g-bar.is-answer{border-color:var(--accent);background:#FFF1E6;opacity:1;}
html.v2 .g-bar-t{background:var(--teal-soft);}
html.v2 .g-bar-f{background:var(--navy);}
html.v2 .g-bar.neg .g-bar-f{background:var(--accent);}
html.v2 .g-bar-v{color:var(--muted);font-family:var(--body-font);}
html.v2 .g-feedback{color:var(--ink);}
html.v2 .g-feedback.warn{color:#7A4100;}
html.v2 .g-feedback.good strong{color:#1B6B3A;}
html.v2 .g-feedback.bad strong{color:#A33600;}
html.v2 .g-next{background:var(--accent);color:var(--ink);font-family:var(--body-font);}
html.v2 .g-next:hover{background:#F27716;}
html.v2 #g-done h3{color:var(--ink);}
html.v2 #g-done p{color:var(--muted);}
html.v2 .g-score{color:var(--navy);font-family:var(--display);}
html.v2 .g-done-note{color:var(--muted)!important;}
html.v2 .game .btn--outline-light{border-color:var(--ink);color:var(--ink);}
/* good to know: five lines */
html.v2 .pd-know{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);background:#fff;}
html.v2 .pd-list{margin:22px 0 0;max-width:62em;}
html.v2 .pd-list div{display:grid;gap:4px 18px;padding:14px 0;border-top:1px solid var(--line);}
@media (min-width:640px){html.v2 .pd-list div{grid-template-columns:220px minmax(0,1fr);}}
html.v2 .pd-list div:last-child{border-bottom:1px solid var(--line);}
html.v2 .pd-list dt{font-family:var(--display);font-weight:600;font-size:1.05rem;}
html.v2 .pd-list dd{margin:0;color:var(--muted);}
html.v2 .pd-list dd a{color:var(--navy);font-weight:600;}
html.v2 .band2__fine{color:#C9DADF;font-size:.9rem;margin-top:14px;}
html.v2 .faqv2 + .band2{padding-top:0;}
/* home hero: the conversation above the drawing */
html.v2 .mock__ask{margin:0 0 14px;border-top:0;border-bottom:1px solid var(--line);padding:0 0 14px;}
/* product hero: the two modes on a loop */
html.v2 .pd-app__bar{position:relative;}
html.v2 .pd-app__pause{all:unset;box-sizing:border-box;margin-left:auto;font:inherit;font-size:.74rem;font-weight:600;color:var(--navy);border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;background:#fff;}
html.v2 .pd-app__pause:hover{background:var(--teal-soft);}
html.v2 .pd-app__pause:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
html.v2 .pd-loop__stage{display:grid;}
html.v2 .pd-loop__pane{grid-area:1/1;opacity:0;transition:opacity .5s ease;min-width:0;}
html.v2 .pd-loop[data-mode="cm"] .pd-loop__pane--cm,html.v2 .pd-loop[data-mode="dm"] .pd-loop__pane--dm{opacity:1;}
html.v2 .pd-loop .pd-app__modes span{transition:background .3s ease,color .3s ease;}
html.v2 .pd-loop[data-mode="cm"] .pd-app__modes span:first-child,html.v2 .pd-loop[data-mode="dm"] .pd-app__modes span:last-child{background:var(--ink);color:#fff;}
html.v2 .pd-ask__cards--brief div{padding:12px 14px;}
html.v2 .pd-ask__cards--brief b{margin:0;font-size:.9rem;}
html.v2 .pd-loop .pd-ask__title{margin-bottom:14px;}
html.v2 .pd-loop__pane--cm .pd-ask__cards div{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease;}
html.v2 .pd-loop[data-mode="cm"] .pd-ask__cards div{opacity:1;transform:none;}
html.v2 .pd-loop[data-mode="cm"] .pd-ask__cards div:nth-child(1){transition-delay:.5s;}
html.v2 .pd-loop[data-mode="cm"] .pd-ask__cards div:nth-child(2){transition-delay:.62s;}
html.v2 .pd-loop[data-mode="cm"] .pd-ask__cards div:nth-child(3){transition-delay:.74s;}
html.v2 .pd-loop[data-mode="cm"] .pd-ask__cards div:nth-child(4){transition-delay:.86s;}
html.v2 .pd-loop[data-mode="cm"] .pd-ask__cards div:nth-child(5){transition-delay:.98s;}
html.v2 .pd-loop[data-mode="cm"] .pd-ask__cards div:nth-child(6){transition-delay:1.1s;}
html.v2 .pd-loop__pane--dm .pd-dm__tbl tbody tr,html.v2 .pd-loop__pane--dm .pd-calc{opacity:0;transition:opacity .3s ease;}
html.v2 .pd-loop[data-mode="dm"] .pd-dm__tbl tbody tr,html.v2 .pd-loop[data-mode="dm"] .pd-calc{opacity:1;}
html.v2 .pd-loop[data-mode="dm"] .pd-dm__tbl tbody tr:nth-child(1){transition-delay:.5s;}
html.v2 .pd-loop[data-mode="dm"] .pd-dm__tbl tbody tr:nth-child(2){transition-delay:.65s;}
html.v2 .pd-loop[data-mode="dm"] .pd-dm__tbl tbody tr:nth-child(3){transition-delay:.8s;}
html.v2 .pd-loop[data-mode="dm"] .pd-calc{transition-delay:1.1s;}
@media (prefers-reduced-motion:reduce){
  html.v2 .pd-loop__pane,html.v2 .pd-loop__pane *{transition:none!important;}
  html.v2 .pd-app__pause{display:none;}
}
/* what sets it apart: six edges, an icon and one line each */
html.v2 .pd-edge{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);background:#fff;}
html.v2 .pd-edge__list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px 28px;}
@media (min-width:560px){html.v2 .pd-edge__list{grid-template-columns:1fr 1fr;}}
@media (min-width:900px){html.v2 .pd-edge__list{grid-template-columns:repeat(3,1fr);gap:30px 32px;}}
html.v2 .pd-edge__list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-items:start;}
html.v2 .pd-edge__ico{grid-row:1/3;width:44px;height:44px;border-radius:12px;background:var(--teal-soft);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;}
html.v2 .pd-edge__ico svg{width:24px;height:24px;}
html.v2 .pd-edge__list h3{font-size:1.05rem;margin:0;line-height:1.3;}
html.v2 .pd-edge__list p{color:var(--muted);margin:0;font-size:.95rem;}
html.v2 .pd-edge__tag{display:inline-block;margin-left:6px;background:var(--teal-soft);color:var(--navy);font-size:.72rem;font-weight:700;border-radius:6px;padding:2px 8px;vertical-align:middle;font-family:var(--body-font);}
html.v2 .pd-loop--still .pd-loop__pane,html.v2 .pd-loop--still .pd-loop__pane *,html.v2 .pd-loop--still .pd-app__modes span{transition:none!important;}
html.v2 .pd-app__modes span{white-space:nowrap;}
@media (max-width:429px){
  html.v2 .pd-app__modes{margin-left:6px;font-size:.7rem;}
  html.v2 .pd-app__modes span{padding:4px 8px;}
  html.v2 .pd-app__pause{padding:3px 8px;font-size:.7rem;}
}
@media (max-width:359px){html.v2 .pd-loop .pd-app__bar i{display:none;}}
/* round 4: banded Home, equal figures, phone-friendly code and table, key words, edge cards */
html.v2 .steps2{background:#fff;}
html.v2 .mock,html.v2 .pd-loop{display:flex;flex-direction:column;}
html.v2 .mock__body{flex:1 1 auto;display:flex;flex-direction:column;}
html.v2 .mock__stage{height:auto;min-height:222px;flex:1 1 auto;}
@media (max-width:640px){html.v2 .mock__stage{min-height:200px;}}
html.v2 .pd-loop__stage{flex:1 1 auto;}
@media (min-width:920px){html.v2 .mock,html.v2 .pd-loop{min-height:540px;}}
html.v2 .pd-mode .pd-app{display:flex;flex-direction:column;}
html.v2 .pd-mode .pd-cm,html.v2 .pd-mode .pd-dm{flex:1 1 auto;}
@media (min-width:1000px){html.v2 .pd-mode .pd-app{min-height:604px;}}
@media (max-width:640px){
  html.v2 .pd-calc pre{white-space:pre-wrap;overflow-wrap:anywhere;}
  html.v2 .game{padding:18px 14px;}
  html.v2 .g-raw{padding:10px 8px 4px;}
  html.v2 .g-tablewrap table{font-size:.62rem;}
  html.v2 .g-tablewrap th,html.v2 .g-tablewrap td{padding:4px 3px;}
  html.v2 .g-tablewrap th,html.v2 .g-tablewrap td.n{white-space:nowrap;}
}
html.v2 .g-key{background:#FFE7D1;color:var(--ink);font-weight:700;border-radius:4px;padding:0 5px;}
html.v2 .pd-edge__list{grid-auto-rows:1fr;}
html.v2 .pd-edge__list li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;}
@media (max-width:379px){html.v2 .g-tablewrap table{font-size:.58rem;} html.v2 .g-tablewrap th,html.v2 .g-tablewrap td{padding:4px 2px;}}
html.v2 .pd-edge__list h3{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;}
html.v2 .pd-edge__tag{margin-left:0;}
/* round 5: ghost buttons keep readable text on hover; edge cards with centered icons and status tags */
html.v2 .btn--ghost:hover,html.v2 .btn--ghost:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy);}
html.v2 .game .btn--outline-light:hover,html.v2 .game .btn--outline-light:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink);}
html.v2 .pd-edge__list li{grid-template-rows:auto auto 1fr;align-items:start;}
html.v2 .pd-edge__ico{grid-row:1/4;align-self:center;}
html.v2 .pd-edge__list h3,html.v2 .pd-edge__list .pd-edge__tag,html.v2 .pd-edge__list p{grid-column:2;}
html.v2 .pd-edge__list h3{display:block;}
html.v2 .pd-edge__list .pd-edge__tag{justify-self:start;margin:0;}
html.v2 .pd-edge__tag--live{background:#DCF2E4;color:#1B6B3A;}
html.v2 .pd-edge__list p{margin-top:2px;}
html.v2 .game__start{margin-top:18px;}
html.v2 .game__grid[hidden]{display:none;}
/* a thin progress bar under the window bar of each hero loop */
html.v2 .mock__prog,html.v2 .pd-app__prog{height:3px;background:var(--teal-soft);}
html.v2 .mock__prog i,html.v2 .pd-app__prog i{display:block;height:100%;background:var(--navy);transform:scaleX(0);transform-origin:left center;}
html.v2 .mock__prog[hidden],html.v2 .pd-app__prog[hidden]{display:none;}
@media (prefers-reduced-motion:reduce){html.v2 .mock__prog,html.v2 .pd-app__prog{display:none;}}
/* the progress bar, calmer: one light segment per scene, filling slowly */
html.v2 .mock__prog,html.v2 .pd-app__prog{display:flex;gap:6px;height:3px;background:transparent;padding:0 14px;margin-top:-3px;}
html.v2 .mock__prog i,html.v2 .pd-app__prog i{display:block;flex:1 1 0;height:3px;background:#EAF0F2;border-radius:2px;position:relative;overflow:hidden;transform:none;}
html.v2 .mock__prog i::after,html.v2 .pd-app__prog i::after{content:"";position:absolute;inset:0;background:#B5CED6;border-radius:2px;transform:scaleX(var(--p,0));transform-origin:left center;}
/* home: who it's for, as cards (white on the paper band) */
html.v2 .who2 .pd-edge__list li{background:#fff;}
/* ============================================================ about page (v2) */
html.v2 .ab-hero{padding:clamp(40px,6vw,84px) 0 clamp(34px,5vw,64px);}
html.v2 .ab-hero__grid{display:grid;gap:34px;align-items:center;}
@media (min-width:920px){html.v2 .ab-hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:52px;}}
html.v2 .ab-hero .lede{margin:18px 0 24px;}
html.v2 .ab-hero .btn-row{margin-top:0;}
html.v2 .ab-hero__note{margin-top:14px;color:var(--muted);font-size:.92rem;}
html.v2 .ab-team{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(22,52,60,.10);padding:26px 22px 18px;}
html.v2 .ab-team__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (min-width:560px){html.v2 .ab-team__grid{gap:20px;}}
html.v2 .ab-team__person{text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;}
html.v2 .ab-team__person img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 10px;border:3px solid var(--teal-soft);}
@media (min-width:560px){html.v2 .ab-team__person img{width:116px;height:116px;margin-bottom:12px;}}
html.v2 .ab-team__person h2{font-size:.92rem;font-weight:600;margin:0;}
@media (min-width:560px){html.v2 .ab-team__person h2{font-size:1.05rem;}}
html.v2 .ab-team__person p{color:var(--muted);font-size:.76rem;margin:4px 0 0;line-height:1.4;}
@media (min-width:560px){html.v2 .ab-team__person p{font-size:.86rem;}}
html.v2 .ab-team__person a{display:inline-block;margin-top:auto;padding-top:8px;color:var(--navy);font-weight:600;font-size:.86rem;}
html.v2 .ab-team figcaption{font-size:.84rem;color:var(--muted);margin-top:20px;padding-top:14px;border-top:1px solid var(--line);text-align:center;}
html.v2 .ab-team figcaption a{color:var(--navy);font-weight:600;}
html.v2 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
html.v2 .ab-why,html.v2 .ab-origin,html.v2 .ab-ok{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);background:#fff;}
html.v2 .ab-beliefs,html.v2 .ab-straight{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);}
html.v2 .ab-why__grid{display:grid;gap:18px;margin-top:22px;}
@media (min-width:800px){html.v2 .ab-why__grid{grid-template-columns:1fr 1fr;gap:24px;}}
html.v2 .ab-beat{border-radius:16px;padding:clamp(22px,3vw,32px);background:var(--paper);border:1px solid var(--line);}
html.v2 .ab-beat--ink{background:var(--ink);color:#fff;border-color:var(--ink);}
html.v2 .ab-beat small{display:block;font-size:.84rem;color:var(--muted);margin-bottom:8px;font-weight:600;}
html.v2 .ab-beat--ink small{color:#9CC1CC;}
html.v2 .ab-beat h3{font-size:1.35rem;line-height:1.15;margin:0 0 10px;}
html.v2 .ab-beat--ink h3{color:#fff;}
html.v2 .ab-beat p{color:var(--muted);margin-top:10px;}
html.v2 .ab-beat--ink p{color:#C9DADF;}
html.v2 .ab-beliefs .lede{margin-top:12px;}
html.v2 .ab-beliefs__list{grid-auto-rows:1fr;}
html.v2 .ab-beliefs__list li{grid-template-rows:auto auto;align-content:center;}
html.v2 .ab-beliefs__list .pd-edge__ico{grid-row:1/3;}
@media (min-width:800px){html.v2 .ab-beliefs__list{grid-template-columns:repeat(2,1fr);}}
html.v2 .ab-beliefs__list li{background:#fff;}
html.v2 .ab-prose{max-width:46em;margin-top:18px;display:grid;gap:14px;color:var(--muted);}
html.v2 .ab-fact{margin-top:18px;display:inline-flex;gap:10px;align-items:baseline;background:var(--teal-soft);border-radius:10px;padding:10px 14px;color:var(--ink);}
html.v2 .ab-fact b{font-family:var(--display);font-size:1.4rem;font-weight:700;}
html.v2 .ab-two{display:grid;gap:22px;margin-top:22px;}
@media (min-width:900px){html.v2 .ab-two{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start;}}
html.v2 .ab-two h3{font-size:1.35rem;line-height:1.15;}
html.v2 .ab-two p{color:var(--muted);margin-top:10px;}
html.v2 .ab-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;}
html.v2 .ab-ok .ab-card{background:var(--paper);}
html.v2 .ab-card h3{font-size:1.05rem;margin:0 0 12px;}
html.v2 .ab-card dl{margin:0;display:grid;gap:12px;}
html.v2 .ab-card dt{font-weight:600;font-size:.9rem;}
html.v2 .ab-card dd{margin:2px 0 0;color:var(--muted);font-size:.95rem;}
html.v2 .ab-card a,html.v2 .ab-line a{color:var(--navy);font-weight:600;}
html.v2 .ab-line{margin-top:14px;font-size:.95rem;}
html.v2 .band2--top{padding-top:clamp(40px,6vw,84px);}
@media (min-width:560px) and (max-width:799px){html.v2 .ab-beliefs__list{grid-template-columns:1fr;}}
@media (max-width:559px){html.v2 .ab-beliefs__list p{font-size:.9rem;}}
/* ============================================================ contact page (v2): the request form in the system */
html.v2 .section{padding-block:clamp(40px,6vw,84px);}
html.v2 .section--tint{background:#fff;border-top:1px solid var(--line);}
html.v2 .hero::after{display:none;}
html.v2 .hero--slim{padding:clamp(40px,6vw,84px) 0 clamp(22px,3vw,34px);}
html.v2 .hero--slim h1{text-align:center;}
html.v2 .kicker{font-family:var(--body-font);font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:600;margin-bottom:8px;}
html.v2 .kicker--light{color:#9CC1CC;}
html.v2 .form{border-radius:16px;border-color:var(--line);box-shadow:0 18px 50px rgba(22,52,60,.08);padding:clamp(22px,3vw,32px);}
html.v2 .form input,html.v2 .form select,html.v2 .form textarea{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-family:var(--body-font);font-size:.95rem;}
html.v2 .form input:focus,html.v2 .form select:focus,html.v2 .form textarea:focus{border-color:var(--navy);}
html.v2 .form input:focus-visible,html.v2 .form select:focus-visible,html.v2 .form textarea:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
html.v2 .form .field label{font-weight:600;font-size:.9rem;}
html.v2 .rq-section legend{font-family:var(--display);font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;margin-bottom:12px;}
html.v2 .rq-section .rq-opt{font-family:var(--body-font);font-size:.84rem;color:var(--muted);font-weight:500;}
html.v2 .rq-topics label{font-family:var(--body-font);}
html.v2 .err{color:#A33600;}
html.v2 .field.invalid input,html.v2 .field.invalid select,html.v2 .field.invalid textarea{border-color:#A33600;}
html.v2 .rq-actions{margin-top:8px;}
@media (max-width:559px){html.v2 .rq-actions .btn{width:100%;}}
html.v2 .form__ok{background:var(--teal-soft);border:1px solid var(--line);border-radius:14px;text-align:left;padding:22px;}
html.v2 .form__ok h3{color:var(--ink);font-size:1.35rem;}
html.v2 .form__ok p{color:var(--muted);}
html.v2 .rq-preview{background:#fff;border:1px solid var(--line);border-radius:10px;}
html.v2 .card{border-radius:16px;border-color:var(--line);box-shadow:none;background:#fff;}
html.v2 .rq-aside a:not(.btn){color:var(--navy);font-weight:600;}
html.v2 .rq-aside p{color:var(--ink);}
html.v2 .rq-aside p.muted{color:var(--muted);}
html.v2 .disclosure a{color:var(--navy);font-weight:600;}
/* the estimator band, as the closing band elsewhere */
html.v2 .ctaband{background:transparent;color:inherit;text-align:left;padding:0 0 clamp(40px,6vw,84px);}
html.v2 .ctaband > .wrap{background:var(--ink);color:#fff;border-radius:18px;padding:clamp(28px,4vw,48px);}
html.v2 .ctaband h2{color:#fff;}
html.v2 .ctaband p{color:#C9DADF;margin:8px 0 0;max-width:36em;}
html.v2 .ctaband .btn-row{justify-content:flex-start;margin-top:18px;}
/* the "be featured" block: a heading, a line, two cards */
html.v2 .feature-cta{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;}
html.v2 .feature-cta__head{max-width:none;margin:0 0 22px;text-align:left;}
html.v2 .feature-cta__head h2{font-size:clamp(1.55rem,2.8vw,2.15rem);margin:0 0 12px;}
html.v2 .feature-cta__head p{max-width:62em;}
html.v2 .feature-cta__head a{color:var(--navy);font-weight:600;}
html.v2 .feature-cta__col{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;}
html.v2 .feature-cta__col h3{font-size:1.05rem;}
html.v2 .ticks li{color:var(--muted);}
html.v2 .ticks li::before{border-color:var(--navy);}
/* ============================================================ resources pages (v2): Blog and How-to */
html.v2 .hero:not(.hero--slim){padding:clamp(40px,6vw,84px) 0 clamp(30px,4vw,48px);}
html.v2 .rtabs{gap:8px;margin-bottom:clamp(22px,3vw,34px);}
html.v2 .rtabs a{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--body-font);font-size:.9rem;font-weight:600;color:var(--ink);background:#fff;}
html.v2 .rtabs a:hover{border-color:var(--navy);color:var(--navy);}
html.v2 .rtabs a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff;}
html.v2 .rsearch__field{border:1px solid var(--line);border-radius:12px;max-width:560px;padding:0 8px 0 16px;}
html.v2 .rsearch__field:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,94,110,.15);}
html.v2 .rsearch__field input{font-family:var(--body-font);font-size:.95rem;padding:13px 0;}
html.v2 .rsearch__clear{background:var(--teal-soft);color:var(--navy);}
html.v2 .rsearch__clear:hover{background:var(--ink);color:#fff;}
html.v2 .rchip{border:1px solid var(--line);border-radius:999px;font-family:var(--body-font);font-weight:600;color:var(--muted);}
html.v2 .rchip:hover{border-color:var(--navy);color:var(--navy);}
html.v2 .rchip.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}
html.v2 .rchip:focus-visible,html.v2 .rtabs a:focus-visible,html.v2 .rsearch__clear:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
html.v2 .rresults__count{font-family:var(--body-font);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--muted);}
html.v2 .feat{border-radius:16px;border-color:var(--line);box-shadow:0 18px 50px rgba(22,52,60,.08);}
html.v2 .feat__media{background:var(--ink);}
html.v2 .feat__label{font-family:var(--body-font);font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:600;margin-bottom:10px;}
html.v2 .feat h1{font-size:clamp(1.55rem,2.8vw,2.15rem);font-weight:600;line-height:1.15;}
html.v2 .feat__meta{font-family:var(--body-font);font-size:.84rem;}
html.v2 .feat__meta a{font-weight:600;}
html.v2 .feat--empty{background:#fff;border:1px solid var(--line);box-shadow:none;}
html.v2 .empty__ico{background:var(--teal-soft);color:var(--navy);}
html.v2 .res-card{border-radius:16px;border-color:var(--line);box-shadow:none;}
html.v2 .res-card:hover{transform:none;box-shadow:0 18px 50px rgba(22,52,60,.08);}
html.v2 .res-card__tag{font-family:var(--body-font);font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--navy);font-weight:600;margin-bottom:8px;}
html.v2 .res-card h3{font-size:1.2rem;line-height:1.25;}
html.v2 .res-card p{font-size:.95rem;}
html.v2 .res-card__meta{font-size:.84rem;}
html.v2 .res-card__meta a{font-weight:600;color:var(--navy);}
html.v2 .chips--tags li{background:var(--teal-soft);color:var(--navy);font-family:var(--body-font);font-size:.76rem;letter-spacing:0;}
/* ============================================================ pricing page (v2): the catalog output in the system */
.pr-hero{padding:clamp(40px,6vw,84px) 0 clamp(24px,3vw,36px);text-align:center}
.pr-hero .lede{margin:16px auto 0;max-width:40em}
.pr-tiers{padding:0 0 clamp(40px,6vw,84px)}
html.v2 #earlyNote{margin:0 auto 18px;max-width:70ch}
html.v2 .tier{padding:clamp(22px,2.8vw,30px)}
html.v2 .tier__for{font-family:var(--body-font);color:var(--muted)}
html.v2 .tier--feat .tier__for{color:#C9DADF}
html.v2 .tier__list li{font-size:.92rem}
html.v2 .tier__list li::before{border-color:var(--navy)}
html.v2 .tier--feat .tier__list li::before{border-color:var(--accent)}
html.v2 .tier__note{font-size:.82rem}
html.v2 .tier__flag{background:var(--accent);color:var(--ink);border-radius:999px;padding:5px 12px;font-size:.78rem}
html.v2 .custombar{background:var(--ink);color:#fff;border-radius:16px;margin-top:22px;padding:clamp(20px,2.8vw,30px)}
html.v2 .custombar .kicker{color:#9CC1CC}
html.v2 .custombar h3{color:#fff;font-size:1.35rem;margin:0 0 6px}
html.v2 .custombar p{color:#C9DADF}
html.v2 .custombar:not(.custombar--light) .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
html.v2 .custombar:not(.custombar--light) .btn--ghost:hover,html.v2 .custombar:not(.custombar--light) .btn--ghost:focus-visible{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
html.v2 .custombar--light{background:#fff;color:var(--ink);border:1px solid var(--line)}
html.v2 .custombar--light .kicker{color:var(--muted)}
html.v2 .custombar--light h3{color:var(--ink)}
html.v2 .custombar--light p{color:var(--muted)}
html.v2 #trialTerms{margin:22px auto 0;max-width:70ch;text-align:center}
.pr-compare{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);background:#fff}
.pr-compare .lede{margin-top:12px}
html.v2 .tblwrap{border-radius:16px;margin-top:22px}
html.v2 table.cmp--matrix thead th{background:var(--ink);color:#fff;padding:18px 12px 14px}
html.v2 table.cmp--matrix thead .cmp-plan{font-family:var(--display);font-size:1.15rem;font-weight:600}
html.v2 table.cmp--matrix thead th small{font-family:var(--body-font);font-size:.8rem;color:#C9DADF;font-weight:500}
html.v2 table.cmp--matrix tbody tr.group th{background:var(--paper);font-family:var(--display);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;padding:18px 12px 8px}
html.v2 table.cmp--matrix tbody th{font-family:var(--body-font)}
html.v2 table.cmp--matrix td.yes{color:var(--navy)}
html.v2 table.cmp--matrix td.no,html.v2 .cmp-val.no{color:var(--muted)}
html.v2 table.cmp--matrix tbody tr:not(.group):hover th,html.v2 table.cmp--matrix tbody tr:not(.group):hover td{background:var(--paper)}
html.v2 table.cmp.cmp--matrix tfoot td{background:var(--paper)}
html.v2 .cmp-tabs button{border:1px solid var(--line);border-radius:10px;font-family:var(--body-font);font-weight:600}
html.v2 .cmp-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
html.v2 .cmp-tabs button[aria-selected="true"] small{color:#C9DADF}
html.v2 .cmp-list h4{font-family:var(--display);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
html.v2 .cmp-val.yes{color:var(--navy)}
html.v2 #trialTermsMatrix{margin:18px auto 0;max-width:70ch;text-align:center}
.pr-compare .pr-more{text-align:center;margin-top:12px;color:var(--muted);font-size:.9rem}
.pr-compare .pr-more a{color:var(--navy);font-weight:600}
.pr-worth{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line)}
.pr-worth .lede{margin-top:12px;max-width:44em}
.pw{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,32px)}
.pw__stats{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
@media (min-width:640px){.pw__stats{grid-template-columns:repeat(3,1fr)}}
.pw__stats li{background:var(--paper);border-radius:12px;padding:14px 16px}
.pw__stats b{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,1.9rem);font-weight:700;line-height:1.1}
.pw__stats span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
.pw__rows{display:grid;gap:18px}
.pw__row{display:grid;gap:8px 18px;align-items:center}
@media (min-width:800px){.pw__row{grid-template-columns:220px minmax(0,1fr) 110px}}
.pw__lbl{font-family:var(--display);font-weight:600;font-size:1.05rem}
.pw__lbl small{display:block;font-family:var(--body-font);font-weight:400;color:var(--muted);font-size:.84rem;margin-top:2px}
.pw__bars{display:grid;gap:6px}
.pw__bar{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;align-items:center;font-size:.82rem;color:var(--muted)}
.pw__bar i{display:block;height:14px;border-radius:7px;background:var(--teal-soft)}
.pw__bar i.cost{background:var(--ink)}
.pw__bar i.value{background:var(--navy)}
.pw__row--ours .pw__bar i.value{background:var(--accent)}
.pw__x{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1.1}
.pw__x small{display:block;font-family:var(--body-font);font-size:.78rem;font-weight:400;color:var(--muted)}
.pw__disc{margin-top:18px;font-size:.88rem;color:var(--muted);max-width:64em}
.pw__how{margin-top:12px;font-size:.88rem;color:var(--muted)}
.pw__how summary{cursor:pointer;font-weight:600;color:var(--navy)}
.pw__how ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px}
.pr-calc{padding:clamp(40px,6vw,84px) 0;border-top:1px solid var(--line);background:#fff}
.pr-calc .lede{margin-top:12px;max-width:40em}
.pr-calc__open{margin-top:18px}
#calc-board[hidden]{display:none}
#calc-board .btn-row{justify-content:flex-start!important;margin:22px 0 18px!important}
html.v2 .calc{display:grid;gap:22px;margin:0}
@media (min-width:900px){html.v2 .calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}}
html.v2 .calc__inputs{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px}
html.v2 .calc__inputs .field{margin-bottom:18px}
html.v2 .calc__inputs .field:last-child{margin-bottom:0}
html.v2 .calc__inputs label{font-weight:600;font-size:.95rem;color:var(--ink)}
html.v2 .calc__inputs .val{font-family:var(--display);color:var(--navy);font-weight:700}
html.v2 .calc__inputs input[type=range]{accent-color:var(--navy)}
html.v2 .calc__inputs .hint{color:var(--muted);font-size:.84rem;margin-top:4px}
html.v2 .calc__out{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
html.v2 .calc__lbl{display:block;font-family:var(--body-font);font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:600}
html.v2 .calc__head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
html.v2 .calc__head b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;margin:2px 0 4px}
html.v2 .calc__head p{font-size:.84rem;color:var(--muted);margin:0}
html.v2 .calc__big{font-family:var(--display);font-size:clamp(2rem,4vw,2.8rem);font-weight:700;line-height:1.05;margin:2px 0 12px;color:var(--ink)}
html.v2 .calc__head b{color:var(--navy)}
html.v2 .calc__rows{display:grid}
html.v2 .calc__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
html.v2 .calc__row b{color:var(--ink);font-weight:600;white-space:nowrap}
html.v2 .calc__row--tot{color:var(--ink);font-weight:700}
html.v2 .calc__row--tot b{font-weight:700}
html.v2 .calc__disc{font-size:.84rem;color:var(--muted);margin-top:14px}
html.v2 .calc__how{margin-top:10px;font-size:.88rem;color:var(--muted)}
html.v2 .calc__how summary{cursor:pointer;color:var(--navy);font-weight:600}
html.v2 .calc__how ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px}
html.v2 .calc__how p{margin-top:10px}
html.v2 .tier__list li strong{font-weight:400;color:inherit;}
/* every line, side by side: the matrix on phones. The real table, reflowed as a grid: every plan in view
   at once, the feature on its own line, the plan header sticky under the site header. The tabbed list
   the script also draws stays hidden. */
@media (max-width:759px){
  html.v2 .cmp-mobile{display:none;}
  html.v2 .tblwrap--matrix{display:block;overflow:visible;border:0;border-radius:0;background:transparent;margin-top:18px;}
  html.v2 table.cmp.cmp--matrix{min-width:0;width:100%;display:block;}
  html.v2 table.cmp--matrix thead,html.v2 table.cmp--matrix tbody,html.v2 table.cmp--matrix tfoot{display:block;}
  html.v2 table.cmp--matrix tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;}
  html.v2 table.cmp--matrix thead{position:sticky;top:66px;z-index:2;}
  html.v2 table.cmp--matrix thead th:first-child{display:none;}
  html.v2 table.cmp--matrix thead th{width:auto;padding:10px 4px 8px;text-align:center;background:var(--ink);color:#fff;}
  html.v2 table.cmp--matrix thead th:nth-child(2){border-radius:12px 0 0 12px;}
  html.v2 table.cmp--matrix thead th:last-child{border-radius:0 12px 12px 0;}
  html.v2 table.cmp--matrix thead .cmp-plan{font-size:.95rem;}
  html.v2 table.cmp--matrix thead th small{font-size:.74rem;}
  html.v2 table.cmp--matrix tbody tr.group th{grid-column:1/-1;height:auto;padding:22px 0 6px;background:transparent;border-bottom:1px solid var(--ink);font-size:1rem;}
  html.v2 table.cmp--matrix tbody tr:not(.group){border-bottom:1px solid var(--line);padding:10px 0 8px;}
  html.v2 table.cmp--matrix tbody th{grid-column:1/-1;height:auto;padding:0 0 6px;white-space:normal;overflow:visible;text-overflow:clip;font-weight:600;font-size:.95rem;}
  html.v2 table.cmp--matrix tbody th small{white-space:normal;overflow:visible;text-overflow:clip;font-size:.78rem;}
  html.v2 table.cmp.cmp--matrix tbody td{height:auto;padding:6px 4px 2px;font-size:.8rem;line-height:1.3;border-bottom:0;}
  html.v2 table.cmp--matrix td.yes,html.v2 table.cmp--matrix td.no{font-size:1rem;}
  html.v2 table.cmp.cmp--matrix tbody td span[style]{font-size:.78rem!important;}
  html.v2 table.cmp--matrix tbody tr:not(.group):hover th,html.v2 table.cmp--matrix tbody tr:not(.group):hover td{background:transparent;}
  html.v2 table.cmp.cmp--matrix tfoot{padding-top:14px;}
  html.v2 table.cmp.cmp--matrix tfoot td{grid-column:1/-1;padding:5px 0;background:transparent;border:0;}
  html.v2 table.cmp.cmp--matrix tfoot td:first-child{display:none;}
  html.v2 table.cmp.cmp--matrix tfoot .btn{min-height:44px;padding:10px 14px;}
}
/* ============================================================ the coming-soon page (host Layout, class added by site.js) */
html.v2-pre main.app{width:min(1140px,calc(100% - 2*clamp(18px,5vw,34px)));margin:clamp(40px,6vw,84px) auto clamp(40px,6vw,84px);min-height:0;}
html.v2-pre main.app h1{font-size:clamp(2.3rem,4.8vw,3.7rem);font-weight:700;margin:0;}
html.v2-pre main.app .lede{margin:16px auto 0;max-width:36em;}
html.v2-pre main.app p{margin:0 0 14px;}
html.v2-pre main.app .cd{font-family:var(--display);font-size:clamp(2rem,5vw,2.8rem);font-weight:700;min-width:clamp(62px,16vw,86px);padding:12px 8px;background:var(--ink);color:#fff;border-radius:14px;line-height:1.1;}
html.v2-pre main.app .cdl{font-family:var(--body-font);font-size:.84rem;color:var(--muted);margin-top:8px;text-transform:none;letter-spacing:0;}
html.v2-pre main.app .panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,32px);margin:28px auto 0;box-shadow:0 18px 50px rgba(22,52,60,.08);}
html.v2-pre main.app .panel h2{font-size:1.35rem;font-weight:600;margin:0 0 10px;}
html.v2-pre main.app .panel p{color:var(--muted);}
html.v2-pre main.app form .row{margin:0 0 14px;}
html.v2-pre main.app label.f{font-family:var(--body-font);font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
html.v2-pre main.app input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--body-font);font-size:.95rem;color:var(--ink);}
html.v2-pre main.app input:focus{border-color:var(--navy);outline:2px solid var(--navy);outline-offset:2px;}
html.v2-pre main.app .err{color:#A33600;font-size:.88rem;font-weight:600;margin:0 0 10px;}
html.v2-pre main.app .err:empty{display:none;}
html.v2-pre main.app button{padding:13px 22px;border:2px solid transparent;border-radius:10px;background:var(--accent);color:var(--ink);font-family:var(--body-font);font-size:1rem;font-weight:700;cursor:pointer;}
html.v2-pre main.app button:hover,html.v2-pre main.app button:focus-visible{background:#F27716;color:var(--ink);}
html.v2-pre main.app button:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
html.v2-pre main.app .muted{font-size:.95rem;color:var(--muted);}
html.v2-pre main.app .muted a{color:var(--navy);font-weight:600;}
@media (max-width:559px){html.v2-pre main.app button{width:100%;}}
/* ============================================================ the legal pages (ours, and the host's EULA, which gets the class
   from site.js): the system's type and shell, the content's own measure and headings */
html.v2 .legal p{margin:0 0 1rem;}
html.v2 .legal h2{font-size:1.25rem;font-weight:600;}
html.v2 .legal h3{font-size:1.05rem;font-weight:600;}
html.v2 .legal .sec-head{margin-bottom:22px;}
html.v2 .legal .lede{margin-top:12px;}
html.v2 .legal .stamp{color:var(--muted);opacity:1;}
html.v2 .legal a{color:var(--navy);font-weight:600;}
html.v2 .legal th,html.v2 .legal td{border-color:var(--line);}
html.v2 .legal thead th{background:var(--paper);font-weight:600;}
/* ============================================================ the host's Layout pages (account, signup, blog), class from site.js:
   the shell is the site's; the Layout's own classes are dressed here. Its markup and scripts stay the host's. */
html.v2-app main.app{width:min(1140px,calc(100% - 2*clamp(18px,5vw,34px)));margin:clamp(32px,5vw,64px) auto clamp(40px,6vw,84px);}
html.v2-app main.app p{margin:0 0 1rem;}
html.v2-app main.app h1{font-size:clamp(1.55rem,2.8vw,2.15rem);font-weight:600;margin:0 0 .5em;}
html.v2-app main.app h2{font-size:1.35rem;font-weight:600;margin:22px 0 10px;}
html.v2-app main.app h3{font-size:1.05rem;font-weight:600;}
html.v2-app main.app p.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--muted);max-width:36em;}
html.v2-app main.app a{color:var(--navy);font-weight:600;}
html.v2-app main.app .panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,2.4vw,26px);margin:16px 0;box-shadow:none;}
html.v2-app main.app button,html.v2-app main.app .btn{padding:10px 18px;border:2px solid var(--navy);background:var(--navy);color:#fff;border-radius:10px;font-family:var(--body-font);font-size:.95rem;font-weight:700;line-height:1.2;}
html.v2-app main.app button:hover,html.v2-app main.app .btn:hover{background:#17505F;border-color:#17505F;color:#fff;}
html.v2-app main.app button.quiet{background:#fff;color:var(--navy);}
html.v2-app main.app button.quiet:hover{background:var(--teal-soft);color:var(--navy);border-color:var(--navy);}
html.v2-app main.app button.warn{background:#A33600;border-color:#A33600;color:#fff;}
html.v2-app main.app button.warn:hover{background:#8A2D00;border-color:#8A2D00;}
html.v2-app main.app button:disabled{opacity:.45;}
html.v2-app main.app button:focus-visible,html.v2-app main.app .btn:focus-visible,html.v2-app main.app input:focus-visible,html.v2-app main.app select:focus-visible,html.v2-app main.app .vmenu a:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
html.v2-app main.app label.f{font-family:var(--body-font);font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
html.v2-app main.app input,html.v2-app main.app select{padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-family:var(--body-font);font-size:.95rem;color:var(--ink);width:min(100%,360px);}
html.v2-app main.app input[type=checkbox],html.v2-app main.app input[type=radio]{width:auto;accent-color:var(--navy);}
html.v2-app main.app input:focus,html.v2-app main.app select:focus{border-color:var(--navy);}
html.v2-app main.app form .row{margin:0 0 14px;}
html.v2-app main.app .err{color:#A33600;font-size:.88rem;font-weight:600;}
html.v2-app main.app .ok{color:#1B6B3A;font-size:.88rem;font-weight:600;}
html.v2-app main.app .muted{color:var(--muted);font-size:.92rem;}
html.v2-app main.app th,html.v2-app main.app td{padding:9px 12px;border-color:var(--line);font-size:.9rem;}
html.v2-app main.app thead th{background:var(--paper);font-weight:600;}
html.v2-app main.app td.yes{color:var(--navy);}
html.v2-app main.app td.no{color:var(--muted);}
html.v2-app main.app .simnote{background:#FFF1E6;border-color:#F3C9A5;border-radius:10px;color:#7A4100;font-size:.84rem;}
html.v2-app main.app .licence{border-radius:10px;}
html.v2-app main.app .licence .req{background:var(--teal-soft);color:var(--navy);border-radius:999px;}
html.v2-app main.app .vmenu{border-radius:14px;padding:8px;}
html.v2-app main.app .vmenu a{border-radius:8px;font-size:.95rem;font-weight:500;}
html.v2-app main.app .vmenu a.on{background:var(--ink);color:#fff;font-weight:600;}
html.v2-app main.app .modal{border-radius:16px;}
html.v2-app main.app .plan{border-radius:14px;border-color:var(--line);padding:20px;}
html.v2-app main.app .plan .price{font-family:var(--display);font-size:1.7rem;font-weight:700;}
html.v2-app main.app .plan .trial{color:var(--navy);}
html.v2-app main.app .blogbody{max-width:72ch;font-size:1.05rem;line-height:1.65;}
html.v2-app main.app .blogbody img{border-radius:12px;}
html.v2-app main.app .blogbody h2,html.v2-app main.app .blogbody h3{margin-top:1.4em;}
html.v2-app main.app #posts .panel h2{margin-top:0;}
html.v2-app main.app #posts .panel h2 a{color:var(--ink);}
html.v2-app main.app #posts .panel h2 a:hover{color:var(--navy);}
/* ============================================================ the menus in the system: the desktop dropdown panel, and
   the phone menu as a clean list with Resources as an accordion row that opens and closes on a tap */
html.v2 .subnav{border-radius:12px;border:1px solid var(--line);box-shadow:0 18px 50px rgba(22,52,60,.12);padding:8px;}
html.v2 .subnav a{border-radius:8px;}
@media (max-width:859px){
  html.v2 .nav{padding:8px 10px 12px;gap:2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0 0 16px 16px;box-shadow:0 18px 40px rgba(22,52,60,.12);}
  html.v2 .nav > a,html.v2 .nav__item > a,html.v2 .nav__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:14px 12px;border-radius:10px;font-size:1.05rem;font-weight:600;color:var(--ink);background:transparent;}
  html.v2 .nav a[aria-current="page"],html.v2 .nav__trigger.is-current{background:var(--teal-soft);color:var(--navy);}
  html.v2 .nav__item > a .caret,html.v2 .nav__trigger .caret{display:inline-block;width:12px;height:12px;margin-left:auto;transition:transform .18s ease;transform:none;}
  html.v2 .nav__item:not(.open) > a .caret,html.v2 .nav__item:not(.open) > .nav__trigger .caret{transform:none;}
  html.v2 .nav__item.open > a .caret,html.v2 .nav__item.open > .nav__trigger .caret{transform:rotate(180deg);}
  html.v2 .nav__item .subnav{display:none;position:static;visibility:visible;opacity:1;transform:none;transition:none;margin:0 0 4px 12px;padding:2px 0 4px 12px;border:0;border-left:2px solid var(--line);border-radius:0;box-shadow:none;background:transparent;min-width:0;}
  html.v2 .nav__item.open .subnav{display:block;}
  html.v2 .subnav a{display:block;padding:11px 12px;font-size:.98rem;font-weight:500;border-radius:8px;color:var(--ink);}
  html.v2 .subnav a[aria-current="page"]{background:var(--teal-soft);color:var(--navy);}
  html.v2 .subnav b{font-weight:inherit;}
  html.v2 .subnav span{display:none;}
  html.v2 .nav-toggle:focus-visible,html.v2 .nav a:focus-visible,html.v2 .nav__trigger:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){html.v2 .nav__trigger .caret,html.v2 .nav__item > a .caret{transition:none;}}
}
/* two modes, one plan: the drawings keep their desktop layout at every width and scale to fit the column
   (the script on the page sets the scale and the box height; the padding leaves room for the shadow) */
html.v2 .pd-fit{position:relative;overflow:hidden;padding:0 16px 60px;margin:0 -16px -60px;box-sizing:border-box;}
html.v2 .pd-fit .pd-app{width:690px;min-height:604px;transform-origin:top left;}
html.v2 .pd-fit .pd-cm{grid-template-columns:minmax(0,1fr) minmax(0,.95fr);}
html.v2 .pd-fit .pd-cm__chat{border-bottom:0;border-right:1px solid var(--line);}
html.v2 .pd-fit .pd-dm{grid-template-columns:160px minmax(0,1fr);}
html.v2 .pd-fit .pd-dm__tree{display:block;}
html.v2 .pd-fit .pd-dm__tbl{display:table;overflow:visible;}
html.v2 .pd-fit .pd-calc pre{white-space:pre;overflow-wrap:normal;overflow:visible;}
/* ============================================================ the mode switch: a two-position switch with a thumb that slides
   to the chosen side, drawn the same way in the app bar of every drawing (the hero flips it on its own) and in the section's
   control, so the switch you see in the product is the one you use. Hovering the other side nudges the thumb toward it. */
html.v2 .pd-app__modes,html.v2 .pd-seg{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:1fr 1fr;}
html.v2 .pd-app__modes{--pad:2px;}
html.v2 .pd-seg{--pad:3px;}
html.v2 .pd-app__modes::before,html.v2 .pd-seg::before{content:"";position:absolute;z-index:-1;top:var(--pad);bottom:var(--pad);left:var(--pad);width:calc(50% - var(--pad));border-radius:999px;background:var(--ink);transition:transform .4s cubic-bezier(.3,.8,.3,1);}
html.v2 .pd-app__modes--dm::before,html.v2 .pd-loop[data-mode="dm"] .pd-app__modes::before,html.v2 .pd-seg.is-dm::before{transform:translateX(100%);}
html.v2 .pd-app__modes span,html.v2 .pd-seg button{text-align:center;transition:color .3s ease;}
html.v2 .pd-app__modes span.on,html.v2 .pd-seg button[aria-selected="true"],
html.v2 .pd-loop[data-mode="cm"] .pd-app__modes span:first-child,html.v2 .pd-loop[data-mode="dm"] .pd-app__modes span:last-child{background:transparent;color:#fff;}
html.v2 .pd-seg button[aria-selected="false"]:hover{color:var(--ink);}
@media (hover:hover){
  html.v2 .pd-seg:not(.is-dm):has(button:last-child:hover)::before{transform:translateX(8px);}
  html.v2 .pd-seg.is-dm:has(button:first-child:hover)::before{transform:translateX(calc(100% - 8px));}
}
@media (prefers-reduced-motion:reduce){html.v2 .pd-app__modes::before,html.v2 .pd-seg::before,html.v2 .pd-app__modes span,html.v2 .pd-seg button{transition:none;}}
html.v2 .pd-seg button{white-space:nowrap;}
@media (max-width:480px){
  html.v2 .pd-seg{width:100%;}
  html.v2 .pd-seg button{padding:9px 10px;font-size:.95rem;}
}
/* ============================================================ the community bookmark: a tab fixed at the lower right of
   every page, leading to the Discord server; it fades out while the footer is in view so it never covers the footer's links */
html.v2 .cm-tab{position:fixed;right:24px;bottom:28px;z-index:90;display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--body-font);font-size:.86rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;box-shadow:0 10px 30px rgba(22,52,60,.28);transition:transform .2s ease,box-shadow .2s ease,opacity .25s ease,visibility .25s;}
html.v2 .cm-tab svg{width:20px;height:20px;flex:0 0 auto;}
html.v2 .cm-tab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(22,52,60,.32);color:#fff;}
html.v2 .cm-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
html.v2 .cm-tab.is-off{opacity:0;visibility:hidden;transform:translateY(8px);}
@media (max-width:600px){html.v2 .cm-tab{right:14px;bottom:18px;padding:12px;}html.v2 .cm-tab span{display:none;}}
@media (prefers-reduced-motion:reduce){html.v2 .cm-tab{transition:none;}html.v2 .cm-tab:hover{transform:none;}}
@media print{html.v2 .cm-tab{display:none;}}