/*
 * The homepage after Sana Learn (src/pages/home-new.tsx).
 *
 * The page is white and quiet, as Sana's is: black type at a medium weight,
 * centred section heads, a sand band now and then (#F6F5F4), grey tiles
 * (#F7F7F7) with 32px corners, small black pill buttons, hairline lists. The
 * only colour is the product — the courses, drawn in their own tones: the
 * rotating word, the floating pieces, the course on the tablet, the tiles.
 * Those keep CourseFlow's four tones as variables (previewCourses.ts
 * lookVars: --b-* bold, --pa-* paper, --i-* ink, --po-* pop); a `t-*` class
 * turns them into a local --bg / --tx / --ac / --on.
 *
 * Every rule is scoped under `.fh`, and rules that override sb.css under
 * `.sb .fh` — dia.css's `.dh button` reset (0,1,1) beats a bare class.
 */

.fh {
  --fh-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --fh-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fh-ink: #000;
  --fh-ink-2: #464646;
  --fh-ink-3: #8a8a8a;
  --fh-sand: #f6f5f4;
  --fh-card: #f7f7f7;
  --fh-hair: rgba(10, 10, 10, 0.09);
  --fh-blue: #2238f2;
  --fh-r: 32px;
  /* what parts written against a tone read on the plain page */
  --bg: #fff;
  --tx: #000;
  --mut: #5f5f5f;
  --line: var(--fh-hair);
  --ac: #000;
  --on: #fff;
  background: #fff;
  color: var(--fh-ink);
  font-family: var(--fh-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.fh *,
.fh *::before,
.fh *::after {
  box-sizing: border-box;
}

/* ── Tones ─────────────────────────────────────────────────────────────── */

.fh .t-bold {
  --bg: var(--b-bg);
  --tx: var(--b-text);
  --ac: var(--b-accent);
  --on: var(--b-on);
}
.fh .t-paper {
  --bg: var(--pa-bg);
  --tx: var(--pa-text);
  --ac: var(--pa-accent);
  --on: var(--pa-on);
}
.fh .t-ink {
  --bg: var(--i-bg);
  --tx: var(--i-text);
  --ac: var(--i-accent);
  --on: var(--i-on);
}
.fh .t-pop {
  --bg: var(--po-bg);
  --tx: var(--po-text);
  --ac: var(--b-bg);
  --on: var(--po-bg);
}
.fh .t-bold,
.fh .t-paper,
.fh .t-ink,
.fh .t-pop {
  --mut: color-mix(in srgb, var(--tx) 72%, var(--bg));
  --line: color-mix(in srgb, var(--tx) 12%, transparent);
  background: var(--bg);
  color: var(--tx);
  transition: background-color 0.5s var(--fh-ease), color 0.5s var(--fh-ease);
}

/* Buttons on each tone's accent, as the course's step button. */
.fh .on-bold {
  background: var(--b-accent);
  color: var(--b-on);
}
.fh .on-paper {
  background: var(--pa-accent);
  color: var(--pa-on);
}
.fh .on-ink {
  background: var(--i-accent);
  color: var(--i-on);
}
.fh .on-pop {
  background: var(--po-text);
  color: var(--po-bg);
}

.fh .fh-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Page ──────────────────────────────────────────────────────────────── */

.fh .fh-wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.fh .fh-sec {
  position: relative;
  padding-block: clamp(88px, 11vw, 150px);
}
.fh .fh-sec.tight {
  padding-block: clamp(64px, 8vw, 110px);
}
.fh .fh-sec.sand {
  background: var(--fh-sand);
}
.fh .fh-kicker {
  display: inline-block;
  color: var(--fh-ink);
  font-size: 15px;
  font-weight: 500;
}
.fh .fh-h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0 0;
  font-family: var(--fh-display);
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.042em;
}
.fh .fh-h1-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.04em 0.24em;
}
.fh .fh-h2 {
  margin: 14px 0 0;
  font: 500 clamp(34px, 4.2vw, 56px)/1.04 var(--fh-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.fh .fh-h2.left {
  margin-top: 0;
  text-align: left;
}
.fh .fh-lede {
  max-width: 600px;
  margin: 22px auto 0;
  color: var(--fh-ink-2);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}
.fh .fh-head {
  max-width: 900px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}

/* the rotating word (TextRotate) */
.fh .fh-rotate {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 0.03em 0.26em 0.07em;
  border-radius: 0.22em;
  white-space: nowrap;
  transition: background-color 0.45s var(--fh-ease), color 0.45s var(--fh-ease);
}
.fh .fh-rotate-word {
  display: inline-flex;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.fh .fh-rotate-ch {
  display: inline-block;
}

/* buttons */
.fh .fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font: 500 15.5px/1 var(--fh-sans);
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.2s var(--fh-ease), box-shadow 0.2s;
}
.fh .fh-btn:hover {
  background: #262626;
  transform: translateY(-1px);
}
.fh .fh-btn.ghost {
  background: #fff;
  color: #000;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.fh .fh-btn.ghost:hover {
  box-shadow: inset 0 0 0 1px #000;
}
.fh .fh-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #000;
  font-size: 15.5px;
  font-weight: 500;
}
.fh .fh-textlink svg {
  transition: transform 0.25s var(--fh-ease);
}
.fh .fh-textlink:hover svg {
  transform: translateX(3px);
}
.fh .fh-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 30px;
}
.fh .fh-cta.left {
  justify-content: flex-start;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.fh .fh-hero {
  position: relative;
  padding: clamp(64px, 8vw, 112px) 0 clamp(36px, 4vw, 56px);
}
.fh .fh-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 980px;
  text-align: center;
}
.fh .fh-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--fh-card);
  box-shadow: inset 0 0 0 1px var(--fh-hair);
  color: var(--fh-ink-2);
  font-size: 13.5px;
}
.fh .fh-badge i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #12a150;
  box-shadow: 0 0 0 3px rgba(18, 161, 80, 0.18);
}
.fh .fh-trust {
  margin: 22px 0 0;
  color: var(--fh-ink-3);
  font-size: 13.5px;
}
.fh .fh-trust a {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.25);
  text-underline-offset: 3px;
}

