/* ============================================================
   Rockwell Health - "Editorial" · New Patients (interior page)
   Page-only section styles on top of the shared editorial system
   (../style.css, READ-ONLY): :root tokens, base type, header,
   footer, .ed-wrap, .ed-head/.ed-eyebrow/.ed-kicker, .ed-btn*,
   .ed-textlink, .ed-close (shared light closer), focus + motion.
   Everything below is namespaced ed-np- so it never collides with
   shared components or sibling pages.
   Brand: navy #262168 / red #e0271c only (+ warm neutrals).

   Spine (light throughout; no navy slab):
     1 · open    type-led editorial masthead
     2 · expect  three ruled columns, ghost icon marks
     3 · bring   sand band: framing copy + ruled checklist + note
     4 · book    three numbered steps + a quiet good-to-know pair
     5 · close   shared light closer (.ed-close)
   ============================================================ */

/* ============================================================
   1 · Masthead - type-led editorial opening
   ============================================================ */
.ed-np-open{
  background:
    radial-gradient(120% 140% at 88% -10%, #fffdf9 0%, rgba(255,253,249,0) 46%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
}
.ed-np-open-in{
  padding-block:clamp(58px,8.5vw,116px) clamp(44px,6vw,78px);
}
.ed-np-open h1{
  font-size:clamp(2.6rem,6vw,4.8rem);
  line-height:1.02; letter-spacing:-.028em; color:var(--navy);
  max-width:15ch;
}
.ed-np-open h1 em{ font-style:italic; font-weight:600; color:var(--red); }
.ed-np-lede{
  margin-top:clamp(24px,3.2vw,38px); max-width:58ch;
  font-size:clamp(1.1rem,1.35vw,1.3rem);
  line-height:1.6; color:var(--body); text-wrap:pretty;
}

/* ============================================================
   2 · What to expect - three ruled columns with ghost icon marks
   (echoes the homepage care-philosophy row, one prefix removed).
   ============================================================ */
.ed-np-expect{ padding-block:var(--sec); background:var(--paper); }
.ed-np-points{
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  border-top:1px solid var(--line-2);
}
.ed-np-point{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(30px,3vw,42px) clamp(20px,1.9vw,32px) clamp(6px,1vw,12px);
}
.ed-np-point:first-child{ padding-inline-start:0; }
.ed-np-point:last-child{ padding-inline-end:0; }
.ed-np-point + .ed-np-point{ border-inline-start:1px solid var(--line); }
.ed-np-point-mk{
  display:grid; place-items:center; flex:none;
  width:52px; height:52px; border-radius:var(--r);
  margin-bottom:clamp(20px,2vw,26px);
  background:transparent; border:1px solid var(--navy); color:var(--navy);
  transition:transform var(--med) var(--ease-expo),
             border-color var(--med) var(--ease-expo),
             color var(--med) var(--ease-expo);
}
.ed-np-point-mk svg{ width:24px; height:24px; }
.ed-np-point h3{
  font-size:1.24rem; font-weight:600; line-height:1.2;
  letter-spacing:-.012em; color:var(--navy);
  position:relative;
}
.ed-np-point h3::after{
  content:""; position:absolute; left:0; bottom:-9px;
  width:0; height:2px; border-radius:2px; background:var(--red);
  transition:width var(--med) var(--ease-expo);
}
.ed-np-point p{
  margin-top:18px; max-width:30ch;
  color:var(--body-2); font-size:.97rem; line-height:1.55; text-wrap:pretty;
}
.ed-np-point:hover .ed-np-point-mk{ transform:translateY(-4px); border-color:var(--red); color:var(--red); }
.ed-np-point:hover h3::after{ width:30px; }

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-np-point{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 2% cover 24%;
    }
    .ed-np-point:nth-child(2){ animation-range:entry 6% cover 28%; }
    .ed-np-point:nth-child(3){ animation-range:entry 10% cover 32%; }
  }
}

/* ============================================================
   3 · What to bring - sand band, asymmetric.
   Framing copy on the left; a ruled checklist on the right, with a
   plain-spoken forms note hanging from a hairline beneath it.
   ============================================================ */
