/* ===== YourBrand — shared styles (¥799 template) ===== */
:root {
  --navy: #0B2545;
  --brand: #00B4D8;
  --brand-dark: #0092B0;
  --cloud: #F1F5F9;
  --ink: #1E293B;
  --muted: #64748B;
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.font-display { font-family: 'Manrope', 'Inter', sans-serif; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem;
  padding: 0.8rem 1.5rem; border-radius: 8px; 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: 1.5px solid var(--navy); color: var(--navy); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #0d2f5c; }
.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { background: #e2f4f9; }

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

/* Badge strip */
.badge { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid #E2E8F0;
  border-radius: 8px; padding: .7rem 1.2rem; font-size: .85rem; font-weight: 600; color: var(--ink); }

/* 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 #E2E8F0; vertical-align: top; }
.spec-table th { font-weight: 600; color: var(--muted); white-space: nowrap; width: 40%; }

/* FAQ details */
.faq details { border-bottom: 1px solid #E2E8F0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 1rem; padding: 1.1rem 0; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--brand-dark); 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; }