/* Eagles Automations frontend.
   World: black and gold, Barlow Condensed display, Inter body (Eagles' own brand).
   Motion: fast and firm on press, slow and smooth on reveal, one authored moment:
   the scattered tools snapping into one system. */
:root {
  --bg: #09090A;
  --bg-2: #0F0E0C;
  --surface: #141310;
  --surface-2: #1C1A16;
  --surface-3: #26231D;
  --line: rgba(233,185,73,.15);
  --line-2: rgba(233,185,73,.34);
  --hair: rgba(244,239,230,.08);
  --gold: #E9B949;
  --gold-hi: #FFD268;
  --gold-deep: #B8862A;
  --on-gold: #1A1405;
  --ink: #F4EFE6;
  --muted: #BDB4A4;
  --faint: #8F8778;
  --cream: #F6EFE5;
  --ok: #8FD3A8;
  --err: #FF8E7A;
  --red: #FF4B3E;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-io: cubic-bezier(.77,0,.175,1);
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --display: "Barlow Condensed","Arial Narrow",sans-serif;
  --body: "Inter",system-ui,sans-serif;
  --gutter: clamp(16px,4vw,40px);
  --max: 1200px;
  --r: 16px;
  color-scheme: dark;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090A;
  }
}
:root[data-theme="dark"] {
  --bg: #09090A;
}

