/* Companion shares the site's palette, cards, and arcade typography. */
.companion-page .product-hero h1 { font-size: clamp(56px, 5.6vw, 86px); }
.companion-scene { min-height: 0; margin: 0; }
.companion-scene-body { position: relative; z-index: 1; padding: 32px; }
.companion-machine, .companion-mobile { display: flex; align-items: center; gap: 20px; }
.companion-machine img { flex: 0 0 auto; border-radius: 20px; }
.companion-scene-label { color: var(--muted); font: 600 10px/1.5 "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }
.companion-machine h2, .companion-mobile h3 { margin-top: 8px; color: var(--ink); font: 800 29px/1.1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.companion-machine p, .companion-mobile p { margin-top: 8px; color: var(--text); font: 12px/1.6 "Inter", sans-serif; }
.companion-scene-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; border: 1px solid var(--line-strong); background: var(--surface); }
.companion-scene-tabs span { padding: 14px 8px; text-align: center; color: var(--ink); font: 600 11px/1.4 "IBM Plex Mono", monospace; }
.companion-scene-tabs span + span { border-left: 1px solid var(--line-strong); }
.companion-connection { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 26px 0; color: var(--accent); font: 600 10px/1.5 "IBM Plex Mono", monospace; }
.companion-connection > span:first-child { font-size: 34px; line-height: 1; }
.companion-mobile { padding: 22px; border: 1px solid var(--line-strong); background: var(--surface); }
.companion-phone-icon { flex: 0 0 44px; color: var(--accent); }
.companion-phone-icon svg { display: block; width: 36px; height: 50px; }
.companion-scene-caption { position: relative; padding: 17px 24px; border-top: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); text-align: center; font: 11px/1.6 "IBM Plex Mono", monospace; }
.companion-teaser { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin-top: 28px; padding: 32px; }
.companion-teaser-head { display: flex; align-items: center; gap: 18px; }
.companion-teaser-head img { width: 64px; height: 64px; border-radius: 15px; flex: 0 0 auto; }
.companion-teaser .companion-teaser-head h3 { margin: 8px 0 0; font-size: 29px; }
.companion-teaser .eyebrow { font-size: 10px; line-height: 1.5; }
.companion-teaser p { max-width: 720px; }
.companion-teaser .hero-actions { margin-top: 0; flex-direction: column; align-items: stretch; }
.companion-teaser .hero-actions > a { text-align: center; }
.companion-teaser .card-meta { margin-top: 18px; }
.companion-choice { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 28px; padding: 24px 0; border-bottom: 1px solid var(--line-strong); color: var(--muted); font: 13px/1.7 "Inter", sans-serif; }
.companion-choice > p { max-width: 660px; }
.companion-choice > a { flex-shrink: 0; }
@media (max-width: 900px) {
  .companion-teaser { grid-template-columns: 1fr; gap: 24px; }
  .companion-teaser .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .companion-choice { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .companion-scene-body, .companion-teaser { padding: 24px; }
  .companion-machine, .companion-mobile { gap: 14px; }
  .companion-machine img { width: 64px; height: 64px; border-radius: 15px; }
  .companion-machine h2, .companion-mobile h3 { font-size: 25px; }
  .companion-scene-tabs span { font-size: 10px; }
  .companion-teaser .hero-actions { flex-direction: column; }
  .companion-page .product-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}