/* The pricing section (templates/partials/pricing.html), the home page's #price: the
   owner's choice of 2026-10-16, made in the prototype rounds. Sizes are in --u, one pixel of the home
   page's 1344-wide frame, so the section scales with it; under 900 px it stacks for phones, sizes in
   pixels. It was written to be shared with a /pricing page, since removed (2026-10-17), so it still carries
   its own fonts and a copy of the home page's glass buttons scoped to .plans; folding it into home.css is
   a tidy-up for later. */
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-Variable.woff2?v=e739aff9b4d02c26") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-400.woff2?v=08949f728dc52d52") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-500.woff2?v=01d285447409c8a5") format("woff2"); font-weight: 500; font-display: swap; }
@property --rim { syntax: "<angle>"; inherits: true; initial-value: 165deg; }
:root { --u: calc(min(100vw, 1612px) / 1344); }

:where(.plans) * { box-sizing: border-box; }
:where(.plans) :where(h2, h3, p, ul) { margin: 0; padding: 0; list-style: none; }

/* --rc is the round on sale's colour (from the server), as "r, g, b". */
.plans { --sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --violet: 182, 57, 233; --blue: 12, 177, 244; --red: 255, 61, 39;
  position: relative; display: grid; grid-template-columns: calc(614 * var(--u)) calc(614 * var(--u)); width: calc(1344 * var(--u)); margin: 0 auto;
  padding: calc(20 * var(--u)) 0 0 calc(58 * var(--u)); color: #F1F2F4; font-family: var(--sans); }
.plans__say { padding-right: calc(30 * var(--u)); }

/* The promise. "Ever." is in the tally colour, on the same line (the owner). */
.plans__big { font: 900 calc(62 * var(--u))/1.04 var(--sans); letter-spacing: -0.03em; color: #F6F6F6; }
.plans__big em { font-style: normal; color: #FF5442; }
.plans__lede { margin-top: calc(18 * var(--u)); max-width: calc(500 * var(--u)); font: 400 calc(12.5 * var(--u))/1.6 var(--mono); color: #C9CDD4; }

/* The track: past rounds full, the round on sale filling with marching stripes, then the price rise. */
.plans-track { margin-top: calc(26 * var(--u)); max-width: calc(520 * var(--u)); }
.plans-track__bar { display: flex; gap: calc(4 * var(--u)); height: calc(10 * var(--u)); }
.plans-track__seg { position: relative; flex: 100; border-radius: 999px; background: rgba(var(--rc), 0.16); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(var(--rc), 0.35); }
.plans-track__seg i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--rc)); box-shadow: 0 0 12px rgba(var(--rc), 0.9); }
.plans-track__seg--past { flex: 30; } .plans-track__seg--past i { width: 100%; }
.plans-track__seg--then { flex: 26; background: repeating-linear-gradient(90deg, rgba(var(--rc), 0.45) 0 4px, transparent 4px 9px); box-shadow: none; }
/* Diagonal stripes march to the right over the fill, one period a cycle, linear, so the loop has no seam
   (the owner). Only the round on sale, and never while motion is paused. */
.plans-track__seg--now i { --stripe: calc(16 * var(--u)); position: relative; overflow: hidden; min-width: calc(14 * var(--u)); }
.plans-track__seg--now i::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--stripe)); right: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.24) 0 calc(var(--stripe) * 0.3536), transparent calc(var(--stripe) * 0.3536) calc(var(--stripe) * 0.7071));
  animation: plans-track-march 0.9s linear infinite; }
