/* =========================================================================
   StratGeeks — product system prototype
   Design tokens carried forward unchanged from the approved Stage 2 sheet.
   This stylesheet is written to become the Astra child theme's stylesheet,
   so the CSS here is the deliverable that survives into production.
   ====================================================================== */
:root{
  /* dark world — products, systems, data */
  --d-bg:#06090A; --d-surface:#0C1315; --d-card:#111A1D; --d-raise:#162125;
  --d-line:#1E2A2E; --d-line-2:#2A3A3F;
  --d-text:#E6EEEF; --d-mid:#B3C4C8; --d-muted:#8CA0A5;
  /* light world — the company, the people */
  --l-bg:#EDF2F2; --l-surface:#FFFFFF; --l-card:#F6FAFA;
  --l-line:#D7E0E0; --l-line-2:#BECACA;
  --l-text:#0B1113; --l-mid:#39474A; --l-muted:#5C6C6F;
  /* parent brand */
  --sg-green:#46CC33; --sg-blue:#12A8C8;
  --discord:#5865F2;
  --sg-grad:linear-gradient(100deg,#46CC33,#12A8C8);
  /* product identity */
  --p-ors:#17B5B0; --p-axios:#DDE7E9; --p-echo:#2FD3F0; --p-recon:#7CC93F; --p-prism:#6B4FE0;
  /* state */
  --s-up:#3FC787; --s-warn:#E0AC57; --s-down:#D9695C;

  /* READABILITY FLOORS — nothing on the site goes below these.
     Set as tokens so the rule is enforceable, not a matter of taste. */
  --fs-micro:12px;   /* smallest permitted text anywhere: mono labels */
  --fs-small:14px;   /* captions, footnotes */
  --fs-body:17px;    /* default reading size */
  --fs-lead:19px;    /* section intros */
  --measure:68ch;    /* max line length for reading text */
  --tap:44px;        /* minimum touch target */
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--d-bg);color:var(--d-text);
  font-family:"Chivo","Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-body);line-height:1.62;-webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--p-echo);outline-offset:3px;border-radius:3px}

.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.mono{font-family:"IBM Plex Mono",monospace}
.voice{font-family:"Newsreader",Georgia,serif}

/* ---------- prototype banner ---------- */
.protobar{background:#1B1405;border-bottom:1px solid #3A2E10;color:#E0AC57;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;padding:9px 22px;text-align:center}

/* ---------- header ---------- */
header.site{background:var(--d-bg);border-bottom:1px solid var(--d-line);position:relative;z-index:40}
.hdr{display:flex;align-items:center;gap:18px;min-height:68px}
.hdr .logo{flex:0 0 auto;display:flex;align-items:center;min-height:var(--tap)}
.hdr .logo img{height:30px;display:block}
.nav{display:none;gap:4px;flex:1 1 auto;align-items:center}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 12px;white-space:nowrap;
  font-size:15px;font-weight:600;color:var(--d-mid);text-decoration:none;border-radius:5px;letter-spacing:-.004em}
.nav a:hover{color:var(--d-text);background:rgba(255,255,255,.04)}
.nav a[aria-current="page"]{color:var(--d-text)}
.nav a[aria-current="page"]::after{content:"";position:absolute;bottom:-1px;left:12px;right:12px;height:2px;background:var(--p-echo)}
.nav .has-dd{position:relative}
.hdr .cta{display:none;gap:10px;flex:0 0 auto;align-items:center}
.burger{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);background:transparent;border:1px solid var(--d-line-2);
  border-radius:6px;color:var(--d-text);cursor:pointer;
  /* Astra styles every <button> with padding:12px 24px. On a border-box button
     fixed at 44px wide that is 48px of horizontal padding, which collapses the
     content box to zero and clips the icon out of existence. The icon centres
     itself with flex, so it wants no padding at all. */
  padding:0;line-height:0}
/* and the icon never shrinks, whatever padding arrives from elsewhere */
.burger svg{width:20px;height:20px;flex:none}
@media(min-width:1160px){
  .nav{display:flex}
  .hdr .cta{display:flex}
  .burger{display:none}
}
@media(min-width:1160px) and (max-width:1320px){
  .hdr{gap:10px}
  .nav a{padding:0 9px;font-size:14.5px}
  .hdr .cta{gap:7px}
}

/* dropdown */
.dd{position:absolute;top:100%;left:0;min-width:min(94vw,600px);background:var(--d-surface);
  border:1px solid var(--d-line);border-radius:0 0 10px 10px;padding:20px;display:none;
  grid-template-columns:1fr;gap:18px;box-shadow:0 24px 50px -28px #000}
@media(min-width:700px){.dd{grid-template-columns:1.6fr 1fr}}
.has-dd:hover .dd,.has-dd:focus-within .dd{display:grid}
.dd h5{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted);margin:0 0 10px;font-weight:400}
.ddrow{display:flex;gap:11px;align-items:flex-start;padding:9px 8px;border-radius:6px;
  text-decoration:none;min-height:var(--tap)}
.ddrow:hover{background:rgba(255,255,255,.04)}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:7px}
.ddname{font-size:15px;font-weight:700;color:var(--d-text);letter-spacing:-.008em;display:block}
.dddesc{font-size:13.5px;color:var(--d-muted);font-weight:400;display:block;line-height:1.45}
.soon{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--s-warn);border:1px solid rgba(224,172,87,.42);padding:2px 6px;border-radius:4px;
  margin-left:8px;white-space:nowrap;vertical-align:1px}
.ddfoot{grid-column:1/-1;border-top:1px solid var(--d-line);padding-top:13px;
  font-size:14.5px;color:var(--p-echo);font-weight:700;text-decoration:none}
/* the Suite, given its own section of the dropdown */
.ddsuite{grid-column:1/-1;margin-top:4px;border-top:1px solid var(--d-line);padding-top:18px}
.ddsuite .inner{position:relative;overflow:hidden;border:1px solid var(--d-line-2);border-radius:11px;
  background:var(--d-raise);padding:18px 18px 16px;display:flex;flex-wrap:wrap;gap:14px 22px;
  align-items:center}
.ddsuite .inner::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--sg-grad)}
.ddsuite .txt{flex:1 1 260px;min-width:0}
.ddsuite .dsk{display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--p-echo);margin-bottom:8px}
.ddsuite .dsh{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--d-text);
  line-height:1.2;margin-bottom:6px}
.ddsuite .dsd{display:block;font-size:14px;color:var(--d-muted);line-height:1.5}
.ddsuite .dsgo{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);
  padding:0 18px;flex:0 0 auto;border:1px solid var(--p-echo);border-radius:8px;color:var(--p-echo);
  font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap}
.ddsuite .dsgo:hover{background:rgba(47,211,240,.10)}

/* mobile menu */
.mobile{display:none;border-top:1px solid var(--d-line);background:var(--d-surface);padding:10px 0 18px}
.mobile.open{display:block}
@media(min-width:1000px){.mobile,.mobile.open{display:none}}
.mobile a{display:flex;align-items:center;min-height:var(--tap);padding:0 22px;
  color:var(--d-mid);text-decoration:none;font-weight:600;font-size:16px}
.mobile a.sub{padding-left:36px;font-weight:400;color:var(--d-muted);font-size:15px}
.mobile a:hover{color:var(--d-text);background:rgba(255,255,255,.04)}
.mobile .mgroup{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted);padding:16px 22px 6px}
.mobile .mtop{display:flex;gap:10px;flex-wrap:wrap;padding:0 0 14px;margin-bottom:12px;
  border-bottom:1px solid var(--d-line)}
.mcta{padding:14px 22px 0;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{font-family:"Chivo",sans-serif;font-weight:700;font-size:15px;letter-spacing:-.004em;
  min-height:var(--tap);padding:0 20px;border-radius:6px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s ease}
.btn-primary{background:var(--p-echo);color:#04191E;border-color:var(--p-echo)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--d-text);border-color:var(--d-line-2)}
.btn-ghost:hover{border-color:var(--d-mid);background:rgba(255,255,255,.04)}
.btn-quiet{background:transparent;color:var(--d-mid);border-color:transparent;padding:0 10px}
.btn-quiet:hover{color:var(--d-text)}
.btn-brand{background:var(--sg-grad);color:#04160A;border:0;font-weight:900}
.btn-dark{background:#0B1113;color:#fff;border-color:#0B1113}
.btn-lightghost{background:transparent;color:var(--l-text);border-color:var(--l-line-2)}

/* ---------- generic section ---------- */
.sec{padding:clamp(48px,7vw,86px) 0}
.sec.light{background:var(--l-bg);color:var(--l-text)}
.sec.surface{background:var(--d-surface)}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:clamp(14px,1.15vw,17px);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--p-echo);margin:0 0 20px;line-height:1.3}
.sec.light .eyebrow{color:#1F8F16}
h1.big{font-weight:900;font-size:clamp(34px,5.6vw,60px);line-height:1.04;letter-spacing:-.032em;margin:0 0 20px;text-wrap:balance}
h2.sec-t{font-weight:700;font-size:clamp(26px,3.6vw,40px);line-height:1.12;letter-spacing:-.026em;margin:0 0 16px;text-wrap:balance}
h3.blk{font-weight:700;font-size:clamp(20px,2.4vw,26px);line-height:1.18;letter-spacing:-.018em;margin:0 0 12px}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--d-mid);max-width:var(--measure);margin:0 0 22px}
.sec.light .lead{color:var(--l-mid)}
p{margin:0 0 16px;max-width:var(--measure)}
.muted{color:var(--d-muted)}
.sec.light .muted{color:var(--l-muted)}

/* ---------- product cards ---------- */
.cardgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.cardgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.cardgrid{grid-template-columns:repeat(3,1fr)}}
/* four items must never leave one orphan on a second row: 1 / 2x2 / 4 */
@media(min-width:900px){.cardgrid.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.cardgrid.four{grid-template-columns:repeat(4,1fr)}}
/* a single card should not stretch the full content width */
.cardgrid.one{grid-template-columns:1fr;max-width:390px}
.pcard{background:var(--d-card);border:1px solid var(--d-line);border-radius:11px;
  padding:22px 20px 18px;display:flex;flex-direction:column;gap:14px;position:relative;
  overflow:hidden;text-decoration:none;transition:.18s ease}
.pcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.pcard::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--acc)}
.pcard .mk{height:62px;display:flex;align-items:center}
.pcard .mk img{max-height:62px;max-width:82%;object-fit:contain}
.pcard .role{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc)}
.pcard .desc{color:var(--d-mid);font-size:15.5px;line-height:1.5;flex:1 1 auto;margin:0}
.pcard .cfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--d-line);padding-top:14px;min-height:var(--tap)}
.status{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--d-muted)}
.status.live{color:var(--s-up)}
.status.soonst{color:var(--s-warn)}
.go{font-size:14.5px;font-weight:700;color:var(--d-text)}

/* ---------- find your system ---------- */
.routes{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.routes{grid-template-columns:repeat(2,1fr)}}
.route{background:var(--d-card);border:1px solid var(--d-line);border-radius:10px;padding:20px;
  display:flex;gap:16px;align-items:flex-start;text-decoration:none;transition:.16s}
.route:hover{border-color:var(--d-line-2)}
.route .swatch{width:4px;align-self:stretch;border-radius:3px;background:var(--acc);flex:0 0 auto}
.route .q{font-size:16.5px;font-weight:700;margin:0 0 6px;letter-spacing:-.008em}
.route .a{font-size:15px;color:var(--d-muted);margin:0;line-height:1.5}
.route .a b{color:var(--acc);font-weight:700}

/* ---------- compare table ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--d-line);border-radius:10px;background:var(--d-card)}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
table.cmp th,table.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--d-line)}
table.cmp thead th{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-muted);font-weight:500;white-space:nowrap;
  border-bottom:1px solid var(--d-line-2);background:var(--d-surface);position:sticky;top:0}
table.cmp tbody th{font-weight:600;color:var(--d-mid);font-size:14.5px;white-space:nowrap;width:190px}
table.cmp td{color:var(--d-mid)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
.cmp .prodhead{display:flex;align-items:center;gap:8px;font-family:"Chivo",sans-serif;
  font-size:15px;font-weight:700;color:var(--d-text);letter-spacing:-.01em;text-transform:none}
.na{color:#63767A}

/* ---------- product hero ---------- */
.phero{padding:clamp(40px,6vw,74px) 0 clamp(34px,5vw,58px);border-bottom:1px solid var(--d-line);
  background:radial-gradient(120% 150% at 78% 0%,rgba(47,211,240,.10),transparent 62%)}
.phero .inner{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:900px){.phero .inner{grid-template-columns:1.05fr .95fr;gap:52px}}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.badge{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:5px;border:1px solid var(--d-line-2);color:var(--d-mid)}
.badge.kind{border-color:var(--acc);color:var(--acc)}
.badge.avail{border-color:rgba(63,199,135,.4);color:var(--s-up)}
.badge.pending{border-color:rgba(224,172,87,.42);color:var(--s-warn)}
.phero .markbox{background:var(--d-card);border:1px solid var(--d-line);border-radius:14px;
  padding:36px 30px;display:flex;align-items:center;justify-content:center;min-height:210px}
.phero .markbox img{max-height:150px;max-width:100%;object-fit:contain}

/* ---------- spec blocks ---------- */
.two{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:48px}}
.featlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--d-line);border:1px solid var(--d-line);border-radius:10px;overflow:hidden}
@media(min-width:760px){.featlist{grid-template-columns:1fr 1fr}}
.featlist li{background:var(--d-card);padding:20px}
.featlist .ft{font-weight:700;font-size:16.5px;margin:0 0 7px;letter-spacing:-.01em}
.featlist .fb{margin:0;font-size:15px;color:var(--d-muted);line-height:1.55;max-width:none}
.chiplist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chiplist li{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--d-mid);
  background:var(--d-surface);border:1px solid var(--d-line);border-radius:20px;padding:7px 13px}
.forwho{display:grid;grid-template-columns:1fr;gap:1px;background:var(--d-line);
  border:1px solid var(--d-line);border-radius:10px;overflow:hidden}
@media(min-width:700px){.forwho{grid-template-columns:1fr 1fr}}
.forwho div{background:var(--d-card);padding:20px}
.forwho .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-muted);margin-bottom:8px}
.forwho .v{font-size:15.5px;color:var(--d-mid);line-height:1.55}

/* ---------- evidence placeholder ---------- */

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:760px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{background:var(--d-card);border:1px solid var(--d-line);border-radius:11px;padding:24px 22px;
  display:flex;flex-direction:column;gap:14px}
.plan.feature{border-color:var(--acc)}
.plan .term{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted)}
.plan .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan .amt{font-family:"IBM Plex Mono",monospace;font-size:34px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--d-text);line-height:1}
.plan .per{font-size:15px;color:var(--d-muted)}
.plan .was{font-family:"IBM Plex Mono",monospace;font-size:14px;color:#63767A;text-decoration:line-through}
.plan .note{font-size:15px;color:var(--d-muted);margin:0;flex:1 1 auto;line-height:1.5}
.plan .btn{width:100%}

/* ---------- step rail ---------- */
.steps4{display:grid;grid-template-columns:1fr;gap:24px;margin-top:30px}
@media(min-width:640px){.steps4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps4{grid-template-columns:repeat(4,1fr)}}
.st{border-top:2px solid var(--sg-green);padding-top:15px}
.st .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--l-muted);margin-bottom:7px}
.st .h{font-weight:700;font-size:17px;margin-bottom:6px;letter-spacing:-.01em}
.st .b{font-size:15.5px;color:var(--l-mid);line-height:1.55;margin:0}

/* ---------- faq ---------- */
.faq{border:1px solid var(--d-line);border-radius:10px;overflow:hidden;background:var(--d-card)}
.faq details{border-bottom:1px solid var(--d-line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:700;font-size:16.5px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:var(--tap)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--d-muted);font-size:20px}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 20px 20px;color:var(--d-muted);font-size:15.5px;line-height:1.6}
.faq .ans p{max-width:var(--measure);margin:0}

/* ---------- coming soon ---------- */
.csnote{background:var(--d-card);border:1px solid rgba(224,172,87,.3);border-left:3px solid var(--s-warn);
  border-radius:0 10px 10px 0;padding:22px}
.csnote .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--s-warn);margin-bottom:10px}
.csnote p{margin:0;color:var(--d-mid);font-size:16px}

/* ---------- footer ---------- */
footer.site{background:var(--d-surface);border-top:1px solid var(--d-line);padding:48px 0 30px}
.fgrid{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:640px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.fgrid{grid-template-columns:1.25fr .95fr .95fr .95fr .95fr}}
.fcol h6{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted);margin:0 0 14px;font-weight:400}
.fcol a{display:flex;align-items:center;min-height:var(--tap);color:var(--d-mid);text-decoration:none;font-size:15px}
.fcol a:hover{color:var(--d-text)}
.fbrand img{height:30px;margin-bottom:14px}
.fbrand p{font-size:15px;color:var(--d-muted);max-width:34ch}
.risk{border-top:1px solid var(--d-line);margin-top:36px;padding-top:22px}
.risk .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--s-warn);margin-bottom:10px}
.risk p{font-size:var(--fs-small);color:var(--d-muted);line-height:1.6;max-width:none}
.ytbtn{display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);border-radius:8px;color:var(--d-mid);
  text-decoration:none;flex:0 0 auto;transition:color .15s,background .15s}
.ytbtn svg{width:23px;height:17px;fill:currentColor}
.ytbtn:hover{color:var(--d-text);background:var(--d-surface)}
.fsocial{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.fsocial a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);
  font-size:15px;color:var(--d-mid);text-decoration:none}
.fsocial a:hover{color:var(--d-text)}
.fsocial svg{width:18px;height:13px;fill:currentColor}
.legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:20px;padding-top:18px;border-top:1px solid var(--d-line)}
.legal a,.legal span{font-size:var(--fs-small);color:var(--d-muted);text-decoration:none;min-height:var(--tap);display:flex;align-items:center}


