/* ==========================================================================
   Matka Matrix — one stylesheet.
   Dark by default (the book is dark), light honoured when the OS asks.
   Everything sizes in rem; the grid collapses to one column under 720px.
   ========================================================================== */

:root {
  --bg:        #0b0d10;
  --bg-2:      #121519;
  --card:      #161a1f;
  --card-2:    #1c2128;
  --line:      #262c34;
  --ink:       #e8eaed;
  --ink-2:     #a4acb8;
  --ink-3:     #949dab;   /* was #6b7480: 4.0:1 on --bg, below AA */
  --gold:      #e0bb45;   /* FILL: dark text sits on this, keep it bright */
  --gold-ink:  #e0bb45;   /* TEXT: the same colour reads fine on a dark page */
  --gold-dim:  #8a7328;
  --hot:       #35d07f;
  --cold:      #8b95a4;   /* was #5b6472: same problem in the pills */
  --broke:     #f0776b;   /* was #e0554a: the .state.broke pill measured 3.99:1 */
  --focus:     #6aa9ff;
  --radius:    12px;
  --radius-s:  8px;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --mono:      ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Devanagari", Roboto, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f6f3; --bg-2: #fff; --card: #fff; --card-2: #f2f1ee;
    --line: #e2e0da; --ink: #1a1c1f; --ink-2: #4b535d; --ink-3: #5f6873;
    --gold: #e8c14e; --gold-ink: #7d6412; --gold-dim: #b39a4a; --hot: #0f6f4a; --cold: #5f6873; --broke: #a72c21;
    --shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { max-width: 100%; }

/* focus is never removed, only restyled */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--gold); color: #000;
  padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radius-s) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* --- header ------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr .wrap { display: flex; align-items: center; gap: 1rem; min-height: 62px; }
.brand { display: flex; align-items: baseline; gap: .5rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; }
.brand .m { color: var(--gold-ink); }
.brand .x { color: var(--ink); }
.brand .yr { font: 600 12px/1 var(--mono); color: var(--ink-3); border: 1px solid var(--line);
             padding: .25rem .4rem; border-radius: 999px; }
.hdr nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.hdr nav a {
  text-decoration: none; color: var(--ink-2); font-size: .9rem; font-weight: 600;
  padding: .45rem .7rem; border-radius: 999px; white-space: nowrap;
}
.hdr nav a:hover { color: var(--ink); background: var(--card); }
.hdr nav a[aria-current="page"] { color: var(--ink); background: var(--card-2); }
.langsw { font: 600 .78rem/1 var(--mono); color: var(--ink-3); border: 1px solid var(--line);
          border-radius: 999px; padding: .35rem .55rem; text-decoration: none; }
.langsw:hover { color: var(--ink); border-color: var(--gold-dim); }

/* --- type --------------------------------------------------------------- */
h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 .6rem; }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5rem; }
h3 { font-size: 1.05rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
p  { margin: 0 0 .9rem; color: var(--ink-2); }
.lede { font-size: clamp(1rem, .95rem + .4vw, 1.2rem); color: var(--ink-2); max-width: 62ch; }
.eyebrow { font: 700 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
           color: var(--gold-ink); margin: 0 0 .8rem; }
.muted { color: var(--ink-3); }
.small { font-size: .85rem; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 700 .95rem/1 var(--sans); padding: .85rem 1.3rem; border-radius: var(--radius-s);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  min-height: 46px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: #14100a; }
.btn-primary:hover { background: color-mix(in srgb, var(--gold) 88%, #fff); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-3); background: var(--card); }
.btn-danger { background: transparent; color: var(--broke); border-color: color-mix(in srgb, var(--broke) 40%, transparent); }
.btn-danger:hover { background: color-mix(in srgb, var(--broke) 12%, transparent); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }

/* --- cards & layout ----------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.grid { display: grid; gap: 1rem; }
/* grid items default to min-width:auto, so a wide table inside a card forces
   the card past the track and the page sideways. Found on the charts tab at
   360px in the 2026-08-02 full check. */
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px) { .g2, .g3 { grid-template-columns: 1fr; } }
section { padding: clamp(2.2rem, 5vw, 4rem) 0; }
.sec-t { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
         flex-wrap: wrap; margin-bottom: 1.1rem; }

/* --- pricing ------------------------------------------------------------ */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; align-items: stretch; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 1.5rem; display: flex; flex-direction: column; position: relative; }
.plan.feat { border-color: var(--gold-dim); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, var(--card)), var(--card)); }
.plan .tag { position: absolute; top: -.7rem; left: 1.4rem; background: var(--gold); color: #14100a;
             font: 800 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
             padding: .35rem .6rem; border-radius: 999px; }
.plan h3 { font-size: 1.15rem; }
.price { display: flex; align-items: baseline; gap: .35rem; margin: .5rem 0 .2rem; }
.price .cur { font-size: 1.3rem; color: var(--ink-2); }
.price .amt { font: 800 clamp(2.2rem,1.6rem + 2vw,3rem)/1 var(--sans); letter-spacing: -.04em; }
.price .per { color: var(--ink-3); font-size: .95rem; }
.plan ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: .55rem; }
.plan li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--ink-2); }
.plan li::before { content: "✓"; color: var(--hot); font-weight: 800; flex: none; }
.plan .cta { margin-top: auto; }

