/**
 * ACE Homepage 2.0
 *
 * One system, scoped to .hm so it cannot reach any other page. Colours come
 * from the theme's tokens, which ace-palette turns teal at runtime; nothing
 * here hard-codes the brand colour except as a fallback.
 *
 * Three rules this project has paid for, applied throughout:
 *   - anything given a display value also gets an explicit [hidden] rule,
 *     because display beats [hidden];
 *   - text in the brand colour uses the lighter teal (5.6:1 on the dark
 *     cards), and white text sits on the deepened teal (5.4:1), never on
 *     the raw one (4.2:1);
 *   - nothing is left invisible if a script fails: hidden-until-revealed
 *     only applies under .hm-js, and .hm-show (a failsafe set from <head>)
 *     undoes it.
 *
 * Previews size themselves with container queries, so each one adapts to
 * the width it is actually given -- a card in the bento, the hero, a phone.
 */

/* ============================================================ tokens */

.hm {
  --hm-bg: var(--color-bg, #262624);
  --hm-deep: #1a1918;
  --hm-screen: #1f1f1d;
  --hm-card: var(--color-bg-alt, #30302e);
  --hm-raised: #3a3a37;
  --hm-line: rgba(255, 255, 255, .08);
  --hm-line2: rgba(255, 255, 255, .14);
  --hm-text: var(--color-text, #e8e6dc);
  --hm-head: var(--color-heading, #f5f4ef);
  --hm-muted: var(--color-text-muted, #a39e93);
  --hm-teal: var(--color-primary, #008a81);
  --hm-rgb: var(--ace-primary-rgb, 0, 138, 129);
  --hm-teal-text: #61b6b1;                     /* the two mixes below, precomputed for browsers */
  --hm-teal-fill: #007870;                     /* without color-mix() (iOS 15 and older)         */
  --hm-weak: #e09a9a;
  --hm-mid: #e0a24a;
  --hm-ok: #8dc49a;
  --hm-amber: #e8b04f;
  --hm-pink: #f07c8c;
  --hm-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hm-head-font: var(--font-heading, Poppins, system-ui, sans-serif);
  --hm-body-font: var(--font-body, Inter, system-ui, sans-serif);

  color: var(--hm-text);
  font-family: var(--hm-body-font);
  overflow-x: hidden;                          /* older Safari, which has no clip */
  overflow-x: clip;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .hm {
    --hm-teal-text: color-mix(in srgb, var(--hm-teal) 62%, #fff);   /* 5.6:1 on the cards, whatever teal the palette sets */
    --hm-teal-fill: color-mix(in srgb, var(--hm-teal) 87%, #000);   /* white on it: 5.4:1 */
  }
}

.ace-home-on .site-footer { display: none; }       /* this page carries its own */

.hm *, .hm *::before, .hm *::after { box-sizing: border-box; }
.hm h1, .hm h2, .hm h3 { margin: 0; }         /* beats the theme's h1-h4 margins */
:where(.hm) p { margin: 0; }                  /* no weight: any class setting a margin wins */
.hm a { color: inherit; }
.hm-i { display: inline-block; flex: none; vertical-align: middle; }
.hm-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hm-wrap { max-width: var(--max-width, 1180px); margin: 0 auto; padding: 0 24px; }
.hm section[id], .hm [id^="hm-"] { scroll-margin-top: 96px; }

.hm-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hm-teal-text);
}
.hm h2 {
  margin-top: 10px;
  font: 700 clamp(1.45rem, 2.3vw, 1.95rem)/1.18 var(--hm-head-font);
  letter-spacing: -.022em;
  color: var(--hm-head);
  text-wrap: balance;
}
.hm-body { margin-top: 12px; font-size: .95rem; line-height: 1.65; color: var(--hm-muted); max-width: 54ch; }
.hm-head { max-width: 760px; margin-bottom: 22px; }

/* ============================================================ buttons */

.hm-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px;
  font: 600 .92rem var(--hm-body-font); text-decoration: none; line-height: 1.2;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.hm-btn:hover { transform: translateY(-1px); }
.hm-btn:focus-visible, .hm-module:focus-visible, .hm-link:focus-visible, .hm-tab:focus-visible,
.hm-motion:focus-visible, .hm-foot a:focus-visible, .hm-tabpanel:focus-visible {
  outline: 2px solid var(--hm-teal-text); outline-offset: 2px;
}
.hm-btn.is-primary {
  background: var(--hm-teal-fill); color: #fff;
  box-shadow: 0 10px 28px rgba(var(--hm-rgb), .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hm-btn.is-primary:hover { box-shadow: 0 14px 34px rgba(var(--hm-rgb), .42), inset 0 1px 0 rgba(255, 255, 255, .2); }
.hm-btn.is-ghost { background: rgba(255, 255, 255, .04); border: 1px solid var(--hm-line2); color: var(--hm-head); }
.hm-btn.is-ghost:hover { border-color: rgba(var(--hm-rgb), .6); background: rgba(var(--hm-rgb), .08); }
.hm-btn .hm-i { transition: transform .15s ease; }
.hm-btn.is-primary:hover .hm-i { transform: translateX(2px); }

.hm-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-size: .86rem; font-weight: 600; color: var(--hm-teal-text); text-decoration: none;
}
.hm-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.hm-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.hm-facts li { display: flex; gap: 9px; font-size: .86rem; line-height: 1.45; color: var(--hm-text); }
.hm-facts li .hm-i { margin-top: 2px; color: var(--hm-teal-text); }
.hm-facts.is-tight { gap: 6px; }
.hm-facts.is-tight li { font-size: .82rem; }

/* ============================================================ A. hero */

.hm-hero { position: relative; padding: 24px 0 28px; isolation: isolate; }
.hm-hero::before {
  content: ""; position: absolute; inset: -84px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 320px at 76% 34%, rgba(var(--hm-rgb), .2), transparent 70%),
    radial-gradient(420px 260px at 6% 88%, rgba(var(--hm-rgb), .08), transparent 70%);
}
.hm-hero::after {
  content: ""; position: absolute; inset: -84px 0 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 40%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 70% at 72% 40%, #000 20%, transparent 72%);
}
/* The picture is the bigger half: six parts in ten, and on a wide screen it
   reaches past the column into the margin (never past the viewport --
   .hm clips, and the reach is capped). The words stay short. */
.hm-hero-grid { display: grid; grid-template-columns: minmax(0, 39fr) minmax(0, 61fr); gap: 32px; align-items: center; }
.hm-hero h1 {
  margin-top: 12px;
  font: 800 clamp(2rem, 3vw, 2.4rem)/1.08 var(--hm-head-font);
  letter-spacing: -.03em; color: var(--hm-head); text-wrap: balance;
}
.hm-lede { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: var(--hm-muted); max-width: 46ch; }
.hm-cta-note { margin-top: 10px; font-size: .78rem; color: var(--hm-muted); }

.hm-hero-visual { position: relative; min-width: 0; margin-right: calc(-1 * clamp(0px, (100vw - 1180px) / 2, 120px)); }
.hm-stage { position: relative; padding: 22px 24px 30px 40px; }
@media (min-width: 1240px) {
  .hm-win--hero { zoom: 1.08; }                 /* the same screen, larger: easier to read than a thumbnail */
}
.hm-stage-glow {
  position: absolute; inset: 12% 8% 6% 14%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--hm-rgb), .34), transparent);
  filter: blur(26px);
}

/* the window */
.hm-win {
  position: relative; z-index: 1; container-type: inline-size;
  background: var(--hm-screen); border: 1px solid var(--hm-line2); border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .3);
}
.hm-win-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #161615; border-bottom: 1px solid var(--hm-line); }
.hm-dots { display: inline-flex; gap: 5px; }
.hm-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.hm-url {
  flex: 1; max-width: 340px; min-width: 0; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .05);
  font-size: .62rem; color: var(--hm-muted); white-space: nowrap;
}
.hm-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* the app inside it */
.hm-app { font-size: 11px; color: var(--hm-text); background: var(--hm-bg); }
.hm-app-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--hm-deep); border-bottom: 1px solid var(--hm-line); }
.hm-av {
  width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: .5rem; font-weight: 700; letter-spacing: .02em; background: #4a4a46; color: #fff;
}
.hm-av.is-b { background: #7a5f8f; }
.hm-av.is-c { background: #5f7f6a; width: 26px; height: 26px; font-size: .56rem; }
.hm-app-name { font-size: .72rem; color: var(--hm-head); white-space: nowrap; }
.hm-pill { font-size: .52rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(var(--hm-rgb), .18); color: var(--hm-teal-text); }
.hm-app-cont { margin-left: auto; display: flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid var(--hm-line); font-size: .64rem; color: var(--hm-head); white-space: nowrap; }
.hm-app-cont em { font-style: normal; font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hm-teal-text); }
.hm-app-bell { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--hm-line2); display: grid; place-items: center; color: var(--hm-text); }
.hm-app-bell i { position: absolute; top: -4px; right: -4px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 999px; background: #d9534f; color: #fff; font-size: .48rem; font-style: normal; font-weight: 700; display: grid; place-items: center; }
.hm-app-body { display: grid; grid-template-columns: 118px minmax(0, 1fr); }
.hm-app-side { padding: 8px 6px; background: var(--hm-card); border-right: 1px solid var(--hm-line); display: grid; align-content: start; gap: 1px; }
.hm-app-side span { display: flex; align-items: center; gap: 6px; padding: 4px 7px; border-radius: 5px; font-size: .6rem; color: var(--hm-text); white-space: nowrap; }
.hm-app-side .hm-i { color: var(--hm-muted); }
.hm-app-main { padding: 12px 14px 14px; min-width: 0; }
.hm-app-title { display: flex; align-items: center; gap: 10px; }
.hm-app-title b { font: 700 .95rem var(--hm-head-font); color: var(--hm-head); }
.hm-app-streak { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: .6rem; font-weight: 600; color: var(--hm-amber); white-space: nowrap; }

.hm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.hm-tiles > div { padding: 8px 9px; border-radius: 8px; background: var(--hm-card); border: 1px solid var(--hm-line); min-width: 0; }
.hm-tiles span { display: block; font-size: .54rem; color: var(--hm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-tiles b { display: block; margin-top: 2px; font: 700 1rem var(--hm-head-font); color: var(--hm-head); font-variant-numeric: tabular-nums; }
.hm-meter { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.hm-meter > i { display: block; height: 100%; width: var(--w, 50%); border-radius: 4px; background: var(--hm-teal); }

.hm-app-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hm-panel { padding: 9px 10px; border-radius: 8px; background: var(--hm-card); border: 1px solid var(--hm-line); min-width: 0; }
.hm-panel-t, .hm-cap {
  display: block; margin-bottom: 7px;
  font-size: .54rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hm-muted);
}
.hm-cap em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; margin-left: 4px; }

/* the trend line, as the dashboard draws it */
.hm-trend { display: block; width: 100%; height: auto; overflow: visible; }
.hm-trend-grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.hm-trend-line {
  fill: none; stroke: var(--hm-teal-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: hm-draw 1.6s .4s cubic-bezier(.3, .6, .3, 1) both;
}
.hm-trend-dot { fill: var(--hm-teal-text); stroke: var(--hm-card); stroke-width: 1.5; }

/* readiness rails, shared by the hero, the section and the phone */
.hm-rails { display: grid; gap: 8px; }
.hm-rail-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 50px; gap: 9px; align-items: center; }
.hm-rails.is-compact { gap: 6px; }
.hm-rails.is-compact .hm-rail-row { grid-template-columns: 38px minmax(0, 1fr) 26px; gap: 6px; }
.hm-rail-l b { display: block; font-size: .62rem; letter-spacing: .06em; color: var(--hm-head); }
.hm-rail-l em { display: block; font-style: normal; font-size: .54rem; font-weight: 600; }
.hm-rails.is-compact .hm-rail-l em { display: none; }
.hm-rail { height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.hm-rails.is-compact .hm-rail { height: 8px; }
.hm-rail > i {
  display: block; height: 100%; width: var(--w); border-radius: 4px; transform-origin: left;
  animation: hm-grow 1s .3s cubic-bezier(.2, .7, .2, 1) both;
}
.hm-rail > i.is-weak, .hm-rail-l em.is-weak, .is-weak { --tone: var(--hm-weak); }
.hm-rail > i.is-mid, .hm-rail-l em.is-mid, .is-mid { --tone: var(--hm-mid); }
.hm-rail > i.is-ok, .hm-rail-l em.is-ok, .is-ok { --tone: var(--hm-ok); }
.hm-rail > i { background: var(--tone, var(--hm-teal)); }
.hm-rail-l em { color: var(--tone); }
.hm-rail-v { text-align: right; line-height: 1.15; }
.hm-rail-v b { font-size: .68rem; color: var(--hm-head); font-variant-numeric: tabular-nums; }
.hm-rail-v em { display: block; font-style: normal; font-size: .5rem; color: var(--hm-muted); }

/* floating pieces around the hero window */
.hm-float {
  position: absolute; z-index: 2;
  background: rgba(42, 42, 40, .94); border: 1px solid var(--hm-line2); border-radius: 11px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .7rem; color: var(--hm-text);
  animation: hm-in .6s var(--in, .2s) cubic-bezier(.2, .7, .2, 1) both, hm-bob 7s var(--bob, 1s) ease-in-out infinite;
}
.hm-float-k { display: inline-flex; align-items: center; gap: 5px; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hm-teal-text); }
.hm-float--tonight { left: 0; top: 50%; width: 168px; padding: 11px 13px; display: grid; gap: 3px; --in: .5s; --bob: 1.2s; }
@media (min-width: 1240px) {
  .hm-float--tonight { width: 176px; }
}
.hm-float--tonight b { font: 800 1rem var(--hm-head-font); color: var(--hm-head); }
.hm-float--tonight > span:not(.hm-float-k) { color: var(--hm-muted); line-height: 1.4; }
.hm-float--tonight .hm-mini-btn { justify-self: start; margin-top: 5px; }
.hm-float--toast { right: 0; top: 0; width: 236px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; line-height: 1.35; --in: 1.5s; --bob: 2.4s; }
.hm-float--toast em { display: block; font-style: normal; font-size: .58rem; color: var(--hm-muted); }
.hm-float--toast b { color: var(--hm-head); }
.hm-float--clock { right: 12%; bottom: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; --in: .9s; --bob: 3.1s; }
.hm-float--clock > .hm-i { color: var(--hm-teal-text); }
.hm-float--clock em { display: block; font-style: normal; font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-muted); }
.hm-float--clock b { font: 600 .98rem var(--hm-mono); color: var(--hm-head); font-variant-numeric: tabular-nums; }
.hm-emoji { font-size: 1.05em; line-height: 1; }

.hm-mini-btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: .6rem; font-weight: 700; white-space: nowrap;
  background: rgba(255, 255, 255, .07); color: var(--hm-head); border: 1px solid var(--hm-line2);
}
.hm-mini-btn.is-solid { background: var(--hm-teal-fill); border-color: transparent; color: #fff; }

/* the motion switch */
/* A switch that needs the script, so shown only with it. */
.hm-motion {
  position: absolute; left: 40px; bottom: 4px; z-index: 3;
  display: none; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--hm-line2); background: rgba(26, 25, 24, .85); color: var(--hm-muted);
  font: 600 .68rem var(--hm-body-font); cursor: pointer;
}
.hm-js .hm-motion { display: inline-flex; }
.hm-motion:hover { color: var(--hm-head); border-color: rgba(var(--hm-rgb), .6); }
.hm-motion span { display: inline-flex; align-items: center; gap: 6px; }
.hm-motion .hm-motion-play, .hm-paused .hm-motion .hm-motion-pause { display: none; }
.hm-paused .hm-motion .hm-motion-play { display: inline-flex; }

