/* Skill Ready Techs - marketing pages (v39)
   =========================================
   Loaded only by index.html and for-schools.html, after css/styles.css.
   Everything here is namespaced (.h-*) so it can't leak into the
   dashboards. Two audience colors run through the page:
     Technicians -> --tech  (the brand "cooling" blue)
     Employers   -> --emp   (the "heating" orange from the logo checkmark)
     Schools     -> --edu   (green) */
:root {
  --navy-900: #0b1626;
  --navy-800: #111f35;
  --navy-700: #1b2c47;
  --tech: #0284c7;
  --tech-strong: #0369a1;
  --tech-soft: #e0f2fe;
  --emp: #ea580c;
  --emp-strong: #c2410c;
  --emp-soft: #ffedd5;
  --edu: #059669;
  --edu-soft: #d1fae5;
  --ink: #0f172a;
}

.h-page { background: var(--bg-white); }
.h-page main { display: block; }
.h-section { padding: 6rem 0; }
.h-section.tight { padding: 4.5rem 0; }
.h-section.alt { background: var(--bg); }
.h-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tech);
}
.h-kicker.emp { color: var(--emp-strong); }
.h-kicker.edu { color: var(--edu); }
.h-title { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); line-height: 1.1; margin: 0.75rem 0 1rem; letter-spacing: 0.01em; }
.h-lead { font-size: 1.15rem; color: var(--text-light); max-width: 640px; }
.h-head { max-width: 760px; margin-bottom: 3rem; }
.h-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.h-head.center .h-lead { margin: 0 auto; }

