/* billing.css -- THE BILLING PAGES IN THE LIVING SURFACE (Code B Design; Lane A D64-110, D64-111)

   SERVED ONLY WHILE ROK_MAKEOVER IS ON, as /app/billing.css (execution/engines/routes/makeover_routes.py,
   ASSETS), after /app/tokens.css. Flag off both 404: the ember layer and the mark keep their `hidden`,
   and each page is the plain page, every id and behaviour the same.

   THE SUBSCRIBE PAGE (/billing/subscribe, D64-110; the founder: "old format, no wow factor"): the
   sign-in door's register on the page where a player decides to pay. The mark above the wordmark at
   the door's lockup ratio; the two plans as the pricing page's cards, Companion's gold line and
   Emperor's full gold and glow, under the Monthly / Annual toggle; one gold button per card; Manage
   billing beneath, quieter. A card the player came for (?plan=) wears the glow that means "touch
   this". The embers rise in the gutters beside the column, so none meets a word.

   THE RETURN (/billing/welcome, D64-111): a moment, like the door. The founder-approved still fills
   the screen; the mark over its sky; one line, one gold button into the war room and the three
   things the player now holds over its dark ground, inside a centred column the embers never enter.

   PRESENTATION ONLY: no copy, no field and no behaviour. It loads nothing but the pages' own <img>s.
   tokens.css redefines --ink as the parchment ink, so each page puts intake.css's chrome tokens back
   on its own body. The one continuous motion, the embers, is transform and opacity only and runs only
   under prefers-reduced-motion: no-preference; under reduce, nothing moves and no ember is drawn. A
   button's hover glow eases its box-shadow, as the pricing page's buttons do. */

/* ------------------------------------------------------------------ the ground, both pages */
body:is([data-page="subscribe"], [data-page="subscribed"]) {
  --ink: var(--bone);
  --ink-soft: var(--bone-mute);
  --line: var(--glass-line);
  --bg: var(--g1);
  --card: transparent;
  --accent: var(--gold-hi);
  --accent-ink: var(--g1);
  --col: min(60rem, calc(100vw - 2rem));
  background: radial-gradient(70rem 40rem at 50% -10%, var(--g3), transparent 70%),
              radial-gradient(50rem 30rem at 50% 110%, var(--g2), transparent 70%), var(--g1);
  min-height: 100vh;
  color: var(--bone);
  font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body:is([data-page="subscribe"], [data-page="subscribed"]) :is(header, main, footer) {
  position: relative;
  z-index: 1;
  max-width: var(--col);
}
body:is([data-page="subscribe"], [data-page="subscribed"]) a { color: var(--gold-hi); }
body:is([data-page="subscribe"], [data-page="subscribed"]) :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body:is([data-page="subscribe"], [data-page="subscribed"]) footer a { color: var(--gold); }

/* ------------------------------------------------------------------ the embers, both pages */
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers[hidden] { display: block; }
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers {
  --gut: calc((100vw - var(--col)) / 2);
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers span {
  position: absolute;
  bottom: -8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 8px rgba(240, 215, 158, .75);
  opacity: 0;
}
/* three to a gutter, each lane a share of it and each drift inside it, as the door's */
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers span:nth-child(1) { left: calc(var(--gut) * .22); --dx: calc(var(--gut) * .14); --d: 19s; --l: -4s; }
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers span:nth-child(2) { left: calc(var(--gut) * .5); --dx: calc(var(--gut) * -.12); --d: 23s; --l: -15s; }
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers span:nth-child(3) { left: calc(var(--gut) * .72); --dx: calc(var(--gut) * -.1); --d: 16s; --l: -9s; }
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers span:nth-child(4) { left: calc(100vw - var(--gut) * .78); --dx: calc(var(--gut) * .1); --d: 21s; --l: -12s; }
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers span:nth-child(5) { left: calc(100vw - var(--gut) * .5); --dx: calc(var(--gut) * .12); --d: 17s; --l: -2s; }
body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers span:nth-child(6) { left: calc(100vw - var(--gut) * .25); --dx: calc(var(--gut) * -.14); --d: 24s; --l: -19s; }
@media (prefers-reduced-motion: no-preference) {
  body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers span { animation: bl-ember var(--d) linear var(--l) infinite; }
}
@media (prefers-reduced-motion: reduce) {
  body:is([data-page="subscribe"], [data-page="subscribed"]) .bl-embers[hidden] { display: none; }
}
@keyframes bl-ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .85; }
  70% { opacity: .35; }
  100% { transform: translate(var(--dx), -100vh); opacity: 0; }
}

