/* Unyadua Sermons: the Unyadua look (design-system tokens). Daylight by default, Stage when the phone is in dark mode.
   Fonts are our own files (no Google Fonts), so opening this page tells nobody anything about the reader. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/source-serif-4-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/source-serif-4-latin-400-italic.woff2) format("woff2")}

:root{
  /* Daylight */
  --bg:#e9ecf0; --bar:#f4f6f8; --card:#ffffff; --field:#f4f6f8; --hover:#e8ebf0;
  --line:#d6dbe2; --line-strong:#78828f;
  --ink:#13151a; --ink2:#4a525e; --ink3:#5b6471;
  --accent:#c8891a; --on-accent:#1a1204; --accent-ink:#8a5a00; --accent-soft:rgba(200,137,26,.15);
  --scripture:#5a40c9; --success:#0a7249; --caution:#a04a00; --danger:#c0272d; --focus:#13151a;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    /* Stage */
    --bg:#0b0c0e; --bar:#121418; --card:#181b20; --field:#121418; --hover:#20242b;
    --line:#2a2f37; --line-strong:#6a7280;
    --ink:#f1f2f4; --ink2:#a6adb8; --ink3:#8a919d;
    --accent:#e7b24c; --on-accent:#1a1204; --accent-ink:#e7b24c; --accent-soft:rgba(231,178,76,.14);
    --scripture:#b6a2ff; --success:#5bd39c; --caution:#ff9d52; --danger:#ff6f68; --focus:#f1f2f4;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:var(--accent-ink)}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px}

.bar{position:sticky;top:0;z-index:10;background:var(--bar);border-bottom:1px solid var(--line)}
.bar .wrap{height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:17px;font-weight:600;line-height:1}
.brand img{display:block;width:32px;height:32px}
.nav{display:flex;gap:6px;align-items:center}
.nav a{color:var(--ink2);text-decoration:none;font-size:15px;font-weight:500;padding:8px 10px;border-radius:4px}
.nav a:hover{color:var(--ink);background:var(--hover)}
@media (max-width:560px){.nav a.opt{display:none}}

.test{background:color-mix(in srgb,var(--caution) 14%,var(--bar));border-bottom:1px solid var(--caution);color:var(--ink);font-size:14px;padding:10px 0}
.test b{color:var(--caution)}
.test code{font:500 13px var(--mono)}
[hidden]{display:none!important}

.hero{padding:56px 0 40px}
.hero h1{font-size:clamp(32px,6vw,52px);line-height:1.1;font-weight:600;margin:0 0 18px;max-width:15em;letter-spacing:-.01em}
.hero p{font:400 clamp(18px,2.4vw,21px)/1.55 var(--serif);color:var(--ink2);max-width:33em;margin:0 0 28px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button,.btn{appearance:none;min-height:46px;border:1px solid var(--accent);border-radius:4px;padding:10px 22px;background:var(--accent);color:var(--on-accent);font:600 16px/1.2 var(--sans);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
button:hover,.btn:hover{filter:brightness(1.07)}
button:disabled{opacity:.55;cursor:default;filter:none}
button.ghost,.btn.ghost{background:transparent;color:var(--accent-ink);border-color:var(--line-strong)}
button.ghost:hover,.btn.ghost:hover{background:var(--accent-soft);border-color:var(--accent);filter:none}
button.small{min-height:34px;padding:4px 14px;font-size:14px;font-weight:500}

section{padding:36px 0}
h2{font-size:28px;line-height:1.2;font-weight:600;margin:0 0 8px}
.lead{color:var(--ink2);margin:0 0 24px;max-width:38em}
.overline{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 6px}

.toggle{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;padding:3px;margin:0 0 24px;background:var(--card)}
.toggle button{min-height:38px;border:0;border-radius:999px;background:transparent;color:var(--ink2);padding:6px 18px;font-weight:500;font-size:15px}
.toggle button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}
.toggle button:hover{filter:none}
.toggle small{font-weight:500}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:820px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 22px;display:flex;flex-direction:column}
.plan.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan .tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 4px}
.plan h3{font-size:24px;margin:0 0 4px;font-weight:600}
.plan .who{color:var(--ink2);font-size:15px;margin:0 0 16px;min-height:3em}
.price{font:600 34px/1.1 var(--sans);margin:0}
.price small{font:400 15px var(--sans);color:var(--ink3)}
.price-note{color:var(--ink3);font-size:13px;margin:4px 0 18px;min-height:1.4em}
.plan ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.plan li{position:relative;padding:5px 0 5px 24px;font-size:15px}
.plan li::before{content:"";position:absolute;left:3px;top:11px;width:6px;height:11px;border-right:2px solid var(--success);border-bottom:2px solid var(--success);transform:rotate(40deg) scale(.85)}
.plan li.no{color:var(--ink3)}
.plan li.no::before{border:0;width:10px;height:2px;top:17px;background:var(--line-strong);transform:none}
.plan .btn,.plan button{width:100%}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 22px}
.buy{margin-top:24px;scroll-margin-top:80px}
.buy h3{margin:0 0 4px;font-size:22px}
label{display:block;font-size:14px;font-weight:600;margin:16px 0 6px}
label span{font-weight:400;color:var(--ink3)}
input[type=text],input[type=email],textarea{width:100%;min-height:46px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:4px;background:var(--field);color:var(--ink);font:inherit;font-size:16px}
textarea{font:500 13px/1.4 var(--mono);min-height:80px;resize:vertical}
input:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--focus);outline-offset:1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.two{grid-template-columns:1fr}}
.sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;margin-top:20px;border-top:1px solid var(--line);font-size:17px}
.sum b{font-size:24px}
details{margin-top:16px}
summary{cursor:pointer;color:var(--accent-ink);font-weight:500;font-size:15px}
.small-print{color:var(--ink3);font-size:14px;margin:12px 0 0}
.msg{padding:12px 16px;border-radius:8px;margin:16px 0 0;font-size:15px;font-weight:500;border:1px solid var(--line);background:var(--card)}
.msg.ok{color:var(--success);border-color:var(--success);background:color-mix(in srgb,var(--success) 10%,var(--card))}
.msg.err{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--card))}

.dl{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
@media (max-width:820px){.dl{grid-template-columns:1fr}}
.dl h3{margin:0 0 4px;font-size:22px}
.ver{font:500 13px var(--mono);color:var(--ink3);margin:0 0 14px}
ol.steps{margin:0;padding-left:22px}
ol.steps li{margin:0 0 10px;padding-left:4px}
ol.steps li::marker{color:var(--accent-ink);font-weight:600}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 18px;margin:0 0 10px}
.faq summary{color:var(--ink);font-weight:600;font-size:16px}
.faq p{margin:10px 0 0;color:var(--ink2)}

.keybox{font:500 13px/1.5 var(--mono);word-break:break-all;background:var(--field);border:1px solid var(--line-strong);border-radius:8px;padding:14px 16px;user-select:all}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0 0 18px}
.facts dt{color:var(--ink3);font-size:14px}
.facts dd{margin:0;font-weight:500}

main{flex:1}
.foot{border-top:1px solid var(--line);padding:28px 0 36px;margin-top:24px;color:var(--ink3);font-size:14px}
.foot .wrap{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.small-print.ok{color:var(--success);font-weight:500}.small-print.bad{color:var(--danger);font-weight:500}