/* Kairotick v5 "premium" layer (2026-10-29). The owner picked direction A of three, in the TradeZella family:
   white pages with a soft violet light at the top, ink text, one ink pill button, cards with a hairline border.
   Loaded LAST on every page (apply_kt5.py, run by site_links.main() after every build), so it refines site.css,
   cal.css and academy.css without renaming a class. Brief: C:\aios\prompts\kairotick-premium-site.md.
   Rules from the brief kept here: no gradient text, no ALL-CAPS labels, one type scale (smallest 13 px),
   red = a firm's limit or a loss, yellow = where TradeWarden acts. Built by the Kairotick team. */
:root {
  --ink: #11142b; --ink2: #4a4f68; --graphite: #575c73; --rule: #e7e8f0; --rule2: #dcdfe9; --sheet: #f7f7fb;
  --a1: #5b3df5; --glow1: rgba(124, 92, 255, .16);
  --grad: #11142b;   /* was a violet-pink gradient; academy.css paints the Next-lesson pill and the current lesson dot with it */
}
body {
  font-size: 16px;
  background-color: #fff;
  background-image: radial-gradient(70% 520px at 0% 0%, rgba(124, 92, 255, .11), transparent 70%),
                    radial-gradient(45% 420px at 100% 0%, rgba(224, 69, 155, .05), transparent 70%);
  background-repeat: no-repeat;
}
@media (min-width: 900px) { body { font-size: 17px; } }

/* one type scale: 13 / 15 / 16-17 / 20 / h2 / h1 */
h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 650; line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(26px, 3.3vw, 38px); font-weight: 650; line-height: 1.1; letter-spacing: -0.022em; }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
h4 { font-size: 17px; }
.small, small { font-size: 15px; }
.lead { font-size: clamp(17px, 1.9vw, 20px); color: var(--ink2); }

/* gradient text is gone everywhere */
.grad { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: inherit !important; }

/* labels: sentence case, no tracking (they were ALL-CAPS eyebrows) */
.ft5 .fh, .ac-kick, .ac-side-t, .ac-box-t, .ac-tw-k, .ac-course li.soon span, .ac-get-k, .eyebrow, .chips-h, .firms .lab,
.tgcard .cap, .alerts small, .tf .k, .kick, .kicker {
  text-transform: none !important; letter-spacing: 0 !important;
}
.ac-kick, .eyebrow, .kicker { font-size: 15px !important; font-weight: 600 !important; color: var(--ink2) !important; }

