/* ============================================================================
   KF.Social Fit — design system v3
   Confident, quiet, editorial. One accent (emerald), used sparingly. Surfaces
   are white or warm paper with hairline borders. No pastel washes, no left
   stripes, no gradients, no gold. Display = Archivo, body = Inter (embedded
   woff2, close system fallback). No em dashes anywhere.
   ============================================================================ */

/* ---------- embedded webfonts (latin subset, self-hosted woff2) ---------- */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:600 850;font-display:swap;
  src:url("/fit/assets/fonts/archivo-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/fit/assets/fonts/inter-latin.woff2") format("woff2");
}

:root{
  /* ink + paper */
  --obsidian:#111316; --ink:#17191C; --ink-2:#494E56; --ink-3:#787E88; --ink-4:#A7ACB4;
  --paper:#FAF9F6; --paper-2:#FFFFFF; --sand:#F2F1EC;
  --line:#E9E7E0; --line-2:#F1EFE9;
  /* single accent: emerald */
  --accent:#158463; --accent-deep:#0E6249; --accent-bright:#1FB07E;
  --accent-soft:#EAF4EF; --accent-line:#CFE6DB;
  /* semantic tones: used only for a small icon + title + hairline, never a wash */
  --info:#2F6B8F; --info-line:#D3E0E9;
  --caution:#B15A2B; --caution-line:#EBD6C7;     /* clay, never amber/yellow */
  --danger:#BB392F; --danger-line:#EED0CC;
  /* data-viz */
  --sugar:#E85B4C;      /* glucose in blood: warm coral, reads as "the problem" */
  --wrap:700px; --shell:1140px;
  --disp:"Archivo","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(20,22,25,.04),0 12px 28px -16px rgba(20,22,25,.16);
  --shadow-lift:0 2px 4px rgba(20,22,25,.05),0 22px 44px -20px rgba(20,22,25,.24);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:rgba(21,132,99,.16)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* reading progress */
.progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:var(--accent);transition:width .1s linear}

/* ---------- site chrome: KF.Social header (gh-nav) + fitness sub-nav ----------
   These rules are the main site's chrome (seo-generator/internal/templates/
   golden.css, .gh-nav / .gh-footer / .store-badge) ported onto this engine's
   tokens. The colours are Fit's paper/ink/emerald rather than Golden Hour's
   cream/gold, because these pages load ONE stylesheet (article.css) and must
   not import the main site's font stack or gold accents. The structure, class
   names and proportions are unchanged, so a reader moving between /guides and
   /fit sees the same frame around a different body.

   The article body below is untouched: the emerald design system still owns
   everything between the sub-nav and the footer. */
.gh-nav{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.9);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--line)}
.gh-nav-in{max-width:var(--shell);margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.gh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.02em}
.gh-brand img{width:32px;height:32px;border-radius:9px;flex:none}
.gh-nav-links{display:flex;gap:24px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.gh-nav-links a{color:var(--ink-2);text-decoration:none;transition:color .15s}
.gh-nav-links a:hover{color:var(--ink)}
.gh-nav-links a[aria-current="page"]{color:var(--accent-deep);font-weight:650}
.gh-nav-links .nav-spark{font-size:12px}
.gh-nav .btn-nav{padding:10px 20px;font-size:14px;background:var(--ink);color:var(--paper);
  border-radius:999px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease)}
.gh-nav .btn-nav:hover{background:var(--obsidian);color:var(--paper)}

/* Sub-nav: subordinate to the site nav above it. Quieter type, no CTA, no
   sticky behaviour, so it never competes for the "where am I on this site"
   job the KF nav does. */
.fit-subnav{background:var(--paper-2);border-bottom:1px solid var(--line)}
.fit-subnav-in{max-width:var(--shell);margin:0 auto;padding:0 24px;height:44px;
  display:flex;align-items:center;gap:22px;overflow-x:auto;scrollbar-width:none}
.fit-subnav-in::-webkit-scrollbar{display:none}
.fit-subnav-in a{color:var(--ink-3);text-decoration:none;font-size:13.5px;font-weight:600;
  white-space:nowrap;transition:color .15s}
.fit-subnav-in a:hover{color:var(--accent-deep)}

/* ---------- breadcrumb ---------- */
.crumb{max-width:var(--wrap);margin:30px auto 0;padding:0 24px;color:var(--ink-3);font-size:13px}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb .sep{margin:0 8px;color:var(--ink-4)}

/* ---------- hero ---------- */
.hero{max-width:var(--wrap);margin:0 auto;padding:18px 24px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);
  font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
h1{font-family:var(--disp);font-weight:800;letter-spacing:-.026em;line-height:1.04;
  font-size:clamp(34px,5.4vw,50px);margin:16px 0 0}
.dek{font-size:20.5px;line-height:1.5;color:var(--ink-2);margin:20px 0 0;max-width:60ch}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:26px 0 22px;font-size:13.5px;color:var(--ink-3)}
.meta .who{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.meta .who img{width:22px;height:22px;border-radius:6px}
.meta .sep{color:var(--ink-4)}
.badge{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--accent);
  font-weight:700;font-size:12.5px;padding:4px 11px;border-radius:100px;border:1px solid var(--accent-line)}
.badge svg{width:13px;height:13px}

/* ============================================================================
   DARK HERO BAND (.head-ink)  — new; do not remove old .hero head classes.
   Extends the sticky bar's ink into a deep, editorial hero zone so bar + hero
   read as ONE continuous dark surface. The white hero-fig card then STRADDLES
   the band's bottom edge (pulled up), bridging the dark-to-light transition.
   Contrast rule: white / soft-white text on ink only. Emerald only for the
   eyebrow + dot (bright variant, AA on ink). Never mid-grey text on ink.
   ============================================================================ */
.head-ink{position:relative;background:#111316;
  /* extremely subtle vertical deepening, no visible banding */
  background-image:linear-gradient(180deg,#16191d 0%,#111316 62%,#0f1114 100%);
  padding-bottom:78px}
/* breadcrumb inside the band, muted light */
.head-ink .crumb-ink{max-width:var(--shell);margin:0 auto;padding:26px 24px 0;
  color:rgba(255,255,255,.5);font-size:13px}
.head-ink .crumb-ink a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .15s}
.head-ink .crumb-ink a:hover{color:var(--accent-bright)}
.head-ink .crumb-ink .sep{margin:0 8px;color:rgba(255,255,255,.28)}
/* hero copy block */
.hero-ink{max-width:var(--shell);margin:0 auto;padding:20px 24px 0}
.hero-ink .eyebrow-ink{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);
  font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-bright)}
.hero-ink .eyebrow-ink .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-bright)}
.hero-ink h1{font-family:var(--disp);font-weight:800;letter-spacing:-.026em;line-height:1.05;
  color:#fff;font-size:clamp(34px,5.4vw,52px);margin:18px 0 0;max-width:20ch}
.hero-ink .dek{font-size:20.5px;line-height:1.55;color:rgba(255,255,255,.78);margin:22px 0 0;max-width:62ch}
.hero-ink .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:28px 0 0;
  font-size:13.5px;color:rgba(255,255,255,.55)}