/* -------------------------------------------- THE ONE LOCKUP, both pages (Lane A D68-34a)
   The founder: "the one that has the name and logo closer together -- the one that should be used everywhere",
   the app included. The account hub's lockup (account_hub.css, .hub-brand) value for value: the mark beside the
   wordmark, 34 px, a .7rem gap, Cinzel 700 at .95rem, .32em, in capitals, in parchment. It replaces the door's
   mark over the wordmark at 4.0x (C3), and on the return D65-52's larger cut of it. Centred, so the wordmark's
   trailing tracking is taken back. */
body:is([data-page="subscribe"], [data-page="subscribed"]) header .sow-lockup { display: flex; align-items: center; justify-content: center; gap: .7rem; }
body:is([data-page="subscribe"], [data-page="subscribed"]) header .sow-lockup .bl-mark[hidden] { display: block; }
body:is([data-page="subscribe"], [data-page="subscribed"]) header .sow-lockup .bl-mark {
  width: 34px; height: 34px; margin: 0; flex: none; filter: drop-shadow(0 0 10px rgba(200, 163, 90, .35));
}
body:is([data-page="subscribe"], [data-page="subscribed"]) header .sow-lockup h1 {
  margin: 0 -.32em 0 0; font: 700 .95rem/1 "Cinzel", serif; letter-spacing: .32em;
  text-transform: uppercase; color: var(--parchment);
}

/* ================================================================== THE SUBSCRIBE PAGE */
body[data-page="subscribe"] header { text-align: center; padding-top: 2.25rem; }
body[data-page="subscribe"] header .sow-lockup .tag { letter-spacing: normal; text-transform: none; }
body[data-page="subscribe"] header .sub { margin-top: .5rem; }
/* the app's shared nav (Lane A D65-80; one partial, tools/app_nav.py): the plans page's way home,
   and the welcome page's; its separators are drawn, never typed, and the page's own link is plain */
body:is([data-page="subscribe"], [data-page="subscribed"]) header .app-nav { margin: .5rem 0 0; color: var(--ink-soft); }
body:is([data-page="subscribe"], [data-page="subscribed"]) header .app-nav a + a::before {
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; vertical-align: middle; margin: 0 .5em 0 .1em; background: var(--ink-soft); }
body:is([data-page="subscribe"], [data-page="subscribed"]) header .app-nav a[aria-current="page"] {
  color: var(--parchment); text-decoration: none; }
body[data-page="subscribe"] h2 { font-family: "Cinzel", serif; font-weight: 700; color: var(--parchment);
  letter-spacing: .06em; text-align: center; font-size: clamp(1.2rem, 3.2vw, 1.5rem); margin: 0 0 1rem; }
body[data-page="subscribe"] .card { border: 0; padding: 0; margin: 1.75rem 0; background: none; }
body[data-page="subscribe"] .card:focus-within { box-shadow: none; }

/* the toggle: the pricing page's two pills, the picked one in gold */
body[data-page="subscribe"] .period { display: flex; justify-content: center; gap: .5rem; border: 0;
  margin: 0 0 .5rem; padding: 0; }
