/* CHOSHI LP
   値は lp/docs/03-design.md §4 のトークン。部品に値を直接書かない。
   順番: トークン → ダーク → リセット → 基本の要素 → レイアウト → セクション → 見本 → 動き → 印刷 */

/* ---------- 1. トークン(ライト) ---------- */
:root {
  --bg: #FFFFFF;
  --bg-alt: #F7F7F8;
  --surface: #FFFFFF;
  --surface-alt: #EBEBED;
  --hairline: #E4E4E7;
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --text-3: #86868B;
  --accent: #1D1D1F;
  --on-accent: #FFFFFF;
  --tile: #1D1D1F;
  --on-tile: #F5F5F7;
  --on-tile-2: #9A9AA0;
  --tile-icon-edge: rgba(255, 255, 255, 0.12);
  --header-bg: rgba(255, 255, 255, 0.88);

  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --fs-h1: clamp(2.25rem, 1.2rem + 4vw, 4rem);
  --fs-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  --fs-h2-sub: clamp(1.375rem, 1.3rem + 0.3vw, 1.5rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-lead: clamp(1rem, 0.9rem + 0.5vw, 1.1875rem);
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --fs-label: 0.8125rem;
  --fs-cta: 1.0625rem;
  --fs-note: 0.875rem;
  --fs-legal: 0.75rem;
  --lh-body: 1.8;

  /* 見本の中の 1pt。lg は 1px(17px の文字)、sm は 16/17 に縮める(§5.1) */
  --m: 0.0625rem;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 112px;

  --r-chip: 10px;
  --r-card: 18px;
  --r-bubble: 20px;
  --r-field: 19px;
  --r-panel: 28px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --gutter: 20px;
  --section-y: var(--s-8);
  --head-gap: var(--s-6);
}

/* 見本の中だけで使う色(§4.1)。ページの部品には使わない */
.mock {
  --m-canvas: #F7F7F8;
  --m-bar: #FBFBFC;
  --m-p: #D35446;
  --m-f: #B07A00;
  --m-c: #3B76C9;
  --m-good: #248A3D;
  --m-good-text: #1C7C34;
  --m-good-soft: #E4F3E9;
  --m-caution: #B25E00;
  --m-caution-text: #8A4D00;
  --m-caution-soft: #FBEFD9;
  --m-short: #4F7CAC;
  --m-short-text: #34618F;
  --m-short-soft: #E6EEF7;
  --m-on-send: #FFFFFF;
}

/* ---------- 2. ダークの上書き ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-alt: #0E0E10;
    --surface: #1C1C1E;
    --surface-alt: #2C2C2E;
    --hairline: #2E2E33;
    --text: #F5F5F7;
    --text-2: #AEAEB2;
    --text-3: #8E8E93;
    --accent: #F5F5F7;
    --on-accent: #1D1D1F;
    --tile: #161618;
    --on-tile: #F5F5F7;
    --on-tile-2: #9A9AA0;
    --header-bg: rgba(0, 0, 0, 0.80);
  }
  .mock {
    --m-canvas: #000000;
    --m-bar: #121214;
    --m-p: #FF8578;
    --m-f: #FFC53D;
    --m-c: #74AEF6;
    --m-good: #30D158;
    --m-good-text: #4FD06D;
    --m-good-soft: #14361E;
    --m-caution: #FF9F0A;
    --m-caution-text: #FFC558;
    --m-caution-soft: #3A2A0A;
    --m-short: #86AEDB;
    --m-short-text: #9EC0E6;
    --m-short-soft: #1A2A3D;
  }
}

@media (prefers-contrast: more) {
  :root {
    --hairline: #C7C7CC;
    --text-2: #515154;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --hairline: #48484A;
    --text-2: #C7C7CC;
  }
}

@media (min-width: 600px) {
  :root {
    --gutter: 32px;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-y: var(--s-9);
    --head-gap: var(--s-7);
    --fs-label: 0.875rem;
    --fs-cta: 1.125rem;
    --lh-body: 1.85;
  }
}
@media (max-width: 599.98px) {
  :root {
    --m: calc(0.0625rem * 16 / 17);
  }
}

/* ---------- 3. リセット ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light dark;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0.02em;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}
ul, ol {
  padding: 0;
  list-style: none;
}
img, svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

/* ---------- 4. 基本の要素 ---------- */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover {
  text-decoration-thickness: 2px;
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.num {
  font-variant-numeric: tabular-nums;
}
.nobr {
  white-space: nowrap;
}
p,
li,
figcaption {
  text-wrap: pretty;
}

.skip {
  position: absolute;
  left: var(--s-3);
  top: var(--s-3);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
  font-weight: 600;
  text-decoration: none;
}
.skip:not(:focus) {
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
}

.h1, .h2, .h3 {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
  text-wrap: balance;
}
.h1 {
  font-size: var(--fs-h1);
  line-height: 1.3;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.4;
}
.h2--sub {
  font-size: var(--fs-h2-sub);
  line-height: 1.45;
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.5;
}
.phrase {
  display: inline-block;
}
.label {
  margin-bottom: var(--s-3);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--text-2);
}
.lead {
  margin-top: var(--s-4);
  max-width: 38em;
  font-size: var(--fs-lead);
  line-height: 1.8;
}
.prose {
  max-width: 38em;
}
.prose p + p {
  margin-top: var(--s-4);
}
.paid {
  color: var(--text-2);
  white-space: nowrap;
}
.paid--wrap {
  white-space: normal;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.text-link .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.25;
}

/* ---------- 5. レイアウト ---------- */
.container {
  width: 100%;
  max-width: calc(1120px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
}
.section--alt {
  background: var(--bg-alt);
}
.section-head {
  max-width: 40.1875rem;
  margin-bottom: var(--head-gap);
}
/* 固定ヘッダー(lg)の下に、ページ内リンクの飛び先とフォーカスが隠れないようにする */
@media (min-width: 1024px) {
  html {
    scroll-padding-top: 80px;
  }
}

/* ヘッダー */
.site-header {
  background: var(--bg);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-header__logo img {
  width: auto;
  height: 24px;
}
.site-nav {
  display: none;
}
@media (min-width: 1024px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hairline);
  }
  .site-header__inner {
    height: 64px;
  }
  .site-header__logo img {
    height: 28px;
  }
  .site-nav {
    display: block;
  }
  .site-nav ul {
    display: flex;
    margin-right: calc(-1 * var(--s-3));
  }
  .site-nav a {
    display: flex;
    align-items: center;
    height: 44px;
    padding-inline: var(--s-3);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
  }
  .site-nav a:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
  }
}

