/* ==========================================================================
   NRLC.ai — Croutons skin.
   Brings nrlc.ai in line with croutons.ai and agentc.croutons.ai: one
   monochrome scale (ink on paper, quiet greys, hairline borders), Hanken
   Grotesk light for headlines, Geist Mono for labels, double hairline frames,
   and a halftone dot field. NRLC's one departure is the purple chrome orb,
   which also lends its hue to focus rings and "live" accents.

   Loaded last (templates/head.php), so it restates the existing token names
   rather than renaming them: components keep working without changes.
   ========================================================================== */

:root,
body.page-home,
body .page-home,
body .home-landing,
body .home-hero {
  /* Croutons scale */
  --cr-paper: #fafafa;
  --cr-surface: #ffffff;
  --cr-surface-2: #f3f3f3;
  --cr-line: #e8e8e8;
  --cr-line-strong: #d6d6d6;
  --cr-ink: #111111;
  --cr-ink-2: #4d4d4d;
  --cr-ink-3: #8c8c8c;
  --cr-dots: rgb(0 0 0 / .07);
  --cr-radius: 10px;
  --cr-radius-sm: 6px;
  --cr-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --cr-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Purple chromium: the orb's hue, used sparingly */
  --cr-chrome: rgb(146 92 240);
  --cr-chrome-soft: rgb(146 92 240 / .1);
  --cr-chrome-glow: rgb(170 120 255 / .55);

  /* Editorial system tokens */
  --nrlc-ink: var(--cr-ink);
  --nrlc-muted: var(--cr-ink-2);
  --nrlc-muted-2: var(--cr-ink-3);
  --nrlc-sky: var(--cr-ink-2);
  --nrlc-sky-strong: var(--cr-ink);
  --nrlc-sky-soft: var(--cr-surface-2);
  --nrlc-plum-wash: var(--cr-surface);
  --nrlc-plum-wash-deep: var(--cr-surface-2);
  --nrlc-plum-ink: var(--cr-ink);
  --nrlc-plum-edge: var(--cr-line-strong);
  --nrlc-plum-edge-strong: var(--cr-ink-3);
  --nrlc-plum-shadow: rgb(0 0 0 / .04);
  --nrlc-ink-raised: #2e2e2e;
  --nrlc-surface: var(--cr-surface);
  --nrlc-surface-soft: var(--cr-paper);
  --nrlc-surface-blue: var(--cr-surface-2);
  --nrlc-line: var(--cr-line);
  --nrlc-line-strong: var(--cr-line-strong);
  --nrlc-mesh-bg: var(--cr-paper);
  --nrlc-mesh-bg-rich: var(--cr-paper);
  --nrlc-mesh-bg-soft: var(--cr-paper);
  --nrlc-radius-sm: var(--cr-radius-sm);
  --nrlc-radius-md: var(--cr-radius);
  --nrlc-radius-lg: 20px;
  --nrlc-radius-xl: 28px;
  --nrlc-shadow-card: 0 1px 2px rgb(0 0 0 / .04);
  --nrlc-shadow-soft: 0 1px 2px rgb(0 0 0 / .04);
  --nrlc-font-display: var(--cr-font);
  --nrlc-font-body: var(--cr-font);
  --nrlc-font-sans: var(--cr-font);

  /* Homepage tokens */
  --font-display: var(--cr-font);
  --font-serif: var(--cr-font);
  --font-sans: var(--cr-font);
  --font-body: var(--cr-font);
  --font-mono: var(--cr-mono);
  --ink: var(--cr-ink);
  --ink-muted: var(--cr-ink-2);
  --muted: var(--cr-ink-2);
  --card-border: var(--cr-line);
  --act-ink: var(--cr-ink);
  --act-muted: var(--cr-ink-2);
  --act-label: var(--cr-ink-3);
  --act-surface: var(--cr-surface);
  --act-surface-raised: var(--cr-surface);
  --act-border: var(--cr-line);
  --act-border-strong: var(--cr-line-strong);
  --act-glow: transparent;
  --surface: var(--cr-surface);
  --surface-solid: var(--cr-surface);
  --surface-blue: var(--cr-surface-2);
  --line: var(--cr-line);
  --sky: var(--cr-ink-2);
  --sky-soft: var(--cr-surface-2);
  --accent: var(--cr-ink);
  --radius-editorial: var(--cr-radius);
  --radius-lg: 20px;
  --radius-xl: 28px;
  --c-accent: var(--cr-ink);
  --c-bg-2: var(--cr-paper);
  --c-ink: var(--cr-ink);
  --c-ink-soft: var(--cr-ink-2);
  --c-muted: var(--cr-ink-3);
  --c-line: var(--cr-line);
  --c-line-strong: var(--cr-line-strong);
  --c-brand-violet: var(--cr-chrome);
  --c-brand-violet-wash: var(--cr-surface);
  --c-brand-violet-wash-deep: var(--cr-surface-2);
  --c-on-violet-wash: var(--cr-ink);
  --c-wash-edge: var(--cr-line-strong);
  --c-wash-edge-strong: var(--cr-ink-3);
  --c-violet-wash-shadow: rgb(0 0 0 / .04);
}

