/* Nova "Our card" page — site/card.ejs + js/nova/nova-card.js. Phone layout: nova-mobile.css.
   One lit object (the card) carries the page; everything below is type and spacing, no boxes. */
.cd {
  --cd-teal: #22d3c5;          /* the card's own edge light, top-left of the render */
  --cd-gap: 128px;             /* between sections */
  width: 100%; max-width: 1168px; min-width: 0; margin: 0 auto; padding: 24px 24px 112px; box-sizing: border-box;
}
/* The hero's light runs edge to edge of the window; the page clips it sideways instead of .cd,
   so it is not cut at the content column. */
body.cd-page { overflow-x: clip; }
html:has(> body.cd-page) { overflow-x: clip; }

/* ================= Hero ================= */
/* First screen (same scheme on desktop and phone): the title with its "coming soon" line, the card on its
   pedestal, then the marks in a straight row with the "How it works" button under them. The title sits
   halfway between the header and the card (nova-card.js). The lower --cd-sink of the picture (the faded foot
   of the pedestal) runs under the row of marks.
   --cd-card-w is the picture's width: as large as the window height allows once the header (57), page
   padding (24), title with room for its coming-soon line (124), marks + button (188) and the free space around the title (~110) are taken off,
   with 0.779 - 0.14 = 0.639 of the width showing; at most 1000px. */
.cd-hero {
  min-width: 0; width: 100%;
  --cd-card-w: min(1000px, 100vw - 48px, (100vh - 503px) / .639);
  --cd-card-w: min(1000px, 100vw - 48px, (100svh - 503px) / .639);
  --cd-sink: calc(var(--cd-card-w) * .14);
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: calc(100vh - 81px); min-height: calc(100svh - 81px);
}

/* All of the room light (the wash, the teal / green spill to both sides, the beam and the halo behind the
   card) is one pre-rendered picture, card-glow.webp: 3.5 x 1.8 card widths, the card's centre at 50% / 77.78%,
   fading to the page colour at the foot of the pedestal. CSS gradients are drawn in 8-bit without dithering
   and showed rings on this dark ground; the picture carries a +-1.5 level dither in its colour instead.
   The clip box lives in the stage: it spans the window, reaches up past the header and ends at the foot of
   the picture (where the light has already faded), so the light follows the card wherever it stands. */
.cd-glow { position: absolute; z-index: -1; left: 50%; width: 100vw; top: -100vh; bottom: 0; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
.cd-glow::before {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--cd-card-w) * -.0105);
  width: calc(var(--cd-card-w) * 3.5); height: calc(var(--cd-card-w) * 1.8); transform: translateX(-50%);
  background: url("/public/img/nova/card-glow.webp") center / 100% 100% no-repeat;
}

/* The marks take the free space above the card and sit in its middle. */
.cd-arc-zone { order: 3; flex: none; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; margin-top: auto; padding: 8px 0 40px; }

.cd-stage { position: relative; width: var(--cd-card-w); flex: none; align-self: center; margin-inline: calc((100% - var(--cd-card-w)) / 2); margin-bottom: calc(var(--cd-sink) * -1); }
.cd-stage__card { display: block; }
/* The top 2.4% fades in (the render's faint halo over the card is cut off at the picture's edge and showed as
   a thin line). The pedestal sinks into the page: the picture itself fades out towards its foot, gone by 83% - the
   fold line - so the pedestal's lower body (streaks in the render) never shows when scrolling; (a mask, not an overlay -
   an overlay or backdrop blur leaves the edge of its own box visible on the lit background). */
.cd-stage__card img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 2.4%, #000 66%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.42) 74%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.05) 81%, transparent 83%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 2.4%, #000 66%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.42) 74%, rgba(0,0,0,.18) 78%, rgba(0,0,0,.05) 81%, transparent 83%);
}

.cd-head { position: relative; margin: auto 0 64px; }
/* Hidden until nova-card.js has put it in place (no jump on reload); shown anyway after 1.5s if the
   script never runs. */
.cd-js .cd-head:not(.is-placed) { visibility: hidden; animation: cd-head-fallback 0s 1.5s forwards; }
@keyframes cd-head-fallback { to { visibility: visible; } }
/* The headline sits on a rounded pane of frosted glass tinted with the card's edge light (teal -> lime). */
.cd-title {
  display: inline-block; padding: 14px 36px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 211, 197, .13), rgba(255, 255, 255, .05) 50%, rgba(163, 230, 53, .11));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.cd-title { margin: 0 auto; white-space: nowrap; font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -.035em; color: var(--bone); }
