/* ============================================================
   Landing, built on the terminal's own tokens (frontend/assets/css/tokens.css),
   so porting into Nuxt is a literal move rather than a reinterpretation.
   Dark only, deliberately: the product has one visual world and this page lives in it.
   ============================================================ */
:root {
  color-scheme: dark;
  /* Ground sits darker than the app itself: the product screenshots are the only
     saturated thing on the page, and a near-black page lets them carry the colour.
     Hairlines are white-alpha rather than a grey token so they read the same over the
     ground, over a panel and over a screenshot. */
  --bg:            #000000;
  --surface:       #0d0d0e;
  --surface-2:     #121213;
  --border:        rgba(255, 255, 255, 0.12);
  --border-subtle: rgba(255, 255, 255, 0.07);
  --text-head:     #ededed;
  --text-strong:   #d4d4d4;
  --text-secondary:#a0a0a0;
  --text-dim:      #6d6d6d;
  /* Apple's own eyebrow grey, measured on the 'Design' lockup: rgb(110,110,115). */
  --text-sub:      #6e6e73;
  /* The reference page's own band grey behind its gallery: rgb(29,29,31). */
  --band:          #1d1d1f;
  --on-fill:       #ffffff;
  /* The product's cyan, spent on ACTION only: the button, focus, the live dot. Wearing it
     on every eyebrow and bullet made it compete with the candles in the shots. */
  --accent:        #54b9d1;
  /* Gold, spent only on the top tier: warm enough to read as the step above cyan on this
     ground, desaturated enough not to fight the candles in the screenshots above. Three stops,
     so the surfaces with room for one get a real sweep instead of a flat wash. */
  --gold:          #e0b357;
  --gold-hi:       #f6dfa4;
  --gold-lo:       #c08b2e;
  --success:       #34c759;
  --danger:        #ff383c;
  --wrap: 1180px;
  /* One family across the page, as in the product itself. Figures keep tabular numerals so
     digits still line up in a column without a second face. */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-strong);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Micro-label: the terminal's own idiom (.sheet-hdr-title) */
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 12px;
}
.eyebrow.muted { color: var(--text-dim); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; color: var(--text-head); }
h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.15; }
h3 { font-size: 17px; line-height: 1.3; }
p { margin: 0; }
.lede { font-size: clamp(15px, 1.6vw, 18px); color: var(--text-sub); max-width: 54ch; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: 56px; display: flex; align-items: center;
  background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(14px);
  /* Heavier than the page's own hairlines: this one separates the fixed bar from content
     scrolling underneath it, so it has to hold at every scroll position. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
/* Three tracks, not space-between: the middle group stays centred on the page no matter how
   wide the mark or the action grows. */
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.nav .brand { justify-self: start; }
.nav .nav-cta { justify-self: center; }
.nav-mid { display: flex; align-items: center; gap: 12px; justify-self: end; }
/* The bar hands over. While the hero's own call is on screen it carries the price; the
   moment that call scrolls away the same action takes the middle of the bar. Bound to the
   hero button leaving the viewport rather than to a pixel count, so the swap happens exactly
   when the reader loses the thing it replaces. */
.nav-cta {
  /* Scrubbed, not triggered. --p is written from the scroll position, so the button is drawn
     forward out of the dark by the reader's own hand: it starts the instant the hero call's
     bottom edge passes under the bar's bottom edge. No transition here on purpose - a
     transition would lag behind the finger. */
  --p: 0;
  opacity: var(--p);
  transform: scale(calc(0.8 + 0.2 * var(--p)));
  filter: blur(calc((1 - var(--p)) * 6px));
  visibility: hidden; pointer-events: none;
  will-change: opacity, transform, filter;
}
.nav.handover .nav-cta { visibility: visible; pointer-events: auto; }
/* Content pages have no hero to hand over from: the bar's call is simply on. */
.nav.static .nav-cta { --p: 1; visibility: visible; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .nav-cta { transform: none; filter: none; }
}
/* Price is a fact, so it stays in text colours - the accent on this page is reserved for
   the one action. The figure itself carries the weight. */
.nav-price { font-size: 13.5px; color: var(--text-head); font-weight: 800; white-space: nowrap; }
.nav-price i { font-style: normal; font-weight: 400; color: var(--accent); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--text-head); text-decoration: none; }
.brand .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.15);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 7px; border: 1px solid transparent;
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #08262e; }
.btn-primary:hover { background: #6cc8dd; }
.btn-gold { background: linear-gradient(140deg, var(--gold-hi), var(--gold) 46%, var(--gold-lo)); color: #2c2004; }
.btn-gold:hover { background: linear-gradient(140deg, #fff1d2, var(--gold-hi) 46%, var(--gold)); }
.btn-ghost { border-color: var(--border); color: var(--text-strong); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { height: 48px; padding: 0 26px; font-size: 15px; }
/* The header's secondary call is the SAME button as the primary, only narrower text. Lives
   here, not in the nav block: the base .btn rules come later in the sheet and would win the
   radius back. */
.btn-sm { height: 40px; padding: 0 18px; font-size: 13.5px; border-radius: 999px; }

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

/* ── Primary call: a dark pill with a light travelling around its contour ──
   The light rides an SVG outline, not a rotating conic gradient. A conic gradient turns at
   a constant ANGLE, and on a stretched pill equal angles cover wildly unequal distance: the
   light crawled around the round ends and raced along the straight sides. A stroke dash on
   the outline moves in units of path LENGTH, so the speed is even the whole way round, and
   pathLength="100" normalises it so the same duration holds at any button width.
   Two strokes: a short bright head and a longer faint tail behind it. */
.btn-glow {
  position: relative;
  border-radius: 999px;
  border: none;
  color: var(--accent);
  background:
    radial-gradient(120% 120% at 50% 210%, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%),
    #17171a;
  /* A hairline of the accent, almost invisible: it gives the pill a resting contour so the
     travelling light has a track to run on instead of appearing out of nothing. */
  box-shadow: 0 0 0 1px rgba(84,185,209,0.22), 0 10px 30px rgba(0,0,0,0.5);
}
/* An <svg> is a replaced element: with only `inset` set it falls back to its intrinsic
   300x150 instead of filling the button, and the outline gets drawn somewhere else
   entirely. The box has to be stated. It covers the button exactly, so the stroke sits
   centred on the button's own edge instead of floating inside it. */
.btn-glow > .glow-ring {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
/* A single dash is evenly bright end to end, so its ends read as hard cuts. The light is
   therefore built from many short segments strung along the same outline, each one dimmer
   and thinner than the one ahead of it, each started at a slightly earlier phase. They
   overlap into one streak that fades out behind the head: a real falloff rather than a
   clipped arc. Segments are generated at the bottom of the page so the markup stays one
   empty <svg>. */
.glow-ring { filter: drop-shadow(0 0 4px rgba(84,185,209,0.45)); }
.glow-ring rect {
  fill: none; stroke: #9bdcec; stroke-linecap: round;
  stroke-dasharray: 3.5 96.5; stroke-dashoffset: 100;
  animation: ring-run 7.15s linear infinite;
}
.btn-glow:hover { background:
    radial-gradient(120% 120% at 50% 210%, rgba(255,255,255,0.24), rgba(255,255,255,0) 60%),
    #1c1c20; }
@keyframes ring-run { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .glow-ring rect { animation: none; }
}

/* Hero. The screenshot used to sit behind the words under a scrim, which dimmed the one
   thing that actually sells. Now the words stand on clean ground and the terminal is shown
   underneath at full fidelity, lit from behind. */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; max-width: 1308px; padding-top: clamp(64px, 10vw, 120px); padding-bottom: 0; text-align: center; }
.hero h1 { max-width: 1260px; margin: 0 auto; text-wrap: normal; }
/* The product's own name, in the accent the calls to action already wear. */
.hero h1 .mark { color: var(--accent); }
.hero .lede {
  margin: 18px auto 0;
  font-size: clamp(16px, 1.8vw, 20px); font-weight: 500;
  letter-spacing: 0.01em; color: var(--text-sub);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; justify-content: center; }
.hero-note { margin-top: 12px; font-size: 13px; color: var(--text-dim); }

/* The hero shot is a reel: one screen at a time, advancing on its own, on the grey band the
   reference gallery uses (apple.com/iphone-18-pro, "Get the highlights.": band #1d1d1f,
   black tiles 1260x612 at 28px radius, 20px apart, centred with the neighbours peeking).
   Timing is theirs too: a 1030ms eased travel of one tile, then 5.67s on screen. No
   controls - the reader gets the tour without being handed a player. */
.reel-band {
  /* One tile width for the whole block. Stated once against the viewport, because a
     percentage here would resolve against the track's own padded box and shrink itself. */
  --tile: min(1260px, 87.5vw);
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(36px, 4.5vw, 64px) 0;
  background: var(--band);
}
.reel {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel.is-animating { scroll-snap-type: none; }
.reel-track {
  display: flex; gap: 20px;
  padding-inline-start: calc((100vw - var(--tile)) / 2);
}
/* A scroll container leaves its end padding out of the scrollable area, so the last tile
   could never reach the centre. A spacer can: it is real content. Its width is the inset
   the gap before it does not already cover. */
.reel-track::after {
  content: ''; flex: 0 0 calc((100vw - var(--tile)) / 2 - 20px);
}
.reel-dots { display: flex; justify-content: center; gap: 10px; margin-top: clamp(20px, 2.2vw, 30px); }
.reel-dots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); transition: background .35s ease;
}
.reel-dots i.on { background: #f5f5f7; }
/* The tile is the black plate; the screenshot sits inside it. */
.slide {
  flex: 0 0 var(--tile); margin: 0;
  scroll-snap-align: center;
  aspect-ratio: 1260 / 612; border-radius: 28px; overflow: hidden;
  background: #000;
}
.slide img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Three claims under the hero shot. No frame of any kind: they sit on the page ground.
   Three equal columns with the text centred in each: the block centres land on exact thirds,
   so the spacing is even by construction and the middle one sits on the page centre. Centring
   variable-width blocks in a 1fr auto 1fr grid did neither - the wide third block crowded its
   neighbour and the side gaps came out 131 against 61. */
.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
  gap: 24px; padding: clamp(34px, 4.5vw, 56px) 0 0;
  /* The group is narrower than the shot above it: spread across the full width the three
     claims read as three separate notes, drawn in they read as one line. */
  max-width: 1080px; margin-inline: auto;
}
.stat { justify-self: stretch; text-align: center; }
/* Three tiers, to the measurements taken off the reference page: qualifier and caption are
   the SAME - 12px, weight 600, one grey, 16px line - so the figure sits symmetrically between
   two identical bands. The figure itself is far smaller than instinct suggests (28px, line
   height exactly 1, only 2px of air either side); the restraint is what makes it read as
   engineering rather than advertising. */
.stat em {
  display: block; font-style: normal;
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: -0.01em;
  color: var(--text-dim);
}
.stat b {
  display: block; margin: 2px 0;
  font-size: clamp(23px, 2.2vw, 28px); font-weight: 600; line-height: 1;
  letter-spacing: 0.007em; font-variant-numeric: tabular-nums;
  color: var(--text-head); white-space: nowrap;
}
.stat b i { font-style: normal; font-size: 0.56em; font-weight: 600; margin-left: 1px; }
.stat span {
  display: block; margin: 0 auto; max-width: 22ch;
  font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: -0.01em;
  color: var(--text-dim);
}

/* A single hairline where one band genuinely ends and another begins - not a frame, just a
   seam. Everywhere else the sections are still separated by space alone. */
.rule {
  /* Measured off the reference page: a flat 1px line in rgba(134,134,139,0.37) across the
     full content width, no fade. The air above and below it matches. */
  border: none; height: 1px; margin: clamp(44px, 5vw, 64px) 0 0;
  background: rgba(134, 134, 139, 0.37);
}

/* Section rhythm. No rules between sections: the separation is space, which is what lets a
   dark page feel composed rather than tabulated. */
section { border-bottom: none; }
.pad { padding: clamp(76px, 10vw, 132px) 0; }
/* Equal air on both sides of the seam - the same distance the claims keep above it. */
.pad-seam { padding-top: clamp(44px, 5vw, 64px); }
/* Section openers are centred and set large, with the small grey qualifier above them - the
   same three-tier idea the claims under the hero use. */
/* Measured on apple.com/iphone-18-pro at 1440 (The ultimate upgrade / Most wanted.):
   kicker 21/600, line-height 21, letter-spacing +0.011em, #6e6e73, sentence case;
   headline 96/600, line-height 100 (1.042), letter-spacing -0.015em, #f5f5f7; gap 20px. */
.head-c { max-width: 1000px; margin: 0 auto; text-align: center; }
.head-c .eyebrow {
  font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1;
  letter-spacing: 0.011em; text-transform: none; color: var(--text-dim); margin-bottom: 20px;
}
/* Section openers carry the hero's own headline scale, so every heading on the page is one
   size. */
.head-c h2,
.close h2 { font-size: clamp(36px, 6vw, 68px); line-height: 1.04; letter-spacing: -0.035em; }
.head-c .lede { margin: 20px auto 0; line-height: 1.4; max-width: 58ch; }

/* One mode per band: words centred above, the product full width below. */
.mode + .mode { margin-top: clamp(80px, 11vw, 140px); }
.mode-text { max-width: 720px; margin: 0 auto; text-align: center; }
.mode-text h3 { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.mode-text p { margin-top: 14px; color: var(--text-secondary); font-size: clamp(15px, 1.6vw, 17px); }
/* The shot carries itself: rounded corners and a soft drop, no frame and no caption bar.
   A border around a screenshot of a bordered UI reads as a frame inside a frame. */
.shot { margin: clamp(34px, 5vw, 60px) 0 0; }
.shot img {
  width: 100%; border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.06);
}
/* One quiet line of facts under the visual, instead of a bullet list beside it. */
.shot-facts {
  margin: clamp(20px, 2.6vw, 30px) auto 0; max-width: 900px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px;
  font-size: 13.5px; color: var(--text-dim); text-align: center;
}
.shot-facts span { position: relative; }
.shot-facts span + span::before {
  content: ""; position: absolute; left: -14px; top: 50%;
  width: 3px; height: 3px; border-radius: 50%; background: var(--text-dim); opacity: 0.7;
}

/* Alerts: four statements on the open page, two by two, no panel around them. */
.facts {
  margin: clamp(40px, 5vw, 64px) auto 0; max-width: 940px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 48px);
}
.fact { font-size: 15px; color: var(--text-secondary); line-height: 1.5; }
.fact b { display: block; color: var(--text-head); font-weight: 600; margin-bottom: 5px; font-size: 16px; }

/* Speed: the measurements wear the same three tiers as the claims under the hero. */
.gauge {
  margin: clamp(40px, 5vw, 64px) auto 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}

/* Capability chips: the reference page's shape (a pill with a ringed mark on the left and
   the label beside it) laid out on the three-column grid these twelve items have always
   used. Cells start at the top, so opening one chip never stretches its two neighbours.
   The chevron flips on open. The body is in place and empty - descriptions land there later,
   and until they do a chip opens to nothing on purpose. */
.caps {
  margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; list-style: none; max-width: 1060px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: 12px 40px;
}
.chip { display: block; }
.chip-btn {
  /* The pill hugs its label - the cell only fixes where the column starts, never how wide
     the pill is. The body below keeps the full cell for the description. */
  width: fit-content; max-width: 100%; text-align: left;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px 0 10px;
  border: none; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-head); font-family: var(--sans); font-size: 16px; font-weight: 500;
  letter-spacing: -0.01em; transition: background .15s;
}
.chip-btn:hover { background: rgba(255, 255, 255, 0.12); }
.chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The project's own chevron rather than a plus, inside the same ring. Open flips it up, so
   the mark always points at where the answer is - down to reveal, up to fold away. */
.chip-mark {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text-head);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .15s;
}
.chip-mark svg { width: 15px; height: 15px; display: block; }
.chip-btn[aria-expanded="true"] .chip-mark { transform: rotate(180deg); border-color: rgba(255,255,255,0.5); }
.chip-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); }
.chip-body { font-size: 14px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .chip-mark { transition: none; }
}

