/* =========================================================
   anchor point studio — store (the aps shop)
   base.css supplies the shell: tokens, page wrapper, grain, nav, footer,
   section labels. This file is the shop, in this order:
     1  elements and shared pieces   buttons, links, chips, notices, frame
     2  home                         hero, lanes, suite band, steps, questions
     3  product page                 stage, buy panel, body blocks, media
     4  cart, checkout, order
     5  account
     6  notices, legal extras
     7  breakpoints                  1199, 767, 380

   Rules (see CLAUDE.md): APS font only, lowercase, square corners, no shadows.
   Type is the fixed scale in base.css (--fs-*); only display type follows the
   viewport. Secondary text is --color-muted, never a dimmed paper.

   Ember (--color-accent) has four roles and no others:
     .btn-accent            the one primary action in view (ink text on ember)
     .anchor / .frame       the small anchor-point square from the product marks
     .cta-link::after       the underline a text link draws on hover
     :focus-visible         the keyboard focus ring
   It is never text, and a chosen state (plan, tab, step) is paper, not ember.
   ========================================================= */

/* =========================================================
   1  elements and shared pieces
   ========================================================= */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.shop-section {
  display: flex;
  flex-direction: column;
  padding: var(--s-9) 0 0;
  position: relative;
  z-index: 1;
}
.shop-section > .section-label-wrapper {
  margin-bottom: var(--s-6);
}
/* "01 footage tools": the index reads paper, the name muted */
.section-label b {
  font-weight: 400;
  color: var(--color-text);
  margin-right: 10px;
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}
.section-title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 16ch;
}
.section-title,
.hero-title,
.suite-band-title,
.support-title,
.page-title,
.notice-message {
  text-wrap: balance;
}
.section-sub {
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 44ch;
  justify-self: end;
}

.muted {
  color: var(--color-muted);
}
.fine {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-muted);
}
.fine a,
.small-print a,
.gate-fine a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-edge);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.fine a:hover,
.small-print a:hover,
.gate-fine a:hover {
  text-decoration-color: var(--color-text);
}
.fine-gap { margin-top: var(--s-4); }
.mb-sm { margin-bottom: var(--s-3); }
.mb-md { margin-bottom: var(--s-5); }
.mt-md { margin-top: var(--s-5); }
.mt-lg { margin-top: var(--s-8); }
.has-js .js-hide { display: none; }
.strike {
  text-decoration: line-through;
  color: var(--color-muted);
}

/* the anchor point: the one ember square every product mark carries */
.anchor {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  flex: none;
}

/* chips: square, hairline, quiet */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-muted);
  border: 1px solid var(--color-rule);
  padding: 4px 8px;
  white-space: nowrap;
}
.badge-hidden,
.badge-strong {
  color: var(--color-text);
  border-color: var(--color-edge);
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* buttons: one primary (ember) per view, the rest outlined */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  font-family: inherit;
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.2;
  padding: 0 20px;
  border: 1px solid var(--color-edge);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn-accent:hover {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-bg);
}
.btn[disabled],
.btn.is-disabled {
  background: transparent;
  border-color: var(--color-rule);
  color: var(--color-faint);
  cursor: default;
  pointer-events: none;
}
.btn-accent[disabled],
.btn-accent.is-disabled {
  background: var(--color-raised);
}
.btn-small {
  min-height: 36px;
  font-size: var(--fs-small);
  padding: 0 14px;
}
.btn-large {
  min-height: 52px;
  font-size: 15px;
  padding: 0 28px;
}
.btn-block {
  width: 100%;
}
.btn[hidden] { display: none; }
.btn .btn-note {
  font-weight: 300;
}

/* text link: no box, the ember underline draws in on hover */
.cta-link {
  display: inline-block;
  font: inherit;
  font-weight: 400;
  color: var(--color-text);
  position: relative;
}
.cta-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width var(--t-slow) var(--ease);
}
.cta-link:hover::after,
.cta-link:focus-visible::after {
  width: 100%;
}
/* inside a sentence a link is underlined in the text's own colour */
p .cta-link,
li .cta-link,
.flash .cta-link {
  text-decoration: underline;
  text-decoration-color: var(--color-edge);
  text-underline-offset: 3px;
}

/* a form button that reads as an inline link */
.link-button {
  font: inherit;
  color: var(--color-muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-rule);
  text-underline-offset: 3px;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--t-fast) var(--ease);
}
.link-button:hover,
.link-button:focus-visible {
  color: var(--color-text);
}

/* add to cart in place (store.js): the in-cart link and the button swap by [hidden],
   and the notice floats, so nothing on the page moves */
.cart-toast {
  position: fixed;
  right: var(--page-inset);
  top: 84px; /* under the nav; the cookie banner owns the bottom */
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  background: var(--color-raised);
  border: 1px solid var(--color-rule);
  border-left: 2px solid var(--color-text);
  padding: 14px 18px;
  font-size: var(--fs-ui);
  line-height: 1.5;
}
.cart-toast[hidden] { display: none; }
.cart-toast .cta-link {
  font-weight: 500;
  white-space: nowrap;
}

