/* The Project July app pages (/android/, /ios/, /privacy/). The same dark glass as the card
   guide at /card/, since the app's default Still Glass theme matches the card. */
:root{
  --ink:#08090b; --ink2:#0f1115; --glass:#121419; --rim:rgba(255,255,255,.08); --rim2:rgba(255,255,255,.16); --sheen:rgba(255,255,255,.04);
  --fg:#f4f4f5; --fg2:#a1a1aa; --fg3:#71717a;
  --ember:#ff7a2e; --ember2:#ffb04a; --glyph:#ffc247; --glow:rgba(255,106,26,.45);
  --green:#4ade80; --amber:#fbbf24; --cool:#5ab0e8; --stop:#c62828;
  --f-display:'Barlow Condensed','Barlow',system-ui,sans-serif;
  --f-label:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ink)}
body{margin:0;background:radial-gradient(1200px 500px at 70% -120px,rgba(255,106,26,.13),transparent 70%),linear-gradient(180deg,var(--ink) 0%,var(--ink2) 100%) fixed;color:var(--fg);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px;padding-block:0 80px}
a{color:var(--ember2);text-underline-offset:3px}
a:hover{color:var(--glyph)}
:focus-visible{outline:2px solid #7cc4f2;outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-label);font-weight:600;text-wrap:balance;margin:0;line-height:1.1}
p{margin:0}
code{font:500 .86em var(--f-mono);background:rgba(255,255,255,.06);border:1px solid var(--rim);padding:.08em .4em;border-radius:6px;color:var(--fg);overflow-wrap:anywhere}
b,strong{font-weight:600;color:var(--fg)}
.lab{font:600 13px/1.2 var(--f-label);letter-spacing:.09em;text-transform:uppercase;color:var(--fg2)}
.lab.ember{color:var(--ember)}
.glass{background:linear-gradient(112deg,transparent 0 63%,var(--sheen) 63.4%,transparent 84%),linear-gradient(180deg,#0c0d10 0%,var(--glass) 100%);box-shadow:inset 0 0 0 1px var(--rim);border-radius:18px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.brand{color:var(--fg);text-decoration:none;display:flex;align-items:center;gap:10px;font:600 16px var(--f-label);letter-spacing:.02em}
.brand svg{width:26px;height:26px;color:var(--ember);filter:drop-shadow(0 0 6px var(--glow))}
.top-links{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font:500 15px var(--f-label)}
.top-links a{color:var(--fg2);text-decoration:none}
.top-links a:hover,.top-links a[aria-current="page"]{color:var(--fg)}
.ver{font:600 12px var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);border:1px solid var(--rim2);border-radius:999px;padding:4px 10px}
.ver.beta{color:var(--ember2);border-color:rgba(255,122,64,.5)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:28px 56px}
.hero h1{font-family:var(--f-display);font-weight:300;font-size:clamp(52px,8vw,92px);line-height:.92;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--ember);text-shadow:0 0 28px var(--glow)}
.hero .lede{margin-top:20px;font-size:19px;color:var(--fg2);max-width:34em}
.hero .lede b{color:var(--fg)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.jump a{font:500 15px var(--f-label);color:var(--fg);text-decoration:none;padding:7px 14px;border-radius:999px;border:1px solid var(--rim2);background:rgba(255,255,255,.03);transition:border-color .15s,background .15s}
.jump a:hover{border-color:rgba(255,122,64,.6);background:rgba(255,122,46,.08);color:var(--fg)}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;font:600 17px var(--f-label);text-decoration:none;color:#1a0d05;background:linear-gradient(90deg,#f5a34a,var(--ember) 70%,#e2621f);box-shadow:0 10px 30px -12px var(--glow)}
.btn:hover{color:#1a0d05;filter:brightness(1.06)}
.btn.ghost{color:var(--fg);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--rim2)}
.btn.ghost:hover{color:var(--fg);box-shadow:inset 0 0 0 1px rgba(255,122,64,.6)}
.btn svg{width:18px;height:18px}

/* phone screenshots */
.phone{position:relative;margin:0;min-width:0;justify-self:center;width:100%;max-width:300px}
.phone img{display:block;width:100%;height:auto;border-radius:30px;border:6px solid #1b1d22;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -28px rgba(0,0,0,.9)}
.phone.glow::before{content:"";position:absolute;inset:10% -8% -4%;background:radial-gradient(closest-side,rgba(255,106,26,.32),transparent);filter:blur(30px);z-index:-1}
.phone figcaption,.shot figcaption{margin-top:12px;font:400 14px/1.45 var(--f-label);color:var(--fg2);text-align:center}
.phone figcaption b{color:var(--fg);font-weight:600}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:16px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.gallery img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.06);scroll-snap-align:start}

/* sections */
section{padding-block:56px;border-top:1px solid var(--rim)}
.sec-head{display:grid;gap:10px;margin-bottom:30px;max-width:44em}
.sec-head h2{font-size:clamp(30px,4vw,42px);font-weight:500;letter-spacing:-.005em}
.sec-head p{color:var(--fg2)}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:center}
.pair.flip{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start}
.prose{display:grid;gap:14px;min-width:0;color:var(--fg2)}
.prose b{color:var(--fg)}
.prose h3{font-size:24px;font-weight:600;color:var(--fg);margin-top:6px}
.prose ul{margin:0;padding-left:20px;display:grid;gap:6px}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:s}
.steps li{counter-increment:s;padding:20px;display:grid;gap:8px;align-content:start;color:var(--fg2);font-size:15.5px;min-width:0}
.steps li::before{content:counter(s);font:300 44px/1 var(--f-display);color:var(--ember);text-shadow:0 0 18px var(--glow)}
.steps li>b{font:600 18px/1.25 var(--f-label);color:var(--fg)}
.steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}

