:root {
  color-scheme: light dark;
  --ink: #071a34;
  --muted: #5e6f88;
  --soft: #f3f5f7;
  --soft-pressed: #e7ecf2;
  --line: #dce2ea;
  --blue: #0a6ed1;
  --night: #0d121a;
  --night-card: #171e29;
  --night-line: #323d4d;
  --night-muted: #aab5c5;
  --night-blue: #5aa7f8;
  --paper: #fcfbf9;
  --white: #fff;
  --content: 1440px;
  --radius: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.shell { margin: 0 auto; max-width: var(--content); padding-inline: clamp(20px, 5vw, 72px); }
.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 104px;
}
.brand { align-items: center; display: inline-flex; gap: 12px; text-decoration: none; }
.brand img { border-radius: 10px; height: 42px; width: 42px; }
.brand span { font-size: 28px; font-weight: 720; letter-spacing: -0.7px; }
.nav { align-items: center; display: flex; gap: clamp(18px, 3vw, 36px); }
.nav a { color: #234f8f; font-size: 17px; text-decoration: none; }
.nav a:hover, .nav a:focus-visible { color: var(--blue); text-decoration: underline; text-underline-offset: 5px; }
.button {
  align-items: center;
  background: var(--ink);
  border-radius: 12px;
  color: white !important;
  display: inline-flex;
  font-size: 17px;
  font-weight: 650;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  text-decoration: none !important;
}
.hero { align-items: center; display: grid; gap: clamp(36px, 5vw, 80px); grid-template-columns: minmax(0, .86fr) minmax(600px, 1.4fr); min-height: 650px; padding-block: 38px 72px; }
.hero-copy { max-width: 580px; }
.eyebrow { color: var(--muted); font-size: 13px; font-weight: 750; letter-spacing: 3.5px; margin: 0 0 22px; text-transform: uppercase; }
h1 { font-size: clamp(56px, 5.2vw, 78px); letter-spacing: -3.5px; line-height: .99; margin: 0; }
.lede { color: #476795; font-size: clamp(22px, 2vw, 30px); line-height: 1.35; margin: 28px 0 40px; }
.store-badge { align-items: center; background: #050505; border: 1px solid #333; border-radius: 12px; color: white; display: inline-flex; gap: 12px; min-height: 74px; padding: 10px 21px; text-decoration: none; }
.store-badge .apple { font-size: 42px; line-height: 1; }
.store-badge small, .store-badge strong { display: block; }
.store-badge small { font-size: 13px; }
.store-badge strong { font-size: 25px; font-weight: 520; line-height: 1; }
.price-note { color: #476795; font-size: 17px; line-height: 1.45; margin: 24px 0 0; }
.phone-stage { align-items: end; display: flex; justify-content: center; min-height: 580px; position: relative; }
.phone {
  background: var(--paper);
  border: 7px solid #08090c;
  border-radius: 48px;
  box-shadow: 0 22px 42px rgba(7,26,52,.2), inset 0 0 0 2px #4c4c50;
  color: var(--ink);
  flex: 0 0 258px;
  min-height: 525px;
  overflow: hidden;
  padding: 32px 14px 68px;
  position: relative;
}
.phone::before { background: #050608; border-radius: 999px; content: ""; height: 22px; left: 50%; position: absolute; top: 10px; transform: translateX(-50%); width: 76px; }
.phone.side { flex-basis: 226px; min-height: 476px; padding-top: 48px; transform: translateY(-18px) rotate(-2deg); }
.phone.side:last-child { transform: translateY(-18px) rotate(2deg); }
.phone.center { z-index: 2; }
.phone-head { align-items: start; display: flex; justify-content: space-between; min-height: 54px; }
.phone-date { color: #294f87; font-size: 11px; line-height: 1.45; text-transform: uppercase; }
.phone-date strong { display: block; letter-spacing: 1.2px; }
.gear { color: var(--blue); font-size: 20px; }
.phone-title { align-items: baseline; display: flex; gap: 8px; }
.phone-title h2 { font-size: 33px; letter-spacing: -1.2px; margin: 0; }
.phone-title .count { color: var(--muted); font-size: 18px; }
.phone-subtitle { color: var(--muted); font-size: 14px; margin: 2px 0 14px; }
.tasks { display: grid; gap: 7px; }
.task { align-items: center; background: var(--soft); border-radius: 10px; display: grid; font-size: 12px; gap: 7px; grid-template-columns: 22px minmax(0,1fr) 20px 20px; min-height: 43px; padding: 7px 8px; }
.check { border: 1.7px solid currentColor; border-radius: 50%; height: 20px; width: 20px; }
.drag { color: var(--muted); font-size: 0; text-align: center; }
.drag::before { content: "≡"; font-size: 18px; font-weight: 500; line-height: 1; }
.more { color: var(--ink); font-size: 18px; letter-spacing: 1px; }
.add-task { background: linear-gradient(120deg, #0769e8, #0989ff); border-radius: 9px; color: #fff; font-size: 14px; margin-top: 12px; padding: 12px; text-align: center; }
.completed { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; margin-top: 17px; padding-top: 14px; }
.completed strong { color: var(--muted); display: block; font-size: 13px; margin-bottom: 9px; }
.completed p { margin: 7px 0; text-decoration: line-through; }
.tabs { align-items: center; background: rgba(252,251,249,.96); border-top: 1px solid var(--line); bottom: 0; display: flex; font-size: 10px; justify-content: space-around; left: 0; padding: 13px 7px 12px; position: absolute; right: 0; }
.tabs span { color: var(--muted); }
.tabs .active { color: var(--blue); font-weight: 650; }
.bucket-strip { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); padding-block: 30px 42px; }
.bucket { min-height: 105px; padding: 0 clamp(18px, 4vw, 52px); }
.bucket:first-child { padding-left: 0; }
.bucket + .bucket { border-left: 1px solid var(--line); }
.bucket h3 { font-size: 13px; letter-spacing: 3px; margin: 0 0 15px; text-transform: uppercase; }
.bucket p { font-size: 20px; margin: 0 0 8px; }
.bucket small { color: #5876a6; font-size: 16px; line-height: 1.45; }
.dark-section { background: radial-gradient(circle at 67% 24%, #16365f 0, #101c2c 25%, var(--night) 63%); color: #f5f7fa; padding-block: 92px 54px; }
.dark-grid { align-items: center; display: grid; gap: 64px; grid-template-columns: minmax(330px,.7fr) minmax(600px,1.35fr); }
.dark-copy h2 { font-size: clamp(50px,5vw,72px); letter-spacing: -3px; line-height: 1.02; margin: 0; }
.dark-copy .lede { color: var(--night-muted); max-width: 540px; }
.dark-section .phone { background: var(--night); color: #f5f7fa; }
.dark-section .phone::before { background: #000; }
.dark-section .phone-date { color: #b7cae7; }
.dark-section .phone-subtitle, .dark-section .phone-title .count { color: var(--night-muted); }
.dark-section .task { background: var(--night-card); }
.dark-section .drag { color: var(--night-muted); }
.dark-section .more { color: #dce6f5; }
.dark-section .tabs { background: rgba(13,18,26,.97); border-color: var(--night-line); }
.dark-section .tabs span { color: var(--night-muted); }
.dark-section .tabs .active, .dark-section .gear { color: var(--night-blue); }
.dark-section .completed { border-color: var(--night-line); color: var(--night-muted); }
.trust-strip { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 46px; text-align: center; }
.trust-item { color: #d7e1ef; font-size: 16px; min-height: 72px; padding: 6px 24px; }
.trust-item + .trust-item { border-left: 1px solid #4a5a70; }
.trust-icon { display: block; font-size: 30px; margin-bottom: 10px; }
.closing { background: var(--paper); color: var(--ink); padding-block: 54px 30px; text-align: center; }
.closing h2 { font-size: clamp(38px,4vw,54px); letter-spacing: -2px; margin: 0 0 18px; }
.closing .price-note { margin: 15px 0 0; }
.site-footer { align-items: center; border-top: 1px solid var(--line); display: flex; justify-content: space-between; margin-top: 30px; min-height: 90px; text-align: left; }
.site-footer .brand img { height: 34px; width: 34px; }
.site-footer .brand span { font-size: 20px; }
.footer-links { align-items: center; color: #315c9c; display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-end; }
.footer-links a { text-decoration: none; }
.legal-page { min-height: calc(100vh - 194px); padding-block: 54px 90px; }
.legal-content { max-width: 760px; }
.legal-content h1 { font-size: clamp(44px,6vw,68px); }
.legal-content h2 { font-size: 24px; letter-spacing: -.4px; margin: 38px 0 12px; }
.legal-content p, .legal-content li { color: #415b7f; font-size: 17px; line-height: 1.7; }
.legal-content a { color: var(--blue); }
.updated { color: var(--muted); margin: 18px 0 40px; }
.support-card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 36px; padding: 28px; }
.support-card h2 { margin-top: 0; }

@media (max-width: 1080px) {
  .hero, .dark-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 60px; }
  .hero-copy, .dark-copy { max-width: 720px; }
  .phone-stage { margin-inline: auto; width: min(100%,760px); }
}

@media (max-width: 700px) {
  .site-header { min-height: 82px; }
  .brand img { height: 36px; width: 36px; }
  .brand span { font-size: 23px; }
  .nav > a:not(.button) { display: none; }
  .button { min-height: 44px; padding-inline: 18px; }
  .hero { gap: 22px; min-height: auto; padding-block: 46px 54px; }
  h1 { font-size: clamp(48px,15vw,64px); }
  .lede { font-size: 21px; margin-block: 24px 32px; }
  .phone-stage { justify-content: flex-start; min-height: 515px; overflow-x: auto; padding: 18px 20px 34px; scroll-snap-type: x mandatory; width: calc(100% + 40px); margin-left: -20px; }
  .phone, .phone.side { flex-basis: 250px; min-height: 480px; scroll-snap-align: center; transform: none !important; }
  .bucket-strip { gap: 0; grid-template-columns: 1fr; }
  .bucket { min-height: auto; padding: 24px 0; }
  .bucket + .bucket { border-left: 0; border-top: 1px solid var(--line); }
  .dark-section { padding-top: 72px; }
  .dark-copy h2 { font-size: 48px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-item { padding-block: 22px; }
  .trust-item + .trust-item { border-left: 0; border-top: 1px solid #4a5a70; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 26px; padding-block: 28px; }
  .footer-links { gap: 18px; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }