/* ============================================================
   LOMA — Beta Launch v3
   White canvas · graphite ink · one green thread
   Math lives behind a click. Motion lives everywhere, quietly.
   ============================================================ */

:root {
  --splash-progress: 0;
  --paper: #FFFFFF;
  --paper-warm: #FAFAF8;
  --sand: #F5F2EC;
  --hairline: #ECEAE6;
  --hairline-dark: #DDDAD3;
  --graphite: #1A1D20;
  --graphite-soft: #2C2F33;
  --slate: #6B7280;
  --slate-dim: #9CA3AF;
  --terracotta: #10B981;
  --terracotta-deep: #047857;
  --luminous: #10B981;
  --emerald: #047857;
  --amber: #D97706;
  --mindfulness: #6B73A0;
  --app-canvas: #F9F8F6;
  --app-border: #E2E8F0;

  --sans: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --w: 1200px;
  --chrome-bg: var(--graphite);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  touch-action: pan-y;
  overscroll-behavior-y: none;
  min-height: 100%;
  min-height: -webkit-fill-available;
  background: color-mix(in srgb, var(--graphite) calc((1 - var(--splash-progress)) * 100%), var(--paper));
}
html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--chrome-bg);
  z-index: 250;
  pointer-events: none;
}
html[data-at-splash="true"],
html[data-at-enroll="true"] {
  --chrome-bg: var(--graphite);
  background: var(--graphite);
}
html[data-at-splash="true"] body {
  background: var(--graphite);
}
html[data-at-enroll="true"] .mast {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
html[data-at-enroll="true"] .scroll-progress {
  opacity: 0;
}
html[data-at-enroll="true"] body {
  background: var(--graphite);
}

body {
  background: color-mix(in srgb, var(--graphite) calc((1 - var(--splash-progress)) * 100%), var(--paper));
  min-height: 100svh;
  min-height: -webkit-fill-available;
  overflow-anchor: none;
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "lnum" 1;
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
  overscroll-behavior: none;
  width: 100%;
  max-width: 100%;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; text-align: left; }
.mono { font-family: var(--mono); }
::selection { background: rgba(16, 185, 129, 0.28); }

.wrap {
  width: 100%;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 48px;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
  overscroll-behavior: none;
}

/* scroll progress — thin line below mast bar (never overlaps wordmark) */
.scroll-progress {
  flex-shrink: 0;
  width: 100%;
  height: 2px;
  background: var(--luminous);
  transform: scaleX(0);
  transform-origin: 0 0;
  pointer-events: none;
  opacity: calc(clamp(0, (var(--splash-progress) - 0.15) / 0.55, 1));
}

/* ================= splash intro ================= */
body[data-landing-splash="true"] .mast {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: none;
}
body[data-landing-splash="true"] .scroll-progress {
  opacity: 0;
}
body[data-past-splash="true"] .mast {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.splash {
  /* height must be explicit — absolute/grid children do not expand the box;
     the second min-height line used to override 100svh with fill-available → 0px on desktop */
  min-height: 100svh;
  height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-areas: "stage" "cue";
  background: var(--graphite);
  position: relative;
  isolation: isolate;
  z-index: 2;
  touch-action: pan-y;
  overscroll-behavior: none;
}
.splash-stage {
  grid-area: stage;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding:
    calc(24px + env(safe-area-inset-top, 0px))
    clamp(24px, 5vw, 48px)
    0;
  z-index: 1;
}
.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 78% 62% at 50% 44%,
    rgba(16, 185, 129, 0.09) 0%,
    rgba(16, 185, 129, 0.03) 38%,
    transparent 72%
  );
  opacity: calc(1 - var(--splash-progress) * 0.9);
}
.splash-intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vmin, 64px);
  text-align: center;
  transform-origin: center center;
  opacity: calc(1 - var(--splash-progress) * 1.1);
  transform: scale(calc(1 - var(--splash-progress) * 0.05));
  will-change: opacity, transform;
}
.splash-wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(48px, 12vmin, 96px);
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--paper);
  margin: 0;
  display: inline-block;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: splash-wordmark-in 900ms cubic-bezier(0.22, 1, 0.36, 1) 800ms forwards;
}
@keyframes splash-wordmark-in {
  to { opacity: 1; transform: translateY(0); }
}
.splash-cue {
  grid-area: cue;
  position: relative;
  z-index: 2;
  justify-self: center;
  font-family: var(--mono);
  font-size: clamp(10px, 2.4vmin, 11px);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.36);
  margin: 0;
  padding-bottom: clamp(36px, 8vh, 60px);
  opacity: calc(0.88 * (1 - var(--splash-progress) * 1.2));
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
  transition: opacity 120ms ease-out;
  pointer-events: none;
}
.splash::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -96px;
  height: 120px;
  background: var(--graphite);
  pointer-events: none;
  z-index: 0;
}

.splash-pulse {
  position: relative;
  width: clamp(180px, 42vmin, 320px);
  height: clamp(180px, 42vmin, 320px);
  display: grid;
  place-items: center;
  color: var(--luminous);
  margin-inline: auto;
}
.splash-pulse-ring,
.splash-pulse-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  left: 50%;
  top: 50%;
}
.splash-pulse-ring {
  width: 88%;
  height: 88%;
  margin: -44% 0 0 -44%;
  border: 2px solid var(--luminous);
  opacity: 0;
  animation: splash-ring 1600ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.splash-pulse-glow--outer {
  width: 88%;
  height: 88%;
  margin: -44% 0 0 -44%;
  background: rgba(16, 185, 129, 0.08);
  animation: splash-glow 1600ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.splash-pulse-glow--inner {
  width: 62%;
  height: 62%;
  margin: -31% 0 0 -31%;
  background: rgba(16, 185, 129, 0.12);
  animation: splash-glow 1600ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.splash-pulse-glyph {
  position: relative;
  z-index: 1;
  width: 45%;
  height: 45%;
  color: var(--luminous);
  animation: splash-heartbeat 1600ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes splash-heartbeat {
  0%, 35%, 100% { transform: scale(1); }
  8%  { transform: scale(1.08); }
  18% { transform: scale(1); }
  24% { transform: scale(1.05); }
}
@keyframes splash-glow {
  0%, 35%, 100% { transform: scale(1); }
  8%, 24% { transform: scale(1.06); }
}
@keyframes splash-ring {
  0%, 8%   { transform: scale(1); opacity: 0.6; }
  65%      { transform: scale(1.4); opacity: 0; }
  100%     { transform: scale(1.4); opacity: 0; }
}

/* ================= masthead ================= */
.mast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  opacity: calc(clamp(0, (var(--splash-progress) - 0.3) / 0.7, 1));
  transform: translateY(calc((1 - clamp(0, (var(--splash-progress) - 0.3) / 0.7, 1)) * -14px));
  transition: background 360ms var(--ease), box-shadow 360ms var(--ease);
}
.mast-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 48px;
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
  transition: padding 360ms var(--ease);
}
.mast.scrolled {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--hairline);
}
.mast.scrolled .mast-bar {
  padding: 14px 48px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.mast .wordmark {
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -1.4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 34px;
}
.logo-beat {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  line-height: 0;
}
.logo-beat::before {
  content: ""; position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--luminous);
  opacity: 0;
  animation: logoRing 2.4s var(--ease) infinite;
  pointer-events: none;
}
.logo-wave {
  width: 34px; height: 34px;
  flex-shrink: 0;
  transform-origin: center;
  animation: logoBeat 2.4s var(--ease) infinite;
}
.mast .wordmark:hover .logo-wave { animation-play-state: paused; transform: rotate(-8deg); }
@keyframes logoBeat {
  0%    { transform: scale(1); }
  5%    { transform: scale(1.1); }
  11%   { transform: scale(1); }
  14%   { transform: scale(1.06); }
  19%   { transform: scale(1); }
  100%  { transform: scale(1); }
}
@keyframes logoRing {
  0%, 4%  { transform: scale(0.8); opacity: 0; }
  7%      { transform: scale(0.95); opacity: 0.55; }
  42%     { transform: scale(1.55); opacity: 0; }
  100%    { transform: scale(1.55); opacity: 0; }
}
.mast .right { display: flex; align-items: center; gap: 26px; }
.mast .nav-links { display: flex; align-items: center; gap: 24px; }
.mast .nav-links a {
  font-size: 14px; font-weight: 600; letter-spacing: -0.1px;
  color: var(--slate); transition: color 240ms var(--ease);
}
.mast .nav-links a:hover { color: var(--graphite); }
.cta .cta-short { display: none; }

/* ---- signature CTA: capsule with clean horizontal wipe on hover ---- */
.cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--graphite); color: #fff;
  border-radius: 999px;
  padding: 7px 7px 7px 28px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 340ms var(--ease), box-shadow 340ms var(--ease);
}
.cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--terracotta);
  transform: translateX(-101%);
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
  border-radius: inherit;
}
.cta:hover::before { transform: translateX(0); }
.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(16,185,129,0.38);
}
.cta .cta-label {
  position: relative; z-index: 1;
  font-weight: 700; font-size: 15px; letter-spacing: -0.2px;
  white-space: nowrap;
}
.cta .cta-chip {
  position: relative; z-index: 1;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 480ms var(--ease);
}
.cta:hover .cta-chip { background: rgba(255,255,255,0.22); }
.cta .cta-chip .arr {
  display: inline-block;
  font-size: 17px;
  transform: rotate(-45deg);
  transition: transform 420ms var(--ease);
}
.cta:hover .cta-chip .arr { transform: rotate(0deg); }
.cta.sm { padding: 5px 5px 5px 20px; }
.cta.sm .cta-label { font-size: 13.5px; }
.cta.sm .cta-chip { width: 34px; height: 34px; }
.cta.sm .cta-chip .arr { font-size: 14px; }
.cta[disabled] { cursor: default; transform: none; box-shadow: none; }
.cta[disabled]::before { display: none; }

