/* =========================================================
   WASSER AI · BRAND v2 (Glacial Clean / Rockies Winter)
   Drop-in replacement for style.css on /resources/* pages.
   Same class names, light glacier palette.
========================================================= */

:root {
  --brand-bg:        #e8f3f9;
  --brand-frost:     #d5e6f0;
  --brand-frost-2:   #c8e0ec;
  --brand-paper:     #f6fafc;
  --brand-edge:      color-mix(in oklab, #0a0e14 14%, transparent);
  --brand-edge-soft: color-mix(in oklab, #0a0e14 8%, transparent);

  --brand-ink:       #0a0e14;
  --brand-ink-2:     #1c2531;
  --brand-ink-mut:   #4a5868;
  --brand-ink-dim:   #7d8b9d;
  --brand-deep-sea:  #0d3b54;
  --brand-current:   #15577f;
  --brand-ice:       #5aa3c2;
  --brand-mist:      #a4cad8;

  --brand-snow:      #f4f9fb;
  --brand-glacier:   #b8d4e0;
  --brand-shadow:    #051821;

  /* Compatibility aliases — v3 var names map to v2 colors so legacy markup keeps working */
  --bg:        var(--brand-bg);
  --text:      var(--brand-ink);
  --muted:     var(--brand-ink-mut);
  --dim:       var(--brand-ink-dim);
  --accent-1:  var(--brand-deep-sea);
  --accent-2:  var(--brand-current);
  --accent-3:  var(--brand-deep-sea);
  --glass:     var(--brand-paper);
  --glass-2:   var(--brand-frost);
  --edge:      var(--brand-edge);
  --edge-hot:  var(--brand-deep-sea);
  --aurora-g:  #1a8c6a;

  --radius:    8px;
  --radius-s:  4px;
  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);

  --font:        "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-italic: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-mono:   "IBM Plex Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --max:    1280px;
  --gutter: clamp(1rem, 2.4vw, 2rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--brand-bg);
  color: var(--brand-ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

/* No more dark photo + aurora — hide the legacy backdrop layers */
.bg-photo, #aurora { display: none !important; }

/* =========================================================
   MASTHEAD
========================================================= */
.mast {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--brand-paper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--brand-edge-soft);
}
.mast-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.m-left {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--brand-ink-mut);
}
.m-left .sep { color: var(--brand-ink-dim); }

.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--aurora-g); box-shadow: 0 0 10px var(--aurora-g);
  animation: live-pulse 1.9s var(--ease) infinite;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 16px; letter-spacing: -0.015em;
  color: var(--brand-ink);
  justify-self: center;
}
.brand img {
  height: 26px; width: auto;
  filter: none;
}
.brand em {
  font-family: var(--font-italic); font-style: italic;
  font-weight: 400; color: var(--brand-deep-sea);
  font-size: 0.85em; margin-left: 0.05em;
}

.m-right {
  display: inline-flex; align-items: center; gap: 0.5rem;
  justify-self: end;
  font-size: 13px;
}

.nav-link {
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-s);
  color: var(--brand-ink-mut);
  font-weight: 500;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
  white-space: nowrap;
}
.nav-link:hover { color: var(--brand-ink); background: color-mix(in oklab, var(--brand-deep-sea) 8%, transparent); }
.nav-link.active { color: var(--brand-deep-sea); }

.btn-ghost, .btn-outline, .btn-solid {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-s);
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s var(--ease);
  font-family: var(--font);
}
.btn-ghost {
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--brand-edge);
}
.btn-ghost:hover { background: var(--brand-frost); border-color: var(--brand-edge); }
.btn-outline { border-color: var(--brand-edge); color: var(--brand-ink); background: transparent; }
.btn-outline:hover { border-color: var(--brand-deep-sea); background: var(--brand-frost); }
.btn-solid {
  background: var(--brand-deep-sea);
  color: var(--brand-snow);
  border-color: var(--brand-deep-sea);
}
.btn-solid:hover { background: var(--brand-current); border-color: var(--brand-current); }

/* =========================================================
   PAGE LAYOUT
========================================================= */
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.5rem var(--gutter) 4rem;
}

.back-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--brand-ink-mut);
  margin-bottom: 1.5rem;
  transition: color 0.18s var(--ease);
}
.back-link:hover { color: var(--brand-deep-sea); }

.page-header { margin-bottom: 3rem; }
.page-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-deep-sea);
  margin-bottom: 1rem;
}
.page-kicker .gem {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-deep-sea);
  display: inline-block;
}

