/* =====================================================================
   CARDS THAT LOOK LIKE WHAT THEY ARE
   Three rules:
   1 Material: watercolor paper only for Amal Lana's own words (the teaching card, the carry deck, share cards).
   2 Tilt: one tilted object per screen (the card you are about to send), and none on touch screens.
   3 Type: display italic and script are her voice. Everyone else's words are in the reading face.
   ===================================================================== */
:root{--paper-img:url(/assets/brand/paper-hero.webp)}

/* ---------- the teaching, as one of her watercolor cards ---------- */
.tw-teach.wc-card{position:relative;overflow:hidden;text-align:center;padding:3.4rem 3rem 2.4rem!important;border:0!important;border-radius:16px!important;
  background:var(--paper-img) center/cover!important;box-shadow:0 2px 4px rgba(18,53,91,.06),0 24px 60px -18px rgba(18,53,91,.28)!important}
.wc-card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,rgba(150,202,223,.2),transparent 60%);pointer-events:none}
.wc-card>*{position:relative;z-index:1}
.wc-vine{position:absolute!important;left:-12px;top:-16px;width:74px;z-index:0!important;pointer-events:none}
.wc-lotus{position:absolute!important;right:10px;bottom:6px;width:112px;z-index:0!important;pointer-events:none}
.wc-card .lab{display:flex!important;justify-content:center;gap:.4rem;letter-spacing:.2em;padding:0 3rem}
.wc-card>p:first-of-type{font:italic 500 clamp(1.45rem,2.6vw,1.95rem)/1.42 var(--display)!important;color:var(--navy)!important;max-width:30rem;margin:1.2rem auto 1.4rem!important}
.wc-heart{display:flex;justify-content:center;align-items:center;gap:.6rem;margin:0 auto 1.4rem}
.wc-heart::before,.wc-heart::after{content:"";width:70px;height:1.5px;background:var(--gold)}
.wc-heart img{width:15px}
.wc-card .ls-welcome,.wc-card .ls-after{display:flex!important;flex-direction:column;align-items:center;margin:0 auto!important;background:none!important;box-shadow:none!important;border:0!important;padding:0!important}
.wc-card .ls-welcome .ls-btn{white-space:nowrap}
.wc-card .ls-wnote{display:block;margin-top:.6rem;font:italic 400 .95rem var(--body);color:#5d6b7a}
.wc-sig{display:flex;justify-content:center;align-items:baseline;gap:.5rem;margin:1.8rem 0 0!important}
.wc-sig b{font:400 2rem var(--script);color:var(--navy)}
.wc-sig em{font:500 1rem var(--naskh);font-style:normal;color:var(--teal)}

/* ---------- the reflection: a quiet journal page ---------- */
.jpage{margin-top:2.2rem;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:1.6rem 1.7rem 1.4rem}
.jpage .tw-refl,.jpage .journal{margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.jpage .tw-refl .lab{display:block}
.jpage .tw-refl ol{list-style:none;padding:0;margin:.7rem 0 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.jpage .tw-refl li{display:block!important;font:italic 400 1.18rem/1.55 var(--body)!important;color:var(--navy);padding:0 0 0 1rem!important;border-left:2px solid var(--gold)}
.jpage .tw-refl li::before{display:none!important}
.jpage .journal{position:relative}
.jpage .journal label{display:block;font:600 .8rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .3rem}
.jpage .journal label span{text-transform:none;letter-spacing:0;font-weight:400;color:#5d6b7a}
/* the writing sits on faint lines, exactly on them */
.jpage textarea{display:block;width:100%;min-height:170px;border:0!important;outline:0;border-radius:0!important;box-shadow:none!important;resize:vertical;padding:0 .2rem!important;
  font:400 1.1rem/34px var(--body)!important;color:#23364f;background:repeating-linear-gradient(transparent 0 33px,#dfe7ec 33px 34px) 0 0/100% 34px local!important}
.jpage textarea:focus{background-color:#fffdf8!important}
.jpage textarea::placeholder{color:#9aa6b2;font-style:italic}
.jpage .j-acts{display:flex;justify-content:flex-end!important;align-items:center;gap:.3rem!important;margin-top:.6rem}
.jpage .j-status{margin-right:auto;font:500 .82rem var(--ui);color:var(--teal-d)}

/* ---------- sending starts from the card itself (the one tilted object) ---------- */
.send-wrap.send-col{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.send-compact{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:2.6rem;align-items:center;background:none!important;border:0!important;box-shadow:none!important;padding:1rem 0!important}
.send-compact .send-fig{margin:0;transform:rotate(-2.5deg);transition:transform .35s ease;cursor:pointer}
.send-compact .send-fig:hover{transform:rotate(0) translateY(-4px)}
.send-compact .send-fig img{border-radius:10px;box-shadow:0 2px 6px rgba(18,53,91,.1),0 26px 50px -18px rgba(18,53,91,.4)}
.send-compact .send-panel{background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.send-compact:not(.open) .send-panel>label.send-l,.send-compact:not(.open) .send-panel>p.send-l,.send-compact:not(.open) .preview{display:none!important}
.send-compact .send-lede{font:400 1.05rem/1.55 var(--body);color:#3b4a5a;margin:.3rem 0 1rem}
.send-compact .add-note{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;padding:.4rem 0;margin:0 0 .6rem;font:600 .95rem var(--ui);color:var(--go,#0f6d83);cursor:pointer}
.send-compact.open .add-note{display:none}
.send-compact .send-hint{display:none}
.send-compact .send-build{text-align:left}
@media(max-width:760px){.send-compact{grid-template-columns:1fr;gap:1.2rem}.send-compact .send-fig{max-width:240px;margin:0 auto}}

/* ---------- words to carry: her words, so on watercolor paper; cards sit straight ---------- */
.aff-carry.deck{position:relative;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin-top:3rem}
.deck .lab{display:block;text-align:center;margin-bottom:.4rem}
.deck-hint{text-align:center;font:500 .82rem var(--ui);color:#5d6b7a;margin:0 0 .4rem}
.deck .aff-list{display:flex!important;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:1rem .4rem 1.4rem!important;margin:0 -.4rem!important;scrollbar-width:none;list-style:none}
.deck .aff-list::-webkit-scrollbar{display:none}
.deck .aff-list li{flex:0 0 200px;min-height:240px;display:flex!important;flex-direction:column;justify-content:space-between;scroll-snap-align:start;padding:1.4rem 1.1rem .9rem!important;border:0!important;border-radius:12px;
  background:var(--paper-img) center/cover;box-shadow:0 2px 4px rgba(18,53,91,.06),0 14px 30px -14px rgba(18,53,91,.3);transition:transform .25s ease,box-shadow .25s}
.deck .aff-list li:nth-child(3n){background:linear-gradient(rgba(186,214,230,.3),rgba(186,214,230,.3)),var(--paper-img) center/cover}
.deck .aff-list li:nth-child(4n){background:linear-gradient(rgba(205,222,196,.32),rgba(205,222,196,.32)),var(--paper-img) center/cover}
.deck .aff-list li:hover,.deck .aff-list li:focus-within{transform:translateY(-4px);box-shadow:var(--lift)}
.deck .aff-line{font:italic 500 1.1rem/1.45 var(--display)!important;color:var(--navy);text-align:center;margin:auto 0!important}
.deck .aff-meta{display:flex;justify-content:space-between;align-items:center;margin-top:1rem!important;font:500 .8rem var(--ui);color:#5d6b7a}
/* a small heart button, not another navy pill */
.deck .aff-send{width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%;border:1.5px solid var(--edge);background:rgba(255,255,255,.85);color:var(--navy);font-size:0;cursor:pointer;transition:all .2s}
.deck .aff-send::before{content:"♥";font-size:1rem;color:var(--gold)}
.deck .aff-send:hover{border-color:var(--navy);background:#fff}
.deck-arrows{position:absolute;right:0;top:0;display:flex;gap:.4rem}
.deck-arrows button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--edge);background:#fff;color:var(--navy);font-size:1rem;cursor:pointer}
.deck-arrows button:hover{border-color:var(--navy)}
@media(hover:none),(max-width:760px){.deck-arrows{display:none}}
.deck .aff-list{-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
.deck>.fine{text-align:center}

/* ---------- the path of thirteen: easy to tap ---------- */
.path a{position:relative}
.path a::after{content:"";position:absolute;inset:-14px -4px}

/* ---------- Keep going, with pictures ---------- */
.next-tile{position:relative;overflow:hidden}
.next-art{height:120px;margin:-1.2rem -1.25rem .8rem;position:relative;overflow:hidden;background:var(--mist)}
.next-art img{position:absolute;width:44%;left:50%;top:14px;transform:translateX(-50%);border-radius:6px;box-shadow:0 10px 22px -8px rgba(18,53,91,.4);transition:transform .35s}
.next-art img+img{transform:translateX(-25%) translateY(8px);opacity:.95}
.next-tile:hover .next-art img:first-child{transform:translateX(-50%) translateY(-4px)}
.next-art.wave{display:grid;place-items:center}
.wave-bars{display:flex;gap:5px;align-items:center;height:60px}
.wave-bars b{width:5px;border-radius:3px;background:var(--teal);opacity:.8;height:14px}
.next-tile:hover .wave-bars b,.way:hover .wave-bars b{animation:bar 1.3s ease-in-out infinite}
@keyframes bar{0%,100%{height:12px}50%{height:42px}}
.next-tile .next-ic{display:none}
.next-t{font:700 1.1rem/1.3 var(--display)!important;font-style:normal!important}
.next-t.is-title{font:italic 500 1.2rem/1.25 var(--display)!important}
@media(max-width:760px){
  .next-tile{flex-direction:row!important;align-items:center;padding:0!important;gap:0!important;min-height:96px}
  .next-art{flex:0 0 104px;height:auto;align-self:stretch;margin:0!important}
  .next-art img{width:62px;top:12px}
  .next-tile>div{padding:.9rem 1rem}
}

/* ---------- home · the Ways in, as postcards (white, straight, one dark picture) ---------- */
.ways .way{overflow:hidden;padding-top:0!important;background:#fff!important}
.ways .way:hover{transform:translateY(-4px)!important;box-shadow:var(--lift)}
.pc-art{display:block;height:118px;margin:0 -1.3rem .9rem;position:relative;overflow:hidden;background:var(--mist);border-bottom:1px solid var(--line)}
.pc-art img{position:absolute;left:50%;top:16px;width:84px;transform:translateX(-62%);border-radius:5px;box-shadow:0 10px 20px -8px rgba(18,53,91,.4);transition:transform .35s}
.pc-art img+img{transform:translateX(-22%) translateY(8px)}
.way:hover .pc-art img:first-child{transform:translateX(-62%) translateY(-4px)}
.pc-art.photo{background:url(/assets/brand/spring-pool.webp) center/cover}
.pc-art.listen{display:grid;place-items:center}
/* Daily: today's line, on a small watercolor card (her words) */
.pc-art.daily{display:grid;place-items:center}
.pc-line{width:62%;padding:.7rem .8rem;border-radius:6px;background:var(--paper-img) center/cover;box-shadow:0 10px 20px -10px rgba(18,53,91,.4);font:italic 500 .86rem/1.35 var(--display);color:var(--navy);text-align:center}
/* Find your water: the one dark picture, a moon over water */
.pc-art.moon{background:linear-gradient(180deg,#1b3350 0%,#2c5874 62%,#3f7a93 62.5%,#2f6680 100%)}
.pc-moon{position:absolute;left:50%;top:22px;width:42px;height:42px;margin-left:-21px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fbf4e2,#e9dcb8);box-shadow:0 0 26px 6px rgba(251,244,226,.35)}
.pc-glint{position:absolute;left:50%;top:80px;width:70px;height:3px;margin-left:-35px;border-radius:2px;background:rgba(251,244,226,.55);box-shadow:0 8px 0 -.5px rgba(251,244,226,.35),0 16px 0 -1px rgba(251,244,226,.2)}
.pc-art.cal{display:grid;place-items:center}
.pc-cal{width:96px;background:#fff;border-radius:8px;box-shadow:0 8px 18px -8px rgba(18,53,91,.4);overflow:hidden;text-align:center;font:600 .7rem var(--ui);color:var(--navy)}
.pc-cal b{display:block;background:var(--teal);color:#fff;padding:.25rem;letter-spacing:.12em;font-size:.6rem}
.pc-cal span{display:block;font:600 1.7rem/1.4 var(--ui);padding:.1rem 0 .2rem}
.way-ico{display:none!important}
.way-season{padding-top:1.3rem!important}

/* ---------- home · reviews: clean notes, readers' words in the reading face ---------- */
.voice{background:#fff!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:0 2px 4px rgba(18,53,91,.05),0 16px 34px -18px rgba(18,53,91,.3)!important}
.voice:hover{transform:translateY(-4px);box-shadow:var(--lift)!important}
.voice .q{font:400 1.02rem/1.6 var(--body)!important;font-style:normal!important;color:#2a3d55}
.voice .q::before{content:"“";display:block;font:400 3.2rem/0.6 var(--display);color:var(--gold);margin:.5rem 0 .4rem}
.voice .v-title{font:600 1rem var(--ui)!important;font-style:normal!important}
.voice .who b{font:600 .95rem var(--ui)!important;color:var(--navy)}

/* ---------- touch screens: nothing stays tilted; a gentle press instead ---------- */
@media(hover:none){
  .send-compact .send-fig{transform:none}
  .way:active,.next-tile:active,.voice:active,.deck .aff-list li:active{transform:scale(.985)}
}
@media(max-width:600px){
  .tw-teach.wc-card{padding:3rem 1.3rem 2rem!important}
  .wc-vine{width:56px}
  .wc-card .lab{padding:0 2rem;flex-wrap:wrap}
  .wc-lotus{width:80px}
  .jpage{padding:1.3rem 1.1rem 1.2rem}
}
@media(prefers-reduced-motion:reduce){.wave-bars b{animation:none!important}}
.pc-art.photo{background-size:170% auto;background-position:20% 55%}
.addcal summary.pill-line::after{content:none!important}
.voice .q::before{content:none!important}

/* =====================================================================
   SPACING: buttons never crowd the words above them
   24px between content and the buttons that follow it · 16px inside cards and under a field ·
   12px between stacked buttons · 16px between a button and its small print
   ===================================================================== */
main .ctas,main .hl-ctas,main .next-foot,main .wd-acts{margin-top:1.5rem!important}
main p+.pill,main div+.pill,main blockquote+.pill,main span+.pill,main .verse+.pill,main .verse+*>.pill,
main p+a.go,main p+.lsn,main .lede+.lsn,main .lede+.ctas,main .wc-hint+.pill{margin-top:1.5rem!important}
main .f-meta+.pill,main .fmt .pill,main .rs-acts,main .rw-acts{margin-top:1rem!important}
main textarea+.j-acts,.jpage .j-acts,main .send-build+.send-alt,main .send-more .send-alt,main select~.pill{margin-top:1rem!important}
main .send-more{margin-top:.6rem}
.bld-step+.send-main,.bld-sec .send-main{margin-top:.6rem!important}
.bld-how{margin-top:.6rem!important}
main .pill+.fine,main .ctas+.fine,main .send-main+.send-hint{margin-top:1rem!important}
main .rs-rail+.ctas,main .rs-rail+*>.pill,main .rs-rail~.rs-tc-acts{margin-top:1.5rem!important}
.hero .hf-links{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.4rem;margin-top:1.1rem}
.hero .hero-fine{line-height:1.7}
@media(max-width:900px){.hero .hf-links{flex-direction:column;gap:.9rem;width:100%;margin-top:1.3rem}}
/* stacked buttons on phones: an even 12px apart */
@media(max-width:700px){main .ctas{gap:.75rem!important}main .wd-acts>*+*{margin-top:.75rem!important}}
/* the buy bar: a soft fade so the page doesn't look cut off behind it */
@media(max-width:900px){.buybar{box-shadow:0 -14px 22px -6px rgba(251,247,238,.95)!important}}

/* =====================================================================
   SLIDERS: "Previous · the current · Next"
   Words with arrows instead of circles, and a thin line of water with a drop that shows where you are.
   ===================================================================== */
.rv-ctrl,.rail-btns,.deck-arrows,.rs-tc-nav,#tc-prev,#tc-next{display:none!important}
.flowctl{display:flex;align-items:center;justify-content:center;gap:1.2rem;max-width:520px;margin:1.6rem auto 0}
.flowctl[hidden]{display:none}
.fc-btn{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.3rem .2rem;border:0;background:none;font:600 .95rem var(--ui);color:var(--go,#0f6d83);cursor:pointer;white-space:nowrap;transition:color .2s,opacity .2s}
.fc-btn .fc-a{display:inline-block;transition:transform .2s}
.fc-prev:hover .fc-a{transform:translateX(-4px)}.fc-next:hover .fc-a{transform:translateX(4px)}
.fc-btn:disabled{opacity:.32;cursor:default}
.fc-btn:disabled .fc-a{transform:none!important}
.fc-btn:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:6px}
.fc-line{position:relative;flex:1 1 auto;min-width:90px;height:22px}
.fc-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--teal-l);opacity:.55}
.fc-fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--teal);width:0;transition:width .35s ease}
.fc-drop{position:absolute;top:50%;width:14px;height:20px;margin:-11px 0 0 -7px;left:0;transition:left .35s ease;filter:drop-shadow(0 2px 3px rgba(18,53,91,.25))}
.fc-count{font:500 .82rem var(--ui);color:#5d6b7a;min-width:3.4em;text-align:center}
.rv-slider .flowctl,.rail-wrap .flowctl{margin-top:1.4rem}
@media(max-width:600px){.flowctl{gap:.8rem}.fc-btn .fc-w{display:none}.fc-btn{min-width:44px;justify-content:center;font-size:1.1rem}}
@media(prefers-reduced-motion:reduce){.fc-fill,.fc-drop{transition:none}}
.way .addcal{margin-top:1rem!important}
main .pill+.pill{margin-top:0}
@media(max-width:700px){main .kit-row,main .dl-row,main .pill-row{gap:.75rem!important}}
main :has(> .pill + .pill){row-gap:.75rem}
/* sliders land cleanly on a card, never halfway */
.rv-track{scroll-snap-type:x mandatory!important;scroll-padding-left:0!important}
.rv-track>*{scroll-snap-align:start!important}
.voice .who{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.15rem .4rem;text-align:center}
@media(max-width:900px){.hero .hf-links{margin-top:.6rem}}
/* the sound-wave pictures have a shape even when still */
.wave-bars b:nth-child(4n+1){height:12px}.wave-bars b:nth-child(4n+2){height:26px}.wave-bars b:nth-child(4n+3){height:38px}.wave-bars b:nth-child(4n){height:20px}

/* ===== for readers: the door on the home page, the review ask, After the book ===== */
.hero-after{margin-top:1rem}
.hero-after a{font:600 1rem var(--ui)}
@media(max-width:900px){.hero-after{text-align:center}}
.review-cta{background:var(--gold-bg)!important;border:1px solid #ead9b4!important;border-radius:18px!important;padding:1.6rem 1.8rem!important;display:flex!important;align-items:center;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap}
.review-cta p{margin:0;font:italic 500 1.35rem/1.3 var(--display);color:var(--navy);max-width:34rem}
.review-cta .rc-k{display:block;font:600 .75rem var(--ui);font-style:normal;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.35rem}
.review-cta small{display:block;margin-top:.45rem;font:400 .98rem/1.5 var(--body);font-style:normal;color:#3b4a5a}
@media(max-width:700px){.review-cta{flex-direction:column;align-items:stretch;text-align:center}.review-cta .pill{align-self:center}}
.after-review{padding-top:2rem!important;padding-bottom:2rem!important}
.after-review .narrow{background:var(--gold-bg);border:1px solid #ead9b4;border-radius:18px;padding:1.8rem 1.6rem}
.ar-k{font:600 .75rem var(--ui);letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 .4rem}
.ar-t{font:italic 500 1.35rem/1.4 var(--display);color:var(--navy);max-width:32rem;margin:0 auto}
.answers{max-width:var(--read,680px);margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.ans-count{text-align:center;font:500 .9rem var(--ui);color:#5d6b7a;margin:0}
.ans-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1.4rem 1.5rem}
.ans-card h3{margin:.3rem 0 .6rem;font:italic 500 1.35rem var(--display)}
.ans-card h3 a{color:var(--navy);text-decoration:none}
.ans-q{list-style:none;margin:0 0 .9rem;padding:0 0 0 .9rem;border-left:2px solid var(--gold);font:italic 400 1rem/1.5 var(--body);color:#3b4a5a}
.ans-a{font:400 1.08rem/1.65 var(--body);color:#23364f;margin:0 0 .6rem;white-space:normal}
.ans-tools{margin-top:.6rem!important}
.ans-empty{text-align:center;background:#fff;border:1px dashed var(--edge);border-radius:16px;padding:1.8rem 1.4rem}
.ans-empty p{font:400 1.05rem/1.6 var(--body);color:#3b4a5a;max-width:30rem;margin:0 auto 1.2rem}
.tool[data-j=print]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E")}
.tool[data-j=email]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
@media print{body.print-answers>*:not(main){display:none!important}body.print-answers main>*:not(#answers){display:none!important}body.print-answers .ans-tools,body.print-answers .go{display:none!important}}

/* ===== all thirteen: a moment to mark it ===== */
.path.whole a{border-color:var(--teal);background:var(--teal);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;animation:ripple 2.4s ease-in-out infinite}
.path.whole a:nth-child(odd){animation-delay:.2s}.path.whole a:nth-child(3n){animation-delay:.4s}
@keyframes ripple{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.complete{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.25rem;background:rgba(18,53,91,.35);backdrop-filter:blur(3px);opacity:0;transition:opacity .4s}
.complete.in{opacity:1}.complete.out{opacity:0}
.cp-card{position:relative;overflow:hidden;max-width:520px;width:100%;text-align:center;padding:3rem 2rem 2.2rem;border-radius:22px;background:var(--paper-img) center/cover;box-shadow:0 30px 80px -20px rgba(12,38,68,.5);transform:translateY(14px);transition:transform .5s ease}
.complete.in .cp-card{transform:none}
.cp-card .script{font-size:2.6rem}
.cp-card h2{font:700 1.7rem/1.25 var(--display);color:var(--navy);margin:.2rem 0 .8rem}
.cp-card p{font:400 1.05rem/1.6 var(--body);color:#3b4a5a;max-width:26rem;margin:0 auto}
.cp-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.2rem;margin-top:1rem!important}
.cp-x{position:absolute;top:.8rem;right:.8rem;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.7);font-size:1.3rem;color:var(--navy);cursor:pointer}
.cp-vine{position:absolute;left:-10px;top:-12px;width:70px;pointer-events:none}
.cp-lotus{position:absolute;right:8px;bottom:6px;width:96px;pointer-events:none;opacity:.9}
@media(prefers-reduced-motion:reduce){.path.whole a{animation:none}.cp-card,.complete{transition:none}}
#ls-page{min-height:100vh}
body>.season-band,main~.season-band{margin:0}

/* ===== phones: a shorter home page, nothing important removed ===== */
@media(max-width:600px){
  /* today's card already shows its words on the card itself */
  .today-home .today blockquote{display:none}
  .today-home .today .src{margin-top:.6rem}
  /* the postcards: smaller pictures, same feeling */
  .ways .pc-art{height:84px}
  .ways .pc-art img{width:60px;top:10px}
  .ways .pc-cal{transform:scale(.8)}
  .ways .pc-moon{top:12px;width:34px;height:34px;margin-left:-17px}
  .ways .pc-glint{top:56px}
  .pc-line{font-size:.7rem!important;padding:.4rem .5rem!important}
  /* the book stands smaller in its water */
  #book .world .cover{max-width:150px!important}
}
@media(max-width:600px){.verse.folded{max-height:19rem}}
.cp-card{padding:3rem 2.8rem 2.2rem}.cp-vine{width:52px;left:-8px;top:-10px}.cp-card h2{text-wrap:balance}@media(max-width:600px){.cp-card{padding:2.8rem 1.6rem 2rem}}
/* ---- review fixes ---- */
/* the hero chip already carries its round play mark; the old triangle stays off */
.lsn.hf-listen::before{content:none}
/* short laptop screens (1366×768 and the like): Buy and Listen stay inside the first screen */
@media(min-width:901px) and (max-height:960px){
  .hero-copy{padding-top:2.4rem;padding-bottom:4rem}
  .hero .script{font-size:clamp(3.6rem,6vw,4.6rem);margin-top:.1rem}
  .hero .hfu{margin-top:.1rem}
  .hero-who{margin-top:.4rem;font-size:.98rem}
  .hero .divider{margin:.7rem 0}
  .hero h1{font-size:clamp(1.8rem,2.6vw,2.3rem);margin:.1rem 0 .5rem}
  .hero h1 .kicker{margin-bottom:.2rem}
  .hero .lede{font-size:.98rem;margin-bottom:.9rem}
  .hero-fine{margin-top:.6rem}
  .hero-after{margin-top:.6rem}
  .hero-trust{margin-top:.6rem}
}
h1.env-k{font-weight:400;letter-spacing:0}