/* =======================================================================
   Love Ritual — home page CSS
   1) Animation CSS for the weekly-ritual and daily-ritual SVG graphics
      (verbatim from the design canvas / gen_weekly.py, gen_daily2.py).
   2) Home-only layout: hero, chapter openers, step blocks, daily cards,
      badge-height overrides, closing CTA. FAQ list markup reuses
      .support-questions / .faq-list already defined in site.css.
   ======================================================================= */

/* Daily ritual graphics: one 6 s loop = the 96-second ritual played through in about 4 s, then a hold on the finished state. */
    .lr-anim .lr-fill, .lr-anim .lr-bar, .lr-anim .lr-pop, .lr-anim .lr-today, .lr-anim .lr-appear { transform-box: fill-box; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
    .lr-anim .lr-fill { transform-origin: left center; }
    .lr-anim .lr-bar { transform-origin: center center; animation-timing-function: ease-out; }
    .lr-anim .lr-pop, .lr-anim .lr-today { transform-origin: center center; animation-name: lr-today; animation-timing-function: ease-out; }
    .lr-anim .lr-pop { animation-name: none; }
    .lr-anim .lr-appear { animation-name: lr-appear; animation-timing-function: ease-out; }
    .lr-anim .lr-phase { animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; }
    .lr-anim .lr-draw { stroke-dasharray: 100; animation: lr-draw 6s linear infinite both; }
    .lr-anim .lr-fade { animation: lr-fade 6s linear infinite both; }
    @property --lrn { syntax: '<integer>'; initial-value: 0; inherits: false; }
    .lr-anim .lr-count { animation: lr-count 6s linear infinite; counter-reset: lrn var(--lrn); }
    .lr-anim .lr-count::after { content: counter(lrn); }
    .lr-anim .lr-hide { animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: both; opacity: 0; }
    @media (prefers-reduced-motion: reduce) { .lr-anim * { animation: none !important; } }
    @keyframes lr-today { 0%,75% { opacity: 0; transform: scale(.4); } 79%,100% { opacity: 1; transform: scale(1); } }
    @keyframes lr-appear { 0%,71% { opacity: 0; transform: translateY(8px); } 75%,100% { opacity: 1; transform: translateY(0); } }
    @keyframes lr-tf0 { 0%,0.00% { transform: scaleX(0); } 4.38%,100% { transform: scaleX(1); } }
    @keyframes lr-tf1 { 0%,4.38% { transform: scaleX(0); } 26.25%,100% { transform: scaleX(1); } }
    @keyframes lr-tf2 { 0%,26.25% { transform: scaleX(0); } 70.00%,100% { transform: scaleX(1); } }
    @keyframes lr-draw { 0% { stroke-dashoffset: 100; } 11.67%,100% { stroke-dashoffset: 0; } }
    @keyframes lr-fade { 0% { opacity: 0; } 11.67%,100% { opacity: .18; } }
    @keyframes lr-v0 { 0%,12.18% { transform: scaleY(.1); } 13.18%,100% { transform: scaleY(1); } }
    @keyframes lr-v1 { 0%,12.91% { transform: scaleY(.1); } 13.91%,100% { transform: scaleY(1); } }
    @keyframes lr-v2 { 0%,13.64% { transform: scaleY(.1); } 14.64%,100% { transform: scaleY(1); } }
    @keyframes lr-v3 { 0%,14.36% { transform: scaleY(.1); } 15.36%,100% { transform: scaleY(1); } }
    @keyframes lr-v4 { 0%,15.09% { transform: scaleY(.1); } 16.09%,100% { transform: scaleY(1); } }
    @keyframes lr-v5 { 0%,15.82% { transform: scaleY(.1); } 16.82%,100% { transform: scaleY(1); } }
    @keyframes lr-v6 { 0%,16.55% { transform: scaleY(.1); } 17.55%,100% { transform: scaleY(1); } }
    @keyframes lr-v7 { 0%,17.28% { transform: scaleY(.1); } 18.28%,100% { transform: scaleY(1); } }
    @keyframes lr-v8 { 0%,18.01% { transform: scaleY(.1); } 19.01%,100% { transform: scaleY(1); } }
    @keyframes lr-v9 { 0%,18.74% { transform: scaleY(.1); } 19.74%,100% { transform: scaleY(1); } }
    @keyframes lr-v10 { 0%,19.47% { transform: scaleY(.1); } 20.47%,100% { transform: scaleY(1); } }
    @keyframes lr-v11 { 0%,20.20% { transform: scaleY(.1); } 21.20%,100% { transform: scaleY(1); } }
    @keyframes lr-v12 { 0%,20.93% { transform: scaleY(.1); } 21.93%,100% { transform: scaleY(1); } }
    @keyframes lr-v13 { 0%,21.66% { transform: scaleY(.1); } 22.66%,100% { transform: scaleY(1); } }
    @keyframes lr-v14 { 0%,22.39% { transform: scaleY(.1); } 23.39%,100% { transform: scaleY(1); } }
    @keyframes lr-v15 { 0%,23.11% { transform: scaleY(.1); } 24.11%,100% { transform: scaleY(1); } }
    @keyframes lr-v16 { 0%,23.84% { transform: scaleY(.1); } 24.84%,100% { transform: scaleY(1); } }
    @keyframes lr-v17 { 0%,24.57% { transform: scaleY(.1); } 25.57%,100% { transform: scaleY(1); } }
    @keyframes lr-v18 { 0%,25.30% { transform: scaleY(.1); } 26.30%,100% { transform: scaleY(1); } }
    @keyframes lr-v19 { 0%,26.03% { transform: scaleY(.1); } 27.03%,100% { transform: scaleY(1); } }
    @keyframes lr-v20 { 0%,26.76% { transform: scaleY(.1); } 27.76%,100% { transform: scaleY(1); } }
    @keyframes lr-v21 { 0%,27.49% { transform: scaleY(.1); } 28.49%,100% { transform: scaleY(1); } }
    @keyframes lr-v22 { 0%,28.22% { transform: scaleY(.1); } 29.22%,100% { transform: scaleY(1); } }
    @keyframes lr-v23 { 0%,28.95% { transform: scaleY(.1); } 29.95%,100% { transform: scaleY(1); } }
    @keyframes lr-v24 { 0%,29.68% { transform: scaleY(.1); } 30.68%,100% { transform: scaleY(1); } }
    @keyframes lr-v25 { 0%,30.41% { transform: scaleY(.1); } 31.41%,100% { transform: scaleY(1); } }
    @keyframes lr-v26 { 0%,31.14% { transform: scaleY(.1); } 32.14%,100% { transform: scaleY(1); } }
    @keyframes lr-v27 { 0%,31.86% { transform: scaleY(.1); } 32.86%,100% { transform: scaleY(1); } }
    @keyframes lr-v28 { 0%,32.59% { transform: scaleY(.1); } 33.59%,100% { transform: scaleY(1); } }
    @keyframes lr-v29 { 0%,33.32% { transform: scaleY(.1); } 34.32%,100% { transform: scaleY(1); } }
    @keyframes lr-v30 { 0%,34.05% { transform: scaleY(.1); } 35.05%,100% { transform: scaleY(1); } }
    @keyframes lr-v31 { 0%,34.78% { transform: scaleY(.1); } 35.78%,100% { transform: scaleY(1); } }
    @keyframes lr-v32 { 0%,35.51% { transform: scaleY(.1); } 36.51%,100% { transform: scaleY(1); } }
    @keyframes lr-v33 { 0%,36.24% { transform: scaleY(.1); } 37.24%,100% { transform: scaleY(1); } }
    @keyframes lr-v34 { 0%,36.97% { transform: scaleY(.1); } 37.97%,100% { transform: scaleY(1); } }
    @keyframes lr-v35 { 0%,37.70% { transform: scaleY(.1); } 38.70%,100% { transform: scaleY(1); } }
    @keyframes lr-v36 { 0%,38.43% { transform: scaleY(.1); } 39.43%,100% { transform: scaleY(1); } }
    @keyframes lr-v37 { 0%,39.16% { transform: scaleY(.1); } 40.16%,100% { transform: scaleY(1); } }
    @keyframes lr-v38 { 0%,39.89% { transform: scaleY(.1); } 40.89%,100% { transform: scaleY(1); } }
    @keyframes lr-v39 { 0%,41.34% { transform: scaleY(.1); } 42.34%,100% { transform: scaleY(1); } }
    @keyframes lr-v40 { 0%,42.07% { transform: scaleY(.1); } 43.07%,100% { transform: scaleY(1); } }
    @keyframes lr-v41 { 0%,42.80% { transform: scaleY(.1); } 43.80%,100% { transform: scaleY(1); } }
    @keyframes lr-v42 { 0%,43.53% { transform: scaleY(.1); } 44.53%,100% { transform: scaleY(1); } }
    @keyframes lr-v43 { 0%,44.26% { transform: scaleY(.1); } 45.26%,100% { transform: scaleY(1); } }
    @keyframes lr-v44 { 0%,44.99% { transform: scaleY(.1); } 45.99%,100% { transform: scaleY(1); } }
    @keyframes lr-v45 { 0%,45.72% { transform: scaleY(.1); } 46.72%,100% { transform: scaleY(1); } }
    @keyframes lr-v46 { 0%,46.45% { transform: scaleY(.1); } 47.45%,100% { transform: scaleY(1); } }
    @keyframes lr-v47 { 0%,47.18% { transform: scaleY(.1); } 48.18%,100% { transform: scaleY(1); } }
    @keyframes lr-v48 { 0%,47.91% { transform: scaleY(.1); } 48.91%,100% { transform: scaleY(1); } }
    @keyframes lr-v49 { 0%,48.64% { transform: scaleY(.1); } 49.64%,100% { transform: scaleY(1); } }
    @keyframes lr-v50 { 0%,49.36% { transform: scaleY(.1); } 50.36%,100% { transform: scaleY(1); } }
    @keyframes lr-v51 { 0%,50.09% { transform: scaleY(.1); } 51.09%,100% { transform: scaleY(1); } }
    @keyframes lr-v52 { 0%,50.82% { transform: scaleY(.1); } 51.82%,100% { transform: scaleY(1); } }
    @keyframes lr-v53 { 0%,51.55% { transform: scaleY(.1); } 52.55%,100% { transform: scaleY(1); } }
    @keyframes lr-v54 { 0%,52.28% { transform: scaleY(.1); } 53.28%,100% { transform: scaleY(1); } }
    @keyframes lr-v55 { 0%,53.01% { transform: scaleY(.1); } 54.01%,100% { transform: scaleY(1); } }
    @keyframes lr-v56 { 0%,53.74% { transform: scaleY(.1); } 54.74%,100% { transform: scaleY(1); } }
    @keyframes lr-v57 { 0%,54.47% { transform: scaleY(.1); } 55.47%,100% { transform: scaleY(1); } }
    @keyframes lr-v58 { 0%,55.20% { transform: scaleY(.1); } 56.20%,100% { transform: scaleY(1); } }
    @keyframes lr-v59 { 0%,55.93% { transform: scaleY(.1); } 56.93%,100% { transform: scaleY(1); } }
    @keyframes lr-v60 { 0%,56.66% { transform: scaleY(.1); } 57.66%,100% { transform: scaleY(1); } }
    @keyframes lr-v61 { 0%,57.39% { transform: scaleY(.1); } 58.39%,100% { transform: scaleY(1); } }
    @keyframes lr-v62 { 0%,58.11% { transform: scaleY(.1); } 59.11%,100% { transform: scaleY(1); } }
    @keyframes lr-v63 { 0%,58.84% { transform: scaleY(.1); } 59.84%,100% { transform: scaleY(1); } }
    @keyframes lr-v64 { 0%,59.57% { transform: scaleY(.1); } 60.57%,100% { transform: scaleY(1); } }
    @keyframes lr-v65 { 0%,60.30% { transform: scaleY(.1); } 61.30%,100% { transform: scaleY(1); } }
    @keyframes lr-v66 { 0%,61.03% { transform: scaleY(.1); } 62.03%,100% { transform: scaleY(1); } }
    @keyframes lr-v67 { 0%,61.76% { transform: scaleY(.1); } 62.76%,100% { transform: scaleY(1); } }
    @keyframes lr-v68 { 0%,62.49% { transform: scaleY(.1); } 63.49%,100% { transform: scaleY(1); } }
    @keyframes lr-v69 { 0%,63.22% { transform: scaleY(.1); } 64.22%,100% { transform: scaleY(1); } }
    @keyframes lr-v70 { 0%,63.95% { transform: scaleY(.1); } 64.95%,100% { transform: scaleY(1); } }
    @keyframes lr-v71 { 0%,64.68% { transform: scaleY(.1); } 65.68%,100% { transform: scaleY(1); } }
    @keyframes lr-v72 { 0%,65.41% { transform: scaleY(.1); } 66.41%,100% { transform: scaleY(1); } }
    @keyframes lr-v73 { 0%,66.14% { transform: scaleY(.1); } 67.14%,100% { transform: scaleY(1); } }
    @keyframes lr-v74 { 0%,66.86% { transform: scaleY(.1); } 67.86%,100% { transform: scaleY(1); } }
    @keyframes lr-v75 { 0%,67.59% { transform: scaleY(.1); } 68.59%,100% { transform: scaleY(1); } }
    @keyframes lr-v76 { 0%,68.32% { transform: scaleY(.1); } 69.32%,100% { transform: scaleY(1); } }
    @keyframes lr-v77 { 0%,69.05% { transform: scaleY(.1); } 70.05%,100% { transform: scaleY(1); } }
    @keyframes lr-m78 { 0%,12.10% { transform: scaleY(.1); } 13.10%,100% { transform: scaleY(1); } }
    @keyframes lr-m79 { 0%,12.83% { transform: scaleY(.1); } 13.83%,100% { transform: scaleY(1); } }
    @keyframes lr-m80 { 0%,13.56% { transform: scaleY(.1); } 14.56%,100% { transform: scaleY(1); } }
    @keyframes lr-m81 { 0%,14.29% { transform: scaleY(.1); } 15.29%,100% { transform: scaleY(1); } }
    @keyframes lr-m82 { 0%,15.02% { transform: scaleY(.1); } 16.02%,100% { transform: scaleY(1); } }
    @keyframes lr-m83 { 0%,15.75% { transform: scaleY(.1); } 16.75%,100% { transform: scaleY(1); } }
    @keyframes lr-m84 { 0%,16.48% { transform: scaleY(.1); } 17.48%,100% { transform: scaleY(1); } }
    @keyframes lr-m85 { 0%,17.21% { transform: scaleY(.1); } 18.21%,100% { transform: scaleY(1); } }
    @keyframes lr-m86 { 0%,17.94% { transform: scaleY(.1); } 18.94%,100% { transform: scaleY(1); } }
    @keyframes lr-m87 { 0%,18.67% { transform: scaleY(.1); } 19.67%,100% { transform: scaleY(1); } }
    @keyframes lr-m88 { 0%,19.40% { transform: scaleY(.1); } 20.40%,100% { transform: scaleY(1); } }
    @keyframes lr-m89 { 0%,20.13% { transform: scaleY(.1); } 21.13%,100% { transform: scaleY(1); } }
    @keyframes lr-m90 { 0%,20.85% { transform: scaleY(.1); } 21.85%,100% { transform: scaleY(1); } }
    @keyframes lr-m91 { 0%,21.58% { transform: scaleY(.1); } 22.58%,100% { transform: scaleY(1); } }
    @keyframes lr-m92 { 0%,22.31% { transform: scaleY(.1); } 23.31%,100% { transform: scaleY(1); } }
    @keyframes lr-m93 { 0%,23.04% { transform: scaleY(.1); } 24.04%,100% { transform: scaleY(1); } }
    @keyframes lr-m94 { 0%,23.77% { transform: scaleY(.1); } 24.77%,100% { transform: scaleY(1); } }
    @keyframes lr-m95 { 0%,24.50% { transform: scaleY(.1); } 25.50%,100% { transform: scaleY(1); } }
    @keyframes lr-m96 { 0%,25.23% { transform: scaleY(.1); } 26.23%,100% { transform: scaleY(1); } }
    @keyframes lr-m97 { 0%,25.96% { transform: scaleY(.1); } 26.96%,100% { transform: scaleY(1); } }
    @keyframes lr-m98 { 0%,26.69% { transform: scaleY(.1); } 27.69%,100% { transform: scaleY(1); } }
    @keyframes lr-m99 { 0%,27.42% { transform: scaleY(.1); } 28.42%,100% { transform: scaleY(1); } }
    @keyframes lr-m100 { 0%,28.15% { transform: scaleY(.1); } 29.15%,100% { transform: scaleY(1); } }
    @keyframes lr-m101 { 0%,28.88% { transform: scaleY(.1); } 29.88%,100% { transform: scaleY(1); } }
    @keyframes lr-m102 { 0%,29.60% { transform: scaleY(.1); } 30.60%,100% { transform: scaleY(1); } }
    @keyframes lr-m103 { 0%,30.33% { transform: scaleY(.1); } 31.33%,100% { transform: scaleY(1); } }
    @keyframes lr-m104 { 0%,31.06% { transform: scaleY(.1); } 32.06%,100% { transform: scaleY(1); } }
    @keyframes lr-m105 { 0%,31.79% { transform: scaleY(.1); } 32.79%,100% { transform: scaleY(1); } }
    @keyframes lr-m106 { 0%,32.52% { transform: scaleY(.1); } 33.52%,100% { transform: scaleY(1); } }
    @keyframes lr-m107 { 0%,33.25% { transform: scaleY(.1); } 34.25%,100% { transform: scaleY(1); } }
    @keyframes lr-m108 { 0%,33.98% { transform: scaleY(.1); } 34.98%,100% { transform: scaleY(1); } }
    @keyframes lr-m109 { 0%,34.71% { transform: scaleY(.1); } 35.71%,100% { transform: scaleY(1); } }
    @keyframes lr-m110 { 0%,35.44% { transform: scaleY(.1); } 36.44%,100% { transform: scaleY(1); } }
    @keyframes lr-m111 { 0%,36.17% { transform: scaleY(.1); } 37.17%,100% { transform: scaleY(1); } }
    @keyframes lr-m112 { 0%,36.90% { transform: scaleY(.1); } 37.90%,100% { transform: scaleY(1); } }
    @keyframes lr-m113 { 0%,37.62% { transform: scaleY(.1); } 38.62%,100% { transform: scaleY(1); } }
    @keyframes lr-m114 { 0%,38.35% { transform: scaleY(.1); } 39.35%,100% { transform: scaleY(1); } }
    @keyframes lr-m115 { 0%,39.08% { transform: scaleY(.1); } 40.08%,100% { transform: scaleY(1); } }
    @keyframes lr-m116 { 0%,39.81% { transform: scaleY(.1); } 40.81%,100% { transform: scaleY(1); } }
    @keyframes lr-m117 { 0%,41.27% { transform: scaleY(.1); } 42.27%,100% { transform: scaleY(1); } }
    @keyframes lr-m118 { 0%,42.00% { transform: scaleY(.1); } 43.00%,100% { transform: scaleY(1); } }
    @keyframes lr-m119 { 0%,42.73% { transform: scaleY(.1); } 43.73%,100% { transform: scaleY(1); } }
    @keyframes lr-m120 { 0%,43.46% { transform: scaleY(.1); } 44.46%,100% { transform: scaleY(1); } }
    @keyframes lr-m121 { 0%,44.19% { transform: scaleY(.1); } 45.19%,100% { transform: scaleY(1); } }
    @keyframes lr-m122 { 0%,44.92% { transform: scaleY(.1); } 45.92%,100% { transform: scaleY(1); } }
    @keyframes lr-m123 { 0%,45.65% { transform: scaleY(.1); } 46.65%,100% { transform: scaleY(1); } }
    @keyframes lr-m124 { 0%,46.38% { transform: scaleY(.1); } 47.38%,100% { transform: scaleY(1); } }
    @keyframes lr-m125 { 0%,47.10% { transform: scaleY(.1); } 48.10%,100% { transform: scaleY(1); } }
    @keyframes lr-m126 { 0%,47.83% { transform: scaleY(.1); } 48.83%,100% { transform: scaleY(1); } }
    @keyframes lr-m127 { 0%,48.56% { transform: scaleY(.1); } 49.56%,100% { transform: scaleY(1); } }
    @keyframes lr-m128 { 0%,49.29% { transform: scaleY(.1); } 50.29%,100% { transform: scaleY(1); } }
    @keyframes lr-m129 { 0%,50.02% { transform: scaleY(.1); } 51.02%,100% { transform: scaleY(1); } }
    @keyframes lr-m130 { 0%,50.75% { transform: scaleY(.1); } 51.75%,100% { transform: scaleY(1); } }
    @keyframes lr-m131 { 0%,51.48% { transform: scaleY(.1); } 52.48%,100% { transform: scaleY(1); } }
    @keyframes lr-m132 { 0%,52.21% { transform: scaleY(.1); } 53.21%,100% { transform: scaleY(1); } }
    @keyframes lr-m133 { 0%,52.94% { transform: scaleY(.1); } 53.94%,100% { transform: scaleY(1); } }
    @keyframes lr-m134 { 0%,53.67% { transform: scaleY(.1); } 54.67%,100% { transform: scaleY(1); } }
    @keyframes lr-m135 { 0%,54.40% { transform: scaleY(.1); } 55.40%,100% { transform: scaleY(1); } }
    @keyframes lr-m136 { 0%,55.12% { transform: scaleY(.1); } 56.12%,100% { transform: scaleY(1); } }
    @keyframes lr-m137 { 0%,55.85% { transform: scaleY(.1); } 56.85%,100% { transform: scaleY(1); } }
    @keyframes lr-m138 { 0%,56.58% { transform: scaleY(.1); } 57.58%,100% { transform: scaleY(1); } }
    @keyframes lr-m139 { 0%,57.31% { transform: scaleY(.1); } 58.31%,100% { transform: scaleY(1); } }
    @keyframes lr-m140 { 0%,58.04% { transform: scaleY(.1); } 59.04%,100% { transform: scaleY(1); } }
    @keyframes lr-m141 { 0%,58.77% { transform: scaleY(.1); } 59.77%,100% { transform: scaleY(1); } }
    @keyframes lr-m142 { 0%,59.50% { transform: scaleY(.1); } 60.50%,100% { transform: scaleY(1); } }
    @keyframes lr-m143 { 0%,60.23% { transform: scaleY(.1); } 61.23%,100% { transform: scaleY(1); } }
    @keyframes lr-m144 { 0%,60.96% { transform: scaleY(.1); } 61.96%,100% { transform: scaleY(1); } }
    @keyframes lr-m145 { 0%,61.69% { transform: scaleY(.1); } 62.69%,100% { transform: scaleY(1); } }
    @keyframes lr-m146 { 0%,62.42% { transform: scaleY(.1); } 63.42%,100% { transform: scaleY(1); } }
    @keyframes lr-m147 { 0%,63.15% { transform: scaleY(.1); } 64.15%,100% { transform: scaleY(1); } }
    @keyframes lr-m148 { 0%,63.88% { transform: scaleY(.1); } 64.88%,100% { transform: scaleY(1); } }
    @keyframes lr-m149 { 0%,64.60% { transform: scaleY(.1); } 65.60%,100% { transform: scaleY(1); } }
    @keyframes lr-m150 { 0%,65.33% { transform: scaleY(.1); } 66.33%,100% { transform: scaleY(1); } }
    @keyframes lr-m151 { 0%,66.06% { transform: scaleY(.1); } 67.06%,100% { transform: scaleY(1); } }
    @keyframes lr-m152 { 0%,66.79% { transform: scaleY(.1); } 67.79%,100% { transform: scaleY(1); } }
    @keyframes lr-m153 { 0%,67.52% { transform: scaleY(.1); } 68.52%,100% { transform: scaleY(1); } }
    @keyframes lr-m154 { 0%,68.25% { transform: scaleY(.1); } 69.25%,100% { transform: scaleY(1); } }
    @keyframes lr-m155 { 0%,68.98% { transform: scaleY(.1); } 69.98%,100% { transform: scaleY(1); } }


/* =======================================================================
   Love Ritual — home page only
   Layout for hero, weekly-step chapter, daily-ritual chapter, and the
   badge-height overrides specific to this page. FAQ reuses .support-questions
   / .faq-list from site.css. Nav/footer/badges base rules also from site.css.
   Breakpoint: desktop >= 900px, mobile <= 899px (matches site.css).
   ======================================================================= */

/* -----------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------- */
.home-hero__inner {
  display: grid;
  /* the art takes the wider column: the headline is four short lines and never needs the room,
     while every extra pixel of art is a bigger phone */
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 40px;
}
.home-hero__copy { display: flex; flex-direction: column; gap: 32px; }
.home-hero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(48px, 6.5vw, 92px);
}
.home-hero__lede { font-size: var(--fs-lead); max-width: 560px; color: var(--body); font-weight: 500; }

