:root{
  --ink:#263238;
  --muted:#5F6C72;
  --paper:#F8F6F0;
  --white:#FFFFFF;
  --line:#D7DDD8;
  --navy:#17324D;
  --teal:#2F7C78;
  --amber:#E5A83B;
  --sage:#789B78;
  --accent:#2F7C78;
  --accent-soft:#E7F0EE;
  --warm-soft:#F5E9CC;
  --growth-soft:#E8EFE8;
  --dark:#17324D;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}
a{color:inherit}
button,input,textarea{font:inherit}
.wrap{width:min(calc(100% - 32px),var(--max));margin:0 auto}
.narrow{max-width:780px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,243,234,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.18}
.brand-main{font-weight:850;letter-spacing:.08em;font-size:.9rem}
.brand-sub{font-size:.78rem;color:var(--muted);margin-top:4px}
.nav{display:flex;gap:20px;align-items:center}
.nav a{text-decoration:none;font-size:.92rem}
.menu-btn{display:none;background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.hero{padding:88px 0 72px;background:linear-gradient(180deg,#EEF3F2 0%,var(--paper) 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr);gap:56px;align-items:end}
.eyebrow,.small-label{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-weight:850;color:var(--accent)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif}
h1{font-size:clamp(3rem,7vw,6.1rem);line-height:.97;letter-spacing:-.04em;margin:.18em 0 .3em}
h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;margin:.22em 0 .5em}
h3{font-size:1.55rem;line-height:1.2;margin:2em 0 .6em}
.lead{font-size:1.18rem;max-width:710px;color:#425159}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;padding:12px 18px;font-weight:750;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--dark);color:#fff}
.btn.secondary{background:transparent;border-color:var(--line)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.block{width:100%;margin-top:8px}
.device-card{border:1px solid var(--line);padding:24px;border-radius:22px;background:rgba(255,255,255,.68)}
.device-date{font-size:1rem;margin-top:10px}
.device-time{font-family:Georgia,"Times New Roman",serif;font-size:2.45rem;line-height:1.1;margin:4px 0 10px}
.device-note{font-size:.82rem;color:var(--muted);margin-bottom:0}
.section{padding:76px 0}
.section.alt{background:#EEF3F2}
.principle{margin-top:28px;padding:22px;border-left:4px solid var(--accent);display:grid;gap:4px;background:var(--warm-soft)}
.section-head{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:30px}
.search-wrap{display:grid;gap:6px;font-size:.82rem;color:var(--muted);min-width:290px}
.search-wrap input{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 13px}
.calls-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.call-card{border-top:4px solid var(--accent);background:rgba(255,255,255,.72);padding:20px;border-radius:0 0 16px 16px}
.call-card h3{font-family:inherit;font-size:1.06rem;margin:.35em 0}
.call-card p{margin:.3em 0;color:var(--muted)}
.call-card .outcome{margin-top:14px;color:var(--ink);font-weight:700}
.sessions-list{display:grid;gap:10px}
.session-row{display:grid;grid-template-columns:70px minmax(150px,.8fr) minmax(0,1.6fr) auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.68);text-decoration:none}
.session-row:hover{background:#fff}
.session-number{font-weight:850}
.session-call{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.session-title{font-weight:750}
.session-open{font-size:.76rem;color:var(--accent)}
.session-shell{padding:72px 0 92px;background:#fff}
.session-layout{display:grid;grid-template-columns:260px minmax(0,760px);gap:58px;justify-content:center}
.sticky-box{position:sticky;top:104px;border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--paper)}
.sticky-box h3{font-family:inherit;font-size:1.2rem;margin:.3em 0}
.sticky-box p{color:var(--muted);margin:.2em 0}
.time-invested{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin:18px 0;display:grid;gap:4px}
.time-invested span{font-size:.8rem;color:var(--muted)}
.time-invested strong{font-size:1.8rem;font-variant-numeric:tabular-nums}
.time-invested small{font-size:.72rem;color:var(--muted)}
.session-meta{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:20px}
.prose{font-family:Georgia,"Times New Roman",serif;font-size:1.08rem}
.prose p{margin:1.05em 0}
.prose ul{padding-left:1.25em}
.callout,.reflection,.prayer,.word-study,.personal-anchor,.response-block,.next-step,.closing,.scripture-links{margin:28px 0;padding:22px;border-radius:16px}
.reflection{background:var(--accent-soft)}
.word-study{border:1px solid var(--line);background:#FCFBF8}
.personal-anchor{font-size:1.24rem;font-weight:700;border-left:4px solid var(--accent);border-radius:0;padding-left:18px}
.response-block{background:#F2F7F6}
.response-block label,.next-step{display:grid;gap:7px;margin:16px 0;font-family:Inter,ui-sans-serif,system-ui}
textarea{width:100%;resize:vertical;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;color:var(--ink)}
.scripture{border-left:3px solid var(--accent);padding:16px 0 16px 20px;margin:24px 0}
.scripture p{white-space:pre-line;margin:.4em 0}
.translation{font-family:Inter,ui-sans-serif,system-ui;font-size:.74rem;font-weight:850;letter-spacing:.12em;color:var(--accent)}
.scripture-links{background:#F2F7F6;font-family:Inter,ui-sans-serif,system-ui}
.scripture-links p{margin:.35em 0}
.translation-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.translation-buttons a{font-size:.9rem}
.prayer{background:var(--warm-soft)}
.closing{background:var(--dark);color:#fff;text-align:center;font-family:Inter,ui-sans-serif,system-ui}
.closing p{font-size:1.2rem;margin:.15em 0}
.closing strong{display:block;margin-top:16px}
.bottom-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
footer{background:var(--dark);color:#fff;padding:36px 0}
.footer-inner{display:flex;justify-content:space-between;gap:24px;align-items:center}
.footer-inner div{display:grid}
.footer-inner span,.footer-inner p{color:#D9E1E5;font-size:.88rem}
@media(max-width:900px){
  .hero-grid,.session-layout{grid-template-columns:1fr}
  .calls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sticky-box{position:static}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:18px 16px;flex-direction:column;align-items:flex-start}
  .nav.open{display:flex}
  .menu-btn{display:block}
}
@media(max-width:620px){
  .hero{padding-top:58px}
  .calls-grid{grid-template-columns:1fr}
  .section-head{align-items:stretch;flex-direction:column}
  .search-wrap{min-width:0}
  .session-row{grid-template-columns:46px 1fr;gap:6px 10px}
  .session-call,.session-title,.session-open{grid-column:2}
  .footer-inner{align-items:flex-start;flex-direction:column}
  .bottom-nav{flex-direction:column}
  h1{font-size:3.55rem}
}

.net-pending{opacity:.78}.translation a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.bottom-nav .btn{min-width:0;flex:1}
.bottom-nav .btn[hidden]{display:none}
@media(max-width:620px){.bottom-nav .btn{width:100%}}

/* Approved Disciple Me, Jesus palette */
.site-header{background:rgba(248,246,240,.96)}
.brand-main{color:var(--navy)}
.nav a:hover{color:var(--teal)}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:#10283E}
.btn.secondary{border-color:var(--teal);color:var(--navy)}
.btn.secondary:hover{background:var(--accent-soft)}
.device-card{border-color:#C8D6D3}
.eyebrow,.small-label{color:var(--teal)}
.call-card{border-top-color:var(--teal)}
.call-card .outcome{color:var(--navy)}
.session-row:hover{border-color:#B9CCC8}
.session-open{color:var(--teal);font-weight:700}
.sticky-box{border-color:#C8D6D3}
.time-invested strong{color:var(--navy)}
.reflection{background:var(--warm-soft)}
.word-study{border-color:#C8D6D3}
.personal-anchor{border-left-color:var(--amber);color:var(--navy)}
.response-block{background:#F2F7F6}
.scripture{border-left-color:var(--teal)}
.translation{color:var(--teal)}
.translation a{color:var(--teal)}
.prayer{background:var(--growth-soft)}
.next-step{background:var(--warm-soft)}
.closing{background:var(--navy)}
footer{background:var(--navy)}
mark{background:var(--warm-soft)}
textarea:focus,input:focus{outline:2px solid var(--teal);outline-offset:2px}

/* Seven Call session browser */
.sessions-list{display:grid;gap:34px}
.call-session-group{display:grid;gap:12px}
.call-session-header{
  display:grid;
  grid-template-columns:minmax(180px,.7fr) minmax(0,1.5fr);
  gap:24px;
  align-items:end;
  padding:0 4px 12px;
  border-bottom:1px solid var(--line);
}
.call-session-header h3{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--navy);
  margin:.15em 0 0;
  font-size:1.6rem;
}
.call-session-meta{
  display:grid;
  gap:2px;
  color:var(--muted);
  font-size:.9rem;
}
.call-session-meta strong{color:var(--teal)}
.call-session-list{display:grid;gap:8px}
.call-session-list .session-row{
  grid-template-columns:58px minmax(0,1fr) auto;
}
.call-session-list .session-title{grid-column:auto}
.call-session-list .session-open{grid-column:auto}
.no-results{color:var(--muted)}
@media(max-width:620px){
  .call-session-header{grid-template-columns:1fr;gap:6px}
  .call-session-list .session-row{grid-template-columns:42px 1fr auto}
  .call-session-list .session-title,
  .call-session-list .session-open{grid-column:auto}
}


/* =========================================================
   DISCIPLE ME, JESUS — LUXURY + PASTORAL REDESIGN
   Editorial, restrained, warm, book-like.
   ========================================================= */

:root{
  --ink:#28241F;
  --muted:#746D63;
  --paper:#F8F4EC;
  --white:#FFFDF8;
  --line:#D9D0C3;
  --espresso:#181511;
  --bronze:#9B7442;
  --bronze-dark:#76562F;
  --olive:#42483B;
  --parchment:#EDE5D8;
  --parchment-soft:#F2ECE2;
  --shadow:0 20px 55px rgba(40,30,20,.08);
  --max:1220px;
}

/* Base */
html{scroll-behavior:smooth}
body{
  background:var(--paper)!important;
  color:var(--ink)!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  line-height:1.72;
  letter-spacing:.005em;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 8%,rgba(155,116,66,.055),transparent 27%),
    radial-gradient(circle at 92% 18%,rgba(66,72,59,.04),transparent 30%);
  z-index:-1;
}
h1,h2,h3,.brand-main,.hero-title,.session-title-main{
  font-family:Georgia,"Times New Roman",serif!important;
  color:var(--espresso);
  font-weight:500!important;
  letter-spacing:-.025em;
}
a{color:inherit}
p{max-width:76ch}
small,.muted{color:var(--muted)}
::selection{background:#E4D5BF;color:var(--espresso)}

/* Header */
.site-header{
  background:rgba(248,244,236,.92)!important;
  border-bottom:1px solid rgba(155,116,66,.22)!important;
  backdrop-filter:blur(18px);
  box-shadow:none!important;
}
.brand-main{
  color:var(--espresso)!important;
  letter-spacing:-.02em;
}
.brand-sub,.nav a{
  color:var(--muted)!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
}
.nav a:hover{color:var(--bronze-dark)!important}

/* Hero */
.hero{
  padding-top:clamp(76px,10vw,150px)!important;
  padding-bottom:clamp(68px,9vw,130px)!important;
}
.hero .eyebrow,.eyebrow,.small-label{
  color:var(--bronze-dark)!important;
  font-size:.68rem!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
  text-transform:uppercase;
}
.hero h1{
  font-size:clamp(3.4rem,8vw,7.3rem)!important;
  line-height:.92!important;
  max-width:10ch;
  margin:.18em 0 .3em!important;
}
.hero p{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.12rem,2vw,1.5rem)!important;
  color:#5E564C!important;
  max-width:40rem!important;
  line-height:1.55;
}
.device-card{
  background:transparent!important;
  border:0!important;
  border-left:1px solid var(--bronze)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:6px 0 6px 24px!important;
}

/* Buttons */
.btn{
  border-radius:2px!important;
  min-height:48px;
  padding:13px 20px!important;
  font-weight:750!important;
  letter-spacing:.03em;
  box-shadow:none!important;
}
.btn.primary{
  background:var(--espresso)!important;
  color:#FFFDF8!important;
  border:1px solid var(--espresso)!important;
}
.btn.primary:hover{background:#2B261F!important}
.btn.secondary{
  background:transparent!important;
  color:var(--espresso)!important;
  border:1px solid #B7AA99!important;
}
.btn.secondary:hover{
  background:var(--parchment-soft)!important;
  border-color:var(--bronze)!important;
}

/* Seven Calls overview: large editorial sections, not SaaS cards */
.calls-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
  border-top:1px solid var(--line);
}
.call-card{
  position:relative;
  display:grid!important;
  grid-template-columns:minmax(90px,.25fr) minmax(230px,.75fr) minmax(0,1.6fr)!important;
  align-items:center;
  gap:clamp(22px,5vw,70px)!important;
  padding:clamp(32px,5vw,62px) 0!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.call-card:before{
  content:attr(data-call);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3rem,7vw,6.5rem);
  color:rgba(155,116,66,.28);
  line-height:1;
}
.call-card:hover{transform:none!important}
.call-card h3{
  font-size:clamp(1.65rem,3vw,2.6rem)!important;
  margin:0!important;
}
.call-card p,.call-card .outcome{
  color:var(--muted)!important;
  max-width:58ch;
}
.call-card .outcome{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.05rem;
}

/* Session browser */
.sessions-section{
  background:#F3EEE5!important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sessions-list{gap:64px!important}
.call-session-group{
  background:transparent!important;
  border:0!important;
}
.call-session-header{
  grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr)!important;
  padding:0 0 20px!important;
  border-bottom:1px solid #CFC3B3!important;
}
.call-session-header h3{
  font-size:clamp(2rem,4vw,3.4rem)!important;
  margin:.12em 0 0!important;
}
.call-session-meta{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem!important;
  line-height:1.5;
}
.call-session-meta strong{color:var(--olive)!important}
.call-session-list{gap:0!important}
.session-row{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr) auto!important;
  gap:18px!important;
  align-items:center;
  padding:18px 2px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(207,195,179,.7)!important;
  border-radius:0!important;
  box-shadow:none!important;
  transition:padding .18s ease,background .18s ease!important;
}
.session-row:hover{
  padding-left:12px!important;
  background:rgba(255,253,248,.45)!important;
  border-color:rgba(155,116,66,.45)!important;
}
.session-number{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.15rem!important;
  color:var(--bronze-dark)!important;
}
.session-title{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.08rem!important;
  color:var(--espresso)!important;
}
.session-open{
  color:var(--muted)!important;
  text-transform:uppercase;
  font-size:.65rem!important;
  letter-spacing:.15em;
}

/* Session page */
.session-shell{
  gap:clamp(28px,5vw,70px)!important;
  align-items:start;
}
.session-sidebar{
  position:sticky;
  top:96px;
}
.sticky-box{
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--bronze)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:24px 0!important;
}
#sideSessionLabel{
  color:var(--bronze-dark)!important;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:.68rem;
}
#sideTitle{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.45rem!important;
  color:var(--espresso)!important;
}
.time-invested{
  background:transparent!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  padding:16px 0!important;
}
.time-invested strong{color:var(--espresso)!important}

/* Reading column: feels like a private book */
.session-content{
  background:var(--white)!important;
  border:1px solid #E2D9CC!important;
  border-radius:2px!important;
  box-shadow:var(--shadow)!important;
  padding:clamp(34px,6vw,82px)!important;
}
#sessionEyebrow{
  color:var(--bronze-dark)!important;
  letter-spacing:.17em;
}
#sessionTitle{
  font-size:clamp(2.7rem,5vw,5rem)!important;
  line-height:1.02!important;
  max-width:13ch;
  margin:.2em 0 .55em!important;
}
.session-content h3{
  font-size:clamp(1.55rem,2.4vw,2.1rem)!important;
  margin-top:2.2em!important;
  margin-bottom:.65em!important;
}
.session-content p,.session-content li{
  font-size:1.04rem;
  color:#39342E;
}

/* Scripture */
.scripture{
  position:relative;
  background:#F2ECE2!important;
  border:0!important;
  border-left:2px solid var(--bronze)!important;
  border-radius:0!important;
  padding:clamp(24px,4vw,40px)!important;
  margin:22px 0!important;
}
.translation{
  color:var(--bronze-dark)!important;
  letter-spacing:.17em!important;
  font-size:.65rem!important;
  font-weight:800!important;
}
.scripture p{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.08rem!important;
  line-height:1.78!important;
  color:#302A24!important;
}
.scripture cite{color:var(--muted)!important}

/* Reflection / response */
.reflection{
  background:transparent!important;
  border:0!important;
  border-top:1px solid var(--bronze)!important;
  border-bottom:1px solid var(--line)!important;
  border-radius:0!important;
  padding:22px 0!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.15rem;
}
.personal-anchor{
  background:transparent!important;
  border:0!important;
  border-left:2px solid var(--bronze)!important;
  border-radius:0!important;
  padding:8px 0 8px 24px!important;
  color:var(--espresso)!important;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.25rem;
}
.word-study{
  background:#F6F1E9!important;
  border:1px solid #DDD2C3!important;
  border-radius:2px!important;
  box-shadow:none!important;
}
.response-block{
  background:#F6F1E9!important;
  border:0!important;
  border-radius:2px!important;
  padding:clamp(22px,4vw,34px)!important;
}
textarea,input{
  background:#FFFDF8!important;
  color:var(--ink)!important;
  border:0!important;
  border-bottom:1px solid #BCAF9D!important;
  border-radius:0!important;
  box-shadow:none!important;
}
textarea:focus,input:focus{
  outline:0!important;
  border-bottom:2px solid var(--bronze)!important;
}

/* Prayer: quiet, pastoral, not another card */
.prayer{
  position:relative;
  background:var(--olive)!important;
  color:#F8F4EC!important;
  border:0!important;
  border-radius:2px!important;
  padding:clamp(28px,5vw,48px)!important;
}
.prayer p{
  color:#F8F4EC!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:1.12rem!important;
  line-height:1.75;
}

/* Walk it out */
.next-step{
  display:block;
  background:#EDE5D8!important;
  border:0!important;
  border-left:2px solid var(--bronze)!important;
  border-radius:0!important;
  padding:24px!important;
}

/* Closing */
.closing{
  background:var(--espresso)!important;
  color:#F8F4EC!important;
  border-radius:2px!important;
  padding:clamp(28px,5vw,48px)!important;
  margin-top:50px!important;
}
.closing p,.closing strong{color:#F8F4EC!important}

/* Previous / all / next: editorial footer navigation */
.bottom-nav{
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  gap:16px!important;
  align-items:center;
  margin-top:52px!important;
  padding-top:26px!important;
  border-top:1px solid var(--line)!important;
}
.bottom-nav .btn{
  background:transparent!important;
  border:0!important;
  color:var(--espresso)!important;
  padding:12px 0!important;
  text-transform:none!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:.98rem!important;
}
.bottom-nav .btn:hover{color:var(--bronze-dark)!important}
.bottom-nav .btn:first-child{text-align:left}
.bottom-nav .btn:last-child{text-align:right}

/* Footer */
footer{
  background:var(--espresso)!important;
  color:#D9D0C3!important;
  border:0!important;
}

/* Search */
.search-wrap input{
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid #B9AD9C!important;
  border-radius:0!important;
  padding-left:0!important;
}

/* Mobile */
@media(max-width:800px){
  .call-card{
    grid-template-columns:70px 1fr!important;
    gap:16px 20px!important;
  }
  .call-card > :last-child{grid-column:2}
  .session-content{
    padding:34px 22px!important;
    border-left:0!important;
    border-right:0!important;
  }
  .session-sidebar{position:static}
}
@media(max-width:620px){
  .hero h1{font-size:3.5rem!important}
  .call-session-header{grid-template-columns:1fr!important}
  .session-row{grid-template-columns:44px 1fr auto!important}
  .bottom-nav{
    grid-template-columns:1fr 1fr!important;
  }
  .bottom-nav .btn:nth-child(2){
    grid-column:1/-1;
    grid-row:2;
    text-align:center;
  }
}


/* =========================================================
   MOBILE FIX — Seven Calls editorial sections
   Collapse desktop columns into a readable vertical stack.
   ========================================================= */

@media(max-width:700px){
  .calls-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }

  .call-card{
    display:block!important;
    position:relative!important;
    padding:34px 0 40px!important;
    border-bottom:1px solid var(--line)!important;
  }

  .call-card:before{
    content:attr(data-call)!important;
    display:block!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:3.7rem!important;
    line-height:1!important;
    color:rgba(155,116,66,.28)!important;
    margin-bottom:8px!important;
  }

  .call-card .small-label{
    display:block!important;
    margin:0 0 18px!important;
  }

  .call-card h3{
    display:block!important;
    font-size:clamp(2.2rem,11vw,3.35rem)!important;
    line-height:.98!important;
    max-width:none!important;
    margin:0 0 14px!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    white-space:normal!important;
  }

  .call-card p{
    display:block!important;
    max-width:34rem!important;
    margin:7px 0!important;
    font-size:1rem!important;
    line-height:1.55!important;
  }

  .call-card p strong{
    color:var(--olive)!important;
    font-family:Inter,ui-sans-serif,system-ui!important;
    font-size:.72rem!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
  }

  .call-card .outcome{
    display:block!important;
    margin-top:20px!important;
    padding-top:18px!important;
    border-top:1px solid rgba(155,116,66,.25)!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:1.1rem!important;
    line-height:1.5!important;
    color:var(--espresso)!important;
  }
}

@media(max-width:480px){
  .call-card{
    padding:30px 0 36px!important;
  }

  .call-card:before{
    font-size:3.2rem!important;
  }

  .call-card h3{
    font-size:2.65rem!important;
  }
}


/* =========================================================
   AESTHETIC V2 — editorial typography, Scripture, journaling,
   navigation, restrained motion, and mobile reading.
   ========================================================= */

:root{
  --reading:Georgia,"Times New Roman",serif;
  --ui:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* More disciplined typography */
.session-content{
  max-width:820px;
}
.session-content > .prose{
  max-width:690px;
  margin-inline:auto;
}
.session-content h3{
  max-width:690px;
  margin-left:auto!important;
  margin-right:auto!important;
  font-size:clamp(1.65rem,2.5vw,2.25rem)!important;
  line-height:1.14!important;
}
.session-content p,
.session-content li{
  font-family:var(--reading)!important;
  font-size:clamp(1.04rem,1.3vw,1.13rem)!important;
  line-height:1.82!important;
}
#sessionEyebrow{
  display:block;
  margin-bottom:18px;
}
#sessionTitle{
  letter-spacing:-.035em!important;
  margin-bottom:26px!important;
}

/* Scripture becomes a focal reading experience */
.scripture{
  max-width:720px;
  margin:32px auto!important;
  padding:clamp(28px,5vw,46px)!important;
  background:#F1E9DC!important;
  border-left:1px solid var(--bronze)!important;
}
.scripture + .scripture{
  margin-top:14px!important;
}
.scripture p{
  font-family:var(--reading)!important;
  font-size:clamp(1.08rem,1.5vw,1.2rem)!important;
  line-height:1.9!important;
  max-width:60ch;
}
.translation{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.translation:after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(155,116,66,.25);
}

/* Teaching callouts feel editorial rather than card-based */
.personal-anchor{
  max-width:690px;
  margin:38px auto!important;
  padding:14px 0 14px 28px!important;
  font-size:clamp(1.22rem,2vw,1.45rem)!important;
  line-height:1.55!important;
}
.reflection,
.word-study,
.response-block,
.prayer,
.next-step{
  max-width:690px;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Journal fields instead of form boxes */
.response-block{
  padding:30px 0!important;
  background:transparent!important;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.response-block label{
  font-family:var(--ui)!important;
  font-size:.78rem!important;
  letter-spacing:.02em;
  color:#514B43;
}
textarea{
  min-height:112px;
  padding:14px 2px 8px!important;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(155,116,66,.22) 32px
    )!important;
  border:0!important;
  border-radius:0!important;
  line-height:32px!important;
  font-family:var(--reading)!important;
  font-size:1.05rem!important;
}
textarea:focus{
  outline:none!important;
  box-shadow:none!important;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,253,248,.5) 0,
      rgba(255,253,248,.5) 31px,
      rgba(155,116,66,.36) 32px
    )!important;
}

/* Prayer as a visual pause */
.prayer{
  margin-top:46px!important;
  margin-bottom:46px!important;
  padding:clamp(36px,6vw,58px)!important;
}
.prayer:before{
  content:"";
  display:block;
  width:34px;
  height:1px;
  background:#C5AA82;
  margin-bottom:24px;
}
.prayer p{
  font-size:clamp(1.13rem,1.6vw,1.28rem)!important;
  line-height:1.85!important;
}

/* Walk It Out remains warm but lighter */
.next-step{
  padding:28px!important;
  margin-top:32px!important;
}
.next-step textarea{
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(118,86,47,.22) 32px
    )!important;
}

/* Editorial previous / next */
.bottom-nav{
  margin-top:70px!important;
  padding-top:30px!important;
}
.bottom-nav .btn{
  min-height:auto!important;
  line-height:1.3!important;
  transition:color .18s ease, transform .18s ease!important;
}
.bottom-nav .btn:first-child:hover{transform:translateX(-3px)}
.bottom-nav .btn:last-child:hover{transform:translateX(3px)}

/* Restrained motion */
.call-card,
.session-row,
.btn,
.scripture,
.prayer{
  transition:transform .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}
@media(prefers-reduced-motion:no-preference){
  .session-content{
    animation:dmjFade .38s ease both;
  }
  @keyframes dmjFade{
    from{opacity:0;transform:translateY(7px)}
    to{opacity:1;transform:none}
  }
}

/* Mobile reading mode */
@media(max-width:700px){
  .session-shell{
    padding-top:28px!important;
  }
  .session-layout{
    gap:20px!important;
  }
  .sticky-box{
    padding:14px 0!important;
    border-top:0!important;
    border-bottom:1px solid var(--line)!important;
  }
  #sideTitle{
    font-size:1.15rem!important;
  }
  .time-invested{
    display:flex!important;
    align-items:baseline;
    gap:8px;
    border:0!important;
    padding:6px 0!important;
    margin:8px 0!important;
  }
  .time-invested strong{
    font-size:1.2rem!important;
  }
  .session-content{
    box-shadow:none!important;
    border:0!important;
    background:transparent!important;
    padding:30px 0!important;
  }
  #sessionTitle{
    font-size:clamp(2.55rem,12vw,3.7rem)!important;
    max-width:none!important;
  }
  .session-content h3{
    margin-top:2.1em!important;
  }
  .scripture{
    margin-left:0!important;
    margin-right:0!important;
    padding:26px 22px!important;
  }
  .response-block,
  .reflection,
  .word-study,
  .personal-anchor,
  .prayer,
  .next-step{
    max-width:none!important;
  }
  .bottom-nav{
    gap:10px!important;
  }
}


/* =========================================================
   SEVEN CALLS VISUAL IDENTITY
   No lesson-level imagery. These abstract marks live only
   on the Seven Calls overview / navigation experience.
   ========================================================= */

.call-card{
  overflow:hidden;
  isolation:isolate;
}
.call-card > *{
  position:relative;
  z-index:2;
}

/* Shared signature mark */
.call-card::after{
  content:"";
  position:absolute;
  z-index:1;
  right:1.5%;
  top:50%;
  width:150px;
  height:150px;
  transform:translateY(-50%);
  opacity:.42;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* 01 FOLLOW ME — forward path */
.call-visual-1::after{
  background:
    linear-gradient(135deg,transparent 46%,rgba(155,116,66,.52) 47%,rgba(155,116,66,.52) 48%,transparent 49%),
    linear-gradient(45deg,transparent 51%,rgba(66,72,59,.26) 52%,rgba(66,72,59,.26) 53%,transparent 54%);
  clip-path:polygon(8% 94%,42% 54%,63% 35%,92% 6%,100% 14%,70% 44%,49% 62%,18% 100%);
}

/* 02 ABIDE IN ME — branch / vine geometry */
.call-visual-2::after{
  border-left:1px solid rgba(155,116,66,.7);
  border-radius:52% 0 0 52%;
  background:
    radial-gradient(ellipse at 38% 30%,rgba(66,72,59,.20) 0 14%,transparent 15%),
    radial-gradient(ellipse at 58% 49%,rgba(66,72,59,.18) 0 13%,transparent 14%),
    radial-gradient(ellipse at 35% 70%,rgba(66,72,59,.16) 0 12%,transparent 13%);
  transform:translateY(-50%) rotate(14deg);
}

/* 03 LEARN FROM ME — open-page lines */
.call-visual-3::after{
  width:170px;
  height:120px;
  border-top:1px solid rgba(155,116,66,.65);
  border-bottom:1px solid rgba(155,116,66,.45);
  background:
    linear-gradient(90deg,transparent 49.5%,rgba(155,116,66,.55) 50%,transparent 50.5%),
    repeating-linear-gradient(0deg,transparent 0 18px,rgba(66,72,59,.14) 19px 20px);
  clip-path:polygon(0 8%,48% 0,50% 7%,52% 0,100% 8%,94% 100%,52% 92%,50% 98%,48% 92%,6% 100%);
}

/* 04 BECOME LIKE ME — concentric transformation */
.call-visual-4::after{
  border:1px solid rgba(155,116,66,.58);
  border-radius:50%;
  box-shadow:
    inset 0 0 0 22px transparent,
    inset 0 0 0 23px rgba(155,116,66,.28),
    inset 0 0 0 45px transparent,
    inset 0 0 0 46px rgba(66,72,59,.20);
}

/* 05 SERVE WITH ME — two intersecting arcs */
.call-visual-5::after{
  border:1px solid rgba(155,116,66,.58);
  border-radius:50% 50% 8% 50%;
  transform:translateY(-50%) rotate(45deg);
  box-shadow:34px -34px 0 -1px transparent,34px -34px 0 0 rgba(66,72,59,.22);
}

/* 06 GO FOR ME — widening horizon */
.call-visual-6::after{
  width:180px;
  height:120px;
  background:
    linear-gradient(165deg,transparent 48%,rgba(155,116,66,.52) 49%,rgba(155,116,66,.52) 50%,transparent 51%),
    linear-gradient(195deg,transparent 48%,rgba(66,72,59,.24) 49%,rgba(66,72,59,.24) 50%,transparent 51%);
  clip-path:polygon(0 48%,100% 0,100% 100%);
}

/* 07 MAKE DISCIPLES — multiplication / generations */
.call-visual-7::after{
  width:175px;
  height:120px;
  background:
    radial-gradient(circle at 18% 50%,transparent 0 11px,rgba(155,116,66,.55) 12px 13px,transparent 14px),
    radial-gradient(circle at 50% 50%,transparent 0 17px,rgba(155,116,66,.46) 18px 19px,transparent 20px),
    radial-gradient(circle at 84% 50%,transparent 0 24px,rgba(66,72,59,.28) 25px 26px,transparent 27px),
    linear-gradient(90deg,transparent 18%,rgba(155,116,66,.35) 19%,rgba(155,116,66,.35) 83%,transparent 84%);
}

/* Call-section title gets a restrained bronze hairline */
.call-session-header{
  position:relative;
}
.call-session-header::before{
  content:"";
  position:absolute;
  left:0;
  top:-14px;
  width:34px;
  height:1px;
  background:var(--bronze);
}

/* Keep visual identity away from lesson reading pages */
.session-content::before,
.session-content::after,
.scripture::before,
.scripture::after{
  background-image:none!important;
}

/* Mobile: marks become quiet watermarks behind the call title */
@media(max-width:700px){
  .call-card::after{
    width:112px;
    height:112px;
    right:0;
    top:28px;
    transform:none;
    opacity:.24;
  }
  .call-visual-2::after{
    transform:rotate(14deg);
  }
  .call-visual-5::after{
    transform:rotate(45deg);
  }
  .call-card h3,
  .call-card p,
  .call-card .outcome{
    max-width:calc(100% - 28px)!important;
  }
}


/* Keep This Session */
.keep-session{
  max-width:690px;
  margin:54px auto 0;
  padding:30px 0 6px;
  border-top:1px solid var(--bronze);
}
.keep-session h3{
  margin:.25em 0 .45em!important;
}
.keep-session > p{
  color:#514B43;
}
.keep-session-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 14px;
}
.keep-session small{
  display:block;
  color:var(--muted);
  font-family:var(--ui);
  font-size:.74rem;
}

/* Print sheet is hidden during normal use */
.print-sheet{display:none}

@media print{
  @page{
    size:auto;
    margin:18mm;
  }

  body{
    background:#F8F4EC!important;
    color:#28241F!important;
  }

  body > *:not(.print-sheet){
    display:none!important;
  }

  .print-sheet{
    display:block!important;
    max-width:760px;
    margin:0 auto;
    font-family:Georgia,"Times New Roman",serif;
    color:#28241F;
    background:#F8F4EC;
  }

  .print-brand{
    font-family:Georgia,"Times New Roman",serif;
    font-size:17pt;
    letter-spacing:.03em;
    color:#181511;
  }

  .print-subbrand{
    margin-top:2mm;
    font-family:Arial,sans-serif;
    font-size:8pt;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#746D63;
  }

  .print-rule{
    height:1px;
    background:#9B7442;
    margin:6mm 0 10mm;
  }

  .print-call{
    margin:0 0 3mm;
    font-family:Arial,sans-serif;
    font-size:8pt;
    font-weight:bold;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#76562F;
  }

  .print-sheet h1{
    margin:0 0 3mm;
    font-size:30pt;
    line-height:1.05;
    font-weight:normal;
    color:#181511;
  }

  .print-date{
    margin:0 0 8mm;
    font-family:Arial,sans-serif;
    font-size:9pt;
    color:#746D63;
  }

  .print-meta{
    padding:5mm 0;
    border-top:1px solid #D9D0C3;
    border-bottom:1px solid #D9D0C3;
  }

  .print-meta p{
    margin:1.5mm 0;
    font-size:10.5pt;
  }

  .print-sheet h3{
    margin:9mm 0 3mm;
    font-size:16pt;
    font-weight:normal;
    color:#181511;
  }

  .print-sheet h4{
    margin:5mm 0 1.5mm;
    font-family:Arial,sans-serif;
    font-size:8pt;
    letter-spacing:.04em;
    color:#76562F;
  }

  .print-sheet p{
    font-size:11pt;
    line-height:1.55;
  }

  .print-response{
    padding:0 0 4mm;
    border-bottom:1px solid #E1D8CB;
    break-inside:avoid;
  }

  .print-next{
    margin-top:8mm;
    padding:6mm;
    border-left:2px solid #9B7442;
    background:#EDE5D8;
    break-inside:avoid;
  }

  .print-footer{
    margin-top:12mm;
    padding-top:5mm;
    border-top:1px solid #D9D0C3;
    font-style:italic;
    color:#746D63;
  }
}

@media(max-width:620px){
  .keep-session-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .keep-session-actions .btn{
    width:100%;
  }
}


/* =========================================================
   CALL EXPLAINER
   ========================================================= */
.call-explainer{
  margin-top:52px;
  padding-top:34px;
  border-top:1px solid var(--line);
  max-width:760px;
}
.call-explainer h3{
  margin:.15em 0 .55em;
  font-size:clamp(2rem,4vw,3.1rem);
}
.call-explainer p{
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08rem;
  line-height:1.75;
  color:#3B352F;
}
.call-explainer-principle{
  margin-top:26px;
  padding:22px 0;
  display:grid;
  gap:4px;
  border-top:1px solid var(--bronze);
  border-bottom:1px solid var(--line);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08rem;
}

/* =========================================================
   SEVEN CALLS — integrated CALL + number
   ========================================================= */
.call-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.call-card::before{
  display:none!important;
}

.call-signature{
  display:flex;
  align-items:flex-end;
  gap:14px;
  min-width:126px;
  position:relative;
  z-index:3;
}

.call-word{
  font-family:Inter,ui-sans-serif,system-ui;
  font-size:.72rem;
  line-height:1;
  letter-spacing:.20em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--bronze-dark);
  padding-bottom:10px;
}

.call-number{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(4.6rem,8vw,7.4rem);
  line-height:.78;
  letter-spacing:-.055em;
  color:rgba(155,116,66,.46);
}

/* Make abstract watermarks more visible */
.call-card::after{
  opacity:.60!important;
  filter:contrast(1.08);
}

/* Slightly stronger motifs per call */
.call-visual-2::after{
  border-left-color:rgba(155,116,66,.82)!important;
}
.call-visual-3::after{
  border-top-color:rgba(155,116,66,.82)!important;
  border-bottom-color:rgba(155,116,66,.62)!important;
}
.call-visual-4::after{
  border-color:rgba(155,116,66,.76)!important;
}
.call-visual-5::after{
  border-color:rgba(155,116,66,.74)!important;
}

/* Editorial motion for Seven Calls only */
@media(prefers-reduced-motion:no-preference){
  #calls .call-card{
    opacity:0;
    transform:translateY(24px);
    animation:callReveal .7s cubic-bezier(.2,.7,.2,1) forwards;
  }

  #calls .call-card:nth-child(1){animation-delay:.04s}
  #calls .call-card:nth-child(2){animation-delay:.10s}
  #calls .call-card:nth-child(3){animation-delay:.16s}
  #calls .call-card:nth-child(4){animation-delay:.22s}
  #calls .call-card:nth-child(5){animation-delay:.28s}
  #calls .call-card:nth-child(6){animation-delay:.34s}
  #calls .call-card:nth-child(7){animation-delay:.40s}

  @keyframes callReveal{
    to{
      opacity:1;
      transform:none;
    }
  }

  #calls .call-card::after{
    transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .35s ease!important;
  }

  #calls .call-card:hover::after{
    transform:translateY(-50%) scale(1.08) rotate(2deg);
    opacity:.78!important;
  }

  #calls .call-card:hover .call-number{
    color:rgba(155,116,66,.64);
    transition:color .25s ease;
  }
}

