/* homepage layout; type sizes matched to the test redesign (bumped ~20%) */
  /* 12px uppercase + tracked + italic is the hardest combination to read; at
     13px with lighter tracking it stays a quiet label and becomes legible.
     Tabular figures stop the live count nudging the line as it updates. */
  .hero .eyebrow{ margin-top:4px; font-family:var(--font-body); font-size:var(--text-label);
    font-style:italic; letter-spacing:.11em; font-variant-numeric:tabular-nums }
  /* small amber four-point sparkle before the live counter. Matches the section
     eyebrow and the card prayer-count marker (static glow, only the flame moves). */
  .hero .eyebrow::before{
    content:''; display:inline-block; width:9px; height:9px; background:var(--accent);
    clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter:drop-shadow(0 0 6px rgba(232,165,75,.75));
    margin-right:9px; vertical-align:middle; position:relative; top:-1px;
  }
  /* Hero spacing is tightened so the display type can be large and the CTA
     still lands above the fold. The h1's inherited 0.3em bottom margin was
     26px at 88px — the single biggest gap in the stack. */
  /* Sized to hold the headline to TWO lines at every width. The line count is
     set by the ratio of column width to font size: measured, it needs roughly
     8.3 and breaks to three lines below about 8.0 (652/80 holds two, 497/62
     does not). 6.6vw keeps the ratio above 8.3 as the column narrows, and the
     5rem cap covers wide screens where the hero stops growing at 1100px. */
  .hero h1{ margin:10px 0 .08em; font-size:clamp(2.5rem, 6.6vw, 5.1rem);
    font-weight:600; line-height:1.06; letter-spacing:-.014em; text-wrap:balance;
    color:var(--text-mid) }
  /* Narrowest phones: shrink the title a little so the forced <br> two-line
     split still fits each half on ONE line (a big title otherwise wraps each
     half, giving four lines at ~320px). */
  /* Mobile: the title fills ~90% of the screen width (kept to two lines by the
     <br>); the trust line is nudged smaller and tighter to hold one line. */
  @media (max-width:767px){
    .hero{ padding-inline:12px; margin-top:28px }  /* wider title; ~half the section top gap */
    /* Elder-first sizes: large and screen-aware (vw), with rem floor/cap so the
       phone's Larger Text setting still scales them and nothing overflows. */
    .hero h1{ font-size:clamp(2.4rem, 12.3vw, 3.4rem) }
  }
  /* "unique" as a real semibold italic (italic-600 now loaded in the font link). */
  .hero h1 em{ font-style:italic; font-weight:600 }
  .hero canvas{ width:240px; height:300px; margin-top:4px }
  /* The hero subtitle is a real <h2> at the H2 display size. It stays clearly
     under the H1 through colour and weight, not size alone: 400 vs 500, and the
     softer #D6DCD4 against the H1's cream. Measure is capped in ch so the line
     length holds as the size scales. */
  /* The subtitle is a real <h2>, but it is deliberately NOT the display serif:
     the body sans at a small size keeps it a quiet deck under the headline
     instead of a second competing title. Hierarchy comes from family, size and
     colour, so the H1 stays unmistakably the lead. */
  .hero .hero-sub{
    margin:14px auto 0; max-width:34ch; color:var(--text-hi); text-align:center;
    font-family:var(--font-body); font-weight:400; font-style:normal;
    font-size:1.45rem; line-height:1.5; letter-spacing:normal; text-wrap:wrap;
  }
  /* Statements wrap greedily (a longer first line, a shorter second) so the
     two-line statement transitions naturally from the one-line ones. */
  /* Deck size (hero-sub + other lead paragraphs) is normalized once, at the end
     of this file — see "HOMEPAGE TYPE SCALE". */
  .hero .hero-sub a{ color:#8A968C; text-decoration:underline dotted; text-underline-offset:3px }
  /* Each statement sits on its own line, with a little air between them. This is
     the reduced-motion / no-JS fallback: all three read at once. */
  .hero .hero-sub span{ display:block }
  .hero .hero-sub span + span{ margin-top:.4em }
  /* Cycling (JS adds .cycling): the three statements fade one into the next in
     the same place. A reserved height (measured by JS) holds the block steady so
     nothing below it moves. Each statement is vertically centred in that space. */
  /* The absolute statements leave no in-flow content, so pin the width (the base
     max-width) or the grid item would collapse to nothing on desktop. */
  .hero .hero-sub.cycling{ position:relative; width:min(34ch, 100%) }
  /* Each statement fills the reserved block and is vertically centred (grid), so
     the transform is free for the roll: the current line rolls UP and out while
     the next rolls IN from below. */
  .hero .hero-sub.cycling span{ position:absolute; inset:0; margin:0;
    display:grid; align-content:center;
    opacity:0; transform:translateY(0.9em);
    transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
  .hero .hero-sub.cycling span.is-on{ opacity:1; transform:translateY(0) }
  .hero .hero-sub.cycling span.is-out{ opacity:0; transform:translateY(-0.9em) }
  @media (prefers-reduced-motion:reduce){
    .hero .hero-sub.cycling span{ transition:opacity .4s ease; transform:none }
    .hero .hero-sub.cycling span.is-on{ transform:none }
    .hero .hero-sub.cycling span.is-out{ transform:none }
  }
  .hero-actions{ margin-top:60px; display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:400px }
  .hero-actions .btn{ margin-top:0; width:fit-content }  /* fit-content, centered */
  /* Secondary action is a quiet text link, not a button. */
  .hero-actions .hero-link{ display:inline-flex; align-items:center; min-height:44px;
    color:var(--text-mid); text-decoration:none; font-family:var(--font-body); font-weight:500; font-size:1.2rem;
    transition:color .18s ease }
  .hero-actions .hero-link:hover{ color:var(--text-hi) }
  /* Mobile: the secondary link sits just under the subtitle (visually part of
     it), with the primary CTA set apart below it. */
  @media (max-width:767px){
    .hero-actions{ margin-top:18px }
    .hero-actions .hero-link{ order:-1; font-size:clamp(1.3rem, 4vw, 1.5rem) }
    .hero-actions .btn-primary{ margin-top:34px }
    /* Elder-first: larger buttons on the homepage. */
    .btn{ font-size:clamp(1.3rem, 4vw, 1.5rem) }
  }
  /* Trust microcopy under the CTA. Exactly the hero eyebrow's type style
     (Figtree italic, tracked .11em, --text-label, tabular). Only the eyebrow's
     sparkle sets the two apart, not the text. */
  .hero .trust{ margin-top:36px; line-height:1.6; font-family:var(--font-body);
    font-size:var(--text-label); font-style:italic; letter-spacing:.11em;
    font-variant-numeric:tabular-nums; text-wrap:balance }
  .hero .live-counter{ margin-top:18px; color:var(--text-mid) }

  /* Desktop/large: split hero — text left, candle right. Mobile keeps the
     approved single-column order (flame between headline and body).
     grid-auto-rows:min-content keeps the left text a compact, vertically
     centred stack instead of the spanning candle inflating the rows. */
  @media (min-width:768px){
    .hero{
      display:grid; grid-template-columns:1.45fr .8fr; column-gap:48px;
      align-content:center; grid-auto-rows:min-content; justify-items:start; max-width:var(--wall-max);
    }
    .hero > *{ grid-column:1 }
    .hero .eyebrow, .hero h1, .hero .hero-sub, .hero .trust{ text-align:left }
    /* Desktop/large only: more air around the large (80px) title so the eyebrow,
       subtitle and CTA are not crowded against it. */
    .hero h1{ margin-top:28px }
    .hero .hero-sub{ margin-left:0; margin-top:30px }
    .hero-actions{ margin-top:80px }
    .hero .trust{ margin-top:40px }
    .hero canvas{ grid-column:2; grid-row:1 / span 5; align-self:center; justify-self:center; margin:0; width:300px; height:375px }
    .hero-actions{ flex-direction:row; width:auto; max-width:none }
    .hero-actions .btn{ width:auto; padding:0 28px }
  }

  .wall-preview h2{ font-size:var(--h2) }
  .wall-preview .body-text{ margin-top:16px; font-size:1.45rem }   /* deck role */
  .wall-preview .wall-grid{ margin-top:32px } /* small fixed cards, wrapped */
  .wall-preview .btn{ margin-top:48px }

  /* Wider section on desktop so more of the same small cards fit per row. */
  @media (min-width:768px){
    .wall-preview{ max-width:var(--wall-max) }
  }

  .easy-steps h2{ font-size:var(--h2) }
  /* Mobile: vertical 1-2-3. Desktop: horizontal three-across. Text only, no icons. */
  .easy-steps ol{ margin-top:44px; list-style:none; display:flex; flex-direction:column; gap:34px; align-items:center; width:100% }
  /* width:100% makes each column a definite width so the demos below inherit a
     fixed width. Without it the li shrink-wraps to its content, so the typing
     field and the toggle (whose text length changes) kept resizing and jumping
     horizontally on mobile. */
  .easy-steps li{ display:flex; flex-direction:column; align-items:center; width:100% }
  /* A heading must not inherit body line-height: at 1.6 these read as two
     loose sentences. 1.18 + balance keeps each title a tight, even block. */
  /* Step titles now use the .body-text (sans deck) look; pin the size to the
     body-text scale so the browser's default <h3> size does not inflate it. */
  /* Step titles carry an accented style: the Cormorant display serif in the
     bright text colour, so each step reads as a small heading rather than a
     line of body copy. Sized below the section H2 so the section title leads. */
  .easy-steps .step-title{ margin:0; font-family:var(--font-display); font-weight:600;
    color:var(--text-hi); font-size:clamp(1.5rem, 2.6vw, 1.9rem); line-height:1.2 }
  /* Short description under each step title, above the step's visual. */
  .easy-steps .step-desc{ margin:8px 0 0; font-size:var(--size-body); line-height:1.55;
    color:var(--text-mid); text-align:center; max-width:34ch }
  /* Step text is the deck role on mobile; normalized at the end of this file. */
  /* Step 2 verb adapts to input (Click / Tap) via the shared .v-click/.v-tap
     utility in site.css. */
  /* More room between each step title and its visual, applied uniformly. */
  .easy-steps .step-sub{ margin-top:28px; font-size:1.2rem; line-height:1.55; color:var(--text-mid); text-align:center }
  .easy-steps .step-sub{ width:100%; max-width:260px }                  /* cap the demo column on desktop */
  .easy-steps .step-sub > .demo:first-child{ margin-top:0 }             /* gap comes from step-sub, not doubled */
  .easy-steps .demo-visibility{ margin-top:28px }                       /* space between the prayer field and the radios */
  .easy-steps .step-hands{ display:block; width:54px; height:54px; margin:8px auto 14px; color:var(--accent); stroke-width:2.5 }
  .easy-steps .step-note{ display:block }
  /* Step 2 ignition: the flame is born from the amber prayer dot. It grows once
     when the step scrolls into view (the .is-lit class, set by JS). */
  .easy-steps .ignite{ position:relative; display:inline-flex; flex-direction:column; align-items:center }
  /* Fade (not clip) the wax pillar out at the bottom, so only the flame is
     animated and there is no hard rectangular edge. A soft mask keeps the
     flame's glow feathered; the candle stick does not "grow". */
  .easy-steps .ignite .demo-flame{ transform:scale(.12); opacity:0; transform-origin:50% 80%;
    -webkit-mask-image:linear-gradient(to top, transparent 18%, #000 32%),
      radial-gradient(ellipse 46% 88% at 50% 44%, #000 55%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to top, transparent 18%, #000 32%),
      radial-gradient(ellipse 46% 88% at 50% 44%, #000 55%, transparent 100%);
    mask-composite:intersect }
  /* The seed is a capital letter flickering through the alphabet (JS drives it),
     like words forming; the flame is born from it, then the letter fades. */
  .easy-steps .ignite-letter{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
    font-family:var(--font-display); font-weight:600; font-size:2rem; line-height:1;
    color:var(--accent); text-shadow:0 0 12px rgba(232,165,75,.7) }
  /* Loop, once the step is in view: letter -> flame grows -> glow -> fade back -> repeat. */
  .easy-steps .ignite.is-lit .demo-flame{ animation:igniteLoop 6s ease-in-out infinite }
  .easy-steps .ignite.is-lit .ignite-letter{ animation:dotLoop 6s ease-in-out infinite }
  @keyframes igniteLoop{
    0%,8%{ transform:scale(.12); opacity:0 }
    26%{ transform:scale(1); opacity:1 }
    66%{ transform:scale(1); opacity:1 }
    88%,100%{ transform:scale(.12); opacity:0 }
  }
  @keyframes dotLoop{ 0%,8%{ opacity:1 } 26%{ opacity:0 } 66%{ opacity:0 } 88%,100%{ opacity:1 } }
  @media (prefers-reduced-motion:reduce){
    .easy-steps .ignite .demo-flame{ transform:none; opacity:1 }
    .easy-steps .ignite-letter{ display:none }
  }
  /* Step 3 — no flame. A warm light at the center, with prayer dots gathering
     to it from around; the light grows a bit brighter and larger with each,
     then settles and repeats. Same amber-dot motif as step 2, without a flame. */
  .easy-steps .lightbuild{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:160px; height:200px }
  .easy-steps .orb{ position:relative; z-index:2; width:34px; height:34px; border-radius:50%;
    background:radial-gradient(closest-side, #FBE6BF, #F2C079 42%, rgba(232,165,75,0) 100%);
    transform:scale(.75); box-shadow:0 0 14px 3px rgba(232,165,75,.25);
    animation:orbBuild 4.6s ease-in-out infinite }
  .easy-steps .pdrop{ position:absolute; z-index:1; top:50%; left:50%; width:8px; height:8px;
    border-radius:var(--radius-pill); background:var(--accent);
    box-shadow:0 0 8px 1px rgba(232,165,75,.85); opacity:0;
    animation:pgather 4.6s ease-in infinite }
  .easy-steps .pdrop.d1{ --fx:-48px; --fy:-36px; animation-delay:0s }
  .easy-steps .pdrop.d2{ --fx:50px; --fy:-30px; animation-delay:1.53s }
  .easy-steps .pdrop.d3{ --fx:-6px; --fy:48px; animation-delay:3.06s }
  @keyframes orbBuild{
    0%{ transform:scale(.75); box-shadow:0 0 14px 3px rgba(232,165,75,.22); filter:brightness(.85) }
    18%{ transform:scale(.85); box-shadow:0 0 20px 5px rgba(232,165,75,.4) }
    40%{ transform:scale(.98); box-shadow:0 0 28px 7px rgba(232,165,75,.55) }
    66%{ transform:scale(1.16); box-shadow:0 0 42px 12px rgba(232,165,75,.78); filter:brightness(1.15) }
    82%{ transform:scale(1.02); box-shadow:0 0 30px 8px rgba(232,165,75,.5) }
    100%{ transform:scale(.75); box-shadow:0 0 14px 3px rgba(232,165,75,.22); filter:brightness(.85) }
  }
  @keyframes pgather{
    0%{ opacity:0; transform:translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.5) }
    12%{ opacity:1 }
    28%{ opacity:0; transform:translate(-50%,-50%) scale(.9) }
    100%{ opacity:0; transform:translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(.5) }
  }
  @media (prefers-reduced-motion:reduce){
    .easy-steps .orb{ animation:none; transform:scale(1); box-shadow:0 0 26px 7px rgba(232,165,75,.5) }
    .easy-steps .pdrop{ display:none }
  }
  /* Step 2 — one big lit-gold letter that scrambles, then locks (scales up and
     glows brighter) onto the one-of-a-kind result. No flame. */
  .easy-steps .wordlock{ position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:160px; height:220px }
  .easy-steps .wordlock::before{ content:""; position:absolute; width:130px; height:130px; border-radius:50%;
    z-index:0; pointer-events:none;
    background:radial-gradient(closest-side, rgba(232,165,75,.3), transparent 72%) }
  .easy-steps .wl-letter{ position:relative; z-index:1; font-family:var(--font-display); font-weight:600;
    font-size:5rem; line-height:1;
    background:linear-gradient(180deg, #FCEFD3, #F2C079 52%, #C97F1C);
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 6px rgba(232,165,75,.5));
    transition:transform .2s ease, filter .2s ease }
  .easy-steps .wl-letter.locked{ transform:scale(1.12);
    filter:drop-shadow(0 0 10px rgba(232,165,75,.95)) drop-shadow(0 0 26px rgba(232,165,75,.55)) }
  @media (prefers-reduced-motion:reduce){ .easy-steps .wl-letter{ transition:none } }
  /* Steps 2 & 3 reuse the real .candle-card so How It Works tracks the product. */
  .easy-steps .stepcard{ position:relative; display:inline-flex }
  .easy-steps .stepcard .candle-card{ cursor:default }
  /* A touch larger flame than the default card, so the smaller demo prayer text
     leaves no empty room: the taller flame pushes the prayer + line lower. */
  .easy-steps .stepcard .candle-card canvas{ width:128%; margin:0 -14% }
  /* Step 2 — the card frame is always there; its contents appear in sequence:
     a seed spot, then the flame, then the prayer, then the bottom line. Loops. */
  .easy-steps .stepcard.s2 .seed-spot{ position:absolute; left:50%; top:31%; transform:translate(-50%,-50%);
    width:12px; height:12px; border-radius:50%; z-index:3; pointer-events:none;
    background:radial-gradient(closest-side,#FBE6BF,#E8A54B); box-shadow:0 0 14px 3px rgba(232,165,75,.9);
    opacity:0; animation:s2spot 6s ease-in-out infinite }
  .easy-steps .stepcard.s2 .s2-flame{ opacity:0; animation:s2flame 6s ease-in-out infinite }
  .easy-steps .stepcard.s2 .s2-prayer{ font-size:1.05rem; opacity:0; animation:s2prayer 6s ease-in-out infinite }
  .easy-steps .stepcard.s2 .s2-meta{ opacity:0; animation:s2meta 6s ease-in-out infinite }
  @keyframes s2spot{ 0%,3%{opacity:0} 9%{opacity:1} 22%{opacity:0} 100%{opacity:0} }
  @keyframes s2flame{ 0%,16%{opacity:0} 28%{opacity:1} 86%{opacity:1} 95%,100%{opacity:0} }
  @keyframes s2prayer{ 0%,34%{opacity:0} 46%{opacity:1} 86%{opacity:1} 95%,100%{opacity:0} }
  @keyframes s2meta{ 0%,34%{opacity:0} 46%{opacity:1} 86%{opacity:1} 95%,100%{opacity:0} }
  /* Step 3 — the SAME card responds to a prayer: while someone prays, a glowing
     comet orbits the card border (subtle, continuous motion that guides the eye);
     the bottom line changes as the prayer joins the count (JS drives it). */
  .easy-steps .stepcard.s3 .candle-card canvas{ position:relative; z-index:1 }
  /* While someone is praying: the card board gives a soft amber glow, and a
     gentle shine passes over the prayer word by word. Both are moderate (state
     feedback via colour/shadow, per the ui-animation skill) and stop the moment
     the prayer is counted; paused off-screen. */
  .easy-steps .stepcard.s3 .candle-card{ transition:box-shadow .5s ease }
  .easy-steps .stepcard.s3.praying .candle-card{ animation:cardShine 2.6s ease-in-out infinite }
  @keyframes cardShine{
    0%,100%{ box-shadow:0 2px 6px rgba(0,0,0,.34), 0 12px 26px rgba(0,0,0,.30), 0 0 0 0 rgba(232,165,75,0) }
    50%{ box-shadow:0 2px 6px rgba(0,0,0,.34), 0 12px 26px rgba(0,0,0,.30), 0 0 16px 2px rgba(232,165,75,.34) }
  }
  .easy-steps .stepcard.s3 .card-prayer .ltr{ transition:none }
  .easy-steps .stepcard.s3.praying .card-prayer .ltr.lit{
    animation:letterShine var(--sweep, 6400ms) linear infinite both;
    animation-delay:calc(var(--li) * var(--step)) }
  @keyframes letterShine{
    0%,100%{ color:#B0A585; text-shadow:none }
    3%{ color:#FFFAEE; text-shadow:0 0 12px rgba(240,190,110,.95) }
    10%{ color:#B0A585; text-shadow:none }
  }
  .easy-steps .stepcard.s3.io-off .candle-card,
  .easy-steps .stepcard.s3.io-off .card-prayer .ltr{ animation-play-state:paused }
  /* Step 3 prayer matches the step 2 demo size. */
  .easy-steps .stepcard.s3 .card-prayer{ font-size:1.05rem }
  .easy-steps .stepcard.s3 .s3-status{ text-transform:none; letter-spacing:0; font-weight:500;
    font-size:.84rem; line-height:1.35; color:var(--text-mid); white-space:normal;
    font-variant-numeric:tabular-nums }
  .easy-steps .stepcard.s3 .s3-status .dot{ display:inline-block; width:.82em; height:.82em; background:var(--accent);
    clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter:drop-shadow(0 0 2px rgba(232,165,75,.45)); margin-right:.3em; vertical-align:-.08em }
  @media (prefers-reduced-motion:reduce){
    .easy-steps .stepcard.s2 .seed-spot{ display:none }
    .easy-steps .stepcard.s2 .s2-flame, .easy-steps .stepcard.s2 .s2-prayer, .easy-steps .stepcard.s2 .s2-meta{ animation:none; opacity:1 }
    .easy-steps .stepcard.s3.praying .candle-card,
    .easy-steps .stepcard.s3.praying .card-prayer .ltr{ animation:none }
  }
  /* Step 3 — the candle is already lit (final state, no seed/appear). Its prayer
     count ticks up while small amber stars rise from the count and fade, like
     reactions floating off a post. JS drives the count and spawns the stars;
     both pause off-screen and still under reduced motion. */
  .easy-steps .stepcard.sgrow .card-prayer{ font-size:1.05rem }
  .easy-steps .stepcard.sgrow .praycount{ position:relative; display:inline-block }
  .easy-steps .stepcard.sgrow .fly-star{
    position:absolute; left:50%; top:-2px; width:16px; height:16px; z-index:20; pointer-events:none;
    background:var(--accent);
    clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter:drop-shadow(0 0 6px rgba(232,165,75,.6));
    animation:starFly var(--dur, 1500ms) ease-out forwards;
  }
  @keyframes starFly{
    0%{ opacity:0; transform:translate(-50%, 0) scale(.45) }
    22%{ opacity:.62 }
    100%{ opacity:0; transform:translate(calc(-50% + var(--dx, 0px)), -155px) scale(1.15) rotate(var(--rot, 0deg)) }
  }
  @media (prefers-reduced-motion:reduce){
    .easy-steps .stepcard.sgrow .fly-star{ display:none }
  }

  .easy-steps .btn{ margin-top:44px }

  /* ---- Step demos: replace the old static PNGs with living elements — a
     prayer field that types itself, a Public/Private toggle that flips, and
     the real flame. Motion here is a deliberate, contained exception to the
     "only the flame moves" rule; all of it stills under reduced-motion. ---- */
  .demo{ width:100%; margin-top:14px }
  /* Every step's visual is horizontally centred in its column. */
  .easy-steps .demo,
  .easy-steps .stepcard{ margin-left:auto; margin-right:auto }
  .easy-steps .stepcard{ align-self:center }
  /* Step 1 prayer field: 20% narrower than the demo column, kept centred. */
  .easy-steps .demo-prayer{ width:80%; margin-left:auto; margin-right:auto }

  /* Step 1 — prayer field, styled to match the real <textarea> on /prayer */
  .demo-prayer-field{
    min-height:120px; text-align:left;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:14px 16px;
    font-family:var(--font-display); font-style:italic; font-weight:400;
    font-size:1.05rem; line-height:1.5; color:var(--text-hi);
  }
  .demo-caret{
    display:inline-block; width:2px; height:1.15em; margin-left:1px; vertical-align:-.18em;
    background:var(--accent); animation:demo-blink 1s steps(1) infinite;
  }
  @keyframes demo-blink{ 50%{ opacity:0 } }
  .demo-counter{
    display:block; margin-top:8px; text-align:right;
    font-family:var(--font-body); font-size:.8125rem; letter-spacing:var(--track-meta);
    font-variant-numeric:tabular-nums;
    text-transform:uppercase; color:var(--text-low);
  }

  /* Step 1, visibility — simple radio buttons. Both descriptions stay below;
     the selected option cycles Public <-> Private to keep the demo alive. */
  .radio-demo{ display:flex; gap:28px; justify-content:center; align-items:center }
  .radio-opt{ display:inline-flex; align-items:center; gap:9px;
    font:500 .95rem/1.2 var(--font-body); color:var(--text-mid); transition:color .3s ease }
  .radio-opt.is-selected{ color:var(--text-hi) }
  .radio-mark{ flex:none; width:18px; height:18px; border-radius:50%;
    border:2px solid var(--text-low); position:relative; transition:border-color .3s ease }
  .radio-opt.is-selected .radio-mark{ border-color:var(--text-hi) }
  .radio-mark::after{ content:''; position:absolute; inset:3px; border-radius:50%;
    background:var(--text-hi); transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1) }
  .radio-opt.is-selected .radio-mark::after{ transform:scale(1) }
  .radio-notes{ margin-top:16px; text-align:center }
  .radio-note{ font-size:.8125rem; line-height:1.5; color:var(--text-mid) }
  .radio-note + .radio-note{ margin-top:5px }

  /* Step 3 — the live flame */
  .demo-flame{ display:block; margin:2px auto 0; width:150px; height:210px }

  @media (prefers-reduced-motion:reduce){ .demo-caret{ animation:none } }
  @media (min-width:768px){
    .easy-steps{ max-width:var(--wall-max) }
    .easy-steps ol{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; align-items:start; max-width:960px }
    /* Give all three demo areas one shared height and vertically centre the
       PRIMARY control (field / toggle / flame) on a single line. Captions (the
       counter and the visibility note) are anchored just beneath their control
       so they don't pull the control off-centre — otherwise the caption-less
       flame would sit lower than the others. */
    /* Every step-sub is at least as tall as a candle card, and its content is
       vertically centred, so step 1's shorter prayer-field/radios block sits on
       the same midline as the steps 2 and 3 cards. */
    .easy-steps .step-sub{
      min-height:var(--card-h); display:flex; flex-direction:column;
      align-items:center; justify-content:center;
    }
    .easy-steps .step-sub > .demo{ position:relative; margin-top:0 }
    .easy-steps .step-sub > .demo-visibility{ margin-top:28px }         /* keep the prayer-field / radios gap on desktop */
    /* Reserve two lines for every step title so all three visuals start on the
       same line; 1-line titles bottom-align, keeping the gap to the visual equal. */
    .easy-steps .step-title{ min-height:3.2em; display:flex; flex-direction:column;
      align-items:center; justify-content:flex-end }
    .easy-steps .demo-counter{ position:absolute; top:100%; right:0; margin-top:8px }
    .easy-steps .radio-notes{ position:absolute; top:100%; left:0; right:0; margin-top:14px }
    .easy-steps .demo-flame{ margin-top:0 }
  }

  .peace h2{ font-size:var(--h2) }
  .peace .body-text{ margin-top:22px; font-size:1.38rem }
  .peace .btn{ margin-top:38px }
  /* Extra breathing room between the Candle Wall and this Moment-of-peace
     section. Sections are full-height & centred, so this margin is the real
     gap the eye reads when scrolling from the wall into the peace moment. */
  .peace{ margin-top:32px }
  @media (min-width:768px){ .peace{ margin-top:128px } }

  /* ---- Moment-of-peace scene: the candle on a phone, mounted on a car
     dashboard vent cluster (inline SVG line art — dash fascia, twin louvred
     vents, climate knobs). The phone SCREEN is the REAL live flame: the
     .peace-phone-screen overlay carries the canvas, placed in % to sit exactly
     on the drawn phone screen (scene viewBox 0 0 440 560; the phone screen maps
     to scene-rect x160..280, y74..344). ----------------------------------- */
  .peace-scene{ position:relative; width:100%; max-width:380px; aspect-ratio:440/560; margin-top:40px }
  .peace-scene svg{ position:absolute; inset:0; width:100%; height:100%; display:block }
  /* NOTE: not named ".screen" — site.css uses that for full-height sections */
  .peace-phone-screen{
    position:absolute; left:36.36%; top:13.2%; width:27.27%; height:48.2%;
    overflow:hidden; border-radius:17.5% / 7.8%; background:#080d0a;
    box-shadow:0 0 30px rgba(232,165,75,.16), 0 0 78px rgba(232,165,75,.06);
  }
  .peace-phone-screen canvas{ position:absolute; left:0; top:-12%; width:100%; height:74% }
  .peace-phone-screen .notch{
    position:absolute; top:2.6%; left:50%; transform:translateX(-50%);
    width:30%; height:3.4%; border-radius:var(--radius-pill); background:#04070a;
  }
  /* The prayer rises continuously from the bottom and dissolves up toward the
     flame, then loops — the same motion as the full-screen view. The track
     masks both ends so the text emerges from below and fades under the flame. */
  .peace-phone-screen .screen-prayer-track{
    position:absolute; left:8%; right:8%; top:64%; bottom:2%; overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 24%, #000 82%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 24%, #000 82%, transparent 100%);
  }
  .peace-phone-screen .screen-prayer{
    position:absolute; left:0; right:0; bottom:0; margin:0; will-change:transform;
    font-family:var(--font-display); font-style:italic; font-size:11px; line-height:1.55;
    text-align:center; color:rgba(237,231,218,.62);
  }
  /* reduced motion: no rising loop — a still, readable prayer at the bottom */
  @media (prefers-reduced-motion:reduce){
    .peace-phone-screen .screen-prayer-track{ -webkit-mask-image:none; mask-image:none }
  }
  @media (max-width:420px){ .peace-phone-screen .screen-prayer-track{ display:none } }

  /* The section now carries its own display H2 title ("Every candle starts
     with you."), so it leads; the two card titles (now <h3>) step down from
     --h2 to a smaller scale so the eye lands on the section title first. */
  .forever > h2.display{ font-size:var(--h2); margin-top:14px }
  .forever .feat-grid{ margin-top:24px }
  /* Modern features block: two cards on the card surface. Mobile stacks them;
     desktop sets them side-by-side (see the min-width rule below). Each card
     carries an animated emblem in a glowing chip, a kicker, a title and copy. */
  /* Open layout — no cards. Stacked on mobile, two columns on desktop. Each
     item: a softly glowing emblem, a title, readable copy, and a quiet label. */
  .feat-grid{ margin-top:8px; display:flex; flex-direction:column; align-items:center;
    gap:44px; width:100%; max-width:380px }
  .feat-card{ display:flex; flex-direction:column; align-items:center;
    text-align:center; gap:14px; max-width:340px }
  /* soft round glow behind each emblem — no card, no border */
  .feat-chip{ position:relative; width:112px; height:112px; border-radius:50%; display:grid; place-items:center;
    background:radial-gradient(circle at 50% 46%, rgba(232,165,75,.16), rgba(232,165,75,0) 70%) }
  .feat-chip .own-emblem{ width:84px; height:84px }
  /* "Made by you" — cycling letters from many prayer alphabets (JS drives them). */
  .feat-chip .wordform{ position:relative; display:inline-flex; align-items:baseline }
  .feat-chip .wordform::before{ content:""; position:absolute; inset:-26px; z-index:0; pointer-events:none;
    background:radial-gradient(closest-side, rgba(232,165,75,.42), transparent 72%) }
  .feat-chip .wf{ position:relative; z-index:1; font-family:var(--font-display); font-weight:600;
    font-size:3rem; line-height:1;
    background:linear-gradient(180deg, #FCEFD3, #F2C079 52%, #C97F1C);
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 5px rgba(232,165,75,.85)) drop-shadow(0 0 16px rgba(232,165,75,.5)) }
  /* "Kept forever" — a lit-gold ∞ (gradient stroke) with a bright shine sweeping its shape. */
  .feat-chip .inf-emblem{ width:88px; height:auto; overflow:visible; filter:drop-shadow(0 0 10px rgba(232,165,75,.5)) }
  .feat-chip .inf-base{ stroke:url(#infGrad); stroke-width:6.5; stroke-linecap:round;
    filter:drop-shadow(0 0 4px rgba(232,165,75,.7)) }
  .feat-chip .inf-trail{ stroke:#F2C079; stroke-width:7; stroke-linecap:round;
    stroke-dasharray:8 92; opacity:.6; filter:blur(2px) drop-shadow(0 0 8px rgba(232,165,75,.9));
    animation:infTravel 2.8s linear infinite; animation-delay:.06s }
  .feat-chip .inf-glow{ stroke:#FFF7E6; stroke-width:7; stroke-linecap:round; stroke-dasharray:2 98;
    filter:drop-shadow(0 0 8px rgba(255,242,210,1)) drop-shadow(0 0 14px rgba(255,235,190,.9)) drop-shadow(0 0 22px rgba(232,165,75,.8)) drop-shadow(0 0 3px #ffffff);
    animation:infTravel 2.8s linear infinite }
  @keyframes infTravel{ to{ stroke-dashoffset:-100 } }
  @media (prefers-reduced-motion:reduce){ .feat-chip .inf-glow{ animation:none; stroke-dasharray:none } .feat-chip .inf-trail{ display:none } }
  .feat-card p{ font-size:var(--size-body); line-height:var(--lh-body); color:var(--text-mid); max-width:34ch; margin:0 }   /* body-text size */

  /* Animated emblems: fingerprint (made by you) and a rhombus of block-chain
     blocks (kept forever). Amber + bone only. */
  .own-emblem{ width:80px; height:80px; overflow:visible;
    filter:drop-shadow(0 0 14px rgba(232,165,75,.28)) }
  /* fingerprint reads ~15% smaller than the block cluster — scale its drawing up to match */
  .own-emblem.fp{ transform:scale(1.15) }
  /* Uniquely Yours: fingerprint ridges shimmer outward; core flame flickers */
  .own-emblem .fp-contours .ring{ transform-box:fill-box; transform-origin:center;
    opacity:.35; animation:fpShimmer 3.6s ease-in-out infinite }
  .own-emblem .fp-contours .r2{ animation-delay:0s }
  .own-emblem .fp-contours .r3{ animation-delay:.28s }
  .own-emblem .fp-contours .r4{ animation-delay:.56s }
  @keyframes fpShimmer{ 0%,100%{ opacity:.32 } 45%{ opacity:.95 } }
  .own-emblem .fp-core{ transform-box:fill-box; transform-origin:center bottom;
    animation:fpCore 2.4s ease-in-out infinite }
  @keyframes fpCore{ 0%,100%{ transform:scaleY(1); opacity:.9 } 50%{ transform:scaleY(1.12); opacity:1 } }
  /* Truly Permanent: steady blocks, a glow travels the diamond, flames flicker */
  .own-emblem .blk{ opacity:.6 }
  .own-emblem .lnk{ opacity:.3; animation:lnkTravel 3.6s ease-in-out infinite }
  .own-emblem .l-tr{ animation-delay:0s }
  .own-emblem .l-rb{ animation-delay:.45s }
  .own-emblem .l-bl{ animation-delay:.9s }
  .own-emblem .l-lt{ animation-delay:1.35s }
  @keyframes lnkTravel{ 0%,100%{ opacity:.28 } 14%{ opacity:1 } 38%{ opacity:.4 } }
  .own-emblem .flame{ transform-box:fill-box; transform-origin:center bottom }
  .own-emblem .f-top{    animation:emberFlick 2.3s ease-in-out infinite }
  .own-emblem .f-right{  animation:emberFlick 2.7s ease-in-out .4s infinite }
  .own-emblem .f-bottom{ animation:emberFlick 2.1s ease-in-out .9s infinite }
  .own-emblem .f-left{   animation:emberFlick 2.9s ease-in-out .2s infinite }
  @keyframes emberFlick{
    0%,100%{ transform:scaleY(1) translateX(0); opacity:.9 }
    30%{ transform:scaleY(1.12) translateX(.4px); opacity:1 }
    60%{ transform:scaleY(.9) translateX(-.4px); opacity:.85 }
  }
  @media (prefers-reduced-motion:reduce){
    .own-emblem .ring, .own-emblem .fp-core, .own-emblem .lnk, .own-emblem .flame{ animation:none }
    .own-emblem .ring{ opacity:.7 }
    .own-emblem .lnk{ opacity:.6 }
    .own-emblem .flame{ opacity:1; transform:none }
  }

  .forever .btn{ margin-top:48px }
  @media (min-width:768px){
    .forever{ max-width:var(--wall-max) }
    .feat-grid{ flex-direction:row; align-items:center; justify-content:center;
      gap:72px; max-width:820px }
    .feat-card{ flex:1; max-width:360px }
  }

  .faq{ justify-content:flex-start; padding-top:56px }
  .faq h2{ font-size:var(--h2) }
  .faq .faq-list{ margin-top:32px; width:100% }
  .faq .qa{ border-top:1px solid var(--line) }
  .faq .qa:last-child{ border-bottom:1px solid var(--line) }
  .faq summary{
    list-style:none; cursor:pointer; padding:20px 0;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    font-family:var(--font-display); font-weight:500; font-size:1.75rem;   /* sub-heading role */
    line-height:1.25; color:var(--text-hi); text-wrap:balance;
  }
  .faq summary::-webkit-details-marker{ display:none } /* hide native triangle */
  .faq summary::after{ content:'+'; font-family:var(--font-body); font-size:1.6rem; line-height:1; color:var(--text-mid); flex:none }
  .faq details[open] summary::after{ content:'\2212' } /* minus */
  .faq .qa-a{ padding:0 0 20px; font-size:1.25rem; line-height:1.6; color:var(--text-mid); max-width:60ch }   /* body role */

  .final-cta canvas{ width:220px; height:280px; margin-top:20px }
  .final-cta h2{ margin-top:8px; font-size:var(--h2) }
  .final-cta .display{ order:-1 }   /* title leads, above the flame (all widths) */
  .final-cta .body-text{ margin-top:16px; font-size:1.45rem }   /* deck role */
  .final-cta .btn{ margin-top:36px }

  /* section CTAs (everything but the hero) size to their own text */
  .wall-preview .btn, .easy-steps .btn, .peace .btn, .forever .btn, .final-cta .btn{
    width:auto; max-width:none; padding:0 32px;
  }

  /* The site footer (.site-footer) is now shared from css/site.css, so every
     page renders the identical footer. The markup below stays in the page. */

  /* FAQ answers can contain links (e.g. Solana). */
  .qa-a a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }

  /* ============ TESTIMONIALS (empty state) ============
     No testimonials exist yet, so this is an honest zero-state: it invites the
     first voices instead of showing sample quotes. When real testimonials come,
     they render here as flame-less quote cards. */
  .testimonials .display{ margin-top:6px }
  .testimonials-sub{ margin-top:16px; max-width:52ch }
  .testimonials-cta{ margin-top:32px }

  /* Published testimonials — flame-less quote cards (candles removed by request).
     Hidden until js/testimonials.js finds published ones. */
  .tcards{
    margin-top:32px; width:100%; max-width:440px;
    display:flex; flex-direction:column; gap:16px;
  }
  .tcards[hidden]{ display:none }
  .tcard{
    margin:0; text-align:left;
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    box-shadow:0 2px 6px rgba(0,0,0,.34), 0 12px 26px rgba(0,0,0,.30);
  }
  .tcard-body{ margin:0; padding:18px 20px }
  .tcard-text{
    margin:0; font-family:var(--font-display); font-style:italic; font-weight:500;
    font-size:1.18rem; line-height:1.5; letter-spacing:.006em;
    color:var(--text-hi); text-wrap:pretty; overflow-wrap:anywhere;
  }
  .tcard-meta{
    margin-top:12px; font-weight:500; font-size:.82rem; letter-spacing:.04em;
    line-height:1.4; text-transform:uppercase; color:var(--text-low);
    font-variant-numeric:tabular-nums; text-wrap:balance;
  }
  /* When testimonials exist the section is content, not an empty state: it no
     longer needs to fill the whole viewport. */
  .testimonials:not(.is-empty){ min-height:auto; padding-block:96px }

  /* Community Voices form — bottom sheet on phones, centred dialog on desktop.
     Matches the sign-in sheet's language. */
  .tform-overlay{
    position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.72);
    display:flex; align-items:flex-end; justify-content:center;
  }
  .tform-overlay[hidden]{ display:none }
  .tform-card{
    width:100%; max-width:540px; max-height:92vh; overflow-y:auto; text-align:left;
    background:var(--card); border-top:1px solid var(--line);
    border-radius:24px 24px 0 0; padding:14px 22px 26px;
  }
  .tform-handle{
    display:block; width:40px; height:4px; border-radius:var(--radius-pill);
    background:rgba(233,231,218,.14); margin:0 auto 18px;
  }
  .tform-title{
    margin:0 0 8px; font-family:var(--font-display); font-weight:600;
    font-size:1.7rem; line-height:1.25; color:var(--text-hi);
  }
  .tform-intro{ margin:0 0 6px; color:var(--text-mid); font-size:1.02rem; line-height:1.5 }
  .tform-label{ display:block; margin:16px 0 6px; color:var(--text-hi); font-weight:500; font-size:.95rem }
  .tform-input, .tform-textarea{
    width:100%; min-inline-size:0; padding:11px 12px; border-radius:10px;
    border:1px solid var(--line); background:transparent; color:var(--text-hi);
    font:400 1.05rem var(--font-body);
  }
  .tform-textarea{ resize:vertical; min-height:120px; line-height:1.5 }
  .tform-input:focus-visible, .tform-textarea:focus-visible{
    outline:2px solid var(--accent); outline-offset:1px; border-color:transparent;
  }
  .tform-count{ margin:6px 0 0; text-align:right; font-size:.82rem; color:var(--text-low); font-variant-numeric:tabular-nums }
  .tform-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
  .tform-turnstile{ margin-top:12px }
  .tform-error{ margin:14px 0 0; color:#e8735b; font-size:.95rem; line-height:1.5 }
  .tform-error[hidden]{ display:none }
  .tform-actions{ margin-top:22px; display:flex; gap:12px }
  .tform-actions .btn{ flex:1 1 auto; min-height:48px; margin-top:0 }

  @media (min-width:768px){
    .testimonials{ max-width:var(--wall-max) }
    .tcards{
      max-width:960px; margin-top:44px;
      display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
    }
    .tform-overlay{ align-items:center }
    .tform-card{ max-width:520px; border:1px solid var(--line); border-radius:22px; padding:30px 30px 30px }
    .tform-handle{ display:none }
    .tform-actions{ justify-content:flex-end }
    .tform-actions .btn{ flex:0 0 auto; padding:0 26px }
  }

  /* ============================================================
     HOMEPAGE TYPE SCALE — normalized roles (single source).
     Kept LAST so it wins the cascade. One size per role:
       deck (subtitle / lead)  desktop 1.45rem · mobile 1.5rem
       sub-heading (item title) 1.75rem
       body (secondary reading) 1.25rem
     Hero title (h1) and section titles (h2) keep their own scale.
     Step text is desktop-small (3-column) but joins the deck on mobile.
     ============================================================ */
  @media (max-width:767px){
    .hero .hero-sub,
    .wall-preview .body-text,
    .final-cta .body-text,
    .easy-steps .step-desc{ font-size:1.5rem }
  }