/* ================= hero ================= */
body[data-landing-splash="true"] .hero {
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}
body[data-landing-splash="true"] .hero .core,
body[data-landing-splash="true"] .hero .ledger-band,
body[data-landing-splash="true"] .hero .dir-stage,
body[data-landing-splash="true"] .hero .dir-stage .wd,
body[data-landing-splash="true"] .hero .hero-manifesto,
body[data-landing-splash="true"] .hero .hero-tagline {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body[data-past-splash="true"] .hero {
  visibility: visible;
  pointer-events: auto;
  overflow: visible;
}
body[data-past-splash="true"] .hero .core,
body[data-past-splash="true"] .hero .ledger-band,
body[data-past-splash="true"] .hero .dir-stage,
body[data-past-splash="true"] .hero .hero-manifesto,
body[data-past-splash="true"] .hero .hero-tagline {
  visibility: visible;
  pointer-events: auto;
}
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(104px + clamp(48px, 8vh, 80px));
  width: 100%;
  overflow-x: clip;
  touch-action: pan-y;
  overscroll-behavior: none;
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}
.hero .core {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  touch-action: pan-y;
  padding-top: clamp(12px, 2vh, 24px);
  padding-bottom: clamp(8px, 2vh, 16px);
}

.hero .greeting {
  display: flex; align-items: center; gap: 14px;
  font-size: 15px; color: var(--slate);
  margin-bottom: 42px;
  opacity: 0;
}
body[data-past-splash="true"] .hero .greeting {
  animation: fade-in 800ms var(--ease) 120ms forwards;
}
.hero .greeting b { color: var(--graphite); font-weight: 700; }
.breath {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
  animation: breathe 4.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(0.8); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* directive hero — the headline IS the product */
.hero .dir-h1 {
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-top: clamp(40px, 6vh, 64px);
  opacity: 0;
}
body[data-past-splash="true"] .hero .dir-h1 {
  animation: fade-in 800ms var(--ease) 480ms forwards;
}
.dir-stage {
  display: block;
  position: relative;
  font-size: clamp(46px, 8.2vw, 126px);
  line-height: 1.02;
  min-height: 1.06em;
  margin-bottom: 0;
}
.dir-stage .wd {
  display: inline-block;
  opacity: 0; transform: translateY(0.45em);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: var(--wd, 0ms);
}
.dir-stage.shown .wd { opacity: 1; transform: translateY(0); }
.dir-stage.out .wd {
  opacity: 0; transform: translateY(-0.35em);
  transition-duration: 380ms;
}
.dir-stage .tc { color: var(--terracotta); }
.dir-h1 .ln {
  display: block; overflow: hidden;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.08;
  padding-bottom: 0.08em; margin-bottom: -0.08em;
  font-weight: 500;
}
.dir-h1 .ln > span {
  display: block;
  transform: translateY(112%);
}
body[data-past-splash="true"] .dir-h1 .ln > span {
  animation: line-rise 850ms var(--ease) 220ms forwards;
}

.hero h1 {
  font-weight: 800;
  font-size: clamp(54px, 9.2vw, 142px);
  line-height: 0.99;
  letter-spacing: -0.04em;
}
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.07em; margin-bottom: -0.07em; }
.hero h1 .ln > span {
  display: block;
  transform: translateY(112%) rotate(1.2deg);
  transform-origin: 0 100%;
}
body[data-past-splash="true"] .hero h1 .ln > span {
  animation: line-rise 850ms var(--ease) forwards;
}
body[data-past-splash="true"] .hero h1 .ln:nth-child(2) > span { animation-delay: 100ms; }
body[data-past-splash="true"] .hero h1 .ln:nth-child(3) > span { animation-delay: 200ms; }
@keyframes line-rise { to { transform: translateY(0) rotate(0deg); } }
.hero h1 .alt { font-weight: 500; color: var(--slate-dim); }

/* the listening line — cycling fragments */
.hear-line {
  margin-top: 48px;
  display: flex; align-items: baseline; gap: 18px;
  font-size: clamp(16px, 1.6vw, 19px);
  opacity: 0;
}
body[data-past-splash="true"] .hear-line {
  animation: fade-in 800ms var(--ease) 650ms forwards;
}
.hear-line .lbl {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-dim); font-weight: 500;
  flex-shrink: 0;
}
.hear-swap {
  position: relative;
  display: inline-block;
  height: 1.6em;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.hear-swap .ph {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  color: var(--graphite);
  font-weight: 600;
  transform: translateY(120%);
  transition: transform 600ms var(--ease), opacity 600ms var(--ease);
  opacity: 0;
}
.hear-swap .ph .t { color: var(--terracotta); font-family: var(--mono); font-size: 0.72em; font-weight: 600; margin-right: 12px; }
.hear-swap .ph.on { transform: translateY(0); opacity: 1; }
.hear-swap .ph.off { transform: translateY(-120%); opacity: 0; }

.hero-manifesto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  opacity: 0;
}
body[data-past-splash="true"] .hero-manifesto {
  animation: fade-in 800ms var(--ease) 160ms forwards;
}
.hero .m-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--luminous);
  font-weight: 600;
  margin-bottom: clamp(28px, 4vh, 44px);
}
.hero .manifesto-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(22px, 3.6vw, 36px);
  max-width: 52ch;
  width: 100%;
}
.hero .manifesto-body .mani-line {
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.035em;
  text-wrap: pretty;
  margin: 0;
  max-width: none;
}
.hero .manifesto-body .mani-line--core {
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.14;
}
.hero .manifesto-body .mani-line--close {
  font-size: clamp(22px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.028em;
  color: var(--slate);
  max-width: 46ch;
}
.hero .manifesto-body .mani-line--close .wd { color: #D8D5CE; }
.hero .manifesto-body .mani-line--close .wd.lit { color: var(--slate); }
.hero .manifesto-body .wd { color: #D8D5CE; transition: color 280ms var(--ease); }
.hero .manifesto-body .wd.lit { color: var(--graphite); }
.hero .manifesto-body .wd.hot.lit { color: var(--terracotta); }
.hero-tagline {
  font-size: clamp(24px, 3.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--slate-dim);
  text-align: left;
  margin: 0;
  padding: clamp(20px, 3vh, 32px) 0 clamp(32px, 5vh, 48px);
  opacity: 0;
}
body[data-past-splash="true"] .hero-tagline {
  animation: fade-in 800ms var(--ease) 920ms forwards;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.btn-solid {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--graphite); color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: -0.2px;
  padding: 19px 34px;
  border-radius: 999px;
  overflow: hidden;
  will-change: transform;
}
.btn-solid::before {
  content: ""; position: absolute; inset: 0;
  background: var(--terracotta);
  transform: translateY(102%);
  transition: transform 380ms var(--ease);
  border-radius: inherit;
}
.btn-solid:hover::before { transform: translateY(0); }
.btn-solid > * { position: relative; z-index: 1; }
.btn-solid .arr { transition: transform 380ms var(--ease); }
.btn-solid:hover .arr { transform: translateX(4px); }

.btn-line {
  font-weight: 700; font-size: 15px; letter-spacing: -0.2px;
  color: var(--graphite);
  position: relative;
  padding-bottom: 4px;
}
.btn-line::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--hairline-dark);
}
.btn-line::before {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--terracotta);
  transform: scaleX(0); transform-origin: 0 0;
  transition: transform 380ms var(--ease);
  z-index: 1;
}
.btn-line:hover::before { transform: scaleX(1); }

/* hero ledger */
.ledger-band {
  width: 100%;
  border-top: 1px solid var(--hairline);
  padding: 20px 0;
  overflow: hidden; white-space: nowrap; position: relative;
  opacity: 0;
  contain: paint;
}
body[data-past-splash="true"] .ledger-band {
  animation: fade-in 800ms var(--ease) 760ms forwards;
}
.ledger-band::before, .ledger-band::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 2; pointer-events: none;
}
.ledger-band::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.ledger-band::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }
.ledger {
  display: inline-flex;
  animation: ledger-move 56s linear infinite;
  max-width: none;
}
.ledger-band:hover .ledger { animation-play-state: paused; }
@keyframes ledger-move { to { transform: translateX(-50%); } }
.ledger .entry {
  font-family: var(--mono);
  font-size: 12px; color: var(--slate);
  padding: 0 32px;
  border-right: 1px solid var(--hairline);
  display: inline-flex; gap: 14px; align-items: baseline;
}
.ledger .entry .t { color: var(--terracotta); font-weight: 600; }

/* ================= equation layout — side by side ================= */
.eq-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
  touch-action: pan-y;
  overscroll-behavior: none;
}
@media (max-width: 920px) {
  .eq-layout { grid-template-columns: 1fr; }
}

