/* ==========================================================================
   Athios — home / brand-marketer page
   Standalone stylesheet. Does not depend on adthlete-ai.webflow.css.
   ========================================================================== */

@font-face {
  font-family: Gilroy;
  src: url('../fonts/gilroy-heavy.ttf') format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy-Bold.ttf') format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy-Medium.ttf') format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Gilroy;
  src: url('../fonts/Gilroy-Regular.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens — sampled from the design export. Replace with exact Figma values.
   -------------------------------------------------------------------------- */

:root {
  --hm-orange: #f4682b;
  --hm-orange-hover: #e2571b;
  --hm-orange-soft: #fdece3;

  --hm-dark: #12151a;
  --hm-white: #ffffff;
  --hm-green: #e4eecd;
  --hm-green-pale: #fbfaea;

  --hm-teal: #58b4cd;
  --hm-leaf: #6f9e56;
  --hm-amber: #e8a765;
  --hm-blue: #4d92b8;

  --hm-ink: #14171c;
  --hm-ink-muted: #5f6670;
  --hm-on-dark: #ffffff;
  --hm-on-dark-muted: #9ba2ad;

  --hm-line: #e4e7ea;
  --hm-line-dark: rgba(255, 255, 255, 0.14);

  --hm-accent-green: #2eb44c;
  --hm-aqua: #a5f0e2;
  --hm-call-panel: #ececec;

  --hm-h1: clamp(2rem, 3.6vw, 3rem);
  --hm-h2: clamp(1.625rem, 2.6vw, 2.25rem);
  --hm-body: 0.9375rem;
  --hm-eyebrow: 0.75rem;

  --hm-gutter: 1.5rem;
  --hm-max: 1160px;
  --hm-section-y: clamp(3.5rem, 6.5vw, 6rem);
  --hm-radius: 14px;
  --hm-radius-lg: 22px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.hm-page {
  margin: 0;
  font-family: Gilroy, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--hm-body);
  color: var(--hm-ink);
  background: var(--hm-dark);
  -webkit-font-smoothing: antialiased;
}

.hm-page *,
.hm-page *::before,
.hm-page *::after { box-sizing: border-box; }

.hm-page img { max-width: 100%; }

.hm-shell {
  width: 100%;
  max-width: var(--hm-max);
  margin-inline: auto;
  padding-inline: var(--hm-gutter);
}

.hm-section { padding-block: var(--hm-section-y); }

.hm-eyebrow {
  margin: 0 0 0.875rem;
  font-size: var(--hm-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-orange);
}

.hm-h1 {
  margin: 0;
  font-size: var(--hm-h1);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.hm-h2 {
  margin: 0;
  font-size: var(--hm-h2);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.hm-lead {
  font-size: var(--hm-body);
  line-height: 1.62;
  color: var(--hm-ink-muted);
}

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

.hm-center { text-align: center; }

/* Buttons ------------------------------------------------------------------ */

.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8125rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.hm-btn--primary { background: var(--hm-orange); color: var(--hm-white); }
.hm-btn--primary:hover { background: var(--hm-orange-hover); }

.hm-btn--outline { border-color: var(--hm-orange); color: var(--hm-orange); }
.hm-btn--outline:hover { background: var(--hm-orange); color: var(--hm-white); }

.hm-btn--sm { padding: 0.625rem 1.125rem; font-size: 0.6875rem; }

/* Illustration slots — swap for real exports ------------------------------- */

.hm-slot {
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: var(--hm-radius);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--hm-on-dark-muted);
}

.hm-slot--ink {
  border-color: rgba(20, 23, 28, .2);
  color: var(--hm-ink-muted);
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.hm-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--hm-dark);
}

.hm-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 64px;
}

.hm-nav__logo img { display: block; height: 22px; width: auto; }

.hm-nav__pill {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--hm-white);
}

.hm-nav__pill a {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hm-ink);
  transition: background-color .18s ease, color .18s ease;
}

