@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400&display=swap');

@font-face {
  font-family: 'Sweetheart';
  src: url('/static/TAYSweetheartRegular.woff2') format('woff2'),
       url('/static/TAYSweetheartRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bea';
  src: url('/static/TAYBea.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Makawao';
  src: url('/static/TAYMakawaoRegular.woff2') format('woff2'),
       url('/static/TAYMakawaoRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Optical centering for interactive elements ── */
a, button, input, select, .home-step-num {
  text-box-trim: both;
  text-box-edge: cap alphabetic;
}

/* ── Theme variables (Flexoki light) ── */
:root {
  color-scheme: light;
  --sans-font: 'Geist', sans-serif;
  --display-font: 'Bea', serif;

  --bg: #FFFCF0;
  --accent-bg: #EAE8DD;
  --text: #403E3C;
  --text-light: #878580;
  --border: #E6E4D9;
  --accent: #6F6E69;
  --accent-hover: #878580;
  --accent-text: #FFFCF0;
  --link: #66800B;
  --link-hover: #879A39;
  --code: #66800B;
  --preformatted: #403E3C;
  --marked: #F6E2A0;
  --disabled: #DAD8CE;

  --primary: #6F6E69;
  --primary-foreground: #FFFCF0;
  --success: #66800B;
  --danger: #AF3029;
  --warning: #AD8301;
  --cancelled: #BC5215;
  --success-bg: #EDEECF;
  --success-border: #CDD597;
  --success-text: #3D4C07;
  --accent-glow: rgba(102, 128, 11, 0.06);
  --muted: #F2F0E5;
  --danger-foreground: #FFFCF0;
  --success-foreground: #FFFCF0;
  --warning-foreground: #403E3C;
}

/* ── Display font on headings ── */
h1, h2 { font-family: var(--display-font); font-weight: normal; }

/* ── Body font on public pages ── */
body.public { font-family: 'IBM Plex Sans', sans-serif; font-weight: 300; }

/* ── Utility classes ── */
.hstack { display: flex; gap: 0.5rem; align-items: center; }
.vstack { display: flex; flex-direction: column; gap: 0.5rem; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.p-4 { padding: 1rem; }
.table { overflow-x: auto; }
.narrow { max-width: 48rem; }

/* ── Badges ── */
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.8rem; font-weight: 600; }
.badge.success { background: var(--success); color: var(--success-foreground); }
.badge.danger { background: var(--danger); color: var(--danger-foreground); }
.badge.warning { background: var(--warning); color: var(--warning-foreground); }
.badge.secondary { background: var(--muted); color: var(--text-light); }
.badge.cancelled { background: var(--cancelled); color: #fff; }

/* ── Buttons ── */
button.outline, .outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
button.outline:hover, .outline:hover {
  border-color: var(--text-light);
}
button.danger { background: var(--danger); color: #fff; }
button.danger:hover { background: #902020; }

/* ── Layout ── */
body {
  display: grid;
  grid-template-columns: 1fr min(80rem, 95%) 1fr;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
}

body > main {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}

body > header, body > footer {
  grid-column: 1 / -1;
  padding-left: max(2.5%, calc((100% - 80rem) / 2)) !important;
  padding-right: max(2.5%, calc((100% - 80rem) / 2)) !important;
}

body.viewport-fit {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

a, a:link, a:visited { color: var(--link); }
a:hover { color: var(--link-hover); }

/* ── Alerts ── */
.alert-success {
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}
.alert-success code { color: var(--text); }
.alert-warning {
  color: var(--warning);
  border: 1px solid var(--warning);
  padding: 0.75rem;
  border-radius: 4px;
}

/* ══════════════════════════════
   HEADER & NAV
   ══════════════════════════════ */
header {
  padding: 0.5rem 0 !important;
  display: flex;
  align-items: center;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--border);
}

header nav {
  display: flex !important;
  align-items: center !important;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

header nav a,
header nav a:link,
header nav a:visited,
header nav button {
  border: none !important;
  margin: 0;
  padding: 0.25rem 0 !important;
  line-height: 1.5 !important;
  text-box-trim: none;
  border-radius: 0;
  background: none;
  color: var(--text-light);
  cursor: pointer;
  text-decoration: none;
}

header nav a:hover,
header nav button:hover {
  color: var(--text);
  background: none !important;
}

header nav a.nav-cta {
  background: var(--success) !important;
  color: var(--success-foreground) !important;
  padding: 0.4rem 1rem;
  border-radius: 4px;
}
header nav a.nav-cta:hover { opacity: 0.85; }
header nav form button:hover { color: var(--danger); }

.nav-inline {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1.25rem;
  padding: 0 !important;
  margin: 0 auto !important;
  width: 100%;
  max-width: 80rem;
}

.nav-login { margin-left: auto !important; }
.nav-brand, header nav a, header nav button { font-family: 'Bea', serif; font-weight: normal !important; }
.nav-brand { letter-spacing: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35em; }
.nav-logo { height: 2.5em; width: auto; vertical-align: middle; border-radius: 0; }

/* Logout button in nav — match link style */
header nav form button {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-family: 'Bea', serif;
  font-weight: normal;
  font-size: inherit;
}
header nav form button:hover {
  color: var(--text);
}

/* Mobile hamburger: a hidden checkbox + label toggles a stacked menu
   below 40rem. Desktop: checkbox & burger hidden, links inline. */
.nav-inline > .nav-toggle { display: none; }
.nav-inline > .nav-burger { display: none; }

@media (max-width: 40rem) {
  .nav-inline > .nav-burger {
    display: inline-block;
    margin-left: auto;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    color: var(--text-light);
    user-select: none;
  }
  .nav-toggle:checked ~ .nav-burger { color: var(--text); }
  .nav-link { display: none; flex-basis: 100%; }
  .nav-toggle:checked ~ .nav-link {
    display: block;
    padding: 0.75rem 0 !important;
    margin: 0 !important;
    text-align: left;
    border-top: 1px solid var(--border);
  }
  .nav-login { margin-left: 0 !important; }
}

/* ── Tag pills ── */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: inherit;
  white-space: nowrap;
  color: var(--text);
  cursor: pointer;
}
.tag-pill:hover {
  color: var(--danger);
  text-decoration: line-through;
}

/* ── Footer ── */
footer {
  color: var(--text-light);
  background: var(--accent-bg);
  border-top: 1px solid var(--border);
  padding: 0.5rem max(2rem, calc((100% - 80rem) / 2)) !important;
  margin-top: 3rem;
  text-align: center;
  font-size: 0.85rem;
}
footer p { margin: 0; }
footer a, footer a:link, footer a:visited { color: var(--text-light); }
footer a:hover { color: var(--text); }

/* ── Tables ── */
article { background: #F7F5EA; }
table { width: 100%; }
tbody tr:hover { background: var(--border); }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(1.2rem); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.5s ease-out both; }
.fade-up-1 { animation-delay: 0s; }
.fade-up-2 { animation-delay: 0.08s; }
.fade-up-3 { animation-delay: 0.16s; }
.fade-up-4 { animation-delay: 0.24s; }

/* ══════════════════════════════
   HOME PAGE
   ══════════════════════════════ */
.home-page { max-width: 80rem; margin: 0 auto; }
.home-page section, .integrations-page section, .integration-detail section { border-top: 0; border-bottom: 0; }

.home-hero { text-align: center; padding: 3.6rem 0 3.2rem; }
.home-hero h1 { font-size: 3.2rem; line-height: 1.1; margin: 0 auto 1.5rem; }
.home-hero-title { margin: 0 auto 1.5rem; }
.home-hero-title img { display: block; width: 80%; max-width: 992px; height: auto; margin: 0 auto; }
.home-highlight { color: var(--success); font-style: italic; }
.home-subtitle { font-size: 1.1rem; color: var(--text-light); max-width: 34rem; margin: 0 auto 2rem; line-height: 1.7; }

.home-hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.home-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--success); color: var(--success-foreground) !important;
  padding: 0.75rem 2.2rem; border-radius: 4px;
  font-weight: 600; font-size: 0.95rem;
  text-decoration: none !important; transition: opacity 0.15s;
}
.home-cta:hover { opacity: 0.85; }
.home-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--text-light) !important;
  padding: 0.75rem 2.2rem; border-radius: 4px;
  font-weight: 500; font-size: 0.95rem;
  text-decoration: none !important; border: 1px solid var(--border);
  transition: border-color 0.15s, color 0.15s;
}
.home-cta-secondary:hover { border-color: var(--text-light); color: var(--text) !important; }

/* How it works */
.home-how { padding: 0 0 3.5rem; }
.home-how h2 { margin-bottom: 1.5rem; font-size: 1.8rem; }
.home-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 40rem) { .home-steps { grid-template-columns: 1fr; } }

.home-step {
  position: relative; padding: 1.5rem;
  background: var(--accent-bg); border-left: 3px solid var(--success);
  border-radius: 8px; transition: background 0.2s;
}
.home-step:hover { background: var(--success-bg); }
.home-step-num {
  display: inline-grid; place-items: center;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--success); color: var(--success-foreground);
  font-size: 0.8rem; font-weight: 700; margin-bottom: 0.75rem;
}
.home-step-icon { position: absolute; top: 1.5rem; right: 1.5rem; width: 1.8rem; height: 1.8rem; }
.home-step h3 { font-weight: 600; font-size: 1rem; margin: 0 0 0.4rem; }
.home-step p { font-size: 0.88rem; color: var(--text-light); line-height: 1.55; margin: 0; }

/* Features */
.home-features { padding: 0 0 3.5rem; }
.home-features h2 { margin-bottom: 1.5rem; font-size: 1.8rem; }
.home-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 52rem) {
  .home-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .home-hero h1 { font-size: 2.2rem; }
}
@media (max-width: 30rem) { .home-grid-4 { grid-template-columns: 1fr; } }

