/* ============================================================================
   MARKETING HOME — www.chrishi.co ("Clean Daylight")

   Loaded by layouts/marketing.html.erb only (after tailwind + chrishi_design).
   Plain CSS on purpose: this page is typography, spacing and a handful of
   components, and keeping them in named classes lets the design be read and
   tuned in one place. The dark hero keeps its existing Tailwind markup (and the
   .mkt-* motion rules in chrishi_design.css); everything below the hero is `.hm-*`.

   Contract (do not break):
   - Content is fully visible with no JavaScript and with reduced motion. Scroll
     reveals and the floating collage live in chrishi_design.css behind `html.anim`
     (set by _motion_head only under prefers-reduced-motion: no-preference); the
     hover transitions here are switched off under reduced motion.
   - No horizontal overflow at 390 px: no fixed pixel widths on layout boxes, no
     negative margins, images max-width 100%.
   - Fonts are self-hosted (public/marketing/fonts/, Latin subsets of the OFL
     variable fonts already vendored in public/fonts/). No external font host.
   - Palette: white and #f7f7fb sections, ink #0f172a, secondary #475569,
     hairlines #e5e7eb, violet #7c3aed (hover #6d28d9) for primary buttons,
     links and small accents only.
   ============================================================================ */

/* ── Self-hosted fonts ─────────────────────────────────────────────────────
   One variable file per family (weight + optical-size axes). The TTF in
   public/fonts/ is the fallback source if the WOFF2 ever fails to load. */
@font-face {
  font-family: "Inter";
  src: url("/marketing/fonts/inter-latin.woff2") format("woff2"),
       url("/fonts/Inter.ttf") format("truetype-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/marketing/fonts/dm-sans-latin.woff2") format("woff2"),
       url("/fonts/DMSans.ttf") format("truetype-variations");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens + base ─────────────────────────────────────────────────────── */
.hm {
  --hm-white: #ffffff;
  --hm-alt: #f7f7fb;
  --hm-ink: #0f172a;
  --hm-ink-2: #475569;
  --hm-ink-3: #5b6577;
  --hm-line: #e5e7eb;
  --hm-line-2: #d5d9e2;
  --hm-violet: #7c3aed;
  --hm-violet-hover: #6d28d9;
  --hm-violet-deep: #5b21b6;
  --hm-violet-tint: #f5f3ff;
  --hm-violet-line: #ddd6fe;
  --hm-display: "DM Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hm-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--hm-body);
  color: var(--hm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hm :where(h1, h2, h3, h4) {
  font-family: var(--hm-display);
}

/* The ring follows each control's own corners (pill chips, 12px buttons). */
.hm :where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--hm-violet);
  outline-offset: 3px;
}

/* On the dark hero the violet outline would sink into the background. */
.hm-dark :where(a, button, summary, input, [tabindex]):focus-visible {
  outline-color: #c4b5fd;
}

.hm-display {
  font-family: var(--hm-display);
}

/* ── Layout ────────────────────────────────────────────────────────────── */
/* Same gutters as the shared header (px-4 / sm:px-6 / lg:px-8, max-w-7xl) so the
   logo and the page content share one left edge at every width. */
.hm-wrap {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .hm-wrap { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .hm-wrap { padding-inline: 2rem; }
}

/* Sections below the hero alternate #f7f7fb / white by position, so a section
   that is switched off (before -> after, gallery) never breaks the rhythm. */
.hm-flow > section {
  background: var(--hm-alt);
  padding-block: clamp(4rem, 3rem + 4.5vw, 7rem);
  scroll-margin-top: 5rem;
}

/* nth-of-type, not nth-child: the gallery's <script> sits between sections. */
.hm-flow > section:nth-of-type(even) {
  background: var(--hm-white);
}

/* ── Type ──────────────────────────────────────────────────────────────── */
.hm-eyebrow {
  margin: 0;
  font-family: var(--hm-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-violet-deep);
}

.hm-h2 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(2rem, 1.35rem + 2.4vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--hm-ink);
  text-wrap: balance;
}

.hm-h3 {
  margin: 0;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: var(--hm-ink);
}

.hm-h3--lg {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.hm-lead {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--hm-ink-2);
  text-wrap: pretty;
}

.hm-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--hm-ink-2);
}

.hm-small {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--hm-ink-3);
}

.hm-head {
  max-width: 46rem;
}

.hm-head > * + * {
  margin-top: 1rem;
}

.hm-head--center {
  margin-inline: auto;
  text-align: center;
}

.hm-head--center .hm-lead {
  margin-inline: auto;
}

/* ── Buttons + links ───────────────────────────────────────────────────── */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-family: var(--hm-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.2s ease, transform 0.2s ease;
}

/* Soft shadows are kept for the hero visual and the screenshots; buttons only
   get a hairline edge. */
.hm-btn--primary {
  background: var(--hm-violet);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(91, 33, 182, 0.35);
}

.hm-btn--primary:hover {
  background: var(--hm-violet-hover);
  transform: translateY(-1px);
}

.hm-btn--primary:active {
  transform: translateY(0);
}

.hm-btn--secondary {
  background: #ffffff;
  color: var(--hm-ink);
  border-color: var(--hm-line-2);
}

.hm-btn--secondary:hover {
  border-color: var(--hm-violet);
  color: var(--hm-violet-deep);
  transform: translateY(-1px);
}

.hm-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--hm-violet);
  text-decoration: underline;
  text-decoration-color: rgba(124, 58, 237, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.hm-link:hover {
  color: var(--hm-violet-hover);
  text-decoration-color: currentColor;
}

.hm-link svg {
  flex: none;
  transition: transform 0.2s ease;
}

.hm-link:hover svg {
  transform: translateX(3px);
}

.hm-link--dark {
  margin-top: 0.125rem;
  font-size: 0.9375rem;
  color: #c4b5fd;
  text-decoration-color: rgba(196, 181, 253, 0.4);
}

.hm-link--dark:hover {
  color: #ffffff;
}

/* ── URL form (hero = dark, final call = light) ────────────────────────── */
.hm-form {
  width: 100%;
  max-width: 36rem;
  /* The field and button sit side by side only when the form itself is wide
     enough; the two-column hero squeezes it, and a viewport query cannot know. */
  container: hm-form / inline-size;
}

.hm-form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.hm-form__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 1rem;
  border: 1px solid transparent;
}

@container hm-form (min-width: 30rem) {
  .hm-form__row { flex-direction: row; }
}

.hm-form__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  font-family: var(--hm-body);
  font-size: 1rem;
  line-height: 1.4;
}

.hm-form__input:focus {
  outline: none;
}

.hm-form__input:focus-visible {
  outline: 2px solid var(--hm-violet);
  outline-offset: 0;
  border-radius: 0.75rem;
}

.hm-form__submit {
  flex: none;
}

