/* Values follow system/palette.json. No remote assets. */
:root{color-scheme:light dark;--ground:#F7F4EE;--ink:#1F1D1A;--soft:color-mix(in srgb,var(--ink) 62%,var(--ground));--rule:color-mix(in srgb,var(--ink) 14%,transparent);--panel:color-mix(in srgb,var(--ink) 4%,var(--ground));
  --indigo:#AFA8F8;--teal:#D0FBEC;--amber:#EAD7A7;--sky:#B3D0EC;--coral:#D7775C;--lemon:#FAE077;--glow1:#AFA8F84D;--glow2:#D0FBEC8C;--shadow:0 30px 80px -30px #1F1D1A55}
@media(prefers-color-scheme:dark){:root{--ground:#161A21;--ink:#EDE9E0;--indigo:#6E8FE0;--teal:#37B0A4;--amber:#E4AE55;--sky:#8FCDF2;--coral:#CD6753;--lemon:#B8E500;--glow1:#6E8FE033;--glow2:#37B0A424;--shadow:0 30px 80px -30px #000000AA}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(60rem 40rem at 10% 0,var(--glow1),transparent 70%) no-repeat,radial-gradient(50rem 40rem at 95% 45rem,var(--glow2),transparent 70%) no-repeat,var(--ground);color:var(--ink);font:400 1.0625rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:var(--ink);text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:1rem;top:-5rem;z-index:10;padding:.5rem 1rem;background:var(--ground)}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2rem,70rem);margin-inline:auto}
h1,h2,h3{font-family:"New York",ui-serif,Georgia,"Times New Roman",serif;font-weight:600;line-height:1.1;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(3.4rem,9vw,6.5rem);letter-spacing:-.045em}
h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:20ch}
h3{font-size:1.4rem;margin-top:1.6rem}
h3:first-child{margin-top:0}
p{margin:.55rem 0 0}
.eyebrow{margin:0 0 .9rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--soft)}
.lead{font-size:clamp(1.1rem,1.9vw,1.3rem);max-width:33rem;margin-top:1.4rem}

/* header and footer */
.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem 1.5rem;flex-wrap:wrap}
.site-header{padding-block:1.1rem}
.site-header nav,.site-footer nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.site-header nav a,.site-footer nav a{text-decoration:none;color:var(--soft)}
.site-header nav a:hover,.site-footer nav a:hover{color:var(--ink);text-decoration:underline}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink);font-weight:700;font-size:1.1rem;text-decoration:none;letter-spacing:-.02em}
.app-icon{width:28px;height:28px;border-radius:7px}
.mark{display:grid;gap:3px;width:1.25rem}
.mark i{display:block;height:3px;background:var(--ink);border-radius:2px}
.mark i:nth-child(2){width:75%;background:var(--indigo)}.mark i:nth-child(3){width:55%;background:var(--teal)}
.site-footer{padding-block:2.2rem 3rem;border-top:1px solid var(--rule);font-size:.9rem;color:var(--soft)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center;padding-block:clamp(2.5rem,7vw,6rem) clamp(3rem,8vw,7rem)}
.promises{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 0;padding:0;list-style:none}
.promises li{padding:.35rem .8rem;border-radius:999px;font-size:.92rem;font-weight:600;background:color-mix(in srgb,var(--indigo) 30%,var(--ground))}
.promises li:nth-child(even){background:color-mix(in srgb,var(--teal) 55%,var(--ground))}
.stores{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.store{display:inline-flex;flex-direction:column;justify-content:center;min-width:10.5rem;padding:.55rem 1.2rem .6rem;border-radius:.8rem;background:var(--ink);color:var(--ground);font-weight:700;font-size:1.15rem;line-height:1.15;text-decoration:none}
.store small{font-size:.68rem;font-weight:500;opacity:.8}
.store[aria-disabled="true"]{opacity:.78;cursor:default}
.phone{position:relative;margin:0;justify-self:center;width:min(100%,21rem)}
.phone video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:2.4rem;background:var(--panel);box-shadow:var(--shadow),0 0 0 1px var(--rule)}
.sound{position:absolute;right:.9rem;top:.9rem;padding:.4rem .8rem;border:0;border-radius:999px;font:600 .82rem/1 inherit;font-family:inherit;color:var(--ink);background:color-mix(in srgb,var(--ground) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;box-shadow:0 2px 10px #0002}
.phone figcaption{margin-top:.9rem;text-align:center;font-size:.8rem;color:var(--soft)}

/* features */
.features{padding-block:clamp(3rem,7vw,6rem)}
.feature{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:center;margin-top:clamp(2.5rem,6vw,4.5rem)}
.feature.flip img{order:2}
.feature img{width:min(100%,18rem);height:auto;justify-self:center;border-radius:1.8rem;box-shadow:var(--shadow),0 0 0 1px var(--rule)}
.feature p{max-width:32rem;color:color-mix(in srgb,var(--ink) 85%,var(--ground))}

/* not here */
.not-here{padding-block:clamp(3.5rem,8vw,6rem);background:var(--panel);border-block:1px solid var(--rule)}
.not-here ul{display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;margin:1.8rem 0 0;padding:0;list-style:none}
.not-here li{font-family:"New York",ui-serif,Georgia,serif;font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:600;letter-spacing:-.015em}

/* cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;padding-block:clamp(3.5rem,8vw,6rem)}
.cards article{padding:1.6rem 1.5rem;border-radius:1.2rem;background:var(--panel);border:1px solid var(--rule)}
.cards article:nth-child(1){border-top:4px solid var(--indigo)}.cards article:nth-child(2){border-top:4px solid var(--teal)}.cards article:nth-child(3){border-top:4px solid var(--amber)}.cards article:nth-child(4){border-top:4px solid var(--sky)}
.cards h3{font-size:1.25rem}
.cards p{font-size:.98rem;color:color-mix(in srgb,var(--ink) 85%,var(--ground))}
.closing{padding-block:1rem clamp(4rem,9vw,7rem);text-align:center}
.closing h2{margin-inline:auto}
.closing p{font-size:1.15rem;color:var(--soft)}

/* privacy and support */
.article{max-width:48rem;padding-block:3rem 6rem}
.article h1{font-size:clamp(2.6rem,6vw,4.2rem);max-width:15ch}
.article h2{font-size:1.6rem;margin:2.3rem 0 .6rem}
.article p{max-width:44rem}
.faq section{padding-block:1rem;border-top:1px solid var(--rule)}
.faq h3{font-size:1.25rem}
.contact{font-weight:700;overflow-wrap:anywhere}

@media(max-width:760px){
  .hero,.feature{grid-template-columns:1fr}
  .hero{text-align:left}
  .phone{width:min(100%,19rem)}
  .feature.flip img{order:0}
  .feature img{width:min(100%,15rem)}
  .cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
