@font-face {
  font-family: 'Mona Sans';
  src: url('/fonts/MonaSansVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal oblique 0deg 20deg;
  font-display: swap;
}

/* Make this the first item in the right-side group */
.hextra-nav-container nav > a[href="https://app.gitdailies.com/"],
.hextra-nav-container nav > a[href="https://app.gitdailies.com"] {
  margin-left: auto;
}

/* Navbar inner content shares the section container (same --content-max +
   --page-gutter formula as .landing-page) so the logo and CTA line up with
   the section content below on one vertical axis. No horizontal padding —
   the gutter is folded into the max-width. Vertical padding is 16px around
   the 48px CTA, replacing the theme's fixed h-16. Unlayered, so it beats
   the theme's layered max-width (hextra-max-navbar-width), h-16 and px-6. */
.hextra-nav-container nav {
  max-width: min(var(--content-max), 100% - 2 * var(--page-gutter));
  height: auto;
  padding: 16px 0;
}

/* Navbar surface (design): #08090A at 80% over the theme's background
   blur (kept), with a 1px white-4% bottom hairline instead of the
   theme's shadow. The theme sets the background with a layered
   !important, so this unlayered override needs !important to win;
   backdrop-filter is left to the theme's .hextra-nav-container-blur. */
.hextra-nav-container-blur {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border);
  box-shadow: none !important;
}

/* In-page anchor scrolling: animate the jump, gated on the user's motion
   preference (the theme's compiled CSS also forces scroll-behavior:auto
   !important under prefers-reduced-motion:reduce — belt and braces).
   Targets are offset so they don't land underneath the sticky navbar:
   the navbar renders taller than --nav-h on desktop (16px padding ×2
   around the 48px CTA = 80px), so the extra 2rem covers the overshoot
   and leaves breathing room below it. */
html {
  scroll-padding-top: calc(var(--nav-h) + 2rem);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Hero title font-size lives here, not in Tailwind: the 80px desktop
   step is an arbitrary value (lg:text-[5rem]) that repeatedly failed to
   compile under the dev server's Tailwind cache. custom.css is unlayered
   and fingerprinted, so these always apply on a plain refresh. Weight,
   tracking and colour stay on the element via Tailwind. */
.hero-title {
  font-size: 2.5rem;   /* 40px */
}
@media (min-width: 640px) {
  .hero-title {
    font-size: 3.75rem;  /* 60px */
  }
}
@media (min-width: 1024px) {
  .hero-title {
    font-size: 5rem;     /* 80px */
  }
}

.landing-page section.placeholder {
  padding-top: 2em;
  padding-bottom: 2em;
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 16px;
  gap: 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--btn-hover-transition);
}
.cta-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.cta-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary-border);
}
.cta-btn-primary:hover {
  background: var(--btn-primary-bg-hover);
}
.cta-btn-secondary {
  background: var(--btn-secondary-bg);
  color: var(--text-primary);
}
.cta-btn-secondary:hover {
  background: var(--btn-secondary-bg-hover);
}

/* Navbar CTA: the shared .cta-btn is desktop-only (mobile uses the
   sidebar menu). Must follow .cta-btn so this display wins the cascade
   over its unlayered display: inline-flex. Slightly shorter than the
   48px hero button to sit comfortably in the h-16 navbar. */
.nav-cta {
  display: none;
  margin-left: 0.3rem;
}
@media (min-width: 768px) {
  .nav-cta {
    display: inline-flex;
  }
}

/* Text links get the same gentle hover fade as .cta-btn: navbar links,
   footer links, and links inside landing/demo sections. CTA buttons are
   excluded — .cta-btn above already transitions its background — and this
   shorthand would otherwise clobber it (both rules are unlayered, and
   this one comes later). background-color is included for links that
   also change surface on hover (navbar dropdown items). The span variant
   catches links whose hover colour is set on an inner element (the hero
   badge's group-hover text). The hero is listed separately because it
   renders OUTSIDE the .landing-page wrapper (full-bleed trick). */
.hextra-nav-container nav a:not(.cta-btn),
.hextra-footer a,
:is(.landing-page, .landing-hero) a:not(.cta-btn),
:is(.landing-page, .landing-hero) a:not(.cta-btn) span,
.demo-page a:not(.cta-btn) {
  transition: color var(--link-hover-transition), background-color var(--link-hover-transition);
}

