/* ============================================================================
   Clearing — getclearing.app
   One stylesheet, linked from every page. Hand-written; no build step.

   The token values below are the ones the site already renders. They were
   read back out of the per-page inline styles, not taken from _ds/ — that
   folder is the design system for hellovalerio.io (a different site) and
   defines a different palette, different fonts and different radii. See
   REFACTOR-NOTES.md.
   ========================================================================= */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --surface-page:      #FDFBF7;          /* warm cream, every page */
  --surface-raised:    #fff;             /* cards, video slots */
  --surface-header:    rgba(253,251,247,0.82);  /* sticky bar, over blur */

  /* --- Ink ------------------------------------------------------------ */
  --ink-strong:        #333;             /* headings, strong, default link */
  --ink-body:          #555;             /* running prose */
  --ink-muted:         #777;             /* secondary text, nav, captions */
  --ink-inverse:       #fff;             /* on the dark button */

  /* --- Accent --------------------------------------------------------- */
  --accent:            #2F7F4F;          /* green: eyebrows, current nav item */

  /* --- Lines ---------------------------------------------------------- */
  --hairline:          rgba(170,170,170,0.3);   /* section rules, header edge */
  --hairline-strong:   rgba(170,170,170,0.4);   /* the help sidebar's left rule */
  --rule:              #aaa;             /* card and video-slot borders */

  /* --- Marks ---------------------------------------------------------- */
  --selection:         rgba(143,193,238,0.35);  /* blue text selection */
  --highlight:         rgba(251,196,155,0.35);  /* peach <mark> */

  /* --- Buttons -------------------------------------------------------- */
  --button-bg:         #333;
  --button-shadow-hover: 0 5px 10px 2px rgba(0,0,0,0.12);

  /* --- Type ----------------------------------------------------------- */
  --font-sans:         Inter, system-ui, sans-serif;
  --weight-normal:     500;
  --weight-bold:       600;

  --text-caption:      13px;
  --text-meta:         14px;
  --text-label:        15px;
  --text-body:         16px;
  --text-lede:         18px;
  --text-section:      20px;
  --text-card:         26px;
  --text-title:        clamp(28px, 3.6vw, 42px);

  --leading-prose:     1.7;
  --leading-snug:      1.5;
  --tracking-tight:    -0.01em;
  --tracking-title:    -0.02em;

  /* --- Radii ---------------------------------------------------------- */
  --radius-sm:         4px;
  --radius-md:         12px;
  --radius-lg:         16px;

  /* --- Measure -------------------------------------------------------- */
  --measure:           1120px;           /* page gutter width */
  --measure-text:      680px;            /* readable column */
}

/* ============================================================================
   Base
   ========================================================================= */

html, body { margin: 0; padding: 0; background: var(--surface-page); }

body {
  font-family: var(--font-sans);
  font-weight: var(--weight-normal);
  color: var(--ink-strong);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a { color: var(--ink-strong); text-decoration: none; }
a:hover { color: var(--accent); }

/* The legal pages never carried the selection tint, so it stays scoped away
   from them rather than being quietly added. Drop the :not() to unify. */
.page:not(.page--legal) ::selection { background: var(--selection); }

/* ----------------------------------------------------------------------------
   A note on link hover, because it looks like a mistake and isn't.

   Every link rule below repeats its colour for :hover. In the original markup
   these colours sat in inline style attributes, which outrank the `a:hover`
   rule above — so 522 of the site's 561 links never actually turned green.
   Repeating the colour preserves that behaviour exactly.

   To let the green hover apply site-wide, delete the `:hover` halves of the
   paired selectors below. That is a visual change, not a refactor.
   ------------------------------------------------------------------------- */

/* ============================================================================
   Layout
   ========================================================================= */

.page { min-height: 100vh; background: var(--surface-page); }

.wrap-article {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 72px 28px 96px;
}

.wrap-section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 28px 112px;
}

.measure { max-width: var(--measure-text); }

/* ============================================================================
   Header
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-header);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-tight);
}

.wordmark__mark { display: block; width: 34px; height: 34px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: var(--text-meta);
  color: var(--ink-muted);
}

/* ============================================================================
   Footer
   ========================================================================= */

.site-footer { border-top: 1px solid var(--hairline); }

/* Same hairline, used to separate a section rather than the footer. */
.rule-above { border-top: 1px solid var(--hairline); }