/* course pieces round the headline (Floating) */
.fh .fh-floats {
  position: absolute;
  inset: 0;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  pointer-events: none;
}
.fh .fh-float {
  position: absolute;
  will-change: transform;
}
.fh .p1 {
  top: 4%;
  left: 2.5%;
}
.fh .p2 {
  top: 58%;
  left: 5%;
}
.fh .p3 {
  top: 80%;
  left: 13%;
}
.fh .p4 {
  top: 3%;
  right: 3%;
}
.fh .p5 {
  top: 50%;
  right: 3%;
}
.fh .p6 {
  top: 79%;
  right: 13%;
}
.fh .fh-piece {
  --r: 0deg;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 22px;
  background: #fff;
  color: #000;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 26px 50px -22px rgba(0, 0, 0, 0.3);
  animation: fh-bob 6.5s ease-in-out infinite;
}
.fh .p1 .fh-piece {
  --r: -4deg;
}
.fh .p2 .fh-piece {
  --r: 3deg;
  animation-delay: -1.6s;
}
.fh .p3 .fh-piece {
  --r: -3deg;
  animation-delay: -3.1s;
}
.fh .p4 .fh-piece {
  --r: 5deg;
  animation-delay: -0.8s;
}
.fh .p5 .fh-piece {
  --r: -2deg;
  animation-delay: -2.4s;
}
.fh .p6 .fh-piece {
  --r: 4deg;
  animation-delay: -4s;
}
.fh .fh-piece .fh-pv-eyebrow {
  gap: 6px;
  font-size: 11.5px;
}
.fh .fh-piece .fh-pv-eyebrow::before {
  width: 5px;
  height: 5px;
}
.fh .fh-piece.t-bold {
  background: var(--bg);
  color: var(--tx);
}
.fh .fh-piece.cover {
  width: 220px;
}
.fh .fh-piece.cover b {
  font: 600 23px/1.02 var(--fh-display);
  letter-spacing: -0.035em;
}
.fh .fh-piece.cover em {
  font-style: normal;
  color: var(--ac);
}
.fh .fh-piece-meta {
  font-size: 11.5px;
  opacity: 0.7;
}
.fh .fh-piece.file {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 16px;
}
.fh .fh-piece-kind {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 40px;
  border-radius: 8px;
  color: #fff;
  font: 700 9.5px/1 var(--fh-sans);
  letter-spacing: 0.04em;
}
.fh .fh-piece.file > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fh .fh-piece.file b {
  font-size: 13px;
  font-weight: 600;
}
.fh .fh-piece small {
  color: var(--fh-ink-3);
  font-size: 11.5px;
}
.fh .fh-piece.stat {
  width: 158px;
  background: var(--po-bg);
  color: var(--po-text);
}
.fh .fh-piece.stat b {
  color: var(--b-bg);
  font: 600 50px/0.9 var(--fh-display);
  letter-spacing: -0.05em;
}
.fh .fh-piece.stat span {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
}
.fh .fh-piece.flash {
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 172px;
  height: 112px;
  background: var(--b-bg);
  color: var(--b-text);
}
.fh .fh-piece.flash small {
  color: inherit;
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.fh .fh-piece.flash b {
  font: 600 27px/1 var(--fh-display);
  letter-spacing: -0.04em;
}
.fh .fh-piece.quiz {
  width: 232px;
  gap: 7px;
}
.fh .fh-piece.quiz small {
  margin-bottom: 2px;
  font-weight: 600;
}
.fh .fh-piece .opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  font-size: 12.5px;
  font-weight: 500;
}
.fh .fh-piece .opt.right {
  background: #f3f5ff;
  box-shadow: inset 0 0 0 1.5px var(--fh-blue);
  color: var(--fh-blue);
}
.fh .fh-piece.seal {
  align-items: center;
  width: 164px;
  text-align: center;
}
.fh .fh-piece.seal > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--po-bg);
  color: var(--po-text);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--po-bg) 16%, transparent);
}
.fh .fh-piece.seal b {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
}

/* ── The tablet (ContainerScroll) and the app on it ─────────────────────── */

.fh .fh-try {
  scroll-margin-top: var(--sb-top-h, 64px);
}
.sb .fh .tg {
  max-width: none;
  scroll-margin-top: var(--sb-top-h, 64px);
}
.fh .fh-scroll {
  padding: 0 clamp(12px, 3vw, 40px) clamp(48px, 6vw, 88px);
  perspective: 1200px;
}
.fh .fh-device {
  max-width: 1040px;
  margin: 0 auto;
  padding: 11px;
  border-radius: 36px;
  background: #0e0e10;
  box-shadow:
    inset 0 0 0 1px #2c2c30,
    0 9px 20px rgba(0, 0, 0, 0.18),
    0 37px 37px rgba(0, 0, 0, 0.16),
    0 84px 50px rgba(0, 0, 0, 0.09),
    0 149px 60px rgba(0, 0, 0, 0.03);
  transform-origin: 50% 0%;
  will-change: transform;
}
.fh .fh-device-screen {
  overflow: hidden;
  border-radius: 26px;
  background: #fff;
}
/* The builder's own steps after "Build", drawn on the screen itself. */
.sb .fh .fh-device .tg-builder,
.sb .fh .fh-device .tg-capped {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--sb-ink);
}
.sb .fh .tg-modal {
  color: var(--sb-ink);
}

.fh .fh-app {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  background: #fff;
  text-align: left;
}
.fh .fh-in {
  --tx: #000;
  --mut: #5f5f5f;
  --ac: #000;
  --on: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px;
  color: #000;
  transition: background-color 0.25s;
}
.fh .fh-in[data-shake] {
  animation: fh-shake 0.4s;
}
.fh .fh-app.is-dragging .fh-in {
  background: #fafafa;
}
.fh .fh-in-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.fh .fh-in-head b {
  font: 500 22px/1.1 var(--fh-display);
  letter-spacing: -0.025em;
}
.fh .fh-in-head span {
  color: var(--fh-ink-3);
  font-size: 12.5px;
}
/*
 * The drop tile, after 21st.dev's file uploads: a faint grid that fades out
 * from the icon (Aceternity), an icon tile that lifts off a dashed outline
 * on hover (Aceternity), and a beam running round the border in the six
 * course colours (Magic UI's border beam) — faster, and lit all round, while
 * a file is over the screen.
 */
@property --fh-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.fh .fh-drop {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  padding: 28px 24px;
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.35s var(--fh-ease);
}
.fh .fh-drop:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
}
.fh .fh-drop.over {
  transform: scale(1.015);
}
.fh .fh-drop-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.055) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 42%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 42%, #000 10%, transparent 72%);
  transition: opacity 0.3s;
}
.fh .fh-drop.has .fh-drop-grid {
  opacity: 0.5;
}
.fh .fh-drop-beam {
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--fh-angle),
    transparent 0deg 250deg,
    #2238f2 280deg,
    #ddff55 305deg,
    #d4451a 325deg,
    #f6c7d8 342deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fh-beam 5s linear infinite;
  pointer-events: none;
}
.fh .fh-drop.has .fh-drop-beam {
  opacity: 0;
  transition: opacity 0.3s;
}
.fh .fh-drop.over .fh-drop-beam {
  padding: 2px;
  background: conic-gradient(from var(--fh-angle), #2238f2, #ddff55, #d4451a, #f6c7d8, #9fdcf5, #eed33a, #2238f2);
  animation-duration: 1.4s;
}
.fh .fh-drop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-align: center;
}
.fh .fh-drop-icon {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
}
.fh .fh-drop-icon > i {
  position: absolute;
  inset: 0;
  border: 1.5px dashed rgba(0, 0, 0, 0.3);
  border-radius: 18px;
  opacity: 0;
  transition: opacity 0.3s;
}
.fh .fh-drop-icon > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 12px 26px -10px rgba(0, 0, 0, 0.35);
  color: #000;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s, color 0.2s;
}
.fh .fh-drop:hover .fh-drop-icon > i,
.fh .fh-drop.over .fh-drop-icon > i {
  opacity: 1;
}
.fh .fh-drop:hover .fh-drop-icon > span {
  transform: translate(9px, -9px);
}
.fh .fh-drop.over .fh-drop-icon > span {
  background: #000;
  color: #fff;
  transform: translate(9px, -9px) scale(1.06);
}
.fh .fh-drop.over .fh-drop-icon svg {
  animation: fh-nudge 0.9s var(--fh-ease) infinite;
}
.fh .fh-drop-t {
  font: 500 clamp(18px, 1.7vw, 22px)/1.2 var(--fh-display);
  letter-spacing: -0.02em;
}
.fh .fh-drop-d {
  color: var(--fh-ink-3);
  font-size: 14px;
}
.fh .fh-drop-d u {
  color: #000;
  text-underline-offset: 3px;
}
.fh .fh-drop-kinds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.fh .fh-drop-kinds i {
  padding: 4px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--k) 10%, #fff);
  color: var(--k);
  font: 700 10px/1 var(--fh-sans);
  font-style: normal;
  letter-spacing: 0.04em;
}
.fh .fh-drop-kinds em {
  margin-left: 4px;
  color: var(--fh-ink-3);
  font-size: 12px;
  font-style: normal;
}

