/* The home page (templates/drobo/home_v2.html): a selling page in the app's design, light and dark, built from Magic UI
   components ported to plain CSS (js/drobo-ui-home.js drives the moving ones). Tokens and the shared pieces (dots,
   shiny text, border beam, magic card, blur fade, number ticker, avatar circles, animated gradient text, particles)
   are drobo-ui.css's; everything here is hm-* and private to this page, so a change elsewhere cannot alter it.
   Components here: Scroll Progress · Safari · iPhone · Backlight · Animated Grid Pattern · Shimmer Button ·
   Interactive Hover Button · Highlighter · Word Rotate · Hyper Text · Lens · Progressive Blur · Scroll Based Velocity ·
   Animated Beam · Ripple · Terminal · Typing Animation · Bento Grid · Animated List · Orbiting Circles · Dotted Map ·
   Flickering Grid · Glare Hover · Marquee · Text Reveal · Shine Border · Striped Pattern · Retro Grid · Meteors ·
   Noise Texture.
   Motion: every keyframe ends on the element's resting state; with reduced motion (drobo-ui.css stops every animation)
   the page is complete and still. Body text is 16px and up (DESIGN-CHANGE-NOTES.md). */

/* ── Page ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
:root:has(body.ui-home) { color-scheme: light; --scrollbar-thumb: rgba(9, 9, 11, .2); --scrollbar-thumb-hover: rgba(9, 9, 11, .32); --scrollbar-track: transparent; }
html[data-theme="dark"]:has(body.ui-home) { color-scheme: dark; --scrollbar-thumb: rgba(255, 255, 255, .16); --scrollbar-thumb-hover: rgba(255, 255, 255, .26); }
body.ui-home { font-size: 16px; line-height: 1.6; overflow-x: clip; }
.hm-shell.ui-shell { grid-template-columns: minmax(0, 1fr); }
.hm-inset.ui-inset { margin: .5rem; overflow: clip; }
.ui-home .hm-inset > * { flex: 0 0 auto; }
.hm-wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 2rem; box-sizing: border-box; }
.hm-section { position: relative; padding-block: 6.5rem; scroll-margin-top: 3.5rem; }
.ui-home [id] { scroll-margin-top: 4.5rem; }
.ui-home img { max-width: none; }

/* Magic UI "Scroll Progress": a thin line along the top that fills as the page is read. */
.hm-progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--hm-read, 0));
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-violet), #ec4899); }
@supports (animation-timeline: scroll()) {
  .hm-progress { animation: hm-read linear both; animation-timeline: scroll(root); }
  @keyframes hm-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ── Bar ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* Stuck flush with the top of the window (owner, 2026-10-05: "its put down way too down so u can see straight thru": at
   .5rem the page scrolled by above it), nearly solid and square once the page moves. */
.hm-bar.ui-topbar { top: 0; gap: 1rem; height: 3.75rem; padding: 0 .9rem 0 1.25rem; background: color-mix(in srgb, var(--ui-panel) 45%, transparent);
  border-bottom-color: transparent; transition: border-color .2s, background .2s, border-radius .2s; }
.hm-bar.is-stuck { border-bottom-color: var(--ui-border); border-radius: 0; background: color-mix(in srgb, var(--ui-panel) 90%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hm-bar.ui-topbar, .hm-bar.is-stuck { background: color-mix(in srgb, var(--ui-panel) 94%, transparent); }
}
.hm-bar__brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
body.ui-app .hm-bar__logo { width: auto; max-width: none; height: 1.85rem; }
.hm-bar__nav { display: flex; align-items: center; gap: .25rem; margin-left: 1.25rem; }
.hm-bar__nav a { padding: .45rem .7rem; font-size: .875rem; font-weight: 500; color: var(--ui-muted) !important; text-decoration: none; border-radius: 8px; transition: color .15s, background .15s; }
.hm-bar__nav a:hover { color: var(--ui-fg) !important; background: var(--ui-hover); }
.hm-bar__menu { display: none; }
.hm-bar__menu .ti-x, .hm-bar__menu[aria-expanded="true"] .ti-menu-2 { display: none; }
.hm-bar__menu[aria-expanded="true"] .ti-x { display: inline; }
.hm-menu { position: absolute; top: calc(100% + .35rem); right: .6rem; left: .6rem; z-index: 40; display: grid; gap: .1rem; padding: .5rem;
  background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-lg); animation: hm-drop .22s var(--ui-ease) both; }
.hm-menu a { padding: .8rem .9rem; font-size: 1rem; font-weight: 500; color: var(--ui-fg) !important; text-decoration: none; border-radius: 10px; }
.hm-menu a:hover { background: var(--ui-hover); }
@keyframes hm-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

/* ── Shared type and buttons ──────────────────────────────────────────────────────────────────────────────────── */
.hm-head { display: grid; justify-items: center; gap: .9rem; max-width: 46rem; margin: 0 auto 3.25rem; text-align: center; }
.hm-head--left { justify-items: start; margin: 0 0 2.5rem; text-align: left; }
.hm-kicker { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-primary); }
.hm-kicker .ti { font-size: 1rem; }
.hm-h2 { margin: 0; font-size: clamp(2rem, 1.35rem + 2.1vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; color: var(--ui-fg); text-wrap: balance; }
.hm-sub { margin: 0; max-width: 40rem; font-size: 1.0625rem; line-height: 1.65; color: var(--ui-muted); text-wrap: pretty; }
.hm-note { margin: 1.5rem auto 0; font-size: .875rem; line-height: 1.6; color: var(--ui-muted); text-align: center; }
.hm-note .ti { margin-right: .3rem; color: var(--ui-ok); vertical-align: -2px; }
.hm-note .ui-link .ti { margin: 0 0 0 .2rem; color: inherit; }
.hm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
.hm-actions--center { justify-content: center; }

/* Magic UI "Shimmer Button": the product's own selling button (the dashboard's and the plans page's), a band of
   light running across it. */
/* Every selling button on the page is the kit's large size (the form-field height, --ui-h-field). */
body.ui-app .hm-go { overflow: hidden; height: var(--ui-h-field); padding: 0 1.35rem; gap: .5rem; font-size: .875rem; font-weight: 600; color: #fff;
  background: linear-gradient(100deg, #2563eb, #4f46e5 55%, #7c3aed); border-color: rgba(255, 255, 255, .14); border-radius: 11px;
  box-shadow: 0 14px 30px -14px rgba(79, 70, 229, .9), inset 0 1px 0 rgba(255, 255, 255, .22); }
body.ui-app .hm-go:hover { filter: brightness(1.1); }
.ui-home .hm-go::after { display: none; }
.hm-go::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent); transform: skewX(-18deg); animation: hm-shimmer 3.6s var(--ui-ease) infinite; }
@keyframes hm-shimmer { 0%, 55% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(430%); } }
.hm-go .ti { transition: transform .2s var(--ui-ease); }
.hm-go:hover .ti { transform: translateX(3px); }
.hm-go__spark { position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 120%, rgba(255, 255, 255, .28), transparent 60%); }
.hm-go--lg { padding: 0 1.6rem; }

/* Magic UI "Interactive Hover Button": a dot that fills the button, the label slides across. */
.hm-hover-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; height: var(--ui-h-field); box-sizing: border-box; padding: 0 1.4rem 0 1.15rem; overflow: hidden;
  font-size: .875rem; font-weight: 600; color: var(--ui-fg) !important; text-decoration: none; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 11px;
  box-shadow: var(--ui-shadow-sm); isolation: isolate; }
.hm-hover-btn__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ui-primary); transition: transform .45s var(--ui-ease); }
.hm-hover-btn__text { transition: transform .3s var(--ui-ease), opacity .3s; }
.hm-hover-btn__hover { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .45rem; color: #fff; opacity: 0;
  transform: translateX(2.5rem); transition: transform .3s var(--ui-ease), opacity .3s; }
.hm-hover-btn:hover .hm-hover-btn__dot, .hm-hover-btn:focus-visible .hm-hover-btn__dot { transform: scale(60); }
.hm-hover-btn:hover .hm-hover-btn__text, .hm-hover-btn:focus-visible .hm-hover-btn__text { transform: translateX(2.5rem); opacity: 0; }
.hm-hover-btn:hover .hm-hover-btn__hover, .hm-hover-btn:focus-visible .hm-hover-btn__hover { transform: none; opacity: 1; }

