/* Meridian design system: one stylesheet for every page on meridian.asterhire.live.
   Look: "Signal" (white, ink, reply-green), Manrope + IBM Plex Mono, light and dark.
   Rules: no JS, no inline styles (strict CSP). Link this file FIRST, then the page's own file.

   Cascade layers (lowest to highest priority):
     tokens      colours, type, radii (primitive -> semantic -> legacy aliases)
     base        element defaults
     page        each page's own stylesheet wraps itself in @layer page { ... }
     components  shared parts (header, buttons, footer...). They sit ABOVE page so every
                 page gets the same header, buttons and footer even if old page CSS says otherwise. */

@layer tokens, base, page, components;

@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations"), url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
/* Fraunces is kept only for the client newsletter mock-ups on the sample pages. */
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2-variations"), url("fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-display: swap; font-weight: 100 900; src: url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2-variations"), url("fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); }

/* ================= tokens ================= */
@layer tokens {
  :root {
    color-scheme: light dark;
    /* primitives */
    --p-white: #FFFFFF;
    --p-ink-950: #0B0F0E;
    --p-ink-700: #26302D;
    --p-ink-600: #4B5552;
    --p-ink-500: #6B7572;
    --p-ink-200: #E3E8E6;
    --p-ink-100: #EEF2F0;
    --p-ink-50: #F6F8F7;
    --p-green-500: #00B37E;
    --p-green-400: #12C48E;
    --p-green-300: #3DDCA7;
    --p-green-700: #0B7A57;
    --p-green-950: #04140E;
    --p-green-50: #E6F7F0;
    --p-green-25: #F2FBF7;

    /* semantic */
    --bg: var(--p-white);
    --surface: var(--p-ink-50);
    --card: var(--p-white);
    --ink: var(--p-ink-950);
    --ink-inv: var(--p-white);
    --body: var(--p-ink-700);
    --muted: var(--p-ink-600);
    --faint: var(--p-ink-500);
    --line: var(--p-ink-200);
    --line-soft: var(--p-ink-100);
    --green: var(--p-green-500);
    --green-hover: var(--p-green-400);
    --green-ink: var(--p-green-950);
    --green-text: var(--p-green-700);
    --green-tint: var(--p-green-50);
    --green-row: var(--p-green-25);
    --dark: var(--p-ink-950);
    --dark-text: var(--p-white);
    --dark-muted: #C6CFCC;
    --dark-line: #34403C;
    --dark-green: var(--p-green-300);
    --focus: var(--p-green-700);
    --shadow: 0 30px 60px -30px rgba(11, 15, 14, 0.35);
    --shadow-sm: 0 10px 30px rgba(11, 15, 14, 0.07);
    --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --serif: "Fraunces", Georgia, serif; /* client mock-ups only */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --wrap: 1200px;

    /* legacy aliases: older page stylesheets use these names; they now point at Signal */
    --accent: var(--green);
    --accent-fill: var(--green);
    --accent-text: var(--green-text);
    --on-accent: var(--green-ink);
    --band: var(--surface);
    --tile: var(--green-tint);
    --chip: var(--green-tint);
    --feature: var(--dark);
    --feature-ink: var(--dark-text);
    --feature-line: rgba(255, 255, 255, 0.3);
    --feature-card: rgba(255, 255, 255, 0.07);
    --reply-label: var(--dark-green);
    --new-bg: var(--ink);
    --new-fg: var(--ink-inv);
    --ok: var(--green-text);
    --ok-bg: var(--green-tint);
    --focus-on-feature: var(--dark-green);
    --paper: var(--bg);
    --paper-deep: var(--surface);
    --ink-2: var(--body);
    --rule: var(--ink);
    --hair: var(--line);
    --tint: var(--green-row);
    --tint-line: #BFE8D7;
    --on-ink: var(--bg);
    --globe-grid: 0.12;
    --globe-strong: 0.4;
    --gutter: 32px;
    --accent-big: var(--green-text);
    --feature-label: var(--dark-green);
    --feature-sub: var(--dark-muted);
    --link: var(--green-text);
    --link-hover: var(--ink);
    --toggle-on: var(--ink);
    --toggle-on-ink: var(--ink-inv);
  }
  @media (max-width: 640px) { :root { --gutter: 16px; } }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0B0F0E;
      --surface: #131A18;
      --card: #111715;
      --ink: #EEF3F1;
      --ink-inv: #0B0F0E;
      --body: #D3DBD8;
      --muted: #A9B4B0;
      --faint: #8C9894;
      --line: #26312D;
      --line-soft: #1C2522;
      --green-text: #3DDCA7;
      --green-tint: #0F2A21;
      --green-row: #0F211B;
      --dark: #18211E;
      --focus: #3DDCA7;
      --tint-line: #1E4A3A;
      --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
      --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
  }
}

/* ================= base ================= */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-width: 100%; }
  a { color: var(--green-text); text-underline-offset: 3px; }
  a:hover { color: var(--ink); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
  h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; font-family: var(--sans); }
  p, figure, blockquote, dl, dd { margin: 0; }
  strong, b { font-weight: 800; }
}