/* ---------- system rail: the five marks presented as one connected thing ---------- */
.ecorail{position:relative;margin:0;padding:0;list-style:none}
.ecorail::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,var(--p-ors),var(--p-axios),var(--p-echo),var(--p-recon),var(--p-prism));
  opacity:.55;border-radius:2px}
.ecorail li{position:relative;padding:0 0 26px 34px}
.ecorail li:last-child{padding-bottom:0}
.ecorail .node{position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:var(--d-bg);border:3px solid var(--acc);box-sizing:border-box}
.ecorail .nm{font-weight:700;font-size:17px;letter-spacing:-.01em;display:block;margin-bottom:3px}
.ecorail .nm .kind{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-left:10px;font-weight:400}
.ecorail .reads{margin:0;color:var(--d-mid);font-size:16px;max-width:56ch}
.ecorail .pending{color:var(--d-muted)}
.ecorail li{display:grid;grid-template-columns:1fr;gap:4px}
@media(min-width:820px){.ecorail li{grid-template-columns:1fr 190px;column-gap:24px;align-items:start}
  .ecorail li .go{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center}}
a.nmlink{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:10px;
  border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
a.nmlink:hover{border-bottom-color:var(--acc);color:var(--d-text)}
a.nmlink:focus-visible{outline:2px solid var(--p-echo);outline-offset:3px}
.buylink{display:inline-flex;align-items:center;min-height:var(--tap);gap:6px;white-space:nowrap;
  font-size:15px;font-weight:600;text-decoration:none;color:var(--p-echo)}
.buylink:hover{text-decoration:underline}
.buylink.quiet{color:var(--d-muted);font-weight:500}
.sysstrip .go{font-size:15px;font-weight:600;color:var(--p-echo);white-space:nowrap}
@media(min-width:720px){.sysstrip .go{text-align:right}}
.sysstrip .go.quiet{color:var(--d-muted);font-weight:500}
.ecoclose{margin-top:30px;padding-top:22px;border-top:1px solid var(--d-line);
  font-family:"Newsreader",Georgia,serif;font-size:20px;line-height:1.55;color:var(--d-text);max-width:58ch}

/* ---------- two ways in ---------- */
.ways{display:grid;grid-template-columns:1fr;gap:16px;margin-top:6px}
@media(min-width:860px){.ways{grid-template-columns:1fr 1fr}}
.way{background:var(--d-card);border:1px solid var(--d-line);border-radius:12px;padding:26px 24px;
  display:flex;flex-direction:column;gap:14px}
.way.eco{border-color:var(--d-line-2);background:
  linear-gradient(180deg,rgba(47,211,240,.05),transparent 45%),var(--d-card)}
.way .wk{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted)}
.way h3{font-size:22px;font-weight:700;letter-spacing:-.018em;margin:0;line-height:1.2}
.way .wd{color:var(--d-mid);font-size:16px;margin:0;flex:1 1 auto}
.way .opts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--d-line);border:1px solid var(--d-line);border-radius:8px;overflow:hidden}
.way .opts li{background:var(--d-surface);padding:13px 15px;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;flex-wrap:wrap}
.way .opts .ol{font-size:15px;color:var(--d-mid)}
.way .opts .op{font-family:"IBM Plex Mono",monospace;font-size:16px;color:var(--d-text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.way .covers{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.way .cchip{display:inline-flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-micro);letter-spacing:.06em;color:var(--d-mid);
  border:1px solid var(--d-line-2);border-radius:20px;padding:5px 11px}
.way .cchip i{width:7px;height:7px;border-radius:50%;display:block;font-style:normal}
.notyet{font-size:var(--fs-small);color:var(--d-muted);margin:14px 0 0;max-width:none}



/* ---------- THE SUITE — the primary moment on the page ---------- */
.suite{background:
   radial-gradient(120% 140% at 15% 0%, rgba(47,211,240,.10), transparent 58%),
   radial-gradient(110% 130% at 88% 100%, rgba(107,79,224,.09), transparent 60%),
   var(--d-surface);
  border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line)}
.suite .grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media(min-width:960px){.suite .grid{grid-template-columns:1fr 1.05fr;gap:52px}}
.suite h2{font-weight:900;font-size:clamp(30px,4.4vw,48px);line-height:1.06;
  letter-spacing:-.03em;margin:0 0 16px;text-wrap:balance}
.suite .sub{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--d-mid);
  max-width:46ch;margin:0 0 24px}
.suite .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* the marks as ONE object, not five tiles */
.suiteset{border:1px solid var(--d-line-2);border-radius:14px;background:var(--d-card);overflow:hidden}
.suiteset .top{display:grid;grid-template-columns:repeat(3,1fr)}
.suiteset .bot{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--d-line)}
.suiteset .cell{padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;
  border-right:1px solid var(--d-line);min-height:118px;justify-content:center}
.suiteset .top .cell:last-child,.suiteset .bot .cell:last-child{border-right:0}
.suiteset .cell img{max-height:44px;max-width:100%;object-fit:contain}
.suiteset .cell .lb{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted)}
.suiteset .cell.pending img{opacity:.62}
.suiteset .cell.pending .lb{color:var(--s-warn)}
.suiteset .foot{border-top:1px solid var(--d-line);background:var(--d-surface);
  padding:13px 16px;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.06em;color:var(--d-muted);text-align:center}

/* ---------- secondary entry ---------- */
.secondary{border:1px solid var(--d-line);border-radius:12px;background:var(--d-card);
  padding:22px 24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.secondary .txt{flex:1 1 320px}
.secondary h3{font-size:20px;font-weight:700;letter-spacing:-.014em;margin:0 0 6px}
.secondary p{margin:0;color:var(--d-mid);font-size:16px}

.oneline{margin-top:24px;border-top:1px solid var(--d-line);padding-top:18px;
  color:var(--d-mid);font-size:16px;max-width:none}
.oneline b{color:var(--d-text);font-weight:700}
.memberline{margin-top:26px;border-top:1px solid var(--d-line);padding-top:20px;
  font-size:16px;color:var(--d-mid);max-width:none}

/* ---------- membership value: templates first ---------- */
.valwrap{display:grid;gap:16px;margin-top:30px}
.feat{border:1px solid var(--d-line-2);border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,rgba(70,204,51,.09),rgba(18,168,200,.06) 58%,transparent 82%),var(--d-card)}
.feat .fhead{padding:22px 24px 0}
.feat .fk{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sg-green);margin-bottom:9px}
.feat h3{margin:0 0 8px;font-size:clamp(21px,2.5vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.16}
.feat h3.huge{font-weight:900;font-size:clamp(34px,5vw,54px);letter-spacing:-.035em;line-height:1;
  margin:0 0 12px;background:var(--sg-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.feat h3.huge{color:var(--d-text);background:none}}
.feat .fsub{margin:0;color:var(--d-mid);font-size:16.5px;max-width:64ch}
.feat .split{display:grid;grid-template-columns:1fr;gap:0;margin-top:22px;border-top:1px solid var(--d-line)}
@media(min-width:820px){.feat .split{grid-template-columns:1fr 1fr}}
.feat .half{padding:20px 24px 24px}
@media(min-width:820px){.feat .half+.half{border-left:1px solid var(--d-line)}}
@media(max-width:819px){.feat .half+.half{border-top:1px solid var(--d-line)}}
.feat .half h4{margin:0 0 7px;font-size:17px;font-weight:700;letter-spacing:-.012em}
.feat .half p{margin:0;font-size:16px;color:var(--d-mid);line-height:1.55}

.trio{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.trio{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.trio{grid-template-columns:repeat(3,1fr)}}
.vcard{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);padding:22px 24px;
  display:flex;flex-direction:column;gap:9px}
.vcard .fk{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted)}
.vcard h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.016em}
.vcard p{margin:0;font-size:16px;color:var(--d-mid);line-height:1.55;flex:1 1 auto}
.vcard .lk{font-size:15.5px;font-weight:600;color:var(--p-echo);text-decoration:none;
  min-height:var(--tap);display:inline-flex;align-items:center}

/* ---------- what every membership includes ---------- */
.inclcols{display:grid;grid-template-columns:1fr;gap:26px;margin-top:34px}
@media(min-width:1000px){.inclcols{grid-template-columns:repeat(3,1fr);gap:0}}
.icol{padding-top:22px;border-top:2px solid var(--d-line-2)}
@media(min-width:1000px){.icol{padding:22px 30px 0 0}
  .icol+.icol{padding-left:30px;border-left:1px solid var(--d-line);margin-top:0}
  .icol:last-child{padding-right:0}}
.icol .ih{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.icol .n{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  color:var(--d-muted);flex:0 0 auto}
.icol h3{margin:0;font-size:clamp(18px,1.7vw,21px);font-weight:700;letter-spacing:-.018em;line-height:1.2}
.icol ul{margin:0;padding:0;list-style:none}
.icol li{font-size:16.5px;color:var(--d-mid);padding:11px 0;border-bottom:1px solid var(--d-line);
  line-height:1.45}
.icol li:last-child{border-bottom:0}

/* the included session carries a little more weight */
.icol.lead{border-top-color:var(--sg-green)}
.ibox{border:1px solid var(--d-line-2);border-radius:12px;background:var(--d-card);padding:20px 22px}
.ibox .ione{margin:0 0 12px;font-size:17.5px;font-weight:700;color:var(--d-text);
  letter-spacing:-.012em;line-height:1.35;max-width:none}
.ibox .isub{margin:0;font-size:15.5px;color:var(--d-mid);line-height:1.55;max-width:none}

/* ---------- inside the hub ---------- */
.hubgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}
@media(min-width:900px){.hubgrid{grid-template-columns:1.25fr 1fr}}
.panel{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);overflow:hidden}
.panel .ph{padding:16px 20px;border-bottom:1px solid var(--d-line);background:var(--d-surface)}
.panel .ph .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted);margin-bottom:5px}
.panel .ph h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.014em}
.rows{margin:0;padding:0;list-style:none}
.rows li{display:grid;grid-template-columns:1fr;gap:2px;padding:13px 20px;border-bottom:1px solid var(--d-line)}
@media(min-width:560px){.rows li{grid-template-columns:200px 1fr;gap:16px;align-items:baseline}}
.rows li:last-child{border-bottom:0}
.rows .n{font-weight:700;font-size:15.5px;letter-spacing:-.008em}
.rows .d{font-size:15px;color:var(--d-mid);line-height:1.5;margin:0;max-width:none}
.panel .pf{border-top:1px solid var(--d-line);background:var(--d-surface);padding:16px 20px;margin-top:auto}
.panel .pf p{margin:0;font-size:15px;color:var(--d-mid);line-height:1.55;max-width:none}
.panel{display:flex;flex-direction:column}

/* screenshot slots — deliberately empty until real captures exist */
.shots{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
@media(min-width:560px){.shots{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.shots{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.shots.two{grid-template-columns:repeat(2,1fr);max-width:760px}}
.shot{border:1px dashed var(--d-line-2);border-radius:12px;background:var(--d-surface);
  min-height:172px;padding:18px 18px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.shot .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--s-warn)}
.shot .t{font-weight:700;font-size:16px;letter-spacing:-.01em}
.shot p{margin:0;font-size:var(--fs-small);color:var(--d-muted);line-height:1.5;max-width:none}
.shotnote{font-size:var(--fs-small);color:var(--d-muted);margin:16px 0 0;max-width:none}

/* ---------- setup + support (dark) ---------- */
.steps4.dark .st{border-top:2px solid var(--sg-green)}
.steps4.dark .st .k{color:var(--d-muted)}
.steps4.dark .st .b{color:var(--d-mid)}
.steps4.dark .st.inc{border-top-color:var(--p-echo)}
.steps4.dark .st.inc .k{color:var(--p-echo)}
.helpbox{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:24px;margin-top:30px;display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:880px){.helpbox{grid-template-columns:1fr 1fr;gap:36px}}
.helpbox h4{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.014em}
.helpbox p{margin:0;font-size:16px;color:var(--d-mid);line-height:1.55}
.helpbox .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted);margin-bottom:8px}
.helpbox .col+.col{border-top:1px solid var(--d-line);padding-top:20px}
@media(min-width:880px){.helpbox .col+.col{border-top:0;border-left:1px solid var(--d-line);
  padding-top:0;padding-left:36px}}

/* ---------- home hero ---------- */
.hhero{position:relative;overflow:hidden;background:
   radial-gradient(90% 120% at 82% 0%, rgba(18,168,200,.10), transparent 62%),
   radial-gradient(80% 110% at 5% 90%, rgba(70,204,51,.07), transparent 60%),
   var(--d-bg);border-bottom:1px solid var(--d-line);
  padding:clamp(64px,10vw,132px) 0 clamp(60px,9vw,116px)}
.hhero .eyebrow{font-size:clamp(15px,1.25vw,18px);font-weight:600;margin-bottom:24px}
h1.hbig{font-weight:900;font-size:clamp(38px,5.7vw,68px);line-height:1.04;letter-spacing:-.036em;
  margin:0 0 26px;max-width:none;text-wrap:balance}
.hhero .hlead{font-size:clamp(17.5px,1.85vw,21px);line-height:1.6;color:var(--d-mid);
  max-width:58ch;margin:0 0 34px}
.hhero .acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:0}
.hhero .wrap{position:relative;z-index:2}
.heromark{position:absolute;z-index:-1;pointer-events:none;user-select:none;
  left:66%;top:50%;transform:translateY(-50%);
  width:clamp(270px,33vw,468px);height:auto;
  opacity:.15;filter:saturate(.45)}
@media(max-width:1120px){.heromark{left:67%;width:clamp(250px,27vw,360px);opacity:.12}}
@media(max-width:900px){.heromark{display:none}}
.hhero .dline{margin:30px 0 0;font-size:15.5px;color:var(--d-muted)}
.hhero .dline a{color:var(--p-echo);text-decoration:none;font-weight:600;
  display:inline-block;padding:11px 0;line-height:1.45;
  border-bottom:1px solid rgba(47,211,240,.4)}

/* ---------- tenets ---------- */
.tenets{display:grid;grid-template-columns:1fr;gap:1px;margin-top:30px;
  background:var(--d-line);border:1px solid var(--d-line);border-radius:14px;overflow:hidden}
@media(min-width:640px){.tenets{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tenets{grid-template-columns:repeat(3,1fr)}}
.tenet{background:var(--d-card);padding:22px 22px 24px}
.tenet .n{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  color:var(--d-muted);margin-bottom:10px}
.tenet h3{margin:0 0 7px;font-size:18px;font-weight:700;letter-spacing:-.014em}
.tenet p{margin:0;font-size:15.5px;color:var(--d-mid);line-height:1.55;max-width:none}

/* ---------- methodology quote + backtest/live evidence (How We Build) ---------- */
.mquote{margin-top:26px;border-left:2px solid var(--sg-green);padding:4px 0 4px 22px}
.mquote p{font-family:"Newsreader",Georgia,serif;font-size:clamp(19px,2.3vw,23px);line-height:1.5;
  color:var(--d-text);margin:0;max-width:56ch}
.evid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px}
@media(min-width:760px){.evid{grid-template-columns:1fr 1fr}}
.epanel{border:1px dashed var(--d-line-2);border-radius:14px;background:var(--d-surface);
  min-height:230px;padding:20px;display:flex;flex-direction:column}
.epanel .eh{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--d-line);padding-bottom:12px;margin-bottom:auto}
.epanel .et{font-weight:900;font-size:22px;letter-spacing:-.02em}
.epanel .eb{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--s-warn)}
.epanel p{margin:16px 0 0;font-size:var(--fs-small);color:var(--d-muted);line-height:1.5;max-width:none}
.evidnote{margin-top:16px;font-size:var(--fs-small);color:var(--d-muted);max-width:none}
.badge.soonb{color:var(--s-warn);border-color:rgba(224,172,87,.42)}

/* ---------- talk to us ---------- */
.talk{border:1px solid var(--d-line-2);border-radius:16px;padding:30px 30px;
  background:linear-gradient(150deg,rgba(18,168,200,.10),rgba(70,204,51,.06) 60%,transparent 85%),var(--d-card)}
.talk h2{margin:0 0 12px;font-weight:800;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.026em;line-height:1.14}
.talk p{margin:0 0 20px;font-size:17px;color:var(--d-mid);max-width:60ch}
.talk .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- ask strip, reusable across pages ---------- */
.askstrip{border:1px solid var(--d-line);border-radius:12px;background:var(--d-card);
  padding:18px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:30px}
.askstrip .t{flex:1 1 300px;font-size:16.5px;color:var(--d-mid);margin:0}
.askstrip .t b{color:var(--d-text);font-weight:700}

/* ---------- final cta ---------- */
.finalgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px}
@media(min-width:860px){.finalgrid{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.fcard{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);padding:24px;
  display:flex;flex-direction:column;gap:10px;height:100%}
.fcard.lead{border-color:var(--d-line-2);
  background:linear-gradient(150deg,rgba(47,211,240,.10),rgba(107,79,224,.06) 60%,transparent 84%),var(--d-card)}
.fcard h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.016em}
.fcard .facts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.fcard p{margin:0;font-size:15.5px;color:var(--d-mid);line-height:1.55;flex:1 1 auto}

/* ---------- beliefs: editorial, not a feature grid ---------- */
.beliefs{margin-top:34px;border-top:1px solid var(--d-line)}
.beliefs .b{display:grid;grid-template-columns:1fr;gap:6px;
  padding:22px 0;border-bottom:1px solid var(--d-line)}
@media(min-width:820px){.beliefs .b{grid-template-columns:34px 300px 1fr;gap:28px;align-items:baseline}}
.beliefs .n{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  color:var(--d-muted);padding-top:4px}
.beliefs h3{margin:0;font-size:clamp(19px,2.1vw,22px);font-weight:700;letter-spacing:-.018em;line-height:1.2}
.beliefs p{margin:0;font-size:16.5px;color:var(--d-mid);line-height:1.6;max-width:62ch}

