/* Hallmark · product demonstration · existing Open Roof identity.
 * Pre-emit critique: P4 H5 E4 S5 R5 V4. */
.claim-story {
  --story-ink: var(--home-ink, #10221c);
  --story-muted: var(--home-muted, #52645d);
  --story-green: var(--home-green, #0a4d3c);
  --story-paper: var(--home-white, #ffffff);
  --story-line: var(--home-line, #dce5e0);
  --story-highlight: var(--home-caution-paper, #fbf4e6);
  --story-backdrop: #f1f5f7;
  --story-caution: var(--home-caution, #725021);
  --story-shadow: var(--home-document-shadow, 0 8px 24px rgba(16, 34, 28, 0.08));
  width: 100%;
  max-width: 640px;
  margin: 20px auto 0;
  color: var(--story-ink);
  text-align: left;
  font-family: inherit;
  letter-spacing: 0;
}
.claim-story *, .claim-story *::before, .claim-story *::after { box-sizing: border-box; }
.claim-story__controls { display: flex; align-items: center; gap: 12px; border-block: 1px solid var(--story-line); }
.claim-story__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1; min-width: 0; }
.claim-story__tabs button { position: relative; min-height: 44px; padding: 8px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--story-muted); font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.claim-story__tabs button[aria-selected="true"] { color: var(--story-green); border-bottom-color: var(--story-green); }
.claim-story__play { display: flex; align-items: center; gap: 5px; min-height: 44px; padding-right: 4px; color: var(--story-muted); font-size: 12px; cursor: pointer; }
.claim-story__play input { accent-color: var(--story-green); width: 15px; height: 15px; margin: 0; }
.claim-story :is(button, a, input, [role="tabpanel"]):focus-visible { outline: 2px solid var(--story-green); outline-offset: 3px; }
.claim-story__scene { display: grid; border-bottom: 1px solid var(--story-line); background: var(--story-backdrop); }
.claim-story__panel { grid-area: 1 / 1; display: grid; align-items: center; min-width: 0; min-height: 172px; padding: 18px 20px; }
.claim-story__panel:not([data-active]) { visibility: hidden; pointer-events: none; }
.claim-story__panel[data-active] > div { animation: claim-story-reveal 360ms ease-out both; }
.claim-story__bill { width: 100%; max-width: 480px; margin-inline: auto; padding: 12px 18px; background: var(--story-paper); border: 1px solid var(--story-line); border-radius: 4px; box-shadow: var(--story-shadow); }
.claim-story p { margin: 0; text-align: left; line-height: 1.45; }
.claim-story .claim-story__eyebrow { margin-bottom: 10px; color: var(--story-muted); font-size: 11px; font-weight: 700; }
.claim-story__amount { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--story-line); padding-bottom: 8px; }
.claim-story__amount > span { font-size: 17px; font-weight: 600; }
.claim-story__amount > strong { font-size: 32px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.claim-story__amount small { font-size: 15px; font-weight: 500; }
.claim-story .claim-story__source { margin-top: 8px; color: var(--story-muted); font-size: 13px; }
.claim-story .claim-story__explanation { margin-top: 10px; font-size: 13px; color: var(--story-ink); }
.claim-story .claim-story__finding { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.claim-story__marker { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; background: var(--story-highlight); color: var(--story-caution); border-radius: 50%; font-size: 18px; font-weight: 700; }
.claim-story__review .claim-story__source { display: inline-block; color: var(--story-caution); background: var(--story-highlight); padding: 3px 6px; }
.claim-story .claim-story__limit { margin-top: 8px; color: var(--story-muted); font-size: 11px; }
.claim-story__reply { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 24px; }
.claim-story__reply blockquote { margin: 0; padding: 0; border: 0; background: transparent; font-size: 14px; line-height: 1.55; font-style: normal; color: var(--story-ink); }
.claim-story__reply a { display: block; line-height: 0; }
.claim-story__reply img { display: block; width: 100%; height: auto; aspect-ratio: 595 / 842; object-fit: contain; border: 1px solid var(--story-line); box-shadow: var(--story-shadow); transform: rotate(3deg); }
.claim-story .claim-story__caption { margin-top: 7px; color: var(--story-muted); font-size: 11px; text-align: center; }
@keyframes claim-story-reveal { from { transform: translateY(7px); } to { transform: translateY(0); } }
@media (hover: hover) { .claim-story__tabs button:hover { background: var(--story-paper); color: var(--story-green); } }
.claim-story__tabs button:active { background: var(--story-highlight); }
@media (max-width: 600px) {
  .claim-story { margin-top: 14px; }
  .claim-story__controls { gap: 4px; }
  .claim-story__tabs button { font-size: 12px; padding-inline: 2px; }
  .claim-story__play { font-size: 11px; }
  .claim-story__panel { padding: 12px; min-height: 184px; }
  .claim-story__bill { padding: 10px 12px; }
  .claim-story__reply { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .claim-story__reply > a { display: none; }
  .claim-story__reply blockquote { font-size: 13px; line-height: 1.5; }
  .claim-story .claim-story__finding { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .claim-story__panel[data-active] > div { animation: none; } }