/* Closing call */
.close { text-align: center; }
.close .hero-cta { justify-content: center; margin-top: 34px; }

footer { padding: 44px 0 48px; border-top: 1px solid var(--border-subtle); }
/* Footer: brand column plus three link columns on one hairline, the eyebrow grey for headings. */
.foot-grid { display: grid; grid-template-columns: 2fr repeat(2, minmax(0, 1fr)); gap: 28px 32px; align-items: start; }
.foot-brand p { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-h { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-sub); }
.foot-col a { font-size: 14px; color: var(--text-secondary); text-decoration: none; width: fit-content; }
.foot-col a:hover { color: var(--text-head); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* One restrained motion device, off when asked */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
}

/* Responsive */
/* ── Plans ───────────────────────────────────────────────────────────────────────────────
   The shape every tool in this market uses, checked live on coinglass and bookmap rather than
   recalled: tier name, the figure set large, a period qualifier, one call, then a ticked list.
   The structure is borrowed, the look is not - the cards are this page's own hairline panels,
   and cyan still goes on action alone, which is why only the picked tier's border wears it. */
.plans {
  margin: clamp(40px, 5vw, 64px) auto 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start;
}
.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 30px 26px 28px;
}
/* Each tier owns one colour and wears it on the same five places: hairline, tagline, ticks,
   the Learn more pill and the call. Free's colour is plain white - the step below cyan. */