/* the source, once there is one */
.fh .fh-src {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  min-width: 0;
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 34px -18px rgba(0, 0, 0, 0.35);
}
.fh .fh-src-kind {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 48px;
  border-radius: 9px;
  color: #fff;
  font: 700 10px/1 var(--fh-sans);
  letter-spacing: 0.04em;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.5);
}
.fh .fh-src-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fh .fh-src-copy b {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fh .fh-src-copy span {
  overflow: hidden;
  color: var(--fh-ink-3);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fh .fh-src-ok {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e7f6ec;
  color: #137a3e;
  font-size: 12px;
  font-weight: 500;
}
.fh .fh-src-x {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--fh-ink-3);
}
.fh .fh-src-x:hover {
  background: var(--fh-card);
  color: #000;
}

/* "or" */
.fh .fh-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0;
  color: var(--fh-ink-3);
  font-size: 12px;
}
.fh .fh-or::before,
.fh .fh-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fh-hair);
}

/* the one field: a link, some text or a topic */
.fh .fh-ask {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 50px;
  padding: 14px 10px 12px 16px;
  border-radius: 16px;
  background: #fafafa;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s, background-color 0.2s;
}
.fh .fh-ask:focus-within {
  background: #fff;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 4px rgba(0, 0, 0, 0.05);
}
.fh .fh-ask > svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--fh-ink-3);
  transition: color 0.2s;
}
.fh .fh-ask.typed > svg {
  color: #000;
}
.fh .fh-ask textarea {
  flex: 1;
  min-width: 0;
  min-height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  font: 400 15px/1.45 var(--fh-sans);
  outline: none;
  resize: none;
}
.fh .fh-ask textarea::placeholder {
  color: var(--fh-ink-3);
}
.fh .fh-ask.off {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--fh-hair);
}
.fh .fh-ask.off textarea {
  cursor: not-allowed;
}
.fh .fh-ask-reads {
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  padding: 4px 9px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the same field once your own file is in: details about the company */
.fh .fh-or.is-details {
  color: var(--fh-ink-2);
}
.fh .fh-ask.is-details {
  background: #fff;
}
.fh .fh-ask.is-details textarea {
  min-height: 44px;
}
.fh .fh-ask-count {
  flex-shrink: 0;
  align-self: flex-end;
  color: var(--fh-ink-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* chips: the audience, on one line that scrolls */
.fh .fh-aud {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -24px;
  padding: 2px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 36px), transparent);
}
.fh .fh-aud::-webkit-scrollbar {
  display: none;
}
.fh .fh-aud-l {
  flex-shrink: 0;
  margin-right: 2px;
  color: var(--fh-ink-3);
  font-size: 12.5px;
}
.fh .fh-chip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.13);
  color: #000;
  font: 400 12.5px/1 var(--fh-sans);
  white-space: nowrap;
  transition: background-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.fh .fh-chip:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.fh .fh-chip.on {
  background: #000;
  box-shadow: none;
  color: #fff;
}
.fh .fh-chip.dashed {
  background: transparent;
  box-shadow: none;
  border: 1px dashed rgba(0, 0, 0, 0.25);
  color: var(--fh-ink-3);
}
.fh .fh-aud-in {
  flex-shrink: 0;
  width: 150px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font: 400 12.5px/1 var(--fh-sans);
  outline: none;
}

/* build */
.fh .fh-go {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 50px;
  overflow: hidden;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font: 500 15.5px/1 var(--fh-sans);
  transition: background-color 0.2s, transform 0.2s var(--fh-ease);
}
.fh .fh-go:hover {
  background: #1f1f1f;
  transform: translateY(-1px);
}
/* ready: a shimmer runs across the button (21st "shimmer button") */
.fh .fh-go.ready::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: fh-sweep 2.4s var(--fh-ease) infinite;
}
.fh .fh-go kbd {
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
  font: 500 11px/1 var(--fh-sans);
}
.fh .fh-error {
  margin: -4px 0 0;
  color: #c62828;
  font-size: 13px;
  font-weight: 500;
}

/* an example per look: a small cover, its source and its look */
.fh .fh-examples {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.fh .fh-examples-l {
  color: var(--fh-ink-3);
  font-size: 12.5px;
}
.fh .fh-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
}
.fh .fh-ex {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 0;
  text-align: left;
}
.fh .fh-ex-cover {
  position: relative;
  display: block;
  height: 74px;
  padding: 9px 10px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
}
.fh .fh-ex-cover b {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  overflow: hidden;
  font: 600 11.5px/1.12 var(--fh-display);
  letter-spacing: -0.02em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.fh .fh-ex-cover em {
  font-style: normal;
  color: var(--ac);
}
.fh .fh-ex-cover i {
  position: absolute;
  right: -12px;
  bottom: -14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--ac);
  opacity: 0.9;
  transition: transform 0.45s var(--fh-ease);
}
.fh .fh-ex:hover .fh-ex-cover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 14px 24px -14px rgba(0, 0, 0, 0.45);
  transform: translateY(-3px) rotate(-1.5deg);
}
.fh .fh-ex:hover .fh-ex-cover i {
  transform: scale(1.35);
}
.fh .fh-ex.on .fh-ex-cover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #000;
}
.fh .fh-ex-meta {
  display: flex;
  gap: 5px;
  overflow: hidden;
  color: var(--fh-ink-3);
  font-size: 11.5px;
  white-space: nowrap;
}
.fh .fh-ex-meta b {
  color: #000;
  font-weight: 500;
}

/* what you get */
.fh .fh-out {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px 20px 22px;
  background: var(--fh-sand);
}
.fh .fh-out-l {
  color: var(--fh-ink-3);
  font-size: 12.5px;
}
.fh .fh-out-l b {
  color: #000;
  font-weight: 500;
}

/* ── The course preview ─────────────────────────────────────────────────── */

.fh .fh-pv {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(540px, 44vw, 640px);
  overflow: hidden;
  border-radius: 26px;
  background: var(--pa-bg);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.55);
  isolation: isolate;
}
.fh .fh-pv-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: color-mix(in srgb, #fff 70%, var(--pa-bg));
  color: var(--pa-text);
  border-bottom: 1px solid color-mix(in srgb, var(--pa-text) 8%, transparent);
}
.fh .fh-pv-bar-t {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.fh .fh-pv-bar-t b,
.fh .fh-pv-bar-t span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fh .fh-pv-bar-t b {
  font-size: 12.5px;
  font-weight: 650;
}
.fh .fh-pv-bar-t span {
  font-size: 11px;
  color: color-mix(in srgb, var(--pa-text) 60%, transparent);
}
.fh .fh-pv-pct {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fh .fh-pv-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  background: var(--pa-accent);
  transition: width 0.6s var(--fh-ease);
}
.fh .fh-pv-label {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 28px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 10, 24, 0.74);
  color: #fff;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.fh .fh-pv-label > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.fh .fh-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--b-accent);
  animation: fh-blink 1.2s ease-in-out infinite alternate;
}
.fh .fh-pv-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
}
.fh .fh-pv-scroll::-webkit-scrollbar {
  display: none;
}
.fh .fh-pv-page {
  container-type: inline-size;
}

