/* ============================================================================
   polish.css, site-wide polish layer. Loaded after styles.css / site-components.css.
   1. Spacing scale (tighter, smaller on mobile)
   2. Product-card pattern: image on top, title below, short description, then metadata
   3. Skimmable blocks: accordions, collapsed long copy, bullet tiles
   Selectors are prefixed with `body` so they win over page-level <style> blocks.
   ============================================================================ */

/* ── 1 · SPACING SCALE ───────────────────────────────────────────────────── */
:root {
  --section-y: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);   /* was 3.5rem .. 6.5rem */
  --gutter: clamp(1rem, 0.5rem + 2.6vw, 2.5rem);
}
body .section-sm, body .section-tight { padding-block: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); }
body .section-head { margin-bottom: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
body .section-head p { margin-top: .625rem; }
body .section-head .eyebrow { margin-bottom: .5rem; }

/* heroes: content should not float in empty navy */
body .hero-grid { padding-block: clamp(1.75rem, 1.25rem + 3vw, 3.5rem); gap: clamp(1.5rem, 1rem + 3vw, 3rem); }
body .hero { padding-bottom: 0; }
body .hero-visual { height: clamp(240px, 180px + 18vw, 380px); }
body .hero-cta { margin-top: 1.25rem; gap: .75rem; }
body .hero-lead { margin-top: .875rem; }
body .crumbs { margin-bottom: .875rem; }
body .hero h1 { margin-top: .5rem !important; }
@media (max-width: 860px) {
  body .hero-visual { height: 220px; }
  body .hero-grid { gap: 1.25rem; padding-block: 1.25rem 1.75rem; }
}

body .prose > p { margin-top: .75rem; }
body .prose ul { margin-top: .75rem; gap: .5rem; }
body .price-note { margin-top: .625rem; }
body .final-cta.section { padding-block: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
body .final-cta .btns { margin-top: 1.25rem; }
body .reason { padding-block: .75rem; }
body .step { padding: 1.25rem 1.125rem; }
body .price-table td, body .price-table thead th { padding: .75rem 1rem; }

/* ── 2 · PRODUCT CARD: image top, title below, description, metadata ──────── */

/* 2a. category / use-case tiles (.cat). Was: title overlaid on the photo. */
body .cat, body .uc {
  display: flex; flex-direction: column; aspect-ratio: auto;
  background: var(--c-white); border: 1px solid var(--c-neutral-200); border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(15,20,36,.04);
}
body .cat .tile-image, body .uc .tile-image { position: relative; inset: auto; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-neutral); flex: none; }
body .cat .tile-overlay, body .uc .tile-overlay {
  position: static; background: none; padding: .875rem 1rem 1rem; flex: 1;
  display: grid; grid-template-columns: 1fr auto; align-items: start; column-gap: .75rem; row-gap: .25rem;
}
body .cat .tile-label, body .uc .tile-label { color: var(--c-navy); text-shadow: none; font-size: 1.0625rem; line-height: 1.25; }
body .cat .tile-arrow, body .uc .tile-arrow { color: var(--c-teal-deep); text-shadow: none; font-size: 1.125rem; }
body .cat .tile-desc, body .uc .tile-desc {
  grid-column: 1 / -1; margin: 0; font-size: .875rem; line-height: 1.5; color: var(--c-text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body .cat:hover, body .uc:hover { transform: translateY(-3px); }

/* 2b. article cards (.post-card on /blog and /news, .post on home). Title leaves the image. */
body .post-card .pc-media, body .post .post-media {
  display: flex; flex-direction: column; position: relative; overflow: visible;
  aspect-ratio: auto; min-height: 0 !important; background: none !important; border-radius: 0;
}
body .post-card .pc-media::after, body .post .post-media::after { display: none; }
body .post-card .pc-media::before, body .post .post-media::before {   /* placeholder if the photo is missing */
  content: ""; position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 16 / 10; z-index: 0;
  background: linear-gradient(135deg, var(--c-navy-deep, #0f172a), var(--c-teal-deep, #0f766e));
}
body .post-card .pc-media img, body .post .post-media img {
  position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 20%;
  display: block; border-radius: var(--r-md, 12px);
}
body .post-card .pc-media img { border-radius: 0; }
body .post-card .pc-media h3, body .post .post-media h3, body .post .post-title {
  position: static !important; z-index: auto; margin: 0; padding: .75rem 1rem 0 !important;
  color: var(--c-navy) !important; text-shadow: none !important; font-size: 1.0625rem; line-height: 1.3; font-weight: 700;
  font-family: var(--font-serif);
}
body .post .post-media h3, body .post .post-title { padding-inline: 0 !important; }
body .post-card .pc-media .badge, body .post-card .pc-media .news-cat,
body .post .post-media .badge, body .post .post-media .news-cat { position: absolute; top: .625rem; left: .625rem; z-index: 2; }
body .post-card .pc-body { padding: .375rem 1rem 1rem; gap: .375rem; }
body .post-card p, body .post p {
  font-size: .9rem; line-height: 1.5; margin: 0 0 auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body .post-card .byline-sm, body .post-card .meta-sm, body .post .date { margin-top: .25rem; font-size: .78rem; color: var(--c-text-muted); }

/* 2c. company / robot cards: tighter media, 2-line description */
body .co-media { height: auto; aspect-ratio: 16 / 10; }
body .co-body { padding: .875rem 1rem 1rem; }
body .co-tags { margin-top: .5rem; }
body .co-foot { padding-top: .625rem; }

/* 2d. related cards */
body .rel-card { padding: 1.125rem; gap: .25rem; }
body .rel-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 3 · SKIMMABLE BLOCKS ───────────────────────────────────────────────── */

/* bullets become a scannable tile grid: bold label first, one short line under it */
body .prose ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .625rem; }
body .prose ul li {
  padding: .75rem .875rem .75rem 2.25rem; background: var(--c-white); border: 1px solid var(--c-neutral-200);
  border-radius: var(--r-md, 12px); font-size: .9rem; line-height: 1.5;
}
body .prose ul li::before { left: .875rem; top: 1.05rem; width: 7px; height: 7px; }
body .prose ul li strong { display: block; font-size: .95rem; margin-bottom: .125rem; }

/* "Read more": long supporting copy collapses but stays in the DOM for crawlers */
body details.more { margin-top: .75rem; max-width: 780px; }
body details.more > summary {
  display: inline-flex; align-items: center; gap: .375rem; cursor: pointer; list-style: none;
  font-weight: 700; font-size: .9rem; color: var(--c-teal-deep); padding: .375rem 0; min-height: 44px;
}
body details.more > summary::-webkit-details-marker { display: none; }
body details.more > summary::after { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -3px; transition: transform .2s; }
body details.more[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
body details.more > p { font-size: 1rem; line-height: 1.65; margin-top: .625rem; }

/* FAQs as accordions */
body .faq { max-width: 820px; }
body details.faq-item { padding: 0; border-bottom: 1px solid var(--c-neutral-200); }
body details.faq-item:first-child { border-top: 1px solid var(--c-neutral-200); }
body details.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none;
  padding: .875rem 0; min-height: 48px;
}
body details.faq-item > summary::-webkit-details-marker { display: none; }
body details.faq-item > summary h3 { font-size: 1rem; line-height: 1.35; margin: 0; }
body details.faq-item > summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid var(--c-teal-deep); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
body details.faq-item[open] > summary::after { transform: rotate(-135deg); }
body details.faq-item > p { margin: 0 0 .875rem; font-size: .95rem; line-height: 1.6; color: var(--c-text-muted); }

/* hero lead stays short */
body .hero-lead { font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.55; max-width: 34rem; }

/* video cards: title lives inside the card, never in the white section below */
body .video-card { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #0f1424; }
body .video-card iframe, body .video-card img { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
body .video-card .vc-title {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.5rem 1rem .75rem; color: #fff; font-weight: 600; font-size: .95rem;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent); pointer-events: none;
}

/* bullet tiles need room: let a list-bearing prose block use the full container width */
body .prose:has(> ul) { max-width: none; }
body .prose:has(> ul) > h2 { max-width: 780px; }
@media (min-width: 900px) { body .prose:has(> ul) > ul { grid-template-columns: repeat(3, 1fr); } }

/* ── MOBILE: tighter, stacked, no sideways swiping on the price tables ───── */
@media (max-width: 640px) {
  body .t-lead { font-size: 1rem; line-height: 1.5; }
  body .section-head { margin-bottom: 1rem; }
  body h2.t-h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 1.9rem); }
  body .prose ul li { padding: .625rem .75rem; }
  body .prose ul li::before { display: none; }
  body .rel-card { padding: .875rem; }
  body .rel-card .rc-ic { width: 36px; height: 36px; margin-bottom: .25rem; }
  body .final-cta p { font-size: .95rem; }

}

/* Phones: card grids become swipeable rows (one row of cards instead of a tall stack).
   Page-level scrolling stays vertical only; the row scrolls inside itself. Index lists (/blog, /news) stay stacked. */
@media (max-width: 640px) {
  body .cat-grid, body .uc-grid, body .rail, body .rel-grid, body.home-page .post-grid, body .av-grid {
    scroll-padding-inline: var(--gutter);
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .75rem; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: .25rem var(--gutter) .75rem; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body .cat-grid::-webkit-scrollbar, body .uc-grid::-webkit-scrollbar, body .rail::-webkit-scrollbar,
  body .rel-grid::-webkit-scrollbar, body.home-page .post-grid::-webkit-scrollbar, body .av-grid::-webkit-scrollbar { display: none; }
  body .cat-grid > *, body .uc-grid > *, body .rail > *, body .rel-grid > *, body.home-page .post-grid > *, body .av-grid > * {
    flex: 0 0 76%; max-width: 20rem; scroll-snap-align: start;
  }
  body .rail > .rail-error { flex-basis: 100%; max-width: none; }
}
@media (max-width: 640px) { body .av-grid { max-width: none; width: auto; } }