/* Magic UI "Highlighter": a marker stroke drawn under the words once they are read (js draws the SVG). */
.hm-mark { position: relative; z-index: 0; white-space: nowrap; color: var(--ui-fg-2); font-weight: 550; }
.hm-mark__svg { position: absolute; inset: 0; z-index: -1; overflow: visible; pointer-events: none; }
.hm-mark__svg path { fill: none; stroke: color-mix(in srgb, #fbbf24 55%, transparent); stroke-linecap: round; }
html[data-theme="dark"] .hm-mark__svg path { stroke: color-mix(in srgb, #f59e0b 38%, transparent); }
.hm-mark:not(.is-drawn) { background: none; }

/* Magic UI "Word Rotate": one phrase at a time, the next dropping in from above. */
.hm-rotate { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .12em; transition: width .35s var(--ui-ease); }
.hm-rotate > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(-.9em); transition: opacity .3s ease, transform .35s var(--ui-ease);
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-rotate > span.is-on { opacity: 1; transform: none; }
.hm-rotate > span.is-off { opacity: 0; transform: translateY(.9em); }
.hm-rotate:not(.is-live) > span:not(.is-on) { display: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
.hm-hero { position: relative; isolation: isolate; padding: 4.75rem 0 0; }
.hm-hero__sky { position: absolute; inset: 0 0 30%; z-index: -1; overflow: hidden; pointer-events: none; }
/* Magic UI "Animated Grid Pattern": a grid whose squares light up and fade, under a radial fade. */
.hm-grid { position: absolute; inset: -1px 0 0; width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 0%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 62% 70% at 50% 0%, #000 25%, transparent 78%); }
.hm-grid .hm-grid__line { stroke: color-mix(in srgb, var(--ui-fg) 7%, transparent); }
.hm-grid rect { fill: color-mix(in srgb, var(--ui-primary) 16%, transparent); stroke: color-mix(in srgb, var(--ui-primary) 26%, transparent); stroke-width: 1;
  opacity: 0; animation: hm-square 4.5s ease-in-out infinite; animation-delay: var(--delay, 0s); }
html[data-theme="dark"] .hm-grid rect { fill: color-mix(in srgb, var(--ui-primary) 22%, transparent); }
@keyframes hm-square { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } }
.hm-hero__glow { position: absolute; top: -14rem; left: 50%; width: min(70rem, 120%); height: 34rem; transform: translateX(-50%); filter: blur(40px); opacity: .85;
  background: radial-gradient(closest-side at 32% 55%, color-mix(in srgb, var(--ui-primary) calc(var(--ui-glow, 10%) + 4%), transparent), transparent 75%),
              radial-gradient(closest-side at 64% 45%, color-mix(in srgb, var(--ui-violet) calc(var(--ui-glow, 10%) + 2%), transparent), transparent 75%),
              radial-gradient(closest-side at 50% 80%, color-mix(in srgb, #fb923c var(--ui-glow, 10%), transparent), transparent 70%); }
.hm-hero__text { display: grid; justify-items: center; gap: 1.35rem; text-align: center; }
.hm-pill.ui-pill { justify-self: center; height: 2rem; padding: 0 .75rem 0 .3rem; gap: .5rem; font-size: .8125rem; color: var(--ui-fg-2); text-decoration: none; }
.hm-pill.ui-pill:has(> .ti-bolt) { padding-left: .6rem; }
.hm-pill .ti-arrow-right { font-size: .9rem; color: var(--ui-muted); transition: transform .2s var(--ui-ease); }
.hm-pill:hover .ti-arrow-right { transform: translateX(2px); }
.hm-pill__new { display: inline-grid; place-items: center; height: 1.4rem; padding: 0 .5rem; font-size: .6875rem; font-weight: 650; letter-spacing: .02em; color: #fff;
  background: linear-gradient(100deg, #2563eb, #7c3aed); border-radius: 999px; }
.ui-home .hm-h1 { max-width: 15ch; margin: 0; font-size: clamp(2.65rem, 1.35rem + 4.4vw, 4.75rem); font-weight: 700; line-height: 1.02; letter-spacing: -.05em; color: var(--ui-fg); text-wrap: balance; }
.ui-home .hm-h1 .ui-gradient-anim { padding-right: .04em; }
.hm-lead { max-width: 40rem; margin: 0; font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.6; color: var(--ui-muted); text-wrap: pretty; }
.hm-hero .hm-actions { margin-top: .4rem; }
.hm-fine { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .9rem; margin: -.35rem 0 0; font-size: .875rem; color: var(--ui-muted); }
.hm-fine__lock { display: inline-flex; align-items: center; gap: .3rem; }
.hm-fine__lock .ti { color: var(--ui-ok); }
.hm-proof.ui-circles { margin-top: .6rem; gap: .75rem; padding: .35rem .9rem .35rem .4rem; text-decoration: none; background: color-mix(in srgb, var(--ui-card) 70%, transparent);
  border: 1px solid var(--ui-border); border-radius: 999px; box-shadow: var(--ui-shadow-sm); transition: border-color .2s, transform .2s var(--ui-ease); }
.hm-proof.ui-circles:hover { border-color: var(--ui-border-strong); transform: translateY(-1px); }
.hm-proof__text { font-size: .875rem; color: var(--ui-muted); text-align: left; }
.hm-proof__text b { font-weight: 650; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.hm-proof__text .ti { margin-left: .2rem; font-size: .85rem; vertical-align: -1px; }

/* Seller faces (the leaderboard's photo rule): a photo when the board has one, else the initial. */
.hm-face { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; overflow: hidden; font-size: .8rem; font-weight: 650; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6); border-radius: 50%; box-shadow: 0 0 0 2.5px var(--ui-panel); }
.hm-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-face.has-photo b { visibility: hidden; }
.ui-circles__stack > .hm-face:nth-child(2) { background: linear-gradient(135deg, #f59e0b, #ec4899); }
.ui-circles__stack > .hm-face:nth-child(3) { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.ui-circles__stack > .hm-face:nth-child(4) { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.hm-face--sm { width: 1.75rem; height: 1.75rem; font-size: .6875rem; box-shadow: none; }
.hm-face--lg { width: 4.25rem; height: 4.25rem; font-size: 1.4rem; overflow: visible; }
.hm-face--lg img { border-radius: 50%; }
.hm-face--team { background: linear-gradient(135deg, #2563eb, #7c3aed); }

/* The stage: the real dashboard in a Safari frame (border beam), tilted back until it scrolls up, a backlight behind it
   (the screenshot itself, blurred and saturated) and the phone view in an iPhone frame. */
.hm-stage { position: relative; max-width: 78rem; margin-top: 4rem; perspective: 1800px; }
.hm-stage__tilt { position: relative; transform-origin: 50% 0; }
.ui-js .hm-stage__tilt { transform: rotateX(calc((1 - var(--hm-flat, 0)) * 16deg)) scale(calc(.94 + var(--hm-flat, 0) * .06)); will-change: transform; }
.hm-stage::before { content: ""; position: absolute; inset: 8% 10% 20%; z-index: -2; border-radius: 50%; filter: blur(70px); opacity: .75; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ui-primary) 34%, transparent), transparent),
              radial-gradient(closest-side at 80% 40%, color-mix(in srgb, var(--ui-violet) 30%, transparent), transparent); }
.hm-backlight { position: absolute; inset: 3% 2% 6%; z-index: -1; overflow: hidden; border-radius: 28px; filter: blur(46px) saturate(2.2); opacity: .5; pointer-events: none; }
.hm-backlight img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
html[data-theme="dark"] .hm-backlight { opacity: .42; }
.hm-stage__note { display: flex; align-items: center; justify-content: center; gap: .4rem; margin: 1.1rem 0 0; font-size: .8125rem; color: var(--ui-faint); }

/* Magic UI "Safari": browser chrome around a real screen. */
.hm-safari { position: relative; overflow: hidden; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-lg); }
.hm-safari__bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; height: 2.5rem; padding: 0 .9rem;
  background: var(--ui-subtle); border-bottom: 1px solid var(--ui-border); }
.hm-safari__dots { display: inline-flex; gap: .4rem; }
.hm-safari__dots i { width: .7rem; height: .7rem; border-radius: 50%; background: color-mix(in srgb, var(--ui-fg) 14%, transparent); }
.hm-safari__nav, .hm-safari__tools { display: inline-flex; gap: .6rem; font-size: 1rem; color: var(--ui-faint); }
.hm-safari__url { justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: min(26rem, 100%); height: 1.65rem;
  font-size: .8125rem; color: var(--ui-muted); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 8px; white-space: nowrap; overflow: hidden; }
.hm-safari__url .ti { font-size: .8rem; color: var(--ui-faint); }
.hm-safari__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ui-bg); }
.hm-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.hm-safari--hero { border-radius: 16px; }
.hm-safari--hero.ui-beam { overflow: visible; }
.hm-safari--hero .hm-safari__screen { border-radius: 0 0 15px 15px; }
.hm-safari--hero .hm-safari__bar { border-radius: 15px 15px 0 0; }
/* Magic UI "Progressive Blur": the bottom of the hero screen blurs in steps and fades into the page. */
.hm-safari--hero .hm-safari__screen::after { content: ""; position: absolute; inset: auto 0 0; height: 26%; pointer-events: none;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 70%); mask-image: linear-gradient(to bottom, transparent, #000 70%);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ui-panel) 92%, transparent)); }

/* Magic UI "iPhone": the phone view, over the corner of the desktop one. */
.hm-phone { position: absolute; right: -2.5%; bottom: -7%; z-index: 3; width: clamp(9rem, 17%, 13.25rem); margin: 0; padding: .5rem; aspect-ratio: 9 / 18.6; box-sizing: border-box;
  background: linear-gradient(145deg, #3f3f46, #18181b 40%, #27272a); border-radius: 2.35rem;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 34px 60px -24px rgba(15, 23, 42, .6), 0 0 0 1px rgba(0, 0, 0, .35); }
.hm-phone__screen { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; background: var(--ui-bg); border-radius: 1.9rem; }
.hm-phone__screen::before { content: ""; flex: 0 0 1.55rem; background: var(--ui-panel); }  /* the status bar, under the island */
.hm-phone__screen img { flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top; }
.hm-phone__island { position: absolute; top: .9rem; left: 50%; z-index: 2; width: 30%; height: .95rem; transform: translateX(-50%); background: #000; border-radius: 999px; }

/* ── As seen on ───────────────────────────────────────────────────────────────────────────────────────────────── */
.hm-seen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 2rem; max-width: 72rem; margin: 3.5rem auto 0; padding: 0 2rem; }
.hm-seen p { margin: 0; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-faint); }
.hm-seen ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.25rem; margin: 0; padding: 0; list-style: none; }
.hm-seen a { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .9rem; text-decoration: none; background: #fff; border: 1px solid var(--ui-border);
  border-radius: 10px; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s, transform .25s var(--ui-ease); }
.hm-seen a:hover { filter: none; opacity: 1; transform: translateY(-1px); }
.hm-seen img { width: auto; height: 1.35rem; }
.hm-seen li:last-child img { height: 1.9rem; }
.hm-seen b { font-size: .9375rem; font-weight: 700; color: #111; }

/* ── Product: real screens in tabs ────────────────────────────────────────────────────────────────────────────── */
.hm-show { display: grid; gap: 1.75rem; }
.hm-show__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hm-tab { position: relative; display: inline-flex; align-items: center; gap: .55rem; height: var(--ui-h-field); box-sizing: border-box; padding: 0 1.05rem; overflow: hidden; font: inherit; font-size: .875rem;
  font-weight: 550; color: var(--ui-muted); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow-sm); cursor: pointer;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s; }
.hm-tab:hover { color: var(--ui-fg); border-color: var(--ui-border-strong); }
.hm-tab .ti { font-size: 1.1rem; transition: color .2s; }
.hm-tab.is-on { color: var(--ui-fg); border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border)); box-shadow: 0 0 0 3px var(--ui-ring), var(--ui-shadow); }
.hm-tab.is-on .ti { color: var(--ui-primary); }
.hm-tab__bar { position: absolute; inset: auto 0 0; height: 2px; }
.hm-tab__bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--ui-primary), var(--ui-violet)); }
.hm-tab.is-on .hm-tab__bar i { animation: hm-fill var(--hm-dur, 7s) linear forwards; }
.hm-show.is-paused .hm-tab.is-on .hm-tab__bar i { animation-play-state: paused; }
@keyframes hm-fill { from { width: 0; } to { width: 100%; } }
.hm-panel__text { max-width: 40rem; min-height: 3.3em; margin: 0 auto 1.5rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ui-muted); text-align: center; text-wrap: balance; }
.hm-show__stage { position: relative; display: grid; }
.hm-panel { grid-area: 1 / 1; }
.hm-panel.is-on { animation: hm-panel-in .5s var(--ui-ease) both; }
@keyframes hm-panel-in { from { opacity: 0; filter: blur(8px); transform: translateY(10px) scale(.99); } }
.hm-show__hint { position: absolute; right: .9rem; bottom: .9rem; z-index: 5; display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .3rem .6rem;
  font-size: .75rem; color: var(--ui-muted); background: color-mix(in srgb, var(--ui-card) 88%, transparent); border: 1px solid var(--ui-border); border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; transition: opacity .25s; }
.hm-show__stage:hover .hm-show__hint { opacity: 0; }
@media (hover: none), (pointer: coarse) { .hm-show__hint { display: none; } .hm-lens { cursor: auto; } }
/* Magic UI "Lens": a round zoom that follows the pointer over a screen (js adds the glass). */
.hm-lens { position: relative; width: 100%; height: 100%; cursor: zoom-in; }
.hm-lens__glass { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .18s;
  -webkit-mask-image: radial-gradient(circle var(--hm-r, 95px) at var(--hm-x, 50%) var(--hm-y, 50%), #000 99%, transparent 100%);
  mask-image: radial-gradient(circle var(--hm-r, 95px) at var(--hm-x, 50%) var(--hm-y, 50%), #000 99%, transparent 100%); }
.hm-lens.is-on .hm-lens__glass { opacity: 1; }
.hm-lens__glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transform-origin: var(--hm-x) var(--hm-y); transform: scale(var(--hm-z, 2)); }
.hm-lens__ring { position: absolute; z-index: 5; width: calc(var(--hm-r, 95px) * 2); height: calc(var(--hm-r, 95px) * 2); left: var(--hm-x); top: var(--hm-y); translate: -50% -50%;
  border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-fg) 22%, transparent), 0 12px 30px -8px rgba(15, 23, 42, .35); pointer-events: none; opacity: 0; transition: opacity .18s; }
.hm-lens.is-on .hm-lens__ring { opacity: 1; }

/* Magic UI "Scroll Based Velocity": two rows of words that drift, faster while the page scrolls. */
.hm-velocity { display: grid; gap: .5rem; padding: 1rem 0 1.5rem; overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hm-velocity__row { display: flex; width: max-content; will-change: transform; }
.hm-velocity__row span { display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); font-weight: 700;
  letter-spacing: -.045em; line-height: 1.1; white-space: nowrap; color: color-mix(in srgb, var(--ui-fg) 88%, transparent); }
.hm-velocity__row span .ti { font-size: .45em; color: var(--ui-primary); }
.hm-velocity__row[data-dir="-1"] span { color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ui-fg) 30%, transparent); }
.hm-velocity__row[data-dir="-1"] span .ti { color: var(--ui-violet); -webkit-text-stroke: 0; }

/* ── How it works ─────────────────────────────────────────────────────────────────────────────────────────────── */
.hm-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 3.5rem; align-items: center; }
.hm-steps { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.hm-steps li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1rem 0; }
.hm-steps li:not(:last-child)::after { content: ""; position: absolute; left: 1.05rem; top: 3.4rem; bottom: -.4rem; width: 1px;
  background: linear-gradient(var(--ui-border-strong), transparent); }
.hm-steps__n { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; font-size: .875rem; font-weight: 700; color: var(--ui-primary);
  background: var(--ui-primary-soft); border: 1px solid color-mix(in srgb, var(--ui-primary) 25%, transparent); border-radius: 50%; }
.hm-steps h3 { margin: .15rem 0 .3rem; font-size: 1.125rem; font-weight: 650; letter-spacing: -.02em; color: var(--ui-fg); }
.hm-steps p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ui-muted); }
.hm-how__art { display: grid; gap: 1rem; }

