:root {
  --color-bg: #1e1f22;
  --color-bg-secondary: #222428;
  --color-bg-tertiary: #2d2e32;
  --color-bg-card: rgba(42, 43, 47, 0.6);
  --color-bg-glass: rgba(30, 31, 34, 0.85);
  --color-text: #e1e2e5;
  --color-text-secondary: #9ea3ac;
  --color-text-muted: #6e7278;
  --color-primary: #2fb3ad;
  --color-primary-hover: #46c9c2;
  --color-accent: #e3c56b;
  /*
   * The green tint, not an amber one, to match the badge on the PureWord and RSS
   * Wrangler home pages. This token is read in exactly one place, the hero badge
   * background, so keeping it green costs the amber tint nowhere else.
   */
  --color-accent-subtle: rgba(4, 170, 109, 0.15);
  --color-amber: #e3c56b;
  --color-border: #4b4c52;
  --color-border-light: #5b5c63;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-full: 0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 30px rgba(47, 179, 173, 0.15);
  --font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Noto Serif", Georgia, "Times New Roman", serif;
  --nav-height: 68px;
  --max-width: 1200px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}
@supports (text-wrap: pretty) {
  body {
    text-wrap: pretty;
  }
}
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}
h1 {
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}
h3 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}
p {
  margin-bottom: 1em;
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover {
  color: var(--color-primary-hover);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--color-bg-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  z-index: 100;
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.nav-inner .nav-brand {
  justify-self: start;
}
.nav-inner .nav-links {
  grid-column: 2;
  justify-self: center;
}
.nav-brand {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-brand:hover {
  color: var(--color-text);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-heading);
  padding: 8px 16px;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  transition: none;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--color-text);
  background: var(--color-bg-tertiary);
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 0;
}
.nav-toggle:hover {
  background: var(--color-bg-tertiary);
}
@media (max-width: 640px) {
  .nav {
    height: 56px;
  }
  .nav-inner {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
  }
  .nav-toggle {
    display: flex;
    /* Same omission as the pureword fork: no size, so it rendered 36px square
       while the other three products give the toggle 44px. */
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
  }
  .nav-links {
    position: fixed;
    top: calc(56px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    /*
     * justify-self is overridden below rather than here, because the desktop
     * rule that causes this is .nav-inner .nav-links, two classes, which beats
     * a single-class rule here regardless of source order.
     *
     * The background is near-opaque rather than the glass token, which at 0.85
     * lets the page show through and reads as transparent against a dark bar.
     */
    background: rgba(45, 46, 50, 0.98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 12px 16px;
    gap: 4px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: none;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /*
   * Qualified to match the desktop .nav-inner .nav-links rule, which is two
   * classes and would otherwise keep winning. On an absolutely positioned box
   * that is not stretch, the panel shrink-wraps to its longest link and centres
   * itself, which is what made the open menu a 183px floating column with the
   * page showing around it instead of a full-width sheet.
   */
  .nav-inner .nav-links {
    justify-self: stretch;
  }
  .nav-links a {
    width: 100%;
    padding: 12px 16px;
  }

  /*
   * Footer links measured 18 to 23px tall on a phone, since the row had no
   * height and each link carried only a line of text. They are navigation
   * rather than running prose, so the 44px target applies here.
   */
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * These measured 42px, two short of the touch floor. They are navigation in
   * the slide-down panel, so the whole row responds rather than just the text.
   */
  .nav-links a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /*
   * Hamburger, matched to flookup-website's: a bordered chip holding three 20x3
   * bars that rotate into a cross when the menu opens.
   *
   * Colours: flookup's button is a 95% white chip, which reads as a glaring box
   * on a dark navigation bar, so the fill is a dark surface instead. #3b3c40 and
    * #9ea3ac are the shared --elevated and --muted values, so the control reads
    * identically across the site. A per-product value was tried first and was
    * hard to tell from its own bars.
    */
  .nav-toggle {
    position: relative;
    z-index: 10000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    background: #3b3c40;
    border: 2px solid #9ea3ac;
    border-radius: 0;
    color: var(--color-text-secondary);
    cursor: pointer;
  }
  .nav-toggle:hover {
    background: var(--color-bg-tertiary);
  }
  .nav-toggle span {
    display: block;
    width: 20px;
    height: 3px;
    min-height: 3px;
    max-height: 3px;
    line-height: 3px;
    font-size: 0;
    background: #9ea3ac;
    border-radius: 0;
    transform-origin: center center;
    transition:
      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1),
  .nav-toggle.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2),
  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(3),
  .nav-toggle.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}
main {
  padding-top: var(--nav-height);
}
.hero {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #2d2e32 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(4, 170, 109, 0.06) 0%, transparent 50%), var(--color-bg);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 70%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-accent-subtle);
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 0;
  margin-bottom: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.hero h1 {
  margin-bottom: 20px;
}
.hero h1 .highlight {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.7;
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 0;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--transition-bounce);
  text-decoration: none;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), #146b5d);
  color: #fff;
  box-shadow: 0 4px 20px rgba(28, 141, 123, 0.25);
}
.btn-primary:hover {
  box-shadow: 0 8px 30px rgba(28, 141, 123, 0.35);
  color: #fff;
}
.btn-secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover {
  border-color: var(--color-border-light);
  background: var(--color-bg-secondary);
  color: var(--color-text);
}
.section {
  padding: 100px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.section-header {
  text-align: center;
  margin-bottom: 60px;
}
.section-header h2 {
  margin-bottom: 16px;
}
.section-header p {
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
/*
 * Rows of four. The 280px floor in .features-grid wrapped these sections onto
 * two or three lines at desktop widths, so the cards read as a list rather than
 * a set. A 220px floor fits all four on one row at full width, drops to two on
 * narrower screens where four would be unreadable, and never leaves a card
 * stranded alone on the last row.
 */
.features-row {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.features-row .feature-card {
  padding: 24px 22px;
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-light);
}
.feature-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 32px;
  transition: none;
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}
.feature-card:hover {
  border-color: var(--color-border-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}
.feature-card:hover::before {
  opacity: 1;
}
.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature-card h3,
.feature-card h2 {
  margin-bottom: 12px;
}
.feature-card p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.65;
}
.divider-section {
  text-align: center;
  padding: 60px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
.divider-section h2 {
  margin-bottom: 16px;
}
.divider-section p {
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto;
}
.policy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
}
.policy-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 28px;
  text-align: center;
  transition: none;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.policy-card:hover {
  border-color: var(--color-border-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
}
.policy-label {
  font-weight: 600;
  font-size: 1.05rem;
}
.policy-desc {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}
.footer {
  text-align: center;
  padding: 40px 24px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.footer-links a:hover {
  color: var(--color-text);
}
.policy-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 60px;
}
.policy-page h1 {
  margin-bottom: 8px;
}
.policy-page .policy-date {
  color: var(--color-text-muted);
  margin-bottom: 40px;
  font-size: 0.95rem;
}
.policy-page .section {
  padding: 0;
  margin-bottom: 36px;
}
.policy-page .section h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
  color: var(--color-accent);
}
.policy-page .section p {
  color: var(--color-text-secondary);
  line-height: 1.75;
}
.policy-page .section strong {
  color: #c6cad1;
}
.policy-page .section ul {
  color: var(--color-text-secondary);
  padding-left: 20px;
  line-height: 1.75;
}
.policy-page .section li {
  margin-bottom: 8px;
}
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 640px) {
  .hero {
    padding: 60px 20px;
    min-height: unset;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
    width: 100%;
    justify-content: center;
  }
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  .section {
    padding: 60px 20px;
  }
  .section-header {
    margin-bottom: 40px;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .policy-cards {
    grid-template-columns: 1fr;
  }
  .policy-page {
    padding: 80px 20px 40px;
  }
  .policy-page .section h2 {
    font-size: 1.2rem;
  }
}
.docs-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 60px;
}
.docs-page h1 {
  margin-bottom: 8px;
}
.docs-page .policy-date {
  color: var(--color-text-muted);
  margin-bottom: 32px;
  font-size: 0.95rem;
}
.docs-toc {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 24px 28px;
  margin-bottom: 40px;
}
.docs-toc .toc-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  margin-bottom: 12px;
}
.docs-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.docs-toc li {
  margin-bottom: 8px;
}
.docs-toc a {
  color: var(--color-text-secondary);
}
.docs-toc a:hover {
  color: var(--color-text);
}
.docs-page .section {
  padding: 0;
  margin-bottom: 36px;
}
.docs-page .section h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.docs-page .section p,
.docs-page .section li {
  color: var(--color-text-secondary);
  line-height: 1.75;
}
.docs-page .section strong {
  color: #c6cad1;
}
.docs-page .section ul,
.docs-page .section ol {
  padding-left: 20px;
  margin-bottom: 1em;
}
.docs-page .section li {
  margin-bottom: 8px;
}
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 0.92rem;
}
.docs-table th,
.docs-table td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
}
/* Table cards on a phone
 * ======================
 * Below 640px /js/table-cards.js rebuilds each table as one card per row with
 * every value labelled from the header, so comparing two columns is a vertical
 * read rather than a sideways pan.
 *
 * These rules are display-only, so with JavaScript off the table is still a
 * table. Nothing is hidden until the cards have actually been built.
 */