.landing-page {
  /* Vertical padding shared by every landing section — consumed via
     py-(--section-py) so the whole page keeps one rhythm. */
  --section-py: 3.5rem;
}
@media (min-width: 640px) {
  .landing-page {
    --section-py: 4.5rem;
  }
}

.demo-page {
  --section-py: 5rem;
}

/* Shared content container. --content-max + --page-gutter live at :root
   so BOTH the landing/demo section wrappers and the navbar inner content
   resolve to the same box and line up on one vertical axis. The gutter is
   folded into the max-width (not set as padding) so content stays exactly
   --content-max wide at large viewports — border-box padding would shrink it. */
:root {
  --content-max: 1100px;
  --page-gutter: 1rem;
}
@media (min-width: 640px) {
  :root {
    --page-gutter: 1.5rem;
  }
}
.landing-page,
.demo-page,
.article-page {
    --hextra-max-page-width: min(var(--content-max), 100% - 2 * var(--page-gutter));
}

/* Reusable content container matching the section wrapper: same max-width
   + gutter as .landing-page, centered. Used where the element isn't inside
   a .landing-page wrapper (e.g. the footer). */
.site-container {
  max-width: min(var(--content-max), 100% - 2 * var(--page-gutter));
  margin-inline: auto;
}

/* Page background (design: #08090A). Unlayered, so it beats Hextra's
   layered `body:where(.dark,.dark *)` rule without !important. */
body {
  background-color: var(--body-bg);
}

/* Footer shares the page background (theme defaults it to neutral-900), with
   a full-width 4%-white top hairline separating it from the content above. */
.hextra-footer {
  background-color: var(--body-bg);
  border-top: 1px solid var(--footer-border);
  margin-top: 4rem;   /* separate from the section above */
}

/* Neutralize the theme footer wrapper's own max-width + side padding so the
   inner .site-container is the sole width constraint and the footer content
   aligns with every other section. */
.hextra-custom-footer {
  max-width: none;
  padding-inline: 0;
}


/* --- Landing design tokens --------------------------------------- */
/* Single source of truth for colors and typography used across the
   landing partials. Consume in templates via Tailwind var utilities,
   e.g. bg-(--hero-card-bg), tracking-(--tracking-eyebrow),
   text-(length:--text-ui). */
