/* ═══════════════════════════════════════════════════════════════════
   Hybrid homepage — the site front page (page-front.tpl.php).
   v5's design refactored Bulma-first: cards are Bulma .box, pills are
   .tag.is-rounded, CTAs are .button (the bundle's primary IS the site
   orange), headings are .title — each re-themed ONCE via CSS vars scoped
   under .home-canvas so the global navbar/footer Bulma is untouched.
   This file keeps only what Bulma can't express: the lesson board, layer
   diagram + flow connectors, chat mockup, comparison table, the search
   card + subject-glyph carousel, and a 4-token shadow system.
   Tokens: mockup #FF7A2F -> --orange family; #5B54E8/#22A8F0 -> the
   reserved --ai tokens; warm creams/borders -> --cream / --cream-2 /
   --line. Human elements use orange, AI elements the gradient — never
   mixed. Class prefix stays home- (v3 rule). NO reset here: Bulma's apply.
   ═══════════════════════════════════════════════════════════════════ */
/* Design tokens now live in tokens.css, loaded before this file. */
body { background: #e9e6e0; } /* neutral surround for the phone canvas */

/* The mockup's 430px phone canvas, centered on any viewport. */
.home-canvas {
  max-width: 430px;
  margin: 0 auto;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 0 40px rgba(20, 33, 61, .14);
}

/* ── Scoped Bulma re-theming (this page only) ───────────────────── */
.home-canvas .box {
  --bulma-box-background-color: var(--card);
  --bulma-box-radius: 16px;
  --bulma-box-shadow: var(--shadow-sm);
  --bulma-box-padding: 16px;
  --bulma-box-link-hover-shadow: var(--shadow-md);
  --bulma-box-link-active-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
}
.home-canvas .box:not(:last-child) { margin-bottom: 0; } /* spacing via mb-* only */
.home-canvas a.box:hover { border-color: var(--orange); color: var(--ink); }
/* Cream-tinted boxes: */
.home-who-card, .home-review, .home-faq-item { --bulma-box-background-color: var(--cream); }
.home-canvas .title { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; }
.home-canvas .tag { font-weight: 600; }

/* ── Shared primitives ──────────────────────────────────────────── */
.home-section { padding: 40px 20px 44px; }
.home-section--cream { background: var(--cream); border-top: 1px solid var(--line); }
.home-label { font-size: .6rem; font-weight: 700; letter-spacing: .08em; color: var(--orange-d); background: var(--orange-soft); }
.home-label--ai { color: var(--ai-1); background: var(--ai-soft); }
.home-lead { font-size: .85rem; color: var(--muted); }
.home-kicker { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 5px; }
.home-kicker--ai { color: var(--ai-1); }
.home-ok { color: var(--ok); }
.home-ai-dot { color: var(--ai-1); flex-shrink: 0; }
.home-glow { box-shadow: var(--glow-orange); }
.home-btn-line { border: 2px solid var(--line); }
.home-btn-stack { gap: 10px; }
.home-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Scroll fade-in (page-front.js toggles .visible; same pattern as v4). */
/* Scroll reveal. page-front.js adds .visible; the animation is a FAIL-SAFE so
   the page can never stay blank when that script is missing, stale or broken —
   which is exactly what a class rename caused on 4.8.26 for anyone holding a
   cached copy of the old JS. After 4s everything reveals itself regardless.
   With the script working, .visible wins long before the delay elapses; below
   the fold an early reveal is invisible to the reader anyway. */
.ln-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  animation: ln-fade-failsafe 0s linear 4s forwards;
}
.ln-fade.visible { opacity: 1; transform: none; animation: none; }
@keyframes ln-fade-failsafe { to { opacity: 1; transform: none; } }

/* Animations (from the mockup; disabled under reduced motion below). */
@keyframes home-flt { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } }
@keyframes home-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes home-shimmer { 0% { background-position: 0 50%; } 100% { background-position: 200% 50%; } }
@keyframes home-flow-down { to { background-position: 0 10px; } }
@keyframes home-flow-up   { to { background-position: 0 -10px; } }

