/* DiscipleshipLessons: plainspoken, marked-up, warm. One light look, set on purpose. */
:root {
  --ink: #1D1D1D;
  --ink-2: #333333;
  --ink-3: #5A5A55;
  --paper: #FFFFFF;
  --paper-2: #F4F4F0;
  --cream: #FBF6EA;
  --rule: #E2E0D8;
  --green: #1F7A4D;
  --masters: #006747;
  --marker: #FFE45C;
  --body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Comic Sans MS', cursive;
  --serif: Georgia, 'Times New Roman', serif;
  color-scheme: light;
}
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 19px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
a:hover { color: var(--green); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--masters); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; }

/* shared chrome */
.wrap { max-width: 1100px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.wrap.narrow { max-width: 780px; }

/* lesson pages: the trail */
.lesson-hero { background: var(--paper-2); border-bottom: 2.5px solid var(--ink); }
.lesson-hero .wrap { padding-block: 56px 48px; display: flex; flex-direction: column; gap: 32px; }
.lesson-hero .wrap > .hero-main { flex: none; }
.menu-btn { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: center; }
.hero-main { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); }
.crumbs a.crumb-track { color: var(--track, var(--ink)); }
.pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--track, var(--ink)); color: #FFFFFF; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.lesson-hero h1 { margin: 0; font-weight: 900; font-size: clamp(38px, 6vw, 68px); line-height: 1.02; letter-spacing: -0.03em; max-width: 900px; }
.hero-lead { margin: 0; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; font-weight: 700; max-width: 900px; }
.progress { display: flex; gap: 6px; width: 100%; max-width: 420px; }
.progress span { flex: 1 1 0; height: 8px; border-radius: 4px; background: #D8D6CE; }
.progress span.on { background: var(--track, var(--ink)); }
.print-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; background: #FFFFFF; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; }
.print-btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.vision-box { flex: 1 1 380px; min-width: 0; margin: 0 8px 8px 0; padding: 36px; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--track, var(--masters)); font-family: var(--serif); font-size: 26px; line-height: 1.5; }
.steps { display: flex; flex-wrap: wrap; gap: 10px; }
.steps a { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #FFFFFF; border: 2px solid var(--ink); border-radius: 10px; text-decoration: none; font-weight: 800; font-size: 16px; line-height: 1.2; }
.steps a span { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--track, var(--ink)); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 14px; }

