/* Shared product UI for Conversion Setup and Retargeting Setup. */
.measurement-ui{
  --measurement-radius:12px;
  --measurement-radius-sm:8px;
  --measurement-shadow:0 1px 2px rgba(15,17,23,.025);
}
.measurement-ui .main{padding:28px 28px 56px}
.measurement-ui .shell{max-width:none;margin:0}

/* Product page headers use the dashboard's compact, operational hierarchy. */
.measurement-ui .pagehead,.measurement-ui .header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  max-width:none;margin:0 0 22px;
}
.measurement-ui .pagehead>div:first-child,.measurement-ui .header>div:first-child{min-width:0;flex:1}
.measurement-ui .eyebrow{
  margin:0 0 6px;color:#1a56db;font-size:10px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
}
.measurement-ui .pagehead h1,.measurement-ui .header h1,.measurement-ui h1{
  margin:0 0 5px;font:700 24px/1.14 "DM Sans",sans-serif;
  letter-spacing:-.025em;color:#0f1117;
}
.measurement-ui .pagehead h1 em,.measurement-ui .header h1 em{color:inherit;font-style:normal}
.measurement-ui .pagehead p,.measurement-ui .header .sub{
  margin:0;max-width:760px;color:#4b5563;font-size:13px;line-height:1.55;font-weight:400;
}