.plan.free { border-color: rgba(255, 255, 255, 0.28); }
.plan.free .plan-name,
.plan.free .plan-note { color: var(--text-head); }
.plan.free .plan-name { font-weight: 400; }
.plan.free .btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: var(--text-head); }
.plan.free .btn-ghost:hover { border-color: #ffffff; color: #ffffff; }
/* The tier we expect most people to take reads first: accent hairline, lighter ground, badge. */
.plan.pick { background: var(--surface-2); border-color: rgba(84, 185, 209, 0.45); }
/* The top tier is the same idea one step warmer, and its hairline is a real gradient: two
   background layers, the card's own ground clipped to the padding box and the gold clipped to
   the border box, which is the only way a 1px border takes a sweep. */
.plan.gold {
  border-color: transparent;
  background-image:
    linear-gradient(var(--surface), var(--surface)),
    linear-gradient(140deg, var(--gold-hi), var(--gold) 42%, var(--gold-lo));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
/* Everything the card accents goes gold with it. Flat on small type on purpose: a gradient
   inside 13px text turns to mud - the same reason the ladder bars lost theirs. */
/* A third larger than the tier labels it sits above, and half of it rides above the card's
   edge - the badge is the one thing on this row that has to be caught before anything is read. */
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  height: 27px; padding: 0 14px; border-radius: 999px;
  background: var(--accent); color: #08262e;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.65px; text-transform: uppercase;
  display: inline-flex; align-items: center; white-space: nowrap;
}
/* Centred and half again the old size: the tier is what a reader picks between, so it leads
   the card rather than sitting on it as a tag. Each card paints it in its own colour below,
   and its weight climbs with the tier - 400 / 700 / 900. The steps are two cuts apart on
   purpose: at 800 against 900 the difference between Pro and Max was not readable. */
.plan-name {
  font-size: 19px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-secondary); text-align: center;
}
/* Figures keep tabular numerals so the three prices line up across the cards. */
/* Figure centred, its qualifier on the line under it. The block keeps a fixed height so Free,
   which carries no qualifier, reserves the same space and all three calls stay on one line. */