.home-feature {
  background: var(--accent-bg); border-left: 3px solid var(--success);
  padding: 1.25rem 1.25rem 1.25rem 1.5rem; border-radius: 8px;
  transition: background 0.2s;
}
.home-feature:hover { background: var(--success-bg); }
.home-feature h3 { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.3rem; text-transform: uppercase; }
.home-feature p { font-size: 0.88rem; color: var(--text-light); line-height: 1.55; margin: 0; }


/* ══════════════════════════════
   INTEGRATIONS — homepage tile row
   ══════════════════════════════ */
.home-integrations { margin-top: 3rem; }
.home-integrations > h2 { margin-bottom: 1.5rem; font-size: 1.8rem; }
.home-integrations-sub { color: var(--text-light); margin-bottom: 1.5rem; }
.home-integrations-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem;
}
@media (max-width: 52rem) { .home-integrations-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 30rem) { .home-integrations-grid { grid-template-columns: repeat(2, 1fr); } }
.home-integration {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 1rem 0.5rem;
  background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none !important; color: var(--text) !important;
  transition: background 0.2s, border-color 0.2s;
}
.home-integration:hover { background: var(--success-bg); border-color: var(--success-border); }
.home-integration-logo { width: 2rem; height: 2rem; object-fit: contain; }
.home-integration-name { font-size: 0.8rem; font-weight: 600; }

