/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE — v3.0 · Technical Premium
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.h-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 48px;
  overflow: hidden;
}

/* Engineering dot-grid */
.h-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(212,176,104,.09) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* Vignette — keeps text readable */
.h-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 20%, var(--bg) 75%);
  pointer-events: none;
}

.h-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

.h-spec-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--gold);
  opacity: .55;
  text-transform: uppercase;
  margin: 0 0 36px;
}

.h-h1 {
  font-family: var(--sacred);
  font-size: clamp(52px, 9vw, 96px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 22px;
}
.h-h1__em {
  font-style: italic;
  color: var(--gold);
  display: block;
}

.h-hero__sub {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink55);
  max-width: 420px;
  margin: 0 auto 36px;
}

/* Primary CTA button */
.h-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gold);
  color: #16140F;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: var(--r);
  text-decoration: none;
  font-weight: 500;
  transition: opacity .18s, transform .18s;
}
.h-btn:hover { opacity: .85; transform: translateY(-1px); }

.h-hero__note {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink30);
  letter-spacing: .08em;
}

/* Metrics bar */
.h-metrics {
  position: relative;
  z-index: 1;
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--ln2);
  padding-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.h-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.h-metric__n {
  font-family: var(--mono);
  font-size: 24px;
  color: var(--gold);
  line-height: 1;
}
.h-metric__l {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
  color: var(--ink30);
  text-transform: uppercase;
}
.h-metric__sep {
  font-size: 16px;
  color: var(--ln3);
  margin-bottom: 12px;
  user-select: none;
}

/* ── SHARED LAYOUT ────────────────────────────────────────────────────────── */
.h-container      { max-width: 980px; margin: 0 auto; padding: 0 28px; }
.h-container--narrow { max-width: 640px; }

.h-section        { padding: 96px 0; border-top: 1px solid var(--ln); }
.h-section--alt   { background: var(--bg2); }

.h-section__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 52px;
}
.h-sec-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  opacity: .45;
  letter-spacing: .12em;
  padding-top: 7px;
  flex-shrink: 0;
  min-width: 24px;
}
.h-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.h-eyebrow--sage   { color: var(--sage); }
.h-eyebrow--violet { color: var(--violet); }

.h-h2 {
  font-family: var(--sacred);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}
.h-body {
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink55);
  max-width: 480px;
}

/* ── SECTION 01 — BODYGRAPH ──────────────────────────────────────────────── */
.h-bg-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 52px;
  align-items: start;
}

.h-param-table {
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  overflow: hidden;
}
.h-param-row {
  display: grid;
  grid-template-columns: 26px 148px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ln);
  transition: background .15s;
}
.h-param-row:last-child { border-bottom: none; }
.h-param-row:hover { background: rgba(212,176,104,.035); }

.h-param-row__n {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--gold);
  opacity: .5;
  line-height: 1.6;
}
.h-param-row__name {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--ink70);
  text-transform: uppercase;
  line-height: 1.55;
}
.h-param-row__desc {
  font-size: 11px;
  color: var(--ink40);
  line-height: 1.5;
}

/* Bodygraph SVG */
.h-bg-demo {
  position: sticky;
  top: 72px;
}
.h-demo-label {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .16em;
  color: var(--gold);
  opacity: .5;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.h-demo-link { display: block; }
.h-demo-link svg, .h-demo-link > div { width: 100%; height: auto; }
.h-demo-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink30);
  margin-top: 10px;
  text-align: center;
  letter-spacing: .06em;
}

/* ── SECTION 02 — TRANSITI ───────────────────────────────────────────────── */
.h-transit-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}

/* Feature list */
.h-feat-list { list-style: none; padding: 0; margin: 0; }
.h-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ln);
}
.h-feat-item:first-child { border-top: 1px solid var(--ln); }

.h-feat-item__icon {
  width: 28px; height: 28px;
  border-radius: var(--r);
  background: var(--violet-bg);
  border: 1px solid var(--violet-ln);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.h-feat-item__name {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .07em;
  color: var(--ink70);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.h-feat-item__desc {
  font-size: 11px;
  color: var(--ink40);
  line-height: 1.5;
}

/* Transit mock panel */
.h-transit-panel {
  background: var(--bg3);
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  overflow: hidden;
  font-family: var(--mono);
}
.h-tp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ln2);
  background: rgba(212,176,104,.04);
}
.h-tp-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sage);
  opacity: .8;
  flex-shrink: 0;
}
.h-tp-header__label {
  font-size: 8.5px;
  letter-spacing: .16em;
  color: var(--gold);
  opacity: .75;
  text-transform: uppercase;
}
.h-tp-header__date {
  font-size: 8.5px;
  color: var(--ink30);
  margin-left: auto;
  letter-spacing: .06em;
}

.h-tp-body { padding: 4px 0; }
.h-tp-row {
  display: grid;
  grid-template-columns: 18px 70px 58px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(237,228,204,.035);
  transition: background .1s;
}
.h-tp-row:last-child { border-bottom: none; }
.h-tp-row:hover { background: var(--ink06); }