.page-title {
  font-family: var(--font);
  font-weight: 200;
  font-size: clamp(2rem, 5.5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--brand-ink);
  margin-bottom: 1.25rem;
  max-width: 22ch;
}
.page-title b { font-weight: 600; }
.page-title em {
  font-family: var(--font-italic); font-style: italic;
  font-weight: 300; color: var(--brand-deep-sea);
}

.page-lede {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--brand-ink-2);
  max-width: 60ch;
}

/* =========================================================
   SECTIONS
========================================================= */
.section { margin: 4rem 0; }
.s-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.s-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand-deep-sea);
}
.s-title {
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--brand-ink);
}
.s-title b { font-weight: 600; }
.s-title em {
  font-family: var(--font-italic); font-style: italic;
  font-weight: 300; color: var(--brand-deep-sea);
}
.s-side {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-ink-mut);
}

/* =========================================================
   BUTTONS (page CTAs)
========================================================= */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-s);
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-family: var(--font);
}
.btn-primary {
  background: var(--brand-deep-sea);
  color: var(--brand-snow);
  border-color: var(--brand-deep-sea);
}
.btn-primary:hover {
  background: var(--brand-current);
  border-color: var(--brand-current);
}
.btn-secondary {
  background: transparent;
  color: var(--brand-ink);
  border-color: var(--brand-edge);
}
.btn-secondary:hover { background: var(--brand-frost); border-color: var(--brand-deep-sea); }
.btn-primary .arr, .btn-secondary .arr {
  transition: transform 0.2s var(--ease);
}
.btn-primary:hover .arr, .btn-secondary:hover .arr { transform: translate(3px, -3px); }

/* =========================================================
   TILES (resources cards)
========================================================= */
.tile {
  position: relative;
  background: var(--brand-paper);
  border: 1px solid var(--brand-edge-soft);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 0.6rem;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
  overflow: hidden;
}
.tile:hover {
  border-color: var(--brand-deep-sea);
  background: var(--brand-paper);
  transform: translateY(-2px);
}
.tile .pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--brand-edge);
  border-radius: 999px;
  align-self: flex-start;
  color: var(--brand-deep-sea);
  background: color-mix(in oklab, var(--brand-frost) 60%, transparent);
}
.tile .pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
.tile .pill.free      { color: var(--aurora-g); border-color: color-mix(in oklab, var(--aurora-g) 35%, transparent); background: color-mix(in oklab, var(--aurora-g) 8%, transparent); }
.tile .pill.free::before    { background: var(--aurora-g); box-shadow: 0 0 6px var(--aurora-g); }
.tile .pill.paid      { color: var(--brand-deep-sea); border-color: color-mix(in oklab, var(--brand-deep-sea) 30%, transparent); background: color-mix(in oklab, var(--brand-deep-sea) 8%, transparent); }
.tile .pill.paid::before    { background: var(--brand-deep-sea); box-shadow: 0 0 6px var(--brand-deep-sea); }
.tile .pill.premium   { color: var(--brand-current); border-color: color-mix(in oklab, var(--brand-current) 30%, transparent); background: color-mix(in oklab, var(--brand-current) 8%, transparent); }
.tile .pill.premium::before { background: var(--brand-current); box-shadow: 0 0 6px var(--brand-current); }

.tile h3 {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--brand-ink);
}
.tile h3 em {
  font-family: var(--font-italic); font-style: italic;
  font-weight: 400; color: var(--brand-deep-sea);
}
.tile p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--brand-ink-mut);
}
.tile .price {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.04em; color: var(--brand-ink-mut);
}
.tile .price b {
  color: var(--brand-deep-sea); font-weight: 700;
  font-size: 1rem; margin-right: 0.2rem;
}
.tile .go {
  margin-top: auto;
  font-weight: 600; font-size: 13px;
  color: var(--brand-deep-sea);
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding-top: 0.75rem;
}
.tile .go .arr { transition: transform 0.22s var(--ease); }
.tile:hover .go .arr { transform: translateX(3px); }
.tile.has-orb::after { content: none; }