/* ============================================================ B. overview */

.hm-overview { padding: 6px 0 44px; }
.hm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hm-stat {
  padding: 14px 16px; border-radius: 12px; min-width: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .012));
  border: 1px solid var(--hm-line);
}
.hm-stat b { display: block; font: 800 1.6rem/1.1 var(--hm-head-font); letter-spacing: -.02em; color: var(--hm-head); font-variant-numeric: tabular-nums; }
.hm-stat span { display: block; margin-top: 4px; font-size: .78rem; line-height: 1.4; color: var(--hm-muted); }
.hm-stat.is-weights { grid-column: span 2; }
.hm-stat.is-weights b { color: var(--hm-teal-text); }
.hm-modules { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.hm-module {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--hm-line);
  font-size: .78rem; color: var(--hm-text); text-decoration: none; white-space: nowrap;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.hm-module .hm-i { color: var(--hm-teal-text); }
.hm-module:hover { border-color: rgba(var(--hm-rgb), .55); background: rgba(var(--hm-rgb), .09); color: var(--hm-head); }
.hm-sample-note { margin-top: 12px; font-size: .72rem; color: var(--hm-muted); }

/* ============================================================ C. split showcases */

.hm-split { padding: 52px 0; }
.hm-split + .hm-split { padding-top: 20px; }
.hm-split-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 52px; align-items: center; }
.hm-split.is-flip .hm-split-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hm-split.is-flip .hm-split-copy { order: 2; }
.hm-split-visual { position: relative; min-width: 0; }
.hm-split-visual::before {
  content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--hm-rgb), .22), transparent); filter: blur(30px);
}

