/* October 2026: current product, familiar warm pink identity. */
.hero { padding: 64px 0 58px; background: linear-gradient(125deg,#fff9fb 8%,#fff0f5 70%,#ffe7ee); }
.hero h1 { font-size: clamp(32px,4.2vw,51px); line-height:1.3; letter-spacing:-.025em; }
.hero-desc { max-width:31em; margin-top:22px; font-size:17px; line-height:1.9; }
.hero-small { font-size:12px; color:var(--text-2); margin-top:14px; }
.hero-visual { max-width:252px; padding-top:38px; }
.hero-img-wrap { aspect-ratio:auto; max-height:none; }
/* The display clips the 140 px status bar; the separate shell never exposes
   the former pink background when the screenshot's height changes. */
.phone-device { position:relative; display:block; padding:16px 7px 7px; border:1px solid #777581; border-radius:32px; overflow:visible; background:linear-gradient(110deg,#504e58,#1e1d24 28%,#34313b 75%,#6b6570); box-shadow:inset 0 0 0 2px #a09ba44d,0 18px 38px #3e2e4426; }
.phone-device::before,.phone-device::after { content:""; position:absolute; width:3px; border-radius:3px; background:linear-gradient(90deg,#a39da8,#3b3740); }
.phone-device::before { left:-4px; top:18%; height:9%; box-shadow:0 42px 0 #56515d; }
.phone-device::after { right:-4px; top:26%; height:12%; }
.phone-camera { position:absolute; top:5px; left:50%; transform:translateX(-50%); width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#566477,#17181f 55%); box-shadow:0 0 0 1px #08090d; }
.phone-display { position:relative; display:block; width:100%; aspect-ratio:1240 / 2632; overflow:hidden; border-radius:23px; background:#faf7f8; }
.phone-display img { position:absolute; top:-5.319149%; left:0; display:block; width:100%; height:auto; max-width:none; margin:0; object-fit:fill; }
.phone-device:focus-visible { outline:3px solid var(--primary); outline-offset:6px; }
.hero-caption { position:absolute; top:0; left:50%; transform:translateX(-50%); white-space:nowrap; color:var(--text-2); font-size:12px; }
/* This latest call capture has no system status bar to clip. */
.hero .phone-display { aspect-ratio:1240 / 2772; }
.hero .phone-display img { position:static; top:auto; width:100%; height:auto; }
@media(min-width:900px) {
  .hero-text { transform:translateY(-30px); }
  .meet-copy { transform:translateY(-30px); }
}
.showcase-section { background:#fffdfd; }
.showcase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.showcase-card { border-radius:26px; padding:26px 24px; overflow:hidden; border:1px solid #f0dfe5; background:linear-gradient(160deg,#fff6fa,#fff); }
.showcase-card:nth-child(2) { background:linear-gradient(160deg,#fff2f0,#fff); }
.showcase-card:nth-child(3) { background:linear-gradient(160deg,#f7f3ff,#fff); }
.showcase-copy { min-height:154px; }
.showcase-num { font-size:11px; letter-spacing:.06em; color:#b16780; }
.showcase-copy h3 { margin:10px 0 12px; font-size:21px; line-height:1.4; }
.showcase-copy p { font-size:14px; line-height:1.8; color:var(--text-2); }
.app-screen { max-width:228px; margin:22px auto 0; }
.screens-note { margin-top:22px; color:var(--text-2); font-size:12px; }
#clips { background:#fff5f8; }
.why-section { background:var(--bg); }
.start-section { background:#fff; }
.start-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.start-steps li { display:flex; align-items:flex-start; gap:16px; }
.start-steps li>span { display:grid; place-items:center; background:var(--primary-soft); color:#bd466e; border-radius:50%; width:38px; height:38px; flex-shrink:0; font-weight:700; }
.start-steps h3 { font-size:17px; margin:3px 0 8px; }
.start-steps p { color:var(--text-2); font-size:14px; }
section[id] { scroll-margin-top:80px; }
@media(max-width:899px) {
  .hero { padding:34px 0 36px; }
  .hero-grid { gap:28px; }
  .hero h1 { font-size:clamp(30px,6.7vw,43px); }
  .hero-desc { font-size:15px; margin-top:16px; margin-bottom:22px; }
  .hero-visual { max-width:178px; }
  .hero-img-wrap { max-height:none; }
  .phone-device { padding:12px 5px 5px; border-radius:23px; }
  .phone-display { border-radius:17px; }
  .phone-camera { top:4px; width:4px; height:4px; }
  .showcase-grid { grid-template-columns:1fr; gap:20px; }
  .showcase-card { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:24px 20px; }
  .showcase-copy { padding-top:12px; min-height:0; }
  .showcase-copy h3 { font-size:20px; }
  .showcase-copy p { font-size:13px; }
  .app-screen { width:100%; margin:0; align-self:center; }
  .start-steps { grid-template-columns:1fr; gap:24px; }
}
@media(max-width:380px) {
  .container { width:calc(100% - 32px); }
  .showcase-card { padding:18px 14px; gap:12px; }
  .showcase-copy h3 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; }
}

/* Keep the original FAQ reading width and page background. */
.start-section .section-head h2,#faq .section-head h2{font-size:clamp(23px,3.6vw,34px);color:var(--text);font-weight:700}


/* Character wardrobe: three looks, one featured greeting film. */
.outfit-section{background:linear-gradient(180deg,#fff8fb,#fbf7f8)}
.outfit-heading{max-width:760px;margin-bottom:44px}
.outfit-heading p{font-size:15px;line-height:1.85;max-width:36em}
.outfit-grid{display:grid;grid-template-columns:1fr 1.16fr 1fr;align-items:center;gap:24px;max-width:940px;margin:0 auto}
.outfit-card{margin:0;overflow:hidden;border:1px solid #efdee5;border-radius:24px;background:#fff;box-shadow:0 10px 30px #67434f0c}
.outfit-picture{aspect-ratio:9/16;overflow:hidden;background:#f9f3f5}
.outfit-picture img{display:block;width:100%;height:100%;object-fit:cover}
.outfit-card .meet-visual{display:block;border-radius:0;aspect-ratio:9/16;box-shadow:none;transform:none}
.outfit-card .meet-visual img{object-fit:contain;object-position:center}
.outfit-card .meet-visual:hover{transform:none}
.outfit-card .meet-overlay{background:linear-gradient(180deg,transparent 65%,#2d1e293d)}
.outfit-card .meet-overlay span{width:54px;height:54px;background:#ffffffd9;color:#a35b73;box-shadow:0 4px 20px #24162026}
.outfit-video-badge{position:absolute;left:14px;bottom:12px;padding:4px 10px;border-radius:20px;background:#ffffffdf;color:#774f5b;font-size:12px}
.outfit-card figcaption{padding:18px 18px 20px}
.outfit-card figcaption>span{font-size:11px;color:#ad6a81;letter-spacing:.04em}
.outfit-card h3{font-size:16px;line-height:1.6;margin:7px 0 0}
.outfit-card-featured{border-color:#e8c4d2;box-shadow:0 18px 44px #97566c1a}
.outfit-note{text-align:center;font-size:12px;line-height:1.85;color:var(--text-hint);margin-top:26px}
@media(max-width:699px){.outfit-heading{margin-bottom:28px}.outfit-grid{gap:10px;grid-template-columns:1fr 1.12fr 1fr;align-items:center}.outfit-card{border-radius:14px}.outfit-card figcaption{padding:10px 8px 12px}.outfit-card figcaption>span{font-size:10px;letter-spacing:0}.outfit-card h3{font-size:12px;margin-top:4px;line-height:1.6}.outfit-video-badge{left:5px;bottom:6px;font-size:9px;padding:3px 5px}.outfit-card .meet-overlay span{width:34px;height:34px;font-size:13px}.outfit-note{text-align:left;font-size:11px;margin-top:18px}}