/* 見本の図(共通) */
.mock-figure {
  width: 100%;
}
.mock-figure figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--text-2);
}
.mock-title {
  margin-bottom: var(--s-3);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-2);
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .mock-figure {
    max-width: 420px;
    margin-inline: auto;
  }
}

/* CTA(段階B は文字だけ。押せる形にしない。§4.5) */
.cta-status {
  font-size: var(--fs-cta);
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.cta-specs {
  margin-top: var(--s-3);
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--text-2);
}
.cta-specs li {
  position: relative;
  padding-left: 14px;
}
.cta-specs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(0.85em - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
@media (min-width: 600px) {
  .cta-specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) 25px;
    overflow: hidden;
  }
  .cta-specs li {
    padding-left: 0;
  }
  .cta-specs li::before {
    content: none;
  }
  .cta-specs li + li::before {
    content: "";
    left: -13px;
    top: 50%;
    width: 1px;
    height: 12px;
    margin-top: -6px;
    border-radius: 0;
    background: var(--text-3);
  }
}

/* ---------- 6. セクション ---------- */

/* S1 ヒーロー */
.hero {
  padding-block: var(--s-5) var(--s-8);
}
.hero__grid {
  display: grid;
  gap: var(--s-5);
}
.hero__label {
  margin-bottom: var(--s-4);
  font-size: 0.8125rem;
}
.hero__lead {
  margin-top: var(--s-5);
  max-width: 30em;
}
.hero__more {
  margin-top: var(--s-4);
}
@media (min-width: 1024px) {
  .hero {
    padding-block: 72px var(--s-9);
  }
  .hero__grid {
    grid-template-columns: minmax(0, 548px) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ". mock"
      "text mock"
      "cta mock"
      ". mock";
    column-gap: var(--s-5);
    row-gap: 0;
  }
  .hero__text {
    grid-area: text;
  }
  .hero__mock {
    grid-area: mock;
    justify-self: end;
    max-width: 400px;
  }
  .hero__cta {
    grid-area: cta;
    margin-top: var(--s-6);
  }
  .hero__label {
    font-size: 0.9375rem;
  }
  .hero__more {
    margin-top: var(--s-3);
  }
}

