/* promptarium ui kit (Oct 2026): the ONE visual language every page speaks. Every page loads this after its own
   stylesheet, so the tokens below win and the older sheets pick up the same palette.
   Locked: warm auditorium palette, one orange (#f0703a) only for what spends or buys, Mona Sans condensed for display,
   Instrument Sans for text, Archivo only for the wordmark, the floating island nav, pill buttons with the nested arrow
   circle, shell/core framing, 16px thumbs.
   Fonts: Google Fonts link in each page (Mona Sans + Instrument Sans); Archivo is self-hosted (/fonts).
   Note: the kit's font tokens are --f-display / --f-text here, because the older sheets use --text for the text colour. */

@font-face {
  font-family: 'Archivo';
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --room: #0f0e0c;
  --panel: #181613;
  --well: #121110;
  --control: #221f1b;
  --raised: #2d2924;
  --line: rgba(242, 236, 226, 0.08);
  --line-2: rgba(242, 236, 226, 0.14);
  --bone: #f2ece2;
  --bone-2: rgba(242, 236, 226, 0.72);
  --bone-3: rgba(242, 236, 226, 0.56);
  --accent: #f0703a;
  --on-accent: #1a0c04;
  --ink: #12100d;
  --f-display: 'Mona Sans', 'Archivo', sans-serif;
  --f-text: 'Instrument Sans', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --f-mark: 'Archivo', sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --scrim: linear-gradient(180deg, rgba(15, 14, 12, 0) 0%, rgba(15, 14, 12, 0.72) 100%);
  --dim: color-mix(in srgb, var(--room) 64%, transparent);
  --gutter: 48px;

  /* bridges: the older stylesheets' names, pointed at the kit */
  --bg: var(--room);
  --bg-1: var(--panel);
  --bg-2: var(--control);
  --bg-3: var(--raised);
  --text: var(--bone);
  --text-2: var(--bone-2);
  --text-3: var(--bone-3);
  --fill: rgba(242, 236, 226, 0.05);
  --fill-2: rgba(242, 236, 226, 0.09);
  --safe: var(--accent);
  --safe-hi: #f37f4c;
  --on-safe: var(--on-accent);
  --font: var(--f-text);
  --sans: var(--f-text);
  --smoke: var(--bone-2);
  --hair: var(--line);
  --hair-2: var(--line-2);
  --glass: rgba(26, 24, 21, 0.86);
  --glass-up: var(--panel);
  --glass-line: var(--line-2);
  --glass-fill: var(--control);
  --glass-fill-hi: var(--raised);
  --glass-fill-on: var(--raised);
  --glass-blur: blur(24px) saturate(1.4);
  --glass-drop: 0 30px 80px rgba(0, 0, 0, 0.45);
  --glass-drop-sm: 0 18px 48px rgba(0, 0, 0, 0.42);
  color-scheme: dark;
}
@media (max-width: 899px) { :root { --gutter: 20px; } }

