/* Luna Calorie public site — shared design system.
   Tokens follow apps/mobile/lib/core/theme/colors.dart (LunaColors): warm paper, forest ink, green accent,
   EB Garamond headlines, Inter UI text, JetBrains Mono numerals. */

@font-face {
  font-family: 'Luna Sans';
  src: url('../fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Luna Sans';
  src: url('../fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Luna Sans';
  src: url('../fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Luna Serif';
  src: url('../fonts/EBGaramond-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Luna Mono';
  src: url('../fonts/JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fbf7f0; /* LunaColors.background */
  --paper-2: #e7f0ee; /* statusBackground */
  --paper-3: #f3eee5; /* cardHigh */
  --card: #fffdfa; /* card */
  --ink: #25382f; /* ink / textPrimary (forest) */
  --ink-2: #3a4d43;
  --muted: #58675f; /* textSecondary */
  --line: #dedbd0; /* divider */
  --line-strong: #c7c9ba; /* outlineVariant */
  --accent: #40764a; /* primary */
  --accent-ink: #31543b; /* primaryDark */
  --accent-soft: #e3eadf; /* sageWash */
  --accent-wash: #edf3e9; /* energyWash */
  --accent-on-dark: #a8cba6;
  --sage: #91a78d; /* success */
  --sage-ink: #4f6b55;
  --sage-soft: #e5efe1; /* selectionWash */
  --gold: #d8a93e; /* protein */
  --carb: #b6543a; /* carb */
  --plum: #8c6480; /* fat */
  --warm: #df785c; /* nutrientAlert — brand heart, used sparingly */
  --warm-soft: #f9e4dc;

  --sans: 'Luna Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Luna Serif', Georgia, 'Times New Roman', serif;
  --mono: 'Luna Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 1px 2px rgb(37 56 47 / 4%), 0 12px 32px -12px rgb(37 56 47 / 14%);
  --shadow-lg: 0 2px 4px rgb(37 56 47 / 4%), 0 30px 60px -24px rgb(37 56 47 / 28%);
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  flex: 1;
}
body.is-locked {
  overflow: hidden;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ol,
ul,
dl,
dd {
  margin: 0;
}
ol,
ul {
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
::selection {
  background: #cfe0c9;
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: none;
}
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
  shape-rendering: crispEdges;
}
.icon--sm {
  width: 18px;
  height: 18px;
}
.icon--lg {
  width: 36px;
  height: 36px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: calc(780px + var(--gutter) * 2);
}

/* ---------- Typography ---------- */
.display,
.h1,
.h2,
.h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.display {
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  line-height: 1.1;
}
.h3 {
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
  line-height: 1.25;
}
.display em,
.h1 em,
.h2 em {
  font-style: italic;
  color: var(--accent-ink);
}
.lead {
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.875rem;
}
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.eyebrow--plain::before {
  display: none;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 1px;
  transition:
    color 0.2s,
    gap 0.25s var(--ease);
}
.text-link:hover {
  color: var(--accent-ink);
  gap: 10px;
}
.prose a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1.5px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px rgb(37 56 47 / 45%);
}
.btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.btn .icon {
  transition: transform 0.25s var(--ease);
}
.btn:hover .icon--arrow {
  transform: translateX(3px);
}
.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
}
.btn--accent:hover {
  --btn-bg: var(--accent-ink);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
  background: rgb(255 255 255 / 55%);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--card);
  box-shadow: none;
}
.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
}
.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #f6f8f3;
  border-color: rgb(255 255 255 / 30%);
}
.btn--outline-light:hover {
  border-color: #f6f8f3;
  box-shadow: none;
}
.btn--sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 0.925rem;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ---------- Pills, chips, badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 255 255 / 70%);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
a.pill:hover {
  border-color: var(--ink);
  background: var(--card);
}
.pill__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sage);
}
.pill__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--sage);
  opacity: 0;
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0% {
    transform: scale(0.6);
    opacity: 0.7;
  }
  80%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper-3);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 500;
}
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--sage-soft);
  color: var(--sage-ink);
}
.tag--warm {
  background: var(--warm-soft);
  color: #9a4630;
}
.tag--muted {
  background: var(--paper-2);
  color: var(--muted);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgb(244 249 248 / 74%);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.3s,
    background-color 0.3s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgb(244 249 248 / 86%);
}
.header-bar {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: 8px;
}
.brand img {
  width: auto;
  height: 40px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.nav a {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-2);
  transition:
    color 0.2s,
    background-color 0.2s;
}
.nav a:hover {
  color: var(--ink);
  background: rgb(37 56 47 / 5%);
}
.nav a[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}
.nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
}
.header-cta {
  flex: none;
}
.menu-btn {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
}
.menu-btn span {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--ink);
  transition:
    transform 0.35s var(--ease),
    top 0.35s var(--ease);
}
.menu-btn span:first-child {
  top: 18px;
}
.menu-btn span:last-child {
  top: 26px;
}
.menu-btn[aria-expanded='true'] span:first-child {
  top: 22px;
  transform: rotate(45deg);
}
.menu-btn[aria-expanded='true'] span:last-child {
  top: 22px;
  transform: rotate(-45deg);
}
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 49;
  overflow-y: auto;
  padding: 12px var(--gutter) 32px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: menu-in 0.35s var(--ease);
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.mobile-menu nav {
  display: grid;
}
.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.1;
}
.mobile-menu nav a small {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
}
.mobile-menu nav a[aria-current='page'] {
  color: var(--accent-ink);
}
.mobile-menu .btn {
  width: 100%;
}
.mobile-menu__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 0.9rem;
  color: var(--muted);
}
.mobile-menu__meta a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: auto;
  background: var(--ink);
  color: #cfdbd2;
  padding-block: clamp(56px, 8vw, 88px) 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
}
.footer-brand img {
  height: 44px;
  width: auto;
}
.footer-brand p {
  margin-top: 18px;
  max-width: 30ch;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.35;
  color: #f6f8f3;
}
.footer-col h2 {
  margin-bottom: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #93a698;
}
.footer-col ul {
  display: grid;
  gap: 10px;
}
.footer-col a {
  color: #e4ebe4;
  transition: color 0.2s;
}
.footer-col a:hover {
  color: var(--accent);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 0.875rem;
  color: #93a698;
}
.footer-bottom a:hover {
  color: #fff;
}
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-status .pill__dot {
  background: var(--sage);
}

/* ---------- Sections ---------- */
.section {
  padding-block: clamp(72px, 10vw, 128px);
}
.section--tight {
  padding-block: clamp(48px, 7vw, 80px);
}
.section--tint {
  background: var(--paper-2);
}
.section--card {
  background: #fffdfa;
  border-block: 1px solid var(--line);
}
.section--ink {
  background: var(--ink);
  color: #e4ebe4;
}
.section--ink .h1,
.section--ink .h2,
.section--ink .h3,
.section--ink .display {
  color: #f6f8f3;
}
.section--ink .h1 em,
.section--ink .h2 em {
  color: var(--accent-on-dark);
}
.section--ink .pill {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 16%);
  color: #e4ebe4;
}
.section--ink .small {
  color: #93a698;
}
.page-ink {
  padding-top: clamp(56px, 8vw, 104px);
}
.section--ink .lead {
  color: #c3d0c6;
}
.section--ink .eyebrow {
  color: var(--accent-on-dark);
}
.section-head {
  display: grid;
  gap: 18px;
  max-width: 720px;
  justify-items: start;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px 64px;
}

