/* Showcase (2026-10-05): real businesses built by WPMaven on the sales pages, so a visitor
   sees what they are paying for (founder: "show real businesses we created ... to MAKE THEM
   BUY"). The real-sites strip and the pays-for-itself chart are the home page's own rules,
   copied unchanged; the hero wall, the portfolio grid and the awards strip are new. */

/* Built with WPMaven: two rows of real sites, drifting in opposite directions */
.bw-rows { display: flex; flex-direction: column; gap: 20px; margin: 34px 0 8px; overflow: hidden;
  /* almost the full window, out of the 1200px column; the white fade stays at both ends */
  width: calc(100vw - 32px); margin-left: calc(50% - 50vw + 16px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.bw-track { display: flex; gap: 20px; width: max-content; padding: 4px 0 10px; animation: bw-left 70s linear infinite; }
.bw-row:nth-child(2) .bw-track { animation-name: bw-right; animation-duration: 76s; }
.bw-rows:hover .bw-track, .bw-rows:focus-within .bw-track { animation-play-state: paused; }
@keyframes bw-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bw-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.bw-card { flex: none; width: 320px; text-decoration: none; color: inherit; display: block; }
.bw-shot { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #f4f4f8;
  box-shadow: 0 0 0 1px rgba(23, 24, 28, .08), 0 12px 28px -16px rgba(23, 24, 28, .35); transition: transform .25s ease, box-shadow .25s ease; }
.bw-shot img { display: block; width: 100%; height: auto; }
.bw-shot .bw-tall { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .25s ease; }
.bw-card:hover .bw-shot, .bw-card:focus-visible .bw-shot { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(106, 75, 255, .35), 0 22px 40px -18px rgba(106, 75, 255, .5); }
.bw-card:hover .bw-tall, .bw-card:focus-visible .bw-tall { opacity: 1; animation: bw-scroll 7s ease-in-out .25s forwards; }
@keyframes bw-scroll { to { transform: translateY(calc(-100% + 200px)); } }
.bw-meta { display: flex; flex-direction: column; gap: 1px; padding: 10px 2px 0; }
.bw-meta strong { font-size: 15px; font-weight: 650; color: #17181C; }
.bw-meta span { font-size: 13.5px; color: #6E7382; }
.bw-card:focus-visible { outline: none; }
.bw-card:focus-visible .bw-shot { outline: 2px solid #6A4BFF; outline-offset: 3px; }
.bw-more { text-align: center; margin: 8px 0 54px; }
.bw-more a { font-weight: 600; color: #6A4BFF; text-decoration: none; }
.bw-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bw-ideas-head { margin-top: 0; }
.bw-ideas-title { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.015em; margin: 0 0 8px; color: #17181C; }
@media (max-width: 640px) { .bw-card { width: 250px; } @keyframes bw-scroll { to { transform: translateY(calc(-100% + 156px)); } } }
@media (prefers-reduced-motion: reduce) {
  .bw-rows { -webkit-mask: none; mask: none; }
  .bw-row { overflow-x: auto; }
  .bw-track { animation: none; }
  .bw-card:hover .bw-tall { animation: none; }
}

/* ── Pays for itself: the home page's chart and WhatsApp panel ── */
/* ── Pays-for-itself: MRR chart + WhatsApp panel ────────────────────
   White, between the operators (n-50-adjacent gray) and the
   agencies section (n-50), keeping the background rhythm. */
.payoff-section { background: var(--n-0, #ffffff); padding: 100px 0; }
.payoff-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.payoff-left, .payoff-right {
    opacity: 0; transform: translateY(30px);
    transition: opacity .6s cubic-bezier(0.72, 0, 0.12, 1), transform .6s cubic-bezier(0.72, 0, 0.12, 1);
}
.payoff-grid.animate-in .payoff-left  { opacity: 1; transform: none; }
.payoff-grid.animate-in .payoff-right { opacity: 1; transform: none; transition-delay: .12s; }
.payoff-chart-card { background: var(--n-25, #FBFBFC); border: 1px solid var(--n-200, #E2E4EA);
    border-radius: var(--r-panel, 20px); padding: 26px 26px 16px; box-shadow: var(--sh-sm); }
.chart-legend { display: flex; gap: 20px; align-items: center; margin: 0 0 14px; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 550; color: var(--n-600, #4A4E5A); }
.chart-legend i { width: 18px; height: 3px; border-radius: 2px; }
.chart-legend .k-mrr  { background: linear-gradient(90deg,#2397A8,#4B8BC4,#8E85C2,#B96FAE,#CC6377,#D06A38); }
.chart-legend .k-cost { background: var(--n-500, #6E7382); }
/* the work key is a block, not a rule: it stands for bars, not a line */
.chart-legend .k-work { width: 10px; height: 10px; border-radius: 2px;
    background: rgba(106, 75, 255, .8); }
.payoff-chart { width: 100%; height: auto; display: block;
    font-family: inherit; font-variant-numeric: tabular-nums; }
.chart-caption { font-size: 11.5px; color: var(--n-500, #6E7382); margin: 10px 0 0; }
/* Draw-in. pathLength=1 on both lines, so dasharray/dashoffset need no
   JS measurement. The cost line stays solid: a dash pattern would
   occupy the same dasharray channel the draw-in animation uses. */
.chart-cost, .chart-mrr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.payoff-grid.animate-in .chart-cost {
    transition: stroke-dashoffset .9s cubic-bezier(0.72, 0, 0.12, 1) .15s; stroke-dashoffset: 0; }
.payoff-grid.animate-in .chart-mrr {
    transition: stroke-dashoffset 1.6s cubic-bezier(0.72, 0, 0.12, 1) .55s; stroke-dashoffset: 0; }
.chart-area { opacity: 0; }
.payoff-grid.animate-in .chart-area { transition: opacity .8s ease 1.7s; opacity: 1; }
.chart-tag, .chart-cross { opacity: 0; transform: translateY(6px) scale(.9);
    transform-box: fill-box; transform-origin: center; }
.payoff-grid.animate-in .chart-tag,
.payoff-grid.animate-in .chart-cross { animation: chartTagIn .45s cubic-bezier(0.72, 0, 0.12, 1) both; }
.payoff-grid.animate-in .tag-0  { animation-delay: .25s; }
.payoff-grid.animate-in .tag-1  { animation-delay: .45s; }
.payoff-grid.animate-in .tag-39 { animation-delay: .70s; }
.payoff-grid.animate-in .tag-69 { animation-delay: 1.05s; }
.payoff-grid.animate-in .chart-cross { animation-delay: 2.15s; }
@keyframes chartTagIn { to { opacity: 1; transform: none; } }
/* Work lane. Money owns the plot above; the bars are deliberately one
   quiet color so they read as a second register of the same picture
   rather than a second thing being measured in money. */
.chart-worklane { font-size: 10.5px; font-weight: 600; fill: var(--n-500, #6E7382); }
.chart-worknum { font-size: 9.5px; font-weight: 600; fill: var(--n-600, #4A4E5A); }
.chart-work rect { fill: rgba(106, 75, 255, .8); }
.chart-work .wk { opacity: 0; transform: translateY(6px);
    transform-box: fill-box; transform-origin: center; }
/* --d per bar, set inline, so the lane fills in left to right once the
   revenue line has finished drawing: work first, then the money it made. */
.payoff-grid.animate-in .chart-work .wk {
    animation: chartTagIn .4s cubic-bezier(0.72, 0, 0.12, 1) both;
    animation-delay: var(--d, 1.9s); }
.chart-pulse { opacity: 0; transform-box: fill-box; transform-origin: center; }
.payoff-grid.animate-in .chart-pulse { animation: chartPulse 2.4s ease-out 2.6s 4; }
@keyframes chartPulse {
    0% { opacity: .5; transform: scale(1); }
    70% { opacity: 0; transform: scale(2.6); }
    100% { opacity: 0; transform: scale(2.6); }
}
.wa-eyebrow { text-align: center; font-size: 11.5px; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--accent, #6A4BFF);
    margin: 0 0 14px; }
.wa-phone { margin: 0 auto; max-width: 330px; background: var(--n-900, #17181C);
    border-radius: 34px; padding: 9px; box-shadow: var(--sh-lg, 0 24px 60px -12px rgba(23,24,28,.28)); }
.wa-shot { display: block; width: 100%; height: auto; border-radius: 26px; }
.wa-caption { text-align: center; font-size: 13.5px; color: var(--n-600, #4A4E5A);
    margin: 18px auto 0; max-width: 320px; line-height: 1.5; }
.payoff-cta { text-align: center; margin-top: 56px; }
@media (max-width: 968px) {
    .payoff-section { padding: 80px 0; }
    .payoff-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 640px) {
    .payoff-section { padding: 60px 0; }
    .payoff-chart-card { padding: 18px 14px 12px; }
    /* At phone width the SVG renders at ~0.5 scale, which turns the
       10.5-unit labels into 5px dots. Axis labels scale up (they have
       room); the price pills duplicate the axis values, so they hide. */
    .payoff-chart .chart-axis text { font-size: 17px; }
    .payoff-chart .chart-tag { display: none; }
    .payoff-chart .chart-cross text { font-size: 16px; }
    /* the counts are the work layer's only readable label, so unlike the
       price pills they scale up instead of hiding, and they scale to the
       same 17 units as the axis: anything smaller and the newest text on
       the card is also the hardest to read on a phone. Measured at 390px
       with 17: adjacent counts keep 30.6 user units of gap, the widest
       one ends at x=636 inside the 640 viewBox, and the lane label ends
       at x=221 with the nearest count 4 units lower, so nothing meets. */
    .payoff-chart .chart-worklane { font-size: 17px; }
    .payoff-chart .chart-worknum { font-size: 17px; }
}
/* Without scripts nothing waits for the reveal */
html:not(.sc-js) .payoff-left, html:not(.sc-js) .payoff-right { opacity: 1; transform: none; }
html:not(.sc-js) .chart-cost, html:not(.sc-js) .chart-mrr { stroke-dashoffset: 0; }
html:not(.sc-js) .chart-area, html:not(.sc-js) .chart-tag, html:not(.sc-js) .chart-cross,
html:not(.sc-js) .chart-work .wk { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .payoff-left, .payoff-right { opacity: 1; transform: none; transition: none; }
  .chart-cost, .chart-mrr { stroke-dashoffset: 0; transition: none; }
  .chart-area { opacity: 1; transition: none; }
  .chart-tag, .chart-cross { opacity: 1; transform: none; animation: none !important; }
  .chart-pulse { animation: none !important; opacity: 0; }
  .chart-work .wk { opacity: 1; transform: none; animation: none !important; }
}

/* ── Sections ── */
.sc-section { padding: 96px 0; background: #FFFFFF; position: relative; }
.sc-section.sc-alt { background: #F8F9FA; }
.sc-head { text-align: center; max-width: 760px; margin: 0 auto 8px; padding: 0 20px; }
.sc-kicker { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5A3FE0; margin: 0 0 12px; }
.sc-head h2 { font-family: var(--font-display); font-weight: var(--sc-title-weight, 800); letter-spacing: var(--sc-title-tracking, -0.02em);
  font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; margin: 0 0 14px; color: #17181C; font-size-adjust: none; }
/* On the pricing pages titles are in the serif, as their other sections */
:root:has(.pricing-hero) { --sc-title-weight: 400; --sc-title-tracking: -0.01em; }
:root:has(.pricing-hero) .sc-head h2 { font-size: clamp(34px, 3.4vw, 46px); }
.sc-head p { font-size: 18px; line-height: 1.6; color: #4A4E5A; margin: 0 auto; }
@media (max-width: 640px) { .sc-section { padding: 64px 0; } .sc-head p { font-size: 16px; } }

/* ── Hero wall: real sites drifting behind the title, veiled so the words stay first ──
   As first shipped. It was dimmed on 2026-10-06 by mistake (the founder's "more subtle" was
   about the home hero's glow) and he found the sites "almost invisible"; do not fade it again. */
.sc-wall-host { position: relative; isolation: isolate; overflow: hidden; }
.sc-wall { position: absolute; left: 0; right: 0; top: 0; height: 720px; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 45%, transparent 82%); mask: linear-gradient(to bottom, #000 0%, #000 45%, transparent 82%); }
.sc-wall-in { position: absolute; left: -12%; right: -12%; top: -70px; display: flex; flex-direction: column; gap: 18px; transform: rotate(-5deg); }
.sc-wall-track { display: flex; gap: 18px; width: max-content; animation: sc-wall-l 150s linear infinite; }
.sc-wall-row:nth-child(2) .sc-wall-track { animation-name: sc-wall-r; animation-duration: 170s; }
.sc-wall-row:nth-child(3) .sc-wall-track { animation-duration: 190s; }
.sc-wall img { display: block; width: 300px; height: 188px; object-fit: cover; object-position: top; border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(23, 24, 28, .06), 0 12px 30px -16px rgba(23, 24, 28, .35); }
.sc-wall::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 58% at 50% 36%, rgba(250, 251, 252, .97) 0%, rgba(250, 251, 252, .92) 55%, rgba(250, 251, 252, .7) 100%); }
@keyframes sc-wall-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sc-wall-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 640px) { .sc-wall img { width: 200px; height: 125px; } .sc-wall::after { background: rgba(250, 251, 252, .88); } }
@media (prefers-reduced-motion: reduce) { .sc-wall-track { animation: none; } }

/* ── Awards strip under a hero lead (the home page's laurels) ── */
.sc-awards { max-width: 900px; margin: 6px auto 40px; text-align: center; }
.sc-awards .sc-awards-lead { font-size: 14px; line-height: 1.5; letter-spacing: .02em; color: #6E7382; margin: 0 auto 14px; max-width: none; }
.laurels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
    justify-content: center; gap: 14px 30px; }
.laurel { display: inline-flex; align-items: center; gap: 4px; color: var(--n-700, #33363F); }
.laurel .lw { width: 17px; height: 36px; flex: none; color: var(--n-400, #9BA0AF); }
.laurel .lw-r { transform: scaleX(-1); }
.laurel span { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.laurel small { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--n-500, #6E7382); }
.laurel b { font-size: 14px; font-weight: 700; color: var(--n-900, #17181C); white-space: nowrap; }
@media (max-width: 640px) {
  .laurels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; }
  .laurel { justify-content: center; }
  .laurel b { font-size: 12.5px; white-space: normal; text-align: center; }
}

/* ── Portfolio: real builds as client businesses; hover scrolls the whole page ── */
.sc-portfolio { list-style: none; margin: 40px auto 0; padding: 0 20px; max-width: 1240px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.sc-pf a { display: block; text-decoration: none; color: inherit; }
.sc-pf-shot { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: #F4F4F8;
  box-shadow: 0 0 0 1px rgba(23, 24, 28, .08), 0 18px 36px -22px rgba(23, 24, 28, .45); transition: transform .25s ease, box-shadow .25s ease; }
.sc-pf-shot img { display: block; width: 100%; height: auto; }
.sc-pf a:hover .sc-pf-shot, .sc-pf a:focus-visible .sc-pf-shot { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(106, 75, 255, .35), 0 24px 44px -22px rgba(23, 24, 28, .5); }
.sc-pf a:hover .sc-pf-shot img, .sc-pf a:focus-visible .sc-pf-shot img { animation: sc-pf-scroll 8s ease-in-out .2s forwards; }
@keyframes sc-pf-scroll { to { transform: translateY(calc(-100% + 300px)); } }
.sc-pf-live { position: absolute; left: 10px; top: 10px; z-index: 1; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #fff;
  background: rgba(23, 24, 28, .82); border-radius: 999px; padding: 4px 10px; }
.sc-pf-meta { display: block; padding: 12px 2px 0; }
.sc-pf-meta strong { display: block; font-size: 16px; font-weight: 650; color: #17181C; }
.sc-pf-meta span { display: block; font-size: 14px; color: #6E7382; margin-top: 2px; }
.sc-pf a:focus-visible { outline: none; }
.sc-pf a:focus-visible .sc-pf-shot { outline: 2px solid #6A4BFF; outline-offset: 3px; }
@media (max-width: 1000px) { .sc-portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .sc-portfolio { gap: 14px; } .sc-pf-meta strong { font-size: 15px; } .sc-pf-meta span { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) { .sc-pf a:hover .sc-pf-shot img { animation: none; } }
.sc-more { text-align: center; margin: 28px 0 0; }
.sc-more a { font-weight: 650; color: #5A3FE0; text-decoration: none; font-size: 16px; }
.sc-more a:hover { text-decoration: underline; text-underline-offset: 3px; }