/* ── 01 · Hero ──────────────────────────────────────────────────── */
/* Bulma hero (is-small) at its default padding — only the brand background
   is ours. */
.home-canvas .home-hero {
  background: radial-gradient(ellipse 80% 45% at 90% 0%, var(--orange-soft), transparent 70%), var(--cream);
}
/* h1 is Bulma `title is-3` (+ mt-3 mb-2) — only the accent spans are ours. */
.home-h1-accent { color: var(--orange-d); }
.home-grad-text {
  background: linear-gradient(100deg, var(--orange), var(--ai-1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* (hero subtitle is home-lead + mb-4 — no dedicated class) */

/* Search card, autocomplete and the mobile panel now live in
   search-widget.css — shared with the teacher-search page. */


/* Popular-subjects carousel: ink-monochrome glyphs, swipeable; the cut-off
   item at the card edge hints scrollability. */
.home-pop-track {
  display: flex;
  overflow-x: auto;
  margin: 0 -12px; /* escape the card padding so edge items cut at the border */
  padding: 6px 12px; /* + the items' own 8px -> ~14px gap all around */
  scroll-padding: 0 12px; /* else snap-align:start swallows the padding-left */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.home-pop-track::-webkit-scrollbar { display: none; }
.home-pop-item {
  flex: 0 0 auto; /* natural width — labels set each item's size */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  text-align: center;
  scroll-snap-align: start;
}
/* Anchor-scoped: with subject links off these render as <span>, and a hover
   response on something you cannot click is a lie. */
a.home-pop-item:hover { background: var(--card); box-shadow: var(--shadow-sm); }
.home-pop-glyph { height: 24px; display: flex; align-items: center; justify-content: center; }
.home-pop-math { font-weight: 700; font-size: 1.02rem; line-height: 1; letter-spacing: .02em; }
.home-pop-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 21px;
  padding: 0 3px;
  border: 1.6px solid currentColor;
  border-radius: 6px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.home-pop-name { font-size: .64rem; font-weight: 600; line-height: 1.15; }

/* AI-included strip (from v4). */
.home-ai-strip {
  gap: 10px;
  border: 1px solid var(--ai-line);
  border-radius: 13px;
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--muted);
}
.home-ai-strip strong { color: var(--ink); }
.home-alt-entry { font-size: .82rem; color: var(--muted); }
.home-alt-entry a { color: var(--orange-d); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Hero board: tablet portrait pair + two floating cards. */
.home-board { position: relative; height: 250px; }
/* Black tablet bezel (mockup index.html:107–139): dark frame + camera
   dot, screen clips the tiles, status bar with live pill + mic/cam. */
.home-tablet {
  position: absolute;
  left: 50%;
  top: 34px; /* bezel is shorter than the old framed card — keep the chip/practice-float clearance */
  transform: translateX(-50%);
  width: 214px;
  z-index: 5;
  background: var(--ink);
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 24px 50px rgba(20, 33, 61, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.home-tablet-cam {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0d1117;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.home-tablet-screen { border-radius: 12px; overflow: hidden; background: var(--cream-2); }
.home-tablet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #171d26;
  padding: 6px 9px;
}
.home-tablet-live { display: flex; align-items: center; gap: 5px; color: #fff; font-size: .6rem; font-weight: 600; }
.home-tablet-icons { display: flex; gap: 8px; color: rgba(255, 255, 255, .55); }
.home-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: home-pulse 1.6s ease-in-out infinite; }
.home-tablet-tiles { gap: 4px; margin: 0; }
.home-tile { position: relative; flex: 1; overflow: hidden; aspect-ratio: 3 / 4; background: var(--cream-2); }
.home-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-tile--student .home-tile-img { object-position: 50% 20%; }
.home-tile--tutor .home-tile-img { object-position: 50% 15%; }
.home-tile-role {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(35, 42, 53, .82);
  color: #fff;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 5px;
  padding: 2px 5px;
}
.home-tile-role--tutor { background: rgba(255, 156, 1, .92); }
.home-tile-name {
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
  text-align: center;
  background: rgba(255, 255, 255, .92);
  border-radius: 7px;
  padding: 2px 5px;
  font-size: .66rem;
  font-weight: 700;
  color: var(--ink);
}
.home-tablet-chip {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--orange);
  color: var(--ink); /* white on the brand orange is 2.2:1 — fails WCAG (Lighthouse) */
  border-radius: 999px;
  padding: 5px 12px;
  font-size: .66rem;
  font-weight: 700;
  box-shadow: var(--glow-orange);
}
.home-float {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px;
  z-index: 6;
  animation: home-flt 7s ease-in-out infinite;
}
.home-float--ai { top: 6px; left: 0; width: 126px; --r: -4deg; border-color: var(--ai-line); box-shadow: var(--glow-ai); animation-duration: 6.5s; }
.home-float--practice { bottom: 2px; right: 0; width: 132px; --r: 4deg; box-shadow: var(--shadow-sm); animation-duration: 7.4s; }
.home-float .home-kicker { font-size: .55rem; margin-bottom: 6px; }
.home-float-math { font-weight: 700; font-size: .72rem; }

/* ── 02 · Hybrid model (three layers) ───────────────────────────── */
.home-layer { position: relative; border-radius: 18px; padding: 16px; }
.home-layer--tutor {
  width: 84%;
  margin-left: auto;
  gap: 12px;
  background: linear-gradient(115deg, var(--orange), var(--orange-d));
  box-shadow: var(--glow-orange);
  color: #fff;
}
.home-layer-num {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  color: rgba(255, 255, 255, .18);
  pointer-events: none;
}
.home-layer-num--ai { color: var(--ai-soft); }
.home-layer-num--practice { color: var(--cream-2); }
.home-layer-kicker { font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.home-layer-kicker--ai { color: var(--ai-1); opacity: 1; }
.home-layer--practice .home-layer-kicker { color: var(--muted); opacity: 1; }
.home-layer-title { font-family: var(--serif); font-weight: 800; font-size: .95rem; margin: 2px 0 4px; }
.home-layer-text { font-size: .68rem; line-height: 1.35; opacity: .94; }
.home-layer-text--muted { color: var(--muted); opacity: 1; font-size: .7rem; }
.home-layer-photo { position: relative; width: 78px; flex-shrink: 0; }
.home-layer-photo-frame {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: var(--shadow-md);
  background: var(--cream-2);
}
.home-layer-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.home-layer-pop {
  position: absolute;
  left: 2px;
  bottom: -14px;
  background: #fff;
  color: var(--ink);
  border-radius: 9px;
  box-shadow: var(--shadow-md);
  padding: 5px 8px;
  font-size: .5rem;
  font-weight: 600;
  white-space: nowrap;
  transform: rotate(-4deg);
  z-index: 2;
  animation: home-flt 5s ease-in-out infinite;
}
.home-layer-ai-wrap { position: relative; width: 92%; margin: 6px auto; }
.home-layer--ai { background: var(--card); border: 2px solid var(--ai-1); box-shadow: var(--glow-ai); overflow: hidden; }
.home-layer--ai::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #f3f1ff, #eaf6fe, #f3f1ff);
  background-size: 200% 100%;
  animation: home-shimmer 7s linear infinite;
  opacity: .7;
  pointer-events: none;
}
.home-layer-inner { position: relative; }
.home-bubble {
  position: absolute;
  left: -8px;
  top: -14px;
  background: #fff;
  border: 1px solid var(--ai-line);
  border-radius: 11px 11px 11px 4px;
  padding: 6px 10px;
  font-size: .58rem;
  color: var(--ink);
  box-shadow: var(--glow-ai);
  transform: rotate(-4deg);
  z-index: 2;
}
.home-pill-grad {
  position: absolute;
  right: -6px;
  bottom: -14px;
  background: var(--ai-grad);
  color: #fff;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: .58rem;
  font-weight: 700;
  box-shadow: var(--glow-ai);
  transform: rotate(4deg);
  white-space: nowrap;
  z-index: 2;
}
.home-layer--practice { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); margin-top: 6px; }
.home-minis { gap: 8px; }
.home-mini { flex: 1; background: var(--cream-2); border-radius: 11px; padding: 9px 11px; }
.home-mini-row { display: flex; align-items: center; gap: 5px; font-size: .62rem; color: var(--muted); margin-bottom: 3px; }
.home-mini-row--next { color: var(--orange-d); font-weight: 600; }
.home-mini-math { font-weight: 700; font-size: .66rem; margin-bottom: 5px; }
.home-xp-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e6f6ee;
  color: #1f9d63;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: .55rem;
  font-weight: 700;
}

/* Connectors: two flowing dashed lanes + channel pills (pills are .tag). */
.home-flow { position: relative; height: 60px; gap: 12px; }
.home-flow-lane { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.home-flow-lane--l { left: calc(50% - 66px); }
.home-flow-lane--r { left: calc(50% + 66px); }
.home-flow-lane--orange { background: repeating-linear-gradient(to bottom, var(--orange) 0, var(--orange) 5px, transparent 5px, transparent 10px); }
.home-flow-lane--ai { background: repeating-linear-gradient(to bottom, var(--ai-1) 0, var(--ai-1) 5px, transparent 5px, transparent 10px); }
.home-flow-lane--down { animation: home-flow-down .6s linear infinite; }
.home-flow-lane--up { animation: home-flow-up .6s linear infinite; }
.home-flow-pill { position: relative; z-index: 1; background: #fff; font-size: .56rem; box-shadow: var(--shadow-sm); }
.home-flow-pill--orange { border: 1px solid var(--orange-soft); color: var(--orange-d); }
.home-flow-pill--ai { border: 1px solid var(--ai-line); color: var(--ai-1); }

/* ── 03 · Learning loop (steps are .box) ────────────────────────── */
.home-step { gap: 13px; align-items: flex-start; }
.home-step--ai { border-color: var(--ai-line); box-shadow: var(--glow-ai); }
.home-step-num {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--orange-soft);
  color: var(--orange-d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
}
.home-step-num--ai { background: var(--ai-soft); color: var(--ai-1); }
.home-step .home-kicker { margin-bottom: 3px; }
.home-step-text { font-size: .8rem; color: var(--muted); }
.home-loop-arrow { color: var(--orange); opacity: .5; font-size: 1.2rem; padding: 5px 0; }
.home-loop-close {
  gap: 8px;
  padding: 11px 16px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: .78rem;
  color: var(--muted);
}
.home-loop-close svg { color: var(--ai-1); }

/* ── 04 · AI showcase (chat is .box) ────────────────────────────── */
.home-benefits { display: flex; flex-direction: column; gap: 11px; }
.home-benefits li { display: flex; gap: 9px; font-size: .86rem; color: var(--muted); }
.home-benefits strong { color: var(--ink); }
.home-chat { --bulma-box-radius: 20px; --bulma-box-shadow: var(--shadow-md); }
.home-chat-head { gap: 9px; padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .9rem; }
.home-chat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ai-grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
}
.home-chat-msg {
  background: var(--cream-2);
  border-radius: 13px 13px 13px 4px;
  padding: 10px 13px;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 9px;
  max-width: 92%;
}
.home-chat-msg--me { background: var(--ai-soft); color: var(--ink); border-radius: 13px 13px 4px 13px; margin-left: auto; max-width: 52%; }
.home-chat-msg--q { color: var(--ink); font-weight: 600; border-radius: 13px; margin-bottom: 13px; }
.home-chat-progress { border: 1px dashed var(--ai-line); border-radius: 12px; padding: 11px 13px; }
.home-bars { align-items: flex-end; gap: 5px; height: 30px; }
.home-bars span { flex: 1; border-radius: 3px; background: var(--orange-soft); }
.home-bars span:nth-child(1) { height: 40%; }
.home-bars span:nth-child(2) { height: 55%; background: rgba(255, 156, 1, .3); }
.home-bars span:nth-child(3) { height: 48%; }
.home-bars span:nth-child(4) { height: 70%; background: rgba(255, 156, 1, .55); }
.home-bars span:nth-child(5) { height: 85%; background: var(--orange); }
.home-bars span:nth-child(6) { height: 100%; background: var(--ai-grad); }

/* ── 05 · Comparison (wrap is .box) ─────────────────────────────── */
.home-cmp-wrap { --bulma-box-radius: 18px; --bulma-box-shadow: var(--shadow-md); --bulma-box-padding: 0px; overflow: hidden; }
.home-cmp-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.home-cmp-table th, .home-cmp-table td { border-bottom: 1px solid var(--cream-2); }
.home-cmp-table tbody tr:last-child th, .home-cmp-table tbody tr:last-child td { border-bottom: none; }
.home-cmp-table thead th { background: var(--cream); padding: 12px 6px; font-size: .68rem; font-weight: 600; color: var(--muted); }
.home-cmp-table thead th:first-child { text-align: left; padding: 12px; font-size: .72rem; }
.home-cmp-table thead .home-cmp-hybrid { color: var(--orange-d); font-weight: 700; background: var(--orange-soft); }
.home-cmp-table tbody th { padding: 11px 12px; font-weight: 400; text-align: left; vertical-align: middle; }
/* centering itself comes from has-text-centered (!important) in the markup
   — immune to the Bulma bundle's td/th text-align rules. */
.home-cmp-table tbody td { vertical-align: middle; padding: 0 4px; line-height: 1; }
.home-cmp-table tbody td:last-child { background: var(--cream); }
.home-yes span:first-child { color: var(--ok); font-weight: 700; }
.home-no span:first-child { color: #d9605a; } /* visible soft red vs the green ✓ */
.home-cmp-divider th {
  padding: 9px 12px !important;
  background: var(--orange-soft);
  text-align: center !important;
}
.home-cmp-divider span { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-d); }
.home-cmp-hybrid-row th { font-weight: 600 !important; background: var(--cream); box-shadow: inset 3px 0 0 var(--orange); }
.home-cmp-price { font-size: .85rem; color: var(--muted); }
.home-cmp-price strong { color: var(--ink); }

/* ── 06 · Who it's for (cards are .box, pills are .tag) ─────────── */
.home-who-card { --bulma-box-padding: 20px; --bulma-box-radius: 18px; }
.home-who-aud { font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: var(--orange-d); background: var(--card); border: 1px solid var(--line); gap: 7px; }
.home-who-text { font-size: .85rem; color: var(--muted); }
.home-who-tags { gap: 6px; }
.home-who-tag { font-size: .68rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); }
.home-who-link { font-size: .85rem; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--orange); padding-bottom: 2px; text-decoration: none; }

/* ── 07 · Free practice (cells are .box) ────────────────────────── */
.home-cat { --bulma-box-radius: 13px; --bulma-box-padding: 13px; display: block; color: inherit; text-decoration: none; }

/* ═══ Desktop/tablet layers — nothing below 769px is affected ═════════
   Tier map: <769px = the untouched 430px phone column; 769–1023px = a
   simple widened column with 2-col grids; ≥1024px = the tutorela-home
   desktop mockup composition (containers 1000/1080px, hero band 1280px). */
@media (min-width: 769px) {
  .home-canvas { max-width: 704px; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .home-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
  .home-grid > .box { margin-bottom: 0 !important; }
}
/* Step arrows only make sense in the stacked mobile flow. This sheet
   loads BEFORE the Bulma bundle ($head vs $styles), so beating the
   is-flex !important helper needs higher specificity, not just !important. */
@media (min-width: 769px) {
  .home-canvas .home-loop-arrow { display: none !important; }
}
@media (min-width: 1024px) {
  body { background: var(--card); } /* drop the phone surround */
  .home-canvas { max-width: none; box-shadow: none; }
  .home-section { padding: 72px 40px; }
  /* Default inner container; hero band and narrow sections override. */
  .home-section > * { max-width: 1000px; margin-inline: auto; }
  .home-grid { display: grid; gap: 18px; }
  .home-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .home-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .home-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .home-grid > .box { margin-bottom: 0 !important; height: 100%; }

  /* ── Hero band (mockup index.html:38–139) ─────────────────────── */
  .home-sec--hero .hero-body { padding: 48px 40px 56px; }
  .home-sec--hero .hero-body > * { max-width: 1280px; margin-inline: auto; }
  .home-hero-cols { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr auto; gap: 0 28px; align-items: center; width: 100%; }
  .home-hero-visual { grid-column: 2; grid-row: 1 / span 2; }
  .home-sec--hero .title.is-3 { font-size: clamp(2.4rem, 2.2vw + 1.2rem, 3.33rem); line-height: 1.04; letter-spacing: -.025em; }
  .home-hero-copy .home-lead { max-width: 666px; font-size: 1.03rem; }
  .home-hero-copy .home-alt-entry { text-align: start; }
  .home-hero-visual { position: relative; }
  .home-hero-visual .home-board { height: 420px; transform: scale(1.3); transform-origin: center; }
  /* Keep the floats inside the visual column (mobile offsets assume the
     430px canvas). Bulma's has-text-centered needs the !important. */
  /* Mockup cluster: recap top-start, progress top-end, practice
     bottom-start, AI assistant bottom-end around the tablet. */
  .home-hero-visual .home-float--ai { top: auto; bottom: 72px; left: auto; inset-inline-end: 60px; width: 158px; }
  .home-hero-visual .home-float--practice { bottom: 88px; right: auto; inset-inline-start: 84px; }
  .home-tool {
    position: absolute;
    width: 186px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    animation: home-flt 7s ease-in-out infinite;
  }
  .home-tool .home-kicker { font-size: .55rem; margin-bottom: 6px; }
  /* Tablet sits lower in its board so the top cards clear it (the tools
     are board siblings — the board's transform doesn't scale them).
     Cards pull inward to overlap the tablet corners (tighter cluster). */
  .home-hero-visual .home-tablet { top: 74px; }
  .home-tool--recap { top: -12px; inset-inline-start: 32px; --r: -3deg; transform: rotate(-3deg); }
  .home-tool--progress { top: 2px; inset-inline-end: 20px; --r: 3deg; transform: rotate(3deg); border-color: var(--ai-line); box-shadow: var(--glow-ai); animation-duration: 6s; }
  .home-tool-text { font-size: .68rem; color: var(--muted); line-height: 1.4; }
  .home-tool-pill {
    display: inline-block;
    margin-top: 8px;
    background: var(--orange-soft);
    color: var(--orange-d);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: .6rem;
    font-weight: 700;
  }
  .home-tool-row { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--muted); margin-bottom: 8px; }
  .home-tool-row strong { color: var(--orange-d); }
  .home-tool-bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
  .home-tool-bars span { flex: 1; border-radius: 3px; background: var(--orange-soft); }
  .home-tool-bars span:nth-child(1) { height: 40%; }
  .home-tool-bars span:nth-child(2) { height: 56%; }
  .home-tool-bars span:nth-child(3) { height: 68%; background: var(--orange); }
  .home-tool-bars span:nth-child(4) { height: 84%; background: var(--orange); }
  .home-tool-bars span:nth-child(5) { height: 100%; background: var(--ai-1); }

  /* ── Learning loop: 4 step cards in a row (mockup :259–316) ────── */
  .home-sec--loop .home-step { flex-direction: column; gap: 10px; align-items: flex-start; }
  .home-sec--loop .home-loop-close { font-size: .95rem; }

  /* ── AI showcase: copy | chat (mockup :317–345) ────────────────── */
  .home-ai-cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .home-ai-cols .home-benefits { font-size: 1rem; }
  .home-ai-cols .home-chat { margin-bottom: 0; }

  /* ── Comparison stays a centered ~820px table (mockup :346–376) ── */
  .home-sec--cmp > * { max-width: 820px; }
  .home-sec--cmp .home-cmp-table { font-size: .9rem; }

  /* ── Card sections (mockup :377–490): the Bulma fixed-grids widen
     to the mockup's column counts (specificity beats .fixed-grid>.grid
     since this sheet loads before the bundle). ─────────────────────── */
  .home-canvas .home-sec--prac .grid { grid-template-columns: repeat(3, 1fr); }
  .home-canvas .home-sec--new .grid { grid-template-columns: repeat(4, 1fr); }

  /* ── Narrow tail sections: FAQ column + carried-over bands ──────── */
  .home-sec--faq > * { max-width: 720px; }
  .home-cta { padding: 72px 40px; }
  .home-cta > * { max-width: 720px; margin-inline: auto; }
  .home-hero-copy .home-alt-entry { text-align: start !important; }
  .home-sec--hero .home-ai-strip { grid-column: 1; grid-row: 2; }

  /* ── Hybrid model → staircase (mockup index.html:160–235) ───────
     Same DOM as mobile; the three layer cards get widths + opposing
     inline offsets, and the practice card becomes text|minis columns. */
  .home-sec--layers > * { max-width: 960px; }
  .home-sec--layers .title.is-4 { font-size: 2.3rem; }
  .home-sec--layers .home-lead { font-size: 1.05rem; max-width: 560px; margin-inline: auto; }
  .home-sec--layers .home-layer { border-radius: 24px; padding: 26px 28px; }
  .home-sec--layers .home-layer-num { font-size: 3.4rem; }
  .home-sec--layers .home-layer-kicker { font-size: .7rem; letter-spacing: .08em; }
  .home-sec--layers .home-layer-title { font-size: 1.35rem; margin: 3px 0 5px; }
  .home-sec--layers .home-layer-text { font-size: .92rem; }
  /* Staircase offsets: each card is centered-then-shifted so the step
     pattern holds at any viewport (margin = 50% − width/2 ± shift). */
  .home-sec--layers .home-layer--tutor { width: 672px; margin-inline-start: calc(50% - 336px + 144px); gap: 22px; }
  .home-sec--layers .home-layer-photo { width: 190px; }
  .home-sec--layers .home-layer-photo-frame { aspect-ratio: 4 / 3; border-radius: 18px; border-width: 3px; }
  .home-sec--layers .home-layer-pop { font-size: .78rem; border-radius: 13px; padding: 8px 12px; }
  .home-sec--layers .home-layer-ai-wrap { width: 730px; margin-inline-start: calc(50% - 365px - 115px); }
  .home-sec--layers .home-layer-num--ai { right: auto; inset-inline-start: 22px; inset-inline-end: auto; }
  .home-sec--layers .home-layer--ai .home-layer-inner { margin-inline-start: 74px; }
  .home-sec--layers .home-layer--practice {
    width: 806px;
    margin-inline-start: calc(50% - 403px - 77px);
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-areas: "k m" "t m" "x m";
    column-gap: 28px;
    align-items: start;
    align-content: start;
  }
  .home-sec--layers .home-layer--practice .home-layer-kicker { grid-area: k; }
  .home-sec--layers .home-layer--practice .home-layer-title { grid-area: t; }
  .home-sec--layers .home-layer--practice .home-layer-text { grid-area: x; }
  .home-sec--layers .home-layer--practice .home-minis { grid-area: m; }
}
.home-cat-name { display: block; font-weight: 600; font-size: .9rem; }
.home-cat-count { display: block; font-size: .76rem; color: var(--muted); }

/* ── 08 · Testimonials (cards are .box) ─────────────────────────── */
.home-review { --bulma-box-padding: 20px; --bulma-box-radius: 18px; }
.home-rev-stars { color: var(--orange); letter-spacing: 2px; margin-bottom: 9px; }
.home-rev-text { font-size: .88rem; color: var(--muted); }
.home-rev-who { font-size: .82rem; font-weight: 600; }

/* ── 09 · New tutors (cards are .box) ───────────────────────────── */
/* min-width:0 is load-bearing: these cards are CSS-grid items (Bulma .cell),
   and a grid item's default min-width:auto refuses to shrink below its widest
   unbreakable word. Tutor names and key sentences are free text, so one long
   token (a URL, a run of slashes, a name typed without spaces) would widen the
   column past the 430px canvas and send the whole page into horizontal scroll.
   Paired with overflow-wrap below so the token breaks instead of clipping. */
.home-tutor-card { --bulma-box-padding: 14px; display: block; min-width: 0; color: inherit; text-decoration: none; }
.home-tutor-name,
.home-tutor-subj,
.home-tutor-sentence { overflow-wrap: anywhere; word-break: break-word; }
.home-tutor-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  color: #fff;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.6rem;
  background: linear-gradient(135deg, var(--orange), var(--orange-d));
}
/* Key-sentence tagline (field_key_sentence via limudnaim_front_new_tutors).
   Server truncates at 110 chars; the 2-line clamp keeps card heights even. */
.home-tutor-sentence {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 4px;
}
/* Real profile photo (limudnaim_front_new_tutors) — same tile geometry. */
.home-tutor-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  object-fit: cover;
  background: var(--cream-2);
}
.grid .cell:nth-child(2) .home-tutor-avatar { background: var(--ai-grad); }
.grid .cell:nth-child(3) .home-tutor-avatar { background: linear-gradient(135deg, var(--ok), var(--ai-2)); }
.grid .cell:nth-child(4) .home-tutor-avatar { background: linear-gradient(135deg, var(--orange), var(--ai-1)); }
.home-tutor-name { display: block; font-weight: 600; font-size: .88rem; }
.home-tutor-subj { display: block; font-size: .76rem; color: var(--muted); }
.home-tutor-link { display: block; font-size: .76rem; font-weight: 600; color: var(--orange-d); margin-top: 7px; }

