/* =============================================================
   Résidence IA — composed landing page on NC tokens
   Loaded after styles.css; reuses :root design tokens.
   Prefix: .res-
   ============================================================= */
.res {
  --res-max: var(--container-inner);
  /* Accent family from residenceia.ca's own palette (Tailwind blue 400/500/600/700/900) */
  --res-blue-light: oklch(0.714 0.143 254.6);  /* #60a5fa */
  --res-blue: oklch(0.623 0.188 259.8);        /* #3b82f6 */
  --res-blue-mid: oklch(0.546 0.215 262.9);    /* #2563eb — accent-solid */
  --res-blue-deep: oklch(0.488 0.217 264.4);   /* #1d4ed8 */
  --res-blue-ink: oklch(0.379 0.138 265.5);    /* #1e3a8a */
}
.res-section { padding: calc(var(--space-8) * 2) var(--gutter) 0; }
.res-section--tight { padding-top: calc(var(--space-8) + var(--space-6)); }
.res-section--last { padding-bottom: calc(var(--space-8) + var(--space-6)); }
.res-section--sep {
  margin-top: var(--space-6);
  padding-top: calc(var(--space-8) * 2);
  border-top: 1px solid var(--border-ink);
}

/* ---------- Shared section chrome ---------- */
.res-h2 {
  font-family: var(--font-title); font-weight: 700;
  font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.1;
  margin: var(--space-3) 0 0; max-width: 24ch;
}
.res-h2--wide { max-width: 34ch; }
.res-sub {
  font-size: var(--fs-lead); line-height: 1.55; color: var(--color-ink-60);
  max-width: 62ch; margin: var(--space-3) 0 0;
}
.res-head--center { text-align: center; }
.res-head--center .res-h2 { margin-inline: auto; }
.res-head--center .res-sub { margin-inline: auto; }
/* ---------- Reveal on scroll (progressive enhancement) ---------- */
html.nc-reveal .res [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html.nc-reveal .res [data-reveal].is-in { opacity: 1; transform: none; }

/* nc-hue's 26deg swing pushes this page's blue (hue ~255-265) into violet.
   Scoped-down rotation keeps the glow inside the blue family. */
@keyframes res-hue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(8deg); }
}

/* =============================================================
   1 — Hero
   ============================================================= */
/* Keeps the shared `.page-hero` class (js/main.js observes it to toggle the
   header CTA). */
.res-hero {
  position: relative;
  /* Bleeds full width so the wash is only ever clipped at the viewport edge,
     not at .page-hero's 1600px cap — that cap left a hard vertical edge in the
     gradient on wide screens. The inner .res-hero__grid stays bound to
     --res-max, so the copy and cards don't move. */
  max-width: none;
  /* x-only: the wash also has to bleed past the bottom edge, or the seam accent
     and the bottom-left blob get sliced into a hard line at the seam. */
  overflow-x: clip;
  text-align: center;
  padding: calc(var(--header-height) + var(--space-7)) var(--gutter) var(--space-7);
}
/* Ambient hero wash: three morphing blobs, two distinct blue shades — the
   exact primary (--res-blue) and its lighter tint (--res-blue-light), each
   painted as its own single-hue blob rather than blended into one gradient,
   so the two shades read as separate accents instead of one wash. Hue,
   spread and centre are animated custom properties (--g-h1/--g-h2/--g-w/
   --g-h/--g-x/--g-y, registered once in styles.css) so each blob's gradient
   drifts and reshapes itself instead of a fixed shape just being moved. Kept
   to a narrow hue range on purpose — this page's blue must stay blue, never
   drift into violet or cyan. */
