/* ============================================================
   OTIS PRODUCT SURFACE, rebuilt as real markup instead of a screenshot.
   Tokens read live from otis.tradechology.com/demo on 2026-09-21:
   bg #08101C, Montserrat, teal #00c5bb, green #00c478, red #f45252,
   amber #f59e0b, accent #008fc4, dim #a3a3a3.
   These are the PRODUCT's tokens, not Zoom's. Keep the two sets apart.
   ============================================================ */
.otis{
  --o-bg:#08101C; --o-dim:#a3a3a3; --o-dim2:#8B949E;
  --o-panel:rgba(255,255,255,.05); --o-border:#00c5bb33;
  --o-green:#00c478; --o-accent:#008fc4; --o-amber:#f59e0b;
  --o-red:#f45252; --o-teal:#00c5bb;
  background:var(--o-bg);color:#fff;
  font-family:"Montserrat",system-ui,sans-serif;
  border-radius:var(--r-md);overflow:hidden;text-align:left;
}
.otis-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid var(--o-border);
}
.otis-mark{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--o-teal)}
.otis-mark i{font-style:normal;font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--o-dim2);margin-left:8px}
.otis-cta{
  background:var(--o-green);color:#04140c;font-size:11px;font-weight:700;
  letter-spacing:.04em;padding:7px 13px;border-radius:7px;white-space:nowrap;
}
.otis-body{padding:22px 18px 24px}
.otis-meta{font-size:10px;letter-spacing:.11em;color:var(--o-dim2);margin-bottom:10px}
.otis-hook{font-size:clamp(17px,1.8vw,21px);font-weight:600;line-height:1.3;margin:0 0 4px;font-family:inherit;letter-spacing:0}
.otis-sub{font-size:12.5px;color:var(--o-dim);margin-bottom:20px}

.otis-leak{
  border:1px solid var(--o-border);border-left:3px solid var(--o-red);
  border-radius:10px;padding:18px;background:var(--o-panel);
  display:flex;gap:18px;align-items:flex-start;
}
.otis-leak .l{flex:1;min-width:0}
.otis-eyebrow{font-size:9.5px;font-weight:700;letter-spacing:.13em;color:var(--o-teal);margin-bottom:8px}
.otis-leakname{font-size:17px;font-weight:600;margin-bottom:8px}
.otis-leak p{font-size:12px;line-height:1.65;color:var(--o-dim);margin:0 0 7px}
.otis-leak p:last-child{margin-bottom:0}
.otis-leak b{color:var(--o-red);font-weight:600}
.otis-leak .ok{color:var(--o-green);font-weight:600}
.otis-grade{text-align:center;flex-shrink:0}
.otis-badge{
  width:62px;height:62px;border-radius:14px;display:grid;place-items:center;
  font-size:32px;font-weight:700;color:#fff;
  background:linear-gradient(160deg,#f45252,#8e1b1b);
  box-shadow:0 0 28px rgba(244,82,82,.45);
}
.otis-glabel{font-size:8.5px;letter-spacing:.12em;color:var(--o-dim2);margin-top:9px}
.otis-pnl{font-size:18px;font-weight:700;color:var(--o-red);margin-top:14px}

.otis-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.otis-score{border:1px solid var(--o-border);border-radius:9px;padding:13px;background:var(--o-panel)}
.otis-score .k{font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--o-dim2);margin-bottom:8px}
.otis-score .v{font-size:24px;font-weight:700;line-height:1}
.otis-score .v small{font-size:11px;color:var(--o-dim2);font-weight:500}
.otis-score .n{font-size:9.5px;color:var(--o-dim2);margin-top:6px}
.otis-score.edge .v,.otis-score.psy .v{color:var(--o-amber)}
.otis-score.wr .v{color:var(--o-accent)}
.otis-score.pf .v{color:var(--o-red)}

