/* The product pages' kit (PocaPal's, UoP Bus's): the type scale, the light sheet the page
   turns into below its dark story, the feature blades and the phone mock-up in them, the
   download blade, the scroll hint and the reveal on scroll. Taken as it was from PocaPal's page.
   Link it after base.css (the tokens and the phone frame's measurements) and before the site's
   own CSS, which sets the colours: --accent, --paper, --text-dark, --text-mid,
   --text-on-dark-mid, --device-body. */

.h1{
  font-size:clamp(40px, 7.4vw, 92px);
  line-height:1.03;
  letter-spacing:-.025em;
  font-weight:650;
  margin:0;
}
.h2{
  font-size:clamp(30px, 4.6vw, 58px);
  line-height:1.07;
  letter-spacing:-.022em;
  font-weight:650;
  margin:0;
}
.sub{
  font-size:clamp(16px, 1.55vw, 20px);
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--text-on-dark-mid);
  margin:18px auto 0;
  max-width:36ch;
  font-weight:400;
}
.sub-tight{margin-top:12px;max-width:34ch}
.body{
  font-size:clamp(16px, 1.45vw, 19px);
  line-height:1.5;
  letter-spacing:-.008em;
  color:var(--text-mid);
  margin:18px 0 0;
  max-width:38ch;
}
.eyebrow{
  margin:0 0 14px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent);
}
.kicker{
  margin:0 0 12px;
  font-size:13px;
  font-weight:650;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-mid);
}
.hl{color:var(--accent)}
.hero-scrollhint{
  margin-top:22px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,245,247,.42);
}
.hint-line{
  width:1px;height:26px;
  background:linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
  animation:hint 2.4s var(--ease) infinite;
}
.light{
  position:relative; z-index:6;
  background:var(--paper);
  color:var(--text-dark);
  border-radius:44px 44px 0 0;
  margin-top:-44px;
  box-shadow:0 -40px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.light .h2{color:var(--text-dark)}
.feature{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(80px,12vh,150px) var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,84px);
  align-items:center;
}
.feature-flip .feature-copy{order:2}
.feature-centre{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:clamp(30px,4vw,50px);
}
.feature-centre .feature-copy{max-width:66ch}
.feature-centre .h2{max-width:none}
.feature-centre .feature-art{width:100%;flex-direction:column;align-items:center;justify-content:flex-start}
.feature-centre .body{margin-left:auto;margin-right:auto;max-width:min(44ch,470px)}
.feature-art{display:flex;justify-content:center}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.device{
  position:relative;
  isolation:isolate;   /* keep the frame's z-index inside, so siblings can sit over it */
  width:min(100%,300px);
  aspect-ratio:var(--frame-ar);
}
.device::before{
  content:"";
  position:absolute;
  left:var(--body-l); top:var(--body-t); width:var(--body-w); height:var(--body-h);
  border-radius:var(--body-r);
  background:var(--device-body);
  box-shadow:0 34px 70px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08);
  z-index:1;
}
.device-screen{
  position:absolute;
  left:var(--screen-l); top:var(--screen-t); width:var(--screen-w); height:var(--screen-h);
  border-radius:var(--screen-r);
  overflow:hidden;
  z-index:2;
}
.device-frame{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:3; pointer-events:none;
  -webkit-user-select:none; user-select:none;
}
.cta{
  text-align:center;
  /* the bottom padding is larger than the top so the gap down to the FAQ
     matches the gap up to the rail, which carries its own padding too */
  padding:clamp(70px,11vh,130px) var(--pad) clamp(127px,19vh,222px);
  background:linear-gradient(180deg,var(--paper) 0%, #ffffff 100%);
}
.cta-brand{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;margin-bottom:clamp(20px,3vh,32px);
}
.cta-icon{
  width:clamp(62px,6.4vw,82px);height:auto;display:block;
  filter:drop-shadow(0 12px 24px rgba(58,38,88,.2));
}
.cta-name{
  margin:0;font-size:clamp(17px,1.6vw,20px);
  font-weight:650;letter-spacing:-.015em;color:var(--text-dark);
}
.cta-body{margin:16px auto 0;max-width:34ch}
.store-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
@keyframes hint{0%,100%{opacity:.25;transform:scaleY(.55);transform-origin:top}45%{opacity:1;transform:scaleY(1)}}

@media (max-width:900px){
  .feature{grid-template-columns:1fr;gap:34px}
  .feature-flip .feature-copy{order:0}
  .feature-copy .body{max-width:46ch}
  .light{border-radius:30px 30px 0 0;margin-top:-30px}
}

@media (max-height:820px){
  .hero-scrollhint{margin-top:20px;gap:8px}
  .hint-line{height:26px}
  .sub{margin-top:14px}
}

@media (max-width:560px){
  .sub{max-width:30ch}
}

@media (prefers-reduced-motion:reduce){
  .hint-line{animation:none}
  .reveal{opacity:1;transform:none}
}