/* ─── Fonts ─── */

/* ─── Design Tokens ─── */
:root {
  --ground:   #fff6f8;
  --ink:      #24181c;
  --ink-2:    #624f57;
  --ink-3:    #9b8b91;
  --rose:     #e85d7a;
  --rose-d:   #c94563;
  --butter:   #ffe7b8;
  --mint:     #6dc5a4;
  --lilac:    #9b87e4;
  --hairline: rgba(26, 19, 24, 0.08);
  --r-card:   24px;
  --r-pill:   999px;
  --brand-coral: #ff5b6f;
  --brand-peach: #ffaf8f;
  --brand-cream: #fff9f2;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: "DM Sans", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
button, a { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── Page Shell ─── */
.site-shell {
  background:
    radial-gradient(ellipse 65% 44% at 80% -2%, rgba(255, 210, 100, 0.3), transparent 64%),
    radial-gradient(ellipse 42% 36% at 12% 14%, rgba(255, 195, 210, 0.28), transparent 68%),
    var(--ground);
}

.section { width: min(1140px, calc(100% - 80px)); margin-inline: auto; }

/* ─── NAV ─── */
.nav-wrap {
  position: sticky; top: 0; z-index: 30;
  padding: 20px 0;
  transition: padding 0.36s ease, background 0.36s ease, backdrop-filter 0.36s ease;
}

.nav-wrap.is-scrolled {
  padding: 12px 0;
  backdrop-filter: blur(24px) saturate(1.15);
  background: rgba(249, 246, 243, 0.84);
  border-bottom: 1px solid var(--hairline);
}

.nav {
  display: flex; align-items: center; gap: 32px;
  height: 58px; padding: 0 20px 0 24px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;\r\n  box-shadow: 0 4px 24px rgba(26, 19, 24, 0.06), 0 1px 4px rgba(26, 19, 24, 0.04);
}

/* Brand mark */
.mark {
  position: relative; display: inline-flex; width: 26px; height: 26px;
  background: var(--rose); border-radius: 48% 52% 49% 51% / 53% 50% 50% 47%;
  transform: rotate(-12deg); align-items: flex-end; justify-content: center;
  gap: 2px; padding-bottom: 5px; flex-shrink: 0;
}
.mark i { display: block; width: 3px; background: #fff; border-radius: 3px; }
.mark i:nth-child(1) { height: 6px; }
.mark i:nth-child(2) { height: 11px; }
.mark i:nth-child(3) { height: 8px; }

.brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.06em; color: var(--ink);
}
.brand b { font-size: 9px; font-weight: 600; letter-spacing: 2px; color: var(--ink-3); }

.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links button {
  font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 6px 0;
  position: relative; transition: color 0.22s;
}
.nav-links button::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 100%;
  height: 1px; background: var(--rose);
  transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links button:hover { color: var(--rose); }
.nav-links button:hover::after { right: 0; }

.nav-download {
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--rose); color: white;
  font-size: 13px; font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}
.nav-download:hover { background: var(--rose-d); transform: scale(1.03); }
.nav-download span { margin-left: 4px; }

.menu-button { display: none; font-size: 22px; color: var(--ink); margin-left: auto; }

/* ─── HERO ─── */
.hero {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 80px;
  min-height: 760px; padding: 84px 0 130px;
}
.hero-copy { position: relative; z-index: 2; }

.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 26px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--ink-3); text-transform: uppercase;
}
.eyebrow span { display: block; width: 20px; height: 1px; background: currentColor; }

.hero h1 {
  font-family: "Noto Sans SC", "DM Sans", sans-serif;
  font-size: clamp(58px, 6.2vw, 92px); font-weight: 900;
  letter-spacing: -0.07em; line-height: 1.02;
  color: var(--ink); margin: 0 0 28px;
}
.hero h1 em {
  font-style: normal; color: var(--rose);
  font-family: "Noto Serif SC", serif; font-weight: 700;
}

.hero-description {
  font-size: 17px; font-weight: 400; line-height: 1.8; color: var(--ink-2);
  max-width: 400px; margin: 0 0 36px;
}
.desktop-only { }

/* Mood picker */
.mood-picker {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.mood-picker > span { font-size: 12px; color: var(--ink-3); flex-shrink: 0; margin-right: 2px; }
.mood-picker button {
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--hairline);
  font-size: 12px; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.62);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.mood-picker button:hover {
  border-color: rgba(232, 83, 106, 0.35);
  background: rgba(255, 236, 240, 0.8); color: var(--rose);
}
.mood-picker button.selected {
  background: var(--ink); border-color: var(--ink);
  color: white; font-weight: 600;
  box-shadow: 0 4px 12px rgba(26, 19, 24, 0.18);
}

.mood-response {
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
  margin: 0 0 44px; min-height: 18px;
}
.mood-response b { color: var(--rose); font-weight: 700; }

.hero-actions { display: flex; align-items: center; gap: 20px; margin-bottom: 56px; }