/* =========================================================
   MARQUEE
========================================================= */
.marq {
  background: var(--brand-deep-sea);
  color: var(--brand-snow);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
}
.marq::before, .marq::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
.marq::before { left: 0; background: linear-gradient(to right, var(--brand-deep-sea), transparent); }
.marq::after  { right: 0; background: linear-gradient(to left, var(--brand-deep-sea), transparent); }
.marq-label {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in oklab, var(--brand-snow) 60%, transparent);
  z-index: 3;
  background: var(--brand-deep-sea);
  padding-right: 12px;
}
.marq-track {
  display: inline-flex;
  white-space: nowrap; gap: 24px;
  font-size: 16px; font-weight: 400;
  animation: marq-scroll 40s linear infinite;
  padding-left: 220px;
}
.marq-track em {
  font-family: var(--font-italic); font-style: italic; font-weight: 400;
  color: var(--brand-glacier);
}
.marq-track .plus { color: color-mix(in oklab, var(--brand-snow) 35%, transparent); font-weight: 300; }
@keyframes marq-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =========================================================
   OUTRO
========================================================= */
.outro {
  margin: 5rem 0 3rem;
  padding: 3rem 2.5rem;
  background: var(--brand-frost);
  border: 1px solid var(--brand-edge-soft);
  border-radius: var(--radius);
}
.outro-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}
.outro h2 {
  font-family: var(--font);
  font-weight: 200;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--brand-ink);
  margin-bottom: 0.6rem;
  max-width: 30ch;
}
.outro h2 b { font-weight: 600; }
.outro h2 em {
  font-family: var(--font-italic); font-style: italic;
  font-weight: 300; color: var(--brand-deep-sea);
}
.outro p {
  font-size: 0.95rem;
  color: var(--brand-ink-mut);
}

/* =========================================================
   FOOTER
========================================================= */
.foot {
  margin-top: 5rem;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid var(--brand-edge-soft);
  background: transparent;
}
.foot-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--brand-ink-dim); letter-spacing: 0.06em;
}
.foot a { color: var(--brand-ink-mut); }
.foot a:hover { color: var(--brand-deep-sea); }
.foot .r { text-align: right; }
.foot .c { text-align: center; }

/* =========================================================
   ANIMATION
========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal-in 0.7s var(--ease) forwards;
}
.reveal.d1 { animation-delay: 0.08s; }
.reveal.d2 { animation-delay: 0.18s; }
.reveal.d3 { animation-delay: 0.28s; }
.reveal.d4 { animation-delay: 0.40s; }
@keyframes reveal-in {
  to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   ARTICLE (long-form)
========================================================= */
.article {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--brand-ink-2);
}

.breadcrumb {
  display: flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--brand-ink-dim);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--brand-ink-mut); transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--brand-deep-sea); }
.breadcrumb .sep { color: var(--brand-ink-dim); margin: 0 0.4rem; }
.breadcrumb .here { color: var(--brand-ink); }

.article h1.module-title {
  font-family: var(--font);
  font-weight: 200;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--brand-ink);
  margin-bottom: 1.5rem;
}
.article h1.module-title b { font-weight: 600; }
.article h1.module-title em {
  font-family: var(--font-italic); font-style: italic;
  font-weight: 300; color: var(--brand-deep-sea);
}

.article .module-lede {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--brand-ink-2);
  margin-bottom: 2rem;
}
.article .module-lede em {
  font-family: var(--font-italic); font-style: italic;
  color: var(--brand-deep-sea);
}

.article .module-meta {
  display: flex; gap: 1.2rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--brand-ink-dim);
  margin: 0 0 2.5rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--brand-edge-soft);
  border-bottom: 1px solid var(--brand-edge-soft);
}
.article .module-meta b { color: var(--brand-ink); font-weight: 700; }

.article h2 {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  margin: 2.5rem 0 1rem;
  scroll-margin-top: 5rem;
}
.article h3 {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  letter-spacing: -0.015em;
  color: var(--brand-ink);
  margin: 1.75rem 0 0.75rem;
}
.article h4 {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand-ink);
  margin: 1.25rem 0 0.5rem;
}

.article p {
  margin-bottom: 1.1rem;
  color: var(--brand-ink-2);
}
.article p strong, .article li strong { color: var(--brand-ink); font-weight: 700; }
.article p em, .article li em { color: var(--brand-deep-sea); font-style: italic; font-family: var(--font-italic); }
.article a { color: var(--brand-deep-sea); border-bottom: 1px solid color-mix(in oklab, var(--brand-deep-sea) 30%, transparent); }
.article a:hover { color: var(--brand-current); border-bottom-color: var(--brand-current); }

.article ul, .article ol {
  margin: 1rem 0 1.5rem;
  padding-left: 0;
  color: var(--brand-ink-2);
}
.article ul li, .article ol li { margin-bottom: 0.5rem; }
.article ul { list-style: none; padding-left: 0; }
.article ul li {
  padding-left: 1.4rem;
  position: relative;
}
.article ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brand-deep-sea);
  font-weight: 600;
}
.article ol { list-style: decimal; padding-left: 1.5rem; }
.article ol li::marker { color: var(--brand-deep-sea); font-weight: 700; }