/* ---------- Page hero (sub pages) ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 80px);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: min(640px, 80vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(64 118 74 / 12%), transparent 65%);
  pointer-events: none;
}
.page-hero__inner {
  position: relative;
  display: grid;
  gap: 22px;
  max-width: 820px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--muted);
}
.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.breadcrumb li + li::before {
  content: '/';
  margin-right: 8px;
  color: var(--line);
}

/* ---------- Cards & grids ---------- */
.grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.3s;
}
.card p {
  color: var(--muted);
}
a.card:hover,
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #c7c9ba;
}
.card--muted {
  background: var(--paper-3);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}
.card__icon--sage {
  background: var(--warm-soft);
  color: #9a4630;
}
.card__icon--gold {
  background: #f8edd2;
  color: #8a6416;
}
.card__icon--plum {
  background: #efe3ec;
  color: #6c4562;
}
.card__more {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--ink);
}
a.card:hover .card__more .icon {
  transform: translateX(3px);
}
.card__more .icon {
  transition: transform 0.25s var(--ease);
}
.card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.2;
}

/* ---------- Phone frame ---------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 674 / 1536;
  padding: 8px;
  border-radius: 38px;
  background: #1b2a23;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 30%),
    var(--shadow-lg);
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 30px;
  background: var(--paper);
}
.phone--sm {
  max-width: 230px;
  border-radius: 32px;
}
.phone--sm img {
  border-radius: 25px;
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  align-items: center;
  gap: 32px 48px;
  padding: clamp(36px, 6vw, 72px);
  border-radius: var(--r-xl);
  background: var(--ink);
  color: #e4ebe4;
}
.cta-band::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 10%);
  box-shadow:
    0 0 0 60px rgb(255 255 255 / 2%),
    0 0 0 120px rgb(255 255 255 / 2%);
  pointer-events: none;
}
.cta-band .h2 {
  color: #f6f8f3;
}
.cta-band .h2 em {
  color: var(--accent-on-dark);
}
.cta-band p {
  margin-top: 14px;
  color: #c3d0c6;
  max-width: 52ch;
}
.cta-band .btn-row {
  position: relative;
  z-index: 1;
}

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(40px, 7vw, 96px) clamp(64px, 9vw, 112px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
}
.hero__copy {
  display: grid;
  gap: 26px;
  justify-items: start;
}
.hero__note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.9rem;
  color: var(--muted);
}
.hero__note span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero__note .icon {
  color: var(--sage-ink);
}
.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 600px;
}
.hero__halo {
  position: absolute;
  width: min(560px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 70%) 0 38%, transparent 38.2%),
    radial-gradient(circle at 50% 50%, var(--accent-wash) 0 60%, transparent 60.2%);
  opacity: 0.9;
}
.hero__halo::before,
.hero__halo::after {
  content: '';
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px dashed #c7c9ba;
  animation: spin 80s linear infinite;
}
.hero__halo::after {
  inset: 12%;
  border-style: solid;
  border-color: rgb(64 118 74 / 20%);
  animation-direction: reverse;
  animation-duration: 120s;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.hero__phones {
  position: relative;
  width: min(440px, 100%);
  height: 580px;
}
.hero__phones .phone {
  position: absolute;
  max-width: 250px;
}
.hero__phones .phone--front {
  z-index: 2;
  left: 50%;
  top: 0;
  transform: translateX(-30%);
}
.hero__phones .phone--back {
  z-index: 1;
  left: 50%;
  top: 56px;
  max-width: 220px;
  transform: translateX(-102%) rotate(-6deg);
  opacity: 0.96;
}
.float-card {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 94%);
  box-shadow: var(--shadow);
  font-size: 0.85rem;
  backdrop-filter: blur(6px);
  animation: bob 7s ease-in-out infinite;
}
.float-card strong {
  font-weight: 600;
  font-size: 0.95rem;
}
.float-card .mono {
  font-size: 1.15rem;
  color: var(--accent-ink);
}
.float-card--meal {
  left: -2%;
  bottom: 92px;
  min-width: 200px;
}
.float-card--macro {
  right: -4%;
  top: 70px;
  animation-delay: -3s;
}
.macro-bars {
  display: grid;
  gap: 7px;
  margin-top: 6px;
  min-width: 170px;
}
.macro-bars div {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  color: var(--muted);
}
.macro-bars i {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: var(--paper-2);
  overflow: hidden;
}
.macro-bars i::before {
  content: '';
  display: block;
  height: 100%;
  width: var(--w, 50%);
  border-radius: inherit;
  background: var(--c, var(--accent));
}
.float-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.float-card__methods {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.float-card__methods span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ---------- Logo / fact strip ---------- */
.fact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}
.fact-strip > div {
  display: grid;
  gap: 4px;
  padding: 26px 24px;
}
.fact-strip > div + div {
  border-left: 1px solid var(--line);
}
.fact-strip b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  line-height: 1.1;
}
.fact-strip span {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Log methods ---------- */
.methods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.method {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 26px 24px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.method:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.method .card__icon {
  margin-bottom: 8px;
}
.method h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
}
.method p {
  color: var(--muted);
  font-size: 0.95rem;
}
.method q {
  display: block;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper-3);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  quotes: none;
}

/* ---------- Showcase (tabs + phone) ---------- */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.showcase__tabs {
  display: grid;
  gap: 8px;
}
.showcase__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  width: 100%;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-align: left;
  transition:
    background-color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.showcase__tab:hover {
  background: rgb(255 255 255 / 55%);
}
.showcase__tab[aria-selected='true'] {
  background: var(--card);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.showcase__num {
  grid-row: span 2;
  font-family: var(--mono);
  font-size: 0.8rem;
  padding-top: 5px;
  color: var(--muted);
}
.showcase__tab[aria-selected='true'] .showcase__num {
  color: var(--accent-ink);
}
.showcase__tab strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
}
.showcase__tab span:last-child {
  color: var(--muted);
  font-size: 0.95rem;
}
.showcase__tab .tab-progress {
  display: none;
}
.showcase__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 640px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% 45%, rgb(255 255 255 / 60%) 0 30%, transparent 30.3%),
    var(--paper-2);
}
.showcase__panel {
  display: grid;
  justify-items: center;
  gap: 18px;
}
.showcase__panel .phone {
  max-width: 270px;
}
.showcase__panel.is-entering .phone {
  animation: phone-in 0.55s var(--ease);
}
@keyframes phone-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
}
.showcase__panel figcaption {
  font-size: 0.875rem;
  color: var(--muted);
}
.zoom-btn {
  position: absolute;
  right: 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.85rem;
  font-weight: 600;
  transition: border-color 0.2s;
}
.zoom-btn:hover {
  border-color: var(--ink);
}