/* ── Base ─────────────────────────────────────────────────── */

body,
body.page-home {
  background: var(--cr-paper);
  color: var(--cr-ink);
  font-family: var(--cr-font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body :where(button, input, select, textarea) { font-family: inherit; }
body :where(code, pre, kbd, samp) { font-family: var(--cr-mono); }

/* Headlines: one family, light, tight tracking (croutons base.css). */
body :where(h1, h2) {
  font-family: var(--cr-font);
  font-weight: 300;
  font-style: normal;
  color: var(--cr-ink);
  text-wrap: balance;
}
body :where(h1) { letter-spacing: -.045em; line-height: 1.04; }
body :where(h2) { letter-spacing: -.035em; line-height: 1.1; }
body :where(h3, h4) {
  font-family: var(--cr-font);
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--cr-ink);
}

/* Display classes the templates use for headlines. */
.nrlc-display,
.nrlc-hero-title,
.home-hero__title,
.home-section__title,
.home-cta-card__title,
.home-market-layer__title,
.home-statement__quote,
.nrlc-card__title {
  font-family: var(--cr-font) !important;
  font-style: normal !important;
}
.nrlc-display,
.nrlc-hero-title,
.home-hero__title,
.home-section__title,
.home-cta-card__title,
.home-market-layer__title,
.home-statement__quote {
  font-weight: 300 !important;
  letter-spacing: -.04em !important;
}
.home-hero__title,
.nrlc-hero-title { line-height: 1.04 !important; }
.nrlc-card__title { font-weight: 550 !important; letter-spacing: -.01em; }
/* Titles wrap their term in <dfn>; the browser's default italic was a serif habit. */
:is(h1, h2, h3, h4, [class*="title"]) dfn { font-style: normal; }

/* Secondary half of a headline, greyed (croutons ".dim"). */
.dim, .home-hero__line + .home-hero__br + .home-hero__line { color: var(--cr-ink-3); }

/* Labels and eyebrows: Geist Mono, spaced caps. */
.nrlc-eyebrow,
.home-eyebrow,
.site-footer__nav-label,
.nrlc-breadcrumb,
.home-card__pill,
.home-market-chip {
  font-family: var(--cr-mono) !important;
  font-weight: 500;
  font-size: .72rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--cr-ink-3) !important;
}

body a:where(:not([class])) {
  color: var(--cr-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cr-line-strong);
  text-underline-offset: 3px;
}
body a:where(:not([class])):hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--cr-chrome) !important;
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--cr-chrome-soft); color: var(--cr-ink); }

