@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;}
html{scroll-behavior:smooth;}
body{font-family:'Montserrat',sans-serif;color:var(--ink);background:#fff;}
.wrap{width:100%;max-width:1440px;margin:0 auto;overflow-x:hidden;}
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;}
/* 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);}
/* 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;}

/* === reference hero image: exact positioning & size (rhondasampson.com) === */
.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, pulled off the right edge so the glasses are not jammed
   against it, and masked so the base dissolves into the background instead
   of ending on a hard cutout edge. */
.mhero .mimg img{
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.55) 87%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,.55) 87%,transparent 100%);
}
@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% */
  }
  /* A band at the foot of the portrait slot holds the credit. The portrait
     stops 74px short of the bottom instead of running to it.
     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:74px;width:100%;height:calc(100% - 74px);}
  /* Boxed to the portrait's own width and right-aligned with it, so the
     block centres on her rather than on the column.

     443px, not a percentage of the slot: the portrait is contain-fitted and
     HEIGHT-limited, so its width is (heroHeight - band) x 1000/1577 =
     (772 - 74) x .6341 = 443px, and stays 443px as the slot narrows. A
     percentage of slot width drifts off her centre — 26px out at 1440,
     83px at 1000. min() caps it once the slot itself is the narrower of
     the two. 9.5px/0.6px puts the roles line at 404px, inside the 443. */
  .mhero .sigline{
    position:absolute;right:0;left:auto;width:min(443px,100%);max-width:none;
    bottom:8px;margin:0;
    font-size:9.5px;letter-spacing:.6px;
  }
  /* 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 CTA survives (reference behaviour), so it
   must not wrap into a two-line blob. Dropping the logo's strapline frees
   exactly enough room for it to sit on one line. ---- */
@media(max-width:560px){
  .logo .nm small{display:none;}
  .navlinks .cta{white-space:nowrap;padding:10px 16px;font-size:11.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;}
.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;}
.peek{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px;}
@media(max-width:560px){.peek{grid-template-columns:1fr 1fr;}}
.peek figure{margin:0;}
.peek img{border-radius:10px;border:1px solid #e3efe9;box-shadow:0 8px 22px rgba(70,118,122,.06);}
.peek figcaption{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#7c9a95;margin-top:9px;text-align:center;}
@media(max-width:1000px){.book{grid-template-columns:1fr;} .book h2{font-size:24px;} .book .claim{font-size:18px;}}

/* ---- 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;}
footer .cross:hover{background:rgba(255,255,255,.16);}
.footmantra{font-family:'Alex Brush',cursive;font-size:22px;color:var(--peach);}

/* ---- 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 nourishment/, 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;}

.phone{position:relative;margin:0 auto;background:#2A3D3F;
  padding:27px 13px 14px;border-radius:46px;
  box-shadow:0 2px 0 rgba(255,255,255,.18) inset,0 34px 70px -22px rgba(42,61,63,.5),0 8px 22px -8px rgba(42,61,63,.3);}
/* Height tracks the window so the phone doesn't overflow a short laptop
   screen; the cap keeps it phone-proportioned on tall ones. */
.phone-screen{position:relative;overflow:hidden;border-radius:33px;background:var(--mint);
  width:375px;height:min(718px,72vh);}
.phone-screen iframe{display:block;width:100%;height:100%;border:0;}
.phone-cam{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:56px;height:8px;border-radius:999px;background:#12211f;}
/* Must never intercept a tap meant for the app. */
.phone-gloss{position:absolute;inset:0;border-radius:46px;pointer-events:none;
  background:linear-gradient(128deg,rgba(255,255,255,.16) 0 26%,transparent 46%);}
.phone[data-device="android"]{padding:23px 11px 12px;border-radius:34px;}
.phone[data-device="android"] .phone-screen{width:400px;height:min(730px,73vh);border-radius:24px;}
.phone[data-device="android"] .phone-cam{width:9px;height:9px;top:8px;}
.phone[data-device="android"] .phone-gloss{border-radius:34px;}
.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;}

/* ---------- 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;}
}