.hm-form__fine {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.hm-form__status {
  margin: 0.5rem 0 0;
  min-height: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.hm-form__status:empty {
  display: none;
}

/* dark (hero) */
.hm-form--dark { max-width: 38rem; }
.hm-form--dark .hm-form__label { color: #e2e8f0; }

.hm-form--dark .hm-form__row {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(51, 65, 85, 0.65);
  box-shadow: 0 25px 50px -12px rgba(46, 16, 101, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hm-form--dark .hm-form__input { color: #ffffff; }
.hm-form--dark .hm-form__input::placeholder { color: #94a3b8; opacity: 1; }
.hm-form--dark .hm-form__input:focus-visible { outline-color: #c4b5fd; }
.hm-form--dark .hm-form__fine { color: #94a3b8; }
.hm-form--dark .hm-form__status { color: #fda4af; }

.hm-form--dark .hm-form__submit {
  background-image: linear-gradient(to right, #8b5cf6, #9333ea);
  color: #ffffff;
  box-shadow: 0 10px 24px -6px rgba(139, 92, 246, 0.45);
}

.hm-form--dark .hm-form__submit:hover {
  background-image: linear-gradient(to right, #a78bfa, #a855f7);
}

.hm-form--dark .hm-form__submit:focus-visible { outline-color: #ddd6fe; }

/* light (final call) */
.hm-form--light .hm-form__label { color: var(--hm-ink); }

.hm-form--light .hm-form__row {
  background: #ffffff;
  border-color: var(--hm-line-2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hm-form--light .hm-form__row:focus-within {
  border-color: var(--hm-violet);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.hm-form--light .hm-form__input { color: var(--hm-ink); }
.hm-form--light .hm-form__input::placeholder { color: #6b7385; opacity: 1; }
.hm-form--light .hm-form__input:focus-visible { outline: none; }
.hm-form--light .hm-form__fine { color: var(--hm-ink-3); }
.hm-form--light .hm-form__status { color: #be123c; }

/* ── Hero: promise chips, collage ──────────────────────────────────────── */
.hm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.hm-chip:hover {
  border-color: rgba(196, 181, 253, 0.65);
  background: rgba(124, 58, 237, 0.2);
  color: #ffffff;
}

.hm-chip__check {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.3);
  color: #ddd6fe;
}

.hm-hero-card {
  position: relative;
  aspect-ratio: 1 / 1;
}

.hm-hero-card__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: #0f172a;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 22px 44px -14px rgba(2, 6, 23, 0.75);
}

.hm-hero-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Honest label: these are layout studies for invented brands. It hangs off the
   card's lower-right corner so it never covers the ad's own text. */
.hm-hero-tag {
  position: absolute;
  right: 0.5rem;
  bottom: -0.5625rem;
  z-index: 2;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.94);
  color: #cbd5e1;
  font-family: var(--hm-body);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hm-hero-tag__short { display: none; }

@media (max-width: 639px) {
  .hm-hero-tag__long { display: none; }
  .hm-hero-tag__short { display: inline; }
  .hm-hero-tag { right: 0.375rem; }
}

/* ── Steps ─────────────────────────────────────────────────────────────── */
.hm-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .hm-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.hm-step {
  background: #ffffff;
  border: 1px solid var(--hm-line);
  border-radius: 1.25rem;
  padding: 1.75rem;
}

.hm-step__n {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--hm-violet-line);
  background: var(--hm-violet-tint);
  color: var(--hm-violet-deep);
  font-family: var(--hm-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
}

.hm-step .hm-h3 { margin-top: 1.5rem; }
.hm-step .hm-body { margin-top: 0.75rem; }

/* ── Studio (real screenshots) ─────────────────────────────────────────── */
.hm-studio {
  display: grid;
  gap: clamp(3.5rem, 6vw, 6rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}

.hm-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
}

.hm-panel__text { order: 2; }
.hm-panel__shot { order: 1; }

.hm-panel__text > * + * { margin-top: 0.875rem; }

@media (min-width: 1024px) {
  .hm-panel {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .hm-panel__text { order: 1; padding-block: 1rem; }
  .hm-panel__shot { order: 2; }

  .hm-panel--flip { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .hm-panel--flip .hm-panel__text { order: 2; }
  .hm-panel--flip .hm-panel__shot { order: 1; }
}

.hm-panel__n {
  margin: 0;
  font-family: var(--hm-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hm-violet);
}

.hm-shot {
  margin: 0;
}

.hm-shot__frame {
  overflow: hidden;
  border: 1px solid var(--hm-line-2);
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 28px 56px -20px rgba(15, 23, 42, 0.28);
}

.hm-shot img,
.hm-shot picture {
  display: block;
  width: 100%;
  height: auto;
}

.hm-shot figcaption {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hm-ink-3);
}

/* Phone: the screenshot is a real phone screen (tall), so show it at phone size
   rather than blown up to the full gutter width. */
@media (max-width: 639px) {
  .hm-shot {
    max-width: 17.5rem;
    margin-inline: auto;
  }
  .hm-shot figcaption { text-align: center; }
}

.hm-more {
  display: flex;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ── Promises ──────────────────────────────────────────────────────────── */
.hm-promises {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .hm-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .hm-promises { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}

.hm-promise {
  scroll-margin-top: 6.5rem;
  background: #ffffff;
  border: 1px solid var(--hm-line);
  border-radius: 1.25rem;
  padding: 1.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* A hero chip links here: show where it landed. */
.hm-promise:target {
  border-color: var(--hm-violet);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.hm-promise__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--hm-violet-tint);
  color: var(--hm-violet);
}

.hm-promise .hm-h3 { margin-top: 1.25rem; font-size: 1.1875rem; }
.hm-promise .hm-body { margin-top: 0.75rem; font-size: 0.9375rem; }

.hm-claims {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--hm-line-2);
  border-radius: 1.25rem;
  background: #ffffff;
}

@media (min-width: 960px) {
  .hm-claims {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.7fr) auto;
    gap: 2.5rem;
    padding: 1.75rem 2rem;
  }
}

.hm-claims__list {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-claims__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hm-ink-2);
}

.hm-claims__list svg {
  flex: none;
  margin-top: 0.125rem;
  color: var(--hm-ink-3);
}

/* ── Pricing snapshot ──────────────────────────────────────────────────── */
.hm-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 1024px) {
  .hm-pricing {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.hm-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .hm-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hm-plan {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--hm-line);
  border-radius: 1.25rem;
  padding: 1.75rem;
}

.hm-plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.hm-plan__tag {
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--hm-violet-tint);
  border: 1px solid var(--hm-violet-line);
  color: var(--hm-violet-deep);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.hm-plan__price {
  margin: 1.25rem 0 0;
  font-family: var(--hm-display);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--hm-ink);
}

.hm-plan__price small {
  margin-left: 0.25rem;
  font-family: var(--hm-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--hm-ink-3);
}

.hm-plan__lead {
  margin: 1.25rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--hm-ink);
}

.hm-plan__text {
  margin-top: 0.5rem;
}

.hm-plan__notes {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--hm-ink-2);
}

/* The button sits at the card's foot: at least 1.75rem below the text, and
   pinned to the bottom when the two cards are stretched to the table's height. */
.hm-plan__cta {
  margin-top: auto;
  padding-top: 1.75rem;
}

.hm-plan__cta .hm-btn {
  width: 100%;
}

.hm-credits {
  background: #ffffff;
  border: 1px solid var(--hm-line);
  border-radius: 1.25rem;
  padding: 1.5rem 1.75rem 1.75rem;
}

.hm-credits table {
  width: 100%;
  border-collapse: collapse;
}

.hm-credits caption {
  padding: 0 0 0.75rem;
  text-align: left;
  font-family: var(--hm-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hm-ink);
}

.hm-credits th,
.hm-credits td {
  padding: 0.75rem 0;
  border-top: 1px solid var(--hm-line);
  text-align: left;
  vertical-align: top;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.hm-credits thead th {
  border-top: 0;
  padding-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hm-ink-3);
}

.hm-credits tbody th {
  font-weight: 500;
  color: var(--hm-ink-2);
}

.hm-credits td,
.hm-credits th:last-child {
  text-align: right;
  white-space: nowrap;
}

.hm-credits td strong {
  font-weight: 800;
  color: var(--hm-ink);
}

.hm-credits td span {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.35;
  white-space: normal;
  color: var(--hm-ink-3);
}

.hm-credits__foot {
  margin-top: 1rem;
}

/* ── Questions ─────────────────────────────────────────────────────────── */
.hm-faq {
  display: grid;
  gap: 0.75rem;
  max-width: 50rem;
  margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
}

.hm-faq details {
  background: #ffffff;
  border: 1px solid var(--hm-line);
  border-radius: 1rem;
  transition: border-color 0.15s ease;
}

.hm-faq details:hover {
  border-color: var(--hm-line-2);
}

.hm-faq details[open] {
  border-color: var(--hm-line-2);
}

.hm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.875rem 1.25rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--hm-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--hm-ink);
  border-radius: 1rem;
}

.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::marker { content: ""; }

.hm-faq summary svg {
  flex: none;
  color: var(--hm-ink-3);
  transition: transform 0.2s ease, color 0.15s ease;
}

.hm-faq details[open] summary svg {
  transform: rotate(180deg);
  color: var(--hm-violet);
}

.hm-faq__a {
  margin: 0;
  padding: 0 1.25rem 1.375rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--hm-ink-2);
}

/* ── Final call ────────────────────────────────────────────────────────── */
.hm-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(2.25rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
  border: 1px solid var(--hm-line);
  border-radius: 1.75rem;
  background: var(--hm-alt);
  text-align: center;
}

.hm-final .hm-form {
  margin-inline: auto;
  text-align: left;
}

/* ── Before -> after and gallery (rendered only when real ads exist) ───── */
.hm-ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .hm-ba { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; }
}

.hm-ba__figure {
  position: relative;
  margin: 0;
  max-width: 32rem;
  justify-self: center;
  width: 100%;
}

.hm-ba__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 1px solid var(--hm-line-2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 28px 56px -20px rgba(15, 23, 42, 0.28);
}

.hm-ba__badge {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--hm-violet);
  color: #ffffff;
  border: 2px solid #ffffff;
  font-family: var(--hm-display);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
}

.hm-ba__note {
  margin-top: 1.5rem;
}

.hm-ba__list {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-ba__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--hm-ink);
}

.hm-ba__n {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--hm-violet);
  color: #ffffff;
  font-family: var(--hm-display);
  font-size: 0.8125rem;
  font-weight: 800;
}

.hm-gallery__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

/* The author display:flex above would beat the browser's own [hidden] rule, so
   the tabs (useless without the script) must be hidden explicitly. */
.hm-gallery__tabs[hidden] {
  display: none;
}

.hm-gallery__tab {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--hm-line-2);
  border-radius: 999px;
  background: #ffffff;
  color: var(--hm-ink-2);
  font-family: var(--hm-body);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.hm-gallery__tab:hover { border-color: var(--hm-violet); color: var(--hm-violet-deep); }

.hm-gallery__tab[aria-pressed="true"] {
  background: var(--hm-ink);
  border-color: var(--hm-ink);
  color: #ffffff;
}

.hm-gallery__grid {
  column-width: 15rem;
  column-gap: 1.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.hm-gallery__item {
  break-inside: avoid;
  margin: 0 0 1.5rem;
}

.hm-gallery__item[hidden] { display: none; }

.hm-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.875rem;
  border: 1px solid var(--hm-line-2);
}

.hm-gallery__cap {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--hm-ink);
}

.hm-gallery__cap span {
  display: block;
  margin-top: 0.125rem;
  font-weight: 400;
  color: var(--hm-ink-3);
}

@media (max-width: 639px) {
  /* Phone: one horizontal snap row, scrolling inside its own box. */
  .hm-gallery__grid {
    display: flex;
    gap: 1rem;
    column-width: auto;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .hm-gallery__item {
    flex: 0 0 min(72%, 16rem);
    margin: 0;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* .scroll-smooth on <html> (Tailwind class) outranks a bare `html` selector. */
  html,
  html.scroll-smooth { scroll-behavior: auto; }
  .hm-btn,
  .hm-link,
  .hm-link svg,
  .hm-chip,
  .hm-faq summary svg {
    transition: none;
  }
  .hm-btn--primary:hover,
  .hm-btn--secondary:hover {
    transform: none;
  }
}

/* ============================================================================
   ROUND TWO COMPONENTS — the public pages beyond the home page (2026-10-20)

   Features, Pricing, FAQ, Image Ads, Video Ads, Canvas, Send to Meta, Docs, the
   guides and the trust pages are built from the pieces below, in the same design
   language as the home page. Each component's markup contract is in its comment;
   the shared partials are www/pages/{_cta_band,_frame,_keepout_frames,
   _handoff_diagram} and www/guides/_shell, and the figures come from
   Www::PagesHelper (never typed into a view).

   Rules of this block:
   - Tokens only. No raw hex (the design-system ratchet counts it): colours are the
     --hm-* tokens above, or rgb(var(--hm-*-rgb) / alpha) built from the channel
     tokens declared here.
   - A component reads the SEMANTIC tokens (--hm-surface, --hm-text, --hm-text-2,
     --hm-text-3, --hm-border, --hm-border-2, --hm-accent ...). Light is the default
     on .hm; .hm-dark and .hm-band--dark flip them, so one component serves both.
   - Motion is gated: every animation sits under `html.anim` inside a
     no-preference media query, and is switched off again under
     prefers-reduced-motion: reduce. Nothing is ever hidden without JavaScript.
   - 390 px: no fixed widths on layout boxes, no negative margins; tables scroll
     inside .hm-table__scroll; tap targets are 44 px.
   Later slices append their own sub-blocks at the END of this file
   ("Round two — S2" ... "S6"); they do not edit this block.
   ============================================================================ */

/* ── Tokens ────────────────────────────────────────────────────────────────── */
.hm {
  /* channel tokens, so a rule can add alpha without a raw colour:
     rgb(var(--hm-ink-rgb) / 0.08) */
  --hm-white-rgb: 255 255 255;
  --hm-ink-rgb: 15 23 42;
  --hm-violet-rgb: 124 58 237;
  --hm-violet-soft-rgb: 196 181 253;
  --hm-night-rgb: 2 6 23;
  --hm-night: rgb(var(--hm-night-rgb));
  --hm-on-dark-2: rgb(203 213 225);
  --hm-on-dark-3: rgb(148 163 184);
  --hm-warn-bg: rgb(255 251 235);
  --hm-warn-line: rgb(253 230 138);
  --hm-warn-ink: rgb(120 53 15);
  --hm-warn-rgb: 251 191 36;
  --hm-warn-soft: rgb(253 230 138);
  --hm-grad-a: var(--hm-violet);
  --hm-grad-b: rgb(192 38 211);

  /* semantic tokens, light values */
  --hm-surface: var(--hm-white);
  --hm-field: rgb(var(--hm-ink-rgb) / 0.04);
  --hm-text: var(--hm-ink);
  --hm-text-2: var(--hm-ink-2);
  --hm-text-3: var(--hm-ink-3);
  --hm-border: var(--hm-line);
  --hm-border-2: var(--hm-line-2);
  --hm-accent: var(--hm-violet);
  --hm-accent-ink: var(--hm-violet-deep);
  --hm-accent-tint: var(--hm-violet-tint);
  --hm-accent-line: var(--hm-violet-line);
  --hm-card-shadow: 0 1px 2px rgb(var(--hm-ink-rgb) / 0.05), 0 22px 44px -26px rgb(var(--hm-ink-rgb) / 0.3);
}

/* Dark bands (the home hero, .hm-band--dark): the same names, dark values. */
.hm-dark,
.hm-band--dark {
  --hm-surface: rgb(var(--hm-white-rgb) / 0.05);
  --hm-field: rgb(var(--hm-white-rgb) / 0.08);
  --hm-text: var(--hm-white);
  --hm-text-2: var(--hm-on-dark-2);
  --hm-text-3: var(--hm-on-dark-3);
  --hm-border: rgb(var(--hm-white-rgb) / 0.1);
  --hm-border-2: rgb(var(--hm-white-rgb) / 0.2);
  --hm-accent: rgb(var(--hm-violet-soft-rgb));
  --hm-accent-ink: rgb(var(--hm-violet-soft-rgb));
  --hm-accent-tint: rgb(var(--hm-violet-rgb) / 0.22);
  --hm-accent-line: rgb(var(--hm-violet-soft-rgb) / 0.32);
  --hm-grad-a: rgb(167 139 250);
  --hm-grad-b: rgb(216 180 254);
  --hm-card-shadow: 0 1px 2px rgb(var(--hm-night-rgb) / 0.4), 0 22px 44px -24px rgb(var(--hm-night-rgb) / 0.8);
}

/* The existing type classes follow the tokens (identical in light bands). */
.hm .hm-h2,
.hm .hm-h3 { color: var(--hm-text); }
.hm .hm-lead,
.hm .hm-body { color: var(--hm-text-2); }
.hm .hm-small { color: var(--hm-text-3); }
.hm .hm-eyebrow { color: var(--hm-accent-ink); }
.hm .hm-panel__n { color: var(--hm-accent); }
.hm .hm-shot figcaption { color: var(--hm-text-3); }

.hm-wrap--narrow { max-width: 58rem; }

/* The scene-video note ("at 540p · 20 at 720p · 40 at 1080p"): one line when there is room
   for it, even lines on a phone. */
.hm-credits td span { text-wrap: balance; }

@media (min-width: 640px) {
  .hm-credits td span { white-space: nowrap; }
}

/* ── Bands ─────────────────────────────────────────────────────────────────── */
/* A dark section that is not the hero: the same dark as the home hero's slate-950,
   with the glow blobs of .hm-glow. Inside .hm-flow it beats the even/odd tint. */
.hm-band--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hm-night);
  color: var(--hm-text);
}

.hm-flow > section.hm-band--dark,
.hm-flow > section.hm-band--dark:nth-of-type(even) {
  background: var(--hm-night);
}

.hm-band--dark :where(a, button, summary, input, [tabindex]):focus-visible {
  outline-color: rgb(var(--hm-violet-soft-rgb));
}

.hm-band--dark > .hm-wrap,
.hm-hero > .hm-wrap { position: relative; }

/* Two soft violet blobs behind a dark band. Drawn with radial gradients, not blur
   filters, so they cost nothing to paint; .mkt-drift-a / -b move them under html.anim.
   Markup: <div class="hm-glow" aria-hidden="true"><span class="hm-glow__a mkt-drift-a"></span>
   <span class="hm-glow__b mkt-drift-b"></span></div> as the band's first child. */
.hm-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, black 0, black 68%, transparent 100%);
  mask-image: linear-gradient(180deg, black 0, black 68%, transparent 100%);
}

.hm-glow__a,
.hm-glow__b {
  position: absolute;
  border-radius: 50%;
}

.hm-glow__a {
  top: -15rem;
  left: 50%;
  width: 46rem;
  height: 30rem;
  margin-left: -23rem;
  background: radial-gradient(closest-side, rgb(var(--hm-violet-rgb) / 0.34), transparent);
}

.hm-glow__b {
  right: -8rem;
  bottom: -9rem;
  width: 30rem;
  height: 24rem;
  background: radial-gradient(closest-side, rgb(var(--hm-violet-soft-rgb) / 0.14), transparent);
}

/* Dark-band skins for the home components a page may place on one. */
.hm-band--dark .hm-link { color: var(--hm-accent); text-decoration-color: rgb(var(--hm-violet-soft-rgb) / 0.4); }
.hm-band--dark .hm-link:hover { color: var(--hm-white); }

.hm-band--dark .hm-btn--primary {
  box-shadow: 0 10px 28px -10px rgb(var(--hm-violet-rgb) / 0.7);
}

.hm-band--dark .hm-btn--secondary {
  background: transparent;
  color: var(--hm-white);
  border-color: rgb(var(--hm-white-rgb) / 0.3);
}

.hm-band--dark .hm-btn--secondary:hover {
  background: rgb(var(--hm-white-rgb) / 0.08);
  border-color: rgb(var(--hm-violet-soft-rgb));
  color: var(--hm-white);
}

.hm-band--dark :is(.hm-step, .hm-promise, .hm-faq details) {
  background: var(--hm-surface);
  border-color: var(--hm-border);
}

.hm-band--dark :is(.hm-step, .hm-promise, .hm-faq details):hover { border-color: var(--hm-border-2); }
.hm-band--dark .hm-step__n { background: var(--hm-accent-tint); border-color: var(--hm-accent-line); color: var(--hm-accent-ink); }
.hm-band--dark .hm-promise__icon { background: var(--hm-accent-tint); color: var(--hm-accent); }
.hm-band--dark .hm-faq summary,
.hm-band--dark .hm-faq summary svg { color: var(--hm-text); }
.hm-band--dark .hm-faq__a { color: var(--hm-text-2); }

/* Buttons side by side (one row, wraps on a phone). */
.hm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hm-actions .hm-btn { max-width: 100%; }

/* A link inside a sentence: .hm-link is a 44 px-tall flex item for stand-alone links. */
.hm-link--inline {
  display: inline;
  min-height: 0;
}

@media (max-width: 479px) {
  .hm-actions { flex-direction: column; align-items: stretch; }
}

/* Gradient accent for ONE phrase of a heading; add .mkt-shimmer for the slow sweep.
   Keep it short: it wraps with the line and clones its gradient on each line. */
.hm-accent {
  background-image: linear-gradient(90deg, var(--hm-grad-a), var(--hm-grad-b), var(--hm-grad-a));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: transparent;
  white-space: nowrap;
}

/* A longer accent phrase may wrap (on a 320 px phone a long one would overflow). */
.hm-accent--wrap { white-space: normal; }

/* ── Hero: compact, light or dark ──────────────────────────────────────────────
   <section id="top" class="hm-hero hm-hero--light"> | class="hm-hero hm-band--dark">
     .hm-wrap > .hm-hero__grid > .hm-hero__copy (eyebrow, H1.hm-hero__title, .hm-lead,
     .hm-actions) + .hm-hero__visual.  .hm-hero__stack puts the visual UNDER the copy
     instead (a wide diagram). Same reveal cadence as home: 0 / 90 / 180 / 270 ms. */
.hm-hero {
  position: relative;
  padding-block: clamp(3rem, 1.5rem + 5vw, 6rem);
}

.hm-hero--light {
  overflow: hidden;
  background: var(--hm-white);
  border-bottom: 1px solid var(--hm-line);
}

.hm-hero--light::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52rem 26rem at 12% -12%, rgb(var(--hm-violet-rgb) / 0.1), transparent 70%),
    radial-gradient(38rem 22rem at 96% 4%, rgb(var(--hm-violet-rgb) / 0.06), transparent 70%);
  pointer-events: none;
}

.hm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .hm-hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}

.hm-hero__stack {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}

.hm-hero__copy { min-width: 0; }
.hm-hero__copy > * + * { margin-top: 1.25rem; }
.hm-hero__copy .hm-eyebrow + .hm-hero__title { margin-top: 1rem; }
.hm-hero__copy .hm-lead { max-width: 36rem; }
.hm-hero__stack .hm-hero__copy { max-width: 46rem; }
.hm-hero__copy .hm-actions { padding-top: 0.5rem; }

.hm-hero__title {
  margin: 0;
  font-family: var(--hm-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--hm-text);
  text-wrap: balance;
}

.hm-hero--guide { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.hm-hero--guide .hm-hero__copy { max-width: 46rem; }

.hm-hero__visual {
  position: relative;
  min-width: 0;
}

/* Desktop frame with the phone crop overlapping its lower corner (from 1024 px). */
.hm-hero__visual--duo { padding-bottom: 2rem; }
.hm-hero__visual--duo .hm-phone-wrap { display: none; }

@media (min-width: 1024px) {
  .hm-hero__visual--duo .hm-phone-wrap {
    display: block;
    position: absolute;
    right: 1.25rem;
    bottom: 0;
    z-index: 2;
    width: 10.25rem;
  }
}

/* ── Framed screenshots ──────────────────────────────────────────────────────
   www_frame(stem, alt:, url:) -> .hm-frame-wrap > figure.hm-frame.hm-shot
     .hm-frame__bar (.hm-frame__dots, .hm-frame__url = the REAL in-app path)
     .hm-frame__body > <picture>   figcaption "Screenshot of the current app"
   Under 640 px the <picture> serves the phone crop and the frame becomes a phone
   (no address bar). The chrome stays light on dark bands: it is the app's own UI. */
/* .hm-frame is also a .hm-shot, which centres it and caps it at phone width under 640 px. */
.hm-frame { min-width: 0; }

.hm-frame__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--hm-line-2);
  border-bottom: 0;
  border-radius: 1rem 1rem 0 0;
  background: var(--hm-alt);
}

.hm-frame__dots {
  display: flex;
  flex: none;
  gap: 0.375rem;
}

.hm-frame__dots i {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background: rgb(var(--hm-ink-rgb) / 0.16);
}

.hm-frame__url {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.25rem 0.75rem;
  overflow: hidden;
  border: 1px solid var(--hm-line);
  border-radius: 999px;
  background: var(--hm-white);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--hm-ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-frame__body {
  overflow: hidden;
  border: 1px solid var(--hm-line-2);
  border-radius: 0 0 1rem 1rem;
  background: var(--hm-white);
  box-shadow: 0 1px 2px rgb(var(--hm-ink-rgb) / 0.06), 0 30px 60px -24px rgb(var(--hm-ink-rgb) / 0.4);
}

.hm-band--dark .hm-frame__body {
  box-shadow: 0 1px 2px rgb(var(--hm-night-rgb) / 0.5), 0 36px 70px -26px rgb(var(--hm-night-rgb) / 0.95);
}

@media (max-width: 639px) {
  .hm-frame__bar { display: none; }
  .hm-frame__body { border-radius: 1.5rem; }
}

/* The phone crop: www_phone(stem, alt:). */
.hm-phone { margin: 0; }

.hm-phone__screen {
  padding: 0.4rem;
  border-radius: 1.9rem;
  background: var(--hm-ink);
  box-shadow: 0 1px 2px rgb(var(--hm-night-rgb) / 0.5), 0 30px 60px -22px rgb(var(--hm-night-rgb) / 0.85);
}

.hm-phone__screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.55rem;
}

/* ── Stat tiles ──────────────────────────────────────────────────────────────
   <ul class="hm-stats [hm-stats--2|--3]"><li class="hm-stat">
     <span class="hm-stat__v" data-countup>200</span><span class="hm-stat__l">image ads</span>
     <span class="hm-stat__s">at 5 credits each</span></li></ul>
   data-countup: the final number stays in the markup; the runtime counts up to it on
   reveal (put data-reveal on the .hm-stat). */
.hm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 479px) {
  .hm-stats--3 { grid-template-columns: minmax(0, 1fr); }
}

.hm-stat {
  min-width: 0;
  padding: 1.25rem 1.25rem 1.375rem;
  border: 1px solid var(--hm-border);
  border-radius: 1.25rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.hm-stat__v {
  display: block;
  font-family: var(--hm-display);
  font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--hm-text);
  overflow-wrap: anywhere;
}

.hm-stat__l {
  display: block;
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-text);
}

.hm-stat__s {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--hm-text-3);
}

/* ── Tables ──────────────────────────────────────────────────────────────────
   <div class="hm-table__scroll" role="region" aria-label="..." tabindex="0">
     <table class="hm-table [hm-table--compare]"><caption class="sr-only">...</caption>
       <thead><tr><th scope="col">..</th></tr></thead>
       <tbody><tr [data-us]><th scope="row">..</th><td>..</td></tr></tbody></table></div>
   The wrapper scrolls sideways on a phone so the PAGE never does. tr[data-us] is the
   highlighted "us" row. */
.hm-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--hm-border);
  border-radius: 1.25rem;
  background: var(--hm-surface);
  -webkit-overflow-scrolling: touch;
}

.hm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hm-text-2);
}

.hm-table th,
.hm-table td {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--hm-border);
  text-align: left;
  vertical-align: top;
}

.hm-table thead th {
  border-top: 0;
  background: rgb(var(--hm-ink-rgb) / 0.03);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hm-text-3);
}

.hm-band--dark .hm-table thead th { background: rgb(var(--hm-white-rgb) / 0.04); }

.hm-table tbody th {
  font-weight: 700;
  color: var(--hm-text);
}

.hm-table td strong { color: var(--hm-text); }

.hm-table tr[data-us] > * { background: var(--hm-accent-tint); }
.hm-table tr[data-us] > :first-child { box-shadow: inset 3px 0 0 var(--hm-accent); }

.hm-table--compare { font-size: 1rem; }

.hm-table--compare th,
.hm-table--compare td { padding-block: 1.125rem; }
.hm-table--compare td:not(:first-child) { white-space: nowrap; }

/* ── Cards ───────────────────────────────────────────────────────────────────
   <ul class="hm-cards [hm-cards--2|--3|--4]"><li class="hm-card">
     <span class="hm-card__icon">svg</span><h3 class="hm-h3">..</h3><p class="hm-body">..</p>
     <ul class="hm-card__chips"><li>5 credits an ad</li></ul><a class="hm-link">..</a></li></ul>
   The plain .hm-cards fits as many 16 rem columns as the width allows. */
