/* ==========================================================================
   larp.casa — shared stylesheet
   Every page (/, /premium, /pricing) pulls this one file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, latin subset. No external requests.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/archivo-black-400.woff2') format('woff2');
}

/* Variable font — one file covers the whole weight range. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Type */
  --f-display: 'Archivo Black', system-ui, sans-serif;
  --f-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Surfaces, darkest to lightest */
  --bg: #0a0a0b;
  --surface-dim: #0b0b0d;   /* locked / private cards */
  --surface: #0d0d0f;       /* side tier panels, search field */
  --surface-raised: #0f0f11;/* active tool cards */
  --surface-hi: #131317;    /* highlighted premium panel */
  --surface-head: #101013;  /* table header */
  --surface-hover: #16161a; /* tool card hover */

  /* Foreground ramp */
  --fg: #fff;
  --fg-1: rgba(255, 255, 255, .78);
  --fg-2: rgba(255, 255, 255, .62);
  --fg-3: rgba(255, 255, 255, .5);
  --fg-4: rgba(255, 255, 255, .42);
  --fg-5: rgba(255, 255, 255, .35);
  --fg-6: rgba(255, 255, 255, .3);
  --fg-7: rgba(255, 255, 255, .22);

  /* Rules */
  --line: rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .06);
  --line-strong: rgba(255, 255, 255, .12);
  --line-hover: rgba(255, 255, 255, .3);

  /* Tier colours */
  --tier-public: oklch(.78 .15 152);
  --tier-premium: oklch(.84 .15 88);
  --tier-private: oklch(.65 .19 27);

  /* Status colours */
  --status-beta: oklch(.72 .19 350);

  /* Geometry */
  --radius: 2px;
  --radius-lg: 3px;
  --nav-h: 64px;
  --wrap: 1320px;
  --gutter: 40px;
  --ease: .16s;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  color: var(--fg);
  font-family: var(--f-sans);
}

a { color: var(--fg); text-decoration: none; }

input { font: inherit; }
input::placeholder { color: rgba(255, 255, 255, .28); }
input:focus { outline: none; }

button { font: inherit; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible {
  outline: 1px solid var(--fg);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Visually hidden but read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Type scale
   -------------------------------------------------------------------------- */

/* Small uppercase mono label — the workhorse of this design. */
.mono {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Section eyebrow, e.g. "01 / DASHBOARD" */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--fg-5);
}

.display {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(52px, 9.2vw, 104px);
  line-height: .86;
  letter-spacing: -.045em;
}

.lead {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-3);
  max-width: 44ch;
  text-wrap: pretty;
}

.h-section {
  margin: 0 0 26px;
  font-family: var(--f-display);
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -.035em;
}

/* --------------------------------------------------------------------------
   5. Nav
   -------------------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.nav__brand {
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--fg);
  flex: none;
}
.nav__brand i { font-style: normal; color: rgba(255, 255, 255, .7); }
.nav__brand b { font-weight: inherit; color: var(--fg-4); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  color: var(--fg-3);
  transition: color var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: var(--fg); }

/* Set per page in the markup, never by JS. */
.nav__link[aria-current='page'] {
  color: var(--fg);
  padding: 4px 0;
  border-bottom: 1px solid var(--fg);
}

/* The wordmark is the home link, so it takes the same underline the section
   links use rather than leaving "/" as the one page with no marker. */
.nav__brand[aria-current='page'] {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--fg);
}

.nav__spacer { flex: 1; }

/* Right-hand group: actions and outbound links. A hairline divider plus a
   bordered treatment keeps these from reading as more section links, while
   staying lighter than the account chip beside them. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid var(--line-strong);
}

.nav__action {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  color: var(--fg-3);
  white-space: nowrap;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.nav__action:hover {
  color: var(--fg);
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .03);
}
.nav__action[aria-current='page'] {
  color: var(--fg);
  border-color: rgba(255, 255, 255, .32);
}

/* Account chip — deliberately inert until auth exists. */
.account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  flex: none;
  transition: border-color var(--ease), background var(--ease);
}
.account:hover {
  border-color: var(--line-hover);
  background: rgba(255, 255, 255, .03);
}