/* Mobile Call layout */
@media(max-width:700px){
  .call-signature{
    gap:10px;
    margin-bottom:12px;
  }

  .call-word{
    padding-bottom:7px;
  }

  .call-number{
    font-size:3.7rem;
  }

  .call-card::after{
    opacity:.36!important;
  }

  #calls .call-card:hover::after{
    transform:none;
  }
}


/* =========================================================
   SESSION HEADER / TIMER FIX
   ========================================================= */

#sideCall:empty{
  display:none!important;
}

/* Keep sidebar/session header compact and non-duplicative */
.sticky-box{
  display:block!important;
}

.time-invested{
  display:grid!important;
  grid-template-columns:1fr!important;
  align-items:start!important;
  gap:2px!important;
}

.time-invested span{
  display:block!important;
  font-size:.78rem!important;
  line-height:1.35!important;
  color:var(--muted)!important;
}

.time-invested strong{
  display:block!important;
  margin:4px 0 2px!important;
  font-size:1.7rem!important;
  line-height:1.1!important;
  letter-spacing:.01em!important;
}

.time-invested small{
  display:block!important;
  max-width:24ch!important;
  font-size:.7rem!important;
  line-height:1.45!important;
  color:var(--muted)!important;
}

/* Mobile and tablet */
@media(max-width:900px){
  .sticky-box{
    padding:14px 0 16px!important;
  }

  #sideSessionLabel{
    margin-bottom:5px!important;
  }

  #sideTitle{
    margin:0 0 6px!important;
    font-size:1.25rem!important;
    line-height:1.15!important;
  }

  .time-invested{
    margin:12px 0 0!important;
    padding:12px 0 0!important;
    border-top:1px solid var(--line)!important;
    border-bottom:0!important;
  }

  .time-invested small{
    max-width:none!important;
  }
}