/* Magic UI "Animated Beam": the sources, DroboAI in the middle, the store and its orders (js draws the beams). */
.hm-flow.ui-card { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; min-height: 17rem; padding: 2rem 1.5rem 2.75rem; overflow: hidden; }
.hm-flow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--ui-dot) 1px, transparent 1.4px); background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 75%); opacity: .7; }
.hm-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hm-flow__svg .hm-beam__base { fill: none; stroke: var(--ui-border-strong); stroke-width: 2; stroke-linecap: round; opacity: .7; }
.hm-flow__svg .hm-beam__light { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.hm-flow__col { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2.25rem; }
.hm-node { position: relative; display: grid; justify-items: center; gap: .45rem; }
.hm-node > img, .hm-node > .ti, .hm-node > .hm-ebay { box-sizing: border-box; width: 3.5rem; height: 3.5rem; padding: .75rem; background: var(--ui-card); border: 1px solid var(--ui-border);
  border-radius: 50%; box-shadow: 0 0 22px -12px rgba(0, 0, 0, .7); object-fit: contain; }
.hm-node > .ti { display: grid; place-items: center; font-size: 1.35rem; color: var(--ui-fg-2); }
.hm-node small { font-size: .8125rem; font-weight: 500; color: var(--ui-muted); white-space: nowrap; }
.hm-node--hub > img { position: relative; z-index: 1; width: 4.75rem; height: 4.75rem; padding: 1.05rem; background: var(--ui-card); border: 1px solid var(--ui-border);
  border-radius: 50%; box-shadow: 0 0 0 6px color-mix(in srgb, var(--ui-primary) 8%, transparent), 0 16px 34px -16px color-mix(in srgb, var(--ui-primary) 70%, transparent); }
.hm-ebay { display: inline-flex !important; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; letter-spacing: -.06em; font-family: Inter, sans-serif; }
.hm-ebay b:nth-child(1) { color: #e53238; } .hm-ebay b:nth-child(2) { color: #0064d2; } .hm-ebay b:nth-child(3) { color: #f5af02; } .hm-ebay b:nth-child(4) { color: #86b817; }
.hm-ebay--sm { font-size: .9rem; }
/* Amazon's mark is black: on dark it sits on a white tile, as in the app. */
html[data-theme="dark"] .hm-node > img.hm-amz, html[data-theme="dark"] .hm-orbit__item.hm-amz { background: #fff; border-color: #fff; }
.hm-flow__label { position: absolute; inset: auto 1.5rem .9rem; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ui-faint); text-align: center; }
/* Magic UI "Ripple": rings breathing out from DroboAI. */
.hm-ripple { position: absolute; top: calc(4.75rem / 2); left: 50%; width: 0; height: 0; pointer-events: none; }
.hm-ripple i { position: absolute; left: 50%; top: 50%; width: calc(6rem + var(--k, 0) * 3.5rem); height: calc(6rem + var(--k, 0) * 3.5rem); translate: -50% -50%; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ui-primary) calc(26% - var(--k, 0) * 7%), transparent); background: color-mix(in srgb, var(--ui-primary) calc(5% - var(--k, 0) * 1.5%), transparent);
  animation: hm-ripple 3.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .18s); }
