/* Safely home page — layout shared by index.html (hero beside the shot)
   and centered.html (hero above it). Variant-specific hero rules live in
   each page's own <style> block. */
/* The hero glow is wider than its column by design — clip it horizontally so it
   can never push a horizontal scrollbar on narrow desktop windows. overflow-x:clip
   (not hidden) keeps vertical overflow visible so the phone shadow isn't cut. */
.hero-band{overflow-x:clip}

/* Wide band — nav + hero */
.wide{max-width:936px;margin:0 auto;padding-left:28px;padding-right:28px}
.hero-band{padding-top:88px}
/* Lower band — same measure as the header and hero above it. */
.narrow,.site-changelog,.site-footer{max-width:936px;margin:0 auto;padding-left:28px;padding-right:28px}
.site-footer{padding-bottom:96px}

/* Hero steps in from the header on both sides by the same amount, so the
   heading and the phone sit closer together instead of hugging the nav.
   The inset tapers off as the window narrows — between 880px and 944px of
   container it holds the text column at exactly 540px, so the subtitle keeps
   its single line instead of the padding eating into it. */
.hero-d{display:grid;grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center;margin-bottom:112px}
.hero-d h1{font-size:58px;line-height:58px;letter-spacing:-0.035em;font-weight:700;margin:0 auto 20px;max-width:16ch;text-wrap:balance}
.hero-d .sub{font-size:20px;line-height:29px;color:#6e6e73;margin:0 auto 30px;max-width:32em;text-wrap:balance}
.stores{display:flex;gap:10px;justify-content:center}
.store{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:10px;background:#1a1a1d;color:#fff;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-0.01em}
.store:hover{background:rgb(1,120,255);color:#fff}
.store svg{flex:0 0 auto;display:block}


/* One light sweep across each store button, the second a beat behind the first */
.store::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transform:translateX(-130%) skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent)}
.stores.sheen .store::after{animation:store-sheen .75s cubic-bezier(.4,0,.2,1)}
.stores.sheen .store:nth-child(2)::after{animation-delay:.11s}
@keyframes store-sheen{
from{opacity:1;transform:translateX(-130%) skewX(-16deg)}
to{opacity:1;transform:translateX(130%) skewX(-16deg)}
}
@media(prefers-reduced-motion:reduce){
.stores.sheen .store::after{animation:none}
html{scroll-behavior:auto}
}

/* Phone shot — always keeps air underneath, deeper shadow */
.hero-d .shot{position:relative;display:flex;justify-content:center;align-items:flex-start;justify-self:stretch}
/* The note is a grid item now, so the hero's gap spaces it from the shot;
   the 40px top margin from styles.css would double that up. */
.hero-d .hero-beta-note{margin:0}
.hero-d .phone-frame::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:0;transform:translate(-50%,50%);
  width:96%;height:8%;
  background:
    radial-gradient(closest-side,rgba(0,0,0,0.11),rgba(0,0,0,0)),
    radial-gradient(closest-side,rgba(0,0,0,0.05),rgba(0,0,0,0));
  background-size:58% 100%, 100% 100%;
  background-position:50% 50%;
  background-repeat:no-repeat}
/* The shot is a complete device render on transparency, so the CSS bezel from
   styles.css is switched off here — otherwise the hardware would sit inside a
   second, drawn one. The shadow uses drop-shadow rather than box-shadow so it
   follows the device silhouette instead of the element's rectangle. */
.hero-d .phone-frame{width:340px;position:relative;background:none;padding:0;
  border-radius:0;overflow:visible;aspect-ratio:auto;box-shadow:none;
  filter:none}
.hero-d .phone-frame img{width:100%;height:auto;border-radius:0;object-fit:fill}


.spec{margin-bottom:16px;counter-reset:item}
.spec-intro{margin:0 0 28px}
.spec-intro h2{font-size:30px;line-height:36px;letter-spacing:-0.025em;font-weight:700;margin:0}
.row{display:grid;grid-template-columns:32px 1fr;gap:24px;padding:24px 0;border-bottom:1px solid #ededed;counter-increment:item}
.row:first-child{border-top:1px solid #ededed}
.row h2{font-size:19px;line-height:27px;font-weight:600;letter-spacing:-0.015em;margin:0 0 8px}
.num{font-size:17px;line-height:27px;color:#a0a0a6;font-variant-numeric:tabular-nums;text-align:center}
.num::before{content:counter(item)}
.row p{margin:0 0 10px;font-size:17px;line-height:27px;color:#6e6e73;max-width:44em;text-wrap:pretty}
.row p:last-child{margin-bottom:0}
.row a{color:rgb(1,120,255);text-decoration:none;border-bottom:1px solid rgba(1,120,255,0.3)}
.row a:hover{border-bottom-color:rgb(1,120,255)}
.quote{margin:0;padding:84px 0;border-bottom:1px solid #ededed;text-align:center}
.quote p{font-size:27px;line-height:40px;letter-spacing:-0.022em;color:#1a1a1d;margin:0 auto 26px;max-width:19em;text-wrap:balance}
.quote figcaption{font-size:17px;line-height:26px;color:#a0a0a6}
.home-changelog .hc-foot{display:flex;justify-content:flex-end;margin-top:12px}

@media(max-width:860px){
.hero-d{gap:24px;margin-bottom:72px}
}
@media(max-width:600px){
.site-nav,.wide,.narrow,.site-changelog,.site-footer{padding-left:32px;padding-right:32px}
.hero-band{padding-top:20px}
.site-footer{padding-bottom:64px}
.hero-d{margin-bottom:56px}
.hero-d h1{font-size:34px;line-height:38px}
.hero-d .sub{font-size:17px;line-height:26px}
/* Fixed size, bleeding off the fold on short screens. Sizing it to the viewport
   instead would pass through a "fits, but flush against the edge" state at some
   screen height whatever the numbers, and a shrunken shot reads worse than one
   that continues below the fold. */
.hero-d .phone-frame{width:78%;max-width:254px;height:auto}
.hero-d .phone-frame img{width:100%;height:auto}
.row{grid-template-columns:32px 1fr;gap:12px;padding:20px 0}
.spec-intro h2{font-size:24px;line-height:30px}
.spec-intro{margin-bottom:20px}
.quote{padding:56px 0}
.quote p{font-size:21px;line-height:31px;margin-bottom:18px}
.quote figcaption{font-size:15px}
}