.hm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .hm-cards--2,
  .hm-cards--3,
  .hm-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .hm-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .hm-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hm-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: 1.625rem;
  border: 1px solid var(--hm-border);
  border-radius: 1.25rem;
  background: var(--hm-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.hm-card:hover {
  border-color: var(--hm-border-2);
  box-shadow: var(--hm-card-shadow);
  transform: translateY(-2px);
}

.hm-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.75rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.hm-card .hm-body { font-size: 0.9375rem; }

.hm-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.hm-card__chips li {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 999px;
  background: var(--hm-accent-tint);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-accent-ink);
}

.hm-card > .hm-link { margin-top: auto; }

/* ── Key / value spec list ───────────────────────────────────────────────────
   <dl class="hm-kv"><div><dt>Per generated ad</dt><dd>5 credits, shown first</dd></div>..</dl> */
.hm-kv {
  margin: 0;
  padding: 0;
}

.hm-kv > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 2rem;
  padding: 1.125rem 0;
  border-top: 1px solid var(--hm-border);
}

.hm-kv > div:last-child { border-bottom: 1px solid var(--hm-border); }

.hm-kv dt {
  font-weight: 700;
  line-height: 1.4;
  color: var(--hm-text);
}

.hm-kv dd {
  margin: 0;
  line-height: 1.6;
  color: var(--hm-text-2);
}

@media (min-width: 640px) {
  .hm-kv > div { grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 1fr); }
}

/* ── Check and "not included" lists ──────────────────────────────────────────
   <ul class="hm-check"><li><%= home_icon(:check, size: 14, stroke: 2.6) %>text</li></ul>
   <ul class="hm-x"><li><%= home_icon(:minus, size: 14, stroke: 2.6) %>text</li></ul> */
.hm-check,
.hm-x {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-check li,
.hm-x li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.55;
  color: var(--hm-text-2);
}

.hm-check li > svg,
.hm-x li > svg {
  flex: none;
  box-sizing: content-box;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.1875rem;
  padding: 0.25rem;
  border-radius: 999px;
}

.hm-check li > svg {
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.hm-x li > svg {
  background: rgb(var(--hm-ink-rgb) / 0.06);
  color: var(--hm-text-3);
}

.hm-band--dark .hm-x li > svg { background: rgb(var(--hm-white-rgb) / 0.08); }

/* ── Notes and tags ──────────────────────────────────────────────────────────
   <p class="hm-note [hm-note--warn]"><svg/>text</p>   <span class="hm-tag [hm-tag--muted]">..</span> */
.hm-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 1rem;
  background: var(--hm-accent-tint);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--hm-text-2);
}

.hm-note > svg {
  flex: none;
  margin-top: 0.1875rem;
  color: var(--hm-accent);
}

.hm-note strong { color: var(--hm-text); }

.hm-note--warn {
  border-color: var(--hm-warn-line);
  background: var(--hm-warn-bg);
  color: var(--hm-warn-ink);
}

.hm-note--warn > svg,
.hm-note--warn strong { color: var(--hm-warn-ink); }

.hm-band--dark .hm-note--warn {
  border-color: rgb(var(--hm-warn-rgb) / 0.35);
  background: rgb(var(--hm-warn-rgb) / 0.1);
  color: var(--hm-warn-soft);
}

.hm-band--dark .hm-note--warn > svg,
.hm-band--dark .hm-note--warn strong { color: var(--hm-warn-soft); }

.hm-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 999px;
  background: var(--hm-accent-tint);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-accent-ink);
}

.hm-tag--muted {
  border-color: var(--hm-border-2);
  background: rgb(var(--hm-ink-rgb) / 0.05);
  color: var(--hm-text-3);
}

.hm-band--dark .hm-tag--muted { background: rgb(var(--hm-white-rgb) / 0.08); }

/* ── Closing band ────────────────────────────────────────────────────────────
   www/pages/_cta_band: one per page, the last section of .hm-flow. */
.hm-cta { text-align: center; }

.hm-cta__inner {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.hm-cta__inner > * + * { margin-top: 1.25rem; }
.hm-cta__inner .hm-lead { margin-inline: auto; }
.hm-cta__inner .hm-actions { justify-content: center; padding-top: 0.75rem; }

/* ── Steps with a small visual ───────────────────────────────────────────────
   <ol class="hm-steps hm-steps--visual [hm-steps--5|--list]"><li class="hm-step">
     <span class="hm-step__n">1</span><div class="hm-step__visual">..</div>
     <h3 class="hm-h3">..</h3><p class="hm-body">..</p></li></ol>
   Reuses .hm-steps / .hm-step / .hm-step__n. --5: five across from 1100 px, two and
   three on a tablet. --list: one step per row (a guide), the visual beside the text. */
.hm-steps--visual { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

@media (min-width: 640px) and (max-width: 1099px) {
  /* five steps: two on the first row, three on the second, never one orphan */
  .hm-steps--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hm-steps--5 > .hm-step { grid-column: span 2; }
  .hm-steps--5 > .hm-step:nth-child(-n + 2) { grid-column: span 3; }
}

@media (min-width: 1100px) {
  .hm-steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
}

.hm-step__visual {
  display: grid;
  place-items: center;
  min-height: 6rem;
  margin-top: 1.25rem;
  padding: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--hm-border);
  border-radius: 0.875rem;
  background: rgb(var(--hm-ink-rgb) / 0.03);
}

.hm-band--dark .hm-step__visual { background: rgb(var(--hm-white-rgb) / 0.04); }

.hm-step__chip {
  display: inline-block;
  margin-top: 0.875rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 999px;
  background: var(--hm-accent-tint);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-accent-ink);
}

.hm-steps--list { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) {
  .hm-steps--list .hm-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 0.5rem 1.5rem;
    align-items: start;
  }
  .hm-steps--list .hm-step .hm-h3,
  .hm-steps--list .hm-step .hm-body { grid-column: 2; margin-top: 0; }
  .hm-steps--list .hm-step__visual { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}

/* ── Flow diagrams ───────────────────────────────────────────────────────────
   <div class="hm-flowchart"><div class="hm-node"><p class="hm-node__title">..</p>..</div>
     <div class="hm-node__link" aria-hidden="true"></div><div class="hm-node">..</div></div>
   Row from 720 px, column under it. The link is a 2 px dashed line with an arrowhead;
   under html.anim the dashes travel in the direction of the flow (hm-dash).
   .hm-node__pill: a small status pill inside a node, faded in 120 ms apart under
   html.anim once its [data-reveal] node reveals. www/pages/_handoff_diagram is the
   finished example. */
.hm-flowchart {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 720px) {
  .hm-flowchart { flex-direction: row; }
}

.hm-node {
  flex: 1 1 0;
  min-width: 0;
  padding: 1.25rem 1.375rem 1.375rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 1.25rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.hm-node__title {
  margin: 0;
  font-family: var(--hm-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--hm-text);
}

/* .hm-flowchart--numbered: each node's title gets its step number (1, 2, 3 ...) from a
   CSS counter, so the numbering can never fall out of step with the nodes. */
.hm-flowchart--numbered { counter-reset: hm-node; }
.hm-flowchart--numbered .hm-node { counter-increment: hm-node; }

.hm-flowchart--numbered .hm-node__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.hm-flowchart--numbered .hm-node__title::before {
  content: counter(hm-node);
  display: grid;
  flex: none;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--hm-accent-tint);
  border: 1px solid var(--hm-accent-line);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--hm-accent-ink);
}

.hm-node__list,
.hm-node__pills {
  display: grid;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.hm-node__list li {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--hm-text-2);
}

.hm-node__pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 0.75rem;
  background: var(--hm-accent-tint);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--hm-accent-ink);
}

.hm-node__pill svg { flex: none; }

.hm-node__btn {
  display: inline-flex;
  align-items: center;
  margin-top: 0.875rem;
  padding: 0.5rem 1.125rem;
  border-radius: 0.75rem;
  background: var(--hm-violet);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hm-white);
  box-shadow: 0 8px 22px -10px rgb(var(--hm-violet-rgb) / 0.8);
}

.hm-node__note {
  margin: 0.625rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--hm-text-3);
}

.hm-node__link {
  --hm-dash-end: 0 12px;
  position: relative;
  flex: none;
  align-self: center;
  width: 2px;
  height: 2.5rem;
  background-image: repeating-linear-gradient(180deg, var(--hm-accent) 0 6px, transparent 6px 12px);
  background-position: 0 0;
  background-size: 2px 12px;
}

.hm-node__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  margin-left: -5px;
  border-top: 8px solid var(--hm-accent);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

@media (min-width: 720px) {
  .hm-node__link {
    --hm-dash-end: 12px 0;
    width: 3.5rem;
    height: 2px;
    background-image: repeating-linear-gradient(90deg, var(--hm-accent) 0 6px, transparent 6px 12px);
    background-size: 12px 2px;
  }
  .hm-node__link::after {
    left: auto;
    right: -2px;
    bottom: auto;
    top: 50%;
    margin: -5px 0 0;
    border-top: 5px solid transparent;
    border-right: 0;
    border-bottom: 5px solid transparent;
    border-left: 8px solid var(--hm-accent);
  }
}

.hm-diagram { margin: 0; }

.hm-diagram__caption {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hm-text-3);
}

/* ── Ad formats with Meta's keep-out strips ──────────────────────────────────
   www/pages/_keepout_frames. Each .hm-format carries --ratio-w / --ratio-h (the shape)
   and --keep-right / --keep-bottom (the strips, in percent of the width / height).
   All four frames share one height, so their widths follow their true aspect. */
.hm-formats {
  --hm-frame-h: 12.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 639px) {
  .hm-formats { --hm-frame-h: 9rem; gap: 1.25rem 1.5rem; }
}

.hm-format { min-width: 0; }

.hm-format__art {
  position: relative;
  width: calc(var(--hm-frame-h) * var(--ratio-w) / var(--ratio-h));
  height: var(--hm-frame-h);
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.5rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.hm-format__keepout {
  position: absolute;
  background: repeating-linear-gradient(135deg, rgb(var(--hm-violet-rgb) / 0.5) 0 3px, rgb(var(--hm-violet-rgb) / 0.12) 3px 7px);
}

.hm-format__keepout--right {
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--keep-right) * 1%);
}

.hm-format__keepout--bottom {
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--keep-bottom) * 1%);
}

.hm-format__label,
.hm-format__keep { margin: 0; }

.hm-format__label {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--hm-text-2);
}

.hm-format__label strong {
  font-family: var(--hm-display);
  font-weight: 800;
  color: var(--hm-text);
}

.hm-format__keep {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hm-text-3);
}

.hm-formats__legend {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hm-text-3);
}

.hm-formats__swatch {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.25rem;
  background: repeating-linear-gradient(135deg, rgb(var(--hm-violet-rgb) / 0.5) 0 3px, rgb(var(--hm-violet-rgb) / 0.12) 3px 7px);
}

/* ── Credit calculator (Pricing hero) ────────────────────────────────────────
   <div class="hm-calc"><p class="hm-calc__title">..</p>
     <div class="hm-calc__row"><label class="hm-calc__label" for="..">Image ads</label>
       <div class="hm-calc__input"><button type="button" aria-label="Fewer image ads">-</button>
         <input id=".." type="number" inputmode="numeric" min="0" value="100">
         <button type="button" aria-label="More image ads">+</button></div>
       <p class="hm-calc__rate">5 credits each</p></div> ..
     <div class="hm-calc__total"><span>Credits needed</span><strong>762</strong></div>
     <div class="hm-calc__meter"><div class="hm-calc__track"><span class="hm-calc__fill"
       style="--fill: 76"></span></div><ol class="hm-calc__marks"><li style="--at: 50">Solo 500</li>..</ol></div></div>
   Without JavaScript the card shows its default row as a static example. --fill and --at
   are percentages (numbers). */
.hm-calc {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--hm-border-2);
  border-radius: 1.5rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.hm-calc__title {
  margin: 0 0 1rem;
  font-family: var(--hm-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hm-text);
}

.hm-calc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  align-items: center;
  padding: 0.875rem 0;
  border-top: 1px solid var(--hm-border);
}

.hm-calc__label {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hm-text);
}

.hm-calc__rate {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hm-text-3);
}

.hm-calc__input {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.75rem;
  background: var(--hm-field);
}

.hm-calc__input button {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hm-text);
  cursor: pointer;
}

.hm-calc__input button:hover { color: var(--hm-accent); }

.hm-calc__input input {
  width: 4.25rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hm-text);
  -moz-appearance: textfield;
  appearance: textfield;
}

.hm-calc__input input::-webkit-outer-spin-button,
.hm-calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.hm-calc__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 0.25rem;
  border-top: 1px solid var(--hm-border-2);
  color: var(--hm-text-2);
}

.hm-calc__total strong {
  font-family: var(--hm-display);
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--hm-text);
}

.hm-calc__meter { margin-top: 0.75rem; }

.hm-calc__track {
  position: relative;
  height: 0.625rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hm-field);
}

.hm-calc__fill {
  display: block;
  width: calc(min(var(--fill, 0), 100) * 1%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--hm-grad-a), var(--hm-grad-b));
  transition: width 0.3s ease;
}

.hm-calc__marks {
  position: relative;
  height: 2.75rem;
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
}

.hm-calc__marks li {
  position: absolute;
  top: 0;
  left: calc(var(--at, 0) * 1%);
  padding-top: 0.5rem;
  border-left: 1px solid var(--hm-border-2);
  padding-left: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--hm-text-3);
  white-space: nowrap;
}

.hm-calc__marks li:last-child {
  right: 0;
  left: auto;
  padding-right: 0.375rem;
  padding-left: 0;
  border-right: 1px solid var(--hm-border-2);
  border-left: 0;
  text-align: right;
}

/* ── Plans, four across (Pricing) ────────────────────────────────────────────
   <div id="self-serve-plans" class="hm-plans hm-plans--four"> of four .hm-plan, the
   featured one data-featured="true". */
@media (min-width: 1180px) {
  .hm-plans--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hm-plan[data-featured="true"] {
  border-color: var(--hm-violet);
  box-shadow: 0 0 0 1px var(--hm-violet), var(--hm-card-shadow);
}

/* ── Filter chips and search (FAQ) ───────────────────────────────────────────
   <div class="hm-filter" role="group" aria-label=".."><button type="button"
   class="hm-filter__chip" aria-pressed="true">All</button>..</div>
   <label class="hm-search"><span class="sr-only">Search questions</span>
   <span class="hm-search__icon">svg</span><input type="search" aria-controls=".."></label> */
.hm-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hm-filter__chip {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 999px;
  background: var(--hm-surface);
  font-family: var(--hm-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hm-text-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.hm-filter__chip:hover { border-color: var(--hm-accent); color: var(--hm-accent-ink); }

.hm-filter__chip[aria-pressed="true"] {
  background: var(--hm-ink);
  border-color: var(--hm-ink);
  color: var(--hm-white);
}

.hm-band--dark .hm-filter__chip[aria-pressed="true"] {
  background: var(--hm-white);
  border-color: var(--hm-white);
  color: var(--hm-ink);
}

.hm-search {
  position: relative;
  display: block;
  max-width: 32rem;
}

.hm-search__icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  display: grid;
  transform: translateY(-50%);
  color: var(--hm-text-3);
  pointer-events: none;
}

.hm-search input {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 1rem 0.5rem 2.75rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.75rem;
  background: var(--hm-surface);
  font-family: var(--hm-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--hm-text);
}

.hm-search input::placeholder { color: var(--hm-text-3); opacity: 1; }

/* ── On-this-page list (guides, legal pages) ─────────────────────────────────
   <nav class="hm-toc" aria-label="On this page"><p class="hm-toc__title">..</p><ol><li>
   <a href="#id">..</a></li></ol></nav>. A chip row that scrolls inside itself under
   1024 px; a sticky list beside the article from 1024 px. aria-current marks the
   section being read (www/guides/_shell sets it; plain anchors without JavaScript). */
.hm-toc,
.hm-legal__toc { min-width: 0; }

.hm-toc__title {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-text-3);
}

.hm-toc ol,
.hm-legal__toc ol {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.5rem;
  overflow-x: auto;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.hm-toc a,
.hm-legal__toc a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 999px;
  background: var(--hm-surface);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--hm-text-2);
  text-decoration: none;
  white-space: nowrap;
}

.hm-toc a:hover,
.hm-legal__toc a:hover { border-color: var(--hm-accent); color: var(--hm-accent-ink); }

.hm-toc a[aria-current],
.hm-legal__toc a[aria-current] {
  background: var(--hm-ink);
  border-color: var(--hm-ink);
  color: var(--hm-white);
}

@media (min-width: 1024px) {
  .hm-toc,
  .hm-legal__toc {
    position: sticky;
    top: 6rem;
    align-self: start;
  }

  .hm-toc ol,
  .hm-legal__toc ol {
    display: block;
    padding: 0;
    overflow: visible;
  }

  .hm-toc li + li,
  .hm-legal__toc li + li { margin-top: 0.125rem; }

  .hm-toc a,
  .hm-legal__toc a {
    display: flex;
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    border: 0;
    border-left: 2px solid var(--hm-border);
    border-radius: 0;
    background: none;
    font-weight: 500;
    white-space: normal;
  }

  .hm-toc a:hover,
  .hm-legal__toc a:hover { border-left-color: var(--hm-accent); }

  .hm-toc a[aria-current],
  .hm-legal__toc a[aria-current] {
    background: none;
    border-left-color: var(--hm-accent);
    font-weight: 700;
    color: var(--hm-accent-ink);
  }
}