.hm-nav__pill a[aria-current="page"] { background: var(--hm-orange); color: var(--hm-white); }
.hm-nav__pill a:not([aria-current]):hover { color: var(--hm-orange); }

.hm-nav__actions { display: flex; align-items: center; gap: 1.25rem; }

.hm-nav__login {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hm-on-dark);
}

.hm-nav__login:hover { color: var(--hm-orange); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hm-hero {
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  padding-bottom: 0;
  background: var(--hm-dark);
  color: var(--hm-on-dark);
  text-align: center;
}

.hm-hero__copy { margin-inline: auto; }

/* Wide enough to break into exactly two lines on desktop. */
.hm-hero__title { max-width: 940px; margin-inline: auto; }

/* Lead runs full width so it sits on a single line on desktop. */
.hm-hero__lead {
  max-width: 100%;
  margin: 1rem auto 0;
  color: var(--hm-on-dark);
}

@media (min-width: 900px) {
  .hm-hero__lead { white-space: nowrap; }
}

.hm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Small screens: everything stacks in normal flow. Desktop overrides below. */

/* Same 860px measure as every section below, so the card and stat tiles
   share the page's left and right margins. */
.hm-hero__stage {
  position: relative;
  max-width: 860px;
  margin: 1.25rem auto 0;
  text-align: left;
}

/* Soft glow behind the mascot */
.hm-hero__stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: min(760px, 90%);
  height: 380px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(104, 168, 74, .3), rgba(104, 168, 74, 0) 70%);
  pointer-events: none;
}

.hm-hero__mascot {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 1.5rem auto 0;
}

/* Open-call card ----------------------------------------------------------- */

.hm-call {
  padding: 0.875rem;
  border-radius: 20px;
  background: var(--hm-white);
  color: var(--hm-ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
}

.hm-call__top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.125rem 0.25rem 0.625rem;
}

.hm-call__avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  object-fit: cover;
  background: var(--hm-line);
}

.hm-call__who { flex: 1; min-width: 0; }
.hm-call__name { display: block; font-size: 0.9375rem; font-weight: 900; letter-spacing: -.01em; }
.hm-call__team { display: block; font-size: 0.75rem; color: var(--hm-ink-muted); }

/* Grey inner panel */

.hm-call__panel {
  padding: 0.875rem;
  border-radius: 14px;
  background: var(--hm-call-panel);
}

.hm-call__tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.hm-call__credits {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--hm-accent-green);
}

.hm-call__title {
  margin: 0 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.hm-call__body { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #3f454e; }

/* Footer row */

.hm-call__foot {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding: 0.625rem 0.25rem 0.125rem;
}

.hm-call__meta { font-size: 0.6875rem; }

.hm-call__meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hm-ink-muted);
}

.hm-call__meta b { display: block; margin-top: 0.0625rem; font-size: 0.75rem; }

.hm-call__go { margin-left: auto; color: var(--hm-accent-green); font-size: 1.25rem; line-height: 1; }

/* Chips -------------------------------------------------------------------- */

.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hm-chip--dark { background: #1b1e24; color: var(--hm-white); }
.hm-chip--soft { background: var(--hm-line); color: var(--hm-ink); }
.hm-chip--orange { background: var(--hm-orange-soft); color: var(--hm-orange); }
.hm-chip--aqua { background: var(--hm-aqua); color: #0e2b26; text-transform: none; letter-spacing: 0; }

/* Floating stat cards ------------------------------------------------------ */

.hm-hero__stats {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.5rem;
}

.hm-stat {
  padding: 1.125rem;
  border-radius: 18px;
  background: var(--hm-white);
  color: var(--hm-ink);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

.hm-stat__head { display: flex; align-items: center; gap: 0.625rem; }

.hm-stat__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--hm-orange);
  color: var(--hm-white);
  font-size: 0.9375rem;
}

.hm-stat__label {
  font-size: 0.8125rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--hm-orange);
}

