/* ------------------------------------------------------------------
   Homepage: Thumbnail Maker + Thumbnail Tester section (added 2026-07-28)

   Two deliberately SEPARATE panels. Step 1 makes the picture, step 2
   tells you whether it works. They were blended in the first draft and
   the founder could not tell the two products apart, which is the exact
   confusion this layout exists to remove.

   Dark surface on purpose: thumbnails only read correctly against dark,
   which is how YouTube itself displays them.
   ------------------------------------------------------------------ */
.home-tm {
  position: relative;
  background: var(--surface-night);
  overflow: hidden;
  padding: var(--space-20) 0;
  color: var(--color-white);
  /* The header is fixed at 60px. Without this, every /#thumbnail-maker link
     (Growth Studio intro, tools section, the FAQ answer) lands with the eyebrow
     and the top of the headline tucked underneath it. */
  scroll-margin-top: 76px;
}
.home-tm__glow {
  position: absolute;
  inset: -15% -10% auto 20%;
  height: 520px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(99, 102, 241, 0.26), transparent 72%);
}
.home-tm__wrap {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ── Section header ─────────────────────────────────────────────── */
.home-tm__head { max-width: 760px; margin: 0 0 var(--space-12); }
.home-tm__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a5b4fc;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(165, 180, 252, 0.22);
  padding: 7px 12px;
  border-radius: var(--radius-full);
  margin: 0 0 var(--space-5);
}
.home-tm__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -1.6px;
  margin: 0 0 var(--space-4);
  color: var(--color-white);
}
.home-tm__title em { font-style: normal; color: #a5b4fc; }
.home-tm__sub {
  font-size: 17px;
  line-height: 1.62;
  color: #94a3b8;
  margin: 0;
  max-width: 56ch;
}
.home-tm__sub b { color: #e2e8f0; font-weight: 600; }

/* ── The two panels ─────────────────────────────────────────────── */
.home-tm__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--space-5);
  align-items: start;
}
.home-tm-panel {
  position: relative;
  background: var(--surface-night-raised);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
}
.home-tm-panel__step {
  position: absolute;
  top: -17px;
  left: var(--space-6);
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.55);
}
.home-tm-panel--make .home-tm-panel__step { background: var(--color-primary); }
.home-tm-panel--test .home-tm-panel__step { background: #16a34a; }
.home-tm-panel__name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}
.home-tm-panel--make .home-tm-panel__name { color: #a5b4fc; }
.home-tm-panel--test .home-tm-panel__name { color: #6ee7a8; }
.home-tm-panel__job {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: -0.6px;
  color: var(--color-white);
  margin: 0 0 var(--space-2);
}
.home-tm-panel__lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0 0 var(--space-5);
}

/* ── Maker: what it can do ──────────────────────────────────────── */
.home-tm-rows { border-top: 1px solid rgba(148, 163, 184, 0.14); margin: 0 0 var(--space-6); }
.home-tm-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 13px;
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.home-tm-row__ico { color: #a5b4fc; font-size: 14px; line-height: 1.4; text-align: center; }
.home-tm-row__t {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-white);
  margin: 0 0 3px;
}
.home-tm-row__d { font-size: 13.5px; line-height: 1.5; color: #94a3b8; margin: 0; }

/* The crown alone does not tell a logged-out stranger this costs money,
   so the paid row carries the words as well as the icon. */
.home-tm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 9px;
  vertical-align: 2px;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.34);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: var(--radius-full);
}
.home-tm-pill i { font-size: 12px; }

/* ── Maker: the work it produces ────────────────────────────────── */
.home-tm-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  box-shadow: 0 20px 46px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.14);
  margin: 0 0 10px;
}
/* height:auto is load-bearing. The <img> tags carry width/height attributes for
   layout stability, and those act as presentational hints: without height:auto the
   attribute height wins over aspect-ratio, the box renders portrait, and object-fit
   crops these wide thumbnails into unreadable fragments. Caught on the live page,
   not in the mockup, because the mockup had no width/height attributes. */
.home-tm-hero img,
.home-tm-pair img,
.home-tm-opt img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.home-tm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-tm-pair div {
  border-radius: 10px;
  overflow: hidden;
  opacity: 0.82;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12);
}
.home-tm-cap { margin: var(--space-3) 0 var(--space-5); font-size: 13px; color: #64748b; }

/* ── Actions: canonical site button geometry, not a bespoke pill ── */
.home-tm-cta,
.home-tm-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition-fast) var(--ease-in-out);
}
.home-tm-cta {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
/* Colour is pinned on every state: the global a:hover rule in
   typography.css would otherwise repaint this indigo-on-indigo. */
.home-tm-cta:hover,
.home-tm-cta:focus,
.home-tm-cta:focus-visible,
.home-tm-cta:active,
.home-tm-cta:visited { color: var(--color-white); text-decoration: none; }
.home-tm-cta:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
}
.home-tm-cta i { color: inherit; }

