/* ============================================================
   Live Lock — Promotional Site (LP + Setup)
   Design: claymorphism × adult SNS / fashion editorial
   Based on livelock-promo.slides design system
   ============================================================ */

/* ===== Design Tokens ===== */
:root {
  /* Background */
  --bg: #F5EFE8;
  --bg-dark: #1F1A17;
  --bg-card: #FFFFFF;
  --bg-card-border: #E8DDD0;
  --bg-warm: #FAF6F2;
  --bg-soft: #FBF6EF;
  --bg-divider: #F0E5D5;

  /* Brand · Coral Rose */
  --coral: #E8A1A1;
  --coral-deep: #D6695A;
  --coral-soft: #FBE6E0;
  --coral-grad-from: #F4DDD4;
  --coral-grad-to: #E8A599;
  --coral-accent: #E8A599;
  --coral-warning: #C99A8E;

  /* Brand · Sage Mint */
  --mint: #9CC8C0;
  --mint-deep: #3D8F7A;
  --mint-soft: #E5EFEC;
  --mint-grad-from: #A8D5C8;
  --mint-light: #DDE9E3;

  /* Brand · Periwinkle */
  --periwinkle: #A8A6D4;
  --periwinkle-deep: #7A6FB0;
  --periwinkle-soft: #E8E5F2;
  --periwinkle-grad-from: #E5B5C5;
  --periwinkle-grad-to: #B5A8D5;
  --periwinkle-light: #E0DAEC;

  /* Hero Gradient */
  --hero-grad: linear-gradient(160deg, var(--coral-grad-from) 0%, var(--mint-light) 50%, var(--periwinkle-light) 100%);

  /* Typography */
  --ink: #2A2420;
  --ink-soft: #3A2F28;
  --ink-mid: #4A3D34;
  --ink-light: #6B5F55;
  --ink-mute: #9A8B7E;
  --ink-faint: #B8AEA5;

  /* On-dark */
  --light: #F5EFE8;
  --light-mid: #B8AEA5;
  --light-mute: #7A6F66;

  /* Fonts */
  --font-display: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Noto Sans JP', sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;

  /* Sizing */
  --container: 1080px;
  --container-narrow: 880px;
  --gutter: 60px;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-display); line-height: 1.7; min-height: 100vh; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { list-style: none; padding: 0; }

/* ===== Container ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 768px) {
  .container, .container-narrow { padding: 0 24px; }
}

/* ===== Site Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 239, 232, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(232, 221, 208, 0.6);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand__logo { width: 36px; height: 36px; flex-shrink: 0; }
.brand__name { font-family: var(--font-mono); font-weight: 600; font-size: 18px; letter-spacing: 0.04em; color: var(--ink); }
.brand__subtitle { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__link { font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-light); transition: color 0.15s; }
.site-nav__link:hover { color: var(--coral-deep); }
.site-nav__link--cta {
  padding: 10px 20px; border-radius: 999px;
  background: var(--ink); color: var(--light) !important;
  border: 1.5px solid var(--ink);
}
.site-nav__link--cta:hover { background: var(--coral-deep); border-color: var(--coral-deep); color: var(--light) !important; }

.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
.nav-toggle__bar { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle__bar::before, .nav-toggle__bar::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); }
.nav-toggle__bar::before { top: -7px; } .nav-toggle__bar::after { top: 7px; }

@media (max-width: 768px) {
  .site-header__inner { height: 64px; padding: 0 20px; }
  .brand__name { font-size: 16px; } .brand__logo { width: 32px; height: 32px; }
  .brand__subtitle { display: none; }
  .site-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 20px 24px; background: var(--bg); border-bottom: 1px solid var(--bg-card-border); box-shadow: 0 12px 28px rgba(60, 50, 40, 0.08); }
  .site-nav.is-open { display: flex; }
  .site-nav__link { padding: 14px 8px; border-bottom: 1px solid var(--bg-card-border); font-size: 16px; }
  .site-nav__link:last-child { border-bottom: 0; }
  .site-nav__link--cta { margin-top: 8px; text-align: center; border-bottom: 0; }
  .nav-toggle { display: inline-flex; }
}

/* ===== Section Base ===== */
.section { padding: 96px 0; position: relative; overflow: hidden; }
.section--compact { padding: 64px 0; }
.section--dark { background: var(--bg-dark); color: var(--light); }
@media (max-width: 768px) { .section { padding: 64px 0; } .section--compact { padding: 48px 0; } }

.eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.32em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 16px; }
.section--dark .eyebrow { color: var(--coral-accent); }
.title { font-family: var(--font-display); font-weight: 900; font-size: clamp(38px, 5.5vw, 72px); line-height: 1.18; letter-spacing: -0.015em; color: inherit; margin-bottom: 24px; }
.title .accent { color: var(--coral-deep); }
.title .accent-mint { color: var(--mint-deep); }
.title .accent-peri { color: var(--periwinkle-deep); }
.lead { font-family: var(--font-body); font-weight: 500; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.7; color: var(--ink-mid); margin-bottom: 32px; max-width: 720px; }
.section--dark .lead { color: var(--light-mid); }
.foot-note { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; margin-top: 48px; }
.section--dark .foot-note { color: var(--light-mute); }

/* ===== Radial Blur Backgrounds ===== */
.blur-blob { position: absolute; border-radius: 50%; filter: blur(8px); z-index: 0; pointer-events: none; }
.blur-blob--coral { background: radial-gradient(circle at 40% 40%, rgba(244, 199, 188, 0.7) 0%, rgba(244, 199, 188, 0) 70%); }
.blur-blob--mint { background: radial-gradient(circle at 50% 50%, rgba(168, 213, 200, 0.5) 0%, rgba(168, 213, 200, 0) 70%); }
.blur-blob--peri { background: radial-gradient(circle at 50% 50%, rgba(216, 207, 229, 0.6) 0%, rgba(216, 207, 229, 0) 70%); }
.blur-blob--coral-dark { background: radial-gradient(circle at 35% 35%, rgba(214, 105, 90, 0.22) 0%, rgba(214, 105, 90, 0) 70%); }
.section > .container { position: relative; z-index: 2; }

/* ===== Hero (Section 1 — slide 04 base) ===== */
.hero { padding: 80px 0 96px; background: var(--hero-grad); position: relative; overflow: hidden; }
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.hero__icon { width: 240px; height: 240px; filter: drop-shadow(0 24px 48px rgba(160, 100, 90, 0.3)) drop-shadow(0 8px 18px rgba(160, 100, 90, 0.2)); }
.hero__title-logo { max-width: 460px; }
.hero__tagline { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 34px); color: var(--ink-soft); letter-spacing: 0.005em; line-height: 1.4; }
.hero__subtitle { font-family: var(--font-mono); font-weight: 600; font-size: 16px; letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 999px;
  background: rgba(42, 36, 32, 0.92); color: var(--light);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
}
.hero__pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--coral-accent); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (max-width: 768px) {
  .hero { padding: 56px 0 72px; }
  .hero__icon { width: 160px; height: 160px; }
  .hero__title-logo { max-width: 280px; }
}