.home-hero__art { position: relative; width: 100%; aspect-ratio: 600 / 640; }
.home-hero__shot { position: absolute; display: block; z-index: 1; }
.home-hero__shot--ritual {
  left: 48.67%; top: 6.88%; width: 43.67%;
  z-index: 1; transform: rotate(6deg);
  filter: drop-shadow(0 24px 40px rgba(46, 51, 39, .18));
}
.home-hero__shot--home {
  left: 16%; top: 1.25%; width: 50%;
  z-index: 2;
  filter: drop-shadow(0 28px 48px rgba(46, 51, 39, .22));
}
.home-hero__blurb {
  position: absolute;
  left: 0; top: 69.69%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 16px 16px;
  border-radius: 22px;
  background: var(--bg);
  box-shadow: 0 18px 40px rgba(46, 51, 39, .16), 0 2px 6px rgba(46, 51, 39, .08);
  max-width: calc(100% - 24px);
}
.home-hero__blurb img { width: 40px; height: 40px; flex: none; }
.home-hero__blurb-copy { display: flex; flex-direction: column; gap: 3px; }
.home-hero__blurb-title { font-size: var(--fs-h3); color: var(--ink); }
.home-hero__blurb-sub { font-size: var(--fs-meta); color: var(--muted-2); font-weight: 500; }

