.guide-page {
  background:
    radial-gradient(circle at 86% 12%, rgba(79, 183, 171, .16), transparent 24%),
    radial-gradient(circle at 8% 34%, rgba(244, 184, 96, .15), transparent 22%),
    var(--cream);
}

.guide-main { overflow: hidden; }

.guide-hero {
  position: relative;
  padding: 150px 0 96px;
}

.guide-hero::after {
  position: absolute;
  inset: auto -8% -120px auto;
  width: 320px;
  height: 320px;
  border-radius: 48% 52% 63% 37% / 42% 38% 62% 58%;
  background: rgba(255, 165, 133, .12);
  content: "";
  transform: rotate(13deg);
}

.guide-breadcrumb {
  position: relative;
  z-index: 2;
  margin-bottom: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.guide-breadcrumb a { text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--mint-deep); }
.guide-breadcrumb span[aria-hidden] { color: #b5aa9f; }

.guide-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(460px, 1.05fr);
  align-items: center;
  gap: clamp(54px, 8vw, 104px);
}

.guide-hero-copy h1,
.guide-section-heading h2,
.guide-download-copy h2 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -.05em;
}

.guide-hero-copy h1 {
  max-width: 680px;
  font-size: clamp(48px, 5.2vw, 72px);
  line-height: 1.12;
}