/* S2 課題 */
.split {
  display: grid;
  gap: var(--s-6);
}
.split__main .prose {
  margin-top: var(--s-5);
}
.flow__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}
.flow__row + .flow__row {
  margin-top: var(--s-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--s-3);
  font-size: var(--fs-note);
  line-height: 1;
  color: var(--text-2);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-chip);
}
.flow__arrow {
  color: var(--text-3);
  line-height: 1;
}
.flow__label {
  margin-top: var(--s-5);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-2);
}
.flow__chat {
  margin-top: var(--s-2);
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 548px) minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: center;
  }
  .flow {
    justify-self: end;
    width: 100%;
    max-width: 455px;
  }
}

/* S3 使い方 */
.how {
  display: grid;
  gap: var(--s-6);
}
.steps {
  counter-reset: step;
}
.step {
  position: relative;
  padding-left: var(--s-7);
  padding-bottom: var(--s-6);
  counter-increment: step;
}
.step:last-child {
  padding-bottom: 0;
}
.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15.5px;
  top: 16px;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}
.step .h3 {
  display: flex;
  align-items: center;
  min-height: 32px;
}
.step p {
  margin-top: var(--s-2);
  max-width: 38em;
}
@media (min-width: 1024px) {
  .how {
    grid-template-columns: minmax(0, 451px) minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: center;
  }
  .how__mock {
    justify-self: end;
    max-width: 420px;
  }
}

/* S4 違い① */
.features {
  display: grid;
  gap: var(--s-7);
}
.pairs__head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pairs__list {
  border-top: 1px solid var(--hairline);
}
.pair {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "said said"
    "arrow result";
  padding-block: 14px;
  border-bottom: 1px solid var(--hairline);
}
.pair__said {
  grid-area: said;
  display: flex;
}
.pair__arrow {
  grid-area: arrow;
  margin-top: var(--s-2);
  margin-right: 6px;
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--text-3);
}
.pair__arrow-lg {
  display: none;
}
.pair__result {
  grid-area: result;
  margin-top: var(--s-2);
  font-size: var(--fs-note);
  line-height: 1.7;
}
.sub-note {
  margin-top: var(--s-5);
  max-width: 38em;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text-2);
}
@media (min-width: 600px) {
  .pairs__head {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) 24px minmax(0, 1fr);
    padding-bottom: var(--s-2);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-2);
  }
  .pairs__head span + span {
    grid-column: 3;
  }
  .pair {
    grid-template-columns: minmax(0, 1.15fr) 24px minmax(0, 1fr);
    grid-template-areas: "said arrow result";
    align-items: center;
  }
  .pair__arrow {
    margin: 0;
    font-size: 1rem;
    text-align: center;
  }
  .pair__arrow-lg {
    display: inline;
  }
  .pair__arrow-sm {
    display: none;
  }
  .pair__result {
    margin: 0;
    padding-left: var(--s-2);
    font-size: 0.9375rem;
  }
}
@media (min-width: 1024px) {
  .features {
    grid-template-columns: minmax(0, 643px) minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: start;
  }
  .features__mock {
    justify-self: end;
    max-width: 340px;
  }
}

/* S5 違い②-1 */
.next {
  display: grid;
  gap: var(--s-6);
}
.next__mocks {
  display: grid;
  gap: var(--s-5);
}
.next__closing {
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: 1.85;
}
@media (min-width: 1024px) {
  .next {
    grid-template-columns: minmax(0, 738px) minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: center;
  }
  .next__mocks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* S6 違い②-2 */
.meaning__grid {
  display: grid;
  gap: var(--s-6);
}
.points {
  display: grid;
  gap: var(--s-5);
}
.point__icon {
  margin-bottom: var(--s-3);
  color: var(--text);
}
.point p,
.card p,
.more__item p {
  margin-top: var(--s-2);
  max-width: 38em;
}
@media (min-width: 1024px) {
  .meaning__grid {
    grid-template-columns: minmax(0, 451px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "weight nutrients"
      "points nutrients";
    column-gap: var(--s-5);
    row-gap: var(--s-7);
    align-items: start;
  }
  .meaning__weight {
    grid-area: weight;
    max-width: 400px;
  }
  .meaning__nutrients {
    grid-area: nutrients;
    justify-self: end;
    max-width: 440px;
  }
  .points--meaning {
    grid-area: points;
    margin-top: 0;
    row-gap: var(--s-6);
  }
}

/* S7 違い③ */
.honest {
  display: grid;
  gap: var(--s-6);
}
.rows {
  display: grid;
  gap: var(--s-5);
}
.row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
}
.row__icon {
  margin-top: 3px;
}
.row p {
  margin-top: var(--s-2);
  max-width: 38em;
}
.honest__estimate {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-body);
  font-weight: 600;
}
@media (min-width: 1024px) {
  .section-head--tight {
    margin-bottom: 40px;
  }
  .honest {
    grid-template-columns: minmax(0, 548px) minmax(0, 1fr);
    column-gap: var(--s-5);
    align-items: center;
  }
  .honest__mock {
    justify-self: end;
    max-width: 400px;
  }
}

