/* Base dimensions from the homepage. Interaction styles come from ../css/buttons.css. */
.btn {
  display: inline-flex;
  align-items: center;
  height: var(--btn-height);
  min-width: 0;
  gap: 0.65rem;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.btn-solid { padding: 0.35rem 0.35rem 0.35rem 1.35rem; }
.btn-solid .arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 0.9rem;
}
.btn .arrow svg { width: 16px; height: 16px; transition: transform 450ms var(--action-ease); }
:root[data-theme="dark"] .btn-solid { color: #101012; }
.testimonial-nav {
  display: grid;
  place-items: center;
  width: var(--btn-height);
  height: var(--btn-height);
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* Gallery controls use the homepage's neutral circular surface and red action. */
.g-nav .testimonial-nav {
  background: var(--card-surface);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.g-nav .testimonial-nav--next {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* Compact prev/next controls: smaller than the 40-48px primary buttons. */
.g-nav .testimonial-nav { width: 34px; height: 34px; }
.g-nav .testimonial-nav svg { display: block; width: 14px; height: 14px; flex-shrink: 0; }
.hero-tags { gap: 0.4rem 0.55rem; }
.hero-tags .tag, .chip, .tab, .tab[aria-pressed="true"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 100px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 14px;
  color: rgba(10, 10, 12, 0.55);
  border: 1px solid rgba(10, 10, 12, 0.1);
  background: #f5f0f1;
  box-shadow: none;
}
:root[data-theme="dark"] .hero-tags .tag, :root[data-theme="dark"] .chip, :root[data-theme="dark"] .tab {
  color: #c3c5ce;
  background: #1c1c1c;
  border-color: var(--theme-border);
}
.tab[aria-pressed="true"] { border-color: rgb(10 10 12 / 0.38); }
:root[data-theme="dark"] .tab[aria-pressed="true"] { border-color: #797d89; }
.tab:focus-visible, .testimonial-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
/* The open screen is a filled pill, so it reads clearly against the others. */
.tab[aria-pressed="true"],
:root[data-theme="dark"] .tab[aria-pressed="true"],
:root[data-theme="light"] .tab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
/* On the light page the white hero pill would disappear, so it turns ink. */
:root[data-theme="light"] .hero-side .btn-solid { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .g-nav .testimonial-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  :root[data-theme="dark"] .btn:hover { color: #fff; }
  .tab:hover { border-color: rgb(10 10 12 / 0.38); }
  :root[data-theme="dark"] .tab:hover { border-color: #797d89; }
  .hero-side .btn-solid:hover .arrow { transform: none; }
  .hero-side .btn-solid:hover .arrow svg { transform: translate(2px, -2px) rotate(-45deg); }
}
.tab:active { transform: translateY(1px) scale(0.98); transition-duration: 100ms; }
@media (min-width: 1024px) { .btn { font-size: 0.875rem; } }
@media (max-width: 639px) { .btn { font-size: 0.76rem; } .btn-solid { padding-left: 1rem; } }