/* every preview */
.hm-screen {
  position: relative; container-type: inline-size;
  background: var(--hm-screen); border: 1px solid var(--hm-line2); border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
  font-size: 12px; color: var(--hm-text); line-height: 1.4;
}

/* the exam */
.hm-exam-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--hm-deep); border-bottom: 1px solid var(--hm-line); }
.hm-code { font-size: .72rem; letter-spacing: .1em; color: var(--hm-teal-text); }
.hm-exam-count { font-size: .72rem; color: var(--hm-muted); white-space: nowrap; }
.hm-exam-count b { color: var(--hm-head); font-variant-numeric: tabular-nums; }
.hm-exam-clock { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--hm-teal-text); }
.hm-exam-clock b { font: 600 .92rem var(--hm-mono); color: var(--hm-head); font-variant-numeric: tabular-nums; }
.hm-ghost-btn { font-size: .66rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--hm-line2); color: var(--hm-text); white-space: nowrap; }
.hm-exam-grid { display: grid; grid-template-columns: minmax(0, 1fr) 180px; }
.hm-exam-main { padding: 14px 16px 16px; }
.hm-exam-k { font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hm-muted); }
.hm-exam-qs { display: grid; }
.hm-exam-q { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s; }
.hm-exam-q.is-on { visibility: visible; opacity: 1; transition: opacity .3s ease .12s, visibility 0s; }
.hm-exam-text { margin: 8px 0 12px; font-size: .84rem; line-height: 1.55; color: var(--hm-head); }
.hm-opts { display: grid; gap: 6px; }
.hm-opt {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--hm-line); background: rgba(255, 255, 255, .02); font-size: .78rem;
  transition: border-color .25s ease, background .25s ease;
}
.hm-opt i {
  width: 20px; height: 20px; flex: none; border-radius: 6px; display: grid; place-items: center;
  font-style: normal; font-size: .62rem; font-weight: 700; background: rgba(255, 255, 255, .07); color: var(--hm-muted);
  transition: background .25s ease, color .25s ease;
}
.hm-opt.is-picked { border-color: rgba(var(--hm-rgb), .9); background: rgba(var(--hm-rgb), .13); }
.hm-opt.is-picked i { background: var(--hm-teal-fill); color: #fff; }
.hm-opt sup { font-size: .68em; line-height: 0; }
.hm-exam-move { display: flex; justify-content: space-between; margin-top: 12px; font-size: .68rem; color: var(--hm-muted); }
.hm-exam-nav { padding: 12px; border-left: 1px solid var(--hm-line); display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; align-content: start; }
.hm-dot {
  aspect-ratio: 1; border-radius: 4px; display: grid; place-items: center;
  font-size: .5rem; font-style: normal; color: var(--hm-muted); background: rgba(255, 255, 255, .045);
  border: 1px solid transparent; font-variant-numeric: tabular-nums; transition: background .3s ease, color .3s ease;
}
.hm-dot.is-done { background: rgba(var(--hm-rgb), .38); color: var(--hm-head); }
.hm-dot.is-at { border-color: var(--hm-teal-text); color: var(--hm-head); }

@container (max-width: 520px) {
  .hm-exam-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-exam-nav { border-left: 0; border-top: 1px solid var(--hm-line); grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .hm-exam-nav .hm-dot:nth-child(-n+21), .hm-exam-nav .hm-dot:nth-child(n+50) { display: none; }
  .hm-ghost-btn { display: none; }
}

/* readiness */
.hm-rdy { padding: 16px 18px 18px; }
.hm-rdy-line { font: 800 1.2rem var(--hm-head-font); color: var(--hm-head); }
.hm-rdy-why { margin-top: 5px; font-size: .74rem; line-height: 1.55; color: var(--hm-muted); max-width: 62ch; }
.hm-rdy-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hm-rdy-chart { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--hm-card); border: 1px solid var(--hm-line); }
.hm-axis { position: relative; height: 12px; margin: 6px 59px 0 71px; font-size: .52rem; color: var(--hm-muted); }
.hm-axis span { position: absolute; top: 0; left: var(--x); translate: -50% 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hm-rdy-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.hm-rdy-card { padding: 10px; border-radius: 10px; border: 1px solid var(--hm-line); min-width: 0; }
.hm-rdy-card-h { display: flex; justify-content: space-between; align-items: center; }
.hm-rdy-card-h b { font-size: .72rem; letter-spacing: .08em; color: var(--hm-teal-text); }
.hm-trendchip { font-size: .58rem; font-weight: 700; padding: 1px 6px; border-radius: 5px; }
.hm-trendchip.is-up { background: rgba(141, 196, 154, .15); color: var(--hm-ok); }
.hm-trendchip.is-down { background: rgba(224, 154, 154, .15); color: var(--hm-weak); }
.hm-trendchip.is-flat { background: rgba(255, 255, 255, .07); color: var(--hm-muted); }
.hm-rdy-card dl { margin: 8px 0 0; display: grid; gap: 4px; }
.hm-rdy-card dl div { display: flex; justify-content: space-between; gap: 6px; }
.hm-rdy-card dt { font-size: .6rem; color: var(--hm-muted); }
.hm-rdy-card dd { margin: 0; font-size: .7rem; font-weight: 700; color: var(--hm-head); font-variant-numeric: tabular-nums; }
.hm-rdy-card dd.is-weak, .hm-rdy-card dd.is-mid, .hm-rdy-card dd.is-ok { color: var(--tone); }
@container (max-width: 460px) {
  .hm-rdy-cards { grid-template-columns: minmax(0, 1fr); }
  .hm-rdy-card dl { grid-template-columns: repeat(3, auto); }
  .hm-rail-row { grid-template-columns: 54px minmax(0, 1fr) 38px; }
  .hm-rail-v em { display: none; }
  .hm-axis { margin: 6px 47px 0 63px; }
}

/* ============================================================ C3. tabs */

.hm-review { padding: 52px 0; }
.hm-tablist {
  display: none; gap: 4px; padding: 5px; border-radius: 12px; width: max-content; max-width: 100%;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--hm-line); overflow-x: auto; scrollbar-width: none;
}
.hm-tablist::-webkit-scrollbar { display: none; }
.hm-js .hm-tablist, .hm-tabs.is-ready .hm-tablist { display: flex; }
.hm-show .hm-tabs:not(.is-ready) .hm-tablist { display: none; }
.hm-tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 9px;
  background: transparent; color: var(--hm-muted); font: 600 .86rem var(--hm-body-font); cursor: pointer; white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}
