/* Landing page, "Khối màu" design — the 'new' arm of the landing experiment.
 *
 * Loaded INSTEAD of page-index.css / page-index-v2.css (see the
 * $pageCssOverride hook in includes/head.php), so none of the old landing rules
 * are present to fight these. The site's global chrome — main.css, header.css,
 * footer.css — still loads, which is why the header and footer keep their
 * current look: the chrome is a separate phase with its own experiment.
 *
 * House rules: radius 0, no box-shadow, no gradient, no translucency.
 * Everything is prefixed .lf- so nothing here can reach the header or footer.
 *
 * The prefix used to be .ln-, which collided with includes/learning-nudge-card.php
 * — that card ships its own inline <style> and is included outside the A/B branch,
 * so it renders on this page too. Both files defined .ln-head and .ln-cta at the
 * same specificity, and the card's block sits in <body>, after this stylesheet's
 * <link>, so the card won: the hero's button row became one full-width blue
 * rounded box. Equal specificity is decided by source order, and an inline block
 * always comes later than a linked file. Two namespaces, no shared tokens.
 */

@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bvp-400-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bvp-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/bvp-600-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/bvp-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/bvp-800-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/bvp-800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.index-main{
  --lf-ink:#0a0a0a; --lf-paper:#fff; --lf-dim:#6b7280; --lf-lab:#9aa1ab;
  --lf-blue:#1a3aff; --lf-orange:#e8501e; --lf-green:#0f7a4a;
  --lf-font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --lf-pad:clamp(20px,5vw,72px);
  font-family:var(--lf-font);
  color:var(--lf-ink);
  background:var(--lf-paper);
}
.index-main *{box-sizing:border-box}

.lf-in{max-width:1240px;margin:0 auto;padding-left:var(--lf-pad);padding-right:var(--lf-pad)}

.lf-kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.72)}
.lf-kick-blue{color:var(--lf-blue)}
.lf-kick-dim{color:rgba(255,255,255,.75)}

/* ── leading ──────────────────────────────────────────────────────────────
   Vietnamese display type cannot take Latin leading. Measured in this face at
   88px/800: a stacked tone mark (ề, ố) reaches 0.90em above the baseline where
   a plain capital reaches 0.78em, and an underdot (ạ, ệ) drops 0.25em below.
   So two lines only clear each other at line-height ≈ 1.16.

   The headline was set at .96 — a value that reads fine in English and here
   put the lines 6.7px INTO each other: the g of "tảng" crossed into "Product",
   and the underdot of "tại" sat on "Nam". These values are measured against the
   actual strings, not guessed; a headline whose second line carries stacked
   tones needs the larger one. */
.lf-h2{font-size:clamp(30px,4.6vw,54px);line-height:1.08;letter-spacing:-.042em;font-weight:800;
  margin:14px 0 0}
.lf-sub{font-size:clamp(14.5px,1.5vw,17px);line-height:1.5;color:var(--lf-dim);
  margin:14px 0 0;max-width:56ch}
.lf-dark .lf-sub{color:rgba(255,255,255,.7)}

.lf-sec{padding:clamp(52px,8vw,100px) 0}
.lf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(26px,4vw,46px)}
.lf-more{font-size:12.5px;font-weight:700;text-decoration:none;color:inherit;
  border-bottom:2px solid currentColor;white-space:nowrap;letter-spacing:-.01em}