/* ---------- compact system strip (home only — Products page does the depth) ---------- */
.sysstrip{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  overflow:hidden;margin-top:28px}
.sysstrip a{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 20px;text-decoration:none;
  color:inherit;border-bottom:1px solid var(--d-line);align-items:center}
@media(min-width:720px){.sysstrip a{grid-template-columns:132px 1fr 128px;gap:22px}}
.sysstrip a:last-child{border-bottom:0}
.sysstrip a:hover{background:var(--d-raise)}
.sysstrip .nm{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.sysstrip .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:0 0 auto}
.sysstrip .ds{margin:0;font-size:16px;color:var(--d-mid);max-width:none}
.sysstrip .stt{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-muted)}
@media(min-width:720px){.sysstrip .stt{text-align:right}}
.sysstrip .stt.on{color:var(--s-up)}
.sysstrip .stt.soonst{color:var(--s-warn)}

/* ---------- video cards: reserved slots until real videos are supplied ---------- */
.vidgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:28px}
@media(min-width:620px){.vidgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.vidgrid{grid-template-columns:repeat(3,1fr)}}
.vidgrid.two{grid-template-columns:1fr}
@media(min-width:720px){.vidgrid.two{grid-template-columns:repeat(2,1fr)}}

.vcardv{border:1px solid var(--d-line);border-radius:13px;background:var(--d-card);overflow:hidden;
  display:flex;flex-direction:column}
.vcardv .thumb{aspect-ratio:16/9;background:var(--d-surface);
  border-bottom:1px solid var(--d-line);position:relative;
  display:flex;align-items:center;justify-content:center}
.vcardv .thumb::after{content:"";position:absolute;inset:10px;border:1px dashed var(--d-line-2);border-radius:8px}
.vcardv .play{width:46px;height:46px;border-radius:50%;border:1px solid var(--d-line-2);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.vcardv .play svg{width:16px;height:16px;fill:var(--d-muted);margin-left:2px}
.vcardv .meta{padding:15px 17px 17px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.vcardv .tag{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--d-muted)}
.vcardv .slot{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--s-warn)}
.vcardv .what{font-size:15.5px;color:var(--d-mid);line-height:1.5;margin:0;max-width:none}
.vidnote{font-size:var(--fs-small);color:var(--d-muted);margin:18px 0 0;max-width:none}

.ytline{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:24px}
.ytlink{display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  font-size:16px;font-weight:600;color:var(--p-echo);text-decoration:none}
.ytlink svg{width:19px;height:14px;fill:currentColor;flex:0 0 auto}
.ytlink:hover{text-decoration:underline}

/* ---------- pricing: individual tiers and the Suite ---------- */
.tiers{display:grid;grid-template-columns:1fr;gap:14px;margin-top:28px}
@media(min-width:620px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tiers{grid-template-columns:repeat(4,1fr)}}
.tier{border:1px solid var(--d-line);border-radius:12px;background:var(--d-card);padding:22px 20px;
  display:flex;flex-direction:column;gap:12px}
.tier .term{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted)}
.tier .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tier .amt{font-family:"IBM Plex Mono",monospace;font-size:31px;font-weight:500;letter-spacing:-.022em;
  color:var(--d-text);font-variant-numeric:tabular-nums}
.tier .per{font-size:14.5px;color:var(--d-muted)}
.tier .note{margin:0;font-size:15px;color:var(--d-mid);line-height:1.5;flex:1 1 auto;max-width:none}
.tier .btn{width:100%;margin-top:2px}
.tier.best{border-color:var(--d-line-2);
  background:linear-gradient(155deg,rgba(70,204,51,.07),transparent 62%),var(--d-card)}
.tier .flag{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--sg-green)}

.newstrat{margin-top:22px;border:1px solid var(--d-line-2);border-radius:12px;
  background:linear-gradient(150deg,rgba(70,204,51,.08),transparent 65%),var(--d-card);padding:20px 22px}
.newstrat .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sg-green);margin-bottom:8px}
.newstrat h3{margin:0 0 8px;font-size:19px;font-weight:700;letter-spacing:-.016em}
.newstrat p{margin:0;font-size:16px;color:var(--d-mid);line-height:1.55;max-width:72ch}

.onlyplan{max-width:420px;margin-top:28px}
/* ---------- plans: the decision, shown side by side ---------- */
.decide{display:grid;grid-template-columns:1fr;gap:16px;margin-top:34px}
@media(min-width:900px){.decide{grid-template-columns:1fr 1.35fr;align-items:start}}
.dcard{border:1px solid var(--d-line);border-radius:15px;background:var(--d-card);
  padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px}
.dcard.suite{border-color:var(--d-line-2);
  background:radial-gradient(115% 130% at 12% 0%, rgba(47,211,240,.10), transparent 58%),
             radial-gradient(105% 125% at 92% 100%, rgba(107,79,224,.08), transparent 60%),var(--d-card)}
.dcard .dtop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.dcard .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted)}
.dcard.suite .k{color:var(--p-echo)}
.tagbest{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--p-echo);border:1px solid rgba(47,211,240,.45);
  border-radius:4px;padding:3px 8px}
.dcard .pr{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.dcard .amt{font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:-.024em;
  font-variant-numeric:tabular-nums;font-size:clamp(30px,3.6vw,40px)}
.dcard .per{font-size:15px;color:var(--d-muted)}
.dcard h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.016em}
.dcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.dcard li{font-size:15.5px;color:var(--d-mid);padding:9px 0;border-bottom:1px solid var(--d-line);
  line-height:1.45}
.dcard li:last-child{border-bottom:0}
.dcard li b{color:var(--d-text);font-weight:600}
.decideline{margin:26px 0 0;font-size:17px;color:var(--d-mid);max-width:72ch}
a.dcard{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
a.dcard:hover{border-color:var(--d-line-2)}
a.dcard:focus-visible{outline:2px solid var(--p-echo);outline-offset:3px}
.dcard .dtitle{margin:0;font-size:clamp(21px,2.3vw,26px);font-weight:800;letter-spacing:-.022em;
  line-height:1.16}
.dcard .goto{font-size:15.5px;font-weight:600;color:var(--p-echo);margin-top:auto;padding-top:6px}
[id]{scroll-margin-top:84px}

/* most-popular marker + suite inclusions */
.spt.pop{background:rgba(70,204,51,.055)}
.pop-tag{display:inline-flex;align-items:center;font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--sg-green);
  border:1px solid rgba(70,204,51,.4);border-radius:4px;padding:2px 7px;align-self:flex-start;
  white-space:nowrap}
.suiteinc{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.suiteinc span{font-size:14.5px;color:var(--d-mid);border:1px solid var(--d-line);border-radius:999px;
  padding:6px 12px;background:var(--d-surface);white-space:nowrap}
.futureline{margin-top:20px;border:1px solid rgba(70,204,51,.34);border-radius:12px;
  background:linear-gradient(150deg,rgba(70,204,51,.09),transparent 62%),var(--d-card);padding:18px 22px}
.futureline .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sg-green);margin-bottom:7px}
.futureline p{margin:0;font-size:16px;color:var(--d-mid);line-height:1.55;max-width:74ch}
.futureline b{color:var(--d-text);font-weight:700}

/* private session — a service, not a system */
.psession{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--d-line);
  border-radius:14px;background:var(--d-card);overflow:hidden;margin-top:28px}
@media(min-width:860px){.psession{grid-template-columns:1.4fr 1fr}}
.psession .ps-main{padding:26px 28px}
.psession .ps-side{padding:26px 28px;border-top:1px solid var(--d-line);background:var(--d-surface);
  display:flex;flex-direction:column;gap:12px;justify-content:center}
@media(min-width:860px){.psession .ps-side{border-top:0;border-left:1px solid var(--d-line)}}
.psession .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted);margin-bottom:9px}
.psession h3{margin:0 0 10px;font-size:clamp(20px,2.2vw,24px);font-weight:700;letter-spacing:-.02em}
.psession p{margin:0;font-size:16px;color:var(--d-mid);line-height:1.55;max-width:60ch}
.psession .amt{font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:500;
  letter-spacing:-.022em;font-variant-numeric:tabular-nums}
.psession .once{font-size:14.5px;color:var(--d-muted)}
.pscompare{margin-top:18px;border-top:1px solid var(--d-line);padding-top:16px;
  display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.pscompare{grid-template-columns:1fr 1fr;gap:30px}}
.pscompare .kk{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:6px}
.pscompare .inc .kk{color:var(--sg-green)}
.pscompare .opt .kk{color:var(--d-muted)}
.pscompare b{display:block;font-size:16px;margin-bottom:4px}
.pscompare p{margin:0;font-size:15px;color:var(--d-mid);line-height:1.5;max-width:none}
.decideline b{color:var(--d-text);font-weight:700}

/* ---------- suite panel that fills the products grid gap ---------- */
.prismrow{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
@media(min-width:900px){.prismrow{grid-template-columns:1fr 2fr}}
@media(min-width:1080px){.prismrow{grid-template-columns:1fr 3fr}}
.suitecall{border:1px solid var(--d-line-2);border-radius:14px;padding:26px 28px;
  display:flex;flex-direction:column;gap:14px;
  background:radial-gradient(110% 140% at 10% 0%, rgba(47,211,240,.10), transparent 58%),
             radial-gradient(100% 130% at 92% 100%, rgba(107,79,224,.08), transparent 62%),var(--d-card)}
.suitecall .sctop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.suitecall .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-echo)}
.suitecall h3{margin:0;font-size:clamp(21px,2.5vw,27px);font-weight:800;letter-spacing:-.024em;line-height:1.14}
.suitecall p{margin:0;font-size:16px;color:var(--d-mid);line-height:1.55;max-width:62ch}
.scinc{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0}
.scinc span{font-size:14.5px;color:var(--d-mid);border:1px solid var(--d-line);border-radius:999px;
  padding:6px 12px;background:var(--d-surface);white-space:nowrap}
.suitecall .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:4px}


.pricelist{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  overflow:hidden;margin-top:28px}
.pricelist a,.pricelist div.row{display:grid;grid-template-columns:1fr;gap:4px;padding:17px 22px;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--d-line);align-items:center}
@media(min-width:640px){.pricelist a,.pricelist div.row{grid-template-columns:180px 1fr 150px;gap:22px}}
.pricelist a:last-child,.pricelist div.row:last-child{border-bottom:0}
.pricelist a:hover{background:var(--d-raise)}
.pricelist .nm{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16.5px;letter-spacing:-.01em}
.pricelist .dot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex:0 0 auto}
.pricelist .ds{margin:0;font-size:15.5px;color:var(--d-mid);max-width:none}
.pricelist .pr{font-family:"IBM Plex Mono",monospace;font-size:16px;color:var(--d-text);
  font-variant-numeric:tabular-nums}
@media(min-width:640px){.pricelist .pr{text-align:right}}
.pricelist .pr small{font-size:13px;color:var(--d-muted);font-family:"Chivo",sans-serif}
.pricelist .cue{display:block;font-size:13.5px;font-weight:600;color:var(--p-echo);margin-top:3px;font-family:"Chivo",sans-serif}
.pricelist .notyet-row .cue{color:var(--d-muted);font-weight:500}
.pricelist .notyet-row .pr{color:var(--s-warn)}

/* the Suite priced block, deliberately distinct from the individual tiers */
.suiteplans{border:1px solid var(--d-line-2);border-radius:16px;overflow:hidden;margin-top:30px;
  background:radial-gradient(110% 130% at 12% 0%, rgba(47,211,240,.09), transparent 60%),
             radial-gradient(100% 120% at 90% 100%, rgba(107,79,224,.08), transparent 62%),var(--d-card)}
.suiteplans .sph{padding:26px 26px 22px;border-bottom:1px solid var(--d-line)}
.suiteplans .sph .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-echo);margin-bottom:10px}
.suiteplans .sph h3{margin:0 0 10px;font-size:clamp(23px,2.7vw,30px);font-weight:800;letter-spacing:-.026em}
.suiteplans .sph p{margin:0;font-size:16.5px;color:var(--d-mid);max-width:70ch}
.suiteplans .sptiers{display:grid;grid-template-columns:1fr}
@media(min-width:620px){.suiteplans .sptiers{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.suiteplans .sptiers{grid-template-columns:repeat(4,1fr)}}
.spt{padding:22px 24px;border-top:1px solid var(--d-line);display:flex;flex-direction:column;gap:11px}
@media(min-width:620px){.spt{border-top:0;border-right:1px solid var(--d-line)}
  .suiteplans .sptiers .spt:last-child{border-right:0}}
@media(min-width:620px) and (max-width:1039px){.suiteplans .sptiers .spt:nth-child(2n){border-right:0}
  .suiteplans .sptiers .spt:nth-child(n+3){border-top:1px solid var(--d-line)}}
.spt .term{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted)}
.spt .amt{font-family:"IBM Plex Mono",monospace;font-size:29px;font-weight:500;letter-spacing:-.022em;
  font-variant-numeric:tabular-nums}
.spt .per{font-size:14.5px;color:var(--d-muted)}
.spt .btn{width:100%;margin-top:auto}
.suiteplans .spfoot{padding:18px 26px;border-top:1px solid var(--d-line);background:var(--d-surface);
  font-size:15px;color:var(--d-mid)}

/* clickable Suite marks */
.suiteset a.cell{text-decoration:none;color:inherit;transition:background .15s}
.suiteset a.cell:hover{background:var(--d-raise)}
.suiteset a.cell:focus-visible{outline:2px solid var(--p-echo);outline-offset:-2px}

/* ---------- learn article ---------- */
.wrap.art{max-width:920px}
.backlink{display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted);text-decoration:none}
.backlink:hover{color:var(--d-text)}
.artline{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:24px 0 0;
  border-top:1px solid var(--d-line);padding-top:16px}
.artline span{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-muted)}
.artline span.on{color:var(--p-echo)}

.bigquote{margin:36px 0 30px;border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);
  padding:34px 0}
.bigquote p{font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:clamp(23px,3.5vw,34px);line-height:1.3;letter-spacing:-.016em;
  color:var(--d-text);margin:0;max-width:24ch}
.bigquote p{color:var(--d-mid)}
.bigquote p .q2{color:var(--d-text);display:block;margin-top:4px}
.bigquote p.solo{color:var(--d-text)}
.bigquote .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted);margin:0 0 16px}

.exlist{display:grid;grid-template-columns:1fr;margin:26px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--d-line)}
@media(min-width:620px){.exlist{grid-template-columns:repeat(2,1fr);column-gap:36px}}
@media(min-width:960px){.exlist{grid-template-columns:repeat(3,1fr)}}
.exlist li{display:flex;gap:12px;align-items:center;min-height:var(--tap);
  border-bottom:1px solid var(--d-line);padding:11px 2px;
  font-size:16.5px;line-height:1.45;color:var(--d-mid);max-width:none}
.exlist li::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--sg-green);flex:0 0 auto}

.sumlines{margin:0 0 24px;padding:2px 0 2px 24px;list-style:none;border-left:2px solid var(--sg-green)}
.sumlines li{font-weight:700;font-size:clamp(23px,3.4vw,34px);line-height:1.24;
  letter-spacing:-.024em;color:var(--d-text);margin:0 0 4px;max-width:none}
.artend{font-family:"Newsreader",Georgia,serif;font-size:clamp(19px,2.3vw,24px);
  line-height:1.45;color:var(--d-mid);margin:0}

.artnav{display:grid;grid-template-columns:1fr;gap:4px;margin-top:38px;
  border-top:1px solid var(--d-line);padding-top:10px}
@media(min-width:640px){.artnav{grid-template-columns:repeat(2,1fr);gap:0 34px}}
.artnav a{display:block;padding:18px 0;text-decoration:none;border-bottom:1px solid var(--d-line)}
.artnav a .an{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:700;
  color:var(--d-text);letter-spacing:-.012em}
.artnav a .ad{display:block;margin-top:5px;font-size:var(--fs-small);color:var(--d-muted);line-height:1.5}
.artnav a:hover .an{color:var(--p-echo)}

/* article cards on the Learn page */
.artcards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
@media(min-width:760px){.artcards{grid-template-columns:repeat(2,1fr)}}
.artcard{display:flex;flex-direction:column;gap:11px;background:var(--d-card);
  border:1px solid var(--d-line);border-radius:12px;padding:22px 20px 18px;
  text-decoration:none;transition:.18s ease;position:relative;overflow:hidden}
.artcard::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--p-echo)}
.artcard:hover{border-color:var(--p-echo);transform:translateY(-2px)}
.artcard .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-echo)}
.artcard h3{margin:0;font-size:clamp(19px,2.1vw,22px);font-weight:700;letter-spacing:-.02em;
  line-height:1.2;color:var(--d-text)}
.artcard p{margin:0;font-size:15.5px;line-height:1.55;color:var(--d-mid);flex:1 1 auto;max-width:none}
.artcard .go{display:flex;align-items:center;min-height:var(--tap);border-top:1px solid var(--d-line);
  padding-top:12px;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-mid)}
.artcard:hover .go{color:var(--p-echo)}
.artcard.pend{border-style:dashed;pointer-events:none}
.artcard.pend::before{background:var(--d-line-2)}
.artcard.pend .k,.artcard.pend .go{color:var(--d-muted)}
.artcard.pend h3{color:var(--d-mid)}

/* narrow single-column dropdown (Learn) */
.dd.narrow{min-width:min(94vw,340px);grid-template-columns:1fr}
@media(min-width:700px){.dd.narrow{grid-template-columns:1fr}}

.ccpage .cchead{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:baseline;
  border-bottom:1px solid var(--d-line);padding-bottom:18px;margin-bottom:24px}
.ccpage .cchead h3{margin:0;font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.026em;line-height:1.1}
.ccpage .cchead .step{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted);margin-left:auto}

.ccpage .ccgrid{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:1000px){.ccpage .ccgrid{grid-template-columns:1fr 360px;gap:34px;align-items:start}}
@media(min-width:1000px){.ccpage .ccgrid>.sumry{position:sticky;top:88px}}