.hm-tab:hover { color: var(--hm-head); }
.hm-tab[aria-selected="true"] { background: rgba(255, 255, 255, .075); color: var(--hm-head); box-shadow: inset 0 0 0 1px var(--hm-line2); }
.hm-tab[aria-selected="true"] .hm-i { color: var(--hm-teal-text); }
.hm-tab-time { position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; overflow: hidden; }
.hm-tab-time::after { content: ""; display: block; height: 100%; background: var(--hm-teal-text); transform: scaleX(0); transform-origin: left; }
.hm-tabs.is-auto .hm-tab[aria-selected="true"] .hm-tab-time::after { animation: hm-tabtime var(--hm-tab-ms, 7000ms) linear forwards; }
/* as specific as the rule that starts the line: its animation shorthand
   resets the play state, so a plainer "paused" would simply lose */
.hm-tabs.is-auto.is-held .hm-tab[aria-selected="true"] .hm-tab-time::after,
.hm-paused .hm-tabs.is-auto .hm-tab[aria-selected="true"] .hm-tab-time::after { animation-play-state: paused; }

/* Without JavaScript the four panels follow one another and the tab strip
   is not shown -- tabs that do nothing are worse than none. With it, the
   panels share one grid cell: the section is always the height of the
   tallest, so nothing below it moves when a tab changes, by a click or on
   its own. The hidden ones keep their space but are invisible, which also
   takes them out of the tab order and away from screen readers. */
.hm-tabpanel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 36px; align-items: center; margin-top: 22px; }
.hm-tabpanel + .hm-tabpanel { margin-top: 40px; }
.hm-js:not(.hm-show) .hm-tabs:not(.is-ready) .hm-tabpanel + .hm-tabpanel { display: none; }  /* the moment before the script */
.hm-tabs.is-ready { display: grid; grid-template-columns: minmax(0, 1fr); }
.hm-tabs.is-ready > .hm-tablist { grid-row: 1; }
.hm-tabs.is-ready > .hm-tabpanel { grid-row: 2; grid-column: 1; margin-top: 22px; }
.hm-tabs.is-ready > .hm-tabpanel[hidden] { display: grid; visibility: hidden; }
.hm-tabs.is-ready > .hm-tabpanel:not([hidden]) { animation: hm-fade .35s ease both; }
.hm-tabpanel-copy h3 { font: 700 1.25rem/1.25 var(--hm-head-font); letter-spacing: -.015em; color: var(--hm-head); }
.hm-tabpanel-copy .hm-body { font-size: .9rem; }
.hm-tabpanel-visual { position: relative; min-width: 0; }

/* the log */
.hm-log-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 14px 8px; }
.hm-log-head b { font: 700 .92rem var(--hm-head-font); color: var(--hm-head); }
.hm-log-head span { font-size: .64rem; color: var(--hm-muted); }
.hm-log-head em { font-style: normal; font-weight: 700; color: var(--hm-head); }
.hm-log-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 14px 10px; }
.hm-log-tabs span { font-size: .62rem; padding: 4px 9px; border-radius: 6px; background: rgba(255, 255, 255, .045); color: var(--hm-muted); white-space: nowrap; }
.hm-log-tabs span.is-on { background: var(--hm-teal-fill); color: #fff; }
.hm-log-tabs .hm-log-filter { margin-left: auto; }
.hm-log-tabs span.is-watch { box-shadow: inset 0 0 0 1px rgba(232, 176, 79, .45); color: #f3d9a6; }
.hm-log-tabs span.is-bump { animation: hm-bump .45s ease; }
.hm-log-th, .hm-log-row { display: grid; grid-template-columns: 18px 66px minmax(0, 1fr) 88px 40px 18px; gap: 10px; align-items: center; padding: 7px 14px; }
.hm-log-th { font-size: .52rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-muted); border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }
.hm-log-row { font-size: .7rem; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.hm-log-n { color: var(--hm-muted); font-variant-numeric: tabular-nums; }
.hm-badge {
  font-size: .5rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 5px; border-radius: 4px;
  background: rgba(224, 154, 154, .15); color: var(--hm-weak); text-align: center; white-space: nowrap;
}
.hm-badge.is-fixed { background: rgba(141, 196, 154, .15); color: var(--hm-ok); }
.hm-log-q { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--hm-head); }
.hm-log-q b { margin-right: 6px; font-weight: 600; color: var(--hm-teal-text); }
.hm-log-a { text-align: right; font-weight: 700; color: var(--hm-ok); white-space: nowrap; }
.hm-log-m { text-align: right; color: var(--hm-muted); font-variant-numeric: tabular-nums; }
.hm-log-f { display: grid; place-items: center; color: rgba(255, 255, 255, .2); transition: color .3s ease, transform .3s ease; }
.hm-log-f.is-on { color: var(--hm-amber); }
.hm-log-f.is-on svg { fill: currentColor; }
.hm-log-f.is-pop { transform: scale(1.35); }
.hm-log-pager { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; font-size: .62rem; color: var(--hm-muted); }
.hm-pages i { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 3px; border-radius: 5px; font-style: normal; background: rgba(255, 255, 255, .045); }
.hm-pages i.is-on { background: var(--hm-teal-fill); color: #fff; }
@container (max-width: 480px) {
  .hm-log-th, .hm-log-row { grid-template-columns: 58px minmax(0, 1fr) 58px 16px; gap: 8px; }
  .hm-log-n, .hm-log-m, .hm-log-th span:first-child, .hm-log-th span:nth-child(5) { display: none; }
  .hm-log-tabs .hm-log-filter { display: none; }
}

/* the queue */
.hm-queue-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--hm-line); font-size: .66rem; color: var(--hm-muted); flex-wrap: wrap; }
.hm-queue-bar > .hm-i { color: var(--hm-teal-text); }
.hm-queue-bar b { font-size: .8rem; color: var(--hm-head); }
.hm-queue-bar .hm-mini-btn { margin-left: auto; }
.hm-queue-card { padding: 14px 16px; }
.hm-queue-verdict { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; background: rgba(141, 196, 154, .1); font-size: .74rem; color: var(--hm-ok); }
.hm-queue-verdict b { color: var(--hm-ok); }
.hm-ladder { display: flex; align-items: flex-start; padding: 14px 16px 16px; border-top: 1px solid var(--hm-line); }
.hm-step { flex: none; width: 66px; display: grid; justify-items: center; gap: 3px; text-align: center; }
.hm-step > i {
  width: 13px; height: 13px; border-radius: 50%; background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
  transition: background .4s ease calc(var(--i) * .45s), box-shadow .4s ease calc(var(--i) * .45s);
}
.hm-step:first-child > i { background: var(--hm-weak); box-shadow: 0 0 0 3px rgba(224, 154, 154, .2); }
.hm-step b { font-size: .62rem; color: var(--hm-head); white-space: nowrap; }
.hm-step em { font-style: normal; font-size: .54rem; color: var(--hm-muted); white-space: nowrap; }
.hm-step-link { flex: 1; min-width: 8px; height: 2px; margin-top: 6px; position: relative; overflow: hidden; background: rgba(255, 255, 255, .1); }
.hm-step-link::after {
  content: ""; position: absolute; inset: 0; background: var(--hm-teal-text); transform-origin: left; transform: scaleX(1);
  transition: transform .45s ease calc(var(--i) * .45s + .2s);
}
.hm-step:not(:first-child):not(:last-child) > i { background: var(--hm-teal-text); box-shadow: 0 0 0 3px rgba(var(--hm-rgb), .2); }
.hm-step:last-child > i { background: var(--hm-ok); box-shadow: 0 0 0 3px rgba(141, 196, 154, .25); }
.hm-step:last-child b { color: var(--hm-ok); }
@container (max-width: 420px) {
  .hm-step { width: 50px; }
  .hm-step em { display: none; }
}

