:root{
  /* True black, from Color+CV.swift: the handoff's #0B0D12 was rejected because
     on OLED it reads as "nearly black" beside a genuinely black app. */
  --ink:#000000;
  /* The ONE lifted surface the app names: cover tiles and plan chips. Cards only. */
  --ink-2:#101319;
  /* Every rule in the app is cream at 0.15 alpha, measured not chosen. */
  --rule:rgba(240,236,227,.15); --rule-2:rgba(240,236,227,.28);
  --cream:#F0ECE3; --gold:#E4B15B; --muted:#9A968D; --muted-2:#6F6B64;
  --display:"Anton","Haettenschweiler","Arial Narrow",sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Libre Caslon Display",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
/* height:auto is load-bearing — the width/height attributes on <img> keep the
   browser from shifting layout while images load, but without this the literal
   height attribute wins and a 1080x1920 shot renders 312x1920. */
img{max-width:100%;display:block;height:auto}
a{color:var(--gold);text-decoration:none}
a:hover{color:#F0D9A8}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(24px,4.5vw,72px)}
/* prose stays readable even though the shell got wider */
.two p,.centered p.sub{max-width:68ch}

/* nav */
.top{position:relative;z-index:2}
.top .wrap{display:flex;align-items:center;gap:15px;padding-top:18px;padding-bottom:6px}
.top img{width:40px;height:40px;border-radius:9px}
.brand{display:flex;align-items:flex-start;gap:0}
.brand .wordmark{height:42px;width:auto}
.brand .tm{font-size:11px;font-weight:600;color:var(--muted);margin-top:4px;
  margin-left:-6px;line-height:1}
.top nav{margin-left:auto;display:flex;gap:44px;font-size:15px}
.top nav a{color:var(--muted)}
.top nav a:hover{color:var(--cream)}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--ink)}
.bars{position:absolute;left:0;right:0;bottom:0;height:min(300px,40%);
  display:flex;align-items:flex-end;gap:6px;padding:0 4%;opacity:.2}
.bars i{flex:1 1 0;border-radius:3px 3px 0 0;transform-origin:bottom;
  background:linear-gradient(180deg,var(--gold) 0%,rgba(228,177,91,0) 100%);
  animation:eq 1.7s ease-in-out infinite alternate}
.bars i:nth-child(2n){animation-duration:1.25s;animation-delay:-.45s}
.bars i:nth-child(3n){animation-duration:2.3s;animation-delay:-.9s}
.bars i:nth-child(5n){animation-duration:1.55s;animation-delay:-1.3s}
.bars i:nth-child(7n){animation-duration:2.75s;animation-delay:-.2s}
@keyframes eq{from{transform:scaleY(.48)}to{transform:scaleY(1)}}
.fade{position:absolute;left:0;right:0;bottom:0;height:320px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,var(--ink) 82%)}
/* `>` matters: the header is `.hero .top .wrap`, so a descendant selector here
   also matched it and overrode `.top .wrap` on equal specificity. */
.hero > .wrap{position:relative;z-index:1;padding-top:96px;padding-bottom:112px}
.kicker{font-family:var(--display);font-size:clamp(20px,3.4vw,38px);line-height:1;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
h1{font-family:var(--display);font-size:clamp(52px,11vw,122px);line-height:.96;
  letter-spacing:.005em;text-transform:uppercase;margin:10px 0 4px;font-weight:400}
.kicker-2{font-family:var(--display);font-size:clamp(23px,4vw,44px);line-height:1;
  letter-spacing:.08em;text-transform:uppercase;color:#8E8A82}
.hero p.sub{margin:30px 0 0;max-width:56ch;font-size:19px;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:32px}
.pill{display:inline-flex;align-items:center;gap:14px;background:var(--gold);color:#17120A;
  font-size:17px;font-weight:700;padding:13px 15px 13px 30px;border-radius:999px}
.pill .arr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;background:#17120A}
.pill{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.pill:hover{color:#17120A;filter:brightness(1.05);transform:translateY(-2px);
  box-shadow:0 10px 34px rgba(228,177,91,.28)}
.fine{font-size:15px;color:var(--muted-2)}

/* scripture */
.verse{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--ink);padding:76px 0;text-align:center}
.verse p{margin:0 auto 22px;max-width:20ch;font-family:var(--serif);
  font-size:clamp(26px,4.4vw,46px);line-height:1.34}
.verse cite{font-style:normal;font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold)}

/* scale */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border-bottom:1px solid var(--rule)}
.num{background:var(--ink);padding:52px 16px;text-align:center}
.num b{display:block;font-family:var(--display);font-size:clamp(40px,7vw,68px);
  line-height:1;font-weight:400;color:var(--gold)}
.num span{display:block;margin-top:12px;font-size:12.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}

/* sections */
section{padding:104px 0}
.alt{background:var(--ink);border-top:1px solid var(--rule)}
.eyebrow{display:block;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:22px}
h2{font-family:var(--display);font-size:clamp(34px,5.6vw,62px);line-height:1.02;
  letter-spacing:.01em;text-transform:uppercase;margin:0;font-weight:400;text-wrap:balance}