/* ===== Pain Section (slide 01 + 02) ===== */
.pain { background: var(--bg-dark); color: var(--light); }
.pain .lead { color: var(--light-mid); }
.pain-quote { font-family: var(--font-body); font-weight: 500; font-size: clamp(32px, 5vw, 54px); line-height: 1.45; color: var(--light); margin-bottom: 32px; letter-spacing: 0.01em; }
.pain-quote__mark { font-family: var(--font-mono); font-weight: 800; font-size: 96px; color: var(--coral-accent); line-height: 1; display: block; }
.pain-after { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 8vw, 118px); line-height: 1.05; color: var(--light); letter-spacing: -0.02em; margin-bottom: 48px; }
.pain-after .accent { color: var(--coral-deep); }
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
@media (max-width: 600px) { .pain-grid { grid-template-columns: 1fr; } }
.pain-card { background: rgba(245, 239, 232, 0.06); border: 1px solid rgba(245, 239, 232, 0.10); border-radius: 18px; padding: 20px 24px; font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--light); line-height: 1.4; }
.pain-card__num { display: inline-block; font-family: var(--font-mono); font-weight: 800; font-size: 14px; letter-spacing: 0.18em; color: var(--coral-accent); margin-right: 12px; }
.pain-card--strong { background: rgba(214, 105, 90, 0.14); border-color: rgba(214, 105, 90, 0.32); grid-column: 1 / -1; }
.pain-card--strong .pain-card__num { color: #F0B8AB; }
.pain-italic { font-family: var(--font-body); font-weight: 500; font-size: clamp(18px, 2vw, 26px); line-height: 1.5; color: var(--light-mid); font-style: italic; margin-top: 32px; }

/* ===== Philosophy (slide 03) ===== */
.philosophy-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 24px; margin: 48px 0; }
@media (max-width: 900px) { .philosophy-grid { grid-template-columns: 1fr; } }
.philosophy-card {
  background: var(--bg-card); border: 1.5px solid var(--bg-card-border);
  border-radius: 24px; padding: 32px 28px; position: relative;
}
.philosophy-card--answer {
  background: var(--hero-grad); border: 0;
}
.philosophy-card__label { font-family: var(--font-mono); font-weight: 800; font-size: 13px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 16px; }
.philosophy-card--answer .philosophy-card__label { color: var(--ink-soft); }
.philosophy-card__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 3vw, 42px); line-height: 1.25; color: var(--ink-soft); margin-bottom: 16px; letter-spacing: -0.01em; }
.philosophy-card__divider { width: 32px; height: 2px; background: var(--coral-deep); margin: 16px 0; }
.philosophy-card__body { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.55; color: var(--ink-light); }
.philosophy-banner {
  background: var(--ink); color: var(--light);
  padding: 32px 36px; border-radius: 20px; text-align: center;
}
.philosophy-banner__eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.28em; color: var(--coral-accent); text-transform: uppercase; margin-bottom: 12px; }
.philosophy-banner__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 3.5vw, 36px); line-height: 1.3; }
.philosophy-banner__title .accent { color: #F0B8AB; }

/* ===== Silent Escape (slide 05) ===== */
.silent-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .silent-grid { grid-template-columns: 1fr; gap: 32px; } }
.silent-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.silent-item {
  display: flex; align-items: center; gap: 18px;
  background: var(--bg-card); border: 1.5px solid var(--bg-card-border);
  border-radius: 16px; padding: 18px 24px;
  font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--ink-soft);
}
.silent-item__mark { font-family: var(--font-mono); font-weight: 800; font-size: 22px; color: var(--coral-deep); flex-shrink: 0; }
.silent-item--positive { background: var(--ink); color: var(--light); }
.silent-item--positive .silent-item__mark { color: var(--mint-grad-from); }
.phone-mock {
  position: relative; aspect-ratio: 280 / 580; max-width: 320px; margin: 0 auto;
  background: linear-gradient(160deg, #3A2F28 0%, #2A2420 100%);
  border-radius: 14% / 7%;
  box-shadow: 0 30px 60px -16px rgba(60, 40, 35, 0.4), 0 12px 30px -10px rgba(60, 40, 35, 0.25);
  padding: 4%;
}
.phone-mock__screen {
  width: 100%; height: 100%;
  background: var(--bg); border-radius: 12% / 6%;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.phone-mock__dot { width: 24%; height: auto; aspect-ratio: 1; border-radius: 50%; border: 2.5px solid var(--coral-deep); position: relative; }
.phone-mock__dot::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: var(--coral-deep); animation: fadeOut 3s ease-in-out infinite; }
@keyframes fadeOut { 0%, 30% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(0.3); } }
.phone-mock__tap-label { position: absolute; bottom: -32px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; }

