/**
 * Impronta — GUIDA (Learn)
 * Riscrittura completa. Usa solo i design token di tokens.css:
 * funziona in dark e light senza colori hardcoded.
 * Font: --font (Inter) per il corpo, --mod-h (Plus Jakarta Sans) per i numeri/dati.
 */

/* ============================================================
   PAGINA
   ============================================================ */
.learn-page {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-12);
}

/* ============================================================
   HERO
   ============================================================ */
.learn-hero {
  text-align: center;
  padding: var(--sp-8) 0 var(--sp-6);
}
.learn-hero__title {
  font-family:    var(--font);
  font-size:      clamp(28px, 4.5vw, 42px);
  font-weight:    var(--fw-light);
  letter-spacing: -.03em;
  line-height:    var(--lh-tight);
  color:          var(--ink);
  margin:         0 0 var(--sp-3);
}
.learn-hero__intro {
  font-size:   var(--fs-md);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color:       var(--ink60);
  max-width:   520px;
  margin:      0 auto;
}

/* ============================================================
   VIDEO WALKTHROUGH
   ============================================================ */
.yt-wrap {
  margin: var(--sp-8) 0;
  border-radius: var(--rL);
  overflow: hidden;
  border: 1px solid var(--ln2);
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, .35);
}
.yt-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--bg3);
}
.yt-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   FEATURE CARD — link grande al bodygraph
   ============================================================ */
.learn-feature {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--card);
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.learn-feature:hover {
  border-color: var(--gold-ln);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .3);
}
.learn-feature__sw {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.learn-feature__sw i {
  width: 14px;
  height: 14px;
  border-radius: var(--rFull);
  display: block;
}
.learn-feature__t {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--ink);
  margin-bottom: 3px;
}
.learn-feature__d {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--ink55);
  line-height: var(--lh-snug);
}
.learn-feature__arrow {
  margin-left: auto;
  font-size: 22px;
  color: var(--gold);
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.learn-feature:hover .learn-feature__arrow { transform: translateX(4px); }

/* ============================================================
   ACCORDION
   ============================================================ */
.learn-accordion {
  background: var(--card);
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}
.learn-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
}
.learn-accordion__trigger:hover { background: var(--ink06); }
.learn-accordion__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.learn-accordion__arrow {
  font-size: 20px;
  color: var(--gold);
  transition: transform var(--t-base);
  flex-shrink: 0;
}
.learn-accordion.open .learn-accordion__arrow { transform: rotate(90deg); }
.learn-accordion__body {
  display: none;
  padding: 0 var(--sp-6) var(--sp-6);
}
.learn-accordion.open .learn-accordion__body { display: block; }
.learn-accordion__body p {
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink60);
  margin-bottom: var(--sp-3);
}

/* ============================================================
   DEMO INLINE — tre piccoli bodygraph (centri/gate/canali)
   Sfondo scuro caldo fisso: i tracciati cream restano leggibili
   in entrambi i temi.
   ============================================================ */
.learn-inline-demos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
}
.learn-inline-demo {
  text-align: center;
  background: #1F1C16;
  border: 1px solid var(--ln2);
  border-radius: var(--rM);
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
}
.learn-inline-demo__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}
.learn-inline-demo__svg {
  width: 100%;
  height: auto;
  max-height: 180px;
}

/* ============================================================
   DEMO TRANSITO
   ============================================================ */
.learn-transit-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: center;
  margin: var(--sp-4) 0;
}
.learn-transit-demo__text p {
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink60);
  margin-bottom: var(--sp-3);
}
.learn-transit-demo__svg {
  background: #1F1C16;
  border: 1px solid var(--ln2);
  border-radius: var(--rM);
  padding: var(--sp-3);
}
.learn-transit-demo__svg svg {
  width: 100%;
  height: auto;
  max-height: 320px;
  display: block;
}
.learn-transit-demo__legend {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.learn-legend {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.learn-legend::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: var(--rFull);
}
.learn-legend--natal   { color: var(--ink50); }
.learn-legend--natal::before   { background: var(--hd-p); }
.learn-legend--transit { color: var(--ink50); }
.learn-legend--transit::before { background: var(--violet); }

/* ============================================================
   SECTION TITLE / INTRO
   ============================================================ */
.learn-section-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: var(--sp-8) 0 var(--sp-2);
}
.learn-section-intro {
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink55);
  margin-bottom: var(--sp-5);
}

/* ============================================================
   NAV CARDS — griglia componenti (centri/gate/canali)
   ============================================================ */