.two{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:90px;align-items:start}
.two p{margin:0;color:#A8A49B;font-size:18px;line-height:1.72}
.two .lead{font-size:26px;font-weight:600;line-height:1.46;color:var(--cream)}
.stack{display:flex;flex-direction:column;gap:26px}
.pull{padding-left:26px;border-left:3px solid var(--gold)}
.pull p{color:var(--cream);font-size:17px;line-height:1.6}

/* phones */
.phones{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.phone{width:280px;border:9px solid var(--rule);border-radius:42px;overflow:hidden;
  background:#000;box-shadow:0 30px 80px rgba(0,0,0,.55);flex-shrink:0;
  transition:transform .3s ease,box-shadow .3s ease}
.phone:hover{transform:translateY(-6px);box-shadow:0 40px 90px rgba(0,0,0,.65)}
.phone.low{margin-top:44px}
.phone.wide{width:330px}
.showcase{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:80px;align-items:center}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px;margin-top:44px}
.card{background:var(--ink-2);border:1px solid var(--rule);border-radius:18px;
  padding:30px 28px;display:flex;flex-direction:column;gap:12px;
  transition:transform .22s ease,border-color .22s ease,background .22s ease}
.card:hover{transform:translateY(-4px);border-color:var(--rule-2);background:#13161D}
.alt .card{background:var(--ink)}
.card b{font-family:var(--display);font-size:40px;line-height:1;color:var(--gold);font-weight:400}
.card h3{margin:0;font-size:17px;font-weight:700}
.card p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
.quote{font-size:20px;font-weight:500;line-height:1.52;color:var(--cream);margin:0}
.attr{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* chips */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.chips span{font-size:14px;border:1px solid var(--rule-2);border-radius:999px;padding:11px 22px;
  transition:border-color .2s ease,color .2s ease}
.chips span:hover{border-color:var(--gold);color:var(--gold)}
.centered{text-align:center}
.centered p.sub{margin:24px auto 0;max-width:62ch;color:#A8A49B;font-size:18px}

/* close */
.close{border-top:1px solid var(--rule);text-align:center;background:var(--ink)}
.close img.mark{width:88px;height:88px;border-radius:20px;margin:0 auto 26px;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
.close h2{font-size:clamp(44px,8vw,78px)}
.close p{color:var(--muted);margin:16px 0 30px;font-size:19px}
.stores{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* document pages (privacy, support) */
.doc{padding:64px 0 110px}
/* A contents rail uses the wider shell without stretching the measure: the text
   column stays near 70 characters, which is where prose is comfortable. */
/* Doc pages get their own shell: the marketing page runs to 1440, but a reading
   column past ~75 characters gets hard to track, so the page is sized to the
   text rather than the text stretched to the page. */
.doc .wrap{max-width:1180px}
.doc-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(40px,5vw,72px);
  align-items:start}
.doc .body{max-width:none}
.toc{position:sticky;top:30px;display:flex;flex-direction:column;gap:11px;
  padding-right:24px;border-right:1px solid var(--rule)}
.toc-label{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:5px}
.toc a{color:var(--muted);font-size:14.5px;line-height:1.35;text-decoration:none}
.toc a:hover{color:var(--gold)}
.doc h2{scroll-margin-top:28px}
.doc h1{font-family:var(--display);font-size:clamp(34px,7vw,58px);line-height:1.02;
  letter-spacing:.01em;text-transform:uppercase;margin:0 0 10px;font-weight:400}
.doc .eff{color:var(--muted);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 36px}
.doc h2{font-family:var(--body);font-size:20px;font-weight:700;text-transform:none;
  letter-spacing:0;color:var(--gold);margin:42px 0 12px}
.doc h3{font-family:var(--body);font-size:17px;font-weight:700;margin:28px 0 6px;color:var(--cream)}
.doc p,.doc li{color:#CFCBC2;font-size:17.5px;line-height:1.72}
.doc p{margin:0 0 14px}
.doc ul{padding-left:20px;margin:0 0 14px}
.doc li{margin-bottom:10px}
.doc li::marker{color:var(--gold)}
.doc .lead{font-size:18.5px;color:var(--cream)}
.doc .box{background:var(--ink-2);border-left:3px solid var(--gold);padding:20px 22px;margin:24px 0}
.doc .box p{margin:0;color:var(--cream)}
.doc a{text-underline-offset:2px;text-decoration:underline}

/* footer */
footer{border-top:1px solid var(--rule);padding:44px 0 60px;color:var(--muted-2);font-size:14.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
footer img{width:30px;height:30px;border-radius:7px}
footer a{color:var(--muted)}
footer a:hover{color:var(--cream)}
footer .sp{margin-left:auto;display:flex;gap:28px}

@media (max-width:900px){
  .doc-grid{grid-template-columns:1fr;gap:34px}
  .toc{position:static;border-right:0;border-bottom:1px solid var(--rule);
    padding:0 0 22px;flex-flow:row wrap;gap:8px 20px}
  .toc-label{width:100%;margin:0}
  .doc .body{max-width:none}
  .two,.showcase{grid-template-columns:1fr;gap:38px}
  section{padding:76px 0}
  .hero > .wrap{padding-top:64px;padding-bottom:76px}
  .nums{grid-template-columns:1fr}
  .phone{width:248px}
  .phone.low{margin-top:0}
  footer .sp{margin-left:0;width:100%}
  .top nav{gap:20px}
}
@media (max-width:520px){
  .top nav a:first-child{display:none}
  .pill{width:100%;justify-content:space-between;padding-left:26px}
}


/* Hero settles in on load. No observer, no hidden content — these elements are
   always in view, and the animation runs once from a state that ends visible.
   A scroll-triggered version was tried and pulled: elements sitting in the
   viewport intermittently kept opacity 0, which is worse than no effect. */
@keyframes settle{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero > .wrap > *{animation:settle .8s cubic-bezier(.2,.7,.3,1) both}
.hero > .wrap > *:nth-child(1){animation-delay:.05s}
.hero > .wrap > *:nth-child(2){animation-delay:.13s}
.hero > .wrap > *:nth-child(3){animation-delay:.21s}
.hero > .wrap > *:nth-child(4){animation-delay:.31s}
.hero > .wrap > *:nth-child(5){animation-delay:.41s}
@media (prefers-reduced-motion:reduce){
  .hero > .wrap > *{animation:none}
}