/* cuttl.io product UI mocks. Faithful HTML rebuilds of the app, drawn at a fixed design size
   and scaled to fit (like a screenshot), so they stay crisp and identical at every width. */

.mock { position: relative; width: 100%; overflow: hidden; }
.mock-scale { position: absolute; top: 0; left: 0; transform-origin: top left; }
.m { font: 400 13px/1.4 'Inter', system-ui, sans-serif; color: #141312; -webkit-font-smoothing: antialiased; }
.m * { box-sizing: border-box; }
.m b { font-weight: 600; }
.m .ic { width: 16px; height: 16px; stroke-width: 1.7; }
.m-card { background: #fff; border: 1px solid #E6E2DA; border-radius: 12px; }
.m-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid #DCD7CD; background: #fff; font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.m-btn.ink { background: #141312; border-color: #141312; color: #fff; }
.m-btn.warn { color: #B42318; }
.m-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; background: #F2EEE6; color: #57544E; white-space: nowrap; }
.m-pill.sky { background: #E3F1F5; color: #0F4150; }
.m-pill.red { background: #FDECEA; color: #A8281F; }
.m-pill.amber { background: #FFF2D6; color: #7A4A00; }
.m-pill.green { background: #E3F4EB; color: #146240; }
.m-pill.iris { background: #E6F0FF; color: #0057BD; }
.m-muted { color: #6F6C65; }
.m-label { font: 500 10.5px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: #8A867E; }
.m-num { font-family: 'Geist Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.m-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #F2EEE6; }
.m-seg span { height: 24px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 7px; font-size: 12px; font-weight: 500; color: #57544E; }
.m-seg span.on { background: #fff; color: #141312; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.m-sel { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid #DCD7CD; border-radius: 8px; background: #fff; font-size: 12.5px; white-space: nowrap; }
.m-sel::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid #6F6C65; border-bottom: 1.5px solid #6F6C65; transform: rotate(45deg) translate(-2px, -2px); }

/* App shell */
.m-app { display: grid; height: 100%; background: #fff; }
.m-sb { border-right: 1px solid #EEEAE3; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; background: #FCFBF9; }
.m-sb .mk { width: 26px; height: 26px; margin-bottom: 10px; }
.m-sb i { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #6F6C65; }
.m-sb i.on { background: #E3F1F5; color: #0F4150; }
.m-main { display: flex; flex-direction: column; min-width: 0; }
.m-tool { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-bottom: 1px solid #EEEAE3; }
.m-tool .sp { flex: 1; }
.m-stage { position: relative; flex: 1; background: #F4F1EB; padding: 18px 22px 0; overflow: hidden; }
.m-side { border-left: 1px solid #EEEAE3; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: #fff; }

/* Demo store page (fictional shop) */
.st { position: relative; background: #fff; border-radius: 8px 8px 0 0; box-shadow: 0 1px 0 #E6E2DA, 0 0 0 1px #ECE8E1; overflow: hidden; color: #1D1B19; font-family: 'Inter', system-ui, sans-serif; }
.st-nav { display: flex; align-items: center; gap: 22px; height: 46px; padding: 0 22px; border-bottom: 1px solid #F0ECE6; font-size: 12px; color: #4A4742; }
.st-logo { font: italic 500 19px/1 'Instrument Serif', Georgia, serif; color: #1D1B19; letter-spacing: -.01em; margin-right: 10px; }
.st-nav .sp { flex: 1; }
.st-pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; padding: 20px 22px 18px; }
.st-img { aspect-ratio: 1 / 1; border-radius: 6px; background: #E8DCCB center/cover no-repeat; }
.st-crumb { font-size: 11px; color: #8A867E; }
.st-title { font: 600 23px/1.15 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -0.02em; margin: 6px 0 6px; }
.st-stars { font-size: 11.5px; color: #6F6C65; }
.st-stars em { font-style: normal; color: #1D1B19; letter-spacing: 1px; }
.st-price { font-size: 18px; font-weight: 600; margin: 12px 0 14px; }
.st-opt { font-size: 11.5px; color: #6F6C65; margin-bottom: 7px; }
.st-sw { display: flex; gap: 8px; margin-bottom: 16px; }
.st-sw span { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid #DCD7CD; border-radius: 6px; font-size: 12px; }
.st-sw span.on { border-color: #1D1B19; box-shadow: inset 0 0 0 1px #1D1B19; }
.st-qty { display: flex; gap: 10px; }
.st-add { flex: 1; height: 42px; border-radius: 6px; background: #1D1B19; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.st-q { width: 84px; height: 42px; border: 1px solid #DCD7CD; border-radius: 6px; display: grid; place-items: center; font-size: 12px; color: #4A4742; }
.st-ship { font-size: 12px; color: #4A4742; text-decoration: underline; text-decoration-color: #CFC9BE; text-underline-offset: 3px; margin: 12px 0 0; display: inline-block; }
.st-acc { margin-top: 14px; border-top: 1px solid #F0ECE6; }
.st-acc div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #F0ECE6; font-size: 12px; }
.st-acc div::after { content: "+"; color: #8A867E; }
.st-more { padding: 6px 22px 22px; }
.st-more h6 { margin: 0 0 10px; font: 600 13px 'Plus Jakarta Sans', system-ui, sans-serif; }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.st-grid .st-img { aspect-ratio: 4 / 3; }
.st-grid p { margin: 7px 0 0; font-size: 11.5px; display: flex; justify-content: space-between; }
.st-badge { position: absolute; top: 8px; left: 8px; background: #fff; border-radius: 4px; padding: 3px 6px; font-size: 10px; font-weight: 600; }
.st.vb .st-ship { display: block; text-align: center; text-decoration: none; font-weight: 600; color: #1D1B19; margin-top: 10px; }

/* Heat overlay canvas */
.m-heat { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .72; }

/* Floating markers */
.m-ring { position: absolute; border: 2px solid #D6453D; border-radius: 6px; box-shadow: 0 0 0 4px rgba(214, 69, 61, .15); pointer-events: none; }
.m-sel-box { position: absolute; border: 1.5px solid #2F8BFF; border-radius: 4px; pointer-events: none; }
.m-sel-box > span { position: absolute; top: -21px; left: -1.5px; height: 19px; padding: 0 6px; background: #2F8BFF; color: #fff; font: 500 10.5px/19px 'Geist Mono', monospace; border-radius: 4px 4px 4px 0; white-space: nowrap; }
.m-minitool { position: absolute; display: flex; gap: 2px; padding: 3px; background: #141312; border-radius: 8px; color: #fff; }
.m-minitool span { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 5px; }
.m-minitool span.on { background: rgba(255,255,255,.16); }

/* Lists */
.m-rows { display: flex; flex-direction: column; }
.m-rows > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #F0ECE6; }
.m-rows > div:last-child { border-bottom: 0; }
.m-bar { height: 6px; border-radius: 3px; background: #EEEAE3; overflow: hidden; }
.m-bar i { display: block; height: 100%; background: #8F8B83; border-radius: 3px; }
.m-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Replay */
.m-player { position: relative; flex: 1; background: #F4F1EB; padding: 16px 20px 0; overflow: hidden; }
.m-tl { padding: 12px 16px 14px; border-top: 1px solid #EEEAE3; }
.m-track { position: relative; height: 8px; border-radius: 4px; background: #EEEAE3; margin: 4px 0 12px; }
.m-track .pg { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #141312; }
.m-track .mk { position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px; }
.m-ctrl { display: flex; align-items: center; gap: 12px; font-size: 12px; color: #57544E; }
.m-play { width: 32px; height: 32px; border-radius: 50%; background: #141312; display: grid; place-items: center; }
.m-play::before { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.m-toggle { width: 28px; height: 16px; border-radius: 8px; background: #141312; position: relative; }
.m-toggle::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.m-ev { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid #F0ECE6; font-size: 12px; line-height: 1.35; }
.m-ev .m-num { color: #8A867E; font-size: 11px; padding-top: 1px; }
.m-ev.on { background: #F4F1EC; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.m-cursor { position: absolute; width: 18px; height: 18px; z-index: 3; }

/* Chat (generic AI assistant, not any vendor's UI) */
/* Claude-style chat: warm page, beige user bubble, answers as plain serif text, one row per tool call, the composer. */
.m-chat { display: flex; flex-direction: column; height: 100%; background: #FAF9F5; }
.m-chat-h { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 18px; color: #3D3D3A; font-size: 13px; }
.m-chat-h b { font-weight: 500; }
.m-chat-h .ic { width: 12px; height: 12px; color: #8A877F; }
.m-chat-b { flex: 1; padding: 4px 22px 10px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.m-msg-u { align-self: flex-end; max-width: 80%; background: #F0EEE6; color: #141413; padding: 9px 14px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
.m-msg-a { display: grid; justify-items: start; gap: 10px; max-width: 100%; color: #141413; }
.m-msg-a > * { max-width: 100%; }
.m-msg-a > .m-rep, .m-msg-a > .m-done, .m-msg-a > .m-approve { justify-self: stretch; }
.m-msg-a > p { margin: 0; font: 400 14px/1.55 ui-serif, Georgia, 'Times New Roman', serif; }
.m-msg-a > p b { font-weight: 600; }
.m-tools { display: grid; gap: 4px; }
.m-tools .m-tool { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border: 1px solid #E8E6DC; border-radius: 8px; background: #fff; font-size: 12px; color: #3D3D3A; }
.m-tools .m-tool b { font-weight: 500; }
.m-tools .m-tool i { font-style: normal; color: #8A877F; margin-left: auto; padding-left: 14px; }
.m .m-tools .m-tool .ic { width: 13px; height: 13px; color: #8A877F; }
.m .m-tools .m-tool .ic:last-child { width: 11px; height: 11px; margin-left: 2px; }
.m-rep { display: grid; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1px solid #E6E2DA; border-radius: 12px; background: #fff; }
.m-rep-h { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
.m-rep svg { display: block; width: 100%; height: 56px; overflow: visible; }
.m-rep .ln { fill: none; stroke: #141312; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m-rep .mk { stroke: #B7B2A8; stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.m-rep .m-muted { font-size: 11.5px; }
.m-done { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #E6E2DA; border-radius: 10px; background: #fff; font-size: 12.5px; }
.m-done .ic { flex: none; width: 16px; height: 16px; color: #1F8A5B; }
.m-approve { background: #fff; border: 1px solid #E6E2DA; border-radius: 12px; padding: 14px; box-shadow: 0 6px 18px -10px rgba(20,19,18,.25); }
.m-approve dl { display: grid; grid-template-columns: 82px 1fr; gap: 6px 10px; margin: 10px 0 12px; font-size: 12px; }
.m-approve dt { color: #8A867E; }
.m-approve dd { margin: 0; }
.m-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.m-ba div { border: 1px solid #ECE8E1; border-radius: 8px; padding: 8px; font-size: 10.5px; color: #8A867E; }
.m-ba .mini-add { height: 14px; border-radius: 3px; background: #1D1B19; margin: 6px 0 4px; }
.m-ba .mini-ship { height: 5px; width: 60%; border-radius: 2px; background: #CFC9BE; margin: 4px auto 0; }
.m-ba .mini-ship.b { background: #1D1B19; width: 70%; }
.m-input { flex: none; display: grid; gap: 10px; margin: 6px 16px 16px; padding: 12px 12px 10px 14px; border: 1px solid #E8E6DC; border-radius: 18px; background: #fff; box-shadow: 0 4px 16px -8px rgba(20, 19, 18, .12); color: #8A877F; font-size: 13px; }
.m-in-row { display: flex; align-items: center; justify-content: space-between; }
.m-plus { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #E8E6DC; border-radius: 8px; color: #3D3D3A; font-size: 16px; line-height: 1; }
.m-send { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #D97757; color: #fff; opacity: .55; }
.m .m-send .ic { width: 15px; height: 15px; transform: rotate(-90deg); }

/* AI section film (aiji / aiwe): Claude's window above, Cuttl's below and in front, straight on the section band.
   Tool calls are plain lines in the chat; the new item is a selected list row (neutral fill, hairlines), not a card. */
.af { position: relative; width: 100%; height: 100%; }
.af-c, .af-app { position: absolute; width: 392px; overflow: hidden; box-shadow: 0 1px 2px rgba(20, 19, 18, .06), 0 16px 40px -16px rgba(20, 19, 18, .22); }
.af-c { left: 0; top: 0; height: 312px; }
.af-app { left: 68px; top: 290px; height: 270px; z-index: 1; }
.af-sc { flex: none; display: flex; flex-direction: column; gap: 12px; }   /* the chat's scroller; the film moves it */
.af:not(.af-live) .af-h { display: none; }   /* the conversation so far plays in the film only; the still shows the answer */
.af-in { display: flex; align-items: flex-end; gap: 10px; margin: 6px 14px 14px; padding: 10px 10px 10px 14px; }
.af-tx { flex: 1; align-self: center; line-height: 18px; color: #141413; }
.af-tx .m-ph { color: #8A877F; }
.af-typed:not(:empty)::after { content: ''; display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; background: #141413; vertical-align: -3px; }
.af .aa-new { overflow: hidden; }
.af-btns { display: flex; gap: 8px; }
.af-cur { left: 0; top: 0; z-index: 3; }
.af-solo .af-c { left: 68px; height: 100%; }   /* the pause button sits in the free column on the left */
/* Recordings starred by Claude: a play tile, the visit, its timeline with the rage clicks marked in red, the length. */
.aa-recs { display: grid; gap: 11px; }
.aa-recs > div { display: grid; grid-template-columns: 24px 148px 1fr 32px; align-items: center; gap: 10px; font-size: 12.5px; }
.aa-play { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #141312; color: #fff; }
.m .aa-play .ic { width: 11px; height: 11px; fill: currentColor; }
.aa-recs .m-bar { position: relative; height: 6px; overflow: visible; background: none; }
.aa-recs .m-bar i { background: #E2DDD3; }
.aa-recs em { position: absolute; top: -3px; width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px; background: #D6453D; }
.aa-recs b { font-weight: 500; text-align: right; }
/* Version B on the page, with the element the visual editor selects. */
.aa-pg { display: grid; gap: 10px; font-size: 12.5px; }
.aa-pg-t { display: flex; justify-content: space-between; }
.aa-pg-t b { font-weight: 600; }
.aa-pg-btn { height: 32px; display: grid; place-items: center; border-radius: 8px; background: #141312; color: #fff; font-weight: 500; }
.aa-pg-n { position: relative; justify-self: center; margin-top: 20px; }
.aa-pg-n b { font-weight: 600; }
.aa-pg-n .m-sel-box { inset: -5px -8px; }
/* The test preview Claude shows in the chat (an MCP App): the original, then version B. */
.m-msg-a > .af-pv { justify-self: stretch; }
.af-new { overflow: hidden; }   /* a card in Claude's answer that the film opens (aihome) */
.af-pv { display: grid; border: 1px solid #E8E6DC; border-radius: 12px; background: #fff; overflow: hidden; font: 400 12.5px/1.4 'Inter', system-ui, sans-serif; color: #141312; }
.pv-h { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid #F0ECE6; }
.pv-h b { flex: 1; font-weight: 600; }
.pv-pg { display: grid; padding: 12px 14px 16px; }
.pv-img { height: 80px; margin-bottom: 10px; border-radius: 8px; background: #F2EEE6 center / cover; }
.pv-t { font-weight: 600; }
.pv-p { margin-top: 2px; color: #57544E; }
.pv-n { display: block; overflow: hidden; }
.pv-n > span { display: block; padding-top: 8px; }
.pv-a > span { color: #4A4742; text-decoration: underline; text-decoration-color: #CFC9BE; text-underline-offset: 3px; }
.pv-b > span { padding-top: 10px; text-align: center; }
.pv-b b { font-weight: 600; }
.pv-btn { height: 34px; margin-top: 12px; display: grid; place-items: center; border-radius: 8px; background: #141312; color: #fff; font-weight: 500; }
.af-pv:not(.pv-live) .pv-a { display: none; }
.m-used { display: grid; gap: 4px; font-size: 12px; color: #6F6C65; }
.m-used span { display: flex; align-items: center; gap: 6px; }
.m-used b { font-weight: 500; color: #3D3D3A; }
.m-used i { font-style: normal; color: #8A877F; }
.m .m-used .ic { width: 13px; height: 13px; color: #8A877F; }
.aa { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.aa-top { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-bottom: 1px solid #F0ECE6; font-size: 13px; color: #6F6C65; }
.aa-top .mk { width: 18px; height: 18px; }
.aa-top b { color: #141312; font-weight: 600; }
.aa-sep { color: #C9C3B8; }
.aa-new { display: grid; gap: 14px; padding: 18px; background: #FAF8F4; border-bottom: 1px solid #F0ECE6; }
.aa-h { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.aa-h b { font-weight: 600; }
.m .aa-h .m-pill .ic { width: 12px; height: 12px; }
.aa-t { margin-left: auto; font-size: 12px; white-space: nowrap; }
.aa-fn { display: grid; gap: 9px; }
.aa-fn > div { display: grid; grid-template-columns: 92px 1fr 46px; align-items: center; gap: 10px; font-size: 12.5px; }
.aa-fn .m-bar { height: 8px; border-radius: 4px; }
.aa-fn .m-bar i { background: #141312; border-radius: 4px; }
.aa-fn .hot .m-bar i { background: #D6453D; }
.aa-fn b { font-weight: 500; text-align: right; }
.aa-note { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.aa-dl { display: grid; grid-template-columns: 92px 1fr; gap: 7px 10px; margin: 0; font-size: 12.5px; }
.aa-dl dt { color: #8A867E; }
.aa-dl dd { margin: 0; }
.aa-act { display: flex; align-items: center; gap: 8px; }
.aa-act .m-pill { margin-right: auto; }
.aa-old { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #F0ECE6; font-size: 13px; color: #57544E; }
.aa-old b { flex: 1; font-weight: 500; }

/* Charts */
.m-chart line, .m-chart path { vector-effect: non-scaling-stroke; }

/* Zone map overlays */
.m-zone { position: absolute; z-index: 2; border: 1.5px solid rgba(47, 139, 255, .8); background: rgba(47, 139, 255, .07); border-radius: 8px; pointer-events: none; }
.m-zone.hi { border-color: #1F8A5B; background: rgba(31, 138, 91, .09); }
.m-zone.lo { border-color: #D6453D; background: rgba(214, 69, 61, .06); }
.m-zone i, .m-zn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #2F8BFF; color: #fff; font: 600 10.5px/1 var(--f-body); font-style: normal; flex: none; }
.m-zone i { position: absolute; left: -9px; top: -9px; box-shadow: 0 0 0 2px #fff; }
.m-zone.hi i, .m-zn.hi { background: #1F8A5B; }
.m-zone.lo i, .m-zn.lo { background: #D6453D; }

/* Layers that belong to one step or view ([data-in]); the others fade out */
.m [data-in] { transition: opacity .35s ease, visibility 0s linear 0s; }
.m [data-in].off { opacity: 0 !important; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.m-sb i { transition: background-color .3s ease, color .3s ease; }

/* Story window: one page, two versions. B is revealed by clipping, so the page never jumps. */
.sx-tools { display: grid; padding: 0 16px; }
.sx-tools .sx-t { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.sx-tools .sx-t .sp { flex: 1; }
.sx-side { display: grid; align-content: start; }
.sx-side .sx-p, .hm .m-side .sx-p { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.hm .m-side { display: grid; align-content: start; }
.sx-b { position: absolute; left: 22px; right: 22px; top: 18px; z-index: 1; clip-path: inset(0 0 0 var(--cut, 100%)); }
.sx-stage .m-heat, .sx-stage .m-ring { z-index: 2; }
.sx-pop { z-index: 4; }
.m-sel-box, .m-minitool { z-index: 3; }
.sx-cmp { position: absolute; left: 22px; right: 22px; top: 18px; bottom: 0; z-index: 3; cursor: ew-resize; touch-action: pan-y; }
.sx-handle { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 19, 18, .18); }
.sx-handle i { position: absolute; top: 46%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(20, 19, 18, .12), 0 6px 16px -6px rgba(20, 19, 18, .4); display: flex; align-items: center; justify-content: center; gap: 0; }
.sx-handle i .ic { width: 15px; height: 15px; stroke-width: 2.2; }
.sx-handle i .ic:first-child { transform: rotate(90deg); margin-right: -3px; }
.sx-handle i .ic:last-child { transform: rotate(-90deg); margin-left: -3px; }
.sx-lab { position: absolute; top: 58px; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 6px; background: rgba(20, 19, 18, .82); color: #fff; font: 500 11px/1 'Inter', sans-serif; pointer-events: none; }
.sx-lab.a { left: 10px; }
.sx-lab.b { right: 10px; background: #FF7A30; color: #141312; }
.sx-cur { left: 0; top: 0; z-index: 5; }
.sx-tl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 12px 16px 14px; background: #fff; border-top: 1px solid #EEEAE3; }
.m-rip { position: absolute; z-index: 5; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #D6453D; pointer-events: none; }
.sx-toasts { position: absolute; right: 16px; bottom: 16px; z-index: 6; width: 262px; height: 64px; pointer-events: none; }
.sx-toast { position: absolute; right: 0; bottom: 0; width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; background: #fff; border: 1px solid #E6E2DA; border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(20, 19, 18, .35); font-size: 12px; line-height: 1.35; transform-origin: 50% 100%; transition: transform .35s ease, opacity .35s ease; }
.sx-toast .ok { width: 20px; height: 20px; border-radius: 50%; background: #E3F4EB; color: #146240; display: grid; place-items: center; flex: none; }
.sx-toast .ok .ic { width: 12px; height: 12px; stroke-width: 2.6; }
.sx-toast b { display: block; font-size: 12.5px; }
.sx-toast span span { color: #6F6C65; }

/* Heatmap views */
.hm-scroll { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(255, 45, 45, .42) 0%, rgba(255, 168, 0, .38) 24%, rgba(255, 230, 0, .32) 40%, rgba(54, 255, 90, .28) 58%, rgba(0, 229, 255, .26) 74%, rgba(44, 123, 255, .26) 88%, rgba(44, 123, 255, .14) 100%); }
.hm-mark { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid rgba(20, 19, 18, .35); }
.hm-mark span, .hm-fold span { position: absolute; right: 12px; top: -11px; height: 22px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 6px; background: #141312; color: #fff; font: 500 11px/1 'Geist Mono', monospace; }
.hm-fold { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #141312; }
.hm-fold span { right: auto; left: 12px; background: #fff; color: #141312; box-shadow: 0 0 0 1px rgba(20, 19, 18, .2); font-family: 'Inter', sans-serif; font-weight: 600; }

/* Recording with a checkout page */
.rp-player { padding-bottom: 0; }
.rp-pdp .st { transition: none; will-change: transform; }
.rp-co { position: absolute; left: 20px; right: 20px; top: 16px; bottom: 0; z-index: 1; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.rp.on-co .rp-co { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.rp-ring, .rp-pop { opacity: 0; transition: opacity .2s ease; }
.rp.rage .rp-ring, .rp.rage .rp-pop { opacity: 1; }
.rp-ring { z-index: 2; }
.rp-pop { z-index: 4; }
.rp-cur { left: 0; top: 0; z-index: 5; }
.rp-end { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(250, 248, 244, .78); opacity: 0; transition: opacity .3s ease; }
.rp-end span { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 9px; background: #141312; color: #fff; font-weight: 500; font-size: 13px; }
.rp.ended .rp-end { opacity: 1; }
.rp .m-ev { transition: background-color .2s ease; }
.st-co { height: 100%; }
.co-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; padding: 22px; }
.co-h { font: 600 16px 'Plus Jakarta Sans', sans-serif; margin-bottom: 12px; }
.co-form label { display: grid; gap: 5px; font-size: 11px; color: #6F6C65; margin-bottom: 11px; position: relative; }
.co-in { height: 34px; display: flex; align-items: center; padding: 0 10px; border: 1px solid #DCD7CD; border-radius: 6px; font-size: 12.5px; color: #1D1B19; background: #fff; }
.co-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-err { display: none; font-style: normal; font-size: 11px; color: #B42318; }
.rp.co-err .co-pc .co-in { border-color: #D6453D; box-shadow: 0 0 0 3px rgba(214, 69, 61, .12); }
.rp.co-err .co-err { display: block; }
.co-pay { display: grid; place-items: center; height: 40px; margin-top: 6px; border-radius: 6px; background: #1D1B19; color: #fff; font-weight: 600; font-size: 13px; }
.co-sum { background: #FAF8F4; border-radius: 8px; padding: 14px; align-self: start; font-size: 12px; }
.co-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #ECE8E1; }
.co-item i { width: 44px; height: 44px; border-radius: 6px; background: #E8DCCB center/cover; }
.co-item small { display: block; color: #8A867E; font-size: 11px; }
.co-line { display: flex; justify-content: space-between; padding-top: 10px; color: #57544E; }
.co-line.tot { color: #1D1B19; font-size: 13px; }

/* Form report */
.fm-row { display: grid; grid-template-columns: 1.3fr 56px 1fr 44px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid #F0ECE6; font-size: 12.5px; }
.fm-row .m-num:last-child { text-align: right; }
.fm-hd { margin-top: 14px; padding: 0 0 8px; font: 500 10.5px/1.2 'Geist Mono', monospace; letter-spacing: .07em; text-transform: uppercase; color: #8A867E; }
.fm-hd span:last-child { text-align: right; }
.fm-row.hot { background: #F4F1EC; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }

/* Reports */
.rpt .rp-stack { display: grid; }
.rpt .rp-stack > * { grid-area: 1 / 1; white-space: nowrap; }
.rp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.rp-c { position: relative; min-width: 0; padding: 16px 20px; display: grid; align-content: start; }
.rp-c > .sx-p { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rp-h { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.rp-h .sp { flex: 1; }
.rp-lg { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.rp-lg i { width: 12px; height: 3px; border-radius: 2px; }
.rp-plot { position: relative; }
.rp-svg { display: block; width: 100%; height: auto; }
.rp-tip { position: absolute; top: 34px; transform: translateX(calc(-100% - 14px)); width: 220px; padding: 10px 12px; font-size: 12px; box-shadow: 0 12px 28px -12px rgba(20, 19, 18, .35); }
.rp-tip > div { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rp-tip > div > i { width: 8px; height: 8px; border-radius: 50%; }
.rp-tip > div .m-num { margin-left: auto; }
.rp-tip .rp-tip-a { flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rp-tip-a .m-btn, .rp-wr .m-btn { height: 26px; padding: 0 9px; font-size: 11.5px; }
.rp-fn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rp-fn > div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.rp-fn b { font-size: 15px; font-weight: 500; }
.rp-fbar { height: 150px; margin-bottom: 8px; border-radius: 6px; background: #F2EEE6; display: flex; align-items: flex-end; overflow: hidden; }
.rp-fbar i { display: block; width: 100%; background: #2F8BFF; border-radius: 6px 6px 0 0; }
.rp-why { padding: 12px 14px 4px; }
.rp-why .rp-h { margin-bottom: 6px; }
.rp-wr { display: grid; grid-template-columns: 1fr 110px 36px auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #F0ECE6; font-size: 12px; }
.rp-wr small { display: block; color: #6F6C65; font-size: 11px; }
.rp-wr > .m-num { text-align: right; }
.rp-sh { height: 6px; border-radius: 3px; background: #EEEAE3; overflow: hidden; }
.rp-sh i { display: block; height: 100%; background: #D6453D; }
.rp-ret { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.rp-rr { display: grid; grid-template-columns: 1.4fr .7fr repeat(4, 1fr); gap: 4px; align-items: center; }
.rp-rh { padding-bottom: 4px; font: 500 10.5px/1.2 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #8A867E; }
.rp-cell { height: 30px; border-radius: 6px; display: grid; place-items: center; }
.rp-cell.na { background: repeating-linear-gradient(135deg, #F4F1EB 0 6px, #FAF8F4 6px 12px); }

/* Industries hub (lpspot, lptest, lpship): Spot, Test and Ship as three panes, the same screens on every kind of site.
   Each pane layers its three sites (.sx-p[data-in]); the switch outside picks one. */
.lp { height: 100%; padding: 14px 16px; display: grid; border: 0; border-radius: 0; }
.lp > .sx-p { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.lp .sp { flex: 1; }
.lp-h, .lp-f { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; white-space: nowrap; }
.lp-h b { font-size: 13.5px; }
.lp-h .m-muted { overflow: hidden; text-overflow: ellipsis; }
.lp-f { margin-top: auto; }
.lp-f .m-muted { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.lp-f b { font-size: 13px; }
/* Spot: a small page of that site, with heat on the trouble spot */
.lp-pg { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid #EEEAE3; border-radius: 8px; background: #fff; overflow: hidden; font-size: 12px; }
.lp-t { font-size: 14px; }
.lp-sub { margin-top: -4px; font-size: 11.5px; color: #6F6C65; }
.lp-it { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.lp-it > i:first-child { width: 28px; height: 28px; border-radius: 5px; background: #E8DCCB center / cover no-repeat; }
.lp-it span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ln { position: relative; display: flex; justify-content: space-between; gap: 8px; padding-top: 7px; border-top: 1px solid #F0ECE6; }
.lp-ln.c { justify-content: center; border-top: 0; padding-top: 2px; }
.lp-ln u { position: relative; color: #57544E; text-decoration-color: #CFC9BE; text-underline-offset: 3px; }
.lp-cta { position: relative; flex: none; height: 30px; margin-top: auto; border-radius: 6px; background: #1D1B19; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 12.5px; }
.lp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lp-plans > div { position: relative; display: grid; gap: 4px; padding: 8px; border: 1px solid #EEEAE3; border-radius: 6px; font-size: 11.5px; color: #57544E; }
.lp-plans b { font-size: 16px; color: #141312; }
.lp-plans i:not(.pc-blob) { position: relative; height: 22px; margin-top: 2px; border-radius: 5px; background: #F2EEE6; display: grid; place-items: center; font: 600 11px/1 'Inter', system-ui, sans-serif; color: #141312; }
.lp-plans .on { border-color: #141312; }
.lp-plans .on i:not(.pc-blob) { background: #1D1B19; color: #fff; }
.lp-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lp-slots span { position: relative; height: 26px; border-radius: 6px; border: 1px solid #E6E2DA; display: grid; place-items: center; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lp-slots .x { color: #B7B2A8; background: #F7F5F1; text-decoration: line-through; }
/* Test: the original against the fix */
.lp-ab { flex: 1; display: grid; align-content: center; gap: 16px; }
.lp-abr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; font-size: 12.5px; }
.lp-v { width: 22px; height: 22px; border-radius: 6px; background: #F2EEE6; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; }
.lp-abr.b .lp-v { background: #141312; color: #fff; }
.lp-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-abr > b { font-size: 15px; }
.lp-bar { grid-column: 2 / -1; height: 8px; border-radius: 4px; background: #F0ECE6; overflow: hidden; }
.lp-bar i { display: block; height: 100%; border-radius: 4px; background: #B7B2A8; }
.lp-abr.b .lp-bar i { background: #141312; }
/* Ship: Impact before and after the rollout */
.lp-kp { display: flex; gap: 24px; }
.lp-kp > div { display: grid; gap: 3px; }
.lp-kp b { font-size: 20px; }
.lp-kp .lp-g { color: #1F8A5B; }
.lp-ch { width: 100%; height: auto; flex: 1; min-height: 0; overflow: visible; }

/* Home page product cards (pcji, pcwe): three small white cards, one shape each. */
.pc { position: relative; width: 100%; height: 100%; }
.pc-c { position: absolute; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(20, 19, 18, .06), 0 12px 28px -14px rgba(20, 19, 18, .22); overflow: hidden; }
.pc-c.big { left: 20px; top: 24px; width: 280px; height: 272px; }
.pc-c.t { left: 316px; top: 24px; width: 184px; height: 128px; }
.pc-c.u { left: 316px; top: 168px; width: 184px; height: 128px; }
.pc-img { flex: none; height: 124px; border-radius: 8px; background: #E8DCCB center / cover no-repeat; }
.pc-ttl { margin-top: 2px; font-size: 15px; }
.pc-price { margin-top: -4px; font-size: 13px; color: #57544E; }
.pc-add { position: relative; flex: none; height: 36px; border-radius: 6px; background: #1D1B19; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; }
.pc-note { position: relative; align-self: flex-start; margin-bottom: 2px; font-size: 12.5px; color: #4A4742; text-decoration: underline; text-decoration-color: #CFC9BE; text-underline-offset: 3px; }
.pc-blob { position: absolute; z-index: 2; left: calc(50% - var(--s) / 2); top: calc(50% - var(--s) / 2); width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 168, 0, .6) 0, rgba(255, 230, 0, .45) 24%, rgba(54, 255, 90, .3) 44%, rgba(0, 229, 255, .2) 58%, rgba(44, 123, 255, .1) 66%, transparent 71%); }
.pc-blob.hot { background: radial-gradient(circle, rgba(255, 45, 45, .8) 0, rgba(255, 120, 0, .6) 24%, rgba(255, 230, 0, .4) 42%, rgba(54, 255, 90, .2) 58%, transparent 70%); }
.pc-sel { position: absolute; inset: -4px -6px; border: 1.5px dashed #FF7A30; border-radius: 4px; }
.pc-vtag { position: absolute; left: 22px; top: 22px; height: 22px; padding: 0 8px; border-radius: 6px; background: #FF7A30; color: #141312; font-size: 11.5px; font-weight: 600; line-height: 22px; }
.pc-lbl { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #8A867E; white-space: nowrap; }
.pc-lbl b { font-size: 13px; color: #141312; }
.pc-lbl b.pc-up { color: #1F8A5B; }
.pc-bars { flex: 1; display: flex; align-items: flex-end; gap: 8px; }
.pc-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: #C9C3B8; }
.pc-bars i:first-child { background: #141312; }
.pc-plot { position: relative; flex: 1; margin: 6px 4px 2px; }
.pc-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pc-line { fill: none; stroke: #141312; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pc-area { fill: #E3F1F5; }
.pc-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #141312; box-shadow: 0 0 0 3px #fff; }
.pc-ab { flex: 1; display: grid; align-content: center; gap: 12px; }
.pc-abr { display: grid; grid-template-columns: 14px 1fr 38px; gap: 8px; align-items: center; font-size: 12px; }
.pc-v { font-weight: 600; }
.pc-bar { height: 8px; border-radius: 4px; background: #F0ECE6; overflow: hidden; }
.pc-bar i { display: block; height: 100%; border-radius: 4px; background: #B7B2A8; }
.pc-abr.b .pc-bar i { background: #141312; }
.pc-abr .m-num { text-align: right; font-size: 13px; }
.pc-roll { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; }
.pc-sw { position: relative; width: 40px; height: 24px; border-radius: 12px; background: #141312; }
.pc-sw i { position: absolute; top: 3px; left: 19px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }

/* Product film (product page hero): four tools on one canvas, linked port to port. v2.js moves a camera over it. */
.sf-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sf-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; font-size: 15px; }
.sf-links { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
.sf-links path { fill: none; stroke: #0F4150; stroke-width: 2.5; stroke-linecap: round; }
.sf-links circle { fill: #fff; stroke: #0F4150; stroke-width: 2.5; }
.sf-card { position: absolute; z-index: 1; width: 480px; }
.sf-tag { position: absolute; left: 0; bottom: calc(100% + 14px); display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 10px; background: #fff; font-size: 16px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgba(20, 19, 18, .06), 0 6px 16px -10px rgba(20, 19, 18, .3); }
.sf-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2C8FA8; }
.sf-tag.ai::before { background: #E3B308; }
.m .sf-tag .ic { width: 18px; height: 18px; }
.sf-body { position: relative; height: 330px; display: flex; flex-direction: column; gap: 16px; padding: 24px; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(20, 19, 18, .06), 0 18px 40px -18px rgba(20, 19, 18, .32); overflow: hidden; }
.sf-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; white-space: nowrap; }
.sf-h > .m-num { font-size: 14px; color: #6F6C65; }
/* Trends */
.sf-ch { position: relative; flex: 1; }
.sf-ch > svg { position: absolute; left: 0; bottom: 0; overflow: visible; }
.sf-ch .gl { stroke: #F0ECE6; stroke-width: 1; }
.sf-ch .mk { stroke: #8F8B83; stroke-width: 1.5; stroke-dasharray: 4 5; }
.sf-ch .ln { fill: none; stroke: #141312; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sf-ch .ln.after { stroke: #D6453D; }
.sf-ch .dip { fill: #D6453D; stroke: #fff; stroke-width: 3; }
.sf-ver { position: absolute; left: 146px; top: -4px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: #141312; color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.m .sf-ver .ic, .m .sf-vchip .ic { width: 14px; height: 14px; }
.sf-tip { position: absolute; left: 262px; top: 92px; display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; font-size: 13px; color: #57544E; white-space: nowrap; box-shadow: 0 0 0 1px rgba(20, 19, 18, .08), 0 14px 30px -12px rgba(20, 19, 18, .35); }
.sf-tip b { font-size: 20px; font-weight: 600; color: #A8281F; }
/* Paths */
.sf-pa { position: relative; flex: 1; }
.sf-pa > svg { position: absolute; left: 0; top: 4px; overflow: visible; }
.sf-pa .nd { fill: #141312; }
.sf-pa .rb { fill: #E6E1D8; }
.sf-pa .rb.red { fill: #F2B8B3; }
.sf-pa .nd.r { fill: #B7B2A8; }
.sf-pa .nd.r.red { fill: #D6453D; }
.sf-pl { position: absolute; left: 264px; display: flex; align-items: baseline; gap: 8px; margin-top: -8px; font-size: 14px; color: #57544E; white-space: nowrap; }
.sf-pl b { font-size: 18px; font-weight: 600; color: #141312; }
.sf-pl.red b { color: #A8281F; }
/* Heatmaps, recordings and the AI card fill their card edge to edge */
.sf-b2, .sf-b3, .sf-b4 { padding: 0; gap: 0; }
.sf-hb { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 16px; border-bottom: 1px solid #F0ECE6; }
.sf-vchip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: #F2EEE6; font-size: 12.5px; font-weight: 500; color: #3A3835; white-space: nowrap; }
.sf-b2 .sf-pdp { padding: 18px 22px; }
.sf-nav { flex: none; display: flex; align-items: center; gap: 20px; height: 48px; padding: 0 22px; border-bottom: 1px solid #F0ECE6; font-size: 13px; color: #4A4742; }
.sf-nav .sp { flex: 1; }
.sf-pdp { flex: 1; display: grid; grid-template-columns: 196px 1fr; gap: 24px; padding: 22px; }
.sf-img { position: relative; border-radius: 10px; background: #E8DCCB center / cover no-repeat; }
.sf-info, .sf-pg { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sf-ttl { font-size: 19px; line-height: 1.25; }
.sf-price { font-size: 16px; color: #57544E; }
.sf-add { position: relative; align-self: stretch; flex: none; height: 46px; margin-top: 4px; border-radius: 8px; background: #1D1B19; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.sf-note { position: relative; font-size: 15px; color: #4A4742; text-decoration: underline; text-decoration-color: #CFC9BE; text-underline-offset: 3px; }
.sf-blob { position: absolute; z-index: 2; left: calc(var(--x, 50%) - var(--s) / 2); top: calc(var(--y, 50%) - var(--s) / 2); width: var(--s); height: var(--s); border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255, 168, 0, .6) 0, rgba(255, 230, 0, .45) 24%, rgba(54, 255, 90, .3) 44%, rgba(0, 229, 255, .2) 58%, rgba(44, 123, 255, .1) 66%, transparent 71%); }
.sf-blob.hot { background: radial-gradient(circle, rgba(255, 45, 45, .8) 0, rgba(255, 120, 0, .6) 24%, rgba(255, 230, 0, .4) 42%, rgba(54, 255, 90, .2) 58%, transparent 70%); }
.sf-pop { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: #fff; font-size: 15px; white-space: nowrap; box-shadow: 0 0 0 1px rgba(20, 19, 18, .08), 0 14px 30px -12px rgba(20, 19, 18, .35); }
.sf-pop .m-pill, .sf-rage { height: 26px; font-size: 13px; }
.sf-rage { position: absolute; z-index: 4; }
.sf-rh { flex: none; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px 0 20px; border-bottom: 1px solid #F0ECE6; font-size: 15px; white-space: nowrap; }
.sf-rh .m-muted { font-size: 13px; }
.sf-scr { position: relative; flex: 1; padding: 16px 64px 0; background: #F4F1EB; overflow: hidden; }
.sf-pg { height: 100%; padding: 18px 22px; border-radius: 10px 10px 0 0; background: #fff; }
.sf-tl { flex: none; display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 20px; border-top: 1px solid #EEEAE3; font-size: 13px; color: #57544E; }
.sf-tl .m-track { flex: 1; margin: 0; }
.sf-tl .pg { width: 40%; }
.sf-tl .idle { position: absolute; z-index: 1; top: 0; bottom: 0; left: 12%; width: 14%; border-radius: 2px; background: repeating-linear-gradient(135deg, #CFC9BE 0 3px, transparent 3px 6px); }
.sf-skip { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 8px; border-radius: 9px; background: #F2EEE6; font-size: 13px; font-weight: 500; color: #3A3835; }
.sf-skip i { position: relative; width: 26px; height: 16px; border-radius: 8px; background: #141312; }
.sf-skip i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
/* Your AI, through MCP */
.sf-b4 { background: #FAF9F5; }
.sf-ab { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 20px 6px; overflow: hidden; }
.sf-mu { align-self: flex-end; padding: 9px 14px; border-radius: 14px; background: #F0EEE6; color: #141413; font-size: 14px; }
.sf-calls { display: grid; gap: 4px; }
.sf-call { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border: 1px solid #E8E6DC; border-radius: 8px; background: #fff; font-size: 12.5px; color: #3D3D3A; }
.sf-call b { font-weight: 500; }
.sf-call i { font-style: normal; color: #8A877F; margin-left: auto; padding-left: 16px; }
.m .sf-call .ic { width: 13px; height: 13px; color: #8A877F; }
.sf-ans { margin: 0; font: 400 15px/1.5 ui-serif, Georgia, 'Times New Roman', serif; color: #141413; }
.sf-ans b { font-weight: 600; }
.sf-in { flex: none; display: grid; gap: 8px; margin: 0 14px 14px; padding: 11px 10px 9px 14px; border: 1px solid #E8E6DC; border-radius: 16px; background: #fff; box-shadow: 0 4px 16px -8px rgba(20, 19, 18, .12); font-size: 14px; color: #141413; white-space: nowrap; transition: border-color .2s; }
.sf-in.on { border-color: #C9C5BA; }
.sf-line { display: flex; align-items: center; height: 20px; }
.sf-in:not(.on) .sf-typed:empty::before { content: "How can I help you today?"; color: #8A877F; }
.sf-caret { width: 1.5px; height: 18px; margin-left: 1px; background: #141312; opacity: 0; }
.sf-in.on .sf-caret { opacity: 1; animation: sf-blink 1s steps(1) infinite; }
.sf-inr { display: flex; align-items: center; justify-content: space-between; }
.sf-plus { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #E8E6DC; border-radius: 8px; color: #3D3D3A; font-size: 16px; line-height: 1; }
.sf-send { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #D97757; color: #fff; opacity: .5; transition: opacity .2s; }
.sf-in.on .sf-send { opacity: 1; }
.m .sf-send .ic { width: 16px; height: 16px; transform: rotate(-90deg); }
@keyframes sf-blink { 50% { opacity: 0; } }
.sf-cur { position: absolute; left: 0; top: 0; z-index: 6; width: 30px; height: 30px; margin: -3px 0 0 -3px; overflow: visible; }
.sf-rip { position: absolute; z-index: 5; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid #141312; pointer-events: none; }
.sf-rip.red { border-color: #D6453D; }
.is-still .sf-cur { display: none; }
/* Web Experiments film: the same canvas on ember, with its own cards (editor, targeting, A/B test, rollout) */
.sf-tag.we::before { background: #FF7A30; }
[data-film="we"] .sf-links path, [data-film="we"] .sf-links circle { stroke: #7A2E05; }
.sf-w0 { padding: 0; gap: 0; }
.sf-w0 .sf-hb .sf-sendb { margin-left: auto; height: 32px; font-size: 13px; }
.m .sf-dev .ic { width: 14px; height: 14px; }
.sf-w0 .sf-pdp { grid-template-columns: 168px 1fr; gap: 22px; padding: 18px 22px; }
.sf-mv { display: grid; text-decoration: none; }
.sf-mv > span:not(.sf-selb) { grid-area: 1 / 1; white-space: nowrap; }
.sf-ta { opacity: 0; text-decoration: underline; text-decoration-color: #CFC9BE; text-underline-offset: 3px; }
.sf-tb { font-weight: 600; color: #146240; }
.sf-selb { position: absolute; inset: -6px -8px; border: 1.5px solid #2F8BFF; border-radius: 5px; pointer-events: none; }
.sf-selb .m-minitool { left: -1.5px; top: calc(100% + 6px); font-weight: 400; color: #fff; }
.sf-w1 { gap: 14px; }
.sf-rows { display: grid; gap: 4px; }
.sf-row { display: grid; grid-template-columns: 104px 1fr; align-items: center; height: 38px; border-bottom: 1px solid #F0ECE6; font-size: 14px; }
.sf-row .k { display: inline-flex; align-items: center; gap: 8px; color: #6F6C65; }
.m .sf-row .ic { width: 16px; height: 16px; }
.sf-row .v { display: flex; align-items: center; gap: 6px; }
.sf-row .m-pill { height: 26px; font-size: 13px; }
.sf-split { height: 28px; gap: 3px; border-radius: 7px; overflow: hidden; }
.sf-split i { flex: 1; height: 100%; display: grid; place-items: center; font-style: normal; font-weight: 600; font-size: 12.5px; }
.sf-split .a { background: #EEEAE3; color: #57544E; }
.sf-split .b { background: #FFD9C2; color: #7A2E05; }
.sf-appr { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.sf-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #DCEBF0; color: #0F4150; font-size: 12.5px; font-weight: 600; }
.sf-aw { display: grid; }
.sf-aw > span { grid-area: 1 / 1; justify-self: start; height: 28px; font-size: 13px; }
.sf-s1, .sf-g1 { opacity: 0; }
.sf-go { margin-left: auto; display: grid; align-items: center; height: 40px; padding: 0 18px; border-radius: 10px; background: #E3F4EB; color: #146240; font-size: 14px; font-weight: 600; }
.sf-go > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.m .sf-go .ic, .m .sf-aw .ic, .m .sf-foot .ic, .m .sf-w3 .sf-h .ic { width: 14px; height: 14px; }
.sf-w2 { gap: 14px; }
.sf-vs { display: grid; gap: 14px; }
.sf-v { display: grid; grid-template-columns: 30px 1fr 64px; align-items: center; gap: 12px; }
.sf-v > b { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #F2EEE6; font-size: 14px; }
.sf-v.b > b { background: #FFE9DC; color: #7A2E05; }
.sf-vt { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13.5px; white-space: nowrap; }
.sf-vt .m-num { font-size: 12.5px; color: #8A877F; }
.sf-vb { height: 10px; border-radius: 5px; background: #EEEAE3; overflow: hidden; }
.sf-vb i { display: block; height: 100%; border-radius: 5px; background: #B7B2A8; }
.sf-v.b .sf-vb i { background: #141312; }
.sf-vr { text-align: right; }
.sf-vr b { display: block; font-size: 19px; font-weight: 600; }
.sf-vr span { font-size: 12.5px; color: #1F8A5B; }
.sf-best { padding: 12px 14px; border-radius: 12px; background: #FAF8F4; }
.sf-bh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 14px; }
.sf-bh b { font-size: 20px; font-weight: 600; color: #146240; }
.sf-bb { height: 8px; border-radius: 4px; background: #EEEAE3; overflow: hidden; }
.sf-bb i { display: block; width: 96%; height: 100%; background: #1F8A5B; }
.sf-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.sf-foot .m-pill { height: 28px; font-size: 13px; }
.sf-foot .m-btn { height: 38px; padding: 0 14px; font-size: 14px; }
.sf-w3 { gap: 12px; }
.sf-w3 .sf-h .m-pill { height: 26px; font-size: 13px; }
.sf-rb { flex: none; display: flex; height: 34px; border-radius: 9px; background: #EEEAE3; }
.sf-rb .b { position: relative; width: 95%; height: 100%; border-radius: 9px 0 0 9px; background: #FF7A30; }
.sf-rb .b::after { content: ""; position: absolute; right: -7px; top: -5px; width: 14px; height: 44px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 19, 18, .15), 0 4px 10px -4px rgba(20, 19, 18, .4); }
.sf-rl { display: flex; justify-content: space-between; font-size: 13.5px; color: #57544E; white-space: nowrap; }
.sf-rl > span { display: inline-flex; align-items: baseline; }
.sf-rl b { margin-right: 5px; font-size: 16px; font-weight: 600; color: #141312; }
.sf-rl .sw { align-self: center; width: 14px; height: 3px; margin-right: 7px; border-radius: 2px; background: #141312; }
.sf-rl .sw.h { background: #B7B2A8; }
.sf-ch2 { position: relative; flex: 1; min-height: 96px; }
.sf-ch2 > svg { position: absolute; left: 0; bottom: 0; overflow: visible; }
.sf-ch2 .gl { stroke: #F0ECE6; stroke-width: 1; fill: none; }
.sf-ch2 .l { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sf-ch2 .l.b { stroke: #141312; }
.sf-ch2 .l.h { stroke: #B7B2A8; }
.sf-ch2 .gap { fill: none; stroke: #1F8A5B; stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.sf-lift { position: absolute; left: 324px; bottom: 22px; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; padding: 6px 10px; border-radius: 9px; background: #fff; font-size: 13px; color: #57544E; white-space: nowrap; box-shadow: 0 0 0 1px rgba(20, 19, 18, .08), 0 8px 18px -10px rgba(20, 19, 18, .35); }
.sf-lift b { font-size: 18px; font-weight: 600; color: #146240; }
.sf-learn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 8px; background: #F2EEE6; font-size: 13.5px; font-weight: 500; }
.m .sf-learn .ic { width: 15px; height: 15px; }
.sf-wait { height: 26px; font-size: 13px; }

/* Web Experiments film as a stage: the product page stays put and changes in place; tool panels cross-fade beside it.
   Version B sits over version A, cut at the split line; --x is A's share of the page (0% while B is being edited). */
.sg-page { position: absolute; z-index: 2; width: 340px; height: 296px; --x: 5%; }
.sg-l { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden; }
.sg-l.a { box-shadow: 0 0 0 1px rgba(20, 19, 18, .06), 0 18px 40px -18px rgba(20, 19, 18, .32); }
.sg-l.b { clip-path: inset(0 0 0 var(--x)); }
.sg-nav { flex: none; display: flex; align-items: center; height: 40px; padding: 0 16px; border-bottom: 1px solid #F0ECE6; font-size: 13px; color: #4A4742; }
.sg-nav .sp { flex: 1; }
.sg-nav .st-logo { font-size: 17px; }
.sg-pd { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 18px 18px; }
.sg-hd { align-self: stretch; display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; }
.sg-hd .sf-img { height: 88px; }
.sg-hd > div { display: grid; gap: 6px; }
.sg-pd .sf-ttl { font-size: 17px; }
.sg-draft { align-self: stretch; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 5px 0 12px; border: 1.5px dashed #FF7A30; border-radius: 8px; font-size: 13.5px; color: #3A3835; }
.sg-draft i { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 5px; background: #FFE9DC; color: #7A2E05; }
.sg-sp { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sg-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 19, 18, .38), 0 1px 6px rgba(20, 19, 18, .28); }
.sg-knob { position: absolute; top: 100%; left: var(--x); width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: #141312; color: #fff; box-shadow: 0 2px 12px rgba(20, 19, 18, .25); }
.sg-knob svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sg-k { position: absolute; top: 100%; margin-top: -13px; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 4px; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 0 0 1px rgba(20, 19, 18, .08), 0 6px 14px -8px rgba(20, 19, 18, .35); }
.sg-k.a { right: calc(100% - var(--x) + 24px); }   /* the tabs ride either side of the knob */
.sg-k.b { left: calc(var(--x) + 24px); }
.sg-k i { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-style: normal; font-size: 11.5px; background: #F2EEE6; }
.sg-k.b i { background: #FFE9DC; color: #7A2E05; }
.sg-slot { position: absolute; width: 360px; }
.sg-pn.sf-body { position: absolute; left: 0; right: 0; height: auto; gap: 14px; padding: 22px; }
.sg-pn.sf-b4 { height: 350px; padding: 0; gap: 0; }
.sg .sf-selb, .sg .sg-k.a, .sg [data-c="0"], .sg [data-c="1"], .sg [data-c="2"] { opacity: 0; }
.sg-chg { display: grid; gap: 8px; }
.sg-c { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 10px; background: #FAF8F4; font-size: 13.5px; color: #57544E; }
.sg-c > i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #FFE9DC; color: #7A2E05; }
.m .sg-c .ic { width: 15px; height: 15px; }
.sg-c b { display: block; font-weight: 600; color: #141312; }
.sg-ed .sf-foot { margin-top: 4px; }
.sg-ed .sg-send { height: 38px; padding: 0 14px; font-size: 14px; }
.sg-tg .sf-appr { margin-top: 4px; }
.sg-rs .sf-foot, .sg-ro .sf-learn { margin-top: 4px; }
.sg-ro .sf-ch2 { flex: none; height: 96px; }
.sg-ro .sf-lift { left: 218px; }
.sf-rip.ok { border-color: #1F8A5B; }

/* Test types (Web Experiments, A/B tests chapter): what each type changes on the left, its result on the right */
.abt .abt-stack { display: grid; }
.abt .abt-stack > * { grid-area: 1 / 1; justify-self: start; white-space: nowrap; }
.abt-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 288px; }
.abt-l, .abt-r { position: relative; display: grid; min-width: 0; }
.abt-r { border-left: 1px solid #EEEAE3; }
.abt-l > .abt-p { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; padding: 20px 22px 18px; }
.abt-r > .abt-p { grid-area: 1 / 1; min-width: 0; padding: 18px; }
.abt-cap { margin: 2px 0 0; font-size: 12.5px; color: #6F6C65; }
.abt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.abt figure { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.abt figcaption { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; white-space: nowrap; }
.abt figcaption span:not(.m-num) { overflow: hidden; text-overflow: ellipsis; }
.abt figcaption .m-num { margin-left: auto; color: #8A877F; }
.abt-k { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: #F2EEE6; font-size: 12px; font-weight: 600; }
.abt-k.b { background: #FFE9DC; color: #7A2E05; }
.abt-pg { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid #EEEAE3; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px -12px rgba(20, 19, 18, .3); }
.abt-img { display: block; aspect-ratio: 4 / 3; border-radius: 6px; background: #E8DCCB center / cover no-repeat; }
.abt-pg s { display: block; height: 7px; border-radius: 4px; background: #EEEAE3; }
.abt-h { font-size: 12.5px; }
.abt-btn { display: grid; place-items: center; height: 28px; border-radius: 6px; background: #1D1B19; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.abt-note { font-size: 11px; color: #6F6C65; white-space: nowrap; text-decoration: underline; text-decoration-color: #CFC9BE; text-underline-offset: 2px; }
.abt-note.hot, .abt-bar { padding: 4px 6px; border-radius: 5px; outline: 1.5px solid #FF7A30; outline-offset: 2px; font-weight: 600; text-align: center; text-decoration: none; }
.abt-note.hot { color: #146240; }
.abt-bar { background: #FFE9DC; color: #7A2E05; font-size: 10.5px; white-space: nowrap; }
.abt-pg.wide { border-color: #FF7A30; }
.abt-pg.wide .abt-img { aspect-ratio: 16 / 7; }
.abt-fork { display: grid; justify-items: center; }
.abt-node { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; background: #141312; color: #fff; font-size: 12px; font-weight: 500; }
.m .abt-node .ic { width: 14px; height: 14px; }
.abt-fork svg { display: block; width: 100%; height: 24px; }
.abt-fork path { fill: none; stroke: #B7B2A8; stroke-width: 2; vector-effect: non-scaling-stroke; }
.abt-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.abt-arr { color: #8A877F; }
.m .abt-arr .ic { width: 16px; height: 16px; }
.abt-opts { display: grid; gap: 8px; }
.abt-opts > div { display: grid; grid-template-columns: 84px 1fr 1fr; align-items: center; gap: 8px; }
.abt-o { height: 30px; display: grid; place-items: center; border: 1px solid #E6E1D8; border-radius: 8px; background: #fff; font-size: 12.5px; }
.abt-o.win { border-color: #FF7A30; background: #FFF4EC; color: #7A2E05; font-weight: 600; }
.abt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.abt-c { display: grid; gap: 6px; padding: 6px; border: 1px solid #EEEAE3; border-radius: 9px; font-size: 12px; text-align: center; }
.abt-c i { display: block; aspect-ratio: 16 / 10; border-radius: 5px; background: #E8DCCB center / cover no-repeat; }
.abt-c s { display: block; height: 6px; border-radius: 3px; background: #E6E1D8; }
.abt-c em { display: grid; place-items: center; height: 20px; border-radius: 4px; background: #1D1B19; color: #fff; font-style: normal; font-weight: 600; font-size: 10px; white-space: nowrap; }
.abt-c.win { border-color: #FF7A30; box-shadow: 0 0 0 1px #FF7A30; }
.abt-c.win span { color: #146240; font-weight: 600; }
.abt-res { display: flex; flex-direction: column; gap: 14px; }
.abt-v { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 10px; }
.abt-vt { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }
.abt-vt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abt-vt b { font-size: 15px; }
.abt-v .m-bar, .abt-best .m-bar { height: 8px; border-radius: 4px; }
.abt-vs { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11.5px; color: #8A877F; }
.abt .up { color: #1F8A5B; }
.abt-best { padding: 12px; border-radius: 10px; background: #FAF8F4; }
.abt-best > div:first-child { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 12.5px; }
.abt-best b { font-size: 17px; color: #146240; }
.abt-best .m-bar i { background: #1F8A5B; }
.abt-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.abt-top { display: grid; gap: 4px; padding: 12px; border-radius: 10px; background: #FAF8F4; font-size: 12.5px; }
.abt-top > span:last-child { display: flex; align-items: baseline; gap: 8px; }
.abt-top b.m-num { font-size: 17px; }
.abt-part { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; font-size: 12.5px; }
.abt-part > span:first-child { color: #8A877F; }
.abt-part .m-bar { grid-column: 1 / 3; height: 6px; }
.abt-part > .m-num:last-child { font-size: 11.5px; color: #57544E; text-align: right; }
.abt-note2 { font-size: 11.5px; }

/* Test setup (targeting) and rollout: same app frame, settings nav on the left, review on the right. */
.tg-body, .ro-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr) 236px; }
.ro-body { grid-template-columns: minmax(0, 1fr) 300px; }
.tg-nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px; border-right: 1px solid #EEEAE3; background: #FCFBF9; }
.tg-nav .m-label { padding: 0 8px 8px; }
.tg-nav > span:not(.m-label) { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; color: #57544E; white-space: nowrap; }
.tg-nav > span.on { background: #E3F1F5; color: #0F4150; font-weight: 500; }
.m .tg-nav .ic { width: 14px; height: 14px; color: #1F8A5B; }
.tg-dot { flex: none; width: 14px; height: 14px; border: 1.5px solid #CFCAC0; border-radius: 50%; }
.tg-nav .on .tg-dot { border-color: #0F4150; box-shadow: inset 0 0 0 3px #E3F1F5, inset 0 0 0 8px #0F4150; }
.tg-main, .ro-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 18px 20px; }
.tg-main section, .ro-main section { display: flex; flex-direction: column; gap: 10px; }
.tg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.tg-h .m-muted { font-size: 12px; }
.tg-rules { display: flex; flex-direction: column; gap: 6px; }
.tg-rule { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid #E6E2DA; border-radius: 9px; font-size: 12.5px; }
.tg-f { min-width: 64px; font-weight: 500; }
.tg-v { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; background: #F2EEE6; font-size: 12.5px; white-space: nowrap; }
.m .tg-v .ic { width: 14px; height: 14px; color: #6F6C65; }
.tg-and { align-self: flex-start; margin-left: 14px; font: 500 10.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: #8A867E; }
.tg-two { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; }
.tg-two > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tg-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; }
.tg-opt { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #E6E2DA; border-radius: 10px; font-size: 12.5px; }
.tg-opt.on { border-color: #141312; box-shadow: 0 0 0 1px #141312; }
.tg-ot { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; }
.tg-rd { flex: none; width: 14px; height: 14px; border: 1.5px solid #CFCAC0; border-radius: 50%; }
.tg-opt.on .tg-rd { border-color: #141312; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px #141312; }
.tg-bar { display: flex; gap: 2px; height: 8px; }
.tg-bar i { border-radius: 3px; background: #DCD7CD; }
.tg-bar i.b { background: #FF7A30; }
.tg-opt small { font-size: 11.5px; line-height: 1.35; color: #6F6C65; }
.tg-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 16px; border-left: 1px solid #EEEAE3; }
.tg-rev { display: flex; flex-direction: column; }
.tg-rev > div { display: grid; grid-template-columns: 16px 64px minmax(0, 1fr); align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid #F0ECE6; font-size: 12px; }
.tg-rev > div:last-child { border-bottom: 0; }
.tg-rev span { color: #6F6C65; }
.tg-rev b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m .tg-rev .ic { width: 14px; height: 14px; color: #1F8A5B; }
.tg-appr { display: flex; align-items: center; gap: 9px; padding: 10px; }
.tg-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E3F1F5; color: #0F4150; font-size: 11px; font-weight: 600; }
.tg-who, .ro-learn > span { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 12.5px; }
.tg-who small, .ro-learn small { font-size: 11.5px; color: #6F6C65; }
.m .tg-appr .m-pill .ic { width: 12px; height: 12px; }
.tg-go { justify-content: center; height: 36px; margin-top: auto; }
.m .tg-go .ic { width: 14px; height: 14px; }
.ro-split { display: flex; height: 44px; border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.ro-split > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; white-space: nowrap; }
.ro-b { flex: 95; background: #FF7A30; color: #fff; }
.ro-b b { font-size: 15px; }
.ro-h { flex: 9; justify-content: center !important; padding: 0 !important; background: #DCD7CD; }
.ro-lg { display: flex; gap: 18px; font-size: 12px; color: #57544E; }
.ro-lg span { display: inline-flex; align-items: center; gap: 7px; }
.ro-lg .sw { width: 14px; height: 3px; border-radius: 2px; background: #141312; }
.ro-lg .sw.h { background: #B7B2A8; }
.ro-ch { position: relative; height: 230px; margin-left: 30px; }
.ro-x { display: flex; justify-content: space-between; margin: -2px 0 0 30px; font-size: 10.5px; color: #8A877F; }
.ro-lift { height: 24px; }
.ro-lift b { font-size: 13px; color: #146240; }
.ro-ch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ro-gl { stroke: #F0ECE6; stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.ro-l { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ro-l.b { stroke: #141312; }
.ro-l.h { stroke: #B7B2A8; }
.ro-y { position: absolute; left: -30px; transform: translateY(-50%); font-size: 10.5px; color: #8A877F; }
.ro-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ro-plan li { position: relative; display: grid; grid-template-columns: 14px 44px minmax(0, 1fr); align-items: baseline; gap: 2px 8px; padding: 0 0 14px; font-size: 12px; }
.ro-plan li::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: -2px; width: 1.5px; background: #E6E2DA; }
.ro-plan li:last-child::before { display: none; }
.ro-plan li > i { width: 12px; height: 12px; border-radius: 50%; background: #1F8A5B; transform: translateY(1px); }
.ro-plan li.on > i { background: #FF7A30; box-shadow: 0 0 0 3px #FFE9DC; }
.ro-plan .m-num { font-size: 11px; color: #8A877F; }
.ro-plan b { font-weight: 500; }
.ro-plan small { grid-column: 3; font-size: 11.5px; color: #6F6C65; }
.ro-learn { align-items: flex-start; }
.m .ro-learn > .ic { width: 16px; height: 16px; color: #6F6C65; margin-top: 1px; }

/* Before/after compare (editor mock), after the free "Image compare" block at bencho.dev (MIT; notice in site.js):
   control under, variant B over it, cut along the line's curve by site.js. Before the script runs, a straight cut
   at the starting 76%. Bencho's tokens map to ours: --ink and --fill-slab to --ink (the knob, as in its dark theme),
   --fill-on to --on-ink (the arrows), --signal to --iris (our focus colour), --font-ui to the mock's own Inter. */
.cmp { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; user-select: none; -webkit-user-select: none; --la: 1; --lb: 1; }
.cmp > .cmp-b { position: absolute; inset: 0; clip-path: inset(0 0 0 76%); }
.st-ship.up { display: block; width: max-content; margin: -6px 0 14px; }
.st-ship.up.hide { visibility: hidden; }
.cmp .st.vb .st-ship.up { margin: -6px 0 14px; padding: 0; background: none; text-align: left; font-weight: 400; }
.cmp .st-ship.st-ghost { display: block; visibility: hidden; margin-top: 10px; padding: 9px 10px; font-weight: 600; text-decoration: none; }
.cmp-b .st.vb .st-ship { padding: 9px 10px; border-radius: 8px; background: #FFF2D6; }
.cmp-lab { position: absolute; bottom: 14px; z-index: 3; height: 26px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 13px; background: rgba(20, 19, 18, .72); color: #fff; font-size: 12px; font-weight: 500; backdrop-filter: blur(6px); pointer-events: none; transition: opacity .2s ease; }
.cmp-lab.a { left: 14px; opacity: var(--la); }
.cmp-lab.b { right: 14px; opacity: var(--lb); }
/* the line is drawn, so it can bend: a 2px white curve over the whole block. Bencho gives it a white glow over
   photographs; our pages are white, so the halo is a soft dark one or the line would vanish. */
.cmp-line { position: absolute; inset: 0; z-index: 3; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 6px rgba(20, 19, 18, .28)); }
.cmp-line path { fill: none; stroke: #fff; stroke-width: 2; }
/* A thin dark edge under the white line, so it still reads where both versions are white */
.cmp-line .edge { stroke: rgba(20, 19, 18, .38); stroke-width: 4; }
.cmp-grip { position: absolute; top: 0; bottom: 0; z-index: 3; width: 0; pointer-events: none; }
.cmp-knob { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--on-ink); box-shadow: 0 2px 12px rgba(20, 19, 18, .25); transition: scale 220ms cubic-bezier(.24, 1.34, .38, 1); }
.cmp-knob svg { width: 16px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmp[data-hover] .cmp-knob { scale: 1.08; }
.cmp[data-held] .cmp-knob { scale: .9; }
.cmp-ctl { position: absolute; z-index: 2; cursor: ew-resize; touch-action: pan-y; border-radius: 0; outline: none; }
.cmp-ctl:focus-visible { box-shadow: inset 0 0 0 2px var(--iris); }
.cmp-ctl:active { cursor: grabbing; }