.hm-ripple i:nth-child(2) { --k: 1; } .hm-ripple i:nth-child(3) { --k: 2; }
@keyframes hm-ripple { 0%, 100% { scale: 1; } 50% { scale: .9; } }

/* Magic UI "Terminal": an example upload run, reported line by line (always dark, like the app's own). */
.hm-term { overflow: hidden; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; color: #e4e4e7; background: #0a0a0f; border: 1px solid #1f1f27;
  border-radius: var(--ui-radius-lg); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8); }
.hm-term__bar { display: flex; align-items: center; gap: .75rem; height: 2.4rem; padding: 0 .9rem; font-family: Inter, sans-serif; font-size: .75rem; color: #a1a1aa; border-bottom: 1px solid #1f1f27; }
.hm-term__bar .hm-safari__dots i { background: #3f3f46; }
.hm-term__bar .hm-safari__dots i:nth-child(1) { background: #ff5f57; } .hm-term__bar .hm-safari__dots i:nth-child(2) { background: #febc2e; } .hm-term__bar .hm-safari__dots i:nth-child(3) { background: #28c840; }
.hm-term__bar em { margin-left: auto; padding: .1rem .5rem; font-style: normal; font-size: .6875rem; color: #a1a1aa; border: 1px solid #2e2e34; border-radius: 999px; }
.hm-term__body { display: grid; gap: .45rem; min-height: 15.5rem; padding: 1.1rem 1.2rem 1.3rem; font-size: .8125rem; line-height: 1.5; }
.hm-term__body p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.hm-term__body p::before { display: inline-block; width: 1.3em; }
.hm-term__body [data-kind="cmd"] { color: #fafafa; }
.hm-term__body [data-kind="cmd"]::before { content: "›"; color: #60a5fa; }
.hm-term__body [data-kind="ok"]::before { content: "✓"; color: #4ade80; }
.hm-term__body [data-kind="out"] { color: #a1a1aa; }
.hm-term__body [data-kind="out"]::before { content: "·"; color: #71717a; }
.hm-term__body [data-kind="done"] { color: #93c5fd; }
.hm-term__body [data-kind="done"]::before { content: "●"; color: #60a5fa; }
.hm-term__body b { font-weight: 500; color: #4ade80; }
.ui-js .hm-term[data-armed] .hm-term__body p { opacity: 0; transform: translateY(-4px); }
.ui-js .hm-term[data-armed] .hm-term__body p.is-shown { opacity: 1; transform: none; transition: opacity .3s, transform .3s var(--ui-ease); }
.hm-term__caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: #60a5fa; animation: hm-blink 1s steps(1) infinite; }
@keyframes hm-blink { 50% { opacity: 0; } }

/* ── Features: a bento grid of magic cards ────────────────────────────────────────────────────────────────────── */
.hm-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hm-cell.ui-card { position: relative; display: flex; flex-direction: column; gap: 0; min-height: 22rem; padding: 0; overflow: hidden; border-radius: 16px;
  transition: transform .3s var(--ui-ease), box-shadow .3s var(--ui-ease), border-color .2s; }
.hm-cell.ui-card:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow-lg); }
.hm-cell--write { grid-column: span 2; }
.hm-cell--sync { grid-row: span 2; }
.hm-cell--cloud { grid-column: span 2; }
.hm-cell__art { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 13rem; padding: 1.5rem 1.5rem 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.hm-cell__copy { position: relative; padding: .5rem 1.6rem 1.5rem; }
.hm-cell__copy h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: 1.1875rem; font-weight: 650; letter-spacing: -.02em; color: var(--ui-fg); }
.hm-cell__copy p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ui-muted); }
.hm-cell__eg { display: inline-block; margin-left: .25rem; padding: 0 .45rem; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--ui-faint);
  border: 1px solid var(--ui-border); border-radius: 999px; vertical-align: 1px; }

/* Listings: a title typing itself out (Magic UI "Typing Animation"). */
.hm-listing { display: grid; gap: .55rem; width: min(100%, 36rem); padding: 1.2rem 1.3rem; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px;
  box-shadow: var(--ui-shadow-lg); }
.hm-listing__label { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .75rem; font-weight: 600; color: var(--ui-muted); }
.hm-listing__label .ti { color: var(--ui-violet); }
.hm-listing__label em { margin-left: auto; font-style: normal; font-weight: 500; color: var(--ui-faint); }
.hm-listing__title { min-height: 3.2em; margin: 0 0 .35rem; padding: .7rem .8rem; font-size: 1rem; font-weight: 600; line-height: 1.45; color: var(--ui-fg);
  background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 10px; }
.hm-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--ui-primary); animation: hm-blink 1s steps(1) infinite; }
.hm-listing__specs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.hm-listing__specs li { display: inline-flex; gap: .35rem; padding: .3rem .6rem; font-size: .8125rem; color: var(--ui-fg-2); background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: 8px; }
.hm-listing__specs b { font-weight: 600; color: var(--ui-muted); }

/* Price refresh: events arrive one after another (Magic UI "Animated List"). */
.hm-feed { display: grid; align-content: start; gap: .6rem; width: 100%; max-width: 22rem; margin: 0; padding: 0; list-style: none; }
.hm-feed li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem .85rem; background: var(--ui-card);
  border: 1px solid var(--ui-border); border-radius: 12px; box-shadow: var(--ui-shadow); }
.hm-feed li > .ti { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; font-size: 1.05rem; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border-radius: 9px; }
.hm-feed li[data-tone="blue"] { --tone: #2563eb; } .hm-feed li[data-tone="green"] { --tone: #16a34a; } .hm-feed li[data-tone="amber"] { --tone: #d97706; } .hm-feed li[data-tone="violet"] { --tone: #7c3aed; }
html[data-theme="dark"] .hm-feed li[data-tone="blue"] { --tone: #60a5fa; } html[data-theme="dark"] .hm-feed li[data-tone="green"] { --tone: #4ade80; }
html[data-theme="dark"] .hm-feed li[data-tone="amber"] { --tone: #fbbf24; } html[data-theme="dark"] .hm-feed li[data-tone="violet"] { --tone: #a78bfa; }
.hm-feed li span { display: grid; min-width: 0; }
.hm-feed b { font-size: .9375rem; font-weight: 600; color: var(--ui-fg); }
.hm-feed small { overflow: hidden; font-size: .8125rem; color: var(--ui-muted); white-space: nowrap; text-overflow: ellipsis; }
.hm-feed em { align-self: start; font-style: normal; font-size: .75rem; color: var(--ui-faint); }
.hm-feed li.is-new { animation: hm-feed-in .6s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes hm-feed-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.hm-cell--sync .hm-cell__art { place-items: start center; padding-top: 1.75rem; }

/* Orders: the money on one sale. */
.hm-order { display: grid; gap: .1rem; width: min(100%, 18rem); padding: .9rem 1.1rem; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-lg); }
.hm-order__row { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .45rem 0; font-size: .9375rem; color: var(--ui-muted); }
.hm-order__row b { font-weight: 600; color: var(--ui-fg-2); font-variant-numeric: tabular-nums; }
.hm-order__row--total { margin-top: .3rem; padding-top: .7rem; border-top: 1px dashed var(--ui-border-strong); color: var(--ui-fg); font-weight: 600; }
.hm-order__row--total b { font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; color: var(--ui-ok); }

/* Your own browser session (Magic UI "Orbiting Circles"). */
.hm-orbit { position: relative; display: grid; place-items: center; width: 15rem; height: 15rem; margin-top: -.5rem; }
.hm-orbit__ring { position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); border: 1px solid color-mix(in srgb, var(--ui-fg) 10%, transparent); border-radius: 50%; }
.hm-orbit__core { position: relative; z-index: 1; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ui-primary) 7%, transparent), 0 14px 30px -14px color-mix(in srgb, var(--ui-primary) 70%, transparent); }
.hm-orbit__core img { width: 1.35rem; height: auto; }
.hm-orbit__item { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; font-size: 1.15rem; color: var(--ui-fg-2);
  background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 50%; box-shadow: var(--ui-shadow);
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); animation: hm-orbit var(--t, 20s) linear infinite; }
.hm-orbit__item img { width: 1.35rem; height: auto; }
.hm-orbit__item--rev { animation-direction: reverse; }
@keyframes hm-orbit { from { transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); } to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc(-1 * var(--a) - 360deg)); } }

