/* pricing-glass.v1.css - the #pricing lineup in /billing's glass (2026-09-28).
 *
 * The operator: "I prefer the glass modules of /billing over the ones on our
 * landing page. Replace them, but still make sure that all the things fit on
 * one page. Make use of the full length of the window."
 *
 * Needs the sectionsNN.glass bundle (patches/pricing_glass), whose #pricing
 * section draws the Starter bar and the three cards as `.lb-glass` with a
 * `tier-<id>` class (and `is-rec` on Pro). This sheet is /billing's v51 glass
 * restated on those names (static/jp/billing.css: `.bl-glass`, `.bl-card`,
 * `.bl-entry`, the Pro lift, the per-tier metal tint), in the landing's type
 * (Geist) and on the landing's own ground (warm grey + aurora). It replaces
 * pricing-cards.v1.css and pricing-fit.v2.css, whose selectors (.glass-plain)
 * no longer match anything in that section.
 *
 * THE WINDOW. From 1024px the section is at least one window tall under the
 * 64px header, and the three cards take whatever height is left: their lists
 * keep their rhythm and the buttons sit on the bottom edge, so the lineup ends
 * near the bottom of the window instead of 100-170px above it. Two
 * short-window steps take the slack out so the buttons stay inside 1440x800
 * and 1280x720 too.
 *
 * Served max-age=604800: never edit in place, ship a new name.
 */

@property --gl-a { syntax: "<angle>"; inherits: false; initial-value: -75deg; }

/* ---------------------------------------------------------------- tokens --
   /billing's values, light then dark. The dark block keys on the landing's
   own switch (html[data-theme="dark"], landing-dark.v1.js). */
#pricing {
  --gl-fill-a: rgba(255, 255, 255, .10); --gl-fill-b: rgba(255, 255, 255, .38);
  --gl-glint: rgba(22, 21, 19, .30);     --gl-rim: rgba(255, 255, 255, .60);
  --gl-in-hi: rgba(22, 21, 19, .05);     --gl-in-lo: rgba(255, 255, 255, .60);
  --gl-in-wash: rgba(255, 255, 255, .24); --gl-drop: rgba(22, 21, 19, .16);
  --lb-ink-2: rgb(53, 51, 46);           --lb-ink-3: rgb(101, 98, 89);
  --lb-rule: rgba(22, 21, 19, .08);
  /* the recommended card (Pro): more body, an ink hairline in the rim */
  --lb-rec-fill: rgba(255, 255, 255, .86);
  --lb-rec-rim-a: rgb(101, 98, 89);      --lb-rec-rim-b: rgb(227, 229, 232);
  /* the metal's tint per rung, read by liquid-metal.v6.js at mount (R G B / strength) */
  --lm-steel: 150 160 176 / .55; --lm-chrome: 0 0 0 / 0;
  --lm-titan: 112 118 128 / .6;  --lm-gold: 214 172 78 / .85;
}
html[data-theme="dark"] #pricing {
  --gl-fill-a: rgba(8, 8, 10, .14);      --gl-fill-b: rgba(8, 8, 10, .40);
  --gl-glint: rgba(242, 243, 245, .48);  --gl-rim: rgba(8, 8, 10, .50);
  --gl-in-hi: rgba(242, 243, 245, .06);  --gl-in-lo: rgba(8, 8, 10, .50);
  --gl-in-wash: rgba(8, 8, 10, .22);     --gl-drop: rgba(242, 243, 245, .14);
  --lb-ink-2: rgb(210, 211, 215);        --lb-ink-3: rgb(142, 143, 149);
  --lb-rule: rgba(255, 255, 255, .07);
  --lb-rec-fill: rgba(26, 26, 29, .8);
  --lb-rec-rim-a: rgb(142, 143, 149);    --lb-rec-rim-b: rgb(41, 41, 44);
}
#pricing .tier-starter  { --lm-tint: var(--lm-steel); }
#pricing .tier-standard { --lm-tint: var(--lm-chrome); }
#pricing .tier-pro      { --lm-tint: var(--lm-titan); }
#pricing .tier-premier  { --lm-tint: var(--lm-gold); }