/* Holds the Discord avatar image; object-fit guards against non-square art. */
.account__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: #1c1c1f;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
  flex: none;
  object-fit: cover;
}

.account__body { display: flex; flex-direction: column; gap: 2px; }

.account__name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
}

.account__role {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1;
  color: var(--tier-public);
}
.account__role--premium { color: var(--tier-premium); }
.account__role--private { color: var(--tier-private); }

/* Signed out: a plain button in the chip's slot. */
.account--signin {
  height: 38px;
  padding: 0 16px;
  text-decoration: none;
}
.account__signin {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--fg-1);
  transition: color var(--ease);
}
.account--signin:hover .account__signin { color: var(--fg); }

/* --- account dropdown ---------------------------------------------------- */

.account-wrap { position: relative; flex: none; }

/* A status panel, not a settings menu — read-only rows plus two actions. */
.account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 236px;
  padding: 14px 0 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
.account-menu[hidden] { display: none; }

.account-menu__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--line);
}
.account-menu__username {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  word-break: break-all;
}
.account-menu__discord-id {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--fg-6);
}

.account-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
}
.account-menu__label { color: var(--fg-6); flex: none; }
.account-menu__value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--fg-1);
  text-align: right;
}
.account-menu__value--muted   { color: var(--fg-6); }
.account-menu__value--public  { color: var(--tier-public); }
.account-menu__value--premium { color: var(--tier-premium); }
.account-menu__value--private { color: var(--tier-private); }

.account-menu__divider { height: 1px; background: var(--line); margin: 8px 0; }

.account-menu__form { margin: 0; }

.account-menu__action {
  display: block;
  width: 100%;
  padding: 9px 14px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-align: left;
  color: var(--fg-2);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.account-menu__action:hover { background: rgba(255, 255, 255, .04); color: var(--fg); }
.account-menu__action--logout:hover { color: var(--tier-private); }

/* --------------------------------------------------------------------------
   6. Tier / status marks + chips
   -------------------------------------------------------------------------- */

/* The little shape that precedes a tier name.
   Circle = public, rotated square = premium, square = private. */
.mark { flex: none; display: block; }
.mark--public  { width: 6px; height: 6px; border-radius: 50%; background: var(--tier-public); }
.mark--premium { width: 7px; height: 7px; background: var(--tier-premium); transform: rotate(45deg); }
.mark--private { width: 6px; height: 6px; background: var(--tier-private); }
.mark--beta    { width: 6px; height: 6px; border-radius: 50%; background: var(--status-beta); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  padding: 4px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--fg-4);
  white-space: nowrap;
}

.chip--public  { color: var(--tier-public);  border-color: oklch(.78 .15 152 / .35); }
.chip--premium { color: var(--tier-premium); border-color: oklch(.84 .15 88 / .3); }
.chip--private { color: var(--tier-private); border-color: oklch(.65 .19 27 / .35); }

.chip--beta {
  color: var(--status-beta);
  border-color: oklch(.72 .19 350 / .4);
  font-size: 8.5px;
  letter-spacing: .13em;
  padding: 3px 5px;
  line-height: 1;
}

/* Larger chip used on the tier panels. */
.chip--lg {
  font-size: 11px;
  letter-spacing: .14em;
  gap: 8px;
  padding: 5px 9px;
}

/* Borderless variant — a label rather than a badge. */
.chip--bare { border-color: transparent; padding-left: 0; padding-right: 0; gap: 7px; letter-spacing: .13em; }

/* Filled variant — the "BEST VALUE" flag. */
.chip--fill {
  background: var(--tier-premium);
  border-color: var(--tier-premium);
  color: var(--bg);
  letter-spacing: .14em;
  padding: 5px 8px;
}

