/* =============================================================================================
   Home page (both modes): hero over the night of the icon, feature sections with the real app, then speed,
   iPhone, intelligence, privacy, themes, details, editions, pricing, FAQ, final call.
   ============================================================================================= */

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; padding-top: calc(var(--nav-h) + clamp(52px, 8vw, 104px)); }
.hero-copy { display: grid; justify-items: center; gap: 22px; text-align: center; }
.hero-copy .display { max-width: 12ch; }
.hero-copy .lead { margin-top: 2px; max-width: 36em; }
.hero-copy .cta-row { margin-top: 12px; }
.hero-copy .fine { margin-top: -4px; }
.hero-stage {
  position: relative; max-width: 1240px; margin-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(90px, 12vw, 170px);
}
.stage-mac { position: relative; width: min(100%, 1120px); margin: 0 auto; }
.stage-mac::before {
  content: ""; position: absolute; inset: 8% 6% -4%; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, rgba(138, 147, 255, .38), transparent);
  filter: blur(30px);
}
.stage-phone {
  position: absolute; right: max(var(--gutter), calc(50% - 600px)); bottom: clamp(40px, 6vw, 110px);
  width: clamp(120px, 21vw, 270px); animation: float 7s ease-in-out infinite;
}
.hero-film { display: block; width: 100%; height: auto; border-radius: 24px; }

/* ---------- Strip ---------- */
.strip { position: relative; padding: 26px 0; border-block: 1px solid var(--line); background: rgba(13, 15, 39, .6); }
.strip-in { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.strip li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 550; color: var(--text-2); }
.strip .i { width: 20px; height: 20px; color: var(--accent-text); }

/* ---------- Feature sections (text and the real app, alternating) ---------- */
.feat { position: relative; padding-block: clamp(80px, 11vw, 150px); }
.feat + .feat { padding-top: clamp(20px, 4vw, 60px); }
.feat-in { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.feat-copy { display: grid; gap: 18px; align-content: start; }
.feat-copy .title { max-width: 14ch; }
.points { list-style: none; display: grid; gap: 18px; margin-top: 10px; }
.points li { position: relative; padding-left: 22px; }
.points li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px;
  background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 12px rgba(255, 201, 74, .5);
}
.points h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.points p { margin-top: 3px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.feat-media { position: relative; min-width: 0; }
.feat-media .glow {
  position: absolute; inset: 10% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(74, 79, 184, .45), transparent); filter: blur(10px);
}
.feat-media .phone { position: absolute; right: -2%; bottom: -10%; width: 26%; }
.feat.has-phone .feat-media { padding-bottom: 6%; }

