/* Kitchen Copilot — marketing site
   Tokens and components recreated from the Claude Design project
   (Kitchen Copilot Website, Professional and Support .dc.html).
   Shared: tokens, header, buttons, download CTA, footer. Page sections below them. */

:root {
  --navy: #081d28;
  --black: #000;
  --canvas: #f3f3f8;
  --surface: #fdfdfd;
  --chip: #f1f1f5;
  --chip-hover: #e6e6ee;
  --icon-bg: #f1f1f6;
  --social-hover: #e9e9f0;
  --line: #e0e0ea;
  --line-soft: #ececf2;
  --text-1: #2c3d45;
  --text-2: #3d4a52;
  --text-3: #4f5b63;
  --text-4: #5a656c;
  --text-5: #6b747b;
  --chevron: #9b9fa3;
  --placeholder: #7b848b;
  --green: #67aa92;
  --teal: #2ec4b6;
  --surface-hover: #ececf1;
  --pro-tint: #e3f8d4;
  --pro-ink: #3f8f22;
  --display: Geist, sans-serif;
  --body: Inter, sans-serif;
  --gutter: clamp(20px, 5vw, 80px);
  --radius-card: 24px;
  --radius-field: 18px;
  --radius-btn: 15px;
  --shadow-rest: 0 1px 3px rgba(10, 13, 18, .04);
  --shadow-lift: 0 18px 40px rgba(10, 13, 18, .06);
  --bubble: linear-gradient(20deg, #e6f8e4, #dcf6ee 50%, #dcf8fa);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--navy);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--black); }
input::placeholder { color: var(--placeholder); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---------- Atmosphere ---------- */
.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .45; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes wdFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kcoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wdPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.icon-circle {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border: 0; border-radius: var(--radius-btn);
  font: 600 15px var(--body); white-space: nowrap; cursor: pointer;
}
.btn--md { height: 50px; padding: 0 22px; }
.btn--lg { height: 52px; padding: 0 22px; }
.btn--xl { height: 56px; padding: 0 26px; font-size: 16px; }
.btn--dark { background: var(--navy); color: var(--surface); }
.btn--dark:hover { background: var(--black); color: var(--surface); }
.btn--light { background: var(--chip); color: var(--navy); }
.btn--light:hover { background: var(--chip-hover); color: var(--navy); }
.btn--surface { background: var(--surface); color: var(--navy); }
.btn--surface:hover { background: var(--surface-hover); color: var(--navy); }

/* ---------- Section patterns ---------- */
.eyebrow { display: flex; align-items: center; gap: 10px; font: 500 14px var(--body); color: var(--text-4); }
.eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.h2 {
  margin: 16px 0 0;
  font: 600 clamp(38px, 4.2vw, 56px)/1.02 var(--display);
  letter-spacing: -.035em;
}
.pill-pro {
  height: 30px; display: flex; align-items: center; padding: 0 14px; border-radius: 999px;
  background: var(--pro-tint); color: var(--pro-ink); font: 500 14px var(--body);
}

/* Phone and browser frames around app screenshots */
.phone-screen { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.browser { border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: 0 40px 80px rgba(8, 29, 40, .14), 0 8px 20px rgba(8, 29, 40, .06); }
.browser__bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--surface-hover); }
.browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: #cfd3dc; }
.browser img { display: block; width: 100%; height: auto; }

.store-btn {
  display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 22px 0 18px; border-radius: var(--radius-btn);
  background: var(--navy); color: var(--surface);
}
.store-btn:hover { background: var(--black); color: var(--surface); }
@media (max-width: 899.98px) { .store-btn { min-width: 214px; justify-content: center; } }
@media (max-width: 519.98px) { .store-btn { width: min(280px, 100%); } }
.store-btn__text { display: flex; flex-direction: column; align-items: flex-start; }
.store-btn__small { font: 500 11px/1.1 var(--body); opacity: .85; }
.store-btn__big { font: 600 19px/1.15 var(--display); letter-spacing: -.01em; }

/* ---------- Header ---------- */
.header-spacer { height: 92px; }
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 14px clamp(16px, 4vw, 48px);
  transition: transform 280ms cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
.site-header.is-hidden { transform: translateY(-110%); }
.site-header__inner { position: relative; max-width: 1280px; margin: 0 auto; }
.site-header__bar {
  display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 8px 0 16px; border-radius: var(--radius-card);
  background: rgba(253, 253, 253, .78);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 2px rgba(10, 13, 18, .04), 0 10px 30px rgba(10, 13, 18, .05);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 34px; height: 34px; }
.brand span { font: 600 20px var(--display); letter-spacing: -.02em; }
.brand .brand__badge {
  height: 24px; display: flex; align-items: center; padding: 0 9px; border-radius: 999px;
  background: var(--pro-tint); color: var(--pro-ink); font: 500 12px var(--body); letter-spacing: normal;
}
.site-nav { flex: 1 1 auto; display: flex; justify-content: center; gap: 4px; }
.site-nav a {
  display: flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 12px;
  font: 500 15px var(--body); white-space: nowrap; color: var(--text-2);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { background: rgba(8, 29, 40, .05); color: var(--navy); }
.site-header__fill { display: none; flex: 1; }
.site-header__cta { flex: none; }
.menu-btn {
  flex: none; width: 48px; height: 48px; border: 0; border-radius: var(--radius-btn);
  background: var(--chip);
  display: none; align-items: center; justify-content: center; cursor: pointer;
}

/* Dropdown menu on narrow screens */
.site-menu {
  position: absolute; left: 0; right: 0; top: 72px;
  display: flex; flex-direction: column; gap: 4px; padding: 10px;
  border-radius: var(--radius-card); background: var(--surface);
  box-shadow: 0 24px 60px rgba(8, 29, 40, .16);
  animation: kcoIn .25s ease-out both;
}
.site-menu a {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 16px; border-radius: var(--radius-btn);
  font: 500 17px var(--body); color: var(--navy);
}
.site-menu a:hover,
.site-menu a[aria-current="page"] { background: var(--chip); color: var(--navy); }

/* The five links need about 1010 px next to the logo (1120 px on Professional, whose logo carries a badge):
   below these widths the menu button takes over. Keep the numbers in sync with initMenu() in js/main.js. */
@media (max-width: 1039.98px) {
  .site-nav { display: none; }
  .site-header__fill { display: block; }
  .menu-btn { display: flex; }
}
@media (max-width: 1159.98px) {
  .site-header--pro .site-nav { display: none; }
  .site-header--pro .site-header__fill { display: block; }
  .site-header--pro .menu-btn { display: flex; }
}
/* Phones: logo, button and menu button have to fit side by side (they need about 475 px with the wordmark, so
   the menu button used to be pushed off the screen). Below 520 px the logo is just the icon; the wordmark stays
   in the page for screen readers. Professional's badge is left out below 640 px (its page has its own
   "Professional" label). */
@media (max-width: 639.98px) {
  .brand .brand__badge { display: none; }
}
@media (max-width: 519.98px) {
  .site-header__bar { gap: 10px; padding: 0 8px 0 12px; }
  .brand span:not(.brand__badge) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------- Download CTA (shared final section) ---------- */
.download {
  position: relative; scroll-margin-top: 96px;
  padding: clamp(72px, 9vw, 120px) var(--gutter);
  overflow: hidden;
}
/* Glow along the bottom edge: download CTA and the Professional final CTA */
.download, .pro-cta {
  background:
    radial-gradient(50vw 460px at 15% 100%, rgba(150, 236, 236, .9), rgba(150, 236, 236, 0) 70%),
    radial-gradient(50vw 460px at 55% 110%, rgba(176, 244, 214, .9), rgba(176, 244, 214, 0) 70%),
    radial-gradient(46vw 460px at 95% 100%, rgba(216, 248, 190, 1), rgba(216, 248, 190, 0) 70%),
    var(--canvas);
}
.download__inner {
  position: relative; max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px; align-items: center;
}
.download__title {
  margin: 0;
  font: 600 clamp(56px, 7vw, 104px)/0.94 var(--display);
  letter-spacing: -.045em;
}
.download__lede { margin: 24px 0 0; max-width: 420px; font: 400 18px/1.55 var(--body); color: var(--text-3); }
.download__stores { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
/* Transparent mascot: nothing behind it except the design's soft drop shadow. */
.download__mascot {
  justify-self: center; width: min(340px, 70%); height: auto;
  filter: drop-shadow(0 30px 40px rgba(8, 29, 40, .12));
  animation: wdFloat 7s ease-in-out infinite;
}
/* One column (below about 990 px): text, buttons and mascot all in the middle */
@media (max-width: 989.98px) {
  .download__inner { text-align: center; }
  .download__lede { margin-left: auto; margin-right: auto; }
  .download__stores { justify-content: center; }
}

/* ---------- Footer ---------- */
.site-footer { padding: 56px var(--gutter) 36px; background: var(--canvas); border-top: 1px solid var(--line); }
.site-footer__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }

/* WhatDish row */
.sister-app {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding: 20px 20px 20px 24px; border-radius: var(--radius-card);
  background: var(--surface);
  transition: box-shadow .25s ease;
}
.sister-app:hover { box-shadow: var(--shadow-lift); }
.sister-app img { flex: none; width: 44px; height: 28px; }
.sister-app__text { flex: 1 1 300px; min-width: 0; }
.sister-app__eyebrow { font: 500 12px var(--body); color: var(--text-5); }
.sister-app__title { margin-top: 3px; font: 500 17px/1.35 var(--body); color: var(--navy); }
.sister-app__cta {
  flex: none; display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--radius-btn);
  background: var(--chip); font: 600 15px var(--body); color: var(--navy);
}

.site-footer__rule { height: 1px; margin: -8px 0; background: var(--line); }
.site-footer__main {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 32px 48px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 340px; }
.site-footer__logo { display: flex; align-items: center; gap: 10px; }
.site-footer__logo img { width: 32px; height: 32px; }
.site-footer__logo span { font: 600 18px var(--display); letter-spacing: -.02em; }
.site-footer__address { margin: 0; font: 400 14px/1.55 var(--body); color: var(--text-4); }
.social { display: flex; gap: 8px; }
.social a {
  width: 44px; height: 44px; border-radius: var(--radius-btn); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.social a:hover { background: var(--social-hover); }
.site-footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.site-footer__heading { font: 600 14px var(--body); }
.site-footer__col a { font: 400 14px var(--body); }
.site-footer__col a,
.site-footer__col a:hover { color: var(--text-4); }

.newsletter { flex: 1 1 360px; max-width: 460px; scroll-margin-top: 120px; }
.newsletter__title { font: 600 16px var(--body); }
.newsletter__sub { margin-top: 4px; font: 400 14px var(--body); color: var(--text-4); }
.newsletter__form {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px;
  border-radius: var(--radius-field); background: var(--surface); box-shadow: var(--shadow-rest);
}
.newsletter__form input {
  flex: 1 1 200px; min-width: 0; height: 48px; padding: 0 16px;
  border: 0; border-radius: var(--radius-btn); background: var(--canvas);
  font: 400 15px var(--body); color: var(--navy); outline: none;
}
.newsletter__form input:focus-visible { box-shadow: 0 0 0 2px var(--navy); }
.newsletter__form .btn { flex: 1 0 auto; padding: 0 22px; }
/* Bots fill this hidden field; people never see it */
.newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.newsletter__error { margin: 8px 0 0; font: 400 13px var(--body); color: #b42318; }
.newsletter__done {
  margin-top: 14px; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: var(--radius-field); background: var(--surface);
}
.newsletter__done:focus { outline: none; }
.newsletter__check {
  flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.newsletter__done-text { font: 500 15px var(--body); }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--line);
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 12px 24px; font: 400 14px var(--body); }
.site-footer__links a,
.site-footer__links a:hover { color: var(--text-4); }
.site-footer__copy { font: 400 14px var(--body); color: var(--text-4); }
@media (max-width: 599.98px) {
  .sister-app { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; }
  .sister-app__text { flex: none; }
  .site-footer__main { flex-direction: column; align-items: center; text-align: center; }
  .site-footer__brand { align-items: center; max-width: none; }
  .site-footer__logo, .social { justify-content: center; }
  .site-footer__col { align-items: center; min-width: 0; }
  .newsletter { flex: none; width: 100%; }
  .site-footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
  .site-footer__links { justify-content: center; gap: 12px 20px; }
}

/* ---------- Support: hero ---------- */
.support-hero {
  position: relative; margin-top: -92px;
  padding: clamp(140px, 13vw, 170px) var(--gutter) clamp(32px, 4vw, 48px);
  overflow: hidden;
  background:
    radial-gradient(60vw 420px at 10% -10%, rgba(150, 236, 236, .55), rgba(150, 236, 236, 0) 70%),
    radial-gradient(50vw 420px at 70% -10%, rgba(216, 248, 190, .6), rgba(216, 248, 190, 0) 70%),
    var(--canvas);
}
.support-hero__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.support-hero h1 {
  margin: 0;
  font: 600 clamp(48px, 6.4vw, 88px)/0.96 var(--display);
  letter-spacing: -.045em;
}
.support-hero p {
  margin: 20px 0 0; max-width: 560px;
  font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--body); color: var(--text-3);
}

/* ---------- Support: search (sticks under the header on narrow screens) ---------- */
.support-search { position: relative; top: 12px; z-index: 40; padding: 0 var(--gutter); }
.support-search__inner { max-width: 1200px; margin: 0 auto; }
.support-search__field {
  max-width: 640px; display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 10px 0 20px; border-radius: var(--radius-field);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(10, 13, 18, .05), 0 14px 34px rgba(8, 29, 40, .07);
}
.support-search__field:focus-within {
  box-shadow: 0 0 0 2px var(--navy), 0 1px 3px rgba(10, 13, 18, .05), 0 14px 34px rgba(8, 29, 40, .07);
}
.support-search__field input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  -webkit-appearance: none; appearance: none;
  font: 400 17px var(--body); color: var(--navy);
}
.support-search__field input::-webkit-search-cancel-button,
.support-search__field input::-webkit-search-decoration { -webkit-appearance: none; }
.support-search__clear {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: var(--chip);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ---------- Support: quick help topics ---------- */
.support-topics { padding: clamp(40px, 5vw, 56px) var(--gutter) 0; }
.support-topics__grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.topic {
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  border-radius: var(--radius-card); background: var(--surface);
  transition: transform .25s ease, box-shadow .25s ease;
}
.topic:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.topic__title { font: 600 17px/1.25 var(--display); letter-spacing: -.01em; color: var(--navy); }
.topic__desc { margin-top: 4px; font: 400 14px/1.45 var(--body); color: var(--text-4); }

/* ---------- Support: FAQ ---------- */
.faq { scroll-margin-top: 96px; padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(72px, 9vw, 120px); }
.faq__inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.faq__status { font: 500 15px var(--body); color: var(--text-4); }
.faq__status:empty { display: none; }
.faq__group { scroll-margin-top: 96px; }
.faq__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.faq__head h2 {
  margin: 0;
  font: 600 clamp(22px, 2vw, 26px)/1.2 var(--display);
  letter-spacing: -.02em;
}
.badge-soon {
  height: 24px; display: flex; align-items: center; padding: 0 10px;
  border-radius: 999px; background: var(--surface); border: 1.5px solid var(--teal);
  font: 600 12px var(--body);
}
.faq__list { display: flex; flex-direction: column; gap: 8px; }
.faq__item {
  border-radius: var(--radius-field); background: var(--surface);
  box-shadow: var(--shadow-rest);
  transition: box-shadow .25s ease;
}
.faq__item.is-open { box-shadow: 0 0 0 1.5px var(--navy); }
.faq__q { margin: 0; }
.faq__btn {
  width: 100%; display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 14px 14px 14px 20px;
  border: 0; border-radius: var(--radius-field); background: transparent;
  text-align: left; font: 500 17px/1.35 var(--body); color: var(--navy); cursor: pointer;
}
.faq__q-text { flex: 1; }
.faq__icon {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center;
}
.faq__btn[aria-expanded="true"] .faq__icon-v { display: none; }
.faq__a { padding: 0 20px 20px; animation: kcoIn .25s ease-out both; }
.faq__a p { margin: 0; max-width: 640px; font: 400 16px/1.65 var(--body); color: var(--text-2); }
.faq__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.faq__links a {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: 12px;
  background: var(--chip); font: 500 14px var(--body); color: var(--navy);
}
.faq__links a:hover { background: var(--chip-hover); color: var(--navy); }
.faq__empty {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 48px 24px; border-radius: var(--radius-card); background: var(--surface);
  text-align: center;
}
.faq__empty-text { font: 500 18px var(--body); }

/* ---------- Support: still need help ---------- */
.support-contact { padding: 0 var(--gutter) clamp(72px, 9vw, 120px); }
.support-contact__card {
  max-width: 820px; margin: 0 auto; padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-card);
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(158, 238, 238, .35), rgba(158, 238, 238, 0) 70%),
    radial-gradient(420px 260px at 100% 100%, rgba(214, 248, 190, .45), rgba(214, 248, 190, 0) 70%),
    var(--surface);
}
.support-contact h2 {
  margin: 0;
  font: 600 clamp(32px, 3.4vw, 44px)/1.05 var(--display);
  letter-spacing: -.035em;
}
.support-contact__lede { margin: 12px 0 0; font: 400 18px/1.55 var(--body); color: var(--text-4); }
.support-contact__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.support-contact__note { margin: 20px 0 0; font: 400 14px var(--body); color: var(--text-4); }
.support-contact__follow {
  display: flex; align-items: center; gap: 8px;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft);
  font: 400 14px var(--body); color: var(--text-4);
}
.support-contact__follow a {
  width: 40px; height: 40px; border-radius: 12px; background: var(--chip);
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 899.98px) {
  .support-search { position: sticky; }
  .support-topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Home: shared pieces ---------- */
.eyebrow__dot--pulse { animation: wdPulse 1.6s ease-in-out infinite; }
.anim-in { animation: kcoIn .35s ease-out both; }
.anim-in--fast { animation-duration: .3s; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 44px; display: flex; align-items: center; padding: 0 18px; border-radius: var(--radius-btn);
  background: var(--surface); font: 500 15px var(--body);
}
.chip--glass { background: rgba(253, 253, 253, .6); }
.chip--mist { background: rgba(253, 253, 253, .55); }

/* Phone frame: 300 px wide, a smaller 250 px one for the tilted phones behind */
/* The frame keeps its proportions (aspect-ratio) when a narrow column makes it smaller than 300 px */
.phone {
  position: relative; display: flex; flex-direction: column; width: 300px; max-width: 100%; aspect-ratio: 300 / 620;
  border-radius: 50px; background: var(--navy); padding: 10px;
  box-shadow: 0 50px 90px rgba(8, 29, 40, .2), 0 12px 24px rgba(8, 29, 40, .08);
}
.phone--630 { aspect-ratio: 300 / 630; }
.phone--640 { aspect-ratio: 300 / 640; }
.phone--650 { aspect-ratio: 300 / 650; }
.phone__screen { position: relative; flex: 1 1 0; min-height: 0; border-radius: 40px; overflow: hidden; background: var(--chip); }
.phone__screen--mock { background: #f6f7f9; }
.phone__notch {
  position: absolute; left: 50%; top: 10px; width: 88px; height: 26px; margin-left: -44px;
  border-radius: 20px; background: var(--navy);
}
.phone__notch--87 { width: 87px; }
.phone--sm { width: 250px; aspect-ratio: 250 / 540; border-radius: 42px; padding: 8px; }
.phone--sm .phone__screen { border-radius: 32px; }
.phone--sm .phone__notch { top: 8px; width: 73px; height: 21px; margin-left: -36px; }

.typing { align-self: flex-start; display: flex; gap: 4px; border: 1px solid #e6e6ee; background: #f7f7fa; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); animation: wdPulse 1s ease-in-out infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

.ai-tag { display: flex; align-items: center; gap: 3px; height: 19px; padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--text-2); }
.macros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.macros > div { padding: 7px 9px; border-radius: 10px; background: var(--chip); }
.macros__label { display: flex; align-items: center; gap: 4px; font: 400 11px var(--body); color: var(--text-2); }
.macros__label span { width: 6px; height: 6px; border-radius: 50%; }
.macros__value { margin-top: 2px; font: 500 14px var(--body); }
.macros .is-protein { background: #fa8463; }
.macros .is-carbs { background: #fdd065; }
.macros .is-fat { background: var(--teal); }
.meal-meta { margin-top: 3px; display: flex; align-items: center; gap: 8px; font: 400 11px var(--body); color: var(--text-2); }
.meal-meta > span { display: flex; align-items: center; gap: 3px; }
.meal-meta > .meal-meta__tag { gap: 4px; }
.meal-meta__dot { width: 5px; height: 5px; border-radius: 50%; background: #d8d63a; }

.list-card {
  display: flex; flex-direction: column; max-width: 520px; padding: 8px;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-rest);
}

/* ---------- Home: hero ---------- */
.home-hero {
  position: relative; margin-top: -92px;
  padding: clamp(140px, 14vw, 180px) var(--gutter) clamp(64px, 8vw, 120px);
  overflow: hidden;
  background:
    radial-gradient(60vw 560px at 18% -6%, rgba(150, 236, 236, .95), rgba(150, 236, 236, 0) 70%),
    radial-gradient(56vw 560px at 55% 4%, rgba(176, 244, 214, .95), rgba(176, 244, 214, 0) 70%),
    radial-gradient(52vw 520px at 94% 6%, rgba(216, 248, 190, 1), rgba(216, 248, 190, 0) 70%),
    radial-gradient(70vw 500px at 50% 82%, rgba(186, 242, 226, .7), rgba(186, 242, 226, 0) 70%),
    var(--canvas);
}
.home-hero__inner {
  position: relative; max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.home-hero__pill {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px;
  background: rgba(253, 253, 253, .7); font: 500 13px var(--body); color: var(--text-2);
}
.home-hero__pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.home-hero h1 {
  margin: 26px 0 0;
  font: 600 clamp(50px, 7.6vw, 108px)/0.94 var(--display);
  letter-spacing: -.045em; text-wrap: balance;
}
.home-hero__lede {
  margin: 26px 0 0; max-width: 580px;
  font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--body); color: var(--text-3); text-wrap: pretty;
}
.home-hero__stores { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.home-hero__stage {
  position: relative; width: 100%; max-width: 960px; margin-top: 64px;
  display: flex; flex-direction: column; align-items: center;
}
/* Hero phone: a full device mockup (frame included), its body 300 x 620 like the other phones */
.home-hero__phone {
  display: block; width: 304.4px; max-width: 100%; height: auto;
  filter: drop-shadow(0 50px 45px rgba(8, 29, 40, .2)) drop-shadow(0 12px 12px rgba(8, 29, 40, .08));
}

/* Status bar of the phone screens drawn in HTML (Cookbooks) */
.mock-status { height: 46px; display: flex; align-items: center; padding: 4px 26px 0; font: 600 14px var(--body); }

/* Chips floating around the hero phone */
.hero-float { position: absolute; display: flex; align-items: center; }
.hero-float--ask { left: 0; top: 64px; animation: wdFloat 6s ease-in-out infinite; }
.hero-float--meal { right: 0; top: 230px; animation: wdFloat 7s ease-in-out -2s infinite; }
.hero-float--log { left: clamp(0px, 4vw, 60px); top: 420px; animation: wdFloat 7.5s ease-in-out -3s infinite; }
.hero-float__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.hero-float__line { width: clamp(0px, calc(8vw - 40px), 72px); height: 1.5px; background: var(--green); }
.hero-float--log .hero-float__line { width: clamp(0px, calc(8vw - 40px), 56px); }
/* Phones: the cards sit on the screen, so no pointers, and the first two rest on the dish photo (not on the greeting and the meal title) */
@media (max-width: 639.98px) {
  .hero-float__dot, .hero-float__line { display: none; }
  .hero-float--ask { top: 128px; }
  .hero-float--meal { top: 188px; }
}
.hero-float__ask {
  max-width: clamp(170px, 22vw, 280px); padding: 14px 18px; border-radius: 18px 18px 4px 18px;
  background: var(--navy); color: var(--surface); text-align: left;
  font: 500 clamp(14px, 1.2vw, 16px)/1.4 var(--body);
  box-shadow: 0 14px 34px rgba(8, 29, 40, .16);
}
.hero-float__card {
  display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; background: var(--surface);
  border-radius: 18px; box-shadow: 0 14px 34px rgba(8, 29, 40, .08); text-align: left;
}
.hero-float__card img { width: 48px; height: 48px; border-radius: 15px; object-fit: cover; }
.hero-float__title { font: 500 clamp(14px, 1.2vw, 16px)/1.2 var(--body); }
.hero-float__meta { margin-top: 2px; font: 400 13px/1.3 var(--body); color: var(--text-5); }
.hero-float__meta--time { display: flex; align-items: center; gap: 5px; }
.hero-float__check {
  width: 24px; height: 24px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
/* From 900 px, pin each chip's dot to the part of the phone screen it describes (Today's meals, the second meal
   card, Today's food log), whatever the chip's width. The phone is centered and 300 px wide. */
@media (min-width: 900px) {
  .hero-float--ask { left: auto; right: calc(50% + 120px); }
  .hero-float--meal { right: auto; left: calc(50% + 123px); }
  .hero-float--log { left: auto; right: calc(50% + 94px); }
}

/* ---------- Home: feature cards ---------- */
.home-features { scroll-margin-top: 96px; padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(72px, 9vw, 120px); }
.home-features__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.home-features__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; }
.home-features__head .h2 { margin: 0; max-width: 620px; }
.home-features__head p { margin: 0; max-width: 380px; font: 400 18px/1.55 var(--body); color: var(--text-4); }
.fcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.fcard {
  display: flex; flex-direction: column; border-radius: var(--radius-card); overflow: hidden;
  border: 1.5px solid transparent;
  background: linear-gradient(#fdfdfd, #fdfdfd) padding-box, linear-gradient(135deg, #c9f3f0, #d6f5e6 50%, #e3f8d6) border-box;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fcard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(10, 13, 18, .08); }
.fcard__visual {
  position: relative; height: 250px; overflow: hidden;
  background:
    radial-gradient(300px 200px at 20% 0%, rgba(158, 238, 238, .28), rgba(158, 238, 238, 0) 70%),
    radial-gradient(300px 200px at 90% 30%, rgba(214, 248, 190, .3), rgba(214, 248, 190, 0) 70%),
    #f7f8fa;
}
.fcard__visual--alt {
  background:
    radial-gradient(300px 200px at 80% 0%, rgba(214, 248, 190, .3), rgba(214, 248, 190, 0) 70%),
    radial-gradient(300px 200px at 10% 40%, rgba(158, 238, 238, .25), rgba(158, 238, 238, 0) 70%),
    #f7f8fa;
}
.fcard__body { padding: 18px 24px 26px; }
.fcard__title { font: 600 24px/1.15 var(--display); letter-spacing: -.02em; }
.fcard__body p { margin: 8px 0 0; font: 400 16px/1.5 var(--body); color: var(--text-4); }
.fpanel { background: var(--surface); box-shadow: 0 1px 3px rgba(10, 13, 18, .05), 0 14px 32px rgba(8, 29, 40, .09); }
.ficon {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center;
}
.ficon--lg { width: 26px; height: 26px; }

/* Card 1: chat */
.fchat {
  position: absolute; left: 18px; top: 18px; right: -24px; bottom: -24px;
  padding: 16px 40px 16px 16px; border-radius: 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.fchat__you { display: flex; flex-direction: column; gap: 5px; }
.fchat__head { display: flex; justify-content: space-between; font: 600 12px var(--body); color: var(--text-2); }
.fchat__head span + span { font-weight: 400; color: var(--text-5); }
.fchat__q { align-self: flex-start; padding: 10px 13px; border-radius: 12px; background: var(--chip); font: 400 14px/1.4 var(--body); }
.fchat__kco { display: flex; gap: 8px; }
.fchat__kco > img { flex: none; width: 38px; height: auto; align-self: flex-start; }
.fchat__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fchat__name { font: 500 13px var(--body); color: var(--text-2); }
.fchat__a { align-self: flex-start; }
.fchat__a div { padding: 10px 13px; border-radius: 12px; background: var(--bubble); font: 400 14px/1.4 var(--body); }
.fchat__a.is-new div { animation: kcoIn .35s ease-out both; }
.fchat .typing { padding: 12px 13px; border-radius: 10px; }
.fchat__dish { position: relative; margin-left: 46px; width: 150px; height: 120px; flex: none; border-radius: 14px; overflow: hidden; }
.fchat__dish img { width: 100%; height: 100%; object-fit: cover; }
.fchat__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 29, 40, 0) 35%, rgba(8, 29, 40, .7)); }
.fchat__dish-text { position: absolute; left: 10px; right: 10px; top: 58px; color: var(--surface); }
.fchat__dish-name { font: 500 14px/1.2 var(--body); }
.fchat__dish-time { margin-top: 3px; font: 400 12px var(--body); }

/* Card 2: food log */
.fcal { position: absolute; right: -30px; top: 16px; width: 190px; padding: 12px 14px; border-radius: 16px; transform: rotate(3deg); }
.fcal__head { display: flex; align-items: center; gap: 7px; }
.fcal__head .ficon { flex: initial; }
.fcal__label { font: 500 14px var(--body); }
.fcal__value { margin-top: 6px; display: flex; align-items: baseline; gap: 4px; }
.fcal__number { font: 600 26px/1 var(--display); letter-spacing: -.02em; }
.fcal__unit { font: 400 12px var(--body); color: var(--chevron); }
.fmeal { position: absolute; left: 18px; top: 62px; width: 290px; border-radius: 16px; }
.fcard.is-active .fmeal { animation: kcoIn .45s cubic-bezier(.2, .7, .2, 1) both; }
.fmeal__head { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
.fmeal__name { font: 500 15px var(--body); }
.fmeal__when { flex: 1; font: 400 11px var(--body); color: var(--text-5); white-space: nowrap; }
.fmeal__kcal { font: 400 12px var(--body); color: var(--text-5); }
.fmeal__body { padding: 10px 12px 12px; }
.fmeal__dish { display: flex; gap: 9px; align-items: center; }
.fmeal__dish img { flex: none; width: 38px; height: 38px; border-radius: 9px; object-fit: cover; }
.fmeal__dish-text { min-width: 0; }
.fmeal__dish-name { font: 500 14px var(--body); }
.fmeal__portion { margin-top: 2px; display: flex; align-items: center; gap: 6px; font: 400 11px var(--body); color: var(--text-5); }
.fmeal__check {
  position: absolute; right: -8px; top: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(8, 29, 40, .15); animation: kcoIn .3s .3s ease-out both;
}

/* Card 3: plan */
.fplan { position: absolute; left: 18px; top: 18px; right: -40px; display: flex; flex-direction: column; gap: 8px; }
.fplan__days { display: flex; gap: 4px; padding: 8px; border-radius: 16px; }
.fplan__days span {
  flex: 1; height: 50px; border-radius: 14px; background: var(--chip); color: var(--text-5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: 400 10px var(--body); transition: background .3s ease;
}
.fplan__days b { font: 600 14px var(--body); color: var(--navy); }
.fplan__days .is-selected { background: var(--navy); color: var(--surface); }
.fplan__days .is-selected b { color: var(--surface); }
.fplan__meals { display: flex; flex-direction: column; gap: 6px; margin-right: 52px; }
.fplan__meals--next { animation: kcoIn .35s ease-out both; }
.fplan__meal { display: flex; gap: 10px; align-items: center; padding: 6px; border-radius: 14px; }
.fplan__meal img { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.fplan__meal-text { min-width: 0; }
.fplan__meal-name { font: 500 14px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fpill { position: absolute; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 8px; border-radius: 999px; }
.fpill--list { height: 36px; padding: 0 14px 0 6px; font: 500 13px var(--body); }

/* Card 4: cook */
.fcook__photo {
  position: absolute; right: -20px; top: -10px; width: 200px; height: 140px; object-fit: cover;
  border-radius: 18px; transform: rotate(4deg); opacity: .95;
}
.fstep { position: absolute; left: 18px; top: 56px; width: 270px; border-radius: 18px; }
.fstep__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px dashed var(--line); }
.fstep__num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center; font: 500 13px var(--body);
}
.fstep__title { font: 500 17px var(--body); }
.fstep__of { margin-left: auto; font: 400 12px var(--body); color: var(--text-5); }
.fstep__text { padding: 12px 14px 14px; font: 400 15px/1.4 var(--body); }
.fpill--timer { height: 44px; padding: 0 16px 0 8px; }
.fpill__time { font: 600 16px var(--body); font-variant-numeric: tabular-nums; }
.fpill__live { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: wdPulse 1.6s ease-in-out infinite; }

/* ---------- Home: copilot chat ---------- */
.copilot { scroll-margin-top: 96px; padding: 0 clamp(12px, 3vw, 40px); }
.copilot__panel {
  position: relative; max-width: 1360px; margin: 0 auto; border-radius: clamp(24px, 3vw, 44px); overflow: hidden;
  padding: clamp(56px, 7vw, 104px) clamp(20px, 6vw, 96px);
  background:
    radial-gradient(50vw 520px at 10% 10%, rgba(150, 236, 236, .85), rgba(150, 236, 236, 0) 70%),
    radial-gradient(46vw 520px at 60% 100%, rgba(176, 244, 214, .8), rgba(176, 244, 214, 0) 70%),
    radial-gradient(40vw 480px at 100% 20%, rgba(216, 248, 190, .9), rgba(216, 248, 190, 0) 70%),
    #eef4f1;
}
.copilot__grid {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.copilot .eyebrow { color: var(--text-2); }
.copilot h2 { margin: 16px 0 0; font: 600 clamp(42px, 5vw, 72px)/0.98 var(--display); letter-spacing: -.04em; }
.copilot__lede { margin: 22px 0 0; max-width: 470px; font: 400 18px/1.55 var(--body); color: var(--text-1); text-wrap: pretty; }
.copilot .chips { margin-top: 32px; }
.copilot__replay {
  margin-top: 28px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 6px;
  border: 0; border-radius: var(--radius-btn); background: transparent;
  font: 500 15px var(--body); color: var(--text-1); cursor: pointer;
}
.copilot__replay:hover { background: rgba(253, 253, 253, .5); }
.copilot__replay span {
  width: 32px; height: 32px; border-radius: 50%; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.chat-demo { justify-self: center; display: flex; flex-direction: column; align-items: center; }
.phone--chat { width: 320px; height: 660px; border-radius: 52px; }
.phone--chat .phone__screen { border-radius: 42px; background: #a9adb6; }
.phone--chat .phone__notch { z-index: 2; }
.chat-bg {
  position: absolute; inset: 0; filter: blur(7px); transform: scale(1.06);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(8, 29, 40, .25)),
    radial-gradient(260px 200px at 25% 0%, #6fd6d6, rgba(111, 214, 214, 0) 75%),
    radial-gradient(260px 200px at 85% 5%, #a9dca0, rgba(169, 220, 160, 0) 75%),
    #c9cdd4;
}
.chat-bg__time { position: absolute; left: 22px; top: 20px; font: 600 13px var(--body); color: var(--text-1); }
.chat-bg__title { position: absolute; left: 20px; top: 56px; font: 600 30px var(--display); color: var(--text-1); }
.chat-bg__avatar { position: absolute; right: 20px; top: 56px; width: 40px; height: 40px; border-radius: 50%; background: #8d6e5d; }
.chat-bg__card { position: absolute; left: 18px; right: 18px; top: 118px; height: 90px; border-radius: 18px; background: rgba(253, 253, 253, .6); }
.chat-sheet {
  position: absolute; left: 10px; right: 10px; top: 84px; bottom: 10px;
  display: flex; flex-direction: column; border-radius: 30px; overflow: hidden;
  background: linear-gradient(180deg, #fdfdfd 72%, rgba(253, 253, 253, .9) 82%, #d4f7e6 94%, #b6f2ef);
  box-shadow: 0 -6px 30px rgba(8, 29, 40, .12);
}
.chat-sheet__top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0 12px; }
.chat-sheet__history {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.chat-msgs {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: 10px 14px 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40px);
  mask-image: linear-gradient(180deg, transparent, #000 40px);
  transition: opacity .45s ease;
}
.chat-msgs.is-fading { opacity: 0; }
/* Each conversation lays its messages straight into .chat-msgs */
.chat-conv { display: contents; }
.chat-intro {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  animation: kcoIn .4s ease-out both;
}
.chat-intro img { width: 150px; height: auto; }
.chat-intro div {
  max-width: 92%; padding: 10px 14px; border-radius: 12px; background: var(--bubble);
  font: 400 13px/1.4 var(--body); color: var(--navy); text-align: center;
}
.chat-you { display: flex; flex-direction: column; gap: 5px; }
.chat-head { display: flex; justify-content: space-between; align-items: baseline; }
.chat-head span:first-child { font: 600 12px var(--body); color: var(--text-2); }
.chat-head--kco span:first-child { font: 500 13px var(--body); }
.chat-head span + span { font: 400 10px var(--body); color: var(--text-5); }
.chat-you__msg {
  align-self: flex-start; max-width: 100%; padding: 9px 12px; border-radius: 12px; background: var(--chip);
  font: 400 13px/1.4 var(--body); color: var(--navy);
}
.chat-row { display: flex; gap: 8px; }
.chat-row > img { flex: none; width: 40px; height: auto; align-self: flex-start; }
.chat-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.chat-typing { padding: 9px 11px; border-radius: 8px; }
.chat-bubble { padding: 9px 12px; border-radius: 12px; background: var(--bubble); font: 400 13px/1.4 var(--body); color: var(--navy); }
.chat-bubble--fit { align-self: flex-start; }
.chat-bubble--indent { margin-left: 42px; }
.chat-when {
  display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 999px;
  background: var(--surface); font: 500 12px var(--body); vertical-align: 1px;
}
.chat-bubble__hint { margin-top: 2px; font: 400 11px var(--body); color: var(--text-3); }
.chat-log { border-radius: 14px; border: 1px solid var(--line-soft); background: var(--surface); }
.chat-log__head { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
.chat-log__icon {
  width: 20px; height: 20px; border-radius: 50%; background: var(--chip);
  display: flex; align-items: center; justify-content: center;
}
.chat-log__meal { font: 500 13px var(--body); }
.chat-log__when { flex: 1; font: 400 10px var(--body); color: var(--text-5); white-space: nowrap; }
.chat-log__kcal { font: 400 11px var(--body); color: var(--text-5); }
.chat-log__body { padding: 9px 10px 10px; }
.chat-log__dish { display: flex; gap: 8px; align-items: center; }
.chat-log__dish img { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: #f6f7f9; }
.chat-log__dish-text { min-width: 0; }
.chat-log__name { font: 500 13px var(--body); }
.chat-log__portion { margin-top: 2px; display: flex; align-items: center; gap: 6px; font: 400 10px var(--body); color: var(--text-5); }
.chat-log .ai-tag { height: 18px; }
.chat-log .macros { margin-top: 9px; }
.chat-log .macros > div { padding: 7px 8px; }
.chat-log .macros__label { font-size: 10px; }
.chat-log .macros__value { font-size: 13px; }
.chat-log .is-protein { background: #e0663f; }
.chat-log .is-carbs { background: #f5cf5a; }
.chat-log .is-fat { background: #5ee6e0; }
.chat-actions { display: flex; gap: 6px; }
.chat-actions--wrap { flex-wrap: wrap; }
.chat-actions span {
  height: 32px; display: flex; align-items: center; padding: 0 14px; border-radius: 8px;
  background: var(--chip); border: 1px solid var(--line); color: var(--navy); font: 500 12px var(--body);
}
.chat-actions span:first-child { background: var(--navy); border: 0; color: var(--surface); }
.chat-ideas { display: flex; flex-direction: column; gap: 8px; }
.chat-cards { display: flex; gap: 8px; margin: 0 -14px; padding: 0 14px; overflow: hidden; }
.chat-card { position: relative; flex: none; width: 132px; height: 156px; border-radius: 14px; overflow: hidden; }
.chat-card img { width: 100%; height: 100%; object-fit: cover; }
.chat-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 29, 40, 0) 45%, rgba(8, 29, 40, .7)); }
.chat-card__text { position: absolute; left: 10px; right: 10px; bottom: 9px; color: var(--surface); }
.chat-card__name { font: 500 13px/1.2 var(--body); }
.chat-card__time { margin-top: 3px; display: flex; align-items: center; gap: 4px; font: 400 10px var(--body); }
.chat-recipe {
  display: flex; gap: 8px; align-items: center; padding: 5px; border-radius: 12px;
  border: 1px solid var(--line-soft); background: var(--surface);
}
.chat-recipe img { flex: none; width: 52px; height: 52px; border-radius: 9px; object-fit: cover; }
.chat-recipe__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-recipe__name { font: 500 12px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-recipe .meal-meta { margin-top: 0; font-size: 10px; }
.chat-compose { flex: none; padding: 0 10px 10px; }
.chat-compose__box {
  height: 72px; padding: 10px 8px 8px 12px; border-radius: 16px; border: 1.5px solid transparent;
  background: linear-gradient(#fdfdfd, #fdfdfd) padding-box, linear-gradient(120deg, #a4f0d7, #d0f9fa 50%, #cbffbe) border-box;
  box-shadow: 0 0 18px rgba(164, 240, 215, .6);
  display: flex; flex-direction: column; justify-content: space-between;
}
.chat-compose__hint { font: 400 12px var(--body); color: var(--chevron); }
.chat-compose__mic {
  align-self: flex-end; width: 28px; height: 28px; border-radius: 50%; background: var(--chip);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Home: text + phones sections (food log, my plan, cook mode) ---------- */
.home-split { scroll-margin-top: 96px; padding: clamp(72px, 9vw, 120px) var(--gutter); }
.home-split__grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(48px, 7vw, 96px); align-items: center;
}
.home-split__text { display: flex; flex-direction: column; gap: 36px; }
.home-split__text p { margin: 20px 0 0; max-width: 480px; font: 400 18px/1.55 var(--body); color: var(--text-4); text-wrap: pretty; }
.home-food {
  position: relative;
  background:
    radial-gradient(50vw 520px at 22% 40%, rgba(158, 238, 238, .45), rgba(158, 238, 238, 0) 70%),
    radial-gradient(44vw 520px at 35% 95%, rgba(214, 248, 190, .5), rgba(214, 248, 190, 0) 70%),
    var(--canvas);
}
.home-food .home-split__text p { max-width: 500px; }
.home-plan {
  position: relative;
  background:
    radial-gradient(50vw 520px at 78% 40%, rgba(158, 238, 238, .45), rgba(158, 238, 238, 0) 70%),
    radial-gradient(44vw 520px at 65% 95%, rgba(214, 248, 190, .5), rgba(214, 248, 190, 0) 70%),
    var(--canvas);
}
.home-cook .home-split__text p { max-width: 460px; }

/* Two phones: a tilted one behind, the main one in front */
.phones { position: relative; width: 100%; max-width: 540px; min-height: 660px; margin: 0 auto; }
.phones--plan { min-height: 760px; padding-left: clamp(0px, 5vw, 48px); }
.phones__back { position: absolute; right: 0; top: 70px; width: 250px; max-width: 62%; z-index: 1; transform: rotate(3deg); }
.phones--plan .phones__back { top: 64px; max-width: 58%; }
.phones__front { position: relative; z-index: 2; width: 300px; max-width: 76%; display: flex; flex-direction: column; align-items: center; }
.phones--plan .phones__front { max-width: 72%; }

/* Food log */
/* Food log phones are full device mockups (frame included): sized so the phone body is as wide as its slot */
.home-food .phones__back { display: flex; justify-content: center; }
.flog-phone {
  display: block; flex: none; width: 101.45%; max-width: none; height: auto;
  filter: drop-shadow(0 50px 45px rgba(8, 29, 40, .2)) drop-shadow(0 12px 12px rgba(8, 29, 40, .08));
}
.flog-chat {
  position: absolute; right: -8px; top: 500px; z-index: 3; width: 260px; max-width: 72%;
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-card);
  background: rgba(253, 253, 253, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px rgba(8, 29, 40, .14); animation: wdFloat 7s ease-in-out infinite;
}
.flog-chat__msg {
  align-self: flex-end; max-width: 92%; padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--chip); color: var(--navy); font: 400 14px/1.4 var(--body);
}
.flog-chat__entry {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: var(--radius-btn);
  background: var(--surface); box-shadow: 0 0 0 1px #eeeef3;
}
.flog-chat__entry img { flex: none; width: 36px; height: 36px; border-radius: 12px; object-fit: cover; }
.flog-chat__text { flex: 1; min-width: 0; }
.flog-chat__name { font: 500 13px/1.25 var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flog-chat__meta { font: 400 12px var(--body); color: var(--text-5); }
.flog-chat__check {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.flog-chat__via { display: flex; align-items: center; gap: 6px; padding: 0 4px; font: 500 11px var(--body); color: var(--text-4); }
.flog-chat__via span { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.flog-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.flog-badges__name { font: 500 14px var(--body); color: var(--text-4); }
.badge-new {
  height: 28px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px;
  background: var(--green); color: var(--surface); font: 600 13px var(--body);
}
.ways__row { display: flex; gap: 16px; align-items: center; padding: 12px 14px; }
.ways__row + .ways__row { border-top: 1px solid #eeeef3; }
.ways__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center;
}
.ways__title { font: 500 16px var(--body); }
.ways__sub { font: 400 14px var(--body); color: var(--text-4); }

/* My Plan: shopping list */
.shop {
  position: absolute; left: 0; top: 360px; z-index: 3; width: 250px; max-width: 72%; padding: 18px;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 30px 60px rgba(8, 29, 40, .16);
  animation: wdFloat 7s ease-in-out -2s infinite;
}
/* Phones: the plan screen is shorter here, so the list card sits lower and leaves more of it visible */
@media (max-width: 519.98px) {
  .phones--plan { min-height: 790px; }
  .shop { top: 412px; }
}
.shop__head { display: flex; justify-content: space-between; align-items: baseline; }
.shop__title { font: 600 18px var(--display); letter-spacing: -.01em; }
.shop__count { font: 400 12px var(--body); color: var(--text-5); }
.shop__sub { margin-top: 4px; font: 400 12px var(--body); color: var(--text-5); }
.shop__list { margin-top: 10px; display: flex; flex-direction: column; }
.shop__item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0;
  border: 0; border-top: 1px solid #f0f0f4; background: transparent; text-align: left; cursor: pointer;
  font: 400 14px var(--body); color: var(--navy);
}
.shop__box { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #cfd3dc; }
.shop__box svg { display: none; }
.shop__name { flex: 1; }
.shop__qty { font: 400 12px var(--body); color: var(--chevron); }
.shop__item[aria-pressed="true"] .shop__box {
  border: 0; background: var(--green); display: flex; align-items: center; justify-content: center;
}
.shop__item[aria-pressed="true"] .shop__box svg { display: block; }
.shop__item[aria-pressed="true"] .shop__name { color: var(--chevron); text-decoration: line-through; }

/* Cook mode */
.cook-visual { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.cook-visual__food {
  position: absolute; left: clamp(-20px, 0vw, 0px); bottom: 40px; width: min(220px, 42%); height: auto;
  filter: drop-shadow(0 24px 30px rgba(8, 29, 40, .14)); z-index: 2; animation: wdFloat 7s ease-in-out infinite;
}
.cook-step { display: flex; gap: 16px; align-items: flex-start; padding: 14px 16px; }
.cook-step + .cook-step { border-top: 1px solid #eeeef3; }
.cook-step__num {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center; font: 600 13px var(--body);
}
.cook-step__text { font: 400 16px/1.5 var(--body); padding-top: 4px; color: var(--text-4); }
.cook-step.is-current .cook-step__num { box-shadow: inset 0 0 0 1.5px var(--navy); color: var(--navy); }
.cook-step.is-current .cook-step__text { font-weight: 500; color: var(--navy); }

/* ---------- Home: add recipes ---------- */
/* overflow-x: clip keeps the 560 px glow behind the phone from making the page wider than a phone screen */
.home-recipes { scroll-margin-top: 96px; padding: clamp(72px, 9vw, 120px) var(--gutter); overflow-x: clip; }
.home-recipes__grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "text phone" "tiles phone";
  column-gap: clamp(48px, 7vw, 96px); row-gap: 40px; align-items: center;
}
.home-recipes__text { grid-area: text; align-self: end; max-width: 560px; }
.home-recipes__text p { margin: 20px 0 0; max-width: 480px; font: 400 18px/1.55 var(--body); color: var(--text-4); text-wrap: pretty; }
.home-recipes__phone { grid-area: phone; position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.home-recipes__glow {
  position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(164, 240, 215, .7), rgba(164, 240, 215, 0));
}
/* Import sources: the highlight steps through them (js/main.js) */
.sources {
  grid-area: tiles; align-self: start; width: 100%; max-width: 560px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.source {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 114px; padding: 14px 10px; border-radius: 18px; background: var(--surface); text-align: center; cursor: default;
  box-shadow: var(--shadow-rest); transition: transform .35s ease, box-shadow .35s ease;
}
.source.is-active { transform: translateY(-3px); box-shadow: 0 0 0 1.5px #8ac4af, 0 14px 28px rgba(8, 29, 40, .08); }
.source__label { font: 500 15px/1.25 var(--body); }
.source__sub { margin-top: 2px; font: 400 12px/1.3 var(--body); color: var(--text-5); }
.source--chatbot {
  grid-column: 1 / -1; flex-direction: row; justify-content: normal; gap: 14px;
  min-height: 76px; padding: 12px 18px 12px 12px; background: #eef9f4; text-align: left; cursor: auto;
}
.source--chatbot img { flex: none; width: auto; height: 68px; margin: -6px 0; }
.source--chatbot .source__label { font: 600 16px var(--body); }
.source--chatbot .source__sub { font: 400 13px var(--body); color: var(--text-4); }

/* ---------- Home: explore ---------- */
.explore { scroll-margin-top: 96px; padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(72px, 9vw, 120px); }
.explore__inner { max-width: 1200px; margin: 0 auto; }
.explore__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 40px; margin-bottom: 48px; }
.explore__aside { max-width: 380px; }
.explore__aside p { margin: 0; font: 400 18px/1.55 var(--body); color: var(--text-4); }
.explore__full { display: flex; align-items: center; gap: 10px; margin-top: 16px; font: 500 15px var(--body); }
.explore__full span {
  width: 28px; height: 28px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
}
/* Staggered columns, two cards each, faded out partway down the second card (height set by js/main.js) */
.explore__wall {
  --fade: 340px;
  position: relative; height: 760px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--fade)), transparent);
}
.explore__cols { display: flex; gap: 20px; align-items: flex-start; }
.explore__cols.is-two { gap: 12px; }
.explore__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.explore__col:nth-child(even) { padding-top: 56px; }
.recipe { border-radius: var(--radius-card); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-rest); }
.recipe__media { position: relative; }
.recipe__media img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.recipe + .recipe .recipe__media img { aspect-ratio: 3/4; }
.recipe__premium {
  position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px;
  border-radius: 999px; background: var(--navy); color: var(--surface); font: 600 12px var(--body);
}
.recipe__cap { padding: 14px 18px 18px; }
.recipe__name { font: 600 18px/1.2 var(--display); letter-spacing: -.01em; }
.recipe__meta { margin-top: 4px; font: 400 14px var(--body); color: var(--text-4); }

/* ---------- Home: cookbooks ---------- */
.cookbooks { scroll-margin-top: 96px; padding: 0 clamp(12px, 3vw, 40px); }
.cookbooks__panel {
  position: relative; max-width: 1360px; margin: 0 auto; border-radius: clamp(24px, 3vw, 44px); overflow: hidden;
  background: #c2d6ce; padding: clamp(56px, 7vw, 96px) clamp(24px, 6vw, 96px) 0;
}
.cookbooks__grid {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(40px, 6vw, 80px); align-items: end;
}
.cookbooks__text { padding-bottom: clamp(40px, 6vw, 96px); }
.cookbooks .eyebrow { color: var(--text-1); }
.cookbooks .eyebrow__dot { background: var(--navy); }
.cookbooks__text p { margin: 20px 0 0; max-width: 440px; font: 400 18px/1.55 var(--body); color: var(--text-1); text-wrap: pretty; }
.cookbooks .chips { margin-top: 32px; }
.cookbooks__visual { position: relative; width: 100%; max-width: 520px; height: 560px; justify-self: center; }
.cookbooks__book {
  position: absolute; left: 0; top: 16%; width: 44%; height: auto; transform: rotate(-8deg);
  filter: drop-shadow(0 24px 30px rgba(8, 29, 40, .16)); z-index: 2;
}
/* Phone cut off by the bottom of the panel */
.phone--cut {
  position: absolute; right: 4%; top: 0; max-width: 80%; height: 600px;
  border-radius: 50px 50px 0 0; padding: 10px 10px 0; box-shadow: 0 40px 60px rgba(8, 29, 40, .2);
}
.phone--cut .phone__screen { border-radius: 40px 40px 0 0; }
.mock-books { padding: 8px 16px 0; }
.mock-books__head { display: flex; align-items: center; justify-content: space-between; }
.mock-books__title { font: 600 21px var(--display); letter-spacing: -.02em; }
.mock-books__new {
  height: 32px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px;
  background: var(--navy); color: var(--surface); font: 600 12px var(--body);
}
.mock-books__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mock-book__cover { height: 110px; border-radius: 18px; }
.mock-book__cover--photo { overflow: hidden; }
.mock-book__cover--photo img { width: 100%; height: 110px; object-fit: cover; }
.mock-book__cover--collage { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: hidden; }
.mock-book__cover--collage img { width: 100%; height: 54px; object-fit: cover; }
.mock-book__cover--collage img:first-child { height: 110px; grid-row: span 2; }
.mock-book__cover--art {
  background: radial-gradient(120px 90px at 30% 20%, rgba(158, 238, 238, .8), rgba(158, 238, 238, 0) 70%), #e4f3ec;
  display: flex; align-items: center; justify-content: center;
}
.mock-book__cover--art img { width: 80%; height: auto; }
.mock-book__cover--new {
  border: 1.5px dashed #cfd3dc; display: flex; align-items: center; justify-content: center;
  font: 500 13px var(--body); color: var(--text-4);
}
.mock-book__name { margin-top: 7px; font: 500 13px var(--body); }
.mock-book__count { font: 400 11px var(--body); color: var(--text-5); }

/* ---------- Home: Professional teaser ---------- */
.home-pro { padding: clamp(72px, 9vw, 120px) var(--gutter) 0; }
.home-pro__grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 80px); align-items: center;
}
.home-pro__text { max-width: 460px; }
.home-pro__text p { margin: 20px 0 0; font: 400 18px/1.55 var(--body); color: var(--text-4); text-wrap: pretty; }
.home-pro__text .btn { display: inline-flex; margin-top: 28px; }
.home-pro__shot { position: relative; width: 100%; max-width: 720px; margin: 0 auto 48px; }
.home-pro__phone {
  position: absolute; right: -3%; bottom: -48px; width: clamp(110px, 15vw, 190px); aspect-ratio: 300/640;
  border-radius: clamp(24px, 3.2vw, 44px); background: var(--navy); padding: clamp(6px, .7vw, 9px);
  box-shadow: 0 40px 70px rgba(8, 29, 40, .22);
}
.home-pro__phone > div { height: 100%; border-radius: clamp(18px, 2.6vw, 36px); overflow: hidden; background: var(--chip); }

/* ---------- Home: reviews ---------- */
.reviews { padding: clamp(72px, 9vw, 120px) var(--gutter); }
.reviews__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 44px); }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.reviews__kicker { font: 500 12px var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--text-4); }
.reviews h2 { margin: 18px 0 0; font: 500 clamp(36px, 4.2vw, 56px)/1.05 var(--display); letter-spacing: -.035em; }
.reviews h2 span { color: var(--chevron); }
.reviews__arrows { flex: none; display: flex; gap: 12px; }
.reviews__arrows button {
  width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease;
}
.reviews__arrows button:hover { background: var(--black); }
.reviews__track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter);
}
.reviews__track::-webkit-scrollbar { display: none; }
.review {
  flex: none; width: calc((min(100vw - 2 * var(--gutter), 1200px) - 32px) / 3.15); scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column; min-height: 440px;
  padding: clamp(18px, 2vw, 24px) clamp(22px, 2.4vw, 32px) clamp(26px, 2.6vw, 34px);
  border-radius: var(--radius-card); background: var(--surface);
}
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review__avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%; background: #dcdce4;
  display: flex; align-items: center; justify-content: center; font: 500 15px var(--body); color: var(--text-2);
}
.review__tag {
  display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid #cfd3dc; font: 500 14px var(--body); color: var(--navy);
}
.review__mark { margin-top: 52px; }
.review blockquote {
  flex: 1; margin: 22px 0 0; color: var(--navy); text-wrap: pretty;
  font: 400 clamp(26px, 2.3vw, 31px)/1.12 var(--display); letter-spacing: -.025em;
}
/* Real reviews run long: body type instead of the display quote */
.review--long .review__mark { margin-top: 36px; }
.review--long blockquote { font: 400 clamp(17px, 1.35vw, 19px)/1.5 var(--body); letter-spacing: 0; }
.review figcaption { margin-top: 32px; padding-left: 20px; border-left: 1.5px solid #c4c8d0; }
.review__name { font: 500 16px var(--body); color: var(--navy); }
.review__role { margin-top: 4px; font: 400 13px var(--body); color: var(--text-5); }

@media (max-width: 1079.98px) {
  .home-recipes__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "phone" "tiles"; }
  .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews__arrows { display: none; }
  .review { width: min(84%, 340px); }
}

/* ---------- What's new ---------- */
.news-hero {
  position: relative; margin-top: -92px;
  padding: clamp(140px, 13vw, 170px) var(--gutter) clamp(40px, 5vw, 64px);
  overflow: hidden;
  background:
    radial-gradient(60vw 420px at 10% -10%, rgba(150, 236, 236, .55), rgba(150, 236, 236, 0) 70%),
    radial-gradient(50vw 420px at 70% -10%, rgba(216, 248, 190, .6), rgba(216, 248, 190, 0) 70%),
    var(--canvas);
}
.news-hero__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.news-hero h1 { margin: 0; font: 600 clamp(48px, 6.4vw, 88px)/0.96 var(--display); letter-spacing: -.045em; }
.news-hero p { margin: 20px 0 0; max-width: 560px; font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--body); color: var(--text-3); }
.news-hero__subscribe {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px;
  border-bottom: 1.5px solid var(--navy); font: 500 15px var(--body); color: var(--navy);
}
.news-section { padding: clamp(40px, 5vw, 64px) var(--gutter); }
.news-section--latest { padding-top: 8px; }
.news-section--soon { padding-top: 0; padding-bottom: 0; }
.news-section__inner { max-width: 1200px; margin: 0 auto; }
.news-label { margin-bottom: 16px; font: 500 14px var(--body); color: var(--text-4); }
.release-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 14px var(--body); color: var(--text-4); }
.release-version {
  height: 24px; display: flex; align-items: center; padding: 0 9px; border-radius: 999px;
  border: 1px solid #d6d9e0; font: 500 12px var(--body); color: var(--text-2);
}
.release-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.release-tags span {
  height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px;
  background: var(--chip); font: 500 13px var(--body); color: var(--navy); white-space: nowrap;
}
@media (max-width: 519.98px) {
  .release-tags span { height: auto; min-height: 30px; padding: 6px 12px; white-space: normal; line-height: 1.25; }
}

/* Latest release */
.release-feature {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(12px, 1.4vw, 18px); border-radius: var(--radius-card); background: var(--surface);
  box-shadow: 0 1px 3px rgba(10, 13, 18, .04), 0 24px 50px rgba(8, 29, 40, .06); transition: transform .25s ease;
}
.release-feature:hover { transform: translateY(-3px); }
.release-feature > img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 18px; }
.release-feature__text { padding: clamp(4px, 1vw, 12px) clamp(6px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px); }
.release-feature__title {
  margin-top: 14px; font: 600 clamp(30px, 3.2vw, 44px)/1.04 var(--display); letter-spacing: -.035em; color: var(--navy);
}
.release-feature__text p { margin: 14px 0 0; font: 400 17px/1.55 var(--body); color: var(--text-4); }
.release-feature__cta {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px;
  border-radius: var(--radius-btn); background: var(--navy); color: var(--surface); font: 600 15px var(--body);
}

/* Coming soon */
.soon {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center;
  padding: clamp(20px, 2.6vw, 32px); border-radius: var(--radius-card); overflow: hidden;
  background:
    radial-gradient(420px 260px at 90% 0%, rgba(158, 238, 238, .35), rgba(158, 238, 238, 0) 70%),
    radial-gradient(420px 260px at 70% 100%, rgba(214, 248, 190, .4), rgba(214, 248, 190, 0) 70%),
    var(--surface);
}
.badge-soon {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--teal); font: 600 13px var(--body);
}
.soon__title { margin-top: 14px; font: 600 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -.03em; }
.soon p { margin: 10px 0 0; max-width: 420px; font: 400 17px/1.55 var(--body); color: var(--text-4); }
/* A phone rising from the bottom edge of the card, cut off at 300 px */
.soon__shot {
  align-self: end; height: 300px; margin-bottom: calc(-1 * clamp(20px, 2.6vw, 32px)); overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
}
.soon__phone {
  flex: none; width: 250px; height: 534px; padding: 8px; border-radius: 40px;
  background: var(--navy); box-shadow: 0 30px 60px rgba(8, 29, 40, .18);
}
.soon__phone > div { height: 100%; border-radius: 32px; overflow: hidden; background: var(--chip); }

/* Earlier releases: a timeline with the date on the left (on wide screens) */
.timeline { position: relative; display: flex; flex-direction: column; gap: 16px; }
.timeline__line { position: absolute; left: calc(150px + 20px + 11px); top: 30px; bottom: 30px; width: 2px; background: var(--line); }
.release { display: grid; grid-template-columns: 150px 24px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.release__when { padding-top: 22px; text-align: right; }
.release__date { font: 500 14px var(--body); color: var(--text-4); }
.release__version { margin-top: 8px; display: flex; justify-content: flex-end; }
.release__dot { position: relative; display: flex; justify-content: center; padding-top: 26px; }
.release__dot span {
  position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 2px var(--navy);
}
.release__card {
  display: flex; gap: clamp(14px, 2vw, 22px); align-items: flex-start; padding: 16px; border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow-rest); transition: transform .25s ease, box-shadow .25s ease;
}
.release__card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(10, 13, 18, .07); }
.release__card > img { flex: none; width: clamp(92px, 12vw, 160px); aspect-ratio: 4/3; border-radius: 15px; object-fit: cover; }
.release__body { flex: 1; min-width: 0; padding-top: 4px; }
.release__body > .release-meta { margin-bottom: 8px; }
.release__title { font: 600 clamp(19px, 1.7vw, 24px)/1.2 var(--display); letter-spacing: -.02em; color: var(--navy); }
.release__body p { margin: 6px 0 0; font: 400 15px/1.5 var(--body); color: var(--text-4); }
.release__body .release-tags { margin-top: 12px; }
.release__go {
  flex: none; align-self: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chip);
  display: flex; align-items: center; justify-content: center;
}
.news-more { margin-top: 28px; display: flex; justify-content: center; }
.news-more button {
  height: 50px; padding: 0 24px; border: 0; border-radius: var(--radius-btn); background: var(--surface);
  font: 600 15px var(--body); color: var(--navy); cursor: pointer; box-shadow: 0 1px 3px rgba(10, 13, 18, .05);
}
.news-more button:hover { background: var(--surface-hover); }
.news-more__done { font: 400 15px var(--body); color: var(--text-4); }

/* ---------- Release notes pages (news/<slug>/index.html) ---------- */
.release-head { padding: clamp(40px, 5vw, 64px) var(--gutter) 0; }
.release-head__inner, .release-notes__inner { max-width: 1000px; margin: 0 auto; }
.release-back {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px;
  background: var(--surface); font: 500 14px var(--body); color: var(--navy);
}
.release-back:hover { background: var(--surface-hover); }
.release-head .release-meta { margin-top: 28px; }
.release-head h1 { margin: 16px 0 0; font: 600 clamp(44px, 6vw, 80px)/0.98 var(--display); letter-spacing: -.045em; }
.release-hero {
  display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 24px; margin-top: 36px;
}
/* Images that aren't 16:9 sit whole on a soft card instead of being cropped */
.release-hero--contain {
  object-fit: contain; padding: clamp(16px, 3vw, 32px);
  background:
    radial-gradient(520px 360px at 15% 0%, rgba(158, 238, 238, .35), rgba(158, 238, 238, 0) 70%),
    radial-gradient(520px 360px at 90% 100%, rgba(214, 248, 190, .4), rgba(214, 248, 190, 0) 70%),
    var(--surface);
}
.release-notes { padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(72px, 9vw, 120px); }
.release-notes__inner {
  display: grid; grid-template-columns: 220px minmax(0, 680px); gap: clamp(32px, 5vw, 64px); align-items: start;
}
.release-toc { position: sticky; top: 110px; }
.release-toc__label {
  padding: 0 12px 10px; font: 600 13px var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--text-4);
}
.release-toc a, .release-toc-m a {
  display: block; padding: 7px 12px; border-radius: 10px; font: 400 14px/1.35 var(--body); color: var(--text-2);
}
.release-toc a:hover, .release-toc-m a:hover { background: var(--surface-hover); color: var(--navy); }
.release-toc-m { display: none; margin-bottom: 12px; border-radius: 18px; background: var(--surface); overflow: hidden; }
.release-toc-m summary {
  display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 18px;
  font: 600 15px var(--body); cursor: pointer; list-style: none;
}
.release-toc-m summary::-webkit-details-marker { display: none; }
.release-toc-m summary svg { transition: transform .2s ease; }
.release-toc-m[open] summary svg { transform: rotate(180deg); }
.release-toc-m > div { padding: 0 6px 10px; }
.release-article { min-width: 0; max-width: 680px; }
.release-article__lede { margin: 0; font: 400 clamp(19px, 1.6vw, 22px)/1.6 var(--body); color: var(--navy); }
.release-article__lede + .release-article__lede { margin-top: 16px; }
.release-section { scroll-margin-top: 110px; padding-top: 40px; }
.release-section h2 { margin: 0; font: 600 clamp(22px, 2vw, 26px)/1.2 var(--display); letter-spacing: -.02em; }
.release-section p, .release-section ul { margin: 10px 0 0; font: 400 17px/1.7 var(--body); color: var(--text-2); }
.release-section ul, .release-fixes ul { padding-left: 20px; }
.release-section li + li { margin-top: 4px; }
.release-visual {
  margin-top: 20px; display: flex; justify-content: center; padding: clamp(20px, 3vw, 32px); border-radius: 24px;
  background:
    radial-gradient(320px 220px at 20% 0%, rgba(158, 238, 238, .35), rgba(158, 238, 238, 0) 70%),
    radial-gradient(320px 220px at 90% 100%, rgba(214, 248, 190, .4), rgba(214, 248, 190, 0) 70%),
    var(--surface);
}
.release-visual__phone {
  width: min(240px, 70%); aspect-ratio: 300/640; padding: 8px; border-radius: 38px; background: var(--navy);
  box-shadow: 0 30px 60px rgba(8, 29, 40, .18);
}
.release-visual__phone > div { height: 100%; border-radius: 30px; overflow: hidden; }
.release-visual__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.release-fixes { scroll-margin-top: 110px; margin-top: 48px; padding: 22px 24px; border-radius: 18px; background: var(--surface-hover); }
.release-fixes h2 { margin: 0; font: 600 17px var(--body); }
.release-fixes p, .release-fixes ul { margin: 10px 0 0; font: 400 15px/1.7 var(--body); color: var(--text-4); }
.release-closer { margin: 40px 0 0; font: 600 24px var(--display); letter-spacing: -.02em; }
.release-pager {
  margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px;
}
.release-pager > * {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--surface);
  transition: box-shadow .25s ease;
}
.release-pager a:hover { box-shadow: 0 14px 30px rgba(10, 13, 18, .06); }
.release-pager__label { font: 500 13px var(--body); color: var(--text-4); }
.release-pager__title { font: 600 17px var(--display); color: var(--navy); }
.release-pager__next { text-align: right; }
.release-pager .is-off { background: rgba(253, 253, 253, .5); }
.release-pager .is-off .release-pager__label { color: var(--chevron); }
.release-pager .is-off .release-pager__title { font: 500 15px var(--body); color: var(--chevron); }
@media (max-width: 899.98px) {
  .release-notes__inner { grid-template-columns: minmax(0, 1fr); }
  .release-toc { display: none; }
  .release-toc-m { display: block; }
}

/* ---------- About us (about.html) ---------- */
.about-hero {
  position: relative; margin-top: -92px;
  padding: clamp(140px, 13vw, 170px) var(--gutter) clamp(48px, 6vw, 80px);
  overflow: hidden;
  background:
    radial-gradient(60vw 420px at 10% -10%, rgba(150, 236, 236, .55), rgba(150, 236, 236, 0) 70%),
    radial-gradient(50vw 420px at 70% -10%, rgba(216, 248, 190, .6), rgba(216, 248, 190, 0) 70%),
    var(--canvas);
}
.about-hero__inner { position: relative; max-width: 1200px; margin: 0 auto; }
.about-hero__label { font: 500 15px var(--body); color: var(--text-4); }
.about-hero h1 {
  margin: 14px 0 0; max-width: 900px; font: 600 clamp(48px, 6.4vw, 88px)/0.96 var(--display);
  letter-spacing: -.045em; text-wrap: balance;
}
.about-hero p {
  margin: 24px 0 0; max-width: 600px; font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--body);
  color: var(--text-3); text-wrap: pretty;
}
.about-team-nav { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.about-team-nav a {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 18px;
  background: rgba(253, 253, 253, .8); box-shadow: var(--shadow-rest); transition: transform .25s ease, background .25s ease;
}
.about-team-nav a:hover { transform: translateY(-2px); background: var(--surface); }
.about-team-nav span:first-child { font: 600 16px var(--body); color: var(--navy); }
.about-team-nav span:last-child { font: 400 13px var(--body); color: var(--text-4); }
.about-team { padding: clamp(48px, 7vw, 104px) var(--gutter); }
.about-team__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(72px, 9vw, 128px); }
/* Photo on one side, quote on the other; every second person is mirrored */
.about-person {
  scroll-margin-top: 110px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 80px); align-items: center;
}
.about-person:nth-child(even) { direction: rtl; }
.about-person > * { direction: ltr; }
.about-person__photo {
  position: relative; width: 100%; max-width: 480px; justify-self: center; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.about-person__photo--a {
  background:
    radial-gradient(70% 60% at 20% 10%, rgba(150, 236, 236, .6), rgba(150, 236, 236, 0) 70%),
    radial-gradient(70% 60% at 90% 90%, rgba(216, 248, 190, .7), rgba(216, 248, 190, 0) 70%), #e9f1ee;
}
.about-person__photo--b {
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(216, 248, 190, .7), rgba(216, 248, 190, 0) 70%),
    radial-gradient(70% 60% at 10% 90%, rgba(176, 244, 214, .6), rgba(176, 244, 214, 0) 70%), #e9f1ee;
}
/* The gradient shows while the portrait loads; the portraits are 4:5, so object-fit never crops them */
.about-person__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.about-person__text { min-width: 0; }
.about-person__mark { display: block; }
.about-person blockquote {
  margin: 20px 0 0; font: 500 clamp(22px, 2.1vw, 29px)/1.32 var(--display); letter-spacing: -.02em;
  color: var(--navy); text-wrap: pretty;
}
.about-person__who { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.about-person__who h2 { margin: 0; font: 600 22px/1.2 var(--display); letter-spacing: -.02em; }
.about-person__role { font: 500 15px var(--body); color: #3e8f74; }
.about-person__text > p { margin: 14px 0 0; max-width: 600px; font: 400 16px/1.6 var(--body); color: var(--text-3); text-wrap: pretty; }
@media (max-width: 899.98px) {
  .about-person { grid-template-columns: minmax(0, 1fr); }
  .about-person:nth-child(even) { direction: ltr; }
}

@media (min-width: 900px) {
  .release__body > .release-meta { display: none; }
}
@media (max-width: 899.98px) {
  .release-feature, .soon, .release { grid-template-columns: minmax(0, 1fr); }
  .timeline__line, .release__when, .release__dot, .release__go { display: none; }
}

/* ---------- Professional: hero ---------- */
.pro-hero {
  position: relative; margin-top: -92px;
  padding: clamp(140px, 14vw, 180px) var(--gutter) clamp(72px, 9vw, 120px);
  overflow: hidden;
  background:
    radial-gradient(60vw 560px at 18% -6%, rgba(150, 236, 236, .95), rgba(150, 236, 236, 0) 70%),
    radial-gradient(56vw 560px at 55% 4%, rgba(176, 244, 214, .95), rgba(176, 244, 214, 0) 70%),
    radial-gradient(52vw 520px at 94% 6%, rgba(216, 248, 190, 1), rgba(216, 248, 190, 0) 70%),
    var(--canvas);
}
.pro-hero__inner {
  position: relative; max-width: 1280px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.pro-hero h1 {
  margin: 24px 0 0;
  font: 600 clamp(48px, 7vw, 100px)/0.95 var(--display);
  letter-spacing: -.045em; text-wrap: balance;
}
.pro-hero__lede {
  margin: 24px 0 0; max-width: 600px;
  font: 400 clamp(17px, 1.4vw, 20px)/1.5 var(--body); color: var(--text-3); text-wrap: pretty;
}
.pro-hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pro-hero__shot { width: 100%; margin-top: 64px; text-align: left; }
.pro-hero__stage { position: relative; width: 100%; max-width: 1080px; margin: 0 auto 48px; }
.pro-hero__phone {
  position: absolute; right: -3%; bottom: -48px;
  width: clamp(120px, 17vw, 250px); aspect-ratio: 300/640;
  border-radius: clamp(24px, 3.2vw, 44px); background: var(--navy); padding: clamp(6px, .7vw, 9px);
  box-shadow: 0 40px 70px rgba(8, 29, 40, .22);
}
.pro-hero__phone > div { height: 100%; border-radius: clamp(18px, 2.6vw, 36px); overflow: hidden; background: var(--chip); }

/* ---------- Professional: sections ---------- */
.pro-section { scroll-margin-top: 96px; padding: clamp(72px, 9vw, 120px) var(--gutter); }
.pro-section--flush { padding-top: 0; }
.pro-section__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }

.who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.who-card { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: var(--radius-card); background: var(--surface); }
.who-card__icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--icon-bg);
  display: flex; align-items: center; justify-content: center;
}
.who-card__title { font: 600 19px/1.25 var(--display); letter-spacing: -.01em; }
.who-card p { margin: 6px 0 0; font: 400 15px/1.5 var(--body); color: var(--text-4); }