.article blockquote {
  border-left: 2px solid var(--brand-deep-sea);
  padding: 0.5rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--brand-paper);
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--brand-ink);
}

.article code, .article pre code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.article p code, .article li code {
  background: var(--brand-frost);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  color: var(--brand-deep-sea);
}
.article pre {
  background: var(--brand-paper);
  border: 1px solid var(--brand-edge-soft);
  border-radius: var(--radius-s);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.5;
}
.article pre code {
  background: transparent;
  color: var(--brand-ink-2);
  padding: 0;
}
.article hr {
  border: 0;
  border-top: 1px solid var(--brand-edge-soft);
  margin: 2.5rem 0;
}

.video-embed { margin: 2rem 0; }
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-s);
  border: 1px solid var(--brand-edge-soft);
  background: var(--brand-paper);
}
.video-wrapper video,
.video-wrapper iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-meta {
  margin-top: 0.5rem;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--brand-ink-dim);
  text-align: center;
}

.toc {
  background: var(--brand-paper);
  border: 1px solid var(--brand-edge-soft);
  border-radius: var(--radius-s);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.toc h3 {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-deep-sea);
  margin-bottom: 0.75rem;
}
.toc ol { list-style: decimal; padding-left: 1.5rem; margin: 0; }
.toc ol li { font-size: 0.95rem; padding-left: 0; margin-bottom: 0.3rem; color: var(--brand-ink-2); }
.toc ol li::before { display: none; }
.toc ol li a { border-bottom: none; color: var(--brand-ink-2); }
.toc ol li a:hover { color: var(--brand-deep-sea); }

.sources-block {
  background: var(--brand-paper);
  border: 1px solid var(--brand-edge-soft);
  border-radius: var(--radius-s);
  padding: 1.5rem;
  margin: 2.5rem 0;
}
.sources-block h3 {
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-deep-sea);
  margin-bottom: 0.75rem;
}
.sources-block ul, .sources-block ol { margin: 0; padding-left: 0; }
.sources-block li {
  list-style: none;
  font-size: 0.92rem;
  padding-left: 1.25rem;
  position: relative;
  margin-bottom: 0.5rem;
}
.sources-block li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brand-deep-sea);
}

.next-module {
  display: flex; align-items: center; justify-content: space-between;
  margin: 3rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--brand-frost);
  border: 1px solid var(--brand-edge-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.next-module:hover {
  border-color: var(--brand-deep-sea);
  background: var(--brand-frost-2);
}
.next-module .nx-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-deep-sea);
  display: block;
  margin-bottom: 0.3rem;
}
.next-module .nx-title {
  font-weight: 600; font-size: 1.05rem;
  color: var(--brand-ink);
}
.next-module .nx-arrow { color: var(--brand-deep-sea); font-size: 1.2rem; font-weight: 700; }

.guide-cta {
  margin: 2.5rem 0;
  padding: 1.75rem 2rem;
  background: var(--brand-paper);
  border: 1px solid var(--brand-edge-soft);
  border-left: 3px solid var(--brand-deep-sea);
  border-radius: var(--radius-s);
}
.guide-cta h3 {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--brand-ink);
  margin-bottom: 0.5rem;
}
.guide-cta h3 b { font-weight: 700; }
.guide-cta h3 em {
  font-family: var(--font-italic); font-style: italic;
  font-weight: 400; color: var(--brand-deep-sea);
}
.guide-cta p {
  color: var(--brand-ink-mut);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.tip {
  background: color-mix(in oklab, var(--brand-mist) 20%, transparent);
  border-left: 3px solid var(--brand-current);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 0.95rem;
  color: var(--brand-ink-2);
}
.tip strong, .tip b { color: var(--brand-current); }
.warn {
  background: color-mix(in oklab, #d96b3a 10%, transparent);
  border-left: 3px solid #c2562f;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  font-size: 0.95rem;
  color: var(--brand-ink-2);
}
.warn strong, .warn b { color: #a04522; }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.module-card {
  display: block;
  padding: 1.25rem 1.4rem;
  background: var(--brand-paper);
  border: 1px solid var(--brand-edge-soft);
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.module-card:hover:not(.coming) {
  border-color: var(--brand-deep-sea);
  transform: translateY(-2px);
}
.module-card.coming { opacity: 0.55; cursor: default; }
.module-card .mc-num {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--brand-deep-sea);
}
.module-card h3 {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brand-ink);
  margin: 0.4rem 0 0.4rem;
}
.module-card p {
  font-size: 0.9rem;
  color: var(--brand-ink-mut);
  margin-bottom: 0.6rem;
}
.module-card .mc-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
}
.module-card .mc-status.live { color: var(--aurora-g); font-weight: 700; }
.module-card .mc-status.coming { color: var(--brand-ink-mut); }
.module-card .mc-status.locked { color: var(--brand-deep-sea); font-weight: 700; }
.module-card .mc-arrow { font-weight: 700; color: var(--brand-ink); }
.module-card:hover .mc-arrow { color: var(--brand-deep-sea); }