.lesson { padding-block: 56px 96px; display: flex; flex-direction: column; gap: 40px; max-width: 1100px; }
.lesson > .howto, .lesson > .pager, .lesson > .original, .lesson > .strategy, .lesson > .yourfew, .lesson > p, .lesson > ul, .lesson > ol { margin-left: 84px; }
.lesson .original { font-size: 15px; font-weight: 700; color: var(--ink-3); }
.trail { position: relative; display: flex; flex-direction: column; gap: 64px; }
.trail::before { content: ""; position: absolute; left: 27px; top: 40px; bottom: 60px; border-left: 3px dashed #CCCCCC; }
.step { position: relative; display: flex; gap: 28px; align-items: flex-start; scroll-margin-top: 16px; }
.marker { position: relative; z-index: 1; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: var(--track, var(--ink)); color: #FFFFFF; border: 3px solid var(--ink); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 24px; }
.step-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.step-body > * { margin: 0; }
.step-body h2 { font-weight: 900; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.step-body h3 { font-weight: 800; font-size: 22px; line-height: 1.25; margin-top: 8px; }
.step-body p, .step-body li { color: var(--ink-2); }
.step-body strong { color: var(--ink); }
.step-body ul, .step-body ol { padding-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.step-body li > ul, .step-body li > ol { margin-top: 8px; }
.step-body blockquote { margin: 0; padding: 18px 22px; background: var(--paper-2); border-radius: 12px; }
.vision-lead { font-size: 22px; line-height: 1.5; font-weight: 700; color: var(--ink) !important; }
.step-body .scripture { margin-right: 6px !important; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 22px 26px; font-family: var(--serif); font-size: 21px; line-height: 2.1; color: var(--ink); }
.step-body .scripture strong { font-family: var(--body); font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--track, var(--ink)); display: block; line-height: 1.4; margin-bottom: 4px; }
input.blank { font: 700 1.15em/1 var(--hand); color: var(--track, var(--ink)); background: transparent; border: 0; border-bottom: 2.5px solid var(--ink); border-radius: 0; padding: 0 4px; margin: 0 2px; text-align: center; max-width: 60%; vertical-align: baseline; }
input.blank:focus-visible { outline: 3px solid var(--masters); outline-offset: 2px; }
.howto { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; background: #FFF8D6; border-radius: 12px; font-size: 17px; }
.howto span { color: var(--ink-2); }
.media { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 0; }
.media-link { display: inline-block; padding: 14px 20px; border: 2px solid var(--ink); border-radius: 10px; font-weight: 800; text-decoration: none; }
.media-link.alt { border-color: var(--rule); background: var(--paper-2); }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border: 2.5px solid var(--ink); border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 18px; line-height: 1.3; }
.pager a span { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.pager .next { text-align: right; background: var(--track, var(--ink)); color: #FFFFFF; }
.pager .next:hover { color: #FFFFFF; }
.print-only { display: none; }

.lesson > .pre { margin-left: 84px; display: flex; flex-direction: column; gap: 16px; }
.lesson > .pre > * { margin: 0; }
.lesson > .pre p, .lesson > .pre li { color: var(--ink-2); }
.lesson > .pre ul, .lesson > .pre ol { padding-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.lesson > .pre .strategy, .lesson > .pre .yourfew { margin-bottom: 16px; }

/* foundations page */
.foundations { max-width: 1000px; padding-block: 72px 96px; }
.stops::before { left: 27px; top: 60px; bottom: 140px; }
.stops { gap: 48px; }
.stop { position: relative; display: flex; gap: 28px; align-items: flex-start; scroll-margin-top: 16px; }
.stop .marker { background: var(--c, var(--ink)); }
.stop .marker.pin { background: #FFFFFF; border: 0; height: auto; padding: 4px 0; }
.stop-card { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding: 30px; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--c, var(--ink)); background: #FFFFFF; }
.stop-card > * { margin: 0; }
.stop-card h2, .stop-card h3 { margin: 0; font-weight: 900; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; }
.part-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.part { font-weight: 800; font-size: 18px; }
.preview { color: var(--ink-2); }
.label { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: -8px !important; }
.rows { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--ink); border-radius: 10px; background: #FFFFFF; text-decoration: none; font-weight: 800; font-size: 18px; line-height: 1.3; }
.row .num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.row-title { flex: 1 1 auto; min-width: 0; }
.row svg { flex: 0 0 auto; }
.exp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.exp > span { font-weight: 700; color: var(--ink-3); font-size: 17px; }
.chip { display: inline-block; padding: 8px 14px; background: var(--marker); border: 2px solid var(--ink); border-radius: 999px; font-weight: 800; font-size: 16px; text-decoration: none; }
.grow-head { padding-left: 84px; }
.grow-head h2 { margin: 0; font-weight: 900; font-size: 44px; line-height: 1.05; letter-spacing: -0.03em; }
.stop-card.dark { background: var(--ink); color: #FFFFFF; box-shadow: none; }
.stop-card.dark p { color: #DDDDDD; }
.btn-yellow { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--marker); color: var(--ink); border-radius: 10px; text-decoration: none; font-weight: 800; }
.btn-yellow:hover { color: var(--ink); }

/* who should I disciple: tree + your few */
.strategy { margin: 0 0 12px; display: flex; flex-direction: column; gap: 14px; }
.strategy-card { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 8px 8px 0 var(--ink); max-width: 560px; }
.strategy figcaption { color: var(--ink-3); font-size: 17px; max-width: 600px; }
.yourfew { background: #FFF8D6; border-radius: 14px; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.yourfew h2 { margin: 0 !important; font-family: var(--hand); font-size: 40px !important; font-weight: 700 !important; letter-spacing: 0 !important; }
.yourfew p { margin: 0; }
.yourfew-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.yourfew label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.yourfew input { font: 700 26px/1.2 var(--hand); color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 6px 2px; min-width: 0; }
.yourfew input::placeholder { font: 500 16px var(--body); color: #77746A; text-transform: none; letter-spacing: 0; }
.yourfew input:focus-visible { outline: 3px solid var(--masters); outline-offset: 2px; }
.yourfew-note { font-size: 14px; color: var(--ink-3); }


/* plan cards (Gospel of John) */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; padding: 4px 8px 8px 0; }
.plan-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #FFFFFF; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 8px 8px 0 var(--ink); min-width: 0; }
.plan-card > * { margin: 0; }
.plan-head { display: flex; align-items: center; gap: 12px; }
.plan-letter { width: 48px; height: 48px; border-radius: 12px; background: var(--ink); color: var(--marker); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 28px; }
.plan-opt { font-weight: 800; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.plan-card h3 { font-weight: 900; font-size: 22px; line-height: 1.2; margin: 0 !important; }
.plan-card > div:not(.plan-head) { display: flex; flex-direction: column; gap: 2px; font-size: 17px; color: var(--ink-2); }
.plan-card > div:not(.plan-head) > span { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.plan-card .dur { padding: 12px 14px; background: var(--marker); border-radius: 10px; color: var(--ink); font-weight: 900; font-size: 19px; }
.plan-card .dur > span { color: var(--ink); }
.plan-card .sched { padding: 12px 14px; background: var(--paper-2); border-radius: 10px; }
.plan-card .sched ul { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 16px; }
/* discussion and prayer questions */
.qlabel { margin-bottom: -8px !important; }
ol.questions { margin: 0; padding: 18px 22px 18px 44px; background: var(--paper-2); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
ol.questions.big { background: none; padding: 0 0 0 26px; gap: 14px; font-size: 20px; }
ol.questions.big li { padding-left: 6px; color: var(--ink); }
/* clear answers */
.clear-answers { align-self: flex-start; background: none; border: 0; padding: 6px 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.lesson > .clear-answers { margin-left: 84px; }
/* freedom overview rows */
.rows.inventories { margin-top: 8px; max-width: 760px; }
/* foundations: collapsible stages on phones */
.stop-card details > summary { list-style: none; cursor: default; }
.stop-card details > summary::-webkit-details-marker { display: none; }
.stop-card .toggle { display: none; }

/* homepage sample card */
.card-why { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink); padding: 14px 18px; background: var(--cream); border-radius: 10px; }
.card-why b { font-family: var(--body); }
.card-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.card-step { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 2px solid var(--ink); border-radius: 999px; font-size: 13px; font-weight: 800; background: #FFFFFF; }
.card-step b { width: 22px; height: 22px; border-radius: 50%; background: #1B4FA0; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.card-step.on { background: var(--marker); }
.card-scripture { padding: 16px 20px; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink); margin-right: 5px; font-family: var(--serif); font-size: 19px; line-height: 2; }
.card-ref { font-family: var(--body); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1B4FA0; line-height: 1.4; }

/* phone */
@media (max-width: 720px) {
  body { font-size: 17px; }
  .home h1 { font-size: 42px !important; }
  .home h1 svg[aria-label="location pin"] { width: 30px; height: 40px; }
  .home h2 { font-size: 34px !important; }
  .home [aria-label="A peek at a lesson"] { padding-top: 150px !important; }
  .home [aria-label="A peek at a lesson"] > div > div:first-child { padding: 28px 22px !important; box-shadow: 6px 6px 0 var(--ink) !important; }
  .home [aria-label="A peek at a lesson"] > div > div:nth-child(2) { right: 4px !important; top: -132px !important; width: 200px !important; padding: 18px 18px 22px !important; font-size: 24px !important; }
  .home #letter > div > div { padding: 28px 20px !important; }
  .home #letter > div > div > div { padding-left: 0 !important; padding-right: 0 !important; }
  .home #letter > div > div > div:last-child { border-left: 0 !important; border-top: 2px solid #CFC3A8; padding-top: 24px !important; margin-top: 16px; }
  .lesson-hero .wrap { padding-block: 28px 28px; gap: 20px; }
  .hero-grid { gap: 20px; }
  .lesson-hero h1 { font-size: 40px; }
  .vision-box { padding: 22px 20px; font-size: 20px; box-shadow: 6px 6px 0 var(--track, var(--masters)); }
  .print-btn { width: 100%; justify-content: center; }
  .steps { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; }
  .steps a { flex: 0 0 auto; }
  .lesson { padding-block: 28px 48px; gap: 32px; }
  .lesson > .clear-answers, .lesson > .pre { margin-left: 0; }
  .plan-card { box-shadow: 5px 5px 0 var(--ink); padding: 18px; }
  ol.questions { padding: 14px 16px 14px 36px; }
  ol.questions.big { font-size: 18px; }
  .stop-card details > summary { cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
  .stop-card .toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; color: var(--ink); text-decoration: underline; }
  .stop-card details[open] .toggle .more, .stop-card details:not([open]) .toggle .less { display: none; }
  .home h1 svg[style*="z-index: -1"] { width: 170px; height: auto; bottom: -24px !important; }
  .card-step { font-size: 12px; padding: 3px 7px 3px 3px; }
  .card-step b { width: 18px; height: 18px; font-size: 11px; }
  .card-why { font-size: 17px; }
  .lesson > .howto, .lesson > .pager, .lesson > .original, .lesson > .strategy, .lesson > .yourfew, .lesson > p, .lesson > ul, .lesson > ol { margin-left: 0; }
  .trail { gap: 36px; }
  .trail::before { left: 19px; }
  .step, .stop { gap: 12px; }
  .marker { width: 40px; height: 40px; font-size: 18px; border-width: 2.5px; }
  .step-body { gap: 14px; padding-top: 2px; }
  .step-body h2 { font-size: 26px; }
  .vision-lead { font-size: 18px; }
  .step-body .scripture { font-size: 18px; padding: 16px; box-shadow: 5px 5px 0 var(--ink); }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager .next { order: -1; }
  .foundations { padding-block: 36px 56px; }
  .stops { gap: 36px; }
  .stops::before { left: 19px; }
  .stop .marker.pin svg { width: 30px; height: 40px; }
  .stop-card { padding: 18px 16px; gap: 14px; box-shadow: 5px 5px 0 var(--c, var(--ink)); }
  .stop-card h2, .stop-card h3 { font-size: 24px; }
  .grow-head { padding-left: 52px; }
  .grow-head h2 { font-size: 30px; }
  .row { padding: 10px 12px; font-size: 16px; min-height: 48px; box-sizing: border-box; }
  .row .num { width: 26px; height: 26px; font-size: 13px; }
  .preview { font-size: 16px; }
  .chip { font-size: 15px; }
  .yourfew-fields { grid-template-columns: minmax(0, 1fr); }
  .strategy-card { box-shadow: 5px 5px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
html { scroll-behavior: smooth; }

/* print: the styled two-page version */
@page { size: letter; margin: 0.55in 0.7in 0.75in;
  @bottom-left { content: "DiscipleshipLessons"; font: 600 8.5pt Figtree, sans-serif; color: #555555; }
  @bottom-right { content: "discipleshiplessons.com  ·  Page " counter(page) " of " counter(pages); font: 600 8.5pt Figtree, sans-serif; color: #555555; } }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #FFFFFF; font-size: 10.5pt; line-height: 1.42; }
  .clear-answers, .print-head { display: none !important; }
  .lesson-hero h1 .hl, .vision-box .why { background: linear-gradient(transparent 56%, var(--marker) 56%); padding: 0 2px; }
  .site header, .site footer, .steps, .print-btn, .pager, .original, .howto + .howto, .media { display: none !important; }
  .print-only { display: block; }
  .print-head { margin: 0 !important; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 10pt; font-weight: 700; color: var(--ink-3); }
  .lesson-hero { background: none; border: 0; }
  .lesson-hero .wrap { padding: 0 0 12px; gap: 12px; max-width: none; }
  .hero-grid { display: block; }
  .hero-main { gap: 8px; }
  .lesson-hero .crumbs, .progress { display: none; }
  .pill { background: none; color: var(--ink); border: 1.5px solid var(--ink); padding: 3px 12px; font-size: 10pt; }
  .lesson-hero h1 { font-size: 26pt; }
  .vision-box { margin: 12px 6px 6px 0; padding: 14px 18px; font-size: 13.5pt; border-width: 3px; box-shadow: 6px 6px 0 var(--ink); break-inside: avoid; }
  .lesson { padding: 0; gap: 10px; max-width: none; }
  .lesson > .howto { margin: 0; padding: 0; background: none; font-size: 9.5pt; display: block; }
  .lesson > .howto strong::after { content: ": "; }
  .lesson > * { margin-left: 0 !important; }
  .trail { gap: 10px; }
  .trail::before { display: none; }
  .step { display: block; }
  .step .marker { display: none; }
  .step-body { gap: 7px; padding: 0; }
  .step-body ul, .step-body ol { gap: 3px; }
  ol.questions { background: none; padding: 0 0 0 22px; gap: 3px; }
  .plan-cards { display: block; padding: 0; } .plan-card { box-shadow: none; border-width: 1.5px; padding: 8px 12px; margin-bottom: 8px; gap: 4px; font-size: 9.5pt; } .plan-card > div:not(.plan-head) { font-size: 9.5pt; display: block; } .plan-card > div:not(.plan-head) > span { display: inline; font-size: 8pt; margin-right: 4px; } .plan-card .dur { padding: 2px 8px; font-size: 10pt; } .plan-card .sched ul { display: block; columns: 2; } .plan-head { display: none; } .plan-card h3 { font-size: 12pt; }
  .stop-card { box-shadow: none !important; break-inside: avoid; } .stops::before { display: none; } .stop .marker { display: none; } .foundations { padding: 0; } .stops { gap: 12px; }
  .step-body h2 { counter-increment: sec; display: flex; align-items: center; gap: 10px; font-size: 14.5pt; break-after: avoid; margin-top: 6px !important; }
  .step-body h2::before { content: counter(sec); flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 11pt; }
  .step-body h2::after { content: ""; flex: 1 1 auto; border-top: 2.5px solid var(--ink); }
  .trail { counter-reset: sec; }
  .step-body p, .step-body li { color: var(--ink); }
  .vision-lead { font-size: 11.5pt; }
  .step-body .scripture { font-size: 11pt; line-height: 1.85; padding: 8px 12px; border-width: 2.5px; box-shadow: 5px 5px 0 var(--ink); margin: 0 5px 5px 0 !important; break-inside: avoid; }
  .step-body .scripture strong { color: var(--ink); font-size: 9pt; }
  input.blank { color: var(--ink); border-bottom-width: 1.5px; }
  .print-notes { margin: 8px 0 0 !important; break-inside: avoid; }
  .print-notes span { font-size: 9pt; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .print-notes i { display: block; height: 28px; border-bottom: 1px solid #9A9A9A; }
  .lesson-hero h1 span { background: linear-gradient(transparent 58%, var(--marker) 58%); }
  a { color: var(--ink); text-decoration: none; }
}
.stop-inner { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.stop-inner > * { margin: 0; }
@media (max-width: 720px) { .stop-inner { gap: 14px; margin-top: 14px; } }
@media print { .stop-card details > summary .toggle { display: none; } }

/* homepage lesson sets (tabs) */
.sets { padding: 104px 0 96px; background: var(--paper); border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); overflow: hidden; overflow: clip; }
.sets-intro { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.sets-hand { font-family: var(--hand); font-weight: 700; font-size: 30px; line-height: 1; color: var(--masters); }
.sets-intro h2 { margin: 0; font-weight: 900; font-size: 54px; line-height: 1.05; letter-spacing: -0.03em; }
.sets-intro p { margin: 0; max-width: 620px; color: var(--ink-2); font-size: 19px; }
.sets-tabs { max-width: 1100px; margin: 36px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sets-tabs button { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 999px; font: inherit; font-weight: 800; font-size: 18px; cursor: pointer; }
.sets-tabs button[aria-selected="true"] { background: #F6F2E8; border-width: 3px; box-shadow: 4px 4px 0 var(--ink); font-weight: 900; }
.sets-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; flex: none; }
.sets-stage { position: relative; max-width: 1100px; margin: 44px auto 0; padding: 0 24px; box-sizing: border-box; }
.sets-card { margin-right: 10px; background: #F6F2E8; border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; }
.sets-card[hidden] { display: none; }
.sets-stripe { height: 14px; background: var(--set); border-bottom: 2.5px solid var(--ink); }
.sets-body { padding: 44px 48px 52px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.sets-phone { flex: none; margin: 0 auto; width: 280px; height: 580px; box-sizing: border-box; padding: 14px 12px; background: var(--paper); border: 4px solid var(--ink); border-radius: 36px; transform: rotate(-2deg); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.sets-list { display: flex; flex-direction: column; gap: 8px; }
.sets-list-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 6px; font-weight: 900; font-size: 14px; }
.sets-list-head span + span { font-size: 11px; font-weight: 800; color: var(--ink-3); }
.sets-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; box-sizing: border-box; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; text-decoration: none; font-weight: 800; font-size: 13px; line-height: 1.2; }
.sets-row.first { background: #F6F2E8; }
.sets-row b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--set); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; }
.sets-exp { align-self: flex-start; display: flex; align-items: center; min-height: 30px; padding: 0 12px; background: var(--paper); border: 2px dashed var(--ink); border-radius: 999px; font-weight: 800; font-size: 11px; text-decoration: none; }
.sets-group { border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.sets-group-head { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; border-bottom: 2px solid var(--ink); font-weight: 900; font-size: 12px; }
.sets-group-head span + span { font-size: 10px; font-weight: 800; }
.sets-mini { display: flex; align-items: center; gap: 7px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; line-height: 1.25; text-decoration: none; }
.sets-mini + .sets-mini { border-top: 1px solid #DDDDDD; }
.sets-mini b { flex: none; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; }
.sets-info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.sets-quote { padding: 6px 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; font-size: 15px; font-weight: 800; }
.sets-info h3 { margin: 0; font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
.sets-info p { margin: 0; font-size: 21px; line-height: 1.5; max-width: 500px; }
.sets-chips { display: flex; flex-wrap: wrap; gap: 10px; font-size: 16px; font-weight: 800; }
.sets-chips span { padding: 6px 12px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 8px; }
.sets-start { align-self: stretch; max-width: 470px; margin-right: 6px; display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; text-decoration: none; line-height: 1.3; }
.sets-start-num { flex: none; width: 48px; height: 48px; border-radius: 50%; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; }
.sets-start-label { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.sets-start strong { font-weight: 900; font-size: 19px; }
.sets-parts { list-style: none; margin: 0; padding: 0; align-self: stretch; max-width: 500px; display: flex; flex-direction: column; gap: 10px; }
.sets-parts a { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 14px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; text-decoration: none; }
.sets-part-icon { flex: none; width: 42px; height: 42px; border-radius: 10px; border: 2px solid var(--ink); box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.sets-part-text { display: flex; flex-direction: column; line-height: 1.3; }
.sets-part-text strong { font-weight: 900; font-size: 19px; }
.sets-part-text span { font-size: 15px; color: #444444; }
.sets-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-top: 4px; }
.sets-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px; background: var(--masters); color: #FFFFFF !important; border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; }
.sets-btn:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--ink); }
.sets-more { font-weight: 800; font-size: 17px; }
.sets-peek { position: absolute; top: 48px; bottom: 48px; width: 420px; box-sizing: border-box; padding: 0; background: #F6F2E8; border: 2.5px solid var(--ink); border-radius: 20px; overflow: hidden; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; text-align: left; }
.sets-peek.prev { right: 100%; margin-right: 8px; }
.sets-peek.next { left: 100%; margin-left: 8px; }
.sets-peek-stripe { height: 14px; flex: none; border-bottom: 2.5px solid var(--ink); }
.sets-peek-text { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px; white-space: nowrap; }
.sets-peek.prev .sets-peek-text { align-items: flex-end; text-align: right; }
.sets-peek-text strong { font-weight: 900; font-size: 18px; line-height: 1.05; letter-spacing: -0.02em; }
.sets-peek-text span { font-size: 15px; font-weight: 700; color: #444444; }
.sets-dots { display: flex; justify-content: center; gap: 10px; margin-top: 36px; }
.sets-dots span { width: 10px; height: 10px; border-radius: 5px; background: var(--set); border: 1.5px solid var(--ink); transition: width .2s; }
.sets-dots span.on { width: 30px; background: var(--ink); }
.sets-help { text-align: center; margin: 24px 24px 0; font-size: 17px; color: var(--ink-2); }
.sets-help a { font-weight: 800; }
@media (min-width: 1001px) { .sets-stage { max-width: min(1100px, calc(100vw - 400px)); } }
@media (max-width: 1000px) { .sets-peek { display: none; } }
@media (max-width: 720px) {
  .sets { padding: 64px 0 64px; }
  .sets-intro h2 { font-size: 34px; }
  .sets-hand { font-size: 26px; }
  .sets-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
  .sets-tabs button { justify-content: center; padding: 0 10px; font-size: 15px; min-height: 48px; white-space: nowrap; gap: 8px; }
  .sets-stage { padding: 0 16px; margin-top: 28px; }
  .sets-card { margin-right: 6px; box-shadow: 6px 6px 0 var(--ink); border-radius: 16px; }
  .sets-body { padding: 24px 20px 28px; gap: 24px; flex-direction: column-reverse; align-items: stretch; }
  .sets-info h3 { font-size: 40px; }
  .sets-info p { font-size: 18px; }
  .sets-phone { width: auto; height: auto; transform: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: transparent; margin: 0; }
  .sets-phone .sets-list-head { padding: 0 2px 4px; font-size: 16px; }
  .sets-row { font-size: 15px; min-height: 48px; }
  .sets-exp { font-size: 13px; min-height: 36px; }
  .sets-mini { font-size: 14px; padding: 8px 10px; }
  .sets-mini b { width: 20px; height: 20px; font-size: 11px; }
  .sets-group-head { font-size: 14px; }
  .sets-dots { margin-top: 24px; }
}
@media print { .sets { display: none; } }

/* foundations page (fd-): four stops, Foundations as a green band with three parts */
.fd-hero { background: var(--paper-2); border-bottom: 2.5px solid var(--ink); }
.fd-hero .wrap { padding-block: 56px 48px; display: flex; flex-direction: column; gap: 18px; }
.fd-hero h1 { margin: 0; font-weight: 900; font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.fd-lead { margin: 0; max-width: 720px; font-size: 22px; font-weight: 700; line-height: 1.45; }
.fd-journey { position: relative; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px; }
.fd-journey::before { content: ""; position: absolute; left: 30px; right: 30px; top: 50%; border-top: 2.5px dashed var(--ink); }
.fd-journey a { position: relative; z-index: 1; flex: 1 1 200px; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; box-sizing: border-box; background: #FFFFFF; border: 2.5px solid var(--ink); border-radius: 14px; text-decoration: none; }
.fd-journey a:hover { box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }
.fd-journey a > span:last-child { display: flex; flex-direction: column; line-height: 1.25; }
.fd-journey strong { font-size: 18px; font-weight: 900; }
.fd-journey a > span:last-child > span { font-size: 14px; color: #444444; font-weight: 700; }
.fd-jnum { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--ink); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; }
.fd-wrap { padding-block: 56px 88px; }
.fd-trail { position: relative; display: flex; flex-direction: column; gap: 56px; }
.fd-trail::before { content: ""; position: absolute; left: 27px; top: 40px; bottom: 80px; border-left: 3px dashed var(--ink); }
.fd-stop { position: relative; display: flex; gap: 28px; align-items: flex-start; scroll-margin-top: 16px; }
.fd-marker { position: relative; z-index: 1; flex: none; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ink); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 24px; }
.fd-card { flex: 1 1 auto; min-width: 0; margin-right: 8px; background: #F6F2E8; border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.fd-stripe { height: 12px; background: var(--c); border-bottom: 2.5px solid var(--ink); }
.fd-fold > summary { list-style: none; cursor: default; }
.fd-fold > summary::-webkit-details-marker { display: none; }
.fd-card .fd-fold > summary { padding: 28px 32px 0; display: block; }
.fd-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; flex: 1 1 auto; min-width: 0; }
.fd-head h2 { margin: 0; font-weight: 900; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.fd-meta { font-weight: 800; font-size: 16px; color: #444444; }
.fd-inner { padding: 16px 32px 32px; display: flex; flex-direction: column; gap: 16px; }
.fd-preview { margin: 0; font-size: 18px; color: var(--ink-2); max-width: 760px; }
.fd-rows { display: flex; flex-direction: column; gap: 8px; }
.fd-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; box-sizing: border-box; background: #FFFFFF; border: 2px solid var(--ink); border-radius: 10px; text-decoration: none; font-weight: 800; font-size: 17px; line-height: 1.25; }
.fd-row:hover { box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
.fd-row-title { flex: 1 1 auto; min-width: 0; }
.fd-row svg { flex: none; }
.fd-num { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; }
.fd-exp { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fd-exp > span { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #555555; }
.fd-exp a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: #FFFFFF; border: 2px dashed var(--ink); border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 15px; }
.fd-toggle { display: none; }
.fd-found { position: relative; display: flex; flex-direction: column; gap: 22px; scroll-margin-top: 16px; }
.fd-found-head { display: flex; gap: 28px; align-items: center; }
.fd-found-head h2 { font-size: 44px; letter-spacing: -0.03em; }
.fd-band { margin-right: 8px; background: #E3F1E7; border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--masters); overflow: hidden; }
.fd-band-top { padding: 22px 32px; background: var(--masters); color: #FFFFFF; border-bottom: 2.5px solid var(--ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.fd-band-top p { margin: 0; font-size: 18px; max-width: 640px; line-height: 1.5; }
.fd-order { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 15px; }
.fd-order a { padding: 6px 12px; color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; text-decoration: none; }
.fd-parts { position: relative; padding: 36px 32px 40px; display: flex; flex-direction: column; gap: 36px; }
.fd-parts::before { content: ""; position: absolute; left: 55px; top: 60px; bottom: 120px; border-left: 3px dashed var(--masters); }
.fd-part { position: relative; display: flex; gap: 24px; align-items: flex-start; scroll-margin-top: 16px; }
.fd-part-marker { position: relative; z-index: 1; flex: none; width: 48px; height: 48px; border-radius: 12px; border: 3px solid var(--ink); box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.fd-part-card { flex: 1 1 auto; min-width: 0; margin-right: 6px; background: #FFFFFF; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.fd-part-head { display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 24px; border-bottom: 2.5px solid var(--ink); }
.fd-part-head h3 { margin: 0; font-weight: 900; font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; }
.fd-part-count { font-weight: 800; font-size: 15px; }
.fd-part-card .fd-inner { padding: 22px 24px 26px; gap: 14px; }
.fd-part-card .fd-preview { font-size: 17px; }
@media (max-width: 720px) {
  .fd-hero .wrap { padding-block: 32px 28px; }
  .fd-hero h1 { font-size: 40px; }
  .fd-lead { font-size: 18px; }
  .fd-journey { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fd-journey::before { display: none; }
  .fd-journey a { min-height: 56px; padding: 8px 10px; gap: 8px; }
  .fd-journey strong { font-size: 15px; }
  .fd-journey a > span:last-child > span { font-size: 12px; }
  .fd-jnum { width: 30px; height: 30px; font-size: 14px; }
  .fd-wrap { padding-block: 32px 56px; }
  .fd-trail { gap: 32px; }
  .fd-trail::before { left: 19px; }
  .fd-stop, .fd-found-head { gap: 12px; }
  .fd-marker { width: 40px; height: 40px; font-size: 18px; border-width: 2.5px; }
  .fd-card { box-shadow: 5px 5px 0 var(--ink); border-radius: 14px; margin-right: 5px; }
  .fd-card .fd-fold > summary { padding: 16px 16px 14px; cursor: pointer; }
  .fd-head h2, .fd-found-head h2 { font-size: 26px; }
  .fd-meta { font-size: 14px; }
  .fd-inner { padding: 0 16px 18px; gap: 12px; }
  .fd-preview, .fd-part-card .fd-preview { font-size: 16px; }
  .fd-row { font-size: 16px; min-height: 48px; padding: 8px 12px; }
  .fd-toggle { display: inline-flex; margin-top: 8px; font-size: 15px; font-weight: 800; text-decoration: underline; }
  .fd-fold[open] .fd-toggle .more, .fd-fold:not([open]) .fd-toggle .less { display: none; }
  .fd-band { margin-right: 5px; border-radius: 16px; box-shadow: 5px 5px 0 var(--masters); }
  .fd-band-top { padding: 16px; }
  .fd-band-top p { font-size: 16px; }
  .fd-order { font-size: 13px; gap: 4px; }
  .fd-order a { padding: 4px 8px; }
  .fd-parts { padding: 20px 12px 24px; gap: 20px; }
  .fd-parts::before { display: none; }
  .fd-part { gap: 0; }
  .fd-part-marker { display: none; }
  .fd-part-card { box-shadow: 4px 4px 0 var(--ink); margin-right: 4px; border-radius: 12px; }
  .fd-part-head { padding: 12px 14px; cursor: pointer; }
  .fd-part-head h3 { font-size: 21px; }
  .fd-part-head .fd-toggle { flex-basis: 100%; margin-top: 0; }
  .fd-part-card .fd-inner { padding: 14px 12px 16px; }
}
@media print {
  .fd-journey, .fd-toggle { display: none !important; }
  .fd-card, .fd-band, .fd-part-card { box-shadow: none; }
  .fd-stop, .fd-part { break-inside: avoid; }
}

/* lesson actions: print + text this lesson */
.lesson-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 720px) { .lesson-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .lesson-actions .print-btn { padding: 12px 6px; font-size: 15px; gap: 6px; white-space: nowrap; } .lesson-actions .print-btn svg { width: 17px; height: 17px; } }
@media print { .lesson-actions { display: none !important; } }

/* ---------- Oct 30 refinement ---------- */
.step-body .scripture.passage { line-height: 1.9; }
.step-body .idol-head { font-size: 19px; font-weight: 800; margin-top: 8px; }
.step-body .examples { font-size: 17px; color: var(--ink-2, #3A3A3A); }
.step-body ol.name-lines { list-style: decimal; padding-left: 28px; display: flex; flex-direction: column; gap: 10px; }
.step-body ol.name-lines input.blank { width: min(22em, 100%) !important; }
.pager .up-next span { color: #FFFFFF; }
.crumbs { align-items: center; }
.crumbs a { padding-block: 10px; }
@media (max-width: 720px) {
  .steps { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; gap: 8px; }
  .steps a { flex: 0 1 auto; padding: 9px 12px; font-size: 15px; min-height: 44px; box-sizing: border-box; }
  .home [aria-label="A peek at a lesson"] > div > div:first-child { padding-top: 76px !important; }
}
details.long > summary { cursor: pointer; font-weight: 800; text-decoration: underline; margin-bottom: 10px; }
details.long[open] > summary { margin-bottom: 14px; }
@media print { details.long > summary { display: none; } }
.pre h3.session { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 900; margin: 28px 0 6px; }
.pre h3.session span { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--track, var(--ink)); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.pre .session-desc { margin: 0 0 12px; }
details.inv { border: 2px solid var(--ink); border-radius: 12px; background: #FFFFFF; padding: 0 16px; margin: 6px 0; }
details.inv > summary { list-style: none; text-decoration: none; font-size: 18px; font-weight: 800; padding: 14px 28px 14px 0; margin: 0; position: relative; min-height: 24px; }
details.inv > summary::-webkit-details-marker { display: none; }
details.inv > summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 800; }
details.inv[open] > summary::after { content: "–"; }
details.inv[open] > summary { margin: 0; }
details.inv .inv-body { padding-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
@media print { details.inv { border: 0; padding: 0; } details.inv > summary { display: block; padding: 0; } details.inv > summary::after { display: none; } }

/* library homepage (Nov 1): the four seed-to-fruit set cards are Instagram-style squares, 2 across (1 on phones) */
.setcards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px !important; gap: 24px !important; }
@media (max-width: 600px) { .setcards { grid-template-columns: minmax(0, 1fr); gap: 18px !important; } }
.setcards > a { aspect-ratio: 1 / 1; }
.setcards > a > svg { flex: 1 1 0; min-height: 0; height: 100% !important; }
.setcards > a > span { flex: 0 0 auto; padding: 22px 26px 26px !important; }
.setcards > a > span > span:first-child { font-size: 13px !important; line-height: 1.3; }
.setcards > a > span > span:last-child { font-size: clamp(22px, 2.6vw, 30px) !important; }
.setcards > a { transition: transform .15s ease, box-shadow .15s ease; }
.setcards > a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 60, 35, .14); }
@media (prefers-reduced-motion: reduce) { .setcards > a, .setcards > a:hover { transition: none; transform: none; } }

/* =====================================================================
   Nov 2: one site. The homepage's green library look on every page:
   soft tinted bands, rounded cards, no thick outlines or hard shadows.
   Shared header, footer and library markup come from build/chrome.py.
   ===================================================================== */
:root { --track: #1F5C3E; --tint: #F1F4EE; --ink: #15171C; --ink-2: #3A3F47; --ink-3: #5D636C; --soft: #F4F7F2; --line: #E3E8DF; --cream: #FBF7F0; }
a:hover { color: #1F7A4D; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #4FAE74; outline-offset: 3px; }

/* header */
.topbar { background: #FFFFFF; position: relative; z-index: 5; }
.topbar-in { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; gap: 24px; box-sizing: border-box; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; white-space: nowrap; min-width: 0; }
.brand svg { flex: none; width: 34px; height: 34px; }
.topbar nav { display: flex; gap: 22px; flex: 1; font-size: 15px; font-weight: 600; }
.topbar nav a { text-decoration: none; color: var(--ink); }
.topbar .start { flex: none; background: var(--ink); color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
.topbar .start:hover { color: #FFFFFF; background: #1F5C3E; }
.topbar .menu-btn { display: none; }
@media (max-width: 720px) {
  .topbar-in { padding: 10px 14px; gap: 6px; flex-wrap: wrap; }
  .brand { font-size: 15px; gap: 7px; flex: 1 1 0; letter-spacing: -0.01em; }
  .brand svg { width: 28px; height: 28px; }
  .topbar .start { padding: 8px 12px; font-size: 13px; }
  .topbar .menu-btn { display: flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; padding: 0; background: var(--soft); color: var(--ink); border: 0; border-radius: 999px; cursor: pointer; }
  .topbar nav { display: none; order: 5; flex: 1 1 100%; flex-direction: column; gap: 0; padding: 6px 0 4px; font-size: 17px; }
  .topbar.open nav { display: flex; }
  .topbar nav a { padding: 12px 4px; border-top: 1px solid var(--line); }
}
@media (max-width: 370px) { .brand .antioch-a { width: 24px; height: 24px; } .brand { font-size: 13px; gap: 5px; } .brand svg { width: 24px; height: 24px; } .topbar .start { padding: 7px 10px; font-size: 12.5px; } .topbar .menu-btn { width: 34px; height: 34px; } }

/* footer */
.sitefoot { background: var(--soft); color: var(--ink-2); }
.foot-in { max-width: 1200px; margin: 0 auto; padding: 64px 24px 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 40px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.foot-brand { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.foot-name { font-weight: 900; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); }
.foot-tag { font-size: 17px; line-height: 1.5; max-width: 360px; }
.foot-place { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-3); }
.foot-btn { margin-top: 6px; padding: 11px 20px; background: #1F5C3E; color: #FFFFFF; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; }
.foot-btn:hover { color: #FFFFFF; background: #15171C; }
.foot-cols { flex: 2 1 480px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.foot-col { display: flex; flex-direction: column; gap: 4px; font-size: 16px; scroll-margin-top: 16px; }
.foot-col a { text-decoration: none; color: var(--ink); padding: 5px 0; }
.foot-label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #2F6B3A; padding-bottom: 4px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.foot-bottom a { color: var(--ink-3); font-weight: 700; }
@media (max-width: 720px) {
  .foot-in { padding: 44px 20px 28px; gap: 28px; }
  .foot-name { font-size: 22px; }
  .foot-tag { font-size: 16px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .foot-cols .foot-col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .foot-cols .foot-col:last-child .foot-label { grid-column: 1 / -1; }
  .foot-col { font-size: 15px; }
}

/* answer buttons (homepage hero and Foundations page) */
.picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.picks a { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 16px; }
.picks a > span { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.picks a:hover { filter: brightness(0.96); }
@media (max-width: 600px) {
  .picks { flex-direction: column; align-items: stretch; max-width: 360px; }
  .picks a { justify-content: center; padding: 13px 16px; }
}

/* the library (homepage and Foundations page) */
.lib-wrap { max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
.lib-intro { text-align: center; margin-bottom: 48px; }
.lib-intro h2 { margin: 0; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
.lib-intro p { margin: 14px auto 0; max-width: 560px; font-size: 19px; line-height: 1.5; color: #4A4F57; }
.lib { display: flex; flex-direction: column; gap: 56px; }
.lib-set { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 16px; }
.lib-head { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 14px; row-gap: 4px; padding-bottom: 12px; border-bottom: 1px solid #ECE6DA; }
.lib-dot { width: 14px; height: 14px; border-radius: 50%; align-self: center; }
.lib-head h2, .lib-head h3 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 900; letter-spacing: -0.01em; }
.lib-meta { justify-self: end; font-size: 14px; font-weight: 700; color: #2F6B3A; white-space: nowrap; }
.lib-desc { grid-column: 2 / -1; margin: 0; font-size: 16px; line-height: 1.5; color: #4A4F57; }
.lib-preview { margin: 0; max-width: 760px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.lib-part { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.lib-part + .lib-part { margin-top: 10px; }
.lib-part-head { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 16px; color: #4A4F57; }
.lib-part-head span { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #0F4D30; }
.lib-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lib-tile { text-decoration: none; border-radius: 18px; background: var(--tb); color: var(--tf); padding: 18px; min-height: 132px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; transition: transform .15s ease, box-shadow .15s ease; }
.lib-tile:hover { color: var(--tf); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 60, 35, .12); }
.lib-num { font-size: 30px; font-weight: 900; line-height: 1; color: var(--tn); }
.lib-title { font-size: 18px; font-weight: 800; line-height: 1.2; }
.lib-star { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tn); }
.lib-cta { font-size: 14px; font-weight: 700; color: var(--tn); }
@media (prefers-reduced-motion: reduce) { .lib-tile, .lib-tile:hover { transition: none; transform: none; } }
@media (max-width: 720px) {
  .lib-intro { margin-bottom: 32px; }
  .lib { gap: 44px; }
  .lib-head { grid-template-columns: auto 1fr; column-gap: 10px; }
  .lib-head h2, .lib-head h3 { font-size: 24px; }
  .lib-meta { grid-column: 2; grid-row: 3; justify-self: start; white-space: normal; }
  .lib-desc { grid-column: 2; grid-row: 2; font-size: 15px; }
  .lib-preview { font-size: 16px; }
  .lib-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* compact rows on phones: number and title on one line */
  .lib-tile { min-height: 56px; padding: 12px 16px; border-radius: 14px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
  .lib-num { font-size: 20px; width: 22px; flex: none; text-align: center; }
  .lib-title { font-size: 16px; flex: 1 1 auto; }
  .lib-exp { flex-wrap: wrap; row-gap: 2px; }
  .lib-exp .lib-star { flex: 1 1 100%; font-size: 11px; }
  .lib-exp .lib-title { flex: 1 1 auto; }
  .lib-cta { flex: none; }
}

/* homepage spacing */
.home-library { padding: 8px 24px 80px; }
@media (max-width: 720px) {
  .home h1 { font-size: 42px !important; }
  .home h2 { font-size: 32px !important; }
  .home .home-hero { padding: 40px 20px 36px !important; }
  .home .home-cards { padding: 0 16px 40px !important; }
  .home .home-peek { padding: 0 16px 48px !important; }
  .home .home-peek > div { padding: 36px 22px !important; gap: 32px !important; border-radius: 22px !important; }
  .home-library { padding: 8px 16px 56px; }
  .home #faq { padding: 48px 16px !important; }
}

/* Foundations page */
.fd2-hero { background: #FFFFFF; }
.fd2-hero .wrap { padding-block: 32px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.fd2-hero .crumbs { align-self: flex-start; }
.fd2-hero h1 { margin: 0; font-size: clamp(40px, 6vw, 68px); line-height: 1.02; font-weight: 900; letter-spacing: -0.02em; }
.fd2-lead { margin: 0 0 10px; max-width: 620px; font-size: 20px; line-height: 1.5; color: #4A4F57; }
.fd2-library { padding: 8px 24px 88px; }
@media (max-width: 720px) {
  .fd2-hero .wrap { padding-block: 16px 36px; }
  .fd2-lead { font-size: 17px; }
  .fd2-library { padding: 0 16px 56px; }
}

/* lesson pages */
.lesson-hero { background: var(--tint, var(--soft)); border-bottom: 0; }
.crumbs, .crumbs a { color: var(--ink-3); }
.crumbs a.crumb-track { color: var(--track); }
.pill { background: var(--track); font-weight: 700; letter-spacing: 0.02em; }
.progress span { background: rgba(21, 23, 28, 0.12); }
.print-btn { min-height: 44px; padding: 10px 18px; background: #FFFFFF; color: var(--ink); border: 0; border-radius: 999px; box-shadow: none; font-weight: 700; font-size: 15px; }
.print-btn:hover { transform: none; box-shadow: 0 4px 12px rgba(20, 60, 35, .12); }
.vision-box { margin: 0; padding: 30px 32px; background: #FFFFFF; border: 0; border-radius: 22px; box-shadow: none; font-family: var(--body); font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.vision-box .why { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--track); }
.steps a { background: #FFFFFF; border: 0; border-radius: 999px; padding: 9px 16px 9px 9px; font-weight: 700; font-size: 15px; }
.steps a:hover { box-shadow: 0 4px 12px rgba(20, 60, 35, .12); color: var(--ink); }
.steps a span { background: var(--track); }
.trail::before { border-left: 2px dashed var(--line); left: 27px; }
.marker { background: var(--track); border: 0; font-weight: 800; }
.step-body h2 { font-weight: 900; }
.howto { background: var(--tint, var(--soft)); border-radius: 16px; }
.step-body .scripture { margin-right: 0 !important; background: var(--cream); border: 0; border-radius: 18px; box-shadow: none; padding: 20px 24px; font-family: var(--body); font-size: 19px; line-height: 1.65; }
.step-body .scripture strong { font-size: 13px; letter-spacing: 0.1em; color: var(--track); margin-bottom: 6px; }
.step-body .scripture:has(input.blank) { line-height: 1.95; }
.step-body .scripture.passage { line-height: 1.65; }
input.blank { border-bottom: 2px solid var(--track); color: var(--track); }
ol.questions { background: var(--soft); border-radius: 16px; }
.step-body blockquote { background: var(--soft); border-radius: 16px; }
details.inv { border: 0; background: var(--soft); border-radius: 16px; padding: 0 18px; }
details.inv > summary::after { color: var(--track); }
.media-link { border: 0; border-radius: 999px; background: var(--ink); color: #FFFFFF; font-weight: 700; padding: 12px 20px; }
.media-link:hover { color: #FFFFFF; background: var(--track); }
.media-link.alt { background: var(--soft); color: var(--ink); border: 0; }
.media-link.alt:hover { color: var(--ink); }
.plan-cards { padding: 0; }
.plan-card { border: 0; border-radius: 20px; box-shadow: none; background: var(--soft); }
.plan-letter { background: var(--track); color: #FFFFFF; border-radius: 12px; }
.plan-card .dur { background: var(--tint, #DDEFE3); }
.plan-card .sched { background: #FFFFFF; }
.pre h3.session span { background: var(--track); }
.row { border: 0; border-radius: 16px; background: var(--soft); font-weight: 800; }
.row:hover { color: var(--ink); box-shadow: 0 6px 14px rgba(20, 60, 35, .1); }
.row .num { background: var(--track); }
.strategy-card { border: 0; border-radius: 20px; box-shadow: none; background: var(--soft); }
.yourfew { background: var(--tint, var(--soft)); border-radius: 20px; }
.yourfew input { border-bottom: 2px solid var(--track, var(--ink)); }
/* pager: Previous on the left, Next on the right, on every screen */
.pager a { border: 0; border-radius: 18px; background: var(--soft); }
.pager a:hover { color: var(--ink); box-shadow: 0 6px 14px rgba(20, 60, 35, .1); }
.pager .next { background: var(--track); color: #FFFFFF; }
.pager .next:hover { color: #FFFFFF; }
@media (max-width: 720px) {
  .lesson-hero .wrap { padding-block: 20px 24px; }
  .vision-box { padding: 20px 20px; font-size: 18px; border-radius: 18px; }
  .print-btn { justify-content: center; }
  .lesson-actions { grid-template-columns: 1fr 1fr; }
  /* section jump buttons: one swipeable row instead of a wall of buttons */
  .steps { flex-wrap: nowrap; overflow-x: auto; margin-inline: -24px; padding: 2px 24px 6px; gap: 8px; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .steps a { flex: 0 0 auto; white-space: nowrap; min-height: 42px; }
  .trail::before { left: 19px; }
  .step-body .scripture { font-size: 17px; padding: 16px 18px; border-radius: 16px; }
  .step-body .scripture:has(input.blank) { line-height: 1.9; }
  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pager .next { order: 0; }
  .pager a { padding: 14px 14px; font-size: 15px; border-radius: 16px; }
  .pager a span { font-size: 11px; }
  .pager > span:empty { display: block; }
  .plan-card { padding: 18px; }
}

/* print: same soft look, ink-friendly */
@media print {
  .lesson-hero { background: none; }
  .vision-box { border: 0; box-shadow: none; background: var(--cream); font-size: 12.5pt; padding: 10px 14px; }
  .step-body .scripture { border: 0; box-shadow: none; background: var(--cream); font-size: 11pt; line-height: 1.55; padding: 8px 12px; margin: 0 !important; border-radius: 10px; }
  .step-body .scripture:has(input.blank) { line-height: 1.85; }
  .vision-box .why { background: none; padding: 0; }
  .step-body h2::before { background: var(--track, var(--ink)); }
  .step-body h2::after { border-top: 1.5px solid var(--line); }
  .pill { border: 0; background: var(--track); color: #FFFFFF; }
  .print-head { border-bottom: 1.5px solid var(--line); }
  .plan-card { background: none; border: 1px solid var(--line); }
  .topbar, .sitefoot, .picks { display: none !important; }
}

/* Who should I disciple: the "your few" heading in the site font */
.yourfew h2 { font-family: var(--body) !important; font-size: 28px !important; font-weight: 900 !important; letter-spacing: -0.01em !important; }

/* Nov 3: homepage Great Commission hero (brand green); the Antioch A logo on every page (white on the homepage) */
.topbar.gc-top { background: #1F5C3E; }
.gc-top .brand, .gc-top nav a { color: #FFFFFF; }
.gc-top nav a { border-color: rgba(255,255,255,0.18); }
.gc-top .start, .gc-top .start:hover { background: #FFFFFF; color: #1F5C3E; }
.gc-top .menu-btn { background: rgba(255,255,255,0.14) !important; color: #FFFFFF !important; }
.brand .antioch-a { flex: none; width: 34px; height: 34px; display: block; }
.gc-hero { background: #1F5C3E; padding: 96px max(16px, env(safe-area-inset-right, 0px)) 104px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.gc-e { font: 800 14px Archivo, Figtree, system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #CFE5C3; }
.gc-h { margin: 0; font: 900 clamp(56px, 9vw, 112px)/0.92 Archivo, Figtree, system-ui, sans-serif; letter-spacing: -0.035em; color: #FFFFFF; }
.gc-a { color: #9CCB8A; }
.gc-p { margin: 0; font-size: 21px; line-height: 1.5; color: #E3EFDC; max-width: 640px; }
.gc-ask { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.gc-l { font-weight: 700; font-size: 15px; color: #CFE5C3; }
.gc-free { font-weight: 500; font-size: 14px; color: #CFE5C3; }
.gc-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gc-pills a { padding: 15px 22px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; }
.gc-pills a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.gc-pills .p1 { background: #CFE5C3; color: #14261C; }
.gc-pills .p2 { background: #9CCB8A; color: #14261C; }
.gc-pills .p3 { background: #4FAE74; color: #0D1F15; }
.gc-pills .p4 { background: #FFFFFF; color: #1F5C3E; }
@media (max-width: 720px) {
  .brand .antioch-a { width: 28px; height: 28px; }
  .gc-hero { padding-top: 56px; padding-bottom: 64px; gap: 20px; }
  .gc-p { font-size: 18px; }
  .gc-pills a { padding: 13px 18px; font-size: 15px; }
  .home .home-peek { padding-top: 32px !important; }
}
@media print { .gc-hero { background: none; } .gc-h, .gc-a, .gc-p { color: #15171C; } }