:root {
  --font-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Page background behind all sections below the hero (design: #08090A),
     overriding Hextra's --hx-color-dark (#111). */
  --body-bg: #08090a;

  /* Navbar surface — semi-transparent dark over a backdrop blur, with a
     faint bottom hairline (design: #08090A 80% + #fff 4% stroke). */
  --nav-bg: rgba(8, 9, 10, 0.8);
  --nav-border: rgba(255, 255, 255, 0.04);
  --nav-h: 4rem;   /* theme navbar height (hx:h-16) — hero pulls up under it */

  /* Hero/card colors */
  --hero-bg-top: #060708;
  --hero-bg: #0a0b0d;
  --hero-bg-bottom: hsl(209, 11%, 33%);
  --hero-title-muted: #8a8f98;
  --hero-card-bg: #101113;
  --hero-card-border: rgba(255, 255, 255, 0.06);  /* #fff 6% */
  --hero-card-shadow: 0 24px 80px -16px rgba(0, 0, 0, 0.7);
  --hero-btn-bg: #1b1e24;
  --hero-btn-bg-hover: #23272e;
  --hero-btn-border: rgba(255, 255, 255, 0.08);
  --hero-dot: rgba(255, 255, 255, 0.1);
  --hero-dot-faint: rgba(255, 255, 255, 0.06);
  --hero-grid-line: rgba(255, 255, 255, 0.07);   /* hero staircase-line colour */

  --screenshot-border: rgb(65, 65, 66);

  /* Typography — eyebrow labels (uppercase tracked tags) */
  --text-eyebrow: 11px;
  --tracking-eyebrow: 0.16em;

  /* Typography — headings (h1/h2 share -tight, h3 uses -snug) */
  --tracking-heading-tight: -0.02em;
  --tracking-heading-snug: -0.01em;
  --leading-h1: 1.05;
  --leading-h2: 1.1;

  /* Typography — UI text (CTA buttons, card descriptions, etc.) */
  --text-ui: 15px;

  /* Semantic text colors. Default Tailwind gray ramp anchors the value
     for each role; usage sites encode INTENT, not the raw shade. */
  --text-primary: #ffffff;    /* headings, button text on dark surfaces */
  --text-soft: #d1d5db;       /* gray-300 — icon glyphs, badge hover state */
  --text-body: #9ca3af;       /* gray-400 — body copy, subtitles, section-level eyebrows */
  --text-muted: hsl(220, 9%, 56%);      /* gray-500 — card/logo eyebrows, super-muted labels */
  --text-badge: #f3f4f6;      /* gray-100 — brand-badge logoText */
  --footer-heading: rgba(255, 255, 255, 0.8);  /* footer column titles */
  --footer-border: rgba(255, 255, 255, 0.04);  /* full-width footer top hairline */
  --article-body: rgba(255, 255, 255, 0.68);   /* article prose — softer than pure white for long-form reading */
  --code-bg: #16181d;                          /* code-block surface (border reuses --hero-card-border) */
  --blockquote-border: #7c7fd8;                /* blockquote left accent bar */
  --eyebrow-icon: oklch(92.4% 0.12 95.746); /* amber-200 — section eyebrow icon */

  /* Primary (light-on-dark) button and the shared focus ring */
  --btn-primary-bg: #ffffff;
  --btn-primary-text: #0F172A;     /* slate-900 */
  --btn-primary-border: #E2E8F0;   /* slate-200 */
  --btn-primary-bg-hover: #e5e7eb; /* gray-200 */
  --btn-secondary-bg: #334155;     /* slate-700 */
  --btn-secondary-bg-hover: #3e4f66;
  --focus-ring: rgba(255, 255, 255, 0.6);

  /* Hover-fade timing for interactive colour changes. Buttons take a
     slower fade (big surface reads as deliberate); text links are
     quicker so small text doesn't feel like it trails the cursor. */
  --btn-hover-transition: 1s ease;
  --link-hover-transition: 0.3s ease;

  /* Featured quote card gradients (values from the Tailwind v4 palette).
     The two cards must read as ONE continuous wash across the gap
     between them, so the light card's end stop and the amber card's
     start stop share a single token: --quote-seam. */
  --quote-light-from: #ffffff;
  --quote-light-via: oklch(98.5% 0.001 106.423); /* stone-50 */
  --quote-seam: oklch(98.7% 0.022 95.277);       /* amber-50 */
  --quote-amber-via: oklch(96.2% 0.059 95.617);  /* amber-100 */
  --quote-amber-to: oklch(87% 0.12 88);          /* soft gold: amber-300 lightness, amber-200 chroma */

  /* Dark ink on the light featured quote cards */
  --quote-ink: #111827;                          /* gray-900 — quote text, author name */
  --quote-ink-soft: #4b5563;                     /* gray-600 — author role line */
  --quote-ink-border: rgba(156, 163, 175, 0.4);  /* gray-400/40 — figcaption divider */

  /* Staircase background pattern — stencil for .quote-card::after (full)
     and .landing-hero::before (sparse variant below, same geometry).
     Chains of single-cell connectors between
     adjacent dots on a 28px lattice: endpoints sit on dot centres
     ((14,14)+28n), each straight run spans exactly one cell, and segments
     join into chains of 2-5 that always climb "right and up" (560x392
     tile = 20x14 cells). Used as an alpha MASK — a data: URI can't
     resolve var(), so no design colour can live inside it; the `white`
     stroke is just a stencil primitive and each consumer paints its own
     colour via its background. A consumer on a different lattice scales
     the tile proportionally so endpoints stay on its dot centres (the
     hero's 41px grid uses 560x392 × 41/28 = 820x574). */
  --stair-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 392' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-width='1.3'><path d='M70 98 h28 v-28'/><path d='M294 126 v-28 h28 v-28'/><path d='M462 182 v-28 h28'/><path d='M98 238 h28 v-28 h28 v-28'/><path d='M266 322 h28 v-28 h28 v-28 h28'/><path d='M462 350 h28 v-28'/></g></svg>");
  /* Sparse variant for the hero: same tile and lattice, 3 of the 6 chains
     (one per tile third, spread corner-to-corner). The full-density
     stencil reads as busy across the hero's viewport-wide canvas. */
  --stair-mask-sparse: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 392' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-width='1.3'><path d='M70 98 h28 v-28'/><path d='M462 182 v-28 h28'/><path d='M266 322 h28 v-28 h28 v-28 h28'/></g></svg>");
  --quote-stair-ink: rgba(0, 0, 0, 0.08);        /* staircase lines on the light quote cards */

  --integration-icon-border: rgba(255, 255, 255, 0.1);

  /* Bottom-CTA watermark "G" — faint, fading down the card surface */
  --cta-mark: rgba(255, 255, 255, 0.05);   /* flat faint "G" watermark */

  /* Pricing section */
  --pricing-featured-bg: #101113;                 /* middle (featured) card, a touch lighter */
  --pricing-featured-border: rgba(255, 255, 255, 0.12);
  --pricing-badge-bg: #e9eaed;                    /* "Most teams" pill */
  --pricing-badge-text: #16171b;
  --pricing-accent: oklch(92.4% 0.12 95.746);     /* amber — annual "-17%" badge + "save" text */
  --pricing-accent-text: #3a2c00;                 /* dark ink on the amber badge */
  --slider-track: #16181d;   /* unfilled track (right of thumb) */
  --slider-fill: #ffffff;    /* filled/active portion, left of the thumb */
  --slider-dot-fill: #16181d;                     /* dot default fill — reads as a hole in the track */
  --slider-dot-border: rgba(255, 255, 255, 0.1);  /* dot default hairline stroke */

  /* Article author card — avatar disc behind the name's initial */
  --author-avatar-bg: #7c74d6; /* periwinkle, matches the purple-300 category tag family */

  /* End-of-article "what's next" CTA — numbered badge, same periwinkle
     family as --author-avatar-bg (a faint wash with light-purple digits) */
  --next-step-badge-bg: rgba(124, 116, 214, 0.16);
  --next-step-badge-text: #b3aef0;

  /* Article panel-quote shortcode (in-article testimonial card). The
     leading glyph uses the brand amber (same value as --eyebrow-icon); the
     avatar ring is a hair brighter than the card border so the portrait
     reads as a distinct disc. */
  --panelquote-mark: oklch(92.4% 0.12 95.746);
  --panelquote-avatar-ring: rgba(255, 255, 255, 0.12);

  /* Demo page — form fields */
  --input-bg: #16181d;
  --input-border: rgba(255, 255, 255, 0.12);
  --required-mark: #f05033;               /* brand orange (gitdailies-mark dot) */
}

/* --- Featured quote card pattern --------------------------------- */
/* Dot grid + faint cross-hatch overlay on .quote-card. Drawn in a
   ::before so the figure's own background-image (Tailwind gradient)
   stays untouched — applying the pattern as background-image directly
   would clobber the gradient. */
.quote-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Single square lattice (dots at (14,14)+28n) — no offset second
     layer, unlike the hero background. */
  background-image: radial-gradient(rgba(0, 0, 0, 0.11) 1px, transparent 1.6px);
  background-size: 28px 28px;
  background-position: 0 0;
  /* Mask intensity to fade out near the corners but keep the field visible */
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 20%, transparent 95%);
          mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 20%, transparent 95%);
}