/* practice */
.hm-practice { padding: 14px 16px 12px; }
.hm-pr-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hm-line); }
.hm-pr-pick .hm-cap { margin: 0; }
.hm-pr-pick .hm-mini-btn { margin-left: auto; }
.hm-chips { display: inline-flex; gap: 3px; }
.hm-chips i { font-style: normal; font-size: .66rem; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, .05); color: var(--hm-muted); }
.hm-chips i.is-on { background: var(--hm-teal-fill); color: #fff; }
.hm-chips.is-small i { font-size: .54rem; padding: 2px 6px; }
.hm-pr-score { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; margin: 12px 0 10px; }
.hm-pr-score b { font: 800 1.35rem var(--hm-head-font); color: var(--hm-head); }
.hm-pr-score span { font-size: .72rem; color: var(--hm-muted); }
.hm-pr-score .hm-meter { margin: 0; height: 6px; }
.hm-pr-filter { display: flex; gap: 4px; margin-bottom: 6px; }
.hm-pr-filter span { font-size: .6rem; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .045); color: var(--hm-muted); }
.hm-pr-filter span.is-on { background: rgba(255, 255, 255, .1); color: var(--hm-head); }
.hm-pr-filter .hm-pr-group { margin-left: auto; background: none; }
.hm-pr-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .045); font-size: .7rem; color: var(--hm-head); }
.hm-pr-row > .hm-i { margin-top: 1px; color: var(--hm-ok); }
.hm-pr-row.is-wrong > .hm-i { color: var(--hm-weak); }
.hm-pr-row b { margin-right: 6px; font-weight: 600; color: var(--hm-teal-text); }

/* ============================================================ D. bento */

.hm-everything { padding: 52px 0 36px; }
.hm-band { margin-top: 30px; }
.hm-head + .hm-band { margin-top: 6px; }
.hm-band-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hm-band-h { font: 700 1.02rem var(--hm-head-font); color: var(--hm-head); }
.hm-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.hm-card {
  grid-column: span 4; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px;
  border-radius: 14px; border: 1px solid var(--hm-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .012));
  transition: border-color .2s ease;
}
.hm-card:hover { border-color: var(--hm-line2); }
.hm-card.is-wide { grid-column: span 7; }
.hm-card.is-narrow { grid-column: span 5; }
.hm-card.is-third { grid-column: span 4; }
.hm-card.is-half { grid-column: span 6; }
.hm-card h3 { display: flex; align-items: center; gap: 8px; font: 700 .98rem var(--hm-head-font); color: var(--hm-head); }
.hm-card h3 .hm-i { color: var(--hm-teal-text); }
.hm-card p { margin-top: 6px; font-size: .83rem; line-height: 1.55; color: var(--hm-muted); }
.hm-card .hm-link { margin-top: 10px; font-size: .8rem; }
.hm-card-visual { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.hm-card-visual > .hm-screen { flex: 1; }
.hm-card .hm-screen { box-shadow: none; }

/* syllabus */
.hm-syl { padding: 12px 14px 8px; }
.hm-syl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hm-syl-head b { font: 700 .82rem var(--hm-head-font); color: var(--hm-head); }
.hm-label { font-size: .52rem; font-weight: 700; letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; background: rgba(var(--hm-rgb), .16); color: var(--hm-teal-text); white-space: nowrap; }
.hm-syl-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 8px; }
.hm-syl-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.hm-syl-tabs span { font-size: .6rem; font-weight: 700; letter-spacing: .04em; padding: 4px 8px; border-radius: 6px; color: var(--hm-muted); white-space: nowrap; }
.hm-syl-tabs span.is-on { background: var(--hm-raised); color: var(--hm-head); }
.hm-search { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 6px; border: 1px solid var(--hm-line); font-size: .6rem; color: var(--hm-muted); white-space: nowrap; }
.hm-syl-sec { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--hm-line); font-size: .56rem; font-weight: 700; letter-spacing: .08em; color: var(--hm-teal-text); }
.hm-syl-sec span { font-weight: 500; letter-spacing: 0; color: var(--hm-muted); white-space: nowrap; }
.hm-syl-row { display: grid; grid-template-columns: 18px 150px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .045); font-size: .68rem; }
.hm-syl-row:last-child { border-bottom: 0; }
.hm-syl-n { color: var(--hm-muted); font-variant-numeric: tabular-nums; }
.hm-syl-row b { color: var(--hm-head); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-syl-subs { color: var(--hm-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@container (max-width: 380px) {
  .hm-syl-row { grid-template-columns: 16px minmax(0, 1fr); }
  .hm-syl-subs { grid-column: 2; }
  .hm-search { display: none; }
}

/* lesson contents */
.hm-ls { padding: 12px 14px; }
.hm-ls-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .68rem; color: var(--hm-muted); }
.hm-ls-head b { font-size: .78rem; color: var(--hm-head); }
.hm-ls > .hm-meter { margin: 8px 0 8px; }
.hm-ls-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-top: 4px; border-radius: 8px; border: 1px solid var(--hm-line); font-size: .7rem; }
.hm-ls-row b { color: var(--hm-head); font-weight: 600; }
.hm-ls-n { width: 18px; height: 18px; flex: none; border-radius: 5px; display: grid; place-items: center; font-size: .56rem; font-weight: 700; background: rgba(255, 255, 255, .06); color: var(--hm-muted); }
.hm-ls-row.is-done .hm-ls-n { background: rgba(141, 196, 154, .18); color: var(--hm-ok); }
.hm-ls-row.is-at { border-color: rgba(var(--hm-rgb), .7); background: rgba(var(--hm-rgb), .08); }
.hm-ls-quiz { margin-left: auto; font-size: .56rem; color: var(--hm-teal-text); white-space: nowrap; }
.hm-ls-done { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .035); font-size: .62rem; line-height: 1.45; color: var(--hm-muted); }
.hm-ls-done > .hm-i { color: var(--hm-teal-text); margin-top: 1px; }
.hm-ls-done b { color: var(--hm-head); }

/* downloads */
.hm-dl { padding: 10px; display: grid; gap: 6px; }
.hm-dl-card { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--hm-line); }
.hm-dl-card > .hm-i { color: var(--hm-teal-text); }
.hm-dl-card b { display: block; font-size: .7rem; color: var(--hm-head); }
.hm-dl-card em { display: block; font-style: normal; font-size: .58rem; color: var(--hm-muted); }
.hm-dl-card .hm-mini-btn { margin-left: auto; }
.hm-dl-pass { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: .58rem; color: var(--hm-muted); }
.hm-dl-pass code { flex: 1; padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, .05); color: var(--hm-head); font: .62rem var(--hm-mono); letter-spacing: .12em; }

