/* ===== YourBrand — shared styles (¥799 template) ===== */
:root {
  --graphite: #1B1F24;
  --steel: #3A4149;
  --brand: #F26B1D;
  --brand-dark: #D95A10;
  --offwhite: #F4F4F2;
  --ink: #212529;
  --muted: #6B7280;
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.font-display { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; line-height: 1;
  padding: 0.85rem 1.6rem; border-radius: 2px; transition: background-color .15s, border-color .15s, color .15s; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { border: 1px solid rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-dark { border: 1px solid var(--graphite); color: var(--graphite); }
.btn-dark:hover { border-color: var(--brand); color: var(--brand); }

/* Section eyebrow */
.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .18em;
  font-size: .75rem; font-weight: 600; color: var(--brand); }

/* Spec table */
.spec-table { width: 100%; border-collapse: collapse; font-size: .925rem; }
.spec-table th, .spec-table td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid #E5E7EB; vertical-align: top; }
.spec-table th { font-weight: 600; color: var(--muted); white-space: nowrap; width: 40%; font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; }
.spec-table td { font-variant-numeric: tabular-nums; }

/* FAQ details */
.faq details { border-bottom: 1px solid #E5E7EB; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.15rem; font-weight: 600; padding: 1.1rem 0; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--brand); transition: transform .15s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq .faq-a { padding: 0 0 1.25rem 0; color: var(--muted); max-width: 46rem; }

/* Nav active state */
nav a[aria-current="page"] { color: var(--brand); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px; }