.button-outline { color: var(--green-dark); border: 2px solid var(--green); background: white; }
.app-hero { overflow: hidden; background: radial-gradient(circle at 85% 15%, #d9f7da, transparent 28%), linear-gradient(145deg, #fff7dc, #e9fff3 75%); }
.app-hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); width: min(1120px, calc(100% - 2rem)); min-height: 660px; margin: auto; padding: clamp(3rem, 6vw, 5rem) 0; }
.app-hero-copy h1 { max-width: 750px; font-size: clamp(3rem, 5.6vw, 5.6rem); }
.app-hero-copy > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: clamp(1.08rem, 1.8vw, 1.28rem); }
.app-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero-phone { justify-self: center; margin: 0; text-align: center; }
.hero-phone img { width: min(285px, 100%); height: auto; border: 7px solid #203f35; border-radius: 36px; box-shadow: 0 25px 65px rgba(20, 72, 59, .25); }
.hero-phone figcaption { margin-top: .8rem; color: var(--muted); font-size: .85rem; font-weight: 750; }
.app-highlights { display: grid; grid-template-columns: repeat(4, 1fr); width: min(1100px, calc(100% - 2rem)); margin: -20px auto 0; position: relative; z-index: 1; border-radius: 24px; background: white; box-shadow: var(--shadow); }
.app-highlights div { display: grid; gap: .1rem; padding: 1.25rem 1rem; text-align: center; }
.app-highlights div + div { border-left: 1px solid #dcece5; }
.app-highlights strong { color: var(--green); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; }
.app-highlights span { color: var(--muted); font-size: .9rem; font-weight: 750; }
.app-section { padding: clamp(4rem, 8vw, 7rem) max(1rem, calc((100% - 1120px) / 2)); }
.app-section-heading { max-width: 750px; margin-bottom: 2.5rem; }
.app-section-heading > p:last-child, .feature-copy p, .books-middle p, .app-devices p:not(.eyebrow) { color: var(--muted); font-size: 1.08rem; }
.feature-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.feature-copy h3, .books-middle h3 { font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -.035em; }
.feature-copy strong, .books-middle strong { color: var(--green-dark); }
.feature-number { display: block; margin-bottom: 1.5rem; color: #9ac8b7; font-size: 4rem; font-weight: 950; line-height: 1; }
.shot-card { width: min(100%, 330px); min-width: 0; margin: 0 auto; padding: .8rem; border: 1px solid #dcece5; border-radius: 28px; background: white; box-shadow: var(--shadow); }
.shot-card img { width: 100%; height: auto; border-radius: 20px; }
.shot-card figcaption { display: grid; gap: .15rem; padding: 1rem .45rem .35rem; }
.shot-card figcaption strong { color: var(--green-dark); font-size: 1.05rem; }
.shot-card figcaption span { color: var(--muted); font-size: .9rem; }
.shot-card-large { width: min(100%, 375px); }
.app-games { background: #f1fbf6; }
.shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 760px; margin: 4rem auto 0; }
.app-books { background: #faf5ff; }
.books-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.books-middle { text-align: center; }
.books-middle .feature-number { color: #bd9fdb; }
.app-videos { background: #fff4ed; }
.videos-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(2rem, 8vw, 8rem); align-items: center; }
.app-devices { display: grid; grid-template-columns: .65fr 1fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; background: #edfaff; }
.device-icon { position: relative; min-height: 280px; }
.device-tablet, .device-phone { position: absolute; display: block; border: 10px solid #244d42; background: linear-gradient(145deg, #abeddb 0 42%, #fce3a2 42% 68%, #f9b99e 68%); box-shadow: var(--shadow); }
.device-tablet { inset: 15px 25px 15px 0; border-radius: 28px; }
.device-phone { width: 115px; height: 210px; right: 0; bottom: 0; border-width: 7px; border-radius: 23px; }
.app-devices .device-note { font-size: .9rem !important; }
.app-devices h2 { max-width: 650px; }
@media (max-width: 900px) {
  .app-hero-inner { min-height: auto; }
  .books-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .books-middle { grid-column: 1 / -1; grid-row: 1; max-width: 650px; margin: 0 auto 1.5rem; }
}
@media (max-width: 650px) {
  .app-hero-inner, .feature-row, .videos-layout, .app-devices { grid-template-columns: 1fr; }
  .app-hero-inner { padding: 3.5rem 0; }
  .app-hero-copy h1 { font-size: clamp(2.6rem, 12vw, 4rem); }
  .hero-phone img { width: min(72vw, 285px); }
  .app-highlights { grid-template-columns: repeat(2, 1fr); margin-top: 0; width: 100%; border-radius: 0; }
  .app-highlights div:nth-child(odd) { border-left: 0; }
  .app-highlights div:nth-child(n + 3) { border-top: 1px solid #dcece5; }
  .app-section { padding-block: 4rem; }
  .feature-copy { max-width: 600px; }
  .shot-pair, .books-layout { grid-template-columns: 1fr; gap: 2rem; }
  .books-middle { grid-column: auto; grid-row: auto; }
  .books-layout .shot-card:first-child { order: -1; }
  .device-icon { width: min(100%, 330px); }
}