/* The strategies section: every page under /strategies. The header, footer, logo band and
   legal strip are the home page's own rules, copied as they are, so these pages read as the
   same site. Everything after "THE STRATEGIES" is this section's. */
:root {
  --ink: #0c0c0c;
  --ink-2: #3a4252;
  --ink-3: #66708a;
  --navy: #0E2340;
  --navy-2: #16305a;
  --gold: #B0862A;
  --ice: #F1F6FD;
  --line: rgba(14, 35, 64, 0.12);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --lift: 0 1px 2px rgba(14, 35, 64, .05), 0 16px 34px -22px rgba(14, 35, 64, .32);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root { background: linear-gradient(#fff, #fff); }
body { margin: 0; background: linear-gradient(var(--ice), var(--ice)); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; }
a { color: inherit; }
.wrap { width: min(1200px, 100% - 48px); margin: 0 auto; }
.accent { font-style: italic; color: var(--gold); }
.pt { margin-left: -0.07em; }

/* ---------- Header, as the home page draws it ---------- */
.top { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.top-pill {
  pointer-events: auto; width: min(1200px, 100% - 32px); display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px 9px 22px; border-radius: 999px; background: #fff; border: 1px solid rgba(12,12,12,.07);
  box-shadow: 0 4px 0 0 #0c0c0c, 0 18px 30px -18px rgba(14,35,64,.45); transition: box-shadow .3s ease, transform .3s ease;
}
.top.dir-down .top-pill { box-shadow: 0 8px 0 0 #0c0c0c, 0 28px 44px -22px rgba(14,35,64,.5); transform: translateY(-4px); }
.top.dir-up .top-pill { box-shadow: 0 2px 0 0 #0c0c0c, 0 14px 26px -18px rgba(14,35,64,.4); transform: translateY(0); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #0c0c0c; }
.brand svg { height: 30px; width: auto; display: block; }
.brand span { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--ink-2); text-transform: uppercase; }
.top-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 600; }
.top-links a { text-decoration: none; color: var(--ink); transition: opacity .2s ease; }
.top-links a:hover { opacity: .6; }

/* ---------- Footer, logo band and legal strip, as the home page draws them ---------- */
footer { padding: 110px 0 90px; background: linear-gradient(#fff, #fff); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
.foot-top h3 { margin: 0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; letter-spacing: -0.04em; font-weight: 700; max-width: 12ch; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 6px; }
.foot-col h6 { margin: 0 0 4px; font-size: 11px; line-height: 1.3; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.foot-col a { display: block; margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600; text-decoration: none; color: var(--ink-2); transition: opacity .2s ease; }
.foot-col a:hover { opacity: .6; }
.band { background: #0E2340; color: #fff; padding: 58px 24px; }
.band-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 46px; flex-wrap: wrap; }
.band-inner > svg { height: 96px; width: auto; display: block; color: #fff; flex: none; overflow: visible; }
.band-inner > svg .tm { font-size: 150px; font-weight: 600; fill: currentColor; }
.band-sep { width: 1px; height: 64px; background: rgba(255,255,255,.22); flex: none; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px 40px; }
.cluster img { display: block; width: auto; }
.cluster .b-lmp { height: 22px; }
.cluster .b-pro { height: 26px; }
.cluster .b-guide { height: 40px; }
.m-forum { display: inline-flex; flex-direction: column; align-items: center; font-family: 'Manrope', sans-serif; font-weight: 700; line-height: .9; gap: 8px; }
.m-forum .the { display: inline-flex; align-items: center; gap: .55em; font-size: 14px; letter-spacing: .34em; }
.m-forum .the i { width: 1.15em; height: 1px; background: currentColor; opacity: .5; }
.m-forum .the b { margin-right: -.34em; font-weight: 700; }
.m-forum .word { font-size: 40px; letter-spacing: .2em; margin-right: -.2em; }
.cluster .m-forum { color: #fff; gap: 5px; }
.cluster .m-forum .the { font-size: 8px; }
.cluster .m-forum .word { font-size: 22px; }
.cluster .masters { height: 30px; width: auto; color: #fff; display: block; }
.legal { background: #fff; padding: 22px 24px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #6b6b6b; text-transform: uppercase; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

@media (max-width: 980px) {
  .top-links a { display: none; }
  .top-pill { padding-right: 22px; }
  .brand span { display: none; }
  .brand svg { height: 26px; }
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
  .foot-tag { grid-column: 1 / -1; }
  .band-inner { flex-direction: column; gap: 30px; }
  .band-sep { display: none; }
  .band { margin-top: -50px; padding: 100px 0 0; background: linear-gradient(180deg, rgba(184,207,240,0) 0, #B8CFF0 66%); }
  .band-inner > svg { color: var(--ink); margin: 0 0 44px; }
  .cluster { align-self: stretch; background: #0E2340; padding: 46px 20px 48px; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  /* The three columns of links spread across the width (he, 2026-11-12: "spaced out a little bit
     more to the left and right. They're kind of jammed in the center") */
  .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 10px; }
  .foot-tag { text-align: center; }
  .foot-top h3 { font-size: clamp(26px, 7.4vw, 34px); line-height: 1.1; letter-spacing: -0.045em; white-space: nowrap; max-width: none; }
  .foot-col { gap: 11px; align-items: center; text-align: center; }
  .foot-col a { font-size: 12.5px; line-height: 1.3; overflow-wrap: anywhere; }
  .band-inner { gap: 0; }
  .band-inner > svg { height: 74px; }
  .legal { gap: 10px 7px; padding: 20px 12px 24px; font-size: 9.5px; letter-spacing: .07em; text-align: center; }
  .legal > span:first-child { flex: 0 0 100%; font-size: 10.5px; letter-spacing: .14em; }
  .legal > span:first-child + .sep { display: none; }
  .cluster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 0; justify-items: center; align-items: center; }
  .cluster > * { grid-column: span 2; opacity: .86; }
  .cluster > :nth-child(4) { grid-column: 1 / span 3; justify-self: end; margin-right: 20px; }
  .cluster > :nth-child(5) { grid-column: 4 / span 3; justify-self: start; margin-left: 20px; }
  .cluster .b-guide { height: 32px; }
  .cluster .b-pro { height: 21px; }
  .cluster .b-lmp { height: 17px; }
  .cluster .m-forum .word { font-size: 18px; }
  .cluster .masters { height: 24px; }
}

/* =====================================================================================
   THE STRATEGIES
   ===================================================================================== */

/* The four categories keep one colour each, everywhere in the section */
.c-active  { --tint: #FBF3E2; --tint-2: #F3E2BD; --cat: #7E5C12; --dot: #B0862A; }
.c-passive { --tint: #E8F0FC; --tint-2: #CFDFF7; --cat: #234E8C; --dot: #3D6FB6; }
.c-capital { --tint: #EEEAFB; --tint-2: #DAD2F5; --cat: #4A3B91; --dot: #6C5BC0; }
.c-service { --tint: #E5F3ED; --tint-2: #C8E6D8; --cat: #215F4A; --dot: #3C8C6E; }

.kicker { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.lede { margin: 22px 0 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-2); max-width: 62ch; }
.sec { padding: 96px 0 0; }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 0 0 34px; }
.sec-h h2, h2.big { margin: 0; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.045em; font-weight: 700; }
.sec-h p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

/* Buttons. The gold one is the home hero's; the others are its pills, a size up. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 24px; border-radius: 999px; font: 700 15px/1 var(--sans); letter-spacing: -0.015em; text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-gold { color: #0e2340; background: linear-gradient(135deg, #d6ac44, #b0862a 50%, #8a6820); box-shadow: inset 0 1px 0 hsla(0,0%,100%,.5), 0 18px 36px -22px rgba(176,134,42,.7); }
.btn-navy { color: #fff; background: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 14px 28px -16px rgba(14,35,64,.75); }
.btn-line { color: var(--navy); background: #fff; border: 1.5px solid rgba(14,35,64,.22); }
.btn-ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn-white { color: var(--navy); background: #fff; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn-navy:hover { background: var(--navy-2); }
  .btn-line:hover { border-color: var(--navy); }
  .btn-ghost:hover { border-color: #fff; }
}
.btn:focus-visible, .row:focus-visible, .card:focus-visible, .tile:focus-visible, .cat-card:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* The difficulty meter: five circles, filled to the level, and the level's word */
.meter { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(14,35,64,.28); }
.dots i.on { background: var(--navy); box-shadow: none; }
.meter b { font-size: 13px; font-weight: 700; color: var(--ink-2); letter-spacing: -0.005em; }

/* Rena's call for 2027 */
.call { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; letter-spacing: -0.005em; }
.call svg { width: 13px; height: 13px; flex: none; }
.call.up { background: #E4F3EA; color: #1C6A43; }
.call.steady { background: #EAEEF5; color: #3A4252; }
.call.down { background: #FBEAE7; color: #983A2E; }

/* No dot in front of a word, ever (he, 2026-11-12: "That is the biggest AI tell there is"): a
   category is a bubble filled with its own color */
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--dot, var(--navy)) 86%, #0E2340); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ---------- The fit bar: top of every page ---------- */
.fit { padding: 26px 0 0; }
.fit-in { display: flex; align-items: center; gap: 22px; padding: 16px 16px 16px 18px; border-radius: 26px; background: #fff; border: 1px solid rgba(14,35,64,.08); box-shadow: var(--lift); }
.fit-mark { width: 54px; height: 54px; border-radius: 16px; background: var(--navy); display: grid; place-items: center; flex: none; }
.fit-mark img { width: 30px; height: auto; display: block; }
.fit-t { margin: 0; flex: 1 1 0; min-width: 240px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.fit-t b { display: block; font-size: 18px; letter-spacing: -0.025em; color: var(--ink); }
.fit-go { display: flex; gap: 10px; flex: none; flex-wrap: nowrap; }
.fit-go .btn { height: 46px; padding: 0 20px; font-size: 14px; }
.fit-split { width: 1px; align-self: stretch; background: var(--line); margin: 4px 2px; }

/* ---------- The fit card: bottom of every page ---------- */
.end { padding: 110px 0 104px; }
/* The field of 132, at the foot of the index since 2026-11-11 ("It's just a little much"), with room under it before the white footer */
.field-sec.field-end { padding: 0 0 120px; }
.end-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-radius: 34px; background: var(--navy); color: #fff; box-shadow: 0 40px 80px -46px rgba(14,35,64,.9); }
.end-main { position: relative; padding: 64px 56px 60px; }
.end-main::before { content: ""; position: absolute; right: -90px; top: -60px; width: 360px; height: 360px; background: url(/logos/mono/rena-fingerprint-white.png) center / contain no-repeat; opacity: .06; pointer-events: none; }
.end .kicker { color: rgba(255,255,255,.62); }
.end h2 { margin: 0; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -0.045em; font-weight: 700; max-width: 15ch; }
.end p.say { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 48ch; }
.end .go { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.end-forum { position: relative; padding: 64px 52px 60px; background: linear-gradient(160deg, #16305a, #0E2340 70%); border-left: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: flex-start; }
.end-forum .m-forum { color: #fff; gap: 6px; margin: 0 0 26px; }
.end-forum .m-forum .the { font-size: 9px; }
.end-forum .m-forum .word { font-size: 26px; }
.end-forum h3 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.035em; font-weight: 700; }
.end-forum p { margin: 14px 0 26px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.76); max-width: 40ch; }
.end-forum .btn { margin-top: auto; }

/* ---------- Breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.crumbs svg { width: 12px; height: 12px; opacity: .5; }

/* ---------- Index: the hero and the field of 132 ---------- */
.ix-hero { padding: 150px 0 0; background: linear-gradient(180deg, #fff 0, #fff 55%, rgba(255,255,255,0) 100%); }
.ix-hero h1 { margin: 0; font-size: clamp(42px, 6.6vw, 104px); line-height: 1.0; letter-spacing: -0.052em; font-weight: 700; text-wrap: balance; }
.ix-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 56px; flex-wrap: wrap; }
.ix-sub .ix-facts { margin: 0 0 4px; }
.field-sec { padding: 26px 0 0; }
.field { padding: 28px 30px 22px; border-radius: 32px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); }
.field-groups { display: grid; grid-template-columns: 8fr 8fr 7fr 7fr; gap: 18px 26px; align-items: start; }
.fg h3 { margin: 0 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cat); }
.fg h3 span { font-size: 12px; letter-spacing: 0; color: var(--ink-3); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
.tile { aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; color: var(--cat); background: var(--tint-2); transition: transform .15s ease, box-shadow .15s ease; }
.tile.l2 { background: color-mix(in srgb, var(--dot) 34%, var(--tint)); }
.tile.l3 { background: color-mix(in srgb, var(--dot) 55%, var(--tint)); color: #fff; }
.tile.l4 { background: color-mix(in srgb, var(--dot) 78%, #0E2340); color: #fff; }
.tile.l5 { background: color-mix(in srgb, var(--dot) 45%, #0E2340); color: #fff; }
.tile:hover, .tile.hot { transform: scale(1.18); box-shadow: 0 6px 14px -6px rgba(14,35,64,.6); position: relative; z-index: 2; }
.field-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); min-height: 58px; }
.field-cap .now { min-width: 0; font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.field-cap .now b { display: block; color: var(--ink); font-size: 15px; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.legend .ramp { display: inline-flex; gap: 4px; }
.legend .ramp button { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; font: inherit; }
.legend .ramp button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--navy); }
.field .tiles .tile { transition: opacity .25s ease, transform .15s ease, box-shadow .15s ease; }
.field .tiles .tile.dim { opacity: .12 !important; }
.field.lit .tiles .tile:not(.dim) { box-shadow: 0 4px 12px -4px rgba(14,35,64,.55); }
.not-exit { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 28px 0 0; padding: 14px 20px; border-radius: 18px; background: #fff; border: 1.5px solid rgba(176,134,42,.45); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); box-shadow: var(--lift); }
.not-exit b { color: var(--ink); font-weight: 800; letter-spacing: -0.01em; }
.not-exit.small { margin-top: 20px; padding: 10px 16px; font-size: 14.5px; }
.not-exit a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(14,35,64,.35); text-decoration-thickness: 1.5px; text-underline-offset: 3px; white-space: nowrap; }
.not-exit a:hover { text-decoration-color: var(--navy); }

/* Strategies vs exit strategies */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch; }
.vs-card { display: flex; flex-direction: column; padding: 32px 32px 28px; border-radius: 28px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); }
.vs-card.is-strategy { background: radial-gradient(120% 120% at 0% 0%, #1A3A6C, #0E2340 60%); color: #fff; border-color: transparent; }
.vs-k { margin: 0 0 14px; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.vs-card.is-strategy .vs-k { color: #e4bc55; }
.vs-card h3 { margin: 0; font-size: 27px; line-height: 1.15; letter-spacing: -0.035em; font-weight: 700; }
.vs-card p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }
.vs-card.is-strategy p { color: rgba(255,255,255,.82); }
.vs-card .vs-eg { margin-top: auto; padding-top: 22px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.vs-card.is-strategy .vs-eg { color: #fff; }
.vs-eg b { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.vs-card.is-strategy .vs-eg b { color: rgba(255,255,255,.6); }
.vs-mid { align-self: center; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: var(--lift); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink-3); }
.ix-facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }
.ix-facts span { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.ix-facts b { color: var(--ink); margin-right: 5px; }

/* ---------- Index: the four categories ---------- */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cat-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 26px; background: linear-gradient(180deg, var(--tint) 0, #fff 78%); border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .cat-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(14,35,64,.05), 0 26px 44px -24px rgba(14,35,64,.42); } }
.cat-card .kicker { color: var(--cat); margin-bottom: 18px; }
.cat-card h3 { margin: 0; font-size: 27px; line-height: 1.1; letter-spacing: -0.04em; font-weight: 700; }
.cat-card .how { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--cat); }
.cat-card p.d { margin: 14px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.dist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 64px; margin-top: auto; }
.dist span { position: relative; border-radius: 6px 6px 3px 3px; background: var(--dot); min-height: 4px; }
.dist span:nth-child(1) { opacity: .35; } .dist span:nth-child(2) { opacity: .5; } .dist span:nth-child(3) { opacity: .65; } .dist span:nth-child(4) { opacity: .82; }
.dist span em { position: absolute; left: 0; right: 0; top: -19px; text-align: center; font-style: normal; font-size: 11px; font-weight: 800; color: var(--cat); }
.dist-k { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 7px 0 0; font-size: 9.5px; font-weight: 700; color: var(--ink-3); text-align: center; letter-spacing: .02em; }
.cat-card .open { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--navy); }
.cat-card .open svg { width: 18px; height: 18px; transition: transform .2s ease; }
.cat-card:hover .open svg { transform: translateX(4px); }
.note { margin: 34px 0 0; padding: 24px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }

/* ---------- Index: how to read a strategy ---------- */
.read { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
.panel { padding: 34px 34px 30px; border-radius: 28px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); }
.panel h3 { margin: 0; font-size: 24px; letter-spacing: -0.035em; font-weight: 700; }
.panel > p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.levels { list-style: none; margin: 22px 0 0; padding: 0; }
.levels li { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 18px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line); }
.levels li p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.levels li .n { font-size: 12.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.panel .fine { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.calls { list-style: none; margin: 22px 0 0; padding: 0; }
.calls li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.calls li p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.calls li .n { font-size: 22px; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); text-align: right; }

/* ---------- Index: every strategy, with search ---------- */
.finder { position: sticky; top: 92px; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px; margin: 0 0 26px; border-radius: 22px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border: 1px solid rgba(14,35,64,.08); box-shadow: var(--lift); }
.search { position: relative; flex: 1 1 280px; }
.search svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; height: 48px; padding: 0 16px 0 46px; border-radius: 999px; border: 1.5px solid rgba(14,35,64,.14); background: #fff; font: 600 15.5px var(--sans); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }
.search input:focus { border-color: var(--navy); }
.search input::placeholder { color: var(--ink-3); font-weight: 500; }
.lvl { display: flex; gap: 6px; flex-wrap: wrap; }
.lvl button { height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(14,35,64,.14); background: #fff; font: 700 13px var(--sans); color: var(--ink-2); cursor: pointer; }
.lvl button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.lvl button:focus-visible { outline: none; border-color: var(--navy); }
.group { margin: 0 0 30px; padding: 26px 26px 14px; border-radius: 28px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); }
.group-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 10px; padding: 0 8px 16px; border-bottom: 1px solid var(--line); }
.group-h h3 { margin: 0; font-size: 22px; letter-spacing: -0.035em; font-weight: 700; color: var(--cat); }
.group-h a { font-size: 14px; font-weight: 700; color: var(--cat); text-decoration: none; white-space: nowrap; }
.group-h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px 98px; gap: 18px; align-items: center; padding: 15px 8px; border-radius: 16px; text-decoration: none; color: var(--ink); transition: background .15s ease; }
.rows li + li .row { box-shadow: 0 -1px 0 var(--line); }
@media (hover: hover) { .row:hover { background: var(--tint); box-shadow: none; } .rows li:hover + li .row { box-shadow: none; } }
.row .no { font-size: 13px; font-weight: 800; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.row .nm { min-width: 0; }
.row .nm b { display: block; font-size: 16.5px; letter-spacing: -0.02em; }
.row .nm span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.row .call { justify-self: start; }
.none { display: none; margin: 10px 0 0; padding: 40px; text-align: center; border-radius: 24px; background: #fff; border: 1px dashed rgba(14,35,64,.2); font-size: 16px; color: var(--ink-2); }
.none.on { display: block; }
.group[hidden], .rows li[hidden] { display: none; }

.closing { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.closing p { margin: 0 0 18px; font-size: 17px; line-height: 1.72; color: var(--ink-2); }

/* ---------- Category pages ---------- */
.cat-hero { padding: 140px 0 70px; background: linear-gradient(180deg, var(--tint) 0, var(--tint) 62%, rgba(255,255,255,0) 100%); }
.cat-hero h1 { margin: 0; font-size: clamp(44px, 6vw, 88px); line-height: 1.02; letter-spacing: -0.05em; font-weight: 700; }
.cat-hero .how { margin: 12px 0 0; font-size: clamp(20px, 2vw, 28px); font-weight: 700; letter-spacing: -0.03em; color: var(--cat); }
.cat-hero .kicker { color: var(--cat); }
.cat-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: end; }
.stat-card { padding: 26px 26px 22px; border-radius: 26px; background: #fff; box-shadow: var(--lift); }
.stat-card .big { display: flex; align-items: baseline; gap: 10px; font-size: 54px; line-height: 1; letter-spacing: -0.05em; font-weight: 700; }
.stat-card .big > span:last-child { font-size: 15px; letter-spacing: -0.01em; font-weight: 700; color: var(--ink-3); }
.stat-card .dist { margin-top: 34px; }
.stat-card .calls-mini { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.switch { display: flex; gap: 8px; flex-wrap: wrap; margin: 34px 0 0; }
.switch a { --fill: color-mix(in srgb, var(--dot) 86%, #0E2340); display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--fill); font-size: 14px; font-weight: 700; color: #fff; text-decoration: none; opacity: .8; transition: opacity .2s ease; }
.switch a[aria-current] { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fill); }
.switch a:hover:not([aria-current]) { opacity: 1; }
.tier { margin: 0 0 46px; }
.tier-h { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.tier-h h3 { margin: 0; font-size: 21px; letter-spacing: -0.03em; font-weight: 700; }
.tier-h .count { font-size: 13.5px; font-weight: 700; color: var(--ink-3); }
.tier-h .rule { flex: 1; height: 1px; background: var(--line); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 22px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(14,35,64,.05), 0 24px 40px -24px rgba(14,35,64,.42); } }
.card .no { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--cat); }
.card > b { display: block; margin: 8px 0 0; font-size: 18px; line-height: 1.25; letter-spacing: -0.025em; }
.card > p { margin: 8px 0 18px; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.essay { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 64px; align-items: start; }
.essay-side { position: sticky; top: 110px; }
.essay-side h2 { margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 700; }
.prose { max-width: 70ch; }
.prose p { margin: 0 0 22px; font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.prose h3 { margin: 40px 0 14px; font-size: 22px; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); }
.prose h3:first-child { margin-top: 0; }
.question { margin: 34px 0 0; padding: 30px 32px; border-radius: 24px; background: var(--tint); }
.question .kicker { color: var(--cat); margin-bottom: 10px; }
.question p { margin: 0; font-size: 19px; line-height: 1.6; letter-spacing: -0.015em; color: var(--ink); font-weight: 600; }

/* ---------- Strategy pages ---------- */
.st-hero { padding: 140px 0 64px; background: linear-gradient(180deg, var(--tint) 0, var(--tint) 58%, rgba(255,255,255,0) 100%); }
.st-hero .kicker { color: var(--cat); }
.st-hero .wrap { position: relative; }
.st-num { position: absolute; right: -6px; bottom: -40px; font-size: clamp(150px, 19vw, 300px); line-height: .8; font-weight: 800; letter-spacing: -0.07em; color: var(--tint-2); pointer-events: none; user-select: none; z-index: 0; }
.st-hero .wrap > :not(.st-num) { position: relative; z-index: 1; }
.st-hero h1 { margin: 0; font-size: clamp(36px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.048em; font-weight: 700; text-wrap: balance; max-width: 20ch; }
.st-hero .tagline { margin: 20px 0 0; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; letter-spacing: -0.015em; color: var(--ink-2); max-width: 46ch; font-weight: 500; }
.facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.fact { display: flex; flex-direction: column; gap: 9px; padding: 14px 18px 15px; border-radius: 18px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); }
.fact .k { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.fact .meter b { font-size: 15px; color: var(--ink); }
.fact .dots i { width: 11px; height: 11px; }
.st-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; padding-top: 34px; }
.sheet { padding: 54px 60px 46px; border-radius: 30px; background: #fff; border: 1px solid rgba(14,35,64,.06); box-shadow: var(--lift); }
.sheet h2 { margin: 46px 0 16px; font-size: 27px; line-height: 1.2; letter-spacing: -0.035em; font-weight: 700; scroll-margin-top: 110px; }
.sheet h2:first-child { margin-top: 0; }
.sheet p { margin: 0 0 20px; font-size: 17.5px; line-height: 1.78; color: var(--ink-2); }
.sheet p:first-of-type::first-line { color: var(--ink); }
.sheet p a, .verdict p a { color: var(--navy); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(14,35,64,.3); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sheet p a:hover, .verdict p a:hover { text-decoration-color: var(--navy); }
.verdict { margin: 46px 0 0; padding: 32px 34px 30px; border-radius: 24px; scroll-margin-top: 110px; }
.verdict.up { background: linear-gradient(160deg, #E9F6EE, #F6FBF8); }
.verdict.steady { background: linear-gradient(160deg, #ECF0F7, #F7F9FC); }
.verdict.down { background: linear-gradient(160deg, #FBECE9, #FDF7F6); }
.verdict-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.verdict-h .kicker { margin: 0; }
.verdict-h h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 34px; letter-spacing: -0.045em; }
.verdict-h h2 svg { width: 28px; height: 28px; }
.verdict.up h2 { color: #1C6A43; } .verdict.steady h2 { color: #3A4252; } .verdict.down h2 { color: #983A2E; }
.verdict p { margin: 0; font-size: 17px; line-height: 1.72; color: var(--ink-2); }
.src { margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.src a { color: var(--navy); font-weight: 700; }
.side { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
.side-box { padding: 22px 22px 20px; border-radius: 24px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); }
.side-box h4 { margin: 0 0 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.toc { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: 8px 0; font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; border-top: 1px solid var(--line); }
.toc li:first-child a { border-top: 0; }
.toc a:hover { color: var(--navy); }
.twin { display: block; padding: 12px 14px; margin: 0 0 8px; border-radius: 16px; background: var(--tint); text-decoration: none; color: var(--ink); }
.twin:last-child { margin-bottom: 0; }
.twin small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cat); }
.twin b { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.3; letter-spacing: -0.015em; }
.side-box p.mini { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.side-cta { padding: 22px; border-radius: 24px; background: var(--navy); color: #fff; }
.side-cta b { display: block; font-size: 17px; line-height: 1.3; letter-spacing: -0.02em; }
.side-cta p { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.74); }
.side-cta .btn { width: 100%; height: 44px; font-size: 14px; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0 0; }
.pager a { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); text-decoration: none; color: var(--ink); transition: transform .2s ease; }
.pager a:hover { transform: translateY(-2px); }
.pager a.next { text-align: right; align-items: flex-end; }
.pager small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pager small svg { width: 14px; height: 14px; }
.pager b { font-size: 17px; line-height: 1.3; letter-spacing: -0.02em; }
.pager span.cat { font-size: 13px; font-weight: 700; color: var(--cat); }

/* ---------- Sources ---------- */
.sources { margin: 0; padding: 30px 40px 30px 76px; border-radius: 28px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); columns: 2; column-gap: 56px; }
.sources li { break-inside: avoid; margin: 0 0 12px; padding-left: 6px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.sources li::marker { font-size: 12.5px; font-weight: 800; color: var(--ink-3); }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1080px) {
  .cat-top, .closing, .essay { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .field-groups { grid-template-columns: 1fr 1fr; }
  .essay-side { position: static; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .read { grid-template-columns: minmax(0, 1fr); }
  .vs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vs-mid { justify-self: center; margin: -14px 0; position: relative; z-index: 1; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-body { grid-template-columns: minmax(0, 1fr); }
  .st-num { font-size: 120px; bottom: auto; top: 40px; opacity: .7; }
  .side { position: static; }
  .end-card { grid-template-columns: minmax(0, 1fr); }
  .end-forum { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .fit-in { flex-wrap: wrap; }
  .fit-t { flex-basis: calc(100% - 80px); }
  .fit-go { flex-wrap: wrap; }
  .fit-split { display: none; }
}
@media (max-width: 760px) {
  .ix-hero { padding-top: 118px; }
  .cat-hero, .st-hero { padding-top: 112px; padding-bottom: 44px; }
  .sec { padding-top: 70px; }
  .end { padding: 80px 0 64px; }
  .field-sec.field-end { padding: 0 0 80px; }
  .field { padding: 18px; border-radius: 24px; }
  .field-groups { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tiles { grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; }
  .tile { font-size: 8.5px; border-radius: 5px; }
  .fg h3 { margin-bottom: 8px; }
  .st-num { display: none; }
  .crumbs svg:last-of-type, .crumbs [aria-current] { display: none; }
  .facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-radius: 20px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); overflow: hidden; }
  .fact { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 0; border: 0; box-shadow: none; }
  .fact + .fact { border-top: 1px solid var(--line); }
  .field-cap { flex-direction: column; align-items: flex-start; }
  .cats, .cards { grid-template-columns: minmax(0, 1fr); }
  .levels li { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
  .levels li p { grid-column: 1 / -1; grid-row: 2; }
  .calls li { grid-template-columns: 88px minmax(0, 1fr); }
  .calls li .n { display: none; }
  .panel { padding: 26px 22px 22px; }
  .finder { top: 82px; padding: 10px; border-radius: 20px; }
  .lvl { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
  .lvl::-webkit-scrollbar { display: none; }
  .lvl button { flex: none; }
  .group { padding: 18px 12px 8px; border-radius: 24px; }
  .group-h { padding: 0 6px 14px; }
  .group-h h3 { font-size: 19px; }
  .row { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 14px 6px; }
  .row .meter, .row .call { grid-column: 2; }
  .row .meter { margin-top: 6px; }
  .row .call { margin-top: 2px; }
  .row .nm b { font-size: 16px; }
  .sheet { padding: 30px 22px 26px; border-radius: 24px; }
  .sheet h2 { font-size: 23px; margin-top: 36px; }
  .sheet p { font-size: 16.5px; line-height: 1.72; }
  .verdict { padding: 24px 20px; margin-top: 36px; }
  .verdict-h { flex-direction: column; align-items: flex-start; gap: 8px; }
  .verdict p { font-size: 16px; }
  .fit-in { padding: 16px; gap: 14px; border-radius: 22px; }
  .fit-mark { width: 46px; height: 46px; border-radius: 14px; }
  .fit-mark img { width: 25px; }
  .fit-t { flex-basis: calc(100% - 64px); font-size: 14px; }
  .fit-t b { font-size: 16.5px; }
  .fit-go { width: 100%; }
  .fit-go .btn { flex: 1 1 auto; height: 44px; padding: 0 14px; font-size: 13.5px; }
  .fit-go .btn-forum { flex-basis: 100%; }
  .end-main, .end-forum { padding: 40px 24px 36px; }
  .end-card { border-radius: 28px; }
  .end .go .btn { flex: 1 1 auto; }
  .end-forum .btn { width: 100%; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a.next { text-align: left; align-items: flex-start; }
  .sources { columns: 1; padding: 22px 20px 22px 50px; }
  .prose p { font-size: 16.5px; }
  .question { padding: 24px 22px; }
  .question p { font-size: 17px; }
}
/* ---------- Motion, only under html.js-anim (set in the head when the browser can
   watch elements arrive and the reader has not asked for less motion) ---------- */
.js-anim [data-rv] {
  opacity: 0; translate: 0 26px;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), translate .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms),
              transform .2s ease, box-shadow .2s ease, background .15s ease;
}
.js-anim [data-rv].in { opacity: 1; translate: none; }
/* Side by side only on a wide screen, where the cards have room to slide in from their own
   sides. Narrower, they stack and rise like everything else: a card waiting off the right
   edge of a phone made the whole page wider than the screen. */
@media (min-width: 1081px) {
  .js-anim .vs-card.is-strategy[data-rv] { translate: -44px 0; }
  .js-anim .vs-card.is-exit[data-rv] { translate: 44px 0; }
  .js-anim .vs-card[data-rv].in { translate: none; }
}
.js-anim .vs-mid[data-rv] { translate: none; scale: .2; transition: opacity .5s ease var(--d, 0ms), scale .7s cubic-bezier(.34,1.56,.64,1) var(--d, 0ms); }
.js-anim .vs-mid[data-rv].in { scale: 1; }
/* The bars in each difficulty chart grow from the floor, one after another */
.js-anim .dist span { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.js-anim .in .dist span { transform: none; }
.js-anim .dist span:nth-child(1) { transition-delay: calc(var(--d, 0ms) + 250ms); }
.js-anim .dist span:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 330ms); }
.js-anim .dist span:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 410ms); }
.js-anim .dist span:nth-child(4) { transition-delay: calc(var(--d, 0ms) + 490ms); }
.js-anim .dist span:nth-child(5) { transition-delay: calc(var(--d, 0ms) + 570ms); }
.js-anim .dist span em { opacity: 0; transition: opacity .4s ease calc(var(--d, 0ms) + 800ms); }
.js-anim .in .dist span em { opacity: 1; }
/* Difficulty meters fill circle by circle as they arrive */
.js-anim .dots i.on { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(14,35,64,.28); transition: background .3s ease, box-shadow .3s ease; }
.js-anim .in .dots i.on { background: var(--navy); box-shadow: none; }
.js-anim .in .dots i:nth-child(1) { transition-delay: calc(var(--d, 0ms) + 200ms); }
.js-anim .in .dots i:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 290ms); }
.js-anim .in .dots i:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 380ms); }
.js-anim .in .dots i:nth-child(4) { transition-delay: calc(var(--d, 0ms) + 470ms); }
.js-anim .in .dots i:nth-child(5) { transition-delay: calc(var(--d, 0ms) + 560ms); }
/* The field: all four groups fill in together, square by square */
.js-anim .field .tiles .tile { opacity: 0; scale: .5; transition: opacity .45s ease calc(var(--i, 0) * 14ms + 150ms), scale .55s cubic-bezier(.34,1.45,.64,1) calc(var(--i, 0) * 14ms + 150ms), transform .15s ease, box-shadow .15s ease; }
.js-anim .field.in .tiles .tile { opacity: 1; scale: 1; }
.js-anim .field.in .tiles .tile.dim { transition-delay: 0s; }
/* A strategy's big number settles into place */
.js-anim .st-num { animation: st-num-in 1.1s cubic-bezier(.2,.7,.2,1) .15s both; }
@keyframes st-num-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: none; } }

/* ---------- More motion, round two (2026-11-11): "make the animations start over on every
   pass, and do more". Everything replays each time it comes back on screen, from whichever
   side you come in. ---------- */

/* Coming back down from above, a block settles into place from above instead of rising */
.js-anim [data-rv].from-top:not(.in) { translate: 0 -26px; }

/* Headings arrive word by word (strategies.js wraps each word once) */
.js-anim [data-words]:not(.split) { opacity: 0; }
[data-words] .w { display: inline-block; }
.js-anim [data-words] .w {
  opacity: 0; translate: 0 .42em; filter: blur(5px);
  transition: opacity .55s ease calc(var(--wi, 0) * 55ms + var(--d, 0ms)), translate .75s cubic-bezier(.2,.7,.2,1) calc(var(--wi, 0) * 55ms + var(--d, 0ms)), filter .55s ease calc(var(--wi, 0) * 55ms + var(--d, 0ms));
}
.js-anim [data-words].from-top:not(.in) .w { translate: 0 -.42em; }
.js-anim [data-words].in .w { opacity: 1; translate: none; filter: none; }
[data-count] { font-variant-numeric: tabular-nums; }

/* The gold reading line along the very top */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #e4bc55, #b0862a 60%, #8a6820); transform-origin: 0 50%; transform: scaleX(0); }

/* Every row of the full list arrives on its own as the list scrolls past */
.js-anim .rows li { opacity: 0; translate: 0 18px; transition: opacity .5s ease var(--d, 0ms), translate .6s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.js-anim .rows li.from-top:not(.in) { translate: 0 -18px; }
.js-anim .rows li.in { opacity: 1; translate: none; }

/* The field fills from wherever you come in: top first on the way down, bottom first on the way up */
.js-anim .field.rev .tiles .tile { transition-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 14ms + 150ms), calc((var(--n, 1) - 1 - var(--i, 0)) * 14ms + 150ms), 0s, 0s; }
/* and, while it is on screen, a square here and there lights up */
.field .tiles .tile.tw { animation: tw 1.1s ease; }
@keyframes tw { 0%, 100% { filter: none; } 40% { filter: brightness(1.35) saturate(1.3); box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 10px 20px -6px rgba(14,35,64,.6); } }

/* The vs badge keeps a slow pulse while it is in view */
.js-anim .vs-mid.in { animation: vs-pulse 2.8s ease-out 1.1s infinite; }
@keyframes vs-pulse { 0% { box-shadow: 0 0 0 0 rgba(176,134,42,.5); } 70% { box-shadow: 0 0 0 18px rgba(176,134,42,0); } 100% { box-shadow: 0 0 0 0 rgba(176,134,42,0); } }

/* Prediction arrows lean the way they point */
.call.up svg, .verdict.up h2 svg { --nx: 3px; --ny: -3px; }
.call.steady svg, .verdict.steady h2 svg { --nx: 4px; --ny: 0px; }
.call.down svg, .verdict.down h2 svg { --nx: 3px; --ny: 3px; }
@keyframes lean { 0%, 100% { transform: none; } 50% { transform: translate(var(--nx), var(--ny)); } }
@media (hover: hover) { .row:hover .call svg, .card:hover .call svg, .fact:hover .call svg { animation: lean .7s ease; } }
.js-anim .verdict.in h2 svg { animation: lean 2.2s ease-in-out .9s infinite; }

/* On this page: the section you are reading is marked */
.toc a { position: relative; transition: color .2s ease, padding-left .25s ease; }
.toc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 0; border-radius: 2px; background: var(--gold); transform: translateY(-50%); transition: height .25s ease; }
.toc a.on { color: var(--navy); padding-left: 12px; }
.toc a.on::before { height: 16px; }

/* The fingerprint behind the closing card drifts */
.js-anim .end-main::before { animation: fp-drift 14s ease-in-out infinite alternate; }
@keyframes fp-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-26px, 20px) rotate(-8deg); } }

/* A strategy's big number moves a little slower than the page (strategies.js sets --py) */
.st-num { transform: translateY(var(--py, 0px)); }

/* Cards lean toward the pointer, with a soft light where it is (pointer screens only) */
.vs-card { position: relative; }
.tilt { --glow: color-mix(in srgb, var(--dot, #3D6FB6) 20%, transparent); }
.vs-card.is-strategy.tilt { --glow: rgba(255,255,255,.16); }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 60%); opacity: 0; transition: opacity .3s ease; }
.tilt.tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition: transform .12s linear, box-shadow .25s ease; box-shadow: 0 1px 2px rgba(14,35,64,.05), 0 30px 50px -26px rgba(14,35,64,.45); }
.tilt.tilting::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card, .cat-card, .tile, .pager a { transition: none; }
}

/* =====================================================================================
   PHONES, 2026-11-11: "everything really sprawled out over mobile... it takes just way too
   long to scroll". Everything below changes the phone only; a computer keeps the page above.
   ===================================================================================== */
.vs-m, .cat-note, .rolo-bar, .rolo-hint, .rc-cat, .rc-go, .rc-more, .clamp-more, .car-dots, .cat-lists { display: none; }
/* The category label is a phone card's; .row .nm span would otherwise show it in the computer list */
.row .nm .rc-cat { display: none; }

@media (max-width: 980px) {
  /* The footer sits on the page's own pale blue, as on the home page, so the blue behind the
     big Rena logo fades up into it with no edge */
  footer { background: none; }
}

@media (max-width: 760px) {
  /* A tighter rhythm */
  .ix-hero { padding-top: 104px; }
  .cat-hero, .st-hero { padding-top: 100px; padding-bottom: 34px; }
  .sec { padding-top: 54px; }
  .sec-h { margin-bottom: 20px; }
  .sec-h h2, h2.big { font-size: clamp(27px, 7.6vw, 34px); }
  .sec-h p { font-size: 15.5px; line-height: 1.6; }
  .fit { padding-top: 16px; }
  .end { padding: 54px 0 44px; }
  /* Less room between the squares and Real estate starts here, and the footer sits nearer the
     big Rena logo (he, 2026-11-12: "lowered a little bit more so it's closer to the bottom... It's
     just too spaced out at the moment") */
  .field-sec.field-end { padding-bottom: 30px; }
  footer { padding: 52px 0 36px; }
  .note { margin-top: 20px; padding: 18px 18px; font-size: 14.5px; }

  /* Gone on a phone */
  .ix-hero .not-exit, .finder, .none, .vs, .vs-note, .cats-note, .tiers { display: none !important; }

  /* Long paragraphs fold to a few lines, with Read more */
  [data-clamp] { position: relative; max-height: 7.4em; overflow: hidden; transition: max-height .6s ease; }
  [data-clamp].open { max-height: 300em; }
  [data-clamp]:not(.open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2em; background: linear-gradient(rgba(241,246,253,0), var(--ice)); pointer-events: none; }
  .clamp-more.on { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 0; border: 0; background: none; font: 700 14px var(--sans); color: var(--navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

  /* Read more looks the same everywhere: plain words that fade out, never a box. The note under
     the Rolodex loses its card, and its words match Where you fit's. */
  .note[data-clamp] { margin: 30px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
  .closing p { font-size: 16px; line-height: 1.7; }
  /* Where you fit sits on its own white ground under a hairline, apart from Every strategy */
  .closing-sec { margin-top: 46px; padding: 44px 0 54px; border-top: 1px solid var(--line); background: linear-gradient(180deg, #fff 0, #fff calc(100% - 64px), rgba(255,255,255,0) 100%); }
  .closing-sec [data-clamp]:not(.open)::after { background: linear-gradient(rgba(255,255,255,0), #fff); }
  .sheet [data-clamp]:not(.open)::after { background: linear-gradient(rgba(255,255,255,0), #fff); }
  .closing { row-gap: 22px; }
  .closing > .clamp-more { margin-top: -12px; }
  /* The top: no row of bubbles, just the words */
  .ix-facts { display: none; }

  /* Strategies vs exit strategies, as one graphic */
  .vs-m { display: block; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid rgba(14,35,64,.07); box-shadow: var(--lift); }
  .vs-m-head { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
  .vs-m-col { padding: 20px 24px 18px 16px; }
  .vs-m-col.is-e { padding: 20px 16px 18px 26px; }
  .vs-m-col.is-s { background: radial-gradient(130% 120% at 0% 0%, #1A3A6C, #0E2340 62%); color: #fff; }
  .vs-m-col .k { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
  .vs-m-col.is-s .k { color: #e4bc55; }
  .vs-m-col b { display: block; margin-top: 8px; font-size: 17px; line-height: 1.2; letter-spacing: -0.025em; }
  .vs-m-col p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
  .vs-m-col.is-s p { color: rgba(255,255,255,.8); }
  .vs-m-badge { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -6px rgba(14,35,64,.55); font-size: 12px; font-weight: 800; color: var(--ink-3); }
  .vs-m-rows > div { display: grid; grid-template-columns: 1fr 1fr; }
  .vs-m-rows span { padding: 11px 16px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; border-top: 1px solid var(--line); }
  .vs-m-rows span:first-child { background: #12294A; color: #fff; border-top-color: rgba(255,255,255,.09); }
  .vs-m-rows span:last-child { padding-left: 26px; color: var(--ink); }
  .vs-m-lab span { padding: 9px 16px 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .vs-m-lab span:first-child { color: rgba(255,255,255,.62); }
  .vs-m-lab span:last-child { color: var(--ink-3); }
  .vs-m-rows > div:not(.vs-m-lab) { position: relative; }
  .vs-m-rows > div:not(.vs-m-lab)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; translate: -50% -50%; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2340' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: 0 3px 8px -2px rgba(14,35,64,.45); }
  .js-anim .vs-m .vs-m-rows > div:not(.vs-m-lab)::after { opacity: 0; scale: .3; transition: opacity .3s ease calc(var(--r, 0) * 110ms + 520ms), scale .5s cubic-bezier(.34,1.56,.64,1) calc(var(--r, 0) * 110ms + 520ms); }
  .js-anim .vs-m.in .vs-m-rows > div:not(.vs-m-lab)::after { opacity: 1; scale: 1; }
  .vs-m-note { margin: 0; padding: 14px 16px 16px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
  .js-anim .vs-m .vs-m-rows span { opacity: 0; transition: opacity .5s ease calc(var(--r, 0) * 110ms + 250ms), translate .6s cubic-bezier(.2,.7,.2,1) calc(var(--r, 0) * 110ms + 250ms); }
  .js-anim .vs-m .vs-m-rows span:first-child { translate: -26px 0; }
  .js-anim .vs-m .vs-m-rows span:last-child { translate: 26px 0; }
  .js-anim .vs-m.in .vs-m-rows span { opacity: 1; translate: none; }
  .js-anim .vs-m .vs-m-badge { scale: .2; opacity: 0; transition: scale .6s cubic-bezier(.34,1.56,.64,1) .3s, opacity .3s ease .3s; }
  .js-anim .vs-m.in .vs-m-badge { scale: 1; opacity: 1; animation: vs-pulse 2.8s ease-out 1.2s infinite; }

  /* Cards that slide sideways, with dots, the one in front full size */
  [data-carousel] { position: relative; display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 6px 16px 12px; scrollbar-width: none; }
  [data-carousel]::-webkit-scrollbar { display: none; }
  [data-carousel] > * { flex: 0 0 84%; scroll-snap-align: center; transform: scale(calc(1 - var(--k, 0) * .07)); }
  .js-anim [data-carousel] > [data-rv] { translate: none !important; }
  [data-carousel].nudge { animation: car-nudge 1.1s cubic-bezier(.3,.7,.3,1); }
  @keyframes car-nudge { 0%, 100% { transform: none; } 38% { transform: translateX(-44px); } }
  .car-dots { display: flex; justify-content: center; gap: 7px; margin: 10px 0 0; }
  .car-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: rgba(14,35,64,.2); cursor: pointer; transition: width .3s ease, background .3s ease; }
  .car-dots button.on { width: 22px; background: var(--navy); }
  .cats > .cat-card { padding: 22px 20px 20px; }
  .cat-note { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, #fff, #F2F6FC); }
  .cat-note .kicker { color: var(--navy); }
  .cats > .cat-note { padding: 20px 18px; }
  .cat-note p.d { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
  .read[data-carousel] > .panel { flex-basis: 88%; padding: 22px 18px 18px; }
  .panel > p { font-size: 13.5px; line-height: 1.55; }
  .panel .fine { display: none; }
  .panel h3 { font-size: 21px; }
  .levels, .calls { margin-top: 14px; }
  .calls li { padding: 12px 0; gap: 12px; }
  .calls li p { font-size: 13.5px; }

  /* The five levels take turns: one opens, says what it means, and hands on to the next */
  .levels li { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 11px 10px; margin: 0 -10px; border-radius: 14px; border-top-color: transparent; cursor: pointer; transition: background .3s ease; }
  .levels li + li { border-top: 1px solid var(--line); }
  .levels li p { display: none; grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
  .levels li.on { background: var(--ice); border-top-color: transparent; }
  .levels li.on + li { border-top-color: transparent; }
  .levels li.on p { display: block; animation: lvl-say .5s ease both; }
  @keyframes lvl-say { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: none; } }

  /* THE ROLODEX. Chips that jump to a group, and which strategy is in front. */
  .rolo-bar { display: block; margin: 0 0 12px; }
  .rolo-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 5px 16px 6px; }
  .rolo-chips::-webkit-scrollbar { display: none; }
  .rolo-chips button { --fill: color-mix(in srgb, var(--dot, var(--navy)) 86%, #0E2340); flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--fill); font: 700 12.5px var(--sans); color: #fff; cursor: pointer; opacity: .7; transition: opacity .25s ease, box-shadow .25s ease; }
  .rolo-chips button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fill); }
  .rolo-count { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
  .rolo-count b { color: var(--ink); }
  /* 2026-11-12, he: "Have them as cards that are scrolling from left to right now, so people can
     keep scrolling up and down." Then: "the cards need to be larger, like the section above it...
     the swiping movement is very rough and jagged. It needs to be ultra smooth." Then: "the 4
     categories section and how they swipe between each other's, that's smooth... make it the same
     every time, and make the transition smooth." So the strip moves exactly as the four categories
     row does: the phone's own sideways scrolling with scroll snap, one card per swipe, and each
     card's size following its distance from the middle. Up and down is always the page's. */
  .rolo-frame { position: relative; margin: 0 -6px; }
  .rolo-frame::before, .rolo-frame::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 3; width: 6px; pointer-events: none; }
  .rolo-frame::before { left: 0; border-radius: 26px 0 0 26px; background: linear-gradient(90deg, #E4ECF9 10%, rgba(228,236,249,0)); }
  .rolo-frame::after { right: 0; border-radius: 0 26px 26px 0; background: linear-gradient(270deg, #E4ECF9 10%, rgba(228,236,249,0)); }
  .lists { --card: min(calc(100vw - 76px), 330px); position: relative; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; touch-action: pan-x pan-y; overscroll-behavior-x: contain; padding: 22px calc(50% - var(--card) / 2 - 3px); border-radius: 26px; background: linear-gradient(90deg, #E4ECF9 0, #F5F8FD 50%, #E4ECF9 100%); scrollbar-width: none; }
  .lists::-webkit-scrollbar { display: none; }
  .lists .group { display: flex; flex: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .lists .group-h { display: none; }
  .lists .rows { display: flex; flex: none; }
  .lists .rows li { position: relative; display: flex; flex: none; width: calc(var(--card) + 6px); padding: 0 3px; scroll-snap-align: center; scroll-snap-stop: always; }
  .js-anim .lists .rows li { opacity: 1 !important; translate: none !important; }
  /* A card the size of the How to read cards, in its category's colour */
  .lists .rows li .row, .lists .rows li + li .row { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "nm nm" "kw kw" "what what" "kd kc" "meter call" "say say"; align-items: start; gap: 0; position: relative; height: 508px; padding: 18px 20px 20px; border-radius: 26px; background: linear-gradient(150deg, var(--dot), color-mix(in srgb, var(--dot) 58%, #0E2340)); color: #fff; box-shadow: 0 1px 2px rgba(14,35,64,.1), 0 18px 30px -18px rgba(14,35,64,.55); transform-origin: 50% 50%; }
  .lists .row .no { display: none; }
  .lists .row .nm { grid-area: nm; }
  .lists .row .nm .rc-cat { display: flex; align-items: center; min-height: 28px; margin: 0 0 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.85); }
  .lists .row .nm b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 22px; line-height: 1.17; letter-spacing: -0.025em; color: #fff; overflow: hidden; }
  .lists .row .nm > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin-top: 8px; font-size: 15px; line-height: 1.42; color: rgba(255,255,255,.88); overflow: hidden; }
  /* What it is, then the difficulty and Rena's call in words */
  .lists .row .rc-more { display: contents; }
  .lists .row .rc-k { font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.7); }
  .lists .row .rc-kw, .lists .row .rc-kd, .lists .row .rc-kc { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.24); }
  .lists .row .rc-kw { grid-area: kw; }
  .lists .row .rc-kd { grid-area: kd; }
  .lists .row .rc-kc { grid-area: kc; text-align: right; }
  /* What it is fills the room the card has and fades out, as Read more does everywhere else */
  .lists .row .rc-what { grid-area: what; align-self: stretch; display: block; margin-top: 7px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.92); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); }
  .lists .row .rc-say { grid-area: say; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; margin-top: 10px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.8); overflow: hidden; }
  .lists .row .meter { grid-area: meter; align-self: center; margin: 8px 0 0; }
  .lists .row .meter b { font-size: 14px; color: #fff; }
  .lists .row .dots i { width: 10px; height: 10px; background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.62) !important; }
  .lists .row .dots i.on { background: #fff !important; box-shadow: none !important; }
  /* The Rena prediction on a card: plain white words, the arrow beside them, moving the way it
     points (he, 2026-11-12: "normal lettering, white lettering with no background, and the arrow
     icon separate, and next to it as a moving icon") */
  .lists .row .call { grid-area: call; align-self: center; margin: 8px 0 0; justify-self: end; height: auto; padding: 0; gap: 7px; flex-direction: row-reverse; border-radius: 0; background: none !important; color: #fff !important; font-size: 14px; font-weight: 500; letter-spacing: 0; }
  .lists .row .call svg { width: 17px; height: 17px; }
  .lists .rows li.front .row .call svg { animation: lean 1.5s ease-in-out infinite; }
  /* Tap to read, on every card; on the one in front its arrow keeps pointing the way */
  .lists .row .rc-go { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 12px; border-radius: 999px; background: #fff; color: color-mix(in srgb, var(--dot) 62%, #0E2340); font-size: 12.5px; font-weight: 800; letter-spacing: -0.005em; box-shadow: 0 4px 10px -4px rgba(14,35,64,.45); }
  .lists .row .rc-go svg { width: 14px; height: 14px; }
  .lists .rows li.front .rc-go svg { animation: go-nudge 1.3s ease-in-out infinite; }
  @keyframes go-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } }
  /* The front card's white ring comes and goes with the card's distance from the middle */
  .lists .row::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(255,255,255,.75); opacity: calc(1 - var(--k, 1)); transition: opacity .2s ease; pointer-events: none; }
  .lists .row .rc-go { opacity: calc(1 - var(--k, 1) * .25); transition: opacity .2s ease; }
  .lists .row:active { filter: brightness(1.08); }
  /* Front and neighbours, as the four categories do it: --k is a card's distance from the middle
     (0 in front, 1 a card away), set by the script every frame while the row moves; a card a whole
     place away is 7% smaller, and a .2s ease smooths every change. Never a timer that starts when
     the front card changes: that turned the cards on its own clock, "too aggressive", and did
     nothing on a swipe that went back. */
  .lists .rows li .row { transform: scale(calc(1 - var(--k, 1) * .07)); transition: transform .2s ease; }
  /* The bump (he, 2026-11-12: "the card kind of bumps so people can see, hey, there's another one
     next to it. Make sure that animation happens every time"): each time the strip comes on
     screen the cards lean toward the next one and come back, the same nudge as the four categories.
     At the last card it leans back. */
  .lists.bump .group { animation: strip-bump 1.1s cubic-bezier(.3,.7,.3,1); }
  .lists.bump.back .group { animation-name: strip-bump-back; }
  @keyframes strip-bump { 0%, 100% { transform: none; } 38% { transform: translateX(-44px); } }
  @keyframes strip-bump-back { 0%, 100% { transform: none; } 38% { transform: translateX(44px); } }
  .rolo-hint { display: block; margin: 12px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
  .rolo-hint b { display: block; color: var(--ink); font-size: 14px; }
  .cat-lists { margin-top: 4px; }
  /* A short phone: fewer lines, so the whole card and its chips fit on the screen */
  @media (max-height: 700px) {
    .lists .rows li .row, .lists .rows li + li .row { height: 430px; }
    .lists .row .rc-say { -webkit-line-clamp: 2; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lists .rows li .row, .lists .row::after, .lists .row .rc-go { transition: none; }
  }
}

/* ===== THE FINGERPRINT PROMPT: src/components/mobile/app-invite.css, copied in at build time ===== */
/* THE FINGERPRINT INVITE. A card from the bottom on a phone, centred on a
   desktop.
   ═══════════════════════════════════════════════════════════════════════════
   It rises from the bottom edge rather than sitting in the middle of the
   screen, because it arrives while somebody is reading. A centred modal covers
   the thing they are looking at; a sheet from the floor sits under it, which is
   also where a phone's own share and action sheets come from, so the gesture is
   already familiar. On a wide screen there is no floor to rise from and no
   such gesture to echo, so it sits in the middle: .is-wide, set by the
   component from the same test that used to refuse to run at all.
   No em dashes or en dashes anywhere in this file, per the build spec. */

.rena-appinvite-back {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: rgba(12, 22, 38, 0.46);
  animation: rena-appinvite-fade 200ms ease forwards;
  /* Clear of the phone's home indicator, and of the forum's own floating dock,
     which sits at the bottom of every forum screen. */
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

/* Desktop puts the card in the middle instead. A sheet rising off the bottom
   edge is a phone gesture; performed on a 27 inch monitor it reads as a cookie
   banner. Same card, same contents, different anchor. */
.rena-appinvite-back.is-wide {
  align-items: center;
  padding: 24px;
}

.rena-appinvite {
  width: 100%;
  max-width: 420px;
  /* THE CARD IS WHITE. ALWAYS. NOT WHATEVER THE PAGE IS.
     ─────────────────────────────────────────────────────────────────────────
     Every colour on this card used to be a theme token, so on a dark page the
     card went dark navy and the quiz button, which is also navy, nearly
     disappeared into it. He: "the pop-ups. Must always be white. Background.
     With the take the free quiz button. In blue. I just saw it on the screen
     where it's reversed."

     So the whole card is pinned to the light values. It is a card that floats
     OVER the page rather than part of it, and a floating card that changes
     colour with the page behind it is the thing that made this read reversed.
     The dim backdrop still does the work of separating it from either theme. */
  background: #FFFFFF;
  border-radius: 24px;
  /* 22 at the foot rather than 18: the badges end the card now, and a row of
     outlined buttons sitting 18 off the edge read as clipped. */
  padding: 24px 22px 22px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(12, 22, 38, 0.34);
  animation: rena-appinvite-rise 280ms cubic-bezier(0.32, 0.72, 0.35, 1) forwards;
}

/* THE APP ICON, SHAPED LIKE AN APP ICON.
   It held a line drawing on a pale disc. It holds the real icon now, so the
   card shows the tile somebody is about to go and look for. The pale circular
   field is gone with it: the icon paints its own navy and carries its own
   rounded corners, and a disc behind a rounded square only ever showed as four
   grey slivers in the corners. The radius is iOS's own proportion so it reads
   as an app icon rather than a photograph. */
.rena-appinvite-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
}

.rena-appinvite-mark img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: block;
}

.rena-appinvite h2 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-weight: 700;
  /* 21px was set when the card held four words. This heading is seven, and on
     a 375px phone the card is 347 wide, not 420: at 21 the last word took a
     line of its own under a near empty one. */
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #0C1626;
}
/* The house display device: one gold italic word in a heading. It is the one
   place gold appears on this card, which is what the brand rule asks for. */
.rena-appinvite h2 em {
  font-style: italic;
  color: #8A681A;
}

.rena-appinvite p {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: #4A5567;
}

/* THE QUIZ BUTTON. The only filled control on the card, because the card has
   one thing it wants and this is it. */
.rena-appinvite-quiz {
  display: block;
  padding: 13px 18px;
  border-radius: 14px;
  /* Blue, and the same blue whatever the page is doing. */
  background: #0E2340;
  color: #FAFBFD;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  transition: transform 140ms ease, opacity 140ms ease;
}
.rena-appinvite-quiz:active {
  transform: scale(0.985);
  opacity: 0.9;
}

/* The app line, on a rule, so the two asks are visibly separate things rather
   than a stack of three equal buttons.
   TYPED SELECTOR, AND IT HAS TO BE. This is a <p>, so `.rena-appinvite p`
   above it is class plus element and beats a bare class: written as
   `.rena-appinvite-also` every rule here lost to the paragraph rule, the
   margin stayed 0 0 18px and the gap above this line measured zero. It looked
   like a spacing choice and it was a cascade collision. */
.rena-appinvite p.rena-appinvite-also {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 28 above, 12 below, deliberately unequal. This line separates the card's
     one real ask from the aside underneath it, so it sits well clear of the
     button above and close to the badges it introduces. Anything near even
     reads as a caption hanging off the quiz button. */
  margin: 28px 0 12px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11.5px;
  color: #5A6B85;
}
.rena-appinvite p.rena-appinvite-also::before,
.rena-appinvite p.rena-appinvite-also::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E1E7EF;
}

/* THE BADGES SIT SIDE BY SIDE NOW, and only because they gave up their second
   line. They used to stack: at 420px a row puts each near 190px, which was
   under what "Download on the / App Store" needs before it wraps. One line of
   type fits in that width with room to spare, so the pair costs one row
   instead of two and the quiz button keeps the card's only emphasis. */
.rena-appinvite-stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.rena-appinvite-stores a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid #C8D3E2;
  color: #0C1626;
  text-decoration: none;
  font-family: var(--sans);
  transition: transform 140ms ease, opacity 140ms ease;
}
.rena-appinvite-stores a:active {
  transform: scale(0.985);
  opacity: 0.9;
}
.rena-appinvite-stores span {
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* THERE IS NO DISMISS BUTTON. The whole screen is the way out: a tap anywhere
   that is not one of the three links closes the card. So the badges are the
   last thing in it and carry the bottom padding themselves. */

@keyframes rena-appinvite-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rena-appinvite-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rena-appinvite-back,
  .rena-appinvite { animation: none; }
  .rena-appinvite-stores a:active { transform: none; }
}