.ed-np-bring{
  padding-block:var(--sec);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.ed-np-bring-in{
  display:grid; grid-template-columns:0.86fr 1.14fr;
  gap:clamp(30px,4vw,64px); align-items:start;
}
.ed-np-bring-head{ max-width:34rem; }
.ed-np-bring-head h2{
  font-size:clamp(2rem,3.4vw,2.85rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.08; color:var(--navy);
}
.ed-np-bring-lede{
  margin-top:18px; max-width:40ch;
  font-size:clamp(1.04rem,1.2vw,1.18rem); line-height:1.6; color:var(--body-2);
}

/* ruled checklist */
.ed-np-list{
  border-top:1px solid var(--line-2);
}
.ed-np-item{
  display:grid; grid-template-columns:auto 1fr; align-items:start;
  gap:clamp(15px,1.8vw,22px);
  padding:clamp(18px,2.1vw,24px) 0;
  border-bottom:1px solid var(--line);
}
.ed-np-check{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border-radius:var(--r-sm);
  background:var(--card); color:var(--navy);
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
}
.ed-np-check svg{ width:19px; height:19px; }
.ed-np-item-txt{
  display:flex; flex-direction:column; gap:5px;
  font-size:.98rem; line-height:1.5; color:var(--body-2);
}
.ed-np-item-txt strong{
  font-family:"Spectral",serif; font-weight:600; color:var(--navy);
  font-size:1.16rem; letter-spacing:-.012em; line-height:1.22;
}

/* forms note */
.ed-np-forms{
  display:flex; align-items:flex-start; gap:11px;
  margin-top:clamp(22px,2.4vw,30px);
  padding-top:clamp(18px,2vw,24px);
  border-top:1px solid var(--line-2);
  font-size:.94rem; line-height:1.56; color:var(--body-2); max-width:62ch;
}
.ed-np-forms svg{ width:19px; height:19px; flex:none; color:var(--red-ink); margin-top:.12em; }
.ed-np-forms strong{ color:var(--body); font-weight:700; }

/* ============================================================
   4 · Booking your first visit - three numbered steps
   (house style: Spectral folio numeral + short red rule), then a
   quiet good-to-know pair for insurance + telehealth.
   ============================================================ */
.ed-np-book{ padding-block:var(--sec); background:var(--paper); }
.ed-np-steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  border-top:1px solid var(--line-2);
}
.ed-np-step{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(30px,3vw,44px) clamp(20px,1.9vw,32px) clamp(8px,1vw,14px);
}
.ed-np-step:first-child{ padding-inline-start:0; }
.ed-np-step:last-child{ padding-inline-end:0; }
.ed-np-step + .ed-np-step{ border-inline-start:1px solid var(--line); }
.ed-np-step-no{
  font-family:"Spectral",serif; font-style:italic; font-weight:700;
  font-size:clamp(2.6rem,4vw,3.4rem); line-height:1;
  letter-spacing:-.02em; color:var(--navy);
  position:relative; padding-bottom:clamp(14px,1.6vw,18px);
  margin-bottom:clamp(16px,1.8vw,22px);
}
.ed-np-step-no::after{
  content:""; position:absolute; left:0; bottom:0;
  width:32px; height:2px; border-radius:2px; background:var(--red);
}
.ed-np-step h3{
  font-size:clamp(1.2rem,1.6vw,1.42rem); font-weight:600;
  letter-spacing:-.012em; line-height:1.18; color:var(--navy);
}
.ed-np-step p{
  margin-top:12px; max-width:32ch;
  color:var(--body-2); font-size:.98rem; line-height:1.56;
}
.ed-np-step-link{ margin-top:16px; font-size:.98rem; }

/* step 2 phone lines */
.ed-np-step-calls{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.ed-np-step-calls a{
  font-family:"Spectral",serif; font-weight:600; font-size:1.14rem;
  letter-spacing:-.01em; color:var(--navy); width:fit-content;
  border-radius:var(--r-xs); transition:color var(--fast) var(--ease);
}
.ed-np-step-calls a:hover{ color:var(--red-ink); }
.ed-np-call-k{
  display:inline-block; min-width:5.4em;
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body-2);
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-np-step{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 2% cover 24%;
    }
    .ed-np-step:nth-child(2){ animation-range:entry 6% cover 28%; }
    .ed-np-step:nth-child(3){ animation-range:entry 10% cover 32%; }
  }
}