/* one-line notice above content (added to cart, saved, errors) */
.flash {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-left: 2px solid var(--color-text);
  padding: 14px 18px;
  font-size: var(--fs-ui);
  line-height: 1.5;
  margin-bottom: var(--s-5);
}
.owned-box {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-left: 2px solid var(--color-ok);
  padding: 14px 18px;
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* the selection frame: a hairline box with square handles and the ember anchor point, the way
   a selected object looks in the product marks. Once per view, around the lead media. */
.frame {
  position: relative;
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
}
.frame::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: 2;
  pointer-events: none;
  --h: linear-gradient(var(--color-edge), var(--color-edge));
  background:
    var(--h) 0 0, var(--h) 50% 0,
    var(--h) 0 50%, var(--h) 100% 50%,
    var(--h) 0 100%, var(--h) 50% 100%, var(--h) 100% 100%;
  background-size: 7px 7px;
  background-repeat: no-repeat;
}
.frame::after {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 2;
  width: 9px;
  height: 9px;
  background: var(--color-accent);
  pointer-events: none;
}

/* the kit's dot grid (40px pitch) for a media well that holds only a mark */
.dotgrid {
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='19' y='19' width='2' height='2' fill='%232A2A2C'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* numbered steps (home "how buying works", product "how it works") */
.step-strip {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--s-6);
}
.step-strip li {
  counter-increment: step;
  border-top: 1px solid var(--color-rule);
  padding-top: var(--s-4);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.55;
  max-width: 34ch;
}
.step-strip li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: var(--s-3);
}
/* the home page's three steps: the numerals carry the block */
.step-strip.is-large li {
  font-size: var(--fs-sub);
  padding-top: var(--s-5);
}
.step-strip.is-large li::before {
  font-size: clamp(56px, 6vw, 132px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-5);
}
/* lists inside a folded row */
.plain-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* accordion */
.faq {
  border-top: 1px solid var(--color-rule);
}
.faq details {
  border-bottom: 1px solid var(--color-rule);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-5);
  padding: 20px 0;
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: 1.35;
  transition: color var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-weight: 300;
  color: var(--color-muted);
  flex: none;
}
.faq details[open] summary::after {
  content: '–';
}
.faq summary:hover::after {
  color: var(--color-text);
}
.faq-answer {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-muted);
  max-width: 68ch;
  padding-bottom: var(--s-5);
}
.faq-answer p + p { margin-top: var(--s-3); }
.faq-answer .cta-link { color: var(--color-text); }

/* index rows: number, name and line, a fact, an action, an arrow */
.rows {
  list-style: none;
  border-top: 1px solid var(--color-rule);
}
.row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto 20px;
  align-items: center;
  gap: var(--s-4);
  padding: 22px 16px;
  margin: 0 -16px;
  border-bottom: 1px solid var(--color-rule);
  transition: background var(--t-base) var(--ease);
}
.row:hover,
.row.is-on {
  background: var(--color-surface);
}
.row-num {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--color-muted);
  align-self: start;
  padding-top: 8px;
}
.row-main {
  min-width: 0;
}
.row-name {
  display: block;
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* the name's link covers the whole row; the controls sit above it */
.row-name a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.row-tag {
  display: block;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-muted);
  margin-top: 4px;
}
.row-fact {
  font-size: var(--fs-body);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.row-fact.is-quiet {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-muted);
}
.row-action {
  position: relative;
  z-index: 1;
  display: flex;
}
.row-arrow {
  color: var(--color-muted);
  transition: transform var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.row:hover .row-arrow {
  color: var(--color-text);
  transform: translateX(4px);
}
.row-thumb {
  display: none;
}

/* =========================================================
   2  home
   ========================================================= */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--s-8);
  min-height: 100vh;
  padding: 120px 0 var(--s-8);
  z-index: 1;
}
/* the photo bleeds to the window's edges, the way the studio site's hero does, and fades into
   the page at the bottom */
.hero-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  z-index: -1;
  overflow: hidden;
}
.hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 12, 13, 0) 50%, var(--color-bg) 100%);
}
/* the hero's studio photo (view_backdrop). Photos sit behind words, never under an app window */
.backdrop {
  position: absolute;
  inset: 0;
  display: block;
}
.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.backdrop.is-dim img {
  filter: brightness(0.5);
}
/* two planes behind a window, the depth mark's stacked outlines as layout */
.stack {
  position: relative;
  isolation: isolate;
  margin: 0 28px 28px 0;
}
.stack::before,
.stack::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--color-rule);
}
.stack::before {
  transform: translate(28px, 28px);
  background: rgba(20, 20, 21, 0.45);
}
.stack::after {
  transform: translate(14px, 14px);
  background: rgba(20, 20, 21, 0.8);
}
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: var(--s-5);
}
.hero-title {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 12ch;
}
.hero-sub {
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 40ch;
  margin-top: var(--s-5);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.hero-actions .cta-link {
  font-size: 15px;
}
.hero-media {
  margin: 0;
  min-width: 0;
}

/* a lane: the rows on one side, a well on the other that shows the row under the pointer */
.lane {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: start;
  gap: var(--s-8);
}
.lane-list { min-width: 0; }
.lane.is-flipped .lane-list  { order: 2; }
.lane.is-flipped .lane-media { order: 1; }
.lane-media {
  position: sticky;
  top: 96px;
  margin: 0;
  min-width: 0;
}
/* the app's window on the same stacked planes as the hero's; the shots swap inside it */
.lane-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
}
.lane-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: var(--color-bg);
  transition: opacity var(--t-slow) var(--ease);
}
.lane-shot.is-on {
  opacity: 1;
}
.lane-shot picture { display: contents; }
.lane-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lane-shot.is-mark img {
  object-fit: contain;
}
.lane-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-5);
}
.lane-foot .fine {
  max-width: 46ch;
}