/* How it works: the highlight moves through the four steps */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.steps__line { position: absolute; left: 12%; right: 12%; top: 42px; height: 1px; background: #d3d6dd; }
.step {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-rest);
  transition: box-shadow .4s ease;
}
.step.is-active { box-shadow: 0 0 0 1.5px var(--navy), 0 18px 36px rgba(8, 29, 40, .08); }
.step__head { display: flex; align-items: center; justify-content: space-between; }
.step__num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--icon-bg); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font: 600 15px var(--body);
  transition: background .4s ease, color .4s ease;
}
.step.is-active .step__num { background: var(--navy); color: var(--surface); }
.step__tag {
  display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--chip); font: 500 12px var(--body);
}
.step__title { font: 600 18px/1.25 var(--display); letter-spacing: -.01em; }
.step p { margin: 6px 0 0; font: 400 15px/1.5 var(--body); color: var(--text-4); }

.pro-features { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px); }
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.feature--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature--flip .feature__media { order: -1; }
.feature__text { max-width: 440px; }
.feature__text h3 { margin: 14px 0 0; font: 600 clamp(28px, 2.8vw, 38px)/1.08 var(--display); letter-spacing: -.03em; }
.feature__text p { margin: 16px 0 0; font: 400 17px/1.55 var(--body); color: var(--text-4); text-wrap: pretty; }
.shot {
  border-radius: 20px; overflow: hidden; background: var(--surface);
  box-shadow: 0 1px 3px rgba(10, 13, 18, .04), 0 24px 50px rgba(8, 29, 40, .08);
}
.shot img { display: block; width: 100%; height: auto; }