/* ================= macro panel ================= */
.eq-macro-panel {
  background: white;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  overflow: visible;
  touch-action: pan-y;
  overscroll-behavior: none;
  box-shadow: 0 24px 64px -24px rgba(26,29,32,0.09);
}
.eqm-io-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--hairline);
}
.eqm-io-row > div { padding: 0 8px; }
.eqm-io-row > div:first-child { border-right: 1px solid var(--hairline); padding-left: 0; }
.eqm-io-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--slate-dim); margin-bottom: 4px;
  display: flex; align-items: center; gap: 4px;
}
.eqm-io-val {
  font-weight: 800; font-size: 32px; letter-spacing: -1.5px;
  color: var(--graphite); line-height: 1; margin-bottom: 4px;
}
.eqm-unit { font-size: 14px; font-weight: 600; letter-spacing: 0; }
.eqm-io-sub {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate-dim); margin-bottom: 8px;
}
.eqm-bar-track {
  height: 5px; border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}
.eqm-bar {
  display: block; height: 100%; border-radius: 999px;
  transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
}
.eqm-bar--intake { background: var(--terracotta); }
.eqm-bar--output { background: #10B981; }
.eqm-card {
  padding: 16px 24px;
  border-bottom: 1px solid var(--hairline);
}
.eqm-card:last-child { border-bottom: none; }
.eqm-card--macros { background: #F0FDF8; }
.eqm-card--activity { background: #F0FDF8; }
.eqm-macro-row { margin-bottom: 13px; }
.eqm-macro-row:last-child { margin-bottom: 0; }
.eqm-macro-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.eqm-macro-lbl {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.eqm-lbl--protein { color: var(--terracotta); }
.eqm-lbl--carbs   { color: var(--terracotta); }
.eqm-lbl--fat     { color: var(--terracotta); }
.eqm-lbl--bmr     { color: #10B981; }
.eqm-macro-vals {
  font-weight: 700; font-size: 14px; letter-spacing: -0.3px;
  color: var(--graphite);
}
.eqm-pct { color: var(--slate-dim); font-weight: 500; font-size: 13px; }
.eqm-bar--protein { background: var(--terracotta); }
.eqm-bar--carbs   { background: var(--terracotta); }
.eqm-bar--fat     { background: var(--terracotta); }
.eqm-bar--bmr     { background: linear-gradient(90deg, #059669, #10B981); }

/* ================= equation section — animated balance chart ================= */
.eq-chart-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 36px 40px;
  max-width: 760px;
  touch-action: pan-y;
  overscroll-behavior: none;
  box-shadow: 0 24px 64px -24px rgba(26,29,32,0.10);
}
.eq-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.eq-checkin-label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600;
}
.eq-checkin-time {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--slate-dim); font-weight: 500;
}
.eq-headline {
  font-weight: 800; font-size: 22px; letter-spacing: -0.6px;
  color: var(--graphite); line-height: 1.22;
  margin-bottom: 26px;
  min-height: 2.5em;
  transition: opacity 220ms ease;
  text-wrap: pretty;
}
.eq-chart-area { margin-bottom: 10px; }
.eq-axis-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: 6px;
  gap: 8px;
}
.eq-axis-lbl {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-dim); font-weight: 600;
}
.eq-axis-lbl--fuel { justify-self: start; color: var(--terracotta); }
.eq-axis-lbl--balance { justify-self: center; color: var(--emerald); letter-spacing: 0.14em; }
.eq-axis-lbl--activity { justify-self: end; color: var(--luminous); }
.eq-events {
  min-height: 32px;
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 20px;
}
.eq-chip {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--slate-dim);
  opacity: 0; transform: translateY(5px);
  transition: opacity 380ms ease, transform 380ms ease;
}
.eq-chip.on { opacity: 1; transform: translateY(0); }
.eq-chip .eq-chip-ok { color: var(--emerald); font-weight: 700; }
.eq-chip-type {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eq-chip--fuel .eq-chip-type { color: var(--terracotta); }
.eq-chip--activity .eq-chip-type { color: var(--luminous); }
.eq-chip-kcal {
  font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 0.06em;
}
.eq-chip--activity .eq-chip-kcal { color: var(--luminous); }
.eqm-fuel-add {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta);
  min-height: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 380ms ease, opacity 380ms ease, margin 380ms ease;
  margin-bottom: 0;
}
.eqm-fuel-add.on {
  max-height: 24px;
  opacity: 1;
  margin-bottom: 8px;
}
.eqm-io-val,
.eqm-macro-vals {
  transition: opacity 220ms ease;
}
.eq-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
}
.eq-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #ECFDF5;
  border: 1.5px solid rgba(16,185,129,0.22);
  border-radius: 999px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: var(--terracotta);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 300ms ease, transform 300ms ease;
}
.eq-add-btn:hover { background: #D1FAE5; transform: translateY(-2px); }
.eq-add-dot-ic {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terracotta); flex-shrink: 0;
  display: inline-block;
}
.eq-vs-target {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-dim);
  font-weight: 500;
  text-align: right;
  flex-shrink: 0;
  line-height: 1.25;
}
.eq-vs-target strong {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--graphite);
  margin-left: 8px;
  white-space: nowrap;
}
#eq-dot-ring {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes eqRing {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ================= integrations ================= */
.int-section {
  padding: 88px 0;
  border-top: 1px solid var(--hairline);
  background: var(--sand);
}
.int-head { margin-bottom: 48px; }
.int-head .m-mark { margin-bottom: 16px; }
.int-sub {
  font-size: 16px; color: var(--slate); line-height: 1.6;
  max-width: 52ch; text-wrap: pretty;
}
.int-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.int-col-lbl {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--slate-dim); font-weight: 600;
  margin-bottom: 14px;
}
.int-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.int-pill {
  background: white;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px;
  color: var(--graphite);
  transition: border-color 260ms ease, transform 260ms ease, background 260ms ease;
  cursor: default;
}
.int-pill:hover { border-color: var(--terracotta); transform: translateY(-2px); background: #F0FDF8; }
@media (max-width: 860px) { .int-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ================= shared section chrome ================= */
section.feature {
  padding: 112px 0;
  border-top: 1px solid var(--hairline);
  touch-action: pan-y;
  overscroll-behavior: none;
}
#memory { background: var(--sand); }
.f-head { margin-bottom: 60px; max-width: 880px; }
.f-index {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600;
  margin-bottom: 26px;
  display: flex; align-items: center; gap: 14px;
}
.f-index::after { content: ""; height: 1px; width: 56px; background: var(--hairline-dark); }
.f-head h2 {
  font-weight: 800;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.f-head h2 .alt { font-weight: 500; color: var(--slate-dim); }
.f-head .lede {
  font-size: 18px; line-height: 1.65; color: var(--slate);
  max-width: 56ch; text-wrap: pretty;
}
.f-head .lede strong { color: var(--graphite); font-weight: 700; }

/* reveal */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* ================= §01 chat ================= */
.log-grid {
  display: grid; grid-template-columns: 1fr 1.08fr; gap: 88px;
  align-items: center;
}

/* ================= §02 engine — callouts + insight phone ================= */
.engine-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 88px;
  align-items: center;
}
.engine-callouts {
  border-top: 1px solid var(--hairline);
}
.engine-callout {
  --ec-accent: var(--terracotta);
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 0;
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease), opacity 320ms var(--ease), transform 320ms var(--ease);
}
.engine-callout[data-dim="fuel"] { --ec-accent: var(--amber); }
.engine-callout[data-dim="activity"] { --ec-accent: var(--luminous); }
.engine-callout[data-dim="recovery"] { --ec-accent: var(--terracotta); }
.engine-callout[data-dim="mindfulness"] { --ec-accent: var(--mindfulness); }
.engine-callout .ec-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--ec-accent) 12%, transparent);
  color: var(--ec-accent);
  margin-top: 2px;
}
.engine-callout .ec-body { flex: 1; min-width: 0; }
.engine-callout .ec-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: var(--ec-accent);
  margin-bottom: 8px;
}
.engine-callout .ec-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ec-accent);
  flex-shrink: 0;
}
.engine-callout .ec-headline {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.18px;
  color: var(--slate);
  font-weight: 600;
  text-wrap: pretty;
  margin-bottom: 6px;
}
.engine-callout .ec-tag {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--slate-dim);
  font-weight: 400;
  text-wrap: pretty;
}
.engine-callout .ec-chev {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--ec-accent);
  opacity: 0.45;
  flex-shrink: 0;
  padding-top: 18px;
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}
.engine-callout:not(.on) { opacity: 0.68; }
.engine-callout:not(.on):hover { opacity: 0.88; }
.engine-callout:hover .ec-chev { opacity: 0.85; }
.engine-callout.on {
  opacity: 1;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ec-accent) 22%, transparent);
  border-radius: 16px;
  padding: 18px 16px;
  margin: 6px 0;
  box-shadow: 0 1px 1px rgba(26, 29, 32, 0.04), 0 8px 24px -12px rgba(26, 29, 32, 0.12);
  transform: translateX(2px);
}
.engine-callout.on .ec-headline { color: var(--graphite); font-weight: 800; }
.engine-callout.on .ec-tag { color: var(--slate); }
.engine-callout.on .ec-chev { opacity: 1; }