/* the suite, once: what it is, what's in it, what it costs */
.suite-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: center;
  padding: var(--s-8);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
}
/* the studio symbol, large and faint, running off the band's edge */
.band-emblem {
  position: absolute;
  top: 50%;
  right: -6%;
  z-index: -1;
  height: 190%;
  width: auto;
  max-width: none;
  transform: translateY(-50%);
  opacity: 0.05;
  filter: invert(1);
  pointer-events: none;
  user-select: none;
}
.suite-band-title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 14ch;
}
.suite-band-copy {
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 46ch;
  margin-top: var(--s-4);
}
.mark-row {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  transition: border-color var(--t-fast) var(--ease);
}
a.mark:hover {
  border-color: var(--color-edge);
}
.mark img {
  width: 40px;
  height: 40px;
}
.price-list {
  list-style: none;
  border-top: 1px solid var(--color-rule);
}
.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 16px 0;
  border-bottom: 1px solid var(--color-rule);
}
.price-list-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 15px;
  color: var(--color-muted);
}
.price-list-price {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.suite-band .btn {
  margin-top: var(--s-5);
}

/* preset cards (the only cards left on the home page) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
  transition: border-color var(--t-fast) var(--ease);
}
.product-card:hover {
  border-color: var(--color-edge);
}
.product-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-raised);
}
.product-card-media img,
.product-card-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-card-media picture,
.product-media picture,
.line-thumb picture { display: contents; }
.product-card-media .monogram {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-faint);
}
.product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 0;
}
.product-card-name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.product-card-tag {
  font-size: var(--fs-ui);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-muted);
}
.product-card-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: auto;
  padding-top: 12px;
}
.price-main {
  font-size: var(--fs-sub);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.price-alt {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
}
.product-card-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px 20px;
}
.product-card-actions .btn {
  flex: 1;
}

/* questions and the people to ask, in one block */
.ask {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  align-items: start;
  padding-bottom: var(--s-9);
}
.support-title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  max-width: 13ch;
}
.support-email {
  margin-top: var(--s-5);
  font-size: var(--fs-sub);
}
.ask-more {
  margin-top: var(--s-3);
  font-size: 15px;
}
.support-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: end;
  padding-bottom: var(--s-9);
}
.support-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-rule);
}
.support-links li {
  border-bottom: 1px solid var(--color-rule);
}
.support-links a {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 16px 0;
  font-size: var(--fs-body);
  font-weight: 300;
  transition: color var(--t-fast) var(--ease);
}
.support-links a:hover {
  color: var(--color-muted);
}

/* =========================================================
   3  product page (apps, the suite, presets)
   ========================================================= */

.product {
  display: flex;
  flex-direction: column;
  padding-top: 108px;
  position: relative;
  z-index: 1;
}
.crumbs {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
  margin-bottom: var(--s-5);
}
.crumbs a {
  transition: color var(--t-fast) var(--ease);
}
.crumbs a:hover {
  color: var(--color-text);
}

/* the stage and the page's blocks on the left, the buy panel on the right for the whole
   length of the page. In the markup the panel sits between the two, so on a phone the order
   is media, buy, then the rest. */
.product-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 27vw, 480px);
  grid-template-areas:
    "stage panel"
    "main  panel";
  gap: var(--s-8) var(--s-8);
  align-items: start;
}
.product-stage { grid-area: stage; margin: 0; min-width: 0; }
.product-main  { grid-area: main; min-width: 0; }
.buy-panel     { grid-area: panel; }

.product-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface);
}
.product-media img,
.product-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-media video {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.product-media video.is-playing {
  opacity: 1;
}
.product-media .product-brand {
  object-fit: contain;
}
.product-media .monogram {
  position: absolute;
  left: 24px;
  bottom: 16px;
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--color-faint);
}
/* product media (media-spec.md): the demo loop in the art slot, captioned stills opening a
   lightbox, and the before/after divider. Every file is 1600 x 1000 (16:10) on the ink canvas. */