.hm-stat__value {
  margin-top: 0.75rem;
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
}

.hm-stat__delta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 900;
  text-align: center;
  color: #4cbb1f;
}

.hm-stat--interest .hm-stat__label { font-size: 1rem; }

/* Donut gauge */

.hm-gauge {
  display: grid;
  place-items: center;
  width: 124px;
  height: 124px;
  margin: 1rem auto 0.5rem;
  border-radius: 50%;
  background: conic-gradient(from 2deg, #5cbf22 0 94%, #e6e9ec 94% 100%);
}

/* Splits the difference: enough top padding to lift "94%" toward the donut's
   centre without pushing the 94%/MATCH pair visibly low. */
.hm-gauge__inner {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding-top: 0.375rem;
  border-radius: 50%;
  background: var(--hm-white);
  line-height: 1.05;
  text-align: center;
}

.hm-gauge__pct { font-size: 2.125rem; font-weight: 900; letter-spacing: -.03em; }
.hm-gauge__unit { font-size: 0.6875rem; font-weight: 900; letter-spacing: .1em; }

/* Desktop composition: mascot centred, cards floating over it ---------------- */

@media (min-width: 1000px) {
  /* Sized so the whole hero clears a ~790px viewport. The mascot is anchored
     to the bottom, so min-height also controls how high its head sits. */
  .hm-hero__stage { min-height: 392px; }

  /* Mascot sits in front of the call card, nudged right of centre. */
  .hm-hero__mascot {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    width: 540px;
    max-width: none;
    margin: 0;
    transform: translateX(calc(-50% + 52px));
  }

  /* top: 0 matches .hm-hero__stats so both columns start on the same line. */
  .hm-call {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 372px;
  }

  /* Pulled up and right so the pair clears the mascot's head and arm. */
  .hm-hero__stats {
    position: absolute;
    right: -1.5rem;
    top: -3rem;
    z-index: 3;
    display: block;
    width: 300px;
    height: 300px;
    margin: 0;
  }

  .hm-stat--offers   { position: absolute; right: 4.5rem; top: 0;    width: 172px; }
  .hm-stat--interest { position: absolute; right: 0;      top: 5rem; width: 224px; }
}

/* --------------------------------------------------------------------------
   Catalog
   -------------------------------------------------------------------------- */

.hm-catalog { background: var(--hm-white); }

.hm-catalog__head { max-width: 700px; margin-inline: auto; text-align: center; }

/* Matches the hero H1. */
.hm-catalog__head .hm-h2 { font-size: var(--hm-h1); }

/* Puts "Every tier of athlete." on its own line, whatever the viewport. */
.hm-catalog__head .hm-accent { display: block; }

.hm-catalog__lead { margin: 0.875rem auto 0; max-width: 560px; }

/* Width matches .hm-catalog__head so the rings line up with the heading's
   left edge, and the stats card sits directly against them. */
.hm-catalog__body {
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: center;
  max-width: 700px;
  margin: 2rem auto 0;
}

/* Tier rings */

.hm-tiers {
  position: relative;
  aspect-ratio: 1 / .95;
  max-width: 380px;
  margin-inline: 0;
  width: 100%;
}

.hm-tiers__ring { position: absolute; border-radius: 50%; }

.hm-tiers__ring--pro { inset: 0 0 8% 0; background: #e5f0d3; }
.hm-tiers__ring--col { inset: 14% 12% 20% 12%; background: #cfe5b0; }
.hm-tiers__ring--hs  { inset: 30% 24% 30% 24%; background: #b0d78b; }

.hm-tiers__label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0.875rem;
  font-size: 0.9375rem;
  font-weight: 900;
  white-space: nowrap;
  color: var(--hm-ink);
}

/* Nudged right so the basketball lands under the "High School" label. */
.hm-tiers__mascot {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  display: block;
  width: 44%;
  height: auto;
  transform: translateX(calc(-50% + 46px));
}

/* Figures card */

.hm-figures {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-left: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-radius: 18px;
  background: var(--hm-white);
  box-shadow: 0 18px 44px rgba(20, 23, 28, .1);
}

.hm-figure__value {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--hm-orange);
}

.hm-figure__label { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--hm-ink-muted); }

/* --------------------------------------------------------------------------
   Marketplace
   -------------------------------------------------------------------------- */

.hm-market { background: linear-gradient(180deg, var(--hm-green) 0%, var(--hm-green-pale) 100%); }

.hm-market__head { max-width: none; text-align: center; }

/* Matches the other section headings, sized to hold one line. */
.hm-market__head .hm-h2 {
  font-size: clamp(1.625rem, 3.15vw, 2.625rem);
  white-space: nowrap;
}

.hm-market__lead { margin: 0.875rem auto 0; max-width: 700px; }

.hm-panel {
  position: relative;
  max-width: 860px;
  margin: 2.5rem auto 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--hm-radius-lg);
  background: var(--hm-white);
  box-shadow: 0 20px 50px rgba(20, 23, 28, .08);
}

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

