/* guide.css — Scripture Guide v2 additions on top of base.css + design-a.css.
   Server-rendered content is always visible; .reveal is progressive only. */

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

.skip-link { position: absolute; left: var(--space-4); top: -3rem; z-index: 300; padding: .5rem 1rem; background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius-md); font-weight: 600; }
.skip-link:focus { top: var(--space-3); }

/* ---- header / nav ---- */
.nav-inner { min-height: 4.5rem; }
.brand { min-height: 44px; }
.brand-logo { color: var(--color-primary); flex: none; }
.brand-name { font-family: var(--font-display); letter-spacing: .12em; font-size: .8rem; font-weight: 600; text-transform: uppercase; }
.brand-sub { display: block; font-family: var(--font-body); font-size: .62rem; letter-spacing: .18em; color: var(--color-text-faint); text-transform: uppercase; font-weight: 500; margin-top: .1rem; }
.nav-links { align-items: center; gap: var(--space-2); }
.nav-links > a, .nav-dd > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; cursor: pointer; list-style: none; user-select: none; }
.nav-links > a[aria-current], .nav-dd[data-active] > summary { color: var(--color-primary); }
.nav-links > a:hover, .nav-dd > summary:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-surface-2) 80%, transparent); }
.nav-dd { position: relative; }
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after { content: ''; width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15em) rotate(45deg); opacity: .7; transition: transform var(--transition); }
.nav-dd[open] > summary::after { transform: translateY(.1em) rotate(225deg); }
.nav-dd-menu { position: absolute; top: calc(100% + .35rem); left: 0; min-width: 17.5rem; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,.4)), var(--glow); z-index: 160; }
.nav-dd-menu a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; min-height: 44px; border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); font-size: var(--text-sm); }
.nav-dd-menu a small { color: var(--color-text-faint); font-size: var(--text-xs); }
.nav-dd-menu a:hover { background: var(--color-surface-2); color: var(--color-primary); }
.nav-dd-menu .dd-ext::after { content: ' ↗'; color: var(--color-text-faint); }
.nav-actions { gap: var(--space-2); }
.nav-actions .icon-btn { width: 44px; height: 44px; }
.nav-cta { display: inline-flex; }
.nav-actions .btn-signin { min-height: 40px; }
@media (max-width: 860px) {
  .nav-links { align-items: stretch; padding: var(--space-3) var(--space-5) var(--space-5); max-height: calc(100dvh - 4.5rem); overflow: auto; }
  .nav-links > a, .nav-dd > summary { border-bottom: 1px solid var(--color-border); border-radius: 0; padding: var(--space-3) 0; min-height: 48px; }
  .nav-dd > summary::after { margin-left: auto; }
  .nav-dd-menu { position: static; border: 0; box-shadow: none; background: transparent; padding: 0 0 var(--space-2) var(--space-3); min-width: 0; }
  .nav-links .nav-cta { margin-top: var(--space-4); color: #17120a !important; border-bottom: 0; justify-content: center; }
  .nav-dd { border-bottom: 1px solid var(--color-border); }
  .nav-dd > summary { border-bottom: 0; }
  .nav-actions .nav-cta { display: none; }
  .brand-sub { display: none; }
}
@media (min-width: 861px) { .nav-links .nav-cta { display: none; } }
@media (max-width: 480px) { .nav-actions .btn-signin { padding: .45rem .7rem; font-size: .8rem; min-height: 38px; } .nav-actions .icon-btn { width: 40px; height: 40px; } .nav-actions { gap: .4rem; } .nav-inner { gap: var(--space-2); padding-inline: var(--space-4); } }

/* ---- sections ---- */
.section { padding-block: clamp(var(--space-16), 8vw, var(--space-24)); }
.section-tight { padding-block: clamp(var(--space-12), 6vw, var(--space-16)); }
.section-alt { background: var(--color-bg-2); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section-head { max-width: 46rem; margin-bottom: var(--space-10); }
.section-head h2 { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: .02em; margin-top: var(--space-2); }
.section-head .lead { margin-top: var(--space-3); }
.section-foot { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.narrow { max-width: var(--content-narrow); }
.prose p + p { margin-top: var(--space-4); }
.prose h2 { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-10) 0 var(--space-4); letter-spacing: .02em; }
.prose h3 { font-family: var(--font-serif); font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.prose ul, .prose ol { padding-left: 1.3rem; margin-top: var(--space-3); }
.prose li + li { margin-top: var(--space-2); }
.prose a { color: var(--color-primary); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

/* ---- hero ---- */
.hero-guide .hero-bg { bottom: auto; height: min(100%, 760px); -webkit-mask-image: linear-gradient(#000 50%, transparent 100%); mask-image: linear-gradient(#000 50%, transparent 100%); }
.hero-guide .hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-guide .hero-bg img { opacity: .34; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
[data-theme='light'] .hero-guide .hero-bg img { opacity: .22; }
.hero-guide::after { background: radial-gradient(ellipse at 50% 28%, color-mix(in srgb, var(--color-bg) 45%, transparent), var(--color-bg) 72%); }
.hero-guide { text-align: center; padding-block: clamp(var(--space-16), 9vw, var(--space-24)); }
.hero-guide .eyebrow { justify-content: center; }
.hero-guide h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.9rem); margin: var(--space-4) auto 0; max-width: 20ch; }
.hero-guide .lead { max-width: 40rem; margin: var(--space-5) auto 0; }
.hero-sub { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--color-text-muted); margin-top: var(--space-2); }
.hero-ctas { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }
.ask-box { max-width: 46rem; margin: var(--space-10) auto 0; text-align: left; background: color-mix(in srgb, var(--color-surface) 88%, transparent); border: 1px solid var(--color-border-glow); border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--glow); backdrop-filter: blur(8px); }
.ask-box h2, .ask-box .ask-title { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; margin-bottom: var(--space-4); }
.ask-form { display: flex; gap: var(--space-2); }
.ask-form input, .ask-input { flex: 1; min-height: 52px; padding: .8rem 1.1rem; border-radius: var(--radius-lg); background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text); }
.ask-form input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-border-glow); }
.ask-form .btn { min-height: 52px; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.ask-examples { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ask-examples .q-chip { min-height: 40px; padding: .5rem .9rem; font-size: var(--text-sm); text-decoration: none; display: inline-flex; align-items: center; border-radius: 999px; }
.ask-examples .q-chip:hover { text-decoration: none; }
@media (max-width: 480px) { header.nav .brand > span, header.nav .brand .brand-name { display: inline; } header.nav .brand .brand-name { font-size: .66rem; letter-spacing: .08em; } header.nav .brand .brand-sub { display: none; } header.nav .brand svg { width: 26px; height: 26px; } }
.ask-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }
@media (max-width: 560px) { .ask-form { flex-direction: column; } .ask-form .btn { width: 100%; } }

/* ---- example answer ---- */
.example { border: 1px solid var(--color-border); border-radius: var(--radius-2xl); background: var(--color-surface); overflow: hidden; }
.example-head { padding: var(--space-6); border-bottom: 1px solid var(--color-border); background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent); }
.example-head .q { font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.2; }
.persp-grid { display: grid; gap: 1px; background: var(--color-border); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .persp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .persp-grid { grid-template-columns: 1fr; } }
.persp { background: var(--color-surface); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.persp .t { display: flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); }
.persp p { font-size: var(--text-sm); color: var(--color-text); }
.persp .src { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: auto; }
.persp .src a { color: inherit; text-decoration-color: var(--color-border); }
.persp .src a:hover { color: var(--color-primary); }
.example-foot { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.glyph { font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'Noto Sans Symbols 2', 'Apple Symbols', serif; font-size: 1.05em; line-height: 1; }

/* ---- tradition cards ---- */
.trad-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.trad-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 0; overflow: hidden; }
.trad-card .img { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-bg-2); }
.trad-card .img img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .6s ease; }
.trad-card:hover .img img { transform: scale(1.03); }
.trad-card .body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.trad-card h3 { font-family: var(--font-display); font-size: var(--text-base); letter-spacing: .06em; display: flex; gap: .5rem; align-items: center; }
.trad-card h3 .glyph { color: var(--color-primary); }
.trad-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
.trad-card .texts { font-size: var(--text-xs); color: var(--color-text-faint); }
.trad-card .more { margin-top: auto; padding-top: var(--space-3); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); font-weight: 600; }