/* Cloud: the eight marketplaces on a dotted map (Magic UI "Dotted Map", js draws the dots) over a flickering grid. */
.hm-cell--cloud .hm-cell__art { place-items: stretch; padding: 1rem 1.25rem 0; }
.hm-flicker { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; color: var(--ui-primary); opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000, transparent 75%); }
.hm-map { position: relative; z-index: 1; width: 100%; aspect-ratio: 168 / 72; max-height: 16rem; margin: 0 auto; color: color-mix(in srgb, var(--ui-fg) 22%, transparent); }
.hm-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-pin { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; translate: -50% -50%; left: var(--x, -99%); top: var(--y, -99%); }
.hm-pin::before { content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: .55rem; translate: -50% -50%; border-radius: 50%; background: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 22%, transparent); }
.hm-pin::after { content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: .55rem; translate: -50% -50%; border-radius: 50%; border: 1.5px solid var(--ui-primary);
  animation: hm-pulse 2.2s ease-out infinite; animation-delay: calc(var(--n) * .27s); }
@keyframes hm-pulse { 0% { scale: 1; opacity: .9; } 100% { scale: 4; opacity: 0; } }
.hm-pin img, .hm-pin span { position: relative; z-index: 1; }
.hm-pin img { width: .95rem; height: .95rem; margin-left: 1.35rem; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ui-card); }
.hm-pin span { padding: .1rem .4rem; font-size: .6875rem; font-weight: 600; color: var(--ui-fg-2); background: color-mix(in srgb, var(--ui-card) 90%, transparent); border: 1px solid var(--ui-border);
  border-radius: 6px; white-space: nowrap; box-shadow: var(--ui-shadow-sm); }
.hm-pin[data-side="left"] { flex-direction: row-reverse; }
.hm-pin[data-side="left"] img { margin: 0 1.35rem 0 0; }
.hm-pin[data-quiet] span { display: none; }
.hm-pin--eu::before, .hm-pin--eu::after { display: none; }
.hm-pin--eu { gap: .35rem; translate: 0 -50%; }
.hm-pin__flags { display: inline-flex; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.hm-pin__flags img { width: 1rem; height: 1rem; margin: 0 0 0 -.3rem; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ui-card); }
.hm-pin__flags img:first-child { margin-left: 0; }

/* A real person. */
.hm-chat { display: grid; gap: .75rem; width: min(100%, 20rem); }
.hm-chat__msg { display: flex; align-items: flex-end; gap: .55rem; margin: 0; }
.hm-chat__msg > span:not(.hm-face) { padding: .65rem .85rem; font-size: .9375rem; line-height: 1.45; color: var(--ui-fg-2); background: var(--ui-subtle); border: 1px solid var(--ui-border);
  border-radius: 14px 14px 14px 4px; }
.hm-chat__msg--us { justify-content: flex-end; }
.hm-chat__msg--us > span:not(.hm-face) { color: #fff; background: linear-gradient(135deg, #2563eb, #4f46e5); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.hm-face--team .ti { font-size: .85rem; }

/* ── Sellers ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.hm-podium { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2.25rem; }
.hm-podium__card.ui-card { position: relative; display: grid; justify-items: center; gap: .35rem; padding: 1.75rem 1rem 1.5rem; text-align: center; text-decoration: none; border-radius: 16px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--medal-lo) 10%, var(--ui-card)), var(--ui-card) 60%); transition: transform .25s var(--ui-ease), box-shadow .25s; }
.hm-podium__card.ui-card:hover { transform: translateY(-3px); box-shadow: var(--ui-shadow-lg); }
.hm-podium__card.is-first { overflow: visible; border-color: color-mix(in srgb, var(--medal-lo) 45%, var(--ui-border)); }
.hm-podium__card.is-first::after { background: conic-gradient(from var(--ui-beam), transparent 0 72%, #f59e0b 84%, #fde68a 92%, transparent 100%) !important; }
.hm-podium__place { position: absolute; top: .8rem; left: .9rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; font-size: .75rem; font-weight: 700; color: var(--medal-ink);
  background: linear-gradient(145deg, var(--medal-hi), var(--medal-lo)); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .12); }
.hm-podium__card .hm-face--lg { margin-bottom: .55rem; box-shadow: 0 0 0 3px var(--ui-card), 0 0 0 5.5px var(--medal-lo), 0 12px 26px -10px color-mix(in srgb, var(--medal-lo) 70%, transparent); }
.hm-podium__name { font-size: 1rem; font-weight: 600; color: var(--ui-fg); }
.hm-podium__sales { font-size: 1.75rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
.hm-podium__orders { font-size: .875rem; color: var(--ui-muted); }
.hm-podium__all.ui-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem; text-decoration: none; border-radius: 16px;
  border-style: dashed; background: transparent; box-shadow: none; transition: border-color .2s, background .2s; }
.hm-podium__all.ui-card:hover { border-color: var(--ui-border-strong); background: var(--ui-card); }
.hm-podium__all > .ti:first-child { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-size: 1.2rem; color: var(--ui-primary); background: var(--ui-primary-soft); border-radius: 10px; }
.hm-podium__all span { display: grid; gap: .2rem; }
.hm-podium__all b { font-size: 1.0625rem; font-weight: 650; color: var(--ui-fg); }
.hm-podium__all small { font-size: .875rem; line-height: 1.5; color: var(--ui-muted); }
.hm-podium__all > .ti:last-child { align-self: flex-end; font-size: 1.1rem; color: var(--ui-muted); }

/* Magic UI "Marquee" of the Discord posts (tweet-card style), each with a "Glare Hover". */
.hm-marquee { overflow: hidden; padding: .5rem 0 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hm-marquee__track { display: flex; gap: 1rem; width: max-content; animation: hm-marquee 60s linear infinite; }
.hm-marquee:hover .hm-marquee__track, .hm-marquee:focus-within .hm-marquee__track { animation-play-state: paused; }
.hm-marquee.is-idle .hm-marquee__track { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(calc(-50% - .5rem)); } }
.hm-marquee ul { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.hm-post.ui-card { position: relative; display: flex; flex-direction: column; gap: .75rem; width: 21rem; height: 100%; padding: 1.1rem 1.2rem 1.2rem; overflow: hidden; font: inherit;
  text-align: left; color: var(--ui-fg); cursor: zoom-in; border-radius: 16px; transition: transform .25s var(--ui-ease), border-color .2s; }
.hm-post.ui-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border)); }
.hm-post::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background-image: linear-gradient(-45deg, transparent 60%, rgba(255, 255, 255, .45) 70%, transparent 80%);
  background-size: 250% 250%; background-repeat: no-repeat; background-position: -100% -100%; transition: background-position .65s ease; }
