/* Hourkey — Landing v3 Qi Men identity */

.hero { padding: 70px 0 60px; border-bottom: 1px solid var(--line-soft); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--gap-xl); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--gap-lg); } .hero { padding: 40px 0 50px; } }

.hero .eyebrow {
  display: inline-block;
  color: var(--gold-primary);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: var(--gap-md);
  font-weight: 600;
  font-family: var(--font-cn), var(--font-sans);
}
.hero h1 { margin-bottom: var(--gap-lg); }
.hero .subtitle {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 540px;
  margin: 0 0 var(--gap-md);
  line-height: 1.6;
}
.hero .qimen-intro {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 540px;
  margin: 0 0 var(--gap-lg);
  line-height: 1.7;
  padding: var(--gap-md);
  border-left: 3px solid var(--gold-primary);
  background: var(--gold-bg);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.hero .qimen-intro strong { color: var(--gold-primary); }
.hero .ctas { display: flex; gap: var(--gap-md); flex-wrap: wrap; margin-top: var(--gap-md); }
.hero .micro-cta { color: var(--text-dim); font-size: 12px; margin-top: var(--gap-md); }

@media (max-width: 900px) {
  .hero-text { text-align: center; }
  .hero .ctas { justify-content: center; }
  .hero .subtitle, .hero .qimen-intro { margin-left: auto; margin-right: auto; }
}

/* Live preview card with Qi Men badge */
.live-preview {
  position: relative;
  text-align: left;
  border: 1px solid var(--gold-bg);
  background: linear-gradient(180deg, var(--card-elevated), var(--navy-deep));
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--gold-bg);
  padding-top: 36px;
}
.live-preview::before {
  content: '';
  position: absolute; top: 0; left: 24px; right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
  opacity: 0.6;
}
.qimen-badge {
  position: absolute;
  top: 8px; left: 16px;
  font-family: var(--font-cn);
  font-size: 11px;
  color: var(--gold-primary);
  letter-spacing: 1px;
  font-weight: 600;
}
.live-preview.level-1 { border-color: var(--l1-strong); }
.live-preview.level-2 { border-color: var(--l2-cond); }
.live-preview.level-3 { border-color: var(--l3-observe); }
.live-preview.level-4 { border-color: var(--l4-reduce); }
.live-preview.level-5 { border-color: var(--l5-avoid); }
.live-preview.level-6 { border-color: var(--l6-stand); }

.live-preview .label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gap-sm); }
.live-preview .label { color: var(--text-dim); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-family: var(--font-sans); }
.live-preview .yam-cn { font-family: var(--font-cn); color: var(--gold-primary); font-size: 18px; font-weight: 600; }
.live-preview .yam-range { display: block; color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; margin: 0 0 var(--gap-md); }
.live-preview .mode-display { display: flex; align-items: baseline; gap: var(--gap-md); margin-bottom: 4px; }
.live-preview .mode-label { font-size: 28px; font-weight: 800; line-height: 1.1; }
.live-preview .mode-en { font-size: 13px; }
.live-preview .countdown { color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; margin-top: var(--gap-md); }
.live-preview .qimen-values { margin-top: var(--gap-md); padding-top: var(--gap-md); border-top: 1px solid var(--line-soft); }
.live-preview .preview-error { margin-top: var(--gap-md); }

/* Section block */
section.block { padding: 60px 0; border-bottom: 1px solid var(--line-soft); }
section.block .section-eyebrow {
  color: var(--gold-primary);
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: var(--gap-sm);
  font-weight: 600;
}
section.block h2 { margin-bottom: var(--gap-lg); }

/* IS NOT / IS */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }
.is-not, .is-this { padding: var(--gap-lg); border-radius: var(--r-lg); }
.is-not { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.18); }
.is-this { background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.18); }
.is-not h3 { color: var(--l5-avoid); }
.is-this h3 { color: var(--l1-strong); }
.is-not ul, .is-this ul { list-style: none; padding: 0; margin-top: var(--gap-md); }
.is-not li, .is-this li { padding: 6px 0; color: var(--text-muted); }