/* ---- compare ---- */
.compare-box { border: 1px solid var(--color-border-glow); border-radius: var(--radius-2xl); background: var(--color-surface); padding: var(--space-8); box-shadow: var(--glow); }
.check-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); margin: var(--space-5) 0; }
.check { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .5rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; background: var(--color-bg); font-size: var(--text-sm); }
.check:hover { border-color: var(--color-primary); }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); flex: none; }
.check:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg)); }
.compare-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.link-btn { color: var(--color-text-muted); text-decoration: underline; text-decoration-color: var(--color-border); font-size: var(--text-sm); min-height: 44px; display: inline-flex; align-items: center; }
.link-btn:hover { color: var(--color-primary); }

/* ---- explorer ---- */
.explorer { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .explorer { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; } .explorer-side { position: sticky; top: 5.5rem; } }
.explorer-side .group + .group { margin-top: var(--space-6); }
.explorer-side .label { font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); font-weight: 600; }
.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill { min-height: 40px; padding: .45rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-bg); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.pill[aria-pressed="true"], .pill.is-active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg)); }
.pill:hover { border-color: var(--color-primary); }
.passage-list { display: grid; gap: var(--space-3); }
.theme-sec .passage-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.crumbs + .eyebrow, .crumbs + .glyph, .crumbs + .trad-glyph { margin-top: var(--space-5); }
.passage { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.passage .ref { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 600; }
.passage .trad { font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); }
.passage .gist { color: var(--color-text-muted); font-size: var(--text-sm); }
.passage .acts { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.passage .acts a { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--color-primary); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.passage .acts a.sec { color: var(--color-text-muted); }
.passage .acts a:hover { text-decoration: underline; }
.hidden { display: none !important; }
.explorer-empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }

/* ---- question library ---- */
.lib-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.lib-cat h3 { font-family: var(--font-display); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); }
.lib-cat ul { list-style: none; display: grid; gap: var(--space-1); }
.lib-cat a { display: flex; justify-content: space-between; gap: var(--space-3); align-items: center; min-height: 44px; padding: .5rem .75rem; border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); font-size: var(--text-sm); border: 1px solid transparent; }
.lib-cat a:hover { border-color: var(--color-border); background: var(--color-surface); color: var(--color-primary); }
.lib-cat a::after { content: '→'; color: var(--color-text-faint); }

/* ---- steps / features ---- */
.feature-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.feature { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.feature h3 { font-family: var(--font-display); font-size: var(--text-base); letter-spacing: .04em; margin-bottom: var(--space-2); }
.feature p { color: var(--color-text-muted); font-size: var(--text-sm); }
.feature .ico { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--color-primary); border: 1px solid var(--color-border-glow); margin-bottom: var(--space-4); background: var(--color-bg); }
.steps { display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); position: relative; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); color: var(--color-primary); font-size: var(--text-sm); letter-spacing: .1em; display: block; margin-bottom: var(--space-3); }
.step h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.step p { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- ecosystem ---- */
.eco-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.eco { text-decoration: none; color: inherit; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.eco .verb { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-primary); }
.eco h3 { font-family: var(--font-display); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; }
.eco p { color: var(--color-text-muted); font-size: var(--text-sm); }
.eco .more { margin-top: auto; padding-top: var(--space-3); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); font-weight: 600; }
.eco[aria-current] { border-color: var(--color-primary); }

/* ---- FAQ ---- */
.faq { display: grid; gap: var(--space-2); }
.faq details { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.faq summary { padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: 500; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; min-height: 48px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--color-primary); font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq .a { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }
.faq .a p + p { margin-top: var(--space-3); }

/* ---- disclaimer / callout ---- */
.disclaimer { font-size: var(--text-xs); color: var(--color-text-faint); border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: var(--space-6); line-height: 1.55; }
.callout-neutral { border-left: 3px solid var(--color-primary); padding: var(--space-4) var(--space-5); background: var(--color-surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- page hero (inner pages) ---- */
.page-hero { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); border-bottom: 1px solid var(--color-border); background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%); }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); letter-spacing: .02em; margin-top: var(--space-3); max-width: 24ch; }
.page-hero .lead { margin-top: var(--space-4); max-width: 42rem; }
.page-hero .glyph-lg { font-size: 2.4rem; color: var(--color-primary); margin-bottom: var(--space-2); }
.crumbs { font-size: var(--text-xs); color: var(--color-text-faint); display: flex; flex-wrap: wrap; gap: .4rem; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--color-primary); }
.crumbs li { list-style: none; display: inline-flex; gap: .4rem; }
.crumbs li + li::before { content: '/'; opacity: .5; }