/* ══════════════════════════════
   INTEGRATIONS — dedicated pages
   ══════════════════════════════ */
.integrations-hero { margin: 2rem 0 2.5rem; text-align: center; }
.integrations-hero h1 { margin-bottom: 0.5rem; }
.integrations-sub { color: var(--text-light); max-width: 40rem; margin: 0 auto; }

.integrations-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 52rem) { .integrations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 30rem) { .integrations-grid { grid-template-columns: 1fr; } }

.integration-card {
  display: block;
  background: var(--accent-bg); border: 1px solid var(--border); border-left: 3px solid var(--success);
  border-radius: 8px; padding: 1.25rem;
  text-decoration: none !important; color: var(--text) !important;
  transition: background 0.2s, border-color 0.2s;
}
.integration-card:hover { background: var(--success-bg); }
.integration-card.coming-soon { border-left-color: var(--text-light); opacity: 0.75; }
.integration-card-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;
}
.integration-logo { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.integration-category, .integration-status {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); font-weight: 600;
}
.integration-status { color: var(--warning); }
.integration-card h3 { font-size: 1.1rem; margin: 0 0 0.25rem; }
.integration-card p { font-size: 0.88rem; color: var(--text-light); margin: 0; line-height: 1.45; }

.integration-detail-hero { margin: 2rem 0 1.5rem; }
.integration-detail-head { display: flex; align-items: flex-start; gap: 1.5rem; }
.integration-detail-logo { width: 4rem; height: 4rem; object-fit: contain; flex-shrink: 0; }
.integration-detail-head h1 { margin: 0.25rem 0 0.5rem; }
.integration-detail-tagline { font-size: 1.1rem; color: var(--text-light); margin: 0; }
.integration-status-large { display: inline-block; margin-top: 0.75rem; font-size: 0.85rem; }