/* ===== Alive Grid (slide 06) ===== */
.alive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 900px) { .alive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .alive-grid { grid-template-columns: 1fr; } }
.alive-card { background: var(--bg-card); border: 1.5px solid var(--bg-card-border); border-radius: 22px; padding: 24px; }
.alive-card__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(150deg, var(--coral-grad-from) 0%, var(--coral-grad-to) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-mono); font-weight: 800; font-size: 22px;
  margin-bottom: 16px;
}
.alive-card__icon--peri { background: linear-gradient(150deg, var(--periwinkle-grad-from) 0%, var(--periwinkle-grad-to) 100%); }
.alive-card__icon--mint { background: linear-gradient(150deg, var(--mint-grad-from) 0%, var(--mint-deep) 100%); }
.alive-card__icon--blue { background: linear-gradient(150deg, #C8DDE5 0%, #7AAAC4 100%); }
.alive-card__icon--coral { background: linear-gradient(150deg, var(--coral-grad-to) 0%, var(--coral-deep) 100%); }
.alive-card__icon--purple { background: linear-gradient(150deg, var(--periwinkle-grad-to) 0%, var(--periwinkle-deep) 100%); }
.alive-card__title { font-family: var(--font-body); font-weight: 900; font-size: 22px; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.005em; }
.alive-card__body { font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.55; color: var(--ink-light); }
.alive-conclusion { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2.5vw, 30px); text-align: center; margin-top: 48px; color: var(--ink); letter-spacing: 0.005em; }

/* ===== Two Modes (slide 07) ===== */
.modes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
@media (max-width: 900px) { .modes-grid { grid-template-columns: 1fr; } }
.mode-card {
  background: var(--bg-card); border: 1.5px solid var(--bg-card-border);
  border-radius: 28px; padding: 36px 32px; display: flex; flex-direction: column;
}
.mode-card--white { background: var(--hero-grad); border: 0; }
.mode-card__header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.mode-card__letter { font-family: var(--font-mono); font-weight: 800; font-size: 48px; line-height: 1; color: var(--coral-deep); }
.mode-card--white .mode-card__letter { color: var(--ink-soft); }
.mode-card__meta { flex: 1; }
.mode-card__eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 4px; }
.mode-card--white .mode-card__eyebrow { color: var(--ink-soft); }
.mode-card__title { font-family: var(--font-body); font-weight: 900; font-size: 28px; color: var(--ink); letter-spacing: -0.005em; line-height: 1.3; }
.mode-card__sub { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ink-mute); letter-spacing: 0.02em; margin-top: 4px; }
.mode-card--white .mode-card__sub { color: var(--ink-soft); }
.mode-card__divider { height: 1px; background: var(--bg-card-border); margin: 8px 0 20px; }
.mode-card--white .mode-card__divider { background: rgba(42, 36, 32, 0.18); }
.mode-card__desc { font-family: var(--font-body); font-weight: 700; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--ink-soft); letter-spacing: -0.005em; margin-bottom: 20px; }
.mode-card--white .mode-card__desc { color: var(--ink); }
.mode-card__example { background: var(--bg-soft); border-radius: 14px; padding: 14px 18px; font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink-light); margin-bottom: 24px; }
.mode-card--white .mode-card__example { background: rgba(255, 255, 255, 0.55); color: var(--ink-soft); }
.mode-card__screen {
  background: var(--bg-dark); border-radius: 18px; padding: 8px;
  margin-top: auto; aspect-ratio: 16 / 10;
}
.mode-card__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 12px; }

/* ===== Family Link (slide 08 + 08b) ===== */
.familylink-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 40px; }
@media (max-width: 900px) { .familylink-grid { grid-template-columns: 1fr; } .familylink-grid__plus { transform: rotate(90deg); } }
.familylink-card { background: var(--bg-card); border: 1.5px solid var(--bg-card-border); border-radius: 24px; padding: 32px 28px; }
.familylink-card--ll { background: var(--hero-grad); border: 0; }
.familylink-card__eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 8px; }
.familylink-card--ll .familylink-card__eyebrow { color: var(--ink-soft); }
.familylink-card__title { font-family: var(--font-body); font-weight: 900; font-size: clamp(22px, 2.5vw, 30px); color: var(--ink); letter-spacing: -0.005em; margin-bottom: 16px; }
.familylink-card__divider { width: 32px; height: 2px; background: var(--ink-mute); margin-bottom: 16px; }
.familylink-card--ll .familylink-card__divider { background: var(--ink); }
.familylink-list { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.85; color: var(--ink-soft); }
.familylink-list li { padding-left: 24px; position: relative; }
.familylink-list li::before { content: '✓'; position: absolute; left: 0; color: var(--mint-deep); font-weight: 700; }
.familylink-list li.is-disabled { color: var(--ink-faint); }
.familylink-list li.is-disabled::before { content: '—'; color: var(--ink-faint); }
.familylink-grid__plus {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--ink); color: var(--light);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 32px;
  margin: 0 auto;
}
.familylink-banner {
  background: var(--ink); color: var(--light);
  padding: 32px 36px; border-radius: 20px; text-align: center; margin-top: 32px;
}
.familylink-banner__eyebrow { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.28em; color: var(--mint-grad-from); text-transform: uppercase; margin-bottom: 12px; }
.familylink-banner__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 3vw, 34px); line-height: 1.4; letter-spacing: -0.005em; }
.coexist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 900px) { .coexist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .coexist-grid { grid-template-columns: 1fr; } }
.coexist-card { background: var(--bg-card); border: 1.5px solid var(--bg-card-border); border-radius: 22px; padding: 24px; }
.coexist-card__badge { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; color: var(--mint-deep); text-transform: uppercase; margin-bottom: 8px; }
.coexist-card__title { font-family: var(--font-body); font-weight: 900; font-size: 22px; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 8px; }
.coexist-card__body { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.6; color: var(--ink-light); }