.res-hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  top: 12vw; left: -22vw; bottom: auto; right: auto;
  width: 46vw; height: 46vw;
  --g-h1: 259.8deg;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.8 0.15 var(--g-h1, 259.8) / 0.42),
    oklch(0.85 0.12 var(--g-h1, 259.8) / 0.2) 46%, transparent 72%);
  animation:
    res-glow-morph 11s ease-in-out infinite,
    res-glow-float 17s ease-in-out infinite;
}
/* Centre and size drift stays close to the box's own middle — a wide swing
   here would carry the gradient's hot core across the box and change which
   corner of the page it actually lights up. Hue stays inside the blue
   family on purpose (see note above the page's two accents). */
@keyframes res-glow-morph {
  0%, 100% { --g-h1: 259.8deg; --g-w: 44%; --g-h: 54%; --g-x: 46%; --g-y: 54%; }
  50%      { --g-h1: 250deg;   --g-w: 54%; --g-h: 44%; --g-x: 56%; --g-y: 44%; }
}
@keyframes res-glow-float {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.18) translate3d(-6%, 5%, 0); filter: saturate(1.08); }
}

/* Second blob, the lighter shade on its own, scattered to the opposite
   corner so the wash reads as random rather than mirrored. Different cycle
   length and a negative delay keep it out of sync with the first blob. */
.res-hero__glow--light {
  position: absolute; z-index: 0; pointer-events: none;
  top: -26vw; right: -36vw; bottom: auto; left: auto;
  width: 82vw; height: 82vw;
  --g-h2: 254.6deg;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.85 0.12 var(--g-h2, 254.6) / 0.6),
    oklch(0.9 0.1 var(--g-h2, 254.6) / 0.3) 46%, transparent 72%);
  animation:
    res-glow-morph-light 14s ease-in-out -5s infinite,
    res-glow-float-light 21s ease-in-out -9s infinite;
}
@keyframes res-glow-morph-light {
  0%, 100% { --g-h2: 254.6deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h2: 262deg;   --g-w: 56%; --g-h: 40%; --g-x: 42%; --g-y: 58%; }
}
@keyframes res-glow-float-light {
  0%, 100% { transform: scale(1.05) translate3d(0, 0, 0);     filter: saturate(1); }
  50%      { transform: scale(0.9) translate3d(6%, -5%, 0);   filter: saturate(1.06); }
}

/* Mandatory corner-seam accent: centred exactly on the point where the hero
   ends and the next section begins (bottom-right of the hero box). Reuses
   the primary blue — a quieter echo of the main wash, not a third color. */
.res-hero__glow--corner {
  position: absolute; z-index: 0; pointer-events: none;
  top: auto; left: auto;
  bottom: -37vw; right: -37vw; width: 74vw; height: 74vw;
  --g-h1: 259.8deg;
  background: radial-gradient(
    var(--g-w, 50%) var(--g-h, 50%) at var(--g-x, 50%) var(--g-y, 50%),
    oklch(0.8 0.15 var(--g-h1, 259.8) / 0.3), transparent 58%);
  animation:
    res-glow-morph-corner 16s ease-in-out -4s infinite,
    res-glow-float-corner 23s ease-in-out -8s infinite;
}
@keyframes res-glow-morph-corner {
  0%, 100% { --g-h1: 259.8deg; --g-w: 46%; --g-h: 46%; --g-x: 50%; --g-y: 50%; }
  50%      { --g-h1: 252deg;   --g-w: 56%; --g-h: 42%; --g-x: 44%; --g-y: 56%; }
}
@keyframes res-glow-float-corner {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);    filter: saturate(1); }
  50%      { transform: scale(1.12) translate3d(-5%, 4%, 0); filter: saturate(1.04); }
}
.res-hero__grid {
  position: relative; z-index: 2;
  max-width: var(--res-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7); justify-items: stretch;
}

/* Partner pill — the one eyebrow on this page */
.res-partner-pill {
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  font-family: var(--font-title); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--res-blue-ink);
  background: color-mix(in srgb, var(--res-blue-light) 16%, var(--color-paper));
  border: 1px solid color-mix(in srgb, var(--res-blue-light) 32%, transparent);
  border-radius: var(--radius-pill);
}

