/* ==========================================================================
   Lover & a Fighter — standalone static build
   Faithful port of the approved .lf-* design (warm paper, bold condensed
   sans, Marine-orange ember accent, black-and-white photography).
   Single committed light look so the embedded testimonial screenshots
   (white cards) and the page chrome stay consistent.
   ========================================================================== */

:root {
  --paper:      #FBFAF7;
  --ink:        #1A1512;
  --ink-soft:   #4A423C;
  --ember:      #E4551F;
  --ember-deep: #C24417;
  --rose:       #B44B62;
  --steel:      #5C6670;
  --card:       #FFFFFF;
  --line:       #E5DFD6;
  --dark-panel: #201A15;
  --dark-panel-text: #F4EEE6;
  /* Reserved EXCLUSIVELY for the privacy guarantee. Two greens because the
     mark appears on two backgrounds: --verify on the dark footer (#17120F),
     where #2E7D4F would only reach 3.7:1 and this reaches 6.9:1, and
     --verify-deep on the light feature card, where it hits 4.6:1 on the wash
     and matches bennylichtenwalnerreviews.com's token exactly. */
  --verify: #4CAF7D;
  --verify-deep: #2E7D4F;
  --verify-soft: #EFF7F2;
  --verify-line: #CBE4D6;
  /* Band background for the guarantee feature. Deeper than --verify-deep on
     purpose: at #2E7D4F the soft-green eyebrow and lede measured 3.71 and 4.21
     against it, both under AA. At #256341 they clear 5.26 and 5.98 and the
     tonal hierarchy survives, which it wouldn't if we just made everything
     white. The site publicly claims AA — keep these above 4.5. */
  --verify-band: #256341;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
  font-size: 16px;
  overflow-x: hidden;              /* belt-and-suspenders: no horizontal body scroll */
}

img { max-width: 100%; }

a { color: var(--ember-deep); }

.display {
  font-family: "Avenir Next Condensed", "Arial Narrow", "Avenir Next", -apple-system, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-wrap: balance;
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0 0 14px;
}

section { padding: 72px 24px; }
.wrap { max-width: 1060px; margin: 0 auto; }

