/* Fonts are self-hosted (SIL Open Font License) so no visitor data is sent to Google. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfair-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/playfair-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/playfair-display-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:600;font-display:swap;src:url(fonts/playfair-display-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2")}

/* Layout: single phone-first column, a quiet "altar" of navy and gold; one decision (your device) drives every button below it. */
:root{
  --night:#0B1426; --night-2:#121E36; --night-3:#1A2844;
  --gold:#C9A45C; --gold-soft:#E2C58B; --ivory:#F5EFE3; --mist:#A9B3C6; --line:rgba(201,164,92,.28);
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--night);color:var(--ivory)}
body{font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 60% at 50% -10%, #22345a 0%, var(--night) 60%) fixed, var(--night)}
.wrap{max-width:560px;margin:0 auto;padding-block:28px 56px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));
  display:flex;flex-direction:column;gap:28px}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:6px}

/* Header */
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.logo{width:112px;height:112px;border-radius:50%;display:block;box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(0,0,0,.45)}
h1{font-family:var(--display);font-weight:500;font-size:36px;line-height:1.1;margin:8px 0 0;letter-spacing:.01em}
h1 em{font-style:italic;color:var(--gold)}
.rule{width:56px;height:1px;background:var(--gold);margin:2px 0}
.tag{margin:0;color:var(--gold-soft);font-size:11.5px;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.lede{margin:2px 0 0;color:var(--ivory);opacity:.85;font-family:var(--display);font-style:italic;font-size:16px}
.social{display:flex;gap:10px;margin-top:4px}
.social a{font-size:13px;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--ivory)}
.social a:hover{border-color:var(--gold)}

/* Verse of the day */
.verse{text-align:center;padding:22px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.verse blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:20px;line-height:1.45;text-wrap:balance}
.verse cite{display:block;margin-top:10px;font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}

/* Device picker */
.step h2{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 4px;text-wrap:balance}
.step p.sub{margin:0 0 14px;color:var(--mist);font-size:13.5px}
.devices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dev{appearance:none;font:inherit;font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;
  background:var(--night-2);color:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:12px 14px;line-height:1.3}