@media (min-width: 1000px) {
  .feat-in { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
  .feat.is-flip .feat-media { order: -1; }
  .feat.is-flip .feat-in { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
  /* The window reaches past the column, toward the page's edge. */
  .feat-media .shot-mac { width: 118%; max-width: none; }
  .feat.is-flip .feat-media .shot-mac { margin-left: -18%; }
  .feat.is-flip .feat-media .phone { right: auto; left: -8%; }
}

/* ---------- Cards (speed, intelligence) ---------- */
.cards { display: grid; gap: 16px; }
.tile { display: grid; align-content: start; gap: 10px; padding: 26px; }
.tile h3 { margin-top: 6px; font-size: 18px; font-weight: 650; letter-spacing: -.015em; }
.tile p { font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.tile-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; flex: none;
  color: var(--gold-2); background: linear-gradient(145deg, rgba(74, 79, 184, .9), rgba(43, 47, 122, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 10px 24px -12px rgba(74, 79, 184, .9);
}
.tile-ic .i { width: 22px; height: 22px; }
.spot {
  position: absolute; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; pointer-events: none;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(138, 147, 255, .16), transparent); opacity: 0; transition: opacity .3s;
}
.tile.is-lit .spot { opacity: 1; }
@media (min-width: 700px) { .cards-4, .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- iPhone ---------- */
.iphone { overflow: clip; }
.iphone-in { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
.iphone-copy { display: grid; gap: 18px; align-content: start; }
.icon-list { list-style: none; display: grid; gap: 18px; margin-top: 10px; }
.icon-list li { display: flex; gap: 16px; align-items: flex-start; }
.icon-list h3 { font-size: 16.5px; font-weight: 650; }
.icon-list p { margin-top: 3px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.phones { position: relative; display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: center; gap: 0; padding: 20px 0; }
.phones .phone { width: 100%; }
.phones .p1 { transform: translateX(14%) rotate(-6deg) scale(.92); z-index: 0; }
.phones .p2 { z-index: 1; }
.phones .p3 { transform: translateX(-14%) rotate(6deg) scale(.92); z-index: 0; }
@media (min-width: 1000px) { .iphone-in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* ---------- Privacy ---------- */
.privacy-in { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.privacy-copy { display: grid; gap: 18px; align-content: start; }
.privacy-list { list-style: none; display: grid; gap: 12px; }
.privacy-list li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; }
.privacy-list h3 { font-size: 16.5px; font-weight: 650; }
.privacy-list p { margin-top: 3px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
@media (min-width: 1000px) { .privacy-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ---------- Themes and icons ---------- */
.theme-grid { display: grid; gap: clamp(18px, 2.4vw, 30px); }
.theme-card { margin: 0; }
.theme-card figcaption { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.theme-card .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
@media (min-width: 760px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.icons-row { display: grid; justify-items: center; gap: 22px; margin-top: clamp(48px, 7vw, 88px); }
.icons-title { font-size: 15px; font-weight: 600; color: var(--text-2); }
.icons-row ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2.4vw, 30px); }
.icons-row li { display: grid; justify-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.icons-row img { width: clamp(58px, 7vw, 88px); height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); transition: transform .35s var(--spring); }
.icons-row li:hover img { transform: translateY(-4px) rotate(-3deg); }

/* ---------- And also ---------- */
.more-grid { list-style: none; display: grid; gap: 2px; border-radius: var(--r); overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.more-grid li { padding: 22px 24px; background: var(--bg-2); }
.more-grid h3 { font-size: 15.5px; font-weight: 650; }
.more-grid p { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
@media (min-width: 640px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Pricing ---------- */
.pricing-in { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.pricing-copy { display: grid; gap: 18px; align-content: start; }
.pricing-copy .fine { max-width: 44em; }
.price-card .amount { font-family: var(--serif); font-weight: 600; letter-spacing: -.03em; }
@media (min-width: 1000px) { .pricing-in { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); } .price-card { margin: 0; } }

/* ---------- Facts and FAQ ---------- */
.faq-in { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
.faq-in .title { margin: 14px 0 26px; }
.facts { padding: 26px 26px 18px; }
.facts h2 { margin-bottom: 14px; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.facts dl { display: grid; gap: 0; margin: 0; }
.facts dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.facts dd { margin: 3px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); }
@media (min-width: 1000px) {
  .faq-in { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .facts { position: sticky; top: calc(var(--nav-h) + 24px); }
}

/* ---------- Final call ---------- */
.final { padding-bottom: clamp(150px, 18vw, 240px); }
.final-icon { width: 132px; height: 132px; filter: drop-shadow(0 26px 44px rgba(74, 79, 184, .6)); animation: float 7s ease-in-out infinite; }
.final .star { position: absolute; }

/* ---------- Japanese and Chinese: no forced narrow titles ---------- */
:lang(ja) :is(.feat-copy .title, .hero-copy .display), :lang(zh) :is(.feat-copy .title, .hero-copy .display) { max-width: none; }
:lang(ja) :is(.points p, .icon-list p, .tile p, .more-grid p), :lang(zh) :is(.points p, .icon-list p, .tile p, .more-grid p) { word-break: auto-phrase; }

@media (max-width: 999px) {
  .feat-copy, .iphone-copy, .privacy-copy, .pricing-copy { justify-items: center; text-align: center; }
  .feat-copy .points, .icon-list { width: 100%; max-width: 560px; text-align: left; justify-self: center; }
  .feat-copy .title { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-phone, .final-icon, .spark { animation: none; }
}