.h-tp-row__sym   { font-size: 12px; text-align: center; opacity: .75; }
.h-tp-row__planet{ font-size: 8.5px; letter-spacing: .1em; color: var(--ink40); text-transform: uppercase; }
.h-tp-row__gate  { font-size: 10px; color: var(--gold); }
.h-tp-row__kw    { font-size: 10px; color: var(--ink40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.h-tp-footer {
  padding: 11px 16px;
  border-top: 1px solid var(--ln2);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.h-tp-footer__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  color: var(--ink40);
  letter-spacing: .04em;
}
.h-tp-footer__item::before {
  content: '▸';
  color: var(--gold);
  opacity: .65;
  flex-shrink: 0;
}

/* Link button variants */
.h-link-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-ln);
  padding-bottom: 2px;
  transition: opacity .2s;
}
.h-link-btn:hover { opacity: .65; }
.h-link-btn--sage   { color: var(--sage);   border-bottom-color: var(--sage-ln); }
.h-link-btn--violet { color: var(--violet); border-bottom-color: var(--violet-ln); }

/* ── SECTION 03 — RESONANCE ─────────────────────────────────────────────── */
.h-res-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
.h-res-points { list-style: none; padding: 0; margin: 18px 0 28px; display: flex; flex-direction: column; gap: 11px; }
.h-res-points li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--ink55); line-height: 1.55;
}
.h-res-points li::before {
  content: '◆';
  color: var(--sage);
  font-size: 7px;
  margin-top: 5px;
  flex-shrink: 0;
}
.h-composite-wrap {
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  overflow: hidden;
  background: var(--card);
}
.h-res-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink40);
  letter-spacing: .06em;
  flex-wrap: wrap;
}
.h-dot { color: var(--ln3); }

/* ── SECTION 04 — COME FUNZIONA ─────────────────────────────────────────── */
.h-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ln2);
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  overflow: hidden;
}
.h-step { background: var(--bg); padding: 36px 28px; }
.h-section--alt .h-step { background: var(--bg2); }
.h-step__n {
  font-family: var(--mono);
  font-size: 32px;
  color: var(--gold);
  opacity: .22;
  line-height: 1;
  margin-bottom: 18px;
}
.h-step__title {
  font-family: var(--sacred);
  font-size: 19px;
  color: var(--ink80);
  margin-bottom: 10px;
}
.h-step__text { font-size: 12px; color: var(--ink50); line-height: 1.7; }

/* ── PWA ────────────────────────────────────────────────────────────────── */
.h-pwa-section { padding: 52px 0; background: var(--bg2); }
.h-pwa-block {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  padding: 20px 24px;
  background: var(--bg3);
  flex-wrap: wrap;
}
.h-pwa-logo { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
.h-pwa-title { font-size: 14px; color: var(--ink80); font-weight: 500; margin-bottom: 3px; }
.h-pwa-sub   { font-size: 12px; color: var(--ink40); }
.h-pwa-buttons { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.h-pwa-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--gold-bg);
  border: 1px solid var(--gold-ln);
  color: var(--gold);
  padding: 10px 18px;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s;
}
.h-pwa-btn:hover { background: rgba(212,176,104,.14); }

/* ── CTA FINALE ─────────────────────────────────────────────────────────── */
.h-cta { padding: 100px 0; text-align: center; border-top: 1px solid var(--ln); }
.h-cta__inner { max-width: 480px; margin: 0 auto; padding: 0 24px; }
.h-cta__logo { width: 44px; margin-bottom: 28px; opacity: .75; }
.h-cta__title {
  font-family: var(--sacred);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 300;
  color: var(--ink);
  margin: 10px 0 14px;
  line-height: 1.15;
}
.h-cta__sub { font-size: 14px; color: var(--ink50); margin-bottom: 32px; line-height: 1.7; }
.h-cta__login { margin-top: 18px; font-size: 12px; color: var(--ink30); }
.h-cta__login a { color: var(--gold); text-decoration: none; }
.h-cta__login a:hover { opacity: .7; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .h-bg-layout,
  .h-transit-layout,
  .h-res-layout  { grid-template-columns: 1fr; }
  .h-bg-demo     { display: none; }
  .h-composite-wrap { max-height: 320px; overflow: hidden; }
}

@media (max-width: 680px) {
  .h-hero    { padding: 72px 20px 40px; min-height: unset; }
  .h-section { padding: 64px 0; }
  .h-steps   { grid-template-columns: 1fr; }
  .h-step    { padding: 24px 20px; }
  .h-param-row { grid-template-columns: 22px 120px 1fr; gap: 10px; }
  .h-pwa-block { flex-direction: column; align-items: flex-start; }
  .h-pwa-buttons { margin-left: 0; }
}

@media (max-width: 440px) {
  .h-metrics    { gap: 16px 20px; }
  .h-metric__sep { display: none; }
  .h-param-row  { grid-template-columns: 22px 1fr; }
  .h-param-row__desc { display: none; }
  .h-tp-row     { grid-template-columns: 18px 60px 1fr; }
  .h-tp-row__kw { display: none; }
}

/* ═══ SECTION 03 — MANDALA ══════════════════════════════════════════════════ */
.h-mandala-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 48px;
  align-items: start;
}
.h-mandala-wrap {
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  overflow: hidden;
  background: var(--card);
  aspect-ratio: 1;
  max-width: 580px;
}
.h-mandala-wrap .mandala-svg { width: 100%; height: 100%; }
.h-mandala-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.h-mleg-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink50);
  letter-spacing: .06em;
}
.h-mleg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.h-mandala-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--ln);
  padding-top: 20px;
}
.h-mstat { display: flex; align-items: baseline; gap: 8px; }
.h-mstat__n {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
}
.h-mstat__l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--ink30);
  text-transform: uppercase;
}