.hero-ink .meta .who{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600}
.hero-ink .meta .who img{width:22px;height:22px;border-radius:6px}
.hero-ink .meta .sep{color:rgba(255,255,255,.3)}
.hero-ink .badge{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--accent-bright);
  font-weight:700;font-size:12.5px;padding:4px 11px;border-radius:100px;border:1px solid rgba(31,176,126,.5)}
.hero-ink .badge svg{width:13px;height:13px}

/* ----------------------------------------------------------------------------
   Head-ink variants for the template heads (hub, pillar, cluster, tag,
   comparison, search, community). The band re-surfaces each page's existing
   hero content on ink; content itself is unchanged. On-ink text is white /
   soft-white / muted-light only; emerald only via --accent-bright.
   -------------------------------------------------------------------------- */
/* two-column pillar/cluster/community hero sitting on ink.
   The right-hand figure card is white and straddles the band's bottom edge:
   the band gets bottom padding, and the fig pulls down so its lower half
   lands on the paper below, bridging dark to light like the flagship. */
.head-ink .ix-hero{padding-top:6px;padding-bottom:0}
.head-ink.has-straddle{padding-bottom:0}
.head-ink.has-straddle .ix-hero{align-items:stretch}
.head-ink.has-straddle .ix-hero>div:first-child{align-self:center}
.head-ink.has-straddle .ix-hero .ix-fig{align-self:center;margin-bottom:-64px;position:relative;z-index:2;
  box-shadow:var(--shadow-lift)}