/* ── 10 · Blog (cards are .box) ─────────────────────────────────── */
.home-blog-card { --bulma-box-padding: 18px; display: block; color: inherit; text-decoration: none; }
.home-blog-title { line-height: 1.3; }
.home-blog-date { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.home-blog-excerpt { font-size: .83rem; color: var(--muted); }

/* ── 11 · FAQ (items are .box) ──────────────────────────────────── */
.home-faq-item { --bulma-box-radius: 14px; }
.home-faq-item summary { font-weight: 600; cursor: pointer; font-size: .9rem; }
.home-faq-item p { font-size: .85rem; color: var(--muted); }

/* ── Subjects band + final CTA (site chrome, from v4) ───────────── */
.home-section--navy { background: var(--navy); border-top: none; }
.home-label--on-navy { background: rgba(255, 156, 1, .16); color: var(--orange); }
.home-subj-title { font-weight: 700; font-size: .85rem; margin-bottom: 8px; color: rgba(255, 255, 255, .85); }
.home-chips { gap: 7px; }
.home-chip { font-size: .78rem; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
a.home-chip:hover { background: rgba(255, 156, 1, .2); border-color: var(--orange); color: #fff; }
.home-cta { background: linear-gradient(115deg, var(--orange), var(--orange-d)); color: #fff; padding: 44px 20px; }
.home-cta p { font-size: .9rem; opacity: .95; }

/* Footer: styled once as Bulma .footer in bulma-limudnaim-en.sass. */

@media (prefers-reduced-motion: reduce) {
  .home-live-dot, .home-float, .home-layer-pop,
  .home-layer--ai::before, .home-flow-lane, .home-pill-grad { animation: none; }
  .ln-fade { opacity: 1; transform: none; transition: none; }
}