/* related */
.hm-rel { padding: 12px 12px 10px; }
.hm-rel-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; margin-top: 4px; border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: .66rem; color: var(--hm-head); }
.hm-rel-row > .hm-i:first-child { color: var(--hm-teal-text); }
.hm-rel-row > .hm-i:last-child { margin-left: auto; color: var(--hm-muted); }
.hm-rel-foot { margin-top: 8px; font-size: .56rem; color: var(--hm-muted); text-align: right; }

/* free */
.hm-free { padding: 10px; display: grid; gap: 5px; }
.hm-free-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--hm-line); font-size: .66rem; }
.hm-free-row b { color: var(--hm-head); font-weight: 600; }
.hm-free-row > span:last-child { margin-left: auto; font-size: .56rem; color: var(--hm-muted); }
.hm-free-row.is-locked { opacity: .78; }
.hm-free-row.is-locked > .hm-i { color: var(--hm-muted); }
.hm-tag-free { font-size: .5rem; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; background: rgba(141, 196, 154, .18); color: var(--hm-ok); }
.hm-free .hm-free-open { color: var(--hm-teal-text); font-weight: 700; }
.hm-free-code { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; background: rgba(var(--hm-rgb), .1); font-size: .62rem; color: var(--hm-teal-text); }

/* dashboard numbers */
.hm-dash { padding: 12px 14px; }
.hm-dash .hm-tiles { margin-top: 0; }
.hm-dash .hm-cap { margin-top: 10px; }
.hm-hist-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .045); font-size: .66rem; color: var(--hm-head); }
.hm-hist-row b { font-variant-numeric: tabular-nums; color: var(--tone); }

/* calendar */
.hm-cal { padding: 12px; }
.hm-cal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.hm-cal-head b { font-size: .78rem; color: var(--hm-head); white-space: nowrap; }
.hm-cal-dow, .hm-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.hm-cal-dow span { font-size: .5rem; text-align: center; color: var(--hm-muted); padding-bottom: 2px; }
.hm-cal-grid span {
  aspect-ratio: 1.3; display: grid; place-items: center; border-radius: 5px;
  font-size: .56rem; color: var(--hm-muted); background: rgba(255, 255, 255, .03); font-variant-numeric: tabular-nums;
}
.hm-cal-grid span.in-review { background: rgba(var(--hm-rgb), .1); color: var(--hm-text); }
.hm-cal-grid span.is-exam { background: rgba(232, 176, 79, .26); color: #f6dcaa; font-weight: 700; }
.hm-cal-grid span.is-board { background: var(--hm-teal-fill); color: #fff; font-weight: 700; }
.hm-cal-grid span.is-holiday { background: rgba(255, 255, 255, .12); color: var(--hm-head); }
.hm-cal-grid span.is-pad { background: none; }
.hm-cal-key { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; font-size: .54rem; color: var(--hm-muted); }
.hm-cal-key span { display: inline-flex; align-items: center; gap: 4px; }
.hm-cal-key i { width: 8px; height: 8px; border-radius: 2px; }
.hm-cal-key i.is-review { background: rgba(var(--hm-rgb), .35); }
.hm-cal-key i.is-exam { background: rgba(232, 176, 79, .7); }
.hm-cal-key i.is-board { background: var(--hm-teal-fill); }
.hm-cal-key i.is-holiday { background: rgba(255, 255, 255, .3); }

/* history */
.hm-hist { padding: 12px; }
.hm-act { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .045); font-size: .66rem; color: var(--hm-head); line-height: 1.45; }
.hm-act > .hm-i { margin-top: 2px; color: var(--hm-ok); }
.hm-act.is-miss > .hm-i { color: var(--hm-weak); }
.hm-act em { display: block; font-style: normal; font-size: .56rem; color: var(--hm-muted); }

/* phone */
.hm-phone {
  width: 168px; margin: 0 auto; padding: 8px; border-radius: 26px;
  background: #121211; border: 1px solid var(--hm-line2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.hm-phone-screen { border-radius: 19px; overflow: hidden; background: var(--hm-bg); padding: 10px 9px 12px; }
.hm-phone-top { text-align: center; font-size: .56rem; color: var(--hm-head); padding-bottom: 8px; border-bottom: 1px solid var(--hm-line); }
.hm-phone-card { margin-top: 8px; padding: 8px; border-radius: 10px; background: var(--hm-card); }
.hm-phone-card .hm-cap { margin-bottom: 1px; }
.hm-phone-card > b { display: block; margin-bottom: 6px; font: 800 .82rem var(--hm-head-font); color: var(--hm-head); }
.hm-phone-install { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 8px; padding: 6px; border-radius: 999px; background: var(--hm-teal-fill); color: #fff; font-size: .56rem; font-weight: 700; }

/* feed */
.hm-feed { padding: 12px 14px; }
.hm-compose { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; margin-bottom: 10px; border-radius: 8px; border: 1px dashed var(--hm-line2); font-size: .62rem; color: var(--hm-muted); }
.hm-post-anon { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--hm-line2); }
.hm-post-head { display: flex; gap: 8px; align-items: center; }
.hm-post-head b { display: block; font-size: .74rem; color: var(--hm-head); }
.hm-post-head em { font-style: normal; font-size: .58rem; color: var(--hm-muted); }
.hm-course { color: var(--hm-teal-text); font-weight: 700; letter-spacing: .04em; }
.hm-post-body { margin: 8px 0; font-size: .76rem; line-height: 1.55; color: var(--hm-head); }
.hm-mention { color: var(--hm-teal-text); font-weight: 600; background: rgba(var(--hm-rgb), .14); border-radius: 4px; padding: 0 3px; }
.hm-post-sum { display: flex; gap: 7px; align-items: center; font-size: .64rem; color: var(--hm-muted); }
.hm-stack { display: inline-flex; }
.hm-stack i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; background: var(--hm-raised); box-shadow: 0 0 0 2px var(--hm-screen); }
.hm-stack i + i { margin-left: -5px; }
.hm-post-acts { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hm-line); font-size: .66rem; color: var(--hm-muted); }
.hm-react-btn { position: relative; display: inline-flex; align-items: center; gap: 5px; color: var(--hm-pink); font-weight: 700; }
.hm-post-report { margin-left: auto; }
.hm-picker {
  position: absolute; left: -10px; bottom: calc(100% + 8px); display: flex; gap: 1px; padding: 4px 6px; border-radius: 999px;
  background: var(--hm-raised); border: 1px solid var(--hm-line2); box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  opacity: 0; animation: hm-picker 6s 1s ease-in-out infinite paused;
}
.hm-picker i { width: 24px; height: 24px; display: grid; place-items: center; font-style: normal; font-size: 1rem; }
.hm-picker i:nth-child(2) { animation: hm-pick 6s 1s ease-in-out infinite paused; }
.is-live .hm-picker, .is-live .hm-picker i:nth-child(2) { animation-play-state: running; }

/* community question */
.hm-cq { padding: 12px; }
.hm-cq-head { display: flex; align-items: center; gap: 8px; }
.hm-cq-head em { font-style: normal; font-size: .58rem; color: var(--hm-muted); }
.hm-cq-q { margin: 8px 0; font-size: .72rem; line-height: 1.5; color: var(--hm-head); }
.hm-cq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.hm-cq-opt { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--hm-line); font-size: .66rem; }
.hm-cq-opt i { font-style: normal; font-size: .56rem; font-weight: 700; color: var(--hm-muted); }
.is-live .hm-cq-opt.is-right { animation: hm-reveal 6s 1.5s ease infinite; }

