
:root{--ink:#111315;--ink2:#62656D;--panel:#F4F4F2;--rule:#E4E4E1;--focus:#005FCC;--ease-out:cubic-bezier(0.23,1,0.32,1);--motion-feedback:160ms;--motion-entry:300ms}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:"General Sans",-apple-system,system-ui,"Helvetica Neue",sans-serif;font-optical-sizing:auto;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:var(--ink)}
a:hover{color:#3A3D42}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
h1,h2,h3,p{margin:0}
h1,h2,h3{overflow-wrap:anywhere}
.skip{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 16px;border-radius:20px;background:var(--ink);color:#FFFFFF;text-decoration:none;font-size:0.9375rem}
.skip:focus{top:16px;color:#FFFFFF}

.head{position:sticky;top:0;z-index:20;min-height:4.5rem;padding:.5rem 2.5rem;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2rem;background:#FFFFFF}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){.head{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}
.brand{display:flex;align-items:center;min-height:2.75rem;gap:10px;text-decoration:none;font-size:1.125rem;font-weight:500}
.icon{border-radius:22.5%;box-shadow:0 0 0 1px rgba(17,19,21,.1)}
.nav{justify-self:end;min-width:0}
.links a,.foot nav a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem}
.links a{justify-content:center}
.links{display:flex;flex-wrap:wrap;gap:0 2rem}
.nav a,.foot a{color:var(--ink2);text-decoration:none;font-size:0.9375rem}
.nav a:hover,.foot a:hover{color:var(--ink)}
.availability{min-height:2.75rem;padding:.625rem 1.125rem;border-radius:999px;display:inline-flex;align-items:center;background:var(--panel);color:var(--ink2);font-size:.9375rem;white-space:nowrap}
.brand:active,.links a:active,.foot a:active{color:var(--ink);background:var(--panel)}
a,summary{touch-action:manipulation}

.intro{padding:72px 20px 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.eyebrow{font-size:0.9375rem;color:var(--ink2)}
.h1{font-size:clamp(2.5rem,calc(1rem + 5.5vw),6rem);font-weight:500;line-height:1.03;letter-spacing:-.04em}
.lead{font-size:1.3125rem;line-height:1.45;color:var(--ink2);max-width:560px}
.store-status{font-size:1rem;font-weight:500;line-height:1.5;color:var(--ink2)}

.hero{padding:56px 24px 0}
.hero-panel{max-width:1200px;margin:0 auto;height:700px;padding-top:64px;border-radius:40px;background:linear-gradient(180deg,#F4F4F2 0%,#ECECEA 100%);overflow:hidden;display:flex;justify-content:center;align-items:flex-start;gap:32px}
/* A single entrance introduces the app screens; scrolling never replays it. */
@media (prefers-reduced-motion:no-preference){
  .hero-panel>div{animation:hero-enter var(--motion-entry) var(--ease-out) both}
  .hero-panel>div:nth-child(2){animation-delay:50ms}
  .hero-panel>div:nth-child(3){animation-delay:100ms}
  .hero-panel>div:nth-child(4){animation-delay:150ms}
}
@keyframes hero-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-panel>div{animation:hero-fade var(--motion-feedback) var(--ease-out) both}
}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
.side{width:230px;margin-top:120px;flex:none}
.main{width:300px;flex:none}
.phone{padding:7px;border-radius:41px;background:var(--ink);box-shadow:0 30px 60px rgba(17,19,21,.14),0 2px 6px rgba(17,19,21,.08)}
.shot{width:100%;height:auto;border-radius:34px}

.sec{max-width:1200px;margin:0 auto;padding:120px 40px 0;box-sizing:content-box}
.sec-head{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;margin-bottom:48px}
.h2{font-size:clamp(2.125rem,4vw,3rem);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.sub{font-size:1.1875rem;color:var(--ink2);max-width:560px;line-height:1.5}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.card{border-radius:32px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;min-height:35rem}
.card-copy{padding:2rem 2rem 0;display:flex;flex-direction:column;gap:8px}
.card h3{font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.card p{font-size:1rem;line-height:1.5;color:var(--ink2)}
.card-shot{margin-top:auto;padding:1.75rem 2.75rem 0;flex:0 0 22.5rem;overflow:hidden}
.phone.top{border-radius:41px 41px 0 0;padding-bottom:0}
.phone.top .shot{border-radius:34px 34px 0 0}

.rows{padding-top:20px;display:flex;flex-direction:column;gap:20px}
.row{border-radius:32px;background:var(--panel);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;padding:0 64px}
.row-copy{padding:64px 0;align-self:center;display:flex;flex-direction:column;gap:14px}
.row-copy .eyebrow{font-size:0.875rem}
.row h3{font-size:clamp(1.875rem,3vw,2.375rem);font-weight:500;letter-spacing:-.03em;line-height:1.08}
.row p{font-size:1.0625rem;line-height:1.55;color:var(--ink2);max-width:440px}
.row-shot{height:460px;overflow:hidden;display:flex;justify-content:center;padding-top:56px}
.row-shot .phone{width:300px;align-self:flex-start}
.row.flip .row-copy{order:1}
.row.flip .row-shot{order:0}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.facts li{border-radius:28px;background:var(--panel);padding:28px;display:flex;flex-direction:column;gap:10px}
.facts h3{font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.facts p{font-size:0.96875rem;line-height:1.5;color:var(--ink2)}
#privacy .sec-head{margin-bottom:40px}

.faq{max-width:820px}
.faq .h2{text-align:center;margin-bottom:24px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{border-radius:.5rem;list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:1.375rem .75rem;font-size:1.1875rem;font-weight:500;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{flex:none;width:1.5rem;text-align:center;content:"+";font-size:1.5rem;font-weight:400;color:var(--ink2)}
.faq details[open] summary::after{content:"–"}
@media (hover:hover){.faq summary:hover{background:var(--panel)}}
.faq summary:active{background:#E9E9E6}
.faq p{margin:.75rem 0 1.375rem;padding:0 .75rem;font-size:1.0625rem;line-height:1.55;color:var(--ink2);max-width:640px}

.end{padding:120px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.end .icon{box-shadow:0 0 0 1px rgba(17,19,21,.1),0 16px 32px rgba(17,19,21,.12)}

.foot{border-top:1px solid var(--rule);padding:32px 40px 48px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:0.875rem;color:var(--ink2)}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot a{font-size:0.875rem}

@media (max-width:64rem){
  .grid,.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:51.25rem){
  .head{position:relative;display:flex;flex-wrap:wrap;gap:0 1rem;padding:.5rem 1.25rem .25rem}
  .brand{flex:0 1 auto;min-width:0;margin-inline-end:auto}
  .head>.availability{order:1;flex:none}
  .nav{order:2;flex:0 0 100%}
  .links{justify-content:space-between;gap:0 .5rem}
  .lead{font-size:1.125rem}
  .hero{padding:56px 16px 0}
  .hero-panel{height:auto;padding:28px 0;border-radius:32px;gap:12px}
  .side{display:none}
  .main{width:calc((100vw - 32px - 40px - 12px) / 2);max-width:300px}
  .hero-panel .phone{padding:5px;border-radius:30px}
  .hero-panel .shot{border-radius:25px}
  .sec{padding:96px 20px 0}
  .rows{padding-top:20px}
  .row{grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 24px 0}
  .row-copy{padding:0}
  .row.flip .row-copy{order:0}
  .row.flip .row-shot{order:1}
  .row-shot{height:420px;padding-top:0}
  .row-shot .phone{width:min(300px,100%)}
  .card-shot{padding:1.75rem 2rem 0}
  .end{padding:96px 20px}
  .foot{flex-direction:column;align-items:flex-start;gap:14px;padding:28px 20px 40px}
}
@media (max-width:51.25rem) and (prefers-reduced-motion:no-preference){
  .hero-panel>div:nth-child(2){animation-delay:0ms}
  .hero-panel>div:nth-child(3){animation-delay:50ms}
}
@media (max-width:40rem){
  .grid,.facts{grid-template-columns:minmax(0,1fr)}
  .card{min-height:0}
  .card-shot{margin-top:0}
}
@media (prefers-reduced-transparency:reduce){
  .head{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--ink2:#3A3D42;--rule:#62656D}
  .head{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--ink)}
}
@media (forced-colors:active){
  .head{background:Canvas;color:CanvasText;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid CanvasText}
  a:focus-visible,summary:focus-visible{outline-color:Highlight}
  .faq details{border-color:CanvasText}
}
.release-note{margin:1rem auto 0;padding:.875rem 1.25rem;max-width:75rem;background:var(--panel);border-radius:1rem;color:var(--ink2);font-size:.9375rem;line-height:1.5;text-align:center}.release-note strong{color:var(--ink);font-weight:500}@media(max-width:51.25rem){.release-note{margin:1rem 1.25rem 0}}

/* Published policy uses the same site chrome and type as the preview homepage. */
.policy-link{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;font-size:1rem;font-weight:500;text-underline-offset:.25em;text-decoration-thickness:1px}
.nav a[aria-current="page"]{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:.375rem}
.policy-hero{max-width:75rem;margin:0 auto;padding:4.5rem 2.5rem 3.5rem;text-align:center}
.policy-hero .eyebrow{margin-bottom:1rem}
.policy-hero h1{font-size:clamp(2.75rem,6vw,5rem);font-weight:500;line-height:1.05;letter-spacing:-.04em}
.policy-hero .meta{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 2rem;margin-top:2rem;padding:1.25rem 1.5rem;background:var(--panel);border-radius:1.25rem;color:var(--ink2);font-size:.9375rem;line-height:1.6}
.policy-hero .meta strong{font-weight:500;color:var(--ink);margin-right:.375rem}
.policy-layout{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,44rem);justify-content:space-between;gap:4rem;max-width:75rem;margin:0 auto;padding:0 2.5rem 6rem}
.policy-contents{padding-top:.125rem}
.policy-contents h2{font-size:.9375rem;font-weight:500;line-height:1.4;margin:0 0 1rem}
.policy-contents ol{list-style:none;padding:0;margin:0;display:grid;gap:.125rem}
.policy-contents a{display:block;min-height:2.75rem;padding:.5rem 0;font-size:.875rem;line-height:1.5;color:var(--ink2);text-decoration:none}
.policy-contents a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.policy-contents a:active{background:var(--panel)}
.policy-mobile-contents{display:none}
.policy-copy{min-width:0;color:#3A3D42;font-size:1.0625rem;line-height:1.7;overflow-wrap:anywhere}
.policy-copy .lede{font-size:1.375rem;line-height:1.55;letter-spacing:-.015em;color:var(--ink);margin-top:0}
.policy-copy p{margin:1rem 0}
.policy-copy h2{margin:3.5rem 0 1rem;padding-top:2.5rem;border-top:1px solid var(--rule);font-size:1.75rem;font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--ink);scroll-margin-top:6.5rem}
.policy-copy ul{margin:1rem 0;padding-left:1.25rem}
.policy-copy li{padding-left:.25rem;margin:.75rem 0}
.policy-copy strong{font-weight:500;color:var(--ink)}
.policy-copy a{text-underline-offset:.2em;text-decoration-thickness:1px}
.policy-copy code{padding:.125rem .375rem;border-radius:.375rem;background:var(--panel);font-size:.875em;word-break:break-word}
.policy-copy .note{margin:2.5rem 0 0;padding:1.5rem 1.75rem;background:var(--panel);border-radius:1.5rem;font-size:1rem;line-height:1.6}
.policy-stamp{max-width:75rem;margin:0 auto;padding:0 2.5rem 2.5rem;font-size:.875rem;line-height:1.6;color:var(--ink2)}
@media(max-width:64rem){.policy-layout{gap:2.5rem;grid-template-columns:minmax(0,12rem) minmax(0,1fr)}}
@media(max-width:51.25rem){
 .policy-hero{padding:3.5rem 1.25rem 2.5rem}
 .policy-hero .meta{flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left;padding:1.25rem 1.5rem;margin-top:1.75rem}
 .policy-layout{display:block;padding:0 1.25rem 4rem}
 .policy-desktop-contents{display:none}
 .policy-mobile-contents{display:block;margin-bottom:2rem;background:var(--panel);border-radius:1.25rem;padding:0 1.25rem}
 .policy-mobile-contents summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.75rem;padding:1rem 0;font-size:1rem;font-weight:500;list-style:none;cursor:pointer}
 .policy-mobile-contents summary::-webkit-details-marker{display:none}
 .policy-mobile-contents summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--ink2)}
 .policy-mobile-contents[open] summary::after{content:"−"}
 .policy-mobile-contents .policy-contents{padding-bottom:1rem}
 .policy-mobile-contents .policy-contents a{font-size:.9375rem}
 .policy-copy .lede{font-size:1.25rem}
 .policy-copy h2{font-size:1.625rem;scroll-margin-top:1.5rem;margin-top:2.75rem;padding-top:2rem}
 .policy-copy .note{padding:1.25rem}
 .policy-stamp{padding:0 1.25rem 2rem}
}
@media(prefers-contrast:more){.policy-copy{color:var(--ink)}}
@media print{.head,.foot,.skip,.policy-desktop-contents,.policy-mobile-contents{display:none}.policy-hero{padding:0 0 2rem}.policy-layout{display:block;padding:0}.policy-copy h2{break-after:avoid}.policy-stamp{padding:2rem 0 0}}

/* Keep long support questions balanced without changing other pages. */
.support-page .policy-copy h2{text-wrap:balance}