.res-hero__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(2.25rem, 4.3vw, 3.55rem); line-height: 1.04; letter-spacing: -0.03em;
  margin: var(--space-4) auto 0; max-width: 30ch; text-wrap: balance;
}
.res-hero__lead {
  font-size: var(--fs-lead); line-height: 1.6; color: var(--color-ink-70);
  max-width: 68ch; margin: var(--space-4) auto 0; text-wrap: pretty;
}
.res-hero__lead strong { color: var(--color-ink); font-weight: 600; }
.res-hero__cta { margin-top: var(--space-6); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* ---------- Hero visual: the four phase cards ---------- */
.res-visual { position: relative; width: 100%; text-align: left; }

/* =============================================================
   2 — Quiet "at a glance" strip
   ============================================================= */
.res-glance {
  max-width: var(--res-max); margin: 0 auto;
  padding: 0 var(--gutter);
}
.res-glance__in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md);
  background: var(--color-ink);
  overflow: hidden;
}
.res-glance__item {
  display: flex; align-items: center; gap: 14px;
  padding: var(--space-4) var(--space-5);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.res-glance__item:first-child { border-left: 0; }
.res-glance__icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid transparent;
}
.res-glance__icon svg { width: 20px; height: 20px; }
.res-glance__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.res-glance__num {
  font-family: var(--font-title); font-weight: 700; font-size: 2rem;
  line-height: 1; letter-spacing: -0.03em;
}
.res-glance__item:nth-child(1) .res-glance__num,
.res-glance__item:nth-child(1) .res-glance__icon { color: var(--res-blue-light); }
.res-glance__item:nth-child(2) .res-glance__num,
.res-glance__item:nth-child(2) .res-glance__icon { color: var(--res-blue); }
.res-glance__item:nth-child(3) .res-glance__num,
.res-glance__item:nth-child(3) .res-glance__icon { color: var(--res-blue-mid); }
.res-glance__item:nth-child(4) .res-glance__num,
.res-glance__item:nth-child(4) .res-glance__icon { color: var(--res-blue-deep); }
.res-glance__item:nth-child(1) .res-glance__icon { background: color-mix(in srgb, var(--res-blue-light) 18%, var(--color-ink)); border-color: color-mix(in srgb, var(--res-blue-light) 35%, transparent); }
.res-glance__item:nth-child(2) .res-glance__icon { background: color-mix(in srgb, var(--res-blue) 18%, var(--color-ink)); border-color: color-mix(in srgb, var(--res-blue) 35%, transparent); }
.res-glance__item:nth-child(3) .res-glance__icon { background: color-mix(in srgb, var(--res-blue-mid) 18%, var(--color-ink)); border-color: color-mix(in srgb, var(--res-blue-mid) 35%, transparent); }
.res-glance__item:nth-child(4) .res-glance__icon { background: color-mix(in srgb, var(--res-blue-deep) 18%, var(--color-ink)); border-color: color-mix(in srgb, var(--res-blue-deep) 35%, transparent); }
.res-glance__label { font-size: var(--fs-sm); line-height: 1.35; color: var(--color-on-dark-muted); }

/* =============================================================
   3 — Why training doesn't stick
   ============================================================= */