html, body { background: var(--room); }
body { color: var(--bone); font-family: var(--f-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(240, 112, 58, 0.32); color: var(--bone); }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

/* ---------- type */
.pk-wordmark { font-family: var(--f-mark); font-weight: 800; font-stretch: 125%; letter-spacing: -0.045em; font-size: 19px; line-height: 1; color: var(--bone); }
.pk-display { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; letter-spacing: -0.02em; line-height: 0.92; text-transform: lowercase; }
.pk-xl { font-size: 96px; }
.pk-l { font-size: 56px; }
.pk-m { font-size: 28px; line-height: 1.05; }
.pk-s { font-size: 20px; line-height: 1.15; font-weight: 750; }
.pk-lead { font-size: 18px; line-height: 1.5; color: var(--bone-2); }
.pk-body { font-size: 16px; line-height: 1.55; color: var(--bone); }
.pk-meta { font-size: 14px; line-height: 1.4; color: var(--bone-3); font-weight: 500; }
.pk-label { font-size: 13px; line-height: 1.3; color: var(--bone-3); font-weight: 500; }
.pk-num { font-variant-numeric: tabular-nums; }
.pk-h2 { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.3; color: var(--bone); }

/* ---------- the island */
.pk-nav { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(26, 24, 21, 0.86); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 48px rgba(0, 0, 0, 0.42); }
.pk-tab { white-space: nowrap; height: 40px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 550; color: var(--bone-2); text-decoration: none; transition: background .3s var(--ease), color .3s var(--ease); }
.pk-tab:hover { color: var(--bone); background: var(--control); }
.pk-tab--on, .pk-tab--on:hover { color: var(--bone); background: var(--raised); }

/* ---------- buttons: everything you press is a pill */
.pk-btn { height: 48px; padding: 0 22px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--f-text); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background .3s var(--ease), color .3s var(--ease), opacity .2s; }
.pk-btn:active { transform: scale(0.98); }
.pk-btn--primary, a.pk-btn--primary { background: var(--accent); color: var(--on-accent); padding: 0 6px 0 22px; }
.pk-btn--primary:hover { background: #f37f4c; }
.pk-btn--light, a.pk-btn--light { background: var(--bone); color: var(--ink); }
.pk-btn--light:hover { background: #fbf6ee; }
.pk-btn--ghost, a.pk-btn--ghost { background: var(--control); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line); }
.pk-btn--ghost:hover { background: var(--raised); }
.pk-btn--lg { height: 56px; font-size: 16px; }
.pk-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.pk-btn--block { width: 100%; justify-content: space-between; }
.pk-btn__price { font-weight: 500; opacity: 0.78; font-variant-numeric: tabular-nums; }
.pk-btn__price:empty { display: none; }
.pk-btn__icon { flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--on-accent); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; transition: transform .35s var(--ease); }
.pk-btn--lg .pk-btn__icon { width: 44px; height: 44px; }
.pk-btn:hover .pk-btn__icon { transform: translateX(2px); }
.pk-btn:disabled, .pk-btn--off { background: var(--control); color: var(--bone-3); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.pk-btn:disabled:active, .pk-btn--off:active { transform: none; }
.pk-btn:disabled .pk-btn__icon, .pk-btn--off .pk-btn__icon { background: var(--raised); color: var(--bone-3); transform: none; }
.pk-icon-btn { flex: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--control); color: var(--bone); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s var(--ease), transform .25s var(--ease); }
.pk-icon-btn:hover { background: var(--raised); }
.pk-icon-btn:active { transform: scale(0.96); }
.pk-icon-btn--sm { width: 36px; height: 36px; }
.pk-icon-btn--bare { background: transparent; box-shadow: none; }

/* ---------- chips, segments, fields */
.pk-chip { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--control); color: var(--bone-2); display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-text); font-size: 14px; font-weight: 550; white-space: nowrap; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: color .2s, background .3s var(--ease); }
.pk-chip:hover { color: var(--bone); }
.pk-chip--on, a.pk-chip--on { background: var(--bone); color: var(--ink); box-shadow: none; }
.pk-seg { display: flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); }
.pk-seg__opt { flex: 1; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--bone-2); font-family: var(--f-text); font-size: 14px; font-weight: 550; cursor: pointer; font-variant-numeric: tabular-nums; }
.pk-seg__opt--on { background: var(--raised); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-2); }
.pk-select { height: 52px; padding: 0 16px 0 14px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--bone); }
.pk-select__sub { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--bone-3); }
.pk-search { height: 52px; padding: 0 20px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; gap: 12px; color: var(--bone-3); }
.pk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--bone); font-family: var(--f-text); font-size: 16px; }
.pk-search input::placeholder { color: var(--bone-3); }
.pk-search:focus-within { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 2px rgba(242, 236, 226, 0.35); }
.pk-toggle { width: 44px; height: 26px; border-radius: 999px; background: var(--raised); position: relative; box-shadow: inset 0 0 0 1px var(--line-2); flex: none; }
.pk-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: var(--bone-3); transition: left .3s var(--ease), background .3s; }
.pk-toggle--on { background: var(--bone); }
.pk-toggle--on::after { left: 21px; background: var(--ink); }
.pk-radio { flex: none; width: 24px; height: 24px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--bone-3); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.pk-radio--on { background: var(--bone); color: var(--ink); box-shadow: none; }

