.landing { color: #202825; background: #fff; --landing-green: #23654d; font-size: 16px; line-height: 1.65; }
.landing a { text-decoration: none; }
.landing a:focus-visible { outline: 3px solid #509f7b; outline-offset: 5px; }
.landing-container { width: min(1180px, calc(100% - 96px)); margin-inline: auto; }
.landing-skip { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 10px 20px; background: white; }
.landing-skip:focus { top: 10px; }
.landing-header { display: flex; align-items: center; gap: 32px; min-height: 88px; padding: 16px 48px; border-bottom: 1px solid #e7ebe8; background: white; }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 19px; line-height: 1.2; }
.landing-logo { display: grid; place-items: center; width: 38px; height: 38px; background: #eaf2ed; border-radius: 6px; color: #23654d; flex-shrink: 0; }
.landing-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 14px; }
.landing-bible-link { font-weight: 700; }
.landing-account { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.landing-login { font-weight: 600; }
.landing-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 11px 22px; border: 1px solid transparent; border-radius: 5px; font-weight: 650; font-size: 15px; line-height: 1.4; text-align: center; transition: background 150ms, transform 150ms; }
.landing-button:hover { transform: translateY(-1px); }
.landing-button-dark { background: #243e33; color: white; }
.landing-button-dark:hover { background: #162d23; }
.landing-button-light { background: white; color: #20382b; }
.landing-button-light:hover { background: #e8f0eb; }
.landing-hero { position: relative; isolation: isolate; min-height: 500px; height: min(620px, calc(100svh - 160px)); display: flex; align-items: center; color: #fff; background: #2e4139; overflow: hidden; }
.landing-hero-media, .landing-hero-photo, .landing-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.landing-hero-media { z-index: -2; }
.landing-hero-photo { object-fit: cover; object-position: 50% 53%; }
.landing-hero-shade { background: #10221a85; z-index: -1; }
.landing-hero-content { width: min(1180px, calc(100% - 96px)); margin-inline: auto; padding-block: 42px; }
.landing-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; margin: 0 0 20px; line-height: 1.5; }
.landing-hero h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 96px; line-height: 1.08; max-width: 800px; margin-bottom: 12px; font-weight: 500; }
.landing-hero-subtitle { font-size: 25px; line-height: 1.35; margin-bottom: 20px; font-weight: 500; max-width: 640px; }
.landing-scripture { max-width: 730px; margin: 24px 0; padding: 0; border: 0; color: #fff; }
.landing-scripture p { font-family: Georgia, 'Times New Roman', serif; font-size: 25px; line-height: 1.5; margin: 0 0 12px; }
.landing-scripture cite { display: block; font-size: 14px; font-style: normal; color: #f2f6f1; }
.landing-lead { font-size: 16px; line-height: 1.65; max-width: 560px; margin-bottom: 24px; }
.landing-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }
.landing-hero-actions > span { font-size: 13px; color: #f2f6f1; }
.landing-intro { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 32px; border-bottom: 1px solid #e3e9e5; font-size: 14px; color: #56615a; }
.landing-intro > span { display: flex; align-items: center; gap: 12px; }
.landing-intro svg { color: #23654d; flex-shrink: 0; }
.landing-section { padding-block: 92px; }
.landing-story { padding-block: 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; border-bottom: 1px solid #e3e9e5; }
.landing-story .landing-kicker { color: #39745b; }
.landing-story-copy > p:not(.landing-kicker) { color: #657168; margin-bottom: 18px; }
.landing-journey { padding-left: 6px; }
.landing-journey-reference { display: flex; align-items: center; gap: 10px; color: #387052; font-size: 13px; font-weight: 650; margin-bottom: 25px; }
.landing-journey-entry { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding-bottom: 26px; }
.landing-journey-entry:not(:last-of-type)::after { content: ''; position: absolute; top: 32px; bottom: 0; left: 15px; border-left: 1px solid #dce6df; }
.landing-journey-point { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #42785a; background: #edf3ee; }
.landing-journey-entry h3 { font-size: 14px; margin: 5px 0 8px; }
.landing-journey-entry p { font: italic 16px/1.65 Georgia, serif; color: #606e64; margin: 0; }
.landing-journey small { color: #78847c; font-size: 11px; }
.landing-section-heading { max-width: 720px; margin-bottom: 48px; }
.landing-section .landing-kicker, .landing-writing .landing-kicker { color: #39745b; }
.landing h2 { font-size: 40px; line-height: 1.2; font-weight: 700; margin-bottom: 18px; }
.landing-section-heading > p:last-child { font-size: 18px; color: #69736c; max-width: 630px; }
.landing-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 42px; }
.landing-carousel { min-width: 0; }
.landing-carousel-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.landing-carousel-tabs { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.landing-carousel-tabs button { gap: 8px; padding: 10px 16px; min-height: 44px; color: #657168; background: transparent; border: 1px solid #e3e9e5; font-size: 14px; }
.landing-carousel-tabs button[aria-selected=true] { background: #eaf2ed; color: #23654d; border-color: #b9d2c3; }
.landing-carousel-tabs button:hover { background: #f0f5f1; }
.landing-carousel-arrows { display: flex; gap: 8px; flex-shrink: 0; }
.landing-carousel-arrows button { width: 42px; height: 42px; background: white; border: 1px solid #dce5de; border-radius: 50%; }
.landing-carousel-arrows button:hover { background: #eaf2ed; }
.landing-carousel-slide { margin: 0; min-width: 0; touch-action: pan-y; }
.landing-carousel-stage { position: relative; padding: 36px 10% 48px 20px; perspective: 1800px; isolation: isolate; }
.landing-carousel-screen { position: relative; transform: rotateX(3deg) rotateY(-5deg) rotateZ(-1deg); transform-origin: center; border: 1px solid #cbd5cf; border-radius: 8px; background: #fff; box-shadow: 0 32px 52px -26px #193d3a65, 0 8px 18px #193d3a14; }
.landing-carousel-screen::before, .landing-carousel-screen::after { content: ''; position: absolute; inset: 8px -7px -8px 7px; border: 1px solid #d1dcd5; border-radius: 8px; background: #e8eeea; z-index: -1; }
.landing-carousel-screen::after { inset: 15px -13px -15px 13px; background: #f1f4f2; z-index: -2; }
.landing-carousel-chrome { display: flex; gap: 8px; align-items: center; height: 34px; padding: 0 14px; border-bottom: 1px solid #e1e7e2; color: #4e6559; font-size: 11px; }
.landing-carousel-chrome-page { margin-left: auto; color: #78847c; }
.landing-carousel-image { position: relative; width: 100%; aspect-ratio: 1440 / 940; background: #f7f8f6; border-radius: 0 0 7px 7px; overflow: hidden; }
.landing-carousel-phone { position: absolute; right: 12px; bottom: 16px; width: 19%; aspect-ratio: 390 / 844; padding: 5px; border: 1px solid #9daaa1; border-radius: 20px; background: #253b34; transform: rotateY(-8deg) rotateZ(3deg); box-shadow: 0 22px 34px -14px #17342f70, inset 0 0 0 1px #ffffff40; overflow: hidden; }
.landing-carousel-phone img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.landing-carousel-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.landing-carousel-image picture { display: block; width: 100%; height: 100%; }
.landing-carousel-current { position: relative; z-index: 1; }
.landing-carousel-image .landing-carousel-outgoing { position: absolute; inset: 0; pointer-events: none; }
.landing-carousel-slide[data-animated=true][data-ready=false] .landing-carousel-current { opacity: 0; }
.landing-carousel-slide[data-animated=true][data-ready=true] .landing-carousel-current,
.landing-carousel-slide[data-animated=true][data-ready=true] .landing-carousel-phone img { animation: landing-screen-in 360ms cubic-bezier(.22, 1, .36, 1) both; }
.landing-carousel-slide[data-ready=true] .landing-carousel-outgoing { animation: landing-screen-out 360ms ease both; }
.landing-carousel-slide[data-animated=true] .landing-carousel-caption-copy { animation: landing-caption-in 300ms ease both; }
@keyframes landing-screen-in { from { opacity: 0; transform: translateX(var(--carousel-shift)); } to { opacity: 1; transform: translateX(0); } }
@keyframes landing-screen-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(calc(var(--carousel-shift) * -.5)); visibility: hidden; } }
@keyframes landing-caption-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.landing-carousel-meta .landing-shot-mobile { display: none; }
.landing-carousel-caption { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0 0; min-height: 136px; }
.landing-carousel-caption h3 { margin-bottom: 8px; }
.landing-carousel-caption p { max-width: 780px; margin: 0; font-size: 15px; color: #657168; }
.landing-carousel-meta { display: flex; align-items: flex-start; gap: 18px; flex-shrink: 0; font-size: 13px; color: #78847c; }
.landing-carousel-meta a { display: grid; place-items: center; min-width: 32px; min-height: 32px; margin-top: -5px; border: 1px solid #e3e9e5; border-radius: 4px; }
.landing-carousel-meta a:hover { background: #edf3ee; }
.landing-feature-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; margin-bottom: 18px; }
.landing-feature-icon.tone-0 { background: #eaf3ec; color: #367553; }
.landing-feature-icon.tone-1 { background: #edf1f8; color: #4a68a1; }
.landing-feature-icon.tone-2 { background: #faeeee; color: #a35459; }
.landing h3 { font-size: 19px; line-height: 1.4; margin: 0 0 12px; font-weight: 650; }
.landing-feature p, .landing-personal p { color: #657168; font-size: 15px; margin: 0; }
.landing-writing-band { background: #f4f7f5; border-block: 1px solid #e4ebe6; }
.landing-writing { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; padding-block: 80px; align-items: center; }
.landing-writing-copy > p:not(.landing-kicker) { color: #657168; }
.landing-writing-copy ul { display: grid; gap: 12px; margin: 26px 0; padding: 0; list-style: none; font-size: 14px; }
.landing-writing-copy li { display: flex; align-items: center; gap: 10px; }
.landing-writing-copy li svg { color: #367553; flex-shrink: 0; }
.landing-text-link { display: inline-block; font-size: 15px; font-weight: 650; color: #23654d; border-bottom: 1px solid #7c9f8c; padding-bottom: 2px; }
.landing-document { background: white; border: 1px solid #dce5de; border-radius: 7px; box-shadow: 0 12px 32px #223e3010; min-width: 0; }
.landing-document-bar { border-bottom: 1px solid #e7ebe8; padding: 14px 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; color: #7c857e; }
.landing-document-body { padding: 36px 30px 42px; }
.landing-document-type { font-size: 11px; color: #838c85; }
.landing-document-body h3 { font-size: 26px; margin: 10px 0 26px; }
.landing-document blockquote { margin: 0 0 22px; padding: 8px 0 8px 18px; border-left: 3px solid #71a184; font: 18px/1.6 Georgia, serif; }
.landing-document cite { display: block; margin-top: 8px; font: 12px/1.5 system-ui, sans-serif; color: #7b857e; }
.landing-document-body > p:not(.landing-document-type) { font-size: 13px; }
.landing-example-task { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: #6d7c70; margin-top: 12px; }
.landing-example-task svg { flex-shrink: 0; margin-top: 2px; }
.landing-personal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.landing-personal article > svg { color: #47725d; margin-bottom: 20px; }
.landing-faq { padding-bottom: 80px; }
.landing-faq h2 { margin-bottom: 30px; }
.landing-faq details { border-bottom: 1px solid #e3e9e5; }
.landing-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; padding: 20px 0; font-weight: 600; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary svg { flex-shrink: 0; }
.landing-faq details[open] summary svg { transform: rotate(180deg); }
.landing-faq details p { max-width: 850px; font-size: 15px; color: #657168; padding-bottom: 18px; }
.landing-start { background: #eaf2ed; padding-block: 68px; text-align: center; }
.landing-start h2 { max-width: 780px; margin-inline: auto; }
.landing-start p:not(.landing-kicker) { max-width: 630px; margin: 0 auto 26px; color: #5a6d60; }
.landing-start-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; }
.landing-start small { display: block; max-width: 620px; margin: 26px auto 0; font-size: 11px; color: #5f7164; }
.landing-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; padding-block: 30px; font-size: 12px; color: #7e8981; }
.landing-footer > span:first-child { font-weight: 700; color: #3f5448; margin-right: auto; }
.landing-footer a:hover, .landing-nav a:hover, .landing-login:hover { text-decoration: underline; }
@media (min-width: 1800px) { .landing-hero { max-height: 650px; height: calc(100svh - 200px); } }
@media (max-width: 1000px) {
  .landing-header { padding-inline: 28px; gap: 22px; }
  .landing-nav { gap: 20px; }
  .landing-account { gap: 16px; }
  .landing-container, .landing-hero-content { width: calc(100% - 56px); }
  .landing-hero h1 { font-size: 80px; }
  .landing-story { gap: 40px; }
  .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-personal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .landing-writing { gap: 36px; }
  .landing h2 { font-size: 32px; }
  .landing-intro { font-size: 12px; gap: 16px; }
}
@media (max-width: 680px) {
  .landing-header { min-height: 100px; padding: 14px 20px; gap: 12px; flex-wrap: wrap; }
  .landing-brand { font-size: 16px; gap: 7px; }
  .landing-logo { width: 30px; height: 30px; }
  .landing-nav { order: 3; width: 100%; justify-content: space-between; font-size: 13px; }
  .landing-account { margin-left: auto; gap: 12px; font-size: 12px; }
  .landing-account .landing-button { font-size: 12px; padding: 8px 10px; min-height: 36px; }
  .landing-container, .landing-hero-content { width: calc(100% - 40px); }
  .landing-hero { min-height: 480px; height: auto; max-height: none; align-items: flex-start; }
  .landing-hero-content { padding-block: 40px; }
  .landing-hero h1 { font-size: 64px; margin-bottom: 12px; }
  .landing-hero-subtitle { font-size: 21px; margin-bottom: 16px; }
  .landing-scripture { margin-block: 20px; }
  .landing-scripture p { font-size: 19px; }
  .landing-lead { font-size: 16px; max-width: 420px; margin-bottom: 24px; }
  .landing-hero-photo { object-position: 50% 62%; }
  .landing-hero-shade { background: #10221a68; }
  .landing-kicker { font-size: 10px; margin-bottom: 18px; }
  .landing-hero-actions { gap: 12px; }
  .landing-hero-actions > span { font-size: 11px; }
  .landing-intro { align-items: flex-start; padding-block: 22px; }
  .landing-intro > span { flex-direction: column; gap: 8px; flex: 1; font-size: 10px; line-height: 1.5; }
  .landing-section { padding-block: 58px; }
  .landing-story { grid-template-columns: minmax(0, 1fr); padding-block: 56px; gap: 30px; }
  .landing-section-heading { margin-bottom: 32px; }
  .landing h2 { font-size: 30px; }
  .landing-section-heading > p:last-child { font-size: 16px; }
  .landing-features { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .landing-carousel-toolbar { align-items: flex-start; gap: 10px; }
  .landing-carousel-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; }
  .landing-carousel-tabs button { padding: 8px; font-size: 12px; min-width: 0; gap: 6px; }
  .landing-carousel-tabs button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .landing-carousel-stage { padding: 20px 18px 34px; }
  .landing-carousel-screen { max-width: 340px; margin-inline: auto; transform: rotateX(2deg) rotateZ(-1deg); border: 5px solid #253b34; border-radius: 20px; }
  .landing-carousel-screen::before, .landing-carousel-screen::after, .landing-carousel-chrome, .landing-carousel-phone { display: none; }
  .landing-carousel-image { aspect-ratio: 390 / 844; border-radius: 14px; }
  .landing-carousel-meta .landing-shot-desktop { display: none; }
  .landing-carousel-meta .landing-shot-mobile { display: grid; }
  .landing-carousel-arrows { gap: 5px; }
  .landing-carousel-arrows button { width: 34px; height: 34px; }
  .landing-carousel-caption { gap: 14px; padding-top: 18px; min-height: 180px; }
  .landing-carousel-caption h3 { font-size: 18px; }
  .landing-carousel-caption p { font-size: 13px; }
  .landing-carousel-meta { flex-direction: column; align-items: center; gap: 12px; }
  .landing-feature { padding-bottom: 24px; border-bottom: 1px solid #edf0ed; }
  .landing-feature-icon { width: 38px; height: 38px; margin-bottom: 12px; }
  .landing-writing { grid-template-columns: minmax(0, 1fr); padding-block: 56px; gap: 32px; }
  .landing-document-body { padding: 28px 22px; }
  .landing-document-body h3 { font-size: 23px; }
  .landing-personal { gap: 30px 22px; }
  .landing-personal h3 { font-size: 17px; }
  .landing-personal p { font-size: 13px; }
  .landing-start { padding-block: 50px; }
  .landing-footer { gap: 18px; }
  .landing-footer > span:last-child { flex-basis: 100%; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-carousel-screen, .landing-carousel-phone { transform: none; }
  .landing-carousel-slide[data-animated=true][data-ready=true] .landing-carousel-current,
  .landing-carousel-slide[data-animated=true][data-ready=true] .landing-carousel-phone img,
  .landing-carousel-slide[data-animated=true] .landing-carousel-caption-copy { animation: none; }
  .landing-carousel-slide[data-ready=true] .landing-carousel-outgoing { display: none; animation: none; }
}
@media (max-width: 370px) {
  .landing-header { padding-inline: 12px; gap: 8px; }
  .landing-brand { font-size: 13px; gap: 6px; }
  .landing-account { gap: 8px; }
  .landing-account, .landing-account .landing-button { font-size: 11px; }
  .landing-account .landing-button { padding-inline: 8px; }
  .landing-logo { width: 20px; height: 24px; }
  .landing-hero h1 { font-size: 58px; }
  .landing-hero-subtitle { font-size: 19px; }
}