* {
  box-sizing: border-box;
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--gold-deep) var(--bg);
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
}
::selection {
  background: var(--gold);
  color: var(--on-gold);
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 8px;
}
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow {
  max-width: 880px;
}
.display {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.gold {
  color: var(--gold);
}
.lede {
  color: var(--muted);
  font-size: clamp(1.02rem,1.35vw,1.15rem);
  max-width: 56ch;
  text-wrap: pretty;
}
.ico {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out),background-color 200ms
    ease,border-color 200ms ease,box-shadow 240ms ease,color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: scale(.97);
}
.btn .ico {
  width: 18px;
  height: 18px;
}
.btn .arrow {
  transition: transform 220ms var(--ease-out);
}
.btn-gold {
  background: var(--gold);
  color: var(--on-gold);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,0 10px 30px -12px
    rgba(233,185,73,.7);
  overflow: hidden;
  isolation: isolate;
}
.btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55)
    50%,transparent 70%);
  transform: translateX(-120%);
}
.btn-ghost {
  border-color: var(--line-2);
  background: rgba(9,9,10,.3);
}
.btn-lg {
  min-height: 58px;
  padding: 0 30px;
  font-size: 1.05rem;
}
.btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (hover:hover) and (pointer:fine) {
  .btn-gold:hover {
    background: var(--gold-hi);
    box-shadow: 0 1px 0 rgba(255,255,255,.4) inset,0 14px 40px -12px
      rgba(233,185,73,.9);
  }
  .btn-gold:hover::before {
    transform: translateX(120%);
    transition: transform 700ms var(--ease-out);
  }
  .btn:hover .arrow {
    transform: translateX(4px);
  }
  .btn-ghost:hover {
    border-color: var(--gold);
    background: rgba(233,185,73,.07);
  }
}
.textlink {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .25em;
  font-size: .95rem;
  padding: 8px;
}
@media (hover:hover) {
  .textlink:hover {
    color: var(--ink);
  }
}

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background-color 240ms ease,border-color 240ms ease;
}
.top.scrolled {
  background: rgba(9,9,10,.78);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 70px;
}
.top .brand img {
  height: 28px;
  width: auto;
}
.top nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: .92rem;
  color: var(--muted);
}
.top nav a {
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color 160ms ease;
}
.top nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms var(--ease-out);
}
@media (hover:hover) {
  .top nav a:hover {
    color: var(--ink);
  }
  .top nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
.top .btn {
  min-height: 42px;
  padding: 0 18px;
  font-size: .9rem;
}
.top .short {
  display: none;
}
@media (max-width:880px) {
  .top nav {
    display: none;
  }
  .top .btn {
    margin-left: auto;
  }
}
@media (max-width:420px) {
  .top .long {
    display: none;
  }
  .top .short {
    display: inline;
  }
}

/* ---------- views / router ---------- */
.view {
  display: none;
}
.view.active {
  display: block;
}

/* ---------- reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity 800ms var(--ease-out),transform 800ms
    var(--ease-out),filter 800ms var(--ease-out);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}
.js .reveal[data-d="1"] {
  transition-delay: 70ms;
}
.js .reveal[data-d="2"] {
  transition-delay: 140ms;
}
.js .reveal[data-d="3"] {
  transition-delay: 210ms;
}
.js .reveal[data-d="4"] {
  transition-delay: 280ms;
}
.js .reveal[data-d="5"] {
  transition-delay: 350ms;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(28px,5vw,64px) 0 clamp(56px,7vw,96px);
  overflow: hidden;
  margin-top: -70px;
  padding-top: calc(70px + clamp(28px,5vw,64px));
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(60% 55% at 72%
    38%,rgba(233,185,73,.16),transparent 70%),radial-gradient(40% 40% at 10%
    0%,rgba(233,185,73,.06),transparent 70%);
}
.hero-eagle {
  position: absolute;
  z-index: -1;
  right: -6%;
  top: 0;
  width: min(1100px,80%);
  aspect-ratio: 3/2;
  background: url(assets/funnel/hero-eagle.jpg) center/cover no-repeat;
  opacity: .3;
  -webkit-mask-image: radial-gradient(closest-side,#000 40%,transparent);
  mask-image: radial-gradient(closest-side,#000 40%,transparent);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  to {
    transform: translate(-2%,2%) scale(1.04);
  }
}
.grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .07;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spot {
  position: absolute;
  z-index: -1;
  width: 520px;
  height: 520px;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,rgba(255,210,104,.13),transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
  will-change: transform;
}
.hero:hover .spot {
  opacity: 1;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px,4vw,64px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem,5.4vw,4.9rem);
  margin-bottom: 22px;
}
.hero h1 .line {
  display: inline;
}
.hero h1 .line.gold {
  display: block;
}
.swapword > span {
  white-space: nowrap;
}
.swapword {
  display: inline-grid;
  vertical-align: top;
}
.swapword > span {
  grid-area: 1/1;
  transition: opacity 420ms var(--ease-out),transform 420ms
    var(--ease-out),filter 420ms var(--ease-out);
}
.swapword > span.out {
  opacity: 0;
  transform: translateY(-.35em);
  filter: blur(8px);
}
.swapword > span.pre {
  opacity: 0;
  transform: translateY(.35em);
  filter: blur(8px);
}
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  filter: blur(10px);
  animation: wordIn 900ms var(--ease-out) forwards;
}
@keyframes wordIn {
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
.hero .lede {
  margin-bottom: 30px;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 28px;
}
.assure {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .88rem;
}
.assure li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.assure .ico {
  width: 17px;
  height: 17px;
  color: var(--gold);
}
@media (max-width:980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-eagle {
    width: 140%;
    right: -40%;
    opacity: .2;
  }
}

/* ---------- system hub ---------- */
.hub-wrap {
  position: relative;
}
.hub {
  position: relative;
  width: 100%;
  aspect-ratio: 600/520;
  user-select: none;
}
.hub > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hub .mess line {
  stroke: rgba(189,180,164,.42);
  stroke-width: 1.2;
  stroke-dasharray: 4 6;
}
.hub .wire {
  stroke: url(#wireGrad);
  stroke-width: 1.6;
}
.hub .ring {
  fill: none;
  stroke: rgba(233,185,73,.18);
  stroke-dasharray: 2 8;
}
.hub .core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background: radial-gradient(circle at 35% 30%,#2a2416,#0f0e0b 70%);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 10px rgba(233,185,73,.04),0 0 60px -10px
    rgba(233,185,73,.55),inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0;
  scale: .86;
  transition: opacity 700ms var(--ease-out),scale 900ms var(--ease-out);
}
.hub.ordered .core {
  opacity: 1;
  scale: 1;
}
.hub .core b {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(.85rem,2.1vw,1.35rem);
  line-height: .95;
  color: var(--gold-hi);
}
.hub .core small {
  display: block;
  font-size: clamp(.55rem,1vw,.68rem);
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 4px;
}
.hub .core::after {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  border: 1px solid rgba(233,185,73,.3);
  opacity: 0;
}
.hub.ordered .core::after {
  animation: ping 2.8s var(--ease-out) infinite;
}
@keyframes ping {
  0% {
    opacity: .7;
    transform: scale(.8);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}
.node {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px 8px 9px;
  border-radius: 12px;
  background: rgba(28,26,22,.92);
  border: 1px solid var(--hair);
  font-size: clamp(.66rem,1.25vw,.86rem);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.9);
  will-change: transform;
  transition: border-color 500ms ease,background-color 500ms ease,opacity 400ms
    ease;
}
.node i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(189,180,164,.12);
  color: var(--muted);
  transition: background-color 500ms ease,color 500ms ease;
}
.node i .ico {
  width: 16px;
  height: 16px;
}
@media (max-width:560px) {
  .node i {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }
  .node i .ico {
    width: 13px;
    height: 13px;
  }
  .node {
    padding: 6px 10px 6px 7px;
    gap: 6px;
  }
}
.hub.ordered .node {
  border-color: var(--line-2);
}
.hub.ordered .node i {
  background: rgba(233,185,73,.16);
  color: var(--gold);
}
.hub .node.dim {
  opacity: .35;
}
.hub .node.hot {
  border-color: var(--gold);
  background: rgba(44,36,18,.95);
  box-shadow: 0 0 0 4px rgba(233,185,73,.08),0 10px 30px -10px
    rgba(233,185,73,.5);
}
.packet {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 12px 2px rgba(255,210,104,.8);
  opacity: 0;
  pointer-events: none;
  will-change: transform,opacity;
}
.hub-ctrl {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.seg2 {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.seg2 button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  padding: 8px 16px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 200ms ease;
}
.seg2 button[aria-pressed="true"] {
  color: var(--on-gold);
}
.seg2 .pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--gold);
  transition: transform 380ms var(--ease-io);
}
.seg2[data-v="1"] .pill {
  transform: translateX(100%);
}
/* toasts */
.hub-wrap.has-toasts {
  padding-top: 84px;
}
.toasts {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(300px,80%);
  height: 64px;
  pointer-events: none;
  z-index: 3;
}
.toast {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20,19,16,.96);
  border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.95);
  font-size: .78rem;
  line-height: 1.3;
  transform-origin: top center;
  transition: transform 480ms var(--ease-drawer),opacity 480ms
    var(--ease-drawer);
}
.toast .dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(143,211,168,.14);
  color: var(--ok);
  flex: none;
}
.toast .dot .ico {
  width: 15px;
  height: 15px;
}
.toast b {
  display: block;
  font-weight: 600;
  color: var(--ink);
}
.toast span {
  color: var(--faint);
}
.toast time {
  margin-left: auto;
  color: var(--faint);
  font-size: .7rem;
}
.toast {
  top: 0;
  bottom: auto;
}
.toast[data-new] {
  transform: translateY(-70%) scale(.96);
  opacity: 0;
}
@media (max-width:520px) {
  .toasts {
    display: none;
  }
  .hub-wrap.has-toasts {
    padding-top: 0;
  }
}

