/* =========================================================================
   Page-specific styles: / (marketing.html, the homepage)
   Loads after css/studiofolio-seo.css and css/editorial.css. Redesigned in
   Stage M6: a centred, type-led opening over a product "plate", then a
   short sequence of differently composed sections. Real screenshots come
   from tools/marketing-shots (published to /media/screens/).
   ========================================================================= */

.home-link { display: inline-block; padding: 10px 0; font-size: 14px; font-weight: var(--weight-bold); color: var(--gold-ink); }
.home-link:hover { color: var(--text); }
.home-note { margin: 28px 0 0; color: var(--text-muted); font-size: 14px; }
.home-fig figcaption { text-align: left; }

/* ---- Opening ---- */
.home-hero { padding: clamp(40px, 7vw, 104px) 0 0; text-align: center; }
.home-hero__copy { max-width: 920px; }
.home-hero h1 { margin: 0 auto; max-width: 12.5em; font-size: clamp(2.5rem, 1.3rem + 4.9vw, 4.75rem); line-height: 1.02; letter-spacing: var(--tracking-display); }
.home-hero__lede { margin: 24px auto 0; max-width: 36rem; color: var(--text-muted); font-size: 18px; line-height: 1.6; }
.home-hero__actions { display: flex; justify-content: center; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 32px; }
.home-hero__facts { margin: 14px 0 0; color: var(--text-muted); font-size: 13px; }
.home-hero__facts span[aria-hidden] { margin: 0 6px; }
/* The screenshot sits on a sand plate that starts a third of the way down
   it, so the product leads straight into the page below. */
.home-plate { margin-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(36px, 5vw, 72px); background: linear-gradient(to bottom, transparent 0 34%, var(--bg-alt) 34% 100%); }

/* ---- Photography meets software ---- */
.home-craft { padding: clamp(56px, 7vw, 96px) 0; }
/* Without a photograph the section is a pull statement: the words on the
   left with a short gold rule above them, the paragraph beside them and
   aligned to their last line, so no quadrant is left waiting for an image. */
.home-craft__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--grid-gap); align-items: end; }
.home-craft__statement { grid-column: 1 / span 8; grid-row: 1; font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem); line-height: 1.14; letter-spacing: -0.018em; }
.home-craft__statement::before { content: ""; display: block; width: 48px; height: 2px; margin-bottom: 28px; background: var(--gold); }
.home-craft__body { grid-column: 9 / span 4; grid-row: 1; padding-top: 20px; border-top: 1px solid var(--border-strong); }
.home-craft__body p { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; }
.home-craft__links { display: flex; gap: 0 24px; flex-wrap: wrap; margin-top: 10px !important; }
/* With an approved photograph (see docs/marketing/PHOTO_REQUESTS.md), the
   photo takes the left columns and the words move beside it. */
.home-craft__photo { grid-column: 1 / span 5; grid-row: 1 / span 2; margin: 0; }
.home-craft__photo img, .home-craft__photo .photo-slot { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); }
.home-craft__photo figcaption { margin-top: 10px; font-size: var(--text-xs); color: var(--text-muted); }
.home-craft__grid:has(.home-craft__photo) { align-items: start; }
.home-craft__grid:has(.home-craft__photo) .home-craft__statement { grid-column: 7 / span 6; grid-row: 1; align-self: end; }
.home-craft__grid:has(.home-craft__photo) .home-craft__body { grid-column: 7 / span 6; grid-row: 2; margin-top: 32px; }

/* ---- One connected workflow ---- */
.home-flow__title { max-width: 640px; margin-bottom: clamp(32px, 4vw, 48px); }
.home-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid var(--border-strong); counter-reset: home-step; }
.home-track li { position: relative; padding-top: 22px; counter-increment: home-step; }
.home-track li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--bg-alt); }
.home-track h3 { font-family: var(--font-body); font-size: 16px; letter-spacing: 0; margin: 0 0 6px; }
.home-track h3::before { content: counter(home-step, decimal-leading-zero) " "; color: var(--gold-ink); font-size: 12px; letter-spacing: .06em; }
.home-track p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.home-track a { color: var(--gold-ink); font-weight: var(--weight-bold); }
.home-track a:hover { color: var(--text); }
.home-flow .shot { margin-top: clamp(40px, 5vw, 56px); }
.home-more { margin: 14px 0 0; }

/* ---- Storage ---- */
.home-storage__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--split-gap); align-items: end; }
.home-storage__head p { margin: 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; }
.home-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin: clamp(40px, 5vw, 56px) 0 0; }
.home-ledger > div { border-top: 1px solid var(--text); padding-top: 20px; }
.home-ledger dt { font-family: var(--font-display); font-size: 26px; font-weight: var(--weight-bold); line-height: 1.2; }
.home-ledger dd { margin: 10px 0 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; }
.home-tag { display: inline-block; margin-left: 8px; vertical-align: middle; font-family: var(--font-body); font-size: 11px; font-weight: var(--weight-heavy); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-ink); }

/* ---- Less admin ---- */
.home-work__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--split-gap); align-items: center; }
.home-list { list-style: none; margin: 28px 0 0; padding: 0; }
.home-list li { padding: 16px 0; border-top: 1px solid var(--border-strong); color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.home-list li:last-child { border-bottom: 1px solid var(--border-strong); }
.home-list strong { color: var(--text); font-weight: var(--weight-semibold); }
.home-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); max-width: 560px; margin-left: auto; align-items: start; }
.home-phones .shot--phone { max-width: none; }
.home-phones .shot + .shot { margin-top: 64px; }

