/* LinkVendors homepage draft v5: Yuri's picks from v1 to v4.
   Loads after styles.css (v3 base) and v4.css. Only v5's new or changed blocks are here. */

/* 1. Hero: v2 section 1, carried over (rules from v2/public/styles.css, scoped to .hero-v2) */
.v5 .hero-v2 { padding: 56px 0 64px; border-bottom: 1px solid var(--line); background:
  radial-gradient(circle at 1px 1px, rgba(26, 26, 26, .06) 1px, transparent 0) 0 0 / 22px 22px, var(--cream); }
.hero-v2-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; align-items: center; }
.hero-v2 .eyebrow { display: inline-block; font: 700 12.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 13px; background: var(--paper); }
.hero-v2 h1 { margin: 22px 0 20px; font-size: clamp(42px, 4.6vw, 64px); line-height: 1.03; letter-spacing: -.04em; font-weight: 700; }
.hero-v2 h1 .hl { background: var(--butter); border-radius: 10px; padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-v2 .lede { margin: 0; max-width: none; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.hero-v2 .cta-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 14px; margin-top: 30px; }
.hero-v2 .replay { border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }

/* 2. Proof: four numbers */
.proof-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1120px; }

/* 3. A thousand > a million */
.v5 .thousand { padding: 88px 0; background: var(--paper); text-align: center; border-bottom: 1px solid var(--line); }
.thousand h2 { margin-top: 6px; }
.thousand-sub { max-width: 720px; margin: 26px auto 0; font-size: 20px; color: var(--ink-2); }
.thousand-foot { margin-top: 14px; font-size: 16px; color: var(--muted); }
.thousand-foot b { color: var(--ink); font-family: var(--mono); }

/* 4. Checks: hover / tap cards */
.v5 .checks5 { background: var(--cream); }
.checks5-head { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.hint { margin-top: 14px; font-size: 15px; color: var(--muted); }
.hint-tap { display: none; }
@media (hover: none) { .hint-hover { display: none; } .hint-tap { display: inline; } }
.chk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.chk { display: flex; flex-direction: column; padding: 16px 16px 22px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-lg); cursor: default; outline: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.chk:is(:hover, .on) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.chk:focus-visible { box-shadow: 6px 6px 0 var(--ink), 0 0 0 4px var(--butter); }
.chk h3 { margin: 20px 6px 6px; font-size: 22px; line-height: 1.2; }
.chk > p { margin: 0 6px; font-size: 15.5px; color: var(--ink-2); }
.chk-vis { position: relative; height: 172px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--ground); overflow: hidden; text-align: center; }

/* Card visuals, Typefully pattern: one object, and the hover shows the payoff. */
.chk-vis { transition: background .35s var(--ease); }
.chk:is(:hover, .on) .chk-vis { background: var(--butter-wash); }

