/*
 * Rolebird design system — "sharp & modern tech", dark-committed.
 * A single cohesive dark theme (not theme-toggled) for a confident, focused
 * product identity. Every page inherits these tokens and component styles.
 */

:root {
  --bg: #0a0c10;
  --surface: #12161c;
  --surface-2: #171c24;
  --surface-3: #1c222b;
  --border: #232b36;
  --border-strong: #333d4b;

  --text: #eaeff6;
  --muted: #8f9fb2;
  --faint: #64707f;

  --accent: #34e4a1;
  --accent-2: #22c489;
  --accent-ink: #04150d;
  --accent-soft: rgba(52, 228, 161, 0.1);
  --accent-line: rgba(52, 228, 161, 0.28);
  --warm: #ffb44d;

  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.11);
  --warn: #f5c451;
  --warn-soft: rgba(245, 196, 81, 0.1);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --ring: 0 0 0 3px rgba(52, 228, 161, 0.25);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.35);
  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', Roboto, Helvetica, Arial,
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: -0.003em;
  /* A soft accent glow anchored top-centre for depth. */
  background-image:
    radial-gradient(900px 420px at 50% -8%, rgba(52, 228, 161, 0.08), transparent 70%),
    radial-gradient(700px 340px at 90% 0%, rgba(255, 180, 77, 0.05), transparent 70%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(52, 228, 161, 0.28);
  color: #fff;
}

main {
  max-width: 820px;
  margin: 0 auto;
  padding: 3rem 1.25rem 6rem;
}

/* ---------- Typography ---------- */

h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 0.9rem;
}

h2 {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 2.5rem 0 0.9rem;
}

h3 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  font-weight: 650;
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 1rem;
  color: #cbd4df;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

strong {
  color: var(--text);
  font-weight: 650;
}

.muted {
  color: var(--muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  margin-bottom: 1.2rem;
}

.lede {
  font-size: 1.18rem;
  line-height: 1.6;
  color: #c3cdd9;
  max-width: 62ch;
}

/* Ordered/unordered lists */
ol,
ul {
  padding-left: 1.2rem;
  margin: 0 0 1rem;
}
li {
  margin: 0.4rem 0;
  color: #cbd4df;
}
ol {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}
ol > li {
  position: relative;
  padding-left: 2.4rem;
  margin: 0.7rem 0;
}
ol > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
}

/*
 * Ordered lists that are data rather than instructions.
 *
 * The step badge above is written for prose — numbered how-to steps in the
 * guides — and it is absolutely positioned, so `list-style: none` on the element
 * cannot take it off. A list whose items carry their own dates, like the job
 * timeline, wants an ordered list's semantics without the numbering, and the
 * badge otherwise lands directly on top of that content.
 */
ol.plain > li {
  padding-left: 0;
}

ol.plain > li::before {
  content: none;
}

/* ---------- Surfaces ---------- */

.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-1);
}

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  margin: 1.4rem 0;
  box-shadow: var(--shadow-1);
}
.notice--danger {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}
.notice--warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.notice h3 {
  margin: 0 0 0.45rem;
}
.notice p:last-child {
  margin-bottom: 0;
}

/* ---------- Worked-example CTA ----------
   Louder than a notice on purpose: accent-filled rather than a quiet left
   border, because it is the one block on the research pages meant to pull the
   eye and be followed. Distinct enough to read as "this is the thing to click",
   restrained enough not to look like an ad. */
.example-cta {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  margin: 2.2rem 0;
  box-shadow: var(--shadow-1);
}
.example-cta h3 {
  margin: 0.6rem 0 0.5rem;
  font-size: 1.28rem;
  letter-spacing: -0.01em;
}
.example-cta p {
  margin: 0 0 0.9rem;
}
.example-cta__context {
  color: var(--accent);
  font-weight: 600;
}
.example-cta__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  margin-bottom: 0;
}
.example-cta__actions .muted {
  font-size: 0.9rem;
}

/* ---------- Buttons ---------- */