/* ---------- surfaces: shell + core only for the hero film, the studio stage and the main panel */
.pk-shell { padding: 6px; border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, 0.45); }
.pk-core { border-radius: 22px; overflow: hidden; position: relative; background: var(--well); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.pk-panel { border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pk-well { border-radius: 18px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.pk-sheet { border-radius: 28px 28px 0 0; background: var(--panel); box-shadow: inset 0 1px 0 var(--line-2), 0 -24px 60px rgba(0, 0, 0, 0.5); }
.pk-grabber { width: 40px; height: 5px; border-radius: 999px; background: var(--bone-3); opacity: 0.5; margin: 10px auto 0; }
.pk-rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.pk-option { border-radius: 18px; transition: background .3s var(--ease); }
.pk-option:hover { background: var(--control); }
.pk-option--on, .pk-option--on:hover { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- media */
.pk-thumb { border-radius: 16px; overflow: hidden; position: relative; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.pk-thumb img, .pk-core > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pk-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; color: inherit; text-decoration: none; }
.pk-card:hover .pk-thumb img { transform: scale(1.035); }
.pk-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px; min-width: 0; }
.pk-card__t { font-size: 15px; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pk-card__m { font-size: 14px; font-weight: 500; color: var(--bone-3); white-space: nowrap; flex: none; }
.pk-play { flex: none; width: 52px; height: 52px; border: 0; border-radius: 999px; background: rgba(242, 236, 226, 0.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--bone); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(242, 236, 226, 0.28); transition: background .3s var(--ease), transform .25s var(--ease); }
.pk-play:hover { background: rgba(242, 236, 226, 0.26); }
.pk-play:active { transform: scale(0.96); }
.pk-play--sm { width: 40px; height: 40px; }
.pk-progress { height: 3px; border-radius: 999px; background: rgba(242, 236, 226, 0.16); overflow: hidden; }
.pk-progress > i { display: block; height: 100%; border-radius: 999px; background: var(--bone); transform-origin: left; }
.pk-progress--live > i { background: var(--accent); }
.pk-making { filter: saturate(0.2) blur(10px) brightness(0.8); transform: scale(1.08); }
.pk-live { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); display: inline-block; animation: pk-breathe 1.8s var(--ease) infinite; }
@keyframes pk-breathe { 50% { opacity: 0.35; } }
.pk-selected { box-shadow: 0 0 0 2px var(--bone); }
.pk-avatar { flex: none; width: 36px; height: 36px; border: 0; border-radius: 999px; background: var(--raised); color: var(--bone); display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-text); font-size: 14px; font-weight: 650; text-transform: lowercase; cursor: pointer; text-decoration: none; }
.pk-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: var(--scrim); pointer-events: none; }
/* a long text box fades out at the bottom */
.pk-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(18, 17, 16, 0) 0%, rgba(18, 17, 16, 1) 78%); pointer-events: none; }