/* leaderboard */
.hm-lb { padding: 12px; }
.hm-lb-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; margin-top: 3px; border-radius: 7px; background: rgba(255, 255, 255, .025); font-size: .66rem; }
.hm-lb-row b { color: var(--hm-head); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-lb-row span { color: var(--hm-head); font-weight: 700; font-variant-numeric: tabular-nums; }
.hm-lb-row em { font-style: normal; font-size: .58rem; color: var(--hm-muted); font-variant-numeric: tabular-nums; }
.hm-lb-n { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; font-size: .56rem; font-weight: 700; background: rgba(255, 255, 255, .06); }
.hm-lb-row.is-top .hm-lb-n { background: rgba(232, 176, 79, .3); color: #f6dcaa; }
.hm-lb-row.is-you { background: rgba(var(--hm-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--hm-rgb), .45); }

/* xp */
.hm-xp { padding: 12px; display: flex; align-items: center; gap: 14px; }
.hm-ring { position: relative; width: 74px; height: 74px; flex: none; }
.hm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-ring circle { fill: none; stroke-width: 7; }
.hm-ring-bg { stroke: rgba(255, 255, 255, .08); }
.hm-ring-fg { stroke: var(--hm-teal-text); stroke-linecap: round; stroke-dasharray: var(--dash) 200; transition: stroke-dasharray 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
.hm-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hm-ring b { font: 800 1.3rem/1 var(--hm-head-font); color: var(--hm-head); }
.hm-ring em { font-style: normal; font-size: .46rem; letter-spacing: .14em; color: var(--hm-muted); margin-top: 2px; }
.hm-xp-t b { display: block; font: 700 .9rem var(--hm-head-font); color: var(--hm-head); }
.hm-xp-t > span { display: block; font-size: .64rem; color: var(--hm-muted); }
.hm-xp-t .hm-xp-gain { display: inline-block; margin-top: 7px; padding: 3px 8px; border-radius: 6px; background: rgba(var(--hm-rgb), .12); color: var(--hm-teal-text); font-size: .58rem; font-weight: 700; }

/* achievements */
.hm-bdgs { padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hm-bdg { display: grid; justify-items: center; gap: 5px; padding: 9px 4px; border-radius: 9px; border: 1px solid var(--hm-line); text-align: center; color: var(--hm-muted); opacity: .55; }
.hm-bdg em { font-style: normal; font-size: .54rem; line-height: 1.25; }
.hm-bdg.is-got { opacity: 1; color: var(--hm-amber); background: rgba(232, 176, 79, .07); border-color: rgba(232, 176, 79, .3); }
.hm-bdg.is-got em { color: var(--hm-head); }

/* ============================================================ E. how it works */

.hm-how { padding: 52px 0; }
.hm-how-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm-how-steps::before {
  content: ""; position: absolute; left: 22px; right: 12%; top: 21px; height: 2px;
  background: linear-gradient(90deg, rgba(var(--hm-rgb), .7), rgba(var(--hm-rgb), .15));
  transform-origin: left; transition: transform 1.4s cubic-bezier(.3, .6, .3, 1) .2s;
}
.hm-how-step { position: relative; min-width: 0; }
.hm-how-n {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font: 800 1.05rem var(--hm-head-font); color: #fff; background: var(--hm-teal-fill);
  box-shadow: 0 8px 24px rgba(var(--hm-rgb), .32), 0 0 0 6px var(--hm-bg);
}
.hm-scene {
  display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 6px; min-height: 86px; margin: 14px 0 12px; padding: 10px;
  border-radius: 10px; background: var(--hm-screen); border: 1px solid var(--hm-line); font-size: .66rem; color: var(--hm-text);
}
.hm-scene .hm-rails { width: 100%; }
.hm-scene.is-loop > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .05); white-space: nowrap; }
.hm-scene.is-loop > .hm-i { color: var(--hm-muted); }
.hm-discord { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; background: #555ec9; color: #fff; font-weight: 700; }
.hm-codebox { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 7px; border: 1px solid rgba(var(--hm-rgb), .6); background: rgba(var(--hm-rgb), .08); color: var(--hm-teal-text); }
.hm-codebox code { font: 700 .72rem var(--hm-mono); letter-spacing: .08em; color: var(--hm-head); }
.hm-unlocked { display: inline-flex; align-items: center; gap: 4px; font-size: .6rem; font-weight: 700; color: var(--hm-ok); }
.hm-how-step h3 { font: 700 .98rem var(--hm-head-font); color: var(--hm-head); }
.hm-how-step p { margin-top: 5px; font-size: .82rem; line-height: 1.5; color: var(--hm-muted); }

/* ============================================================ F. built properly */

.hm-built {
  padding: 58px 0; border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line);
  background: radial-gradient(900px 320px at 50% 0%, rgba(var(--hm-rgb), .13), transparent 70%), var(--hm-deep);
}
.hm-tiles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hm-tile {
  position: relative; overflow: hidden; padding: 18px; border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--hm-line);
  transition: border-color .2s ease;
}
.hm-tile::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--hm-rgb), .7), transparent); opacity: .7; }
.hm-tile:hover { border-color: rgba(var(--hm-rgb), .4); }
.hm-tile-i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--hm-rgb), .14); border: 1px solid rgba(var(--hm-rgb), .32); color: var(--hm-teal-text); }
.hm-tile h3 { margin-top: 12px; font: 700 .98rem var(--hm-head-font); color: var(--hm-head); }
.hm-tile p { margin: 6px 0 12px; font-size: .82rem; line-height: 1.55; color: var(--hm-muted); }
.hm-tech {
  display: inline-block; margin-top: auto; padding: 4px 8px; border-radius: 6px;
  font: 600 .66rem var(--hm-mono); color: var(--hm-teal-text); background: rgba(var(--hm-rgb), .08); border: 1px solid rgba(var(--hm-rgb), .22);
}

/* ============================================================ G. trust */

.hm-trust { padding: 52px 0 12px; }
.hm-stats.is-center { max-width: 760px; }
.hm-stat.is-big b { font-size: 2.1rem; }
.hm-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.hm-quote { margin: 0; padding: 18px; border-radius: 14px; border: 1px solid var(--hm-line); background: rgba(255, 255, 255, .025); }
.hm-quote blockquote { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--hm-head); }
.hm-quote figcaption { margin-top: 12px; font-size: .78rem; color: var(--hm-muted); }
.hm-quote figcaption b { display: block; color: var(--hm-head); }

/* ============================================================ H. closing */

.hm-close { padding: 44px 0 60px; }
.hm-close-box {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(var(--hm-rgb), .24), rgba(var(--hm-rgb), .06) 60%, rgba(255, 255, 255, .02));
  border: 1px solid rgba(var(--hm-rgb), .38); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.hm-close h2 { margin-top: 0; }
