/* Optional components share the site palette and work without JavaScript. */
.phone-page { background: var(--dark); color: var(--on-dark); }
.phone-main { min-width: 0; }
.phone-page .eyebrow { color: var(--ice); font-size: .8125rem; line-height: 1.6; letter-spacing: .08em; }
.phone-page h1, .phone-page h2, .phone-page h3 { overflow-wrap: break-word; }
.phone-page .button { min-height: 52px; background: var(--ice); color: var(--ink); font-size: 1rem; }
.phone-page .button:hover { background: #e0f5fa; }
.phone-page a:focus-visible, .phone-page summary:focus-visible { outline: 3px solid var(--ice); outline-offset: 5px; }
.phone-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 88px); padding-block: 36px 64px; align-items: center; }
.phone-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 28px; color: var(--muted-dark); font-size: .9375rem; }
.phone-back:hover { text-decoration: underline; }
.phone-hero h1 { margin: 18px 0 24px; font-size: clamp(2.35rem, 4.4vw, 4rem); font-weight: 450; line-height: 1.12; letter-spacing: -.04em; }
.phone-hero h1 span { color: var(--ice); }
.phone-lead, .phone-section-lead { max-width: 38em; color: var(--muted-dark); font-size: 1.0625rem; line-height: 1.8; }
.phone-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }
.phone-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ice); text-decoration: underline; text-underline-offset: 4px; font-size: .9375rem; }
.phone-caption { margin-top: 16px; color: var(--muted-dark); font-size: .875rem; line-height: 1.7; }
.phone-flow { padding: 32px; border: 1px solid #52626a; border-radius: 8px; background: #1a2428; }
.phone-flow h2 { margin: 14px 0 28px; font-size: 2rem; font-weight: 450; line-height: 1.25; letter-spacing: -.025em; }
.phone-flow ol { margin: 0; padding: 0; list-style: none; }
.phone-flow li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-block: 18px; border-top: 1px solid #52626a; }
.phone-flow li>span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #7e9198; border-radius: 50%; color: var(--ice); font-size: .8125rem; }
.phone-flow strong { display: block; margin-bottom: 6px; font-size: 1rem; font-weight: 650; line-height: 1.5; }
.phone-flow li p, .phone-flow-note { margin: 0; color: var(--muted-dark); font-size: .9375rem; line-height: 1.7; }
.phone-flow-note { border-top: 1px solid #52626a; padding-top: 20px; }
.phone-section { padding-block: 48px 60px; scroll-margin-top: 100px; }
.phone-section h2 { margin: 12px 0 28px; max-width: 24em; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 450; line-height: 1.25; letter-spacing: -.03em; }
.phone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.phone-card { padding: 28px; border: 1px solid #52626a; border-radius: 8px; background: #1a2428; }
.phone-card h3 { margin: 0 0 16px; font-size: 1.25rem; line-height: 1.4; font-weight: 650; }
.phone-card p { margin-bottom: 12px; color: var(--muted-dark); line-height: 1.75; }
.phone-install-section { background: #161d20; border-block: 1px solid #52626a; }
.phone-install-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 80px); }
.phone-steps { margin: 0; padding-left: 1.5em; color: var(--ice); }
.phone-steps li { padding-left: 12px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #52626a; }
.phone-steps li:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; }
.phone-steps li::marker { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.phone-steps h3 { margin-bottom: 14px; color: var(--on-dark); font-size: 1.25rem; line-height: 1.5; font-weight: 650; }
.phone-steps p { color: var(--muted-dark); line-height: 1.8; overflow-wrap: anywhere; }
.phone-steps p a, .phone-data-panel a { color: var(--ice); text-decoration: underline; text-underline-offset: 4px; }
.phone-steps .phone-step-note { margin-top: 14px; border-left: 2px solid var(--ice); padding-left: 14px; color: var(--muted-dark); font-size: .9375rem; }
.phone-faq { max-width: 920px; }
.phone-faq details { border-top: 1px solid #52626a; }
.phone-faq details:last-child { border-bottom: 1px solid #52626a; }
.phone-faq summary { padding: 22px 8px 22px 0; min-height: 48px; cursor: pointer; font-size: 1.0625rem; font-weight: 600; line-height: 1.65; }
.phone-faq p { color: var(--muted-dark); max-width: 52em; padding-bottom: 18px; margin: 0; line-height: 1.8; }
.phone-data-panel { padding: clamp(24px, 4vw, 44px); border: 1px solid #52626a; border-radius: 8px; background: #1a2428; }
.phone-data-panel p:not(.eyebrow) { max-width: 68em; color: var(--muted-dark); line-height: 1.8; }
.phone-release { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; border-top: 1px solid #52626a; padding-bottom: 80px; }
.phone-release>div>p:not(.eyebrow) { color: var(--muted-dark); margin-bottom: 24px; line-height: 1.75; }
.phone-release dl { margin: 0; min-width: 0; }
.phone-release dl>div { display: grid; grid-template-columns: minmax(90px, .4fr) minmax(0, 1fr); gap: 18px; padding-block: 13px; border-bottom: 1px solid #52626a; }
.phone-release dt { color: var(--muted-dark); font-size: .9375rem; }
.phone-release dd { margin: 0; overflow-wrap: anywhere; font-size: .9375rem; line-height: 1.7; }
.phone-release code { color: var(--muted-dark); font-size: .8125rem; overflow-wrap: anywhere; }
.phone-pending { padding: 16px 20px; border: 1px solid #99704c; border-radius: 10px; color: #ffd5a8; line-height: 1.6; }
.phone-app-preview { max-width: 260px; margin-top: 28px; }
.phone-app-preview img { border-radius: 50%; }
.phone-watchface-preview { width: 100%; max-width: 420px; justify-self: center; text-align: center; }
.phone-watchface-preview img { width: 100%; border-radius: 50%; }
.phone-watchface-preview--small { max-width: 300px; }
.phone-data-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.phone-data-layout p:not(.eyebrow) { color: var(--muted-dark); line-height: 1.8; }
.phone-related { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-block: 20px 36px; border-top: 1px solid #52626a; }
@media (max-width: 900px) {
  .phone-data-layout { grid-template-columns: 1fr; gap: 28px; }
  .phone-watchface-preview { max-width: 340px; }
  .phone-watchface-preview--small { max-width: 260px; }
  .phone-hero, .phone-install-layout { grid-template-columns: 1fr; }
  .phone-hero { gap: 32px; }
  .phone-flow { max-width: 640px; }
  .phone-grid { grid-template-columns: 1fr; }
  .phone-section { padding-block: 38px 44px; }
}
@media (max-width: 600px) {
  .phone-hero { padding-top: 24px; padding-bottom: 40px; }
  .phone-hero h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); }
  .phone-flow, .phone-card { padding: 24px; }
  .phone-actions { align-items: stretch; flex-direction: column; }
  .phone-release { grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; }
  .phone-release dl>div { grid-template-columns: 1fr; gap: 4px; }
  .phone-page .button { width: 100%; }
}