.product-media.has-loop {
  aspect-ratio: 16 / 10;
  background: var(--color-bg);
}
.product-media.has-loop video {
  object-fit: contain;
  opacity: 1;
}
.product-demo {
  margin: 0;
  min-width: 0;
}
/* the loop buttons (more than one loop): the playing one reads paper */
.media-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--s-4);
  border-bottom: 1px solid var(--color-rule);
}
.media-switch-button {
  padding: 10px 16px 12px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--fs-ui);
  text-transform: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.media-switch-button:first-child {
  padding-left: 0;
}
.media-switch-button[aria-pressed="true"] {
  border-bottom-color: var(--color-text);
  color: var(--color-text);
}
.media-switch-button:hover {
  color: var(--color-text);
}
.product-demo figcaption,
.hero-media figcaption,
.media-still figcaption,
.media-ba figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-ui);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-muted);
}

/* a still's caption is read by the lightbox and by screen readers; the grid shows pictures only */
.media-still figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* the buy panel */
.buy-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
}
.product-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.product-title {
  font-size: clamp(32px, 2.6vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.product-tag {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-muted);
  margin-top: -8px;
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 4px;
}
.product-price .price-main {
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* plan picker: radio inputs styled as rows; the chosen one is paper */
.plan-picker {
  border: 0;
  display: grid;
  min-inline-size: 0;
  gap: 8px;
}
.plan-picker legend {
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 10px;
}
.plan-option {
  position: relative;
  display: block;
  cursor: pointer;
}
.plan-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.plan-card {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  box-sizing: border-box;
  min-height: 52px;
  gap: 12px;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  transition: border-color var(--t-fast) var(--ease);
}
/* a square radio: empty at rest, filled paper when chosen */
.plan-card::before {
  content: '';
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-edge);
}
.plan-option:hover .plan-card {
  border-color: var(--color-edge);
}
.plan-option input:checked + .plan-card {
  border-color: var(--color-text);
}
.plan-option input:checked + .plan-card::before {
  background: var(--color-text);
  border-color: var(--color-text);
}
.plan-option input:focus-visible + .plan-card {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.plan-card-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 15px;
  font-weight: 500;
}
.plan-card-price {
  font-size: var(--fs-body);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.plan-card-promise {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid var(--color-rule);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--color-muted);
  white-space: nowrap;
}

.buy-row {
  display: flex;
  gap: 8px;
}
.buy-row .btn {
  flex: 1;
  min-height: 48px;
}
.plan-picker + .buy-row { margin-top: var(--s-4); }

/* the facts under the button: one line each, in place of paragraphs of fine print */
.buy-facts {
  border-top: 1px solid var(--color-rule);
}
.buy-facts div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--s-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-rule);
}
.buy-facts dt {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
}
.buy-facts dd {
  font-size: var(--fs-ui);
  line-height: 1.45;
}
.buy-facts a {
  text-decoration: underline;
  text-decoration-color: var(--color-edge);
  text-underline-offset: 3px;
}
.buy-facts a:hover {
  text-decoration-color: var(--color-text);
}
/* "also in the aps suite": one row that leads to the suite */
.buy-suite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  font-size: var(--fs-ui);
  transition: border-color var(--t-fast) var(--ease);
}
.buy-suite:hover {
  border-color: var(--color-edge);
}
.buy-suite small {
  display: block;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
  margin-top: 2px;
}
/* where a plug-in runs (data-plugin-hosts): available hosts read paper, upcoming ones muted */
.product-hosts {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-rule);
}
.product-hosts li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: var(--fs-ui);
  text-transform: none;
}
.product-hosts li span:last-child {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
}
.product-hosts li[data-status="upcoming"] {
  color: var(--color-muted);
}

/* the page's blocks */
.product-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
}
.product-block > .section-label-wrapper {
  margin-bottom: var(--s-5);
}
.product-lead p {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.35;
  max-width: 30ch;
}
.product-lead p + p {
  margin-top: var(--s-4);
}
.prose p {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-muted);
  margin-bottom: var(--s-4);
  max-width: 68ch;
}
.prose p:last-child {
  margin-bottom: 0;
}
/* features: an open grid on hairlines, no boxes */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--s-6);
}
.feature-cards.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--color-rule);
}
a.feature-card {
  transition: border-color var(--t-fast) var(--ease);
}
a.feature-card:hover {
  border-top-color: var(--color-text);
}
.feature-card-index {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.feature-card-title {
  font-size: var(--fs-sub);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.feature-card p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-muted);
}
.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-rule);
}
.feature-list li {
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.5;
  padding: 14px 0 14px 24px;
  border-bottom: 1px solid var(--color-rule);
  position: relative;
}
.feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-muted);
}
.feature-list.steps { counter-reset: step; }
.feature-list.steps li::before { counter-increment: step; content: counter(step) '.'; }

.media-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}
.media-still {
  margin: 0;
}
.media-open {
  display: block;
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
  transition: border-color var(--t-fast) var(--ease);
}
.media-open:hover {
  border-color: var(--color-edge);
}
.media-still img,
.media-ba img {
  display: block;
  width: 100%;
  height: auto;
}
.media-ba {
  margin: 0;
}
.media-ba-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--color-rule);
  background: var(--color-bg);
  overflow: hidden;
}
.media-ba-frame img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}
.media-ba-after {
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.media-ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--color-text);
  pointer-events: none;
}
.media-ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.media-ba-frame:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.media-lightbox {
  border: none;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: transparent;
  color: var(--color-text);
}
.media-lightbox::backdrop {
  background: rgba(12, 12, 13, 0.94);
}
.media-lightbox-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 96px;
  touch-action: pan-y;
}
.media-lightbox-body img {
  max-width: 100%;
  max-height: calc(100% - 48px);
  width: auto;
  height: auto;
  border: 1px solid var(--color-rule);
}
.media-lightbox-caption {
  font-size: var(--fs-ui);
  font-weight: 300;
  color: var(--color-muted);
  text-align: center;
}
.media-lightbox .btn {
  background: var(--color-bg);
}
.media-lightbox .btn:hover {
  background: var(--color-text);
}
.media-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.media-lightbox-prev { left: 16px; }
.media-lightbox-next { right: 16px; }
.media-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