/* S8・S9 続けやすさ + ほかにも */
.cards-3 {
  display: grid;
  gap: var(--s-4);
}
.card {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.more {
  margin-top: var(--s-7);
}
.more .h2--sub {
  margin-bottom: var(--s-5);
}
.more__list {
  display: grid;
  gap: var(--s-5);
}
.more__item {
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 1024px) {
  .cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
  }
  .more {
    margin-top: var(--s-8);
  }
  .more__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--s-5);
    border-top: 1px solid var(--hairline);
  }
  .more__item {
    border-top: 0;
  }
}

/* S10 安心 */
.privacy__cards {
  display: grid;
  gap: var(--s-4);
}
.pcard {
  padding: var(--s-5);
  background: var(--bg-alt);
  border-radius: var(--r-card);
}
.pcard .h3 {
  margin-bottom: var(--s-3);
}
.pcard__route {
  margin-bottom: var(--s-2);
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--text-2);
}
.pcard p + .dot-list {
  margin-top: var(--s-3);
}
.pcard__closing {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--hairline);
  font-weight: 600;
}
.dot-list li {
  position: relative;
  padding-left: 1.1em;
}
.dot-list li + li {
  margin-top: var(--s-2);
}
.dot-list li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: calc(0.9em - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.privacy__other {
  margin-top: var(--s-6);
}
.privacy__other .h3 {
  margin-bottom: var(--s-4);
}
.privacy__link {
  margin-top: var(--s-5);
}
@media (min-width: 1024px) {
  .privacy__cards {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-5);
  }
  .pcard {
    padding: var(--s-6);
  }
  .privacy__other {
    margin-top: 40px;
  }
  .dot-list--2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3) var(--s-5);
  }
  .dot-list--2 li + li {
    margin-top: 0;
  }
}

/* S11 健康への姿勢 */
.health {
  display: grid;
  gap: var(--s-6);
}
.section-head--flush {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .health {
    grid-template-columns: minmax(0, 356px) minmax(0, 641px);
    justify-content: space-between;
    align-items: start;
  }
}

/* S12 料金 */
.plans {
  display: grid;
  gap: var(--s-4);
}
.plan {
  padding: var(--s-5);
  background: var(--bg-alt);
  border-radius: var(--r-card);
}
.plan__note {
  margin-top: var(--s-1);
  font-size: var(--fs-note);
  line-height: 1.7;
  color: var(--text-2);
}
.check-list {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.check-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 10px;
  font-size: 1rem;
  line-height: 1.7;
}
.check-list .icon {
  width: 16px;
  height: 16px;
  margin-top: calc((1.7em - 16px) / 2);
  color: var(--accent);
  stroke-width: 2.25;
}
.plans__keep {
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-body);
  font-weight: 600;
  max-width: 38em;
}
@media (min-width: 1024px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5);
  }
  .plan {
    padding: var(--s-6);
  }
}