.hm-post:hover::before { background-position: 100% 100%; }
html[data-theme="dark"] .hm-post::before { background-image: linear-gradient(-45deg, transparent 60%, rgba(255, 255, 255, .12) 70%, transparent 80%); }
.hm-post__head { display: flex; align-items: center; gap: .55rem; font-size: .9375rem; }
.hm-post__head b { font-weight: 600; }
.hm-post__head em { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; font-style: normal; font-size: .8125rem; color: var(--ui-muted); }
.hm-post__head em .ti { color: #5865f2; font-size: 1rem; }
.hm-post__shot { display: grid; place-items: center; height: 8.5rem; overflow: hidden; background: #313338; border-radius: 10px; }
.hm-post__shot img { width: 100%; height: 100%; object-fit: contain; }
.hm-post__figure { display: grid; gap: .1rem; }
.hm-post__figure strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hm-post__figure small { font-size: .875rem; color: var(--ui-muted); }
.hm-post q { font-size: .9375rem; line-height: 1.5; color: var(--ui-fg-2); }

/* ── Mentorship: Magic UI "Text Reveal" ───────────────────────────────────────────────────────────────────────── */
.hm-mentor { position: relative; padding-bottom: 5rem; }
.hm-reveal { position: relative; height: 170vh; }
.hm-reveal__sticky { position: sticky; top: 16vh; display: grid; gap: 1.5rem; padding-block: 3rem; }
/* The claim: a short headline, so it can be large. Tracking and leading are looser than the page's other headings:
   words that light up one by one are read one by one. */
.hm-reveal__text { max-width: 18ch; margin: 0; font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -.035em; color: var(--ui-fg); text-wrap: balance; }
/* What we do about it: a sentence to read, not a headline. */
.hm-reveal__text--more { max-width: 34ch; margin-top: .25rem; font-size: clamp(1.25rem, 1rem + 1.05vw, 1.875rem); font-weight: 500; line-height: 1.4; letter-spacing: -.015em; text-wrap: pretty; }
.hm-reveal__text .hm-w { display: inline-block; opacity: calc(.2 + var(--o, 0) * .8); transition: opacity .15s linear; }
.hm-reveal__text .hm-br { display: block; height: 0; }
.hm-reveal__text .hm-w.is-accent { background: linear-gradient(90deg, #ffaa40, #9c40ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-mentor__foot { display: grid; gap: .5rem; }
.hm-mentor__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.hm-mentor__steps li { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; font-size: 1rem; font-weight: 550; color: var(--ui-fg); background: var(--ui-card);
  border: 1px solid var(--ui-border); border-radius: 14px; box-shadow: var(--ui-shadow-sm); }
.hm-mentor__steps .ti { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; font-size: 1.1rem; color: var(--ui-primary); background: var(--ui-primary-soft); border-radius: 10px; }
.hm-mentor__foot .hm-note { margin: .75rem 0 0; text-align: left; }

/* ── Pricing ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.hm-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 60rem; }
/* A plan, the way the checkout shows it (owner, 2026-09-27): the real product in a dark window on a dotted, tinted
   stage that runs to the card's edges; then the name, one line, the price, what follows, three chips, one button. */
.hm-plan.ui-card { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 18px; }
.hm-plan.is-soon { opacity: .8; }
.hm-plan.is-pick { border-color: color-mix(in srgb, var(--ui-primary) 35%, var(--ui-border)); box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--ui-primary) 70%, transparent); }
.hm-plan__stage {
  position: relative; isolation: isolate; height: 13.5rem; overflow: hidden; padding: 1.6rem 0 0 1.6rem; box-sizing: border-box; border-bottom: 1px solid var(--ui-border);
  background: radial-gradient(110% 90% at 0% 0%, color-mix(in srgb, var(--ui-primary) var(--hm-tint, 14%), transparent), transparent 62%),
              radial-gradient(90% 85% at 100% 100%, color-mix(in srgb, var(--ui-violet) var(--hm-tint, 14%), transparent), transparent 64%), var(--ui-subtle);
}
html[data-theme="dark"] .hm-plan__stage { --hm-tint: 22%; }
.hm-plan__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--ui-dot) 1px, transparent 1.4px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(80% 70% at 30% 20%, #000 10%, transparent 75%); mask-image: radial-gradient(80% 70% at 30% 20%, #000 10%, transparent 75%);
}
/* The app's own dark chrome in both themes; wider than the stage so it runs off the right edge at a readable size. */
.hm-plan__win { display: block; width: 150%; overflow: hidden; background: #0a0a0d; border-radius: 10px 10px 0 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 70px -18px color-mix(in srgb, var(--ui-primary) 45%, transparent), 0 10px 22px -12px rgba(0, 0, 0, .6); }
html:not([data-theme="dark"]) .hm-plan__win { box-shadow: 0 0 0 1px rgba(9, 9, 11, .14), 0 24px 70px -18px color-mix(in srgb, var(--ui-primary) 40%, transparent), 0 10px 22px -12px rgba(30, 41, 99, .3); }
.hm-plan__bar { display: flex; align-items: center; gap: 5px; height: 1.45rem; padding: 0 .6rem; background: #141419; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.hm-plan__bar i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.hm-plan__bar i:nth-child(2) { background: #f59e0b; } .hm-plan__bar i:nth-child(3) { background: #22c55e; }
.hm-plan__win img { display: block; width: 100%; height: auto; }
.hm-plan__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; padding: 1.35rem 1.6rem 1.6rem; }
.hm-plan__top { display: flex; align-items: center; gap: .65rem; align-self: stretch; }
.hm-plan__top h3 { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; color: var(--ui-fg); }
.hm-plan__tag { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; padding: .2rem .6rem; font-size: .75rem; font-weight: 600; color: var(--ui-primary);
  background: var(--ui-primary-soft); border: 1px solid color-mix(in srgb, var(--ui-primary) 22%, transparent); border-radius: 999px; }
.hm-plan__tag.is-soon { color: var(--ui-muted); background: var(--ui-subtle); border-color: var(--ui-border); }
.hm-plan__what { margin: .3rem 0 0; font-size: .9375rem; line-height: 1.55; color: var(--ui-muted); }
.hm-plan__price { display: flex; align-items: baseline; gap: .55rem; margin: 1rem 0 0; }
.hm-plan__price strong { font-size: 3.25rem; font-weight: 750; letter-spacing: -.045em; line-height: 1; color: var(--ui-fg); font-variant-numeric: tabular-nums; }
/* The $1: blue to violet with a soft glow of its own, as at checkout. */
.hm-plan__price.is-intro strong { padding-right: .06em; background: linear-gradient(120deg, var(--ui-primary) 20%, var(--ui-violet) 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--ui-primary) 38%, transparent)); }
.hm-plan__price span { font-size: .9375rem; font-weight: 550; color: var(--ui-fg-2); }
.hm-plan__then { margin: .6rem 0 0; font-size: .875rem; line-height: 1.5; color: var(--ui-muted); }
.hm-plan__then b { font-weight: 600; color: var(--ui-fg); }
.hm-plan__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.hm-plan__chips li { display: inline-flex; align-items: center; gap: .35rem; height: 1.75rem; padding: 0 .7rem 0 .6rem; font-size: .75rem; font-weight: 550; color: var(--ui-fg-2);
  background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 999px; box-shadow: var(--ui-shadow-sm); }
.hm-plan__chips .ti { font-size: .9rem; color: var(--ui-muted); }
body.ui-app .hm-plan__btn { align-self: stretch; width: 100%; height: var(--ui-h-field); margin-top: auto; font-size: .875rem; border-radius: 11px; }
.hm-addon.ui-card { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; overflow: hidden; border-radius: 16px; }
.hm-addon > * { position: relative; z-index: 1; }
/* Magic UI "Striped Pattern": announced, not sold yet. */
.hm-stripes { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--ui-fg) 5%, transparent) 9px 10px);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.hm-addon__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; font-size: 1.2rem; color: var(--ui-violet); background: color-mix(in srgb, var(--ui-violet) 12%, transparent); border-radius: 10px; }
.hm-addon strong { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.0625rem; font-weight: 650; color: var(--ui-fg); }
.hm-addon strong em { padding: .1rem .5rem; font-style: normal; font-size: .75rem; font-weight: 600; color: var(--ui-violet); background: color-mix(in srgb, var(--ui-violet) 10%, transparent); border-radius: 999px; }
.hm-addon p { margin: .2rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--ui-muted); }
.hm-addon__price { display: grid; justify-items: end; margin: 0; text-align: right; }
.hm-addon__price strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.hm-addon__price span { font-size: .875rem; color: var(--ui-muted); }
.hm-addon__price small { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--ui-muted); }
.hm-terms { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; max-width: 60rem; margin: 1.75rem auto 0; padding: 0; list-style: none; }
.hm-terms li { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--ui-muted); }
.hm-terms .ti { color: var(--ui-faint); }
#pricing .hm-plans { margin-inline: auto; }