body[data-page="subscribe"] .period legend { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
body[data-page="subscribe"] .period label { position: relative; padding: .4rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--glass-line); color: var(--bone-mute); cursor: pointer; font-size: .95rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
body[data-page="subscribe"] .period input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
body[data-page="subscribe"] .period label:has(input:checked) { border-color: var(--gold); color: var(--parchment);
  box-shadow: var(--glow-soft); }
body[data-page="subscribe"] .period label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
body[data-page="subscribe"] .note { margin: 0 0 1rem; text-align: center; color: var(--bone-mute); font-size: .9rem; }
body[data-page="subscribe"] #signed-out { text-align: center; font-size: .95rem; margin: 0 0 1.1rem; }

/* the two cards, as the pricing page's */
body[data-page="subscribe"] .plan-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 48rem) {
  body[data-page="subscribe"] .plan-cards { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
body[data-page="subscribe"] .plan { background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--r-panel); padding: clamp(1.1rem, 4vw, 1.6rem); display: flex; flex-direction: column;
  gap: .9rem; transition: box-shadow var(--t-mid) var(--ease); }
body[data-page="subscribe"] .plan.companion { border-color: rgba(200, 163, 90, .5); box-shadow: var(--glow-soft); }
body[data-page="subscribe"] .plan.emperor { border-color: var(--gold); box-shadow: var(--glow);
  background: linear-gradient(180deg, rgba(200, 163, 90, .07), transparent 40%), var(--glass); }
body[data-page="subscribe"] .plan[data-picked] { box-shadow: var(--glow); }
body[data-page="subscribe"] .plan h3 { margin: 0; font-family: "Cinzel", serif; font-weight: 700;
  font-size: clamp(1.15rem, 3.2vw, 1.4rem); letter-spacing: .06em; text-transform: none; color: var(--parchment); }
body[data-page="subscribe"] .plan-tag { margin: -.6rem 0 0; color: var(--gold); font-size: .85rem;
  letter-spacing: .12em; text-transform: uppercase; }
body[data-page="subscribe"] .crown { margin: -.4rem 0 0; color: var(--gold-hi); font-family: "Cinzel", serif;
  font-size: .85rem; letter-spacing: .06em; }
body[data-page="subscribe"] .price { margin: 0; font-family: "Cinzel", serif; font-weight: 700;
  color: var(--parchment); font-size: 2.2rem; line-height: 1.1; }
body[data-page="subscribe"] .price .per { font-family: "Albert Sans", system-ui, sans-serif; font-weight: 400;
  font-size: 1rem; color: var(--bone-mute); }
body[data-page="subscribe"] .plan ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column;
  gap: .45rem; flex: 1; color: var(--bone); }
body[data-page="subscribe"] .plan li::marker { color: var(--gold-dim); }
body[data-page="subscribe"] .plan li strong { color: var(--parchment); font-weight: 600; }

/* one gold button per card: the gold is the button, and the glow means "touch this" */
body[data-page="subscribe"] .go { align-self: stretch; padding: .8rem 1.2rem; border: 0; border-radius: var(--r-ctrl);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim));
  color: var(--g1); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 18px rgba(0, 0, 0, .35);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
body[data-page="subscribe"] .go:hover,
body[data-page="subscribe"] .go:focus-visible { box-shadow: var(--glow); }
@media (prefers-reduced-motion: no-preference) {
  body[data-page="subscribe"] .go:active { transform: translateY(1px); }
}
body[data-page="subscribe"] #status { text-align: center; min-height: 1.4em; margin: 1rem 0 0; }
body[data-page="subscribe"] .price-note { text-align: center; }

/* Manage billing, beneath and quieter: a glass plate with an outlined button */
body[data-page="subscribe"] .billing { background: var(--glass); border: 1px solid var(--glass-line);
  border-radius: var(--r-panel); padding: 1.2rem 1.4rem; text-align: center; max-width: 34rem;
  margin-inline: auto; }
body[data-page="subscribe"] .billing h2 { font-size: 1.05rem; margin-bottom: .4rem; }
body[data-page="subscribe"] #manage { background: transparent; color: var(--parchment); border: 1px solid var(--gold-dim);
  border-radius: var(--r-ctrl); padding: .55rem 1.1rem; font-weight: 600;
  transition: box-shadow var(--t-fast) var(--ease); }
body[data-page="subscribe"] #manage:hover,
body[data-page="subscribe"] #manage:focus-visible { box-shadow: var(--glow-soft); }
body[data-page="subscribe"] footer { text-align: center; }

@media (max-width: 520px) {
  body[data-page="subscribe"] header { padding-top: 1.5rem; }
}

/* ================================================================== THE RETURN */
body[data-page="subscribed"] { min-height: 100vh; display: flex; flex-direction: column; padding: 0; }
body[data-page="subscribed"] .bl-hero { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
body[data-page="subscribed"] .bl-hero img { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 38%; }
/* the Welcome door (Lane A D68-48; subscribed.js) lies over the still, framed as it is, and shows once it plays */
body[data-page="subscribed"] .bl-hero video.bl-door { position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%; opacity: 0; }
body[data-page="subscribed"] .bl-hero video.bl-door.on { opacity: 1; }
/* the still's dark ground carries the words: a fall to the page's night at the foot */
body[data-page="subscribed"] .bl-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 11, 22, .94) 0%, rgba(7, 11, 22, .72) 30%, rgba(7, 11, 22, 0) 58%),
              linear-gradient(180deg, rgba(7, 11, 22, .45), transparent 22%); }