.ins-phone .screen { display: flex; flex-direction: column; }
.ins-stack {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ins-detail {
  position: relative;
  flex: 1;
  min-height: 0;
  z-index: 1;
  background: var(--app-canvas);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior: none;
}
.ins-app-head {
  flex-shrink: 0;
  padding: 4px 18px 10px;
  background: var(--app-canvas);
  border-bottom: 1px solid var(--hairline);
}
.ins-detail-scroll {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 36px;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.ins-panel { margin-bottom: 18px; }
.ins-panel-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ins-panel-eyebrow .ins-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ins-accent, var(--terracotta));
  flex-shrink: 0;
}
.ins-panel-eyebrow .ins-eyebrow-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ins-accent, var(--terracotta));
}
.ins-panel-headline {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
  color: var(--graphite);
  text-wrap: pretty;
  margin-bottom: 12px;
}
.ins-panel-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
  text-wrap: pretty;
}
.ins-phone[data-dim="fuel"] { --ins-accent: var(--amber); }
.ins-phone[data-dim="activity"] { --ins-accent: var(--luminous); }
.ins-phone[data-dim="recovery"] { --ins-accent: var(--terracotta); }
.ins-phone[data-dim="mindfulness"] { --ins-accent: var(--mindfulness); }
.ins-detail .ins-rec {
  margin-top: 0;
  padding: 14px 14px;
  border-radius: 14px;
}
.ins-detail .dr-name { font-size: 15px; }
.ins-detail .dr-meta { font-size: 9.5px; margin-bottom: 10px; }
.ins-detail .dr-why { font-size: 12px; margin-bottom: 12px; }
.ins-detail .dr-view { padding: 11px 14px; font-size: 13px; border-radius: 10px; }
.ins-detail .ins-dc { margin-top: 12px; }
.ins-detail .dim-dc-btn {
  padding: 10px 0 8px;
  pointer-events: none;
}
.ins-detail .dc-lbl { font-size: 13px; }
.ins-detail .dc-tog { display: none; }
.ins-detail[data-expand="why"] .ins-dc-why .dc-num,
.ins-detail[data-expand="math"] .ins-dc-why .dc-num,
.ins-detail[data-expand="math"] .ins-dc-math .dc-num {
  background: rgba(16, 185, 129, 0.1);
  color: var(--terracotta-deep);
}
.ins-detail .dim-dc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 540ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ins-detail-scroll.dim-swapping {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.ins-detail-scroll.dim-enter > .ins-panel,
.ins-detail-scroll.dim-enter > .ins-rec,
.ins-detail-scroll.dim-enter > .ins-dc {
  animation: ins-panel-rise 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ins-detail-scroll.dim-enter > .ins-rec { animation-delay: 90ms; }
.ins-detail-scroll.dim-enter > .ins-dc-why { animation-delay: 170ms; }
.ins-detail-scroll.dim-enter > .ins-dc-math { animation-delay: 230ms; }
@keyframes ins-panel-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ins-detail .dim-dc-btn.is-pressed {
  background: rgba(16, 185, 129, 0.08);
  border-radius: 10px;
  transition: background 180ms var(--ease);
}

.ins-detail[data-expand="why"] .ins-dc-why .dim-dc-body,
.ins-detail[data-expand="math"] .ins-dc-why .dim-dc-body,
.ins-detail[data-expand="math"] .ins-dc-math .dim-dc-body {
  grid-template-rows: 1fr;
}
.ins-detail .dim-why-text {
  font-size: 12px;
  line-height: 1.55;
  padding: 12px 12px;
  border-radius: 10px;
}
.ins-detail .dim-math-card {
  padding: 12px 12px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.ins-detail .dmc-k { font-size: 12px; }
.ins-detail .dmc-v { font-size: 14px; }
.ins-detail .dmc-note { font-size: 11px; }

.ins-tap {
  display: none;
}
.log-points { border-top: 1px solid var(--hairline); }
.log-point {
  display: grid; grid-template-columns: 52px 1fr; gap: 22px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
@media (max-width: 480px) {
  .log-point { grid-template-columns: 38px 1fr; gap: 16px; padding: 20px 0; }
  .log-point .no { padding-top: 2px; }
}
.log-point::before {
  content: ""; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--terracotta);
  transition: width 500ms var(--ease);
}
.log-point:hover::before { width: 52px; }
.log-point .no {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--slate-dim); font-weight: 500;
  padding-top: 6px;
}
.log-point h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 5px; }
.log-point p { font-size: 15px; color: var(--slate); line-height: 1.6; }

/* intake chips — mirrors the app's Lazy Log / Loma Lens sheet */
.intake-chips { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.intake-chips .chip {
  display: flex; align-items: center; gap: 14px;
  background: var(--app-canvas);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 14px; color: var(--slate);
  transition: background 360ms var(--ease), transform 360ms var(--ease);
}
.intake-chips .chip:hover { background: #F1F5F9; transform: translateX(4px); }
.intake-chips .chip b { color: var(--graphite); font-weight: 700; }
.intake-chips .chip-ic {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.intake-chips .chip-ic.tc { background: rgba(16, 185, 129, 0.12); color: var(--terracotta); }
.intake-chips .chip-ic.em { background: rgba(16, 185, 129, 0.12); color: var(--luminous); }

/* (old phone styles superseded by the realistic bezel version below) */
.app-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 20px 8px;
  flex-shrink: 0;
  background: var(--app-canvas);
  position: relative;
  z-index: 2;
}
.app-wordmark { font-weight: 800; font-size: 22px; letter-spacing: -1.2px; color: var(--graphite); line-height: 1; display: inline-flex; align-items: center; gap: 8px; }
.app-logo-wave {
  width: 22px; height: 22px; flex-shrink: 0;
}
.app-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--luminous), var(--emerald));
  color: #fff; font-weight: 700; font-size: 11px;
  display: grid; place-items: center;
}
.app-chat {
  flex: 1;
  padding: 8px 16px 14px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  transition: opacity 280ms var(--ease);
}
.app-chat.fading { opacity: 0; }
.bubble {
  font-size: 13.5px; line-height: 1.45;
  overflow-wrap: break-word;
  opacity: 0; transform: translateY(8px) scale(0.985);
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
  padding: 10px 13px;
  will-change: opacity, transform;
}
.bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.bubble.user {
  align-self: flex-end;
  max-width: 78%;
  background: var(--graphite); color: var(--paper);
  border-radius: 18px 18px 6px 18px;
}
.bubble.user .caret {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--terracotta);
  vertical-align: text-bottom; margin-left: 2px;
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* Loma replies as the app's insight card */
.insight {
  align-self: stretch;
  background: #fff;
  border: 1px solid var(--app-border);
  border-left: 4px solid var(--terracotta);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 2px 10px rgba(26, 29, 32, 0.04), 0 8px 24px -8px rgba(26, 29, 32, 0.08);
  opacity: 0; transform: translateY(8px) scale(0.985);
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.insight.show { opacity: 1; transform: translateY(0) scale(1); }
.insight .i-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 7px;
}
.insight .i-eyebrow .bulb {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.insight .i-text { font-size: 13px; line-height: 1.5; color: var(--graphite); font-weight: 500; overflow-wrap: break-word; word-break: break-word; }
.insight .i-text .w { opacity: 0; transition: opacity 280ms var(--ease); }
.insight .i-text .w.on { opacity: 1; }
.insight .i-why {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--slate);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 6px 12px;
  opacity: 0;
  transition: opacity 420ms var(--ease), background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.insight .i-why.show { opacity: 1; }
.insight .i-why.tapped { background: var(--graphite); color: var(--paper); border-color: var(--graphite); }

.bubble.typing {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 6px 16px 16px 16px;
  display: inline-flex; gap: 5px; align-items: center;
  padding: 14px 16px;
}
.bubble.typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terracotta);
  animation: typing-dot 1.1s var(--ease) infinite;
}
.bubble.typing i:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 30% { transform: translateY(-4px); opacity: 0.5; } }

.receipt-chip {
  align-self: flex-end;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.05em;
  color: var(--slate-dim);
  opacity: 0;
  transition: opacity 420ms var(--ease);
  flex-shrink: 0;
}
.receipt-chip.show { opacity: 1; }
.receipt-chip .ok { color: var(--emerald); font-weight: 600; }

.app-foot {
  flex-shrink: 0;
  padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 8px;
  background: var(--app-canvas);
  position: relative;
  z-index: 2;
}
.app-foot .fake-field {
  flex: 1;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 10px 15px;
  font-size: 12.5px; color: var(--slate-dim);
}
.app-foot .mic {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--terracotta); color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
}
.log-phone .app-foot .mic::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--terracotta);
  opacity: 0;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
}
.log-phone .app-foot .mic.rec::after {
  animation: mic-ring 1.8s var(--ease) infinite;
  opacity: 1;
}
@keyframes mic-ring {
  0% { transform: scale(0.86); opacity: 0.75; }
  70%, 100% { transform: scale(1.28); opacity: 0; }
}

/* logged result card */
.logged-result { padding: 14px 16px; }
.lr-top {
  display: flex; align-items: flex-start; gap: 11px;
  margin-bottom: 14px;
}
.lr-check {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(16,185,129,0.12);
  color: var(--terracotta);
  display: grid; place-items: center;
  flex-shrink: 0; margin-top: 2px;
}
.lr-title {
  font-weight: 800; font-size: 14px; letter-spacing: -0.2px;
  color: var(--graphite);
}
.lr-item {
  font-size: 12px; color: var(--slate);
  line-height: 1.4; margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.lr-rows {
  border-top: 1px solid var(--app-border);
  margin-bottom: 12px;
}
.lr-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--app-border);
  font-size: 13px;
}
.lr-k { color: var(--slate); font-weight: 500; }
.lr-v { font-weight: 700; color: var(--graphite); font-family: var(--mono); font-size: 12.5px; }