@keyframes plans-track-march { to { transform: translateX(var(--stripe)); } }
html[data-motion="still"] .plans-track__seg--now i::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .plans-track__seg--now i::after { animation: none; } }
.plans-track__marks { display: flex; gap: calc(4 * var(--u)); margin-top: calc(10 * var(--u)); }
.plans-track__mark { flex: 100; display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0; font: 400 calc(10 * var(--u))/1.3 var(--mono); color: #8E939C; }
.plans-track__mark b { font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--rc)); white-space: nowrap; }
.plans-track__mark b span { margin-left: calc(10 * var(--u)); font-weight: 400; letter-spacing: 0; text-transform: none; color: #B9BDC5; }
.plans-track__mark small { font-size: 1em; color: #FFFFFF; }
.plans-track__mark--past { flex: 30; opacity: 0.6; }
.plans-track__mark--then { flex: 26; align-items: flex-end; text-align: right; }
.plans-track__mark--then b { color: #8E939C; }

/* What every license includes: down the left column, then the right. */
.plans__every { margin-top: calc(30 * var(--u)); font: 500 calc(10 * var(--u))/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8C94A8; }
.plans__has { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: calc(10 * var(--u)) calc(20 * var(--u)); margin-top: calc(14 * var(--u)); }
.plans__has li { display: flex; align-items: center; gap: calc(10 * var(--u)); font: 400 calc(11 * var(--u))/1.4 var(--mono); color: #C9CDD4; }
.plans svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.plans__has svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: #8E939C; }
/* Premiere Pro's own tile, small: the violet "Pr" of its app icon. */
.app-pr { display: inline-grid; place-items: center; width: calc(22 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(4 * var(--u)); border-radius: calc(4 * var(--u));
  background: #2A0845; border: 1px solid rgba(153, 153, 255, 0.55); font: normal 700 calc(9.5 * var(--u))/1 var(--sans); color: #9999FF; }

/* The products, as ruled lines; the bundle's lit and boxed. */
/* They read as a table: the round heads the price column, which has short rules either side of it, and the
   price and button columns are the same width on every line (the owner, 2026-10-23). The table sits on the
   grid (the owner, 2026-10-24): it runs from the third line (672) to the last (1286), so its edges and the
   bundle's frame are the grid's own lines, and the price column's left rule falls on the fourth line (979),
   so no grid line crosses a name or a price. Name 258, price 138, button 128, from 40 in and to 14 from the end. */
.plans__head { display: grid; grid-template-columns: calc(258 * var(--u)) calc(138 * var(--u)) calc(128 * var(--u)); column-gap: calc(18 * var(--u));
  margin-top: calc(34 * var(--u)); padding: 0 calc(14 * var(--u)) calc(12 * var(--u)) calc(40 * var(--u)); }
.plans__col { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); text-align: center; }
.plans__col b { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); font: 600 calc(10 * var(--u))/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--rc)); }
.plans__col b i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgb(var(--rc)); box-shadow: 0 0 6px rgba(var(--rc), 0.9); }
.plans__col .plans__col--plain { color: #8E939C; }
.plans__col small { font: 400 calc(8.6 * var(--u))/1 var(--mono); letter-spacing: 0.04em; color: #8E939C; white-space: nowrap; }
.plans__lines { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.line { position: relative; display: grid; grid-template-columns: calc(258 * var(--u)) calc(138 * var(--u)) calc(128 * var(--u)); align-items: center; column-gap: calc(18 * var(--u));
  padding: calc(22 * var(--u)) calc(14 * var(--u)) calc(22 * var(--u)) calc(40 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
/* The hover and the bundle's frame are square, so they sit on the table's rules (the owner, 2026-10-24); the
   mockup's rounded corners pulled away from the straight rules either side. On a phone the lines are square cards. */
.line::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.035); opacity: 0; transition: opacity 160ms ease-out; pointer-events: none; }
.line:hover::before { opacity: 1; }
.line--premiere { --dot: var(--violet); } .line--aftereffects { --dot: var(--blue); } .line--bundle { --dot: var(--red); }
.line__dot { position: absolute; left: calc(18 * var(--u)); top: 50%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-top: calc(-4.5 * var(--u)); border-radius: 50%; background: rgb(var(--dot)); box-shadow: 0 0 calc(10 * var(--u)) rgba(var(--dot), 0.8); }
.line__who { min-width: 0; }
.line__who :is(h2, h3) { font: 600 calc(21 * var(--u))/1.2 var(--sans); white-space: nowrap; letter-spacing: -0.015em; color: #F2F3F5; }
.line__who p { margin-top: calc(5 * var(--u)); font: 400 calc(9.2 * var(--u))/1.45 var(--mono); letter-spacing: 0.02em; color: #8E939C; }
.line__cost { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.line__cost::before, .line__cost::after { content: ""; position: absolute; top: 24%; bottom: 24%; width: 1px; background: rgba(255, 255, 255, 0.12); }
.line__cost::before { left: calc(-9 * var(--u)); } .line__cost::after { right: calc(-9 * var(--u)); }
.line--best .line__cost::before, .line--best .line__cost::after { background: rgba(255, 110, 90, 0.28); }
/* The price it was, before the price it is, in the tally colour, large enough to read. */
.line__price { display: flex; align-items: baseline; justify-content: center; gap: calc(10 * var(--u)); white-space: nowrap; }
.line__price b { font: 700 calc(30 * var(--u))/1 var(--sans); letter-spacing: -0.02em; color: #FFFFFF; }
.line__price s { font: 600 calc(17 * var(--u))/1 var(--sans); color: #FF5442; text-decoration-thickness: 2px; text-decoration-color: rgba(255, 84, 66, 0.85); }
/* The saving: a chip in the round's colour, under the price. The round itself heads the column. */
.line__deal { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(9 * var(--u)); padding: calc(5 * var(--u)) calc(9 * var(--u)) calc(5 * var(--u)) calc(8 * var(--u));
  border-radius: 999px; border: 1px solid rgba(var(--rc), 0.6); background: rgba(var(--rc), 0.14); font: 500 calc(9.5 * var(--u))/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: rgb(var(--rc)); white-space: nowrap; }
.line__deal i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: rgb(var(--rc)); box-shadow: 0 0 6px rgba(var(--rc), 0.9); }
.line__deal b { font-size: calc(11 * var(--u)); font-weight: 600; color: #FFFFFF; letter-spacing: 0.02em; }
.plans .line__go { width: 100%; height: calc(40 * var(--u)); padding: 0 calc(18 * var(--u)); font-size: calc(13 * var(--u)); white-space: nowrap; }
.line--best { border-bottom-color: transparent; }
.line--best::after { content: ""; position: absolute; inset: -1px 0; border: 1px solid rgba(255, 80, 58, 0.55);
  background: radial-gradient(60% 120% at 0% 50%, rgba(255, 46, 24, 0.22), transparent 70%); box-shadow: 0 0 calc(24 * var(--u)) rgba(255, 44, 24, 0.3); pointer-events: none; }
.plans__note { margin-top: calc(14 * var(--u)); font: 400 calc(10.4 * var(--u))/1.4 var(--mono); color: #FF8A7A; }
/* The latest sale under the prices (round13, E2), on /pricing alone: one quiet line, no badge. It starts where
   the lines do, its green dot in the products' dots' column (18) and its words under their names (40), so the
   dot stays put as the sales turn over, whatever their length (the owner, 2026-10-24). */
.plans__latest { display: flex; align-items: center; gap: calc(13 * var(--u)); margin-top: calc(16 * var(--u)); padding-left: calc(18 * var(--u)); font: 400 calc(11 * var(--u))/1.4 var(--mono); color: #9A9FA8; }
.plans__latest i { flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #2EBE63; box-shadow: 0 0 10px rgba(46, 190, 99, 0.8); }
.plans__latest b { font-weight: 500; color: #E6E7EA; }
.plans__ago { white-space: nowrap; }
/* It arrives a moment after the prices, rising into place. Each sale it turns to (pricing.js) slides up into
   the place of the one before, its green dot with it, and the dot sends out a ring, as a live light does. All
   of it stops when motion is paused (motion.js). */
.plans__latest { animation: plans-latest-in 700ms cubic-bezier(0.23, 1, 0.32, 1) 600ms both; }
@keyframes plans-latest-in { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } }
.plans__latest > i, .plans__sale { transition: opacity 280ms ease, transform 280ms ease; }
.plans__latest.is-turning > i, .plans__latest.is-turning .plans__sale { opacity: 0; transform: translateY(calc(-5 * var(--u))); }
.plans__latest:not(.is-turning) > i, .plans__latest:not(.is-turning) .plans__sale { animation: plans-sale-in 420ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes plans-sale-in { from { opacity: 0; transform: translateY(calc(5 * var(--u))); } }
.plans__latest i { position: relative; }
.plans__latest i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #2EBE63; opacity: 0; }
.plans__latest.is-ping i::after { animation: plans-latest-ping 1.8s ease-out; }
@keyframes plans-latest-ping { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(2.8); opacity: 0; } }
html[data-motion="still"] .plans__latest, html[data-motion="still"] .plans__latest > i, html[data-motion="still"] .plans__latest i::after, html[data-motion="still"] .plans__sale { animation: none; transition: none; }

/* The demo: a band of its own under the prices, across both columns, the words on one side and the field
   on the other. Its field's button is the field's end, in the same quiet glass as the products' "Get it
   now", so the band never outshouts them. The band is the installers' pane on /download (.dl-pane): its
   dark fill, its edge and its diagonal lines (the owner, 2026-10-24, after a day as the top bar's glass),
   so every panel on the site is the one panel. Square, as they all are. */
.plans-demo { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr calc(430 * var(--u)); align-items: center; column-gap: calc(40 * var(--u));
  margin-top: calc(56 * var(--u)); padding: calc(30 * var(--u)) calc(36 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(10, 10, 12, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.9); }
.plans-demo::before { content: ""; position: absolute; inset: 0; background-image: var(--scan); opacity: 0.5; pointer-events: none; }
@media (prefers-reduced-transparency: reduce) {
  .plans-demo { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0E0E10; }
}
/* After launch the panel is a veil (mesh.js): the light draws its dark fill, so the specks gathering round its
download button are drawn over it rather than behind it (the owner, 2026-10-27), as on /download's pane. */
.has-veils .plans-demo--download { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); -webkit-backdrop-filter: none; backdrop-filter: none; }
.plans-demo__eye { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 500 calc(10 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #FF5442; }
.plans-demo__eye::before { content: ""; width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: currentColor; box-shadow: 0 0 8px rgba(255, 61, 39, 0.8); }
.plans-demo__head { margin-top: calc(12 * var(--u)); font: 700 calc(30 * var(--u))/1.1 var(--sans); letter-spacing: -0.02em; color: #F4F4F5; }
.plans-demo__say { margin-top: calc(8 * var(--u)); max-width: calc(470 * var(--u)); font: 400 calc(11 * var(--u))/1.55 var(--mono); color: #B4B9C2; }
.plans-demo__pill { display: flex; align-items: stretch; height: calc(44 * var(--u)); overflow: hidden;
  border-radius: calc(12 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); transition: border-color 160ms ease-out; }
.plans-demo__pill:focus-within { border-color: rgba(255, 255, 255, 0.34); }
/* A bad address: the field's edge turns the tally colour and the message under it says why. */
.plans-demo__pill.is-bad { border-color: rgba(255, 84, 66, 0.75); }
.plans-demo__fix { padding: 0; border: 0; background: none; color: #FFD5CC; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.plans-demo .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.plans-demo__email { flex: 1; min-width: 0; padding: 0 calc(16 * var(--u)); border: 0; background: transparent; color: #F1F2F4; font: 400 calc(13 * var(--u))/1 var(--sans); outline: none; }
.plans-demo__email::placeholder { color: #7D838D; }
.plans-demo__email:focus, .plans-demo__email:focus-visible { outline: none; }
.plans-demo__send { flex: none; padding: 0 calc(20 * var(--u)); border: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.09);
  color: #F4F4F5; font: 500 calc(13 * var(--u))/1 var(--sans); cursor: pointer; transition: background 160ms ease-out; }
.plans-demo__send:hover { background: rgba(255, 255, 255, 0.15); }
.plans-demo__send:active { background: rgba(255, 255, 255, 0.19); }
.plans-demo__send:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45); }
.plans-demo__send:disabled { cursor: progress; opacity: 0.7; }
.plans-demo__news { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); font: 400 calc(10 * var(--u))/1.4 var(--mono); color: #B4B9C2; cursor: pointer; }
.plans-demo__news[hidden] { display: none; }
.plans-demo__news input { width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin: 0; accent-color: #FF3D27; }
.plans-demo__fine { margin-top: calc(10 * var(--u)); font: 400 calc(8.8 * var(--u))/1.55 var(--mono); color: #6F747C; }
.plans-demo__fine a { color: #9AA0AA; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, 0.25); }
.plans-demo__fine a:hover { color: #E8EAEE; }
/* The confirmation, in the field's place: a tick in the tally colour, a line in the heading's face, and a way back.
   It arrives with a short rise, never while motion is paused. */
.plans-demo__ask[hidden], .plans-demo__sent[hidden] { display: none; }
/* The free download's band: the button in the field's place, its small print under it. */
.plans-demo--download .plans-demo__ask { display: flex; flex-direction: column; align-items: flex-start; }
.plans-demo__go { width: 100%; }
.plans-demo__sent { display: flex; align-items: flex-start; gap: calc(14 * var(--u)); animation: plans-demo-in 260ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes plans-demo-in { from { opacity: 0; transform: translateY(6px); } }
html[data-motion="still"] .plans-demo__sent { animation: none; }
@media (prefers-reduced-motion: reduce) { .plans-demo__sent { animation: none; } }
.plans-demo__tick { flex: none; display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%;
  background: rgba(255, 61, 39, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 84, 66, 0.6), 0 0 calc(14 * var(--u)) rgba(255, 52, 32, 0.35); }
.plans-demo__tick svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: #FF6A55; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plans-demo__sent-head { font: 600 calc(18 * var(--u))/1.25 var(--sans); color: #F4F4F5; }
.plans-demo__sent-say { margin-top: calc(6 * var(--u)); font: 400 calc(10.5 * var(--u))/1.55 var(--mono); color: #B4B9C2; }
.plans-demo__again { padding: 0; border: 0; background: none; color: #9AA0AA; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.plans-demo__again:hover { color: #E8EAEE; }
.plans-demo__done { margin-top: calc(8 * var(--u)); font: 400 calc(10.5 * var(--u))/1.4 var(--mono); color: #E8EAEE; }
.plans-demo__done.is-error { color: #FF8A7A; }

/* The home page's glass buttons, scoped to the section (a copy of home.css's; see the top of this file). */
.plans .button { --mx: 50%; --my: -40%; --lit: 0; --rim: 165deg; isolation: isolate;
  transition: --rim 500ms var(--ease), background-color 320ms var(--ease), box-shadow 320ms var(--ease), transform 460ms cubic-bezier(0.25, 1.3, 0.45, 1); }
.plans .button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--rim), rgba(255, 255, 255, var(--rim-a)) 0%, rgba(255, 255, 255, calc(var(--rim-a) * 0.25)) 22%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, calc(var(--rim-b) * 0.3)) 76%, rgba(255, 255, 255, var(--rim-b)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plans .button::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(calc(110 * var(--u)) circle at var(--mx) var(--my), rgba(255, 255, 255, var(--spec)), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen; mix-blend-mode: plus-lighter; opacity: var(--lit); transition: opacity 320ms var(--ease); }
.plans .button:hover { --lit: 1; }
.plans .button:active { transform: scale(0.965); transition-duration: 500ms, 320ms, 320ms, 90ms; transition-timing-function: var(--ease), var(--ease), var(--ease), ease-out; }
.plans .button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(11 * var(--u)); height: calc(48.5 * var(--u)); padding: 0 calc(26 * var(--u)); border: 0; border-radius: calc(12 * var(--u));
  font: 500 calc(16 * var(--u))/1 var(--sans); color: #fff; text-decoration: none; cursor: pointer; text-shadow: 0 1px 1px rgba(90, 10, 0, 0.25);
  --rim-a: 0.85; --rim-b: 0.45; --spec: 0.34;
  /* At rest a see-through tint, saturated, with its colour gathered at the edges so it stays
     luminous while what is behind shows through the middle; hovered, it thickens to nearly solid.
     The colour is a background colour, which can be animated, and the sheen an image over it. */
  background-color: rgba(255, 64, 34, 0.5);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 52%, rgba(255, 150, 120, 0.14));
  -webkit-backdrop-filter: blur(10px) saturate(220%); backdrop-filter: blur(10px) saturate(220%);
  box-shadow: inset 0 0 calc(16 * var(--u)) rgba(255, 78, 46, 0.6), inset 0 0 calc(5 * var(--u)) rgba(255, 190, 170, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 10px 14px -12px rgba(255, 255, 255, 0.45), inset 0 -14px 18px -12px rgba(255, 196, 176, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.2),
    0 2px 6px -2px rgba(40, 4, 0, 0.6), 0 12px 32px -12px rgba(250, 76, 51, 0.7); }
.plans .button:hover { background-color: rgba(255, 72, 42, 0.93);
  box-shadow: inset 0 0 calc(16 * var(--u)) rgba(255, 96, 64, 0.5), inset 0 0 calc(5 * var(--u)) rgba(255, 200, 180, 0.34), inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 10px 14px -12px rgba(255, 255, 255, 0.5), inset 0 -14px 18px -12px rgba(255, 206, 188, 0.7), inset 0 -1px 1px rgba(255, 255, 255, 0.24),
    0 2px 6px -2px rgba(40, 4, 0, 0.6), 0 14px 38px -12px rgba(250, 76, 51, 0.85); }
.plans .button svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); fill: currentColor; margin-top: -2px; }
.plans .button--quiet { --rim-a: 0.6; --rim-b: 0.24; --spec: 0.2; text-shadow: none;
  background-color: rgba(255, 255, 255, 0.025);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%);
  -webkit-backdrop-filter: blur(14px) saturate(170%) brightness(1.15); backdrop-filter: blur(14px) saturate(170%) brightness(1.15);
  box-shadow: inset 0 0 calc(8 * var(--u)) rgba(255, 255, 255, 0.07), inset 0 1px 1px rgba(255, 255, 255, 0.24), inset 0 10px 14px -12px rgba(255, 255, 255, 0.18), inset 0 -14px 18px -12px rgba(255, 255, 255, 0.12),
    0 2px 6px -2px rgba(0, 0, 0, 0.5), 0 12px 30px -14px rgba(0, 0, 0, 0.8); }
.plans .button--quiet:hover { background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 calc(8 * var(--u)) rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 10px 14px -12px rgba(255, 255, 255, 0.22), inset 0 -14px 18px -12px rgba(255, 255, 255, 0.18),
    0 2px 6px -2px rgba(0, 0, 0, 0.5), 0 14px 34px -14px rgba(0, 0, 0, 0.85); }
.plans .button--quiet svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
html:not(.has-lens) .plans .button:not(.button--quiet):not(:hover) { background-color: rgba(255, 64, 34, 0.7); }
@media (prefers-reduced-transparency: reduce) {
  .plans .button, .plans .button--quiet { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .plans .button, .plans .button:hover { background-color: #F04A31; }
  .plans .button--quiet, .plans .button--quiet:hover { background-color: #1C1D21; }
}
.plans .button:hover { transform: none; }


/* Phones: one column, the promise, the track and the features over the products and the demo. */
@media (max-width: 899px) {
  /* One column: the promise and the round, then the products, then what every license includes, then the
     demo (the owner, 2026-10-17: the list read better under the prices). */
  .plans { display: flex; flex-direction: column; width: auto; padding: 0 20px; }
  .plans__say { display: contents; }
  .plans__big { order: 1; } .plans__lede { order: 2; } .plans-track { order: 3; }
  .plans__buy { order: 4; } .plans__every { order: 5; margin-top: 36px; } .plans__has { order: 6; } .plans-demo { order: 7; }
  /* The products as one square block of three, each pair sharing a rule, as the wide window's table does
     (the owner, 2026-10-24: separate cards with gaps between them read as three offers rather than one list).
     The bundle's red frame is drawn over the rule above it. */
  .plans__head { display: block; margin-top: 28px; padding: 0 0 12px; }
  .plans__col { align-items: flex-start; text-align: left; gap: 6px; }
  .plans__col b { font-size: 12px; gap: 8px; } .plans__col b i { width: 7px; height: 7px; }
  .plans__col small { font-size: 11px; }
  .plans__lines { display: flex; flex-direction: column; border-top: 0; }
  .line { border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)); }
  .line--best { border-color: transparent; background: none; }
  .line + .line { border-top: 0; }
  /* A tap on a line is the button's to answer: the line itself does not light up (the owner, 2026-10-24). */
  .line::before { display: none; }
  /* The round's name and cap head the prices on a wide window; on a phone the round's track says them just
     above, so they are not said twice (the owner, 2026-10-24). The last round has no track, and keeps its
     "Price · One-time, tax included". */
  .plans__head--echo { display: none; }
  .plans__head--echo + .plans__lines { margin-top: 26px; }
  .line--best::after { inset: -1px; }
  .plans-demo { grid-template-columns: 1fr; row-gap: 18px; margin: 40px 0 0; padding: 22px 18px; }
  .plans-demo__eye { font-size: 11px; } .plans-demo__head { font-size: 26px; } .plans-demo__say { font-size: 13px; }
  .plans-demo__pill { height: 48px; } .plans-demo__email, .plans-demo__send { font-size: 15px; }
  .plans-demo__news { font-size: 13px; } .plans-demo__news input { width: 16px; height: 16px; }
  .plans-demo__fine { font-size: 11.5px; } .plans-demo__done { font-size: 13px; }
  .plans-demo__tick { width: 36px; height: 36px; } .plans-demo__tick svg { width: 18px; height: 18px; } .plans-demo__sent-head { font-size: 19px; } .plans-demo__sent-say { font-size: 13px; }
  .plans__big { font-size: clamp(34px, 10.4vw, 46px); }
  .plans__lede { font-size: 13px; }
  .plans-track__mark { font-size: 12px; } .plans-track__mark b span { display: block; margin: 4px 0 0; }
  .plans__every { font-size: 12px; }
  .plans__has { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .plans__has li { font-size: 13px; }
  .plans__has svg { width: 18px; height: 18px; }
  .app-pr { width: 24px; height: 19px; font-size: 10.5px; border-radius: 4px; }
  .line { grid-template-columns: 1fr; row-gap: 12px; }
  .line, .line--best { padding: 20px 18px 20px 38px; } .line__dot { left: 18px; top: 29px; margin-top: 0; width: 8px; height: 8px; }
  .line__who :is(h2, h3) { font-size: 21px; white-space: normal; } .line__who p { font-size: 11.5px; }
  .line__cost { display: block; text-align: left; } .line__cost::before, .line__cost::after { display: none; }
  .line__price { justify-content: flex-start; }
  .line__price b { font-size: 28px; } .line__price s { font-size: 17px; }
  .line__deal { font-size: 11px; } .line__deal b { font-size: 12px; } .line__deal i { width: 6px; height: 6px; }
  .plans .line__go { width: 100%; height: 48px; font-size: 16px; }
  .plans__note { font-size: 13px; }
  .plans__latest { align-items: flex-start; gap: 12px; padding-left: 0; font-size: 12px; }
  .plans__latest i { width: 8px; height: 8px; margin-top: 4.5px; }
}

/* The products' quiet buttons sit over the strongest pool of the page's light, which their clear glass
   saturated into a red as loud as "Bundle & save". A darker body that does not saturate keeps them quiet. */
.plans .line__go.button--quiet { background-color: rgba(22, 22, 26, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.plans .line__go.button--quiet:hover { background-color: rgba(44, 44, 50, 0.78); }

/* Where the links land: Pricing with the section's heading clear of the floating bar, and the demo buttons
   with the form in the middle of the window, the products still in sight above it. Lenis stops short by
   these too (scroll.ts). */
#price { scroll-margin-top: calc(40 * var(--u)); }
#demo { scroll-margin-top: calc(120 * var(--u)); }
@media (max-width: 899px) { #price { scroll-margin-top: 40px; } #demo { scroll-margin-top: 90px; } }

/* The checkout: Stripe's embedded checkout in a panel that slides in from the right, under a bar with the
   lockup (the owner, 2026-10-28, over the centred window it was at launch). The prices stay in view beside it;
   on a phone it is the whole screen. It lived in site.css, which the home page and /pricing do not load, so on
   launch day the window drew with the browser's defaults and clipped Stripe's form; it is here now, beside the
   buttons that open it, with site.css's values written out. data-lenis-prevent (pricing.html) lets it scroll
   natively under the page's smooth scrolling. */
dialog.checkout { position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0;
  overflow-y: auto; overscroll-behavior: contain; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0; background: #fff; color: #111;
  box-shadow: -40px 0 120px rgba(0, 0, 0, 0.6); }
dialog.checkout[open] { animation: checkout-in 360ms cubic-bezier(0.23, 1, 0.32, 1); }
html[data-motion="still"] dialog.checkout[open] { animation: none; }
html.is-checkout { overflow: hidden; }
dialog.checkout::backdrop { background: rgba(5, 6, 8, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes checkout-in { from { transform: translateX(100%); } to { transform: none; } }
.checkout__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 56px; padding: 0 14px 0 20px;
  background: #0E1014; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.checkout__bar img { display: block; height: 18px; width: auto; }
.checkout__close { padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #F1F2F4;
  font: 500 14px/1.2 "Satoshi", -apple-system, sans-serif; cursor: pointer; }
.checkout__close:hover { background: rgba(255, 255, 255, 0.12); }
#checkoutMount { min-height: calc(100dvh - 56px); padding: 8px 0 24px; }