.res-probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.res-prob {
  background: var(--color-surface-light); border: 1px solid transparent;
  border-radius: var(--radius-lg); padding: var(--space-5);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.res-prob:hover { transform: translateY(-3px); border-color: var(--border-ink); }
.res-prob__icon {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--color-paper); border: 1px solid var(--border-ink);
  color: var(--res-blue-mid); margin-bottom: var(--space-4);
}
.res-prob__icon svg { width: 20px; height: 20px; }
.res-prob__title { font-family: var(--font-title); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.res-prob__body { font-size: 0.9375rem; color: var(--color-ink-60); line-height: 1.55; margin: 0; }
.res-probs__foot {
  grid-column: 1 / -1; margin-top: var(--space-2);
  font-family: var(--font-title); font-size: var(--fs-md); font-weight: 600; color: var(--color-ink);
}
.res-probs__foot em { font-style: italic; color: var(--res-blue-mid); }

/* =============================================================
   4 — Comparison table
   ============================================================= */
.res-vs {
  margin-top: var(--space-6);
  border: 1px solid var(--border-ink); border-radius: var(--radius-xl);
  background: var(--color-surface-light);
  overflow: hidden;
}
.res-vs__row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
}
.res-vs__row + .res-vs__row { border-top: 1px solid var(--border-ink); }
.res-vs__head .res-vs__cell { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.res-vs__axis {
  display: flex; align-items: center;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-title); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-45);
}
.res-vs__cell {
  position: relative;
  padding: var(--space-4) var(--space-5);
  font-size: 0.9375rem; line-height: 1.55;
  display: flex; align-items: flex-start; gap: 10px;
}
.res-vs__cell--dim { color: var(--color-ink-45); }
.res-vs__cell--us {
  color: var(--color-ink); font-weight: 500;
  background: color-mix(in srgb, var(--res-blue-mid) 11%, var(--color-paper));
  border-left: 1px solid var(--border-ink);
}
.res-vs__mark { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.res-vs__mark svg { width: 16px; height: 16px; }
.res-vs__cell--dim .res-vs__mark { color: var(--color-ink-25); }
.res-vs__cell--us .res-vs__mark { color: var(--res-blue-mid); }
.res-vs__col {
  font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700;
  letter-spacing: -0.01em;
}
.res-vs__col--dim { color: var(--color-ink-45); }
.res-vs__col--us { color: var(--color-ink); }
/* Column name repeated inside each cell: visually hidden on desktop (the
   header row carries it) but kept for screen readers, then shown as a
   label once the table collapses into stacked cards. */
.res-vs__tag {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* =============================================================
   Four-phase flow (sits directly on the page background)
   ============================================================= */
.res-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); position: relative; }
.res-phase {
  position: relative; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--space-5);
  background:
    radial-gradient(ellipse 90% 70% at 12% 0%, color-mix(in srgb, var(--res-phase-accent) 10%, transparent), transparent 64%),
    linear-gradient(165deg, var(--color-ink-elevated) 0%, var(--color-ink) 62%);
  color: var(--color-on-dark);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* Accent wash in the bottom-right corner of each card */
.res-phase::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -20%; bottom: -32%; width: 78%; aspect-ratio: 1;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--res-phase-accent) 14%, transparent),
    transparent 70%);
}
.res-phase > * { position: relative; z-index: 1; }
.res-phase:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.26); }
.res-phase__badge {
  position: absolute; top: var(--space-5); right: var(--space-5);
  font-family: var(--font-title); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em;
}
.res-phase__when {
  font-family: var(--font-title); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: currentColor;
  margin-bottom: 6px; padding-right: 32px;
}
.res-phase__title {
  font-family: var(--font-title); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-on-dark); margin: 0 0 10px;
}
/* The bottom margin guarantees a gap even when `__out` is pushed up against
   this copy in the tallest card. */
.res-phase__body { font-size: 0.9375rem; line-height: 1.55; color: var(--color-on-dark-muted); margin: 0 0 var(--space-4); }
/* `auto` top margin bottom-aligns the deliverable across all four cards
   even though the body copy above it runs to different lengths. */
.res-phase__out {
  margin: auto 0 0; padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  display: grid; gap: 3px;
}
.res-phase__out-label {
  font-family: var(--font-title); font-size: 0.5625rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: currentColor;
}
.res-phase__out-value { font-size: 0.875rem; line-height: 1.45; color: var(--color-on-dark); }
.res-phase--1 { color: var(--res-blue-light); --res-phase-accent: var(--res-blue-light); }
.res-phase--2 { color: var(--res-blue-light); --res-phase-accent: var(--res-blue); }
.res-phase--3 { color: var(--res-blue); --res-phase-accent: var(--res-blue-mid); }
.res-phase--4 { color: var(--res-blue); --res-phase-accent: var(--res-blue-deep); }