/* ================= §02 dimensions (tabs) ================= */
.dim-stage {
  display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 88px;
  align-items: start;
}
.dim-list { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.dim-tab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
  width: 100%;
}
.dim-tab .d-name {
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 38px);
  letter-spacing: -0.03em;
  color: var(--slate-dim);
  transition: color 420ms var(--ease), transform 420ms var(--ease);
  transform-origin: 0 100%;
  display: inline-block;
}
.dim-tab .d-idx {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em;
  color: var(--slate-dim); font-weight: 500;
  transition: color 420ms var(--ease);
}
.dim-tab:hover .d-name { color: var(--graphite-soft); }
.dim-tab.on .d-name { color: var(--graphite); transform: translateX(10px); }
.dim-tab.on .d-idx { color: var(--terracotta); }
.dim-tab .d-progress {
  position: absolute; bottom: -1px; left: 0; height: 1px;
  width: 100%;
  background: var(--terracotta);
  transform: scaleX(0); transform-origin: 0 0;
}
.dim-tab.on .d-progress { animation: dim-progress var(--dim-dur, 5200ms) linear forwards; }
.dim-list.user-locked .dim-tab.on .d-progress { animation: none; transform: scaleX(1); }
@keyframes dim-progress { to { transform: scaleX(1); } }

.dim-view { min-height: 340px; position: relative; }
.dim-sentence {
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: pretty;
}
.dim-sentence .wd {
  display: inline-block;
  opacity: 0; transform: translateY(0.5em);
  transition: opacity 460ms var(--ease), transform 460ms var(--ease);
  transition-delay: var(--wd, 0ms);
}
.dim-view.shown .dim-sentence .wd { opacity: 1; transform: translateY(0); }
.dim-sentence .q { color: var(--terracotta); }
.dim-tagline {
  margin-top: 30px;
  font-size: 15px; color: var(--slate);
  display: flex; align-items: baseline; gap: 12px;
  opacity: 0;
  transition: opacity 460ms var(--ease) 420ms;
}
.dim-view.shown .dim-tagline { opacity: 1; }
.dim-tagline .mk { color: var(--terracotta); font-weight: 700; }

/* see-the-math inline */
.math-toggle {
  margin-top: 36px;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--slate);
  border: 1px solid var(--hairline-dark);
  border-radius: 999px;
  padding: 11px 20px;
  transition: border-color 360ms var(--ease), color 360ms var(--ease), background 360ms var(--ease), opacity 460ms var(--ease) 500ms;
  opacity: 0;
}
.dim-view.shown .math-toggle { opacity: 1; }
.math-toggle:hover { border-color: var(--graphite); color: var(--graphite); }
.math-toggle.open { background: var(--graphite); border-color: var(--graphite); color: var(--paper); }
.math-toggle .chev { transition: transform 360ms var(--ease); display: inline-block; }
.math-toggle.open .chev { transform: rotate(180deg); }

.dim-math {
  max-height: 0; overflow: hidden;
  transition: max-height 600ms var(--ease), opacity 600ms var(--ease);
  opacity: 0;
}
.dim-math.open { max-height: none; opacity: 1; overflow: visible; }
.dim-math .dm-inner {
  margin-top: 24px;
  background: var(--graphite);
  color: var(--paper);
  border-radius: 16px;
  padding: 26px 30px;
}
.dim-math .dm-row {
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--graphite-soft);
  font-size: 14px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.dim-math.open .dm-row { opacity: 1; transform: translateY(0); }
.dim-math .dm-row:last-child { border-bottom: none; }
.dim-math .dm-row .k { color: var(--slate-dim); }
.dim-math .dm-row .k b { color: var(--paper); font-weight: 700; }
.dim-math .dm-row .v { font-family: var(--mono); font-size: 13px; color: var(--luminous); text-align: right; }
.dim-math .dm-row .v.dim { color: var(--slate-dim); font-size: 11.5px; max-width: 36ch; }

/* ================= §03 memory (morphing sentence) ================= */
.memory-stage { max-width: 920px; }
.memory-weeks {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 56px;
}
.wk-tab {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--slate-dim);
  padding: 0 0 16px;
  margin-right: 44px;
  position: relative;
  transition: color 360ms var(--ease);
}
.wk-tab:hover { color: var(--graphite-soft); }
.wk-tab.on { color: var(--graphite); }
.wk-tab::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--terracotta);
  transform: scaleX(0); transform-origin: 0 0;
  transition: transform 420ms var(--ease);
}
.wk-tab.on::after { transform: scaleX(1); }

.memory-quote {
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  min-height: 3.6em;
  text-wrap: pretty;
}
.memory-quote .wd {
  display: inline-block;
  opacity: 0; transform: translateY(0.45em);
  transition: opacity 440ms var(--ease), transform 440ms var(--ease);
  transition-delay: var(--wd, 0ms);
}
.memory-quote.shown .wd { opacity: 1; transform: translateY(0); }
.memory-quote .soft { color: var(--slate-dim); }
.memory-note {
  margin-top: 34px;
  font-size: 15.5px; color: var(--slate);
  max-width: 52ch;
  display: flex; gap: 14px; align-items: baseline;
  opacity: 0;
  transition: opacity 440ms var(--ease) 480ms;
}
.memory-quote.shown + .memory-note { opacity: 1; }
.memory-note .mk {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600;
  flex-shrink: 0;
  padding-top: 3px;
}

/* ================= §04 tailored ================= */
.tailored { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.t-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 32px 30px;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 420ms var(--ease);
}
.t-card::before {
  content: ""; position: absolute; top: 0; left: 30px; right: 30px; height: 2px;
  background: var(--terracotta);
  transform: scaleX(0); transform-origin: 0 0;
  transition: transform 480ms var(--ease);
}
.t-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 70px -36px rgba(26, 29, 32, 0.3);
  border-color: var(--hairline-dark);
}
.t-card:hover::before { transform: scaleX(1); }
.t-card .t-kind {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--slate);
  margin-bottom: 22px;
  display: flex; justify-content: space-between;
}
.t-card .t-kind .k1 { color: var(--terracotta); }
.t-card h3 { font-weight: 800; font-size: 24px; letter-spacing: -0.8px; line-height: 1.15; margin-bottom: 10px; }
.t-card .t-why {
  font-size: 14.5px; color: var(--slate); line-height: 1.6;
  margin-bottom: 26px; text-wrap: pretty;
}
.t-card .t-why b { color: var(--graphite); font-weight: 700; }
.t-card .t-steps {
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.t-card .t-steps .step {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  font-size: 13.5px; line-height: 1.55; color: var(--slate);
}
.t-card .t-steps .step b {
  font-family: var(--mono);
  color: var(--terracotta); font-weight: 600; font-size: 11px;
  padding-top: 2px;
}

/* ================= enrollment ================= */
.enroll {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--graphite);
  color: var(--paper);
  padding: clamp(56px, 10vh, 120px) 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
}
.enroll-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.enroll-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4.5vh, 44px);
  margin-bottom: clamp(28px, 4vh, 44px);
}
.enroll-pulse {
  position: relative;
  width: clamp(88px, 18vmin, 140px);
  height: clamp(88px, 18vmin, 140px);
  display: grid;
  place-items: center;
  color: var(--luminous);
}
.enroll-wordmark {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(44px, 11vmin, 80px);
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--paper);
  margin: 0;
}
.enroll .f-index { color: var(--terracotta); }
.enroll .f-index::after { background: var(--graphite-soft); }
.enroll .lede {
  font-size: 18px; line-height: 1.65; color: var(--slate-dim);
  max-width: 52ch; text-wrap: pretty;
  margin-bottom: 64px;
}
.enroll .lede strong { color: var(--paper); font-weight: 700; }

.enroll-form {
  display: flex; gap: 10px;
  max-width: 600px;
  background: var(--paper);
  border-radius: 999px;
  padding: 8px 8px 8px 28px;
  transition: box-shadow 420ms var(--ease);
}
.enroll-form:focus-within { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3); }
.enroll-form input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: none;
  font-family: var(--sans);
  font-size: 16px; font-weight: 500; color: var(--graphite);
}
.enroll-form input::placeholder { color: var(--slate-dim); }
.enroll-form button {
  background: var(--graphite); color: #fff;
  font-weight: 700; font-size: 15px; letter-spacing: -0.2px;
  padding: 16px 28px;
  border-radius: 999px;
  white-space: nowrap;
  position: relative; overflow: hidden;
  transition: color 360ms var(--ease);
}
.enroll-form button::before {
  content: ""; position: absolute; inset: 0;
  background: var(--terracotta);
  transform: translateY(102%);
  transition: transform 360ms var(--ease);
  border-radius: inherit;
}
.enroll-form button:hover::before { transform: translateY(0); }
.enroll-form button span { position: relative; z-index: 1; }

.enroll .fineprint {
  margin-top: clamp(24px, 4vh, 36px);
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
  line-height: 2.1;
  max-width: 52ch;
}
.enroll .fineprint .sep { color: var(--terracotta); padding: 0 10px; }