.learn-nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.learn-nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  padding: var(--sp-6) var(--sp-5);
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.learn-nav-card:hover {
  border-color: var(--gold-ln);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -14px rgba(0, 0, 0, .32);
}
.learn-nav-card__icon {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #1F1C16;
  border-radius: var(--rM);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.learn-nav-card__svg {
  width: auto;
  height: 130px;
  max-width: 100%;
}
.learn-nav-card__body {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.learn-nav-card__count {
  font-family: var(--mod-h);
  font-size: 30px;
  font-weight: var(--fw-medium);
  color: var(--gold);
  line-height: 1;
}
.learn-nav-card__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink50);
}
.learn-nav-card__desc {
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: var(--ink55);
  margin: 0;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.learn-breadcrumb {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--ink40);
  margin-bottom: var(--sp-5);
}
.learn-breadcrumb a { color: var(--ink55); text-decoration: none; transition: color var(--t-fast); }
.learn-breadcrumb a:hover { color: var(--gold); }
.learn-breadcrumb__sep { margin: 0 var(--sp-2); color: var(--ink30); }

/* ============================================================
   DETTAGLIO (centro / gate / canale)
   ============================================================ */
.learn-detail-header {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-6);
  align-items: center;
  margin-bottom: var(--sp-8);
}
.learn-detail-svg {
  background: #1F1C16;
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  padding: var(--sp-4);
}
.learn-detail-svg__img {
  width: 100%;
  height: auto;
  max-height: 240px;
  display: block;
}
.learn-detail-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  letter-spacing: -.03em;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}
.learn-detail-meta {
  font-size: var(--fs-sm);
  color: var(--ink55);
  margin-bottom: var(--sp-3);
}
.learn-detail-meta a { color: var(--gold); text-decoration: none; }
.learn-detail-meta a:hover { text-decoration: underline; }
.learn-detail-kw {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}
.learn-detail-desc {
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-loose);
  color: var(--ink60);
}
.learn-detail-info { min-width: 0; }

/* Stati definito / non definito */
.learn-detail-states {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.learn-state {
  border: 1px solid var(--ln2);
  border-radius: var(--rM);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card2);
}
.learn-state--defined { border-left: 3px solid var(--sage); }
.learn-state--open    { border-left: 3px solid var(--ink30); }
.learn-state__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink50);
  display: block;
  margin-bottom: 4px;
}
.learn-state--defined .learn-state__label { color: var(--sage); }
.learn-state__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-base);
  color: var(--ink60);
}

/* ============================================================
   SUBSECTION
   ============================================================ */
.learn-subsection {
  margin-top: var(--sp-8);
}
.learn-subsection__link {
  color: var(--gold);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.learn-subsection__link:hover { text-decoration: underline; }

/* ============================================================
   GRIGLIA CENTRI
   ============================================================ */
.learn-center-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
}
.learn-center-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--ln2);
  border-radius: var(--rL);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.learn-center-card:hover {
  border-color: var(--gold-ln);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -14px rgba(0, 0, 0, .32);
}
.learn-center-card__svg {
  background: #1F1C16;
  padding: var(--sp-4);
  display: flex;
  justify-content: center;
}
.learn-center-card__svg svg { height: 120px; width: auto; max-width: 100%; }
.learn-center-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.learn-center-card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--ink);
  margin: 0 0 4px;
}
.learn-center-card__desc {
  font-size: var(--fs-sm);
  font-weight: var(--fw-light);
  color: var(--ink55);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}
.learn-center-card__count {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   LISTA GATE
   ============================================================ */
.learn-gate-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-2);
}
.learn-gate-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--ln2);
  border-radius: var(--rM);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.learn-gate-row:hover { border-color: var(--gold-ln); background: var(--card2); }
.learn-gate-row__id {
  font-family: var(--mod-h);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--gold);
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.learn-gate-row__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.learn-gate-row__kw {
  font-size: var(--fs-xs);
  color: var(--ink50);
  font-weight: var(--fw-light);
}
.learn-gate-row__center {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink40);
}

/* ============================================================
   LISTA CANALI
   ============================================================ */
.learn-ch-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.learn-ch-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--card);
  border: 1px solid var(--ln2);
  border-radius: var(--rM);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.learn-ch-row:hover { border-color: var(--gold-ln); background: var(--card2); }