/* S13 よくある質問 */
.faq {
  max-width: 760px;
}
.faq__title {
  margin-bottom: var(--s-6);
}
.faq__list {
  border-top: 1px solid var(--hairline);
}
.faq__item {
  border-bottom: 1px solid var(--hairline);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding-block: var(--s-3);
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__q {
  text-wrap: balance;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
}
.faq__chev {
  width: 16px;
  height: 16px;
  color: var(--text-2);
}
.faq__item[open] .faq__chev {
  transform: rotate(180deg);
}
.faq__a {
  padding: 0 40px var(--s-5) 0;
  font-size: 1rem;
  line-height: 1.8;
}

/* S14 最後の CTA */
.start {
  padding-block: 80px;
  background: var(--tile);
  color: var(--on-tile);
  text-align: center;
}
.start__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.start__icon {
  width: 88px;
  height: 88px;
  border: 1px solid var(--tile-icon-edge);
  border-radius: 20px;
}
.start .h2 {
  margin-top: var(--s-5);
}
@media (max-width: 599.98px) {
  /* sm は「まずは、/ 今日の一食から。」の2行(§3.4 S14) */
  .start .phrase {
    display: block;
  }
}
.start__text {
  margin-top: var(--s-4);
}
.cta--final {
  margin-top: var(--s-6);
}
.cta--final .cta-status {
  color: var(--on-tile);
}
.cta--final .cta-specs {
  color: var(--on-tile-2);
}
.cta--final .cta-specs li {
  padding-left: 0;
}
.cta--final .cta-specs li::before {
  content: none;
}
.start :focus-visible {
  outline-color: var(--on-tile);
}
@media (min-width: 600px) {
  .cta--final .cta-specs {
    justify-content: center;
  }
  .cta--final .cta-specs li + li::before {
    content: "";
    background: var(--on-tile-2);
  }
}
@media (min-width: 1024px) {
  .start {
    padding-block: var(--s-10);
  }
}
/* ダークでは黒の帯が #000 の帯と隣り合うので上に線を引く(下はフッターの線) */
@media (prefers-color-scheme: dark) {
  .start {
    border-top: 1px solid var(--hairline);
  }
}

/* S15 フッター */
.site-footer {
  padding-block: var(--s-7) 40px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-note);
  line-height: 1.7;
}
.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  color: var(--text-2);
}
.site-footer__brand img {
  width: auto;
  height: 22px;
}
.site-footer__links {
  margin-top: var(--s-4);
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer__operator {
  color: var(--text-2);
}
.site-footer__legal {
  margin-top: var(--s-5);
  font-size: var(--fs-legal);
  line-height: 1.7;
  color: var(--text-2);
}
@media (min-width: 600px) {
  .site-footer__links {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--s-5);
  }
}

/* 404 */
.notfound {
  min-height: 60vh;
}
.notfound__back {
  margin-top: var(--s-4);
}

/* ---------- 7. 見本(アプリの画面。§5) ---------- */
.mock {
  overflow: hidden;
  background: var(--m-canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-panel);
  color: var(--text);
  font-size: calc(17 * var(--m));
  line-height: 1.5;
  letter-spacing: 0;
}
.mock-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
}
.mock-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: var(--m-bar);
  border-bottom: 1px solid var(--hairline);
}
.mock-nav img {
  width: auto;
  height: 18px;
}
.mock-nav__title {
  font-size: calc(17 * var(--m));
  font-weight: 600;
}
@media (max-width: 599.98px) {
  .mock--hero .mock-nav,
  .mock--hero .mock-input {
    display: none;
  }
  .mock--today .mock-body {
    padding: 10px;
  }
  .mock--today .card-summary,
  .mock--today .card-timeline {
    padding: var(--s-3);
  }
}

/* ユーザーの吹き出しと CHOSHI の返事 */
.msg-user {
  display: flex;
  justify-content: flex-end;
  padding-left: var(--s-7);
}
.bubble-user {
  display: inline-block;
  max-width: 100%;
  padding: 10px var(--s-3);
  background: var(--surface-alt);
  color: var(--text);
  border-radius: var(--r-bubble);
  font-size: calc(17 * var(--m));
  line-height: 1.3;
  letter-spacing: 0;
}
.msg-reply {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.reply {
  margin-right: var(--s-5);
}

/* 応答待ち(動きの途中だけ出す。返事の位置に重ねてレイアウトを動かさない) */
.status {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: 10px;
  font-size: calc(13 * var(--m));
  line-height: 1.3;
  color: var(--text-2);
  opacity: 0;
  pointer-events: none;
}
.dots {
  display: flex;
  gap: 5px;
}
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.35;
}

