/* Extend the existing composition with readable forms and deliberate mobile spacing. */
html{overflow-x:clip}
[hidden]{display:none!important}
body{min-width:0}
input,select,button{font-family:var(--sans)}
.newsletter-form{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);position:relative}
.newsletter-form>p{font-size:15px;line-height:1.8;color:#b9c3b7}
.newsletter-form>label{display:block;font-size:14px;color:#deded0;margin:20px 0 9px}
.newsletter-row{display:flex;gap:10px;flex-wrap:wrap}
.newsletter-row>input{flex:1 1 190px;min-width:0;background:#0c1716;color:var(--white);border:1px solid #a7b29b75;border-radius:4px;padding:15px;font-size:16px;min-height:52px}
.newsletter-row>input::placeholder{color:#9aa99c}
.newsletter-row>button{flex:1 1 170px;display:flex;justify-content:center;align-items:center;gap:12px;border-radius:4px;background:var(--brass);color:#111515;min-height:52px;padding:15px;font-size:14px}
.newsletter-row>button:disabled{cursor:wait;opacity:.65}
.newsletter-row>button:hover:not(:disabled){background:#d1b98f}
.newsletter-form .newsletter-consent{display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.7;color:#acb9ad;margin-top:17px;cursor:pointer}
.newsletter-consent input{width:19px;height:19px;flex:0 0 19px;accent-color:var(--brass);margin:2px 0 0}
.newsletter-form input:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.newsletter-form .newsletter-status{font-size:14px;line-height:1.7;min-height:24px;margin:12px 0 0}
.newsletter-status[data-state=success]{color:#d9cc9e}
.newsletter-status[data-state=error]{color:#ffc6ac}
.signup-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.companion{align-items:start}
.product-stage{align-self:center}
.widget-section{grid-template-columns:.8fr 1.2fr;gap:5%}
.widget-artwork{overflow:hidden;border:1px solid #b89a6322}
.widget-mobile{display:none}
.site-header nav a,.header-cta{min-height:44px;display:inline-flex;align-items:center}
.motion-toggle,.scene-point{min-height:44px}
.scene-point .point-ring{width:32px;height:32px}
.preference-panel select{font-size:16px;min-height:48px}
.source-disclosure summary{min-height:44px;align-items:center;font-size:14px}
.formation-card small{font-size:14px}
.formation-card p{font-size:15px}
.formation-card summary{min-height:100px}
.text-link{font-size:14px;min-height:44px;align-items:center}
.phone{max-width:100%}
.demo-step{min-height:56px}
@media(min-width:1500px){.hero-content{max-width:720px}.hero-description{max-width:420px}.section-pad{padding-left:max(7%,calc((100% - 1440px)/2));padding-right:max(7%,calc((100% - 1440px)/2))}}
@media(max-width:1000px){.widget-section{grid-template-columns:1fr;gap:28px}.widget-section>div>p:not(.eyebrow){max-width:600px}.widget-section figure{width:100%;max-width:800px;margin:auto}.companion{column-gap:5%}.product-stage{min-width:0}.hero-content{max-width:62%}}
@media(max-width:650px){
  html{scroll-padding-top:20px}
  .site-header{padding:14px 6% 8px;min-height:118px;gap:4px 12px}
  .site-header nav{gap:24px;flex-wrap:wrap;margin:0;width:100%}
  .site-header nav a{font-size:13px;min-height:44px}
  .header-cta{font-size:13px;min-height:44px}
  .hero-journey{height:145svh}
  .hero-stage{height:100svh;min-height:820px}
  .hero-art{object-position:75% center}
  .hero-content{top:165px;left:7%;right:7%;max-width:none}
  .hero-content h1{font-size:clamp(36px,10.25vw,59px);line-height:1.11;letter-spacing:-.045em}
  .hero-content .eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:22px}
  .hero-description{font-size:16px;line-height:1.75;max-width:325px}
  .hero-footnote{font-size:13px}
  .hero-content .button{min-height:52px;font-size:14px}
  .scene-shade{background:linear-gradient(90deg,#071010c9,transparent 100%),linear-gradient(0deg,#090e0ef5,transparent 48%,#07101066 90%)}
  .scene-points{position:absolute;left:7%;right:7%;bottom:93px;display:flex;gap:18px;justify-content:flex-end;pointer-events:none}
  .scene-point{position:static;min-width:44px;min-height:44px;pointer-events:auto;padding:0;justify-content:center}
  .point-label{display:none}
  .hero-bottom{bottom:25px;gap:12px}
  .scroll-cue{font-size:9px;max-width:180px;line-height:1.6}
  .motion-toggle{font-size:12px;min-width:108px}
  .scene-note{bottom:150px;top:auto;max-width:86%}
  .practice-intro>div>p,.practice-step p,.companion-description,.source-heading>p:last-child,.source-flow p,.formation-heading>p,.formation-card p,.widget-section>div>p:not(.eyebrow){font-size:16px;line-height:1.8}
  .source-heading h2{font-size:clamp(32px,9.3vw,39px)}
  .practice h2,.companion h2,.formation-heading h2,.widget-section h2{font-size:clamp(34px,10vw,43px)}
  .section-pad{padding-left:7%;padding-right:7%}
  .source-heading .eyebrow{font-size:10px;letter-spacing:.12em}
  .preference-panel,.prayer-result{padding:24px 20px}
  .preference-panel label,.demo-step{font-size:14px}
  .workbench-note,.citation-note,.demo-disclosure{font-size:12px!important}
  #prayer-output{padding:18px 16px}
  .preference-range li{font-size:13px}
  .preference-range>p{font-size:18px}
  .formation-card strong{font-size:28px}
  .formation-card small{font-size:14px}
  .formation-card>div{padding-left:0}
  .formation-card .greek-line{font-size:12px}
  .newsletter-row{flex-direction:column}
  .newsletter-row>input,.newsletter-row>button{flex:auto;width:100%}
  .newsletter-form .newsletter-consent{font-size:14px}
  .app-download>p:not(.eyebrow){font-size:15px}
  .product-stage{padding-top:20px}
  .phone{transform:none;width:min(300px,100%)}
  .widget-desktop{display:none}
  .widget-mobile{display:grid;gap:24px}
  .widget-mobile .widget-crop{position:relative;width:100%;overflow:hidden;border-radius:14px;background:#0d1111}
  .widget-mobile .widget-home{aspect-ratio:790 / 930}
  .widget-mobile .widget-lock{aspect-ratio:610 / 930}
  .widget-mobile .widget-crop img{position:absolute;height:auto;max-width:none;top:0;border-radius:0}
  .widget-mobile .widget-home img{width:183.291%;left:0}
  .widget-mobile .widget-lock img{width:237.377%;left:-136.885%}
  .widget-section figcaption{font-size:12px;line-height:1.7}
  .closing-invitation h2{font-size:clamp(40px,12vw,60px)}
  footer{padding-bottom:max(30px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.hero-stage{min-height:820px}.world-frame{will-change:auto}}
.soundtrack-controls{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));right:16px;z-index:35;display:flex;align-items:center;gap:12px;border:1px solid #b89a634d;border-radius:6px;background:#0b1414f5;padding:4px 12px;box-shadow:0 6px 24px #0005;max-width:calc(100% - 32px)}
.soundtrack-controls button{display:flex;align-items:center;gap:10px;background:transparent;min-height:44px;font-size:13px;padding:4px 0}
.soundtrack-controls button>span:first-child{color:var(--brass);font-size:19px}
.soundtrack-volume{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--stone)}
.soundtrack-volume input{width:70px;min-height:40px;accent-color:var(--brass)}
.hero-bottom{bottom:78px}
footer{padding-bottom:90px}
@media(max-width:650px){.soundtrack-controls{right:12px;gap:10px;padding:2px 10px}.soundtrack-controls button{font-size:12px}.soundtrack-volume{font-size:11px}.soundtrack-volume input{width:58px}.hero-bottom{bottom:77px}.scene-points{bottom:142px}.scene-note{bottom:205px}footer{padding-bottom:90px}}
.soundtrack-menu summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:#c5ab7a;padding-left:12px;border-left:1px solid var(--line)}
.soundtrack-menu summary::-webkit-details-marker{display:none}
.soundtrack-menu summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.soundtrack-panel{position:absolute;right:0;bottom:calc(100% + 10px);width:300px;max-width:calc(100vw - 24px);padding:20px;background:#0b1414fa;border:1px solid #b89a6360;border-radius:6px;box-shadow:0 10px 30px #0007}
.soundtrack-panel>label:first-child{display:block;font-size:13px;margin-bottom:12px;color:#d8d0c2}
.soundtrack-panel select{width:100%;min-height:48px;font-size:16px;background:#192623;color:#eee6d6;border:1px solid #b89a6360;border-radius:4px;padding:10px}
.soundtrack-panel .soundtrack-volume{display:flex;justify-content:space-between;margin-top:15px;font-size:13px}
.soundtrack-panel .soundtrack-volume input{width:160px;max-width:70%;min-height:44px}
.soundtrack-panel audio{display:block;width:100%;height:40px;margin-top:14px;color-scheme:dark}
#soundtrack-status{font-size:13px;line-height:1.5;color:#d8d0c2;margin:14px 0 0}

/* The cards respond to a pointer without changing their reading or disclosure behavior. */
.practice-steps{gap:24px}
.formation-grid{gap:18px}
.practice-step,.formation-card{position:relative;isolation:isolate;border:1px solid #78644830;border-radius:8px;background:#ffffff12;transform:perspective(900px) translateY(0) rotateX(0) rotateY(0);transition:transform .35s ease,box-shadow .35s ease,border-color .25s ease,background-color .25s ease}
.practice-step{padding:28px 24px}
.formation-card{padding:0 22px}
.practice-step::before,.formation-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(ellipse at var(--spot-x,50%) var(--spot-y,35%),#fff8e9b3 0%,#cfb57c26 42%,transparent 76%);transition:opacity .3s ease}
.formation-card[open]{background-color:#fffaf02e;border-color:#8b73475e}
.formation-card:focus-within{border-color:#887040;box-shadow:0 0 0 2px #88704033}
.formation-card summary:focus-visible{outline:2px solid #887040;outline-offset:5px;border-radius:3px}
@media(hover:hover) and (pointer:fine){
  .practice-step:hover,.formation-card:hover{border-color:#9b7b46a6;background-color:#fff9ee30;box-shadow:0 14px 28px -18px #382d2280}
  .practice-step:hover::before,.formation-card:hover::before{opacity:1}
  .is-pointer-over{transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .12s ease-out,box-shadow .35s ease,border-color .25s ease,background-color .25s ease}
}
@media(max-width:650px){.practice-steps{gap:16px}.practice-step{padding:24px 20px}.formation-grid{gap:12px}.formation-card{padding:0 20px}}
@media(prefers-reduced-motion:reduce){.practice-step,.formation-card{transform:none!important;transition:none}.practice-step::before,.formation-card::before{transition:none}}
.motion-paused .practice-step,.motion-paused .formation-card{transform:none!important}

.header-cta{white-space:nowrap}
.hero-footnote{line-height:1.6;max-width:420px}
.newsletter-form{scroll-margin-top:20px}
.newsletter-form:focus-visible{outline:2px solid var(--brass);outline-offset:12px;border-radius:4px}
/* Use content height on compact screens so the invitation never meets the footer controls. */
@media(max-height:850px),(max-width:650px){
  .hero-journey{height:auto}
  .hero-stage{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px;height:auto;min-height:100svh;padding:128px 6.2% 82px}
  .hero-content{position:relative;inset:auto;max-width:58%;margin:0;flex:none}
  .hero-content h1{font-size:clamp(42px,min(5.2vw,8svh),68px);line-height:1.05;margin-bottom:18px}
  .hero-content .eyebrow{margin-bottom:16px}
  .hero-description{font-size:16px;line-height:1.65;max-width:440px;margin-bottom:18px}
  .hero-content .button{min-height:52px}
  .hero-footnote{font-size:13px;margin:10px 0 0}
  .hero-bottom{position:relative;inset:auto;width:100%;margin-top:auto;flex:none}
  .threshold-message{display:none}
}
@media(max-height:650px) and (min-width:651px){
  .site-header{height:80px}
  .hero-stage{padding-top:100px;gap:20px}
  .hero-content h1{font-size:clamp(40px,min(5.2vw,8svh),60px)}
  .hero-content .eyebrow{font-size:11px;margin-bottom:12px}
}
@media(max-width:650px){
  .site-header{min-height:108px;padding:12px 6% 6px;gap:2px 10px}
  .wordmark{font-size:clamp(14px,4.4vw,17px)}
  .site-header nav{gap:clamp(16px,5vw,24px)}
  .header-cta{gap:10px;padding:10px 12px}
  .hero-stage{padding:132px 7% 82px;gap:20px}
  .hero-content{width:100%;max-width:none}
  .hero-content h1{font-size:clamp(34px,10.25vw,54px);line-height:1.08}
  .hero-description{max-width:325px}
  .scene-points{position:relative;inset:auto;width:100%;flex:none}
  .scene-point{position:static}
  .scene-note{top:auto;bottom:150px}
  .hero-bottom{gap:12px}
  a>span[aria-hidden="true"],.demo-step>span[aria-hidden="true"],.phone-button>span[aria-hidden="true"],.newsletter-row button>span[aria-hidden="true"],.tiny-cross,.phone-brand>span{display:none}
  .practice-bottom a{padding-left:0}
}