/* ── Questions ────────────────────────────────────────────────────────────────────────────────────────────────── */
.hm-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
.hm-faq .hm-head { position: sticky; top: 6rem; }
.hm-faq__list.ui-card { padding: .4rem 1.4rem; border-radius: 18px; }
.hm-faq__list details { border-bottom: 1px solid var(--ui-border); interpolate-size: allow-keywords; }
.hm-faq__list details:last-child { border-bottom: 0; }
.hm-faq__list details::details-content { height: 0; overflow: clip; transition: height .3s var(--ui-ease), content-visibility .3s allow-discrete; }
.hm-faq__list details[open]::details-content { height: auto; }
.hm-faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-size: 1.0625rem; font-weight: 600; color: var(--ui-fg);
  list-style: none; cursor: pointer; }
.hm-faq__list summary::-webkit-details-marker { display: none; }
.hm-faq__list summary .ti { flex: 0 0 auto; font-size: 1.1rem; color: var(--ui-muted); transition: transform .3s var(--ui-ease); }
.hm-faq__list details[open] summary .ti { transform: rotate(45deg); }
.hm-faq__list details p { margin: 0 0 1.25rem; max-width: 62ch; font-size: 1rem; line-height: 1.7; color: var(--ui-muted); }

/* ── Close: one button on a dark band ─────────────────────────────────────────────────────────────────────────── */
.hm-close { position: relative; isolation: isolate; max-width: 72rem; margin: 2rem auto 6rem; padding: 6rem 2rem 6.5rem; overflow: hidden; color: #fafafa; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #1b1f3a 0%, #0b0b12 55%, #09090b 100%); border: 1px solid #1f1f2b; border-radius: 24px;
  box-shadow: 0 40px 80px -40px rgba(37, 99, 235, .45); width: calc(100% - 4rem); box-sizing: border-box; }
.hm-close__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Magic UI "Retro Grid": a grid floor running towards the horizon. */
.hm-retro { position: absolute; inset: 0; overflow: hidden; perspective: 200px; opacity: .55; }
.hm-retro i { position: absolute; inset: 0; transform: rotateX(65deg); }
.hm-retro i::after { content: ""; position: absolute; left: -50%; width: 600vw; height: 300vh; margin-left: -200%; transform-origin: 100% 0 0;
  background-image: linear-gradient(to right, rgba(148, 163, 255, .3) 1px, transparent 0), linear-gradient(to bottom, rgba(148, 163, 255, .3) 1px, transparent 0);
  background-size: 60px 60px; background-repeat: repeat; animation: hm-grid-run 15s linear infinite; }
.hm-retro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, transparent 20%, #0b0b12 90%); }
@keyframes hm-grid-run { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }
/* Magic UI "Meteors". */
.hm-meteors i { position: absolute; top: -5%; left: calc(8% + var(--n) * 13%); width: 2px; height: 2px; border-radius: 50%; background: #c7d2fe; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
  transform: rotate(215deg); animation: hm-meteor calc(5s + var(--n) * .9s) linear infinite; animation-delay: calc(var(--n) * -1.3s); }