.coupon { margin-top: 1.2rem; }
.coupon summary { cursor: pointer; color: var(--ink-2); font-size: .9rem; font-weight: 600;
                  list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem 0; }
.coupon summary::-webkit-details-marker { display: none; }
.coupon summary::before { content: "＋"; color: var(--gold-ink); font-weight: 700; }
.coupon[open] summary::before { content: "－"; }
.field { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
input[type=text], input[type=email] {
  flex: 1 1 12rem; min-width: 0; background: var(--bg-2); border: 1px solid var(--line);
  color: var(--ink); border-radius: var(--radius-s); padding: .8rem .9rem; font: 500 .95rem var(--sans);
  min-height: 46px;
}
input::placeholder { color: var(--ink-3); }
.note-ok  { color: var(--hot);   font-size: .87rem; margin-top: .5rem; }
.note-bad { color: var(--broke); font-size: .87rem; margin-top: .5rem; }

/* --- stat tiles --------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .75rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .9rem 1rem; }
.tile b { display: block; font: 800 1.5rem/1.1 var(--mono); letter-spacing: -.02em; }
.tile span { font-size: .78rem; color: var(--ink-3); }

/* --- method rows -------------------------------------------------------- */
.rows { display: grid; gap: .6rem; }
.row {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1rem; display: grid; gap: .75rem;
  grid-template-columns: 5.5rem 1fr auto; align-items: center;
}
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }
.row:hover { border-color: var(--ink-3); }
.mid { font: 700 .8rem/1 var(--mono); color: var(--gold-ink); }
.mname { font-weight: 700; }
.mmarket { font-size: .82rem; color: var(--ink-3); }
.state { display: inline-flex; align-items: center; gap: .4rem; font: 700 .78rem/1 var(--mono);
         padding: .4rem .6rem; border-radius: 999px; white-space: nowrap; }
.state.running { color: var(--hot);   background: color-mix(in srgb, var(--hot) 14%, transparent); }
.state.broke   { color: var(--broke); background: color-mix(in srgb, var(--broke) 14%, transparent); }
.state.cold    { color: var(--cold);  background: color-mix(in srgb, var(--cold) 16%, transparent); }
.state.quiet   { color: var(--ink-3); background: var(--card-2); }
/* running, but landing LESS often than chance. Deliberately not green. */
.state.under   { color: var(--ink-2); background: var(--card-2);
                 border: 1px dashed var(--ink-3); }

/* the 12-week hit strip */
.strip { display: flex; gap: 3px; }
.strip i { width: 10px; height: 20px; border-radius: 2px; background: var(--card-2); display: block; }
.strip i.hit { background: var(--hot); }
.strip i.miss { background: color-mix(in srgb, var(--broke) 45%, transparent); }
.strip i.pre  { opacity: .28; }                                   /* before the public test began */
.strip b.t0   { width: 2px; height: 20px; margin: 0 1px; background: var(--gold-ink); border-radius: 1px; display: block; }
i.lg { display: inline-block; width: 9px; height: 12px; border-radius: 2px; vertical-align: -1px; margin: 0 .1rem 0 .3rem; }
i.lg.hit  { background: var(--hot); }
i.lg.miss { background: color-mix(in srgb, var(--broke) 45%, transparent); }
/* the under-test glance table must fit a 390px phone without a sideways scroll */
table.glance td, table.glance th { padding: .65rem .55rem; }
table.glance td:first-child { padding-left: .8rem; }
@media (max-width: 700px) {
  table.glance { font-size: .84rem; }
  table.glance .pct { display: none; }
  table.glance td:first-child { min-width: 118px; }
}

/* one pip per market: green running, red just-broke, grey quiet */
.whererun { display: flex; align-items: center; }
.whererun i { width: 7px; height: 16px; border-radius: 2px; margin-right: 2px; background: var(--card-2); }
.whererun i.r { background: var(--hot); }
.whererun i.b { background: color-mix(in srgb, var(--broke) 55%, transparent); }

