/* Product-only sections; shared landing styles stay in landing.css. */
.features { display: grid; grid-template-columns: .88fr 1.12fr; gap: 73px; align-items: center; }
.feature-copy .eyebrow { color: #666d75; font-size: 9px; margin-bottom: 18px; }
.feature-copy h2 { margin-bottom: 18px; }
.feature-copy .section-description { max-width: 347px; font-size: 14px; }
.feature-tabs { margin-top: 27px; }
.feature-tab { width: 100%; display: grid; grid-template-columns: 22px 1fr 20px; text-align: left; gap: 12px; align-items: start; border-bottom: 1px solid var(--line); padding: 17px 1px; }
.feature-dot { width: 6px; height: 6px; margin: 7px auto 0; border-radius: 50%; background: var(--cyan); }
.feature-tab strong { display: block; font-size: 13px; font-weight: 500; color: #16181b; line-height: 1.6; transition: color .2s; }
.feature-tab-description { display: none; padding: 8px 0 1px; color: #616971; font-size: 12px; line-height: 1.8; font-weight: 400; max-width: 310px; }
.feature-tab-arrow { opacity: 0; padding-top: 3px; color: var(--cyan); }
.feature-tab-arrow .icon { width: 15px; height: 15px; }
.feature-tab:hover strong { color: var(--ink); }
.feature-tab.active { border-bottom-color: var(--cyan); }
.feature-tab.active .feature-tab-description { display: block; animation: tab-appear .4s var(--ease); }
.feature-tab.active .feature-tab-arrow, .feature-tab:hover .feature-tab-arrow { opacity: 1; }
@keyframes tab-appear { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (max-width:1100px) {
  .features { gap: 43px; }
}
@media (max-width:900px) {
  .features { gap: 28px; grid-template-columns: 1fr 1fr; }
  .feature-copy h2 { font-size: 28px; }
  .feature-copy .section-description { font-size: 12px; }
  .feature-tab { gap: 7px; grid-template-columns: 19px 1fr 15px; }
  .feature-tab strong { font-size: 12px; }
  .feature-tab-description { font-size: 10px; }
}
@media (max-width:680px) {
  .features { display: flex; flex-direction: column; gap: 35px; align-items: stretch; }
  .feature-copy h2 { font-size: clamp(23px,6.8vw,30px); }
  .feature-copy .eyebrow { font-size: 8px; margin-bottom: 15px; }
  .feature-copy .section-description { max-width: 420px; font-size: 12px; }
  .feature-tabs { margin-top: 19px; }
  .feature-tab { padding-block: 16px; gap: 12px; grid-template-columns: 22px 1fr 20px; }
  .feature-tab strong { font-size: 12px; }
  .feature-tab-description { font-size: 12px; max-width: none; }
}

.motion-paused .feature-panel, .motion-paused .feature-tab-description { animation: none !important; }
/* Plain-language product details, alongside the shared feature tabs. */
.feature-stage { width: 100%; max-width: 540px; margin-inline: auto; min-width: 0; }
.feature-panel { width: 100%; }
.feature-panel:not([hidden]) { animation: tab-appear .4s var(--ease); }
.feature-detail { padding-left: 32px; border-left: 1px solid var(--line); }
.feature-detail-label { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: #60666e; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.feature-detail-label span { color: #69717a; font-size: 9px; letter-spacing: 0; border-bottom: 2px solid var(--cyan); padding-bottom: 3px; }
.feature-detail-image { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; border-radius: 0; margin-bottom: 22px; background: #fff; }
.feature-detail h3 { max-width: 430px; color: var(--ink); font-size: clamp(23px,2.2vw,29px); line-height: 1.25; font-weight: 550; letter-spacing: -.04em; }
.feature-detail-intro { margin-top: 18px; color: #60666e; font-size: 13px; line-height: 1.85; }
@media (max-width: 900px) { .feature-detail { padding-left: 22px; } }
@media (max-width: 680px) {
  .feature-stage { max-width: none; }
  .feature-detail-image { display: none; }
  .feature-detail { padding: 26px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .feature-detail h3 { font-size: 26px; }
  .feature-detail-intro { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .feature-panel:not([hidden]) { animation: none; } }

/* Keep browser scroll anchoring from following a collapsing panel. */
html.feature-resizing { overflow-anchor: none; }

/* On phones, each heading opens its detail text in the same column. */
@media (max-width: 680px) {
  .features-compact { grid-template-columns: minmax(0, 1fr); overflow-anchor: none; }
  .features-compact .feature-stage,
  .features-compact .feature-tab-description,
  .features-compact .feature-detail-label,
  .features-compact .feature-detail-image { display: none !important; }
  .features-compact .feature-tab strong { font-size: 14px; line-height: 1.6; color: #59616a; }
  .features-compact .feature-tab.active { border-bottom-color: transparent; }
  .features-compact .feature-tab-arrow { opacity: 1; }
  .features-compact .feature-tab-arrow .icon { transform: rotate(135deg); transition: transform .18s ease; }
  .features-compact .feature-tab.active .feature-tab-arrow .icon { transform: rotate(-45deg); }
  .features-compact .feature-panel { overflow: hidden; animation: none; }
  .features-compact .feature-detail { padding: 0 0 20px 34px; border: 0; border-bottom: 1px solid var(--cyan); }
  .features-compact .feature-detail h3 { font-size: 20px; line-height: 1.35; }
  .features-compact .feature-detail-intro { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .features-compact .feature-panel { animation: none; }
  .features-compact .feature-tab-arrow .icon { transition: none; }
}