/* Components: copied unchanged from design-system/bundle.css, which is the
   .blabr-* component stylesheet of the Claude Design system artifact (blabe
   Design System, v11): https://claude.ai/artifact/3P4LSCc6xfCnfN4RpcUExS
   To update, replace the body below with the new bundle and leave site.css alone.
   Page layout lives in site.css. Colors, spacing, radii and shadows come from
   tokens.css. */

/* blabr components: shared classes.
   Every color, gap, radius and shadow is a token from tokens.css; type comes from the
   type classes (body, label, caption, kbd, app-callout…) set in the markup next to these.
   The pill's own measurements (36 px tall, 14 px inset, 3 px bars…) are copied from
   PillView.swift and stay literal on purpose. */

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); }

/* ---------- Specimen layout (shared by the previews) ---------- */

.blabr-sheet { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); }
.blabr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.blabr-flush { margin: 0; }
.blabr-meta { color: var(--ink-muted); }
.blabr-secondary { color: var(--ink-secondary); }
.blabr-strong { color: var(--ink); }

.blabr-figure { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; }
.blabr-figcaption { display: flex; flex-direction: column; }

/* A fixed ground for brand art. Pin it with data-theme="light" when the art needs that ground in both page themes. */
.blabr-tile { box-sizing: border-box; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 160px; padding: var(--space-10); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--hairline); }
.blabr-tile--paper { background: var(--paper); }
.blabr-tile--ink { background: var(--ink); box-shadow: none; }
.blabr-tile--coral { background: var(--coral); box-shadow: none; }
.blabr-tile--hero { min-height: 208px; }
.blabr-tile--diagram { padding: var(--space-6); }

/* A themed panel: set data-theme="light" or "dark" on it to show one theme inside either page theme. */
.blabr-stages { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.blabr-stage { box-sizing: border-box; flex: 1 1 320px; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }

/* ---------- Logo ---------- */

.blabr-art { display: block; max-width: 100%; height: auto; }
.blabr-art--lockup { width: 360px; }
.blabr-art--lockup-sm { width: 200px; }
.blabr-art--stacked { width: 148px; }
.blabr-art--wordmark { width: 152px; }

.blabr-logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.blabr-span-2 { grid-column: span 2; }
@media (max-width: 640px) {
  .blabr-logo-grid { grid-template-columns: minmax(0, 1fr); }
  .blabr-span-2 { grid-column: auto; }
}

.blabr-clearspace { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
.blabr-cs-zone { fill: var(--blush); stroke: var(--hairline-strong); stroke-width: 3; stroke-dasharray: 12 9; }
.blabr-cs-box { fill: var(--paper); }
.blabr-cs-guide { fill: none; stroke: var(--coral-text); stroke-width: 2; stroke-dasharray: 8 8; }
.blabr-cs-dim { fill: none; stroke: var(--coral-text); stroke-width: 4; stroke-linecap: round; }
.blabr-cs-text { fill: var(--coral-text); font-family: var(--font-sans); font-size: 40px; font-weight: 600; }

/* ---------- Mascot ---------- */

.blabr-mascot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--space-4); }
/* Left-aligned at one height, so the bubble sits in the same place in every tile. */
.blabr-mascot-tile { box-sizing: border-box; display: flex; align-items: center; height: 112px; padding: 0 var(--space-2) 0 var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: inset 0 0 0 1px var(--hairline); }
.blabr-art--mascot { display: block; width: auto; height: 72px; }

/* ---------- App icon ---------- */

.blabr-icon-groups { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6) var(--space-10); }
.blabr-icon-group { display: flex; flex-direction: column; gap: var(--space-3); }
.blabr-icon-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-6); }
.blabr-icon-row .blabr-figure { align-items: center; }
.blabr-icon { display: block; flex: none; }
.blabr-icon--128 { width: 128px; height: 128px; }
.blabr-icon--64 { width: 64px; height: 64px; }
.blabr-icon--32 { width: 32px; height: 32px; }
.blabr-icon--16 { width: 16px; height: 16px; }

/* ---------- Dictation pill (web rendition of PillView) ---------- */