/* header: white glass, ink pill */
.top { background: rgba(255, 255, 255, .86); border-bottom: 1px solid #eceef4; backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.top nav a { color: var(--ink2); font-weight: 500; }
.top nav a:hover { color: var(--ink); }

/* the one button look */
.btn { background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: 999px; font-weight: 600; }
.btn:hover { background: #2a2f55; border-color: #2a2f55; color: #fff; }
.btn.ghost, .cta.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn.ghost:hover, .cta.ghost:hover { background: var(--ink); color: #fff; }

/* answer boxes and cards: white, hairline border, soft violet shadow */
.answer, .next, .last, .facts > div, .card, .ac-box {
  background: #fff; border: 1px solid #e6e7f0; border-radius: 18px;
  box-shadow: 0 18px 50px rgba(60, 40, 160, .07), 0 1px 3px rgba(20, 20, 60, .04);
}
.answer { border-top: 1px solid #e6e7f0; }

/* the "big news today" banner: one quiet strip, so the page's answer stays in the first screen */
.today { padding: 10px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; margin-bottom: 16px; }

/* tables */
.tbl table { font-variant-numeric: tabular-nums; }
.tbl th { color: var(--ink2); font-weight: 600; }

/* footer: deep ink */
.foot, .ft5 { background: #0d1024; }
.ft5 .fh { color: #fff; font-weight: 650; }

/* ---- one scale on every page (phone): 13 / 15 / 16 / 20 / 26 / 34. Measured 10-29 with fontmap.py: the old pages
   used 10 to 16 sizes (12, 12.5, 13.5, 14, 14.5, 15.5, 17, 18, 21, 24, 25, 30, 32...). Desktop keeps the same steps. */
main h1, .ac-head h1 { font-size: clamp(34px, 5.2vw, 58px) !important; }
main h2, .ac-body h2 { font-size: clamp(26px, 3.3vw, 38px) !important; }
main h3 { font-size: 20px !important; }
main h4 { font-size: 16px !important; }
.lead, .ac-dek, .hero .lead { font-size: 16px !important; }
@media (min-width: 900px) { .lead, .ac-dek { font-size: 20px !important; } }
.kt-by, .kt-by a, .kt-by time { font-size: 15px !important; }
summary { font-size: 16px !important; }
main th, .tbl th { font-size: 13px !important; }
main td, .tbl td { font-size: 15px !important; }
.next .when, div.when, p.when, #now b { font-size: 26px !important; }
.small, .crumb, .crumb a, nav.crumb, .et, .src, .note, figcaption, .ac-kick, .today, .today a { font-size: 15px !important; }
.cap, .cl, .cv, .ac-chart-n, .ac-risk, .ac-box-t, .wl-fine, .kick, span.b { font-size: 13px !important; }
/* the example-day chart's lane labels keep site.css's 12 px on phones: lines.js lays them out by measured width, and at
   13 px "Limit" and "TradeWarden" touched at 360 px (collide.mjs, 10-29). Its time axis joins them at 12 px. */
.lines .axis { font-size: 12px !important; }
.ac-body p, .ac-body li, .ac-body strong, .ac-tw-k, .ac-tw-s, .sub, .tz { font-size: 16px !important; }
@media (min-width: 900px) { .ac-body p, .ac-body li { font-size: 18px !important; } }
.top nav a, .top .btn-sm { font-size: 15px !important; }
.ft5, .ft5 a, .ft5 p, .ft5 .fh, .ft5 b { font-size: 15px !important; }
.ft5 .risk, .ft5 .fbase, .ft5 .fbase span { font-size: 13px !important; }

/* form fields: a visible edge (WCAG 1.4.11 needs 3:1 against the page; #7c8199 on white is 3.9:1). Measured 10-29:
   the /free/ waitlist email box had a near-white edge on white. */
main input[type=text], main input[type=email], main input[type=number], main select, main textarea { border: 1.5px solid #7c8199; }
.wl input[type=email], .wl-row input[type=email] { border-color: #7c8199 !important; }   /* waitlist.css set #c9cedb (1.6:1) */

/* ---- round 2 (10-29), after the art-director critique ---- */
/* readable lines and air between paragraphs (answers ran 105-112 characters a line with no paragraph gap) */
main p, main li { max-width: 68ch; }
main p + p { margin-top: .9em; }
/* the footer in two columns on phones, like the home (it was one column, 1,796 px) */
@media (max-width: 600px) {
  .ft5 .fgrid { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
  .ft5 .fbrand { grid-column: 1 / -1; }
  .ft5 nav { gap: 4px; }
}
/* yellow means "where TradeWarden acts", never "a button": every action is the ink pill */
a.cta:not(.ghost), .ac-tw .btn { background: var(--ink) !important; color: #fff !important; border: 2px solid var(--ink) !important;
  box-shadow: none !important; text-decoration: none !important; }
a.cta:not(.ghost):hover, .ac-tw .btn:hover { background: #2a2f55 !important; border-color: #2a2f55 !important; }
.cta.ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; text-decoration: none; }
.btn, .cta, a.dl { text-wrap: balance; }
/* the calendar countdown is information, not a second button */
.next .cd { background: none !important; color: var(--ink) !important; padding: 0 !important; border-radius: 0 !important; font-size: 16px !important; }
/* the "big news today" strip sits under the answer now (site_links.banner): a quiet hairline box */
.today { background: #fff; border: 1px solid #e6e7f0; }