/* Padlock glyph, drawn from two boxes. */
.lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}
.lock span:first-child {
  width: 8px; height: 5px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.lock span:last-child {
  width: 11px; height: 7px;
  background: rgba(255, 255, 255, .45);
  border-radius: 1px;
}
.lock--private span:first-child { border-color: var(--tier-private); }
.lock--private span:last-child { background: var(--tier-private); }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 46px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: rgba(255, 255, 255, .86); color: var(--bg); }

.btn--outline { background: transparent; border-color: rgba(255, 255, 255, .2); color: var(--fg); }
.btn--outline:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .04); color: var(--fg); }

.btn--gold { background: transparent; border-color: oklch(.84 .15 88 / .55); color: var(--tier-premium); }
.btn--gold:hover { border-color: var(--tier-premium); background: oklch(.84 .15 88 / .1); }

/* Larger hero call to action. */
.btn--hero { gap: 14px; font-size: 12.5px; height: auto; padding: 15px 26px; }

/* Underlined text link, used for the pricing -> premium cross-link. */
.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--fg-1);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fg-7);
  transition: color var(--ease), border-color var(--ease);
}
.link-underline:hover { color: var(--fg); border-color: var(--fg); }

/* Inert placeholder that reads as a button but is not one. */
.btn-static {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .34);
}

/* --------------------------------------------------------------------------
   8. Page header (shared by all three pages)
   -------------------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--line);
}

.page-head__eyebrow { display: block; margin-bottom: 20px; }

.page-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 8px;
  flex: none;
}

.page-head__note {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--fg-6);
}

/* Stat rail on the dashboard header. */
.stats {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  min-width: 210px;
  margin-bottom: 6px;
  flex: none;
}

.stats__row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.stats__row:last-child { border-bottom: none; }
.stats__row dt { color: var(--fg-4); margin: 0; }
.stats__row dd { margin: 0; }

.stats__row--public dd  { color: var(--tier-public); }
.stats__row--premium dd { color: var(--tier-premium); }
.stats__row--private dd { color: var(--tier-private); }

/* --------------------------------------------------------------------------
   9. Filter bar (dashboard)
   -------------------------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 380px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 0 12px;
  height: 38px;
  background: var(--surface);
  transition: border-color var(--ease);
}
.search:hover,
.search:focus-within { border-color: rgba(255, 255, 255, .24); }

.search__icon {
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--fg-5);
  border-radius: 50%;
  flex: none;
}

.search__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 13.5px;
  letter-spacing: -.005em;
  height: 36px;
}

.search__key {
  font-family: var(--f-mono);
  font-size: 10px;
  color: rgba(255, 255, 255, .25);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 2px 5px;
  flex: none;
}

.filters { display: flex; align-items: center; gap: 24px; }

.filter-group { display: flex; align-items: center; gap: 6px; }

/* Divider between the two groups. */
.filter-group--tier { padding-right: 20px; border-right: 1px solid var(--line-strong); }

.filter-group__label {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--fg-6);
  margin-right: 8px;
}

.fbtn {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 7px 13px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  color: var(--fg-2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.fbtn:hover { color: var(--fg); border-color: rgba(255, 255, 255, .3); }

/* Selected state. The accent is the tier's own colour; ALL and RELEASED
   use white, BETA uses the pink status colour. */
.fbtn[aria-pressed='true'] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.fbtn[aria-pressed='true'][data-value='public']  { background: var(--tier-public);  border-color: var(--tier-public); }
.fbtn[aria-pressed='true'][data-value='premium'] { background: var(--tier-premium); border-color: var(--tier-premium); }
.fbtn[aria-pressed='true'][data-value='private'] { background: var(--tier-private); border-color: var(--tier-private); }
.fbtn[aria-pressed='true'][data-value='beta']    { background: var(--status-beta);  border-color: var(--status-beta); }

/* When a filter button is active its mark would vanish against the fill. */
.fbtn[aria-pressed='true'] .mark { background: var(--bg); }

/* --------------------------------------------------------------------------
   10. Tool grid (dashboard)
   -------------------------------------------------------------------------- */

/* Hairline grid: container draws the left rule, cells draw right + bottom. */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--line);
  margin-bottom: 80px;
}