.privacy {
  max-width: 960px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(32px, 4vw, 48px); align-items: center; justify-items: center;
}
.privacy__text { max-width: 460px; }
.privacy__text p { margin: 20px 0 0; font: 400 18px/1.55 var(--body); color: var(--text-4); text-wrap: pretty; }
.privacy__visual { position: relative; width: 100%; max-width: 400px; min-height: 690px; margin: 0 auto; }
.privacy__phone {
  position: absolute; right: 0; top: 0; width: 280px; max-width: 72%; aspect-ratio: 300/640;
  border-radius: 46px; background: var(--navy); padding: 10px; box-shadow: 0 50px 90px rgba(8, 29, 40, .2);
}
.privacy__phone > div { height: 100%; border-radius: 36px; overflow: hidden; background: var(--chip); }
.privacy__pills {
  position: absolute; left: -24px; bottom: 0; padding: 16px 18px; border-radius: var(--radius-card);
  background: var(--surface); box-shadow: 0 30px 60px rgba(8, 29, 40, .14);
}
.privacy__pills img { display: block; width: min(300px, 62vw); height: auto; }
@media (max-width: 519.98px) { .privacy__pills { left: 0; } }

.pro-cta { position: relative; padding: clamp(72px, 9vw, 120px) var(--gutter); overflow: hidden; }
.pro-cta__inner { position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pro-cta h2 { margin: 0; font: 600 clamp(48px, 6.4vw, 92px)/0.95 var(--display); letter-spacing: -.045em; }
.pro-cta p { margin: 24px 0 0; max-width: 480px; font: 400 18px/1.55 var(--body); color: var(--text-3); }
.pro-cta .btn { margin-top: 32px; padding: 0 28px; }

@media (max-width: 899.98px) {
  .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps__line { left: 42px; right: auto; top: 24px; bottom: 24px; width: 1px; height: auto; }
  .feature, .feature--flip { grid-template-columns: minmax(0, 1fr); }
  .feature--flip .feature__media { order: 0; }
}

/* ---------- Legal pages (privacy-policy, terms-and-conditions, community-standards) ---------- */
.legal { padding: 0 var(--gutter) clamp(72px, 9vw, 120px); }
.legal__inner { max-width: 760px; margin: 0 auto; font: 400 17px/1.7 var(--body); color: var(--text-2); }
.legal__inner h2 { margin: 48px 0 0; font: 600 clamp(22px, 2vw, 26px)/1.2 var(--display); letter-spacing: -.02em; color: var(--navy); }
.legal__inner h3 { margin: 32px 0 0; font: 600 19px/1.3 var(--display); color: var(--navy); }
.legal__inner p, .legal__inner ol, .legal__inner ul { margin: 12px 0 0; }
.legal__inner ol, .legal__inner ul { padding-left: 24px; }
.legal__inner li + li { margin-top: 8px; }
.legal__inner li > ul { margin-top: 8px; }
.legal__inner a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.legal__inner strong { color: var(--navy); }

/* ---------- Account deactivation (remove-account.html) ---------- */
.account-form { padding: 0 var(--gutter) clamp(72px, 9vw, 120px); }
.account-form__inner { max-width: 1200px; margin: 0 auto; }
.account-form__card {
  max-width: 560px; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-rest);
}
.account-form__card h2 { margin: 0 0 4px; font: 600 24px/1.2 var(--display); letter-spacing: -.02em; }
.account-form__card label { display: flex; flex-direction: column; gap: 6px; font: 500 14px var(--body); color: var(--text-3); }
.account-form__card input, .account-form__card textarea {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-field);
  background: var(--canvas); font: 400 16px var(--body); color: var(--navy);
}
.account-form__card textarea { resize: vertical; }
.account-form__card .btn { align-self: flex-start; }
.account-form__note { margin: 0; font: 400 14px/1.55 var(--body); color: var(--text-4); }
.account-form__note a { text-decoration: underline; }

/* ---------- Global Kitchen Table (global-kitchen-table.html) ---------- */
.gkt-prose { max-width: 680px; }
.gkt-prose p { margin: 0; font: 400 clamp(17px, 1.4vw, 20px)/1.55 var(--body); color: var(--text-3); text-wrap: pretty; }
.gkt-lead { margin: 0 0 -24px; font: 600 19px/1.35 var(--display); color: var(--navy); }
.gkt-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899.98px) { .gkt-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.gkt-join { background: var(--bubble); }
.gkt-join__form { display: block; width: 100%; max-width: 540px; height: 1250px; margin-top: 32px; border: 0; }

/* ---------- Not found (404.html) ---------- */
.notfound__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.notfound__img { display: block; width: 100%; max-width: 420px; height: auto; justify-self: center; }
@media (max-width: 899.98px) {
  .notfound__inner { grid-template-columns: minmax(0, 1fr); }
  .notfound__img { max-width: 240px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .topic:hover, .fcard:hover, .source.is-active, .release-feature:hover, .release__card:hover, .about-team-nav a:hover { transform: none; }
  .reviews__track { scroll-behavior: auto; }
}