/* The homepage round of 2 Nov 2026 (Troy, on his phone: "bland", "flat", "doesn't have enough wow factor", "doesn't paint
   the picture"). Why cards with colour and motion; the creative and busywork pitches as real client work; Real results
   as a race; How it works as a journey; What it costs as cards under the orchard line. Motion stops for Motion: Off. */

/* Why people choose Curveball: each card its own colour, the picture moving as it arrives. */
.home-why .why-card { padding:18px 18px 22px; border:0; box-shadow:0 22px 40px -32px #0d102480; overflow:hidden; }
.home-why .why-card h3 { font-size:clamp(23px,2vw,27px); line-height:1.08; letter-spacing:-.03em; }
.home-why .why-card p { font-size:16px; }
.home-why .why-art { height:128px; border-radius:18px; background:#ffffff8c; position:relative; overflow:hidden; }
.home-why .why-card:nth-child(1) { background:#e9ddff; } .home-why .why-card:nth-child(1) .why-art { background:#d5c2ff; }
.home-why .why-card:nth-child(2) { background:#d9ff8a; } .home-why .why-card:nth-child(2) .why-art { background:#c6ff3d; }
.home-why .why-card:nth-child(3) { background:#ffd9c9; } .home-why .why-card:nth-child(3) .why-art { background:#ffbfa6; }
.home-why .why-card:nth-child(4) { background:#d4ecff; } .home-why .why-card:nth-child(4) .why-art { background:#b6dcff; }
.home-why .why-card:nth-child(5) { background:#27154c; color:#fffdf9; } .home-why .why-card:nth-child(5) .why-art { background:#3a2470; }
.home-why .why-card:nth-child(5) p { color:#dfd4ec; }
.home-why .why-card:nth-child(6) { background:#fff1b8; } .home-why .why-card:nth-child(6) .why-art { background:#ffe27a; }
.home-why .why-card .btn { border-color:var(--ink); }
.home-why .why-card::before { top:28px; left:30px; }
/* Arrival: the picture's pieces pop in, one after another. */
@keyframes why-pop { 0% { opacity:0; transform:translateY(14px) scale(.8); } 70% { opacity:1; transform:translateY(-3px) scale(1.04); } 100% { opacity:1; transform:none; } }
@keyframes why-stamp { 0% { opacity:0; transform:scale(2.2) rotate(-14deg); } 60% { opacity:1; transform:scale(.92) rotate(-8deg); } 100% { opacity:1; transform:scale(1) rotate(-8deg); } }
@keyframes why-float { 50% { transform:translateY(-4px); } }
@keyframes why-blink { 0%,100% { box-shadow:0 0 0 0 currentColor; } 50% { box-shadow:0 0 0 5px transparent; } }
.home-why .why-card.is-in .why-art > * { animation:why-pop .6s var(--settle) both; }
.home-why .why-card.is-in .why-art > *:nth-child(2) { animation-delay:.15s; }
.home-why .why-card.is-in .why-art > *:nth-child(3) { animation-delay:.3s; }
.home-why .why-card.is-in .why-art--free b { animation:why-stamp .7s .55s var(--settle) both; display:inline-block; }
.home-why .why-card.is-in .why-art--seal i { animation:why-stamp .7s .2s var(--settle) both; }
.home-why .why-card.is-in .why-art--check i { animation:why-blink 1.8s 1s ease-in-out infinite; }
.home-why .why-card.is-in .why-art--check .is-green { color:#2bb673; } .home-why .why-card.is-in .why-art--check .is-yellow { color:#f2b705; } .home-why .why-card.is-in .why-art--check .is-red { color:#e5484d; }
.home-why .why-card:nth-child(5) .why-art span { background:#fffdf9; color:var(--ink); }
.home-why .why-art--care span:nth-child(2) { margin-left:22px; } .home-why .why-art--care span:nth-child(3) { margin-left:44px; }
@media (hover:hover) { .home-why .why-card:hover { translate:0 -6px; box-shadow:0 30px 50px -30px #0d102499; } .home-why .why-card:hover .why-art { animation:why-float 1.6s ease-in-out infinite; } }

/* Shared tag for the two pitches' Before and After. */
.study-tag { position:absolute; z-index:3; top:12px; left:12px; padding:6px 10px; border-radius:999px; background:#0d1024d9; color:#fffdf9; font:600 10px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.study-tag--live { background:var(--lime); color:var(--ink); }
.study-tag--live::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#1a9b55; vertical-align:middle; animation:why-blink 1.6s ease-in-out infinite; color:#1a9b55; }

/* Creative, every time: Bee's flat Wix gallery, then her live palette. The tag sits on a bar of its own above the site,
   and the site is shown a little zoomed out so the palette's pans are in view (on a desktop, her desktop layout). */
.palette-study { --s:.62; position:absolute; inset:0; background:#1b1230; }
.palette-study__before, .palette-study__after { position:absolute; inset:40px 0 0; margin:0; overflow:hidden; }
.palette-study__before img { width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(.75); }
.palette-study__after { background:#f6efe6; }
.palette-study__after::before { content:"Opening Bee’s live site…"; position:absolute; inset:0; display:grid; place-items:center; font:600 13px/1.4 var(--font-body); color:#8b7a6b; }
.palette-study__after iframe { position:relative; display:block; width:calc(100% / var(--s)); height:calc(100% / var(--s)); border:0; transform:scale(var(--s)); transform-origin:0 0; }
.palette-study .study-tag { top:9px; }
@media (max-width:560px) { .palette-study { --s:.74; } }
.palette-study [hidden] { display:none !important; }

/* Software that does the busywork: a basic form, then VCE's booking on a phone. */
.booking-study { position:absolute; inset:0; background:#eef0f4; }
.booking-study [hidden] { display:none !important; }
.booking-study__before { position:absolute; inset:0; display:grid; place-items:center; padding:46px 18px 18px; background:#ece6f6; }
.plain-form { width:min(330px,100%); padding:0 0 14px; border-radius:8px; background:#fff; border-top:9px solid #6b4bb3; box-shadow:0 2px 6px #0000001f; font:400 13px/1.4 Arial, sans-serif; color:#202124; }
.plain-form > * { margin:0 16px; }
.plain-form__title { padding-top:14px; font-size:20px; }
.plain-form__req { margin-top:4px; color:#d93025; font-size:11px; }
.plain-form__field { display:grid; gap:6px; margin-top:12px; font-size:12px; }
.plain-form__field i { display:block; width:62%; height:1px; background:#9aa0a6; margin-top:12px; }
.plain-form__choice { display:grid; gap:5px; margin-top:12px; font-size:12px; }
.plain-form__choice span { display:flex; align-items:center; gap:8px; color:#3c4043; }
.plain-form__choice span::before { content:""; width:11px; height:11px; border-radius:50%; border:1.5px solid #5f6368; }
.plain-form__send { display:inline-block; margin-top:14px; padding:7px 16px; border-radius:4px; background:#6b4bb3; color:#fff; font-size:12px; }
.booking-study__line { position:absolute; left:0; right:0; bottom:12px; margin:0; text-align:center; font:600 13px/1.3 var(--font-body); color:#5b5470; }
.booking-study__after { position:absolute; inset:0; background:radial-gradient(70% 90% at 20% 30%,#ffe7a8,transparent 60%),radial-gradient(70% 80% at 90% 90%,#c9b6ff,transparent 60%),#f4ecdf; }
.booking-study__stage { position:absolute; inset:0; display:flex; align-items:center; gap:clamp(14px,3vw,34px); padding:44px clamp(14px,4vw,48px) 14px; }
.booking-study__phone { flex:none; height:100%; aspect-ratio:600/1298; padding:6px; border-radius:26px; background:#121327; box-shadow:0 26px 50px -22px #121327cc; }
.booking-study__picks { flex:1; min-width:0; }
.booking-study__phone video { display:block; width:100%; height:100%; object-fit:cover; border-radius:20px; background:#fff; }
.booking-study__picks { list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:pick; }
.booking-study__picks li { counter-increment:pick; display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:14px; background:#fffdf9; color:var(--ink); font:700 clamp(13px,1.4vw,16px)/1.2 var(--font-display); box-shadow:0 12px 24px -18px #0d102499; opacity:0; transform:translateX(16px); animation:pick-in .5s var(--settle) forwards; }
.booking-study__picks li::before { content:counter(pick); display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--lime); font:700 12px/1 var(--font-mono); }
.booking-study__picks li:nth-child(2) { animation-delay:2.4s; } .booking-study__picks li:nth-child(3) { animation-delay:7.4s; } .booking-study__picks li:nth-child(4) { animation-delay:12.4s; }
@keyframes pick-in { to { opacity:1; transform:none; } }
@media (max-width:560px) {
  .booking-study__stage { gap:12px; padding:42px 12px 12px; }
  .booking-study__picks li { padding:8px 10px; font-size:12px; gap:8px; }
  .booking-study__picks li::before { width:22px; height:22px; font-size:11px; }
  .plain-form__title { font-size:17px; }
}

/* Real results: a race on each phone test. */
.home-wins { position:relative; overflow:hidden; padding:clamp(56px,4.5vw,72px) 0 clamp(48px,4vw,64px); background:radial-gradient(60% 70% at 85% 0%,#7a3bff59,transparent 60%),radial-gradient(50% 60% at 0% 100%,#ff6a3d33,transparent 60%),#160d33; color:#fffdf9; }
.home-wins .h2 { color:#fffdf9; } .home-wins .h2 em { font-family:var(--font-aside); font-weight:400; color:var(--lime); }
.wins { list-style:none; margin:clamp(26px,4vw,44px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.win { display:grid; gap:12px; align-content:start; padding:22px; border-radius:24px; background:#ffffff0f; border:1px solid #ffffff1f; }
.win__who { display:flex; align-items:center; gap:10px; margin:0; font:600 14px/1.2 var(--font-body); color:#dfd4ec; }
.win__who span { display:grid; place-items:center; width:64px; height:40px; padding:6px; border-radius:10px; background:#fffdf9; flex:none; }
.win__who img { width:100%; height:100%; object-fit:contain; }
.win__race { display:grid; gap:8px; margin-top:6px; }
.win__bar { position:relative; display:block; height:26px; border-radius:8px; background:#ffffff14; overflow:hidden; }
.win__bar i { position:absolute; inset:0 auto 0 0; width:var(--w,100%); border-radius:inherit; }
.win__bar--old i { background:linear-gradient(90deg,#ff6a3d,#ff2d95); }
.win__bar--new i { background:var(--lime); }
.win__bar em { position:relative; display:block; padding:0 10px; font:700 11px/26px var(--font-mono); font-style:normal; letter-spacing:.04em; color:#160d33; white-space:nowrap; }
/* The new bar is short: its label sits just past it, on the track. */
.win__bar--new em { position:absolute; top:0; left:var(--w,20%); color:#e9e2f7; }
.win__big { margin:6px 0 0; font:800 clamp(64px,7vw,96px)/.9 var(--font-display); letter-spacing:-.05em; color:var(--lime); }
.win__big small { margin-left:6px; font-size:.4em; letter-spacing:0; color:#fffdf9; }
.win__line { margin:0; font-size:16px; color:#dfd4ec; }
.win__steps { list-style:none; display:flex; gap:6px; margin:6px 0 0; padding:0; }
.win__steps li { flex:1; padding:7px 0; border-radius:8px; background:#ffffff14; text-align:center; font:700 12px/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:#dfd4ec; }
.win__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; }
.win__foot .results-note { margin:0; color:#b9acd6; font-size:13px; }
/* The race runs once the card is on screen: the old site crawls, the new one is already there. */
.motion-on .win .win__bar i { transition:width 2.4s cubic-bezier(.3,.1,.2,1); }
.motion-on .win .win__bar--new i { transition-duration:.55s; transition-delay:.2s; }
.motion-on .win:not(.is-in) .win__bar i { width:0; }
.motion-on .win.is-in .win__steps li { animation:step-lit .4s var(--settle) both; }
.motion-on .win.is-in .win__steps li:nth-child(1) { animation-delay:.2s; } .motion-on .win.is-in .win__steps li:nth-child(2) { animation-delay:.7s; } .motion-on .win.is-in .win__steps li:nth-child(3) { animation-delay:1.2s; }
@keyframes step-lit { to { background:var(--lime); color:var(--ink); } }
.win.is-done .win__steps li { background:var(--lime); color:var(--ink); }

/* How it works: one path from hello to live, the Curveball travelling down it as you scroll. */
.journey { padding:clamp(48px,4.5vw,72px) 0 clamp(64px,4.5vw,72px); background:#f5efe6; }
.journey__steps { --p:0; position:relative; list-style:none; margin:clamp(28px,4vw,48px) 0 0; padding:0; display:grid; gap:clamp(22px,3vw,34px); }
.journey__steps::before, .journey__steps::after { content:""; position:absolute; top:10px; bottom:10px; left:27px; width:4px; border-radius:4px; }
.journey__steps::before { background:repeating-linear-gradient(#0d102426 0 8px,transparent 8px 16px); }
.journey__steps::after { bottom:auto; height:calc((100% - 20px) * var(--p)); background:linear-gradient(#2452ff,#7a3bff 40%,#ff2d95 70%,#ff6a3d); }
.journey__ball { position:absolute; z-index:2; left:29px; top:calc(10px + (100% - 20px) * var(--p)); width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; background:#fffdf9 url(/assets/img/logo-mark-160.webp?v=1d735686) center/30px no-repeat; box-shadow:0 8px 18px -6px #7a3bffaa; transform:rotate(calc(var(--p) * 720deg)); }
.journey__step { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr); gap:0 16px; align-items:start; padding-left:0; }
.journey__copy { grid-column:2; grid-row:1; padding-top:4px; }
.journey__art { grid-column:2; grid-row:2; margin-top:12px; }
.journey__n { position:absolute; z-index:3; left:8px; top:0; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--lime); font:700 13px/1 var(--font-mono); box-shadow:0 0 0 5px #f5efe6; }
.journey__copy h3 { margin:0; font:800 clamp(26px,3vw,38px)/1.05 var(--font-display); letter-spacing:-.035em; }
.journey__copy p { margin:8px 0 0; font-size:17px; line-height:1.45; color:#3d3f52; max-width:34ch; }
/* Each step's picture is the real thing (the report, the portal, the emails, a real before and after). */
.journey__art { position:relative; margin:12px 0 0; border-radius:22px; overflow:hidden; background:#efebe4; box-shadow:0 22px 44px -32px #0d102499; }
.journey__art img { display:block; width:100%; height:auto; }
/* Each stop arrives as the Curveball reaches it. */
.motion-on .journey__step { transition:opacity .6s var(--settle), transform .6s var(--settle); }
.motion-on .journey__step:not(.is-in) { opacity:.25; transform:translateY(18px); }
@media (min-width:900px) {
  .journey__steps::before, .journey__steps::after { left:50%; margin-left:-2px; }
  .journey__ball { left:50%; }
  .journey__step { grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); gap:0; align-items:center; }
  .journey__n { left:50%; margin-left:-21px; top:50%; margin-top:-21px; }
  .journey__copy, .journey__art { grid-row:1; margin:0; }
  .journey__copy { grid-column:1; text-align:right; justify-self:end; }
  .journey__copy p { margin-left:auto; }
  .journey__art { grid-column:3; width:min(100%,360px); }
  .journey__step:nth-child(even) .journey__copy { grid-column:3; text-align:left; justify-self:start; }
  .journey__step:nth-child(even) .journey__copy p { margin-left:0; }
  .journey__step:nth-child(even) .journey__art { grid-column:1; justify-self:end; }
}

/* What it costs: the orchard line, then five cards, each with a real picture. */
.pricing__orchard-line { margin:14px 0 0; font:700 clamp(20px,2.2vw,27px)/1.2 var(--font-display); letter-spacing:-.02em; color:var(--ink); text-align:center; }
.pricing__orchard-line em { font-family:var(--font-aside); font-weight:400; color:#6b32c2; }
.price-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.price-card { position:relative; display:grid; align-content:start; gap:8px; padding:20px; border-radius:22px; background:#fffdf9; border:1px solid #0d10241a; transition:transform .3s var(--settle), box-shadow .3s var(--settle); }
.price-card h3 { margin:4px 0 0; font:800 22px/1.1 var(--font-display); letter-spacing:-.03em; }
.price-card h3 a { color:inherit; text-decoration:none; }
.price-card h3 a::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.price-card p { margin:0; color:#4f5266; font-size:15px; line-height:1.45; }
.price-card .price-card__price { justify-self:start; margin-top:6px; padding:7px 12px; border-radius:999px; background:var(--ink); color:var(--lime); font:700 13px/1 var(--font-mono); }
.price-card__pic { position:relative; display:block; aspect-ratio:16/10; margin:-8px -8px 6px; border-radius:16px; overflow:hidden; background:#efebe4; }
.price-card__pic img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .5s var(--settle); }
.price-card__pic--card { display:grid; place-items:center; background:radial-gradient(70% 80% at 50% 40%,#fff8d6,#f3e3a6); }
.price-card__pic--card img { width:74%; height:auto; filter:drop-shadow(0 14px 14px #7a520055); transform:rotate(-5deg); }
.price-card__pic--fan { background:radial-gradient(70% 80% at 50% 40%,#f4effc,#e3dbf3); }
.price-card__pic--fan img { position:absolute; left:50%; top:50%; width:56%; height:auto; filter:drop-shadow(0 10px 10px #0d102440); }
.price-card__pic--fan img:nth-child(1) { transform:translate(-86%,-58%) rotate(-12deg); }
.price-card__pic--fan img:nth-child(2) { transform:translate(-50%,-52%) rotate(-2deg); }
.price-card__pic--fan img:nth-child(3) { transform:translate(-14%,-44%) rotate(9deg); }
@media (hover:hover) { .price-card:hover .price-card__pic:not(.price-card__pic--fan):not(.price-card__pic--card) img { transform:scale(1.04); } .price-card:hover .price-card__pic--card img { transform:rotate(-2deg) scale(1.05); } }
.price-card--hero { grid-column:1/-1; background:radial-gradient(70% 120% at 100% 0%,#7a3bff66,transparent 60%),#27154c; color:#fffdf9; border-color:#27154c; }
.price-card--hero p { color:#dfd4ec; }
.price-card--hero .price-card__pic { aspect-ratio:16/8; }
.price-card--hero .price-card__price { background:var(--lime); color:var(--ink); font-size:15px; }
.price-card__flag { position:absolute; top:18px; right:18px; padding:7px 12px; border-radius:999px; background:var(--coral); color:var(--ink); font:700 12px/1 var(--font-body); transform:rotate(3deg); }
.price-card--gold { background:linear-gradient(160deg,#fff4c4,#fffdf9 70%); }
@media (hover:hover) { .price-card:hover { transform:translateY(-5px); box-shadow:0 24px 44px -28px #0d102499; } }
@media (max-width:600px) { .price-cards { grid-template-columns:1fr; } .price-card__flag { position:static; justify-self:start; transform:none; } }

/* Nine more good questions: a round button, not a box. */
.home-faq-more > summary { border-radius:999px; padding:16px 26px; }

/* Motion: Off and reduced motion: everything in place, nothing moving. */
html.reduce-motion .home-why *, html.reduce-motion .booking-study__picks li, html.reduce-motion .journey * , html.reduce-motion .home-wins * { animation:none !important; transition:none !important; }
html.reduce-motion .booking-study__picks li { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .home-why *, .booking-study__picks li, .journey *, .home-wins * { animation:none !important; transition:none !important; } .booking-study__picks li { opacity:1; transform:none; } }
@media (max-width:900px) { .wins { grid-template-columns:1fr; } }
/* The palette pitch's screen is taller, so Bee's pans are in view without scrolling inside her site; its tag sits on the
   bar above the picture. */
.pitch--idea .pitch__screen { height:560px; }
.palette-study { --s:.56; }
.palette-study .study-tag { top:9px; }
.palette-study[data-experiment="rest"] .study-tag--live, .palette-study:not([data-experiment="rest"]) .study-tag:not(.study-tag--live) { display:none; }
@media (max-width:560px) { .pitch--idea .pitch__screen { height:600px; } .palette-study { --s:.66; } }