/* ---------- marquee ---------- */
.marquee {
  border-block: 1px solid var(--line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 10%,#000
    90%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee .row {
  display: flex;
  gap: 48px;
  width: max-content;
  padding: 18px 0;
  animation: marquee 38s linear infinite;
}
.marquee:hover .row {
  animation-play-state: paused;
}
.marquee span {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.25rem;
  letter-spacing: .04em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 48px;
  white-space: nowrap;
}
.marquee span::after {
  content: "";
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- sections ---------- */
section.band {
  padding: clamp(72px,10vw,132px) 0;
  position: relative;
}
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(30px,4vw,52px);
}
.sec-head h2 {
  font-size: clamp(2.2rem,5vw,4rem);
  max-width: 15ch;
}
.sec-head p {
  max-width: 42ch;
  color: var(--muted);
}

/* compare slider */
.compare {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  aspect-ratio: 16/8.4;
  background: var(--surface);
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
.compare .pane {
  position: absolute;
  inset: 0;
  padding: clamp(18px,3vw,36px);
}
.compare .after {
  clip-path: inset(0 0 0 var(--pos,50%));
  background: radial-gradient(80% 90% at 80%
    10%,rgba(233,185,73,.14),transparent 60%),#100F0C;
}
.compare .before {
  background: #0d0d0e;
}
.compare .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos,50%);
  width: 2px;
  margin-left: -1px;
  background: var(--gold);
  box-shadow: 0 0 20px rgba(233,185,73,.6);
}
.compare .knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.8);
  transition: scale 160ms var(--ease-out);
}
.compare:active .knob {
  scale: .94;
}
.compare .knob .ico {
  width: 22px;
  height: 22px;
}
.compare .tag {
  position: absolute;
  top: 16px;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .95rem;
  padding: 5px 12px;
  border-radius: 999px;
  z-index: 2;
}
.compare .before .tag {
  left: 16px;
  background: rgba(189,180,164,.12);
  color: var(--muted);
}
.compare .after .tag {
  right: 16px;
  background: var(--gold);
  color: var(--on-gold);
}
.compare-note {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: .82rem;
  color: var(--faint);
}
/* messy pane */
.mess-pane {
  position: relative;
  height: 100%;
}
.scrap {
  position: absolute;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: clamp(.62rem,1.05vw,.82rem);
  line-height: 1.35;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.9);
}
.scrap.bubble {
  background: #2a2a2d;
  color: #e6e3dc;
  max-width: 38%;
}
.scrap.bubble.me {
  background: #3d6fe0;
  color: #fff;
}
.scrap.sticky {
  background: #f5dc6a;
  color: #2b2610;
  font-family: "Comic Sans MS","Marker Felt",cursive;
  transform: rotate(-4deg);
  max-width: 24%;
}
.scrap.sheet {
  background: #f2f2ee;
  color: #222;
  font-family: ui-monospace,Menlo,monospace;
  font-size: clamp(.55rem,.9vw,.72rem);
  padding: 0;
  overflow: hidden;
  width: 34%;
}
.scrap.sheet div {
  display: grid;
  grid-template-columns: 1.2fr 1fr .8fr;
  border-bottom: 1px solid #d6d6d0;
}
.scrap.sheet div span {
  padding: 4px 6px;
  border-right: 1px solid #d6d6d0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scrap.sheet div:first-child {
  background: #dfe9d8;
  font-weight: 700;
}
.scrap.missed {
  background: #2a1513;
  border: 1px solid rgba(255,142,122,.4);
  color: #ffb3a6;
}
/* clean pane */
.dash {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  height: 100%;
  grid-template-rows: auto 1fr;
  padding-top: 44px;
  width: 44%;
  margin-left: auto;
}
.kpi {
  background: rgba(28,26,22,.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.kpi small {
  display: block;
  font-size: clamp(.6rem,.9vw,.74rem);
  color: var(--faint);
}
.kpi b {
  font-family: var(--display);
  font-size: clamp(1.3rem,2.6vw,2.2rem);
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi em {
  font-style: normal;
  font-size: clamp(.58rem,.85vw,.72rem);
  color: var(--ok);
}
.feed {
  grid-column: 1/-1;
  background: rgba(28,26,22,.9);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 14px;
  overflow: hidden;
}
.feed div {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
  font-size: clamp(.6rem,.95vw,.8rem);
  color: var(--muted);
}
.feed div:last-child {
  border: 0;
}
.feed i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.feed b {
  color: var(--ink);
  font-weight: 600;
}
.feed time {
  margin-left: auto;
  color: var(--faint);
}
@media (max-width:700px) {
  .compare {
    aspect-ratio: 4/5;
  }
  .dash {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .dash .kpi:nth-child(3) {
    display: none;
  }
  .scrap.bubble {
    max-width: 62%;
  }
  .scrap.sheet {
    width: 60%;
  }
  .scrap.sticky {
    max-width: 44%;
  }
}

/* proof ledger */
.ledger {
  border-top: 1px solid var(--line-2);
}
.lrow {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0,1.1fr) minmax(0,1.6fr) auto;
  gap: clamp(14px,2.5vw,32px);
  align-items: center;
  padding: 20px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 260ms ease;
}
.logo-tile {
  width: 80px;
  height: 58px;
  border-radius: 12px;
  background: var(--cream);
  display: grid;
  place-items: center;
  padding: 6px;
  overflow: hidden;
  transition: transform 400ms var(--ease-out);
}
.logo-tile img {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}
.logo-tile.txt {
  font-family: var(--display);
  font-weight: 800;
  color: #1b1b1b;
  font-size: 1.1rem;
}
.lrow h3 {
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.3;
}
.lrow .dom {
  font-size: .82rem;
  color: var(--faint);
}
.lrow p {
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.5;
}
.open {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--gold);
  white-space: nowrap;
  transition: color 160ms ease;
}
.open .ico {
  width: 16px;
  height: 16px;
  transition: transform 220ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine) {
  .lrow:hover {
    background: rgba(233,185,73,.05);
  }
  .lrow:hover .logo-tile {
    transform: rotate(-3deg) scale(1.06);
  }
  .lrow:hover .open {
    color: var(--gold-hi);
  }
  .lrow:hover .open .ico {
    transform: translate(3px,-3px);
  }
}
@media (max-width:760px) {
  .lrow {
    grid-template-columns: 64px minmax(0,1fr);
    row-gap: 8px;
  }
  .lrow p,
  .lrow .open {
    grid-column: 1/-1;
  }
  .logo-tile {
    width: 64px;
    height: 48px;
  }
}
.honest {
  margin-top: 20px;
  font-size: .88rem;
  color: var(--faint);
  display: flex;
  gap: 8px;
  align-items: center;
}
.honest .ico {
  width: 16px;
  height: 16px;
  color: var(--gold);
}

/* case studies */
.stories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.story blockquote {
  margin: 6px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
}
.story blockquote p {
  color: var(--ink);
  max-width: none;
}
.story blockquote footer {
  margin-top: 8px;
  font-size: .88rem;
  color: var(--faint);
}
@media (max-width:860px) {
  .stories {
    grid-template-columns: 1fr;
  }
}

/* paths (spotlight cards) */
.paths {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
}
.path {
  position: relative;
  overflow: hidden;
  padding: clamp(22px,3vw,32px);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  isolation: isolate;
}
.path::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx,-200px)
    var(--my,-200px),rgba(233,185,73,.14),transparent 45%);
  opacity: 0;
  transition: opacity 300ms ease;
}
@media (hover:hover) {
  .path:hover::before {
    opacity: 1;
  }
  .path:hover {
    border-color: var(--line-2);
  }
}
.path.primary {
  grid-row: span 3;
  background: linear-gradient(180deg,var(--surface-2) 40%,rgba(28,26,22,.5)
    72%,rgba(28,26,22,.15)),url(assets/funnel/hero-eagle.jpg) 60% 100%/auto 68%
    no-repeat,var(--surface-2);
  border-color: var(--line-2);
}
.path h3 {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.5rem,2.4vw,2rem);
  line-height: 1;
}
.path.primary h3 {
  font-size: clamp(2.1rem,3.8vw,3.2rem);
}
.path .for {
  font-size: .86rem;
  color: var(--gold-hi);
}
.path p {
  color: var(--muted);
  font-size: .95rem;
  max-width: 52ch;
}
.pmeta {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pmeta .ico {
  color: var(--gold);
  width: 22px;
  height: 22px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  list-style: none;
}
.tags li {
  font-size: .78rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.go {
  margin-top: auto;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 8px 0;
  color: var(--gold);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
}
.go .ico {
  width: 18px;
  height: 18px;
  transition: transform 220ms var(--ease-out);
}
@media (hover:hover) {
  .go:hover {
    color: var(--gold-hi);
  }
  .go:hover .ico {
    transform: translateX(4px);
  }
}
@media (max-width:860px) {
  .paths {
    grid-template-columns: 1fr;
  }
  .path.primary {
    grid-row: auto;
    background: var(--surface-2);
  }
}

/* process with scroll-driven fill */
.steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 0;
  position: relative;
  counter-reset: s;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--surface-3);
}
.steps::after {
  background: linear-gradient(90deg,var(--gold-deep),var(--gold-hi));
  transform-origin: left;
  transform: scaleX(1);
}
@supports (animation-timeline:view()) {
  .steps::after {
    transform: scaleX(0);
    animation: fillx linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 55%;
  }
  .steps li {
    animation: litup linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 50%;
  }
}
@keyframes fillx {
  to {
    transform: scaleX(1);
  }
}
@keyframes litup {
  from {
    opacity: .35;
  }
  to {
    opacity: 1;
  }
}
.steps li {
  list-style: none;
  padding: 28px 24px 0 0;
  position: relative;
}
.steps li::before {
  counter-increment: s;
  content: counter(s);
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
}
.steps h3 {
  font-size: 1.08rem;
  margin-bottom: 6px;
}
.steps p {
  font-size: .92rem;
  color: var(--muted);
}
.steps .when {
  display: inline-block;
  margin-top: 10px;
  font-size: .78rem;
  color: var(--gold-hi);
}
@media (max-width:860px) {
  .steps {
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
  }
}
@media (max-width:520px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* faq */
.faq {
  display: grid;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
  gap: clamp(24px,5vw,72px);
}
.faq h2 {
  font-size: clamp(2.2rem,5vw,4rem);
}
.faq-side p {
  color: var(--muted);
  margin: 16px 0 22px;
  max-width: 36ch;
}
details {
  border-bottom: 1px solid var(--line);
}
details:first-of-type {
  border-top: 1px solid var(--line-2);
}
summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  font-weight: 600;
  position: relative;
  transition: color 160ms ease;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: linear-gradient(var(--gold),var(--gold)) center/12px 2px
    no-repeat,linear-gradient(var(--gold),var(--gold)) center/2px 12px
    no-repeat;
  transition: transform 260ms var(--ease-out);
}
details[open] summary::after {
  transform: rotate(135deg);
}
@media (hover:hover) {
  summary:hover {
    color: var(--gold-hi);
  }
}
details p {
  color: var(--muted);
  padding: 0 0 22px;
  max-width: 62ch;
}
details[open] p {
  animation: vtIn 360ms var(--ease-out);
}
@media (max-width:860px) {
  .faq {
    grid-template-columns: 1fr;
  }
}