/* =============================================================
   6 — What you keep (two outcome cards)
   ============================================================= */
.res-keeps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.res-keep {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--space-6);
  border: 1px solid var(--border-ink); border-radius: var(--radius-xl);
  background: var(--color-surface-light);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.res-keep:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -28px rgba(10, 10, 8, 0.34); }
.res-keep--people {
  background:
    radial-gradient(ellipse 88% 68% at 6% 0%, color-mix(in srgb, var(--res-blue-light) 15%, transparent), transparent 58%),
    var(--color-surface-light);
}
.res-keep--org {
  background:
    radial-gradient(ellipse 88% 68% at 94% 0%, color-mix(in srgb, var(--res-blue-deep) 15%, transparent), transparent 58%),
    var(--color-surface-light);
}
.res-keep__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--radius-md);
  background: var(--color-paper); border: 1px solid var(--border-ink);
  color: var(--color-ink); margin-bottom: var(--space-4);
}
.res-keep__icon svg { width: var(--icon-md); height: var(--icon-md); }
.res-keep__tag {
  font-family: var(--font-title); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-45); margin: 0 0 var(--space-2);
}
.res-keep__title {
  font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 12px;
}
.res-keep__body { font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.6; margin: 0; }
.res-keep__list { margin: var(--space-4) 0 0; display: grid; gap: 10px; }
.res-keep__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.9375rem; line-height: 1.5; color: var(--color-ink-60);
}
.res-keep__check {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  background: color-mix(in srgb, var(--res-blue-mid) 20%, transparent);
  color: color-mix(in srgb, var(--res-blue-mid) 78%, var(--color-ink));
}
.res-keep__check svg { width: 11px; height: 11px; }

/* =============================================================
   7 — Fit / not-fit
   ============================================================= */
.res-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-6); }
.res-fit__panel {
  border: 1px solid var(--border-ink); border-radius: var(--radius-lg);
  background: var(--color-paper); padding: var(--space-5) var(--space-6) var(--space-6);
}
.res-fit__panel--yes {
  background:
    radial-gradient(ellipse 72% 78% at 8% 0%, color-mix(in srgb, var(--res-blue-mid) 34%, transparent), transparent 62%),
    radial-gradient(ellipse 64% 70% at 100% 100%, color-mix(in srgb, var(--res-blue-ink) 40%, transparent), transparent 60%),
    var(--color-ink);
  color: var(--color-on-dark);
  border-color: transparent;
}
.res-fit__panel--no { background: var(--color-surface-light); }
.res-fit__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: var(--space-4); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-ink);
}
.res-fit__panel--yes .res-fit__head {
  border-bottom-color: color-mix(in srgb, var(--color-on-dark) 14%, transparent);
}
.res-fit__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
}
.res-fit__mark svg { width: 14px; height: 14px; }
.res-fit__panel--yes .res-fit__mark { background: var(--res-blue-mid); color: #fff; }
.res-fit__panel--no .res-fit__mark { background: var(--color-ink-45); color: #fff; }
.res-fit__title {
  font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em;
}
.res-fit__panel--yes .res-fit__title { color: var(--color-on-dark); }
.res-fit__list { display: grid; gap: var(--space-3); }
.res-fit__list li {
  position: relative; padding-left: var(--space-4);
  font-size: 0.9375rem; line-height: 1.55; color: var(--color-ink-60);
}
.res-fit__panel--yes .res-fit__list li { color: var(--color-on-dark-muted); }
.res-fit__list li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 6px; height: 6px; border-radius: 50%;
}
.res-fit__panel--yes .res-fit__list li::before { background: var(--res-blue-mid); }
.res-fit__panel--no .res-fit__list li::before { background: var(--color-ink-45); opacity: 0.6; }
.res-fit__list li strong { color: var(--color-ink); font-weight: 600; }
.res-fit__panel--yes .res-fit__list li strong { color: var(--color-on-dark); }
.res-fit__list a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.res-fit__list a:hover { color: var(--color-active); }

/* =============================================================
   8 — Partnership
   ============================================================= */
.res-partner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--space-4); margin-top: var(--space-6); }
.res-partner__side {
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-2);
  padding: var(--space-6);
  border: 1px solid var(--border-ink); border-radius: var(--radius-xl);
  background: var(--color-surface-light);
}
.res-partner__label {
  font-family: var(--font-title); font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-ink-45);
}
.res-partner__name {
  font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-ink);
}
.res-partner__desc { font-size: var(--fs-sm); color: var(--color-ink-60); line-height: 1.5; }
.res-partner__x {
  align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-ink); color: var(--res-blue-light);
  font-family: var(--font-title); font-weight: 700; font-size: 1.375rem;
}
.res-callout {
  position: relative; overflow: hidden;
  margin-top: var(--space-4); padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 58% 100% at 100% 0%, color-mix(in srgb, var(--res-blue-mid) 16%, transparent), transparent 60%),
    var(--color-ink);
  color: var(--color-on-dark);
}
.res-callout__title {
  font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-on-dark); margin: 0 0 12px;
}
.res-callout__body { font-size: var(--fs-md); line-height: 1.6; color: var(--color-on-dark-muted); margin: 0; max-width: 78ch; }

