@charset "UTF-8";
/* ==========================================================================
   RHONDA SAMPSON
   Creating Your Unique Style From the Inside Out.
   --------------------------------------------------------------------------
   PART 1 is the design system from rhondasampson_index_4.html, carried over
   verbatim: same tokens, same nav, same .mhero, same buttons, same section
   rhythm, same bands, same footer, same breakpoints.

   PART 2 adds only the components this site needs that the reference had
   no equivalent for — each built from the reference's own vocabulary
   (.svc card, .step card, .case split, .sec-head) so nothing reads as
   foreign. No new colours, no new fonts, no new shapes.
   ========================================================================== */

/* ==========================================================================
   PART 1 — reference design system (verbatim)
   ========================================================================== */

:root{--teal:#46767A;--teal-dk:#3F7561;--teal-deep:#2A3D3F;--rasp:#C4256F;--peach:#F7C6A4;--mint:#E8FFF8;--mint2:#EDF7F2;--ink:#33413f;--ph:#C4256F;}
*{margin:0;padding:0;box-sizing:border-box;}
/* Now that the nav stays on screen, every in-page jump — #about, #speaking,
   #prayer-book, #start — would land its target underneath it. These offsets
   are the nav's own height at each breakpoint (83 / 71 / 117px) plus a little
   air. styles.css already does this for the other pages; this stylesheet
   never needed it while the nav scrolled away. */
html{scroll-behavior:smooth;scroll-padding-top:95px;}
@media(max-width:1000px){html{scroll-padding-top:83px;}}
@media(max-width:560px){html{scroll-padding-top:129px;}}
body{font-family:'Montserrat',sans-serif;color:var(--ink);background:#fff;}
/* overflow-x:hidden here made .wrap a scroll container, and a sticky child
   sticks to its nearest scroll container rather than the viewport — so the
   nav, which is the only way back to the top of a 9600px page, scrolled away
   with everything else. overflow-x:clip does the same clipping WITHOUT
   creating that container, so the nav stays put. `hidden` is kept first as
   the fallback for Safari before 16, which behaves as it does today. */
.wrap{width:100%;max-width:1440px;margin:0 auto;overflow-x:hidden;overflow-x:clip;}
a{text-decoration:none;color:inherit;}
.btn{display:inline-block;background:var(--rasp);color:#fff;padding:16px 30px;border-radius:30px;font-weight:600;font-size:15px;letter-spacing:.4px;box-shadow:0 8px 20px rgba(196,37,111,.25);}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none;}
.eyebrow{font-size:13px;letter-spacing:3px;font-weight:700;color:var(--rasp);text-transform:uppercase;}
.eyebrow .dash{display:inline-block;width:34px;height:2px;background:var(--rasp);vertical-align:middle;margin-right:10px;}
.scr{font-family:'Alex Brush',cursive;font-weight:400;color:var(--rasp);}
.ph{color:var(--ph);font-weight:600;}
/* nav */
nav{display:flex;align-items:center;justify-content:space-between;padding:22px 70px;border-bottom:1px solid #eef4f1;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);z-index:10;}
.logo{display:flex;align-items:center;gap:11px;}
.logo .rs{width:38px;height:38px;border-radius:50%;background:var(--rasp);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
.logo .nm{font-weight:700;color:var(--teal);font-size:16px;line-height:1;}
.logo .nm small{display:block;font-weight:600;color:#8aa;font-size:8px;letter-spacing:2px;margin-top:3px;}
.navlinks{display:flex;gap:26px;font-size:13px;color:#4a5a5a;font-weight:500;align-items:center;}
.navlinks .cta{background:var(--rasp);color:#fff;padding:11px 20px;border-radius:24px;font-weight:600;font-size:12px;}
/* Secondary nav link. Reads as plain text — only the Prayer Book is
   highlighted — but it still carries .cta so it survives the <1000px rule
   that hides every other link. Without that class a phone would be left
   with nothing in the nav but the paid product. */
.navlinks .cta--plain{background:transparent;color:#4a5a5a;border:0;padding:0;border-radius:0;font-weight:500;font-size:13px;}
/* insight band */
.insight{background:linear-gradient(140deg,var(--teal-deep),#243638);color:#fff;padding:64px 70px;text-align:center;}
.insight h2{font-size:34px;font-weight:700;line-height:1.25;max-width:940px;margin:0 auto;}
.insight h2 .scr{color:var(--peach);font-size:46px;}
.insight p{font-size:16px;line-height:1.6;color:#cfe0dd;max-width:720px;margin:18px auto 0;}
/* approach */
.section{padding:70px 70px;}
.sec-head{text-align:center;margin-bottom:44px;}
.sec-head .eyebrow{display:block;margin-bottom:12px;}
.sec-head h2{font-size:34px;font-weight:700;color:var(--teal);}
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.step{background:#fff;border:1px solid #e3efe9;border-top:3px solid var(--rasp);border-radius:12px;padding:22px 18px;text-align:center;box-shadow:0 8px 22px rgba(70,118,122,.06);}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--mint2);color:var(--teal);font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:14px;}
.step h3{font-size:16px;color:var(--teal);font-weight:700;margin-bottom:7px;}
.step p{font-size:12.5px;line-height:1.5;color:#5c6b69;}
/* services */
.services{background:var(--mint2);}
.cards3{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:1000px){.cards3{grid-template-columns:repeat(2,1fr);}}
.svc{background:#fff;border-radius:14px;padding:30px 26px;box-shadow:0 10px 26px rgba(70,118,122,.08);border-bottom:3px solid var(--peach);}
.svc .ic{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--rasp);text-transform:uppercase;margin-bottom:12px;}
.svc h3{font-size:20px;color:var(--teal);font-weight:700;margin-bottom:10px;}
.svc p{font-size:14px;line-height:1.6;color:#556463;}
/* case teaser */
.case{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(70,118,122,.12);}
.case .l{background:linear-gradient(140deg,var(--teal),var(--teal-dk));color:#fff;padding:44px 40px;}
.case .l .eyebrow{color:var(--peach);}
.case .l h3{font-size:26px;font-weight:700;margin:12px 0 14px;line-height:1.2;}
.case .l h3 .scr{color:var(--peach);font-size:34px;}
.case .l p{font-size:14px;line-height:1.6;color:#dcecea;margin-bottom:22px;}
.case .r{background:#fff;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;gap:18px;}
.case .r .tile{display:flex;align-items:baseline;gap:14px;border-bottom:1px dashed #e3d0c4;padding-bottom:14px;}
.case .r .tile .num{font-size:26px;font-weight:700;color:var(--rasp);min-width:96px;}
.case .r .tile .num.ph{font-size:15px;font-style:italic;}
.case .r .tile .lab{font-size:13px;color:#5c6b69;line-height:1.4;}
/* cta band */
.ctaband{background:linear-gradient(140deg,var(--rasp),#9e1f5c);color:#fff;text-align:center;padding:62px 70px;}
.ctaband h2{font-size:32px;font-weight:700;margin-bottom:12px;}
.ctaband p{font-size:16px;color:#f7dcea;margin-bottom:26px;}
.ctaband .btn{background:#fff;color:var(--rasp);}
/* ---- The three, under the hero ----------------------------------------
   A quiet band, not a second hero: the eyebrow's own type size and tracking,
   with only the three nouns weighted. Flex with a wrap so it becomes three
   stacked lines on a phone rather than one that breaks mid-clause. */
.triad{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:10px 34px;padding:26px 70px;
  background:var(--mint2);border-block:1px solid #e2efe9;
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#5d7a76;text-align:center;
}
.triad b{font-weight:700;color:var(--rasp);}
@media(max-width:760px){
  .triad{flex-direction:column;gap:9px;padding:22px;letter-spacing:.11em;font-size:12px;}
}

/* ---- The same three, in the footer, above her mantra ---- */
.foot-triad{
  margin:20px 0 0;font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:#93b0ab;
}
@media(max-width:1000px){.foot-triad{text-align:center;}}

/* footer */
footer{background:var(--teal-deep);color:#cfe0dd;padding:40px 70px;display:flex;justify-content:space-between;align-items:center;font-size:13px;}
footer .cross{background:rgba(255,255,255,.08);border:1px solid rgba(247,198,164,.4);border-radius:26px;padding:12px 22px;color:#fff;font-weight:600;}
footer .cross span{color:var(--peach);}
.note{background:#fff6fb;border-top:1px dashed var(--rasp);padding:14px 70px;font-size:12px;color:#8a5a72;font-style:italic;text-align:center;}

@media(max-width:1000px){
 nav{padding:16px 22px;} .navlinks{gap:16px;} .navlinks a:not(.cta){display:none;}
 .insight{padding:46px 22px;} .insight h2{font-size:26px;} .insight h2 .scr{font-size:34px;} .insight p{font-size:15px;}
 .section{padding:46px 22px;} .sec-head{margin-bottom:30px;} .sec-head h2{font-size:26px;}
 .loop{grid-template-columns:1fr 1fr;} .cards3{grid-template-columns:1fr;} .case{grid-template-columns:1fr;}
 .book{grid-template-columns:1fr;padding:26px;gap:26px;} .bookcover{max-width:280px;margin:0 auto;}
 .ctaband{padding:46px 22px;} .ctaband h2{font-size:26px;}
 footer{flex-direction:column;gap:16px;text-align:center;padding:30px 22px;}
 .note{padding:14px 22px;}
}
@media(max-width:560px){
 .loop{grid-template-columns:1fr;}
 .btn{padding:14px 22px;font-size:14px;}
 .case .l,.case .r{padding:30px 24px;}
}

/* hero — .mhero, verbatim including the reference's own later overrides */
.mhero{display:grid;grid-template-columns:1.04fr .96fr;gap:8px;align-items:stretch;overflow:hidden;}
.mhero .mtext{align-self:center;padding:58px 10px 58px 70px;max-width:640px;}
.mhero .mimg{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:600px;}
.mhero .mimg img{height:100%;max-height:660px;width:auto;max-width:100%;object-fit:contain;object-position:bottom center;}
.mhero .eyebrow{font-size:13px;letter-spacing:3px;font-weight:700;text-transform:uppercase;margin-bottom:20px;}
.mhero .eyebrow .dash{display:inline-block;width:34px;height:2px;vertical-align:middle;margin-right:10px;}
.mhero h1{font-size:60px;line-height:1.05;font-weight:700;letter-spacing:-1px;margin:0;}
.mhero h1 .scr{font-family:'Alex Brush',cursive;font-weight:400;font-size:74px;}
.mhero .bq{padding:4px 0 4px 22px;margin:26px 0 18px;font-style:italic;font-size:19px;line-height:1.55;max-width:560px;}
.mhero .lede{margin:26px 0 22px;font-size:19px;line-height:1.6;max-width:540px;}
.mhero .roles{font-size:13px;letter-spacing:2px;font-weight:700;text-transform:uppercase;margin-bottom:26px;}
.mhero .btns{display:flex;gap:16px;flex-wrap:wrap;}
.mhero .btn-fill{color:#fff;padding:16px 28px;border-radius:30px;font-weight:600;font-size:14px;letter-spacing:.5px;text-transform:uppercase;}
.mhero .btn-out{background:transparent;padding:16px 28px;border-radius:30px;font-weight:600;font-size:14px;letter-spacing:.5px;text-transform:uppercase;}
@media(max-width:1000px){.mhero{grid-template-columns:1fr;} .mhero .mtext{padding:40px 22px 10px;} .mhero h1{font-size:40px;} .mhero h1 .scr{font-size:50px;} .mhero .bq,.mhero .lede{font-size:17px;} .mhero .mimg{min-height:0;} .mhero .mimg img{max-height:460px;}}
@media(max-width:560px){.mhero h1{font-size:31px;} .mhero h1 .scr{font-size:38px;} .mhero .mimg img{max-height:380px;} .mhero .btn-fill,.mhero .btn-out{padding:13px 20px;font-size:12.5px;}}

.mhero{background:linear-gradient(160deg,#E8FFF8 0%,#f3fbf7 60%,#ffffff 100%);}
.mhero .eyebrow,.mhero .roles{color:#C4256F;} .mhero .eyebrow .dash{background:#C4256F;}
.mhero h1{color:#46767A;} .mhero h1 .scr{color:#C4256F;}
.mhero .bq{border-left:3px solid #C4256F;color:#5c6b69;}
.mhero .btn-fill{background:#C4256F;box-shadow:0 8px 20px rgba(196,37,111,.25);}
.mhero .btn-out{border:1.6px solid #46767A;color:#46767A;}

/* === hero portrait: exact positioning & size === */
.mhero{position:relative;grid-template-columns:1.08fr 0.92fr;gap:clamp(1rem,3vw,3rem);align-items:center;overflow:hidden;}
.mhero .mtext{padding-top:clamp(3rem,calc(2rem + 4.5vw),6.5rem);padding-bottom:clamp(3rem,calc(2rem + 4.5vw),6.5rem);max-width:36rem;}
.mhero .mimg{position:relative;line-height:0;min-height:0;display:block;}
.mhero .mimg img{height:clamp(360px,58vh,620px);width:auto;max-width:100%;max-height:none;display:block;object-fit:contain;object-position:right bottom;}
@media (min-width:901px){
  .mhero .mimg{position:absolute;inset:0 0 0 auto;width:clamp(360px,46vw,760px);line-height:0;pointer-events:none;}
  .mhero .mimg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:right bottom;}
}
@media (max-width:900px){
  .mhero{grid-template-columns:1fr;gap:0;}
  .mhero .mtext{max-width:none;padding-top:clamp(2.2rem,6vw,3.4rem);}
  .mhero .mimg{position:relative;inset:auto;width:auto;justify-self:center;}
  .mhero .mimg img{position:static;height:clamp(320px,48vh,500px);width:auto;max-width:100%;margin-inline:auto;object-position:right bottom;}
}

/* ==========================================================================
   PART 2 — Rhonda Sampson additions, built from the same vocabulary
   ========================================================================== */

/* ---- Hero quote. The reference's .bq is muted grey (#5c6b69), which was
   right for a line of positioning copy but leaves this one — the sentence
   that does the emotional work — reading like a caption. Lifted to brand
   teal, with the payoff clause in raspberry via the existing .ph class.
   Both colours are already in the palette; nothing new is introduced. ---- */
/* The three "seasons" become a short list. Markers are the brand's own dash
   motif — the same raspberry rule that sits in every .eyebrow, scaled down —
   rather than generic discs, so the list reads as part of the system.
   Set upright: these are now a list, not a pull-quote, and italic three times
   in a row reads as a mistake. */
.mhero .bq-list{list-style:none;margin:0;padding:0;}
.mhero .bq-list li{
  position:relative;padding-left:28px;margin:0 0 10px;
  font-style:normal;font-weight:700;font-size:16.5px;line-height:1.5;color:#5c6b69;
}
.mhero .bq-list li:last-child{margin-bottom:0;}
.mhero .bq-list li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:15px;height:2px;background:var(--rasp);
}
@media(max-width:1000px){.mhero .bq-list li{font-size:15.5px;}}
@media(max-width:560px){.mhero .bq-list li{font-size:15px;padding-left:24px;}
  .mhero .bq-list li::before{width:12px;}}

/* Body copy stays the reference's own #5c6b69. Alex Brush appears once in
   this hero — "alone" in the headline — and the quote does not compete
   with it. */

/* ==========================================================================
   HERO — editorial layer
   The core promise is now the single display line. Everything else is
   deliberately quiet so the headline carries the page.
   ========================================================================== */

/* --- 1. Issue marker ---------------------------------------------------- */
.mhero .issue{
  display:flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:4px;text-transform:uppercase;
  font-weight:700;color:#9db5b1;margin-bottom:20px;
}
.mhero .issue .dash{width:26px;height:2px;background:#c9dcd8;flex:none;}

/* --- 3. The line under the headline -------------------------------------
   Set roman, not script: "alone" in the headline directly above is already
   Alex Brush, and two script lines stacked would read as decoration rather
   than emphasis. Sized between the headline and the body so it carries as
   a statement in its own right. */
.mhero .accent{
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:clamp(17px,1.6vw,21px);line-height:1.4;letter-spacing:-.2px;
  color:var(--rasp);margin:20px 0 0;
}

/* --- 4. The display headline -------------------------------------------- */
/* Sized to the longest line, "have to rebuild": 495px of the 560px column
   at 62px. Supporting copy sits at 17px, a 3.6x ratio. */
.mhero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.02;letter-spacing:-1.4px;}
/* "alone" in Alex Brush. Sized in em, not the reference's fixed 74px, so it
   tracks the fluid headline instead of towering over it on a phone. 1.25em
   keeps the reference's own 74/60 script-to-roman ratio. Colour comes from
   .scr, which is already the brand pink. */
.mhero h1 .scr{font-size:1.25em;line-height:.9;letter-spacing:0;}

/* --- 5. Supporting copy -------------------------------------------------- */
.mhero .hlede{
  font-size:clamp(15.5px,1.3vw,17px);line-height:1.65;color:#5c6b69;
  margin:16px 0 30px;max-width:31rem;
}

/* --- 6. Signature credit ------------------------------------------------
   Plain text: no chip, no border, no rule. White is not usable here (1.08:1
   on the hero's mint), so it takes the reference's own body tone #5c6b69 —
   5.24:1, passing AA at this size. The lighter #6d8a86 used by the issue
   marker and caption measures 3.50:1, which is fine for those (they are
   decorative) but not for a line naming her credentials. */
/* Lives inside .mimg so it sits under the portrait rather than under the
   text column. Brand pink, 5.19:1 on the hero — passes AA at this size. */
.mhero .sigline{
  margin:16px auto 0;text-align:center;
  color:#617c7c;
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:600;line-height:1.8;max-width:26rem;
}
/* The name takes its own line, which is what lets the roles line fit inside
   the portrait's width. A block span rather than a <br> so it can carry its
   own tracking. */
.mhero .signame{display:block;letter-spacing:2.4px;}
@media(max-width:560px){.mhero .sigline{letter-spacing:1px;font-size:10px;}}

/* --- 7. Portrait treatment ---------------------------------------------
   ~5% smaller and pulled off the right edge so the glasses are not jammed
   against it.

   The fade at the base is deliberately gone. A mask gradient used to
   dissolve the bottom of the portrait into the page, which read as a white
   mist hanging under her rather than as a soft edge. The photograph is a
   clean cutout already and does not need help. */
@media(min-width:901px){
  .mhero .mimg{
    inset:0 clamp(18px,2.6vw,52px) 0 auto;   /* breathing room from the edge */
    width:clamp(342px,43.7vw,722px);         /* 760px - 5% */
  }
  /* The portrait now runs the full height of its slot. It used to stop 74px
     short to leave a band for the credit line, but that credit line is gone
     — which left an empty strip of page showing beneath her and read as a
     pale haze under the photograph rather than as deliberate space.
     Height is explicit: on an absolutely positioned <img>, `height:auto`
     with top and bottom both set resolves to the intrinsic aspect ratio
     rather than stretching, which overflows the slot. */
  .mhero .mimg img{top:0;left:0;right:0;bottom:0;width:100%;height:100%;}
  /* The hero is sized by the text column, which is shorter than the portrait
     plus its credit. This floor keeps the portrait at full height rather
     than shrinking it to make room. */
  .mhero{min-height:772px;}
}
@media(max-width:900px){
  /* 500px - 5%; keeps the same graceful contain-fit on tablets and phones */
  .mhero .mimg img{height:clamp(304px,45.6vh,475px);}
}

/* Headline sizing now lives in the editorial block above — the old 40px
   rules were tuned for the long "When you need someone…" headline and would
   have overridden the new display size from further down the cascade. */

/* ---- Hero text column: 36rem in the reference, whose CTA labels were
   shorter ("Work With Me on AI"). 38rem keeps this hero's two buttons on
   one row without touching type sizes, padding or spacing. ---- */
@media(min-width:901px){.mhero .mtext{max-width:40rem;}}

/* ---- Accessibility basics the reference didn't need ---- */
.skip-link{position:absolute;top:-100px;left:22px;z-index:100;background:var(--rasp);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;font-size:13px;}
.skip-link:focus{top:14px;}
:focus-visible{outline:3px solid var(--rasp);outline-offset:3px;border-radius:4px;}
.insight :focus-visible,.case .l :focus-visible,.ctaband :focus-visible,footer :focus-visible{outline-color:var(--peach);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
img{max-width:100%;height:auto;display:block;}
input,button,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}

/* ---- Launch-status pill. Same type treatment as .svc .ic ---- */
.status{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;padding:4px 11px;border-radius:24px;border:1px solid currentColor;white-space:nowrap;vertical-align:middle;}
.status--live{color:var(--teal-dk);background:var(--mint2);}
.status--early{color:var(--teal);background:var(--mint);}
.status--soon{color:var(--rasp);background:#fff6fb;}
.case .l .status--soon,.insight .status--soon{color:var(--peach);background:rgba(255,255,255,.08);}
.sec-head .status{margin-left:10px;}

/* ---- Nav on a phone: only the CTAs survive (reference behaviour). There are
   now two of them — the free entry point and the Prayer Book — and measured in
   a real 390px box they need 458px on one row. So below 560px the nav becomes
   two rows: logo, then both pills centred beneath it.

   The alternative was shortening the labels until they fitted, which buys a
   single row at the cost of "Start Your Journey" becoming something like
   "Start". A slightly taller header is the cheaper trade. ---- */
@media(max-width:560px){
  nav{flex-wrap:wrap;justify-content:center;row-gap:12px;}
  .navlinks{width:100%;justify-content:center;gap:10px;}
  .logo .nm small{display:none;}
  .navlinks .cta{white-space:nowrap;padding:10px 16px;font-size:11.5px;}
  .navlinks .cta--plain{padding:0;font-size:12.5px;}
}

/* ---- Nav: a not-yet-live destination carries a dot, never a lie ---- */
.navlinks a{position:relative;}
.navlinks a.soon::after{content:"";position:absolute;top:-2px;right:-9px;width:5px;height:5px;border-radius:50%;background:var(--peach);}
.navlinks a:not(.cta):hover{color:var(--rasp);}
.navlinks .cta:hover{background:#a81c5c;}
.navlinks .cta--plain:hover{background:transparent;color:var(--rasp);}
.btn:hover,.mhero .btn-fill:hover{background:#a81c5c;}
.ctaband .btn:hover{background:#fff;color:#a81c5c;}
.mhero .btn-out:hover{background:var(--teal);color:#fff;}

/* ---- "What Do You Need Today?" — the one interactive section ----
   Left: an editorial index. Right: a .step-style card, scaled up. */
/* This is the signature section — the only place a visitor gets something
   real for free — so it is given its own ground and far more room than the
   standard .section rhythm allows. */
#start{
  background:linear-gradient(180deg,#ffffff 0%,var(--mint) 45%,#f3fbf7 100%);
  padding-top:clamp(64px,7.5vw,116px);
  padding-bottom:clamp(64px,7.5vw,116px);
}
#start .sec-head{margin-bottom:clamp(36px,4.5vw,62px);}
#start .sec-head h2{font-size:clamp(30px,3.8vw,46px);line-height:1.15;}
/* Same 1.23 script-to-roman ratio the reference uses on .mhero h1 .scr. */
#start .sec-head h2 .scr{font-size:1.25em;line-height:.9;}
#start .sec-head .lede{
  font-size:clamp(15.5px,1.35vw,18px);line-height:1.65;color:#556463;
  max-width:640px;margin:16px auto 0;
}

.needs{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(32px,4.5vw,64px);align-items:start;}
@media(max-width:1000px){.needs{grid-template-columns:1fr;gap:30px;}}

.needlist{list-style:none;border-top:1px solid #e3efe9;}
.needlist li{margin:0;}
.needbtn{width:100%;display:flex;align-items:center;gap:16px;padding:21px 10px;text-align:left;background:transparent;border:0;border-bottom:1px solid #e3efe9;font-size:17px;font-weight:600;color:#4a5a5a;transition:background .2s,color .2s,padding-left .2s;}
.needbtn .n{font-size:12px;font-weight:700;letter-spacing:2px;color:#a8c2bd;flex:none;transition:color .2s;}
.needbtn .ar{margin-left:auto;color:var(--rasp);opacity:0;transition:opacity .2s;}
.needbtn:hover{color:var(--rasp);background:#fff6fb;padding-left:14px;}
.needbtn:hover .ar{opacity:1;}
.needbtn[aria-selected="true"]{color:var(--rasp);background:#fff6fb;padding-left:14px;box-shadow:inset 3px 0 0 var(--rasp);}
.needbtn[aria-selected="true"] .n{color:var(--rasp);}
.needbtn[aria-selected="true"] .ar{opacity:1;}

.needpanel{background:#fff;border:1px solid #e3efe9;border-top:3px solid var(--rasp);border-radius:14px;padding:clamp(30px,3.4vw,50px);box-shadow:0 14px 40px rgba(70,118,122,.12);}
/* Panels differ in length; a floor stops the page jumping as tabs switch.
   Sized to the longest Amplified passage (Proverbs 3:5-6). Sticky was
   dropped when the switch to AMP made the panel taller than the list it
   was meant to stay alongside — and taller than some viewports, where
   sticky would have cut off the CTA at the bottom of the card. */
@media(min-width:1001px){.needpanel{min-height:740px;}}
.needpanel .blk + .blk{margin-top:30px;padding-top:30px;border-top:1px solid #e3efe9;}
.needpanel h3{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--rasp);text-transform:uppercase;margin-bottom:14px;}
/* 27px suited a short KJV line; the Amplified passages run 3-4x longer, so
   the display size comes down to stay readable rather than shouty. */
.needpanel .verse{font-size:clamp(19px,1.75vw,23px);line-height:1.5;font-weight:600;color:var(--teal);margin-bottom:12px;}
.needpanel .ref{display:block;font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#7c9a95;}
.needpanel p{font-size:15.5px;line-height:1.72;color:#556463;}
.needpanel .stepline{display:flex;gap:12px;}
.needpanel .stepline::before{content:"\2192";color:var(--rasp);font-weight:700;flex:none;}
.needfoot{margin-top:34px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.needfoot .status{margin-left:auto;}
/* No JS → every panel renders stacked, nothing is trapped behind a click. */
.js .needpanel[hidden]{display:none!important;}
.needpanel + .needpanel{margin-top:16px;}
.js .needpanel + .needpanel{margin-top:0;}

/* ---- Prayer Book. The .case split, widened for a product ---- */
.book{display:grid;grid-template-columns:.78fr 1.22fr;gap:44px;align-items:center;background:#fff;border-radius:16px;padding:44px 40px;box-shadow:0 14px 40px rgba(70,118,122,.12);border-bottom:3px solid var(--peach);}
.bookcover{position:relative;}
.bookcover img{border-radius:4px 10px 10px 4px;box-shadow:0 14px 34px rgba(70,118,122,.22);}
.bookcover .tag{position:absolute;top:-12px;right:-10px;background:var(--rasp);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-align:center;line-height:1.35;padding:8px 12px;border-radius:8px;box-shadow:0 8px 20px rgba(196,37,111,.25);}
.book h2{font-size:30px;font-weight:700;color:var(--teal);line-height:1.18;margin-bottom:14px;}
.book .claim{font-size:20px;font-weight:700;color:var(--teal);line-height:1.3;margin-bottom:16px;}
.book .claim em{font-style:normal;color:var(--rasp);}
.book p{font-size:14.5px;line-height:1.65;color:#556463;margin-bottom:14px;}
.checks{list-style:none;margin-bottom:22px;}
.checks li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14px;color:#556463;}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;border-left:2px solid var(--teal-dk);border-bottom:2px solid var(--teal-dk);transform:rotate(-45deg);}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:22px;}
.price .amt{font-size:30px;font-weight:700;color:var(--rasp);}
.price .note2{font-size:13px;color:#7c9a95;}
.bookbtns{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
@media(max-width:1000px){.book{grid-template-columns:1fr;} .book h2{font-size:24px;} .book .claim{font-size:18px;}}

/* ---- ReCharge & ReStyle: the styling.html split, rebuilt ---------------
   styling.html lays this out as `.split` — two equal columns, prose on the
   left, a peach card on the right. That stylesheet is not loaded here, so
   the shape is rebuilt from this one's own parts. `.peachcard` uses
   `.card--peach`'s exact tokens (#FDF0E6 on a blush border) so the card
   reads as the same object on both pages, and `.checks` supplies the tick
   list in place of the reference's `.check-list`.

   Equal columns rather than the .book grid's .78/1.22: there is no image
   here to give the narrow column a job. */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.split2 p{font-size:14.5px;line-height:1.65;color:#556463;margin-bottom:14px;}
.split2 p.lead-out{color:var(--teal);font-size:15.5px;margin-bottom:20px;}
@media(max-width:1000px){.split2{grid-template-columns:1fr;gap:30px;}}

.peachcard{background:#FDF0E6;border:1px solid #F4B8A6;border-radius:14px;padding:34px 32px;box-shadow:0 10px 26px rgba(70,118,122,.08);}
.peachcard .ic{font-size:13px;font-weight:700;letter-spacing:2px;color:var(--rasp);text-transform:uppercase;margin-bottom:18px;}
.peachcard .checks{margin-bottom:26px;}
.peachcard .checks li{font-size:13.5px;line-height:1.55;color:#5c6b69;margin-bottom:14px;}
.peachcard .checks li strong{color:var(--teal);}
/* The Styled By Me button is the one control on this page that has a twin on
   another page: styling.html's `.btn.btn-primary.btn-block`, which is also
   the button that opens styled-by-me.html. This page's own `.btn` is a
   different animal — sentence case, no border, a soft raspberry glow — so
   the twin is rebuilt here to the reference's exact measurements rather than
   approximated: .92rem/1.75rem padding, a 2px border in its own colour, the
   999px pill, 14px uppercase at .12em tracking, and the shared shadow pair.
   The arrow slides 4px on hover there, so it slides here.
   No 560px shrink: the reference does not shrink either, and the label wraps
   inside the flex box rather than overflowing. */
.peachcard .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  width:100%;padding:.92rem 1.75rem;line-height:1.7;
  border:2px solid var(--rasp);border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-align:center;
  box-shadow:0 1px 2px rgba(51,51,51,.05),0 2px 6px rgba(70,118,122,.06);
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s cubic-bezier(.22,.61,.36,1),background-color .18s cubic-bezier(.22,.61,.36,1);}
.peachcard .btn:hover{background:#A81C5C;border-color:#A81C5C;color:#fff;transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(51,51,51,.05),0 10px 26px rgba(70,118,122,.10);}
.peachcard .btn:active{transform:translateY(0);}
.peachcard .btn .arrow{transition:transform .18s cubic-bezier(.22,.61,.36,1);}
.peachcard .btn:hover .arrow{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){.peachcard .btn,.peachcard .btn .arrow{transition:none;}
  .peachcard .btn:hover{transform:none;} .peachcard .btn:hover .arrow{transform:none;}}
@media(max-width:560px){.peachcard{padding:26px 22px;}}

/* ---- Auto-flipping cover ------------------------------------------------
   The three static interior thumbnails that used to sit under this section
   are gone. They showed the same thing three times and cost three image
   requests to do it. The cover now flips through the real pages instead, so
   one element carries the whole preview.

   Ported from prayer-book.html's .bookflip, retokenised to this stylesheet's
   palette. One deliberate difference: no hover-to-pause. There is nothing to
   read here, only pages to glimpse, and a preview that stops when the cursor
   drifts across it reads as broken rather than considerate.

   The aspect-ratio is the pages' own 560 x 725. The cover is 760 x 985,
   within a third of a percent of the same ratio, so nothing is cropped
   noticeably when the stack alternates between them. */
.bookflip{position:relative;width:100%;aspect-ratio:560/725;perspective:2400px;perspective-origin:0% 50%;}
/* Binding edge behind the stack, so a turn reads as hinged paper rather
   than a slideshow with a 3D transform on it. */
.bookflip::before{content:"";position:absolute;top:1.5%;bottom:1.5%;left:-9px;width:13px;background:linear-gradient(90deg,var(--teal) 0%,var(--teal-deep) 60%,#2E5457 100%);border-radius:4px 0 0 4px;box-shadow:0 8px 20px rgba(70,118,122,.22);z-index:0;}
.bf-stage{position:absolute;inset:0;}
.bf-page{position:absolute;inset:0;transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .9s cubic-bezier(.42,.12,.22,1);border-radius:4px 10px 10px 4px;overflow:hidden;background:#fff;box-shadow:0 14px 34px rgba(70,118,122,.22);border:1px solid #e3efe9;}
.bf-page.is-turned{transform:rotateY(-178deg);}
.bf-page picture{display:block;width:100%;height:100%;}
.bf-page img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;box-shadow:none;}
/* Spine shading on the inside edge, a warm paper edge on the outside. */
.bf-page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(51,51,51,.16) 0%,rgba(51,51,51,.05) 3.5%,transparent 9%),linear-gradient(270deg,rgba(247,198,164,.35) 0%,transparent 2.5%);}
/* The Digital Download tag has to clear the turning stack. */
.bookcover .tag{z-index:6;}
.bf-dots{position:absolute;left:50%;bottom:-1.5rem;transform:translateX(-50%);display:flex;gap:6px;padding:0;margin:0;list-style:none;z-index:5;}
.bf-dots li{margin:0;}
.bf-dot{display:block;width:9px;height:9px;border-radius:50%;background:transparent;border:2px solid var(--teal);transition:background-color .18s ease,transform .18s ease,border-color .18s ease;}
.bf-dot[data-current="true"]{background:var(--rasp);border-color:var(--rasp);transform:scale(1.3);}
.bf-hint{margin:2.1rem 0 0;text-align:center;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#7c9a95;}
/* Reduced motion: the cover stays, nothing turns, and the dots would be
   claiming movement that is not happening — so they go too. */
@media(prefers-reduced-motion:reduce){
  .bf-page{transition:none;}
  .bf-dots{display:none;}
}

/* ---- Journey loop: the reference .loop, widened to seven ---- */
.loop--7{grid-template-columns:repeat(7,1fr);gap:12px;}
.loop--7 .step{padding:20px 12px;}
.loop--7 .step h3{font-size:14px;}
.loop--7 .step p{font-size:11.5px;}
@media(max-width:1200px){.loop--7{grid-template-columns:repeat(4,1fr);gap:16px;}}
@media(max-width:1000px){.loop--7{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.loop--7{grid-template-columns:1fr;}}

/* ---- Five pillars: the reference .cards3, widened to five ---- */
.cards5{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
@media(max-width:1200px){.cards5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:1000px){.cards5{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cards5{grid-template-columns:1fr;}}
.svc .word{font-size:22px;font-weight:700;color:var(--teal);letter-spacing:-.3px;margin-bottom:10px;}

/* ---- Topic chips (Bible Journey / Community rooms) ---- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.chips li{margin:0;font-size:13.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.24);border-radius:24px;padding:9px 16px;}
.chips--light li{color:var(--teal);background:#fff;border:1px solid #e3efe9;box-shadow:0 8px 22px rgba(70,118,122,.06);}
.steps{list-style:none;}
.steps li{position:relative;padding-left:34px;margin-bottom:11px;font-size:13.5px;line-height:1.5;color:#dcecea;}
.steps li b{color:#fff;}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--peach);color:var(--teal-deep);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.steps{counter-reset:st;}

/* ---- Speaking topic list ---- */
.topics{list-style:none;}
.topics li{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-bottom:1px solid #e3d0c4;font-size:16px;font-weight:600;color:var(--teal);}
.topics li:last-child{border-bottom:0;}
.topics li::before{content:"";flex:none;width:20px;height:2px;background:var(--rasp);transform:translateY(-5px);}

/* ---- Lead-magnet form, sitting inside the raspberry .ctaband ---- */
.leadgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;text-align:left;max-width:1080px;margin:0 auto;}
@media(max-width:1000px){.leadgrid{grid-template-columns:1fr;gap:28px;}}
.ctaband .leadgrid h2{margin-bottom:14px;}
.days{list-style:none;counter-reset:day;}
.days li{counter-increment:day;position:relative;padding-left:52px;margin-bottom:11px;font-size:14px;line-height:1.55;color:#f7dcea;}
.days li b{color:#fff;}
.days li::before{content:"Day " counter(day);position:absolute;left:0;top:1px;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--peach);}
.formcard{background:#fff;border-radius:14px;padding:30px 26px;box-shadow:0 14px 40px rgba(0,0,0,.16);}
.formcard .intro{font-size:14.5px;line-height:1.6;color:#556463;margin-bottom:20px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13px;font-weight:700;color:var(--teal);margin-bottom:7px;}
.field .req{color:var(--rasp);}
.field input{width:100%;padding:13px 15px;font-size:15px;background:#fff;color:var(--ink);border:1px solid #e3efe9;border-radius:10px;}
.field input::placeholder{color:#9bb0ad;}
.field input:hover{border-color:var(--teal);}
.field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(70,118,122,.15);}
.field input[aria-invalid="true"]{border-color:#b3261e;}
/* These live inside a white card that sits on the raspberry .ctaband, whose
   `.ctaband p` rule would otherwise win on specificity and render them in
   pale pink on white. Scoped to .formcard so the card owns its own colours. */
.formcard .field-error{display:none;font-size:12px;font-weight:700;color:#b3261e;margin-top:7px;}
.formcard .field-error.is-shown{display:block;}
.formcard .btn{width:100%;text-align:center;background:var(--rasp);color:#fff;}
.formcard .btn:hover{background:#a81c5c;color:#fff;}
.formcard .formnote{font-size:11.5px;line-height:1.5;color:#7c9a95;margin-top:14px;}
.formcard .formstatus{display:none;margin-top:14px;padding:13px;border-radius:10px;font-size:13.5px;}
.formcard .formstatus.is-shown{display:block;}
.formcard .formstatus.is-ok{background:var(--mint2);border:1px solid var(--teal-dk);color:var(--teal-dk);}
.formcard .formstatus.is-err{background:#fdecea;border:1px solid #b3261e;color:#8c1d18;}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}
.nextsteps{margin-top:18px;padding-top:18px;border-top:1px solid #e3efe9;}
.nextsteps p{font-size:13.5px;color:#556463;margin-bottom:12px;}

/* ---- Closing manifesto: the .insight band, oversized ---- */
.manifesto h2{font-size:44px;line-height:1.12;}
.manifesto h2 .scr{font-size:56px;}
.manifesto .close{font-family:'Alex Brush',cursive;font-size:44px;color:var(--peach);margin:22px 0 28px;line-height:1.1;}
.manifesto .btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
@media(max-width:1000px){.manifesto h2{font-size:28px;} .manifesto h2 .scr{font-size:36px;} .manifesto .close{font-size:32px;}}

/* ---- Footer: reference layout, plus a small link column ---- */
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-size:12.5px;}
@media(max-width:1000px){.foot-links{justify-content:center;}}
.foot-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
/* the rest of the site, set apart from the anchor links above it */
/* The footer is three labelled groups now — sections, pages, contact &
   legal. Before, they ran together as one list, so "Speaking" appeared twice
   with nothing to say which was the homepage section and which the page. */
.foot-group + .foot-group{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);}
.foot-h{font-size:10px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase;color:#8aa7a3;margin-top:16px;}
.foot-h + .foot-links{margin-top:7px;}
.foot-links a[aria-current="page"]{color:var(--peach);font-weight:700;}
@media(max-width:1000px){.foot-h{text-align:center;}}
footer .cross:hover{background:rgba(255,255,255,.16);}
.footmantra{font-family:'Alex Brush',cursive;font-size:22px;color:var(--peach);margin-top:20px;}

/* ---- Motion, only where it earns its place ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);}
.reveal.is-visible{opacity:1;transform:none;}
/* ---------------------------------------------------------------------------
   APP SHOWCASE — the live phone preview
   Built from existing vocabulary: .case's two-column split, .svc's peach rule,
   .chips' pill treatment. No new colours, no new fonts.
   The phone is a real <iframe> of app/, so what visitors touch here is
   the same code that installs to their phone. Below 1000px the frame is
   removed rather than shrunk — a phone drawn inside a phone helps no one.
   --------------------------------------------------------------------------- */
.sec-head .sec-sub{margin:14px auto 0;max-width:40rem;color:#5c6b69;font-size:17px;line-height:1.6;}

.appshow{display:grid;grid-template-columns:1fr;gap:40px;margin-top:44px;}

.appshow-copy p{color:#5c6b69;font-size:17px;line-height:1.75;}
.applist{list-style:none;margin:24px 0 30px;}
.applist li{position:relative;padding:0 0 0 22px;margin-bottom:13px;color:#5c6b69;font-size:15.5px;line-height:1.65;}
.applist li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--peach);}
.applist strong{color:var(--teal-deep);font-weight:700;}

.appctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.appctas--minor{margin-top:16px;}
/* .btn.ghost is white-bordered for dark bands; this section sits on white. */
.appshow .btn.ghost{color:var(--teal);border-color:rgba(70,118,122,.45);}
.appshow .btn.ghost:hover{background:var(--mint2);border-color:var(--teal);}
.linky{color:var(--teal);font-size:14.5px;font-weight:600;border-bottom:1px solid rgba(70,118,122,.35);padding-bottom:2px;}
.linky:hover{color:var(--teal-deep);border-bottom-color:var(--teal-deep);}

.stores-lead{margin:34px 0 12px;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#7d8f8d;}
.stores{display:flex;flex-wrap:wrap;gap:10px;}
/* Deliberately not Apple/Google badge art: these do not go to a store yet, and
   dressing them as real badges would be the misleading thing §4 rules out. */
.store{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid #e3ece9;border-radius:12px;background:#fff;}
.store:hover{border-color:var(--peach);background:#fffaf6;}
.store-n{font-size:14px;font-weight:700;color:var(--teal-deep);letter-spacing:.2px;}
.storenote{margin-top:14px;font-size:13px;line-height:1.65;color:#7d8f8d;max-width:34rem;}

.appshow-device{display:none;}
.devpick{display:flex;gap:6px;justify-content:center;margin-bottom:18px;}
.devbtn{padding:7px 15px;border-radius:999px;border:1px solid #e3ece9;background:#fff;font-size:12px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:#7d8f8d;}
.devbtn:hover{border-color:var(--teal);color:var(--teal);}
.devbtn.is-on{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;}

/* ==========================================================================
   THE DEVICE — a photorealistic flagship handset in pure CSS
   --------------------------------------------------------------------------
   Not a reproduction of any manufacturer's protected design. It uses the
   shared visual language every modern flagship shares — a brushed metal rail
   with antenna breaks, machined side keys, a uniform hairline bezel, a sensor
   pill, and tempered glass with a specular sweep — so it reads unmistakably
   as a premium phone without copying one.

   Realism here comes from four things stacked, in this order:
     1. the rail       — brushed metal, lit from upper-left
     2. the bezel      — near-black, uniform width, catching a rim light
     3. the glass      — a broad specular sweep plus a tight edge highlight
     4. the shadow     — contact shadow tight, ambient shadow wide and soft
   Remove any one and it goes back to looking like a rounded rectangle.
   ========================================================================== */

.phone{
  --ph-w:375px;                       /* screen width — the iframe's own width */
  --ph-r:58px;                        /* outer corner radius */
  --ph-bezel:12px;                    /* uniform black border around the glass */
  --ph-rail:3px;                      /* metal visible outside the bezel */
  position:relative;margin:0 auto;
  /* The rail is the only padding here. The bezel belongs to .phone-body,
     and counting it in both places made the screen overflow its own bezel
     by exactly 2x the bezel — which left the glass overlay 24px narrower
     than the screen it was meant to sit on. */
  width:calc(var(--ph-w) + (var(--ph-bezel) + var(--ph-rail)) * 2);
  padding:var(--ph-rail);
  border-radius:var(--ph-r);
  /* Brushed titanium: a warm-to-cool sweep with hard highlight bands where a
     machined chamfer would catch the light. */
  background:
    linear-gradient(148deg,
      #f2f5f6 0%, #b9c4c6 6%, #7d8d8f 14%,
      #5d6d6f 30%, #48585a 50%, #3c4c4e 66%,
      #55666a 82%, #93a2a4 92%, #dfe7e8 100%);
  box-shadow:
    /* the chamfer catching light along the top edge */
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(0,0,0,.35) inset,
    /* contact shadow — tight and dark, sells the object sitting on a surface */
    0 12px 20px -10px rgba(20,32,33,.55),
    /* ambient shadow — wide and soft */
    0 46px 90px -28px rgba(20,32,33,.48),
    0 90px 130px -60px rgba(20,32,33,.35);
}

/* The rail's inner edge, where metal meets glass. A single hairline does more
   for realism than any amount of gradient. */
.ph-rail{
  position:absolute;inset:var(--ph-rail);
  border-radius:calc(var(--ph-r) - var(--ph-rail));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.22) inset,
    0 0 0 2px rgba(0,0,0,.55) inset;
  pointer-events:none;
}

/* Antenna breaks — the thin non-metal bands on a real rail. */
.phone::before,
.phone::after{
  content:"";position:absolute;left:-1px;right:-1px;height:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34) 12%,
             rgba(255,255,255,.34) 88%,transparent);
  mix-blend-mode:overlay;pointer-events:none;
}
.phone::before{top:78px;}
.phone::after{bottom:78px;}

/* The black body the glass sits in. */
.phone-body{
  position:relative;
  border-radius:calc(var(--ph-r) - var(--ph-rail) - 1px);
  background:#05090a;
  padding:var(--ph-bezel);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
}

.phone-screen{
  position:relative;overflow:hidden;
  border-radius:calc(var(--ph-r) - var(--ph-rail) - var(--ph-bezel));
  background:var(--mint);
  width:var(--ph-w);height:min(718px,72vh);
  /* the glass sinking a hair below the bezel */
  box-shadow:0 0 0 1px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.5) inset;
}
.phone-screen iframe{display:block;width:100%;height:100%;border:0;}

/* Sensor pill, with a real lens inside it. */
.phone-cam{
  position:absolute;top:calc(var(--ph-bezel) + 9px);left:50%;
  transform:translateX(-50%);
  width:104px;height:29px;border-radius:999px;z-index:3;
  background:#000;
  box-shadow:0 0 0 .5px rgba(255,255,255,.10), 0 1px 3px rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:9px;pointer-events:none;
}
.ph-lens{
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    #3f5a68 0%, #1b2b33 42%, #050a0d 72%);
  box-shadow:0 0 0 .5px rgba(120,160,180,.35), 0 0 4px rgba(90,140,170,.30);
}

/* Home indicator. */
.ph-bar{
  position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:36%;height:5px;border-radius:999px;
  background:rgba(10,20,20,.32);z-index:4;pointer-events:none;
}

/* --- side keys -------------------------------------------------------- */
.ph-key{
  position:absolute;pointer-events:none;border-radius:3px;
  background:linear-gradient(180deg,#e8eeef,#8f9fa1 22%,#4e5e60 60%,#2c3b3d);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 2px 5px rgba(0,0,0,.4);
}
/* left rail */
.ph-key--action{left:-3px;top:104px;width:4px;height:30px;border-radius:3px 0 0 3px;}
.ph-key--volup {left:-3px;top:154px;width:4px;height:52px;border-radius:3px 0 0 3px;}
.ph-key--voldn {left:-3px;top:216px;width:4px;height:52px;border-radius:3px 0 0 3px;}
/* right rail */
.ph-key--power {right:-3px;top:176px;width:4px;height:78px;border-radius:0 3px 3px 0;}

/* --- glass ------------------------------------------------------------ */
/* A broad diagonal sweep, then a tight highlight riding the top-left corner.
   Never intercepts a tap meant for the app. */
.phone-gloss{
  position:absolute;inset:var(--ph-bezel);
  border-radius:calc(var(--ph-r) - var(--ph-rail) - var(--ph-bezel));
  pointer-events:none;z-index:5;
  background:
    /* the long diagonal sheen a pane of glass throws across a bright screen */
    linear-gradient(115deg,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.28) 9%,
      rgba(255,255,255,.06) 19%,
      rgba(255,255,255,0)   31%),
    /* a second, softer band lower down — real reflections are never single */
    linear-gradient(115deg,
      rgba(255,255,255,0)   52%,
      rgba(255,255,255,.10) 60%,
      rgba(255,255,255,0)   70%),
    /* corner bloom where the curved glass gathers light */
    radial-gradient(130% 70% at 6% -10%, rgba(255,255,255,.42), transparent 55%),
    /* the edge of glass absorbs light — a faint vignette gives it depth */
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(20,34,36,.13) 100%);
}
/* The bright rim where the curved glass meets the bezel. */
.ph-edge{
  position:absolute;inset:var(--ph-bezel);
  border-radius:calc(var(--ph-r) - var(--ph-rail) - var(--ph-bezel));
  pointer-events:none;z-index:6;
  box-shadow:
    0 1px 0 rgba(255,255,255,.30) inset,
    0 0 14px rgba(255,255,255,.10) inset;
}

/* --- Android ---------------------------------------------------------- */
/* Same construction, different industrial design: tighter radius, a centred
   punch-hole rather than a pill, both keys on the right rail. */
.phone[data-device="android"]{
  --ph-w:400px; --ph-r:42px; --ph-bezel:10px;
  background:
    linear-gradient(148deg,
      #eef1f2 0%, #aeb8ba 7%, #6f7d80 16%,
      #4a595b 34%, #37464a 52%, #2f3e42 68%,
      #4a5a5e 84%, #c3cdcf 94%, #eef2f3 100%);
}
.phone[data-device="android"] .phone-screen{height:min(730px,73vh);}
.phone[data-device="android"] .phone-cam{
  width:12px;height:12px;top:calc(var(--ph-bezel) + 12px);padding:0;
  justify-content:center;
}
.phone[data-device="android"] .ph-lens{width:8px;height:8px;}
.phone[data-device="android"] .ph-bar{width:28%;height:4px;bottom:6px;}
.phone[data-device="android"] .ph-key--action{display:none;}
.phone[data-device="android"] .ph-key--power{right:-3px;top:120px;height:44px;}
.phone[data-device="android"] .ph-key--volup{left:auto;right:-3px;top:176px;
  height:88px;border-radius:0 3px 3px 0;}
.phone[data-device="android"] .ph-key--voldn{display:none;}
.phone[data-device="android"]::before{top:64px;}
.phone[data-device="android"]::after{bottom:64px;}

/* Narrow screens: the device is decoration, so let it shrink rather than
   force a horizontal scrollbar. */
@media(max-width:1100px){
  .phone{--ph-w:330px;--ph-r:50px;--ph-bezel:10px;}
  .phone[data-device="android"]{--ph-w:340px;--ph-r:38px;}
}

.phone-note{margin-top:20px;text-align:center;font-size:12.5px;color:#7d8f8d;letter-spacing:.3px;}

@media(min-width:1000px){
  .appshow{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,5vw,80px);align-items:center;}
  .appshow-device{display:block;}
}

html:not(.js) .reveal{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* ---------- Form: name / phone / mailing address rows -------------------
   Single column on phones, paired or tripled once there is room. The gap
   comes from the grid so it never fights .field's own bottom margin. */
.fieldrow{display:grid;gap:0 14px;}
@media(min-width:520px){
  .fieldrow{grid-template-columns:1fr 1fr;}
  .fieldrow--csz{grid-template-columns:1.6fr .7fr .9fr;}
}

/* "Optional" marker. Says it in the label rather than leaving the visitor to
   infer it from the absence of an asterisk. */
.field label .opt{
  margin-left:6px;font-size:10.5px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:#7c9a95;
}
.formcard .field-hint{
  font-size:11.5px;line-height:1.5;color:#7c9a95;margin-top:6px;
}

/* Text-message opt-in. Deliberately not a .field — that rule sets
   width:100% on inputs, which would stretch the checkbox across the card. */
.consent{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:start;margin:4px 0 18px;
}
.consent input[type="checkbox"]{
  width:19px;height:19px;margin:2px 0 0;flex:none;
  accent-color:var(--rasp);cursor:pointer;
}
.consent label{
  font-size:12.5px;line-height:1.55;color:#5b6b69;font-weight:500;
  cursor:pointer;margin:0;
}
.consent label [data-sms-label]{
  display:block;font-weight:700;color:var(--teal);font-size:13px;margin-bottom:3px;
}
/* The required TCPA disclosure. Small, but never hidden, collapsed behind a
   link, or lightened past legibility — a consent nobody could read is not a
   consent. Contrast here is 5.4:1, comfortably past AA. */
.consent-fine{
  display:block;font-size:11px;line-height:1.5;color:#61736f;font-weight:400;
}
.consent-fine b{color:var(--ink);font-weight:700;}
.consent-fine a{color:var(--rasp);text-decoration:underline;font-weight:600;}
.consent input:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.consent input[aria-invalid="true"]{outline:2px solid #b3261e;outline-offset:2px;}
.formcard .consent + .field-error{margin-top:-10px;margin-bottom:16px;}

.formcard .formnote a{color:var(--rasp);text-decoration:underline;font-weight:600;}

/* Pre-purchase refund disclosure. Quiet, but present before the money moves. */
.buynote{
  margin:14px 0 0;font-size:12px;line-height:1.55;color:#6b7f7c;max-width:46ch;
}
.buynote b{color:var(--ink);font-weight:700;}
.buynote a{color:var(--rasp);text-decoration:underline;font-weight:600;}
.nextsteps .buynote{margin-top:10px;}

/* ---------- Good to Know (FAQ) ------------------------------------------
   Moved from prayer-book.html on 24 Aug 2026. That page's .faq styling lives
   in css/styles.css, which this page does not load, so the component is
   rebuilt here out of the reference's own vocabulary: the .step card — white,
   1px mint border, 3px raspberry top edge, same shadow — laid out as a stack
   instead of a grid.

   <details> is used rather than JavaScript, so every answer is reachable with
   the keyboard, findable by in-page search, and open by default when styles
   or scripts fail to load. ---------------------------------------------- */
.faqs{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq{background:#fff;border:1px solid #e3efe9;border-top:3px solid var(--rasp);border-radius:12px;box-shadow:0 8px 22px rgba(70,118,122,.06);overflow:hidden;}
.faq>summary{list-style:none;cursor:pointer;padding:18px 46px 18px 20px;font-size:15.5px;font-weight:700;color:var(--teal);position:relative;}
.faq>summary::-webkit-details-marker{display:none;}
.faq>summary::after{content:"";position:absolute;right:20px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid var(--rasp);border-bottom:2px solid var(--rasp);transform:rotate(45deg);transition:transform .2s ease;}
.faq[open]>summary::after{transform:rotate(-135deg);margin-top:-2px;}
.faq>summary:hover{background:var(--mint2);}
.faq p{padding:0 20px 18px;font-size:14.5px;line-height:1.6;color:#5c6b69;}
.faq p a{color:var(--rasp);text-decoration:underline;}
@media(prefers-reduced-motion:reduce){.faq>summary::after{transition:none;}}
@media(max-width:560px){.faq>summary{font-size:14.5px;padding:15px 40px 15px 16px;}.faq p{padding:0 16px 15px;font-size:13.5px;}}

/* ---------- Before-purchase details dialog ------------------------------ */
/* position + margin:auto are set explicitly because the site's global reset
   zeroes margins, which kills the centring a modal <dialog> normally gets
   for free from the UA stylesheet. Without these it pins to the top-left. */
.gate{
  position:fixed;inset:0;margin:auto;
  border:0;padding:0;border-radius:16px;width:min(480px,calc(100vw - 32px));
  max-height:calc(100vh - 40px);height:fit-content;overflow:auto;
  background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(42,61,63,.32);
}
.gate::backdrop{background:rgba(42,61,63,.55);}
.gate .gate-in{padding:30px 28px 28px;}
.gate .eyebrow{margin-bottom:10px;}
.gate h2{font-size:24px;font-weight:700;color:var(--teal);margin:0 0 8px;letter-spacing:-.3px;}
.gate .gate-lede{font-size:14px;line-height:1.6;color:#556463;margin:0 0 20px;}
.gate .field label{display:block;font-size:13px;font-weight:700;color:var(--teal);margin-bottom:7px;}
.gate .field input{
  width:100%;padding:13px 15px;font-size:15px;font-family:inherit;
  background:#fff;color:var(--ink);border:1px solid #e3efe9;border-radius:10px;
}
.gate .field input::placeholder{color:#9bb0ad;}
.gate .field input:hover{border-color:var(--teal);}
.gate .field input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(70,118,122,.15);}
.gate .field input[aria-invalid="true"]{border-color:#b3261e;}
.gate .field-error{display:none;font-size:12px;font-weight:700;color:#b3261e;margin:7px 0 0;}
.gate .field-error.is-shown{display:block;}
.gate .field-hint{font-size:11.5px;line-height:1.5;color:#7c9a95;margin:6px 0 0;}
.gate .btn{width:100%;text-align:center;border:0;cursor:pointer;font-family:inherit;margin-top:6px;}
.gate .btn:disabled{opacity:.6;cursor:default;}
.gate .buynote{margin-top:14px;}
.gate .formstatus{display:none;margin-top:14px;padding:12px;border-radius:10px;font-size:13px;}
.gate .formstatus.is-shown{display:block;}
.gate .formstatus.is-ok{background:var(--mint2);border:1px solid var(--teal-dk);color:var(--teal-dk);}
.gate .formstatus.is-err{background:#fdecea;border:1px solid #b3261e;color:#8c1d18;}

.gate-x{position:sticky;top:0;float:right;margin:10px 12px 0 0;z-index:2;}
.gate-x button{
  border:0;background:transparent;cursor:pointer;font-size:26px;line-height:1;
  color:#8aa39e;padding:6px 10px;border-radius:8px;font-family:inherit;
}
.gate-x button:hover{color:var(--rasp);background:var(--mint2);}
.gate-x button:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}

@media print{
  nav,.ctaband,.manifesto,.gate{display:none!important;}
  body{background:#fff;color:#000;}
  .js .needpanel[hidden]{display:block!important;}
}

/* ---------- QR code in the app showcase (§7) ---------------------------- */
.qrbox{
  display:flex;align-items:center;gap:16px;margin:22px 0 4px;
  padding:14px 16px;background:var(--mint2);border:1px solid var(--line,#e3efe9);
  border-radius:14px;
}
.qr{
  flex:none;width:92px;height:92px;padding:8px;background:#fff;border-radius:10px;
  display:flex;align-items:center;justify-content:center;color:var(--teal-deep);
  box-shadow:0 2px 8px rgba(42,61,63,.08);
}
.qr img{width:100%;height:100%;display:block;}
.qrtext{min-width:0;}
.qr-h{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--teal);}
.qr-p{margin:0;font-size:12.5px;line-height:1.55;color:#5b6b69;max-width:34ch;}
@media(max-width:600px){
  .qrbox{gap:13px;padding:12px;}
  .qr{width:76px;height:76px;padding:6px;}
  .qr-p{font-size:12px;}
}