/* =================================================================
   ATF — Aug 2026 rebuild brief

   A scoped island. Two weights (400/500), 880px column. It deliberately
   does NOT follow design-rules.md's 600-680 weight system; see
   ATF-PLAN.md §0 D1. Do not reintroduce mono labels or heavy weights
   here to "match" the sections below.

   REVISED 21 Aug 2026 (legibility pass): D4's "no gradient" is
   partially reversed — the CTA button now carries the sitewide
   --grad-brand-solid, since it's the one thing on the page actually
   meant to be pressed and it was previously the flattest element on
   it. `.btn--primary` is NOT reused (it carries 600-weight, which
   would break acceptance check 7) — the gradient is applied directly
   to `.atf__cta-btn`. This is the ATF's one gradient element, per
   design-rules' one-gradient-per-visual-group rule; the headline stays
   solid so the two never compete in the same glance. */

.atf {
  /* type — sized up 21 Aug 2026, legibility pass. Was reading flat:
     nine elements all --text-secondary/--text-muted at small sizes
     with no hierarchy. */
  --atf-fs-name:   15px;
  --atf-fs-loc:    14px;
  --atf-fs-h1:     34px;
  --atf-fs-sub:    18px;
  --atf-fs-label:  14px;
  --atf-fs-value:  30px;
  --atf-fs-body:   16px;
  --atf-fs-pill:   16px;
  --atf-fs-cta:    16px;

  /* the one accent — offer tiles only. Terms cards stay bare hairline;
     the tile is the single accent surface per group (design-rules'
     one-gradient/one-accent-per-group rule applied to a flat fill). */
  --atf-accent-bg: var(--surface-brand-tint);
  --atf-accent-fg: var(--brand-deep);

  max-width: 880px;
  margin-inline: auto;
  padding-block: var(--sp-5) var(--sp-8);
  font-weight: 400;
}

/* -- 1. identity bar ---------------------------------------------- */
.atf__identity {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.atf__identity-name {
  font-size: var(--atf-fs-name);
  font-weight: 500;
  color: var(--text-primary);
}
.atf__identity-loc {
  font-size: var(--atf-fs-loc);
  font-weight: 400;
  color: var(--text-secondary);
}

/* -- 2. headline block -------------------------------------------- */
/* text-wrap:balance is inherited from base.css h1 — kept on, since a
   2-line balanced wrap is exactly what a wider measure is for. Widened
   from the old 26ch (which forced 3 lines) to 40ch so the current
   headline breaks to 2. */
.atf__headline {
  max-width: 40ch;
  font-size: var(--atf-fs-h1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.atf__sub {
  font-size: var(--atf-fs-sub);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: var(--sp-6);
}

/* -- 3. proof strip ------------------------------------------------ */
.atf__proof {
  display: grid;
  grid-template-columns: 1fr 1px 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-color: var(--border-bottom);
  border-radius: var(--radius);
  box-shadow: var(--e1), var(--highlight-top);
  margin-bottom: var(--sp-7);
}
.atf__proof-div { align-self: stretch; background: var(--border); }
.atf__stat-label {
  font-size: var(--atf-fs-label);
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.atf__stat-value {
  font-size: var(--atf-fs-value);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.atf__proof-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;                     /* a11y floor, design-rules §10 */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--surface);
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.atf__proof-btn svg { width: 20px; height: 20px; }
.atf__proof-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}

/* -- shared small label (Availability / Looking for) --------------- */
.atf__label {
  display: block;
  font-size: var(--atf-fs-label);
  font-weight: 400;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}

/* -- 4. what I offer ----------------------------------------------- */
/* Three tiles side by side, not three stacked rows — this is the
   3-column base the whole ATF now snaps to (proof strip above and
   terms below share its column edges). The tile itself is the accent
   surface; the pill dissolves into a plain heading inside it, so
   there's exactly one accent element per tile, not a tinted pill
   nested inside another fill. */
.atf__offer { margin-bottom: var(--sp-7); }
.atf__offer-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.atf__offer-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--atf-accent-bg);
  border-radius: var(--radius-sm);
}
.atf__pill {
  font-size: var(--atf-fs-pill);
  font-weight: 500;
  line-height: 1.35;
  color: var(--atf-accent-fg);
}
.atf__offer-body {
  font-size: var(--atf-fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
}

/* -- 5. terms row -------------------------------------------------- */
/* Same 3-column base as the offer tiles above — Availability spans 2
   (it carries two full sentences), Looking for takes the remaining 1
   (two short tags need less room). Bare hairline, no shadow, no
   accent: these are administrative facts, the lightest-weight boxes
   on the page, sitting under the accented offer tiles on purpose. */
.atf__terms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.atf__term {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.atf__term:first-child { grid-column: span 2; }
.atf__term-line {
  font-size: var(--atf-fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
}
.atf__term-line + .atf__term-line { margin-top: var(--sp-2); }
.atf__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Neutral by rule — accent belongs to the offer tiles only. */
.atf__tag {
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--atf-fs-label);
  font-weight: 400;
  color: var(--text-primary);
}

/* -- 6. CTA row ---------------------------------------------------- */
.atf__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}
/* The ATF's one gradient element — see the file header note, 21 Aug
   2026. Sized +30% over the 44px a11y floor (56px) since it's the
   single action the whole section is built to drive. */
.atf__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius-pill);
  font-size: var(--atf-fs-cta);
  font-weight: 500;
  color: var(--text-on-brand);
  background: var(--grad-brand-solid);
  box-shadow: var(--e-brand), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.atf__cta-btn:hover {
  color: var(--text-on-brand);
  transform: translateY(-2px);
  box-shadow: var(--e-brand-hover), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.atf__cta-arrow { width: 20px; height: 20px; }
.atf__cta-email {
  font-size: var(--atf-fs-cta);
  font-weight: 400;
  color: var(--text-secondary);
}
.atf__cta-email:hover { color: var(--text-primary); }

/* -- mobile: single column, every grid collapses ------------------- */
@media (max-width: 639px) {
  .atf__proof { grid-template-columns: 1fr; gap: var(--sp-4); }
  .atf__proof-div { height: 1px; align-self: auto; }
  .atf__proof-btn { justify-self: start; }
  .atf__offer-rows { grid-template-columns: 1fr; }
  .atf__terms { grid-template-columns: 1fr; gap: var(--sp-3); }
  .atf__term:first-child { grid-column: span 1; }
}

/* -- proof modal ----------------------------------------------------
   Shares .screenshot-modal's overlay/card fade+scale (casestudy.css)
   but keeps its own DOM node and state — that modal auto-closes on
   any click after 10s, both fatal for a video meant to be watched.

   No caption, so the video IS the card: zero padding, the video's own
   corners inherit the card's radius so the clip reads seamless, and
   the card claims a much wider share of the viewport than the shared
   .screenshot-modal__card default (720px/90vw) since there's no
   surrounding chrome competing for room. Width and height are capped
   independently (94vw / 90vh) with the video's own max-* + object-fit
   keeping it inside both without ever cropping — a wide viewport lets
   width win, a short one lets height win. */
.proof-modal { cursor: default; }
.proof-modal .screenshot-modal__card {
  position: relative;
  max-width: min(1200px, 94vw);
  max-height: 90vh;
  padding: 0;
}
.proof-modal__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  border-radius: inherit;
  background: #000;
}
.proof-modal__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  color: var(--text-on-brand);
  background: rgba(13, 21, 38, 0.55);
}