/* Landing page, in DealerData's section order (niche-database-template creative-playbook.md §2),
   with the store scan and the read-your-site story added. Type: Geist for words, Geist Mono for code and data. */
.ico { width: 18px; height: 18px; flex: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(14, 20, 36, .72); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid rgba(255, 255, 255, .08) }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: #0E1424 }
body { overflow-x: hidden }
.hdr .nav { padding-block: 12px }
.hero2 { display: grid; max-width: 1440px; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; padding-block: 58px 68px }
@media (max-width: 1060px) { .hero2 { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 38px 42px } }
.hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0 }
.hero-copy h1, .hero-copy .sub { max-width: 530px }
.hero2 .pillx { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: rgba(243, 245, 250, .92) }
.hero2 h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 4.6vw, 60px); line-height: .98; letter-spacing: -.05em }
.hero2 h1 em { font-style: normal; color: var(--citron) }
.nw { white-space: nowrap }
.hero2 .sub { color: rgba(243, 245, 250, .84); font-size: 17.5px; max-width: 54ch }
.statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; overflow: hidden }
.statgrid div { background: rgba(14, 20, 36, .55); padding: 8px 13px; min-width: 0 }
.statgrid b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.02em }
.statgrid span { font-size: 11.5px; color: rgba(243, 245, 250, .7) }
.ctarow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.btn.ghost { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .25) }
.checks { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: rgba(243, 245, 250, .78) }
.checks span { display: inline-flex; align-items: center; gap: 6px }
.checks .ico { width: 15px; height: 15px; color: var(--citron) }
.draftchip { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px dashed currentColor; opacity: .75 }