/* final cta */
.final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  padding: clamp(96px,12vw,170px) 0;
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(assets/funnel/cta-eagle.jpg) center 30%/cover no-repeat;
  opacity: .38;
  transform: scale(1.08);
  transition: transform 1.2s var(--ease-out);
}
.final.in::before {
  transform: scale(1);
}
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,var(--bg),rgba(9,9,10,.4)
    40%,rgba(9,9,10,.6) 70%,var(--bg));
}
.final h2 {
  font-size: clamp(2.6rem,7vw,5.6rem);
  max-width: 13ch;
  margin: 0 auto 18px;
}
.final .lede {
  margin: 0 auto 30px;
}
.ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
  font-size: .85rem;
  color: var(--faint);
}
footer .wrap {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
footer img {
  height: 22px;
  width: auto;
  opacity: .85;
}
footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
footer a {
  text-decoration: none;
}
@media (hover:hover) {
  footer a:hover {
    color: var(--ink);
  }
}

/* ---------- funnel pages ---------- */
.fpage {
  min-height: calc(100vh - 70px - 84px);
  padding: clamp(28px,5vw,64px) 0 clamp(56px,7vw,96px);
  position: relative;
  isolation: isolate;
}
.fpage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(50% 40% at 50% 0%,rgba(233,185,73,.1),transparent
    70%);
}
.tracker {
  display: flex;
  justify-content: center;
  gap: clamp(10px,3vw,34px);
  flex-wrap: wrap;
  margin-bottom: clamp(28px,4vw,44px);
  padding: 0;
  list-style: none;
}
.tracker li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.tracker li b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--surface-3);
  font-size: .78rem;
  letter-spacing: 0;
  transition: all 300ms var(--ease-out);
}
.tracker li.done b {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.tracker li.now {
  color: var(--ink);
}
.tracker li.now b {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
  box-shadow: 0 0 0 5px rgba(233,185,73,.16);
}
.tracker .ico {
  width: 15px;
  height: 15px;
}
@media (max-width:600px) {
  .tracker {
    gap: 8px;
  }
  .tracker li:not(.now) {
    font-size: 0;
    gap: 0;
  }
  .tracker li.now {
    font-size: .7rem;
  }
}
.f-title {
  text-align: center;
  max-width: 22ch;
  margin: 0 auto 14px;
  font-size: clamp(2.3rem,5.4vw,4.2rem);
}
.f-sub {
  text-align: center;
  margin: 0 auto 34px;
  max-width: 58ch;
  color: var(--muted);
}
.alert {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 18px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: nudge 3.2s var(--ease-out) infinite;
}
@keyframes nudge {
  0%,
  82%,
  100% {
    transform: none;
  }
  86% {
    transform: rotate(-2.5deg);
  }
  90% {
    transform: rotate(2.5deg);
  }
  94% {
    transform: rotate(-1deg);
  }
}
.panel {
  background: linear-gradient(180deg,rgba(28,26,22,.95),rgba(20,19,16,.98));
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: clamp(22px,3.4vw,40px);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
}

@keyframes vtIn {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
}

/* finder (one question per screen) */
.quiz {
  max-width: 760px;
  margin: 0 auto;
}
.qbar {
  height: 4px;
  border-radius: 4px;
  background: var(--surface-3);
  overflow: hidden;
  margin-bottom: 12px;
}
.qbar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg,var(--gold-deep),var(--gold-hi));
  transform-origin: left;
  transform: scaleX(var(--p,.25));
  transition: transform 600ms var(--ease-out);
}
.qmeta {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--faint);
  margin-bottom: clamp(22px,4vw,40px);
  font-variant-numeric: tabular-nums;
}
.qstep {
  display: none;
}
.qstep.active {
  display: block;
}
.qstep.active .qh {
  animation: wordIn 560ms var(--ease-out) both;
}
.qstep.active .opts > * {
  opacity: 0;
  animation: rise 520ms var(--ease-out) forwards;
}
.qstep.active .opts > *:nth-child(1) {
  animation-delay: 60ms;
}
.qstep.active .opts > *:nth-child(2) {
  animation-delay: 100ms;
}
.qstep.active .opts > *:nth-child(3) {
  animation-delay: 140ms;
}
.qstep.active .opts > *:nth-child(4) {
  animation-delay: 180ms;
}
.qstep.active .opts > *:nth-child(5) {
  animation-delay: 220ms;
}
.qstep.active .opts > *:nth-child(6) {
  animation-delay: 260ms;
}
.qstep.active .opts > *:nth-child(7) {
  animation-delay: 300ms;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.qh {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem,4.6vw,3.4rem);
  line-height: .95;
  margin-bottom: 10px;
  text-wrap: balance;
}
.qhint {
  color: var(--muted);
  margin-bottom: 24px;
}
.opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 26px;
}