.hm-panel__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--hm-orange);
  color: var(--hm-white);
}

.hm-panel__icon svg { width: 26px; height: 26px; }

.hm-panel__title { margin: 0; font-size: 1.125rem; font-weight: 900; color: var(--hm-orange); }
.hm-panel__sub { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--hm-ink-muted); }

.hm-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}

.hm-tile {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--hm-line);
  border-radius: 14px;
}

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

.hm-tile__label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hm-orange);
}

/* Auto margins centre the value (and its note) in the space under the label. */
.hm-tile__body { margin-block: auto; }

.hm-tile__value { font-size: 2.25rem; font-weight: 900; line-height: 1; }
.hm-tile__note { margin: 0.5rem 0 0; font-size: 0.6875rem; color: var(--hm-ink-muted); }

/* Sits over the lower-right of the "Airs this week" tile. */
.hm-panel__mascot {
  position: absolute;
  right: 0.5rem;
  bottom: -1.25rem;
  z-index: 2;
  display: block;
  width: 260px;
  height: auto;
}

/* Numbered steps */

/* Same measure as .hm-panel so the columns line up with the card edges. */
.hm-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: 860px;
  margin: 3.5rem auto 0;
}

.hm-step__num {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--hm-orange);
}

.hm-step__rule { margin: 0.375rem 0 0.75rem; border: 0; border-top: 1px solid rgba(20, 23, 28, .18); }

.hm-step__title { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 900; letter-spacing: -.01em; }
.hm-step__body { margin: 0; font-size: 0.75rem; line-height: 1.6; color: var(--hm-ink-muted); }

.hm-market__cta { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   Platform / bento
   -------------------------------------------------------------------------- */

.hm-platform { background: var(--hm-white); }

/* Same 860px measure as the marketplace panel and steps above. */
.hm-bento__top {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 1rem;
  align-items: stretch;
  max-width: 860px;
  margin-inline: auto;
}

.hm-bento__bottom {
  display: grid;
  grid-template-columns: .8fr 1fr 1.15fr;
  gap: 1rem;
  max-width: 860px;
  margin: 1rem auto 0;
}

.hm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--hm-radius-lg);
  overflow: hidden;
  color: var(--hm-on-dark);
}

/* Photo already carries the blue tint, so it sits straight on the card. */
.hm-card--teal {
  min-height: 340px;
  overflow: visible;
  background: var(--hm-teal) url('../images/platform-matching.png') center / cover no-repeat;
}

