/* ==========================================================
   TygerLabs.ai · UI kit
   Every reusable component. Bootstrap components are themed
   through their own CSS variables, never by overriding their
   rules. Page CSS composes these; it never redefines them.

   Hover families (the only five):
     1 card    lift -2px, rim to tiger, shadow
     2 button  lift -1px, fill shift, press +1px
     3 link    color only
     4 input   border color only
     5 icon    color only
   ========================================================== */

/* ---------- Type helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  font-family: var(--ff-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--tiger-2);
  line-height: 1.35;
}
/* No dash bar, no caps, no tracking: those three together are the
   template look. The eyebrow is a plain, confident label. */

.display {
  font-family: var(--ff-display);
  font-size: var(--text-hero);
  font-weight: var(--fw-ultra);
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--ink);
}
/* background-clip: text paints only inside the element's box, and tight
   tracking makes that box narrower than the last glyph's ink: the final
   letter was sliced. Padding widens the painted area; the negative margin
   gives the space back so layout doesn't move. */
.text-tiger {
  background: var(--tiger-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 0.12em 0.14em 0;
  margin-right: -0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lede { font-size: var(--text-xl); line-height: 1.5; color: var(--ink-2); }
.muted { color: var(--muted); }
.fine { font-size: var(--text-sm); color: var(--dim); }

/* ---------- Buttons (Bootstrap .btn, themed by variables) ---------- */
.btn {
  --bs-btn-font-family: var(--ff-display);
  --bs-btn-font-weight: var(--fw-bold);
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0.75rem;
  --bs-btn-font-size: var(--text-md);
  --bs-btn-line-height: 1.25;
  --bs-btn-border-radius: var(--r-pill);
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  white-space: nowrap;
  text-align: center;
  letter-spacing: -0.005em;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
/* Buttons hold one line wherever there's room; on phones a long label may
   wrap rather than push its container past the screen edge. */
@media (max-width: 575.98px) { .btn { white-space: normal; } }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn .ph, .btn .ph-fill { font-size: 1.15em; }
.btn-sm {
  --bs-btn-padding-x: 1.125rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-size: var(--text-sm);
  min-height: 44px;
}
.btn-lg {
  --bs-btn-padding-x: 1.875rem;
  --bs-btn-padding-y: 0.875rem;
  --bs-btn-font-size: var(--text-lg);
  min-height: 56px;
}
.btn-primary {
  --bs-btn-color: var(--tiger-ink);
  --bs-btn-bg: var(--tiger);
  --bs-btn-border-color: var(--tiger);
  --bs-btn-hover-color: var(--tiger-ink);
  --bs-btn-hover-bg: var(--tiger-2);
  --bs-btn-hover-border-color: var(--tiger-2);
  --bs-btn-active-color: var(--tiger-ink);
  --bs-btn-active-bg: var(--tiger-deep);
  --bs-btn-active-border-color: var(--tiger-deep);
  --bs-btn-disabled-color: var(--tiger-ink);
  --bs-btn-disabled-bg: var(--tiger);
  --bs-btn-disabled-border-color: var(--tiger);
}
.btn-primary:hover { box-shadow: var(--shadow-tiger); }
.btn-outline-light {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line-3);
  --bs-btn-hover-color: var(--bg);
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: var(--bg);
  --bs-btn-active-bg: var(--ink-2);
  --bs-btn-active-border-color: var(--ink-2);
}
.btn-ghost {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--surface-2);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-3);
  --bs-btn-hover-border-color: var(--line-2);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--surface-3);
  --bs-btn-active-border-color: var(--line-2);
}
.btn-link { --bs-btn-color: var(--tiger-2); --bs-btn-hover-color: var(--ink); }
.btn-link:hover { transform: none; }

/* Inline arrow link, for secondary actions inside cards and sections */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  color: var(--tiger-2);
  text-decoration: none;
}
.link-arrow:hover { color: var(--ink); }
/* A row of onward links under a page's main content */
.page-next { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: var(--s-7) 0 0; }