.tbl-cards {
  display: none;
}
.tbl-cards__item {
  border: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}
.tbl-cards__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: 0.5rem;
  margin: 0 0 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.tbl-cards__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}
/* Label and value share a row with the label on a fixed column, so the values
 * line up down the card and the eye can scan a single edge. */
.tbl-cards__row {
  display: grid;
  grid-template-columns: minmax(6rem, 38%) 1fr;
  gap: 0.6rem;
  align-items: baseline;
}
.tbl-cards__label {
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  overflow-wrap: break-word;
}
.tbl-cards__value {
  color: var(--color-text);
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

/** Wide tables scroll horizontally instead of stretching the page. Needed because the same markup has no border or padding above 640px on a sibling product. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0 20px;
}
.table-wrap table {
  margin: 0;
}
.blog-post table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 0.92rem;
}
.blog-post th,
.blog-post td {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
}
.blog-post th {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  font-family: var(--font-heading);
}
.blog-post td {
  color: var(--color-text-secondary);
}

.docs-table th {
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  font-family: var(--font-heading);
}
.docs-table td {
  color: var(--color-text-secondary);
}
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-light);
  border-bottom-width: 2px;
  border-radius: 0;
  padding: 2px 6px;
  font-size: 0.85em;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--color-bg-tertiary);
  border-radius: 0;
  padding: 2px 6px;
  font-size: 0.9em;
}
pre {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 20px 24px;
  overflow-x: auto;
  margin: 12px 0 20px;
}
pre code {
  background: none;
  padding: 0;
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.blog-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 32px;
  transition: none;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blog-card:hover {
  border-color: var(--color-border-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  color: var(--color-text);
}
.blog-card .blog-date {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.blog-card h3,
.blog-card h2 {
  color: var(--color-text);
}
.blog-card h2 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}
.blog-card p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0;
}
.blog-card .blog-read-more {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: auto;
  padding-top: 12px;
}
.blog-post {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 60px;
}
.blog-post h1 {
  margin-bottom: 8px;
}
.blog-post .policy-date {
  color: var(--color-text-muted);
  margin-bottom: 32px;
  font-size: 0.95rem;
}
.blog-post .section {
  padding: 0;
  margin-bottom: 32px;
}
.blog-post .section h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.blog-post .section p,
.blog-post .section li {
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.blog-post .section ul,
.blog-post .section ol {
  padding-left: 20px;
  margin-bottom: 1em;
}
.blog-post .section li {
  margin-bottom: 10px;
}
.blog-post .section strong {
  color: #c6cad1;
}
.blog-post blockquote {
  border-left: 3px solid var(--color-primary);
  padding: 4px 0 4px 20px;
  margin: 0 0 1.5em;
  color: var(--color-text-secondary);
  font-style: italic;
}
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 48px 0 0;
  flex-wrap: wrap;
}
.blog-pagination button {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 0.9rem;
  min-width: 42px;
  padding: 10px 14px;
  cursor: pointer;
  transition:
    border-color 0.3s,
    color 0.3s;
}
.blog-pagination button:hover {
  color: var(--color-text);
  border-color: var(--color-border-light);
}
.blog-pagination button.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #12141a;
  font-weight: 600;
}
.blog-pagination button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.blog-pagination button[aria-current="page"] {
  cursor: default;
}

.disclosure-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid var(--color-amber);
  padding: 20px 24px;
  margin: 0 0 40px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.disclosure-box strong {
  color: var(--color-text);
}
.disclosure-box a {
  color: var(--color-primary);
}

.blog-cta {
  text-align: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 32px 24px;
  margin-top: 48px;
}
.blog-cta h3,
.blog-cta h2 {
  margin-bottom: 8px;
}
.blog-cta h2 {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
}
.blog-cta p {
  color: var(--color-text-secondary);
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .docs-page,
  .blog-post {
    padding: 80px 20px 40px;
  }
  .docs-page .section h2,
  .blog-post .section h2 {
    font-size: 1.2rem;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .docs-table,
  .blog-post table {
    /* Was 0.85rem, about 13.6px. The cards carry the same values at 0.875rem. */
    font-size: 0.875rem;
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /*
   * Cards take over once the script has enhanced the page. A table that is still
   * here, because it has no usable header to label from, keeps its scroll wrapper
   * and gains an edge fade so the overflow is visible rather than discovered.
   */
  [data-table-cards] > table {
    display: none;
  }
  [data-table-cards] > .tbl-cards {
    display: block;
  }
  [data-table-scroll] {
    position: relative;
  }
  [data-table-scroll]::after {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    width: 2rem;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--color-bg));
  }
}
.contact-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px 60px;
  text-align: center;
}
.contact-page h1 {
  margin-bottom: 40px;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  max-width: 760px;
  margin: 0 auto 48px;
}
.contact-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 40px 32px;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: none;
}
.contact-card:hover {
  border-color: var(--color-border-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-glow);
  color: var(--color-text);
}
.contact-card h3,
.contact-card h2 {
  font-size: 1.15rem;
}
.contact-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}
.contact-instructions {
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
.contact-instructions h2 {
  font-size: 1.35rem;
  margin-bottom: 12px;
  color: var(--color-primary);
}
.contact-instructions p {
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: 16px;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
  border-radius: 0;
  padding: 12px 20px;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--transition),
    transform var(--transition);
  z-index: 200;
}
#toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .contact-page {
    padding: 80px 20px 40px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