.ccpage .ntc{display:grid;grid-template-columns:22px 1fr;gap:6px 12px;align-items:start;border-radius:10px;
  padding:14px 16px;border:1px solid var(--d-line);background:var(--d-card);margin:0 0 12px}
@media(min-width:640px){.ccpage .ntc{grid-template-columns:22px 1fr auto;align-items:center}}
.ccpage .ntc .ic{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);margin-top:1px}
.ccpage .ntc p{margin:0;font-size:15.5px;line-height:1.5;color:var(--d-mid);max-width:none}
.ccpage .ntc.ok{border-color:rgba(63,199,135,.4)}
.ccpage .ntc.ok .ic{background:rgba(63,199,135,.16);color:var(--s-up)}
.ccpage .ntc.info{border-color:rgba(47,211,240,.35)}
.ccpage .ntc.info .ic{background:rgba(47,211,240,.14);color:var(--p-echo)}
.ccpage .ntc .lnk{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 14px;border:1px solid var(--d-line-2);border-radius:8px;color:var(--d-text);font-weight:600;
  font-size:15px;text-decoration:none;white-space:nowrap}
@media(min-width:640px){.ccpage .ntc .lnk{grid-column:3;margin-left:8px}}
.ccpage .ntc .lnk:hover{border-color:var(--d-text)}


.ccpage .lines{border-top:1px solid var(--d-line);margin-top:22px}
.ccpage .li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:22px 0;
  border-bottom:1px solid var(--d-line);align-items:start}
@media(min-width:620px){.ccpage .li{grid-template-columns:72px 1fr auto;gap:20px}}
.ccpage .li .thumb2{width:64px;height:64px;border-radius:10px;background:var(--d-card);
  border:1px solid var(--d-line);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.06em;color:var(--d-muted);
  text-align:center;padding:4px;line-height:1.3}
@media(min-width:620px){.ccpage .li .thumb2{width:72px;height:72px}}
.ccpage .li .nm{margin:0 0 7px;font-size:18px;font-weight:700;letter-spacing:-.016em;color:var(--d-text);max-width:none;line-height:1.25}
.ccpage .li .sub{margin:0;font-size:var(--fs-small);color:var(--d-muted);line-height:1.5;max-width:none}
.ccpage .li .amt{text-align:left;white-space:nowrap}
@media(min-width:620px){.ccpage .li .amt{text-align:right}}
.ccpage .li .amt .p{font-size:19px;font-weight:700;letter-spacing:-.018em;color:var(--d-text);display:block}
.ccpage .li .amt .per{font-size:var(--fs-small);color:var(--d-muted);display:block;margin-top:3px}
.ccpage .li .rm{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:6px;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--d-muted);text-decoration:none}
.ccpage .li .rm:hover{color:var(--s-down)}

.ccpage .ccbadge{display:inline-flex;align-items:center;gap:7px;font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--d-line-2);border-radius:5px;padding:4px 8px;color:var(--d-mid);
  margin:0 0 9px}
.ccpage .ccbadge.rec{border-color:rgba(47,211,240,.45);color:var(--p-echo)}
.ccpage .ccbadge.once{border-color:rgba(70,204,51,.45);color:var(--sg-green)}


.ccpage .coup{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;
  border:1px dashed var(--d-line-2);border-radius:10px;padding:14px 16px}
.ccpage .coup .lb{font-size:15.5px;color:var(--d-mid);flex:1 1 200px;margin:0;max-width:none}
.ccpage .coup .fauxin{flex:1 1 180px;min-height:var(--tap);border:1px solid var(--d-line-2);border-radius:8px;
  background:var(--d-bg);display:flex;align-items:center;padding:0 14px;
  font-size:15px;color:var(--d-muted)}


.ccpage .sumry{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);overflow:hidden}
.ccpage .sumry .sh{padding:18px 20px 16px;border-bottom:1px solid var(--d-line);background:var(--d-raise)}
.ccpage .sumry .sh h4{margin:0;font-size:17px;font-weight:700;letter-spacing:-.014em}
.ccpage .sumry .sb{padding:18px 20px}
.ccpage .tr{display:flex;justify-content:space-between;gap:16px;padding:9px 0;font-size:16px;color:var(--d-mid)}
.ccpage .tr span:last-child{color:var(--d-text);white-space:nowrap}
.ccpage .tr.big{border-top:1px solid var(--d-line);margin-top:6px;padding-top:15px;align-items:baseline}
.ccpage .tr.big span:first-child{font-size:17px;font-weight:700;color:var(--d-text);letter-spacing:-.012em}
.ccpage .tr.big span:last-child{font-size:26px;font-weight:900;letter-spacing:-.028em;color:var(--d-text)}
.ccpage .blockhead{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted);margin:0 0 4px;padding-top:2px}
.ccpage .thenblock{margin-top:20px;border-top:1px solid var(--d-line-2);padding-top:18px}
.ccpage .thenblock .blockhead{color:var(--p-echo)}
.ccpage .thenblock .tr.big span:last-child{font-size:22px}
.ccpage .renew{font-size:var(--fs-small);color:var(--d-muted);margin:10px 0 0;line-height:1.5;max-width:none}
.ccpage .oncenote{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;padding-top:15px;
  border-top:1px solid var(--d-line);font-size:var(--fs-small);color:var(--d-muted);line-height:1.5}

.ccpage .btnrow{margin-top:20px;display:grid;gap:12px}
.ccpage .fauxbtn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:9px;
  font-weight:700;font-size:16.5px;letter-spacing:-.01em;text-align:center;padding:0 18px}
.ccpage .fauxbtn.pri{background:var(--sg-grad);color:#04160B}
.ccpage .fauxbtn.exp{background:var(--d-bg);border:1px solid var(--d-line-2);color:var(--d-mid);
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  min-height:var(--tap);font-weight:500}
.ccpage .ordiv{display:flex;align-items:center;gap:12px;margin:4px 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted)}
.ccpage .ordiv::before, .ccpage .ordiv::after{content:"";height:1px;background:var(--d-line);flex:1 1 auto}
.ccpage .expgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}


.ccpage .fgroup{border-top:1px solid var(--d-line);padding-top:26px;margin-top:26px}
.ccpage .fgroup:first-of-type{border-top:0;padding-top:0;margin-top:0}
.ccpage .fgroup>.gh{display:flex;gap:14px;align-items:baseline;margin:0 0 18px}
.ccpage .fgroup .gn{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  color:var(--d-muted);flex:0 0 auto}
.ccpage .fgroup h4{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.ccpage .ccfg{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.ccpage .ccfg.two{grid-template-columns:1fr 1fr}}
.ccpage .fld .fl{display:block;font-size:var(--fs-small);font-weight:600;color:var(--d-mid);
  margin:0 0 7px;letter-spacing:-.004em}
.ccpage .fld .fl i{color:var(--s-down);font-style:normal;margin-left:3px}
.ccpage .fld .fi{min-height:50px;border:1px solid var(--d-line-2);border-radius:9px;background:var(--d-bg);
  display:flex;align-items:center;padding:0 14px;font-size:16px;color:var(--d-muted)}
.ccpage .fld .fi.sel::after{content:"";margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--d-muted);
  border-bottom:1.5px solid var(--d-muted);transform:rotate(45deg) translateY(-2px)}
.ccpage .fld .fi.ta{min-height:84px;align-items:flex-start;padding-top:14px}
.ccpage .fld .fh{margin:8px 0 0;font-size:var(--fs-small);color:var(--d-muted);line-height:1.5;max-width:none}
.ccpage .fld .fh b{color:var(--d-mid);font-weight:600}


.ccpage .pays{border:1px solid var(--d-line);border-radius:12px;overflow:hidden;margin-top:4px}
.ccpage .payr{display:flex;align-items:center;gap:13px;padding:16px 18px;border-bottom:1px solid var(--d-line);
  min-height:var(--tap)}
.ccpage .payr:last-child{border-bottom:0}
.ccpage .payr .rad{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--d-line-2);flex:0 0 auto}
.ccpage .payr.sel{background:var(--d-raise)}
.ccpage .payr.sel .rad{border-color:var(--p-echo);box-shadow:inset 0 0 0 4px var(--p-echo)}
.ccpage .payr .pn{font-size:16px;font-weight:600;color:var(--d-text)}
.ccpage .payr .marks{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ccpage .payr .marks span{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.05em;
  border:1px solid var(--d-line-2);border-radius:4px;padding:3px 6px;color:var(--d-muted);white-space:nowrap}
.ccpage .paynote{padding:0 18px 16px;font-size:var(--fs-small);color:var(--d-muted);line-height:1.5;
  background:var(--d-raise);border-bottom:1px solid var(--d-line);margin:0;max-width:none}

.ccpage .termrow{display:flex;gap:12px;align-items:flex-start;margin-top:20px;
  border:1px solid var(--d-line);border-radius:10px;padding:16px 18px;background:var(--d-card)}
.ccpage .termrow .box{width:19px;height:19px;border:1.5px solid var(--d-line-2);border-radius:5px;flex:0 0 auto;margin-top:1px}
.ccpage .termrow p{margin:0;font-size:15.5px;color:var(--d-mid);line-height:1.5;max-width:none}
.ccpage .termrow a{color:var(--d-text);border-bottom:1px solid var(--d-line-2);text-decoration:none}
.ccpage .privnote{font-size:var(--fs-small);color:var(--d-muted);line-height:1.55;margin:16px 0 0;max-width:none}


.ccpage .disc{border-top:1px solid var(--d-line);margin-top:30px;padding-top:22px}
.ccpage .disc h5{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted);margin:0 0 10px;font-weight:400}
.ccpage .disc p{font-size:var(--fs-small);color:var(--d-muted);line-height:1.6;max-width:78ch}

/* ---------- prototype commerce screens ---------- */
.ccpage .protonote{border:1px solid rgba(224,172,87,.4);background:#140F04;border-radius:10px;
  padding:13px 16px;margin:0 0 26px;font-size:15px;color:#D9C39A;line-height:1.55;max-width:none}
.ccpage .protonote b{color:#F0DCB4}
.ccpage a.fauxbtn{text-decoration:none}
.ccpage a.fauxbtn.pri:hover{filter:brightness(1.08)}
.ccpage .fauxbtn.dead{background:var(--d-raise);border:1px solid var(--d-line-2);color:var(--d-muted);cursor:not-allowed}
.ccpage .backrow{margin:0 0 20px}
.ccpage .backrow a{display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-muted);text-decoration:none}
.ccpage .backrow a:hover{color:var(--d-text)}
.ccpage .sumnote{font-size:var(--fs-small);color:var(--d-muted);line-height:1.5;margin:14px 0 0;
  padding-top:13px;border-top:1px solid var(--d-line);max-width:none}

/* ---------- product-page pricing: one system, or the Suite ---------- */
.getgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px;align-items:start}
@media(min-width:940px){.getgrid{grid-template-columns:1fr 1.42fr;gap:22px}}
.getcol{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:26px 24px 24px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.getcol .gk{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted);margin:0 0 11px;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap}
.getcol h3{margin:0 0 16px;font-size:clamp(20px,2.2vw,24px);font-weight:700;letter-spacing:-.02em;
  line-height:1.2}
.getcol .gp{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 8px}
.getcol .gp .amt{font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:-.026em;
  font-variant-numeric:tabular-nums;color:var(--d-text);font-size:clamp(33px,4.2vw,44px);line-height:1}
.getcol .gp .per{font-size:15.5px;color:var(--d-muted)}
.getcol .gsub{margin:0 0 20px;font-size:15.5px;color:var(--d-mid);line-height:1.55;max-width:none}
.getinc{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--d-line)}
.getinc li{display:flex;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid var(--d-line);
  font-size:15px;color:var(--d-mid);line-height:1.45;max-width:none}
.getinc li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--d-line-2);flex:0 0 auto}
.getcol .gfoot{margin-top:auto}
.getcol .gfoot .btn{width:100%}
.getcol .gnote{margin:12px 0 0;font-size:var(--fs-small);color:var(--d-muted);line-height:1.5;
  text-align:center;max-width:none}

/* the Suite side carries the weight */
.getcol.gsuite{background:var(--d-raise);border-color:var(--d-line-2)}
.getcol.gsuite::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--sg-grad)}
.getcol.gsuite .gk{color:var(--p-echo)}
.getcol.gsuite .getinc li::before{background:var(--sg-green)}
.getcol.gsuite .getinc{margin-bottom:0}
.gterms{margin:4px 0 0}
.gt{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--d-line)}
@media(min-width:600px){.gt{grid-template-columns:1fr auto 128px}}
.gt .gterm{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-mid);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.gt .gprice{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:500;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--d-text);white-space:nowrap}
.gt .btn{width:100%;grid-column:1/-1}
@media(min-width:600px){.gt .btn{grid-column:auto}}
.gt.gpop .gterm{color:var(--d-text)}
.getline{margin:26px 0 0;font-size:15.5px;color:var(--d-muted);line-height:1.6;max-width:74ch}

/* ---------- ambient brand marks ----------
   One system, sized and placed per page. Atmosphere, never content:
   always behind the copy, never interactive, hidden on small screens.
   Home keeps its original .heromark treatment as the reference.        */
.amb-host{position:relative;overflow:hidden}
.amb-host > .wrap{position:relative;z-index:2}
.ambient{position:absolute;z-index:0;pointer-events:none;user-select:none;
  height:auto;filter:saturate(.4);opacity:.12}
/* Products — short hero, wide open right. Chevron only, cropped off-canvas. */
.amb-products{left:63%;top:50%;transform:translateY(-50%);width:clamp(340px,44vw,600px);opacity:.085}
/* How We Build — the closest relative of the Home hero, deliberately so. */
.amb-build{left:64%;top:54%;transform:translateY(-50%);width:clamp(230px,28vw,400px);opacity:.13}
/* The Experience — larger, lower, softer. More atmosphere, less mark. */
.amb-exp{left:66%;top:80%;transform:translateY(-50%);width:clamp(280px,36vw,500px);opacity:.075}
/* Learn — modest and high, clear of the video work below. */
.amb-learn{left:67%;top:42%;transform:translateY(-50%);width:clamp(210px,24vw,330px);opacity:.10}
/* About — the company page, so the full lockup, low and closer in. */
/* About sits below the copy rather than beside it: the headline runs wide and the
   hero is short, so the mark is anchored by its top edge and cropped by the section. */
.amb-about{left:62%;top:68%;transform:none;width:clamp(300px,36vw,500px);opacity:.17}
@media(max-width:1120px){
  .amb-products{left:66%;width:clamp(300px,38vw,440px);opacity:.07}
  .amb-build{left:67%;width:clamp(210px,24vw,300px);opacity:.11}
  .amb-exp{left:68%;width:clamp(240px,30vw,360px);opacity:.065}
  .amb-learn{left:70%;width:clamp(190px,21vw,260px);opacity:.09}
  .amb-about{left:66%;top:66%;width:clamp(240px,29vw,340px);opacity:.14}
}
@media(max-width:900px){.ambient{display:none}}

/* ---------- real Member Hub screenshots ---------- */
.hubshots{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px;align-items:start}
@media(min-width:700px){.hubshots{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.hubshots{grid-template-columns:0.62fr 1.25fr;gap:18px}
  .hshot.tall{grid-row:span 2}}
.hshot{border:1px solid var(--d-line);border-radius:12px;overflow:hidden;background:var(--d-card);
  display:flex;flex-direction:column;margin:0}
.hshot .frame{border-bottom:1px solid var(--d-line);background:var(--d-bg);display:block}
.hshot img{display:block;width:100%;height:auto}
/* the sidebar capture is tall and narrow — cap it once the grid collapses,
   so it never dwarfs the two wide captures beside it */
@media(max-width:999px){
  .hshot.tall .frame{display:flex;justify-content:center;padding:18px 0}
  .hshot.tall img{width:auto;max-height:380px}
}
.hshot .cap{padding:14px 16px 16px}
.hshot .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--p-echo)}
.hshot .t{display:block;font-weight:700;font-size:16.5px;letter-spacing:-.014em;margin:7px 0 6px;
  color:var(--d-text)}
.hshot p{margin:0;font-size:14.5px;color:var(--d-mid);line-height:1.5;max-width:none}

/* ---------- real Strategy Analyzer evidence ----------
   Authentic NinjaTrader captures, framed but never restyled, retouched or
   redrawn. Nothing here is a chart the site drew for itself.              */
.evwrap{margin-top:26px}
.evrow{display:grid;grid-template-columns:1fr;gap:20px}

/* the three-part sequence stacks, so the Strategy Analyzer text stays readable:
   each capture renders at up to its native width and is never upscaled */
.evseq{display:grid;grid-template-columns:1fr;gap:22px;margin-top:24px}
.evstep{border:1px solid var(--d-line);border-radius:12px;background:var(--d-card);overflow:hidden}
.evstep .evh{padding:18px 20px 16px;border-bottom:1px solid var(--d-line);
  display:grid;grid-template-columns:1fr;gap:7px}
@media(min-width:800px){.evstep .evh{grid-template-columns:224px 1fr;gap:6px 28px;align-items:baseline}}
.evstep .evn{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--p-echo);align-self:start;padding-top:4px}
.evstep .evt{display:block;font-size:18px;font-weight:700;letter-spacing:-.018em;color:var(--d-text)}
.evstep .evd{margin:6px 0 0;font-size:15.5px;color:var(--d-mid);line-height:1.55;max-width:70ch}
@media(min-width:800px){.evstep .evtwrap{grid-column:2}}
.evstep .evpic{padding:clamp(14px,2vw,22px);background:var(--d-bg)}
.evstep .evshot{max-width:985px;margin:0 auto}

.evcard{border:1px solid var(--d-line);border-radius:12px;background:var(--d-card);
  overflow:hidden;display:flex;flex-direction:column}
.evcard .evh{padding:16px 18px 14px;border-bottom:1px solid var(--d-line)}
.evcard .evn{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--p-echo)}
.evcard .evt{display:block;font-size:17px;font-weight:700;letter-spacing:-.016em;
  color:var(--d-text);margin:7px 0 6px}
