/* ============================================================
   How It Works — page styles (hw-* editorial system)
   Built from existing tokens only: --cream (#fff), --ink, --bg,
   --serif, --sans, --ink-line/-dim/-dimmer, single accent #756a5f
   (light surfaces only). Loaded after styles.css.

   BAND-AWARE: section components take their colors from the band
   class they sit inside (.hw-cream = white, .hw-char = charcoal),
   so a section can be flipped by changing only its band class.
   ============================================================ */
.hiw-hero h1 { text-wrap: balance; }

.hw-sec { padding: 5rem 2.5rem; }
.hw-cream { background: var(--cream); color: var(--ink); }
.hw-char  { background: var(--bg);    color: var(--cream); }
.hw-inner { max-width: 1340px; margin: 0 auto; }
@media (min-width: 760px)  { .hw-sec { padding: 7rem 4rem; } }
@media (min-width: 1200px) { .hw-sec { padding: 9rem 4rem; } }

/* shared heading atoms */
.hw-kicker { display: block; font-family: var(--serif); font-size: 0.9rem; letter-spacing: 0.01em; margin-bottom: 1rem; }
.hw-cream .hw-kicker { color: #756a5f; }
.hw-char  .hw-kicker { color: rgba(244,244,241,0.55); }
.hw-h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 2.95rem); line-height: 1.07; letter-spacing: -0.015em; text-wrap: balance; }
.hw-h2 em { font-style: italic; }
.hw-cream .hw-h2 em { color: #756a5f; }
.hw-char  .hw-h2 em { color: var(--cream); }
.hw-lead { margin: 1.3rem 0 0; font-family: var(--sans); font-size: 0.98rem; line-height: 1.7; max-width: 560px; }
.hw-cream .hw-lead { color: var(--ink-dim); }
.hw-char  .hw-lead { color: rgba(244,244,241,0.72); }
.hw-head { margin-bottom: 3.75rem; }
.hw-head--center { text-align: center; max-width: 680px; margin-left: auto; margin-right: auto; }

/* Your home base — client dashboard preview; content left, image right */
.hw-db { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.hw-db-content .hw-head { margin-bottom: 0; }
/* Four "rooms" as a 2x2 grid so the text column height balances the wide, short screenshot */
.hw-db-rooms { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.75rem; }
.hw-db-room { padding: 1.1rem 0; }
.hw-db-room-title { margin: 0 0 0.2rem; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.hw-db-room-title em { font-style: italic; }
.hw-db-room-body { margin: 0; font-family: var(--sans); font-size: 0.9rem; line-height: 1.5; }
/* Two bare screenshots (kickoff + launched) layered as a diagonal offset stack —
   onboarding behind at top-left, launched in front at bottom-right. Natural aspect,
   no crop. Percentages so the stagger scales with the column. */
.hw-db-photo { position: relative; padding-bottom: 15%; }
.hw-db-shot {
  display: block; width: 74%; height: auto; cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}
.hw-db-shot--back  { position: relative; z-index: 1; }
.hw-db-shot--front { position: absolute; right: 0; bottom: 0; z-index: 2; box-shadow: 0 20px 45px rgba(31,29,26,0.28); }

/* Bring-forward: the hovered (desktop) or tapped (.is-lifted, touch) shot rises above
   the other, lifts, and deepens its shadow — then settles back to place. */
.hw-db-shot.is-lifted { z-index: 3; box-shadow: 0 30px 62px rgba(31,29,26,0.36); transform: translateY(-8px) scale(1.035); }
@media (hover: hover) and (pointer: fine) {
  .hw-db-shot:hover { z-index: 3; box-shadow: 0 30px 62px rgba(31,29,26,0.36); transform: translateY(-8px) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .hw-db-shot { transition: none; }
  .hw-db-shot.is-lifted, .hw-db-shot:hover { transform: none; }
}
.hw-cream .hw-db-room { border-top: 1px solid var(--ink-line); }
.hw-cream .hw-db-room-title { color: var(--ink); }
.hw-cream .hw-db-room-body { color: var(--ink-dim); }
.hw-char .hw-db-room { border-top: 1px solid rgba(244,244,241,0.16); }
.hw-char .hw-db-room-title { color: var(--cream); }
.hw-char .hw-db-room-body { color: rgba(244,244,241,0.72); }
@media (max-width: 820px) {
  .hw-db { grid-template-columns: 1fr; gap: 2.75rem; }
  .hw-db-photo { order: -1; }
}
@media (max-width: 560px) {
  .hw-db-rooms { grid-template-columns: 1fr; }
}

/* Inside the build week — picture left, numbered stepper right */
.hw-wk { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
.hw-wk-photo { position: relative; overflow: hidden; align-self: stretch; }
.hw-wk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* Hover-reveal overlay. Default (touch devices — phones + tablets, no hover):
   the alt image stays shown so mobile/tablet always see it. Only pointer/hover
   devices hide it and cross-fade it in on hover of the photo. */
.hw-wk-photo-alt { position: absolute; inset: 0; opacity: 1; transition: opacity 0.5s ease; }
@media (hover: hover) and (pointer: fine) {
  .hw-wk-photo-alt { opacity: 0; }
  .hw-wk-photo:hover .hw-wk-photo-alt { opacity: 1; }
}
.hw-wk-content .hw-head { margin-bottom: 1.75rem; }
.hw-week { list-style: none; margin: 0; padding: 0; }
.hw-week-step { display: grid; grid-template-columns: 1.8rem 1fr; column-gap: 1.4rem; padding: 1.25rem 0; }
.hw-week-num { grid-column: 1; grid-row: 1 / span 2; align-self: start; font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; }
.hw-week-title { grid-column: 2; grid-row: 1; margin: 0 0 0.35rem; font-family: var(--serif); font-weight: 400; font-size: 1.2rem; line-height: 1.2; }
.hw-week-body { grid-column: 2; grid-row: 2; margin: 0; max-width: 46ch; font-family: var(--sans); font-size: 0.9rem; line-height: 1.6; }
.hw-cream .hw-week { border-top: 1px solid var(--ink-line); }
.hw-cream .hw-week-step { border-bottom: 1px solid var(--ink-line); }
.hw-cream .hw-week-num { color: #756a5f; }
.hw-cream .hw-week-title { color: var(--ink); }
.hw-cream .hw-week-body { color: var(--ink-dim); }
.hw-char .hw-week { border-top: 1px solid rgba(244,244,241,0.18); }
.hw-char .hw-week-step { border-bottom: 1px solid rgba(244,244,241,0.18); }
.hw-char .hw-week-num { color: rgba(244,244,241,0.5); }
.hw-char .hw-week-title { color: var(--cream); }
.hw-char .hw-week-body { color: rgba(244,244,241,0.72); }
@media (max-width: 820px) {
  .hw-wk { grid-template-columns: 1fr; gap: 2.75rem; }
  .hw-wk-photo { align-self: auto; max-width: 340px; aspect-ratio: 4 / 5; margin: 0 auto; }
}

/* How we work together — borderless You do / I do */
.hw-yd { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3.25rem; }
.hw-yd-col { padding: 0; }
.hw-yd-label { display: block; margin-bottom: 1.4rem; font-family: var(--serif); font-weight: 400; font-size: 1.4rem; }
.hw-yd-label em { font-style: italic; }
.hw-yd-list { list-style: none; margin: 0; padding: 0; }
.hw-yd-list li { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.9rem 0; font-family: var(--sans); font-size: 0.92rem; line-height: 1.5; }
.hw-yd-check { flex-shrink: 0; width: 0.9rem; margin-top: 0.2rem; font-size: 0.78rem; line-height: 1; text-align: center; }
.hw-cream .hw-yd-label { color: var(--ink); }
.hw-cream .hw-yd-list li { border-top: 1px solid var(--ink-line); color: var(--ink-dim); }
.hw-cream .hw-yd-check { color: #756a5f; }
.hw-char .hw-yd-label { color: var(--cream); }
.hw-char .hw-yd-list li { border-top: 1px solid rgba(244,244,241,0.12); color: rgba(244,244,241,0.82); }
.hw-char .hw-yd-check { color: rgba(244,244,241,0.6); }
.hw-yd-list li:first-child { border-top: none; padding-top: 0; }
@media (max-width: 720px) {
  .hw-yd { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Common questions — reuses the global .accordion (wired by script.js) */
.hw-faq-wrap { max-width: none; }
.hw-faq-more { margin: 2rem 0 0; text-align: center; font-family: var(--sans); font-size: 0.9rem; }
.hw-faq-more a { border-bottom: 1px solid; transition: border-color 0.2s; }
.hw-cream .hw-faq-more { color: var(--ink-dim); }
.hw-cream .hw-faq-more a { color: var(--ink); border-bottom-color: var(--ink-line); }
.hw-cream .hw-faq-more a:hover { border-bottom-color: rgba(26,25,22,0.35); }
.hw-char .hw-faq-more { color: rgba(244,244,241,0.72); }
.hw-char .hw-faq-more a { color: var(--cream); border-bottom-color: rgba(244,244,241,0.3); }
.hw-char .hw-faq-more a:hover { border-bottom-color: rgba(244,244,241,0.6); }
/* accordion on a charcoal band (the global .accordion is light-themed) */
.hw-char .accordion-item { border-top-color: rgba(244,244,241,0.16); }
.hw-char .accordion-item:last-child { border-bottom-color: rgba(244,244,241,0.16); }
.hw-char .accordion-title { color: var(--cream); }
.hw-char .accordion-icon::before,
.hw-char .accordion-icon::after { background: var(--cream); }
.hw-char .accordion-body-inner p { color: rgba(244,244,241,0.72); }
.hw-char .accordion-body-inner p em { color: var(--cream); }
.hw-char .accordion-body-inner a { color: rgba(244,244,241,0.72); border-bottom-color: rgba(244,244,241,0.3); }
.hw-char .accordion-body-inner a:hover { border-bottom-color: rgba(244,244,241,0.6); }

/* Mockup banner (dev-only; the class is unused on the live page) */
.mock-flag { background: #756a5f; color: #ffffff; text-align: center; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 1rem; }

/* ONE GRID — see the block of the same name at the end of styles.css.
   This lives HERE, not there, because this file loads after styles.css and
   .hw-inner's own `max-width: 1340px` above would otherwise win the tie. */
@media (min-width: 1101px) {
  .hw-sec { padding-inline: 0; }

  .hw-inner {
    max-width: var(--rw-page-max);
    margin-inline: auto;
    padding-inline: 2.5rem;
  }
}