/* The hero scene. Class names and timings match helios Landing.tsx (.hscene,
   .hsc) so the three product sites read as one family. Identical copies live in
   helio-seo and helio-reach (app/static/scene.css): change both.

   --scene-rgb is the band the scene sits on. The footage dissolves INTO that
   colour at every edge instead of sitting in a box, and the cards are tinted
   with it, so set it to the hero's own ground or the edges show. */
.hscene{--scene-rgb:22,24,28;--scene-accent:#f5c877;position:relative;aspect-ratio:16/10;color:#fff}
.hscene-bg{position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 48%,#000 34%,rgba(0,0,0,.55) 62%,transparent 92%);
  mask-image:radial-gradient(ellipse 62% 66% at 50% 48%,#000 34%,rgba(0,0,0,.55) 62%,transparent 92%)}
.hscene-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.72) brightness(.9) contrast(1.04)}
.hscene-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(var(--scene-rgb),.16) 0%,rgba(var(--scene-rgb),.48) 55%,rgba(var(--scene-rgb),.72) 100%),
  linear-gradient(180deg,rgba(var(--scene-rgb),.45) 0%,rgba(var(--scene-rgb),.05) 35%,rgba(var(--scene-rgb),.35) 100%)}
.hscene-cap{position:absolute;left:18px;top:14px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hscene-idx{position:absolute;left:18px;bottom:14px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.62)}
.hscene-stack{position:absolute;left:36%;right:4%;top:12%;display:flex;flex-direction:column;gap:8px}

.hsc{display:block;padding:12px 14px 13px;border-radius:12px;color:#fff;
  background:rgba(var(--scene-rgb),.74);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);
  max-height:0;padding-top:0;padding-bottom:0;margin-top:-10px;overflow:hidden}
.hsc.now,.hsc.past{opacity:1;transform:none;max-height:220px;padding-top:12px;padding-bottom:13px;margin-top:0}
/* A card that has had its moment folds to its title line, like a chat log, so
   the result lands with room to breathe. */