.home-tm-link {
  margin-top: 0;
  background: transparent;
  border-color: rgba(110, 231, 168, 0.45);
  color: #6ee7a8;
}
.home-tm-link:hover,
.home-tm-link:focus,
.home-tm-link:focus-visible,
.home-tm-link:active,
.home-tm-link:visited { color: #6ee7a8; text-decoration: none; }
.home-tm-link:hover { background: rgba(22, 163, 74, 0.14); transform: translateY(-1px); }
.home-tm-link i { color: inherit; }

.home-tm-cta:active,
.home-tm-link:active { transform: scale(0.985); }

/* ── Tester: the head to head ───────────────────────────────────── */
.home-tm-q { margin: 0 0 var(--space-4); font-size: 13.5px; font-weight: 700; color: #cbd5e1; }
.home-tm-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 var(--space-6); }
.home-tm-opt {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.14);
  transition: transform var(--transition-fast) var(--ease-in-out),
              opacity var(--transition-fast) var(--ease-in-out);
}
.home-tm-opt:hover { transform: translateY(-2px); }
.home-tm-opt--lost { opacity: 0.72; }
.home-tm-opt--lost:hover { opacity: 0.85; }
.home-tm-opt--won { box-shadow: 0 0 0 2px #16a34a, 0 12px 26px rgba(2, 6, 23, 0.45); }
/* Bottom-left so the tag never sits on top of the thumbnail's own headline. */
.home-tm-tag {
  position: absolute;
  bottom: 7px;
  left: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.82);
  color: #cbd5e1;
}
.home-tm-opt--won .home-tm-tag { background: #16a34a; color: var(--color-white); }

.home-tm-steps { margin: 0 0 var(--space-5); }
.home-tm-s {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  padding: 11px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #94a3b8;
}
.home-tm-s i { color: #6ee7a8; font-size: 12px; line-height: 1.4; }
.home-tm-s b { color: var(--color-white); font-weight: 600; }

.home-tm-stat {
  background: rgba(22, 163, 74, 0.10);
  border: 1px solid rgba(110, 231, 168, 0.22);
  border-radius: 13px;
  padding: var(--space-4) var(--space-5);
}
.home-tm-stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.8px;
  color: var(--color-white);
  line-height: 1;
}
.home-tm-stat__txt { font-size: 13.5px; color: #94a3b8; margin: 7px 0 0; line-height: 1.5; }
.home-tm-cost { margin: var(--space-4) 0 var(--space-3); font-size: 13px; line-height: 1.5; color: #94a3b8; text-align: center; }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .home-tm { padding: var(--space-12) 0; }
  .home-tm__wrap { padding: 0 var(--space-4); }
  .home-tm__head { margin-bottom: var(--space-8); }
  .home-tm__title { font-size: 30px; letter-spacing: -1px; }
  .home-tm__sub { font-size: 15.5px; }
  .home-tm__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .home-tm-panel {
    padding: var(--space-6) var(--space-4) var(--space-6);
    border-radius: var(--radius-xl);
  }
  .home-tm-panel__step { left: var(--space-4); }
  .home-tm-panel__job { font-size: 22px; }
  .home-tm-link { white-space: normal; }
}

/* Side by side is the point: two options compared at a glance, and it keeps the
   Tester card short. Below ~520px each thumbnail drops under 200px wide, the WON
   and A chips start covering the artwork they are labelling, and the comparison
   stops being readable, so they stack there and only there. */
@media (max-width: 520px) {
  .home-tm-ab { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .home-tm-cta:hover,
  .home-tm-link:hover,
  .home-tm-opt:hover { transform: none; }
}

/* Phone tuning. The 900px rule above already stacks the two panels, because
   they get cramped well before 767px; this block is the small-screen polish. */
@media (max-width: 767px) {
  .home-tm { padding: var(--space-10) 0; }
  .home-tm__title { font-size: 28px; }
  .home-tm-panel__lede { font-size: 14px; }
  .home-tm-hero { border-radius: 12px; }
  .home-tm-pair { gap: 8px; }
  .home-tm-cap { margin-bottom: var(--space-4); }
  .home-tm-stat__num { font-size: 24px; }
  .home-tm-cost { text-align: left; }
  /* Long headline words must never push the card past the viewport. */
  .home-tm__title,
  .home-tm-panel__job,
  .home-tm-row__d { overflow-wrap: break-word; word-break: break-word; }
}