/* 食事カード */
.card-meal {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-right: var(--s-6);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.card-meal__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-size: calc(12 * var(--m));
  line-height: 1.3;
  color: var(--text-2);
}
.slot {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.slot .icon {
  width: calc(12 * var(--m));
  height: calc(12 * var(--m));
  stroke-width: 2.25;
}
.card-meal__main {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.card-meal__name {
  display: -webkit-box;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: calc(17 * var(--m));
  font-weight: 600;
  line-height: 1.3;
}
.kcal {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: var(--s-2);
  white-space: nowrap;
}
.kcal__num {
  font-size: calc(24 * var(--m));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.kcal__unit {
  font-size: calc(12 * var(--m));
  color: var(--text-2);
}
.macros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: calc(12 * var(--m));
  line-height: 1.3;
}
.macros li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}
.macro-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.macro-dot--p { background: var(--m-p); }
.macro-dot--f { background: var(--m-f); }
.macro-dot--c { background: var(--m-c); }
.macro__k {
  color: var(--text-2);
}
.macro__v {
  font-weight: 600;
}
.breakdown {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  padding-top: 5px;
  border-top: 1px solid var(--hairline);
  font-size: calc(12 * var(--m));
  line-height: 1.3;
  color: var(--text-2);
}
.breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
}

/* 体重カード */
.card-weight {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-right: var(--s-6);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.card-weight__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-alt);
}
.card-weight__icon .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}
.card-weight__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.card-weight__label {
  font-size: calc(12 * var(--m));
  line-height: 1.3;
  color: var(--text-2);
}
.card-weight__value {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.card-weight__num {
  font-size: calc(24 * var(--m));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.card-weight__unit {
  font-size: calc(12 * var(--m));
  color: var(--text-2);
}
.delta {
  flex: none;
  padding: 4px var(--s-2);
  border-radius: var(--r-pill);
  font-size: calc(13 * var(--m));
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.delta--up {
  color: var(--m-caution-text);
  background: var(--m-caution-soft);
}

/* 入力欄(押せない見本。フォーカスを受けない) */
.mock-input {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--m-bar);
  border-top: 1px solid var(--hairline);
}
.mock-input__cam {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface-alt);
}
.mock-input__cam .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}
.mock-input__field {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 38px;
  padding-inline: var(--s-3);
  overflow: hidden;
  border-radius: var(--r-field);
  background: var(--surface-alt);
  font-size: calc(17 * var(--m));
  color: var(--text-3);
  white-space: nowrap;
}
.mock-input__send {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 3px;
  border-radius: 50%;
  background: var(--text-3);
  color: var(--m-on-send);
}
.mock-input__send .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

/* Today のサマリーカード */
.card-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-3);
}
.score-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: calc(13 * var(--m));
  font-weight: 600;
  line-height: 1.2;
}
.score-chip__label {
  font-size: calc(12 * var(--m));
  opacity: 0.8;
}
.pillars {
  display: flex;
  gap: var(--s-3);
  font-size: calc(12 * var(--m));
  line-height: 1.3;
  color: var(--text-2);
}
.pillars li {
  display: inline-flex;
  gap: 2px;
  white-space: nowrap;
}
.pillars b {
  font-weight: 600;
  color: var(--text);
}
.summary-body {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.ring {
  position: relative;
  flex: none;
  width: calc(116 * var(--m));
  height: calc(116 * var(--m));
}
.ring__svg {
  width: 100%;
  height: 100%;
}
.ring__track {
  stroke: var(--surface-alt);
}
.ring__fill {
  stroke: var(--accent);
}
.ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring__num {
  font-size: calc(30 * var(--m));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -1px;
}
.ring__label {
  font-size: calc(11 * var(--m));
  line-height: 1.3;
  color: var(--text-2);
}
.summary-side {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  font-size: calc(12 * var(--m));
  line-height: 1.3;
  color: var(--text-2);
}
.pfc-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pfc-bars li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.pfc-k {
  flex: none;
  width: 12px;
  font-size: calc(13 * var(--m));
  font-weight: 600;
}
.pfc-k--p { color: var(--m-p); }
.pfc-k--f { color: var(--m-f); }
.pfc-k--c { color: var(--m-c); }
.pbar {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 4px;
}
.pbar__track {
  fill: var(--surface-alt);
}
.pbar__fill--p { fill: var(--m-p); }
.pbar__fill--f { fill: var(--m-f); }
.pbar__fill--c { fill: var(--m-c); }
.pfc-v {
  flex: none;
  min-width: 58px;
  text-align: right;
  color: var(--text);
}
.pfc-v span {
  color: var(--text-2);
}
.summary-comment {
  font-size: calc(13 * var(--m));
  line-height: 1.45;
}

/* 今日の食事 */
.card-timeline {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.card-title {
  margin-bottom: var(--s-3);
  font-size: calc(17 * var(--m));
  font-weight: 600;
  line-height: 1.3;
}
.timeline li {
  display: grid;
  grid-template-columns: 38px 6px 34px minmax(0, 1fr) auto 12px;
  column-gap: var(--s-2);
  align-items: center;
  padding-block: var(--s-2);
}
.timeline__time {
  font-size: calc(13 * var(--m));
  text-align: right;
  color: var(--text-2);
}
.timeline__rail {
  position: relative;
  align-self: stretch;
  margin-block: calc(-1 * var(--s-2));
}
.timeline__rail::before {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline);
}
.timeline__rail::after {
  content: "";
  position: absolute;
  left: 0.5px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--text-2);
}
.timeline li:first-child .timeline__rail::before {
  top: 50%;
}
.timeline li:last-child .timeline__rail::before {
  bottom: 50%;
}
.timeline__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-alt);
}
.timeline__icon .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}
.timeline__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.timeline__name {
  overflow: hidden;
  font-size: calc(16 * var(--m));
  white-space: nowrap;
  text-overflow: ellipsis;
}
.timeline__slot {
  font-size: calc(12 * var(--m));
  color: var(--text-2);
}
.timeline .kcal {
  gap: 3px;
}
.timeline__kcal {
  font-size: calc(17 * var(--m));
  font-weight: 600;
}
.timeline__chev {
  width: 12px;
  height: 12px;
  color: var(--text-3);
  stroke-width: 2.25;
}