/* ---------- Pills and chips ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  white-space: nowrap;
}
.pill-tiger   { background: var(--tiger-soft); color: var(--tiger-2); }
.pill-success { background: var(--success-soft); color: var(--success-ink); }
.pill-info { background: var(--info-soft); color: var(--info-ink); }
.pill-warn { background: var(--warn-soft); color: var(--warn-ink); }
.pill-danger { background: var(--danger-soft); color: var(--danger-ink); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft);
}
.status-dot.is-warn { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.status-dot.is-danger { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }

/* ---------- Cards (six families, never a seventh) ----------
   .feature       canonical content card
   .path          description card, no link
   .related-card  "more like this"
   .spec-card     technology or spec card
   .archive-card  filterable index card
   .why-tile      numbered reason tile                      */
.feature,
.path,
.related-card,
.spec-card,
.archive-card,
.why-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--surface-1);
  color: var(--ink-2);
  text-decoration: none;
  transition: transform var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
a.feature:hover,
a.related-card:hover,
a.spec-card:hover,
a.archive-card:hover,
.why-tile:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
  color: var(--ink-2);
}
.feature h3, .path h3, .related-card h3, .spec-card h3, .archive-card h3, .why-tile h3 { margin: 0; }
.feature p, .path p, .related-card p, .spec-card p, .archive-card p, .why-tile p { margin: 0; }
.card-foot { margin-top: auto; padding-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
a:hover .link-arrow { color: var(--ink); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--tiger-soft);
  color: var(--tiger);
  font-size: 1.625rem;
}
.card-num {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);   /* --dim failed contrast on the raised tiles (Lighthouse) */
}
.feature-flagship {
  background:
    radial-gradient(120% 80% at 100% 0%, var(--tiger-glow) 0%, transparent 55%),
    var(--surface-1);
}


.archive-card.is-hidden { display: none; }

/* ---------- Stat tile ---------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.stat-value {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 1.8rem + 2.8vw, 4.5rem);
  font-weight: var(--fw-ultra);
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
}
.stat-label { font-size: var(--text-sm); color: var(--muted); max-width: 18rem; }
.stat-source { font-family: var(--ff-body); font-size: var(--text-xs); color: var(--dim); font-variant-numeric: tabular-nums;}

/* ---------- Logo strip (client names set in type) ---------- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-strip li {
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.02em;
  color: var(--dim);
  transition: color var(--t-fast) var(--ease);
}
.logo-strip li:hover { color: var(--ink); }

/* ---------- Check list ---------- */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.check-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.check-list .ph, .check-list .ph-fill { color: var(--tiger); font-size: 1.25rem; flex-shrink: 0; margin-top: 0.15rem; }

/* ---------- Panel: a raised block for forms, summaries, callouts ---------- */
.panel {
  padding: clamp(var(--s-5), 3vw, var(--s-7));
  border-radius: var(--r-xl);
  background: var(--surface-1);
}
.panel-tiger {
  background:
    radial-gradient(90% 120% at 0% 0%, var(--tiger-soft) 0%, transparent 60%),
    var(--surface-1);
}

/* ---------- CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--s-7), 6vw, var(--s-10)) clamp(var(--s-5), 5vw, var(--s-9));
  border-radius: var(--r-xl);
  background: var(--tiger-gradient);
  color: var(--tiger-ink);
  isolation: isolate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/brand/stripes-dark.svg") center / cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--tiger-ink); font-size: clamp(2.25rem, 1.4rem + 4vw, 5rem); font-weight: var(--fw-ultra); letter-spacing: -0.04em; max-width: 14ch; }
.cta-band p { color: var(--tiger-ink); font-size: var(--text-lg); max-width: 34rem; }
.cta-band .btn-dark {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--tiger-ink);
  --bs-btn-border-color: var(--tiger-ink);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--surface-2);
  --bs-btn-hover-border-color: var(--surface-2);
  --bs-btn-active-bg: var(--surface-3);
}
/* Every band carries the homepage's look: the stripes stepped back and one
   claw rake torn through the orange to the page black behind it. The
   homepage draws its rake as a span (.home-cta-scratch); every other band
   gets the same rake from ::after, so no page file has to change. The old
   tiger-mark watermark is retired. */