/* ── Guide shell (www/guides/_shell) ─────────────────────────────────────────── */
.hm-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .hm-guide {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

.hm-guide__body {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.hm-guide__section {
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hm-line);
  border-radius: 1.5rem;
  background: var(--hm-white);
  scroll-margin-top: 6rem;
}

.hm-guide__section--alt { background: var(--hm-violet-tint); border-color: var(--hm-violet-line); }
.hm-guide__section.hm-band--dark { background: var(--hm-night); border-color: var(--hm-border); }

.hm-guide__section > * + * { margin-top: 1.25rem; }

.hm-guide__meta {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--hm-text-3);
}

/* Long-form text (guides, legal): paragraphs, lists and links at reading size. */
.hm-prose { max-width: 42rem; }
.hm-prose > * + * { margin-top: 1rem; }
.hm-prose p,
.hm-prose li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hm-text-2);
}
.hm-prose ul,
.hm-prose ol { padding-left: 1.25rem; }
.hm-prose li + li { margin-top: 0.375rem; }
.hm-prose a {
  font-weight: 600;
  color: var(--hm-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ── Legal shell (Privacy, Terms): the text is untouched ─────────────────────
   <div class="hm-legal"><nav class="hm-legal__toc">..</nav><div class="hm-legal__body">
   <section class="hm-card">..</section>..</div></div> */
.hm-legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .hm-legal {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }
}

.hm-legal__body {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.hm-legal__body .hm-card:hover { transform: none; box-shadow: none; }
.hm-legal__body .hm-card { scroll-margin-top: 6rem; }

/* ── Motion: all of it gated ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hm-dash {
    to { background-position: var(--hm-dash-end, 12px 0); }
  }

  /* The dashes on a flow link travel in the direction of the flow. */
  html.anim .hm-node__link { animation: hm-dash 2.4s linear infinite; }

  /* The pills of a revealing node fade in 120 ms apart. Hidden ONLY while their
     node is a [data-reveal] block that has not revealed yet, so a node without
     data-reveal can never leave a pill invisible. */
  html.anim .hm-node__pill {
    transition: opacity 0.45s ease, transform 0.45s ease;
    transition-delay: calc(var(--pill-i, 0) * 120ms + 240ms);
  }

  html.anim .hm-node[data-reveal]:not(.is-visible) .hm-node__pill {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-node__link { animation: none; }
  .hm-node__pill { opacity: 1; transform: none; transition: none; }
  .hm-card,
  .hm-calc__fill,
  .hm-filter__chip { transition: none; }
  .hm-card:hover { transform: none; }
}

/* === Round two — S2 === */
/* Pricing rebuild, FAQ page.

   Tokens only (no raw hex): the one new colour is declared below as a token. Anything that
   JavaScript hides and shows uses the [hidden] attribute, and each such rule says
   `display: none` out loud, because a component's own `display` would otherwise beat the
   browser's built-in [hidden] rule. Nothing here is ever hidden without JavaScript. */

.hm {
  --hm-live: rgb(52 211 153);
}

/* ── Pricing: hero pill, calculator, plans, enterprise, buys, compare ─────── */
.hm-hero__pill { margin: 0; }

/* A sentence of a headline that must not break in the middle: the line breaks between sentences. */
.hm-phrase {
  display: inline-block;
  max-width: 100%;
}

.hm-hero__copy .hm-hero__pill + .hm-hero__title { margin-top: 1.5rem; }

/* Three assurances under the hero buttons; on a phone the calculator comes first instead. */
.hm-hero__copy .hm-hero__checks { margin-top: 1.75rem; }

@media (max-width: 639px) {
  .hm-hero__checks { display: none; }
}

.hm-tag__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--hm-live);
}

/* The calculator card, striking on the dark hero: a glass panel with a violet glow under it
   and a gradient hairline on its top edge. */
.hm-band--dark .hm-calc {
  position: relative;
  max-width: 36rem;
  margin-inline: auto;
  border-color: rgb(var(--hm-violet-soft-rgb) / 0.28);
  background: linear-gradient(180deg, rgb(var(--hm-white-rgb) / 0.1), rgb(var(--hm-white-rgb) / 0.035));
  box-shadow: 0 0 0 1px rgb(var(--hm-night-rgb) / 0.4), 0 34px 80px -34px rgb(var(--hm-violet-rgb) / 0.75), var(--hm-card-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.hm-band--dark .hm-calc::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 1.75rem;
  left: 1.75rem;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--hm-grad-a), var(--hm-grad-b), transparent);
}

.hm-calc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 0.75rem;
}

.hm-calc__head .hm-calc__title { margin: 0; }

.hm-calc__hint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hm-text-3);
}

.hm-calc__label { min-width: 0; }

.hm-calc__rate {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}

.hm-calc__rate span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--hm-text-2);
}

.hm-calc__input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hm-calc__input:focus-within {
  border-color: var(--hm-accent);
  box-shadow: 0 0 0 3px rgb(var(--hm-violet-rgb) / 0.32);
}

.hm-calc__input input:focus-visible { outline: none; }
.hm-calc__input button:focus-visible { outline-offset: -4px; border-radius: 0.75rem; }
.hm-calc__input button:active { background: rgb(var(--hm-white-rgb) / 0.1); }

/* Before the script runs (or without it) the rows are a printed example, not dead controls. */
.hm-calc:not(.is-live) .hm-calc__input {
  border-color: transparent;
  background: none;
}

.hm-calc:not(.is-live) .hm-calc__input input {
  width: auto;
  min-width: 3rem;
  padding: 0;
  text-align: right;
}

.hm-calc__total { padding-top: 1.125rem; }
.hm-calc__total span { font-weight: 600; }

.hm-calc__total strong {
  font-size: clamp(2.25rem, 2rem + 1vw, 2.75rem);
  line-height: 1;
}

.hm-calc__fill { box-shadow: 0 0 14px rgb(var(--hm-violet-rgb) / 0.55); }

.hm-calc__marks { height: 3rem; }
.hm-calc__marks li span { display: block; font-weight: 600; color: var(--hm-text-2); }
.hm-calc__marks li b { display: block; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--hm-text); }

.hm-calc__fits {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--hm-text);
}

.hm-calc__price {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hm-text-2);
}

.hm-calc__price strong {
  font-weight: 800;
  color: var(--hm-text);
}

.hm-calc__basis {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--hm-text-3);
}

.hm-calc__note {
  margin: 1.125rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--hm-border);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--hm-text-3);
}

.hm-calc button[hidden] { display: none; }

@media (max-width: 479px) {
  .hm-calc__input input { width: 3.5rem; }
}

/* Plan cards: a label over each feature list, the featured card lifted and washed in violet. */
.hm-plan { position: relative; }

.hm-plan__tag--muted {
  border-color: var(--hm-border-2);
  background: rgb(var(--hm-ink-rgb) / 0.05);
  color: var(--hm-text-3);
}

.hm-plan__label {
  margin: 1.5rem 0 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hm-border);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hm-text-3);
}

.hm-plan .hm-check li {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.hm-plan[data-featured="true"] {
  background: linear-gradient(180deg, var(--hm-violet-tint), var(--hm-white) 16rem);
}

.hm-plan[data-featured="true"]::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 1.5rem;
  left: 1.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--hm-grad-a), var(--hm-grad-b));
}

.hm-plan[data-featured="true"] .hm-plan__lead { color: var(--hm-violet-deep); }

.hm-plan[data-featured="true"] .hm-plan__tag {
  border-color: var(--hm-violet);
  background: var(--hm-violet);
  color: var(--hm-white);
}

@media (min-width: 1180px) {
  .hm-plan[data-featured="true"] {
    margin-block: -0.75rem;
    padding-block: 2.5rem;
  }
}

.hm-plans--four { margin-top: clamp(2.75rem, 5vw, 4rem); }

.hm-plans__foot {
  margin-top: 1.5rem;
  text-align: center;
}

/* Enterprise: a dark strip under the plan row, white button on the dark. */
.hm-enterprise {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--hm-border);
  border-radius: 1.5rem;
}

@media (min-width: 1024px) {
  .hm-enterprise {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
    align-items: center;
  }
}

.hm-enterprise__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.hm-enterprise__price {
  margin: 0.75rem 0 0;
  font-family: var(--hm-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hm-accent-ink);
}

.hm-enterprise__intro .hm-body { margin-top: 0.5rem; }

.hm-enterprise__list { align-content: center; }

.hm-btn--light {
  background: var(--hm-white);
  color: var(--hm-ink);
  box-shadow: 0 10px 28px -12px rgb(var(--hm-night-rgb) / 0.6);
}

.hm-btn--light:hover {
  background: var(--hm-violet-tint);
  transform: translateY(-1px);
}

/* "What 1,000 credits buys": the intro and three stat rows beside the credit table. */
.hm-buys {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 1024px) {
  .hm-buys {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
  }
}

.hm-buys__intro > * + * { margin-top: 2rem; }

.hm-stats--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
}

.hm-stats--stack .hm-stat {
  display: grid;
  grid-template-columns: minmax(4.75rem, auto) minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: center;
  padding: 1rem 1.25rem;
}

.hm-stats--stack .hm-stat__v {
  grid-row: 1 / span 2;
}

.hm-stats--stack .hm-stat__l {
  margin-top: 0;
  align-self: end;
}

.hm-stats--stack .hm-stat__s {
  align-self: start;
  margin-top: 0.125rem;
}

/* The comparison: heading beside the price-gap tile, then the table and its dated footnote. */
.hm-compare__head {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .hm-compare__head { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); }
}

.hm-compare__stat { grid-template-columns: minmax(0, 1fr); }

.hm-compare__foot {
  max-width: 56rem;
  margin-top: 1.25rem;
}

.hm-compare__foot strong { color: var(--hm-text-2); }

/* The comparison table scrolls inside its own box on a phone; say so there. */
.hm-table__hint {
  display: none;
  margin-top: 0.75rem;
}

@media (max-width: 639px) {
  .hm-table__hint { display: block; }
}

.hm-behave { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.hm-more--center { justify-content: center; }

/* ── FAQ: search and topic chips, topic sections, deep-linked answers ───────── */
.hm-faqtools {
  display: grid;
  gap: 1rem;
  max-width: 34rem;
  padding-top: 0.25rem;
}

.hm-faqtools[hidden] { display: none; }

.hm-faqtools .hm-search { max-width: none; }

.hm-faqtools__status {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--hm-text-3);
}

/* Six chips: two tidy rows on a 390 px phone, never one lonely chip on a third. */
@media (max-width: 479px) {
  .hm-faqtools .hm-filter { gap: 0.5rem 0.375rem; }

  .hm-faqtools .hm-filter__chip {
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 374px) {
  .hm-faqtools .hm-filter__chip {
    padding: 0 0.625rem;
    font-size: 0.8125rem;
  }
}

.hm-topic__grid {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .hm-topic__grid { grid-template-columns: minmax(14rem, 0.3fr) minmax(0, 1fr); }
}

.hm-topic__head > * + * { margin-top: 0.875rem; }

.hm-topic__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 0.875rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.hm-topic__title {
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
}

.hm-topic__count {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hm-topic .hm-faq {
  max-width: none;
  margin: 0;
}

.hm-faq details { scroll-margin-top: 6rem; }
.hm-faq details[hidden] { display: none; }

/* The answer a link such as /faq#q-how-do-i-cancel points at. */
.hm-faq details:target {
  border-color: var(--hm-accent);
  box-shadow: 0 0 0 4px rgb(var(--hm-violet-rgb) / 0.14);
}

.hm-topic[hidden] { display: none; }

.hm-faq__none {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.hm-faq__none[hidden] { display: none; }
.hm-faq__none > * + * { margin-top: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  .hm-calc__input { transition: none; }
}
/* === end S2 === */

/* === Round two — S3 === */
/* Send to Meta, Image Ads. Tokens only: no raw hex, colours come from the --hm-* tokens or the
   --hm-ill-* drawing tokens declared just below. Every animation sits under html.anim inside the
   no-preference query and is switched off again for reduced motion. */

.hm {
  /* colours the drawings need beyond the brand violet (a status dot, a refund, a backdrop) */
  --hm-ill-green: rgb(16 185 129);
  --hm-ill-green-rgb: 16 185 129;
  --hm-ill-green-ink: rgb(4 120 87);
  --hm-ill-sky-rgb: 14 165 233;
  --hm-ill-amber-rgb: 245 158 11;
  --hm-ill-pink-rgb: 236 72 153;
}

.hm-band--dark {
  --hm-ill-green-ink: rgb(110 231 183);
}

/* ── Two-column band: text beside a picture ──────────────────────────────────── */
.s3-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .s3-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(3rem, 5vw, 5rem); }
  .s3-split--wide-text { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; }
  .s3-split__visual--top { position: sticky; top: 7rem; }
}

@media (min-width: 1024px) {
  .s3-split--top { align-items: start; }
}

.s3-split__text,
.s3-split__visual { min-width: 0; }
.s3-split__text > * + * { margin-top: 2rem; }

/* ── Send to Meta: hero ──────────────────────────────────────────────────────── */
.s3-hero-top {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .s3-hero-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 3.5rem; }
}

/* Three facts beside the promise. Number or icon on the left, one bold line and one quiet line on the right. */
.s3-glance {
  display: grid;
  margin: 0;
  padding: 0.5rem 1.25rem;
  list-style: none;
  border: 1px solid var(--hm-border-2);
  border-radius: 1.5rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.s3-glance li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
}

.s3-glance li + li { border-top: 1px solid var(--hm-border); }

.s3-glance__v {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 1rem;
  background: var(--hm-accent-tint);
  font-family: var(--hm-display);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hm-accent-ink);
}

.s3-glance__v--icon { color: var(--hm-accent); }

.s3-glance__t { display: grid; gap: 0.125rem; min-width: 0; }

.s3-glance__t strong {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-text);
}

.s3-glance__t span {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--hm-text-3);
}

/* The paused diagram sits on a dotted stage so it reads as a drawing, not as page furniture. */
.s3-stage {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid var(--hm-border);
  border-radius: 1.75rem;
  background:
    radial-gradient(rgb(var(--hm-violet-rgb) / 0.18) 1px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgb(var(--hm-violet-rgb) / 0.06), rgb(var(--hm-violet-rgb) / 0.02));
}

.s3-stage .hm-node { background: var(--hm-white); }
.s3-stage .hm-diagram__caption { margin-bottom: 0; text-align: center; }

/* ── Send to Meta: the checklist and the Integrations drawing ────────────────── */
.s3-checklist { gap: 0.75rem; }

.s3-checklist li {
  align-items: center;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--hm-border);
  border-radius: 1rem;
  background: var(--hm-surface);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--hm-text);
}

.s3-checklist li > svg { margin-top: 0; }

.s3-checklist__tag {
  display: flex;
  width: fit-content;
  margin-top: 0.5rem;
}

.s3-conn { margin: 0; }

.s3-conn__stack {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 1.5rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.s3-conn__group {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-text-3);
}

.s3-conn__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.875rem;
  align-items: center;
  padding: 1rem 1.125rem;
  border: 1px solid var(--hm-border);
  border-radius: 1rem;
  background: var(--hm-alt);
}

.s3-conn__card--on {
  border-color: rgb(var(--hm-ill-green-rgb) / 0.4);
  background: rgb(var(--hm-ill-green-rgb) / 0.07);
}

.s3-conn__tile {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.875rem;
  background: var(--hm-surface);
  color: var(--hm-text-2);
}

.s3-conn__tile--on {
  border-color: rgb(var(--hm-ill-green-rgb) / 0.45);
  background: rgb(var(--hm-ill-green-rgb) / 0.14);
  color: var(--hm-ill-green-ink);
}

.s3-conn__who { min-width: 0; }

.s3-conn__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-text);
}

.s3-conn__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hm-ill-green-ink);
}

.s3-conn__status i {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--hm-ill-green);
}

.s3-conn__status--off { color: var(--hm-text-3); }
.s3-conn__status--off i { background: var(--hm-border-2); }

.s3-conn__actions { display: flex; gap: 0.5rem; }

.s3-conn__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.75rem;
  background: var(--hm-surface);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hm-text-2);
}

.s3-conn__btn--primary {
  border-color: var(--hm-violet);
  background: var(--hm-violet);
  color: var(--hm-white);
  box-shadow: 0 8px 18px -10px rgb(var(--hm-violet-rgb) / 0.8);
}

.s3-conn__between {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-left: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hm-text-3);
}

.s3-conn__between svg { color: var(--hm-accent); }

.s3-conn__caption {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--hm-text-3);
}

.s3-stack { display: grid; gap: 1.75rem; }

.s3-draftbar__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--hm-border);
  border-radius: 1rem;
  background: var(--hm-alt);
}

.s3-draftbar__sel {
  margin-right: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--hm-text);
}

.s3-draftbar__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--hm-text-3);
}

@media (max-width: 479px) {
  .s3-conn__card { grid-template-columns: auto minmax(0, 1fr); }
  .s3-conn__card > .s3-conn__btn,
  .s3-conn__card > .s3-conn__actions { grid-column: 1 / -1; }
}

/* ── Send to Meta: the real form, annotated ──────────────────────────────────── */
.s3-fill {
  display: grid;
  gap: 1.5rem;
  max-width: 62rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

.s3-fill > * { min-width: 0; }

/* The frame plus the tags that sit on it. The tags are positioned from the PICTURE's own
   proportions (a 1600x1000 screenshot), so the wrapper is a size container: 100cqw is its width and
   the picture is 0.625 of that tall, below the browser bar. They only show where the desktop crop is
   used (from 900 px); below that the picture is the phone crop and the table carries the facts. */
.s3-annotated {
  --s3-bar: 3rem;
  position: relative;
  container-type: inline-size;
}

.s3-callouts {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .s3-callouts { display: block; }
}

.s3-callout {
  position: absolute;
  /* y is a percentage of the picture's height: the picture is 0.625 as tall as the wrapper is wide */
  top: calc(var(--s3-bar) + var(--y) * 0.00625 * 100cqw);
  left: calc(var(--x) * 1%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.4375rem;
  border-radius: 999px;
  background: var(--hm-violet);
  box-shadow: 0 0 0 2px var(--hm-white), 0 10px 22px -8px rgb(var(--hm-night-rgb) / 0.55);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hm-white);
  white-space: nowrap;
  /* the dot on the left edge sits on the anchor point */
  transform: translate(-0.6875rem, -50%);
  pointer-events: none;
}

.s3-callout::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--hm-white);
}