/* =========================================================
   AUTH HEADER
========================================================= */
#auth-header {
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.auth-greet {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 12px; color: var(--brand-ink-mut);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-greet .name { color: var(--brand-ink); font-weight: 600; }

.auth-pill {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand-deep-sea) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-deep-sea) 30%, transparent);
  color: var(--brand-deep-sea);
  display: inline-flex; align-items: center; gap: 0.3rem;
  white-space: nowrap;
}
.auth-pill::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-deep-sea);
  display: inline-block;
}
.btn-sm {
  padding: 0.32rem 0.65rem;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-s);
  border: 1px solid var(--brand-edge);
  background: transparent;
  color: var(--brand-ink);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  font-family: var(--font);
  white-space: nowrap;
}
.btn-sm:hover { background: var(--brand-frost); border-color: var(--brand-deep-sea); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 980px) {
  .mast-inner { grid-template-columns: 1fr auto; }
  .m-left { display: none; }
  .brand { justify-self: start; }
  .outro-inner { grid-template-columns: 1fr; }
  .outro { padding: 2rem 1.5rem; }
  .next-module { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}
@media (max-width: 720px) {
  .mast-inner { padding: 0.6rem 1rem; gap: 0.5rem; }
  .m-right { gap: 0.3rem; flex-wrap: wrap; justify-content: flex-end; }
  .nav-link { padding: 0.3rem 0.5rem; font-size: 12px; }
  .btn-ghost, .btn-outline, .btn-solid { padding: 0.35rem 0.7rem; font-size: 11px; }
  .wrap { padding: 1.75rem 1rem 3rem; }
  .article { font-size: 1rem; }
  .article .module-meta { gap: 0.6rem; padding: 0.7rem 0.85rem; font-size: 10px; }
  .foot-inner { grid-template-columns: 1fr; text-align: left; }
  .foot-inner .r, .foot-inner .c { text-align: left; }
  .auth-greet { max-width: 110px; }
}
@media (max-width: 540px) {
  .m-right .nav-link { display: none; }
  .auth-greet { display: none; }
  .auth-pill { font-size: 9px; padding: 2px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot, .marq-track, .reveal { animation: none; }
  .tile, .module-card, .next-module, .btn-primary, .btn-secondary, .nav-link { transition: none; }
}

/* =========================================================
   MEMBER-PAGE OVERRIDES
   These pages (/join, /intake/*, /success, /community,
   /resources/*) have inline <style> blocks with hard-coded
   dark v3 oklch values. The selectors below win on specificity
   so the surfaces stay light + on-brand.
========================================================= */

/* Card surfaces — kill dark gradient backgrounds */
.join-card, .intake-card, .ty-card, .success-card,
.composer, .forum-comment, .forum-comment-compose,
.community-grid > .tile, .join-grid > .tile {
  background: var(--brand-paper) !important;
  border: 1px solid var(--brand-edge-soft) !important;
  color: var(--brand-ink) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 12px 36px -16px rgba(5, 24, 33, 0.12) !important;
}
.join-card::after { display: none !important; }

.join-card h1, .join-card h2, .intake-card h1, .intake-card h2,
.ty-card h1, .ty-card h2, .success-card h1, .success-card h2,
.join-card h3, .intake-card h3, .ty-card h3, .success-card h3 {
  color: var(--brand-ink) !important;
}
.join-card h2 em, .intake-card h2 em,
.success-card h1 em, .ty-card h1 em {
  background: none !important;
  -webkit-text-fill-color: var(--brand-deep-sea) !important;
  color: var(--brand-deep-sea) !important;
  font-family: var(--font-italic) !important;
  font-weight: 400 !important;
}
.join-card .sub, .intake-card .sub, .ty-card .sub, .success-card .sub,
.join-card p, .intake-card p, .ty-card p, .success-card p {
  color: var(--brand-ink-2) !important;
}

/* Form inputs — light surfaces with deep-sea focus ring */
.join-input,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group select,
.form-group textarea,
.composer textarea,
.composer input {
  background: #ffffff !important;
  border: 1px solid var(--brand-edge) !important;
  color: var(--brand-ink) !important;
}
.join-input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.composer textarea:focus,
.composer input:focus {
  border-color: var(--brand-deep-sea) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-deep-sea) 18%, transparent) !important;
  outline: none !important;
}
.join-input::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.composer textarea::placeholder,
.composer input::placeholder {
  color: var(--brand-ink-dim) !important;
}
.form-group label,
.join-label,
.checkbox-label {
  color: var(--brand-ink-2) !important;
}
.form-group .required, .form-group-required {
  color: #c2562f !important;
}
.form-section { border-bottom-color: var(--brand-edge-soft) !important; }
.form-section-title {
  color: var(--brand-deep-sea) !important;
}
.form-section-title::before {
  background: var(--brand-deep-sea) !important;
  box-shadow: 0 0 8px color-mix(in oklab, var(--brand-deep-sea) 60%, transparent) !important;
}