/* ----------------------------------------------------------------- glass --
   A translucent body, four shadows, a whisper of blur, and a conic glint in a
   one-pixel rim that turns when the pointer arrives. */
#pricing .lb-glass {
  position: relative;
  border: 1px solid transparent;
  border-radius: 22px;
  background: linear-gradient(-75deg, var(--gl-fill-a), var(--gl-fill-b), var(--gl-fill-a));
  box-shadow:
    inset 0 .125em .125em var(--gl-in-hi), inset 0 -.125em .125em var(--gl-in-lo),
    0 .25em .125em -.125em var(--gl-drop), inset 0 0 .1em .25em var(--gl-in-wash),
    0 14px 34px -22px var(--gl-drop);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}
#pricing .lb-glass::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 1;
  background:
    conic-gradient(from var(--gl-a) at 50% 50%, var(--gl-glint) 0%, transparent 5% 40%,
                   var(--gl-glint) 50%, transparent 60% 95%, var(--gl-glint) 100%),
    linear-gradient(180deg, var(--gl-rim), var(--gl-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: --gl-a .6s ease;
}
#pricing .lb-glass:hover::after,
#pricing .lb-glass:focus-within::after { --gl-a: -125deg; }
#pricing .lb-card.is-rec {
  background:
    linear-gradient(var(--lb-rec-fill), var(--lb-rec-fill)) padding-box,
    linear-gradient(160deg, var(--lb-rec-rim-a), var(--lb-rec-rim-b) 45%,
                    var(--lb-rec-rim-b) 55%, var(--lb-rec-rim-a)) border-box;
  box-shadow:
    inset 0 .125em .125em var(--gl-in-hi), inset 0 -.125em .125em var(--gl-in-lo),
    0 .25em .125em -.125em var(--gl-drop), inset 0 0 .1em .25em var(--gl-in-wash),
    0 22px 44px -22px var(--gl-drop);
}
@media (hover: hover) {
  #pricing .lb-glass:hover {
    transform: translateY(-3px);
    box-shadow:
      inset 0 .125em .125em var(--gl-in-hi), inset 0 -.125em .125em var(--gl-in-lo),
      0 .25em .125em -.125em var(--gl-drop), inset 0 0 .1em .25em var(--gl-in-wash),
      0 26px 48px -24px var(--gl-drop);
  }
}
@media (prefers-reduced-motion: reduce) {
  #pricing .lb-glass { transition: none; }
  #pricing .lb-glass:hover { transform: none; }
}
/* no blur engine: an opaque body rather than type swimming on the aurora */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #pricing { --gl-fill-a: rgba(255, 255, 255, .9); --gl-fill-b: rgba(255, 255, 255, .95); }
  html[data-theme="dark"] #pricing { --gl-fill-a: rgba(26, 26, 29, .92); --gl-fill-b: rgba(26, 26, 29, .96); }
}

/* ---------------------------------------------------------------- layout --
   Phones and tablets first: one column, the page scrolls as before. */
/* "Join today" and the nav's "Pricing" land the section flush under the 64px
   header at every width (html carries scroll-padding-top:92px), as pricing-fit did. */
#pricing { scroll-margin-top: -28px; }
#pricing .lb-wrap { padding-top: 72px; padding-bottom: 72px; }
#pricing .lb-lede { margin-top: 12px; }
#pricing .lb-entry-rv { margin-top: 36px; }
#pricing .lb-tiers {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}
#pricing .lb-card-rv { display: flex; flex-direction: column; min-width: 0; }
#pricing .lb-card { flex: 1 1 auto; }
@media (min-width: 641px) and (max-width: 1023px) {
  #pricing .lb-tiers, #pricing .lb-entry-rv, #pricing .lb-more { width: 100%; max-width: 560px; margin-inline: auto; }
}