/* anchored by its right edge (the dot is on the right) */
.s3-callout--left {
  flex-direction: row-reverse;
  padding: 0.3125rem 0.4375rem 0.3125rem 0.75rem;
  transform: translate(calc(-100% + 0.6875rem), -50%);
}

/* a small dark chip inside the right end of an input */
.s3-callout--chip {
  padding: 0.3125rem 0.625rem;
  background: var(--hm-ink);
  transform: translate(-100%, -50%);
}

.s3-callout--chip::before { display: none; }

.s3-fill__caption { margin: -0.5rem 0 0; }

/* the tags are hidden with the desktop crop, so the caption stops mentioning them */
.s3-fill__ours { display: none; }

@media (min-width: 900px) {
  .s3-fill__ours { display: inline; }
}

.s3-notes {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .s3-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Send to Meta: what happens on Meta ──────────────────────────────────────── */
/* An off switch, as Ads Manager draws a paused campaign. Static it is "off"; the one in the
   hand-over line is "on" and flips from off to on once under html.anim. */
.s3-toggle {
  position: relative;
  flex: none;
  width: 2.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: var(--hm-border-2);
}

.s3-toggle::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--hm-white);
  box-shadow: 0 1px 3px rgb(var(--hm-night-rgb) / 0.35);
}

.s3-toggle--flip { background: var(--hm-violet); }
.s3-toggle--flip::after { left: 1.1875rem; }

/* all five drawings sit in boxes of one height, so the five headings line up; a chip under the
   sentence (Image Ads) is pinned to the card's foot */
.s3-steps .hm-step { display: flex; flex-direction: column; }
.s3-steps .hm-step__visual { min-height: 7.5rem; }
.s3-steps .hm-step .hm-body { margin-bottom: 0.875rem; }
.s3-steps .hm-step__chip { align-self: flex-start; margin-top: auto; }

.s3-ill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 0;
  max-width: 100%;
}

.s3-ill--row {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.875rem;
  background: var(--hm-surface);
}

.s3-ill__label { display: grid; gap: 0.0625rem; min-width: 0; }
.s3-ill__label b { font-size: 0.9375rem; font-weight: 700; line-height: 1.2; color: var(--hm-text); }
.s3-ill__label i { font-size: 0.75rem; font-style: normal; line-height: 1.3; color: var(--hm-text-3); }

.s3-ill--upload { flex-direction: column; gap: 0.25rem; }

.s3-ill__photo {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 0.75rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.s3-ill__arrow { color: var(--hm-accent); }

.s3-ill__tray {
  padding: 0.25rem 0.75rem;
  border: 1px dashed var(--hm-border-2);
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hm-text-2);
}

.s3-ill--creative {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.5rem 0.625rem;
  width: 100%;
  max-width: 11rem;
  padding: 0.625rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.875rem;
  background: var(--hm-surface);
}

.s3-ill__thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgb(var(--hm-violet-rgb) / 0.55), rgb(var(--hm-violet-soft-rgb) / 0.55));
}

.s3-ill__lines { display: grid; align-content: center; gap: 0.3125rem; }

.s3-ill__lines b {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--hm-border-2);
}

.s3-ill__lines b:nth-child(1) { width: 85%; }
.s3-ill__lines b:nth-child(2) { width: 100%; }
.s3-ill__lines b:nth-child(3) { width: 55%; }

.s3-ill__link {
  grid-column: 1 / -1;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 0.5rem;
  background: var(--hm-accent-tint);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-accent-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.s3-handover {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  width: fit-content;
  max-width: 100%;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 999px;
  background: var(--hm-accent-tint);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--hm-text);
}

/* ── Send to Meta: cost and refunds ──────────────────────────────────────────── */
.s3-ledgers { display: grid; gap: 1.25rem; }

.s3-ledger {
  margin: 0;
  padding: 1.25rem 1.375rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 1.25rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.s3-ledger__title {
  margin: 0 0 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-text-3);
}

.s3-ledger__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.s3-ledger__rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--hm-border);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--hm-text-2);
}

.s3-ledger__rows li:first-child { border-top: 0; }

.s3-ledger__rows b {
  font-family: var(--hm-display);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.s3-ledger__out { color: var(--hm-text); }
.s3-ledger__in { color: var(--hm-ill-green-ink); }

.s3-ledger__foot {
  margin: 0.25rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--hm-border-2);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--hm-text-3);
}

/* ── Send to Meta: after you activate ────────────────────────────────────────── */
.s3-after .hm-check { margin-top: 1.5rem; }
.s3-after .hm-h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); }

/* ── Image Ads: hero extras ──────────────────────────────────────────────────── */
/* three short chips: one row where the hero copy is wide enough, a wrap where it is not */
.s3-chips { gap: 0.5rem; }
.s3-chips .hm-chip { padding-right: 0.75rem; font-size: 0.8125rem; }

/* ── Image Ads: the five brief questions, each with a small drawing ──────────── */
.s3-bv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-width: 0;
  max-width: 100%;
}

.s3-bv__tile {
  display: grid;
  justify-items: center;
  gap: 0.375rem;
}

.s3-bv__tile b {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--hm-text-2);
}

.s3-bv__shape {
  display: block;
  border: 2px solid var(--hm-accent);
  border-radius: 0.375rem;
  background: var(--hm-accent-tint);
}

.s3-bv__shape--feed { width: 3rem; height: 3rem; }
.s3-bv__shape--story { width: 1.875rem; height: 3.25rem; }

.s3-lay {
  position: relative;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.5rem;
  background: var(--hm-surface);
}

.s3-lay i,
.s3-lay b,
.s3-lay u { position: absolute; display: block; text-decoration: none; }

.s3-lay i { background: linear-gradient(135deg, rgb(var(--hm-violet-rgb) / 0.55), rgb(var(--hm-violet-soft-rgb) / 0.55)); }

.s3-lay b {
  height: 0.25rem;
  border-radius: 999px;
  background: var(--hm-border-2);
}

/* picture on top, two lines under it */
.s3-lay--top i { inset: 0 0 45% 0; }
.s3-lay--top b:nth-of-type(1) { left: 0.25rem; bottom: 0.875rem; width: 72%; }
.s3-lay--top b:nth-of-type(2) { left: 0.25rem; bottom: 0.4375rem; width: 46%; }

/* words on the left, picture on the right */
.s3-lay--split i { top: 0; right: 0; bottom: 0; width: 46%; }
.s3-lay--split b:nth-of-type(1) { left: 0.25rem; top: 0.625rem; width: 36%; }
.s3-lay--split b:nth-of-type(2) { left: 0.25rem; top: 1.0625rem; width: 26%; }

/* a full-bleed poster with a headline and a button */
.s3-lay--poster { background: linear-gradient(160deg, rgb(var(--hm-violet-rgb) / 0.7), rgb(var(--hm-violet-soft-rgb) / 0.45)); }
.s3-lay--poster b { top: 0.75rem; left: 14%; width: 72%; background: rgb(var(--hm-white-rgb) / 0.85); }
.s3-lay--poster u { bottom: 0.5rem; left: 32%; width: 36%; height: 0.375rem; border-radius: 999px; background: var(--hm-white); }

.s3-prod {
  display: grid;
  gap: 0.25rem;
  width: 5rem;
  padding: 0.375rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.75rem;
  background: var(--hm-surface);
}

.s3-prod__photo {
  display: grid;
  place-items: center;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.s3-prod b { font-size: 0.6875rem; font-weight: 700; line-height: 1.2; color: var(--hm-text); }

.s3-prod u {
  justify-self: start;
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background: rgb(var(--hm-ill-green-rgb) / 0.14);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  color: var(--hm-ill-green-ink);
}

.s3-type {
  font-family: var(--hm-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--hm-text);
}

.s3-type__lines { display: grid; gap: 0.3125rem; width: 4.25rem; }

.s3-type__lines b {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--hm-border-2);
}

.s3-type__lines b:first-child { width: 90%; }

.s3-type__lines u {
  justify-self: start;
  margin-top: 0.125rem;
  padding: 0.125rem 0.4375rem;
  border-radius: 999px;
  background: var(--hm-accent-tint);
  border: 1px solid var(--hm-accent-line);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  color: var(--hm-accent-ink);
}

.s3-bv--sizes { gap: 0.5rem; }

.s3-size {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
}

.s3-size i {
  display: block;
  height: 1.75rem;
  width: calc(1.75rem * var(--ratio-w) / var(--ratio-h));
  border: 2px solid var(--hm-accent);
  border-radius: 0.25rem;
  background: var(--hm-accent-tint);
}

.s3-size b { font-size: 0.625rem; font-weight: 700; line-height: 1.2; color: var(--hm-text-2); }

/* ── Image Ads: how a picture is put together ────────────────────────────────── */
.s3-assemble {
  --s3-art: 10rem;
  max-width: 62rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

.s3-assemble__parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
  align-items: start;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  list-style: none;
  border: 1px solid var(--hm-border-2);
  border-radius: 1.75rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.s3-op { display: none; }

@media (min-width: 900px) {
  .s3-assemble__parts {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  .s3-part { flex: 1 1 0; }

  .s3-op {
    display: block;
    flex: none;
    width: 1.5rem;
    margin-top: calc(var(--s3-art) / 2 - 1.125rem);
    font-family: var(--hm-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--hm-text-3);
  }
}

.s3-part {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  min-width: 0;
  text-align: center;
}

.s3-part__t { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--hm-text); }
.s3-part__d { max-width: 12rem; font-size: 0.875rem; line-height: 1.45; color: var(--hm-text-3); }

.s3-art {
  position: relative;
  display: block;
  width: min(100%, var(--s3-art));
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--hm-border-2);
  border-radius: 1rem;
}

.s3-art i,
.s3-art b,
.s3-art u,
.s3-art__keep { position: absolute; display: block; text-decoration: none; }

/* the empty scene: a sky, a soft sun, a floor */
.s3-art--scene,
.s3-art--ad {
  background:
    radial-gradient(circle at 78% 24%, rgb(var(--hm-white-rgb) / 0.85) 0 9%, transparent 10%),
    linear-gradient(180deg, rgb(var(--hm-violet-soft-rgb) / 0.55) 0 62%, rgb(var(--hm-ink-rgb) / 0.1) 62% 100%);
}

/* the prepared photo: a cut-out on a transparent checkerboard */
.s3-art--photo {
  background: repeating-conic-gradient(rgb(var(--hm-ink-rgb) / 0.07) 0 25%, transparent 0 50%) 50% 50% / 0.875rem 0.875rem;
}

.s3-art--photo i,
.s3-art--ad i {
  left: 32%;
  top: 30%;
  width: 36%;
  height: 52%;
  border-radius: 0.875rem 0.875rem 0.5rem 0.5rem;
  background: linear-gradient(165deg, rgb(var(--hm-ink-rgb) / 0.9), rgb(var(--hm-ink-rgb) / 0.62));
  box-shadow: inset 0 0.375rem 0 rgb(var(--hm-white-rgb) / 0.14);
}

/* in the finished ad the photo is placed by the layout: smaller, lower right, clear of the words */
.s3-art--ad i { left: 50%; top: 40%; width: 28%; height: 40%; }

.s3-art--photo i::after,
.s3-art--ad i::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 46%;
  height: 22%;
  border-radius: 0.1875rem;
  background: rgb(var(--hm-white-rgb) / 0.82);
}

/* the words: a headline, two lines and a button, as type on a plain card */
.s3-art--words { background: var(--hm-surface); }

.s3-art--words b,
.s3-art--ad b {
  left: 11%;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--hm-text);
}

.s3-art--words b:nth-of-type(1),
.s3-art--ad b:nth-of-type(1) { top: 14%; width: 64%; }
.s3-art--words b:nth-of-type(2),
.s3-art--ad b:nth-of-type(2) { top: 26%; width: 44%; height: 0.375rem; background: var(--hm-text-3); }
.s3-art--words b:nth-of-type(3) { top: 36%; width: 52%; height: 0.375rem; background: var(--hm-border-2); }

.s3-art--words u,
.s3-art--ad u {
  left: 11%;
  bottom: 14%;
  width: 34%;
  height: 0.875rem;
  border-radius: 999px;
  background: var(--hm-violet);
}

/* Meta's strips on the finished ad: hatched, as in the formats band */
.s3-art__keep {
  background: repeating-linear-gradient(135deg, rgb(var(--hm-violet-rgb) / 0.4) 0 3px, rgb(var(--hm-violet-rgb) / 0.1) 3px 7px);
}

.s3-art__keep--right { top: 0; right: 0; bottom: 0; width: 8%; }
.s3-art__keep--bottom { right: 0; bottom: 0; left: 0; height: 12%; }

.s3-art--ad u { bottom: 20%; width: 28%; }

.s3-part--result .s3-art { border-color: var(--hm-accent-line); box-shadow: 0 0 0 4px var(--hm-accent-tint); }

/* ── Image Ads: sizes and keep-out ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .s3-formats .hm-formats { --hm-frame-h: 14rem; }
}

.s3-formats { margin-top: clamp(2rem, 4vw, 3rem); }
.s3-formats__table { margin-top: clamp(2rem, 4vw, 2.75rem); }
.s3-formats__table th,
.s3-formats__table td { white-space: nowrap; }
.s3-formats__note { margin-top: 1.25rem; }
.s3-sizename { font-weight: 500; color: var(--hm-text-3); }

/* ── Image Ads: the two comparisons ──────────────────────────────────────────── */
.s3-compare { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.s3-compare .hm-card { gap: 1rem; padding: 1.75rem; }
.s3-compare__note { max-width: 46rem; margin: 1.5rem auto 0; text-align: center; }

.s3-matrix {
  display: grid;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin: 0.25rem 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--hm-border);
  border-radius: 1rem;
  background: rgb(var(--hm-ink-rgb) / 0.03);
}

.s3-matrix--backgrounds { grid-template-columns: auto repeat(4, minmax(0, auto)); justify-content: center; }
.s3-matrix--messages { grid-template-columns: auto repeat(3, minmax(0, 1fr)); }

.s3-matrix__col {
  justify-self: center;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--hm-text-3);
}

.s3-matrix__row {
  padding-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--hm-text-2);
}

.s3-cell {
  --s3-ch: 3.375rem;
  position: relative;
  display: block;
  justify-self: center;
  height: var(--s3-ch);
  width: calc(var(--s3-ch) * var(--ratio-w) / var(--ratio-h));
  overflow: hidden;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.375rem;
}

.s3-cell[data-bg="studio"] { background: linear-gradient(180deg, rgb(var(--hm-ink-rgb) / 0.05), rgb(var(--hm-ink-rgb) / 0.16)); }
.s3-cell[data-bg="soft_gradient"] { background: linear-gradient(135deg, rgb(var(--hm-violet-soft-rgb) / 0.75), rgb(var(--hm-ill-pink-rgb) / 0.38)); }
.s3-cell[data-bg="natural_setting"] { background: linear-gradient(180deg, rgb(var(--hm-ill-green-rgb) / 0.16), rgb(var(--hm-ill-green-rgb) / 0.44)); }

.s3-cell b {
  position: absolute;
  left: 11%;
  height: 8%;
  border-radius: 999px;
  background: rgb(var(--hm-ink-rgb) / 0.62);
}

.s3-cell b:nth-of-type(1) { top: 16%; width: var(--w1, 52%); }
.s3-cell b:nth-of-type(2) { top: 30%; width: var(--w2, 34%); height: 6%; background: rgb(var(--hm-ink-rgb) / 0.32); }

.s3-cell i {
  position: absolute;
  right: 13%;
  bottom: 12%;
  width: 27%;
  height: 36%;
  border-radius: 28%;
  background: rgb(var(--hm-ink-rgb) / 0.66);
}

@media (max-width: 479px) {
  .s3-matrix { padding: 0.75rem; gap: 0.5rem; }
  .s3-matrix--backgrounds { --s3-cw: 2.4rem; }
  .s3-cell { --s3-ch: 2.4rem; }
}

/* ── Image Ads: the gallery ──────────────────────────────────────────────────── */
.s3-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .s3-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
}

.s3-gal figure { margin: 0; }

.s3-gal__frame {
  overflow: hidden;
  border: 1px solid var(--hm-border-2);
  border-radius: 1rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.s3-gal__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.s3-gal:hover .s3-gal__frame { transform: translateY(-4px); }

.s3-gal figcaption {
  display: grid;
  gap: 0.125rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.s3-gal figcaption b { font-size: 0.9375rem; font-weight: 700; color: var(--hm-text); }
.s3-gal figcaption span { color: var(--hm-text-2); }
.s3-gal figcaption i { font-style: normal; color: var(--hm-text-3); }

.s3-library-stats { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

@media (max-width: 639px) {
  .s3-library-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ── Image Ads: a worked example of the price shown first ────────────────────── */
.s3-costcard {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 1.5rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.s3-costcards { display: grid; gap: 1.25rem; }
.s3-nowrap { white-space: nowrap; }

.s3-costcard__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-text-3);
}

.s3-costcard__sum { display: grid; gap: 0.25rem; margin: 0; }

.s3-costcard__sum strong {
  font-family: var(--hm-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--hm-text);
}

.s3-costcard__sum span { font-size: 0.875rem; line-height: 1.45; color: var(--hm-text-2); }

.s3-costcard__math {
  margin: 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 0.875rem;
  background: var(--hm-accent-tint);
  font-weight: 600;
  color: var(--hm-text-2);
}

.s3-costcard__math strong { font-size: 1.25rem; font-weight: 800; color: var(--hm-accent-ink); }

.s3-costcard__go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--hm-text-3);
}

.s3-costcard__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--hm-ink);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hm-white);
}