/* =============================================================
   9 — FAQ
   ============================================================= */
.res-faq { max-width: 840px; margin: var(--space-6) auto 0; border-top: 1px solid var(--border-ink); }
.res-faq__item { border-bottom: 1px solid var(--border-ink); }
.res-faq__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0;
  font-family: var(--font-title); font-size: var(--fs-md); font-weight: 700;
  letter-spacing: -0.01em; color: var(--color-ink);
}
.res-faq__q::-webkit-details-marker { display: none; }
.res-faq__icon { flex: 0 0 auto; position: relative; width: 22px; height: 22px; }
.res-faq__icon::before, .res-faq__icon::after {
  content: ""; position: absolute; background: var(--res-blue-mid); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.res-faq__icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.res-faq__icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.res-faq__item[open] .res-faq__icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.res-faq__item[open] .res-faq__q { color: var(--res-blue-mid); }
.res-faq__a { font-size: var(--fs-md); color: var(--color-ink-60); line-height: 1.65; margin: 0; padding: 0 0 var(--space-5); max-width: 72ch; }
.res-faq__a a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.res-faq__a a:hover { color: var(--color-active); }

/* =============================================================
   10 — Closing CTA
   ============================================================= */
.res-close {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-ink); color: var(--color-on-dark);
  padding: var(--space-8) var(--space-7);
  text-align: center;
}
.res-close__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 90% at 22% 10%, oklch(0.8 0.13 258 / 0.18), transparent 66%),
    radial-gradient(42% 90% at 80% 96%, oklch(0.55 0.2 265 / 0.16), transparent 66%);
  animation: res-hue 11s ease-in-out infinite alternate;
}
.res-close__in { position: relative; z-index: 1; max-width: 760px; margin-inline: auto; }
.res-close__title {
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); letter-spacing: -0.025em; line-height: 1.1;
  color: var(--color-on-dark); margin: var(--space-3) 0 0;
}
.res-close__lead { font-size: var(--fs-lead); color: var(--color-on-dark-muted); line-height: 1.6; margin: var(--space-4) auto 0; max-width: 56ch; }
.res-close__cta { margin-top: var(--space-6); display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.res-close__note { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--color-ink-25); }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1080px) {
  .res-hero__grid { gap: var(--space-6); }
  .res-hero__title { max-width: 24ch; }
}