@media (max-width: 899px) {
  .home-hero__inner { display: flex; flex-direction: column; padding-top: 28px; padding-bottom: 8px; }
  .home-hero__copy { gap: 22px; }
  .home-hero__title { font-size: 56px; }
  .home-hero__lede { max-width: none; }
  .home-hero__art { aspect-ratio: 350 / 520; margin-top: 8px; }
  .home-hero__shot--ritual { left: 41.71%; top: 7.69%; width: 56%; filter: drop-shadow(0 18px 30px rgba(46, 51, 39, .18)); }
  .home-hero__shot--home { left: 8.57%; top: 1.15%; width: 67.43%; filter: drop-shadow(0 22px 36px rgba(46, 51, 39, .22)); }
  .home-hero__blurb {
    top: 71.54%;
    gap: 11px;
    padding: 13px 18px 13px 13px;
    border-radius: 18px;
    box-shadow: 0 14px 32px rgba(46, 51, 39, .16), 0 2px 6px rgba(46, 51, 39, .08);
  }
  .home-hero__blurb img { width: 32px; height: 32px; }
  .home-hero__blurb-copy { gap: 2px; }
}

/* -----------------------------------------------------------------------
   Chapter openers ("01 · Once a week", "02 · Every day")
   ----------------------------------------------------------------------- */