/* ================= components ================= */
@layer components {
  .wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
  @media (max-width: 640px) { .wrap { padding-left: 16px; padding-right: 16px; } }
  .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; }
  .skip-link { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--bg); padding: 10px 14px; z-index: 10; border-radius: 8px; }
  .skip-link:focus { top: 12px; color: var(--bg); }
  .mono { font-family: var(--mono); }
  .nowrap { white-space: nowrap; }

  /* header */
  .site-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 20px; background: transparent; border: 0; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
  .brand:hover { color: var(--ink); }
  .brand svg { width: 28px; height: 28px; flex: none; }
  .brand-word { font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: -0.4px; }
  .brand .ink-fill { fill: var(--ink); }
  .brand .ink-stroke { stroke: var(--ink); }
  .brand .brand-dot { fill: var(--green); }
  .nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 15px; font-weight: 600; }
  .nav a { color: var(--muted); text-decoration: none; }
  .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
  .nav .nav-cta { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: var(--radius-sm); background: var(--ink); color: var(--ink-inv); font-weight: 700; }
  .nav .nav-cta:hover { color: var(--ink-inv); }
  .nav .nav-cta.go { background: var(--green); color: var(--green-ink); }
  @media (max-width: 640px) { .nav { gap: 16px; } .nav .hide-sm { display: none; } }

  /* buttons: .btn alone is the primary (green) button */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 26px; border-radius: 12px; font-family: var(--sans); font-weight: 800; font-size: 17px; line-height: 1.2; text-align: center; text-decoration: none; border: 1.5px solid transparent; background: var(--green); color: var(--green-ink); cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
  .btn:hover { transform: translateY(-1px); background: var(--green-hover); color: var(--green-ink); }
  @media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }
  .btn-green, .btn-accent { background: var(--green); color: var(--green-ink); }
  .btn-ink { background: var(--ink); color: var(--ink-inv); }
  .btn-ink:hover { background: var(--ink); color: var(--ink-inv); }
  .btn-line, .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
  .btn-line:hover, .btn-ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
  .btn-on-dark, .btn-ghost-feature { background: transparent; border-color: var(--dark-line); color: var(--dark-text); }
  .btn-on-dark:hover, .btn-ghost-feature:hover { background: transparent; border-color: var(--dark-text); color: var(--dark-text); }
  .btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; border-radius: var(--radius-sm); }
  .btn-lg { min-height: 58px; padding: 0 30px; font-size: 18px; }
  .btn-block { display: flex; width: 100%; }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; }

  /* type helpers */
  .eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); }
  .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--green-tint); color: var(--green-text); font-weight: 700; font-size: 14px; }
  .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
  .section { padding-top: 88px; }
  @media (max-width: 640px) { .section { padding-top: 64px; } }
  .section-head { max-width: 720px; }
  .section-head h2, .section-title { margin-top: 10px; font-family: var(--sans); font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
  .section-head p.sub { margin-top: 12px; font-size: 18px; color: var(--muted); }

  /* FAQ (details/summary) */
  .faq-list { margin-top: 24px; border-top: 1px solid var(--line); max-width: 860px; }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; font-weight: 800; font-size: 18px; min-height: 44px; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 700; color: var(--green-text); }
  .faq-list details[open] summary::after { content: "\2212"; }
  .faq-list .answer, .faq-list details > p { padding: 0 0 20px; color: var(--muted); max-width: 720px; }
  .faq-list .answer p + p { margin-top: 10px; }

  /* closing call-to-action band */
  .cta { margin-top: 96px; }
  .cta-inner { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: center; justify-content: space-between; padding: 44px; border-radius: 24px; background: var(--green-tint); }
  .cta h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.03em; max-width: 640px; }
  .cta p.sub { margin-top: 10px; color: var(--muted); max-width: 600px; }
  .cta .actions { margin-top: 24px; }
  @media (max-width: 640px) { .cta-inner { padding: 28px 20px; } .cta .btn { flex: 1 1 100%; } }
  .people { display: flex; flex-direction: column; gap: 16px; }
  .person { display: flex; gap: 14px; align-items: center; max-width: 360px; }
  .person-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
  .person-initials { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--ink-inv); display: grid; place-items: center; font-weight: 800; font-size: 18px; font-family: var(--sans); }
  .person-name { font-weight: 800; }
  .person-role { font-size: 14px; color: var(--muted); }
  .person-role a { font-weight: 700; }

  /* footer */
  .site-footer { margin-top: 88px; border-top: 1px solid var(--line); padding: 44px 0 56px; font-size: 15px; background: transparent; color: var(--ink); }
  .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
  .footer-col { display: flex; flex-direction: column; gap: 8px; }
  .footer-col a { color: var(--muted); text-decoration: none; }
  .footer-col a:hover, .footer-col a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
  .footer-head { font-weight: 800; margin-bottom: 4px; color: var(--ink); }
  .footer-legal { margin-top: 32px; font-size: 13px; color: var(--faint); }
  .footer-legal + .footer-legal { margin-top: 6px; }
}