/* Visible focus for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---- nav ---------------------------------------------------------------- */
nav.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 24px; gap: 16px;
}
.wordmark {
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-weight: 800; text-transform: uppercase; font-size: 18px;
  letter-spacing: 0.04em; text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.wordmark .f { color: var(--ember); }
.nav-links { display: flex; gap: 22px; align-items: center; font-size: 14px; font-weight: 600; }
.nav-links a { color: var(--ink-soft); text-decoration: none; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ember); }
.nav-cta { background: var(--ember); color: #fff !important; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.nav-cta:hover { background: var(--ember-deep); }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px;
  padding: 15px 26px; border-radius: 999px;
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:active { transform: scale(.98); }
.btn-solid { background: var(--ember); color: #fff; }
.btn-solid:hover { background: var(--ember-deep); color: #fff; }

/* Rotating ember glow on the primary CTA. The mechanics come from the managed
   house-ui block at the bottom of this file (~/scripts/ui-kit), aliased onto
   .btn-solid so the guide pages keep it when the weekly pipeline regenerates
   them — the class never has to appear in markup.

   Ember only, no second hue: the page is warm paper, black-and-white photos and
   one accent, and a colour wheel would read as a different site. Two classes so
   this beats the managed block's paused default, which is a later rule at equal
   specificity. */
.btn.btn-solid {
  /* White through pale ember into the deep ember, NOT ember-on-ember: the
     button is painted --ember, so an ember ring is the same colour as the
     thing it is meant to outline and disappears completely. The brand colour
     does its work in the halo instead. */
  --glow-c1: #FFFFFF;
  --glow-c2: #FFC79E;
  --glow-c3: var(--ember-deep);
  --glow-width: 2px;
  --glow-band: 5px;
  --glow-blur: 16px;
  --glow-edge: 1;
  --glow-halo: 0.72;
  --glow-speed: 7s;
}
.btn.btn-solid::before,
.btn.btn-solid::after { animation-play-state: running; }
.btn-ghost { border: 2px solid var(--ink); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ember); color: var(--ember); }

/* ---- hero --------------------------------------------------------------- */
.hero { padding: 40px 24px 60px; }
.hero .wrap { max-width: 1000px; }
.hero-media { margin: 0 0 34px; }
.hero h1 { font-size: clamp(46px, 8vw, 84px); margin: 0 0 20px; }
.hero h1 .accent { color: var(--ember); }
.hero p.lede { font-size: 19px; color: var(--ink-soft); max-width: 34em; margin: 0 0 30px; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-row .btn { text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- stats -------------------------------------------------------------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 26px 24px; }
.stats .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.stat { text-align: center; flex: 1 1 140px; }
.stat b {
  display: block;
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-size: 32px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat span { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); font-weight: 600; }

/* ---- section headings --------------------------------------------------- */
h2 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 12px; }
.section-intro { color: var(--ink-soft); max-width: 40em; margin: 0 0 30px; font-size: 17px; }

/* ---- booking ------------------------------------------------------------ */
.book { background: var(--dark-panel); color: var(--dark-panel-text); }
.book .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.book h2 { color: var(--dark-panel-text); }
.book .eyebrow { color: var(--ember); }
.book ul { list-style: none; padding: 0; margin: 0 0 24px; }
.book li { padding: 10px 0 10px 30px; position: relative; font-size: 17px; }
.book li::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ember);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 8.5l4 4L14 4" fill="none" stroke="black" stroke-width="2.6"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 8.5l4 4L14 4" fill="none" stroke="black" stroke-width="2.6"/></svg>') center/contain no-repeat;
}
.price-line { font-size: 15px; color: #C6B9AB; margin: 14px 0 0; }
.stan-card { background: #fff; color: #1A1512; border-radius: 20px; padding: 26px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.stan-card .sc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.sc-avatar { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(150deg, var(--ember), var(--rose)); flex: none; }
.sc-title { font-weight: 700; font-size: 16.5px; line-height: 1.25; }
.sc-price { color: var(--ember-deep); font-weight: 800; font-size: 15px; }
.cal { border: 1px solid #EAE4DB; border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.cal-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 13.5px; margin-bottom: 10px; color: #1A1512; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12px; text-align: center; color: #4A423C; }
.cal-grid .dow { font-weight: 700; color: #9A9084; font-size: 10px; }
.cal-grid .d { padding: 5px 0; border-radius: 8px; }
.cal-grid .open { border: 1.5px solid var(--ember); color: var(--ember-deep); font-weight: 700; }
.stan-card .btn { display: block; text-align: center; }
.sc-note { font-size: 12px; color: #8A8177; text-align: center; margin: 10px 0 0; }

/* ---- training ----------------------------------------------------------- */
.training .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  border: 2px solid var(--ember); border-radius: 20px; padding: 40px;
}
.training h2 { font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 8px; }
.training p { margin: 0; color: var(--ink-soft); max-width: 34em; }

/* ---- about -------------------------------------------------------------- */
.about .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: center; }
.about p { color: var(--ink-soft); font-size: 17px; }

/* ---- brand footer ------------------------------------------------------- */
footer.brand { background: var(--dark-panel); color: var(--dark-panel-text); padding: 56px 24px 30px; }
.foot-inner { max-width: 1060px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.foot-inner .wordmark { color: var(--dark-panel-text); }
.socials { display: flex; gap: 12px; flex-wrap: wrap; }
.socials a {
  display: inline-flex; align-items: center; gap: 8px; color: var(--dark-panel-text);
  text-decoration: none; border: 1px solid #3A322B; padding: 10px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
}
.socials a:hover, .socials a:focus-visible { border-color: var(--ember); color: var(--ember); }
.foot-meta {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: #A99B8D; border-top: 1px solid #2C2620; padding-top: 22px;
}
.foot-meta a { color: #C6B9AB; text-decoration: none; }
.foot-meta a:hover { color: var(--ember); }

/* ---- Veteran Owned Business badge (homepage footer only) ---------------- */
/* Deliberately quiet. It rides the copyright line instead of the socials row,
   so it reads as provenance beside "© 2026" rather than competing with the
   booking CTA. The mark is navy on a transparent ground, so it sits straight on
   --dark-panel with no plate behind it. Held at 82% opacity because the badge's
   red ribbon is close enough to --ember to fight it at full strength, and
   --ember is the only accent this site spends.
   `title` on the anchor carries the explanation: house-ui.js loads only on the
   tools pages, so the marketing pages use native titles for tooltips. Same call
   as .nav-ps above. */
.foot-copy { display: inline-flex; align-items: center; gap: 13px; }
.vob-link { display: inline-flex; flex: 0 0 auto; border-radius: 4px; }
.vob-badge { display: block; width: 52px; height: auto; opacity: 0.82; transition: opacity 140ms ease; }
.vob-link:hover .vob-badge, .vob-link:focus-visible .vob-badge { opacity: 1; }

/* ---- site-wide legal footer -------------------------------------------- */
.legal-footer {
  background: #17120F; color: #A99B8D; padding: 26px 24px 40px;
  font-size: 13px; line-height: 1.55;
}
.legal-footer .lf-inner { max-width: 1060px; margin: 0 auto; }
.legal-footer p { margin: 0 0 10px; }
.legal-footer a { color: #C6B9AB; text-decoration: underline; text-underline-offset: 2px; }
.legal-footer a:hover, .legal-footer a:focus-visible { color: var(--ember); }
.legal-footer strong { color: #E7DCCF; }

/* ---- Google preferred-source button (nav, every page) ------------------- */
/* Outlined so it reads as secondary to the solid ember "Book a Call" pill it
   sits beside — the booking CTA stays the loudest thing in the nav. Plain link,
   no JS; `title` carries the explanation because house-ui.js is only loaded on
   the tools pages. */
/* Scoped as `.nav-links a.nav-ps`, not bare `.nav-ps`: the neighbouring
   `.nav-links a` rules are (0,1,1) and were repainting the label --ink-soft,
   and `.nav-links a:hover` was repainting it --ember ON the --ember fill,
   which is invisible. Losing a specificity race to a sibling nav rule is easy
   to miss because the border still looks right. */
.nav-links a.nav-ps {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border: 2px solid var(--ember); border-radius: 999px;
  color: var(--ember-deep); font-weight: 700; font-size: 14px;
  text-decoration: none; white-space: nowrap;
}
.nav-links a.nav-ps:hover, .nav-links a.nav-ps:focus-visible {
  background: var(--ember); color: #fff;
}
.nav-links a.nav-ps svg { flex: 0 0 auto; }

/* ---- Google preferred-source ask (footer, every page) ------------------- */
/* Sits above the privacy guarantee and shares its divider treatment, so the
   footer reads as two asks rather than a pile of small print. Copy lives in
   legal_footer.html, so it lands on every assembled page. The link points at
   bennylichtenwalner.com, not this domain — see assemble.py's preferred-source
   block for why. */
.legal-footer .prefsrc {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid #2C2620;
}
.legal-footer .prefsrc svg { flex: 0 0 auto; margin-top: 3px; color: var(--ember); }
.legal-footer .prefsrc p { margin: 0; max-width: 74ch; }
.legal-footer a.prefsrc-a { color: #E7DCCF; font-weight: 600; }
.legal-footer a.prefsrc-a:hover, .legal-footer a.prefsrc-a:focus-visible { color: var(--ember); }

/* ---- Google preferred-source page --------------------------------------- */
.prefsrc-cta { margin: 26px 0 32px; }
/* NOT inline-flex. .btn.btn-solid carries the house rotating glow through its
   ::before/::after, and a flex container turns those pseudo-elements into flex
   ITEMS — they get laid out in the row and paint over the label. Inline-block
   plus a vertically nudged icon gives the same look and leaves the glow alone. */
.prefsrc-btn svg { vertical-align: -3px; margin-right: 9px; }
.prefsrc-note { display: block; margin-top: 10px; color: var(--steel); font-size: 14.5px; }

/* ---- privacy guarantee: homepage FEATURE section ------------------------ */
/* Deliberately not the dark-panel treatment: .book sits immediately below and
   two adjacent dark slabs read as one. A green wash on the warm paper is the
   only place this colour appears on the site, so the section reads as its own
   thing at a glance. */
.guarantee { padding: 24px 24px 10px; }
.g-card {
  background: var(--verify-soft);
  border: 1px solid var(--verify-line);
  border-radius: 26px;
  overflow: hidden;                /* clips the head band to the radius */
  box-shadow: 0 22px 60px rgba(46, 125, 79, .16);
  text-align: center;
}
/* Deep-green band. The only saturated non-orange block on the site, which is
   the point: Benny wants the guarantee read as a feature, not fine print.
   Measured on this background: white heading 7.16, eyebrow 5.26, lede 5.98. */
.g-head {
  background: var(--verify-band);
  color: #fff;
  padding: 46px clamp(22px, 4vw, 56px) 42px;
}
.g-shield { display: block; margin: 0 auto 16px; }
.g-eyebrow { color: #BFE6CF; margin-bottom: 10px; }
.g-card h2 { font-size: clamp(34px, 5.4vw, 56px); margin: 0 0 14px; color: #fff; }
.g-lede {
  color: #DDEFE4; font-size: 18px;
  max-width: 40em; margin: 0 auto;
}
.g-grid {
  list-style: none; margin: 0;
  padding: 30px clamp(18px, 3vw, 30px) 4px;
  display: grid; gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}
.g-grid li {
  background: #fff;
  border: 1px solid var(--verify-line);
  border-radius: 16px;
  padding: 22px 20px 20px;
}
.g-grid svg {
  width: 24px; height: 24px; display: block; margin-bottom: 12px;
  fill: none; stroke: var(--verify-deep); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.g-grid b {
  display: block; font-size: 16.5px; color: var(--ink);
  margin-bottom: 6px; line-height: 1.25;
}
.g-grid span { display: block; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.g-more { margin: 0; padding: 18px 24px 26px; }
.g-more a {
  color: var(--verify-deep); font-weight: 700; font-size: 15px;
  text-underline-offset: 3px;
}
@media (max-width: 900px) { .g-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .g-grid { grid-template-columns: 1fr; }
  .g-head { padding: 36px 20px 32px; }
  .g-card { border-radius: 20px; }
}

/* ---- privacy guarantee: footer line (every page) ------------------------ */
/* The shield silhouette is the same path used on bennylichtenwalnerreviews.com
   and in the classroom, so the three properties read as one promise. The inner
   glyph differs because the promise differs: that site randomises names on
   public reviews, the classroom keeps a private room private, and this site's
   guarantee is consent and control over your own information. Hence a check.

   Every claim in the copy is one legal_privacy.html already makes, in the same
   order as its "short version". Don't put a claim on this badge that isn't in
   that policy — and if the policy changes, change the badge in the same commit.
   Copy lives in legal_footer.html, so it lands on all 12 assembled pages. */
.legal-footer .pguarantee {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid #2C2620;
}
.legal-footer .pguarantee svg { flex: 0 0 auto; margin-top: 1px; }
.legal-footer .pguarantee p { margin: 0; max-width: 74ch; }

/* ---- legal page body ---------------------------------------------------- */
.legal-page { padding: 56px 24px 72px; }
.legal-body { max-width: 760px; margin: 0 auto; }
.legal-body h1 { font-size: clamp(34px, 6vw, 52px); margin: 0 0 8px; line-height: 1.05; }
.legal-body h2 { font-size: clamp(21px, 3vw, 27px); margin: 34px 0 10px; line-height: 1.15; }
.legal-body p, .legal-body li { color: var(--ink-soft); font-size: 16.5px; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin: 6px 0; }
.legal-body a { color: var(--ember-deep); }
/* Buttons are anchors, so `.legal-body a` (0,1,1) out-specifies `.btn-solid`
   (0,1,0) and repaints the primary CTA label --ember-deep on an --ember fill:
   about 1.35:1, effectively invisible. Every "Book a 1:1 Call" inside a guide
   or tool page was rendering that way. Restore the button's own colours.
   Found 2026-08-22; the homepage was never affected because its buttons sit
   outside .legal-body. */
.legal-body a.btn-solid { color: #fff; }
.legal-body a.btn-solid:hover { color: #fff; }
.legal-body a.btn-ghost { color: var(--ink); }
.legal-body a.btn-ghost:hover { color: var(--ember); }
.legal-back { max-width: 760px; margin: 0 auto 24px; }
.legal-back a { color: var(--ember-deep); font-weight: 700; text-decoration: none; font-size: 14px; }
.legal-back a:hover { text-decoration: underline; }

/* ---- cookie consent banner --------------------------------------------- */
#lf-cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 300;
  max-width: 780px; margin: 0 auto;
  background: var(--dark-panel); color: var(--dark-panel-text);
  border: 1px solid #3A322B; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.4);
  padding: 18px 20px;
  display: none;
}
#lf-cookie.show { display: block; }
#lf-cookie p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: #E7DCCF; }
#lf-cookie a { color: var(--ember); }
.lf-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lf-cookie-actions button {
  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
}
.ck-accept { background: var(--ember); color: #fff; }
.ck-accept:hover { background: var(--ember-deep); }
.ck-decline, .ck-manage { background: transparent; color: var(--dark-panel-text); border-color: #4A403A; }
.ck-decline:hover, .ck-manage:hover { border-color: var(--ember); color: var(--ember); }
.lf-cookie-manage { display: none; margin-top: 16px; border-top: 1px solid #3A322B; padding-top: 14px; }
.lf-cookie-manage.show { display: block; }
.lf-cookie-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font-size: 13.5px; color: #E7DCCF; }
.lf-cookie-row input { margin-top: 3px; }
.lf-cookie-row label b { display: block; color: var(--dark-panel-text); }
.lf-cookie-manage .ck-save { background: var(--ember); color: #fff; }
.lf-cookie-manage .ck-save:hover { background: var(--ember-deep); }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .book .wrap, .about .wrap { grid-template-columns: 1fr; }
  .about-media { max-width: 460px; }
}
@media (max-width: 700px) {
  section { padding: 56px 20px; }
  .nav-inner { padding: 12px 18px; }
  /* The text links collapse on phones, but the preferred-source button stays:
     it is meant to be one of the most visible things on the page, and mobile is
     where most readers arrive. It shrinks to the star plus "Google" so both it
     and the booking CTA fit one row. */
  .nav-links a:not(.nav-cta):not(.nav-ps) { display: none; }
  .nav-links { gap: 10px; }
  /* Icon only on phones: the wordmark and the booking CTA already fill the
     row, and a labelled pill pushes "Book a Call" off screen. aria-label and
     title carry the meaning. */
  .nav-links a.nav-ps { padding: 7px 9px; border-width: 1.5px; }
  .nav-links a.nav-ps .ps-label { display: none; }
  .nav-links a.nav-ps svg { width: 15px; height: 15px; }
  .wordmark { font-size: 15px; letter-spacing: 0.02em; }
  .nav-cta { padding: 8px 14px; font-size: 13px; }
  /* The copyright wraps to two lines beside the badge on a phone, so shrink the
     badge rather than let it set the row height. */
  .vob-badge { width: 44px; }
  .foot-copy { gap: 11px; }
}
@media (max-width: 380px) {
  .wordmark { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .vob-badge { transition: none; }
  * { scroll-behavior: auto; }
}

/* ---- guides ------------------------------------------------------------- */
.guide-meta { color: var(--ink-soft); font-size: 14px; margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.legal-body h3 { font-size: 18px; margin: 24px 0 8px; line-height: 1.25; }
.legal-body ol { padding-left: 22px; }
.legal-body blockquote { border-left: 3px solid var(--ember); margin: 18px 0; padding: 4px 0 4px 16px; color: var(--ink-soft); font-style: italic; }
.lf-guide-cta { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--ember); border-radius: 10px; padding: 22px 22px 24px; margin: 30px 0; }
.lf-guide-cta p { margin-top: 0; }
.lf-guide-cta .btn { margin: 6px 10px 0 0; }
.lf-guide-author { background: var(--dark-panel); border-radius: 10px; padding: 20px 22px; margin: 34px 0 6px; font-size: 15px; }
.lf-guide-author p { color: var(--dark-panel-text); margin: 0 0 6px; }
.lf-guide-author p:last-child { margin-bottom: 0; }
.lf-guide-author a { color: var(--ember); }
.guide-list { display: grid; gap: 16px; margin-top: 28px; }
.guide-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.guide-card:hover { border-color: var(--ember); transform: translateY(-1px); }
.guide-card h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.2; color: var(--ink); }
.guide-card p { margin: 0 0 10px; color: var(--ink-soft); font-size: 15.5px; }
.guide-card .gc-more { color: var(--ember-deep); font-weight: 700; font-size: 14px; }
.guide-card.gc-pillar { border-left: 4px solid var(--ember); }
@media (prefers-reduced-motion: reduce) { .guide-card { transition: none; } }

/* >>> house-ui glow (managed by ~/scripts/ui-kit/install-glow.sh) >>> */
/* ══════════════════════════════════════════════════════════════════════════
   House UI — rotating gradient glow.

   A conic gradient whose start angle is animated, so a band of colour sweeps
   around an element's edge. The angle has to be registered with @property or
   it is just an unparsed token and won't interpolate — that registration is
   the whole trick.

   Two entry points, identical look:

     .glow-ring        on a child <span> — for anything whose own ::before /
                       ::after are already spoken for (.glass uses both: the
                       hairline border and the cursor spotlight).
     .glow-ring-self   on the element itself — buttons, pills, tiles.

   The host must be position:relative (add .glow-host if it isn't) and must
   NOT be overflow:hidden, which clips the halo back to a hard edge.

   .glow-host is only about position — hover and focus wake the ring from
   whatever its parent happens to be, so a card that is already relative
   doesn't need the class.

   Tokens (set inline or on a wrapper):
     --glow-c1/2/3   the three sweep colours
     --glow-speed    one rotation            default 6s
     --glow-width    crisp edge thickness    default 1px
     --glow-band     halo band thickness     default 3px
     --glow-blur     halo softness           default 15px
     --glow-edge     crisp edge opacity      default .9
     --glow-halo     halo opacity            default .6

   Or reach for .glow-soft / .glow-strong instead of remembering three of
   those. Past roughly halo .85 the blur stops reading as a glow and starts
   reading as a brass picture frame, because on a translucent card the halo is
   trapped inside the card's stacking context and half the blur bleeds inward.
   The presets stay on the right side of that line.

   Spin cost: a paused animation doesn't tick, so a resting ring is free and
   only what's hovered or genuinely live re-blurs per frame. Keep .glow-live
   to a handful per page — it's an attention signal, and a page where six
   things demand attention communicates nothing.
   ══════════════════════════════════════════════════════════════════════════ */

@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --glow-c1: #38bdf8;
  --glow-c2: #a78bfa;
  --glow-c3: #e9c178;
}

.glow-host { position: relative; }

/* The layer element. Inherits the host's corner radius, so it tracks a
   card, a pill and a circle without being told which it is. */
.glow-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.glow-ring::before,
.glow-ring::after,
.glow-ring-self::before,
.btn-solid::before,
.btn-solid::after,
.glow-ring-self::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* The unregistered fallback is deliberate: where @property is missing the
     var() resolves to 135deg and the ring renders static instead of dropping
     the whole background declaration and vanishing. Registered browsers
     never see it — a registered property always has a value. */
  background: conic-gradient(
    from var(--glow-angle, 135deg),
    var(--glow-c1),
    var(--glow-c2) 25%,
    var(--glow-c3) 50%,
    var(--glow-c2) 75%,
    var(--glow-c1)
  );

  /* Punch out the middle along the inherited radius, leaving a band. Doing it
     with a mask rather than a real border is what lets a translucent glass
     card keep its translucency instead of being flooded with the gradient. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;

  animation: glow-ring-spin var(--glow-speed, 6s) linear infinite;
  animation-play-state: paused;
}

/* crisp edge */
.glow-ring::before,
.btn-solid::before,
.glow-ring-self::before {
  padding: var(--glow-width, 1px);
  opacity: var(--glow-edge, 0.9);
}

/* soft halo, sitting behind the host's own background where the host doesn't
   trap it in a stacking context, and reading as an inner edge-glow where it
   does (backdrop-filter on .glass traps it). Both are fine — the middle is
   masked out either way, so it never washes over the card. */
.glow-ring::after,
.btn-solid::after,
.glow-ring-self::after {
  padding: var(--glow-band, 3px);
  filter: blur(var(--glow-blur, 15px));
  opacity: var(--glow-halo, 0.6);
  z-index: -1;
}

@keyframes glow-ring-spin {
  to { --glow-angle: 360deg; }
}

/* ── when it spins ─────────────────────────────────────────────────────────
   Resting by default; the host waking it means a grid of cards costs nothing
   until one is pointed at. */
:hover > .glow-ring::before,
:hover > .glow-ring::after,
:focus-visible > .glow-ring::before,
:focus-visible > .glow-ring::after,
:focus-within > .glow-ring::before,
:focus-within > .glow-ring::after,
.glow-ring-self:hover::before,
.btn-solid:hover::before,
.glow-ring-self:hover::after,
.btn-solid:hover::after,
.glow-ring-self:focus-visible::before,
.btn-solid:focus-visible::before,
.glow-ring-self:focus-visible::after,
.btn-solid:focus-visible::after,
.glow-ring-self:focus-within::before,
.btn-solid:focus-within::before,
.btn-solid:focus-within::after,
.glow-ring-self:focus-within::after {
  animation-play-state: running;
}

/* always on — for something actually live or actually asking for you */
.glow-live.glow-ring::before,
.glow-live.glow-ring::after,
.glow-live.glow-ring-self::before,
.glow-live.glow-ring-self::after {
  animation-play-state: running;
}

/* invisible until pointed at — for dense grids where a permanent ring on
   every tile would be noise */
.glow-quiet.glow-ring,
.glow-quiet.glow-ring-self::before,
.glow-quiet.glow-ring-self::after {
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
:hover > .glow-quiet.glow-ring,
:focus-within > .glow-quiet.glow-ring,
.glow-quiet.glow-ring-self:hover::before,
.glow-quiet.glow-ring-self:hover::after,
.glow-quiet.glow-ring-self:focus-within::before,
.glow-quiet.glow-ring-self:focus-within::after {
  opacity: 1;
}

/* one bright arc sweeping a dark ring, instead of a full colour wheel —
   quieter, and the better choice on a single primary button */
.glow-comet.glow-ring::before,
.glow-comet.glow-ring::after,
.glow-comet.glow-ring-self::before,
.glow-comet.glow-ring-self::after {
  background: conic-gradient(
    from var(--glow-angle, 135deg),
    transparent 0turn,
    var(--glow-c1) 0.08turn,
    var(--glow-c2) 0.17turn,
    var(--glow-c3) 0.24turn,
    transparent 0.4turn,
    transparent 1turn
  );
}

/* ── filled surfaces ───────────────────────────────────────────────────────
   On a solid button the ring inherits the same accent the button is painted
   in, so it vanishes — tinting "on brand" is exactly what makes it invisible.
   Sweep a pale specular arc instead and let the brand colour live in the halo,
   which is what reads as lit. Geometry only; the page still picks the colours:

     .btn { --glow-c1: #fff; --glow-c2: <pale accent>; --glow-c3: <deep accent>; }

   Shipped an ember ring on an ember button on 2026-08-19 and could not see it
   on the live site. Check a filled control against its own background, not
   against the card you prototyped on. */
.glow-on-fill {
  --glow-width: 2px;
  --glow-band: 5px;
  --glow-blur: 16px;
  --glow-edge: 1;
  --glow-halo: 0.7;
}

/* ── weight ────────────────────────────────────────────────────────────────
   Softer on anything already busy; stronger on an opaque surface or a single
   button, where there's no translucency for the halo to muddy. */
.glow-soft   { --glow-halo: 0.35; --glow-blur: 10px; --glow-band: 2px; }
.glow-strong { --glow-halo: 0.75; --glow-blur: 19px; --glow-band: 4px; }

/* ── tints ─────────────────────────────────────────────────────────────────
   Named presets for the house palettes. Anything else: set --glow-c1/2/3
   inline from whatever accent the row already carries. */
.glow-cyan    { --glow-c1: #38bdf8; --glow-c2: #818cf8; --glow-c3: #a78bfa; }
.glow-violet  { --glow-c1: #a78bfa; --glow-c2: #c084fc; --glow-c3: #38bdf8; }
.glow-gold    { --glow-c1: #e9c178; --glow-c2: #fbbf24; --glow-c3: #f0d9a8; }
.glow-amber   { --glow-c1: #fbbf24; --glow-c2: #f59e0b; --glow-c3: #fde68a; }
.glow-emerald { --glow-c1: #34d399; --glow-c2: #10b981; --glow-c3: #a7f3d0; }
.glow-rose    { --glow-c1: #fb7185; --glow-c2: #f43f5e; --glow-c3: #fda4af; }
.glow-ember   { --glow-c1: #e4551f; --glow-c2: #f0873f; --glow-c3: #c24417; }

/* ── light surfaces ────────────────────────────────────────────────────────
   On white the halo has to come down hard or it turns into a dirty smudge,
   and the edge has to come up or it disappears. */
.glow-on-light,
.glow-on-light .glow-ring,
.glow-on-light .glow-ring-self {
  --glow-edge: 1;
  --glow-halo: 0.32;
  --glow-blur: 11px;
}

/* ── motion ────────────────────────────────────────────────────────────────
   Keep the ring, drop the rotation. The ring is carrying real meaning on the
   states it's used for; the spin is only decoration. */
@media (prefers-reduced-motion: reduce) {
  .glow-ring::before,
  .glow-ring::after,
  .glow-ring-self::before,
.btn-solid::before,
.btn-solid::after,
  .glow-ring-self::after {
    animation: none;
  }
  .glow-quiet.glow-ring,
  .glow-quiet.glow-ring-self::before,
  .glow-quiet.glow-ring-self::after {
    transition: none;
  }
}

/* alias — .btn-solid hosts its own ring, so it needs the position */
.btn-solid { position: relative; }

/* <<< house-ui glow <<< */

/* >>> house-ui tips + skeletons (from ~/scripts/ui-kit/css/house-ui-light.css,
   skeleton base swapped to the site's --line so it reads on warm paper) >>> */

#tip {
  position: fixed;
  z-index: 300;
  pointer-events: none;
  max-width: 17rem;
  padding: 0.45rem 0.625rem;
  border-radius: 0.625rem;
  background: #241a13;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 14px 32px -14px rgba(36, 26, 19, 0.5);
  color: #fdf7f2;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
#tip.on { opacity: 1; transform: none; }

[data-tip] { cursor: help; }
button[data-tip], a[data-tip], [role="button"][data-tip] { cursor: pointer; }

.sk {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--line);
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.65) 55%,
    transparent
  );
  animation: skeleton-shimmer 1.5s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
  #tip { transition: none; }
}

/* <<< house-ui tips + skeletons <<< */