.fh .fh-pv-sec {
  position: relative;
  padding: 9cqi 7cqi;
}
.fh .fh-pv-sec:last-child {
  padding-bottom: 18cqi;
}
.fh .fh-pv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqi;
  max-width: 100%;
  font: 600 max(11px, 2cqi)/1.2 var(--fh-sans);
}
.fh .fh-pv-eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: max(5px, 1cqi);
  height: max(5px, 1cqi);
  border-radius: 2px;
  background: var(--ac);
}
.fh .fh-pv-eyebrow.plain::before {
  display: none;
}

/* cover */
.fh .fh-pv-cover {
  padding-top: 8cqi;
  padding-bottom: 6cqi;
}
.fh .fh-pv-cover .fh-pv-eyebrow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.fh .fh-pv-cover .fh-pv-eyebrow::before {
  display: inline-block;
  margin-right: 1.2cqi;
  vertical-align: 0.12em;
}
.fh .fh-pv-cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 5cqi;
}
.fh .fh-pv-title {
  margin: 2.6cqi 0 0;
  font: 600 7.2cqi/0.98 var(--fh-display);
  letter-spacing: -0.045em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  animation: fh-rise 0.6s var(--fh-ease) both;
}
.fh .fh-pv-title em,
.fh .fh-pv-h em {
  font-style: normal;
  color: var(--ac);
}
.fh .fh-pv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 1.4em;
  margin-top: 3cqi;
  font-size: max(10.5px, 1.9cqi);
  color: var(--mut);
}
.fh .fh-pv-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.fh .fh-pv-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 3cqi;
  background: var(--i-bg);
}
.fh .fh-pv-art span {
  position: absolute;
  display: block;
}
.fh .fh-pv-art .a1 {
  top: -14%;
  right: -24%;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--b-accent);
}
.fh .fh-pv-art .a2 {
  left: 0;
  bottom: 0;
  width: 66%;
  aspect-ratio: 1;
  border-radius: 0 100% 0 0;
  background: var(--pa-bg);
}
.fh .fh-pv-art .a3 {
  top: 14%;
  left: 12%;
  width: 34%;
  height: 26%;
  background: repeating-linear-gradient(90deg, var(--pa-accent) 0 3px, transparent 3px 9px);
}
.fh .fh-pv-art .a4 {
  right: 14%;
  bottom: 12%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--po-bg);
  box-shadow: 0 0 0 4px var(--i-bg), 0 0 0 6px var(--po-bg);
}
.fh [data-on] .fh-pv-art .a1 {
  animation: fh-float 5s ease-in-out infinite;
}
.fh [data-on] .fh-pv-art .a4 {
  animation: fh-float 4s ease-in-out infinite reverse;
}
.fh .fh-pv-lessons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4cqi;
  margin: 6cqi 0 0;
  padding: 0;
  list-style: none;
}
.fh .fh-pv-lessons li {
  display: flex;
  align-items: center;
  gap: 1.6cqi;
  min-width: 0;
  padding: 2.1cqi 2.4cqi;
  border-radius: 2.4cqi;
  background: color-mix(in srgb, var(--tx) 9%, transparent);
  font-size: max(10.5px, 1.85cqi);
}
.fh .fh-pv-lessons li.open {
  background: color-mix(in srgb, var(--tx) 17%, transparent);
}
.fh .fh-pv-lessons .n {
  font-weight: 650;
  opacity: 0.7;
}
.fh .fh-pv-lessons .t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fh .fh-pv-lessons .m {
  opacity: 0.7;
  white-space: nowrap;
}
.fh .fh-pv-lessons svg {
  flex-shrink: 0;
  opacity: 0.55;
}

/* "StudyBits AI" at the end of a title still to be written */
.fh .fh-ai {
  position: relative;
  display: inline-block;
  width: 3px;
  height: 0.84em;
  margin-left: 0.08em;
  vertical-align: -0.06em;
}
.fh .fh-ai::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--ac);
  animation: fh-caret 1s steps(1) infinite;
}
.fh .fh-ai-flag {
  position: absolute;
  top: 0;
  left: calc(100% + 5px);
  padding: 4px 7px;
  border-radius: 0 6px 6px 6px;
  background: var(--ac);
  color: var(--on);
  font: 650 max(9px, 1.5cqi)/1 var(--fh-sans);
  letter-spacing: 0;
  white-space: nowrap;
}

/* sections */
.fh .fh-pv-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fh .fh-pv-kicker {
  color: var(--mut);
  font-size: max(10.5px, 1.9cqi);
  font-weight: 600;
}
.fh .fh-pv-h {
  width: 100%;
  margin: 2.4cqi 0 0;
  font: 600 6.2cqi/1 var(--fh-display);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.fh .fh-pv-h.left {
  text-align: left;
}
.fh .fh-pv-h.sm {
  font-size: 4.4cqi;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.fh .fh-pv-lede {
  width: 100%;
  max-width: 46ch;
  margin: 2.6cqi auto 0;
  color: var(--mut);
  font-size: max(11px, 2.2cqi);
  line-height: 1.5;
}
.fh .fh-pv-in {
  margin-top: 5cqi;
  color: var(--ac);
  font-size: max(9px, 1.5cqi);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fh .fh-pv-parts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2cqi;
  margin-top: 1.8cqi;
}
.fh .fh-pv-parts span {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 1.4cqi 2.4cqi;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tx) 9%, transparent);
  font-size: max(10px, 1.8cqi);
}
.fh .fh-pv-parts b {
  color: var(--ac);
  font-weight: 650;
}
.fh .fh-pv-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8cqi;
  margin-top: 4cqi;
}
.fh .fh-pv-cards.n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fh .fh-pv-card {
  display: flex;
  flex-direction: column;
  gap: 1.1cqi;
  padding: 3cqi;
  border-radius: 3cqi;
  background: color-mix(in srgb, var(--tx) 6%, var(--bg));
}
.fh .fh-pv-card b {
  color: var(--ac);
  font: 600 max(12px, 2.6cqi)/1.15 var(--fh-display);
  letter-spacing: -0.02em;
}
.fh .fh-pv-card span {
  color: var(--mut);
  font-size: max(10.5px, 1.9cqi);
  line-height: 1.4;
}
.fh .fh-pv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8cqi;
  margin-top: 4cqi;
}
.fh .fh-pv-stat {
  display: flex;
  flex-direction: column;
  gap: 0.8cqi;
  min-height: 24cqi;
  padding: 3.2cqi 3cqi;
  border-radius: 3cqi;
  background: var(--po-bg);
  color: var(--po-text);
}
.fh .fh-pv-stat b {
  margin-bottom: auto;
  padding-bottom: 2cqi;
  color: var(--b-bg);
  font: 600 7cqi/1 var(--fh-display);
  letter-spacing: -0.045em;
}
.fh .fh-pv-stat span {
  font-size: max(10.5px, 1.9cqi);
  font-weight: 650;
  line-height: 1.25;
}
.fh .fh-pv-stat small {
  font-size: max(9.5px, 1.6cqi);
  opacity: 0.7;
}
.fh [data-on] .fh-pv-card,
.fh [data-on] .fh-pv-stat {
  animation: fh-pop 0.55s var(--fh-ease) both;
}

