/* bubbleup.gg/pricing — the same surface as the landing page, as a document.
 *
 * An ADDENDUM to style.css, exactly like demo.css: the palette, the mono stack,
 * the fixed ground (two radial glows + hairline grid), the three-dot mark and
 * the chip all come from there unchanged, so this page cannot drift away from
 * the other two by being edited on its own.
 *
 * WHY THE DOCUMENT PRIMITIVES ARE REPEATED HERE. `.wrap`, `.head`, `.brand`,
 * `.sec`, `.legend`, `.h` and `.copy` already exist in demo.css. Hoisting them
 * into a shared page.css is the right shape and is NOT done here on purpose:
 * demo.css's `.wrap` carries a max-width clamp derived from 16:9 pane maths and
 * a fixed contact pill, which is that page's geometry and not a page's
 * geometry, so a hoist is a REWRITE of a walked surface with a browser gate on
 * it. That is its own change, on its own evidence. What is repeated below is
 * the small, boring half — tokens, spacing, type — and every value is copied
 * from demo.css rather than re-invented.
 *
 * NO PRICE, NO PRODUCT NAME, NO COPY IS IN THIS FILE. They arrive over the wire
 * from /pricing.json (generated from the SKU spec) — see site/pricing.js. */

/* style.css locks the landing page to one viewport with a physics field in it.
   This is a page. */
html,
body {
  height: auto;
  min-height: 100%;
}
body {
  overflow: visible;
}

/* `#fail` is toggled with the `hidden` attribute, and a class selector outranks
   the user agent's `[hidden] { display: none }` — so without this line a hidden
   element with a class on it is a VISIBLE element. That is exactly the bug the
   browser gate caught, on the two app chips this page used to have: `.chip` in
   style.css sets `display: inline-flex`, and a `hidden` chip stayed on screen.
   Those two chips are gone (2026-09-09 — the app section is a plain link to
   /phone now, shown always), and this rule stays, because the trap is a
   property of the stylesheet rather than of those two elements. */
[hidden] {
  display: none !important;
}

.wrap {
  position: relative;
  /* A reading width, not the demo's pane maths. Three cards across at the cap
     are ~340px each, which is a card you can read at a glance. */
  max-width: min(1100px, 92vw);
  margin: 0 auto;
  /* FINDING 98 ROUND 2: 0 at the top, because the head is no longer in here.
     The air above it is `.head-wrap`'s now (style.css), the same
     `clamp(28px, 2.4vw, 52px)` this line used to spend, so nothing on the page
     moved by a pixel. */
  /* FINDING 101 (Kevin, walk 9, 2026-09-13): THE PILL'S LANE, as a floor under
     whatever this page's own bottom padding happens to be. The `like what you
     see?` pill is fixed to the bottom right of the VIEWPORT (contact.css), so
     it does not scroll and the page's last in-flow content scrolls under it —
     which on a wide window is how it came to sit on top of `/demo`'s
     `Add to OBS` button. `/demo` answered by taking the pill into the flow;
     every page that KEEPS it fixed answers by reserving the corner instead:
     6 x `--ui` of nothing below the last line, which is 78px at the unit's
     floor (a phone, a 1440x900 laptop) against a pill that is ~34px tall and
     18px off the bottom edge, and grows with the pill on a 4K screen where
     `--ui` is 26.11px and the flat clamp below would have stopped at its
     ceiling. `max(…)` and not a replacement: the page's own padding is a
     reading decision and wins wherever it is already the larger of the two. */
  padding: 0 22px max(clamp(80px, 5vw, 120px), calc(var(--ui) * 6));
}

/* ---------- the head: the mark, home, and what this page is ---------- */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: clamp(18px, 1.5vw, 30px);
  border-bottom: 1px solid var(--line);
}
/* FINDING 94: the gap, the wordmark and the mark are `style.css`'s `.brand`
   rules now — one size for this header on all four document pages, off `--ui`.
   What used to be here was a flat 10px gap, a 17px mark and a
   `clamp(19px, 1.1vw, 26px)` wordmark, which is why a 5K screen got this page's
   1280x800 header. */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--fg);
  text-decoration: none;
}
.brand:hover {
  color: #fff;
}