/* --- tables ------------------------------------------------------------- */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.data { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .9rem; }
table.data th, table.data td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { font: 700 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
                color: var(--ink-3); position: sticky; top: 0; background: var(--card-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num { font-family: var(--mono); text-align: right; }
table.data tbody tr:hover { background: var(--card-2); }

/* the mini bar inside the scoreboard */
.bar { display: flex; align-items: center; gap: .5rem; }
.bar .t { flex: 1; height: 7px; border-radius: 999px; background: var(--card-2); overflow: hidden; min-width: 60px; }
.bar .f { height: 100%; background: var(--gold); border-radius: 999px; }

/* --- chart grid --------------------------------------------------------- */
table.chart { border-collapse: separate; border-spacing: 3px; font: 600 .9rem var(--mono); }
table.chart th { color: var(--ink-3); font: 700 .7rem var(--mono); padding: .2rem; }
table.chart td { background: var(--card-2); border-radius: 5px; padding: .5rem .55rem; text-align: center; min-width: 2.6rem; }
table.chart td.blank, table.chart .dim { color: var(--ink-3); }

/* a method lit up inside the chart: where it starts, where it should land */
table.chart td.src { outline: 2px solid var(--gold); outline-offset: -2px; }
table.chart td.dst { outline: 2px solid var(--hot); outline-offset: -2px;
                     background: color-mix(in srgb, var(--hot) 12%, var(--card-2)); }
table.chart td.dst.miss { outline-color: var(--broke);
                     background: color-mix(in srgb, var(--broke) 12%, var(--card-2)); }
table.chart .lit { color: var(--gold-ink); text-decoration: underline;
                   text-decoration-thickness: 2px; text-underline-offset: 2px; }
table.chart td.dst .lit { color: var(--hot); }
table.chart td.dst.miss .lit { color: var(--broke); }

/* panel view: three-digit panna above and below the two-digit result */
table.chart.panelview td { padding: .35rem .5rem; line-height: 1.5; }
table.chart.panelview .pan { display: block; font-size: .68rem; color: var(--ink-3); letter-spacing: .06em; }
table.chart.panelview .pan.lit { font-weight: 800; text-decoration: underline;
                                 text-decoration-thickness: 2px; text-underline-offset: 2px; }
table.chart td.panlit { outline: 2px solid var(--gold); outline-offset: -2px; }
table.chart.panelview .jd  { display: block; font-size: 1rem; }

.chip { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; }
.chip.src  { outline: 2px solid var(--gold); outline-offset: -2px; background: var(--card-2); }
.chip.dst  { outline: 2px solid var(--hot);  outline-offset: -2px;
             background: color-mix(in srgb, var(--hot) 20%, var(--card-2)); }
.chip.miss { outline: 2px solid var(--broke); outline-offset: -2px;
             background: color-mix(in srgb, var(--broke) 20%, var(--card-2)); }
.row.picked { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 5%, var(--card)); }
a.mid { text-decoration: none; }
a.mid:hover { text-decoration: underline; }

/* --- what this is / is not ---------------------------------------------- */
.isnot { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .5rem; }
.isnot li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: var(--ink-2); }
.isnot li::before { content: "✓"; color: var(--hot); font-weight: 800; flex: none; }
.isnot.no li::before { content: "✕"; color: var(--broke); }

/* --- payment marks ------------------------------------------------------ */
.paymarks { display: flex; gap: .5rem; flex-wrap: wrap; }
.paymark {
  font: 700 .78rem/1 var(--mono); letter-spacing: .02em; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--card);
  padding: .5rem .7rem; border-radius: var(--radius-s);
}

/* --- glossary terms ----------------------------------------------------- */
button.term {
  all: unset; position: relative; cursor: pointer; white-space: nowrap;
  border-bottom: 1px dotted var(--ink-3); display: inline-flex; align-items: center; gap: .2em;
}
button.term:hover, button.term:focus-visible { border-bottom-color: var(--gold-ink); color: var(--ink); }
button.term { position: relative; }
button.term::after { content: ''; position: absolute; inset: -12px -10px; }
button.term .ti {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05em; height: 1.05em; border-radius: 50%; flex: none;
  background: var(--card-2); color: var(--ink-2);
  font: 700 .68em/1 var(--sans); border: 1px solid var(--line);
}
button.term:hover .ti, button.term[aria-expanded="true"] .ti {
  background: var(--gold); color: #14100a; border-color: var(--gold);
}
button.term .tip {
  position: absolute; left: 0; top: calc(100% + .45rem); z-index: 60;
  width: max-content; max-width: min(20rem, 70vw);
  background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: var(--shadow); padding: .6rem .75rem;
  font: 400 .82rem/1.5 var(--sans); white-space: normal;
  /* table headers are uppercase; a definition must not inherit that */
  text-transform: none; letter-spacing: normal;
  /* display:none, not visibility:hidden. A hidden-but-laid-out tooltip
     still widens documentElement.scrollWidth, and with ~20 of them per
     page every members tab scrolled sideways on a 360px phone
     (found in the 2026-08-02 full check). */
  display: none;
  pointer-events: none; text-align: left;
}
button.term .tip b { display: block; color: var(--ink); margin-bottom: .15rem;
                     text-transform: none; letter-spacing: normal; }
button.term:hover .tip,
button.term:focus-visible .tip,
button.term[aria-expanded="true"] .tip { display: block; }
/* near the right edge of a table, flip it so it cannot run off screen */
table.data th:last-child button.term .tip,
table.data td:last-child button.term .tip { left: auto; right: 0; }

details.mdwrap > summary {
  cursor: pointer; list-style: none; font: 600 .78rem/1 var(--sans);
  color: var(--gold-ink); padding: .35rem 0; display: inline-flex; align-items: center; gap: .3rem;
}
details.mdwrap > summary::-webkit-details-marker { display: none; }
details.mdwrap > summary::before { content: "▸"; }
details.mdwrap[open] > summary::before { content: "▾"; }