/* features */
.feats{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.feats li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:10px 12px;border-radius:12px;color:var(--fg2)}
.feats li svg{width:24px;height:24px;color:var(--ember2);margin-top:2px}
.feats li b{display:block;font-family:var(--f-label);font-size:18px;line-height:1.35;margin-bottom:2px}

.note{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:14px 16px;border-radius:14px;background:rgba(251,191,36,.06);box-shadow:inset 0 0 0 1px rgba(251,191,36,.22);color:var(--fg2);font-size:15.5px}
.note svg{width:22px;height:22px;color:var(--amber);margin-top:2px}
.note.cool{background:rgba(90,176,232,.06);box-shadow:inset 0 0 0 1px rgba(90,176,232,.24)}
.note.cool svg{color:var(--cool)}

.modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mode{font:500 15px var(--f-label);padding:6px 12px;border-radius:10px;background:linear-gradient(180deg,#1d1210,#2e1511);box-shadow:inset 0 0 0 1px rgba(255,122,64,.36);color:var(--fg)}
.mode.off{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--rim2);color:var(--fg2)}

.faq{display:grid;gap:12px}
.faq details{padding:0 18px}
.faq summary{cursor:pointer;list-style:none;padding:16px 0;font:600 18px var(--f-label);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 26px/1 var(--f-display);color:var(--ember)}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding-bottom:18px;color:var(--fg2);display:grid;gap:10px}
.faq ul{margin:0;padding-left:20px;display:grid;gap:6px}

/* the privacy summary at the bottom of each app page */
.privacy-box{padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center}
.privacy-box ul{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--fg2)}

/* the full privacy policy */
.policy{max-width:46em;display:grid;gap:16px;color:var(--fg2)}
.policy h2{font-size:28px;font-weight:600;color:var(--fg);margin-top:28px;scroll-margin-top:16px}
.policy h3{font-size:20px;font-weight:600;color:var(--fg);margin-top:8px}
.policy ul{margin:0;padding-left:22px;display:grid;gap:8px}
.policy .meta{font:500 15px var(--f-label);color:var(--fg3)}
.tbl{overflow-x:auto;border-radius:14px;box-shadow:inset 0 0 0 1px var(--rim)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rim);vertical-align:top}
th{font:600 12px var(--f-label);letter-spacing:.09em;text-transform:uppercase;color:var(--fg2);background:rgba(255,255,255,.02)}
td{color:var(--fg2)} td:first-child{color:var(--fg);font-family:var(--f-label);font-weight:600}
tr:last-child td{border-bottom:0}

footer{border-top:1px solid var(--rim);padding-block:28px;color:var(--fg3);font-size:14px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}

@media (max-width:860px){
  .hero,.pair,.pair.flip{grid-template-columns:minmax(0,1fr);gap:32px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps.three{grid-template-columns:minmax(0,1fr)}
  .pair>.phone{order:-1}
  .privacy-box{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding-inline:16px}
  .two,.steps{grid-template-columns:minmax(0,1fr)}
  section{padding-block:44px}
  .phone{max-width:260px}
  .top-links .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}