@media (max-width: 980px) {
  .res-glance__in { grid-template-columns: 1fr 1fr; }
  .res-glance__item:nth-child(3) { border-left: 0; }
  .res-glance__item:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .res-probs { grid-template-columns: 1fr 1fr; }
  .res-flow { grid-template-columns: 1fr 1fr; row-gap: var(--space-4); }
  .res-flow::before { display: none; }
  .res-keeps, .res-fit { grid-template-columns: 1fr; }
  .res-partner { grid-template-columns: 1fr; }
  .res-partner__x { transform: rotate(90deg); margin: calc(-1 * var(--space-2)) auto; }

  /* Comparison table → stacked cards */
  .res-vs__head { display: none; }
  .res-vs__row { grid-template-columns: 1fr; }
  .res-vs__axis { padding-bottom: 0; color: var(--color-ink-70); }
  .res-vs__cell { padding-top: var(--space-3); flex-direction: column; gap: 6px; }
  .res-vs__cell--us { border-left: 0; border-top: 1px solid var(--border-ink); }
  .res-vs__tag {
    position: static; width: auto; height: auto;
    margin: 0; clip-path: none; overflow: visible;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-title); font-size: 0.5625rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .res-vs__cell--dim .res-vs__tag { color: var(--color-ink-35); }
  .res-vs__cell--us .res-vs__tag { color: color-mix(in srgb, var(--res-blue-mid) 70%, var(--color-ink)); }
  .res-vs__mark { display: none; }
}

@media (max-width: 620px) {
  .res-section { padding-top: var(--space-8); }
  .res-section--tight { padding-top: var(--space-7); }
  .res-section--sep {
    margin-top: var(--space-5);
    padding-top: var(--space-8);
  }
  .res-h2 { font-size: clamp(1.375rem, 6vw, 1.75rem); margin-top: var(--space-2); }
  .res-sub { font-size: var(--fs-md); margin-top: var(--space-2); }

  .res-hero { padding-top: calc(var(--header-height) + var(--space-5)); padding-bottom: var(--space-5); }
  .res-hero__title { font-size: clamp(1.6rem, 7.4vw, 2.15rem); margin-top: var(--space-3); }
  .res-hero__lead { font-size: var(--fs-md); margin-top: var(--space-3); }
  .res-hero__cta { margin-top: var(--space-4); }
  .res-hero__cta .btn { width: 100%; }

  .res-glance { padding-inline: var(--gutter); }
  .res-glance__in { grid-template-columns: 1fr 1fr; }
  .res-glance__item { padding: var(--space-3) var(--space-4); gap: 10px; }
  .res-glance__icon { width: 34px; height: 34px; border-radius: 10px; }
  .res-glance__icon svg { width: 17px; height: 17px; }
  .res-glance__num { font-size: 1.75rem; }

  .res-probs, .res-keeps, .res-fit, .res-vs, .res-partner, .res-faq { margin-top: var(--space-4); }
  .res-probs { grid-template-columns: 1fr; }
  .res-prob { padding: var(--space-4); }
  .res-vs { border-radius: var(--radius-lg); }
  .res-vs__axis, .res-vs__cell { padding-inline: var(--space-4); }

  .res-flow { grid-template-columns: 1fr; }
  .res-phase { padding: var(--space-4); }
  .res-phase__badge { top: var(--space-4); right: var(--space-4); font-size: 0.9375rem; }

  .res-keep { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .res-fit__panel { padding: var(--space-4); }
  .res-partner__side { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .res-callout { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); }
  .res-callout__title { font-size: 1.25rem; }

  .res-close { padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); }
  .res-close__lead { font-size: var(--fs-md); margin-top: var(--space-3); }
  .res-close__cta { margin-top: var(--space-5); }
  .res-close__cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .res-hero__glow, .res-hero__glow--light, .res-hero__glow--corner, .res-close__glow { animation: none; }
  html.nc-reveal .res [data-reveal] { opacity: 1; transform: none; transition: none; }
}