/* Dock Switcher Pro — marketing site.
   One stylesheet, no dependencies, no webfonts: the audience is on macOS, where
   the system stack is SF Pro and already the sharpest thing available. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:        #07080c;
  --bg-2:      #0b0d14;
  --raise:     #12151f;
  --ink:       #f0f2f8;
  --muted:     #98a0b6;
  --faint:     #6f7789;
  --line:      rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .055);
  --accent:    #6d8cff;
  --accent-2:  #b271ff;
  --accent-3:  #43e0c8;
  --radius:    18px;
  --wrap:      1120px;
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .85);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { letter-spacing: -.03em; line-height: 1.08; margin: 0; font-weight: 660; }
h1 { font-size: clamp(2.9rem, 7.2vw, 5.1rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.14; }
h3 { font-size: 1.16rem; letter-spacing: -.02em; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 26px; }
.wrap.narrow { max-width: 760px; }
.center { text-align: center; }
.center-row { justify-content: center; }

.eyebrow {
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .18em;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
}
.sub { color: var(--muted); max-width: 58ch; margin: 18px auto 0; }
.grad {
  background: linear-gradient(103deg, var(--accent) 8%, var(--accent-2) 58%, var(--accent-3) 108%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  padding: 12px 22px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #7b98ff, #5a72f0);
  color: #fff;
  font: inherit; font-weight: 600; font-size: .97rem;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 12px 26px -12px rgba(90, 114, 240, .95);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}
.btn:hover { transform: translateY(-1.5px); box-shadow: 0 1px 0 rgba(255,255,255,.32) inset, 0 20px 34px -14px rgba(90,114,240,1); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-large { padding: 15px 30px; font-size: 1.03rem; border-radius: 14px; }
.btn-small { padding: 9px 17px; font-size: .9rem; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-ghost {
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
}
.btn-ghost:hover { background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

/* ── Nav ─────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 8, 12, .72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; gap: 30px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 6px 16px -6px var(--accent);
  position: relative; flex: none;
}
.brand-mark::after {
  content: ""; position: absolute; inset: 7px 6px auto 6px; height: 8px;
  border-radius: 2px; background: rgba(255,255,255,.85);
  box-shadow: 0 5px 0 rgba(255,255,255,.45);
}
.brand-name { font-weight: 640; letter-spacing: -.02em; }
.brand-name em { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: 26px; margin-left: auto; font-size: .94rem; color: var(--muted); }
.nav-links a { transition: color .15s ease; }
.nav-links a:hover { color: var(--ink); }

/* ── Hero ────────────────────────────────────────────────── */

.hero { position: relative; padding: clamp(64px, 11vw, 118px) 0 0; overflow: hidden; }
.glow {
  position: absolute; inset: -280px 0 auto 0; height: 720px; pointer-events: none;
  background:
    radial-gradient(46% 60% at 30% 40%, rgba(109,140,255,.30), transparent 70%),
    radial-gradient(40% 55% at 72% 30%, rgba(178,113,255,.24), transparent 70%),
    radial-gradient(30% 45% at 52% 62%, rgba(67,224,200,.11), transparent 70%);
  filter: blur(14px);
}
.hero-inner { position: relative; text-align: center; }
.lede { color: var(--muted); font-size: clamp(1.06rem, 1.9vw, 1.28rem); max-width: 62ch; margin: 24px auto 0; }
.lede em { font-style: normal; color: var(--ink); }
.cta-row { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }
.cta-note { margin-top: 16px; font-size: .88rem; color: var(--faint); }

/* ── Product mock ────────────────────────────────────────── */

.stage { margin-top: clamp(48px, 7vw, 84px); }
.stage-note {
  text-align: center; font-size: .78rem; color: var(--muted);
  margin-bottom: 14px; transition: opacity .3s ease;
}
.stage-note.is-spent { opacity: 0; }
/* Deliberately no perspective and no rotateX. A tilt makes the left and right
   edges converge, and a window chrome whose verticals are not vertical reads as
   a mistake rather than as depth. Height comes from shadow and light instead. */