.opts.cols4 {
  grid-template-columns: repeat(4,1fr);
}
@media (max-width:560px) {
  .opts {
    grid-template-columns: 1fr;
  }
  .opts.cols4 {
    grid-template-columns: 1fr 1fr;
  }
}
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  min-height: 62px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font-size: .98rem;
  line-height: 1.35;
  transition: border-color 180ms ease,background-color 180ms ease,transform
    140ms var(--ease-out);
}
.opt:active {
  transform: scale(.98);
}
.opt kbd {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  font: 600 .74rem var(--body);
  color: var(--gold);
  transition: all 180ms ease;
}
.opt .tick {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-3);
  display: grid;
  place-items: center;
  flex: none;
  transition: all 240ms var(--ease-out);
}
.opt .tick .ico {
  width: 13px;
  height: 13px;
  stroke-width: 3;
  opacity: 0;
  transform: scale(.6);
  transition: all 240ms var(--ease-out);
}
.opt[aria-pressed="true"] {
  border-color: var(--gold);
  background: rgba(233,185,73,.1);
}
.opt[aria-pressed="true"] kbd {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--gold);
}
.opt[aria-pressed="true"] .tick {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}
.opt[aria-pressed="true"] .tick .ico {
  opacity: 1;
  transform: none;
}
@media (hover:hover) {
  .opt:hover {
    border-color: var(--line-2);
    background: var(--surface-2);
  }
}
.opt.center {
  justify-content: center;
  text-align: center;
  font-weight: 600;
}
.qactions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.qactions .hint {
  font-size: .84rem;
  color: var(--faint);
}
.qactions .hint kbd {
  font: 600 .74rem var(--body);
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.field {
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}
.field label {
  font-size: .84rem;
  color: var(--muted);
  font-weight: 500;
}
.input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 1rem;
  transition: border-color 160ms ease,box-shadow 200ms ease;
}
.input::placeholder {
  color: #857d6f;
}
.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(233,185,73,.16);
}
.input[aria-invalid="true"] {
  border-color: var(--err);
  animation: shake 360ms var(--ease-out);
}
@keyframes shake {
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}
textarea.input {
  min-height: 96px;
  resize: vertical;
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23E9B949' stroke-width='1.8'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width:560px) {
  .row2 {
    grid-template-columns: 1fr;
  }
}
.err {
  color: var(--err);
  font-size: .84rem;
  min-height: 1.2em;
  margin-bottom: 6px;
}
.privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: .8rem;
  color: var(--faint);
  margin-top: 16px;
}
.privacy .ico {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

/* building screen */
.building {
  max-width: 520px;
  margin: clamp(30px,8vh,90px) auto 0;
  text-align: center;
}
.orbit {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 34px;
}
.orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--line-2);
  animation: spin 9s linear infinite;
}
.orbit i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 14px var(--gold);
  animation: orb 1.6s var(--ease-io) infinite;
}
.orbit i:nth-child(2) {
  animation-delay: -.53s;
}
.orbit i:nth-child(3) {
  animation-delay: -1.06s;
}
@keyframes orb {
  0% {
    transform: rotate(0) translateX(60px);
  }
  100% {
    transform: rotate(360deg) translateX(60px);
  }
}
.orbit b {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#3a2f15,#120f09);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 40px -6px rgba(233,185,73,.6);
}
.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  text-align: left;
  max-width: 320px;
  margin: 24px auto 0;
}
.checklist li {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--faint);
  transition: color 300ms ease;
}
.checklist li span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--surface-3);
  display: grid;
  place-items: center;
  flex: none;
  transition: all 300ms var(--ease-out);
}
.checklist li span .ico {
  width: 13px;
  height: 13px;
  stroke-width: 3;
  opacity: 0;
}
.checklist li.ok {
  color: var(--ink);
}
.checklist li.ok span {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
}
.checklist li.ok span .ico {
  opacity: 1;
}