.plan-fig {
  margin-top: 16px; min-height: 72px;   /* measured height of a figure WITH its qualifier */
  display: flex; flex-direction: column; align-items: center;
  color: var(--text-head); font-variant-numeric: tabular-nums;
}
.plan-fig b { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.plan-fig i {
  margin-top: 6px; white-space: nowrap;
  font-style: normal; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-dim);
}
/* Centred, with the tier and the figure above it. No reserved height any more: the three
   notes are one line each, so they align on their own - keep them that way, or a longer one
   will lift its card's call clear of its neighbours. */
.plan-note {
  margin-top: 16px; text-align: center;
  font-size: 14.5px; line-height: 1.45; color: var(--text-secondary);
}
/* The tagline is where each tier states its character, so it wears that tier's colour. One
   weight across all three - the climb lives on the names above. */
.plan.pick .plan-name { color: var(--accent); font-weight: 700; }
.plan.pick .plan-note { color: var(--accent); }
/* 900 is Inter's heaviest cut - there is no weight above this one. */
.plan.gold .plan-name { color: var(--gold); font-weight: 900; }
.plan.gold .plan-note { color: var(--gold); }
.plan .btn { margin-top: 24px; width: 100%; }
/* ── What's in each tier ─────────────────────────────────────────────────────────────────
   The cards carry the offer; the matrix carries the detail. Keeping both meant reading the
   same features three times over, once per card, with no way to compare a single line across
   tiers - which is the only question this block exists to answer. */
