/* =====================================================================
   page: how-we-work.html  (loaded after base.css; base.css tokens only)
   Rhythm: paper type hero with the plain facts flat on the right -> paper-2 "who"
   and one long review -> sky-deep steps with the heading held left ->
   paper ledger of the three services -> paper-2 FAQ (details) -> short CTA.
   ===================================================================== */

/* 1. hero */
.hw-hero{padding-block:var(--s6) var(--s8)}
.hw-hero h1{font-size:clamp(2.45rem,1.5rem + 3.4vw,4.1rem)}
.hw-hero .lead{margin-top:var(--s5);max-width:52ch}
.hw-hero__btns{margin-top:var(--s6)}
.hw-hero .hero__micro{margin-top:var(--s3);max-width:52ch}
.hw-hero__side .photo-slot{max-width:400px;margin-bottom:var(--s5)}
@media (max-width:599px){
  .hw-hero__btns{flex-direction:column;align-items:stretch}
  .hw-hero__btns .btn{width:100%}
}
@media (min-width:1024px){
  .hw-hero{padding-block:var(--s8) var(--s9)}
  .hw-hero__grid{align-items:end}
  .hw-hero__side{justify-self:end;width:100%;max-width:420px}
}

/* hero facts: a plain ruled list, flat (no tilt, no shadow) */
.hw-facts{border-top:var(--border)}
.hw-facts > div{display:grid;gap:2px;padding-block:var(--s3);border-bottom:var(--hair)}
.hw-facts dt{font:700 var(--t-label)/1.4 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.hw-facts dd{margin:0}
@media (min-width:480px){ .hw-facts > div{grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s4)} }

/* 2. meet stephanie */
@media (min-width:1024px){
  .hw-meet{align-items:start}
  .hw-meet__rev{margin-top:var(--s7)}
}

/* 3. how it works: heading held left while the steps run on the right */
@media (min-width:1024px){
  .hw-how > :nth-child(1){grid-column:1 / span 5}
  .hw-how > :nth-child(2){grid-column:7 / span 6}
  .hw-how__head{position:sticky;top:calc(var(--header-h) + var(--s6));align-self:start}
  .hw-how .steps__row{grid-template-columns:3.5rem minmax(0,1fr);row-gap:var(--s2);align-items:start}
  .hw-how .steps__n{grid-row:1 / span 2;margin-top:-.45rem}
}

/* 4. what we clean: the service names are links */
.hw-ledger .ledger__name a{color:var(--ink);text-decoration:none}
.hw-ledger .ledger__name a:hover{color:var(--sky-ink);text-decoration:underline}
.hw-ledger .link-go{display:table;margin-top:var(--s1)}  /* own line under the sentence: even leading (tap padding comes from base.css) */

/* 5. FAQ: ruled rows, a plus that turns to a minus */
.hw-qa{border-top:var(--border)}
.hw-qa details{border-bottom:var(--hair)}
.hw-qa summary{position:relative;display:block;list-style:none;cursor:pointer;padding:var(--s4) 2.5rem var(--s4) 0;font:400 1.2rem/1.3 var(--f-display);color:var(--ink)}
.hw-qa summary::-webkit-details-marker{display:none}
.hw-qa summary::before,.hw-qa summary::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:1.5px;margin-top:-1px;background:var(--sky-ink);transition:transform 160ms var(--ease)}
.hw-qa summary::after{transform:rotate(90deg)}
.hw-qa details[open] > summary::after{transform:rotate(0)}
.hw-qa summary:hover{color:var(--sky-ink)}
.hw-qa__a{padding:0 2.5rem var(--s5) 0;color:var(--ink-2);max-width:60ch}
.hw-faq__rev{max-width:24rem}
@media (min-width:1024px){
  .hw-faq{align-items:start;grid-template-rows:auto 1fr}
  .hw-faq > .hw-faq__side{grid-column:1 / span 5;grid-row:1}
  .hw-faq > .hw-qa{grid-column:7 / span 6;grid-row:1 / span 2}
  .hw-faq > .hw-faq__rev{grid-column:1 / span 5;grid-row:2;align-self:start}
  .hw-qa summary{padding-block:var(--s5)}
}

/* 6. closing CTA: base.css .cta-line */