/* ═══ SECTION 04 — I-CHING / ESAGRAMMA ═════════════════════════════════════ */
.h-hex-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: start;
}
.h-hex-card {
  background: var(--bg3);
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  padding: 32px 28px;
}
.h-hex-card__sym {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  width: 130px;
}
.h-hexl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 18px;
}
.h-hexl--cur .h-hexbar { box-shadow: 0 0 12px rgba(143,212,198,.5); }
.h-hexbar {
  height: 14px;
  border-radius: 3px;
}
.h-hexbar--yang {
  width: 112px;
  background: linear-gradient(90deg, #d8b45a, #b89038);
}
.h-hexl--cur .h-hexbar--yang {
  background: linear-gradient(90deg, #8fd4c6, #5e9468);
}
.h-hexbar--yin {
  width: 48px;
  background: linear-gradient(90deg, #d8b45a, #b89038);
}
.h-hexl--cur .h-hexbar--yin {
  background: linear-gradient(90deg, #8fd4c6, #5e9468);
}
.h-hexl__n {
  position: absolute;
  right: -18px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink30);
}
.h-hexl--cur .h-hexl__n { color: #8fd4c6; font-weight: 600; }

.h-hex-card__gnum {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--gold);
  opacity: .65;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.h-hex-card__gname {
  font-family: var(--sacred);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink80);
  margin-bottom: 4px;
}
.h-hex-card__kw {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink40);
  letter-spacing: .08em;
  margin-bottom: 22px;
}
.h-hex-detail {
  background: rgba(143,212,198,.05);
  border: 1px solid rgba(143,212,198,.12);
  border-radius: var(--r);
  padding: 16px;
}
.h-hex-detail__label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .14em;
  color: #8fd4c6;
  opacity: .7;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.h-hex-detail__keynote {
  font-family: var(--sacred);
  font-size: 17px;
  color: #8fd4c6;
  margin-bottom: 10px;
  font-style: italic;
}
.h-hex-detail__desc {
  font-size: 12px;
  color: var(--ink50);
  line-height: 1.65;
}

.h-hex-explain { padding-top: 8px; }
.h-hex-explain__p {
  font-size: 14px;
  color: var(--ink55);
  line-height: 1.72;
  margin-bottom: 18px;
}
.h-hex-explain__lines {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--ln2);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px;
}
.h-hexline-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--ln);
  transition: background .15s;
}
.h-hexline-item:last-child { border-bottom: none; }
.h-hexline-item--cur { background: rgba(143,212,198,.06); }
.h-hexline-item__n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gold);
  opacity: .6;
  min-width: 14px;
}
.h-hexline-item--cur .h-hexline-item__n { color: #8fd4c6; opacity: 1; }
.h-hexline-item__name {
  font-size: 12px;
  color: var(--ink50);
}
.h-hexline-item--cur .h-hexline-item__name { color: #8fd4c6; }

/* ═══ SECTION 06 — PIANI ════════════════════════════════════════════════════ */
.h-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.h-plan-card {
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  padding: 0;
  overflow: hidden;
  position: relative;
}
.h-plan-card--free { background: var(--card); }
.h-plan-card--sup  { background: var(--card2); border-color: var(--gold-ln); }

.h-plan-card__badge {
  background: var(--gold-bg);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 20px;
  border-bottom: 1px solid var(--gold-ln);
  text-align: center;
}
.h-plan-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--ln);
  flex-wrap: wrap;
  gap: 12px;
}
.h-plan-card__name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink40);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.h-plan-card__price {
  font-family: var(--sacred);
  font-size: 28px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}
.h-plan-card__price-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink30);
  letter-spacing: .08em;
  margin-top: 4px;
}
.h-plan-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .18s;
  flex-shrink: 0;
}
.h-plan-btn:hover { opacity: .8; }
.h-plan-btn--free {
  background: rgba(216,208,194,.08);
  color: var(--ink60);
  border: 1px solid var(--ln2);
}
.h-plan-btn--sup {
  background: var(--gold);
  color: #16140F;
}
.h-plan-includes {
  padding: 12px 24px 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--gold);
  opacity: .7;
  text-transform: uppercase;
}
.h-plan-group {
  padding: 8px 24px 16px;
}
.h-plan-group__title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink30);
  text-transform: uppercase;
  margin-bottom: 10px;
  margin-top: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ln);
}
.h-plan-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 12px;
  color: var(--ink60);
  line-height: 1.5;
}
.h-plan-item--sup { color: var(--ink70); }
.h-plan-check {
  width: 14px; height: 14px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
  opacity: .7;
}
.h-plan-item--sup .h-plan-check { opacity: 1; }
.h-plan-note {
  padding: 12px 24px 20px;
  font-size: 11px;
  color: var(--ink30);
  font-style: italic;
  border-top: 1px solid var(--ln);
  line-height: 1.5;
}