@media(max-width:620px){
  .time-invested strong{
    font-size:1.45rem!important;
  }

  .time-invested span{
    font-size:.74rem!important;
  }

  .time-invested small{
    font-size:.68rem!important;
  }
}


/* =========================================================
   SESSION NAVIGATION FIX
   Clean editorial destinations without competing columns.
   ========================================================= */

.bottom-nav{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:clamp(36px,8vw,100px)!important;
  row-gap:28px!important;
  align-items:start!important;
  margin-top:70px!important;
  padding-top:32px!important;
  border-top:1px solid var(--line)!important;
}

.bottom-nav .btn{
  display:block!important;
  min-width:0!important;
  width:100%!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  font-family:var(--ui)!important;
  font-size:.72rem!important;
  line-height:1.35!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  font-weight:800!important;
  color:var(--bronze-dark)!important;
}

.bottom-nav .btn:first-child{
  text-align:left!important;
  justify-content:flex-start!important;
}

.bottom-nav .btn:last-child{
  text-align:right!important;
  justify-content:flex-end!important;
}

.bottom-nav .btn small{
  display:block!important;
  margin-top:9px!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(1.02rem,1.7vw,1.28rem)!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  text-transform:none!important;
  font-weight:500!important;
  color:var(--espresso)!important;
  overflow-wrap:anywhere!important;
}