.cmp { margin: clamp(40px, 5vw, 64px) auto 0; max-width: 1000px; }
.cmp-title { font-size: 17px; font-weight: 600; color: var(--text-secondary); text-align: center; margin-bottom: 18px; }
/* The table scrolls inside its own box, so a narrow window never pushes the page sideways. */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp table { width: 100%; min-width: 620px; border-collapse: collapse; }
.cmp th, .cmp td {
  padding: 13px 14px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle); font-size: 14px; font-weight: 400;
}
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: none; }
.cmp th[scope="row"] { text-align: left; color: var(--text-secondary); }
/* Block headers of the matrix: one hairline row per product mode, left-aligned like the feature names. */
.cmp tr.grp th { text-align: left; padding-top: 22px; padding-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-head); border-bottom: 1px solid var(--border-subtle); }
.cmp tbody tr.grp:first-child th { padding-top: 6px; }
/* Feature names sit one step in from their block header, so the two never read as one column. */
.cmp tbody tr:not(.grp) th[scope="row"] { padding-left: 34px; }
/* Fixed shares, so the three tier columns are equal: left to itself the table sized them by
   content and the calls under them came out different widths. */
.cmp table { table-layout: fixed; }
.cmp col.c-label { width: 40%; }
.cmp col.c-tier { width: 20%; }
.cmp td { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.cmp td.no { color: var(--text-dim); }
.cmp thead th {
  padding-bottom: 14px; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase;
}
/* Left-aligned over the column it heads, and quiet: it names the axis, it is not a tier. */
.cmp .c-feat { text-align: left; color: var(--text-dim); font-weight: 600; }
/* The header carries each tier's colour and weight, so a column is identified by the same
   two signals the card above it uses. */
.cmp .c-free { color: var(--text-head); font-weight: 400; }
.cmp .c-pro { color: var(--accent); font-weight: 700; }
.cmp .c-max { color: var(--gold); font-weight: 900; }
/* A drawn tick rather than a glyph: one less thing that shifts with the font stack. */
.cmp .yes {
  display: inline-block; width: 11px; height: 6px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
}
.cmp td:nth-child(2) { color: var(--text-head); }
.cmp td:nth-child(3) { color: var(--accent); }
.cmp td:nth-child(4) { color: var(--gold); }
.cmp td.no:nth-child(n) { color: var(--text-dim); }
/* The calls repeat under their own columns: by the time a reader has worked down fourteen
   rows the cards are off screen, and the decision is made here. */
.cmp tfoot td { padding-top: 24px; border-bottom: none; }
.cmp tfoot .btn { width: 100%; max-width: 210px; }
/* Free's white call, same as on its card - the table sits outside .plan, so it needs its own. */
.cmp .btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: var(--text-head); }
.cmp .btn-ghost:hover { border-color: #ffffff; color: #ffffff; }
/* The destination price, on the card: small, but it is the number the whole scheme is for.
   A row, not a sentence with a pill glued on: the pill then sits on the card's right edge in
   both paid tiers instead of wrapping to its own line in whichever one runs a character long. */
/* The destination price IS the control now, so the row is just a centred slot with a fixed
   height - Free's plain line reserves the same space as the other two cards' buttons. */
.plan-goal {
  margin-top: 14px; min-height: 32px; font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
}
.goal-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 15px; border-radius: 999px;
  border: 1px solid transparent; font-size: 13px; white-space: nowrap; transition: filter .15s;
}
.goal-btn b { font-weight: 700; color: var(--text-head); }
.goal-btn:hover { filter: brightness(1.15); }
.plan.pick .goal-btn { color: var(--accent); border-color: rgba(84, 185, 209, 0.45); background: rgba(84, 185, 209, 0.1); }
.plan.gold .goal-btn { color: var(--gold); border-color: rgba(224, 179, 87, 0.45); background: rgba(224, 179, 87, 0.1); }
.plan-goal.muted { color: var(--text-dim); }
/* Clears the sticky bar, so the jump lands on the panel and not under the header. */
.ladder { scroll-margin-top: 76px; }