/* ═══ RESPONSIVE AGGIORNATO ════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .h-mandala-layout { grid-template-columns: 1fr; }
  .h-mandala-wrap   { max-width: 100%; }
  .h-mandala-side   { display: flex; gap: 32px; flex-wrap: wrap; align-items: start; }
  .h-mandala-legend, .h-mandala-stats { flex: 1; min-width: 160px; }
  .h-hex-layout     { grid-template-columns: 1fr; }
  .h-plans-grid     { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .h-hex-card__sym  { width: 110px; }
  .h-hexbar--yang   { width: 92px; }
  .h-hexbar--yin    { width: 40px; }
  .h-plan-card__head { flex-direction: column; align-items: flex-start; }
}

/* ═══ MERGE SECTION ═════════════════════════════════════════════════════════ */
.h-merge-section { padding: 80px 0; }
.h-h2--center { text-align: center; }


/* ── Hero logo: sigillo centrato sopra l'eyebrow ──────────────── */
.h-hero__logo {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 22px auto;
  object-fit: contain;
  /* Filtro subtle per integrarsi col tema scuro/chiaro senza forzature */
  opacity: .95;
  filter: drop-shadow(0 4px 14px rgba(181, 144, 58, .14));
  transition: transform .6s cubic-bezier(.2, .8, .3, 1), opacity .4s ease;
}
.h-hero__logo:hover {
  transform: scale(1.04);
  opacity: 1;
}
@media (max-width: 640px) {
  .h-hero__logo {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .h-hero__logo { transition: none; }
  .h-hero__logo:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME · aggiunte del refactor
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cielo stellato ────────────────────────────────────────────────────────
   Il canvas lo inserisce home-stars.js dentro [data-home-stars]. Sta DIETRO
   al contenuto della hero, mai davanti: pointer-events:none perche' non deve
   intercettare nulla, e la maschera lo fa sparire verso il basso cosi' il
   testo delle sezioni successive resta su fondo pulito. */
.h-hero { position: relative; isolation: isolate; }
.h-stars {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Sfuma negli ultimi 30%: le stelle si spengono prima del bordo invece di
     tagliarsi netto sulla riga della sezione successiva. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}
.h-stars__cv { display: block; width: 100%; height: 100%; }
.h-hero__inner, .h-metrics { position: relative; z-index: 1; }

/* ── Identita' della carta mostrata ───────────────────────────────────────── */
.h-chart-id {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: center;
}
.h-chart-id li { display: flex; flex-direction: column; gap: 2px; }
.h-chart-id span {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink30);
}
.h-chart-id strong {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}

/* ── Impronta STUDIO ─────────────────────────────────────────────────────── */
.h-studio-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 34px;
}
.h-studio-shot {
  margin: 0;
  border: 1px solid var(--ink10);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg2);
}
.h-studio-shot img {
  display: block; width: 100%; height: auto;
}
.h-studio-shot figcaption {
  padding: 10px 14px;
  font-size: 11.5px; line-height: 1.5; color: var(--ink60);
  border-top: 1px solid var(--ink10);
}
.h-studio-note {
  margin-top: 26px;
  font-size: 12.5px; color: var(--ink60);
}
.h-studio-cta { margin-top: 14px; }