/* ---- two-column page layout ---- */
.page-grid { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .page-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .page-aside { position: sticky; top: 5.5rem; } }
.aside-card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.aside-card + .aside-card { margin-top: var(--space-4); }
.aside-card h3 { font-family: var(--font-display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); }
.aside-card ul { list-style: none; display: grid; gap: .1rem; }
.aside-card li a { display: block; padding: .5rem 0; min-height: 40px; text-decoration: none; color: var(--color-text); font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); }
.aside-card li:last-child a { border-bottom: 0; }
.aside-card li a:hover { color: var(--color-primary); }
.aside-card .ask-form { flex-direction: column; }
.aside-card .ask-form input { min-height: 46px; }
.aside-card .ask-form .btn { min-height: 46px; }

/* ---- answer view (question pages + live ask) ---- */
.answer-section + .answer-section { margin-top: var(--space-12); }
.answer-section h2 { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: .03em; margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); }
.answer-section h2::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.persp-card { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.persp-card + .persp-card { margin-top: var(--space-4); }
.persp-card h3 { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); }
.persp-card p { color: var(--color-text); }
.src-list { list-style: none; margin-top: var(--space-4); display: grid; gap: .35rem; }
.src-list li { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; gap: .5rem; align-items: baseline; }
.src-list li::before { content: '📖'; font-size: .85em; flex: none; }
.src-list a { color: var(--color-text); text-decoration-color: var(--color-border); }
.src-list a:hover { color: var(--color-primary); }
.persp-card .more { display: inline-flex; align-items: center; min-height: 40px; margin-top: var(--space-3); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.bullets { list-style: none; display: grid; gap: var(--space-3); }
.bullets li { padding-left: 1.4rem; position: relative; color: var(--color-text); }
.bullets li::before { content: ''; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; border: 1px solid var(--color-primary); transform: rotate(45deg); }
.two-col { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .two-col { grid-template-columns: 1fr 1fr; } }
.sources-table { font-size: var(--text-sm); }
.sources-table th, .sources-table td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.sources-table th { font-family: var(--font-display); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-faint); }
.sources-table a { color: var(--color-text); text-decoration-color: var(--color-border); }
.sources-table a:hover { color: var(--color-primary); }
.related-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.related-grid a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); min-height: 56px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: var(--color-text); font-family: var(--font-serif); font-size: var(--text-lg); background: var(--color-surface); }
.related-grid a::after { content: '→'; color: var(--color-primary); }
.related-grid a:hover { border-color: var(--color-primary); }

/* ---- live ask states ---- */
.ask-status { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); }
.ask-status.error { border-color: color-mix(in srgb, #c0392b 50%, var(--color-border)); }
.ask-status.error strong { color: var(--color-text); }
.thinking { display: inline-flex; gap: 4px; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); animation: pulse 1.2s infinite ease-in-out; }
.thinking span:nth-child(2) { animation-delay: .2s; } .thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
.skeleton { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.skeleton div { height: 5.5rem; border-radius: var(--radius-xl); background: linear-gradient(90deg, var(--color-surface), var(--color-surface-2), var(--color-surface)); background-size: 200% 100%; animation: shimmer 1.6s infinite linear; border: 1px solid var(--color-border); }
@keyframes shimmer { to { background-position: -200% 0; } }
.ask-page-form { margin-top: var(--space-6); }
.ask-page-form .check-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.ask-page-form .check { min-height: 44px; font-size: var(--text-xs); padding: .4rem .7rem; }
.md h3 { font-family: var(--font-display); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); margin: var(--space-6) 0 var(--space-3); }
.md h4 { font-family: var(--font-serif); font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-2); }
.md p + p { margin-top: var(--space-3); }
.md ul { padding-left: 1.2rem; margin-top: var(--space-2); }
.md blockquote { border-left: 2px solid var(--color-primary); padding-left: var(--space-4); font-family: var(--font-serif); font-size: var(--text-lg); color: var(--color-text-muted); margin: var(--space-4) 0; }