/* ── Motion (all gated) ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* The switch in the hand-over line starts off and flips on once the line reveals. */
  html.anim .s3-toggle--flip,
  html.anim .s3-toggle--flip::after {
    transition: background-color 0.5s ease 0.5s, left 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
  }

  html.anim [data-reveal]:not(.is-visible) .s3-toggle--flip { background: var(--hm-border-2); }
  html.anim [data-reveal]:not(.is-visible) .s3-toggle--flip::after { left: 0.1875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .s3-toggle--flip,
  .s3-toggle--flip::after { transition: none; }
}
/* === end S3 === */

/* === Round two — S4 === */
/* Video Ads, Canvas, Features hub.

   Page pieces are prefixed hm-vid- (Video Ads), hm-cnv- (Canvas) and hm-hub- (Features); the
   few pieces the three pages share are hm-tone-*, hm-split, hm-kv--icons and hm-crop. Tokens
   only (no raw hex): colours are --hm-* tokens or rgb(var(--hm-*-rgb) / alpha). Every animation
   sits behind html.anim inside the no-preference query and is off again under reduced motion.
   390 px: nothing here has a fixed width that can outgrow a phone; the close-ups and the
   hero stack swap to the phone screenshots, and the wide chart turns vertical. */

/* ── Shared by the three pages ───────────────────────────────────────────────── */
/* A dark band in the middle of a page shifts the odd/even tint; these two pin a band's tone. */
.hm-flow > section.hm-tone-alt { background: var(--hm-alt); }
.hm-flow > section.hm-tone-white { background: var(--hm-white); }

/* A slim band (a note and its list): the same rhythm with less air. */
.hm-flow > section.hm-band--tight { padding-block: clamp(2.75rem, 2rem + 3vw, 4.75rem); }

/* Heading beside a list: the heading sticks while the rows scroll past (from 1024 px). */
.hm-split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

@media (min-width: 1024px) {
  .hm-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    align-items: start;
  }

  .hm-split__head {
    position: sticky;
    top: 7rem;
  }
}

/* A key/value list whose terms carry a small icon. */
.hm-kv--icons > div { padding-block: 1.375rem; }

.hm-kv--icons dt {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.hm-kv--icons dt > svg {
  flex: none;
  margin-top: 0.125rem;
  color: var(--hm-accent);
}

.hm-kv--icons dd > * + * { margin-top: 0.625rem; }

/* A close-up of one region of a real screenshot (www/pages/features/_crop). The box has the
   shape of the region; the picture is positioned inside it by percentages, so it scales. */
.hm-crop {
  margin: 0;
  min-width: 0;
}

.hm-crop__box {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--crop-ratio, 16 / 10);
  border: 1px solid var(--hm-line-2);
  border-radius: 0.875rem;
  background: var(--hm-white);
  box-shadow: 0 1px 2px rgb(var(--hm-ink-rgb) / 0.06), 0 26px 50px -26px rgb(var(--hm-ink-rgb) / 0.4);
}

.hm-band--dark .hm-crop__box {
  border-color: rgb(var(--hm-white-rgb) / 0.16);
  box-shadow: 0 1px 2px rgb(var(--hm-night-rgb) / 0.5), 0 34px 64px -26px rgb(var(--hm-night-rgb) / 0.95);
}

.hm-crop__box picture {
  position: absolute;
  display: block;
  width: var(--crop-w);
  left: var(--crop-x);
  top: var(--crop-y);
}

.hm-crop__box img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.hm-crop figcaption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--hm-text-3);
}

/* Inside a card the close-up has no shadow of its own. */
.hm-crop--flat .hm-crop__box {
  border-color: var(--hm-border);
  box-shadow: none;
}

/* ── Video Ads ───────────────────────────────────────────────────────────────── */
.hm-vid-hero { position: relative; }

/* The price tag on the hero frame: a row under the frame, then (from 1024 px) pinned to its
   lower-left corner. */
.hm-vid-ticket {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin: 1rem 0 0;
  padding: 0.625rem 1.125rem 0.625rem 0.625rem;
  border: 1px solid var(--hm-line-2);
  border-radius: 999px;
  background: var(--hm-white);
  box-shadow: 0 1px 2px rgb(var(--hm-ink-rgb) / 0.06), 0 22px 40px -20px rgb(var(--hm-ink-rgb) / 0.45);
}

@media (min-width: 1024px) {
  .hm-vid-ticket {
    position: absolute;
    left: -1.5rem;
    bottom: 1.5rem;
    z-index: 2;
    margin: 0;
  }
}

.hm-vid-ticket__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--hm-violet-tint);
  color: var(--hm-violet);
}

.hm-vid-ticket__text {
  display: grid;
  gap: 0.0625rem;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--hm-ink-2);
}

.hm-vid-ticket__text strong {
  font-family: var(--hm-display);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hm-ink);
}

/* The five pipeline steps. */
.hm-vid-steps { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.hm-vid-step {
  display: flex;
  flex-direction: column;
  padding: 1.375rem;
}

.hm-vid-step .hm-h3 {
  margin-top: 1.125rem;
  font-size: 1.125rem;
}

.hm-vid-step .hm-body {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.hm-vid-step__foot {
  margin-top: auto;
  padding-top: 1rem;
}

.hm-vid-step__foot .hm-step__chip { margin-top: 0; }

.hm-vid-vis { min-height: 5.75rem; }

/* Little drawings for each step (decorative; aria-hidden in the markup). */
.hm-vid-script {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  max-width: 8rem;
}

.hm-vid-script i {
  display: block;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--hm-border-2);
}

.hm-vid-script i:nth-child(1) { width: 100%; background: var(--hm-accent-line); }
.hm-vid-script i:nth-child(2) { width: 84%; }
.hm-vid-script i:nth-child(3) { width: 58%; }

.hm-vid-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 3.25rem;
}

.hm-vid-wave i {
  display: block;
  width: 3px;
  height: calc(var(--h) * 1%);
  min-height: 3px;
  border-radius: 999px;
  background: var(--hm-accent);
  opacity: 0.85;
}

.hm-vid-stills,
.hm-vid-clips {
  position: relative;
  display: flex;
  gap: 0.4rem;
}

.hm-vid-stills i,
.hm-vid-clips i {
  display: block;
  width: 1.9rem;
  aspect-ratio: 9 / 14;
  border: 1px solid var(--hm-accent-line);
  border-radius: 0.4rem;
  background:
    radial-gradient(circle at 68% 26%, rgb(var(--hm-violet-rgb) / 0.4) 0 12%, transparent 13%),
    linear-gradient(165deg, var(--hm-accent-tint), rgb(var(--hm-violet-rgb) / 0.18));
}

.hm-vid-clips i:nth-child(2) { transform: translateY(-0.2rem); }

.hm-vid-clips b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: auto;
  border-radius: 999px;
  background: var(--hm-accent);
  color: var(--hm-white);
  box-shadow: 0 6px 14px -6px rgb(var(--hm-violet-rgb) / 0.8);
}

.hm-vid-clips b svg { margin-left: 1px; }

.hm-vid-tracks {
  display: grid;
  gap: 0.3rem;
  width: 100%;
  max-width: 8.5rem;
}

.hm-vid-tracks i {
  display: block;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--hm-accent-line);
}

.hm-vid-tracks i:nth-child(1) { width: 100%; background: rgb(var(--hm-violet-rgb) / 0.55); }
.hm-vid-tracks i:nth-child(2) { width: 88%; margin-left: 6%; background: rgb(var(--hm-violet-soft-rgb)); }
.hm-vid-tracks i:nth-child(3) { width: 100%; background: rgb(var(--hm-warn-rgb) / 0.45); }
.hm-vid-tracks i:nth-child(4) { width: 92%; margin-left: 4%; background: rgb(var(--hm-violet-rgb) / 0.3); }
.hm-vid-tracks i:nth-child(5) { width: 100%; background: rgb(var(--hm-violet-soft-rgb) / 0.8); }

.hm-vid-tracks b {
  justify-self: end;
  margin-top: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--hm-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--hm-white);
}

/* The price of one motion clip, by quality: three small cells in a row. */
.hm-vid-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-vid-prices li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  gap: 0.0625rem;
  min-height: 4.5rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--hm-border);
  border-radius: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--hm-text-3);
}

.hm-vid-prices li span { font-weight: 600; }

.hm-vid-prices li strong {
  font-family: var(--hm-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--hm-text);
}

.hm-vid-prices li em {
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hm-accent-ink);
}

.hm-vid-prices li[data-default="true"] {
  border-color: var(--hm-accent-line);
  background: var(--hm-accent-tint);
}

/* The example run: a receipt, and the one-scene redo beside it. */
.hm-vid-money {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 960px) {
  .hm-vid-money {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

.hm-vid-receipt {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--hm-border-2);
  border-radius: 1.5rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.hm-vid-receipt__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.hm-vid-receipt__head .hm-h3 { margin-top: 0.5rem; }

.hm-vid-receipt__total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.hm-vid-receipt__total strong {
  font-family: var(--hm-display);
  font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  background-image: linear-gradient(90deg, var(--hm-grad-a), var(--hm-grad-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hm-vid-receipt__total span {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--hm-text-2);
}

.hm-vid-bar {
  display: flex;
  gap: 3px;
  height: 0.875rem;
  margin: 1.5rem 0 1.25rem;
  overflow: hidden;
  border-radius: 999px;
}

.hm-vid-bar__seg {
  display: block;
  flex-basis: 0;
  min-width: 4px;
}

.hm-vid-bar__seg[data-tone="voice"],
.hm-vid-lines dt i[data-tone="voice"] { background: rgb(var(--hm-violet-soft-rgb)); }
.hm-vid-bar__seg[data-tone="stills"],
.hm-vid-lines dt i[data-tone="stills"] { background: rgb(var(--hm-violet-rgb) / 0.55); }
.hm-vid-bar__seg[data-tone="clips"],
.hm-vid-lines dt i[data-tone="clips"] { background: var(--hm-violet); }
.hm-vid-bar__seg[data-tone="assembly"],
.hm-vid-lines dt i[data-tone="assembly"] { background: var(--hm-ink); }

.hm-vid-lines {
  margin: 0;
  padding: 0;
}

.hm-vid-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--hm-border);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.hm-vid-lines dt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--hm-text-2);
}

.hm-vid-lines dt i {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.25rem;
}

.hm-vid-lines dt span { color: var(--hm-text-3); }

.hm-vid-lines dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--hm-text);
}

.hm-vid-lines > .hm-vid-lines__total { border-top: 2px solid var(--hm-border-2); }

.hm-vid-lines__total dt {
  font-weight: 800;
  color: var(--hm-text);
}

.hm-vid-lines__total dd {
  font-family: var(--hm-display);
  font-size: 1.375rem;
}

.hm-vid-receipt__foot { margin-top: 1rem; }

.hm-vid-redo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--hm-accent-line);
  border-radius: 1.5rem;
  background: var(--hm-accent-tint);
}

.hm-vid-redo__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.25rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 0.875rem;
  background: var(--hm-white);
  color: var(--hm-accent);
}

.hm-vid-redo__scenes {
  display: flex;
  gap: 0.75rem;
  margin: auto 0 0;
  padding: 1.5rem 0 0;
  list-style: none;
}

.hm-vid-redo__scenes li {
  display: grid;
  flex: 1 1 0;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.625rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.875rem;
  background: var(--hm-white);
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--hm-text-3);
  opacity: 0.7;
}

.hm-vid-redo__scenes i {
  display: block;
  aspect-ratio: 16 / 11;
  border-radius: 0.5rem;
  background:
    radial-gradient(circle at 70% 30%, rgb(var(--hm-violet-rgb) / 0.35) 0 12%, transparent 13%),
    linear-gradient(160deg, var(--hm-accent-tint), rgb(var(--hm-violet-rgb) / 0.16));
}

.hm-vid-redo__scenes span { font-weight: 700; color: var(--hm-text); }
.hm-vid-redo__scenes em { font-style: normal; }

.hm-vid-redo__scenes li[data-redone="true"] {
  border-color: var(--hm-violet);
  box-shadow: 0 0 0 1px var(--hm-violet), 0 14px 28px -16px rgb(var(--hm-violet-rgb) / 0.7);
  opacity: 1;
}

.hm-vid-redo__scenes li[data-redone="true"] em {
  font-weight: 700;
  color: var(--hm-accent-ink);
}

/* The choices list. */
.hm-vid-kv__main {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--hm-text);
}

.hm-vid-ratios {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.875rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-vid-ratios li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.hm-vid-ratio__shape {
  display: block;
  height: 3rem;
  width: calc(3rem * var(--ratio-w) / var(--ratio-h));
  border: 1.5px solid var(--hm-accent);
  border-radius: 0.375rem;
  background: var(--hm-accent-tint);
}

.hm-vid-ratio__label {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--hm-text-2);
}

.hm-vid-ratio__label strong {
  display: block;
  font-family: var(--hm-display);
  font-size: 0.9375rem;
  color: var(--hm-text);
}

.hm-vid-qualities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-vid-qualities li {
  display: grid;
  gap: 0.0625rem;
  min-width: 8.5rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--hm-text-2);
}

.hm-vid-qualities li strong {
  font-family: var(--hm-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--hm-text);
}

.hm-vid-qualities li em {
  font-size: 0.6875rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--hm-accent-ink);
}

.hm-vid-qualities li[data-default="true"] {
  border-color: var(--hm-accent-line);
  background: var(--hm-accent-tint);
}

.hm-vid-layouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-vid-layouts li {
  padding: 0.375rem 0.8125rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 999px;
  background: var(--hm-surface);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hm-text);
}

/* The Timeline band: copy beside close-ups of the real editor. */
.hm-vid-timeline__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .hm-vid-timeline__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.hm-vid-timeline__copy > * + * { margin-top: 1.25rem; }
.hm-vid-timeline__copy .hm-check { margin-top: 1.75rem; }

.hm-vid-timeline__visual { min-width: 0; }
.hm-vid-timeline__cap { margin-top: 1rem; }

/* The close-ups: the five rows across the top, the preview and the scene panel under them. */
.hm-vid-closeups { display: none; }