/* Dashboard-shaped cards and metrics. */
.measurement-ui .card,.measurement-ui .how,.measurement-ui .metrics{
  border:1px solid #e5e3dc;border-radius:var(--measurement-radius);
  background:#fff;box-shadow:var(--measurement-shadow);
}
.measurement-ui .metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  border:0;background:transparent;box-shadow:none;overflow:visible;margin-bottom:22px;
}
.measurement-ui .metric{
  position:relative;overflow:hidden;min-height:126px;padding:20px;
  border:1px solid #e5e3dc;border-radius:var(--measurement-radius);background:#fff;
}
.measurement-ui .metric::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:#1a56db;
}
.measurement-ui .metric:nth-child(2)::before{background:#e5e3dc}
.measurement-ui .metric:nth-child(3)::before{background:#059669}
.measurement-ui .metric-label,.measurement-ui .stat-label{
  margin-bottom:9px;color:#8a919e;font-size:10.5px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;
}
.measurement-ui .metric-value,.measurement-ui .stat-val,.measurement-ui .pool-count{
  font:700 28px/1.05 "DM Sans",sans-serif;letter-spacing:-.03em;
}
.measurement-ui .metric-value small{font:500 13px "DM Sans",sans-serif}
.measurement-ui .metric-sub{margin-top:8px;color:#4b5563;font-size:12px}

/* Keep technical content available, but visually subordinate to status and action. */
.measurement-ui .hero-card{grid-template-columns:minmax(0,1.05fr) minmax(340px,.75fr);gap:18px}
.measurement-ui .status-title{font-size:15px;font-weight:600;margin-bottom:16px}
.measurement-ui .stats{gap:12px;margin:16px 0}
.measurement-ui .stat{padding:15px;border-radius:var(--measurement-radius-sm);background:#fbfbfa}
.measurement-ui .code-card{border-radius:var(--measurement-radius);background:#111827;padding:18px}
.measurement-ui .code-head{font-size:10px;font-weight:600}
.measurement-ui .install-flow{gap:14px}
.measurement-ui .install-step{border-radius:var(--measurement-radius);padding:17px}
.measurement-ui .install-step-num{background:#eff4ff;color:#1a56db}
.measurement-ui .developer-row{border-radius:var(--measurement-radius);background:#fbfbfa}
.measurement-ui .tabs{gap:24px}.measurement-ui .tab{font-size:12px;font-weight:600}
.measurement-ui .measurement-section-title{margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.measurement-ui .measurement-section-copy{margin-top:4px;color:#4b5563;font-size:13px;line-height:1.5}

/* Tables now match Workspace and Analytics density. */
.measurement-ui .table-head{padding:11px 16px;background:#fbfbfa;font-weight:500}
.measurement-ui .campaign-row{min-height:72px;padding:14px 16px}
.measurement-ui .campaign-name{font-weight:500}
.measurement-ui .row-action{font-weight:500}

.measurement-ui .btn,.measurement-ui .primary,.measurement-ui .secondary,.measurement-ui .pill{
  font-weight:500;
}
.measurement-ui .how{margin-top:16px}.measurement-ui .how summary{font-size:13px;font-weight:500}
.measurement-ui .journey-step{background:#fbfbfa;font-size:12px}

/* Guided account-wide retargeting setup. */
.measurement-ui .retargeting-status{display:block}
.measurement-ui .retargeting-status .stats{max-width:760px}
.measurement-ui .setup-workspace{padding:0}
.measurement-ui .setup-workspace-head{display:flex;align-items:flex-start;gap:18px;padding:20px 22px;border-bottom:1px solid #e5e3dc}
.measurement-ui .setup-workspace-head>div:first-child{flex:1}
.measurement-ui .setup-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px}
.measurement-ui .setup-progress-step{color:#8a919e;font-size:10.5px;font-weight:500}
.measurement-ui .setup-progress-step::before{content:"";display:block;height:3px;margin-bottom:6px;border-radius:999px;background:#e5e3dc}
.measurement-ui .setup-progress-step.active{color:#1a56db}.measurement-ui .setup-progress-step.active::before{background:#1a56db}
.measurement-ui .setup-progress-step.done{color:#4b5563}.measurement-ui .setup-progress-step.done::before{background:#a9b7d1}
.measurement-ui .setup-pane{display:none;padding:22px}.measurement-ui .setup-pane.active{display:block}
.measurement-ui .setup-question{margin:0 0 4px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.measurement-ui .setup-help{margin:0 0 16px;color:#4b5563;font-size:13px}
.measurement-ui .setup-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.measurement-ui .setup-choice{display:flex;gap:12px;align-items:flex-start;width:100%;padding:16px;border:1px solid #e5e3dc;border-radius:10px;background:#fff;text-align:left;color:#0f1117}
.measurement-ui .setup-choice:hover{border-color:#b8c9ef;background:#fafcff}
.measurement-ui .setup-choice.active{border-color:#1a56db;background:#eff4ff;box-shadow:0 0 0 2px rgba(26,86,219,.08)}
.measurement-ui .setup-choice-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eff4ff;color:#1a56db;font-weight:600;flex:none}
.measurement-ui .setup-choice b{display:block;font-weight:600}.measurement-ui .setup-choice span:last-child{display:block;margin-top:3px;color:#4b5563;font-size:12.5px;line-height:1.45}
.measurement-ui .setup-platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.measurement-ui #setup-platforms{grid-template-columns:repeat(4,minmax(0,1fr))}
.measurement-ui .setup-platform{display:flex;align-items:center;justify-content:center;min-height:58px;border:1px solid #e5e3dc;border-radius:9px;background:#fff;color:#0f1117;font-weight:500}
.measurement-ui .setup-platform:hover,.measurement-ui .setup-platform.active{border-color:#1a56db;background:#eff4ff;color:#1a56db}
.measurement-ui .setup-platform-logo{display:block;width:auto;height:24px;max-width:116px;object-fit:contain}
.measurement-ui .setup-platform-logo.squarespace{height:18px}.measurement-ui .setup-platform-logo.wix{height:20px}.measurement-ui .setup-platform-logo.hubspot{height:24px;max-width:108px}.measurement-ui .setup-platform-logo.webflow{height:22px;max-width:116px}
.measurement-ui .platform-wordmark{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;letter-spacing:-.02em}
.measurement-ui .platform-wordmark.hubspot::before{content:"";width:13px;height:13px;border-radius:50%;background:#ff7a59;box-shadow:8px -6px 0 -4px #ff7a59,-7px -6px 0 -4px #ff7a59}
.measurement-ui .platform-wordmark.webflow{font-style:italic;color:#146ef5}.measurement-ui .platform-wordmark.custom{font-weight:600}.measurement-ui .platform-wordmark.custom::before{content:"◎";font-size:19px;color:#1a56db}
.measurement-ui .setup-instruction-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:16px;align-items:start}
.measurement-ui #setup-workspace .tabs{display:none}.measurement-ui #setup-workspace .guide{padding:18px}
.measurement-ui .setup-delegate{padding:16px;border:1px solid #e5e3dc;border-radius:10px;background:#fbfbfa}
.measurement-ui .setup-actions{display:flex;align-items:center;gap:9px;margin-top:18px}
.measurement-ui .setup-actions .back-action{border:0;background:transparent;color:#1a56db;font-weight:500}
.measurement-ui .setup-complete{padding:16px 18px;background:#059669;border:1px solid #059669;border-radius:9px;color:#fff}
.measurement-ui .setup-complete strong{display:block;margin-bottom:3px;font-size:15px}
.measurement-ui .retargeting-greeting{margin-bottom:22px}
.measurement-ui .retargeting-greeting h1{margin:0 0 3px;font:700 24px/1.14 "DM Sans",sans-serif;letter-spacing:-.025em}
.measurement-ui .retargeting-greeting p{margin:0;color:#0f1117;font-size:13px}
.measurement-ui .retargeting-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px}
.measurement-ui .retargeting-metric{position:relative;min-height:112px;padding:19px;border:1px solid #d9dce2;border-radius:12px;background:#fff}
.measurement-ui .retargeting-metric-label{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:#0f1117;font-size:12.5px}
.measurement-ui .info-dot{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;border:0;border-radius:50%;padding:0;background:#075bd8;color:#fff;font:700 10px/1 "DM Sans",sans-serif;cursor:help;vertical-align:middle}.measurement-ui .info-dot::after{content:attr(data-tip);position:absolute;z-index:100;top:calc(100% + 9px);left:50%;width:max-content;max-width:min(240px,75vw);padding:9px 11px;border-radius:7px;background:#0a1628;color:#fff;font:500 11.5px/1.4 "DM Sans",sans-serif;text-align:left;text-transform:none;letter-spacing:0;white-space:normal;box-shadow:0 8px 24px rgba(10,22,40,.2);opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity .14s ease,transform .14s ease,visibility .14s}.measurement-ui .info-dot::before{content:"";position:absolute;z-index:101;top:calc(100% + 4px);left:50%;border:5px solid transparent;border-bottom-color:#0a1628;opacity:0;visibility:hidden;transform:translateX(-50%)}.measurement-ui .info-dot:hover::after,.measurement-ui .info-dot:focus::after,.measurement-ui .info-dot:hover::before,.measurement-ui .info-dot:focus::before{opacity:1;visibility:visible}.measurement-ui .info-dot:hover::after,.measurement-ui .info-dot:focus::after{transform:translate(-50%,0)}.measurement-ui .info-dot:focus-visible{outline:2px solid #1a56db;outline-offset:2px}.measurement-ui .conversion-metrics .metric{overflow:visible}
.measurement-ui .retargeting-metric-value{font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.025em}
.measurement-ui .retargeting-metric-value.inactive{color:#ff8a00}
.measurement-ui .retargeting-alert{display:none;margin-bottom:22px;padding:12px 18px;border-radius:10px;background:#ff8a00;color:#fff;font-size:13px;font-weight:600}
.measurement-ui .retargeting-alert.show{display:block}
.measurement-ui .installation-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.measurement-ui .installation-layout>div{display:flex;min-width:0;flex-direction:column}.measurement-ui .instruction-panel,.measurement-ui .handoff-panel{height:350px;border:1px solid #d9dce2;border-radius:10px;padding:18px;background:#fff}
.measurement-ui .instruction-step{margin-bottom:16px}.measurement-ui .instruction-step:last-child{margin-bottom:0}
.measurement-ui .instruction-step b,.measurement-ui .handoff-subject{display:block;margin-bottom:4px;color:#1a56db;font-size:12px;font-weight:700;text-transform:uppercase}
.measurement-ui .instruction-step span,.measurement-ui .handoff-copy{color:#0f1117;font-size:12.5px;line-height:1.45}
.measurement-ui .handoff-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.measurement-ui .handoff-panel .copy{min-width:78px;background:#0a1628;border-color:#0a1628;color:#fff}
.measurement-ui .handoff-panel{display:flex;flex-direction:column}.measurement-ui .handoff-copy{min-height:0;flex:1;overflow-y:auto;padding-right:8px;scrollbar-gutter:stable;white-space:pre-line}
.measurement-ui .snippet-banner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-top:20px;padding:18px;border-radius:9px;background:#1a56db;color:#fff}
.measurement-ui .snippet-banner-label{margin-bottom:7px;font-size:12px;font-weight:600}
.measurement-ui .snippet-banner .code{padding:0;background:transparent;color:#fff}
.measurement-ui .snippet-banner .copy{min-width:88px;background:#0a1628;border-color:#0a1628}
.measurement-ui .platform-badge{display:inline-block;margin-bottom:16px;border-radius:7px;background:#ff8a00;color:#fff;padding:6px 11px;font-size:11px}

/* Demo setup page uses the same product hierarchy rather than a marketing-page hero. */
.measurement-ui .demo-safety{border-radius:var(--measurement-radius)}
.measurement-ui .pad{padding:22px}
.measurement-ui .section-title{font-size:15px;font-weight:600}
.measurement-ui .mini-journey{gap:7px}.measurement-ui .mj-chip{padding:8px 12px;background:#fbfbfa}
.measurement-ui .choice,.measurement-ui .install-card,.measurement-ui .verify-row{border-radius:var(--measurement-radius-sm)}

@media(max-width:980px){
  .measurement-ui .hero-card{grid-template-columns:1fr}
}
@media(max-width:900px){
  .measurement-ui .metrics{grid-template-columns:1fr}.measurement-ui .metric{min-height:0}
  .measurement-ui .setup-instruction-grid{grid-template-columns:1fr}
  .measurement-ui .retargeting-metrics,.measurement-ui .installation-layout{grid-template-columns:1fr}
  .measurement-ui #setup-platforms{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .measurement-ui .main{padding:20px 16px 48px}
  .measurement-ui .pagehead,.measurement-ui .header{display:block}
  .measurement-ui .pagehead h1,.measurement-ui .header h1,.measurement-ui h1{font-size:22px}
  .measurement-ui .pagehead .btn{width:100%;margin-top:16px}
  .measurement-ui .setup-choices,.measurement-ui .setup-platforms,.measurement-ui #setup-platforms{grid-template-columns:1fr}
  .measurement-ui .setup-progress-step{font-size:0}.measurement-ui .setup-progress-step::before{margin-bottom:0}
}