.spec-list {
  display: grid;
  grid-template-columns: 14ch minmax(0, 1fr);
  gap: 10px 16px;
}
.spec-list dt {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
  padding-top: 2px;
}
.spec-list dd {
  font-size: 15px;
}

.more {
  margin-top: var(--s-9);
}
.more > .section-label-wrapper {
  margin-bottom: var(--s-5);
}
.small-print {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 84ch;
  margin: var(--s-8) 0 var(--s-8);
}
.small-print p {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-muted);
}
.small-print .cta-link {
  color: var(--color-text);
}

/* phone only: the buy bar that follows once the panel has scrolled away (store.js) */
.buy-bar {
  display: none;
}

/* preset page */
.product-sections {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-8);
  margin-top: var(--s-9);
  padding-bottom: var(--s-8);
}
.product-block + .product-block {
  margin-top: var(--s-7);
}
.product-main > .product-block + .product-block {
  margin-top: 0;
}
.upsell {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.upsell-title {
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.upsell p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-muted);
}

/* form fields: a surface fill and an edge; focus is the ember ring */
.gate-email,
.field-input,
.select {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-edge);
  min-height: 44px;
  padding: 0 12px;
  text-transform: lowercase;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t-fast) var(--ease);
}
.gate-email:hover,
.field-input:hover,
.select:hover {
  border-color: var(--color-muted);
}
.gate-email::placeholder {
  color: var(--color-muted);
}
.select {
  font-size: var(--fs-ui);
  min-height: 40px;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A9590' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* email gate (presets) */
.gate {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gate-label {
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.gate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gate-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.gate-email,
.field-input {
  flex: 1;
  min-width: 0;
}
.gate-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.gate-turnstile:empty {
  display: none;
}
.gate-msg {
  font-size: var(--fs-ui);
  font-weight: 300;
  line-height: 1.5;
  min-height: 21px;
}
.gate-msg.is-error   { color: var(--color-error); }
.gate-msg.is-success { color: var(--color-ok); }
.gate-fine {
  font-size: var(--fs-small);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-muted);
}

/* =========================================================
   4  cart, checkout, order
   ========================================================= */

.page {
  display: flex;
  flex-direction: column;
  padding-top: 108px;
  padding-bottom: var(--s-9);
  min-height: 80vh;
  position: relative;
  z-index: 1;
}
/* cart / checkout / done */
.stepper {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--s-5);
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-faint);
}
.stepper li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stepper li + li::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--color-rule);
}
.stepper .is-done {
  color: var(--color-muted);
}
.stepper .is-current {
  color: var(--color-text);
}
.stepper a:hover {
  color: var(--color-text);
}
.page-title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin-bottom: var(--s-3);
  overflow-wrap: anywhere;
}
.page-sub {
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-muted);
  max-width: 60ch;
  margin-bottom: var(--s-7);
}
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 520px);
  gap: var(--s-8);
  align-items: start;
}
.lines {
  border-top: 1px solid var(--color-rule);
}
.line {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--color-rule);
}
.line-thumb {
  aspect-ratio: 16 / 9;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  position: relative;
  overflow: hidden;
}
.line-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.line-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.line-name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.line-plan {
  font-size: var(--fs-ui);
  font-weight: 300;
  color: var(--color-muted);
}
.line-problem {
  font-size: var(--fs-ui);
  border-left: 2px solid var(--color-warn);
  padding-left: 10px;
}
.line-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 8px;
  font-size: var(--fs-ui);
}
.line-controls form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.line-price {
  font-size: var(--fs-sub);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.summary {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 96px;
}
.summary-title {
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  font-weight: 300;
}
.summary-row span:first-child {
  color: var(--color-muted);
}
.summary-row span:last-child {
  text-align: right;
}
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-rule);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.summary-total span:first-child {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}
.summary-renew {
  font-size: var(--fs-ui);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-muted);
}
.summary .btn-block {
  min-height: 52px;
  font-size: 15px;
}
.summary > .cta-link {
  align-self: flex-start;
  font-size: var(--fs-ui);
}
.summary label.fine {
  margin-bottom: -6px;
}
.suggest {
  border: 1px solid var(--color-rule);
  padding: 18px 20px;
  margin-top: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.suggest p {
  font-size: 15px;
  line-height: 1.5;
}
.empty-state {
  border-top: 1px solid var(--color-rule);
  padding: var(--s-7) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  align-items: flex-start;
}
/* under a section label the label's own rule is the line */
.section-label-wrapper + .empty-state {
  border-top: 0;
  padding-top: var(--s-4);
}
.empty-state p {
  font-size: var(--fs-sub);
  font-weight: 300;
  color: var(--color-muted);
}
.empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* square card form */
.payment-recovery {
  max-width: min(440px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--color-rule);
  background: var(--color-raised);
  color: var(--color-text);
  font: inherit;
}
.payment-recovery::backdrop { background: rgba(12, 12, 13, 0.8); }
.payment-recovery h2 { margin: 0 0 16px; font-size: 22px; line-height: 1.3; }
.payment-recovery p { margin: 0 0 24px; line-height: 1.5; color: var(--color-muted); }
.card-box {
  min-height: 110px;
  padding: 4px 0;
}
#checkout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pay-msg {
  font-size: var(--fs-ui);
  line-height: 1.5;
  min-height: 21px;
}
.pay-msg.is-error {
  border-left: 2px solid var(--color-error);
  padding-left: 10px;
}

