/* Ritlum app page. Builds on mini.css: same tokens, stage and type; this file
   only adds the phone frame and the layouts the product page doesn't have. */
.phone{border-radius:12% / 5.5%;box-shadow:0 0 0 5px #1c1b1f,0 0 0 5.5px rgba(0,0,0,.5),0 24px 40px -18px rgba(30,24,16,.35)}

.app-hero h1{letter-spacing:-.048em}

/* Wash: a full-width band of stage colour, so neighbouring sections on paper
   read as separate. Cards inside it drop back to paper. The flush one
   carries straight on from the hero. */
.wash{margin-top:var(--section);padding-bottom:var(--section);background:var(--stage)}
.wash-flush{margin-top:0}
.wash .phone-figure,.wash .features article{background:var(--paper);box-shadow:none}

/* Hero: three screens on the stage, the outer two drifting as the page moves */
.app-hero{position:relative;overflow:hidden;padding:clamp(104px,11vw,132px) 0 0;text-align:center;background:linear-gradient(180deg,var(--paper) 0%,var(--stage) 46%)}
.app-hero .lead{max-width:31em;text-wrap:balance}
.app-hero .actions{justify-content:center;margin-top:6px}
.hero-phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3vw,44px);margin:clamp(44px,5vw,68px) auto 0;padding:0 var(--pad) 48px}
.hero-phones img{flex:none;width:clamp(190px,23vw,300px)}
.hero-phones img:not(.is-main){width:clamp(160px,19.5vw,254px);margin-top:clamp(36px,5vw,72px);transform:translateY(calc((.5 - var(--p)) * 90px));will-change:transform}

/* Today: copy beside a single screen */
.phone-figure{margin:0;min-width:0;padding:clamp(32px,4vw,52px);border-radius:var(--r-lg);background:var(--stage);display:flex;justify-content:center}
.phone-figure img{width:min(100%,300px)}

/* NFC: a note on the device that appears in the film */
.callout{display:flex;align-items:center;gap:14px;margin-top:8px;padding:14px 18px 14px 14px;border-radius:var(--r-md);background:var(--stage);font-size:14px;line-height:1.5;color:var(--ink-2);max-width:30em}
.callout .mark{flex:none}

/* Stats: a dark band with the screens rising out of its lower edge */
.band{margin-top:var(--section);overflow:hidden;background:var(--dark);color:var(--dark-ink)}
.band-inner{max-width:calc(var(--max) + var(--pad) * 2);margin:auto;padding:var(--section) var(--pad) 0}
.band .label,.band .lead{color:var(--dark-muted)}
.band-points{list-style:none;margin:0 auto clamp(40px,5vw,64px);padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.band-points li{display:flex;flex-direction:column;gap:6px;padding:18px 8px 0;border-top:1px solid var(--dark-line)}
.band-points p{font-size:15px;line-height:1.55;color:var(--dark-muted)}
.band-phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,3vw,44px);margin-bottom:clamp(-260px,-19vw,-150px)}
.band-phones img{flex:none;width:clamp(180px,22vw,290px);box-shadow:0 0 0 5px #2b2a30,0 0 0 6px rgba(255,255,255,.14),0 30px 60px -20px #000}
.band-phones img:nth-child(2){transform:translateY(calc((.5 - var(--p)) * 70px))}
.band-phones img:not(:nth-child(2)){margin-top:clamp(28px,4vw,56px)}

/* Widgets and reminders: two screens, staggered */
.duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.duo-copy{display:flex;flex-direction:column;gap:20px}
.duo-figure{margin:0;min-width:0;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;gap:clamp(14px,2.4vw,32px);padding:clamp(32px,4vw,56px) clamp(20px,3vw,40px) 0;border-radius:var(--r-lg);background:var(--stage);max-height:clamp(420px,46vw,620px)}
.duo-figure img{flex:none;width:min(44%,260px)}
.duo-figure img:last-child{margin-top:clamp(40px,5vw,72px);transform:translateY(calc((.5 - var(--p)) * 60px))}

/* Mini: the desk display, as one wide card */
.mini-card{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;overflow:hidden;border-radius:var(--r-lg);background:var(--dark);color:var(--dark-ink)}
.mini-card .label,.mini-card .lead{color:var(--dark-muted)}
.mini-card-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:clamp(32px,5vw,72px)}
.mini-card-copy h2{font-size:clamp(30px,3.4vw,48px)}
.mini-card-visual{aspect-ratio:5/4;overflow:hidden}
.mini-card-visual img{width:100%;height:100%;object-fit:cover;transform-origin:50% 54%;transform:scale(calc(1.5 - var(--p) * .12))}

/* Closing: the dark theme, with the badge */
.closing-phone{position:absolute;right:clamp(24px,11vw,180px);top:16%;width:clamp(230px,24vw,320px);transform:translateY(calc((.5 - var(--p)) * 80px));box-shadow:0 0 0 5px #2b2a30,0 0 0 6px rgba(255,255,255,.14),0 30px 60px -20px #000}
.closing .app-store-link{margin-top:8px}

@media (max-width:1000px){
  .duo{grid-template-columns:1fr}
  .duo-figure{order:2}
  .mini-card{grid-template-columns:1fr}
  .app-closing{padding-bottom:0}
  .closing-phone{order:2;position:relative;right:auto;top:auto;transform:none;width:230px;margin:48px 0 -170px}
}
@media (max-width:640px){
  .hero-phones{margin-top:36px;padding:0 0 40px}
  .hero-phones img{width:min(68vw,300px)}
  .hero-phones img:not(.is-main){display:none}
  /* The hero already shows this screen at phone width. */
  .wash .phone-figure{display:none}
  .band-points{grid-template-columns:1fr;gap:0}
  .band-points li{padding:16px 0}
  .band-phones{gap:14px;margin-inline:calc(var(--pad) * -1)}
  .band-phones img{width:54vw}
  .duo-figure{max-height:none;padding-bottom:32px}
  .duo-figure img:last-child{transform:none}
}