/* EasyAI Rewards site: split stage. Two grounds that hold (paper, ledger), one
   hue as accent in two lightnesses (one per ground), a divider that is the
   chrome. Page-local only; scrollcraft.css is the untouched mechanism. */

:root {
  --paper: #ece4d6;
  --paper-deep: #e2d7c4;
  --paper-ink: #251c17;
  --paper-soft: #5b4d43;
  --stamp: #8a1538;                 /* accent on paper */

  --ledger: #141012;
  --ledger-ink: #f2ece9;
  --ledger-soft: #b4a9a4;
  --accent: #ec7f97;                /* accent on the dark ledger ground */
  --accent-ink: #22070f;
  --pass: #8a1538;

  --sc-canvas: var(--ledger);
  --sc-surface: #1d181a;
  --sc-ink: var(--ledger-ink);
  --sc-ink-soft: var(--ledger-soft);
  --sc-accent: var(--accent);
  --sc-accent-ink: var(--accent-ink);
  --sc-font-display: "Archivo", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --sc-font-text: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --sc-shadow-color: 340 30% 4%;

  --x: 50vw;            /* divider position, px; written by site.js */
  --collapse: 0;        /* 0..1 during the close */
  --col-pad: clamp(1.25rem, 4.4vw, 4.5rem);
}

body { background: var(--ledger); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: 1rem; z-index: 90; padding: .6rem 1rem; background: var(--accent); color: var(--accent-ink); border-radius: 8px; transform: translateY(-200%); transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------- grounds */
.grounds { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ground { position: absolute; inset: 0; }
.ground--paper {
  background:
    radial-gradient(60rem 40rem at 20% 30%, rgb(255 255 255 / .28), transparent 70%),
    var(--paper);
}
.ground--ink {
  background:
    radial-gradient(50rem 40rem at 80% 20%, color-mix(in oklab, var(--pass) 22%, transparent), transparent 70%),
    var(--ledger);
  transform: translate3d(var(--x), 0, 0);
  /* ticket notches along the leading edge */
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) 0 0 / 100% 34px;
          mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) 0 0 / 100% 34px;
  box-shadow: -18px 0 40px -20px hsl(var(--sc-shadow-color) / .5);
}

/* ---------------------------------------------------------------- divider */
.divider { position: fixed; top: 0; bottom: 0; left: 0; width: 0; z-index: 50; transform: translate3d(var(--x), 0, 0); }
.divider__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: radial-gradient(circle, color-mix(in oklab, var(--paper) 55%, transparent) 1.2px, transparent 1.6px) 0 0 / 2px 17px; }
.divider__label { position: absolute; top: 1.4rem; font-family: var(--sc-font-display); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; font-stretch: 112%; }
.divider__label--paper { right: 1.1rem; color: var(--paper-soft); }
.divider__label--ledger { left: 1.1rem; color: var(--ledger-soft); }
.divider__beats { position: absolute; left: 0; top: 50%; translate: -50% -50%; margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.divider__beats a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.divider__beats span { width: 10px; height: 10px; border-radius: 50%; background: var(--ledger); border: 2px solid var(--ledger-soft); transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out); }
.divider__beats a:hover span { transform: scale(1.25); border-color: var(--ledger-ink); }
.divider__beats a[aria-current="step"] span { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }
.divider { opacity: calc(1 - var(--collapse) * 1.4); }

/* ---------------------------------------------------------------- layout */
main { position: relative; z-index: 1; }
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.col { position: relative; padding: clamp(4.5rem, 12vh, 8rem) var(--col-pad) clamp(3rem, 8vh, 5rem); min-width: 0; }
.col--paper { color: var(--paper-ink); padding-inline-end: calc(var(--col-pad) + 9vw); }
.col--paper :focus-visible { outline-color: var(--stamp); }
.col--ledger { color: var(--ledger-ink); padding-inline-start: calc(var(--col-pad) + 2vw); }
.col--mid { display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; }
.col--quiet { display: flex; align-items: center; justify-content: center; }