/* results page */
.result-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(20px,3vw,40px);
  align-items: center;
  margin-bottom: clamp(36px,5vw,64px);
}
@media (max-width:900px) {
  .result-grid {
    grid-template-columns: 1fr;
  }
}
.moves {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: m;
}
.moves li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.moves li::before {
  counter-increment: m;
  content: counter(m);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--gold);
  min-width: 22px;
}
.moves b {
  display: block;
  margin-bottom: 2px;
}
.moves span {
  color: var(--muted);
  font-size: .92rem;
}
.r-title {
  font-size: clamp(2.2rem,4.6vw,3.6rem);
  margin-bottom: 12px;
}
.r-for {
  color: var(--gold-hi);
  font-size: .9rem;
  margin-bottom: 6px;
}
/* offer */
.offer {
  display: block;
}
.offer h2 {
  font-size: clamp(2rem,4vw,3.1rem);
  margin-bottom: 12px;
}
.offer .lede {
  margin-bottom: 20px;
}
/* Partner recruitment: one compact layout; shared form and dashboard behavior retained. */
.partner-recruitment-wrap { max-width:1320px; }
.partner-recruitment .fpage { padding-top:18px; }
.partner-recruitment-hero { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:28px; align-items:start; padding:0 0 24px; }
.partner-recruitment-hero h1 { font-size:clamp(2.9rem,4.1vw,3.8rem); line-height:.96; letter-spacing:-.02em; margin:8px 0 12px; }
.partner-recruitment-hero .lede { max-width:57ch; font-size:.95rem; line-height:1.6; color:var(--muted); }
.partner-tiers { margin-top:18px; }
.partner-tiers>.eyebrow { margin-bottom:12px; font-size:.68rem; }
.partner-recruitment-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.partner-tier { padding:14px 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.partner-tier strong { color:var(--gold); font-family:var(--display); font-size:2.9rem; font-weight:800; line-height:1; }
.partner-tier h3 { font-family:var(--display); font-size:1.12rem; line-height:1.2; margin:9px 0; }
.partner-tier p { color:var(--muted); font-size:.78rem; line-height:1.45; }
.partner-comparison { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); margin-top:20px; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.partner-comparison>div { padding:14px; }
.partner-comparison-eagles { background:rgba(233,185,73,.055); border-left:1px solid var(--line); }
.partner-comparison h2 { font-family:var(--display); font-size:1.2rem; text-transform:uppercase; margin-bottom:9px; }
.partner-comparison-eagles h2 { color:var(--gold); }
.partner-comparison ul { list-style:none; padding:0; display:grid; gap:7px; color:var(--muted); font-size:.79rem; line-height:1.5; }
.partner-comparison li { position:relative; padding-left:17px; }
.partner-comparison li::before { content:'\2013'; position:absolute; left:0; color:var(--faint); }
.partner-comparison-eagles li::before { content:'\2713'; color:var(--gold); }
.partner-recruitment-actions,.partner-cta-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:20px; }
.partner-sign-in { font-size:.8rem; text-underline-offset:4px; }
.partner-recruitment-note { color:var(--muted); font-size:.76rem; line-height:1.5; margin-top:12px; }
.partner-recruitment #partner-apply-form { max-width:none; margin:0; padding:18px; gap:7px; scroll-margin-top:90px; }
.partner-recruitment #partner-application-heading { font-size:2rem; line-height:1; }
.partner-recruitment #partner-apply-form>p { font-size:.8rem; line-height:1.45; }
.partner-recruitment .partners-apply-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.partner-recruitment #partner-apply-form label { font-size:.78rem; line-height:1.35; }
.partner-recruitment .partners-apply-grid>label { gap:5px; }
.partner-recruitment #partner-apply-form input:not([type=checkbox]) { padding:10px; min-height:44px; }
.partner-recruitment #partner-apply-form .consent-checkbox { align-items:start; gap:8px; font-size:.74rem; line-height:1.35; }
.partner-optional-sms summary { cursor:pointer; color:var(--muted); font-size:.78rem; padding:6px 0; }
.partner-recruitment #partner-social-help { font-size:.72rem; }
.partner-recruitment .partner-agreement { padding:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.partner-recruitment .partner-agreement summary { padding:9px 0; cursor:pointer; font-size:.8rem; color:var(--gold); }
.partner-recruitment #partner-agreement-text { font-size:.82rem; line-height:1.7; }
.partner-recruitment #partner-agreement-text p { margin-bottom:14px; }
.partner-recruitment .partner-agreement>p { font-size:.72rem; margin:12px 0; }
.partner-recruitment .consent-panel { padding:12px; }
.partner-recruitment .consent-copy { margin-top:6px; line-height:1.6; }
.partner-recruitment .partners-hero-actions { gap:8px; margin:0; }
.partner-recruitment .partners-hero-actions .btn { padding:11px 14px; font-size:.78rem; min-height:44px; }
.partner-recruitment-section { padding:22px 0; border-top:1px solid var(--line); }
.partner-recruitment-section h2 { font-size:clamp(2rem,3vw,2.8rem); line-height:1.05; margin-bottom:16px; }
.partner-recruitment-section p,.partner-recruitment-section li { color:var(--muted); line-height:1.7; }
.partner-recruitment-section strong { color:var(--ink); }
.partner-recruitment-steps { list-style:none; padding:0; }
.partner-recruitment-steps li { padding:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.partner-recruitment-steps h3 { font-family:var(--display); font-size:1.5rem; margin:6px 0; color:var(--ink); }
.partner-recruitment-steps p { font-size:.9rem; }
.partner-step-number { color:var(--gold); font-family:var(--display); font-size:1.2rem; }
.partner-recruitment-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 28px; }
.partner-record-card { padding:18px; border:1px solid var(--line); border-radius:12px; }
.partner-record-card p { font-size:.88rem; }
.partner-record-card p+p { margin-top:12px; }
.partner-recruitment .faq { gap:30px; }
.partner-recruitment-cta { text-align:center; padding:32px 24px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:16px; margin:12px 0 0; }
.partner-recruitment-cta p { max-width:65ch; margin:0 auto 18px; }
.partner-cta-actions { justify-content:center; margin:0 0 20px; }
.partner-recruitment a:focus-visible,.partner-recruitment summary:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
@media(min-width:761px) and (max-width:980px) {
 .partner-recruitment-hero { gap:22px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .partner-recruitment .partners-apply-grid { grid-template-columns:1fr; }
 .partner-recruitment .partners-hero-actions { flex-direction:column; align-items:stretch; }
}
@media(max-width:760px) {
 .partner-recruitment .fpage { padding-top:24px; }
 .partner-recruitment-hero { grid-template-columns:1fr; gap:26px; padding-bottom:28px; }
 .partner-recruitment-hero h1 { font-size:clamp(2.8rem,11vw,4.2rem); }
 .partner-recruitment-grid { gap:8px; }
 .partner-tier { padding:14px 10px; }
 .partner-tier strong { font-size:2.5rem; }
 .partner-tier h3 { font-size:.94rem; }
 .partner-tier p { font-size:.76rem; }
 .partner-comparison>div { padding:14px 12px; }
 .partner-recruitment .partners-apply-grid { grid-template-columns:1fr; }
 .partner-recruitment #partner-apply-form { padding:20px; gap:14px; }
 .partner-recruitment #partner-apply-form label { font-size:.875rem; }
 .partner-recruitment .partners-hero-actions { flex-direction:column; align-items:stretch; }
 .partner-recruitment .partners-hero-actions .btn { font-size:.85rem; }
 .partner-tiers .partner-recruitment-grid { grid-template-columns:1fr; gap:10px; }
 .partner-tier { display:grid; grid-template-columns:74px minmax(0,1fr); gap:3px 12px; padding:16px; }
 .partner-tier strong { grid-row:1 / 3; font-size:3rem; }
 .partner-tier h3 { margin:0; font-size:1.1rem; }
 .partner-tier p { font-size:.85rem; line-height:1.5; }
 .partner-recruitment-steps,.partner-recruitment-pair { grid-template-columns:1fr; }
 .partner-recruitment-section { padding:26px 0; }
 .partner-record-card { padding:22px; }
 .partner-recruitment .faq { grid-template-columns:1fr; gap:8px; }
}


@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms!important;
    animation-delay: 0ms!important;
    animation-iteration-count: 1!important;
    transition-duration: 1ms!important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .word {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Operational components share the funnel tokens; no legacy stylesheet is loaded. */
[hidden] {
  display: none!important;
}
html {
  scroll-padding-top: 90px;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--gold);
  color: var(--on-gold);
  padding: 12px 20px;
}
.skip-link:focus {
  top: 10px;
}
.menu-toggle {
  display: none;
  border: 1px solid var(--line-2);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 14px;
}
.top {
  background: rgba(9,9,10,.92);
}
.top nav {
  gap: 20px;
}
.top nav a[aria-current] {
  color: var(--gold);
}
.operations-page {
  max-width: var(--max);
  padding: clamp(28px,5vw,64px) var(--gutter);
  margin: auto;
  min-height: 70vh;
}
.operations-page h1 {
  font: 800 clamp(3rem,7vw,5.5rem)/.95 var(--display);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.operations-page h2,
.calendar-card h2 {
  font: 700 2rem/1.1 var(--display);
  margin-bottom: 14px;
}
.operations-page h3 {
  font: 700 1.5rem/1.15 var(--display);
  margin-bottom: 12px;
}
.operations-page p {
  color: var(--muted);
  margin-bottom: 18px;
}
.eyebrow {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--gold);
  margin-bottom: 18px;
}
.admin-shell,
.partner-portal-shell,
.legal-shell {
  display: grid;
  gap: 32px;
}
.admin-copy {
  max-width: 660px;
}
.admin-card,
.partner-portal-auth,
.partner-portal-view {
  padding: clamp(18px,3vw,30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
#admin-login-card,
#partner-dashboard-auth {
  max-width: 620px;
  width: 100%;
}
.admin-form,
.booking-form,
.partners-apply-form {
  display: grid;
  gap: 18px;
}
.admin-form label,
.form-grid > label,
.partners-apply-grid > label,
.booking-form fieldset {
  display: grid;
  gap: 8px;
  font-size: .9rem;
  color: var(--muted);
}
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--ink);
}
input[type=checkbox],
input[type=radio] {
  accent-color: var(--gold);
  width: 18px;
  height: 18px;
  flex: none;
}
textarea {
  min-height: 110px;
  resize: vertical;
}
fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
fieldset label,
.consent-checkbox,
.toggle-row {
  display: flex!important;
  align-items: flex-start;
  gap: 10px;
}
.form-grid,
.partners-apply-grid,
.admin-grid,
.calendar-body,
.admin-calendar-shell,
.partner-portal-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
}
.form-grid fieldset {
  grid-column: 1/-1;
}
.booking-legend {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin: 24px 0;
}
.legend-item {
  display: grid;
  gap: 6px;
  font-size: .8rem;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
}
.legend-item strong {
  color: var(--gold);
}
.calendar-body {
  margin: 24px 0;
}
.month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.month button,
.dates button,
.times button,
.admin-tab,
.password-toggle {
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  min-height: 44px;
}
.weekdays,
.dates {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 5px;
  text-align: center;
}
.weekdays {
  font-size: .72rem;
  color: var(--faint);
  margin-bottom: 8px;
}
.dates button {
  padding: 8px 1px;
  min-width: 0;
}
button:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.dates button.selected,
.times button.selected,
.admin-tab.is-active {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--gold);
}
.times {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  align-content: start;
  max-height: 360px;
  overflow: auto;
}
.times button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: .85rem;
}
.times button.free {
  border-color: rgba(143,211,168,.5);
}
.times button.paid {
  border-color: var(--gold-deep);
}
.times button small {
  font-size: .72rem;
}
.selected-slot {
  color: var(--gold);
  padding-block: 12px;
  border-block: 1px solid var(--line);
}
.consent-panel {
  padding: 16px;
  background: var(--bg-2);
  border-radius: 10px;
}
.consent-copy {
  font-size: .76rem;
  color: var(--faint);
  margin-top: 10px;
}
.consent-copy a {
  color: var(--gold);
}
.timezone {
  color: var(--faint);
  font-size: .8rem;
  margin-top: 18px;
}
.booking-alert,
[role=status]:not([hidden]) {
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  margin-block: 12px;
}
[data-type=error] {
  color: var(--err)!important;
}
[data-type=success] {
  color: var(--ok)!important;
}
.booking-confirmation {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,.8);
  display: grid;
  place-items: center;
  padding: 20px;
}
.booking-confirmation-card {
  max-width: 560px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--gold-deep);
  border-radius: var(--r);
  box-shadow: 0 20px 90px #000;
}
.booking-confirmation-card h3 {
  font: 800 2.5rem/1 var(--display);
  margin-bottom: 20px;
}
.booking-confirmation-actions,
.partners-hero-actions,
.admin-topline,
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-block: 18px;
}
.btn-outline {
  background: transparent;
  border-color: var(--line-2);
}
.password-input-wrap {
  position: relative;
  display: flex;
  gap: 8px;
}
.password-toggle {
  flex: none;
}
.admin-tabs {
  border-block: 1px solid var(--line);
  padding-block: 14px;
}
.admin-tab {
  font-size: .85rem;
}
.admin-dashboard {
  min-width: 0;
}
.availability-grid {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
}
.availability-row {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr) 80px;
  align-items: center;
  gap: 8px;
}
.admin-card-header,
.admin-slots-header {
  margin-bottom: 18px;
}
.activity-item {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.partner-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(135px,1fr));
  gap: 12px;
  margin-block: 24px;
}