.evcard .evd{margin:0;font-size:14.5px;color:var(--d-mid);line-height:1.5;max-width:none}
.evshot{display:block;width:100%;background-color:#0A0D0E;background-repeat:no-repeat;
  background-position:center top;background-size:100% auto}
.evcard .evshot{border-bottom:1px solid var(--d-line)}
.ev-daily{background-image:url(assets/ev-daily.webp);aspect-ratio:974/915}
.ev-cumulative{background-image:url(assets/ev-cumulative.webp);aspect-ratio:969/939}
.ev-summary{background-image:url(assets/ev-summary.webp);aspect-ratio:985/975}
/* live chart captures */
.ch-echo{background-image:url(assets/ch-echo.webp);aspect-ratio:1070/1032}
.ch-st3m{background-image:url(assets/ch-st3m.webp);aspect-ratio:1150/850}
.ch-ema120{background-image:url(assets/ch-ema120.webp);aspect-ratio:1040/1059}
/* representative-example ribbon on a capture that is not that product's own */
.evchip{display:inline-flex;align-items:center;font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--s-warn);
  border:1px solid rgba(224,172,87,.42);border-radius:4px;padding:2px 7px;margin-left:10px;
  vertical-align:2px;white-space:nowrap;font-weight:400}
.evrepmark{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;
  font-size:var(--fs-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--s-warn);
  border:1px solid rgba(224,172,87,.45);border-radius:5px;padding:4px 9px;margin:0 0 14px}

.evsrc{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:18px 0 0;
  border-top:1px solid var(--d-line);padding-top:15px;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--d-muted);max-width:none}
.evsrc b{color:var(--d-mid);font-weight:500}
.evcaveat{margin:12px 0 0;font-size:var(--fs-small);color:var(--d-muted);line-height:1.6;max-width:78ch}

/* the single-screenshot treatments: Home and the Suite connection */
.evsolo{display:grid;grid-template-columns:1fr;gap:22px;margin-top:28px;align-items:center}
@media(min-width:900px){.evsolo{grid-template-columns:1.45fr 1fr;gap:34px}}
.evsolo .evframe{border:1px solid var(--d-line);border-radius:12px;overflow:hidden;
  background:var(--d-card)}
.evsolo .evside .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--p-echo);margin:0 0 10px}
.evsolo .evside h3{margin:0 0 12px;font-size:clamp(21px,2.4vw,27px);font-weight:700;
  letter-spacing:-.022em;line-height:1.2}
.evsolo .evside p{margin:0 0 14px;font-size:16.5px;color:var(--d-mid);line-height:1.6;max-width:56ch}
.evsolo .evside .lk{display:inline-flex;align-items:center;min-height:var(--tap);
  font-size:16px;font-weight:700;color:var(--p-echo);text-decoration:none}
.evsolo .evside .lk:hover{text-decoration:underline}

/* the restrained Suite strip */
.evstrip{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  overflow:hidden;margin-top:26px;display:grid;grid-template-columns:1fr}
@media(min-width:860px){.evstrip{grid-template-columns:1fr 1.15fr;align-items:center}}
.evstrip .txt{padding:26px 26px 24px}
.evstrip .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.16em;
  text-transform:uppercase;color:var(--sg-green);margin:0 0 12px}
.evstrip h3{margin:0 0 10px;font-size:clamp(20px,2.2vw,25px);font-weight:700;letter-spacing:-.02em;line-height:1.22}
.evstrip p{margin:0 0 14px;font-size:16px;color:var(--d-mid);line-height:1.55;max-width:52ch}
.evstrip .lk{display:inline-flex;align-items:center;min-height:var(--tap);font-size:15.5px;
  font-weight:700;color:var(--p-echo);text-decoration:none}
.evstrip .lk:hover{text-decoration:underline}
.evstrip .pic{border-top:1px solid var(--d-line)}
@media(min-width:860px){.evstrip .pic{border-top:0;border-left:1px solid var(--d-line)}}

/* representative-example notice, used where the capture is not that product's own */
.evrep{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(224,172,87,.35);
  border-radius:10px;background:#140F04;padding:14px 16px;margin:22px 0 0}
.evrep .ic{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--s-warn);
  border:1px solid rgba(224,172,87,.4);border-radius:4px;padding:2px 7px;flex:0 0 auto;
  letter-spacing:.1em;text-transform:uppercase}
.evrep p{margin:0;font-size:15px;color:#D9C39A;line-height:1.55;max-width:none}
.evrep b{color:#F0DCB4}
/* Small screens: the capture keeps a readable width and its own frame scrolls.
   The page itself never overflows. */
.evswipe{display:none;margin:0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted)}
.evstrip .pic,.evsolo .evframe{min-width:0}
@media(max-width:760px){
  /* .evpic is a <span>; overflow is inert on an inline box, so it has to
     become a block before the same overflow-x that drives the Home equity
     curve can take effect. Everything else here is unchanged. */
  .evstep .evpic{display:block}
  .evstep .evpic,.evsolo .evframe,.evstrip .pic,.evcard .evshotwrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .evstep .evshot,.evsolo .evshot,.evstrip .evshot,.evcard .evshot{min-width:720px}
  .evswipe{display:block;margin-top:12px}
}

/* ---------- from the member community ----------
   Member-shared material, framed and never retouched. Redactions supplied with
   the originals are part of the image and stay exactly as they are.        */
.mcshot{display:block;width:100%;background-color:#0A0D0E;background-repeat:no-repeat;
  background-position:center;background-size:cover}
.mc-evals{background-image:url(assets/mc-evals.webp);aspect-ratio:640/640}
.mc-cert50k{background-image:url(assets/mc-cert50k.webp);aspect-ratio:820/820}
.mc-apextable{background-image:url(assets/mc-apextable.webp);aspect-ratio:803/860}
.mc-cert15{background-image:url(assets/mc-cert15.webp);aspect-ratio:461/760}
.mc-payreq{background-image:url(assets/mc-payreq.webp);aspect-ratio:860/816}
.mc-tradeify{background-image:url(assets/mc-tradeify.webp);aspect-ratio:804/820}
.mc-cert150k{background-image:url(assets/mc-cert150k.webp);aspect-ratio:599/472}
.mc-8accts{background-image:url(assets/mc-8accts.webp);aspect-ratio:900/562}
.mc-travis{background-image:url(assets/mc-travis.webp);aspect-ratio:860/823}
.mc-3payouts{background-image:url(assets/mc-3payouts.webp);aspect-ratio:839/860}
.mc-28days{background-image:url(assets/mc-28days.webp);aspect-ratio:706/619}

/* the rail: a browse, not a ticker. No autoplay anywhere. */
.mcrail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:4px 22px 18px;margin:26px -22px 0;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--d-line-2) transparent;cursor:grab;
  /* On a touch screen the browser scrolls this rail itself. Declaring the axis
     lets a sideways swipe move the rail and an upward swipe scroll the page,
     rather than the two competing. site.js drags only for a mouse. */
  touch-action:pan-x pinch-zoom}
.mcrail.dragging{cursor:grabbing;scroll-snap-type:none}
.mcrail::-webkit-scrollbar{height:8px}
.mcrail::-webkit-scrollbar-thumb{background:var(--d-line-2);border-radius:4px}
.mcrail::-webkit-scrollbar-track{background:transparent}
.mccard{display:flex;flex-direction:column;flex:0 0 auto;width:270px;scroll-snap-align:start;background:var(--d-card);
  border:1px solid var(--d-line);border-radius:12px;overflow:hidden;padding:0;
  text-align:left;font:inherit;color:inherit;cursor:zoom-in;transition:border-color .16s,transform .16s}
@media(min-width:700px){.mccard{width:310px}}
.mccard:hover{border-color:var(--d-line-2);transform:translateY(-2px)}
.mccard:focus-visible{outline:2px solid var(--p-echo);outline-offset:2px}
.mccard .pic{display:block;width:100%;height:230px;background-color:#0A0D0E;background-repeat:no-repeat;
  background-position:center top;background-size:cover;border-bottom:1px solid var(--d-line)}
@media(min-width:700px){.mccard .pic{height:265px}}
.mccard .cap{padding:13px 15px 15px;display:flex;flex-direction:column;gap:6px}
.mccard .who{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-muted)}
.mccard .who.sg{color:var(--p-echo)}
.mccard .what{font-size:14.5px;color:var(--d-mid);line-height:1.45;margin:0;max-width:none}
.mcrailnote{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:4px 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-muted)}
.mcdisc{margin:18px 0 0;font-size:var(--fs-small);color:var(--d-muted);line-height:1.6;max-width:80ch}

/* the dedicated page collection */
.mcgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px;align-items:start}
@media(min-width:620px){.mcgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.mcgrid{grid-template-columns:repeat(3,1fr)}}
.mcitem{background:var(--d-card);border:1px solid var(--d-line);border-radius:12px;overflow:hidden;
  padding:0;text-align:left;font:inherit;color:inherit;cursor:zoom-in;display:block;width:100%;
  transition:border-color .16s,transform .16s}
.mcitem:hover{border-color:var(--d-line-2);transform:translateY(-2px)}
.mcitem:focus-visible{outline:2px solid var(--p-echo);outline-offset:2px}
.mcitem .mcshot{border-bottom:1px solid var(--d-line);background-size:contain;
  background-position:center top;background-color:#080B0C}
.mcitem .cap{padding:13px 15px 15px;display:flex;flex-direction:column;gap:6px}
.mcitem .who{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-muted)}
.mcitem .who.sg{color:var(--p-echo)}
.mcitem .what{font-size:14.5px;color:var(--d-mid);line-height:1.45;margin:0;max-width:none}

/* lightbox */
.mclb{position:fixed;inset:0;z-index:200;background:rgba(3,6,7,.93);display:none;
  padding:clamp(12px,3vw,40px);overflow:auto}
.mclb.open{display:flex;align-items:flex-start;justify-content:center}
.mclb .box{max-width:min(1000px,100%);margin:auto;width:100%}
.mclb .full{display:block;width:100%;background-repeat:no-repeat;background-position:center;
  background-size:contain;background-color:#080B0C;border:1px solid var(--d-line-2);border-radius:10px}
.mclb .lbcap{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin:14px 0 0}
.mclb .lbcap .who{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-muted)}
.mclb .lbcap .what{font-size:15px;color:var(--d-mid);margin:0;max-width:none}
.mclbclose{position:fixed;top:14px;right:14px;z-index:210;display:inline-flex;align-items:center;
  justify-content:center;min-width:var(--tap);min-height:var(--tap);border-radius:9px;
  background:var(--d-card);border:1px solid var(--d-line-2);color:var(--d-text);
  font-size:22px;line-height:1;cursor:pointer}
.mclbclose:hover{border-color:var(--d-text)}
body.mclocked{overflow:hidden}

/* ---------- the doorway to a person ----------
   Discord is presented as a way to reach us, never as a community feed.
   No claim about how busy it is appears anywhere.                       */
.talkband{position:relative;overflow:hidden;margin-top:34px;
  border:1px solid var(--d-line-2);border-radius:16px;
  background:radial-gradient(130% 150% at 90% 0%, rgba(88,101,242,.11), transparent 60%),
             var(--d-raise);
  padding:clamp(26px,3.6vw,40px);
  display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:920px){.talkband{grid-template-columns:1fr auto;gap:40px;align-items:center}}
.talkband .tbtxt,.talkband .tbact{position:relative;z-index:2;min-width:0}
.talkband h2{margin:0 0 11px;font-size:clamp(23px,2.9vw,31px);font-weight:800;
  letter-spacing:-.026em;line-height:1.14;color:var(--d-text);text-wrap:balance}
.talkband p{margin:0;font-size:16.5px;color:var(--d-mid);line-height:1.6;max-width:54ch}
.tbact{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
@media(min-width:920px){.tbact{align-items:flex-end}}
.tbmark{position:absolute;z-index:0;pointer-events:none;user-select:none;display:block;
  right:-3%;top:50%;transform:translateY(-50%);width:clamp(190px,24vw,300px);aspect-ratio:1/1;
  background-image:url(assets/bg-1.webp);background-size:contain;background-repeat:no-repeat;
  background-position:center;opacity:.05;filter:saturate(.25)}
@media(max-width:1100px){.tbmark{display:none}}

/* Discord's own colour, outlined. Never filled — cyan stays the primary action. */
.btn-discord{background:transparent;color:var(--d-text);border:1.5px solid var(--discord);
  min-height:54px;font-size:16.5px;padding:0 26px;gap:11px}
.btn-discord svg{width:21px;height:21px;fill:var(--discord);flex:0 0 auto;transition:fill .15s}
.btn-discord:hover{background:rgba(88,101,242,.13);border-color:#7C86F6;
  box-shadow:0 0 0 3px rgba(88,101,242,.13)}
.btn-discord:hover svg{fill:#9AA3F8}
.btn-discord:focus-visible{outline:2px solid var(--discord);outline-offset:3px}
/* the header and mobile menu use the same language at button size */
.hdr .cta .btn-discord,.mobile .btn-discord{min-height:var(--tap);font-size:15px;padding:0 16px;gap:8px}
.hdr .cta .btn-discord svg,.mobile .btn-discord svg{width:17px;height:17px}

/* ---------- About: the two of us ----------
   Two panels, equal weight. Neither person is the front man.            */
.who{display:grid;grid-template-columns:1fr;gap:18px;margin-top:30px}
@media(min-width:840px){.who{grid-template-columns:1fr 1fr;gap:24px}}
.who .p{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:clamp(22px,2.6vw,30px)}
.who .r{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-muted);margin:0 0 9px}
.who h3{margin:0 0 12px;font-size:clamp(21px,2.3vw,25px);font-weight:800;
  letter-spacing:-.022em;line-height:1.15;color:var(--d-text)}
.who p{margin:0 0 13px;font-size:16.5px;line-height:1.62;color:var(--d-mid);max-width:52ch}
.who p:last-child{margin-bottom:0}
.whoboth{margin-top:26px;border-left:2px solid var(--sg-blue);padding:3px 0 3px 20px;
  font-size:var(--fs-lead);line-height:1.6;color:var(--d-text);max-width:64ch}

/* the closing line, in the human voice used elsewhere on the site */
.abend{margin-top:6px;font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:clamp(21px,2.9vw,30px);line-height:1.4;letter-spacing:-.012em;
  color:var(--d-text);max-width:26ch}
.abact{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

/* ---------- Chart types: what we test on, and what we do not ----------
   The background is atmosphere, not content. It carries no meaning that is
   lost if it fails to load, and the copy column sits over near-solid
   surface so readability never depends on it.                           */
.ctsec{position:relative;overflow:hidden}
.ctbg{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;
  background-image:
    linear-gradient(94deg, var(--d-surface) 0%, rgba(12,19,21,.94) 34%,
                    rgba(12,19,21,.72) 62%, rgba(12,19,21,.62) 100%),
    url(assets/bg-2.webp);
  background-size:auto, cover;
  background-position:center, 72% 50%;
  background-repeat:no-repeat;
  opacity:.85;
  -webkit-mask-image:radial-gradient(118% 104% at 76% 48%, #000 0%,
                     rgba(0,0,0,.72) 42%, rgba(0,0,0,.22) 68%, transparent 86%);
          mask-image:radial-gradient(118% 104% at 76% 48%, #000 0%,
                     rgba(0,0,0,.72) 42%, rgba(0,0,0,.22) 68%, transparent 86%)}

.ctgrid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;
  gap:clamp(30px,4vw,52px);align-items:center}
@media(min-width:980px){
  .ctgrid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(40px,5vw,72px)}
}
.ctcopy{min-width:0}
.ctcopy .chiplist{margin-top:18px}

/* The capture. No frame, no card — the alpha edge does the blending. */
.ctno{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center}
.ctno img{display:block;width:100%;max-width:430px;height:auto}
@media(min-width:980px){.ctno img{max-width:470px}}
.ctcap{margin:6px 0 0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--d-muted);
  text-align:center;line-height:1.6}

/* Phones: the atmosphere is pulled right back so nothing sits behind the copy. */
@media(max-width:820px){
  .ctbg{opacity:.4;background-position:center, 60% 42%}
  .ctno img{max-width:340px}
}
@media(max-width:480px){
  .ctbg{opacity:.26}
  .ctno img{max-width:322px}
}
@media(prefers-reduced-motion:no-preference){}

/* ================= THE MANIFESTO =================
   A reading page, not a product page. Serif body, one column, generous
   measure, and no commercial interruption between the chapters.        */
.mfhero{position:relative;overflow:hidden}
.mfatmos{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(96deg, var(--d-bg) 4%, rgba(6,9,10,.90) 40%, rgba(6,9,10,.66) 100%),
                   url(assets/bg-3.webp);
  background-size:auto, cover;background-position:center, 70% 50%;background-repeat:no-repeat;
  opacity:.7;
  -webkit-mask-image:radial-gradient(120% 108% at 74% 46%, #000 0%, rgba(0,0,0,.6) 46%, transparent 84%);
          mask-image:radial-gradient(120% 108% at 74% 46%, #000 0%, rgba(0,0,0,.6) 46%, transparent 84%)}
.mfhero .wrap{position:relative;z-index:1}
.mfhero .hbig{max-width:19ch}
.mflead{font-family:"Newsreader",Georgia,serif;font-size:clamp(19px,2.1vw,23px);line-height:1.5;
  color:var(--d-text);max-width:46ch;margin:20px 0 0;font-style:italic}
.mfmeta{margin:26px 0 0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--d-muted);
  display:flex;flex-wrap:wrap;gap:8px 18px}

/* ---- contents ---- */
.mftoc{border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line);
  padding:6px 0;margin-top:6px}
.mftoc>summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;align-items:center;
  justify-content:space-between;gap:16px;min-height:var(--tap);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-mid)}