/* Fire sticker straddles the card's left edge — half in, half out. */
.hm-card__sticker {
  position: absolute;
  left: -42px;
  top: 22px;
  z-index: 3;
  display: block;
  width: 84px;
  height: auto;
}
.hm-card--leaf {
  min-height: 200px;
  background: var(--hm-leaf) url('../images/platform-assistant.png') center / cover no-repeat;
}
.hm-card--amber {
  min-height: 270px;
  background: var(--hm-amber) url('../images/platform-compliance.png') center / cover no-repeat;
}
.hm-card--blue {
  min-height: 150px;
  overflow: visible;
  background: var(--hm-blue) url('../images/platform-roi.png') center / cover no-repeat;
}

/* Pointing hand on the card's right edge, tipped anti-clockwise. */
.hm-card__sticker--hand {
  left: auto;
  right: -46px;
  top: 50%;
  width: 92px;
  transform: translateY(-50%) rotate(-8deg);
}

.hm-card__title { margin: 0 0 0.375rem; font-size: 1.125rem; font-weight: 900; letter-spacing: -.01em; }
.hm-card__body {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* Starts a new line so each sentence sits on its own row. */
.hm-card__body .hm-line { display: block; }

.hm-card__stat { font-size: 2.25rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.hm-card__statlabel { margin: 0.25rem 0 0; font-size: 0.6875rem; font-weight: 700; }

/* Bars in the teal card */

.hm-bars { margin-top: auto; display: flex; flex-direction: column; gap: 0.875rem; }
.hm-bar__row { display: flex; align-items: baseline; gap: 0.625rem; }

.hm-bar__pct {
  font-size: 1.375rem;
  font-weight: 900;
  letter-spacing: -.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

.hm-bar__name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

.hm-bar__track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .4); }
.hm-bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--hm-white); }

/* Heading block inside the bento */

.hm-bento__head { align-self: center; padding-bottom: 0.5rem; }

/* Smaller than the section headings — it shares a column with the cards. */
.hm-bento__head .hm-h2 { font-size: clamp(1.375rem, 2.1vw, 1.875rem); }

.hm-bento__lead { margin: 0.75rem 0 0; max-width: 380px; }

/* Notification chip */