/* ---------- the phone tab bar: the island, five tabs, over a fade */
.pk-tabbar { position: fixed; left: 20px; right: 20px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; display: none; padding: 6px; gap: 2px; }
.pk-tabbar .pk-tab { flex: 1; min-width: 0; height: 56px; padding: 0; flex-direction: column; justify-content: center; gap: 2px; font-size: 13px; font-weight: 550; background: transparent; border: 0; font-family: var(--f-text); cursor: pointer; }
.pk-tabbar .pk-tab--on { background: var(--raised); }
.pk-tabbar-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 112px; z-index: 44; display: none; background: linear-gradient(180deg, rgba(15, 14, 12, 0), var(--room) 72%); pointer-events: none; }
@media (max-width: 899px) {
  .pk-tabbar { display: flex; }
  .pk-tabbar-fade { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .pk-nav { background: var(--panel); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- paywall: one card per plan, each with its own colour (the plans sheet in the studio and /pricing share these)
   starter = bone, creator = orange (the one we push), pro = rose. --t is the plan's colour, --t-ink the text on it */
.pw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.pw .pw-card { --t: #f2ece2; --t-ink: #15120f; --t-soft: rgba(242, 236, 226, 0.08); --t-glow: rgba(242, 236, 226, 0.07);
  position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; margin: 0; padding: 24px 20px 20px; border: 0; border-radius: 22px;
  background: radial-gradient(90% 55% at 100% 0%, var(--t-glow), transparent 70%), #181613; box-shadow: inset 0 3px 0 rgba(242, 236, 226, 0.22), inset 0 0 0 1px var(--line-2);
  color: var(--bone); font: inherit; text-align: left; opacity: 1; cursor: pointer; transform: none; transition: box-shadow .3s var(--ease), transform .35s var(--ease); }
.pw .pw-t-creator { --t: #f0703a; --t-ink: #1b0d05; --t-soft: rgba(240, 112, 58, 0.13); --t-glow: rgba(240, 112, 58, 0.3);
  background: radial-gradient(90% 55% at 100% 0%, var(--t-glow), transparent 70%), #1a1511; box-shadow: inset 0 3px 0 var(--t), inset 0 0 0 1px rgba(240, 112, 58, 0.4), 0 30px 80px -44px rgba(240, 112, 58, 0.6); }
.pw .pw-t-pro { --t: #f2c46b; --t-ink: #1d1505; --t-soft: rgba(242, 196, 107, 0.12); --t-glow: rgba(242, 196, 107, 0.24);
  background: radial-gradient(90% 55% at 100% 0%, var(--t-glow), transparent 70%), #1a1712; box-shadow: inset 0 3px 0 var(--t), inset 0 0 0 1px rgba(242, 196, 107, 0.32); }
.pw .pw-card:hover:not(:disabled) { transform: translateY(-3px); }
.pw .pw-card:disabled { cursor: default; transform: none; }
.pw .pw-card:disabled .pw-cta { opacity: 0.5; }
.pw .pw-card.mine .pw-cta { opacity: 1; }
.pw .pw-card.mine { outline: 2px solid var(--t); outline-offset: 3px; }

.pw-top { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.pw .pw-name { margin: 0; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 36px; line-height: 1; letter-spacing: -0.02em; text-transform: lowercase; color: var(--bone); }
.pw-off { flex: none; height: 24px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--t-soft); color: var(--t); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pw-tag { flex: none; margin-left: auto; height: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(242, 236, 226, 0.18); color: var(--bone-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.pw-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--t); }
.pw .pw-for { display: block; margin: 6px 0 16px; font-size: 14px; line-height: 1.4; color: var(--bone-3); }
.pw-card:not(.pw-t-starter) .pw-for { color: var(--bone-2); }

.pw-well { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 16px; border-radius: 14px; background: rgba(10, 9, 8, 0.42); box-shadow: inset 0 0 0 1px rgba(242, 236, 226, 0.08); }
.pw .pw-cr { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--bone); }
.pw .pw-cr svg { flex: none; color: var(--t); }
.pw .pw-cr b, .pw .cu-n { font-weight: 750; font-size: 16px; min-width: 0; text-align: left; font-variant-numeric: tabular-nums; }
.pw .cu-eq, .pw-once .cu-eq { display: flex; flex-direction: column; gap: 3px; flex: none; margin: 0 0 0 24px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--bone-3); }

.pw .pw-price, .pw-once .pw-price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 14px; }
.pw .pw-price b, .pw-once .pw-price b { margin: 0; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 56px; line-height: 0.88; letter-spacing: -0.02em; color: var(--bone); font-variant-numeric: tabular-nums; }
.pw .pw-price s { order: 3; align-self: flex-end; margin-left: auto; font-size: 14px; font-weight: 600; color: var(--bone-3); text-decoration-thickness: 1.5px; }
.pw-t-starter .pw-price s { color: var(--bone-3); }
.pw .pw-price span, .pw-once .pw-price span { font-size: 14px; color: var(--bone-3); }

/* the button: the kit's pill with the arrow disc, in the plan's colour; the saving is a quiet line under it */
.pw-buy { display: flex; flex-direction: column; gap: 10px; }
.pw .pw-cta { width: 100%; height: 54px; margin: 0; padding: 0 6px 0 22px; border-radius: 999px; justify-content: space-between; background: var(--t); color: var(--t-ink); font-size: 16px; font-weight: 700; transition: filter .2s, transform .2s var(--ease); }
.pw .pw-cta .pk-btn__icon { width: 42px; height: 42px; background: var(--t-ink); color: var(--t); }
.pw .pw-card:hover:not(:disabled) .pw-cta { filter: brightness(1.06); }
.pw .pw-card:hover:not(:disabled) .pw-cta .pk-btn__icon { transform: translateX(2px); }
.pw .pw-save { display: block; padding: 0 4px; text-align: center; font-size: 13px; line-height: 1.3; color: var(--bone-3); }
.pw .pw-save b { color: var(--t); font-weight: 700; }
.pw-t-starter .pw-save b { color: var(--bone); }

/* what the credits make, model by model */
.pw-box { display: flex; flex-direction: column; margin: 20px 0 0; padding: 4px 0 0; border-top: 1px solid var(--line); }
.pw-box-h { display: flex; align-items: center; gap: 8px; margin: 12px 4px 4px; font-size: 13.5px; font-weight: 650; color: var(--bone-2); }
.pw-box-h svg { color: var(--t); }
.pw-rows { display: flex; flex-direction: column; }
.pw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; align-items: baseline; gap: 10px; padding: 7px 4px; font-size: 13.5px; color: var(--bone); }
.pw-row + .pw-row { border-top: 1px dashed rgba(242, 236, 226, 0.08); }
.pw-row-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-chip { text-align: right; font-size: 13.5px; font-weight: 700; color: var(--t); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-chip--dim { font-size: 12px; font-weight: 500; color: var(--bone-3); }

.pw .pw-list { display: flex; flex-direction: column; gap: 9px; margin: 16px 4px 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--bone); }
.pw .pw-list > * { display: flex; align-items: center; gap: 10px; }
.pw .pw-list svg { flex: none; color: var(--t); }
.pw .pw-list > .off { color: var(--bone-3); opacity: 0.6; }
.pw .pw-list > .off svg { color: var(--bone-3); }

/* the exact amount: one strip under the plans */
.pw-once { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 28px; margin: 16px 0 0; padding: 22px 24px; border: 0; border-radius: 22px; background: #181613; box-shadow: inset 0 0 0 1px var(--line-2); }
.pw-once .pw-name { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--bone); }
.pw-once-l { display: flex; flex-direction: column; gap: 6px; }
.pw-once .pw-for { font-size: 14px; line-height: 1.4; color: var(--bone-3); }
.pw-once-m { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pw-once .pw-cr { margin: 0; font-size: 16px; font-weight: 600; color: var(--bone); }
.pw-once .cu-range { width: 100%; flex: none; margin: 4px 0; }
.pw-once .cu-eq { margin: 0; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
.pw-once-r { display: flex; align-items: center; gap: 18px; }
.pw-once .pw-price { margin: 0; }
.pw-once .pw-price b { font-size: 44px; }
.pw-once .pw-cta, .pw-once .cu-go { width: auto; height: 52px; margin: 0; padding: 0 24px; border-radius: 14px; font-size: 15px; font-weight: 700; }

@media (max-width: 1060px) {
  .pw { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .pw-once { grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin-inline: auto; }
  .pw-once-r { justify-content: space-between; }
}
@media (max-width: 640px) {
  .pw { gap: 12px; }
  .pw .pw-card { padding: 20px 16px 18px; }
  .pw .pw-name { font-size: 32px; }
  .pw .pw-price b { font-size: 48px; }
  .pw-once { padding: 20px 16px; }
}

/* the little slanted flag on top of a paywall banner */
.pw-flag { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(240, 112, 58, 0.14); color: #ffb08a; font-size: 13px; font-weight: 650; }
.pw-flag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(240, 112, 58, 0.22); }

/* the banner on top of /pricing: a library film behind a loud line, like a store front */
.pw-banner { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 0 24px; padding: 34px 36px 32px; border-radius: 26px; isolation: isolate;
  background: linear-gradient(90deg, #241a14 0%, #241a14 40%, rgba(36, 26, 20, 0.5) 64%, rgba(36, 26, 20, 0) 86%), url(/assets/feature/umbrella.webp) right center / auto 100% no-repeat, #241a14;
  box-shadow: inset 0 0 0 1px rgba(240, 112, 58, 0.3); }
.pw-bh { margin: 4px 0 0; max-width: 760px; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: clamp(36px, 4.4vw, 60px); line-height: 0.95; letter-spacing: -0.02em; text-transform: lowercase; color: var(--bone); text-wrap: balance; }
.pw-bh span { color: var(--accent); }
.pw-bs { margin: 0; max-width: 560px; font-size: 15px; line-height: 1.5; color: var(--bone-2); }
@media (max-width: 760px) {
  .pw-banner { padding: 24px 20px; background: linear-gradient(180deg, rgba(240, 112, 58, 0.24), rgba(240, 112, 58, 0) 75%), #1d1713; }
}