/* Nihao Plan component styles. Colors, spacing and radii come from nihao-plan-tokens.css. */
body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.7; margin: 0; }
.np-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-6); }

.np-btn { font: 500 16px/1.2 var(--font-sans); border-radius: var(--radius-pill); padding: 14px 24px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; gap: var(--space-2); align-items: center; text-decoration: none; }
.np-btn--primary { background: var(--action); color: var(--on-action); }
.np-btn--primary:hover { background: var(--action-hover); }
.np-btn--secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.np-btn--secondary:hover { background: var(--surface); }
.np-btn--on-red { background: var(--on-red); color: #0f0f0f; }
.np-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.np-btn[disabled] { opacity: .45; cursor: not-allowed; }

.np-eyebrow { font: 400 14px/1.7 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); display: inline-flex; align-items: center; gap: var(--space-2); }
.np-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nihao-red); }
.np-tag { font: 500 13px/1.4 var(--font-sans); border-radius: var(--radius-sm); padding: var(--space-1) 10px; display: inline-block; }
.np-tag--warning { background: var(--red-soft); color: var(--red-on-soft); }
.np-tag--neutral { background: var(--surface); color: var(--ink-muted); }

.np-place { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-6); display: grid; gap: var(--space-1); max-width: 420px; }
.np-place__zh { font: 700 28px/1.3 var(--font-zh); color: var(--ink); margin-top: var(--space-2); }
.np-place__en { font: 600 24px/1.4 var(--font-sans); letter-spacing: -0.02em; }
.np-place__pinyin, .np-place__addr { font-size: 14px; color: var(--ink-muted); }
.np-place__addr { font-family: var(--font-zh); }

.np-hero { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; background: #9bb8c8 center / cover no-repeat; color: var(--on-red); }
.np-hero__nav { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) 5%; }
.np-hero__nav img { height: 56px; }
.np-hero__poster { position: absolute; left: 0; right: 0; top: 9%; text-align: center; font: 400 clamp(72px, 16vw, 200px)/.9 var(--font-poster); letter-spacing: -0.01em; color: var(--nihao-red); margin: 0; }
.np-hero__copy { position: absolute; right: 5%; bottom: 7%; padding: var(--space-6); background: rgba(255,255,255,.88); border-radius: var(--radius-md); backdrop-filter: blur(8px); max-width: 440px; display: grid; gap: var(--space-4); justify-items: start; }
.np-hero__title { font: 500 52px/1.05 var(--font-sans); letter-spacing: -0.05em; margin: 0; color: #0f0f0f; }

.np-cta { background: var(--nihao-red); color: var(--on-red); border-radius: var(--radius-lg); padding: var(--space-20) var(--space-6); display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.np-cta__title { font: 500 56px/1.1 var(--font-sans); letter-spacing: -0.05em; margin: 0; max-width: 14ch; }
.np-cta__domain { font-size: 14px; opacity: .9; }
@media (max-width: 720px) { .np-hero { aspect-ratio: 4 / 5; } .np-hero__nav { padding: var(--space-4); } .np-hero__nav .np-btn { display: none; } .np-hero__nav img { height: 40px; } .np-hero__poster { top: 20%; font-size: 64px; } .np-hero__copy { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); padding: var(--space-4); } .np-hero__title { font-size: 32px; } .np-cta__title { font-size: 36px; } }