.tool-card {
  --glyph: var(--fg);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  min-height: 212px;
  transition: background var(--ease);
}
.tool-card:hover { background: var(--surface-hover); }

.tool-card--locked,
.tool-card--private { --glyph: rgba(255, 255, 255, .42); }

.tool-card--locked { background: var(--surface-dim); }
.tool-card--locked:hover { background: #101013; }

.tool-card--private { background: var(--surface-dim); cursor: not-allowed; }
.tool-card--private:hover { background: #0e0e10; }

.tool-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tool-card__badges { display: flex; align-items: center; gap: 8px; }

/* Pin control. z-index lifts it over the stretched link's ::after so the
   click lands on the button rather than opening the tool. */
.tool-star {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: var(--fg-7);
  cursor: pointer;
  flex: none;
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.tool-star svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.tool-star:hover {
  color: var(--fg);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .04);
}
.tool-star--on { color: var(--fg); }
.tool-star--on svg { fill: currentColor; }

/* Pinned cards keep a faint top edge so the reason they sort first is visible
   even when the star is out of view on a narrow screen. */
.tool-card--pinned::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--fg);
  opacity: .5;
}

.tool-card__icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.tool-card--locked .tool-card__icon,
.tool-card--private .tool-card__icon { border-color: var(--line); }

.tool-card__title {
  margin: 26px 0 0;
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: -.025em;
  color: var(--fg);
}

/* Stretched link: the anchor lives on the title for a meaningful accessible
   name, but its ::after covers the whole card so all of it stays clickable.
   The star button is lifted above this layer. */
.tool-card__link { color: inherit; text-decoration: none; }
.tool-card__link::after { content: ''; position: absolute; inset: 0; }
.tool-card__link:hover { color: inherit; }

.tool-card:has(.tool-card__link:focus-visible) {
  outline: 1px solid var(--fg);
  outline-offset: -1px;
}
.tool-card__link:focus-visible { outline: none; }
.tool-card--locked .tool-card__title { color: var(--fg-2); }
.tool-card--private .tool-card__title { color: rgba(255, 255, 255, .55); }

.tool-card__desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-3);
  text-wrap: pretty;
}
.tool-card--locked .tool-card__desc { color: rgba(255, 255, 255, .38); }
.tool-card--private .tool-card__desc { color: rgba(255, 255, 255, .34); }

.tool-card__spacer { flex: 1; }

.tool-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
}

.tool-card__path { color: var(--fg-6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tool-card__state {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fg-6);
  flex: none;
}

.tool-card__cta { font-weight: 600; flex: none; }
.tool-card__cta--open { color: var(--fg); }
.tool-card__cta--signin { color: var(--fg-1); }
.tool-card__cta--premium { color: var(--tier-premium); }
.tool-card__cta--private { color: var(--tier-private); }

/* Icon glyphs, drawn with spans so nothing is fetched. They take their colour
   from --glyph, which the card dims when the tool is locked — so a glyph is
   bright whenever the user actually holds the tool, whatever its tier. */
.g-ring   { width: 16px; height: 16px; border: 2px solid var(--glyph); border-radius: 50%; display: block; }
.g-square { width: 16px; height: 16px; border: 2px solid var(--glyph); border-radius: var(--radius); display: block; }
.g-diamond{ width: 14px; height: 14px; background: var(--glyph); transform: rotate(45deg); }

.g-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.g-quad span { width: 6px; height: 6px; background: var(--glyph); opacity: .4; }
.g-quad span:first-child, .g-quad span:last-child { opacity: 1; }

.g-lines { display: flex; flex-direction: column; gap: 3px; }
.g-lines span { height: 3px; background: var(--glyph); }
.g-lines span:nth-child(1) { width: 18px; }
.g-lines span:nth-child(2) { width: 12px; }
.g-lines span:nth-child(3) { width: 15px; }

.g-bars { display: flex; align-items: center; gap: 3px; }
.g-bars span { width: 4px; background: var(--glyph); }
.g-bars span:nth-child(1) { height: 16px; }
.g-bars span:nth-child(2) { height: 10px; }
.g-bars span:nth-child(3) { height: 14px; }

/* Shown when every tool is filtered out. */
.tool-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 72px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-dim);
  text-align: center;
}
.tool-empty__title {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--fg-4);
}
.tool-empty__hint { font-size: 13.5px; color: var(--fg-6); margin: 0; }