.topbar {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
}
.brand {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-size: 1.05rem;
}
@media (max-width: 640px) {
  .topbar-row {
    padding: 10px 12px;
    gap: 8px;
  }
  .brand {
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .topbar-row nav {
    gap: 10px !important;
  }
  .topbar-row nav a {
    font-size: 12px;
  }
}
.nav-brand img {
  width: 28px;
  height: 28px;
  border-radius: 0;
  object-fit: contain;
  display: block;
}
.home-fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text-secondary);
  text-decoration: none;
  z-index: 40;
}
.home-fab:hover {
  color: var(--color-text);
  border-color: var(--color-border-light);
}
.home-fab img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}
main {
  animation: page-fade-in 0.32s ease-out both;
}
@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  main {
    animation: none;
  }
}
.faq-item {
  border: 1px solid var(--color-bg-tertiary);
  background: var(--color-bg-card);
  padding: 18px 22px;
  border-radius: 0;
}
.faq-item + .faq-item {
  margin-top: 10px;
}
.faq-item summary {
  cursor: pointer;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  display: flex;
  /* The padding sat on the parent details element, so the visible box measured
     55 to 66px while the tappable summary was 21 to 24px. Tapping the padding
     beside the question did nothing, which reads as a broken control. */
  align-items: center;
  min-height: 44px;
  gap: 10px;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--color-text-muted);
  transition: transform 0.15s ease;
  transform-origin: 4px 5px;
}
.faq-item[open] summary::before {
  transform: rotate(90deg);
}
.faq-item p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
}