@media (max-width: 720px) {
  .h-studio-grid { grid-template-columns: 1fr; gap: 16px; }
  .h-chart-id { gap: 8px 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO "LIVE" — la carta a sinistra, il form a destra
   ═══════════════════════════════════════════════════════════════════════════
   Vedi la nota di progetto in views/home/partials/hero_live.php. In breve:
   chi arriva ha già quattro schede aperte con lo stesso servizio e decide in
   un secondo guardando, non leggendo. Quindi sopra la piega ci vanno la PROVA
   (una carta vera, che si tocca) e l'AZIONE (il form), non un'introduzione.

   I colori vengono TUTTI dai token globali (--gold, --ink, --bg, --mono): è la
   stessa tavolozza dell'app, così l'ingresso non è uno stacco rispetto a quello
   che si trova dentro.
   ─────────────────────────────────────────────────────────────────────────── */

.h-hero--live {
  display: block;
  text-align: left;
  padding: 96px 24px 56px;
  min-height: auto;
}

.h-hero__grid {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  /* La carta prende piu' spazio del form: e' lei l'argomento. */
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* ── La carta ─────────────────────────────────────────────────────────────── */
.h-hero__chart { min-width: 0; }

.h-chart {
  position: relative;
  border: 1px solid var(--gold-ln);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(var(--gold-rgb), .05), transparent 60%);
  padding: 18px;
}
.h-chart__stage { width: 100%; }
.h-chart__stage svg { width: 100%; height: auto; display: block; }
/* La figura umana in filigrana dentro bodygraph.svg ha opacity="0.18", tarata
   per la pagina della lettura dove sta su fondo chiaro e larga. Nell'hero, su
   fondo scuro e accanto al testo, a quel valore compete con la carta e sembra
   il soggetto. Si abbassa QUI e non nell'SVG: quel file lo condividono la
   lettura, il Field e Studio, dove la filigrana va bene com'è. */
.h-chart__stage svg #figure { opacity: .05; }

/* Riepilogo: tipo, profilo, autorita'. Sono le tre parole che un utente HD
   cerca per prime, e dicono in un colpo solo che qui non ci si ferma al
   disegno — si legge. */
.h-chart__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 16px;
}
.h-fact { display: flex; flex-direction: column; gap: 2px; }
.h-fact__k {
  font: 400 9.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.h-fact__v { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Disclaimer: dice di chi sono i dati, e soprattutto CHE COSA si sta
   guardando — senza, chi non conosce l'HD vede un diagramma e basta. */
.h-chart__note {
  margin-top: 14px;
  font: 400 10.5px/1.5 var(--mono);
  letter-spacing: .05em;
  color: var(--ink);
  opacity: .42;
}
/* .h-chart__hint rimossa insieme al suo elemento: la carta dell'hero non è
   cliccabile e l'invito a interagire è stato tolto (vedi hero_live.php). */

/* ── Il form ──────────────────────────────────────────────────────────────── */
.h-hero__form { min-width: 0; }
.h-hero__form .h-hero__logo { margin: 0 0 18px; }
.h-hero--live .h-h1 { text-align: left; }
.h-hero--live .h-hero__sub {
  text-align: left;
  margin: 12px 0 26px;
  max-width: 46ch;
}

.h-form { display: flex; flex-direction: column; gap: 14px; }
.h-form__row { position: relative; display: flex; flex-direction: column; gap: 6px; }
.h-form__label {
  font: 400 9.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.h-form__input { width: 100%; }
.h-form__submit { margin-top: 6px; width: 100%; text-align: center; }
.h-hero--live .h-hero__note { text-align: center; margin-top: 10px; }

/* La lista dell'autocomplete deve stare SOPRA la carta e sopra il campo
   successivo: senza z-index finisce sotto e si vede a meta'. */
.h-form__row .autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
}

/* ── MOBILE ───────────────────────────────────────────────────────────────
   Sotto i 900 px lo split non regge. L'ordine cambia, e non e' un dettaglio:
   la CARTA VA PRIMA DEL FORM. Su telefono si scorre, e la prima cosa che
   compare deve essere la prova — chiedere tre campi a qualcuno che non ha
   ancora visto niente e' il modo piu' rapido di farlo uscire.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .h-hero--live { padding: 72px 18px 40px; }
  .h-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .h-hero__chart { order: 1; }
  .h-hero__form  { order: 2; }

  /* Il titolo sta SOPRA la carta anche se il form viene dopo: serve una riga
     che dica dove si e' atterrati, prima di mostrare un diagramma. */
  .h-hero--live .h-h1 { font-size: clamp(30px, 8vw, 42px); }
  .h-hero--live .h-hero__sub { margin: 10px 0 20px; font-size: 15px; }

  .h-chart { padding: 12px; }
  .h-chart__facts { gap: 8px 16px; margin-top: 12px; }
  .h-chart__note { font-size: 9.5px; }
}

@media (max-width: 560px) {
  .h-hero--live { padding: 60px 14px 32px; }
  /* La carta e' alta e stretta: su schermi piccoli va contenuta, altrimenti
     occupa due schermate e il form finisce fuori dallo scroll iniziale. */
  .h-chart__stage svg { max-height: 62svh; margin: 0 auto; }
  .h-hero__form .h-hero__logo { width: 44px; height: 44px; }
  .h-fact__v { font-size: 13px; }
}

/* Chi ha chiesto meno animazioni non deve ricevere il campo stellato. */
@media (prefers-reduced-motion: reduce) {
  .h-hero--live .h-stars { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   B · "E POI NON FINISCE"  +  C · "NEL MONDO"
   ═══════════════════════════════════════════════════════════════════════════
   Vedi la nota di progetto in views/home/partials/more_world.php.
   ─────────────────────────────────────────────────────────────────────────── */

.h-more__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.h-eyebrow {
  font: 400 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 14px;
}
.h-h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.18; margin: 0 0 14px; }
.h-lead { font-size: 16px; line-height: 1.65; opacity: .78; margin: 0; }

/* ── Le schermate ─────────────────────────────────────────────────────────── */
.h-more__grid {
  display: grid;
  /* Sei schermate: tre colonne su desktop, due sotto i 1100, una su telefono.
     A due colonne le immagini uscivano enormi e la sezione diventava lunga il
     doppio dell'hero. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
@media (max-width: 1100px) { .h-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h-shot { min-width: 0; }
.h-shot__frame {
  border: 1px solid var(--gold-ln);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(var(--gold-rgb), .04);
  /* Rapporto fisso: le schermate hanno proporzioni diverse fra loro e senza
     questo la griglia si scalinerebbe. object-fit ritaglia dall'alto, dove
     sta sempre la parte che si riconosce. */
  aspect-ratio: 16 / 10;
}
.h-shot__frame img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
.h-shot__title { font-size: 17px; margin: 16px 0 6px; }
.h-shot__body  { font-size: 14.5px; line-height: 1.6; opacity: .74; margin: 0; }

/* ── La mappa ─────────────────────────────────────────────────────────────── */
.h-world__map {
  max-width: 980px;
  margin: 8px auto 0;
  /* Niente altezza fissa: l'SVG e' responsive e si adatta da solo. */
}
.h-world__map svg { width: 100%; height: auto; display: block; }
/* I paesi spenti restano appena percettibili: e' la scena, non l'informazione. */
.h-world__map svg path,
.h-world__map svg g { fill: var(--ink); fill-opacity: .07; transition: fill-opacity .4s; }
/* I paesi accesi. Nessun numero, in home: vedi homeCountryCodes() nel
   controller — una cifra piccola lavora contro e invecchia da sola. */
.h-world__map .is-on,
.h-world__map .is-on path { fill: var(--gold); fill-opacity: .82; }

/* ── MOBILE ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .h-more__head { margin-bottom: 28px; text-align: left; }
  .h-more__grid { grid-template-columns: 1fr; gap: 26px; }
  .h-lead { font-size: 15px; }
}
@media (max-width: 560px) {
  .h-shot__frame { aspect-ratio: 16 / 11; }
  .h-shot__title { font-size: 16px; margin-top: 13px; }
  .h-shot__body  { font-size: 14px; }
  /* Sotto una certa larghezza la mappa non si legge piu': meglio toglierla che
     mostrarne una versione illeggibile. Il titolo e il testo restano. */
  .h-world__map { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO — correzioni di misura e form sul fondo scuro
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La carta non deve schiacciare il resto ───────────────────────────────
   A piena colonna riempiva l'altezza dello schermo e il titolo finiva a
   competere con lei. Un tetto in altezza la riporta a essere la PROVA accanto
   al messaggio, non il messaggio. */
.h-hero--live .h-chart { max-width: 560px; margin-inline: auto; }
.h-chart__stage svg { max-height: 74svh; margin: 0 auto; }

/* ── Form: il calcolatore vive su fondo chiaro, l'hero no ─────────────────
   .form-input e il time-picker prendono i colori di app.css, tarati per la
   pagina del calcolatore: fondo bianco, bordo scuro. Sull'hero scuro
   uscivano due rettangoli bianchi accecanti (HH · MM) e un select di sistema.
   Qui si riscrivono per QUESTO contesto, senza toccare il componente: sulla
   pagina del calcolatore resta esattamente com'è. */
.h-form .form-input,
.h-form .tp__field {
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--gold-ln);
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color .2s, background .2s;
}
.h-form .form-input::placeholder { color: var(--ink); opacity: .32; }
.h-form .form-input:focus,
.h-form .tp__field:focus-within {
  outline: none;
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), .07);
}
/* L'icona del calendario nativa e' nera su fondo scuro: si inverte. */
.h-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .45; cursor: pointer;
}