/* ================= footer ================= */
footer {
  background: var(--graphite);
  color: var(--slate-dim);
  border-top: 1px solid var(--graphite-soft);
  padding: 36px 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
footer .footer-top {
  width: 100%;
  max-width: var(--w);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
footer .wordmark { font-weight: 800; font-size: 22px; letter-spacing: -1.2px; color: var(--paper); }
footer .wordmark .tail { color: var(--terracotta); }
footer .links { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
footer .links a, footer .copy {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
}
footer .links a { position: relative; }
footer .links a:hover { color: var(--terracotta); }
footer .copy {
  width: 100%;
  max-width: 36ch;
  line-height: 1.6;
}

/* ================= responsive ================= */
@media (max-width: 1080px) {
  .log-grid { grid-template-columns: 1fr; gap: 56px; }
  .engine-grid { grid-template-columns: 1fr; gap: 56px; }
  .engine-callouts { display: none; }
  .engine-phone-col { max-width: 360px; margin: 0 auto; width: 100%; }

  .dim-view { min-height: 0; }
  .tailored { grid-template-columns: 1fr; }

}
@media (max-width: 480px) {
  .phone {
    width: min(310px, 88vw);
    border-radius: 58px;
    padding: 6px;
  }
  .ios-status-bar { padding: 10px 16px 0; height: 42px; }
  .ios-status-time { font-size: 14px; }
  .ios-dynamic-island { width: 98px; height: 20px; top: 9px; }
  .ios-status-icons { gap: 4px; min-width: 56px; }
  .home-indicator { width: 108px; height: 3.5px; bottom: 5px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; overflow-x: clip; overflow-y: visible; }
  .dir-stage { min-height: 2.12em; }
  .mast-bar { padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .mast.scrolled .mast-bar { padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .mast .wordmark { font-size: 20px; min-height: 24px; gap: 9px; }
  .logo-beat { width: 24px; height: 24px; }
  .logo-wave { width: 24px; height: 24px; }

  .splash-stage {
    padding:
      calc(28px + env(safe-area-inset-top, 0px))
      20px
      16px;
  }
  .splash-pulse {
    width: clamp(160px, 52vw, 240px);
    height: clamp(160px, 52vw, 240px);
  }
  .splash-wordmark { font-size: clamp(44px, 14vw, 64px); }
  .splash-cue { padding-bottom: clamp(40px, 10vh, 64px); }

  .hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 96px + clamp(56px, 11vh, 88px));
  }
  .hero .core {
    padding-top: clamp(28px, 6vh, 48px);
  }
  .hero-manifesto {
    width: 100%;
    padding-top: clamp(8px, 2vh, 16px);
  }
  .hero .m-mark {
    font-size: 10px;
    letter-spacing: 0.18em;
    margin-bottom: 22px;
  }
  .hero .manifesto-body {
    max-width: 100%;
    gap: 16px;
  }
  .hero .manifesto-body .mani-line {
    font-size: clamp(21px, 5.8vw, 26px);
    line-height: 1.24;
    letter-spacing: -0.03em;
  }
  .hero .manifesto-body .mani-line--core {
    font-size: clamp(23px, 6.4vw, 28px);
    line-height: 1.2;
  }
  .hero .manifesto-body .mani-line--close {
    font-size: clamp(16px, 4.4vw, 19px);
    line-height: 1.45;
    letter-spacing: -0.02em;
    max-width: 100%;
  }
  .mast .right { gap: 10px; }
  .mast .nav-links { gap: 14px; }
  .mast .nav-links a {
    font-size: 12px;
    letter-spacing: -0.1px;
    text-transform: none;
    font-weight: 600;
    color: var(--slate);
  }
  .cta .cta-long { display: none; }
  .cta .cta-short { display: inline; }
  .cta.sm { padding: 5px 5px 5px 14px; }
  .cta.sm .cta-label { font-size: 13px; }
  .cta.sm .cta-chip { width: 30px; height: 30px; }
  .cta.sm .cta-chip .arr { font-size: 13px; }
  .mast .clock { display: none; }
  section.feature { padding: 88px 0; }

  .f-head { margin-bottom: 44px; }
  .enroll { padding: clamp(48px, 8vh, 88px) 0; }
  .enroll-form { flex-direction: column; border-radius: 24px; padding: 14px; gap: 12px; }
  .enroll-form input { padding: 8px 12px; }
  .hear-line { flex-direction: column; gap: 10px; }
  .memory-weeks { flex-wrap: wrap; gap: 18px 0; }
  .wk-tab { margin-right: 28px; }

  .log-grid { gap: 48px; }
  .engine-grid { gap: 48px; }
  .engine-callout .ec-headline { font-size: 15px; }
  .engine-callout .ec-tag { font-size: 12.5px; }
  .ins-panel-headline { font-size: 20px; }
  .log-point { padding: 22px 0; }
  .ledger .entry { font-size: 11px; padding: 0 20px; }

  .hero .greeting { font-size: 14px; margin: 8px 0 28px; gap: 8px; }

  .eq-chart-card { padding: 22px 18px; border-radius: 20px; }
  .eq-headline { font-size: 18px; min-height: 0; margin-bottom: 18px; }
  .eq-card-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    padding-top: 14px;
  }
  .eq-add-btn {
    padding: 7px 12px;
    font-size: 12px;
    gap: 6px;
    border-width: 1px;
    justify-self: start;
    max-width: 100%;
  }
  .eq-add-dot-ic { width: 6px; height: 6px; }
  .eq-vs-target {
    font-size: 8.5px;
    letter-spacing: 0.08em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }
  .eq-vs-target strong {
    font-size: 15px;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .engine-phone-col { order: -1; }
}

/* ================= reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  .splash-pulse-glyph,
  .splash-pulse-ring,
  .splash-pulse-glow { animation: none; }
  .splash-wordmark { animation: none; opacity: 1; transform: none; }
  .splash-intro { opacity: calc(1 - var(--splash-progress) * 1.1); transform: none; }
  html { scroll-behavior: auto; }
  .hero h1 .ln > span, .dir-h1 .ln > span { animation: none; transform: none; }
  .dir-stage .wd { opacity: 1; transform: none; transition: none; }
  .hero-manifesto, .hero .dir-h1, .hero-tagline, .hear-line, .ledger-band { animation: none; opacity: 1; }
  .ledger { animation: none; }
  .breath { animation: none; }
  .app-foot .mic::after { animation: none; opacity: 0; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero .manifesto-body .wd { color: var(--graphite); transition: none; }
  .hero .manifesto-body .wd.hot { color: var(--terracotta); }
  .hero .manifesto-body .mani-line--close .wd { color: var(--slate); }
  .dim-sentence .wd, .memory-quote .wd { opacity: 1; transform: none; transition: none; }
  .dim-tagline, .math-toggle, .memory-note { opacity: 1; transition: none; }
  .dim-tab.on .d-progress { animation: none; transform: scaleX(1); }
  .bubble, .receipt-chip, .insight { transition: none; }
  .scroll-progress { display: none; }
  .logo-wave { animation: none; }
  .logo-beat::before { animation: none; }
  .dictation, .dict-pulse, .dict-wave span { animation: none; transition: none; }
  .ins-detail, .ins-tap { transition: none; animation: none; }
  .ins-detail[data-expand="math"] .ins-dc-why .dim-dc-body,
  .ins-detail[data-expand="math"] .ins-dc-math .dim-dc-body { grid-template-rows: 1fr; }
  .dim-body, .dim-math2, .ec-math { transition: none; }
  .dim-item .dim-sentence .wd { opacity: 1; transform: none; transition: none; }
  .dim-head .d-progressbar { animation: none; }
  .phone { transform: none; }
}

/* ============================================================
   v4 layer — bezel phone, dictation, accordion, coach hacks,
   live enrollment insight, softened type
   ============================================================ */

/* ---- realistic iPhone (Dynamic Island, thin bezels, proper proportions) ---- */
.phone-scene {
  display: flex; justify-content: center;
  perspective: 1600px;
}
.phone {
  width: min(344px, 82vw);
  aspect-ratio: 390 / 844; /* modern iPhone Pro portrait ratio */
  background: #0B0C0E;
  border-radius: 66px;
  padding: 7.5px;
  border: 1px solid #222428;
  box-shadow:
    0 28px 75px -22px rgba(0, 0, 0, 0.58),
    0 8px 26px -8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.07),
    inset 0 -2px 3px rgba(0,0,0,0.65);
  transform: none;
  transition: transform 700ms var(--ease), box-shadow 700ms var(--ease);
  overflow: visible;
  display: block;
  min-height: 0;
  position: relative;
}
.phone:hover {
  transform: translateY(-5px);
  box-shadow:
    0 42px 95px -18px rgba(0, 0, 0, 0.6),
    0 14px 36px -8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.screen {
  background: var(--app-canvas);
  border-radius: 58px;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.035);
}

/* iOS 17/18 status bar — matches in-app LomaScreen layout */
.ios-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px 0;
  height: 44px;
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
}
.ios-status-time {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
  line-height: 1;
  z-index: 1;
  min-width: 42px;
}
.ios-dynamic-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 22px;
  background: var(--graphite);
  border-radius: 999px;
  z-index: 2;
}
.ios-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--graphite);
  z-index: 1;
  min-width: 62px;
  justify-content: flex-end;
}
.ios-status-icons svg {
  display: block;
  flex-shrink: 0;
}

