/* ============================================================
   Minded — marketing site v3.4
   Latest DS: buttons 12px / #404040 / weight 400, context+app chips,
   blue @mentions, reasoning-trace tool chips, simplified comparison,
   cleaner cost, side-by-side experts, consistent compliance badges.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink-900); background: #fff; line-height: 1.5; overflow-x: clip; }
html { overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(255,95,52,0.18); }

@keyframes gdrift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes sheen { 0%,100% { transform: translate3d(-4%,-2%,0) scale(1); opacity: .9; } 50% { transform: translate3d(6%,4%,0) scale(1.15); opacity: 1; } }

/* ---- layout ----------------------------------------------- */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.section { padding: clamp(46px, 6.5vh, 78px) 0; }
.section--tight { padding: clamp(40px, 5.5vh, 64px) 0; }
.eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-coral); margin: 0 0 14px; display: inline-flex; align-items: center; gap: 9px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--brand-coral); }
.eyebrow.on-dark { color: var(--brand-peach); }
.section-head { max-width: 680px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
h2.display { font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(30px, 3.9vw, 50px); margin: 0; color: var(--ink-900); text-wrap: balance; }
.lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.5; color: var(--slate-600); margin: 16px 0 0; text-wrap: pretty; max-width: 600px; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.grad-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---- buttons (latest DS: 12px · #404040 · weight 400 · elevation) -- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 400; font-size: 15px; letter-spacing: -0.01em; padding: 8px 18px 8px 16px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; line-height: 1; box-shadow: var(--shadow-button); transition: background .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease, border-color .15s ease; }
.btn:active { transform: translateY(.5px); box-shadow: var(--shadow-xs); }
.btn > span:first-child, .btn > i:first-child, .btn > svg:first-child { margin-left: -3px; }
.btn svg, .btn img { width: 18px; height: 18px; flex: none; }
.btn-primary { background: #404040; color: #fff; box-shadow: 0 4px 12px rgba(29,38,48,.16); }
.btn-ink { background: var(--ink-900); color: #fff; border: none; box-shadow: 0 4px 12px rgba(29,38,48,.18); }
.btn-ink:hover { background: #11181F; box-shadow: 0 6px 18px rgba(29,38,48,.26); }
.btn-primary:hover { background: #2E2E2E; box-shadow: 0 6px 18px rgba(29,38,48,.22); }
.btn-secondary { background: #fff; color: var(--ink-900); border-color: rgba(0,0,0,.07); }
.btn-secondary svg, .btn-secondary img { }
.btn-secondary:hover { color: var(--ink-900); border-color: rgba(0,0,0,.22); }
.btn-cta { background: var(--brand-gradient); color: #fff; border: none; box-shadow: 0 8px 26px rgba(255,95,52,.16), 0 8px 26px rgba(228,60,255,.11); background-size: 180% 180%; animation: gdrift 14s ease-in-out infinite alternate; }
.btn-cta:hover { box-shadow: 0 10px 30px rgba(255,95,52,.22), 0 10px 30px rgba(228,60,255,.15); }
.btn-lg { font-size: 15px; padding: 9px 20px; }
.btn-lg svg, .btn-lg img { width: 20px; height: 20px; }
.btn-on-dark { background: #fff; color: var(--ink-900); }
.btn-on-dark:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.btn-outline-dark { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); box-shadow: none; }
.btn-outline-dark:hover { background: rgba(255,255,255,.14); }

/* Ask AI — card with 3 chips */
.ai-card { margin: 36px auto 0; max-width: 600px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 30px 70px rgba(0,0,0,.3); padding: 26px 26px 28px; }
.ai-card .ai-card-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ai-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ai-chip { flex: 1; min-width: 150px; display: inline-flex; align-items: center; gap: 9px; padding: 13px 16px; border-radius: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; font-size: 15px; font-weight: 600; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.ai-chip:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.34); transform: translateY(-2px); }
.ai-chip img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.ai-chip i { margin-left: auto; }
.ai-chip svg { width: 16px; height: 16px; opacity: .6; }
@media (max-width: 560px) { .ai-chips { flex-direction: column; } .ai-chip { min-width: 0; } }

/* Ask AI — marketing card with white "Ask X" pills */
.ai-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.ai-pill { display: inline-flex; align-items: center; gap: 11px; padding: 15px 30px; border-radius: 999px; background: #fff; color: var(--ink-900); font-size: 16px; font-weight: 600; box-shadow: 0 8px 22px rgba(0,0,0,.16); transition: transform .15s ease, box-shadow .15s ease; }
.ai-pill:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.24); }
.ai-pill img { width: 22px; height: 22px; }
@media (max-width: 560px) { .ai-actions { flex-direction: column; align-items: stretch; } .ai-pill { justify-content: center; } }

/* ---- BUILD CTA (soft light field + glass prompt) ------------- */
.buildcta { position: relative; overflow: hidden; min-height: 86vh; display: flex; align-items: center; justify-content: center; padding: clamp(64px, 10vh, 120px) 24px; background: #FFFFFF; }
.buildcta-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.buildcta-inner { position: relative; z-index: 1; width: 100%; max-width: 880px; text-align: center; }
.buildcta h2 { font-weight: 600; font-size: clamp(30px, 3.9vw, 50px); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink-900); margin: 0 0 18px; text-wrap: balance; }
.buildcta-lead { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; color: var(--slate-600); max-width: 600px; margin: 0 auto 40px; text-wrap: balance; }
.buildbox { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 18px; border-radius: 22px; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 30px 80px rgba(214,108,60,0.16), 0 4px 14px rgba(29,38,48,0.05), inset 0 1px 0 rgba(255,255,255,0.9); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; text-align: left; }
.buildbox:hover { transform: translateY(-3px); box-shadow: 0 40px 96px rgba(214,108,60,0.24), 0 6px 18px rgba(29,38,48,0.06), inset 0 1px 0 rgba(255,255,255,0.95); }
.buildbox:focus-within { border-color: rgba(255,95,52,0.32); box-shadow: 0 40px 96px rgba(214,108,60,0.26), 0 0 0 3px rgba(255,95,52,0.12), inset 0 1px 0 rgba(255,255,255,0.95); }
/* dramatic scroll reveal */
.buildcta-canvas { opacity: 0; transform: scale(1.08); transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.16,1,.3,1); }
.buildcta.in .buildcta-canvas { opacity: 1; transform: scale(1); }
.buildcta-inner > * { opacity: 0; transform: translateY(26px); }
.buildcta.in .buildcta-inner > * { animation: bcRise .9s cubic-bezier(.16,1,.3,1) forwards; }
.buildcta.in .buildcta-inner > *:nth-child(1) { animation-delay: .15s; }
.buildcta.in .buildcta-inner > *:nth-child(2) { animation-delay: .28s; }
.buildcta.in .buildcta-inner > .buildbox { animation: bcPop 1s cubic-bezier(.16,1,.3,1) .42s forwards; }
.buildcta.in .buildcta-inner > .bb-chips { animation-delay: .62s; }
.buildcta.in .buildcta-inner > .buildcta-trust { animation-delay: .74s; }
@keyframes bcRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bcPop { 0% { opacity: 0; transform: translateY(40px) scale(.96); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .buildcta-canvas, .buildcta-inner > * { opacity: 1 !important; transform: none !important; animation: none !important; } }
.bb-input { display: flex; align-items: baseline; gap: 10px; padding: 8px 4px 6px; }
.bb-input .bb-at { flex: none; font-weight: 700; font-size: 18px; background: linear-gradient(95deg, #FFAC6F, #FF5F34 45%, #E43CFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.bb-input input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--ink-900); font-family: var(--font-sans); font-size: clamp(17px, 1.7vw, 20px); line-height: 1.4; }
.bb-input input::placeholder { color: var(--slate-400); }
.bb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bb-tools { display: flex; align-items: center; gap: 6px; }
.bb-tools button { width: 40px; height: 40px; border-radius: 11px; border: none; background: transparent; color: var(--slate-600); cursor: pointer; display: grid; place-items: center; transition: background .15s ease, color .15s ease; }
.bb-tools button:hover { background: var(--surface-muted-2); color: var(--ink-900); }
.bb-tools button svg { width: 21px; height: 21px; stroke-width: 1.8px; }
.bb-right { display: flex; align-items: center; gap: 10px; }
.bb-mic { width: 42px; height: 42px; border-radius: 11px; border: none; background: transparent; color: var(--slate-600); cursor: pointer; display: grid; place-items: center; transition: background .15s ease, color .15s ease; }
.bb-mic:hover { background: var(--surface-muted-2); color: var(--ink-900); }
.bb-mic svg { width: 20px; height: 20px; stroke-width: 1.8px; }
.bb-send { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 22px 0 20px; border-radius: 13px; border: none; cursor: pointer; color: #fff; font-family: var(--font-sans); font-size: 16px; font-weight: 600; background: linear-gradient(95deg, #FFAC6F, #FF5F34 50%, #E43CFF); background-size: 160% 160%; box-shadow: 0 12px 30px rgba(255,95,52,0.42); transition: transform .15s ease, box-shadow .2s ease, background-position .4s ease; }
.bb-send:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 16px 38px rgba(255,95,52,0.52); }
.bb-send svg { width: 19px; height: 19px; stroke-width: 2px; }
.bb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.bb-chip { padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.9); background: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink-900); font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: 0 6px 18px rgba(214,108,60,0.1); transition: transform .15s ease, box-shadow .2s ease, background .15s ease; }
.bb-chip:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 10px 26px rgba(214,108,60,0.18); }
.buildcta-trust { justify-content: center; gap: 40px; margin-top: 34px; }
@media (max-width: 560px) { .bb-send span, .bb-input .bb-at { font-size: 15px; } .bb-bar { flex-wrap: nowrap; } }

.footer-askai { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--slate-500); }
.footer-askai a { color: var(--ink-900); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--slate-300); }
.footer-askai a:hover { text-decoration-color: var(--ink-900); }


/* ---- EXPERTS: desktop app demo (AI Engineer cursor) -------- */
.dd-window { position: relative; margin-top: 40px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(16,24,40,.14); overflow: hidden; max-width: 1020px; margin-left: auto; margin-right: auto; }
.dd-titlebar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.dd-titlebar .tl { width: 11px; height: 11px; border-radius: 999px; }
.dd-titlebar .tl.r { background: #FF5F57; } .dd-titlebar .tl.y { background: #FEBC2E; } .dd-titlebar .tl.g { background: #28C840; }
.dd-app { margin-left: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--slate-600); }
.dd-app img { width: 15px; height: 15px; }
.dd-body { display: flex; min-height: 470px; }
.dd-rail { width: 64px; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0; }
.dd-rail .dd-logo { width: 34px; height: 34px; border-radius: 999px; margin-bottom: 8px; }
.dd-rail .ri { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--slate-500); transition: background .2s ease, color .2s ease; }
.dd-rail .ri svg { width: 19px; height: 19px; }
.dd-rail .ri.lit { background: var(--peach-tint); color: var(--brand-coral); }
.dd-rail .dd-ava { margin-top: auto; width: 32px; height: 32px; border-radius: 999px; }
.dd-main { flex: 1; display: flex; flex-direction: column; padding: 28px clamp(20px,4vw,56px) 22px; min-width: 0; }
.dd-thread { flex: 1; display: flex; flex-direction: column; gap: 18px; max-width: 620px; margin: 0 auto; width: 100%; }
.dd-step { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.dd-step.in { opacity: 1; transform: none; }
.dd-err-card { display: flex; gap: 10px; align-items: flex-start; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 12px; padding: 12px 14px; color: #B91C1C; font-size: 13.5px; line-height: 1.5; margin-top: 10px; max-width: 420px; }
.dd-err-card svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.dd-err-card b { font-weight: 700; }
.role-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--brand-coral); background: var(--peach-tint); border-radius: 999px; padding: 2px 8px; }
.dd-ok-card { display: flex; align-items: center; gap: 11px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 12px; padding: 11px 14px; margin-top: 10px; max-width: 420px; }
.dd-ok-card .gic, .dd-modal .gic, .dd-toast .gic { width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.dd-ok-card b { display: block; font-size: 13.5px; color: var(--ink-900); }
.dd-ok-card span:not(.gic) { font-size: 12px; color: var(--slate-600); }
.dd-ok-card .chk { margin-left: auto; width: 18px; height: 18px; color: var(--success-500, #1F8A5B); flex: none; }
.dd-composer { margin: 20px auto 0; width: 100%; max-width: 620px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 11px 11px 11px 16px; box-shadow: var(--shadow-button); background: #fff; }
.dd-composer > svg { width: 18px; height: 18px; color: var(--slate-500); flex: none; }
.dd-type { flex: 1; font-size: 14.5px; color: var(--ink-900); min-height: 20px; }
.dd-type .ph { color: var(--slate-400); }
.dd-send { width: 38px; height: 38px; border-radius: 10px; background: var(--ink-900); color: #fff; display: grid; place-items: center; border: none; transition: transform .15s ease; flex: none; }
.dd-send svg { width: 17px; height: 17px; }
.dd-send.flash { transform: scale(.88); }
.dd-modal-scrim { position: absolute; inset: 0; background: rgba(29,38,48,.3); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; z-index: 5; }
.dd-modal-scrim.open { opacity: 1; }
.dd-modal { width: min(370px, 86%); background: #fff; border-radius: 16px; box-shadow: 0 30px 70px rgba(16,24,40,.3); padding: 20px; transform: translateY(12px) scale(.97); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.dd-modal-scrim.open .dd-modal { transform: none; }
.dd-modal .mh { display: flex; align-items: center; gap: 12px; }
.dd-modal .mh .t { font-size: 15.5px; font-weight: 700; color: var(--ink-900); }
.dd-modal .mh .s { font-size: 12.5px; color: var(--slate-500); margin-top: 1px; }
.dd-modal .mb { font-size: 13.5px; line-height: 1.55; color: var(--slate-600); margin: 14px 0 18px; }
.dd-modal .mf { display: flex; justify-content: flex-end; gap: 10px; }
.dd-modal .mf button { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; border-radius: 10px; padding: 9px 16px; cursor: pointer; }
.dd-modal .mf .ghost { background: #fff; border: 1px solid var(--line-strong); color: var(--ink-900); }
.dd-modal .mf .ok { background: var(--ink-900); border: none; color: #fff; display: inline-flex; align-items: center; gap: 7px; }
.dd-modal .mf .ok svg { width: 15px; height: 15px; }
.dd-toast { position: absolute; top: 56px; right: 18px; display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px 9px 9px; font-size: 13px; font-weight: 600; color: var(--ink-900); box-shadow: var(--shadow-selected); opacity: 0; transform: translateY(-8px); transition: opacity .35s ease, transform .35s ease; z-index: 6; }
.dd-toast.in { opacity: 1; transform: none; }
.dd-toast .gic { width: 28px; height: 28px; }
.dd-cursor { position: absolute; z-index: 9; left: 103%; top: 42%; transition: left 1.05s cubic-bezier(.35,.7,.25,1), top 1.05s cubic-bezier(.35,.7,.25,1); pointer-events: none; filter: drop-shadow(0 3px 8px rgba(16,24,40,.35)); }
.dd-cursor svg { display: block; transition: transform .15s ease; }
.dd-cursor.click svg { transform: scale(.8); }
.dd-cursor .tag { position: absolute; left: 17px; top: 21px; white-space: nowrap; background: var(--brand-coral); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(255,95,52,.4); }
@media (max-width: 700px) { .dd-rail { display: none; } .dd-body { min-height: 430px; } }
@media (prefers-reduced-motion: reduce) { .dd-step { opacity: 1; transform: none; } .dd-cursor { display: none; } }

.cost .c-right { position: relative; }

/* browser variant: login page + corner chat widget */
.dd-urlbar { margin-left: 12px; flex: 1; max-width: 320px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--slate-600); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.dd-urlbar svg { width: 12px; height: 12px; color: var(--slate-400); }
.dd-screen { position: relative; min-height: 470px; background: #EEF1F5; background-image: radial-gradient(rgba(29,38,48,.04) 1px, transparent 1px); background-size: 22px 22px; display: grid; place-items: center; overflow: hidden; }
.lg-card { width: min(360px, 80%); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(16,24,40,.12); padding: 30px 30px 28px; text-align: center; transform: translateX(-140px); }
.lg-card .lg-mark { display: flex; justify-content: center; margin-bottom: 14px; }
.lg-card .lg-mark .ico-gmail svg, .lg-card .lg-mark .ico-gmail { width: 34px; height: 26px; display: inline-flex; }
.lg-title { font-size: 18px; font-weight: 700; color: var(--ink-900); margin-bottom: 16px; }
.lg-err { display: flex; align-items: flex-start; text-align: left; gap: 9px; background: #FEF2F2; border: 1px solid #FECACA; border-radius: 10px; padding: 10px 12px; color: #B91C1C; font-size: 12.5px; line-height: 1.45; margin-bottom: 14px; }
.lg-err svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.lg-ok { display: none; align-items: center; text-align: left; gap: 9px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 10px; padding: 10px 12px; color: #15803D; font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.lg-ok svg { width: 15px; height: 15px; flex: none; }
.lg-card.done .lg-err { display: none; }
.lg-card.done .lg-ok { display: flex; }
.lg-field { text-align: left; font-size: 13.5px; color: var(--ink-900); background: var(--surface-muted); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; margin-bottom: 10px; }
.lg-google { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink-900); background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 14px; cursor: pointer; box-shadow: var(--shadow-button); }
.mw-chat { position: absolute; right: 0; top: 0; bottom: 0; width: 280px; background: #fff; border: none; border-left: 1px solid var(--line); border-radius: 0; box-shadow: -16px 0 40px rgba(16,24,40,.08); overflow: hidden; z-index: 3; display: flex; flex-direction: column; }
.mw-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.mw-head img { width: 22px; height: 22px; border-radius: 999px; }
.mw-head b { font-size: 13px; color: var(--ink-900); }
.mw-head .on { width: 7px; height: 7px; border-radius: 999px; background: #22C55E; margin-left: auto; }
.mw-thread { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; justify-content: flex-end; }
.mw-msg { font-size: 12.5px; line-height: 1.5; border-radius: 11px; padding: 8px 11px; max-width: 92%; }
.mw-msg.user { align-self: flex-end; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 11px 11px 4px 11px; color: var(--ink-900); }
.mw-msg.user .mention { color: #1264A3; background: #E8F1FB; border-radius: 4px; padding: 0 3px; font-weight: 600; }
.mw-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 11px 11px 11px 4px; color: var(--ink-800); font-family: var(--font-serif); font-size: 12px; }
.mw-msg.human { align-self: flex-end; background: var(--peach-tint); border: 1px solid rgba(255,95,52,.25); border-radius: 11px 11px 4px 11px; color: var(--ink-900); }
.mw-msg.human .who { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--brand-coral); margin-bottom: 3px; }
.mw-msg.human .who img { width: 16px; height: 16px; border-radius: 999px; }
.mw-input { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding: 9px 10px 9px 13px; }
.mw-input .dd-type { font-size: 12.5px; min-height: 18px; }
.mw-input .dd-send { width: 30px; height: 30px; border-radius: 8px; }
.mw-input .dd-send svg { width: 14px; height: 14px; }
.dd-cursor .tag { display: inline-flex; flex-direction: column; gap: 0; line-height: 1.25; background: var(--brand-coral); padding: 5px 11px; border-radius: 10px 999px 999px 999px; left: 18px; top: 20px; }
.dd-cursor .tag b { font-size: 11.5px; font-weight: 700; }
.dd-cursor .tag span { font-size: 10px; opacity: .85; font-weight: 600; }
@media (max-width: 700px) { .lg-card { transform: none; } .mw-chat { position: static; width: auto; margin: 14px; border: 1px solid var(--line); border-radius: 16px; } .dd-screen { display: block; padding: 24px 0 0; } .lg-card { margin: 0 auto; } }

.lg-err.flash { animation: errFlash .55s ease; }
@keyframes errFlash { 0% { box-shadow: 0 0 0 0 rgba(220,38,38,.35); } 70% { box-shadow: 0 0 0 9px rgba(220,38,38,0); } 100% { box-shadow: none; } }
.lg-google, .dd-modal .mf .ok, .dd-send { transition: transform .12s ease; }
.dd-pressed { transform: scale(.95) !important; }
.lg-spin { width: 13px; height: 13px; border: 2px solid var(--slate-300); border-top-color: var(--ink-900); border-radius: 999px; display: inline-block; animation: ddspin .8s linear infinite; }
@keyframes ddspin { to { transform: rotate(360deg); } }

/* pricing: full-height band + scroll micro-animations */
.pricing { min-height: 100vh; display: flex; align-items: center; }
.pricing > .container { width: 100%; }
.cost .bars-v .bar { transform: scaleY(0); transform-origin: bottom; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.cost.chart-go .bars-v .bar { transform: scaleY(1); }
.cost.chart-go .barcol:nth-child(1) .bar { transition-delay: .15s; }
.cost.chart-go .barcol:nth-child(2) .bar { transition-delay: .27s; }
.cost.chart-go .barcol:nth-child(3) .bar { transition-delay: .39s; }
.cost.chart-go .barcol:nth-child(4) .bar { transition-delay: .51s; }
.cost.chart-go .barcol:nth-child(5) .bar { transition-delay: .63s; }
.cost .barcol .val, .cost .barcol .lbl { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.cost.chart-go .barcol .val, .cost.is-visible .barcol .lbl { opacity: 1; transform: none; }
.cost.chart-go .barcol:nth-child(1) .val, .cost.chart-go .barcol:nth-child(1) .lbl { transition-delay: .6s; }
.cost.chart-go .barcol:nth-child(2) .val, .cost.chart-go .barcol:nth-child(2) .lbl { transition-delay: .72s; }
.cost.chart-go .barcol:nth-child(3) .val, .cost.chart-go .barcol:nth-child(3) .lbl { transition-delay: .84s; }
.cost.chart-go .barcol:nth-child(4) .val, .cost.chart-go .barcol:nth-child(4) .lbl { transition-delay: .96s; }
.cost.chart-go .barcol:nth-child(5) .val, .cost.chart-go .barcol:nth-child(5) .lbl { transition-delay: 1.08s; }
.cost .cc-title { opacity: 0; transition: opacity .5s ease 1.25s; }
.cost.chart-go .cc-title { opacity: 1; }
/* Save 92% — chart annotation: dashed reference at the tallest bar, drop line into the Minded column */
.bars-v { position: relative; }
.bars-v::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; border-top: 1.5px dashed var(--slate-300); opacity: 0; transition: opacity .5s ease 1.05s; }
.cost.chart-go .bars-v::before { opacity: .7; }
.barcol.us { position: relative; }
.save-drop { position: absolute; left: 50%; top: 30px; height: 74px; border-left: 1.5px dashed rgba(255,95,52,.6); transform: scaleY(0); transform-origin: top; transition: transform .55s cubic-bezier(.16,1,.3,1) 1.2s; }
.save-drop::after { content: ""; position: absolute; left: -4.5px; bottom: -7px; width: 8px; height: 8px; border-right: 1.5px dashed rgba(255,95,52,.0); border-left: none; border-bottom: 2px solid var(--brand-coral); border-right: 2px solid var(--brand-coral); transform: rotate(45deg); }
.save-note { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); white-space: nowrap; background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,95,52,.25); box-shadow: 0 4px 14px rgba(255,95,52,.16); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-coral); }
.cost .save-note { opacity: 0; transition: opacity .45s ease 1.35s; }
.cost.chart-go .save-note { opacity: 1; }
.cost.chart-go .save-drop { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .save-drop { transform: scaleY(1); } .bars-v::before, .save-note { opacity: 1 !important; transition: none !important; } }
.tier .lvl, .tier .thread, .tier .tier-head { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.tier .tier-head .lvl { opacity: 1; transform: none; }
.tier.is-visible .tier-head { opacity: 1; transform: none; transition-delay: .1s; }
.tier.is-visible .lvl { opacity: 1; transform: none; transition-delay: .1s; }
.tier.is-visible .thread { opacity: 1; transform: none; transition-delay: .22s; }
.tier.is-visible .save-rate { opacity: 1; transform: none; transition-delay: .38s; }
@media (prefers-reduced-motion: reduce) {
  .cost .bars-v .bar, .cost .barcol .val, .cost .barcol .lbl, .cost .cc-title,
  .tier .lvl, .tier .thread, .tier .tier-head, .tier .save-rate { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .cost .bars-v .bar { transform: scaleY(1) !important; }
}

/* ---- compliance badge (consistent everywhere) ------------- */
.trust-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trust { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; color: var(--slate-700); box-shadow: var(--shadow-xs); }
.trust svg { width: 14px; height: 14px; color: var(--slate-400); }
.trust.on-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.82); box-shadow: none; }
.trust.on-dark svg { color: var(--brand-peach); }

.reassure { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; color: var(--fg3); font-size: 14.5px; }
.reassure span { display: inline-flex; align-items: center; gap: 9px; }
.reassure img { width: 18px; height: 18px; }
.reassure.center { justify-content: center; }

/* ---- mentions & chips (latest DS) ------------------------- */
/* blue Slack/Gmail @mention */
.mention { display: inline-flex; align-items: center; padding: 0 4px; border-radius: 4px; background: rgba(29,155,209,0.14); color: #1264A3; font-weight: 500; white-space: nowrap; }
/* context chip (Finance / March) — muted, 8px */
.dchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--r-control); background: var(--surface-muted-2); color: var(--ink-900); font-weight: 500; font-size: .92em; white-space: nowrap; }
/* inline app chip (QuickBooks / Meta) — white + hairline + shadow + icon */
.appchip { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; padding: 3px 8px 3px 6px; border-radius: var(--r-control); background: #fff; border: 1px solid var(--line-strong); box-shadow: var(--shadow-button); font-weight: 500; font-size: .9em; color: var(--ink-900); white-space: nowrap; }
.appchip .ic { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; flex: none; }
.appchip img { width: 15px; height: 15px; }
/* tool chip — reasoning trace */
.tchip { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; padding: 2px 8px 2px 6px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; box-shadow: var(--shadow-button); font-weight: 500; font-size: 12.5px; color: var(--ink-900); white-space: nowrap; }
.tchip svg.tic { width: 13px; height: 13px; color: var(--slate-500); stroke-width: 1.8px; }
.tchip img { width: 14px; height: 14px; }
/* keep a chip and the punctuation right after it on one line — no orphaned "." */
.tchip-tail { white-space: nowrap; }
.slash { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 7px; background: rgba(76,125,250,.12); color: var(--accent-blue); font-weight: 600; font-family: var(--font-mono); white-space: nowrap; }

/* ============================================================
   GLASS MESSAGE THREAD
   ============================================================ */
.thread { display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 11px; align-items: flex-start; }
.msg .avatar { width: 40px; height: 40px; border-radius: 999px; flex: none; position: relative; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--shadow-xs); overflow: visible; }
.msg .avatar > img.face { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.msg .avatar.tinted { border: none; color: #fff; font-weight: 600; font-size: 14px; }
.msg .avatar.minded { background: #fff; }
.msg .avatar.minded > img { width: 72%; height: 72%; object-fit: contain; }
.msg .avatar .badge { position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 7px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.msg .avatar .badge img, .msg .avatar .badge svg { width: 13px; height: 13px; }
.msg .body { flex: 1; min-width: 0; }
.msg .mhead { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.msg .mhead .nm { font-weight: 600; font-size: 14px; color: var(--ink-900); }
.msg .mhead .time { font-size: 12px; color: var(--slate-400); margin-left: auto; }
.glass { background: var(--surface-muted); border: 1px solid var(--line); box-shadow: var(--shadow-button); }
.msg.user .text { display: inline-block; padding: 12px 16px; border-radius: 12px 12px 4px 12px; font-size: 15px; line-height: 1.7; color: var(--ink-900); transition: background .16s ease; }
.msg.user .text:hover { background: var(--surface-hover); }
.msg.minded .text { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--ink-900); }
.msg .steps { margin-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.msg .steps .s { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--slate-700); }
.msg .steps .s svg { width: 15px; height: 15px; flex: none; color: var(--success-500); }
/* reasoning trace (tools used) — shown ABOVE the response */
.rtrace { margin-bottom: 9px; }
.rtrace .rt-head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.rtrace .rt-head .lb { color: var(--slate-500); display: inline-flex; }
.rtrace .rt-head .lb svg { width: 16px; height: 16px; stroke-width: 1.7px; }
.rtrace .rt-head .tt { font-family: var(--font-serif); font-size: 12px; color: var(--fg3); }
.rtrace .rt-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.attach { margin-top: 12px; display: inline-flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px 9px 11px; background: #fff; box-shadow: var(--shadow-xs); }
.attach img.ft { width: 26px; height: 26px; }
.attach .nm { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.attach .sz { font-size: 11.5px; color: var(--slate-500); }
.attach .dl { margin-left: 6px; color: var(--slate-400); }
.attach .dl svg { width: 16px; height: 16px; }
/* generated dashboard widget */
.gen-dash { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-xs); align-self: stretch; }
.gen-dash .gd-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.gen-dash .gd-bar .gd-ttl { font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.gen-dash .gd-bar .gd-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; color: var(--success-800); background: #E6F4EE; padding: 3px 8px; border-radius: 999px; }
.gen-dash .gd-bar .gd-live .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--success-500); }
.gen-dash > img { width: 100%; display: block; }
.gen-dash .gd-foot { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--slate-600); }
.gen-dash .gd-foot .lnk { margin-left: auto; color: var(--accent-blue); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.gen-dash .gd-foot .lnk svg { width: 13px; height: 13px; color: var(--accent-blue); }

/* ============================================================
   OUTRO — mountains rise over the site, hero peeks from below
   ============================================================ */
.page-above { position: sticky; position: -webkit-sticky; z-index: 2; background: var(--bg, #fff); /* top set by JS so the footer freezes while the runway scrolls */ }
.outro-space { height: 250vh; }
.outro { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.outro-layer { position: absolute; inset: 0; will-change: transform; }
/* opaque sky backing travels with the image so the feathered (mask-faded) top edge
   reveals sky-white, not the frozen page behind it, once fully scrolled in. */
.outro-layer-bg { transform: translateY(103%); background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%); }
/* feathered seam: the page blurs into the image edge instead of a hard shadow line */
.outro-layer-bg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 85%); mask-image: linear-gradient(to bottom, transparent, #000 85%); }
.outro-layer-bg .outro-bg { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 130px); mask-image: linear-gradient(to bottom, transparent 0, #000 130px); }
.outro-layer-bg .outro-bg { position: absolute; left: 50%; top: 50%; width: 106%; height: 106%; transform: translate(-50%, -50%); object-fit: cover; object-position: center bottom; will-change: transform; }
.outro-layer-hero { transform: translateY(115%); display: flex; align-items: flex-end; justify-content: center; }
.outro-layer-hero .outro-hero { height: min(76vh, 920px); width: auto; margin-bottom: -8vh; /* feet stay a little cropped */ filter: drop-shadow(0 26px 30px rgba(40,60,40,.35)); will-change: transform; }
@media (max-width: 700px) { .outro-layer-hero .outro-hero { height: 56vh; margin-bottom: -5vh; } }
/* glass composer floating over the hero */
/* anchored by its BOTTOM edge at 30% vh so the composer always sits ABOVE the
   mascot's head (translate -100% grows it upward); rises in 22px as it fades. */
.outro-prompt { position: absolute; left: 50%; top: 30%; width: min(92%, 680px); transform: translate(-50%, calc(-100% + 22px)); opacity: 0; pointer-events: none; border-radius: 24px; background: rgba(255,255,255,0.4); -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 28px 70px rgba(29,38,48,.22), inset 0 0 40px rgba(255,255,255,0.35); padding: 24px 22px 16px; transition: opacity .55s ease, transform .65s cubic-bezier(.16,1,.3,1); }
.outro-prompt.in { opacity: 1; transform: translate(-50%, -100%); pointer-events: auto; }
.op-type { font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.01em; color: var(--ink-900); padding: 2px 6px 34px; }
.op-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-tools { display: flex; align-items: center; gap: 4px; }
.op-tools button, .op-mic { width: 38px; height: 38px; border-radius: 999px; border: none; background: transparent; color: var(--ink-600); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .12s ease; }
.op-tools button:hover, .op-mic:hover { background: rgba(255,255,255,0.55); }
.op-tools button svg, .op-mic svg { width: 20px; height: 20px; stroke-width: 1.8px; }
.op-right { display: flex; align-items: center; gap: 8px; }
.op-start { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 20px; border-radius: 14px; border: none; white-space: nowrap; background: var(--brand-gradient-cta); background-size: 100% 100%; color: #fff; font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; box-shadow: var(--shadow-glow); transition: box-shadow .18s ease, transform .12s ease; }
.op-start:hover { box-shadow: 0 8px 22px rgba(255,95,52,.3), 0 8px 22px rgba(228,60,255,.2); transform: translateY(-1px); }
.op-start svg { width: 17px; height: 17px; }

.nav { position: sticky; top: 0; z-index: 80; background: transparent; border-bottom: 1px solid transparent; transition: border-color .2s ease, background-color .25s ease, backdrop-filter .25s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.nav.scrolled { border-bottom-color: transparent; background: transparent; box-shadow: none; }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 66px; }
/* logo glass box — same frosted container + 16px radius as the .nav-links rail,
   so the logo and the main menu read as a matched pair (desktop). On mobile the
   brand stays bare over the hero until scroll — see the mobile-fixes overrides. */
.brand { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 16px; background: rgba(245,247,250,0.86); border: 1px solid var(--line); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 4px 16px rgba(16,24,40,.07), inset 0 1px 0 rgba(255,255,255,.6); transition: padding .32s cubic-bezier(.4,0,.2,1), background-color .3s ease, border-color .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease; }
.brand img { width: 28px; height: 28px; object-fit: contain; }
.brand span { display: inline-block; font-family: var(--font-wordmark); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; white-space: nowrap; max-width: 140px; opacity: 1; overflow: hidden; vertical-align: middle; transition: opacity .22s ease, max-width .32s cubic-bezier(.4,0,.2,1), margin-left .32s cubic-bezier(.4,0,.2,1); }
/* scrolled: collapse the wordmark to just the glyph — hover the logo to bring it back */
.nav.scrolled .brand span { opacity: 0; max-width: 0; margin-left: -9px; }
.nav.scrolled .brand:hover span, .nav.scrolled .brand:focus-visible span { opacity: 1; max-width: 140px; margin-left: 0; }
/* collapsed = square glyph tile (equal padding) instead of a wide pill */
.nav.scrolled .brand { padding: 6px; background: rgba(245,247,250,0.86); border-color: var(--line); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 4px 16px rgba(16,24,40,.07), inset 0 1px 0 rgba(255,255,255,.6); }
.nav.scrolled .brand:hover, .nav.scrolled .brand:focus-visible { padding: 6px 12px; }
/* nav links — segmented pill rail (matches the use-cases tab style): glassy gray rail, white active chip */
.nav-links { display: flex; align-items: center; gap: 3px; margin: 0 auto; padding: 4px; border-radius: 16px; background: rgba(245,247,250,0.86); border: 1px solid var(--line); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 4px 16px rgba(16,24,40,.07), inset 0 1px 0 rgba(255,255,255,.6); }
.nav-links a { position: relative; font-size: 14px; color: var(--slate-700); font-weight: 500; padding: 7px 15px; border-radius: 12px; border: 1.5px solid transparent; transition: color .18s ease, background-color .22s ease; }
.nav-links a:hover { color: var(--ink-900); background: rgba(255,255,255,0.72); }
.nav-links a.active { color: var(--ink-900); background: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(29,38,48,0.12); }
@media (prefers-reduced-motion: reduce) { .nav-links a.active { animation: none; } }
.nav-actions { display: flex; align-items: center; gap: 10px; }
/* collapsed-menu hamburger (tablet + mobile) */
.nav-burger { display: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); align-items: center; justify-content: center; color: var(--ink-900); cursor: pointer; padding: 0; flex: none; }
.nav-burger svg { width: 20px; height: 20px; }
.btn-icon { padding: 9px; width: 38px; }
.btn-icon > span:first-child { margin-left: 0; }
@media (max-width: 940px) {
  /* burger hugs the right screen edge (nav-actions is hidden on mobile, so it
     can't carry the margin-left:auto — the burger does) */
  .nav-burger { display: inline-flex; margin-left: auto; }
  .nav-actions { margin-left: auto; }
  /* links collapse into a right-anchored dropdown panel under the burger.
     display can't animate, so it stays laid out and reveals with a DS fade +
     scale-from-top-right; visibility/pointer-events keep it inert while hidden */
  .nav-links { display: flex; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(0.985); transform-origin: top right;
    transition: opacity .18s ease, transform .2s cubic-bezier(0.32, 0.72, 0.3, 1), visibility 0s linear .2s;
    position: absolute; top: calc(100% + 8px); right: 16px; left: auto; width: min(300px, calc(100vw - 32px)); flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px rgba(16,24,40,0.16); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.menu-open .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition: opacity .18s ease, transform .2s cubic-bezier(0.32, 0.72, 0.3, 1), visibility 0s; }
  .nav-links a { padding: 11px 14px; border-radius: 10px; font-size: 15px; }
  .nav-links a.active { background: var(--surface-muted); box-shadow: none; }
}
@media (max-width: 940px) and (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; display: flex; align-items: center; min-height: calc(100svh - 66px - 148px); padding: clamp(10px, 2vh, 24px) 0; }
.hero > .container { position: relative; z-index: 1; width: 100%; }
/* aurora background — aceternity-style drifting light bands, in the Minded brand palette */
.hero .aurora { position: absolute; left: 0; right: 0; bottom: 0; top: -70px; overflow: hidden; pointer-events: none; z-index: 0; background: url("hero-clouds.png") top center / cover no-repeat; }
/* time-of-day hero sky — set by the inline head script via data-sky on <html> */
:root[data-sky="sunrise"] .hero .aurora { background-image: url("bg-sunrise.png"); }
:root[data-sky="morning"] .hero .aurora { background-image: url("bg-morning.png"); }
:root[data-sky="noon"]    .hero .aurora { background-image: url("bg-noon.png"); }
:root[data-sky="sunset"]  .hero .aurora { background-image: url("bg-sunset.png"); }
:root[data-sky="night"]   .hero .aurora { background-image: url("bg-night.png"); }
/* night sky is dark/busy — white headline with a soft shadow, but keep "A hire." on the brand gradient */
:root[data-sky="night"] .hero-left h1 { color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 2px 10px rgba(10, 14, 25, 0.30); }
:root[data-sky="night"] .hero-left h1 .grad-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }
:root[data-sky="night"] .hero-left .hero-sub,
:root[data-sky="night"] .hero-left .hero-reassure,
:root[data-sky="night"] .hero-left .hero-trust { color: #0a0e13; }
.hero .aurora::after { content: none; }
/* hero sky switch — small bottom-right time-of-day control */
.sky-switch { position: absolute; right: clamp(14px, 3vw, 36px); bottom: clamp(14px, 2.4vh, 28px); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(231,235,238,0.9); box-shadow: 0 6px 20px rgba(16,24,40,0.10); }
.sky-switch .sky-ic { display: inline-flex; color: var(--ink-900); }
.sky-switch .sky-ic svg { width: 17px; height: 17px; display: block; }
.sky-switch .sky-meta { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.sky-switch .sky-ov { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--slate-600); }
.sky-switch .sky-label { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-900); }
.sky-switch .sky-next { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: none; background: var(--ink-900); color: #fff; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.sky-switch .sky-next:hover { background: var(--primary-600, #2a3743); }
.sky-switch .sky-next:active { transform: scale(0.92); }
.sky-switch .sky-next svg { width: 16px; height: 16px; display: block; }
@media (prefers-reduced-motion: reduce) { .hero .aurora::after { animation: none; } }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: center; }
.hero-left { display: flex; flex-direction: column; justify-content: center; padding: 4px; }
.hero h1 { font-weight: 500; letter-spacing: -0.032em; line-height: 1.03; margin: 0; font-size: clamp(40px, 5.4vw, 68px); color: #464545; text-wrap: balance; }
.hero h1 .at { background: linear-gradient(180deg, #4B9BF5 0%, #1264A3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-sub { font-size: clamp(16px, 1.45vw, 19px); color: var(--slate-600); max-width: 460px; margin: 18px 0 0; line-height: 1.5; }
/* hero subtitle platform rotor — self-sufficient (works without v2.css on mobile) */
.hero-rot { display: inline-grid; vertical-align: baseline; text-align: left; overflow: visible; font-weight: 600; color: var(--ink-900); transition: width .42s cubic-bezier(.22,1,.36,1); }
.hero-sub .hero-rot .ri { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; opacity: 0; transform: translateY(0.45em); transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
.hero-sub .hero-rot .ri.on { opacity: 1; transform: none; }
.hero-sub .hero-rot .ri svg, .hero-sub .hero-rot .ri img { width: 0.95em; height: 0.95em; flex: none; align-self: center; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }
.hero-reassure { margin-top: 2px; }
.hero-trust { margin-top: 22px; }
/* hero "Backed by Y Combinator" badge — sits above the H1 (Figma node 8303-3383) */
.hero-yc { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px; font-family: var(--font-sans); line-height: 1.4; }
.hero-yc__by { font-size: 17px; font-weight: 500; color: #687085; }
.hero-yc__logo { height: 40px; width: auto; display: block; flex: none; }

/* hero panel — chrome removed: bubbles float straight on the cloud backdrop */
.hero-panel { position: relative; border-radius: 0; background: transparent; border: none; overflow: visible; min-height: 440px; display: flex; align-items: flex-start; justify-content: center; padding: 18px 6px; }
.hero-panel .grain { display: none; }
@keyframes grainpulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.hero-mascot { position: absolute; right: -100px; left: auto; margin-left: 0; bottom: -40px; top: auto; width: 196px; z-index: 4; clip-path: none; filter: drop-shadow(0 16px 24px rgba(120,40,20,.28)); animation: fly 9s ease-in-out infinite; }
.hero-mascot.slot { border-radius: 14px; overflow: visible; }
@keyframes fly { 0% { transform: translate(0,0) rotate(-3deg); } 50% { transform: translate(-14px,-20px) rotate(2deg); } 100% { transform: translate(0,0) rotate(-3deg); } }
@media (max-width: 920px) { .hero { min-height: 0; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .hero-grid > * { min-width: 0; } .hero-panel { min-height: 400px; } .hero-mascot { right: -40px; }
  /* the "Trusted by" strip is relocated into the hero (above the demo) on mobile —
     trim its standalone section chrome so it sits as a flush band in the stack */
  .hero-grid > .trusted { height: auto; border-bottom: 0; }
  .hero-grid > .trusted > .container { padding-left: 0; padding-right: 0; }
  /* stacked layout → center the hero copy */
  .hero-left { text-align: center; }
  .hero-yc { align-self: center; }
  .hero-left .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-reassure, .hero-trust { justify-content: center; }
}
/* hidden on the tablet band only — on phones the SOC 2 / GDPR badges show
   above the "Trusted by" section. .trust-row.hero-trust beats base .trust-row{display:flex} */
@media (min-width: 761px) and (max-width: 1024px) { .trust-row.hero-trust { display: none; } }
@media (max-width: 480px) { .hero-mascot { width: 128px; left: auto; margin-left: 0; right: -14px; bottom: -26px; } .hero h1 { font-size: clamp(27px, 10vw, 40px); line-height: 1.06; }
  /* hero animation: hug content (no reserved min-height) + tighter gaps so it doesn't float in whitespace */
  .hero-panel { padding: 6px 4px; min-height: 0; }
  .hero-grid { gap: 16px; } }

/* 3D mascots sprinkled through sections — sized & cornered so they never cover content */
.uc-stage { position: relative; }
.uc-mascot { position: absolute; top: 16px; right: 18px; width: 104px; z-index: 5; pointer-events: none; filter: drop-shadow(0 12px 20px rgba(120,40,20,.22)); transform: rotate(3deg); }
.cost-mascot { width: 140px; margin-top: 20px; display: block; filter: drop-shadow(0 14px 22px rgba(120,40,20,.2)); transform: rotate(-6deg); }
.exp-mascot { position: absolute; bottom: 0; right: clamp(10px, 8%, 70px); width: 124px; margin: 0; filter: drop-shadow(0 14px 22px rgba(120,40,20,.2)); pointer-events: none; }
@media (max-width: 860px) { .exp-mascot { display: none; } }
@media (max-width: 640px) { .uc-mascot { width: 68px; top: 10px; right: 10px; } .cost-mascot { width: 104px; } }

.flowcard { position: relative; z-index: 2; width: 100%; max-width: 440px; border-radius: 0; padding: 4px; min-height: 300px; display: flex; flex-direction: column; gap: 14px; background: transparent; border: none; box-shadow: none; }
.flowcard .msg { opacity: 0; transform: translateY(18px) scale(.9); transform-origin: 14% 100%; transition: opacity .4s ease, transform .6s cubic-bezier(.34,1.45,.5,1); will-change: transform; }
.flowcard .msg.minded { transform-origin: 14% 0%; }
.flowcard .msg.show { opacity: 1; transform: none; }
.flowcard .msg.user .text { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.flowcard .mhead .nm { color: var(--ink-900); }
.flowcard .mhead .time { color: var(--slate-400); }
.flowcard .msg.minded .mhead .nm { color: var(--ink-900); }
.flowcard .think { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--slate-600); background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.8); border-radius: 999px; padding: 5px 12px; }
.flowcard .think svg { width: 14px; height: 14px; color: var(--brand-coral); }
.flowcard .ans { opacity: 0; max-height: 0; overflow: hidden; transition: opacity .5s ease; }
.flowcard .ans.show { opacity: 1; max-height: 320px; }
.flowcard .think.hide { display: none; }
/* glass chat bubbles on the cloud hero */
.flowcard { max-width: 470px; gap: 16px; }
.flowcard .msg { border-radius: 20px; background: rgba(255,255,255,0.4); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid rgba(255,255,255,0.65); box-shadow: 0 18px 44px rgba(29,38,48,0.1), inset 0 1px 0 rgba(255,255,255,0.55); padding: 14px 16px; }
.flowcard .msg.user { align-items: flex-start; }
.flowcard .attach { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.8); }
/* typing indicator bubble */
.flowcard .msg.typing { display: none; padding: 12px 16px; align-items: center; width: fit-content; }
.flowcard .msg.typing.show { display: flex; }
.flowcard .msg.typing .body { display: flex; align-items: center; min-height: 24px; }
.tdots { display: inline-flex; align-items: center; gap: 5px; }
.tdots i { width: 7px; height: 7px; border-radius: 999px; background: var(--slate-400); animation: tdot 1.1s ease-in-out infinite; }
.tdots i:nth-child(2) { animation-delay: .15s; }
.tdots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-4px); opacity: 1; } }
/* reaction + attachment pop */
.flowcard .greact.show { animation: chatpop .45s cubic-bezier(.34,1.56,.64,1) backwards; }
.flowcard .ans.show .attach { animation: chatpop .5s cubic-bezier(.34,1.45,.5,1) backwards; }
@keyframes chatpop { from { opacity: 0; transform: translateY(8px) scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tdots i { animation-duration: 1.6s; } }

/* ---- trusted-by ------------------------------------------- */
.trusted { height: 148px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.trusted > .container { width: 100%; }
.trusted .cap { text-align: center; font-size: 15px; color: var(--slate-600); font-weight: 500; margin-bottom: 22px; }
.trusted .marks { display: flex; align-items: center; justify-content: center; gap: 16px 42px; flex-wrap: wrap; }
.trusted .marks .lw { color: var(--slate-400); opacity: .92; transition: color .18s ease, opacity .18s ease; font-family: var(--font-sans); display: inline-flex; align-items: center; line-height: 1; white-space: nowrap; }
.trusted .marks .lw:hover { color: var(--slate-700); opacity: 1; }
.trusted .marks .lw.deel { font-weight: 800; font-size: 24px; letter-spacing: -0.04em; }
.trusted .marks .lw.deel .d { color: var(--brand-coral); }
.trusted .marks .lw.dd { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.trusted .marks .lw.etoro { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.trusted .marks .lw.etoro .t { color: #4CBFA6; }
.trusted .marks .lw.deloitte { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.trusted .marks .lw.deloitte .d { color: #86BC25; }
.trusted .marks .lw.justeat { font-weight: 800; font-size: 20px; font-style: italic; letter-spacing: -0.01em; }
.trusted .marks .lw.amex { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; border: 2px solid currentColor; border-radius: 4px; padding: 5px 9px; }
.trusted .marks img.logo { width: auto; opacity: .55; filter: grayscale(1) brightness(.4); transition: opacity .18s ease, filter .18s ease; }
.trusted .marks img.logo:hover { opacity: 1; filter: none; }
/* ontop wordmark is a white PNG (shown as gray via the base filter); on hover invert it so it stays visible instead of going white */
.trusted .marks img[alt="Ontop"]:hover { opacity: 1; filter: invert(1); }

/* ============================================================
   TASKS — boxless chats + scroll-in animation
   ============================================================ */
.tasks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 38px; align-items: start; }
.task-col { padding: 4px; }
.task-col .thread { gap: 13px; }
.anim-thread .msg { opacity: 0; transform: translateY(12px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.anim-thread.run .msg { opacity: 1; transform: none; }
.anim-thread.run .msg:nth-child(2) { transition-delay: .35s; }
@media (max-width: 900px) { .tasks-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* ============================================================
   PROBLEM (dark) — Claude screenshots
   ============================================================ */
.dark { position: relative; background: var(--ink-900); color: #fff; overflow: hidden; }
.dark::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(46% 48% at 10% 0%, rgba(255,95,52,.18), transparent 60%), radial-gradient(46% 50% at 92% 100%, rgba(228,60,255,.16), transparent 62%); background-size: 160% 160%; animation: gdrift 20s ease-in-out infinite alternate; }
.dark .container { position: relative; z-index: 1; }
.dark h2.display { color: #fff; }
.dark .lead { color: rgba(255,255,255,.66); }
.claude-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; align-items: stretch; }
.claude-grid > div { display: flex; flex-direction: column; }
.claude-grid .clwin { flex: 1; }
.cl-label { margin-bottom: 11px; }
.cl-label .ptag { font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: #fff; }
/* invoice — fuller layout */
.invoice .inv-meta { font-size: 11px; color: var(--slate-500); margin-top: 3px; }
.invoice .inv-paid { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--danger-500); border: 1.5px solid var(--danger-500); border-radius: 6px; padding: 4px 8px; align-self: flex-start; }
.invoice .inv-billto { font-size: 11.5px; color: var(--ink-800); margin: 14px 0 4px; }
.invoice .inv-billto span { color: var(--slate-500); }
.invoice .inv-sub { display: flex; justify-content: space-between; font-size: 12px; color: var(--slate-600); padding: 5px 0; }
.invoice .inv-sub span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-900); }
.problem-x { background: #fff; }
.problem-x.dark { background: var(--ink-900); overflow: visible; }
.problem-x.dark .px-title h2 .muted { color: #fff; }
.clwin .cl-think { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; font-size: 14px; color: #8a857c; }
.clwin .cl-think img { width: 18px; height: 18px; }
.clwin .cl-think span { background: linear-gradient(100deg, #b8b2a6 35%, #4b4943 50%, #b8b2a6 65%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmer 1.7s linear infinite; }
.problem-x .px-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(255,95,52,.18), transparent 58%),
    radial-gradient(56% 70% at 92% 108%, rgba(228,60,255,.16), transparent 60%),
    radial-gradient(50% 60% at 50% 120%, rgba(255,172,111,.10), transparent 60%);
  background-size: 180% 180%; animation: gdrift 22s ease-in-out infinite alternate; }
.problem-x .px-bg::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%); mask-image: linear-gradient(180deg, #000, transparent 78%); }
.problem-x .container { position: relative; z-index: 1; }
.prob-cell { position: relative; }
.prob-cell .px-cap { position: relative; }
.prob-cell .prob-n { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--brand-peach); margin-bottom: 10px; padding: 3px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; }
.problem-x.dark .px-title h2 { color: #fff; }
.problem-x.dark .px-title h2 .muted { color: #fff; }
.px-layout { display: grid; grid-template-columns: 0.82fr 1fr; gap: 64px; align-items: start; }
.problem-x .px-layout .px-head { display: flex; flex-direction: column; justify-content: center; position: sticky; top: 0; min-height: 100vh; margin: 0; }
.prob-grid { display: flex; flex-direction: column; gap: 11vh; margin: 0; padding: 92vh 0 30vh; align-items: center; }
.prob-cell { position: relative; width: 100%; max-width: 460px; transition: transform .25s ease, z-index 0s; }
.prob-cell:nth-child(1) { transform: rotate(-1.8deg); }
.prob-cell:nth-child(2) { transform: rotate(1.5deg); align-self: center; }
.prob-cell:nth-child(3) { transform: rotate(-1.1deg); align-self: center; }
.prob-cell:hover { transform: rotate(0deg) translateY(-2px); z-index: 3; }
.prob-cell .px-card { min-height: 0; padding: 22px; place-items: stretch; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
/* first card: matches the others — full frame padding, rounded window */
.prob-cell .px-card .clwin { max-width: none; min-height: 250px; }
.prob-cell .px-cap p { color: rgba(255,255,255,.6); }
.prob-cell .px-cap p b { display: block; font-size: clamp(20px,2vw,26px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; color: #fff; margin-bottom: 10px; }
@media (max-width: 860px) { .px-layout { grid-template-columns: 1fr; gap: 0; } .problem-x .px-layout .px-head { position: static; min-height: 0; margin-bottom: 30px; } .prob-grid { gap: 28px; padding: 0 0 10px; max-width: 460px; margin-inline: auto; align-items: stretch; } .prob-cell { max-width: none; } .prob-cell:nth-child(2), .prob-cell:nth-child(3) { align-self: stretch; } }
/* Stripe-style problem carousel (light) */
.problem-x { background: #fff; }
.px-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; flex-wrap: wrap; }
.px-title h2 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(30px, 3.9vw, 50px); margin: 0; color: var(--ink-900); }
.px-title h2 .muted { color: var(--slate-400); }
.px-nav { display: flex; gap: 10px; }
.px-nav button { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-900); cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-xs); transition: background .15s ease, border-color .15s ease; }
.px-nav button:hover { background: var(--surface-muted-2); border-color: var(--slate-300); }
.px-nav button svg { width: 20px; height: 20px; }
.px-stage { position: relative; }
.px-viewport { overflow: hidden; }
.px-track { display: flex; transition: transform .55s cubic-bezier(.16,1,.3,1); }
.px-slide { flex: 0 0 100%; box-sizing: border-box; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 32px; align-items: start; padding: 0 2px; }
.px-slide .px-cap { order: 0; }
.px-card { border-radius: 20px; background: linear-gradient(160deg, #FBF7F4, #EEF1F6); border: 1px solid var(--line); min-height: 380px; display: grid; place-items: center; padding: 40px; overflow: hidden; }
.px-card .clwin { width: 100%; max-width: 440px; min-height: 300px; }
.px-cap { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 0; text-align: left; }
.px-cap p { margin: 0; max-width: 100%; font-size: clamp(15px,1.4vw,18px); line-height: 1.5; color: var(--slate-500); }
.px-cap p b { display: block; font-size: clamp(25px,2.8vw,38px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-900); margin-bottom: 12px; }
.px-cap p b { color: var(--ink-900); font-weight: 600; }
.px-link { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; color: var(--brand-coral); white-space: nowrap; }
.px-link svg { width: 17px; height: 17px; }
.px-link:hover { color: var(--brand-magenta); }
.cl-dots { display: flex; gap: 7px; margin-top: 24px; }
.cl-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--slate-200); cursor: pointer; transition: width .2s ease, background .2s ease; }
.cl-dots i.on { width: 22px; background: var(--brand-coral); }
@media (max-width: 700px) { .px-slide { display: flex; flex-direction: column; gap: 18px; } .px-slide .px-cap { order: -1; flex-direction: column; gap: 14px; } .px-card { padding: 24px; min-height: 320px; } }
.clwin { flex: 1; }
.cl-label { margin-bottom: 11px; }
.cl-label .ptag { font-size: 15px; font-weight: 700; letter-spacing: .01em; text-transform: none; color: #fff; }
/* one-at-a-time carousel */
.claude-carousel { position: relative; margin-top: 34px; max-width: 560px; margin-left: auto; margin-right: auto; }
.claude-carousel .cl-viewport { overflow: hidden; }
.claude-carousel .cl-track { display: flex; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.claude-carousel .cl-slide { flex: 0 0 100%; box-sizing: border-box; padding: 0 4px; }
.claude-carousel .cl-label .ptag { font-size: clamp(24px,3.2vw,38px); font-weight: 600; letter-spacing: -0.02em; color: #fff; display: block; }
.claude-carousel .cl-label { margin-bottom: 18px; text-align: center; }
.claude-carousel .clwin { min-height: 320px; }
.cl-nav { position: absolute; top: 0; right: 4px; display: flex; gap: 8px; }
.cl-nav button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s ease; }
.cl-nav button:hover { background: rgba(255,255,255,.2); }
.cl-nav button svg { width: 19px; height: 19px; }
.cl-dots { display: flex; justify-content: center; gap: 7px; margin-top: 22px; }
.cl-dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.35); cursor: pointer; transition: width .2s ease, background .2s ease; }
.cl-dots i.on { width: 22px; background: #fff; }
.clwin { background: #F0EEE6; border: 1px solid rgba(0,0,0,.06); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-selected); display: flex; flex-direction: column; min-height: 276px; }
.clwin .cl-top { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border-bottom: 1px solid rgba(0,0,0,.06); }
.clwin .cl-top .clogo { width: 18px; height: 18px; }
.clwin .cl-top .nm { font-family: var(--font-serif); font-size: 14px; color: #3d3d3a; }
.clwin .cl-body { padding: 15px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.cl-u { align-self: flex-end; max-width: 86%; background: #fff; border: 1px solid rgba(0,0,0,.06); color: #2b2b28; padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.cl-a { align-self: flex-start; max-width: 94%; font-size: 13px; line-height: 1.5; color: #3d3d3a; display: flex; gap: 8px; }
.cl-a .star { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.cl-sys { align-self: stretch; margin-top: auto; border: 1px solid #E3C7B6; background: #FBF0E7; border-radius: 12px; padding: 12px 14px; }
.cl-sys .h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #B5471B; margin-bottom: 5px; }
.cl-sys .h svg { width: 15px; height: 15px; }
.cl-sys p { margin: 0; font-size: 12.5px; color: #93684c; line-height: 1.45; }
.cl-sys .upg { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; background: #C96442; color: #fff; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 8px; }
.clwin.invoice { background: #fff; }
.clwin.invoice .cl-top { background: #fff; }
.invoice .cl-body { gap: 0; padding: 18px; }
.invoice .inv-top { display: flex; align-items: flex-start; justify-content: space-between; }
.invoice .inv-top .co { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: #1a1a1a; }
.invoice .inv-top .co img { width: 20px; height: 20px; }
.invoice .inv-top .due { text-align: right; font-size: 11px; color: #8a8a8a; }
.invoice .inv-meta { margin-top: 4px; font-size: 11px; color: #8a8a8a; }
.invoice .inv-rows { margin-top: 16px; border-top: 1px solid #ECECEC; }
.invoice .inv-rows .r { display: flex; justify-content: space-between; font-size: 12.5px; color: #555; padding: 9px 0; border-bottom: 1px solid #F2F2F2; }
.invoice .inv-rows .r span:last-child { font-variant-numeric: tabular-nums; color: #1a1a1a; }
.invoice .inv-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; }
.invoice .inv-total .lbl { font-size: 12.5px; color: #8a8a8a; font-weight: 600; }
.invoice .inv-total .amt { font-size: 28px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.claude-foot { text-align: center; margin-top: 34px; font-family: var(--font-serif); font-size: clamp(27px,3vw,36px); color: #fff; }
.claude-foot .grad-text { font-style: italic; }
@media (max-width: 900px) { .claude-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ============================================================
   HIRE — simplified comparison (text + ✗/✓), avatar prompt
   ============================================================ */
.vs-wrap { margin-top: 34px; max-width: 1240px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 32px; align-items: start; }
/* main-menu look: glassy gray rail, borderless tabs, white active pill w/ soft ink shadow */
.vs-select { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-bottom: 0; border-top: none; position: sticky; top: 90px; padding: 5px; border-radius: 16px; background: rgba(245,247,250,0.72); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vs-tab { display: flex; align-items: center; justify-content: flex-start; gap: 11px; padding: 13px 15px; border-radius: 12px; border: 1.5px solid transparent; background: transparent; box-shadow: none; color: var(--slate-600); font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; text-align: left; width: 100%; }
.vs-tab img, .vs-tab .ico-copilot { width: 20px; height: 20px; flex: none; }
.vs-tab .ico-copilot { color: var(--ink-900); display: inline-flex; }
.vs-tab:hover { color: var(--ink-900); background: rgba(255,255,255,0.72); border-color: transparent; }
.vs-tab:hover img, .vs-tab:hover .ico-copilot { filter: grayscale(0) opacity(.85); }
.vs-tab img, .vs-tab .ico-copilot { filter: grayscale(1) opacity(.55); transition: filter .2s ease; }
.vs-tab.active { background: #fff; color: var(--ink-900); border-color: transparent; box-shadow: 0 4px 14px rgba(29,38,48,0.12); }
.vs-tab.active img, .vs-tab.active .ico-copilot { filter: none; }

.vs-tab { position: relative; }
/* auto-rotate countdown donut — quiet gray ring, fills over the 9s dwell */
.vs-tab .vt-prog, .bw-tab .vt-prog { margin-left: auto; width: 14px; height: 14px; flex: none; opacity: 0; transition: opacity .25s ease; }
.vs-tab.active .vt-prog, .bw-tab.active .vt-prog { opacity: 0.8; }
.vt-prog svg { width: 14px; height: 14px; display: block; transform: rotate(-90deg); }
.vt-prog circle { fill: none; stroke-width: 2; }
.vt-prog .t { stroke: rgba(0,0,0,0.07); }
.vt-prog .p { stroke: var(--slate-500); stroke-linecap: round; stroke-dasharray: 50.27; stroke-dashoffset: 50.27; }
.vs-tab.timing .vt-prog .p, .bw-tab.timing .vt-prog .p { stroke-dashoffset: 0; transition: stroke-dashoffset 9s linear; }
.vs-tab::before { content: none; }
.vs-tab::after { content: none; }

@media (max-width: 820px) {
  .vs-wrap { grid-template-columns: 1fr; gap: 18px; }
  .vs-select { flex-direction: row; flex-wrap: wrap; position: static; top: auto; margin-top: 0; }
  .vs-tab { width: auto; flex: 1 1 auto; justify-content: center; }
  .vs-tab .vt-prog { margin-left: 2px; }
}
.vs-task { max-width: 640px; margin: 0 auto 22px; }
.vs-task .pl { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 10px; text-align: center; }
.vs-task .ask { display: flex; align-items: center; gap: 11px; justify-content: center; }
.vs-task .ask .avatar { width: 36px; height: 36px; border-radius: 999px; overflow: hidden; flex: none; border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.vs-task .ask .avatar img { width: 100%; height: 100%; object-fit: cover; }
.vs-task .ask .bubble { background: var(--surface-muted); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 12px 16px; font-size: 15px; color: var(--ink-900); line-height: 1.7; box-shadow: var(--shadow-button); }

.vs-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; position: relative; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-selected); background: #fff; }
.vs-duo::before { content: "vs"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 6; width: 38px; height: 38px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-elevation); display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--slate-500); }
@keyframes vsIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.vs-pane { display: none; }
.vs-pane.active { display: block; }
.vs-pane.active .vs-col { animation: vsIn .42s cubic-bezier(.16,1,.3,1) both; }
.vs-pane.active .vs-col.win { animation-delay: .08s; }
/* DS streaming reasoning trace (Minded win pane) */
.m-stream { display: block; }
.m-thread.done .shimline { display: none; }
.m-trace .tline { display: inline-flex; align-items: center; gap: 9px; }
.r-trace .tline, .m-trace .tline { display: inline-flex; align-items: center; gap: 9px; }
.r-trace .tline .lb, .m-trace .tline .lb { color: var(--slate-500); display: inline-flex; }
.r-trace .tline .lb svg { width: 17px; height: 17px; stroke-width: 1.7px; }
.r-trace .tline .tt { font-family: var(--font-serif); font-size: 12.5px; color: var(--fg3); }
.r-trace .tline .cv { color: var(--slate-500); display: inline-flex; }
.r-trace .tline .cv svg { width: 15px; height: 15px; }
.m-trace .tline .lb { color: var(--slate-500); display: inline-flex; }
.m-trace .tline .lb svg { width: 17px; height: 17px; stroke-width: 1.7px; }
.m-trace .tline .tt { font-family: var(--font-serif); font-size: 12.5px; color: var(--fg3); }
.m-trace .tline .cv { color: var(--slate-500); display: inline-flex; }
.m-trace .tline .cv svg { width: 15px; height: 15px; }
.m-stream .shimline { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 12px; }
.m-stream .shimline .lb { color: var(--slate-500); display: inline-flex; }
.m-stream .shimline .lb svg { width: 16px; height: 16px; }
.think-shimmer { background: linear-gradient(100deg, var(--slate-500) 35%, var(--ink-900) 50%, var(--slate-500) 65%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmer 1.7s linear infinite; font-weight: 500; }
@keyframes shimmer { 0% { background-position: 180% 0; } 100% { background-position: -120% 0; } }
.m-trace { display: flex; flex-direction: column; }
.m-trace .step { position: relative; padding: 0 0 14px 28px; }
.m-trace .step > .ic { position: absolute; left: 0; top: 0; width: 18px; height: 18px; color: var(--slate-500); display: inline-flex; align-items: center; justify-content: center; }
.m-trace .step > .ic svg { width: 15px; height: 15px; stroke-width: 1.7px; }
.m-trace .step::before { content: ""; position: absolute; left: 8.5px; top: 21px; bottom: 0; width: 1px; background: var(--line); }
.m-trace .step:last-child::before { display: none; }
.m-trace .step .hd { font-size: 13.5px; line-height: 18px; font-weight: 500; color: var(--ink-800); }
/* browser/email extension threads: let long reasoning steps wrap (NetSuite PO line, etc.) */
.cwthread .m-trace .step .hd { white-space: normal; }
.m-trace .win { display: inline-block; animation: winblur .42s cubic-bezier(.22,.61,.25,1) both; }
/* chips that stream in keep the inline-flex chip layout (logo + label centered on the text line) — .win must not flatten them to inline-block */
.m-trace .tchip.win { display: inline-flex; vertical-align: middle; }
@keyframes winblur { from { filter: blur(7px); opacity: 0; } to { filter: blur(0); opacity: 1; } }
.m-result { opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.m-thread.done .m-result { opacity: 1; transform: none; }
.m-thread:not(.done) .m-result { display: none; }
/* DS reasoning-trace summary line — after a cwthread trace finishes, "Thinking…" becomes
   "Thought for Xs" (serif, lightbulb + chevron) and the steps collapse beneath it; click to expand */
.m-stream.summarized { display: block !important; max-height: none !important; opacity: 1 !important; margin-bottom: 0; }
.m-thread.done .m-stream.summarized .shimline { display: inline-flex; cursor: pointer; margin-bottom: 0; }
.m-stream.summarized .think-shimmer { font-family: var(--font-serif); font-weight: 400; background: none; animation: none; -webkit-text-fill-color: var(--fg3); color: var(--fg3); }
.m-stream .scv { display: none; }
.m-stream.summarized .scv { display: inline-flex; align-items: center; color: var(--slate-500); }
.m-stream.summarized .scv svg { width: 15px; height: 15px; transition: transform .2s ease; }
.m-stream.summarized.open .scv svg { transform: rotate(90deg); }
.m-stream.summarized .m-trace { overflow: hidden; max-height: 0; opacity: 0; margin: 0; transition: max-height .35s ease, opacity .25s ease; }
.m-stream.summarized.open .m-trace { max-height: 640px; opacity: 1; margin-top: 10px; }
/* bank/email answers are inline prose, not stacked blocks — keep them flowing so a bold value
   and its trailing period don't land on separate flex rows */
.cw-bank .m-result, .cw-run .m-result { display: block; }
/* DS browser-preview component */
.sbrowser { margin-top: 2px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-button); }
.sbrowser .tb { display: flex; align-items: center; gap: 7px; background: #DFE3E8; padding: 7px 10px; }
.sbrowser .tb .tab { display: inline-flex; align-items: center; gap: 6px; background: #fff; border-radius: 7px; padding: 5px 10px; font-size: 11.5px; color: var(--ink-800); box-shadow: var(--shadow-button); }
.sbrowser .tb .tab .fv { width: 14px; height: 14px; border-radius: 4px; background: var(--brand-gradient); color: #fff; font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }
.sbrowser img { width: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .think-shimmer { animation: none; -webkit-text-fill-color: var(--ink-800); } .m-result { opacity: 1; transform: none; } }
/* show-don't-tell stage + native mocks */
.vs-stage { flex: 1; display: flex; flex-direction: column; gap: 12px; }
/* uniform container height so every alternative pane is the same height (no jump on tab switch) */
.vs-col .vs-stage { min-height: 320px; }
.vs-stage .muted { color: var(--slate-500); }
.cg, .cla, .cop { display: flex; flex-direction: column; gap: 10px; }
.cg .u, .cla .u, .cop .u { align-self: flex-end; max-width: 86%; padding: 9px 13px; font-size: 13px; line-height: 1.45; border-radius: 14px; }
.cg .u { background: #ECECEC; color: #1a1a1a; }
.cla .u { background: #fff; border: 1px solid rgba(0,0,0,.06); color: #2b2b28; border-radius: 12px; }
.cop .u { background: #E8F0FB; color: #1a2733; }
.cg .a, .cla .a, .cop .a { align-self: flex-start; display: flex; gap: 8px; font-size: 13px; line-height: 1.55; }
.cg .a { color: #353740; } .cla .a { color: #3d3d3a; } .cop .a { color: #2b2b2b; }
.cg .a img, .cla .a img { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.cg .a b, .cla .a b { font-weight: 600; }
.cla .limit { display: flex; align-items: center; gap: 7px; border: 1px solid #E3C7B6; background: #FBF0E7; border-radius: 10px; padding: 9px 12px; font-size: 12px; color: #B5471B; font-weight: 600; }
.cla .limit svg { width: 14px; height: 14px; }
.cop .file { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #DCE7F5; background: #fff; border-radius: 10px; padding: 8px 12px; }
.cop .file img { width: 22px; height: 22px; } .cop .file .nm { font-size: 12px; font-weight: 600; color: var(--ink-900); }
/* Zapier-native editor canvas: dotted grid, white step cards, icon tile + status dot, vertical connector with + */
.zap { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 14px 12px; border-radius: 14px; border: 1px solid var(--line);
  background-color: #F8F7F4; background-image: radial-gradient(rgba(29,38,48,0.09) 1px, transparent 1px); background-size: 14px 14px; }
.zap .zstem { width: 1px; height: 18px; background: #C9C4BD; margin: 0 auto; }
.zap .znode { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #D9D5D0; border-radius: 9px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(29,38,48,0.05); }
.zap .znode.err { border: 1.5px solid #C13515; }
.zap .zic { position: relative; width: 36px; height: 36px; border-radius: 7px; border: 1px solid #D9D5D0; background: #fff; display: grid; place-items: center; flex: none; }
.zap .zic .zg { font-size: 16px; font-weight: 800; font-family: var(--font-sans); }
.zap .zic img { width: 20px; height: 20px; display: block; }
.zap .zdot { position: absolute; top: -6px; left: -6px; width: 15px; height: 15px; border-radius: 999px; border: 2px solid #fff; display: grid; place-items: center; }
.zap .zdot.ok { background: #1F9456; }
.zap .zdot.ok svg { width: 8px; height: 8px; color: #fff; stroke-width: 4px; }
.zap .zdot.bad { background: #C13515; color: #fff; font-size: 9.5px; font-weight: 800; line-height: 1; }
.zap .zt { font-size: 14px; font-weight: 500; color: #2D2E2E; line-height: 1.35; min-width: 0; }
.zap .zacts { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; color: #88827A; flex: none; }
.zap .zacts svg { width: 16px; height: 16px; stroke-width: 2px; }
.zap .zconn { position: relative; width: 1px; height: 38px; background: #C9C4BD; margin: 0 auto; }
.zap .zconn span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; line-height: 1; color: #6A645C; background: #F8F7F4; padding: 2px 3px; }
.zap .zconn::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom: 0; border-top: 5px solid #C9C4BD; }
.zap .zalert { display: flex; align-items: flex-start; gap: 7px; margin: 10px 2px 0; background: #FDEDEA; border: 1px solid #ECB7AB; border-radius: 7px; padding: 8px 11px; font-size: 12px; font-weight: 500; color: #A92F12; line-height: 1.4; }
.zap .zalert svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
/* Minded thinking → result */
.m-think { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--slate-600); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; box-shadow: var(--shadow-xs); }
.m-think svg { width: 15px; height: 15px; color: var(--brand-coral); }
.m-think .dots { display: inline-flex; gap: 3px; }
.m-think .dots i { width: 5px; height: 5px; border-radius: 999px; background: var(--brand-coral); animation: blink 1.4s infinite both; }
.m-think .dots i:nth-child(2) { animation-delay: .2s; } .m-think .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100% { opacity: .25 } 40% { opacity: 1 } }
.m-result { display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.m-thread.done .m-think { display: none; }
.m-thread.done .m-result { opacity: 1; transform: none; }
.m-attach { align-self: flex-start; display: inline-flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 10px 11px; background: #fff; box-shadow: var(--shadow-xs); }
.m-attach img.ft { width: 28px; height: 28px; }
.m-attach .nm { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.m-attach .sz { font-size: 11.5px; color: var(--slate-500); }
.m-dash { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-xs); }
.m-dash img { width: 100%; display: block; }
.m-dash .foot { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--slate-600); }
.m-dash .foot svg { width: 14px; height: 14px; color: var(--success-500); }
.vs-col { display: flex; flex-direction: column; gap: 14px; padding: 26px 28px; max-width: none; min-height: 420px; position: relative; z-index: 1; }
.vs-col.lose { border-right: 1px solid var(--line); }
.vs-col .vc-who { display: flex; align-items: center; gap: 9px; }
.vs-col .vc-who .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; background: #fff; border: 1px solid var(--line); }
.vs-col .vc-who .ic img { width: 22px; height: 22px; }
.vs-col .vc-who .ic .ico-copilot { width: 22px; height: 22px; display: inline-flex; color: var(--ink-900); }
.vs-col.win .vc-who .ic { background: #fff; border-color: rgba(255,95,52,.3); padding: 3px; }
.vs-col.win .vc-who .ic img { width: 100%; height: 100%; object-fit: contain; }
.vs-col .vc-who .nm { font-size: 16px; font-weight: 700; color: var(--ink-900); }
.vs-col .vc-who { padding-bottom: 14px; border-bottom: 1px solid var(--line); }


.vs-col .resp { font-size: 15px; line-height: 1.65; color: var(--slate-700); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vs-col.win .resp { font-family: var(--font-serif); color: var(--ink-900); }
.vs-col .resp .star { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.vs-col .vc-who .verdict { margin-left: auto; }
.vs-col .verdict { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vs-col .verdict .mk { width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.vs-col .verdict .mk svg { width: 12px; height: 12px; color: #fff; stroke-width: 2.8px; }
.vs-col.lose .verdict { color: var(--danger-600); }
.vs-col.lose .verdict .mk { background: var(--danger-500); }
.vs-col.win .verdict { color: var(--success-800); }
.vs-col.win .verdict .mk { background: var(--success-500); }
/* drop the negative “Broke / Didn’t do the task” labels on the alternatives (keep their space so columns stay aligned) */
.vs-col.lose .verdict { visibility: hidden; }
@media (max-width: 920px) { .vs-duo { grid-template-columns: 1fr; } .vs-duo::before { display: none; } .vs-col { min-height: 0; } .vs-col .vs-stage { min-height: 0; } .vs-col.lose { border-right: none; border-bottom: 1px solid var(--line); } }

/* ============================================================
   TESTIMONIALS — slider (DS card)
   ============================================================ */
.testi { position: relative; background: url("testi-clouds.png") center / cover no-repeat, linear-gradient(180deg, #DDEEFB, #F4FAFF); min-height: 100vh; display: flex; align-items: center; }
.testi > .container { width: 100%; }
/* DS login-page gradient panel + frosted glass testimonial cards */
.testi-panel { border-radius: 0; background: transparent; padding: clamp(26px,3.5vw,44px) 0 clamp(20px,2.6vw,30px); position: relative; overflow: visible; }.testi-panel .grain { display: none; }
.testi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; position: relative; z-index: 1; margin-bottom: 20px; flex-wrap: wrap; }
.testi-head .eyebrow { color: var(--brand-coral); opacity: 1; }
.testi-head .eyebrow::before { background: var(--brand-coral); }
.testi-head h2 { color: var(--ink-900); font-weight: 600; letter-spacing: -0.025em; font-size: clamp(30px, 3.9vw, 50px); margin: 0; line-height: 1.06; text-wrap: balance; white-space: nowrap; }
.testi-nav { display: flex; gap: 10px; }
.testi-nav button { width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink-900); cursor: pointer; display: grid; place-items: center; box-shadow: none; transition: background .15s ease, border-color .15s ease; }
.testi-nav button:hover { background: rgba(255,255,255,0.7); border-color: #fff; }
.testi-nav button svg { width: 20px; height: 20px; }
.testi-viewport { position: relative; z-index: 1; overflow: hidden; padding: 40px 0 30px; margin: -28px 0 -16px; width: 100%; }
/* desktop shows all 3 cards static — no off-screen cards to hide, so let the
   outer cards' drop shadows spill instead of being sliced by overflow:hidden */
@media (min-width: 981px) { .testi-viewport { overflow: visible; } }
.testi-head { position: relative; z-index: 3; }
.testi-dots { position: relative; z-index: 3; }
/* social-proof row under the testimonials heading (Figma node 8303-4748) */
.testi-proof { display: flex; align-items: center; justify-content: flex-start; gap: 15px; position: relative; z-index: 3; margin: 0 0 14px; font-family: var(--font-sans); }
.testi-proof__faces { display: inline-flex; }
.testi-proof__faces img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(16,24,40,.14); }
.testi-proof__faces img + img { margin-left: -14px; }
.testi-proof__txt { font-size: 24px; font-weight: 500; color: #687085; line-height: 1.4; }
.testi-proof__txt strong { font-weight: 700; color: #687085; }
/* the carousel normally slides up under the heading; with the proof row present, don't overlap it */
.testi-proof + .testi-viewport { margin-top: -8px; }
@media (max-width: 700px) {
  /* keep avatars + stat on ONE line — scale text down with viewport so it never wraps */
  .testi-proof { gap: 8px; flex-wrap: nowrap; margin-bottom: 10px; }
  .testi-proof__faces img { width: 26px; height: 26px; border-width: 2px; }
  .testi-proof__faces img + img { margin-left: -9px; }
  .testi-proof__txt { font-size: clamp(12px, 3.6vw, 14px); white-space: nowrap; }
}
.tcard { transform: none; opacity: 1; }
/* hover: lift the card 5%, go whiter, dim its siblings */
.tcard { transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease, background-color .35s ease; }
.testi-track:has(.tcard:hover) .tcard:not(:hover) { opacity: .5; }
.tcard:hover { transform: scale(1.05); background: rgba(255,255,255,0.94); z-index: 2; }
.testi-track { display: flex; align-items: stretch; gap: 24px; transition: transform .5s cubic-bezier(.16,1,.3,1); padding: 14px 4px; }
/* card — DS login testimonial: frosted white glass, inner glow, quote-first */
.tcard { position: relative; flex: 0 0 calc((100% - 48px) / 3); min-height: 420px; box-sizing: border-box; background: rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: none; border-radius: 30px; padding: clamp(24px,2.8vw,34px); box-shadow: inset 0 0 65px rgba(255,255,255,0.9), 0 15px 35px 5px rgba(31,31,31,0.05), 0 10px 25px rgba(0,0,0,0.09); display: flex; flex-direction: column; align-items: stretch; text-align: left; min-height: 0; }
.tcard .mstat { align-self: flex-start; display: block; white-space: nowrap; margin: 0 0 20px; font-family: var(--font-sans); font-weight: 700; font-size: clamp(15px,1.5vw,18px); line-height: 1; letter-spacing: -0.02em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tcard .mstat .n { font-size: clamp(40px,4.4vw,54px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin-right: 5px; }
.tcard .quote { font-family: var(--font-sans); font-weight: 600; font-size: clamp(17px,1.8vw,22px); line-height: 1.45; letter-spacing: -0.01em; color: var(--ink-900); margin: 0 0 24px; flex: 1; max-width: none; }
.tcard .who { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 0; border: none; }
.tcard .who .ava { width: 52px; height: 52px; border-radius: 999px; overflow: hidden; background: #fff; margin-bottom: 0; flex: none; }
.tcard .who .ava img { width: 100%; height: 100%; object-fit: cover; }
.tcard .wmeta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tcard .nrow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tcard .who .nm { font-size: 15.5px; font-weight: 600; color: var(--ink-900); }
.tcard .nrow .dt { display: none; }
.tcard .who .role { font-size: 15px; color: var(--fg3); }
.tcard .tlogo { display: flex; align-items: center; justify-content: flex-start; margin: 0; min-height: 0; }
.tcard .tlogo img { width: auto; display: block; }
.testi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; position: relative; z-index: 1; }
.testi-dots i { width: 9px; height: 9px; border-radius: 999px; background: rgba(29,38,48,0.16); cursor: pointer; transition: width .25s ease, background .25s ease; }
.testi-dots i.on { width: 40px; background: var(--slate-400); }
@media (max-width: 980px) { .tcard { flex-basis: calc((100% - 24px) / 2); min-height: 380px; } }
@media (max-width: 600px) { .tcard { flex-basis: 100%; min-height: 0; } .testi-head h2 br { display: none; } .testi-head h2 { white-space: normal; }
  /* slim side padding gives the single card's drop shadow room inside the clip
     without resizing/shifting the viewport — an earlier width+negative-margin
     hack pushed the slider off the right edge. Extra bottom padding for the
     downward shadow. */
  .testi-viewport { padding-left: 16px; padding-right: 16px; padding-bottom: 44px; } }

/* ============================================================
   PRICING — cleaner cost comparison
   ============================================================ */
.pricing { background: var(--surface-muted); }
.cost { margin-top: 34px; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(30px,4.5vw,56px); align-items: center; padding: 12px 0 4px; }
.cost .c-left .eyebrow { margin-bottom: 12px; }
.cost .c-left .ch { font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(30px, 3.9vw, 50px); margin: 0 0 20px; color: var(--ink-900); }
.cost .c-left .ch, .cost .c-left .big, .cost .c-left .sub { opacity: 0; transform: translateY(26px); }
.cost.is-visible .c-left .ch { animation: chRise .85s cubic-bezier(.16,1,.3,1) .05s forwards; }
.cost.is-visible .c-left .big { animation: chRise .85s cubic-bezier(.16,1,.3,1) .22s forwards; }
.cost.is-visible .c-left .sub { animation: chRise .85s cubic-bezier(.16,1,.3,1) .36s forwards; }
@keyframes chRise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cost .c-left .ch, .cost .c-left .big, .cost .c-left .sub { opacity: 1; transform: none; animation: none !important; } }
.cost .c-left .pre { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 6px; }
.cost .c-left .big { font-size: clamp(46px, 6vw, 70px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cost .c-left .sub { font-size: 14px; color: var(--slate-600); margin-top: 10px; max-width: 270px; line-height: 1.5; }
.cost .cc-title { font-size: 13px; color: var(--slate-600); margin: 16px 0 0; text-align: center; }
.cost .cc-title b { color: var(--ink-900); font-weight: 600; }
.cmp { display: flex; flex-direction: column; gap: 16px; }
.cmp .row .rh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cmp .row .rh .who { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-900); }
.cmp .row .rh .who .logos { display: inline-flex; align-items: center; }
.cmp .row .rh .who .logos img, .cmp .row .rh .who .logos .ico-copilot { width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px #fff; margin-left: -5px; display: inline-flex; }
.cmp .row .rh .who .logos img:first-child, .cmp .row .rh .who .logos .ico-copilot:first-child { margin-left: 0; }
.cmp .row .rh .amt { font-size: 16px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.cmp .row .track { height: 16px; border-radius: 999px; background: var(--surface-muted-2); overflow: hidden; }
.cmp .row .track i { display: block; height: 100%; border-radius: 999px; transition: width .9s cubic-bezier(.16,1,.3,1); }
.cmp .row.them .track i { background: var(--slate-300); }
.cmp .row.us .track i { background: var(--brand-gradient); }
.cmp .row.us .rh .who { color: var(--brand-coral); }
@media (max-width: 760px) { .cost { grid-template-columns: 1fr; gap: 22px; padding: 6px 0 0; } }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; align-items: stretch; }
.tier { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, opacity .25s ease; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-elevation); padding: 16px; display: flex; flex-direction: column; }
.tier.feat-tier { border-color: rgba(255,95,52,.32); box-shadow: var(--shadow-selected); }
/* head — price left · complexity right, one line */
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tier-head .price { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier-head .price small { font-size: 12px; font-weight: 500; color: var(--slate-500); margin-left: 3px; }
.tier-head .lvl { margin-bottom: 0 !important; }
.tier .lvl { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--slate-600); margin-bottom: 14px; }
.tier .lvl .bars { display: inline-flex; gap: 3px; align-items: flex-end; }
.tier .lvl .bars i { width: 5px; border-radius: 2px; background: var(--slate-200); }
.tier .lvl .bars i.on { background: var(--brand-coral); }
/* messages animate in; Minded shows a writing indicator first */
.tier .thread .msg { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.tier .thread .msg.shown { opacity: 1; transform: none; }
.tier .typing { display: inline-flex; align-items: center; gap: 5px; padding: 8px 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; width: fit-content; font-size: 12.5px; color: var(--slate-500); }
.tier .typing i { width: 5px; height: 5px; border-radius: 999px; background: var(--slate-400); animation: tierTyping 1.1s ease-in-out infinite; }
.tier .typing i:nth-child(3) { animation-delay: .15s; }
.tier .typing i:nth-child(4) { animation-delay: .3s; }
@keyframes tierTyping { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateY(-3px); opacity: 1; } }
.tier .msg.minded.typing-on .body > :not(.typing) { display: none; }
.tier .msg .avatar { width: 26px; height: 26px; }
.tier .msg.user { justify-content: flex-start; }
.tier .msg.user .avatar { display: grid; }
.tier .msg.user .avatar .face { border-radius: 999px; }
.tier { transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .35s ease, box-shadow .35s ease, border-color .35s ease; }
.tier:hover { transform: scale(1.05); box-shadow: var(--shadow-selected); border-color: var(--line-strong); z-index: 2; position: relative; }
.tiers:has(.tier:hover) .tier:not(:hover) { opacity: .5; }
/* tier cards are STATIC — no entrance / typing / streaming animation; hover only (like testimonials) */
.tier .lvl, .tier .thread, .tier .tier-head, .tier .save-rate { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
.tier .thread .msg { opacity: 1 !important; transform: none !important; transition: none !important; }
.tier .m-stream { display: none !important; }
.tier .m-result { display: flex !important; opacity: 1 !important; transform: none !important; }
.tier .typing { display: none !important; }
.tier .msg.minded.typing-on .body > :not(.typing) { display: revert !important; }
.tier .msg.minded .text { font-size: 14.5px; }
.tier .t-meta { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 7px; }
.tier .t-meta .mp { font-size: 11.5px; font-weight: 500; color: var(--slate-800); background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 12px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; }
.tier .t-meta .mp svg { width: 12px; height: 12px; color: var(--success-500); }
.tier .you-pay { display: flex; align-items: baseline; gap: 7px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.tier .you-pay .amt { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink-900); }
.tier .you-pay .per { font-size: 12.5px; color: var(--slate-500); }
.tier .you-pay .est { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--slate-600); background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 12px; padding: 3px 9px; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* ============================================================
   EXPERTS — side-by-side like hero
   ============================================================ */
.exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: center; margin-top: 8px; }
.exp-left { display: flex; flex-direction: column; justify-content: center; position: relative; min-height: 100%; }
.exp-left .eyebrow { justify-content: flex-start; }
.exp-left h2 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.03; font-size: clamp(30px, 3.9vw, 50px); margin: 0; color: var(--ink-900); text-wrap: balance; }
.exp-left .lead { margin-top: 16px; }
.exp-left .exp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.exp-left .exp-stats { display: flex; gap: 10px; margin-top: 28px; flex-wrap: nowrap; }
.exp-left .exp-stats .st { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-xs); }
.exp-left .exp-stats .st .si { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--peach-tint); }
.exp-left .exp-stats .st .si svg { width: 15px; height: 15px; color: var(--brand-coral); }
.exp-left .exp-stats .st .v { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); line-height: 1.1; white-space: nowrap; }
.exp-left .exp-stats .st .k { font-size: 10.5px; color: var(--slate-500); margin-top: 2px; white-space: nowrap; }
@media (max-width: 520px) { .exp-left .exp-stats .st { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* experts card — thread top-anchored: first message holds the top (no fade), the
   conversation grows below it and pins to the bottom once it overflows (JS) */
.exp-card { border-radius: 22px; padding: 22px; background: linear-gradient(165deg, #FBF7F4 0%, #F3F5F9 100%); border: 1px solid var(--line); box-shadow: var(--shadow-elevation); overflow: hidden; }
.exp-card .thread { flex: 1; min-height: 0; gap: 13px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
/* the top fade is added only once the thread has scrolled (.is-scrolled, set in JS):
   the first message shows with a clean edge, then fades as it's pushed up off the top */
.exp-card.is-scrolled .thread {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 100%); }
/* compact message spacing so the full /human story fits the card */
.exp-card .msg { gap: 10px; }
.exp-card .msg .avatar { width: 36px; height: 36px; }
.exp-card .msg .mhead { margin-bottom: 2px; }
.exp-card .m-result .text, .exp-card .msg .text { line-height: 1.45; }
.exp-card .approve { margin-top: 9px; padding: 10px 12px; gap: 8px 10px; }
.exp-card .approve .avastack img { width: 32px; height: 32px; }
.exp-card .approve .ok { height: 32px; padding: 0 13px; }
.exp-card .wa-solved { margin-top: 9px; padding: 10px 12px; }
.exp-card .wa-solved .ic { width: 38px; height: 38px; }
.exp-composer { margin-top: 14px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; padding: 11px 11px 11px 15px; box-shadow: var(--shadow-xs); }
.exp-composer .typed { font-size: 14px; color: var(--ink-900); }
.exp-composer .caret { width: 1.5px; height: 16px; background: var(--brand-coral); animation: caret 1.1s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
.exp-composer .send { margin-left: auto; width: 30px; height: 30px; border-radius: 999px; background: #404040; color: #fff; display: grid; place-items: center; }
.exp-composer .send svg { width: 15px; height: 15px; }
.approve { margin-top: 12px; border: 1px solid rgba(255,95,52,.3); background: #fff; border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow-xs); }
.approve .ah { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--slate-600); margin-bottom: 11px; }
.approve .ah svg { width: 16px; height: 16px; color: var(--brand-coral); }
.approve .arow { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.approve .arow .price { display: flex; align-items: baseline; gap: 7px; }
.approve .arow .price .amt { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink-900); }
.approve .arow .price .lbl { font-size: 12px; color: var(--slate-500); }
.approve .ok { display: inline-flex; align-items: center; gap: 6px; background: var(--success-500); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 8px; cursor: pointer; border: none; }
.approve .ok svg { width: 15px; height: 15px; }
.approve.approved { border-color: rgba(44,168,127,.4); background: rgba(44,168,127,.06); }
.approve .approved-tag { display: none; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--success-800); }
.approve .approved-tag svg { width: 15px; height: 15px; }
.approve.approved .btns { display: none; }
.approve.approved .approved-tag { display: inline-flex; }
.exp-joined { display: flex; align-items: center; gap: 9px; margin: 8px 0 2px; font-size: 12.5px; color: var(--slate-500); }
.exp-joined::before, .exp-joined::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.exp-joined .who { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.exp-joined .who img { width: 22px; height: 22px; border-radius: 999px; }
.exp-joined b { color: var(--ink-900); font-weight: 600; }
@media (max-width: 860px) { .exp-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   FINAL CTA (dark)
   ============================================================ */
.final { text-align: center; min-height: 70vh; display: flex; align-items: center; }
.final-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.final::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(20,26,33,.72), rgba(20,26,33,.58)); pointer-events: none; }
.final .container { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.final-mascots { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.final-mascots img { position: absolute; }
.final-mascots .m2 { right: 6%; bottom: -8px; width: 132px; filter: drop-shadow(0 18px 26px rgba(0,0,0,.4)); animation: fly 11s ease-in-out infinite; }
.final h2 { font-size: clamp(30px, 3.9vw, 50px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; margin: 0; color: #fff; text-wrap: balance; }
.final p { font-size: clamp(15px,1.5vw,18px); margin: 16px auto 0; max-width: 520px; color: rgba(255,255,255,.7); }
.final .final-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.final .trust-row { justify-content: center; margin-top: 20px; }
@media (max-width: 760px) { .final-mascots { display: none; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: 52px 0 36px; }
/* footer brand is a plain logo+wordmark, not the glassy nav pill */
.footer .brand { background: none; border: none; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer .fblurb { max-width: 280px; font-size: 14px; color: var(--slate-600); margin: 16px 0 0; line-height: 1.5; }
.footer .compliance { margin-top: 18px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-cols .col h5 { font-size: 13px; font-weight: 600; color: var(--ink-900); margin: 0 0 14px; }
.footer-cols .col a { display: block; font-size: 14px; color: var(--slate-600); margin-bottom: 10px; }
.footer-cols .col a:hover { color: var(--ink-900); }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--slate-500); }

/* ============================================================
   USE CASES — role tabs + capability panel + connectors
   ============================================================ */
.usecase { position: relative; background: transparent; border: none; box-shadow: none; border-radius: 0; overflow: visible; padding: 0; }
.usecase .grain { display: none; }
.uc-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: clamp(40px,5vw,72px); align-items: start; }
.uc-left { display: flex; flex-direction: column; }
.uc-left .eyebrow { color: var(--brand-coral); opacity: 1; }
.uc-left .eyebrow::before { background: var(--brand-coral); }
.uc-left h2 { color: var(--ink-900); font-weight: 600; letter-spacing: -0.035em; font-size: clamp(30px, 3.9vw, 50px); line-height: 1.02; margin: 0 0 30px; text-wrap: balance; }
/* main-menu look: glassy gray rail, borderless tabs, white active pill w/ soft ink shadow */
.uc-tabs { display: flex; flex-direction: column; gap: 4px; padding: 5px; border-radius: 16px; background: rgba(245,247,250,0.72); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.uc-tab { display: flex; align-items: center; justify-content: flex-start; gap: 11px; padding: 13px 15px; border-radius: 12px; border: 1.5px solid transparent; background: transparent; box-shadow: none; color: var(--slate-600); font-family: var(--font-sans); font-size: 15px; font-weight: 600; cursor: pointer; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease; text-align: left; width: 100%; }
.uc-tab > svg { width: 20px; height: 20px; flex: none; }
.uc-tab:hover { color: var(--ink-900); background: rgba(255,255,255,0.72); border-color: transparent; }
.uc-tab.active { background: #fff; border-color: transparent; color: var(--ink-900); box-shadow: 0 4px 14px rgba(29,38,48,0.12); }
.uc-tab.active > svg { color: var(--ink-900); }
.uc-tab .vt-prog { margin-left: auto; width: 14px; height: 14px; flex: none; opacity: 0; transition: opacity .25s ease; }
.uc-tab.active .vt-prog { opacity: 0.8; }
.uc-cta { margin-top: 30px; display: flex; justify-content: center; }
.uc-cta-desktop { margin-top: 22px; justify-content: flex-start; }
.uc-cta-mobile { display: none; }
@media (max-width: 860px) {
  .uc-cta-desktop { display: none; }
  .uc-cta-mobile { display: flex; }
}
.uc-panel { position: relative; border-radius: 22px; background: var(--surface-muted); border: 1px solid var(--line); box-shadow: inset 0 0 60px rgba(255,255,255,0.7), 0 18px 40px rgba(120,30,50,.16); padding: clamp(22px,2.4vw,32px); }
.uc-pane { display: none; }
.uc-pane.active { display: block; animation: vsIn .4s cubic-bezier(.16,1,.3,1) both; }
.uc-pane .uc-lead { font-weight: 600; font-size: clamp(25px,2.5vw,36px); line-height: 1.22; letter-spacing: -0.02em; color: var(--ink-900); margin: 0 0 24px; text-wrap: pretty; }
.uc-caps { display: grid; grid-template-columns: 1fr; gap: 0; }
.uc-cap { border-bottom: 1px solid var(--line); padding: 14px 0; position: relative; }
.uc-cap::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ink-900); z-index: 2; }
.uc-cap.timing::after { width: 100%; transition: width 4.5s linear; }
.uc-cap:first-child { padding-top: 4px; }
.uc-cap:last-child { border-bottom: none; }
.uc-cap .ct { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 400; color: var(--ink-900); margin-bottom: 0; cursor: pointer; }
.uc-cap .ct .chev { margin-left: auto; width: 16px; height: 16px; color: var(--slate-400); transition: transform .25s ease; flex: none; }
.uc-cap .ct .chev svg { width: 16px; height: 16px; }
.uc-cap.open .ct .chev { transform: rotate(180deg); }
.uc-cap .ct .ci { width: 26px; height: 26px; border-radius: 8px; background: var(--peach-tint); display: grid; place-items: center; flex: none; }
.uc-cap .ct .ci svg { width: 15px; height: 15px; color: var(--brand-coral); stroke-width: 2px; }
.uc-works { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; font-size: 13.5px; color: var(--slate-600); }
.uc-rot { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.uc-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; box-shadow: var(--shadow-button); flex: none; }
.uc-rot .rt-ic { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 800; flex: none; }
.uc-cap p { display: none !important; }
.uc-cap .ct { cursor: default; }
.uc-cap .ct .chev { display: none; }
.uc-panel-cta { margin-top: 20px; }
.uc-panel-cta .btn { width: 100%; }
.uc-cap p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--slate-600); max-height: 0; opacity: 0; overflow: hidden; }
/* (connectors strip merged into .uc-works-host) */
@media (max-width: 860px) { .uc-grid { grid-template-columns: 1fr; gap: 22px; } .uc-caps { grid-template-columns: 1fr; } }

/* full-bleed sticky split: left content / right gradient stage; scroll advances the 4 roles */
#usecases { padding: 0; }
#usecases > .container { max-width: none; padding: 0; min-height: 280vh; }
#usecases .usecase { position: sticky; top: 0; height: 100vh; min-height: 0; overflow: hidden; display: flex; padding-top: clamp(28px, 4.5vh, 64px); }
#usecases .uc-grid { flex: 1; width: 100%; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
#usecases .uc-left { justify-content: flex-start; padding: clamp(70px, 14vh, 150px) clamp(28px, 4.5vw, 84px) clamp(40px, 7vh, 90px); max-width: 660px; margin-left: auto; width: 100%; }
#usecases .uc-right { display: flex; }
#usecases .uc-stage { flex: 1; aspect-ratio: auto; height: 100%; min-height: 0; border-radius: 0; border: none; box-shadow: none; justify-content: center; padding: clamp(28px, 4vh, 56px) clamp(28px, 4vw, 72px); }
#usecases .uc-stage > .dsbox, #usecases .uc-stage > .uc-sugg, #usecases .uc-stage > .uc-works-host { width: min(100%, 620px); margin-left: auto; margin-right: auto; }
#usecases .dsbox { margin-top: auto; } /* auto top + auto on works-host = composer centers in the free space */
#usecases .dsbox-type { height: 4.8em; min-height: 0; overflow: hidden; } /* fixed 3-line height (line-height 1.6 × 3) — no grow/shrink as the prompt types in */
@media (max-width: 860px) {
  #usecases > .container { min-height: 0; }
  #usecases .usecase { position: static; height: auto; min-height: 0; overflow: visible; }
  #usecases .uc-stage { min-height: 0; height: auto; padding: 28px; }
  #usecases .uc-left { max-width: none; padding: 40px 28px 8px; }
}

/* ============================================================
   ASK AI — what AI has to say
   ============================================================ */
.askai-section { background: #fff; padding: clamp(40px,6vh,72px) 0; }
.askai { position: relative; border-radius: 30px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 460px; background: var(--brand-gradient); background-size: 200% 200%; animation: gdrift 20s ease-in-out infinite alternate; box-shadow: 0 30px 70px rgba(228,60,255,.16), 0 20px 50px rgba(255,95,52,.16); }
.askai-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 380px at var(--mx, 50%) var(--my, 18%), rgba(255,95,52,.30), transparent 60%), radial-gradient(46% 46% at 84% 92%, rgba(228,60,255,.18), transparent 64%), radial-gradient(40% 40% at 12% 88%, rgba(255,172,111,.14), transparent 62%); background-size: 180% 180%; animation: gdrift 22s ease-in-out infinite alternate; }
.askai .inner { position: relative; z-index: 2; text-align: center; color: #fff; padding: 64px 28px; max-width: 720px; }
.askai-wm { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; }
.askai-wm span { font-family: var(--font-wordmark, var(--font-sans)); font-weight: 800; font-size: 34vw; line-height: 1; letter-spacing: -0.04em; color: rgba(255,255,255,.08); white-space: nowrap; }
.askai-waves { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(60px); }
.askai-waves .wv { position: absolute; border-radius: 50%; opacity: .42; will-change: transform; }
.askai-waves .wv1 { width: 460px; height: 460px; left: 4%; top: -10%; background: radial-gradient(circle, #FF5F34, transparent 68%); }
.askai-waves .wv2 { width: 520px; height: 520px; right: 2%; top: 6%; background: radial-gradient(circle, #E43CFF, transparent 68%); }
.askai-waves .wv3 { width: 400px; height: 400px; left: 26%; bottom: -14%; background: radial-gradient(circle, #FFAC6F, transparent 68%); }
.askai-waves .wv4 { width: 360px; height: 360px; right: 22%; bottom: -8%; background: radial-gradient(circle, #2BC4C9, transparent 70%); opacity: .3; }
.askai-waves .wv5 { width: 300px; height: 300px; left: 44%; top: 30%; background: radial-gradient(circle, #FF5F34, transparent 68%); opacity: .26; }
.askai-waves .wv6 { width: 340px; height: 340px; left: -6%; bottom: 18%; background: radial-gradient(circle, #E43CFF, transparent 70%); opacity: .28; }
.askai .pre { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 14px; }
.askai h2 { font-weight: 600; letter-spacing: -0.03em; font-size: clamp(30px, 3.9vw, 50px); line-height: 1.02; margin: 0; color: #fff; text-wrap: balance; }
.askai .sub { font-size: clamp(15px,1.5vw,18px); color: rgba(255,255,255,.82); margin: 16px auto 0; max-width: 440px; line-height: 1.5; padding: 0 12px; }
.ai-prompt { margin: 38px auto 0; max-width: 620px; border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,0.12); padding: 22px 22px 16px; text-align: left; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease; }
.ai-prompt:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.3); background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06)); box-shadow: 0 36px 80px rgba(0,0,0,.46), 0 0 0 1px rgba(255,95,52,.25), inset 0 1px 0 rgba(255,255,255,0.18); }
.ai-prompt .ap-q { font-size: clamp(17px,1.8vw,21px); font-weight: 500; line-height: 1.4; color: #fff; letter-spacing: -0.01em; }
.ai-prompt .ap-bar { display: flex; align-items: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.ai-prompt .ap-hint { font-size: 12.5px; color: rgba(255,255,255,.5); font-weight: 500; }
.ai-prompt .ap-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-prompt .ap-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-size: 13.5px; font-weight: 600; transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.ai-prompt .ap-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.32); transform: translateY(-1px); }
.ai-prompt .ap-btn img { width: 17px; height: 17px; background: transparent; filter: brightness(0) invert(1); }
.ai-prompt .ap-send { margin-left: auto; width: 38px; height: 38px; border-radius: 12px; background: var(--brand-gradient-cta); background-size: 180% 180%; animation: gdrift 12s ease-in-out infinite alternate; display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-glow); }
.ai-prompt .ap-send svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .ai-prompt .ap-send { display: none; } .askai-wm span { font-size: 52vw; } }

/* ---- cost: vertical bar chart ----------------------------- */
.bars-v { display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px,0.5vw,5px); height: 184px; }
.barcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.barcol .val { font-size: 14px; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.barcol .bar { width: 100%; max-width: 46px; border-radius: 9px 9px 0 0; background: var(--slate-200); transition: height .9s cubic-bezier(.16,1,.3,1); }
.barcol.us .bar { background: var(--brand-gradient); }
.barcol .lbl { display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--slate-600); font-weight: 600; white-space: nowrap; }
.barcol .lbl img { width: 22px; height: 22px; }
.barcol .lbl.mind img { width: 24px; height: 24px; }
.barcol.us .lbl { color: var(--brand-coral); }

/* ---- pricing: saving rate instead of $ range ------------- */
.tier .save-rate { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; padding-top: 0; border-top: none; }
.tier .save-rate .pc { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tier .save-rate .lbl { font-size: 12.5px; color: var(--slate-500); }
.tier .save-rate .est { margin-left: auto; align-self: center; font-size: 12.5px; font-weight: 700; color: var(--ink-900); background: var(--slate-100); border: 1px solid var(--slate-200); border-radius: 12px; padding: 4px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tier .save-rate .est small { font-weight: 500; color: var(--slate-500); margin-left: 2px; }

/* ---- comparison: response as chat bubble (consistent) ----- */
.vs-col .resp { padding: 16px 18px; border-radius: 4px 16px 16px 16px; font-size: 14.5px; }
.vs-col.lose .resp { background: var(--surface-muted); border: 1px solid var(--line); }
.vs-col.win .resp { background: linear-gradient(155deg,#FFF4EC,#FFF8FB); border: 1px solid rgba(255,95,52,.22); }
/* native competitor surfaces */
.vs-col.chatgpt .resp { background: #F7F7F8; border: 1px solid var(--line); color: #353740; }
.vs-col.chatgpt .vc-who .ic { background: #fff; }
.vs-col.claude .resp { background: #F0EEE6; border: 1px solid rgba(0,0,0,.07); color: #3d3d3a; }
.vs-col.claude .vc-who .ic { background: #F0EEE6; border-color: rgba(0,0,0,.08); }
.vs-col.claude .resp .star { width: 14px; height: 14px; vertical-align: -2px; margin-right: 5px; }
.vs-col.zapier .resp { background: #FFF8F3; border: 1px solid #FFE2D2; color: #7c4a2b; }
.vs-col.zapier .vc-who .ic { background: #FFF7F2; border-color: #FFE2D2; }
.vs-col.copilot .resp { background: #EFF4FC; border: 1px solid #DCE7F5; color: #2a3441; }
.vs-col.copilot .vc-who .ic { background: #fff; }
.vs-col.zapier .resp .slash { background: #FBE6E6; color: var(--danger-600); white-space: normal; overflow-wrap: anywhere; }

/* ---- experts: app connect/approve widget + animation ------ */
.approve { display: flex; align-items: center; gap: 12px; margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 11px 13px; box-shadow: var(--shadow-xs); }
.approve .wa-ic { width: 38px; height: 38px; border-radius: 10px; background: #25D366; display: grid; place-items: center; flex: none; }
.approve .wa-ic svg { width: 21px; height: 21px; color: #fff; }
.approve .ainfo { flex: 1; min-width: 0; }
.approve .ainfo .t { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.approve .ainfo .s { font-size: 12px; color: var(--slate-500); margin-top: 1px; }
.approve .ok { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-gradient-cta); background-size: 180% 180%; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px; cursor: pointer; border: none; box-shadow: var(--shadow-glow); }
.approve .ok svg { width: 15px; height: 15px; }
.approve .approved-tag { display: none; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--success-800); }
.approve .approved-tag svg { width: 16px; height: 16px; }
.approve.approved { border-color: rgba(44,168,127,.4); background: rgba(44,168,127,.06); }
.approve.approved .wa-ic { background: var(--success-500); }
.approve.approved .ok { display: none; }
.approve.approved .approved-tag { display: inline-flex; }
/* preparing-quote thinking pill */
.exp-prep { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--slate-500); background: var(--surface-muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; }
.exp-prep svg { width: 14px; height: 14px; color: var(--brand-coral); animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* whatsapp solved notification */
.wa-solved { margin-top: 12px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 11px 14px; box-shadow: var(--shadow-elevation); }
.wa-solved .ic { width: 36px; height: 36px; border-radius: 999px; background: #25D366; display: grid; place-items: center; flex: none; position: relative; }
.wa-solved .ic svg { width: 20px; height: 20px; color: #fff; }
.wa-solved .b .t { font-size: 13px; font-weight: 600; color: var(--ink-900); display: flex; align-items: center; gap: 6px; }
.wa-solved .b .t .chk { color: var(--success-500); width: 15px; height: 15px; }
.wa-solved .b .s { font-size: 12px; color: var(--slate-500); margin-top: 1px; }
.wa-solved .time { margin-left: auto; font-size: 11px; color: var(--slate-400); white-space: nowrap; }
/* animated reveal for the experts sequence — hidden steps take NO layout space,
   so visible messages aren't pushed up and the card is never left half-empty */
.exp-step:not(.show) { display: none; }
.exp-step.show { animation: expStepIn .45s ease both; }
@keyframes expStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- compliance: stacked grey badge (login kit) ---- */
.trust-row { display: flex; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.trust-row.hero-trust { margin-top: 26px; gap: 34px; }
.trust-stack { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; color: #B6B6B6; }
.trust-stack svg { width: 22px; height: 22px; stroke-width: 1.6px; color: #B6B6B6; }
.trust-stack .l { font-size: 14px; font-weight: 700; line-height: 1.4; color: #B6B6B6; }
.trust-stack .s { font-size: 10px; font-weight: 400; line-height: 1.4; color: #B6B6B6; }
.trust-stack.on-dark { color: rgba(255,255,255,.6); }
.trust-stack.on-dark .l, .trust-stack.on-dark .s { color: rgba(255,255,255,.62); }
.footer .compliance { gap: 34px; }

/* ---- streaming reasoning trace (hero flow) ---- */
.flowcard .r-stream { margin-top: 2px; }
.flowcard .r-stream.hide { display: none; }
.flowcard .shimline { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; margin-bottom: 11px; }
.flowcard .shimline .lb { color: var(--brand-coral); display: inline-flex; }
.flowcard .shimline .lb svg { width: 16px; height: 16px; }
.think-shimmer { background: linear-gradient(100deg, var(--slate-500) 35%, var(--ink-900) 50%, var(--slate-500) 65%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmer 1.7s linear infinite; font-weight: 500; }
@keyframes shimmer { 0% { background-position: 180% 0; } 100% { background-position: -120% 0; } }
.r-trace { display: flex; flex-direction: column; }
.r-step { position: relative; padding: 0 0 13px 27px; }
.r-step > .ic { position: absolute; left: 0; top: 0; width: 18px; height: 18px; color: var(--slate-500); display: inline-flex; align-items: center; justify-content: center; }
.r-step > .ic svg { width: 15px; height: 15px; stroke-width: 1.7px; }
.r-step::before { content: ""; position: absolute; left: 8.5px; top: 21px; bottom: 0; width: 1px; background: var(--line-strong); }
.r-step:last-child::before { display: none; }
.r-step .hd { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-900); min-height: 18px; }
.r-step .body { margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--slate-600); }
.r-step .body .tchip { background: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.8); font-size: 11.5px; }
.win { display: inline-block; animation: win .42s cubic-bezier(.22,.61,.25,1) both; }
@keyframes win { from { filter: blur(7px); opacity: 0; } to { filter: blur(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .think-shimmer { animation: none; -webkit-text-fill-color: var(--ink-900); } .win { animation: none; } }


/* ---- scroll reveal ---------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal].reveal-final { opacity: 1 !important; transform: none !important; transition: none !important; }
/* staggered children — headlines settle in pieces as the section enters the frame */
.section-head[data-reveal] .eyebrow, .section-head[data-reveal] h2, .section-head[data-reveal] .lead,
.cost[data-reveal] .cc-title, .cost[data-reveal] .cc-sub,
.exp-grid .exp-left > * { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.section-head[data-reveal].is-visible .eyebrow, .cost[data-reveal].is-visible .cc-title, .exp-grid.is-visible .exp-left > *:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
.section-head[data-reveal].is-visible h2, .cost[data-reveal].is-visible .cc-sub, .exp-grid.is-visible .exp-left > *:nth-child(2) { opacity: 1; transform: none; transition-delay: .16s; }
.section-head[data-reveal].is-visible .lead, .exp-grid.is-visible .exp-left > *:nth-child(3) { opacity: 1; transform: none; transition-delay: .28s; }
.exp-grid.is-visible .exp-left > *:nth-child(n+4) { opacity: 1; transform: none; transition-delay: .38s; }
[data-reveal].reveal-final .eyebrow, [data-reveal].reveal-final h2, [data-reveal].reveal-final .lead,
[data-reveal].reveal-final .cc-title, [data-reveal].reveal-final .cc-sub, .exp-grid.reveal-final .exp-left > * { opacity: 1 !important; transform: none !important; transition: none !important; }
/* exp-cta buttons sit under .exp-left[data-reveal] (not .exp-grid), so the
   .exp-grid.is-visible stagger never reaches them and they were stuck at
   opacity:0 — reveal them with their column instead. */
.exp-left[data-reveal].is-visible .exp-cta { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transition-delay: .38s; }
.exp-left[data-reveal].reveal-final .exp-cta { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition-duration: .01s; }
  .section-head[data-reveal] .eyebrow, .section-head[data-reveal] h2, .section-head[data-reveal] .lead,
  .cost[data-reveal] .cc-title, .cost[data-reveal] .cc-sub, .exp-grid .exp-left > * { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero-panel, .testi-panel, .btn-cta, .dark::before { animation: none !important; }
  .hero-mascot, .final-mascots img, .testi-panel .grain { animation: none !important; }
  .anim-thread .msg, .tier .thread .msg { opacity: 1; transform: none; }
  .exp-composer .caret { animation: none; }
}

/* ============================================================
   GLASS CHAT FLOW — latest DS
   Frosted bubbles (name+time inside), serif AI voice, streaming
   thinking trace that auto-collapses, glass file cards + Preview.
   ============================================================ */
/* branded gradient stage behind every chat so the frost reads */
.gstage, .exp-card, .vs-col.win {
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,0.55), transparent 55%),
    radial-gradient(130% 130% at 100% 100%, rgba(228,60,255,0.34), transparent 55%),
    linear-gradient(135deg, #FFF4EC 0%, #FBEAF6 100%);
}
.exp-card { border-color: rgba(255,255,255,0.75); }
.vs-col.win .vc-who { border-bottom-color: rgba(255,255,255,0.7); }
.vs-col.win .vc-who .ic { border-color: rgba(255,255,255,0.9); box-shadow: 0 2px 8px rgba(29,38,48,0.12); }

/* message shell — DS glass bubble */
.thread { gap: 20px; }
.msg { gap: 12px; }
.msg .avatar { width: 44px; height: 44px; border: none; box-shadow: 0 3px 10px rgba(29,38,48,0.22); }
.msg .avatar.minded { overflow: hidden; background: #fff; border: 1px solid var(--line); }
.msg .avatar.minded > img { width: 72%; height: 72%; object-fit: contain; border-radius: 999px; }
.msg .avatar .badge { right: -3px; bottom: -3px; width: 21px; height: 21px; border-radius: 999px; box-shadow: 0 1px 5px rgba(29,38,48,0.28); z-index: 2; }
.msg .avatar .badge img, .msg .avatar .badge svg { width: 12px; height: 12px; }
.msg .body { position: relative; max-width: 460px; background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); border: 1px solid rgba(255,255,255,0.7); border-radius: 6px 16px 16px 16px; padding: 11px 16px 13px; box-shadow: 0 6px 18px rgba(29,38,48,0.07), inset 0 1px 0 rgba(255,255,255,0.5); }
.msg .mhead { align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.msg .mhead .nm { font-size: 13px; }
.msg .mhead .time { color: var(--ink-600); flex: none; }
.msg .text, .msg.user .text { display: block; padding: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; font-size: 15px; line-height: 1.7; color: var(--ink-900); }
.msg.user .text:hover { background: transparent; }
.msg .text.glass { background: transparent; border: none; box-shadow: none; }
.flowcard .msg.user .text { background: transparent; border: none; box-shadow: none; padding: 0; }
.msg.minded .text { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; }
.msg .tchip { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.7); }

/* typing caret + reaction pill (DS glass message) */
.tcaret { display: inline-block; width: 2px; height: 1.05em; background: var(--ink-900); margin-left: 1px; vertical-align: -2px; animation: caretblink 1s steps(1) infinite; }
@keyframes caretblink { 50% { opacity: 0; } }
.msg .greact { position: absolute; right: 14px; bottom: -13px; display: inline-flex; align-items: center; gap: 4px; height: 25px; padding: 0 9px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(29,38,48,0.16); opacity: 0; }
.msg .greact .em { font-size: 14px; line-height: 1; }
.msg .greact .ct { font-size: 11px; font-weight: 600; color: var(--ink-600); }
.msg .greact.show { opacity: 1; animation: rpop .42s cubic-bezier(.22,1.2,.4,1) both; }
@keyframes rpop { from { opacity: 0; transform: scale(.6) translateY(4px); } to { opacity: 1; transform: none; } }

/* glass file attachment + DS preview button */
.attach { margin-top: 12px; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 320px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); box-shadow: 0 8px 22px rgba(29,38,48,0.12); }
.flowcard .attach { background: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.7); }
.attach > div { flex: 1; min-width: 0; }
.attach .amid .arow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }
.attach .nm { font-size: 13px; font-weight: 500; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach .sz { font-size: 12px; color: var(--ink-600); white-space: nowrap; }
.gbtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.85); box-shadow: var(--shadow-button); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-900); cursor: pointer; white-space: nowrap; flex: none; transition: background .14s, border-color .14s; }
.gbtn:hover { background: #fff; border-color: rgba(0,0,0,0.14); }
.gbtn svg { width: 14px; height: 14px; color: var(--ink-900); margin-left: -2px; }

/* thinking stream — serif step headers + auto-collapse */
.m-stream, .r-stream { overflow: hidden; transition: max-height .5s ease, opacity .4s ease, margin .4s ease; }
.m-stream.collapsed, .r-stream.collapsed { max-height: 0 !important; opacity: 0; margin: 0; }
.m-stream { margin-top: 2px; }
.m-stream .shimline { margin-bottom: 10px; }
.flowcard .r-stream { margin-top: 6px; }
.flowcard .shimline .lb { color: var(--slate-500); }
.m-trace .step .hd, .r-step .hd { font-family: var(--font-serif); font-weight: 400; font-size: 12.5px; line-height: 19px; color: var(--fg3); }
.m-trace .step::before, .r-step::before { background: rgba(0,0,0,0.10); }
.r-step .body { color: var(--fg3); }
.m-result { gap: 0; }
.m-result .attach { margin-top: 12px; }
.m-result .sbrowser { margin-top: 12px; border-color: rgba(255,255,255,0.75); }

/* DS web-generation preview card — full image, gradient namebar, Preview inside */
.m-result .pcard { position: relative; margin-top: 12px; width: 100%; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,0.75); box-shadow: var(--shadow-button); cursor: pointer; transition: box-shadow .3s ease; }
.m-result .pcard:hover { box-shadow: 0 14px 32px rgba(29,38,48,0.22); }
.pcard .thumb { width: 100%; height: 212px; object-fit: cover; object-position: top; display: block; }
.pcard .pname { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 26px 9px 7px 12px; background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 78%); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.pcard .pname::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.66), rgba(0,0,0,0) 92%); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.pcard:hover .pname::before { opacity: 1; }
.pcard .pname > * { position: relative; z-index: 1; }
.pcard .pname svg { width: 13px; height: 13px; flex: none; }
.pcard .pname .pn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .pbtn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.85); box-shadow: var(--shadow-button); font-size: 12.5px; font-weight: 500; color: var(--ink-900); cursor: pointer; white-space: nowrap; flex: none; transition: background .15s, border-color .15s; }
.pcard .pbtn:hover { background: #fff; border-color: rgba(0,0,0,0.14); }
.pcard .pbtn svg { width: 13px; height: 13px; color: var(--ink-900); margin-left: -1px; }

/* schedule-confirmation attachment (calendar tile + success line) */
.attach .fticon { width: 26px; height: 26px; display: grid; place-items: center; color: var(--ink-900); flex: none; }
.attach .fticon svg { width: 22px; height: 22px; stroke-width: 1.7px; }
.attach .sz.ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-800); }
.attach .sz.ok .okdot { width: 7px; height: 7px; border-radius: 999px; background: var(--success-500); flex: none; }

/* pricing tiers — compact glass chat */
.tier .msg { gap: 9px; }
.tier .msg .avatar { width: 26px; height: 26px; }
.tier .msg .avatar .badge { width: 14px; height: 14px; right: -2px; bottom: -2px; }
.tier .msg .avatar .badge img, .tier .msg .avatar .badge svg { width: 8px; height: 8px; }
.tier .msg .body { padding: 9px 12px 11px; border-radius: 5px 13px 13px 13px; max-width: none; }
.tier .msg .mhead { margin-bottom: 2px; }
.tier .msg .mhead .nm { font-size: 13px; }
.tier .msg .mhead .time { font-size: 11px; }
.tier .msg .text { font-size: 14px; line-height: 1.6; }
.tier .msg.minded .text { font-size: 14.5px; line-height: 1.55; }
.tier .m-stream .shimline { font-size: 13px; margin-bottom: 9px; }
.tier .m-stream .shimline .lb svg { width: 14px; height: 14px; }
.tier .m-trace .step { padding: 0 0 11px 24px; }
.tier .m-trace .step > .ic { width: 16px; height: 16px; }
.tier .m-trace .step > .ic svg { width: 13px; height: 13px; }
.tier .m-trace .step::before { left: 7.5px; top: 19px; }
.tier .m-trace .step .hd { font-size: 11.5px; line-height: 17px; }
.tier .attach { margin-top: 10px; padding: 8px 10px; gap: 8px; max-width: none; }
.tier .attach img.ft { width: 22px; height: 22px; }
.tier .attach .nm { font-size: 12px; }
.tier .attach .sz { font-size: 11px; }
.tier .gbtn { height: 24px; padding: 0 9px; font-size: 11px; border-radius: 8px; }
.tier .gbtn svg { width: 12px; height: 12px; }
.tier .msg .text .tchip { font-size: 11px; padding: 1px 7px 1px 5px; gap: 4px; background: #fff; }
.tier .msg .text .tchip .ap { width: 12px; height: 12px; font-size: 7px; border-radius: 3px; }
.tier .msg .text .tchip img { width: 12px; height: 12px; }

/* pricing bar chart — columns sit closer together */
.bars-v { gap: clamp(4px, 0.8vw, 10px); }
.barcol { flex: 0 1 58px; }

/* experts — glass widgets on the gradient stage */
.exp-joined { color: var(--ink-600); }
.exp-joined::before, .exp-joined::after { background: rgba(0,0,0,0.12); }
.exp-prep { background: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.85); }
.approve { background: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.approve.approved { background: rgba(44,168,127,0.10); border-color: rgba(44,168,127,0.45); }
.wa-solved { background: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.9); }

@media (prefers-reduced-motion: reduce) { .tcaret { animation: none; } .msg .greact { opacity: 1; } }

/* ============================================================
   BROWSER — Chrome extension showcase
   ============================================================ */
.browserx .section-head .lead { max-width: 620px; margin-left: auto; margin-right: auto; }
.bw-cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.bw-cta .ico-chrome { display: inline-flex; }
.bw-note { font-size: 13px; color: var(--slate-500); }
/* trust badges under the CTA — adopted from the hero reassure row */
.bw-reassure { margin-top: 14px; font-size: 13.5px; }
/* side-by-side like hero: capability cards left · live browser stage right */
.bw-wrap { margin-top: 0; max-width: 1240px; margin-left: auto; margin-right: auto; }
/* single-fold section: tight vertical rhythm */
.browserx { padding-top: clamp(34px, 5vh, 52px); padding-bottom: clamp(34px, 5vh, 52px); }
.bwx-head { text-align: center; max-width: 680px; margin: 0 auto; }
.bwx-head h2.display { font-size: clamp(30px, 3.2vw, 44px); margin: 0; }
.bwx-head .lead { margin: 0 auto; }
/* modern segmented tabs — glass rail, sliding white pill */
.bw-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); width: min(100%, 760px); margin: 22px auto 12px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,0.42); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 16px rgba(29,38,48,0.06); }
.bw-ink { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px; background: #fff; border: 1px solid transparent; box-shadow: 0 4px 14px rgba(29,38,48,0.12); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .45s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.bw-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 10px; border: none; border-radius: 999px; background: transparent; color: var(--slate-600); font-family: var(--font-sans); cursor: pointer; transition: color .25s ease; min-width: 0; }
.bw-tab > svg { width: 17px; height: 17px; flex: none; stroke-width: 1.8px; }
.bw-tab .tt { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-tab:hover { color: var(--ink-900); }
.bw-tab.active { color: var(--ink-900); }
.bw-tab.active > svg { stroke: var(--ink-900); color: var(--ink-900); }
.bw-tab .vt-prog { width: 14px; height: 14px; flex: none; display: none; margin-left: 2px; }
.bw-tab.active .vt-prog { display: inline-flex; opacity: .9; }
.bw-tagline { text-align: center; font-size: 15px; color: var(--slate-600); margin: 0 auto 14px; max-width: 560px; min-height: 1.5em; transition: opacity .3s ease; }
.bw-tagline.swap { opacity: 0; }
/* recorder CTA — Chrome-extension install button below the demo */
.rec-cta { text-align: center; margin-top: 22px; }
/* DS marketing button: 44px tall · 14px radius · 18px/500 (matches the hero/nav CTAs) */
.rec-cta .btn { height: 44px; padding: 0 22px; border-radius: 14px; font-size: 18px; font-weight: 500; gap: 9px; }
.rec-cta .btn img { width: 20px; height: 20px; flex: none; }
@media (max-width: 860px) { .bw-tabs { width: 100%; } .bw-tab { padding: 0 8px; gap: 6px; } .bw-tab .tt { font-size: 12.5px; } }
.bw-wrap .bw-cta { justify-content: center; margin-top: 16px; }

.bw-pane { display: none; }
.bw-pane.active { display: flex; flex-direction: column; justify-content: center; height: 100%; animation: bwfade .45s ease both; }
/* white stage */
.bw-panes { position: relative; width: min(100%, 856px); margin: 0 auto; height: 500px; border-radius: 26px; border: 1px solid var(--line); padding: 18px; box-shadow: var(--shadow-elevation);
  background: #fff; }
.bw-panes-unused-grad {
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,0.55), transparent 55%),
    radial-gradient(130% 130% at 100% 100%, rgba(228,60,255,0.34), transparent 55%),
    linear-gradient(135deg, #FFF4EC 0%, #FBEAF6 100%); }
.bw-panes .chromewin { width: min(100%, 820px); margin-left: auto; margin-right: auto; }
@media (max-width: 1100px) { .bw-panes { height: auto; min-height: 480px; } .bw-pane.active { height: auto; } }
@media (max-width: 920px) { .bw-panes { padding: 14px; } }
@keyframes bwfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* browser frame */
.bwin { position: relative; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-elevation); height: 440px; display: flex; flex-direction: column; }
.bwin-bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--surface-muted); border-bottom: 1px solid var(--line); flex: none; }
.bwin-bar .dots { display: inline-flex; gap: 6px; flex: none; }
.bwin-bar .dots i { width: 10px; height: 10px; border-radius: 999px; background: #D9DEE3; }
.burl { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; color: var(--slate-600); margin: 0 auto; max-width: 60%; overflow: hidden; white-space: nowrap; }
.burl svg { width: 11px; height: 11px; flex: none; color: var(--slate-500); }
.bext { width: 28px; height: 28px; border-radius: 9px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-button); }
.bext img { width: 18px; height: 18px; border-radius: 999px; }
.bwin-body { position: relative; flex: 1; padding: 24px 28px; overflow: hidden; }

/* shared skeleton bars */
.bwin .sk { display: block; height: 8px; border-radius: 4px; background: #EDF0F3; }
.bwin .sk.w50 { width: 50px; } .bwin .sk.w60 { width: 60px; } .bwin .sk.w70 { width: 70px; } .bwin .sk.w80 { width: 80px; } .bwin .sk.w90 { width: 90px; } .bwin .sk.w110 { width: 110px; }
.bwin .sk.w40p { width: 40%; } .bwin .sk.w70p { width: 70%; } .bwin .sk.w80p { width: 80%; } .bwin .sk.w85p { width: 85%; } .bwin .sk.w90p { width: 90%; } .bwin .sk.w100p { width: 100%; }

/* slide 1 — NetSuite vendor-bill form the agent fills */
.bp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bp-title { font-size: 16px; font-weight: 700; color: var(--ink-900); }
.ns-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.ns-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ns-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ns-field label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--slate-500); }
.ns-field .val { display: block; height: 34px; line-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; color: var(--ink-900); white-space: nowrap; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ns-field.focus .val { border-color: var(--slate-700); box-shadow: 0 0 0 3px rgba(29,38,48,0.08); }
.ns-field.filled .val { background: #F7FBF8; border-color: rgba(44,168,127,0.45); }
.ns-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 2px; }
.ns-save { height: 32px; padding: 0 18px; border-radius: 9px; border: none; background: var(--surface-ink); color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .12s ease, opacity .2s ease; }
.ns-form.saved .ns-save { transform: scale(.96); opacity: .55; }
.ns-saved { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #1F8A5B; }
.ns-saved svg { width: 15px; height: 15px; }
.ns-form.saved .ns-saved { display: inline-flex; animation: bwfade .35s ease both; }
.bp-table { display: flex; flex-direction: column; }
.bp-row { display: grid; grid-template-columns: 1fr 70px 90px 30px 24px; gap: 14px; align-items: center; padding: 12px 12px; border-bottom: 1px solid var(--line); border-radius: 8px; transition: background .3s ease; }
.bp-row .nm { font-size: 13px; font-weight: 500; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-row .amt { font-family: var(--font-mono, 'DM Mono', monospace); font-size: 12.5px; color: var(--slate-600); text-align: right; }
.bp-row .dl { display: inline-flex; color: var(--slate-500); }
.bp-row .dl svg { width: 15px; height: 15px; }
.bp-row .chk { display: inline-flex; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .35s cubic-bezier(.22,1.2,.4,1); color: #2CA87F; }
.bp-row .chk svg { width: 16px; height: 16px; }
.bp-row.done { background: rgba(44,168,127,0.06); border-bottom-color: transparent; }
.bp-row.done .chk { opacity: 1; transform: none; }
.bw-cursor { position: absolute; left: 70%; top: 80%; width: 18px; height: 18px; z-index: 6; transition: left .55s cubic-bezier(.3,.7,.3,1), top .55s cubic-bezier(.3,.7,.3,1); pointer-events: none; }
.bw-cursor svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 1px 2px rgba(29,38,48,.3)); }
.bw-cursor.click svg { animation: bwclick .3s ease; }
@keyframes bwclick { 50% { transform: scale(.78); } }

/* floating glass agent bar */
.bw-agent { position: absolute; left: 20px; bottom: 18px; z-index: 7; display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,0.65); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 10px 28px rgba(29,38,48,0.16); max-width: min(420px, calc(100% - 40px)); }
.bw-agent img { width: 30px; height: 30px; border-radius: 999px; flex: none; box-shadow: 0 2px 8px rgba(29,38,48,0.2); }
.ba-hd { font-size: 11px; font-weight: 700; color: var(--slate-500); letter-spacing: .01em; }
.ba-line { font-family: var(--font-serif); font-size: 13.5px; color: var(--ink-900); line-height: 1.4; }
.ba-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-coral); margin-left: 6px; flex: none; }
.ba-live i { width: 7px; height: 7px; border-radius: 999px; background: var(--brand-coral); animation: balive 1.4s ease infinite; }
@keyframes balive { 50% { opacity: .3; } }
.ba-live.done { color: #2CA87F; } .ba-live.done i { background: #2CA87F; animation: none; }

/* slide 2 — gmail + side panel */
.bg-grid { display: grid; grid-template-columns: 1fr 264px; flex: 1; min-height: 0; }
.bg-rail { display: none; }
.bg-fwd { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted); font-size: 12px; color: var(--slate-600); align-self: flex-start; }
.bg-fwd b { color: var(--ink-900); font-weight: 600; }
.bg-fwd svg { width: 13px; height: 13px; flex: none; color: var(--slate-500); }
.bg-att { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; height: 36px; padding: 0 13px 0 9px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; box-shadow: var(--shadow-button); font-size: 12.5px; font-weight: 500; color: var(--ink-900); }
.bg-att img { width: 18px; height: 18px; flex: none; }
.bg-mail { padding: 24px 28px; min-width: 0; }
.bg-subj { font-size: 17px; font-weight: 700; color: var(--ink-900); margin-bottom: 16px; }
.bg-from { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.bg-from .av { width: 34px; height: 34px; border-radius: 999px; background: #F3B6A2; color: #7C2D12; font-size: 14px; font-weight: 700; display: grid; place-items: center; flex: none; }
.bg-from .fn { font-size: 13px; font-weight: 600; color: var(--ink-900); margin-bottom: 5px; }
.bg-from .fn span { font-weight: 400; color: var(--slate-500); }
.bg-body { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.bx-panel { border-left: 1px solid rgba(255,255,255,0.8); display: flex; flex-direction: column; min-height: 0;
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,0.5), transparent 55%),
    radial-gradient(130% 130% at 100% 100%, rgba(228,60,255,0.3), transparent 55%),
    linear-gradient(135deg, #FFF4EC 0%, #FBEAF6 100%); }
.bx-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.75); flex: none; }
.bx-head img { width: 20px; height: 20px; border-radius: 999px; }
.bx-head .t { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.bx-head .on { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; color: var(--slate-600); }
.bx-head .on i { width: 7px; height: 7px; border-radius: 999px; background: #2CA87F; }
.bx-body { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; min-height: 0; }
.bx-do { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: center; margin-top: 26px; height: 40px; padding: 0 22px; border-radius: 999px; border: none; background: var(--ink-900); color: #fff; font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 20px rgba(29,38,48,0.3); transition: transform .15s ease, opacity .3s ease; }
.bx-do svg { width: 15px; height: 15px; }
.bx-do.pressed { transform: scale(.94); }
.bx-do.gone { opacity: 0; pointer-events: none; }
.bx-session { display: none; background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255,255,255,0.75); border-radius: 14px; padding: 13px 14px; box-shadow: 0 10px 26px rgba(29,38,48,0.12); }
.bx-session.on { display: block; animation: bwfade .4s ease both; }
.bx-session .shimline { font-size: 12px; margin-bottom: 9px; }
.bx-session .shimline .lb svg { width: 14px; height: 14px; }
.bx-session .m-trace .step { padding: 0 0 10px 24px; }
.bx-session .m-trace .step > .ic { width: 16px; height: 16px; }
.bx-session .m-trace .step > .ic svg { width: 13px; height: 13px; }
.bx-session .m-trace .step::before { left: 7.5px; top: 19px; }
.bx-session .m-trace .step .hd { font-size: 12px; line-height: 17px; }
.bx-session .m-result .text { font-family: var(--font-serif); font-size: 13px; line-height: 1.55; color: var(--ink-900); }
.bx-session .attach { margin-top: 10px; padding: 8px 10px; gap: 8px; max-width: none; }
.bx-session .attach img.ft { width: 22px; height: 22px; }
.bx-session .attach .nm { font-size: 12px; }
.bx-session .attach .sz { font-size: 11px; }
.bx-session .gbtn { height: 24px; padding: 0 9px; font-size: 11px; border-radius: 8px; }
.bx-session .gbtn svg { width: 12px; height: 12px; }

/* slide 3 — DS Chrome window + Minded side-panel recording flow */
.chromewin { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.10); box-shadow: 0 22px 50px rgba(29,38,48,.18), 0 6px 16px rgba(29,38,48,.10); background: #DFE1E5; height: 440px; display: flex; flex-direction: column; text-align: left; }
.chromewin .sk { display: block; height: 8px; border-radius: 4px; background: #EDF0F3; }
.chromewin .sk.w110 { width: 110px; } .chromewin .sk.w70p { width: 70%; } .chromewin .sk.w85p { width: 85%; } .chromewin .sk.w90p { width: 90%; } .chromewin .sk.w100p { width: 100%; }
.cw-tabbar { display: flex; align-items: flex-end; height: 36px; padding: 0 12px; gap: 10px; flex: none; }
.cw-lights { display: flex; gap: 6px; align-self: center; margin-right: 6px; }
.cw-lights i { width: 10px; height: 10px; border-radius: 999px; display: block; }
.cw-lights i:nth-child(1) { background: #FF5F57; } .cw-lights i:nth-child(2) { background: #FEBC2E; } .cw-lights i:nth-child(3) { background: #28C840; }
.cw-tab { display: flex; align-items: center; gap: 8px; height: 29px; padding: 0 12px; min-width: 178px; background: #fff; border-radius: 9px 9px 0 0; font-size: 12px; color: #3C4043; white-space: nowrap; }
.cw-tab .fav { width: 13px; height: 13px; border-radius: 3px; background: #1F8A5B; color: #fff; font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cw-tab svg { width: 11px; height: 11px; color: #9DA0A4; margin-left: auto; flex: none; }
.cw-addr { display: flex; align-items: center; gap: 10px; height: 38px; background: #fff; padding: 0 12px; flex: none; }
.cw-addr .nv { display: inline-flex; color: #5F6367; } .cw-addr .nv.dim { color: #BABCBE; }
.cw-addr .nv svg { width: 15px; height: 15px; stroke-width: 2px; }
.cw-url { flex: 1; display: flex; align-items: center; gap: 7px; height: 26px; border-radius: 999px; background: #F0F3F4; padding: 0 12px; font-size: 12px; color: #202124; min-width: 0; white-space: nowrap; overflow: hidden; }
.cw-url svg { width: 11px; height: 11px; color: #5F6367; flex: none; }
.cw-ext { width: 24px; height: 24px; border-radius: 999px; background: var(--brand-gradient); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: var(--shadow-xs); }
.cw-ext img { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.cw-body { display: flex; flex: 1; min-height: 0; background: #fff; }
.cw-page { flex: 1; min-width: 0; position: relative; background: #F5F7FA; padding: 18px; }
.cw-recbadge { position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(29,38,48,0.92); color: #fff; font-size: 11.5px; font-weight: 500; z-index: 3; }
.cw-recbadge .dot { width: 7px; height: 7px; border-radius: 999px; background: #E5484D; animation: bwpulse 1.4s ease infinite; }
.chromewin.done .cw-recbadge { display: none; }
.cw-mock { margin-top: 32px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 13px; }
.cw-lines { display: flex; flex-direction: column; gap: 9px; }
.cw-btns { display: flex; gap: 8px; margin-top: 3px; }
.cw-btns .b { height: 22px; border-radius: 6px; display: block; }
.cw-btns .b.dark { width: 86px; background: var(--surface-ink); opacity: .9; }
.cw-btns .b.hot { width: 64px; background: var(--peach-tint); border: 1px solid rgba(255,95,52,0.4); }
.cw-click { position: absolute; left: 34%; top: 48%; z-index: 2; }
.cw-click .ring { position: absolute; left: -8px; top: -8px; width: 34px; height: 34px; border-radius: 999px; background: linear-gradient(228deg, rgba(223,115,180,0.25), rgba(255,106,82,0.25), rgba(236,180,120,0.25)); }
.cw-click svg { position: relative; width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
.chromewin.done .cw-click { display: none; }
/* side panel — DS panel spec */
.cw-panel { width: 256px; flex: none; background: #fff; border-radius: 16px 0 0 16px; box-shadow: 0 2px 24px rgba(0,0,0,0.13); position: relative; z-index: 4; display: flex; flex-direction: column; overflow: hidden; }
.cw-phd { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px 4px 14px; flex: none; }
.cw-phd .recdot { width: 8px; height: 8px; border-radius: 999px; background: #E5484D; animation: bwpulse 1.4s ease infinite; flex: none; }
.cw-panel.done .cw-phd .recdot { animation: none; background: #2CA87F; }
.cw-phd h4 { font-family: var(--font-serif); font-weight: 400; font-size: 13.5px; color: var(--ink-900); margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-stop { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 10px; border-radius: 9px; background: #fff; color: var(--ink-600); border: 1px solid rgba(0,0,0,0.06); box-shadow: var(--shadow-button); font-family: var(--font-sans); font-size: 11.5px; cursor: pointer; flex: none; }
.cw-stop .sq { width: 8px; height: 8px; border-radius: 2px; background: #E5484D; }
.cw-pbody { flex: 1; min-height: 0; overflow: hidden; padding: 4px 14px 14px; }
.cw-rail { display: flex; gap: 10px; padding-top: 6px; }
.cw-rail .railline { display: flex; flex-direction: column; align-items: center; flex: none; width: 20px; }
.cw-rail .ric { width: 15px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--ink-700); flex: none; }
.cw-rail .ric svg { width: 13px; height: 13px; }
.cw-rail .rln { width: 1px; background: rgba(0,0,0,0.1); flex: 1; min-height: 12px; }
/* record timeline rail — icons & connectors reveal step-by-step with the actions */
.cw-rail .railline.seq .ric { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.cw-rail .railline.seq .ric.on { opacity: 1; transform: none; }
.cw-rail .railline.seq .rln { transform: scaleY(0); transform-origin: top center; transition: transform .4s ease; }
.cw-rail .railline.seq .rln.on { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .cw-rail .railline.seq .ric, .cw-rail .railline.seq .rln { opacity: 1; transform: none; transition: none; } }
.cw-rail .rsteps { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1; }
.cw-rail .rquote { font-size: 12px; color: var(--ink-700); line-height: 1.5; }
.cw-rail .rstep { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.cw-rail .rstep.in { opacity: 1; transform: none; }
.cw-rail .rt { font-size: 12px; color: var(--ink-900); margin-bottom: 7px; line-height: 1.4; }
.cw-rail .rshot { position: relative; height: 76px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px #E7EBEE, 0 2px 3px rgba(0,0,0,0.11); background: #fff; }
.cw-rail .rshot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cw-rail .rclick { position: absolute; left: 38%; top: 32%; }
.cw-rail .rclick .ring { position: absolute; left: -5px; top: -5px; width: 24px; height: 24px; border-radius: 999px; background: linear-gradient(228deg, rgba(223,115,180,0.2), rgba(255,106,82,0.2), rgba(236,180,120,0.2)); }
.cw-rail .rclick svg { position: relative; width: 14px; height: 14px; }
.cw-rail .rinput { position: relative; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #E7EBEE, 0 2px 3px rgba(0,0,0,0.11); padding: 10px; }
.cw-rail .rinput .field { display: flex; align-items: center; gap: 7px; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--ink-900); padding: 0 9px; font-size: 12px; color: var(--ink-700); background: #fff; }
.cw-rail .rinput .field svg { width: 12px; height: 12px; color: var(--slate-600); flex: none; }
.cw-rail .caret { animation: cwblink 1.1s steps(1) infinite; }
@keyframes cwblink { 50% { opacity: 0; } }
/* floating rec bar — hovers bottom-center over the panel while recording */
/* floating recording bar — DS chrome-extension recbar: rounded-rect, mono timer, rounded-square controls */
.cw-recbar { position: absolute; left: 0; right: 0; bottom: 14px; margin-inline: auto; width: -moz-fit-content; width: fit-content; max-width: calc(100% - 24px); z-index: 6; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 14px; border-radius: 12px; background: rgba(29,38,48,0.94); color: #fff; box-shadow: 0 10px 26px rgba(29,38,48,0.35); white-space: nowrap; }
.cw-recbar .dot { width: 8px; height: 8px; border-radius: 999px; background: #E5484D; animation: bwpulse 1.4s ease infinite; flex: none; }
.cw-recbar .tm { font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cw-recbar .rb { width: 28px; height: 28px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.12); color: #fff; border: none; padding: 0; cursor: pointer; transition: background .12s; }
.cw-recbar .rb:hover { background: rgba(255,255,255,0.24); }
.cw-recbar .rb svg { width: 14px; height: 14px; }
.cw-recbar .rb.stop { background: #E5484D; }
.cw-recbar .rb.stop svg { width: 11px; height: 11px; fill: #fff; }
.cw-recbar .rb.mic { background: #fff; color: var(--ink-900); }
.cw-recbar .rb.mic:hover { background: #fff; opacity: .9; }
.cw-panel.done .cw-recbar { display: none; }
/* "Saved as a skill" line — only after recording finishes (when the recbar is gone), so it never sits under the floating controls */
.cw-learned { display: none; align-items: center; gap: 7px; margin-top: 10px; font-size: 12.5px; color: var(--slate-600); }
.cw-learned svg { width: 15px; height: 15px; color: var(--success-500); flex: none; }
.cw-learned b { color: var(--ink-900); font-weight: 600; }
.cw-panel.done .cw-learned { display: flex; }
@keyframes bwpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* pane 1 — operated browser · latest DS: agent-glow.js breathes inside the page, AI cursor + glass action chip */
.cw-phd .aidot { width: 9px; height: 9px; border-radius: 999px; background: var(--brand-gradient-cta); flex: none; animation: bwpulse 1.4s ease infinite; }
.aicursor { position: absolute; left: 58%; top: 62%; z-index: 12; pointer-events: none; transition: left 1.1s cubic-bezier(.45,.05,.3,1), top 1.1s cubic-bezier(.45,.05,.3,1), opacity .4s ease; }
.aicursor svg.ptr { position: relative; width: 24px; height: 24px; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); z-index: 1; }
.aicursor .ring { position: absolute; left: -9px; top: -9px; width: 42px; height: 42px; border-radius: 999px; background: linear-gradient(228deg, rgba(223,115,180,0.3), rgba(255,106,82,0.3), rgba(236,180,120,0.3)); opacity: 0; }
.aicursor.click .ring { animation: airing .7s ease; }
@keyframes airing { 0% { opacity: 0; transform: scale(.35); } 30% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.3); } }
.aicursor .aitip { position: absolute; right: 8px; top: 20px; white-space: nowrap;
  background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.7); color: var(--ink-900); font-size: 12px; font-weight: 500; line-height: 1;
  padding: 8px 11px; border-radius: 10px 3px 10px 10px; box-shadow: 0 6px 18px rgba(29,38,48,0.07), inset 0 1px 0 rgba(255,255,255,0.5); }
.aicursor.flip .aitip { right: auto; left: 8px; border-radius: 3px 10px 10px 10px; }
@media (prefers-reduced-motion: reduce) { .aicursor { transition: none; } }
/* pane 1 — operated browser in the chrome frame · DS agent glow (.ds-glow from colors_and_type.css) */
.bw-glow { width: min(100%, 880px); margin: 0 auto; --glow-radius: 22px; --glow: 26; }
.bw-glow .chromewin { width: 100%; }
.cw-tab .favic { display: inline-flex; flex: none; color: #14532D; }
.cw-tab .favic svg { width: 13px; height: 13px; }
.cw-page.obpage { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; overflow: hidden; }
.cw-page.obpage .ob-card { width: min(100%, 420px); }
.cw-pbody.cw-bank { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.cw-bank .pq { align-self: flex-end; max-width: 88%; background: var(--surface-muted); border: none; border-radius: 12px 12px 4px 12px; box-shadow: var(--shadow-button); padding: 8px 12px; font-size: 14px; line-height: 1.5; color: var(--ink-900); }
/* Browser flow: while the user is still TYPING the request into the composer, hold back the
   sent bubble + reasoning trace (applies to both the desktop split panel and mobile overlay). */
.bw-pane[data-bw="auto"] .chromewin.composing .cw-panel .pq,
.bw-pane[data-bw="auto"] .chromewin.composing .cw-panel .m-thread { display: none; }
.cw-bank .bw-think { font-size: 12px; padding: 2px 0; }
.cw-bank .bw-think .lb svg { width: 14px; height: 14px; }
.cw-bank .pans { font-family: var(--font-serif); font-size: 12.5px; line-height: 1.55; color: var(--ink-900); margin-top: 2px; opacity: 0; transform: translateY(7px); transition: opacity .45s ease, transform .45s ease; }
.cw-bank .pans.in { opacity: 1; transform: none; }
/* bank pane now uses the DS reasoning-trace (m-thread); style its answer + inline chips */
.cw-bank .m-thread { flex: none; }
.cw-bank .m-result { font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--ink-900); margin-top: 2px; }
/* inline tool chips inside a reasoning-trace step headline */
/* the `.m-trace .win` inline-block rule above breaks the chip's flex centering;
   restore inline-flex + middle alignment, but keep the full site-standard pill
   size (font 12.5 / 14px logo / 2-8 padding) so these match chips elsewhere */
.m-trace .step .hd .tchip { display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; font-size: 12.5px; padding: 2px 8px 2px 6px; gap: 5px; }
.m-trace .step .hd .tchip img, .m-trace .step .hd .tchip svg.tic { width: 14px; height: 14px; }
/* chat-RESPONSE chip (browser/email final answer) — base .tchip's tall line-height
   bulges the serif response line; pin line-height:1 but keep the full site-standard
   pill size so it matches the reasoning-trace chips and chips elsewhere */
.cw-bank .m-result .tchip, .cw-run .m-result .tchip,
.cw-bank .pq .tchip, .cw-run .pq .tchip { line-height: 1; font-size: 12.5px; padding: 2px 8px 2px 6px; gap: 5px; vertical-align: middle; }
.cw-bank .m-result .tchip img, .cw-run .m-result .tchip img,
.cw-bank .pq .tchip img, .cw-run .pq .tchip img { width: 14px; height: 14px; }
/* standardize every inline chip in the VS section to one pill height (task,
   reasoning-trace and final-answer chips all match), regardless of the
   surrounding text size */
.pv-vs .tchip { height: 22px; box-sizing: border-box; display: inline-flex; align-items: center; vertical-align: middle; line-height: 1; }
.pv-vs .tchip img { width: 14px; height: 14px; }
.pv-vs .tchip .ap { width: 14px; height: 14px; }
.pv-vs .tchip svg.tic { width: 13px; height: 13px; }
/* gmail — secondary path: tag @minded in a reply */
.gx-reply { display: flex; gap: 8px; margin-top: auto; align-items: center; }
.gx-reply .rav { width: 24px; height: 24px; border-radius: 999px; background: #7B1FA2; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gx-rbox { flex: 1; border: 1px solid #DADCE0; border-radius: 14px; padding: 8px 12px; font-size: 11.5px; color: #1F1F1F; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.gx-rbox .gxcaret { animation: cwblink 1.1s steps(1) infinite; color: #5F6368; }
/* pane 1 — DS browser-agent widget: thinking line + glass card + gradient glow */
.bw-think { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 0 2px; flex: none; }
.bw-think .lb { color: var(--slate-500); display: inline-flex; }
.bw-think .lb svg { width: 16px; height: 16px; stroke-width: 1.7px; }
.bw-think .tx:not(.think-shimmer) { color: var(--slate-600); }
.bagw { position: relative; flex: 1; min-height: 240px; display: flex; }
.bagw::before { content: ''; position: absolute; inset: -4px; border-radius: 24px; background: linear-gradient(120deg, #FFAC6F, #FF5F34, #E43CFF, #FF5F34, #FFAC6F); background-size: 300% 300%; animation: bagglow 6s ease infinite; filter: blur(10px); opacity: .4; transition: opacity .6s ease; }
.bagw.done::before { opacity: 0; animation-play-state: paused; }
@keyframes bagglow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.bag { position: relative; flex: 1; min-width: 0; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgba(255,255,255,0.7); border-radius: 20px; box-shadow: 0 6px 24px rgba(29,38,48,0.07); padding: 12px 14px 14px; display: flex; flex-direction: column; }
.bag-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.bag-hd .ti { color: var(--slate-600); display: inline-flex; }
.bag-hd .ti svg { width: 16px; height: 16px; }
.bag-hd h3 { font-family: var(--font-serif); font-weight: 400; font-size: 15px; color: var(--ink-900); margin: 0; }
.bag-stop { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 13px; margin-left: auto; border-radius: 12px; background: #fff; color: var(--ink-600); border: 1px solid rgba(0,0,0,0.06); box-shadow: var(--shadow-button); font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; cursor: pointer; flex: none; transition: border-color .15s, color .15s, opacity .3s; }
.bag-stop:hover { border-color: rgba(0,0,0,0.22); color: var(--ink-900); }
.bag-stop .sq { width: 9px; height: 9px; border-radius: 2px; background: #E5484D; flex: none; margin-left: -2px; }
.bagw.done .bag-stop { opacity: 0; visibility: hidden; }
.bag-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 0 6px; position: relative; z-index: 2; }
.bag-tab { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; min-width: 0; border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; background: #fff; color: var(--ink-900); font-size: 11.5px; font-weight: 500; margin-bottom: -1px; }
.bag-tab .fv { display: inline-flex; color: #14532D; flex: none; }
.bag-tab .fv svg { width: 12px; height: 12px; }
.bag-tab .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bag-chrome { position: relative; z-index: 1; flex: 1; min-height: 170px; background: #fff; border: 1px solid var(--line); border-radius: 0 12px 12px 12px; overflow: hidden; box-shadow: var(--shadow-button); display: flex; }
.bag-view { position: relative; flex: 1; min-width: 0; background: #F5F7FA; overflow: hidden; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .bagw::before { animation: none; } }
/* pane 1 — chat-framed browser run (NetSuite, no API) */
.bwc { display: flex; flex-direction: column; gap: 12px; height: 100%; min-height: 0; justify-content: center; width: min(100%, 760px); margin: 0 auto; }
.bwc > .msg { flex: none; }
.bwc .msg .avatar { width: 34px; height: 34px; }
.bwc .bwin { flex: 1; min-height: 240px; height: auto; }
.bwc-a { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.bwc-a.in { opacity: 1; transform: none; }
.bwin-body.ob { padding: 16px 20px; display: flex; flex-direction: column; gap: 13px; }
.ob-head { display: flex; align-items: center; gap: 14px; }
.ob-logo { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #14532D; }
.ob-logo svg { width: 15px; height: 15px; }
.ob-head .sk.last { margin-left: auto; }
.ob-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow-button); }
.ob-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ob-acct { font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.ob-date { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--slate-600); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.ob-date svg { width: 11px; height: 11px; }
.ob-balance { align-self: flex-start; display: flex; flex-direction: column; gap: 1px; border-radius: 10px; padding: 5px 10px; margin: -5px -10px; transition: background .35s ease, box-shadow .35s ease; }
.ob-balance .lbl { font-size: 10.5px; color: var(--slate-500); }
.ob-balance .val { font-family: var(--font-mono, 'DM Mono', monospace); font-size: 23px; color: var(--ink-900); filter: blur(6px); transition: filter .45s ease; }
.ob-balance.found { background: rgba(255,172,111,0.16); box-shadow: 0 0 0 1.5px rgba(255,95,52,0.5); }
.ob-balance.found .val { filter: none; }
.ob-rows { display: flex; flex-direction: column; gap: 8px; }
/* pane 2 — realistic Gmail + extension drawer */
.chromewin.wide { aspect-ratio: 16 / 9; height: auto; min-height: 395px; }
.chromewin.wide .cw-panel { width: 300px; }
.chromewin .cw-body { position: relative; }
.cw-panel.drawer { position: absolute; top: 0; right: 0; bottom: 0; transform: translateX(108%); transition: transform .5s cubic-bezier(.32,.72,.3,1); box-shadow: -10px 0 32px rgba(29,38,48,0.22); }
.chromewin.open .cw-panel.drawer { transform: none; }
.cw-foot { flex: none; padding: 0 14px 12px; }
.user-cursor { position: absolute; left: 46%; top: 62%; width: 18px; height: 18px; z-index: 30; transition: left .7s cubic-bezier(.3,.7,.3,1), top .7s cubic-bezier(.3,.7,.3,1), opacity .3s ease; pointer-events: none; }
.user-cursor svg { width: 18px; height: 18px; display: block; filter: drop-shadow(0 1px 2px rgba(29,38,48,.3)); }
.user-cursor.click svg { animation: bwclick .3s ease; }
.user-cursor.gone { opacity: 0; }
.cw-ext { transition: box-shadow .15s ease; }
.cw-ext.pressed { box-shadow: 0 0 0 4px rgba(255,95,52,0.28); }
.cw-page.gmailx { padding: 0; background: #fff; display: flex; flex-direction: column; }
.gx-top { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; flex: none; }
.gxi { display: inline-flex; color: #5F6368; }
.gxi svg { width: 14px; height: 14px; }
.gx-logo { width: 18px; height: 13.5px; flex: none; }
.gx-wm { font-size: 14px; color: #5F6368; margin-left: -4px; }
.gx-search { flex: 1; max-width: 260px; display: inline-flex; align-items: center; gap: 8px; height: 26px; border-radius: 999px; background: #EAF1FB; padding: 0 12px; color: #5F6368; font-size: 11.5px; margin: 0 auto 0 12px; }
.gx-search svg { width: 12px; height: 12px; flex: none; }
.gx-av { width: 22px; height: 22px; border-radius: 999px; background: #7B1FA2; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gx-main { flex: 1; min-height: 0; display: flex; }
.gx-side { width: 112px; flex: none; padding: 4px 8px; display: flex; flex-direction: column; gap: 1px; }
.gx-compose { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 10px; background: #C2E7FF; color: #001D35; font-weight: 600; font-size: 11px; margin-bottom: 8px; align-self: flex-start; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.gx-compose svg { width: 12px; height: 12px; }
.gx-nav { display: flex; align-items: center; gap: 8px; height: 23px; padding: 0 10px; border-radius: 999px; color: #444746; font-size: 11px; }
.gx-nav svg { width: 12px; height: 12px; flex: none; }
.gx-nav.on { background: #D3E3FD; font-weight: 700; color: #001D35; }
.gx-nav b { margin-left: auto; font-size: 10px; }
.gx-mail { flex: 1; min-width: 0; padding: 8px 18px 12px; display: flex; flex-direction: column; gap: 8px; }
.gx-subj { font-size: 15px; font-weight: 400; color: #1F1F1F; display: flex; align-items: center; gap: 8px; }
.gx-tag { font-size: 9.5px; padding: 2px 7px; border-radius: 4px; background: #F1F3F4; color: #5F6368; flex: none; }
.gx-from { display: flex; align-items: flex-start; gap: 8px; }
.gx-from .av { width: 26px; height: 26px; border-radius: 999px; background: #C5221F; color: #fff; font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gx-who { display: flex; flex-direction: column; min-width: 0; }
.gx-who .fn { font-size: 11.5px; font-weight: 700; color: #1F1F1F; }
.gx-who .fn .em { font-weight: 400; color: #5F6368; }
.gx-who .to { font-size: 10.5px; color: #5F6368; }
.gx-time { margin-left: auto; font-size: 10.5px; color: #5F6368; white-space: nowrap; }
.gx-body { font-size: 11.5px; line-height: 1.55; color: #1F1F1F; display: flex; flex-direction: column; gap: 6px; }
.gx-body p { margin: 0; }
.gx-att { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; border: 1px solid #DADCE0; border-radius: 8px; padding: 6px 10px; font-size: 10.5px; color: #3C4043; }
.gx-att img { width: 14px; height: 14px; }
.gx-btns { display: flex; gap: 8px; margin-top: auto; }
.gx-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 13px; border-radius: 999px; border: 1px solid #747775; color: #444746; font-size: 11px; font-weight: 600; }
.gx-btn svg { width: 12px; height: 12px; }
/* pane 2 — gmail page + side-panel handoff */
.chromewin .sk.w80p { width: 80%; }
.cw-page.gmail { padding: 16px; }
.gm-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-button); display: flex; flex-direction: column; gap: 12px; height: 100%; }
.gm-subj { font-size: 14.5px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.01em; }
.gm-from { display: flex; align-items: center; gap: 9px; }
.gm-from .av { width: 28px; height: 28px; border-radius: 999px; background: #C5221F; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.gm-who { display: flex; flex-direction: column; min-width: 0; }
.gm-who .fn { font-size: 12px; font-weight: 600; color: var(--ink-900); }
.gm-who .em { font-size: 11px; color: var(--slate-500); }
.gm-time { margin-left: auto; font-size: 11px; color: var(--slate-500); }
.gm-body { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-700); }
.gm-att { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; font-size: 11.5px; color: var(--ink-800); }
.gm-att img { width: 16px; height: 16px; }
.gm-sk { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.cw-nsrow.sugg.hot { background: var(--primary-tint, rgba(29,38,48,0.06)); box-shadow: none; color: var(--ink-900); }
.cw-nsrow.sugg.hot svg { color: var(--ink-900); }
.cw-pbody.cw-run { display: none; }
.cw-pbody.cw-run.on { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.cw-pbody.cw-chat.off { display: none; }
/* the user message that lands after the suggestion is picked — DS user bubble (surface-muted, no border, shadow-button) */
.cw-run .pq { align-self: flex-end; max-width: 88%; background: var(--surface-muted); border: none; border-radius: 12px 12px 4px 12px; box-shadow: var(--shadow-button); padding: 8px 12px; font-size: 14px; line-height: 1.5; color: var(--ink-900); }
.cw-run .runlab { font-family: var(--font-serif); font-size: 12.5px; color: var(--ink-600); }
.cw-runrow { display: flex; align-items: flex-start; gap: 9px; flex: none; font-size: 12px; line-height: 1.45; color: var(--ink-800); opacity: 0; transform: translateY(7px); transition: opacity .35s ease, transform .35s ease; }
.cw-runrow.in { opacity: 1; transform: none; }
.cw-runrow .ic { display: inline-flex; flex: none; margin-top: 1px; }
.cw-runrow .ic svg { width: 13px; height: 13px; }
.cw-runrow .ic .spin { color: var(--slate-500); animation: cwspin 1s linear infinite; }
.cw-runrow .ic .chk { display: none; color: #1F8A5B; }
.cw-runrow.ok .ic .spin { display: none; }
.cw-runrow.ok .ic .chk { display: block; }
@keyframes cwspin { to { transform: rotate(360deg); } }
.cw-rundone { display: inline-flex; align-items: flex-start; gap: 8px; flex: none; margin-top: 2px; font-size: 12px; line-height: 1.45; color: #1F8A5B; opacity: 0; transition: opacity .4s ease; }
.cw-rundone svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.cw-rundone.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cw-runrow .ic .spin { animation: none; } }
/* chat / new-task state — DS side panel spec, scaled to the marketing frame */
.cw-tab .favimg { width: 13px; height: 13px; flex: none; }
.cw-page.shot { padding: 0; overflow: hidden; }
.cw-page.shot .pg { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.cw-panel.chat { width: 272px; }
.cw-phd .hlogo { width: 19px; height: 19px; border-radius: 999px; flex: none; display: block; }
.cw-phd .hact { display: inline-flex; color: var(--slate-500); border-radius: 6px; padding: 3px; cursor: pointer; transition: background .12s, color .12s; }
.cw-phd .hact:hover { background: rgba(64,64,64,0.06); color: var(--ink-900); }
.cw-phd .hact svg { width: 15px; height: 15px; }
.cw-pbody.cw-chat { display: flex; flex-direction: column; text-align: center; }
.cw-chat h5 { font-family: var(--font-serif); font-weight: 400; font-size: 16px; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink-900); margin: 12px auto 0; max-width: 200px; }
.cw-nextsteps { margin-top: auto; padding: 0 2px 12px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.cw-nextsteps .nslab { font-family: var(--font-serif); font-size: 12px; color: var(--ink-600); }
.cw-nsrow { display: flex; align-items: center; gap: 9px; min-height: 20px; padding: 8px 11px; margin: 0 -11px; border-radius: 10px; font-size: 14px; line-height: 18px; color: var(--ink-800); cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-nsrow:hover { background: var(--surface-hover); color: var(--ink-900); }
.cw-nsrow svg { width: 13px; height: 13px; color: var(--slate-600); flex: none; stroke-width: 1.8px; }
.cw-nsrow img { width: 14px; height: 14px; flex: none; border-radius: 3px; display: block; }
/* DS composer — compact panel variant */
.cw-composer { flex: none; background: #fff; border: 1px solid #e5e7eb; border-radius: 13px; box-shadow: 0 8px 10px -5px rgba(25,31,52,0.10); padding: 10px 0 0; text-align: left; }
.cw-composer .input { min-height: 19px; padding: 0 12px; font-size: 14px; line-height: 19px; color: var(--ink-400); }
.cw-composer .input.typed { color: var(--ink-900); }
.cw-composer .input.typed::after { content: '|'; margin-left: 1px; color: var(--ink-400); animation: cwblink 1.1s steps(1) infinite; }
.cw-composer .bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 6px 6px; }
.cw-composer .left { display: flex; align-items: center; gap: 2px; }
.cw-composer .ctl { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; color: #6b7280; cursor: pointer; transition: background .12s; }
.cw-composer .ctl:hover { background: var(--surface-hover); }
.cw-composer .ctl svg { width: 13px; height: 13px; }
.cw-composer .send { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; transition: background .12s; }
.cw-composer .send:hover { background: var(--surface-hover); }
.cw-composer .send svg { width: 15px; height: 15px; }
.cw-composer .send svg path { opacity: .55; transition: opacity .15s; }
.cw-composer .send.hot svg path, .cw-composer .send:hover svg path { opacity: 1; }
.rec-card { width: min(540px, 100%); border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-elevation); overflow: hidden; }
.rec-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; }
.rec-head svg { width: 16px; height: 16px; color: var(--ink-900); }
.rec-head .t { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.rec-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, 'DM Mono', monospace); font-size: 12px; font-weight: 500; color: #D92D20; }
.rec-pill .dot { width: 8px; height: 8px; border-radius: 999px; background: #D92D20; animation: balive 1.2s ease infinite; }
.rec-stage { background: #1D2630; padding: 20px 22px; }
.rec-mini { position: relative; background: #fff; border-radius: 10px; padding: 16px 18px 18px; }
.rec-mini > .sk { margin-bottom: 14px; }
.rec-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.rec-btns { display: flex; gap: 12px; }
.rec-btns .b { height: 26px; border-radius: 7px; }
.rec-btns .b.dark { width: 78px; background: var(--ink-900); }
.rec-btns .b.hot { width: 92px; background: #fff; border: 1.5px solid var(--brand-coral); box-shadow: 0 0 0 3px rgba(255,95,52,0.12); }
.rec-cursor { position: absolute; right: 32%; bottom: 14px; width: 17px; height: 17px; animation: reccur 5s ease-in-out infinite alternate; }
.rec-cursor svg { width: 17px; height: 17px; display: block; filter: drop-shadow(0 1px 2px rgba(29,38,48,.3)); }
@keyframes reccur { 0% { transform: translate(0,0); } 40% { transform: translate(-90px,-26px); } 100% { transform: translate(30px,-60px); } }
.rec-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; }
.rec-foot .watch { font-size: 12.5px; color: var(--slate-600); }
.rec-stop { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-button); font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink-900); cursor: pointer; flex: none; }
.rec-stop i { width: 9px; height: 9px; border-radius: 2px; background: #D92D20; }
.rec-card.done .rec-foot:not(.learned) { display: none; }
.rec-card.done .rec-pill { color: var(--slate-500); } .rec-card.done .rec-pill .dot { background: var(--slate-500); animation: none; }

.bw-cap { text-align: center; margin: 18px auto 0; max-width: 560px; font-size: 14.5px; line-height: 1.55; color: var(--slate-600); }
.bw-cap b { color: var(--ink-900); font-weight: 600; }

@media (max-width: 860px) {
  .bg-grid { grid-template-columns: 1fr 250px; }
}
@media (max-width: 640px) {
  .bwin { height: auto; min-height: 400px; }
  .bg-grid { grid-template-columns: 1fr; }
  .bg-mail { display: none; }
  .bp-row { grid-template-columns: 1fr 60px 30px 24px; }
  .bp-row .sk.w60 { display: none; }
  .burl { max-width: 46%; }
  .bw-agent { left: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ba-live i, .rec-pill .dot { animation: none; }
  .rec-cursor { animation: none; }
}

/* ============================================================
   USE CASES — redesigned: the prompt box lives here now
   ============================================================ */
.uc-panel { padding: 24px; background-color: transparent; border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 18px 44px rgba(120,30,50,.12);
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,0.55), transparent 55%),
    radial-gradient(130% 130% at 100% 100%, rgba(228,60,255,0.34), transparent 55%),
    linear-gradient(135deg, #FFF4EC 0%, #FBEAF6 100%); }
.uc-buildbox { box-shadow: 0 16px 44px rgba(214,108,60,0.18), inset 0 1px 0 rgba(255,255,255,0.95); }
.uc-buildbox:hover { transform: none; box-shadow: 0 16px 44px rgba(214,108,60,0.18), inset 0 1px 0 rgba(255,255,255,0.95); }
.bb-type { flex: 1; min-width: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--ink-900); min-height: 1.6em; }
.bb-type .tchip { font-size: 0.78em; vertical-align: 2px; padding: 1px 9px 1px 6px; background: #fff; border-color: var(--line-strong); }
.bb-type .tcaret { height: 1.1em; vertical-align: -2px; }
.uc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.uc-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.9); background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink-800); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.uc-chip svg { width: 15px; height: 15px; stroke-width: 1.9px; }
.uc-chip:hover { background: #fff; transform: translateY(-1px); }
.uc-chip.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; box-shadow: 0 8px 20px rgba(29,38,48,0.28); }
.uc-desc { margin-top: 16px; font-family: var(--font-serif); font-size: 14px; line-height: 1.6; color: var(--ink-800); min-height: 46px; }
.uc-pane .uc-works { margin: 18px 0 0; }

/* ============================================================
   DS ALIGNMENT PASS
   Buttons = DM Sans 500 (DS Button). Offer + WhatsApp widgets =
   DS integration card (white, hairline, icon tile, Connected tag).
   ============================================================ */
.btn, .gbtn, .bb-send, .bb-chip, .bx-do, .rec-stop, .approve .ok,
.uc-chip, .vs-tab, .bw-tab, .uc-tab { font-weight: 500; }

/* offer card — DS integration card anatomy */
.approve { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 13px; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 13px 14px; box-shadow: var(--shadow-elevation); -webkit-backdrop-filter: none; backdrop-filter: none; }
.approve .ainfo { flex: 1 1 0; min-width: 150px; }
.approve .ainfo .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.approve .ok, .approve.approved .approved-tag { margin-left: auto; flex: none; }
.approve .wa-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-muted); border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.approve .wa-ic svg { width: 22px; height: 22px; color: var(--ink-900); }
.approve .ainfo .t { font-size: 14.5px; font-weight: 600; }
/* polished offer card — vetted-engineer avatar stack · DS primary button · approving cursor */
.approve { position: relative; }
.approve .avastack { display: inline-flex; flex: none; }
.approve .avastack img { width: 38px; height: 38px; border-radius: 999px; border: 2px solid #fff; object-fit: cover; margin-left: -11px; box-shadow: 0 2px 6px rgba(29,38,48,.16); position: relative; }
.approve .avastack img:first-child { margin-left: 0; z-index: 3; }
.approve .avastack img:nth-child(2) { z-index: 2; }
.approve .ok { background: var(--surface-ink); color: #fff; border: none; border-radius: 12px; height: 32px; padding: 0 14px; font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; box-shadow: var(--shadow-button); transition: background .15s ease, transform .12s ease; }
.approve .ok:hover { background: var(--ink-700); }
.approve .ok.pressed { transform: scale(.96); }
.approve .ucursor { position: absolute; right: 92px; top: 46%; z-index: 6; display: inline-flex; align-items: flex-start; pointer-events: none; opacity: 0; transform: translate(96px, 58px); transition: transform .9s cubic-bezier(.3,.8,.3,1), opacity .3s ease; }
.approve .ucursor.show { opacity: 1; }
.approve .ucursor.go { transform: translate(0, -4px); }
.approve .ucursor svg { width: 20px; height: 20px; flex: none; transition: transform .15s ease; filter: drop-shadow(0 2px 5px rgba(0,0,0,.3)); }
.approve .ucursor.click svg { transform: scale(.8); }
.approve .ucursor img { width: 22px; height: 22px; border-radius: 999px; border: 2px solid #fff; object-fit: cover; margin: 13px 0 0 -7px; box-shadow: 0 2px 8px rgba(29,38,48,.32); }
.approve .ucursor.gone { opacity: 0; transition: opacity .35s ease .1s; }
@media (prefers-reduced-motion: reduce) { .approve .ucursor { display: none; } }
.approve .ainfo .s { font-size: 12.5px; }
.approve .ok { height: 36px; padding: 0 16px; border-radius: 10px; background: var(--success-500); background-image: none; border: none; }
.approve .ok:hover { opacity: .9; }
/* accepted = the DS "Connected" state: card stays white, the button flips */
.approve.approved { background: #fff; border-color: var(--line); }
.approve.approved .wa-ic { background: var(--surface-muted); }
.approve .approved-tag { height: 36px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--success-500); background: rgba(44,168,127,0.08); color: var(--success-800); font-size: 13.5px; font-weight: 600; }

/* WhatsApp works — DS connected-app row */
.wa-solved { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 13px; margin-top: 12px; padding: 13px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-elevation); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wa-solved .ic { width: 46px; height: 46px; border-radius: 12px; background: #25D366; display: grid; place-items: center; flex: none; }
.wa-solved .ic svg { width: 24px; height: 24px; color: #fff; }
.wa-solved .b { flex: 1 1 0; min-width: 150px; }
.wa-solved .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-solved .conn { margin-left: auto; }
.wa-solved .t { font-size: 14.5px; font-weight: 600; color: var(--ink-900); display: block; }
.wa-solved .t .chk { display: none; }
.wa-solved .s { font-size: 12.5px; color: var(--slate-500); margin-top: 2px; }
.wa-solved .conn svg { width: 15px; height: 15px; }

/* bottom section — hero reassure + trust design */
.exp-reassure { margin-top: 24px; }
.exp-trust { margin-top: 18px; }

/* stat cards per reference: roomier tile, 600 value */
.exp-left .exp-stats .st { border-radius: 16px; padding: 14px; gap: 12px; }
.exp-left .exp-stats .st .si { width: 42px; height: 42px; border-radius: 11px; }
.exp-left .exp-stats .st .si svg { width: 18px; height: 18px; }
.exp-left .exp-stats .st .v { font-weight: 600; font-size: 17px; }
.exp-left .exp-stats .st .k { font-size: 12px; }

/* ============================================================
   USE CASES v3 — DS cards left, square DS composer stage right
   ============================================================ */
.uc-panes { display: none; }
.uc-panes .uc-pane { display: none; }
.uc-panes .uc-pane.active { display: flex; flex-direction: column; gap: 8px; }
/* DS card per reference: roomy white card, big peach tile, coral selected ring */
.uc-card { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line); background: #fff; box-shadow: none; font-family: var(--font-sans); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.uc-card:hover { border-color: var(--line-strong); }
.uc-card.active { align-items: flex-start; border-color: rgba(255,95,52,0.55); }
.uc-card .ci { width: 52px; height: 52px; border-radius: 14px; background: var(--peach-tint); display: grid; place-items: center; flex: none; }
.uc-card .ci svg { width: 23px; height: 23px; color: var(--brand-coral); stroke-width: 2px; }
.uc-card .cb { flex: 1; min-width: 0; padding-top: 0; }
.uc-card.active .cb { padding-top: 12px; }
.uc-card .ct { display: block; font-size: 17px; font-weight: 600; color: var(--ink-900); line-height: 1.35; }
.uc-card .cdw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.3,.7,.3,1); }
.uc-card .cd { display: block; overflow: hidden; min-height: 0; font-size: 14.5px; line-height: 1.5; color: var(--slate-400); }
.uc-card.active .cdw { grid-template-rows: 1fr; }
.uc-card.active .cd { padding-top: 5px; padding-bottom: 4px; }

/* (mic removed — DS composer has no mic) */

/* right: square gradient stage */
.uc-right { min-width: 0; container-type: inline-size; }
.uc-stage { aspect-ratio: 1 / 1; display: flex; flex-direction: column; border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid rgba(255,255,255,0.75); box-shadow: 0 18px 44px rgba(120,30,50,.12);
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,0.55), transparent 55%),
    radial-gradient(130% 130% at 100% 100%, rgba(228,60,255,0.34), transparent 55%),
    linear-gradient(135deg, #FFF4EC 0%, #FBEAF6 100%); }

/* DS composer box (per DS composer.html: hairline card, ghost round controls, model picker, gradient send) */
.dsbox { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 0 0; box-shadow: 0 8px 10px -5px rgba(25,31,52,0.10); margin-top: auto; }
.dsbox-type { min-height: 78px; font-size: 16px; line-height: 1.6; color: var(--ink-900); padding: 0 14px; }
.dsbox-type .tchip { font-size: 13px; vertical-align: 1px; padding: 1px 8px 1px 6px; background: #fff; border-color: var(--line-strong); }
.dsbox-type .tcaret { height: 1.05em; vertical-align: -2px; }
.dsbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; margin-top: 2px; }
.dsbox-tools { display: flex; align-items: center; gap: 2px; }
.dsbox-tools button { width: 32px; height: 32px; border-radius: 999px; border: none; background: transparent; color: #6b7280; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .12s ease; }
.dsbox-tools button:hover { background: var(--surface-hover); }
.dsbox-tools button svg { width: 18px; height: 18px; stroke-width: 1.8px; }
.dsbox-tools button .galsvg { width: 20px; height: 20px; }
.dsbox-right { display: flex; align-items: center; gap: 4px; }
.dsbox-model { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-600); background: transparent; border: none; cursor: pointer; white-space: nowrap; transition: background .12s ease; }
.dsbox-model:hover { background: #F8F9FA; }
.dsbox-model img { width: 16px; height: 16px; }
.dsbox-model svg { width: 15px; height: 15px; color: var(--slate-500); stroke-width: 2px; }

/* chips under the prompt box — DS states: white → hover hairline → selected dark */
.uc-sugg { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; margin-top: 12px; min-width: 0; }
/* only 3 options per function — the 4th capability card is hidden everywhere */
.uc-pane .uc-card:nth-of-type(n+4) { display: none; }
/* stage too narrow for one row — wrap to a second centered row instead of clipping labels */
@container (max-width: 645px) {
  .uc-sugg { flex-wrap: wrap; }
}
.sg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-900); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-button); transition: background .12s ease, color .12s ease, border-color .12s ease; flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.sg-chip .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sg-chip svg { width: 14px; height: 14px; stroke-width: 1.9px; flex: none; }
.sg-chip:hover { background: var(--surface-hover); border-color: var(--line-strong); color: var(--ink-900); }
.sg-chip.active { background: var(--slate-700); border-color: var(--slate-700); color: #fff; box-shadow: var(--shadow-selected), 0 4px 12px rgba(29,38,48,0.22); }
.sg-chip.active svg { color: #fff; }

/* works-across + connectors — merged into one block pinned to the stage bottom */
.uc-works-host { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.65); display: flex; flex-direction: column; align-items: center; gap: 11px; }
.uc-works-host .ccap { font-size: 13.5px; color: var(--slate-600); font-weight: 500; }
.uc-works-host .ccap b { font-weight: 700; color: var(--ink-900); }
.uc-works-host .uc-works { display: none; margin: 0; justify-content: center; }
.uc-works-host .uc-works.on { display: flex; }
.uc-works-host .wmore { font-size: 13px; font-weight: 600; color: var(--slate-500); align-self: center; margin-left: 2px; }

@media (max-width: 920px) {
  .uc-stage { aspect-ratio: auto; }
  .dsbox-type { min-height: 56px; }
}
.wa-solved .conn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--success-500); flex: none; }
/* narrow bubble: keep titles on one line, let the action drop to its own row */
.msg .body .approve .ainfo .t, .msg .body .wa-solved .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   PRICING tiers — polished: task in, artifact out, no AI prose.
   Conversation stages are FIXED SQUARES (here + other sections).
   ============================================================ */
.tier .thread { display: flex; flex-direction: column; gap: 12px; flex: 1; border-radius: 16px; padding: 14px 13px; border: 1px solid transparent; background:
  radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,0.55), transparent 55%) padding-box,
  radial-gradient(130% 130% at 100% 100%, rgba(228,60,255,0.34), transparent 55%) padding-box,
  linear-gradient(135deg, #FFF4EC 0%, #FBEAF6 100%) padding-box,
  var(--brand-gradient) border-box; }
.tier .thread > .msg, .tier .thread > .outcome { flex-shrink: 0; }
.tier .outcome { margin-top: 2px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.tier .done-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #1F8A5B; background: rgba(255,255,255,0.7); border: 1px solid rgba(44,168,127,0.35); border-radius: 999px; padding: 4px 11px 4px 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tier .done-pill svg { width: 13px; height: 13px; }
.tier .outcome .attach { margin-top: 0; width: 100%; max-width: none; }
/* dashboard screenshot reply card */
.tier .shotcard { width: min(100%, 230px); background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-button); }
.tier .shotcard .hd { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.tier .shotcard .hd .ft { width: 18px; height: 18px; flex: none; }
.tier .shotcard .hd .nm { font-size: 12px; font-weight: 600; color: var(--ink-900); line-height: 1.25; }
.tier .shotcard .hd .sz { font-size: 10.5px; color: var(--slate-500); line-height: 1.3; }
.tier .shotcard .shot { display: block; width: 100%; height: auto; }
.tier .save-rate { margin-top: 16px; }

/* conversation stages hug their content (square removed) — a modest floor keeps panes uniform */
.vs-stage { aspect-ratio: auto; }
.vs-col { min-height: 0; }
.exp-card { aspect-ratio: auto; height: min(720px, 88vh); display: flex; flex-direction: column; }
/* top-anchor the panel in the grid row so the question + reply hold a fixed top
   position as the reply streams/expands (no vertical re-centering drift) */
.hero-panel { aspect-ratio: auto; min-height: 440px; align-self: flex-start; align-self: start; }
@media (max-width: 920px) {
  .hero-panel { aspect-ratio: auto; min-height: 400px; }
  .exp-card { aspect-ratio: auto; height: auto; }
}
@media (max-width: 880px) { .tier .thread { aspect-ratio: auto; min-height: 300px; } }
@media (max-width: 760px) { .vs-stage { aspect-ratio: auto; } }

/* ============================================================
   VS COMPARISON — v3.6
   Glass typed task w/ chips · crossfade panes · verdicts gated
   until the conversation finishes · consistent column heights.
   ============================================================ */
.vs-panes { display: grid; }
.vs-pane { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1), visibility 0s linear .45s; }
.vs-pane.active { display: block; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .5s ease .1s, transform .6s cubic-bezier(.16,1,.3,1) .1s, visibility 0s; }
.vs-pane.active .vs-col { animation: none; }
/* the task — clean white message card (no gradient wrapper) that types in */
.vs-task { max-width: 620px; margin: 0 auto 22px; }
.vs-task .msg .body { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); box-shadow: var(--shadow-button); }
.vs-task .msg .avatar { width: 38px; height: 38px; }
.vs-task .msg .avatar .badge { width: 18px; height: 18px; }
.vs-task .msg .avatar .badge img, .vs-task .msg .avatar .badge svg { width: 11px; height: 11px; }
.vs-task .msg .body { max-width: none; }
.vs-task .vt-text { min-height: 26px; font-size: 14.5px; white-space: nowrap; overflow: hidden; }
.vt-text .tchip { padding: 1px 8px 1px 6px; font-size: 13px; background: #fff; border-color: var(--line-strong); }
.vt-text .mention { font-size: 13.5px; margin: 0 1px; }
.mention.pop { animation: rpop .38s cubic-bezier(.22,1.2,.4,1) both; }
.tchip .ap { width: 14px; height: 14px; border-radius: 4px; color: #fff; font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tchip.pop { animation: rpop .38s cubic-bezier(.22,1.2,.4,1) both; }
/* the step headlines stream in — keep a steady line height while typing */
.m-trace .step .hd { min-height: 19px; }
/* both columns' conversations appear after the task is asked */
.vs-pane .vs-duo .vs-stage { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.vs-pane.asked .vs-duo .vs-stage { opacity: 1; transform: none; }
/* broke / working verdicts — floating pill, only after the conversation is done */
.vs-col .verdict { position: absolute; right: 14px; bottom: 12px; z-index: 4; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px 5px 7px; box-shadow: var(--shadow-elevation); opacity: 0; transform: scale(.7) translateY(4px); transition: opacity .35s ease, transform .4s cubic-bezier(.22,1.2,.4,1); pointer-events: none; }
.vs-pane.verdict-in .verdict { opacity: 1; transform: none; }
/* consistent heights · compact generated-site preview · no column header */
.vs-col { min-height: 320px; padding: 22px 24px 24px; }
.m-result .sbrowser img { max-height: 132px; object-fit: cover; object-position: top; }
/* claude — native reply: edited main.js + next steps left to the user */
.cla .a.cont { padding-left: 27px; }
.cla .a.cont span { color: #3d3d3a; font-size: 12.5px; line-height: 1.75; }
.cop .a img { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cop .a.muted span { color: var(--slate-500); }
.cla .ccode { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; overflow: hidden; background: #FAF9F5; }
.cla .ccode .chd { display: flex; justify-content: space-between; align-items: center; padding: 6px 11px; font-size: 11.5px; color: #6e6b64; border-bottom: 1px solid rgba(0,0,0,.06); }
.cla .ccode .chd svg { width: 13px; height: 13px; color: #8a857c; }
.cla .ccode .chd .cnote { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #B5471B; }
.cla .ccode .cbody { padding: 7px 0 9px; }
.cla .ccode .cl { display: flex; font-family: var(--font-mono); font-size: 11px; line-height: 1.75; }
.cla .ccode .ln { width: 26px; flex: none; text-align: right; padding-right: 10px; color: #b3afa6; }
.cla .ccode .ct { white-space: pre; color: #3d3d3a; }
.cla .ccode .ct .todo { color: #B5471B; }
/* each competitor shows a "thinking" line in its own branded style */
.vs-think { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; font-size: 13px; line-height: 1; }
.vs-think img { width: 16px; height: 16px; flex: none; }
.vs-think .think-shimmer { font-size: 13px; }
.vs-think.cgt img { filter: grayscale(1) opacity(.65); }      /* ChatGPT — mono */
.vs-think.cpt img { width: 17px; height: 17px; }              /* Copilot */
.vs-think.zpt .zspin { width: 14px; height: 14px; flex: none; border-radius: 999px; border: 2px solid #FFE2D2; border-top-color: #FF4F00; animation: cwspin .8s linear infinite; }
.vs-think.zpt .think-shimmer { background: linear-gradient(100deg, #C2774B 35%, #7c4a2b 50%, #C2774B 65%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: reduce) { .vs-pane .vs-duo .vs-stage, .vs-col .vc-who .verdict { opacity: 1; transform: none; } .vs-think.zpt .zspin { animation: none; } }

/* ============================================================
   VS COMPARISON — content/animation (ALL widths)
   Branded "thinking" → typed competitor response → Minded reveal +
   reasoning trace. Layout (stacked overlay vs desktop side-by-side)
   is handled separately below.
   ============================================================ */
.vs-col.lose .vs-stage > * > :not(.vs-think) { opacity: 0; }                 /* response hidden during thinking */
.vs-pane.answered .vs-col.lose .vs-stage > * > :not(.vs-think) { opacity: 1; } /* revealed; text typed in by JS */
.vs-think { opacity: 0; transition: opacity .3s ease; }
.vs-pane.asked .vs-think { opacity: 1; }
.vs-pane.answered .vs-col.lose .vs-think { display: none; }
/* .vs-col.win visibility is owned per-viewport so the desktop gradient is never
   hidden by a bleeding global rule: mobile hides+reveals the overlay (see the
   <=920px block), desktop keeps the column at opacity:1 and fades only its
   .m-thread content (see the >=921px block). No global opacity here on purpose. */
.vs-pane.zerr .vs-col.lose .znode.err { animation: zErrPulse 1.4s cubic-bezier(.22,1,.3,1) both; }
.vs-pane.zerr .vs-col.lose .zalert { animation: zErrPulse 1.4s cubic-bezier(.22,1,.3,1) .12s both; }
@keyframes zErrPulse {
  0%   { box-shadow: 0 0 0 0 rgba(214,69,42,0); }
  35%  { box-shadow: 0 0 0 4px rgba(214,69,42,.22); }
  100% { box-shadow: 0 0 0 0 rgba(214,69,42,0); }
}

/* ============================================================
   VS COMPARISON — REDESIGNED layout (all widths)
   One bordered card. A top bar INSIDE the card holds the competitor
   segment picker (left) + a static Minded brand (right); a rounded
   "VS" chip sits on the top-row divider. The user's task message is
   shown on BOTH columns; each alternative ends with a To do / Done
   status flag. Side-by-side on every width (incl. mobile).
   ============================================================ */
.vs-wrap { display: block; max-width: 980px; width: auto; margin: 34px auto 0; }

.vs-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-selected);
  overflow: hidden;
}
/* Minded gradient — one continuous fill behind the top-bar right zone +
   the win column (the columns/bar sit transparent on top of it) */
.vs-card::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%; right: 0;
  z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(120% 120% at 0% 0%, rgba(255,172,111,0.42), transparent 56%),
    radial-gradient(130% 130% at 100% 100%, rgba(228,60,255,0.26), transparent 56%),
    linear-gradient(135deg, #FFF6EF 0%, #FBEAF6 100%);
}

/* top bar — two zones aligned to the columns below; no divider, the picker and
   the Minded brand float as glass containers over the card / gradient */
.vs-bar {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 66px;
  padding: 0 14px;
}
/* segment picker — a glass container holding all 4 alternative logos */
.vs-card .vs-select {
  position: relative; top: auto; margin: 0; width: auto;
  justify-self: start;
  display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start;
  gap: 2px; padding: 4px;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.8); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(29,38,48,0.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
}
.vs-card .vs-tab { width: auto; flex: 0 0 auto; padding: 8px 11px; font-size: 13.5px; gap: 6px; }
.vs-card .vs-tab img, .vs-card .vs-tab .ico-copilot { width: 18px; height: 18px; }
.vs-card .vs-tab .vt-prog { display: none; }   /* selection shown by the sliding ink pill */
/* Minded brand — its own glass chip on the right (DS rounded corners, matches
   the segment picker — a chip, not a pill) */
.vs-brand {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 10px;
  background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.8); border-radius: 14px;
  box-shadow: 0 2px 10px rgba(29,38,48,0.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--ink-900);
}
.vs-brand .vb-logo {
  width: 30px; height: 30px; border-radius: 999px; overflow: hidden; flex: none;
  background: transparent; border: none;
  display: grid; place-items: center; box-shadow: none; padding: 0;
}
.vs-brand .vb-logo img { width: 100%; height: 100%; object-fit: contain; }

/* "VS" chip — rounded square straddling the top-row divider */
.vs-mid {
  position: absolute; z-index: 6;
  left: 50%; top: 33px;            /* centered on the top-bar logos row (bar height / 2) */
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(29,38,48,0.16), 0 2px 6px rgba(29,38,48,0.08);
  display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: 800; font-size: 14px; letter-spacing: .03em;
  color: var(--ink-900);
}

/* panes + the two-column duo */
.vs-card .vs-panes { position: relative; z-index: 1; }
.vs-card .vs-duo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border: none; border-radius: 0; box-shadow: none; background: transparent;
  overflow: visible; position: relative;
}
.vs-card .vs-duo::before { content: none; }    /* old centered "vs" removed */
.vs-card .vs-duo::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-0.5px); background: var(--line); z-index: 1; pointer-events: none; }

.vs-card .vs-col {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 26px 54px;
  min-height: 0; max-width: none;
  background: transparent;
}
.vs-card .vs-col.lose { border-right: none; }   /* divider drawn on .vs-duo so both columns keep identical content width */
.vs-card .vs-col.win { background: transparent; background-image: none; }  /* gradient comes from .vs-card::after */

/* the user task message — shown at the top of BOTH columns */
.vs-card .vs-user { gap: 11px; align-items: flex-start; margin-bottom: 2px; }
.vs-card .vs-user .avatar { width: 34px; height: 34px; }
/* both columns' task bubble fills its (equal) column → identical width + line break */
.vs-card .vs-user .body { max-width: none; flex: 1 1 auto; min-width: 0; }
.vs-card .vs-user .vt-text { white-space: normal; font-size: 14px; line-height: 1.55; min-height: 1em; overflow-wrap: anywhere; }
/* alternative (competitor) side: user bubble on a faint grey so it reads as the
   "other tool", a touch darker than the plain white column behind it */
.vs-card .vs-col.lose .vs-user .body { background: #F4F5F7; border-color: var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* the stage holds the branded "thinking" → response / Minded trace */
.vs-card .vs-stage { flex: 1; min-height: 0; }

/* To do / Done status flag — appears once the alternative's run finishes */
.vs-flag {
  position: absolute; left: 50%; bottom: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px;
  opacity: 0; transform: translateX(-50%) translateY(6px);
  transition: opacity .35s ease, transform .4s cubic-bezier(.22,1.2,.4,1);
  pointer-events: none;
}
/* To do (competitor) + Done (Minded) reveal together when the run finishes */
.vs-pane.verdict-in .vs-flag { opacity: 1; transform: translateX(-50%); }
.vs-flag .bx { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.vs-flag.todo { color: var(--slate-500); }
.vs-flag.todo .bx { border: 2px solid var(--slate-300); background: transparent; }
.vs-flag.done { color: var(--success-800); }
.vs-flag.done .bx { background: var(--success-500); box-shadow: 0 3px 8px rgba(44,168,127,0.3); }
.vs-flag.done .bx svg { width: 15px; height: 15px; color: #fff; stroke-width: 3px; }

/* Minded thread avatar matches the user profile pic + alternative logo (34px) */
.vs-card .vs-col.win .m-thread .avatar.minded { width: 34px; height: 34px; }
/* win column reveals its Minded thread once the competitor has answered */
/* reveal fades IN on .asked; reset (pane switch) is instant — no fade-out
   blink when the carousel advances to the next alternative */
.vs-card .vs-col.win .m-thread { opacity: 0; }
.vs-card .vs-pane.asked .vs-col.win .m-thread { opacity: 1; transition: opacity .45s ease; }

/* the icon+name response header is mobile-only; desktop keeps the inline answer logo + side avatar */
.vs-rhead { display: none; }
.mhead .rlogo { display: none; }

/* ---- desktop (>=921px): fixed height so the card doesn't jump on tab switch ---- */
@media (min-width: 921px) {
  .vs-card .vs-duo { height: 452px; }
  .vs-card .vs-col { height: 100%; }
  /* keep the dashboard preview short enough that it never collides with the Done flag */
  .vs-card .vs-col.win .pcard { margin-top: 10px; }
  .vs-card .vs-col.win .pcard .thumb { height: 150px; }
}

/* ---- mobile/tablet (<=920px): still side-by-side, condensed; the Minded
   answer is MINIMIZED (no heavy preview media) ---- */
@media (max-width: 920px) {
  /* no white card on mobile — the picker / VS / Minded chips + the two columns
     float straight on the page; tighter margins now that the box is gone */
  .vs-card { border-radius: 0; background: transparent; border: none; box-shadow: none; overflow: visible; }
  /* tighten the gap between the section heading and the comparison (the pinned
     viewport stacks them with a 12px flex gap) */
  #solution .pv-vs-inner { gap: 4px; }
  #solution .section-head { margin-bottom: 0; }
  /* ONE glass container holds the 4 alternative logos + VS + the Minded logo */
  .vs-bar {
    grid-template-columns: 1fr 1fr; align-items: center; height: 46px;
    margin: 0 2px 12px; padding: 3px 8px;
    background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.85); border-radius: 14px;
    -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 2px 10px rgba(29,38,48,0.06);
  }
  /* the three zones sit transparent INSIDE the one glass bar */
  .vs-card .vs-select { padding: 0; gap: 0; background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vs-brand { justify-self: center; padding: 0; gap: 7px; background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vs-brand .vb-nm { display: inline; font-size: 14px; font-weight: 700; color: var(--ink-900); }   /* show "Minded" next to the centered logo */
  .vs-brand .vb-logo { width: 24px; height: 24px; }
  .vs-card .vs-tab { height: 30px; padding: 0 6px; gap: 0; font-size: 12.5px; }
  .vs-card .vs-tab img, .vs-card .vs-tab .ico-copilot { width: 16px; height: 16px; }
  .vs-card .vs-tab .tt { display: none; }              /* logos only — no names at the top */

  /* user message shown on BOTH columns (like desktop) with its profile pic */
  .vs-card .vs-user { gap: 8px; margin-bottom: 0; }
  .vs-card .vs-user .avatar { width: 26px; height: 26px; }
  /* same bg shade on BOTH columns' user message */
  .vs-card .vs-col .vs-user .body { padding: 7px 11px 8px; background: #F4F5F7; border: 1px solid var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .vs-card .vs-user .vt-text { font-size: 12px; line-height: 1.4; }
  .vs-card .vs-user .mhead { display: none; }   /* drop the name + "now" — just the task text */
  /* inline app chips (QuickBooks, Stripe, Sheets…) — compact, logo sized to the
     12px text and vertically centred so they sit cleanly on the line */
  .vs-card .vt-text .tchip { padding: 0 6px 0 4px; gap: 4px; font-size: 11.5px; line-height: 1.5; vertical-align: -3px; }
  .vs-card .vt-text .tchip img { width: 13px; height: 13px; }
  .vs-card .vt-text .tchip .ap { width: 13px; height: 13px; font-size: 7px; }

  /* VS is a plain label inside the glass bar (no separate chip); the column
     divider runs BELOW it; the gradient strip stays off */
  .vs-card::after { display: none; }
  .vs-card .vs-duo::after { display: block; }   /* separator line below VS, between the columns */
  .vs-mid { display: grid; width: auto; height: auto; top: 23px; padding: 0; background: transparent; border: none; box-shadow: none; border-radius: 0; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
  .vs-card .vs-duo::before { content: none; }
  .vs-card .vs-duo { min-height: 0; position: relative; }
  .vs-card .vs-col.lose { border-bottom: none; }   /* drop the bottom separator line */

  .vs-card .vs-col { padding: 12px 10px 42px; gap: 9px; }   /* extra bottom room so the answer clears the To do / Done flag */
  .vs-card .vs-col .vs-stage { overflow: visible; }   /* let the answer bubble's shadow show */

  /* response header — competitor shows JUST its logo (name dropped); Minded shows
     its logo + wordmark. Both centered above the answer bubble. */
  .vs-card .cg .a > img, .vs-card .cla .a > img, .vs-card .cop .a > img { display: none; }  /* inline logo replaced by the header */
  .vs-card .vs-rhead { display: none; }   /* no logo, no name — the answer speaks for itself (top bar identifies the tool) */
  .vs-card .vs-rhead img { display: none; }   /* drop the per-bubble logo — name only (top bar shows the logo) */
  .vs-card .vs-rhead .nm { display: inline; font-family: var(--font-sans); font-weight: 700; font-size: 12px; color: var(--ink-900); }
  .vs-card .vs-col.win .m-thread .avatar.minded { display: none; }   /* side avatar off — icon shows inline */
  .vs-card .vs-col.win .m-thread { gap: 0; }
  .vs-card .vs-col.win .m-thread .body { background: linear-gradient(150deg, #FFF4EC 0%, #FBEAF6 100%); border: none; border-radius: 14px; padding: 11px 12px; box-shadow: 0 8px 22px rgba(29,38,48,0.12); }  /* light brand-gradient bubble — no border, just elevation */
  .vs-card .vs-col.win .m-thread .mhead { display: none; }   /* drop the Minded header in the bubble too */
  .vs-card .vs-col.win .m-thread .mhead .rlogo { display: none; }   /* drop the per-bubble logo — name only */
  .vs-card .vs-col.win .m-thread .mhead .nm { display: inline; font-size: 12px; font-weight: 700; color: var(--ink-900); }
  .vs-card .vs-col.win .m-thread .mhead .time { display: none; }

  /* condensed competitor content; response text matched to the Minded answer (12px) */
  .vs-col .resp, .vs-col .text, .vs-col .m-result .text { overflow-wrap: anywhere; }
  .vs-card .vs-col .vs-think { font-size: 11px; margin-bottom: 8px; }
  /* one consistent answer size across every competitor pane (beats the inline
     .cla .a.cont span 15px rule via higher specificity) */
  .vs-card .cg .a, .vs-card .cg .a span,
  .vs-card .cla .a, .vs-card .cla .a span, .vs-card .cla .a.cont, .vs-card .cla .a.cont span,
  .vs-card .cop .a, .vs-card .cop .a span { font-size: 12px; line-height: 1.5; }
  .vs-card .cla .a.cont { padding-left: 0; }
  /* each AI answer sits in a white elevated bubble (competitor wrappers + Minded body) */
  .vs-card .cg, .vs-card .cla, .vs-card .cop { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; gap: 8px; box-shadow: 0 6px 18px rgba(29,38,48,0.08); }
  /* drop the code block on mobile so the Claude answer is no taller than Minded's */
  .vs-card .cla .ccode { display: none; }
  /* minimized Zap editor on mobile: white elevated bubble like the other answers,
     content hugged to the top (was a stretched, centre-aligned editor canvas) */
  .vs-card .zap { transform: none; flex: 0 0 auto; justify-content: flex-start; gap: 0;
    background: #fff; background-image: none; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 6px 18px rgba(29,38,48,0.08); padding: 11px 12px; }
  .vs-card .zap .zstem, .vs-card .zap .zalert, .vs-card .zap .zacts { display: none; }
  .vs-card .zap .zconn { height: 16px; }
  .vs-card .zap .znode { padding: 7px 9px; gap: 8px; border-radius: 8px; }
  .vs-card .zap .zic { width: 26px; height: 26px; border-radius: 6px; }
  .vs-card .zap .zic img { width: 15px; height: 15px; }
  .vs-card .zap .zic .zg { font-size: 12px; }
  .vs-card .zap .zdot { width: 13px; height: 13px; top: -5px; left: -5px; }
  .vs-card .zap .zt { font-size: 10.5px; line-height: 1.25; }

  /* keep the file-chip attachment (e.g. ChatGPT's May close.xlsx); drop the file size */
  .vs-card .vs-col.win .m-result .attach { margin-top: 10px; padding: 8px 11px 8px 9px; }
  .vs-card .vs-col.win .m-result .attach .ft { width: 24px; height: 24px; }
  .vs-card .vs-col.win .m-result .attach .nm { font-size: 12px; }
  .vs-card .vs-col.win .m-result .attach .arow { display: none; }   /* drop size + Preview button (overflowed the narrow chip) — just [icon] filename */
  .vs-card .vs-col.win .m-result .attach .nm { white-space: normal; overflow-wrap: anywhere; }   /* let a long filename wrap instead of clip */
  .vs-card .vs-col.win .m-result .attach .sz { white-space: normal; overflow-wrap: anywhere; font-size: 10.5px; }   /* zapier "Set up successfully" status wraps instead of overflowing */
  .vs-card .vs-col.win .m-result .attach .fticon { width: 22px; height: 22px; }   /* a touch smaller → more room for the label */
  /* preview card: a touch taller, lighter caption bar so the chart isn't buried */
  .vs-card .vs-col.win .m-result .pcard { margin-top: 10px; }
  .vs-card .vs-col.win .m-result .pcard .thumb { height: 116px; object-fit: cover; object-position: left top; }
  .vs-card .vs-col.win .m-result .pcard .pname { padding: 14px 10px 7px; font-size: 11px; }
  .vs-card .vs-col.win .m-result .pcard .pname svg { width: 12px; height: 12px; }
  .vs-card .vs-col.win .m-result .text { font-size: 12px; line-height: 1.5; }
  .vs-card .m-stream .shimline { font-size: 11px; }

  .vs-flag { left: 50%; bottom: 10px; font-size: 11.5px; gap: 6px; line-height: 1; }
  /* To do + Done boxes identical size regardless of border vs fill */
  .vs-flag .bx { width: 19px; height: 19px; box-sizing: border-box; border-radius: 6px; }
  .vs-flag.done .bx svg { width: 11px; height: 11px; }
}

/* ============================================================
   BROWSER pane 1 — NetSuite Purchase Order create page
   (Minded fills the vendor + saves)
   ============================================================ */
.cw-page.netsuitex { padding: 0; background: #f4f5f5; display: flex; flex-direction: column; overflow: hidden; }
.netsuitex .ns-top { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; background: #2b2d36; color: #fff; flex: none; }
.netsuitex .ns-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; flex: none; }
.netsuitex .ns-mark { width: 19px; height: 19px; flex: none; border-radius: 5px; }
.netsuitex .ns-oracle { font-weight: 800; letter-spacing: .02em; }
.netsuitex .ns-ns { color: #c9ccd6; font-weight: 500; }
.netsuitex .ns-search { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 4px; background: rgba(255,255,255,0.12); color: #c9ccd6; font-size: 11px; }
.netsuitex .ns-search svg { width: 12px; height: 12px; }
.netsuitex .ns-sp { flex: 1; }
.netsuitex .ns-ic svg { width: 15px; height: 15px; color: #c9ccd6; }
.netsuitex .ns-user { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; flex: none; }
.netsuitex .ns-uav { width: 22px; height: 22px; border-radius: 999px; background: #4b6cb7; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.netsuitex .ns-nav { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 10px; background: #3a5a8c; color: #d8e2f0; flex: none; }
.netsuitex .ns-nav span { padding: 0 10px; height: 32px; display: inline-flex; align-items: center; font-size: 11.5px; }
.netsuitex .ns-nav .ns-home svg { width: 14px; height: 14px; }
.netsuitex .ns-nav .on { background: rgba(255,255,255,0.18); color: #fff; font-weight: 600; border-radius: 4px; }
.netsuitex .ns-bd { flex: 1; min-height: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.netsuitex .ns-ph { display: flex; align-items: center; gap: 10px; }
.netsuitex .ns-ph h4 { margin: 0; font-size: 17px; font-weight: 700; color: #1f2733; }
.netsuitex .ns-pill { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #fdeccd; color: #8a5a00; }
.netsuitex .ns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.netsuitex .ns-fr { display: flex; align-items: center; gap: 8px; }
.netsuitex .ns-fr .nlb { width: 54px; flex: none; font-size: 10.5px; color: #6b7280; }
.netsuitex .ns-fr .nfld { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 5px; background: #fff; border: 1px solid #cfd4dc; font-size: 11.5px; color: #1f2733; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.netsuitex .ns-fr .nfld.ro { background: #f0f1f3; border-color: #e2e4e8; color: #4b5563; }
.netsuitex .ns-fr .nfld i { width: 12px; height: 12px; color: #9aa1ad; margin-left: auto; flex: none; }
.netsuitex .ns-fr .nfld .nph { color: #9aa1ad; }
.netsuitex .ns-fr .nfld.filled { border-color: #3a5a8c; box-shadow: inset 0 0 0 1px #3a5a8c; color: #1f2733; font-weight: 600; }
.netsuitex .ns-fr .nfld.filled .nph { display: none; }
/* vendor dropdown — opens when Minded clicks the field, so the recording looks real */
.netsuitex .ns-vrow { position: relative; }
.netsuitex .ns-fr .nfld.focus { border-color: #3a5a8c; box-shadow: inset 0 0 0 1px #3a5a8c; }
.netsuitex .ns-dd { position: absolute; left: 62px; right: 0; top: 31px; z-index: 8; background: #fff; border: 1px solid #cfd4dc; border-radius: 6px; box-shadow: 0 14px 32px rgba(29,38,48,0.18); padding: 4px; display: none; }
.netsuitex .ns-vrow.open .ns-dd { display: block; animation: bwfade .16s ease both; }
.netsuitex .ns-opt { display: block; padding: 7px 10px; border-radius: 5px; font-size: 11.5px; color: #1f2733; }
.netsuitex .ns-opt.hot { background: #e3edf8; }
.netsuitex .ns-items { border: 1px solid #cfd4dc; border-radius: 6px; overflow: hidden; background: #fff; }
.netsuitex .ns-it { display: grid; grid-template-columns: 1fr 44px 72px 84px; gap: 8px; padding: 9px 12px; font-size: 11.5px; color: #1f2733; align-items: center; }
.netsuitex .ns-it .c2, .netsuitex .ns-it .c3, .netsuitex .ns-it .c4 { text-align: right; font-variant-numeric: tabular-nums; }
.netsuitex .ns-it.th { background: #f0f1f3; color: #6b7280; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e2e4e8; }
.netsuitex .ns-foot { display: flex; align-items: center; justify-content: space-between; }
.netsuitex .ns-tot { display: flex; align-items: baseline; gap: 9px; }
.netsuitex .ns-tot .tl { font-size: 11px; color: #6b7280; }
.netsuitex .ns-tot .tv { font-size: 18px; font-weight: 700; color: #1f2733; }
.netsuitex .ns-btn.save { height: 34px; padding: 0 22px; border-radius: 6px; border: none; background: #3a5a8c; color: #fff; font-family: var(--font-sans); font-size: 13px; font-weight: 600; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.netsuitex .ns-btn.save.pressed { transform: scale(.96); box-shadow: 0 0 0 3px rgba(58,90,140,.32); }
.netsuitex .ns-saved { display: none; align-items: center; gap: 8px; margin-top: 1px; padding: 9px 13px; border-radius: 8px; background: #e6f4ea; color: #1f7a45; font-size: 12px; font-weight: 600; }
.netsuitex .ns-saved .nck { width: 18px; height: 18px; border-radius: 999px; background: #1f9d57; color: #fff; display: grid; place-items: center; flex: none; }
.netsuitex .ns-saved .nck svg { width: 12px; height: 12px; }
.netsuitex .ns-saved.in { display: inline-flex; animation: bwfade .4s ease both; }
@media (max-width: 760px) {
  .netsuitex .ns-search { display: none; }
  .netsuitex .ns-user .ns-un { display: none; }
  .netsuitex .ns-bd { padding: 13px 14px; gap: 10px; }
  .netsuitex .ns-grid { grid-template-columns: 1fr; gap: 7px; }
  .netsuitex .ns-ph h4 { font-size: 16px; }
  .netsuitex .ns-nav span { padding: 0 8px; font-size: 10.5px; }
  .netsuitex .ns-it { grid-template-columns: 1fr 28px 54px 64px; gap: 6px; font-size: 11px; padding: 8px 11px; }
  .netsuitex .ns-tot .tv { font-size: 16px; }
}


/* ============================================================
   BROWSER pane 3 — Lumen & Co order admin, recorded live
   ============================================================ */
.favic.axfav { color: #B45309; }
.cw-page.adminx { padding: 0; background: #F7F7F5; display: flex; flex-direction: column; overflow: hidden; }
.ax-top { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 14px; background: #fff; border-bottom: 1px solid #ECECE8; flex: none; }
.ax-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: #1A1A1A; flex: none; }
.ax-logo i { font-style: normal; color: #B45309; }
/* record demo operates the store's Shopify admin — Shopify bag + green accents */
.ax-logo .ax-shop { width: 17px; height: 19px; flex: none; }
.ax-crumb { font-size: 10.5px; color: #8A8A82; }
.ax-crumb b { font-weight: 400; color: #C2C2BA; }
.ax-search { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; background: #F2F2EE; color: #8A8A82; font-size: 10.5px; flex: none; }
.ax-search svg { width: 11px; height: 11px; }
.ax-av { width: 22px; height: 22px; border-radius: 999px; background: #1D2630; color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ax-main { flex: 1; min-height: 0; display: flex; }
.ax-side { width: 106px; flex: none; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid #ECECE8; background: #FBFBF9; }
.ax-nav { display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 10.5px; color: #5A5A52; }
.ax-nav svg { width: 12px; height: 12px; flex: none; }
.ax-nav.on { background: #E3F1EC; color: #008060; font-weight: 700; }
.ax-nav.on svg { color: #008060; }
.ax-body { flex: 1; min-width: 0; padding: 11px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ax-head .t { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #1D2630; letter-spacing: -0.01em; }
.ax-head .chip { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #FDF1D7; color: #92400E; }
.ax-head .s { font-size: 10px; color: #8A8A82; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-item { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #ECECE8; border-radius: 10px; padding: 8px 11px; }
.ax-item .thumb { width: 30px; height: 30px; border-radius: 8px; background: #F2F2EE; color: #5A5A52; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ax-item .thumb svg { width: 15px; height: 15px; }
.ax-item .inf { display: flex; flex-direction: column; min-width: 0; }
.ax-item .inf b { font-size: 11px; font-weight: 600; color: #1D2630; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-item .inf span { font-size: 9.5px; color: #8A8A82; }
.ax-item .amt { margin-left: auto; font-size: 11.5px; font-weight: 700; color: #1D2630; font-variant-numeric: tabular-nums; flex: none; }
.ax-actions { display: flex; gap: 8px; }
.ax-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: 8px; border: 1px solid #DCDCD4; background: #fff; color: #1D2630; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.ax-btn svg { width: 12px; height: 12px; }
.ax-btn.dark { background: #1D2630; border-color: #1D2630; color: #fff; }
/* issue refund — green confirm action; starts disabled, enables once the form is filled */
.ax-btn.issue { background: var(--success-500); border-color: var(--success-500); color: #fff; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .12s ease, box-shadow .12s ease; }
.ax-btn.issue:hover { background: var(--success-800); border-color: var(--success-800); }
.ax-btn.issue:disabled { background: #ECECE6; border-color: #E3E3DC; color: #A6A69C; cursor: default; }
.ax-btn.pressed { transform: scale(.96); box-shadow: 0 0 0 3px rgba(29,38,48,0.18); }
.ax-btn.issue.pressed { box-shadow: 0 0 0 3px rgba(44,168,127,0.28); }
.ax-form { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .4s ease; display: flex; flex-direction: column; gap: 7px; background: #fff; border: 1px solid #ECECE8; border-radius: 10px; padding: 0 11px; }
.ax-form.in { max-height: 150px; opacity: 1; padding: 9px 11px; }
.ax-form .fr { display: flex; align-items: center; gap: 8px; }
.ax-form .lb { width: 58px; flex: none; font-size: 9.5px; color: #8A8A82; }
.ax-form .fld { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 9px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #DCDCD4; font-size: 10.5px; color: #1D2630; font-variant-numeric: tabular-nums; transition: box-shadow .2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax-form .fld svg { width: 11px; height: 11px; color: #8A8A82; flex: none; }
.ax-form .fld.ro { background: #FAFAF8; color: #5A5A52; }
.ax-form .fld .caret { display: none; color: #8A8A82; }
.ax-form .fld.focus { box-shadow: inset 0 0 0 1.5px #1D2630; }
.ax-form .fld.focus .caret { display: inline; animation: cwblink 1.1s steps(1) infinite; }
.ax-form .ax-btn.sm { align-self: flex-start; margin-top: 1px; }
.ax-toast { position: absolute; left: 14px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 9px; background: #1D2630; color: #fff; font-size: 10.5px; box-shadow: 0 8px 20px rgba(29,38,48,0.3); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; z-index: 3; white-space: nowrap; }
.ax-toast svg { width: 13px; height: 13px; color: #5CD49C; flex: none; }
.ax-toast.in { opacity: 1; transform: none; }
.adminx .cw-recbadge { left: auto; right: 12px; top: 46px; }
/* panel step extras */
.cw-rail .rbtnwrap { position: relative; display: inline-flex; }
.cw-rail .rbtn { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; background: #1D2630; color: #fff; font-size: 10.5px; font-weight: 600; }
.cw-rail .rbtn.green { background: var(--success-500); }
.cw-rail .rbtn svg { width: 11px; height: 11px; }
.cw-rail .rbtnwrap .rclick { left: auto; right: -7px; top: 50%; }
.cw-rail .rt b { font-weight: 700; }
.cw-rail .rstep.fin .rt { color: var(--ink-700); margin-bottom: 0; }
.cw-rail .cw-runrow.train { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .ax-form { transition: none; } }


/* pane 2 — DS thinking stream inside the side panel + serif AI reply */
.cw-run .m-thread { display: flex; flex-direction: column; min-width: 0; }
.cw-run .m-stream .shimline { font-size: 12px; gap: 7px; margin-bottom: 8px; }
.cw-run .m-stream .shimline .lb svg { width: 14px; height: 14px; }
.cw-run .m-trace .step { padding: 0 0 10px 24px; }
.cw-run .m-trace .step > .ic { width: 16px; height: 16px; }
.cw-run .m-trace .step > .ic svg { width: 13px; height: 13px; }
.cw-run .m-trace .step::before { left: 7.5px; top: 19px; }
.cw-run .m-trace .step .hd { font-size: 11.5px; line-height: 16px; }
.cw-run .m-result { display: block; font-family: var(--font-serif); font-size: 14px; line-height: 1.5; color: var(--ink-900); }


/* ============================================================
   POLISH PASS v3.7 — review feedback (Jun 11)
   ============================================================ */

/* Minded avatar — gradient disc fills the circle, no white ring */
.msg .avatar.minded { border: none; box-shadow: none; background: transparent; }
.msg .avatar.minded > img { width: 100%; height: 100%; object-fit: contain; }

/* hero compliance badges — left-aligned, stacks anchored left */
.trust-row.hero-trust { justify-content: flex-start; }
.hero-trust .trust-stack { align-items: flex-start; text-align: left; }

/* trusted-by — quiet caption (matches the free-credits row), bigger marks, marquee */
.trusted .cap { font-size: 14.5px; font-weight: 400; color: var(--fg3); }
.marks-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marks-track { display: flex; width: max-content; animation: marqueeX 30s linear infinite; }
.marks-marquee:hover .marks-track { animation-play-state: paused; }
.marks-track .marks { flex: none; display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 0 40px; padding-right: 40px; }
@keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.trusted .marks .wm { font-weight: 600; color: var(--slate-400); opacity: .92; }
.trusted .marks .wm:hover { color: var(--slate-700); opacity: 1; }
.trusted .marks .wm.parfois { font-size: 20px; font-weight: 500; letter-spacing: .22em; }
.trusted .marks .wm.wolt { font-size: 27px; font-weight: 800; letter-spacing: -0.04em; }
.trusted .marks .wm.headout { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.trusted .marks .wm.ontop { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
@media (prefers-reduced-motion: reduce) {
  .marks-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marks-track .marks { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marks-track .marks[aria-hidden="true"] { display: none; }
  .marks-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* mobile: static 2-per-row logo grid instead of the slider */
@media (max-width: 700px) {
  .trusted { height: auto; padding: 26px 0; }
  /* hug the screen edges so logos get more room */
  .trusted .container { padding-left: 12px; padding-right: 12px; }
  .marks-marquee { -webkit-mask-image: none; mask-image: none; }
  .marks-track { animation: none; width: auto; display: block; }
  .marks-track .marks[aria-hidden="true"] { display: none; }
  /* flex (not grid) so a partial last row stays centered */
  .marks-track .marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px 24px;
    padding-right: 0;
  }
  .marks-track .marks .lw {
    flex: 0 0 calc((100% - 24px) / 2);   /* 2 per row (2×5), 24px column gap */
    min-width: 0;                        /* let wide logos shrink to the basis */
    justify-content: center;
  }
  /* keep tuned heights but stop wide logos squishing when the cell clamps
     their width — object-fit:contain preserves aspect ratio */
  .marks-track .marks img.logo {
    max-width: 100%;
    object-fit: contain;
    /* full colour on mobile (desktop keeps the greyscale wall) */
    opacity: 1;
    filter: none;
  }
  /* Ontop's wordmark is white → invert so it reads on the light backdrop */
  .marks-track .marks img[alt="Ontop"] { filter: invert(1); }
}

/* consistent display size across sections */
.bwx-head h2.display { font-size: clamp(30px, 3.9vw, 50px); }

/* VS — bigger competitor responses, competitor logo at Minded-avatar size */
.cop .a, .cg .a, .cla .a { font-size: 15px; line-height: 1.6; }
.cg .a > img, .cla .a > img, .cop .a > img { width: 34px; height: 34px; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; margin-top: 0; }

/* use cases — one fold, DS cards, expanding persona descriptions */
#usecases > .container { min-height: 100vh; }
#usecases .usecase { position: relative; height: 100vh; }
#usecases .uc-left { justify-content: center; padding: clamp(32px, 5vh, 64px) clamp(28px, 4.5vw, 84px); }
.uc-left h2 { margin: 0 0 20px; }
.uc-tabs { gap: 9px; }
.uc-tab { flex-direction: column; align-items: stretch; gap: 0; padding: 11px 14px; }
.uc-tab .tp { display: flex; align-items: center; gap: 11px; width: 100%; }
.uc-tab .tp > svg { width: 18px; height: 18px; flex: none; }
.uc-tab.active .tp > svg { color: var(--ink-900); }
.uc-tab .tdw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.3,.7,.3,1); }
.uc-tab .td { display: block; overflow: hidden; min-height: 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--slate-500); text-align: left; }
.uc-tab.active .tdw { grid-template-rows: 1fr; }
.uc-tab.active .td { padding-top: 5px; }
.uc-panes { margin-top: 14px; }
.uc-panes .uc-pane.active { gap: 8px; }
.uc-card { padding: 13px 16px; gap: 13px; border-radius: 16px; box-shadow: var(--shadow-button); }
.uc-card:hover { box-shadow: var(--shadow-elevation); }
.uc-card .ci { width: 44px; height: 44px; border-radius: 12px; }
.uc-card .ci svg { width: 20px; height: 20px; }
.uc-card .ct { font-size: 15.5px; }
.uc-card .cd { font-size: 13.5px; }
.uc-card.active .cb { padding-top: 8px; }

/* browser — one tab rail with a sliding indicator + crossfading panes */
/* single indicator: the gradient .bw-ind owns selection — the old pill ink is retired */
.bw-tabs .bw-ink { display: none; }
.bw-tabs { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 7px; gap: 6px; box-shadow: var(--shadow-button); }
.bw-tabs .bw-tab { position: relative; z-index: 1; border: none; background: transparent; box-shadow: none; }
.bw-tabs .bw-tab.active { border: none; box-shadow: none; }
.bw-ind { position: absolute; left: 0; top: 7px; width: 0; height: 0; border-radius: 12px; background: var(--surface-muted-2); border: 1px solid var(--line); transition: left .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1), top .45s cubic-bezier(.22,1,.36,1), height .45s cubic-bezier(.22,1,.36,1); pointer-events: none; }
/* surfaces rail — 5 tabs; only the selected tab reveals its label (icons collapse) */
.bw-tabs { display: flex; justify-content: center; gap: 4px; width: -moz-fit-content; width: fit-content; max-width: 100%; overflow: hidden; }
/* when the rail is wider than the viewport, scroll it instead of clipping. The active
   pill is always kept fully in view with margin (JS scrolls it to clear the fade), and a
   soft mask fades only the overflowing edge(s). .is-scrollable / .at-start / .at-end
   are toggled from JS (bwTabsFit). */
.bw-tabs.is-scrollable { justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); }
.bw-tabs.is-scrollable::-webkit-scrollbar { display: none; }
.bw-tabs.is-scrollable.at-start { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%); }
.bw-tabs.is-scrollable.at-end { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 100%); }
.bw-tabs.is-scrollable.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
.bw-tab { flex: 0 0 auto; }
.bw-tab:not(.active) { gap: 0; padding: 0 13px; }
.bw-tab:not(.active) .tt { display: none; }
.bw-tab.active { padding: 0 18px; }
.bw-panes { display: grid; grid-template-columns: minmax(0, 1fr); }
.bw-pane { display: flex; flex-direction: column; justify-content: center; grid-area: 1 / 1; height: 100%; opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; animation: none; transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s; }
.bw-pane.active { display: flex; opacity: 1; visibility: visible; transform: none; pointer-events: auto; animation: none; transition: opacity .5s ease .08s, transform .6s cubic-bezier(.16,1,.3,1) .08s, visibility 0s; }

/* CTA buttons follow the DS gradient primary */
.btn-cta { background: var(--brand-gradient-cta); background-size: 180% 180%; box-shadow: var(--shadow-glow); }
.btn-cta:hover { box-shadow: 0 10px 30px rgba(255,95,52,0.2), 0 10px 30px rgba(228,60,255,0.14); transform: translateY(-1px); }

/* pricing — DS browser-preview for the dashboard artifact */
.tier .sbrowser { width: 100%; margin-top: 0; }
.tier .sbrowser .tb .tab { max-width: 100%; overflow: hidden; }

/* @minded / /human mentions — brand gradient text, no blue highlight */
.mention, .mw-msg.user .mention { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--brand-coral); padding: 0; border-radius: 0; font-weight: 600; }

/* /human offer — DS primary accept + elevated accepted tag */
.approve .ok { background: var(--surface-ink); background-image: none; color: #fff; border: none; box-shadow: var(--shadow-button), 0 4px 12px rgba(29,38,48,0.16); }
.approve .ok:hover { background: var(--ink-700); opacity: 1; }
.approve .approved-tag { background: #fff; border: 1px solid var(--line); color: var(--ink-900); box-shadow: var(--shadow-elevation); }
.approve .approved-tag svg { color: var(--success-500); }

/* fixed-scroll folds — each major section pins, the next slides over it */
.bw-runway { height: 0; }
/* section containment — ALL viewports (the deck media query below only covers
   tall windows; short-but-wide windows, e.g. Retina laptops at 2x where
   innerHeight < 740, fall through to flow layout). Every major section must
   (a) clip its own internals — 100vh stages and fixed-height panes overflow
   their section box at small vh and paint over the next section — and
   (b) isolate its stacking context so inner z-indexed elements can't escape
   above a neighboring section. overflow:clip keeps inner sticky working. */
.problem-x, #hire, .testi, #usecases, .browserx, .pricing, #experts, .footer { isolation: isolate; overflow: clip; }
@media (min-width: 900px) and (min-height: 740px) {
  /* #experts is the LAST stacked card — it must NOT pin: it's nested inside the
     sticky .page-above (footer-freeze for the outro), and a sticky child whose
     release point coincides with the wrapper's freeze point jumps/stutters at the
     experts→footer seam. Letting it scroll normally over the pinned .pricing keeps
     the stacked-card reveal and removes the conflict. */
  #hire, .testi, #usecases, .browserx, .pricing { position: sticky; top: 0; }
  /* each stacked card is its own stacking context — without this, z-indexed bits
     inside an earlier pinned section (.dd-cursor z9, .mw-chat z3, .dd-toast z6 …)
     escape into the page stacking context and paint ABOVE the next card's
     z-auto background (sticky alone does not isolate in desktop Chrome) */
  .problem-x, #hire, .testi, #usecases, .browserx, .pricing, #experts, .footer { isolation: isolate; }
  /* #experts doesn't pin (see note above) but must still paint as one opaque card
     ABOVE the pinned .pricing: as a static element its white background paints in
     the early (non-positioned) layer below the sticky .pricing, while its
     transformed > .container (entrance parallax) paints above it — double-exposing
     both sections at the pricing→experts seam. Lifting the whole section into the
     positioned layer restores the opaque slide-over. */
  #experts { position: relative; z-index: 1; }
  /* stacked-card edge — big rounded top corners + clip (overflow:clip keeps inner sticky working) */
  .problem-x, #hire, .testi, #usecases, .browserx, .pricing, #experts, .footer { border-radius: 44px 44px 0 0; overflow: clip; }
  /* covering edge — soft light shadow above each card so it floats over the pinned one below */
  .problem-x, #hire, .testi, #usecases, .browserx, .pricing, #experts { box-shadow: 0 -18px 44px rgba(29,38,48,0.13), 0 -2px 0 rgba(255,255,255,0.06); }
  /* entrance parallax — JS drives --enter (1 → 0) while the card slides in */
  .problem-x > .container, #hire > .container, .testi > .container, #usecases > .container, .browserx > .container, .pricing > .container, #experts > .container {
    transform: translateY(calc(var(--enter, 0) * 52px));
  }
  #hire, .browserx, #experts, .pricing { min-height: 100vh; display: flex; align-items: center; background: #fff; }
  #hire > .container, .browserx > .container, #experts > .container, .pricing > .container { width: 100%; }
  .testi { min-height: 100vh; }
  #usecases { background: #fff; }
  .footer { position: relative; background: #fff; }
  .pv-vs .vs-stage { max-height: 46vh; }
  .browserx { padding-top: 24px; padding-bottom: 24px; }
  .bw-panes { height: min(500px, 58vh); }
  .bw-panes .chromewin { max-height: 100%; }
  .pricing { padding-top: 24px; padding-bottom: 24px; }
}

/* ============================================================
   POLISH PASS v3.8 — review feedback (Jun 11, round 2)
   ============================================================ */

/* thinking stream label — the DS AI serif voice */
.think-shimmer { font-family: var(--font-serif); }

/* hero CTAs — more emphasis */
.hero-cta { gap: 12px; }
/* show the FULL DS gradient tones (pink→coral→tan) — the 180% zoom+drift crops them */
.hero-cta .btn-cta, .nav-actions .btn-cta { background-size: 100% 100%; animation: none; }
/* hero CTAs use the DS MARKETING button (.btn.mkt): 44px tall · 14px radius · 18px/500 · gradient-cta + glow.
   text-only buttons → symmetric padding (left = right) */
.hero-cta .btn { height: 44px; padding: 0 22px; border-radius: 14px; font-size: 18px; font-weight: 500; gap: 9px; box-shadow: var(--shadow-button); }
.hero-cta .btn-cta { background: var(--brand-gradient-cta); border: none; color: #fff; box-shadow: var(--shadow-glow); }
.hero-cta .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(255,95,52,0.24), 0 12px 34px rgba(228,60,255,0.16); }
.hero-cta .btn-secondary { background: #fff; color: var(--ink-900); border: 1px solid rgba(0,0,0,0.08); box-shadow: var(--shadow-button); }
.hero-cta .btn-secondary:hover { transform: translateY(-1px); border-color: rgba(0,0,0,0.22); box-shadow: 0 6px 18px rgba(29,38,48,0.12); }
/* top-bar marketing CTA = same DS marketing button as the hero (identical 44px height, symmetric padding) */
/* both top-bar buttons are the DS MARKETING button (44px · 14px radius · 18px/500) — login + CTA share one height */
.nav-actions .btn { height: 44px; padding: 0 22px; border-radius: 14px; font-size: 18px; font-weight: 500; gap: 9px; }
.nav-actions .btn-cta { background: var(--brand-gradient-cta); border: none; color: #fff; box-shadow: var(--shadow-glow); }
.nav-actions .btn-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,95,52,0.22), 0 10px 28px rgba(228,60,255,0.15); }

/* segmented selection controls (DS): muted rail · active = marketing card with gradient flow */
@keyframes segflow { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 100% 50%; } }
.bw-tabs { background: var(--surface-muted); background-image: none; border: 1px solid var(--line); box-shadow: none; }
.bw-ind { border: none; background: #fff; box-shadow: 0 4px 14px rgba(29,38,48,0.12); }
.vs-select { background: var(--surface-muted); border: 1px solid var(--line); border-radius: 16px; padding: 6px; gap: 4px; }
.vs-tab { border-color: transparent; background: transparent; }
.vs-tab:hover { border-color: transparent; background: rgba(255,255,255,0.72); }
.vs-tab.active, .vs-tab.active:hover { border: none; background: #fff; box-shadow: 0 4px 14px rgba(29,38,48,0.12); }
.uc-tabs { background: var(--surface-muted); border: 1px solid var(--line); border-radius: 16px; padding: 6px; gap: 4px; }
.uc-tab { border-color: transparent; background: transparent; }
.uc-tab:hover { border-color: transparent; background: rgba(255,255,255,0.72); animation: none; box-shadow: none; }
.uc-tab.active, .uc-tab.active:hover { border: none; background: #fff; box-shadow: 0 4px 14px rgba(29,38,48,0.12); }
@media (prefers-reduced-motion: reduce) { .bw-ind, .vs-tab.active, .uc-tab.active { animation: none; } }
/* countdown ring fills over the 3s pause that starts once a demo finishes (BW_DWELL in JS) */
.bw-tab.timing .vt-prog .p { transition: stroke-dashoffset 3s linear; }

/* brand logos as tab icons (Chrome, Gmail) — keep native brand colors, not recolored by the active gradient */
.bw-tab > .bw-favic { width: 17px; height: 17px; flex: none; display: block; object-fit: contain; }
/* inline brand-logo SVGs (Slack, Teams) — render at full brand color, never take the active stroke */
.bw-tab > svg.bw-brand { width: 21px; height: 21px; flex: none; stroke: none; stroke-width: 0; }
.bw-tab.active > svg.bw-brand { stroke: none; }

/* ===== Slack / Teams surface panes (static finished-state mocks) ===== */
.chatapp { width: min(100%, 820px); height: 100%; max-height: 462px; margin: auto; display: flex; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.10); box-shadow: 0 22px 50px rgba(29,38,48,.18), 0 6px 16px rgba(29,38,48,.10); background: #fff; font-family: var(--font-sans); text-align: left; }
.ca-rail { width: 62px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 14px 0; background: #3F0E3F; }
.chatapp.teams .ca-rail { background: #33344A; }
.ca-rail .ca-ws { width: 38px; height: 38px; border-radius: 12px; background: #fff; color: #3F0E3F; font-weight: 800; font-size: 17px; display: grid; place-items: center; }
.ca-ricon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: rgba(255,255,255,0.6); }
.ca-ricon svg { width: 19px; height: 19px; }
.ca-ricon.on { background: rgba(255,255,255,0.16); color: #fff; }
.ca-ricon.mind { margin-top: auto; background: transparent; }
.ca-ricon.mind img { width: 32px; height: 32px; border-radius: 999px; }
.ca-side { width: 184px; flex: none; padding: 14px 10px; background: #4A154B; display: flex; flex-direction: column; gap: 12px; }
.chatapp.teams .ca-side { background: #F5F5FB; border-right: 1px solid var(--line); }
.ca-team { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 15px; color: #fff; }
.chatapp.teams .ca-team { color: var(--ink-900); }
.ca-team svg { width: 15px; height: 15px; opacity: .7; }
.ca-chl { display: flex; flex-direction: column; gap: 2px; }
.ca-ch { display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 7px; font-size: 14px; color: rgba(255,255,255,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatapp.teams .ca-ch { color: var(--slate-700); }
.ca-ch.on { background: #1164A3; color: #fff; }
.chatapp.teams .ca-ch.on { background: #E8E8F5; color: var(--ink-900); font-weight: 600; box-shadow: inset 3px 0 0 #5B5FC7; }
.ca-ch.dm .ca-pres { width: 8px; height: 8px; border-radius: 999px; background: #2EB67D; flex: none; }
.ca-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.ca-head { flex: none; height: 52px; padding: 0 20px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.ca-htitle { font-weight: 700; font-size: 15.5px; color: var(--ink-900); }
.ca-hsub { font-size: 13px; color: var(--fg3); }
.ca-thread { flex: 1; min-height: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.ca-msg { display: flex; gap: 11px; }
.ca-av { width: 38px; height: 38px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; overflow: hidden; }
.ca-av.mind { background: transparent; }
.ca-av.mind img { width: 100%; height: 100%; object-fit: cover; }
.ca-mb { min-width: 0; }
.ca-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ca-meta b { font-size: 14.5px; color: var(--ink-900); }
.ca-t { font-size: 11.5px; color: var(--fg3); }
.ca-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #fff; background: #616061; border-radius: 4px; padding: 1px 5px; }
.ca-tag.teams { background: #5B5FC7; }
.ca-text { font-size: 14.5px; line-height: 1.55; color: var(--ink-900); max-width: 520px; }
.ca-text.serif { font-family: var(--font-serif); }
.ca-mention { color: #1264A3; background: rgba(18,100,163,0.12); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.ca-mention.teams { color: #5B5FC7; background: rgba(91,95,199,0.12); }
.ca-att { margin-top: 10px; }
.ca-composer { flex: none; margin: 0 16px 16px; height: 46px; border: 1px solid var(--line-strong); border-radius: 10px; display: flex; align-items: center; padding: 0 8px 0 14px; gap: 10px; }
.ca-cph { flex: 1; font-size: 14px; color: var(--fg3); }
.ca-csend { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--ink-900); flex: none; }
.ca-csend svg { width: 16px; height: 16px; }
.chatapp.teams .ca-csend { background: #5B5FC7; }
/* Teams pane re-skinned in the Minded brand gradient (replaces Microsoft slate/purple) */
.chatapp.teams .ca-rail { background: linear-gradient(180deg, #FFAC6F 0%, #FF5F34 52%, #E43CFF 100%); }
.chatapp.teams .ca-ch.on { box-shadow: inset 3px 0 0 var(--brand-coral); }
.chatapp.teams .ca-tag.teams { background: var(--brand-gradient); }
.chatapp.teams .ca-mention.teams { color: var(--brand-coral); background: rgba(255,95,52,0.12); }
.chatapp.teams .ca-csend { background: var(--brand-gradient-cta); }
@media (max-width: 720px) { .ca-rail { display: none; } .ca-side { width: 132px; } .ca-text { font-size: 13.5px; } .ca-head { padding: 0 14px; } .ca-thread { padding: 14px; } }

/* Slack pane — rotating animated conversation (ported from the onboarding flow) */
.chatapp.slack .ca-thread.sl-anim { justify-content: flex-end; gap: 16px; transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.ca-thread.sl-anim.sl-out { opacity: 0; transform: translateY(10px); }
.sl-anim .sl-typing, .sl-anim .sl-reply { display: none; }
.sl-anim .sl-askreact, .sl-anim .sl-replyreact { display: none; }
.sl-anim[data-phase="2"] .sl-typing { display: flex; }
.sl-anim[data-phase="3"] .sl-reply, .sl-anim[data-phase="4"] .sl-reply { display: flex; }
.sl-anim[data-phase="1"] .sl-askreact, .sl-anim[data-phase="2"] .sl-askreact, .sl-anim[data-phase="3"] .sl-askreact, .sl-anim[data-phase="4"] .sl-askreact { display: inline-flex; }
.sl-anim[data-phase="4"] .sl-replyreact { display: inline-flex; }
.sl-reply, .sl-typing { animation: slrise .35s ease both; }
@keyframes slrise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sl-dots { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-muted); border-radius: 13px; padding: 12px 15px; }
.sl-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--slate-400); display: block; animation: sldot 1.1s infinite; }
.sl-dots i:nth-child(2) { animation-delay: .18s; }
.sl-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes sldot { 0%,80%,100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.sl-bullets { margin: 6px 0 0; padding-left: 20px; font-size: 18px; line-height: 1.55; color: var(--ink-900); }
.sl-bullets li { margin: 2px 0; }
.sl-tail { font-size: 18px; line-height: 1.5; color: var(--ink-900); margin-top: 9px; }
.sl-reacts { align-items: center; gap: 6px; margin-top: 10px; }
.sl-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; box-sizing: border-box; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 10px 0 8px; font-size: 13px; font-weight: 600; color: var(--slate-600); animation: rpop .42s cubic-bezier(.22,1.2,.4,1) both; }
.sl-chip + .sl-chip { margin-left: 4px; }
.sl-chip .e { font-size: 14px; line-height: 1; }
.sl-chip.blue { background: #EAF3FB; border-color: #B6D8F2; color: #1264A3; }
.sl-imgatt { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; max-width: 320px; }
.sl-imgatt .sl-shot { display: block; width: 100%; height: 132px; object-fit: cover; object-position: top; background: var(--surface-muted); }
.sl-imgfoot { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-top: 1px solid var(--line); }
.sl-imgfoot .fticon { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.sl-imgfoot .fticon img { width: 18px; height: 18px; }
.sl-imgfoot .nm { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.sl-imgfoot .sz { font-size: 11.5px; color: var(--fg3); }
@media (prefers-reduced-motion: reduce) { .sl-reply, .sl-typing, .sl-chip { animation: none; } .ca-thread.sl-anim { transition: none; } }

/* ===================== Slack — full desktop-window replica (Figma node 15929-14482) ===================== */
/* the window is authored at a fixed design size and scaled to fit the panes box (--slk-scale set in JS),
   so the full conversation renders at Figma proportions instead of clipping in the short 500px panel */
.slackfit { position: relative; width: 100%; height: 100%; overflow: visible; }
/* the panes' enter animation leaves a translateY(10px) that never settles in this off-screen/content-visibility
   context — it shifted the Slack window down ~10px (asymmetric). Pin the Slack pane to 0 so it stays centred. */
.bw-pane[data-bw="slack"] { transform: none; }
/* absolutely positioned so the fixed-size design box never dictates the panel/grid track size */
.slackwin { position: absolute; top: 50%; left: 50%; width: 1180px; height: 660px; transform: translate(-50%, -50%) scale(var(--slk-scale, 0.7)); transform-origin: center center; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; font-family: var(--font-sans); text-align: left; box-shadow: 0 34px 76px rgba(29,38,48,.18), 0 9px 24px rgba(29,38,48,.11); }
/* (gradient ring border removed per design — borderless window, soft shadow only) */

/* window top bar */
.sw-bar { flex: none; height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 14px; background: #3F0E3F; }
.sw-lights { display: inline-flex; gap: 8px; flex: none; }
.sw-lights i { width: 12px; height: 12px; border-radius: 999px; display: block; }
.sw-lights i:nth-child(1) { background: #ED6A5E; }
.sw-lights i:nth-child(2) { background: #F4BF4F; }
.sw-lights i:nth-child(3) { background: #61C454; }
.sw-nav { display: inline-flex; align-items: center; gap: 14px; margin-left: 6px; color: rgba(255,255,255,.72); flex: none; }
.sw-nav svg { width: 18px; height: 18px; }
.sw-nav .dim { opacity: .38; }
.sw-search { width: min(46%, 460px); height: 28px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.66); }
.sw-search svg { width: 15px; height: 15px; }
.sw-spacer { display: none; }
.sw-help { display: inline-flex; color: rgba(255,255,255,.7); flex: none; }
.sw-help svg { width: 19px; height: 19px; }
.sw-me { position: relative; width: 30px; height: 30px; flex: none; }
.sw-me img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.sw-pres { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 999px; background: #2EB67D; border: 2px solid #3F0E3F; }

/* body — strip the standalone-card chrome; the window frame supplies it */
.slackwin .chatapp.slack { flex: 1; min-height: 0; width: 100%; max-height: none; margin: 0; border: none; border-radius: 0; box-shadow: none; }

/* left app rail removed per design — sidebar is the leftmost column */

/* sidebar */
.chatapp.slack .ca-side { width: 232px; padding: 14px 8px; background: #4A154B; gap: 6px; }
.chatapp.slack .ca-team { font-size: 17px; font-weight: 800; color: #fff; padding: 0 6px 4px; }
.chatapp.slack .ca-compose { width: 30px; height: 30px; border-radius: 999px; background: #fff; color: #4A154B; display: grid; place-items: center; flex: none; }
.chatapp.slack .ca-compose svg { width: 15px; height: 15px; }
.chatapp.slack .ca-nav { display: flex; flex-direction: column; gap: 1px; }
.chatapp.slack .ca-nl { display: flex; align-items: center; gap: 11px; padding: 5px 10px; border-radius: 7px; font-size: 14.5px; color: rgba(255,255,255,.82); cursor: default; }
.chatapp.slack .ca-nl svg { width: 18px; height: 18px; opacity: .82; flex: none; }
.chatapp.slack .ca-grp { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; }
.chatapp.slack .ca-gh { display: flex; align-items: center; gap: 7px; padding: 3px 10px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.74); }
.chatapp.slack .ca-gh svg { width: 14px; height: 14px; opacity: .8; flex: none; }
.chatapp.slack .ca-gh .star { color: #ECC94B; opacity: 1; fill: #ECC94B; }
.chatapp.slack .ca-ch { display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 23px; border-radius: 7px; font-size: 14.5px; color: rgba(255,255,255,.74); white-space: nowrap; }
.chatapp.slack .ca-ch.on { background: #1264A3; color: #fff; font-weight: 600; }
.chatapp.slack .ca-ch.add { color: rgba(255,255,255,.6); padding-left: 10px; }
.chatapp.slack .ca-ch.add svg { width: 18px; height: 18px; flex: none; }
.chatapp.slack .ca-ch.slk { padding-left: 10px; }
.chatapp.slack .ca-cglyph { position: relative; width: 20px; height: 20px; flex: none; }
.chatapp.slack .ca-cglyph img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }
.chatapp.slack .ca-ch.slk .ca-pres { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 999px; background: #2EB67D; border: 2px solid #1264A3; }
/* conversation body text (user + AI messages) sits at 18px */
.chatapp.slack .ca-text { font-size: 18px; }
/* file attachment — solid card, defined light-grey border + soft elevation (Slack file-card look) */
.chatapp.slack .ca-att, .chatapp.slack .sl-imgatt { background: #fff; border: 1px solid var(--line-strong); box-shadow: 0 8px 20px -6px rgba(29,38,48,.22), 0 2px 5px -1px rgba(29,38,48,.10); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* channel header — title caret + member cluster */
.chatapp.slack .ca-head { gap: 7px; }
/* keep the header on one line at the narrow mobile design — channel name never wraps,
   topic truncates, member count stays put (was wrapping "# minded" onto two lines) */
.chatapp.slack .ca-htitle { white-space: nowrap; flex: none; }
.chatapp.slack .ca-hsub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.chatapp.slack .ca-members { flex: none; }
.chatapp.slack .ca-hcaret { width: 16px; height: 16px; color: var(--fg3); margin-left: -3px; flex: none; }
.chatapp.slack .ca-members { margin-left: auto; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 2px 9px 2px 5px; }
.chatapp.slack .ca-members img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; border: 2px solid #fff; margin-left: -7px; }
.chatapp.slack .ca-members img:first-child { margin-left: 0; }
.chatapp.slack .ca-members b { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--slate-600); }

/* messages start from the top (matches the Figma frame) */
.chatapp.slack .ca-thread.sl-anim { justify-content: flex-start; }

/* reaction "add" pill */
.sl-add { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 24px; box-sizing: border-box; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--line); color: var(--slate-500); vertical-align: middle; }
.sl-add svg { width: 15px; height: 15px; }
/* the reply reactions land one-by-one as the finale (each pops in after the previous) */
.sl-replyreact > * { animation: rpop .42s cubic-bezier(.22,1.2,.4,1) both; }
.sl-replyreact > *:nth-child(1) { animation-delay: .15s; }
.sl-replyreact > *:nth-child(2) { animation-delay: .65s; }
.sl-replyreact > *:nth-child(3) { animation-delay: 1.15s; }
.sl-replyreact > *:nth-child(4) { animation-delay: 1.65s; }
@media (prefers-reduced-motion: reduce) { .sl-replyreact > * { animation: none; } }

/* composer with full formatting toolbar */
.slk-composer { flex: none; margin: 4px 16px 16px; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; background: #fff; }
.slk-cinput { padding: 12px 14px 11px; font-size: 14.5px; color: var(--fg3); }
.slk-ctools { display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-top: 1px solid var(--line); color: var(--slate-600); }
.slk-ctools .ct { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; font-weight: 700; flex: none; }
.slk-ctools .ct svg { width: 17px; height: 17px; }
.slk-ctools .ct.i { font-style: italic; font-weight: 600; }
.slk-ctools .ct.s { font-weight: 600; text-decoration: line-through; }
.slk-ctools .ct-sp { flex: 1; }

@media (max-width: 720px) {
  /* mobile slack: narrow portrait window, sidebar hidden (channel-only view, like the Slack mobile app).
     Stays centered (inherits the base translate(-50%,-50%) + origin center). bwSlackFit fills the pane
     exactly (matches the other showcase panes) by fill-height scaling + a dynamic design width, so the
     430px below is only a pre-JS fallback — JS overrides width inline once it measures the pane. */
  .slackwin { width: 430px; height: 720px; border-radius: 0; box-shadow: none; }
  /* the window fills the pane exactly, so the rounded-card framing lives on the NON-scaled .slackfit
     wrapper — identical 16px corner + 1px border + drop-shadow to the other showcase panes (.chromewin).
     The scaled window sits square inside and is clipped to this frame, so its (scaled) radius/shadow
     can't drift from the others'. Without this, Slack's dark chrome made the scaled corner read as a gap. */
  .slackfit { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.10); box-shadow: 0 22px 50px rgba(29,38,48,.18), 0 6px 16px rgba(29,38,48,.10); }
  .chatapp.slack .ca-side { display: none; }
  /* the dynamic fill width (~410px design) is narrower than desktop (430px), so the full 14-button
     composer toolbar would clip its trailing icons. Drop the right-cluster tools (after the flex
     spacer: text, @, emoji, attach) — like a real mobile composer — so the 10 formatting buttons
     fit cleanly at every phone width. */
  .slackwin .slk-ctools .ct-sp ~ .ct { display: none; }
}

/* recording done — the recording becomes a composer attachment */
.rec-compose { display: none; border-top: 1px solid var(--line); padding: 9px 9px 10px; flex: none; }
.cw-panel.done .cw-recbar { display: none; }
.cw-panel.done .rec-compose { display: block; animation: vsIn .45s cubic-bezier(.16,1,.3,1) both; }
/* recording attachment — DS recording card: a recorded browser-window thumbnail
   (chrome dots + page) under a duration pill + centered play, with a caption.
   margin matches the composer input's 12px text inset so they left-align. */
.cw-panel.done .cw-stop { display: none; }
.rec-attach { margin: 0 12px 10px; display: flex; align-items: center; gap: 11px; }
.rec-attach .ra-thumb { position: relative; width: 104px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface-muted); box-shadow: var(--shadow-button); }
/* mini browser window of the recorded admin page */
.rec-attach .ra-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; }
.rec-attach .ra-chrome { height: 13px; flex: none; display: flex; align-items: center; gap: 3px; padding: 0 6px; background: #ECECE8; }
.rec-attach .ra-chrome i { width: 3.5px; height: 3.5px; border-radius: 999px; background: #C4C4BC; }
.rec-attach .ra-chrome i:first-child { background: var(--brand-coral); }
.rec-attach .ra-pg { flex: 1; min-height: 0; background: #F7F7F5; padding: 8px 9px; display: flex; flex-direction: column; gap: 5px; }
.rec-attach .ra-l { height: 4px; border-radius: 2px; background: var(--slate-300); }
.rec-attach .ra-l.w1 { width: 52%; background: var(--slate-400); }
.rec-attach .ra-l.w2 { width: 74%; }
.rec-attach .ra-cta { height: 11px; width: 64%; border-radius: 3px; background: var(--ink-900); margin-top: 3px; }
/* DS bottom scrim gradient + centered play */
.rec-attach .ra-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.32), rgba(0,0,0,0)); }
.rec-attach .ra-dur { position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; gap: 3px; background: rgba(15,20,26,0.72); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.rec-attach .ra-dur svg { width: 10px; height: 10px; }
.rec-attach .ra-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.rec-attach .ra-play .pb { width: 30px; height: 30px; border-radius: 999px; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,0.28); }
.rec-attach .ra-play svg { width: 14px; height: 14px; color: var(--ink-900); fill: var(--ink-900); margin-left: 1.5px; }
.rec-attach .ra-meta { min-width: 0; flex: 1; }
.rec-attach .nm { font-size: 12.5px; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-attach .sz { font-size: 11px; color: var(--slate-500); }
.rec-attach .sz.ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-800); margin-top: 3px; }
.rec-attach .sz.ok .okdot { width: 7px; height: 7px; border-radius: 999px; background: var(--success-500); flex: none; }
.rec-compose .rc-input { min-height: 20px; font-size: 14px; color: var(--ink-900); }
.rec-compose .rc-input .caret { animation: cwblink 1.1s steps(1) infinite; color: var(--slate-500); }

/* pricing dashboard preview — glass header, guaranteed rounding (no grey square) */
.tier .sbrowser { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 8px 22px rgba(29,38,48,0.12); }
.tier .sbrowser .tb { background: rgba(255,255,255,0.55); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid var(--line); }

/* outro "Let's go" — matches top-bar nav CTA gradient */
.op-start { border-radius: 12px; font-size: 15px; font-weight: 500; padding: 0 20px; white-space: nowrap; background: var(--brand-gradient-cta); background-size: 100% 100%; box-shadow: var(--shadow-glow); }

/* ============================================================
   USE-CASES v4 — centered headline, card with role tab strip
   on top, tagline, composer, task chips (Ben's design)
   ============================================================ */
@media (min-width: 0px) {
  #usecases .usecase { background: transparent; }
  #usecases .usecase .grain { display: none; }
  #usecases .uc-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; max-width: 1020px; margin: 0 auto; padding: 0 28px; }
  #usecases .uc-h { color: var(--ink-900); font-weight: 600; letter-spacing: -0.035em; font-size: clamp(30px, 3.9vw, 50px); line-height: 1.04; margin: 0 0 36px; text-align: center; text-wrap: balance; }
  #usecases .uc-shell { width: 100%; background: #F7F8FB; border: 1px solid rgba(29,38,48,0.04); border-radius: 28px; padding: 10px 10px 38px; }
  #usecases .uc-panes { display: none !important; }
  /* role toggle — segmented control with a sliding white pill */
  #usecases .uc-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #EDF0F4; border: none; border-radius: 999px; padding: 5px; margin: 0; }
  #usecases .uc-ink { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 4); border-radius: 999px; background: #fff; border: 1px solid rgba(255,95,52,0.4); box-shadow: 0 6px 18px rgba(29,38,48,0.1); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .45s cubic-bezier(.22,1,.36,1); pointer-events: none; }
  #usecases .uc-tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 999px; padding: 14px 10px; cursor: pointer; transition: none; animation: none; box-shadow: none; min-width: 0; overflow: hidden; }
  /* progress — the active chip fills left→right (replaces the ring) */
  #usecases .uc-tab .vt-prog { display: none; }
  #usecases .uc-fill { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(255,172,111,0.32), rgba(255,95,52,0.2)); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
  #usecases .uc-tab:not(.active) .uc-fill { transform: scaleX(0) !important; transition: none !important; }
  #usecases .uc-tab .tdw { display: none; }
  #usecases .uc-tab .tp { position: relative; z-index: 1; display: inline-flex; width: auto; justify-content: center; align-items: center; gap: 9px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--slate-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s ease; margin: 0; }
  #usecases .uc-tab .tp > svg { width: 17px; height: 17px; flex: none; stroke-width: 1.8px; }
  #usecases .uc-tab:hover { background: rgba(255,255,255,0.5); }
  #usecases .uc-tab.active, #usecases .uc-tab.active:hover { background: transparent; border: none; box-shadow: none; animation: none; }
  #usecases .uc-tab.active .tp { color: var(--ink-900); }
  #usecases .uc-tab.active .tp > svg { stroke: url(#sendGrad); color: var(--brand-coral); }
  #usecases .uc-tab .vt-prog { flex: none; margin-left: 2px; }
  /* tagline under the strip */
  #usecases .uc-tagline { text-align: center; font-size: 13.5px; color: var(--slate-500); margin: 20px auto 18px; min-height: 1.4em; max-width: 560px; transition: opacity .25s ease; }
  #usecases .uc-tagline.swap { opacity: 0; }
  /* composer centered */
  #usecases .uc-stage { width: min(100%, 780px); margin: 0 auto; aspect-ratio: auto; background: transparent; border: none; box-shadow: none; padding: 0; display: block; }
  #usecases .dsbox { width: 100%; border-radius: 22px; box-shadow: 0 18px 44px rgba(29,38,48,0.08); }
  /* task chips below the composer */
  #usecases .uc-sugg { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
  #usecases .sg-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink-900); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-button); transition: border-color .2s ease, background .25s ease, color .25s ease, transform .15s ease; }
  #usecases .sg-chip svg { width: 15px; height: 15px; stroke-width: 1.8px; }
  #usecases .sg-chip:hover { border-color: var(--line-strong); transform: translateY(-1px); }
  #usecases .sg-chip.active { background: var(--slate-700); border-color: var(--slate-700); color: #fff; }
  #usecases .sg-chip.active svg { stroke: #fff; color: #fff; }
}

/* hire comparison — collapsed AI logo rail is mobile-only */
.vs-logo { display: none; }
/* Minded/AI toggle is mobile-only */
.vs-toggle { display: none; }
/* progress countdown indicators removed from all tabs/chips */
.vt-prog, .uc-fill { display: none !important; }

/* use-cases modern toggle — phone adaptation (2×2 toggle, tighter) */
@media (max-width: 600px) {
  #usecases .uc-grid { padding: 0 16px; }
  #usecases .uc-h { font-size: clamp(26px, 7.6vw, 34px); margin-bottom: 22px; }
  #usecases .uc-shell { padding: 8px 8px 26px; border-radius: 22px; }
  #usecases .uc-tabs { grid-template-columns: 1fr; gap: 5px; border-radius: 18px; padding: 5px; }
  #usecases .uc-ink { display: none; }
  #usecases .uc-tab { border-radius: 13px; padding: 12px 14px; justify-content: flex-start; }
  #usecases .uc-tab .tp { justify-content: flex-start; }
  #usecases .uc-tab.active { background: #fff; box-shadow: 0 4px 14px rgba(29,38,48,0.1); border: 1px solid rgba(255,95,52,0.4); }
  #usecases .uc-tab .tp { font-size: 12.5px; gap: 7px; }
  #usecases .uc-tab .tp > svg { width: 15px; height: 15px; }
  #usecases .uc-tagline { font-size: 12.5px; margin: 16px auto 14px; }
  #usecases .uc-stage { padding: 0; }
  #usecases .uc-sugg { margin-top: 20px; gap: 8px; }
  #usecases .sg-chip { height: 34px; font-size: 12px; padding: 0 13px; }
}

/* ============================================================
   PROBLEM v2 — light scattered collage: floating provider
   chats, prompt hassle, crazy invoices, drifting artifacts
   ============================================================ */
.probv2 { background: #F6F6F4; min-height: 100vh; display: flex; align-items: center; }
.probv2 > .container.pv-wide { max-width: 1440px; width: 100%; }
.pv-stage { position: relative; min-height: 92vh; display: flex; align-items: center; justify-content: center; }
.pv-h { position: relative; z-index: 3; text-align: center; color: var(--ink-900); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; font-size: clamp(30px, 3.9vw, 50px); margin: 0; max-width: 720px; text-wrap: balance; }
.pv-h .muted { color: var(--slate-400); }
.pv-rotor { display: inline-block; color: var(--ink-900); }
.pv-rotor span { display: inline-block; }
.pv-rotor span.out { animation: pvout .3s ease forwards; }
.pv-rotor span.in { animation: pvin .4s cubic-bezier(.22,1,.36,1); }
@keyframes pvout { to { opacity: 0; transform: translateY(-12px); } }
@keyframes pvin { from { opacity: 0; transform: translateY(14px); } }
/* floating artifacts */
.pv-item, .pv-dot { position: absolute; z-index: 4; transform: translate(var(--scx, 0px), var(--scy, 0px)) translate(var(--px, 0px), var(--py, 0px)); }
.pv-item > *, .pv-dot { animation: pvfloat var(--dur, 9s) ease-in-out infinite alternate; }
.pv-item > * { transform: rotate(var(--rot, 0deg)); box-shadow: 0 24px 60px rgba(29,38,48,0.12); }
@keyframes pvfloat { from { translate: 0 0; } to { translate: 0 -12px; } }
.pv-item .clwin { min-height: 0; border-radius: 16px; }
.pv-item .clwin .cl-body { gap: 9px; }
.pv-item .cl-u, .pv-item .cl-a { font-size: 12px; }
/* positions */
.pv-item.i1 { left: 1%; top: 7%; width: 268px; }
.pv-item.i2 { left: 26%; top: 2%; width: 300px; }
.pv-item.i3 { right: 22%; top: 5%; width: 280px; }
.pv-item.i4 { right: -1%; top: 13%; width: 308px; }
.pv-item.i5 { left: 3%; bottom: 9%; width: 256px; }
.pv-item.i6 { left: 31%; bottom: 1%; width: 300px; }
.pv-item.i7 { right: 23%; bottom: 7%; width: 262px; }
.pv-item.i8 { right: 1%; bottom: 16%; width: 252px; }
.pv-dot { width: 52px; height: 52px; border-radius: 999px; background: #fff; box-shadow: 0 10px 26px rgba(29,38,48,0.12); display: grid; place-items: center; }
.pv-dot img { width: 24px; height: 24px; }
.pv-dot.d1 { left: 13%; top: 43%; }
.pv-dot.d2 { left: 49%; top: 12%; }
.pv-dot.d3 { right: 12%; top: 46%; }
.pv-dot.d4 { left: 22%; bottom: 24%; }
/* prompt hassle file card */
.pv-prompt { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.pv-prompt .ph { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 8px; font-family: var(--font-mono, monospace); }
.pv-prompt .ph svg { width: 15px; height: 15px; color: var(--slate-500); flex: none; }
.pv-prompt p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--slate-600); }
/* mini invoice strip */
.pv-minivoice { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.pv-minivoice img { width: 22px; height: 22px; flex: none; }
.pv-minivoice .b { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pv-minivoice .t { font-size: 12px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.pv-minivoice .s { font-size: 10.5px; color: var(--slate-500); }
.pv-minivoice .amt { font-size: 15px; font-weight: 700; color: #C2362B; font-variant-numeric: tabular-nums; }
/* entrance — artifacts settle in one by one */
.pv-stage .pv-item, .pv-stage .pv-dot { opacity: 0; transition: opacity .7s ease, translate .7s cubic-bezier(.16,1,.3,1); }
.pv-stage.is-visible .pv-item, .pv-stage.is-visible .pv-dot { opacity: 1; }
.pv-stage.is-visible .pv-item.i1 { transition-delay: .05s; } .pv-stage.is-visible .pv-item.i2 { transition-delay: .12s; }
.pv-stage.is-visible .pv-item.i3 { transition-delay: .19s; } .pv-stage.is-visible .pv-item.i4 { transition-delay: .26s; }
.pv-stage.is-visible .pv-item.i5 { transition-delay: .33s; } .pv-stage.is-visible .pv-item.i6 { transition-delay: .4s; }
.pv-stage.is-visible .pv-item.i7 { transition-delay: .47s; } .pv-stage.is-visible .pv-item.i8 { transition-delay: .54s; }
.pv-stage.is-visible .pv-dot { transition-delay: .6s; }

/* browser section — more breathing room between headline, tagline, stage, CTA */
.bw-wrap .bwx-head { margin-bottom: 14px; }
.bw-tagline { margin: 0 auto 18px; }
.bw-panes { margin-top: 14px; }
.bw-wrap .bw-cta { margin-top: 18px; }

/* browser section — phones: stack the chrome window vertically.
   The 16/9 aspect + min-height on .chromewin.wide otherwise blows the width
   past the viewport, leaving the side panel clipped off-screen. */
@media (max-width: 760px) {
  /* phones: drop the per-pane subtitle to save vertical space */
  .bw-tagline { display: none; }
  /* fixed height so every pane is the same size (matches Slack) and doesn't jump as the
     active pane's content changes — auto-height made the grid track the tallest pane. */
  .bw-panes { padding: 0; border: none; background: transparent; box-shadow: none; height: 560px; min-height: 0; grid-auto-rows: 560px; }
  .browserx { padding-top: 14px; padding-bottom: 16px; }
  .bw-tabs { margin: 10px auto 6px; }
  /* the pane is a grid item — min-width:auto otherwise balloons it to the content width */
  .bw-panes .bw-pane { min-width: 0; }
  .bw-panes .chromewin, .bw-panes .chromewin.wide { width: 100%; max-width: 100%; min-width: 0; aspect-ratio: auto; height: 100%; min-height: 0; }
  /* every pane's window fills the panes box (which is sized to the tallest pane)
     instead of centering — otherwise shorter panes float with a big empty gap above.
     Teams' .chatapp is capped at max-height:462 for desktop; lift it on mobile. */
  .bw-panes .slackfit, .bw-panes .chatapp { height: 100%; }
  .bw-panes .chatapp.teamsx { max-height: none; }
  /* let the flex children shrink to the viewport instead of forcing min-content width */
  .chromewin.wide .cw-body, .chromewin.wide .cw-page, .chromewin.wide .cw-panel { min-width: 0; }
  .chromewin.wide .cw-body { flex-direction: column; }

  /* bank + gmail panes: the page shows first, the side panel drops below it */
  .bw-pane[data-bw="auto"] .chromewin.wide .cw-page,
  .bw-pane[data-bw="gmail"] .chromewin.wide .cw-page { flex: none; height: 230px; }
  /* Browser + Email: while the run is still working, the operated page fills the window
     and the assistant panel stays hidden — you watch the automation first; the panel
     reveals once the run completes (.ran is set in bwAuto / bwGmail). */
  .bw-pane[data-bw="auto"] .chromewin.wide:not(.ran) .cw-page,
  .bw-pane[data-bw="gmail"] .chromewin.wide:not(.ran) .cw-page { height: 100%; }
  .bw-pane[data-bw="auto"] .chromewin.wide:not(.ran) .cw-panel,
  .bw-pane[data-bw="gmail"] .chromewin.wide:not(.ran) .cw-panel { display: none; }
  /* on completion the assistant opens on TOP of the page — full overlay, no split screen */
  .bw-pane[data-bw="auto"] .chromewin.wide.ran .cw-panel,
  .bw-pane[data-bw="gmail"] .chromewin.wide.ran .cw-panel {
    position: absolute; inset: 0; z-index: 6; width: auto; height: auto; min-height: 0;
    background: #fff; animation: bwfade .35s ease both;
  }
  /* Phase A of the Browser flow: the chat opens showing only the user's message
     (the reasoning trace + answer are held back until after the browser is operated). */
  .bw-pane[data-bw="auto"] .chromewin.wide.ran.q .cw-panel .m-thread { display: none; }
  .bw-pane[data-bw="auto"] .chromewin.wide .cw-panel,
  .bw-pane[data-bw="gmail"] .chromewin.wide .cw-panel,
  .chromewin.wide .cw-panel.chat { width: auto; flex: 1 1 auto; min-height: 290px; border-radius: 0; box-shadow: none; }
  .bw-pane[data-bw="gmail"] .chromewin.wide:not(.ran) .cw-panel.drawer { position: static; transform: none; }

  /* ── RECORD pane — mobile record flow as a sequence ──
     1· the recorded site fills the window (mobile layout) with the floating
        rec bar hovering at the bottom while recording
     2· on Stop the window swaps to the full timeline + composer            */
  .bw-pane[data-bw="record"] .chromewin.wide .cw-body { position: relative; }
  .bw-pane[data-bw="record"] .chromewin.wide .cw-page { flex: 1 1 auto; height: auto; min-height: 0; }
  /* the panel collapses out of flow; only its floating rec bar shows over the site */
  .bw-pane[data-bw="record"] .chromewin.wide .cw-panel {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 0; min-height: 0;
    background: transparent; box-shadow: none; overflow: visible; pointer-events: none; z-index: 6; }
  .bw-pane[data-bw="record"] .chromewin.wide .cw-panel > .cw-phd,
  .bw-pane[data-bw="record"] .chromewin.wide .cw-panel > .cw-pbody,
  .bw-pane[data-bw="record"] .chromewin.wide .cw-panel > .rec-compose { display: none; }
  .bw-pane[data-bw="record"] .chromewin.wide .cw-recbar { pointer-events: auto; bottom: 16px; }

  /* after Stop → reveal the timeline, then the composer */
  .bw-pane[data-bw="record"] .chromewin.wide.done .cw-page { display: none; }
  .bw-pane[data-bw="record"] .chromewin.wide.done .cw-panel {
    position: static; width: auto; flex: 1 1 auto; height: auto; min-height: 0; background: #fff; pointer-events: auto;
    display: flex; flex-direction: column; box-shadow: none; animation: bwfade .4s ease both; }
  .bw-pane[data-bw="record"] .chromewin.wide.done .cw-panel > .cw-phd { display: flex; flex: none; }
  /* timeline grows to fill so the composer pins to the bottom of the window */
  .bw-pane[data-bw="record"] .chromewin.wide.done .cw-panel > .cw-pbody { display: block; overflow: visible; flex: 1 1 auto; min-height: 0; }
  /* composer: bottom of its container, no separator line above */
  .bw-pane[data-bw="record"] .chromewin.wide.done .cw-panel > .rec-compose { display: block; flex: none; margin-top: auto; border-top: none; }

  /* the recorded site, genuinely reflowed for mobile — single column, bigger
     touch targets, full-width stacked actions (no shrunk-desktop look) */
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-side { display: none; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-search,
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-crumb { display: none; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-top { height: 46px; padding: 0 16px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-logo { font-size: 14px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-av { width: 28px; height: 28px; font-size: 10px; margin-left: auto; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-body { padding: 13px 16px 56px; gap: 11px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-head .t { font-size: 16px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-head .chip { font-size: 10px; padding: 3px 9px; }
  /* single-line order sub (truncate) so the header is one line shorter and the green Issue button fits */
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-head .s { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-item { padding: 13px 14px; border-radius: 12px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-item .thumb { width: 40px; height: 40px; border-radius: 10px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-item .thumb svg { width: 19px; height: 19px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-item .inf b { font-size: 13.5px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-item .inf span { font-size: 11.5px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-item .amt { font-size: 15px; }
  /* actions — keep the primary full-width; the secondary is noise on mobile */
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-actions { flex-direction: column; gap: 9px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-actions .ax-btn:not(.dark) { display: none; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-btn { width: 100%; height: 42px; justify-content: center; font-size: 14px; border-radius: 11px; white-space: nowrap; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-btn svg { width: 15px; height: 15px; }
  /* return form — roomier fields; raise max-height so the full-height Issue button isn't clipped */
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-form.in { padding: 13px 14px; gap: 10px; border-radius: 12px; max-height: 260px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-form .lb { width: 52px; font-size: 11.5px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-form .fld { height: 38px; font-size: 12px; border-radius: 9px; }
  .bw-pane[data-bw="record"] .cw-page.adminx .ax-form .ax-btn.sm { width: 100%; height: 42px; margin-top: 4px; }
}

/* ── mobile Gmail app — the gmail pane on phones renders the native Gmail app email
   view (toolbar · subject · sender · body · reply/forward · bottom nav), not a cropped
   desktop browser tab. Desktop keeps .gx-main; the chat overlays on .ran. ── */
.gmailapp { display: none; }
@media (max-width: 760px) {
  .bw-pane[data-bw="gmail"] .cw-tabbar,
  .bw-pane[data-bw="gmail"] .cw-addr { display: none; }
  .bw-pane[data-bw="gmail"] .cw-page.gmailx > .gx-top,
  .bw-pane[data-bw="gmail"] .cw-page.gmailx > .gx-main { display: none; }
  .bw-pane[data-bw="gmail"] .cw-page.gmailx { padding: 0; background: #fff; }
  .gmailapp { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #fff; font-family: var(--font-sans); color: #1f1f1f; text-align: left; }

  /* app toolbar */
  .gmailapp .ga-top { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 17px; flex: none; }
  .gmailapp .ga-sp { flex: 1; }
  .gmailapp .ga-ic { display: grid; place-items: center; color: #444746; flex: none; }
  .gmailapp .ga-ic svg { width: 22px; height: 22px; stroke-width: 1.7; }
  .gmailapp .ga-ic.sm svg { width: 19px; height: 19px; }
  .gmailapp .ga-ic.ga-minded { border-radius: 999px; transition: transform .18s ease, box-shadow .18s ease; }
  .gmailapp .ga-ic.ga-minded img { width: 24px; height: 24px; border-radius: 999px; display: block; }
  .gmailapp .ga-ic.ga-minded.pressed { transform: scale(.88); box-shadow: 0 0 0 4px rgba(255,95,52,.18); }

  /* email scroll body */
  .gmailapp .ga-scroll { flex: 1; min-height: 0; overflow: hidden; padding: 4px 18px 8px; }
  .gmailapp .ga-subject { display: flex; align-items: flex-start; gap: 14px; }
  .gmailapp .ga-subject span { flex: 1; min-width: 0; font-size: 18px; line-height: 1.3; font-weight: 400; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gmailapp .ga-subject svg { width: 21px; height: 21px; color: #444746; flex: none; margin-top: 1px; }
  .gmailapp .ga-badges { display: flex; gap: 8px; margin: 13px 0 17px; }
  .gmailapp .ga-badge { font-size: 12.5px; font-weight: 500; padding: 3px 10px; border-radius: 6px; }
  .gmailapp .ga-badge.inbox { background: #e8eaed; color: #444746; }
  .gmailapp .ga-badge.ext { background: #fdd663; color: #3c2f00; }

  .gmailapp .ga-sender { display: flex; align-items: center; gap: 12px; }
  .gmailapp .ga-av { width: 40px; height: 40px; border-radius: 999px; flex: none; display: grid; place-items: center; background: #c0392b; color: #fff; font-size: 17px; font-weight: 500; }
  .gmailapp .ga-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .gmailapp .ga-who b { font-size: 15px; font-weight: 600; }
  .gmailapp .ga-meta { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: #5e5e5e; }
  .gmailapp .ga-meta svg { width: 15px; height: 15px; }
  .gmailapp .ga-date { font-size: 12.5px; color: #5e5e5e; flex: none; }

  .gmailapp .ga-body { margin-top: 19px; font-size: 15.5px; line-height: 1.55; }
  .gmailapp .ga-body p { margin: 0 0 14px; }
  .gmailapp .ga-body b { font-weight: 600; }
  .gmailapp .ga-att { display: inline-flex; align-items: center; gap: 9px; margin-top: 2px; padding: 9px 13px; border: 1px solid #dadce0; border-radius: 10px; font-size: 13px; }
  .gmailapp .ga-att img { width: 18px; height: 18px; }

  /* reply / forward bar */
  .gmailapp .ga-actions { display: flex; gap: 10px; padding: 8px 16px 10px; flex: none; }
  .gmailapp .ga-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1px solid #dadce0; border-radius: 999px; font-size: 14px; font-weight: 500; color: #444746; }
  .gmailapp .ga-act svg { width: 18px; height: 18px; }
  .gmailapp .ga-act.mini { flex: none; width: 52px; }

  /* bottom nav */
  .gmailapp .ga-nav { display: flex; align-items: center; justify-content: space-around; height: 56px; flex: none; background: #f0f4f9; border-top: 1px solid #e3e3e3; }
  .gmailapp .ga-tab { position: relative; display: grid; place-items: center; width: 64px; height: 32px; border-radius: 999px; color: #444746; }
  .gmailapp .ga-tab.on { background: #c2e7ff; color: #001d35; }
  .gmailapp .ga-ni { position: relative; display: grid; place-items: center; }
  .gmailapp .ga-ni svg { width: 22px; height: 22px; }
  .gmailapp .ga-ni b { position: absolute; top: -7px; left: 11px; background: #c5221f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; display: grid; place-items: center; line-height: 1; }
}

/* pricing — orchestrated entrance: copy → chart → tier cards last */
.pricing .cost[data-reveal] .c-left, .pricing .cost[data-reveal] .c-right { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.pricing .cost[data-reveal].is-visible .c-left { opacity: 1; transform: none; transition-delay: .05s; }
.pricing .cost[data-reveal].is-visible .c-right { opacity: 1; transform: none; transition-delay: .35s; }
.pricing .cost[data-reveal].reveal-final .c-left, .pricing .cost[data-reveal].reveal-final .c-right { opacity: 1 !important; transform: none !important; transition: none !important; }
.pricing .tier[data-reveal] { transition-delay: .65s; }
.pricing .tier[data-reveal][data-reveal-delay="1"] { transition-delay: .85s; }
.pricing .tier[data-reveal][data-reveal-delay="2"] { transition-delay: 1.05s; }
@media (min-width: 900px) and (min-height: 740px) {
  .browserx { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 980px) {
  .pv-stage { min-height: 0; padding: 40px 0; flex-direction: column; gap: 26px; }
  .pv-item, .pv-dot { position: static; }
  .pv-item { width: min(100%, 380px) !important; }
  .pv-item.i2, .pv-item.i3, .pv-item.i6, .pv-item.i7, .pv-item.i8, .pv-dot { display: none; }
}