/* ---------------------------------------------------------- Starter bar -- */
#pricing .lb-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding: 18px 24px 18px 26px;
}
#pricing .lb-entry-l { flex: 1 1 340px; min-width: 0; position: relative; z-index: 2; }
#pricing .lb-entry-name {
  margin: 0 0 12px;
  font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
  color: hsl(var(--fg));
}
#pricing .lb-entry-feat {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, max-content);
  gap: 10px 24px; justify-content: start;
}
#pricing .lb-entry-feat li,
#pricing .lb-feat li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.5; color: var(--lb-ink-2);
}
#pricing .lb-tick { flex: none; width: 16px; height: 16px; margin-top: 2px; color: hsl(var(--fg)); }
#pricing .lb-entry-feat .lb-tick { width: 15px; height: 15px; }
#pricing .lb-entry-r {
  flex: 0 0 236px;
  display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  margin-left: auto; position: relative; z-index: 2;
}
/* Three columns down to 1024px (the price column no longer overhangs, so the
   list has the room); two once the lineup stacks. */
@media (max-width: 1023px) {
  #pricing .lb-entry-feat { grid-template-columns: repeat(2, max-content); gap: 10px 20px; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  #pricing .lb-entry-feat { column-gap: 18px; }
}

/* ---------------------------------------------------------------- cards -- */
#pricing .lb-card {
  display: flex; flex-direction: column;
  padding: 24px 24px 22px;
  text-align: center;
}
#pricing .lb-card > * { position: relative; z-index: 2; }
#pricing .lb-name {
  margin: 0;
  font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em;
  color: hsl(var(--fg));
}
#pricing .lb-price { margin: 16px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 3px; }
#pricing .lb-entry .lb-price-s { margin: 0; }
#pricing .lb-cur { font-size: 18px; font-weight: 600; color: var(--lb-ink-3); }
#pricing .lb-amt {
  font-size: 42px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: hsl(var(--fg)); font-variant-numeric: tabular-nums;
}
#pricing .lb-price-s .lb-amt { font-size: 30px; }
#pricing .lb-per { margin-left: 4px; font-size: 13px; color: var(--lb-ink-3); }
#pricing .lb-feat {
  list-style: none;
  margin: 20px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--lb-rule);
  display: flex; flex-direction: column; gap: 12px;
  flex: 1 1 auto;
  text-align: left;
}
#pricing .lb-feat li { gap: 11px; font-size: 14px; }
#pricing .lb-act { margin-top: 22px; }

/* ----------------------------------------------------------------- pills --
   The bundle's liquid button (variant deep), dressed as /billing's .bl-cta:
   600 rather than metal-sections' 750, the same black glass before the metal
   mounts, and the tier's tint on the rim (--lm-tint above). */
#pricing .lb-cta { width: 100%; font-weight: 600; letter-spacing: -.01em; }
#pricing .lb-cta > .glass-deep {
  background: rgba(22, 21, 15, .9);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 1px 1px rgba(22, 21, 15, .2), 0 10px 30px rgba(22, 21, 15, .3),
              inset 0 1px rgba(255, 255, 255, .24);
}
#pricing .lb-cta.cta-locked { cursor: default; }

/* ------------------------------------------------------- compare plans --
   A small glass pill under the lineup (only drawn while index.html names the
   page it opens, window.__agCompare). */