.mftoc>summary::-webkit-details-marker{display:none}
.mftoc>summary::after{content:"+";font-size:17px;color:var(--d-muted);line-height:1}
.mftoc[open]>summary::after{content:"\2013"}
.mftoc:focus-within>summary{color:var(--d-text)}
/* The grid sits on a grandchild. Setting display on a details element's own
   child stops the browser collapsing it, and the list then paints over the
   rest of the page. The open state is handled in script, not in CSS. */
.mftocwrap{min-width:0}
.mftoclist{display:grid;grid-template-columns:1fr;gap:1px 34px;padding:4px 0 20px;margin:0;list-style:none}
@media(min-width:760px){.mftoclist{grid-template-columns:1fr 1fr}}
.mftoclist a{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;color:var(--d-mid);text-decoration:none;border-bottom:1px solid transparent;
  font-size:15.5px;line-height:1.4}
.mftoclist a:hover{color:var(--d-text)}
.mftoclist .n{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);color:var(--d-muted)}
.mftoclist a:hover .n{color:var(--sg-blue)}

/* ---- the sticky place-marker ---- */
.mfbar{position:sticky;top:0;z-index:30;background:rgba(6,9,10,.93);
  backdrop-filter:saturate(140%) blur(9px);-webkit-backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid var(--d-line);margin-bottom:8px}
.mfbar .in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:46px;padding:6px 0}
.mfbar .now{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.mfbar .now b{color:var(--d-mid);font-weight:500}
.mfbar a{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--sg-blue);text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:var(--tap);padding:0 2px}
.mfbar a:hover{color:var(--d-text)}

/* ---- the reading column ---- */
.mfread{max-width:640px}
.mfch{padding:clamp(46px,6vw,78px) 0 0;position:relative;scroll-margin-top:56px}
.mfch+.mfch{border-top:1px solid var(--d-line)}
.mfnum{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.16em;
  color:var(--d-muted);margin:0 0 12px}
.mfch h2{margin:0;font-size:clamp(27px,3.7vw,40px);font-weight:800;letter-spacing:-.028em;
  line-height:1.1;color:var(--d-text);text-wrap:balance;max-width:17ch}
.mfquote{margin:26px 0 34px;border-left:2px solid var(--sg-green);padding:2px 0 2px 20px}
.mfquote p{margin:0;font-family:"Newsreader",Georgia,serif;font-style:italic;
  font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--d-text);max-width:50ch}
.mfbody p{font-family:"Newsreader",Georgia,serif;font-size:clamp(18px,1.35vw,19.5px);
  line-height:1.66;color:var(--d-mid);margin:0 0 15px;max-width:62ch}
.mfbody p:last-child{margin-bottom:0}
.mfrefl{margin:38px 0 0;border:1px solid var(--d-line);border-radius:14px;
  background:var(--d-card);padding:clamp(22px,2.6vw,30px)}
.mfrefl .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sg-blue);margin:0 0 13px}
.mfrefl p{font-family:"Newsreader",Georgia,serif;font-size:clamp(17.5px,1.3vw,19px);
  line-height:1.6;color:var(--d-text);margin:0 0 10px;max-width:54ch}
.mfrefl p:last-child{margin-bottom:0}
.mftop{margin:30px 0 0}
.mftop a{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--tap)}
.mftop a:hover{color:var(--sg-blue)}

/* Part IV and the conclusion read as the close, not as chapter twenty. */
.mfch.mfpart{padding-top:clamp(58px,7vw,96px)}
.mfch.mfpart h2{font-size:clamp(29px,4.2vw,46px)}
.mfpart .amb-mf{position:absolute;right:-6%;top:2%;width:clamp(230px,26vw,380px);aspect-ratio:1/1;
  background-image:url(assets/bg-4.webp);background-size:contain;background-repeat:no-repeat;
  opacity:.06;pointer-events:none;z-index:0;filter:saturate(.3)}
@media(max-width:1100px){.mfpart .amb-mf{display:none}}
.mfpart .mfnum,.mfpart h2,.mfpart .mfquote,.mfpart .mfbody,.mfpart .mfrefl{position:relative;z-index:1}

.mfend{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--d-line);
  padding-top:clamp(36px,4.4vw,54px)}
.mfend h2{margin:0 0 10px;font-size:clamp(23px,2.8vw,31px);font-weight:800;letter-spacing:-.024em;
  line-height:1.16;color:var(--d-text);max-width:22ch}
.mfend p{margin:0;font-size:16.5px;color:var(--d-mid);line-height:1.6;max-width:56ch}
.mfendact{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}

/* ---- the Learn feature ---- */
.mffeat{position:relative;overflow:hidden;border:1px solid var(--d-line-2);border-radius:18px;
  background:radial-gradient(120% 140% at 88% 0%, rgba(18,168,200,.09), transparent 62%), var(--d-raise);
  padding:clamp(28px,3.8vw,46px);margin-top:28px}
.mffeat .mk{position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:clamp(200px,24vw,320px);aspect-ratio:1/1;background-image:url(assets/bg-5.webp);
  background-size:contain;background-repeat:no-repeat;opacity:.055;filter:saturate(.25);
  pointer-events:none}
@media(max-width:1000px){.mffeat .mk{display:none}}
.mffeat>*{position:relative;z-index:1}
.mffeat h3{margin:0 0 14px;font-size:clamp(23px,2.9vw,32px);font-weight:800;letter-spacing:-.026em;
  line-height:1.14;color:var(--d-text);max-width:20ch}
.mffeat .fq{margin:0 0 18px;border-left:2px solid var(--sg-green);padding:2px 0 2px 18px;
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:clamp(17px,1.7vw,19px);
  line-height:1.5;color:var(--d-text);max-width:48ch}
.mffeat p.d{margin:0 0 22px;font-size:16.5px;line-height:1.62;color:var(--d-mid);max-width:56ch}
.mffeat .fm{margin:16px 0 0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--d-muted)}

/* ---- the three depths on Learn ---- */
.depths{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px}
@media(min-width:880px){.depths{grid-template-columns:repeat(3,1fr);gap:18px}}
.depths a{display:block;border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:20px 22px;text-decoration:none;transition:border-color .15s,background .15s}
.depths a:hover{border-color:var(--d-line-2);background:var(--d-raise)}
.depths .k{display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--d-muted);margin-bottom:8px}
.depths .t{display:block;font-size:17px;font-weight:700;letter-spacing:-.014em;color:var(--d-text);
  line-height:1.25;margin-bottom:6px}
.depths .d{display:block;font-size:14.5px;line-height:1.5;color:var(--d-mid)}
.depths a:hover .k{color:var(--sg-blue)}

/* ---------- the lineup: what is being built ----------
   Deliberately quieter than the available systems. Logos carry the interest,
   the status chip carries the truth, and nothing here looks purchasable.   */
.catlbl{margin:38px 0 0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--d-mid);
  display:flex;align-items:center;gap:14px}
.catlbl::after{content:"";flex:1;height:1px;background:var(--d-line)}
.catlbl.on{color:var(--s-up)}
.catnote{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--d-muted);max-width:60ch}

.lineup{display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px}
@media(min-width:560px){.lineup{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.lineup{grid-template-columns:repeat(4,1fr)}}
@media(min-width:560px){.lineup.two{grid-template-columns:repeat(2,1fr);max-width:680px}}
@media(min-width:860px){.lineup.three{grid-template-columns:repeat(3,1fr)}}
.lu{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:24px 20px 20px;display:flex;flex-direction:column;min-width:0;
  transition:border-color .15s,background .15s}
a.lu{text-decoration:none;color:inherit}
a.lu:hover{border-color:var(--d-line-2);background:var(--d-raise)}
a.lu:focus-visible{outline:2px solid var(--sg-blue);outline-offset:2px}
.lu .lg{height:112px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.lu .lg img{max-height:112px;max-width:100%;width:auto;object-fit:contain;opacity:.9}
a.lu:hover .lg img{opacity:1}
.lu .st{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--s-warn);margin:0}
/* released products carry more weight: brighter mark, live status, a way to buy */
.lu.on{border-color:var(--d-line-2);background:var(--d-raise)}
.lu.on .lg img{opacity:1}
.lu.on .st{color:var(--s-up)}
.lu.on .buy{margin:16px 0 0;font-size:15px;font-weight:700;color:var(--p-echo)}
a.lu.on:hover .buy{color:var(--d-text)}
.lu .ds{margin:9px 0 0;font-size:15px;line-height:1.55;color:var(--d-mid)}
.lu .more{margin:14px 0 0;font-size:14.5px;font-weight:600;color:var(--p-echo)}
a.lu:hover .more{color:var(--d-text)}
@media(max-width:560px){
  .lu{padding:20px 18px 18px}
  .lu .lg{height:96px;margin-bottom:14px}
  .lu .lg img{max-height:96px}
}

/* Home keeps one quiet line about the pipeline, not a wall of cards. */
.moreline{margin:22px 0 0;font-size:16px;line-height:1.6;color:var(--d-mid);max-width:66ch}
.moreline b{color:var(--d-text)}
.moreline a{color:var(--p-echo);font-weight:600;text-decoration:none;white-space:nowrap}
.moreline a:hover{color:var(--d-text)}

/* Six upcoming products in the Suite grid rather than two. */
.suiteset .bot.six{grid-template-columns:repeat(3,1fr);gap:1px;background:var(--d-line)}
.suiteset .bot.six .cell{border-right:0;background:var(--d-card)}
@media(max-width:620px){.suiteset .bot.six{grid-template-columns:repeat(2,1fr)}}

/* Products dropdown: two real categories, and a dot that does not pretend a
   product has an identity in the design system before it is released. */
.dd .ddrow .dot.soonDot{background:var(--d-line-2)}
.dd .ddcol h5+.ddrow{margin-top:2px}

/* ---------- How we build: the same atmosphere as Chart Types ----------
   One subdued layer across the whole section: the supplied frame, heavily
   darkened, with a gradient holding the copy side near-solid and a radial
   mask so it has no rectangular edges. Nothing sits on top of the type. */
.hwb{position:relative;overflow:hidden}
.hwb>.wrap{position:relative;z-index:1}
.hwbbg{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none;
  background-image:
    linear-gradient(94deg, var(--d-surface) 0%, rgba(12,19,21,.94) 34%,
                    rgba(12,19,21,.72) 62%, rgba(12,19,21,.62) 100%),
    url(assets/bg-6.webp);
  background-size:auto, cover;
  background-position:center, 74% 34%;
  background-repeat:no-repeat;
  opacity:.85;
  -webkit-mask-image:radial-gradient(118% 104% at 76% 44%, #000 0%,
                     rgba(0,0,0,.72) 42%, rgba(0,0,0,.22) 68%, transparent 86%);
          mask-image:radial-gradient(118% 104% at 76% 44%, #000 0%,
                     rgba(0,0,0,.72) 42%, rgba(0,0,0,.22) 68%, transparent 86%)}
@media(max-width:820px){.hwbbg{opacity:.4;background-position:center, 64% 30%}}
@media(max-width:480px){.hwbbg{opacity:.26}}

/* ---------- automation and discretion ----------
   The same system used three ways, not three products. Restrained: type,
   rules and spacing only, no new imagery.                                */
.ctrl{display:grid;grid-template-columns:1fr;gap:14px;margin-top:30px}
@media(min-width:860px){.ctrl{grid-template-columns:repeat(3,1fr);gap:18px}}
.ctrl .m{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:24px 22px}
.ctrl .k{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sg-blue);margin:0 0 11px}
.ctrl h3{margin:0 0 10px;font-size:clamp(19px,2.1vw,22px);font-weight:800;
  letter-spacing:-.02em;line-height:1.18;color:var(--d-text)}
.ctrl p{margin:0;font-size:15.5px;line-height:1.6;color:var(--d-mid);max-width:46ch}

/* the spectrum: one system, a range of use */
.spec{margin-top:30px;border:1px solid var(--d-line);border-radius:14px;
  background:var(--d-surface);padding:clamp(22px,2.8vw,30px)}
.speck{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted);margin:0}
.specbar{position:relative;height:2px;margin:26px 8px 0;
  background:linear-gradient(90deg,var(--p-echo),var(--sg-green))}
.specbar span{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--d-bg);border:2px solid var(--p-echo)}
.specbar span:nth-child(1){left:0}
.specbar span:nth-child(2){left:50%;border-color:#20BE9E}
.specbar span:nth-child(3){left:100%;border-color:var(--sg-green)}
.speclbl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:14px 4px 0;max-width:none;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-muted)}
.speclbl span:nth-child(2){text-align:center}
.speclbl span:nth-child(3){text-align:right}
.specnote{margin:22px 0 0;font-size:15.5px;line-height:1.6;color:var(--d-mid);max-width:60ch}
@media(max-width:560px){
  /* never below the 12px label floor: lose the tracking and let it wrap */
  .speclbl{letter-spacing:.02em;gap:6px;margin-left:0;margin-right:0}
  .specbar{margin-left:5px;margin-right:5px}
}

/* configuration is not discretion — two different things, shown apart */
.vs{display:grid;grid-template-columns:1fr;gap:16px;margin-top:30px}
@media(min-width:820px){.vs{grid-template-columns:1fr 1fr;gap:22px}}
.vs .c{border:1px solid var(--d-line);border-radius:14px;padding:24px 22px;
  background:var(--d-card)}
.vs .w{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--d-muted);margin:0 0 6px}
.vs h4{margin:0 0 14px;font-size:19px;font-weight:800;letter-spacing:-.018em;color:var(--d-text)}
.vs ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.vs li{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--d-mid);
  border:1px solid var(--d-line-2);border-radius:999px;padding:6px 12px;line-height:1.3}

.lockedin{margin:30px 0 0;max-width:none;text-wrap:nowrap;font-family:"Newsreader",Georgia,serif;font-weight:400;
  font-size:clamp(20px,2.6vw,27px);line-height:1.35;letter-spacing:-.012em;
  color:var(--d-text)}
@media(max-width:620px){.lockedin{text-wrap:balance;max-width:22ch}}

/* ---------- Plans: what is coming, clearly not for sale ---------- */
.comingrow{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:26px;
  background:var(--d-line);border:1px solid var(--d-line);border-radius:14px;overflow:hidden}
@media(min-width:760px){.comingrow{grid-template-columns:repeat(3,1fr)}}
.comingrow .ct{background:var(--d-card);padding:22px 14px 18px;display:flex;flex-direction:column;
  align-items:center;gap:9px;text-decoration:none;color:inherit;min-height:132px;
  justify-content:center;transition:background .15s}
@media(max-width:520px){.comingrow .lg,.comingrow .lg img{height:58px;max-height:58px}}
.comingrow a.ct:hover{background:var(--d-raise)}
.comingrow a.ct:focus-visible{outline:2px solid var(--sg-blue);outline-offset:-2px}
.comingrow .lg{display:flex;align-items:center;justify-content:center;height:70px}
.comingrow .lg img{max-height:70px;max-width:100%;width:auto;object-fit:contain;opacity:.72}
.comingrow a.ct:hover .lg img{opacity:.95}
.comingrow .cs{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--s-warn)}
.comingrow .cat{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.08em;color:var(--d-muted)}

/* ---------- the Suite story: today, next, and what is not announced ---------- */
.suiteset.big .cell{min-height:152px;padding:28px 16px}
.suiteset.big .cell img{max-height:58px}
@media(max-width:560px){.suiteset.big .cell{min-height:118px;padding:20px 12px}
  .suiteset.big .cell img{max-height:44px}}
.notall{margin-top:30px;border-left:2px solid var(--sg-green);padding:3px 0 3px 22px;max-width:66ch}
.notall .k{margin:0 0 9px;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--d-text)}
.notall p{margin:0;font-size:16.5px;line-height:1.62;color:var(--d-mid);max-width:62ch}
.suiteclose{margin:30px 0 0;font-size:var(--fs-lead);line-height:1.6;color:var(--d-mid);
  max-width:64ch}
.suiteclose b{color:var(--d-text)}

/* ---------- risk disclosure ----------
   Neutral, subdued, never alarming. No red, no banners, no hero warnings. */
.riskrow{display:grid;grid-template-columns:1fr;gap:10px 26px;align-items:start}
@media(min-width:900px){.riskrow{grid-template-columns:1fr auto;align-items:center}}
.riskrow .rk{margin:0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--d-muted)}
.riskrow p.rt{margin:6px 0 0;font-size:var(--fs-small);line-height:1.6;color:var(--d-muted);
  max-width:none}
.risklink{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-mid);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--d-line-2);padding-bottom:2px}
.risklink:hover{color:var(--d-text);border-color:var(--d-muted)}

/* the contextual one-liner that sits under evidence and community content */
.hypo{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.hypo .hk{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--s-warn)}
.hypo .hx{font-size:var(--fs-small);line-height:1.6;color:var(--d-muted);max-width:74ch}

/* the disclosure page itself */
.dsc{max-width:70ch}
.dsc h3{margin:34px 0 12px;font-size:clamp(19px,2.1vw,23px);font-weight:800;
  letter-spacing:-.02em;color:var(--d-text)}
.dsc p{font-size:16.5px;line-height:1.68;color:var(--d-mid);margin:0 0 14px;max-width:70ch}
.dscnote{border:1px solid var(--d-line-2);border-radius:14px;background:var(--d-card);
  padding:22px 24px;margin:26px 0 0;max-width:70ch}
.dscnote .k{margin:0 0 9px;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--s-warn)}
.dscnote p{margin:0;font-size:15.5px;line-height:1.62;color:var(--d-mid)}
.dscsrc{margin-top:34px;border-top:1px solid var(--d-line);padding-top:6px;max-width:70ch}
.dscsrc>summary{list-style:none;cursor:pointer;padding:15px 0;min-height:var(--tap);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-mid)}
.dscsrc>summary::-webkit-details-marker{display:none}
.dscsrc>summary::after{content:"+";font-size:17px;color:var(--d-muted)}
.dscsrc[open]>summary::after{content:"\2013"}
.dscsrcin p{font-size:15px;line-height:1.65;color:var(--d-muted);margin:0 0 12px;max-width:70ch}

