/* Hallmark · macrostructure: Lesson List (one guide per row, preview left, text right, in the /library card language; Oct 27 night) · tone: plain, useful, quick · anchor hue: ink + gold
   pre-emit critique (Oct 27 night): P4 H5 E5 S5 R5 V4
   Humantic AI · How-To Guides (/how-to). Oct 28 (AK F4b redesign): Library-style intro (one title, one line, the guides in the first
   screen), a Start Here row of four short videos (big thumbnails, like /library's Featured row), short group headings with no
   paragraphs, and a visual on every guide: where it happens (a real Gmail / Outlook / LinkedIn / Chrome / Google / Microsoft logo, or a
   Phosphor glyph for screens inside the app), or the video thumbnail. Every card in a set is the same size;
   how-to.js inserts row breaks so a group never leaves one card alone.
   Borrowed: Linear Docs (Popular row, then groups of equal cards), HubSpot Academy (thumbnail, title, "type · length" meta),
   Zapier app tiles (a real app logo on a white rounded square), Notion Help (short title, the content straight away).
   Brand tokens only; Cabinet Grotesk + Manrope come from hai-brand.css.
   Oct 27 night (AK: "the UI is perfect, give it space"): same design, more breathing room (rows 54 -> 72px, bigger row titles and icons,
   wider panel padding, gaps between columns and panels, roomier Start Here cards). Desktop about 12% taller.
   pre-emit critique: P4 H5 E4 S5 R5 V4 */

.ht {
  --gold: #FFC61E; --gold-3: #FFE8A5; --violet: #341D99; --ink: #110A33; --lav: #DDD6FF;
  --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478; --line: rgba(17,10,51,.12);
  --ease: cubic-bezier(.23, 1, .32, 1); --disp: "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif;
  --sh-sm: 0 2px 8px rgba(17,10,51,.08); --sh-md: 0 12px 32px -12px rgba(17,10,51,.22); --sh-lg: 0 32px 64px -24px rgba(17,10,51,.35);
  --shell: 1240px; --gutter: clamp(16px, 4vw, 48px);
  --nav-b: 56px;
  margin: 0; overflow-x: clip; background: #fff; color: var(--ink);
}
html { overflow-x: clip; }
.ht *, .ht *::before, .ht *::after { box-sizing: border-box; }
.ht :where(h1, h2, h3, h4, p, ul, ol) { margin: 0; padding: 0; }
.ht h1, .ht h2, .ht h3, .ht h4 { text-wrap: balance; }
.ht p { text-wrap: pretty; }
.ht ul, .ht ol { list-style: none; }
.ht main a { color: inherit; }
.ht main [id] { scroll-margin-top: calc(var(--nav-b) + 16px); }
html.hx-desk .ht { --nav-b: 90px; }

.ht-shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.ht-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Top band = /library: the title and the tab row on mist, the tab pill straddling into the white shelf. Nothing sticks or floats. */
.ht-top { background: var(--mist); }
.ht-hero { padding: 144px 0 8px; text-align: center; }
.ht .ht-h1 { font: 700 clamp(38px, 6vw, 76px)/1.06 var(--disp); letter-spacing: -.055em; margin: 0 auto; }
.ht-lead { margin: 12px auto 0; max-width: 48em; font-size: 17px; line-height: 1.55; color: var(--slate); }

/* Tab row = /library's .lib-tabs: white pill, 1px border, 6px padding and gap; tabs Manrope 700 15px slate, selected = ink pill with white text;
   count badge 13px (gold when selected). Search is one round icon at the end of the pill; it opens the pill into a search field. */
/* AS-P (Oct 27, AK): the tab bar is not sticky and does not float. It sits in the page and scrolls away with it; the main nav is untouched. */
.ht-tabs-bar { padding: 28px 0 0; }
.ht-tabs-bar .ht-shell { padding-inline: clamp(16px, 2vw, 24px); } /* 8 tabs + search need ~1170px, so this row takes a slimmer gutter than the grid */
.ht-tabbar { display: flex; align-items: center; gap: 6px; padding: 4px; margin-inline: auto; width: max-content; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--sh-sm); pointer-events: auto; }
/* AS-P (Oct 27): chips 13px with tighter padding so all eight fit one row at 1280 and 1440. Narrower, the strip scrolls sideways (hidden bar, wheel,
   drag: how-to.js) and fades the edge that has more chips behind it (is-fade-start / is-fade-end, set by how-to.js only when an edge changes).
   The 4px padding + -4px margin keep a chip's focus ring from being clipped by the strip. */
