/* Industry ad landing pages (/hvac first; brands/dijidis/site/landing.py, SPEC.md v2.8). Only what the
   site's shared sheets do not already carry: the text thread, the system grid, the one-column final. */

.lp-small { color: var(--text-2); font-size: .92rem; max-width: 46ch; }
.lp-cta { margin-top: 36px; }
.lp-thread h2 { max-width: 18ch; }
.lp-thread .lede { max-width: 40ch; }

/* The text thread: what the homeowner sees after one missed call. The homeowner is the reader, so the
   business's texts sit left and the homeowner's own sit right, as on a phone. */
.thread { border-radius: var(--radius); border: 1px solid var(--glass-line); background: var(--glass);
  padding: 18px 16px 16px; max-width: 440px; width: 100%; justify-self: center; }
.th-top { display: flex; align-items: center; gap: 12px; padding: 0 4px 14px; border-bottom: 1px solid var(--line); }
.th-biz { margin: 0; font-weight: 600; font-size: .98rem; }
.th-list { list-style: none; margin: 0; padding: 16px 0 6px; display: grid; gap: 10px; }
.th-sys { justify-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: .82rem;
  color: var(--text-2); padding: 5px 12px; border-radius: var(--pill); border: 1px solid var(--line); }
.th-sys .ic { width: 14px; height: 14px; color: #F08A8A; }
.th-msg { display: flex; }
.th-msg p { margin: 0; padding: 10px 14px; border-radius: 18px; max-width: 82%; font-size: .95rem; line-height: 1.45; }
.th-out p { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.th-in { justify-content: flex-end; }
.th-in p { background: linear-gradient(135deg, #3E64A4, #8A3F76); color: #fff; border-bottom-right-radius: 6px; }
.th-owner { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; margin-top: 12px;
  padding: 12px; border-radius: var(--radius-in); border: 1px dashed rgba(229, 138, 196, 0.4); }
.th-owner p { margin: 0; font-size: .9rem; color: var(--text-2); }
.th-owner strong { color: var(--text); margin-right: 4px; }

/* The thread plays in once it scrolls into view: each text after the last. Final state without JS
   and under reduced motion. */
.js .thread .th-list > li, .js .thread .th-owner { transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i, 0) * 520ms + 200ms); }
.js .thread:not(.in) .th-list > li, .js .thread:not(.in) .th-owner { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  .js .thread .th-list > li, .js .thread .th-owner { transition: none; }
  .js .thread:not(.in) .th-list > li, .js .thread:not(.in) .th-owner { opacity: 1; transform: none; }
}

/* What's in the system: five cards, one column on phones, two from 700px, three from 1000px. */
.lp-sys { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .lp-sys { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .lp-sys { grid-template-columns: repeat(3, 1fr); } }
.lp-sys-item { border-radius: var(--radius); border: 1px solid var(--glass-line); background: var(--glass); padding: 24px; }
.lp-sys-item h3 { margin: 16px 0 6px; font-size: 1.08rem; }
.lp-sys-item p { margin: 0; color: var(--text-2); font-size: .96rem; }

.guards strong { color: var(--text); }

/* One card at the close, so one column at every width. */
@media (min-width: 900px) { .lp-final { grid-template-columns: 1fr; max-width: 820px; } }
.lp-final .final-main .btn { margin-top: 8px; }

/* The hero under the absolute logo bar: room for the logo on phones, and a headline held to two lines
   on desktop (the home hero's size runs this longer headline to three). */
.lp-ind .hero-panel { padding-top: 96px; }
@media (min-width: 900px) { .lp-ind .hero-panel { padding-top: 64px; } }
@media (min-width: 960px) { .lp-ind .hero-h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); } }

/* Search landing pages (seo.py), first /dental-ai-receptionist, 2026-10-14. The page has the site's own
   nav and footer; these few rules add only what its sections need beyond the shared pieces. */
.lp-sys-3 { margin-top: 28px; }
@media (min-width: 700px) { .lp-sys.lp-sys-3 { grid-template-columns: repeat(3, 1fr); } }
.panel h3 { font-size: 1.2rem; margin: 18px 0 14px; }
.seo-lede { max-width: 60ch; margin: 0 auto; text-align: center; }
.seo-line { margin: 22px auto 0; max-width: 60ch; text-align: center; color: var(--text-2); }
.seo-note { margin-top: 12px; }
.hero-visual .thread .th-sys .ic { color: var(--accent-text); }   /* an answered call, not /hvac's missed one */

/* /whatnot-seller-website (2026-10-17): the rules band's one-line reason; the fee source; the
   disclaimer under the close. */
.band-lede { margin: 12px 0 0; max-width: 52ch; color: var(--text-2); }
.seo-src { max-width: 60ch; margin: 18px auto 0; }
.seo-disc { padding-top: 0; }
.seo-prose .seo-lede { margin: 0 0 16px; max-width: 62ch; text-align: left; }
.seo-prose .seo-src { margin: 4px 0 0; text-align: left; }
.seo-card { padding: 26px 24px; max-width: 760px; }
@media (min-width: 768px) { .seo-card { padding: 34px 38px; } }
.seo-card .seo-lede:last-child { margin-bottom: 0; }

/* /whatnot-seller-website as a landing page (2026-10-17, v2): a hint of Whatnot's black and yellow
   (Jin: "a black badge with yellow pulsing dot ... white text"), and room under the sticky header for the
   in-page links. The yellow is this page's own, close to Whatnot's, not its brand value; the CTA keeps
   the site's pink. */
.badge-wn { border-radius: 6px; border: 1px solid transparent; color: #fff;
  background: linear-gradient(#0B0B0D, #0B0B0D) padding-box, linear-gradient(90deg, #6E9BE0, #E58AC4) border-box;
  border-width: 1.5px; padding: 7px 14px 7px 12px; text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 6px rgba(229, 138, 196, 0.75), 0 0 16px rgba(229, 138, 196, 0.45), 0 0 30px rgba(73, 118, 177, 0.45),
    inset 0 0 8px rgba(229, 138, 196, 0.25); }
.badge-wn .badge-dot { background: #FFD60A; animation-name: wnPulse; }
@keyframes wnPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0.65); } 70% { box-shadow: 0 0 0 7px rgba(255, 214, 10, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0); } }
#list .panel:first-child .plist .ic { color: var(--text-2); }
.sec[id], .sec-tight[id], #pick { scroll-margin-top: 84px; }
/* v4 (2026-10-17): the "what you sell" photo strip, and the terms section's prose beside the
   live-selling photograph. Photographs are generated product shots, no people, no logos
   (runs/2026-10-17-long-copy/03-humanize/humanized-v4.md). */