body[data-page="subscribed"] .bl-embers { z-index: 1; }
/* the one lockup (above) over the still: the wordmark keeps its shadow so it reads on the sky */
body[data-page="subscribed"] header { text-align: center; padding: 2rem 1rem 0; width: 100%; }
body[data-page="subscribed"] header .sow-lockup h1 { text-shadow: 0 2px 14px rgba(7, 11, 22, .8); }
/* THE TOP BAR (Lane A D68-31, the founder: "the normal top-right menu like the other pages"; it supersedes
   D67-43's nav pill under the wordmark): the advisor's bar, with the shared nav at its left and FD-2's account menu
   at its right, set as the band sets them (11 px Albert Sans, uppercase, .14em, the separators drawn). It stands
   on a plate of the page's night at .8 across the page's top, so the page contrast law (AA everywhere) holds over
   the still's brightest sky: the light ink on that plate laid over pure white stays above 4.5:1. The art is
   untouched below it. */
body[data-page="subscribed"] .bl-top { position: relative; z-index: 2; width: 100%; display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center; gap: .5rem 1.5rem; padding: 12px 1.5rem;
  background: rgba(7, 11, 22, .8); border-bottom: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-page="subscribed"] .bl-top :is(.app-nav, .bl-account) { margin: 0;
  font: 500 11px/1 "Albert Sans", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bone-mute); }
body[data-page="subscribed"] .bl-top .bl-account { margin-left: auto; }
body[data-page="subscribed"] .bl-top :is(.app-nav a, .bl-account a, .bl-account button) { margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--bone-mute); text-decoration: none; }
body[data-page="subscribed"] .bl-top .app-nav a + a::before {     /* the partial's separators are drawn, never typed */
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; vertical-align: middle;
  margin: 0 .55em 0 .1em; background: var(--bone-mute); }
body[data-page="subscribed"] .bl-top :is(a, button):hover,
body[data-page="subscribed"] .bl-top :is(a, button):focus-visible { color: var(--parchment); text-decoration: underline; }
body[data-page="subscribed"] main { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 1.2rem; width: 100%; max-width: 40rem; padding: 2rem 1rem 1rem; text-align: center; }
body[data-page="subscribed"] .moment { margin: 0; font-family: "Cinzel", serif; font-weight: 700;
  color: var(--parchment); font-size: clamp(1.35rem, 4vw, 2rem); line-height: 1.3; letter-spacing: .03em;
  text-shadow: 0 2px 18px rgba(7, 11, 22, .9); text-wrap: balance; }
body[data-page="subscribed"] .go { display: inline-block; padding: .85rem 1.6rem; border-radius: var(--r-ctrl);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim)); color: var(--g1);
  font-weight: 600; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 22px rgba(0, 0, 0, .45);
  transition: box-shadow var(--t-fast) var(--ease); }
body[data-page="subscribed"] .go:hover,
body[data-page="subscribed"] .go:focus-visible { box-shadow: var(--glow); }
/* the three things held: one to a line, each led by a gold lozenge, read as a short list under the button */
body[data-page="subscribed"] .holds { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: .55rem; color: var(--bone); font-size: 1rem; line-height: 1.4; text-align: left;
  text-shadow: 0 1px 10px rgba(7, 11, 22, .9); }
body[data-page="subscribed"] .holds li { display: flex; align-items: baseline; gap: .65rem; }
body[data-page="subscribed"] .holds li::before { content: ""; flex: 0 0 auto; width: .45rem; height: .45rem;
  transform: translateY(-.1rem) rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(200, 163, 90, .6); }
body[data-page="subscribed"] footer { width: 100%; text-align: center; padding: 0 1rem 1.25rem; margin-top: .5rem; }
@media (max-width: 520px) {
  body[data-page="subscribed"] header { padding-top: 1.4rem; }
  /* the band's phone row: both menus on one line at 9 px; the narrowest phones wrap the menu to a second row */
  body[data-page="subscribed"] .bl-top { padding: 10px 1rem; column-gap: 1rem; }
  body[data-page="subscribed"] .bl-top :is(.app-nav, .bl-account) { font-size: 9px; letter-spacing: .08em; }
  body[data-page="subscribed"] .holds { font-size: .95rem; }
  body[data-page="subscribed"] .bl-hero img { object-position: 50% 40%; }
  body[data-page="subscribed"] .bl-hero video.bl-door { object-position: 50% 40%; }
}
@media (max-width: 21rem) {
  body[data-page="subscribed"] .bl-top { padding-inline: .75rem; }
  body[data-page="subscribed"] .bl-top :is(.app-nav, .bl-account) { letter-spacing: .02em; }
}