.integration-detail-body { margin: 2.5rem 0; }
.integration-detail-description p { font-size: 1.05rem; line-height: 1.6; max-width: 42rem; }
.integration-detail-features { margin-top: 2rem; }
.integration-detail-features h2 { font-size: 1.2rem; }
.integration-detail-features ul { padding-left: 1.25rem; line-height: 1.7; }
.integration-detail-cta { display: flex; gap: 0.75rem; margin-top: 2rem; flex-wrap: wrap; }

.integrations-crosslinks { margin: 3rem 0 2rem; padding-top: 2rem; }
.integrations-crosslinks h2 { border-top: none !important; }
.integrations-crosslinks h2 { font-size: 1.1rem; color: var(--text-light); font-weight: 600; }
.integrations-crosslink-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.5rem;
}
.integrations-crosslink {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem;
  background: var(--accent-bg); border: 1px solid var(--border); border-radius: 6px;
  text-decoration: none !important; color: var(--text-light) !important;
  font-size: 0.85rem; transition: background 0.2s, color 0.2s;
}
.integrations-crosslink:hover { background: var(--success-bg); color: var(--text) !important; }
.integrations-crosslink-logo { width: 1.25rem; height: 1.25rem; object-fit: contain; }

/* ══════════════════════════════
   COMPARE PAGES
   ══════════════════════════════ */
.compare-page { max-width: 80rem; margin: 0 auto; }
.compare-page section { border-top: 0; border-bottom: 0; padding-top: 0; padding-bottom: 0; }
.compare-hero { text-align: center; padding: 3.5rem 0 3rem; }
.compare-eyebrow { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem; color: var(--text-light); margin-bottom: 0.75rem; font-weight: 500; }
.compare-hero h1 { font-size: 2.6rem; line-height: 1.12; margin: 0 auto 1rem; max-width: 34rem; }
.compare-subtitle { font-size: 1.05rem; color: var(--text-light); max-width: 38rem; margin: 0 auto; line-height: 1.7; }
.compare-pricing h2, .compare-freetiers h2, .compare-features h2 { margin-bottom: 1.5rem; font-size: 1.6rem; }

/* Tables */
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 3rem; }
.compare-table { min-width: 100%; border-collapse: separate; border-spacing: 0; }
.compare-table tbody tr:nth-child(odd), .compare-table tbody tr:nth-child(even) { background: transparent; }
.compare-table thead th { padding: 0.75rem 1rem; font-size: 0.9rem; font-weight: 600; border-bottom: 2px solid var(--border); text-align: left; }
.compare-badge { display: inline-block; background: var(--success); color: var(--bg); padding: 0.2rem 0.7rem; border-radius: 3px; font-size: 0.8rem; font-weight: 600; }
.compare-table tbody td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.9rem; line-height: 1.5; }
.compare-table .row-label { font-weight: 600; white-space: nowrap; width: 1%; color: var(--text); }
.compare-table .col-ds, .compare-table .col-fs, .compare-table .col-comp { color: var(--text-light); }
.compare-check { color: var(--success); font-weight: 700; margin-right: 0.3rem; }
.compare-x { color: var(--danger); font-weight: 700; margin-right: 0.3rem; opacity: 0.6; }
.compare-price { display: block; font-size: 1.2rem; font-weight: 700; color: var(--success); margin-bottom: 0.15rem; }
.compare-price span { font-size: 0.8rem; font-weight: 400; opacity: 0.7; }
.compare-price-muted { display: block; font-size: 1.2rem; font-weight: 700; color: var(--text-light); margin-bottom: 0.15rem; }
.compare-price-muted span { font-size: 0.8rem; font-weight: 400; opacity: 0.6; }