.ht-tabs { position: relative; display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: -4px; overscroll-behavior-x: contain; }
.ht-tabs::-webkit-scrollbar { display: none; }
.ht-tabs.is-fade-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.ht-tabs.is-fade-end { -webkit-mask-image: linear-gradient(270deg, transparent, #000 28px); mask-image: linear-gradient(270deg, transparent, #000 28px); }
.ht-tabs.is-fade-start.is-fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.ht-tabs.is-drag { cursor: grabbing; user-select: none; }
.ht-tab { all: unset; box-sizing: border-box; flex: none; display: inline-flex; min-height: 40px; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px; font: 700 13px/1 Manrope, Arial, sans-serif; color: var(--slate); cursor: pointer; white-space: nowrap; transition: background-color .25s var(--ease), color .25s; }
.ht-tab:hover { color: var(--ink); background: var(--mist); }
.ht-tab:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ht-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
.ht-tab small { font: 700 12px/1 Manrope, Arial, sans-serif; padding: 3px 5px; border-radius: 999px; background: rgba(17,10,51,.07); color: inherit; font-variant-numeric: tabular-nums; }
.ht-tab[aria-selected="true"] small { background: var(--gold); color: var(--ink); }
.ht-sopen { all: unset; box-sizing: border-box; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--slate); cursor: pointer; transition: background-color .25s var(--ease), color .25s; }
.ht-sopen:hover { color: var(--ink); background: var(--mist); }
.ht-sopen:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ht-sopen svg { width: 18px; height: 18px; }
.ht-tabbar.is-searching { width: min(100%, 560px); }
.ht-tabbar.is-searching .ht-tabs, .ht-tabbar.is-searching .ht-sopen { display: none; }
.ht-sfield { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.ht-sfield[hidden] { display: none; }
.ht-sfield > svg { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--slate); pointer-events: none; }
.ht-sfield input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 48px 0 42px; border: 0; border-radius: 999px; background: var(--mist); font: 500 16px/1 Manrope, Arial, sans-serif; color: var(--ink); -webkit-appearance: none; appearance: none; }
.ht-sfield input::placeholder { color: var(--slate); opacity: 1; }
.ht-sfield input:focus { outline: 2px solid var(--violet); outline-offset: -2px; box-shadow: none !important; border: 0 !important; }
.ht-sfield input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ht-sclose { all: unset; box-sizing: border-box; position: absolute; right: 2px; width: 39px; height: 39px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.ht-sclose:hover { background: var(--lav); }
.ht-sclose:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.ht-sclose svg { width: 16px; height: 16px; }

.ht-status { margin: 12px 0 -4px; text-align: center; font-size: 14px; color: var(--slate); }
.ht-status[hidden] { display: none; }
.ht-status b { color: var(--ink); }

/* Oct 27 night (Krish call t=480..600 + AK; task HOWTO-OBJECTIONS): ONE guide per row, in the /library card language so the two
   pages read as one system (white card, 1px #E6E8EF border, 20px radius, lavender type pill, outline ink pill button).
   Preview LEFT (16:9): a video's YouTube thumbnail with the gold play button, or a demo's "where it happens" tile (real app logo or
   app glyph on the group's tint, gold click badge). Text RIGHT: bold "How to ..." title, one short line, the type pill.
   Compact and the same size on every row (preview 208x117 at desktop). Phones stack: preview on top, text below.
   Borrowed: Webflow University lesson rows (play mark + title + length, one per line), YouTube / Loom list results
   (thumbnail left, title and one line right), HubSpot Academy ("type · length" meta and a filter row that narrows the list),
   Intercom Help collections (group title + count, then a clean list). Concentric radii: card 20 - inset 12 = media 8. */
.ht-lib { padding: 0 0 clamp(40px, 5vw, 56px); }
.ht-shell--rows { max-width: 1040px; }
.ht-group[hidden] { display: none !important; }
.ht-group { padding-top: 40px; }
.ht-ghead { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.ht .ht-gh { display: flex; align-items: center; gap: 12px; margin: 0; font: 700 24px/1.2 var(--disp); letter-spacing: -.02em; text-align: left; }
.ht-gmark { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.ht-gmark img { width: 36px; height: 36px; border-radius: 50%; display: block; }
.ht-gmark--glyph { color: var(--ink); }
.ht .ht-gmark--glyph svg { width: 28px; height: 28px; }
.ht-gcount { flex: none; margin-left: auto; font: 700 14px/1 Manrope, Arial, sans-serif; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Oct 27 late (KRISH-OCT27-FRAMES correction d): Krish rejected the /library/videos card grid ("this UI is stupid"), so the rows drop
   the Library card language. Each guide is a plain full-width row with no box: preview LEFT, a hairline column rule (his sketch draws
   one line between the video column and the text), then the bold title, one line and the meta pill. Rows are split by thin dividers.
   The rule and the dividers meet, so the list reads as one clean two-column index. Same height on every row (the preview sets it).
   Borrowed: YouTube search results and Loom's library list (thumbnail left, title + one line right, no card), Webflow University
   lesson lists (dividers, type . length meta), Apple Support video lists (hairline rules, no boxes). */
.ht-rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.ht-item { position: relative; display: flex; align-items: stretch; gap: 0; border-top: 1px solid var(--line); touch-action: manipulation; }
.ht-item[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ht-item:hover .ht-play, .ht-item:hover .ht-click { transform: scale(1.08); }
  .ht-item:hover .ht-open { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
}
.ht-item:active .ht-media { transform: scale(.98); }
.ht-media { transition: transform 120ms ease-out; }
/* The title link covers the whole row; one focus ring around the row, drawn inside its edge */
.ht-open { all: unset; cursor: pointer; }
.ht-open::after { content: ""; position: absolute; inset: 0; border-radius: 12px; z-index: 1; }
.ht .ht-open:focus-visible { outline: none !important; box-shadow: none !important; }
.ht-open:focus-visible::after { outline: 2px solid var(--violet); outline-offset: -2px; box-shadow: inset 0 0 0 5px rgba(255,198,30,.55); }

/* Preview, left */
.ht-media { position: relative; flex: none; align-self: center; width: 224px; margin: 16px 24px 16px 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--mist); }
.ht-media--cream { background: var(--cream); }
.ht-media--gold { background: var(--gold-3); }
.ht-media--video { background: var(--ink); }
.ht-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
/* Play sits in the corner (the demo click badge's spot), never over the text printed on the thumbnail */
.ht-play { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); box-shadow: var(--sh-sm); transition: transform 200ms var(--ease); }
.ht-play svg { width: 16px; height: 16px; margin-left: 2px; }
.ht-app { position: relative; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: var(--sh-sm), 0 0 0 1px rgba(17,10,51,.06); }
.ht-app > svg { width: 28px; height: 28px; }
.ht-app > img { width: 30px; height: 30px; object-fit: contain; }
.ht-click { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--ink); box-shadow: var(--sh-sm); transition: transform 200ms var(--ease); }
.ht-click svg { width: 14px; height: 14px; }

/* Text, right */
.ht-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 16px 0 16px 24px; border-inline-start: 1px solid var(--line); }
.ht .ht-t { font: 700 20px/1.25 var(--disp); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ht-t mark { background: var(--gold-3); color: inherit; border-radius: 4px; padding: 0 2px; }
.ht-line { max-width: 75ch; font: 400 16px/1.5 Manrope, Arial, sans-serif; color: var(--slate); }
/* Type pill = /library's type label (lavender, ink, Manrope 700) */
.ht-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 6px 12px; border-radius: 999px; background: var(--lav); font: 700 13px/1 Manrope, Arial, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-meta svg { flex: none; width: 12px; height: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .ht-rows.is-filtering .ht-item:not([hidden]) { animation: ht-fade .2s var(--ease); }
}
@keyframes ht-fade { from { opacity: 0; } to { opacity: 1; } }

/* Zero results */
.ht-empty { margin: 32px auto 0; max-width: 560px; text-align: center; padding: 28px 24px; border-radius: 24px; background: var(--mist); }
.ht-empty[hidden] { display: none; }
.ht .ht-empty h2 { font: 700 22px/1.25 var(--disp); }
.ht-empty p { margin-top: 8px; color: var(--slate); line-height: 1.55; }
.ht-empty__try { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ht-empty__try button { height: 40px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font: 700 14px/1 Manrope, Arial, sans-serif; color: var(--ink); cursor: pointer; }
.ht-empty__try button:hover { border-color: var(--ink); }
.ht-empty__try button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ht-empty a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Every product, one line */
.ht-more { margin: clamp(28px, 3.4vw, 40px) auto 0; max-width: 760px; text-align: center; font-size: 15px; line-height: 1.7; color: var(--slate); }
.ht-more a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(17,10,51,.3); }
.ht-more a:hover { text-decoration-color: var(--ink); }

/* Viewer: the demo or video, large, in place */
.ht-viewer { padding: 0; border: 0; background: transparent; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; inset: 0; display: none; place-items: center; color: var(--ink); }
.ht-viewer[open] { display: grid; overscroll-behavior: contain; }
.ht-viewer::backdrop { background: rgba(17,10,51,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ht-vbox { width: min(1200px, calc(100vw - 32px)); height: min(880px, calc(100dvh - 32px)); display: flex; flex-direction: column; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--sh-lg); }
.ht-viewer.is-video .ht-vbox { height: auto; }
@media (prefers-reduced-motion: no-preference) { .ht-viewer[open] .ht-vbox { animation: ht-in .24s var(--ease); } }
@keyframes ht-in { from { opacity: 0; transform: scale(.98) translateY(8px); } to { opacity: 1; transform: none; } }
.ht-vhead { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.ht-vtitle { flex: 1 1 auto; min-width: 0; }
.ht .ht-vtitle h2 { font: 700 18px/1.25 var(--disp); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-vtitle p { margin-top: 2px; font-size: 13px; color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-vnew { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); font: 700 14px/1 Manrope, Arial, sans-serif; color: var(--ink) !important; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.ht-vnew:hover { background: var(--ink); color: #fff !important; }
.ht-vnew:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ht-vnew svg { width: 14px; height: 14px; }
.ht-vx { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform .16s var(--ease), background-color .15s; }
.ht-vx:hover { background: var(--lav); }
.ht-vx:active { transform: scale(.96); }
.ht-vx:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ht-vframe { position: relative; flex: 1 1 auto; min-height: 0; background: var(--mist); }
.ht-viewer.is-video .ht-vframe { flex: none; aspect-ratio: 16 / 9; max-height: calc(100dvh - 120px); background: var(--ink); }
.ht-vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ht-vload { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--slate); }
.ht-viewer.is-video .ht-vload { color: var(--lav); }
.ht-vload[hidden] { display: none; }
html.ht-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { .ht-media, .ht-item:active .ht-media, .ht-play, .ht-click { transition: none; transform: none; } }

/* Tablets and small laptops: the preview shrinks a step */
@media (max-width: 899px) {
  .ht-media { width: 176px; margin-right: 20px; }
  .ht-copy { padding-left: 20px; }
}
@media (max-width: 767px) {
  .ht-hero { padding: 92px 0 4px; }
  .ht-tabs-bar { padding-top: 16px; }
  .ht .ht-h1 { letter-spacing: -.045em; }
  .ht-lead { font-size: 16px; margin-top: 8px; }
  .ht-tabbar { border-radius: 18px; }
  .ht-tab { min-height: 44px; padding: 0 12px; }
  .ht-sopen { width: 44px; height: 44px; border-radius: 14px; }
  .ht-sfield input { height: 44px; }
  .ht-group { padding-top: 28px; }
  .ht .ht-gh { font-size: 21px; }
  .ht-gmark, .ht-gmark img { width: 32px; height: 32px; }
}
/* Phones: each row stacks, preview on top (full width), text below; the column rule goes, the dividers stay */
@media (max-width: 640px) {
  .ht-item { flex-direction: column; align-items: stretch; padding: 16px 0; }
  .ht-media { width: 100%; margin: 0; aspect-ratio: 2 / 1; border-radius: 12px; }   /* 2:1, not 16:9: one size for every row, no tall empty demo tiles */
  .ht-copy { gap: 6px; padding: 12px 0 0; border-inline-start: 0; }
  .ht .ht-t { font-size: 19px; text-wrap: pretty; }
  .ht-line { font-size: 15px; }
}
@media (max-width: 520px) {
  .ht { --nav-b: 50px; }
  .ht-vhead { padding: 8px 8px 8px 16px; gap: 8px; }
  .ht-vnew { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .ht-vnew span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ht-vbox { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 20px; }
}