/* ================= FAQ ================= */
.fqsearch{position:relative;margin-top:26px;max-width:560px}
.fqsearch svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  fill:none;stroke:var(--d-muted);stroke-width:2;pointer-events:none}
.fqsearch input{width:100%;min-height:52px;padding:0 46px 0 44px;border-radius:12px;
  border:1px solid var(--d-line-2);background:var(--d-card);color:var(--d-text);
  font-family:inherit;font-size:16.5px;outline:none;transition:border-color .15s,background .15s}
.fqsearch input::placeholder{color:var(--d-muted)}
.fqsearch input:focus{border-color:var(--sg-blue);background:var(--d-raise)}
.fqclear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:0;background:transparent;color:var(--d-muted);font-size:19px;line-height:1;cursor:pointer;
  border-radius:8px;display:none}
.fqclear:hover{color:var(--d-text);background:var(--d-line)}
.fqsearch.has .fqclear{display:block}
.fqcount{margin:14px 0 0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--d-muted);min-height:16px}

.fqnav{display:flex;gap:8px;margin-top:22px;overflow-x:auto;padding-bottom:4px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.fqnav::-webkit-scrollbar{display:none}
.fqnav a{flex:0 0 auto;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--d-mid);text-decoration:none;
  border:1px solid var(--d-line);border-radius:999px;padding:9px 14px;min-height:var(--tap);
  display:inline-flex;align-items:center;white-space:nowrap;transition:border-color .15s,color .15s}
.fqnav a:hover{color:var(--d-text);border-color:var(--d-line-2)}
.fqnav a:focus-visible{outline:2px solid var(--sg-blue);outline-offset:2px}
.fqnav a.off{opacity:.32;pointer-events:none}

.fqcat{margin-top:44px;scroll-margin-top:90px}
.fqcat>h2{margin:0 0 4px;font-size:clamp(19px,2.1vw,23px);font-weight:800;letter-spacing:-.02em;
  color:var(--d-text)}
.fqcat.hide{display:none}
.fqlist{border-top:1px solid var(--d-line);margin-top:14px}
.fqi{border-bottom:1px solid var(--d-line)}
.fqi.hide{display:none}
.fqi>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;
  justify-content:space-between;padding:18px 0;min-height:var(--tap);
  font-size:16.5px;font-weight:600;letter-spacing:-.01em;color:var(--d-text);line-height:1.4}
.fqi>summary::-webkit-details-marker{display:none}
.fqi>summary:hover{color:var(--p-echo)}
.fqi>summary:focus-visible{outline:2px solid var(--sg-blue);outline-offset:3px;border-radius:4px}
.fqi>summary .ic{flex:0 0 auto;width:20px;height:20px;position:relative}
.fqi>summary .ic::before,.fqi>summary .ic::after{content:"";position:absolute;background:var(--d-muted);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.fqi>summary .ic::before{width:13px;height:1.5px}
.fqi>summary .ic::after{width:1.5px;height:13px;transition:transform .18s}
.fqi[open]>summary .ic::after{transform:translate(-50%,-50%) scaleY(0)}
.fqi[open]>summary{color:var(--d-text)}
.fqa{padding:0 0 22px}
.fqa p{margin:0 0 12px;font-size:16px;line-height:1.68;color:var(--d-mid);max-width:70ch}
.fqa p:last-child{margin-bottom:0}
.fqa b{color:var(--d-text);font-weight:600}
.fqpull{border-left:2px solid var(--sg-green);padding:2px 0 2px 18px;color:var(--d-text)!important}
.fqterms{display:flex;flex-wrap:wrap;gap:8px;max-width:none!important}
.fqterms span{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--d-mid);
  border:1px solid var(--d-line-2);border-radius:999px;padding:6px 12px}
.fqi mark{background:rgba(18,168,200,.22);color:var(--d-text);border-radius:3px;padding:0 2px}

.fqempty{display:none;margin-top:40px;border:1px solid var(--d-line);border-radius:14px;
  background:var(--d-card);padding:30px 26px;max-width:56ch}
.fqempty.on{display:block}
.fqempty h3{margin:0 0 8px;font-size:19px;font-weight:800;color:var(--d-text)}
.fqempty p{margin:0;font-size:16px;line-height:1.6;color:var(--d-mid)}

/* ---------- Talk to Us ----------
   The contact experience sits at the top of the page, in the site's own
   language: dark ground, cyan for the action, green for the human path.
   Field metrics deliberately match the checkout fields (50px, 9px radius). */
.tkgrid{display:grid;grid-template-columns:1fr;gap:38px;align-items:start}
@media(min-width:940px){.tkgrid{grid-template-columns:1fr 1fr;gap:56px;align-items:center}}
@media(min-width:1180px){.tkgrid{grid-template-columns:1.02fr 1fr;gap:72px}}
.tkleft .hbig{margin-bottom:22px}
.tkleft .hlead{max-width:46ch}

.tkcard{border:1px solid var(--d-line-2);border-radius:16px;background:var(--d-card);
  padding:26px 24px 24px;min-width:0}
@media(min-width:940px){.tkcard{padding:30px 28px 28px}}
.tkcard .tkk{margin:0 0 20px;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--d-muted)}
.tkrow{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:520px){.tkrow.two{grid-template-columns:1fr 1fr}}
.tkf{display:block;min-width:0;margin-top:16px}
.tkf:first-child,.tkrow .tkf{margin-top:0}
.tkf>span{display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid);margin:0 0 8px}
.tkf input,.tkf select,.tkf textarea{width:100%;box-sizing:border-box;min-height:50px;
  border:1px solid var(--d-line-2);border-radius:9px;background:var(--d-bg);
  padding:13px 14px;font-family:"Chivo",sans-serif;font-size:16px;line-height:1.45;
  color:var(--d-text);-webkit-appearance:none;appearance:none;transition:border-color .15s}
.tkf textarea{min-height:112px;resize:vertical}
.tkf input::placeholder,.tkf textarea::placeholder{color:var(--d-muted);opacity:1}
.tkf input:hover,.tkf select:hover,.tkf textarea:hover{border-color:var(--d-muted)}
.tkf input:focus,.tkf select:focus,.tkf textarea:focus{outline:none;border-color:var(--sg-blue);
  box-shadow:0 0 0 3px rgba(18,168,200,.16)}