.lf-more:hover{color:var(--lf-blue)}
.lf-dark .lf-more:hover{color:#fff;opacity:.75}

/* ── buttons ── */
.lf-btn{display:inline-block;padding:16px 30px;font-weight:800;font-size:15.5px;
  text-decoration:none;border:2px solid var(--lf-ink);background:var(--lf-ink);
  color:var(--lf-paper);border-radius:0;letter-spacing:-.01em;line-height:1.2}
.lf-btn:hover{background:#252525;border-color:#252525;color:#fff}
.lf-btn-ghost{background:transparent;color:var(--lf-ink)}
.lf-btn-ghost:hover{background:var(--lf-ink);color:#fff}
/* on a coloured field the solid button inverts to white */
.lf-hero .lf-btn-solid,.lf-shout .lf-btn-solid,.lf-strip .lf-btn-solid{
  background:#fff;color:var(--lf-ink);border-color:#fff}
.lf-hero .lf-btn-solid:hover,.lf-shout .lf-btn-solid:hover,.lf-strip .lf-btn-solid:hover{
  background:#f0f0f0;border-color:#f0f0f0}
.lf-hero .lf-btn-ghost,.lf-shout .lf-btn-ghost,.lf-strip .lf-btn-ghost{
  background:transparent;color:#fff;border-color:#fff}
.lf-hero .lf-btn-ghost:hover,.lf-shout .lf-btn-ghost:hover,.lf-strip .lf-btn-ghost:hover{
  background:#fff;color:var(--lf-ink)}
.lf-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ── hero ── */
.lf-hero{background:var(--lf-blue);color:#fff;padding:clamp(48px,8vw,96px) 0 0}
/* The stats row is the hero's last child and sits flush with its bottom edge, so
   the presence panel — anchored at top:100% + 14px — begins entirely OUTSIDE the
   hero. hero-nature.css gives every .nature-host `overflow:hidden` to contain its
   canvas, and once .lf-hero became a nature host that one declaration clipped the
   panel away completely: it still measured 340x265 and still answered to clicks,
   it just never painted a pixel. The canvas cannot spill on its own (it is
   position:absolute;inset:0, exactly the padding box), so this host does not need
   to clip. z-index keeps the panel over the section it now hangs across. */
.lf-hero.nature-host{overflow:visible}
.lf-hero{position:relative;z-index:3}
.lf-h1{font-size:clamp(36px,7vw,88px);line-height:1.08;letter-spacing:-.05em;font-weight:800;
  margin:20px 0 0;max-width:17ch;color:#fff}
/* 30px, not 22px: the underdot of "Việt" hangs 22px below the last baseline, so
   the old margin left ~4px of visible air under the headline, not 22. */
.lf-lead{font-size:clamp(15px,1.7vw,19px);line-height:1.45;margin:30px 0 0;max-width:46ch;
  color:rgba(255,255,255,.9)}
.lf-figs{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.3);
  margin-top:clamp(40px,6vw,74px)}
@media (min-width:700px){ .lf-figs{grid-template-columns:repeat(3,1fr)} }
.lf-fig{padding:24px 0 28px;border-bottom:1px solid rgba(255,255,255,.16)}
@media (min-width:700px){
  .lf-fig{border-bottom:0;border-left:1px solid rgba(255,255,255,.3);padding-left:26px}
  .lf-fig:first-child{border-left:0;padding-left:0}
}
/* Child combinators, not descendants. These were `.lf-fig b` / `.lf-fig span`,
   which at (0,1,1) outranked every .lf-pres- class (0,1,0) — so once the panel
   was nested inside the figure, every <span> in it became a 12px uppercase
   block: the "TUẦN SAU" tag stretched to full width and the live dot picked up
   a 12px top margin. A descendant selector claims things that do not exist yet. */
.lf-fig > b,.lf-fig-btn > b{display:block;font-size:clamp(40px,6.2vw,80px);line-height:.86;
  font-weight:800;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.lf-fig > span,.lf-fig-btn > span{display:block;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.78);margin-top:12px}

.lf-cta-note{font-size:13.5px;margin:16px 0 0;color:rgba(255,255,255,.75)}
.lf-cta-note a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* ── presence: the members figure opens a panel ──────────────────────────
   A count is a vanity number; the soonest meetup near you is a next step. */
.lf-fig-live{position:relative}
.lf-fig-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer}
.lf-fig-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.lf-pres-caret{font-size:9px;margin-left:8px;opacity:.65}
.lf-fig-btn[aria-expanded="true"] .lf-pres-caret{transform:rotate(180deg);display:inline-block}

/* White panel on the blue field: a surface, not a shadow. */
.lf-pres{position:absolute;left:0;top:calc(100% + 14px);z-index:20;width:340px;max-width:100%;
  background:#fff;border:2px solid var(--lf-ink);border-radius:0;padding:18px 18px 16px}
.lf-pres[hidden]{display:none}
.lf-pres-x{position:absolute;top:8px;right:8px;background:none;border:0;padding:6px;cursor:pointer;
  font-size:14px;line-height:1;color:var(--lf-lab)}
.lf-pres-x:hover{color:var(--lf-ink)}
.lf-pres-kick{display:flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:var(--lf-lab)}
.lf-pres-dot{width:7px;height:7px;background:var(--lf-green);flex:0 0 auto}
.lf-pres-when{font-size:26px;font-weight:800;letter-spacing:-.035em;margin-top:8px;line-height:1.1;
  font-variant-numeric:tabular-nums}
.lf-pres-rel{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:var(--lf-ink);color:#fff;padding:3px 8px;margin-left:9px;vertical-align:middle;
  display:inline-block;font-variant-numeric:normal}
.lf-pres-where{font-size:13.5px;font-weight:700;margin-top:9px;line-height:1.35}
.lf-pres-city{display:block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:var(--lf-lab);margin-top:3px}
.lf-pres-going{font-size:12.5px;font-weight:600;color:var(--lf-dim);margin-top:7px}
.lf-pres-facts{border-top:1px solid #e6e6e6;margin-top:14px;padding-top:12px;display:grid;gap:6px}
.lf-pres-fact{font-size:13px;line-height:1.4;color:var(--lf-dim)}
.lf-pres-fact b{font-weight:800;color:var(--lf-ink)}
.lf-pres-split{display:block;font-size:11.5px;color:var(--lf-lab);margin-top:2px}
.lf-pres-cta{display:block;margin-top:14px;padding:11px 14px;background:var(--lf-ink);color:#fff;
  text-decoration:none;font-weight:800;font-size:13.5px;text-align:center}
.lf-pres-cta:hover{background:#252525}

/* The teaser is the phone's version of the panel: one tappable line. */
.lf-pres-teaser{display:flex;align-items:center;gap:9px;width:100%;margin-top:18px;
  background:none;border:1px solid rgba(255,255,255,.4);border-radius:0;padding:12px 14px;
  font:inherit;font-size:13px;font-weight:700;color:#fff;text-align:left;cursor:pointer}
.lf-pres-teaser:hover{background:rgba(255,255,255,.1)}
@media (min-width:900px){ .lf-pres-teaser{display:none} }
/* Below 900px the panel is laid out inline instead of floating, so opening it
   pushes the page down rather than covering it. */
@media (max-width:899px){
  .lf-pres{position:static;width:auto;margin-top:16px}
  .lf-pres-x{display:none}
}

/* ── tools: shared borders, not cards ── */
.lf-grid{display:grid;grid-template-columns:1fr;border:2px solid var(--lf-ink)}
@media (min-width:640px){ .lf-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .lf-grid{grid-template-columns:repeat(3,1fr)} }
.lf-cell{padding:26px 24px 28px;border-bottom:2px solid var(--lf-ink);text-decoration:none;
  display:block;color:var(--lf-ink)}
.lf-cell:last-child{border-bottom:0}
@media (min-width:640px){
  .lf-cell{border-right:2px solid var(--lf-ink)}
  .lf-cell:nth-child(2n){border-right:0}
  .lf-cell:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:1040px){
  .lf-cell{border-right:2px solid var(--lf-ink)}
  .lf-cell:nth-child(2n){border-right:2px solid var(--lf-ink)}
  .lf-cell:nth-child(3n){border-right:0}
  .lf-cell:nth-last-child(-n+3){border-bottom:0}
}
.lf-cell:hover{background:var(--lf-ink);color:#fff}
.lf-num{font-size:11px;letter-spacing:.18em;font-weight:700;color:var(--lf-lab)}
.lf-cell:hover .lf-num{color:rgba(255,255,255,.6)}
.lf-cell h3{font-size:21px;font-weight:800;letter-spacing:-.03em;margin:13px 0 8px;
  line-height:1.1;color:inherit}
.lf-cell p{margin:0;font-size:14px;color:var(--lf-dim);line-height:1.5}
.lf-cell:hover p{color:rgba(255,255,255,.8)}

/* ── questions ── */
.lf-dark{background:var(--lf-ink);color:#fff}
.lf-dark .lf-h2{color:#fff}
.lf-qs{border-top:1px solid rgba(255,255,255,.28)}
.lf-q{display:grid;grid-template-columns:1fr;gap:10px;padding:24px 0;
  border-bottom:1px solid rgba(255,255,255,.16);text-decoration:none;color:#fff}
@media (min-width:860px){ .lf-q{grid-template-columns:220px 1fr;gap:32px;align-items:baseline} }
.lf-tags{display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start}
.lf-tag{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  border:1px solid rgba(255,255,255,.45);padding:4px 9px;white-space:nowrap}
.lf-tag-fill{background:#fff;color:var(--lf-ink);border-color:#fff}
.lf-qbody{display:block}
.lf-qtext{display:block;font-size:clamp(16.5px,1.9vw,22px);line-height:1.28;font-weight:600;
  letter-spacing:-.02em}
.lf-q:hover .lf-qtext{text-decoration:underline;text-underline-offset:5px}
.lf-ans{display:block;font-size:12px;color:rgba(255,255,255,.55);font-weight:700;
  letter-spacing:.06em;margin-top:9px}

/* ── courses ── */
.lf-courses{display:grid;grid-template-columns:1fr;border:2px solid var(--lf-ink)}
@media (min-width:760px){ .lf-courses{grid-template-columns:1fr 1fr} }
.lf-course{padding:28px 26px 30px;border-bottom:2px solid var(--lf-ink);text-decoration:none;
  display:block;color:var(--lf-ink)}
.lf-course:last-child{border-bottom:0}
@media (min-width:760px){
  .lf-course{border-right:2px solid var(--lf-ink)}
  .lf-course:nth-child(2n){border-right:0}
  .lf-course:nth-last-child(-n+2){border-bottom:0}
}
.lf-cat{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:var(--lf-ink);color:#fff;padding:4px 9px;display:inline-block}
.lf-course h3{font-size:clamp(19px,2.2vw,25px);font-weight:800;letter-spacing:-.032em;
  margin:15px 0 0;line-height:1.14;color:inherit}
.lf-course:hover h3{text-decoration:underline;text-underline-offset:5px}
.lf-cmeta{font-size:13px;color:var(--lf-dim);margin-top:11px;font-weight:600}

/* ── orange call-out ── */
.lf-shout{background:var(--lf-orange);color:#fff;padding:clamp(52px,8vw,100px) 0}
/* 1.2, not 1.08: both lines of this headline carry stacked tones ("học", "một",
   "sống"), so its ascent is 0.90em where the hero headline's is 0.78em. */
.lf-shout-h{font-size:clamp(30px,5.2vw,66px);line-height:1.2;letter-spacing:-.045em;
  font-weight:800;margin:16px 0 0;max-width:18ch;color:#fff}
.lf-shout-p{font-size:clamp(15px,1.6vw,18px);line-height:1.5;margin:20px 0 0;max-width:52ch;
  color:rgba(255,255,255,.9)}

/* ── community ── */
.lf-posts{border-top:2px solid var(--lf-ink)}
.lf-post{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;
  border-bottom:1px solid #e6e6e6;text-decoration:none;align-items:start;color:var(--lf-ink)}
.lf-ava{width:44px;height:44px;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;letter-spacing:-.02em;flex:0 0 auto}
.lf-pbody{display:block;min-width:0}
.lf-who{display:block;font-size:12px;color:var(--lf-dim);font-weight:600}
.lf-who b{color:var(--lf-ink);font-weight:800}
.lf-pcat{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--lf-ink);padding:2px 7px;margin-left:8px;white-space:nowrap;
  display:inline-block}
.lf-ptitle{display:block;font-size:clamp(16px,1.8vw,21px);font-weight:800;letter-spacing:-.025em;
  margin-top:7px;line-height:1.2}
.lf-post:hover .lf-ptitle{text-decoration:underline;text-underline-offset:5px}

/* ── green strip ── */
.lf-strip{background:var(--lf-green);color:#fff;padding:clamp(32px,4vw,52px) 0}
.lf-strip-in{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lf-strip-t{font-size:clamp(19px,2.6vw,32px);font-weight:800;letter-spacing:-.032em;
  line-height:1.12;max-width:30ch;margin:0}
.lf-strip-s{font-size:13.5px;color:rgba(255,255,255,.85);margin:8px 0 0;max-width:52ch}

/* ── defensive reset ──────────────────────────────────────────────────────
   design-system.css styles BARE ELEMENTS — a{color:var(--primary)},
   a:hover{...}, p{color:var(--gray-700)}, h1..h6{color:var(--black)}. Those
   beat inheritance, so anywhere this file relied on "the parent is white, the
   child will be too", the child came out blue or grey instead: the strip
   headline rendered grey on green, and a hovered question turned primary-blue.
   a:hover is (0,1,1) and beat .lf-q (0,1,0) outright.

   So: every element inside a coloured field states its own colour, and every
   container states its own background. Nothing here inherits anything that a
   global bare-element rule could claim first. */

.index-main .lf-hero,
.index-main .lf-hero *,
.index-main .lf-dark,
.index-main .lf-dark *,
.index-main .lf-shout,
.index-main .lf-shout *,
.index-main .lf-strip,
.index-main .lf-strip *{color:#fff}

/* the light sections state theirs too */
.index-main .lf-sec:not(.lf-dark) .lf-h2{color:var(--lf-ink)}
.index-main .lf-sec:not(.lf-dark) .lf-sub{color:var(--lf-dim)}

/* links never take the global blue, in any state */
.index-main a.lf-btn:link,.index-main a.lf-btn:visited,
.index-main a.lf-q:link,.index-main a.lf-q:visited,
.index-main a.lf-cell:link,.index-main a.lf-cell:visited,
.index-main a.lf-course:link,.index-main a.lf-course:visited,
.index-main a.lf-post:link,.index-main a.lf-post:visited,
.index-main a.lf-more:link,.index-main a.lf-more:visited{text-decoration:none}
.index-main a.lf-q:hover,.index-main a.lf-q:hover *,
.index-main a.lf-q:focus,.index-main a.lf-q:focus *{color:#fff}
/* ...except the filled tag, which is white-on-ink and would vanish. The blanket
   hover rule above is (0,3,1); this has to outrank it, not merely repeat. */
.index-main a.lf-q:hover .lf-tag-fill,
.index-main a.lf-q:focus .lf-tag-fill{color:var(--lf-ink);background:#fff}
.index-main a.lf-cell:hover,.index-main a.lf-cell:hover *{color:#fff}
.index-main a.lf-course:hover .lf-cat{color:#fff;background:var(--lf-ink)}
.index-main a.lf-post:hover .lf-pcat{color:var(--lf-ink);border-color:var(--lf-ink)}
.index-main a.lf-course:hover,.index-main a.lf-course:hover h3,
.index-main a.lf-post:hover,.index-main a.lf-post:hover .lf-ptitle{color:var(--lf-ink)}
.index-main a.lf-more:hover{color:inherit;opacity:.7}
.index-main .lf-cell:hover p,.index-main .lf-cell:hover .lf-num{color:rgba(255,255,255,.8)}

/* containers own their background: nothing may paint a panel behind them */
.index-main .lf-cta,
.index-main .lf-in,
.index-main .lf-head,
.index-main .lf-figs,
.index-main .lf-qs,
.index-main .lf-posts{background:transparent;border-radius:0;box-shadow:none}
.index-main .lf-cta{justify-content:flex-start;padding:0;text-align:left}

/* the two buttons that sit on a colour keep their own fills */
.index-main .lf-hero .lf-btn-solid,
.index-main .lf-shout .lf-btn-solid,
.index-main .lf-strip .lf-btn-solid{background:#fff;color:var(--lf-ink);border-color:#fff}
.index-main .lf-hero .lf-btn-ghost,
.index-main .lf-shout .lf-btn-ghost,
.index-main .lf-strip .lf-btn-ghost{background:transparent;color:#fff;border-color:#fff}
.index-main .lf-hero .lf-btn-ghost:hover,
.index-main .lf-shout .lf-btn-ghost:hover,
.index-main .lf-strip .lf-btn-ghost:hover{background:#fff;color:var(--lf-ink)}
.index-main .lf-sec:not(.lf-dark) .lf-btn-solid{background:var(--lf-ink);color:#fff;border-color:var(--lf-ink)}

/* tags and figures keep their own ink */
.index-main .lf-tag-fill{background:#fff;color:var(--lf-ink)}
.index-main .lf-cat{background:var(--lf-ink);color:#fff}
.index-main .lf-num{color:var(--lf-lab)}
.index-main .lf-cell h3{color:var(--lf-ink)}
.index-main .lf-cell p{color:var(--lf-dim)}
.index-main .lf-course h3{color:var(--lf-ink)}
.index-main .lf-cmeta{color:var(--lf-dim)}
.index-main .lf-who{color:var(--lf-dim)}
.index-main .lf-who b,.index-main .lf-ptitle{color:var(--lf-ink)}
.index-main .lf-pcat{color:var(--lf-ink);border-color:var(--lf-ink)}
.index-main .lf-ava{color:#fff}
.index-main .lf-kick-blue{color:var(--lf-blue)}
.index-main .lf-strip-s{color:rgba(255,255,255,.85)}
.index-main .lf-ans{color:rgba(255,255,255,.55)}
.index-main .lf-lead{color:rgba(255,255,255,.9)}
.index-main .lf-shout-p{color:rgba(255,255,255,.9)}
.index-main .lf-fig > span,.index-main .lf-fig-btn > span{color:rgba(255,255,255,.78)}
.index-main .lf-kick-dim{color:rgba(255,255,255,.75)}

/* The presence panel is a WHITE surface sitting inside .lf-hero, so the blanket
   `.lf-hero *{color:#fff}` above claims it and renders white on white — the same
   trap the courses search dropdown fell into. That rule is (0,2,0); every rule
   here is (0,3,0) or more, so it wins by specificity rather than by source order,
   which survives someone reordering the file. */
.index-main .lf-hero .lf-pres,
.index-main .lf-hero .lf-pres *{color:var(--lf-ink)}
.index-main .lf-hero .lf-pres-kick,
.index-main .lf-hero .lf-pres-city,
.index-main .lf-hero .lf-pres-split,
.index-main .lf-hero .lf-pres-x{color:var(--lf-lab)}
.index-main .lf-hero .lf-pres-fact,
.index-main .lf-hero .lf-pres-going{color:var(--lf-dim)}
.index-main .lf-hero .lf-pres-fact b,
.index-main .lf-hero .lf-pres-when,
.index-main .lf-hero .lf-pres-where{color:var(--lf-ink)}
/* ...except the two elements inside the panel that are themselves ink-filled */
.index-main .lf-hero .lf-pres-rel{color:#fff;background:var(--lf-ink)}
.index-main .lf-hero a.lf-pres-cta,
.index-main .lf-hero a.lf-pres-cta:hover,
.index-main .lf-hero a.lf-pres-cta:visited{color:#fff;text-decoration:none}
.index-main .lf-hero .lf-pres-x:hover{color:var(--lf-ink)}
.index-main .lf-hero .lf-pres-dot{background:var(--lf-green)}
.index-main .lf-hero .lf-cta-note{color:rgba(255,255,255,.75)}
.index-main .lf-hero .lf-cta-note a{color:#fff}
.index-main .lf-hero .lf-pres,
.index-main .lf-hero .lf-pres-teaser{background:#fff;border-radius:0;box-shadow:none}
.index-main .lf-hero .lf-pres-teaser{background:transparent;color:#fff}