/* The head's right cluster: the two nav doors (`a.chip.to`, style.css) and, at
   the end of them since finding 98, the purple door into the live demo
   (`a.chip.go`). Held together so `.head`'s `space-between` has two children to
   push apart rather than four to strand — the `Beta` badge left this cluster in
   finding 98 and stands beside the wordmark now, in `.head-start`. The gap is
   `style.css`'s (finding 94): 1.2 of `--ui`, which is the flat 12px that stood
   here at the old floor — `.head`'s own 16px tightened one step, because the
   doors belong to each other more than any of them belongs to the brand across
   the rule. The wrap and the right-alignment are style.css's (finding 98). */
.head-end {
  display: flex;
  align-items: center;
}

/* ---------- sections, and the type the site already uses ---------- */
.sec {
  padding-top: clamp(34px, 2.6vw, 56px);
}
.legend {
  color: var(--fg-3);
  font-size: clamp(10px, 0.6vw, 13px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.h {
  margin: 9px 0 10px;
  font-size: clamp(19px, 2.6vw, 27px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.copy {
  max-width: 68ch;
  margin-bottom: 18px;
  color: var(--fg-2);
  font-size: clamp(13px, 0.7vw, 16px);
  line-height: 1.62;
}
/* FINDING 87 — the reassurance line, brought up out of the paragraph it is in.
 *
 * Kevin, walk 8: *"can you make the words 'More affordable and local options
 * coming soon' like a highlighted color and the word local even more
 * highlighted so they really stand out as you see the shocking 499 number"*.
 * This is that, and it is only that: no word changed, no word added, and both
 * selectors below are on spans that exist for colour alone.
 *
 * TWO STEPS, NOT A HIGHLIGHTER. `--fg` is the page's brightest neutral and the
 * colour its headings are in, so the sentence steps up to the weight of a
 * heading while the two sentences before it stay at `--fg-2`. A background wash
 * was the other reading of "highlighted" and it is the wrong one here: this page
 * already spends its one accent on the price cards and the buy control, and a
 * filled band inside a paragraph would read as a warning rather than as a
 * promise.
 *
 * …and `local` goes one further, in the purple that means "ours" everywhere else
 * on this product, at 700 against the paragraph's 400. It is the word Kevin
 * named twice, and it is the one this line is actually about. NO UNDERLINE
 * anywhere in here: underlined text on this site is a link (`.page-fine a`
 * is the only other inline anchor on the page), and a word that looks like a
 * link and does nothing is worse than a word that is merely emphatic. */
.copy .soon {
  color: var(--fg);
}
.copy .loc {
  color: var(--purple);
  font-weight: 700;
}
.fail {
  margin-top: 18px;
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- the cards ----------
 *
 * How many rows are shown is a decision in the SKU spec (§9.2, and it is still
 * open), so the column count is not written here as a number: `pricing.js` puts
 * the count of NON-featured rows in `data-rest` and the rules below read it.
 *
 * `repeat(auto-fit, …)` was the first attempt and is wrong for this layout: the
 * featured card spans `1 / -1`, and a spanning item OCCUPIES every track, so
 * auto-fit has nothing to collapse — at 1100px it made four tracks for three
 * cards and left a quarter of the row empty beside them. Caught in the 1280×800
 * render, not by reasoning. */
.tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.1vw, 18px);
  margin-top: clamp(20px, 1.8vw, 30px);
  align-items: stretch;
}
@media (min-width: 760px) {
  .tiers[data-rest="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tiers[data-rest="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tiers[data-rest="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.tiers[aria-busy="true"] {
  min-height: 200px;
}

/* The reader card from style.css — flag shape, spine on the left — carrying a
   price instead of a wordmark. Same border, same radius, same glass. */
.tier {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-hi);
  border-radius: 3px 9px 9px 3px;
  background: linear-gradient(180deg, rgba(16, 16, 20, 0.82), rgba(10, 10, 13, 0.82));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 44px rgba(8, 8, 11, 0.55);
}

/* The spine says which of the three states a row is in, in the colours this
   product already uses for exactly these meanings: purple is pressable, cyan is
   a number/at-hand thing, a hairline is inert. */
.tier[data-state="buy"] {
  border-left-color: var(--purple);
}
.tier[data-state="enquire"] {
  border-left-color: var(--cyan);
}
.tier[data-state="upcoming"] {
  border-left-color: var(--line-hi);
}

/* The featured row. It spans the grid and, once there is room for it, splits
   into two columns so a full-width card is not a full-width card of air. */
.tier[data-featured="true"] {
  grid-column: 1 / -1;
}
@media (min-width: 760px) {
  .tier[data-featured="true"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(24px, 3vw, 52px);
    align-items: start;
  }
  .tier[data-featured="true"] > .feat {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }
  .tier[data-featured="true"] > .chip.act {
    grid-column: 2;
    justify-self: start;
  }
}

.tier-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tier-name {
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* The state chip, on the site's chip. One border colour per state and nothing
   else — the word inside it is what carries the meaning. It is a rung UNDER the
   header chips rather than the same size (it labels a card, it is not a door),
   so it keeps its own step down — 0.9 of the unit in 0.4/0.9 of padding, the
   9px/4/9 it shipped at the old 10px floor — and now takes that step from the
   same place everything else does. */
.chip.st {
  font-size: calc(var(--ui) * 0.9);
  padding: calc(var(--ui) * 0.4) calc(var(--ui) * 0.9);
  letter-spacing: 0.1em;
}
.tier[data-state="buy"] .chip.st {
  border-color: var(--purple);
  color: var(--fg);
}
.tier[data-state="enquire"] .chip.st {
  border-color: var(--cyan);
  color: var(--fg-2);
}

/* The number. The one place on this site where a figure is meant to be the
   loudest thing in its box. */
.price {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.tier[data-state="upcoming"] .price {
  color: var(--fg-3);
}
.price.none {
  font-size: clamp(13px, 0.8vw, 15px);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--fg-3);
}
.price-2 {
  margin-top: -4px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.price-2 .p2 {
  color: var(--fg-2);
}

.blurb {
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.55;
}
.tier[data-state="upcoming"] .blurb {
  color: var(--fg-3);
}

.feat {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 2px 0 4px;
}
.feat li {
  position: relative;
  padding-left: 16px;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.5;
}
/* The three-dot mark's smallest dot, reused as a bullet. */
.feat li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--purple);
}
.tier[data-state="enquire"] .feat li::before {
  background: var(--cyan);
}
.tier[data-state="upcoming"] .feat li {
  color: var(--fg-3);
}
.tier[data-state="upcoming"] .feat li::before {
  background: var(--line-hi);
}

/* A card's last line, and only Studio has one during the beta: the tier is
   reachable through the Founding row rather than bought here (spec §9.2). Set
   off by a hairline above it so it reads as a footnote to the card and not as a
   fifth bullet — it is the one line on a grayed card that is NOT a description
   of the tier. */
.tier-note {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 11px;
  line-height: 1.5;
}
/* On a card with no button under it — which is every `upcoming` row, and Studio
   is the only one carrying a note — the note IS the card's foot, so it goes to
   the bottom the way a button would. `:last-child` rather than a blanket
   `margin-top: auto`: in a flex column two auto margins share the free space,
   and a card that later has both a note and a button should keep the button at
   the bottom and the note snug above the bullets. */
.tier-note:last-child {
  margin-top: auto;
}

/* ---------- the button ----------
 *
 * style.css's `.chip.go` is the landing page's one door and is `position:
 * fixed` in a corner, so it cannot be reused inline. `.act` is the same look at
 * the same weight, sitting in the flow.
 *
 * FINDING 94: and now at the same SIZE as well. Its three numbers were flat —
 * 11/20 of padding, a 9px gap and 12px of type — which made the one button on
 * this site that takes money the smallest of the four page buttons at every
 * viewport, and the only one that never grew at all (the BEFORE table: 38px
 * tall from 1440 all the way to 5120). Same proportions, on `--ui`. */
.chip.act {
  margin-top: auto;
  align-self: flex-start;
  pointer-events: auto;
  text-decoration: none;
  color: var(--fg);
  border-color: var(--purple);
  padding: calc(var(--ui) * 1.1) calc(var(--ui) * 2);
  gap: calc(var(--ui) * 0.9);
  font-size: calc(var(--ui) * 1.2);
  letter-spacing: 0.1em;
  box-shadow: 0 10px 30px rgba(8, 8, 11, 0.5), 0 0 18px rgba(145, 71, 255, 0.18);
}
.chip.act::after {
  content: " \2192";
  color: var(--purple);
}
.chip.act:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(145, 71, 255, 0.28), rgba(145, 71, 255, 0.14));
}
.chip.act:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
.tier[data-state="enquire"] .chip.act {
  border-color: var(--cyan);
  box-shadow: 0 10px 30px rgba(8, 8, 11, 0.5), 0 0 18px rgba(54, 198, 255, 0.16);
}
.tier[data-state="enquire"] .chip.act::after {
  color: var(--cyan);
}
.tier[data-state="enquire"] .chip.act:hover {
  background: linear-gradient(180deg, rgba(54, 198, 255, 0.24), rgba(54, 198, 255, 0.12));
}

/* Not wired yet: no destination in checkout.json. A dashed hairline and no
   arrow — it has to be legible as "nothing happens here", from across a room,
   without a tooltip. */
.chip.act.off {
  border-style: dashed;
  border-color: var(--line-hi);
  color: var(--fg-3);
  box-shadow: none;
  cursor: default;
}
.chip.act.off::after {
  content: "";
}
.chip.act.off:hover {
  background: linear-gradient(180deg, rgba(35, 35, 44, 0.8), rgba(22, 22, 28, 0.8));
  color: var(--fg-3);
}

/* ---------- the app section ---------- */
.sec.app {
  margin-top: clamp(30px, 3vw, 54px);
  padding-top: clamp(30px, 2.4vw, 48px);
  border-top: 1px solid var(--line);
}
/* `.cta-wrap` and `.sec.app .chip.act` were here until finding 89 took the
   `See the app` link out of this section — the nav's `iPhone` door carries
   /phone on every page now, so a second link to it on the page it points from
   was one door too many. `.chip.act` itself is NOT touched: it is what every
   buyable tier's control is drawn with, three sections up. */

/* ---------- phones ---------- */
@media (max-width: 759px) {
  /* FINDING 98 ROUND 2: the head's band tightens with the column it sits over,
     or the brand would stand 6px further out than everything under it. */
  .head-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tier {
    padding: 18px 18px 20px;
  }
  /* The contact pill is fixed to the bottom of the viewport (contact.css) and
     the last thing in this document is a button. Leave it a lane. */
  .sec.app {
    padding-bottom: 46px;
  }
}

/* Beta presentation (Kevin, 2026-09-09): an upcoming tier's price is blurred —
   the element holds no digits, so the blur hides a placeholder, not a number. */
.price.blur {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}
.chip.st[title] {
  cursor: help;
}
/* Fine print under one bullet. */
.feat .fine {
  display: block;
  font-size: 0.82em;
  opacity: 0.7;
  margin-top: 2px;
}

/* ---------- the page's fine print ----------
 *
 * One line, one link, under everything: the privacy policy. This page had no
 * footer and this site has no footer nav, so `docs/superpowers/specs/
 * 2026-09-10-lane-site-privacy.md`'s fallback lands the link here and in
 * demo.html's foot. Set on demo.css's `.foot` type — the site's small-print
 * treatment, uppercase at hairline weight — but WITHOUT the rule above it: the
 * app section it follows already closes with a button, and a second hairline
 * under that reads as another section starting rather than the page ending. */
.page-fine {
  margin-top: clamp(40px, 2.6vw, 62px);
  color: var(--fg-3);
  font-size: clamp(10px, 0.55vw, 12px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-fine a {
  color: var(--fg-2);
  text-decoration: none;
}
.page-fine a:hover {
  color: var(--fg);
}