/* license keys */
.license-key {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 15px;
  user-select: all;
  overflow-wrap: anywhere;
}
.key-box {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.key-box .license-key {
  font-size: 17px;
}
.key-copy {
  align-self: flex-start;
  font-size: var(--fs-small);
}
.key-copy.is-copied {
  color: var(--color-ok);
}

/* =========================================================
   5  account
   ========================================================= */

.page-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: calc(var(--s-5) * -1);
}
.page-jump form {
  display: flex;
  margin-left: auto;
}
.settings {
  position: static;
  max-width: 560px;
}
.owned {
  border-top: 1px solid var(--color-rule);
}
/* one key per block, full width: head (name beside the key), machines beside the suite's plan,
   then the downloads as a grid of cards. No empty column under the name. */
.owned-item {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--color-rule);
}
.owned-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: start;
}
/* machines alone take the full width; with the suite's plan they share it */
.owned-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px 40px;
  align-items: start;
}
.suite-plans {
  display: flex;
  flex-direction: column;
}
.suite-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-rule);
}
.suite-plan:first-child {
  border-top: 1px solid var(--color-rule);
}
.suite-plan-name {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
}
.suite-plan-price {
  font-size: var(--fs-body);
  font-weight: 500;
  text-align: right;
}
.suite-plan-note {
  grid-column: 1 / -1;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--color-muted);
}
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.download-block {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.download-block > .owned-status {
  margin-top: 0;
  color: var(--color-text);
  font-weight: 400;
}
.download-block .download-list {
  margin: 8px 0;
}
.download-picker:not([hidden]) { display: grid; gap: 16px; margin: 14px 0 4px; }
.download-picker label { display: grid; gap: 6px; font-size: var(--fs-ui); color: var(--color-muted); }
.download-picker select { width: 100%; min-height: 44px; font-size: var(--fs-body); }
.download-picker [hidden], .download-block [data-download-button][hidden] { display: none; }
.owned-name {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.owned-status {
  font-size: 15px;
  font-weight: 300;
  color: var(--color-muted);
  margin-top: 8px;
}
.owned-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.owned-label {
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.key-box .owned-label {
  margin-bottom: 0;
}
.download-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.device-list {
  list-style: none;
  font-size: var(--fs-ui);
  font-weight: 300;
  border-top: 1px solid var(--color-rule);
}
.device-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-rule);
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: var(--fs-ui);
  font-weight: 300;
}
.action-row form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.orders-list {
  list-style: none;
  border-top: 1px solid var(--color-rule);
}
.orders-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-rule);
  font-size: 15px;
  font-weight: 300;
  transition: color var(--t-fast) var(--ease);
}
.orders-list a:hover {
  color: var(--color-muted);
}
/* account page: a suite key's per-app downloads, folded under the suite installer (P1.5) */
.download-more { margin-top: var(--s-4); }
.download-more > summary { cursor: pointer; list-style: none; font-size: var(--fs-ui); }
.download-more > summary::-webkit-details-marker { display: none; }
.download-more > summary::after { content: ' +'; color: var(--color-muted); }
.download-more[open] > summary::after { content: ' –'; }
.download-more[open] > summary { margin-bottom: var(--s-4); }
/* "older version: 1.0.0" under a download's facts line: quiet, but a real link */
.download-older a { text-decoration: none; }
.download-older a:hover { text-decoration: underline; }
/* system glyphs (store_os_icon) */
.os-icon { display: block; width: 14px; height: 14px; }
.os-badges { display: inline-flex; gap: 6px; }
.os-badge { display: flex; color: var(--color-text); }
.os-badge.is-soon { color: var(--color-faint); }
/* each download as a launcher-style install panel (aps_download_block_html): the product's
   art, platform tabs, version, size and platform, then the download button */