/* ===== World First (slide 09) ===== */
.world-first-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
@media (max-width: 900px) { .world-first-grid { grid-template-columns: 1fr; } }
.wf-card {
  border-radius: 24px; padding: 32px 28px;
  background: rgba(245, 239, 232, 0.04); border: 1px solid rgba(245, 239, 232, 0.12);
  display: flex; flex-direction: column; min-height: 440px;
}
.wf-card--featured {
  background: linear-gradient(160deg, var(--coral-grad-to) 0%, var(--periwinkle-grad-to) 50%, #7AAAC4 100%);
  border: 0;
}
.wf-card__num { font-family: var(--font-mono); font-weight: 800; font-size: 48px; line-height: 1; color: var(--coral-accent); letter-spacing: -0.02em; }
.wf-card--featured .wf-card__num { color: #fff; }
.wf-card--mint .wf-card__num { color: var(--mint-grad-from); }
.wf-card__divider { height: 1px; background: rgba(245, 239, 232, 0.18); margin: 20px 0; }
.wf-card--featured .wf-card__divider { background: rgba(255, 255, 255, 0.4); }
.wf-card__title { font-family: var(--font-body); font-weight: 900; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; color: var(--light); letter-spacing: -0.005em; margin-bottom: 20px; }
.wf-card--featured .wf-card__title { color: #fff; }
.wf-card__body { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.7; color: var(--light-mid); margin-bottom: auto; }
.wf-card--featured .wf-card__body { color: rgba(255, 255, 255, 0.95); }
.wf-card__caption { font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; color: var(--coral-accent); text-transform: uppercase; margin-top: 20px; }
.wf-card--featured .wf-card__caption { color: #fff; font-weight: 700; }
.wf-card--mint .wf-card__caption { color: var(--mint-grad-from); }

/* ===== Comparison Table (slide 10b) ===== */
.comp-table {
  width: 100%; margin-top: 40px;
  border-collapse: separate; border-spacing: 0;
  background: var(--bg-card); border: 1.5px solid var(--bg-card-border); border-radius: 14px;
  overflow: hidden;
  font-family: var(--font-body);
}
.comp-table thead { background: var(--ink); color: var(--light); }
.comp-table thead th { padding: 18px 8px; text-align: center; font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1.4; vertical-align: middle; }
.comp-table thead th:first-child { text-align: left; padding-left: 24px; font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; color: var(--ink-faint); text-transform: uppercase; }
.comp-table thead th .type { display: block; font-family: var(--font-mono); font-weight: 700; font-size: 10px; color: var(--light-mute); letter-spacing: 0.18em; margin-bottom: 4px; }
.comp-table thead th.is-featured { background: linear-gradient(180deg, rgba(232, 165, 153, 0.2) 0%, rgba(181, 168, 213, 0.2) 100%); position: relative; }
.comp-table thead th.is-featured .type { color: #F0B8AB; }
.comp-table tbody td { padding: 16px 8px; text-align: center; border-bottom: 1px solid var(--bg-divider); font-family: var(--font-mono); font-weight: 700; font-size: 20px; }
.comp-table tbody td:first-child { text-align: left; padding-left: 24px; font-family: var(--font-body); font-size: 15px; color: var(--ink); font-weight: 700; }
.comp-table tbody tr:last-child td { border-bottom: 0; }
.comp-table tbody td.is-featured { background: linear-gradient(180deg, rgba(232, 165, 153, 0.08) 0%, rgba(181, 168, 213, 0.08) 100%); font-size: 22px; font-weight: 800; color: var(--coral-deep); }
.mark-good { color: var(--mint-deep); } .mark-partial { color: var(--coral-warning); } .mark-bad { color: var(--coral-deep); }
.comp-legend { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; color: var(--ink-mute); margin-top: 16px; text-align: center; }
.comp-conclusion { font-family: var(--font-body); font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); color: var(--ink); text-align: center; margin-top: 32px; letter-spacing: 0.005em; }
.comp-conclusion .accent { color: var(--coral-deep); }
@media (max-width: 768px) {
  .comp-table { font-size: 12px; }
  .comp-table thead th, .comp-table tbody td { padding: 12px 4px; font-size: 11px; }
  .comp-table tbody td:first-child { padding-left: 12px; }
  .comp-table tbody td { font-size: 16px; }
  .comp-table tbody td.is-featured { font-size: 18px; }
}

/* ===== Profiles (slide 11) ===== */
.profiles-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; margin-top: 32px; }
@media (max-width: 900px) { .profiles-grid { grid-template-columns: 1fr; gap: 32px; } }
.profile-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 500px) { .profile-chips { grid-template-columns: 1fr; } }
.profile-chip { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border: 1.5px solid var(--bg-card-border); border-radius: 18px; padding: 18px 20px; }
.profile-chip--accent { background: linear-gradient(150deg, var(--coral-grad-from) 0%, var(--periwinkle-light) 100%); border-color: var(--periwinkle-grad-to); }
.profile-chip__avatar { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.profile-chip__avatar--coral { background: linear-gradient(150deg, var(--periwinkle-grad-from) 0%, var(--coral-grad-to) 100%); }
.profile-chip__avatar--mint { background: linear-gradient(150deg, var(--mint-grad-from) 0%, var(--mint-deep) 100%); }
.profile-chip__avatar--blue { background: linear-gradient(150deg, #C8DDE5 0%, #7AAAC4 100%); }
.profile-chip__avatar--peri { background: linear-gradient(150deg, var(--periwinkle-grad-to) 0%, var(--periwinkle-deep) 100%); }
.profile-chip__title { font-family: var(--font-body); font-weight: 900; font-size: 18px; color: var(--ink); line-height: 1.2; }
.profile-chip__sub { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.profile-chip--accent .profile-chip__sub { color: var(--ink-soft); }
.profile-banner { background: var(--ink); color: var(--light); padding: 18px 24px; border-radius: 14px; display: flex; align-items: center; gap: 16px; }
.profile-banner__label { font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; color: var(--mint-grad-from); text-transform: uppercase; flex-shrink: 0; }
.profile-banner__text { font-family: var(--font-body); font-weight: 700; font-size: 15px; }
.profile-conclusion { font-family: var(--font-display); font-weight: 900; font-size: clamp(22px, 2.8vw, 28px); line-height: 1.4; color: var(--ink); margin-top: 32px; letter-spacing: -0.005em; }
.phone-mock--profile {
  aspect-ratio: 300 / 780; max-width: 280px; margin: 0 auto;
}
.phone-mock--profile .phone-mock__screen { padding: 0; align-items: stretch; }
.phone-mock--profile .phone-mock__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ===== Three Steps (slide 12) ===== */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 48px 0; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card {
  background: var(--bg-card); border: 1.5px solid var(--bg-card-border);
  border-radius: 24px; padding: 32px 28px; min-height: 380px;
  display: flex; flex-direction: column;
}
.step-card--accent { background: var(--hero-grad); border: 0; }
.step-card__label { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 12px; }
.step-card__num {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 32px; color: #fff;
  margin-bottom: 20px;
}
.step-card__num--1 { background: linear-gradient(150deg, var(--coral-grad-from) 0%, var(--coral-grad-to) 100%); }
.step-card__num--2 { background: linear-gradient(150deg, var(--periwinkle-grad-from) 0%, var(--periwinkle-grad-to) 100%); }
.step-card__num--3 { background: var(--ink); color: var(--light); }
.step-card__title { font-family: var(--font-body); font-weight: 900; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.3; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 16px; }
.step-card__divider { width: 32px; height: 2px; background: var(--coral-deep); margin: 16px 0; }
.step-card--3 .step-card__divider { background: var(--ink); }
.step-card__body { font-family: var(--font-body); font-weight: 500; font-size: 15px; line-height: 1.7; color: var(--ink-light); }
.step-card--3 .step-card__body { color: var(--ink-soft); }
.steps-banner { background: var(--ink); color: var(--light); padding: 24px 32px; border-radius: 14px; text-align: center; font-family: var(--font-body); font-weight: 700; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.6; }

/* ===== Final CTA (slide 13) ===== */
.final-cta { background: var(--hero-grad); padding: 96px 0; text-align: center; position: relative; overflow: hidden; }
.final-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.final-cta__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 7vw, 96px); line-height: 1.1; color: var(--ink); letter-spacing: -0.02em; }
.final-cta__lead { font-family: var(--font-body); font-weight: 500; font-size: clamp(17px, 2vw, 24px); line-height: 1.7; color: var(--ink-mid); max-width: 640px; }
.final-cta__icon { width: 220px; height: 220px; filter: drop-shadow(0 24px 48px rgba(160, 100, 90, 0.3)) drop-shadow(0 8px 18px rgba(160, 100, 90, 0.2)); margin: 16px 0; }
.final-cta__logo { max-width: 380px; }
.final-cta__badge {
  display: inline-block; padding: 14px 32px;
  background: var(--ink); color: var(--light);
  border-radius: 999px;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  margin-top: 8px;
}
.final-cta__coming-soon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(42, 36, 32, 0.08); color: var(--ink-mute);
  font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.final-cta__coming-soon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral-deep); }
@media (max-width: 768px) {
  .final-cta { padding: 64px 0; }
  .final-cta__icon { width: 160px; height: 160px; }
}

/* ===== Site Footer ===== */
.site-footer { background: var(--bg-dark); color: var(--light); padding: 64px 0 32px; }
.site-footer .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
@media (max-width: 768px) { .site-footer__grid { grid-template-columns: 1fr; gap: 32px; } .site-footer .container { padding: 0 24px; } }
.site-footer .brand__name { color: var(--light); }
.site-footer .brand__subtitle { color: var(--light-mute); }
.site-footer__desc { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--light-mid); margin-top: 16px; max-width: 320px; line-height: 1.6; }
.site-footer__col__title { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.22em; color: var(--coral-accent); text-transform: uppercase; margin-bottom: 16px; }
.site-footer__link {
  display: block; font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--light-mid); padding: 6px 0; transition: color 0.15s;
}
.site-footer__link:hover { color: var(--coral-accent); }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
  padding-top: 32px; border-top: 1px solid rgba(245, 239, 232, 0.1);
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--light-mute); letter-spacing: 0.05em;
}
.site-footer__bottom a { color: var(--light-mid); }
.site-footer__bottom a:hover { color: var(--coral-accent); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-footer__coming-soon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(232, 165, 153, 0.12); color: var(--coral-accent);
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.site-footer__coming-soon::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--coral-deep); }

