/* Base — what every page shares and nothing else.
 *
 * Scope rules (HAVC discipline carried into static pages): this file owns
 * tokens' consumption, the reset, typography, nav, footer, buttons and the
 * generic section/card shells. Every page ships its own stylesheet with a
 * page prefix (home-, pg-) and no page reaches into another page's classes.
 */

@import url("/assets/tokens.css");

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

/* The browser hides [hidden] with a UA rule, and any author `display` beats a
   UA one — so a form declared `display: grid` stayed on screen after the code
   set `hidden`. Author-level and !important, so hidden means hidden. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

/* A display face at 3.5rem punishes a bad break: one word alone on a third
   line is the difference between a headline and a paragraph that happens to be
   large. `balance` evens the line lengths; `pretty` only pulls the last word
   back. Neither is load-bearing — a browser without them wraps as before. */
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; line-height: var(--lh-head); letter-spacing: -.015em; text-wrap: balance; }
p, .lede, li { text-wrap: pretty; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { color: var(--muted); }
a  { color: inherit; text-decoration: none; }
/* A link inside a sentence has to look like one. Scoped to paragraphs and to
   prose lists rather than to every <li>: the footer and the table of contents
   are lists too, and they carry their own treatment. */
:where(p, dd) a:not(.btn),
:where(.pg-prose, .pg-list, .home-sec__list) li a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-bd);
  text-underline-offset: 3px;
}
:where(p, dd) a:not(.btn):hover,
:where(.pg-prose, .pg-list, .home-sec__list) li a:not(.btn):hover { text-decoration-color: var(--accent); }
strong { color: var(--text); font-weight: 600; }
code, kbd, pre, samp { font-family: var(--mono); font-size: .92em; }
/* A long flag-laden command has no break opportunity in it, and one of those
   in a list item is enough to make the whole page scroll sideways on a phone.
   Inline code may break anywhere; copying it still yields the whole string. */
:where(p, li, td, dd) > code { overflow-wrap: anywhere; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Content fills the viewport: side padding only, no centred column. A measure
   that stops at 1160px leaves a 1920px screen mostly empty and makes every
   grid on the page narrower than it needs to be. Long lines are the accepted
   cost; the padding grows with the screen so nothing touches the glass. */
.wrap { width: 100%; margin-inline: auto; padding-inline: clamp(24px, 5vw, 88px); }
.mono { font-family: var(--mono); }

/* Visible only to a screen reader — used for the skip link and for labels the
   layout carries visually but the markup still owes an assistive user. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--accent); color: #17110a; font-weight: 600;
  transition: top .15s ease;
}
.skip:focus { top: 12px; }

/* ── navigation ─────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 28px; }
.nav__brand { display: flex; align-items: center; gap: 12px; }

/* The wordmark is set in HTML rather than lifted from the logo SVG: that SVG
   sets its text in Sora, which this site does not ship, so on most machines it
   would silently fall back to Arial next to a page in Space Grotesk. The mark
   stays an SVG — it is a drawing, not type. */
.brand-mark { height: 46px; width: auto; }
.brand-word {
  font-family: var(--disp); font-weight: 700;
  font-size: var(--fs-brand); letter-spacing: -.035em; line-height: 1;
  color: var(--text);
}
.brand-word b { font-weight: inherit; color: var(--accent); }

.nav__links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
/* One active marker for every page that has one: the label goes to full
   strength and an amber rule sits under it. Colour alone was the marker
   before, which on a row of muted links is a difference you have to be told
   about. */
.nav__link { position: relative; color: var(--muted); font-size: var(--fs-small); transition: color .15s ease; }
.nav__link:hover { color: var(--text); }
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.nav__tools { display: flex; align-items: center; gap: 8px; }

.nav__icon {
  display: grid; place-items: center;
  width: var(--ctl-h); height: var(--ctl-h);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--muted);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.nav__icon:hover { border-color: var(--line-2); color: var(--text); }
.nav__icon svg { width: 17px; height: 17px; }

.nav__lang {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ctl-h); padding-inline: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--muted); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em;
}
.nav__lang:hover { border-color: var(--line-2); color: var(--text); }

.nav__burger { display: none; }
/* The account button is the one nav item that is an action rather than a
   destination, so it keeps its weight next to the muted links. It stays at
   every width: measured at 360px it still clears the wordmark by 28px, and
   hiding the one button people came to press is a strange thing to do to a
   phone. */
.nav__cta { white-space: nowrap; }