/* Inset reference blocks (next-steps, callout) */
.ty-next {
  background: var(--brand-frost) !important;
  border: 1px solid var(--brand-edge-soft) !important;
  color: var(--brand-ink-2) !important;
}
.ty-next h3 { color: var(--brand-deep-sea) !important; }
.ty-next ul { color: var(--brand-ink-2) !important; }
.ty-next li::before { background: var(--brand-deep-sea) !important; }

/* Primary CTAs — solid deep-sea, no v3 magenta gradient */
.join-btn, .home-btn, .enter-btn,
.co-btn, .ty-next a,
.forum-btn-submit {
  background: var(--brand-deep-sea) !important;
  color: var(--brand-snow) !important;
  border: 1px solid var(--brand-deep-sea) !important;
  box-shadow: 0 14px 36px -14px rgba(5, 24, 33, 0.35) !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--brand-snow) !important;
}
.join-btn:hover:not(:disabled),
.home-btn:hover, .enter-btn:hover,
.co-btn:hover,
.forum-btn-submit:hover {
  background: var(--brand-current) !important;
  border-color: var(--brand-current) !important;
}
.forum-btn-cancel,
.forum-action-btn {
  background: transparent !important;
  border: 1px solid var(--brand-edge) !important;
  color: var(--brand-ink) !important;
}
.forum-btn-cancel:hover,
.forum-action-btn:hover {
  background: var(--brand-frost) !important;
  border-color: var(--brand-deep-sea) !important;
}

/* Status / error / success blocks */
.join-error {
  background: color-mix(in oklab, #c2562f 10%, transparent) !important;
  border: 1px solid color-mix(in oklab, #c2562f 35%, transparent) !important;
  color: #a04522 !important;
}
.join-success, .ty-icon, .success-icon {
  background: color-mix(in oklab, var(--aurora-g) 10%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--aurora-g) 35%, transparent) !important;
  color: var(--aurora-g) !important;
}
.fallback-note {
  color: var(--brand-ink-dim) !important;
  background: var(--brand-frost) !important;
  border: 1px solid var(--brand-edge-soft) !important;
}

/* Pricing accents on /community, /join */
.co-price, .co-price b, .co-price-amount {
  color: var(--brand-deep-sea) !important;
}
.co-fine, .co-sub, .price-fine, .price-sub {
  color: var(--brand-ink-mut) !important;
}

/* Forum surfaces */
.forum-author-name { color: var(--brand-ink) !important; }
.forum-comment-body, .forum-thread-body { color: var(--brand-ink-2) !important; }
.forum-avatar {
  background: var(--brand-frost-2) !important;
  color: var(--brand-deep-sea) !important;
}
.forum-comment, .forum-thread {
  border-color: var(--brand-edge-soft) !important;
}

/* Back-home link on success/thank-you */
.back-home { color: var(--brand-ink-mut) !important; }
.back-home:hover { color: var(--brand-deep-sea) !important; }

/* Italic-on-gradient text — strip the v3 magenta gradient
   wherever a page builds it inline */
[class*="-title"] em,
[class*="card"] em,
.lede em,
.module-title em,
.s-title em,
.page-title em,
h1 em, h2 em, h3 em {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--brand-deep-sea) !important;
  color: var(--brand-deep-sea) !important;
}