/* "Coming soon", written in the card's edge light: the same teal -> green -> lime run as the glowing rim
   of the card below it, so the line reads as light from the card, not as a label. */
.cd-soon {
  position: absolute; left: 0; right: 0; top: 100%; width: max-content; margin: 14px auto 0;
  font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.025em;
  background: linear-gradient(90deg, #2ee6d6 0%, #34d67a 50%, #b8f04a 100%); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.cd-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 32px; border: 0; border-radius: var(--radius);
  background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.cd-btn:hover { background: var(--btn-hover); color: var(--btn-ink); }
.cd-btn:active { transform: scale(.98); }
.cd-btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.cd-btn:disabled { opacity: .6; cursor: default; }
/* "How it works": opens the plans, which are hidden until then. */
.cd-how { gap: 8px; height: 44px; padding: 0 8px; background: none; color: var(--bone); font-weight: 500; transition: color .15s ease; }
.cd-how:hover { background: none; color: var(--stone); }
.cd-plans[hidden] { display: none; }
#cd-plans-h { scroll-margin-top: 96px; }

/* The three marks in one straight row under the card. */
.cd-arc { display: flex; align-items: center; justify-content: center; gap: 48px; }
.cd-arc__i { display: block; height: auto; }
.cd-arc__apay { width: 110px; }
.cd-arc__visa { width: 150px; }
.cd-arc__gpay { width: 136px; }

/* ================= Sections ================= */
.cd-sec { padding-top: var(--cd-gap); }
.cd-h2 { margin: 0; max-width: 20ch; font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -.025em; color: var(--bone); text-wrap: balance; }

/* Plans: one comparison, not two tables. No prices or limits are set yet, so no figures: the package names
   are the big type, the differences are drawn - limits as bars (VIP full length, in the card's edge light),
   the fee in words - and what both share is listed once. No lines, no boxes. */
.cd-plans { text-align: center; }
.cd-plans .cd-h2 { margin: 0 auto; }
/* Symmetric about the page centre: two equal columns, everything centred in its column; each row's label
   sits centred over its pair of bars. */
.cd-cmp { max-width: 880px; margin: 56px auto 0; }
.cd-cmp__heads, .cd-cmp__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; }
.cd-cmp__heads { padding-bottom: 40px; }
.cd-cmp__pk { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cd-cmp__name { display: inline-flex; align-items: center; gap: 8px; height: 24px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--stone); }
.cd-cmp__pk.is-vip .cd-cmp__name { color: var(--signal); }
.cd-cmp__name em { margin-left: 4px; padding: 2px 10px; border-radius: 999px; background: var(--panel-2); font-style: normal; font-size: 12px; line-height: 20px; font-weight: 500; color: var(--bone); }
.cd-cmp__price { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -.035em; color: var(--bone); }
.cd-cmp__pk.is-vip .cd-cmp__price {
  background: linear-gradient(90deg, #2ee6d6, #34d67a 55%, #b8f04a); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.cd-cmp__row { row-gap: 14px; padding: 20px 0; }
.cd-cmp__label { grid-column: 1 / -1; font-size: 16px; line-height: 24px; color: var(--stone); }
.cd-cmp__cell { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.cd-cmp__cell b { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--bone); }
.cd-cmp__cell.is-vip b { color: var(--signal); }
/* Both scales are the same length; the fill (--w) shows how far each package goes. */
.cd-cmp__bar { position: relative; display: block; height: 10px; width: 80%; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--bone) 8%, transparent); }
.cd-cmp__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: color-mix(in srgb, var(--bone) 34%, transparent); }
.cd-cmp__cell.is-vip .cd-cmp__bar::before { background: linear-gradient(90deg, #2ee6d6, #34d67a 55%, #b8f04a); }

.cd-both__h { margin: 64px 0 0; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--bone); }
/* Shared features as one centred run. */
.cd-both { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px; max-width: 880px; margin: 24px auto 0; padding: 0; list-style: none; }
.cd-both li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 24px; color: var(--bone); }
.cd-both li svg { flex: none; color: var(--signal); }
@media (prefers-reduced-motion: reduce) {
  .cd-btn { transition: none; }
}