/* --------------------------------------------------------------------------
   11. Tier panels (premium)
   -------------------------------------------------------------------------- */

/* Label strip above the columns. This was a 1.6fr cell inside the grid, which
   left a tall empty well beside two short lines of text. */
.tiers-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 30px 0 20px;
}
.tiers-head p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-3);
  max-width: 64ch;
  text-wrap: pretty;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.tier {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

/* The premium column is lifted out of the grid with its own gold rule. */
.tier--featured {
  background: var(--surface-hi);
  border: 1px solid oklch(.84 .15 88 / .45);
  margin: -1px 0 0 -1px;
}

.tier__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}

.tier__name {
  margin: 24px 0 0;
  font-family: var(--f-display);
  font-size: 26px;
  letter-spacing: -.03em;
}

.tier__desc {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-3);
  text-wrap: pretty;
}
.tier--featured .tier__desc { color: var(--fg-2); }

.tier__list {
  display: flex;
  flex-direction: column;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  counter-reset: feat;
}
.tier--featured .tier__list { border-top-color: rgba(255, 255, 255, .1); }

.tier__list li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--fg-1);
  counter-increment: feat;
}
.tier__list li:last-child { border-bottom: none; }
.tier--featured .tier__list li { color: var(--fg); border-bottom-color: rgba(255, 255, 255, .07); }

/* Numbered 01, 02, 03 … from the counter so markup stays clean. */
.tier__list li::before {
  content: '0' counter(feat);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--fg-6);
  padding-top: 2px;
  flex: none;
}
.tier--featured .tier__list li::before { color: var(--tier-premium); }

.tier__spacer { flex: 1; min-height: 28px; }

.tier__foot {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--fg-6);
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. Comparison table (premium)
   -------------------------------------------------------------------------- */

.section { padding: 80px 0 96px; }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 22px;
}
.section__rule { flex: 1; height: 1px; background: var(--line); }

.cmp {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Real table markup, laid out on the grid instead of table boxes. */
.cmp__table { display: block; width: 100%; border-collapse: collapse; }
.cmp__table thead, .cmp__table tbody { display: contents; }

.cmp__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
}

.cmp__row--head {
  background: var(--surface-head);
  border-bottom: 1px solid var(--line-strong);
}

.cmp__row--body {
  border-bottom: 1px solid var(--line-soft);
  background: #0e0e11;
}
.cmp__row--body:nth-child(even) { background: var(--surface-dim); }
.cmp__row--body:last-child { border-bottom: none; }

.cmp__th {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  border-left: 1px solid rgba(255, 255, 255, .08);
  text-align: left;
}
.cmp__th--feature {
  padding: 14px 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .32);
  border-left: none;
}
.cmp__th--public  { color: var(--tier-public); }
.cmp__th--premium { color: var(--tier-premium); background: rgba(255, 255, 255, .03); }
.cmp__th--private { color: var(--tier-private); }

.cmp__label {
  padding: 13px 20px;
  font-size: 13.5px;
  color: var(--fg-1);
  text-align: left;
  font-weight: 400;
}

.cmp__cell {
  padding: 13px 18px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  border-left: 1px solid var(--line-soft);
  color: var(--fg-2);
}

/* Column 2 is the premium column — always slightly lifted. */
.cmp__cell--premium { background: rgba(255, 255, 255, .025); color: var(--fg); }

/* A bare check reads as full support, an em dash as none. */
.cmp__cell--yes { color: var(--fg); }
.cmp__cell--no  { color: var(--fg-7); }

.cmp__note {
  margin: 18px 0 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .28);
}

/* --------------------------------------------------------------------------
   13. Pricing
   -------------------------------------------------------------------------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0c0c0e;
}

/* Gold on all four sides. The export greyed the bottom edge because the notes
   strip used to sit flush underneath; with the gap it is a free-standing box. */
