:root {
    /* Core brand — warm, food-forward, not tech-blue */
    --primary: #ff5a36;
    /* Coral */
    --primary-dark: #e8481f;
    --amber: #f2a13a;
    --ink: #17130f;
    --ink-2: #211b15;
    --paper: #faf6f1;
    --paper-2: #f1ebe2;
    --white: #ffffff;
    --gray: #7a7268;
    --gray-light: #e6ded2;
    --line: rgba(23, 19, 15, 0.1);

    /* Macro-split chart colors — used by the Plan Alignment ring only.
       Coral/amber already carry the brand accent, so protein/carbs reuse
       them; fat gets a muted sage so all three read apart at a glance
       without introducing a cold, off-brand hue. */
    --macro-protein: var(--primary);
    --macro-carbs: var(--amber);
    --macro-fat: #6b8f6a;

    --shadow-glow: 0 20px 50px rgba(255, 90, 54, 0.28);
    --shadow-soft: 0 10px 30px rgba(23, 19, 15, 0.06);
    --shadow-lift: 0 30px 60px rgba(23, 19, 15, 0.14);

    --radius: 18px;
    --radius-sm: 10px;
    --display: "Fraunces", serif;

    /* Light mode only — tell the UA so native form-control and scrollbar
       chrome render with the light palette. */
    color-scheme: light;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: "Inter", sans-serif;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--primary);
    color: white;
}

/* Utility Classes */
.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 15px 32px;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-glow);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    background: var(--primary-dark);
    box-shadow: 0 25px 45px rgba(255, 90, 54, 0.38);
}

.btn-secondary {
    background: var(--amber);
    box-shadow: 0 20px 50px rgba(242, 161, 58, 0.28);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: white;
    box-shadow: none;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    box-shadow: none;
}

.text-center {
    text-align: center;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-16 {
    margin-bottom: 4rem;
}

.mt-8 {
    margin-top: 2rem;
}

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Header & Navigation
   Always a solid, high-contrast dark bar so it stays legible over every
   section, instead of a translucent blur fighting whatever content
   scrolls beneath it. */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(23, 19, 15, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(23, 19, 15, 0.25);
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 74px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.logo img {
    filter: brightness(0) invert(1);
}

.nav-links {
    display: flex;
    gap: 2.25rem;
}

.nav-links a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 0.95rem;
    position: relative;
    transition: color 0.3s;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: white;
}

.nav-links a:hover::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: white;
}

/* Hero Section */
.hero {
    position: relative;
    overflow: hidden;
    min-height: 94vh;
    display: flex;
    align-items: center;
    padding: 0;
    background: radial-gradient(120% 100% at 100% 0%, #2a2019 0%, var(--ink) 55%);
}

.hero-numeral {
    position: absolute;
    top: -8vw;
    left: -4vw;
    font-family: var(--display);
    font-weight: 600;
    font-size: 42vw;
    line-height: 1;
    color: rgba(255, 255, 255, 0.035);
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.hero-video {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
    opacity: 0.55;
    mask-image: linear-gradient(90deg, transparent 0%, black 25%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 25%);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(23, 19, 15, 0.55) 0%, rgba(23, 19, 15, 0.15) 60%);
    z-index: 1;
}

.hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 3rem;
    padding: 9rem 24px 4rem;
}

.hero-content {
    text-align: left;
}

.hero-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 1.25rem;
}

.hero-description {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 2.25rem;
    text-shadow: none;
    max-width: 500px;
}

.hero h1 {
    font-family: var(--display);
    font-size: 4.4rem;
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: white;
}

.hero-highlight {
    color: var(--primary);
    font-style: italic;
}

.hero p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 2rem;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

/* Hero visual — targets in, matched menus, day out */
.hero-visual {
    min-width: 0;
}

.hero-flow {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 440px;
    max-width: 100%;
    margin-left: auto;
}