#pricing .lb-more { display: flex; justify-content: center; margin-top: 20px; }
#pricing .lb-compare {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px 0 18px;
  border-radius: 9999px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  color: hsl(var(--fg)); text-decoration: none;
  background: linear-gradient(-75deg, var(--gl-fill-a), var(--gl-fill-b), var(--gl-fill-a));
  box-shadow:
    inset 0 .125em .125em var(--gl-in-hi), inset 0 -.125em .125em var(--gl-in-lo),
    0 .25em .125em -.125em var(--gl-drop), inset 0 0 .1em .25em var(--gl-in-wash);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  transition: transform .4s cubic-bezier(.25, 1, .5, 1);
}
#pricing .lb-compare::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 1;
  background:
    conic-gradient(from var(--gl-a) at 50% 50%, var(--gl-glint) 0%, transparent 5% 40%,
                   var(--gl-glint) 50%, transparent 60% 95%, var(--gl-glint) 100%),
    linear-gradient(180deg, var(--gl-rim), var(--gl-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: --gl-a .5s ease;
}
#pricing .lb-compare svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
#pricing .lb-compare:hover { color: hsl(var(--fg)); transform: scale(.985); }
#pricing .lb-compare:hover::after { --gl-a: -125deg; }
#pricing .lb-compare:hover svg { transform: translateX(2px); }
#pricing .lb-compare:active { transform: scale(.97); }
#pricing .lb-compare:focus-visible { outline: 2px solid hsl(var(--fg)); outline-offset: 3px; }

/* ------------------------------------------------------ one full window --
   From 1024px: flush under the header when "Join today" / "Pricing" lands
   here (html carries scroll-padding-top:92px; 92 - 28 = the 64px header),
   at least one window tall, and the three cards take what is left.

   THE SPACING GROWS WITH THE WINDOW, and by less than the window does. Every
   gap below is `base + (100vh - 860px) * k`: at 860px tall the lineup is
   ~785px against 796 of room, and the k's add up to ~0.66, so each extra
   pixel of window buys the lists 2/3 px of air and the stretch of the cards
   takes the rest. A taller window therefore gives taller cards with roomier
   lists, never a band of empty ground under the buttons, and never an
   overflow. Measured at 900, 1019, 1076 and 1080 tall (patches/pricing_glass). */
@media (min-width: 1024px) {
  #pricing { --lb-x: max(0px, 100vh - 860px); }
  #pricing .lb-wrap {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    box-sizing: border-box;
    padding-top: min(52px, calc(22px + var(--lb-x) * .08));
    padding-bottom: min(40px, calc(16px + var(--lb-x) * .06));
  }
  #pricing .lb-head { flex: none; }
  #pricing .lb-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
  #pricing .lb-lede { margin-top: 10px; }
  #pricing .lb-entry-rv { flex: none; margin-top: min(34px, calc(16px + var(--lb-x) * .06)); }
  #pricing .lb-entry {
    padding-block: min(22px, calc(15px + var(--lb-x) * .02));
  }
  #pricing .lb-entry-name { margin-bottom: 10px; }
  #pricing .lb-entry-feat { row-gap: 9px; }
  #pricing .lb-tiers {
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: min(22px, calc(14px + var(--lb-x) * .03));
  }
  #pricing .lb-card {
    padding: min(34px, calc(22px + var(--lb-x) * .04)) 26px min(30px, calc(20px + var(--lb-x) * .03));
  }
  #pricing .lb-card .lb-price { margin-top: min(20px, calc(12px + var(--lb-x) * .03)); }
  #pricing .lb-feat {
    margin-top: min(24px, calc(16px + var(--lb-x) * .03));
    padding-top: min(24px, calc(16px + var(--lb-x) * .03));
    gap: min(16px, calc(9px + var(--lb-x) * .025));
  }
  #pricing .lb-act { margin-top: min(26px, calc(18px + var(--lb-x) * .03)); }
  #pricing .lb-more { flex: none; margin-top: min(22px, calc(12px + var(--lb-x) * .03)); }
  #pricing .lb-compare { height: 36px; }
}
/* An 800px-tall laptop (A = 736): the same parts, tighter; ~75px to spare. */
@media (min-width: 1024px) and (max-height: 860px) {
  #pricing .lb-wrap { padding-top: 16px; padding-bottom: 14px; }
  #pricing .lb-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
  #pricing .lb-lede { margin-top: 6px; }
  #pricing .lb-entry-rv { margin-top: 14px; }
  #pricing .lb-entry { padding: 13px 22px 13px 24px; }
  #pricing .lb-entry-name { margin-bottom: 8px; }
  #pricing .lb-entry-feat { gap: 6px 22px; }
  #pricing .lb-tiers { margin-top: 12px; gap: 18px; }
  #pricing .lb-card { padding: 18px 22px 17px; }
  #pricing .lb-card .lb-price { margin-top: 9px; }
  #pricing .lb-amt { font-size: 38px; }
  #pricing .lb-price-s .lb-amt { font-size: 28px; }
  #pricing .lb-feat { margin-top: 13px; padding-top: 13px; gap: 7px; }
  #pricing .lb-feat li { font-size: 13.5px; }
  #pricing .lb-act { margin-top: 14px; }
  #pricing .lb-more { margin-top: 10px; }
  #pricing .lb-compare { height: 34px; }
}
/* 720px (A = 656): the lineup still fits, just. */
@media (min-width: 1024px) and (max-height: 760px) {
  #pricing .lb-wrap { padding-top: 12px; padding-bottom: 10px; }
  #pricing .lb-head h2 { font-size: 1.55rem; }
  #pricing .lb-lede { margin-top: 2px; font-size: 14px; }
  #pricing .lb-entry-rv { margin-top: 11px; }
  #pricing .lb-entry { padding: 11px 20px 11px 22px; row-gap: 10px; }
  #pricing .lb-entry-name { font-size: 18px; margin-bottom: 6px; }
  #pricing .lb-entry-feat { gap: 4px 20px; }
  #pricing .lb-entry-feat li { font-size: 13px; }
  #pricing .lb-tiers { margin-top: 10px; gap: 16px; }
  #pricing .lb-card { padding: 14px 20px 13px; }
  #pricing .lb-name { font-size: 18px; }
  #pricing .lb-card .lb-price { margin-top: 6px; }
  #pricing .lb-amt { font-size: 34px; }
  #pricing .lb-price-s .lb-amt { font-size: 26px; }
  #pricing .lb-feat { margin-top: 10px; padding-top: 10px; gap: 5px; }
  #pricing .lb-feat li { font-size: 13px; line-height: 1.45; }
  #pricing .lb-act { margin-top: 11px; }
  #pricing .lb-cta { height: 44px; }
  #pricing .lb-more { margin-top: 8px; }
  #pricing .lb-compare { height: 32px; }
}