/* Sits in the card's top-right so it clears the title below. */
.hm-nudge {
  position: absolute;
  right: 1rem;
  top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: min(268px, calc(100% - 2rem));
  padding: 0.75rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #edf2e3 100%);
  color: var(--hm-ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

.hm-nudge__icon {
  flex: 0 0 auto;
  display: block;
  width: 32px;
  height: 32px;
}

.hm-nudge__text {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.42;
  color: var(--hm-ink-muted);
}

.hm-nudge__text b { font-weight: 900; color: #000; }

/* Plain text cells */

.hm-note { padding-top: 0.25rem; }
.hm-note__title { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 900; letter-spacing: -.01em; }
.hm-note__body { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--hm-ink-muted); }

.hm-stack { display: flex; flex-direction: column; gap: 0.75rem; }

/* --------------------------------------------------------------------------
   Proof
   -------------------------------------------------------------------------- */

.hm-proof { background: linear-gradient(180deg, var(--hm-green) 0%, var(--hm-green-pale) 100%); }

.hm-proof__head { text-align: center; }

/* Same 860px measure as the marketplace panel and bento grid above. */
.hm-proof__body {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 860px;
  margin: 2rem auto 0;
}

.hm-collab {
  position: relative;
  margin-bottom: 38px;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.75rem) 2rem;
  border-radius: 20px;
  background: var(--hm-white);
  box-shadow: 0 18px 44px rgba(20, 23, 28, .08);
}

.hm-collab__head { display: flex; align-items: center; gap: 0.625rem; }

.hm-collab__icon { display: block; width: 30px; height: 30px; }

.hm-collab__title { margin: 0; font-size: 1.25rem; font-weight: 900; color: var(--hm-orange); }

.hm-collab__meter { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1.25rem; }
.hm-collab__pct { font-size: 2.25rem; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.hm-collab__word { margin-left: auto; font-size: 0.6875rem; color: var(--hm-ink-muted); }

.hm-collab__track { height: 6px; margin-top: 0.625rem; border-radius: 999px; background: #eceff1; }
.hm-collab__fill { display: block; height: 100%; border-radius: 999px; background: #f2685a; }

.hm-collab__list { margin: 1.25rem 0 0; padding: 0; list-style: none; }

/* No dividers — the design separates rows with spacing alone. */
.hm-collab__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.hm-collab__dot {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 1.5px solid #d8dce0;
  border-radius: 50%;
  font-size: 0.625rem;
  color: transparent;
}

.hm-collab__list li.is-done .hm-collab__dot {
  border-color: #2ebd4e;
  background: #2ebd4e;
  color: var(--hm-white);
}

.hm-collab__task { display: block; font-size: 0.875rem; font-weight: 700; }
.hm-collab__due { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--hm-ink-muted); }
.hm-collab__due.is-warn { color: var(--hm-orange); }

/* Breaks the card's bottom edge, offset right to clear the checklist. */
.hm-collab__mascot {
  position: absolute;
  left: 50%;
  bottom: -38px;
  z-index: 2;
  display: block;
  width: 136px;
  height: auto;
  transform: translateX(calc(-50% + 78px));
}

/* Point list */

.hm-points { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }

.hm-point { display: grid; grid-template-columns: 22px 1fr; gap: 0.625rem; }
.hm-point__mark { color: var(--hm-orange); font-size: 1.125rem; line-height: 1.35; }
.hm-point__title { margin: 0 0 0.4375rem; font-size: 1.25rem; font-weight: 900; letter-spacing: -.01em; }
.hm-point__body { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--hm-ink-muted); }

/* --------------------------------------------------------------------------
   Closing CTA + footer
   -------------------------------------------------------------------------- */

.hm-cta { background: var(--hm-dark); color: var(--hm-on-dark); text-align: center; }
.hm-cta__title { max-width: 620px; margin-inline: auto; }
.hm-cta__lead { margin: 0.875rem auto 1.75rem; max-width: 520px; color: var(--hm-on-dark-muted); }

.hm-footer { padding-block: 2rem; background: var(--hm-dark); color: var(--hm-on-dark-muted); }

.hm-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.hm-footer__logo img { display: block; height: 34px; width: auto; }
.hm-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.hm-footer__links a {
  font-size: 0.6875rem;
  text-decoration: none;
  color: var(--hm-on-dark-muted);
}

.hm-footer__links a:hover { color: var(--hm-on-dark); }
.hm-footer__legal { margin: 0; font-size: 0.6875rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .hm-bento__top,
  .hm-bento__bottom { grid-template-columns: 1fr; }
  .hm-nudge { position: static; width: auto; margin-bottom: 0.875rem; }
}

@media (max-width: 900px) {
  .hm-hero__stage,
  .hm-catalog__body,
  .hm-tiles,
  .hm-steps,
  .hm-proof__body { grid-template-columns: 1fr; }

  .hm-hero__stage { gap: 1.5rem; }
  .hm-catalog__body { gap: 2rem; }
  .hm-catalog__body,
  .hm-proof__body { max-width: none; }
  .hm-tiers { margin-inline: auto; }
  .hm-figures { margin-left: 0; }
  .hm-stat--interest { align-self: flex-start; }
  .hm-panel__mascot { display: none; }
}

@media (max-width: 760px) {
  .hm-nav__pill,
  .hm-nav__login { display: none; }
}

/* --------------------------------------------------------------------------
   Stub page — a nav slot whose section has not been designed yet
   -------------------------------------------------------------------------- */

.hm-stub {
  display: grid;
  place-items: center;
  min-height: 62vh;
  background: var(--hm-dark);
  color: var(--hm-on-dark);
  text-align: center;
}

.hm-stub__title { max-width: 720px; margin-inline: auto; }

.hm-stub__lead {
  max-width: 560px;
  margin: 1.125rem auto 0;
  color: var(--hm-on-dark-muted);
}

.hm-stub__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}