/* --- method diagram ------------------------------------------------------ */
.mdiag { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-s);
         padding: .8rem .9rem; margin: .7rem 0;
         overflow-x: auto; }   /* 7-day markets: the day strip may exceed 360px */
.mdrow { display: flex; align-items: stretch; gap: 3px; }
.mdlabel { font: 600 .68rem/1 var(--mono); color: var(--ink-3); width: 5.2rem; flex: none;
           display: flex; align-items: center; }
.mdcell { flex: 1; min-width: 2.4rem; text-align: center; border-radius: 4px;
          background: var(--card); border: 1px solid var(--line);
          font: 600 .68rem/1.35 var(--mono); color: var(--ink-3); padding: .3rem .1rem; }
.mdcell.src { border-color: var(--gold); color: var(--ink); background: color-mix(in srgb, var(--gold) 10%, var(--card)); }
.mdcell.dst { border-color: var(--hot);  color: var(--ink); background: color-mix(in srgb, var(--hot) 10%, var(--card)); }
.mdcell.hot { border-color: var(--hot);  color: var(--ink); background: color-mix(in srgb, var(--hot) 8%, var(--card)); }
.mdcell .dg { font-size: .9rem; line-height: 1; }
.mdcell .dg.on  { color: var(--gold-ink); }
.mdcell .dg.off { color: var(--ink-3); opacity: .35; }
.mdcell.dst .dg.on { color: var(--hot); }
.mdgap { font: 600 .68rem/1 var(--mono); color: var(--ink-3); text-align: center; padding: .35rem 0 .3rem; }
.mdnote { font-size: .8rem; color: var(--ink-2); margin: .6rem 0 0; }

/* --- number families ----------------------------------------------------- */
/* The book's own figure families, src/rules.js ANK_FAMILIES:
   {1,6,4,9}  {2,7,3,8}  {5,0}. Confirmed against the classic source page 10. */