/* Buttons specific to the audiences */
.btn-tech { background: var(--tech); color: #fff; }
.btn-tech:hover { background: var(--tech-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(2,132,199,.7); }
.btn-emp { background: var(--emp); color: #fff; }
.btn-emp:hover { background: var(--emp-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(234,88,12,.7); }
.btn-edu { background: var(--edu); color: #fff; }
.btn-edu:hover { filter: brightness(1.07); color: #fff; }
.btn-tech, .btn-emp, .btn-edu { clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.btn-ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.h-link { font-weight: 700; color: var(--tech-strong); display: inline-flex; align-items: center; gap: 0.4rem; }
.h-link:hover { gap: 0.6rem; }
.h-link.emp { color: var(--emp-strong); }
.h-link.light { color: #bae6fd; }
.h-link.light.emp { color: #fdba74; }
.btn:focus-visible, .h-link:focus-visible, .h-tab:focus-visible, .h-aud-btn:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }

/* Header on the marketing pages: two audience buttons */
.navbar-home .nav-links a { font-weight: 600; }
.h-nav-cta { display: flex; gap: 0.5rem; align-items: center; }
.h-nav-cta .btn { padding: 0.6rem 1rem; font-size: 0.9rem; }
@media (max-width: 1180px) { .navbar-home .nav-links { gap: 1.1rem; } .navbar-home .nav-links a { font-size: 0.85rem; } }
@media (max-width: 1060px) { .h-nav-cta .btn-emp { display: none; } }
@media (max-width: 520px) { .h-nav-cta .btn-tech .h-hide-sm { display: none; } .auth-buttons .btn-ghost { padding: 0.5rem 0.6rem; } }

/* ---------- HERO ---------- */
.h-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: calc(72px + 4.5rem) 0 5rem;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(2,132,199,.35), transparent 60%),
    radial-gradient(800px 420px at -10% 110%, rgba(234,88,12,.18), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800));
}
.h-hero::before { /* blueprint grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
}
.h-hero .container { position: relative; z-index: 1; }
.h-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 4rem; align-items: center; }

.h-aud-switch {
  display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); margin-bottom: 1.75rem;
}
.h-aud-btn {
  border: 0; cursor: pointer; border-radius: 999px; padding: 0.55rem 1.1rem;
  font: 700 0.9rem var(--font-body); color: rgba(255,255,255,.75); background: transparent;
  display: inline-flex; align-items: center; gap: 0.45rem; transition: var(--transition);
}
.h-aud-btn:hover { color: #fff; }
.h-aud-btn[aria-selected="true"][data-aud="tech"] { background: var(--tech); color: #fff; }
.h-aud-btn[aria-selected="true"][data-aud="emp"] { background: var(--emp); color: #fff; }

.h-hero h1 { color: #fff; font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.9rem); line-height: 1.04; margin: 0.6rem 0 1.25rem; letter-spacing: 0.005em; }
.h-hero h1 .hl-tech { color: #7dd3fc; }
.h-hero h1 .hl-emp { color: #fdba74; }
.h-hero h1 span { color: #7dd3fc; }
.h-hero p.h-sub { color: rgba(255,255,255,.86); font-size: 1.15rem; max-width: 560px; margin-bottom: 1.5rem; }
.h-hero .h-kicker { color: #7dd3fc; }
.h-hero [data-aud-panel="emp"] .h-kicker { color: #fdba74; }
.h-checks { list-style: none; display: grid; gap: 0.55rem; margin: 0 0 2rem; }
.h-checks li { display: flex; gap: 0.65rem; align-items: flex-start; color: rgba(255,255,255,.92); }
.h-checks li i { margin-top: 0.3rem; color: #4ade80; }
.h-cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.h-cta-note { margin-top: 1rem; font-size: 0.85rem; color: rgba(255,255,255,.65); display: flex; align-items: center; gap: 0.45rem; }
[data-aud-panel][hidden] { display: none !important; }

/* Product frame (browser chrome around a real screenshot) */
.h-frame {
  position: relative; border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.h-frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #eef2f6; border-bottom: 1px solid var(--border); }
.h-frame-bar span { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.h-frame-bar span:nth-child(1) { background: #f87171; } .h-frame-bar span:nth-child(2) { background: #fbbf24; } .h-frame-bar span:nth-child(3) { background: #34d399; }
.h-frame-bar em { margin-left: 10px; font: 500 0.72rem var(--font-mono); font-style: normal; color: var(--text-muted); background: #fff; border-radius: 6px; padding: 3px 10px; flex: 1; max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-frame img { display: block; width: 100%; height: auto; }
.h-hero-visual { position: relative; }
.h-hero-visual .h-frame { transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
.h-float {
  position: absolute; left: -2rem; bottom: -1.5rem; z-index: 2;
  background: #fff; color: var(--ink); border-radius: 12px; padding: 0.85rem 1rem;
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.45); display: flex; gap: 0.75rem; align-items: center; max-width: 290px;
}
.h-float i { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--success-light); color: var(--success); }
.h-float strong { display: block; font-size: 0.9rem; }
.h-float small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; display: block; }
.h-float.emp i { background: var(--emp-soft); color: var(--emp-strong); }

/* ---------- TRUST BAR ---------- */
.h-trust { background: var(--navy-900); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.h-trust-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.h-trust-item { padding: 1.6rem 1.25rem; display: flex; gap: 0.8rem; align-items: flex-start; border-left: 1px solid rgba(255,255,255,.08); }
.h-trust-item:first-child { border-left: 0; padding-left: 0; }
.h-trust-item i { color: #7dd3fc; font-size: 1.15rem; margin-top: 0.15rem; }
.h-trust-item strong { display: block; font-size: 0.95rem; line-height: 1.3; }
.h-trust-item > div > span { font-size: 0.8rem; color: rgba(255,255,255,.65); line-height: 1.4; display: block; margin-top: 0.2rem; }

/* ---------- WHAT VERIFIED MEANS ---------- */
.h-verify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.h-steps { list-style: none; counter-reset: v; display: grid; gap: 1rem; }
.h-step {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem;
  padding: 1.4rem 1.4rem 1.4rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff;
}
.h-step-icon { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: var(--tech-soft); color: var(--tech-strong); }
.h-step.result .h-step-icon { background: var(--success-light); color: #047857; }
.h-step h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.h-step p { font-size: 0.95rem; margin: 0; }
.h-step .h-step-num { position: absolute; top: 1rem; right: 1.2rem; font: 600 0.7rem var(--font-mono); color: var(--text-muted); letter-spacing: 0.1em; }
.h-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.h-chip { font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--bg-elevated); color: var(--text); }
.h-honest { margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: var(--radius-lg); background: var(--warning-light); color: var(--warning-soft); font-size: 0.9rem; display: flex; gap: 0.7rem; }
.h-honest i { margin-top: 0.2rem; }
.h-honest p { color: inherit; margin: 0; }
.h-verify-visual { position: sticky; top: 100px; }
.h-verify-visual figcaption { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.85rem; text-align: center; }

/* ---------- PRODUCT TOUR ---------- */
.h-tour-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.h-tour-group { font: 600 0.7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); align-self: center; margin: 0 0.25rem 0 0.75rem; }
.h-tour-group:first-child { margin-left: 0; }
.h-tab {
  border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer;
  font: 600 0.9rem var(--font-body); padding: 0.55rem 0.95rem; border-radius: 999px; display: inline-flex; gap: 0.45rem; align-items: center; transition: var(--transition);
}
.h-tab:hover { border-color: var(--tech); color: var(--tech-strong); }
.h-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.h-tab[data-aud="emp"][aria-selected="true"] { background: var(--emp); border-color: var(--emp); }
.h-tab[data-aud="tech"][aria-selected="true"] { background: var(--tech); border-color: var(--tech); }
.h-tour-panel { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 3rem; align-items: center; }
.h-tour-panel[hidden] { display: none; }
.h-tour-copy h3 { font-size: 1.9rem; margin-bottom: 0.6rem; }
.h-tour-copy ul { list-style: none; display: grid; gap: 0.6rem; margin: 1.25rem 0 1.5rem; }
.h-tour-copy li { display: flex; gap: 0.6rem; color: var(--text-light); }
.h-tour-copy li i { color: var(--success); margin-top: 0.3rem; }
.h-tour-shot .h-frame { box-shadow: 0 30px 60px -30px rgba(15,23,42,.45), 0 0 0 1px var(--border); }
.h-tour-shot .h-frame.portrait { max-width: 560px; margin: 0 auto; }
.h-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.75rem; }

/* ---------- EMPLOYER OUTCOME ---------- */
.h-emp { background: linear-gradient(180deg, #fff7ed, #fff); }
.h-pipeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 3.5rem; counter-reset: p; }
.h-pipe { position: relative; padding: 1.5rem 1.4rem 1.4rem; background: #fff; border: 1px solid #fed7aa; }
.h-pipe:first-child { border-radius: 12px 0 0 12px; }
.h-pipe:last-child { border-radius: 0 12px 12px 0; }
.h-pipe + .h-pipe { border-left: 0; }
.h-pipe::after {
  content: ""; position: absolute; right: -11px; top: 50%; width: 20px; height: 20px; z-index: 1;
  background: #fff; border-top: 1px solid #fed7aa; border-right: 1px solid #fed7aa; transform: translateY(-50%) rotate(45deg);
}
.h-pipe:last-child::after { display: none; }
.h-pipe i { color: var(--emp); font-size: 1.3rem; }
.h-pipe h3 { font-size: 1.25rem; margin: 0.6rem 0 0.3rem; }
.h-pipe p { font-size: 0.88rem; margin: 0; }
.h-pipe .h-pipe-n { font: 600 0.7rem var(--font-mono); color: var(--emp-strong); letter-spacing: .1em; float: right; }
.h-outcomes { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; }
.h-outcome-list { display: grid; gap: 1.2rem; }
.h-outcome { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; }
.h-outcome i { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--emp-soft); color: var(--emp-strong); }
.h-outcome h4 { font-size: 1.15rem; margin-bottom: 0.15rem; }
.h-outcome p { margin: 0; font-size: 0.95rem; }

/* ---------- PRICING (single explanation) ---------- */
.h-price-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
.h-free { display: grid; gap: 0.9rem; margin-top: 1.75rem; }
.h-free-row { display: flex; gap: 0.9rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff; }
.h-free-row i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.h-free-row .t { background: var(--tech-soft); color: var(--tech-strong); }
.h-free-row .s { background: var(--edu-soft); color: var(--edu); }
.h-free-row strong { display: block; }
.h-free-row span { font-size: 0.88rem; color: var(--text-muted); }
.h-free-row .h-free-price { margin-left: auto; font: 800 1.4rem var(--font-heading); text-transform: uppercase; color: var(--ink); }
.h-plans { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.h-plans-head { padding: 1.25rem 1.5rem; background: var(--navy-800); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.h-plans-head h3 { color: #fff; font-size: 1.4rem; }
.h-plans-head p { color: rgba(255,255,255,.75); font-size: 0.85rem; margin: 0; }
.h-plan { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; padding: 1.3rem 1.5rem; border-top: 1px solid var(--border); align-items: center; }
.h-plan:first-of-type { border-top: 0; }
.h-plan.featured { background: #fff7ed; box-shadow: inset 4px 0 0 var(--emp); }
.h-plan-name { font: 800 1.35rem var(--font-heading); text-transform: uppercase; color: var(--ink); display: flex; gap: 0.6rem; align-items: center; }
.h-plan-name small { font: 700 0.65rem var(--font-mono); letter-spacing: .1em; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--emp); color: #fff; }
.h-plan-price { text-align: right; font: 800 1.7rem var(--font-heading); color: var(--ink); white-space: nowrap; }
.h-plan-price span + span { font: 500 0.85rem var(--font-body); color: var(--text-muted); text-transform: none; }
.h-plan-feats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.88rem; color: var(--text-light); }
.h-plan-feats span i { color: var(--success); margin-right: 0.3rem; }
.h-plans-foot { padding: 1.1rem 1.5rem; background: var(--bg); border-top: 1px solid var(--border); display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.h-plans-foot p { margin: 0; font-size: 0.85rem; }

/* ---------- SPLIT CTA ---------- */
.h-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.h-split-card { position: relative; overflow: hidden; border-radius: 18px; padding: 2.6rem; color: #fff; min-height: 340px; display: flex; flex-direction: column; }
.h-split-card.tech { background: linear-gradient(140deg, #075985, #0b1626 85%); }
.h-split-card.emp { background: linear-gradient(140deg, #9a3412, #1c1208 85%); }
.h-split-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; border-radius: 50%; border: 36px solid rgba(255,255,255,.06); }
.h-split-card h3 { color: #fff; font-size: 2.1rem; margin: 0.6rem 0 0.75rem; }
.h-split-card p { color: rgba(255,255,255,.85); max-width: 440px; }
.h-split-card .h-kicker { color: #bae6fd; }
.h-split-card.emp .h-kicker { color: #fed7aa; }
.h-split-card .h-cta-row { margin-top: auto; padding-top: 1.75rem; }
.h-split-card .btn-light { background: #fff; color: var(--ink); clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%); }
.h-split-card .btn-light:hover { transform: translateY(-1px); color: var(--ink); }
.h-schools-strip { margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 14px; border: 1px solid #a7f3d0; background: #ecfdf5; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.h-schools-strip p { margin: 0; color: #065f46; }
.h-schools-strip i { color: var(--edu); margin-right: 0.4rem; }

/* ---------- FAQ ---------- */
.h-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 0.75rem; }
.h-faq details { border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; padding: 0 1.25rem; }
.h-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 0; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; gap: 1rem; }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after { content: "+"; font: 700 1.3rem var(--font-mono); color: var(--tech); line-height: 1; }
.h-faq details[open] summary::after { content: "\2013"; }
.h-faq details p { padding-bottom: 1.1rem; margin: 0; }

/* ---------- For Schools page ---------- */
.h-hero.edu { background:
    radial-gradient(1000px 480px at 90% -10%, rgba(5,150,105,.35), transparent 60%),
    linear-gradient(180deg, var(--navy-900), var(--navy-800)); }
.h-hero.edu .h-kicker { color: #6ee7b7; }
.h-hero.edu h1 span { color: #6ee7b7; }
.h-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.h-benefit { padding: 1.6rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.h-benefit i { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--edu-soft); color: var(--edu); font-size: 1.15rem; margin-bottom: 1rem; }
.h-benefit h3 { font-size: 1.3rem; margin-bottom: 0.4rem; }
.h-benefit p { font-size: 0.95rem; margin: 0; }
.h-steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; counter-reset: s; }
.h-steps-row li { list-style: none; position: relative; padding: 1.4rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); }
.h-steps-row li::before { counter-increment: s; content: "0" counter(s); font: 600 0.8rem var(--font-mono); color: var(--edu); display: block; margin-bottom: 0.5rem; letter-spacing: .1em; }
.h-steps-row h4 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.h-steps-row p { font-size: 0.9rem; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .h-trust-grid { grid-template-columns: repeat(3, 1fr); }
  .h-trust-item:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 960px) {
  .h-section { padding: 4.5rem 0; }
  .h-hero { padding: calc(64px + 2.5rem) 0 3.5rem; }
  .h-hero-grid, .h-verify-grid, .h-tour-panel, .h-outcomes, .h-price-wrap, .h-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .h-hero-visual .h-frame { transform: none; }
  .h-float { left: 0.75rem; bottom: -1.25rem; }
  .h-verify-visual { position: static; max-width: 520px; margin: 0 auto; }
  .h-pipeline { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .h-pipe, .h-pipe:first-child, .h-pipe:last-child { border-radius: 12px; border: 1px solid #fed7aa; }
  .h-pipe::after { display: none; }
  .h-benefits { grid-template-columns: 1fr 1fr; }
  .h-steps-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .h-trust-grid { grid-template-columns: 1fr 1fr; }
  .h-trust-item, .h-trust-item:first-child { border-left: 0; padding: 1rem 0; }
  .h-trust-item:last-child { grid-column: 1 / -1; }
  .h-pipeline, .h-benefits, .h-steps-row { grid-template-columns: 1fr; }
  .h-split-card { padding: 1.8rem; min-height: 0; }
  .h-plan { grid-template-columns: 1fr; }
  .h-plan-price { text-align: left; }
  .h-aud-btn { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
  .h-tour-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
  .h-tab { flex-shrink: 0; }
  .h-tour-group { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .h-hero-visual .h-frame { transform: none; }
  .btn-tech:hover, .btn-emp:hover { transform: none; }
}

/* Grid children must be allowed to shrink below their content width, or a
   wide screenshot pushes the whole hero off the side of a phone screen. */
.h-hero-grid > *, .h-verify-grid > *, .h-tour-panel > *, .h-outcomes > *, .h-price-wrap > *, .h-split > * { min-width: 0; }
.h-page { overflow-x: hidden; }
@media (max-width: 640px) {
  .h-hero h1, .h-hero .h1-like { font-size: 2.2rem !important; }
  .h-step { grid-template-columns: 44px 1fr; padding: 1.1rem; }
  .h-step-icon { width: 44px; height: 44px; font-size: 1.1rem; }
  .h-step .h-step-num { position: static; display: block; grid-column: 1 / -1; margin-bottom: -0.4rem; }
  .h-float { position: relative; left: auto; bottom: auto; margin: -1.5rem auto 0; }
}

/* v40: the Tech Verified Card is shown as the card itself - no browser
   window chrome around it - with the card's own rounded corners. */
.h-frame.h-card-shot { background: transparent; border-radius: 16px; }
.h-tour-shot .h-frame.h-card-shot { box-shadow: 0 30px 60px -28px rgba(15,23,42,.45); }
.h-frame.h-card-shot img { border-radius: 16px; }
/* v40: no 3D tilt on the hero screenshot - browsers redraw a perspective-
   transformed image at a lower quality, which softened the text in it. */
.h-hero-visual .h-frame { transform: none; }

/* v40: even line breaks in big headings (no one-word last line). */
.h-hero h1, .h-hero .h1-like, .h-title, .h-split-card h3 { text-wrap: balance; }

/* ---------- v41: live product components ----------
   The examples on the marketing pages are the site's real components,
   rendered as HTML with sample data (not screenshots), so their text is as
   sharp as everything else on the page at any zoom level or screen
   density. `inert` on the inner wrapper keeps their buttons and links from
   being clicked or tabbed to; the <figure> carries a description for
   screen readers. */
.h-live { margin: 0; position: relative; }
.h-live [inert] { pointer-events: none; user-select: none; -webkit-user-select: none; }
.h-live-card .tech-card-id { max-width: 560px; margin: 0 auto; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.h-live-search { background: #f1f5f9; border-radius: 18px; padding: 1rem; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.h-live-grid { grid-template-columns: 1fr 1fr !important; gap: 0.85rem !important; }
.h-live-grid > * { min-width: 0; margin: 0 !important; }
.h-live-panel .card { margin: 0 !important; box-shadow: 0 30px 60px -30px rgba(15,23,42,.35), 0 0 0 1px var(--border); border-radius: 14px; overflow: hidden; }
.h-live-school { display: grid; gap: 1rem; background: #f1f5f9; border-radius: 18px; padding: 1rem; box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
.h-live-school .card { margin: 0 !important; }
.h-live-school .grid { margin: 0 !important; gap: 1rem; }
.h-hero-visual .h-live + .h-float { bottom: -3rem; left: -1.5rem; }
@media (max-width: 1100px) { .h-live-grid { grid-template-columns: 1fr !important; } .h-live-grid > *:nth-child(2) { display: none; } }
@media (max-width: 640px) { .h-live-school .grid { grid-template-columns: 1fr; } }
.h-live-search .pro-card-about { display: none; }
/* School dashboard example: three cards stacked, trimmed to the essentials. */
.h-live-school .card-body > p:first-child { display: none; }
.h-live-school .card-body > div:last-child:not(.funnel):has(.btn-ghost) { display: none; }
.h-live-school .card-header { padding: 0.9rem 1.2rem; }
.h-live-school .card-header h3 { font-size: 1.1rem; }
.h-live-school .card-body { padding: 1rem 1.2rem; }
.h-live-school .funnel-row { grid-template-columns: 110px 1fr 40px; }
/* Live examples sit inside dark heroes: reset the inherited white text. */
.h-live { color: var(--text); text-align: left; }
.h-live .card, .h-live .pro-card { color: var(--text); }
.h-live-note { font-size: 0.75rem; color: var(--text-muted); text-align: right; margin-top: 0.6rem; }
.h-hero .h-live-note { color: rgba(255,255,255,.55); }
.h-hero .h-live + .h-float { bottom: -2rem; }