@media (min-width: 640px) {
  .hm-vid-closeups {
    display: grid;
    /* 470 / 300: the panel close-up is 1.567 times as tall as it is wide, and the preview close-up
       is square, so these two columns make the pair the same height at any width. */
    grid-template-columns: minmax(0, 1.567fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
  }

  .hm-vid-closeups__rows { grid-column: 1 / -1; }
}

.hm-vid-closeups > * { min-width: 0; }

/* Phones show the real phone screenshot instead. */
.hm-vid-timeline__phone { display: flex; justify-content: center; }
.hm-vid-timeline__phone .hm-phone-wrap { width: min(17.5rem, 80%); }

@media (min-width: 640px) {
  .hm-vid-timeline__phone { display: none; }
}

/* Export and send. */
.hm-vid-send {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

@media (min-width: 1024px) {
  .hm-vid-send { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.hm-vid-send__cards {
  display: grid;
  gap: 1.25rem;
}

.hm-vid-send__tag { margin: 0; }

/* A ring on the "Sent to Meta · paused" pill in the Video Ads list screenshot (s7). Measured on
   the files: the pill is centred at 39.05% / 63.16% of the desktop picture and 71.5% / 64.3% of
   the phone crop. Swap the picture and these four numbers go with it. */
.hm-vid-spotframe .hm-frame__body { position: relative; }

.hm-vid-spotframe .hm-frame__body::after {
  content: "";
  position: absolute;
  left: 39.05%;
  top: 63.16%;
  width: 9.8%;
  height: 3.4%;
  transform: translate(-50%, -50%);
  border: 2px solid var(--hm-violet);
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgb(var(--hm-violet-rgb) / 0.18);
  pointer-events: none;
}

@media (max-width: 639px) {
  .hm-vid-spotframe .hm-frame__body::after {
    left: 71.5%;
    top: 64.3%;
    width: 38%;
    height: 3.6%;
  }
}

/* ── Canvas ──────────────────────────────────────────────────────────────────── */
.hm-cnv-cards { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.hm-cnv-keep__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 1024px) {
  .hm-cnv-keep__top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.hm-cnv-keep__copy > * + * { margin-top: 1.25rem; }

.hm-cnv-keep__formats {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hm-border);
}

.hm-cnv-keep__formats .hm-formats {
  justify-content: space-between;
  margin-top: 1.5rem;
}

/* The dark closing band follows a dark band here: a hairline keeps them two bands. */
.hm-cnv-keep + .hm-cta { border-top: 1px solid var(--hm-border); }

/* ── Features hub ────────────────────────────────────────────────────────────── */
/* Three frames stacked: Image Ads in front, the Canvas and the Timeline behind it. */
.hm-hub-stack { min-width: 0; }

.hm-hub-stack__item { min-width: 0; }
.hm-hub-stack__item--back,
.hm-hub-stack__item--mid { display: none; }

.hm-hub-stack__cap {
  margin-top: 1rem;
  text-align: center;
}

@media (min-width: 640px) {
  .hm-hub-stack__stage {
    position: relative;
    aspect-ratio: 1.06 / 1;
  }

  .hm-hub-stack__item {
    position: absolute;
    display: block;
    width: 76%;
  }

  .hm-hub-stack__item--back { top: 0; right: 0; z-index: 1; }
  .hm-hub-stack__item--mid { top: 16%; left: 0; z-index: 2; }
  .hm-hub-stack__item--front { top: 39%; right: 3%; z-index: 3; }
}

/* The mid and back frames sit under the front one: a touch softer so the front leads. */
@media (min-width: 640px) {
  .hm-hub-stack__item--back .hm-frame__body,
  .hm-hub-stack__item--mid .hm-frame__body {
    box-shadow: 0 1px 2px rgb(var(--hm-ink-rgb) / 0.05), 0 18px 36px -22px rgb(var(--hm-ink-rgb) / 0.32);
  }
}

/* The four product cards. */
.hm-hub-cards { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.hm-hub-card {
  position: relative;
  gap: 1rem;
  padding: 1.125rem 1.125rem 1.5rem;
}

.hm-hub-card__thumb {
  overflow: hidden;
  border-radius: 0.875rem;
}

.hm-hub-card__thumb .hm-crop__box {
  border-radius: 0.875rem;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-hub-card:hover .hm-crop__box { transform: scale(1.03); }

.hm-hub-card__title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.hm-hub-card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.hm-hub-card__title .hm-h3 { font-size: 1.125rem; }

.hm-hub-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
}

.hm-hub-card__link:focus-visible { outline-offset: 4px; }

/* "How the pieces fit": eight steps in one line, narrow nodes with the number above the title. */
.hm-hub-fit { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.hm-hub-flow .hm-node { padding: 1rem 1.125rem 1.125rem; }

.hm-hub-flow .hm-node__title {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 1rem;
}

.hm-hub-flow .hm-node__note { margin-top: 0.375rem; font-size: 0.8125rem; }

.hm-hub-node__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

/* The one step that is yours: filled, so the eye finds it. */
.hm-hub-node--you {
  border-color: var(--hm-violet);
  background: var(--hm-violet);
  box-shadow: 0 18px 36px -18px rgb(var(--hm-violet-rgb) / 0.8);
}

.hm-hub-node--you .hm-hub-node__icon {
  background: rgb(var(--hm-white-rgb) / 0.2);
  color: var(--hm-white);
}

.hm-hub-node--you .hm-node__title,
.hm-hub-node--you .hm-node__note { color: var(--hm-white); }

.hm-hub-node--you .hm-node__title::before {
  background: rgb(var(--hm-white-rgb) / 0.2);
  border-color: rgb(var(--hm-white-rgb) / 0.4);
  color: var(--hm-white);
}

/* Tablet: four across, two rows, no links (the numbers carry the order). */
@media (min-width: 640px) and (max-width: 1099px) {
  .hm-hub-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }

  .hm-hub-flow .hm-node__link { display: none; }
}

/* Wide: one row of eight with short links. */
@media (min-width: 1100px) {
  .hm-hub-flow .hm-node__link { width: 1.5rem; }
}

/* The dark "what every workspace has" band. */
.hm-hub-ws__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 1100px) {
  .hm-hub-ws__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .hm-hub-ws__shot { position: sticky; top: 7rem; }
}

.hm-hub-ws__main > * + * { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

.hm-hub-ws__table { overflow-x: auto; }

.hm-hub-ws__table .hm-table th,
.hm-hub-ws__table .hm-table td { padding-block: 1rem; }

.hm-hub-ws__table .hm-table tbody th { min-width: 14rem; }

.hm-hub-ws__what {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.hm-hub-ws__rowicon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.625rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

/* Scores, honestly: a heading beside a note and its list. */
.hm-hub-scores {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hm-hub-scores { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.hm-hub-scores__head > * + * { margin-top: 1rem; }
.hm-hub-scores__body > * + * { margin-top: 1.25rem; }

/* ── Phones ──────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  /* The eight steps, one per row: icon at the left, number and title beside it. */
  .hm-hub-flow .hm-node {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.875rem;
    align-items: start;
    padding: 0.875rem 1rem;
  }

  .hm-hub-flow .hm-hub-node__icon { grid-row: 1 / span 2; }

  .hm-hub-flow .hm-node__title {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
  }

  .hm-hub-flow .hm-node__note { grid-column: 2; margin-top: 0.125rem; }

  /* The workspace table: let both columns breathe; the row icons go. */
  .hm-hub-ws__rowicon { display: none; }
  .hm-hub-ws__table .hm-table tbody th { min-width: 0; }
  .hm-hub-ws__table .hm-table th,
  .hm-hub-ws__table .hm-table td { padding: 0.875rem 0.875rem; }

  /* Pipeline steps: a lighter drawing and tighter cards. */
  .hm-vid-step { padding: 1.125rem; }
  .hm-vid-vis { min-height: 4.5rem; }
}

/* ── Motion: all of it gated ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* The waveform bars rise one after another when the step reveals. */
  html.anim .hm-vid-step[data-reveal]:not(.is-visible) .hm-vid-wave i { transform: scaleY(0.2); }
  html.anim .hm-vid-wave i {
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--h) * 3ms + 200ms);
  }

  /* The receipt's bar draws left to right once it reveals. */
  html.anim .hm-vid-receipt[data-reveal]:not(.is-visible) .hm-vid-bar { clip-path: inset(0 100% 0 0 round 999px); }
  html.anim .hm-vid-bar {
    clip-path: inset(0 0 0 0 round 999px);
    transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-hub-card .hm-crop__box { transition: none; }
  .hm-hub-card:hover .hm-crop__box { transform: none; }
  .hm-vid-wave i { transition: none; transform: none; }
  .hm-vid-bar { clip-path: none; transition: none; }
}
/* === end S4 === */

/* === Round two — S5 === */
/* Docs hub, guides. Tokens only, like the blocks above; every animation is gated by html.anim inside
   the no-preference query and switched off again for reduced motion. The guide pieces build on the
   shell classes in the Round two components block (.hm-guide*, .hm-toc, .hm-kv, .hm-note). */

/* ── Docs hub: the three jobs in the hero ────────────────────────────────────── */
/* The strip is the shared flowchart (hm-flowchart--numbered with dash-travel links); it only needs a
   little less height than the Send to Meta diagram, because its nodes hold one sentence. */
.s5-jobs .hm-node { padding-bottom: 1.125rem; }
.s5-jobs .hm-node__note { margin-top: 0.5rem; }

/* ── Docs hub: the guide cards, a real screenshot on top ─────────────────────── */
.s5-guides { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

.s5-guide {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.s5-guide__thumb { border-bottom: 1px solid var(--hm-border); }

.s5-guide__thumb .s5-zoom__frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.s5-guide__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.625rem;
  padding: 1.5rem 1.625rem 1.625rem;
}

.s5-guide__n { margin: 0; }
.s5-guide__body .hm-h3 { margin: 0; }
.s5-guide__body .hm-h3 a { color: inherit; text-decoration: none; }

/* the whole card is the link: the heading's link stretches over it */
.s5-guide__body .hm-h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.s5-guide__body .hm-body { font-size: 0.9375rem; }
.s5-guide__meta { margin-top: auto; padding-top: 0.5rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.45; color: var(--hm-text-3); }
.s5-guide:hover .hm-h3 a { color: var(--hm-accent-ink); }

/* ── Docs hub: by surface ────────────────────────────────────────────────────── */
.s5-surfaces { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.s5-surfaces .hm-card { position: relative; }
.s5-surfaces .hm-h3 a { color: inherit; text-decoration: none; }
.s5-surfaces .hm-h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.s5-surfaces .hm-card:hover .hm-h3 a { color: var(--hm-accent-ink); }

.s5-surfaces__wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  background: var(--hm-accent-tint);
  border-color: var(--hm-accent-line);
}

.s5-surfaces__wide .hm-h3 { font-size: 1.25rem; }

/* ── Docs hub: the reference tables (dark) ───────────────────────────────────── */
/* The closing band is dark too: the reference band gives some of its own bottom padding back, so the
   two do not leave a screen of empty dark between the last table and the closing heading. */
.hm-flow > section.s5-ref-band { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }

.s5-ref.hm-faq {
  max-width: 62rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.s5-ref__body { padding: 0 1.25rem 1.375rem; }
.s5-ref__note { margin-left: 0.5rem; font-size: 0.8125rem; font-weight: 400; color: var(--hm-text-3); }
.s5-ref__body .hm-small { margin-top: 0.875rem; }
.s5-ref .hm-table__scroll { background: transparent; }

/* ── Guides: sections and numbered steps ─────────────────────────────────────── */
.s5-h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.125rem);
  letter-spacing: -0.025em;
}

/* The shell spaces an article section's children by 1.25rem; the figures and drawings below set
   margin: 0 on themselves, and as they come later in this file they would win, so the spacing is
   restated with a more specific selector. */
.hm-guide__body .hm-guide__section > * + * { margin-top: 1.25rem; }

.s5-steps {
  display: grid;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.s5-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: clamp(0.875rem, 2vw, 1.5rem);
  padding-bottom: 2.5rem;
  scroll-margin-top: 6rem;
}

.s5-step:last-child { padding-bottom: 0; }

/* the rail from one badge down to the next */
.s5-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.375rem;
  top: 3.25rem;
  bottom: 0.5rem;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--hm-accent-line), var(--hm-border));
}

/* the number in its badge, on the rail */
.s5-step__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 0.875rem;
  background: var(--hm-accent-tint);
  font-family: var(--hm-display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  color: var(--hm-accent-ink);
}

.s5-step__main { min-width: 0; }

.s5-step__t {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding-top: 0.5rem;
}

.s5-step__chip { font-family: var(--hm-body); letter-spacing: 0; }
.s5-step__body { margin-top: 0.75rem; }
.s5-step .s5-step__body > * + * { margin-top: 1.25rem; }

@media (max-width: 479px) {
  .s5-step { grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; }
  .s5-step__n { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; font-size: 1rem; }
  .s5-step:not(:last-child)::before { left: 1.125rem; top: 2.75rem; }
}

/* the four size frames, a little smaller than on the product page so they fit one row of the article */
@media (min-width: 640px) {
  .s5-frames .hm-formats { --hm-frame-h: 10rem; }
}

/* the five things Chrishi creates: a short step each, the drawing small under its sentence */
.s5-steps--compact .s5-step { padding-bottom: 1.75rem; }
.s5-steps--compact .hm-step__visual { max-width: 20rem; margin-top: 0.875rem; }

/* ── Guides: a zoomed real screenshot, with rings ────────────────────────────── */
/* A cropped part of a 1600-px screenshot is never shown much larger than it is (a narrow crop in a wide
   column would only blur): --s5-w is the crop's width in screenshot pixels. */
.s5-zoom {
  min-width: 0;
  max-width: calc(var(--s5-w, 1600) * 1.1px);
  margin: 0;
}

.s5-zoom__frame {
  position: relative;
  aspect-ratio: var(--s5-ratio);
  /* the frame is the yardstick for the tags (cqw below); it does not clip, the crop inside it does */
  container-type: inline-size;
  border: 1px solid var(--hm-border-2);
  border-radius: 1rem;
  background: var(--hm-white);
  box-shadow: var(--hm-card-shadow);
}

/* the picture alone is cut to the frame; the rings and their tags beside it are not */
.s5-zoom__crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(1rem - 1px);
}

.s5-zoom__frame picture { display: contents; }

.s5-zoom__frame img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  height: auto;
  transform-origin: 0 0;
}

.s5-zoom__ring {
  position: absolute;
  border: 2px solid var(--hm-violet);
  border-radius: 0.5rem;
  box-shadow: 0 0 0 3px rgb(var(--hm-violet-rgb) / 0.18);
  pointer-events: none;
}

/* the tag on a ring: it names the control, so the picture reads at any size */
.s5-zoom__label {
  position: absolute;
  /* above every ring, not only its own: the ring of the next field can run behind it */
  z-index: 1;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: var(--hm-violet);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hm-white);
  white-space: nowrap;
}

.s5-zoom__label--inside { top: 0.3125rem; right: 0.375rem; }
.s5-zoom__label--left { top: 0.3125rem; left: 0.375rem; }
.s5-zoom__label--above { bottom: 100%; left: -2px; margin-bottom: 0.4375rem; }
.s5-zoom__label--below { top: 100%; left: -2px; margin-top: 0.4375rem; }

/* A tag is as wide as its words, whatever size the picture is drawn at, so on a small screen a tag
   at the right of a picture would run past the frame. Each tag is nudged back inside: --rl and --rw
   are the ring's left and width in percent of the frame (cqw is 1% of the frame), and in
   `translate` a percentage is the tag's own width. A tag is placed from the ring's padding box, which
   is 2px inside its border, so the -2px of the above and below tags lands them on the ring's left
   edge, and the inside tag's 0.375rem on its right sits 0.5rem from the ring's right edge (the same
   0.5rem from the left edge for the left tag). */
.s5-zoom__label--above,
.s5-zoom__label--below {
  translate: min(0px, calc(100cqw - var(--rl, 0) * 1cqw - 100%)) 0;
}

.s5-zoom__label--inside {
  translate: max(0px, calc(100% - (var(--rl, 0) + var(--rw, 0)) * 1cqw + 0.5rem)) 0;
}

.s5-zoom__label--left {
  translate: min(0px, calc(100cqw - var(--rl, 0) * 1cqw - 0.5rem - 100%)) 0;
}

/* on the very narrowest screens the rings of a form sit closer together than a full-size tag is tall */
@media (max-width: 359px) {
  .s5-zoom__label { padding: 0.125rem 0.375rem; font-size: 0.6875rem; }
}

.s5-zoom figcaption,
.s5-draw figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--hm-text-3);
}

.s5-pair {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 720px) {
  .s5-pair:not(.s5-pair--drawings) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* two drawings that are each as wide as the Send to Meta page's: one under the other */
.s5-pair--drawings { grid-template-columns: minmax(0, 1fr); max-width: 36rem; }
.s5-pair--drawings .s3-conn { min-width: 0; }

/* ── Guides: small drawings where there is no screenshot ─────────────────────── */
.s5-draw { margin: 0; min-width: 0; }

.s5-fakeform {
  max-width: 34rem;
  padding: 1.25rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 1.25rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.s5-fakeform__label { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--hm-text); }

.s5-fakeform__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 1rem;
  background: var(--hm-white);
}

.s5-fakeform__input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--hm-text-3);
}

.s5-fakeform__btn {
  flex: none;
  padding: 0.8125rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--hm-violet);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hm-white);
}

.s5-fakeform__fine { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--hm-text-3); }

.s5-credit {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.875rem 1.25rem 0.875rem 0.875rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 1.25rem;
  background: var(--hm-accent-tint);
}

.s5-credit__v {
  display: grid;
  place-items: center;
  min-width: 3.5rem;
  height: 3.5rem;
  padding: 0 0.5rem;
  border-radius: 1rem;
  background: var(--hm-surface);
  font-family: var(--hm-display);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--hm-accent-ink);
}

.s5-credit__t { display: grid; gap: 0.125rem; }
.s5-credit__t b { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--hm-text); }
.s5-credit__t i { font-size: 0.875rem; font-style: normal; line-height: 1.4; color: var(--hm-text-3); }

.s5-switches {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.625rem;
  max-width: 26rem;
  padding: 1.125rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 1.25rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.s5-switches__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--hm-border);
  border-radius: 0.875rem;
  background: var(--hm-alt);
}

.s5-switches__row b { font-size: 0.9375rem; font-weight: 700; color: var(--hm-text); }
.s5-switches__row i { margin-left: auto; font-size: 0.8125rem; font-style: normal; font-weight: 600; color: var(--hm-text-3); }

/* on a phone the state sits under the name, so the row never needs more room than the column has */
@media (max-width: 479px) {
  .s5-switches { padding: 0.875rem; }

  .s5-switches__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.625rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
  }

  .s5-switches__row .s3-toggle { grid-row: 1 / span 2; }
  .s5-switches__row b,
  .s5-switches__row i { grid-column: 2; margin-left: 0; }
}

.s5-switches__you {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--hm-accent-ink);
}

/* ── Guides: cost and trouble boxes, and the way on ──────────────────────────── */
/* what a guide is, at the top of its article */
.s5-glance { display: grid; gap: 1rem; }
.s5-glance .hm-stat { padding: 1rem 1.125rem 1.125rem; }
.s5-glance .hm-stat__v { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }

/* on a phone the three facts become three short rows instead of three tall tiles */
@media (max-width: 479px) {
  .s5-glance .hm-stats { gap: 0.625rem; }

  .s5-glance .hm-stat {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    column-gap: 0.875rem;
    align-items: center;
    padding: 0.75rem 1rem;
  }

  .s5-glance .hm-stat__v { grid-row: 1 / span 2; font-size: 1.5rem; }
  .s5-glance .hm-stat__l { margin-top: 0; }
}

.s5-kv { margin-top: 0.5rem; }
.s5-kv > div { padding-block: 1rem; }
.s5-kv dt { font-size: 0.9375rem; }
.s5-kv dd { font-size: 0.9375rem; }

.hm-guide__section--alt .hm-kv > div { border-color: var(--hm-violet-line); }

.s5-next {
  position: relative;
  display: grid;
  gap: 0.375rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-right: clamp(4rem, 8vw, 5.5rem);
  overflow: hidden;
  border: 1px solid var(--hm-border);
  border-radius: 1.5rem;
  background: var(--hm-night);
  color: var(--hm-text);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.s5-next::before {
  content: "";
  position: absolute;
  inset: auto -4rem -6rem auto;
  width: 22rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--hm-violet-rgb) / 0.4), transparent);
  pointer-events: none;
}

.s5-next:hover { transform: translateY(-2px); box-shadow: var(--hm-card-shadow); }

.s5-next__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hm-accent); }

.s5-next__title {
  font-family: var(--hm-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--hm-text);
}

.s5-next__text { max-width: 40rem; font-size: 1rem; line-height: 1.6; color: var(--hm-text-2); }
.s5-next__meta { margin-top: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--hm-text-3); }

.s5-next__go {
  position: absolute;
  top: 50%;
  right: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 999px;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
  transition: transform 0.2s ease;
}

.s5-next:hover .s5-next__go { transform: translateX(4px); }

/* ── Motion (all gated) ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* a ring around the control a step is about breathes once the step is on screen */
  @keyframes s5-ring {
    0%, 100% { box-shadow: 0 0 0 3px rgb(var(--hm-violet-rgb) / 0.18); }
    50% { box-shadow: 0 0 0 7px rgb(var(--hm-violet-rgb) / 0.1); }
  }

  html.anim [data-reveal].is-visible .s5-zoom__ring { animation: s5-ring 2.8s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .s5-zoom__ring { animation: none; }
  .s5-next,
  .s5-next__go { transition: none; }
  .s5-next:hover,
  .s5-next:hover .s5-next__go { transform: none; }
}
/* === end S5 === */