.dev small{display:block;color:var(--mist);font-weight:400;font-size:11.5px;margin-top:2px}
.dev:hover{border-color:var(--gold)}
.dev[aria-pressed="true"]{background:var(--gold);color:var(--night);border-color:var(--gold)}
.dev[aria-pressed="true"] small{color:#3a3020}

/* Products */
.products{display:flex;flex-direction:column;gap:14px}
.prod{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;
  background:var(--night-2);border:1px solid var(--line);border-radius:16px;padding:12px}
.thumb{width:96px;height:96px;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#1f2f52,#0a1222);display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb b{font-family:var(--display);font-weight:500;color:var(--gold-soft);font-size:26px}
.prod h3{margin:0;font-family:var(--display);font-weight:500;font-size:18px;line-height:1.25}
.prod p{margin:4px 0 10px;color:var(--mist);font-size:13px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:13.5px;
  background:var(--gold);color:var(--night);border-radius:999px;padding:9px 16px;border:0}
.btn:hover{background:var(--gold-soft)}
.btn.off{background:transparent;color:var(--mist);border:1px dashed var(--line);font-weight:500;cursor:default}
.note{font-size:12.5px;color:var(--mist);margin:10px 2px 0}

/* Support */
.support{background:var(--night-3);border:1px solid var(--line);border-radius:16px;padding:20px}
.support h2{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 6px}
.support p{margin:0 0 12px;color:var(--mist);font-size:13.5px}
.support .ways{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--mist)}
.soon{display:inline-block;margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

footer{text-align:center;color:var(--mist);font-size:12px;line-height:1.6;border-top:1px solid var(--line);padding-top:20px}
footer p{margin:0 0 8px}
@media (min-width:520px){.devices{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:no-preference){.btn,.dev{transition:background .15s,border-color .15s}}

/* Mission hero: the first thing a visitor reads */
.mission{text-align:center;background:linear-gradient(180deg,rgba(201,164,92,.10),rgba(201,164,92,.02));border:1px solid var(--line);border-radius:18px;padding:22px 18px}
.mission h2{font-family:var(--display);font-weight:500;font-size:27px;line-height:1.2;margin:0 0 10px;text-wrap:balance}
.mission h2 em{color:var(--gold-soft)}
.mission p{margin:0 auto 16px;max-width:42ch;color:var(--mist);font-size:14px}
.mission p strong{color:var(--ivory);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn.ghost{background:transparent;color:var(--ivory);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);background:transparent}

/* How it works */
.how{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:s}
.how li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;background:var(--night-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13.5px;color:var(--mist)}
.how li::before{counter-increment:s;content:counter(s);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:16px;color:var(--night);background:var(--gold)}
.how b{display:block;color:var(--ivory);font-weight:600;font-size:14px;margin-bottom:2px}
.scripture{margin:14px 0 0;text-align:center;font-family:var(--display);font-style:italic;font-size:16px;color:var(--ivory)}
.scripture span{display:block;margin-top:4px;font-family:var(--body);font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft)}
.give{margin-top:16px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:6px 0 10px}
footer nav a,footer nav button{color:var(--ivory);font:inherit;font-size:12px;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}

/* Cookie banner */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:12px max(12px, env(safe-area-inset-right,0px)) max(12px, env(safe-area-inset-bottom,0px)) max(12px, env(safe-area-inset-left,0px))}
.cc[hidden]{display:none}
.cc-box{max-width:560px;margin:0 auto;background:#0E1930;border:1px solid var(--gold);border-radius:16px;padding:16px;box-shadow:0 12px 40px rgba(0,0,0,.55)}
.cc h2{font-family:var(--display);font-weight:500;font-size:18px;margin:0 0 6px}
.cc p{margin:0 0 12px;color:var(--mist);font-size:12.5px;line-height:1.5}
.cc p a{color:var(--ivory)}
.cc-row{display:flex;flex-wrap:wrap;gap:8px}
.cc-row button{flex:1 1 140px;appearance:none;font:inherit;font-size:13px;font-weight:600;border-radius:999px;padding:10px 14px;cursor:pointer;border:1px solid var(--gold);background:var(--gold);color:var(--night)}
.cc-row button.alt{background:transparent;color:var(--ivory);border-color:var(--line)}
.cc-opts{display:grid;gap:8px;margin:0 0 12px}
.cc-opts[hidden]{display:none}
.cc-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--night-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--mist)}
.cc-opt b{display:block;color:var(--ivory);font-size:13px}
.cc-opt input{width:20px;height:20px;accent-color:var(--gold)}
.cc-gpc{font-size:12px;color:var(--gold-soft);margin:0 0 10px}