.plan--featured {
  background: #111114;
  border: 1px solid oklch(.84 .15 88 / .5);
  margin: -1px 0 0 -1px;
}

.plan__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}

.plan__term {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--fg-3);
  margin-top: 30px;
}
.plan--featured .plan__term { color: var(--fg-1); }
.plan--permanent .plan__term { color: var(--fg); }

.plan__price {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}

.plan__currency {
  font-family: var(--f-mono);
  font-size: 15px;
  color: var(--fg-3);
  padding-top: 9px;
}

.plan__amount {
  font-family: var(--f-display);
  font-size: 66px;
  line-height: .8;
  letter-spacing: -.05em;
  color: rgba(255, 255, 255, .88);
}
.plan--featured .plan__amount { color: var(--fg); }

.plan__unit {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--fg-5);
  padding-top: 11px;
}

/* The permanent plan sets its price larger. */
.plan--permanent .plan__amount { font-size: 82px; line-height: .78; letter-spacing: -.055em; color: var(--fg); }
.plan--permanent .plan__currency { padding-top: 11px; }
.plan--permanent .plan__unit { padding-top: 13px; color: var(--fg-4); }

.plan__rate {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--fg-6);
  margin-top: 16px;
}
.plan__rate b { font-weight: 400; color: var(--tier-premium); }
.plan__rate i { font-style: normal; color: var(--fg-7); }
.plan__rate em { font-style: normal; color: var(--fg-4); }

.plan__desc {
  margin: 20px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-3);
  text-wrap: pretty;
}
.plan--featured .plan__desc { color: var(--fg-2); }

.plan__spacer { flex: 1; min-height: 32px; }

.plan__terms {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--fg-6);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  margin-bottom: 18px;
}
.plan--featured .plan__terms { border-bottom-color: var(--line); }

/* Four-up strip of purchase notes below the plans. Detached from the plan grid
   by a small gap so it reads as a separate block rather than a fourth row. */
.notes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  margin: 20px 0 96px;
  background: var(--surface-dim);
}

.notes__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px;
  border-right: 1px solid rgba(255, 255, 255, .07);
}
.notes__item:last-child { border-right: none; }

.notes__label {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .28);
}

.notes__body {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--fg-2);
}

/* --------------------------------------------------------------------------
   14. 404
   -------------------------------------------------------------------------- */

.oops {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 120px 0 160px;
}
.oops__code {
  font-family: var(--f-display);
  font-size: clamp(72px, 16vw, 168px);
  line-height: .82;
  letter-spacing: -.05em;
  margin: 16px 0 0;
}
.oops__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .toolbar { flex-wrap: wrap; }
  .search { max-width: none; flex-basis: 100%; }
  .filters { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 980px) {
  :root { --gutter: 24px; }

  .nav { gap: 24px; overflow-x: auto; }
  .nav__links { gap: 18px; }

  .page-head { flex-direction: column; align-items: stretch; gap: 32px; }
  .stats { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 8px; margin-bottom: 0; }

  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier--featured { margin: 0; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--featured { margin: 0; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes__item:nth-child(2n) { border-right: none; }
  .notes__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .07); }

  /* The comparison table stops fitting — let it scroll on its own. */
  .cmp { overflow-x: auto; }
  .cmp__row { grid-template-columns: minmax(180px, 1.6fr) repeat(3, minmax(110px, 1fr)); min-width: 620px; }
}

@media (max-width: 720px) {
  /* The divider reads as clutter once the nav is scrolling horizontally. */
  .nav__actions { padding-right: 0; margin-right: 10px; border-right: none; gap: 6px; }
  .nav__action { padding: 5px 9px; }

  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .filter-group--tier { padding-right: 0; border-right: none; }
  .account__body { display: none; }
  .account { padding: 5px; }
  .notes { grid-template-columns: minmax(0, 1fr); }
  .notes__item { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .notes__item:last-child { border-bottom: none; }
  .section { padding: 56px 0 64px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}