/* ============================================================
   How It Works - page-specific layout.
   Section-by-section translation of the approved Claude Design
   prototype (project/How It Works.dc.html), reusing css/components.css
   and the shared shell rules in css/page.css / css/vault.css (.hero,
   .hero--sub, .section, .split, .vault-h2, .tick-list, .pill, .cta)
   wherever the visual is identical to an existing page. Only what's
   new to this page lives here.

   The DC source exposes stepsLayout ('Numbered rows' | 'Timeline' |
   'Cards') and showStepOwner as design-tool controls; this page
   implements their defaults ('Numbered rows', true) as real markup:
   there's no prototype chat transcript for this export to say
   otherwise, and the default is what anyone lands on. */

.split__media--how { min-height: 440px; }

/* ---- Five steps: cards -----------------------------------------------
   DC's stepsLayout prop defaults to 'Cards' as of the second export
   (was 'Numbered rows' in the first - see git history for that version
   if it's ever needed again). 3-column grid; the last two steps ("every
   visitor" ones) get the accent treatment to set them apart from the
   three one-off setup steps. */
.process-grid { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.process-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: var(--radius-lg);
  /* This section is .section--white, so --card-bg resolves to the
     F9F9F9 block-tone backstop (see the "Surfaces, not borders" note in
     page.css) - too close to the section's own white to read as a
     card. Opts into full white instead, which needs the shadow below
     to stay visible: "shadow only when white sits on white". */
  background: var(--surface-card);
  box-shadow: var(--shadow-xsmall);
  color: var(--text-primary);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.process-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12, 8, 1, 0.1); }
.process-card__num {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--color-pickled-bluewood);
}
.process-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: inherit;
  overflow-wrap: break-word;
}
.process-card p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: inherit; text-wrap: pretty; }
.process-card__owner { margin-top: auto; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

.process-card--accent {
  background: var(--color-pickled-bluewood);
  color: var(--text-on-dark);
}
.process-card--accent .process-card__num { color: rgba(255, 255, 255, 0.8); }
.process-card--accent p { opacity: 0.85; }
.process-card--accent .process-card__owner { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 1080px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  /* Same odd-card orphan fix as .vault-grid in page.css - 3 cards at
     2 columns strands the last one alone in its own row.
     :not(:first-child) excludes a single-card grid, which should sit at
     its normal width rather than stretch (not currently possible here,
     kept for consistency with the shared pattern). */
  .process-grid > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .process-grid { grid-template-columns: 1fr; }
}

/* ---- Embedding: mock code card ------------------------------------- */
/* min-width: 0 is load-bearing here, not defensive - .embed-panel wraps
   a <pre> code block, and flex items default to min-width:auto (their
   content's max-content size as the floor), so without this the pre's
   long unwrapped line was forcing the whole split row wider than the
   viewport on mobile instead of letting the pre's own overflow-x:auto
   handle it with an internal scrollbar. */
.embed-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.code-card { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-inverse); }
/* Lifted a touch out of the card's own ink rather than ruled off from
   it - same separation, no line. */
.code-card__bar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: rgba(255, 255, 255, 0.07); }
.code-card__dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.code-card__label { margin-left: 8px; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: var(--text-on-dark-muted); }
/* Copy button: pinned to the far right of the bar via margin-left:auto
   (the label above it isn't flex:1, so it doesn't need auto on its own
   side too). Icon-only with an aria-label rather than visible text:
   matches .nav-toggle's pattern elsewhere on the site. */
.code-card__copy {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-on-dark-muted);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.code-card__copy:hover,
.code-card__copy:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark);
}
.icon--copy { width: 16px; height: 16px; }
/* "Copied" tooltip: hidden until .is-copied (toggled briefly by
   initEmbedCopy() in main.js on click), floating below the button
   rather than above since the button already sits at the very top
   edge of the card with no room above it. */
.code-card__copy-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--color-neutral-black);
  color: var(--text-on-dark);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.code-card__copy.is-copied .code-card__copy-tooltip {
  opacity: 1;
  transform: translateY(0);
}
.code-card pre {
  margin: 0;
  padding: 24px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}
.embed-panel > span { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
/* Pulls the illustrative-example disclaimer closer to the caption above
   it than .embed-panel's own 16px flex gap - the two read as one
   caption-plus-caveat pairing, not two evenly spaced, unrelated lines. */
.embed-panel .mock-caption { margin-top: -8px; }

/* ---- Add-ons grid --------------------------------------------------- */
/* 3 columns, not 4 - down to 3 cards since Brevo CRM sync moved out
   (included in every plan, not an add-on). Left at 4 it would leave an
   empty fourth column at desktop instead of the 3 cards filling the
   row. */
.addon-grid { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.addon-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-lg);
  /* This section is .section--white - same "white card on a white
     section has nothing left to distinguish it" case as .process-card
     above, so the same fix: opt out of --card-bg's automatic drop to
     the F9F9F9 block tone, go full white, and add the shadow that
     alone keeps it legible against the section behind it. */
  background: var(--surface-card);
  box-shadow: var(--shadow-xsmall);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.addon-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12, 8, 1, 0.1); }
/* .tag-soon (components.css) is inline-flex, sized to its own text:
   but as a direct child of this column flex container it stretches to
   the card's full width by default (align-self inherits "stretch"),
   same footgun as the row->column flex-direction one in CLAUDE.md's
   known gotchas, just the cross-axis default catching a bare child
   instead of a flex-direction override. Pinned back to its own
   content width, only where it sits directly in this column. */
.addon-card > .tag-soon { align-self: flex-start; }
.addon-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.addon-card p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

/* ---- Benefits grid ---------------------------------------------------- */
.benefit-grid { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 80px; }
/* Header-to-content spacing convention (see page.css) - .section's own
   gap (80px) is too much between the header and the first card, same
   32px target as everywhere else on the site. -48px here since the
   base being pulled from is 80px (the ≤960px override below uses -32px
   against that tier's smaller 64px base - same 32px result either way). */
.addon-grid,
.benefit-grid {
  margin-top: -48px;
}
.benefit-item { display: flex; gap: 16px; align-items: flex-start; }
.benefit-item .icon--check { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.benefit-item__body { display: flex; flex-direction: column; gap: 8px; }
.benefit-item__body h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.benefit-item__body p { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1080px) {
  .addon-grid { grid-template-columns: repeat(2, 1fr); }
  /* Same odd-card orphan fix as .process-grid below - down to 3 cards
     now Brevo CRM sync moved out (it's included in every plan, not an
     optional extra), so 2 columns strands the last one alone in its
     own row. :not(:first-child) excludes a single-card grid, which
     should sit at its normal width rather than stretch. */
  .addon-grid > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .benefit-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 960px) {
  /* Tablet+mobile spacing convention (see page.css's own ≤960px block):
     .section's gap is 64px here (no inline override on either section),
     too much between the header and the first card, same as Home's
     card-grid sections. Lives at 960 rather than 640 since that 64px
     base is the same at both widths - one fix covers both. */
  .addon-grid,
  .benefit-grid {
    margin-top: -32px;
  }
}
@media (max-width: 640px) {
  .addon-grid { grid-template-columns: 1fr; }
}