.download-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-raised);
  margin: -16px -18px 12px;
  border-bottom: 1px solid var(--color-rule);
}
.download-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.download-art picture { display: contents; }
.dl-os {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}
.dl-os legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: var(--fs-ui);
  color: var(--color-muted);
}
.download-picker .dl-os-opt {
  position: relative;
  display: block;
  cursor: pointer;
  color: var(--color-text);
}
.dl-os-opt input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.dl-os-opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 8px;
  border: 1px solid var(--color-rule);
  border-bottom-width: 2px;
  font-size: var(--fs-ui);
  color: var(--color-muted);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.dl-os-opt + .dl-os-opt span { border-left: 0; }
.dl-os-opt .os-icon { width: 16px; height: 16px; flex: none; }
.dl-os-opt:hover span { color: var(--color-text); }
.dl-os-opt input:checked + span {
  color: var(--color-text);
  background: var(--color-bg);
  border-bottom-color: var(--color-text);
}
.dl-os-opt input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dl-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
}
.dl-facts div { background: var(--color-bg); padding: 10px 12px; min-width: 0; }
.dl-facts dt { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--color-muted); }
.dl-facts dd { margin: 2px 0 0; font-size: var(--fs-ui); overflow-wrap: anywhere; }
.download-block .download-list .btn-accent { flex: 1; min-height: 48px; white-space: normal; text-align: center; }

/* =========================================================
   6  notice pages (expired link, unavailable, unsubscribe), legal extras
   ========================================================= */

.notice {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80vh;
  padding: 108px 0 var(--s-9);
  position: relative;
  z-index: 1;
}
.notice .section-label-wrapper {
  margin-bottom: var(--s-7);
}
.notice .section-content-wrapper {
  align-items: flex-start;
}
.notice-message {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  max-width: 20ch;
}
.notice-sub {
  font-size: var(--fs-sub);
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-muted);
  margin: var(--s-5) 0 var(--s-6);
  max-width: 56ch;
}
/* a confirm step inside a page (delete account, sign out a pc, refund): the page already clears the nav */
.page .notice {
  min-height: 0;
  padding: var(--s-6) 0 0;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 640px;
}
.page .notice .gate-row,
.page .notice .action-row {
  align-self: stretch;
  align-items: center;
  margin-bottom: var(--s-5);
}
.legal-body h3 { font-size: 20px; font-weight: 500; line-height: 1.25; margin: 32px 0 12px; }
.legal-list { list-style: disc outside; padding-left: 1.2em; margin-bottom: 20px; }
.legal-list li { font-size: 17px; font-weight: 300; line-height: 1.7; margin-bottom: 8px; }

/* =========================================================
   7  breakpoints
   ========================================================= */

/* the buy panel follows the page only where it fits the window */
@media (min-width: 1200px) and (min-height: 760px) {
  .buy-panel {
    position: sticky;
    top: 96px;
  }
}
@media (min-width: 1200px) and (max-height: 899px) {
  .buy-panel.is-tall {
    position: static;
  }
}

@media (max-width: 1199px) {
  .hero { gap: var(--s-7); }
  .section-head { gap: var(--s-6); }
  .lane { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
  .row { grid-template-columns: 32px minmax(0, 1fr) auto 20px; }
  .row-action { grid-column: 2 / 4; grid-row: 2; }
  .row-fact { grid-column: 3; }
  .suite-band { grid-template-columns: 1fr; gap: var(--s-7); padding: var(--s-7); }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask, .support-row { gap: var(--s-7); }
  .product-top { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7) var(--s-6); }
  .buy-panel { padding: 22px; }
  .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); }
  .line { grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s-4); }
}

