/* ── THE PAYWALL ─────────────────────────────────────────────────────────────
   src/views/paywall.js draws it; public/js/paywall.js keeps the button's
   words in step with the plan. Breathe's paywall, in YOU.0's dress: full
   screen on a phone, a tall sheet on a desk; one deep ground in the Code's
   own colour; the Code's card floating over its breathing form; the sell as
   shelves of the real things; the plans and the one call to action pinned at
   the bottom. Surfaces paint; glass is only the two controls at the top. No
   shadows. The call to action and the chosen plan's rim are the highlight:
   gradients, light to dark, in the Code's ramp (the YOUNIVERSE blue where
   there is no Code). */

@property --pw-turn { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.pw {
  --pw-bg: #0b1236;
  --pw-accent: var(--ramp-blue-b, #38e1ff);
  --pw-a: var(--ramp-blue-b, #38e1ff);
  --pw-b: var(--ramp-blue-a, #3a66ff);
  /* Dark ink on the YOUNIVERSE ramp; a Code sets the ink its own ramp needs. */
  --pw-ink: #05060b;
  /* One ground for the whole page: the Code's own, deepened. */
  --pw-canvas: color-mix(in srgb, var(--pw-bg) 30%, #05060b);
  --pw-plate: color-mix(in srgb, var(--pw-bg) 16%, #0b0d13);
  --pw-soft: rgba(255, 255, 255, .78);
  --pw-faint: rgba(255, 255, 255, .55);
  --pw-r: 28px;
  --pw-ease: cubic-bezier(.22, 1, .36, 1);
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0;
  width: min(560px, 100vw); height: min(920px, calc(100dvh - 32px));
  max-width: 100vw; max-height: 100dvh;
  background: transparent; color: #f2f4f7; overflow: visible;
}
.pw::backdrop { background: rgba(4, 5, 7, .74); backdrop-filter: blur(14px) saturate(.9); -webkit-backdrop-filter: blur(14px) saturate(.9); }
html:has(.pw[open]) { overflow: hidden; }

.pw__sheet {
  position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  height: 100%; overflow: hidden; border-radius: var(--pw-r);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .24)), var(--pw-canvas);
  border: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-ui);
}
.pw[open] .pw__sheet { animation: pwRise .7s var(--pw-ease) both; }
@keyframes pwRise { from { opacity: 0; transform: translateY(28px) scale(.985); } }
@media (max-width: 640px) {
  .pw { width: 100vw; height: 100dvh; }
  .pw__sheet { border-radius: 0; border: 0; }
  .pw[open] .pw__sheet { animation-name: pwSheet; }
  @keyframes pwSheet { from { transform: translateY(100%); } }
}

/* The two controls at the top: the way in for a member, and the way out.
   The page scrolls up under them into its own ground, so they never sit on
   words. */
.pw__chrome {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 16px 24px;
  background: linear-gradient(180deg, var(--pw-canvas) 55%, color-mix(in srgb, var(--pw-canvas) 0%, transparent));
  pointer-events: none;
}
.pw__chrome > * { pointer-events: auto; }
.pw__pill, .pw__x {
  display: inline-grid; place-items: center; min-height: 36px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: var(--pw-soft);
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
}
.pw__pill { padding: 0 14px; font-size: .6rem; font-weight: 600; letter-spacing: .16em; }
.pw__x { width: 36px; padding: 0; cursor: pointer; }
.pw__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pw__pill:hover, .pw__x:hover { color: #fff; background: rgba(255, 255, 255, .14); }

/* ── The page ────────────────────────────────────────────────────────────── */
.pw__scroll {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(max(14px, env(safe-area-inset-top)) + 44px) 26px 20px; scrollbar-width: none;
}
.pw__scroll::-webkit-scrollbar { display: none; }
.pw__scroll:focus { outline: none; }

.pw__open { display: grid; justify-items: center; text-align: center; }

/* The thing itself, alive: its card floating over its sacred form. */
.pw__art { position: relative; width: min(100%, 340px); height: 272px; display: grid; place-items: center; perspective: 900px; }
.pw__glow {
  position: absolute; inset: 8% 14%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pw-accent) 34%, transparent), transparent);
  animation: pwGlow 6s ease-in-out infinite alternate;
}
@keyframes pwGlow { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.pw__form { position: absolute; inset: -6% 0; display: grid; place-items: center; }
.pw__form .geo { width: 100%; height: 100%; overflow: visible; animation: pwTurn 90s linear infinite; }
.pw__form .geo :is(path, circle, ellipse, line, polygon) { fill: none; stroke: var(--pw-accent); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .34; }
.pw__form .geo :is(.geo__web) { opacity: .14; }
.pw__form .geo :is(.geo__rim) { opacity: .5; }
.pw__form .geo--breathe { animation: pwTurn 90s linear infinite, pwBreathe 7s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes pwTurn { to { rotate: 360deg; } }
@keyframes pwBreathe { from { scale: .95; } to { scale: 1.04; } }
.pw__card {
  position: relative; width: 150px; border-radius: 11px; overflow: hidden;
  transform-style: preserve-3d; animation: pwFloat 9s cubic-bezier(.45, 0, .55, 1) infinite;
  outline: 1px solid rgba(255, 255, 255, .14); outline-offset: -1px;
}
.pw__card--wide { width: 230px; border-radius: 14px; }
/* A display pad is tall (9:16): narrower, so it stands inside the art. */
.pw__card--pad { width: 132px; }
.pw__card img { display: block; width: 100%; height: auto; }
@keyframes pwFloat {
  0%, 100% { transform: translateY(0) rotateX(6deg) rotateY(-12deg) rotateZ(-2deg); }
  50% { transform: translateY(-10px) rotateX(-4deg) rotateY(10deg) rotateZ(1.5deg); }
}

/* The premium mark: YOU.0's plus, filled with a slowly turning ramp. */
.pw__eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .62rem; font-weight: 500; letter-spacing: .24em; color: var(--pw-soft); }
.pw__mark {
  width: 11px; height: 11px; flex: none;
  background: conic-gradient(from var(--pw-turn), var(--pw-a), var(--pw-b), var(--pw-a));
  clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0 60%, 0 40%, 40% 40%);
  animation: pwMark 34s linear infinite;
}
@keyframes pwMark { to { --pw-turn: 360deg; } }

/* Written strongly: rhythm.css sizes every h2 and h3, and loads last. */
.pw .pw__sheet .pw__open h2.pw__title {
  margin: 10px 0 0; max-width: 16ch;
  font-family: var(--font-display); font-weight: 300; text-transform: uppercase;
  font-size: clamp(1.55rem, 6.4vw, 2.1rem); line-height: 1.1; letter-spacing: .06em; text-wrap: balance;
}
.pw__run { background: linear-gradient(90deg, var(--pw-a), var(--pw-b)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pw__sub { margin: 12px 0 0; max-width: 32ch; font-size: .9rem; font-weight: 300; line-height: 1.6; color: var(--pw-soft); text-wrap: pretty; }
.pw__adds { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; text-align: left; }
.pw__adds li { display: flex; align-items: center; gap: 10px; font-size: .84rem; color: #fff; }
.pw__check { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--pw-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* The first sight, arriving in order. */
.pw[open] :is(.pw__art, .pw__eyebrow, .pw__title, .pw__sub, .pw__adds) { animation: pwUp .9s var(--pw-ease) both; }
.pw[open] .pw__eyebrow { animation-delay: .12s; }
.pw[open] .pw__title { animation-delay: .18s; }
.pw[open] .pw__sub { animation-delay: .26s; }
.pw[open] .pw__adds { animation-delay: .34s; }
@keyframes pwUp { from { opacity: 0; transform: translateY(14px); } }

/* ── The sell: shelves of the real things ────────────────────────────────── */
.pw__block { margin-top: 48px; }
.pw .pw__sheet h3.pw__h { margin: 0; font-size: .7rem; font-weight: 600; letter-spacing: .2em; color: #fff; text-transform: uppercase; }
.pw__p { margin: 8px 0 0; font-size: .82rem; font-weight: 300; line-height: 1.6; color: var(--pw-soft); }
.pw__covers { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.pw__covers li {
  padding: 8px 13px; border-radius: 999px; font-size: .76rem; line-height: 1.3; color: #fff;
  background: color-mix(in srgb, var(--pw-accent) 9%, rgba(255, 255, 255, .04));
  border: 1px solid color-mix(in srgb, var(--pw-accent) 22%, rgba(255, 255, 255, .06));
}
.pw__readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.pw__readout div { padding: 14px 12px; border-radius: 18px; background: var(--pw-plate); border: 1px solid rgba(255, 255, 255, .07); }
.pw__readout dt { font-size: .56rem; letter-spacing: .2em; color: var(--pw-faint); }
.pw__readout div { min-width: 0; }
.pw__readout dd { margin: 6px 0 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(.78rem, 3.2vw, .98rem); line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.pw__shelf {
  display: flex; gap: 12px; margin: 16px -26px 0; padding: 4px 26px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 26px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
}
.pw__shelf::-webkit-scrollbar { display: none; }
.pw__shelfcard { flex: none; width: 118px; margin: 0; scroll-snap-align: start; }
.pw__shelfcard img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 9px; }
.pw__shelfcard--pad img { aspect-ratio: 9 / 16; }
.pw__shelfcard figcaption { margin-top: 8px; font-size: .6rem; letter-spacing: .12em; color: var(--pw-soft); text-transform: uppercase; }
.pw__shelfcard figcaption b { font-weight: 600; color: #fff; }
.pw__shelfcard.is-this img { outline: 1.5px solid var(--pw-a); outline-offset: 3px; }

.pw__end { display: grid; justify-items: center; gap: 6px; margin-top: 44px; padding-bottom: 6px; }
.pw__more, .pw__notnow { min-height: 44px; padding: 0 16px; font-size: .64rem; font-weight: 500; letter-spacing: .2em; color: var(--pw-soft); background: none; border: 0; cursor: pointer; display: inline-grid; place-items: center; }
.pw__more:hover, .pw__notnow:hover { color: #fff; }

/* ── The bar: the plans and the one way on, pinned ───────────────────────── */
.pw__bar {
  position: relative; z-index: 2;
  display: grid; gap: 10px;
  padding: 14px 18px max(12px, calc(env(safe-area-inset-bottom) + 6px));
  background:
    radial-gradient(520px 180px at 0 0, color-mix(in srgb, var(--pw-accent) 12%, transparent), transparent),
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .28)),
    color-mix(in srgb, var(--pw-canvas) 88%, #1a1d26);
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.pw__plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pw__plans--one { grid-template-columns: minmax(0, 1fr); }
.pw__plan {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; row-gap: 2px; align-items: center;
  padding: 12px 14px; border-radius: 22px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--pw-plate);
  transition: background .35s var(--pw-ease), border-color .35s var(--pw-ease);
}
.pw__plan input { position: absolute; opacity: 0; pointer-events: none; }
.pw__plan.is-on, .pw__plan:has(input:checked) {
  border: 1.5px solid transparent;
  background: linear-gradient(color-mix(in srgb, var(--pw-plate) 70%, #232734), color-mix(in srgb, var(--pw-plate) 70%, #232734)) padding-box,
              linear-gradient(135deg, var(--pw-a), var(--pw-b)) border-box;
}
.pw__plan:has(input:focus-visible) { outline: 1px solid #fff; outline-offset: 3px; }
.pw__tick { grid-row: 1 / span 3; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--pw-faint); align-self: start; margin-top: 1px; }
.pw__plan:has(input:checked) .pw__tick {
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
              linear-gradient(135deg, var(--pw-a), var(--pw-b));
}
.pw__plan-name { font-size: .62rem; font-weight: 600; letter-spacing: .14em; line-height: 1.35; color: #fff; }
.pw__plan-name em {
  font-style: normal; font-size: .54rem; letter-spacing: .14em; white-space: nowrap;
  background: linear-gradient(90deg, var(--pw-a), var(--pw-b)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.pw__plan-price { font-family: var(--font-mark); font-size: 1.2rem; letter-spacing: .02em; white-space: nowrap; }
.pw__plan-price small { font-family: var(--font-ui); font-size: .6rem; letter-spacing: .12em; color: var(--pw-soft); }
.pw__plan-note { font-size: .54rem; letter-spacing: .16em; color: var(--pw-faint); }

.pw__cta {
  min-height: 54px; width: 100%; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--pw-a), var(--pw-b));
  color: var(--pw-ink);
  font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .18em;
  transition: transform .2s ease-out, filter .2s ease-out;
}
.pw__cta:hover { filter: brightness(1.06); }
/* A pack whose Codes are not open yet (views/paywall.js, `soon`): its price
   stands where the plans would, and the one button is quiet and pressed by
   nobody — still the pack's own ramp, but faded, with no pointer. */
/* A price is a numeral: Qubed, painted in the pack's or Code's own ramp
   (BRAND-RULES §3, §4). */
.pw__soon-price {
  margin: 0; text-align: center; font-family: var(--font-mark); font-size: 1.7rem; letter-spacing: .02em; line-height: 1;
  color: var(--pw-a); background-image: linear-gradient(135deg, var(--pw-a), var(--pw-b));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* The list, offered while checkout is not open (views/paywall.js). */
.pw__join { margin-top: 2px; }
.pw__cta:disabled { cursor: default; opacity: .5; filter: none; transform: none; }
.pw__cta:active { transform: scale(.985); }
.pw__cta:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
/* The small print is to be read, not only to be there: the terms are part of
   the price. .75rem at 78% white (it was .6rem at 55%), links underlined. */
.pw__fine { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--pw-soft); text-align: center; text-wrap: balance; }
.pw__fine a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.pw__fine a:hover { color: #fff; }
.pw__fine [hidden] { display: none; }
/* How it is paid follows the checked plan: a plan that renews says so, a
   one-off says it is paid once. The one-off line is shown and hidden here
   alone (it has no hidden attribute: base.css makes [hidden] !important);
   the renewal line is paywall.js's, and this hides it for a one-off even
   when that does not run. */
.pw:has(input[data-renews="1"]:checked) .pw__fine [data-pw-once],
.pw:has(input[data-renews=""]:checked) .pw__fine [data-pw-renews] { display: none; }

@media (max-width: 380px) {
  .pw__plans { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .pw[open] .pw__sheet, .pw[open] :is(.pw__art, .pw__eyebrow, .pw__title, .pw__sub, .pw__adds),
  .pw__glow, .pw__form .geo, .pw__card, .pw__mark { animation: none !important; }
}

/* A pack at the top: its cards fanned, the middle one nearest. */
.pw__fan { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.pw__fancard {
  position: absolute; width: var(--fan-w, 112px);
  transform: translateX(calc(var(--i) * var(--fan-step, 46px))) translateY(calc(var(--i) * var(--i) * var(--fan-drop, 5px))) rotate(calc(var(--i) * var(--fan-turn, 8deg)));
  animation: none;
}
/* Six or seven cards: smaller, and closer together, so the outer ones stay in. */
.pw__fan--many { --fan-w: 96px; --fan-step: 37px; --fan-turn: 6deg; --fan-drop: 3.5px; }
.pw__fan { animation: pwFanFloat 9s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes pwFanFloat { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .pw__fan { animation: none; } }

/* Three plans or more (YOU.0+ beside a Code and its pack): a row of pills
   that scrolls sideways, so the bar never grows past a thumb's reach. */
.pw__plans--many {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -18px; padding: 2px 18px; scrollbar-width: none;
}
.pw__plans--many::-webkit-scrollbar { display: none; }
.pw__plans--many .pw__plan { flex: 0 0 min(46%, 196px); scroll-snap-align: start; }

/* A short window (a phone on its side): the whole glass, a smaller top, and
   the plans in one row, so the page still has room to be read. */
@media (max-height: 560px) {
  .pw { width: 100vw; height: 100dvh; }
  .pw__sheet { border-radius: 0; border: 0; }
  .pw__art { height: 168px; }
  .pw__card { width: 96px; border-radius: 7px; }
  .pw__card--wide { width: 150px; }
  .pw__card--pad { width: 86px; }
  .pw__fan { --fan-w: 76px; }
  .pw__fan--many { --fan-w: 62px; --fan-step: 24px; }
  .pw__bar { gap: 8px; padding-top: 10px; }
  .pw__plans { display: flex; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px; scrollbar-width: none; }
  .pw__plans .pw__plan { flex: 1 0 min(44%, 240px); padding: 8px 12px; }
  .pw__plan-note { display: none; }
  .pw__cta { min-height: 44px; }
}

/* The founder's way to see it (views/ui.js, previewLink): a small glass pill
   beside ENTER — a control, so glass, and legible over any picture. Admins
   only. */
.cta-preview {
  display: inline-flex; align-items: center; min-height: 36px; margin: .7rem 0 0 .8rem; padding: 0 14px;
  vertical-align: middle; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  font-size: .58rem; font-weight: 600; letter-spacing: .18em; white-space: nowrap;
}
.cta-preview:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.ch-top__acts .cta-preview { margin: 0; align-self: center; }