/* 1. competitor drops out of the list */
.c1-list { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 300px; }
.c1-row { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 8px; background: var(--paper); font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; transition: height .4s var(--ease) .45s, opacity .3s .45s, margin .4s .45s, background .25s, color .25s; }
.c1-row .fav { --fs: 16px; }
.c1-row em { margin-left: auto; font-style: normal; font: 700 10px var(--mono); text-transform: uppercase; color: #fff; background: #b42318; padding: 3px 6px; border-radius: 4px; opacity: 0; transition: opacity .2s; }
.chk:is(:hover, .on) .c1-bad { background: #fde8e7; color: #b42318; text-decoration: line-through; height: 0; opacity: 0; margin: -3px 0; }
.chk:is(:hover, .on) .c1-bad em { opacity: 1; }
.c1-note { font: 700 11.5px var(--mono); text-transform: uppercase; letter-spacing: .03em; color: #b42318; opacity: 0; transform: translateY(6px); transition: opacity .3s .8s, transform .3s .8s; }
.chk:is(:hover, .on) .c1-note { opacity: 1; transform: none; }

/* 2. taken sentence out, free sentence in */
.c2-stage { position: relative; width: 100%; max-width: 310px; height: 104px; }
.c2-card { position: absolute; inset: 0; margin: 0; padding: 12px 14px 0; border-radius: 10px; background: var(--paper); font-size: 14px; line-height: 1.45; text-align: left; transition: transform .45s var(--ease), opacity .35s; }
.c2-card em { position: absolute; left: 14px; bottom: 10px; font-style: normal; font: 700 10.5px var(--mono); text-transform: uppercase; padding: 3px 7px; border-radius: 4px; }
.c2-taken u { color: #1d4ed8; text-underline-offset: 3px; }
.c2-taken em { background: #fde8e7; color: #b42318; }
.c2-free { opacity: 0; transform: translateX(40px); }
.c2-free mark { background: var(--butter); padding: 0 2px; }
.c2-free em { background: var(--green); color: #fff; }
.chk:is(:hover, .on) .c2-taken { opacity: 0; transform: translateX(-40px); }
.chk:is(:hover, .on) .c2-free { opacity: 1; transform: none; transition-delay: .15s; }

/* 3. 46 becomes 160 */
.c3-search { padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); font: 400 14px var(--mono); }
.c3-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; height: 52px; align-content: center; }
.c3-chips span { padding: 3px 9px; border-radius: 999px; background: var(--ink); color: var(--butter); font: 400 11.5px var(--mono); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .25s, transform .3s var(--ease); }
.c3-chips span:nth-child(2) { transition-delay: .12s; } .c3-chips span:nth-child(3) { transition-delay: .24s; }
.chk:is(:hover, .on) .c3-chips span { opacity: 1; transform: none; }
.c3-count { font-size: 13px; color: var(--muted); }
.c3-count b { font: 700 22px var(--mono); color: var(--ink); transition: color .3s; }
.chk:is(:hover, .on) .c3-count b { color: var(--green-dark); }

/* 4. four checks tick in */
.c4-site { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.c4-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; text-align: left; }
.c4-list li { position: relative; padding-left: 24px; font-size: 13px; color: var(--muted); transition: color .2s; }
.c4-list li::before { content: ''; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--paper); transition: background .2s, border-color .2s; }
.chk:is(:hover, .on) .c4-list li { color: var(--ink); }
.chk:is(:hover, .on) .c4-list li::before { border-color: var(--green); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.c4-list li:nth-child(2), .c4-list li:nth-child(2)::before { transition-delay: .15s; }
.c4-list li:nth-child(3), .c4-list li:nth-child(3)::before { transition-delay: .3s; }
.c4-list li:nth-child(4), .c4-list li:nth-child(4)::before { transition-delay: .45s; }

/* traffic */
.vt-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.vt-head b { font-family: var(--mono); }
.vt-head em { font-style: normal; font: 700 11px var(--mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; }
.chk:is(:hover, .on) .vis-traffic { background: var(--ground); }
.vt-bars { display: flex; align-items: flex-end; gap: 9px; height: 70px; }
.vt-bars i { width: 17px; height: 30%; border-radius: 5px 5px 2px 2px; background: #deddd4; transition: height .5s var(--ease), background .3s; }
.vt-bars i:nth-child(2) { transition-delay: .05s; } .vt-bars i:nth-child(3) { transition-delay: .1s; } .vt-bars i:nth-child(4) { transition-delay: .15s; } .vt-bars i:nth-child(5) { transition-delay: .2s; } .vt-bars i:nth-child(6) { transition-delay: .25s; }
.chk:is(:hover, .on) .vt-bars i { height: var(--h); background: #eadb76; }
.chk:is(:hover, .on) .vt-bars i:nth-child(6) { background: var(--butter); }
.vt-axis { font: 400 11px var(--mono); color: var(--muted); }

/* 6. button becomes a locked price */
.c6-btn { position: relative; display: grid; place-items: center; min-width: 210px; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--butter); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; font-size: 17px; transition: background .3s, color .3s, box-shadow .3s; }
.c6-btn span { grid-area: 1 / 1; transition: opacity .25s, transform .3s var(--ease); }
.c6-btn .b { opacity: 0; transform: translateY(8px); font-family: var(--mono); }
.c6-btn .b::before { content: '✓ '; }
.c6-sub { font-size: 13px; color: var(--muted); opacity: 0; transition: opacity .3s .2s; }
.chk:is(:hover, .on) .c6-btn { background: var(--green); color: #fff; border-color: var(--green-dark); box-shadow: 0 8px 24px -8px rgba(34, 197, 94, .7); }
.chk:is(:hover, .on) .c6-btn .a { opacity: 0; transform: translateY(-8px); }
.chk:is(:hover, .on) .c6-btn .b { opacity: 1; transform: none; }
.chk:is(:hover, .on) .c6-sub { opacity: 1; }

/* 5. Who it's for, as a likelihood estimate (illustrative numbers) */
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.v5 .odds-sec { background: var(--paper); border-top: 1px solid var(--line); }
.fit5-head { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.odds-sub { margin-top: 14px; font-size: 18px; color: var(--ink-2); }
.odds { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-width: 1040px; margin: 0 auto; border: 1.5px solid var(--ink); border-radius: var(--r-lg); background: var(--cream); box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.odds-in { padding: 30px 32px; }
.odds-mode { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.odds-mode .dot { width: 8px; height: 8px; border-radius: 50%; background: #e11d48; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.odds-mode .m-you { display: none; }
.odds.you .odds-mode .m-auto { display: none; }
.odds.you .odds-mode .m-you { display: inline; color: var(--green-dark); }
.odds.you .odds-mode .dot { background: var(--green); animation: none; }
.odds-lab { display: block; margin: 0 0 8px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.odds-kw { width: 100%; height: 56px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); font: 400 19px var(--mono); color: var(--ink); }
.odds-kw:focus { outline: none; box-shadow: 0 0 0 4px var(--butter); }
.odds-ex { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 24px; }
.odds-ex button, .odds-how button { cursor: pointer; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); border-radius: 999px; padding: 6px 11px; font: 400 12.5px var(--mono); }
.odds-ex button:hover { border-color: var(--ink); color: var(--ink); }
.odds-how { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.odds-how button { border-radius: 10px; padding: 12px 12px; font: 600 14px var(--sans); text-align: left; }
.odds-how button[aria-checked="true"] { border: 1.5px solid var(--ink); background: var(--butter); color: var(--ink); }
.odds-out { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px 28px; background: var(--paper); border-left: 1.5px solid var(--ink); text-align: center; }
.gauge { --p: 80%; --col: var(--green); display: grid; place-items: center; width: 190px; height: 190px; border-radius: 50%; background: conic-gradient(var(--col) var(--p), var(--ground-2) 0); transition: --col .3s; }
.gauge[data-band="mid"] { --col: #e5a50a; }
.gauge[data-band="lo"] { --col: #d92d20; }
.gauge > span { display: flex; align-items: baseline; justify-content: center; width: 146px; height: 146px; border-radius: 50%; background: var(--paper); padding-top: 44px; }
.gauge b { font: 700 54px/1 var(--mono); letter-spacing: -.04em; }
.gauge small { font: 700 22px var(--mono); color: var(--muted); }
.odds-cat { margin-top: 6px; font: 700 13px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.odds-why { font-size: 17px; font-weight: 600; max-width: 30ch; min-height: 2.7em; }
.odds-how-why { font-size: 14.5px; color: var(--ink-2); max-width: 34ch; min-height: 3em; }
.odds-note { max-width: 760px; margin: 34px auto 0; text-align: center; font-size: 17px; color: var(--ink-2); }
.odds-note b { color: var(--ink); }
.odds-fine { margin-top: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.odds-sec .fit5-who { margin-top: 18px; text-align: center; }

/* 7. Promise flow (replaces v3's two text columns) */
.pflow { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 0; margin: 40px 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); text-align: center; }
.pflow > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 14px 4px; }
.pflow > li:not(:last-child)::after { content: '→'; position: absolute; right: -10px; top: 34px; font: 700 20px var(--mono); }
.pflow b { font-size: 20px; }
.pflow span { font-size: 15px; color: var(--ink-2); }
.pf-end { flex-direction: row !important; justify-content: center; gap: 12px !important; }
.pf-live, .pf-refund { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; border-radius: 10px; }
.pf-live { background: var(--green-soft); border: 1.5px solid var(--green-dark); }
.pf-live b { color: var(--green-dark); }
.pf-refund { background: var(--butter-wash); border: 1.5px solid var(--ink); }
.pf-or { align-self: center; font: 700 12px var(--mono); color: var(--muted); }

/* 9. Founder, short */
.v5 .founder5 { padding: 80px 0; background: var(--cream); border-top: 1px solid var(--line); }
.f5-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; padding: 36px 40px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-lg); }
.f5-avatar { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--butter); border: 1.5px solid var(--ink); font: 700 26px var(--sans); }
.f5-card h2 { font-size: clamp(26px, 2.6vw, 34px); }
.f5-card p:not(.kicker):not(.f5-sign) { margin-top: 14px; font-size: 17.5px; color: var(--ink-2); }
.f5-sign { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.f5-sign .sig { font-size: 40px; transform: rotate(-4deg); }
.f5-sign span:last-child { font-size: 14.5px; color: var(--muted); }

@media (max-width: 1180px) {
  .hero-v2-in { grid-template-columns: 1fr; gap: 36px; }
  .proof-stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-stats-4 div:nth-child(3) { border-left: 0; }
  .proof-stats-4 div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .chk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .odds { grid-template-columns: 1fr; }
  .odds-out { border-left: 0; border-top: 1.5px solid var(--ink); }
}
@media (max-width: 760px) {
  .v5 .hero-v2 { padding: 36px 0 52px; }
  .hero-v2 h1 { font-size: clamp(36px, 10vw, 46px); }
  .hero-v2 .lede { font-size: 17px; }
  .proof-stats-4 { grid-template-columns: 1fr; }
  .proof-stats-4 div + div { border-left: 0; border-top: 1px solid var(--line); }
  .thousand-sub { font-size: 17px; }
  .chk-grid { grid-template-columns: 1fr; }
  .odds-in { padding: 22px 18px; }
  .odds-how { grid-template-columns: 1fr; }
  .gauge { width: 160px; height: 160px; }
  .gauge > span { width: 122px; height: 122px; padding-top: 36px; }
  .gauge b { font-size: 44px; }
  .pflow { grid-template-columns: 1fr; }
  .pflow > li:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -18px; transform: translateX(-50%); }
  .f5-card { grid-template-columns: 1fr; padding: 26px 22px; gap: 18px; }
  .f5-avatar { width: 64px; height: 64px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .chk *, .chk { transition: none !important; }
}

/* ---- Section 4, cards 7-12 (added 7 Oct): same pattern, one object, hover shows the payoff ---- */
/* 7. link goes into the sentence */
.c7-sent { margin: 0; max-width: 310px; padding: 14px 16px; border-radius: 10px; background: var(--paper); font-size: 15px; line-height: 1.5; text-align: left; }
.c7-kw { position: relative; border-radius: 3px; transition: background .3s, color .3s; }
.c7-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 9px; border-radius: 6px; background: var(--ink); color: #fff; font: 400 12px var(--mono); opacity: 0; transform: translate(-50%, 6px); transition: opacity .25s .35s, transform .3s .35s; }
.c7-tip .fav { --fs: 14px; }
.chk:is(:hover, .on) .c7-kw { background: var(--butter); color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.chk:is(:hover, .on) .c7-tip { opacity: 1; transform: translate(-50%, 0); }

/* 8. falling site skipped, growing site kept */
.c8-row { display: grid; grid-template-columns: auto 1fr 60px 48px; text-align: left; align-items: center; gap: 8px; width: 100%; max-width: 310px; padding: 8px 10px; border-radius: 8px; background: var(--paper); font-size: 13.5px; font-weight: 500; position: relative; transition: opacity .3s .3s; }
.c8-row .fav { --fs: 16px; }
.c8-row .c8b-icon { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--ground-2); font: 700 10px var(--mono); }
.c8-row svg { width: 60px; height: 20px; }
.c8-row polyline { fill: none; stroke: var(--line-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.c8-row b { font: 700 13px var(--mono); text-align: right; color: var(--muted); transition: color .3s; }
.c8-row em { position: absolute; right: -6px; top: -9px; font-style: normal; font: 700 10px var(--mono); text-transform: uppercase; padding: 2px 6px; border-radius: 4px; color: #fff; opacity: 0; transform: scale(.7); transition: opacity .25s .45s, transform .3s .45s; }
.c8-down em { background: #b42318; } .c8-up em { background: var(--green); }
.c8-cap { font: 400 11px var(--mono); color: var(--muted); }
.chk:is(:hover, .on) .c8-down polyline { stroke: #b42318; }
.chk:is(:hover, .on) .c8-down b { color: #b42318; }
.chk:is(:hover, .on) .c8-down { opacity: .45; }
.chk:is(:hover, .on) .c8-up polyline { stroke: var(--green); }
.chk:is(:hover, .on) .c8-up b { color: var(--green-dark); }
.chk:is(:hover, .on) .c8-row em { opacity: 1; transform: none; }

/* 9. top country bar fills */
.c9-site { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.c9-bar { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 280px; height: 38px; padding: 0 12px; border-radius: 8px; background: var(--paper); overflow: hidden; font-size: 13.5px; }
.c9-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--butter); transition: width .7s var(--ease) .1s; }
.c9-bar b, .c9-bar span { position: relative; }
.c9-bar b { font: 700 14px var(--mono); }
.c9-cap { font: 400 11px var(--mono); color: var(--muted); }
.chk:is(:hover, .on) .c9-bar i { width: 44%; }

/* 10. referring domains file, matching sites struck out */
.c10-file { padding: 6px 12px; border: 1.5px dashed var(--muted); border-radius: 8px; background: var(--paper); font: 400 12.5px var(--mono); transition: border-color .3s, background .3s; }
.c10-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.c10-list > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--paper); font-size: 13px; font-weight: 500; transition: color .3s .3s, opacity .3s .3s; text-decoration-color: #b42318; }
.c10-list .fav { --fs: 14px; }
.c10-note { font: 700 11px var(--mono); text-transform: uppercase; color: #b42318; opacity: 0; transition: opacity .3s .55s; }
.chk:is(:hover, .on) .c10-file { border-color: var(--ink); border-style: solid; background: var(--butter); }
.chk:is(:hover, .on) .c10-list > span { text-decoration-line: line-through; opacity: .5; }
.chk:is(:hover, .on) .c10-note { opacity: 1; }

/* 11. articles added to a shortlist */
.c11-row { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 300px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--paper); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.c11-row .fav { --fs: 14px; }
.c11-row i { margin-left: auto; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background .2s, border-color .2s; }
.c11-row:nth-child(2) i { transition-delay: .2s; } .c11-row:nth-child(3) i { transition-delay: .4s; }
.chk:is(:hover, .on) .c11-row i { border-color: var(--green); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.c11-count { font-size: 13px; color: var(--muted); }
.c11-count b { font: 700 18px var(--mono); color: var(--ink); }

/* 12. chats fold into one live link */
.c12-chats { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; transition: opacity .3s, transform .4s var(--ease); }
.c12-chats span { padding: 6px 11px; border-radius: 12px 12px 12px 3px; background: var(--paper); font-size: 13px; color: var(--ink-2); }
.c12-chats span:nth-child(2) { margin-left: 26px; } .c12-chats span:nth-child(3) { margin-left: 10px; }
.c12-live { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; font-size: 17px; opacity: 0; transform: translate(-50%, -50%) scale(.8); transition: opacity .3s .3s, transform .35s var(--ease) .3s; box-shadow: 0 8px 24px -8px rgba(34, 197, 94, .7); }
.c12-live::before { content: '✓'; }
.chk:is(:hover, .on) .c12-chats { opacity: 0; transform: scale(.85); }
.chk:is(:hover, .on) .c12-live { opacity: 1; transform: translate(-50%, -50%); }


/* 2. Brand strip (rev 4, 13 Oct polish): icon, then the domain with its DR badge under it.
   Every slot has the same fixed width, sized to the longest name in the pool (bigcommerce.com),
   so a flip never moves the row and the icons stay evenly spaced in every layout:
   6 across from 1240px, 3 x 2 on tablets, 2 x 3 on phones. */
.v5 .won-sec { padding: 40px 0 46px; }
.won { --won-col: 176px; --won-icon: 32px; display: grid; grid-template-columns: repeat(6, var(--won-col)); justify-content: center; gap: 18px 20px; margin: 22px auto 0; padding: 0; list-style: none; perspective: 600px; }
.won > li { display: grid; grid-template-columns: var(--won-icon) max-content; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-content: center; justify-content: start; height: 44px; min-width: 0; white-space: nowrap; transition: transform .32s var(--ease), opacity .32s; }
.won > li img { grid-row: 1 / 3; align-self: center; width: var(--won-icon); height: var(--won-icon); border-radius: 7px; }
.won-n { align-self: end; font-size: 16px; font-weight: 500; line-height: 19px; }
.won > li b { align-self: start; justify-self: start; font: 700 11px/1 var(--mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px 2px; }
.won > li.flip-out { transform: rotateX(90deg); opacity: 0; }
.won > li.flip-in { animation: wonIn .45s var(--ease); }
@keyframes wonIn { from { transform: rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* Rev 5 (Yuri, 13 Oct 15:32): always ONE row. Narrower screens show fewer slots (as many as fit),
   the hidden ones stay out of the rotation; Envato (2nd slot) is always visible. Thresholds = n slots x column + gaps + page padding. */
@media (max-width: 1239px) { .won { --won-col: 152px; --won-icon: 28px; column-gap: 12px; } .won > li { column-gap: 8px; height: 40px; } .won-n { font-size: 14px; line-height: 17px; } .won > li b { font-size: 11px; } }
@media (max-width: 1239px) and (min-width: 1028px) { .won { grid-template-columns: repeat(6, var(--won-col)); } }
@media (max-width: 1027px) and (min-width: 864px) { .won { grid-template-columns: repeat(5, var(--won-col)); } .won > li:nth-child(n+6) { display: none; } }
@media (max-width: 863px) and (min-width: 700px) { .won { grid-template-columns: repeat(4, var(--won-col)); } .won > li:nth-child(n+5) { display: none; } }
@media (max-width: 699px) and (min-width: 536px) { .won { grid-template-columns: repeat(3, var(--won-col)); } .won > li:nth-child(n+4) { display: none; } }
@media (max-width: 535px) {
  .won-sec .wrap { padding: 0 20px; }
  .won { grid-template-columns: repeat(2, var(--won-col)); }
  .won > li:nth-child(n+3) { display: none; }
}
@media (max-width: 355px) {
  .won-sec .wrap { padding: 0 16px; }
  .won { --won-col: 138px; --won-icon: 24px; column-gap: 8px; }
  .won > li { column-gap: 6px; height: 38px; }
  .won-n { font-size: 13px; line-height: 16px; }
}
.won-sec .proof-lab { text-wrap: balance; }
/* Rev 6 (Yuri, 13 Oct 15:43: "the block is not centered"): the visible sites are a centred flex row with even gaps,
   so the row is exactly centred whatever names are showing. When a site flips to a longer or shorter name,
   app.js slides the neighbours to their new places instead of letting them jump. */
.won { display: flex; justify-content: center; flex-wrap: nowrap; column-gap: 32px; }
.won > li { flex: none; }
@media (max-width: 1239px) { .won { column-gap: 28px; } }
@media (max-width: 535px) { .won { column-gap: 24px; } }
@media (max-width: 355px) { .won { column-gap: 16px; } }