/* ---------- Principles / split feature ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 7vw, 112px);
}
.split--reverse > :first-child {
  order: 2;
}
.split__media {
  display: grid;
  place-items: center;
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--r-xl);
  background: var(--paper-2);
}
.split__copy {
  display: grid;
  gap: 20px;
  justify-items: start;
}
.check-list {
  display: grid;
  gap: 14px;
}
.check-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  color: var(--ink-2);
}
.check-list li::before {
  content: '';
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sage-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2340764a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
.check-list b {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Steps ---------- */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card);
}
.section--ink .step {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(255 255 255 / 12%);
}
.section--ink .step p {
  color: #c3d0c6;
}
.step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.9rem;
}
.step h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
}
.step p {
  color: var(--muted);
}
.step .btn {
  margin-top: auto;
  align-self: flex-start;
}
.step.is-done .step__num {
  background: var(--sage);
}
.step.is-done .step__num::before {
  content: '✓';
  font-family: var(--sans);
  font-size: 1.1rem;
}
.step.is-done .step__num span {
  display: none;
}
.step__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
}
.step__mark input {
  width: 18px;
  height: 18px;
  accent-color: var(--sage-ink);
}
.section--ink .step__mark {
  color: #c3d0c6;
}
.callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: var(--paper-3);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.callout .icon {
  margin-top: 2px;
  color: var(--accent-ink);
}
.callout--sage {
  background: var(--sage-soft);
  border-color: #c9ddd5;
}
.callout--sage .icon {
  color: var(--sage-ink);
}
.section--ink .callout {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 12%);
  color: #e4ebe4;
}
.section--ink .callout .icon {
  color: var(--accent-on-dark);
}

/* ---------- FAQ / accordion ---------- */
.faq {
  display: grid;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  line-height: 1.3;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--accent-ink);
}
.faq summary::after {
  content: '';
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 12px 1.6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.6px 12px no-repeat,
    #fff;
  transition:
    transform 0.35s var(--ease),
    background-color 0.2s;
}
.faq details[open] summary::after {
  transform: rotate(135deg);
}
.faq__body {
  padding: 0 56px 24px 4px;
  color: var(--ink-2);
  display: grid;
  gap: 12px;
  max-width: 72ch;
}
.faq details[open] .faq__body {
  animation: fade-down 0.4s var(--ease);
}
@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-layout__intro {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  display: grid;
  gap: 18px;
  justify-items: start;
}

/* ---------- About ---------- */
.founding {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.founding__date {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 440px;
  width: 100%;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--line);
  text-align: center;
  box-shadow: var(--shadow);
}
.founding__date::before {
  content: '';
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px dashed #c7c9ba;
}
.founding__date div {
  display: grid;
  gap: 6px;
}
.founding__date small {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.founding__date b {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  line-height: 0.95;
}
.founding__date span {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink-2);
}
.timeline {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 820px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--accent), var(--line));
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 24px 140px 1fr;
  gap: 4px 24px;
  padding-block: 18px;
}
.timeline li::before {
  content: '';
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 5px var(--paper);
}
.timeline li.is-next::before {
  border-color: var(--line);
  border-style: dashed;
}
.timeline time,
.timeline .timeline__when {
  padding-top: 1px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
}
.timeline h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.25;
}
.timeline p {
  grid-column: 3;
  color: var(--muted);
}
.quote {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: 24px;
  justify-items: center;
}
.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.quote blockquote::before {
  content: '“';
  display: block;
  font-size: 4rem;
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: 18px;
}
.not-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.not-list li::before {
  content: '×';
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--accent-ink);
}

/* ---------- Help ---------- */
.help-search {
  position: relative;
  max-width: 620px;
  width: 100%;
}
.help-search input {
  width: 100%;
  min-height: 60px;
  padding: 0 22px 0 54px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 1.05rem;
  box-shadow: var(--shadow);
  transition: border-color 0.2s;
}
.help-search input:focus {
  outline: none;
  border-color: var(--ink);
}
.help-search input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.help-search .icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.help-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.help-topics a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgb(255 255 255 / 60%);
  font-size: 0.9rem;
  font-weight: 500;
  transition:
    border-color 0.2s,
    background-color 0.2s;
}
.help-topics a:hover {
  border-color: var(--ink);
  background: var(--card);
}
.help-group + .help-group {
  margin-top: clamp(48px, 6vw, 72px);
}
.help-group > h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.help-group > h2 .card__icon {
  margin: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
.help-empty {
  padding: 40px 24px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line);
  text-align: center;
  color: var(--muted);
}
.contact-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

/* ---------- Legal ---------- */
.legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
  padding-bottom: clamp(72px, 10vw, 120px);
}
.toc {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  display: grid;
  gap: 2px;
  max-height: calc(100vh - var(--header-h) - 56px);
  overflow-y: auto;
  padding-right: 8px;
}
.toc h2 {
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc a {
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--line);
  font-size: 0.925rem;
  color: var(--muted);
  transition:
    color 0.2s,
    border-color 0.2s;
}
.toc a:hover {
  color: var(--ink);
}
.toc a[aria-current='true'] {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--accent);
}
.legal-body {
  max-width: 72ch;
  display: grid;
  gap: 40px;
}
.legal-body section {
  display: grid;
  gap: 14px;
}
.legal-body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.85rem);
  line-height: 1.25;
}
.legal-body p,
.legal-body li {
  color: var(--ink-2);
}
.legal-body ul {
  display: grid;
  gap: 8px;
  padding-left: 0;
}
.legal-body li {
  position: relative;
  padding-left: 22px;
}
.legal-body li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.reading-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}

/* ---------- 404 ---------- */
.not-found {
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--header-h) - 120px);
  padding-block: 64px;
  text-align: center;
}
.not-found__inner {
  display: grid;
  gap: 22px;
  justify-items: center;
  max-width: 560px;
}
.not-found__code {
  font-family: var(--serif);
  font-size: clamp(6rem, 4rem + 8vw, 10rem);
  line-height: 0.9;
  color: var(--accent);
  letter-spacing: -0.04em;
}

