/* =============================================================================
   Blog: the post list (/blog/) and each post (/blog/<slug>/).
   Loaded after site.css, so it uses the same colour tokens and follows the
   light/dark switch. The blog pages load no JavaScript, like the legal pages.
   ============================================================================= */

.blog-main { padding: 72px 0 120px; }

/* ---------- Post list ---------- */
.blog-head { text-align: center; }
.blog-head h1 { font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.15; letter-spacing: -0.025em; }
.blog-head h1 .muted { color: var(--grey); }
.blog-head p { margin-top: 14px; color: var(--body); font-size: 1.05rem; }

.blog-section { margin-top: 64px; }
.blog-section-title { font-weight: 500; font-size: 1.8rem; letter-spacing: -0.02em; }
.post-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Each post is a card (one link), in the Key features card colours, so the
   picture clearly goes with its title: picture on top, then the date and read time, title, brief and author. */
.post-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--feature-card); border: 1px solid var(--feature-line); border-radius: 22px; padding: 12px;
}
.post-card-img { overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-text { padding: 18px 12px 14px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { margin-top: 8px; font-size: 1.2rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.post-brief { margin-top: 8px; color: var(--body); font-size: 0.95rem; }

/* Featured: the newest post on its own, bigger, picture left, words right. */
.post-card-featured { margin-top: 24px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: center; padding: 14px; }
.post-card-featured .post-card-img { border-radius: 16px; }
.post-card-featured .post-card-text { padding: 24px 40px; }
.post-card-featured h3 { margin-top: 12px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; letter-spacing: -0.02em; }
.post-card-featured .post-brief { margin-top: 14px; font-size: 1.05rem; }

/* Top: "Oct 6, 2026 · 2 min read". Bottom: "Author: Somatics", pushed to
   the foot of the card so the author lines up across a row. */
.post-meta { font-size: 0.88rem; color: var(--body); }
.post-author { margin-top: auto; padding-top: 18px; font-size: 0.88rem; color: var(--body); }
.post-header .post-author { margin-top: 6px; padding-top: 0; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .post-card { transition: border-color 0.25s ease; }
  .post-card:hover { border-color: var(--grey); }
  .post-card-img img { transition: scale 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .post-card:hover .post-card-img img { scale: 1.04; }
  .post-card h3 { transition: color 0.2s ease; }
  .post-card:hover h3 { color: var(--link); }
}

/* ---------- A single post ---------- */
.post-wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--pad); }
.post-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; color: var(--body); text-decoration: none; }
.post-back:hover { color: var(--ink); }
.post-back svg { width: 16px; height: 16px; }
.post-header { max-width: 760px; margin: 28px auto 0; text-align: center; }
.post-header h1 { font-weight: 500; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.15; letter-spacing: -0.025em; }
.post-header .post-meta { margin-top: 18px; }
.post-cover { margin-top: 44px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Desktop: cover as wide as the title area and 2:1, so the first lines of
   the post show on the first screen (Daniel, 21 Oct). Phones keep 16:10. */
@media (min-width: 901px) {
  .post-cover { max-width: 760px; margin-left: auto; margin-right: auto; aspect-ratio: 2 / 1; border-radius: 24px; }
}

/* Reading column: about 68 characters a line. */
.post-body { max-width: 680px; margin: 56px auto 0; font-size: 1.08rem; line-height: 1.75; color: var(--ink-soft); }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { margin-top: 2em; font-size: 1.55rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.post-body h2 + * { margin-top: 0.6em; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li + li { margin-top: 0.4em; }
.post-body li::marker { color: var(--grey); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body a { color: var(--link); }
.post-body figure { margin-top: 2em; margin-bottom: 2em; text-align: center; }
.post-body figure img { margin: 0 auto; border-radius: 14px; box-shadow: 0 0 0 var(--pop-ring-w) var(--pop-ring), var(--pop-shadow); }
.post-body figcaption { margin-top: 14px; font-size: 0.9rem; color: var(--body); }
/* Callout tying the topic to the app. */
.post-note { padding: 22px 26px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); font-size: 1rem; }
/* "In Somatics" label with the app icon in front, so the callout catches
   the eye. Same file and size as the nav logo, shown whole (no cropping). */
.post-note strong { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.post-note strong::before {
  content: ""; flex: none; width: 30px; height: 30px;
  background: url("/assets/somi-mark.png") center / contain no-repeat;
}
.post-disclaimer { max-width: 680px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--body); }

/* Closing download panel, a smaller copy of the homepage's: words left, two
   phones rising out of the bottom edge on the right (the panel clips them).
   Workout tracker behind, nutrition screen in front. */
.post-cta {
  margin-top: 80px; position: relative; overflow: hidden; border-radius: 32px;
  background: var(--blue); color: #ffffff;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 400px; padding: 0 56px;
}
.post-cta-copy { padding: 64px 0; }
.post-cta h2 { font-weight: 500; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; }
.post-cta .store-badges { margin-top: 28px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.post-cta .store-badge { display: inline-flex; padding: 2px; }
.post-cta .store-badge img { height: 48px; width: auto; }
.post-cta-phones { position: relative; align-self: stretch; }
.post-cta-phones img { position: absolute; filter: drop-shadow(0 30px 50px rgba(2, 7, 17, 0.30)); }
.post-cta-front { width: 240px; left: calc(50% - 30px); top: 52px; z-index: 2; }
.post-cta-back { width: 205px; left: calc(50% - 190px); top: 104px; z-index: 1; }

.post-related { margin-top: 96px; }
.post-related > h2 { font-weight: 500; font-size: 1.8rem; letter-spacing: -0.02em; }
.post-related .post-grid { margin-top: 24px; grid-template-columns: 1fr 1fr; }

@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr; }
  .post-card-featured { grid-template-columns: 1fr; }
  .post-card-featured .post-card-text { padding: 18px 12px 14px; }
  .post-body { font-size: 1.02rem; }
  .post-cta { grid-template-columns: 1fr; text-align: center; padding: 0 22px; min-height: 0; }
  .post-cta-copy { padding: 48px 0 32px; }
  .post-cta .store-badges { justify-content: center; gap: 10px; flex-wrap: nowrap; }
  .post-cta .store-badge img { height: 40px; }
  /* Both phones on mobile too, smaller: the workout tracker behind on the
     left, the nutrition screen in front, rising out of the bottom edge. */
  .post-cta-phones { height: 280px; }
  .post-cta-front { width: 180px; left: calc(50% - 45px); top: 0; }
  .post-cta-back { width: 152px; left: calc(50% - 140px); top: 44px; }
}

/* In-post pictures: two widths, so app crops show at a readable size. */
.post-body .fig-s { width: 420px; }
.post-body .fig-m { width: 540px; }

/* Arrows under the Blogs cards: 12 posts a page. Same round arrows as the
   homepage reviews row; the forward one is blue. Dimmed when there is no
   page that way. */
.pager { margin-top: 44px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.pager-arrow {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); text-decoration: none;
}
.pager-arrow svg { width: 18px; height: 18px; }
.pager-next { background: var(--blue); border-color: var(--blue); color: #ffffff; }
.pager-arrow.is-off { opacity: 0.4; }
a.pager-arrow:hover { border-color: var(--grey); }
a.pager-next:hover { border-color: var(--blue); filter: brightness(1.05); }
.pager-count { font-size: 0.92rem; color: var(--body); min-width: 92px; text-align: center; }

@media (max-width: 349px) {
  .post-cta .store-badges { flex-wrap: wrap; }
}

/* Full posts: opening paragraph, sub-questions, tables and the source list. */
.post-body .post-lede { font-size: 1.2rem; line-height: 1.65; color: var(--ink); }
.post-body h3 { margin-top: 1.6em; font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.post-body h3 + p { margin-top: 0.4em; }
.post-table { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.post-table table { width: 100%; border-collapse: collapse; font-size: 0.94rem; line-height: 1.5; }
.post-table th, .post-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.post-table thead th { background: var(--card); color: var(--ink); font-weight: 500; }
.post-table tbody tr:last-child td { border-bottom: 0; }
.post-table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.post-body .post-sources { list-style: none; padding: 0; font-size: 0.88rem; line-height: 1.6; }
.post-body .post-sources li + li { margin-top: 0.6em; }
.post-body .post-sources a { color: var(--body); }
.post-body .post-sources a:hover { color: var(--link); }

/* Phones: the Blogs list and the related posts under each article become
   compact rows (Daniel, 20 Oct), the same look as the homepage's Latest posts
   on mobile: a small square picture on the left, date and read time, then the
   title. The summary and author are hidden to keep each row short (about 6
   posts a screen instead of 1.5). The Featured card keeps its full size.
   Previous version: ~/sfn-dev/before-blog-mobile-rows/. */
@media (max-width: 900px) {
  .blog-section .post-grid, .post-related .post-grid { margin-top: 20px; gap: 12px; }
  .post-related .post-grid { grid-template-columns: 1fr; }
  .blog-section .post-grid .post-card, .post-related .post-card { flex-direction: row; align-items: center; gap: 14px; padding: 10px; border-radius: 18px; }
  .blog-section .post-grid .post-card-img, .post-related .post-card-img { flex: none; width: 96px; aspect-ratio: 1 / 1; border-radius: 12px; }
  .blog-section .post-grid .post-card-text, .post-related .post-card-text { padding: 0 4px 0 0; }
  .blog-section .post-grid .post-card h3, .post-related .post-card h3 { margin-top: 4px; font-size: 1rem; line-height: 1.3; }
  .blog-section .post-grid .post-meta, .post-related .post-meta { font-size: 0.8rem; }
  .blog-section .post-grid .post-brief, .blog-section .post-grid .post-author,
  .post-related .post-brief, .post-related .post-author { display: none; }
}

/* Phones: every table in a post becomes a stack of small cards, one per row
   (Daniel, 20 Oct), so nothing runs off the screen or gets squeezed. The
   first cell is the card's bold heading; every other cell shows its column
   name in front ("Serving: 4 oz"). make_blog.py copies the column names onto
   the cells (data-label) for every post automatically, so new posts get this
   too. The header row stays readable to screen readers but is not shown.
   Desktop keeps the normal grid. Previous version:
   ~/sfn-dev/before-blog-mobile-rows/blog-before-table-stack.css. */
/* (Phones: blog tables now stay real tables too, Daniel, 21 Oct. See "Tables on phones" at the end of this file.) */

/* "Try Somatics free" button at the end of every "In Somatics" box (added by
   make_blog.py, Daniel, 20 Oct). Jumps to the download panel at the bottom
   of the post for now; it will point at the stores once the links exist.
   White text on the blue, like every other blue element on the site (Daniel). */
.post-note .post-note-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 9px 16px; border-radius: 999px; background: var(--blue); color: #ffffff;
  font-size: 0.92rem; font-weight: 500; text-decoration: none;
}
.post-note .post-note-cta svg { width: 16px; height: 16px; }
.post-note .post-note-cta:hover { filter: brightness(1.06); }
.post-cta { scroll-margin-top: 90px; }

/* ---------- Macro calculator (/macro-calculator/, Daniel, 20 Oct) ----------
   Form on the left and results on the right, both in the Key features card
   colours (they follow the light/dark switch), stacked on phones. Macro colours match
   the app's own bars (protein orange, carbs green, fat purple). */
.calc { max-width: 1040px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.calc-form { background: var(--feature-card); border: 1px solid var(--feature-line); border-radius: 22px; padding: 28px; display: grid; gap: 20px; }
.calc-seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-seg legend, .calc-field > span:first-child { display: block; font-size: 0.88rem; color: var(--body); margin-bottom: 8px; }
/* Choice rows (Units, Sex, Goal) work like a slider: one blue block sits
   behind the chosen option and slides over when another is tapped, or can
   be dragged and snaps to the nearest option (macro-calculator.js). The
   block's position comes from which radio button is checked (--i), so it
   works without the script too. Up and down scrolling on phones is left
   alone (touch-action: pan-y). */
.calc-pills {
  --i: 0; position: relative; display: flex; padding: 4px; touch-action: pan-y;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
}
.calc-pills:has(label:nth-of-type(2) input:checked) { --i: 1; }
.calc-pills:has(label:nth-of-type(3) input:checked) { --i: 2; }
.calc-pills:has(label:nth-of-type(4) input:checked) { --i: 3; }
.calc-pills:has(label:nth-of-type(5) input:checked) { --i: 4; }
/* The blue block is a little bigger than the row (Daniel): it sticks out
   3px past the row on every side, like a raised button. It is 6px wider
   than one option, so each step along is its width minus those 6px. */
.calc-thumb {
  position: absolute; top: -3px; bottom: -3px; left: 1px; width: calc((100% - 8px) / var(--n) + 6px);
  background: var(--blue); border-radius: 13px; box-shadow: 0 2px 6px rgba(5, 10, 18, 0.18);
  transform: translateX(calc(var(--i) * (100% - 6px)));
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.calc-pills.is-dragging .calc-thumb { transition: none; }
.calc-pills label { flex: 1; position: relative; z-index: 1; }
.calc-pills input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc-pills span { display: block; text-align: center; padding: 7px 8px; border-radius: 10px; font-size: 0.92rem; color: var(--ink-soft); transition: color 0.25s ease, transform 0.25s ease; user-select: none; -webkit-user-select: none; }
/* The option under the blue block is magnified: the chosen one normally,
   and while dragging, whichever one the block is over (.is-near). */
.calc-pills:not(.is-dragging) input:checked + span,
.calc-pills.is-dragging label.is-near span { color: #ffffff; font-weight: 600; transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .calc-thumb { transition: none; } }
.calc-pills input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.calc-row { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 12px; }
.calc-field { display: block; min-width: 0; }
.calc-field input, .calc-field select {
  width: 100%; height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 1rem;
}
.calc-field select { padding-right: 8px; }
.calc-unit, .calc-pair label { position: relative; display: block; }
.calc-unit i, .calc-pair i { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 0.85rem; color: var(--body); pointer-events: none; }
.calc-unit input, .calc-pair input { padding-right: 34px; }
.calc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-metric { display: none; }
.calc-form.is-metric .calc-us { display: none; }
.calc-form.is-metric .calc-metric { display: block; }
.calc-private { font-size: 0.85rem; color: var(--body); }
/* The results panel follows the light/dark switch like the rest of the
   site, but the macro card inside it always uses the app's dark look,
   because the app itself only has dark mode for now (Daniel, 20 Oct). */
.calc-result { background: var(--feature-card); color: var(--ink); border: 1px solid var(--feature-line); border-radius: 22px; padding: 28px; position: sticky; top: 90px; }
.calc-result h2 { font-weight: 500; font-size: 1.3rem; }
.calc-note { margin-top: 6px; font-size: 0.92rem; color: var(--body); }
.calc-note:empty { display: none; }
.calc-numbers { transition: opacity 0.3s ease; }
.calc-result:not(.is-ready) .calc-numbers { opacity: 0.3; }
/* Results styled after the app's calories card: a dark grey card, each line
   with its name on the left and target on the right, and a rounded bar
   underneath in the app's colours. The bars fill from empty, one after
   another, when the numbers first appear (.is-filled from the script). */
.calc-card { margin-top: 18px; background: #1f222a; border-radius: 18px; padding: 18px 18px 20px; display: grid; gap: 16px; }
/* Dark mode: one step lighter than the charcoal panel around it, so the card stands out (21 Oct). */
@media not all and (prefers-color-scheme: dark) { :root:has(#theme:checked) .calc-card { background: #2b2e34; } }
@media (prefers-color-scheme: dark) { :root:not(:has(#theme:checked)) .calc-card { background: #2b2e34; } }
.calc-line-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-line-head span { font-size: 1.05rem; color: #ffffff; }
.calc-line-head strong { font-weight: 400; font-size: 0.95rem; color: #9ea3ad; white-space: nowrap; }
.calc-line-head b { font-weight: 500; font-size: 1.25rem; color: #ffffff; }
.l-cal .calc-line-head span { font-size: 1.3rem; font-weight: 500; }
.l-cal .calc-line-head b { font-size: 1.6rem; }
.calc-track { margin-top: 8px; height: 12px; border-radius: 99px; background: #34363d; overflow: hidden; }
.l-cal .calc-track { height: 16px; }
.calc-track i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.l-cal .calc-track i { background: #62bdf6; }
.l-carbs .calc-track i { background: #6cb35c; }
.l-protein .calc-track i { background: #e0893a; }
.l-fat .calc-track i { background: #8b78e6; }
.is-filled .calc-track i { width: calc(var(--share, 1) * 100%); }
.no-anim .calc-track i { transition: none; }
.l-carbs .calc-track i { transition-delay: 0.12s; }
.l-protein .calc-track i { transition-delay: 0.24s; }
.l-fat .calc-track i { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) { .calc-track i { transition: none; } }
.calc-steps { margin-top: 18px; display: grid; gap: 8px; font-size: 0.88rem; }
.calc-steps div { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--feature-line); padding-top: 8px; }
.calc-steps dt { color: var(--body); }
.calc-steps dd { margin: 0; text-align: right; color: var(--ink); }
/* Download card under the results: the site blue with white text like the
   rest of the site's blue panels (Daniel), Somi eating at a table
   (somi-eat from SOMI.zip, white background cut away), store badges below. */
.calc-get {
  margin-top: 20px; background: var(--blue); color: #ffffff; border-radius: 18px; padding: 20px;
  display: grid; grid-template-columns: 104px 1fr; column-gap: 16px; align-items: center;
}
.calc-get-somi { width: 104px; height: auto; grid-row: 1; }
.calc-get-title { font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.calc-get-text { margin-top: 6px; font-size: 0.92rem; line-height: 1.5; }
.calc-get .store-badges { grid-column: 1 / -1; margin-top: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.calc-get .store-badge { display: inline-flex; }
.calc-get .store-badge img { height: 44px; width: auto; }
.calc-about { margin-top: 72px; }
@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; margin-top: 32px; }
  .calc-form, .calc-result { padding: 20px; }
  .calc-result { position: static; }
  .calc-row { grid-template-columns: 1fr 1fr; }
  .calc-row > .calc-field:first-child { grid-column: 1 / -1; }
  .calc-pills span { padding: 7px 4px; font-size: 0.88rem; }
  .calc-field select { font-size: 0.95rem; }
  /* Store badges side by side, never stacked (Daniel). */
  .calc-get { padding: 18px; grid-template-columns: 76px 1fr; column-gap: 12px; }
  .calc-get-somi { width: 76px; }
  .calc-get-title { font-size: 1.08rem; }
  .calc-get .store-badges { flex-wrap: nowrap; gap: 8px; }
  .calc-get .store-badge img { height: 38px; }
  .calc-steps div { flex-direction: column; gap: 2px; }
  .calc-steps dd { text-align: left; }
  .calc-about { margin-top: 48px; }
}

/* ---------- Load-in and scroll reveal (Daniel, 20 Oct) ----------
   The same entrance as the homepage, so every page feels the same: the nav
   slides down, the headline comes into focus, the line under it fades up,
   then the main piece (Featured post, cover photo, or the calculator form
   and results) rises in. Same easing and timing as home.css. Below the
   first screen, reveal.js fades cards and panels up as they scroll in.
   Nothing moves for anyone who asks for less motion. */
@keyframes enter-down  { from { opacity: 0; translate: 0 -16px; } to { opacity: 1; translate: 0 0; } }
@keyframes enter-up    { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes enter-focus { from { opacity: 0; translate: 0 18px; filter: blur(10px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes enter-glide { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
.blog-page .nav { animation: enter-down 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.blog-head h1, .post-header h1 { animation: enter-focus 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.blog-head p, .post-header .post-meta, .post-header .post-author, .post-back { animation: enter-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.blog-section-title { animation: enter-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
.post-card-featured, .post-cover, .calc-form { animation: enter-glide 1.1s cubic-bezier(0.16, 0.8, 0.2, 1) 0.5s both; }
.calc-result { animation: enter-glide 1.1s cubic-bezier(0.16, 0.8, 0.2, 1) 0.62s both; }
.post-body { animation: enter-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both; }
.reveal { opacity: 0; translate: 0 16px; }
.reveal.is-in { opacity: 1; translate: 0 0; transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--reveal-delay, 0s); }
.reveal-box > * { opacity: 0; translate: 0 16px; }
.reveal-box.is-in > * { opacity: 1; translate: 0 0; transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--reveal-delay, 0s); }
@media (prefers-reduced-motion: reduce) {
  .blog-page .nav, .blog-head h1, .post-header h1, .blog-head p, .post-header .post-meta, .post-header .post-author, .post-back,
  .blog-section-title, .post-card-featured, .post-cover, .calc-form, .calc-result, .post-body { animation: none; }
}


/* ---------- Free tools (Daniel, 20 Oct) ----------
   TDEE, protein and weight loss calculators reuse the macro calculator's
   styles above. Extra lines in the TDEE card (.l-sub) are a step smaller
   than the main line, and their bars show each target as a share of the
   biggest one (--share, set by tools.js). */
.calc-line.l-sub .calc-line-head span { font-size: 1.02rem; font-weight: 400; }
.calc-line.l-sub .calc-line-head b { font-size: 1.2rem; }
.calc-line.l-sub .calc-track { height: 12px; }
.calc-steps dd a { color: var(--link); }

/* Tools page (/tools/): one card per tool, icon on the left. */
.tool-grid { max-width: 880px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; animation: enter-glide 1.1s cubic-bezier(0.16, 0.8, 0.2, 1) 0.5s both; }
.tool-card {
  display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 22px; text-decoration: none; color: var(--ink);
  background: var(--feature-card); border: 1px solid var(--feature-line); transition: border-color 0.25s ease;
}
.tool-card:hover { border-color: var(--grey); }
.tool-card strong { display: block; font-weight: 500; font-size: 1.05rem; }
.tool-card small { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--body); }
.tool-card .drop-ico { flex: none; }
/* Resources page cards: the nav's emoji tile at the same size as the example photos (56px). */
.tool-card .drop-emoji { width: 56px; height: 56px; border-radius: 14px; font-size: 28px; background: var(--bg); }
/* Example cards (meal plans, workout routines): a small photo instead of the icon. */
.tool-thumb { flex: none; display: block; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; background: var(--feature-line); }

/* Glossary (/glossary/): letter links, then each letter's terms. */
.gloss-jump { max-width: 680px; margin: 36px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; animation: enter-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
.gloss-jump a { min-width: 34px; padding: 6px 8px; border-radius: 10px; text-align: center; text-decoration: none; font-size: 0.92rem; color: var(--ink-soft); background: var(--feature-card); }
.gloss-jump a:hover { color: var(--ink); }
.gloss h2 { scroll-margin-top: 90px; }
.gloss-list { display: grid; gap: 14px; }
.gloss-item { scroll-margin-top: 90px; }
.gloss-item dt { font-weight: 600; color: var(--ink); }
.gloss-item dd { margin: 2px 0 0; }
@media (max-width: 900px) {
  .tool-grid { grid-template-columns: 1fr; margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) { .tool-grid, .gloss-jump { animation: none; } }

/* TDEE & Macro Calculator: the Macros / TDEE slider at the top switches
   which card shows. TDEE hides the goal and the macro card. */
.calc:not(.is-tdee) .for-tdee, .calc:not(.is-bmr) .for-bmr,
.calc.is-tdee .for-macros, .calc.is-bmr .for-macros,
.calc.is-tdee .calc-goal, .calc.is-bmr .calc-goal,
.calc.is-bmr .calc-activity, .calc.is-bmr .not-bmr { display: none; }
@media (max-width: 900px) {
  /* TDEE card on phones: the labels are long, so the number sits on its own
     line under the label instead of squeezing the label onto two lines. */
  .for-tdee .calc-line-head, .for-bmr .calc-line-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Short "suggestion, not medical advice" note right under each calculator's
   results (Daniel, 20 Oct), so it's seen where the numbers are. A thin line
   above keeps it apart from the result lines. */
.calc-disclaimer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--feature-line); font-size: 0.82rem; line-height: 1.5; color: var(--body); }

/* Light/dark circle reveal (theme.js), same as the homepage: turn off the
   browser's default cross-fade so only the circle shows. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Fitness Dictionary letter tabs and search (dictionary.js). The search box
   and letter bar sit at the top of the page (not pinned while scrolling,
   Daniel); every letter shows at once, wrapping onto a few rows on phones.
   The chosen letter is blue with white text. */
.gloss-tools { max-width: 760px; margin: 36px auto 0; animation: enter-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
.gloss-tools .gloss-jump { margin: 10px 0 0; max-width: none; animation: none; }
.gloss-search { position: relative; display: block; }
.gloss-search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--body); pointer-events: none; }
.gloss-search input { width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: 12px; border: 1px solid var(--feature-line); background: var(--feature-card); color: var(--ink); font: inherit; font-size: 1rem; }
.gloss-jump a.is-on { background: var(--blue); color: #ffffff; font-weight: 600; }
.gloss-all { padding-left: 12px !important; padding-right: 12px !important; }
.gloss-sec[hidden], .gloss-item[hidden] { display: none; }
.gloss.is-switching .gloss-sec:not([hidden]) { animation: enter-up 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.gloss-empty { color: var(--body); text-align: center; }
@media (max-width: 900px) {
  .gloss-tools { margin-top: 28px; }
  /* Every letter visible at once (Daniel): the row wraps, with slightly
     smaller buttons so it takes three short rows on a phone. */
  .gloss-tools .gloss-jump { gap: 5px; }
  .gloss-tools .gloss-jump a { min-width: 30px; padding: 5px 6px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) { .gloss.is-switching .gloss-sec:not([hidden]) { animation: none; } }

/* ---------- Food Directory (Daniel, 20 Oct) ----------
   Search and sort buttons above a table of foods; the list's main number
   (protein, fiber...) is bold. On phones each food is a small card with its
   numbers in a row. Resources page section headings too. */
.food-intro { margin-top: 32px; }
.food-tools { max-width: 880px; margin: 28px auto 0; display: grid; gap: 12px; }
.food-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.food-sort span { font-size: 0.88rem; color: var(--body); margin-right: 4px; }
.food-sort-btn { font: inherit; font-size: 0.88rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--feature-line); background: var(--feature-card); color: var(--ink-soft); cursor: pointer; }
.food-sort-btn.is-on { background: var(--blue); border-color: var(--blue); color: #ffffff; font-weight: 600; }
.food-list { max-width: 880px; margin: 8px auto 0; }
.food-table td:first-child small { display: block; margin-top: 2px; font-size: 0.82rem; font-weight: 400; color: var(--body); white-space: normal; }
.food-table td.is-main { font-weight: 700; color: var(--ink); }
.food-table tr[hidden] { display: none; }
.food-source { font-size: 0.82rem; color: var(--body); }
.food-source a { color: var(--body); }
.food-source-hub { max-width: 880px; margin: 20px auto 0; text-align: center; }
.food-get { max-width: 680px; margin: 40px auto 0; }
/* After a row of cards (routine pages' "The workouts"), more room before the Somi box. */
.tool-grid + .food-get { margin-top: 64px; }
.food-more a + a::before { content: " · "; color: var(--body); }
.res-head { max-width: 880px; margin: 48px auto 0; font-weight: 500; font-size: 1.4rem; letter-spacing: -0.01em; }
.res-head + .tool-grid { margin-top: 16px; }
/* Small label above a group of cards inside a section (workout hub). */
.res-sub { max-width: 880px; margin: 28px auto 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); }
.res-head + .res-sub { margin-top: 14px; }
.res-sub + .tool-grid { margin-top: 10px; }
/* "More meal plan examples" at the foot of each plan: the hub's groups as
   small buttons, with the page you're on highlighted. */
.more-ex h2 { margin-top: 1.6em; }
.more-ex-group { margin-top: 18px; }
.post-body .more-ex-label { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); }
.more-ex-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.post-body .more-ex-chips a, .more-ex-chips span {
  display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 0.92rem; line-height: 1.3; text-decoration: none;
  color: var(--ink); background: var(--feature-card); border: 1px solid var(--feature-line); transition: border-color 0.25s ease;
}
.post-body .more-ex-chips a:hover { border-color: var(--blue); }
.more-ex-chips span[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
@media (max-width: 900px) {
  .res-head { margin-top: 36px; }
}

/* ---------- Meal plans (Daniel, 20 Oct) ----------
   Intro beside the day's totals (the app's dark macro card, bars full),
   then one table per meal with its total in the heading. */
.plan-top { max-width: 880px; margin: 32px auto 0; display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.plan-top .food-intro { margin-top: 0; }
.plan-day { background: var(--feature-card); border: 1px solid var(--feature-line); border-radius: 22px; padding: 18px; }
.plan-day-title { font-weight: 500; }
.plan-day .calc-card { margin-top: 12px; }
.plan-day-fiber { margin-top: 10px; font-size: 0.9rem; color: var(--body); }
.plan-meals { max-width: 880px; margin: 24px auto 0; }
.plan-meal { margin-top: 28px; }
.plan-meal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.plan-meal-head h2 { font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; }
.plan-meal-head span { font-size: 0.92rem; color: var(--body); }
.plan-meal .post-table { margin-top: 10px; }
.plan-source { max-width: 880px; margin: 16px auto 0; }
.tool-card.is-soon { opacity: 0.75; cursor: default; }
.tool-card.is-soon:hover { border-color: var(--feature-line); }
.tool-card em { font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--body); margin-left: 6px; }
@media (max-width: 900px) {
  .plan-top { grid-template-columns: 1fr; gap: 20px; }
  .plan-meal-head h2 { font-size: 1.2rem; }
}

/* ---------- Workout routine examples (Daniel, 20 Oct) ----------
   Same table and card styles as the Food Directory; under each exercise,
   the muscles it works and a swap. */
.wo-table td:first-child small.wo-swap { font-style: italic; }
.wo-week td:first-child { width: 140px; }
.wo-week td a { font-weight: 500; }
.wo-intro, .wo-list { max-width: 880px; margin-left: auto; margin-right: auto; }
.wo-week td small { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--body); }
@media (max-width: 900px) {
  .wo-week td:first-child { width: 96px; }
}

/* App store badges at the end of every "In Somatics" box (replaced the
   "Try Somatics free" button, Daniel, 20 Oct). Side by side, never stacked. */
.post-note .post-note-badges { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin-top: 14px; }
.post-note .post-note-badges .store-badge { display: inline-flex; }
.post-note .post-note-badges img { height: 40px; width: auto; }
@media (max-width: 380px) { .post-note .post-note-badges img { height: 36px; } }

/* ---------- Press feedback and tap sizes (Apple design review, 21 Oct) ----------
   Cards, sort buttons, "More" buttons and dictionary letters give way a
   little the moment a finger or mouse presses them, and spring back on
   release. The back link's arrow nudges back toward where it goes (the link
   itself keeps its load-in animation). With reduced motion, a press dims
   instead of moving. nav.js adds the empty touch listener iPhone Safari
   needs before it shows :active at all. */
.tool-card, .food-sort-btn, .post-body .more-ex-chips a, .gloss-jump a, .post-back { -webkit-tap-highlight-color: transparent; }
.tool-card { transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.food-sort-btn, .post-body .more-ex-chips a, .gloss-jump a { transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.post-back svg { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
a.tool-card:active { transform: scale(0.97); transition-duration: 0.25s, 0.1s; }
.food-sort-btn:active, .post-body .more-ex-chips a:active, .gloss-jump a:active { transform: scale(0.93); transition-duration: 0.25s, 0.1s; }
.post-back:active { color: var(--ink); }
.post-back:active svg { transform: translateX(-4px); transition-duration: 0.1s; }
@media (prefers-reduced-motion: reduce) {
  a.tool-card:active, .food-sort-btn:active, .post-body .more-ex-chips a:active, .gloss-jump a:active, .post-back:active svg { transform: none; opacity: 0.7; }
}

/* Tap sizes on touch screens: at least 44 x 44 points, Apple's minimum. */
@media (max-width: 900px), (pointer: coarse) {
  .gloss-jump a, .gloss-tools .gloss-jump a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  /* Letters: 42 wide (still 44 tall) so 7 fit per row on a phone, 4 even rows instead of a lone Z. */
  .gloss-tools .gloss-jump a { min-width: 42px; }
  .food-sort-btn { min-height: 44px; }
  .post-body .more-ex-chips a, .more-ex-chips span { display: inline-flex; align-items: center; min-height: 44px; }
  /* The back link looks the same, but its tap area reaches up into the empty
     space above it (not down onto the title), for a 44px-tall target. */
  .post-back { padding: 18px 0 3px; margin: -18px 0 -3px; }
  /* Each slider option's tap area fills the full height of its track. */
  .calc-pills label::after { content: ""; position: absolute; inset: -5px 0; }
}

/* ---------- Nutrition Label Guide (Daniel, 21 Oct) ----------
   An example Nutrition Facts label drawn in HTML, black on white in both
   themes like a real one. With label.js (.is-live), - / + change how much
   you eat. On desktop (.is-tap) clicking a part of the label shows its note
   in the card beside it. Phones, and pages without the script, show the
   plain list of notes under the label. */
.nl-guide { max-width: 880px; margin: 32px auto 0; display: grid; grid-template-columns: 330px 1fr; column-gap: 48px; align-items: start; }
.nl-left { grid-column: 1; grid-row: 1 / span 2; }
.nl-card, .nl-notes { grid-column: 2; }
.nl-fig { margin: 0; }
.nl-fig figcaption { margin-top: 10px; font-size: 0.82rem; line-height: 1.5; color: var(--body); }
.nl-fig figcaption a { color: var(--body); }
.nl { background: #ffffff; color: #000000; border: 1px solid #000000; padding: 6px 8px 8px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.3; }
.nl p { margin: 0; }
.nl-title { font-weight: 900; font-size: 31px; line-height: 1.05; letter-spacing: -0.01em; padding-bottom: 3px; border-bottom: 1px solid #000000; }
.nl-servings { padding-top: 3px; font-size: 14px; }
.nl-size { display: flex; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 15px; }
.nl-thick { height: 10px; background: #000000; margin: 3px 0 2px; }
.nl-mid { height: 5px; background: #000000; margin: 2px 0; }
.nl-small { font-weight: 800; font-size: 11px; }
.nl-cal { display: flex; justify-content: space-between; align-items: flex-end; font-weight: 900; }
.nl-cal b:first-child { font-size: 25px; line-height: 1.1; }
.nl-cal b:last-child { font-size: 32px; line-height: 1; }
.nl-dvhead { text-align: right; font-weight: 800; font-size: 11px; padding: 4px 0 3px; }
.nl-row { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #000000; padding: 2px 0; }
.nl-row b { font-weight: 800; }
.nl-row.in1 { margin-left: 14px; }
.nl-row.in2 { margin-left: 28px; }
.nl-row.nl-first { border-top: 0; }
.nl-foot { font-size: 9.5px; line-height: 1.35; padding-top: 3px; }
.nl [data-amt], .nl [data-dv] { border-radius: 3px; }

/* Tappable parts: a soft blue the moment you press, a stronger one once chosen. */
.is-tap .nl-zone { margin: 0 -8px; padding: 0 8px; cursor: pointer; transition: background-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.is-tap .nl-zone:active { background: rgba(53, 194, 253, 0.16); transition-duration: 0s; }
.is-tap .nl-zone.is-on { background: rgba(53, 194, 253, 0.28); }
.is-tap .nl-zone:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
@media (hover: hover) { .is-tap .nl-zone:not(.is-on):hover { background: rgba(53, 194, 253, 0.1); } }

/* How many servings: - / + around the amount. */
.nl-amount { margin-bottom: 14px; }
.nl-amount-title { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); }
.nl-stepper { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 18px; background: var(--feature-card); border: 1px solid var(--feature-line); }
.nl-step { flex: none; width: 44px; height: 44px; border-radius: 13px; border: 0; background: var(--blue); color: #ffffff; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease; }
.nl-step:active { transform: scale(0.92); transition-duration: 0.1s; }
.nl-step:disabled { opacity: 0.35; cursor: default; transform: none; }
.nl-amount-val { flex: 1; min-width: 0; text-align: center; }
.nl-amount-val b { display: block; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.nl-amount-val small { display: block; font-size: 0.82rem; color: var(--body); }

/* The note card. */
.nl-card { position: sticky; top: 96px; padding: 18px 20px 20px; border-radius: 22px; background: var(--feature-card); border: 1px solid var(--feature-line); }
.nl-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nl-card-head { min-width: 0; }
.nl-card-body { margin-top: 8px; }
.nl-card-count { margin: 0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); }
.nl-card-nav { display: flex; gap: 6px; }
.nl-nav { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--feature-line); background: var(--bg); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nl-nav svg { width: 18px; height: 18px; }
.nl-nav:active { transform: scale(0.92); transition-duration: 0.1s; }
.nl-card-title { margin: 2px 0 0; font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.nl-card-text { margin: 0; color: var(--body); line-height: 1.6; }
.nl-card-text a { color: var(--link); }
.is-tap .nl-notes { display: none; }
.nl-hint { margin: 0 0 10px; font-size: 0.88rem; color: var(--body); }
.nl-notes { list-style: none; margin: 0; padding: 0; }
.nl-notes li + li { margin-top: 22px; }
.post-body.nl-notes h3 { margin: 0 0 4px; font-size: 1.1rem; }
.post-body.nl-notes p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .nl-step:active, .nl-nav:active { transform: none; opacity: 0.7; }
}

@media (max-width: 900px) {
  .nl-guide { grid-template-columns: 1fr; }
  .nl-left, .nl-card, .nl-notes { grid-column: 1; grid-row: auto; }
  .nl-left { width: 100%; max-width: 360px; justify-self: center; }
  .nl-notes { margin-top: 28px; }
}

/* ---------- Tables on phones (Daniel, 21 Oct) ----------
   Every table (blog posts, meal plans, food lists, workout examples) keeps
   the desktop table on phones: the same columns, tighter, with smaller text
   so every column fits the screen. Number columns in food and meal tables
   stay on one line. */
@media (max-width: 900px) {
  .post-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1.2em 0; }
  .post-table table { display: table; width: 100%; font-size: 0.8rem; line-height: 1.35; }
  .post-table thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .post-table tbody { display: table-row-group; width: auto; }
  .post-table tr { display: table-row; width: auto; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .post-table th, .post-table td { display: table-cell; width: auto; margin: 0; padding: 8px 5px; border-bottom: 1px solid var(--line); font-size: 0.8rem; }
  .post-table thead th { font-size: 0.7rem; line-height: 1.25; }
  .post-table th:first-child, .post-table td:first-child { padding-left: 10px; }
  .post-table th:last-child, .post-table td:last-child { padding-right: 10px; }
  .post-table tbody tr:last-child td { border-bottom: 0; }
  .post-table td:first-child { white-space: normal; font-weight: 600; padding-bottom: 8px; }
  .post-table td[data-label]::before, .post-table td.num[data-label]::before { content: none; }
  .post-table td:empty { display: table-cell; }
  .post-table.food-table td:not(:first-child) { white-space: nowrap; }
  .post-table.food-table.wo-table td:not(:first-child), .post-table.food-table.wo-extra td:not(:first-child), .post-table.food-table.wo-week td:not(:first-child) { white-space: normal; }
  /* Workout tables: keep "10 to 12" reps and "1 to 2" RIR on one line; rest can wrap. */
  .post-table.food-table.wo-table td:nth-child(3), .post-table.food-table.wo-table td:nth-child(5) { white-space: nowrap; }
  .food-table td:first-child small { font-size: 0.72rem; }
}

/* ---------- Routine finder (Daniel, 21 Oct) ----------
   Styled like the calculators: the .calc grid with the choices on the left
   (.calc-form, sliding .calc-pills) and the closest example on the right
   (.calc-result) in the app's dark card. Hidden without JavaScript. */
.finder { margin-top: 40px; scroll-margin-top: 90px; }
.finder > h2 { margin: 0; font-weight: 500; font-size: 1.6rem; letter-spacing: -0.01em; text-align: center; }
.finder-sub { margin: 8px auto 0; max-width: 560px; text-align: center; color: var(--body); }
.finder .calc { margin-top: 28px; }
.finder-pick { display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none; transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.finder-pick img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.finder-pick span { display: grid; gap: 4px; min-width: 0; }
.finder-pick strong { font-weight: 500; font-size: 1.2rem; line-height: 1.25; color: #ffffff; }
.finder-pick small { font-size: 0.9rem; color: #9ea3ad; }
.finder-pick:active { transform: scale(0.97); transition-duration: 0.1s; }
.finder-why { margin-top: 14px; font-size: 0.95rem; line-height: 1.55; color: var(--ink); }
.finder-note { margin-top: 12px; font-size: 0.88rem; line-height: 1.5; color: var(--body); }
.finder-note a { color: var(--link); }
@media (prefers-reduced-motion: reduce) { .finder-pick:active { transform: none; opacity: 0.7; } }
@media (max-width: 900px) { .finder > h2 { font-size: 1.4rem; } .finder .calc { margin-top: 20px; } }

/* Routine Finder page (/routine-finder/, Daniel 21 Oct) and the link card
   to it at the top of /workout-routines/. */
.finder-cta { margin-top: 32px; }
.finder-noscript { text-align: center; margin-top: 32px; }
.finder-noscript a { color: var(--link); }
.calc-about .all-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--blue); color: #ffffff; font-weight: 500; text-decoration: none; transition: transform 0.2s ease; }
.calc-about .all-link:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .calc-about .all-link:active { transform: none; opacity: 0.7; } }

/* Routine pages: the example note sits right under the weekly chart
   (Daniel, 21 Oct), lined up with the table, no rule above it. */
.post-disclaimer.wo-week-note { max-width: 880px; margin: 14px auto 0; padding-top: 0; border-top: 0; }
.more-ex-cta { max-width: 680px; margin: 18px auto 0; }
.calc-about.calc-about-more { margin-top: 8px; }
.more-ex-cta .tool-card:only-child { grid-column: 1 / -1; }

/* Meal Plan Finder controls (Daniel, 21 Oct: same style as the calculators).
   Calories: a slider in the pill-row look, with the number above it.
   Eating style: wrapping pill buttons, blue when picked. */
.calc-field > span.calc-range-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 0; }
.calc-range-head > span { font-size: 0.88rem; color: var(--body); }
.calc-range-out { font-size: 1.35rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-range-field input[type="range"] {
  --fill: 28.6%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 4px 0 0; background: none; cursor: pointer; touch-action: pan-y;
  border: 0; padding: 0; /* drop the text-box outline the slider inherited from .calc-field input (21 Oct) */
}
.calc-range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 12px; border-radius: 99px; border: 1px solid var(--line);
  background: linear-gradient(to right, var(--blue) var(--fill), var(--bg) var(--fill));
}
.calc-range-field input[type="range"]::-moz-range-track { height: 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); }
.calc-range-field input[type="range"]::-moz-range-progress { height: 12px; border-radius: 99px; background: var(--blue); }
.calc-range-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
  background: var(--blue); border: 3px solid #ffffff; box-shadow: 0 2px 6px rgba(5, 10, 18, 0.25);
}
.calc-range-field input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--blue); border: 3px solid #ffffff; box-shadow: 0 2px 6px rgba(5, 10, 18, 0.25); }
.calc-range-field input[type="range"]:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 8px; }
.calc-range-scale { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--body); }
.calc-range-scale i { font-style: normal; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-chips label { position: relative; }
.calc-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc-chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-soft); transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease; }
.calc-chips input:checked + span { background: var(--blue); border-color: var(--blue); color: #ffffff; font-weight: 600; }
.calc-chips input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.calc-chips label:active span { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) { .calc-chips label:active span { transform: none; opacity: 0.7; } }
.meal-finder-form .calc-pills label { display: flex; }
.meal-finder-form .calc-pills label span { display: flex; align-items: center; justify-content: center; width: 100%; line-height: 1.2; }
@media (max-width: 900px) {
  .meal-finder-form .calc-pills label span { font-size: 0.82rem; padding: 6px 2px; }
  .meal-finder-form .calc-pills:not(.is-dragging) input:checked + span { transform: scale(1.04); }
  .calc-chips span { min-height: 44px; }
}

/* Fine print, one size everywhere (Daniel, 21 Oct): USDA and source notes,
   example and medical disclaimers, the notes in calculator and finder
   panels, "nothing leaves your device" lines and sources lists. */
.food-source, .post-disclaimer, .calc-disclaimer, .calc-private, .finder-note, .post-body .post-sources { font-size: 0.85rem; line-height: 1.55; }


/* Finder card at the top of the Meal Plan Examples and Workout Routine
   Examples pages (Daniel, 21 Oct: stand out more): site blue with white
   text, a white emoji tile and an arrow, full width. */
.finder-cta#finder .tool-card {
  grid-column: 1 / -1; position: relative; padding-right: 56px;
  background: var(--blue); border-color: var(--blue); box-shadow: 0 8px 22px rgba(5, 10, 18, 0.14);
}
.finder-cta#finder .tool-card:hover { border-color: var(--blue); filter: brightness(1.05); }
.finder-cta#finder .tool-card strong, .finder-cta#finder .tool-card small { color: #ffffff; }
.finder-cta#finder .tool-card strong { font-weight: 600; }
.finder-cta#finder .tool-card .drop-emoji { background: #ffffff; }
.finder-cta#finder .tool-card::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-top: 2px solid #ffffff; border-right: 2px solid #ffffff; transform: rotate(45deg);
}
.finder-cta#finder .tool-card strong { font-size: 1.35rem; line-height: 1.25; }
.finder-cta#finder .tool-card small { margin-top: 6px; font-size: 0.95rem; }
@media (max-width: 900px) { .finder-cta#finder .tool-card strong { font-size: 1.2rem; } }

/* Faint dividing lines between the sections below the calculators and
   finders (Daniel, 22 Oct): one above each section heading, so the tool,
   "How it works" and "Common questions" read as separate blocks. */
.calc-about { margin-top: 56px; }
.calc-about > h2 { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.calc-about > h2:first-child { margin-top: 0; }
.calc-about.calc-about-more { margin-top: 56px; }
@media (max-width: 720px) {
  .calc-about, .calc-about.calc-about-more { margin-top: 40px; }
  .calc-about > h2 { margin-top: 40px; padding-top: 36px; }
  .calc-about > h2:first-child { margin-top: 0; }
}

/* Fitness Dictionary: a faint line between letters (Daniel, 22 Oct), the
   same line as below the calculators. Only between letters on show, so a
   single letter picked from the A to Z bar gets no stray line on top. */
.gloss-sec:not([hidden]) ~ .gloss-sec:not([hidden]) { margin-top: 36px; border-top: 1px solid var(--line); }
.gloss-sec:not([hidden]) ~ .gloss-sec:not([hidden]) > h2 { margin-top: 32px; }

/* "Written by Somatics · Updated <date>" under the heading of resource pages
   (Daniel, 22 Oct). Added by ~/sfn-dev/tools/seo.py. */
.blog-head .page-byline { margin-top: 10px; font-size: 0.85rem; color: var(--grey); }

/* "More examples like this" photo cards on meal plans (Daniel, 22 Oct): same
   width and spacing as the "Looking for a different example?" cards, so the
   edges line up with the text column. */
.more-like { max-width: 680px; margin: 18px auto 0; }

/* "Coming soon" under every App Store / Google Play badge pair (Daniel,
   26 Oct). Apple and Google forbid changing their badges (no greying out), so
   the badges stay as provided and this plain label sits on its own line
   below them, at least a quarter of the badge height away (Google's clear
   space). AT LAUNCH: delete this block and link the badges. */
.store-badges, .footer-badges, .post-note .post-note-badges { flex-wrap: wrap !important; }
.store-badges::after, .footer-badges::after {
  content: "Coming soon"; flex: 0 0 100%; margin-top: 2px;
  text-align: left; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.01em; color: var(--body);
}
/* Centered wherever the badges themselves are centered. */
.hero-cta .store-badges::after { text-align: center; }
@media (max-width: 900px) {
  .footer-badges::after, .cta-badges .store-badges::after, .post-cta .store-badges::after { text-align: center; }
}
/* White on the site blue (homepage download section, the app boxes, the
   bottom panel). The In Somatics notes are a light card in light mode, so
   they keep the gray label. */
.cta .store-badges::after, .calc-get .store-badges::after, .post-cta .store-badges::after { color: #ffffff; }
/* The homepage download section already says "Coming soon to iPhone, and to
   Android not long after." right under its badges, so no second label there. */
.cta .store-badges::after { content: none; }