.flow-step {
    animation: flowRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.flow-step:nth-child(1) {
    animation-delay: 0.15s;
}

.flow-step:nth-child(2) {
    animation-delay: 0.5s;
}

.flow-step:nth-child(3) {
    animation-delay: 0.85s;
}

@keyframes flowRise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* .hero p sets 1.15rem — outrank it */
.hero-flow .flow-tag {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    max-width: none;
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.flow-tag b {
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--amber);
    font-family: var(--display);
    font-size: 0.75rem;
    letter-spacing: 0;
}

.flow-card {
    background: linear-gradient(180deg, rgba(23, 19, 15, 0.5), rgba(23, 19, 15, 0.38));
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(18px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    color: white;
}

/* Step 1 — the targets */
.flow-target {
    padding: 1rem 1.35rem 1.25rem;
}

.flow-who {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.flow-target-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 0.75rem;
    margin-bottom: 1rem;
}

.flow-kcal {
    font-family: var(--display);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.flow-kcal b {
    font-weight: 600;
}

.flow-kcal small {
    font-family: "Inter", sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.flow-goal {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 90, 54, 0.16);
    border: 1px solid rgba(255, 90, 54, 0.38);
    color: #ffb9a4;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.flow-goal b {
    font-weight: 600;
}

.flow-macros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.flow-macros div {
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
}

.flow-macros em {
    display: block;
    font-style: normal;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.15rem;
}

.flow-macros b {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 600;
}

.flow-macros i {
    font-family: "Inter", sans-serif;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

/* Step 2 — the match */
.flow-match {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding-left: 0.6rem;
}

.flow-beam {
    position: relative;
    flex: none;
    width: 2px;
    height: 52px;
    border-radius: 2px;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.24),
            rgba(255, 255, 255, 0.04));
}

.flow-beam i {
    position: absolute;
    top: 0;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 10px rgba(242, 161, 58, 0.85);
    animation: beamDrop 2.4s linear infinite;
}

.flow-beam i:nth-child(2) {
    animation-delay: 0.8s;
}

.flow-beam i:nth-child(3) {
    animation-delay: 1.6s;
}

@keyframes beamDrop {
    0% {
        transform: translateY(-4px);
        opacity: 0;
    }

    18%,
    82% {
        opacity: 1;
    }

    100% {
        transform: translateY(50px);
        opacity: 0;
    }
}

.flow-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.flow-chips span {
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(23, 19, 15, 0.45);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.82);
}

.flow-chips .more {
    background: transparent;
    border-style: dashed;
    color: rgba(255, 255, 255, 0.5);
}

/* Step 2's single summary chip — the step label already says "matched
   against local menus", so this just signals scale. */
.flow-chip-summary {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 90, 54, 0.12);
    border: 1px solid rgba(255, 90, 54, 0.32);
    color: #ffb9a4;
    font-size: 0.78rem;
    font-weight: 600;
}

/* Step 3 — the day */
.flow-plan {
    padding: 0.5rem 0.6rem 1.1rem;
}

.flow-meals {
    list-style: none;
}

.flow-meals li {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.75rem;
    animation: mealIn 0.5s ease both;
    animation-delay: calc(1s + var(--i) * 0.28s);
}

.flow-meals li+li {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes mealIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.flow-meals .ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(140deg, rgba(255, 90, 54, 0.3), rgba(242, 161, 58, 0.22));
    color: #ffd9c9;
    font-size: 0.78rem;
}

.flow-meal-name {
    min-width: 0;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.3;
}

.flow-servings {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
}

.flow-variant {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 5px;
    background: rgba(242, 161, 58, 0.18);
    color: var(--amber);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 1.5px;
}

.flow-meal-name em {
    display: block;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

.flow-meal-num {
    text-align: right;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.flow-meal-num small {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.2rem;
}

.flow-meal-num em {
    display: block;
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}

.flow-total {
    margin: 0.6rem 0.75rem 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    animation: flowRise 0.6s ease both;
    animation-delay: 2s;
}

.flow-total-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin-bottom: 0.65rem;
}

.flow-total-sum {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
}

.flow-total-sum b {
    color: white;
    font-weight: 600;
}

.flow-total-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: none;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(242, 161, 58, 0.16);
    border: 1px solid rgba(242, 161, 58, 0.4);
    color: var(--amber);
    font-size: 0.7rem;
    font-weight: 700;
}

.flow-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
}

.flow-bars span {
    display: block;
    height: 5px;
    margin-bottom: 0.3rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.flow-bars span::after {
    content: "";
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--amber));
    transform-origin: left;
    animation: barFill 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 2.2s;
}