.cta-band:not(.home-cta)::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -1%;
  bottom: -4%;
  width: min(54%, 620px);
  aspect-ratio: 2.24;
  background: var(--bg);
  -webkit-mask: url("../assets/brand/scratch-2.svg") center / contain no-repeat;
  mask: url("../assets/brand/scratch-2.svg") center / contain no-repeat;
  pointer-events: none;
}
.cta-band-mark { display: none; }

/* ---------- Scratch: the logo's claw rake as a decorative accent ----------
   The SVG is a mask, so the fill comes from the modifier. Size it with width;
   aspect-ratio keeps the shape. Always aria-hidden. */
.scratch {
  position: absolute;
  display: block;
  aspect-ratio: 2.55;
  background: var(--tiger-gradient);
  -webkit-mask: url("../assets/brand/scratch-1.svg") center / contain no-repeat;
  mask: url("../assets/brand/scratch-1.svg") center / contain no-repeat;
  pointer-events: none;
}
.scratch-2 {
  aspect-ratio: 2.24;
  -webkit-mask-image: url("../assets/brand/scratch-2.svg");
  mask-image: url("../assets/brand/scratch-2.svg");
}
.scratch-faint { background: var(--scratch-faint); }
/* Divider: a small, level rake under a section heading, in flow rather than
   floating. The heading drops its bottom margin and the next element its top
   margin. The gap below is set a little smaller because a paragraph's first
   line carries its own half-leading; in ink it still reads a touch roomier
   below than above, which is where the eye wants the air. */
.scratch-divider {
  --divider-gap: var(--s-5);
  position: relative;
  width: 88px;
  aspect-ratio: 3.73;
  margin: var(--divider-gap) 0 calc(var(--divider-gap) - var(--s-2));
  -webkit-mask-image: url("../assets/brand/scratch-divider.svg");
  mask-image: url("../assets/brand/scratch-divider.svg");
}
:is(h1, h2, h3):has(+ .scratch-divider) { margin-bottom: 0; }
/* doubled class: outranks .section-head p and similar spacing rules */
.scratch-divider.scratch-divider + * { margin-top: 0; }
.scratch-ink { background: var(--tiger-ink); opacity: 0.2; }

/* ---------- Proof block: a measured result with its source ---------- */
.proof {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--surface-1);
  border-radius: var(--r-md);
}
.proof-value { font-family: var(--ff-display); font-weight: var(--fw-ultra); font-size: var(--text-2xl); color: var(--ink); letter-spacing: -0.03em; line-height: 1; }

/* ---------- Forms (Bootstrap, themed) ---------- */
.form-control,
.form-select {
  --bs-body-bg: var(--surface-0);
  min-height: 56px;
  font-size: var(--text-md);
  border-color: var(--line-2);
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-control:hover, .form-select:hover { border-color: var(--line-3); }
.form-control:focus, .form-select:focus {
  background-color: var(--surface-0);
  border-color: var(--tiger);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
  color: var(--ink);
}
.form-control::placeholder { color: var(--dim); }
textarea.form-control { min-height: 120px; }
.form-label { font-weight: var(--fw-semi); color: var(--ink); font-size: var(--text-md); }
.form-check-input:checked { background-color: var(--tiger); border-color: var(--tiger); }
.form-note {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
.form-success { text-align: center; padding: var(--s-7) var(--s-4); }
.form-success-icon { font-size: 3.5rem; color: var(--success); }
.form-success h3 { margin-top: var(--s-3); }

/* ---------- Modal ---------- */
.modal {
  --bs-modal-bg: var(--surface-1);
  --bs-modal-border-color: var(--line-2);
  --bs-modal-border-radius: var(--r-xl);
  --bs-modal-header-border-color: var(--line);
  --bs-modal-padding: var(--s-6);
  --bs-modal-header-padding: var(--s-6) var(--s-6) var(--s-4);
  --bs-backdrop-opacity: 0.72;
}
.modal-header { align-items: flex-start; }
.modal-header .eyebrow { margin-bottom: var(--s-2); }
.modal-title { font-size: var(--text-2xl); }
.modal-sub { margin: var(--s-2) 0 0; color: var(--muted); }
.request-modal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

/* ---------- Accordion (FAQ) ---------- */
.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: var(--s-5);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;
  --bs-accordion-body-padding-y: 0;
}
.accordion-item { border-left: 0; border-right: 0; }
.accordion-item:first-of-type { border-top: 0; }
.accordion-item:last-of-type { border-bottom: 0; }
.accordion-button {
  font-family: var(--ff-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
.accordion-button:focus-visible { outline: 2px solid var(--tiger); outline-offset: 2px; }
/* Bootstrap draws a hairline under an open question (an inset box-shadow),
   which doubled the divider between items. One rule per item only. */
.accordion-button:not(.collapsed) { box-shadow: none; }
.accordion-body { padding-bottom: var(--s-5); color: var(--ink-2); }
/* The chevron: Bootstrap draws it as a coloured image (near-black closed,
   blue open). Here it is a mask filled with the tiger colour both ways. */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-image: none;
  background-color: var(--tiger-2);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* ---------- Table ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink-2);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--surface-0);
  --bs-table-hover-bg: var(--surface-1);
  --bs-table-hover-color: var(--ink);
}
.table thead th {
  font-family: var(--ff-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--dim);
}
.table-num { font-family: var(--ff-mono); text-align: right; white-space: nowrap; }