/* Competitor cards */
.compare-competitors h2 { margin-bottom: 1.5rem; font-size: 1.6rem; }
.compare-link-card { display: flex; align-items: center; background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; font-weight: 600; text-decoration: none; color: var(--text); transition: border-color 0.2s; }
.compare-link-card:hover { border-color: var(--success); color: var(--text); }
.compare-crosslinks { margin-top: 3rem; }
.compare-crosslinks h2 { margin-bottom: 1.5rem; font-size: 1.6rem; }
.compare-link-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
@media (max-width: 55rem) { .compare-link-grid { grid-template-columns: repeat(2, 1fr); } }

/* Free tier grid */
.compare-freetiers { margin-bottom: 3rem; }
.compare-freetiers-intro { max-width: 40rem; margin-bottom: 1.5rem; color: var(--text-light); }
.compare-freetiers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 55rem) { .compare-freetiers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .compare-freetiers-grid { grid-template-columns: 1fr; } }
.compare-freetier-card { background: var(--accent-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1.25rem 1.5rem; }
.compare-freetier-card h3 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.compare-freetier-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.75rem; font-size: 0.9rem; }
.compare-freetier-card dt { font-weight: 600; color: var(--text-light); }
.compare-freetier-card dd { margin: 0; }
.compare-freetier-card--highlight { border-color: var(--success); border-width: 2px; }

/* Feature grid */
.compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 3rem; }
@media (max-width: 40rem) { .compare-grid { grid-template-columns: 1fr; } .compare-hero h1 { font-size: 1.8rem; } }
.compare-card {
  background: var(--accent-bg); border-left: 3px solid var(--success);
  padding: 1.25rem 1.25rem 1.25rem 1.5rem; border-radius: 8px;
  transition: background 0.2s;
}
.compare-card:hover { background: var(--success-bg); }
.compare-card h3 { font-weight: 600; font-size: 0.9rem; margin: 0 0 0.3rem; text-transform: uppercase; }
.compare-card p { font-size: 0.88rem; color: var(--text-light); line-height: 1.55; margin: 0; }
.compare-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 4px; background: var(--border); color: var(--text); font-size: 0.9rem; font-weight: 700; margin-bottom: 0.75rem; }

/* Closing CTA */
.compare-closing { text-align: center; padding: 1rem 0 2.5rem; }
.compare-closing-box { background: var(--accent-bg); border: 1px solid var(--border); border-radius: 8px; padding: 3rem 2rem; max-width: 34rem; margin: 0 auto; }
.compare-closing h2 { font-size: 1.5rem; margin-bottom: 1rem; }
.compare-closing p { color: var(--text-light); font-size: 0.95rem; line-height: 1.65; }
.compare-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--success); color: var(--success-foreground) !important;
  padding: 0.75rem 2.2rem; border-radius: 4px;
  font-weight: 600; font-size: 0.95rem;
  text-decoration: none !important; margin-top: 1rem; transition: opacity 0.15s;
}
.compare-cta:hover { opacity: 0.85; }
.compare-fine { font-size: 0.8rem !important; color: var(--text-light) !important; margin-top: 0.75rem; }

/* ══════════════════════════════
   AUTH PAGES
   ══════════════════════════════ */
.auth-page { display: flex; justify-content: center; align-items: flex-start; padding-top: 6rem; }
.auth-card { width: 100%; max-width: 24rem; }
.auth-card h2 { margin-top: 0; }
.auth-card form button { width: 100%; margin-top: 0.5rem; }
.auth-alt { text-align: center; margin-top: 1.5rem; margin-bottom: 0; font-size: 0.9rem; color: var(--text-light); }

