/* Jason Teixeira Portfolio — implemented from Claude Design "Jason Teixeira Portfolio.dc.html" */

/* ─── self-hosted fonts (latin subset, variable where available) ─── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-italic.woff2') format('woff2');
}

html { scroll-behavior: smooth; background: #09090B; }
body {
  margin: 0;
  background: #09090B;
  color: #F4F2EF;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
a { color: #22d3ee; text-decoration: none; }
a:hover { color: #33EBE8; }
/* links inside prose must not rely on color alone (WCAG 1.4.1) */
p a, .prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(34, 211, 238, 0.55);
}
::selection { background: rgba(16,185,129,0.35); color: #F4F2EF; }

/* ─── keyframes ─── */
@keyframes jt-nodepulse { 0%,100% { opacity:.45; transform:scale(1); } 50% { opacity:1; transform:scale(1.18); } }
@keyframes jt-ringpulse { 0% { transform:scale(.6); opacity:.7; } 100% { transform:scale(1.7); opacity:0; } }
@keyframes jt-fadeup { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes jt-rise { from { opacity:.15; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes jt-blink { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes jt-cursor { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@keyframes jt-scrollup { from { transform:translateY(0); } to { transform:translateY(-50%); } }
@keyframes jt-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes jt-travel { 0% { offset-distance:0%; opacity:0; } 4% { opacity:1; } 92% { opacity:1; } 100% { offset-distance:100%; opacity:0; } }
@keyframes jt-fail {
  0% { offset-distance:0%; opacity:0; background:#22d3ee; }
  3% { opacity:1; }
  36% { offset-distance:60%; background:#22d3ee; }
  40% { offset-distance:60%; background:#f43f5e; }
  56% { offset-distance:33%; background:#f43f5e; }
  62% { offset-distance:33%; background:#22d3ee; }
  92% { offset-distance:100%; background:#10b981; opacity:1; }
  100% { offset-distance:100%; opacity:0; background:#10b981; }
}
@keyframes jt-evalflash {
  0%,38% { opacity:0; transform:scale(.8); }
  42% { opacity:1; transform:scale(1.25); }
  52% { opacity:.6; }
  58%,100% { opacity:0; transform:scale(.8); }
}

/* ─── section reveals — IntersectionObserver-driven, cross-browser ───
   Default state is fully visible (no-JS, crawlers, reduced motion).
   JS adds .rise-pre (hidden) then .rise-in on intersection. opacity:0 is
   correctly skipped by contrast checkers, unlike partial opacity. */
.rise-pre { opacity: 0; transform: translateY(26px); }
.rise-in {
  opacity: 1;
  transform: none;
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── funnel state (client | hire) ─── */
[data-funnel="client"] .only-hire { display: none !important; }
[data-funnel="hire"] .only-client { display: none !important; }

.funnel-toggle {
  display: flex; border: 1px solid #2A2826; border-radius: 999px;
  padding: 3px; gap: 3px; background: #12110F;
}
.funnel-btn {
  border: none; cursor: pointer; border-radius: 999px; padding: 6px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600;
  background: transparent; color: #A8A29E; transition: color 150ms ease;
}
.funnel-btn:hover { color: #F4F2EF; }
.funnel-btn:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.funnel-btn.active { background: #F4F2EF; color: #09090B; }

/* ─── skip link ─── */
.skip-link {
  position: fixed; top: -48px; left: 16px; z-index: 100;
  background: #10b981; color: #09090B; font-weight: 700; font-size: 13px;
  padding: 10px 18px; border-radius: 0 0 8px 8px; transition: top 150ms ease;
}
.skip-link:focus-visible { top: 0; color: #09090B; outline: 2px solid #F4F2EF; }

/* ─── nav links ─── */
.nav-link {
  color: #A8A29E; padding-bottom: 3px;
  background-image: linear-gradient(#22d3ee, #22d3ee);
  background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px;
  transition: background-size 200ms ease, color 150ms ease;
}
.nav-link:hover { color: #F4F2EF; background-size: 100% 1px; }
.nav-link.active { color: #F4F2EF; background-size: 100% 1px; }

/* ─── unified site nav (P1: one canonical nav, every top-level page) ─── */
/* Note: the frosted background lives on ::before, not on .site-nav itself —
   backdrop-filter on an ancestor creates a new containing block for
   position:fixed descendants, which would trap the mobile nav panel inside
   the (short) nav bar's own box instead of the viewport. */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid #2A2826;
}
.site-nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(9, 9, 11, 0.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.site-nav-brand { display: inline-flex; align-items: center; gap: 10px; color: #F4F2EF; flex-shrink: 0; }
.site-nav-mk {
  width: 26px; height: 26px; border: 1px solid #2A2826; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; background: #0C0C0E;
}
.site-nav-nm { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.site-nav-index-extra { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.site-nav-links {
  display: flex; align-items: center; gap: 22px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
}
.site-nav-link {
  color: #A8A29E; padding-bottom: 3px;
  background-image: linear-gradient(#22d3ee, #22d3ee);
  background-repeat: no-repeat; background-position: left bottom; background-size: 0% 1px;
  transition: background-size 200ms ease, color 150ms ease;
}
.site-nav-link:hover { color: #F4F2EF; background-size: 100% 1px; }
.site-nav-link[aria-current="page"] {
  color: #F4F2EF; font-weight: 600;
  background-image: linear-gradient(#10b981, #10b981); background-size: 100% 1px;
}
.site-nav-cta { padding: 9px 16px; font-size: 12.5px; flex-shrink: 0; }
.site-nav-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid #2A2826; border-radius: 8px; background: #0C0C0E;
  cursor: pointer; padding: 0; position: relative; z-index: 56;
}
.site-nav-burger span { display: block; width: 16px; height: 1.5px; background: #F4F2EF; border-radius: 1px; transition: transform 200ms ease, opacity 200ms ease; }
.site-nav-burger:hover { border-color: #3D3A37; }
.site-nav-burger:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.site-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
body.site-nav-open { overflow: hidden; }

@media (max-width: 760px) {
  .site-nav-index-extra { display: none; }
  .site-nav-burger { display: inline-flex; }
  .site-nav-links {
    position: fixed; inset: 0; z-index: 55;
    flex-direction: column; justify-content: center; align-items: center; gap: 6px;
    background: rgba(9, 9, 11, 0.98); backdrop-filter: blur(20px);
    padding: 32px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
  }
  .site-nav-links.open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
  }
  .site-nav-link { font-size: 18px; padding: 14px 18px; }
  .site-nav-cta { margin-top: 14px; }
}

/* ─── buttons ─── */
.btn-solid {
  display: inline-flex; align-items: center; gap: 10px;
  color: #09090B; font-weight: 700; font-size: 14px;
  padding: 13px 26px; border-radius: 10px;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn-solid.green { background: #10b981; }
.btn-solid.green:hover { transform: translateY(-2px); color: #09090B; box-shadow: 0 0 28px rgba(16,185,129,0.35); }
.btn-solid.green:focus-visible { outline: 2px solid #10b981; outline-offset: 3px; }
.btn-solid.cyan { background: #22d3ee; }
.btn-solid.cyan:hover { transform: translateY(-2px); color: #09090B; box-shadow: 0 0 28px rgba(34,211,238,0.35); }
.btn-solid.cyan:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid #2A2826; background: transparent; color: #F4F2EF; font-weight: 600; font-size: 14px;
  padding: 13px 26px; border-radius: 10px; transition: border-color 150ms ease;
}
.btn-ghost:hover { border-color: #3D3A37; color: #F4F2EF; }
.btn-ghost:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }

/* ─── project rows ─── */
.proj { transition: background 200ms ease; }
.proj:hover { background: #0C0C0E; }
.proj .num { transition: color 200ms ease; }
.proj:hover .num { color: var(--pc); }
.proj .arrow { opacity: 0; transform: translateX(-10px); transition: opacity 200ms ease, transform 200ms ease; }
.proj:hover .arrow { opacity: 1; transform: translateX(0); }

/* ─── brief flow chips ─── */
.flow-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; padding: 6px 12px;
  background: rgba(0,0,0,0.3); white-space: nowrap; transition: border-color 150ms ease;
  border: 1px solid var(--chip-b); color: var(--chip-c);
}
.flow-chip:hover { border-color: var(--chip-c); }

/* ─── services cards (dark) ─── */
.svc-card {
  border: 1px solid #2A2826; padding: 28px; background: #101014; border-radius: 12px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.svc-card:hover { transform: translateY(-2px); border-color: #3D3A37; }

/* ─── field-note rows ─── */
.note-row { transition: background 200ms ease; color: #F4F2EF; }
.note-row:hover { background: #0C0C0E; color: #F4F2EF; }

/* ─── misc hover links ─── */
.dim-link { color: #8E8882; }
.dim-link:hover { color: #F4F2EF; }

/* ─── marquee ─── */
.tape { display: flex; width: max-content; animation: jt-marquee 46s linear infinite; }
.tape:hover { animation-play-state: paused; }

/* ─── section label rule ─── */
.sec-rule { display: flex; align-items: center; gap: 16px; }
.sec-rule .line { flex: 1; height: 1px; background: #2A2826; }
.sec-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
}
.sec-ghost-num {
  position: absolute; top: 44px; right: clamp(18px, 4vw, 40px);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(90px, 14vw, 180px); line-height: .8;
  color: transparent; -webkit-text-stroke: 1px #1F1D1B;
  user-select: none; pointer-events: none;
}
h2.sec-title {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.02em; margin: 26px 0 0;
}

/* ─── experience timeline ─── */
.xp-row { display: flex; gap: clamp(16px, 3vw, 32px); }
.xp-rail { display: flex; flex-direction: column; align-items: center; width: 14px; flex-shrink: 0; padding-top: 8px; }
.xp-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--xc);
  box-shadow: 0 0 16px color-mix(in srgb, var(--xc) 45%, transparent);
  animation: jt-nodepulse 3.2s ease-in-out infinite;
}
.xp-line { flex: 1; width: 1px; background: #2A2826; margin-top: 8px; }
.xp-body { flex: 1; padding-bottom: 40px; min-width: 0; }
.xp-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.xp-org { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.8rem); letter-spacing: -0.01em; margin: 0; }
.xp-role { font-size: 13px; font-weight: 600; color: #A8A29E; }
.xp-dates { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #837D77; margin-left: auto; }
.xp-points { margin: 12px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.xp-points li { font-size: 13.5px; line-height: 1.7; color: #A8A29E; max-width: 72ch; }
.xp-points b { color: var(--xc); font-weight: 600; }
.xp-points li::marker { color: var(--xc); }

/* ─── prose code blocks (note pages) ─── */
pre.code {
  margin: 4px 0; padding: 16px 18px; overflow-x: auto;
  background: #08090c; border: 1px solid #2A2826; border-radius: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.75;
  color: #C9C4BF;
}
pre.code code { font-family: inherit; }

/* ─── metric delta bars ─── */
.delta { display: flex; align-items: center; gap: 12px; margin: 10px 0 0 18px; max-width: 420px; }
.delta-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #837D77; min-width: 8.5em; }
.delta-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.delta-bars i { display: block; height: 4px; border-radius: 2px; }
.delta-bars .before { background: #2A2826; }
.delta-nums { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #A8A29E; white-space: nowrap; }

/* ─── comparison table ─── */
.cmp { width: 100%; border-collapse: collapse; margin-top: 24px; font-size: 13px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #2A2826; }
.cmp thead th { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #8E8882; font-weight: 500; }
.cmp thead th:last-child { color: #10b981; }
.cmp tbody th { font-weight: 600; color: #F4F2EF; font-size: 13px; }
.cmp td { color: #8E8882; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.cmp td.y { color: #10b981; }
.cmp td.n { color: #837D77; }
.cmp tbody tr:hover { background: #0C0C0E; }

/* ─── credential chips ─── */
.cred-chip {
  --cc: #10b981;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em;
  color: #C9C4BF; border: 1px solid color-mix(in srgb, var(--cc) 35%, transparent);
  border-radius: 6px; padding: 6px 12px; background: color-mix(in srgb, var(--cc) 5%, transparent);
  white-space: nowrap;
}

/* ─── pull-quote band ─── */
.quote-band { border-top: 1px solid #2A2826; border-bottom: 1px solid #2A2826; background: #0C0C0E; position: relative; overflow: hidden; }
.quote-band .q-mark {
  position: absolute; top: -30px; left: clamp(18px, 4vw, 60px);
  font-family: 'Instrument Serif', Georgia, serif; font-size: 280px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px #1F1D1B; user-select: none; pointer-events: none;
}
.quote-band blockquote {
  max-width: 1000px; margin: 0 auto; padding: clamp(64px, 9vw, 110px) clamp(18px, 4vw, 40px);
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.3; letter-spacing: -0.015em;
  color: #F4F2EF; text-wrap: balance; position: relative;
}
.quote-band cite {
  display: block; margin-top: 22px; font-style: normal;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #837D77;
}

/* ─── brief spec expander ─── */
.brief-outcome {
  font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.3; letter-spacing: -0.01em; color: #F4F2EF; max-width: 40ch; margin: 4px 0 18px;
}
details.brief-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #8E8882; padding: 10px 0; user-select: none;
  transition: color 150ms ease;
}
details.brief-more > summary::-webkit-details-marker { display: none; }
details.brief-more > summary:hover { color: #F4F2EF; }
details.brief-more > summary .chev { transition: transform 200ms ease; display: inline-block; }
details.brief-more[open] > summary .chev { transform: rotate(90deg); }
details.brief-more > summary:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }

/* ─── FAQ (dark) ─── */
details.faq { border-bottom: 1px solid #2A2826; }
details.faq > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 16px 0; font-size: 14.5px; font-weight: 600; color: #F4F2EF; user-select: none;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::before {
  content: '+'; font-family: 'JetBrains Mono', monospace; color: #22d3ee;
  font-size: 16px; width: 18px; flex-shrink: 0; transition: transform 200ms ease;
}
details.faq[open] > summary::before { transform: rotate(45deg); }
details.faq > summary:focus-visible { outline: 2px solid #22d3ee; outline-offset: 3px; }
details.faq > p { margin: 0 0 18px 30px; font-size: 13.5px; line-height: 1.7; color: #A8A29E; max-width: 58ch; }

/* ─── availability chip ─── */
.avail-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  color: #10b981; border: 1px solid rgba(16,185,129,0.35); border-radius: 999px;
  padding: 6px 14px; background: rgba(16,185,129,0.05);
}
.avail-chip .pulse { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: jt-blink 2.4s ease-in-out infinite; }

/* ─── command palette ─── */
.palette-hint {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #837D77;
  border: 1px solid #2A2826; border-radius: 6px; padding: 3px 8px; cursor: pointer;
  background: #0C0C0E; transition: color 150ms ease, border-color 150ms ease;
}
.palette-hint:hover { color: #F4F2EF; border-color: #3D3A37; }
#jt-palette { position: fixed; inset: 0; z-index: 90; display: none; }
#jt-palette.open { display: block; }
#jt-palette .backdrop { position: absolute; inset: 0; background: rgba(9,9,11,0.7); backdrop-filter: blur(4px); }
#jt-palette .panel {
  position: relative; max-width: 520px; margin: 14vh auto 0; background: #0C0C0E;
  border: 1px solid #3D3A37; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(16,185,129,0.06);
  animation: jt-fadeup 160ms ease-out;
}
#jt-palette input {
  width: 100%; box-sizing: border-box; background: transparent; border: none; outline: none;
  color: #F4F2EF; font-family: 'JetBrains Mono', monospace; font-size: 14px;
  padding: 16px 18px; border-bottom: 1px solid #2A2826;
}
#jt-palette input::placeholder { color: #837D77; }
#jt-palette .items { max-height: 320px; overflow-y: auto; padding: 6px; }
#jt-palette .item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  color: #A8A29E; font-size: 13.5px; cursor: pointer;
}
#jt-palette .item .k {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #837D77;
  border: 1px solid #2A2826; border-radius: 4px; padding: 2px 6px; margin-left: auto;
}
#jt-palette .item.sel { background: #1A1917; color: #F4F2EF; }
#jt-palette .item.sel .k { color: #10b981; border-color: rgba(16,185,129,0.4); }

/* ─── contact form ─── */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld > span {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8E8882;
}
.fld input, .fld textarea {
  background: #0C0C0E; border: 1px solid #2A2826; border-radius: 8px;
  color: #F4F2EF; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px;
  padding: 12px 14px; transition: border-color 150ms ease; resize: vertical;
}
.fld input::placeholder, .fld textarea::placeholder { color: #57534E; }
.fld input:hover, .fld textarea:hover { border-color: #3D3A37; }
.fld input:focus-visible, .fld textarea:focus-visible { outline: none; border-color: #10b981; box-shadow: 0 0 0 1px rgba(16,185,129,0.4); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ─── mobile sticky CTA ─── */
#jt-mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(9,9,11,0.92); backdrop-filter: blur(12px);
  border-top: 1px solid #2A2826;
}
@media (max-width: 768px) {
  #jt-mobile-cta:not([hidden]) { display: flex; }
}

/* ─── toast ─── */
#jt-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  z-index: 95; background: #10b981; color: #09090B; font-weight: 700; font-size: 13px;
  font-family: 'Plus Jakarta Sans', sans-serif; padding: 10px 22px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
}
#jt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rise-pre { opacity: 1 !important; transform: none !important; }
}

/* ── receipts band hover (index) ── */
#receipts .receipt { transition: background .25s ease; }
#receipts .receipt:hover { background:#15151A; }
#receipts .receipt:hover div:last-child { text-decoration: underline; }

/* ── transform scrollytelling (index) ── */
.tf-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px,4vw,56px); margin-top:44px; }
.tf-col { min-width:0; }
.tf-sticky { position:sticky; top:96px; }
#jt-transform .tf-caption { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.14em; margin-top:12px; text-align:center; }
.tf-step { min-height:76vh; display:flex; flex-direction:column; justify-content:center; }
.tf-step:first-child { min-height:52vh; }
@media (max-width:900px){
  .tf-grid { grid-template-columns:1fr; }
  .tf-sticky { position:sticky; top:60px; z-index:2; background:#09090B; padding:8px 0; border-bottom:1px solid #211F1C; }
  .tf-step { min-height:auto; padding:30px 0; }
}
@media (prefers-reduced-motion:reduce){
  .tf-step, .tf-step:first-child { min-height:auto; padding:26px 0; }
  .tf-sticky { position:static; }
}

/* ═══════════════ Scope Studio (/build.html) ═══════════════ */
#scope-root .scope-grid { grid-template-columns: 1fr 1.05fr; }
#scope-questions { min-height: 420px; }
#scope-canvas { min-height: 300px; }

/* — guided selection — */
.scope-q { border:1px solid #211F1C; border-radius:14px; padding:16px 18px 18px; margin:0 0 14px; background:linear-gradient(180deg,#0C0C0E,#0A0A0C); animation:jt-fadeup .5s ease-out both; animation-delay:var(--qd); }
.scope-q legend { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8E8882; padding:0 6px; }
.scope-opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.scope-opt { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:#A8A29E; background:#0E0E10; border:1px solid #2A2826; border-radius:999px; padding:8px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:transform .12s cubic-bezier(.16,1,.3,1),color .15s,border-color .15s,background .15s,box-shadow .2s; }
.scope-opt::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--tc); opacity:.5; transition:opacity .15s,transform .15s; }
.scope-opt:hover { color:#F4F2EF; border-color:var(--tc); transform:translateY(-1px); }
.scope-opt:hover::before { opacity:1; }
.scope-opt:focus-visible { outline:2px solid var(--tc); outline-offset:2px; }
.scope-opt.is-on { color:#09090B; background:var(--tc); border-color:var(--tc); font-weight:600; box-shadow:0 0 20px -4px var(--tc); animation:scope-pop .22s cubic-bezier(.16,1.4,.3,1); }
.scope-opt.is-on::before { background:#09090B; opacity:.9; transform:scale(1.1); }
@keyframes scope-pop { 0%{transform:scale(.94)} 60%{transform:scale(1.05)} 100%{transform:scale(1)} }

/* — the live blueprint canvas — */
#scope-canvas { border:1px solid #2A2826; border-radius:18px; padding:20px; background:radial-gradient(120% 80% at 20% 0%,rgba(34,211,238,0.06),transparent 60%),radial-gradient(120% 90% at 90% 100%,rgba(167,139,250,0.06),transparent 60%),#0A0A0C; box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 24px 64px -34px rgba(0,0,0,0.85); position:relative; overflow:hidden; }
#scope-canvas::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.02; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); }
#scope-blueprint { min-height:200px; display:flex; align-items:center; justify-content:center; position:relative; }
.bp-phase { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.14em; }
.bp-label { font-family:'JetBrains Mono',monospace; font-size:8px; }
.bp-cap { font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.14em; }
.bp-node { transform-box:fill-box; transform-origin:center; animation:bp-in .5s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d); }
.bp-edge { animation:bp-fade .5s ease-out both; animation-delay:var(--d); }
.bp-halo { animation:bp-pulse 3s ease-in-out infinite; }
@keyframes bp-in { from{opacity:0;transform:scale(.55)} to{opacity:1;transform:scale(1)} }
@keyframes bp-fade { from{opacity:0} to{opacity:1} }
@keyframes bp-pulse { 0%,100%{opacity:.45} 50%{opacity:.95} }
.bp-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; min-height:200px; text-align:center; padding:20px; }
.bp-seed { width:14px; height:14px; border-radius:50%; background:#22d3ee; box-shadow:0 0 0 6px rgba(34,211,238,.12),0 0 24px rgba(34,211,238,.45); animation:bp-seed 2.4s ease-in-out infinite; }
@keyframes bp-seed { 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.28);opacity:1} }
.bp-empty p { margin:0; font-family:'JetBrains Mono',monospace; font-size:13px; color:#C4BFB8; line-height:1.7; }
.bp-empty p span { color:#8E8882; font-size:11.5px; }

/* — HUD (count · timeline · total) — */
#scope-hud:not(:empty) { margin-top:16px; padding-top:14px; border-top:1px solid #211F1C; }
.hud-row { display:flex; gap:22px; align-items:flex-end; flex-wrap:wrap; }
.hud-stat { display:flex; flex-direction:column; gap:3px; }
.hud-num { font-family:'Instrument Serif',Georgia,serif; font-size:clamp(1.6rem,2.7vw,2.2rem); line-height:1; color:#10b981; font-variant-numeric:tabular-nums; }
.hud-num.sm { font-size:1.25rem; color:#F4F2EF; }
.hud-num .hud-u { font-family:'JetBrains Mono',monospace; font-size:.5em; color:#8E8882; margin-left:3px; }
.hud-lbl { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#8E8882; }
.hud-bar { display:flex; gap:2px; height:6px; margin-top:14px; border-radius:999px; overflow:hidden; }
.hud-bar span { display:block; transition:flex .45s cubic-bezier(.16,1,.3,1); }

/* — the itemized plan artifact — */
#scope-plan:not(:empty) { margin-top:18px; padding-top:16px; border-top:1px solid #211F1C; }
.plan-phase { margin-top:14px; }
.plan-phase:first-child { margin-top:0; }
.plan-phase-h { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:8px; }
.pp-dot { width:6px; height:6px; border-radius:50%; }
.pp-band { margin-left:auto; color:#8E8882; }
.plan-item { display:flex; justify-content:space-between; gap:14px; padding:10px 12px; border-left:2px solid var(--tc); margin-top:8px; background:linear-gradient(90deg,color-mix(in oklab,var(--tc) 7%,transparent),transparent 45%); border-radius:0 8px 8px 0; transition:background .2s; }
.plan-item:hover { background:linear-gradient(90deg,color-mix(in oklab,var(--tc) 14%,transparent),transparent 55%); }
.pi-name { color:#F4F2EF; font-size:13.5px; }
.pi-why { color:#8E8882; font-size:11.5px; line-height:1.5; margin-top:2px; }
.pi-price { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#A8A29E; white-space:nowrap; text-align:right; }
.pi-eff { display:block; color:#8E8882; }
.plan-total { margin-top:18px; border-top:1px solid #2A2826; padding-top:14px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; }
.pt-num { font-family:'Instrument Serif',Georgia,serif; font-size:clamp(1.4rem,2.4vw,1.9rem); color:#10b981; }
.pt-lbl { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#8E8882; }

@media (max-width:900px){ #scope-root .scope-grid { grid-template-columns:1fr; } #scope-canvas { position:static; } }
@media (prefers-reduced-motion:reduce){
  .scope-q,.scope-opt.is-on,.bp-node,.bp-edge,.bp-halo,.bp-seed { animation:none !important; }
  .bp-node,.bp-edge { opacity:1 !important; }
}

/* — talk it through / quick questions toggle — */
.scope-mode-toggle { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; margin-top:28px; border:1px solid #2A2826; border-radius:999px; background:#0C0C0E; max-width:100%; }
.scope-mode-btn { font-family:'JetBrains Mono',monospace; font-size:12px; color:#8E8882; background:transparent; border:none; border-radius:999px; padding:9px 16px; cursor:pointer; transition:background .15s,color .15s; }
.scope-mode-btn:hover { color:#F4F2EF; }
.scope-mode-btn:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }
.scope-mode-btn[aria-pressed="true"] { background:#10b981; color:#09090B; font-weight:600; }

/* — AI chat panel (assets/scope-chat.mjs) — drives the same blueprint as .scope-q — */
.scope-chat { border:1px solid #211F1C; border-radius:14px; padding:16px; min-height:420px; display:flex; flex-direction:column; background:linear-gradient(180deg,#0C0C0E,#0A0A0C); box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px -28px rgba(0,0,0,0.6); }
.scope-chat[hidden] { display:none; }
.scope-chat-offline { font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.6; color:#F59E0B; background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.35); border-radius:10px; padding:11px 13px; margin-bottom:12px; }
.scope-chat-messages { display:flex; flex-direction:column; gap:12px; flex:1; min-height:220px; max-height:52vh; overflow-y:auto; scroll-behavior:smooth; padding-right:2px; }

/* bot turns render as an avatar + bubble row; user turns stay a lone right-aligned bubble */
.sc-row { display:flex; align-items:flex-end; gap:8px; max-width:92%; }
.sc-row-bot { align-self:flex-start; }
.sc-avatar {
  flex:0 0 auto; width:24px; height:24px; margin-bottom:1px; border-radius:7px; border:1px solid #2A2826;
  background:#0C0C0E; display:inline-flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.02em; color:#10b981;
}
.sc-bubble { max-width:100%; min-width:0; padding:10px 13px; font-size:13.5px; line-height:1.55; border-radius:14px; }
.sc-bot { background:#17161a; color:#E7E5E1; border:1px solid #221f24; border-radius:4px 14px 14px 14px; box-shadow:0 1px 0 rgba(255,255,255,0.02) inset; }
.sc-user { align-self:flex-end; max-width:90%; background:linear-gradient(135deg,#22d3ee,#0ea5b7); color:#04242a; border-radius:14px 14px 4px 14px; box-shadow:0 6px 18px -10px rgba(34,211,238,0.45); }
.sc-note { opacity:.85; font-style:italic; }

/* typewriter reveal — visible span animates, sr-only sibling gets one clean announcement */
.sc-bubble-visible { white-space:pre-wrap; }
.sc-bubble.sc-revealing .sc-bubble-visible::after {
  content:''; display:inline-block; width:2px; height:.95em; margin-left:2px; vertical-align:-0.12em;
  background:currentColor; opacity:.55; animation:sc-caret .9s steps(1) infinite;
}
@keyframes sc-caret { 50% { opacity:0; } }

/* bubble + typing-row entrance */
.sc-enter { animation:jt-fadeup .32s ease-out both; }

.scope-chat-form { display:flex; gap:8px; margin-top:12px; }
.scope-chat-form input { flex:1; min-width:0; font-family:'JetBrains Mono',monospace; font-size:13px; color:#F4F2EF; background:#0E0E10; border:1px solid #2A2826; border-radius:10px; padding:11px 13px; transition:border-color .15s; }
.scope-chat-form input:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }
.scope-chat-form input:disabled { opacity:.6; }

/* resume-conversation affordance (assets/scope-chat.mjs memory) */
.sc-resume {
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
  padding:9px 13px; border:1px solid rgba(34,211,238,0.25); border-radius:10px;
  background:rgba(34,211,238,0.06); animation:jt-fadeup .35s ease-out both;
}
.sc-resume-text { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#8FD9E8; }
.sc-resume-reset {
  flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8E8882; background:transparent;
  border:1px solid #2A2826; border-radius:999px; padding:5px 11px; cursor:pointer; transition:border-color .15s,color .15s;
}
.sc-resume-reset:hover { color:#F4F2EF; border-color:#8E8882; }
.sc-resume-reset:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }

/* — qualification confidence cue (strong/maybe fit) — */
.scope-fit { display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; padding:7px 13px; border-radius:999px; margin-bottom:14px; animation:jt-fadeup .4s ease-out both; }
.scope-fit[hidden] { display:none; }
.scope-fit::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.scope-fit.fit-strong { color:#10b981; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.35); }
.scope-fit.fit-maybe { color:#F59E0B; background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.35); }

/* — graceful disqualification panel (poor fit) — kind, specific, no hard sell */
.scope-disqualify { border:1px solid rgba(167,139,250,0.35); border-radius:14px; padding:16px 17px; margin-bottom:12px; background:linear-gradient(180deg,rgba(167,139,250,0.08),transparent); box-shadow:0 16px 32px -28px rgba(0,0,0,0.7); animation:jt-fadeup .4s ease-out both; }
.scope-disqualify[hidden] { display:none; }
.sd-heading { margin:0; font-size:14px; line-height:1.6; color:#F4F2EF; font-weight:600; }
.sd-reasons { margin:10px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.sd-reasons li { font-size:12.5px; line-height:1.55; color:#C4BFB8; }
.sd-note { margin:12px 0 0; font-size:12.5px; line-height:1.6; color:#8E8882; }
.sd-cta { display:inline-flex; margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:#a78bfa; border:1px solid #a78bfa; border-radius:999px; padding:9px 16px; transition:background .15s,color .15s; }
.sd-cta:hover { background:#a78bfa; color:#09090B; }
.sd-cta:focus-visible { outline:2px solid #a78bfa; outline-offset:2px; }

@media (prefers-reduced-motion:reduce){
  .scope-fit,.scope-disqualify,.sc-enter,.sc-resume,.sc-handoff { animation:none !important; }
  .sc-bubble.sc-revealing .sc-bubble-visible::after { animation:none; opacity:.35; }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width:900px){ .scope-chat { min-height:340px; } }

/* scope chat — typing indicator */
.sc-typing { display:inline-flex; gap:5px; align-items:center; }
.sc-typing .sc-dot { width:6px; height:6px; border-radius:50%; background:var(--dim,#A8A29E); opacity:.5; animation:sc-blink 1.2s infinite ease-in-out; }
.sc-typing .sc-dot:nth-child(2){ animation-delay:.18s; } .sc-typing .sc-dot:nth-child(3){ animation-delay:.36s; }
@keyframes sc-blink { 0%,80%,100%{ opacity:.25; transform:translateY(0);} 40%{ opacity:.9; transform:translateY(-2px);} }
@media (prefers-reduced-motion: reduce){ .sc-typing .sc-dot{ animation:none; } }
/* scope chat — handoff card */
.sc-handoff { margin-top:14px; padding:17px 18px; border:1px solid rgba(16,185,129,0.28); border-radius:12px; background:linear-gradient(180deg,rgba(16,185,129,0.07),var(--card,#0C0C0E) 65%); box-shadow:0 16px 32px -26px rgba(0,0,0,0.7); animation:jt-fadeup .35s ease-out both; }
.sc-handoff-copy { margin:0 0 12px; color:var(--ink,#F4F2EF); font-size:14px; line-height:1.6; }
.sc-handoff-form { display:flex; gap:8px; flex-wrap:wrap; }
.sc-handoff-form input { flex:1; min-width:200px; font-family:var(--mono,monospace); font-size:13px; color:var(--ink,#F4F2EF); background:#0E0E10; border:1px solid var(--line,#2A2826); border-radius:10px; padding:11px 13px; transition:border-color .15s; }
.sc-handoff-form input:focus-visible { outline:2px solid var(--cyan,#22d3ee); outline-offset:2px; }
.sc-handoff-status { margin-top:9px; font-family:var(--mono,monospace); font-size:12px; color:var(--faint,#8E8882); min-height:15px; }
.sc-handoff-talk { display:inline-block; margin-top:10px; font-family:var(--mono,monospace); font-size:12px; color:var(--purple,#a78bfa); }

/* ═══ voice receptionist demo (front-desk.html + assets/voice-receptionist.mjs) ═══ */
/* container reuses .scope-chat; transcript reuses .scope-chat-messages/.sc-* bubbles */
.vr-topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.vr-status { display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; color:#A8A29E; }
.vr-status-dot { width:8px; height:8px; border-radius:50%; background:#8E8882; flex-shrink:0; transition:background .2s; }
.vr-status[data-state="listening"] .vr-status-dot { background:#22d3ee; animation:jt-blink 1.1s ease-in-out infinite; }
.vr-status[data-state="thinking"] .vr-status-dot { background:#F59E0B; animation:jt-blink 1.1s ease-in-out infinite; }
.vr-status[data-state="speaking"] .vr-status-dot { background:#10b981; animation:jt-blink 1.1s ease-in-out infinite; }

.vr-mute-btn { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#8E8882; background:transparent; border:1px solid #2A2826; border-radius:999px; padding:7px 14px; cursor:pointer; transition:color .15s,border-color .15s; }
.vr-mute-btn:hover { color:#F4F2EF; border-color:#8E8882; }
.vr-mute-btn:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }
.vr-mute-btn[aria-pressed="true"] { color:#F59E0B; border-color:rgba(245,158,11,0.35); }
.vr-mute-btn[hidden] { display:none; }

.vr-controls { display:flex; flex-direction:column; align-items:center; gap:10px; margin:18px 0 14px; }
.vr-mic-btn {
  display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:999px; border:none;
  background:linear-gradient(135deg,#10b981,#0ea5b7); color:#052e22; font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer; box-shadow:0 10px 28px -14px rgba(16,185,129,0.55); transition:transform .15s,box-shadow .15s,background .2s;
}
.vr-mic-btn:hover { transform:translateY(-1px); box-shadow:0 14px 34px -14px rgba(16,185,129,0.7); }
.vr-mic-btn:focus-visible { outline:2px solid #10b981; outline-offset:3px; }
.vr-mic-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.vr-mic-btn[hidden] { display:none; }
.vr-mic-btn[data-listening="true"] { background:linear-gradient(135deg,#22d3ee,#0ea5b7); color:#04242a; animation:vr-pulse 1.6s ease-in-out infinite; }
.vr-mic-ico { font-size:18px; line-height:1; }
@keyframes vr-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(34,211,238,0.45); } 50% { box-shadow:0 0 0 14px rgba(34,211,238,0); } }
.vr-voice-note { margin:0; font-size:12px; color:#8E8882; text-align:center; }
.vr-voice-note[hidden] { display:none; }
.vr-honesty { margin-top:16px; font-size:12px; line-height:1.6; color:#8E8882; max-width:64ch; }

/* ═══ Scope Studio voice mode (build.html + assets/scope-chat.mjs) ═══ */
/* reuses .vr-status / .vr-mute-btn / .vr-controls / .vr-mic-btn / .vr-voice-note above */
.sc-voice-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.sc-voice-toggle-btn {
  display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  letter-spacing:.03em; color:#A8A29E; background:#0C0C0E; border:1px solid #2A2826; border-radius:999px;
  padding:8px 15px; cursor:pointer; transition:color .15s,border-color .15s,background .2s,box-shadow .2s;
}
.sc-voice-toggle-btn:hover { color:#F4F2EF; border-color:#8E8882; }
.sc-voice-toggle-btn:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }
.sc-voice-toggle-btn[aria-pressed="true"] {
  color:#052e22; background:linear-gradient(135deg,#10b981,#0ea5b7); border-color:transparent; font-weight:600;
  box-shadow:0 8px 22px -12px rgba(16,185,129,0.6);
}
.sc-voice-toggle-btn[hidden] { display:none; }
.sc-voice-toggle-ico { font-size:14px; line-height:1; }

.sc-voice-panel { margin-bottom:14px; animation:jt-fadeup .3s ease-out both; }
.sc-voice-panel[hidden] { display:none; }

/* premium listening ring — transform/opacity only, layered on top of .vr-mic-btn's own pulse */
#scope-voice-mic { position:relative; }
#scope-voice-mic::after {
  content:""; position:absolute; inset:-6px; border-radius:999px; border:1px solid rgba(34,211,238,0.5);
  opacity:0; transform:scale(1); pointer-events:none;
}
#scope-voice-mic[data-listening="true"]::after { animation:sc-mic-ring 1.6s ease-out infinite; }
@keyframes sc-mic-ring { 0% { opacity:.65; transform:scale(1); } 100% { opacity:0; transform:scale(1.4); } }

/* ═══════════════ P2 — risk-reversal + capacity (shared component, every page) ═══════════════ */
/* ─── guarantee / risk-reversal block — reused near every primary CTA ─── */
.jt-guarantee {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 14px; padding: 12px 16px;
  border: 1px solid rgba(16,185,129,0.22); border-radius: 10px;
  background: rgba(16,185,129,0.045);
  font-size: 12.5px; line-height: 1.65; color: #A8A29E; max-width: 58ch;
}
.jt-guarantee .g-mk { color: #10b981; font-family: 'JetBrains Mono', monospace; font-size: 12px; flex-shrink: 0; line-height: 1.65; }
.jt-guarantee b, .jt-guarantee strong { color: #F4F2EF; font-weight: 600; }

/* ─── capacity line — identical wording everywhere; edit the quarter in one place per instance ─── */
.jt-capacity {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em;
  color: #10b981; border: 1px solid rgba(16,185,129,0.3); border-radius: 999px;
  padding: 6px 13px; background: rgba(16,185,129,0.05); margin-top: 14px;
}
.jt-capacity .dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; flex-shrink: 0; animation: jt-blink 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .jt-capacity .dot { animation: none; } }

/* ═══════════════ P3.3 — restrained depth (compositor-friendly: transform/opacity/box-shadow) ═══════════════ */
.svc-card { box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; }
.svc-card:hover { box-shadow: 0 16px 40px -14px rgba(9,9,11,0.55), 0 0 0 1px rgba(167,139,250,0.14); }
.jt-hero-wash {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 55% at 18% 0%, rgba(34,211,238,0.07), transparent 60%),
    radial-gradient(55% 60% at 92% 15%, rgba(167,139,250,0.06), transparent 60%);
}

/* ═══════════════ P6 — client portal (milestones / approvals / payment) ═══════════════ */
.portal-wrap { max-width: 880px; margin: 0 auto; padding: clamp(40px,6vw,80px) clamp(18px,4vw,40px); }
.portal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.portal-title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(2rem,4.2vw,3rem); letter-spacing: -0.02em; line-height: 1.05; color: #F4F2EF; margin: 10px 0 0; }
.portal-sub { color: #A8A29E; font-size: 14.5px; margin-top: 8px; }

/* project status chip */
.portal-chip { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; border: 1px solid; white-space: nowrap; flex-shrink: 0; }
.portal-chip .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.portal-chip.st-kickoff { color: #a78bfa; border-color: rgba(167,139,250,0.35); background: rgba(167,139,250,0.06); }
.portal-chip.st-kickoff .dot { background: #a78bfa; }
.portal-chip.st-active, .portal-chip.st-in_progress { color: #22d3ee; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.06); }
.portal-chip.st-active .dot, .portal-chip.st-in_progress .dot { background: #22d3ee; }
.portal-chip.st-delivered, .portal-chip.st-complete, .portal-chip.st-completed { color: #10b981; border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.06); }
.portal-chip.st-delivered .dot, .portal-chip.st-complete .dot, .portal-chip.st-completed .dot { background: #10b981; }

.portal-card { border: 1px solid #2A2826; background: #0C0C0E; border-radius: 16px; padding: clamp(20px,4vw,30px); margin-top: 22px; box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; }
.portal-card h2.portal-card-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8E8882; margin: 0 0 16px; }

/* the plan they bought — grouped, compact, display-only */
.portal-phase + .portal-phase { margin-top: 16px; }
.portal-phase h3 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #22d3ee; margin: 0 0 8px; }
.portal-plan-item { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-top: 1px solid #2A2826; padding: 10px 0; font-size: 14px; }
.portal-plan-item:first-child { border-top: none; padding-top: 0; }
.portal-plan-item .nm { color: #F4F2EF; }
.portal-plan-item .tk { color: #8E8882; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; }

/* ─── milestone timeline: the centerpiece ─── */
.portal-timeline { position: relative; margin-top: 6px; }
.portal-ms { position: relative; padding: 0 0 34px 44px; }
.portal-ms:last-child { padding-bottom: 2px; }
.portal-ms::before {
  content: ""; position: absolute; left: 13px; top: 28px; bottom: -6px; width: 1px; background: #2A2826;
}
.portal-ms:last-child::before { display: none; }
.portal-ms-dot {
  position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  border: 1px solid #2A2826; background: #0C0C0E; color: #8E8882;
}
.portal-ms.st-in_progress .portal-ms-dot { border-color: rgba(34,211,238,0.5); color: #22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,0.08); }
.portal-ms.st-delivered .portal-ms-dot { border-color: rgba(245,158,11,0.5); color: #F59E0B; box-shadow: 0 0 0 4px rgba(245,158,11,0.08); }
.portal-ms.st-approved .portal-ms-dot { border-color: rgba(16,185,129,0.5); color: #10b981; background: rgba(16,185,129,0.1); box-shadow: 0 0 0 4px rgba(16,185,129,0.08); }
.portal-ms-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.portal-ms-title { font-size: 16px; font-weight: 600; color: #F4F2EF; }
.portal-ms-amt { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: #F4F2EF; font-weight: 600; white-space: nowrap; }
.portal-ms-deliverables { margin-top: 10px; color: #A8A29E; font-size: 13.5px; line-height: 1.7; }
.portal-ms-deliverables div + div { margin-top: 3px; }

.portal-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid; margin-top: 8px; }
.portal-badge.st-pending { color: #8E8882; border-color: #2A2826; background: rgba(142,136,130,0.06); }
.portal-badge.st-in_progress { color: #22d3ee; border-color: rgba(34,211,238,0.35); background: rgba(34,211,238,0.06); }
.portal-badge.st-delivered { color: #F59E0B; border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.06); }
.portal-badge.st-approved { color: #10b981; border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.06); }

/* approve control — shown only on a delivered milestone */
.portal-approve { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #2A2826; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.portal-approve label { display: block; }
.portal-approve span.lbl-text { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #8E8882; margin-bottom: 6px; }
.portal-approve input[type="text"] { background: #0F0F13; border: 1px solid #2A2826; border-radius: 9px; padding: 10px 12px; font-size: 13.5px; color: #F4F2EF; font-family: inherit; outline: none; min-width: 200px; }
.portal-approve input[type="text"]:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.portal-approve input[type="text"]:disabled { opacity: 0.5; }
.portal-approve button { flex-shrink: 0; }
.portal-approve-status { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8E8882; margin-top: 4px; min-height: 14px; }
.portal-approve-status.err { color: #f43f5e; }
.portal-approve-status.ok { color: #10b981; }

/* payment summary */
.portal-pay-row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid #2A2826; font-size: 14.5px; }
.portal-pay-row:first-of-type { border-top: none; padding-top: 0; }
.portal-pay-row .lbl { color: #A8A29E; }
.portal-pay-row .val { font-family: 'JetBrains Mono', monospace; color: #F4F2EF; font-weight: 600; }

/* agreement card */
.portal-agreement-link { display: inline-flex; align-items: center; gap: 8px; color: #22d3ee; font-weight: 600; font-size: 14.5px; }
.portal-agreement-status { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8E8882; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.06em; }

.portal-empty { text-align: center; padding: 60px 20px; }