.learn-ch-row__gates {
  font-family: var(--mod-h);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--gold);
  flex-shrink: 0;
  min-width: 56px;
}
.learn-ch-row__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.learn-ch-row__sub {
  font-size: var(--fs-xs);
  font-weight: var(--fw-light);
  color: var(--ink50);
}
.learn-ch-row__circuit {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink40);
  flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 680px) {
  .learn-inline-demos    { grid-template-columns: 1fr; }
  .learn-transit-demo    { grid-template-columns: 1fr; }
  .learn-detail-header   { grid-template-columns: 1fr; text-align: center; }
  .learn-detail-svg      { max-width: 220px; margin: 0 auto; }
  .learn-gate-list       { grid-template-columns: 1fr; }
}

/* ── Le 6 linee del gate (esagramma identico ai transiti) ─────────────────── */
.learn-lines-intro{font-size:14px;color:var(--ink55);line-height:1.6;margin:0 0 16px;max-width:560px}
.learn-lines{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.learn-line-row{display:flex;gap:24px;align-items:flex-start;padding:18px 20px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rL)}
.learn-line-text{flex:1;min-width:0}
.learn-line-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(181,144,58,.75);margin-bottom:4px}
.learn-line-name{font-size:16px;font-weight:500;color:var(--ink);margin-bottom:6px}
.learn-line-desc{font-size:14px;line-height:1.6;color:var(--ink70)}
@media (max-width:560px){.learn-line-row{flex-direction:column;align-items:center;text-align:center}.learn-line-text{text-align:center}.ts-hex-line__num{display:none}}