/* ---------- Responsive: phone (default) → tablet → desktop ---------- */
img{max-width:100%;height:auto}
@media (max-width:380px){
  .mission h2{font-size:23px}
  h1{font-size:31px}
  .prod{grid-template-columns:76px minmax(0,1fr);gap:12px}
  .thumb{width:76px;height:76px}
  .cc-row button{flex-basis:100%}
}
/* Tablet */
@media (min-width:760px){
  .wrap{max-width:720px;gap:36px;padding-block:44px 64px}
  .wrap.doc{max-width:760px}
  .logo{width:128px;height:128px}
  h1{font-size:42px}
  .mission{padding:32px 36px}
  .mission h2{font-size:34px}
  .mission p{font-size:15px}
  .verse blockquote{font-size:24px}
  .step h2,.support h2{font-size:26px}
  .products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .prod{grid-template-columns:minmax(0,1fr);align-items:start;padding:14px}
  .thumb{width:100%;height:auto;aspect-ratio:680/372}
  .how{grid-template-columns:repeat(3,minmax(0,1fr))}
  .how li{grid-template-columns:minmax(0,1fr);gap:10px}
  .cc-box{max-width:640px}
}
/* Desktop */
@media (min-width:1100px){
  .wrap{max-width:1040px}
  .wrap.doc{max-width:780px}
  .head{padding-top:8px}
  h1{font-size:48px}
  .mission{max-width:820px;margin-inline:auto;width:100%}
  .mission h2{font-size:40px}
  .verse{max-width:820px;margin-inline:auto;width:100%}
  .devices{grid-template-columns:repeat(6,minmax(0,1fr))}
  .products{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prod h3{font-size:17px}
  .support{padding:28px 32px}
  footer{max-width:820px;margin-inline:auto}
  .dev:hover,.btn:hover{cursor:pointer}
}

/* ---------- Hero with photo ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;
  background:#0B1426 url(hero-mobile.jpg) center top/cover no-repeat;
  padding:28px max(16px, env(safe-area-inset-right,0px)) 36px max(16px, env(safe-area-inset-left,0px))}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,20,38,.55) 0%,rgba(11,20,38,.62) 38%,rgba(11,20,38,.92) 72%,#0B1426 100%)}
.hero-in{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.hero .logo{box-shadow:0 0 0 1px rgba(201,164,92,.5),0 12px 34px rgba(0,0,0,.55)}
.hero h1,.hero .mission h2{text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero .mission{background:rgba(11,20,38,.55);border-color:rgba(201,164,92,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .mission p{color:#D9DEE8}
.hero + .wrap{padding-top:28px}
@media (min-width:760px){
  .hero{background-image:url(hero-1920.jpg);background-position:70% center;padding-block:48px 56px}
  .hero::before{background:linear-gradient(180deg,rgba(11,20,38,.50) 0%,rgba(11,20,38,.58) 60%,rgba(11,20,38,.95) 100%)}
  .hero-in{max-width:720px}
}
@media (min-width:1100px){
  .hero{min-height:640px;display:flex;align-items:center;background-position:center}
  .hero::before{background:linear-gradient(90deg,rgba(11,20,38,.92) 0%,rgba(11,20,38,.78) 38%,rgba(11,20,38,.25) 62%,rgba(11,20,38,.05) 100%),
    linear-gradient(180deg,transparent 75%,#0B1426 100%)}
  .hero-in{max-width:1040px;width:100%;align-items:flex-start}
  .hero .head{align-items:flex-start;text-align:left}
  .hero .mission{text-align:left;max-width:560px;margin:0;background:rgba(11,20,38,.45)}
  .hero .mission p{margin-left:0}
  .hero .cta{justify-content:flex-start}
}

/* ---------- Brand-gold product cards ---------- */
.thumb{border:1px solid rgba(201,164,92,.55);box-shadow:inset 0 0 0 3px rgba(11,20,38,.9)}
.prod{background:linear-gradient(180deg,#14213b,#0f1a30);border-color:rgba(201,164,92,.28)}
.prod h3{color:var(--ivory)}
.btn.off{border-color:rgba(201,164,92,.45);color:var(--gold-soft)}

/* ---------- Study photo band ---------- */
.study{display:grid;gap:18px;align-items:center;background:var(--night-2);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.study-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:40% center}
.study-txt{padding:0 18px 22px}
.study h2{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.25;margin:0 0 10px;text-wrap:balance}
.study h2 em{color:var(--gold-soft)}
.study-txt>p{color:var(--mist);font-size:14px;margin:0 0 12px}
.study .scripture{text-align:left;margin-top:14px}
@media (min-width:760px){
  .study{grid-template-columns:1.1fr 1fr;gap:0}
  .study-img{height:100%;aspect-ratio:auto;min-height:340px}
  .study-txt{padding:28px 30px}
  .study h2{font-size:28px}
}
@media (min-width:1100px){.study h2{font-size:32px}.study-txt{padding:40px 44px}}