.blabr-pill { box-sizing: border-box; display: inline-flex; align-items: center; justify-self: start; height: 36px; max-width: 340px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow-pill); }
.blabr-pill-dot { flex: none; width: 8px; height: 8px; margin-right: var(--space-2); border-radius: var(--radius-pill); background: var(--coral); }
.blabr-pill-meter { display: flex; align-items: center; gap: 2px; height: 20px; }
.blabr-pill-bar { flex: none; width: 3px; min-height: 3px; border-radius: var(--radius-pill); background: var(--ink); transition: height .1s ease-out; }
/* As wide as dot + gap + meter (8 + 8 + 20 × 3 + 19 × 2 = 114 px), so the pill keeps its size when recording ends. */
.blabr-pill-dots { display: flex; align-items: center; justify-content: center; gap: 6px; width: 114px; }
.blabr-pill-dots > span { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--ink); opacity: .7; animation: blabr-pill-pulse .5s ease-in-out infinite alternate; }
.blabr-pill-dots > span:nth-child(2) { animation-delay: .16s; }
.blabr-pill-dots > span:nth-child(3) { animation-delay: .32s; }
@keyframes blabr-pill-pulse { from { opacity: .7; } to { opacity: .2; } }
@media (prefers-reduced-motion: reduce) {
  .blabr-pill-dots > span { animation: none; }
  .blabr-pill-bar { transition: none; }
}
.blabr-pill-message { display: flex; align-items: center; gap: 7px; min-width: 0; }
.blabr-pill-icon { display: block; flex: none; width: 14px; height: 14px; color: var(--ink-secondary); }
.blabr-pill-icon--error { color: var(--danger); }
.blabr-pill-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.blabr-pill-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--space-3) var(--space-4); }

/* ---------- Menu-bar glyphs ---------- */

/* The glyph files are black template images; macOS tints them. Here currentColor does the tinting. */
.blabr-glyph { display: block; width: 18px; height: 18px; }
.blabr-glyph path, .blabr-glyph circle { fill: currentColor; }
.blabr-menubar { display: flex; align-items: center; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline); }
.blabr-menubar--2x { height: 48px; border-radius: var(--radius-md); }
.blabr-menubar--2x .blabr-glyph { width: 36px; height: 36px; }
.blabr-menubar-item, .blabr-menubar-labels > span { display: flex; justify-content: center; width: 80px; text-align: center; }
.blabr-menubar-labels { display: flex; padding: 0 var(--space-2); }

/* ---------- Button ---------- */

.blabr-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px); border: 2px solid var(--coral); border-radius: var(--radius-pill); background: var(--coral); color: var(--on-coral); font-family: var(--font-sans); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .12s ease-out, border-color .12s ease-out; }
.blabr-btn svg { display: block; flex: none; width: 20px; height: 20px; margin-left: calc(var(--space-1) * -1); }
.blabr-btn--primary { border-color: var(--coral); background: var(--coral); color: var(--on-coral); }
.blabr-btn--primary:hover, .blabr-btn--primary:active, .blabr-btn--primary.blabr-is-hover { border-color: var(--coral-tongue); background: var(--coral-tongue); }
.blabr-btn--secondary { border-color: var(--ink); background: none; color: var(--ink); }
.blabr-btn--secondary:hover, .blabr-btn--secondary:active, .blabr-btn--secondary.blabr-is-hover { background: var(--blush); }
.blabr-btn:active { transform: translateY(1px); }
.blabr-btn:focus { outline: none; }
.blabr-btn:focus-visible, .blabr-btn.blabr-is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .blabr-btn { transition: none; } .blabr-btn:active { transform: none; } }

.blabr-cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.blabr-states { display: grid; grid-template-columns: repeat(3, max-content); align-items: start; gap: var(--space-4) var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--hairline); }

/* ---------- Key cap ---------- */

.blabr-key { box-sizing: border-box; display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); background: var(--paper-raised); color: var(--ink); box-shadow: 0 1px 0 var(--hairline-strong); white-space: nowrap; }
.blabr-keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- Website: shared helpers ---------- */

/* Swap the logo per theme: put both files in the markup and let the theme pick.
   :root raises these above component rules like `.blabr-nav-logo img`. */
:root .blabr-for-dark { display: none; }
[data-theme="dark"] .blabr-for-dark { display: block; }
[data-theme="dark"] .blabr-for-light { display: none; }
.blabr-container { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-10); }
@media (max-width: 640px) { .blabr-container { padding: 0 var(--space-4); } }
.blabr-measure { max-width: 68ch; }
.blabr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.blabr-link { color: var(--coral-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.blabr-link:hover { text-decoration-thickness: 2px; }
.blabr-link:focus-visible, .blabr-nav-link:focus-visible, .blabr-footer-link:focus-visible, .blabr-faq-q:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- Nav ---------- */

.blabr-nav { display: flex; align-items: center; gap: var(--space-6); height: 72px; }
.blabr-nav-logo { display: flex; flex: none; margin-right: auto; }
.blabr-nav-logo img { display: block; width: auto; height: 32px; }
.blabr-nav-links { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.blabr-nav-link { color: var(--ink-secondary); text-decoration: none; }
.blabr-nav-link:hover, .blabr-nav-link[aria-current="page"] { color: var(--ink); }
.blabr-nav .blabr-btn { padding: calc(var(--space-2) - 2px) calc(var(--space-4) - 2px); }
@media (max-width: 640px) { .blabr-nav-links { display: none; } }

/* ---------- Hero ---------- */

/* The photo is a light room, so the hero pins data-theme="light" on itself in both page themes. */
.blabr-hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); }
.blabr-hero-media { position: absolute; inset: 0; }
.blabr-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.blabr-hero-copy { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 45%; min-width: 320px; padding: var(--space-24) var(--space-10); }
.blabr-hero-copy .display-xl, .blabr-hero-copy .subheading { margin: 0; }
.blabr-hero-accent { color: var(--coral); }
.blabr-hero .blabr-cta { margin-top: var(--space-4); }
@media (max-width: 640px) {
  .blabr-hero { display: flex; flex-direction: column-reverse; }
  .blabr-hero-media { position: static; aspect-ratio: 4 / 5; }
  .blabr-hero-copy { width: auto; min-width: 0; padding: var(--space-10) var(--space-4); }
  .blabr-hero-copy .display-xl { font-size: 44px; line-height: 48px; }
}

/* ---------- How it works ---------- */

.blabr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; counter-reset: blabr-step; }
.blabr-step { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); counter-increment: blabr-step; }
.blabr-step img { display: block; width: auto; height: 88px; margin-bottom: var(--space-2); }
.blabr-step-label::before { content: "Step " counter(blabr-step); }
.blabr-step .subheading, .blabr-step .body-small { margin: 0; }
@media (max-width: 640px) { .blabr-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } }

