.product-experience-page { background: #050505; }
.product-experience-page .site-header { background: rgba(5,5,5,.82); backdrop-filter: blur(14px); }
.product-experience-page .header-demo.active { color: #fff; }
.product-experience-page .header-demo.active::after { content: ""; display: block; height: 2px; margin-top: 6px; background: #1155ff; }

.experience-hero { padding: calc(var(--header) + 62px) 0 42px; overflow: hidden; border-bottom: 1px solid var(--line-dark); background: radial-gradient(circle at 78% 20%, rgba(17,85,255,.22), transparent 32%), #050505; }
.experience-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); align-items: end; gap: clamp(44px, 7vw, 110px); }
.experience-eyebrow { margin: 0 0 20px; color: #76a1ff; font-size: 11px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.experience-hero h1 { max-width: 980px; margin: 0; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(48px, 5.5vw, 84px); line-height: .87; letter-spacing: -.07em; text-transform: uppercase; }
.experience-intro-copy { padding-bottom: 5px; }
.experience-intro-copy p { max-width: 540px; margin: 0; color: #a8a8a8; font-size: 17px; }
.experience-intro-copy a { display: inline-block; margin-top: 24px; color: #fff; font-size: 12px; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.experience-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; border: 1px solid var(--line-dark); }
.experience-steps div { position: relative; min-height: 72px; display: flex; align-items: center; gap: 13px; padding: 16px 20px; border-right: 1px solid var(--line-dark); color: #747474; font-size: 11px; font-weight: 900; text-transform: uppercase; transition: background .25s ease, color .25s ease; }
.experience-steps div:last-child { border-right: 0; }
.experience-steps b { color: #555; font-size: 10px; }
.experience-steps .done { color: #a5a5a5; }
.experience-steps .done::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: #45cf8b; }
.experience-steps .current { background: #1155ff; color: #fff; }
.experience-steps .current b { color: rgba(255,255,255,.65); }

.experience-screen-tour { padding: 72px 0 78px; background: #f7f8fb; color: #07111d; }
.experience-screen-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr); align-items: end; gap: 48px; margin-bottom: 30px; }
.experience-screen-head .experience-eyebrow { color: #1155ff; }
.experience-screen-head h2,
.experience-guide-head h2 { max-width: 850px; margin: 0; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(34px, 3.7vw, 52px); line-height: 1; letter-spacing: -.045em; }
.experience-screen-head > p { margin: 0; color: #5d6777; font-size: 16px; line-height: 1.55; }
.experience-screen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.experience-screen-card { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #d6dce6; background: #fff; box-shadow: 0 18px 48px rgba(25,40,65,.08); }
.experience-screen-card--wide { grid-column: 1 / -1; }
.experience-screen-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; background: #fff; }
.experience-screen-card figcaption { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 18px; padding: 18px 20px 20px; border-top: 1px solid #e3e7ed; }
.experience-screen-card figcaption span { color: #1155ff; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.experience-screen-card figcaption b { font-size: 17px; }
.experience-screen-card figcaption p { grid-column: 2; margin: 0; color: #637084; font-size: 12px; }
.experience-guide-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .65fr); align-items: end; gap: 48px; margin-bottom: 26px; }
.experience-guide-head h2 { color: #fff; }
.experience-guide-head > div > p { margin-bottom: 14px; }
.experience-guide-head > p { max-width: 520px; margin: 0; color: #9da3ad; font-size: 15px; }

.experience-stage { padding: 64px 0 80px; background: #050505; }
.experience-stage .experience-steps { margin-top: 0; margin-bottom: 26px; }
.product-console { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; border: 1px solid #263247; background: #eef2f7; color: #0c172b; box-shadow: 0 32px 90px rgba(0,0,0,.5); }
.product-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 20px 14px; border-right: 1px solid #d4dce8; background: #0c1423; color: #fff; }
.product-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 22px; border-bottom: 1px solid rgba(255,255,255,.12); }
.product-sidebar-brand .brand-mark { flex-basis: 32px; width: 32px; height: 32px; }
.product-sidebar-brand div { display: grid; }
.product-sidebar-brand strong { font-family: "Arial Black", Impact, sans-serif; font-size: 17px; letter-spacing: -.04em; text-transform: uppercase; }
.product-sidebar-brand small { color: #7f8aa0; font-size: 9px; }
.product-sidebar nav { display: grid; gap: 5px; margin-top: 22px; }
.product-sidebar nav button { display: grid; width: 100%; grid-template-columns: 28px 1fr; align-items: center; min-height: 44px; padding: 9px 11px; border: 0; background: transparent; color: #9ca8bb; font: inherit; font-size: 11px; font-weight: 800; text-align: left; cursor: pointer; text-transform: uppercase; }
.product-sidebar nav button span { color: #536177; font-size: 9px; }
.product-sidebar nav button:hover, .product-sidebar nav button.active { background: #1155ff; color: #fff; }
.product-sidebar nav button.active span { color: rgba(255,255,255,.65); }
.product-site-health { display: grid; gap: 5px; margin-top: auto; padding: 16px 10px 4px; border-top: 1px solid rgba(255,255,255,.12); }
.product-site-health span { color: #61de9b; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.product-site-health i, .product-live i, .product-evidence figcaption i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #41d48b; box-shadow: 0 0 0 4px rgba(65,212,139,.1); }
.product-site-health strong { font-size: 11px; }
.product-site-health small { color: #6f7c92; font-size: 9px; }

.product-workspace { min-width: 0; background: #eef2f7; }
.product-topbar { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #d6dde8; background: rgba(255,255,255,.96); }
.product-topbar > div { display: flex; align-items: center; gap: 14px; }
.product-topbar strong, .product-user span { font-size: 11px; }
.product-live { color: #0b9859; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.product-user { color: #5c687b; }
.product-user b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #13233e; color: #fff; font-size: 10px; }
.product-board-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 24px 26px 20px; }
.product-board-head p { margin: 0 0 4px; color: #1155ff; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.product-board-head h2 { margin: 0; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(30px, 3vw, 46px); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.product-board-head > div > span { display: block; margin-top: 7px; color: #68758a; font-size: 11px; }
.product-metrics { display: grid; grid-template-columns: repeat(3, minmax(82px, 1fr)); border: 1px solid #d5dce7; background: #fff; }
.product-metrics div { display: grid; gap: 2px; min-width: 88px; padding: 11px 13px; border-right: 1px solid #e0e5ed; }
.product-metrics div:last-child { border-right: 0; }
.product-metrics b { font-size: 13px; }
.product-metrics span { color: #788598; font-size: 9px; }

.product-board { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(390px, 1.05fr); gap: 14px; padding: 0 26px 26px; }
.product-event-list, .product-event-detail { min-width: 0; overflow: hidden; border: 1px solid #d3dbe7; background: #fff; box-shadow: 0 12px 32px rgba(31,48,79,.08); }
.product-list-head { min-height: 50px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #e1e6ee; }
.product-list-head span { padding: 6px 8px; border: 1px solid #dce3ed; color: #66748a; font-size: 9px; }
.product-list-head b { margin-left: auto; color: #1155ff; font-size: 9px; text-transform: uppercase; }
.product-event { position: relative; width: 100%; min-height: 105px; display: grid; grid-template-columns: 86px 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; border: 0; border-bottom: 1px solid #e4e8ef; background: #fff; color: #111b2c; text-align: left; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.product-event:last-child { border-bottom: 0; }
.product-event:hover { z-index: 1; transform: translateX(3px); background: #f6f9ff; }
.product-event.active { background: #eaf2ff; box-shadow: inset 4px 0 #1155ff; }
.product-event.resolved { background: #effcf5; box-shadow: inset 4px 0 #32b979; }
.product-event img { width: 86px; height: 70px; object-fit: cover; }
.product-event > div { display: grid; min-width: 0; gap: 4px; }
.product-event > div strong, .product-event > div span, .product-event > div small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-event > div strong { font-size: 11px; }
.product-event > div span { color: #657188; font-size: 9px; }
.product-event > div small { color: #909cad; font-size: 8px; }
.product-priority { display: inline-flex; width: fit-content; padding: 5px 6px; border: 1px solid; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.product-priority.high { border-color: #ffab8c; color: #d94a13; background: #fff4ef; }
.product-priority.medium { border-color: #ebcb68; color: #9c7410; background: #fffbe8; }
.product-priority.critical { border-color: #f18d9c; color: #c9223d; background: #fff0f2; }

.product-event-detail { padding: 18px; }
.product-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.product-detail-head h3 { margin: 8px 0 0; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(19px, 2vw, 29px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.product-detail-head p { margin: 5px 0 0; color: #667389; font-size: 10px; }
.product-stage-label { flex: 0 0 auto; padding: 7px 9px; background: #eaf2ff; color: #1155ff; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.product-evidence { position: relative; height: 248px; margin: 16px 0 0; overflow: hidden; background: #09101c; }
.product-evidence img { height: 100%; object-fit: cover; transition: opacity .15s ease, transform .45s ease; }
.product-evidence img.changing { opacity: .2; transform: scale(1.025); }
.product-evidence figcaption { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(5,10,18,.86); color: #fff; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.product-evidence figcaption b { color: #9da8ba; }
.product-detail-meta { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border: 1px solid #d9e0e9; }
.product-detail-meta div { min-width: 0; display: grid; gap: 3px; padding: 10px; border-right: 1px solid #d9e0e9; }
.product-detail-meta div:last-child { border-right: 0; }
.product-detail-meta small { color: #7a8799; font-size: 8px; text-transform: uppercase; }
.product-detail-meta strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.product-timeline { display: grid; margin: 11px 0 0; padding: 0; list-style: none; }
.product-timeline li { position: relative; display: grid; grid-template-columns: 17px 1fr; gap: 8px; padding: 7px 0; }
.product-timeline li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 20px; bottom: -4px; width: 2px; background: #d9e2ee; }
.product-timeline i { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 3px solid #dce9ff; border-radius: 50%; background: #1155ff; }
.product-timeline li:last-child i { border-color: #d6f3e4; background: #31b978; }
.product-timeline div { display: grid; gap: 2px; }
.product-timeline strong { font-size: 9px; }
.product-timeline span { color: #657287; font-size: 9px; }
.product-detail-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; margin-top: 12px; }
.product-detail-actions button { min-height: 40px; border: 1px solid #cbd5e2; background: #fff; color: #20304a; font-size: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; }
.product-detail-actions .primary { border-color: #1155ff; background: #1155ff; color: #fff; }
.product-detail-actions button:disabled { cursor: default; opacity: .65; }
.product-detail-actions .primary.resolved { border-color: #219c62; background: #219c62; }
.product-feedback { min-height: 18px; margin: 9px 0 0; color: #627087; font-size: 9px; }
.product-feedback.success { color: #167b4b; font-weight: 900; }

.product-view[hidden] { display: none; }
.product-view { min-height: 690px; }
.product-tool-head { padding: 30px 32px 24px; border-bottom: 1px solid #d6dde8; background: #f7f9fc; }
.product-tool-head p { margin: 0 0 5px; color: #1155ff; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.product-tool-head h2 { margin: 0; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(32px, 4vw, 52px); line-height: .9; letter-spacing: -.055em; text-transform: uppercase; }
.product-tool-head span { display: block; max-width: 680px; margin-top: 9px; color: #68758a; font-size: 11px; }
.product-search { display: grid; gap: 8px; padding: 26px 32px 12px; }
.product-search label { font-size: 10px; font-weight: 900; text-transform: uppercase; }
.product-search > div { display: grid; grid-template-columns: 1fr auto; border: 1px solid #cbd5e2; background: #fff; }
.product-search input { min-width: 0; height: 52px; padding: 0 16px; border: 0; background: transparent; color: #0c172b; font: inherit; font-size: 13px; }
.product-search button { min-width: 150px; border: 0; background: #1155ff; color: #fff; font-size: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; }
.product-quick-search { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 32px 18px; }
.product-quick-search button { padding: 7px 9px; border: 1px solid #ced8e6; background: #f7f9fc; color: #526078; font-size: 9px; cursor: pointer; }
.product-search-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 32px 13px; padding-top: 18px; border-top: 1px solid #d5dde8; }
.product-search-summary b { font-size: 12px; }
.product-search-summary span { color: #6f7c90; font-size: 9px; }
.product-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 32px 30px; }
.product-result-grid article { overflow: hidden; border: 1px solid #d3dbe7; background: #fff; box-shadow: 0 12px 32px rgba(31,48,79,.08); }
.product-result-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.product-result-grid div { display: grid; gap: 5px; padding: 13px; }
.product-result-grid small, .product-result-grid span { color: #728096; font-size: 8px; }
.product-result-grid strong { font-size: 11px; }
.product-result-grid span { color: #0b9859; font-weight: 900; }
.product-result-grid.searched article { animation: result-pop .28s ease both; }
.product-result-grid.searched article:nth-child(2) { animation-delay: .06s; }
.product-result-grid.searched article:nth-child(3) { animation-delay: .12s; }
@keyframes result-pop { from { opacity: .25; transform: translateY(8px); } }

.automation-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin: 28px 32px 18px; }
.automation-flow div { min-height: 82px; display: grid; align-content: center; gap: 6px; padding: 14px; border: 1px solid #cfd8e5; background: #fff; box-shadow: 0 12px 28px rgba(31,48,79,.06); }
.automation-flow small { color: #1155ff; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.automation-flow strong { font-size: 10px; }
.automation-flow i { color: #1155ff; font-style: normal; }
.automation-list { display: grid; gap: 8px; margin: 0 32px; }
.automation-list article { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid #d4dce7; background: #fff; }
.automation-list article > div { display: grid; gap: 4px; }
.automation-list b { font-size: 11px; }
.automation-list span, .automation-list small { color: #6e7b90; font-size: 9px; }
.automation-toggle { min-width: 86px; padding: 9px; border: 1px solid #c7d1df; background: #f3f6fa; color: #647188; font-size: 9px; font-weight: 900; cursor: pointer; text-transform: uppercase; }
.automation-toggle.active { border-color: #8edab5; background: #eaf9f1; color: #117347; }
.automation-run { margin: 18px 32px 30px; padding: 16px; background: #0d1728; color: #fff; }
.automation-run > span { color: #66dfa0; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.automation-run ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 13px 0 0; padding: 0; list-style: none; background: #27344a; }
.automation-run li { padding: 13px; background: #111e33; font-size: 9px; }
.automation-run li::before { content: "✓"; margin-right: 6px; color: #54d495; }

.report-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 28px 32px 18px; }
.report-metrics article { display: grid; gap: 7px; min-height: 132px; padding: 18px; border: 1px solid #d3dbe7; background: #fff; box-shadow: 0 12px 28px rgba(31,48,79,.06); }
.report-metrics small { color: #6c788c; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.report-metrics strong { font-family: "Arial Black", Impact, sans-serif; font-size: 34px; letter-spacing: -.05em; }
.report-metrics span { color: #0b9859; font-size: 9px; }
.report-grid { display: grid; grid-template-columns: 1.5fr .85fr; gap: 12px; padding: 0 32px 30px; }
.report-grid > article { min-height: 310px; padding: 18px; border: 1px solid #d3dbe7; background: #fff; }
.report-chart > div:first-child { display: grid; gap: 4px; }
.report-chart b, .report-table > b { font-size: 11px; }
.report-chart span { color: #778398; font-size: 9px; }
.report-bars { height: 220px; display: flex; align-items: end; gap: 10px; padding-top: 28px; }
.report-bars i { position: relative; flex: 1; background: linear-gradient(#1155ff, #6b8fff); }
.report-bars i:nth-child(1) { height: 44%; }
.report-bars i:nth-child(2) { height: 66%; }
.report-bars i:nth-child(3) { height: 55%; }
.report-bars i:nth-child(4) { height: 78%; }
.report-bars i:nth-child(5) { height: 88%; }
.report-bars i:nth-child(6) { height: 64%; }
.report-bars i:nth-child(7) { height: 74%; }
.report-bars i span { position: absolute; inset: auto 0 -19px; color: #778398; font-style: normal; font-size: 8px; text-align: center; }
.report-table { display: grid; align-content: start; }
.report-table > b { margin-bottom: 14px; }
.report-table div { display: grid; gap: 5px; padding: 14px 0; border-top: 1px solid #e1e6ed; }
.report-table span { color: #5e6b80; font-size: 9px; }
.report-table strong { color: #cc3b27; font-size: 10px; }

.experience-conversion { padding: 72px 0; border-top: 1px solid var(--line-dark); background: #1155ff; }
.experience-conversion > div { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
.experience-conversion p { margin: 0 0 10px; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.experience-conversion h2 { max-width: 950px; margin: 0; font-family: "Arial Black", Impact, sans-serif; font-size: clamp(38px, 4.8vw, 68px); line-height: .9; letter-spacing: -.06em; text-transform: uppercase; }

@media (max-width: 1180px) {
  .product-console { grid-template-columns: 190px minmax(0, 1fr); }
  .product-board { grid-template-columns: 1fr; }
  .product-event-detail { display: grid; grid-template-columns: minmax(300px, .9fr) 1fr; gap: 0 18px; }
  .product-detail-head, .product-evidence { grid-column: 1; }
  .product-detail-meta, .product-timeline, .product-detail-actions, .product-feedback { grid-column: 2; }
  .product-detail-meta { grid-row: 1; margin-top: 0; }
  .product-timeline { grid-row: 2; }
  .product-detail-actions { grid-row: 3; }
  .product-feedback { grid-row: 4; }
}

@media (max-width: 820px) {
  .experience-hero { padding-top: calc(var(--header) + 44px); }
  .experience-hero-grid { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .experience-hero h1 { font-size: clamp(42px, 11vw, 66px); }
  .experience-screen-head, .experience-guide-head { grid-template-columns: 1fr; gap: 18px; }
  .experience-screen-grid { grid-template-columns: 1fr; }
  .experience-screen-card--wide { grid-column: auto; }
  .experience-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .experience-steps div:nth-child(2) { border-right: 0; }
  .experience-steps div:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
  .product-console { grid-template-columns: 1fr; }
  .product-sidebar { display: block; padding: 0; border-right: 0; border-bottom: 1px solid #263247; }
  .product-sidebar-brand, .product-site-health { display: none; }
  .product-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
  .product-sidebar nav button { min-height: 52px; border-right: 1px solid rgba(255,255,255,.1); }
  .product-sidebar nav button:nth-child(even) { border-right: 0; }
  .product-sidebar nav button:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .product-board-head { align-items: start; flex-direction: column; }
  .product-event-detail { display: block; }
  .product-detail-meta { margin-top: 12px; }
  .product-result-grid { grid-template-columns: 1fr 1fr; }
  .automation-flow { grid-template-columns: 1fr; }
  .automation-flow i { transform: rotate(90deg); text-align: center; }
  .automation-list article { grid-template-columns: 1fr auto; }
  .automation-list article > small { grid-column: 1 / -1; grid-row: 2; }
  .report-grid { grid-template-columns: 1fr; }
  .experience-conversion > div { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 520px) {
  .experience-hero { padding-bottom: 28px; }
  .experience-hero h1 { font-size: 11vw; }
  .experience-intro-copy p { font-size: 15px; }
  .experience-steps { width: 100%; max-width: 100%; }
  .experience-stage { padding-top: 22px; }
  .product-console { width: 100%; max-width: 100%; margin-left: 0; border-inline: 0; }
  .product-topbar { padding-inline: 14px; }
  .product-user span { display: none; }
  .product-board-head { padding: 20px 14px 16px; }
  .product-metrics { width: 100%; }
  .product-metrics div { min-width: 0; padding-inline: 9px; }
  .product-board { padding: 0 14px 14px; }
  .product-list-head span { display: none; }
  .product-event { grid-template-columns: 72px 42px minmax(0, 1fr); padding-inline: 9px; }
  .product-event img { width: 72px; height: 60px; }
  .product-event-detail { padding: 14px; }
  .product-detail-head { display: grid; }
  .product-stage-label { width: fit-content; }
  .product-evidence { height: 215px; }
  .product-detail-meta { grid-template-columns: 1fr; }
  .product-detail-meta div { border-right: 0; border-bottom: 1px solid #d9e0e9; }
  .product-detail-meta div:last-child { border-bottom: 0; }
  .product-detail-actions { grid-template-columns: 1fr; }
  .product-tool-head, .product-search { padding-inline: 14px; }
  .product-quick-search { padding-inline: 14px; }
  .product-search > div { grid-template-columns: 1fr; }
  .product-search button { min-height: 44px; }
  .product-search-summary { align-items: start; flex-direction: column; margin-inline: 14px; }
  .product-result-grid { grid-template-columns: 1fr; padding-inline: 14px; }
  .automation-flow, .automation-list, .automation-run { margin-inline: 14px; }
  .automation-run ol { grid-template-columns: 1fr 1fr; }
  .report-metrics { grid-template-columns: 1fr; padding-inline: 14px; }
  .report-grid { padding-inline: 14px; }
  .experience-conversion { padding-block: 58px; }
  .experience-conversion h2 { font-size: 11vw; }
}

@media (prefers-reduced-motion: reduce) {
  .product-event, .product-evidence img { transition: none; }
}

/* Product workspace refinement: readable for repeated use, compact enough to keep work in view. */
.experience-hero { padding: calc(var(--header) + 46px) 0 34px; }
.experience-hero h1 {
  max-width: 820px;
  font-size: clamp(38px, 3.7vw, 52px);
  line-height: 1;
  letter-spacing: -.045em;
  text-transform: none;
}
.experience-steps { margin-top: 0; margin-bottom: 26px; }
.experience-steps div { min-height: 62px; font-size: 12px; text-transform: none; }
.experience-stage { padding: 64px 0 80px; }
.product-sidebar-brand small,
.product-site-health span,
.product-site-health small,
.product-live,
.product-board-head p,
.product-metrics span,
.product-list-head span,
.product-list-head b,
.product-event > div span,
.product-event > div small,
.product-priority,
.product-detail-head p,
.product-stage-label,
.product-evidence figcaption,
.product-detail-meta small,
.product-detail-meta strong,
.product-timeline strong,
.product-timeline span,
.product-feedback,
.product-tool-head p,
.product-quick-search button,
.product-search-summary span,
.product-result-grid small,
.product-result-grid span,
.automation-flow small,
.automation-list span,
.automation-list small,
.automation-toggle,
.automation-run > span,
.automation-run li,
.report-metrics small,
.report-metrics span,
.report-chart span,
.report-bars i span,
.report-table span { font-size: 10px; }
.product-sidebar nav button,
.product-site-health strong,
.product-topbar strong,
.product-user span,
.product-board-head > div > span,
.product-event > div strong,
.product-search label,
.product-result-grid strong,
.automation-flow strong,
.automation-list b,
.report-chart b,
.report-table > b { font-size: 12px; }
.product-sidebar nav button { min-height: 46px; text-transform: none; }
.product-sidebar nav button span { font-size: 10px; }
.product-board-head h2,
.product-tool-head h2 {
  font-size: clamp(30px, 2.7vw, 38px);
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: none;
}
.product-detail-head h3 {
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-transform: none;
}
.product-view { min-height: 650px; }
.experience-conversion { padding: 58px 0; }
.experience-conversion h2 {
  max-width: 820px;
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.04em;
  text-transform: none;
}

@media (max-width: 820px) {
  .experience-hero h1 { font-size: 40px; line-height: 1.03; }
  .product-sidebar nav button { font-size: 12px; }
  .product-view { min-height: 0; }
  .experience-conversion h2 { font-size: 36px; }
}

@media (max-width: 520px) {
  .experience-hero { padding-top: calc(var(--header) + 34px); }
  .experience-stage { padding: 42px 0 58px; }
  .experience-hero h1 { font-size: 36px; }
  .experience-steps div { font-size: 11px; }
  .experience-screen-tour { padding: 54px 0; }
  .experience-screen-card figcaption { grid-template-columns: 1fr; }
  .experience-screen-card figcaption p { grid-column: 1; }
  .product-board-head h2,
  .product-tool-head h2 { font-size: 30px; }
  .experience-conversion h2 { font-size: 34px; }
  .product-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }
  .product-event:hover { transform: none; }
  .product-event img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
  }
  .product-event .product-priority {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    max-width: calc(100% - 20px);
    padding: 5px 8px;
    background: rgba(255,255,255,.96);
    white-space: nowrap;
  }
  .product-event > div { gap: 5px; padding: 11px 12px 13px; }
  .product-event > div strong,
  .product-event > div span,
  .product-event > div small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .product-event > div strong { font-size: 13px; line-height: 1.25; }
  .product-event > div span { font-size: 11px; line-height: 1.35; }
  .product-event > div small { font-size: 10px; }
}