.gal-title { text-align: center; margin-bottom: 22px; }
.gal { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .gal { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.gal-item { overflow: hidden; padding: 0; }
.gal-item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.gal-label { margin: 0; padding: 12px 14px; font-size: .9rem; font-weight: 600; }
.seo-split { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .seo-split { grid-template-columns: 1.05fr 1fr; gap: 48px; } }
.seo-photo { margin: 0; overflow: hidden; padding: 0; }
.seo-photo img { display: block; width: 100%; height: auto; }

/* The Whatnot page's form before the picker (seo.py _intake, Jin 2026-10-17): its heading breaks in balance. */
.lp-intake .center-head h2 { text-wrap: balance; }

/* The Whatnot form in steps (seo.py _intake, Jin 2026-10-18): one step at a time, a progress bar, full-width
   buttons, dropdowns and checkboxes in the form's own dark fields. */
.in-step { display: grid; gap: 16px; }
.in-step[hidden] { display: none; }
.in-kicker { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.in-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: -6px; }
.in-bar span { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #8FB4FF, var(--accent-text)); transition: width .4s ease; }
.in-bar[data-of="3"][data-n="1"] span { width: 33.4%; }
.in-bar[data-of="3"][data-n="2"] span { width: 66.7%; }
.in-bar[data-of="2"][data-n="1"] span { width: 50%; }
.in-title { margin: 2px 0 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); font-weight: 750; letter-spacing: -0.02em; text-wrap: balance; }
.in-form .cf-f select { width: 100%; min-height: 50px; padding: 0 44px 0 14px; border-radius: var(--radius-in);
  border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(7, 12, 36, 0.75); color: var(--text); font: inherit; font-size: 1rem;
  appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .2s, box-shadow .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9CCE0' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.in-form .cf-f select:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px rgba(229, 138, 196, 0.22); }
.in-form .cf-f select option { background: #0B1030; color: #fff; }
.in-form .cf-f input::placeholder { color: var(--text-2); opacity: .7; }
.in-checks { border: 0; padding: 0; margin: 0; gap: 4px; }
.in-checks legend { padding: 0; margin-bottom: 8px; font-size: 0.92rem; color: var(--text-2); }
.in-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 1rem; }
.in-check input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--accent-text); cursor: pointer; }
.in-nav { display: grid; gap: 10px; justify-items: center; }
.in-form .cf-submit { width: 100%; justify-self: stretch; }
.in-back { background: none; border: 0; padding: 8px 12px; color: var(--text-2); font: inherit; font-size: .95rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; }
.in-back:hover, .in-back:focus-visible { color: var(--text); }
.in-back[hidden], .in-next[hidden] { display: none; }

/* A page test (seo.py hero.b or hero.test, assets/ab.js): one variant's parts show. Without script, A.
   Variant B of the format test (v9): what follows the hero waits until ab.js has moved the form up. */
html:not([data-v="b"]) [data-ab="b"], html[data-v="b"] [data-ab="a"] { display: none; }
html[data-v] .hero h1 { text-wrap: balance; }   /* a tested headline breaks in balance ("back." alone, B) */
html[data-v="b"]:not(.ab-placed) main > .hero ~ * { visibility: hidden; }

/* v9 (2026-10-18), Regenix's order (Jin: "the headline is on top center aligned with the subtitle, and
   the vsl, or our visual, centered beneath it landscape, and the form beneath it"): the hero centred
   over batch one's desk photograph, faded into the page, and a sample CRM as the visual. */
.hero-center { padding: 40px 0 64px; text-align: center; }
@media (min-width: 768px) { .hero-center { padding: 64px 0 88px; } }
.hero-bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; max-height: 980px; object-fit: cover;
  object-position: 50% 0; opacity: .42; -webkit-mask-image: linear-gradient(#000 35%, transparent 96%); mask-image: linear-gradient(#000 35%, transparent 96%); }
.hero-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(70% 46% at 50% 22%, rgba(7, 12, 36, .78), rgba(7, 12, 36, .25) 72%, transparent); }
.hero-stack { display: grid; gap: 34px; justify-items: center; }
.hero-center .hero-copy { max-width: 880px; }
.hero-center h1 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 18px; }
.hero-center .lede { max-width: 640px; margin: 0 auto; text-wrap: balance; }
.hero-center .hero-visual { width: 100%; max-width: 980px; text-align: left; }
.hero-center .hero-visual .illus-note { text-align: center; }
.hero-act .ctas { justify-content: center; }
.hero-slot { width: 100%; max-width: 680px; text-align: left; }
.hero-slot:empty { display: none; }
.hero-slot .lp-intake { padding: 0; }
.hero-slot .lp-intake .wrap { padding: 0; }

