:root {
  color-scheme: dark;
  --black: #000;
  --ink: #060606;
  --surface: #0d0d0e;
  --surface-raised: #131314;
  --text: #f7f7f5;
  --muted: #979797;
  --muted-soft: #626264;
  --line: rgba(255, 255, 255, .11);
  --line-soft: rgba(255, 255, 255, .065);
  --orange: #ff9f43;
  --orange-deep: #ff762d;
  --gold: #ffd66a;
  --blue: #80b3ff;
  --green: #27b44b;
  --red: #e84545;
  --shell: min(1180px, calc(100% - 48px));
  --radius: 34px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: var(--black); -webkit-font-smoothing: antialiased; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 157, 58, .07), transparent 26%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 58%);
}

img { max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 11px 15px; border-radius: 10px; color: #111; background: var(--orange); text-decoration: none; transition: top 160ms ease; }
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: saturate(150%) blur(22px);
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent); }
.site-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: white; text-decoration: none; }
.brand-name { font: 650 .74rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .24em; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a { color: #aaa; font-size: .78rem; font-weight: 560; text-decoration: none; transition: color 160ms ease; }
.nav-links a:hover { color: white; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: #ddd; background: rgba(255,255,255,.05); font-size: .72rem; font-weight: 650; text-decoration: none; }
.nav-cta span { color: var(--orange); }

/* The same black-hole motif used throughout the iOS app. */
.orbit-logo { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; filter: drop-shadow(0 0 12px rgba(255, 157, 58, .22)); }
.orbit-logo::before,
.orbit-logo::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%) rotate(-9deg); }
.orbit-logo::before { width: 100%; height: 31%; border: 2px solid rgba(255, 173, 67, .88); box-shadow: inset 0 0 6px rgba(255,214,106,.45), 0 0 13px rgba(255,159,67,.2); }
.orbit-logo::after { width: 73%; height: 26%; border: 1px solid rgba(255, 211, 105, .56); transform: translate(-50%, -50%) rotate(8deg); }
.orbit-logo span { position: relative; z-index: 2; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #17130f, #020202 62%); box-shadow: 0 0 0 2px rgba(255, 171, 61, .45), 0 0 16px rgba(255, 146, 44, .62), 0 0 32px rgba(255, 146, 44, .22); }
.orbit-logo-small { width: 40px; height: 26px; }
.orbit-logo-large { width: 132px; height: 82px; }
.orbit-logo-large::before { border-width: 4px; }
.orbit-logo-large span { box-shadow: 0 0 0 3px rgba(255,171,61,.5), 0 0 28px rgba(255,146,44,.68), 0 0 70px rgba(255,146,44,.3); }

.hero { position: relative; min-height: 1200px; padding-top: 102px; overflow: hidden; text-align: center; }
.hero-glow { position: absolute; z-index: -1; left: 50%; top: 80px; width: 940px; height: 940px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 154, 49, .13), rgba(255, 133, 29, .035) 38%, transparent 68%); filter: blur(6px); }
.hero-copy { position: relative; z-index: 4; max-width: 940px; margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 23px; color: #858585; font: 620 .68rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow > span { width: 20px; height: 1px; background: var(--orange); box-shadow: 0 0 8px rgba(255,159,67,.6); }
.hero .eyebrow { justify-content: center; }
.hero h1 { margin: 0; font-size: clamp(4.2rem, 8.2vw, 7.8rem); line-height: .96; letter-spacing: -.035em; }
.hero h1 em { color: var(--orange); font-style: normal; font-weight: inherit; text-shadow: 0 0 50px rgba(255, 145, 45, .12); }
.hero-lede { max-width: 650px; margin: 31px auto 0; color: #aaa; font-size: clamp(1.04rem, 1.8vw, 1.24rem); line-height: 1.65; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 35px; }
.primary-cta { min-width: 190px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 15px; color: #111; background: white; box-shadow: 0 15px 45px rgba(0,0,0,.35); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.primary-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 50px rgba(255,159,67,.13); }
.primary-cta > span:last-child { display: flex; flex-direction: column; align-items: flex-start; }
.primary-cta small { color: #555; font-size: .55rem; line-height: 1.1; }
.primary-cta strong { margin-top: 2px; font-size: 1rem; line-height: 1.1; letter-spacing: -.02em; }
.cta-icon { color: #111; font-size: 1.7rem; line-height: 1; transform: rotate(-12deg); }
.secondary-cta { display: inline-flex; align-items: center; gap: 9px; color: #b7b7b7; font-size: .78rem; font-weight: 620; text-decoration: none; }
.secondary-cta span { color: var(--orange); }
.availability { margin: 19px 0 0; color: #555; font-size: .68rem; }
.availability span { color: var(--orange); font-size: .5rem; }

.hero-stage { position: relative; width: min(1050px, 100%); height: 710px; margin: 74px auto 0; perspective: 1400px; }
.stage-orbit { position: absolute; left: 50%; top: 52%; border: 1px solid rgba(255, 166, 70, .12); border-radius: 50%; transform: translate(-50%, -50%) rotate(-9deg); }
.stage-orbit-one { width: 920px; height: 300px; }
.stage-orbit-two { width: 700px; height: 210px; border-color: rgba(128, 179, 255, .09); transform: translate(-50%, -50%) rotate(11deg); }
.stage-orbit::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 13px var(--orange); }
.stage-orbit-one::after { left: 12%; top: 17%; }
.stage-orbit-two::after { right: 9%; bottom: 16%; background: var(--blue); box-shadow: 0 0 13px var(--blue); }

.phone { position: relative; margin: 0; overflow: hidden; border: 7px solid #1d1d1f; border-radius: 50px; background: black; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 45px 95px rgba(0,0,0,.66); }
.phone::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 9px 0 16px rgba(255,255,255,.025); }
.phone::after { content: ""; position: absolute; z-index: 3; left: -10px; top: 25%; width: 3px; height: 72px; border-radius: 2px; background: #343438; box-shadow: 0 88px 0 #343438; }
.phone img { width: 100%; height: 100%; display: block; object-fit: cover; }
.phone-main { position: absolute; z-index: 3; left: 50%; top: 2px; width: 314px; aspect-ratio: 1206 / 2622; transform: translateX(-50%); animation: phone-float 6s ease-in-out infinite; }
.phone-side { position: absolute; z-index: 2; top: 82px; width: 266px; aspect-ratio: 1206 / 2622; opacity: .78; filter: saturate(.86) brightness(.82); }
.phone-left { left: 12%; transform: rotateY(9deg) rotateZ(-7deg); }
.phone-right { right: 12%; transform: rotateY(-9deg) rotateZ(7deg); }
.floating-signal { position: absolute; z-index: 6; min-width: 160px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(20,20,21,.78); box-shadow: 0 18px 45px rgba(0,0,0,.4); backdrop-filter: blur(20px); text-align: left; }
.floating-signal span, .floating-signal strong, .floating-signal small { display: block; }
.floating-signal span { color: var(--orange); font: 600 .61rem/1 ui-monospace, monospace; letter-spacing: .09em; }
.floating-signal strong { margin-top: 8px; font-size: .78rem; }
.floating-signal small { margin-top: 3px; color: #777; font-size: .62rem; }
.floating-signal-left { left: 2%; top: 57%; }
.floating-signal-right { right: 2%; top: 35%; }
@keyframes phone-float { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-9px); } }

.principles { border-block: 1px solid var(--line-soft); background: rgba(255,255,255,.017); }
.principle-grid { min-height: 104px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.principle-grid > div { display: flex; align-items: center; gap: 13px; padding: 0 25px; border-right: 1px solid var(--line-soft); }
.principle-grid > div:first-child { padding-left: 0; }
.principle-grid > div:last-child { border-right: 0; }
.principle-grid span { color: var(--orange); font: 650 .57rem/1 ui-monospace, monospace; }
.principle-grid strong { color: #b9b9b9; font-size: .76rem; font-weight: 540; }

.section { padding-top: 155px; }
.section-heading { max-width: 760px; margin-bottom: 65px; }
.section-heading h2,
.story-copy h2,
.add-copy h2,
.download-inner h2 { margin: 0; font-size: clamp(3rem, 6vw, 5.65rem); line-height: 1; letter-spacing: -.03em; }
.section-heading > p:last-child,
.story-copy > p,
.add-copy > p { max-width: 620px; margin: 25px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.72; }

.feature-panel { position: relative; min-height: 720px; display: grid; grid-template-columns: .83fr 1.17fr; align-items: center; gap: 7%; overflow: hidden; margin-bottom: 24px; padding: 58px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); }
.feature-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,.025), transparent 32%); }
.feature-copy { position: relative; z-index: 5; }
.feature-index { color: var(--orange); font: 650 .62rem/1.2 ui-monospace, monospace; letter-spacing: .14em; }
.feature-copy h3,
.card-copy h3 { margin: 23px 0 0; font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.04; letter-spacing: -.025em; }
.feature-copy > p,
.card-copy > p { margin: 22px 0 0; color: var(--muted); font-size: .96rem; line-height: 1.72; }
.feature-points { display: grid; gap: 13px; margin: 28px 0 0; padding: 25px 0 0; border-top: 1px solid var(--line-soft); list-style: none; }
.feature-points li { display: flex; gap: 11px; color: #c1c1c1; font-size: .81rem; }
.feature-points span { color: var(--orange); }
.feature-visual { position: relative; min-height: 600px; display: grid; place-items: center; }
.visual-glow { position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(255,150,45,.17), transparent 67%); filter: blur(9px); }
.feature-phone { width: 276px; aspect-ratio: 1206 / 2622; }
.calendar-visual .feature-phone { transform: rotate(3deg); }
.date-chip { position: absolute; z-index: 4; right: 0; bottom: 15%; min-width: 186px; padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(23,23,25,.84); box-shadow: 0 25px 55px rgba(0,0,0,.45); backdrop-filter: blur(20px); }
.date-chip small, .date-chip strong, .date-chip span { display: block; }
.date-chip small { color: var(--orange); font: 650 .51rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.date-chip strong { margin-top: 8px; font-size: 1.4rem; }
.date-chip span { margin-top: 4px; color: #888; font-size: .66rem; }
.feature-panel-insights { grid-template-columns: 1.1fr .9fr; background: radial-gradient(circle at 20% 50%, rgba(116,153,255,.09), transparent 40%), linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.016)); }
.feature-panel-insights .feature-phone { transform: rotate(-3deg); }
.insight-orbit { position: absolute; width: 470px; height: 260px; border: 1px solid rgba(128,179,255,.14); border-radius: 50%; transform: rotate(-19deg); }
.insight-orbit::after { content: ""; position: absolute; right: 13%; top: 10%; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 15px var(--blue); }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 30px; }
.metric-row > div { padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(255,255,255,.025); }
.metric-row small, .metric-row strong { display: block; }
.metric-row small { color: #666; font: 600 .49rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.metric-row strong { margin-top: 8px; color: #cfcfcf; font-size: .7rem; }

.screen-story { overflow: hidden; margin-top: 155px; padding: 150px 0; border-block: 1px solid var(--line-soft); background: radial-gradient(circle at 75% 55%, rgba(255,150,45,.08), transparent 30%), #050505; }
.story-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 7%; }
.story-copy { position: relative; z-index: 5; }
.story-copy .eyebrow { margin-bottom: 24px; }
.story-stat { display: grid; gap: 7px; margin-top: 34px; padding-top: 25px; border-top: 1px solid var(--line); }
.story-stat span { color: var(--orange); font: 650 .56rem/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.story-stat strong { color: #c8c8c8; font-size: .82rem; }
.dual-phones { position: relative; min-height: 735px; }
.dual-phone { position: absolute; top: 50%; width: 286px; aspect-ratio: 1206 / 2622; }
.dual-phone-back { z-index: 1; left: 5%; transform: translateY(-50%) rotate(-8deg); opacity: .67; filter: brightness(.8); }
.dual-phone-front { z-index: 2; right: 7%; transform: translateY(-50%) rotate(5deg); }

.add-section { padding-bottom: 20px; }
.add-layout { min-height: 820px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8%; padding: 70px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 22% 50%, rgba(255,156,55,.11), transparent 32%), var(--surface); }
.add-phone-wrap { position: relative; min-height: 690px; display: grid; place-items: center; }
.add-halo { position: absolute; width: 450px; height: 450px; border: 1px solid rgba(255,163,62,.14); border-radius: 50%; box-shadow: 0 0 90px rgba(255,150,45,.08); }
.add-phone { position: relative; z-index: 2; width: 290px; transform: rotate(-3deg); }
.add-copy { position: relative; z-index: 3; }
.add-copy .eyebrow { margin-bottom: 23px; }
.steps { display: grid; gap: 0; margin: 38px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.steps li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.steps li > span { color: var(--orange); font: 650 .58rem/1.4 ui-monospace, monospace; }
.steps strong { font-size: .88rem; }
.steps p { margin: 6px 0 0; color: #777; font-size: .76rem; line-height: 1.55; }

.wellbeing-section { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.wellbeing-card { position: relative; min-height: 710px; overflow: hidden; padding: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); }
.wellbeing-card .card-copy { position: relative; z-index: 5; }
.card-copy h3 { font-size: clamp(2rem, 3.7vw, 3.35rem); }
.card-phone { position: absolute; left: 50%; bottom: -245px; width: 280px; aspect-ratio: 1206 / 2622; transform: translateX(-50%); }
.health-card { background: radial-gradient(circle at 50% 75%, rgba(39,180,75,.1), transparent 38%), linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); }
.privacy-card { display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 50% 22%, rgba(255,157,58,.13), transparent 35%), linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); }
.settings-peek { position: absolute; z-index: 1; right: -45px; top: 24px; width: 195px; aspect-ratio: 1206 / 2622; opacity: .2; filter: saturate(.75); transform: rotate(8deg); mask-image: linear-gradient(to bottom, black 30%, transparent 90%); }
.privacy-mark { position: absolute; z-index: 3; left: 50%; top: 105px; width: 126px; height: 142px; display: grid; place-items: center; transform: translateX(-50%); clip-path: polygon(50% 0, 94% 17%, 88% 73%, 50% 100%, 12% 73%, 6% 17%); border: 1px solid rgba(255,160,55,.5); background: radial-gradient(circle at 50% 30%, rgba(255,160,55,.2), rgba(255,160,55,.035)); box-shadow: 0 0 70px rgba(255,145,45,.16); }
.privacy-mark span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: #151009; background: var(--orange); font-weight: 850; }
.privacy-card .card-copy a { display: inline-flex; gap: 9px; margin-top: 23px; color: #d4d4d4; font-size: .78rem; font-weight: 650; text-decoration: none; }
.privacy-card .card-copy a span { color: var(--orange); }
.privacy-lines { position: absolute; left: 50%; top: 170px; width: 430px; height: 180px; transform: translateX(-50%); }
.privacy-lines i { position: absolute; inset: 0; border: 1px solid rgba(255,170,60,.12); border-radius: 50%; transform: rotate(10deg); }
.privacy-lines i:nth-child(2) { transform: rotate(-24deg) scale(.82); border-color: rgba(128,179,255,.08); }
.privacy-lines i:nth-child(3) { transform: rotate(38deg) scale(.64); }

.pricing-section { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: 7%; padding-bottom: 120px; }
.pricing-heading { position: sticky; top: 125px; }
.pricing-grid { display: grid; gap: 18px; }
.price-card { position: relative; overflow: hidden; padding: 38px; border: 1px solid var(--line); border-radius: 26px; background: rgba(255,255,255,.025); }
.price-card-pro { border-color: rgba(255,160,55,.36); background: radial-gradient(circle at 100% 0, rgba(255,150,45,.13), transparent 43%), rgba(255,255,255,.035); }
.price-label { color: var(--orange); font: 650 .6rem/1 ui-monospace, monospace; letter-spacing: .14em; }
.price { margin-top: 23px; }
.price strong, .price span { display: block; }
.price strong { font-size: 3.1rem; line-height: .98; letter-spacing: -.055em; }
.price-card-pro .price strong { max-width: 370px; font-size: 2.45rem; }
.price span { margin-top: 8px; color: #666; font-size: .72rem; }
.price-card ul { display: grid; gap: 14px; margin: 30px 0; padding: 27px 0 0; border-top: 1px solid var(--line); list-style: none; }
.price-card li { display: flex; gap: 12px; color: #b9b9b9; font-size: .82rem; }
.price-card li span { color: var(--orange); }
.price-card > a { display: block; padding: 13px 17px; border: 1px solid var(--line); border-radius: 13px; color: #ddd; background: rgba(255,255,255,.04); font-size: .76rem; font-weight: 650; text-align: center; text-decoration: none; }
.price-card-pro > a { color: #17110b; border-color: var(--orange); background: var(--orange); }
.popular { position: absolute; right: 25px; top: 25px; color: var(--orange); font: 650 .52rem/1 ui-monospace, monospace; letter-spacing: .12em; }

.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 8%; padding-bottom: 150px; }
.faq-heading h2 { font-size: clamp(2.8rem, 5vw, 4.7rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 24px; padding: 25px 2px; color: #ddd; cursor: pointer; font-size: .94rem; font-weight: 620; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--orange); transition: transform 180ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { margin: -3px 0 27px; padding-right: 55px; color: #828282; font-size: .86rem; line-height: 1.7; }

.download-section { position: relative; overflow: hidden; padding: 165px 0; border-top: 1px solid var(--line-soft); background: radial-gradient(circle at 50% 58%, rgba(255,150,45,.12), transparent 34%), #050505; }
.download-inner { position: relative; z-index: 3; max-width: 820px; text-align: center; }
.download-inner .orbit-logo { margin-bottom: 25px; }
.download-inner .eyebrow { justify-content: center; }
.download-inner > p:not(.eyebrow) { max-width: 620px; margin: 25px auto 0; color: var(--muted); line-height: 1.7; }
.download-inner .primary-cta { margin-top: 33px; }
.primary-cta-disabled { cursor: default; }
.primary-cta-disabled:hover { transform: none; box-shadow: 0 15px 45px rgba(0,0,0,.35); }
.launch-note { display: block; margin-top: 17px; color: #555; font-size: .65rem; }
.download-orbit { position: absolute; left: 50%; border: 1px solid rgba(255,160,55,.1); border-radius: 50%; transform: translateX(-50%); }
.download-orbit-one { bottom: -580px; width: 1200px; height: 830px; }
.download-orbit-two { bottom: -440px; width: 850px; height: 580px; border-color: rgba(128,179,255,.07); }

.site-footer { border-top: 1px solid var(--line-soft); background: #050505; }
.footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 68px 0 58px; }
.footer-main > div:first-child p { margin: 15px 0 0; color: #666; font-size: .76rem; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.footer-links > div { display: grid; align-content: start; gap: 9px; }
.footer-links strong { margin-bottom: 7px; color: #ddd; font-size: .72rem; }
.footer-links a { color: #707070; font-size: .74rem; text-decoration: none; }
.footer-links a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; padding: 21px 0 28px; border-top: 1px solid var(--line-soft); color: #555; font-size: .65rem; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 6px; }

@media (max-width: 1060px) {
  .hero { min-height: 1110px; }
  .phone-left { left: 5%; }
  .phone-right { right: 5%; }
  .floating-signal-left { left: 0; }
  .floating-signal-right { right: 0; }
  .feature-panel { gap: 3%; padding: 42px; }
  .story-grid { grid-template-columns: .75fr 1.25fr; gap: 2%; }
  .dual-phone { width: 265px; }
  .add-layout { gap: 4%; padding: 50px; }
}

@media (max-width: 860px) {
  :root { --shell: min(100% - 36px, 680px); --radius: 28px; }
  .site-nav { height: 68px; }
  .nav-links { display: none; }
  .nav-cta { padding-inline: 13px; }
  .hero { min-height: 1000px; padding-top: 78px; }
  .hero h1 { font-size: clamp(3.5rem, 12vw, 5.7rem); }
  .hero-stage { height: 620px; margin-top: 60px; }
  .phone-main { width: 280px; }
  .phone-side { top: 95px; width: 210px; opacity: .48; }
  .phone-left { left: -3%; }
  .phone-right { right: -3%; }
  .floating-signal { display: none; }
  .stage-orbit-one { width: 720px; }
  .stage-orbit-two { width: 530px; }
  .principle-grid { grid-template-columns: 1fr 1fr; padding-block: 10px; }
  .principle-grid > div { min-height: 64px; }
  .principle-grid > div:nth-child(2) { border-right: 0; }
  .principle-grid > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .feature-panel,
  .feature-panel-insights { grid-template-columns: 1fr; min-height: 1080px; gap: 35px; padding: 42px; }
  .feature-panel-insights .feature-visual { order: 2; }
  .feature-visual { min-height: 650px; }
  .screen-story { padding-block: 120px; }
  .story-grid { grid-template-columns: 1fr; }
  .dual-phones { min-height: 720px; margin-top: 50px; }
  .dual-phone { width: 280px; }
  .dual-phone-back { left: 4%; }
  .dual-phone-front { right: 4%; }
  .add-layout { grid-template-columns: 1fr; padding: 45px; }
  .add-phone-wrap { order: 2; }
  .wellbeing-section { grid-template-columns: 1fr; }
  .wellbeing-card { min-height: 720px; }
  .pricing-section { grid-template-columns: 1fr; }
  .pricing-heading { position: static; }
  .faq-section { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: 45px; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 28px); --radius: 24px; }
  .brand-name { font-size: .65rem; letter-spacing: .18em; }
  .nav-cta { font-size: .65rem; }
  .nav-cta span { display: none; }
  .hero { min-height: 870px; padding-top: 60px; }
  .hero .eyebrow { font-size: .56rem; letter-spacing: .12em; }
  .hero h1 { font-size: clamp(3.25rem, 16vw, 4.55rem); line-height: .94; }
  .hero-lede { font-size: .96rem; }
  .hero-actions { flex-direction: column; gap: 17px; }
  .availability { font-size: .6rem; }
  .hero-stage { height: 520px; margin-top: 48px; }
  .phone { border-width: 5px; border-radius: 39px; }
  .phone-main { width: 236px; }
  .phone-side { top: 72px; width: 150px; }
  .phone-left { left: -12%; transform: rotateY(7deg) rotateZ(-8deg); }
  .phone-right { right: -12%; transform: rotateY(-7deg) rotateZ(8deg); }
  .stage-orbit-one { width: 520px; height: 190px; }
  .stage-orbit-two { width: 410px; height: 145px; }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid > div { padding-inline: 0; border-right: 0; border-top: 1px solid var(--line-soft); }
  .principle-grid > div:first-child { border-top: 0; }
  .section { padding-top: 105px; }
  .section-heading { margin-bottom: 43px; }
  .section-heading h2,
  .story-copy h2,
  .add-copy h2,
  .download-inner h2 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .section-heading > p:last-child,
  .story-copy > p,
  .add-copy > p { font-size: .9rem; }
  .feature-panel,
  .feature-panel-insights { min-height: 930px; padding: 29px; }
  .feature-copy h3,
  .card-copy h3 { font-size: 2.35rem; }
  .feature-visual { min-height: 550px; }
  .feature-phone { width: 236px; }
  .date-chip { right: -13px; min-width: 158px; }
  .metric-row { grid-template-columns: 1fr; }
  .metric-row > div { display: flex; align-items: center; justify-content: space-between; }
  .metric-row strong { margin-top: 0; }
  .screen-story { margin-top: 105px; padding-block: 105px; }
  .dual-phones { min-height: 590px; }
  .dual-phone { width: 218px; }
  .dual-phone-back { left: -5%; }
  .dual-phone-front { right: -5%; }
  .add-layout { min-height: auto; padding: 29px; }
  .add-phone-wrap { min-height: 590px; }
  .add-halo { width: 320px; height: 320px; }
  .add-phone { width: 235px; }
  .wellbeing-card { min-height: 650px; padding: 30px; }
  .card-phone { width: 235px; bottom: -190px; }
  .privacy-mark { top: 88px; }
  .privacy-lines { top: 155px; width: 340px; }
  .price-card { padding: 29px; }
  .price strong { font-size: 2.6rem; }
  .price-card-pro .price strong { font-size: 2.05rem; }
  .popular { position: static; margin-bottom: 20px; }
  .faq-list details p { padding-right: 10px; }
  .download-section { padding-block: 115px; }
  .footer-links { gap: 20px; }
  .footer-bottom { align-items: flex-start; gap: 10px; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}