.desktop {
  position: relative;
  max-width: 940px; margin-inline: auto;
  aspect-ratio: 16 / 10.4;
  border-radius: 22px;
  padding: 22px 22px 0;
  background:
    radial-gradient(120% 90% at 20% 0%, #2a3363 0%, transparent 55%),
    radial-gradient(100% 80% at 85% 15%, #4a2f68 0%, transparent 58%),
    linear-gradient(170deg, #141a30 0%, #0a0c16 68%);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.09), 0 0 0 9px rgba(255,255,255,.022);
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}

/* The panel is positioned, not laid out: it has to sit over whichever icon the
   pointer is on, and slide between them. `left` stays at the centre so the
   no-script resting state lands under the middle icon without help. */
.panel {
  position: absolute;
  /* Above the jumped-to window: the real tray is a pop-up-menu-level panel that
     floats over every window, and a tray that a window can cover is a tray you
     cannot use. */
  z-index: 4;
  left: 50%; bottom: 96px;
  /* --dx is how far the hovered icon sits from the desktop's centre line, so
     the no-script resting state (--dx: 0) is centred without any script. */
  transform: translateX(calc(-50% + var(--dx, 0px)));
  padding: 13px;
  border-radius: 16px;
  background: rgba(22, 25, 38, .74);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 30px 60px -24px rgba(0,0,0,.9);
  text-align: left;
  animation: rise .7s cubic-bezier(.2, .9, .25, 1) both .25s;
  /* Position and size travel together, so a two-window tray widens on its way
     to a five-window one instead of snapping. Matches the app's 200ms slide. */
  transition:
    transform .2s cubic-bezier(.2, .8, .3, 1),
    width .2s cubic-bezier(.2, .8, .3, 1),
    height .2s cubic-bezier(.2, .8, .3, 1),
    opacity .15s ease;
}
.panel-body { overflow: hidden; }
/* Re-shown rather than moved when the window count jumps too far to morph. */
.panel.is-arriving { animation: rise .15s cubic-bezier(.2, .9, .25, 1) both; transition: none; }
.panel[hidden] { display: none; }
.panel.is-leaving { opacity: 0; }
@keyframes rise {
  from { opacity: 0; transform: translateX(calc(-50% + var(--dx, 0px))) translateY(14px) scale(.985); }
}
.panel-ghost {
  visibility: hidden; pointer-events: none;
  animation: none; transition: none;
  width: max-content; height: auto;
  left: 0; bottom: 0;
}
.panel-tail {
  position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(22, 25, 38, .74);
  box-shadow: 1px 1px 0 rgba(255,255,255,.10);
  transition: left .2s cubic-bezier(.2, .8, .3, 1);
}
.panel-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.panel-app {
  width: 16px; height: 16px; flex: none;
  background-image: var(--icon);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.panel-title { font-size: .78rem; color: #b9c0d4; font-weight: 550; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), var(--thumb, 132px));
  gap: 9px;
}
.thumb {
  margin: 0; padding: 0; border: 0; background: none; display: block;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: transform .16s ease;
}
.thumb:hover { transform: translateY(-2px); }
.thumb:active { transform: translateY(0); }
.thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.thumb .shot {
  display: block; aspect-ratio: 16 / 10; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 8px 18px -10px rgba(0,0,0,.9);
  position: relative; overflow: hidden;
}
.thumb .shot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 26%;
  background: rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.thumb .shot::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 4px; height: 4px;
  border-radius: 50%; background: #ff5f57;
  box-shadow: 7px 0 0 #febc2e, 14px 0 0 #28c840;
}
.tone-0 { background: linear-gradient(160deg, #f7f9fd, #dbe3f2); }
.tone-1 { background: linear-gradient(160deg, #eef2fa, #ccd6ea); }
.tone-2 { background: linear-gradient(160deg, #f3f6fc, #d3dcee); }

/* Mock window contents. Bars, not text: at this size real text would be mush,
   while the silhouette of a document, a page of code and a chart stay tellable
   apart at a glance — which is the whole claim the thumbnail is making. */
.shot .content {
  position: absolute; inset: 26% 0 0 0;
  padding: 7% 8%;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 8%;
}
/* Colour is set once, on `.content`, so the same markup can be lifted straight
   into the jumped-to window; only geometry is restated there. */
.content i {
  display: block; min-height: 2px; border-radius: 1.5px;
  background: rgba(38, 54, 92, .26);
}
.content .head { background: rgba(28, 40, 74, .5); }
.shot .content i { height: 7%; }
.shot .content .head { height: 11%; }
.w-95 { width: 95%; } .w-90 { width: 90%; } .w-85 { width: 85%; }
.w-80 { width: 80%; } .w-75 { width: 75%; } .w-70 { width: 70%; }
.w-65 { width: 65%; } .w-60 { width: 60%; } .w-55 { width: 55%; }
.w-45 { width: 45%; } .w-40 { width: 40%; } .w-35 { width: 35%; }

/* An editor reads as an editor because it is dark and indented. */
.k-code { background: linear-gradient(160deg, #262e45, #171d2d); }
.shot.k-code::before { background: rgba(255,255,255,.07); }
.k-code .content i { background: rgba(150,180,255,.42); }
.k-code .content .in { margin-left: 12%; background: rgba(255,190,120,.5); }
.k-code .content .in2 { margin-left: 12%; background: rgba(130,220,180,.45); }
.k-notes { background: linear-gradient(160deg, #fdf6dd, #f0e2ab); }
.k-files .content { display: grid; grid-template-columns: 26% 1fr; gap: 6%; align-content: start; }
.k-files .content i:first-child { grid-row: 1 / -1; height: 100%; background: rgba(38,54,92,.14); }
.k-design .content .block {
  height: 46%; border-radius: 3px;
  background: linear-gradient(130deg, #7b6cf6, #43b7f5);
}
.k-chart .content .chart {
  height: 52%; border-radius: 2px; background: none;
  /* Five bars of different heights, drawn without five more elements. */
  background-image: linear-gradient(to top, var(--accent) 38%, transparent 38%),
    linear-gradient(to top, var(--accent) 68%, transparent 68%),
    linear-gradient(to top, var(--accent) 46%, transparent 46%),
    linear-gradient(to top, var(--accent) 92%, transparent 92%),
    linear-gradient(to top, var(--accent) 60%, transparent 60%);
  background-size: 13% 100%; background-repeat: no-repeat;
  background-position: 0 100%, 22% 100%, 44% 100%, 66% 100%, 88% 100%;
  opacity: .75;
}
.thumb.is-front .shot { box-shadow: 0 0 0 1.5px var(--accent), 0 10px 22px -8px rgba(109,140,255,.8); }
.thumb:hover .shot { box-shadow: 0 0 0 1.5px rgba(255,255,255,.4), 0 12px 24px -8px rgba(0,0,0,.9); }
.thumb .cap {
  display: flex; align-items: center; gap: 5px;
  font-size: .66rem; color: #a8b0c4;
  margin-top: 6px; padding-inline: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-3); flex: none; }

.media-card {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding: 9px 11px;
  border-radius: 11px;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.media-card .art {
  width: 38px; height: 38px; border-radius: 7px; flex: none;
  background: conic-gradient(from 210deg, #ff7a59, #ffb545, #d94fff, #ff7a59);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.media-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.media-meta strong { font-size: .76rem; font-weight: 600; }
.media-meta span { font-size: .66rem; color: #99a1b6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-meta .bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); margin-top: 4px; }
.media-meta .bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent-3); }
.media-controls { display: flex; gap: 9px; align-items: center; padding-right: 2px; }
.ctl { width: 0; height: 0; border-style: solid; opacity: .82; }
.ctl.prev { border-width: 5px 8px 5px 0; border-color: transparent #dfe4f0 transparent transparent; }
.ctl.next { border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #dfe4f0; }
.ctl.play { width: 9px; height: 11px; border: 0; background: #dfe4f0; border-radius: 1.5px; box-shadow: 5px 0 0 #dfe4f0; margin-right: 5px; }

.dock {
  position: relative; z-index: 5;
  align-self: center;
  display: flex; align-items: flex-end; gap: 9px;
  padding: 8px 12px 9px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 40px -18px rgba(0,0,0,.9);
}
/* Real application icons, lifted from the bundles on macOS. They arrive with
   their own squircle and their own transparent margin, so the box behind them
   carries no shape of its own — a rounded rectangle and an inset highlight
   underneath would draw a second, slightly wrong icon around the real one. */
.app {
  width: 46px; height: 46px; position: relative;
  padding: 0; border: 0; background: none; cursor: pointer;
  background-image: var(--icon);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.55));
  transition: transform .2s ease;
}
.app:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 11px; }
.app .run {
  position: absolute; left: 50%; bottom: -6px; width: 3.5px; height: 3.5px;
  border-radius: 50%; background: rgba(255,255,255,.75); transform: translateX(-50%);
}
.app.is-hovered { transform: translateY(-9px) scale(1.16); }

/* One source per app, shared by the 46px Dock icon and the 15px chip in the
   tray's title bar. Paths resolve against this stylesheet, not the page. */
.app-finder { --icon: url(icons/finder.png); }
.app-notes  { --icon: url(icons/notes.png); }
.app-word   { --icon: url(icons/word.png); }
.app-chrome { --icon: url(icons/chrome.png); }
.app-music  { --icon: url(icons/music.png); }
.app-code   { --icon: url(icons/code.png); }
.app-trash  { --icon: url(icons/trash.png); }

/* ── The window a click jumps to ─────────────────────────── */

/* Clicking a thumbnail is the product's whole point, so the mock has to show
   what the click buys you: the window itself, arriving from exactly where its
   thumbnail was. The travel is a FLIP transform set by site.js. */
.jumped {
  position: absolute; z-index: 3;
  left: 8%; top: 9%; width: 84%; height: 66%;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(165deg, #f7f9fd, #ccd6ea);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 44px 80px -28px rgba(0,0,0,.95);
  transform-origin: 0 0;
  display: flex; flex-direction: column;
}
.jumped[hidden] { display: none; }
.jumped.is-travelling { transition: transform .34s cubic-bezier(.2, .84, .3, 1), opacity .34s ease; }
.jumped-bar {
  height: 30px; flex: none; display: flex; align-items: center; gap: 8px;
  padding-inline: 11px;
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(10,16,32,.12);
}
.jumped-close {
  width: 11px; height: 11px; border-radius: 50%; border: 0; flex: none;
  background: #ff5f57; cursor: pointer;
  box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}
.jumped-close:focus-visible { outline: 2px solid #0a0c16; outline-offset: 2px; }
.jumped-title {
  margin-left: 44px; font-size: .72rem; font-weight: 600; color: #1b2338;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jumped-body { flex: 1; position: relative; overflow: hidden; }
/* The contents come up from the thumbnail that was clicked, so what you land in
   is what you pointed at rather than a generic placeholder. */
.jumped-page { position: absolute; inset: 0; }
.jumped-page .content {
  position: absolute; inset: 0; padding: 5% 7%; gap: 4.5%;
  display: flex; flex-direction: column;
}
.jumped-page .content i { height: 3.4%; }
.jumped-page .content .head { height: 6%; }

.pointer {
  position: absolute; left: 52%; top: 46%; width: 13px; height: 19px;
  background: #fff;
  clip-path: polygon(0 0, 0 100%, 27% 76%, 44% 100%, 62% 90%, 45% 66%, 100% 62%);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}

/* ── Stats strip ─────────────────────────────────────────── */

.strip { border-block: 1px solid var(--line-soft); margin-top: clamp(56px, 9vw, 110px); background: var(--bg-2); }
.strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-block: 34px; text-align: center; }
.strip-inner div { display: flex; flex-direction: column; gap: 2px; }
.strip-inner strong { font-size: 1.7rem; font-weight: 650; letter-spacing: -.03em; }
.strip-inner span { font-size: .85rem; color: var(--muted); }

/* ── Sections ────────────────────────────────────────────── */

.section { padding: clamp(74px, 11vw, 130px) 0; }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line-soft); }

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 56px;
}
.card {
  padding: 26px 24px 28px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.card-wide { grid-column: span 2; }
.card-quiet { background: linear-gradient(180deg, rgba(109,140,255,.09), rgba(255,255,255,.014)); }
.card-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center;
  font-size: 1.15rem; color: var(--accent);
  background: rgba(109,140,255,.13);
  box-shadow: inset 0 0 0 1px rgba(109,140,255,.28);
}
.card p { color: var(--muted); margin-top: 9px; font-size: .96rem; }
kbd {
  font: inherit; font-size: .86em;
  padding: 1px 6px; border-radius: 5px;
  background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── Steps ───────────────────────────────────────────────── */

.steps {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 56px 0 0;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: 24px 20px 26px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.032);
  box-shadow: inset 0 0 0 1px var(--line);
}
.step-n {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: .85rem; font-weight: 650; color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  margin-bottom: 15px;
}
.steps p { color: var(--muted); font-size: .93rem; margin-top: 8px; }

.callout {
  margin-top: 34px; padding: 24px 26px;
  border-radius: var(--radius);
  background: rgba(178,113,255,.075);
  box-shadow: inset 0 0 0 1px rgba(178,113,255,.24);
}
.callout strong { display: block; margin-bottom: 6px; }
.callout p { color: var(--muted); font-size: .96rem; }

/* ── Pricing ─────────────────────────────────────────────── */

.price-card {
  margin-top: 52px;
  padding: 38px 34px 30px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(109,140,255,.13), rgba(255,255,255,.02) 42%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13), var(--shadow-lg);
  text-align: center;
}
.price-head .badge {
  display: inline-block;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 620;
  color: var(--accent-3);
  padding: 5px 13px; border-radius: 999px;
  background: rgba(67,224,200,.1);
  box-shadow: inset 0 0 0 1px rgba(67,224,200,.28);
}
.price { font-size: 4.6rem; font-weight: 680; letter-spacing: -.045em; line-height: 1.1; margin-top: 18px; }
.price .cur { font-size: 2.1rem; vertical-align: super; margin-right: 2px; font-weight: 600; }
.price .cents { font-size: 2.4rem; letter-spacing: -.03em; }
.price-sub { color: var(--muted); font-size: .95rem; }

.ticks { list-style: none; padding: 0; margin: 28px auto 30px; max-width: 380px; text-align: left; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 30px; font-size: .96rem; color: #cfd5e4; }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: .48em;
  width: 11px; height: 6px; border: 2px solid var(--accent-3);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}
.pay-note { margin-top: 14px; font-size: .84rem; color: #6f7789; }
.fine { margin-top: 20px; font-size: .82rem; line-height: 1.6; color: #7c8399; max-width: 52ch; margin-inline: auto; }
.fine strong { color: #aab1c4; }
.fine a, .callout a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.error { margin-top: 14px; color: #ff8189; font-size: .9rem; }

.trial-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 16px; padding: 20px 24px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.032);
  box-shadow: inset 0 0 0 1px var(--line);
}
.trial-card p { color: var(--muted); font-size: .92rem; margin-top: 2px; }

/* ── FAQ ─────────────────────────────────────────────────── */

details {
  border-bottom: 1px solid var(--line);
  padding: 20px 4px;
}
details:first-of-type { border-top: 1px solid var(--line); margin-top: 48px; }
summary {
  cursor: pointer; list-style: none;
  font-weight: 570; font-size: 1.04rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
details p { color: var(--muted); margin-top: 12px; font-size: .96rem; max-width: 66ch; }
details a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── Closer + footer ─────────────────────────────────────── */

.closer { padding: clamp(80px, 12vw, 140px) 0; background:
  radial-gradient(60% 100% at 50% 0%, rgba(109,140,255,.16), transparent 70%); }
.closer .lede { margin-top: 18px; }

.footer { border-top: 1px solid var(--line-soft); padding: 46px 0 34px; background: var(--bg-2); }
.footer-inner { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer p { color: var(--muted); font-size: .9rem; margin-top: 6px; max-width: 40ch; }
.footer nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: .92rem; color: var(--muted); align-items: flex-start; }
.footer nav a:hover { color: var(--ink); }
.copyright { margin-top: 30px; font-size: .82rem; color: #626a7d; }

/* ── Sub-pages (redeem / download / legal) ───────────────── */

.page { padding: clamp(56px, 8vw, 96px) 0 clamp(70px, 10vw, 110px); }
.page h1 { font-size: clamp(2.1rem, 4.6vw, 3rem); }
.page .lede { margin-inline: 0; }
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.35rem; margin-top: 42px; }
.prose h3 { margin-top: 30px; }
.prose p, .prose li { color: var(--muted); margin-top: 14px; font-size: 1rem; }
.prose ul, .prose ol { padding-left: 22px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); }
.updated { color: #626a7d; font-size: .88rem; margin-top: 10px; }

.form-card {
  margin-top: 40px; padding: 30px 30px 32px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016));
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lg);
}
.field { display: block; margin-bottom: 22px; }
.field span { display: block; font-weight: 570; font-size: .95rem; margin-bottom: 7px; }
.field small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; margin-top: -4px; margin-bottom: 9px; line-height: 1.5; }
input[type=text], textarea {
  width: 100%;
  padding: 13px 15px;
  border: 0; border-radius: 12px;
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .98rem; letter-spacing: .02em;
  resize: vertical;
}
input[type=text]:focus, textarea:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px rgba(109,140,255,.18);
}
input::placeholder, textarea::placeholder { color: #545c70; }

.result {
  margin-top: 28px; padding: 22px 24px;
  border-radius: 16px;
  background: rgba(67,224,200,.075);
  box-shadow: inset 0 0 0 1px rgba(67,224,200,.28);
}
.result h3 { color: var(--accent-3); }
.result p { color: var(--muted); font-size: .93rem; margin-top: 8px; }
.serial {
  display: block; width: 100%; margin-top: 14px; padding: 16px;
  border-radius: 12px; border: 0;
  background: rgba(0,0,0,.42);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .82rem; line-height: 1.85; letter-spacing: .06em;
  word-break: break-all;
  min-height: 118px;
}
.result-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 940px) {
  .cards, .steps { grid-template-columns: repeat(2, 1fr); }
  .card-wide { grid-column: span 2; }
  .nav-links { display: none; }
}
@media (max-width: 660px) {
  body { font-size: 16px; }
  .cards, .steps, .strip-inner { grid-template-columns: 1fr; }
  .card-wide { grid-column: span 1; }
  .strip-inner { gap: 26px; }
  .desktop { aspect-ratio: 4 / 5; padding: 14px 14px 0; }
  /* The tray sizes itself from the window count now, so narrow screens shrink
     the thumbnail rather than dropping windows: hiding the last card used to
     make a three-window app claim it had two. */
  .thumbs { --thumb: 84px; }
  .panel { bottom: 84px; }
  .app { width: 38px; height: 38px; border-radius: 9px; }
  .dock { gap: 6px; }
  .trial-card { flex-direction: column; align-items: flex-start; }
  .price { font-size: 3.6rem; }
  .btn-large { padding: 14px 24px; }
  .cta-row .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Machine code at checkout ────────────────────────────── */

/* The serial is signed for whatever is typed here the instant the payment
   lands, so the field is deliberately prominent and the buy button stays
   disabled until it holds 24 usable symbols. */
.machine-field { margin: 20px 0 16px; text-align: left; }
.machine-field label {
  display: block; font-size: .84rem; font-weight: 600; margin-bottom: 7px;
}
.machine-field input {
  width: 100%; padding: 12px 14px;
  border-radius: 11px; border: 0;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font: inherit; font-size: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em; text-align: center;
}
.machine-field input::placeholder { color: var(--faint); letter-spacing: .08em; }
.machine-field input:focus {
  outline: none; box-shadow: inset 0 0 0 1.5px var(--accent);
}
.machine-field #machine-help {
  margin-top: 8px; font-size: .8rem; color: var(--muted); line-height: 1.5;
}