.bottom-nav .btn:nth-child(2){
  grid-column:1 / -1!important;
  grid-row:2!important;
  justify-self:center!important;
  width:auto!important;
  text-align:center!important;
  margin-top:12px!important;
  color:var(--muted)!important;
}

.bottom-nav .btn:hover{
  transform:none!important;
  color:var(--bronze-dark)!important;
}

.bottom-nav .btn:hover small{
  color:var(--bronze-dark)!important;
}

/* Tablet and phone: previous and next become full-width rows */
@media(max-width:760px){
  .bottom-nav{
    grid-template-columns:1fr!important;
    gap:0!important;
    margin-top:54px!important;
    padding-top:0!important;
    border-top:1px solid var(--line)!important;
  }

  .bottom-nav .btn{
    grid-column:1!important;
    padding:22px 0!important;
    border-bottom:1px solid var(--line)!important;
  }

  .bottom-nav .btn:first-child{
    grid-row:1!important;
  }

  .bottom-nav .btn:last-child{
    grid-row:2!important;
    text-align:left!important;
    justify-content:flex-start!important;
  }

  .bottom-nav .btn:nth-child(2){
    grid-row:3!important;
    margin:0!important;
    padding:22px 0!important;
    border-bottom:0!important;
    justify-self:start!important;
    text-align:left!important;
  }

  .bottom-nav .btn small{
    max-width:30rem!important;
    font-size:1.08rem!important;
  }
}