/* ---------- Gallery dialog ---------- */
.gallery {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.gallery[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  animation: dialog-in 0.4s var(--ease);
}
.gallery::backdrop {
  background: rgb(23 36 30 / 62%);
  backdrop-filter: blur(4px);
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
.gallery__head,
.gallery__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}
.gallery__head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
}
.gallery__head p {
  font-size: 0.85rem;
  color: var(--muted);
}
.gallery__img {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 20px;
  overflow: hidden;
}
.gallery__img img {
  max-height: min(70dvh, 760px);
  width: auto;
  border-radius: 22px;
  border: 1px solid var(--line);
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  transition:
    border-color 0.2s,
    opacity 0.2s;
}
.icon-btn:hover:not(:disabled) {
  border-color: var(--ink);
}
.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.gallery__count {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--muted);
}
.thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.thumb {
  display: grid;
  gap: 10px;
  text-align: left;
}
.thumb img {
  width: 100%;
  aspect-ratio: 674 / 1100;
  object-fit: cover;
  object-position: top;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--paper);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.thumb:hover img {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.thumb span {
  font-size: 0.875rem;
  font-weight: 500;
}

/* ---------- Motion: reveal on scroll & page fade ---------- */
@keyframes page-in {
  from {
    opacity: 0;
  }
}
main {
  animation: page-in 0.5s var(--ease);
}
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@view-transition {
  navigation: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .methods,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 64px;
  }
  .nav,
  .header-cta {
    display: none;
  }
  .menu-btn {
    display: block;
  }
  .brand img {
    height: 34px;
  }
  .hero__grid,
  .showcase,
  .split,
  .founding,
  .faq-layout,
  .section-head--split,
  .cta-band {
    grid-template-columns: minmax(0, 1fr);
  }
  .split--reverse > :first-child {
    order: 0;
  }
  .hero__copy {
    justify-items: start;
  }
  .hero__stage {
    min-height: 0;
    margin-top: 8px;
  }
  .hero__phones {
    height: 520px;
  }
  .faq-layout__intro {
    position: static;
  }
  .grid--3,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .fact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fact-strip > div:nth-child(3) {
    border-left: 0;
  }
  .fact-strip > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .showcase__stage {
    min-height: 0;
    padding: 40px 20px;
    order: -1;
  }
  .showcase__tabs {
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 78%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .showcase__tabs::-webkit-scrollbar {
    display: none;
  }
  .showcase__tab {
    scroll-snap-align: start;
    background: rgb(255 255 255 / 50%);
    border-color: var(--line);
  }
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .toc {
    position: static;
    max-height: none;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
  .toc h2 {
    grid-column: 1 / -1;
  }
  .founding__date {
    max-width: 320px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--4,
  .methods {
    grid-template-columns: minmax(0, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .btn-row .btn {
    flex: 1 1 100%;
  }
  .hero__phones {
    height: 470px;
    width: 100%;
  }
  .hero__phones .phone {
    max-width: 210px;
  }
  .hero__phones .phone--back {
    max-width: 180px;
    top: 44px;
  }
  .float-card--meal {
    left: 0;
    bottom: 40px;
    min-width: 0;
  }
  .float-card--macro {
    right: 0;
    top: 24px;
  }
  .float-card {
    padding: 11px 13px;
  }
  .macro-bars {
    min-width: 130px;
  }
  .fact-strip > div {
    padding: 20px 14px;
  }
  .timeline li {
    grid-template-columns: 24px 1fr;
    gap: 4px 16px;
  }
  .timeline time,
  .timeline .timeline__when,
  .timeline h3,
  .timeline p {
    grid-column: 2;
  }
  .faq__body {
    padding-right: 4px;
  }
  .toc {
    grid-template-columns: minmax(0, 1fr);
  }
  .thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery__img img {
    max-height: 62dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  @view-transition {
    navigation: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .toc,
  .skip-link {
    display: none !important;
  }
  .legal-layout {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Pixel motion layer (assets/js/pixels.js)
   ===================================================================== */
.pixel-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pixel-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mono-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Hero v2: dark forest stage ---------- */
.hero2 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: #e4ebe4;
  padding-block: clamp(56px, 8vw, 112px) clamp(64px, 9vw, 120px);
}
.hero2::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(transparent, rgb(23 36 30 / 70%));
}
.hero2 .pixel-field {
  z-index: -1;
  opacity: 0.9;
}
.hero2__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.hero2__copy {
  display: grid;
  gap: 28px;
  justify-items: start;
}
.hero2 .display {
  color: #f6f8f3;
}
.hero2 .display em {
  color: var(--accent-on-dark);
}
.hero2 .lead {
  color: #c3d0c6;
}
.hero2 .pill {
  background: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 14%);
  color: #e4ebe4;
}
.hero2 .hero__note {
  color: #93a698;
}
.hero2 .hero__note .icon {
  color: var(--accent-on-dark);
}
.hero2 .btn--ghost {
  --btn-fg: #f6f8f3;
  background: transparent;
  border-color: rgb(255 255 255 / 25%);
}
.hero2 .btn--ghost:hover {
  border-color: #f6f8f3;
  background: rgb(255 255 255 / 6%);
}
.btn--accent {
  --btn-bg: var(--accent);
}
.hero2 .btn--accent:hover {
  --btn-bg: #4d8a58;
}
/* Line-by-line headline rise */
.rise {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.rise > span {
  display: inline-block;
  animation: rise 1s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 110ms + 120ms);
}
@keyframes rise {
  from {
    transform: translateY(105%);
  }
}
.fade-up {
  animation: fade-up 0.9s var(--ease) both;
  animation-delay: var(--d, 400ms);
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ---------- Live log demo card ---------- */
.demo {
  position: relative;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  padding: 18px;
  border-radius: 28px;
  background: rgb(242 248 247 / 96%);
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%),
    0 40px 80px -30px rgb(0 0 0 / 55%);
}
.demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 14px;
}
.demo__bar img {
  height: 26px;
  width: auto;
}
.demo__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}
.demo__status::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--sage);
}
.demo[data-state='typing'] .demo__status::before {
  background: var(--gold);
}
.demo[data-state='thinking'] .demo__status::before {
  background: var(--accent);
  animation: blink 0.5s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.demo__input {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card);
}
.demo__input > .icon {
  color: var(--accent);
}
.demo__text {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
}
.demo__text::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--accent);
  animation: blink 1s steps(2) infinite;
}
.demo[data-state='done'] .demo__text::after {
  opacity: 0;
  animation: none;
}
.demo__modes {
  display: flex;
  gap: 6px;
  margin: 12px 0 14px;
}
.demo__modes span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  transition:
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.demo__modes span.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #f6f8f3;
}
.demo__modes .icon {
  width: 14px;
  height: 14px;
}
.demo__result {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  min-height: 214px;
}
.demo__result.is-in > * {
  animation: fade-up 0.5s var(--ease) both;
}
.demo__result.is-in > :nth-child(2) {
  animation-delay: 80ms;
}
.demo__result.is-in > :nth-child(3) {
  animation-delay: 160ms;
}
.demo__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.demo__head h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
}
.demo__kcal {
  font-family: var(--mono);
  font-size: 1.7rem;
  color: var(--accent-ink);
  white-space: nowrap;
}
.demo__kcal small {
  font-size: 0.8rem;
  color: var(--muted);
}
.demo__items {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--muted);
}
.demo__items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.demo__items b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
}
.macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.macros div {
  display: grid;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--muted);
}
.macros b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink);
}
.pbar {
  --w: 0%;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--paper-2) 0 5px, transparent 5px 6px);
}
.pbar::before {
  content: '';
  display: block;
  height: 100%;
  width: var(--w);
  background: repeating-linear-gradient(90deg, var(--c, var(--accent)) 0 5px, transparent 5px 6px);
  transition: width 1s var(--ease);
}
.demo__note {
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* ---------- Food marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--card);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 18px;
  font-family: var(--serif);
  font-size: 1.35rem;
  white-space: nowrap;
}
.marquee__track span::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
}
.marquee__track span:nth-child(3n + 2)::after {
  background: var(--gold);
}
.marquee__track span:nth-child(3n)::after {
  background: var(--carb);
}
.marquee__track em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--muted);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Scroll story ---------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
}
.story__steps {
  display: grid;
}
.story__step {
  display: grid;
  align-content: center;
  gap: 16px;
  min-height: 78vh;
  padding-block: 40px;
  transition: opacity 0.5s var(--ease);
}
.story.is-enhanced .story__step:not(.is-active) {
  opacity: 0.28;
}
.story__step .mono-label {
  color: var(--accent);
}
.story__step .phone {
  display: none;
}
.story__aside {
  position: relative;
}
.story__sticky {
  position: sticky;
  top: calc(var(--header-h) + 5vh);
  display: grid;
  place-items: center;
  height: calc(90vh - var(--header-h));
  border-radius: var(--r-xl);
  background: var(--paper-2);
  overflow: hidden;
}
.story__sticky .pixel-field {
  opacity: 0.8;
}
.story__screens {
  position: relative;
  width: min(280px, 70%);
  aspect-ratio: 674 / 1536;
}
.story__screens .phone {
  position: absolute;
  inset: 0;
  max-width: none;
  opacity: 0;
  transform: translateY(30px) scale(0.96);
  transition:
    opacity 0.6s var(--ease),
    transform 0.8s var(--ease);
}
.story__screens .phone.is-active {
  opacity: 1;
  transform: none;
}
.story__meter {
  position: absolute;
  left: 24px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: repeating-linear-gradient(var(--line-strong) 0 4px, transparent 4px 8px);
}
.story__meter::before {
  content: '';
  display: block;
  width: 100%;
  height: calc(var(--p, 0) * 100%);
  background: repeating-linear-gradient(var(--accent) 0 4px, transparent 4px 8px);
  transition: height 0.6s var(--ease);
}