@keyframes barFill {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.flow-bars em {
    font-style: normal;
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {

    .flow-step,
    .flow-meals li,
    .flow-total,
    .flow-bars span::after {
        animation: none;
    }

    .flow-beam i {
        animation: none;
        opacity: 0;
    }
}

/* The engine — dark section, sits directly under the hero */
.engine {
    position: relative;
    padding: 7rem 0 5rem;
    background:
        radial-gradient(90% 120% at 15% 0%, #241c16 0%, var(--ink) 60%),
        var(--ink);
    color: white;
    overflow: hidden;
}

.engine::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(80% 70% at 50% 30%, black, transparent 75%);
    -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, black, transparent 75%);
    pointer-events: none;
}

.engine .container {
    position: relative;
    z-index: 1;
}

.engine-head {
    max-width: 720px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.engine-eyebrow {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.25rem;
    border-radius: 999px;
    background: rgba(255, 90, 54, 0.14);
    border: 1px solid rgba(255, 90, 54, 0.35);
    color: #ffb9a4;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* The pain line — same display face and size as the killer line so they
   read as one thought, struck through and in plain ink to mark it as the
   old, discarded way of doing things. The killer line then lands in full
   brand color as the answer.

   Color is rgba(white), not var(--ink): this section sits in the
   permanently inverted list (.engine, see the theme block below), which
   flips near-black to near-white. rgba(white) is the convention the
   rest of .engine already uses so it inverts the other way — landing as
   dark ink on the light background. */
.engine-pain {
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: line-through;
    text-decoration-thickness: 0.05em;
    margin: 0 0 0.5rem;
}

.engine .section-title {
    color: var(--primary);
}

/* Section title is already brand-colored end to end (see .engine
   .section-title); the highlight now only needs to carry the italic
   emphasis, not a second color, or it'd disappear into its own line. */
.engine-highlight {
    color: inherit;
    font-style: italic;
}

.engine .section-description {
    color: rgba(255, 255, 255, 0.74);
}

/* Retention moments — a few short, illustrative lines folded into the
   mechanism section rather than a separate section. Plain rgba(white)
   values, same as the rest of .engine, so the section's permanent
   invert (see the theme block below) handles it without extra rules. */
.engine-retention {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.engine-retention-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
}

.engine-retention-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 980px;
    margin: 0 auto;
}

.engine-retention-list li {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.74);
    text-align: left;
}

.engine-retention-list i {
    color: var(--amber);
    margin-right: 0.4rem;
}

.engine-retention-list b {
    color: white;
    font-weight: 600;
}

/* The pipeline — four stages, copy on one side, a live instrument on the other */
.eng-pipeline {
    position: relative;
    list-style: none;
}

.eng-pipeline::before {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 3rem;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg,
            transparent,
            rgba(255, 255, 255, 0.14) 12%,
            rgba(255, 255, 255, 0.14) 88%,
            transparent);
}

.eng-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3.5rem;
    padding: 3.25rem 0;
}

/* Node on the rail */
.eng-stage::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 5px rgba(255, 90, 54, 0.14);
}

.eng-stage:nth-child(even) .eng-copy {
    order: 2;
}

.eng-copy {
    max-width: 460px;
}

.eng-stage:nth-child(even) .eng-copy {
    margin-left: auto;
}

.eng-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
}

.eng-step i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(140deg, rgba(255, 90, 54, 0.9), rgba(242, 161, 58, 0.75));
    color: white;
    font-size: 0.8rem;
    box-shadow: 0 8px 20px rgba(255, 90, 54, 0.28);
}

.eng-copy h3 {
    font-family: var(--display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.7rem;
    color: white;
}

.eng-copy p {
    font-size: 0.97rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}

.eng-copy em {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}

/* Instrument panels */
.eng-panel {
    padding: 1.1rem 1.3rem 1.35rem;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4);
}

.eng-panel--mono {
    font-variant-numeric: tabular-nums;
}

.eng-panel-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.eng-panel-head em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--amber);
}

.eng-live {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    animation: engPulse 2.4s ease-out infinite;
}

@keyframes engPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 90, 54, 0.55);
    }

    70%,
    100% {
        box-shadow: 0 0 0 7px rgba(255, 90, 54, 0);
    }
}

.eng-arrow {
    margin: 0.7rem 0;
    text-align: center;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.28);
}

/* 01 — metabolic model. Plain text, not chips — this is a readout of the
   profile's own facts, not a set of tappable options, so it shouldn't wear
   a button's pill/border/background. */
.eng-inputs {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.55);
}

.eng-inputs span {
    color: rgba(255, 255, 255, 0.8);
}