/* Time picker: i due campi e il selettore 24h/12h dentro un contenitore solo,
   cosi' da leggersi come un unico campo come gli altri due. */
.h-form .tp { width: 100%; }
.h-form .tp__field { display: flex; align-items: center; gap: 2px; padding: 6px 10px; }
.h-form .tp__hh,
.h-form .tp__mm {
  width: 3ch; flex: 0 0 auto;
  background: transparent; border: 0; outline: none;
  color: var(--ink);
  font: 600 16px/1.5 var(--mono);
  text-align: center;
}
.h-form .tp__hh::placeholder,
.h-form .tp__mm::placeholder { color: var(--ink); opacity: .3; font-weight: 400; }
.h-form .tp__sep { color: var(--gold-dim); font: 600 16px/1 var(--mono); }
.h-form .tp__ampm {
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--gold-ln);
  border-radius: 6px;
  color: var(--gold-dim);
  font: 400 10px/1 var(--mono);
  letter-spacing: .08em;
  padding: 5px 7px;
  cursor: pointer;
}
.h-form .tp__ampm option { background: var(--bg); color: var(--ink); }
/* Toggle 24h/12h. Le classi sono .tp__toggle e .tp__toggle-btn — lette dal
   componente, non indovinate: nel primo giro avevo scritto .tp__fmt, che non
   esiste, e i due bottoni restavano quelli grezzi del browser. */
.h-form .tp__toggle {
  margin-left: auto; display: flex; gap: 2px;
  border: 1px solid var(--gold-ln); border-radius: 6px; overflow: hidden;
}
.h-form .tp__toggle-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink); opacity: .5;
  font: 400 10px/1 var(--mono); letter-spacing: .06em;
  padding: 6px 8px;
}
.h-form .tp__toggle-btn.is-active,
.h-form .tp__toggle-btn[aria-pressed="true"] {
  background: rgba(var(--gold-rgb), .16); color: var(--gold); opacity: 1;
}

/* La lista dell'autocomplete deve stare sul tema scuro, non bianca. */
.h-form__row .autocomplete-list {
  background: #1c1913;
  border: 1px solid var(--gold-ln);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
  max-height: 260px; overflow-y: auto;
  list-style: none; padding: 0;
}
.h-form__row .autocomplete-item,
.h-form__row .autocomplete-list li {
  padding: 10px 14px; font-size: 14px; color: var(--ink); cursor: pointer;
}
.h-form__row .autocomplete-item:hover,
.h-form__row .autocomplete-list li:hover,
.h-form__row .autocomplete-list li.is-active { background: rgba(var(--gold-rgb), .12); }

@media (max-width: 560px) {
  .h-chart__stage svg { max-height: 56svh; }
  .h-hero--live .h-chart { max-width: 100%; }
}

/* ── La carta: misura definitiva ───────────────────────────────────────────
   Il bodygraph è verticale e stretto: a piena colonna diventa altissimo e
   spinge fuori schermo il resto dell'hero. Il vincolo che conta è l'ALTEZZA,
   non la larghezza — 62svh lascia sempre spazio ai fatti sotto e al titolo
   accanto senza che si debba scorrere per capire dove si è atterrati. */
.h-hero--live .h-chart { max-width: 430px; padding: 14px; }
.h-chart__stage svg { max-height: 62svh; }