/* ---------- Bento with live micro-UIs ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(240px, auto);
  gap: 16px;
}
.tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card);
  transition:
    transform 0.4s var(--ease),
    border-color 0.3s;
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgb(64 118 74 / 10%),
    transparent 70%
  );
  transition: opacity 0.3s;
}
.tile:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}
.tile:hover::before {
  opacity: 1;
}
.tile h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
}
.tile p {
  color: var(--muted);
  max-width: 40ch;
}
.tile--2 {
  grid-column: span 2;
}
.tile--3 {
  grid-column: span 3;
}
.tile--4 {
  grid-column: span 4;
}
.tile--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: #e4ebe4;
}
.tile--ink h3 {
  color: #f6f8f3;
}
.tile--ink p {
  color: #c3d0c6;
}
.tile--green {
  background: var(--accent-wash);
  border-color: #cde0d6;
}
.tile__visual {
  margin-top: auto;
  padding-top: 20px;
}
.big-num {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 2.5rem + 3vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent-ink);
}
.tile--ink .big-num {
  color: var(--accent-on-dark);
}
/* Pixel macro ring drawn with conic gradient + dot mask */
.ring {
  --p: 0;
  position: relative;
  width: 150px;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  background: conic-gradient(
    var(--gold) 0 calc(var(--p) * 0.28turn),
    var(--carb) 0 calc(var(--p) * 0.72turn),
    var(--plum) 0 calc(var(--p) * 1turn),
    var(--paper-2) 0
  );
  -webkit-mask:
    radial-gradient(circle, #000 0 1.6px, transparent 2px) 0 0 / 6px 6px,
    radial-gradient(circle, transparent 0 46px, #000 47px);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, #000 0 1.6px, transparent 2px) 0 0 / 6px 6px intersect,
    radial-gradient(circle, transparent 0 46px, #000 47px);
  transition: --p 1.6s var(--ease);
}
@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.is-visible .ring,
.ring.is-on {
  --p: 1;
}
.ring-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.ring-wrap > span {
  position: absolute;
  display: grid;
  text-align: center;
  font-family: var(--mono);
  font-size: 1.4rem;
}
.ring-wrap > span small {
  font-size: 0.7rem;
  color: var(--muted);
}
.legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--muted);
}
.legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: var(--c);
}
/* Streak pixel calendar */
.streak {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.streak span {
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgb(255 255 255 / 8%);
}
.streak span.on {
  background: var(--accent-on-dark);
}
.streak span.freeze {
  background: transparent;
  box-shadow: inset 0 0 0 2px #7fa3b8;
}
.is-visible .streak span.on {
  animation: pop 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes pop {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
}
.streak-legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  font-size: 0.75rem;
  color: #93a698;
}
/* Method chips */
.method-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.method-row div {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 8px;
  border-radius: 16px;
  background: var(--paper-3);
  font-size: 0.85rem;
  font-weight: 500;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.3s var(--ease);
}
.method-row div:hover {
  background: var(--ink);
  color: #f6f8f3;
  transform: translateY(-3px);
}
.method-row .icon {
  width: 30px;
  height: 30px;
}
/* WHO range rails */
.rails {
  display: grid;
  gap: 14px;
}
.rail {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--muted);
}
.rail i {
  position: relative;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--paper-2) 0 6px, transparent 6px 8px);
}
.rail i::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--a);
  width: 0;
  background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 8px);
  transition: width 1.2s var(--ease) 0.2s;
}
.is-visible .rail i::before {
  width: calc(var(--b) - var(--a));
}
.rail b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
/* Mini chart */
.spark {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
}
.spark span {
  flex: 1;
  height: 0;
  background: repeating-linear-gradient(0deg, var(--accent) 0 5px, transparent 5px 7px);
  transition: height 1s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.spark span.over {
  background: repeating-linear-gradient(0deg, var(--carb) 0 5px, transparent 5px 7px);
}
.is-visible .spark span {
  height: var(--h);
}
.spark-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
}

/* ---------- Principles on dark with glyph field ---------- */
.principles {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.principles .pixel-field {
  z-index: -1;
}
.principle-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgb(255 255 255 / 12%);
}
.principle-list article {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 32px 28px 8px 0;
}
.principle-list article + article {
  padding-left: 28px;
  border-left: 1px solid rgb(255 255 255 / 12%);
}
.principle-list .icon {
  width: 36px;
  height: 36px;
  color: var(--accent-on-dark);
}
.principle-list h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  color: #f6f8f3;
}
.principle-list p {
  color: #c3d0c6;
}

