:root {
  --paper: #eef0e9;
  --surface: #fbf8f1;
  --line: #d4d9d0;
  --ink: #202827;
  --muted: #697470;
  --coral: #cf7f79;
  --coral-dark: #a76160;
  --sage: #6f8874;
}

body { background: var(--surface); }
.concept-b .phone {
  padding:4px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:36px;
  background:linear-gradient(145deg,#696a6d 0%,#111214 9%,#020303 48%,#292a2c 91%,#070808 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 18px 40px rgba(22,27,26,.2);
}
.concept-b .phone img { display:block; border:0; border-radius:31px; }
.concept-b .phone-speaker {
  top:2.25%;
  width:6.2%;
  height:auto;
  aspect-ratio:1;
  border:1px solid #050607;
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#39506b 0 9%,#151b22 15%,#020304 48%,#24272b 76%,#050607 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 1px 2px rgba(0,0,0,.5);
}
.site-header { color:#f8f2e9; border-color:rgba(255,255,255,.1); background:rgba(31,39,38,.94); }
.site-nav { color:#d7ded8; }
.nav-launch { color:#202827; background:#f5eee5; }
.menu-toggle { color:#f7f1e8; border-color:rgba(255,255,255,.24); background:transparent; }
main { display:flex; flex-direction:column; }
.compact-hero { order:0; grid-template-columns:minmax(0,1fr) minmax(340px,.7fr); max-width:none; min-height:760px; color:#f8f2e9; background:#1f2827; }
.compact-hero::before { background:linear-gradient(120deg,#1f2827,#2b3633); }
.compact-hero h1 em { color:#e5aaa4; }
.compact-hero .hero-lede,.compact-hero .trust-line { color:#cbd3ce; }
.compact-hero .trust-line { display:flex; flex-wrap:wrap; gap:4px 10px; }
.compact-hero .trust-line span { color:#8fa699; }
.compact-hero .button-dark { color:#202827; background:#f7efe5; }
.compact-hero .text-link { border-color:rgba(255,255,255,.4); }
.compact-hero-scene { min-height:570px; border:1px solid rgba(255,255,255,.12); border-radius:36px; background:#34423e; }
.hero-phone-primary { width:min(68%,250px); }
.compact-privacy { order:1; padding-top:96px; background:#e9eee6; color:var(--ink); }
.privacy-top { color:var(--ink); }
.privacy-top h2 em { color:var(--sage); }
.privacy-top > p { color:var(--muted); }
.privacy-top > p:not(.chapter-label) { color:#4d5a56; font-weight:580; }
.compact-boundary { border:0; border-radius:34px; background:#202827; color:#fff; }
.compact-boundary-visual { background:#3f504a; }
.compact-boundary-visual .phone-privacy { bottom:-14%; width:min(52%,250px); }
.compact-privacy .terms-note { color:#64706c; }
.compact-privacy .terms-note a { color:var(--ink); }
.compact-story { order:2; background:#fbf8f1; }
.compact-heading { max-width:1180px; }
.product-explanation {
  max-width:1180px;
  margin:22px auto 28px;
  padding:2px 0 2px 20px;
  border-left:3px solid #cf7f79;
  color:#53605c;
  font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.6;
}
.phone-story { max-width:1180px; gap:18px; }
.phone-story-item,
.phone-story-item:last-child { grid-template-rows:390px auto; border:0; border-radius:26px; background:#edf1eb; }
.story-resting { background:#e4ece7; }
.story-period { background:#f4e4df; }
.concept-b .story-fertility { background:#eee1b8; }
.concept-b .story-phone,
.concept-b .phone-story-item:nth-child(2) .story-phone { width:170px; max-width:64%; transform:none; box-shadow:0 16px 34px rgba(38,44,41,.11); }
.history-example { grid-template-columns:minmax(300px,.75fr) minmax(320px,.8fr); max-width:1040px; background:#eef1ea; border:0; }
.concept-b .history-screen { display:grid; place-items:center; padding:34px; background:#e5ebe3; }
.concept-b .history-phone { width:190px; max-width:64%; justify-self:center; box-shadow:0 16px 34px rgba(38,44,41,.11); }
.boundary-intro { max-width:640px; margin:0 0 26px; color:#cfd8d2; line-height:1.65; }
.compact-subscription {
  order:3;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.8fr);
  gap:clamp(36px,7vw,96px);
  align-items:center;
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:96px 42px;
}
.subscription-copy h2 {
  max-width:760px;
  margin:12px 0 22px;
  font-size:clamp(2.7rem,5.8vw,5.7rem);
  line-height:.94;
  letter-spacing:-.055em;
}
.subscription-copy h2 em { color:var(--coral-dark); font-style:normal; }
.subscription-copy > p:not(.chapter-label) { max-width:620px; color:#53605c; font-size:clamp(1.05rem,1.7vw,1.26rem); line-height:1.6; }
.subscription-panel {
  padding:clamp(28px,4vw,46px);
  border:1px solid #d8d9ce;
  border-radius:30px;
  background:#f1e8dc;
}
.subscription-panel h3 { margin:10px 0 16px; font-size:clamp(1.65rem,2.7vw,2.4rem); line-height:1.08; letter-spacing:-.035em; }
.subscription-panel > p:not(.eyebrow) { margin:0 0 24px; color:#53605c; line-height:1.65; }
.subscription-panel .text-link { color:var(--ink); border-color:#9d9387; }
.compact-launch { order:4; max-width:1220px; min-height:590px; }
.launch-panel { background:#eef1ea; border-color:#d3dacf; }
.site-footer { background:#202827; color:#dfe5df; }

@media (max-width:800px) {
  .compact-hero { grid-template-columns:1fr; }
  .compact-hero-scene { min-height:450px; }
  .phone-story { display:flex; }
  .phone-story-item,
  .phone-story-item:last-child { flex-basis:min(80vw,360px); border:0; }
  .compact-boundary-visual .phone-privacy { bottom:-18%; width:min(58%,230px); }
  .concept-b .history-phone { width:180px; max-width:60%; }
  .compact-subscription { grid-template-columns:1fr; gap:34px; padding:76px 24px; }
  .subscription-copy h2 { font-size:clamp(2.7rem,11vw,4.7rem); }
}