/* ============================================================================
   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);
}

/* ============================================================================
   Buy-first variant

   Someone arriving from the extension has already used Clearing for a week, so
   the site leads with Buy licence instead of Add to Chrome. The state is a
   `data-buy-first` attribute on <html>, set before paint by a small script in
   each page's <head>.

   Both labels ship in the markup and CSS chooses between them. Nothing is
   rewritten after paint, so there is no flicker, and the hidden one is
   display:none so it leaves the accessibility tree as well as the page.

   Neither rule sets a positive `display`, so a shown element keeps whatever
   display it would naturally have.
   ========================================================================= */

:root:not([data-buy-first]) [data-when="buy-first"] { display: none; }
:root[data-buy-first]       [data-when="default"]   { display: none; }

/* The two pricing-card buttons keep their labels; only the emphasis swaps.
   These were inline styles before — they had to become classes, because an
   inline style outranks any rule that would flip it. */
.cta {
  margin-top: auto;
  align-self: flex-start;
  border-radius: var(--radius-md);
  padding: 13px 24px;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: box-shadow .18s ease, background-color .18s ease;
}

/* Default: install solid, buy keyline. The :hover rules restate colour because
   `a:hover` would otherwise win on the anchor — see the link note above. */
[data-cta="install"] { border: 1px solid var(--button-bg); background-color: var(--button-bg); color: var(--ink-inverse); }
[data-cta="install"]:hover { box-shadow: var(--button-shadow-hover); background-color: #111; color: var(--ink-inverse); }
[data-cta="buy"] { border: 1px solid var(--rule); background-color: transparent; color: var(--ink-strong); }
[data-cta="buy"]:hover { box-shadow: var(--button-shadow-hover); background-color: transparent; color: var(--ink-strong); }

/* Buy-first: the emphasis reverses. */
:root[data-buy-first] [data-cta="install"] { border: 1px solid var(--rule); background-color: transparent; color: var(--ink-strong); }
:root[data-buy-first] [data-cta="install"]:hover { box-shadow: var(--button-shadow-hover); background-color: transparent; color: var(--ink-strong); }
:root[data-buy-first] [data-cta="buy"] { border: 1px solid var(--button-bg); background-color: var(--button-bg); color: var(--ink-inverse); }
:root[data-buy-first] [data-cta="buy"]:hover { box-shadow: var(--button-shadow-hover); background-color: #111; color: var(--ink-inverse); }

/* ============================================================================
   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.

   The base grid is the one this page always had: as many ~300px columns as
   fit, which gives three at full width, two as it narrows and one on a phone.
   Everything below is layered on top of that and only at three columns. */
.help-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  align-items: start;
}

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

/* Explicit placement for the four-card case at three columns.

   Auto-flow already puts the fourth card in column 1, row 2. The trouble is
   that a grid row is as tall as the tallest card in it, and "Using it day to
   day" has nine entries — so row 1 was 706px and the fourth card began below
   that, under a band of empty space.

   Letting the two tall cards span BOTH rows means row 1 is sized by the short
   card instead, and the fourth tucks directly under it.

   1004px is where the base grid itself reaches three columns:
   3 × 300px + 2 × 24px gap + 2 × 28px page padding. Below that none of this
   applies and the cards fall back to auto-flow in DOM order.

   The :has() guard keeps it to exactly four cards. Add a fifth section to
   SECTIONS in the middleware and the placement stops applying rather than
   placing the new card wrongly — the layout falls back to plain auto-flow. */
@media (min-width: 1004px) {
  /* Row 1 sizes to its own card; row 2 is flexible and soaks up whatever
     height the spanning cards still need. Left to itself the grid splits that
     surplus evenly between two auto rows, which pushed row 2 down and left a
     98px hole under "Getting started" instead of the 24px gap used
     everywhere else. A flexible track takes the slack instead. */
  .help-index:has(> :nth-child(4):last-child) { grid-template-rows: auto 1fr; }

  .help-index:has(> :nth-child(4):last-child) > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .help-index:has(> :nth-child(4):last-child) > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .help-index:has(> :nth-child(4):last-child) > :nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
  .help-index:has(> :nth-child(4):last-child) > :nth-child(4) { grid-column: 1; grid-row: 2; }
}

.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); }