.screenshot-border {
  border-radius: 0.75rem;
  border: 1px solid var(--screenshot-border);
}

/* Staircase chains between adjacent dots — geometry lives in the shared
   --stair-mask stencil (endpoints match the ::before dot centres). The
   stencil occupies the mask slot, so the corner fade the dots get from
   their mask is achieved here by fading the ink itself: the background
   is a radial gradient of --quote-stair-ink with the same stops. */
.quote-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: radial-gradient(ellipse at center, var(--quote-stair-ink) 20%, transparent 95%);
  -webkit-mask-image: var(--stair-mask);
          mask-image: var(--stair-mask);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 560px 392px;
          mask-size: 560px 392px;
}


/* --- Landing hero background: dot grid + vertical gradient -------- */
/* Background properties only — custom.css is unlayered and would
   override any Tailwind utility set on the same element. The dot grid
   is a single CSS radial-gradient (41px lattice, matching the original
   export) layered ABOVE the vertical dark fade; a radial-gradient tiles
   perfectly, so there are no seams or doubled dots like the repeated PNG
   produced. The section is pulled up by the navbar height (with matching
   top padding) so the pattern runs to the very top of the page, behind
   the semi-transparent sticky navbar — content position is unchanged. */
.landing-hero {
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
  background-color: var(--hero-bg);
  /* Two layers: the dot grid (radial-gradient tiles perfectly — no seams or
     doubled dots like the old repeated PNG) above the vertical dark fade,
     both anchored top-LEFT (0 0). The section is pulled up by the navbar
     height (with matching top padding) so the pattern runs to the very top
     of the page, behind the semi-transparent sticky navbar. */
  background-image:
    radial-gradient(var(--hero-dot) 1px, transparent 1.6px),
    linear-gradient(180deg, var(--hero-bg-top) 0%, var(--hero-bg) 75%, var(--hero-bg-bottom) 100%);
  background-repeat: repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: 41px 41px, 100% 100%;
}
/* Staircase lines, same family as the featured quote cards but using the
   sparse stencil variant: --stair-mask-sparse is the alpha mask and the
   visible colour comes from --hero-grid-line via background-color. The
   560x392 tile is scaled by 41/28 to 820x574 so every endpoint lands on
   this section's dot centres (20.5+41n) — same 0 0 origin as the dot
   grid, so the lines stay locked to the dots at any width. z-index keeps
   them above the dot background but below the hero content (z-10). */
