/* Installation page shares the live homepage's visual system. */
:root {
  --orange: #91401f;
  --orange-bright: #b58452;
  --purple: #111;
  --acid: #06c755;
  --paper: #f4f0e8;
  --paper-light: #fff;
  --muted: #665f56;
}

body { font-family: Arial, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
.install-header {
  top: 0;
  width: 100%;
  min-height: 70px;
  padding: 8px max(24px, calc((100vw - 1120px) / 2));
  border: 0;
  border-radius: 0;
  background: #050505;
  box-shadow: 0 16px 48px rgb(0 0 0 / 18%);
  transition: top 180ms ease, width 180ms ease, min-height 180ms ease, border-radius 180ms ease, padding 180ms ease, box-shadow 180ms ease;
}
.install-header.is-scrolled {
  top: 14px;
  width: min(calc(100% - 48px), 1120px);
  min-height: 64px;
  padding: 6px 12px 6px 9px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 32px;
  box-shadow: 0 16px 42px rgb(0 0 0 / 22%);
}
.install-brand {
  display: inline-flex;
  flex: 0 0 150px;
  align-items: center;
  gap: 12px;
  min-height: 53px;
  padding: 3px 7px 6px;
  border-radius: 999px;
  color: #050505;
  background: #fff;
  overflow: hidden;
}
.install-brand > img { width: 136px; height: 44px; object-fit: contain; border-radius: 0; }
.install-brand span { display: grid; gap: 2px; }
.install-brand strong { font-size: 1.18rem; line-height: 1; }
.install-brand small { color: #765f4c; font-size: .62rem; font-weight: 600; line-height: 1.1; }
html[lang="en"] .install-brand { flex-basis: 208px; padding: 6px 12px; }
html[lang="en"] .install-brand > img { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px; }
.install-nav { justify-content: flex-end; gap: clamp(16px, 2vw, 34px); }
.install-nav a { font-size: .96rem; font-weight: 800; }
.install-nav a:not(.nav-cta):hover { color: var(--acid); }
.install-nav .language-link { padding: 10px 14px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px; }
.install-nav .nav-cta { min-height: 46px; padding: 12px 26px; border-radius: 999px; color: #fff; background: var(--acid); }

.install-hero { min-height: min(860px, calc(100vh - 70px)); padding-top: 164px; background: radial-gradient(circle at 79% 38%, rgb(181 132 82 / 35%), transparent 33%), linear-gradient(122deg, #fff 0 47%, #f0e5d4 68%, #b97b43 120%); }
.install-hero h1, .section-heading h2, .recovery-title h2, .contact-card h2 { font-weight: 800; }
h1 em, h2 em, .eyebrow { color: var(--orange); }
.eyebrow span { background: var(--orange); }
.hero-status { border-color: #222; background: #111; box-shadow: 18px 18px 0 rgb(181 132 82 / 72%); transform: none; }
.status-screen { background: radial-gradient(circle at 54% 44%, rgb(181 132 82 / 38%), transparent 22%), radial-gradient(circle at 50% 45%, #443a31 0 33%, #0c0c0c 34% 100%); }
.device-flow { border-radius: 22px; }
.device-flow .host-device { background: #111; }
.device-icon { color: #fff; background: var(--orange); }
.flow-arrow { color: var(--orange); background: transparent; }

.reuse-card { border-radius: 22px; background: #f0ede6; }
.reuse-card:nth-child(2) { background: #111; transform: translateY(-12px); }
.reuse-card:nth-child(3) { background: #e9e4da; }
.pc-visual::before { background: radial-gradient(circle at 50% 48%, var(--orange), #443a31 34%, #080808 35%); }
.network-visual span { background: var(--orange); }
.steps-section, .recovery-section { background: #111; }
.section-heading.light em, .role-label span, .step-list li > span, .handoff-strip i { color: var(--acid); }
.role-label span { color: #fff; background: var(--acid); }
.role-panel { border-radius: 22px; background: #191919; }
.owner-panel { background: #f5f2ec; }
.owner-panel .role-note.accent { border-left-color: var(--acid); }
.prepare-section { background: #f4f0e8; }
.check-list li > span { color: #fff; background: var(--acid); }
.recovery-section { color: #fff; }
.recovery-title .eyebrow { color: #c6b8aa; }
.recovery-title .eyebrow span, .recovery-title h2 em, .recovery-list li > span { color: var(--acid); background: transparent; }
.recovery-list li { border-radius: 20px; background: #1a1a1a; }
.contact-section { background: #111; }
.contact-card { border-radius: 0; background: transparent; box-shadow: none; }
.contact-card h2 { color: #fff; }
.button-light, .install-button.button-dark { color: #fff; background: var(--acid); border-radius: 999px; }
.text-link { border-bottom-color: var(--orange); }

@media (max-width: 809.98px) {
  .install-header, .install-header.is-scrolled { top: 0; width: 100%; min-height: 64px; padding: 7px 14px; border: 0; border-radius: 0; }
  .install-brand { flex-basis: 150px; min-height: 50px; }
  .install-brand > img { width: 136px; height: 44px; }
  html[lang="en"] .install-brand { flex-basis: 194px; }
  .install-brand strong { font-size: 1rem; }
  .install-brand small { display: none; }
  .install-nav { background: #111; }
  .install-nav .language-link { border: 0; border-radius: 0; }
  .install-nav .nav-cta { margin-top: 10px; border-radius: 999px; }
  .install-hero { min-height: 0; padding-top: 136px; }
  .reuse-card:nth-child(2) { transform: none; }
  .contact-card { padding-inline: 0; }
}

/* Official app-store badges are shown at the exact mobile handoff step and in the footer. */
.install-store-downloads {
  margin: 22px 0 18px;
  padding: 16px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 16px;
  background: rgb(255 255 255 / 58%);
}

.install-store-downloads p,
.footer-downloads > strong {
  display: block;
  margin: 0 0 9px;
  color: #111;
  font-size: .86rem;
  font-weight: 800;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.store-badges a { display: inline-flex; line-height: 0; }
.store-badges img { display: block; width: auto; height: 45px; }

/* The two official badges live in equal columns so their native aspect ratios do not disturb the handoff step. */
.install-store-downloads .store-badges,
.install-footer .footer-downloads .store-badges { display: flex; flex-wrap: wrap; align-items: center; width: fit-content; max-width: 100%; gap: 12px; }
.install-store-downloads .store-badges a,
.install-footer .footer-downloads .store-badges a { display: block; width: auto; min-width: 0; height: 48px; }
.install-store-downloads .store-badges img,
.install-footer .footer-downloads .store-badges img { width: auto !important; max-width: none; height: 48px !important; margin: 0 !important; object-fit: contain; }

/* Google Play includes more transparent padding than Apple's badge. Give both links the same visible frame and scale Play to the same perceived height. */
.install-store-downloads .store-badges a,
.install-footer .footer-downloads .store-badges a { overflow: visible; background: transparent; border: 0; border-radius: 0; }
.install-store-downloads .store-badges a:nth-child(2) img,
.install-footer .footer-downloads .store-badges a:nth-child(2) img { height: 54px !important; transform: none; }

.install-footer .footer-downloads { margin: 18px 0 20px; }
.install-footer .footer-downloads > strong { color: #fff; }
.install-footer .footer-downloads .store-badges img {
  width: auto !important;
  height: 43px !important;
  margin: 0 !important;
}

@media (max-width: 809.98px) {
  .install-store-downloads { margin-top: 18px; }
  .install-store-downloads .store-badges,
  .install-footer .footer-downloads .store-badges { margin-inline: auto; }
}