/* Esagramma — copiato 1:1 dai transiti (le pagine guida non caricano transit.css) */
.ts-hex-symbol{flex-shrink:0;display:flex;flex-direction:column;gap:7px;width:120px;padding:16px;background:rgba(181,144,58,.04);border:1px solid rgba(181,144,58,.14);border-radius:var(--rL)}
.ts-hex-line{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:13px}
.ts-hex-bar{height:11px;border-radius:2px;background:linear-gradient(90deg,#d8b45a,#b89038)}
.ts-hex-bar--yang{width:88px}
.ts-hex-bar--yin{width:38px}
.ts-hex-line--current .ts-hex-bar{background:linear-gradient(90deg,#8fd4c6,#5e9468);box-shadow:0 0 10px rgba(143,212,198,.5)}
.ts-hex-line__num{position:absolute;right:-10px;font-family:var(--mono);font-size:9px;color:var(--ink30)}
.ts-hex-line--current .ts-hex-line__num{color:#8fd4c6;font-weight:600}

/* ── Pagina "Linee": CTA esagrammi + wrap mandala ────────────────────────── */
.learn-lines-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0 8px;padding:18px 24px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--rL);color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;transition:border-color var(--t-base),transform var(--t-fast)}
.learn-lines-cta:hover{border-color:var(--gold);transform:translateY(-1px)}
.learn-lines-cta__arrow{color:var(--gold);font-size:18px;flex:0 0 auto}
.learn-mandala-wrap{margin:8px auto 24px;max-width:600px}
.hex-wheel{display:block;width:100%;height:auto}
.hex-wheel .hw-num{fill:var(--ink40);font-family:var(--mono);font-size:15px}

/* ── Pagine Tipi / Autorità (accordion) ──────────────────────────────────── */
.learn-accordions{margin-top:8px}
.learn-accordions .learn-accordion{margin-bottom:10px}
.learn-type-strategy{display:inline-block;margin-left:10px;padding:2px 11px;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-size:12px;font-weight:500;vertical-align:middle;white-space:nowrap}
.learn-notself-head{margin:22px 0 6px;font-size:15px;color:var(--gold);font-weight:600}
.learn-accordion__body strong{color:var(--ink);font-weight:600}

/* ── Pagina Profili: badge numero (1/3) ──────────────────────────────────── */
.learn-profile-num{display:inline-block;margin-right:12px;padding:2px 10px;border:1px solid var(--gold);border-radius:7px;color:var(--gold);font-family:var(--mono);font-size:13px;font-weight:600;vertical-align:middle}

/* ═══════════════════ GUIDA — redesign premium ═══════════════════════════ */
.g-page{max-width:1040px;margin:0 auto}
/* Hero hub */
.g-hero{position:relative;text-align:center;padding:60px 20px 40px;overflow:hidden}
.g-hero__glyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;max-width:135%;opacity:.05;pointer-events:none;color:var(--gold)}
.g-eyebrow{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:16px;position:relative}
.g-hero__title{font-size:clamp(32px,5.4vw,52px);font-weight:300;letter-spacing:-.02em;line-height:1.07;margin:0 0 16px;position:relative}
.g-hero__title em{font-style:italic;color:var(--gold);font-weight:400}
.g-hero__intro{max-width:560px;margin:0 auto;color:var(--ink60);font-size:16.5px;line-height:1.6;position:relative}
.g-rule{width:46px;height:1px;background:var(--gold);opacity:.55;margin:24px auto 0}
/* Section header */
.g-sec{margin-top:52px}
.g-sec__head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.g-sec__num{font-family:var(--mono);font-size:13px;color:var(--gold);opacity:.8}
.g-sec__title{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink50);white-space:nowrap}
.g-sec__line{flex:1;height:1px;background:var(--ink10)}
/* Cards */
.g-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(224px,1fr));gap:16px}
.g-card{position:relative;display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--ink10);border-radius:var(--rL);padding:26px 24px 22px;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s,box-shadow .35s}
.g-card::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(212,176,104,.10),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.g-card:hover{transform:translateY(-4px);border-color:rgba(212,176,104,.45);box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
.g-card:hover::after{opacity:1}
.g-card__icon{height:80px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--gold)}
.g-card__icon svg{height:100%;width:auto;max-width:100%}
.g-card__icon .bg-mini{height:80px}
.g-card__body{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.g-card__count{font-family:var(--mono);font-size:25px;font-weight:700;color:var(--gold);line-height:1}
.g-card__label{font-size:17px;font-weight:500;letter-spacing:-.01em}
.g-card__desc{font-size:13.5px;color:var(--ink50);line-height:1.5}
/* Page hero con figura */
.g-phero{display:grid;grid-template-columns:1fr 188px;gap:36px;align-items:center;margin:6px 0 34px}
.g-phero__fig{display:flex;justify-content:center}
.g-phero__fig .bg-mini{height:232px}
.g-phero h1{font-size:clamp(27px,4.3vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin:0 0 12px}
.g-phero h1 em{color:var(--gold);font-style:italic}
.g-phero p{color:var(--ink60);font-size:16px;line-height:1.6;max-width:46ch;margin:0}
/* bg-mini */
.bg-mini{display:block;width:auto}
.bg-mini .hd-center.is-dim path{fill:none;stroke:var(--ink20);stroke-width:4}
.bg-mini .hd-center.is-hl path{fill:var(--gold);stroke:var(--gold);stroke-width:2}
.g-phero__fig .bg-mini .hd-center.is-dim path{stroke:rgba(212,176,104,.28)}
/* Accordion premium */
.g-accs{margin-top:8px}
.g-acc{border:1px solid var(--ink10);border-radius:var(--rM);margin-bottom:12px;background:var(--bg2);overflow:hidden;transition:border-color .3s}
.g-acc.open{border-color:rgba(212,176,104,.32)}
.g-acc__trig{display:flex;align-items:center;gap:16px;width:100%;background:none;border:none;color:var(--ink);text-align:left;padding:16px 20px;cursor:pointer;font-family:var(--font)}
.g-acc__trig:hover{background:var(--ink06)}
.g-acc__badge{flex:0 0 auto;width:52px;display:flex;align-items:center;justify-content:center}
.g-acc__badge .bg-mini{height:64px}
.g-acc__pill{flex:0 0 auto;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--gold);border:1px solid var(--gold);border-radius:9px;padding:6px 10px;line-height:1}
.g-acc__tt{flex:1;min-width:0}
.g-acc__name{font-size:18px;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.g-acc__sub{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ink40);margin-top:5px;text-transform:uppercase}
.g-acc__strat{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:2px 10px}
.g-acc__arrow{flex:0 0 auto;color:var(--gold);font-size:20px;opacity:.7;transition:transform .3s}
.g-acc.open .g-acc__arrow{transform:rotate(90deg)}
.g-acc__body{display:none;padding:0 22px 24px}
.g-acc.open .g-acc__body{display:block}
.g-acc__body p{color:var(--ink70);font-size:15px;line-height:1.72;margin-top:14px}
.g-acc__body p:first-child{margin-top:18px}
.g-acc__body strong{color:var(--ink);font-weight:600}
.g-nshead{margin:24px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
/* hexagram pair */
.g-hexpair{display:flex;gap:30px;margin:18px 0 2px;padding:14px 0 18px;border-bottom:1px solid var(--ink06)}
.g-hexcell{text-align:center}
.g-hex{height:60px;display:block;margin:0 auto}
.g-hex text{font-family:var(--mono);font-size:8px}
.g-hexcell figcaption{font-family:var(--mono);font-size:10.5px;color:var(--ink40);margin-top:7px;letter-spacing:.04em}
@media(max-width:680px){.g-phero{grid-template-columns:1fr;text-align:center}.g-phero__fig{order:-1}.g-phero__fig .bg-mini{height:176px}.g-phero p{margin:0 auto}}
.g-phero__fig .g-hex{height:188px}