/* Bottom home indicator (modern iPhone) */
.home-indicator {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 128px;
  height: 4.5px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 999px;
  z-index: 30;
}

/* Subtle glass + thin bezel on screen */
.screen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 58px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 1;
}
/* ---- dictation overlay (the Lazy Log moment) ---- */
.screen.dictating .app-body,
.screen.dictating .app-foot {
  opacity: 0.42;
  filter: blur(3px);
  transform: scale(0.99);
  transition: opacity 320ms var(--ease), filter 320ms var(--ease), transform 320ms var(--ease);
}
.dictation {
  position: absolute; inset: 0;
  background: rgba(249, 248, 246, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
  padding: 0 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms var(--ease);
  z-index: 14;
}
.dictation.on {
  opacity: 1;
  animation: dictation-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dictation-in {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}
.dict-mic {
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6EE7B7, var(--terracotta) 68%, var(--terracotta-deep));
  box-shadow:
    0 16px 36px -10px rgba(16, 185, 129, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    inset 0 -5px 12px rgba(0, 0, 0, 0.1);
  display: grid; place-items: center;
  position: relative;
}
.dict-pulse {
  position: absolute; inset: -13px;
  border-radius: 50%;
  background: var(--terracotta);
  opacity: 0.2;
  animation: dict-pulse 1.6s ease-in-out infinite;
  z-index: -1;
}
@keyframes dict-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.16; }
  50% { transform: scale(1.12); opacity: 0.3; }
}
.dict-wave { display: flex; align-items: center; gap: 3px; height: 28px; }
.dict-wave span {
  width: 3px; border-radius: 2px;
  background: var(--terracotta);
  animation: dict-wave 1s ease-in-out infinite;
}
.dict-wave span:nth-child(1) { height: 30%; animation-delay: 0s; }
.dict-wave span:nth-child(2) { height: 55%; animation-delay: 0.1s; }
.dict-wave span:nth-child(3) { height: 90%; animation-delay: 0.2s; }
.dict-wave span:nth-child(4) { height: 70%; animation-delay: 0.3s; }
.dict-wave span:nth-child(5) { height: 100%; animation-delay: 0.4s; }
.dict-wave span:nth-child(6) { height: 45%; animation-delay: 0.5s; }
.dict-wave span:nth-child(7) { height: 65%; animation-delay: 0.6s; }
.dict-wave span:nth-child(8) { height: 35%; animation-delay: 0.7s; }
.dict-wave span:nth-child(9) { height: 80%; animation-delay: 0.8s; }
.dict-wave span:nth-child(10) { height: 50%; animation-delay: 0.9s; }
.dict-wave span:nth-child(11) { height: 75%; animation-delay: 1s; }
.dict-wave span:nth-child(12) { height: 40%; animation-delay: 1.1s; }
@keyframes dict-wave {
  0%, 100% { opacity: 0.3; transform: scaleY(0.4); }
  50% { opacity: 1; transform: scaleY(1); }
}
.dict-transcript {
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.45;
  color: var(--graphite);
  text-align: center;
  min-height: 2.8em;
  max-width: 248px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px -14px rgba(26, 29, 32, 0.2);
}
.dict-cursor {
  display: inline-block; width: 2px; height: 15px;
  background: var(--terracotta);
  vertical-align: middle; margin-left: 2px;
  animation: caret-blink 0.9s steps(1) infinite;
}
.dict-hint {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-dim);
}

.app-foot .mic { transition: transform 240ms var(--ease); }
.app-foot .mic.rec { transform: scale(0.86); }

.ins-phone .ins-rec {
  box-shadow: 0 2px 8px rgba(26, 29, 32, 0.03);
}
.ins-detail-scroll {
  scroll-behavior: smooth;
}

/* ---- recommendation card · why · math (shared) ---- */
.dim-rec {
  --hero-tint: rgba(16, 185, 129, 0.05);
  --hero-stroke: rgba(16, 185, 129, 0.22);
  --hero-accent: var(--terracotta);
  margin-top: 8px;
  background: linear-gradient(180deg, var(--hero-tint) 0%, #fff 100%);
  border: 1px solid var(--hero-stroke);
  border-radius: 20px;
  padding: 18px 18px;
}
.dim-rec[data-dim="fuel"] {
  --hero-tint: rgba(16, 185, 129, 0.05);
  --hero-stroke: rgba(16, 185, 129, 0.22);
  --hero-accent: var(--amber);
}
.dim-rec[data-dim="activity"] {
  --hero-tint: rgba(16, 185, 129, 0.06);
  --hero-stroke: rgba(16, 185, 129, 0.22);
  --hero-accent: var(--luminous);
}
.dim-rec[data-dim="recovery"] {
  --hero-tint: rgba(16, 185, 129, 0.06);
  --hero-stroke: rgba(16, 185, 129, 0.2);
  --hero-accent: var(--terracotta);
}
.dim-rec[data-dim="mindfulness"] {
  --hero-tint: rgba(107, 115, 160, 0.08);
  --hero-stroke: rgba(107, 115, 160, 0.22);
  --hero-accent: var(--mindfulness);
}
.dr-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 6px;
}
.dr-name {
  font-weight: 800; font-size: 18px; letter-spacing: -0.4px;
  color: var(--graphite); line-height: 1.2;
}
.dr-heart {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--hero-accent) 25%, transparent);
  background: color-mix(in srgb, var(--hero-accent) 8%, transparent);
  display: grid; place-items: center;
  color: var(--hero-accent); flex-shrink: 0;
}
.dr-meta {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--slate-dim); font-weight: 600;
  margin-bottom: 14px;
}
.dr-sep { height: 1px; background: var(--hero-stroke); margin-bottom: 12px; }
.dr-why {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--graphite);
  margin-bottom: 14px;
}
.dr-why-disc {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hero-accent) 10%, transparent);
  color: var(--hero-accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.dr-why-lbl { font-weight: 700; color: var(--graphite); }
.dr-view {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--terracotta); color: white;
  border-radius: 10px;
  padding: 14px 16px;
  min-height: 48px;
  font-weight: 700; font-size: 14px; letter-spacing: -0.15px;
  cursor: pointer;
  border: none;
  transition: background 280ms ease;
}
.dr-view:hover { background: var(--terracotta-deep); }

.dim-alts { margin-top: 14px; }
.dim-alts-lbl {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--slate-dim); font-weight: 600;
  margin-bottom: 8px;
}
.dim-alt-item {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: border-color 260ms ease, transform 260ms ease;
}
.dim-alt-item:hover { border-color: var(--hairline-dark); transform: translateX(3px); }
.dim-alt-name { font-weight: 700; font-size: 14px; letter-spacing: -0.2px; color: var(--graphite); }
.dim-alt-meta {
  font-size: 11px; color: var(--slate-dim);
  font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 2px;
}
.dim-alt-arr { font-size: 17px; color: var(--terracotta); flex-shrink: 0; }

.dim-dc { margin-top: 14px; border-top: 1.5px dashed var(--hairline-dark); }
.dim-dc-btn {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 0 13px;
  cursor: pointer;
}
.dc-num {
  background: rgba(16, 185, 129, 0.08);
  color: var(--terracotta-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid rgba(16, 185, 129, 0.2);
  flex-shrink: 0;
}
.dc-lbl {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.16px;
  color: var(--terracotta);
  flex: 1;
  text-align: left;
}
.dc-tog {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(16,185,129,0.1);
  display: grid; place-items: center;
  color: var(--terracotta); flex-shrink: 0;
}
.dim-dc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--ease);
}
.dim-dc-body.open { grid-template-rows: 1fr; }
.dim-dc-inner {
  overflow: hidden;
  overflow-y: hidden;
  min-height: 0;
  padding-bottom: 18px;
  touch-action: pan-y;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}
.dim-why-text {
  font-size: 14.5px; line-height: 1.7; color: var(--slate);
  background: var(--paper-warm);
  border-radius: 12px; padding: 16px 18px; text-wrap: pretty;
}
.dim-math-card {
  background: #fff; border: 1px solid var(--hairline);
  border-radius: 14px; padding: 16px 18px; margin-bottom: 8px;
}
.dmc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px; gap: 12px;
}
.dmc-k { font-weight: 700; font-size: 14px; color: var(--graphite); }
.dmc-v {
  font-family: var(--mono); font-size: 18px; font-weight: 700;
  letter-spacing: -0.5px; color: var(--graphite); flex-shrink: 0;
}
.dmc-note { font-size: 13px; color: var(--slate); line-height: 1.55; margin-bottom: 7px; }
.dmc-src {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600;
}
.dim-item .dim-sentence .wd {
  display: inline-block;
  opacity: 0; transform: translateY(0.4em);
  transition: opacity 440ms var(--ease), transform 440ms var(--ease);
  transition-delay: var(--wd, 0ms);
}
.dim-item.shown .dim-sentence .wd { opacity: 1; transform: translateY(0); }
.dim-item .dim-sentence .q { color: var(--terracotta); }
.dim-item .dim-tagline {
  margin-top: 16px;
  font-size: 15px; color: var(--slate);
  display: flex; gap: 10px; align-items: baseline;
}
.dim-item .dim-tagline .mk { color: var(--terracotta); font-weight: 700; }