.home-chapter {
  margin-top: 72px;
  padding-top: 44px;
  border-top: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.home-chapter--daily { margin-top: 96px; }
.home-chapter__head { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; row-gap: 4px; }
.home-chapter__num,
.home-chapter__eyebrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 104px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.home-chapter__num--01 { color: #C9CDB9; }
.home-chapter__eyebrow--01 { color: var(--sage); }
.home-chapter__num--02 { color: #EBC3A0; }
.home-chapter__eyebrow--02 { color: var(--orange); }
.home-chapter__title { font-size: var(--fs-h2); max-width: 760px; }
.home-chapter__lede { font-size: var(--fs-lead); color: var(--body); max-width: 620px; }
.home-chapter__link { align-self: flex-start; font-size: var(--fs-body); font-weight: 700; color: var(--orange); }
@media (max-width: 899px) {
  .home-chapter { margin-top: 36px; padding-top: 28px; gap: 12px; }
  .home-chapter--daily { margin-top: 48px; }
  .home-chapter__num, .home-chapter__eyebrow { font-size: 44px; }
  .home-chapter__head { column-gap: 12px; }
}

/* -----------------------------------------------------------------------
   Step tag (small numbered pill + uppercase label) — steps and daily cards
   ----------------------------------------------------------------------- */
.step-tag {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.step-tag i {
  width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: inherit; color: var(--bg);
}
/* The daily cards are the smaller container (31px titles against 47px on the
   steps), so their longer tags ("By voice · when you're apart") sit one size
   down; at 20px they wrap between 900 and 1000px wide. Phones use that size
   for every tag: at the h3 phone size the daily tags wrap on a 360px screen. */
.daily-card .step-tag { font-size: var(--fs-lead); }
@media (max-width: 899px) {
  .step-tag { gap: 10px; font-size: var(--fs-lead); }
  .step-tag i { width: 30px; height: 30px; border-radius: 9px; }
}

/* -----------------------------------------------------------------------
   Weekly step blocks
   ----------------------------------------------------------------------- */
.steps { padding-top: 24px; display: flex; flex-direction: column; gap: 24px; }

.step {
  border-radius: 36px;
  /* 56 and 48, not 72 and 64: the graphic is drawn 552px wide, so a narrow
     column shrinks every label inside it. Even columns land it near 93% —
     close to its drawn size without dominating the text beside it. */
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.step__text { display: flex; flex-direction: column; gap: 18px; order: 1; }
.step__graphic { order: 2; }
.step--reverse .step__text { order: 2; }
.step--reverse .step__graphic { order: 1; }
.step__title { font-size: var(--fs-h1); }
.step__copy { font-size: var(--fs-body); color: var(--body); max-width: 460px; text-wrap: pretty; }

@media (max-width: 899px) {
  .steps { padding-top: 8px; gap: 14px; }
  .step {
    border-radius: 24px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .step__text { gap: 12px; order: 1 !important; }
  .step__graphic { order: 2 !important; }
  .step__copy { max-width: none; }
}

/* -----------------------------------------------------------------------
   Daily ritual chapter — Together / Voice cards
   ----------------------------------------------------------------------- */
.daily-cards { padding-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.daily-card {
  border-radius: 28px;
  /* 28, not 40: the card's inner width is what the ritual graphic is scaled to,
     and at 40 the graphic's labels rendered below 11px. */
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.daily-card__title { font-size: var(--fs-h2); }
.daily-card__copy { font-size: var(--fs-body); color: var(--body); }


@media (max-width: 899px) {
  .daily-cards { display: flex; flex-direction: column; gap: 14px; padding-top: 0; }
  .daily-card { border-radius: 22px; padding: 20px 14px 24px; gap: 14px; }
}

/* -----------------------------------------------------------------------
   Badge-height overrides for this page (canvas sets 72px on desktop
   everywhere; mobile keeps the site-wide 52px default except the closing
   CTA, which the canvas sets to 60px explicitly).
   ----------------------------------------------------------------------- */
@media (min-width: 900px) {
  .home-hero .badges img,
  .home-daily .badges img,
  .home-cta .badges img { height: 72px; }
}
@media (max-width: 899px) {
  .home-cta .badges { flex-direction: column; align-items: flex-start; gap: 12px; }
  .home-cta .badges img { height: 60px; }
}

/* -----------------------------------------------------------------------
   Closing CTA
   ----------------------------------------------------------------------- */
.home-cta {
  padding-top: 96px;
  padding-bottom: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}
.home-cta__title { font-size: var(--fs-h1); max-width: 760px; }
.home-cta__copy { font-size: var(--fs-body); color: var(--body); max-width: 480px; }
@media (max-width: 899px) {
  .home-cta { padding-top: 64px; padding-bottom: 40px; gap: 18px; }
}

/* -----------------------------------------------------------------------
   FAQ section spacing (list itself reuses .support-questions / .faq-list)
   ----------------------------------------------------------------------- */
.home-faq { padding-top: 96px; }
@media (max-width: 899px) { .home-faq { padding-top: 56px; } }

/* Citations under the first FAQ answer */
.home-faq__citations {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 899px) { .home-faq__citations { line-height: 1.55; } }

/* Larger phones and small tablets: keep the mobile column at phone width
   instead of stretching the art and cards to 850px. */
@media (max-width: 899px) {
  .home-hero__inner,
  .home-weekly > .container,
  .home-daily > .container,
  .home-faq > .container,
  .home-cta { max-width: 600px; }
}