.site-footer__bar {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 36px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  font-size: var(--text-meta);
  color: var(--ink-muted);
}

.site-footer__brand { display: flex; align-items: center; gap: 8px; }

.site-footer__mark { display: block; width: 16px; height: 16px; opacity: .85; }

.footer-nav { display: flex; gap: 24px; }

.footer-nav--wrap { display: flex; flex-wrap: wrap; gap: 24px; }

/* ============================================================================
   Buttons
   The dark fill and its hover live in the page's own `style-hover` attribute,
   which support.js compiles to an !important rule — so it outranks everything
   here and needs no help.
   ========================================================================= */

.btn {
  border: 1px solid var(--button-bg);
  background: var(--button-bg);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  color: var(--ink-inverse);
  white-space: nowrap;
  transition: box-shadow .18s ease, background .18s ease;
}

.btn--lg {
  color: var(--ink-inverse);
  padding: 14px 26px;
  font-size: var(--text-label);
}

/* ============================================================================
   Text roles
   ========================================================================= */

.eyebrow {
  margin: 28px 0 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--accent);
  text-transform: uppercase;
}

.eyebrow--inline {
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
  color: var(--accent);
}

.page-title {
  margin: 10px 0 0;
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  line-height: 1.12;
  letter-spacing: var(--tracking-title);
}

.page-title--flush { margin: 0; }

.lede {
  margin: 16px 0 0;
  font-size: var(--text-lede);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

/* Running prose. The paragraph rule is the one that earns its keep: 115 of
   the site's paragraphs use it, differing only in top margin. */
.prose-p {
  margin: 16px 0 0;
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  color: var(--ink-body);
  text-wrap: pretty;
}

.prose-p--flush { margin-top: 0; }

.subhead {
  margin: 24px 0 8px;
  font-weight: var(--weight-bold);
  color: var(--ink-strong);
}

.subhead--flush { margin: 0 0 8px; }

.strong { font-weight: var(--weight-bold); color: var(--ink-strong); }

.highlight {
  background: var(--highlight);
  color: var(--ink-strong);
  border-radius: var(--radius-sm);
  padding: 0 4px;
}

.code-inherit { font-family: inherit; }

.link-underline,
.link-underline:hover {
  color: var(--ink-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}

/* ============================================================================
   Help section
   ========================================================================= */

.help-layout {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 72px 28px 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 64px;
  align-items: start;
}

.help-layout__main {
  grid-column: span 2;
  min-width: 0;
  max-width: var(--measure-text);
}

/* Sidebar table of contents */
.toc {
  font-size: var(--text-meta);
  color: var(--ink-muted);
  border-left: 1px solid var(--hairline-strong);
  padding-left: 28px;
}

.toc__list { display: flex; flex-direction: column; gap: 4px; }

.toc__link,
.toc__link:hover {
  display: block;
  color: var(--ink-muted);
  line-height: var(--leading-snug);
  padding: 4px 0;
}

.toc__link.is-current,
.toc__link.is-current:hover { color: var(--accent); }

/* Article foot and prev/next */
.article-foot {
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

.article-nav {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--text-meta);
}

/* Help index cards */
.help-card {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.help-card__title { margin: 0; font-size: var(--text-lede); font-weight: var(--weight-bold); }

.help-card__list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.help-entry { display: flex; flex-direction: column; gap: 4px; }

.help-entry__title { font-size: var(--text-label); font-weight: var(--weight-bold); }

.help-entry__blurb {
  font-size: var(--text-meta);
  line-height: var(--leading-snug);
  color: var(--ink-muted);
}

/* ============================================================================
   Legal pages (privacy, terms, refunds)
   ========================================================================= */

.page--legal .prose-p { margin-top: 14px; }

.legal-heading {
  margin: 48px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-section);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.legal-heading--first { margin: 0; padding-top: 0; border-top: none; }

.legal-updated {
  margin: 14px 0 48px;
  font-size: var(--text-meta);
  color: var(--ink-muted);
}

/* ============================================================================
   Utilities
   Two single-property classes, kept because they are the two most repeated
   declarations on the site (195 and 19 uses, every page). Everything used on
   only one page stayed inline.
   ========================================================================= */

.muted, a.muted:hover { color: var(--ink-muted); }
.ink,   a.ink:hover   { color: var(--ink-strong); }

.meta, a.meta:hover { font-size: var(--text-meta); color: var(--ink-muted); }