/* Store preview pages (/store/*.html, dev only). Uses the home.css tokens. */
.store:not(.store-buy) section { max-width: 640px; }
.store[data-store-page="account"] section { max-width: 880px; }

/* Buy page: details on the left two thirds, the purchase panel on the right third.
   The panel follows the scroll, like a product configurator. */
.store-head { margin-bottom: 32px; }
.store-head .intro { margin-bottom: 16px; }
.store-head .prose p { margin: 0; }
.store-buy-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); gap: 48px; align-items: start; }
/* The audio player docks at the bottom of the window; the panel stops above it (site.js sets --dock-height). */
.store-panel { position: sticky; top: 24px; display: grid; gap: 24px; max-height: calc(100vh - 48px - var(--dock-height, 0px)); overflow-y: auto; scrollbar-width: none; }
.store-panel section + section { margin-top: 0; }
.store-panel .store-cta { justify-items: stretch; }
.store-panel .store-primary { width: 100%; }
/* Total and Pay stay at the bottom of the panel while the options above scroll. */
.store-paybar { display: grid; gap: 12px; }
.store-panel .store-paybar { position: sticky; bottom: 0; padding-bottom: 8px; background: var(--canvas); }
.store-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.store-facts div { padding: 16px 20px; background: var(--row); border-radius: 12px; }
.store-facts dt { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.store-facts dd { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.store-listen { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--body); }
@media (max-width: 900px) {
  .store-buy-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .store-panel { position: static; order: -1; max-height: none; overflow: visible; }
  .store-panel .store-paybar { position: static; }
}
.store-narrow section { max-width: 480px; }
.store-demo { margin: 0 0 16px; padding: 8px 12px; border: 0.5px solid var(--hairline-strong); border-radius: 4px; color: var(--body); font-size: 12px; }

/* Packs. Each pack is one row; the chosen one gets an ink border. */
.store-plans { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.store-plan {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "radio hours total" "radio rate save";
  align-items: center;
  column-gap: 16px;
  row-gap: 2px;
  padding: 8px 16px;
  background: var(--row);
  border: 0.5px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.store-plan:hover { background: var(--row-hover); }
.store-plan:has(input:checked) { background: var(--surface); border-color: var(--ink); }
.store-plan input { grid-area: radio; margin: 0; accent-color: var(--ink); }
.store-plan-hours { grid-area: hours; font-size: 16px; font-weight: 500; }
.store-plan-rate { grid-area: rate; color: var(--muted); }
.store-plan-save { grid-area: save; justify-self: end; padding: 2px 8px; border-radius: 6px; background: #0c0a09; color: #fafaf9; font-size: 12px; font-weight: 600; }
.store-plan-save:empty { display: none; }
.store-plan-total { grid-area: total; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; min-width: 80px; }

/* Licensee form. */
.store-form { display: grid; gap: 12px; margin-top: 8px; }
.store-choice { display: flex; gap: 24px; }
/* The form hides fields by the hidden attribute; the display rules here would otherwise win. */
.store-form [hidden] { display: none; }
.store-choice label, .store-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.store-choice input, .store-check input { margin: 0; accent-color: var(--ink); }
.store-check { align-items: flex-start; }
.store-check input { margin-top: 3px; }
.store-check a { text-decoration: underline; text-underline-offset: 2px; }
.store-field { display: grid; gap: 4px; }
.store-field span { color: var(--body); font-size: 12px; }
.store-field input, .store-field select {
  height: 40px;
  padding: 0 12px;
  border: 0.5px solid var(--hairline-strong);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.store-field input:focus, .store-field select:focus { outline: none; border-color: var(--ink); }
.store-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 0.5px solid var(--hairline-strong); }
.store-total strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.store-error { margin: 0; color: #b42318; }
.store-cta { display: grid; gap: 8px; justify-items: start; }
.store-primary { width: auto; min-width: 200px; padding: 0 20px; border: 0; }
.store-primary:disabled { opacity: 0.6; cursor: default; }
.store-secondary { display: flex; flex-wrap: wrap; gap: 16px; }
.store-link { padding: 0; border: 0; background: none; color: var(--body); text-decoration: underline; text-underline-offset: 2px; }
.store-link:hover { color: var(--ink); }

/* Checkout summary and orders. */
.store-summary { display: grid; gap: 8px; margin: 0 0 16px; }
.store-summary div { display: flex; justify-content: space-between; gap: 16px; }
.store-summary dt { color: var(--muted); }
.store-summary dd { margin: 0; text-align: right; }
.store-orders { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.store-order { padding: 16px 20px; background: var(--row); border: 0.5px solid transparent; border-radius: 12px; }
.store-order.is-new { border-color: var(--ink); }
.store-order-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.store-order-head strong { font-size: 16px; font-weight: 500; }
.store-order-head .fine { margin: 0; }
.store-status { color: var(--body); }
/* Purchases page. A paid order is a black tile with the pack's volume in 3D (store-hero.js),
   and beside it the way to the data and the record of the order. Other orders are rows. */
.store-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; }
.store-top .label, .store-top .fine { margin: 0; }
.store-pack-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.store-pack-list + .store-orders { margin-top: 8px; }
.store-pack { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px; }
.store-pack-tile { display: flex; flex-direction: column; padding: 24px; border-radius: 12px; overflow: hidden; color: #d6d3d1; font-size: 14px;
  background: radial-gradient(ellipse 80% 45% at 50% 78%, rgba(87, 83, 78, 0.55), rgba(12, 10, 9, 0) 72%),
    linear-gradient(180deg, #0c0a09 0%, #0c0a09 35%, rgba(12, 10, 9, 0.6) 100%), url(/store-monogram-turn-e6.svg) 0 0 / 80px, #0c0a09; }
.store-pack-tile p { margin: 4px 0 0; }
.store-pack-tile .store-pack-hours { margin: 0 0 4px; color: #fafaf9; font-family: var(--serif); font-size: 36px; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.store-pack-stage { flex: 1; min-height: 200px; margin: 0 -24px -24px; cursor: grab; touch-action: pan-y; }
.store-pack-stage.is-dragging { cursor: grabbing; }
.store-pack-stage canvas { display: block; width: 100%; height: 100%; }
.store-pack-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: start; align-content: start; padding: 24px; border: 0.5px solid var(--hairline-strong); border-radius: 12px; background: var(--surface); }
.store-pack-body .fine { margin: 0; }
/* Only the newest pack gets the filled button; on the white panel the others need an outline to read as buttons. */
.store-pack-body .action-hf { border: 0.5px solid var(--hairline-strong); }
.store-pack-access { margin: 0; color: var(--body); }
.store-pack-access strong { color: var(--ink); font-weight: 600; }
.store-cmd { justify-self: stretch; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border: 0.5px solid var(--hairline-strong); border-radius: 8px; }
.store-cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--ink); scrollbar-width: none; }
.store-cmd code::-webkit-scrollbar { display: none; }
.store-copy { flex: none; height: 28px; padding: 0 10px; border: 0.5px solid var(--hairline-strong); border-radius: 4px; background: var(--canvas); color: var(--ink); font: 500 12px var(--sans); cursor: pointer; }
.store-record { justify-self: stretch; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; padding-top: 16px; border-top: 0.5px solid var(--hairline-strong); font-size: 14px; }
.store-record dt { color: var(--muted); }
.store-record dd { margin: 0; overflow-wrap: anywhere; }
.store-record a { text-decoration: underline; text-underline-offset: 2px; }
.store-after { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; }
.store-after > a { color: var(--ink); }
@media (max-width: 720px) {
  .store-pack { grid-template-columns: minmax(0, 1fr); }
  .store-pack-stage { min-height: 180px; }
}

/* Comparison table and field lists. */
.store-table { overflow-x: auto; border: 0.5px solid var(--hairline-strong); border-radius: 12px; background: var(--surface); }
.store-table table { width: 100%; border-collapse: collapse; }
.store-table th, .store-table td { padding: 12px; border-bottom: 0.5px solid var(--rule); text-align: left; vertical-align: top; }
.store-table tbody tr:last-child th, .store-table tbody tr:last-child td { border-bottom: 0; }
.store-table thead th { color: var(--muted); font-size: 12px; font-weight: 500; }
.store-table thead a { text-decoration: underline; text-underline-offset: 2px; }
.store-table tbody th { color: var(--muted); font-weight: 400; white-space: nowrap; }
.store-table tbody th:has(a), .store-table-self th { white-space: normal; min-width: 140px; }
.store-pending { color: var(--muted); font-style: italic; }
.store-table .store-table-self th, .store-table .store-table-self td { background: var(--row); color: var(--ink); font-weight: 500; }
.store-table tbody th a { text-decoration: underline; text-underline-offset: 2px; }
.store-pending-note { font-style: italic; }
.store-fields { display: grid; gap: 12px; margin: 8px 0 0; }
.store-fields dt { font-weight: 500; }
.store-fields dd { margin: 2px 0 0; color: var(--body); }

@media (max-width: 520px) {
  .store-plan { padding: 8px 16px; }
  .store-table th, .store-table td { padding: 10px; }
}
.store-signed-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.store-signed-in a, .store-signed-in .store-link { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; }

/* Topics and speakers. Bars are scaled to the largest value in each list.
   Colors passed the dataviz palette check on #f0efed: blue, amber, teal.
   "Not given" is a hatched neutral so unknowns never read as a category. */
.store-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.store-stat { padding: 16px 20px; background: var(--row); border-radius: 12px; }
.store-stat-wide { grid-column: 1 / -1; margin-top: 16px; }
.store-stats .store-stat-wide { margin-top: 0; }
.store-stat h3, .store-subhead { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.store-subhead { margin-top: 24px; }
.store-stat .fine { margin: 0 0 8px; }
.tone-blue { background: #3d7cb8; }
.tone-amber { background: #c07a2c; }
.tone-teal { background: #2e9a7b; }
.is-unknown { background: repeating-linear-gradient(135deg, #a8a29e 0 2px, #e7e5e4 2px 5px); }
.store-bars { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.store-bars li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 8px; font-size: 12px; }
.store-bar-name { color: var(--body); }
.store-bar-track { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; }
.store-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.store-bar-value { min-width: 64px; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.store-bar-pct { color: var(--muted); }
/* Gender: one bar split into shares, 2px gaps between segments. */
.store-split { display: flex; height: 16px; margin-top: 12px; border-radius: 4px; overflow: hidden; gap: 2px; }
.store-split span { display: block; height: 100%; }
.store-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 12px; color: var(--body); }
.store-legend li { display: flex; align-items: center; gap: 8px; }
.store-key { width: 10px; height: 10px; border-radius: 2px; flex: none; }
/* Session length: columns per five minutes with a median line. */
.store-hist { position: relative; margin-top: 28px; }
.store-hist-plot { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-bottom: 18px; border-bottom: 0.5px solid var(--hairline-strong); }
.store-hist-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.store-hist-bar { display: block; width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; }
.store-hist-label { position: absolute; left: 0; bottom: -18px; font-size: 12px; color: var(--muted); }
.store-hist-axis { position: absolute; right: 0; bottom: -18px; font-size: 12px; color: var(--muted); }
.store-hist-median { position: absolute; top: 0; bottom: 18px; border-left: 1px dashed var(--ink); }
.store-hist-median span { position: absolute; bottom: 100%; left: 0; transform: translate(-50%, -4px); white-space: nowrap; font-size: 12px; color: var(--ink); }
.store-topics { margin: 8px 0 0; padding: 0 0 0 16px; columns: 2; column-gap: 32px; color: var(--body); }
.store-topics li { break-inside: avoid; padding: 3px 0; }
/* Example JSON. */
.store-code { margin: 8px 0 0; padding: 16px; max-height: 360px; overflow: auto; border: 0.5px solid var(--hairline-strong); border-radius: 12px; background: var(--surface); color: var(--body); font-family: var(--mono); font-size: 12px; line-height: 1.6; }
@media (max-width: 900px) { .store-stats { grid-template-columns: minmax(0, 1fr); } .store-topics { columns: 1; } }
.store-more { margin-top: 8px; }
.store-more summary { cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.store-more[open] summary { margin-bottom: 4px; }

/* Consent, access steps, and permitted uses. */
.store-points { margin: 8px 0 0; padding-left: 18px; color: var(--body); display: grid; gap: 6px; }
.store-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.store-steps li { padding: 16px 20px; background: var(--row); border-radius: 12px; display: grid; gap: 4px; color: var(--body); }
.store-steps strong { color: var(--ink); font-weight: 600; }
.store-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.store-uses > div { padding: 16px 20px; border: 0.5px solid var(--hairline-strong); border-radius: 12px; }
.store-uses h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.store-uses ul { margin: 0; padding-left: 18px; color: var(--body); display: grid; gap: 4px; }
@media (max-width: 900px) { .store-steps, .store-uses { grid-template-columns: minmax(0, 1fr); } }

/* Specifications and use cases. */
.store-spec th { width: 40%; }
.store-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.store-cards li { padding: 16px 20px; background: var(--row); border-radius: 12px; display: grid; gap: 4px; align-content: start; color: var(--body); }
.store-cards strong { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .store-cards { grid-template-columns: minmax(0, 1fr); } }

/* Contact row for questions about the data. Secondary style: Pay stays the one primary action. */
.store-ask { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 0.5px solid var(--hairline-strong); border-radius: 12px; }
.store-ask .note { margin: 0; }
.store-ask-button { width: auto; padding: 0 20px; background: var(--surface); color: var(--ink); border: 0.5px solid var(--hairline-strong); }
.store-ask-button:hover { opacity: 1; background: var(--row); }
@media (max-width: 520px) { .store-ask { flex-direction: column; align-items: stretch; } .store-ask-button { width: 100%; } }

/* Audio metric tiles: one number, one line of context. */
.store-metric { padding: 16px 20px; background: var(--row); border-radius: 12px; }
.store-metric h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.store-metric strong { display: block; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.store-metric .fine { margin: 4px 0 0; }

/* Price comparison: oto in blue, others neutral. A lighter segment marks a price range. */
.tone-neutral { background: #a8a29e; }
.store-bar-stack { display: flex; }
.store-bar-stack .store-bar-fill { border-radius: 0; }
.store-bar-stack .store-bar-fill:last-child { border-radius: 0 4px 4px 0; }
.is-range { opacity: 0.45; }
.store-bars-wide li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) auto; }
.store-bars li.is-self .store-bar-name, .store-bars li.is-self .store-bar-value { color: var(--ink); font-weight: 600; }
.store-bars-wide .store-bar-value { min-width: 88px; }

/* Comparison: oto's row stands out, weaker values in other rows step back. */
.store-compare .store-table-self th, .store-compare .store-table-self td { font-weight: 600; }
.store-compare .is-weak { color: var(--muted); }
.store-compare td { white-space: normal; }
.store-check-mark { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: #2e9a7b; stroke-width: 2; }
.store-stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .store-stats-3 { grid-template-columns: minmax(0, 1fr); } }
.store-field small { color: var(--body); font-size: 12px; line-height: 1.5; }
.store-perk { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; margin-top: 12px; padding: 12px; border: 0.5px solid #d6d3d1; border-radius: 8px; font-size: 14px; }
.store-perk span { color: var(--body); }
/* Icons: 24-grid line icons, the same drawing style as the Buy button's cart. */
.store-icon { display: block; flex: none; width: 20px; height: 20px; color: var(--ink); }
.store-facts dt .store-icon, .store-cards .store-icon, .store-metric .store-icon, .store-steps .store-icon { margin-bottom: 8px; }
.store-fields dt, .store-stat h3 { display: flex; align-items: center; gap: 8px; }
.store-fields dt .store-icon, .store-stat h3 .store-icon { width: 16px; height: 16px; color: var(--muted); }
.store-perk .store-icon { grid-row: span 2; }
.store-ask > .store-icon { width: 24px; height: 24px; }
.store-ask > div { flex: 1; }
.store-points, .store-uses ul { list-style: none; padding-left: 0; }
.store-points li, .store-uses li { display: flex; gap: 10px; align-items: flex-start; }
.store-points .store-icon, .store-uses .store-icon { width: 16px; height: 16px; margin-top: 3px; color: var(--muted); }
.store-uses div:first-child .store-icon { color: #2e9a7b; stroke-width: 2; }
@media (max-width: 520px) { .store-ask > .store-icon { display: none; } }
.store-primary { gap: 8px; }
.store-button-icon { flex: none; }
/* otoSpeech's own row and the buyers' group: the E6 Turn monogram (as on the
   dataset table's Buy row) under a dark gradient that keeps the text side solid. */
.store-table .store-table-self, .store-perk {
  --ink: #fafaf9; --body: #d6d3d1; --muted: #a8a29e;
  background: linear-gradient(90deg, #0c0a09 0%, #0c0a09 30%, rgba(12, 10, 9, 0.55) 70%, rgba(12, 10, 9, 0) 100%),
    url(/store-monogram-turn-e6.svg) 0 0 / 80px, #0c0a09;
  color: var(--ink);
}
.store-table .store-table-self th, .store-table .store-table-self td { background: transparent; color: var(--ink); font-weight: 600; border-bottom-color: transparent; }
.store-table-self .store-check-mark { color: #0bd8b6; }
.store-perk { border-color: transparent; }
.store-perk .store-icon { color: var(--ink); }
.store-vs td:last-child { min-width: 180px; }
/* Keep otoSpeech's row on one line; the dataset names in other rows wrap instead. */
.store-compare .store-table-self th, .store-compare .store-table-self td { white-space: nowrap; }
.store-compare:not(.store-vs) tbody th { white-space: nowrap; min-width: 0; }
.store-google { display: flex; justify-content: center; min-height: 44px; }
/* Draft legal pages. */
.store-legal-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
.store-legal-nav a { color: var(--body); text-decoration: underline; text-underline-offset: 2px; }
.store-legal-body { margin-top: 24px; }
.store-legal-body h2 { margin: 24px 0 8px; color: var(--ink); font-size: 16px; font-weight: 600; }
.store-legal-body li { margin-bottom: 4px; }
.store-legal-body .store-table { color: var(--ink); font-size: 14px; }
.store-fine-links a, .store-uses + .fine a { text-decoration: underline; text-underline-offset: 2px; }
/* Read next: the guides and pages a buyer reads around this one. */
.store-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.store-next a { text-decoration: underline; text-underline-offset: 2px; }
/* What is in each pack: the row of the selected pack is marked. Nine columns, so the cells sit
   closer together than in the other tables; the outer edges keep the usual 12px. */
.store-packs td, .store-packs th { padding-left: 6px; padding-right: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.store-packs tr > :first-child { padding-left: 12px; }
.store-packs tr > :last-child { padding-right: 12px; }
.store-packs thead th { white-space: normal; }
.store-packs tbody th { color: var(--ink); }
.store-packs tr.is-selected th, .store-packs tr.is-selected td { background: var(--row); color: var(--ink); font-weight: 600; }
/* Form: labels outside the control, errors in place, country search, help toggle. */
.store-field > label { color: var(--body); font-size: 12px; }
.store-field.is-invalid input, .store-field.is-invalid select { border-color: #b42318; }
.store-field-error { color: #b42318; }
.store-field small.store-field-error { color: #b42318; }
.store-field small.store-field-ok { color: #18654f; }
.store-check { flex-wrap: wrap; }
.store-check > span { flex: 1; min-width: 0; }
.store-check .store-field-error { flex-basis: 100%; font-size: 12px; }
.store-combo { position: relative; }
.store-combo-list { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; max-height: 240px; margin: 4px 0 0; padding: 4px; overflow-y: auto; list-style: none; background: var(--surface); border: 0.5px solid var(--hairline-strong); border-radius: 8px; }
.store-combo-list li { padding: 8px 10px; border-radius: 4px; cursor: pointer; }
.store-combo-list li[aria-selected="true"], .store-combo-list li:hover { background: var(--row); }
.store-combo-list .store-combo-empty { color: var(--muted); cursor: default; }
.store-combo-list .store-combo-empty:hover { background: none; }
.store-help { font-size: 12px; color: var(--body); }
.store-help summary { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.store-help ol { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; }
.store-help p { margin: 0; }
.store-help a { text-decoration: underline; text-underline-offset: 2px; }
/* otoSpeech's price in the comparison table: the lowest rate leads, its pack follows quietly. */
.store-price-lead { font-size: 16px; font-weight: 600; }
.store-table .store-table-self .store-price-note { font-weight: 400; color: #a8a29e; }
/* The three claims at the top of the buy page: one black panel, the word on the left and its
   numbers on the right. The monogram shows through the middle, so both sides sit on solid black. */
.store-claims { padding: 8px 24px; border-radius: 12px; color: #fafaf9;
  background: linear-gradient(90deg, #0c0a09 0%, #0c0a09 22%, rgba(12, 10, 9, 0.4) 40%, rgba(12, 10, 9, 0.4) 48%, #0c0a09 70%, #0c0a09 100%),
    url(/store-monogram-turn-e6.svg) 0 0 / 80px, #0c0a09; }
.store-claim { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; }
.store-claim + .store-claim { border-top: 0.5px solid #44403c; }
.store-claim-word, .store-claim-stats strong { font-family: var(--serif); font-size: 36px; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.store-claim-facts { display: grid; gap: 4px; justify-items: end; text-align: right; }
.store-claim-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 24px; margin: 0; font-size: 14px; color: #d6d3d1; }
.store-claim-stats strong { margin: 0 2px; color: #fafaf9; font-variant-numeric: tabular-nums; }
.store-claim-line { margin: 0; font-size: 12px; color: #a8a29e; }
@media (max-width: 560px) {
  .store-claim { flex-direction: column; align-items: flex-start; gap: 8px; }
  .store-claim-facts { justify-items: start; text-align: left; }
  .store-claim-stats { justify-content: flex-start; }
}
/* Home page hero for otoSpeech 1,125h (only where the store is on). */
.home-hero { display: grid; justify-items: center; gap: 8px; margin: 0 0 72px; padding-top: 24px; text-align: center; }
.home-hero-name { margin: 0; font-size: 14px; font-weight: 600; }
.home-hero-statement { margin: 0; font-family: var(--serif); font-size: clamp(36px, 5.2vw, 56px); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; }
.home-hero-stage { width: 100%; max-width: 760px; aspect-ratio: 2 / 1; margin: 8px 0; cursor: grab; touch-action: pan-y; }
.home-hero-stage.is-dragging { cursor: grabbing; }
.home-hero-stage canvas { display: block; width: 100%; height: 100%; }
.home-hero-sub { margin: 0; max-width: 56ch; font-size: 16px; color: var(--body); }
.home-hero .action { width: auto; margin-top: 12px; padding: 0 24px; }
.home-hero-price { margin: 4px 0 0; font-size: 14px; color: var(--body); }