button,
.button {
  font: inherit;
  font-weight: 650;
  letter-spacing: -0.01em;
  padding: 0.68rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition:
    transform 0.08s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
  box-shadow: 0 6px 18px rgba(52, 228, 161, 0.18);
}
button:hover,
.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 26px rgba(52, 228, 161, 0.28);
  text-decoration: none;
}
button:active,
.button:active {
  transform: translateY(0);
}
button:focus-visible,
.button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button.secondary,
.button.secondary {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none;
}
button.secondary:hover,
.button.secondary:hover {
  background: var(--surface-2);
  filter: none;
  box-shadow: none;
}

button.danger {
  background: linear-gradient(180deg, #ff7a7a, #e85555);
  color: #1a0606;
  box-shadow: 0 6px 18px rgba(255, 107, 107, 0.2);
}

/* ---------- Forms ---------- */

label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin: 1.1rem 0 0.4rem;
  color: var(--text);
}

input[type='email'],
input[type='text'],
input[type='url'],
input[type='date'],
input[type='file'],
select,
textarea {
  font: inherit;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
input::placeholder,
textarea::placeholder {
  color: var(--faint);
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/*
 * Selects and date inputs had no styling at all, so they rendered as raw
 * browser controls — a light native widget on a dark page, which reads as
 * broken rather than unstyled. Both arrived with the timeline and the pipeline
 * stages; neither was in the stylesheet before.
 */
select {
  /* Sized to content rather than filling the row: a stage picker beside a
     button should not stretch to the width of the page. */
  width: auto;
  min-width: 9rem;
  cursor: pointer;
}

select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The dark theme does not reach the native dropdown list on its own — without
   this the options render as dark text on a dark background in some browsers. */
select option {
  background: var(--surface);
  color: var(--text);
}

textarea {
  min-height: 15rem;
  resize: vertical;
  line-height: 1.6;
}

.checkbox {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-weight: 400;
  margin: 1.3rem 0;
  color: #cbd4df;
}
.checkbox input {
  margin-top: 0.3rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}

/* ---------- Findings (PII gate) ---------- */

.finding {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.finding:last-child {
  border-bottom: none;
}
.finding code {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 0.12rem 0.4rem;
  font-size: 0.85rem;
  word-break: break-all;
  color: var(--text);
}

.tag {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  white-space: nowrap;
}
.tag--blocking {
  background: var(--danger);
  color: #1a0606;
}
.tag--warning {
  background: var(--warn);
  color: #201700;
}

/* ---------- Layout helpers ---------- */

.row {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: center;
}

.tabs {
  display: flex;
  gap: 0.3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.4rem;
  /* Five pipeline stages do not fit a phone. Scroll rather than wrap, so the
     strip stays one row and every stage stays reachable — same call as the site
     nav. The scrollbar is hidden because the clipped tab at the edge is the
     affordance. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tabs button {
  white-space: nowrap;
}
.tabs button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--muted);
  padding: 0.6rem 0.9rem;
  box-shadow: none;
}
.tabs button:hover {
  color: var(--text);
  transform: none;
  box-shadow: none;
  filter: none;
}
.tabs button[aria-selected='true'] {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 650;
}

/* ---------- Site header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 16, 21, 0.94);
}
.site-nav {
  max-width: 980px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  gap: 1.4rem;
  align-items: center;
}
.site-nav .spacer {
  flex: 1;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.site-nav a.navlink {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 550;
}
.site-nav a.navlink:hover {
  color: var(--text);
  text-decoration: none;
}

/* The messages bell — its own slot after the link strip (see layout.tsx). */
.site-nav a.nav-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}
.site-nav a.nav-bell:hover {
  color: var(--text);
}
.nav-bell-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  background: #dc3545;
  color: #fff;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  min-width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  line-height: 1;
}

/*
 * Phones: the links become a horizontal scroll strip beside the logo.
 *
 * The row does not fit and never will — signing in adds Dashboard and Account,
 * making it longest for the people most likely to be on a phone. Letting it wrap
 * instead pushed the sticky header to three rows and stranded "Sign in" alone on
 * the last one; every link stays reachable this way, and the header keeps its
 * single-row height.
 *
 * Before this the nav simply overflowed, dragging the whole document to 614px
 * wide on a 375px screen — so every page scrolled sideways, not just the header.
 */
@media (max-width: 640px) {
  .site-nav {
    gap: 0.85rem;
    /* No right padding: the strip must reach the viewport edge, so a part-
       scrolled link is visibly cut off. Padding there would read as the end of
       the list and hide the fact that it scrolls. */
    padding: 0.7rem 0 0.7rem 1rem;
  }

  /* The spacer exists to push the links right on desktop. Here they need the
     room, and the logo stays put on the left. */
  .site-nav .spacer {
    display: none;
  }

  .nav-links {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    gap: 1.05rem;
    padding-right: 1rem;
    /* Keep a swipe on the strip from chaining into the page or the browser's
       back gesture. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a.navlink {
    white-space: nowrap;
  }

  /* site-nav loses its right padding here (the strip must reach the edge), so
     the bell supplies its own breathing room against the viewport edge. */
  .site-nav a.nav-bell {
    margin-right: 1rem;
  }
}

/*
 * Wide tables scroll inside themselves rather than widening the page. The
 * research report's rank table is 388px against a 375px viewport, which was the
 * only thing besides the nav pushing the document sideways.
 */
@media (max-width: 720px) {
  .data-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}

/* ---------- Logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}
.logo:hover {
  text-decoration: none;
}
.logo .wordmark {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.logo .wordmark b {
  color: var(--accent);
  font-weight: 800;
}

/* ---------- Hero ---------- */

.hero {
  padding: 1.5rem 0 0.5rem;
}
.gradient-text {
  background: linear-gradient(120deg, var(--text) 30%, var(--accent) 75%, var(--warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.6rem;
}
.cta-note {
  color: var(--faint);
  font-size: 0.88rem;
}

/* ---------- Site footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 1.6rem 1.25rem 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.site-footer .copyright {
  margin: 0;
  color: var(--faint);
  font-size: 0.8rem;
}
.site-footer .credit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.site-footer .credit:hover {
  opacity: 1;
  text-decoration: none;
}
.site-footer .credit img {
  height: 22px;
  width: auto;
  display: block;
}

/* Feature grid for landing / help */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 1.2rem 0;
}
/* For four-card sets: a wider minimum settles at 2x2 in the content column
   instead of a ragged 3+1. Single column on mobile as usual. */
.grid--pairs {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid .card {
  margin: 0;
}

/* --- Article furniture ----------------------------------------------------
   Big-number callouts and CSS-only charts for research articles.

   The 2026 market report carries its own scoped CSS inside an HTML string,
   because it was converted from a standalone artifact. That is not a pattern
   worth repeating for a page written as components: these classes are here so
   the next article can present a statistic visually without inventing its own
   styles, and so the numbers stay legible to a crawler and a screen reader —
   every bar is labelled with its own value in text, the bar itself is
   decoration.

   No JS. The market report's charts hydrate client-side; nothing here needs to.
*/

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0;
}
.pill {
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* A row of headline figures. Falls to one column on a phone. */
.stat-band {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  margin: 1.35rem 0;
}
/* Force a 2x2 layout for four-tile bands where auto-fit would give 3+1 —
   four related figures read as two balanced pairs, not a row and an orphan.
   Collapses to one column on narrow screens like the default band. */
.stat-band--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 520px) {
  .stat-band--pairs {
    grid-template-columns: 1fr;
  }
}
.stat {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.stat-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--accent);
  letter-spacing: -0.02em;
}
/* Tone carries meaning here: a figure that describes a problem should not be
   rendered in the same colour as one that describes a safeguard. */
.stat--warn {
  border-top-color: rgba(245, 196, 81, 0.4);
}
.stat--warn .stat-num {
  color: var(--warn);
}
.stat--danger {
  border-top-color: rgba(255, 107, 107, 0.4);
}
.stat--danger .stat-num {
  color: var(--danger);
}
.stat-cap {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0.45rem;
}
.stat-src {
  color: var(--faint);
  font-size: 0.74rem;
  margin-top: 0.55rem;
}

/* Labelled horizontal bars. The label carries the number, so the bar adds
   emphasis rather than information — nothing is lost without CSS. */
.bars {
  display: grid;
  gap: 0.9rem;
  margin: 1.3rem 0;
}
.bar-label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.bar-label span:last-child {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bar-track {
  height: 0.55rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  border-radius: var(--radius-pill);
}
.bar--danger .bar-label span:last-child {
  color: var(--danger);
}
.bar--danger .bar-fill {
  background: linear-gradient(90deg, #c9455e, var(--danger));
}
.bar--warn .bar-label span:last-child {
  color: var(--warn);
}
.bar--warn .bar-fill {
  background: linear-gradient(90deg, #d9a13a, var(--warn));
}

/* Index card for a listing page: whole tile is the link. */
.tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tile-link:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.tile-link h3 {
  color: var(--text);
  margin-top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tile-link {
    transition: none;
  }
  .tile-link:hover {
    transform: none;
  }
}

/* ===== Long-form article presentation =====================================
   Opt in by putting .article on a page wrapper. /privacy, /help, /terms and the
   guides deliberately keep the plainer treatment they were designed with — this
   is for the pages people are meant to sit and read.

   What it fixes: those pages were a white h1, a stack of identical white h2s,
   and grey paragraphs in identical boxes. Nothing was wrong with it and nothing
   about it invited reading. The tools used here are the ones the landing page
   already uses — the accent, the gradient text, the soft glow — applied to a
   reading layout instead of a pitch.
*/

.article {
  counter-reset: section;
}

/* --- Masthead ---------------------------------------------------------- */

.article .hero {
  position: relative;
  padding: 1.6rem 0 0;
  margin-bottom: 2.1rem;
  /* Own stacking context, so the glow below can sit behind the text without
     escaping to the page background. */
  isolation: isolate;
}
/* Kept inside the content column on purpose. Bleeding this past the column with
   negative horizontal insets looked better on a wide screen and put a
   horizontal scrollbar on every viewport narrower than the 820px container —
   the gradient's own falloff does the softening without leaving the box. */
.article .hero::before {
  content: '';
  position: absolute;
  inset: -4rem 0 auto 0;
  height: 23rem;
  background: radial-gradient(58% 62% at 26% 42%, rgba(52, 228, 161, 0.13), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
/* Hairline that fades out to the right — closes the masthead without the hard
   edge of a full-width rule. */
.article .hero::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 1.7rem;
  background: linear-gradient(90deg, var(--accent-line), var(--border) 38%, transparent);
}
.article .hero h1 {
  font-size: clamp(2.15rem, 5.6vw, 3.3rem);
  line-height: 1.03;
  max-width: 20ch;
  background: linear-gradient(128deg, var(--text) 22%, #c4efdf 54%, var(--accent) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* background-clip:text clips descenders on some engines without this. */
  padding-bottom: 0.08em;
}
.article .hero .lede {
  font-size: 1.2rem;
  line-height: 1.65;
  color: #cbd6e2;
  max-width: 58ch;
}

/* --- Sections ---------------------------------------------------------- */

.article .card {
  position: relative;
  padding: 1.75rem 1.85rem;
  margin-bottom: 1.35rem;
  overflow: hidden;
}
/* A hairline of accent along the top edge, fading at both ends. Reads as
   craft at a glance and costs one pseudo-element. */
.article .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line) 22%, var(--accent-line) 58%, transparent);
}

/* Numbered headings. The counter is what turns a stack of boxes into a piece
   with a structure you can feel your way through. */
.article .card > h2:first-child {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1.15rem;
  padding-bottom: 0.8rem;
  font-size: 1.5rem;
  line-height: 1.2;
  border-bottom: 1px solid var(--border);
}
.article .card > h2:first-child::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  flex: none;
}
/* For a section that is not part of the argument — an index page's footnote,
   a sources list you would rather not number. Needs the .article prefix to
   outrank the rule above; without it this lost on specificity and silently did
   nothing. Suppressing the pseudo-element also skips its counter-increment, so
   an unnumbered section does not consume a number either. */
.article .card--plain > h2:first-child::before {
  content: none;
}

/* --- Reading ----------------------------------------------------------- */

/* Measure. Long lines are the single biggest reason a wall of text is not read,
   and 820px of container is well past comfortable for 16px body copy. */
.article p {
  max-width: 68ch;
  line-height: 1.72;
  color: #c7d2de;
}
.article li {
  max-width: 66ch;
  line-height: 1.68;
}
.article ul li::marker,
.article ol li::marker {
  color: var(--accent);
}
/* Emphasis has to actually be brighter than the body text or it does nothing. */
.article strong {
  color: var(--text);
  font-weight: 650;
}
.article em {
  color: #d8e2ec;
}

/* A line worth stopping on. Use sparingly — one or two in a piece. */
.pull {
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1.15rem;
  border-left: 2px solid var(--accent-line);
  font-size: 1.12rem;
  line-height: 1.55;
  color: #dbe5ef;
  letter-spacing: -0.01em;
  max-width: 58ch;
}

/* --- Index tiles ------------------------------------------------------- */

.tile-link {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.7rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
/* Accent wash that arrives on hover rather than sitting there permanently. */
.tile-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 58% at 50% 0%, var(--accent-soft), transparent 72%);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.tile-link:hover,
.tile-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}
.tile-link:hover::before,
.tile-link:focus-visible::before {
  opacity: 1;
}
.tile-link h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0.35rem 0 0.65rem;
  transition: color 0.18s ease;
}
.tile-link:hover h3 {
  color: #d6f7e9;
}
.tile-cta {
  margin-top: auto;
  padding-top: 1.1rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tile-cta i {
  font-style: normal;
  transition: transform 0.18s ease;
}
.tile-link:hover .tile-cta i {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .tile-link,
  .tile-link::before,
  .tile-link h3,
  .tile-cta i {
    transition: none;
  }
  .tile-link:hover,
  .tile-link:focus-visible {
    transform: none;
  }
  .tile-link:hover .tile-cta i {
    transform: none;
  }
}

/* =============================================================================
   Partner-site additions.

   This file is copied verbatim from apps/web/src/app/globals.css — same
   tokens, same components, so partner.rolebird.net reads as the same product
   as nz.rolebird.net rather than a separately styled brochure. (2026-08-09:
   the previous partner site had its own bespoke serif/dark-green design that
   shared only a vague "dark and green" impression with the real site — wrong
   font, wrong exact green, no rounded corners, a completely different
   component vocabulary. This file exists to stop that drifting back.)

   Everything below is for the handful of things a marketing/brochure site
   needs that an authenticated product UI does not: a breadcrumb trail, an
   FAQ accordion, a spacious landing hero, and a footer link row (the real
   site's own footer has none — just a copyright line). Built from the SAME
   tokens as everything above — no new colours, no new radii, no new font.

   The hero/section spacing below is deliberately more generous than the
   820px reading column's default rhythm: this is a landing page meant to be
   skimmed in a few seconds, not a long-form article meant to be read
   start to finish, and it was reading as the latter (2026-08-09 — first
   pass ported every section of the old site's content 1:1, which produced
   an app-article-dense homepage instead of a pitch). No inline style=""
   attributes anywhere in the HTML: the deployed CSP is `style-src 'self'`
   with no `unsafe-inline`, so an inline style attribute is silently dropped
   the moment this actually deploys — looks fine in a plain local static
   server, breaks on the real Cloudflare domain. Every spacing/sizing tweak
   belongs in a class, here.

   Second pass, same day: matching the app's exact component classes
   (bordered .card boxes for every section) made this read as a page FROM
   the product rather than a site ABOUT it — founder's words, "too much like
   main site... UI I'm not very impressed with." The theme (colour, type,
   the logo) stays identical on purpose; the LAYOUT below is a deliberately
   different, more editorial marketing treatment on top of it — bigger hero
   glow, borderless numbered feature rows instead of card grids, an accent
   CTA band instead of a bordered notice. Same brand, a page that looks like
   it was designed, not assembled from dashboard parts.

   Third pass, same day: "the theme" never meant the app's near-black
   background — founder's words, "black and white and grey... looks really
   gloomy and sad", "cant we have a lite green colored tiling style", and
   the audience is "CEOs and top execs" a dark app-style screen does not
   read as positive or inviting to. globals.css itself says the PRODUCT is
   deliberately "dark-committed, not theme-toggled" — so a light theme here
   was never going to come from copying it more faithfully; it has to be a
   second, light rendering of the SAME brand tokens. `--accent` (#34e4a1)
   and the logo mark are unchanged — genuinely the same green, checkable
   against the real value. Everything that reads FROM the green — text,
   links, the eyebrow — moves to `--accent-text`, a deeper emerald: the
   bright mint is a background/glow/button colour, and mint text on a
   near-white page fails contrast and looks washed out, not premium. */
:root {
  /* Restrained, near-white neutrals with the faintest green cast. The
     audience is CEOs and top execs, so the register is premium and
     confident, not pastel — heavy mint-tinted panels everywhere read as
     soft/consumer, which is the opposite of the intent. Green earns its
     presence through the deep emerald accents, the hero wash and the
     tile edges, not by colouring every surface. */
  --bg: #fbfdfc;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f2f8f4;
  --border: #e3ece7;
  --border-strong: #c3d6ca;

  --text: #0f1f18;
  /* Darkened from #566b60 once the tiles took the green fill: body copy on
     the tint measured 4.97 against 4.5 — passing, but with no headroom. */
  --muted: #3f5348;
  --faint: #6c8578;

  /* Unchanged from the product: same mint, same warm, same logo. */
  --accent: #34e4a1;
  --accent-2: #22c489;
  --warm: #ffb44d;

  /* Deep emerald for anything the eye READS as green. #34e4a1 on a near-
     white page is roughly 1.7:1 against the background — invisible as text
     and cheap-looking. This is the same hue, dark enough to carry weight. */
  --accent-text: #0b6f4a;
  --accent-deep: #0a5f3f;

  --accent-ink: #ffffff;
  /* The numbered step badges on /pilot/ and /data-handling/ (ol > li::before)
     already fill with this — founder pointed at it directly: "the background
     colour used for the numbering, use the same colouring for tile
     background, it needs more colour and contrast." Raised from 0.12 so
     both the badges and the tiles carry real colour, and used as the tile
     fill below so they are literally the same value, not a near-match. */
  --accent-soft: rgba(52, 228, 161, 0.22);
  --accent-line: rgba(11, 111, 74, 0.22);

  --ring: 0 0 0 3px rgba(11, 111, 74, 0.22);
  /* Soft, low, wide — depth rather than a drawn box. This is most of what
     makes a light page read as considered instead of flat. */
  --shadow-1: 0 1px 2px rgba(15, 45, 32, 0.04), 0 12px 28px rgba(15, 45, 32, 0.07);
}

/* Light, airy page wash — replaces the dark theme's glow-on-black, which
   renders as muddy smears on a light background. */
body {
  background-image:
    radial-gradient(900px 460px at 50% -10%, rgba(52, 228, 161, 0.22), transparent 70%),
    radial-gradient(700px 380px at 92% 0%, rgba(255, 180, 77, 0.12), transparent 72%);
}

/* Every dark-theme colour that was hard-coded as a literal hex rather than
   a variable, and so did not re-theme with the tokens above. Light grey-blue
   body text is near-invisible on a light page. */
p,
li,
.article p,
.article em,
.pull {
  color: var(--text);
}
.lede,
.article .lede {
  color: var(--muted);
}
::selection {
  background: rgba(52, 228, 161, 0.35);
  color: var(--text);
}

/* Links and the eyebrow read the deep emerald, not the mint. */
a,
.eyebrow,
.tile-cta,
ol > li::before,
.article .card > h2:first-child::before,
.article ul li::marker,
.article ol li::marker {
  color: var(--accent-text);
}

/* Solid deep-green buttons: white on mint is ~1.7:1 and unreadable, and a
   pale button on a pale page has no authority. This is the strongest,
   most confident element on the page, which is what a single primary CTA
   should be. */
button,
.button {
  background: linear-gradient(180deg, var(--accent-text), var(--accent-deep));
  color: var(--accent-ink);
  box-shadow: 0 6px 16px rgba(11, 111, 74, 0.22);
}
button:hover,
.button:hover {
  box-shadow: 0 10px 24px rgba(11, 111, 74, 0.3);
}
button.secondary,
.button.secondary {
  background: #ffffff;
  color: var(--accent-text);
  border-color: var(--border-strong);
}
button.secondary:hover,
.button.secondary:hover {
  background: var(--surface);
}

/* The sticky header was a translucent near-black pane. */
.site-header {
  background: rgba(246, 250, 247, 0.92);
  backdrop-filter: blur(10px);
}

/* Tiles on /pilot/ and /data-handling/ take the same green fill as the
   homepage tiles and the numbered badges, so "tile" means one thing across
   the site. The app's own .card is a white-to-white gradient under the
   light tokens, which is what made these pages read as colourless. */
.card {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
/* Tile headings take the deep green, matching the homepage tiles — the
   app leaves h3 at body colour, which read as flat black-on-green here. */
.card h3 {
  color: var(--accent-text);
}

/* Headline gradient: mint-to-warm over near-white washes out to nothing.
   Deep emerald into the mint keeps the brand read and stays legible. */
.gradient-text {
  background: linear-gradient(115deg, var(--text) 18%, var(--accent-text) 62%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.breadcrumb {
  margin: 0 0 1.4rem;
  color: var(--faint);
  font-size: 0.85rem;
}
.breadcrumb a {
  color: var(--muted);
}
.breadcrumb a:hover {
  color: var(--text);
}

/* ONE column width across every page, and the header matched to it.
   Previously the homepage ran at 1080px while /pilot/ and /data-handling/
   kept the app's 820px reading width, with the nav fixed at 980px on all
   three — so the header sat wider than the content on the subpages and
   narrower than it on the homepage. Founder saw the symptom: "I see the
   menu size and that changes, once off the home page." The menu never
   changed; the content moved around it.

   The app can get away with 820px because it is a reading column. A
   marketing site cannot have its frame resize between pages. */
main,
.site-nav {
  max-width: 1080px;
}

/* The wider frame would otherwise stretch the text-heavy subpages to
   ~130 characters a line. Direct children only, so prose inside tiles and
   the centred CTA band keeps its own measure. */
main > p,
main > ol,
main > ul {
  max-width: 68ch;
}

/* A real hero moment for a landing page, not the app's quiet
   .hero (padding: 1.5rem 0 0.5rem, no background treatment — correct for a
   page the user is already inside, wrong for the first thing a visitor
   sees). Own stacking context so the glow sits behind the text without
   escaping the column; the glow is stronger and lower than the app body's
   own (radial-gradient in globals.css body) because this has to read as a
   splash, not a background tint. Same gradient-text/eyebrow/cta-row
   underneath — the brand is identical, only the presence changes. */
.hero--landing {
  position: relative;
  isolation: isolate;
  /* Clips the glow below — without this, its negative horizontal inset
     extended past the viewport edge and added real horizontal scroll on
     mobile (documentElement.scrollWidth > clientWidth, caught in testing). */
  overflow: hidden;
  padding: 4.4rem 0 3.2rem;
}
.hero--landing::before {
  content: '';
  position: absolute;
  inset: -3rem -3rem auto -3rem;
  height: 26rem;
  background:
    radial-gradient(52% 62% at 16% 28%, rgba(52, 228, 161, 0.34), transparent 70%),
    radial-gradient(40% 52% at 84% 8%, rgba(255, 180, 77, 0.2), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
.hero--landing h1 {
  font-size: clamp(2.5rem, 6.4vw, 3.7rem);
  max-width: 18ch;
}
.hero--landing .lede {
  font-size: 1.3rem;
  max-width: 46ch;
}

/* A nav CTA the plain app header doesn't need (its links are all equal
   weight — Sign in isn't visually different from Guides). A brochure site
   benefits from one link reading as the action; the rest as reference. */
.nav-links a.nav-cta {
  padding: 0.42rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-line);
  background: var(--surface-2);
  color: var(--accent-text);
  font-weight: 650;
}
.nav-links a.nav-cta:hover {
  border-color: var(--accent-text);
  background: var(--surface-3);
  text-decoration: none;
}

/* Soft green tiles — the founder's "lite green colored tiling style", and
   the thing that stops this page reading as grey boxes on a dark screen.
   A tinted panel with a green top edge, not a hairline-bordered card:
   the colour IS the container, so the page has warmth without needing a
   heavy border to define each block.

   2026-08-09: had a "01/02/03" numeral above each heading — founder's
   direct words, "why do we need the numbering for? doesn't add anything,
   doesn't look either." Correct: three items don't need a sequence marker.
   Dropped; the tile itself carries the separation now. */
.feature-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin: 0;
}
.feature-rows > div {
  position: relative;
  overflow: hidden;
  padding: 2.1rem 1.8rem 1.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent-line);
  /* Same fill as the numbered step badges (ol > li::before) — see the
     --accent-soft note in the token block. */
  background: var(--accent-soft);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
/* A short green rule at the top edge rather than a full coloured band —
   the accent as a considered detail, which is the difference between
   premium and decorated. */
.feature-rows > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3.4rem;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-text), var(--accent));
}
.feature-rows > div:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 45, 32, 0.05), 0 18px 38px rgba(15, 45, 32, 0.1);
}
@media (prefers-reduced-motion: reduce) {
  .feature-rows > div,
  .feature-rows > div:hover {
    transition: none;
    transform: none;
  }
}
.feature-rows h3 {
  font-size: 1.28rem;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
  color: var(--accent-text);
}
.feature-rows p {
  color: var(--muted);
  margin-bottom: 0;
}
@media (max-width: 720px) {
  .feature-rows {
    grid-template-columns: 1fr;
  }
}

/* The closing CTA as an accent-tinted band, not another bordered .notice —
   the one place on the page that should look like a decision point, not
   one box among several. */
.cta-band {
  margin: 0;
  padding: 3.4rem 2.4rem;
  border-radius: var(--radius);
  background: linear-gradient(155deg, #0d3d2b, #0b6f4a 78%);
  border: 0;
  box-shadow: 0 14px 34px rgba(11, 111, 74, 0.24);
  text-align: center;
}
.cta-band h3 {
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  max-width: 32ch;
  margin: 0 auto 0.6rem;
  color: #ffffff;
}
.cta-band p {
  max-width: 42ch;
  margin: 0 auto 1.5rem;
  color: rgba(255, 255, 255, 0.86);
}
/* Inverted on the dark band: white button, deep green label. The one
   deliberately high-contrast moment on the page. */
.cta-band .button {
  font-size: 1.02rem;
  padding: 0.85rem 1.7rem;
  background: #ffffff;
  color: var(--accent-deep);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.cta-band .button:hover {
  background: #f2f8f4;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

/* Section rhythm for a page that should feel like three or four confident
   moves, not a dense stack. Generous top margin, no bottom margin — the
   section's own content supplies the space below it. */
.section-gap {
  margin-top: 4.2rem;
}

/* A brief sub-heading line under an <h2> — was inline
   style="font-size:1.05rem" throughout; also drops the .lede max-width
   since these sit under a heading, not in the hero. */
.section-lede {
  font-size: 1.05rem;
  max-width: 60ch;
}

/* The last paragraph in a card or a notice shouldn't carry the base
   1rem bottom margin — was inline style="margin-bottom:0" on nearly every
   card across the site. */
.card p:last-child,
.notice p:last-child {
  margin-bottom: 0;
}

/* 404 page. Minimal on purpose — was inline style twice for the same
   reason everything else above was. */
.not-found {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.not-found .logo {
  margin-bottom: 3rem;
}

/* Footer link row. The real site's footer doesn't have one (just the
   copyright line) — this is the one place the partner site's footer
   genuinely needs something the app footer doesn't. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.3rem;
  margin: 0.3rem 0;
}
.footer-links a {
  color: var(--muted);
  font-size: 0.85rem;
}
.footer-links a:hover {
  color: var(--text);
}

.faq details {
  border-bottom: 1px solid var(--border);
}
.faq details:last-child {
  border-bottom: none;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 0;
  color: var(--text);
  font-weight: 650;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1;
}
.faq details[open] summary::after {
  content: '\2212';
}
.faq details p {
  margin: -0.3rem 0 1.3rem;
}