/* Trust mini */
.trust-mini h2 { max-width: 760px; }
.trust-copy { color: var(--text-muted); font-size: 17px; line-height: 1.7; max-width: 760px; }
.trust-copy strong { color: var(--gold-primary); font-weight: 600; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
.step { padding: var(--gap-lg); transition: transform 0.18s, border-color 0.18s; }
.step:hover { transform: translateY(-2px); border-color: var(--gold-primary); }
.step .num { color: var(--gold-primary); font-family: var(--font-mono); font-size: 14px; margin-bottom: var(--gap-sm); font-weight: 700; }
.step h3 { margin-bottom: var(--gap-sm); }
.step p { color: var(--text-muted); font-size: 14px; }

/* Pricing / Beta Access */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; } }
.tier { padding: var(--gap-lg); position: relative; transition: transform 0.18s, border-color 0.18s; }
.tier:hover { transform: translateY(-2px); }
.tier.tier-active { border-color: var(--gold-primary); box-shadow: 0 0 0 1px var(--gold-bg), 0 12px 40px rgba(200,164,92,0.12); }
.tier.tier-coming { opacity: 0.85; }
.tier-badge {
  position: absolute; top: -10px; left: var(--gap-lg);
  background: var(--gold-primary); color: var(--navy-deepest);
  padding: 4px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
}
.tier .tier-name { color: var(--gold-primary); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.tier .tier-price { font-size: 32px; font-weight: 800; margin: var(--gap-sm) 0; line-height: 1.2; }
.tier .tier-features { list-style: none; padding: 0; margin-top: var(--gap-md); }
.tier .tier-features li { padding: 6px 0; color: var(--text-muted); font-size: 14px; }

/* Mini Timeline + Day Stat (Landing preview) */
.mini-tl-section { padding: 50px 0; }
.mini-tl-card { padding: var(--gap-lg); }
.mini-tl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); margin-bottom: var(--gap-lg); }
@media (max-width: 600px) { .mini-tl-stats { grid-template-columns: repeat(2, 1fr); } }
.mini-stat { display: flex; align-items: center; gap: 8px; padding: 10px var(--gap-sm); background: var(--navy-medium); border-radius: var(--r-sm); border: 1px solid var(--line-soft); }
.mini-stat .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.mini-stat .dot.l1 { background: var(--l1-strong); }
.mini-stat .dot.l3 { background: var(--l3-observe); }
.mini-stat .dot.l4 { background: var(--l4-reduce); }
.mini-stat .dot.l6 { background: var(--l6-stand); }
.mini-stat .k { color: var(--text-muted); font-size: 13px; flex: 1; }
.mini-stat .v { color: var(--text-primary); font-weight: 700; }

.mini-tl-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; padding: var(--gap-md) 0; }
@media (max-width: 768px) { .mini-tl-bars { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 480px) { .mini-tl-bars { grid-template-columns: repeat(4, 1fr); } }

.mini-bar {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 4px;
  border-radius: var(--r-sm);
  background: var(--navy-medium);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s, border-color 0.15s;
  cursor: pointer;
}
.mini-bar:hover { transform: translateY(-2px); border-color: var(--gold-primary); }
.mini-bar.current { border-color: var(--gold-primary); box-shadow: 0 0 0 1px var(--gold-bg); }
.mini-bar.l1 { background: linear-gradient(180deg, var(--navy-medium) 30%, var(--l1-strong)); }
.mini-bar.l2 { background: linear-gradient(180deg, var(--navy-medium) 30%, var(--l2-cond)); }
.mini-bar.l3 { background: linear-gradient(180deg, var(--navy-medium) 30%, var(--l3-observe)); }
.mini-bar.l4 { background: linear-gradient(180deg, var(--navy-medium) 30%, var(--l4-reduce)); }
.mini-bar.l5 { background: linear-gradient(180deg, var(--navy-medium) 30%, var(--l5-avoid)); }
.mini-bar.l6 { background: linear-gradient(180deg, var(--navy-medium) 30%, var(--l6-stand)); }

.mini-bar-yam { font-family: var(--font-cn); color: var(--gold-primary); font-size: 16px; font-weight: 600; }
.mini-bar-time { color: var(--text-muted); font-size: 10px; }
.mini-bar-score { color: white; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }

.mini-tl-best { padding-top: var(--gap-md); border-top: 1px solid var(--line-soft); }
.mini-tl-best .best-label { color: var(--gold-primary); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; font-family: var(--font-cn), var(--font-sans); }
.mini-tl-best .best-row { display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; }

.mini-tl-cta { margin-top: var(--gap-lg); text-align: center; }
.mini-tl-cta button { padding: 12px 24px; }

/* ★ Lookback Lite */
.lookback-section { background: linear-gradient(180deg, transparent, rgba(200,164,92,0.04), transparent); }
.lookback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: start; }
@media (max-width: 900px) { .lookback-grid { grid-template-columns: 1fr; } }