/* ── Template columns ── */
.template-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2rem; align-items: start; }

/* ══════════════════════════════
   API PLAYGROUND
   ══════════════════════════════ */
.pg-endpoint { display: flex; align-items: center; gap: 0.6rem; font-family: monospace; font-size: 0.9rem; margin-bottom: 1rem; }
.pg-method { display: inline-block; background: var(--success); color: var(--success-foreground); padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pg-key-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.pg-key-row input { flex: 1; margin: 0; }
.pg-key-row a { white-space: nowrap; font-size: 0.85rem; }
.pg-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; margin-bottom: 1.25rem; }
@media (max-width: 52rem) { .pg-columns { grid-template-columns: 1fr; } }
.pg-columns .pg-panel { margin-bottom: 0; display: flex; flex-direction: column; }
.pg-columns .pg-panel-body { flex: 1; display: flex; }
.pg-columns .pg-panel-body pre, .pg-columns .pg-panel-body textarea { flex: 1; }
.pg-panel { border-radius: 6px; overflow: hidden; margin-bottom: 1.25rem; border: 1px solid var(--border); }
.pg-panel-body--scroll { max-height: 20rem; overflow-y: auto; }
.pg-panel-header { display: flex; align-items: center; justify-content: space-between; background: var(--accent-bg); padding: 0.5rem 0.85rem; font-family: monospace; font-size: 0.8rem; color: var(--text-light); border-bottom: 1px solid var(--border); }
.pg-panel-body pre, .pg-panel-body textarea { background: var(--bg); color: var(--text); font-family: monospace; font-size: 0.85rem; margin: 0; border: none; border-radius: 0; padding: 1rem; width: 100%; box-sizing: border-box; }
.pg-panel-body pre { white-space: pre-wrap; word-break: break-all; overflow-x: auto; }
.pg-panel-body textarea { resize: vertical; outline: none; }
.pg-panel-body pre:empty::after { content: " "; }
.pg-panel-actions { display: flex; gap: 0.5rem; align-items: center; }
.pg-panel-actions button { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 0.2rem 0.65rem; border-radius: 3px; font-size: 0.75rem; font-family: inherit; cursor: pointer; margin: 0; transition: border-color 0.15s, color 0.15s; }
.pg-panel-actions button:hover { border-color: var(--text-light); color: var(--text); background: transparent; }
.pg-panel-actions button[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.pg-json-err { color: var(--danger); font-size: 0.75rem; margin-left: 0.4rem; }
.pg-status { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 3px; font-size: 0.75rem; font-weight: 700; font-family: monospace; margin-left: 0.4rem; vertical-align: middle; }
.pg-status-ok { background: var(--success); color: var(--success-foreground); }
.pg-status-err { background: var(--danger); color: #fff; }

section { padding-left: 0 !important; padding-right: 0 !important; }

/* ══════════════════════════════
   SETTINGS PAGE
   ══════════════════════════════ */
.settings-page { padding: 2rem 0; }
.settings-page h1 { margin-top: 0; margin-bottom: 2rem; }
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 52rem) {
  .settings-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  position: sticky;
  top: 1.5rem;
}
.settings-nav-item {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.settings-nav-item,
.settings-nav-item:link,
.settings-nav-item:visited { color: var(--text-light) !important; }
.settings-nav-item:hover { background: var(--accent-bg); color: var(--text) !important; }
.settings-nav-item.active { background: var(--accent-bg); color: var(--text) !important; font-weight: 500; }
.settings-section-header { margin-bottom: 1.5rem; }
.settings-section-header h2 { font-size: 1.25rem; margin: 0 0 0.375rem; }
.settings-section-header p { margin: 0; color: var(--text-light); font-size: 0.9rem; }

/* ── Mobile ── */
@media (max-width: 40rem) {
  body { grid-template-columns: 1fr min(1200px, 100%) 1fr !important; }
  body > main { padding-left: 0.5rem; padding-right: 0.5rem; }
  .search-filters { grid-template-columns: 1fr !important; }
  .compare-table .row-label { white-space: normal; }
}