.eng-inputs span+span::before {
    content: "·";
    margin: 0 0.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.eng-readout {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.eng-readout b {
    font-family: var(--display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    color: white;
    letter-spacing: -0.02em;
}

.eng-readout small {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.eng-macros {
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.eng-macros li {
    display: grid;
    grid-template-columns: 3.6rem 1fr 3rem;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.5);
}

.eng-macros i {
    display: block;
    height: 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.eng-macros i::after {
    content: "";
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--amber));
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eng-macros b {
    text-align: right;
    font-weight: 600;
    color: white;
}

/* 02 — menu structuring */
.eng-raw {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    font-size: 0.84rem;
    color: white;
}

.eng-raw i {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
}

.eng-raw em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.72rem;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.45);
}

.eng-tags {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

/* Stage 03 "why this plan" panel reuses the tag look for several short,
   plain-language reasons rather than the single dish-tag + slot pair the
   menu-structuring panel uses, so it needs to wrap. */
.eng-tags--wrap {
    flex-wrap: wrap;
}

.eng-tags span {
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(242, 161, 58, 0.14);
    color: var(--amber);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.eng-tags span+span {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
}

.eng-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.eng-table th {
    padding-bottom: 0.45rem;
    text-align: right;
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}

.eng-table th:first-child,
.eng-table td:first-child {
    text-align: left;
}

.eng-table td {
    padding: 0.42rem 0;
    text-align: right;
    color: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.eng-table td:first-child {
    color: rgba(255, 255, 255, 0.55);
}

/* 03 — solver trace */
.eng-trace {
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.eng-trace li {
    display: grid;
    grid-template-columns: 4.6rem 1fr 2.6rem;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    opacity: 0;
    animation: engTraceIn 0.35s ease both;
    animation-delay: calc(var(--i, 0) * 0.32s);
}

@keyframes engTraceIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.eng-trace i {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.09);
    overflow: hidden;
}

.eng-trace i::after {
    content: "";
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255, 90, 54, 0.55), rgba(242, 161, 58, 0.55));
}

.eng-trace b {
    text-align: right;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.eng-trace .is-best i::after {
    background: linear-gradient(90deg, var(--primary), var(--amber));
}

.eng-trace .is-best b,
.eng-trace .is-best span {
    color: white;
}

.eng-panel-foot {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.45);
}

.eng-panel-foot b {
    color: white;
    font-weight: 600;
}

.eng-panel-foot i {
    margin-right: 0.35rem;
    color: var(--amber);
}

/* 04 — taste learning */
.eng-rank {
    position: relative;
    list-style: none;
    height: 12.5rem;
    /* five rows at 2.5rem */
}

.eng-rank li {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1.5rem 1fr 4.5rem 2.4rem;
    align-items: center;
    gap: 0.6rem;
    height: 2.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    transform: translateY(calc(var(--row) * 2.5rem));
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eng-rank li>span:first-child {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

.eng-rank .dish {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eng-rank i {
    display: block;
    height: 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.eng-rank i::after {
    content: "";
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--primary), var(--amber));
    transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.eng-rank .sig {
    text-align: right;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.eng-rank .sig.up {
    color: #7fd48a;
    opacity: 1;
}

.eng-rank .sig.down {
    color: rgba(255, 255, 255, 0.35);
    opacity: 1;
}

/* 03 — feedback panel */
.eng-panel--feedback {
    display: grid;
    gap: 0.9rem;
}

.eng-fb-meal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(255, 255, 255, 0.18);
}

.eng-fb-meal-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: white;
}

.eng-fb-meal-macros {
    flex: none;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
}

.eng-fb-prompt {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.eng-fb-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.eng-fb-btn {
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: default;
}

.eng-fb-btn i {
    margin-right: 0.3rem;
}

.eng-fb-btn.is-active {
    border-color: rgba(255, 90, 54, 0.5);
    background: rgba(255, 90, 54, 0.14);
    color: white;
}

.eng-fb-btn--muted {
    color: rgba(255, 255, 255, 0.4);
}

.eng-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.eng-chips span {
    padding: 0.22rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
    font-weight: 600;
}

.eng-chips span.is-active {
    border-color: rgba(242, 161, 58, 0.45);
    background: rgba(242, 161, 58, 0.14);
    color: var(--amber);
}

.eng-fb-input {
    display: flex;
    gap: 0.55rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.eng-fb-input i {
    flex: none;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
}

.eng-fb-input p {
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
}

.eng-understood {
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.eng-understood-label {
    display: block;
    margin-bottom: 0.55rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.eng-understood ul {
    list-style: none;
    display: grid;
    gap: 0.4rem;
}

.eng-understood li {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.eng-understood li i {
    margin-right: 0.4rem;
    color: var(--amber);
}

.eng-fb-apply {
    padding: 0.6rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: linear-gradient(140deg, var(--primary), var(--amber));
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: default;
    box-shadow: 0 12px 28px rgba(255, 90, 54, 0.28);
}

/* 04 — result of feedback */
.eng-changes-sub {
    margin-top: -0.3rem;
    margin-bottom: 0.9rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
}

.eng-changes {
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.eng-changes li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.eng-changes li i {
    flex: none;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--amber);
}

.eng-changes li.is-muted {
    color: rgba(255, 255, 255, 0.5);
}

.eng-changes li.is-muted i {
    color: rgba(255, 255, 255, 0.35);
}

.eng-changes li span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.eng-changes li small {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

.eng-changes-foot {
    align-items: center;
}

.eng-changes-foot b {
    color: white;
}

.eng-review-btn {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: default;
}

/* Values that change in place */
.eng-swap {
    animation: engSwap 0.45s ease;
}

@keyframes engSwap {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .eng-live,
    .eng-trace li,
    .eng-swap {
        animation: none;
    }

    .eng-trace li {
        opacity: 1;
    }

    .eng-rank li,
    .eng-rank i::after,
    .eng-macros i::after {
        transition: none;
    }
}

/* About Section */
.about {
    position: relative;
    padding: 7rem 0;
    background-color: var(--paper);
    background-image: url("assets/partners-kitchen.jpg");
    background-size: cover;
    background-position: center 35%;
    background-attachment: fixed;
}

.about::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(250, 246, 241, 0.6);
}

.about .container {
    position: relative;
    z-index: 1;
}

.about-head {
    max-width: 760px;
    margin: 0 auto 3.5rem;
    padding: 2rem 2.5rem;
    background: rgba(250, 246, 241, 0.85);
    backdrop-filter: blur(6px);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.about-head .section-description {
    margin-bottom: 0;
}

.section-title {
    font-family: var(--display);
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--ink);
}

.section-description {
    max-width: 700px;
    margin: 0 auto 3.5rem;
    text-align: center;
    color: var(--gray);
    font-size: 1.1rem;
}

.about-photo {
    max-width: 900px;
    margin: 0 auto 3.5rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.about-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.about-photo figcaption {
    padding: 0.9rem 1.25rem;
    background: white;
    color: var(--gray);
    font-size: 0.9rem;
    text-align: center;
    border-top: 1px solid var(--line);
}

/* Trust section — reuses .values/.value-card (defined below) for its four
   pillars, so it inherits that pattern's light/dark handling for free. */
.trust {
    padding: 6rem 0;
    background: var(--paper);
}

/* Trust strip — a quieter, secondary row beneath the four main trust
   cards for the operational/food-safety layer. Deliberately smaller and
   lower-contrast than .value-card so it reads as supporting detail. */
.trust-strip {
    margin: 3.5rem auto 0;
    max-width: 900px;
    padding: 1.75rem 2rem;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}

.trust-strip-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--gray);
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.trust-strip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
}

.trust-strip-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 500;
}

.trust-strip-item i {
    color: var(--amber);
    font-size: 1rem;
}

.trust-strip-note {
    margin: 1.25rem 0 0;
    color: var(--gray);
    font-size: 0.85rem;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Local food section — a three-photo grid of local culinary-partner
   production shots, in the same "paper" family as About/Retention. */
.local-food {
    padding: 6rem 0;
    background: var(--paper-2);
}

.local-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

.local-grid figure {
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    background: white;
}

.local-grid img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.network-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 240px;
    padding: 1.5rem;
    background: var(--paper-2, #f4efe8);
}

.network-kitchens {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.network-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.network-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: white;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: var(--shadow-soft);
    white-space: nowrap;
}

.network-arrow {
    color: var(--amber);
    font-size: 0.95rem;
    flex: 0 0 auto;
    line-height: 1;
}

.network-node-plan {
    background: var(--ink);
    color: var(--amber);
    border-color: var(--ink);
}

@media (max-width: 720px) {
    .network-graphic {
        flex-direction: column;
        height: auto;
    }
}

.local-grid figcaption {
    padding: 1.25rem 1.5rem 1.5rem;
    border-top: 1px solid var(--line);
    text-align: left;
}

.local-grid figcaption h3 {
    margin: 0 0 0.5rem;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.1rem;
}

.local-grid figcaption p {
    margin: 0;
    color: var(--gray);
    font-size: 0.92rem;
    line-height: 1.55;
}

.values {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.value-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    max-width: 350px;
    text-align: left;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
}

.value-icon {
    width: 52px;
    height: 52px;
    background: var(--ink);
    color: var(--amber);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.value-card h3 {
    margin-bottom: 0.75rem;
    color: var(--ink);
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.3rem;
}

.value-card p {
    color: var(--gray);
}

/* Measured figures inside a value card. Kept quiet — the numbers carry the
   claim, so they only need to read as data rather than as another headline. */
.value-proof {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 0.75rem;
}

.value-proof li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.value-proof b {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    min-width: 4.25rem;
}

.value-proof span {
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.35;
}

/* Founding 150 offer — reuses .values/.value-card for its three panels
   (size, price, value-beyond-price), so the light/dark handling above
   applies for free. */
.pricing {
    padding: 6rem 0;
    background: var(--paper);
}

/* Central plan card — the configurator-inspired centerpiece that replaces
   the old three-tier layout. One card, one recommendation, room to show
   the user can dial it back. */
.plan-card {
    max-width: 780px;
    margin: 0 auto 3.5rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}

.plan-card-header {
    padding: 1.5rem 2.5rem;
    background: var(--ink);
}

.plan-card-kicker {
    font-family: var(--display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
}

.plan-card-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    padding: 2.5rem;
    border-bottom: 1px solid var(--line);
}

.plan-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
}

.plan-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.plan-stat-primary {
    grid-column: 1 / -1;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--line);
}

.plan-stat-label {
    font-size: 0.82rem;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.plan-stat-value {
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
}

.plan-pill {
    display: inline-block;
    width: fit-content;
    margin-top: 0.15rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 90, 54, 0.1);
    border: 1px solid rgba(255, 90, 54, 0.3);
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan-alignment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--paper-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

/* Plan Alignment ring — a donut, not a full circle, so its own shape
   telegraphs "96%, not 100%". Each arc is one macro's share of that 96%
   (protein/carbs/fat), so the ring reads as "how the covered plan breaks
   down" rather than a single opaque score. */
.plan-ring {
    position: relative;
    width: 148px;
    height: 148px;
}

.plan-ring-track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        var(--macro-protein) 0% var(--p-end),
        var(--macro-carbs) var(--p-end) var(--c-end),
        var(--macro-fat) var(--c-end) var(--f-end),
        var(--gray-light) var(--f-end) 100%
    );
}

.plan-ring-inner {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: var(--paper-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.plan-ring-value {
    font-family: var(--display);
    font-size: 2rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1;
}

.plan-ring-caption {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--gray);
    text-align: center;
    max-width: 90px;
}

.plan-ring-legend {
    display: flex;
    gap: 1.1rem;
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    font-size: 0.8rem;
    color: var(--gray);
}

.plan-ring-legend li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.plan-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.plan-dot-protein {
    background: var(--macro-protein);
}

.plan-dot-carbs {
    background: var(--macro-carbs);
}

.plan-dot-fat {
    background: var(--macro-fat);
}

.plan-alignment-note {
    margin-top: 0.9rem;
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.4;
}

.plan-adjust {
    padding: 2rem 2.5rem 2.25rem;
    text-align: center;
}

.plan-adjust-label {
    display: block;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 1rem;
}

.plan-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.plan-chip {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--gray);
    font-size: 0.85rem;
    font-weight: 500;
}

.plan-adjust-note {
    max-width: 460px;
    margin: 0 auto;
    color: var(--gray);
    font-size: 0.9rem;
    line-height: 1.5;
}

.plan-principles {
    margin-bottom: 3rem;
}

.plan-principles .value-card {
    padding: 2rem 1.75rem;
    max-width: 280px;
}

.value-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
    color: var(--gray);
}

.value-list i {
    color: var(--primary);
    margin-right: 0.5rem;
}

.pricing-note {
    max-width: 700px;
    margin: 3rem auto 0;
    text-align: center;
    color: var(--gray);
    font-weight: 500;
}

.pricing-note i {
    color: var(--primary);
    margin-right: 0.4rem;
}

.pricing-cta {
    text-align: center;
    margin-top: 1.75rem;
}

/* Proof bar — the trust strip directly under the hero. Quiet on purpose:
   it's a reassurance line, not another headline. */
.proof-bar {
    background: var(--ink);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.proof-bar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 2.5rem;
    padding: 1.1rem 1.5rem;
}

.proof-bar-inner span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
}

.proof-bar-inner i {
    color: var(--amber);
    font-size: 0.9rem;
}

/* Retention — a short reassurance section between the value props and the
   launch signup: this is a weekly relationship, not a one-time purchase. */
.retention {
    padding: 5rem 0;
    background: var(--paper-2);
    text-align: center;
}

.retention-inner {
    max-width: 640px;
}

.retention-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.5rem;
    background: var(--ink);
    color: var(--amber);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.retention .section-description {
    margin-bottom: 0;
}

/* How It Works — kept for the commented-out steps variant below the app section */
.how-it-works {
    padding: 7rem 0;
    background: var(--paper-2);
}

/* Inside the app — dark, so it reads as one product block with the hero and
   the engine, and so the cream app UI pops off the page. */
.app {
    position: relative;
    padding: 4.5rem 0 7rem;
    /* Glow sits at the bottom so the top edge matches where the engine
       section ends — no seam between the two dark blocks. */
    background:
        radial-gradient(75% 85% at 78% 100%, #241c16 0%, var(--ink) 62%),
        var(--ink);
    color: white;
    overflow: hidden;
}

.app::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(75% 60% at 50% 40%, black, transparent 78%);
    -webkit-mask-image: radial-gradient(75% 60% at 50% 40%, black, transparent 78%);
    pointer-events: none;
}

.app .container {
    position: relative;
    z-index: 1;
}

.app-head {
    max-width: 640px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.app .section-title {
    color: white;
}

.app .section-description {
    color: rgba(255, 255, 255, 0.74);
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
}

.app-shot {
    text-align: center;
}

/* Device frame */
.app-phone {
    position: relative;
    padding: 8px;
    border-radius: 30px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05));
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.app-shot:hover .app-phone {
    transform: translateY(-6px);
}

.app-phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 23px;
}

.app-shot figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

.app-shot figcaption b {
    font-family: var(--display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--amber);
}

@media (prefers-reduced-motion: reduce) {
    .app-phone {
        transition: none;
    }
}

.steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 250px;
    text-align: center;
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 1rem;
}

.step h3 {
    color: var(--ink);
}

/* Launch / signup */
.launch {
    padding: 7rem 0;
    background: var(--ink);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.launch .section-title {
    color: white;
}

.launch .section-description {
    color: rgba(255, 255, 255, 0.6);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.launch-date {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: white;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

.launch-date i {
    color: var(--primary-light, var(--primary));
}

.launch-form {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    max-width: 480px;
    margin: 2rem auto 0;
    flex-wrap: wrap;
}

.launch-form input[type="email"] {
    flex: 1;
    min-width: 240px;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: white;
    font-family: inherit;
    font-size: 1rem;
}

.launch-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.launch-form input[type="email"]:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.1);
}

.launch-form button {
    white-space: nowrap;
}

.launch-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.launch .form-status {
    max-width: 480px;
    margin: 1rem auto 0;
    text-align: center;
}

.launch .form-status.success {
    background-color: rgba(52, 211, 153, 0.15);
    color: #6ee7b7;
    border-color: #34d399;
}

.launch .form-status.error {
    background-color: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: #ef4444;
}

.launch .form-status.loading {
    color: rgba(255, 255, 255, 0.6);
}

/* Contact */
.contact {
    padding: 7rem 0;
    background-color: var(--paper);
}

.contact-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-item i {
    color: var(--amber);
    background: var(--ink);
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.contact-item h4 {
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.contact-form {
    background: var(--paper-2);
    border: 1px solid var(--line);
    padding: 2.25rem;
    border-radius: var(--radius);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--gray-light);
    border-radius: var(--radius-sm);
    font-family: inherit;
    background: white;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.12);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.form-status {
    padding: 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 15px;
    display: none;
}

.form-status.success {
    background-color: rgba(52, 211, 153, 0.15);
    color: #065f46;
    border: 1px solid #34d399;
    display: block;
}

.form-status.error {
    background-color: rgba(239, 68, 68, 0.15);
    color: #991b1b;
    border: 1px solid #ef4444;
    display: block;
}

.form-status.loading {
    display: block;
    text-align: center;
}

.form-status.loading::after {
    content: "...";
    animation: dots 1.5s steps(5, end) infinite;
}

@keyframes dots {

    0%,
    20% {
        content: ".";
    }

    40% {
        content: "..";
    }

    60%,
    100% {
        content: "...";
    }
}

/* Footer */
footer {
    background: var(--ink);
    color: white;
    padding: 4rem 0 1.5rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-column h3 {
    margin-bottom: 1rem;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.3rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: white;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-radius: 50%;
    transition: all 0.3s;
}

.social-links a:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.35);
}

/* Media Queries */

/* Short laptop viewports: the flow panel is tall, so buy back some headroom. */
@media (min-width: 901px) and (max-height: 860px) {
    .hero-grid {
        padding-top: 7rem;
        padding-bottom: 2.5rem;
    }

    .hero {
        min-height: 0;
    }
}

/* Four bar labels don't fit across a phone — go two-up. */
@media (max-width: 440px) {
    .flow-bars {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem 0.7rem;
    }
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns: 1fr;
        padding-top: 8rem;
    }

    .hero-visual {
        margin-top: 2.5rem;
    }

    .hero-flow {
        margin: 0 auto;
    }

    .hero-video {
        width: 100%;
        opacity: 0.3;
    }

    .hero-overlay {
        background: linear-gradient(180deg, rgba(23, 19, 15, 0.3) 0%, rgba(23, 19, 15, 0.85) 100%);
    }

    .app-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 1rem;
    }

    /* Two-line labels look lopsided beside the numeral at this width */
    .app-shot figcaption {
        flex-direction: column;
        gap: 0.15rem;
        margin-top: 0.85rem;
        font-size: 0.85rem;
        line-height: 1.35;
    }

    .eng-pipeline::before {
        left: 0;
    }

    .eng-stage {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding: 2.5rem 0 2.5rem 1.75rem;
    }

    .eng-stage::before {
        top: 3.25rem;
        left: 0;
    }

    /* The rail runs down the left on narrow screens, so the alternating
       layout collapses to a single order. */
    .eng-stage:nth-child(even) .eng-copy {
        order: 0;
        margin-left: 0;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-featured {
        grid-row: span 1;
    }

    .local-grid {
        grid-template-columns: 1fr;
    }

    .engine-retention-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Plan card — stack the stats/alignment columns and let stats fall
       to one per row so numbers stay readable at phone width. */
    .plan-card-body {
        grid-template-columns: 1fr;
    }

    .plan-stats {
        grid-template-columns: 1fr;
    }

    .plan-stat-primary {
        grid-column: auto;
    }

    /* Engine pipeline — same content, denser presentation. Copy in the
       markup was already trimmed to one short sentence per stage; this
       just tightens the rhythm around it so four stages don't turn into
       an endless scroll. */
    .eng-stage {
        padding: 1.75rem 0 1.75rem 1.5rem;
        gap: 1.1rem;
    }

    .eng-stage::before {
        top: 2.25rem;
    }

    .eng-step {
        margin-bottom: 0.55rem;
    }

    .eng-copy h3 {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
    }

    .eng-copy p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .eng-panel {
        padding: 0.85rem 1rem 1rem;
    }

    .eng-panel-head {
        padding-bottom: 0.6rem;
        margin-bottom: 0.75rem;
    }

    .eng-readout b {
        font-size: 2rem;
    }

    .eng-readout {
        margin-bottom: 0.75rem;
    }

    .eng-macros {
        gap: 0.4rem;
    }

    /* Five ranked dishes is more than the point needs on a phone screen. */
    .eng-rank li:nth-child(5) {
        display: none;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-content {
        text-align: center;
        margin: 0 auto;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-eyebrow {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 74px;
        left: 0;
        right: 0;
        background: rgba(23, 19, 15, 0.97);
        backdrop-filter: blur(16px);
        flex-direction: column;
        gap: 0;
        height: 0;
        overflow: hidden;
        transition: height 0.3s;
    }

    .nav-links.active {
        height: auto;
        padding: 1rem 0;
    }

    .nav-links a {
        padding: 1rem 2rem;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .success-message {
        text-align: center;
        padding: 30px;
        background-color: white;
        border-radius: var(--radius);
        box-shadow: var(--shadow-soft);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .success-icon {
        font-size: 60px;
        color: var(--primary);
        margin-bottom: 20px;
    }

    .success-message h3 {
        color: var(--ink);
        margin-bottom: 15px;
        font-size: 24px;
    }

    .success-message p {
        color: var(--gray);
        margin-bottom: 25px;
    }

    .success-message .btn {
        margin-top: 15px;
    }
}

.investor {
    background: var(--primary);
    padding: 5rem 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.investor h2 {
    color: white;
    font-family: var(--display);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
}

.investor p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 500px;
    margin: 0 auto;
}

.investor a {
    display: inline-block;
    margin-top: 1.5rem;
    margin-inline: 0.5rem;
    background-color: var(--ink);
    color: white;
    padding: 14px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.investor a:first-of-type {
    background-color: transparent;
    border: 2px solid white;
    box-shadow: none;
}

.investor a:hover {
    transform: translateY(-3px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}


.app-store-badges {
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.app-store-badges p {
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: none;
}

.badge-container {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}

.store-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    width: 170px;
    height: 56px;
    transition: all 0.3s ease;
}

.store-badge:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.12);
}

.store-badge img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 900px) {
    .app-store-badges {
        align-items: center;
    }

    .badge-container {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .store-badge img {
        height: 40px;
    }
}

/* iOS Safari doesn't render fixed backgrounds properly — fall back to a
   normal scrolling background there. */
@media (max-width: 900px) {
    .about {
        background-attachment: scroll;
    }
}

/* Stray inline link — give it the brand color instead of the browser's
   default blue in every scheme. */
footer .footer-column p a {
    color: var(--amber);
}

/* ============================================================
   Theme — light mode only
   ------------------------------------------------------------
   The page is authored with two families of section:
     - "dark bands" (header, hero, engine, app, launch, footer) built
       from white-on-ink glass at many opacity steps, plus the coral/
       amber brand accent
     - "paper" sections (about, contact, investor) already light

   The dark bands are flipped to their light equivalent with a single
   invert()+hue-rotate(180deg) pass: every white-on-dark opacity step
   inverts to the same relative step of ink-on-paper, and
   hue-rotate(180deg) brings the coral/amber accent back close to its
   authored hue, so nothing there had to be hand-recolored. Real
   photography/video/brand-badge images are counter-inverted with the
   same filter so they keep natural color.
   ============================================================ */
header,
.hero,
.proof-bar,
.engine,
.app,
.launch,
footer {
    filter: invert(1) hue-rotate(180deg);
}

/* Counter-invert real images/video inside those bands so they keep
   natural color instead of the inverted, hue-shifted palette. Solid
   brand buttons (not the ghost/outline variant, which is meant to
   invert so its white-on-dark outline becomes dark-on-light) are
   counter-inverted too, so "Get Notified" etc. stay the same coral
   fill with white text everywhere on the page. */
.hero-video,
.store-badge img,
.app-phone img,
.btn:not(.btn-outline) {
    filter: invert(1) hue-rotate(180deg);
}

/* The hero stat card is translucent dark glass designed to sit on the
   dark video — a good chunk of the backdrop shows through it on
   purpose. Inverted, that same translucency sits on a now-bright
   photo and washes out to near-illegible. Counter-invert it too, so
   it stays the same dark glass card with white text — a fixed "UI
   preview" floating over the photo, the same role the phone
   screenshots play in the App section below.

   backdrop-filter doesn't survive that counter-invert: once an
   ancestor (.hero) has its own `filter`, a descendant's
   backdrop-filter stops sampling the real page behind it in most
   browsers, so the blur/tint collapses to almost nothing. Swap it
   for a solid-enough background here so the card doesn't depend on
   backdrop sampling at all. */
.flow-card {
    filter: invert(1) hue-rotate(180deg);
    background: linear-gradient(180deg, rgba(23, 19, 15, 0.86), rgba(23, 19, 15, 0.78));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.flow-chips span {
    background: rgba(23, 19, 15, 0.8);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}