/* ===== Anchor offset (sticky header) ===== */
[id] { scroll-margin-top: 96px; }

/* ===== Setup page specific ===== */
.setup-hero { background: var(--hero-grad); padding: 80px 0 64px; text-align: center; }
.setup-hero__label { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: 0.32em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 16px; }
.setup-hero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(36px, 5vw, 56px); line-height: 1.2; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 16px; }
.setup-hero__title .accent { color: var(--coral-deep); }
.setup-hero__subtitle { font-family: var(--font-body); font-weight: 500; font-size: clamp(16px, 1.8vw, 20px); color: var(--ink-mid); margin-bottom: 24px; }
.setup-hero__meta { display: inline-flex; flex-wrap: wrap; gap: 12px 24px; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); letter-spacing: 0.18em; text-transform: uppercase; }
.setup-intro { background: var(--bg-card); border: 1.5px solid var(--bg-card-border); border-radius: 20px; padding: 32px 36px; margin: 32px auto; max-width: var(--container-narrow); }
.setup-intro p { font-family: var(--font-body); font-weight: 500; font-size: 16px; color: var(--ink-soft); margin-bottom: 12px; }
.setup-intro p:last-child { margin-bottom: 0; }
.setup-intro__important { margin-top: 20px; padding: 16px 20px; background: var(--coral-soft); border-left: 4px solid var(--coral-deep); border-radius: 8px; font-family: var(--font-body); font-size: 15px; color: var(--ink-soft); }
.setup-intro__important strong { color: var(--coral-deep); }
.setup-step { background: var(--bg-card); border: 1.5px solid var(--bg-card-border); border-radius: 24px; padding: 40px 36px; margin: 0 auto 32px; max-width: var(--container-narrow); }
.setup-step__header { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1.5px dashed var(--bg-card-border); }
.setup-step__num {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 32px; color: #fff; flex-shrink: 0;
}
.setup-step--1 .setup-step__num { background: linear-gradient(150deg, var(--coral-grad-from) 0%, var(--coral-grad-to) 100%); }
.setup-step--2 .setup-step__num { background: linear-gradient(150deg, var(--periwinkle-grad-from) 0%, var(--periwinkle-grad-to) 100%); }
.setup-step--3 .setup-step__num { background: var(--ink); }
.setup-step__title-block { flex: 1; }
.setup-step__label { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; }
.setup-step__title { font-family: var(--font-body); font-weight: 900; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.3; color: var(--ink); margin-top: 6px; letter-spacing: -0.005em; }
.setup-step__why { background: var(--bg-warm); padding: 16px 20px; border-radius: 12px; font-family: var(--font-body); font-size: 15px; color: var(--ink-mid); margin-bottom: 24px; line-height: 1.7; }
.setup-step__why strong { color: var(--ink); font-weight: 700; }
.setup-actions { list-style: none; padding: 0; margin: 0; counter-reset: action; }
.setup-actions li { counter-increment: action; position: relative; padding: 4px 0 24px 56px; font-family: var(--font-body); font-size: 16px; color: var(--ink-soft); border-left: 2px solid var(--bg-card-border); margin-left: 18px; }
.setup-actions li:last-child { border-left: 2px solid transparent; padding-bottom: 0; }
.setup-actions li::before { content: counter(action); position: absolute; left: -19px; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-warm); border: 2px solid var(--bg-card-border); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--ink); }
.setup-action__title { font-weight: 700; color: var(--ink); display: block; margin-bottom: 6px; font-size: 17px; }
.setup-action__detail { color: var(--ink-mid); font-size: 14px; line-height: 1.7; }
.setup-action__breadcrumb { display: inline-block; margin: 8px 0; padding: 6px 14px; background: var(--bg-warm); border-radius: 999px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.setup-action__breadcrumb .arrow { color: var(--coral-deep); margin: 0 6px; font-weight: 600; }
.setup-img-wrap { margin: 16px 0 8px; text-align: center; }
.setup-img-wrap img { max-width: 100%; height: auto; max-height: 360px; border-radius: 12px; border: 1.5px solid var(--bg-card-border); box-shadow: 0 8px 24px rgba(60, 50, 40, 0.08); }
.setup-img-caption { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); margin-top: 8px; letter-spacing: 0.05em; }
.setup-tip { margin-top: 20px; padding: 14px 18px; background: var(--mint-soft); border-radius: 10px; border-left: 3px solid var(--mint); font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); }
.setup-tip strong { color: #2E5751; }
.setup-warning { margin-top: 12px; padding: 14px 18px; background: #FDF1ED; border-radius: 10px; border-left: 3px solid var(--coral-deep); font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); }
.setup-complete { background: var(--hero-grad); border-radius: 24px; padding: 40px 36px; text-align: center; margin: 0 auto 32px; max-width: var(--container-narrow); }
.setup-complete__check { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; font-size: 38px; color: var(--coral-deep); margin-bottom: 20px; box-shadow: 0 8px 24px rgba(214, 105, 90, 0.2); }
.setup-complete h2 { font-family: var(--font-body); font-weight: 900; font-size: clamp(24px, 3vw, 32px); color: var(--ink); margin-bottom: 12px; }
.setup-complete p { font-family: var(--font-body); font-size: 16px; color: var(--ink-mid); }
.setup-trouble { background: var(--bg-card); border: 1.5px solid var(--bg-card-border); border-radius: 20px; padding: 32px 36px; margin: 0 auto 32px; max-width: var(--container-narrow); }
.setup-trouble h3 { font-family: var(--font-body); font-weight: 900; font-size: 22px; color: var(--ink); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.setup-trouble h3::before { content: ''; width: 6px; height: 24px; background: var(--coral-deep); border-radius: 3px; }
.setup-trouble dt { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ink); margin: 18px 0 8px; padding-left: 22px; position: relative; }
.setup-trouble dt::before { content: 'Q'; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 800; color: var(--coral-deep); font-size: 16px; }
.setup-trouble dd { margin: 0 0 0 22px; padding-left: 22px; position: relative; font-family: var(--font-body); font-size: 15px; color: var(--ink-mid); line-height: 1.7; }
.setup-trouble dd::before { content: 'A'; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-weight: 800; color: var(--mint); font-size: 16px; }

@media (max-width: 768px) {
  .setup-step { padding: 28px 22px 24px; }
  .setup-step__num { width: 52px; height: 52px; font-size: 26px; }
  .setup-actions li { padding-left: 44px; }
  .setup-actions li::before { width: 32px; height: 32px; font-size: 13px; left: -17px; }
  .setup-intro, .setup-trouble, .setup-complete { padding: 24px 22px; }
}

/* ===== Print ===== */
@media print {
  .site-header, .site-footer, .nav-toggle { display: none; }
  body { background: #fff; padding: 0; }
  .section, .hero, .final-cta, .setup-hero, .setup-step, .setup-complete, .setup-trouble { page-break-inside: avoid; box-shadow: none; }
}