/* v10 (2026-10-18): the platform word in the headline (seo.py _rot_h1, hero-motion.js). Names in the site's
   type, a colour each, never the platforms' logos. Without script only the first word shows. */
.hero-center .hero-copy { max-width: 1120px; }
.hero-center h1 .h-l, .hero-center .lede .h-l { display: block; }
@media (min-width: 760px) { .hero-center h1 .h-l1:has(+ .h-l2 .rot), .hero-center h1 .h-l1 + .h-l2:has(.rot) { display: inline; } }   /* "Scale your [word] brand" on one line */
.hero-center .lede .rot.rot-on { height: 1.6em; margin-bottom: 0; vertical-align: bottom; }
.hero-center .lede .rot-on .rot-w { height: 1.6em; line-height: 1.6; font-weight: 650; }
.rot-w:not(:first-child) { display: none; }
.rot.rot-on { display: inline-block; vertical-align: top; height: 1.2em; margin-bottom: -.16em; overflow: hidden;
  transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.rot-on .rot-track { display: flex; flex-direction: column; align-items: center; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.rot-on .rot-w { display: block; width: max-content; height: 1.2em; line-height: inherit; white-space: nowrap; }
.rot-w { font-weight: 800; }
.rot-wrap { position: relative; display: inline-block; }   /* inline-block, so the underline measures the word alone, not the line (Jin 2026-10-19) */
.rot-ul { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .3em; overflow: visible; pointer-events: none; color: #FFD60A; }
.rot-ul path { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rot-wrap[data-pl="tiktok shop"] .rot-ul { color: #4FF0EA; }
.rot-wrap[data-pl="commentsold"] .rot-ul { color: #8FA3FF; }
.rot-wrap[data-pl="live selling"] .rot-ul { color: #FF9A62; }
.rot-wrap.ul-draw .rot-ul { animation: ulDraw .7s .2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ulDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.rot-w[data-pl="whatnot"] { color: #FFD60A; }
.rot-w[data-pl="tiktok shop"] { color: #4FF0EA; }
.rot-w[data-pl="commentsold"] { color: #8FA3FF; }
.rot-w[data-pl="live selling"] { color: #FF9A62; }   /* its own accent (Jin 2026-10-18: "the live selling should also be accented to a different color") */

/* The sample sales dashboard (seo.py _sales): four totals, revenue by platform, what goes out next and the
   newest buyers on the list; bars grow and the revenue line draws on load. */
.sd { padding: 0; overflow: hidden; }
.sd-top { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.sd-dots { display: flex; gap: 6px; }
.sd-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.sd-title { margin: 0; font-weight: 650; font-size: .98rem; white-space: nowrap; }
.sd-period { margin-left: auto; font-size: .8rem; color: var(--text-2); white-space: nowrap; }
@media (max-width: 459px) { .sd-dots { display: none; } .sd-top { gap: 10px; padding: 12px 14px; } }
.sd-tag { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text);
  border: 1px solid rgba(229, 138, 196, .45); border-radius: 999px; padding: 3px 10px; }
.sd-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .sd-kpis { grid-template-columns: repeat(4, 1fr); } }
.sd-kpi { display: grid; gap: 4px; align-content: start; padding: 14px 18px; border-right: 1px solid var(--line); animation: heroUp .7s calc(.35s + var(--i) * .07s) cubic-bezier(.2, .7, .2, 1) both; }
.sd-kpi:nth-child(2n) { border-right: 0; }
@media (max-width: 759px) { .sd-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (min-width: 760px) { .sd-kpi:nth-child(2n) { border-right: 1px solid var(--line); } .sd-kpi:last-child { border-right: 0; } }
.sd-k { font-size: .76rem; color: var(--text-2); }
.sd-v { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sd-body { display: grid; }
@media (min-width: 760px) { .sd-body { grid-template-columns: 1.25fr 1fr; } }
.sd-panel { padding: 16px 18px; }
.sd-rev { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .sd-rev { border-bottom: 0; border-right: 1px solid var(--line); } }
.sd-side .sd-panel + .sd-panel { border-top: 1px solid var(--line); }
.sd-h { margin: 0 0 10px; font-size: .78rem; font-weight: 600; color: var(--text-2); }
.sd-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sd-bars li { display: grid; grid-template-columns: 136px 1fr 62px; align-items: center; gap: 10px; font-size: .86rem; --pl: #8FB4FF; }
.sd-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sd-bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--pl);
  transform-origin: left; animation: sdGrow .9s calc(.55s + var(--i) * .08s) cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sdGrow { from { transform: scaleX(0); } }
.sd-amt { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
/* Top products (Jin 2026-10-19, replacing the buyer sources): the palette cycles by row. */
.sd-bars li:nth-child(1) { --pl: #FFD60A; }
.sd-bars li:nth-child(2) { --pl: #E58AC4; }
.sd-bars li:nth-child(3) { --pl: #4FF0EA; }
.sd-bars li:nth-child(4) { --pl: #8FB4FF; }
.sd-bars li:nth-child(5) { --pl: #FF9A62; }
/* v10b (2026-10-18): the feed of what the AI sent and who came back, the site's shared row on a loop. */
@media (min-width: 760px) { .en-body { grid-template-columns: 1fr 1.35fr; } }
.en-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; height: 300px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }   /* a set height, so the page below never moves */
@media (max-width: 759px) { .en-rows { height: 340px; } }
.en-rows .ur[hidden] { display: none; }
.en-rows .ur-card { padding: 10px 12px; }
.en-rows .ur-time:empty { display: none; }
.en-live { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #5BD69B; vertical-align: 1px;
  animation: enLive 1.8s ease-in-out infinite; }
@keyframes enLive { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 214, 155, .6); } 60% { box-shadow: 0 0 0 6px rgba(91, 214, 155, 0); } }
@media (max-width: 459px) { .sd-bars li { grid-template-columns: 108px 1fr 48px; } }

/* Brands under the form (seo.py _logos): white marks, one row. */
.lp-logos { text-align: center; padding-top: 8px; }
.lg-title { margin: 0 0 18px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.lg-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 52px; }
.lg-img { display: block; height: 30px; width: auto; opacity: .82; }
.lg-note { margin-top: 16px; }
.hero-slot .lp-logos .wrap { padding: 0; }

/* The Whatnot page's buttons, rectangular with slightly rounded corners (Jin 2026-10-18). */
body:has(.hero-center) .btn { border-radius: 10px; }
body:has(.hero-center) .btn .circ { border-radius: 7px; }
.hero-slot .lp-logos { padding: 32px 0 0; }

/* Sourced figures (seo.py _stats, Jin 2026-10-18): three numbers, a footnote mark each, the sources
   as text under them. */
.lp-stats { text-align: center; }
.st-title { margin-bottom: 22px; }
.st-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.st-row { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin: 0 auto; }   /* two by two on every screen (Jin 2026-10-18) */
@media (min-width: 860px) { .st-row { gap: 18px; } }
@media (max-width: 559px) { .st-item { padding: 16px 14px; } .st-big { font-size: 1.75rem; } .st-text { font-size: .9rem; } }
.st-item { padding: 22px 20px; text-align: left; }
.st-big { margin: 0 0 6px; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.7rem); font-weight: 750; letter-spacing: -0.03em; line-height: 1.05;
  background: linear-gradient(90deg, #8FB4FF, var(--accent-text)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-text { margin: 0; color: var(--text-2); line-height: 1.45; }
.st-text sup { font-size: .7em; margin-left: 2px; color: var(--text-2); }
.st-close { margin: 22px 0 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 650; text-wrap: balance; }
.st-src { margin: 18px auto 0; padding-left: 1.4em; max-width: 760px; text-align: left; font-size: .76rem; line-height: 1.5; color: var(--text-2); }
.lp-stats .st-title { margin-left: auto; margin-right: auto; }

/* v11 (2026-10-18): one centred column. The header's wordmark centred with no in-page links; every
   heading centred; the pillars with photographs; the category labels set on their photographs; the
   figures' sources once above the footer. */
.nav-center { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav-center .brand { grid-column: 2; }
.nav-center .nav-cta { grid-column: 3; justify-self: end; }
@media (max-width: 559px) { .nav-center { display: flex; justify-content: space-between; } }   /* phones: wordmark left, button right (Jin 2026-10-18) */
body:has(.hero-center) main h2, body:has(.hero-center) .seo-lede { text-align: center; margin-left: auto; margin-right: auto; }
body:has(.hero-center) .lp-sys-item { text-align: center; }
.lp-sys-item.has-photo { padding: 0 0 22px; overflow: hidden; }
.lp-sys-photo { margin: 0 0 4px; }
.lp-sys-photo img { display: block; width: 100%; height: auto; }   /* the whole photograph, never cropped (Jin 2026-10-19) */
.lp-sys-item.has-photo h3, .lp-sys-item.has-photo p { padding: 0 22px; }
.lp-sys-item.has-photo h3 { font-size: 1.2rem; }
.gal-item { position: relative; }
.gal-item .gal-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; font-size: .95rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
  background: linear-gradient(transparent, rgba(5, 8, 26, .88)); }
.lp-sources { padding-top: 24px; }
.src-title { margin: 0 auto 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); max-width: 760px; text-align: left; }
.lp-sources .st-src { margin-top: 0; }

/* v12 (2026-10-18): a bigger hero button; the urgent line under the first figures; the totals glow as the
   feed moves them; the brands right under the hero. */
.hero-act .btn { min-height: 60px; min-width: 320px; padding: 0 44px; font-size: 1.15rem; }
@media (max-width: 559px) { .hero-act, .hero-act .ctas, .hero-act .btn { width: 100%; } .hero-act .btn { min-width: 0; } }
.st-urge { margin: 30px auto 0; max-width: 760px; text-align: center; }
.st-urge-a { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.st-urge-b { margin: 10px 0 0; font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem); font-weight: 650; color: var(--text-2); text-wrap: balance; }
.sd-v.sd-up { animation: sdUp 1.1s ease-out; }
@keyframes sdUp { 0% { color: #7BE3AE; text-shadow: 0 0 14px rgba(91, 214, 155, .55); } 100% { color: inherit; text-shadow: none; } }
main > .lp-logos { padding: 8px 0 0; }
body:has(.hero-center) main h2 { text-wrap: balance; }
main > .lp-logos + .lp-stats { padding-top: 96px; }   /* more air between the brands and the first figures (Jin 2026-10-19) */
@media (max-width: 559px) { .lg-row { gap: 16px 28px; } .lg-img { height: 22px; } }

/* v19 (Jin 2026-10-21): the offer on its own line under the subtitle, in the neon border of the page's
   badge, so the subtitle stays the three levers and the offer reads at a glance.
   The rule stays one class strong, so the variant rule above still hides it in B; each sentence is its own
   inline block, so a phone breaks the line between them. */
.hero-offer { display: inline-block; margin: 20px 0 0; padding: 9px 20px; border-radius: var(--pill); font-weight: 650;
  font-size: clamp(0.95rem, 2.4vw, 1.05rem); color: #fff; border: 1.5px solid transparent;
  background: linear-gradient(#0B0B0D, #0B0B0D) padding-box, linear-gradient(90deg, #6E9BE0, #E58AC4) border-box;
  box-shadow: 0 0 10px rgba(229, 138, 196, 0.45), 0 0 24px rgba(73, 118, 177, 0.35); }
.hero-offer .ho-s { display: inline-block; }

/* v23 (Jin 2026-10-21: "model it after this winning landing page design ... it needs to be simple, not too much
   information"): the hero carries the badge, what the reader sells as small chips, four figures under the
   subtitle and one wide button with a small line under it; one proof section (seo.py _proof) of three
   sourced figures, the sample dashboard and a closing line; the form under three ticks. */
.hero-center .badge { margin-bottom: 14px; }
.hero-chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hero-chips li { padding: 5px 12px; border-radius: var(--pill); border: 1px solid var(--glass-line); background: var(--glass);
  font-size: .78rem; font-weight: 600; color: var(--text-2); }
.hero-tiles { list-style: none; margin: 30px auto 0; padding: 0; max-width: 780px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
@media (min-width: 700px) { .hero-tiles { grid-template-columns: repeat(4, 1fr); } }
.hero-tiles li { position: relative; padding-top: 14px; }
.hero-tiles li::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px; border-radius: 2px;
  background: linear-gradient(90deg, var(--glow-blue), var(--accent)); }
.ht-big { margin: 0; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.7rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.05; color: var(--text); }
.ht-unit { margin-left: 2px; font-size: .46em; font-weight: 650; letter-spacing: 0; color: var(--text-2); }
.ht-label { margin: 6px auto 0; max-width: 16ch; font-size: .84rem; line-height: 1.35; color: var(--text-2); text-wrap: balance; }
.lp-go { display: grid; justify-items: center; gap: 10px; }
.btn-go { width: min(100%, 640px); min-height: 60px; gap: 10px; font-size: 1.15rem; }
.lp-go-note { margin: 0; font-size: .82rem; color: var(--text-2); }
.hero-act { width: 100%; }
.hero-act .btn-go { min-width: 0; }
.lp-proof { text-align: center; padding-bottom: 32px; }
.pf-lede { max-width: 640px; margin: 0 auto 26px; }
.st-row.pf-row { grid-template-columns: 1fr; max-width: 980px; }
@media (min-width: 700px) { .st-row.pf-row { grid-template-columns: repeat(3, 1fr); } }
.pf-row .st-item { text-align: center; }
.pf-visual { max-width: 980px; margin: 28px auto 0; text-align: left; }
.pf-visual .illus-note { text-align: center; }
.pf-note { max-width: 760px; margin: 24px auto 0; padding: 16px 22px; font-weight: 600; line-height: 1.5; text-wrap: balance; }
.lp-proof .lp-go { margin-top: 30px; }
main > .lp-logos + .lp-proof { padding-top: 88px; }
.in-checks-row { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.in-checks-row li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--pill);
  border: 1px solid var(--glass-line); background: var(--glass); font-size: .9rem; font-weight: 600; }
.in-checks-row .ic { color: var(--accent-text); }
@media (max-width: 699px) {   /* phones: each figure one compact row, the number left of its words */
  .pf-row .st-item { display: grid; grid-template-columns: 7.2rem 1fr; align-items: center; gap: 12px; text-align: left; }
  .pf-row .st-big { margin: 0; }
}
.hero-center .lede:has(.ls) { max-width: 720px; }
.hero-center .lede .lede-strong { color: var(--text); font-weight: 650; }
.hero-center .lede .lede-soft { color: var(--text-2); }
.hero-center .lede .ls { display: inline-block; }

/* v24 (Jin 2026-10-21): the brands as a small strip under the hero's button, drifting and faded at both ends;
   the proof section lists the added sales by category, the winning reference's results, above the sourced
   figures. */
.hero-logos { display: flex; justify-content: center; width: min(100%, 720px); margin: 30px auto 0; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.lg-track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: lgDrift 36s linear infinite; }
.lg-track li { flex: none; padding: 0 26px; }
.hero-logos .lg-img { height: 22px; }
.hero-logos:hover .lg-track { animation-play-state: paused; }
@keyframes lgDrift { to { transform: translateX(-50%); } }
@media (max-width: 559px) { .hero-logos .lg-img { height: 17px; } .lg-track li { padding: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .lg-track { animation: none; } .lg-track li[aria-hidden] { display: none; } }
.pf-results { list-style: none; margin: 0 auto 26px; padding: 0; max-width: 760px; display: grid; gap: 10px; text-align: left; }
.pr-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; }
.pr-cat { display: block; margin: 0; font-weight: 700; }
.pr-sub { display: block; margin: 2px 0 0; font-size: .84rem; line-height: 1.35; color: var(--text-2); }
.pr-amt { text-align: right; }
.pr-big { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 760; letter-spacing: -0.02em; color: var(--accent-text); white-space: nowrap; }
.pr-note { margin: 2px 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-text); }
.pr-more { padding: 0; }
.pr-more a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 18px; color: inherit; text-decoration: none; }
.pr-more a > .ic { color: var(--accent-text); }
.pr-more a:hover .pr-cat { color: var(--accent-text); }
.hero-center .hero-stack { grid-template-columns: minmax(0, 1fr); }   /* the strip's long track must not widen the hero */
.hero-act { min-width: 0; }
@media (max-width: 699px) { .pf-row .st-item { grid-template-columns: 7.6rem 1fr; } .pf-row .st-big { white-space: nowrap; font-size: 1.7rem; } }
/* the sourced figures in the results' rows (Jin 2026-10-21: "make this section look liek the same as the seciton above it") */
.pf-stats { margin-top: -10px; }
.pr-stat { grid-template-columns: auto 1fr auto; }
.pr-text { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--text-2); }
.pr-text sup { font-size: .7em; margin-left: 2px; }
.pr-stat .pr-big { color: var(--blue-text); }
.pr-stat .pr-cat sup { font-size: .7em; font-weight: 500; margin-left: 2px; color: var(--text-2); }

/* v26 (Jin 2026-10-21: "the hero figures numbers are small on mobile ... the subline is small on desktop ...
   the real stores rea revenue bars are to long on desktop ... the form section is also too long ... width wise"):
   bigger figures on a phone, a bigger subtitle on a wide screen, narrower result rows and form. */
@media (max-width: 699px) { .ht-big { font-size: 2.6rem; } .ht-label { font-size: .9rem; } }
.hero-center .lede:has(.ls) { max-width: 860px; font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.45rem); line-height: 1.5; }
.pf-results, .pf-note { max-width: 600px; }
.lp-intake .in-form { max-width: 520px; margin-left: auto; margin-right: auto; }
.lp-proof .btn-go { width: min(100%, 600px); }
.st-star { margin: 10px auto 0; max-width: 760px; text-align: left; list-style: none; padding-left: 0; }