/* ---------- Feature card ---------- */

.blabr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.blabr-card { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: var(--shadow-card); }
/* Style B art is drawn for the light paper ground: wrap it in data-theme="light" so it keeps that ground in dark mode too. */
.blabr-card-art { display: block; overflow: hidden; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--paper); }
.blabr-card-art img { display: block; width: 100%; height: auto; }
.blabr-card .subheading, .blabr-card .body-small { margin: 0; }
.blabr-callout .blabr-card { box-shadow: var(--shadow-card), 0 0 0 1px var(--hairline); }

/* ---------- Compare table ---------- */

.blabr-compare-wrap { overflow-x: auto; }
.blabr-compare { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; text-align: left; }
.blabr-compare caption { caption-side: bottom; padding-top: var(--space-3); text-align: left; }
.blabr-compare th, .blabr-compare td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.blabr-compare thead th { color: var(--ink-secondary); }
.blabr-compare tbody th { color: var(--ink); font-weight: 500; }
.blabr-compare .blabr-compare-us { background: var(--blush); color: var(--ink); }
.blabr-compare thead .blabr-compare-us { border-radius: var(--radius-lg) var(--radius-lg) 0 0; color: var(--ink); font-weight: 600; }
.blabr-compare tbody tr:last-child .blabr-compare-us { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.blabr-mark { display: inline-flex; align-items: center; gap: var(--space-2); }
.blabr-mark svg { flex: none; width: 16px; height: 16px; }

/* ---------- Price card ---------- */

.blabr-price { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 400px; padding: var(--space-10); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: var(--shadow-card); }
.blabr-price-amount { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.blabr-price-was { color: var(--ink-muted); text-decoration: line-through; }
.blabr-price-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.blabr-price-list li { display: flex; gap: var(--space-2); }
.blabr-price-list svg { flex: none; width: 20px; height: 24px; color: var(--success); }
.blabr-price .blabr-btn { align-self: stretch; }

/* ---------- FAQ ---------- */

.blabr-faq { display: flex; flex-direction: column; margin: 0; border-top: 1px solid var(--hairline); }
.blabr-faq-item { border-bottom: 1px solid var(--hairline); }
.blabr-faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; color: var(--ink); cursor: pointer; list-style: none; }
.blabr-faq-q::-webkit-details-marker { display: none; }
.blabr-faq-q svg { flex: none; width: 20px; height: 20px; color: var(--ink-secondary); transition: transform .12s ease-out; }
.blabr-faq-item[open] .blabr-faq-q svg { transform: rotate(180deg); }
.blabr-faq-a { margin: 0; padding: 0 0 var(--space-4); color: var(--ink-secondary); }
@media (prefers-reduced-motion: reduce) { .blabr-faq-q svg { transition: none; } }

/* ---------- Footer ---------- */

.blabr-footer { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-16) 0 var(--space-10); border-top: 1px solid var(--hairline); }
.blabr-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-10); }
.blabr-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 280px; }
.blabr-footer-brand img { display: block; width: auto; height: 28px; }
.blabr-footer-cols { display: flex; flex-wrap: wrap; gap: var(--space-10); }
.blabr-footer-col { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.blabr-footer-link { color: var(--ink-secondary); text-decoration: none; }
.blabr-footer-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.blabr-footer-legal { margin: 0; color: var(--ink-muted); }

/* ---------- Callout (blush band) ---------- */

.blabr-callout { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-10); border-radius: var(--radius-lg); background: var(--blush); color: var(--ink); }
.blabr-callout-copy { display: flex; flex-direction: column; gap: var(--space-2); max-width: 60ch; }
.blabr-callout-copy .heading, .blabr-callout-copy .body { margin: 0; }
@media (max-width: 640px) { .blabr-callout { padding: var(--space-6); } }