/* ---------- Founding block ---------- */
.date-pixels {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.date-pixels b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.story-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 380px;
  display: grid;
  align-content: end;
  padding: 36px;
  border-radius: var(--r-xl);
  background: var(--accent-wash);
  border: 1px solid #cde0d6;
}
.story-card .pixel-field {
  z-index: -1;
}

/* ---------- CTA with pixel field ---------- */
.cta-band {
  isolation: isolate;
}
.cta-band .pixel-field {
  z-index: 0;
  opacity: 0.75;
}
.cta-band > div {
  position: relative;
  z-index: 1;
}
.cta-band::after {
  display: none;
}

/* ---------- Page hero accents (sub pages) ---------- */
.page-hero--pixels .pixel-field {
  z-index: 0;
  left: auto;
  width: 46%;
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.page-hero--pixels::before {
  display: none;
}
.page-hero__inner {
  z-index: 1;
}
.media-reveal {
  position: relative;
}

@media (max-width: 1080px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile--2,
  .tile--3,
  .tile--4 {
    grid-column: span 1;
  }
  .tile--wide-md {
    grid-column: 1 / -1;
  }
}
@media (max-width: 900px) {
  .hero2__grid,
  .story {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo {
    justify-self: stretch;
    max-width: none;
  }
  .story__aside {
    display: none;
  }
  .story__step {
    min-height: 0;
    padding-block: 28px;
  }
  .story.is-enhanced .story__step:not(.is-active) {
    opacity: 1;
  }
  .story__step .phone {
    display: block;
    max-width: 240px;
    margin: 12px auto 0;
  }
  .principle-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .principle-list article,
  .principle-list article + article {
    padding: 28px 0;
    border-left: 0;
    border-bottom: 1px solid rgb(255 255 255 / 12%);
  }
  .page-hero--pixels .pixel-field {
    width: 100%;
    opacity: 0.35;
  }
}
@media (max-width: 640px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .method-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .demo {
    padding: 14px;
    border-radius: 24px;
  }
  .marquee__track span {
    font-size: 1.15rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
  .ring {
    --p: 1;
  }
  .rail i::before {
    width: calc(var(--b) - var(--a));
  }
  .spark span {
    height: var(--h);
  }
}

/* Without the reveal script (no JS / no IntersectionObserver), show final data states. */
html:not(.js) .ring {
  --p: 1;
}
html:not(.js) .rail i::before {
  width: calc(var(--b) - var(--a));
}
html:not(.js) .spark span {
  height: var(--h);
}
.principles > .wrap {
  position: relative;
  z-index: 1;
}

/* ---------- Pills on dark surfaces: hover stays dark (no white flash) ---------- */
.hero2 a.pill:hover,
.section--ink a.pill:hover {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 34%);
  color: #f6f8f3;
}

/* ---------- Header over a dark pixel hero ----------
   The hero slides under the sticky header so the dot field runs edge to edge;
   the header becomes transparent forest glass until the hero scrolls away. */
[data-header-dark] {
  margin-top: calc(-1 * var(--header-h));
}
.hero2[data-header-dark] {
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 112px));
}
.page-ink[data-header-dark] {
  padding-top: calc(var(--header-h) + clamp(56px, 8vw, 104px));
}
.site-header {
  transition:
    background-color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    color 0.45s var(--ease);
}
.site-header .brand img,
.site-header .menu-btn,
.site-header .menu-btn span,
.site-header .header-cta {
  transition:
    filter 0.45s var(--ease),
    background-color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    color 0.45s var(--ease);
}
.site-header.is-dark:not(.menu-open) {
  background: rgb(27 42 35 / 58%);
  border-bottom-color: rgb(255 255 255 / 9%);
  backdrop-filter: saturate(1.3) blur(16px);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  box-shadow: 0 1px 0 rgb(0 0 0 / 12%);
}
.site-header.is-dark.is-scrolled:not(.menu-open) {
  background: rgb(27 42 35 / 78%);
  border-bottom-color: rgb(255 255 255 / 10%);
}
/* Logo keeps its true coral heart; the on-dark file only lifts the charcoal wordmark. */
.brand {
  display: inline-grid;
}
.brand img {
  grid-area: 1 / 1;
  transition: opacity 0.45s var(--ease);
}
.brand__dark {
  opacity: 0;
}
.site-header.is-dark:not(.menu-open) .brand__light {
  opacity: 0;
}
.site-header.is-dark:not(.menu-open) .brand__dark {
  opacity: 1;
}
.site-header.is-dark:not(.menu-open) .nav a {
  color: #c3d0c6;
}
.site-header.is-dark:not(.menu-open) .nav a:hover {
  color: #f6f8f3;
  background: rgb(255 255 255 / 8%);
}
.site-header.is-dark:not(.menu-open) .nav a[aria-current='page'] {
  color: #f6f8f3;
}
.site-header.is-dark:not(.menu-open) .nav a[aria-current='page']::after {
  background: var(--accent-on-dark);
}
.site-header.is-dark:not(.menu-open) .header-cta {
  --btn-bg: #f6f8f3;
  --btn-fg: var(--ink);
}
.site-header.is-dark:not(.menu-open) .menu-btn {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 20%);
}
.site-header.is-dark:not(.menu-open) .menu-btn span {
  background: #f6f8f3;
}
.site-header.is-dark:not(.menu-open) :focus-visible {
  outline-color: var(--accent-on-dark);
}

/* =====================================================================
   Surface harmony pass
   Tiles sit on the beige tint section, so their fills are derived from that beige
   (lighter paper, not stark white). Inner elements use translucent ink overlays so they
   pick up whatever surface they sit on. Radii are concentric: inner = outer − padding.
   ===================================================================== */
:root {
  --r-lg: 20px;
  --r-xl: 28px;
  --tile-fill: rgb(255 255 255 / 52%);
  --tile-line: #d5e3df;
  --tile-line-strong: #bfd3cd;
  --inset: rgb(37 56 47 / 4.5%);
  --inset-line: rgb(37 56 47 / 7%);
}
.section--tint {
  background: #e7f0ee;
}
.section--tint .card,
.tile {
  background: var(--tile-fill);
  border-color: var(--tile-line);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
}
.tile:hover,
.section--tint a.card:hover {
  border-color: var(--tile-line-strong);
}
.tile::before {
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    rgb(255 255 255 / 55%),
    transparent 70%
  );
}
.tile--green {
  background: #e2efe8;
  border-color: #cde0d6;
}
.tile--green .big-num {
  color: var(--accent-ink);
}
.tile--ink {
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: none;
}
.tile--ink::before {
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 50%),
    rgb(168 203 166 / 10%),
    transparent 70%
  );
}
/* Inner chips: concentric radius (20px tile − ~10px) and translucent ink fill. */
.method-row div {
  border-radius: 10px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--inset-line);
  color: var(--ink);
}
.method-row div:hover {
  background: var(--ink);
  box-shadow: none;
}
.method-row .icon {
  color: var(--accent);
}
.method-row div:hover .icon {
  color: var(--accent-on-dark);
}
.streak span {
  border-radius: 2px;
}
.ring {
  background: conic-gradient(
    var(--gold) 0 calc(var(--p) * 0.28turn),
    var(--carb) 0 calc(var(--p) * 0.72turn),
    var(--plum) 0 calc(var(--p) * 1turn),
    rgb(37 56 47 / 10%) 0
  );
}
.pbar,
.rail i {
  background: repeating-linear-gradient(90deg, rgb(37 56 47 / 9%) 0 6px, transparent 6px 8px);
}
.pbar {
  background: repeating-linear-gradient(90deg, rgb(37 56 47 / 9%) 0 5px, transparent 5px 6px);
}
/* Elsewhere: cards on paper keep a warm fill instead of pure white. */
.card {
  background: rgb(255 255 255 / 62%);
  border-color: var(--tile-line);
}
.card--muted {
  background: var(--paper-3);
}
.card__icon {
  border-radius: 10px;
}
.split__media,
.story__sticky {
  background: #e7f0ee;
}
.faq summary::after,
.icon-btn,
.zoom-btn {
  background-color: rgb(255 255 255 / 62%);
}