/* === Round two — S6 === */
/* Use cases, Product proof, Security, Support, Status, Contact, Privacy, Terms.

   Page pieces are prefixed hm-uc- (Use cases), hm-pp- (Product proof), hm-sec- (Security), hm-sup-
   (Support), hm-st- (Status), hm-ct- (Contact) and hm-lg- (Privacy and Terms, with the kit's
   .hm-legal shell). Tokens only; every animation sits behind html.anim inside the no-preference
   query and is off again under reduced motion. The one new colour family is "ok" (a green for a
   passing check), declared as tokens below. A DARK card inside a light band (Product proof's
   evidence, Security's report, Contact's form) is a div with .hm-band--dark: the same tokens flip,
   and it never touches the dark closing band. 390 px: no fixed widths that can outgrow a phone. */
.hm {
  --hm-ok-rgb: 16 185 129;
  --hm-ok-soft-rgb: 110 231 183;
  --hm-ok-ink: rgb(4 120 87);
}

/* ── Use cases ───────────────────────────────────────────────────────────────── */
.hm-uc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

/* The hero copy spaces its children with a margin-top rule that a later margin shorthand would
   undo, so each row that follows the lead states its own gap. */
.hm-hero__copy > .hm-uc-tags,
.hm-hero__copy > .hm-ct-topics { margin: 1.5rem 0 0; }
.hm-hero__copy > .hm-pp-stats { margin: 2rem 0 0; }

/* A long pinned H1 ("Built for lean e-commerce teams creating Meta ads."). A browser may break a
   line after the hyphen of "e-commerce", which reads badly, and the words may not be changed or
   wrapped (a test pins the H1 text). So the size follows the width of its own column: at 8.2% of it
   "Built for lean e-commerce" (about 11.5 em wide) always fits on one line, whatever the viewport.
   The first declaration is the fallback for a browser without container units. */
.hm-hero__copy--fit { container-type: inline-size; }

.hm-hero__title--long {
  font-size: clamp(1.75rem, 1.3rem + 2.6vw, 3rem);
  font-size: clamp(1.25rem, 8.2cqi, 3rem);
}

.hm-uc-cards { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

/* A persona card: a stage with a real phone screenshot peeking out of it, then the words. */
.hm-uc-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.hm-uc-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  height: 17rem;
  padding: 1.5rem 1rem 0;
  overflow: hidden;
  border-bottom: 1px solid var(--hm-border);
  background:
    radial-gradient(22rem 14rem at 50% 0%, rgb(var(--hm-violet-rgb) / 0.16), transparent 70%),
    var(--hm-accent-tint);
}

.hm-uc-stage .hm-phone-wrap {
  flex: none;
  width: min(11rem, 58%);
  -webkit-mask-image: linear-gradient(180deg, black 64%, transparent 100%);
  mask-image: linear-gradient(180deg, black 64%, transparent 100%);
}

.hm-uc-stage--duo .hm-phone-wrap { width: min(9rem, 44%); }
.hm-uc-stage--duo .hm-phone-wrap:nth-child(2) { margin-top: 1.75rem; }

.hm-uc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.75rem;
  padding: 1.5rem 1.625rem 1.75rem;
}

/* "A good fit, and not yet": two lists side by side, each line with its own mark. */
.hm-uc-fit .hm-table--compare td:not(:first-child) { white-space: normal; }
.hm-uc-fit .hm-table td { padding-block: 1.125rem; }
.hm-uc-fit .hm-table thead th:first-child { color: var(--hm-accent-ink); }
.hm-uc-fit .hm-table tbody td:first-child { background: rgb(var(--hm-violet-rgb) / 0.04); }

.hm-uc-fit__cell {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  line-height: 1.5;
}

.hm-uc-fit__yes,
.hm-uc-fit__no {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.0625rem;
  border-radius: 999px;
}

/* On a phone each column is ~160 px wide: the marks go and the padding tightens, so the lines
   wrap into four rows rather than seven. The table still scrolls inside its own box. */
@media (max-width: 479px) {
  .hm-uc-fit .hm-table--compare { font-size: 0.9375rem; }
  .hm-uc-fit .hm-table th,
  .hm-uc-fit .hm-table td { padding: 0.875rem 0.75rem; }
  .hm-uc-fit__yes,
  .hm-uc-fit__no { display: none; }
}

.hm-uc-fit__yes { background: var(--hm-accent-tint); color: var(--hm-accent); }
.hm-uc-fit__no { background: rgb(var(--hm-ink-rgb) / 0.06); color: var(--hm-text-3); }
.hm-uc-fit__basis { display: block; margin-top: 0.25rem; }

/* ── Product proof ───────────────────────────────────────────────────────────── */
.hm-pp-stats { padding-top: 0.75rem; }

.hm-pp-stats .hm-stat { padding: 1rem 1rem 1.125rem; }
.hm-pp-stats .hm-stat__l { font-size: 0.875rem; }

.hm-pp-cards { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.hm-pp-card__badge {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.25rem;
  border-radius: 999px;
  background: var(--hm-accent);
  color: var(--hm-white);
}

.hm-pp-card__checked {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--hm-border);
}

.hm-pp-card__label {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-accent-ink);
}

.hm-pp-evidence {
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgb(var(--hm-white-rgb) / 0.1);
  border-radius: 1.75rem;
}

.hm-pp-evidence__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .hm-pp-evidence__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.hm-pp-evidence__panel { min-width: 0; }
.hm-pp-evidence__panel > * + * { margin-top: 1rem; }
.hm-pp-evidence .hm-h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }

.hm-pp-evidence__pictures {
  display: grid;
  gap: 0.875rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--hm-border);
}

.hm-pp-studies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-pp-studies li {
  width: 4.5rem;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.625rem;
}

.hm-pp-studies img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ── Security ────────────────────────────────────────────────────────────────── */
/* Two workspaces with a gate between them; a lock on the tokens. */
.hm-sec-diagram {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--hm-line-2);
  border-radius: 1.5rem;
  background: var(--hm-white);
  box-shadow: 0 1px 2px rgb(var(--hm-ink-rgb) / 0.06), 0 30px 60px -28px rgb(var(--hm-ink-rgb) / 0.4);
}

.hm-sec-diagram__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

@media (min-width: 560px) {
  .hm-sec-diagram__row {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.5rem;
  }
}

.hm-sec-ws {
  padding: 1rem;
  border: 1.5px solid var(--hm-accent-line);
  border-radius: 1.125rem;
  background: linear-gradient(180deg, var(--hm-accent-tint), var(--hm-white));
}

.hm-sec-ws__name {
  margin: 0 0 0.75rem;
  font-family: var(--hm-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hm-ink);
}

.hm-sec-ws__items {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-sec-ws__items li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hm-border);
  border-radius: 0.625rem;
  background: var(--hm-white);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hm-ink-2);
}

.hm-sec-ws__items li > svg { flex: none; color: var(--hm-accent); }

.hm-sec-ws__tokens { border-color: var(--hm-accent-line); }

.hm-sec-ws__lock {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  border-radius: 999px;
  background: var(--hm-violet);
  color: var(--hm-white);
}

.hm-sec-ws__lock svg { color: inherit; }

/* The gate: a dashed wall with a shield on it and the plain-words label. */
.hm-sec-gate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 7.75rem;
  padding: 0.25rem 0.5rem;
  text-align: center;
}

.hm-sec-gate::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 2px dashed var(--hm-accent-line);
}

.hm-sec-gate__icon,
.hm-sec-gate__label { position: relative; z-index: 1; }

.hm-sec-gate__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--hm-violet);
  color: var(--hm-white);
  box-shadow: 0 0 0 6px var(--hm-white);
}

.hm-sec-gate__label {
  max-width: 8rem;
  margin: 0;
  padding: 0.25rem 0.375rem;
  background: var(--hm-white);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-ink);
}

@media (max-width: 559px) {
  .hm-sec-gate { min-width: 0; padding: 0.5rem 0; }

  .hm-sec-gate::before {
    top: 50%;
    right: 0;
    bottom: auto;
    left: 0;
    border-top: 2px dashed var(--hm-accent-line);
    border-left: 0;
  }

  .hm-sec-gate__label { max-width: none; }
}

.hm-sec-diagram__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--hm-ink-2);
}

.hm-sec-diagram__lock {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--hm-violet);
  color: var(--hm-white);
}

.hm-sec-group + .hm-sec-group,
.hm-head + .hm-sec-group { margin-top: clamp(2.25rem, 4vw, 3rem); }

.hm-sec-group + .hm-sec-group { margin-top: clamp(2.75rem, 5vw, 4rem); }

.hm-sec-group__head {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.hm-sec-group__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.hm-sec-group__title { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); }

.hm-sec-report {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
  border: 1px solid rgb(var(--hm-white-rgb) / 0.1);
  border-radius: 1.75rem;
}

@media (min-width: 900px) {
  .hm-sec-report {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2rem;
  }
}

.hm-sec-report__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--hm-accent-line);
  border-radius: 1rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.hm-sec-report__copy > * + * { margin-top: 0.75rem; }
.hm-sec-report .hm-h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.hm-sec-report .hm-lead { max-width: 38rem; font-size: 1rem; }

/* ── Support ─────────────────────────────────────────────────────────────────── */
/* An email mock: a vague report, and one we can act on. */
.hm-sup-mails {
  display: grid;
  gap: 1rem;
}

.hm-sup-mail {
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--hm-line-2);
  border-radius: 1rem;
  background: var(--hm-white);
  box-shadow: 0 1px 2px rgb(var(--hm-ink-rgb) / 0.05), 0 20px 36px -24px rgb(var(--hm-ink-rgb) / 0.4);
}

.hm-sup-mail--vague { background: var(--hm-alt); }

.hm-sup-mail--good {
  border-color: var(--hm-accent-line);
  box-shadow: 0 0 0 1px var(--hm-accent-line), 0 28px 48px -26px rgb(var(--hm-violet-rgb) / 0.5);
}

.hm-sup-mail__head {
  display: grid;
  gap: 0.625rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hm-border);
}

.hm-sup-mail__head .hm-tag { justify-self: start; }

.hm-sup-mail__meta {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hm-sup-mail__meta > div {
  display: flex;
  gap: 0.5rem;
}

.hm-sup-mail__meta dt {
  flex: none;
  width: 3.5rem;
  font-weight: 600;
  color: var(--hm-ink-3);
}

.hm-sup-mail__meta dd {
  min-width: 0;
  margin: 0;
  font-weight: 700;
  color: var(--hm-ink);
}

.hm-sup-mail__body {
  margin: 0.875rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hm-ink-2);
}

.hm-sup-mail__asks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.875rem 0 0;
  padding: 0;
  list-style: none;
}

.hm-sup-mail__asks li {
  padding: 0.25rem 0.625rem;
  border: 1px dashed var(--hm-line-2);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-ink-3);
}

.hm-sup-fields {
  display: grid;
  margin: 0.375rem 0 0;
}

.hm-sup-fields > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--hm-border);
  font-size: 0.875rem;
  line-height: 1.45;
}

.hm-sup-fields > div:first-child { border-top: 0; }

.hm-sup-fields dt {
  font-weight: 700;
  color: var(--hm-ink-3);
}

.hm-sup-fields dd {
  margin: 0;
  color: var(--hm-ink);
}

@media (max-width: 479px) {
  .hm-sup-fields > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.125rem;
  }
}

.hm-sup-mails__cap { text-align: center; }

.hm-sup-cards { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.hm-sup-before { display: grid; gap: 1.5rem; }

.hm-sup-checks { gap: 1.125rem; }

/* ── Status ──────────────────────────────────────────────────────────────────── */
.hm-st-panel {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--hm-border-2);
  border-radius: 1.5rem;
  background: var(--hm-surface);
  box-shadow: var(--hm-card-shadow);
}

.hm-st-panel__title {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hm-text-3);
}

.hm-st-checks {
  display: grid;
  gap: 0.875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hm-st-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem 0.875rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--hm-border);
  border-radius: 1rem;
  background: var(--hm-field);
}

.hm-st-check__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: var(--hm-accent-tint);
  color: var(--hm-accent);
}

.hm-st-check__name {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-text);
}

.hm-st-check .hm-small { margin-top: 0.125rem; }

.hm-st-check > .hm-st-pill {
  grid-column: 1 / -1;
  justify-self: start;
}

.hm-st-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 100%;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 999px;
  background: rgb(var(--hm-white-rgb) / 0.06);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-text);
}

.hm-st-dot {
  display: block;
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: currentColor;
}

.hm-st-pill[data-state="ok"] {
  border-color: rgb(var(--hm-ok-rgb) / 0.45);
  background: rgb(var(--hm-ok-rgb) / 0.14);
  color: rgb(var(--hm-ok-soft-rgb));
}

.hm-st-pill[data-state="warn"] {
  border-color: rgb(var(--hm-warn-rgb) / 0.45);
  background: rgb(var(--hm-warn-rgb) / 0.12);
  color: var(--hm-warn-soft);
}

.hm-st-pill[data-state="idle"] .hm-st-dot,
.hm-st-pill[data-state="checking"] .hm-st-dot { color: var(--hm-text-3); }

.hm-st-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.hm-st-link:hover { color: var(--hm-white); }

.hm-st-kv dd {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

.hm-st-kv dd .hm-body { font-size: 0.9375rem; }

.hm-st-state {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 999px;
  background: rgb(var(--hm-ink-rgb) / 0.05);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-text-2);
}

.hm-st-state[data-tone="ok"] {
  border-color: rgb(var(--hm-ok-rgb) / 0.4);
  background: rgb(var(--hm-ok-rgb) / 0.1);
  color: var(--hm-ok-ink);
}

.hm-st-trouble {
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 1.5rem;
}

.hm-st-trouble > svg { margin-top: 0.25rem; }
.hm-st-trouble .hm-body { margin-top: 0.5rem; }
.hm-st-trouble .hm-actions { margin-top: 1.25rem; }

/* ── Contact ─────────────────────────────────────────────────────────────────── */
.hm-ct-hero {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.hm-ct-hero .hm-lead { margin-inline: auto; }

.hm-ct-topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.hm-ct-flash { margin-bottom: 1.5rem; }

.hm-ct-grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .hm-ct-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 2rem;
  }
}

.hm-ct-help {
  gap: 0.875rem;
  padding: 1.75rem;
}

.hm-ct-help:hover { transform: none; }
.hm-ct-help__mail { align-self: flex-start; margin-top: 0.5rem; }

.hm-ct-help__sends {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hm-border);
}

.hm-ct-help__channel {
  margin: 0.375rem 0 0.125rem;
  font-family: var(--hm-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hm-text);
}

/* The sales form: a dark card (the form itself carries .hm-band--dark, so the tokens flip). */
.hm-ct-form {
  display: grid;
  gap: 1.125rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid rgb(var(--hm-white-rgb) / 0.12);
  border-radius: 1.5rem;
  background:
    radial-gradient(30rem 16rem at 100% 0%, rgb(var(--hm-violet-rgb) / 0.28), transparent 70%),
    var(--hm-night);
  box-shadow: 0 34px 64px -30px rgb(var(--hm-violet-rgb) / 0.55);
}

.hm-ct-form__head > * + * { margin-top: 0.5rem; }

.hm-ct-field { display: grid; gap: 0.5rem; }

.hm-ct-field label {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hm-text);
}

.hm-ct-field :where(input[type="text"], input[type="email"], select, textarea) {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 0.75rem;
  background: var(--hm-field);
  font: inherit;
  line-height: 1.4;
  color: var(--hm-text);
}

.hm-ct-field textarea { min-height: 7.5rem; resize: vertical; }
.hm-ct-field select option { color: var(--hm-ink); }
.hm-ct-field ::placeholder { color: var(--hm-text-3); opacity: 1; }

.hm-ct-field :where(input, select, textarea):focus-visible {
  border-color: rgb(var(--hm-violet-soft-rgb));
  outline: 2px solid rgb(var(--hm-violet-soft-rgb));
  outline-offset: 2px;
}

.hm-ct-form__submit {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.hm-ct-steps { margin-top: clamp(2.25rem, 4vw, 3rem); }
.hm-ct-timing { margin-top: 1.5rem; text-align: center; }

/* ── Privacy and Terms (the .hm-legal shell; the text is untouched) ───────────── */
/* "Effective 11 August 2026 · Service contact: ..." as a pill under the lead. */
.hm-hero__copy > .hm-lg-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 1.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--hm-border-2);
  border-radius: 999px;
  background: var(--hm-surface);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hm-text-2);
}

.hm-legal__card { padding: clamp(1.5rem, 3vw, 2.25rem); }
.hm-legal__card > * + * { margin-top: 1rem; }

.hm-legal .hm-prose { max-width: none; }
.hm-legal .hm-prose ul { list-style: disc; }
.hm-legal .hm-prose ol { list-style: decimal; }
.hm-legal .hm-prose li + li { margin-top: 0.625rem; }
.hm-legal .hm-prose strong { color: var(--hm-text); }

.hm-legal__summary { padding: 1.25rem 1.5rem; }
.hm-legal__summary p { font-size: 0.9375rem; line-height: 1.6; }
.hm-legal__summary p + p { margin-top: 0.375rem; }

/* ── Motion: all of it gated ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* The shield on Security's gate gives off a slow ring, once every few seconds. */
  @keyframes hm-sec-ring {
    0%, 70%, 100% { box-shadow: 0 0 0 6px var(--hm-white), 0 0 0 6px rgb(var(--hm-violet-rgb) / 0); }
    35% { box-shadow: 0 0 0 6px var(--hm-white), 0 0 0 14px rgb(var(--hm-violet-rgb) / 0.18); }
  }

  html.anim .hm-sec-gate__icon { animation: hm-sec-ring 4.5s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-sec-gate__icon { animation: none; }
}
/* === end S6 === */