/* the element right after a straddling band clears the pulled-down fig */
.head-ink.has-straddle + .cond-banner{margin-top:52px}
.head-ink .ix-hero .eyebrow{color:var(--accent-bright)}
.head-ink .ix-hero .eyebrow .dot{background:var(--accent-bright)}
.head-ink .ix-hero h1{color:#fff}
.head-ink .ix-hero .dek{color:rgba(255,255,255,.78)}
.head-ink .ix-hero .chips a,.head-ink .ix-hero .chips span{color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.head-ink .ix-hero .chips a:hover{color:#fff;border-color:var(--accent-bright)}
/* the ix-fig card is what straddles the band edge; keep it a white card */

/* centered hub hero on ink */
.head-ink .hub-hero{padding-top:8px}
.head-ink .hub-hero .eyebrow{color:var(--accent-bright)}
.head-ink .hub-hero .eyebrow .dot{background:var(--accent-bright)}
.head-ink .hub-hero h1{color:#fff}
.head-ink .hub-hero .dek{color:rgba(255,255,255,.78)}
.head-ink .hub-hero .hub-search input{background:#fff;border-color:transparent;color:var(--ink);
  box-shadow:0 2px 4px rgba(0,0,0,.18),0 14px 30px -18px rgba(0,0,0,.5)}
.head-ink .hub-hero .hub-search input::placeholder{color:var(--ink-3)}
.head-ink .hub-hero .hub-search input:focus{border-color:var(--accent-bright);
  box-shadow:0 0 0 4px rgba(31,176,126,.28)}
.head-ink .hub-hero .hub-search svg{color:var(--ink-4)}
.head-ink .hub-hero .trust{color:rgba(255,255,255,.6)}
.head-ink .hub-hero .trust svg{color:var(--accent-bright)}

/* tag hero on ink: hero uses --wrap, so match the crumb to it for alignment */
.head-ink .tag-hero{padding-top:8px}
.head-ink .tag-hero+*{}
.head-ink:has(.tag-hero) .crumb-ink,.head-ink:has(.search-hero) .crumb-ink,
.head-ink:has(.hero) .crumb-ink{max-width:var(--wrap)}
.head-ink .tag-hero .kind{color:var(--accent-bright)}
.head-ink .tag-hero h1{color:#fff}
.head-ink .tag-hero h1 .hash{color:var(--accent-bright)}
.head-ink .tag-hero .dek{color:rgba(255,255,255,.78)}
.head-ink .tag-hero .count{color:rgba(255,255,255,.55)}

/* comparison / simple article hero on ink */
.head-ink .hero{padding-top:8px}
.head-ink .hero .eyebrow{color:var(--accent-bright)}
.head-ink .hero .eyebrow .dot{background:var(--accent-bright)}
.head-ink .hero h1{color:#fff}
.head-ink .hero .dek{color:rgba(255,255,255,.78)}
.head-ink .hero .meta{color:rgba(255,255,255,.55)}
.head-ink .hero .meta .who{color:#fff}
.head-ink .hero .meta .sep{color:rgba(255,255,255,.3)}

/* centered search hero on ink; its search box lives inside the band */
.head-ink .search-hero{padding-top:10px}
.head-ink .search-hero .eyebrow{color:var(--accent-bright)}
.head-ink .search-hero .eyebrow .dot{background:var(--accent-bright)}
.head-ink .search-hero h1{color:#fff}
.head-ink .search-hero .dek{color:rgba(255,255,255,.78)}
.head-ink .search-box{margin-bottom:2px}
.head-ink .search-box input{background:#fff;border-color:transparent;color:var(--ink);
  box-shadow:0 2px 4px rgba(0,0,0,.18),0 14px 30px -18px rgba(0,0,0,.5)}
.head-ink .search-box input::placeholder{color:var(--ink-3)}
.head-ink .search-box input:focus{border-color:var(--accent-bright);box-shadow:0 0 0 4px rgba(31,176,126,.28)}
.head-ink .search-box svg{color:var(--ink-4)}

/* straddle helper for template figure cards (ix-fig): pull the card up over the
   band's bottom edge, like the flagship .hero-fig.straddle .card */
.head-ink.has-straddle{padding-bottom:96px}
.ix-straddle{max-width:var(--shell);margin:0 auto;padding:0 24px;position:relative;z-index:2}
.ix-straddle .ix-fig,.ix-straddle .cmp .tbl{transform:translateY(-72px);box-shadow:var(--shadow-lift);margin-bottom:-52px}
/* comparison table straddle: the .cmp wrapper keeps its own max-width/padding */
.head-ink + .cmp.straddle{max-width:var(--wrap);margin:0 auto;position:relative;z-index:2}
.head-ink.has-straddle + .cmp.straddle .tbl{transform:translateY(-72px);box-shadow:var(--shadow-lift);margin-bottom:-52px}

/* ---------- hero figure card ---------- */
.hero-fig{max-width:var(--shell);margin:28px auto 0;padding:0 24px}
.hero-fig .card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
  padding:26px 28px 20px;box-shadow:var(--shadow)}
.hero-fig .ttl{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.015em;margin:0}
.hero-fig .cap{margin:16px 2px 0;font-size:13.5px;color:var(--ink-3);line-height:1.55}
.hero-fig .cap b{color:var(--ink-2)}
/* straddle: the card is pulled up so its title sits on ink, lower half on paper */
.hero-fig.straddle{margin-top:0;position:relative;z-index:2}
.hero-fig.straddle .card{transform:translateY(-56px);box-shadow:var(--shadow-lift)}
/* body below starts on paper; clear the overlap */
.head-ink + .hero-fig.straddle + .disclaimer{margin-top:-32px}

/* ============================================================================
   Interactive glucose diagram (the two doors into muscle)
   Toggle between resting and moving. Coral dots are glucose; emerald is the
   exercise door. Respects reduced-motion (falls back to the moving end-state).
   ============================================================================ */
.diagram{--flow:9s}
.dg-frame{position:relative;background:linear-gradient(180deg,#fff,#fcfbf9);
  border:1px solid var(--line);border-radius:16px;padding:22px 22px 10px;overflow:hidden}
.dg-zones{display:flex;justify-content:space-between;font-family:var(--disp);font-weight:700;
  font-size:12px;letter-spacing:.15em;color:var(--ink-4);padding:0 4px 6px}
.dg svg{width:100%;height:auto;display:block}
.dg-lane-label .h{font-family:var(--disp);font-weight:800;font-size:15px}
.dg-lane-label .s{font-size:12.5px}
/* verdict chips drawn in-SVG: "The problem" (slate/coral, calm) + "The fix" (emerald) */
.dg .v-problem-bg{fill:#FBECEA;stroke:#E9C7C2}
.dg .v-problem-tx{fill:#B0463A}
.dg .v-fix-bg{fill:var(--accent-soft);stroke:var(--accent-line)}
.dg .v-fix-tx{fill:var(--accent-deep)}
/* the insulin key: slate, sits slightly askew (the key that does not work well) */
/* glucose dots: animate left->right along a lane; JS toggles the moving state */
.dot{fill:var(--sugar)}
@keyframes flow-slow{0%{transform:translateX(0);opacity:0}
  8%{opacity:1}70%{opacity:1}100%{transform:translateX(var(--dx,120px));opacity:0}}
.dg .g-move .dot,.dg .g-rest .dot{animation:flow-slow var(--flow) linear infinite}
.dg .g-rest .dot{animation-duration:calc(var(--flow) * 1.15)}
/* the exercise door: closed by default, swings open when moving */
.dg .door-ex{transform-box:fill-box;transform-origin:left center;transition:transform .5s var(--ease)}
.diagram.is-moving .dg .door-ex{transform:rotate(-58deg)}
/* moving state: speed the exercise lane up, reveal its "many through" dots */
.diagram.is-moving{--flow:3.4s}
.dg .ex-through{opacity:0;transition:opacity .5s ease .2s}
.diagram.is-moving .dg .ex-through{opacity:1}
.dg .ex-blood{transition:opacity .5s ease}
.diagram.is-moving .dg .ex-blood{opacity:.35}
.dg-controls{display:flex;align-items:center;gap:12px;margin:14px 4px 6px;flex-wrap:wrap}
.dg-toggle{display:inline-flex;background:var(--sand);border:1px solid var(--line);border-radius:100px;padding:3px}
.dg-toggle button{font-family:var(--disp);font-weight:700;font-size:13px;border:0;cursor:pointer;
  background:transparent;color:var(--ink-3);padding:7px 16px;border-radius:100px;transition:.18s}
.dg-toggle button.on{background:var(--paper-2);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.diagram.is-moving .dg-toggle button.move.on{color:var(--accent-deep)}
.dg-state{font-size:13px;color:var(--ink-3)}
.dg-state b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .dg .g-move .dot,.dg .g-rest .dot{animation:none}
  .dg .ex-through{opacity:1}.diagram .dg .door-ex{transform:rotate(-58deg)}
}

/* ---------- disclaimer (clean, clinical, calm) ---------- */
.disclaimer{max-width:var(--wrap);margin:28px auto 0;padding:0 24px}
.disclaimer .box{display:flex;gap:15px;background:var(--paper-2);border:1px solid var(--info-line);
  border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.disclaimer .ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--info)}
.disclaimer .ic svg{width:18px;height:18px}
.disclaimer .t{font-family:var(--disp);font-weight:800;font-size:14px;color:var(--info);margin:3px 0 6px}
.disclaimer p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.disclaimer b{color:var(--ink)}

/* ---------- layout: TOC + body ---------- */
.shell{max-width:var(--shell);margin:38px auto 0;padding:0 24px;
  display:grid;grid-template-columns:1fr minmax(0,var(--wrap)) 1fr;gap:0}
.toc{position:sticky;top:84px;align-self:start;grid-column:1;justify-self:end;width:214px;padding-right:30px}
.toc h4{font-family:var(--disp);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin:0 0 12px}
.toc a{display:block;text-decoration:none;color:var(--ink-3);font-size:13px;line-height:1.35;
  padding:6px 0 6px 14px;border-left:2px solid var(--line);transition:.15s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600}
/* min-width:0 is load-bearing, not defensive. A grid item defaults to
   min-width:auto, which refuses to shrink below its content's min-content
   width. The widest thing in a body is usually a data table, so on a phone the
   1fr column resolved to the table's natural width (559px inside a 390px
   viewport) and every article scrolled sideways by ~193px. It also meant
   .tbl-wrap's overflow-x:auto never engaged: the column grew to fit the table
   instead of the table scrolling inside the column. */
.article{grid-column:2;min-width:0}
.rail-r{grid-column:3}

/* ---------- body typography ---------- */
.article .lead{font-size:21px;line-height:1.55;color:var(--ink);font-weight:400}
.article p{margin:18px 0 0}
.article a.link{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--accent-line);text-decoration-thickness:1.5px;transition:text-decoration-color .15s}
.article a.link:hover{text-decoration-color:var(--accent)}
.article a.ext:after{content:"";display:inline-block;width:11px;height:11px;margin-left:3px;
  vertical-align:baseline;background:no-repeat center/contain;opacity:.65;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E6249' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E")}
.article strong{color:var(--ink);font-weight:680}
.abbr{border-bottom:1px dotted var(--ink-3);cursor:help}

/* ============================================================================
   BODY TABLES  (.article table, wrapped in .tbl-wrap)
   Ported from the live kf.social golden.css table idea, restyled to v3 emerald:
   a hairline-bounded card (radius clips the corners), a header row on paper-2
   with small uppercase letterspaced ink labels and a 2px emerald underline,
   hairline row dividers, generous padding, and a calm paper-2 row hover. The
   .tbl-wrap gives horizontal overflow on mobile so the page body never scrolls
   sideways. First column reads as the row label (medium-weight ink); numeric
   columns keep their natural (left) alignment.
   ============================================================================ */
.tbl-wrap{margin:28px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:12px}
.article .tbl-wrap table{margin:0}
.article table{width:100%;border-collapse:collapse;background:var(--paper-2);
  font-size:16px;line-height:1.5}
.article thead th{background:var(--paper-2);text-align:left;
  font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
  padding:13px 16px;border-bottom:2px solid var(--accent);white-space:nowrap}
.article tbody td{padding:12px 16px;border-top:1px solid var(--line-2);
  color:var(--ink-2);vertical-align:top;line-height:1.5}
.article tbody tr:first-child td{border-top:0}
.article tbody td:first-child{font-weight:600;color:var(--ink)}
.article tbody tr:hover td{background:var(--sand)}
.article table strong{color:var(--ink);font-weight:680}

/* ---------- inline highlight (mark.hl) ----------
   A sanctioned text-level highlight for a key fact. Soft emerald wash, ink text,
   no underline. Kept calm: low-alpha fill, tight padding, small radius. */
mark.hl{background:rgba(21,132,99,.14);color:var(--ink);
  padding:0 2px;border-radius:4px;text-decoration:none;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* section headers with number */
.sec{margin:54px 0 0;scroll-margin-top:82px}
.sec .k{display:flex;align-items:center;gap:14px}
.sec .num{font-family:var(--disp);font-weight:800;font-size:14px;color:#fff;background:var(--ink);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none}
.sec h2{font-family:var(--disp);font-weight:800;letter-spacing:-.022em;font-size:28px;line-height:1.14;margin:0}
.article h3{font-family:var(--disp);font-weight:700;font-size:20px;margin:34px 0 0;letter-spacing:-.01em}

/* key takeaways */
.tldr{margin:32px 0 0;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;
  padding:6px 26px 22px;box-shadow:var(--shadow)}
.tldr h4{font-family:var(--disp);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:22px 0 6px;display:flex;align-items:center;gap:9px}
.tldr h4 .d{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.tldr ul{list-style:none;margin:0;padding:0}
.tldr li{position:relative;padding:13px 0 13px 30px;font-size:16.5px;line-height:1.5;border-top:1px solid var(--line-2)}
.tldr li:before{content:"";position:absolute;left:0;top:17px;width:17px;height:17px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23158463' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* callouts: clean card, no fill, no stripe. tinted icon chip + tinted title. */
.call{margin:30px 0 0;border-radius:14px;padding:18px 20px;border:1px solid var(--line);
  background:var(--paper-2);display:flex;gap:14px;box-shadow:var(--shadow)}
.call .ci{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center}
.call .ci svg{width:18px;height:18px}
.call .k{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:3px 0 6px}
.call p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
.call p strong{color:var(--ink)}
.call.tip{border-color:var(--accent-line)} .call.tip .ci{background:var(--accent-soft);color:var(--accent)} .call.tip .k{color:var(--accent-deep)}
.call.note{border-color:var(--info-line)} .call.note .ci{background:#eaf1f6;color:var(--info)} .call.note .k{color:var(--info)}
.call.mistake{border-color:var(--caution-line)} .call.mistake .ci{background:#f6ece3;color:var(--caution)} .call.mistake .k{color:var(--caution)}
.call.danger{border-color:var(--danger-line)} .call.danger .ci{background:#f7e5e2;color:var(--danger)} .call.danger .k{color:var(--danger)}

/* figure / chart */
figure{margin:36px 0 0}
figure .cap{margin:14px 2px 0;font-size:13.5px;color:var(--ink-3);line-height:1.55}
figure .cap b{color:var(--ink-2)}
.viz{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:22px 22px 16px;box-shadow:var(--shadow)}
.viz .vh{font-family:var(--disp);font-weight:800;font-size:16px;margin:0;letter-spacing:-.01em}
.viz .vs{font-size:12.5px;color:var(--ink-3);margin:5px 0 16px}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;font-size:13px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:20px;height:4px;border-radius:2px;display:inline-block}
/* draw-on animation for chart lines when they scroll into view */
.chart-line{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.4s var(--ease)}
.viz.in .chart-line{stroke-dashoffset:0}
.chart-dot{opacity:0;transition:opacity .4s ease .9s}
.viz.in .chart-dot{opacity:1}
@media (prefers-reduced-motion:reduce){.chart-line{stroke-dashoffset:0}.chart-dot{opacity:1}}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin:32px 0 0;background:var(--paper-2);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.stat{padding:24px 22px;border-left:1px solid var(--line-2)}
.stat:first-child{border-left:0}
.stat .n{font-family:var(--disp);font-weight:800;font-size:36px;letter-spacing:-.03em;color:var(--ink);line-height:1}
.stat .n em{font-style:normal;color:var(--accent)}
.stat .n small{font-size:16px;font-weight:700;color:var(--ink-3);margin-left:2px}
.stat .l{font-size:13.5px;color:var(--ink-2);margin-top:10px;line-height:1.4}
.stat .src{font-size:11.5px;color:var(--ink-4);margin-top:8px}

/* protocol steps: flat ink circles */
.steps{counter-reset:s;margin:24px 0 0;padding:0;list-style:none}
.steps li{position:relative;counter-increment:s;padding:15px 0 15px 54px;border-top:1px solid var(--line-2)}
.steps li:first-child{border-top:0}
.steps li:before{content:counter(s);position:absolute;left:0;top:15px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:15px;color:#fff;background:var(--ink)}
.steps b{display:block;font-family:var(--disp);font-size:16.5px;margin-bottom:2px;letter-spacing:-.01em}

/* FAQ */
.faq{margin:20px 0 0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 2px;position:relative;
  font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.35;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:4px;top:21px;width:14px;height:14px;background:no-repeat center/contain;transition:transform .2s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23158463' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 34px 18px 2px;font-size:16px;color:var(--ink-2);line-height:1.6}

/* references */
.refs{margin:20px 0 0;font-size:14.5px;color:var(--ink-2)}
.refs ol{padding-left:22px;margin:0}
.refs li{margin:11px 0;line-height:1.5}
/* Reference lists print full DOI URLs, which are long unbreakable tokens that
   punch out of the column on narrow screens. */
.refs a{color:var(--accent-deep);overflow-wrap:anywhere}
.refs .note{margin-top:18px;color:var(--ink-4);font-size:13px}

/* ============================================================================
   SHARE  (.share)  — ported from kf.social guide template, restyled to v3.
   Hairline-bounded band, display-font head (not italic serif), white pill
   chips with hairline border + inline currentColor SVG icons. Hover lifts to
   emerald border + ink text. One accent, no gold, no washes.
   ============================================================================ */
.share{max-width:var(--wrap);margin:52px auto 0;padding:26px 24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share-head{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.015em;
  color:var(--ink);margin:0 0 16px}
.share-chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:100px;padding:9px 16px;
  font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:-.01em;
  color:var(--ink-2);text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,transform .15s}
.chip svg{width:15px;height:15px;flex:none}
.chip:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px)}
.chip.copied{border-color:var(--accent);color:var(--accent-deep)}

/* related cluster */
.related{max-width:var(--shell);margin:58px auto 0;padding:0 24px}
.related h3{font-family:var(--disp);font-weight:800;font-size:23px;margin:0 0 4px;letter-spacing:-.015em}
.related .sub{color:var(--ink-3);font-size:14px;margin:0 0 20px}
.related .sub a{color:var(--accent-deep)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rc{display:block;text-decoration:none;color:inherit;background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;padding:20px;transition:border-color .15s,transform .15s,box-shadow .15s}
.rc:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.rc .p{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-deep)}
.rc .t{font-family:var(--disp);font-weight:700;font-size:16.5px;line-height:1.24;margin:10px 0 0;letter-spacing:-.01em}
.rc .m{font-size:12.5px;color:var(--ink-3);margin-top:14px}

/* app / community CTA: light, high-contrast, refined */
.promo{max-width:var(--shell);margin:48px auto 0;padding:0 24px}
.promo .in{background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:34px 36px;
  display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center;box-shadow:var(--shadow)}
.promo .eyebrow{color:var(--ink-3)}
.promo h3{font-family:var(--disp);font-weight:800;font-size:27px;line-height:1.12;margin:14px 0 0;color:var(--ink);letter-spacing:-.02em}
.promo p{color:var(--ink-2);margin:14px 0 0;font-size:16px;line-height:1.55}
.promo .btns{display:flex;gap:12px;margin:24px 0 0;flex-wrap:wrap}
.promo .b1{background:var(--accent);color:#fff;font-weight:700;padding:13px 24px;border-radius:100px;
  text-decoration:none;font-family:var(--disp);transition:background .15s,transform .15s}
.promo .b1:hover{background:var(--accent-bright);transform:translateY(-1px)}
.promo .b2{border:1px solid var(--line);color:var(--ink);padding:13px 24px;border-radius:100px;
  text-decoration:none;font-weight:600;transition:border-color .15s}
.promo .b2:hover{border-color:var(--ink-3)}
.promo .card{background:var(--sand);border:1px solid var(--line);border-radius:16px;padding:20px;color:var(--ink)}
.promo .card .q{font-size:12.5px;color:var(--ink-3)}
.promo .card .big{font-family:var(--disp);font-weight:800;font-size:20px;margin-top:4px;letter-spacing:-.01em;line-height:1.2}
.promo .card .row{display:flex;justify-content:space-between;font-size:14px;padding:11px 0;border-top:1px solid var(--line)}
.promo .card .row:first-of-type{margin-top:8px}
.promo .card .row b{font-weight:600}
.promo .card .row .ok{color:var(--accent)}
/* Store badges sit under the primary button rather than beside it: the button
   is the one thing we want tapped, and two dark badges next to a filled emerald
   pill fight it for attention. */
.promo .badges{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}

/* ---------- gem rail: "Find your people" ----------
   Where the section converts. It replaced two buttons that pushed the reader at
   a separate fitness product; each card here opens a real KF.Social community
   at /c/<slug>, which is a universal link, so it opens the app when installed
   and the community page otherwise.

   Built on this page's own tokens rather than ported wholesale from the main
   site's gh-hub.css: the markup matches guide.html so the two rails behave the
   same, but the surface is paper/line/emerald so it reads as part of the
   article rather than as an embed from another site. */
.gem-rail{max-width:var(--shell);margin:56px auto 0;padding:0 24px}
.gem-rail-head h2{font-family:var(--disp);font-weight:800;font-size:29px;letter-spacing:-.02em;margin:13px 0 0;color:var(--ink)}
.gem-rail-head p{margin:10px 0 0;color:var(--ink-3);font-size:15px;line-height:1.55;max-width:62ch}
.gem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 0}
.gem-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:14px;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.gem-card:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
/* The gem's stored gradient is painted on the cover box itself, so it is what
   shows while the thumbnail loads and what remains if the image never arrives. */
.gem-cover{flex:none;width:60px;height:60px;border-radius:14px;overflow:hidden;background:var(--sand)}
.gem-cover img{display:block;width:100%;height:100%;object-fit:cover}
.gem-body{min-width:0;display:flex;flex-direction:column;gap:4px}
.gem-body .n{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;
  font-size:16px;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.gem-body .e{flex:none;font-size:15px;line-height:1}
.gem-body .d{font-size:13px;line-height:1.45;color:var(--ink-3)}
.gem-card .go{flex:none;margin-left:auto;display:flex;color:var(--ink-4);transition:color .15s,transform .15s}
.gem-card .go svg{width:18px;height:18px}
.gem-card:hover .go{color:var(--accent-deep);transform:translateX(2px)}
.gem-rail-all{display:inline-flex;align-items:center;gap:7px;margin:22px 0 0;
  color:var(--accent-deep);text-decoration:none;font-weight:600;font-size:14.5px}
.gem-rail-all svg{width:16px;height:16px}
.gem-rail-all:hover{text-decoration:underline}

/* author box */
.author{max-width:var(--wrap);margin:50px auto 0;padding:24px;display:flex;gap:16px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:16px}
.author .av{flex:none;width:48px;height:48px;border-radius:11px}
.author .n{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em}
.author .r{font-size:13.5px;color:var(--ink-3);margin-top:2px}
.author .d{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.5}

/* tags (hashtag prefix rendered from markup) */
.tags{max-width:var(--wrap);margin:28px auto 0;padding:0 24px;display:flex;flex-wrap:wrap;gap:9px}
.tags a{font-size:13px;text-decoration:none;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:100px;padding:6px 14px;transition:.15s}
.tags a:hover{border-color:var(--accent-line);color:var(--accent-deep)}
.tags a .h,.tags .tag-flat .h{color:var(--accent);font-weight:700;margin-right:1px}
/* A tag with too few guides to earn its own page renders as a chip that is not
   a link, rather than as a link to a page nobody generated. Same shape, no
   hover affordance, quieter ink. */
.tags .tag-flat{font-size:13px;color:var(--ink-3);background:var(--paper);
  border:1px solid var(--line-2);border-radius:100px;padding:6px 14px;cursor:default}

/* ---------- site chrome: KF.Social footer (gh-footer) + store badges ----------
   Ported from golden.css alongside the header, same reasoning. The long medical
   disclaimer (.foot-fine) is an addition: it is a legal requirement for health
   content, so it rides in the shared footer rather than in any one template. */
.gh-footer{margin-top:66px;border-top:1px solid var(--line);background:var(--paper-2);
  padding:52px 0 40px;font-size:14px;color:var(--ink-3)}
.gh-footer .foot-wrap{max-width:var(--shell);margin:0 auto;padding:0 24px}
.gh-footer .foot-grid{display:flex;justify-content:space-between;align-items:center;
  gap:28px;flex-wrap:wrap}
.gh-footer .foot-brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--disp);font-weight:700;font-size:16px;color:var(--ink)}
.gh-footer .foot-brand img{width:28px;height:28px;border-radius:8px}
.gh-footer .foot-links{display:flex;gap:20px;font-weight:500;flex-wrap:wrap}
.gh-footer .foot-links a{color:var(--ink-2);text-decoration:none;font-size:14px}
.gh-footer .foot-links a:hover{color:var(--accent-deep)}
.gh-footer .foot-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.gh-footer .foot-fine{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-2);
  font-size:12.5px;color:var(--ink-4);line-height:1.6}
.gh-footer .foot-bottom{margin-top:22px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:13px;color:var(--ink-4)}
.store-badge{display:inline-flex;align-items:center;gap:10px;border-radius:13px;
  padding:10px 18px 10px 14px;min-height:56px;background:var(--ink);color:var(--paper);
  text-decoration:none;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.store-badge:hover{opacity:.85}
.store-badge:active{transform:scale(.985)}
.store-badge svg{width:24px;height:24px;flex:none;fill:var(--paper)}
.store-badge .txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store-badge .s{font-size:10.5px;font-weight:500;opacity:.75;letter-spacing:.01em}
.store-badge .l{font-size:17px;font-weight:600;letter-spacing:-.01em}

@media (max-width:1080px){
  .shell{grid-template-columns:1fr;max-width:var(--wrap)}
  .toc,.rail-r{display:none}
  .article{grid-column:1}
}
/* The KF nav collapses to brand + CTA once the links no longer fit, leaving the
   fitness sub-nav (which scrolls) to carry section navigation.

   920px is measured, not copied. Brand 117 + links 565 + CTA 118 + padding 48 +
   two 18px gaps needs a 884px viewport, and this nav carries one more item than
   the main site's because of the Fitness entry, so kf.social's 840px rule is too
   narrow to reuse. Collapsing at 760px (the value this started with) left every
   page horizontally scrollable by ~75px from 761px up to ~884px, with the Get
   the app button hanging off the right edge. If you add another nav item,
   re-measure and raise this. */
@media (max-width:920px){
  .gh-nav-links{display:none}
}
@media (max-width:760px){
  body{font-size:17px}
  .cards,.stats{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid var(--line-2)}
  .stat:first-child{border-top:0}
  .promo .in{grid-template-columns:1fr}
  .gh-footer .foot-grid{flex-direction:column;align-items:flex-start;gap:18px}
  /* smaller straddle overlap on mobile */
  .head-ink{padding-bottom:58px}
  .hero-fig.straddle .card{transform:translateY(-40px)}
  .head-ink + .hero-fig.straddle + .disclaimer{margin-top:-24px}
  .hero-ink .dek{font-size:18px}
}

/* ============================================================================
   TEMPLATE COMPONENTS
   Shared blocks for index, cluster, community, tag, comparison, search, app.
   Same tokens and scale as the article. All emerald, no gold, no stripes.
   ============================================================================ */
.wrap-x{max-width:var(--shell);margin:0 auto;padding:0 24px}
.blk{max-width:var(--shell);margin:62px auto 0;padding:0 24px}
.blk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 24px}
.blk-head h2{font-family:var(--disp);font-weight:800;font-size:29px;letter-spacing:-.02em;margin:0}
.blk-head p{margin:8px 0 0;color:var(--ink-3);font-size:15px;max-width:60ch}
.blk-head .more{color:var(--accent-deep);text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap}
.blk-head .more:hover{text-decoration:underline}

/* index / pillar hero */
.ix-hero{max-width:var(--shell);margin:0 auto;padding:46px 24px 8px;display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.ix-hero h1{font-size:clamp(34px,5vw,52px);margin:14px 0 0}
.ix-hero .dek{margin:20px 0 0}
.ix-hero .chips{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0}
.ix-hero .chips a,.ix-hero .chips span{font-size:13px;text-decoration:none;color:var(--ink-2);
  background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:7px 15px;transition:.15s}
.ix-hero .chips a:hover{border-color:var(--accent-line);color:var(--accent-deep)}
.ix-fig{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:24px 26px 18px;box-shadow:var(--shadow)}
.ix-fig .ttl{font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:-.01em;margin:0 0 6px}
.ix-fig .cap{margin:14px 2px 0;font-size:13px;color:var(--ink-3);line-height:1.5}
.ix-fig .cap b{color:var(--ink-2)}

/* category card grids */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.acard{display:block;text-decoration:none;color:inherit;background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;padding:20px;transition:border-color .15s,transform .15s,box-shadow .15s}
.acard:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.acard .p{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
.acard .t{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.22;margin:10px 0 0;letter-spacing:-.01em}
.acard .m{font-size:12.5px;color:var(--ink-3);margin-top:14px;display:flex;align-items:center;gap:8px}
.cathead{display:flex;align-items:baseline;gap:12px;margin:46px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cathead h3{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.01em;margin:0}
.cathead .n{font-size:12.5px;color:var(--ink-4);font-weight:600}
.cathead a{margin-left:auto;color:var(--accent-deep);text-decoration:none;font-size:13.5px;font-weight:600;white-space:nowrap}
.cathead a:hover{text-decoration:underline}

/* featured / flagship slot (kept dark but restrained, emerald kicker) */
.flag-slot{display:grid;grid-template-columns:1.5fr 1fr;gap:16px}
.flag-big{position:relative;display:block;text-decoration:none;color:#fff;border-radius:20px;overflow:hidden;
  border:1px solid #23262b;background:linear-gradient(160deg,#181b1f,#12261f);min-height:260px;transition:border-color .15s}
.flag-big .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:30px}
.flag-big .p{color:var(--accent-bright);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.flag-big h3{font-family:var(--disp);font-weight:800;font-size:27px;line-height:1.12;margin:12px 0 0;color:#fff;max-width:20ch}
.flag-big .m{color:#c4c3bd;font-size:13.5px;margin-top:12px}
.flag-big:hover{border-color:var(--accent)}
.flag-side{display:flex;flex-direction:column;gap:16px}
.flag-side .acard{flex:1;display:flex;flex-direction:column;justify-content:center}

/* cross-pillar rail (accent dot, no stripe) */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rail a{display:block;text-decoration:none;color:inherit;background:var(--paper-2);border:1px solid var(--line);
  border-radius:14px;padding:18px;transition:border-color .15s,transform .15s}
.rail a:hover{border-color:var(--accent-line);transform:translateY(-3px)}
.rail .t{font-family:var(--disp);font-weight:700;font-size:15.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.rail .t:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,var(--accent));flex:none}
.rail .d{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.4}

/* condition banner (calm, clinical) */
.cond-banner{max-width:var(--shell);margin:28px auto 0;padding:0 24px}
.cond-banner .box{display:flex;gap:16px;background:var(--paper-2);border:1px solid var(--info-line);
  border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
.cond-banner .ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#eaf1f6;color:var(--info)}
.cond-banner .ic svg{width:19px;height:19px}
.cond-banner .t{font-family:var(--disp);font-weight:800;font-size:14.5px;color:var(--info);margin:3px 0 6px}
.cond-banner p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.cond-banner b{color:var(--ink)}

.conds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ccard{display:block;text-decoration:none;color:inherit;background:var(--paper-2);border:1px solid var(--line);
  border-radius:16px;padding:20px;transition:border-color .15s,transform .15s,box-shadow .15s}
.ccard:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.ccard .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;background:var(--accent-soft);color:var(--accent)}
.ccard .ic svg{width:22px;height:22px}
.ccard h3{font-family:var(--disp);font-weight:700;font-size:16.5px;line-height:1.18;margin:0;letter-spacing:-.01em}
.ccard p{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.42}
.ccard .go{margin-top:14px;font-size:12px;font-weight:700;color:var(--accent-deep);letter-spacing:.02em}

.stance{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.stance .s{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:22px}
.stance .s .h{font-family:var(--disp);font-weight:800;font-size:16px;margin:0 0 8px;letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.stance .s .h svg{width:18px;height:18px;color:var(--accent);flex:none}
.stance .s p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}

/* tag hero */
.tag-hero{max-width:var(--wrap);margin:0 auto;padding:42px 24px 0}
.tag-hero .kind{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.tag-hero h1{font-size:clamp(32px,4.6vw,46px);margin:12px 0 0}
.tag-hero h1 .hash{color:var(--accent)}
.tag-hero .dek{margin:18px 0 0}
.tag-hero .count{margin:20px 0 0;font-size:13.5px;color:var(--ink-3)}
.tag-list{max-width:var(--wrap);margin:32px auto 0;padding:0 24px}
.tag-row{text-decoration:none;color:inherit;border-top:1px solid var(--line);padding:22px 2px;display:flex;gap:18px;align-items:flex-start}
.tag-row:last-child{border-bottom:1px solid var(--line)}
.tag-row:hover .t{color:var(--accent-deep)}
.tag-row .num{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--ink-4);flex:none;width:34px;padding-top:2px}
.tag-row .p{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.tag-row .t{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.25;margin:6px 0 0;letter-spacing:-.01em;transition:color .15s}
.tag-row .m{font-size:13px;color:var(--ink-3);margin-top:8px}
.related-tags{max-width:var(--wrap);margin:46px auto 0;padding:0 24px}
.related-tags h4{font-family:var(--disp);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin:0 0 14px}
.related-tags .row{display:flex;flex-wrap:wrap;gap:9px}
.related-tags a{font-size:14px;text-decoration:none;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:8px 15px;transition:.15s}
.related-tags a:hover{border-color:var(--accent-line);color:var(--accent-deep)}
.related-tags a .h{color:var(--accent);font-weight:700}

/* comparison table */
.cmp{max-width:var(--wrap);margin:36px auto 0;padding:0 24px}
.cmp .tbl{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow)}
.cmp table{width:100%;border-collapse:collapse;font-size:15px}
.cmp thead th{font-family:var(--disp);font-weight:800;font-size:14px;text-align:left;padding:16px 18px;background:var(--sand);border-bottom:1px solid var(--line)}
.cmp thead th:first-child{color:var(--ink-3);font-weight:700}
.cmp thead th.app{color:var(--accent-deep)}
.cmp thead th.book{color:var(--ink)}
.cmp tbody td{padding:15px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.45;color:var(--ink-2)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody td:first-child{font-weight:600;color:var(--ink);width:26%}
.cmp .win{color:var(--accent);font-weight:600}
.cmp .yes{color:var(--accent);font-weight:700}
.cmp .no{color:var(--ink-4)}
.cmp-note{font-size:13px;color:var(--ink-4);margin:16px 2px 0}
.verdicts{max-width:var(--wrap);margin:36px auto 0;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vcard{border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--paper-2);box-shadow:var(--shadow)}
.vcard.accent{border-color:var(--accent-line)}
.vcard .vk{font-family:var(--disp);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px}
.vcard.paper .vk{color:var(--ink-3)}
.vcard.accent .vk{color:var(--accent-deep)}
.vcard ul{list-style:none;margin:0;padding:0}
.vcard li{position:relative;padding:9px 0 9px 26px;font-size:15px;line-height:1.45;border-top:1px solid var(--line-2)}
.vcard li:first-child{border-top:0}
.vcard li:before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--ink-4)}
.vcard.accent li:before{background:var(--accent)}

/* search page */
.search-hero{max-width:760px;margin:0 auto;padding:54px 24px 0;text-align:center}
.search-hero h1{font-size:clamp(32px,4.6vw,46px);margin:14px 0 0}
.search-box{max-width:640px;margin:30px auto 0;position:relative}
.search-box svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-4)}
.search-box input{width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:100px;
  padding:16px 22px 16px 52px;font-size:17px;color:var(--ink);outline:none;font-family:var(--body);transition:.15s}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(21,132,99,.12)}
.popular{max-width:640px;margin:20px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;font-size:13px;color:var(--ink-3);align-items:center}
.popular b{color:var(--ink-3);font-weight:600;margin-right:2px}
.popular button{cursor:pointer;font-size:13px;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:100px;padding:6px 13px;font-family:var(--body);transition:.15s}
.popular button:hover{border-color:var(--accent-line);color:var(--accent-deep)}
.results{max-width:var(--wrap);margin:42px auto 0;padding:0 24px}
.results .rc-line{margin:0 0 18px;font-size:13.5px;color:var(--ink-3)}
.results .rc-line b{color:var(--ink)}
.sresult{display:block;text-decoration:none;color:inherit;border-top:1px solid var(--line);padding:20px 2px}
.sresult:last-child{border-bottom:1px solid var(--line)}
.sresult .p{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.sresult .t{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.25;margin:6px 0 0;letter-spacing:-.01em}
.sresult:hover .t{color:var(--accent-deep)}
.sresult mark{background:var(--accent-soft);color:var(--accent-deep);border-radius:3px;padding:0 2px}
.empty{max-width:var(--wrap);margin:42px auto 0;padding:46px 24px;text-align:center;color:var(--ink-3)}
.empty svg{width:44px;height:44px;color:var(--line);margin:0 auto 14px}
.empty h3{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--ink);margin:0 0 6px}
.empty p{margin:0;font-size:15px}

/* app / product page */
.app-hero{max-width:var(--shell);margin:0 auto;padding:54px 24px 0;display:grid;grid-template-columns:1.08fr 1fr;gap:46px;align-items:center}
.app-hero h1{font-size:clamp(36px,5.4vw,58px);margin:14px 0 0}
.app-hero .dek{margin:20px 0 0}
.app-hero .btns{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.app-hero .b1{background:var(--accent);color:#fff;font-weight:700;padding:14px 28px;border-radius:100px;text-decoration:none;font-family:var(--disp);transition:.15s}
.app-hero .b1:hover{background:var(--accent-bright);transform:translateY(-1px)}
.app-hero .b2{border:1px solid var(--line);color:var(--ink);padding:14px 26px;border-radius:100px;text-decoration:none;font-weight:600;background:var(--paper-2)}
.app-hero .fine{margin:18px 0 0;font-size:12.5px;color:var(--ink-4)}
.device{background:linear-gradient(150deg,#181b1f,#14231d);border-radius:32px;padding:14px;border:1px solid #23262b;box-shadow:var(--shadow-lift);max-width:320px;margin:0 auto}
.device .screen{background:var(--paper-2);border-radius:22px;padding:24px 20px;min-height:390px;display:flex;flex-direction:column}
.device .ph{font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);text-align:center;border:1px dashed var(--line);border-radius:100px;padding:7px 0;margin-bottom:18px}
.feature{max-width:var(--shell);margin:58px auto 0;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.feature.flip .fcopy{order:2}
.feature .eyebrow{margin-bottom:14px}
.feature h2{font-family:var(--disp);font-weight:800;font-size:28px;letter-spacing:-.02em;margin:0}
.feature p{margin:16px 0 0;color:var(--ink-2);font-size:16.5px;line-height:1.6}
.feature .fig{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:24px 26px 18px;box-shadow:var(--shadow)}
.feature .fig .ftt{font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:-.01em;margin:0 0 6px;color:var(--ink-2)}
.tiers{max-width:var(--shell);margin:62px auto 0;padding:0 24px}
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px;margin:0 auto}
.tier{border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--paper-2)}
.tier.pro{background:linear-gradient(155deg,#181b1f,#14231d);border-color:#23262b;color:#f3f2ef}
.tier .name{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.01em}
.tier.pro .name{color:#fff}
.tier .price{font-family:var(--disp);font-weight:800;font-size:32px;letter-spacing:-.02em;margin:10px 0 0}
.tier.pro .price{color:var(--accent-bright)}
.tier .price small{font-size:14px;font-weight:600;color:var(--ink-3)}
.tier.pro .price small{color:#98968f}
.tier ul{list-style:none;margin:18px 0 0;padding:0}
.tier li{position:relative;padding:9px 0 9px 26px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.tier.pro li{color:#c4c3bd}
.tier li:before{content:"";position:absolute;left:0;top:12px;width:15px;height:15px;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23158463' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.tier.pro li:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231FB07E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.tier .tbtn{display:block;text-align:center;margin:22px 0 0;padding:13px;border-radius:100px;text-decoration:none;font-weight:700;font-family:var(--disp);transition:.15s}
.tier .tbtn.free{border:1px solid var(--line);color:var(--ink)}
.tier .tbtn.free:hover{border-color:var(--ink-3)}
.tier.pro .tbtn{background:var(--accent);color:#fff}
.tier.pro .tbtn:hover{background:var(--accent-bright)}

/* community page */
.comm-values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cvcard{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:24px}
.cvcard .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;background:var(--accent-soft);color:var(--accent-deep)}
.cvcard .ic svg{width:21px;height:21px}
.cvcard h3{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;margin:0}
.cvcard p{margin:8px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:f}
.flowstep{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:22px 20px}
.flowstep:before{counter-increment:f;content:counter(f);font-family:var(--disp);font-weight:800;font-size:14px;color:#fff;background:var(--ink);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px}
.flowstep h4{font-family:var(--disp);font-weight:700;font-size:15.5px;margin:0;letter-spacing:-.01em}
.flowstep p{margin:7px 0 0;font-size:13px;color:var(--ink-3);line-height:1.45}
.guide-list{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow)}
.guide-list .g{display:flex;gap:15px;padding:20px 22px;border-top:1px solid var(--line-2)}
.guide-list .g:first-child{border-top:0}
.guide-list .g .ic{flex:none;width:28px;height:28px;color:var(--accent)}
.guide-list .g .ic svg{width:28px;height:28px}
.guide-list .g .gt{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em}
.guide-list .g p{margin:4px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* ---------------------------------------------------------------------------
   PILLAR INDEX ROWS (.ix-rows): generated pillar pages list a cluster's
   published guides as rows. Every row is a real link; there is no muted
   "coming soon" state, because unwritten titles are not rendered at all.
   --------------------------------------------------------------------------- */
.ix-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper-2)}
.ix-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;
  padding:15px 20px;border-top:1px solid var(--line-2);text-decoration:none;color:inherit}
.ix-row:first-child{border-top:0}
.ix-row .t{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.ix-row .tag{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.ix-row .go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;white-space:nowrap}
.ix-row .go svg{width:15px;height:15px}
.ix-row.is-live .go{color:var(--accent-deep)}
.ix-row.is-live:hover{background:var(--accent-soft)}
.ix-row.is-live:hover .t{color:var(--accent-deep)}

/* HUB-STYLE HERO (.hub-hero)  — the centered dark hero used by the generated
   browse-all and topic-map pages. The hub page defines its own copy inline; the
   engine pages rely on this base layout (colors come from the .head-ink block). */
.hub-hero{max-width:var(--shell);margin:0 auto;padding:36px 24px 40px;text-align:center}
.hub-hero .eyebrow{justify-content:center}
.hub-hero h1{font-family:var(--disp);font-weight:800;letter-spacing:-.026em;line-height:1.04;
  font-size:clamp(36px,5.6vw,58px);margin:16px auto 0;max-width:18ch}
.hub-hero .dek{margin:18px auto 0;font-size:19px;line-height:1.5;color:var(--ink-2);text-align:center;max-width:58ch}
.trust{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 24px;margin:22px 0 0;
  color:var(--ink-3);font-size:13.5px}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:15px;height:15px;color:var(--accent)}

/* PILLAR CARDS (.pillars / .pill)  — the ten cards on the /fit/ hub. Ported from
   the hand-built hub page that used to carry them inline, minus its icon chips
   (the icons were per-pillar hand art; the generated hub is text-first). */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pill{display:block;text-decoration:none;color:inherit;background:var(--paper-2);
  border:1px solid var(--line);border-radius:14px;padding:22px 20px;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.pill:hover{border-color:var(--accent-line);transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.pill h3{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.18;margin:0;letter-spacing:-.01em}
.pill p{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.42}
.pill .n{margin-top:14px;font-size:12px;font-weight:700;color:var(--accent-deep);letter-spacing:.02em}
@media (max-width:980px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.pillars{grid-template-columns:1fr}}

/* PILLAR HERO FIGURE (.ix-fig-stack)  — a generic "spend your effort here"
   stack that reads for any pillar; the base tier is emphasised in emerald. */
.ix-fig-stack{display:flex;flex-direction:column;gap:7px;margin:6px 0 4px}
.ix-fig-stack .step{border:1px solid var(--line);background:var(--paper);border-radius:11px;
  padding:12px 15px;font-family:var(--disp);font-weight:700;font-size:13.5px;color:var(--ink-2);text-align:center}
.ix-fig-stack .step.base{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep);font-size:14.5px}

/* BROWSE-ALL cluster groups (.all-cat) */
.all-cat{margin:22px 0 34px}
.all-cat-h{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);
  margin:0 0 14px;display:flex;align-items:baseline;gap:10px}
.all-cat-h span{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--accent-deep)}
.cathead a{margin-left:auto;color:var(--accent-deep);text-decoration:none;font-weight:600;font-size:13.5px;white-space:nowrap}
.cathead a:hover{text-decoration:underline}

@media (max-width:620px){
  .ix-row{grid-template-columns:1fr auto;row-gap:6px}
  .ix-row .tag{grid-column:1;grid-row:2;order:3}
  .ix-row .go{grid-column:2;grid-row:1/3}
}

@media (max-width:980px){
  .ix-hero,.app-hero,.feature,.feature.flip{grid-template-columns:1fr;gap:28px}
  .feature.flip .fcopy{order:0}
  .catgrid,.conds,.rail,.flow,.comm-values,.stance,.gem-grid{grid-template-columns:repeat(2,1fr)}
  .flag-slot,.tier-grid,.verdicts{grid-template-columns:1fr}
  .device{max-width:280px}
}
@media (max-width:620px){
  .catgrid,.conds,.rail,.flow,.comm-values,.stance,.gem-grid{grid-template-columns:1fr}
  .cmp table{font-size:13.5px}
  .cmp thead th,.cmp tbody td{padding:12px}
  .cmp tbody td:first-child{width:34%}
}