/* =========================================================
   CALL GRAPHIC VISIBILITY FIX — 01 FOLLOW ME + 03 LEARN FROM ME
   ========================================================= */

/* 01 FOLLOW ME — make the forward-path mark clearly visible */
.call-visual-1::after{
  width:190px!important;
  height:150px!important;
  right:2%!important;
  opacity:.86!important;
  filter:contrast(1.18)!important;
  background:
    linear-gradient(
      135deg,
      transparent 43%,
      rgba(155,116,66,.86) 44%,
      rgba(155,116,66,.86) 47%,
      transparent 48%
    ),
    linear-gradient(
      45deg,
      transparent 50%,
      rgba(66,72,59,.52) 51%,
      rgba(66,72,59,.52) 54%,
      transparent 55%
    )!important;
  clip-path:polygon(
    5% 94%,
    38% 56%,
    60% 36%,
    92% 5%,
    100% 14%,
    68% 45%,
    47% 64%,
    16% 100%
  )!important;
}

/* 03 LEARN FROM ME — make the open-page symbol read unmistakably */
.call-visual-3::after{
  width:200px!important;
  height:138px!important;
  right:1.6%!important;
  opacity:.84!important;
  filter:contrast(1.16)!important;
  border-top:2px solid rgba(155,116,66,.88)!important;
  border-bottom:2px solid rgba(155,116,66,.72)!important;
  background:
    linear-gradient(
      90deg,
      transparent 48.8%,
      rgba(155,116,66,.80) 49.3%,
      rgba(155,116,66,.80) 50.7%,
      transparent 51.2%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 20px,
      rgba(66,72,59,.34) 21px 23px
    )!important;
  clip-path:polygon(
    0 8%,
    47% 0,
    50% 8%,
    53% 0,
    100% 8%,
    95% 100%,
    53% 92%,
    50% 99%,
    47% 92%,
    5% 100%
  )!important;
}