.legal-content {
  max-width: 850px;
}
.legal-content section {
  margin-top: 28px;
}
.empty-state {
  font-size: .9rem;
  color: var(--faint);
  padding: 16px;
}
.operations-page a {
  overflow-wrap: anywhere;
}
#selected-work {
  padding-top: 50px!important;
}
#main-content {
  outline: none;
}
@media (max-width:1000px) {
  .top nav {
    gap: 12px;
    font-size: .82rem;
  }
  .top .wrap {
    gap: 14px;
  }
}
@media (max-width:880px) {
  .menu-toggle {
    display: block;
    margin-left: auto;
  }
  .top .btn {
    margin-left: 0;
  }
  .top.menu-open nav {
    display: flex;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 20px var(--gutter);
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-2);
  }
  .top.menu-open nav a {
    padding: 10px;
  }
  .admin-grid,
  .admin-calendar-shell,
  .partner-portal-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:600px) {
  .calendar-body,
  .form-grid,
  .partners-apply-grid {
    grid-template-columns: 1fr;
  }
  .booking-legend {
    grid-template-columns: 1fr;
  }
  .legend-item {
    grid-template-columns: 50px 1fr;
  }
  .btn {
    white-space: normal;
    text-align: center;
  }
  .availability-row {
    grid-template-columns: 50px minmax(0,1fr) 65px;
  }
  .booking-confirmation-card {
    padding: 22px;
  }
  .top .wrap {
    gap: 8px;
  }
  .top .brand img {
    max-width: 105px;
    height: auto;
  }
}
.operations-page > *,
.operations-page form,
.operations-page section,
.operations-page div {
  min-width: 0;
}
#partner-dashboard-auth,
#admin-login-card {
  max-width: 100%;
  min-width: 0;
}
.operations-page h1 {
  overflow-wrap: anywhere;
}

