/* ==========================================================================
   Home page: only what the verbatim design.css doesn't do. Apart from the AI video
   at the end, none of it changes how the page looks once loaded.
   ========================================================================== */

/* Arial, resized to Plus Jakarta Sans's metrics, so the web font swapping in over
   the hero's large type doesn't move the page (CLS). */
@font-face {
    font-family: "Plus Jakarta Fallback";
    src: local("Arial");
    size-adjust: 105%;
    ascent-override: 98.9%;
    descent-override: 21.1%;
    line-gap-override: 0%;
}
:root { --font: "Plus Jakarta Sans", "Plus Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* The script line is part of the h1, as it always has been for search. That makes
   the two lines children 2 and 3, so their stagger follows them. */
.hero__title { max-width: none; }
.hero__title .hero__script { display: block; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
html.motion .hero__title .line:nth-child(2) .line__inner { animation-delay: .25s; }
html.motion .hero__title .line:nth-child(3) .line__inner { animation-delay: .37s; }
.line__inner { white-space: nowrap; }
/* The hero's copy fades from .01, not the design's 0. Looks the same, but Chrome leaves
   text at opacity 0 out of Largest Contentful Paint, which handed the score to the logo. */
@keyframes hero-fade-counted { from { opacity: .01; transform: translateY(32px); } to { opacity: 1; transform: none; } }
html.motion .hero [data-hero-fade] { animation-name: hero-fade-counted; }


/* Phones: the device tabs scroll sideways. main.js marks which edges have more behind them,
   and that edge fades, as the AI section's suggestion chips do, so the row reads as more to
   swipe rather than as a cut-off card. */
@media (max-width: 959px) {
  .devices__tabs { scroll-snap-type: x proximity; }
  .devices__tabs .device-tab { scroll-snap-align: start; scroll-margin-block: calc(var(--nav-h) + 12px) 12px; }
  .devices__tabs.has-more-end { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
  .devices__tabs.has-more-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
  .devices__tabs.has-more-start.has-more-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
}

/* Open without JavaScript; collapsed only once a click can reopen it. */
html:not(.js) .acc__panel { grid-template-rows: 1fr; }

/* The Sezwan Group card is a link to /sezwan-group, so it answers the pointer. */
a.group { transition: background-color .3s, border-color .3s; }
a.group:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }

/* The EasyPay AI video, opening the AI section ahead of the example chat and its heading
   (owner, 2026-11-06). A poster that becomes the YouTube player on click (video.js). Same type as the
   section's own heading and lede. */
.ai__video { margin-bottom: clamp(64px, 8vw, 112px); scroll-margin-top: var(--nav-h); }
.ai__video .section-head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.ai__video .section-title { font-size: var(--text-h2); color: var(--color-text-heading); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.ai__video .section-sub { margin-top: 22px; font-size: var(--text-lede); line-height: 1.6; color: var(--text); text-wrap: pretty; }
.video-frame { position: relative; max-width: 980px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); background: var(--mist); }
.video-facade, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { display: block; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .6s var(--ease); }
.video-facade:hover img { transform: scale(1.02); filter: brightness(.85); }
.video-facade-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; padding-left: 3px; border-radius: 50%; color: var(--navy-950); background: linear-gradient(100deg, #6fe3f0 0%, var(--cyan) 45%, #3fb6ff 100%); box-shadow: 0 12px 40px rgba(0, 40, 80, .35); transform: translate(-50%, -50%); transition: transform .5s var(--ease); }
.video-facade-play svg { width: 34px; height: 34px; }
.video-facade:hover .video-facade-play, .video-facade:focus-visible .video-facade-play { transform: translate(-50%, -50%) scale(1.08); }
@media (max-width: 576px) { .video-facade-play { width: 64px; height: 64px; } .video-facade-play svg { width: 26px; height: 26px; } }

/* The problem section's progress (owner, 2026-11-06): a vertical rail to the right of the cards,
   not the design's short line under the heading, and brighter, so it reads as a timeline for the
   four cards. The markup sits after the card list, in the cards' grid cell at its right end; the
   list gives up room for it. main.js scales the bar on Y to match. Wide screens only, as in the design. */
@media (min-width: 960px) {
  .problem__intro { grid-column: 1; grid-row: 1; }
  .problem__list { grid-column: 2; grid-row: 1; margin-right: 64px; }
  .problem__progress {
    grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin: 0;
    flex-direction: column; gap: 14px;
    font-size: var(--text-xl); font-weight: 800; color: rgba(226,238,250,.8);
  }
  .problem__progress span:first-child { color: var(--cyan); text-shadow: 0 0 18px rgba(83,208,224,.55); }
  .problem__progress i { width: 4px; height: 200px; background: rgba(255,255,255,.2); }
  .problem__progress b {
    background: linear-gradient(180deg, var(--cyan), var(--azure));
    box-shadow: 0 0 14px rgba(83,208,224,.7);
    transform-origin: top; transform: scaleY(.25);
  }
  /* Only the motion timeline moves it. Without it (reduced motion, no JS) the four cards are listed
     at once, so a rail stuck on 01 would only mislead. */
  html:not(.motion) .problem__progress { display: none; }
}

/* "Customizable" on every payslip picture (owner, 2026-11-06): the Day 30 fan and the payday
   payslip. Text over the image, not baked into it, so it stays sharp and is read.
   It sits in the blank band above the payslip's footer. On the payday card it rides in the
   wrapper that tilts, a little forward of the paper. */
.slip-badge {
  position: absolute; z-index: 2; left: 50%; bottom: 16%;
  display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em;
  border-radius: var(--radius-pill); white-space: nowrap;
  font-weight: 800; letter-spacing: -.005em; color: var(--azure);
  background: var(--white); box-shadow: 0 0 0 1px rgba(0, 102, 204, .18), 0 12px 26px -12px rgba(11, 31, 58, .45);
  transform: translateX(-50%);
}
.slip-badge svg { width: 1em; height: 1em; flex: none; }
.story-payslip__card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
/* The wrapper tilts now, not the image, so the image gives up the layer design.css promotes it to. */
.story-payslip__card img { will-change: auto; transform-style: flat; }
.story-payslip .slip-badge { font-size: var(--stage-text-lg); transform: translateX(-50%) translateZ(30px); }
/* The fan's cards are small, so it carries one badge for the stack, just above the cards. The fan's
   box is much taller than they are, so the badge is placed from their height, not the box's: a card
   is 24% of the fan's width and payslip-shaped (2100 x 2975), so about 34% of that width tall. */
.story-fan { container-type: inline-size; }
.story-fan .slip-badge { bottom: calc(24cqi * 2975 / 2100 + 10px); font-size: var(--stage-text-md); }

/* Reading progress (owner, 2026-11-06): a thin bar along the top of the window that fills as the
   reader moves down the page, above the navbar, so it stays in view while the bar hides on the way
   down. main.js sets its scale from the one scroll listener. Empty at the top of the page. */
.page-progress { position: fixed; inset: 0 0 auto; z-index: 101; height: 3px; pointer-events: none; }
.page-progress i {
  display: block; height: 100%;
  background: var(--grad-brand); box-shadow: 0 0 10px rgba(83, 208, 224, .6);
  transform: scaleX(0); transform-origin: left; will-change: transform;
}

/* The hero's fourth card, for the AI Agent (owner, 2026-11-06), in the open top-left spot across
   from the bottom-right one. Its dot is the violet of the design's AI spark (.ai__claim svg). The
   entrance and mouse parallax in main.js take every .chip, so it needs no script of its own. */
.chip--d { top: 2%; left: 4%; }
.chip__dot--ai { background: #8b5cf6; box-shadow: 0 0 0 5px rgba(139, 92, 246, .18), 0 0 18px rgba(139, 92, 246, .8); }