.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--hero-grid-line);
  -webkit-mask-image: var(--stair-mask-sparse);
          mask-image: var(--stair-mask-sparse);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  -webkit-mask-size: 820px 574px;
          mask-size: 820px 574px;
}

/* --- Article prose: soften the flowing body text ----------------- */
/* Pure white is harsh for long-form reading on the dark background, so
   paragraphs/lists use --article-body (softer white). Headings stay bright
   for hierarchy; links keep their own accent colour (untouched here).
   Unlayered so it wins over the theme's layered prose colour. */
.content,
.content p,
.content li,
.content blockquote {
  color: var(--article-body);
}
.content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-primary);
}
/* Move the theme's under-heading divider ABOVE the big section headings so
   it separates sections (a line between the previous section and the next
   h2), instead of underlining the heading. */
.content :is(h2, h3) {
  border-bottom: 0;
  padding-bottom: 0;
}
.content h2 {
  border-top: 1px solid var(--hero-card-border);
  padding-top: 2rem;
}

/* Code blocks: use the site's surface tokens (dark neutral + 6% hairline)
   instead of the theme's bluish primary-700, for consistency with cards. */
.content pre {
  background-color: var(--code-bg);
  border: 1px solid var(--hero-card-border);
}

/* Blockquotes: a little vertical padding + symmetric margin so they don't
   blend into the body text, and a coloured left accent bar. */
.content blockquote {
  padding-block: 8px;
  margin-block: 1rem;
  border-left-color: var(--blockquote-border);
}
/* The panelquote shortcode wraps its <blockquote> in a div, making it
   :first-child — which the theme zeroes the top margin for (higher
   specificity than the rule above). Restore the symmetric top margin. */
.content blockquote:first-child {
  margin-top: 1rem;
}

/* --- Article panel-quote (in-article testimonial card) ----------- */
/* The shortcode (layouts/shortcodes/panelquote.html) is `not-prose`, so the
   article's prose blockquote spacing is gone — restore paragraph rhythm here.
   Colors/typography that don't need overriding stay in the template. */
.panelquote blockquote p + p {
  margin-top: 1rem;
}
/* Oversized amber opening quote, sitting just above the text as a leading
   accent. A serif renders a true typographic quotation mark; the tall glyph
   box is collapsed with line-height + negative margins so the quote tucks in
   close beneath it rather than leaving a gap. */
.panelquote-mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  height: 2.5rem;
  margin-bottom: 0.25rem;
  color: var(--panelquote-mark);
  user-select: none;
}

/* --- Blog category filter (CSS-only: sibling radios + :checked) --- */
/* Segmented pill bar like .bill-toggle, but driven by hidden sibling
   radios instead of JS. The active-tab/focus and card-hiding rules are
   generated per-category in an inline <style> in layouts/articles/list.html
   (they depend on the live category set); only the base styling lives here. */
.article-filter-radio {            /* visually hidden, still focusable */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.article-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2.5rem;
}
.article-filter label {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--text-body);
  background: var(--hero-btn-bg);
  border: 1px solid var(--hero-btn-border);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.article-filter label:hover {
  background: var(--hero-btn-bg-hover);
  color: var(--text-soft);
}
/* The featured article is pinned above the tabs (see articles/list.html), so
   its duplicate card is always hidden in the grid — in every filter view. */
.article-grid > [data-featured] {
  display: none;
}

/* --- Pricing billing toggle (Monthly / Annual) ------------------- */
/* Active segment is selected via [aria-pressed], so the JS only flips
   that attribute — no class juggling for appearance. */
.bill-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--hero-btn-bg);
  border: 1px solid var(--hero-btn-border);
}
.bill-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: var(--text-ui);
  font-weight: 500;
  color: var(--text-body);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.bill-toggle button[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--btn-primary-text);
}
.bill-toggle .save-badge {
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--pricing-accent);
  color: var(--pricing-accent-text);
}