.display { font-family: var(--sc-font-display); font-weight: 650; font-stretch: 108%; line-height: .98; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.display--hero { font-size: clamp(2.5rem, 4.6vw, 4.9rem); }
.display--lg { font-size: clamp(2.2rem, 3.8vw, 4rem); }
.display--md { font-size: clamp(1.7rem, 2.6vw, 2.7rem); letter-spacing: -0.025em; line-height: 1.04; }
.display em { font-style: italic; font-weight: 700; color: var(--accent); }
.lede { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); line-height: 1.5; max-width: 34ch; margin: 1.1rem 0 0; text-wrap: pretty; }
.col--paper .lede { color: var(--paper-soft); }
.col--ledger .lede { color: var(--ledger-soft); }

.cta {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem; padding: .95rem 1.4rem; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.cta::after { content: ""; width: .5rem; height: .5rem; border: 2px solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: color-mix(in oklab, var(--accent) 86%, white); transform: translateY(-1px); } }
.cta:active { transform: translateY(1px) scale(.98); }
.cta:focus-visible { outline: 2px solid var(--ledger-ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- hero */
.act--hero .split { min-height: 100svh; }
.act--hero .col { display: grid; grid-template-rows: auto 1fr; padding-top: clamp(4.5rem, 13vh, 7.5rem); }
.hero__copy { position: relative; z-index: 3; }
.scene { position: relative; min-height: 18rem; }
.plane { position: absolute; will-change: transform; }

.plane--pad { inset: 18% -10% -20% 4%; border-radius: 6px; rotate: 4deg;
  background: repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in oklab, var(--paper-soft) 16%, transparent) 27px 28px), var(--paper-deep);
  filter: blur(1.2px); opacity: .7; box-shadow: var(--sc-e1); }
.plane--card { left: 2%; top: 22%; rotate: -5deg; }
.plane--pen { left: 22%; top: 58%; width: min(34rem, 44vw); rotate: -13deg; z-index: 4; filter: drop-shadow(0 18px 14px hsl(28 30% 12% / .32)) drop-shadow(0 3px 3px hsl(28 30% 12% / .3)); }
.pen { width: 100%; height: auto; max-width: none; }

.plane--glow { inset: 5% 0 0 10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--pass) 45%, transparent), transparent); filter: blur(30px); opacity: .7; }
.plane--phone { right: 12%; top: 2%; rotate: 5deg; }
.plane--ticket { left: 4%; top: 46%; rotate: -8deg; z-index: 4; }

/* ---------------------------------------------------------------- objects */
.card {
  width: min(22rem, 34vw); aspect-ratio: 1.62; border-radius: 12px; padding: 1.1rem 1.2rem; color: var(--paper-ink);
  background:
    radial-gradient(120% 90% at 0 0, rgb(255 255 255 / .55), transparent 60%),
    #f6f0e4;
  box-shadow: 0 1px 1px hsl(28 30% 20% / .18), 0 12px 24px -8px hsl(28 30% 20% / .35), inset 0 0 0 1px hsl(28 30% 20% / .08);
  display: grid; grid-template-rows: auto 1fr; gap: .8rem;
}
.card__head { display: grid; gap: .1rem; }
.card__name { font-family: var(--sc-font-display); font-weight: 750; font-size: 1.08rem; letter-spacing: -0.01em; font-stretch: 116%; }
.card__rule { font-size: .78rem; color: var(--paper-soft); }
.card__slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; align-content: center; }
.slot { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed color-mix(in oklab, var(--paper-soft) 55%, transparent); position: relative; }
.slot.is-inked::after, .stamp__ink {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2.5px solid var(--stamp); opacity: .86;
  background: radial-gradient(circle, color-mix(in oklab, var(--stamp) 70%, transparent) 0 22%, transparent 24%);
}
.slot.is-inked:nth-child(2n)::after { rotate: 12deg; inset: -3px -1px -1px -3px; }
.slot.is-smudge::after { filter: blur(1.2px); translate: 3px 2px; opacity: .6; }
.slot.is-ghost::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--stamp) 22%, transparent); }