/* ---- footer ---- */
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.footer-grid h3 { font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-3); }
.footer-grid ul { list-style: none; display: grid; gap: .15rem; }
.footer-grid li a { display: inline-flex; align-items: center; min-height: 40px; }
.footer-brand p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-3); max-width: 28rem; }
.footer-bottom { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font-size: var(--text-xs); color: var(--color-text-faint); }
.footer-bottom p { max-width: 60rem; }

/* ---- sacred geometry accent (static, subtle) ---- */
.geo { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; background-image: radial-gradient(circle at 50% 20%, transparent 0 39%, var(--color-border-glow) 39.5% 40%, transparent 40.5%), radial-gradient(circle at 50% 20%, transparent 0 55%, var(--color-border-glow) 55.5% 56%, transparent 56.5%); background-repeat: no-repeat; }
.divider-glyph { text-align: center; color: var(--color-primary); font-size: 1.1rem; letter-spacing: .6em; opacity: .7; margin: var(--space-2) 0 var(--space-8); }

/* ---- generic ---- */
.stack-sm > * + * { margin-top: var(--space-3); }
.stack > * + * { margin-top: var(--space-6); }
.center { text-align: center; }
.mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-10 { margin-top: var(--space-10); }
.btn-cta { letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.card:hover.no-lift { transform: none; }

/* ---- ask page tradition picker ---- */
.ask-trads > summary { cursor: pointer; min-height: 44px; display: block; padding: .6rem 0; line-height: 1.5; list-style: none; user-select: none; }
.ask-trads > summary::-webkit-details-marker { display: none; }
.ask-trads .chev { display: inline-block; margin-right: .55rem; width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform var(--transition); flex: none; }
.ask-trads[open] .chev { transform: translateY(.1em) rotate(225deg); }
.ask-trads .faint { color: var(--color-text-faint); white-space: nowrap; }

@media (max-width: 560px) { .compare-box legend { margin-top: var(--space-6) !important; } .compare-box .ask-form { margin-bottom: var(--space-2); } }

/* ---- 2026-09 refinements ---- */
.hero-guide .ask-box { margin-top: var(--space-6); }
.hero-ctas-sub { margin-top: var(--space-5); gap: var(--space-4); align-items: center; }
.hero-ctas-sub .btn-ghost { min-height: 44px; }
.example-od { display: grid; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-top: 1px solid var(--color-border); }
@media (min-width: 720px) { .example-od { grid-template-columns: 1fr 1fr; } }
.example-od .eyebrow { margin-bottom: var(--space-2); }
.bullets { padding-left: 1.1rem; margin: 0; } .bullets li + li { margin-top: var(--space-2); } .bullets.small { color: var(--color-text-muted); }
@media (min-width: 720px) { .steps.steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps.steps-4 { grid-template-columns: repeat(4, 1fr); } }
.trust-foot { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .trust-foot { grid-template-columns: 1.4fr 1fr; align-items: center; } .trust-links { justify-content: flex-end; } }
.trust-links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.footer-grid > .footer-brand { grid-column: 1 / -1; }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.6fr repeat(6, 1fr); } .footer-grid > .footer-brand { grid-column: auto; } }
.footer-bottom a { color: var(--color-text-muted); text-decoration: underline; text-decoration-color: var(--color-border); }
.ask-form input::placeholder { transition: opacity .22s ease; }
.ask-form input.ph-fade::placeholder { opacity: 0; }
.ask-form input::placeholder { text-overflow: ellipsis; }

/* Editorial accountability (byline) and evidence labels — review findings 2 and 5 */
.byline { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }
.byline a { color: var(--color-text); text-decoration-color: var(--color-border); }
.byline a:hover { color: var(--color-primary); }
.byline-tag { color: var(--color-primary); font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }
.evidence { display: inline-flex; align-items: center; gap: .45rem; margin: -.25rem 0 var(--space-3); font-size: .72rem; letter-spacing: .04em; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: .2rem .65rem .2rem .5rem; }
.evidence::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-primary); flex: none; }
.evidence-practice::before, .evidence-narrative::before { background: transparent; border: 1.5px solid var(--color-primary); }
.evidence-practice { border-style: dashed; }
.evidence-teaching::before { background: var(--color-text-muted); }
.persp-card .evidence { margin-top: 0; }