/* flashcard */
.fh .fh-pv-flip {
  width: min(100%, 64cqi);
  margin-top: 3.4cqi;
  perspective: 1200px;
}
.fh .fh-pv-flip-in {
  position: relative;
  aspect-ratio: 16 / 9;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--fh-ease);
}
.fh [data-on] .fh-pv-flip-in {
  transform: rotateY(180deg);
  transition-delay: 1.1s;
}
.fh .fh-pv-flip:hover .fh-pv-flip-in {
  transform: rotateY(180deg);
  transition-delay: 0s;
}
.fh .fh-pv-flip .front,
.fh .fh-pv-flip .back,
.fh .fh-tile-flip .front,
.fh .fh-tile-flip .back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4cqi;
  padding: 4cqi;
  border-radius: 3.4cqi;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fh .fh-pv-flip .front,
.fh .fh-tile-flip .front {
  background: var(--b-bg);
  color: var(--b-text);
  box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--b-bg) 80%, transparent);
}
.fh .fh-pv-flip .back,
.fh .fh-tile-flip .back {
  background: #fff;
  color: var(--pa-text);
  box-shadow: inset 0 0 0 2px var(--pa-accent);
  transform: rotateY(180deg);
}
.fh .fh-pv-flip small,
.fh .fh-tile-flip small {
  font-size: max(9px, 1.5cqi);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.fh .fh-pv-flip .front b {
  font: 600 6.4cqi/1 var(--fh-display);
  letter-spacing: -0.04em;
}
.fh .fh-pv-flip .back span {
  font-size: max(11px, 2.4cqi);
  font-weight: 500;
  line-height: 1.45;
}

/* question */
.fh .fh-pv-options {
  display: flex;
  flex-direction: column;
  gap: 1.4cqi;
  margin-top: 3.4cqi;
}
.fh .fh-pv-options > span {
  display: flex;
  align-items: center;
  gap: 2cqi;
  padding: 2.3cqi 2.8cqi;
  border: 1.5px solid color-mix(in srgb, var(--tx) 13%, transparent);
  border-radius: 2.6cqi;
  background: color-mix(in srgb, var(--tx) 6%, transparent);
  font-size: max(11px, 2.1cqi);
  font-weight: 500;
  transition: background-color 0.4s, border-color 0.4s;
}
.fh .fh-pv-letter {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: max(20px, 4.4cqi);
  height: max(20px, 4.4cqi);
  border-radius: 999px;
  background: color-mix(in srgb, var(--tx) 13%, transparent);
  font-size: max(9.5px, 1.7cqi);
  font-style: normal;
  font-weight: 650;
  transition: background-color 0.4s, color 0.4s;
}
.fh .fh-pv-options svg {
  margin-left: auto;
  color: var(--ac);
  opacity: 0;
  transition: opacity 0.3s;
}
.fh [data-on] .fh-pv-options .right {
  border-color: var(--ac);
  background: color-mix(in srgb, var(--ac) 16%, transparent);
  transition-delay: 1s;
}
.fh [data-on] .fh-pv-options .right .fh-pv-letter {
  background: var(--ac);
  color: var(--on);
  transition-delay: 1s;
}
.fh [data-on] .fh-pv-options .right svg {
  opacity: 1;
  transition-delay: 1.1s;
}
.fh .fh-pv-why {
  margin: 2.4cqi 0 0;
  color: var(--mut);
  font-size: max(10.5px, 1.9cqi);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s var(--fh-ease);
}
.fh .fh-pv-why b {
  color: var(--ac);
}
.fh [data-on] .fh-pv-why {
  opacity: 1;
  transform: none;
  transition-delay: 1.4s;
}

/* recap */
.fh .fh-pv-recap {
  display: flex;
  flex-direction: column;
  gap: 1.6cqi;
  margin: 3.4cqi 0 0;
  padding: 0;
  list-style: none;
}
.fh .fh-pv-recap li {
  display: flex;
  align-items: center;
  gap: 2cqi;
  font-size: max(11px, 2.2cqi);
  font-weight: 550;
}
.fh .fh-pv-recap li > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: max(20px, 4.6cqi);
  height: max(20px, 4.6cqi);
  border-radius: 999px;
  background: var(--po-text);
  color: var(--po-bg);
}

/* the step button, as the learner sees it */
.fh .fh-pv-step {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  height: max(30px, 7cqi);
  margin-top: 4cqi;
  padding: 0 3.2cqi;
  border-radius: 999px;
  font: 600 max(11px, 2cqi)/1 var(--fh-sans);
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.45);
}
.fh .fh-pv-step svg {
  animation: fh-nudge 1.8s var(--fh-ease) infinite;
}

/* skeleton words */
.fh .fh-sk {
  position: relative;
  display: inline-block;
  max-width: 100%;
  height: 0.62em;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  vertical-align: middle;
}
.fh .fh-sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 24%, transparent), transparent);
  transform: translateX(-100%);
  animation: fh-shimmer 1.6s infinite;
}

/* a file over the builder */
.fh .fh-pv-dropmask {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--b-bg) 72%, transparent);
  color: var(--b-text);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity 0.25s;
}
.fh .fh-pv.is-dragging .fh-pv-dropmask {
  opacity: 1;
}
.fh .fh-pv-dropmask span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 30px;
  border: 2px dashed var(--b-accent);
  border-radius: 22px;
  font: 600 clamp(18px, 2vw, 24px)/1.15 var(--fh-display);
  letter-spacing: -0.02em;
}
/* ── Showcase ──────────────────────────────────────────────────────────── */