.hm-close-box p { margin-top: 6px; color: #bdb8ad; }     /* the muted grey is 4.4:1 on the box's teal corner */
.hm-close .hm-ctas { margin-top: 0; flex: none; }

/* ============================================================ I. footer */

.hm-foot { padding: 40px 0 22px; background: var(--hm-deep); border-top: 1px solid var(--hm-line); font-size: .84rem; }
.hm-foot-grid { display: grid; grid-template-columns: minmax(0, 1.7fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 28px; }
.hm-foot-name { font: 700 1rem var(--hm-head-font); color: var(--hm-head); text-decoration: none; }
.hm-foot-brand p { margin-top: 8px; max-width: 36ch; font-size: .82rem; line-height: 1.6; color: var(--hm-muted); }
.hm-foot-contacts, .hm-socials { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.hm-foot-contact, .hm-social { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--hm-text); text-decoration: none; }
.hm-foot-contact:hover, .hm-social:hover { color: var(--hm-teal-text); }
.hm-foot .hm-foot-h { margin: 0 0 10px; font: 700 .7rem var(--hm-body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--hm-muted); }
.hm-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hm-foot li a { display: inline-flex; align-items: center; gap: 5px; color: var(--hm-text); text-decoration: none; }
.hm-foot li a:hover { color: var(--hm-teal-text); }
.hm-foot-base { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--hm-line); font-size: .76rem; color: var(--hm-muted); }
.hm-top-link { display: inline-flex; align-items: center; gap: 5px; color: var(--hm-muted); text-decoration: none; white-space: nowrap; }
.hm-top-link:hover { color: var(--hm-head); }
.hm-top-link .is-up { transform: rotate(-90deg); }

/* ============================================================ reveal

   Sections ease in once, as they scroll into view. Everything in this
   block is a "not yet" state, and all of it holds only three ways at once:
   with JavaScript (.hm-js, set in <head>), until the failsafe stops
   waiting for the script (.hm-show), and for visitors who have not asked
   for less motion. Outside that, everything is simply there. */

@media (prefers-reduced-motion: no-preference) {
  .hm-js:not(.hm-show) [data-reveal] {
    transition: opacity .6s ease calc(var(--d, 0) * 80ms), translate .6s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 80ms), border-color .2s ease;
  }
  .hm-js:not(.hm-show) [data-reveal]:not(.is-in) { opacity: 0; translate: 0 14px; }

  /* what draws itself once its section is in: the charts, the XP ring,
     the line through the four steps */
  .hm-js:not(.hm-show) [data-reveal]:not(.is-in) .hm-trend-line { stroke-dashoffset: 1; animation: none; }
  .hm-js:not(.hm-show) [data-reveal]:not(.is-in) .hm-rail > i { animation: none; transform: scaleX(0); }
  .hm-js:not(.hm-show) [data-reveal]:not(.is-in) .hm-ring-fg { stroke-dasharray: 0 200; }
  .hm-js:not(.hm-show) .hm-how-steps[data-reveal]:not(.is-in)::before { transform: scaleX(0); }

  /* the review ladder: lit step by step when its section comes in, and
     again each time its tab is opened */
  .hm-js:not(.hm-show) [data-reveal]:not(.is-in) .hm-step:not(:first-child) > i,
  .hm-tabs.is-ready > .hm-tabpanel[hidden] .hm-step:not(:first-child) > i {
    background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
  }
  .hm-js:not(.hm-show) [data-reveal]:not(.is-in) .hm-step-link::after,
  .hm-tabs.is-ready > .hm-tabpanel[hidden] .hm-step-link::after { transform: scaleX(0); }
}

/* ============================================================ motion */

@keyframes hm-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes hm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hm-fade { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@keyframes hm-tabtime { to { transform: scaleX(1); } }
@keyframes hm-bump { 40% { transform: scale(1.12); } }
@keyframes hm-picker {
  0%, 12% { opacity: 0; transform: translateY(6px) scale(.94); }
  20%, 64% { opacity: 1; transform: none; }
  72%, 100% { opacity: 0; transform: translateY(6px) scale(.94); }
}
@keyframes hm-pick { 0%, 36% { transform: none; } 44% { transform: translateY(-5px) scale(1.4); } 54%, 100% { transform: none; } }
@keyframes hm-reveal {
  0%, 30% { border-color: var(--hm-line); background: transparent; }
  38%, 80% { border-color: rgba(141, 196, 154, .7); background: rgba(141, 196, 154, .12); }
  90%, 100% { border-color: var(--hm-line); background: transparent; }
}

/* The switch in the hero, and the rule it sets: loops stop, entrances do
   not -- a toast paused in its delay would never appear at all. */
.hm-paused .hm-float { animation-play-state: running, paused; }
.hm-paused .hm-picker, .hm-paused .hm-picker i, .hm-paused .hm-cq-opt { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before, .hm *::after {
    animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .hm-js .hm-motion { display: none; }
  html:root { scroll-behavior: auto; }   /* the theme sets smooth for everyone */
}

@media print {
  .hm [data-reveal] { opacity: 1 !important; translate: none !important; }
  .hm-js .hm-motion, .hm-hero::before, .hm-hero::after { display: none; }
}

/* ============================================================ widths */

@media (max-width: 1100px) {
  .hm-hero-grid { gap: 24px; }
  .hm-split-grid, .hm-split.is-flip .hm-split-grid { gap: 36px; }
}

@media (max-width: 960px) {
  .hm-hero { padding-top: 26px; }
  .hm-hero-grid, .hm-split-grid, .hm-split.is-flip .hm-split-grid, .hm-tabpanel { grid-template-columns: minmax(0, 1fr); }
  .hm-split.is-flip .hm-split-copy { order: 0; }
  .hm-hero-copy { max-width: 640px; }
  .hm-hero-visual { margin-right: 0; }
  .hm-stage { padding: 30px 12px 40px; max-width: 760px; }
  .hm-float--tonight { left: 0; top: auto; bottom: 14px; width: 180px; }
  .hm-motion { left: 12px; top: 2px; bottom: auto; }
  .hm-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hm-card.is-wide, .hm-card.is-narrow { grid-column: span 6; }
  .hm-card.is-third, .hm-card.is-half { grid-column: span 3; }
  .hm-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .hm-how-steps::before { display: none; }
  .hm-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
  .hm-foot-brand { grid-column: 1 / -1; }
  .hm-close-box { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .hm-wrap { padding: 0 16px; }
  .hm-hero h1 { font-size: 2rem; }
  .hm-lede { font-size: .95rem; }
  .hm-ctas .hm-btn { flex: 1 1 auto; justify-content: center; }
  .hm-stage { padding: 34px 0 0; }
  .hm-float--toast { display: none; }
  .hm-float--tonight { position: relative; left: auto; top: auto; bottom: auto; width: min(236px, 72%); margin: -26px auto 0 10px; }
  .hm-float--clock { right: 0; top: 0; bottom: auto; }
  .hm-motion { left: 0; top: 4px; }
  .hm-app-body { grid-template-columns: minmax(0, 1fr); }
  .hm-app-side, .hm-app-cont { display: none; }
  .hm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-stat.is-weights { grid-column: 1 / -1; }
  .hm-modules { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .hm-modules::-webkit-scrollbar { display: none; }
  .hm-split { padding: 40px 0; }
  .hm-js .hm-tablist, .hm-tabs.is-ready .hm-tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .hm-tab { justify-content: center; padding: 9px 8px; font-size: .8rem; }
  .hm-app-bell { margin-left: auto; }
  .hm-band-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Each band a row to swipe through, the next card showing at the edge,
     rather than fourteen full-width cards one under another. */
  .hm-bento {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 -16px; padding: 2px 16px 12px; scroll-padding-inline: 16px; scrollbar-width: none;
  }
  .hm-bento::-webkit-scrollbar { display: none; }
  .hm-card.is-wide, .hm-card.is-narrow, .hm-card.is-third, .hm-card.is-half { grid-column: auto; scroll-snap-align: start; }

  /* How it works as a timeline: the number on the left, a line down to
     the next, the words and the little scene beside it. */
  .hm-how-steps { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .hm-how-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .hm-how-n { grid-column: 1; grid-row: 1 / span 3; }
  .hm-how-step h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .hm-how-step p { grid-column: 2; grid-row: 2; }
  .hm-how-step .hm-scene { grid-column: 2; grid-row: 3; margin: 10px 0 0; min-height: 0; }
  .hm-how-step:not(:last-child)::after {
    content: ""; position: absolute; left: 21px; top: 54px; bottom: -20px; width: 2px;
    background: linear-gradient(rgba(var(--hm-rgb), .55), rgba(var(--hm-rgb), .12));
  }

  /* Under the hood: icon beside the title, not above it. */
  .hm-tiles-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hm-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 16px; }
  .hm-tile-i { grid-row: 1 / span 3; }
  .hm-tile h3 { margin-top: 7px; }
  .hm-tile p, .hm-tile .hm-tech { grid-column: 2; }
  .hm-tile .hm-tech { justify-self: start; }
  .hm-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-close-box { padding: 22px; }
  .hm-close .hm-ctas { width: 100%; }
}