.hm-meteors i::before { content: ""; position: absolute; top: 50%; width: 70px; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, #a5b4fc, transparent); }
@keyframes hm-meteor { 0% { transform: rotate(215deg) translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(215deg) translateX(-600px); opacity: 0; } }
.hm-close__particles { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, .85); }
/* Magic UI "Noise Texture": a faint grain over the band. */
.hm-close__noise { position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hm-close__inner { position: relative; display: grid; justify-items: center; gap: 1.1rem; }
.hm-close__circles .ui-circles__text { color: #a1a1aa; }
.hm-close__circles .ui-circles__text b { color: #fafafa; }
.hm-close__circles .hm-face { box-shadow: 0 0 0 2.5px #0b0b12; }
.hm-close__title { max-width: 18ch; margin: 0; font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -.045em; color: #fafafa; text-wrap: balance; }
.hm-close__title span { background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6, #60a5fa); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ui-gradient-x 7s linear infinite; }
.hm-close__lead { margin: 0; font-size: 1.125rem; color: #a1a1aa; }
.hm-close .hm-actions { margin-top: .75rem; }
body.ui-app .hm-close__alt { height: var(--ui-h-field); padding: 0 1.2rem; font-size: .875rem; color: #e4e4e7; }
body.ui-app .hm-close__alt:hover { background: rgba(255, 255, 255, .08); }

/* ── Footer ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.hm-foot { padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--ui-border); background: var(--ui-subtle); border-radius: 0 0 14px 14px; }
.hm-foot__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.hm-foot__brand { display: grid; align-content: start; gap: .9rem; }
.hm-foot__brand p { margin: 0; font-size: .9375rem; color: var(--ui-muted); }
.hm-foot__social { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.hm-foot__social a { display: grid; place-items: center; width: var(--ui-h); height: var(--ui-h); box-sizing: border-box; font-size: 1.1rem; color: var(--ui-muted) !important; text-decoration: none; background: var(--ui-card);
  border: 1px solid var(--ui-border); border-radius: 10px; transition: color .15s, border-color .15s; }
.hm-foot__social a:hover { color: var(--ui-fg) !important; border-color: var(--ui-border-strong); }
.hm-foot nav { display: grid; align-content: start; gap: .6rem; }
.hm-foot nav h2 { margin: 0 0 .2rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-faint); }
.hm-foot nav a { font-size: .9375rem; color: var(--ui-muted) !important; text-decoration: none; }
.hm-foot nav a:hover { color: var(--ui-fg) !important; }
.hm-foot__legal { margin: 2.5rem 0 0; padding-top: 1.5rem; font-size: .8125rem; color: var(--ui-faint); border-top: 1px solid var(--ui-border); }

/* ── Phones: the one button stays in reach ───────────────────────────────────────────────────────────────────── */
.hm-dock { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 50; display: none; translate: -50% 160%; transition: translate .35s var(--ui-ease); }
.hm-dock.is-on { translate: -50% 0; }
body.ui-app .hm-dock .hm-go { padding: 0 1.5rem; border-radius: 999px; box-shadow: 0 18px 40px -12px rgba(37, 99, 235, .7); }

/* The Discord post, full size. */
/* margin: auto puts the pop-up in the middle of the screen (the site's reset takes a dialog's own margin away, which
   left it in the top left corner); the width is set so a small screenshot is shown large enough to read. */
.hm-lightbox { inset: 0; margin: auto; width: min(92vw, 44rem); max-width: min(92vw, 44rem); max-height: 90vh; padding: 0; overflow: visible; color: var(--ui-fg); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 16px; box-shadow: var(--ui-shadow-lg); }
.hm-lightbox::backdrop { background: rgba(9, 9, 11, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hm-lightbox[open] { animation: hm-drop .25s var(--ui-ease) both; }
.hm-lightbox img { display: block; width: 100%; max-height: 72vh; object-fit: contain; background: #313338; border-radius: 16px 16px 0 0; }
.hm-lightbox p { margin: 0; padding: .9rem 1.1rem; font-size: .9375rem; color: var(--ui-muted); }
.hm-lightbox form { position: absolute; top: -.9rem; right: -.9rem; margin: 0; }
.hm-lightbox__close.ui-icon-btn { color: var(--ui-fg); background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: 50%; box-shadow: var(--ui-shadow); }

/* ── Smaller screens ──────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hm-bar__nav { display: none; }
  .hm-bar__menu { display: inline-grid; }
  .hm-show__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -2rem; padding: .3rem 2rem .5rem; scrollbar-width: none; }
  .hm-show__tabs::-webkit-scrollbar { display: none; }
  .hm-tab { flex: 0 0 auto; }
  .hm-how { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hm-faq { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hm-faq .hm-head { position: static; }
  .hm-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-mentor__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cell--write, .hm-cell--cloud { grid-column: 1 / -1; }
  .hm-cell--sync { grid-row: auto; }
  .hm-plans { grid-template-columns: minmax(0, 1fr); max-width: 32rem; }
  .hm-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hm-wrap { padding-inline: 1.25rem; }
  .hm-section { padding-block: 4.5rem; }
  .hm-hero { padding-top: 3rem; }
  .hm-head { margin-bottom: 2.25rem; }
  .hm-bar__login { display: none; }
  .hm-bar.ui-topbar { padding: 0 .5rem 0 .9rem; gap: .5rem; }
  body.ui-app .hm-bar__logo { height: 1.6rem; }
  .hm-actions { width: 100%; }
  .hm-actions > * { flex: 1 1 100%; }
  .hm-hover-btn { justify-content: center; }
  .hm-proof.ui-circles { border-radius: 16px; }
  .hm-dock { display: block; }
  /* On a phone, the phone view leads: the desktop screen sits behind it, smaller. */
  .hm-stage { margin-top: 2.5rem; padding-bottom: 1rem; }
  .ui-js .hm-stage__tilt { transform: none; }
  .hm-safari--hero { width: 92%; margin-left: 0; }
  .hm-safari__nav, .hm-safari__tools { display: none; }
  .hm-safari__bar { grid-template-columns: auto minmax(0, 1fr); height: 2rem; }
  .hm-safari__url { height: 1.4rem; font-size: .6875rem; }
  .hm-phone { right: 0; bottom: -12%; width: 38%; border-radius: 1.8rem; padding: .35rem; }
  .hm-phone__screen { border-radius: 1.5rem; }
  .hm-phone__screen::before { flex-basis: 1.1rem; }
  .hm-phone__island { top: .6rem; height: .7rem; }
  .hm-stage__note { margin-top: 3.5rem; }
  .hm-bento { grid-template-columns: minmax(0, 1fr); }
  .hm-cell.ui-card { min-height: 0; }
  .hm-cell__art { min-height: 12rem; }
  .hm-podium { grid-template-columns: minmax(0, 1fr); }
  .hm-mentor__steps { grid-template-columns: minmax(0, 1fr); }
  .hm-reveal { height: 130vh; }
  .hm-reveal__sticky { top: 12vh; }
  .hm-addon.ui-card { grid-template-columns: auto minmax(0, 1fr); }
  .hm-addon__price { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .hm-close { width: calc(100% - 2rem); margin-bottom: 4rem; padding: 4.5rem 1.25rem 5rem; border-radius: 20px; }
  .hm-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-seen { gap: 1rem; }
  .hm-seen ul { gap: .75rem; }
  .hm-pin:not(.hm-pin--eu) span { display: none; }
  .hm-pin:not(.hm-pin--eu) img { margin-left: 1rem; }
  .hm-pin[data-side="left"] img { margin: 0 1rem 0 0; }
  .hm-pin--eu > span:last-child { display: none; }
  .hm-terms { flex-direction: column; align-items: flex-start; width: fit-content; }
  .hm-pill.ui-pill { max-width: 100%; }
  .hm-pill .ui-shiny { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .hm-flow.ui-card { padding: 1.5rem .5rem 2.5rem; }
  .hm-node small { font-size: .75rem; }
  .hm-inset.ui-inset { margin: 0; border-radius: 0; border-width: 0; }
  .hm-bar.ui-topbar { top: 0; border-radius: 0; }
  .hm-foot { border-radius: 0; }
}
@media (max-width: 420px) {
  .hm-bar .hm-bar__go .ti { display: none; }
  .ui-home .hm-h1 { font-size: 2.45rem; }
}

/* ── Still: no moving parts, everything in its place ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hm-reveal { height: auto; }
  .hm-reveal__sticky { position: static; }
  .hm-reveal__text .hm-w { opacity: 1; }
  .hm-marquee { overflow-x: auto; }
  .hm-marquee__track > ul[aria-hidden] { display: none; }
  .hm-velocity { display: none; }
  .hm-grid rect { opacity: 0; }
}

/* What each plan gives: a check where it has it, an X where it doesn't (owner, 2026-10-07) */
.hm-plan__gets { display: grid; gap: .55rem; margin: 0 0 1.4rem; padding: 1rem 0 0; list-style: none; border-top: 1px solid var(--ui-border); text-align: left; }
.hm-plan__gets li { display: flex; align-items: flex-start; gap: .55rem; font-size: .875rem; line-height: 1.35; color: var(--ui-fg-2); }
.hm-plan__gets .ti { flex: 0 0 auto; margin-top: .1rem; font-size: 1rem; }
.hm-plan__gets .is-yes .ti { color: var(--ui-ok); }
.hm-plan__gets .is-no, .hm-plan__gets .is-no .ti { color: var(--ui-muted); }
.hm-plan__gets .is-lead { font-size: .8125rem; font-weight: 650; color: var(--ui-fg); }
.hm-compare { max-width: 60rem; margin-top: 1.25rem; }

/* AI Agent add-on: one slim, quiet line under the plans (owner, 2026-10-07: "AI Agent part looks ugly") */
.hm-addon.ui-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; padding: .85rem 1.2rem; border-radius: 14px; background: color-mix(in oklab, var(--ui-card, transparent) 70%, transparent); }
.hm-addon__icon { width: 2.1rem; height: 2.1rem; font-size: 1.05rem; border-radius: 9px; }
.hm-addon__text { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; font-size: .9rem; line-height: 1.4; color: var(--ui-muted); }
.hm-addon__text strong { font-size: .9375rem; font-weight: 650; color: var(--ui-fg); }
.hm-addon__text em { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .5rem; font-style: normal; font-size: .72rem; font-weight: 600; color: var(--ui-violet); background: color-mix(in srgb, var(--ui-violet) 10%, transparent); border-radius: 999px; }
.hm-addon__text span { flex-basis: 100%; }
.hm-addon__price { display: grid; justify-items: end; margin: 0; font-size: .8125rem; color: var(--ui-muted); text-align: right; white-space: nowrap; }
.hm-addon__price strong { display: inline; font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; color: var(--ui-fg); }
.hm-addon__price small { font-size: .72rem; }
@media (max-width: 640px) { .hm-addon__price { grid-column: auto; justify-items: end; text-align: right; } .hm-addon.ui-card { grid-template-columns: auto minmax(0, 1fr) auto; } }
.hm-addon__price strong span { font-size: .8125rem; font-weight: 500; color: var(--ui-muted); }

/* Mentorship, two columns (owner, 2026-10-07): the reveal on the left, the steps as a numbered line on the right */
.hm-mentor__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; column-gap: 4rem; }
.hm-mentor__copy { display: grid; gap: 1.5rem; }
.hm-mentor__side.ui-card { padding: 1.6rem 1.6rem 1.3rem; border-radius: 20px; }
.hm-mentor__side-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.25rem; font-size: .8125rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted); }
.hm-mentor__side-head .ti { font-size: 1.05rem; color: var(--ui-primary); }
.hm-mentor__steps { display: grid; grid-template-columns: none; gap: 0; margin: 0; padding: 0; list-style: none; }
.hm-mentor__steps li { position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.35rem; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: inherit; }
.hm-mentor__steps li:last-child { padding-bottom: 0; }
.hm-mentor__steps li:not(:last-child)::before { content: ""; position: absolute; left: 1.125rem; top: 2.4rem; bottom: .2rem; width: 2px; transform: translateX(-50%);
  background: linear-gradient(var(--ui-primary), color-mix(in oklab, var(--ui-primary) 15%, transparent)); border-radius: 2px; }
.hm-mentor__steps b { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; font-size: .9375rem; font-weight: 700; color: var(--ui-primary);
  background: var(--ui-primary-soft); border: 1px solid color-mix(in oklab, var(--ui-primary) 35%, transparent); border-radius: 999px; }
.hm-mentor__steps strong { display: block; padding-top: .3rem; font-size: 1rem; font-weight: 600; color: var(--ui-fg); }
.hm-mentor__steps span { display: block; margin-top: .15rem; font-size: .875rem; color: var(--ui-muted); }
.hm-mentor__side .hm-note { margin: 1.4rem 0 0; padding-top: 1rem; text-align: left; border-top: 1px solid var(--ui-border); }
@media (max-width: 960px) {
  .hm-mentor__grid { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .hm-reveal { height: auto; }
  .hm-reveal__sticky.hm-mentor__grid { position: static; }
}
.hm-mentor__steps b { align-self: start; position: relative; z-index: 1; }
.hm-mentor__steps li:not(:last-child)::before { top: 2.25rem; bottom: 0; }