.lookback-form { padding: var(--gap-lg); }
.lookback-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); margin-bottom: var(--gap-md); }
@media (max-width: 600px) { .lookback-form-row { grid-template-columns: 1fr; } }

.lookback-field { display: flex; flex-direction: column; gap: 6px; }
.lookback-field label { color: var(--text-muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.lb-input {
  background: var(--navy-medium);
  border: 1px solid var(--navy-border);
  color: var(--text-primary);
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s;
  width: 100%;
}
.lb-input:focus { outline: none; border-color: var(--gold-primary); }
.lb-input::-webkit-calendar-picker-indicator { filter: invert(1) brightness(0.8); cursor: pointer; }

.lookback-error { margin-top: var(--gap-md); padding: var(--gap-sm) var(--gap-md); background: rgba(239,68,68,0.1); border-left: 3px solid var(--l5-avoid); border-radius: var(--r-sm); }

.lookback-result { padding: var(--gap-lg); border-color: var(--gold-bg); }
.lb-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--gap-md); flex-wrap: wrap; gap: var(--gap-sm); }
.lb-mode-display { padding: var(--gap-md) 0; }
.lb-mode-display .mode-label { display: block; line-height: 1.1; }

.lb-score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); margin-top: var(--gap-md); }
.lb-stat { text-align: center; padding: var(--gap-md); background: var(--navy-medium); border-radius: var(--r-sm); border: 1px solid var(--line-soft); }
.lb-stat .v { font-family: var(--font-mono); font-size: 24px; color: var(--gold-primary); font-weight: 700; line-height: 1; }
.lb-stat .v.cn-emph { font-family: var(--font-cn); }
.lb-stat .k { color: var(--text-muted); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }

.lb-summary {
  font-size: 16px; color: var(--text-primary); line-height: 1.6;
  padding: var(--gap-md);
  background: var(--navy-medium);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--gold-primary);
}

.lb-context { padding-top: var(--gap-md); border-top: 1px solid var(--line-soft); }
.lb-ctx-row { display: grid; grid-template-columns: 90px 1fr; gap: var(--gap-md); padding: 6px 0; }
.lb-ctx-k { color: var(--text-dim); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.lb-ctx-v { color: var(--text-primary); font-size: 14px; }

.lb-learning {
  margin-top: var(--gap-md);
  padding: var(--gap-md);
  background: rgba(148,163,184,0.06);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.lb-extra-note {
  margin-top: var(--gap-sm);
  padding: var(--gap-md);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.6;
}
.lb-extra-note.warn { background: rgba(245,158,11,0.1); border-left: 3px solid var(--l2-cond); color: var(--text-primary); }
.lb-extra-note.go { background: rgba(16,185,129,0.08); border-left: 3px solid var(--l1-strong); color: var(--text-primary); }

.lookback-ctas { display: flex; gap: var(--gap-md); flex-wrap: wrap; }
.lookback-ctas button { flex: 1; min-width: 160px; }

.lookback-loading { padding: var(--gap-lg); text-align: center; }

/* FAQ */
.faq-item { padding: var(--gap-lg) 0; border-bottom: 1px solid var(--line-soft); }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 { margin-bottom: var(--gap-sm); color: var(--gold-primary); }
.faq-item p { color: var(--text-muted); }
.faq-item p strong { color: var(--text-primary); }