/* ── Background: halftone dots on a graphene lattice ─────────
   A fixed layer behind every page. The dots are croutons' halftone field;
   under them sits a faint hexagonal (graphene) lattice, and a soft band of
   purple light drifts slowly across it — the "flux". Both fade out toward
   the edges so text never sits on busy ground. */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(var(--cr-dots) 1px, transparent 1.4px) 0 0 / 14px 14px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='83.14' viewBox='0 0 48 83.14'%3E%3Cpath d='M24 0l24 13.86v27.71L24 55.43 0 41.57V13.86zM24 55.43V83.14M0 13.86L-24 0M48 13.86L72 0' fill='none' stroke='%23000' stroke-opacity='.045' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 48px 83.14px;
  -webkit-mask: radial-gradient(ellipse 75% 60% at 50% 30%, #000 25%, transparent 78%);
  mask: radial-gradient(ellipse 75% 60% at 50% 30%, #000 25%, transparent 78%);
}

body::after {
  background: radial-gradient(ellipse 40% 30% at 50% 50%, rgb(150 95 255 / .07), transparent 70%);
  background-size: 200% 200%;
  background-position: 30% 20%;
  -webkit-mask: radial-gradient(ellipse 80% 65% at 50% 30%, #000 30%, transparent 80%);
  mask: radial-gradient(ellipse 80% 65% at 50% 30%, #000 30%, transparent 80%);
}

@media (prefers-reduced-motion: no-preference) {
  body::after { animation: crFlux 26s ease-in-out infinite alternate; }
  @keyframes crFlux {
    0%   { background-position: 20% 15%; }
    50%  { background-position: 80% 35%; }
    100% { background-position: 45% 70%; }
  }
}

/* Old backdrops give way to the shared field. Page wrappers painted the
   ground themselves, which hid it. */
body > main,
body > .container,
.home-landing,
.home-page-content,
.nrlc-page,
.home-hero,
.nrlc-hero,
.nrlc-market-hero { background: transparent !important; }
.home-hero__backdrop,
.home-hero__backdrop-overlay,
.soft-aurora-wrapper { display: none !important; }

/* ── Header ───────────────────────────────────────────────── */

.site-header {
  background: rgb(250 250 250 / .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--cr-line);
  box-shadow: none;
}
.site-header--overlay { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-nav { font-family: var(--cr-font); min-height: 64px; }
.site-nav__link {
  color: var(--cr-ink-2) !important;
  font-size: .9rem;
  font-weight: 450;
  border-radius: var(--cr-radius-sm);
  background: none !important;
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--cr-ink) !important; }

/* ── Buttons ──────────────────────────────────────────────── */

.site-nav__cta,
.site-nav__menu-cta,
.nrlc-button,
.nrlc-button-primary,
.nrlc-btn--primary,
.home-btn,
.home-btn--primary,
.home-btn--cta,
.home-hero__finder-btn {
  font-family: var(--cr-font) !important;
  font-weight: 500 !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  border-radius: var(--cr-radius-sm) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .15s, border-color .15s, color .15s;
}

.site-nav__cta,
.site-nav__menu-cta,
.nrlc-button-primary,
.nrlc-btn--primary,
.home-btn--primary,
.home-btn--cta,
.home-hero__finder-btn {
  background: var(--cr-ink) !important;
  border: 1px solid var(--cr-ink) !important;
  color: #fff !important;
}
.site-nav__cta:hover,
.site-nav__menu-cta:hover,
.nrlc-button-primary:hover,
.nrlc-btn--primary:hover,
.home-btn--primary:hover,
.home-btn--cta:hover,
.home-hero__finder-btn:hover { background: #2e2e2e !important; border-color: #2e2e2e !important; }

.nrlc-button-secondary,
.nrlc-btn--secondary,
.home-btn--secondary,
.home-btn--outline,
.home-btn--cta-secondary {
  background: var(--cr-surface) !important;
  border: 1px solid var(--cr-line-strong) !important;
  color: var(--cr-ink) !important;
  border-radius: var(--cr-radius-sm) !important;
  box-shadow: none !important;
}
.nrlc-button-secondary:hover,
.nrlc-btn--secondary:hover,
.home-btn--secondary:hover,
.home-btn--outline:hover,
.home-btn--cta-secondary:hover { border-color: var(--cr-ink-3) !important; }

.nrlc-text-link,
.nrlc-arrow-link,
.home-arrow-link,
.home-text-link {
  color: var(--cr-ink) !important;
  font-weight: 500;
}

/* ── Homepage hero finder: the "give this to your agent" bar ── */

.home-hero__finder {
  background: var(--cr-surface) !important;
  border: 1px solid var(--cr-line-strong) !important;
  border-radius: 14px !important;
  padding: 6px 6px 6px 16px !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04) !important;
}
.home-hero__finder:focus-within { border-color: var(--cr-ink-3) !important; box-shadow: 0 0 0 4px var(--cr-chrome-soft) !important; }
.home-hero__finder input { font-family: var(--cr-mono) !important; font-size: .9rem !important; background: transparent !important; }
.home-hero__finder-btn { border-radius: 10px !important; }
.home-hero__finder-note { font-family: var(--cr-mono); font-size: .75rem; letter-spacing: .04em; color: var(--cr-ink-3) !important; }
.home-hero__copy, .nrlc-lede, .nrlc-hero__lede { color: var(--cr-ink-2) !important; }

/* ── Cards and panels: white, one hairline, small radius ──── */

.nrlc-card,
.editorial-card,
.home-term-card,
.home-market-card,
.home-feature__card,
.home-stack-card--report,
.home-faq__item,
.nrlc-faq,
.nrlc-card--form,
.nrlc-related-links {
  background: var(--cr-surface) !important;
  border: 1px solid var(--cr-line) !important;
  border-radius: var(--cr-radius) !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.nrlc-card--linked:hover,
.home-market-card:hover,
.home-feature__card:hover { border-color: var(--cr-line-strong) !important; transform: none !important; }

/* Feature panels sit in a double hairline frame, like croutons' display case. */
.home-cta-card,
.nrlc-final-cta,
.home-compare__col--highlight {
  position: relative;
  background: var(--cr-surface) !important;
  border: 1px solid var(--cr-line-strong) !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  isolation: isolate;
}
.home-cta-card::before,
.nrlc-final-cta::before,
.home-compare__col--highlight::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid var(--cr-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, var(--cr-chrome-soft), transparent 60%),
    radial-gradient(var(--cr-dots) 1px, transparent 1.4px) 0 0 / 12px 12px;
  pointer-events: none;
}

/* Tables and chips: hairlines and mono labels. */
.nrlc-table { border: 1px solid var(--cr-line); border-radius: var(--cr-radius); background: var(--cr-surface); }
.nrlc-table th { font-family: var(--cr-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-ink-3); font-weight: 500; }
.nrlc-table th, .nrlc-table td { border-color: var(--cr-line) !important; }
.nrlc-link-chips a,
.home-market-chip {
  border: 1px solid var(--cr-line) !important;
  border-radius: 999px !important;
  background: var(--cr-surface) !important;
  color: var(--cr-ink-2) !important;
}

/* Section rhythm: hairline bands instead of tinted slabs. */
.home-section,
.nrlc-section { background: transparent !important; }

/* ── Interior hero orb: the same liquid chrome as the logo ─── */

.nrlc-hero-orb,
.nrlc-hero-orb--blue,
.nrlc-hero-orb--pink,
.nrlc-hero-orb--violet {
  /* The sphere spans 788 of the SVG's 1024 units, so 130% fills the circle. */
  background: url("/assets/brand/nrlc-orb.svg") center / 130% no-repeat !important;
  box-shadow: 0 28px 40px rgb(60 20 120 / .22) !important;
}

/* ── Footer ───────────────────────────────────────────────── */

.site-footer {
  background: var(--cr-surface) !important;
  border-top: 1px solid var(--cr-line) !important;
  color: var(--cr-ink-2) !important;
  font-family: var(--cr-font);
}
.site-footer__link,
.site-footer__action-link,
.site-footer__phone-link { color: var(--cr-ink-2) !important; }
.site-footer__link:hover,
.site-footer__action-link:hover { color: var(--cr-ink) !important; }
.site-footer__copyright, .site-footer__tagline { color: var(--cr-ink-3) !important; }

/* ── Booking time selector (/book/), after croutons.ai's calendar ──
   Phones: intro → calendar → details, so booking is one scroll away. */

.book-layout { display: grid; gap: 24px; }
[data-book] [hidden] { display: none !important; }
@media (min-width: 960px) {
  .book-layout { grid-template-columns: 1fr 420px; align-items: start; gap: 48px; }
  .book-panel { position: sticky; top: 84px; }
}
.book-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.book-meta span { font: 500 .78rem/1 var(--cr-mono); letter-spacing: .04em; color: var(--cr-ink-2); border: 1px solid var(--cr-line); background: var(--cr-surface); border-radius: 999px; padding: 8px 12px; }
.book-panel { background: var(--cr-surface); border: 1px solid var(--cr-line); border-radius: var(--cr-radius); padding: 18px; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.book-steps { display: flex; gap: 6px; margin: 4px 0 16px; font-size: .8rem; color: var(--cr-ink-3); }
.book-steps span { flex: 1; padding-top: 8px; border-top: 3px solid var(--cr-line); }
.book-steps span.on { border-color: var(--cr-ink); color: var(--cr-ink); font-weight: 600; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head strong { font-size: 1rem; font-weight: 600; }
.cal-nav { display: flex; gap: 4px; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--cr-line); background: var(--cr-surface); color: var(--cr-ink); cursor: pointer; font-size: 1.2rem; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal .dow { font-size: .72rem; color: var(--cr-ink-3); font-weight: 600; padding: 4px 0; }
.day { aspect-ratio: 1; min-height: 40px; border-radius: 10px; border: 0; background: transparent; color: var(--cr-ink-3); font: 500 .95rem var(--cr-font); cursor: default; position: relative; padding: 0; }
.day.open { background: var(--cr-surface-2); color: var(--cr-ink); font-weight: 650; cursor: pointer; }
.day.open:hover { outline: 1.5px solid var(--cr-ink); }
.day.sel { background: var(--cr-ink); color: #fff; }
.day.today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.tz { font-size: .82rem; color: var(--cr-ink-3); margin: 10px 0 0; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 12px; }
.time { min-height: 46px; border-radius: 10px; border: 1px solid var(--cr-line-strong); background: var(--cr-surface); color: var(--cr-ink); font: 600 .95rem var(--cr-font); cursor: pointer; }
.time:hover { border-color: var(--cr-ink); }
.time.sel { background: var(--cr-ink); border-color: var(--cr-ink); color: #fff; }
.book-empty { color: var(--cr-ink-3); font-size: .95rem; padding: 12px 0; margin: 0; }
.picked { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--cr-surface-2); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; font-size: .95rem; }
.picked button { background: none; border: 0; color: var(--cr-ink); font: 600 .9rem var(--cr-font); cursor: pointer; padding: 6px; text-decoration: underline; text-decoration-color: var(--cr-line-strong); text-underline-offset: 3px; }
.book-form { display: grid; gap: 12px; margin: 0; }
.book-form label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--cr-ink); }
.book-form label em { font-style: normal; font-weight: 400; color: var(--cr-ink-3); }
.book-form input,
.book-form textarea { width: 100%; box-sizing: border-box; font: 400 1rem var(--cr-font); color: var(--cr-ink); background: var(--cr-surface); border: 1px solid var(--cr-line-strong); border-radius: 10px; padding: 11px 12px; }
.book-form input:focus,
.book-form textarea:focus { outline: none; border-color: var(--cr-ink-3); box-shadow: 0 0 0 4px var(--cr-chrome-soft); }
.book-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book-error { color: #8f2d2d; background: #f8eded; border-radius: 10px; padding: 10px 12px; margin: 0; font-size: .92rem; }
.book-submit { width: 100%; min-height: 48px; cursor: pointer; }
.book-done { text-align: left; padding: 8px 0; }
.book-done h3 { margin: 0 0 6px; font-size: 1.3rem; }
.book-done p { margin: 0 0 8px; color: var(--cr-ink-2); }
.done-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--cr-surface-2); color: var(--cr-ink); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 12px; box-shadow: 0 0 0 4px var(--cr-chrome-soft); }

/* ── Highlights: a thin full border, never a left stripe ─────
   Overrides every left-accent pattern the older stylesheets and inline page
   styles use (blockquotes, callouts, "border-left: 3px" boxes). */

.nrlc-article-body blockquote,
.nrlc-market-prose blockquote,
.nrlc-article-callout,
.callout-system-truth,
.callout-retrieval,
.callout-example,
.callout-definition,
.definition-lock,
[style*="border-left: 2px"],
[style*="border-left:2px"],
[style*="border-left: 3px"],
[style*="border-left:3px"],
[style*="border-left: 4px"],
[style*="border-left:4px"],
[style*="border-left: 5px"],
[style*="border-left:5px"],
[style*="border-left: 6px"],
[style*="border-left:6px"] {
  border: 1px solid var(--cr-line-strong) !important;
  border-radius: var(--cr-radius) !important;
}