/* Principle cards: a very light frosted screen. Pixels stay visible through it, text reads clearly. */
.principles .principle-list {
  gap: 16px;
  border-top: 0;
}
.principles .principle-list article,
.principles .principle-list article + article {
  position: relative;
  padding: 28px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: var(--r-lg);
  background: rgb(246 248 243 / 5%);
  backdrop-filter: blur(3px) saturate(1.1);
  -webkit-backdrop-filter: blur(3px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%);
}
@media (max-width: 900px) {
  .principles .principle-list article,
  .principles .principle-list article + article {
    padding: 24px;
    border-bottom: 1px solid rgb(255 255 255 / 10%);
  }
}

/* ---------- Header progress line ---------- */
.site-header .reading-progress {
  height: 2px;
  bottom: -1px;
  background: var(--accent);
  transition:
    transform 0.12s linear,
    background-color 0.45s var(--ease);
}
.site-header.is-dark:not(.menu-open) .reading-progress {
  background: var(--accent-on-dark);
}
.site-header.menu-open .reading-progress {
  opacity: 0;
}

/* ---------- Side index (section ticks) ---------- */
.side-index {
  position: fixed;
  left: clamp(14px, 2vw, 32px);
  top: 50%;
  z-index: 40;
  transform: translate(-8px, -50%);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.side-index.is-shown {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.side-index ol {
  display: grid;
  gap: 2px;
}
.side-index a {
  --tick: rgb(37 56 47 / 28%);
  --tick-on: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  height: 18px;
  padding-right: 10px;
  border-radius: 4px;
}
.side-index a::before {
  content: '';
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--tick);
  transition:
    width 0.35s var(--ease),
    background-color 0.35s var(--ease);
}
.side-index a:hover::before {
  width: 22px;
  background: var(--tick-on);
}
.side-index a[aria-current='true']::before {
  width: 30px;
  background: var(--tick-on);
}
.side-index.on-dark a {
  --tick: rgb(246 248 243 / 30%);
  --tick-on: #f6f8f3;
}
/* Label slides out on hover/focus as a small chip. */
.side-index__label {
  position: absolute;
  left: 42px;
  top: 50%;
  max-width: 260px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--tile-line, #d5e3df);
  background: rgb(248 251 251 / 96%);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translate(-6px, -50%);
  pointer-events: none;
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.side-index a:hover .side-index__label,
.side-index a:focus-visible .side-index__label {
  opacity: 1;
  transform: translate(0, -50%);
}
.side-index.on-dark .side-index__label {
  border-color: rgb(255 255 255 / 12%);
  background: rgb(27 42 35 / 92%);
  color: #f6f8f3;
}
.side-index a:focus-visible {
  outline-offset: 2px;
}
/* Only where the left gutter has room beside the content column. */
@media (max-width: 1279px) {
  .side-index {
    display: none;
  }
}
@media print {
  .side-index {
    display: none;
  }
}

/* =====================================================================
   Mist surfaces — replaces beige and stark white site-wide.
   One airy backdrop (white into pale sage-aqua) shows through translucent
   sections and glass cards, so every light surface comes from the same light.
   ===================================================================== */
:root {
  --paper: #f4f8f7;
  --paper-2: #e7f0ee;
  --paper-3: #edf4f2;
  --card: rgb(255 255 255 / 64%);
  --line: #d6e3df;
  --line-strong: #bfd3cd;
  --tile-fill: rgb(255 255 255 / 52%);
  --tile-line: #d5e3df;
  --tile-line-strong: #bfd3cd;
  --accent-soft: #dcede5;
  --accent-wash: #e6f2ec;
  --sage-soft: #e0efe7;
  --inset: rgb(37 76 70 / 5%);
  --inset-line: rgb(37 76 70 / 8%);
}
body {
  background: var(--paper);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at -8% -10%, #dff0f2 0%, rgb(223 240 242 / 0%) 62%),
    radial-gradient(900px 700px at 108% 18%, #e6f3ee 0%, rgb(230 243 238 / 0%) 60%),
    radial-gradient(1000px 800px at 40% 120%, #e2f1f0 0%, rgb(226 241 240 / 0%) 62%),
    linear-gradient(180deg, #f7fbfb 0%, #f2f8f7 100%);
}
/* Light sections are translucent veils over the backdrop instead of flat beige/white slabs. */
.section--tint {
  background: linear-gradient(180deg, rgb(214 234 231 / 42%), rgb(220 238 233 / 30%));
}
.section--card {
  background: rgb(255 255 255 / 38%);
  border-block-color: rgb(191 211 205 / 55%);
}
.marquee {
  background: rgb(255 255 255 / 45%);
  border-block-color: var(--line);
}
/* Glass cards: soft blur so the gradient reads through without hurting legibility. */
.card,
.tile:not(.tile--ink),
.method,
.step:not(.section--ink .step),
.callout,
.help-search input,
.toc,
.thumb img,
.founding__date {
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}
.card,
.tile:not(.tile--ink):not(.tile--green) {
  background: var(--tile-fill);
  border-color: var(--tile-line);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    0 1px 2px rgb(37 76 70 / 4%);
}
.card--muted,
.callout {
  background: rgb(255 255 255 / 40%);
}
.tile--green,
.story-card {
  background: linear-gradient(160deg, #e4f2ea, #dcefe9);
  border-color: #cde0d6;
}
.split__media,
.story__sticky,
.showcase__stage {
  background: linear-gradient(160deg, rgb(219 237 234 / 75%), rgb(228 242 238 / 60%));
}
.page-hero::before {
  background: radial-gradient(circle, rgb(127 196 190 / 14%), transparent 65%);
}
.section--tint .card,
.section--tint .tile:not(.tile--ink):not(.tile--green) {
  background: rgb(255 255 255 / 58%);
}

/* =====================================================================
   Confident palette (supersedes mist + beige)
   Crisp white surfaces, deep forest ink, one vivid accent: the logo's coral.
   Dark panels use rich forest gradients with bright mint mono labels.
   ===================================================================== */
:root {
  --paper: #ffffff;
  --paper-2: #f0f6f2;
  --paper-3: #f5f9f7;
  --card: #ffffff;
  --ink: #0f2a1f;
  --ink-2: #26402f;
  --muted: #4a5e54;
  --line: #dde7e1;
  --line-strong: #c2d3ca;
  --accent: #2b7a4b;
  --accent-ink: #1c5c37;
  --accent-soft: #e3f1e8;
  --accent-wash: #eef7f1;
  --accent-on-dark: #8fdcae;
  --sage-soft: #e3f1e8;
  --cta: #ee5a36;
  --cta-hover: #d9441f;
  --cta-glow: rgb(238 90 54 / 32%);
  --deep-1: #143a2a;
  --deep-2: #0b2219;
  --tile-fill: #ffffff;
  --tile-line: #dde7e1;
  --tile-line-strong: #c2d3ca;
  --inset: #f2f7f4;
  --inset-line: #e1ebe5;
  --shadow: 0 1px 2px rgb(15 42 31 / 5%), 0 10px 28px -14px rgb(15 42 31 / 18%);
  --shadow-lg: 0 2px 6px rgb(15 42 31 / 6%), 0 36px 70px -30px rgb(15 42 31 / 35%);
}

/* Solid surfaces: no frosted haze on light areas. */
body {
  background: var(--paper);
  color: var(--ink);
}
body::before {
  display: none;
}
.card,
.tile,
.method,
.step,
.callout,
.help-search input,
.toc,
.thumb img,
.founding__date {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.section--tint {
  background: var(--paper-2);
}
.section--card {
  background: var(--paper);
  border-block-color: var(--line);
}
.marquee {
  background: var(--paper);
  border-block-color: var(--line);
}

/* Cards: white, defined border, soft lift — the "mature" card. */
.card,
.method,
.tile:not(.tile--ink):not(.tile--green),
.section--tint .card,
.section--tint .tile:not(.tile--ink):not(.tile--green) {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
a.card:hover,
.card--hover:hover,
.method:hover,
.tile:not(.tile--ink):hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.card--muted,
.callout {
  background: var(--paper-3);
  box-shadow: none;
}
.tile::before {
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgb(43 122 75 / 7%),
    transparent 70%
  );
}
.tile--green,
.story-card {
  background: linear-gradient(160deg, #eef7f1, #e3f1e8);
  border: 1px solid #d3e6da;
  box-shadow: none;
}
.split__media,
.story__sticky,
.showcase__stage {
  background: linear-gradient(160deg, #eff6f2, #e5f0ea);
}
.page-hero {
  background: linear-gradient(180deg, #f1f8f4, #ffffff 85%);
}
.page-hero::before {
  background: radial-gradient(circle, rgb(43 122 75 / 9%), transparent 65%);
}

/* Rich forest darks with depth, like a lit panel. */
.hero2,
.section--ink {
  background:
    radial-gradient(900px 520px at 85% 110%, rgb(238 90 54 / 13%), transparent 60%),
    radial-gradient(1000px 640px at 0% 0%, rgb(43 122 75 / 35%), transparent 60%),
    linear-gradient(160deg, var(--deep-1), var(--deep-2));
}
.tile--ink,
.cta-band {
  background:
    radial-gradient(420px 300px at 100% 100%, rgb(238 90 54 / 16%), transparent 70%),
    linear-gradient(150deg, var(--deep-1), var(--deep-2));
  border-color: transparent;
}
.tile--ink .mono-label,
.section--ink .mono-label {
  color: var(--accent-on-dark) !important;
}
.site-footer {
  background: linear-gradient(180deg, var(--deep-2), #081a13);
}

/* One vivid accent: coral calls to action. */
.btn--accent,
.header-cta {
  --btn-bg: var(--cta);
  --btn-fg: #ffffff;
  border-color: var(--cta);
  box-shadow: 0 8px 20px -10px var(--cta-glow);
}
.btn--accent:hover,
.header-cta:hover,
.hero2 .btn--accent:hover {
  --btn-bg: var(--cta-hover);
  border-color: var(--cta-hover);
  box-shadow: 0 14px 28px -12px var(--cta-glow);
}
.site-header.is-dark:not(.menu-open) .header-cta {
  --btn-bg: var(--cta);
  --btn-fg: #ffffff;
}
.btn--ghost {
  background: transparent;
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  --btn-fg: #ffffff;
  color: #ffffff;
}
.hero2 .btn--ghost:hover {
  background: rgb(255 255 255 / 8%);
}
.text-link {
  border-bottom-color: var(--cta);
}
.text-link:hover {
  color: var(--cta-hover);
}
.pill__dot {
  background: var(--cta);
}
.pill__dot::after {
  border-color: var(--cta);
}

/* Type: deeper ink, crisper hierarchy. */
.display,
.h1,
.h2,
.h3,
.card h3,
.tile h3,
.method h3,
.step h3 {
  color: var(--ink);
}
.lead {
  color: var(--ink-2);
}
.eyebrow {
  color: var(--accent);
}
.mono-label {
  color: var(--accent);
  font-weight: 500;
}
.display em,
.h1 em,
.h2 em {
  color: var(--accent);
}
.section--ink .h1 em,
.section--ink .h2 em,
.hero2 .display em,
.cta-band .h2 em {
  color: var(--accent-on-dark);
}

/* Header surfaces. */
.site-header {
  background: rgb(255 255 255 / 88%);
}
.site-header.is-scrolled {
  background: rgb(255 255 255 / 94%);
  border-bottom-color: var(--line);
}
.site-header.is-dark:not(.menu-open) {
  background: rgb(11 34 25 / 52%);
}
.site-header.is-dark.is-scrolled:not(.menu-open) {
  background: rgb(11 34 25 / 82%);
}
.mobile-menu {
  background: #ffffff;
}

/* Demo card and inner chips. */
.demo {
  background: #ffffff;
}
.demo__input,
.demo__result {
  background: #ffffff;
  border-color: var(--line);
}
.demo__modes span.is-active {
  background: var(--ink);
}
.method-row div,
.method q {
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--inset-line);
}
.faq summary::after,
.icon-btn,
.zoom-btn,
.help-topics a,
.pill {
  background-color: #ffffff;
}
.hero2 .pill,
.section--ink .pill {
  background-color: rgb(255 255 255 / 7%);
}
.side-index__label {
  background: #ffffff;
  border-color: var(--line);
}

/* Headings inside dark tiles stay light (overrides the light-surface heading colour above). */
.tile--ink h3,
.tile--ink .h3,
.section--ink .card h3,
.section--ink .step h3 {
  color: #f6f8f3;
}