/* 栄養素の横棒 */
.segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 32px;
  padding: 2px;
  border-radius: 9px;
  background: var(--surface-alt);
  font-size: calc(13 * var(--m));
  line-height: 1;
}
.segment > span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
.segment .is-selected {
  background: var(--surface);
  border: 1px solid var(--hairline);
  font-weight: 600;
}
.card-nutrients {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
.nutrients {
  display: grid;
  gap: var(--s-3);
}
.nutrient__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  line-height: 1.3;
}
.nutrient__name {
  font-size: calc(13 * var(--m));
  font-weight: 600;
}
.nutrient__amount {
  font-size: calc(12 * var(--m));
  color: var(--text-2);
  white-space: nowrap;
}
.nutrient__bottom {
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.nlabel {
  flex: none;
  width: 64px;
}
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  font-size: calc(12 * var(--m));
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.badge--short {
  color: var(--m-short-text);
  background: var(--m-short-soft);
}
.badge--good {
  color: var(--m-good-text);
  background: var(--m-good-soft);
}
.badge--caution {
  color: var(--m-caution-text);
  background: var(--m-caution-soft);
}
.nbar {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 16px;
  overflow: visible;
}
.nbar__track {
  fill: var(--surface-alt);
}
.nbar__fill--short { fill: var(--m-short); }
.nbar__fill--good { fill: var(--m-good); }
.nbar__fill--caution { fill: var(--m-caution); }
.nbar__ref {
  stroke: var(--text-2);
  stroke-width: 1.5;
}
.mock-note {
  margin-top: calc(-1 * var(--s-1));
  font-size: calc(12 * var(--m));
  line-height: 1.5;
  color: var(--text-2);
}

/* ---------- 8. 動き(§6。ループしない・終わったら完成形で止まる) ---------- */
.pbar__fill,
.nbar__fill {
  transform-box: fill-box;
  transform-origin: left center;
}

@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes choshi-rise {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes choshi-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  /* 400ms に出て(200ms)、1,400ms から消える(150ms)。全体 1,150ms */
  @keyframes choshi-status {
    0% { opacity: 0; }
    17.4% { opacity: 1; }
    87% { opacity: 1; }
    100% { opacity: 0; }
  }
  /* 点は 300ms ごとに1つずつ点灯(1周 900ms) */
  @keyframes choshi-dot1 {
    0%, 33.3% { opacity: 1; }
    33.4%, 100% { opacity: 0.35; }
  }
  @keyframes choshi-dot2 {
    0%, 33.3% { opacity: 0.35; }
    33.4%, 66.6% { opacity: 1; }
    66.7%, 100% { opacity: 0.35; }
  }
  @keyframes choshi-dot3 {
    0%, 66.6% { opacity: 0.35; }
    66.7%, 100% { opacity: 1; }
  }
  @keyframes choshi-ring {
    from { stroke-dashoffset: 333; }
    to { stroke-dashoffset: 177; }
  }
  @keyframes choshi-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* ヒーローは CSS だけで、読み込みの 300ms 後に始める */
  .mock--hero {
    --t0: 300ms;
  }

  /* ほかの見本は main.js が画面に入ったときに is-inview を付ける。JS が無ければ最初から完成形 */
  .js [data-reveal]:not(.is-inview) .a-user,
  .js [data-reveal]:not(.is-inview) .a-reply,
  .js [data-reveal]:not(.is-inview) .a-card {
    opacity: 0;
  }
  .js [data-reveal]:not(.is-inview) .ring__fill {
    stroke-dashoffset: 333;
  }
  .js [data-reveal]:not(.is-inview) .pbar__fill,
  .js [data-reveal]:not(.is-inview) .nbar__fill {
    transform: scaleX(0);
  }

  .mock--hero .a-user,
  .js [data-reveal].is-inview .a-user {
    animation: choshi-rise 280ms var(--ease) var(--t0, 0ms) both;
  }
  .mock--hero .a-status,
  .js [data-reveal].is-inview .a-status {
    animation: choshi-status 1150ms linear calc(var(--t0, 0ms) + 400ms) both;
  }
  .mock--hero .a-status i:nth-child(1),
  .js [data-reveal].is-inview .a-status i:nth-child(1) {
    animation: choshi-dot1 900ms linear calc(var(--t0, 0ms) + 400ms) 2 both;
  }
  .mock--hero .a-status i:nth-child(2),
  .js [data-reveal].is-inview .a-status i:nth-child(2) {
    animation: choshi-dot2 900ms linear calc(var(--t0, 0ms) + 400ms) 2 both;
  }
  .mock--hero .a-status i:nth-child(3),
  .js [data-reveal].is-inview .a-status i:nth-child(3) {
    animation: choshi-dot3 900ms linear calc(var(--t0, 0ms) + 400ms) 2 both;
  }
  .mock--hero .a-reply,
  .js [data-reveal].is-inview .a-reply {
    animation: choshi-fade 240ms var(--ease) calc(var(--t0, 0ms) + 1400ms) both;
  }
  .mock--hero .a-card,
  .js [data-reveal].is-inview .a-card {
    animation: choshi-rise 280ms var(--ease) calc(var(--t0, 0ms) + 1750ms) both;
  }

  .js [data-reveal].is-inview .ring__fill {
    animation: choshi-ring 600ms var(--ease) both;
  }
  .js [data-reveal].is-inview .pbar__fill,
  .js [data-reveal].is-inview .nbar__fill {
    animation: choshi-grow 600ms var(--ease) both;
  }
  .js [data-reveal].is-inview .nutrient:nth-child(2) .nbar__fill { animation-delay: 30ms; }
  .js [data-reveal].is-inview .nutrient:nth-child(3) .nbar__fill { animation-delay: 60ms; }
  .js [data-reveal].is-inview .nutrient:nth-child(4) .nbar__fill { animation-delay: 90ms; }
  .js [data-reveal].is-inview .nutrient:nth-child(5) .nbar__fill { animation-delay: 120ms; }
  .js [data-reveal].is-inview .nutrient:nth-child(6) .nbar__fill { animation-delay: 150ms; }
  .js [data-reveal].is-inview .nutrient:nth-child(7) .nbar__fill { animation-delay: 180ms; }
  .js [data-reveal].is-inview .nutrient:nth-child(8) .nbar__fill { animation-delay: 210ms; }
  .js [data-reveal].is-inview .nutrient:nth-child(9) .nbar__fill { animation-delay: 240ms; }
  .js [data-reveal].is-inview .nutrient:nth-child(10) .nbar__fill { animation-delay: 270ms; }

  .faq__chev {
    transition: transform 200ms var(--ease);
  }
}

/* ---------- 9. 印刷 ---------- */
@media print {
  .site-header {
    position: static;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-nav,
  .skip {
    display: none;
  }
  .section {
    padding-block: var(--s-6);
  }
  .start {
    background: none;
    color: var(--text);
    border-block: 1px solid var(--hairline);
  }
  .cta--final .cta-status {
    color: var(--text);
  }
  .cta--final .cta-specs {
    color: var(--text-2);
  }
  .mock,
  .card,
  .pcard,
  .plan,
  .faq__item {
    break-inside: avoid;
  }
}