/* 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 Serif',Georgia,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:50}
.mast-in{max-width:1140px;margin:0 auto;padding:.85rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.logo{display:flex;align-items:center;gap:11px;border:0}
.logo img{height:38px;width:auto;display:block}
.logo b{font-family:'IBM Plex Sans',sans-serif;font-weight:600;
  font-size:1.02rem;letter-spacing:-.2px;color:var(--ink)}
.logo span{display:block;font-family:'IBM Plex Sans',sans-serif;
  font-size:.7rem;color:var(--slate);font-weight:400;margin-top:-2px}
nav{display:flex;align-items:center;gap:1.35rem;flex-wrap:wrap}
nav a{font-size:.87rem;color:var(--ink-2);border:0;font-weight:500}
nav a:hover{color:var(--ink)}
nav a.here{color:var(--ink);box-shadow:0 2px 0 var(--sub)}
nav a.tool{background:var(--ink);color:var(--paper);padding:.42rem .85rem;
  border-radius:3px}
nav a.tool:hover{background:var(--blue);color:#fff}
@media(max-width:760px){
  .mast-in{flex-direction:column;align-items:flex-start;gap:.7rem}
  nav{gap:1rem}
}

/* ---------- 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}
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}

/* ---------- 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}
footer a,footer p{font-size:.86rem;line-height:1.65}
footer p{color:var(--slate);margin-bottom:.5rem;max-width:42ch}
footer ul{list-style:none}
footer li{margin-bottom:.35rem;font-size:.86rem}
.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}


/* ---------- 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}