/* --- Pricing volume slider --------------------------------------- */
/* Native range input, dark-mode styled. The visible track, fill, and the
   snap-point dots are NOT drawn by the input — the native track is made
   transparent and three sibling layers are stacked inside the wrapper:
     0. .pricing-track  — track line + white fill (driven by --pct)
     1. .pricing-ticks  — the dot markers, overlaid on the track
     2. .pricing-slider — the input, transparent track, so only its thumb
                          paints, sitting ABOVE the dots.
   --pct (0-100%) is set inline on the wrapper by the slider JS and
   inherited by .pricing-track. The geometry constants live on the wrapper
   (the common ancestor) so every layer derives from one source. */
.pricing-slider-wrap {
  position: relative;
  isolation: isolate;
  --track-h: 4px;
  --thumb: 22px;          /* thumb diameter */
  --pill: 999px;          /* full pill rounding */
  --thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  height: var(--thumb);   /* deterministic midline for top:50% layers + thumb */
}
/* Layer 0: visible track + white fill, centred in the wrapper. */
.pricing-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--track-h);
  border-radius: var(--pill);
  background:
    linear-gradient(var(--slider-fill), var(--slider-fill)) 0 / var(--pct, 0%) 100% no-repeat,
    var(--slider-track);
  pointer-events: none;
  z-index: 0;
}
/* Layer 2: the input. Native track transparent (drawn by .pricing-track);
   only the thumb paints, and it sits on top of the dots via z-index. */
.pricing-slider {
  position: relative;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;            /* fills the wrapper; visible track is drawn separately */
  margin: 0;               /* kill the UA range-input margin that shifts the axis */
  background: transparent;
  cursor: pointer;
}
/* Native track spans the full input height (transparent) so the thumb
   centres on the input's vertical midline — the same axis as .pricing-track
   and .pricing-ticks (both top:50%). A short track would be top-aligned by
   WebKit, floating the thumb above the visible track. */
.pricing-slider::-webkit-slider-runnable-track {
  height: 100%;
  background: transparent;
}
.pricing-slider::-moz-range-track {
  height: 100%;
  background: transparent;
}
.pricing-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: 0;   /* full-height track already centres the thumb vertically */
  border-radius: var(--pill);
  background: var(--text-primary);
  box-shadow: var(--thumb-shadow);
}
.pricing-slider::-moz-range-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border: none;
  border-radius: var(--pill);
  background: var(--text-primary);
  box-shadow: var(--thumb-shadow);
}
.pricing-slider:focus-visible {
  outline: none;
}
.pricing-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.pricing-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Layer 1: snap-point dots overlaid ON the centred track (above the track
   line, below the thumb). Span the FULL track width — first dot at the
   start, last at the end — matching the .pricing-track extent and the
   --pct fill. */
.pricing-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);   /* centre dots on the track */
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1;
}
.pricing-ticks > span {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: var(--pill);
  background: var(--slider-dot-fill);          /* hollow "hole" by default */
  border: 1px solid var(--slider-dot-border);
}
/* Passed dots (left of the thumb) fill white; the JS adds .is-passed. */
.pricing-ticks > span.is-passed {
  background: var(--text-primary);
  border-color: transparent;
}

/* --- FAQ accordion ----------------------------------------------- */
/* Button + panel accordion. The chevron rotates with aria-expanded; the
   script animates the panel height (Web Animations API) and collapses
   closed panels on load. Answer links/spacing styled here since the
   answer HTML comes from markdownify (no per-element classes).
   No-JS fallback: panels render expanded (overflow visible content). */
.faq-q {
  appearance: none;
  background: none;
  border: 0;
}
.faq-chevron {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.faq-q[aria-expanded="true"] .faq-chevron {
  transform: rotate(180deg);
}
.faq-answer-clip {
  overflow: hidden;
}
.faq-answer a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-answer a:hover {
  color: var(--text-soft);
}
.faq-answer > * + * {
  margin-top: 0.75rem;
}

/* --- Bottom-CTA watermark ---------------------------------------- */
/* The GitDailies "G" mark, rendered as a single faint silhouette via a
   CSS mask (so its colour is one token, not the SVG's own white + orange
   fills). The SVG URL is passed in from the template as --cta-mark-url. */
.bottom-cta-mark {
  background-color: var(--cta-mark);
  -webkit-mask-image: var(--cta-mark-url);
          mask-image: var(--cta-mark-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}