.tkf select{background-image:linear-gradient(45deg,transparent 50%,var(--d-muted) 50%),
  linear-gradient(135deg,var(--d-muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px;cursor:pointer}
.tkf select option{background:var(--d-card);color:var(--d-text)}
.tksend{margin-top:20px}
.tksend .btn{width:100%}
/* PROTO-NOTE — remove this rule and the matching <p class="tkproto"> at production */
.tkproto{margin:14px 0 0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.06em;color:var(--d-muted);line-height:1.55;max-width:none}
.tkerr{margin:12px 0 0;font-size:var(--fs-small);color:var(--s-down);line-height:1.5}
.tkerr[hidden]{display:none}

.tkdone{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:8px 0 4px}
.tkdone[hidden],#tkForm[hidden]{display:none}
.tkdone .tick{width:38px;height:38px;border-radius:50%;border:1px solid var(--s-up);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tkdone .tick svg{width:17px;height:17px;fill:none;stroke:var(--s-up);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.tkdone h3{margin:4px 0 0;font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--d-text)}
.tkdone p{margin:0;font-size:var(--fs-small);line-height:1.62;color:var(--d-mid);max-width:44ch}
.tkdone .again{background:none;border:0;padding:0;margin-top:4px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--d-muted);text-decoration:underline;
  text-underline-offset:4px;min-height:var(--tap)}
.tkdone .again:hover{color:var(--d-text)}

/* the two alternatives — clearly not the same thing as the form */
.tkalt{display:grid;grid-template-columns:1fr;gap:14px;margin-top:6px}
@media(min-width:760px){.tkalt{grid-template-columns:1fr 1fr;gap:18px}}
.tkalt a{border:1px solid var(--d-line);border-radius:14px;background:var(--d-card);
  padding:22px 22px 20px;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  gap:7px;transition:border-color .15s,background .15s}
.tkalt a:hover{border-color:var(--d-line-2);background:var(--d-raise)}
.tkalt a:focus-visible{outline:2px solid var(--sg-blue);outline-offset:2px}
.tkalt .q{margin:0;font-size:var(--fs-small);color:var(--d-muted);line-height:1.5}
.tkalt .g{margin:0;font-size:var(--fs-lead);font-weight:800;letter-spacing:-.02em;color:var(--d-text)}
.tkalt .w{margin:0;font-size:var(--fs-small);line-height:1.55;color:var(--d-mid)}
.tkalt .go{margin:8px 0 0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--p-echo)}
.tkalt a:hover .go{color:var(--d-text)}
.tkalt a.dsc .go{color:var(--discord)}
.tkalt a.dsc:hover .go{color:var(--d-text)}

.tkmore{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px}

/* the member-community band reads as its own section rather than merging
   into the membership section that follows it on the same ground */
#community-rail,#exp-community{border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line)}

/* a curated set of the same cards — uniform, not a scroll rail, so the
   section reads as deliberate rather than appended */
.mcset{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
@media(min-width:640px){.mcset{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.mcset{grid-template-columns:repeat(4,1fr)}}
.mcset .mccard{width:auto;flex:1 1 auto;scroll-snap-align:none}
.mcset .mccard .who{white-space:nowrap}
@media(min-width:1080px){.mcset .mccard .pic{height:236px}}

/* footer legal — no approved documents exist yet, so these are named but
   deliberately inert rather than pointing somewhere they do not belong */
.legal .pend{color:var(--d-muted);opacity:.72;cursor:default;
  text-decoration:underline dotted;text-underline-offset:3px}
.legalnote{margin:12px 0 0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.04em;line-height:1.6;color:var(--d-muted);max-width:78ch}

/* Touch targets — phones only, so the desktop footer and contents list are
   pixel-identical to what they are today. Padding only: no size, colour or
   layout change to the text itself. */
@media(max-width:900px){
  .risklink{display:inline-flex;align-items:center;min-height:var(--tap);
    padding:11px 0;border-bottom:0;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
  .mftoclist a{min-height:var(--tap);display:flex;align-items:center}
}

/* ---------- video embeds ----------
   The card, its border, radius, ground, tag and description are unchanged.
   Only the inside of the existing 16:9 .thumb box becomes the player. */
/* A real video is a link out to YouTube, not an inline frame: the artifact
   sandbox blocks third-party frames, and this works everywhere. The card
   design is unchanged — only the box became clickable. */
a.thumb.vplay{text-decoration:none;color:inherit;cursor:pointer;transition:background .15s}
a.thumb.vplay:hover{background:var(--d-raise)}
a.thumb.vplay:hover .play{border-color:var(--p-echo)}
a.thumb.vplay:hover .play svg{fill:var(--p-echo)}
a.thumb.vplay:focus-visible{outline:2px solid var(--p-echo);outline-offset:-3px}
/* the dashed outline marks an empty slot — a real video is not one */
.vcardv a.thumb.vplay::after{content:none}
.vgo{position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-muted)}
a.thumb.vplay:hover .vgo{color:var(--d-text)}

/* the Short keeps its portrait box and becomes the same kind of link */
a.vshortbox.vplay{display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:inherit;cursor:pointer;transition:background .15s}
a.vshortbox.vplay:hover{background:var(--d-raise)}
a.vshortbox.vplay:hover .play{border-color:var(--p-echo)}
a.vshortbox.vplay:hover .play svg{fill:var(--p-echo)}
a.vshortbox.vplay:focus-visible{outline:2px solid var(--p-echo);outline-offset:-3px}
.vcardv .thumb{overflow:hidden}

/* The real YouTube still, served from this theme's /assets/.
   It fills the existing 16:9 (or portrait) box and sits UNDER the play glyph
   and the "Watch on YouTube" label, both of which already carry their own
   stacking. The box, its border, radius and aspect ratio are unchanged. */
a.thumb.vplay .ythumb,
a.vshortbox.vplay .ythumb{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0}
a.vshortbox.vplay{position:relative;overflow:hidden}
/* The Short card is 9/16 and the poster is 16/9, so covering it would crop away
   the wordmark and the headline and leave only the mark. Letterbox it instead:
   the poster's own ground is near-black (rgb 0 6 11) against the card's
   #0C1315, so the fit reads as one surface and the branding stays whole. */
a.vshortbox.vplay .ythumb{object-fit:contain}

/* a single video keeps the same card width as one column of the grid,
   rather than stretching across the page */
.vsolo{margin-top:28px;max-width:640px}

/* a YouTube Short is portrait — small, centred, same card language */
.vshort{margin-top:28px;display:flex;justify-content:center}
.vshortbox{position:relative;aspect-ratio:9/16;width:100%;max-width:300px;
  border:1px solid var(--d-line);border-radius:13px;overflow:hidden;background:var(--d-surface)}
@media(min-width:760px){.vshortbox{max-width:324px}}

/* ---------- reserved, not yet published ----------
   The three Learn video sections have no videos behind them yet. They are
   hidden rather than deleted so nothing has to be rebuilt: delete this one
   rule (or the sg-pending class on those sections) to bring them back. */
.sg-pending{display:none}

/* ---------- backtest / live comparison, now filled ----------
   The reserved panel becomes a real one: solid border instead of the dashed
   "nothing here yet" outline, and the capture sized to its own aspect. */
.epanel.filled{border-style:solid;border-color:var(--d-line);background:var(--d-card);
  min-height:0;padding:0;overflow:hidden;margin:0;display:flex;flex-direction:column}
.epanel.filled .eh{padding:16px 18px 14px;border-bottom:1px solid var(--d-line);
  background:var(--d-surface);margin-bottom:0;display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.epanel.filled .et{font-weight:800;font-size:19px;letter-spacing:-.02em}
.epanel.filled .eb{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.08em;text-transform:none;color:var(--d-muted)}
.epanel.filled .epic{background:#080B0C}
.eshot{display:block;width:100%;aspect-ratio:1/1;background-repeat:no-repeat;
  background-position:center top;background-size:100% auto;background-color:#080B0C}
.hwb-backtest{background-image:url(assets/hwb-backtest.webp)}
.hwb-live{background-image:url(assets/hwb-live.webp)}
/* the same mobile rule every other wide chart on the site uses: scroll it
   locally rather than crushing the trade labels */
@media(max-width:760px){
  .epanel.filled .epic{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain}
  .epanel.filled .eshot{min-width:640px}
}

/* ---------- ECHO Strategy Analyzer evidence ---------- */
.echo-daily{background-image:url(assets/echo-daily.webp);aspect-ratio:640/607}
.echo-cumulative{background-image:url(assets/echo-cumulative.webp);aspect-ratio:640/607}
.echo-summary{background-image:url(assets/echo-summary.webp);aspect-ratio:640/640}

/* ---------- ORS: Fusion combined-configuration evidence ---------- */
.ors-drawdown{background-image:url(assets/ors-drawdown.webp);aspect-ratio:655/631}
.ors-equity{background-image:url(assets/ors-equity.webp);aspect-ratio:643/494}
.ors-calendar{background-image:url(assets/ors-calendar.webp);aspect-ratio:647/656}

/* ---------- RECON and PRISM chart captures ---------- */
.recon-fvg{background-image:url(assets/recon-fvg.webp);aspect-ratio:1079/654}
.prism-full{background-image:url(assets/prism-full.webp);aspect-ratio:585/648}
.prism-compact{background-image:url(assets/prism-compact.webp);aspect-ratio:659/640}

/* ---------- platform acknowledgment ----------
   Small, quiet, and the last thing before the footer. Neutral grey at low
   opacity so it registers as a platform note rather than a second brand:
   nothing here introduces a new accent colour. */
.techack{background:var(--d-bg);border-top:1px solid var(--d-line);
  padding:54px 0 58px;text-align:center}
.techack .wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.tak{margin:0;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-muted);opacity:.8}
.tamark{display:block;width:100%;max-width:176px;height:auto;opacity:.72}
.tat{margin:0;max-width:58ch;font-size:13.5px;line-height:1.55;color:var(--d-muted);opacity:.85}
@media(max-width:760px){
  .techack{padding:40px 0 44px}
  .techack .wrap{gap:17px}
  .tamark{max-width:152px}
  .tat{font-size:13px}
}
@media(max-width:400px){.tamark{max-width:134px}}

/* ---------- more than the strategy: member tools ----------
   Three short blocks, then the two supplied spreadsheets at their captured
   size. The sheets are held at native pixel width instead of being scaled
   into a column: halved, their cell text lands around six pixels and stops
   being readable, which would defeat showing them at all. Below that width
   each sheet scrolls inside its own frame, exactly as the Evidence captures
   do, so the page never scrolls sideways. */
.mtgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:34px 0 0}
.mtcard{background:var(--d-card);border:1px solid var(--d-line);border-radius:12px;padding:24px 24px 26px}
.mtcard h3{margin:0 0 10px;font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--d-text)}
.mtcard p{margin:0;font-size:15px;line-height:1.6;color:var(--d-mid)}

.mttools{margin:42px 0 0;padding:28px 0 0;border-top:1px solid var(--d-line)}
.mthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 22px}
.eyebrow.sm{margin:0;font-size:var(--fs-micro);letter-spacing:.16em}
/* the global hint is phone-only; these sheets also scroll on tablets and small
   laptops, so within this section it shows wherever they actually overflow */
.mthead .evswipe{margin:0}
@media(max-width:1179px){.mthead .evswipe{display:block}}

.sheet{margin:0 0 22px;background:var(--d-card);border:1px solid var(--d-line);
  border-radius:12px;overflow:hidden}
.shcap{padding:18px 22px 16px;border-bottom:1px solid var(--d-line);background:var(--d-surface)}
.shn{display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.14em;text-transform:uppercase;color:var(--p-echo);margin:0 0 7px}
.shd{display:block;font-size:14.5px;line-height:1.55;color:var(--d-mid)}
/* the frame scrolls; the sheet inside it never shrinks below what it was captured at */
.shpic{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;background:#0A0F11}
.shimg{display:block;height:auto;margin:0 auto;
  max-width:none  /* the global img cap would shrink the sheet back into the column */}
.sh-trade{width:1034px}
.sh-risk{width:1139px}

.mtclose{margin:26px 0 0;font-family:"IBM Plex Mono",monospace;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--d-mid);line-height:1.6}

/* At full width the risk sheet overshoots the column by five pixels. Letting it
   fit there costs a 0.4% downscale and removes a pointless scrollbar nub; below
   1180 the frame scrolls instead, so the sheet never actually shrinks. */
@media(min-width:1180px){.shimg{max-width:100%}}
@media(max-width:1000px){.mtgrid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  .mtgrid{grid-template-columns:1fr;gap:14px}
  .mtcard{padding:20px 20px 22px}
  .mttools{margin-top:34px}
  .shcap{padding:16px 18px 14px}
  .mtclose{font-size:13px}
}

/* ---------- checkout coupon bar ----------
   Production opens its subscription checkout with this. Nothing new is drawn:
   the input matches the checkout's existing faux-field geometry exactly, and
   the button is the standard ghost button. Subscription paths only. */
.ccpage .cpn{margin:0 0 22px;border:1px solid var(--d-line);border-radius:11px;
  background:var(--d-card);overflow:hidden}
.ccpage .cpntoggle{display:flex;align-items:center;gap:10px;width:100%;
  min-height:var(--tap);padding:14px 18px;background:none;border:0;cursor:pointer;
  text-align:left;font-family:"Chivo",sans-serif;font-size:15px;color:var(--d-text)}
.ccpage .cpntoggle:hover{background:rgba(255,255,255,.03)}
.ccpage .cpntoggle:focus-visible{outline:2px solid var(--sg-blue);outline-offset:-2px}
.ccpage .cpnq{font-weight:700}
.ccpage .cpna{color:var(--p-echo);text-decoration:underline;text-underline-offset:3px}
.ccpage .cpnchev{margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--d-muted);border-bottom:2px solid var(--d-muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.ccpage .cpntoggle[aria-expanded="true"] .cpnchev{transform:rotate(-135deg) translate(-3px,-3px)}
.ccpage .cpnpanel{padding:0 18px 18px;border-top:1px solid var(--d-line)}
.ccpage .cpnrow{display:flex;gap:12px;align-items:flex-end;padding-top:16px}
.ccpage .cpnfield{flex:1 1 auto;min-width:0;display:block}
.ccpage .cpnlab{display:block;font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid);margin:0 0 8px}
/* same geometry as .ccpage .fld .fi, so it sits in the existing field rhythm */
.ccpage .cpnfield input{width:100%;box-sizing:border-box;min-height:50px;
  border:1px solid var(--d-line-2);border-radius:9px;background:var(--d-bg);
  padding:13px 14px;font-family:"Chivo",sans-serif;font-size:16px;line-height:1.45;
  color:var(--d-text);-webkit-appearance:none;appearance:none;transition:border-color .15s}
.ccpage .cpnfield input::placeholder{color:var(--d-muted);opacity:1}
.ccpage .cpnfield input:hover{border-color:var(--d-muted)}
.ccpage .cpnfield input:focus{outline:none;border-color:var(--sg-blue);
  box-shadow:0 0 0 3px rgba(18,168,200,.16)}
.ccpage .cpnapply{flex:none;min-height:50px}
.ccpage .cpnmsg{margin:12px 0 0;font-size:var(--fs-small);line-height:1.55;color:var(--d-mid)}
.ccpage .cpnmsg:empty{display:none}
.ccpage .cpnmsg b{color:var(--d-text);font-family:"IBM Plex Mono",monospace;
  letter-spacing:.06em}
.ccpage .cpnmsg.err{color:var(--s-down)}
@media(max-width:560px){
  .ccpage .cpnrow{flex-direction:column;align-items:stretch;gap:10px}
  .ccpage .cpnapply{width:100%}
  .ccpage .cpntoggle{flex-wrap:wrap;gap:4px 8px;padding:13px 15px}
  .ccpage .cpnchev{margin-left:auto}
  .ccpage .cpnpanel{padding:0 15px 16px}
}

/* ---------- view switching ---------- */
.view{display:none}
.view.active{display:block}

/* =========================================================================
   Astra integration layer
   Astra paints the site background from its own global-colour variables,
   emitted late from the Customizer at a specificity a plain child rule
   cannot cleanly outrank. Rather than fight it selector by selector, we
   repoint Astra's variables at the StratGeeks tokens: Astra keeps using its
   own plumbing, it just resolves to the approved palette.
   ========================================================================= */
:root{--ast-global-color-0:var(--sg-blue);--ast-global-color-1:var(--sg-blue);--ast-global-color-2:var(--d-text);--ast-global-color-3:var(--d-mid);--ast-global-color-4:var(--d-bg);--ast-global-color-5:var(--d-surface);--ast-global-color-6:var(--d-line);--ast-global-color-7:var(--d-text);--ast-global-color-8:var(--d-mid)}
html body{background-color:var(--d-bg) !important;color:var(--d-text)}
body.ast-separate-container,body.ast-plain-container,body.ast-page-builder-template{background-color:var(--d-bg)}
.ast-separate-container .ast-article-single,.ast-separate-container .ast-article-post,.ast-separate-container #primary,.ast-plain-container #primary,#page,#content,.site,.site-content,.entry-content{background:transparent}

/* Escape dismisses a dropdown the keyboard opened. The approved CSS opens
   these with :focus-within, which cannot be cancelled without moving focus;
   this lets the panel close while focus stays on its trigger. */
.has-dd.dd-dismissed .dd{display:none}

/* Astra wraps page content in #content > .ast-container, which is display:flex
   with a 1240px cap so a sidebar can sit beside the article. The approved
   design has no sidebar and its sections are full-bleed, each managing its own
   width through .wrap — left as a flex row the sections rendered side by side
   as columns. Unsetting the container restores normal block flow. */
#content > .ast-container{display:block;max-width:none;padding:0}
#primary,.ast-primary-content{margin:0;padding:0;width:100%;max-width:none}
.entry-content{margin:0}

/* ---------- Contact Form 7 integration layer ----------
   Talk to Us renders production's Contact Form 7 form 133 rather than a form
   of its own, so the form's fields, validation, messages and mail behaviour
   stay entirely CF7's. What follows only dresses CF7's markup in the approved
   card treatment: the same field geometry as .tkf, the same button, the same
   spacing. No behaviour is added here and nothing is repositioned.

   CF7 wraps every control in span.wpcf7-form-control-wrap inside a <label>.
   Form 133 carries no visible label text except "Are you a member", so the
   fields read from their placeholders, exactly as they do on the live site. */
.tkcard .wpcf7{margin:0}
.tkcard .wpcf7-form>label,.tkcard .wpcf7-form>p{display:block;margin:16px 0 0}
.tkcard .wpcf7-form>label:first-of-type,.tkcard .wpcf7-form>p:first-of-type{margin-top:0}
.tkcard .wpcf7-form-control-wrap{display:block;margin-top:8px}
.tkcard .wpcf7-form label{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--d-mid)}
.tkcard .wpcf7-form input[type=text],.tkcard .wpcf7-form input[type=tel],
.tkcard .wpcf7-form input[type=email],.tkcard .wpcf7-form select,
.tkcard .wpcf7-form textarea{width:100%;box-sizing:border-box;min-height:50px;
  border:1px solid var(--d-line-2);border-radius:9px;background:var(--d-bg);
  padding:13px 14px;font-family:"Chivo",sans-serif;font-size:16px;line-height:1.45;
  color:var(--d-text);letter-spacing:normal;text-transform:none;
  -webkit-appearance:none;appearance:none;transition:border-color .15s}
.tkcard .wpcf7-form textarea{min-height:112px;resize:vertical}
.tkcard .wpcf7-form input::placeholder,.tkcard .wpcf7-form textarea::placeholder{
  color:var(--d-muted);opacity:1}
.tkcard .wpcf7-form input:hover,.tkcard .wpcf7-form select:hover,
.tkcard .wpcf7-form textarea:hover{border-color:var(--d-muted)}
.tkcard .wpcf7-form input:focus,.tkcard .wpcf7-form select:focus,
.tkcard .wpcf7-form textarea:focus{outline:none;border-color:var(--sg-blue);
  box-shadow:0 0 0 3px rgba(18,168,200,.16)}
/* the same chevron the prototype's select carries */
.tkcard .wpcf7-form select{background-image:
  linear-gradient(45deg,transparent 50%,var(--d-muted) 50%),
  linear-gradient(135deg,var(--d-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.tkcard .wpcf7-form select option{background:var(--d-card);color:var(--d-text)}
/* Submit reuses the primary button rather than inventing one */
.tkcard .wpcf7-form input[type=submit]{display:block;width:100%;margin-top:20px;
  min-height:var(--tap);padding:15px 22px;border:0;border-radius:10px;cursor:pointer;
  background:var(--sg-green);color:#05210A;font-family:"Chivo",sans-serif;
  font-size:16px;font-weight:700;letter-spacing:normal;text-transform:none;
  transition:filter .15s}
.tkcard .wpcf7-form input[type=submit]:hover{filter:brightness(1.06)}
.tkcard .wpcf7-form input[type=submit]:focus-visible{outline:2px solid var(--sg-blue);
  outline-offset:2px}
.tkcard .wpcf7-spinner{margin:12px auto 0;display:block}
/* CF7 owns the wording of these; the theme only makes them legible */
.tkcard .wpcf7-response-output{margin:16px 0 0;padding:12px 14px;border-radius:9px;
  border:1px solid var(--d-line-2);background:var(--d-bg);font-size:var(--fs-small);
  line-height:1.55;color:var(--d-mid)}
.tkcard form.sent .wpcf7-response-output{border-color:var(--s-up);color:var(--d-text)}
.tkcard form.invalid .wpcf7-response-output,
.tkcard form.failed .wpcf7-response-output{border-color:var(--s-down);color:var(--d-text)}
.tkcard .wpcf7-not-valid-tip{display:block;margin-top:7px;font-family:"Chivo",sans-serif;
  font-size:var(--fs-small);letter-spacing:normal;text-transform:none;color:var(--s-down)}
.tkcard .wpcf7-form input.wpcf7-not-valid,.tkcard .wpcf7-form select.wpcf7-not-valid,
.tkcard .wpcf7-form textarea.wpcf7-not-valid{border-color:var(--s-down)}

/* The build-environment preview shown when CF7 is not installed. It is never
   rendered on a site that has the plugin. */
.tkpreview .tkpn{margin:0 0 18px;padding:12px 14px;border-radius:9px;
  border:1px solid rgba(224,172,87,.4);background:#140F04;color:#D9C39A;
  font-size:var(--fs-small);line-height:1.55}
.tkpreview .tkpn b{color:#F0DCB4}
.tkpreview .wpcf7-form-control:disabled{opacity:.7;cursor:not-allowed}

/* ==========================================================================
   The StratGeeks Concierge
   A small software panel, not a chat widget: same tokens, borders, radii and
   type as the rest of the site. Scoped entirely under .sg-help / .sg-help-fab
   so it cannot reach any existing component.
   ========================================================================== */

.sg-help-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the launcher */
.sg-help-fab{position:fixed;right:18px;bottom:18px;z-index:940;
  display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  padding:0 16px;border:1px solid var(--d-line-2);border-radius:10px;
  background:var(--d-card);color:var(--d-text);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.45);transition:border-color .15s,background .15s}
.sg-help-fab:hover{background:var(--d-raise);border-color:var(--sg-cyan,var(--p-echo))}
.sg-help-fab:focus-visible{outline:2px solid var(--p-echo);outline-offset:3px}
.sg-help-fab svg{width:17px;height:17px;fill:none;stroke:var(--p-echo);stroke-width:1.6;flex:none}
.sg-help-fab .sg-help-dot{fill:var(--p-echo);stroke:none}

/* the panel */
.sg-help{position:fixed;right:18px;bottom:76px;z-index:950;
  width:min(384px,calc(100vw - 36px));max-height:min(78vh,660px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--d-surface);border:1px solid var(--d-line-2);border-radius:14px;
  box-shadow:0 26px 70px rgba(0,0,0,.62)}
.sg-help[hidden]{display:none}

.sg-help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:15px 15px 12px;border-bottom:1px solid var(--d-line)}
.sg-help-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--p-echo);margin:0}
.sg-help-lead{font-size:15px;color:var(--d-text);margin:5px 0 0;max-width:none}
.sg-help-x{width:var(--tap);height:var(--tap);margin:-7px -7px 0 0;padding:0;line-height:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;border-radius:8px;
  color:var(--d-muted);cursor:pointer}
.sg-help-x:hover{color:var(--d-text);border-color:var(--d-line-2)}
.sg-help-x:focus-visible{outline:2px solid var(--p-echo);outline-offset:-2px}
.sg-help-x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}

.sg-help-body{padding:14px 15px 4px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;
  -webkit-overflow-scrolling:touch}
/* answers are approved copy and can carry long URLs; wrap rather than scroll */
.sg-help-answer,.sg-help-q,.sg-help-k,.sg-help-s{overflow-wrap:anywhere}

/* search */
.sg-help-search{position:relative;display:flex;align-items:center}
.sg-help-search svg{position:absolute;left:11px;width:15px;height:15px;
  fill:none;stroke:var(--d-muted);stroke-width:1.7;pointer-events:none}
.sg-help-search input{width:100%;min-height:var(--tap);padding:0 38px 0 34px;
  background:var(--d-bg);color:var(--d-text);
  border:1px solid var(--d-line-2);border-radius:9px;
  font-family:inherit;font-size:16px}
.sg-help-search input::placeholder{color:var(--d-muted)}
.sg-help-search input:focus{outline:none;border-color:var(--p-echo)}
.sg-help-clear{position:absolute;right:5px;width:34px;height:34px;padding:0;line-height:0;
  background:transparent;border:0;border-radius:7px;color:var(--d-muted);cursor:pointer;font-size:19px}
.sg-help-clear:hover{color:var(--d-text)}
.sg-help-note{font-size:var(--fs-micro);color:var(--d-muted);margin:7px 0 0;max-width:none}

/* menu + choices */
.sg-help-menu{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.sg-help-item{display:block;width:100%;text-align:left;text-decoration:none;cursor:pointer;
  min-height:var(--tap);padding:11px 13px;
  background:var(--d-card);border:1px solid var(--d-line);border-radius:10px;
  color:var(--d-text);font-family:inherit;transition:border-color .15s,background .15s}
.sg-help-item:hover{background:var(--d-raise);border-color:var(--d-line-2)}
.sg-help-item:focus-visible{outline:2px solid var(--p-echo);outline-offset:2px}
.sg-help-k{display:block;font-size:14.5px;font-weight:600;color:var(--d-text)}
.sg-help-s{display:block;font-size:13px;color:var(--d-mid);margin-top:2px;max-width:none}

.sg-help-back{display:inline-flex;align-items:center;gap:5px;min-height:var(--tap);
  padding:0;background:none;border:0;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--d-muted)}
.sg-help-back:hover{color:var(--d-text)}
.sg-help-back:focus-visible{outline:2px solid var(--p-echo);outline-offset:2px}
.sg-help-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* results */
.sg-help-cat{font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--d-muted);margin:13px 0 5px}
.sg-help-q{font-size:15px;font-weight:600;color:var(--d-text);margin:0 0 8px;max-width:none}
.sg-help-answer{font-size:14px;color:var(--d-mid);margin-top:10px;
  padding:12px 13px;background:var(--d-card);border:1px solid var(--d-line);border-radius:10px}
.sg-help-answer p{font-size:14px;color:var(--d-mid);margin:0 0 9px;max-width:none}
.sg-help-answer p:last-child{margin-bottom:0}
.sg-help-answer a{color:var(--p-echo)}
.sg-help-deep{display:inline-block;margin-top:11px;
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--p-echo);text-decoration:none}
.sg-help-deep:hover{text-decoration:underline;text-underline-offset:4px}
.sg-help-miss{font-size:15px;color:var(--d-text);margin:13px 0 4px;max-width:none}
.sg-help-fine{font-size:var(--fs-micro);color:var(--d-muted);margin:8px 0 0;max-width:none;line-height:1.55}

.sg-help-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sg-help-go{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 15px;
  background:var(--p-echo);color:var(--d-bg);border:0;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;text-decoration:none}
.sg-help-go:hover{filter:brightness(1.08)}
.sg-help-go:focus-visible{outline:2px solid var(--p-echo);outline-offset:3px}
.sg-help-alt{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 15px;
  background:transparent;color:var(--d-text);border:1px solid var(--d-line-2);border-radius:9px;
  font-size:13.5px;text-decoration:none}
.sg-help-alt:hover{background:var(--d-raise)}
.sg-help-alt:focus-visible{outline:2px solid var(--p-echo);outline-offset:2px}

/* email handoff */
.sg-help-foot{padding:13px 15px 15px;border-top:1px solid var(--d-line);background:var(--d-bg)}
.sg-help-footk{font-size:13.5px;color:var(--d-text);margin:0 0 9px;max-width:none}
.sg-help-mail{display:flex;gap:8px;flex-wrap:wrap}
.sg-help-mail input{flex:1 1 150px;min-width:0;min-height:var(--tap);padding:0 12px;
  background:var(--d-surface);color:var(--d-text);
  border:1px solid var(--d-line-2);border-radius:9px;font-family:inherit;font-size:16px}
.sg-help-mail input::placeholder{color:var(--d-muted)}
.sg-help-mail input:focus{outline:none;border-color:var(--p-echo)}

/* the FAQ entry a Concierge deep link landed on */
.fqi.sg-fq-hit{outline:2px solid var(--p-echo);outline-offset:3px;border-radius:8px}

@media(max-width:520px){
  .sg-help{right:10px;left:10px;bottom:70px;width:auto;max-height:74vh}
  .sg-help-fab{right:10px;bottom:10px}
}