/* Motion kit for the static compare pages: the same scene the homepage hero
   plays (one story per rival), and the price list that stamps INCLUDED row by
   row. Class names match frontend/src/pages/Landing.tsx so the two stay in step. */
.cmp-scene{margin:26px 0 8px}
.cmp-scene .hscene{border-radius:16px;overflow:hidden;background:#0b1633;aspect-ratio:16/10}
.cmp-scene .hscene-bg{-webkit-mask-image:radial-gradient(ellipse 70% 74% at 50% 48%,#000 40%,rgba(0,0,0,.6) 66%,transparent 96%);mask-image:radial-gradient(ellipse 70% 74% at 50% 48%,#000 40%,rgba(0,0,0,.6) 66%,transparent 96%)}
.cmp-scene .hscene-stack{left:38%;right:5%;top:11%}
.cmp-note{margin:8px 0 0;font-size:12.5px;color:var(--grey)}

/* No box: the footage dissolves into the navy at every edge and is cooled
   toward the palette, so the hero reads as one surface with a scene in it
   rather than a video pasted on ("blend with the background", Lewis, 13 Sep). */
.hscene{position:relative;aspect-ratio:16/10}
.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(.7) brightness(.9) contrast(1.04)}
.hscene-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(16,29,61,.18) 0%,rgba(16,29,61,.5) 55%,rgba(16,29,61,.72) 100%),
  linear-gradient(180deg,rgba(16,29,61,.45) 0%,rgba(16,29,61,.05) 35%,rgba(16,29,61,.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)}
/* The frame bleeds off the right edge on purpose (the footage can); the cards
   cannot, so the stack stops where the pills used to: 24px short of the viewport. */
.hscene-stack{position:absolute;left:36%;right:max(5%,calc(min(56vw,1035px) - 50vw + 69px));top:12%;display:flex;flex-direction:column;gap:8px}
.hsc{display:block;padding:12px 14px 13px;border-radius:12px;color:#fff;
  background:rgba(16,29,61,.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 b{font-size:14px}
.hsc.past .hsc-k{margin-bottom:0}
.hsc.past b{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:#b9c4e4;margin-bottom:6px}
.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)}
.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)}
.hsc b{display:block;font-family:'Outfit','Instrument Sans',sans-serif;font-size:18px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.hsc small{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:#cfd9f4}
.hsc-arrow{font-size:13px;color:#b9c4e4;font-weight:500;margin:0 4px}
.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='%230b1633' 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:#6f9bff;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%}}
@media(max-width:1180px){.hsc b{font-size:16px}.hsc small{font-size:12px}.hsc-steps{font-size:12px}}
@media(max-width:1024px){.hscene-stack{left:34%;top:9%}}
/* Phone: the 16:10 frame cannot hold four cards, so the frame takes its height
   from the cards (the footage fills behind) instead of clipping the last one. */
@media(max-width:760px){.hscene{aspect-ratio:auto;min-height:380px;padding:44px 5% 36px;border-radius:14px;overflow:hidden}.hscene-stack{position:relative;left:auto;right:auto!important;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(16,29,61,.25),rgba(16,29,61,.78) 55%)}}
@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}}

/* Invoice */
.cmp-bill{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:start;margin:28px 0 10px}
.cmp-inv{background:#fff;border:1px solid var(--line);border-radius:16px;padding:40px 24px 22px;box-shadow:0 30px 70px -50px rgba(16,29,61,.4);position:relative;overflow:hidden}
.cmp-inv .stamp{position:absolute;right:-10px;top:10px;transform:rotate(4deg);background:#fdeccf;color:#7a4c00;font-family:'Outfit',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;padding:6px 26px;border-radius:999px}
.cmp-inv .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.cmp-inv .head b{font-family:'Outfit',sans-serif;font-size:17px}
.cmp-inv .head span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.cmp-inv .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px}
.cmp-inv .row .inc{font-weight:700;color:#188a52;font-size:12px;letter-spacing:.05em;white-space:nowrap;opacity:0;transform:scale(1.5) rotate(-6deg)}
.cmp-inv.on .row .inc{animation:cmp-stamp .32s cubic-bezier(.2,.9,.3,1.3) forwards}
.cmp-inv.on .row:nth-child(3) .inc{animation-delay:.15s}.cmp-inv.on .row:nth-child(4) .inc{animation-delay:.3s}.cmp-inv.on .row:nth-child(5) .inc{animation-delay:.45s}.cmp-inv.on .row:nth-child(6) .inc{animation-delay:.6s}.cmp-inv.on .row:nth-child(7) .inc{animation-delay:.75s}.cmp-inv.on .row:nth-child(8) .inc{animation-delay:.9s}.cmp-inv.on .row:nth-child(9) .inc{animation-delay:1.05s}
@keyframes cmp-stamp{to{opacity:1;transform:none}}
.cmp-inv .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px}
.cmp-inv .total b{font-family:'Outfit',sans-serif;font-size:16px}
.cmp-inv .total .amt{font-family:'Outfit',sans-serif;font-size:34px;font-weight:700;color:var(--blue);opacity:0;transform:translateY(6px);transition:opacity .4s ease 1.3s,transform .4s ease 1.3s}
.cmp-inv.on .total .amt{opacity:1;transform:none}
.cmp-inv .total .amt small{font-size:14px;color:var(--grey);font-weight:500;font-family:'Instrument Sans',sans-serif}
.cmp-rival{padding:6px 0 0}
.cmp-rival .k{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin:0 0 8px}
.cmp-rival h3{font-size:22px;line-height:1.2;margin:0 0 10px}
.cmp-rival p{margin:0 0 10px;font-size:15px;line-height:1.55}
@media(max-width:760px){.cmp-bill{grid-template-columns:1fr}.cmp-scene .hscene{aspect-ratio:auto;min-height:380px;padding:44px 5% 36px}.cmp-scene .hscene-stack{position:relative;left:auto;right:auto!important;top:auto}.cmp-scene .hscene-bg{-webkit-mask-image:none;mask-image:none}}
@media(prefers-reduced-motion:reduce){.cmp-inv .row .inc,.cmp-inv .total .amt{opacity:1;transform:none;animation:none;transition:none}}

.hsc-av{width:18px;height:18px;border-radius:50%;background:#f2b53d url("/helio/helio-happy.png") center/cover no-repeat;flex:none}
/* The article stylesheet colours b and small for cream paper; inside the scene they are on navy. */
.cmp-scene .hsc b{color:#fff}
.cmp-scene .hsc small{color:#cfd9f4}
.cmp-scene .hsc-av{background:url("/helio/helio-happy.png") center/contain no-repeat;width:20px;height:20px}