/* ── The ladder ──────────────────────────────────────────────────────────────────────────
   The pricing is unusual enough that the cards cannot carry it: twelve payments, each a
   dollar under the last, and the thirteenth is a year. Explained once, below all three
   tiers, as the shape of the thing rather than a paragraph. */
.ladder {
  margin: clamp(36px, 4.5vw, 56px) auto 0; max-width: 1000px;
  background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 36px) clamp(24px, 3vw, 32px);
}
/* Title on the left, the tier switch on the right - the chart below belongs to whichever
   tier is selected, so the control sits above it rather than beside the bars. */
.ladder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.tier-switch {
  position: relative; flex: 0 0 auto; display: flex; padding: 3px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.04);
}
/* The thumb slides under the labels and carries the tier's colour with it. */
.ts-thumb {
  position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px);
  border-radius: 999px; background: var(--accent);
  transition: transform .34s cubic-bezier(0.4, 0, 0.2, 1), background-color .34s;
}
.tier-switch.is-max .ts-thumb { transform: translateX(100%); background: var(--gold); }
.ts-btn {
  position: relative; z-index: 1; min-width: 58px; height: 26px; padding: 0 12px;
  border: none; background: none; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); transition: color .2s;
}
.ts-btn.is-on { color: #08262e; }
.tier-switch.is-max .ts-btn.is-on { color: #2c2004; }
.ts-btn:not(.is-on):hover { color: var(--text-strong); }
.ts-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
/* The flip runs on each bar in turn, left to right; the label is swapped at the half-turn,
   where the bar is edge-on and the change cannot be seen happening. */
.bars, .goal { perspective: 700px; }
.flip { animation: barFlip .34s ease-in-out; }
@keyframes barFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ts-thumb { transition: none; }
  .flip { animation: none; }
}
.ladder-title { font-size: 17px; font-weight: 600; color: var(--text-head); }
.ladder-lede { margin-top: 6px; font-size: 14.5px; color: var(--text-dim); }
/* Two rows, and the year panel occupies only the FIRST one: that is what puts its bottom
   edge on the bars' own baseline instead of below the month numbers. */
.ladder-chart {
  margin-top: clamp(30px, 3.4vw, 40px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: clamp(20px, 3vw, 36px);
}
/* Bars share one height box so the tops fall on a real slope, not on twelve separate scales. */
.bars {
  grid-column: 1; grid-row: 1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(4px, 0.7vw, 9px);
  align-items: end; height: 132px;
}
.bar { position: relative; height: var(--h); }
/* Flat fills, no gradient: on the cyan bar a fade to transparent reads as dirt, and once one
   bar is flat the grey ones have to match. */
.bar i { display: block; height: 100%; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, 0.11); }
.bar-cap {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -5px);
  font-size: clamp(9px, 0.83vw, 11.5px); font-weight: 600; color: var(--text-head);
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.02em;
}
.months {
  grid-column: 1; grid-row: 2; margin-top: 8px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(4px, 0.7vw, 9px);
}
.months span { text-align: center; font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* Where the months end: both tiers' destinations side by side, each naming itself inside its
   own bar and drawn on the same scale as the months beside them. The gap before them, and the
   tier names inside, say the unit has changed to a year. */
.goal {
  grid-column: 2; grid-row: 1; align-self: end;
  width: 168px; height: 132px; display: flex; align-items: flex-end; gap: 8px;
}
/* One bar, half the height of the first month: the destination is half of what month one
   costs on whichever tier is showing - $12 of $24, or $24 of $48. Only its colour and the
   name inside it change when the switch flips. */
.goal-bar { position: relative; flex: 1; height: 50%; }
.goal-bar i {
  display: flex; align-items: center; justify-content: center; height: 100%;
  border-radius: 4px 4px 0 0; font-style: normal;
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.goal-bar.pro i { background: var(--accent); color: #08262e; }
.goal-bar.max i { background: var(--gold); color: #2c2004; }
/* Half again the monthly figures, no more: two of them side by side at the old size crowded
   each other and the row of months beside them. */
.goal .bar-cap { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; transform: translate(-50%, -6px); }
/* The same grey the month numbers wear: it labels the axis, it is not one of the figures. */
.goal-label {
  grid-column: 2; grid-row: 2; margin-top: 8px; text-align: center;
  font-size: 10.5px; color: var(--text-dim);
}
.ladder-notes {
  margin-top: clamp(26px, 3vw, 34px); padding-top: clamp(20px, 2.4vw, 26px);
  border-top: 1px solid var(--border-subtle);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 34px);
}
.note { font-size: 13.5px; line-height: 1.45; color: var(--text-dim); }
.note b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text-strong); }
/* Figures under the chart that belong to the selected tier. They run up or down to the new
   value like a counter - a sentence that fades and returns different reads as a glitch, a
   number that rolls reads as the same number changing. Tabular figures so the words around
   them do not shuffle while the digits turn. */
.cnt { font-variant-numeric: tabular-nums; }

@media (max-width: 940px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav .wrap { grid-template-columns: 1fr auto; }
  .nav-mid { display: none; }
  /* Nothing to hand over from here - the price group steps aside - so the action stays put. */
  .nav .nav-cta { justify-self: end; opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .gauge { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .stat { justify-self: start; text-align: left; }
  /* Below three columns the picked tier leads instead of sitting in the middle. */
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .plan.pick { order: -1; }
  /* The year panel drops under the bars and spans them, keeping the bars readable. */
  .ladder-chart { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .goal { grid-column: 1; grid-row: 3; width: 100%; height: 76px; margin-top: 20px; }
  .goal-label { grid-column: 1; grid-row: 4; }
  .ladder-notes { grid-template-columns: minmax(0, 1fr); gap: 18px; }

}
@media (max-width: 560px) {
  .caps { grid-template-columns: minmax(0, 1fr); }
  /* Side by side, the switch squeezed the title onto two lines - it drops below it instead. */
  .ladder-head { flex-direction: column; gap: 16px; }
  .tier-switch { align-self: flex-start; }
  .btn { width: 100%; }
  .hero-cta { flex-direction: column; }
}

/* Content pages: a plain article column in the landing's type. */
.article { max-width: 760px; margin: 0 auto; }
.article h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: var(--text-head); margin: 0 0 14px; }
.article .lede { max-width: none; margin-bottom: 28px; }
.article h2 { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2; color: var(--text-head); margin: 40px 0 12px; letter-spacing: -0.01em; }
.article p, .article li { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.article p { margin: 0 0 14px; }
.article ul { padding-left: 20px; margin: 0 0 16px; }
.article li { margin: 0 0 6px; }
.article b { color: var(--text-strong); font-weight: 600; }
.article a { color: var(--accent); text-decoration: none; }
.article a:hover { text-decoration: underline; }
.article .cmp { margin: 18px 0 24px; }
.article .shot { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); margin: 22px 0 28px; }
.article .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 10px; }
.article .note-box { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface); margin: 18px 0; }
.article .note-box p { margin: 0; font-size: 14.5px; }
.page-top { padding-top: clamp(96px, 12vw, 140px); }