.dim-mt {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: -0.1px;
  color: var(--slate);
  border: 1.5px solid var(--hairline-dark);
  border-radius: 999px;
  padding: 10px 18px;
  transition: border-color 320ms var(--ease), color 320ms var(--ease), background 320ms var(--ease);
}
.dim-mt:hover { border-color: var(--graphite); color: var(--graphite); }
.dim-mt.open { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.dim-mt .chev { transition: transform 320ms var(--ease); display: inline-block; font-size: 11px; }
.dim-mt.open .chev { transform: rotate(180deg); }
.dim-math2 {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 540ms var(--ease);
}
.dim-math2.open { grid-template-rows: 1fr; }
.dim-math2 > div {
  overflow: hidden;
  overflow-y: hidden;
  min-height: 0;
  touch-action: pan-y;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}
.dim-math2 .dm-pad {
  margin-top: 20px;
  background: var(--graphite);
  border-radius: 16px;
  padding: 22px 26px;
}
.dim-math2 .dm-row {
  display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--graphite-soft);
  font-size: 13.5px;
}
.dim-math2 .dm-row:last-child { border-bottom: none; }
.dim-math2 .dm-row .k { color: var(--slate-dim); }
.dim-math2 .dm-row .k b { color: #fff; font-weight: 700; }
.dim-math2 .dm-row .v { font-family: var(--mono); font-size: 12.5px; color: var(--luminous); text-align: right; }

/* ---- quick hacks ---- */
.hacks { margin-top: 64px; border-top: 1px solid var(--hairline); padding-top: 36px; }
.hacks-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 24px; flex-wrap: wrap; }
.hacks-head .hk-title { font-weight: 800; font-size: 19px; letter-spacing: -0.4px; }
.hacks-head .hk-sub { font-size: 14.5px; color: var(--slate); }
.hack-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hack {
  display: flex; flex-direction: column; gap: 2px;
  border: 1.5px solid var(--hairline-dark);
  border-radius: 16px;
  padding: 13px 20px;
  transition: border-color 320ms var(--ease), transform 320ms var(--ease), background 320ms var(--ease);
}
@media (min-width: 900px) {
  .hack-row { display: flex; flex-wrap: wrap; }
  .hack { flex: 1 1 200px; }
}
.hack:hover { border-color: var(--terracotta); transform: translateY(-3px); background: #F0FDF8; }
.hack b { font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px; color: var(--graphite); }
.hack span { font-size: 12.5px; color: var(--slate); }

/* ---- enrollment: the live insight card ---- */
.enroll-card {
  width: 100%;
  max-width: min(720px, 100%);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: clamp(28px, 4.5vw, 40px) clamp(24px, 4vw, 44px);
  box-shadow: 0 24px 80px -40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.enroll-card .ec-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 14px;
}
.enroll-card .ec-eyebrow .bulb {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16, 185, 129, 0.16);
  display: grid; place-items: center;
}
.enroll-card .ec-text {
  font-size: clamp(17px, 2.2vw, 19px); line-height: 1.62;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
  text-wrap: pretty;
  margin-bottom: 24px;
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}
.enroll-card .ec-text b {
  font-weight: 700;
  color: var(--luminous);
  font-feature-settings: "tnum" 1;
}
.enroll-card .enroll-form {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
  max-width: none;
  width: 100%;
}
.enroll-card .enroll-form input {
  color: var(--paper);
}
.enroll-card .enroll-form input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.enroll-card .enroll-form .cta {
  flex-shrink: 0;
  padding: 12px 18px;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: none;
}
.enroll-card .enroll-form .cta::before { display: none; }
.enroll-card .enroll-form .cta:hover,
.enroll-card .enroll-form .cta:focus-visible {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}
.enroll-card .enroll-form .cta .cta-label {
  font-size: 14px;
  font-weight: 600;
}
.enroll-card .enroll-form .cta .cta-chip {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.1);
}
.enroll-card .enroll-form .cta .cta-chip .arr {
  font-size: 13px;
}
.enroll-card .enroll-form .cta:hover .cta-chip { background: rgba(255, 255, 255, 0.16); }
.enroll-card .enroll-form .cta:hover .cta-chip .arr { transform: rotate(-45deg); }
.enroll-card .enroll-form:focus-within {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.28);
}
.ec-why {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700;
  color: rgba(255, 255, 255, 0.48);
  transition: color 320ms var(--ease);
}
.ec-why:hover { color: rgba(255, 255, 255, 0.78); }
.ec-why .chev { transition: transform 320ms var(--ease); display: inline-block; font-size: 11px; }
.ec-why.open .chev { transform: rotate(180deg); }
.ec-math { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 540ms var(--ease); }
.ec-math.open { grid-template-rows: 1fr; }
.ec-math .ec-math-inner {
  overflow: hidden;
  overflow-y: hidden;
  min-height: 0;
  touch-action: pan-y;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}
.ec-row {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.ec-row:first-child { margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.ec-row:last-child { border-bottom: none; }
.ec-row { border-bottom-color: rgba(255, 255, 255, 0.08); }
.ec-row .k { color: rgba(255, 255, 255, 0.48); }
.ec-row .v { font-family: var(--mono); font-size: 12.5px; color: rgba(255, 255, 255, 0.88); font-weight: 600; text-align: right; }

/* ---- softened type (de-roboticized) ---- */
footer .links a, footer .copy {
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: -0.1px;
  text-transform: none;
  font-weight: 600;
}
@media (max-width: 640px) {
  footer { padding: 32px 20px 36px; gap: 20px; }
  footer .footer-top {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  footer .links {
    gap: 12px 20px;
    justify-content: center;
  }
  footer .links a { font-size: 13px; }
  footer .copy { font-size: 12px; max-width: none; }
  .hack { padding: 14px 14px; }
  .hack b { font-size: 13.5px; }
  .hack span { font-size: 11.5px; }
}
.enroll .fineprint {
  font-family: var(--sans);
  font-size: 14.5px;
  letter-spacing: 0;
  line-height: 1.7;
}
.wk-tab {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: -0.2px;
  text-transform: none;
  font-weight: 700;
}
.t-card .t-kind {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.07em;
  font-weight: 700;
}
.memory-note .mk {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 700;
}
.hero .greeting .lbl { font-family: var(--sans); }

/* ---- splash: desktop viewport tuning ---- */
@media (min-width: 1024px) {
  .splash::before {
    background: radial-gradient(
      ellipse 72% 58% at 50% 50%,
      rgba(16, 185, 129, 0.09) 0%,
      rgba(16, 185, 129, 0.03) 38%,
      transparent 72%
    );
  }
  .splash-stage {
    padding:
      env(safe-area-inset-top, 0px)
      clamp(32px, 5vw, 64px)
      0;
  }
  .splash-intro {
    gap: clamp(40px, 6vmin, 72px);
  }
  .splash-pulse {
    width: clamp(300px, 39vmin, 420px);
    height: clamp(300px, 39vmin, 420px);
  }
  .splash-wordmark {
    font-size: clamp(78px, 10.5vmin, 132px);
  }
  .splash-cue {
    padding-bottom: clamp(40px, 7vh, 64px);
  }
}

/* ---- responsive for the new pieces ---- */
@media (max-width: 1080px) {
  .phone-scene { margin-top: 10px; }
}
@media (hover: none) and (pointer: coarse) {
  html { scroll-behavior: auto; }
  .splash {
    min-height: -webkit-fill-available;
    height: -webkit-fill-available;
  }
  .hero,
  .enroll {
    min-height: 100svh;
  }
  .splash-pulse-ring,
  .splash-pulse-glow,
  .splash-pulse-glyph,
  .enroll-pulse .splash-pulse-ring,
  .enroll-pulse .splash-pulse-glow,
  .enroll-pulse .splash-pulse-glyph {
    animation: none;
  }
  .phone:hover {
    transform: none;
    box-shadow:
      0 28px 75px -22px rgba(0, 0, 0, 0.58),
      0 8px 26px -8px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255,255,255,0.07),
      inset 0 -2px 3px rgba(0,0,0,0.65);
  }
}

@media (max-width: 480px) {
  .enroll-card { padding: 26px 20px; border-radius: 20px; }
  .enroll-card .enroll-form { flex-direction: column; border-radius: 24px; padding: 12px; gap: 10px; }
  .enroll-card .enroll-form .cta {
    width: 100%;
    justify-content: center;
    border-radius: 14px;
    padding: 13px 16px;
  }

  /* tighter phone content on small phones */
  .app-chat { padding: 8px 14px; gap: 8px; }
  .bubble, .insight { font-size: 13px; padding: 9px 13px; }
  .insight { padding: 11px 13px; }
  .app-foot { padding: 9px 14px 16px; }
  .app-foot .fake-field { padding: 9px 14px; font-size: 12px; }
  .app-foot .mic { width: 36px; height: 36px; }
  .lr-row { font-size: 12px; }
}

/* ================= touch — panels never hijack page scroll ================= */
.f-head,
.engine-grid,
.engine-callouts,
.ins-detail-scroll,
.log-grid,
.log-points,
.enroll-card,
.hero-manifesto,
.tailored,
.t-card,
.phone-scene,
.phone {
  touch-action: pan-y;
  overscroll-behavior: none;
}

@media (hover: none) and (pointer: coarse) {
  [data-reveal],
  [data-reveal].in {
    transform: none;
  }
  .eq-chip,
  .eq-chip.on {
    transform: none;
  }
}