/* 5:16 editorial direction. Base layout and accessibility stay in site.css. */
:root {
  --signal: #e3ff78;
  --night: #0f251e;
  --night-2: #17372c;
  --card-ink: #172c23;
}

body { background: #f8f5ec; }
.header { background: #f8f5ec; border-bottom: 1px solid #234b3d; }
.header-inner { min-height: 76px; }
.header nav { gap: 22px; }
.header nav a { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.header nav a:hover { text-decoration-color: var(--forest); }
.nav-note { border: 1px solid var(--forest); border-radius: 4px; color: var(--forest); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-header { position: sticky; top: 0; z-index: 40; background: var(--night); border-bottom-color: #d7efb53a; transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease; }
.home-header .brand-image { background-image: url('5-16-wordmark-light.svg'); background-size: 104px auto; }
.home-header .brand-line { color: #f8f5ec; border-left-color: #d7efb55c; }
.home-header nav a { color: #f8f5ec; }
.home-header nav a:hover { text-decoration-color: var(--signal); }
.home-header .nav-note { color: var(--signal); border-color: #e3ff78a8; }
.home-header.is-past-hero { background: #f8f5ec; border-bottom-color: #234b3d; box-shadow: 0 5px 16px #0f251e18; }
.home-header.is-past-hero .brand-image { background-image: url('5-16-icon.png'); background-size: 126px auto; }
.home-header.is-past-hero .brand-line { color: var(--forest); border-left-color: #b7c7bc; }
.home-header.is-past-hero nav a { color: var(--ink); }
.home-header.is-past-hero nav a:hover { text-decoration-color: var(--forest); }
.home-header.is-past-hero .nav-note { color: var(--forest); border-color: var(--forest); }

.hero-signal { background: var(--night); color: #f6f4e9; overflow: hidden; }
.hero-index { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; color: #b7c9b8; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.signal-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px #e3ff7824; }
.signal-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr); gap: clamp(20px,4vw,70px); min-height: 700px; align-items: center; }
.signal-copy { padding: 75px 0 70px; position: relative; z-index: 1; }
.signal-kicker { color: var(--signal); font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.signal-copy h1 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: clamp(76px,8.1vw,132px); font-weight: 900; line-height: .88; letter-spacing: -.095em; max-width: 770px; margin: 22px 0 31px; }
.signal-copy h1 em { display: inline-block; color: var(--signal); font-family: Georgia,"Times New Roman",serif; font-weight: 400; font-style: italic; letter-spacing: -.08em; transform: translateX(-.03em); }
.signal-promise { max-width: 550px; color: #f6f4e9; font: 400 clamp(25px,2.8vw,40px)/1.16 Georgia,"Times New Roman",serif; letter-spacing: -.03em; margin-bottom: 17px; }
.signal-explain { max-width: 495px; color: #c6d1c5; font-size: 16px; line-height: 1.6; margin-bottom: 30px; }
.signal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 17px 26px; }
.signal-button { display: inline-flex; align-items: center; justify-content: space-between; min-height: 58px; min-width: 225px; gap: 22px; padding: 0 18px; color: var(--night); background: var(--signal); border: 2px solid var(--signal); border-radius: 4px; font-size: 12px; font-weight: 900; letter-spacing: .09em; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.signal-button:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 #f6f4e9; }
.signal-button span { font-size: 21px; line-height: 1; }
.signal-link { color: #f6f4e9; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-decoration: underline; text-underline-offset: 5px; }
.signal-link:hover { color: var(--signal); }
.signal-status { margin: 25px 0 0; color: #aabdad; font-size: 11px; line-height: 1.5; letter-spacing: .04em; }

.signal-art { min-height: 580px; position: relative; isolation: isolate; }
.signal-noise { position: absolute; inset: 12px -30px 25px -25px; border-radius: 50%; background: radial-gradient(circle at 51% 45%,#325744 0 20%,#1e4232 20% 40%,#142c23 40% 67%,transparent 67%), repeating-linear-gradient(0deg,transparent 0 21px,#e3ff780c 21px 22px); transform: rotate(-13deg); }
.signal-noise::after { content: ""; position: absolute; inset: 28px; border: 1px solid #e3ff784a; border-radius: 50%; }
.signal-verse { position: absolute; width: min(365px,80%); left: 3%; top: 21%; padding: 29px; color: var(--card-ink); background: #f9f7ec; border: 2px solid var(--signal); border-radius: 6px; box-shadow: 14px 15px 0 #040e0a9c; transform: rotate(-6deg); }
.signal-verse-top { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #527163; padding-bottom: 13px; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.signal-verse-ref { margin: 48px 0 17px; color: #426456; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.signal-verse blockquote { margin: 0 0 47px; font: 400 clamp(25px,2.7vw,35px)/1.16 Georgia,"Times New Roman",serif; letter-spacing: -.045em; }
.signal-verse mark { color: inherit; background: var(--signal); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.signal-verse-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #527163; padding-top: 12px; font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.signal-verse-bottom span:last-child { font-size: 25px; line-height: .7; }
.signal-timer { position: absolute; right: -2%; top: 6%; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 174px; height: 174px; border-radius: 50%; color: var(--night); background: var(--signal); border: 2px solid var(--night); box-shadow: 7px 9px 0 #0006; transform: rotate(12deg); }
.signal-timer span { font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.signal-timer strong { font: 900 43px/.95 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -.075em; padding: 8px 0; }
.signal-scribble { position: absolute; right: -1%; bottom: 3%; color: #f6f4e9; font: 400 37px/.97 Georgia,"Times New Roman",serif; letter-spacing: -.07em; transform: rotate(-10deg); text-align: right; }
.signal-scribble em { color: var(--signal); }
.signal-rail { overflow: hidden; border-top: 1px solid #d7efb539; padding: 20px 0 23px; color: #c5d5c3; font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.signal-rail-track { display: flex; width: max-content; animation: rail-move-right 36s linear infinite; will-change: transform; }
.signal-rail:hover .signal-rail-track { animation-play-state: paused; }
.signal-rail-group { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; min-width: max(720px,100vw); padding-inline: 20px; white-space: nowrap; }
.signal-rail-group span:nth-child(even) { color: var(--signal); font-size: 21px; line-height: .5; }
@keyframes rail-move-right { from { transform: translateX(-33.333333%); } to { transform: translateX(0); } }

.home-header + main section[id] { scroll-margin-top: 76px; }
.why-section { background: #f8f5ec; padding: 112px 0 120px; }
.why-grid { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(45px,7vw,105px); align-items: center; }
.why-art { min-height: 490px; position: relative; border-top: 2px solid var(--night); border-bottom: 2px solid var(--night); overflow: visible; }
.why-issue, .why-art-ref { position: absolute; left: 0; color: var(--forest); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.why-issue { top: 18px; }
.why-art-ref { bottom: 18px; }
.why-art strong { position: absolute; top: 26%; left: -.03em; color: var(--forest); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: clamp(150px,16vw,235px); font-weight: 900; line-height: .9; letter-spacing: -.12em; white-space: nowrap; }
.why-stamp { position: absolute; top: 13%; right: -2%; display: flex; align-items: center; justify-content: center; width: 170px; height: 170px; padding: 25px; color: var(--night); background: var(--signal); border: 2px solid var(--night); border-radius: 50%; box-shadow: 7px 8px 0 var(--night); font-size: 17px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; text-align: center; transform: rotate(12deg); }
.why-stamp span { position: absolute; right: 27px; bottom: 23px; font-size: 24px; }
.why-copy .eyebrow { margin-bottom: 20px; }
.why-copy h2 { max-width: 690px; margin: 0 0 30px; color: var(--night); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: clamp(51px,5.8vw,77px); font-weight: 900; line-height: .96; letter-spacing: -.075em; }
.why-copy h2 em { color: var(--forest); font-family: Georgia,"Times New Roman",serif; font-weight: 400; font-style: italic; letter-spacing: -.06em; }
.why-copy p { max-width: 590px; margin: 0 0 16px; color: #365146; font-size: 18px; line-height: 1.6; }
.why-verse { max-width: 540px; margin-top: 36px; border-top: 2px solid var(--forest); padding-top: 20px; }
.why-verse blockquote { margin: 0 0 13px; color: var(--night); font: 400 clamp(23px,2.5vw,31px)/1.25 Georgia,"Times New Roman",serif; letter-spacing: -.025em; }
.why-verse cite { color: var(--forest); font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.dark { background: var(--night-2); }
.dark .section-head { max-width: 760px; }
.dark .section-head h2 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: clamp(53px,6vw,84px); font-weight: 900; letter-spacing: -.075em; line-height: .98; }
.dark .eyebrow { color: var(--signal); }
.loop-card { border: 1px solid #cdeab94d; border-radius: 6px; background: #0718104f; min-height: 280px; }
.loop-number { color: var(--signal); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: 54px; font-weight: 900; letter-spacing: -.08em; }
.loop-card h3 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.loop-card p { color: #d9e5d6; }

#bible .eyebrow, #plans .eyebrow { font-weight: 900; }
#bible h2 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: clamp(49px,5vw,72px); font-weight: 850; letter-spacing: -.07em; }
#bible .verse-showcase { border: 2px solid var(--forest); border-radius: 6px; box-shadow: 12px 12px 0 #d1dfbd; transform: rotate(-2deg); }
.plans { background: var(--signal); }
.plans .section-head p { color: #2f4737; }
.plan { border: 2px solid var(--night); border-radius: 6px; box-shadow: 8px 8px 0 var(--night); }
.plan.pro { background: var(--night); color: #f6f4e9; box-shadow: 8px 8px 0 #8eb13b; }
.plan.pro h3, .plan.pro h2 { color: #f6f4e9; }
.plan.pro p { color: #cad8ca; }
.plan.pro .plan-tag { color: var(--signal); }
.plan.pro li { border-color: #ffffff45; }
.closing { background: var(--night); }
.closing .eyebrow { color: var(--signal); }
.closing h2 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: clamp(55px,7vw,98px); font-weight: 900; letter-spacing: -.08em; line-height: .97; text-transform: uppercase; }
.closing .button { border-radius: 4px; background: var(--signal); border-color: var(--signal); color: var(--night); }
.closing .button:hover { background: #f1ffb3; }
.site-footer { background: #081a14; }
.footer-wordmark { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size: clamp(64px,7.5vw,104px); font-weight: 900; letter-spacing: -.11em; }
.footer-tagline { font-family: Georgia,"Times New Roman",serif; font-size: 21px; font-style: italic; }
.footer-nav h2, .footer-languages h2 { color: var(--signal); }
.footer-language-links a[aria-current="page"] { text-decoration-color: var(--signal); }

.breadcrumbs { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.article-hero h1 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight: 850; letter-spacing: -.07em; }
.article-body h2 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight: 800; letter-spacing: -.04em; }
.article-aside { border: 2px solid var(--night); border-radius: 6px; box-shadow: 6px 6px 0 #d1dfbd; }
.fact-box { background: var(--signal); border-left: 5px solid var(--night); border-radius: 0; }

.localized-hero h1 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight: 850; letter-spacing: -.06em; overflow-wrap: anywhere; }
.localized-beta { border-radius: 4px; font-weight: 700; }
.localized-origin { padding: 66px 0 75px; border-top: 2px solid var(--forest); }
.localized-origin p { max-width: 910px; margin: 20px 0 0; color: var(--night); font: 400 clamp(25px,3vw,39px)/1.3 Georgia,"Times New Roman",serif; letter-spacing: -.03em; }

@media (max-width: 900px) {
  .signal-grid { grid-template-columns: minmax(0,1fr) minmax(300px,.8fr); }
  .signal-copy h1 { font-size: clamp(68px,8vw,100px); }
  .signal-art { min-height: 520px; }
  .signal-verse { left: 0; width: 82%; }
  .signal-timer { width: 144px; height: 144px; right: -6%; }
  .signal-timer strong { font-size: 35px; }
  .signal-scribble { font-size: 30px; }
  .why-grid { gap: 36px; }
  .why-art { min-height: 390px; }
  .why-art strong { font-size: clamp(130px,17vw,175px); }
  .why-stamp { width: 135px; height: 135px; font-size: 14px; right: -4%; }
  .why-stamp span { right: 18px; bottom: 17px; }
}

@media (max-width: 720px) {
  .hero-index span:last-child { display: none; }
  .signal-grid { display: block; }
  .signal-copy { padding: 72px 0 12px; }
  .signal-copy h1 { font-size: clamp(63px,15vw,90px); letter-spacing: -.075em; word-spacing: .09em; margin: 17px 0 28px; }
  .signal-promise { font-size: 30px; }
  .signal-explain { font-size: 16px; }
  .signal-art { min-height: 510px; max-width: 460px; margin-inline: auto; }
  .signal-verse { width: 74%; top: 22%; left: 6%; padding: 20px; }
  .signal-verse-ref { margin: 31px 0 14px; font-size: 8px; }
  .signal-verse blockquote { font-size: clamp(21px,5.5vw,27px); margin-bottom: 30px; }
  .signal-timer { width: 125px; height: 125px; top: 7%; right: 2%; }
  .signal-timer strong { font-size: 31px; }
  .signal-timer span { font-size: 7px; }
  .signal-scribble { right: 3%; bottom: 2%; font-size: 27px; }
  .signal-rail { font-size: 9px; }
  .signal-rail-group { min-width: 720px; gap: 16px; }
  .why-section { padding: 72px 0 84px; }
  .why-grid { display: flex; flex-direction: column; align-items: stretch; gap: 47px; }
  .why-art { min-height: 300px; }
  .why-art strong { top: 24%; font-size: clamp(130px,30vw,195px); }
  .why-stamp { width: 130px; height: 130px; top: 16%; right: 0; }
  .why-copy h2 { font-size: clamp(47px,11vw,69px); }
  .why-copy p { font-size: 17px; }
  #bible .verse-showcase { transform: none; }
  .plan { box-shadow: 5px 5px 0 var(--night); }
  .closing h2 { font-size: clamp(43px,12vw,55px); letter-spacing: -.05em; word-spacing: .08em; }
}

@media (max-width: 380px) {
  .signal-copy h1 { font-size: 59px; }
  .signal-art { min-height: 520px; }
  .signal-verse { width: 78%; left: 2%; }
  .signal-timer { right: -1%; }
  .signal-scribble { font-size: 24px; }
  .why-art { min-height: 250px; }
  .why-art strong { top: 28%; font-size: 125px; }
  .why-stamp { width: 105px; height: 105px; padding: 12px; font-size: 11px; }
  .why-stamp span { right: 12px; bottom: 11px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-button { transition: none; }
  .signal-button:hover { transform: none; }
  .home-header { transition: none; }
  .signal-rail-track { animation: none; transform: none; will-change: auto; }
}