/* QuantSmart — shared styles
   ---------------------------------------------------------------
   The product measures strategies honestly, which mostly means
   subtracting things from flattering numbers. The design follows:
   paper and ink rather than the dark dashboard look, one red used
   only where something is taken away, and figures set in tabular
   numerals so columns line up and can be read against each other.  */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --paper:#faf8f4;
  --paper-2:#f2efe8;
  --ink:#141a1f;
  --ink-2:#3d4852;
  --slate:#6b7885;
  --rule:#e0dbd1;
  --blue:#1b4f8c;        /* interactive only */
  --blue-soft:#eaf0f7;
  --sub:#a33a2a;         /* used only where something is subtracted */
  --add:#2f6b4f;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:17px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}

h1,h2,h3,h4,nav,button,input,select,label,table,.ui{
  font-family:'IBM Plex Sans',-apple-system,Segoe UI,Roboto,sans-serif;
}

a{color:var(--blue);text-decoration:none;
  border-bottom:1px solid rgba(27,79,140,.28)}
a:hover{border-bottom-color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- masthead ---------- */
.mast{border-bottom:1px solid var(--rule);background:var(--paper);
  position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,0.03)}
.mast-in{max-width:1420px;margin:0 auto;padding:.45rem 1.6rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:74px}
/* ---------- brand cluster: company & flagship product 3.0 ---------- */
.brand-cluster{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo-qs{display:flex;align-items:center;border:0;flex-shrink:0;text-decoration:none}
.logo-qs img{height:54px;max-height:54px;width:auto;display:block;object-fit:contain;transition:all .15s ease}
.brand-divider{display:inline-block;width:1px;height:36px;background:#cbd5e1;flex-shrink:0}
.logo-product{display:flex;align-items:center;gap:8px;border:0;flex-shrink:0;text-decoration:none;
  padding:2px 6px;border-radius:6px;transition:all .15s ease}
.logo-product:hover{background:rgba(224,231,255,0.45)}
.logo-product img{height:46px;max-height:46px;width:auto;display:block;object-fit:contain;transition:transform .15s ease}
.logo-product:hover img{transform:translateY(-1px)}
.product-badge-tag{font-family:'IBM Plex Sans',sans-serif;font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;background:#dbeafe;color:#1e40af;
  padding:2px 7px;border-radius:4px;border:1px solid #bfdbfe;white-space:nowrap;line-height:1}

/* Nav Product Item styling */
.mast nav a.nav-product-link{display:inline-flex;align-items:center;gap:4px}
.nav-product-link .prod-num{font-size:.64rem;font-weight:700;background:#dbeafe;color:#1e40af;
  padding:1px 5px;border-radius:3px;vertical-align:middle;line-height:1.2}
.mast nav a.nav-product-link.here .prod-num{background:#3b82f6;color:#ffffff}

.logo{display:flex;align-items:center;gap:12px;border:0;flex-shrink:0}
.logo img{height:62px;max-height:62px;width:auto;display:block;object-fit:contain;transition:all .15s ease}
.logo b{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:1.25rem;
  letter-spacing:-.2px;color:var(--ink)}
.logo span{display:block;font-size:.85rem;font-family:'IBM Plex Sans',sans-serif;
  color:var(--slate);font-weight:400;margin-top:-2px}
.mast nav{display:flex;align-items:center;gap:.35rem;flex-wrap:nowrap;margin-left:auto}
.mast nav a{font-family:'IBM Plex Sans',sans-serif;font-size:.84rem;color:var(--ink-2);border:0;
  font-weight:550;padding:.32rem .55rem;border-radius:5px;text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease, color .15s ease}
.mast nav a:hover{background:#f1f5f9;color:var(--ink)}
.mast nav a.here{background:var(--ink) !important;color:#ffffff !important;
  box-shadow:none !important;border:0 !important;font-weight:600}
.mast nav a.tool{background:var(--ink);color:#ffffff !important;
  padding:.34rem .72rem;border-radius:5px;font-weight:600;border:0;white-space:nowrap}
.mast nav a.tool:hover{background:#1e293b;color:#ffffff !important}
.mast nav a.tool:first-of-type{margin-left:.25rem}

/* Top mobile control bar */
.mast-mobile-ctrl{display:none;align-items:center;gap:.5rem;margin-left:auto}
.btn-nav-toggle{display:none;background:transparent;border:1px solid #cbd5e1;border-radius:5px;
  padding:.32rem .6rem;font-size:1.15rem;line-height:1;cursor:pointer;color:var(--ink)}
.btn-nav-toggle:hover{background:#f1f5f9}

/* User pill & logout button in masthead */
.qs-user-pill{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;
  color:var(--ink);background:#f1f5f9;border:1px solid #cbd5e1;padding:.26rem .65rem;
  border-radius:20px;white-space:nowrap;margin-left:.35rem}
.qs-badge-admin{background:#0f172a;color:#facc15;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;padding:.12rem .42rem;border-radius:4px}
.qs-badge-plan{background:var(--blue);color:#ffffff;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;padding:.12rem .42rem;border-radius:4px}
.qs-uname{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-logout{background:transparent !important;color:var(--ink-2) !important;
  border:1px solid #cbd5e1 !important;padding:.28rem .7rem !important;border-radius:5px !important;
  font-size:.82rem !important;font-weight:600 !important;cursor:pointer !important;
  display:inline-flex !important;align-items:center !important;gap:4px !important;
  transition:all .15s ease !important;text-decoration:none !important;font-family:inherit !important;
  white-space:nowrap !important}
.btn-logout:hover{background:#fee2e2 !important;border-color:#fca5a5 !important;color:#991b1b !important}

/* Dedicated mobile logout button */
.btn-logout-mobile{display:none;background:#fef2f2 !important;color:#b91c1c !important;
  border:1px solid #fca5a5 !important;padding:.26rem .65rem !important;border-radius:5px !important;
  font-size:.8rem !important;font-weight:650 !important;cursor:pointer !important;white-space:nowrap !important}
.btn-logout-mobile:hover{background:#fee2e2 !important;color:#991b1b !important}

/* Engine status badge */
.engine-status{display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;font-weight:550;color:var(--slate);
  background:rgba(15,23,42,0.035);border:1px solid rgba(15,23,42,0.1);
  padding:.22rem .58rem;border-radius:20px;white-space:nowrap;margin:0 .15rem}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,0.25);flex-shrink:0;vertical-align:middle}
.dot.on{background:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,0.3)}

/* Pricing upgrade & unsubscribe components */
.upgrade-banner{background:#ecfdf5;border:1px solid #a7f3d0;border-left:4px solid #059669;
  border-radius:6px;padding:1rem 1.25rem;margin:1.5rem 0;color:#065f46;font-size:.9rem;line-height:1.6}
.upgrade-banner strong{color:#064e3b;font-weight:650}
.unsub-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1.4rem 1.6rem;
  margin:2.5rem 0 1.5rem}
.unsub-box h3{font-size:1.15rem;margin-bottom:.4rem;color:var(--ink)}
.unsub-box p{font-size:.88rem;color:var(--ink-2);line-height:1.7;margin-bottom:.8rem}
.unsub-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.btn-unsub{background:#ffffff;border:1px solid #cbd5e1;color:#b91c1c;padding:.5rem 1rem;
  border-radius:5px;font-size:.86rem;font-weight:600;cursor:pointer;transition:all .15s ease}
.btn-unsub:hover{background:#fef2f2;border-color:#f87171}

/* Responsive Navigation for Tablets & Mobile (iPad, Tablet, Mobile) */
@media(max-width:1200px){
  .product-badge-tag{display:none}
  .brand-cluster{gap:10px}
  .logo-qs img{height:46px;max-height:46px}
  .logo-product img{height:40px;max-height:40px}
  .brand-divider{height:28px}
}
@media(max-width:1160px){
  .mast-in{padding:.45rem 1.1rem;gap:.5rem}
  .logo img{height:54px;max-height:54px}
  .mast nav{gap:.28rem}
  .mast nav a{font-size:.81rem;padding:.28rem .44rem}
  .engine-status{font-size:.7rem;padding:.18rem .45rem}
}
@media(max-width:1023px){
  .mast-in{flex-wrap:wrap;padding:.5rem 1rem;gap:.4rem}
  .brand-cluster{gap:8px}
  .logo-qs img{height:40px;max-height:40px}
  .logo-product img{height:36px;max-height:36px}
  .brand-divider{height:24px}
  .product-badge-tag{display:none}
  .logo img{height:50px;max-height:50px}
  .mast-mobile-ctrl{display:flex}
  .btn-nav-toggle{display:inline-block}
  .btn-logout-mobile{display:inline-block}
  /* On iPad & mobile: clean touch navigation container */
  .mast nav{display:flex;flex-wrap:wrap;width:100%;gap:.35rem;margin-top:.4rem;padding-top:.45rem;
    border-top:1px solid #e2e8f0;justify-content:flex-start}
  .mast nav a{font-size:.82rem;padding:.35rem .65rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px}
  .mast nav a.here{background:var(--ink) !important;color:#ffffff !important;border-color:var(--ink) !important}
  .mast nav a.tool{margin-left:0}
  /* Keep logout prominent in dedicated mobile control position */
  .mast nav #qs-nav-logout{display:none !important}
}
@media(max-width:640px){
  .logo img{height:46px;max-height:46px}
  .brand-cluster{gap:6px}
  .logo-qs img{height:34px;max-height:34px}
  .logo-product img{height:30px;max-height:30px}
  .brand-divider{height:20px}
  .product-badge-tag{display:none}
  .mast-in{padding:.4rem .8rem}
  .mast nav a{font-size:.78rem;padding:.3rem .5rem}
  .qs-user-pill{padding:.2rem .45rem;font-size:.76rem}
}

/* Fullscreen "Signing In....." Transition Screen */
.qs-signin-overlay{position:fixed;inset:0;background:rgba(250,248,244,0.98);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  z-index:999999;display:flex;align-items:center;justify-content:center;
  opacity:1;visibility:visible;transition:opacity .25s ease, visibility .25s ease}
.qs-signin-overlay.fade-out{opacity:0;visibility:hidden;pointer-events:none}
.qs-signin-card{background:#ffffff;border:1px solid #e2e8f0;border-radius:12px;
  box-shadow:0 16px 40px rgba(0,0,0,0.08);padding:2.5rem 2.8rem;text-align:center;
  max-width:400px;width:92%}
.qs-signin-logo{height:60px;margin-bottom:1.4rem;display:inline-block;object-fit:contain}
.qs-spinner{width:40px;height:40px;border:3.5px solid #e2e8f0;border-top-color:var(--blue);
  border-radius:50%;animation:qsSpin .7s linear infinite;margin:0 auto 1.25rem}
@keyframes qsSpin{to{transform:rotate(360deg)}}
.qs-signin-title{font-size:1.35rem;font-weight:650;color:var(--ink);letter-spacing:-.3px;margin-bottom:.4rem}
.qs-signin-sub{font-size:.88rem;color:var(--slate);line-height:1.5}

/* Research 1499 Tools: Export, Walk-Forward, Monte Carlo */
.btn-export{background:#ffffff !important;color:var(--ink) !important;border:1px solid #cbd5e1 !important;
  padding:.36rem .85rem !important;border-radius:6px !important;font-size:.84rem !important;font-weight:600 !important;
  cursor:pointer !important;display:inline-flex !important;align-items:center !important;gap:6px !important;
  transition:all .15s ease !important;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.btn-export:hover{background:#f8fafc !important;border-color:var(--blue) !important;color:var(--blue) !important}
.research-suite{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:1.4rem 1.6rem;margin:1.8rem 0}
.research-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem;padding-bottom:.8rem;border-bottom:1px solid #e2e8f0}
.research-badge{background:#0f172a;color:#facc15;font-size:.72rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:.2rem .55rem;border-radius:4px}
.mc-band-bar{display:flex;height:24px;border-radius:4px;overflow:hidden;margin:.8rem 0;background:#e2e8f0}
.mc-band-item{display:flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:650}
/* ---------- layout ---------- */
.page{max-width:1140px;margin:0 auto;padding:0 1.5rem}
/* Prose columns keep the same left margin as everything else. Centring them
   made headings start 240px further right than the section below, which read
   as a mistake rather than a choice. */
.narrow{max-width:calc(660px + 3rem);margin:0 auto}
section{padding:3.4rem 0}
section + section{border-top:1px solid var(--rule)}

h1{font-family:'IBM Plex Sans',sans-serif;font-size:2.55rem;font-weight:600;
  line-height:1.14;letter-spacing:-1.1px;max-width:19ch}
h2{font-size:1.5rem;font-weight:600;letter-spacing:-.4px;margin-bottom:.7rem}
h3{font-size:1.02rem;font-weight:600;margin-bottom:.35rem}
p{max-width:68ch;margin-bottom:1.05rem}
p.lead{font-size:1.16rem;line-height:1.62;color:var(--ink-2);max-width:60ch}
.dim{color:var(--slate)}
.small{font-size:.88rem;line-height:1.6}

/* ---------- the hero ----------
   Two columns: the argument on the left, the correction on the right at a
   size that makes it the thing you see first. A single wide column left half
   the screen empty, which made the page feel unfinished rather than spare. */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;
  align-items:center;padding:4rem 0 3.8rem}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:2.2rem;padding:2.6rem 0}
}

/* ---------- the correction: the signature element ---------- */
.correct{font-family:'IBM Plex Sans',sans-serif;
  border-left:2px solid var(--rule);padding-left:1.6rem}

/* No strikethrough. A line through a number reads as "this figure is wrong",
   and it is not — it was correctly computed on an unrealistic assumption. The
   two figures are now simply shown in sequence, the first in grey and the
   second in full ink, so the eye follows from one to the other without
   anything being crossed out. */
.correct .was{font-size:4.6rem;font-weight:600;color:var(--slate);
  letter-spacing:-3px;line-height:1.02;display:inline-block}
/* The reason sits BETWEEN the two figures, not after them. A struck-through
   number read on its own looks like an arithmetic error; read with the reason
   immediately below it, it reads as a correction of scope. */
.correct .because{display:block;color:var(--sub);font-size:.88rem;
  font-weight:500;line-height:1.5;max-width:30ch;
  margin:.7rem 0 1.15rem;padding-left:.85rem;
  border-left:2px solid var(--sub)}
.correct .eyebrow + .was,.correct .eyebrow + .is{margin-top:-.15rem}
.correct .eyebrow{font-size:.78rem;color:var(--slate);
  display:block;margin-bottom:.35rem;max-width:30ch;line-height:1.45}
.correct .is{font-size:4.6rem;font-weight:600;letter-spacing:-3px;
  line-height:1.02;display:inline-block;color:var(--ink)}
.correct .note{display:block;font-size:.88rem;color:var(--ink-2);
  max-width:28ch;line-height:1.5;margin-top:.9rem;
  border-top:1px solid var(--rule);padding-top:.8rem}
@media(max-width:700px){
  h1{font-size:2rem}
  .correct .was,.correct .is{font-size:3.2rem;letter-spacing:-1.8px}
}

/* ---------- ledger: what was subtracted ---------- */
.ledger{font-family:'IBM Plex Sans',sans-serif;font-size:.92rem;
  max-width:460px;margin-top:.4rem}
.ledger div{display:flex;justify-content:space-between;gap:1rem;
  padding:.46rem 0;border-bottom:1px solid var(--rule)}
.ledger div:last-child{border-bottom:0;border-top:2px solid var(--ink);
  font-weight:600;margin-top:.2rem;padding-top:.6rem}
.ledger .amt{color:var(--sub);font-weight:500}
.ledger div:last-child .amt{color:var(--ink)}

/* ---------- cards ---------- */
.cols{display:grid;gap:1.6rem}
.cols.two{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.cols.three{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.tool-card{border:1px solid var(--rule);background:#fff;padding:1.35rem 1.4rem;
  display:flex;flex-direction:column}
.tool-card h3{font-size:1.1rem}
.tool-card p{font-size:.93rem;line-height:1.6;color:var(--ink-2);flex:1;
  margin-bottom:1rem}
.tool-card .go{font-family:'IBM Plex Sans',sans-serif;font-size:.87rem;
  font-weight:600;border:0}

/* ---------- finding: a stated result with its caveat ---------- */
.finding{border-left:3px solid var(--ink);padding:.15rem 0 .15rem 1.15rem;
  margin-bottom:1.7rem}
.finding .num{font-family:'IBM Plex Sans',sans-serif;font-size:1.6rem;
  font-weight:600;letter-spacing:-.6px;display:block;line-height:1.2}
.finding .what{font-size:.96rem;color:var(--ink-2);display:block;
  margin-top:.1rem;max-width:52ch}
.finding.neg{border-left-color:var(--sub)}
.finding.neg .num{color:var(--sub)}

/* ---------- notice ---------- */
.notice{background:var(--paper-2);border:1px solid var(--rule);
  padding:1.15rem 1.3rem;font-size:.9rem;line-height:1.65}
.notice p{max-width:none;margin-bottom:.6rem}
.notice p:last-child{margin-bottom:0}
.notice strong{font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:'IBM Plex Sans',sans-serif;
  font-size:.94rem;font-weight:600;padding:.68rem 1.3rem;border-radius:3px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.quiet{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.quiet:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}

/* ---------- top regulatory banner ---------- */
.strip{width:100%;max-width:1140px;margin:1.15rem auto;background:#fffbeb;
  border:1px solid #fde68a;border-left:4px solid #d97706;border-radius:6px;color:#78350f;
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:.82rem;line-height:1.6;padding:.72rem 1.25rem;text-align:left;box-sizing:border-box}
.strip strong{color:#92400e;font-weight:600}
.strip a{color:#92400e;text-decoration:underline;border-bottom:0}
.page .strip, .narrow .strip{margin:1rem 0 1.3rem}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);background:var(--paper-2);
  padding:2.6rem 0 2rem;margin-top:1rem}
footer .page{display:grid;gap:2rem;
  grid-template-columns:minmax(260px,1.6fr) repeat(auto-fit,minmax(150px,1fr))}
footer h4{font-family:'IBM Plex Sans',sans-serif;font-size:.82rem;
  font-weight:600;margin-bottom:.6rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink)}
footer a,footer p{font-size:.86rem;line-height:1.65}
footer p{color:var(--slate);margin-bottom:.5rem;max-width:48ch}
footer ul{list-style:none}
footer li{margin-bottom:.35rem;font-size:.86rem}
footer li a{color:var(--ink-2);border-bottom:0}
footer li a:hover{color:var(--blue);text-decoration:underline}
.legal{border-top:1px solid var(--rule);margin-top:2rem;padding-top:1.3rem}
.legal p{font-size:.79rem;line-height:1.7;color:var(--slate);max-width:none;margin-bottom:.6rem}
.legal p strong{color:var(--ink-2)}
.legal .cr{border-top:1px solid var(--rule);padding-top:.8rem;margin-top:.6rem;color:var(--slate);font-size:.78rem}


/* ---------- pricing ----------
   Two self-serve tiers side by side, then the bespoke option as a full-width
   band below. Three equal columns implied three comparable products; the
   third is a service, not a plan, and the layout should say so.  */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--rule);background:#fff;margin-top:2.2rem}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}
.tier{padding:2rem 2rem 2.2rem;display:flex;flex-direction:column;
  border-right:1px solid var(--rule)}
.tier:last-child{border-right:0}
@media(max-width:820px){
  .tier{border-right:0;border-bottom:1px solid var(--rule)}
  .tier:last-child{border-bottom:0}
}
.tier.pick{background:#fcfbf8;box-shadow:inset 3px 0 0 var(--ink)}
.tier h3{font-family:'IBM Plex Sans',sans-serif;font-size:.75rem;
  text-transform:uppercase;letter-spacing:1.4px;color:var(--slate);
  font-weight:600;margin-bottom:1.1rem;display:flex;
  justify-content:space-between;align-items:center}
.tier h3 em{font-style:normal;font-size:.63rem;letter-spacing:.5px;
  background:var(--ink);color:var(--paper);padding:.22rem .6rem;
  text-transform:uppercase;font-weight:600}
.tier .price{font-family:'IBM Plex Sans',sans-serif;font-size:3rem;
  font-weight:600;letter-spacing:-2px;line-height:1;display:flex;
  align-items:baseline;gap:.35rem}
.tier .per{font-size:.9rem;color:var(--slate);font-weight:400;letter-spacing:0}
.tier .yr{font-size:.83rem;color:var(--slate);margin-top:.5rem;display:block}
.tier .who{font-size:.97rem;color:var(--ink-2);line-height:1.6;
  margin:1.3rem 0 1.4rem;padding-top:1.3rem;border-top:1px solid var(--rule)}
.tier ul{list-style:none;flex:1;font-family:'IBM Plex Sans',sans-serif;
  font-size:.9rem;line-height:1.5}
.tier li{padding:.42rem 0 .42rem 1.4rem;position:relative;color:var(--ink-2)}
/* A tick needs unequal sides — equal ones read as a chevron, which is what
   the first version looked like. */
.tier li::before{content:'';position:absolute;left:.15rem;top:.72rem;
  width:.34rem;height:.62rem;border-right:2px solid var(--add);
  border-bottom:2px solid var(--add);transform:rotate(45deg)}
.tier li b{color:var(--ink);font-weight:600}
.tier li.no{color:var(--slate)}
.tier li.no::before{border-right:0;transform:none;
  border-bottom:2px solid var(--rule);top:1.08rem;width:.62rem;height:0}
.tier .btn{margin-top:1.6rem;text-align:center}

.bespoke{border:1px solid var(--rule);border-top:0;background:var(--paper-2);
  padding:1.7rem 2rem;display:grid;grid-template-columns:1fr auto;
  gap:1.6rem;align-items:center}
@media(max-width:820px){.bespoke{grid-template-columns:1fr}}
.bespoke h3{font-family:'IBM Plex Sans',sans-serif;font-size:1.05rem;
  font-weight:600;margin-bottom:.45rem}
.bespoke p{font-size:.92rem;line-height:1.6;color:var(--ink-2);
  max-width:64ch;margin:0}

table.compare{width:100%;border-collapse:collapse;
  font-family:'IBM Plex Sans',sans-serif;font-size:.89rem;margin-top:1.6rem;
  background:#fff;border:1px solid var(--rule)}
table.compare th{text-align:left;padding:.75rem .95rem;background:var(--ink);
  color:var(--paper);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.7px;font-weight:600;position:sticky;top:57px;z-index:2}
table.compare th.c,table.compare td.c{text-align:center;width:13%}
table.compare td{padding:.6rem .95rem;border-bottom:1px solid var(--rule);
  color:var(--ink-2)}
table.compare tbody tr:last-child td{border-bottom:0}
table.compare tr.grp td{background:var(--paper-2);font-weight:600;
  color:var(--ink);font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;
  padding-top:.85rem;padding-bottom:.85rem}
table.compare tr:hover td{background:#fcfbf8}
table.compare tr.grp:hover td{background:var(--paper-2)}
.yes{color:var(--add);font-weight:600}
.nope{color:#c9c2b6}

/* ---------- specs feature card ---------- */
.specs{background:var(--paper-2);border:1px solid var(--rule);border-radius:10px;
  padding:1.8rem 2.1rem;box-shadow:0 2px 8px rgba(0,0,0,0.02)}
.specs .eyebrow{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.8px;
  color:var(--slate);font-weight:600;margin-bottom:1rem}
.specs ul{list-style:none;padding:0;margin:0 0 1.2rem}
.specs li{font-size:.9rem;line-height:1.6;color:var(--ink-2);
  padding:.4rem 0 .4rem 1.5rem;position:relative}
.specs li::before{content:'';position:absolute;left:.15rem;top:.7rem;
  width:.34rem;height:.62rem;border-right:2px solid var(--add);
  border-bottom:2px solid var(--add);transform:rotate(45deg)}
.specs .note{display:block;font-size:.82rem;color:var(--slate);
  line-height:1.5;border-top:1px solid var(--rule);padding-top:.9rem}

/* one container for every page */
.page,.wrap,main.page,main.wrap{max-width:1140px;margin:0 auto;
  padding-left:1.5rem;padding-right:1.5rem}
.narrow{max-width:calc(680px + 3rem);margin:0 auto}
/* ---------- Product Sub-bar (Below horizontal menu, above page details) ---------- */
.sub-mast{background:#ffffff;border-bottom:1px solid var(--rule,#e2e8f0);
  box-shadow:0 1px 3px rgba(0,0,0,0.02);width:100%;position:relative;z-index:90}
.sub-mast-in{max-width:1420px;margin:0 auto;padding:.4rem 1.6rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px}
.sub-mast-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.sub-mast-tag{font-family:'IBM Plex Sans',sans-serif;font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;background:#2563eb;color:#ffffff;
  padding:3px 8px;border-radius:4px;white-space:nowrap;line-height:1}
.sub-mast-logo{display:inline-flex;align-items:center;text-decoration:none;border:0}
.sub-mast-logo img{height:40px;max-height:40px;width:auto;display:block;object-fit:contain;transition:transform .15s ease}
.sub-mast-logo:hover img{transform:translateY(-1px)}
.sub-mast-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.sub-mast-desc{font-size:.82rem;color:var(--slate,#64748b);font-weight:500;font-family:'IBM Plex Sans',sans-serif}
.sub-mast-btn{background:var(--ink,#0f172a);color:#ffffff !important;font-size:.78rem;font-weight:600;
  padding:.28rem .78rem;border-radius:5px;text-decoration:none;white-space:nowrap;font-family:'IBM Plex Sans',sans-serif;
  transition:background-color .15s ease;border:0}
.sub-mast-btn:hover{background:#1e293b}

@media(max-width:1023px){
  .sub-mast-in{padding:.35rem 1rem;min-height:46px}
  .sub-mast-logo img{height:34px;max-height:34px}
  .sub-mast-desc{display:none}
}
@media(max-width:640px){
  .sub-mast-in{padding:.3rem .8rem;min-height:42px}
  .sub-mast-logo img{height:28px;max-height:28px}
  .sub-mast-tag{font-size:.58rem;padding:2px 6px}
  .sub-mast-btn{font-size:.72rem;padding:.2rem .55rem}
}