@media (max-width: 767px) {
  .shop-section { padding-top: var(--s-8); }
  .shop-section > .section-label-wrapper { margin-bottom: var(--s-5); }
  .section-head { grid-template-columns: 1fr; gap: var(--s-3); margin-bottom: var(--s-6); }
  .section-title { font-size: 9vw; }
  .section-sub { font-size: var(--fs-body); justify-self: start; }

  .btn { min-height: 48px; font-size: 15px; }
  .btn-small { min-height: 44px; font-size: var(--fs-ui); }
  .flash { margin-bottom: var(--s-4); }
  .cart-toast { left: var(--page-inset); right: var(--page-inset); top: 76px; max-width: none; justify-content: space-between; }

  .hero { grid-template-columns: 1fr; gap: var(--s-7); min-height: 0; padding: 104px 0 var(--s-7); }
  .hero-title { font-size: 12.4vw; max-width: none; }
  .hero-sub { font-size: 17px; margin-top: var(--s-4); }
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--s-4); margin-top: var(--s-5); }
  .hero-actions .cta-link { align-self: flex-start; }
  .frame::before { inset: -3px; background-size: 5px 5px; }
  .frame::after { top: -4px; right: -4px; width: 7px; height: 7px; }

  .stack { margin: 0 14px 14px 0; }
  .stack::before { transform: translate(14px, 14px); }
  .stack::after { transform: translate(7px, 7px); }

  /* a lane on a phone: every row carries its own picture, and the shared well steps aside */
  .lane { grid-template-columns: 1fr; gap: 0; }
  .lane.is-flipped .lane-list { order: 0; }
  .lane-media { display: none; }
  .rows { border-top: 0; }
  .row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 0 0 20px;
    margin: 0 0 20px;
  }
  .row:hover, .row.is-on { background: transparent; }
  .row-thumb {
    display: block;
    grid-column: 1 / -1;
    position: relative;
    aspect-ratio: 16 / 10;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
  }
  .row-thumb picture { display: contents; }
  .row-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .row-thumb.is-mark img { object-fit: contain; }
  .row-num, .row-arrow { display: none; }
  .row-main { grid-column: 1; }
  .row-name { font-size: 22px; }
  .row-fact { grid-column: 2; grid-row: 2; align-self: start; padding-top: 4px; }
  .row-action { grid-column: 1 / -1; grid-row: auto; margin-top: 8px; }
  .row-action form, .row-action .btn { flex: 1; width: 100%; }
  .lane-foot { margin-top: 0; }
  .lane-foot .btn { width: 100%; }

  .suite-band { padding: var(--s-5); gap: var(--s-6); }
  .suite-band-title { font-size: 9vw; }
  .suite-band-copy { font-size: var(--fs-body); }
  .mark { width: 52px; height: 52px; }
  .mark img { width: 32px; height: 32px; }
  .mark-row { gap: 8px; margin-top: var(--s-5); }
  .price-list-price { font-size: 20px; }
  .suite-band .btn { width: 100%; }

  .step-strip { grid-template-columns: 1fr; gap: var(--s-5); }
  .step-strip li { max-width: none; }
  .step-strip.is-large { gap: var(--s-6); }
  .step-strip.is-large li::before { font-size: 18vw; margin-bottom: var(--s-4); }

  .product-grid { grid-template-columns: 1fr; gap: var(--s-4); }

  .ask, .support-row { grid-template-columns: 1fr; gap: var(--s-6); padding-bottom: var(--s-8); }
  .support-title { font-size: 9vw; }
  .faq summary { font-size: 17px; padding: 18px 0; }

  .product { padding-top: 88px; }
  .crumbs { margin-bottom: var(--s-4); }
  .product-top {
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "panel" "main";
    gap: var(--s-6);
  }
  .buy-panel { padding: 20px; }
  .product-title { font-size: 10vw; }
  .product-main { gap: var(--s-8); margin-top: var(--s-5); }
  .product-lead p { font-size: 6vw; max-width: none; }
  .media-switch-button { padding: 12px 14px 14px; min-height: 44px; }
  .feature-cards,
  .feature-cards.two-up { grid-template-columns: 1fr; gap: var(--s-5); }
  .media-strip { grid-template-columns: 1fr; gap: var(--s-5); }
  .media-lightbox-body { padding: 64px 12px 84px; }
  .media-lightbox-nav { top: auto; bottom: 16px; transform: none; }

  .more { margin-top: var(--s-8); }
  .small-print { margin: var(--s-7) 0; }

  /* the buy bar: name and price on the left, the action on the right */
  .buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: 10px var(--page-inset);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--color-raised);
    border-top: 1px solid var(--color-rule);
    transform: translateY(100%);
    transition: transform var(--t-slow) var(--ease);
  }
  .buy-bar.is-on { transform: none; }
  .buy-bar[hidden] { display: none; }
  .buy-bar-name { display: block; font-size: 15px; font-weight: 500; }
  .buy-bar-price { display: block; font-size: var(--fs-small); color: var(--color-muted); }
  .buy-bar form { display: flex; }
  .buy-bar .btn { min-height: 44px; }

  .product-sections { grid-template-columns: 1fr; gap: var(--s-7); margin-top: var(--s-7); }
  .gate-row { flex-direction: column; }
  .gate-email, .field-input { min-height: 48px; flex: none; }

  .page { padding-top: 88px; padding-bottom: var(--s-8); }
  .page-title { font-size: 10vw; }
  .page-sub { font-size: var(--fs-body); margin-bottom: var(--s-6); }
  .two-col { grid-template-columns: 1fr; gap: var(--s-6); }
  .line { grid-template-columns: 30vw minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; }
  .line-name { font-size: 18px; }
  .line-price { grid-column: 2; text-align: left; font-size: var(--fs-body); }
  .select { min-height: 44px; }
  .summary { position: static; padding: 20px; }
  .suggest { padding: 16px; }
  .suggest .btn { width: 100%; white-space: normal; }
  .empty-actions { flex-direction: column; align-self: stretch; }
  .key-box .license-key { font-size: 15px; }

  .page-jump { margin-top: calc(var(--s-3) * -1); }
  .page-jump form { margin-left: 0; }
  .owned-item { gap: var(--s-5); padding: var(--s-6) 0; }
  .owned-head, .owned-pair, .download-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .owned-name { font-size: 24px; }
  .orders-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .orders-list a span:nth-child(2) { display: none; }

  .notice { padding: 88px 0 var(--s-8); min-height: 0; }
  .notice .section-label-wrapper { margin-bottom: var(--s-6); }
  .notice-message { font-size: 9vw; }
  .notice-sub { font-size: var(--fs-body); }
  .legal-list li { font-size: var(--fs-body); }
}

@media (max-width: 380px) {
  .buy-facts div { grid-template-columns: 72px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lane-shot, .row, .row-arrow, .buy-bar { transition: none; }
}