/* ---------- Toast ---------- */
.toast-stack {
  position: fixed;
  right: max(var(--s-4), env(safe-area-inset-right));
  bottom: max(var(--s-4), env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: grid;
  gap: var(--s-2);
}
.toast {
  --bs-toast-bg: var(--surface-2);
  --bs-toast-border-color: var(--line-2);
  --bs-toast-color: var(--ink);
  --bs-toast-border-radius: var(--r-md);
}

/* ---------- Empty state ---------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-4);
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}
.empty-state .ph { font-size: 2.5rem; color: var(--dim); }

/* ---------- Meter: native <progress>, so widths never need inline style ---------- */
.meter {
  appearance: none;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.meter::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--r-pill); }
.meter::-webkit-progress-value { background: var(--tiger-gradient); border-radius: var(--r-pill); }
.meter::-moz-progress-bar { background: var(--tiger-gradient); border-radius: var(--r-pill); }
.meter.is-warn::-webkit-progress-value { background: var(--warn); }
.meter.is-warn::-moz-progress-bar { background: var(--warn); }
.meter.is-danger::-webkit-progress-value { background: var(--danger); }
.meter.is-danger::-moz-progress-bar { background: var(--danger); }

/* ---------- Long-form prose (articles, legal) ---------- */
.prose { max-width: 46rem; font-size: 1.25rem; line-height: 1.7; }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--s-8); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--s-7); }
.prose p, .prose ul, .prose ol { margin-bottom: 0; }
.prose li + li { margin-top: var(--s-2); }
.prose a { color: var(--tiger-2); text-underline-offset: 3px; }
.prose a:hover { color: var(--ink); }
.prose blockquote {
  margin-inline: 0;
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: var(--surface-1);
  font-family: var(--ff-display);
  font-size: var(--text-xl);
  color: var(--ink);
}
.prose pre, .prose code { font-family: var(--ff-mono); font-size: 0.9em; }
.prose pre { padding: var(--s-5); border-radius: var(--r-md); background: var(--surface-1); overflow-x: auto; }
/* Tables in a post body: banded rows, no rules. On phones each row becomes a
   card with the column name above each cell (data-label, added by
   tyger_table_labels()), because three columns at 343px wrap one word a line. */
.prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-md);
  line-height: 1.55;
}
.prose th, .prose td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; }
.prose thead th {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--dim);
}
.prose tbody tr:nth-child(odd) > * { background: var(--surface-1); }
.prose tbody tr > :first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--ink); font-weight: var(--fw-semi); }
.prose tbody tr > :last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
@media (max-width: 575.98px) {
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .prose table, .prose tbody, .prose tr, .prose td, .prose tbody th { display: block; }
  .prose tbody tr { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-1); }
  .prose tbody tr + tr { margin-top: var(--s-3); }
  .prose tbody tr > * { padding: 0; background: none !important; border-radius: 0 !important; }
  .prose tbody tr > :first-child { font-size: var(--text-lg); }
  .prose tbody tr > * + * { margin-top: var(--s-3); }
  .prose td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--dim);
  }
}
.prose figure img { border-radius: var(--r-md); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  --bs-breadcrumb-divider-color: var(--dim);
  --bs-breadcrumb-item-active-color: var(--muted);
  font-size: var(--text-sm);
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
/* Phones: a 44px tap target without moving the text (negative margin cancels the padding). */
@media (max-width: 767.98px) {
  .breadcrumb a { display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }
}
.breadcrumb a:hover { color: var(--tiger-2); }

/* ---------- Consent banner ---------- */
.consent {
  position: fixed;
  left: max(var(--s-3), env(safe-area-inset-left));
  right: max(var(--s-3), env(safe-area-inset-right));
  bottom: max(var(--s-3), env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  max-width: 760px;
  margin-inline: auto;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: var(--bg-glass-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 280px; color: var(--ink-2); }
.consent a { color: var(--tiger-2); }
.consent-actions { display: flex; gap: var(--s-2); }
.cta-band .eyebrow { color: var(--tiger-ink); }

/* ---------- Honeypot: off-screen for people, visible to bots ---------- */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Metadata runs (topic, date, read time): spaced items. No glyph,
   no divider rule: the gap is the separator. */
.meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) 0; }
.meta-line { gap: var(--s-1) var(--s-4); }

/* ---------- AI Blog Writer card (blog_promo_card(), _inc/post.php) ----------
   Beside the Resources and post heroes: the hero form's surface. */
.insights-promo,
.hero-card {
  position: relative;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--tiger-soft) 0%, transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow-lg), var(--shadow-tiger);
}
.insights-promo .eyebrow .ph { font-size: 1.25em; }
.insights-promo-title { margin: 0; font-size: var(--text-xl); line-height: 1.15; }
.insights-promo-list { display: grid; gap: var(--s-2); margin: var(--s-5) 0; padding: 0; list-style: none; color: var(--ink-2); }
.insights-promo-list li { display: flex; align-items: center; gap: var(--s-2); }
.insights-promo-list .ph-fill { color: var(--tiger-2); font-size: 1.15rem; }
.insights-promo-price { margin: 0 0 var(--s-4); color: var(--muted); }
.insights-promo-price strong { color: var(--ink); font-family: var(--ff-display); font-size: var(--text-xl); }
.insights-promo-scratch { top: -22px; right: -14px; width: clamp(150px, 14vw, 220px); z-index: 1; }

/* Case study hero: the project's lead screenshot beside the title */
.case-hero-shot { margin: 0; }
.case-hero-shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--shadow-tiger);
}
@media (min-width: 992px) {
  .page-hero .row > .col-lg-7 h1 { font-size: clamp(2.75rem, 1rem + 4vw, 5rem); }
}
.hero-card { position: relative; }

/* ---------- Quick request card beside a hero (hero_form_panel(), _inc/gravity.php) ---------- */
.hero-form-panel {
  position: relative;
  background:
    radial-gradient(120% 80% at 100% 0%, var(--tiger-soft) 0%, transparent 60%),
    var(--surface-2);
  box-shadow: var(--shadow-lg), var(--shadow-tiger);
}
.hero-form-title { margin: 0; font-size: var(--text-2xl); }
.hero-form-sub { margin: var(--s-2) 0 var(--s-5); color: var(--muted); font-size: var(--text-md); }
.hero-form-panel .form-control { min-height: 56px; }
.hero-form-panel textarea.form-control { min-height: 88px; }
.hero-form-panel .form-label { margin-bottom: var(--s-1); }
.hero-form-scratch { top: -22px; right: -14px; width: clamp(150px, 14vw, 220px); z-index: 1; }
@media (max-width: 575.98px) {
  .hero-form-scratch { right: -6px; width: 120px; }
}