/* TabBar product site — page-specific components.
   The design system itself lives in style.css (synced from the repo root).

   DESIGN NOTE — the site is monochrome editorial per DESIGN.md, with ONE
   deliberate, owner-approved exception (2026-06-22): the download CTAs carry
   the official Microsoft Word (#2b579a) and Excel (#217346) brand colors, so a
   visitor can tell the two products apart at a glance. The exception is scoped
   to .btn-dl only; everything else stays in the neutral palette. */

/* ---- header: text wordmark (no icon — two apps, neither owns the mark) ---- */
.product-mark { display: inline-flex; align-items: center; gap: 10px; }
.product-mark-name { display: inline-block; }   /* always visible: it is the only mark */

/* narrow phones: drop the in-page section anchors (the page scrolls anyway) and
   keep only the language switcher, so the header never overflows. */
@media (max-width: 600px) {
  .site-nav > a { display: none; }
}

/* this footer carries six legal links — let them wrap on narrow screens
   (the shared .footer-nav is a non-wrapping flex tuned for 2–3 items). */
.site-footer .footer-nav { flex-wrap: wrap; row-gap: 10px; }

/* ---- language menu — current code highlighted like selected text; click
   stacks the other codes below, text starts aligned. Pure <details>, no JS. ---- */
.lang-menu { position: relative; display: inline-block; }
.lang-chip {
  display: inline-block;
  background: var(--line); color: var(--ink);
  font-family: var(--font-mono); font-size: 0.82rem;
  padding: 2px 6px; border-radius: 3px;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.lang-menu summary {
  list-style: none; cursor: pointer; padding-block: 8px;
  display: inline-block;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover .lang-chip { background: var(--ink); color: var(--accent-ink); }
.lang-menu ul {
  position: absolute; inset-inline-start: 0; inset-block-start: 100%;
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 60;
}
.lang-menu ul a.lang-chip { text-decoration: none; color: var(--ink); }
.lang-menu ul a.lang-chip:hover { background: var(--ink); color: var(--accent-ink); }

/* ---- hero: two app icons side by side, then overline / gradient h1 / lede ---- */
.hero-icons { display: flex; gap: 14px; margin-block-end: 24px; }
.product-hero-icon {
  inline-size: clamp(64px, 9vw, 84px); block-size: auto;
  border-radius: 22.5%; margin-block-end: 0;
  outline: 1px solid rgba(29, 29, 31, 0.1); outline-offset: -1px;
}

/* ---- colored download CTAs (the scoped exception, see DESIGN NOTE) ---- */
.dl-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 8px; }
.btn-dl {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: 10px;
  font-weight: 600; font-size: 0.98rem; line-height: 1.2;
  color: #fff; text-decoration: none;
  transition: background-color 0.15s ease-out, transform 0.18s ease-out;
}
.btn-dl:hover { transform: translateY(-1px); text-decoration: none; color: #fff; }
.btn-dl--word { background: #2b579a; }
.btn-dl--word:hover { background: #1e3e6d; }
.btn-dl--excel { background: #217346; }
.btn-dl--excel:hover { background: #164d2f; }
.btn-dl:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.hero-store-note { margin-block-start: 16px; font-size: 0.9rem; color: var(--ink-soft); }
.hero-store-note a { color: var(--ink); font-weight: 600; }

/* ---- contact: one support address per app ---- */
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); }
.contact-list li { display: flex; flex-direction: column; gap: 4px; }
.contact-app { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---- features: six caps sit better on three columns ---- */
@media (min-width: 1080px) {
  .cap-grid--three { grid-template-columns: repeat(3, 1fr); }
}

/* ---- how it works: two app demos side by side ---- */
.demo-grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
@media (min-width: 860px) { .demo-grid { grid-template-columns: 1fr 1fr; } }
.demo { margin: 0; }
.demo-head { display: flex; align-items: flex-start; gap: 14px; margin-block-end: 16px; }
.demo-icon {
  inline-size: 44px; block-size: 44px; border-radius: 22.5%; flex: 0 0 auto;
  outline: 1px solid rgba(29, 29, 31, 0.1); outline-offset: -1px;
}
.demo-head h3 { margin-block-end: 4px; }
.demo-head p { color: var(--ink-soft); font-size: 0.95rem; }
.demo-shot {
  inline-size: 100%; block-size: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  margin-block-end: 14px;
}
.demo-vid {
  inline-size: 100%; block-size: auto; aspect-ratio: 1280 / 744; display: block;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}

/* ---- pricing card ---- */
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: clamp(24px, 4vw, 40px); text-align: center;
  max-inline-size: 680px; margin-inline: auto;
}
.price-lede {
  font-size: 1.05rem; color: var(--ink);
  max-inline-size: 52ch; margin-inline: auto; margin-block-end: 24px;
}
.price-card .dl-actions { justify-content: center; }
.purchase-note {
  margin-block-start: 18px; font-size: 0.85rem; color: var(--ink-soft);
  max-inline-size: 60ch; margin-inline: auto;
}

/* ---- FAQ: native <details> accordion, editorial hairlines ---- */
.faq { border-block-start: 1px solid var(--line); max-inline-size: 760px; }
.faq-item { border-block-end: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding-block: 18px;
  font-weight: 600; font-size: 1.02rem;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--font-mono); font-weight: 400; font-size: 1.25rem;
  color: var(--ink-soft); flex: 0 0 auto;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item > div { padding-block-end: 18px; }
.faq-item p { color: var(--ink-soft); max-inline-size: 68ch; line-height: 1.65; }

/* ---- legal pages (generated by sync-legal.js) ---- */
.legal { padding-block: clamp(40px, 7vw, 90px); }
.legal-wrap { max-inline-size: 760px; margin-inline: auto; }
.legal-wrap .overline a { color: inherit; text-decoration: none; }
.legal-wrap h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-block: 6px 6px; }
.legal-updated { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft); margin-block-end: 32px; }
.legal-body h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-block: 34px 12px;
  padding-block-end: 8px; border-block-end: 1px solid var(--line);
}
.legal-body h3 { font-size: 1.05rem; margin-block: 22px 8px; }
.legal-body p, .legal-body li { color: var(--ink-soft); line-height: 1.7; }
.legal-body ul, .legal-body ol { padding-inline-start: 1.3em; margin-block: 12px; }
.legal-body li { margin-block: 6px; }
.legal-body a { color: var(--ink); font-weight: 600; }
.legal-body strong { color: var(--ink); }
.legal-body code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--line); padding: 1px 5px; border-radius: 4px;
}
.legal-body table { inline-size: 100%; border-collapse: collapse; margin-block: 18px; font-size: 0.92rem; }
.legal-body th, .legal-body td { text-align: start; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
.legal-body th { background: var(--surface); color: var(--ink); font-weight: 600; }