.primary-btn {
  padding: 16px 26px; border-radius: var(--r-pill);
  background: var(--rose); color: white;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 8px 26px rgba(232, 83, 106, 0.3);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.primary-btn:hover {
  background: var(--rose-d);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(232, 83, 106, 0.38);
}
.primary-btn span { margin-left: 8px; }

.text-btn {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  padding: 8px 0; border-bottom: 1.5px solid var(--hairline);
  transition: color 0.2s, border-color 0.2s;
}
.text-btn:hover { color: var(--rose); border-color: var(--rose); }
.text-btn span { margin-left: 6px; }

.hero-proof {
  display: flex; align-items: center; gap: 14px;
  color: var(--ink-3); font-size: 12px; line-height: 1.65;
}
.hero-proof strong { color: var(--rose); font-weight: 700; }

.avatars { display: flex; }
.avatars i {
  width: 30px; height: 30px; margin-left: -8px; border-radius: 50%;
  color: white; font-style: normal; display: grid; place-items: center;
  font-size: 11px; border: 2px solid var(--ground);
}
.avatars i:nth-child(1) { background: #c78e78; z-index: 3; }
.avatars i:nth-child(2) { background: #7f8fb0; z-index: 2; }
.avatars i:nth-child(3) { background: #98bb96; z-index: 1; }

/* ─── HERO VISUAL ─── */
.hero-visual {
  position: relative; height: 590px;
  --light-x: 56%; --light-y: 45%;
}
.hero-visual::before {
  content: ""; position: absolute; z-index: 0;
  width: 280px; height: 280px;
  left: var(--light-x); top: var(--light-y);
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 68%);
  filter: blur(10px); pointer-events: none;
  transition: left 0.4s ease-out, top 0.4s ease-out;
}
.hero-visual > * { isolation: isolate; }

.sun-orb {
  position: absolute; width: 445px; height: 445px;
  right: 28px; top: 55px; border-radius: 50%; isolation: auto;
  background: radial-gradient(circle at 38% 28%, #fff8dc, #f9d265 56%, #efb840);
  box-shadow: inset -18px -22px 44px rgba(200, 150, 40, 0.1), 0 24px 52px rgba(245, 200, 60, 0.22);
}
.sun-orb::after {
  content: ""; position: absolute; inset: 16px;
  border: 1.5px dashed rgba(255, 255, 255, 0.5); border-radius: inherit;
}

/* iPhone stage */
.phone-stage {
  position: absolute; right: 88px; top: 2px;
  width: 300px; height: 562px; z-index: 3;
  transform: rotate(3.5deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.75, 0.2, 1);
  filter: drop-shadow(0 32px 28px rgba(47, 34, 40, 0.18));
}
.hero-visual:hover .phone-stage { transform: rotate(0.5deg) translateY(-12px); }

/* iPhone hardware */
.phone { position: absolute; overflow: hidden; }

.phone-hero {
  position: relative; top: auto; right: auto; transform: none !important;
  width: 286px; height: 552px;
  border: 4px solid #2d292e; border-radius: 46px;
  background: #2d292e; padding: 3px; box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 0 1px rgba(0,0,0,0.65);
}
.phone-hero::before {
  content: ""; position: absolute; z-index: 5; pointer-events: none;
  inset: 0; border-radius: 42px; padding: 1px;
  background: linear-gradient(120deg, rgba(255,255,255,0.7), transparent 22%, transparent 72%, rgba(0,0,0,0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.phone-hero::after { display: none; }

.screen-glass {
  position: absolute; inset: 3px; z-index: 4; border-radius: 40px;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.16), transparent 16%, transparent 73%, rgba(20,12,16,0.07));
  mix-blend-mode: screen;
}

.dynamic-island {
  position: absolute; z-index: 6; width: 92px; height: 26px;
  border-radius: 999px; top: 9px; left: 50%; translate: -50% 0;
  background: #141414; display: flex; align-items: center;
  justify-content: flex-end; gap: 9px; padding: 0 11px; box-sizing: border-box;
}
.dynamic-island i { width: 6px; height: 6px; border-radius: 50%; background: #1e2941; box-shadow: 0 0 0 1px #28395a, 0 0 7px #3460a2; }
.dynamic-island span { width: 10px; height: 10px; border-radius: 50%; background: #111; }

.iphone-action, .iphone-volume {
  position: absolute; display: block; left: -4px; width: 3px;
  background: #3e3d44; border-radius: 3px 0 0 3px;
}
.iphone-action { top: 95px; height: 25px; }
.iphone-volume-one { top: 141px; height: 48px; }
.iphone-volume-two { top: 199px; height: 48px; }

.phone-top {
  position: relative; z-index: 5; height: 36px; padding: 9px 22px 0;
  box-sizing: border-box; background: #fff9fa;
  font-size: 10px; font-weight: 700; color: #2e2024;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.phone-top > span:last-child { display: flex; align-items: center; gap: 3px; }

.phone-content {
  height: calc(100% - 36px); border-radius: 0 0 40px 40px;
  overflow: hidden; background: #fff9fa; position: relative;
}

.app-bar { display: flex; align-items: center; gap: 4px; padding: 10px 13px 8px; }
.app-bar > div { display: flex; align-items: center; gap: 3px; }
.app-bar button {
  margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
  background: #f2e8eb; color: #4a3940; display: grid; place-items: center;
}
.app-bar .mark { width: 22px; height: 22px; transform: scale(0.6) rotate(-12deg); transform-origin: left center; margin-right: -8px; }
.app-bar strong { font-size: 13px; letter-spacing: -0.04em; }

.greeting { font-size: 12px; line-height: 1.5; padding: 2px 14px; margin: 4px 0; }

.filter-pills {
  display: flex; gap: 6px; align-items: center;
  padding: 4px 14px 10px; font-size: 9px;
}
.filter-pills > * { padding: 5px 9px; border-radius: 20px; background: #f1e8ea; font-weight: 500; }
.filter-pills b { background: var(--rose); color: white; }
.filter-pills svg { margin-left: auto; color: #7a6970; }

.activity-card {
  height: 216px; margin: 0 12px; border-radius: 18px;
  overflow: hidden; position: relative; color: white;
}
.activity-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.84) contrast(1.03); transition: transform 0.8s ease; }
.hero-visual:hover .activity-card img { transform: scale(1.05); }
.activity-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 20%, rgba(31,18,22,0.78)); }
.activity-overlay { position: absolute; z-index: 1; bottom: 13px; left: 13px; }
.activity-overlay small { font-size: 8px; background: rgba(255,255,255,0.25); padding: 3px 7px; border-radius: 10px; display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.activity-overlay h3 { font-size: 17px; letter-spacing: -0.06em; margin: 8px 0 3px; }
.activity-overlay p { font-size: 8px; margin: 0; }

.mini-row {
  height: 46px; margin: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  background: white; border-radius: 13px; padding: 0 9px;
  border: 1px solid rgba(70,43,50,0.05);
  box-shadow: 0 4px 10px rgba(114,72,83,0.04);
}
.mini-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #b9ebd8; color: #36836d; }
.mini-row div { display: flex; flex-direction: column; }
.mini-row b { font-size: 9px; }
.mini-row small { color: #a58f95; font-size: 7px; margin-top: 2px; }
.mini-row em { font-size: 8px; color: var(--rose); margin-left: auto; font-style: normal; display: flex; align-items: center; gap: 1px; font-weight: 700; }

.app-tabs {
  position: absolute; bottom: 0; width: 100%;
  background: white; display: flex; height: 52px;
  justify-content: space-around; align-items: center; padding-bottom: 2px;
}
.app-tabs span { color: #9d8c91; display: flex; flex-direction: column; align-items: center; }
.app-tabs svg { width: 16px; height: 16px; }
.app-tabs small { font-size: 7px; margin-top: 2px; }
.app-tabs .active { color: var(--rose); }

.home-indicator {
  position: absolute; z-index: 7; left: 50%; bottom: 7px; translate: -50% 0;
  width: 88px; height: 3px; border-radius: 999px; background: rgba(23,18,20,0.78);
}

/* Floating decorations */
.paper-note {
  position: absolute; top: 26px; right: 0; z-index: 4;
  background: white; padding: 16px 18px 14px;
  border-radius: 18px; font-size: 14px; line-height: 1.45; color: var(--ink-2);
  box-shadow: 0 14px 28px rgba(80,52,62,0.12); rotate: 5deg;
}
.paper-note::before {
  content: ""; position: absolute; top: -8px; left: 44%;
  width: 26px; height: 13px;
  background: rgba(245, 200, 58, 0.55); transform: rotate(-5deg);
}
.paper-note b { color: var(--rose); font-size: 15px; }
.paper-note span { color: var(--rose); margin-left: 20px; }

.floating-members {
  position: absolute; z-index: 4; left: 18px; bottom: 90px;
  background: rgba(255, 255, 255, 0.9); border-radius: 16px;
  padding: 11px 14px; border: 1px solid rgba(255,255,255,0.98);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 32px rgba(80, 40, 50, 0.14); rotate: -3deg;
}
.floating-members div { display: flex; align-items: center; gap: 6px; }
.floating-members div span { color: var(--rose); }
.floating-members b { font-size: 12px; }
.floating-members small { font-size: 9px; color: var(--ink-3); display: block; margin-top: 3px; }

/* ─── INTRO STRIP ─── */
.intro-strip {
  background: var(--ink); color: rgba(255,255,255,0.88);
  height: 82px; display: flex; justify-content: center;
  align-items: center; gap: 40px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.03em;
}
.intro-strip span { color: var(--butter); font-size: 8px; }

/* ─── SCENE REEL ─── */
.scene-reel {
  padding: 148px max(40px, calc((100% - 1140px) / 2)) 126px;
  background: #fefcf9;
}

.scene-heading {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: end; gap: 60px; margin-bottom: 52px;
}

.scene-heading h2 {
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(38px, 4.2vw, 60px); font-weight: 900;
  letter-spacing: -0.08em; line-height: 1.12; color: var(--ink); margin: 0;
}

.scene-heading > p {
  font-size: 15px; line-height: 1.82; color: var(--ink-3); margin: 0; padding-bottom: 8px;
}

.scene-grid {
  display: grid; gap: 10px; height: 428px;
  grid-template-columns: 1.12fr 0.88fr 0.88fr 1.12fr;
  transition: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene-card {
  position: relative; overflow: hidden; border-radius: 20px;
  background: #d9c2ae; text-align: left; color: white;
  border: 0;
  transition: box-shadow 0.35s, transform 0.35s;
}
.scene-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.82) contrast(1.03);
  transition: transform 0.75s ease, filter 0.5s;
}
.scene-card:hover img, .scene-card.active img {
  transform: scale(1.07); filter: saturate(1.0) contrast(1.02);
}
.scene-card:hover { transform: translateY(-6px); box-shadow: 0 24px 42px rgba(58, 34, 42, 0.18); }
.scene-card.active { box-shadow: 0 32px 52px rgba(58, 34, 42, 0.24); transform: translateY(-4px); }

.scene-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(20, 12, 18, 0.8));
}

.scene-copy { position: absolute; left: 20px; right: 18px; bottom: 22px; z-index: 1; }
.scene-copy span {
  display: inline-block; padding: 4px 9px;
  border: 1px solid rgba(255,255,255,0.42); border-radius: 99px;
  background: rgba(255,255,255,0.14); font-size: 9px; font-weight: 600;
  backdrop-filter: blur(6px); letter-spacing: 0.05em;
}
.scene-copy h3 {
  margin: 10px 0 6px; font-size: 18px; line-height: 1.18;
  letter-spacing: -0.06em; font-weight: 700;
}
.scene-copy p { margin: 0; font-size: 10px; opacity: 0.8; }

.scene-card > i {
  position: absolute; z-index: 2; top: 16px; right: 16px;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.38); font-style: normal;
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity 0.25s, transform 0.25s;
}
.scene-card:hover > i, .scene-card.active > i { opacity: 1; transform: none; }

.scene-status {
  height: 54px; margin-top: 14px; padding: 0 18px;
  border: 1px solid rgba(26,19,24,0.08); border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-2); font-size: 12px; background: white;
  box-shadow: 0 6px 18px rgba(58, 38, 44, 0.04);
}
.scene-status b { color: var(--ink); }

.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rose); flex-shrink: 0;
  box-shadow: 0 0 0 5px rgba(232, 83, 106, 0.12);
  animation: pulse 2.2s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(232, 83, 106, 0.12); }
  50% { box-shadow: 0 0 0 8px rgba(232, 83, 106, 0.05); }
}

.scene-status button {
  margin-left: auto; color: var(--rose); font-size: 11px; font-weight: 700;
  transition: opacity 0.2s;
}
.scene-status button:hover { opacity: 0.7; }
.scene-status button span { margin-left: 4px; }

/* ─── VALUES ─── */
.values-section { padding: 156px 0 144px; }

.section-heading {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: end; gap: 60px; margin-bottom: 64px;
}

.section h2 {
  font-family: "Noto Sans SC", "DM Sans", sans-serif;
  font-size: clamp(40px, 4.2vw, 60px); font-weight: 900;
  letter-spacing: -0.08em; line-height: 1.14; color: var(--ink); margin: 0;
}
.section h2 span { color: var(--rose); font-family: "Noto Serif SC", serif; font-weight: 700; }

.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.value-card {
  position: relative; overflow: hidden;
  padding: 32px 28px 36px; border-radius: 22px; min-height: 240px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(26,19,24,0.06);
  box-shadow: 0 8px 24px rgba(26,19,24,0.04);
  text-align: left; font: inherit; cursor: pointer;
  transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.value-card::before {
  content: ""; position: absolute; width: 128px; height: 128px; border-radius: 50%;
  right: -52px; top: -52px;
  transition: transform 0.5s ease, opacity 0.5s;
}
.value-card:nth-child(1)::before { background: rgba(245, 200, 58, 0.22); }
.value-card:nth-child(2)::before { background: rgba(232, 83, 106, 0.14); }
.value-card:nth-child(3)::before { background: rgba(109, 197, 164, 0.2); }
.value-card:nth-child(4)::before { background: rgba(155, 135, 228, 0.2); }

.value-card:hover, .value-card.active {
  transform: translateY(-8px);
  box-shadow: 0 26px 48px rgba(26,19,24,0.11);
}
.value-card:hover::before, .value-card.active::before { transform: scale(2.2); opacity: 0.85; }
.value-card.active { border-color: rgba(232, 83, 106, 0.2); }

.value-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.value-top small { font-size: 10px; color: var(--ink-3); font-family: monospace; letter-spacing: 0.12em; }
.value-top i {
  font-style: normal; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(26,19,24,0.09);
  background: rgba(255,255,255,0.9); color: var(--ink-2);
  transition: all 0.28s;
}
.value-card.active .value-top i { background: var(--rose); color: white; border-color: var(--rose); }

.value-card h3 {
  position: relative; font-size: 18px; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.3;
  color: var(--ink); margin: 60px 0 10px;
}
.value-card p {
  position: relative; font-size: 13px; line-height: 1.78;
  color: var(--ink-3); margin: 0;
}
.value-card > span {
  position: absolute; bottom: 20px; left: 28px;
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; color: var(--rose);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.28s, transform 0.28s;
}
.value-card:hover > span, .value-card.active > span { opacity: 1; transform: none; }

/* ─── FEATURE SECTION ─── */
.feature-section {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: center; padding: 56px 0 152px;
}

.feature-portrait {
  height: 534px; border-radius: 28px; overflow: hidden; position: relative;
  box-shadow: 0 28px 56px rgba(76,48,58,0.14), 18px 18px 0 #f2e2e5;
}
.feature-portrait img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
  transition: transform 0.8s ease;
}
.feature-portrait:hover img { transform: scale(1.04); }

.portrait-label {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 26px;
  background: linear-gradient(transparent, rgba(20,12,16,0.82)); color: white;
  display: flex; gap: 16px; align-items: flex-end;
}
.portrait-label span { font-size: 10px; color: var(--butter); font-family: monospace; }
.portrait-label b { font-size: 18px; line-height: 1.45; letter-spacing: -0.04em; }

.feature-copy h2 { font-size: clamp(42px, 4.2vw, 60px); margin-bottom: 32px; }
.feature-copy h2 span { font-family: "Noto Serif SC", serif; color: var(--rose); font-weight: 700; }

.feature-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.feature-tabs button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(26,19,24,0.05); color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  transition: all 0.22s;
}
.feature-tabs button i { font-style: normal; display: inline-flex; align-items: center; }
.feature-tabs button:hover { background: rgba(26,19,24,0.09); }
.feature-tabs button.selected { background: var(--ink); color: white; }