/* a real search bar: icon, field with a self-typing placeholder, key hint, button, suggestions */
.sbar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 14px; background: #fff; color: #1B2440;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 40px -18px rgba(0, 0, 0, .7); max-width: 600px }
.sbar:focus-within { box-shadow: 0 0 0 3px rgba(220, 228, 135, .65), 0 18px 40px -18px rgba(0, 0, 0, .7) }
.sbar-ic { display: grid; place-items: center; color: #3E5488 }
.sbar-ic .ico { width: 19px; height: 19px }
.sbar-field { position: relative; flex: 1; min-width: 0; display: block }
.sbar-field input { width: 100%; border: 0; outline: 0; background: transparent; padding: 10px 0; font-size: 15.5px; color: #1B2440 }
.sbar-field input:focus-visible { outline: 0 }
.sbar .ph { position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; color: #7A8196; font-size: 15.5px; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: clip }
.sbar .ph i { display: inline-block; width: 2px; height: 1.05em; background: #3E5488; vertical-align: -2px; margin-left: 1px; font-style: normal }
.sbar-k { font-family: var(--mono); font-size: 12px; color: #62687A; border: 1px solid #DDE1EA; border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; background: #FAFBFD }
.sbar .btn { padding: 10px 16px; background: #1B2440; color: #fff }
@media (max-width: 520px) { .sbar-k { display: none } .sbar .btn { padding: 10px 12px } }
/* the results panel sits inside the search card, in the page flow, at a fixed height: it never overlays the stats or the CTA */
.sugg { order: 9; flex: 0 0 calc(100% + 20px); margin: 0 -6px -6px -14px; padding: 4px 6px 6px; border-top: 1px solid #EDEFF4; border-radius: 0 0 14px 14px;
  background: #FAFBFD; color: #1B2440; display: flex; flex-direction: column; gap: 1px; height: 140px; overflow: hidden }
.sugg .sl { position: relative; height: 34px; flex: none }
.sugg .skel { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; pointer-events: none }
.sugg .skel::before { content: ""; width: 26px; height: 26px; border-radius: 7px; border: 1px dashed #D9DDE6 }
.sugg .skel i { display: block; height: 7px; width: 42%; border-radius: 4px; background: #ECEEF3 }
.sugg .sl .sg { position: absolute; inset: 0; height: 34px; padding: 0 10px }
.sugg .sg .mu { color: #8A90A0 }
.sugg .sg { display: flex; align-items: center; gap: 10px; border-radius: 9px; font-size: 13.5px; cursor: pointer; border: 0; background: none; text-align: left; color: inherit; width: 100% }
.sugg .sg:hover, .sugg .sg.hi { background: #F1F3F8 }
.sugg .sg .gi { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #E8ECF6; color: #3E5488; flex: none; overflow: hidden }
.sugg .sg .gi img { width: 18px; height: 18px }
.sugg .sg .gi .ico { width: 15px; height: 15px }
.sugg .sg .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sugg .sg .k { font-size: 11px; font-weight: 600; color: #62687A; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em }
.sugg .hd { font-size: 11px; color: #7A8196; padding: 6px 10px 2px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em }

/* the app, rebuilt in markup */
.replica-wrap { position: relative; min-width: 0 }
.replica-wrap::before { content: ""; position: absolute; inset: -30px -40px -30px 40px; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px); background-size: 18px 18px; mask-image: radial-gradient(70% 70% at 60% 50%, #000, transparent); -webkit-mask-image: radial-gradient(70% 70% at 60% 50%, #000, transparent) }
.replica { position: relative; background: #fff; color: #1B2440; border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .5); overflow: hidden; font-size: 12.5px }
.replica .rtop { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid #E6E8EE }
.replica .rtop img { height: 15px }
.replica .rtop span { color: #62687A; font-size: 12px } .replica .rtop b { color: #1B2440 }
.replica .rtop .cr { margin-left: auto; background: #E8ECF6; color: #3E5488; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-family: var(--mono); font-size: 11px }
.replica .rbar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #EEF0F4; background: #FAFBFD; flex-wrap: wrap }
.replica .rq { display: flex; align-items: center; gap: 7px; flex: 1 1 180px; min-width: 0; border: 1px solid #DDE1EA; background: #fff; border-radius: 9px; padding: 5px 9px; font-family: var(--mono); font-size: 11.5px; color: #1B2440; white-space: nowrap; overflow: hidden }
.replica .rq .ico { width: 13px; height: 13px; color: #3E5488 }
.replica .rq .cur { display: inline-block; width: 1.5px; height: 12px; background: #1B2440; vertical-align: -2px }
.replica .fchip { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid #DDE1EA; background: #fff; white-space: nowrap; color: #3B4256 }
.replica .fchip.on { background: #1B2440; color: #fff; border-color: #1B2440 }
.replica .rcount { font-family: var(--mono); font-size: 11px; color: #62687A; margin-left: auto; white-space: nowrap }
.replica .rcount b { color: #1B2440 }
.replica table { width: 100%; border-collapse: collapse; table-layout: fixed }
.replica th { text-align: left; font-weight: 500; color: #62687A; font-size: 11px; padding: 7px 12px; background: #FAFBFD; border-bottom: 1px solid #E6E8EE; white-space: nowrap }
.replica td { padding: 7px 12px; border-bottom: 1px solid #EEF0F4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle }
.replica tr.r { transition: none }
.replica .st { display: flex; align-items: center; gap: 8px; min-width: 0 }
.replica .st b { overflow: hidden; text-overflow: ellipsis }
.replica .st img { width: 18px; height: 18px; border-radius: 5px; flex: none }
.replica .num { font-family: var(--mono); font-size: 11.5px }
.replica .mask { color: #62687A; font-family: var(--mono); font-size: 11px }
.replica .ttl { overflow: hidden; text-overflow: ellipsis }
.replica .cost { font-size: 10px; font-weight: 600; background: #F1F3F8; border: 1px solid #E2E5EC; border-radius: 6px; padding: 0 5px; color: #3E5488; font-family: var(--mono) }
.spill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #3E5488; background: #E8ECF6; border-radius: 6px; padding: 2px 6px; margin-right: 3px; white-space: nowrap; max-width: 100% }
.spill .ico { width: 11px; height: 11px }
.spill small { font-family: var(--mono); font-weight: 500; color: #62687A; font-size: 10px }
.spill.cit { background: #EEF2BE; color: #3B4508 }
.replica .xrow td { padding: 0; border-bottom: 1px solid #EEF0F4; background: #FAFBFD; white-space: normal }
.replica .xp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; padding: 10px 12px; transform-origin: top }
.replica .xp .tl { display: flex; flex-direction: column; gap: 5px; border-left: 2px solid #C9D3EC; padding-left: 9px }
.replica .xp .tl div { display: flex; align-items: center; gap: 6px; font-size: 11.5px; min-width: 0 }
.replica .xp .tl div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.replica .xp .tl small { margin-left: auto; font-family: var(--mono); color: #62687A; font-size: 10.5px; flex: none }
.replica .xp .who { border: 1px solid #E6E8EE; border-radius: 10px; background: #fff; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; min-width: 0 }
.replica .xp .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.replica th.c1 { width: 31% } .replica th.c2 { width: 14% } .replica th.c-dm { width: 30% } .replica th.c4 { width: 25% }
@media (max-width: 560px) { .replica .c-dm { display: none } .replica th.c1 { width: 44% } .replica th.c2 { width: 22% } .replica th.c4 { width: 34% } .replica .xp { grid-template-columns: minmax(0, 1fr) } }
.activity { position: absolute; left: -26px; bottom: -26px; background: #fff; color: #1B2440; border-radius: 14px; padding: 12px 14px; box-shadow: 0 24px 48px -24px rgba(5, 15, 22, .6); font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; min-width: 230px }
@media (max-width: 980px) { .activity { left: 10px; bottom: -20px } }
.activity .live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600 }
.activity .muted { font-family: var(--mono); font-size: 11px }
.dot { position: relative; display: inline-flex; width: 8px; height: 8px; flex: none }
.dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #9DB06A; opacity: .5; animation: ping 1.4s cubic-bezier(0, 0, .2, 1) infinite }
.dot::after { content: ""; position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--citron) }
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0 } }

/* proof strip + marquee */
.proofstrip { display: flex; flex-direction: column; gap: 18px; padding-block: 34px 10px }
.proofstrip .big { display: flex; gap: 10px 26px; align-items: baseline; flex-wrap: wrap }
.proofstrip .big b { font-family: var(--mono); font-size: 34px; font-weight: 500; letter-spacing: -.04em }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.marquee .track { display: flex; width: max-content; animation: marquee 60s linear infinite }
.marquee:hover .track, .marquee:focus-within .track { animation-play-state: paused }
.marquee .it { display: inline-flex; align-items: center; gap: 8px; padding-right: 44px; font-weight: 500; color: var(--muted); opacity: .8; white-space: nowrap }
.marquee .it img { width: 22px; height: 22px; border-radius: 6px; filter: grayscale(1); opacity: .8; transition: filter .3s, opacity .3s }
.marquee:hover .it img { filter: none; opacity: 1 }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* the store scan: an example storefront in a browser window. The camera zooms region to region, each detection shows
   its code and the tool's own logo, then lands as a signal on the lead profile card pinned top right, like the app. */
.scan { position: relative; padding: 30px 214px 0 0 }
@container (max-width: 470px) { .scan { padding: 0 } }
.bw { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -34px rgba(5, 12, 30, .55), 0 0 0 1px var(--line) }
.bw .chrome { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #EEF0F5; border-bottom: 1px solid #DDE1EA }
.bw .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #D3D7E0; display: inline-block }
.bw .url { flex: 1; min-width: 0; max-width: 460px; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px; padding: 4px 10px; font-family: var(--mono); font-size: 11.5px; color: #3B4256; overflow: hidden; white-space: nowrap }
.bw .url .ico { width: 12px; height: 12px; color: #1F8A4C }
.bw .url .tag { margin-left: auto; font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: #3E5488; background: #E8ECF6; border-radius: 999px; padding: 1px 7px }
.vp { position: relative; aspect-ratio: 960 / 600; overflow: hidden; background: #FBF8F3 }
.canvas { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0 }
.cam { position: relative; width: 960px; height: 600px; transform-origin: 0 0; will-change: transform }

/* the example storefront (invented brand, generated photos) */
.sf { position: relative; width: 960px; height: 600px; font-family: var(--sans); color: #201D19; background: #FBF8F3; overflow: hidden }
.sf .ann { display: flex; align-items: center; justify-content: center; gap: 14px; height: 32px; background: #201D19; color: #F4EFE6; font-size: 12px; letter-spacing: .02em }
.sf .ann b { font-weight: 600; color: #fff }
.sf .ann .tm { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); background: #C6502F; color: #fff; padding: 2px 8px; border-radius: 5px; font-size: 11.5px }
.sf .hd { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; padding: 0 28px; border-bottom: 1px solid #ECE6DA; background: #FBF8F3 }
.sf .nv { display: flex; gap: 18px; font-size: 12.5px; color: #4A453D }
.sf .lg { font-weight: 700; letter-spacing: -.04em; font-size: 21px; text-align: center }
.sf .lg span { color: #B4602F; font-weight: 500 }
.sf .rt { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-right: 96px }
.sf .cur { display: flex; align-items: center; gap: 6px; font-size: 11.5px; border: 1px solid #E2DACB; border-radius: 7px; padding: 4px 8px; background: #fff }
.sf .flag { width: 17px; height: 12px; border-radius: 2px; background: repeating-linear-gradient(180deg, #B22234 0 1.7px, #fff 1.7px 3.4px); position: relative; overflow: hidden }
.sf .flag::before { content: ""; position: absolute; left: 0; top: 0; width: 7.5px; height: 6.5px; background: #3C3B6E }
.sf .ic { width: 18px; height: 18px; color: #201D19 }
.sf .shero { position: relative; height: 248px; background: #5E4A36 url('/brand/example-store/hero.webp') center 42% / cover no-repeat; overflow: hidden }
.sf .shero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 16, 12, .62), rgba(20, 16, 12, .18) 52%, transparent 75%) }
.sf .shero .hx { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); color: #fff; display: flex; flex-direction: column; gap: 8px; max-width: 320px; padding-top: 6px }
.sf .shero .ey { font-size: 10.5px; letter-spacing: .18em; font-weight: 600; opacity: .9 }
.sf .shero h4 { font-size: 31px; line-height: 1.02; letter-spacing: -.04em; font-weight: 600 }
.sf .shero p { font-size: 12.5px; opacity: .88; line-height: 1.4 }
.sf .shero .ctas { display: flex; gap: 8px; margin-top: 4px }
.sf .shero .ctas span { font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: 999px; background: #FBF8F3; color: #201D19 }
.sf .shero .ctas span + span { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7) }
.sf .na { padding: 12px 28px 0 }
.sf .na .row { display: flex; align-items: center; gap: 12px; height: 28px }
.sf .na .row b { font-size: 16px; letter-spacing: -.03em; font-weight: 600 }
.sf .na .row .all { font-size: 11.5px; color: #6B655B; text-decoration: underline }
.sf .na .rv { margin-left: 14px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #4A453D; background: #fff; border: 1px solid #ECE6DA; border-radius: 999px; padding: 3px 10px }
.sf .stars { color: #C98A1B; letter-spacing: 1px; font-size: 11px }
.sf .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px }
.sf .p { display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 0 }
.sf .p .im { position: relative; height: 138px; border-radius: 10px; background: #EFE7DA center / cover no-repeat }
.sf .p .bd { position: absolute; left: 8px; top: 8px; background: #fff; color: #201D19; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 7px; border-radius: 999px }
.sf .p .bd.sale { background: #C6502F; color: #fff; left: auto; right: 8px }
.sf .p .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px }
.sf .p .pr { color: #4A453D } .sf .p .pr s { color: #9A9285; margin-left: 4px } .sf .p .pr b { color: #B23A1E; font-weight: 600 }
.sf .p .sm { font-size: 10px; color: #6B655B; display: flex; align-items: center; gap: 4px }
.sf .p .sm .stars { font-size: 9.5px }
.sf .ap { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #4A453D }
.sf .ap i { font-style: normal; font-weight: 700; background: #B2FCE4; color: #000; border-radius: 4px; padding: 0 4px; font-size: 9.5px }
.sf .pop { position: absolute; left: 22px; bottom: 16px; width: 222px; background: #fff; border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .4); padding: 12px; display: flex; flex-direction: column; gap: 7px; font-size: 11px; border: 1px solid #ECE6DA }
.sf .pop b { font-size: 15px; letter-spacing: -.03em }
.sf .pop .in { border: 1px solid #E2DACB; border-radius: 7px; padding: 6px 8px; color: #9A9285 }
.sf .pop .go { background: #201D19; color: #fff; border-radius: 7px; padding: 6px 8px; text-align: center; font-weight: 600 }
.sf .pop .x { position: absolute; right: 9px; top: 7px; color: #9A9285; font-size: 13px }

/* detection overlays sit inside the camera, so they zoom with the page */
.rg { position: absolute; border: 1.5px dashed rgba(62, 84, 136, .9); border-radius: 8px; pointer-events: none; opacity: 0 }
.rg .rn { position: absolute; left: -1px; top: -18px; display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: #fff; background: #3E5488; padding: 1px 5px 1px 2px; border-radius: 4px; white-space: nowrap }
.rg .rn img { width: 12px; height: 12px; border-radius: 3px; background: #fff }
.scanline { position: absolute; left: 0; right: 0; height: 80px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(101, 125, 181, .16) 70%, rgba(101, 125, 181, .5) 98%, rgba(220, 228, 135, .95)); border-bottom: 1.5px solid #DCE487 }
.code { position: absolute; left: 12px; bottom: 12px; width: min(470px, calc(100% - 24px)); background: rgba(15, 21, 38, .96); color: #D7DEEE; border-radius: 11px; padding: 10px 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; z-index: 3;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); white-space: pre-wrap; word-break: break-all; opacity: 0; visibility: hidden; transform-origin: bottom left; min-height: 64px }
.code.top { bottom: auto; top: 12px; transform-origin: top left }
.code .ln { color: #5F6B88; user-select: none; margin-right: 8px }
.code .tg { color: #8FB3FF } .code .at { color: #C9A2FF } .code .st { color: #DCE487 } .code .cm { color: #6F7C99 } .code .nm { color: #F0A97A }
.code .hd { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; color: #8E99B6; margin-bottom: 5px; white-space: nowrap }
.code .hd img, .code .hd .gl { width: 18px; height: 18px; border-radius: 5px; background: #fff; flex: none; display: grid; place-items: center; color: #3E5488 }
.code .hd .gl .ico { width: 12px; height: 12px }
.code .hd b { color: #fff; font-weight: 600 }
.code .hd .ok { margin-left: auto; color: #0F1526; background: #DCE487; border-radius: 999px; padding: 0 7px; font-weight: 700 }
.zbar { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 10.5px; color: #3B4256; background: rgba(255, 255, 255, .92); border: 1px solid #DDE1EA; border-radius: 8px; padding: 3px 8px; white-space: nowrap; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .4) }
.zbar .ico { width: 12px; height: 12px; color: #3E5488 }
@media (max-width: 560px) { .zbar { display: none } .code { font-size: 10px; padding: 8px 10px; min-height: 0 } }

/* the lead profile card: the app's store header, smaller, frosted, pinned top right */
.lpc { position: absolute; right: 0; top: 0; width: 304px; z-index: 5; border-radius: 18px; overflow: hidden; color: #E9ECF4;
  background: rgba(17, 23, 42, .78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 34px 70px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12) }
@container (max-width: 470px) { .lpc { position: relative; width: auto; margin-top: 12px } }
.lpc .grain { position: relative; overflow: hidden; color: #F3F5FA }
.lpc .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .38; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.lpc .grain > * { position: relative; z-index: 1 }
.lpc .g-indigo { background: radial-gradient(42% 60% at 88% 0%, #6C87BC, transparent 72%), radial-gradient(36% 58% at 4% 100%, #B2C7DD, #536BA3 38%, transparent 72%), radial-gradient(70% 70% at 50% 50%, #222F4D, transparent 80%), #0E1527 }
.lpc .lh { padding: 14px 14px 12px; display: flex; gap: 11px; align-items: center }
.lpc .lt { width: 40px; height: 40px; border-radius: 11px; background: #FBF8F3; color: #201D19; display: grid; place-items: center; font-weight: 700; letter-spacing: -.05em; font-size: 14px; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25) }
.lpc .lh b { display: block; font-size: 15px; letter-spacing: -.02em }
.lpc .lh small { display: block; font-family: var(--mono); font-size: 11px; color: rgba(243, 245, 250, .75) }
.lpc .lh .ex { margin-left: auto; align-self: flex-start; font-size: 10px; font-weight: 600; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 2px 8px; white-space: nowrap }
.lpc .ls { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1) }
.lpc .ls div { padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.lpc .ls div + div { border-left: 1px solid rgba(255, 255, 255, .08) }
.lpc .ls small { font-size: 10px; color: #9BA2B7; white-space: nowrap }
.lpc .ls b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; white-space: nowrap }
.lpc .sh { display: flex; align-items: center; gap: 8px; padding: 9px 14px 5px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9BA2B7 }
.lpc .sh .n { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0; color: #1B2440; background: #DCE487; border-radius: 999px; padding: 0 8px }
.lpc .slot { position: relative; height: 42px; margin: 0 8px; border-radius: 10px }
.lpc .slot .sk { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; padding: 0 8px }
.lpc .slot .sk::before { content: ""; width: 24px; height: 24px; border-radius: 7px; border: 1px dashed rgba(255, 255, 255, .16) }
.lpc .slot .sk i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .07); width: 46% }
.lpc .row { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; padding: 0 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); visibility: hidden }
.lpc .row .lo { width: 24px; height: 24px; border-radius: 7px; flex: none; overflow: hidden; background: #fff; display: grid; place-items: center; color: #3E5488 }
.lpc .row .lo img { width: 100%; height: 100% }
.lpc .row .lo .ico { width: 14px; height: 14px }
.lpc .row .tx { min-width: 0; flex: 1; line-height: 1.2 }
.lpc .row .tx b { display: block; font-size: 12px; font-weight: 600 }
.lpc .row .tx small { display: block; font-size: 10.5px; color: #AEB5C9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lpc .row .sn { font-family: var(--mono); font-size: 9.5px; color: #8E96AC; white-space: nowrap }
.lpc .ft3 { display: flex; align-items: center; gap: 6px; padding: 9px 14px 12px; font-size: 10.5px; color: #8E96AC; flex-wrap: wrap }
.lpc .ft3 .tl { display: flex; gap: 5px; margin-left: auto }
.lpc .ft3 .tl img { width: 20px; height: 20px; border-radius: 6px; background: #fff; opacity: 0 }
.flytag { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: #DCE487; color: #1B2440; font-size: 12px; font-weight: 600;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .5); white-space: nowrap; visibility: hidden }
.flytag img, .flytag .gl { width: 20px; height: 20px; border-radius: 6px; background: #fff; display: grid; place-items: center; color: #3E5488 }
.flytag .ico { width: 13px; height: 13px }

/* every change is a signal: one browser window, a Chrome tab strip, one page at a time, and the ShopLeads store drawer
   docked beside it (below it on phones). Each source is read like the tech-stack scan reads a store: cursor, zoom,
   scan line, highlight, the code behind it, then the signal lands on the drawer. */
.tabx { position: relative }
.cw { position: relative; border-radius: 14px; overflow: hidden; background: #fff; color: #1D2233; box-shadow: 0 40px 80px -40px rgba(5, 12, 30, .65), 0 0 0 1px var(--line) }
.ctabs { display: flex; align-items: flex-end; gap: 8px; height: 40px; padding: 0 10px; background: #DDE1E8 }
.ctabs .dots { display: flex; gap: 6px; align-self: center; margin-right: 4px } .ctabs .dots i { width: 10px; height: 10px; border-radius: 50%; background: #C3C8D2 }
.ctabs .dots i:nth-child(1) { background: #EE6A5F } .ctabs .dots i:nth-child(2) { background: #F5BE4F } .ctabs .dots i:nth-child(3) { background: #62C554 }
.ctabs .tabs { flex: 1; min-width: 0; display: flex; align-items: flex-end; height: 34px; overflow: hidden }
.ctabs .tab { position: relative; flex: 1 1 210px; max-width: 0; min-width: 0; height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 9px 9px 0 0; font-size: 12px; color: #3B4256; white-space: nowrap; overflow: hidden }
.ctabs .tab + .tab::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 1px; background: #B9BFCB }
.ctabs .tab.on { background: #fff; color: #1D2233; font-weight: 500 } .ctabs .tab.on::before, .ctabs .tab.on + .tab::before { display: none }
.ctabs .tab .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis } .ctabs .tab .x { font-size: 13px; color: #7A8195 }
.ctabs .tab .tld { position: absolute; left: 9px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #C9CEDA; border-top-color: #3E5488; opacity: 0; background: #fff }
.ctabs .plus { align-self: center; font-size: 18px; color: #5B6275; padding: 0 6px }
.cw .fv { width: 16px; height: 16px; border-radius: 4px; flex: none; display: grid; place-items: center; color: #3E5488; object-fit: contain } .cw .fv .ic { width: 14px; height: 14px }
.cw .fv.fj { background: #201D19; color: #FBF8F3; font-size: 7.5px; font-weight: 700; letter-spacing: -.04em }
.ctool { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-bottom: 1px solid #E3E6EC; color: #5B6275; background: #fff }
.ctool .ic { width: 16px; height: 16px; flex: none }
.ctool .omni { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: #F1F3F6; font-family: var(--mono); font-size: 11.5px; color: #3B4256; white-space: nowrap; overflow: hidden }
.ctool .omni .ico { width: 12px; height: 12px; color: #1F8A4C } .ctool .omni .ut { overflow: hidden; text-overflow: ellipsis }
.ctool .extag { font-size: 10.5px; font-weight: 600; color: #3E5488; background: #E8ECF6; border-radius: 999px; padding: 2px 8px; white-space: nowrap }
.ctool .ext { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #DCE487 } .ctool .ext img { width: 15px; height: 15px }
.ctool .ldbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #3E5488; transform-origin: 0 50%; opacity: 0 }
.cbody { display: grid; grid-template-columns: minmax(0, 1fr) 316px; background: #F4F5F8 }
.cpage { position: relative; aspect-ratio: 960 / 600; overflow: hidden; background: #fff }
.cpage .canvas { position: absolute; left: 0; top: 0; width: 960px; height: 600px; transform-origin: 0 0 }
.cpage .pg { position: absolute; inset: 0; width: 960px; height: 600px; overflow: hidden; visibility: hidden; background: #fff }
.cpage .pz { position: relative; width: 960px; height: 600px; transform-origin: 0 0; will-change: transform }
.cpage .scanline { z-index: 4 }
.cpage .cur { position: absolute; left: 0; top: 0; z-index: 9; width: 22px; height: 22px; margin: -2px 0 0 -3px; transform-origin: 3px 2px; visibility: hidden; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)) }
.cpage .clk { position: absolute; left: -16px; top: -16px; z-index: 8; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #DCE487; background: rgba(220, 228, 135, .25); opacity: 0; pointer-events: none }
.cpage .tcode { z-index: 6 }
.cpage .zbar { z-index: 6 }
.cpage .keys { position: absolute; left: 50%; bottom: 14px; z-index: 7; display: flex; gap: 6px; visibility: hidden; padding: 6px; border-radius: 12px; background: rgba(27, 36, 64, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px) }
.cpage .keys kbd { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(#FFFFFF, #E9ECF2); color: #1B2440; font: 600 16px var(--sans); box-shadow: 0 3px 0 #9AA3B8, 0 6px 14px -6px rgba(0, 0, 0, .6) }
.cpage .keys.dn kbd { box-shadow: 0 1px 0 #9AA3B8; translate: 0 2px }
/* the docked lead panel: the app's store drawer (d-cover, d-stats, d-tabs, timeline) */
.sdr { display: flex; min-height: 0; border-left: 1px solid #E3E6EC }
.sdr .drawer { position: relative; inset: auto; width: 100%; transform: none; box-shadow: none; border-left: 0; display: flex; flex-direction: column; overflow: hidden }
.sdr .d-cover { padding: 14px 16px 16px } .sdr .d-cover .tile { width: 36px; height: 36px; border-radius: 10px; background: #FBF8F3; color: #201D19; border: 0; font-weight: 700; letter-spacing: -.05em }
.sdr .d-cover h3 { font-size: 19px; margin-top: 10px } .sdr .d-cover p { font-size: 12px }
.sdr .d-stats { padding: 10px 12px; gap: 6px } .sdr .d-stat { padding: 7px 8px } .sdr .d-stat b { font-size: 14px }
.sdr .d-tabs { padding: 0 14px; gap: 14px; position: relative } .sdr .d-tabs button { font-size: 12px; padding: 9px 0 7px }
.sdr .d-body { flex: 1; min-height: 0; padding: 6px 0 0 } .sdr .d-sec { padding: 4px 14px 8px; height: 100% }
.sdr .tlist { position: relative; flex: 1; min-height: 0; height: 100%; overflow: hidden; margin-left: 4px }
.sdr .tlist .tli { position: absolute; left: 14px; right: 0; top: 0; visibility: hidden; overflow: hidden; font-size: 12.5px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; padding: 2px 0 }
.sdr .tlist .tli::before { left: -18.5px; top: 6px }
.sdr .tlist .tli .ic-wrap { display: inline-grid; place-items: center; width: 16px; height: 16px; vertical-align: -3px } .sdr .tlist .tli .ic-wrap img { width: 16px; height: 16px; border-radius: 4px } .sdr .tlist .tli .ic-wrap .ico { width: 14px; height: 14px }
.sdr .tlist .tli .lb { font-weight: 600 } .sdr .tlist .tli .lb .iw { display: inline-block }
.sdr .tlist .tli small { overflow: hidden; text-overflow: ellipsis }
.sdr .tlist .tli .fx { font-style: normal; font-size: 9.5px; font-weight: 600; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: var(--off-soft); color: var(--off) }
.sdr .tlist .tli .sell { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: #2D3510; background: #DCE487; border-radius: 6px; padding: 1px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis }
.sdr .tlist .tli.sm small, .sdr .tlist .tli.sm .sell { display: none }
.sdr .dft { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-family: var(--mono); font-size: 10.5px }
.sdr .dft .spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--iris); flex: none }
.chip2 { position: absolute; left: 0; top: 0; z-index: 12; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; background: #DCE487; color: #1B2440; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55); white-space: nowrap; visibility: hidden }
.chip2 .lo { width: 24px; height: 24px; border-radius: 7px; background: #fff; display: grid; place-items: center; color: #3E5488; overflow: hidden } .chip2 .lo img { width: 100%; height: 100% } .chip2 .lo .ico { width: 14px; height: 14px }
.chip2 b { display: block; font-size: 12.5px } .chip2 small { display: block; font-size: 10.5px; font-weight: 600; color: #3B4508 }
/* odometer digits */
.odo { display: inline-flex; align-items: flex-start; height: 1.15em; overflow: hidden; vertical-align: middle; font-family: var(--mono); font-variant-numeric: tabular-nums; line-height: 1.15 }
.odo .od, .odo .oc { display: block; height: 1.15em; overflow: hidden } .odo .ods { display: flex; flex-direction: column } .odo .ods i { display: block; font-style: normal; height: 1.15em; line-height: 1.15em }
@container (max-width: 470px) { .cbody { grid-template-columns: minmax(0, 1fr) } .sdr { border-left: 0; border-top: 1px solid #E3E6EC } .sdr .d-body { flex: none; height: 132px } .sdr .d-cover { padding: 10px 14px } .sdr .d-cover h3 { font-size: 16px; margin-top: 4px } }
@container (max-width: 640px) { .ctool .extag, .ctool > .ic:nth-child(2), .ctabs .dots { display: none } .cpage .keys kbd { min-width: 26px; height: 26px; font-size: 13px } .chip2 { padding: 4px 9px 4px 4px } .chip2 b { font-size: 11.5px } .cpage .zbar { display: none } .ctabs .tab { font-size: 11px } }

/* matched lines */
.tabx .key { position: relative; isolation: isolate; border-radius: 8px }
.tabx .key .sw, .tabx .mk .sw { position: absolute; inset: -5px -8px; border-radius: 8px; background: rgba(220, 228, 135, .7); transform: scaleX(0); transform-origin: 0 50%; z-index: -1; display: block }
.tabx .mk { position: relative; isolation: isolate; display: inline-block } .tabx .mk .sw { inset: -2px -4px; background: rgba(220, 228, 135, .55); border-radius: 5px }
.tabx .key.ik { display: inline-block } .tabx .ann .key.inl { display: flex; gap: 14px; align-items: center; padding: 2px 8px } .tabx .ann .key .sw { background: rgba(220, 228, 135, .4) }
.tabx .px { position: relative; width: 960px; height: 600px; overflow: hidden; font-family: var(--sans); color: #1D2233; background: #fff; line-height: 1.45 }
.tabx .px h5, .tabx .px h6, .tabx .sf h5 { margin: 0; font-weight: 650 } .tabx .px p { margin: 0 }
.tabx .jf { display: grid; place-items: center; flex: none; border-radius: 22%; background: #201D19; color: #FBF8F3; font-weight: 700; letter-spacing: -.05em }
.tabx .wm { font-weight: 700; font-size: 18px; letter-spacing: -.04em; color: #201D19 } .tabx .wm span { color: #B4602F; font-weight: 500 }
.tabx .box { border: 1px solid #E6E8EE; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: #fff }
.tabx .box small { font-size: 10.5px; color: #7A8195; text-transform: uppercase; letter-spacing: .08em; font-weight: 600 } .tabx .box b { font-size: 13px; margin-top: -4px }
.tabx .tool { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 550 } .tabx .tool img { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 1px #ECEEF3 }
.tabx .sp { flex: 1 }

/* the storefront and its cart drawer (the example store's theme) */
.tabx .sf .rt { padding-right: 0; position: relative }
.tabx .sf .tmr { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); background: #C6502F; color: #fff; padding: 2px 8px; border-radius: 5px; font-size: 11.5px }
.tabx .sf .tmr i { font-style: normal; background: rgba(0, 0, 0, .18); border-radius: 3px; padding: 0 3px }
.tabx .sf .cartic { position: relative; display: inline-grid } .tabx .sf .cartic b { position: absolute; right: -7px; top: -6px; width: 15px; height: 15px; border-radius: 50%; background: #C6502F; color: #fff; font-size: 9.5px; display: grid; place-items: center }
.tabx .fs { height: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #F1EBDF; border-bottom: 1px solid #ECE6DA; font-size: 11.5px; color: #4A453D } .tabx .fs .ic { width: 15px; height: 15px }
.tabx .sf .shero { height: 220px }
.tabx .sf .key.pk { display: flex; flex-direction: column } .tabx .sf .key.pk .sw { inset: -6px }
.tabx .cartd { position: absolute; right: 0; top: 0; bottom: 0; width: 380px; z-index: 5; background: #FBF8F3; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .55); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; transform: translateX(100%); font-size: 13px; color: #201D19 }
.tabx .cartd .ch { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #ECE6DA } .tabx .cartd .ch b { font-size: 17px; letter-spacing: -.02em } .tabx .cartd .ch span { color: #6B655B; font-size: 12px } .tabx .cartd .ch .ic { margin-left: auto; width: 18px; height: 18px }
.tabx .cartd .fsp span { display: block; font-size: 12.5px; margin-bottom: 6px } .tabx .cartd .fsp i { display: block; height: 6px; border-radius: 3px; background: #E7DFD0; overflow: hidden } .tabx .cartd .fsp i b { display: block; height: 100%; background: #201D19 }
.tabx .cartd .ci { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center } .tabx .cartd .ci .im { height: 72px; border-radius: 8px; background: #EFE7DA center / cover } .tabx .cartd .ci small { display: block; color: #6B655B } .tabx .cartd .ci s { color: #9A9285 } .tabx .cartd .ci .qty { font-size: 12px; border: 1px solid #E2DACB; border-radius: 999px; padding: 3px 10px }
.tabx .cartd .cs { border-top: 1px solid #ECE6DA; padding-top: 10px; display: flex; flex-direction: column; gap: 5px } .tabx .cartd .cs div { display: flex; justify-content: space-between; color: #4A453D }
.tabx .cartd .cnote { display: flex; gap: 10px; align-items: flex-start; background: #FFF4D6; border: 1px solid #F0D58A; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #5A4410 } .tabx .cartd .cnote .ic { width: 18px; height: 18px; color: #A86F00; flex: none }
.tabx .cartd .chk { background: #201D19; color: #fff; text-align: center; border-radius: 999px; padding: 11px; font-weight: 600 } .tabx .cartd .pay { text-align: center; font-size: 11.5px; color: #4A453D } .tabx .cartd .pay i { font-style: normal; font-weight: 700; background: #B2FCE4; color: #000; border-radius: 4px; padding: 0 4px }

/* an ATS job post */
.ats { background: #fff }
.ats .top { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 64px; border-bottom: 1px solid #EEF0F3 } .ats .top .lnk { font-size: 13px; color: #3E5488 }
.ats .bd { display: grid; grid-template-columns: 1fr 250px; gap: 40px; padding: 26px 64px }
.ats h5 { font-size: 32px; letter-spacing: -.035em; line-height: 1.1 } .ats .cats { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .08em; color: #6B7286; font-weight: 600 } .ats .posted { display: block; margin-top: 4px; font-size: 12px; color: #6B7286 }
.ats .key { display: block; padding: 4px 0 }
.ats p, .ats li { font-size: 13px; color: #3B4256; line-height: 1.6 } .ats p { margin-top: 16px } .ats h6 { font-size: 14px; margin: 16px 0 6px } .ats ul { margin: 0; padding-left: 18px }
.ats aside { display: flex; flex-direction: column; gap: 12px; padding-top: 8px } .ats .apply { background: #1B2440; color: #fff; border-radius: 8px; padding: 12px; text-align: center; font-weight: 600; font-size: 13px }

/* a LinkedIn-style profile (source mark only; the person is an example) */
.li { background: #F4F2EE; color: rgba(0, 0, 0, .9) }
.li .top { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 40px; background: #fff; border-bottom: 1px solid #E3E1DC }
.li .top .lim { width: 30px; height: 30px; border-radius: 5px } .li .top .q { display: flex; align-items: center; gap: 8px; width: 250px; height: 32px; padding: 0 12px; border-radius: 5px; background: #EEF3F8; font-size: 13px; color: rgba(0, 0, 0, .6) } .li .top .q .ic { width: 15px; height: 15px }
.li .top .nvi { display: flex; flex-direction: column; align-items: center; gap: 1px; color: rgba(0, 0, 0, .6); width: 64px } .li .top .nvi .ic { width: 20px; height: 20px } .li .top .nvi small { font-size: 10.5px }
.li .bd { display: grid; grid-template-columns: 1fr 250px; gap: 20px; padding: 18px 40px }
.li .card { background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(140, 140, 140, .2); overflow: hidden }
.li .main { display: flex; flex-direction: column; gap: 12px }
.li .pc .cov { height: 96px; background: #5E4A36 url('/brand/example-store/hero.webp') center 40% / cover }
.li .pc .who { position: relative; padding: 0 22px 16px; display: flex; flex-direction: column }
.li .pc .av { width: 104px; height: 104px; margin-top: -56px; border-radius: 50%; border: 4px solid #fff; background: radial-gradient(60% 60% at 35% 30%, #F4D9BC, #C99A73); color: #5B3A22; display: grid; place-items: center; font-size: 34px; font-weight: 650 }
.li .pc .exm { position: absolute; right: 18px; top: 12px; font-size: 11px; font-weight: 600; color: #3E5488; background: #E8ECF6; border-radius: 999px; padding: 2px 9px }
.li .pc b { font-size: 22px; letter-spacing: -.01em; margin-top: 8px } .li .pc .hl { font-size: 14px } .li .pc .lc { font-size: 12.5px; color: rgba(0, 0, 0, .6); margin-top: 3px } .li .pc .lc a { color: #0A66C2; font-weight: 600 } .li .pc .cn { font-size: 12.5px; color: #0A66C2; font-weight: 600; margin-top: 3px }
.li .pc .btns { display: flex; gap: 8px; margin-top: 10px } .li .pc .btns span { padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 600 } .li .pc .b1 { background: #0A66C2; color: #fff } .li .pc .b2 { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); color: rgba(0, 0, 0, .6) }
.li .ex { padding: 14px 22px } .li .ex h6 { font-size: 17px; margin-bottom: 4px }
.li .it { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid #EBEBEB; align-items: flex-start } .li .key .it { border-top: 0 }
.li .it b { display: block; font-size: 14px } .li .it span { display: block; font-size: 13px } .li .it .dt { color: rgba(0, 0, 0, .6); font-size: 12.5px }
.li .it .co { width: 44px; height: 44px; border-radius: 4px; background: #E7EEE6; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none }
.li .it .new { margin-left: auto; font-size: 11px !important; font-weight: 650; color: #057642; background: #DCF3E5; border-radius: 999px; padding: 2px 9px }
.li aside { display: flex; flex-direction: column; gap: 12px }
.li .nr { padding: 0 0 12px } .li .nr .cf { height: 64px; background: radial-gradient(circle at 20% 40%, #F5C33B 0 4px, transparent 5px), radial-gradient(circle at 70% 30%, #E7A33E 0 3px, transparent 4px), radial-gradient(circle at 45% 70%, #44712E 0 4px, transparent 5px), linear-gradient(120deg, #DCF3E5, #B8E3C8) }
.li .nr .tag { display: block; margin: 10px 14px 4px; font-size: 11px; font-weight: 700; color: #057642; text-transform: uppercase; letter-spacing: .06em } .li .nr p { margin: 0 14px; font-size: 13px } .li .nr .re { display: block; margin: 8px 14px 0; font-size: 11.5px; color: rgba(0, 0, 0, .6) }
.li .pav { padding: 12px 14px } .li .pav h6 { font-size: 14px; margin-bottom: 8px } .li .pv { display: flex; align-items: center; gap: 10px; padding: 6px 0 } .li .pv i { width: 34px; height: 34px; border-radius: 50%; background: #E6E2DA } .li .pv span { height: 8px; border-radius: 4px; background: #ECE9E3 }

/* the ShopLeads app itself, with the store drawer open (real app markup under .appui) */
.tabx .sda { background: var(--bg) } .tabx .sda .app { height: 600px; border: 0; border-radius: 0; display: flex; flex-direction: column }
.tabx .sda .app-top { min-height: 48px; gap: 18px } .tabx .sda .tabs button { padding: 13px 0 11px; font-size: 13px }
.tabx .sda .app-body { display: block !important } .tabx .sda .main { padding: 14px 16px } .tabx .sda .tablebox { width: 52% }
.tabx .sda .skb { display: block; height: 8px; border-radius: 4px; background: var(--line); margin: 3px 0 } .tabx .sda .tile { width: 28px; height: 28px; font-size: 10px }
.tabx .sda .drawer { position: absolute; top: 48px; bottom: 0; right: 0; width: 46%; transform: none; overflow: hidden }
.tabx .sda .drawer .d-cover h3 { font-size: 22px; margin-top: 10px } .tabx .sda .drawer .d-cover .tile { background: #FBF8F3; color: #201D19; border: 0; font-weight: 700; width: 38px; height: 38px }
.tabx .sda .timeline .key { display: block } .tabx .sda .timeline img.app-logo { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px }

/* a review site page (source: Trustpilot) */
.rvs { background: #F7F7F3 }
.rvs .top { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 44px; background: #1C1C1C; color: #fff } .rvs .top b { font-size: 18px; letter-spacing: -.02em }
.rvs .top .q { display: flex; align-items: center; gap: 8px; width: 290px; height: 34px; padding: 0 14px; border-radius: 999px; background: #fff; color: #6B6B6B; font-size: 13px } .rvs .top .q .ic { width: 15px; height: 15px }
.rvs .top .src { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #CFCFCF } .rvs .top .src img { width: 16px; height: 16px; border-radius: 3px }
.rvs .hero2r { display: flex; align-items: center; gap: 18px; padding: 20px 44px; background: #fff; border-bottom: 1px solid #E8E8E3 }
.rvs .hero2r .nm { display: block; font-size: 26px; letter-spacing: -.02em } .rvs .hero2r .cnt { display: block; font-size: 13px; color: #555 } .rvs .hero2r .vw { margin-left: auto; padding: 10px 18px; border-radius: 999px; border: 1px solid #1C1C1C; font-size: 13px; font-weight: 600 }
.rvs .key.ik2 { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; padding: 2px 4px }
.rvs .tbx { display: inline-flex; gap: 3px } .rvs .tbx i { width: 26px; height: 26px; display: grid; place-items: center; background: linear-gradient(90deg, #FF8622 var(--f), #DCDCE6 var(--f)); color: #fff } .rvs .tbx i .ic { width: 18px; height: 18px; fill: #fff; stroke: none }
.rvs .tbx.sm i { width: 18px; height: 18px } .rvs .tbx.sm i .ic { width: 12px; height: 12px } .rvs .tbx.sm i { background: linear-gradient(90deg, #FF3722 var(--f), #DCDCE6 var(--f)) }
.rvs .ts { font-size: 15px } .rvs .ts b { font-size: 18px }
.rvs .bd { display: grid; grid-template-columns: 240px 1fr; gap: 22px; padding: 18px 44px }
.rvs .dist2 { background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid #E8E8E3; align-self: start } .rvs .dist2 h6 { font-size: 14px; margin-bottom: 8px }
.rvs .dist2 div { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 8px; font-size: 12px; margin-top: 6px } .rvs .dist2 i { display: block; height: 8px; border-radius: 4px; background: #E8E8E3; overflow: hidden } .rvs .dist2 i b { display: block; height: 100%; background: #9C9C9C } .rvs .dist2 div:last-child i b { background: #FF3722 } .rvs .dist2 em { font-style: normal; text-align: right; color: #555 }
.rvs .revs { display: flex; flex-direction: column; gap: 12px }
.rvs .rc2 { background: #fff; border-radius: 10px; padding: 14px 16px; border: 1px solid #E8E8E3; display: flex; flex-direction: column; gap: 6px }
.rvs .rh { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #F0F0EC } .rvs .rh b { font-size: 13px } .rvs .rh small { font-size: 11.5px; color: #6B6B6B } .rvs .rh .rd { margin-left: auto; font-size: 12px; color: #6B6B6B }
.rvs .ra { width: 30px; height: 30px; border-radius: 50%; background: #F2D8C9; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #7A4A2E } .rvs .ra.b { background: #D9E4F2; color: #2E4A7A }
.rvs .rt { font-size: 15px; display: block } .rvs .key .rt { display: inline-block } .rvs .rc2 p { font-size: 13px; color: #3B3B3B }

/* a newswire release */
.nws { background: #fff }
.nws .top { display: flex; align-items: center; gap: 22px; height: 54px; padding: 0 44px; background: #0E2A47; color: #DCE6F2; font-size: 12.5px } .nws .top b { color: #fff; font-size: 19px; letter-spacing: -.02em; margin-right: 8px } .nws .top .q .ic { width: 16px; height: 16px }
.nws .bd { display: grid; grid-template-columns: 1fr 260px; gap: 34px; padding: 24px 44px }
.nws .prov { display: block; font-size: 11px; letter-spacing: .06em; color: #6B7286; margin-bottom: 10px } .nws .prov b { color: #0E2A47 }
.nws h5 { font-size: 30px; line-height: 1.12; letter-spacing: -.03em; color: #0E2A47 } .nws .key { display: block; padding: 2px 0 }
.nws .sub { font-style: italic; color: #4A5164; font-size: 14px; margin-top: 10px } .nws p { font-size: 13.5px; line-height: 1.65; color: #2B3245; margin-top: 14px }
.nws .ln { display: block; height: 8px; border-radius: 4px; background: #EDEFF4; margin-top: 11px }
.nws aside .im { height: 170px; border-radius: 8px; background: #5E4A36 url('/brand/example-store/hero.webp') center / cover } .nws aside small { display: block; font-size: 11px; color: #7A8195; margin: 6px 0 12px }

/* read your site, in 3D: layered cards on a tilted plane (dale-motion: rx 6, r -1.4), a camera that settles in and
   pushes each beat, ghost-to-ink words, a pain slab that clamps on, an odometer and a travelling citron focus */
.r3d { perspective: 1500px; perspective-origin: 50% 20%; overflow-x: clip; padding: 8px 4px 18px }
.r3d .rig { --cs: 1; --cr: 0deg; transform-style: preserve-3d; transform: rotateX(7deg) rotateZ(calc(-1.4deg + var(--cr))) scale(calc(var(--cs) * .92)); transform-origin: 50% 40%;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "in icp" "site icp" "site pain" "site ppl"; grid-template-rows: auto 1fr auto auto; gap: 14px 22px }
.r3d .rc { border-radius: 16px; min-width: 0 }
.r3d .rin { grid-area: in; transform: translateZ(24px); background: color-mix(in srgb, var(--panel) 78%, transparent); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 24px 40px -26px rgba(14, 21, 39, .55) }
.r3d .rin .sbar { max-width: none; box-shadow: 0 0 0 1px var(--line); padding: 4px 4px 4px 12px }
.r3d .rin .sbar .btn { padding: 8px 12px; font-size: 13px }
.r3d .tq { font-family: var(--mono); font-size: 14px; color: #1B2440; white-space: nowrap; overflow: hidden; flex: 1; min-width: 0; padding: 8px 0 }
.r3d .tq i { display: inline-block; width: 2px; height: 15px; background: #1B2440; vertical-align: -2px; margin-left: 1px }
.r3d .rmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 22px }
.r3d .rtag { font-size: 11px; font-weight: 600; color: #3E5488; background: #E8ECF6; border-radius: 999px; padding: 2px 9px }
.r3d .rstatus { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); font-family: var(--mono) }
.r3d .rstatus .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent) }
.r3d .rsite { grid-area: site; position: relative; transform: translateZ(-50px) rotateY(10deg); transform-origin: 100% 50%; background: var(--panel); border: 1px solid var(--line); padding: 12px; overflow: hidden; min-height: 320px; box-shadow: 0 30px 60px -36px rgba(14, 21, 39, .6) }
.r3d .wire { display: flex; flex-direction: column; gap: 9px }
.r3d .wire .wn { display: flex; gap: 8px; align-items: center } .r3d .wire .wn i { height: 8px; border-radius: 4px; background: var(--line); display: block }
.r3d .wire .wl, .r3d .wire .wh { height: 9px; border-radius: 5px; background: var(--line); position: relative; overflow: hidden } .r3d .wire .wh { height: 18px; width: 70% }
.r3d .wire .wl::after, .r3d .wire .wh::after { content: ""; position: absolute; inset: 0; width: var(--f, 0%); background: color-mix(in srgb, var(--accent) 38%, var(--line)); border-radius: inherit }
.r3d .wire .wb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px } .r3d .wire .wb div { height: 44px; border-radius: 8px; background: var(--soft); border: 1px solid var(--line) }
.r3d .rline { position: absolute; left: 0; right: 0; height: 40px; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 22%, transparent) 75%, rgba(220, 228, 135, .9)); border-bottom: 1.5px solid #DCE487 }
.r3d .pst { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column-reverse; gap: 6px; align-items: flex-start }
.r3d .phr { display: inline-flex; max-width: 100%; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: #DCE487; color: #2D3510; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; visibility: hidden }
.r3d .lbl { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.r3d .ricp { grid-area: icp; transform: translateZ(10px); background: linear-gradient(160deg, var(--panel), color-mix(in srgb, var(--panel) 82%, var(--accent-soft))); border: 1px solid var(--line); padding: 14px 16px 30px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 30px 50px -34px rgba(14, 21, 39, .6); min-height: 210px; opacity: 0 }
.r3d .icpt { font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; color: var(--ink); min-height: 2.5em }
.r3d .iw { display: inline-block; opacity: 0; transform-origin: 50% 70% }
.r3d .whob { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.r3d .avs { display: flex; padding-left: 8px }
.r3d .av { width: 40px; height: 40px; border-radius: 50%; margin-left: -8px; display: grid; place-items: center; border: 2.5px solid #fff; color: #fff; box-shadow: 0 8px 16px -8px rgba(14, 21, 39, .6); visibility: hidden }
.r3d .av .ico { width: 18px; height: 18px } .r3d .av.a0 { background: linear-gradient(140deg, #3E5488, #1B2440) } .r3d .av.a1 { background: linear-gradient(140deg, #657DB5, #3E5488) } .r3d .av.a2 { background: linear-gradient(140deg, #BECFE3, #657DB5); color: #1B2440 } .r3d .av.a3 { background: linear-gradient(140deg, #E8EDB0, #DCE487); color: #1B2440 }
.r3d .rps { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 }
.r3d .rp { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; visibility: hidden }
.r3d .crit { display: flex; flex-wrap: wrap; gap: 6px } .r3d .cc { font-size: 11.5px; font-family: var(--mono); padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); opacity: 0 }
.r3d .rpain { grid-area: pain; position: relative; margin-top: -40px; transform: translateZ(40px); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; color: #F3F5FA; opacity: 0;
  background: linear-gradient(160deg, #26324F, #121A2E); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 2px 0 #0A1020, 0 4px 0 #0A1020, 0 26px 40px -22px rgba(5, 10, 25, .8); min-height: 96px }
.r3d .rpain .lbl { color: #9BA2B7 } .r3d .rpain p { font-size: 16px; font-weight: 600; line-height: 1.3; margin-top: 3px }
.r3d .rpain .pic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: rgba(240, 138, 128, .18); color: #F08A80 } .r3d .rpain .pic .ico { width: 20px; height: 20px }
.r3d .rpain .pb { min-width: 0; flex: 1 }
.r3d .rpain .gps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px } .r3d .rpain .gp { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(229, 178, 74, .18); color: #E5B24A; opacity: 0 }
.r3d .rip { position: absolute; left: 50%; top: 0; width: 70%; height: 30px; margin-left: -35%; border-radius: 50%; border: 2px solid #DCE487; box-shadow: 0 0 18px rgba(220, 228, 135, .6); pointer-events: none; opacity: 0 }
.r3d .rppl { grid-area: ppl; transform: translateZ(24px); background: var(--panel); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 30px 50px -34px rgba(14, 21, 39, .6); opacity: 0; min-height: 250px }
.r3d .ph1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel)); border-bottom: 1px solid var(--line) }
.r3d .ph1 .odo.big { font-size: 30px; font-weight: 500; letter-spacing: -.04em; color: var(--ink) } .r3d .ph1 > span:last-child { color: var(--muted); font-size: 13px }
.r3d .rrs { position: relative }
.r3d .focus { position: absolute; left: 6px; right: 6px; top: 0; border-radius: 10px; box-shadow: 0 0 0 2px #DCE487, 0 0 16px rgba(220, 228, 135, .55); background: rgba(220, 228, 135, .12); opacity: 0; pointer-events: none }
.r3d .rr { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-size: 13px; min-width: 0; visibility: hidden }
.r3d .rr img, .r3d .rr .nl { width: 22px; height: 22px; border-radius: 6px; flex: none; background: var(--soft) }
.r3d .rr .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto }
.r3d .rr .gp { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); white-space: nowrap }
.r3d .rr .pp { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap }
.r3d .rr .lk { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; white-space: nowrap } .r3d .rr .lk .ico { width: 11px; height: 11px }
.r3d .by { padding: 10px 16px 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px } .r3d .by > span:first-child { color: var(--muted); margin-right: 4px }
.r3d .by .spill { font-size: 11.5px; padding: 3px 8px; opacity: 0 }
}
@media (max-width: 520px) { .r3d .rr .gp { display: none } .r3d .icpt { font-size: 17px } .r3d .rpain p { font-size: 15px } .r3d .rin .sbar .btn { padding: 8px 10px } }

/* gaps table */
.gaps { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: 14.5px }
.gaps th, .gaps td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
.gaps tr:last-child td { border-bottom: 0 }
.gaps th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--head); font-family: var(--mono) }
.gaps td:first-child { font-weight: 600; width: 22% }
.gaps td:nth-child(2) { color: var(--muted) }
.gaps td:nth-child(3) { background: color-mix(in srgb, var(--accent-soft) 45%, transparent) }
@media (max-width: 600px) { .gaps th, .gaps td { padding: 12px 10px; font-size: 13.5px } }
.inlinecta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel) }

/* feature blocks */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 64px); align-items: center }
.feat.flip > :first-child { order: 2 }
@media (max-width: 900px) { .feat { grid-template-columns: minmax(0, 1fr) } .feat.flip > :first-child { order: 0 } }
.feat .copy { display: flex; flex-direction: column; gap: 12px }
.feat .copy .k { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-family: var(--mono) }
.feat .copy h3 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -.04em; line-height: 1.08 }
.feat .copy p { color: var(--muted); font-size: 16px }
.feat .copy .stat { font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; gap: 8px }
.stage { position: relative; border-radius: 20px; padding: clamp(18px, 4vw, 40px); min-height: 380px; display: grid; place-items: center; overflow: hidden;
  background: #121A30 url('/brand/hero.webp') center/190% no-repeat }
.stage.s2 { background-image: url('/brand/band.webp'); background-position: 20% 40% }
.stage.s3 { background-position: 90% 80% }
.stage.s4 { background-image: url('/brand/band.webp'); background-position: 80% 20%; background-size: 220% }
.card { background: rgba(255, 255, 255, .97); color: #1B2440; border-radius: 16px; box-shadow: 0 24px 48px -24px rgba(5, 15, 22, .6); width: min(440px, 100%); padding: 14px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; transform: perspective(1100px) rotateX(5deg) rotate(-1.2deg); position: relative }
.card .row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid #ECEEF3; background: #fff; position: relative; min-width: 0 }
.card .row img { width: 22px; height: 22px; border-radius: 6px; flex: none }
.card .row > div { min-width: 0 }
.card .muted { color: #62687A }
.card .badge { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #E8ECF6; color: #3E5488; white-space: nowrap; font-family: var(--mono) }
.card .badge.ok { background: #E3F3E8; color: #1F8A4C } .card .badge.warm { background: #F3D9A4; color: #5A3B06 } .card .badge.cit { background: #DCE487; color: #3B4508 }
.card .sbar { max-width: none; box-shadow: 0 0 0 1px #DDE1EA; padding: 4px 4px 4px 10px }
.card .sbar .ico { width: 15px; height: 15px }
.card .typed { font-family: var(--mono); padding: 7px 0; min-height: 32px; font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden }
.card .cursor { display: inline-block; width: 2px; height: 14px; background: #1B2440; vertical-align: -2px; margin-left: 1px }
.card .sheen { position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(90deg, transparent, rgba(190, 207, 227, .55), transparent); width: 30%; pointer-events: none }
.card .bar { height: 8px; border-radius: 4px; background: #ECEEF3; flex: 1; overflow: hidden }
.card .bar i { display: block; height: 100%; background: #657DB5; border-radius: 4px }
.card .chipx { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid #DDE1EA; background: #fff }
.card .chipx.on { background: #1B2440; color: #fff; border-color: #1B2440 }
.card .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.card .tool { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 6px; border: 1px solid #ECEEF3; border-radius: 10px; font-size: 11px; text-align: center; background: #fff; min-width: 0 }
.card .tool b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.card .tool img { width: 26px; height: 26px; border-radius: 7px }
.card .tool small { color: #62687A; font-size: 10.5px; font-family: var(--mono) }
.card .rec { border: 1px solid #DDE1EA; border-radius: 12px; background: #FAFBFD; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; transform-origin: top }
.card .rec div { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.card .rec small { color: #62687A; font-size: 10.5px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em }
.card .rec b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.card .tline { position: relative; height: 34px; margin: 2px 4px 0 }
.card .tline::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: #E2E5EC; border-radius: 2px }
.card .tline .fill { position: absolute; left: 0; top: 14px; height: 2px; background: #657DB5; border-radius: 2px }
.card .tline .td { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; border: 2px solid #3E5488 }
.card .tline .tl2 { position: absolute; top: 24px; font-family: var(--mono); font-size: 9.5px; color: #62687A; transform: translateX(-50%); white-space: nowrap }
.card .vline { position: absolute; left: 33px; top: 64px; width: 2px; height: 0; background: #C9D3EC; border-radius: 2px }
.card .odo { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums }

/* coverage + pricing + wins + faq */
.cov { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px }
.cov div { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line) }
.cov b { margin-left: auto; font-variant-numeric: tabular-nums; font-family: var(--mono); font-weight: 500 }
.cov .ico { color: var(--accent) }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px }
.pack { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px }
.pack.rec { background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel)); border-color: var(--iris) }
.pack .price { font-size: 42px; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums }
.pack ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px }
.pack li { display: flex; gap: 8px; align-items: center }
.pack li .ico { width: 15px; height: 15px; color: var(--good) }
.pack li.locked { color: var(--muted) } .pack li.locked .ico { color: var(--muted) }
.unitrow { display: flex; gap: 10px 24px; flex-wrap: wrap; font-size: 14px; color: var(--muted) }
.unitrow b { color: var(--ink) }
.assure { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px }
.assure div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px }
.assure .ico { color: var(--accent) }
.wins { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start }
@media (max-width: 900px) { .wins { grid-template-columns: minmax(0, 1fr) } }
.winstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.winstats div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px }
.winstats b { display: block; font-family: var(--mono); font-size: 26px; font-weight: 500 }
.carousel { height: 34rem; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.carousel .col { display: flex; flex-direction: column; gap: 14px; animation: marquee-y 22s linear infinite }
.carousel .col.rev { animation-direction: reverse }
.carousel:hover .col { animation-play-state: paused }
@keyframes marquee-y { from { transform: translateY(0) } to { transform: translateY(calc(-50% - 7px)) } }
.wincard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px }
.wincard .who { display: flex; gap: 10px; align-items: center }
.wincard .av { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; color: var(--accent) }
.faq details { border-bottom: 1px solid var(--line); padding-block: 16px }
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 20px; line-height: 1 }
.faq details[open] summary::after { content: "−" }
.faq p { color: var(--muted); margin-top: 8px; max-width: 70ch }
.closing { text-align: left; display: flex; flex-direction: column; gap: 18px; padding-block: clamp(56px, 8vw, 96px) }
.closing h2 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -.05em; line-height: 1.02; color: #fff; max-width: 20ch }
.stickycta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none; align-items: center; justify-content: space-between; gap: 10px; background: #1B2440; color: #fff; font-size: 12.5px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); transform: translateY(110%); transition: transform .3s ease }
.stickycta.on { transform: none }
@media (max-width: 760px) { .stickycta { display: flex } }
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1) }
[data-reveal].shown { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none } .marquee .track, .carousel .col, .dot::before { animation: none !important } }
.nav a { white-space: nowrap }
@media (max-width: 420px) { .nav img { height: 21px } .nav { gap: 10px } .nav .btn { padding: 8px 11px; font-size: 14px } }

/* hero: like DealerData, the app runs off the right edge of the page on wide screens */
@media (min-width: 981px) { .replica-wrap { margin-right: calc(50% - 50vw); padding-top: 18px } .replica-wrap .appwin { border-radius: 16px 0 0 16px } }


/* DealerData's rhythm: short sections that zigzag, text on one side and one small product card on a gradient on the
   other; on phones the text comes first, then the card */
.zz { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 64px); align-items: center; padding-block: clamp(56px, 7vw, 92px) }
.zz.flip { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) } .zz.flip > .zt { order: 2 }
@media (max-width: 900px) { .zz, .zz.flip { grid-template-columns: minmax(0, 1fr) } .zz.flip > .zt { order: 0 } }
.zz .zt { display: flex; flex-direction: column; gap: 16px; min-width: 0 }
.zz h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.04em; line-height: 1.1 }
.zz .intro { color: var(--muted); font-size: 16.5px; max-width: 52ch }
.zz .zl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px } .zz .zl li { display: flex; gap: 9px; align-items: flex-start } .zz .zl .ico { width: 17px; height: 17px; color: var(--accent); margin-top: 2px }
.zz .zs { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 10px } .zz .zs li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; font-size: 14px }
.zz .zs li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font-family: var(--mono); font-size: 12px; color: var(--accent); padding-top: 2px } .zz .zs li span { color: var(--muted); font-size: 13.5px }
.zz .domain-form { max-width: 520px }
.gcard { position: relative; isolation: isolate; container-type: inline-size; min-width: 0; border-radius: 22px; padding: clamp(14px, 2.2vw, 26px); overflow: hidden; box-shadow: 0 40px 80px -48px rgba(5, 12, 30, .7) }
.gcard::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.gcard.gc-hero { background: radial-gradient(70% 70% at 90% 0%, #E8EDB0, #DCE487 25%, transparent 62%), radial-gradient(60% 70% at 0% 100%, #BECFE3, #657DB5 45%, transparent 80%), #3E5488 }
.gcard.gc-a { background: radial-gradient(55% 60% at 90% 10%, #8EA3D6, transparent 70%), radial-gradient(60% 70% at 0% 100%, #DCE487, #7A9064 40%, transparent 75%), #1D2A3E }
.gcard.gc-b { background: radial-gradient(28% 40% at 8% 26%, #5869AB, transparent 70%), radial-gradient(60% 30% at 62% 90%, #B7BDDD, #8586C1 40%, transparent 75%), #101424 }
.gcard.gc-c { background: radial-gradient(50% 55% at 50% 52%, transparent 30%, #82A8BA88 48%, transparent 70%), radial-gradient(70% 70% at 50% 50%, #244455, transparent 85%), #101E29 }
/* the hero card holds the app; the replica no longer runs off the edge */
.gcard.gc-hero .replica-wrap { margin: 0; padding: 0 } .gcard.gc-hero .replica-wrap::before { display: none } .gcard.gc-hero .appwin { border-radius: 12px }
/* the one-window signals inside its card: a narrower drawer; the read card goes to one compact column */
@container (min-width: 471px) and (max-width: 760px) { .cbody { grid-template-columns: minmax(0, 1fr) 210px } .sdr .d-stats { display: none } .sdr .d-cover { padding: 10px 12px } .sdr .d-cover h3 { font-size: 15px; margin-top: 6px } .sdr .d-cover p { font-size: 11px } .sdr .d-tabs { gap: 10px; padding: 0 10px } .sdr .d-tabs button { font-size: 11px } .sdr .d-sec { padding: 4px 10px 6px } .sdr .tlist .tli { font-size: 11.5px } }
.gcard .scan { padding-top: 0 }
@container (max-width: 760px) and (min-width: 471px) { .scan { padding: 12px 150px 0 0 } .lpc { width: 236px } .lpc .ls, .lpc .ft3 { display: none } .lpc .slot { height: 32px } .lpc .row .tx small { display: none } .lpc .lh { padding: 10px 12px } }
.gcard .r3d { padding: 4px 0 8px }
@container (min-width: 471px) and (max-width: 820px) {
  .r3d .rig { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "in site" "icp icp" "pain pain" "ppl ppl"; grid-template-rows: none; gap: 10px 12px; transform: rotateX(3deg) rotateZ(calc(-.8deg + var(--cr))) scale(calc(var(--cs) * .92)) }
  .r3d .rsite { min-height: 0; height: 92px; padding: 8px; transform: translateZ(-20px) rotateY(10deg) } .r3d .wire { gap: 5px } .r3d .wire .wb, .r3d .wire .wn, .r3d .pst { display: none } .r3d .wire .wl { height: 6px } .r3d .wire .wh { height: 10px }
  .r3d .ricp { min-height: 0; padding: 12px 14px 22px; gap: 8px } .r3d .icpt { font-size: 15px; min-height: 0 } .r3d .av { width: 32px; height: 32px } .r3d .crit { display: none } .r3d .rp { font-size: 11px }
  .r3d .rpain { margin-top: -18px; min-height: 0; padding: 12px 14px } .r3d .rpain p { font-size: 14px }
  .r3d .rppl { min-height: 0 } .r3d .ph1 { padding: 10px 14px } .r3d .ph1 .odo.big { font-size: 24px } .r3d .rr { padding: 7px 14px; font-size: 12.5px } .r3d .rr:nth-child(n+5) { display: none } .r3d .by { padding: 8px 14px 10px }
}
@container (max-width: 470px) { .r3d .rig { grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "icp" "pain" "ppl" } .r3d .rsite { display: none } .r3d .rr .gp { display: none } }
@container (max-width: 470px) {
  .sdr .d-stats, .sdr .d-cover p { display: none } .sdr .d-cover { padding: 10px 14px; display: flex; align-items: center; gap: 10px } .sdr .d-cover h3 { margin: 0 }
  .r3d .crit, .r3d .rp:nth-child(n+3), .r3d .rr:nth-child(n+5), .r3d .rsite { display: none } .r3d .icpt { font-size: 16px } .r3d .ricp { min-height: 0; padding-bottom: 26px } .r3d .rppl { min-height: 0 }
}

/* API and MCP, and results: two more rows in the same zigzag, each on its own gradient card */
.zz .zl code { font-family: var(--mono); font-size: 12.5px; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: 0 5px }
.gcard.gc-api { background: radial-gradient(28% 40% at 8% 26%, #5869AB, transparent 70%), radial-gradient(60% 30% at 62% 90%, #B7BDDD, #8586C1 40%, transparent 75%), #101424 }
.gcard.gc-res { background: radial-gradient(70% 70% at 90% 0%, #E8EDB0, #DCE487 25%, transparent 62%), radial-gradient(60% 70% at 0% 100%, #BECFE3, #657DB5 45%, transparent 80%), #3E5488 }
.apicode { display: flex; flex-direction: column; gap: 10px }
.apicode .term { background: #0F1526; color: #D7DEEE; border-radius: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.6; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .7) }
.apicode .term .bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #182039; font-size: 10.5px; color: #8E99B6 } .apicode .term .bar i { width: 8px; height: 8px; border-radius: 50%; background: #2B3556 }
.apicode pre { margin: 0; padding: 10px 12px; white-space: pre-wrap; word-break: break-all }
.apicode .k { color: #8FB3FF } .apicode .s { color: #DCE487 } .apicode .c { color: #6F7C99 }
.apicode .cur { display: inline-block; width: 7px; height: 14px; background: #DCE487; vertical-align: -2px; animation: blink 1.1s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .apicode .cur { animation: none } }
.wgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
@container (max-width: 560px) { .wgrid { grid-template-columns: minmax(0, 1fr) } }
.wc { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: 0 16px 30px -22px rgba(5, 12, 30, .7) }
.wc .wn { font-weight: 700; letter-spacing: -.02em; font-size: 14.5px; color: var(--ink) } .wc .wk { font-size: 11.5px; color: var(--muted) }
.wc .wm { font-family: var(--mono); font-size: 22px; font-weight: 500; letter-spacing: -.04em; color: var(--accent); line-height: 1.15 } .wc p { font-size: 13px; color: var(--ink); line-height: 1.45 }
.wc .wl { margin-top: auto; font-size: 12.5px; font-weight: 600; text-decoration: none }
.wnote { font-size: 12.5px; color: var(--muted) }

/* trims: nothing runs off its card. The scan's lead card is taller than the narrow browser, so the stage makes room;
   the read card's rig stays inside its card while the camera settles */
@container (max-width: 760px) and (min-width: 471px) { .scan { min-height: 356px } }
@container (max-width: 470px) { .r3d .rig { transform: rotateX(3deg) rotateZ(calc(-.6deg + var(--cr))) scale(calc(var(--cs) * .92)) } }

/* pain -> fix, the differentiator profile, the smaller read row, and the Meta ad-library page */
.gcard.gc-pain { background: radial-gradient(50% 55% at 50% 52%, transparent 30%, #82A8BA88 48%, transparent 70%), radial-gradient(70% 70% at 50% 50%, #244455, transparent 85%), #101E29 }
.gcard.gc-why { background: radial-gradient(70% 70% at 90% 0%, #E8EDB0, #DCE487 25%, transparent 62%), radial-gradient(60% 70% at 0% 100%, #BECFE3, #657DB5 45%, transparent 80%), #3E5488 }
.pfx { display: flex; flex-direction: column; gap: 8px }
.pf { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px; align-items: stretch }
.pf .them, .pf .us { border-radius: 12px; padding: 10px 12px; min-width: 0 }
.pf .them { display: flex; gap: 9px; align-items: flex-start; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #C9D2E6 }
.pf .them b { display: block; font-size: 13px; color: #fff; text-decoration: line-through; text-decoration-color: rgba(240, 138, 128, .8) } .pf .them small { display: block; font-size: 11.5px; line-height: 1.35; color: #AEB8CF }
.pf .them .x { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; background: rgba(240, 138, 128, .18); color: #F08A80 } .pf .them .x .ico { width: 12px; height: 12px }
.pf .us { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; box-shadow: 0 14px 28px -20px rgba(0, 0, 0, .7) }
.pf .us .sd { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent) }
.pf .us .cnt { font-family: var(--mono); font-size: 10.5px; color: var(--muted) }
.pf .pr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; min-width: 0; color: var(--ink); background: transparent }
.pf .pr .tile { width: 26px; height: 26px; border-radius: 7px } .pf .pr .tile img { width: 18px; height: 18px } .pf .pr b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .pf .pr small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted) }
.pf .pr .pill .ico { width: 12px; height: 12px }
.pcap { font-size: 11px; color: rgba(243, 245, 250, .7); margin-top: 2px }
@container (max-width: 470px) { .pf { grid-template-columns: minmax(0, 1fr) } }
.whyc { display: flex; flex-direction: column; gap: 10px }
.whyp { background: var(--card); color: var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .7) }
.whyp .d-cover { display: flex; gap: 12px; align-items: center; padding: 14px 16px } .whyp .d-cover .tile { width: 40px; height: 40px; border-radius: 11px; background: #fff; border: 0 } .whyp .d-cover .tile img { width: 28px; height: 28px } .whyp .d-cover h3 { font-size: 18px; margin: 0 } .whyp .d-cover p { font-size: 12px }
.whyp .d-sec { padding: 8px 16px 10px } .whyp .person { padding: 4px 0; border-bottom: 0 } .whyp .timeline div { font-size: 12.5px }
.whyp .d-sec h4 { font-size: 11px }
.wcnt { background: rgba(14, 20, 36, .55); border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; padding: 10px 12px; color: #F3F5FA }
.wcnt small { display: block; font-family: var(--mono); font-size: 10.5px; color: rgba(243, 245, 250, .7); margin-bottom: 6px }
.wcnt div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px } .wcnt span { display: flex; flex-direction: column; font-size: 10.5px; color: rgba(243, 245, 250, .75) } .wcnt b { font-family: var(--mono); font-size: 15px; font-weight: 500; color: #fff }
@container (max-width: 470px) { .wcnt div { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.zz.sm { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); padding-block: clamp(40px, 5vw, 64px) } .zz.sm h2 { font-size: clamp(22px, 2.3vw, 30px) }
@media (max-width: 900px) { .zz.sm { grid-template-columns: minmax(0, 1fr) } }
.adl { background: #F0F2F5 }
.adl .top { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 30px; background: #fff; border-bottom: 1px solid #DADDE1 } .adl .top .mm { width: 26px; height: 26px; border-radius: 6px } .adl .top b { font-size: 17px; color: #1C2B33 }
.adl .top .q { display: flex; align-items: center; gap: 8px; width: 260px; height: 34px; padding: 0 12px; border-radius: 999px; background: #F0F2F5; font-size: 13px; color: #65676B } .adl .top .q .ic { width: 15px; height: 15px } .adl .top .src { font-size: 11.5px; color: #65676B }
.adl .bd { display: grid; grid-template-columns: 230px 1fr; gap: 18px; padding: 16px 30px }
.adl .side { display: flex; flex-direction: column; gap: 12px } .adl .adv { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 12px } .adl .adv b { display: block; font-size: 14px } .adl .adv small { font-size: 12px; color: #65676B }
.adl .flt { display: flex; flex-wrap: wrap; gap: 6px } .adl .flt span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid #DADDE1 } .adl .flt .on { background: #E7F3FF; border-color: #1877F2; color: #1877F2; font-weight: 600 }
.adl .ads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start }
.adl .ad { background: #fff; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; border: 1px solid #DADDE1 } .adl .ad.dim { opacity: .75 }
.adl .ah { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid #EEF0F2 } .adl .ah .st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1C2B33 } .adl .ah .st i { width: 8px; height: 8px; border-radius: 50%; background: #31A24C } .adl .ah small { font-size: 11.5px; color: #65676B }
.adl .ap { display: flex; gap: 8px; align-items: center } .adl .ap b { display: block; font-size: 13px } .adl .ap small { font-size: 11px; color: #65676B }
.adl .copy { font-size: 13px; line-height: 1.45; color: #1C2B33 } .adl .key { display: block; padding: 2px 0 }
.adl .cr { height: 150px; border-radius: 6px; background: #EFE7DA center / cover }
.adl .cta { display: flex; align-items: center; gap: 10px; background: #F0F2F5; border-radius: 6px; padding: 8px 10px } .adl .cta div { flex: 1; min-width: 0 } .adl .cta small { display: block; font-size: 10.5px; color: #65676B } .adl .cta b { font-size: 13px } .adl .cta span { font-size: 12.5px; font-weight: 600; background: #E4E6EB; border-radius: 6px; padding: 6px 10px }

/* how it compares: a table card with cited cells, and our measured accuracy beside it */
.gcard.gc-cmp { background: radial-gradient(55% 60% at 90% 10%, #8EA3D6, transparent 70%), radial-gradient(60% 70% at 0% 100%, #DCE487, #7A9064 40%, transparent 75%), #1D2A3E }
.cmpw { background: var(--panel); border-radius: 14px; padding: 10px; box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .7) }
.cmpt { overflow-x: auto }
.cmpt table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 11.5px }
.cmpt th, .cmpt td { padding: 6px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.3 }
.cmpt thead th { font-size: 11px; font-weight: 700; color: var(--ink); white-space: nowrap } .cmpt thead th.us { color: var(--accent) } .cmpt sup { font-size: 8.5px; color: var(--muted); margin-left: 1px }
.cmpt tbody th { font-weight: 600; color: var(--ink); width: 22% } .cmpt td { color: var(--muted) } .cmpt td.na { color: var(--off) }
.cmpt td.us { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--accent-soft) 60%, transparent) } .cmpt td.y::before { content: "✓ "; color: var(--good) }
.cmpt tr:last-child th, .cmpt tr:last-child td { border-bottom: 0 }
.cmpsrc { margin: 8px 0 0; padding-left: 16px; font-size: 10px; color: var(--muted); line-height: 1.4 } .cmpsrc li { margin-top: 2px }
.acc { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); max-width: 460px }
.acc small { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-bottom: 6px } .acc div { display: flex; flex-direction: column; gap: 4px; font-size: 13px } .acc b { font-family: var(--mono); font-weight: 500; color: var(--accent); margin-right: 4px }
/* the prospect list: the app's People view with example people */
.gcard.gc-ppl { background: radial-gradient(30% 45% at 82% 12%, #DEC1A1, #B78675 40%, transparent 75%), radial-gradient(40% 50% at 30% 80%, #452C35, transparent 80%), #21171A }
.plist .pw { background: var(--card); color: var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .7) }
.plist .ph { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px 8px } .plist .ph h3 { font-size: 16px; margin: 0 } .plist .ph .sub { font-size: 12px; color: var(--muted) } .plist .ph .example { margin-left: auto }
.plist .tablebox { border: 0; border-top: 1px solid var(--line); border-radius: 0; overflow-x: auto }
.plist table { min-width: 520px; font-size: 12px } .plist th { padding: 7px 10px } .plist td { padding: 7px 10px }
.plist .pp { display: flex; align-items: center; gap: 9px; min-width: 0 } .plist .fa { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft) } .plist .pp b { display: block; font-size: 12.5px } .plist .pp small { display: block; font-size: 11px; color: var(--muted) }
.plist .store { min-width: 0 } .plist .store .tile { width: 26px; height: 26px; font-size: 9px; border-radius: 7px; background: #fff; border-color: transparent; overflow: hidden }   /* white, so dark logos read on the dark card */ .plist .store b { font-size: 12px }
.plist .contact { font-family: var(--mono); font-size: 11px } .plist .pill .ico { width: 12px; height: 12px } .plist .sl { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px }
.zz.flip.sm { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr) }
@media (max-width: 900px) { .zz.flip.sm { grid-template-columns: minmax(0, 1fr) } }
/* example faces in the source pages */
.tabx .li .pc img.av { object-fit: cover; padding: 0; background: #E6E2DA }
.rvs img.ra { width: 30px; height: 30px; border-radius: 50%; object-fit: cover }
.pf .pr .av { width: 26px; height: 26px; font-size: 10px; flex: none }
@container (max-width: 470px) { .plist table { min-width: 0 } .plist th:nth-child(2), .plist td:nth-child(2), .plist .contact { display: none } .plist .fa { width: 32px; height: 32px } .plist th, .plist td { padding: 6px 8px } }
@container (max-width: 470px) { .plist .pill { white-space: normal } .plist td:nth-child(4) { min-width: 0 } .plist .pp b { word-break: break-word } }

/* the signals window's plain source pages: one real fact per page, no look-alikes of other companies' sites */
.tabx .gen { background: #F6F7F9; padding: 0 0 20px }
.tabx .gen .gh { display: flex; align-items: center; gap: 12px; height: 70px; padding: 0 36px; background: #fff; border-bottom: 1px solid #E6E8EE }
.tabx .gen .gh b { display: block; font-size: 17px; letter-spacing: -.02em } .tabx .gen .gh small { display: block; font-family: var(--mono); font-size: 11.5px; color: #6B7286 }
.tabx .gen .gsrc { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #3E5488; background: #E8ECF6; border-radius: 999px; padding: 3px 10px }
.tabx .jf.lg2 { background: #fff; box-shadow: 0 0 0 1px #E6E8EE; overflow: hidden } .tabx .jf.lg2 img { width: 72%; height: 72%; object-fit: contain }
.tabx .gnote { margin: 14px 36px 0; font-size: 13px; color: #4A5164 }
.tabx .pgrid2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px 36px 0 }
.tabx .pc2 { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #E6E8EE; border-radius: 12px; padding: 10px; font-size: 12.5px }
.tabx .pc2 .im { height: 160px; border-radius: 8px; background: #F2F3F6 center / contain no-repeat } .tabx .pc2 b { font-size: 13px; line-height: 1.3 } .tabx .pc2 small { color: #6B7286 }
.tabx .key.pc2 .sw { inset: -6px }
.tabx .wh2 { display: flex; align-items: center; gap: 14px; margin: 26px 36px 0 } .tabx .wh2 b { display: block; font-size: 22px; letter-spacing: -.02em } .tabx .wh2 small { font-size: 13.5px; color: #4A5164 }
.tabx .av2 { width: 72px; height: 72px; border-radius: 50%; background: #E8ECF6; color: #3E5488; display: grid; place-items: center; font-size: 24px; font-weight: 650 }
.tabx .exp2 { margin: 22px 36px 0; background: #fff; border: 1px solid #E6E8EE; border-radius: 12px; padding: 16px 18px } .tabx .exp2 h6 { font-size: 15px; margin: 0 0 8px }
.tabx .it2 { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0 } .tabx .it2 b { display: block; font-size: 14px } .tabx .it2 span { display: block; font-size: 13px; color: #4A5164 } .tabx .it2 .dt { color: #6B7286; font-size: 12.5px }
.tabx .new2 { margin-left: auto; font-size: 11px !important; font-weight: 650; color: #1F8A4C !important; background: #E3F3E8; border-radius: 999px; padding: 2px 9px }
.tabx .bars { display: flex; flex-direction: column; gap: 12px; margin: 26px 36px 0; background: #fff; border: 1px solid #E6E8EE; border-radius: 12px; padding: 18px 20px }
.tabx .br { display: grid; grid-template-columns: 180px 1fr 46px; gap: 12px; align-items: center; font-size: 14px } .tabx .br i { display: block; height: 12px; border-radius: 6px; background: #ECEEF3; overflow: hidden } .tabx .br i b { display: block; height: 100%; background: #657DB5 } .tabx .br em { font-style: normal; font-family: var(--mono); text-align: right }
.tabx .key.sc2 { display: inline-flex; margin: 30px 36px 0; padding: 4px 8px }
.tabx .scl { display: flex; flex-direction: column; gap: 4px; margin: 30px 36px 0; background: #fff; border: 1px solid #E6E8EE; border-radius: 12px; padding: 16px 22px }
.tabx .srow { display: grid; grid-template-columns: 44px 1fr auto 180px; gap: 16px; align-items: center; font-size: 19px; padding: 12px 4px }
.tabx .srow img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid #ECEEF3 }
.tabx .srow .fb { display: flex; gap: 6px } .tabx .srow .fb em { font-style: normal; font-size: 13px; font-weight: 600; color: #3E5488; background: #E8ECF6; border-radius: 999px; padding: 3px 11px }
.tabx .srow small { font-family: var(--mono); font-size: 14px; color: #6B7286; text-align: right }
.tabx .score { display: flex; align-items: center; gap: 16px } .tabx .score .big { font-size: 64px; font-weight: 650; letter-spacing: -.05em; line-height: 1 } .tabx .score .ct { font-size: 15px; color: #4A5164 }
.tabx .score .tbx { display: inline-flex; gap: 4px } .tabx .score .tbx i { width: 30px; height: 30px; border-radius: 5px; background: linear-gradient(90deg, #E0633A var(--f), #DCDCE6 var(--f)) }
.tabx .kv2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 26px 36px 0 } .tabx .kvi { background: #fff; border: 1px solid #E6E8EE; border-radius: 12px; padding: 14px 16px } .tabx .kvi small { display: block; font-size: 11.5px; color: #6B7286 } .tabx .kvi b { font-size: 17px }
.tabx .key.kvi { display: block }
.tabx .key.adc { display: block; margin: 26px 36px 0; background: #fff; border-radius: 12px; padding: 14px 16px } .tabx .adc .copy { font-size: 15px }
.plist .pnote { font-size: 11px; color: var(--muted); padding: 8px 14px 12px; margin: 0 }

/* ---------- hero: where the numbers come from */
.asof { margin: -4px 0 0; font-size: 12px; color: rgba(243, 245, 250, .62) }
/* ---------- email-ready card: brand-colored header (brandheader.js), variables, context block */
.gc-ctx { display: flex; align-items: center; justify-content: center }
.ctxw { width: 100%; max-width: 460px }
.ctxp { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(14, 21, 39, .55); color: var(--ink) }
.ctxh { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: #F3F5FA; background: linear-gradient(135deg, #222F4D, #0E1527) }
.ctxh.bh-brand { --bh-1: var(--bh-l1); --bh-2: var(--bh-l2); --bh-t: var(--bh-lt); background: linear-gradient(135deg, var(--bh-1), var(--bh-2)); color: var(--bh-t) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ctxh.bh-brand { --bh-1: var(--bh-d1); --bh-2: var(--bh-d2); --bh-t: var(--bh-dt) } }
:root[data-theme="dark"] .ctxh.bh-brand { --bh-1: var(--bh-d1); --bh-2: var(--bh-d2); --bh-t: var(--bh-dt) }
.ctxp .ctxh .tile { width: 40px; height: 40px; padding: 4px; border-radius: 10px; background: #fff; border: 1px solid rgba(27, 36, 64, .12); display: grid; place-items: center; flex: none; color: #1B2440; font-weight: 600 }
.ctxp .ctxh .tile img { width: 100%; height: 100%; object-fit: contain }
.ctxh b { display: block; font-size: 16px; font-weight: 600 } .ctxh small { display: block; font-size: 12.5px; opacity: 1 }
.ctxb { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 2px }
.cvh { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 8px 0 4px }
.cv { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px }
.cv > div { flex: 1; min-width: 0 } .cv small { display: block; font-size: 11.5px; color: var(--muted) } .cv b { font-weight: 500 }
.cv code { font-family: var(--mono); font-size: 12.5px; color: var(--accent, #3E5488) }
.cpy { font-size: 11.5px; font-weight: 600; border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; color: var(--ink); background: var(--panel); text-transform: none; letter-spacing: 0; flex: none }
.cpy.dark { background: var(--ink); color: var(--panel); border-color: var(--ink) }
.ctxl { display: flex; flex-direction: column; gap: 5px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12px }
.ctxl span { display: flex; align-items: center; gap: 6px; white-space: nowrap } .ctxl b { font-weight: 600 }
.ctxl i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 28%, transparent); flex: 1; max-width: 220px }
.ctxl span:nth-child(3n+2) i { max-width: 150px } .ctxl span:nth-child(3n) i { max-width: 190px }
.cnote { margin: 8px 0 0; font-size: 12px; color: var(--muted) }
.gcard.gc-ctx { background: radial-gradient(90% 40% at 50% 100%, #DCE487, #ADB976 30%, #7A9064 55%, transparent 80%), radial-gradient(60% 60% at 50% 30%, #323F2B, transparent 80%), #1D251E }

/* ---------- comparison graphic: marks grid, muted wordmarks (real logos via LOGOS in home.js), dated sources */
.cmpt table.marks { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px }
.marks thead th { padding: 10px 8px 12px; vertical-align: bottom; text-align: center; font-weight: 600 }
.marks thead th:first-child { width: 30% }
.cwm { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); filter: grayscale(1); white-space: nowrap }
.cwm.us { color: var(--ink); font-size: 13px }
.clogo { height: 18px; width: auto; max-width: 92px; object-fit: contain; filter: grayscale(1) opacity(.7) }
.marks tbody th { text-align: left; font-weight: 500; padding: 9px 8px; border-top: 1px solid var(--line); font-size: 13px }
.marks td.mk { text-align: center; padding: 8px 6px; border-top: 1px solid var(--line); line-height: 1.15; position: relative }
.marks td.mk .g { display: block; font-size: 16px; font-weight: 700 }
.marks td.mk small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px }
.marks td.mk sup { position: absolute; top: 6px; right: 6px; font-size: 9px; color: var(--muted) }
.marks td.mk.y .g { color: #1F8A4C } .marks td.mk.n .g { color: #B4322B } .marks td.mk.p .g { color: #A86F00 } .marks td.mk.u .g { color: var(--muted); font-weight: 400 }
.marks .us { background: color-mix(in srgb, var(--accent-soft, #E8ECF6) 55%, transparent) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marks td.mk.y .g { color: #5CC98A } :root:not([data-theme="light"]) .marks td.mk.n .g { color: #F08A80 } :root:not([data-theme="light"]) .marks td.mk.p .g { color: #E5B24A } }
.cmpkey { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--muted); margin: 8px 0 0 } .cmpkey b { color: var(--ink) }
/* ---------- how much of a store index is actually stores */
.gcard.gc-idx { background: radial-gradient(50% 55% at 50% 52%, transparent 30%, #82A8BA88 48%, transparent 70%), radial-gradient(70% 70% at 50% 50%, #244455, transparent 85%), #101E29 }
.idxw { width: 100%; max-width: 480px; margin: 0 auto }
.idxp { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 60px -36px rgba(14, 21, 39, .55) }
.idxh b { display: block; font-size: 15px } .idxh small { display: block; font-size: 12px; color: var(--muted) }
.idxr { display: flex; flex-direction: column; gap: 4px } .idxr > small { font-size: 11.5px; color: var(--muted) }
.idxl { display: flex; justify-content: space-between; gap: 10px; font-size: 13px } .idxl b { font-variant-numeric: tabular-nums }
.idxbar { height: 10px; border-radius: 5px; background: var(--soft); border: 1px solid var(--line); overflow: hidden }
.idxbar i { display: block; height: 100%; border-radius: 0 5px 5px 0; background: #3E5488 }
.idxr.measuring b { color: var(--muted); font-weight: 500 }
.idxr.measuring .idxbar { background: repeating-linear-gradient(135deg, var(--soft) 0 6px, color-mix(in srgb, var(--muted) 14%, var(--soft)) 6px 12px) }
.idxr.measuring .idxbar i { display: none }
.idxn { margin: 0; font-size: 12px; color: var(--muted) }
/* ---------- read your site: a much shorter section, the same demo at a smaller scale (the demo's code is the analyze agent's) */
#read.zz.sm { padding-block: clamp(28px, 3.5vw, 44px); align-items: center }
#read .gcard { padding: clamp(10px, 1.4vw, 16px) }
#read .gcard .r3d { zoom: .66 }
@media (max-width: 900px) { #read .gcard .r3d { zoom: .6 } }


/* The shared app demo, enlarged to the edge of the hero. APPUI keeps the original camera and cursor motion. */
.hero-demo { width: 1080px; min-width: 0; align-self: center }
.hero-demo .gc-hero { padding:20px; border-radius:22px; overflow:visible }
.app-tour { position:relative }
.tour-narration { position:absolute; z-index:6; pointer-events:none; color:var(--ink); text-shadow:0 1px 12px var(--panel),0 0 18px var(--panel); padding:12px 0; isolation:isolate }
.tour-narration::before { content:""; position:absolute; inset:-8px -14px; z-index:-1; background:var(--panel); filter:blur(14px); opacity:.96 }
.tour-narration b { display:block; font-size:17px; letter-spacing:-.025em; line-height:1.2 }
.tour-narration p { font-size:12px; line-height:1.5; margin-top:6px; max-width:32ch }
.tour-leader { position:absolute; inset:0; width:100%; height:100%; z-index:5; pointer-events:none; overflow:visible; color:var(--iris) }
.tour-leader path { fill:none; stroke:currentColor; stroke-width:1.5 }
.tour-leader circle { fill:var(--panel); stroke:currentColor; stroke-width:2 }
.tour-play { position:absolute; top:10px; left:12px; z-index:7; border:1px solid var(--line); border-radius:6px; padding:7px 10px; background:var(--panel); color:var(--ink); font-size:11px; cursor:pointer }
.tour-play:focus-visible { outline:2px solid var(--iris); outline-offset:3px }
.tour-tech-item { display:flex; flex-direction:column; gap:4px; margin-bottom:12px }
.tour-tech-item small { color:var(--muted); font-size:11px }
.hero-demo .demo-focus { outline: 2px solid var(--iris); outline-offset: -3px; border-radius: 10px }
.hero-demo .app-guided-compact .appui .drawer { width: 350px }
.hero-demo .appui .drawer .d-cover { padding-block: 18px }
.hero-demo .appui .drawer .d-body { padding: 16px 20px }
.hero-demo .appui .drawer .person { flex-wrap: wrap }
.hero-demo .appui .drawer .person { grid-template-columns: 32px minmax(0,1fr) }
.hero-demo .appui .drawer .person > div { min-width: 0; max-width: 100% }
.hero-demo .appui .drawer .person .acts { grid-column: 2; width: 100%; margin: 8px 0 0; flex-direction: row; justify-content: flex-start }
.hero-demo .appwin { background: var(--panel) }
.zz { max-width: 1360px; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr) }
.zz.flip { grid-template-columns: minmax(0,1.28fr) minmax(0,.72fr) }
@media (max-width:1200px) and (min-width:1061px) { .hero-demo { width: 940px } .hero2 { gap: 36px } }
@media (max-width:1060px) { .hero-demo { width: 100% } .hero-copy h1, .hero-copy .sub { max-width: 740px } .hero2 h1 { max-width: 700px } .hero-demo .gc-hero { padding: 14px } }
@media (max-width:900px) { .zz, .zz.flip { grid-template-columns: minmax(0,1fr) } }
@media (max-width:560px) { .hero2 h1 { font-size:43px } .hero-copy .sub { font-size:16px } .tour-narration b { font-size:15px } .tour-play { min-height:36px } }

/* DealerData focus walk over real public record fields, and its once-on-entry bar reveal. */
.stitch-demo{padding:18px 16px}.stitch-row{padding:18px 12px;min-width:0;border-bottom:1px solid var(--line);border-radius:8px}.stitch-row>small{display:block;font:10px var(--mono);letter-spacing:.08em;color:var(--muted);margin-bottom:10px}.stitch-row>b{display:block;font-size:16px}.stitch-row>span{display:block;font-size:12px;color:var(--muted);margin-top:5px}.stitch-row .store>div>span{display:block;font-size:11px;color:var(--muted);margin-top:4px}.stitch-row .store b{font-size:16px}.stitch-row .tile{width:38px;height:38px}.stitch-demo>p{font-size:12px;color:var(--muted);margin:18px 12px 0}.comparison-details{padding:0 16px 14px;font-size:12px}.comparison-details>summary{cursor:pointer;color:var(--muted);padding:10px 0}.comparison-details .cmpt{margin-top:10px}.idxbar i{transform:scaleX(0);transform-origin:left;transition:transform 1100ms cubic-bezier(.2,.7,.2,1)}.shown .idxbar i{transform:scaleX(1)}.idxr:nth-child(3) .idxbar i{transition-delay:70ms}.idxr:nth-child(4) .idxbar i{transition-delay:140ms}@media(prefers-reduced-motion:reduce){.idxbar i{transform:none;transition:none}}

.zz[id],#srcstage{scroll-margin-top:90px}
/* Keep collected evidence visible even when the source browser is scaled down. */
#srcstage .sdr .d-cover{display:grid;grid-template-columns:36px 1fr;gap:1px 10px;align-items:center;padding:12px 14px}
#srcstage .sdr .d-cover .tile{grid-row:1/3}
#srcstage .sdr .d-cover h3{margin:0;font-size:17px}
#srcstage .sdr .d-cover p{margin:0;font-size:11px}
#srcstage .sdr .d-body{overflow:hidden}
#srcstage .sdr .d-sec{flex:1;min-height:0}
@container(max-width:1050px){#srcstage .sdr .d-stats{display:none}}
/* The original Claude / dale-motion look: quiet plate, thick surfaces, one focus and a settling camera. */
@font-face{font-family:'Store Inter';src:url('/fonts/Inter-Page-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'Store DM Sans';src:url('/fonts/DMSans-Page-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
/* Arial stretched to each font's measured width, so text keeps its line breaks when the web font arrives */
@font-face{font-family:'Store Inter Fallback';src:local('Arial'),local('Helvetica');size-adjust:95.9%;ascent-override:101%;descent-override:25.2%;line-gap-override:0%}
@font-face{font-family:'Store DM Sans Fallback';src:local('Arial'),local('Helvetica');size-adjust:104.4%;ascent-override:95%;descent-override:29.7%;line-gap-override:0%}
body{--sans:'Store DM Sans','Store DM Sans Fallback',sans-serif;--display:'Store Inter','Store Inter Fallback',sans-serif}
.hero2 h1{font-weight:620;letter-spacing:-.058em}.zt h2,.section-head h2{font-family:var(--display);font-weight:590;letter-spacing:-.05em}.zt .intro{font-size:16px;line-height:1.65}.hero-demo .app-tour{perspective:1500px;isolation:isolate}.hero-demo .tour-app{transform-origin:52% 40%;transform-style:preserve-3d;will-change:transform}.hero-demo .appwin{box-shadow:0 7px 0 color-mix(in srgb,var(--panel) 75%,var(--ink)),0 13px 0 color-mix(in srgb,var(--panel) 90%,var(--ink)),0 35px 60px -20px #0009;border-radius:14px}.tour-word{display:inline-block;transform-origin:center}.tour-narration{max-width:238px;padding:10px 0}.tour-narration b{font-family:var(--display);font-weight:650;font-size:19px;letter-spacing:-.04em}.tour-narration p{font-size:12px;line-height:1.55;margin-top:8px}.tour-narration::before{inset:-5px -10px;filter:blur(11px)}.tour-leader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7;overflow:visible}.tour-leader path{stroke:var(--citron);stroke-width:1.8;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 3px #0c1724)}.tour-leader circle{fill:var(--citron);stroke:#243147;stroke-width:2}.hero-demo .demo-focus{outline:2px solid #c4d67e;outline-offset:5px;box-shadow:0 0 0 7px #c4d67e20,0 0 25px #c4d67e40!important;border-radius:8px}.hero-demo .side .f.demo-focus{margin:4px}.hero-demo .ds-email .vars{display:flex;flex-direction:column;gap:18px}.hero-demo .ds-email .var{padding:17px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft);align-items:flex-start;gap:16px}.hero-demo .ds-email .var-v{min-width:0;display:flex;flex-direction:column;gap:13px}.hero-demo .ds-email .var-v small{display:flex;flex-direction:column;gap:8px;line-height:1.5}.hero-demo .ds-email .var-v small code{display:block;margin:0}.hero-demo .ds-email .var-v b{font-size:14px;line-height:1.65;font-weight:500}.hero-demo .ds-email>h4{margin-bottom:13px}.hero-demo .ds-email>p{line-height:1.75;margin-top:15px}.stitch-caption{font:600 22px/1.15 var(--display);letter-spacing:-.04em;color:var(--ink);max-width:280px;margin:12px 22px 10px}.stitch-caption .iw{display:inline-block}.stitch-world{perspective:1050px;padding:20px 30px 36px}.stitch-demo{padding:4px 12px;transform-style:preserve-3d;transform-origin:50% 45%;will-change:transform}.stitch-row{position:relative;padding:0!important;border:0!important;background:transparent;transform-style:preserve-3d;margin:0 0 19px}.stitch-face{position:relative;z-index:2;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 18px;box-shadow:0 1px 0 #ffffff22 inset,0 15px 25px -15px #0008;transform:translateZ(8px)}.stitch-edge{position:absolute;inset:0;border-radius:12px;background:color-mix(in srgb,var(--iris) 22%,var(--panel));transform:translate3d(0,7px,0)}.stitch-row.lit .stitch-face{border-color:#b6c879;box-shadow:0 0 0 2px #c3d78260,0 0 25px #c3d78220,0 15px 25px -15px #0008}.stitch-face>small{display:block;font:9px var(--mono);letter-spacing:.08em;color:var(--muted);margin-bottom:12px}.stitch-face>b{display:block;font-size:16px;line-height:1.35;font-weight:550}.stitch-face>span{display:block;color:var(--muted);font-size:11px;margin-top:7px}.stitch-face .store{gap:12px}.stitch-face .store b{font-size:16px}.stitch-face .store>div>span{font-size:10px;color:var(--muted);display:block;margin-top:5px}.stitch-demo>p{font-size:11px;margin-left:12px;transform:translateZ(40px)}.idx-world{perspective:1000px;padding:22px 22px 34px}.idx-world .idxp{transform-style:preserve-3d;transform-origin:50% 45%;box-shadow:0 7px 0 color-mix(in srgb,var(--iris) 20%,var(--panel)),0 13px 0 color-mix(in srgb,var(--iris) 10%,var(--panel)),0 30px 50px -20px #0008}.idxr{position:relative;border-radius:10px;padding:12px 9px;transition:background 180ms,box-shadow 180ms;transform:translateZ(15px)}.idxr.idx-focus{background:color-mix(in srgb,var(--citron) 12%,var(--panel));box-shadow:0 0 0 1px #c4d67e90}.idxr .idxbar{box-shadow:0 3px 0 #7a836f38;overflow:visible}.idxr .idxbar i{border-radius:inherit;box-shadow:0 3px 0 #58634c55}.idxp .idxh{transform:translateZ(20px)}
@media(max-width:600px){.stitch-world{padding:12px 18px 23px}.stitch-face{padding:17px 13px}.stitch-caption{font-size:20px}.idx-world{padding:13px 10px 23px}.tour-narration b{font-size:17px}}
@media(prefers-reduced-motion:reduce){.tour-app,.stitch-demo,.stitch-row,.idxp{transform:none!important;will-change:auto}.tour-word,.stitch-caption .iw{filter:none!important;transform:none!important;opacity:1!important}.stitch-face{filter:none!important}.tour-leader{display:none}.idxr{transition:none}}
.buyer-stage{color:var(--ink);padding:20px 14px 15px}.buyer-viewport{perspective:1200px;position:relative;overflow:hidden}.buyer-rig{position:absolute;left:0;top:0;width:760px;height:480px;transform-style:preserve-3d;transform-origin:0 0;--buyer-scale:1}.domain-slab{position:absolute;left:28px;top:110px;width:220px;padding:18px;border:1px solid var(--line);border-radius:15px;background:var(--panel);box-shadow:0 7px 0 color-mix(in srgb,var(--iris) 20%,var(--panel)),0 14px 30px -12px #0007;transform:translateZ(10px) rotateY(-7deg)}.domain-slab>small{font:9px var(--mono);color:var(--muted);letter-spacing:.07em;display:block;margin-bottom:18px}.domain-slab>div{border-top:1px solid var(--line);padding:15px 0}.domain-slab b{font-size:12px;display:block}.domain-slab span{font-size:10px;color:var(--muted);display:block;margin-top:8px}.buyer-gate{position:absolute;left:280px;top:180px;width:140px;text-align:center;transform:translateZ(30px);font-size:12px}.buyer-gate>span{display:grid;place-items:center;border-radius:50%;width:48px;height:48px;margin:0 auto 12px;background:var(--panel);border:1px solid var(--line);font-size:22px;color:var(--muted);box-shadow:0 5px 0 #5b6866}.buyer-gate.lit>span{background:#dce487;color:#293323;box-shadow:0 0 0 8px #dce48720,0 5px 0 #697d48}.buyer-gate>b,.buyer-gate>small{display:block}.buyer-gate>small{margin-top:6px;font-size:9px;color:var(--muted)}.buyer-record{position:absolute;left:447px;top:61px;width:280px;background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:0 8px 0 color-mix(in srgb,var(--iris) 25%,var(--panel)),0 16px 0 color-mix(in srgb,var(--iris) 12%,var(--panel)),0 30px 45px -16px #0009;transform:translateZ(50px) rotateY(3deg)}.buyer-record.lit{border-color:#c5d38e;box-shadow:0 0 0 2px #c5d38e50,0 8px 0 #647649,0 16px 0 #41503c,0 30px 45px -16px #0009}.buyer-record-head{display:flex;align-items:center;gap:10px;margin-bottom:24px}.buyer-record-head .tile{width:35px;height:35px}.buyer-record-head b{font-size:12px;display:block;line-height:1.4}.buyer-record-head small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.buyer-record>small{font:8px var(--mono);letter-spacing:.05em;color:var(--muted)}.buyer-record h3{font-size:20px;font-family:var(--display);line-height:1.2;letter-spacing:-.035em;margin:12px 0 23px}.buyer-email{padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.buyer-email>small{font-size:9px;color:var(--muted);display:block;margin-bottom:8px}.buyer-email>b{font:11px var(--mono);line-height:1.8}.buyer-email .verdict{display:block;width:max-content;margin-top:7px;font-size:9px}.buyer-context{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.buyer-context>span{font-size:9px;padding:5px 7px;background:var(--soft);border:1px solid var(--line);border-radius:5px}.buyer-outcome{font-size:10px;color:var(--muted);line-height:1.5;margin-top:18px}.buyer-packet{position:absolute;left:0;top:0;width:13px;height:13px;background:#e0ea9d;border-radius:50%;box-shadow:0 0 0 7px #dce48720,0 0 25px #dce48760;pointer-events:none;opacity:0}.buyer-narration{font:600 22px/1.2 var(--display);letter-spacing:-.04em;max-width:470px;margin:8px auto 14px;text-align:center}.buyer-narration .iw{display:inline-block}.buyer-snapshot{display:block;text-align:center;color:var(--muted);font-size:9px;margin-bottom:10px}@media(max-width:500px){.buyer-stage{padding:14px 7px}.buyer-narration{font-size:19px;max-width:280px}}@media(prefers-reduced-motion:reduce){.buyer-rig{transform:scale(var(--buyer-scale))!important}.buyer-record{filter:none!important;translate:none!important}}

section[id]{scroll-margin-top:90px}#why h2{font-size:clamp(29px,3vw,39px);line-height:1.12}#why h2 span{color:var(--citron)}
/* Full app overview bookends the tour; the camera follows actual filter and drawer targets. */
.hero2{max-width:1600px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:42px}.hero-demo{width:100%;min-width:0}.hero-demo .gc-hero{padding:22px;overflow:hidden}.hero-demo .app-tour{min-width:0}.hero-demo .tour-app{transform:none!important}.hero-demo .appwin{border-radius:12px}.hero-demo .appui .tablebox td .dmc b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.35}.hero-demo .appui .dmc small{font-size:10px;white-space:nowrap}.hero-demo .appui .tablebox td{padding-block:12px}.hero-demo .appui .person>div>b{white-space:normal;line-height:1.5}.hero-demo .app-guided-compact .appui .drawer{width:350px}.hero-demo .app-guided-compact .appui .d-cover h3{font-size:23px;line-height:1.15}.hero-demo .app-guided-compact .appui .drawer .d-cover{padding-block:14px}.hero-demo .appui .drawer .person{gap:12px}.hero-demo .appui .drawer .person .contact{white-space:normal;line-height:1.65}@media(max-width:1060px){.hero2{grid-template-columns:1fr}.hero-demo{width:100%}.hero-demo .gc-hero{padding:16px}}@media(max-width:600px){.hero-demo .gc-hero{padding:10px}.hero2{gap:28px}.hero-demo .appui .drawer .person>div>b{font-size:13px}}
.hero-demo .appui .tablebox .store b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.4}.hero-demo .appui .tablebox td.people-ct .dmc{align-items:flex-start}

/* the marks grid draws its own glyphs: no inherited check, centered cells, room for the source number */
.cmpt table.marks td.mk.y::before { content: none }
.cmpt table.marks td.mk { text-align: center; vertical-align: middle; padding: 8px 12px 8px 6px }
.cmpt table.marks tbody th { width: 30%; vertical-align: middle }
.cmpt table.marks td.mk.us { font-weight: 400 }
@media (max-width: 700px) { .cmpt table.marks tbody th, .cmpt table.marks thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--line) } .cmpt table.marks tbody th { width: auto; min-width: 128px } }
/* competitor logos inside the comparison only: one small height, grayscale and muted in light and dark; the wordmark
   shows only when there is no logo (or it failed to load and was removed) */
.cmpt .marks thead th .clogo { display: block; height: 20px; width: auto; max-width: 84px; margin: 0 auto; object-fit: contain; filter: grayscale(1) opacity(.62) }
.cmpt .marks thead th .clogo:not(.mark) + .cwm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
.cmpt .marks thead th .clogo.mark + .cwm { display: block; margin-top: 3px; font-size: 10.5px }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cmpt .marks thead th .clogo { filter: grayscale(1) invert(1) brightness(1.15) opacity(.66) } }
:root[data-theme="dark"] .cmpt .marks thead th .clogo { filter: grayscale(1) invert(1) brightness(1.15) opacity(.66) }

/* ---------- 3D stages: every section card in the read-your-site look (play() and cam() in home.js). The rig pitches
   6°, rolls -1.2° and leans toward the pointer; each piece sits at its own depth. Reduced motion: the held frame */
.s3d { perspective: 1400px; perspective-origin: 50% 28% }
.rig3 { --cs: 1; --cr: 0deg; --cx: 0deg; --tx: 0deg; --ty: 0deg; position: relative; transform-style: preserve-3d; transform-origin: 50% 45%;
  transform: rotateX(calc(6deg + var(--cx) + var(--tx))) rotateY(var(--ty)) rotateZ(calc(-1.2deg + var(--cr))) scale(calc(var(--cs) * .95)) }
@container (max-width: 470px) { .rig3 { transform: rotateX(calc(3deg + var(--cx))) rotateZ(calc(-.5deg + var(--cr))) scale(calc(var(--cs) * .97)) } }
.lit-foc { position: absolute; border-radius: 10px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px #DCE487, 0 0 18px rgba(220, 228, 135, .55); background: rgba(220, 228, 135, .12) }

/* why: the store drawer, an info@ chip that drops away, and the counts as a dark slab clamped on in front */
.whyc .whyp { position: relative }
.whyc .d-cover { position: relative }
.winb { margin-left: auto; align-self: center; display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 8px; background: rgba(14, 20, 36, .62); color: #F3F5FA; border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; opacity: 0 }
.whyc .d-sec { padding-bottom: 36px }
.whyc .wrows { position: relative }
.whyc .person { position: relative; z-index: 1 }
.whyc .contact > span { display: inline-block } .whyc .em { font-family: var(--mono); min-height: 1em }
.wfoc { position: absolute; left: -8px; right: -8px; top: 0; border-radius: 10px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px #DCE487, 0 0 18px rgba(220, 228, 135, .55); background: rgba(220, 228, 135, .12) }
.whyc .wcnt { position: relative; margin: -30px 12px 0 30px; transform: translateZ(46px); background: linear-gradient(160deg, #26324F, #121A2E); border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 2px 0 #0A1020, 0 4px 0 #0A1020, 0 26px 40px -22px rgba(5, 10, 25, .8) }
@container (max-width: 470px) { .winb { display: none } .whyc .wcnt { margin: -30px 6px 0 14px } }

/* compare: the marks grid on the rig, a citron slab down the ShopLeads column, a light that runs down it */
#cmp.s3d { perspective: 1600px }
.cmpp { background: var(--panel); border-radius: 14px; padding: 10px; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .75) }
.cmpt { position: relative }
.cfoc { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 10px; pointer-events: none; opacity: 0; overflow: hidden; box-shadow: 0 0 0 2px #DCE487, 0 0 22px rgba(220, 228, 135, .5); background: rgba(220, 228, 135, .1) }
.cfoc .csh { position: absolute; left: 0; right: 0; top: 0; height: 80px; opacity: 0; background: linear-gradient(180deg, transparent, rgba(220, 228, 135, .38), transparent) }
.marks td.mk .g { transform-origin: 50% 60% }

/* people: rows dealt in like cards, a focus that walks them, and a dark card in front that flips to each reason */
.plist .rig3 { padding-bottom: 64px }
.plist .tablebox { position: relative }
.plist tbody tr { transform-origin: 50% 0 }
.pfoc { position: absolute; left: 4px; right: 4px; top: 0; border-radius: 10px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px #DCE487, 0 0 18px rgba(220, 228, 135, .55); background: rgba(220, 228, 135, .1) }
.pwhy { position: absolute; right: 10px; bottom: 0; width: min(270px, 64%); transform: translateZ(60px); transform-origin: 50% 50%; opacity: 0; backface-visibility: hidden;
  background: linear-gradient(160deg, #26324F, #121A2E); color: #F3F5FA; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 2px 0 #0A1020, 0 4px 0 #0A1020, 0 26px 40px -22px rgba(5, 10, 25, .8) }
.pwhy .lbl { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: #9BA2B7 }
.pwhy .pwr { display: flex; gap: 10px; align-items: center; margin-top: 6px; min-width: 0 } .pwhy .pwr > div { min-width: 0 }
.pwhy .tile { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none } .pwhy .tile img { width: 22px; height: 22px; object-fit: contain }
.pwhy b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .pwhy small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #DCE487 } .pwhy small .ico { width: 12px; height: 12px }

/* index: extruded 3D bars (front, top and end faces), junk chips that fall off the index bar, a citron winner */
.idxw .idxp { position: relative; transform-style: preserve-3d; gap: 16px }
.ib { position: relative; display: flex; flex-direction: column; gap: 6px; transform-style: preserve-3d } .ib > small { font-size: 11.5px; color: var(--muted) }
.ib .idxl b { font-family: var(--mono); font-weight: 500 }
.b3 { position: relative; height: 16px; margin: 9px 12px 0 0; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--muted) 14%, transparent) 0 1px, transparent 1px 10px) }
.b3 > i:first-child { --f: #657DB5; --t: #8EA3D6; --s: #3E5488; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--f); border-radius: 2px 0 0 2px }
.b3 > i:first-child::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 7px; background: var(--t); transform-origin: 0 100%; transform: skewX(-45deg) }
.b3 > i:first-child::after { content: ""; position: absolute; left: 100%; top: 0; width: 7px; height: 100%; background: var(--s); transform-origin: 0 0; transform: skewY(-45deg) }
.ib.i0 .b3 > i:first-child { --f: #A3ABBE; --t: #C8CDD9; --s: #737C93 }
.ib.win .b3 > i:first-child { --f: #DCE487; --t: #EEF3B8; --s: #A9B35A }
.ib.win .idxl b { color: var(--accent) }
.rp3 { position: absolute; top: -14px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #DCE487; box-shadow: 0 0 18px rgba(220, 228, 135, .6); pointer-events: none; opacity: 0 }
.junk { position: absolute; left: 0; right: 12px; top: 22px; height: 0; pointer-events: none; transform-style: preserve-3d; z-index: 2 }
.jk { position: absolute; top: 0; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: #2A3550; color: #E3E8F3; white-space: nowrap; opacity: 0; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6) }

/* email-ready: the profile, an example email clamped on in front, tokens that fly from Copy into it, a toast */
.ctxw { max-width: 480px }
.ctxw .ctxp { position: relative } .ctxw .ctxb { padding-bottom: 52px }
.ctxw .cv, .ctxw .cpy { transform-origin: 50% 50% }
.ctxl i { transform-origin: 0 50% }
.cmail { position: relative; margin: -40px -6px 0 36px; transform: translateZ(54px); background: #fff; color: #1B2440; border-radius: 12px; padding: 10px 14px 12px; font-size: 13px; line-height: 1.55;
  box-shadow: 0 30px 50px -24px rgba(5, 10, 25, .7), 0 0 0 1px rgba(27, 36, 64, .08) }
.cmail .cmh { display: flex; justify-content: space-between; font-size: 11px; color: #6B7286; border-bottom: 1px solid #EEF0F4; padding-bottom: 6px; margin-bottom: 6px }
.cmail p { margin: 0 0 3px }
.cslot, .cfly { display: inline-block; font-family: var(--mono); font-size: 11.5px; color: #3E5488; background: #E8ECF6; border-radius: 5px; padding: 0 5px; line-height: 1.6 }
.cfly { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; box-shadow: 0 0 0 2px #DCE487, 0 10px 20px -8px rgba(5, 10, 25, .6); pointer-events: none }
.ctoast { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; pointer-events: none; background: #DCE487; color: #2D3510; font-weight: 600; font-size: 12px; padding: 4px 10px; border-radius: 8px; box-shadow: 0 12px 24px -10px rgba(5, 10, 25, .6) }
@container (max-width: 470px) { .cmail { margin: -30px 0 0 12px; font-size: 12px } }

/* API and MCP: Claude Code and Codex, dealt like two cards; the one in front runs, then they swap */
.api3 .rig3 { display: grid; padding: 52px 8% 6px }
.tw { grid-area: 1 / 1; min-width: 0; background: #0F1526; color: #D7DEEE; border-radius: 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 34px 60px -28px rgba(0, 0, 0, .85); transform-origin: 50% 50% }
.tw .bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #182039; font-size: 11px; color: #C9D2E6 } .tw .bar i { width: 8px; height: 8px; border-radius: 50%; background: #2B3556 }
.tw .bar span { font-weight: 600; margin-left: 6px; font-family: var(--sans, inherit) } .tw .bar em { margin-left: auto; font-style: normal; font-size: 10px; color: #8E99B6; border: 1px solid #2B3556; border-radius: 999px; padding: 1px 8px }
.tw pre { margin: 0; padding: 10px 12px 14px; white-space: pre-wrap; word-break: break-word; min-height: 17.5em }
.tw .l { display: block } .tw .c { color: #6F7C99 } .tw .k { color: #8FB3FF } .tw .s { color: #DCE487 } .tw .ok { color: #5CC98A } .tw .dim { color: #8E99B6 } .tw .me { color: #fff; font-weight: 600 }
.tw .ask { margin-top: 8px; color: #fff } .tw .ask .pr { color: #DCE487; font-weight: 700 } .tw .cur { display: inline-block; width: 7px; height: 13px; background: #DCE487; vertical-align: -2px; margin-left: 1px }
.tw .tool { margin-top: 6px } .tw .st { display: inline-block; width: 12px } .tw .spn { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #2B3556; border-top-color: #DCE487; vertical-align: -1px }
.tw .args { color: #8E99B6; margin-bottom: 4px }
.tw .row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.15fr) auto; gap: 10px; padding: 1px 0 1px 14px } .tw .row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.tw .note { margin-top: 6px; color: #8E99B6 }
.gcard.gc-api { overflow: hidden }
@container (max-width: 470px) { .tw { font-size: 10.5px } .tw .row { grid-template-columns: minmax(0, 1fr) auto } .tw .row span:nth-child(2) { display: none } }

/* API and MCP, as the real tools look: a macOS terminal window per tool; Claude Code (welcome panel with the mascot,
   "> " prompt, ⏺ tool calls with ⎿ results, the ✻ spinner) and Codex (">_ OpenAI Codex" header, "›" composer, "• Called"
   with └ results, "Working (… • esc to interrupt)") */
.tw { background: #1C1C1C; color: #E6E6E6; font-family: ui-monospace, SFMono-Regular, Menlo, var(--mono), monospace; font-size: 11px; line-height: 1.5; border: 1px solid rgba(255, 255, 255, .12) }
.tw .bar { position: relative; justify-content: flex-start; background: linear-gradient(#3A3A3A, #2E2E2E); border-bottom: 1px solid #111; padding: 7px 10px; color: #B9B9B9 }
.tw .bar i { width: 11px; height: 11px; background: #FF5F57 } .tw .bar i:nth-child(2) { background: #FEBC2E } .tw .bar i:nth-child(3) { background: #28C840 }
.tw .bar span { position: absolute; left: 0; right: 0; text-align: center; margin: 0; font-weight: 500; font-size: 11px; pointer-events: none }
.tw .scr { height: 300px; display: flex; flex-direction: column; padding: 8px 12px 6px; overflow: hidden }
.tw .log { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; gap: 1px }
.tw .l { white-space: pre-wrap; word-break: break-word } .tw .cw { color: #7FB3E8 } .tw .dim { color: #8A8A8A } .tw .s { color: #C5D07A } .tw .k { color: #9CC1FF } .tw .me { color: #fff; font-weight: 600 } .tw .ok { color: #5FD08A }
.tw .cur { display: inline-block; width: 7px; height: 13px; background: #E6E6E6; vertical-align: -2px; margin-left: 1px }
.tw .wt { background: linear-gradient(90deg, #8A8A8A 0 40%, #fff 50%, #8A8A8A 60% 100%) 0 0 / 200px 100%; -webkit-background-clip: text; background-clip: text; color: transparent }
/* Claude Code */
.tw.cc .ccw { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 10px; border: 1px solid #D77757; border-radius: 8px; padding: 12px 10px 8px; margin: 8px 0 6px }
.tw.cc .cct { position: absolute; top: -8px; left: 10px; background: #1C1C1C; color: #D77757; padding: 0 5px; font-size: 10.5px }
.tw.cc .ccl { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center } .tw.cc .ccl b { color: #fff; font-weight: 600 } .tw.cc .ccl small { color: #8A8A8A; font-size: 10px }
.tw.cc .clawd { margin: 4px 0; color: #D77757; font: inherit; line-height: 1.05; white-space: pre }
.tw.cc .ccr { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid #D77757; padding-left: 10px; min-width: 0 } .tw.cc .ccr b { color: #D77757; font-weight: 600 } .tw.cc .ccr small { color: #B9B9B9; font-size: 10px }
.tw.cc .ccr i { display: block; height: 1px; background: #D77757; opacity: .6; margin: 4px 0 }
.tw.cc .um { background: #373737; color: #D9D9D9; padding: 1px 4px; margin: 6px 0 2px }
.tw.cc .wk { color: #D77757 } .tw.cc .wk .sp { display: inline-block; width: 1ch }
.tw.cc .dot { color: #E6E6E6 } .tw.cc .dot.ok { color: #5FD08A } .tw.cc .dot.dim { color: #555 } .tw.cc .dot.w { color: #E6E6E6 }
.tw.cc .tl { margin-top: 4px } .tw.cc .tl, .tw.cc .an { color: #E6E6E6 } .tw.cc .an { margin-top: 6px }
.tw.cc .ccin { border-top: 1px solid #555; border-bottom: 1px solid #555; padding: 3px 2px; margin-top: 6px; min-height: 1.6em } .tw.cc .ccin .pr { color: #8A8A8A }
.tw.cc .cch { color: #6E6E6E; font-size: 10px; padding: 2px 2px 0 }
/* Codex */
.tw.cx .cxw { display: inline-flex; flex-direction: column; gap: 1px; align-self: flex-start; border: 1px solid #5A5A5A; border-radius: 6px; padding: 6px 12px; margin: 8px 0 6px }
.tw.cx .cxw b { color: #fff; font-weight: 600; margin-bottom: 6px } .tw.cx .cxw small { font-size: 11px; white-space: pre }
.tw.cx .um { color: #fff; border-left: 2px solid #5A5A5A; padding-left: 6px; margin: 6px 0 2px }
.tw.cx .wk .sp { color: #8A8A8A } .tw.cx .dot { color: #8A8A8A } .tw.cx .dot.ok { color: #5FD08A } .tw.cx .dot.w { color: #E6E6E6 }
.tw.cx .tl { margin-top: 4px; color: #E6E6E6 } .tw.cx .an { margin-top: 6px }
.tw.cx .cxin { background: #2A2A2A; border-radius: 4px; padding: 6px 8px; margin-top: 6px; min-height: 1.6em } .tw.cx .cxin .pr { color: #fff; font-weight: 700 }
.tw.cx .cxh { color: #6E6E6E; font-size: 10px; padding: 3px 2px 0; white-space: pre }
.twnote { margin: 8px 0 0; font-size: 10.5px; color: rgba(243, 245, 250, .6); text-align: center }
@container (max-width: 470px) { .tw { font-size: 9.5px } .tw .scr { height: 270px } .tw.cc .ccw { grid-template-columns: minmax(0, 1fr) } .tw.cc .ccr { display: none } }

/* Store Leads, named as the comparison: its own logo, small, wherever the page names it */
.idxh .sll, .idxl .sll { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 7px; object-fit: contain }
#index h2 .hsl { width: .9em; height: .9em; border-radius: .2em; vertical-align: -.08em; margin-right: .3em; object-fit: contain }
/* Claude Code's mascot as crisp pixels, and the ✳ it puts in the terminal title */
.tw.cc svg.clawd { display: block; width: 72px; height: auto; margin: 6px auto 4px; fill: #D77757 }
.tw .bar .tast { position: static; display: inline; margin: 0 2px 0 0; color: #D77757; font-weight: 700 }

/* signals: the camera moves the whole browser window inside this frame; the code panel and zoom label stay on top */
.tabx .cwv { position: relative; overflow: hidden; border-radius: 14px }
.tabx .cw { transform-origin: 0 0; will-change: transform, filter; backface-visibility: hidden }
.tabx .hud { z-index: 6 }

/* comparison on phones: flat (no tilt), and the whole grid fits the screen; the notes and source numbers are in the
   numbered list below it */
@container (max-width: 470px) {
  #cmp .rig3 { transform: none }
  .cmpt { overflow-x: visible }
  .cmpt table.marks { min-width: 0; table-layout: fixed; font-size: 11.5px }
  .cmpt table.marks thead th:first-child, .cmpt table.marks tbody th { width: 36%; position: static; box-shadow: none }
  .cmpt table.marks tbody th { min-width: 0; padding: 8px 6px; font-size: 11.5px; line-height: 1.25 }
  .cmpt table.marks td.mk { padding: 7px 2px }
  .cmpt table.marks td.mk small, .cmpt table.marks td.mk sup { display: none }
  .cmpt .marks thead th { padding: 6px 2px 8px }
  .cmpt .marks thead th .clogo { height: 16px; max-width: 100% }
  .cmpt table.marks thead th.us { width: 17% }
  .cmpt .marks thead th .cwm.us { font-size: 9.5px; letter-spacing: -.02em }
  .cmpt .marks thead th .clogo.mark + .cwm { font-size: 9px; white-space: normal; line-height: 1.1 }
}
.tabx .mbdefs { position: absolute; width: 0; height: 0; overflow: hidden }
/* API section: the free-search line */
.zz .apifree { margin: 2px 0 14px; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--citron) 45%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--citron) 9%, transparent); font-size: 14px; line-height: 1.55 }
.zz .apifree b { color: var(--ink); font-weight: 650 } .zz .apifree code { font-family: var(--mono); font-size: 12.5px }

/* the signals cursor's motion trail (home.js): softened copies a few frames behind */
.cpage .cur.ghost { filter: blur(1.4px); z-index: 8 }
@media (prefers-reduced-motion: reduce) { .cpage .cur.ghost { display: none } }

/* the signal card that lifts off the page: label, company and date, and what to sell */
.chip2 { padding: 8px 14px 8px 8px; border-radius: 14px; box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .35) inset }
.chip2 .lo { width: 30px; height: 30px; border-radius: 9px }
.chip2 small.co { font-weight: 500; color: #4B5520 }
.tabx .hud { will-change: transform }

/* Results section: one reported outcome, with its limits stated in the card. The glow uses the company's own logo colors. */
.gcard.gc-case { color: #fff; padding: clamp(24px, 3.4vw, 40px); background: radial-gradient(80% 90% at 100% 0%, #F77DBC 0%, rgba(247, 125, 188, .5) 24%, rgba(247, 125, 188, .16) 50%, transparent 78%), radial-gradient(70% 80% at 60% -12%, #FD7830 0%, rgba(253, 120, 48, .42) 34%, rgba(253, 120, 48, .1) 60%, transparent 82%), radial-gradient(80% 70% at 0% 62%, rgba(101, 125, 181, .46), rgba(101, 125, 181, .12) 55%, transparent 80%), #0B0F1E }
.casew { display: flex; flex-direction: column; gap: clamp(20px, 3cqi, 30px) }
.case-logo { display: block; align-self: flex-start; height: clamp(30px, 6cqi, 40px); width: auto }
.case-top { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 20px }
.case-top > b { font-family: var(--display); font-size: clamp(84px, 24cqi, 152px); font-weight: 500; letter-spacing: -.06em; line-height: .86; font-variant-numeric: tabular-nums }
.case-top > span { font-size: clamp(20px, 4cqi, 28px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; padding-bottom: 4px }
.case-top small { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .72) }
.case-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16) }
.case-pair div { padding: 16px 0; min-width: 0 }
.case-pair div + div { padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .16) }
.case-pair b { display: block; font-family: var(--display); font-size: clamp(28px, 6cqi, 38px); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums }
.case-pair span { display: block; margin-top: 3px; font-size: 13px; color: rgba(255, 255, 255, .72) }
.case-path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px }
.case-path li { padding: 5px 10px; border-radius: 999px; white-space: nowrap; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14) }
.case-path li:last-child { color: #0B0F1E; font-weight: 600; background: linear-gradient(90deg, #F5A161, #F77DBC); border-color: transparent }
.case-note { margin: 0; font-size: 11.5px; line-height: 1.55; color: rgba(255, 255, 255, .62) }

/* who the team has worked with, in one color so no logo shouts */
.workedwith { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-block: clamp(36px, 5vw, 60px) 0; text-align: center }
.ww-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 40px) clamp(26px, 4vw, 52px) }
.ww-logos img { display: block; height: 26px; width: auto; max-width: 140px; object-fit: contain; filter: brightness(0); opacity: .62 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ww-logos img { filter: brightness(0) invert(1); opacity: .72 } }
:root[data-theme="dark"] .ww-logos img { filter: brightness(0) invert(1); opacity: .72 }