/* Zanger — component styles. Requires tokens.css (colors, spacing, radius, fonts). Prefix: zg- */
.zg-root, .zg-root * { box-sizing: border-box; }
.zg-root { font-family: var(--font-sans); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 28px; -webkit-font-smoothing: antialiased; }
.zg-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.zg-dot { color: var(--accent-ink); }
.zg-on-brand .zg-dot { color: var(--lime); }

/* Button */
.zg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: var(--radius-0); font: 600 16px/20px var(--font-sans); letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
.zg-btn .zg-arrow { display: inline-block; transition: transform .15s ease; }
.zg-btn:hover .zg-arrow { transform: translateX(3px); }
.zg-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.zg-btn--sm { height: 44px; padding: 0 18px; font-size: 14px; }
.zg-btn--primary { background: var(--lime); color: var(--on-lime); }
.zg-btn--primary:hover { background: var(--lime-hover); }
.zg-btn--brand { background: var(--surface-brand); color: var(--lime); }
.zg-btn--brand:hover { background: var(--surface-brand-raised); }
.zg-btn--brand:focus-visible { outline-color: var(--focus); }
.zg-btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.zg-btn--outline:hover { background: var(--ink); color: var(--paper); }
.zg-btn--outline-inverse { background: transparent; color: var(--on-brand); border-color: var(--on-brand); }
.zg-btn--outline-inverse:hover { background: var(--on-brand); color: var(--surface-brand); }
.zg-on-brand .zg-btn:focus-visible { outline-color: var(--focus-on-brand); }
.zg-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Eyebrow + section heading */
.zg-eyebrow { font: 600 15px/20px var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--space-3); }
.zg-heading { max-width: 820px; }
.zg-heading--center { text-align: center; margin-left: auto; margin-right: auto; }
.zg-heading h2 { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 62px; letter-spacing: -0.01em; margin: 0; }
.zg-heading p.zg-lead { font-size: 20px; line-height: 34px; color: var(--ink-muted); max-width: var(--measure); margin: var(--space-5) 0 0; }
.zg-heading--center p.zg-lead { margin-left: auto; margin-right: auto; }

/* Brand surfaces */
.zg-on-brand { background: var(--surface-brand); color: var(--on-brand); }
.zg-on-brand .zg-muted { color: var(--on-brand-muted); }
.zg-muted { color: var(--ink-muted); }

/* Header */
.zg-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); height: 96px; padding: 0 var(--space-7); background: var(--paper); box-shadow: var(--shadow-header); }
.zg-header__logo img { height: 40px; display: block; }
.zg-header__nav { display: flex; align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.zg-header__nav a { font: 500 16px/20px var(--font-sans); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.zg-header__nav a:hover, .zg-header__nav a[aria-current="page"] { border-bottom-color: var(--accent-ink); }
.zg-header__nav a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Hero */
.zg-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; padding: var(--space-9) var(--space-7); }
.zg-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 76px; letter-spacing: -0.01em; margin: 0; }
.zg-hero p { font-size: 20px; line-height: 34px; margin: var(--space-6) 0 var(--space-7); max-width: 560px; }
.zg-hero__panel { background: var(--surface-brand); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.zg-hero__panel h3 { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 44px; color: var(--on-brand); margin: 0 0 var(--space-3); }

/* Review / rating card */
.zg-rating-card { background: var(--paper-raised); color: var(--ink); padding: 12px 16px; box-shadow: var(--shadow-raised); max-width: 340px; }
.zg-rating-card b { display: block; font: 700 15px/20px var(--font-sans); text-transform: uppercase; letter-spacing: .01em; }
.zg-rating-card span { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.zg-stars { color: var(--star); letter-spacing: 2px; }
.zg-rating-card .zg-stars { color: var(--accent-ink); }

/* Rating bar */
.zg-ratingbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--space-7); background: var(--surface-brand); color: var(--on-brand); flex-wrap: wrap; }
.zg-ratingbar__score { display: flex; align-items: baseline; gap: var(--space-4); font: 700 36px/40px var(--font-sans); color: var(--star); }
.zg-ratingbar__score .zg-stars { font-size: 32px; }
.zg-ratingbar__src { display: flex; align-items: center; gap: var(--space-6); font: 600 20px/28px var(--font-sans); }
.zg-ratingbar__src strong { font: 800 28px/32px var(--font-display); }

/* Icon chip */
.zg-chip-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--lime); }
.zg-chip-icon img { width: 30px; height: 30px; display: block; }