.guide-hero-copy h1 em { color: var(--mint-deep); font-style: normal; }
.guide-page.is-coral .guide-hero-copy h1 em { color: var(--coral-deep); }
.guide-page.is-arena .guide-hero-copy h1 em { color: #3a7294; }

.guide-lead {
  max-width: 620px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.85;
}

.guide-tags {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.guide-tags span,
.guide-related-links a {
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--mint-deep);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.guide-page.is-coral .guide-tags span { color: var(--coral-deep); }
.guide-page.is-arena .guide-tags span { color: #3a7294; }

.guide-device-stage {
  position: relative;
  min-height: 510px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 10px;
}

.guide-device-stage::before {
  position: absolute;
  inset: 2% 3% 3%;
  border-radius: 43% 57% 52% 48% / 54% 39% 61% 46%;
  background: linear-gradient(145deg, var(--mint-soft), var(--gold-soft));
  content: "";
  transform: rotate(-3deg);
}

.guide-page.is-coral .guide-device-stage::before { background: linear-gradient(145deg, var(--coral-soft), var(--gold-soft)); }
.guide-page.is-arena .guide-device-stage::before { background: linear-gradient(145deg, #d7f0ec, #e7f4fb); }
.guide-device-stage .device-showcase { width: min(600px, 100%); }

.guide-device-note {
  position: relative;
  justify-self: end;
  margin-right: 2%;
  z-index: 4;
  padding: 10px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 12px 30px rgba(46, 42, 38, .09);
  font-size: 12px;
  font-weight: 850;
  transform: rotate(2deg);
}

.guide-content { background: rgba(255, 253, 248, .72); }
.guide-content-shell { width: min(880px, calc(100% - 48px)); margin-inline: auto; }

.guide-section-heading { margin-bottom: 38px; }
.guide-section-heading h2 { font-size: clamp(38px, 5vw, 58px); line-height: 1.18; }
.guide-section-heading > p:last-child { max-width: 650px; margin: 20px 0 0; color: var(--muted); font-size: 17px; }

.guide-flow { margin: 0; padding: 0; list-style: none; counter-reset: guide-step; }

.guide-flow > li {
  padding: 34px 0 38px;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 26px;
  border-top: 1px solid var(--line);
  counter-increment: guide-step;
}

.guide-flow > li::before {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: var(--mint-soft);
  color: var(--mint-deep);
  content: "0" counter(guide-step);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .06em;
}

.guide-page.is-coral .guide-flow > li::before { background: var(--coral-soft); color: var(--coral-deep); }
.guide-page.is-arena .guide-flow > li::before { background: #e7f4fb; color: #3a7294; }

.guide-flow h2 { margin: 0; font-size: clamp(25px, 3vw, 34px); line-height: 1.35; letter-spacing: -.035em; }
.guide-flow p { margin: 11px 0 0; color: var(--muted); font-size: 16px; line-height: 1.85; }

.guide-screen-examples {
  margin: 48px -44px;
  padding: clamp(28px, 5vw, 44px);
  border-radius: 42px;
  background: linear-gradient(145deg, rgba(217, 240, 236, .72), rgba(255, 239, 213, .72));
}

.guide-page.is-coral .guide-screen-examples {
  background: linear-gradient(145deg, rgba(255, 225, 215, .74), rgba(255, 239, 213, .72));
}

.guide-page.is-arena .guide-screen-examples {
  background: linear-gradient(145deg, rgba(215, 240, 236, .78), rgba(231, 244, 251, .82));
}

.guide-screen-examples-copy p {
  margin: 0 0 8px;
  color: var(--mint-deep);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
}

.guide-page.is-coral .guide-screen-examples-copy p { color: var(--coral-deep); }
.guide-screen-examples-copy h2 { max-width: 680px; margin: 0; font-size: clamp(26px, 4vw, 38px); line-height: 1.3; letter-spacing: -.035em; }

.guide-screen-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(180px, .65fr);
  align-items: end;
  gap: 24px;
}

.guide-screen-grid figure { margin: 0; }
.guide-screen-grid img { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: 0 20px 44px rgba(46, 42, 38, .13); }
.guide-screen-phone { width: min(100%, 280px); justify-self: center; }
.guide-screen-grid figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.65; }

.guide-note-band {
  margin-top: 38px;
  padding: clamp(28px, 5vw, 46px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  border-radius: 34px;
  background: linear-gradient(135deg, var(--gold-soft), #fff9ee 68%, var(--mint-soft));
}

.guide-note-band b {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--paper);
  color: var(--gold-deep);
  font-size: 20px;
}

.guide-note-band h2 { margin: 0; font-size: 22px; line-height: 1.35; }
.guide-note-band p { margin: 9px 0 0; color: var(--muted); line-height: 1.75; }

.guide-faq { background: #fffaf1; }
.guide-faq-list { margin-top: 42px; border-top: 1px solid var(--line); }
.guide-faq details { border-bottom: 1px solid var(--line); }
.guide-faq summary { padding: 24px 4px; cursor: pointer; font-size: 18px; font-weight: 850; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { float: right; color: var(--mint-deep); content: "＋"; font-size: 22px; }
.guide-faq details[open] summary::after { content: "－"; }
.guide-faq details p { max-width: 720px; margin: -4px 0 28px; color: var(--muted); line-height: 1.85; }

.guide-related { padding: 74px 0; background: var(--cream); }
.guide-related-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.guide-related-copy p { margin: 0 0 5px; color: var(--mint-deep); font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.guide-related-copy h2 { margin: 0; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.035em; }
.guide-related-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.guide-related-links a { border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: border-color 180ms ease, color 180ms ease, transform 180ms ease; }
.guide-related-links a:hover { border-color: var(--mint); color: var(--mint-deep); transform: translateY(-1px); }

.guide-download { padding: 82px 0; background: #fffaf1; }
.guide-download-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 42px; }
.guide-download-copy h2 { font-size: clamp(34px, 4vw, 50px); line-height: 1.22; }
.guide-download-copy p { margin: 14px 0 0; color: var(--muted); }
.guide-download .store-actions { margin: 0; }

@media (max-width: 980px) {
  .guide-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .guide-hero-copy { max-width: 760px; margin-inline: auto; }
  .guide-hero-copy .eyebrow, .guide-tags { justify-content: center; }
  .guide-lead { margin-inline: auto; }
  .guide-device-stage { min-height: 540px; }
  .guide-download-inner { grid-template-columns: 1fr; text-align: center; }
  .guide-download .store-actions { justify-content: center; }
}

@media (max-width: 760px) {
  .guide-hero { padding: 128px 0 74px; }
  .guide-breadcrumb { margin-bottom: 30px; }
  .guide-hero-copy h1 { font-size: clamp(40px, 11vw, 58px); }
  .guide-device-stage { min-height: 420px; }
  .guide-related-inner { display: grid; }
  .guide-related-links { justify-content: flex-start; }
  .guide-content-shell { width: min(100% - 32px, 620px); }
  .guide-screen-examples { margin-inline: 0; border-radius: 34px; }
  .guide-screen-grid { grid-template-columns: 1fr; }
  .guide-screen-phone { width: min(78%, 300px); }
}

@media (max-width: 520px) {
  .guide-hero { padding-top: 116px; }
  .guide-device-stage { min-height: 330px; }
  .guide-device-note { margin-right: 0; padding: 7px 10px; font-size: 10px; }
  .guide-flow > li { grid-template-columns: 48px minmax(0, 1fr); gap: 15px; }
  .guide-flow > li::before { width: 44px; height: 44px; border-radius: 15px; }
  .guide-note-band { grid-template-columns: 1fr; }
  .guide-related { padding: 60px 0; }
  .guide-download { padding: 70px 0; }
}