.feature-detail {
  border-radius: 18px; padding: 32px;
  background: linear-gradient(130deg, rgba(255,255,255,0.95), color-mix(in srgb, var(--feature), white 68%));
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 14px 32px rgba(47,33,39,0.06), inset 0 1px rgba(255,255,255,0.9);
  animation: feature-arrive 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes feature-arrive {
  from { opacity: 0.5; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.detail-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.06);
  display: grid; place-items: center; color: var(--rose); margin-bottom: 18px;
}
.feature-detail h3 {
  font-size: 21px; font-weight: 700; letter-spacing: -0.05em;
  color: var(--ink); margin: 0 0 10px;
}
.feature-detail p { font-size: 14px; line-height: 1.82; color: var(--ink-2); margin: 0 0 18px; }
.feature-detail > button { font-size: 12px; font-weight: 700; color: var(--rose); transition: opacity 0.2s; }
.feature-detail > button:hover { opacity: 0.7; }
.feature-detail > button b { margin-left: 5px; }

/* ─── HOW IT WORKS ─── */
.how-section {
  padding: 96px 60px;
  background: rgba(255,255,255,0.76);
  border: 1px solid rgba(26,19,24,0.05);
  border-radius: 32px;
  box-shadow: 0 20px 52px rgba(38,27,31,0.04), inset 0 1px rgba(255,255,255,0.95);
  margin-bottom: 130px;
}

.how-heading {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: end; gap: 60px; margin-bottom: 72px;
}
.how-section h2 { font-size: clamp(40px, 4.2vw, 58px); margin: 0; }

.steps { display: flex; align-items: center; justify-content: space-between; }

.step {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center; flex: 1; position: relative;
}
.step i { font-style: normal; font-family: monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink-3); }
.step span {
  display: grid; place-items: center; width: 68px; height: 68px;
  border-radius: 50%; color: var(--ink-2);
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.step:nth-child(1) span { background: #fff8e0; border: 1px solid rgba(245,200,58,0.25); }
.step:nth-child(2) span { background: #fff0f3; border: 1px solid rgba(232,83,106,0.2); }
.step:nth-child(3) span { background: #eef9f4; border: 1px solid rgba(109,197,164,0.25); }
.step:nth-child(4) span { background: #f1eeff; border: 1px solid rgba(155,135,228,0.25); }
.step:nth-child(5) span { background: #fffae6; border: 1px solid rgba(245,200,58,0.2); }
.step:hover span {
  background: var(--ink); color: white; border-color: transparent;
  transform: translateY(-7px);
  box-shadow: 0 14px 30px rgba(26,19,24,0.2);
}
.step b { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.step em {
  position: absolute; left: calc(100% - 14px); top: 48px;
  font-style: normal; color: rgba(26,19,24,0.18); font-size: 18px; pointer-events: none;
}

.how-caption {
  text-align: center; color: var(--ink-3); font-size: 15px;
  line-height: 1.9; margin: 56px 0 0;
}

/* ─── SAFETY ─── */
.safety-section {
  background: linear-gradient(130deg, #f5f0ff, #f9f6ff);
  border-top: 1px solid rgba(103,77,154,0.06);
  border-bottom: 1px solid rgba(103,77,154,0.06);
  position: relative; overflow: hidden;
}
.safety-section::before {
  content: ""; position: absolute;
  width: 700px; height: 700px; border-radius: 50%;
  right: -280px; top: -340px;
  background: radial-gradient(circle, rgba(155,135,228,0.2), transparent 65%);
}
.safety-section::after {
  content: ""; position: absolute;
  width: 480px; height: 480px; border-radius: 50%;
  left: -240px; bottom: -260px;
  background: radial-gradient(circle, rgba(245,200,58,0.14), transparent 68%);
}

.safety-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 120px; padding: 148px 0;
  width: min(1140px, calc(100% - 80px)); margin-inline: auto;
}

.safety-copy h2 {
  font-family: "Noto Sans SC", sans-serif;
  font-size: clamp(44px, 4.4vw, 64px); font-weight: 900;
  letter-spacing: -0.08em; line-height: 1.08; color: #3a2e4a; margin: 0 0 20px;
}
.safety-copy h2 em { font-style: normal; color: #8d70d8; }
.eyebrow.light { color: #8d70d8; }
.safety-copy > p:not(.eyebrow) { font-size: 15px; font-weight: 400; line-height: 1.9; color: #6b6074; margin: 24px 0; }

.light-btn {
  padding: 13px 20px; border-radius: 999px;
  background: #7d65c8; color: white;
  font-size: 13px; font-weight: 600;
  transition: background 0.22s, transform 0.22s;
}
.light-btn:hover { background: #6a52b2; transform: translateY(-2px); }
.light-btn span { margin-left: 8px; }

.safety-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }

.safety-list button {
  position: relative; padding: 20px 40px 20px 20px;
  border-radius: 18px; border: 1.5px solid transparent;
  background: rgba(255,255,255,0.62);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: flex-start; gap: 14px;
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 16px rgba(92,66,137,0.06);
}
.safety-list button > span {
  position: absolute; right: 14px; top: 14px;
  font-size: 18px; line-height: 1; color: #8d70d8;
}
.safety-list button:hover { background: rgba(255,255,255,0.85); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(92,66,137,0.12); }
.safety-list button.active {
  background: white; border-color: rgba(125,101,200,0.25);
  transform: translateY(-4px); box-shadow: 0 20px 36px rgba(92,66,137,0.16);
}
.safety-list button.active i { background: #7d65c8; color: white; }
.safety-list i {
  font-style: normal; flex-shrink: 0; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: #e6dcff; color: #664bb0; margin-top: 1px;
  transition: all 0.28s;
}
.safety-list h3 { font-size: 14px; font-weight: 700; color: #3a2e4a; margin: 0 0 5px; }
.safety-list p { font-size: 11px; line-height: 1.68; color: #766b80; margin: 0; }

.safety-active {
  grid-column: 1 / -1; margin-top: 4px; padding: 14px 16px;
  border-radius: 14px; background: rgba(255,255,255,0.55);
  color: #7c7089; font-size: 12px;
}
.safety-active b { color: #514563; margin-left: 4px; font-weight: 700; }

/* ─── DOWNLOAD ─── */
.download {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 100px; padding: 148px 0;
}

.download-art { height: 428px; position: relative; }

.art-circle {
  width: 365px; height: 365px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff8da, #f9d45c 60%, #e8b830);
  position: absolute; left: 32px; top: 22px;
  box-shadow: inset -20px -22px 44px rgba(188,142,32,0.12), 0 24px 44px rgba(240,190,70,0.22);
}

.phone-small {
  position: absolute; width: 212px; height: 384px;
  border: 4px solid #2d292e; border-radius: 36px;
  background: #2d292e; overflow: hidden;
  left: 104px; top: 18px; rotate: -6deg;
  box-shadow: 0 30px 56px rgba(75,37,46,0.24), 0 0 0 1px rgba(91,50,59,0.18);
}
.download-phone {
  height: 100%; background: var(--rose); color: white;
  padding: 32px 22px; box-sizing: border-box;
}
.download-phone .mark { background: white; }
.download-phone .mark i { background: var(--rose); }
.download-phone p {
  font-size: 26px; font-weight: 700; line-height: 1.4;
  letter-spacing: -0.05em; margin-top: 36px;
}
.pink-blob {
  width: 100px; height: 100px; border-radius: 50% 40% 60% 45%;
  background: #b9ebd8; color: #4b9b85;
  display: grid; place-items: center; font-size: 44px; margin: 24px auto;
}
.download-phone small { font-size: 10px; display: block; text-align: center; opacity: 0.8; }
.tiny-star { position: absolute; left: 20px; bottom: 12px; color: var(--rose); font-size: 32px; }

.download-copy h2 { font-size: clamp(46px, 4.4vw, 64px); letter-spacing: -0.08em; line-height: 1.08; margin-bottom: 20px; }
.download-copy h2 em { font-style: normal; color: var(--rose); font-family: "Noto Serif SC", serif; }
.download-copy > p:not(.eyebrow) { font-size: 16px; font-weight: 400; line-height: 1.88; color: var(--ink-2); margin: 0 0 36px; }
.download-buttons { display: flex; gap: 12px; margin-bottom: 16px; }

.store-btn {
  background: var(--ink); color: white; border-radius: 14px;
  padding: 10px 18px; display: flex; gap: 10px; align-items: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.store-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(26,19,24,0.24); }
.store-btn > svg { flex-shrink: 0; opacity: 0.9; }
.store-btn span { font-size: 9px; line-height: 1.3; }
.store-btn strong { font-size: 14px; font-weight: 700; }
.download-copy > small { font-size: 11px; color: var(--ink-3); }

/* ─── FOOTER ─── */
footer {
  background: #f5eced; border-top: 1px solid rgba(26,19,24,0.07);
  padding: 54px max(40px, calc((100% - 1140px) / 2));
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap; color: var(--ink-2);
}
.footer-brand { display: flex; align-items: center; gap: 8px; color: var(--ink) !important; }
.footer-brand .mark { transform: scale(0.78) rotate(-12deg); }
.footer-brand strong { font-size: 18px; }
.footer-brand span { font-size: 9px; letter-spacing: 1.5px; color: var(--ink-3); }
footer p { font-size: 13px; margin: 0; }
.footer-links { display: flex; gap: 18px; margin-left: auto; }
footer a { font-size: 12px; color: var(--ink-2); text-decoration: none; transition: color 0.2s; }
footer a:hover { color: var(--rose); }
footer small { font-size: 10px; color: var(--ink-3); width: 100%; }

/* ─── NAV Scrolled interaction ─── */
.nav-wrap.is-scrolled .nav { box-shadow: 0 12px 36px rgba(80,41,49,0.09), inset 0 1px rgba(255,255,255,0.9); }

/* ─── RESPONSIVE: Tablet ─── */
@media (max-width: 900px) {
  .section { width: min(100% - 48px, 680px); }
  .safety-inner { width: min(100% - 48px, 680px); }

  .nav { border-radius: 18px; height: 56px; }
  .nav-links, .nav-download { display: none; }
  .menu-button { display: block; }
  .nav-links.open {
    position: absolute; left: 0; right: 0; top: 72px;
    background: rgba(249,246,243,0.96); backdrop-filter: blur(20px);
    display: flex; flex-direction: column; gap: 0;
    padding: 12px 20px; border-radius: 20px;
    box-shadow: 0 18px 40px rgba(80,50,60,0.14); border: 1px solid rgba(255,255,255,0.8);
  }
  .nav-links.open button { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .nav-links.open button:last-child { border: 0; }

  .hero { grid-template-columns: 1fr; gap: 56px; min-height: 0; padding: 48px 0 40px; }
  .hero-visual { height: 500px; }
  .hero h1 { font-size: 54px; }
  .sun-orb { width: 360px; height: 360px; right: 0; top: 60px; }
  .phone-stage { right: calc(50% - 134px); }
  .floating-members { left: 8px; bottom: 64px; }

  .scene-reel { padding: 90px 24px 80px; }
  .scene-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .scene-grid { grid-template-columns: repeat(4, minmax(155px, 1fr)) !important; height: 370px; overflow-x: auto; margin-right: -24px; padding-right: 24px; transition: none; }
  .scene-card { min-width: 155px; }

  .section-heading { grid-template-columns: 1fr; gap: 16px; margin-bottom: 44px; }
  .values-section { padding: 100px 0 90px; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .value-card { min-height: 215px; padding: 26px 22px 30px; }

  .feature-section { grid-template-columns: 1fr; gap: 52px; padding: 60px 0 100px; }
  .feature-portrait { height: 390px; box-shadow: 0 20px 40px rgba(76,48,58,0.12), 12px 12px 0 #f2e2e5; }

  .how-section { padding: 60px 32px; margin-bottom: 80px; border-radius: 26px; }
  .how-heading { grid-template-columns: 1fr; gap: 12px; margin-bottom: 52px; }
  .steps { gap: 4px; }
  .step span { width: 54px; height: 54px; }
  .step b { font-size: 11px; }
  .step em { display: none; }

  .safety-inner { grid-template-columns: 1fr; gap: 56px; padding: 96px 0; }
  .safety-copy h2 { font-size: 48px; }

  .download { grid-template-columns: 1fr; gap: 56px; padding: 100px 0; }
  .download-art { height: 350px; }
  .art-circle { width: 295px; height: 295px; }
  .phone-small { left: 78px; width: 188px; height: 338px; }
  .download-copy h2 { font-size: 48px; }

  footer { padding: 44px 24px; }
  .footer-links { width: 100%; margin: 0; flex-wrap: wrap; gap: 14px; }
}

/* ─── RESPONSIVE: Mobile ─── */
@media (max-width: 480px) {
  .section { width: min(100% - 36px, 480px); }
  .hero h1 { font-size: 46px; letter-spacing: -0.065em; }
  .hero-description { font-size: 15px; }
  .hero-visual { transform: scale(0.92); transform-origin: top center; margin-bottom: -30px; }
  .paper-note { display: none; }
  .mood-picker button { padding: 7px 11px; font-size: 11px; }

  .values-grid { grid-template-columns: 1fr; gap: 10px; }
  .value-card { min-height: 195px; border-radius: 18px; padding: 24px 20px 28px; }
  .value-card h3 { margin-top: 48px; }

  .feature-tabs button { padding: 8px 10px; font-size: 11px; }
  .feature-portrait { height: 340px; }

  .how-section { border-radius: 22px; padding: 50px 22px; }

  .safety-inner { width: min(100% - 36px, 480px); }
  .safety-copy h2, .download-copy h2 { font-size: 42px; }
  .safety-list { grid-template-columns: 1fr; }

  .download-buttons { flex-direction: column; }
}

/* ─── Accessibility & Motion ─── */
button:focus-visible, a:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ─── Production landing refinements ─── */
.nav-wrap .nav { width: min(1140px, calc(100% - 80px)); }
.nav-links a { color: inherit; position: relative; }
.nav-links a::after { content: ""; position: absolute; bottom: 0; left: 0; right: 100%; height: 1px; background: var(--rose); transition: right .28s ease; }
.nav-links a:hover::after { right: 0; }
.hero-visual { --light-x: 56%; --light-y: 45%; }
.hero-visual::after { content: ""; position: absolute; inset: 10% 8%; pointer-events: none; background: radial-gradient(circle at var(--light-x) var(--light-y), rgba(255,255,255,.35), transparent 22%); mix-blend-mode: screen; transition: background-position .18s ease; }
.primary-btn, .nav-download, .light-btn, .store-btn { text-decoration: none; }
.primary-btn:hover, .nav-download:hover, .store-btn:hover { filter: saturate(1.04); }
.scene-card, .value-card, .safety-list button, .store-btn { cursor: pointer; }
.scene-status button { color: inherit; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; max-width: calc(100% - 32px); padding: 13px 18px; border-radius: 999px; color: #fff; background: rgba(36,24,28,.92); box-shadow: 0 14px 35px rgba(36,24,28,.2); font-size: 13px; opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .24s ease, transform .24s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-brand .brand { gap: 8px; }
.footer-brand .brand strong { font-size: 20px; letter-spacing: -.05em; }
.footer-brand .brand > span:last-child { font-size: 9px; letter-spacing: 2px; color: var(--ink-3); }
.footer-brand p { margin: 0; color: var(--ink-3); font-size: 12px; }
footer .footer-links a { white-space: nowrap; }

/* ─── Legal and support pages ─── */
.document-page { min-height: 100vh; background: var(--ground); }
.document-page .site-header { width: min(1140px, calc(100% - 80px)); min-height: 98px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.document-page .brand-logo { width: 54px; height: 54px; object-fit: contain; }
.document-page .site-header nav { display: flex; align-items: center; gap: 24px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.document-page .site-header nav a { transition: color .2s ease; }
.document-page .site-header nav a:hover { color: var(--rose); }
.document-shell { width: min(820px, calc(100% - 80px)); margin: 60px auto 100px; }
.legal-document { padding: clamp(28px, 6vw, 68px); border: 1px solid rgba(36,24,28,.08); border-radius: 32px; background: rgba(255,255,255,.78); box-shadow: 0 24px 70px rgba(80,41,49,.08); }
.legal-document .section-label { margin: 0 0 18px; color: var(--rose-d); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.legal-document h1 { margin: 0; color: var(--ink); font-size: clamp(40px, 7vw, 64px); line-height: 1.14; letter-spacing: -.06em; }
.document-meta { margin: 18px 0 42px; color: var(--ink-3); font-size: 13px; }
.legal-document h2 { margin: 44px 0 14px; color: var(--ink); font-size: 23px; letter-spacing: -.025em; }
.legal-document h3 { margin: 30px 0 10px; color: var(--ink); font-size: 18px; }
.legal-document p, .legal-document li { color: #6f6066; line-height: 1.95; }
.legal-document ul, .legal-document ol { padding-left: 1.5em; }
.legal-document code { padding: .12em .38em; border-radius: 6px; background: #fff0f3; color: var(--rose-d); }
.table-wrap { margin: 22px 0; overflow-x: auto; border: 1px solid rgba(36,24,28,.09); border-radius: 16px; }
.legal-document table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; }
.legal-document th, .legal-document td { padding: 12px 14px; border-bottom: 1px solid rgba(36,24,28,.08); text-align: left; vertical-align: top; line-height: 1.7; }
.legal-document th { background: #fff0f3; color: #7f3e4c; }
.legal-document tr:last-child td { border-bottom: 0; }
.document-footer { display: block; width: min(820px, calc(100% - 80px)); margin: 0 auto; padding: 0 0 52px; text-align: center; }
.document-footer .footer-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.document-footer .footer-links a { color: var(--ink-2); font-size: 12px; transition: color .2s ease; }
.document-footer .footer-links a:hover { color: var(--rose); }
.document-footer p { color: var(--ink-3); font-size: 11px; }
.policy-notice, .draft-notice { margin-bottom: 38px; padding: 17px 20px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(232,93,122,.18); border-radius: 16px; color: #75434e; background: #fff0f3; font-size: 14px; }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.support-grid section { padding: 20px; border-radius: 18px; background: #fff5f7; border: 1px solid rgba(232,93,122,.10); }
.support-grid h2 { margin: 0 0 8px; font-size: 18px; }
.support-grid p { margin: 6px 0; }
.support-grid a { color: var(--rose-d); font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .nav-wrap .nav { width: min(100% - 48px, 680px); }
  .document-page .site-header { width: min(100% - 48px, 680px); }
  .document-shell, .document-footer { width: min(100% - 48px, 680px); }
}
@media (max-width: 560px) {
  .nav-wrap .nav { width: min(100% - 36px, 480px); }
  .document-page .site-header { width: min(100% - 36px, 480px); min-height: 76px; }
  .document-page .brand-logo { width: 48px; height: 48px; }
  .document-page .site-header nav { gap: 12px; font-size: 12px; }
  .document-shell { width: min(100% - 24px, 480px); margin-top: 42px; }
  .document-footer { width: min(100% - 24px, 480px); }
  .legal-document { padding: 28px 22px; border-radius: 24px; }
  .legal-document h1 { font-size: 40px; }
  .support-grid { grid-template-columns: 1fr; }
  .policy-notice, .draft-notice { align-items: flex-start; flex-direction: column; }
}


/* ─── Wanme asset and icon polish ─── */
.icon { width: 1.15em; height: 1.15em; display: inline-block; flex: 0 0 auto; fill: none; vertical-align: -0.16em; }
.icon-inline { width: 1em; height: 1em; vertical-align: -0.12em; }
.brand-logo { object-fit: contain; object-position: center; }
.brand-logo-main { width: 42px; height: 36px; margin-left: -2px; }
.brand-logo-footer { width: 42px; height: 36px; margin-left: -2px; }
.brand-word { margin-left: -1px; }
.menu-button .icon { width: 23px; height: 23px; }
.flower .icon { width: 26px; height: 26px; }
.paper-note .icon { width: 18px; height: 18px; }

/* Actual product screens, not a hand-built approximation. */
.screenshot-content { background: #fff6f8; }
.app-screenshot-stack { position: absolute; inset: 0; overflow: hidden; background: #fff6f8; }
.app-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.01); transition: opacity .35s ease, transform .45s ease; }
.app-screen.active { opacity: 1; transform: scale(1); }
.app-preview-caption { position: absolute; z-index: 3; top: 42px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; opacity: .0; transition: opacity .25s ease; }
.phone-hero:hover .app-preview-caption, .phone-hero:focus-within .app-preview-caption { opacity: 1; }
.app-preview-caption span, .app-preview-caption b { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.78); color: #5e4c53; font-size: 8px; font-weight: 700; backdrop-filter: blur(10px); }
.app-preview-caption b { color: var(--rose-d); }
.app-preview-tabs { position: absolute; z-index: 4; left: 3%; right: 3%; bottom: 8px; height: 58px; display: flex; align-items: center; justify-content: space-around; border-radius: 18px; background: transparent; padding: 2px 4px 1px; }
.app-preview-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 48px; height: 54px; color: transparent; border-radius: 16px; transition: background .2s ease, transform .2s ease; }
.app-preview-tabs button:hover { transform: translateY(-1px); }
.app-preview-tabs button.active { background: rgba(255,255,255,.08); }
.app-preview-tabs button:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.app-preview-tabs .icon { width: 17px; height: 17px; }
.app-preview-tabs small { font-size: 7px; font-weight: 700; color: transparent; }
.floating-members .icon { width: 17px; height: 17px; }
.feature-tabs i, .value-top i, .step > span, .safety-list > button > i, .detail-icon, .store-icon { display: inline-grid; place-items: center; }
.feature-tabs i .icon, .value-top i .icon, .step > span .icon, .safety-list > button > i .icon { width: 19px; height: 19px; }
.detail-icon .icon { width: 25px; height: 25px; }
.step > em .icon { width: 20px; height: 20px; }
.store-icon .icon { width: 25px; height: 25px; }
.store-icon.android .icon { width: 27px; height: 27px; }
.download-logo { width: 96px; height: 80px; object-fit: contain; margin: 28px auto 16px; filter: drop-shadow(0 10px 12px rgba(232,93,122,.18)); }
.pink-blob .icon { width: 35px; height: 35px; }

/* Brand photography is served locally and keeps the editorial crop consistent. */
.scene-card img, .feature-portrait img { filter: saturate(.84) contrast(1.04); }

/* ─── Editorial direction pass: quieter controls, richer brand moments ─── */
.nav-mark, .note-mark, .scene-open, .control-index, .step-state, .how-meta span, .download-brand-lockup span, .download-poster-copy > span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em;
  font-size: 9px;
  font-weight: 700;
}
.nav-mark { opacity: .72; }
.primary-btn .cta-index, .text-btn .cta-mark { display: inline-flex; align-items: center; justify-content: center; }
.primary-btn .cta-index { min-width: 23px; height: 23px; margin-left: 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-size: 9px; letter-spacing: .02em; }
.text-btn .cta-mark { margin-left: 8px; color: var(--rose); font-size: 10px; transform: translateY(-1px); }
.paper-note { display: grid; gap: 8px; }
.paper-note .note-mark { display: inline-flex; align-items: center; gap: 7px; color: var(--rose-d); }
.paper-note .note-mark::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .65; }
.scene-card > .scene-open {
  position: absolute; right: 18px; top: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,.86);
  opacity: .78; transition: opacity .24s ease, letter-spacing .24s ease;
}
.scene-card > .scene-open::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.scene-card:hover > .scene-open, .scene-card.active > .scene-open { opacity: 1; letter-spacing: .2em; }
.scene-status #next-scene { display: inline-flex; align-items: center; gap: 9px; }
.control-index { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-size: 8px; letter-spacing: .04em; }
.link-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border: 1px solid currentColor; border-radius: 50%; font-size: 15px; line-height: 1; font-weight: 400; vertical-align: -3px; transition: transform .22s ease, background .22s ease, color .22s ease; }
button:hover .link-mark, a:hover .link-mark { transform: rotate(90deg); background: currentColor; color: white; }

/* Reconstructed journey section: editorial timeline instead of five floating circles. */
.how-section {
  display: grid;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr);
  gap: clamp(50px, 8vw, 120px);
  align-items: start;
  padding: clamp(66px, 8vw, 102px) clamp(28px, 5vw, 68px);
  background: linear-gradient(135deg, rgba(255,251,242,.96), rgba(255,241,242,.92));
  border: 1px solid rgba(232,93,122,.12);
  border-radius: 24px;\r\n  box-shadow: 0 24px 68px rgba(104,56,66,.07), inset 0 1px rgba(255,255,255,.95);
  margin-bottom: 130px;
  overflow: hidden;
  position: relative;
}
.how-section::before { content: ""; position: absolute; width: 360px; height: 360px; right: -170px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,177,151,.28), transparent 68%); pointer-events: none; }
.how-intro, .how-section .steps, .how-caption { position: relative; z-index: 1; }
.how-intro { min-height: 100%; display: flex; flex-direction: column; }
.how-intro .eyebrow { margin-bottom: 30px; }
.how-title-row { display: grid; gap: 28px; }
.how-section h2 { font-size: clamp(44px, 5vw, 68px); line-height: 1.06; letter-spacing: -.09em; margin: 0; }
.how-section h2 em { display: inline-block; font-style: normal; color: var(--rose); font-family: "Noto Serif SC", serif; font-weight: 600; }
.how-lede { max-width: 220px; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.9; }
.how-meta { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 64px; color: var(--ink-3); }
.how-meta span { color: var(--rose-d); }
.how-meta b { font-size: 11px; font-weight: 600; }
.how-section .steps { display: grid; gap: 0; align-self: stretch; position: relative; }
.how-section .steps::before { content: ""; position: absolute; left: 53px; top: 34px; bottom: 34px; width: 1px; background: linear-gradient(to bottom, rgba(232,93,122,.15), rgba(232,93,122,.45), rgba(232,93,122,.12)); }
.how-section .step { min-height: 104px; display: grid; grid-template-columns: 44px 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 12px 14px 0; text-align: left; border-bottom: 1px solid rgba(36,24,28,.08); position: relative; }
.how-section .step:last-child { border-bottom: 0; }
.how-section .step::after { content: ""; position: absolute; inset: 6px -12px 6px -16px; z-index: -1; border-radius: 16px; background: rgba(255,255,255,0); transition: background .24s ease, transform .24s ease; }
.how-section .step:hover::after, .how-section .step:focus-within::after { background: rgba(255,255,255,.74); transform: translateX(4px); }
.step-index { color: var(--ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .08em; }
.step-marker { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(232,93,122,.24); border-radius: 50%; background: rgba(255,255,255,.7); color: var(--rose-d); transition: background .24s ease, color .24s ease, transform .24s ease, border-color .24s ease; }
.step-marker .icon { width: 18px; height: 18px; }
.how-section .step:hover .step-marker, .how-section .step:focus-within .step-marker { background: var(--rose); border-color: var(--rose); color: white; transform: scale(1.08); }
.step-copy h3 { margin: 0 0 5px; color: var(--ink); font-size: 17px; letter-spacing: -.04em; }
.step-copy p { margin: 0; color: var(--ink-3); font-size: 12px; line-height: 1.6; }
.step-state { color: var(--rose-d); opacity: .64; font-size: 8px; }
.how-caption { grid-column: 1 / -1; margin: 42px 0 0; padding-top: 22px; border-top: 1px solid rgba(36,24,28,.1); text-align: left; color: var(--ink-3); font-size: 13px; line-height: 1.8; }

/* Brand splash phone: the lower device is a tactile brand poster, not a fake app screen. */
.download-phone { position: relative; height: 100%; overflow: hidden; padding: 26px 18px 20px; color: white; background: linear-gradient(145deg, #ff7d71 0%, #ef5d78 43%, #c9457e 100%); }
.download-phone::before { content: ""; position: absolute; width: 230px; height: 230px; top: 54px; right: -100px; border-radius: 50%; background: radial-gradient(circle, rgba(255,246,200,.52), rgba(255,246,200,0) 68%); }
.download-phone::after { content: ""; position: absolute; left: -70px; bottom: -60px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 15px rgba(255,255,255,.06), 0 0 0 30px rgba(255,255,255,.04); }
.download-brand-lockup, .download-poster-copy, .download-phone > small, .download-poster-orbit { position: relative; z-index: 1; }
.download-brand-lockup { display: grid; justify-items: center; gap: 5px; }
.download-logo { width: 78px; height: 68px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 8px 12px rgba(116,32,56,.24)); }
.download-brand-lockup span { color: rgba(255,255,255,.78); font-size: 7px; letter-spacing: .14em; }
.download-poster-copy { margin-top: 46px; }
.download-poster-copy > span { color: rgba(255,255,255,.7); font-size: 7px; }
.download-poster-copy p { margin: 12px 0 0; font-size: 25px; font-weight: 700; line-height: 1.33; letter-spacing: -.08em; }
.download-poster-copy b { color: #fff4ce; font-weight: 700; }
.download-poster-orbit { width: 104px; height: 104px; margin: 24px auto 20px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transform: rotate(-18deg); }
.download-poster-orbit::before, .download-poster-orbit::after { content: ""; position: absolute; border-radius: 50%; background: #fff2c5; }
.download-poster-orbit::before { width: 8px; height: 8px; top: 8px; left: 13px; }
.download-poster-orbit::after { width: 5px; height: 5px; right: 5px; bottom: 20px; background: #fff; }
.download-poster-orbit i { position: absolute; width: 42px; height: 42px; left: 30px; top: 30px; border-radius: 50%; background: rgba(255,255,255,.14); }
.download-poster-orbit b { position: absolute; width: 11px; height: 11px; right: 16px; top: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.75); }
.download-phone > small { display: block; text-align: center; color: rgba(255,255,255,.72); font-size: 8px; letter-spacing: .16em; }

@media (max-width: 900px) {
  .how-section { grid-template-columns: 1fr; gap: 48px; padding: 58px 32px; }
  .how-intro { min-height: auto; }
  .how-title-row { grid-template-columns: minmax(0, 1fr) minmax(150px, .5fr); align-items: end; }
  .how-meta { margin-top: 38px; padding-top: 0; }
  .how-caption { grid-column: auto; }
}
@media (max-width: 560px) {
  .nav-mark { display: none; }
  .primary-btn .cta-index { min-width: 21px; height: 21px; }
  .scene-card > .scene-open { right: 13px; top: 14px; }
  .how-section { border-radius: 24px; padding: 48px 22px; margin-bottom: 84px; }
  .how-title-row { grid-template-columns: 1fr; gap: 16px; }
  .how-section h2 { font-size: 46px; }
  .how-lede { max-width: 260px; }
  .how-meta { margin-top: 28px; }
  .how-section .steps::before { left: 43px; }
  .how-section .step { grid-template-columns: 30px 42px minmax(0, 1fr); gap: 12px; min-height: 94px; padding-right: 0; }
  .step-state { display: none; }
  .step-marker { width: 38px; height: 38px; }
  .step-copy h3 { font-size: 16px; }
  .step-copy p { font-size: 11px; }
  .how-caption { margin-top: 28px; padding-top: 18px; font-size: 12px; }
  .download-phone { padding-inline: 15px; }
  .download-poster-copy { margin-top: 34px; }
  .download-poster-copy p { font-size: 22px; }
  .download-poster-orbit { width: 90px; height: 90px; margin-top: 20px; }
  .download-poster-orbit i { left: 25px; top: 25px; }
}

/* Keep the desktop journey compact: the timeline sets the row height. */
@media (min-width: 901px) {
  .how-intro { min-height: 0; align-self: stretch; }
}

@media (min-width: 901px) {
  .how-section { row-gap: 0; }
}

/* Frontend Design calibration: editorial city-board, not a generic rounded-card system. */
:root {
  --ground: #fff8f6;
  --ink: #21181c;
  --ink-2: #68555b;
  --ink-3: #9e8d92;
  --rose: #ee5b78;
  --rose-d: #c84562;
  --hairline: rgba(33,24,28,.12);
}
.nav { border-radius: 14px; }
.hero h1, .download-copy h2, .how-section h2, .safety-copy h2, .scene-heading h2, .section-heading h2, .feature-copy h2 { text-wrap: balance; }
.hero h1 em, .download-copy h2 em, .how-section h2 em, .safety-copy h2 em, .feature-copy h2 span { letter-spacing: -.075em; }
.scene-reel { border-radius: 20px; }
.scene-card { border-radius: 16px; }
.value-card { border-radius: 16px; }
.feature-portrait { border-radius: 18px; }
.feature-detail { border-radius: 18px; }
.safety-list button { border-radius: 14px; }
.store-btn { border-radius: 12px; }
.download-art .art-circle { background: radial-gradient(circle at 38% 30%, #fff3c7, #f7cb4d 60%, #e9ab31); }

/* ─── Final device pass: a restrained, hardware-first iPhone presentation ─── */
.phone-stage {
  width: 318px;
  height: 664px;
  right: 72px;
  top: -10px;
  transform: rotate(2.2deg);
  filter: drop-shadow(0 34px 32px rgba(47, 34, 40, 0.16));
}
.hero-visual:hover .phone-stage { transform: rotate(.35deg) translateY(-8px); }
.phone-hero {
  width: 304px;
  height: 660px;
  border: 0;
  border-radius: 49px;
  padding: 4px;
  background: linear-gradient(142deg, #5d5960 0%, #29262c 10%, #111014 56%, #3c3840 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    inset 0 0 0 3px rgba(8,7,10,.72),
    0 0 0 1px rgba(20,16,22,.4),
    0 22px 28px rgba(46,30,38,.11);
}
.phone-hero::before {
  inset: 1px;
  border-radius: 48px;
  padding: 1px;
  background: linear-gradient(118deg, rgba(255,255,255,.7), rgba(255,255,255,.08) 18%, transparent 42%, rgba(0,0,0,.34) 78%, rgba(255,255,255,.3));
}
.phone-hero::after {
  content: "";
  display: block;
  position: absolute;
  inset: 7px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 43px;
  pointer-events: none;
}
.phone-hero .screen-glass {
  inset: 4px;
  z-index: 5;
  border-radius: 45px;
  background: linear-gradient(125deg, rgba(255,255,255,.12), transparent 16%, transparent 70%, rgba(20,12,16,.08));
}
.phone-hero .screenshot-content {
  position: absolute;
  inset: 4px;
  z-index: 2;
  width: auto;
  height: auto;
  border-radius: 45px;
  background: #fff6f8;
}
.phone-hero .app-screenshot-stack { border-radius: 45px; }
.phone-hero .dynamic-island {
  top: 12px;
  width: 96px;
  height: 27px;
  border-radius: 18px;
  background: linear-gradient(180deg, #09090b, #17161a);
  box-shadow: 0 1px 2px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.06);
}
.phone-hero .dynamic-island i { width: 7px; height: 7px; }
.phone-hero .home-indicator { bottom: 10px; width: 92px; height: 3px; background: rgba(25,20,23,.72); }
.iphone-action, .iphone-volume, .iphone-side-button {
  z-index: 0;
  width: 3px;
  background: linear-gradient(90deg, #1b191e, #77727b 44%, #28252b);
  box-shadow: 0 0 0 1px rgba(13,11,15,.42);
}
.iphone-action { left: -3px; top: 105px; height: 26px; border-radius: 4px 0 0 4px; }
.iphone-volume-one { left: -3px; top: 151px; height: 52px; border-radius: 4px 0 0 4px; }
.iphone-volume-two { left: -3px; top: 214px; height: 52px; border-radius: 4px 0 0 4px; }
.iphone-side-button {
  position: absolute;
  display: block;
  right: -3px;
  top: 176px;
  height: 86px;
  border-radius: 0 4px 4px 0;
}

/* The screenshot already contains the finished in-app navigation; keep the
   demo hotspots quiet so the product UI, not the marketing overlay, leads. */
.app-preview-caption { display: none; }
.app-preview-tabs { left: 4%; right: 4%; bottom: 8px; height: 62px; }
.app-preview-tabs button { height: 58px; }
.app-preview-tabs button.active { background: rgba(255,255,255,.06); }

/* ─── Download device: white light, soft color, logo as the hero ─── */
.download-phone {
  color: #302329;
  background:
    radial-gradient(ellipse 80% 40% at 12% 7%, rgba(255, 224, 213, .74), transparent 66%),
    radial-gradient(ellipse 72% 44% at 94% 30%, rgba(220, 235, 255, .72), transparent 68%),
    radial-gradient(ellipse 70% 42% at 55% 100%, rgba(255, 239, 193, .62), transparent 70%),
    linear-gradient(155deg, #ffffff 0%, #fffdfb 48%, #f4f0ef 100%);
}
.download-phone::before {
  width: 230px;
  height: 230px;
  top: 36px;
  right: -116px;
  background: radial-gradient(circle, rgba(255,255,255,.94), rgba(255,255,255,0) 68%);
  filter: blur(2px);
}
.download-phone::after {
  left: -72px;
  bottom: -62px;
  width: 206px;
  height: 206px;
  border-color: rgba(232,93,122,.20);
  box-shadow: 0 0 0 15px rgba(232,93,122,.05), 0 0 0 30px rgba(255,205,116,.06);
}
.download-logo {
  width: 92px;
  height: 82px;
  margin: 22px auto 14px;
  filter: drop-shadow(0 10px 14px rgba(104,68,78,.15));
}
.download-brand-lockup span { color: rgba(48,35,41,.55); }
.download-poster-copy { margin-top: 38px; }
.download-poster-copy > span { color: rgba(48,35,41,.45); }
.download-poster-copy p { color: #302329; }
.download-poster-copy b { color: var(--rose-d); }
.download-poster-orbit { border-color: rgba(232,93,122,.26); }
.download-poster-orbit::before { background: #f2b8aa; }
.download-poster-orbit::after { background: #f3ca64; }
.download-poster-orbit i { background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(226,150,152,.14); }
.download-poster-orbit b { border-color: rgba(232,93,122,.46); }
.download-phone > small { color: rgba(48,35,41,.48); }

@media (max-width: 900px) {
  .phone-stage { right: calc(50% - 150px); top: -14px; }
}
@media (max-width: 480px) {
  .hero-visual { transform: scale(.82); transform-origin: top center; margin-bottom: -54px; }
  .phone-stage { right: calc(50% - 150px); }
}


/* ─── Interaction refinement: quiet by default, expressive on intent ─── */
/* The app artwork gets a real top safe-area so the hardware island never
   sits over the app title or search controls. */
.phone-hero .app-screenshot-stack {
  inset: 26px 0 0;
  border-radius: 0 0 45px 45px;
}
.phone-hero .app-screen {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.phone-hero .dynamic-island {
  width: 84px;
  height: 24px;
  top: 10px;
}
.phone-hero .dynamic-island i { width: 6px; height: 6px; }
.phone-hero .dynamic-island span { width: 9px; height: 9px; }

/* Two sparks now create a loose diagonal composition instead of a cluster. */
.flower {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  color: var(--ink);
  pointer-events: none;
  opacity: .74;
  transition: transform .55s cubic-bezier(.2,.75,.2,1), opacity .35s ease;
}
.flower-one {
  left: 42px;
  top: 86px;
  width: 24px;
  height: 24px;
}
.flower-two {
  left: auto;
  right: 34px;
  top: 420px;
  width: 14px;
  height: 14px;
  opacity: .38;
}
.flower-one .icon { width: 22px; height: 22px; }
.flower-two .icon { width: 13px; height: 13px; }
.hero-visual:hover .flower-one { transform: translate(-4px, -4px) rotate(-9deg); opacity: 1; }
.hero-visual:hover .flower-two { transform: translate(8px, -6px) rotate(18deg); opacity: .7; }

/* Equal-weight cards communicate no choice before the visitor makes one. */
.scene-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scene-card.active { transform: translateY(-4px); }
.feature-tabs button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
}
.feature-tabs button:hover { background: rgba(26,19,24,.06); border-color: rgba(26,19,24,.06); }
.value-card.active, .safety-list button.active { /* active is interaction-only; no card is selected at load */ }
.safety-active { color: rgba(255,255,255,.64); }

/* Scroll choreography: sections arrive like printed layers, while the hero
   phone gently floats through the transition. JS only adds these states when
   an element actually enters the viewport, so there is no fake default hover. */
html.js main > section[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  clip-path: inset(4% 0 0 round 0);
  transition: opacity .72s ease, transform .82s cubic-bezier(.2,.8,.2,1), clip-path .82s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform, clip-path;
}
html.js main > section[data-reveal].is-inview {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 round 0);
}
html.js main > section.hero[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
}
/* Section reveals stay clean: no persistent red guide line in the corner. */
html.js main > section[data-reveal] { position: relative; }
.scene-reel[data-reveal] { --scene-wash: 0; background: color-mix(in srgb, #fefcf9 calc(100% - var(--scene-wash) * 8%), #fff4ef); }
.feature-portrait img { translate: 0 calc((var(--scroll-progress, 0) - .5) * -18px); }
.phone-stage { translate: 0 calc(var(--hero-scroll, 0) * -10px); }

@media (max-width: 900px) {
  .flower-one { left: 16px; top: 112px; }
  .flower-two { left: auto; right: 12px; top: 438px; }
  .phone-hero .app-screenshot-stack { inset: 24px 0 0; }
}
@media (max-width: 480px) {
  .flower-one { left: 6px; top: 92px; }
  .flower-two { right: 4px; top: 372px; }
  html.js main > section[data-reveal] { transform: translateY(22px); }
}
@media (prefers-reduced-motion: reduce) {
  html.js main > section[data-reveal] { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ─── Download device: match the hero's real iPhone hardware language ─── */
.download-art { height: 492px; }
.phone-small {
  left: 94px;
  top: 14px;
  width: 220px;
  height: 450px;
  rotate: -5deg;
  overflow: visible;
  border: 0;
  border-radius: 46px;
  padding: 5px;
  box-sizing: border-box;
  background: linear-gradient(142deg, #626067 0%, #2d2a31 11%, #111014 56%, #49454d 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.44),
    inset 0 0 0 3px rgba(8,7,10,.72),
    0 28px 54px rgba(75,37,46,.2),
    0 0 0 1px rgba(20,16,22,.34);
  isolation: isolate;
}
.phone-small::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 1;
  border-radius: 45px;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.72), rgba(255,255,255,.08) 18%, transparent 42%, rgba(0,0,0,.36) 78%, rgba(255,255,255,.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}
.phone-small::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 39px;
  pointer-events: none;
}
.phone-small .phone-content {
  position: absolute;
  inset: 5px;
  z-index: 2;
  width: auto;
  height: auto;
  border-radius: 40px;
  box-sizing: border-box;
}
.phone-small .phone-top {
  position: absolute;
  inset: 5px 5px auto;
  z-index: 6;
  height: 38px;
  padding: 10px 19px 0;
  border-radius: 40px 40px 0 0;
  background: transparent;
  color: rgba(48,35,41,.78);
  font-size: 9px;
}
.small-dynamic-island {
  position: absolute;
  z-index: 7;
  top: 14px;
  left: 50%;
  translate: -50% 0;
  width: 68px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #09090b, #17161a);
  box-shadow: 0 1px 2px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.07);
}
.small-dynamic-island i,
.small-dynamic-island span {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.small-dynamic-island i {
  width: 5px;
  height: 5px;
  right: 10px;
  top: 7px;
  background: #1e2941;
  box-shadow: 0 0 0 1px #28395a, 0 0 6px #3460a2;
}
.small-dynamic-island span {
  width: 8px;
  height: 8px;
  left: 11px;
  top: 6px;
  background: #111;
}
.small-screen-glass {
  position: absolute;
  inset: 5px;
  z-index: 5;
  border-radius: 40px;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.13), transparent 18%, transparent 73%, rgba(20,12,16,.08));
  mix-blend-mode: screen;
}
.phone-small .home-indicator {
  z-index: 8;
  bottom: 12px;
  width: 72px;
  height: 3px;
  background: rgba(25,20,23,.7);
}
.small-action-button,
.small-volume,
.small-side-button {
  position: absolute;
  z-index: 0;
  display: block;
  width: 3px;
  background: linear-gradient(90deg, #1b191e, #77727b 44%, #28252b);
  box-shadow: 0 0 0 1px rgba(13,11,15,.42);
  pointer-events: none;
}
.small-action-button { left: -3px; top: 84px; height: 25px; border-radius: 4px 0 0 4px; }
.small-volume-one { left: -3px; top: 127px; height: 47px; border-radius: 4px 0 0 4px; }
.small-volume-two { left: -3px; top: 184px; height: 47px; border-radius: 4px 0 0 4px; }
.small-side-button { right: -3px; top: 145px; height: 76px; border-radius: 0 4px 4px 0; }
.download-phone {
  padding: 48px 20px 28px;
}
.download-logo { width: 78px; height: 68px; margin-top: 2px; }
.download-poster-copy { margin-top: 34px; }
.download-poster-orbit { margin-top: 20px; }
.download-phone > small { margin-bottom: 13px; }

@media (max-width: 900px) {
  .download-art { height: 424px; }
  .phone-small { left: 50%; top: 10px; width: 196px; height: 402px; translate: -50% 0; }
  .small-action-button { top: 75px; }
  .small-volume-one { top: 115px; }
  .small-volume-two { top: 167px; }
  .small-side-button { top: 130px; height: 68px; }
}
@media (max-width: 560px) {
  .download-art { height: 420px; }
  .phone-small { width: 190px; height: 390px; }
  .phone-small .phone-top { padding-inline: 17px; }
  .download-phone { padding: 44px 16px 26px; }
  .download-logo { width: 70px; height: 61px; }
  .download-poster-copy { margin-top: 28px; }
  .download-poster-copy p { font-size: 21px; }
  .download-poster-orbit { width: 88px; height: 88px; margin-top: 18px; }
  .download-poster-orbit i { left: 25px; top: 25px; }
  .phone-small .home-indicator { bottom: 10px; width: 66px; }
}

/* The floating navigation keeps the transparent logo mark, without the
   duplicate Chinese wordmark beside it. */
.nav .brand-word { display: none; }