/* --- good to know: insurance + telehealth --- */
.ed-np-notes{
  margin-top:clamp(40px,4.6vw,64px);
  padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--line-2);
}
.ed-np-notes-eyebrow{
  font-family:"Figtree",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red-ink); margin-bottom:clamp(18px,2vw,24px);
  display:flex; align-items:center; gap:.85em;
}
.ed-np-notes-eyebrow::before{
  content:""; width:26px; height:1.5px; background:var(--red); flex:none;
}
.ed-np-notes-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px,1.8vw,22px);
}
.ed-np-note{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(24px,2.4vw,32px);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform var(--med) var(--ease),
             box-shadow var(--med) var(--ease),
             border-color var(--med) var(--ease);
}
.ed-np-note:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); }
.ed-np-note-ic{
  display:grid; place-items:center; flex:none;
  width:46px; height:46px; border-radius:var(--r-sm);
  background:var(--paper-2); color:var(--navy);
  border:1px solid var(--line-2);
  margin-bottom:clamp(16px,1.8vw,20px);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.ed-np-note-ic svg{ width:22px; height:22px; }
.ed-np-note:hover .ed-np-note-ic{ background:var(--navy); color:#ff8a80; border-color:var(--navy); }
.ed-np-note h3{
  font-size:1.32rem; font-weight:600; letter-spacing:-.012em;
  line-height:1.14; color:var(--navy);
}
.ed-np-note p{
  margin-top:10px; margin-bottom:clamp(16px,1.8vw,20px);
  font-size:.97rem; line-height:1.56; color:var(--body-2); max-width:40ch;
}
.ed-np-note .ed-textlink{ margin-top:auto; }

/* ============================================================
   Responsive - 1024 (tablet)
   ============================================================ */
@media (max-width:1024px){
  /* expect columns → 2-up ruled */
  .ed-np-points{ grid-template-columns:repeat(2,1fr); }
  .ed-np-point{ padding:clamp(26px,3vw,34px) 0 0; }
  .ed-np-point + .ed-np-point{ border-inline-start:none; }
  .ed-np-point:nth-child(2n){ border-inline-start:1px solid var(--line); padding-inline-start:clamp(28px,3.4vw,44px); }
  .ed-np-point:nth-child(2n+1){ padding-inline-end:clamp(28px,3.4vw,44px); }
  .ed-np-point:nth-child(3){ border-top:1px solid var(--line); margin-top:clamp(4px,1.2vw,14px); padding-top:clamp(26px,3vw,34px); }
  .ed-np-point p{ max-width:34ch; }

  /* what to bring stacks */
  .ed-np-bring-in{ grid-template-columns:1fr; gap:clamp(28px,4vw,40px); }
  .ed-np-bring-head{ max-width:60ch; }
  .ed-np-bring-lede{ max-width:60ch; }
}

/* ============================================================
   Responsive - 760
   ============================================================ */
@media (max-width:760px){
  /* steps → single column */
  .ed-np-steps{ grid-template-columns:1fr; }
  .ed-np-step{ padding:clamp(24px,5vw,30px) 0; }
  .ed-np-step:first-child{ padding-top:clamp(26px,5vw,32px); }
  .ed-np-step + .ed-np-step{ border-inline-start:none; border-top:1px solid var(--line); }
  .ed-np-step p{ max-width:52ch; }

  /* good-to-know → single column */
  .ed-np-notes-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Responsive - 560 (phone, 390 target)
   ============================================================ */
@media (max-width:560px){
  .ed-np-open h1{ font-size:clamp(2.2rem,10vw,2.9rem); max-width:none; }

  /* expect points → single column, horizontal rules */
  .ed-np-points{ grid-template-columns:1fr; }
  .ed-np-point,
  .ed-np-point + .ed-np-point,
  .ed-np-point:nth-child(2n),
  .ed-np-point:nth-child(2n+1){ border-inline-start:none; padding-inline:0; }
  .ed-np-point{ padding:clamp(22px,5vw,28px) 0 0; }
  .ed-np-point + .ed-np-point{ border-top:1px solid var(--line); }
  .ed-np-point:first-child{ padding-top:clamp(26px,5vw,32px); }
  .ed-np-point p{ max-width:54ch; }
}

/* ============================================================
   Reduced motion - neutralize this page's reveals/hovers
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ed-np-point,.ed-np-step{ animation:none; opacity:1; transform:none; }
  .ed-np-point:hover .ed-np-point-mk,
  .ed-np-note:hover{ transform:none; }
}