/* ---- Photography tools ---- */
.home-tools__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--split-gap); align-items: start; }
.home-tools__grid > div > p { margin: 16px 0 0; color: var(--text-muted); font-size: 16px; line-height: 1.65; max-width: 28rem; }
.home-tools__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--grid-gap); margin: 0; }
.home-tools__list > div { padding: 16px 0 20px; border-top: 1px solid var(--border-strong); }
.home-tools__list dt { font-weight: var(--weight-bold); }
.home-tools__list dd { margin: 4px 0 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* ---- Pricing (ink) ---- */
.home-pricing__head { max-width: 640px; }
.home-pricing h2 { color: #fff; }
.home-pricing__head p { margin: 16px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.home-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--split-gap); margin-top: clamp(36px, 5vw, 56px); max-width: 980px; }
.home-plan { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--gold); padding-top: 22px; }
.home-plan h3 { font-family: var(--font-body); font-size: 13px; font-weight: var(--weight-heavy); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.home-price { align-self: stretch; margin: 10px 0 0; font-family: var(--font-display); font-size: 48px; font-weight: var(--weight-bold); line-height: 1.1; color: #fff; }
.home-price span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-regular); line-height: 1.5; color: var(--ink-soft); }
.home-plan ul { list-style: none; margin: 22px 0 26px; padding: 0; width: 100%; }
.home-plan li { padding: 10px 0; border-bottom: 1px solid var(--ink-panel-border); color: #F1ECE3; font-size: 15px; line-height: 1.5; }
.home-plan .btn { margin-top: auto; }
.home-plan__note { margin: auto 0 0; padding: 15px 0; color: var(--ink-soft); font-size: 14px; }
.home-pricing__foot { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink-panel-border); max-width: 980px; }
.home-pricing__foot p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.home-pricing__foot p + p { margin-top: 10px; }
.home-pricing__foot strong { color: #fff; }
.home-pricing__foot a { color: var(--gold); font-weight: var(--weight-bold); }
.home-pricing__foot a:hover { color: #fff; }

/* ---- FAQ ---- */
#faq details p { font-size: 15px; line-height: 1.65; }
/* Keep the +/- beside its question when a question fills the width. */
#faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
#faq summary::after { float: none; flex: none; }

/* ---- Closing ---- */
.home-end { padding-top: 0; }
.home-end__inner { text-align: center; border-top: 1px solid var(--border-strong); padding-top: clamp(48px, 6vw, 80px); }
.home-end__title { margin: 0 auto 28px; max-width: 14em; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; }
.home-end__note { margin: 14px 0 0; color: var(--text-muted); font-size: 13px; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  /* One column: twelve columns of 32px gaps alone are wider than a phone. */
  .home-craft__grid { grid-template-columns: minmax(0, 1fr); }
  .home-craft__statement, .home-craft__body,
  .home-craft__grid:has(.home-craft__photo) .home-craft__statement,
  .home-craft__grid:has(.home-craft__photo) .home-craft__body { grid-column: 1 / -1; }
  .home-craft__statement, .home-craft__grid:has(.home-craft__photo) .home-craft__statement { grid-row: auto; }
  .home-craft__body, .home-craft__grid:has(.home-craft__photo) .home-craft__body { grid-row: auto; margin-top: 32px; max-width: 36rem; }
  .home-craft__photo { grid-column: 1 / -1; grid-row: auto; max-width: 480px; margin-bottom: 32px; }
  .home-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; border-top: 0; }
  .home-track li { border-top: 1px solid var(--border-strong); }
  .home-storage__head, .home-work__grid, .home-tools__grid { grid-template-columns: minmax(0, 1fr); }
  .home-storage__head { gap: 16px; }
  .home-phones { margin: 0 auto; }
}
@media (max-width: 860px) {
  .home-craft { padding: 64px 0; }
}
@media (max-width: 640px) {
  .home-hero__lede { font-size: 17px; }
  /* Storage on its own line rather than an awkward three-line wrap. */
  .home-hero__sep { display: none; }
  .home-hero__works { display: block; margin-top: 2px; }
  .home-hero__actions { flex-direction: column; gap: 4px; }
  .home-hero__actions .btn { width: 100%; }
  .home-plate { background: linear-gradient(to bottom, transparent 0 22%, var(--bg-alt) 22% 100%); }
  .home-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .home-ledger, .home-tools__list, .home-plans { grid-template-columns: minmax(0, 1fr); }
  .home-ledger { gap: 28px; }
  .home-tag { display: block; margin: 6px 0 0; }
  .home-plans { gap: 40px; }
  .home-plan .btn { width: 100%; }
  .home-price { font-size: 42px; }
  .home-phones { grid-template-columns: minmax(0, 260px); justify-content: center; }
  .home-phones .shot + .shot { display: none; }
  #faq h2 { font-size: 28px; }
  .home-end .btn { width: 100%; }
}
@media (max-width: 380px) {
  /* Keeps the headline to three lines ("Made for the way / photographers / work."). */
  .home-hero h1 { font-size: 2.125rem; }
  /* Narrow phones: one line of heading and sentence per step, like a list. */
  .home-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-track li { padding: 12px 0 13px; }
  .home-track li::before { display: none; }
  .home-track h3, .home-track p { display: inline; }
  .home-track h3 { margin-right: 6px; }
  .ed-h2 { font-size: 26px; }
}