:root {
  color-scheme: light;
  --background: #f6f2ea;
  --ink: #1b2025;
  --muted: #62645f;
  --coral: #d65a3d;
  --halo: #eae8dc;
  --phone-border: #263034;
  --phone-shadow: #27332f2b;
  --phone-shadow-small: #27332f22;
  --brand-icon: url("./icon.svg");
  --brand-icon-border: transparent;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #151c1e;
    --ink: #f5f2ea;
    --muted: #bdc5c0;
    --coral: #d6593d;
    --halo: #283a37;
    --phone-border: #344647;
    --phone-shadow: #00000066;
    --phone-shadow-small: #00000040;
    --brand-icon: url("./icon-dark.svg");
    --brand-icon-border: #ffffff40;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.container { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }

.brand { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 36px; color: var(--coral); font-size: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.brand-icon { display: block; flex: none; width: 56px; height: 56px; border-radius: 15px; background: var(--brand-icon) center / cover; box-shadow: 0 3px 10px #26292012, 0 0 0 1px var(--brand-icon-border); }
.brand-link { text-decoration: none; }
.brand-link:hover, .brand-link:focus-visible { opacity: .8; }

.site-footer { padding-block: 0 36px; color: var(--muted); font-size: 14px; }
.site-footer a, .policy-content a { color: var(--coral); text-underline-offset: 3px; }
.site-footer a:hover, .policy-content a:hover { text-decoration-thickness: 2px; }

.policy-header { padding-top: 42px; }
.policy-header .brand { margin-bottom: 0; }
.policy-content { max-width: 800px; padding-block: 50px 72px; }
.policy-content h1 { margin-bottom: 12px; font-size: clamp(48px, 7vw, 72px); }
.policy-content h2 { margin: 0 0 16px; font-size: 25px; line-height: 1.25; letter-spacing: -.02em; }
.policy-content p { margin-bottom: 18px; line-height: 1.7; }
.policy-content section { margin-top: 48px; }
.policy-date { color: var(--muted); font-size: 14px; }

.hero { min-height: 680px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 58px; padding-block: 84px 80px; }
.hero-copy { padding-bottom: 26px; }
h1, p { margin-top: 0; }
h1 { max-width: 600px; margin-bottom: 24px; font-size: clamp(64px, 7vw, 94px); line-height: 1.02; font-weight: 780; letter-spacing: -.055em; }
.intro { max-width: 420px; margin-bottom: 24px; color: var(--muted); font-size: 19px; line-height: 1.6; }
.app-store-badge { display: block; width: 150px; height: auto; }

.preview-area { position: relative; display: grid; place-items: center; min-height: 650px; }
.preview-area::before { content: ""; position: absolute; width: min(510px, 100%); aspect-ratio: 1; border-radius: 50%; background: var(--halo); }
.hero-picture { position: relative; display: block; width: min(300px, 74%); }
.hero-shot { display: block; width: 100%; height: auto; border: 7px solid var(--phone-border); border-radius: 42px; box-shadow: 0 25px 50px var(--phone-shadow), 0 5px 12px var(--phone-shadow-small); transform: rotate(3deg); }

@media (max-width: 850px) {
  .hero { gap: 12px; padding-block: 65px 85px; }
  h1 { font-size: clamp(55px, 7vw, 70px); }
}
@media (max-width: 700px) {
  .container { width: min(100% - 36px, 540px); }
  .brand { margin-bottom: 32px; font-size: 16px; }
  .brand-icon { width: 48px; height: 48px; }
  .hero { display: block; padding-block: 66px 50px; }
  .hero-copy { padding: 0; }
  h1 { font-size: clamp(58px, 12vw, 80px); }
  .intro { font-size: 17px; }
  .preview-area { min-height: 0; margin-top: 32px; }
  .hero-picture { width: min(300px, 78%); }
  .policy-header { padding-top: 30px; }
  .policy-content { padding-block: 38px 56px; }
  .policy-content h2 { font-size: 22px; }
  .policy-content section { margin-top: 38px; }
}
@media (max-width: 390px) {
  .hero-picture { width: min(280px, 82%); }
  .hero-shot { transform: rotate(2deg); }
}