.fh .fh-show-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 4px max(clamp(16px, 4vw, 40px), calc((100% - 1240px) / 2 + 40px)) 8px;
  scroll-padding-inline: max(clamp(16px, 4vw, 40px), calc((100% - 1240px) / 2 + 40px));
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fh .fh-show-rail::-webkit-scrollbar {
  display: none;
}
.fh .fh-tile {
  flex: 0 0 clamp(272px, 30vw, 392px);
  margin: 0;
  scroll-snap-align: start;
}
.fh .fh-tile-pic {
  position: relative;
  aspect-ratio: 4 / 4.7;
  overflow: hidden;
  border-radius: var(--fh-r);
  container-type: inline-size;
}
.fh .fh-tile figcaption {
  max-width: 36ch;
  margin-top: 16px;
  color: var(--mut);
  font-size: 15px;
  line-height: 1.45;
}
.fh .fh-tile figcaption b {
  color: var(--tx);
  font-weight: 600;
}
.fh .fh-tile-sec {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 8cqi 7.5cqi;
}
.fh .fh-tile-sec.center {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.fh .fh-tile .fh-pv-eyebrow {
  gap: 2cqi;
  font-size: 3.5cqi;
}
.fh .fh-tile .fh-pv-eyebrow::before {
  width: 1.8cqi;
  height: 1.8cqi;
}
.fh .fh-tile-h {
  display: block;
  margin-top: 4cqi;
  font: 600 10.4cqi/0.98 var(--fh-display);
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.fh .fh-tile-h.sm {
  font-size: 8.4cqi;
}
.fh .fh-tile-h.xs {
  font-size: 6.6cqi;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.fh .fh-tile-h em {
  font-style: normal;
  color: var(--ac);
}
.fh .fh-tile-lessons,
.fh .fh-tile-stats,
.fh .fh-tile-choices,
.fh .fh-tile-quiz {
  display: flex;
  flex-direction: column;
  gap: 2cqi;
  margin-top: auto;
}
.fh .fh-tile-lessons span {
  display: flex;
  gap: 3cqi;
  padding: 3.4cqi 4cqi;
  border-radius: 4cqi;
  background: color-mix(in srgb, var(--tx) 10%, transparent);
  font-size: 3.6cqi;
  font-weight: 550;
}
.fh .fh-tile-lessons span.open {
  background: var(--ac);
  color: var(--on);
}
.fh .fh-tile-lessons b {
  opacity: 0.7;
}
.fh .fh-tile-stats span {
  display: flex;
  align-items: baseline;
  gap: 3cqi;
  padding: 3.2cqi 4.4cqi;
  border-radius: 4cqi;
  background: var(--po-bg);
  color: var(--po-text);
  font-size: 3.6cqi;
  font-weight: 550;
}
.fh .fh-tile-stats b {
  min-width: 17cqi;
  color: var(--b-bg);
  font: 600 8cqi/1 var(--fh-display);
  letter-spacing: -0.045em;
}
.fh .fh-tile-flip {
  width: 100%;
  margin: 6cqi 0 4cqi;
  perspective: 1200px;
}
.fh .fh-tile-flip > div {
  position: relative;
  aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
  animation: fh-autoflip 7s var(--fh-ease) infinite;
}
.fh .fh-tile-flip .front b {
  font: 600 11cqi/1 var(--fh-display);
  letter-spacing: -0.045em;
}
.fh .fh-tile-flip .back span {
  font-size: 4.2cqi;
  font-weight: 500;
  line-height: 1.4;
}
.fh .fh-tile-hint {
  font-size: 3.2cqi;
  opacity: 0.6;
}
.fh .fh-tile-choices span,
.fh .fh-tile-quiz span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqi;
  padding: 3.4cqi 4cqi;
  border-radius: 3.6cqi;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tx) 11%, transparent);
  font-size: 3.6cqi;
  font-weight: 550;
}
.fh .fh-tile-choices i {
  flex-shrink: 0;
  padding: 1.3cqi 2.4cqi;
  border-radius: 999px;
  font-size: 2.9cqi;
  font-style: normal;
  font-weight: 650;
}
.fh .fh-tile-choices .best {
  box-shadow: inset 0 0 0 2px var(--ac);
}
.fh .fh-tile-choices .best i {
  background: var(--ac);
  color: var(--on);
}
.fh .fh-tile-choices .ok i {
  background: color-mix(in srgb, var(--tx) 10%, transparent);
}
.fh .fh-tile-choices .poor i {
  background: #fdecec;
  color: #b42318;
}
.fh .fh-tile-quiz .right {
  background: color-mix(in srgb, var(--ac) 8%, #fff);
  box-shadow: inset 0 0 0 2px var(--ac);
  color: var(--ac);
}
.fh .fh-tile-btn {
  align-self: flex-start;
  margin-top: 4cqi;
  padding: 3cqi 6cqi;
  border-radius: 999px;
  background: var(--ac);
  color: var(--on);
  font-size: 3.6cqi;
  font-weight: 600;
}
.fh .fh-tile-steps {
  display: flex;
  flex-direction: column;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.fh .fh-tile-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3.4cqi;
  padding: 2.4cqi 0;
  color: var(--mut);
  font-size: 3.8cqi;
  font-weight: 550;
}
.fh .fh-tile-steps li > span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 7cqi;
  height: 7cqi;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tx) 12%, var(--bg));
  font-size: 3cqi;
  font-weight: 650;
}
.fh .fh-tile-steps li.done,
.fh .fh-tile-steps li.now {
  color: var(--tx);
}
.fh .fh-tile-steps li.done > span {
  background: var(--ac);
  color: var(--on);
}
.fh .fh-tile-steps li.now > span {
  box-shadow: 0 0 0 1.5px var(--ac);
  color: var(--ac);
}
.fh .fh-tile-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3.5cqi;
  top: calc(50% + 3.5cqi);
  width: 2px;
  height: calc(100% - 7cqi);
  background: color-mix(in srgb, var(--tx) 16%, transparent);
  transform: translateX(-50%);
}
.fh .fh-tile-steps li.done::after {
  background: var(--ac);
}
.fh .fh-tile-seal {
  display: grid;
  place-items: center;
  width: 20cqi;
  height: 20cqi;
  margin-bottom: 6cqi;
  border-radius: 999px;
  background: var(--po-text);
  color: var(--po-bg);
  box-shadow: 0 0 0 3cqi color-mix(in srgb, var(--po-text) 12%, transparent);
}
.fh .fh-tile-cert {
  margin-top: 3cqi;
  font-size: 3.4cqi;
  font-weight: 550;
  opacity: 0.75;
}

/* The course preview on the tablet: a screen inside the screen. */
/* The heading above says what it is; on a card this small the pill only hides it. */
.fh .fh-out .fh-pv-label {
  display: none;
}
.fh .fh-out .fh-pv {
  height: 290px;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 34px -16px rgba(0, 0, 0, 0.22);
}

/* ── Logos ─────────────────────────────────────────────────────────────── */

.fh .fh-logos {
  padding: 24px 0 8px;
}

/* the carousel's pager, as Sana's: a pill with a thumb, and a pause button */
.fh .fh-show-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}
.fh .fh-round {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--fh-card);
  box-shadow: inset 0 0 0 1px var(--fh-hair);
  color: #000;
  transition: background-color 0.2s, opacity 0.2s;
}
.fh .fh-round:hover:not(:disabled) {
  background: #ececec;
}
.fh .fh-round:disabled {
  opacity: 0.35;
  cursor: default;
}
.fh .fh-pager {
  position: relative;
  width: 120px;
  height: 6px;
  margin: 0 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7e7e7;
}
.fh .fh-pager i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: #000;
  transition: transform 0.5s var(--fh-ease);
}

/* ── How it works ──────────────────────────────────────────────────────── */