/* I canali sospesi usano gli stili NATIVI di bodygraph-theme.css, gli stessi
   della pagina della lettura. Qui avevo messo un opacity:.38 per "attenuarli":
   sbagliato due volte — non erano troppo forti, semplicemente non venivano
   disegnati (mancava window.HD_LANE_DATA), e abbassarli li ha resi invisibili
   anche una volta risolto. Una carta si legge come si legge ovunque nel sito. */

/* ── Marchio: nome + cosa c'è dentro ──────────────────────────────────────
   Il logo da solo non dice niente a chi non conosce il sito. La riga sotto è
   l'unico posto della pagina dove si dichiara la PORTATA del prodotto in
   quattro parole — prima che il visitatore concluda "ennesimo calcolatore". */
.h-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.h-brand__mark { width: 42px; height: 42px; object-fit: contain; flex: none; }
.h-brand__what {
  font: 400 10px/1.3 var(--mono);
  letter-spacing: .07em;
  color: var(--gold-dim);
  opacity: .9;
}

/* ── Hero più compatto ────────────────────────────────────────────────────
   Titolo e carta scendevano entrambi oltre la piega: nessuno dei due arrivava
   intero al primo sguardo. Si riducono insieme, mantenendo le proporzioni. */
.h-hero--live { padding: 56px 24px 40px; }
.h-hero--live .h-h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; }
.h-hero--live .h-hero__sub { font-size: 15px; margin: 10px 0 22px; max-width: 42ch; }
.h-hero--live .h-chart { max-width: 360px; padding: 12px; }
.h-chart__stage svg { max-height: 52svh; }

/* ── I fatti sotto la carta ───────────────────────────────────────────────
   Erano tre coppie etichetta/valore allineate a sinistra, che si leggevano
   come l'inizio di un modulo. Su una riga sola, centrati sotto la carta e
   separati, diventano quello che sono: la carta d'identità del grafico. */
.h-chart__facts {
  justify-content: center;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid var(--gold-ln);
  padding-top: 12px;
}
.h-fact { align-items: center; text-align: center; padding: 0 clamp(12px, 2vw, 22px); }
.h-fact + .h-fact { border-left: 1px solid var(--gold-ln); }
.h-fact__k { font-size: 9px; letter-spacing: .14em; }
.h-fact__v { font-size: 15px; }
.h-chart__note { text-align: center; }