/* ---------------------------------------------------------------- phones --
   The Starter bar is laid out like the cards under it: name, price, a rule,
   the list, the button, one column (what landing-mobile.v6.css did for the
   old bar). */
@media (max-width: 640px) {
  #pricing .lb-wrap { padding-top: 64px; padding-bottom: 64px; }
  #pricing .lb-entry { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 24px 22px 22px; }
  #pricing .lb-entry-l, #pricing .lb-entry-r { display: contents; }
  #pricing .lb-entry-name { order: 1; text-align: center; margin: 0; }
  #pricing .lb-entry .lb-price-s { order: 2; margin: 16px 0 0; }
  #pricing .lb-price-s .lb-amt { font-size: 42px; }
  #pricing .lb-entry-feat {
    order: 3; grid-template-columns: minmax(0, 1fr); gap: 12px;
    margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--lb-rule);
  }
  #pricing .lb-entry-feat li { font-size: 14px; gap: 11px; }
  #pricing .lb-entry-feat .lb-tick { width: 16px; height: 16px; }
  #pricing .lb-choose { order: 4; margin-top: 22px; }
  #pricing .lb-card { padding: 24px 22px 22px; }
  #pricing .lb-entry-name, #pricing .lb-name { position: relative; z-index: 2; }
  #pricing .lb-price-s, #pricing .lb-entry-feat, #pricing .lb-choose { position: relative; z-index: 2; }
}