.fh .fh-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fh .fh-steps li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}
.fh .fh-steps-n {
  margin-bottom: 18px;
  font: 500 clamp(46px, 4.8vw, 68px)/1 var(--fh-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}
.fh .fh-steps-n small {
  margin-left: 0.06em;
  color: var(--fh-ink-3);
  font-size: 0.42em;
  letter-spacing: -0.01em;
}
.fh .fh-steps b {
  font: 500 18px/1.3 var(--fh-display);
  letter-spacing: -0.01em;
}
.fh .fh-steps p {
  margin: 0;
  color: var(--fh-ink-2);
  font-size: 15px;
  line-height: 1.5;
}

/* ── The loop (bento) ──────────────────────────────────────────────────── */

.fh .fh-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.fh .fh-bento > * {
  --spot: rgba(34, 56, 242, 0.1);
}
.fh .fh-bento > :nth-child(2) {
  --spot: rgba(166, 210, 30, 0.2);
}
.fh .fh-bento > :nth-child(3) {
  --spot: rgba(212, 69, 26, 0.12);
}
.fh .fh-bento > :nth-child(4) {
  --spot: rgba(176, 18, 76, 0.1);
}
.fh .fh-bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
  min-height: 470px;
  padding: 34px 34px 0;
  overflow: hidden;
  border-radius: var(--fh-r);
  background: var(--fh-card);
}
.fh .fh-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.fh .fh-spot:hover::before {
  opacity: 1;
}
.fh .fh-bento-copy {
  position: relative;
}
.fh .fh-bento-copy b {
  font: 500 22px/1.2 var(--fh-display);
  letter-spacing: -0.02em;
}
.fh .fh-bento-copy p {
  max-width: 44ch;
  margin: 8px 0 0;
  color: var(--fh-ink-2);
  font-size: 15.5px;
  line-height: 1.5;
}
.fh .fh-bento-pic {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
}
.fh .fh-bento-pic .fh-mock {
  border-radius: 18px 18px 0 0;
  transform: translateY(16px);
  transition: transform 0.5s var(--fh-ease);
}
.fh .fh-bento-tile:hover .fh-mock {
  transform: translateY(0);
}
.fh .fh-mock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  padding: 20px 20px 34px;
  background: #fff;
  color: #000;
  font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 24px 50px -24px rgba(0, 0, 0, 0.28);
}
.fh .fh-mock-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 4px;
  font-weight: 500;
}
.fh .fh-mock-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.fh .fh-mock-row.prove {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 40px;
}
.fh .fh-mock-row.prove b {
  font-weight: 500;
  text-align: right;
}
.fh .fh-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.fh .fh-bar {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #efefef;
}
.fh .fh-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #111;
}
.fh .fh-bar.low i {
  background: #e5a03a;
}
.fh .fh-tag {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.fh .fh-tag.ok {
  background: #e7f6ec;
  color: #137a3e;
}
.fh .fh-tag.due {
  background: #f1f1f1;
  color: #000;
}
.fh .fh-tag.late {
  background: #fdecec;
  color: #b42318;
}
.fh .fh-chat .me,
.fh .fh-chat .ai {
  max-width: 86%;
  padding: 10px 14px;
  line-height: 1.45;
}
.fh .fh-chat .me {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: #000;
  color: #fff;
}
.fh .fh-chat .ai {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 16px 16px 16px 4px;
  background: #f3f3f3;
}
.fh .fh-chat small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fh-blue);
  font-size: 11px;
  font-weight: 500;
}
.fh .fh-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fh .fh-sources span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 6px;
  border-radius: 999px;
  background: #f3f3f3;
  font-size: 12.5px;
}
.fh .fh-sources i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.fh .fh-sources .more {
  padding-left: 11px;
  color: var(--fh-ink-2);
}

/* ── The usual way ─────────────────────────────────────────────────────── */

.fh .fh-compare {
  max-width: 1040px;
  margin: 0 auto;
}
.fh .fh-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
}
.fh .fh-compare-row > * {
  padding: 20px 22px;
  border-top: 1px solid var(--fh-hair);
  font-size: 15.5px;
  line-height: 1.45;
}
.fh .fh-compare-row.head > * {
  padding-bottom: 14px;
  border-top: 0;
  color: var(--fh-ink-3);
  font-size: 13px;
  font-weight: 500;
}
.fh .fh-compare-row > b {
  font-weight: 500;
}
.fh .fh-compare-row > span:nth-child(2) {
  color: var(--fh-ink-3);
}
.fh .fh-compare-row > .us,
.fh .fh-compare-row.head > :nth-child(3) {
  background: var(--fh-sand);
  color: #000;
}
.fh .fh-compare-row > .us {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.fh .fh-compare-row > .us svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: #12a150;
}
.fh .fh-compare-row.head > :nth-child(3) {
  border-radius: 20px 20px 0 0;
}
.fh .fh-compare-row:last-child > .us {
  border-radius: 0 0 20px 20px;
}

/* ── People ────────────────────────────────────────────────────────────── */

.fh .fh-founder {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}
.fh .fh-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--fh-r);
  background: #eaeaea;
}
.fh .fh-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fh .fh-founder .fh-photo img {
  aspect-ratio: 4 / 5;
}
.fh .fh-quote {
  margin: 18px 0 0;
  font: 400 clamp(24px, 2.6vw, 36px)/1.22 var(--fh-display);
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.fh .fh-quote-by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 26px 0 0;
  font-size: 15px;
}
.fh .fh-quote-by b {
  font-weight: 500;
}
.fh .fh-quote-by span {
  color: var(--fh-ink-3);
}
.fh .fh-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: clamp(48px, 6vw, 80px);
}
.fh .fh-gallery .fh-photo {
  height: clamp(220px, 28vw, 400px);
}
.fh .fh-gallery figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Trust and price ───────────────────────────────────────────────────── */

.fh .fh-trustrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}
.fh .fh-trustitem {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--fh-hair);
}
.fh .fh-trustitem svg {
  margin-bottom: 10px;
}
.fh .fh-trustitem b {
  font: 500 18px/1.3 var(--fh-display);
  letter-spacing: -0.01em;
}
.fh .fh-trustitem p {
  margin: 0;
  color: var(--fh-ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.fh .fh-billing {
  display: inline-flex;
  gap: 4px;
  margin-top: 28px;
  padding: 4px;
  border-radius: 999px;
  background: var(--fh-sand);
}
.fh .fh-billing button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--fh-ink-2);
  font: 500 14px/1 var(--fh-sans);
  transition: background-color 0.2s, color 0.2s;
}
.fh .fh-billing button.on {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px -6px rgba(0, 0, 0, 0.2);
}
.fh .fh-billing button span {
  color: #12a150;
  font-size: 11.5px;
}
.fh .fh-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.fh .fh-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border-radius: var(--fh-r);
  background: var(--fh-card);
  color: #000;
}
.fh .fh-plan.featured {
  background: #000;
  color: #fff;
}
.fh .fh-plan-badge {
  position: absolute;
  top: 26px;
  right: 26px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 500;
}
.fh .fh-plan-name {
  font: 500 22px/1.1 var(--fh-display);
  letter-spacing: -0.02em;
}
.fh .fh-plan-for,
.fh .fh-plan-note,
.fh .fh-plan-price span {
  color: var(--fh-ink-2);
  font-size: 14px;
}
.fh .fh-plan-for {
  margin-top: 6px;
  min-height: 42px;
}
.fh .fh-plan.featured .fh-plan-for,
.fh .fh-plan.featured .fh-plan-note,
.fh .fh-plan.featured .fh-plan-price span {
  color: rgba(255, 255, 255, 0.62);
}
.fh .fh-plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 22px;
}
.fh .fh-plan-price b {
  font: 500 56px/0.9 var(--fh-display);
  letter-spacing: -0.05em;
}
.fh .fh-plan-note {
  min-height: 20px;
  margin-top: 10px;
  font-size: 13.5px;
}
.fh .fh-plan .fh-btn {
  width: 100%;
  margin: 24px 0 24px;
}
.fh .fh-plan.featured .fh-btn {
  background: #fff;
  color: #000;
}
.fh .fh-plan.featured .fh-btn:hover {
  background: #ececec;
}
.fh .fh-plan ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--fh-hair);
  font-size: 14.5px;
  list-style: none;
}
.fh .fh-plan.featured ul {
  border-top-color: rgba(255, 255, 255, 0.16);
}
.fh .fh-plan li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.4;
}
.fh .fh-plan li svg {
  flex-shrink: 0;
  margin-top: 2px;
}
/* What Free doesn't do, under its ticks: muted, a dash for a tick. */
.fh .fh-plan li.without {
  opacity: 0.55;
}
/* styles.css has a global .lead (19px, grey); this one is a list line. */
.fh .fh-plan li.lead {
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.4;
}
.fh .fh-more {
  margin: 28px 0 0;
  color: var(--fh-ink-2);
  font-size: 15px;
  text-align: center;
}
.fh .fh-more a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #000;
  font-weight: 500;
}

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.fh .fh-faq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(32px, 6vw, 96px);
}
.fh .fh-faq details {
  border-bottom: 1px solid var(--fh-hair);
}
.fh .fh-faq details:first-child {
  border-top: 1px solid var(--fh-hair);
}
.fh .fh-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font: 500 16.5px/1.35 var(--fh-sans);
  list-style: none;
  cursor: pointer;
}
.fh .fh-faq summary::-webkit-details-marker {
  display: none;
}
.fh .fh-faq summary svg {
  flex-shrink: 0;
  color: var(--fh-ink-3);
  transition: transform 0.3s var(--fh-ease), color 0.2s;
}
.fh .fh-faq details[open] summary svg {
  color: #000;
  transform: rotate(180deg);
}
.fh .fh-faq p {
  margin: 0;
  padding: 0 48px 24px 0;
  color: var(--fh-ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}

/* ── The last ask ──────────────────────────────────────────────────────── */

.fh .fh-end {
  padding-top: clamp(56px, 7vw, 96px);
  text-align: center;
}
.fh .fh-fan {
  position: relative;
  max-width: 600px;
  height: 230px;
  margin: 0 auto 44px;
}
.fh .fh-fan-card {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 236px;
  transition: transform 0.55s var(--fh-ease);
}
.fh .fh-fan-card .fh-piece {
  justify-content: space-between;
  width: 100%;
  height: 190px;
  text-align: left;
  animation: none;
}
.fh .fh-fan-card .fh-piece.cover b {
  font-size: 25px;
}
.fh .fh-fan .c0 {
  transform: translateX(-50%) translateX(-150px) translateY(20px) rotate(-9deg);
}
.fh .fh-fan .c1 {
  z-index: 2;
  transform: translateX(-50%);
}
.fh .fh-fan .c2 {
  transform: translateX(-50%) translateX(150px) translateY(20px) rotate(9deg);
}
.fh .fh-fan:hover .c0 {
  transform: translateX(-50%) translateX(-205px) translateY(12px) rotate(-13deg);
}
.fh .fh-fan:hover .c1 {
  transform: translateX(-50%) translateY(-10px);
}
.fh .fh-fan:hover .c2 {
  transform: translateX(-50%) translateX(205px) translateY(12px) rotate(13deg);
}


/* ── Motion ────────────────────────────────────────────────────────────── */

@keyframes fh-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fh-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fh-shimmer {
  to {
    transform: translateX(100%);
  }
}
@keyframes fh-caret {
  50% {
    opacity: 0;
  }
}
@keyframes fh-blink {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
@keyframes fh-nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2px);
  }
}
@keyframes fh-float {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-4%, 5%);
  }
}
@keyframes fh-autoflip {
  0%,
  38% {
    transform: rotateY(0);
  }
  50%,
  88% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes fh-ready {
  0%,
  100% {
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ac) 90%, transparent), 0 0 0 0 color-mix(in srgb, var(--ac) 40%, transparent);
  }
  60% {
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ac) 90%, transparent), 0 0 0 10px color-mix(in srgb, var(--ac) 0%, transparent);
  }
}
@keyframes fh-shake {
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

@keyframes fh-bob {
  0%,
  100% {
    transform: translateY(0) rotate(var(--r, 0deg));
  }
  50% {
    transform: translateY(-9px) rotate(var(--r, 0deg));
  }
}
@keyframes fh-beam {
  to {
    --fh-angle: 360deg;
  }
}
@keyframes fh-sweep {
  0% {
    transform: translateX(-100%);
  }
  60%,
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fh *,
  .fh *::before,
  .fh *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── A narrow course preview: laid out as the course is on a phone ─────── */

@container (max-width: 480px) {
  .fh .fh-pv-cover-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fh .fh-pv-art {
    display: none;
  }
  .fh .fh-pv-title {
    font-size: 9.6cqi;
  }
  .fh .fh-pv-h {
    font-size: 8cqi;
  }
  .fh .fh-pv-h.sm {
    font-size: 6cqi;
  }
  .fh .fh-pv-lessons,
  .fh .fh-pv-cards,
  .fh .fh-pv-cards.n3,
  .fh .fh-pv-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .fh .fh-pv-stat {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2cqi;
    min-height: 0;
  }
  .fh .fh-pv-stat b {
    margin: 0;
    padding: 0;
    font-size: 9cqi;
  }
  .fh .fh-pv-stat small {
    flex-basis: 100%;
  }
  .fh .fh-pv-flip {
    width: 100%;
  }
}

/* ── Smaller screens ───────────────────────────────────────────────────── */

@media (max-width: 1260px) {
  .fh .fh-floats {
    zoom: 0.82;
  }
  .fh .p2,
  .fh .p5 {
    display: none;
  }
}

@media (max-width: 1000px) {
  .fh .fh-floats {
    display: none;
  }
  .fh .fh-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .fh .fh-out .fh-pv {
    height: 360px;
  }
  .fh .fh-drop {
    min-height: 240px;
  }
  .fh .fh-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
  .fh .fh-bento,
  .fh .fh-plans,
  .fh .fh-founder,
  .fh .fh-faq-wrap,
  .fh .fh-trustrow {
    grid-template-columns: minmax(0, 1fr);
  }
  .fh .fh-trustrow {
    gap: 32px;
  }
  .fh .fh-founder .fh-photo img {
    aspect-ratio: 4 / 3.4;
  }
  .fh .fh-plan-for {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .fh .fh-compare-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .fh .fh-compare-row > b {
    grid-column: 1 / -1;
    padding-bottom: 4px;
  }
  .fh .fh-compare-row > span {
    padding-top: 6px;
    border-top: 0;
  }
  .fh .fh-compare-row.head > :first-child {
    display: none;
  }
  .fh .fh-compare-row > * {
    padding-inline: 14px;
    font-size: 14.5px;
  }
}

@media (max-width: 600px) {
  .fh .fh-scroll {
    padding-inline: 10px;
  }
  .fh .fh-device {
    padding: 7px;
    border-radius: 28px;
  }
  .fh .fh-device-screen {
    border-radius: 22px;
  }
  .fh .fh-in {
    padding: 20px 16px 18px;
  }
  .fh .fh-aud {
    margin: 0 -16px;
    padding: 2px 16px;
  }
  .fh .fh-src-ok {
    display: none;
  }
  .fh .fh-ex-meta {
    gap: 4px;
    font-size: 10.5px;
  }
  .fh .fh-out {
    padding: 10px;
  }
  .fh .fh-go kbd {
    display: none;
  }
  .fh .fh-out .fh-pv {
    height: 340px;
  }
  .fh .fh-drop {
    min-height: 220px;
  }
  .fh .fh-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .fh .fh-bento-tile {
    min-height: 0;
    padding: 26px 22px 0;
  }
  .fh .fh-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
  .fh .fh-fan {
    height: 200px;
    transform: scale(0.78);
    transform-origin: 50% 0;
    margin-bottom: 8px;
  }
  .fh .fh-faq p {
    padding-right: 0;
  }
}