/* Hover gets stronger, but still restrained */
@media(prefers-reduced-motion:no-preference){
  #calls .call-visual-1:hover::after,
  #calls .call-visual-3:hover::after{
    opacity:.98!important;
    filter:contrast(1.25)!important;
  }
}

/* Mobile: preserve visibility without crowding the text */
@media(max-width:700px){
  .call-visual-1::after{
    width:130px!important;
    height:105px!important;
    right:0!important;
    top:26px!important;
    opacity:.52!important;
  }

  .call-visual-3::after{
    width:138px!important;
    height:94px!important;
    right:0!important;
    top:24px!important;
    opacity:.50!important;
  }
}

/* Lazy-load + export additions */
.loading-note{
  color: var(--charcoal, #263238);
  opacity: .75;
  font-style: italic;
  padding: 1.5rem 0;
}
.device-note.small{
  font-size: .78rem;
  opacity: .8;
  margin-top: .4rem;
}
#exportBtn{ margin-top: .75rem; }

/* --- batch fixes --- */

/* Session title focus: show a ring only for keyboard users (:focus-visible),
   not on the programmatic focus that fires when a session opens on tap. */
#sessionTitle{ outline:none; }
#sessionTitle:focus{ outline:none; }
#sessionTitle:focus-visible{
  outline:2px solid var(--teal,#2F7C78);
  outline-offset:4px;
  border-radius:3px;
}

/* Scripture reference sits above each passage, as a heading. */
.scripture .scripture-ref{
  font-weight:600;
  color:var(--navy,#17324D);
  margin:0 0 .55em;
  font-size:.98rem;
  letter-spacing:.005em;
}
.scripture .scripture-version{ color:var(--muted,#6b675f); font-weight:500; }
.scripture .scripture-version a{ color:inherit; text-decoration:none; }
.scripture .scripture-version a:hover{ text-decoration:underline; }

/* "You are not walking this alone" note on Start Here. */
.leaders-note{
  margin-top:44px;
  padding-top:30px;
  border-top:1px solid var(--line,#DDD2C3);
}
.leaders-note h3{ margin:.15em 0 .55em; }
.leaders-note p{ margin:.7em 0; }

/* ======================================================================
   PREMIUM LAYER  ·  literary serif display + reading, clean sans UI
   ====================================================================== */

@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('fonts/fraunces-italic.woff2') format('woff2');
  font-weight:100 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/inter.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --bronze:#9C7A45;
  --bronze-deep:#7C6033;
  --reading-scale:1;
}

/* Base surfaces, a touch warmer and higher-contrast */
body{
  font-family:var(--sans) !important;
  color:#23313B !important;
  background:#F7F4EC !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}

/* Display + long-form reading in the literary serif */
h1,h2,h3,.device-time,.brand-main,
.prose,.prose p,#sessionBody p,.personal-anchor,.prayer p{
  font-family:var(--serif) !important;
  font-optical-sizing:auto;
}
h1{font-weight:540 !important;letter-spacing:-.03em !important;line-height:.98 !important;}
h2{font-weight:560 !important;letter-spacing:-.026em !important;}
h3{font-weight:600 !important;letter-spacing:-.012em !important;}

/* Interface, labels and data in the clean sans */
.eyebrow,.small-label,.nav,.nav a,.btn,.lead,.session-call,.session-meta,
.session-open,.session-number,.time-invested,.time-invested *,.reading-size,
.reading-size *,.footer-inner span,.footer-inner p,.search-wrap,.search-wrap input,
.brand-sub,.device-note,.translation,#sessionBody .scripture-ref{
  font-family:var(--sans) !important;
}

/* Bronze/gold for the caps labels — the quiet signature colour */
.eyebrow,.small-label,#sessionEyebrow,#sideSessionLabel{
  color:var(--bronze) !important; letter-spacing:.14em !important; font-weight:700 !important;
}

/* Header */
.site-header{background:rgba(247,244,236,.9) !important;border-bottom:1px solid rgba(0,0,0,.06) !important;}
.brand-main{font-weight:600 !important;letter-spacing:.01em !important;font-size:1.05rem !important;color:#1A2E3E !important;}
.nav a{color:var(--muted) !important;letter-spacing:.015em;transition:color .2s ease;}
.nav a:hover{color:#1A2E3E !important;}

/* Hero — the signature moment */
.hero{background:linear-gradient(180deg,#F1EEE3 0%,#F7F4EC 62%) !important;}
.lead{color:#4A5560 !important;font-size:1.16rem !important;line-height:1.62 !important;}
.device-time{font-weight:520 !important;letter-spacing:-.01em;}

/* Buttons — soft depth and a gentle lift */
.btn{
  padding:13px 22px !important;font-weight:600 !important;letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .22s ease,background .2s ease,border-color .2s ease !important;
}
.btn.primary{background:#1A2E3E !important;box-shadow:0 1px 2px rgba(20,30,40,.12),0 12px 26px -16px rgba(20,30,40,.55);}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 2px 5px rgba(20,30,40,.15),0 18px 32px -16px rgba(20,30,40,.6);}
.btn.secondary{border-color:rgba(0,0,0,.14) !important;background:rgba(255,255,255,.55) !important;}
.btn.secondary:hover{border-color:rgba(0,0,0,.3) !important;background:#fff !important;}
.btn:active{transform:translateY(0);}

/* Cards — hairline borders and a soft, expensive shadow */
.device-card,.session-row,.call-card,.word-study,.response-block,.sticky-box{
  border-color:rgba(0,0,0,.08) !important;
  box-shadow:0 1px 2px rgba(28,36,44,.03),0 16px 36px -24px rgba(28,36,44,.16) !important;
  background:rgba(255,255,255,.74) !important;
}
.session-row{transition:transform .16s ease,box-shadow .22s ease,background .2s ease !important;}
.session-row:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(28,36,44,.05),0 22px 44px -24px rgba(28,36,44,.22) !important;background:#fff !important;}
.call-card{border-top-color:var(--bronze) !important;border-top-width:3px !important;}

/* Scripture — the core reading surface */
.scripture{border-left:2px solid var(--bronze) !important;padding:4px 0 4px 26px !important;margin:32px 0 !important;}
#sessionBody .scripture-ref{
  color:var(--bronze-deep) !important;font-weight:700 !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;
  font-size:.74rem !important;margin:0 0 .8em !important;
}
#sessionBody .scripture-ref .scripture-version{color:var(--bronze) !important;}
#sessionBody .scripture p{
  font-size:calc(1.18rem * var(--reading-scale,1)) !important;
  line-height:1.8 !important;color:#2A3843 !important;
}

/* Reading text (teaching, welcome, prayer, reflection) — scales with the control */
#sessionBody p{font-size:calc(1.14rem * var(--reading-scale,1)) !important;line-height:1.76 !important;color:#2B3843 !important;}
#sessionBody .word-study p{font-size:calc(1.0rem * var(--reading-scale,1)) !important;line-height:1.62 !important;}
.personal-anchor{font-size:calc(1.34rem * var(--reading-scale,1)) !important;line-height:1.42 !important;border-left-color:var(--bronze) !important;}
.prayer p{font-size:calc(1.16rem * var(--reading-scale,1)) !important;}

/* Text-size control */
.reading-size{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 2px;padding-top:15px;border-top:1px solid rgba(0,0,0,.08);}
.reading-size-label{font-size:.78rem;color:var(--muted);}
.reading-size-btns{display:flex;gap:6px;}
.size-btn{border:1px solid rgba(0,0,0,.15);background:#fff;border-radius:9px;min-width:40px;height:36px;padding:0 8px;cursor:pointer;color:#23313B;line-height:1;font-weight:600;transition:border-color .18s ease,background .18s ease;}
.size-btn:hover{border-color:rgba(0,0,0,.32);background:#FBFAF6;}
.size-btn-lg{font-size:1.18rem;}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
}

/* ======================================================================
   CHURCH CONNECTION  ·  gentle pastoral invitation, never a CTA card
   ====================================================================== */

/* In-session element (appears only on strategically chosen sessions) */
.church-connect{
  margin:36px 0;
  padding:24px 28px;
  background:linear-gradient(180deg, rgba(245,233,204,.32), rgba(247,244,236,.42));
  border-left:2px solid var(--bronze);
  border-radius:4px;
}
.church-connect .small-label{ color:var(--bronze) !important; margin:0 0 .65em !important; }
#sessionBody .church-connect p{
  font-size:calc(1.08rem * var(--reading-scale,1)) !important;
  line-height:1.72 !important; color:#33414B !important; margin:.4em 0 !important;
}
#sessionBody .church-connect .church-reflect{
  font-style:italic !important; color:#586772 !important; margin-top:1.05em !important;
}

/* Start Here section introducing the principle */
.with-his-people{
  margin-top:40px; padding-top:30px; border-top:1px solid rgba(0,0,0,.08);
}
.with-his-people h3{ margin:.15em 0 .55em; }
.with-his-people p{ margin:.7em 0; }
.with-his-people .with-his-people-principle{
  margin-top:1.1em; padding-left:18px; border-left:2px solid var(--bronze);
  color:#3A4650; font-style:italic;
}

/* ======================================================================
   CONTRAST CORRECTIONS (v13)
   The premium layer's broad reading-colour rule (#sessionBody p) and its
   .btn.primary background had clobbered the light text on the two dark
   in-session boxes and re-darkened the NEXT nav button. Restore legibility.
   ====================================================================== */

/* Closing block sits on navy — all its text stays light */
#sessionBody .closing p,
#sessionBody .closing strong{ color:#F4EFE6 !important; }

/* Prayer sits on dark olive — its text stays light */
#sessionBody .prayer p{ color:#ECE8DD !important; }

/* Footer navigation: the NEXT button (class "btn primary") should be a quiet
   editorial link like PREVIOUS, not a dark filled box. Higher specificity than
   .btn.primary so it wins, with legible text on the page background. */
.bottom-nav .btn.primary,
.bottom-nav .btn.primary:hover{
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  color:var(--bronze-dark,#76562F) !important;
}
.bottom-nav .btn.primary small{ color:#39302A !important; }

/* Footer copyright notice */
.footer-copyright{
  margin-top:20px; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-copyright p{ color:#C7CFD4 !important; font-size:.82rem; margin:0; }
.footer-copyright a{
  color:#E6D3AE !important; text-decoration:underline; text-underline-offset:3px;
  transition:color .18s ease;
}
.footer-copyright a:hover{ color:#FFFFFF !important; }


/* =========================================================
   V15 — SURFACE UNIFICATION
   One continuous ivory/parchment field instead of competing whites.
   ========================================================= */

#calls .calls-grid,
#calls .call-card{
  background:transparent!important;
}

#calls .call-card{
  box-shadow:none!important;
  border-left:0!important;
  border-right:0!important;
}

.sessions-section{
  background:var(--paper)!important;
}

.call-session-group,
.call-session-list,
.call-session-list .session-row,
.sessions-list .session-row{
  background:transparent!important;
  box-shadow:none!important;
}

.call-session-list .session-row:hover,
.sessions-list .session-row:hover{
  background:rgba(155,116,66,.045)!important;
  box-shadow:none!important;
}

.search-wrap input,
textarea,
input{
  background:#FBF7EF!important;
}

.btn.secondary{
  background:transparent!important;
}
.btn.secondary:hover{
  background:rgba(155,116,66,.06)!important;
}

.device-card{
  background:transparent!important;
}


/* =========================================================
   V16 — TEXT TO SPEECH
   ========================================================= */
.tts-tools{
  max-width:690px;
  margin:46px auto 0;
  padding:28px 0;
  border-top:1px solid var(--bronze);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
}
.tts-tools h3{
  margin:.15em 0 .35em!important;
  font-size:1.45rem!important;
}
.tts-tools p{margin:.25em 0}
.tts-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.tts-actions .btn{
  min-height:42px!important;
  padding:10px 14px!important;
}
.tts-actions .btn:disabled{
  opacity:.42;
  cursor:not-allowed;
}
@media(max-width:700px){
  .tts-tools{
    grid-template-columns:1fr;
    gap:16px;
  }
  .tts-actions{justify-content:flex-start}
}