.fam1 { color: #4da3ff; }   /* 1 6 4 9 */
.fam2 { color: #c77dff; }   /* 2 7 3 8 */
.fam3 { color: #ffa94d; }   /* 5 0     */
@media (prefers-color-scheme: light) {
  .fam1 { color: #0b62c4; }
  .fam2 { color: #7b2fbe; }
  .fam3 { color: #a8560a; }
}
.famkey { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; font-size: .82rem; }
.famkey b { font-family: var(--mono); letter-spacing: .12em; }

/* --- start-here ---------------------------------------------------------- */
.readrow {
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: .9rem 1rem; font-family: var(--mono); font-size: .88rem; overflow-x: auto;
}
.stepnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  background: var(--gold); color: #14100a; font: 800 .8rem/1 var(--mono);
}
.steps2 { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.steps2 li { display: flex; gap: .8rem; align-items: flex-start; }
.gloss { display: grid; gap: .5rem; }
.gloss div { display: grid; grid-template-columns: 11rem 1fr; gap: .8rem; align-items: start;
             padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.gloss div:last-child { border-bottom: 0; }
.gloss b { font-size: .92rem; }
.gloss span { font-size: .88rem; color: var(--ink-2); }
@media (max-width: 620px) { .gloss div { grid-template-columns: 1fr; gap: .2rem; } }

/* --- honesty banner ----------------------------------------------------- */
.honest {
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: var(--card); border-radius: var(--radius-s);
  padding: .9rem 1.1rem; font-size: .9rem; color: var(--ink-2);
}
.honest b { color: var(--ink); }

/* --- tabs --------------------------------------------------------------- */
.tabs { display: flex; gap: .3rem; overflow-x: auto; border-bottom: 1px solid var(--line);
        margin-bottom: 1.4rem; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .92rem;
  padding: .75rem .9rem; border-bottom: 2px solid transparent; white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

/* --- alerts ------------------------------------------------------------- */
.alert { border-radius: var(--radius-s); padding: .9rem 1.1rem; font-size: .92rem; margin-bottom: 1.2rem;
         border: 1px solid var(--line); background: var(--card); }
.alert.warn { border-color: color-mix(in srgb, var(--gold) 45%, transparent);
              background: color-mix(in srgb, var(--gold) 9%, var(--card)); }
.alert.bad  { border-color: color-mix(in srgb, var(--broke) 45%, transparent);
              background: color-mix(in srgb, var(--broke) 9%, var(--card)); }
.alert.good { border-color: color-mix(in srgb, var(--hot) 45%, transparent);
              background: color-mix(in srgb, var(--hot) 9%, var(--card)); }

/* --- progress ----------------------------------------------------------- */
.prog { height: 9px; background: var(--card-2); border-radius: 999px; overflow: hidden; margin: .6rem 0 .4rem; }
.prog i { display: block; height: 100%; background: var(--gold); }

/* --- footer ------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); margin-top: 3rem; padding: 2rem 0 3rem; color: var(--ink-3); font-size: .86rem; }
.ftr a { color: var(--ink-2); }
.ftr .links { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* --- empty state -------------------------------------------------------- */
.empty { text-align: center; padding: 2.6rem 1rem; color: var(--ink-3); }
.empty .big { font-size: 2rem; margin-bottom: .4rem; }

/* --- touch targets ------------------------------------------------------
   Measured on a 360px viewport: header links rendered 37px and the language
   switch 31px. Anything a thumb must hit gets 44px. */
@media (max-width: 720px) {
  .hdr .wrap { min-height: 58px; padding-block: .35rem; }
  .hdr nav a { min-height: 44px; display: inline-flex; align-items: center; padding: .5rem .7rem; }
  .langsw    { min-height: 44px; display: inline-flex; align-items: center; }
  .tabs a    { min-height: 46px; display: inline-flex; align-items: center; }
  .ftr .links a { min-height: 44px; display: inline-flex; align-items: center; }
  .coupon summary { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* the TODAY card: a market whose result for today has not landed yet */
.due { color: var(--gold-ink); font-size: .78rem; white-space: nowrap; }  /* --gold-ink, not --gold: the latter is a FILL colour and fails AA as text on the light theme (caught by the suite at 1.73:1) */
.paused { color: var(--ink-3); font-size: .78rem; white-space: nowrap; font-style: italic; }

/* the book-tier veil: the living page shows through, unreadable but alive */
main.veiled { position: relative; }
main.veiled > .wrap, main.veiled > section { filter: blur(7px) saturate(.8); pointer-events: none; user-select: none; }
.veil { position: absolute; inset: 0; z-index: 40; display: flex; justify-content: center;
        align-items: flex-start; padding: 12vh 1rem 2rem; }
.veilcard { background: var(--card); border: 1px solid var(--gold-dim); border-radius: 14px;
            padding: 1.4rem 1.5rem; max-width: 480px; text-align: center;
            box-shadow: 0 18px 60px rgba(0,0,0,.5); }

/* the comparison table on the kalyanchart landing */
table.cmp td, table.cmp th { text-align: center; }
table.cmp td:first-child, table.cmp th:first-child { text-align: left; }
table.cmp tfoot td { border-top: 2px solid var(--gold-dim); padding-top: .9rem; }

/* the peek: real product screenshots as sales assets */
.peek .shot { margin: 0; background: var(--card); border: 1px solid var(--card-2);
              border-radius: 14px; padding: .6rem; }
.peek .shot img { width: 100%; height: 340px; object-fit: cover; object-position: top;
                  border-radius: 9px; display: block; }
.peek .shot.book img { object-fit: contain; background: #f3f1ea; }
.peek figcaption { font-size: .82rem; color: var(--ink-2); padding: .55rem .2rem .1rem; }

/* the baccarat big road */
.road { display: inline-flex; gap: 3px; align-items: flex-start; vertical-align: middle; }
.road .rc { display: inline-flex; flex-direction: column; gap: 3px; }
.road i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.road i.w { background: var(--hot); }
.road i.l { background: transparent; border: 2px solid var(--broke); opacity: .55; width: 9px; height: 9px; }
.roadlast { margin-left: .5rem; white-space: nowrap; }

/* the sales heat */
.ticker { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; background: var(--card);
          border: 1px solid var(--card-2); border-radius: 12px; padding: .55rem .9rem; font-size: .88rem; }
.tk-live { color: var(--hot); font-weight: 800; letter-spacing: .06em; animation: tkpulse 1.6s ease-in-out infinite; }
@keyframes tkpulse { 50% { opacity: .45; } }
.ticker .tk { white-space: nowrap; }
.deadline { display: inline-block; background: var(--card-2); border: 1px solid var(--gold-dim);
            border-radius: 999px; padding: .45rem 1rem; font-size: .85rem; }
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
          align-items: center; justify-content: space-between; gap: 1rem;
          padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
          background: var(--card); border-top: 1px solid var(--gold-dim); }
.buybar.on { display: flex; }
@media (min-width: 720px) { .buybar.on { display: none; } }  /* phones only */

/* v3: the premium read */
.hero-c { text-align: center; max-width: 780px; margin: 0 auto; }
.hero-c h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 3.1rem); line-height: 1.18; letter-spacing: -.01em; }
.hero-c .hl { color: var(--gold-ink); }
.lede-c { max-width: 56ch; margin: .9rem auto 1.4rem; color: var(--ink-2); font-size: 1.06rem; }
.hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.btn-big { font-size: 1.05rem; padding: .85rem 1.6rem; }
.hero-shot { margin: 2.2rem auto 0; max-width: 400px; }
.hero-shot img { width: 100%; border-radius: 18px; border: 1px solid var(--card-2);
                 box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.ooak { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 860px;
        margin: 2.6rem auto 0; text-align: center; }
.ooak > div { display: grid; gap: .25rem; padding: 1rem .8rem; }
.ooak b { font-size: 1.25rem; color: var(--gold-ink); }
.ooak span { font-size: .88rem; color: var(--ink-2); }
@media (max-width: 700px) {
  .ooak { grid-template-columns: 1fr; gap: .2rem; }
  .bookmoment .wrap { grid-template-columns: 1fr !important; text-align: center; }
  .bookmoment img { max-width: 220px; margin: 0 auto; }
}
.bookmoment { background: var(--bg-2); border-block: 1px solid var(--line); }

/* the hero as the book cover: black stage, green digit rain right */
.hero-matrix { position: relative; background: #050605; overflow: hidden;
               border-bottom: 1px solid #14251c; padding-top: 3rem; }
.hero-matrix #rain { position: absolute; top: 0; right: 0; height: 100%; z-index: 0;
                     opacity: .55; pointer-events: none;
                     -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 45%);
                     mask-image: linear-gradient(90deg, transparent 0, #000 45%); }
.hero-matrix .hero-c h1 { color: #f2ead6; }             /* the cover cream */
.hero-matrix .hero-c .hl { color: #f5c518; }            /* the cover gold  */
.hero-matrix .lede-c { color: #b9c2b6; }
/* light-text overrides scope to elements sitting ON the black stage;
   anything inside a .card sits on the card's own background and keeps
   theme colors (the suite caught green-on-white at 2:1 when this rule
   was broader) */
.hero-matrix .hero-c .eyebrow { color: #35d07f; letter-spacing: .14em; }
.hero-matrix .hero-c .btn-ghost { color: #f2ead6; border-color: #3d4a40; }
.hero-matrix .hero-c .btn-ghost:hover { border-color: #f5c518; }
.hero-matrix .hero-c .small, .hero-matrix .hero-c .muted { color: #b9c2b6; }
.hero-matrix h2.on-stage { color: #f2ead6; }
.hero-matrix .hero-shot img { border-color: #1b2a20; box-shadow: 0 30px 90px rgba(0,0,0,.75); }
.hero-matrix .ooak b { color: #f5c518; }
.hero-matrix .ooak span { color: #9aa598; }
.hero-matrix .ooak { padding-bottom: 2.4rem; }
@media (max-width: 700px) { .hero-matrix #rain { opacity: .3; } }

/* --- phone comfort floors (live audit 2026-08-03) --------------------------
   Nothing under 12px, nothing under 40px to tap. The chart and diagrams sit
   in overflow-x containers, so growing them scrolls, never squishes. */
@media (max-width: 700px) {
  a.btn { min-height: 40px !important; display: inline-flex; align-items: center; }
  table.chart { font-size: 1rem; }
  table.chart th { font-size: .78rem; }
  table.chart.panelview .pan { font-size: .78rem; }
  .mdcell, .mdlabel { font-size: .78rem; }
  button.term .ti { font-size: .78rem; }
  .peek figcaption, .tile span { font-size: .8rem; }
  .plan .tag, th .tag { font-size: .76rem !important; }   /* 'Best value' chips */
  .state { font-size: .76rem; }                            /* patti/state pills */
  .eyebrow { font-size: .76rem; }
}

/* the spine rewrite */
.how { max-width: 640px; margin: 2.6rem auto 0; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.how li { display: flex; gap: .9rem; align-items: baseline; background: rgba(255,255,255,.03);
          border: 1px solid #1b2a20; border-radius: 12px; padding: .8rem 1rem; }
.how li b { color: #f5c518; font-size: 1.05rem; flex: none; }
.how li span { color: #cfd6cc; font-size: .95rem; }
.lockrow td { position: relative; }
.lockrow .lockfake { filter: blur(4px); user-select: none; color: var(--ink-3); letter-spacing: .05em; }
.twotrack .card { border-width: 2px; }

.introtag { display: inline-block; background: var(--card-2); border: 1px solid var(--gold-dim);
            color: var(--gold-ink); border-radius: 999px; padding: .25rem .8rem; font-size: .76rem;
            font-weight: 700; letter-spacing: .06em; vertical-align: middle; margin-left: .6rem; }

/* the loud spam warning (David: highlight in red) */
.spamwarn { background: color-mix(in srgb, var(--broke) 16%, var(--card)); border: 2px solid var(--broke);
            border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 1.1rem; font-size: .96rem; }
.spamwarn b { color: var(--broke); }

/* the Hindi map of Stripe's English checkout (Exit 1, 2026-08-03) */
.payguide { background: var(--card-2); border-radius: 12px; padding: .9rem 1rem; margin: 0 0 1rem; }
.pg-title { margin: 0 0 .7rem; font-weight: 700; font-size: .95rem; }
.payguide ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.payguide li { font-size: .92rem; }
.pg-en { display: inline-block; font: 700 .82rem var(--mono); background: var(--bg-2);
         border: 1px solid var(--ink-3); border-radius: 6px; padding: .1rem .5rem; margin-right: .4rem; }
.pg-hi { display: block; color: var(--ink-2); margin-top: .25rem; }
.pg-note { margin: .8rem 0 0; font-size: .88rem; color: var(--ink-2);
           border-top: 1px solid var(--line); padding-top: .7rem; }

/* the phone buy strip: visible where the cmp table overflows, hidden where it fits */
.buystrip { display: none; margin-top: 1rem; }
.buystrip form { margin: 0 0 .6rem; }
@media (max-width: 720px) { .buystrip { display: block; } }

/* the purchase toast (partials.php social_proof), bottom-left, under Stripe's lightbox.
   Phone: a small card 12px into the corner, rising 16px, above the buybar when it is on.
   Desktop (>=720px, 2026-08-18 review): the phone card was reused unchanged and read as a
   sticker glued to the browser corner (256x57 at 13.76px, 148px left of the content column
   on 1440). Now it is bigger, aligned to the .wrap column's left edge, slides in from the
   left, and the whole card is a link to /#pricing. */
.sp { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
      display: flex; align-items: center; gap: .7rem; max-width: min(340px, calc(100vw - 24px));
      padding: .6rem .8rem .6rem .6rem; background: var(--card); color: var(--ink);
      border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-s);
      box-shadow: var(--shadow); font-size: .86rem; line-height: 1.3; cursor: pointer;
      opacity: 0; transform: translateY(16px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.sp.on { opacity: 1; transform: none; pointer-events: auto; }
.sp[hidden] { display: none; }
.sp-av { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
         background: var(--gold); color: #1a1c1f; font-weight: 800; font-size: 1rem; }
.sp-txt { min-width: 0; }
.sp-txt b { color: var(--ink); }
.sp-p { color: var(--gold-ink); font-weight: 700; }
.sp-cta { display: none; color: var(--ink-2); text-decoration: none; font-size: .88em; margin-top: .15rem; }
.sp:hover .sp-cta, .sp:focus-within .sp-cta { color: var(--ink); text-decoration: underline; }
.sp-x { flex: 0 0 auto; background: none; border: 0; color: var(--ink-3); font-size: 1.15rem; line-height: 1;
        padding: .2rem .35rem; cursor: pointer; border-radius: 4px; }
.sp-x:hover, .sp-x:focus-visible { color: var(--ink); background: var(--card-2); }
@media (min-width: 720px) {
  /* 2026-08-18, David: "pops out in the middle, not noticeable": column-aligned read as
     mid-screen on a wide monitor. Now it hugs the LEFT EDGE (gutter, 24px) and is a
     fixed high-contrast card in BOTH schemes: near-black surface, white text, gold plan,
     2px gold border and a gold glow, so it stands out on the black hero, the dark page
     and the off-white light page alike. */
  .sp { left: 24px; bottom: 32px; max-width: 440px; gap: 1rem;
        padding: 1rem 1.15rem 1rem 1rem; font-size: 1.06rem; line-height: 1.35; border-radius: 14px;
        background: #101215; color: #fff; border: 2px solid #e0bb45; border-left-width: 6px;
        box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 18px 48px rgba(0,0,0,.55), 0 0 36px rgba(224,187,69,.35);
        transform: translateX(-40px) scale(.96);
        transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1); }
  .sp-txt b { color: #fff; }
  .sp-p { color: #e0bb45; font-size: 1.08em; }
  .sp-av { flex-basis: 48px; width: 48px; height: 48px; font-size: 1.3rem; background: #e0bb45; color: #101215;
           box-shadow: 0 0 0 3px rgba(224,187,69,.28); }
  .sp.on .sp-av { animation: sp-ring 1.2s ease-out 1; }
  .sp-cta { display: block; color: #e0bb45; font-weight: 700; margin-top: .3rem; }
  .sp:hover .sp-cta, .sp:focus-within .sp-cta { color: #fff; }
  .sp-x { min-width: 36px; min-height: 36px; padding: .3rem .5rem; font-size: 1.4rem; margin-left: .2rem; color: rgba(255,255,255,.6); }
  .sp-x:hover, .sp-x:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
}
@keyframes sp-ring { 0% { box-shadow: 0 0 0 0 rgba(224,187,69,.7); } 100% { box-shadow: 0 0 0 18px rgba(224,187,69,0); } }
@media (prefers-reduced-motion: reduce) { .sp { transition: none; transform: none; } }

/* ---- the book as a BOOK (David 2026-08-19): cover, page edges, spine, thickness ---- */
.book3d { --bw: 170px; --bh: 271px; --bt: 28px; width: var(--bw); height: var(--bh); perspective: 900px; margin: 0 auto 1.1rem; }
.book3d.center { margin-left: auto; margin-right: auto; }
.book3d .b3 { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(4deg); transition: transform .5s ease; }
.book3d:hover .b3 { transform: rotateY(-8deg) rotateX(2deg); }
.book3d .b3-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px 10px 10px 3px;
  box-shadow: 0 24px 48px rgba(0,0,0,.55), inset 4px 0 8px rgba(0,0,0,.25); backface-visibility: hidden; transform: translateZ(calc(var(--bt) / 2)); }
.book3d .b3-cover::after { content: ""; }
.book3d .b3-pages { position: absolute; top: 3px; bottom: 3px; right: calc(var(--bt) / -2); width: var(--bt); transform-origin: center;
  transform: rotateY(90deg); border-radius: 0 2px 2px 0;
  background: repeating-linear-gradient(to right, #f6f2e6 0 1px, #d9d3c2 1px 2px, #efeadc 2px 3px); box-shadow: inset -2px 0 4px rgba(0,0,0,.25); }
.book3d .b3-spine { display: none; } /* turned -24deg the spine is on the far side; drawn, it paints over the cover's left edge (A/B 2026-08-19) */
.book3d .b3::after { /* the back cover's shadow/thickness seen under the pages */ content: ""; position: absolute; inset: 0; border-radius: 3px 10px 10px 3px;
  background: #14171c; transform: translateZ(calc(var(--bt) / -2)); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.peek .shot.book3d-shot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-top: 1.2rem; }
.peek .shot.book3d-shot .book3d { margin-bottom: 1.2rem; }
.try { padding: 2.2rem 0 1.2rem; background: var(--bg-2); border-block: 1px solid var(--line); }
.try .sec-t { margin-bottom: 1rem; }
.peek .shot.look img { object-fit: contain; background: #0b0d10; height: 340px; }
.hero-board .mmf { text-align: left; }
.hero-shot.hero-board { max-width: 760px; }
.hero-matrix .hero-board .mmf { box-shadow: 0 30px 90px rgba(0,0,0,.75); border: 1px solid #1b2a20; }
.peek .shot.book3d-shot .book3d img { width: 100%; height: 100%; object-fit: cover; background: none; border-radius: 3px 10px 10px 3px; }
.peek .shot.finder img { object-fit: contain; object-position: center; background: #0b0d10; }
/* the scoreboard card scrolls sideways on phones instead of pushing the page wider (pre-existing, found 2026-08-19) */
#live { overflow-x: auto; }
/* phone header (found 2026-08-19: 248px tall, six links stacked one per row). Brand on its own
   row, the nav as ONE horizontally scrollable row of pills underneath. */
@media (max-width: 720px) {
  .hdr .wrap { flex-wrap: wrap; gap: .2rem .6rem; }
  .hdr nav { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: .2rem; padding-bottom: .2rem; }
  .hdr nav::-webkit-scrollbar { display: none; }
  .hdr nav a { min-height: 40px; padding: .35rem .6rem; font-size: .85rem; flex: 0 0 auto; }
}

/* pricing card visuals: the book, or the book + the software (cleaned 2026-08-19) */
.plan-visual { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; height: 190px; margin: .5rem 0 .7rem;
  padding: .6rem .6rem 1.6rem; border-radius: 14px; background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%), var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.plan-visual .book3d { position: relative; margin: 0; flex: 0 0 auto; z-index: 3; }
.plan-visual.bundle .book3d, .plan-visual.life .book3d { margin-right: -26px; transform: translateY(6px); }
.plan-visual .pv-shot { width: 58%; max-width: 230px; height: 122px; object-fit: cover; object-position: top left; border-radius: 10px;
  border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.45); background: #0b0d10; z-index: 1; transform: translateY(-8px); }
.plan-visual .pv-shot.two { position: absolute; right: 1.2rem; top: .9rem; width: 40%; height: 74px; z-index: 0; opacity: .85; transform: none; }
.plan-visual.life .pv-shot:not(.two) { transform: translateY(4px); }
.plan-visual .pv-label { position: absolute; left: 0; right: 0; bottom: .35rem; text-align: center; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 720px) { .plan-visual { height: 168px; } .plan-visual .pv-shot { height: 104px; } }

/* THE PREMIUM RIBBON (contract C-05 / D14, David 2026-09-07: "give a premium ribbon"). 🔒 is the icon,
   the word is the label; on a row it sits in the top-right corner, as a pill in narrow lists. */
.mm-ribbon { display:inline-block; background:#151005; color:#f5c518; font-size:10px; font-weight:800; letter-spacing:.1em; padding:2px 8px; border-radius:0 0 0 8px; line-height:1.4; white-space:nowrap; }
.mm-ribbon.corner { position:absolute; top:-1px; right:-1px; }
.pill.tiny.mm-ribbon { border-radius:999px; padding:1px 7px; }

/* THE STICKY BUY BAR (kc shop pages, non-members; contract C-30) */
/* THE KC BUY BAR (2026-09-08 renamed). It was `.buybar`, which matkamatrix.com's home page has
   used since 1afc31e for its OWN bottom bar (index.php:394). Two blocks, one class: mine came
   later in the file and won, so the mm home-page bar lost its `display:none` default and sat
   pinned open on desktop over the coupon control (the browser suite's click died on it). Renamed,
   so the two products' bars can never style each other. */
.mm-buybar { position:sticky; bottom:0; z-index:60; display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; margin:1rem -1rem 0; background:var(--card, #fffdf5); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(0,0,0,.12); }
.mm-buybar .bb-t { flex:1 1 auto; min-width:0; line-height:1.25; font-size:.92rem; }
.mm-buybar .btn { flex:0 0 auto; white-space:nowrap; }
.mm-buybar .bb-x { flex:0 0 auto; border:0; background:transparent; font-size:18px; color:var(--ink-2); cursor:pointer; padding:.2rem .4rem; }
@media (min-width: 720px) { .mm-buybar { margin-left:0; margin-right:0; border-radius:12px 12px 0 0; } }