/* Service card */
.zg-service { background: var(--surface-brand-raised); color: var(--on-brand); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.zg-service h3 { font: 600 22px/30px var(--font-sans); text-transform: uppercase; margin: var(--space-2) 0 0; }
.zg-service p { font: 400 15px/24px var(--font-sans); color: var(--on-brand-muted); margin: 0; }
.zg-service a { color: var(--lime); font: 600 14px/20px var(--font-sans); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
.zg-service a:focus-visible { outline: 2px solid var(--focus-on-brand); outline-offset: 3px; }

/* Practice tile */
.zg-practice { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-4); color: var(--ink); text-decoration: none; }
.zg-practice span { font: 600 18px/24px var(--font-sans); }
.zg-practice:hover span { text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 4px; }
.zg-practice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Framed feature list */
.zg-frame { border: var(--border-frame) solid var(--lime); background: var(--paper); }
.zg-features { list-style: none; margin: 0; padding: var(--space-2) var(--space-7); }
.zg-features li { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.zg-features li:last-child { border-bottom: 0; }
.zg-features h4 { font: 600 28px/36px var(--font-sans); margin: 0 0 var(--space-1); }
.zg-features p { margin: 0; color: var(--ink-muted); }

/* FAQ */
.zg-faq { border-top: 1px solid var(--line); }
.zg-faq details { border-bottom: 1px solid var(--line); }
.zg-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; font: 600 22px/30px var(--font-sans); }
.zg-faq summary::-webkit-details-marker { display: none; }
.zg-faq summary::after { content: "+"; font: 400 32px/1 var(--font-sans); color: var(--accent-ink); transition: transform .2s ease; }
.zg-faq details[open] summary::after { transform: rotate(45deg); }
.zg-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.zg-faq .zg-faq__a { padding: 0 0 var(--space-5); color: var(--ink-muted); max-width: var(--measure); }

/* Form */
.zg-field { display: flex; flex-direction: column; gap: 6px; }
.zg-field label { font: 600 14px/20px var(--font-sans); }
.zg-input { height: 52px; padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); font: 400 17px/24px var(--font-sans); }
textarea.zg-input { height: auto; min-height: 120px; padding: 12px var(--space-4); resize: vertical; }
.zg-input::placeholder { color: var(--ink-muted); }
.zg-input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.zg-field--error .zg-input { border-color: var(--danger); }
.zg-field__msg { font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.zg-field--error .zg-field__msg { color: var(--danger); }
.zg-form-ok { color: var(--success); font-weight: 600; }

/* Footer */
.zg-footer { background: var(--surface-brand); color: var(--on-brand); padding: var(--space-8) var(--space-7) var(--space-6); position: relative; overflow: hidden; }
.zg-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); position: relative; }
.zg-footer h5 { font: 600 15px/20px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--lime); margin: 0 0 var(--space-4); }
.zg-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.zg-footer a { color: var(--on-brand); text-decoration: none; font: 600 15px/22px var(--font-sans); }
.zg-footer a:hover { text-decoration: underline; text-decoration-color: var(--lime); }
.zg-footer a:focus-visible { outline: 2px solid var(--focus-on-brand); outline-offset: 2px; }
.zg-footer__ghost { font: 800 180px/1 var(--font-display); letter-spacing: -0.02em; color: var(--surface-brand-raised); margin: var(--space-7) 0 0 -8px; user-select: none; }
.zg-footer__legal { display: flex; justify-content: space-between; color: var(--on-brand-muted); font: 500 13px/18px var(--font-sans); }

@media (max-width: 720px) {
  .zg-hero { grid-template-columns: 1fr; padding: var(--space-8) var(--space-4); }
  .zg-hero h1 { font-size: 44px; line-height: 48px; }
  .zg-heading h2 { font-size: 36px; line-height: 40px; }
  .zg-header { height: 72px; padding: 0 var(--space-4); }
  .zg-header__nav { display: none; }
  .zg-footer__cols { grid-template-columns: 1fr 1fr; }
  .zg-footer__ghost { font-size: 96px; }
  .zg-features { padding: 0 var(--space-5); }
  .zg-features h4 { font-size: 22px; line-height: 30px; }
}

/* Theme-aware logo: put both files, CSS shows the right one */
.zg-root .zg-logo--on-dark { display: none; }
[data-theme="dark"] .zg-root .zg-logo--on-light { display: none; }
[data-theme="dark"] .zg-root .zg-logo--on-dark { display: block; }
.zg-root .zg-on-brand .zg-logo--on-light { display: none; }
.zg-root .zg-on-brand .zg-logo--on-dark { display: block; }