.phone { width: 15.5rem; aspect-ratio: 0.49; border-radius: 2.4rem; padding: .55rem; background: linear-gradient(160deg, #2a2528, #0f0c0d); box-shadow: var(--sc-e3), inset 0 0 0 1px rgb(255 255 255 / .08); }
.phone__screen { height: 100%; border-radius: 1.9rem; background: #0b090a; padding: 2.6rem .7rem .7rem; overflow: hidden; }
.pass { background: var(--pass); color: #fff; border-radius: 1rem; padding: .95rem; display: grid; gap: .55rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18); }
.pass__top { display: flex; align-items: center; gap: .5rem; }
.pass__logo { width: 1.7rem; height: 1.7rem; border-radius: .5rem; display: grid; place-items: center; background: rgb(255 255 255 / .18); font-weight: 700; font-size: .85rem; }
.pass__name { font-weight: 650; font-size: .9rem; flex: 1; }
.pass__kind { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.pass__label { display: block; font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .82); }
.pass__label b { font-variant-numeric: tabular-nums; }
.pass__slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; }
.pass__slots i { aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .38); }
.pass__slots i.is-on { background: #fff; border-color: #fff; }
.pass__row { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.pass__row b { display: block; font-weight: 600; }
.pass__qr { background: #fff; border-radius: .5rem; padding: .45rem; width: 5.6rem; justify-self: center; margin-top: .3rem; }
.pass__qr svg { width: 100%; height: auto; }
.pass__big { font-family: var(--sc-font-display); font-size: 1.25rem; font-weight: 650; line-height: 1.1; }
.pass[lang="ar"] .pass__big, .pass[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--sc-font-text); letter-spacing: 0; }
.pass[lang="ar"] .pass__label { letter-spacing: 0; font-size: .74rem; text-transform: none; }

.ticket {
  display: grid; gap: .1rem; padding: 1rem 1.3rem 1rem 1.6rem; border-radius: 10px; color: var(--paper-ink); min-width: 12.5rem;
  background: radial-gradient(circle at 0 50%, transparent 9px, #fbf6ec 9.5px);
  box-shadow: 0 16px 28px -10px hsl(340 40% 4% / .6), 0 2px 4px hsl(340 40% 4% / .35);
}
.ticket__off { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.03em; color: var(--stamp); line-height: 1; font-stretch: 112%; }
.ticket__what { font-size: .88rem; }
.ticket__code { margin-top: .45rem; padding-top: .45rem; border-top: 1.5px dashed color-mix(in oklab, var(--paper-soft) 50%, transparent); font-size: .66rem; letter-spacing: .12em; font-weight: 600; color: var(--paper-soft); }

/* ---------------------------------------------------------------- cost */
.costs, .answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.costs li { font-size: clamp(1.1rem, 1rem + .6vw, 1.55rem); line-height: 1.35; letter-spacing: -0.012em; max-width: 30ch; padding-left: 2.2rem; position: relative; }
.costs li::before { content: ""; position: absolute; left: 0; top: .42em; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px dashed color-mix(in oklab, var(--stamp) 70%, transparent); }
.answers li { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.5; color: var(--ledger-soft); max-width: 34ch; padding-left: 2.2rem; position: relative; }
.answers li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 3px var(--ledger), 0 0 0 1.5px var(--accent); }

/* ---------------------------------------------------------------- turn */
.act--turn .split { min-height: 72svh; }
.card--still { rotate: -3deg; opacity: .9; }
.turn__line { max-width: 26rem; padding-block: .3em; }

/* ---------------------------------------------------------------- peak */
.peak { overflow: visible; }
.peak__say { font-family: var(--sc-font-display); font-size: clamp(1.4rem, 2.2vw, 2.3rem); font-weight: 600; letter-spacing: -0.022em; line-height: 1.08; max-width: 16ch; margin: 0; text-wrap: balance; }
.peak__paper .peak__say { color: var(--paper-ink); }
.peak__say--ledger { color: var(--ledger-ink); }
.card--peak { width: min(24rem, 32vw); rotate: -2deg; }
.peak__ledger { align-items: flex-start; }
.phone--peak { width: 16rem; rotate: 3deg; }
.pass__name { white-space: nowrap; }
.flight { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.stamp { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.stamp__ink { position: absolute; inset: 0; }
.stamp__dot { position: absolute; inset: 0; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 6px 14px -4px hsl(340 40% 4% / .6); }

/* ---------------------------------------------------------------- ledger */
.act--ledger .split { min-height: auto; }
.col--rows { padding-block: clamp(5rem, 14vh, 9rem); }
.rows { margin: 2.2rem 0 0; display: grid; }
.rows > div { display: grid; gap: .25rem; padding-block: 1.05rem; border-top: 1px solid; }
.col--paper .rows > div { border-color: color-mix(in oklab, var(--paper-ink) 16%, transparent); }
.col--ledger .rows > div { border-color: color-mix(in oklab, var(--ledger-ink) 14%, transparent); }
.rows dt { font-weight: 600; font-size: 1.02rem; }
.rows dd { margin: 0; line-height: 1.55; max-width: 44ch; }
.col--paper .rows dd { color: var(--paper-soft); }
.col--ledger .rows dd { color: var(--ledger-soft); }
.col--paper.col--rows .display, .col--paper.col--rows .rows { opacity: .92; }

/* ---------------------------------------------------------------- language */
.act--lang .split { min-height: 100svh; }
.act--lang .col--ledger { display: flex; flex-direction: column; justify-content: center; }
.lang__paper { font-family: var(--sc-font-display); font-size: clamp(1.2rem, 1.6vw, 1.6rem); color: var(--paper-soft); font-weight: 550; max-width: 14ch; margin: 0; }
.lang__lede { max-width: 40ch; }
.lang__pair { display: flex; gap: 1rem; margin-top: 2.2rem; flex-wrap: wrap; }
.pass--mini { width: 14rem; box-shadow: var(--sc-e2), inset 0 1px 0 rgb(255 255 255 / .18); }
.pass--mini[lang="ar"] { rotate: 2deg; translate: 0 1.2rem; }
.pass--mini[lang="en"] { rotate: -2deg; }

/* ---------------------------------------------------------------- close */
.close__paper { clip-path: inset(-20% max(0px, calc(50vw - var(--x))) -20% -20%); }
.close__paper .card { rotate: -4deg; transform: translate3d(calc(var(--collapse) * -30vw), 0, 0) rotate(calc(var(--collapse) * -10deg)); }
.close__ledger { justify-content: center; }
.close__inner { transform: translate3d(calc(var(--collapse) * -25vw), 0, 0); max-width: 36rem; }
.close .display--lg { max-width: 14ch; }
.cta--close { font-size: 1.08rem; padding: 1.05rem 1.6rem; }
.foot { position: absolute; left: calc(var(--col-pad) + 2vw); right: var(--col-pad); bottom: 1.6rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .85rem; color: var(--ledger-soft);
  transform: translate3d(calc(var(--collapse) * -50vw + var(--collapse) * 0px), 0, 0); }
.foot__mark { font-family: var(--sc-font-display); font-weight: 700; color: var(--ledger-ink); font-stretch: 112%; }

/* ---------------------------------------------------------------- phones */
@media (max-width: 760px) {
  :root { --x: 0px; --col-pad: 1.25rem; }
  .grounds, .divider { display: none; }
  .split { grid-template-columns: 1fr; min-height: 0; }
  .col { padding: 2.6rem var(--col-pad); }
  .col--paper { background: var(--paper); padding-inline-end: var(--col-pad); }
  .col--ledger { background: var(--ledger); padding-inline-start: var(--col-pad); }
  /* the perforation between the two grounds */
  .col--ledger::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 12px; z-index: 5;
    background: radial-gradient(circle at 50% 50%, var(--ledger) 5px, transparent 5.5px) 0 0 / 22px 12px; pointer-events: none; }
  .display--hero { font-size: clamp(2.1rem, 9.6vw, 2.8rem); }
  .display--lg { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .lede { margin-top: .7rem; }

  .act--hero .split { min-height: 0; }
  .act--hero .col { padding-top: 2.4rem; min-height: 50svh; grid-template-rows: auto 1fr; }
  .act--hero .col--paper { padding-top: 3.2rem; }
  .scene { min-height: 11rem; }
  .plane--pad { inset: 10% -30% -10% 20%; }
  .plane--card { left: auto; right: -2%; top: 8%; }
  .card { width: 15.5rem; }
  .plane--pen { left: 8%; top: 52%; width: 18rem; }
  .plane--phone { right: -8%; top: 4%; }
  .phone { width: 11.5rem; }
  .plane--ticket { left: 0; top: 30%; }
  .ticket__off { font-size: 1.5rem; }
  .act--hero .col--ledger .scene { min-height: 14rem; }

  /* pinned stages split top and bottom */
  .split--stage { display: block; height: 100svh; }
  .split--stage > .col { position: absolute; left: 0; right: 0; height: 50%; padding-block: 1.4rem; justify-content: center; gap: .9rem; }
  .split--stage > .col--paper { top: 0; }
  .split--stage > .col--ledger { top: 50%; }
  .costs, .answers { gap: .55rem; }
  .costs li { font-size: 1rem; padding-left: 1.7rem; }
  .costs li::before { width: .95rem; height: .95rem; }
  .answers li { font-size: .92rem; line-height: 1.4; padding-left: 1.7rem; }
  .answers li::before { width: .9rem; height: .9rem; }
  #cost .display--lg { font-size: 1.8rem; }

  .act--turn .split { min-height: 0; }
  .act--turn .col { min-height: 36svh; }
  .card--still { width: 14rem; }

  .peak__say { font-size: 1.3rem; }
  .card--peak { width: 15rem; }
  .peak__paper { align-items: flex-start; }
  .peak__ledger { flex-direction: row !important; align-items: center !important; gap: 1rem !important; }
  .phone--peak { width: 9.8rem; flex: none; }
  .phone--peak .pass__row, .phone--peak .pass__qr { display: none; }
  .peak__say--ledger { font-size: 1.15rem; }

  .col--rows { padding-block: 3rem; }
  .act--lang .split { min-height: 0; }
  .act--lang .col--paper { min-height: 0; padding-block: 2rem; }
  .lang__paper { max-width: none; }
  .pass--mini { width: calc(50% - .5rem); padding: .75rem; }
  .pass__big { font-size: 1rem; }

  /* close: the paper half slides away, the ledger takes the whole stage */
  .close > .col--ledger { top: 0; height: 100%; justify-content: flex-end; padding-bottom: 5.5rem; }
  .close > .col--ledger::before { display: none; }
  .close > .col--paper { z-index: 6; height: 46%; clip-path: none; transform: translate3d(0, calc(var(--collapse) * -102%), 0); box-shadow: 0 10px 30px -10px hsl(340 40% 4% / .6); }
  .close__paper .card { transform: none; rotate: -4deg; }
  .close__inner { transform: none; }
  .foot { left: var(--col-pad); transform: none; bottom: 1.2rem; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ground--ink, .divider, .close__inner, .close__paper .card, .foot { transition: none; }
}

/* passes never overflow their phone */
.phone__screen { min-width: 0; }
.pass { min-width: 0; }
.pass__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .phone--peak { width: 11rem; }
  .phone--peak .phone__screen { padding: 1.8rem .5rem .5rem; }
  .phone--peak .pass { padding: .7rem; gap: .45rem; }
  .phone--peak .pass__slots { gap: .25rem; }
  .peak__say--ledger { max-width: 9ch; }
}
.pass { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .phone--peak .pass__kind { display: none; } }