.email-thread-item {
  display: block;
  width: 100%;
  padding: 16px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  margin-bottom: 12px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.email-thread-item.is-active {
  border-color: var(--gold);
}
.email-thread-item > span {
  display: block;
  margin-bottom: 8px;
}
.email-thread-topline,
.email-message-header,
.email-message-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.email-thread-contact {
  display: grid;
  gap: 4px;
}
.email-thread-item small,
.email-thread-item time {
  font-size: .76rem;
  color: var(--faint);
}
.email-thread-status {
  font-size: .7rem;
  color: var(--gold);
}
.email-thread-subject {
  font-weight: 600;
}
.email-thread-preview {
  font-size: .85rem;
  color: var(--muted);
}
.email-message-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
  overflow-wrap: anywhere;
}
.email-message-header em {
  display: block;
  color: var(--gold);
  font-size: .75rem;
  font-style: normal;
}
.email-message-meta {
  font-size: .72rem;
  color: var(--faint);
  margin-block: 12px;
}

.demo-caption {
  text-align: center;
  font-size: .7rem;
  color: var(--faint);
  margin-top: -10px;
}
/* Keep availability controls readable inside the admin card at every width. */
.availability-editor .admin-calendar-shell {
  grid-template-columns: 1fr;
}
.admin-calendar-panel {
  max-width: 460px;
  width: 100%;
}
@media (min-width:601px) {
  .availability-row {
    grid-template-columns: 80px minmax(120px,1fr) 90px;
  }
}

/* Shared business workflow controls use the existing Claude palette. */
.meeting-choice {
  display: grid;
  gap: 10px;
  margin: 24px 0;
}
.meeting-choice select,
.business-search,
.business-filter {
  max-width: 100%;
}
.workflow-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-card pre,
.appointments-list pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 420px;
  overflow: auto;
  font-size: 12px;
}
.business-records {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}
.business-records details {
  margin: 12px 0;
}
#inquiry-form {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}
#block-form {
  min-width: 0;
}
.appointments-list article {
  overflow-wrap: anywhere;
}

/* Existing dashboard communication panels share the same card and form system. */
[id^="communications-"] { overflow-wrap:anywhere; min-width:0; }
#communications-sms-history,#communications-timeline { max-height:42rem; overflow:auto; }
#communications-sms-list,#communications-customers-list { max-height:38rem; overflow:auto; }
#communications-sms-reply[hidden] { display:none; }

#communications-sms-list .email-thread-item, #communications-customers-list .email-thread-item { display:grid; gap:6px; }

/* Authenticated partner accounting uses the existing dashboard card system. */
.partner-program { margin-bottom:24px; overflow-wrap:anywhere; }
.partner-program .admin-form { padding:16px 0; }
.partner-program article { border-bottom:1px solid var(--line); padding:16px 0; }
.partner-program h4 { color:var(--gold); }
.partner-program code { font-size:.8rem; overflow-wrap:anywhere; }

/* Application profile fields reuse the existing form and private admin cards. */
.partner-recruitment .partner-profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.partner-recruitment .partner-outreach-label { display:grid; gap:6px; }
.partner-recruitment .partner-outreach-label textarea { min-height:44px; resize:vertical; }
.partner-profile-details { display:grid; gap:4px; margin:12px 0; }
.partner-profile-details dt { color:var(--muted); font-size:.8rem; }
.partner-profile-details dd { margin:0 0 8px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:760px) { .partner-recruitment .partner-profile-grid { grid-template-columns:1fr; } }

/* Client support queue (Oct 19, 2026) */
.support-emergency-card {
  border: 1px solid var(--red);
}
.support-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.support-overdue {
  color: var(--red);
  font-weight: 600;
}
.support-note {
  width: 100%;
}