.hsc.past{opacity:.7}
.hsc.past .hsc-steps,.hsc.past small,.hsc.past .hsc-bar{display:none}
.hsc.past .hsc-k{margin-bottom:0}
.hsc.past b{font-size:14px;margin-top:5px}
.hsc-k{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#c4c9d4;margin-bottom:6px;line-height:1.3}
.hsc-av{width:20px;height:20px;border-radius:50%;flex:none;display:block;object-fit:contain}
.hsc-dot{width:8px;height:8px;border-radius:50%;flex:none}
.hsc-dot.red{background:#f0655b;box-shadow:0 0 0 3px rgba(240,101,91,.28)}
.hsc-dot.blue{background:#6f9bff;box-shadow:0 0 0 3px rgba(111,155,255,.28)}
.hsc-dot.green{background:#4ccd84;box-shadow:0 0 0 3px rgba(76,205,132,.28)}
.hsc-dot.amber{background:#f2b53d;box-shadow:0 0 0 3px rgba(242,181,61,.28)}
.hsc-dot.cyan{background:#5fd3e6;box-shadow:0 0 0 3px rgba(95,211,230,.28)}
.hsc b{display:block;font-family:var(--display,'Outfit'),'Instrument Sans',sans-serif;font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:#fff}
.hsc small{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:#d3d7e0}
.hsc-steps{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:13px;line-height:1.35}
.hsc-steps li{display:flex;align-items:flex-start;gap:8px;opacity:0;transform:translateX(-4px)}
.hsc-steps li::before{content:'';flex:none;width:14px;height:14px;margin-top:2px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45)}
.hsc-steps.ticks li::before{border-color:#4ccd84;background:#4ccd84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101216' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.hsc.now .hsc-steps li,.hsc.past .hsc-steps li{animation:hsc-li .4s ease both;animation-delay:calc(.35s + var(--i) * .85s)}
.hsc.past .hsc-steps li{animation-delay:0s}
@keyframes hsc-li{to{opacity:1;transform:none}}
.hsc-bar{display:block;height:3px;margin-top:10px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.hsc-bar::after{content:'';position:absolute;inset:0;width:0;background:var(--scene-accent);border-radius:2px}
.hsc.now .hsc-bar::after{animation:hsc-bar 3.2s cubic-bezier(.3,.6,.4,1) both}
.hsc.past .hsc-bar::after{width:100%}
@keyframes hsc-bar{to{width:100%}}

/* Payoff cards: the result the way the product shows it (the assistant's
   answer, the reach figures), inside the same card as every other beat and
   landing the same way. A white card popping in off the stack looked like it
   came from a different video (Lewis, 15 Sep). Last slot only, so none of the
   folding rules above reach them. */
.hsc.hsc-pay.now{max-height:340px}
.hsc-pbar{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:#c4c9d4}
.hsc-pbar img{width:15px;height:15px;flex:none;display:block}
.hsc-pbar img.inv{filter:brightness(0) invert(1)}
.hsc-pbar em{margin-left:auto;font-style:normal;white-space:nowrap;letter-spacing:0;text-transform:none}
.hsc-pill{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:rgba(76,205,132,.16);border:1px solid rgba(76,205,132,.38);color:#86e3ae}
.hsc-side{font-size:11.5px;font-weight:500;color:#aab1bf}
.hsc-q{margin:0 0 5px;font-family:var(--display,'Outfit'),'Instrument Sans',sans-serif;font-size:16px;font-weight:600;line-height:1.25;color:#fff}
.hsc-a{margin:0;font-size:12.5px;line-height:1.45;color:#d3d7e0}
.hsc-a strong{font-weight:600;color:#fff}
.hsc-cite{display:inline-block;margin-left:3px;padding:2px 4px;border-radius:4px;font-size:10px;font-weight:700;line-height:1;vertical-align:1px;background:rgba(242,181,61,.16);border:1px solid rgba(242,181,61,.42);color:#f5c877}
.hsc-src{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.12);font-size:11.5px;line-height:1.35;color:#aab1bf}
.hsc-src span{display:inline-flex;align-items:center;gap:5px}
.hsc-src i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.hsc-src .you{color:#f5c877;font-weight:600}
.hsc-src .you i{background:#f2b53d}
.hsc-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hsc-nl{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#aab1bf}
.hsc-nn{display:block;margin-top:2px;font-family:var(--display,'Outfit'),'Instrument Sans',sans-serif;font-size:22px;font-weight:600;line-height:1.15;color:#fff;font-variant-numeric:tabular-nums}
.hsc-nd{display:block;font-size:11px;font-weight:600;color:#4ccd84}
.hsc-pfoot{margin:8px 0 0;font-size:12px;line-height:1.4;color:#d3d7e0}
.hsc-pnote{font-weight:600}
@media(max-width:420px){.hsc-pnote{display:none}}

/* The finished post: what one line from the team became. It takes the whole
   stage, because it is the thing worth reading: the folded steps above it clear
   out of the way while it is up, and come back with the next story. */
.hsc.hsc-stage.now{max-height:520px}
.hscene.stage-on .hscene-stack .hsc.past{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-top:-8px;border-width:0;transition:opacity .3s ease,max-height .5s ease,padding .5s ease,margin .5s ease}
.hsc-phead{display:flex;align-items:center;gap:9px;margin:1px 0 8px}
.hsc-phead i{width:30px;height:30px;border-radius:6px;flex:none;display:grid;place-items:center;background:#24324f;border:1px solid rgba(255,255,255,.18);color:#fff;font-style:normal;font-weight:700;font-size:14px;font-family:var(--display,'Outfit'),'Instrument Sans',sans-serif}
.hsc-phead strong{display:block;font-size:13px;font-weight:600;line-height:1.25;color:#fff}
.hsc .hsc-phead small{margin-top:1px;font-size:11.5px;line-height:1.3;color:#aab1bf}
.hsc-pbody p{margin:0 0 5px;font-size:12.5px;line-height:1.45;color:#d3d7e0}
.hsc-pbody p.lead{font-size:13.5px;font-weight:600;color:#fff}
.hsc-pbody p.more{margin-bottom:0;color:#aab1bf}
.hsc-pimg{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:8px;margin:8px 0 6px;border:1px solid rgba(255,255,255,.12)}
.hsc-ptags{margin:0;font-size:12px;line-height:1.4;color:#8fb4ff}
/* A carousel inside the finished post: square slides step past one at a time
   with a counter, and beside them a note of what the deck engine decided. */
.hsc-prow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;margin:9px 0 7px}
.hsc-pdeck{position:relative;width:150px;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0f1420}
.hsc-pdeck-track{display:flex;width:100%;height:100%;transition:transform .55s cubic-bezier(.6,0,.2,1)}
.hsc-pdeck-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block}
.hsc-pdeck-n{position:absolute;right:6px;bottom:6px;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hsc-pdeck-note{display:grid;gap:5px;font-size:12px;line-height:1.35;color:#d3d7e0}
.hsc-pdeck-note strong{font-size:12.5px;font-weight:600;color:#fff}
.hsc-pdeck-note span{position:relative;padding-left:13px}
.hsc-pdeck-note span::before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:50%;background:#f2b53d}
@media(max-width:1180px){.hsc-prow{grid-template-columns:120px minmax(0,1fr)}.hsc-pdeck{width:120px}}
@media(prefers-reduced-motion:reduce){.hsc-pdeck-track{transition:none}}
/* A short scene (358px tall at 1100) cannot hold the tags as well; the post,
   the card and what it did are the parts that prove the point. */
@media(max-width:1180px){.hsc-ptags{display:none}}

/* Below 1180px the scene is short (358px tall at 1100) and a payoff card ran
   the stack 20px past its foot, so cards and gaps tighten here. */
@media(max-width:1180px){.hsc b{font-size:16px}.hsc small{font-size:12px}.hsc-steps{font-size:12px}.hsc-nn{font-size:19px}.hsc.now,.hsc.past{padding-top:10px;padding-bottom:11px}.hscene-stack{gap:6px}}
@media(max-width:1024px){.hscene-stack{left:30%;top:10%}}
/* Phone: a 16:10 frame cannot hold four cards, so the frame takes its height
   from the cards with the footage filling behind. The min-height is the tallest
   the stack gets (three folded cards and one open), so the page below never
   jumps as the cards land. */
@media(max-width:760px){
  .hscene{aspect-ratio:auto;min-height:440px;padding:44px 5% 40px;border-radius:14px;overflow:hidden}
  .hscene-stack{position:relative;left:auto;right:auto;top:auto}
  .hscene-bg{-webkit-mask-image:none;mask-image:none}
  .hscene-cap{left:5%;top:14px}
  .hscene-idx{left:5%;bottom:12px}
  .hscene-shade{background:linear-gradient(180deg,rgba(var(--scene-rgb),.3),rgba(var(--scene-rgb),.8) 55%)}
}
/* Search Console as the product shows it: the figures, the trend drawing in,
   and the searches that brought people in. */
.hsc-spark{display:block;width:100%;height:50px;margin:8px 0 6px}
.hsc-spark .a{fill:rgba(111,155,255,.16)}
.hsc-spark .l{fill:none;stroke:#6f9bff;stroke-width:2;vector-effect:non-scaling-stroke}
.hsc.now .hsc-spark .l{stroke-dasharray:1;stroke-dashoffset:1;animation:hsc-draw 1.6s cubic-bezier(.4,0,.2,1) .2s forwards}
@keyframes hsc-draw{to{stroke-dashoffset:0}}
.hsc-rows{display:grid;border-top:1px solid rgba(255,255,255,.12)}
.hsc-rows div{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.35;color:#d3d7e0}
.hsc-rows .q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsc-rows .c{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.hsc-rows .p{text-align:right;color:#aab1bf;font-variant-numeric:tabular-nums}
/* The finished article on the customer's own site. */
.hsc-aurl{margin:0 0 7px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:11px;color:#aab1bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsc-atitle{margin:0 0 3px;font-family:var(--display,'Outfit'),'Instrument Sans',sans-serif;font-size:16px;font-weight:600;line-height:1.25;color:#fff}
.hsc-aby{margin:0 0 6px;font-size:11.5px;color:#aab1bf}
.hsc-abody{margin:0 0 5px;font-size:12.5px;line-height:1.45;color:#d3d7e0}
.hsc-asub{margin:6px 0 3px;font-size:13px;font-weight:600;line-height:1.3;color:#fff}
.hsc-acta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding:7px 8px 7px 10px;border-radius:8px;background:rgba(242,181,61,.1);border:1px solid rgba(242,181,61,.34);font-size:12px;line-height:1.35;color:#f5d9a0}
.hsc-acta em{flex:none;font-style:normal;font-weight:700;font-size:11.5px;color:#16181c;background:#f5c877;border-radius:999px;padding:4px 11px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.hsc.now .hsc-spark .l{animation:none;stroke-dashoffset:0}}

/* The off-screen copy scene.js lays every beat out on, to find the tallest
   moment. Final sizes only, so nothing on it may animate. */
.hscene.measuring .hsc,.hscene.measuring .hsc *{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
  .hsc,.hsc-steps li,.hsc-bar::after{animation:none!important;transition:none!important}
  .hsc-steps li{opacity:1;transform:none}
}