.otis-rows{margin-top:18px}
.otis-rowhead{font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--o-teal);margin-bottom:12px}
.otis-row{margin-bottom:10px}
.otis-row .t{display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px}
.otis-row .t b{font-weight:600}
.otis-row .t .p{font-weight:600}
.otis-row .t .p.up{color:var(--o-green)}
.otis-row .t .p.dn{color:var(--o-red)}
.otis-track{height:5px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.otis-track i{display:block;height:100%;border-radius:999px}
.otis-foot{
  margin-top:20px;padding-top:14px;border-top:1px solid var(--o-border);
  display:flex;gap:26px;flex-wrap:wrap;
}
.otis-foot div{font-size:9px;letter-spacing:.1em;color:var(--o-dim2)}
.otis-foot b{display:block;font-size:15px;font-weight:700;color:#fff;letter-spacing:0;margin-bottom:3px}

/* compact variant that rides inside a rail card */
.otis-mini{padding:13px;font-family:"Montserrat",system-ui,sans-serif;background:#08101C;color:#fff;height:100%}
.otis-mini .e{font-size:8.5px;font-weight:700;letter-spacing:.12em;color:#00c5bb;margin-bottom:10px}
.otis-mini .pair{display:flex;gap:9px;margin-bottom:12px}
.otis-mini .cell{flex:1;border:1px solid #00c5bb33;border-radius:7px;padding:9px;background:rgba(255,255,255,.05)}
.otis-mini .cell .k{font-size:7.5px;letter-spacing:.1em;color:#8B949E;margin-bottom:5px}
.otis-mini .cell .v{font-size:18px;font-weight:700;line-height:1}
.otis-mini .line{height:4px;border-radius:999px;background:rgba(255,255,255,.08);margin-bottom:8px;overflow:hidden}
.otis-mini .line i{display:block;height:100%;border-radius:999px}
.otis-mini .ax{display:flex;justify-content:space-between;align-items:center;font-size:8.5px;color:#a3a3a3;padding:3.5px 0}
.otis-mini .ax b{font-weight:700;font-size:9.5px}
.otis-mini .badge{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  font-size:22px;font-weight:700;color:#fff;margin-bottom:10px;
  background:linear-gradient(160deg,#f45252,#8e1b1b);box-shadow:0 0 20px rgba(244,82,82,.4);
}

/* ============================================================
   IMPORT LOGO WALL
   ============================================================ */
/* Founder 2026-09-22: logos ~25% larger, and less padding above the row. */
.logos{padding:30px 0 52px;border-bottom:1px solid var(--line);background:#fff}
.logos p{text-align:center;font-size:13px;color:var(--grey);margin-bottom:22px}
.logos .logo-note{margin:26px 0 0;font-size:12px;color:#6B7280}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 36px}
/* greyscale monogram + wordmark, the same convention the product's import
   picker uses, so we borrow nobody's trademark and nothing shouts */
.logo{
  display:inline-flex;align-items:center;gap:9px;
  font-size:20px;font-weight:600;letter-spacing:-.01em;color:#5C6377;
  white-space:nowrap;filter:grayscale(1);transition:color .18s ease,opacity .18s ease;opacity:.85;
}
.logo i{
  font-style:normal;font-size:12px;font-weight:700;letter-spacing:.02em;
  width:33px;height:33px;border-radius:9px;display:inline-grid;place-items:center;
  background:#EDEFF3;color:#6B7280;border:1px solid #E1E4EA;flex-shrink:0;
}
.logo:hover{color:var(--navy);opacity:1}

/* ============================================================
   COUNTERFACTUAL
   ============================================================ */
.cf-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center}
.cf-chart{
  background:#08101C;border-radius:var(--r-lg);padding:26px;
  font-family:"Montserrat",system-ui,sans-serif;color:#fff;
  box-shadow:0 22px 54px rgba(0,5,61,.22);
}
.cf-legend{display:flex;gap:20px;font-size:10px;letter-spacing:.08em;color:#8B949E;margin-bottom:18px}
.cf-legend span{display:flex;align-items:center;gap:7px}
.cf-legend i{width:17px;height:2px;border-radius:2px;display:block}
.cf-plot{height:186px}
.cf-plot svg{width:100%;height:100%;display:block}
.cf-tags{display:flex;justify-content:space-between;margin-top:18px}
.cf-tags b{display:block;font-size:20px;font-weight:700;line-height:1.2}
.cf-tags .o b{color:#00c478}
.cf-tags .c b{color:#f45252}
.cf-tags span{color:#8B949E;font-size:9.5px;letter-spacing:.09em}
.cf-gap{margin-top:18px;padding-top:15px;border-top:1px solid #00c5bb33;font-size:11.5px;color:#a3a3a3;line-height:1.65}
.cf-gap b{color:#fff}

/* ============================================================
   HOW IT WORKS + LADDER
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.step{border-top:2px solid var(--blue);padding-top:20px}
.step .n{font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.08em;margin-bottom:10px}
.step h3{font-size:19px;margin-bottom:8px}
.step p{font-size:14px;color:var(--grey);line-height:1.55}
.ladder{margin-top:44px;border:1px solid var(--steel);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.rung{padding:30px}
.rung + .rung{border-left:1px solid var(--steel)}
.rung .tag{font-size:11px;font-weight:700;letter-spacing:.1em;margin-bottom:12px}
.rung.free{background:var(--tint-soft)}
.rung.free .tag{color:var(--blue)}
.rung.paid .tag{color:var(--grey)}
.rung h3{font-size:21px;margin-bottom:10px}
.rung p{font-size:14px;color:var(--grey);line-height:1.55}
.rung .price{font-family:var(--ff-display);font-size:32px;font-weight:500;margin-bottom:8px;line-height:1}
.rung .price small{font-size:14px;color:var(--grey)}

@media (max-width:900px){
  .cf-grid{grid-template-columns:1fr;gap:32px}
  .steps{grid-template-columns:1fr}
  .ladder{grid-template-columns:1fr}
  .rung + .rung{border-left:0;border-top:1px solid var(--steel)}
  .otis-scores{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .logo-row{gap:12px 18px}
  .logo{font-size:17px}
  .logo i{width:28px;height:28px;font-size:10.5px}
  .otis-leak{flex-direction:column}
  .otis-foot{gap:18px}
}

/* Graduation card: three columns, because a two-column promise needs two
   value columns. The day-30 cell is a question mark on purpose. */
.otis-mini .gx{display:grid;grid-template-columns:1fr 34px 34px;column-gap:10px;align-items:center;
  font-size:9.5px;line-height:1.75;color:#C9D1D9}
.otis-mini .gx b{text-align:right;font-weight:700}
.otis-mini .gx-h{font-size:7.5px;letter-spacing:.1em;color:#8B949E;margin-bottom:5px}
.otis-mini .gx-h b{font-weight:700;color:#8B949E}
.otis-mini .gx .q{color:#00c5bb}