@media (max-width: 940px) {
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px clamp(24px, 5vw, 88px) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  .nav__links[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  /* Stacked links have no room under them for the rule, so the marker moves
     into the divider the row already has. */
  .nav__link { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
  .nav__link[aria-current="page"] { border-bottom-color: var(--accent); }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__burger { display: grid; margin-left: auto; }
}
@media (max-width: 700px) {
  .wrap { padding-inline: 16px; }
  .nav__links { padding-inline: 16px; }
  .brand-mark { height: 38px; }
  .brand-word { font-size: var(--fs-brand-sm); }
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--ctl-h); padding-inline: 22px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
/* Near-black rather than white on amber: #f59120 carries a 2.4:1 contrast with
   white and 9.6:1 with this ink, so the label stays readable at 0.96rem. */
.btn--primary { background: var(--accent); color: #17110a; }
.btn--primary:hover { background: var(--accent-2); }
.btn--ghost { border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn svg { width: 16px; height: 16px; }

/* ── generic shells ─────────────────────────────────────────────────────── */

.section { padding-block: var(--section-y); }
.section--tint { background: var(--bg-raise); border-block: 1px solid var(--line); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.lede { font-size: var(--fs-lede); line-height: var(--lh-body); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--card-pad);
}

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.pill--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-bd); }

/* ── the product shots ──────────────────────────────────────────────────── */

.shot {
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--bg-raise);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  align-self: start;
}
.shot__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
/* The three dots were red, amber and green — a whole second palette for a
   drawing of a window title bar. Neutral, the bar still reads as a window and
   the page keeps one accent. */
.shot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.shot__url {
  margin-left: 10px; padding: 2px 11px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--fs-frame); color: var(--faint);
}

/* The frame holds a real capture of the panel. width/height are on the <img>
   so the row is reserved before the file arrives; the rule below is what makes
   it shrink with its column instead of insisting on its 1440px. */
.shot__img { width: 100%; height: auto; }

/* The hero copy is loud and the hero shot has to answer it. The glow is a
   shadow rather than a layer behind the frame, because .shot clips its own
   children and an inner ::before would be cut off at the corner radius. */
.shot--glow { box-shadow: 0 0 120px -24px #f5912055, 0 40px 90px -44px #000000cc; }

/* A screenshot standing on its own in a section, at the width of the column. */
.home-figure { margin-top: var(--flow); }

/* Step 01 has no screen to show: what it has is two commands. Same frame, and
   the body reads on --bg rather than --bg-raise so it looks like a terminal
   and not a cropped page. The lines wrap with a hanging indent instead of
   scrolling sideways — a scrollbar inside a card this narrow hides half the
   command from anyone who does not think to drag it. */
.term { padding: 14px 14px 16px; display: grid; gap: 9px; background: var(--bg); }
.term__line { font-size: var(--fs-mono); line-height: var(--lh-snug); color: var(--text); padding-left: 15px; text-indent: -15px; overflow-wrap: anywhere; }
.term__line--out { color: var(--muted); }
.term__mark { color: var(--accent); margin-right: 7px; }

/* ── plans teaser ───────────────────────────────────────────────────────────
   The same four cards close the home page and the features page, so they are
   a shared component rather than one page's class reached into by another. */

.tiers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  margin-top: var(--flow);
}
.tier { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: var(--gap-sm); }
.tier--lead { border-color: var(--accent-bd); }
.tier__price { display: flex; align-items: baseline; gap: 6px; }
.tier__price b { font-family: var(--disp); font-size: var(--fs-price); font-weight: 600; color: var(--text); letter-spacing: -.02em; }
.tier__price span { font-size: var(--fs-micro); color: var(--faint); }
.tier p { font-size: var(--fs-small); }
@media (max-width: 1080px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .tiers { grid-template-columns: minmax(0, 1fr); } .tier { grid-row: auto; grid-template-rows: none; } }

.cta { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-top: var(--flow); }

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); background: var(--bg-raise); padding-block: 56px 32px; }
/* Five columns, and the grid has to say five: at repeat(3) the legal column
   wrapped onto a second row under the brand and its heading sat 200px below
   the other three. */
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--flow) var(--gap); align-items: start; }
.foot__brand .brand-mark { height: 54px; }
.foot__lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.foot__note { font-size: var(--fs-small); }
.foot__title { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.foot__list { list-style: none; display: grid; gap: 9px; }
.foot__list a { color: var(--muted); font-size: var(--fs-small); }
.foot__list a:hover { color: var(--accent); }
.foot__bar {
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
  color: var(--faint); font-size: var(--fs-micro);
}
.foot__bar a { color: var(--faint); }
.foot__bar a:hover { color: var(--muted); }
.foot__sep { margin-left: auto; }

@media (max-width: 820px) {
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__sep { margin-left: 0; }
  /* A 0.93rem link is an 18px-tall target, and a thumb is not a mouse
     pointer. The row keeps its rhythm because the gap gives back what the
     padding takes: the links grow into the space between them, not below it.
     Inline links inside a sentence are left alone — WCAG 2.5.8 exempts them,
     and padding one would break the line box around it. */
  .foot__list { gap: 0; }
  .foot__list a { display: inline-block; padding-block: 11px; }
  .foot__bar { gap: 4px 20px; }
  .foot__bar a { display: inline-block; padding-block: 12px; }
}


/* The seller's registered identity, on every page. Muted because it is a
   legal requirement rather than something a reader is meant to act on. */
.foot__entity { color: var(--faint, #6c7a81); }