/* Homepage story (meridian-ads-main, Evan picked it 2026-10-05): what we do in one line and the path (build, promote,
   grow), then one chapter per service: a question that pulls you in, one line, one button to that page, one picture.
   Replaces "Build your plan" and "Live, not mockups". */
.st { background: #fff; color: #000; padding: 0 0 clamp(60px, 6vw, 90px); }   /* close under the hero (Evan, 2026-10-05) */
.st-in { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 40px); }
.st-h { margin: 0; max-width: 1000px; font-size: clamp(44px, 6vw, 96px); line-height: .98; letter-spacing: -.045em; font-weight: 500; }
.st-h span { color: #8e8e93; }
.st-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 6vw, 80px); }
.st-step { padding: 28px; border-radius: 26px; background: #f5f5f7; }
.st-step.go { background: #0b2bd6; color: #fff; }
.st-step small { display: block; margin-bottom: 40px; font-size: 14px; color: #75757a; } .st-step.go small { color: rgba(255,255,255,.7); }
.st-step h3 { margin: 0 0 8px; font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.03em; font-weight: 500; line-height: 1; } .st-step.go h3 { color: #fff; }
.st-step p { margin: 0 0 18px; font-size: 17px; line-height: 1.45; color: #555; } .st-step.go p { color: rgba(255,255,255,.8); }
.st-step a { display: inline-flex; margin: 0 14px 0 0; font-size: 16px; color: #0b2bd6; text-decoration: none; } .st-step a::after { content: "\203A"; margin-left: 5px; }
.st-step a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* one chapter per service: a question that pulls you in, one line, one button, one picture */
.ch { background: #fff; padding: clamp(40px, 5vw, 70px) 0; }
.ch-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ch.flip .ch-row > :first-child { order: 2; }
.ch-k { margin: 0 0 14px; font-size: 15px; color: #6e6e73; }
.ch h2 { margin: 0 0 16px; font-size: clamp(40px, 4.6vw, 72px); line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.ch p { margin: 0 0 30px; max-width: 440px; font-size: 20px; line-height: 1.5; color: #444; }
.ch-btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; background: #000; color: #fff; font-size: 17px; text-decoration: none; transition: transform .2s; }
.ch-btn span { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .ch-btn:hover span { transform: translateX(4px); } .ch-btn:active { transform: scale(.97); }
.ch-pic { border-radius: 26px; overflow: hidden; background: #f5f5f7; aspect-ratio: 4/3; display: grid; place-items: center; }
.ch-pic > img { width: 86%; aspect-ratio: 16/10; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.45); }
.ch-pic > img.ph { width: auto; height: 86%; aspect-ratio: 9/19; border-radius: 30px; }
/* the AI chapter: one simple example of an AI answer, with an empty spot where the business should be */
.ai-ex { width: 84%; padding: 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #ececf0, 0 30px 50px -30px rgba(0,0,0,.35); font-size: 16px; line-height: 1.5; }
.ai-q { margin-left: auto; width: max-content; max-width: 90%; padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: #f2f2f4; }
.ai-a { margin-top: 18px; } .ai-a ol { margin: 10px 0 0; padding-left: 20px; } .ai-a li { padding: 4px 0; }
.ai-gap { display: inline-block; width: 150px; height: 14px; vertical-align: middle; border-radius: 7px; background: repeating-linear-gradient(90deg, #0b2bd6 0 6px, transparent 6px 12px); opacity: .5; }
.ai-tag { display: inline-block; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px; background: #f2f2f4; font-size: 12px; color: #6e6e73; }
@media (max-width: 860px) { .st-path { grid-template-columns: 1fr; } .st-step small { margin-bottom: 18px; } .ch-row { grid-template-columns: 1fr; } .ch.flip .ch-row > :first-child { order: 0; } }

/* Grow box: a white stock-chart arrow behind the text, drawn when the box comes into view (meridian-ads-51 for Evan, 2026-10-05; js/home-steps.js adds .up) */
.st-step.go { position: relative; overflow: hidden; isolation: isolate; }
.st-up { position: absolute; inset: 14% 0 0 0; width: 100%; height: 86%; z-index: -1; overflow: visible; pointer-events: none; }
.st-up path { fill: none; stroke: #fff; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: 1; vector-effect: non-scaling-stroke; }
.st-up { clip-path: inset(-10% 100% -10% -2%); transition: clip-path 1.6s cubic-bezier(.6,.05,.3,1); }   /* drawn left to right, so it climbs */
.st-step.go.up .st-up { clip-path: inset(-10% -4% -10% -2%); }
.st-step.go a { color: #fff; }
/* the arrow runs through the middle, behind the text: a blue halo on the letters keeps them readable where it crosses */
.st-step.go :is(small, h3, p, a) { position: relative; -webkit-text-stroke: 7px #0b2bd6; paint-order: stroke fill; }
.st-step.go h3 { -webkit-text-stroke-width: 10px; }
@media (prefers-reduced-motion: reduce) { .st-up { clip-path: none; transition: none; } }
/* tuck under the hero's last screen: its bottom is empty white below the sources table (meridian-ads-51 for Evan, 2026-10-05) */
@media (min-width: 768px) { .st { margin-top: calc(-1 * max(0px, 50vh - 330px)); position: relative; } }
/* Chapter buttons (Evan picked B, 2026-10-05): a big blue pill with a white arrow circle, a true one-line reason under it.
   Idle loop (Evan picked the text roll, reversed): every few seconds the label rolls down and the same words drop in
   from above, then the arrow taps forward. The picture also links to the page. */
.ch .ch-btn { position: relative; height: 66px; padding: 0 34px; gap: 14px; background: #0b2bd6; font-size: 19px; box-shadow: 0 18px 34px -16px rgba(11, 43, 214, .7); transition: background .25s, transform .2s; }
.ch .ch-btn span { display: grid; place-items: center; width: 34px; height: 34px; margin-right: -18px; border-radius: 50%; background: #fff; color: #0b2bd6; animation: ch-tap 3.4s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.ch .ch-btn .rl { display: block; height: 1.3em; line-height: 1.3em; overflow: hidden; font-style: normal; }
.ch .ch-btn .rl b { display: block; font-weight: 500; transform: translateY(-1.3em); animation: ch-roll 3.4s cubic-bezier(.7, 0, .3, 1) infinite; }
.ch .ch-btn .rl i { display: block; font-style: normal; }
@keyframes ch-roll { 0%, 55% { transform: translateY(-1.3em); } 75%, 100% { transform: none; } }
@keyframes ch-tap { 0%, 76% { transform: none; } 84% { transform: translateX(6px); } 92%, 100% { transform: none; } }
.ch .ch-btn:hover { background: #0822b0; } .ch .ch-btn:hover span { animation: none; transform: translateX(6px); }
.ch-perk { display: block; margin-top: 12px; font-size: 15px; color: #6e6e73; }
a.ch-pic { color: inherit; } a.ch-pic > * { transition: transform .8s cubic-bezier(.22, 1, .36, 1); } a.ch-pic:hover > * { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ch .ch-btn span, .ch .ch-btn .rl b { animation: none; } }