@media (max-width: 900px) {
  .h-hero--live .h-chart { max-width: 320px; }
  .h-chart__stage svg { max-height: 46svh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — respiro
   ═══════════════════════════════════════════════════════════════════════════
   Le regole qui sopra riducono l'hero per farlo stare sopra la piega su
   desktop. Su telefono lo stesso ragionamento non vale: lì si scorre, e
   comprimere non fa entrare più roba — fa solo attaccare tutto. Marchio,
   titolo, carta e form finivano incollati fra loro senza gerarchia.
   Qui si ridà spazio: distanze proporzionate al blocco che separano, e
   ordine di lettura marchio → titolo → carta → form.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .h-hero--live { padding: 40px 20px 44px; }
  .h-hero__grid { gap: 32px; }

  /* Il marchio apre la pagina: sta sopra tutto, anche sopra la carta. */
  .h-brand { order: 0; margin-bottom: 22px; }
  .h-brand__mark { width: 38px; height: 38px; }
  .h-brand__what { font-size: 9.5px; line-height: 1.5; }

  .h-hero--live .h-h1 { font-size: clamp(28px, 7.5vw, 38px); line-height: 1.12; }
  .h-hero--live .h-hero__sub { font-size: 15px; margin: 12px 0 0; }

  /* Il form respira: le etichette sono minuscole e senza spazio finivano
     appiccicate al campo sopra. */
  .h-form { gap: 18px; margin-top: 26px; }
  .h-form__row { gap: 8px; }
  .h-form .form-input,
  .h-form .tp__field { padding: 14px; font-size: 16px; } /* 16px: iOS non zooma */
  .h-form__submit { margin-top: 10px; padding: 16px; }

  .h-chart__facts { margin-top: 16px; padding-top: 14px; }
  .h-chart__note { margin-top: 12px; }
}

/* Sotto i 560 il marchio e il titolo vanno staccati ancora, e la carta
   ridotta: sopra il 46svh il form spariva sotto due schermate di scroll. */
@media (max-width: 560px) {
  .h-hero--live { padding: 32px 16px 40px; }
  .h-hero__grid { gap: 28px; }
  .h-brand { margin-bottom: 20px; gap: 10px; }
  .h-brand__what { font-size: 9px; letter-spacing: .05em; }
  .h-hero--live .h-chart { max-width: 100%; padding: 10px; }
  .h-chart__stage svg { max-height: 44svh; }
  .h-fact { padding: 0 10px; }
  .h-fact__v { font-size: 14px; }
}

/* ── Il marchio deve stare in cima anche quando la carta viene prima ────────
   Su mobile l'ordine è carta → form, ma il marchio è dentro il blocco form:
   senza questo finirebbe DOPO la carta, e la pagina si aprirebbe con un
   diagramma senza nome. Si estrae e si rimette in testa alla griglia. */
@media (max-width: 900px) {
  .h-hero__grid { display: flex; flex-direction: column; }
  .h-hero__chart { order: 2; }
  .h-hero__form  { order: 3; display: contents; }
  .h-hero__form > .h-brand { order: 1; }
  /* "Calcola il tuo BodyGraph" viaggia CON IL FORM, non col titolo.
     Con order:1 finiva sotto il titolo e sopra la carta — cioè lontanissimo
     dai campi a cui si riferisce, dopo una schermata di scroll. È
     un'istruzione: si legge dove si agisce. */
  .h-hero__form > .h-hero__sub { order: 3; margin: 0 0 16px; }
  .h-hero__form > .h-form { order: 4; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RIFINITURA FINALE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Testata dell'hero: centrata ──────────────────────────────────────────
   Logo, nome, categoria e la riga di cosa c'è dentro sono un blocco solo e si
   leggono al centro. Il FORM resta allineato a sinistra: un modulo centrato
   non si compila — l'occhio deve trovare l'inizio di ogni campo sempre nello
   stesso punto. */
.h-brand {
  display: block;
  text-align: center;
  margin: 0 0 26px;
}
.h-brand__mark { width: 52px; height: 52px; margin: 0 auto 16px; display: block; }
.h-hero--live .h-brand .h-h1 { text-align: center; margin: 0; }
.h-brand__what {
  margin: 14px auto 0;
  font: 400 10.5px/1.5 var(--mono);
  letter-spacing: .1em;
  color: var(--gold-dim);
}
.h-hero--live .h-hero__sub { text-align: center; margin: 14px auto 26px; max-width: 38ch; }

/* ── Le sezioni nuove hanno bisogno del loro contenitore ──────────────────
   .h-section vale `padding: 96px 0` — ZERO orizzontale, perché le sezioni
   originali avevano ciascuna il proprio wrapper interno. Le mie no, e su
   telefono il testo e le immagini finivano incollati ai bordi dello schermo.
   Il padding va sulla sezione, non sui figli: così vale per testata, griglia
   e mappa insieme, e una sezione aggiunta domani lo eredita. */
/* Il padding orizzontale lo dà .h-container, come in tutte le altre
   sezioni della home: qui non si aggiunge nulla, o si sommerebbe. */

@media (max-width: 900px) {
  .h-more, .h-world { padding: 64px 0; }
  .h-brand { margin-bottom: 22px; }
  .h-brand__mark { width: 44px; height: 44px; margin-bottom: 14px; }
  .h-brand__what { font-size: 9.5px; letter-spacing: .07em; margin-top: 12px; }
  .h-hero--live .h-hero__sub { margin: 12px auto 0; }
  /* La testata è dentro il blocco form ma deve aprire la pagina, prima della
     carta: vedi l'ordinamento più sopra. */
  .h-hero__form > .h-brand { order: 1; }
}

@media (max-width: 560px) {
  .h-more, .h-world { padding: 52px 0; }
  .h-brand__what { font-size: 9px; }
}

/* La carta dell'hero non apre dettagli (interactive:false — vedi la nota in
   hero_live.php): il cursore non deve promettere un click che non arriva.
   Resta `help` sugli elementi con tooltip, che è quello che succede davvero. */
.h-chart__stage .hd-gate,
.h-chart__stage .hd-ch,
.h-chart__stage .hd-center { cursor: help; }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM — compatto
   ═══════════════════════════════════════════════════════════════════════════ */

/* Data e ora affiancate: due campi corti su una riga sola. È il blocco di
   altezza che su telefono decide se il pulsante si vede o va cercato. */
.h-form__pair { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; }
.h-form__pair .h-form__row { min-width: 0; }

.h-form .form-input.is-err { border-color: #A83C30; }

/* Compattezza generale: etichette e campi più stretti, senza toglierne la
   leggibilità. */
.h-form { gap: 13px; }
.h-form__row { gap: 5px; }
.h-form .form-input,
.h-form .tp__field { padding: 10px 12px; font-size: 15px; }
.h-form__submit { margin-top: 4px; padding: 13px; }
.h-hero--live .h-hero__note { margin-top: 8px; font-size: 11.5px; }

/* ── MOBILE: altezza ──────────────────────────────────────────────────────
   Qui il vincolo non è la larghezza ma il numero di schermate da scorrere.
   Data e ora restano affiancate, la carta si accorcia, i campi si stringono:
   l'obiettivo è che marchio, carta e form intero stiano in due scroll, non
   in quattro. Il font resta a 16px perché sotto quella soglia iOS zooma da
   solo appena si tocca un campo, e lo zoom costa più di quanto si guadagni. */
@media (max-width: 900px) {
  .h-form { gap: 12px; margin-top: 18px; }
  .h-form__row { gap: 5px; }
  .h-form__pair { gap: 10px; }
  .h-form .form-input,
  .h-form .tp__field { padding: 11px 12px; font-size: 16px; }
  .h-form__submit { margin-top: 6px; padding: 14px; }
  .h-form__label { font-size: 9px; letter-spacing: .1em; }
  .h-chart__stage svg { max-height: 38svh; }
  .h-chart__facts { margin-top: 12px; padding-top: 10px; }
  .h-chart__note { margin-top: 8px; }
  .h-hero__grid { gap: 22px; }
}

@media (max-width: 560px) {
  .h-chart__stage svg { max-height: 34svh; }
  .h-hero--live .h-chart { padding: 8px; }
  /* Sotto i 380 px i due campi affiancati diventano illeggibili: si impilano. */
}
@media (max-width: 380px) {
  .h-form__pair { grid-template-columns: 1fr; }
}