.mobile-site { color: #202221; }
.container { width: 86.2%; max-width: 1100px; }
.site-header { height: clamp(74px, 9.56vw, 108px); border: 0; background: #f7f2e9; }
.brand { gap: 15px; font-size: clamp(23px, 3.2vw, 34px); font-weight: 500; }
.brand .app-icon { width: clamp(36px, 4.7vw, 48px); height: clamp(36px, 4.7vw, 48px); border-radius: 22%; }
.header-download { display: none; }
.header-actions > .language-picker { display: none; }
.menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
.menu-toggle .icon { width: clamp(26px, 3.4vw, 34px); height: auto; }
.menu-close, .menu-toggle[aria-expanded=true] .menu-open { display: none; }
.menu-toggle[aria-expanded=true] .menu-close { display: block; }
.navigation { display: none; position: absolute; top: 85%; left: auto; right: 6.9%; transform: none; width: min(290px, 86.2%); background: #fffcf6; border: 1px solid var(--line); box-shadow: 0 12px 24px #29251d12; border-radius: 14px; padding: 14px; font-size: 16px; }
.navigation.is-open { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.navigation a, .navigation button { padding: 12px; text-align: left; }
.navigation .mobile-language-trigger { display: block; }
.mobile-nav-download { display: block; }
.hero { height: clamp(320px, 59.1vw, 665px); background-image: url('../images/reading-room-mobile.webp'); background-position: right bottom; }
.hero::before { background: linear-gradient(90deg, #faf7f1d9, #faf7f15c 57%, transparent); }
.hero-inner { padding-top: 5.8vw; padding-bottom: 0; }
.hero-copy { width: 60%; max-width: none; }
h1 { font-size: clamp(34px, 7.2vw, 81px); font-weight: 500; line-height: 1.025; letter-spacing: -1.6px; }
.tagline { font-size: clamp(14px, 2.28vw, 25px); line-height: 1.5; margin-top: 2.8vw; white-space: nowrap; max-width: none; }
.app-download { border-radius: 100px; min-height: 0; padding: 1.6vw 4.2vw; gap: 1.4vw; margin-top: 3.9vw; font-size: clamp(13px, 1.95vw, 22px); line-height: 1.1; text-align: left; }
.app-download .icon { width: clamp(25px, 4.3vw, 48px); height: auto; }
.app-download strong { font-size: 1.22em; font-weight: 500; }
.devices { top: 0; bottom: auto; right: 8.5%; width: 29.5%; height: 100%; }
.phone { width: 100%; right: 0; bottom: 3.5vw; padding: .65vw; border-radius: 4.4vw; }
.phone img { border-radius: 3.5vw; }
.phone::before { top: 20%; height: 7%; box-shadow: 0 35px #70736b; }
.features { display: block; padding-block: 0; }
.feature { display: grid; grid-template-columns: 46% 46.5%; justify-content: space-between; gap: 3%; align-items: center; min-height: 0; padding-block: 4.4vw 3.7vw; border-bottom: 1px solid #ddd9d2; }
.feature:last-child { border: 0; padding-bottom: 3.7vw; }
.feature h2 { font-size: clamp(23px, 4.5vw, 50px); font-weight: 500; line-height: 1.1; letter-spacing: -.8px; }
.feature-copy > p { font-size: clamp(13px, 2.27vw, 25px); line-height: 1.35; margin-top: 1.8vw; max-width: 94%; color: #606260; }
.feature > .preview-card { margin: 0; width: 100%; height: auto; max-width: none; border-radius: 2.4vw; box-shadow: 0 10px 24px #47372210; }
.preview-card.reading-settings { aspect-ratio: 1.71; }
.preview-card.library-detail { aspect-ratio: 1.42; padding: 1vw; }
.preview-card.reading-progress { aspect-ratio: 1.65; }
.preview-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.site-footer { font-size: clamp(13px, 1.8vw, 19px); }
@media (min-width: 1200px) { .hero-inner { padding-top: 70px; } .tagline { margin-top: 32px; } .app-download { margin-top: 42px; padding: 18px 45px; } .phone { max-width: 290px; border-radius: 43px; padding: 8px; } .phone img { border-radius: 34px; } .feature { padding-block: 50px; } }
@media (max-width: 600px) {
  .container { width: calc(100% - 36px); }
  .site-header { height: 72px; }
  .brand { font-size: 23px; gap: 9px; }
  .hero { height: 330px; }
  .hero-inner { padding-top: 27px; }
  .hero-copy { width: 60%; }
  h1 { font-size: clamp(29px, 7.45vw, 43px); letter-spacing: -1px; }
  .tagline { font-size: 14px; line-height: 1.5; margin-top: 19px; white-space: normal; max-width: 195px; padding-right: 8px; }
  .app-download { font-size: 12px; gap: 6px; padding: 11px 16px; margin-top: 22px; }
  .app-download .icon { width: 25px; }
  .devices { width: 35%; right: 0; }
  .phone { bottom: 29px; padding: 4px; border-radius: 22px; }
  .phone img { border-radius: 17px; }
  .feature { grid-template-columns: 47% 48%; gap: 5%; padding-block: 28px; }
  .feature:last-child { padding-bottom: 28px; }
  .feature h2 { font-size: clamp(22px, 5.4vw, 30px); letter-spacing: -.6px; }
  .feature-copy > p { font-size: 13px; line-height: 1.5; max-width: none; margin-top: 10px; }
  .feature > .preview-card { border-radius: 11px; }
  .footer-inner { width: calc(100% - 36px); }
}
@media (max-width: 359px) {
  .brand { font-size: 21px; }
  .hero { height: 350px; }
  .hero-copy { width: 64%; }
  h1 { font-size: 27px; }
  .tagline { max-width: 160px; font-size: 13px; }
  .app-download { padding-inline: 12px; }
  .devices { width: 34%; }
  .feature h2 { font-size: 21px; }
  .feature-copy > p { font-size: 12px; }
}

@media (min-width: 601px) {
  .feature { align-items: start; }
  .feature-copy { padding-top: 10px; }
  .feature:not(:first-child) { padding-block: 2.9vw; }
  .feature-copy > p { max-width: 88%; }
}