/* Systemiz site — composition layer on top of tokens */
@import url("./tokens.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg-2); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
::selection { background: var(--brand); color: #fff; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.page { min-height: 100vh; background: var(--ink-050); position: relative; overflow-x: hidden; }

/* Atmospheric backdrops ----------------------------------------- */
.bg-grain {
  position: fixed; inset: 0;
  background-image: url("../assets/background-grain.png");
  background-size: cover; background-position: center;
  opacity: 0.45; pointer-events: none; z-index: 0;
  mix-blend-mode: screen;
}
.bg-cols {
  position: fixed; inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.022) 0,
    rgba(255,255,255,0.022) 1px,
    transparent 1px,
    transparent 96px
  );
  pointer-events: none; z-index: 0;
}
.bg-vignette {
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(239,58,76,0.10), transparent 55%),
    radial-gradient(900px 600px at 80% 110%, rgba(239,58,76,0.06), transparent 60%);
  pointer-events: none; z-index: 0;
}

.shell { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.shell-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

/* ---------- NAV ---------- */
.nav-wrap { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(5,5,5,0.72); }
.nav {
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  position: relative; z-index: 2;
}
.nav-left { display: flex; align-items: center; gap: 12px; }
.nav-left img.nav-wordmark { height: 22px; width: auto; display: block; }
.nav-left img:not(.nav-wordmark) { height: 24px; }
.nav-wm {
  font: 300 17px/1 var(--font-sans);
  letter-spacing: 0.18em; color: var(--fg-1); text-transform: uppercase;
}
.nav-wm .torii { color: var(--brand); font-weight: 400; }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
  font: 500 13px/1 var(--font-sans);
  color: var(--fg-3); cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.nav-links a:hover { color: var(--fg-1); }
.nav-cta {
  height: 38px; padding: 0 20px;
  border-radius: 999px;
  background: var(--brand);
  border: 1.5px solid var(--brand);
  color: #0a0a0a;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  box-shadow: 0 0 0 0 rgba(239,58,76,0); 
}
.nav-cta:hover {
  background: var(--red-400);
  color: #0a0a0a;
  box-shadow: 0 0 0 1px rgba(239,58,76,0.45), 0 0 28px rgba(239,58,76,0.35);
  transform: translateY(-1px);
}
.hairline { height: 1px; background: var(--hairline-red); position: relative; z-index: 2; }
@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ---------- HERO ---------- */
.hero {
  padding: 96px 0 80px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.hero-bg-mark {
  position: absolute;
  top: 50%;
  width: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.10;
  z-index: 0;
  filter: blur(0.3px);
}
.hero-bg-mark.hero-bg-notion {
  left: 8%;
  height: 240px;
  transform: translateY(-46%) rotate(-6deg);
}
.hero-bg-mark.hero-bg-claude {
  right: 9%;
  height: 270px;
  transform: translateY(-50%) rotate(8deg);
}
.hero .shell { position: relative; z-index: 2; }
.hero .ticker { position: relative; z-index: 2; }
@media (max-width: 1100px) {
  .hero-bg-mark.hero-bg-notion { height: 165px; left: 2%; opacity: 0.08; }
  .hero-bg-mark.hero-bg-claude { height: 180px; right: 2%; opacity: 0.08; }
}
@media (max-width: 720px) {
  .hero-bg-mark { display: none; }
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 32px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(239, 58, 76, 0.08);
  border: 1px solid rgba(239, 58, 76, 0.22);
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
}
.hero .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(239,58,76,0.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,58,76,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(239,58,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,58,76,0); }
}

.hero h1 {
  font: 700 clamp(46px, 7vw, 92px)/1.02 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--fg-1);
  margin: 0 auto;
  max-width: 980px;
  text-wrap: balance;
}
.hero h1 .accent { font-weight: 700; color: var(--brand); }
.hero h1 .dim { color: var(--fg-3); font-weight: 600; }
.hero h1 em { font-style: normal; font-weight: 700; }

/* "Built on Notion + Claude" pairing — under the hero bullets */
.brand-pair {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.brand-pair .bp-label {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-5);
}
.brand-pair .bp-marks {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--border-faint);
  height: 26px;
}
.brand-pair .bp-mark {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.92;
  transition: opacity 200ms var(--ease-out);
}
.brand-pair .bp-mark:hover { opacity: 1; }
.brand-pair .bp-plus {
  font: 200 16px/1 var(--font-sans);
  color: var(--fg-5);
}

.hero .sub {
  margin: 32px auto 0;
  max-width: 640px;
  font: 400 17px/1.55 var(--font-sans);
  color: var(--fg-3);
  text-wrap: pretty;
}
.hero .sub strong { color: var(--fg-1); font-weight: 500; }

.hero-cta-row {
  margin: 44px auto 0;
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.btn {
  height: 52px; padding: 0 28px;
  border-radius: 999px;
  font: 600 14px/1 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  display: inline-flex; align-items: center; gap: 10px;
  border: none;
}
.btn-primary {
  background: var(--brand);
  color: #0a0a0a;
  box-shadow: 0 8px 24px rgba(239,58,76,0.25), 0 0 0 1px rgba(239,58,76,0.0);
}
.btn-primary:hover {
  background: var(--red-400);
  color: #0a0a0a;
  box-shadow: 0 12px 32px rgba(239,58,76,0.4), 0 0 0 1px rgba(239,58,76,0.6);
  transform: translateY(-2px);
}
.btn-ghost {
  background: #1a1a1a;
  color: var(--fg-1);
  border: 1px solid var(--border-medium);
}
.btn-ghost:hover { color: var(--fg-1); border-color: var(--border-strong); background: #242424; }
.btn .arrow { transition: transform 200ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

.hero-meta {
  margin: 24px auto 0;
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--fg-5);
  text-transform: uppercase;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .dot-red { width: 4px; height: 4px; border-radius: 999px; background: var(--brand); }

/* ---------- LOGO TICKER (trusted by) ---------- */
.ticker-label {
  margin: 90px auto 0;
  display: flex; align-items: center; gap: 16px; justify-content: center;
  position: relative; z-index: 2;
}
.ticker-label .tl-text {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-5);
  white-space: nowrap;
}
.ticker-label .tl-line {
  height: 1px;
  flex: 0 1 60px;
  background: linear-gradient(90deg, transparent, var(--border-faint), transparent);
}
.ticker {
  margin: 14px 0 0;
  padding: 28px 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  overflow: hidden;
  position: relative;
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--ink-050), transparent); }
.ticker::after  { right: 0; background: linear-gradient(-90deg, var(--ink-050), transparent); }
.ticker-track {
  display: flex; gap: 64px;
  animation: ticker 40s linear infinite;
  width: max-content;
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-5);
  white-space: nowrap;
}
.ticker-item .ico { color: var(--fg-4); }
.ticker-item .ico svg { width: 16px; height: 16px; stroke-width: 1.5; }
.ticker-item .logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
}
.ticker-item .logo-mark img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  opacity: 1;
}
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ---------- SECTIONS GENERIC ---------- */
.section {
  padding: 96px 0;
  position: relative; z-index: 1;
}

/* ============================================================
   v18 — Stack: hint card under the layers, pointing to the quiz
   on the right. Helps people understand the split.
   ============================================================ */
.layers-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-faint);
  border-radius: 12px;
}
.layers-hint .lh-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.layers-hint .lh-eyebrow {
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
}
.layers-hint .lh-line {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--fg-3);
}
.layers-hint .lh-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(239,58,76,0.10);
  border: 1px solid rgba(239,58,76,0.32);
  color: var(--brand);
  animation: layers-hint-pulse 2.2s ease-in-out infinite;
}
@keyframes layers-hint-pulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@media (max-width: 900px) {
  .layers-hint { display: none; } /* on mobile the quiz sits below anyway */
}

/* ============================================================
   v17 — Stack: brackets removed entirely. Only the small logo
   mark stays beside each layer group, at a natural size with a
   tighter column gap.
   ============================================================ */
.lg-curly { display: none !important; }
.lg-bracket {
  /* container for just the logo mark now */
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.lg-bracket::before,
.lg-bracket::after { content: none !important; background: none !important; }

.lg-bracket-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px !important;
  height: 52px !important;
}
.lg-bracket-mark .layer-tool-img {
  width: 50px !important;
  height: 50px !important;
  object-fit: contain;
}

/* No-op: kept so existing rules don't blow away v24 sizes.  */
.lg-bracket-mark-legacy {}

/* v25 — push logos toward the right edge of the card and shrink them
   slightly. The bracket sits flush to the card's interior right edge
   (no right padding inside the bracket) and the logo aligns to that
   right edge, balancing visually against the card's outer right
   padding (~22px). Logo also gets a gentle sway animation. */
.layer-group {
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  grid-template-columns: none !important;
}
.layer-group .lg-bars { flex: 1 1 auto; min-width: 0; }
.layer-group .lg-bracket {
  flex: 0 0 auto;
  /* v26 — shrunk by 10px so bars get 5px more on each end; padding-right
     dialed to 2px so logo sits centered in the smaller right-side gap.
     Result: 28px on each side of the logo. */
  width: 70px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2px 0 0 !important;
  border: 0 !important;
  background: none !important;
}

.lg-bracket-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  animation: layer-logo-sway 4.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.lg-bracket-mark .layer-tool-img {
  width: 42px !important;
  height: 42px !important;
  object-fit: contain;
}

/* Stagger the two logos so they don't sway in sync */
.layer-group.lg-claude .lg-bracket-mark { animation-delay: -2.1s; }

@keyframes layer-logo-sway {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .lg-bracket-mark { animation: none !important; }
}

@media (max-width: 540px) {
  .layer-group { grid-template-columns: 1fr !important; }
  .lg-bracket { justify-content: flex-start; }
}

/* ============================================================
   v17 — Claude card #3: REVERT to the red version (undo the
   v16 neutral override).
   ============================================================ */
.tsys-card-claude {
  border-color: rgba(239,58,76,0.22) !important;
  background:
    linear-gradient(180deg, rgba(239,58,76,0.05), transparent 60%),
    var(--surface-card) !important;
}
.tsys-card-claude .tsys-num { color: var(--brand) !important; opacity: 0.7; }
.tsys-card-claude .tsys-tag { color: var(--fg-4) !important; }
.tsys-callout-claude {
  background: rgba(239,58,76,0.08) !important;
  border-color: rgba(239,58,76,0.26) !important;
}
.tsys-callout-claude .tsys-callout-name { color: var(--fg-1) !important; }

/* ============================================================
   Testimonials section
   ============================================================ */
.testimonials-section { position: relative; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}
.testimonial {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-faint);
  border-radius: 14px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testimonial-text {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
    var(--surface-card);
}
.testimonial-quote-mark {
  position: absolute;
  top: 14px; right: 22px;
  font: 700 56px/1 Georgia, serif;
  color: var(--brand);
  opacity: 0.32;
  pointer-events: none;
}
.testimonial-quote {
  font: 400 16px/1.55 var(--font-sans);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}
.testimonial-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.testimonial-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(239,58,76,0.20), rgba(239,58,76,0.08));
  border: 1px solid rgba(239,58,76,0.32);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--fg-1);
}
.testimonial-avatar-img {
  padding: 0;
  background: none;
  object-fit: cover;
  object-position: center;
}
.testimonial-id {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.testimonial-name {
  font: 600 13.5px/1.2 var(--font-sans);
  color: var(--fg-1);
}
.testimonial-role {
  font: 400 12px/1.2 var(--font-sans);
  color: var(--fg-4);
}

/* Video card */
.testimonial-video { padding: 0; overflow: hidden; }
.testimonial-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #050505;
}
.testimonial-video-thumb {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(239,58,76,0.10), transparent 60%),
    #050505;
  display: flex; align-items: center; justify-content: center;
}
.testimonial-play {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  width: 64px; height: 64px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--fg-1);
  transition: background 160ms, transform 160ms;
}
.testimonial-play:hover {
  background: rgba(239,58,76,0.18);
  border-color: rgba(239,58,76,0.42);
  transform: scale(1.04);
}
.testimonial-video-badge {
  position: absolute;
  top: 14px; left: 14px;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-1);
  background: rgba(0,0,0,0.5);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
}
.testimonial-video-el {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #050505;
  display: block;
  border: 0;
}
.testimonial-video .testimonial-video-badge { z-index: 2; pointer-events: none; }
.testimonial-video .testimonial-foot {
  padding: 18px 24px 20px;
}

@media (max-width: 760px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Testimonials — sliding "wall of proof" (two auto-scrolling rows)
   + click-to-open modal. Compact, reads as abundant.
   ============================================================ */
.tm-proof {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  margin: -32px auto 48px;
}
.tm-proof-avatars { display: flex; align-items: center; }
.tm-proof-avatars .tm-pa {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 2px solid var(--ink-050);
  object-fit: cover;
  margin-left: -10px;
  background: #1a1a1a;
}
.tm-proof-avatars .tm-pa:first-child { margin-left: 0; }
.tm-proof-avatars .tm-pa-more {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -10px;
  font: 600 11px/1 var(--font-sans);
  color: var(--fg-2);
  background: rgba(239,58,76,0.16);
  border-color: rgba(239,58,76,0.30) !important;
}
.tm-proof-text { display: flex; flex-direction: column; gap: 3px; }
.tm-proof-stars {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--brand);
}
.tm-proof-stars svg { width: 14px; height: 14px; }
.tm-proof-stars .tm-rating {
  margin-left: 6px;
  font: 700 13px/1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.tm-proof-sub {
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0.01em;
}

.tm-rail {
  position: relative;
  display: flex; flex-direction: column; gap: 18px;
  margin: 0 -32px;            /* bleed to shell edges so fades sit at viewport */
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tm-row { overflow: hidden; }
.tm-track {
  display: flex; gap: 18px; width: max-content;
  will-change: transform;
}
.tm-track.tm-anim { animation: tm-scroll linear infinite; }
.tm-row:hover .tm-track.tm-anim,
.tm-track.tm-anim:focus-within { animation-play-state: paused; }
.tm-track.tm-rev { animation-direction: reverse; }
@keyframes tm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tm-track.tm-anim { animation: none; }
  .tm-row { overflow-x: auto; scrollbar-width: none; }
  .tm-row::-webkit-scrollbar { display: none; }
}

.tm-card {
  flex: 0 0 360px;
  width: 360px;
  height: 196px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
    var(--surface-card);
  border: 1px solid var(--border-faint);
  border-radius: 14px;
  padding: 22px 24px 18px;
  display: flex; flex-direction: column; gap: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
.tm-card:hover {
  border-color: var(--border-medium);
  background: var(--surface-card-hover);
  transform: translateY(-2px);
}
.tm-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tm-card-quote {
  flex: 1 1 auto;
  margin: 0;
  font: 400 14px/1.55 var(--font-sans);
  color: var(--fg-2);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.tm-card-foot {
  display: flex; align-items: center; gap: 11px;
  flex-shrink: 0;
}
.tm-card-foot .tm-av {
  width: 34px; height: 34px; border-radius: 999px;
  object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(239,58,76,0.20), rgba(239,58,76,0.08));
  border: 1px solid rgba(239,58,76,0.30);
}
.tm-card-foot .tm-av-mono {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font-sans); color: var(--fg-1); letter-spacing: 0.04em;
}
.tm-card-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-card-name { font: 600 13px/1.2 var(--font-sans); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-card-role { font: 400 11.5px/1.2 var(--font-sans); color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-card-open {
  position: absolute; top: 16px; right: 16px;
  color: var(--fg-5);
  opacity: 0; transform: translateY(-2px);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), color 180ms var(--ease-out);
}
.tm-card-open svg { width: 15px; height: 15px; display: block; }
.tm-card:hover .tm-card-open { opacity: 1; transform: translateY(0); color: var(--brand); }

@media (max-width: 600px) {
  .tm-card { flex-basis: 78vw; width: 78vw; height: 200px; }
}

/* ----- Testimonial modal ----- */
.tm-modal-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: tm-fade 200ms var(--ease-out);
}
@keyframes tm-fade { from { opacity: 0; } to { opacity: 1; } }
.tm-modal {
  position: relative;
  max-width: 560px; width: 100%;
  background:
    linear-gradient(180deg, rgba(239,58,76,0.05), transparent 30%),
    var(--surface-card);
  border: 1px solid var(--border-medium);
  border-radius: 18px;
  padding: 40px 40px 32px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  animation: tm-rise 240ms var(--ease-out);
}
@keyframes tm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.tm-modal-mark { font: 700 64px/0.7 Georgia, serif; color: var(--brand); opacity: 0.3; }
.tm-modal-quote {
  margin: 14px 0 28px;
  font: 400 18px/1.6 var(--font-sans);
  color: var(--fg-1);
  text-wrap: pretty;
}
.tm-modal-foot { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border-faint); }
.tm-modal-foot .tm-av {
  width: 46px; height: 46px; border-radius: 999px; object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(239,58,76,0.20), rgba(239,58,76,0.08));
  border: 1px solid rgba(239,58,76,0.30);
}
.tm-modal-foot .tm-av-mono { display: inline-flex; align-items: center; justify-content: center; font: 600 15px/1 var(--font-sans); color: var(--fg-1); }
.tm-modal-name { font: 600 16px/1.2 var(--font-sans); color: var(--fg-1); }
.tm-modal-role { font: 400 13px/1.3 var(--font-sans); color: var(--fg-4); margin-top: 3px; }
.tm-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
  color: var(--fg-3); cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.tm-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--fg-1); }
.tm-modal-close svg { width: 16px; height: 16px; }

/* Shared section CTA panel (under Outcome, Testimonials, Fit).
   Mirrors the dashboard .ws-cta panel — the most engaging CTA on the page. */
.cta-panel {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  margin: 64px auto 0;
  max-width: 720px;
  padding: 40px 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, #161616 0%, #0c0c0c 100%);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 200%;
  background: radial-gradient(closest-side, rgba(239,58,76,0.16), rgba(239,58,76,0) 70%);
  pointer-events: none;
}
.cta-panel-copy { width: 100%; position: relative; z-index: 1; }
.cta-panel-eyebrow {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.cta-panel-title {
  font: 700 26px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0 0 10px;
  text-wrap: balance;
}
.cta-panel-sub {
  font: 400 14.5px/1.55 var(--font-sans);
  color: var(--fg-3);
  margin: 0 auto;
  max-width: 540px;
  text-wrap: pretty;
}
.cta-panel-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--brand);
  color: #0a0a0a;
  padding: 14px 24px;
  border-radius: 10px;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
  position: relative;
  z-index: 1;
  animation: ws-cta-btn-pulse 2.4s ease-out infinite;
}
.cta-panel-btn:hover {
  background: #ff5060;
  transform: translateY(-2px) scale(1.04);
  animation: none;
  box-shadow: 0 14px 32px rgba(239,58,76,0.55), 0 0 0 1px rgba(239,58,76,0.5);
}
.cta-panel-btn svg, .cta-panel-btn i { width: 16px; height: 16px; stroke-width: 3; }
@media (max-width: 720px) {
  .cta-panel { padding: 28px 20px; gap: 20px; margin-top: 48px; }
  .cta-panel-title { font-size: 20px; }
  .cta-panel-btn { width: 100%; justify-content: center; }
}

#why-notion-claude { padding-bottom: 48px; }

/* ============================================================
   v15 — 5 Symptoms eyebrow: brand-red, center aligned, bracket-style
   rules on each side ( ─── Label ─── ).
   ============================================================ */
.symptom-stack-label {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 16px;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand);
  text-align: center;
}
.symptom-stack-label .ssl-rule {
  flex: 1 1 auto; height: 1px; max-width: 70px;
  background: linear-gradient(90deg, transparent, rgba(239,58,76,0.40), transparent);
}
.symptom-stack-label .ssl-text { flex: 0 0 auto; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.section-head .eyebrow {
  display: inline-block; margin-bottom: 20px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brand);
}
.section-head h2 {
  font: 200 clamp(36px, 4.6vw, 60px)/1.08 var(--font-sans);
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.section-head h2 .dim { color: var(--fg-4); font-weight: 200; }
.section-head h2 .accent { color: var(--brand); font-weight: 300; }
.section-head h2 .hd-em { font-weight: 500; color: var(--fg-1); letter-spacing: -0.025em; }
.section-head .lede .lede-em { font-weight: 600; color: var(--fg-1); }
.section-head .lede {
  margin: 24px auto 0;
  max-width: 580px;
  font: 400 16px/1.6 var(--font-sans);
  color: var(--fg-3);
  text-wrap: pretty;
}
#founders .section-head .lede {
  max-width: 660px;
  text-wrap: balance;
}

/* ---------- PROBLEM / Stuck ---------- */
.stuck {
  position: relative;
  margin: 0 auto;
  max-width: 1080px;
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: 48px;
  align-items: center;
}
.stuck-copy {
  max-width: 460px;
}
.stuck-copy h3 {
  font: 200 clamp(28px, 3.1vw, 38px)/1.1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg-1); margin: 0 0 18px;
  text-wrap: balance;
}
.stuck-copy h3 strong { font-weight: 300; color: var(--brand); }
.stuck-copy p { font: 400 15px/1.6 var(--font-sans); color: var(--fg-3); margin: 0 0 12px; }
.stuck-copy p:last-of-type { margin-bottom: 20px; }
.stuck-copy .signature {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-faint);
  font: 400 14px/1.5 var(--font-sans);
  color: var(--fg-4);
  font-style: italic;
}

.symptom-stack {
  /* Compacted: tighter rhythm so the right column hugs the copy column height */
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.symptom {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  transition: all 320ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.symptom::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--brand); opacity: 0; transition: opacity 240ms var(--ease-out);
}
.symptom:hover {
  border-color: var(--border-medium); background: var(--surface-card-hover);
  transform: translateX(4px);
}
.symptom:hover::before { opacity: 1; }
.symptom .num {
  font: 200 22px/1 var(--font-sans);
  color: var(--fg-5);
  letter-spacing: -0.02em;
  width: 28px; flex-shrink: 0;
}
.symptom .ico {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(239,58,76,0.08);
  color: var(--brand);
}
.symptom .ico svg { width: 16px; height: 16px; stroke-width: 1.5; }
.symptom .body { flex: 1; min-width: 0; }
.symptom .title {
  font: 600 14px/1.3 var(--font-sans);
  color: var(--fg-1);
  margin-bottom: 2px;
}
.symptom .desc {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--fg-4);
}

@media (max-width: 880px) {
  .stuck { grid-template-columns: 1fr; }
}

/* ---------- OUTCOME / Cognitive Freedom ---------- */
.section-outcome {
  position: relative;
}
.section-outcome::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 50% 50%, rgba(239,58,76,0.09), transparent 65%);
  pointer-events: none;
}
.eyebrow-soft {
  display: inline-block;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 20px;
}
.caps-accent {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.outcome-stage {
  position: relative;
  max-width: 1080px;
  margin: 0 auto 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.outcome-quote {
  position: relative;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--brand);
  max-width: 38ch;
  justify-self: center;
  display: flex;
  align-items: center;
}
.outcome-quote p {
  font: 400 clamp(15px, 1.3vw, 17px)/1.55 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--fg-3);
  margin: 0;
  text-wrap: pretty;
}
.outcome-quote p strong {
  font-weight: 600;
  color: var(--fg-1);
}
.outcome-quote p em {
  font-style: italic;
  color: var(--brand);
  font-weight: 300;
}

.outcome-split {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.osplit-row { display: flex; flex-direction: column; gap: 10px; }
.osplit-label {
  display: flex; align-items: baseline; gap: 12px;
}
.osplit-tag {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--fg-4);
  border: 1px solid var(--border-faint);
}
.osplit-tag.tag-after {
  background: rgba(239,58,76,0.12);
  color: var(--brand);
  border-color: rgba(239,58,76,0.28);
}
.osplit-headline {
  font: 500 14px/1 var(--font-sans);
  color: var(--fg-2);
  letter-spacing: -0.01em;
}
.osplit-bar {
  position: relative;
  display: flex;
  height: 68px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(239,58,76,0.45);
  background: #0c0c0e;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 0 0 1px rgba(239,58,76,0.08),
    0 14px 32px -18px rgba(0,0,0,0.6);
  transition: border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.osplit-row:hover .osplit-bar {
  border-color: rgba(239,58,76,0.7);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 0 0 1px rgba(239,58,76,0.18),
    0 20px 44px -18px rgba(239,58,76,0.4);
  transform: translateY(-1px);
}
.osplit-fill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 14px;
  position: relative;
  min-width: 0;
}
.osplit-fill .osplit-pct {
  font: 200 22px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.osplit-fill .osplit-cap {
  font: 500 9.5px/1.2 var(--font-sans);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-4);
  margin-top: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.osplit-fill.osplit-in {
  background: #141416;
  color: var(--fg-2);
}
.osplit-fill.osplit-in .osplit-pct { color: #fff; }
.osplit-fill.osplit-in .osplit-cap { color: var(--fg-3); }
.osplit-fill.osplit-on {
  background: linear-gradient(135deg, rgba(239,58,76,0.42), rgba(239,58,76,0.62));
}
.osplit-fill.osplit-on .osplit-pct { color: #fff; }
.osplit-fill.osplit-on .osplit-cap { color: rgba(255,255,255,0.92); }
.osplit-fill + .osplit-fill {
  border-left: 1px solid rgba(239,58,76,0.32);
}

.outcome-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.opillar {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.opillar:hover {
  border-color: var(--border-medium);
  transform: translateY(-2px);
}
.opillar-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(239,58,76,0.10);
  color: var(--brand);
  border: 1px solid rgba(239,58,76,0.22);
}
.opillar-ico svg { width: 18px; height: 18px; stroke-width: 1.6; }
.opillar-title {
  font: 500 18px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.opillar-desc {
  font: 400 14px/1.6 var(--font-sans);
  color: var(--fg-3);
  text-wrap: pretty;
}

@media (max-width: 880px) {
  .outcome-stage { grid-template-columns: 1fr; gap: 32px; }
  .outcome-quote { padding: 4px 0 4px 20px; max-width: 100%; }
  .outcome-pillars { grid-template-columns: 1fr; }
  .osplit-fill .osplit-cap { display: none; }
}

/* ---------- WHAT WE BUILD (system grid) ---------- */
.system-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  max-width: 1100px; margin: 0 auto;
}
.sys-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all 280ms var(--ease-out);
  display: flex; flex-direction: column;
  min-height: 220px;
  cursor: default;
}
.sys-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 300px at var(--mx,50%) var(--my,50%), rgba(239,58,76,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  pointer-events: none;
}
.sys-card:hover {
  border-color: var(--border-medium);
  background: var(--surface-card-hover);
  transform: translateY(-2px);
}
.sys-card:hover::after { opacity: 1; }
.sys-card .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(239,58,76,0.10);
  border: 1px solid rgba(239,58,76,0.20);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand);
  margin-bottom: 24px;
}
.sys-card .ico svg { width: 22px; height: 22px; stroke-width: 1.5; }
.sys-card h4 {
  font: 500 18px/1.25 var(--font-sans);
  color: var(--fg-1);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.sys-card p {
  font: 400 13.5px/1.55 var(--font-sans);
  color: var(--fg-4);
  margin: 0 0 16px;
}
.sys-card .ai-tag {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brand);
  padding-top: 16px;
  border-top: 1px dashed rgba(239,58,76,0.15);
}
.sys-card .ai-tag .ai-dot {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--brand);
}

/* layout: 3-up uniform on the 6-col grid */
.sys-card.span-3 { grid-column: span 3; }
.sys-card.span-2 { grid-column: span 2; }
.sys-card.span-1 { grid-column: span 1; }
.sys-card.tall { min-height: 280px; }

@media (max-width: 1100px) {
  .system-grid { grid-template-columns: repeat(4, 1fr); }
  .sys-card.span-3 { grid-column: span 2; }
  .sys-card.span-2 { grid-column: span 2; }
  .sys-card.span-1 { grid-column: span 2; }
}

@media (max-width: 720px) {
  .system-grid { grid-template-columns: 1fr; }
  .sys-card.span-3, .sys-card.span-2, .sys-card.span-1 { grid-column: span 1; }
}

/* ============================================================
   WORKSPACE DEMO — Notion-style interactive workspace mock
   ============================================================ */
.workspace-section {
  position: relative;
  padding: 80px 0 120px;
}
.workspace-section .section-head { margin-bottom: 56px; }

/* ----- Tour cursor (fake-mouse demo overlay on the dashboard) ----- */
.ws-tour-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  transition: transform 1100ms cubic-bezier(0.33, 0.0, 0.2, 1), opacity 240ms ease;
  will-change: transform, opacity;
}
.ws-tour-cursor.visible { opacity: 1; }
.ws-tour-cursor svg {
  position: absolute;
  top: -2px; left: -2px;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.75));
}
.ws-tour-ring {
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 40px;
  margin: -20px;
  border-radius: 999px;
  background: rgba(239,58,76,0.28);
  border: 2px solid rgba(239,58,76,0.9);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
.ws-tour-cursor.clicking .ws-tour-ring {
  animation: ws-tour-click 460ms ease-out;
}
@keyframes ws-tour-click {
  0%   { opacity: 1; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* ----- Outer browser/desktop frame ----- */
.ws-frame {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  background: #0a0a0a;
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,0,0,0.4);
}

/* ----- Top chrome bar (traffic + tabs + share) ----- */
.ws-chrome {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  background: #050505;
  border-bottom: 1px solid var(--border-faint);
  min-height: 44px;
}
.ws-traffic { display: flex; gap: 7px; flex-shrink: 0; }
.ws-traffic span {
  width: 11px; height: 11px; border-radius: 999px;
  background: #2a2a2a;
}
.ws-traffic span:nth-child(1) { background: #ff5f57; }
.ws-traffic span:nth-child(2) { background: #febc2e; }
.ws-traffic span:nth-child(3) { background: #28c840; }
.ws-tabs {
  display: flex; gap: 2px; align-items: center;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-3);
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.ws-tab:hover { background: rgba(255,255,255,0.04); color: var(--fg-2); }
.ws-tab.active {
  background: #1a1a1a;
  color: var(--fg-1);
}
.ws-tab.muted { color: var(--fg-4); }
.ws-tab-emoji { font-size: 13px; }
.ws-chrome-spacer {
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-5);
}
.ws-share {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: var(--brand);
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
}
.ws-share i { width: 12px; height: 12px; }

/* ----- Body split: sidebar | main ----- */
.ws-body {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 720px;
  max-height: 720px;
}

/* ----- SIDEBAR ----- */
.ws-sidebar {
  background: #0a0a0a;
  border-right: 1px solid var(--border-faint);
  padding: 14px 8px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a transparent;
}
.ws-sidebar::-webkit-scrollbar { width: 6px; }
.ws-sidebar::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 999px; }

.ws-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 14px;
}
.ws-side-logo .ws-logo-square {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #1a1a1a;
  border: 1px solid var(--border-soft);
  position: relative;
}
.ws-side-logo .ws-logo-square::after {
  content: ""; position: absolute; inset: 5px;
  background: var(--fg-3);
  border-radius: 2px;
  clip-path: polygon(0 0, 60% 0, 60% 60%, 100% 60%, 100% 100%, 0 100%);
}
.ws-side-actions {
  display: flex; gap: 8px;
  color: var(--fg-4);
}
.ws-side-actions i { width: 16px; height: 16px; }

.ws-side-section { margin-bottom: 16px; }
.ws-side-cockpit { margin-bottom: 8px; }

.ws-side-row, .ws-cockpit-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  font: 600 13px/1 var(--font-sans);
  color: var(--fg-2);
  cursor: pointer;
  transition: background 140ms var(--ease-out);
}
.ws-cockpit-row { font-weight: 700; }
.ws-side-row:hover, .ws-cockpit-row:hover { background: rgba(255,255,255,0.04); }
.ws-cockpit-row.active { background: rgba(239,58,76,0.10); color: #fff; }
.ws-row-emoji { font-size: 14px; flex-shrink: 0; }

.ws-side-dept {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 4px;
}
.ws-dept-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: transparent; border: none; padding: 0;
  color: var(--fg-4);
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
}
.ws-dept-toggle:hover { background: rgba(255,255,255,0.06); color: var(--fg-2); }
.ws-dept-toggle i { width: 12px; height: 12px; stroke-width: 2.5; }

.ws-dept-label {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
  padding: 3px 6px;
  border-radius: 4px;
  font: 700 11.5px/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--fg-2);
  cursor: pointer;
  transition: background 140ms var(--ease-out);
}
.ws-dept-label:hover { background: rgba(255,255,255,0.04); }
.ws-dept-label.active { background: rgba(239,58,76,0.10); color: #fff; }
.ws-dept-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.ws-dept-name { letter-spacing: 0.01em; }

.ws-dept-children {
  padding: 2px 0 4px 22px;
  display: flex; flex-direction: column; gap: 1px;
}
.ws-side-leaf {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  border-radius: 5px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--fg-3);
  cursor: pointer;
  transition: all 140ms var(--ease-out);
}
.ws-side-leaf i { width: 13px; height: 13px; color: var(--fg-4); flex-shrink: 0; stroke-width: 2; }
.ws-side-leaf:hover {
  background: rgba(255,255,255,0.04);
  color: var(--fg-1);
}
.ws-side-leaf.active {
  background: rgba(239,58,76,0.12);
  color: #fff;
}
.ws-side-leaf.active i { color: var(--brand); }
.ws-side-newpage { color: var(--fg-5); }
.ws-side-newpage:hover { color: var(--fg-3); }

/* ----- MAIN PANE (page body) ----- */
.ws-main {
  background: #0a0a0a;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a transparent;
  position: relative;
}
.ws-main::-webkit-scrollbar { width: 8px; }
.ws-main::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 999px; }
.ws-loading {
  padding: 40px;
  color: var(--fg-4);
  font: 500 14px/1.5 var(--font-sans);
  text-align: center;
}

/* ----- Page header (cover + icon + title) ----- */
.wp { padding-bottom: 40px; }
.wp-header {
  position: relative;
  margin-bottom: 24px;
}
.wp-cover {
  height: 110px;
  width: 100%;
  border-bottom: 1px solid var(--border-faint);
}
.wp-icon-wrap {
  position: absolute;
  left: 56px;
  top: 70px;
}
.wp-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: #1a1a1a;
  border: 2px solid #050505;
  border-radius: 12px;
  font-size: 36px;
  font-weight: 700;
  color: var(--fg-1);
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}
.wp-title-row {
  padding: 24px 56px 0;
}
.wp-eyebrow {
  display: block;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-5);
  margin-bottom: 6px;
}
.wp-title {
  font: 700 32px/1.1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
}
.wp-lede {
  margin: 0 56px 24px;
  font: 500 14px/1.55 var(--font-sans);
  color: var(--fg-1);
  text-wrap: pretty;
  padding: 12px 16px;
  background: rgba(239,58,76,0.06);
  border-left: 3px solid var(--brand);
  border-radius: 0 6px 6px 0;
}
.wp-lede strong, .wp-lede b { color: var(--brand); font-weight: 700; }
.wp-person-meta {
  margin: -16px 56px 24px;
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0.04em;
}

/* ----- Page grid layouts ----- */
.wp-grid {
  display: grid;
  gap: 16px;
  margin: 0 32px 16px;
}
.wp-grid-2 { grid-template-columns: 1fr 1fr; }
.wp-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.wp-grid-2-3 { grid-template-columns: 280px 1fr; }

/* ----- Generic page card ----- */
.wp-card {
  background: #111111;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 14px;
}
.wp-card-wide { margin: 0 32px 16px; }
.wp-card-head {
  display: flex; align-items: center; gap: 8px;
  font: 700 13px/1 var(--font-sans);
  color: var(--fg-2);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-faint);
}
.wp-card-head i { width: 14px; height: 14px; color: var(--fg-3); }
.wp-card-head .wp-tabs { margin-left: auto; }

.wp-tabs {
  display: flex; gap: 2px;
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-4);
}
.wp-tabs span {
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 140ms;
}
.wp-tabs span:hover { background: rgba(255,255,255,0.04); color: var(--fg-2); }
.wp-tabs span.active {
  background: rgba(255,255,255,0.06);
  color: var(--fg-1);
}

/* ----- Cockpit overview ----- */
.wp-overview { padding: 8px 0; }
.wp-ov-logo {
  text-align: center;
  padding: 18px 0;
  margin-bottom: 12px;
  background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 70%);
  border-radius: 6px;
  border: 1px solid var(--border-faint);
}
.wp-ov-wordmark {
  font: 700 22px/1 var(--font-sans);
  letter-spacing: 0.18em;
  color: #fff;
}
.wp-ov-i {
  position: relative;
  color: var(--brand);
  margin: 0 1px;
}
.wp-ov-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  font: 400 12px/1.45 var(--font-sans);
  color: var(--fg-2);
}
.wp-ov-list li { padding: 0 4px; }
.wp-ov-k { color: var(--fg-5); margin-right: 6px; font-weight: 500; }
.wp-ov-callout {
  margin-top: 6px;
  padding: 8px 10px !important;
  background: #1a1a1a;
  border-radius: 5px;
  border-left: 2px solid var(--fg-5);
}
.wp-ov-red { border-left-color: var(--brand); }
.wp-ov-tag {
  display: inline-block;
  font: 700 9px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-right: 8px;
}
.wp-ov-tag-red { color: var(--brand); }
.wp-progress { margin-top: 14px; padding: 0 4px; }
.wp-progress-label {
  display: flex; justify-content: space-between;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 6px;
}
.wp-progress-label span { color: var(--brand); letter-spacing: 0; }
.wp-progress-bar {
  height: 4px;
  background: #1a1a1a;
  border-radius: 999px;
  overflow: hidden;
}
.wp-progress-bar div {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
}

/* ----- Team Dashboards (3-up cards) ----- */
.wp-team {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.wp-team-card {
  background: #1a1a1a;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.wp-team-card:hover {
  border-color: var(--brand);
  background: #1f1f1f;
  transform: translateY(-1px);
}
.wp-team-avatar {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2a2a2a, #161616);
  border: 1px solid var(--border-faint);
  margin-bottom: 4px;
  color: var(--fg-4);
}
.wp-avatar-1 { background: linear-gradient(135deg, #2a0508, #1a1a1a); }
.wp-avatar-2 { background: linear-gradient(135deg, #0a1a2a, #1a1a1a); }
.wp-team-avatar i { width: 24px; height: 24px; }
.wp-team-name {
  font: 600 12px/1.2 var(--font-sans);
  color: var(--fg-1);
}
.wp-team-role {
  font: 400 10px/1.2 var(--font-sans);
  color: var(--fg-4);
  display: flex; align-items: center; gap: 4px;
}
.wp-team-empty {
  border-style: dashed;
  align-items: center; justify-content: center;
  text-align: center;
  color: var(--fg-5);
  font-size: 11px;
}
.wp-team-empty i { width: 14px; height: 14px; }

/* ----- Projects gallery ----- */
.wp-projects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.wp-projects-3 { grid-template-columns: repeat(3, 1fr); }
.wp-project {
  background: #1a1a1a;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 10px 10px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.wp-project-title {
  font: 600 11.5px/1.3 var(--font-sans);
  color: var(--fg-1);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wp-project-ic {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  background: rgba(239,58,76,0.12);
  color: var(--brand);
  flex-shrink: 0;
}
.wp-project-ic svg { width: 12px; height: 12px; }
/* ----- Inline icon for table/board cells (replaces emojis like 📁 📄 🏢) ----- */
.wp-cell-ic {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--fg-4);
  vertical-align: -3px;
  margin-right: 4px;
}
.wp-cell-ic svg { width: 14px; height: 14px; }
.wp-project-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wp-project-progress .wp-mini-bar {
  flex: 1;
  margin-top: 0;
}
.wp-project-progress .wp-mini-pct {
  font: 600 10px/1 var(--font-sans);
  color: var(--brand);
  letter-spacing: 0;
}
.wp-project-meta {
  font: 400 10px/1.2 var(--font-sans);
  color: var(--fg-4);
}
.wp-project-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.wp-project-owner {
  display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-3);
}
.wp-owner-chip {
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: -0.01em;
}
.wp-project-owner-name { letter-spacing: -0.01em; }

/* ----- Task board cards (Projects & Tasks page) ----- */
.wp-board-tasks .wp-col-head {
  text-transform: none;
  letter-spacing: -0.01em;
  font: 600 12px/1 var(--font-sans);
}
.wp-board-tasks .wp-col-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.wp-board-tasks .wp-col-count {
  flex-shrink: 0;
}
.wp-task-card {
  background: #1a1a1a;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: grab;
}
.wp-task-card-title {
  display: flex; align-items: center; gap: 8px;
  font: 600 11.5px/1.3 var(--font-sans);
  color: var(--fg-1);
}
.wp-task-card-title .wp-checkbox { flex-shrink: 0; }
.wp-task-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.wp-task-card-title .wp-task-done {
  color: var(--fg-5);
  text-decoration: line-through;
  text-decoration-color: var(--fg-5);
}
.wp-task-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  font: 400 10px/1 var(--font-sans);
  color: var(--fg-4);
}
.wp-task-card-owner {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--fg-3);
  font-weight: 500;
}
.wp-task-card-due {
  font-weight: 500;
  color: var(--fg-4);
}
.wp-pill {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: 4px;
  font: 600 9px/1.3 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wp-pill-prog { background: rgba(34,197,94,0.15); color: #4ade80; }
.wp-pill-done { background: rgba(34,197,94,0.18); color: #4ade80; }
.wp-pill-warn { background: rgba(245,181,68,0.18); color: #fbbf24; }
.wp-pill-p1 { background: rgba(239,58,76,0.16); color: #f87171; }
.wp-pill-p2 { background: rgba(245,181,68,0.18); color: #fbbf24; }
.wp-pill-p3 { background: rgba(34,197,94,0.12); color: #4ade80; }

.wp-mini-bar {
  height: 3px;
  background: #2a2a2a;
  border-radius: 999px;
  overflow: hidden;
  margin-top: auto;
}
.wp-mini-bar div {
  height: 100%;
  background: var(--brand);
  border-radius: 999px;
}
.wp-mini-pct {
  font: 600 10px/1 var(--font-sans);
  color: var(--fg-3);
}

/* ----- Stats row ----- */
.wp-stat {
  background: #111111;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 18px 20px;
  text-align: center;
}
.wp-stat-label {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--fg-4);
  margin-bottom: 10px;
}
.wp-stat-num {
  font: 700 28px/1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.02em;
}
.wp-stat-orange { color: #f5b544; }
.wp-stat-blue { color: #60a5fa; }
.wp-stat-green { color: #4ade80; }

/* ----- Lists, tasks, kpis ----- */
.wp-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font: 500 12.5px/1.4 var(--font-sans);
  color: var(--fg-2);
}
.wp-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px;
}
.wp-list-rows li {
  border-bottom: 1px solid var(--border-faint);
  padding: 10px 4px;
}
.wp-list-rows li:last-child { border-bottom: none; }

.wp-tasks {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.wp-tasks li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  font: 500 13px/1.3 var(--font-sans);
  color: var(--fg-2);
  border-bottom: 1px solid var(--border-faint);
}
.wp-tasks li:last-child { border-bottom: none; }
.wp-checkbox {
  width: 14px; height: 14px;
  border: 1.5px solid var(--fg-5);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wp-checkbox.done {
  background: var(--brand);
  border-color: var(--brand);
}
.wp-checkbox.done::after {
  content: "✓";
  color: #fff;
  font-size: 10px;
  line-height: 1;
}
.wp-task-done { text-decoration: line-through; color: var(--fg-5); }
.wp-task-tag {
  margin-left: auto;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-5);
}

.wp-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  gap: 10px;
  padding: 4px 0;
}
.wp-kpis > div { text-align: center; padding: 8px 0; }
.wp-kpi-num {
  font: 700 22px/1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.wp-kpi-lbl {
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--fg-4);
  margin-top: 6px;
  text-transform: uppercase;
}

/* ----- Department KPI cards (donut + big number) ----- */
.wp-dept-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 8px 4px 4px;
}
.wp-dept-kpi {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px;
}
.wp-dept-kpi-donut {
  position: relative;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.wp-dept-kpi-donut-val {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--font-sans);
  letter-spacing: -0.02em;
}
.wp-dept-kpi-big {
  font: 700 28px/1 var(--font-sans);
  letter-spacing: -0.02em;
  height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.wp-dept-kpi-lbl {
  font: 500 10.5px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-4);
  text-align: center;
}
.wp-dept-kpi-trend {
  font: 600 11px/1 var(--font-sans);
  color: var(--fg-3);
  letter-spacing: -0.01em;
}
.wp-donut { display: block; }
.wp-chart-wrap {
  width: 100%;
  padding: 4px 12px 12px;
}
.wp-line-chart {
  display: block;
  width: 100%;
  height: auto;
}
.wp-goal-pct {
  color: var(--brand);
  font-weight: 600;
}
.wp-goal-text {
  flex: 1;
  min-width: 0;
}
.wp-goal-prog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ----- Toggles (Brain page) ----- */
.wp-toggle {
  background: #111;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 12px 14px;
}
.wp-toggle-head {
  display: flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--font-sans);
  color: var(--fg-1);
  margin-bottom: 8px;
}
.wp-toggle-head i { width: 14px; height: 14px; color: var(--fg-4); stroke-width: 2; }
.wp-toggle-head i:first-child { color: var(--fg-5); width: 12px; height: 12px; }
.wp-toggle-title { letter-spacing: -0.01em; }
.wp-toggle-body {
  font: 400 12.5px/1.55 var(--font-sans);
  color: var(--fg-3);
  padding-left: 22px;
  text-wrap: pretty;
}

/* ----- Steps (Hiring) ----- */
.wp-steps {
  list-style: none; margin: 0; padding: 0;
  counter-reset: step;
  display: flex; flex-direction: column; gap: 10px;
  font: 400 12.5px/1.4 var(--font-sans);
  color: var(--fg-2);
}
.wp-steps li {
  position: relative;
  padding: 8px 8px 8px 14px;
  border-left: 2px solid var(--brand);
}
.wp-steps li b {
  display: block;
  font-weight: 700;
  color: var(--fg-1);
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ----- CRM Board ----- */
.wp-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.wp-col {
  background: #0a0a0a;
  border: 1px solid var(--border-faint);
  border-radius: 6px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 240px;
}
.wp-col-head {
  display: flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-faint);
}
.wp-col-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }
.wp-col-count {
  margin-left: auto;
  font-weight: 500;
  color: var(--fg-5);
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}
.wp-board-card {
  background: #1a1a1a;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 8px 10px;
  cursor: grab;
}
.wp-bc-title {
  font: 600 11.5px/1.2 var(--font-sans);
  color: var(--fg-1);
  margin-bottom: 4px;
}
.wp-bc-meta {
  font: 400 10px/1 var(--font-sans);
  color: var(--fg-4);
}

/* ----- Empty placeholder ----- */
.wp-empty {
  padding: 40px;
  text-align: center;
  background: #111;
  border: 1px dashed var(--border-medium);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.wp-empty i { width: 32px; height: 32px; color: var(--fg-5); margin-bottom: 4px; }
.wp-empty-title {
  font: 600 14px/1.2 var(--font-sans);
  color: var(--fg-1);
}
.wp-empty-body {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--fg-4);
  max-width: 360px;
}

/* ----- Banner cover image ----- */
.wp-cover-banner { position: relative; padding: 0; }
.wp-banner-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Page icon as logo image (Systemiz brand mark, dark bg) ----- */
.wp-icon-logo {
  padding: 0;
  overflow: hidden;
  background: #0a0a0a;
  border-color: #0a0a0a;
}
.wp-icon-logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- Page icon as image (chris/jack avatar) ----- */
.wp-icon-img {
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.wp-icon-img img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ----- Page icon as inline SVG node (Systemiz OS torii) ----- */
.wp-icon-node {
  background: #1a1a1a;
}
.wp-icon-node svg {
  width: 60%; height: 60%;
}

/* ----- Page icon as lucide SVG (department dashboards) ----- */
.wp-icon-svg {
  background: #1a1a1a;
}
.wp-icon-svg svg {
  width: 32px; height: 32px;
  stroke-width: 2;
}

/* ----- Cockpit overview banner ----- */
.wp-ov-banner {
  margin-bottom: 12px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-faint);
  aspect-ratio: 16 / 7;
  background: #0a0a0a;
}
.wp-ov-banner img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ----- Tiny Systemiz logo image (sidebar cockpit + active tab) ----- */
.ws-torii-img {
  display: inline-block;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 3px;
}
.wp-avatar-img {
  width: 16px; height: 16px;
  border-radius: 999px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* ----- Team cards on cockpit (use real avatar imgs) ----- */
.wp-team-card .wp-team-avatar {
  background: #fff;
  border: 1px solid var(--border-faint);
  overflow: hidden;
  padding: 0;
}
.wp-team-card .wp-team-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.wp-team-name {
  display: flex; align-items: center; gap: 6px;
}
.wp-team-role {
  font: 400 10px/1.2 var(--font-sans);
  color: var(--fg-4);
}

/* ----- Notion icon in sidebar ----- */
.ws-notion-icon {
  width: 18px; height: 18px;
  display: block;
  filter: invert(1);
}

/* ----- Tabs row → just the one Systemiz OS tab now ----- */
.ws-tab.active .ws-torii {
  margin-right: 2px;
}
.ws-torii {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  margin-right: 4px;
}

/* ----- Book a call CTA ----- */
.ws-bookcall {
  display: inline-flex; align-items: center; gap: 4px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--brand);
  color: #0a0a0a;
  padding: 7px 11px 7px 14px;
  border-radius: 7px;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
  position: relative;
  animation: ws-bookcall-pulse 2.4s ease-out infinite;
}
.ws-bookcall:hover {
  background: #ff5060;
  transform: translateY(-1px) scale(1.03);
  animation: none;
}
.ws-bookcall svg, .ws-bookcall i { width: 12px; height: 12px; stroke-width: 3; }
@keyframes ws-bookcall-pulse {
  0% { box-shadow: 0 2px 6px rgba(239,58,76,0.4), 0 0 0 0 rgba(239,58,76,0.6); }
  70% { box-shadow: 0 2px 6px rgba(239,58,76,0.4), 0 0 0 10px rgba(239,58,76,0); }
  100% { box-shadow: 0 2px 6px rgba(239,58,76,0.4), 0 0 0 0 rgba(239,58,76,0); }
}

/* ----- Database table (projects/tasks/sops/invoices) ----- */
.wp-table {
  border: 1px solid var(--border-faint);
  border-radius: 6px;
  overflow: hidden;
  font: 400 12px/1.4 var(--font-sans);
  color: var(--fg-2);
}
.wp-table-row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 1fr 1.2fr 0.8fr;
  align-items: center;
  border-bottom: 1px solid var(--border-faint);
  background: #0e0e0e;
}
.wp-table-row:last-child { border-bottom: none; }
.wp-table-row:hover:not(.wp-table-head) { background: #131313; }
.wp-table-head {
  background: #0a0a0a;
  font: 600 10px/1 var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wp-table-head > div { padding: 10px 12px; }
.wp-table-cell { padding: 10px 12px; display: flex; align-items: center; gap: 6px; }
.wp-table-owner { gap: 4px; }
.wp-table-due {
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
  font-size: 11px;
}
.wp-table-proj {
  font-size: 11px;
  color: var(--fg-4);
}
.wp-table-cell .wp-mini-bar { flex: 1; max-width: 80px; }
.wp-table-cell .wp-mini-pct { font-size: 10px; }

/* tasks table (4 cols) */
.wp-table-tasks .wp-table-row {
  grid-template-columns: 3fr 0.6fr 1fr 0.8fr;
}
/* sop table (5 cols) */
.wp-table-sop .wp-table-row {
  grid-template-columns: 2.4fr 0.6fr 0.9fr 0.7fr 0.7fr;
}
/* invoices table (5 cols, but fixed sizes) */
.wp-pill-cat {
  background: rgba(167,139,250,0.16);
  color: #c4b5fd;
}

/* ----- Calendar grid (week view) ----- */
.wp-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.wp-cal-col {
  background: #0a0a0a;
  border: 1px solid var(--border-faint);
  border-radius: 5px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
}
.wp-cal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-faint);
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.wp-cal-num {
  color: var(--fg-2);
  font-size: 12px;
  letter-spacing: 0;
}
.wp-cal-body {
  padding: 4px;
  display: flex; flex-direction: column; gap: 3px;
  flex: 1;
}
.wp-cal-event {
  background: rgba(239,58,76,0.10);
  border-left: 2px solid var(--brand);
  border-radius: 3px;
  padding: 4px 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wp-cal-event-t {
  font: 600 9.5px/1.2 var(--font-sans);
  color: var(--fg-1);
}
.wp-cal-event-who {
  display: flex; gap: 2px;
}
.wp-cal-event-who .wp-avatar-img {
  width: 11px; height: 11px;
}

/* ----- Tight 3-col grid (Brain, Claude OS) ----- */
.wp-grid-tight { gap: 12px; }

/* ----- Stat trend ----- */
.wp-stat-trend {
  font: 600 10px/1 var(--font-sans);
  color: var(--fg-4);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ----- Team Directory cards ----- */
.wp-team-detail {
  padding: 0;
  overflow: hidden;
}
.wp-td-head {
  display: flex; gap: 14px; align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-faint);
  background: linear-gradient(135deg, #0e0e0e, #131313);
}
.wp-td-avatar {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-soft);
  object-fit: cover;
  object-position: center 30%;
  flex-shrink: 0;
}
.wp-td-name {
  font: 700 16px/1.2 var(--font-sans);
  color: var(--fg-1);
  margin-bottom: 2px;
}
.wp-td-role {
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0.04em;
}
.wp-td-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-faint);
}
.wp-td-stats > div {
  background: #111;
  padding: 14px;
  text-align: center;
}
.wp-td-num {
  font: 700 22px/1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.wp-td-lbl {
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-top: 6px;
}
.wp-td-list {
  list-style: none;
  margin: 0; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  font: 400 12px/1.4 var(--font-sans);
  color: var(--fg-2);
}
.wp-td-list li { display: flex; align-items: center; gap: 8px; }
.wp-td-k {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-5);
  min-width: 50px;
}

/* ----- Claude OS skill cards ----- */
.wp-skill {
  background: #111;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.wp-skill-head {
  display: flex; align-items: center; gap: 8px;
  font: 700 13px/1 var(--font-sans);
  color: var(--fg-1);
}
.wp-skill-head svg, .wp-skill-head i {
  width: 14px; height: 14px;
  color: var(--brand);
}
.wp-skill-body {
  font: 400 12px/1.5 var(--font-sans);
  color: var(--fg-3);
  text-wrap: pretty;
  flex: 1;
}
.wp-skill-foot {
  margin-top: 4px;
}

/* ----- CRM board card meta row with avatar ----- */
.wp-bc-meta {
  display: flex; align-items: center; justify-content: space-between;
  font: 400 10px/1 var(--font-sans);
  color: var(--fg-4);
}

/* ----- Hint below frame ----- */
.ws-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 24px auto 0;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--fg-5);
  text-transform: none;
}
.ws-hint i, .ws-hint svg {
  width: 14px; height: 14px; color: #ffffff;
}
.ws-hint-shine {
  background: linear-gradient(
    100deg,
    var(--fg-5) 0%,
    var(--fg-5) 42%,
    #ffffff 50%,
    var(--fg-5) 58%,
    var(--fg-5) 100%
  );
  background-size: 260% 100%;
  background-position: 260% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ws-hint-shine 5.5s linear infinite;
}
@keyframes ws-hint-shine {
  0%   { background-position: 260% 0; }
  100% { background-position: -160% 0; }
}

.ws-hint-pop {
  display: none;
}
@keyframes ws-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,58,76,0); }
  50%      { box-shadow: 0 0 0 8px rgba(239,58,76,0.18); }
}

/* ----- Bottom CTA below dashboard ----- */
.ws-cta {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  margin: 48px auto 0;
  max-width: 720px;
  padding: 40px 36px;
  border-radius: 16px;
  background: linear-gradient(135deg, #161616 0%, #0c0c0c 100%);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  overflow: hidden;
}
.ws-cta::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 200%;
  background: radial-gradient(closest-side, rgba(239,58,76,0.16), rgba(239,58,76,0) 70%);
  pointer-events: none;
}
.ws-cta-copy {
  width: 100%;
  position: relative;
  z-index: 1;
}
.ws-cta-eyebrow {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.ws-cta-title {
  font: 700 26px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0 0 10px;
  text-wrap: balance;
}
.ws-cta-sub {
  font: 400 14.5px/1.55 var(--font-sans);
  color: var(--fg-3);
  margin: 0 auto;
  max-width: 540px;
  text-wrap: pretty;
}
.ws-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: var(--brand);
  color: #0a0a0a;
  padding: 14px 24px;
  border-radius: 10px;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
  position: relative;
  z-index: 1;
  animation: ws-cta-btn-pulse 2.4s ease-out infinite;
}
.ws-cta-btn:hover {
  background: #ff5060;
  transform: translateY(-2px) scale(1.04);
  animation: none;
  box-shadow: 0 14px 32px rgba(239,58,76,0.55), 0 0 0 1px rgba(239,58,76,0.5);
}
.ws-cta-btn svg, .ws-cta-btn i { width: 16px; height: 16px; stroke-width: 3; }
@keyframes ws-cta-btn-pulse {
  0% { box-shadow: 0 6px 18px rgba(239,58,76,0.4), 0 0 0 0 rgba(239,58,76,0.55); }
  70% { box-shadow: 0 6px 18px rgba(239,58,76,0.4), 0 0 0 18px rgba(239,58,76,0); }
  100% { box-shadow: 0 6px 18px rgba(239,58,76,0.4), 0 0 0 0 rgba(239,58,76,0); }
}

/* ----- "Under the hood" marquee strip below dashboard ----- */
.ws-strip-wrap {
  margin: 64px auto 0;
  max-width: 1200px;
}
.ws-strip-head {
  text-align: center;
  margin-bottom: 28px;
  padding: 0 24px;
}
.ws-strip-head .eyebrow {
  display: inline-block;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.ws-strip-h {
  font: 700 28px/1.2 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.ws-strip {
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ws-strip + .ws-strip { margin-top: 14px; }
.ws-strip-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: ws-strip-scroll 50s linear infinite;
}
.ws-strip-track.reverse {
  animation-direction: reverse;
}
.ws-strip-track:hover {
  animation-play-state: paused;
}
@keyframes ws-strip-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ws-strip-card {
  flex: 0 0 auto;
  width: 260px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #161616 0%, #0d0d0d 100%);
  border: 1px solid rgba(255,255,255,0.05);
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.ws-strip-card:hover {
  border-color: rgba(239,58,76,0.4);
  transform: translateY(-2px);
}
.ws-strip-ic {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(239,58,76,0.12);
  color: var(--brand);
  flex-shrink: 0;
}
.ws-strip-ic svg { width: 18px; height: 18px; }
.ws-strip-card-body {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ws-strip-title {
  font: 600 14px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-strip-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0.01em;
}
.ws-strip-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(239,58,76,0.6);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .ws-strip-h { font-size: 22px; }
  .ws-strip-card { width: 220px; padding: 12px 14px; }
  .ws-strip-ic { width: 32px; height: 32px; }
}

@media (max-width: 720px) {
  .ws-cta {
    padding: 28px 20px;
    gap: 20px;
  }
  .ws-cta-title { font-size: 20px; }
  .ws-cta-btn { width: 100%; justify-content: center; }
}

/* ----- Responsive ----- */
@media (max-width: 980px) {
  .ws-body {
    grid-template-columns: 200px 1fr;
    min-height: 640px;
    max-height: 640px;
  }
  .wp-icon-wrap { left: 32px; }
  .wp-title-row, .wp-lede, .wp-person-meta { padding-left: 32px; padding-right: 32px; }
  .wp-grid, .wp-card-wide { margin-left: 16px; margin-right: 16px; }
  .wp-grid-2-3 { grid-template-columns: 1fr; }
  .wp-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .wp-projects { grid-template-columns: repeat(2, 1fr); }
  .wp-projects-3 { grid-template-columns: repeat(2, 1fr); }
  .wp-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ws-body {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 1fr;
    min-height: auto;
    max-height: none;
  }
  .ws-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border-faint);
    max-height: 200px;
  }
  .ws-tabs { display: none; }
  .wp-grid-3 { grid-template-columns: 1fr; }
  .wp-team { grid-template-columns: 1fr; }
  .wp-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- PHONE DEMO ---------- */
.phone-section {
  position: relative;
  padding: 96px 0;
  z-index: 1;
}
.phone-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(700px 400px at 50% 30%, rgba(239,58,76,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.phone-stage {
  display: grid;
  grid-template-columns: 1fr 360px 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.phone-side { position: relative; }
.phone-side h3 {
  font: 200 clamp(28px, 3.1vw, 38px)/1.1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--fg-2);
  margin: 0 0 16px;
  text-wrap: balance;
}
.phone-side h3 strong { font-weight: 300; color: var(--brand); }
.phone-side .lede {
  font: 400 15px/1.6 var(--font-sans);
  color: var(--fg-3);
  margin: 0 0 28px;
}
.phone-step-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.phone-step {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: all 240ms var(--ease-out);
}
.phone-step:hover {
  background: rgba(255,255,255,0.025);
  border-color: var(--border-faint);
}
.phone-step:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.phone-step.active {
  background: rgba(239,58,76,0.08);
  border-color: rgba(239,58,76,0.32);
  box-shadow: 0 0 0 1px rgba(239,58,76,0.08) inset, 0 6px 20px rgba(239,58,76,0.06);
}
.phone-step .pill {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--ink-300);
  color: var(--fg-3);
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font-sans);
  border: 1px solid var(--border-soft);
  transition: all 240ms var(--ease-out);
}
.phone-step.active .pill {
  background: var(--brand); color: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(239,58,76,0.18);
}
.phone-step .ttl {
  font: 600 14px/1.3 var(--font-sans);
  color: var(--fg-1);
  margin-bottom: 2px;
}
.phone-step .desc {
  font: 400 13px/1.45 var(--font-sans);
  color: var(--fg-4);
}
.phone-step-hint {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 24px auto 0;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--fg-4);
  text-align: center;
}
.phone-step-hint svg {
  width: 14px; height: 14px; stroke-width: 1.8;
  color: var(--fg-3);
}

.phone-side.right { text-align: left; }
.phone-side.right .feature-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.phone-side.right .feature-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--fg-3);
}
.phone-side.right .feature-list .ic {
  width: 16px; height: 16px; flex-shrink: 0; color: var(--brand); margin-top: 2px;
}
.phone-side.right .feature-list .ic svg { width: 14px; height: 14px; stroke-width: 2; }

/* Phone bezel */
.phone {
  width: 320px; height: 660px;
  margin: 0 auto;
  border-radius: 48px;
  background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  padding: 12px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1.5px rgba(255,255,255,0.04),
    0 40px 80px rgba(0,0,0,0.7),
    0 0 80px rgba(239,58,76,0.10);
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 38px;
  background: #050505;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.phone-notch {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 26px;
  background: #000; border-radius: 999px;
  z-index: 5;
}
.phone-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px 8px;
  font: 600 12px/1 var(--font-sans);
  color: var(--fg-1);
  position: relative;
  z-index: 4;
}
.phone-statusbar .icons { display: flex; gap: 5px; align-items: center; color: var(--fg-1); }
.phone-statusbar .icons svg { width: 14px; height: 14px; stroke-width: 2; }
.phone-app-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border-faint);
}
.phone-app-bar .avatar {
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font: 700 12px/1 var(--font-sans);
  overflow: hidden;
}
.phone-app-bar .avatar img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.phone-app-bar .name {
  font: 600 13px/1 var(--font-sans);
  color: var(--fg-1);
}
.phone-app-bar .status {
  font: 500 10px/1 var(--font-sans);
  color: var(--success); margin-top: 4px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.phone-app-bar .status::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 999px; background: var(--success); margin-right: 5px;
  vertical-align: middle;
}

.phone-chat {
  flex: 1;
  padding: 18px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: opacity 600ms var(--ease-out);
}
.phone-chat.is-resetting {
  opacity: 0;
}
.bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font: 400 12.5px/1.45 var(--font-sans);
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: bubble-in 0.4s var(--ease-out) forwards;
}
@keyframes bubble-in {
  to { opacity: 1; transform: translateY(0); }
}
.bubble.user {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bubble.user.voice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
.voice-wave { display: flex; gap: 2px; align-items: center; height: 18px; }
.voice-wave span {
  width: 2px; background: rgba(255,255,255,0.85); border-radius: 2px;
  animation: wave 1.2s ease-in-out infinite;
}
.voice-wave span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.voice-wave span:nth-child(2) { height: 12px; animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { height: 16px; animation-delay: 0.2s; }
.voice-wave span:nth-child(4) { height: 10px; animation-delay: 0.3s; }
.voice-wave span:nth-child(5) { height: 14px; animation-delay: 0.4s; }
.voice-wave span:nth-child(6) { height: 8px;  animation-delay: 0.5s; }
.voice-wave span:nth-child(7) { height: 16px; animation-delay: 0.6s; }
.voice-wave span:nth-child(8) { height: 6px;  animation-delay: 0.7s; }
@keyframes wave { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.voice-meta {
  font: 600 10px/1 var(--font-sans); letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
}

.bubble.claude {
  align-self: flex-start;
  background: var(--ink-300);
  color: var(--fg-2);
  border: 1px solid var(--border-soft);
  border-bottom-left-radius: 4px;
}
.bubble.claude .typing { display: flex; gap: 4px; padding: 4px 0; }
.bubble.claude .typing span {
  width: 6px; height: 6px; border-radius: 999px; background: var(--fg-4);
  animation: type 1.2s ease-in-out infinite;
}
.bubble.claude .typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.claude .typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes type { 0%,80%,100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Inline notion task card */
.task-card {
  align-self: flex-start;
  width: 92%;
  background: #0e0e0e;
  border: 1px solid var(--border-medium);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: bubble-in 0.5s var(--ease-out) forwards;
}
.task-card .row { display: flex; align-items: center; gap: 8px; }
.task-card .check {
  width: 14px; height: 14px; border: 1.5px solid var(--fg-4); border-radius: 4px;
  flex-shrink: 0;
}
.task-card .ttl { font: 600 12.5px/1.3 var(--font-sans); color: var(--fg-1); }
.task-card .meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.task-card .chip {
  font: 600 9.5px/1 var(--font-sans);
  padding: 4px 8px; border-radius: 999px;
  letter-spacing: 0.04em;
}
.task-card .chip.proj { background: rgba(77,191,255,0.12); color: var(--info); }
.task-card .chip.pri  { background: rgba(245,181,68,0.12); color: var(--warning); }
.task-card .chip.due  { background: rgba(255,255,255,0.05); color: var(--fg-3); border: 1px solid var(--border-faint); }
.task-card .footer-mini {
  display: flex; justify-content: space-between; align-items: center;
  font: 500 9px/1 var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-5); padding-top: 6px; border-top: 1px solid var(--border-faint);
}
.task-card .footer-mini .src { display: flex; gap: 5px; align-items: center; color: var(--fg-4); }
.task-card .footer-mini .ok { color: var(--success); }
.task-card .task-open {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,0.03);
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--fg-2);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.task-card .task-open svg { width: 11px; height: 11px; stroke-width: 2; }
.task-card .task-open:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-medium);
  color: var(--fg-1);
}

/* Floating glow callouts beside the phone */
.phone-stack { position: relative; }
.phone-callout {
  position: absolute;
  background: rgba(14,14,14,0.95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  padding: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(239,58,76,0.12) inset;
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  z-index: 3;
  transition: opacity 600ms var(--ease-out), transform 0ms 600ms;
  pointer-events: none;
}
.phone-callout.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  animation: phone-callout-bob 4.5s ease-in-out infinite 420ms;
}
.phone-callout-ic {
  display: block;
  width: 44px; height: 44px;
  border-radius: 10px;
  object-fit: contain;
}
.phone-callout-ic-voice {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  object-fit: contain;
  background: transparent;
  border-radius: 10px;
}
.phone-callout-ic-claude { width: 44px; height: 44px; }
.phone-callout-ic-notion { width: 44px; height: 44px; }
.phone-callout.left  { left: -32px; top: 70px; }
.phone-callout.right { right: -32px; top: 240px; }
.phone-callout.left2 { left: -32px; top: 420px; }
@keyframes phone-callout-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.phone-callout.right2{ right: -28px; top: 480px; animation-delay: 2.8s; }
@keyframes float-in {
  to { opacity: 1; }
}
.phone-callout .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }

@media (max-width: 1100px) {
  .phone-stage { grid-template-columns: 1fr; gap: 48px; }
  .phone-callout { display: none; }
  .phone-side.right .feature-list { grid-template-columns: 1fr; }
}

/* ---------- TIMELINE ---------- */
.timeline-stage {
  max-width: 1100px; margin: 0 auto;
  position: relative;
}
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%; top: 84px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-medium) 10%, var(--border-medium) 90%, transparent);
  z-index: 0;
}
.tl-week {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 18px;
}
.tl-marker {
  width: 60px; height: 60px;
  border-radius: 999px;
  background: var(--ink-200);
  border: 1px solid var(--border-medium);
  display: flex; align-items: center; justify-content: center;
  font: 200 26px/1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin-top: 54px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  transition: all 280ms var(--ease-out);
}
.tl-week:hover .tl-marker {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(239,58,76,0.15), 0 8px 24px rgba(239,58,76,0.4);
}
.tl-eyebrow {
  margin-top: 24px;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--brand);
}
.tl-title {
  margin-top: 12px;
  font: 500 18px/1.3 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.tl-desc {
  margin-top: 12px;
  font: 400 13px/1.55 var(--font-sans);
  color: var(--fg-4);
}
.tl-tags {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.tl-tag {
  font: 500 10.5px/1 var(--font-sans);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink-200);
  border: 1px solid var(--border-faint);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
@media (max-width: 880px) {
  .timeline { grid-template-columns: 1fr; gap: 40px; }
  .timeline::before { display: none; }
  .tl-marker { margin-top: 0; }
}

/* ---------- WHO IS THIS FOR ---------- */
.fit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 1080px; margin: 0 auto;
}
.fit-col {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.fit-col.yes { border-color: rgba(239,58,76,0.22); }
.fit-col.yes::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 300px at 0% 0%, rgba(239,58,76,0.05), transparent 60%);
  pointer-events: none;
}
.fit-col h4 {
  font: 500 20px/1.2 var(--font-sans);
  color: var(--fg-1);
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 10px;
  position: relative; z-index: 1;
}
.fit-col h4 .badge {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.fit-col.yes h4 .badge { background: rgba(239,58,76,0.15); color: var(--brand); }
.fit-col.no  h4 .badge { background: rgba(255,255,255,0.05); color: var(--fg-4); }
.fit-col .sub {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--fg-4); margin: 0 0 22px;
  position: relative; z-index: 1;
}
.fit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.fit-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--fg-2);
}
.fit-list .mark {
  flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.fit-col.yes .fit-list .mark {
  background: rgba(239,58,76,0.12);
  color: var(--brand);
}
.fit-col.no .fit-list .mark {
  background: rgba(255,255,255,0.04);
  color: var(--fg-5);
}
.fit-list .mark svg { width: 12px; height: 12px; stroke-width: 2.5; }
@media (max-width: 760px) { .fit-grid { grid-template-columns: 1fr; } }

/* ---------- ROADMAP ---------- */
.roadmap {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.phase-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 360px;
  transition: all 280ms var(--ease-out);
}
.phase-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-medium);
}
.phase-card.featured {
  background: linear-gradient(160deg, rgba(239,58,76,0.10) 0%, rgba(14,14,14,1) 60%);
  border-color: rgba(239,58,76,0.30);
}
.phase-card .phase-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.phase-card .phase-num {
  font: 200 56px/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--fg-5);
}
.phase-card.featured .phase-num { color: var(--brand); font-weight: 300; }
.phase-card .phase-tag {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  color: var(--fg-3);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-faint);
}
.phase-card.featured .phase-tag {
  color: var(--brand); background: rgba(239,58,76,0.12); border-color: rgba(239,58,76,0.25);
}
.phase-card h3 {
  font: 300 26px/1.2 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0 0 8px;
}
.phase-card .duration {
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.phase-card p {
  font: 400 14px/1.6 var(--font-sans);
  color: var(--fg-3);
  margin: 0 0 20px;
}
.phase-card .phase-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.phase-card .phase-list li {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--fg-3);
  display: flex; gap: 10px; align-items: flex-start;
}
.phase-card .phase-list li::before {
  content: ""; display: block; width: 4px; height: 4px; border-radius: 999px;
  background: var(--fg-5); margin-top: 8px; flex-shrink: 0;
}
.phase-card.featured .phase-list li::before { background: var(--brand); }
.phase-card .phase-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--border-faint);
  display: flex; align-items: center; justify-content: space-between;
  font: 500 11px/1 var(--font-sans);
  color: var(--fg-5);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.phase-card.featured .phase-foot { border-top-color: rgba(239,58,76,0.18); color: var(--brand); }

@media (max-width: 1000px) { .roadmap { grid-template-columns: 1fr; } }

/* ---------- FOUNDERS ---------- */
.founders {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  max-width: 1080px; margin: 0 auto;
}
.founder {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  transition: all 280ms var(--ease-out);
}
.founder:hover { border-color: var(--border-medium); transform: translateY(-2px); }
.founder .photo {
  width: 100%; aspect-ratio: 4/5;
  border-radius: 14px;
  background: linear-gradient(160deg, #1a1010 0%, #0a0808 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.founder .photo::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(400px 300px at 60% 35%, rgba(150,80,80,0.3), transparent 65%);
}
.founder .photo .initials {
  font: 200 60px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.85);
  position: relative; z-index: 1;
}
.founder .photo .corner-mark {
  position: absolute;
  bottom: 14px; left: 14px; z-index: 2;
  font: 600 9px/1 var(--font-sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.founder .photo .founder-photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.founder .name {
  font: 500 18px/1.2 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.founder .role {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand);
  margin-top: -10px;
}
.founder .bio {
  font: 400 13px/1.55 var(--font-sans);
  color: var(--fg-3);
  margin: 0;
}
.founder .links {
  display: flex; gap: 10px; margin-top: auto;
}
.founder .links a {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ink-300);
  border: 1px solid var(--border-faint);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  transition: all 200ms var(--ease-out);
}
.founder .links a:hover { color: var(--brand); border-color: rgba(239,58,76,0.3); }
.founder .links a svg { width: 14px; height: 14px; stroke-width: 1.8; }
.founder .links a .sk-mark {
  font: var(--w-bold) 12px/1 var(--font-sans);
  letter-spacing: -0.02em;
}
@media (max-width: 880px) { .founders { grid-template-columns: 1fr; } }

/* ---------- STATS ---------- */
.stats {
  margin: 0 auto;
  max-width: 1000px;
  background:
    linear-gradient(160deg, rgba(239,58,76,0.06) 0%, rgba(14,14,14,1) 70%),
    var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  padding: 56px 32px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px rgba(0,0,0,0.55);
}
.stats::before {
  content: "";
  position: absolute; inset: -1px;
  background-image: url("../assets/background-grain.png");
  background-size: cover;
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 10px;
  border-right: 1px solid var(--border-faint); padding: 0 24px;
  position: relative; z-index: 1;
}
.stat:last-child { border-right: 0; }
.stat .num {
  font: 200 clamp(48px, 5.6vw, 76px)/1 var(--font-sans);
  letter-spacing: -0.04em;
  color: var(--fg-1);
}
.stat .num span.unit {
  color: var(--brand);
  font-weight: 300;
}
.stat .lbl {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-4);
}
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr; gap: 32px; padding: 44px 24px; }
  .stat { border-right: 0; border-bottom: 1px solid var(--border-faint); padding-bottom: 32px; }
  .stat:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-top: 1px solid var(--border-soft);
  padding: 24px 0;
  cursor: pointer;
}
.faq-item:last-child { border-bottom: 1px solid var(--border-soft); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font: 500 18px/1.4 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.faq-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--ink-300);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3);
  transition: all 240ms var(--ease-out);
}
.faq-icon svg { width: 14px; height: 14px; stroke-width: 2; transition: transform 240ms var(--ease-out); }
.faq-item.open .faq-icon { background: var(--brand); color: #fff; }
.faq-item.open .faq-icon svg { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--ease-out), margin-top 240ms var(--ease-out), opacity 240ms var(--ease-out);
  opacity: 0;
  font: 400 15px/1.65 var(--font-sans);
  color: var(--fg-3);
}
.faq-item.open .faq-a {
  max-height: 360px;
  margin-top: 14px;
  opacity: 1;
}

/* ---------- FINAL CTA ---------- */
.cta-final {
  position: relative;
  margin: 0 auto;
  max-width: 1080px;
  text-align: center;
  padding: 96px 32px;
  border-radius: 28px;
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(239,58,76,0.18), transparent 60%),
    linear-gradient(180deg, var(--surface-card) 0%, #0a0a0a 100%);
  border: 1px solid var(--border-medium);
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("../assets/background-grain.png");
  background-size: cover; mix-blend-mode: screen; opacity: 0.15;
  pointer-events: none;
}
.cta-final::after {
  content: "";
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: var(--hairline-red);
}
.cta-final h2 {
  font: 200 clamp(40px, 5.4vw, 76px)/1.05 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--fg-1);
  margin: 0;
  position: relative; z-index: 1;
  text-wrap: balance;
}
.cta-final h2 .accent { color: var(--brand); font-weight: 300; }
.cta-final .lede {
  margin: 24px auto 0;
  max-width: 540px;
  font: 400 16px/1.6 var(--font-sans);
  color: var(--fg-3);
  position: relative; z-index: 1;
}
.cta-final .row { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.cta-final .reassure {
  margin-top: 28px;
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  font: 500 11.5px/1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-5);
  position: relative; z-index: 1;
}
.cta-final .reassure span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- FOOTER ---------- */
.footer {
  position: relative; z-index: 1;
  padding: 80px 0 40px;
  margin-top: 80px;
  border-top: 1px solid var(--border-faint);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
}
.footer-brand .nav-wm { font-size: 22px; }
.footer-brand p {
  margin: 16px 0 0; max-width: 360px;
  font: 400 14px/1.6 var(--font-sans);
  color: var(--fg-4);
}
.footer-news {
  margin-top: 24px;
  display: flex; gap: 8px; align-items: center;
  background: var(--ink-200);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  max-width: 340px;
  text-decoration: none;
  transition: border-color 200ms var(--ease-out);
}
.footer-news:hover { border-color: var(--border-medium); }
.footer-news .footer-news-label {
  flex: 1; color: var(--fg-5);
  font: 500 13px/1 var(--font-sans);
}
.footer-news button {
  height: 36px; padding: 0 18px;
  background: var(--brand); color: #fff;
  border: 0; border-radius: 999px;
  font: 600 12px/1 var(--font-sans);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
}
.footer-news button:hover { background: var(--red-400); box-shadow: 0 0 0 1px rgba(239,58,76,0.5), 0 0 16px rgba(239,58,76,0.3); }

.footer-col h5 {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font: 500 13px/1 var(--font-sans);
  color: var(--fg-4);
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
  max-width: 1200px; margin: 56px auto 0; padding: 24px 32px 0;
  border-top: 1px solid var(--border-faint);
  display: flex; justify-content: space-between; align-items: center;
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-5);
  letter-spacing: 0.04em;
}
.footer-bottom .links { display: flex; gap: 20px; }
.footer-bottom .links a:hover { color: var(--brand); }
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- BOOK MODAL (Cal.com embed) ---------- */
.book-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out);
}
.book-overlay.open { opacity: 1; pointer-events: auto; }
.book-modal {
  background: #0e0e0e;
  border: 1px solid var(--border-medium);
  border-radius: 22px;
  width: min(960px, 96vw);
  height: min(720px, 92vh);
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(239,58,76,0.18);
  transform: translateY(20px) scale(0.97);
  transition: transform 320ms var(--ease-out);
}
.book-overlay.open .book-modal { transform: translateY(0) scale(1); }
.book-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-faint);
  background: rgba(5,5,5,0.6);
}
.book-head .ttl {
  font: 600 13px/1 var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand);
  display: flex; align-items: center; gap: 10px;
}
.book-head .ttl .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }
.book-close {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--ink-300);
  border: 1px solid var(--border-faint);
  color: var(--fg-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 200ms var(--ease-out);
}
.book-close:hover { color: var(--fg-1); background: var(--ink-400); }
.book-close svg { width: 16px; height: 16px; stroke-width: 2; }
.book-iframe-wrap {
  height: calc(100% - 60px);
  position: relative;
  background: #0a0a0a;
}
.book-iframe-wrap iframe {
  width: 100%; height: 100%; border: 0; background: #0a0a0a;
}
.book-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  color: var(--fg-3);
}
.book-loading .spinner {
  width: 36px; height: 36px;
  border: 2px solid var(--border-soft);
  border-top-color: var(--brand);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.book-loading .label {
  font: 500 13px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-5);
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Mobile/responsive smoothing ---------- */
@media (max-width: 720px) {
  .section { padding: 80px 0; }
  .hero { padding: 64px 0 56px; }
  .nav { padding: 0 20px; }
  .shell, .shell-narrow { padding: 0 20px; }
}


/* ---------- PHILOSOPHY ---------- */
.philosophy { position: relative; }
.philosophy::before {
  content: "";
  position: absolute; inset: 0;
  /* Top radial glow removed — it created a hard red band at the section seam.
     Global red ambience is provided by .bg-vignette. */
  pointer-events: none;
}
.philo-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
  margin-bottom: 80px;
}
.philo-col {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 36px 32px 32px;
  overflow: hidden;
}
.philo-col.hustler { opacity: 0.78; }
.philo-col.systemizer {
  border-color: rgba(239,58,76,0.22);
}
.philo-col.systemizer::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(239,58,76,0.08), transparent 60%);
  pointer-events: none;
}
.philo-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; position: relative; z-index: 1; }
.philo-tag {
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-4);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  align-self: flex-start;
}
.philo-tag.tag-after {
  color: var(--brand);
  background: rgba(239,58,76,0.12);
}
.philo-head h3 {
  font: 300 26px/1.15 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin: 0;
}
.philo-head h3 em { font-style: normal; font-weight: 500; color: var(--brand); }
.philo-col.hustler .philo-head h3 em { color: var(--fg-2); }
.philo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.philo-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  align-items: start;
  font: 400 14.5px/1.5 var(--font-sans);
  color: var(--fg-3);
}
.philo-mark {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--fg-5);
  margin-top: 1px;
}
.philo-mark.on {
  background: rgba(239,58,76,0.14);
  color: var(--brand);
}
.philo-mark svg { width: 12px; height: 12px; stroke-width: 2.5; }
.philo-divider {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 24px;
  position: relative;
}
.philo-divider-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(239,58,76,0.4), transparent);
  min-height: 60px;
}
.philo-divider-arrow {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(239,58,76,0.12);
  margin: 16px 0;
}
.philo-divider-arrow svg { width: 18px; height: 18px; stroke-width: 2; }

.philo-stack {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid var(--border-faint);
}
.philo-stack-head { text-align: center; margin-bottom: 32px; }
.philo-stack-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.philo-stack-head h3 {
  font: 300 30px/1.15 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin: 0;
}
.philo-stack-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-bottom: 40px;
}
.philo-stack-card {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  position: relative;
}
.philo-stack-logo {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  margin-bottom: 18px;
}
.philo-stack-logo img { width: 26px; height: 26px; object-fit: contain; }
.philo-stack-card h4 {
  font: 500 19px/1.2 var(--font-sans);
  color: var(--fg-1);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.philo-stack-card p {
  font: 400 14px/1.6 var(--font-sans);
  color: var(--fg-3);
  margin: 0;
}
.philo-quote {
  font: 300 22px/1.4 var(--font-sans);
  color: var(--fg-2);
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 760px;
  padding: 24px 32px;
  border-left: 2px solid var(--brand);
  border-right: 2px solid var(--brand);
  background: rgba(239,58,76,0.03);
  border-radius: 4px;
}
@media (max-width: 860px) {
  .philo-grid { grid-template-columns: 1fr; gap: 16px; }
  .philo-divider { padding: 8px 0; flex-direction: row; }
  .philo-divider-line { width: 100%; height: 1px; min-height: 0; background: linear-gradient(90deg, transparent, rgba(239,58,76,0.4), transparent); }
  .philo-divider-arrow { transform: rotate(90deg); margin: 0 16px; }
  .philo-stack-grid { grid-template-columns: 1fr; }
  .philo-quote { font-size: 18px; padding: 18px 20px; }
}


/* ---------- PHILOSOPHY · The one question (signature contrast) ---------- */
.philo-question {
  max-width: 1100px;
  margin: 40px auto 56px;
  padding: 32px 28px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, rgba(239,58,76,0.05), transparent 70%),
    var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  position: relative;
  text-align: center;
}
.philo-question-tag {
  display: inline-block;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(239,58,76,0.12);
  margin-bottom: 22px;
}
.philo-question-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
}
.philo-q-old, .philo-q-new { display: flex; flex-direction: column; gap: 10px; }
.philo-q-old { opacity: 0.55; }
.philo-q-old .philo-q-text { text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.25); }
.philo-q-label {
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-5);
}
.philo-q-new .philo-q-label { color: var(--brand); }
.philo-q-text {
  font: 300 22px/1.3 var(--font-sans);
  color: var(--fg-2);
  letter-spacing: -0.01em;
}
.philo-q-new .philo-q-text { color: var(--fg-1); font-weight: 400; }
.philo-q-text em { font-style: normal; color: var(--brand); font-weight: 500; }
.philo-q-arrow {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(239,58,76,0.12);
}
.philo-q-arrow svg { width: 20px; height: 20px; stroke-width: 2; }

/* ---------- PHILOSOPHY · 3 Systems ---------- */
.three-sys {
  max-width: 1100px;
  margin: 0 auto 40px;
  padding-top: 56px;
  border-top: 1px solid var(--border-faint);
}
.three-sys-head { text-align: center; margin-bottom: 36px; }
.three-sys-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.three-sys-head h3 {
  font: 300 32px/1.15 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.three-sys-head h3 .accent { color: var(--brand); font-weight: 400; }
.three-sys-lede {
  font: 400 15.5px/1.55 var(--font-sans);
  color: var(--fg-3);
  max-width: 640px;
  margin: 0 auto;
}
.three-sys-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 32px;
}
.tsys-card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
  display: flex; flex-direction: column;
}
.tsys-card-claude {
  border-color: rgba(239,58,76,0.22);
  background:
    linear-gradient(180deg, rgba(239,58,76,0.04), rgba(239,58,76,0)) ,
    var(--surface-card);
}
.tsys-num {
  font: 200 44px/1 var(--font-sans);
  color: var(--fg-5);
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
.tsys-card-claude .tsys-num { color: var(--brand); opacity: 0.7; }
.tsys-name {
  font: 500 19px/1.2 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.tsys-tag {
  font: 500 11.5px/1.3 var(--font-sans);
  color: var(--brand);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.tsys-card:not(.tsys-card-claude) .tsys-tag { color: var(--fg-4); }
.tsys-desc {
  font: 400 13.5px/1.6 var(--font-sans);
  color: var(--fg-3);
  margin: 0 0 22px;
  flex: 1;
}
.tsys-tool {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-2);
  letter-spacing: 0.02em;
}
.tsys-tool img { width: 16px; height: 16px; object-fit: contain; }
.tsys-tool-claude {
  background: rgba(239,58,76,0.10);
  border-color: rgba(239,58,76,0.28);
  color: var(--fg-1);
}
.three-sys-insight {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.three-sys-insight p {
  font: 300 19px/1.4 var(--font-sans);
  color: var(--fg-2);
  letter-spacing: -0.01em;
  margin: 0;
}
.three-sys-insight p strong {
  color: var(--fg-1);
  font-weight: 500;
}
.tsys-insight-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239,58,76,0.4), transparent);
}
.three-sys-insight .tsys-insight-line:last-of-type { transform: scaleX(-1); }
@media (max-width: 860px) {
  .philo-question-pair { grid-template-columns: 1fr; gap: 16px; }
  .philo-q-arrow { transform: rotate(90deg); }
  .three-sys-grid { grid-template-columns: 1fr; }
  .three-sys-insight { grid-template-columns: 1fr; }
  .three-sys-insight .tsys-insight-line { display: none; }
}

/* ---------- 6 LAYERS · The Stack ---------- */
.layers-section { position: relative; }
.layers-section::before {
  content: "";
  position: absolute; inset: 0;
  /* Bottom radial glow removed — it created a hard red band at the Fit seam.
     Global red ambience is provided by .bg-vignette. */
  pointer-events: none;
}
.layers-tier-tag {
  display: flex; align-items: center; gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px;
}
.layers-tier-claude { margin-bottom: 14px; }
.layers-tier-notion { margin-top: 14px; }
.layers-tier-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}
.layers-tier-text {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-4);
}
.layers-tier-claude .layers-tier-text { color: var(--brand); }
.layers-tier-text .layer-tool-img { width: 16px; height: 16px; object-fit: contain; }

.layers-stack {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
}
.layer-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 28px 32px;
  border-bottom: 1px solid var(--border-faint);
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.layer-row:last-child { border-bottom: 0; }
.layer-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--border-soft);
}
.layer-claude {
  background:
    linear-gradient(90deg, rgba(239,58,76,0.04), rgba(239,58,76,0.0) 60%),
    var(--surface-card);
}
.layer-claude::before { background: var(--brand); }
.layer-notion::before { background: rgba(255,255,255,0.18); }
.layer-row:hover { background: var(--surface-card-hover); }

.layer-num {
  font: 200 56px/1 var(--font-sans);
  color: var(--fg-5);
  letter-spacing: -0.04em;
  text-align: right;
  padding-top: 4px;
}
.layer-claude .layer-num { color: var(--brand); opacity: 0.75; }

.layer-body { display: flex; flex-direction: column; gap: 12px; }
.layer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
}
.layer-meta { display: flex; flex-direction: column; gap: 4px; }
.layer-name {
  font: 400 24px/1.15 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.02em;
}
.layer-tier {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-4);
}
.layer-tool-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  font: 500 11.5px/1 var(--font-sans);
  color: var(--fg-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.layer-claude .layer-tool-badge {
  background: rgba(239,58,76,0.10);
  border-color: rgba(239,58,76,0.28);
  color: var(--fg-1);
}
.layer-tool-badge img { width: 14px; height: 14px; object-fit: contain; }

.layer-desc {
  font: 400 14.5px/1.6 var(--font-sans);
  color: var(--fg-3);
  margin: 0;
  max-width: 780px;
}
.layer-foot {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-faint);
}
.layer-car, .layer-q {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--fg-4);
}
.layer-car svg, .layer-q svg {
  width: 14px; height: 14px; stroke-width: 1.8;
  flex-shrink: 0; margin-top: 2px;
}
.layer-car { color: var(--fg-3); }
.layer-car svg { color: var(--fg-4); }
.layer-q { font-style: italic; max-width: 560px; }
.layer-q svg { color: var(--brand); }

@media (max-width: 760px) {
  .layer-row { grid-template-columns: 1fr; padding: 24px 22px; gap: 14px; }
  .layer-num { text-align: left; font-size: 40px; }
  .layer-head { flex-direction: column; gap: 12px; }
  .layer-tool-badge { align-self: flex-start; }
  .layer-foot { flex-direction: column; gap: 10px; }
}


/* ===================== LAYERS · Interactive (v2) ===================== */
.layers-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

/* ------- LEFT: visual stack ------- */
.layers-visual {
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 22px 22px 18px;
  position: relative;
}
.layers-stack-v2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
}

/* The bar itself */
.layer-bar {
  --bar-bg: rgba(255,255,255,0.025);
  --bar-fg: var(--fg-2);
  --bar-edge: rgba(255,255,255,0.18);
  --bar-fill: transparent;
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px 16px 22px;
  background: var(--bar-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  /* Cascade-in animation: starts hidden, plays once when .in is added */
  opacity: 0;
  transform: translateX(-16px);
  transition:
    background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.layer-bar.in {
  animation: lbar-in 700ms var(--ease-out) backwards;
  animation-delay: inherit;
}
@keyframes lbar-in {
  0% { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}
/* once the entry animation finishes, the element keeps these end-state values */
.layer-bar.in { opacity: 1; transform: translateX(0); }

/* left edge stripe — tool color */
.lbar-edge {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--bar-edge);
  transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.layer-bar.layer-notion .lbar-edge { background: rgba(255,255,255,0.22); }
.layer-bar.layer-claude .lbar-edge { background: var(--brand); }

/* fill that sweeps in on YES */
.lbar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(33,213,104,0.10), rgba(33,213,104,0.02) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(0.22,0.61,0.36,1);
  pointer-events: none;
}

.lbar-num {
  font: 200 28px/1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--fg-5);
  text-align: right;
  position: relative; z-index: 1;
}
.lbar-meta {
  display: flex; flex-direction: column; gap: 3px;
  position: relative; z-index: 1;
  min-width: 0;
}
.lbar-name {
  font: 500 17px/1.15 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.lbar-tier {
  font: 500 10.5px/1 var(--font-sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-4);
}
.lbar-tool {
  position: relative; z-index: 1;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  opacity: 0.6;
  transition: opacity var(--dur-base) var(--ease-out);
}
.layer-bar.layer-claude .lbar-tool {
  background: rgba(239,58,76,0.08);
  border-color: rgba(239,58,76,0.24);
}
.lbar-tool img { width: 12px; height: 12px; object-fit: contain; }

.lbar-status {
  position: relative; z-index: 1;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lbar-ico {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  animation: lbar-pop 360ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.lbar-ico svg { width: 14px; height: 14px; stroke-width: 2.5; }
.lbar-ico-yes {
  background: rgba(33,213,104,0.14);
  color: var(--success);
  box-shadow: 0 0 0 1px rgba(33,213,104,0.32);
}
.lbar-ico-no {
  background: rgba(255,255,255,0.04);
  color: var(--fg-5);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
@keyframes lbar-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* Pending pulse on the active bar */
.lbar-pulse {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(239,58,76,0.6);
  animation: lbar-pulse 1.6s var(--ease-out) infinite;
}
@keyframes lbar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,58,76,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(239,58,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,58,76,0); }
}

/* States */
.layer-bar.active {
  border-color: rgba(239,58,76,0.32);
  background: rgba(239,58,76,0.03);
}
.layer-bar.active .lbar-edge {
  background: var(--brand);
  box-shadow: 0 0 12px rgba(239,58,76,0.55);
}
.layer-bar.active .lbar-name { color: #fff; }
.layer-bar.state-yes {
  border-color: rgba(33,213,104,0.22);
}
.layer-bar.state-yes .lbar-fill { transform: scaleX(1); }
.layer-bar.state-yes .lbar-edge { background: var(--success); }
.layer-bar.state-yes .lbar-name { color: var(--fg-1); }
.layer-bar.state-yes .lbar-tool { opacity: 1; }
.layer-bar.state-no {
  opacity: 0.55;
}
.layer-bar.state-no .lbar-name { color: var(--fg-3); }

/* ------- LEFT: tier tags (overrides the old static layout) ------- */
.layers-visual .layers-tier-tag {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 6px;
  padding: 6px 6px;
}
.layers-visual .layers-tier-claude { margin: 0 0 10px; }
.layers-visual .layers-tier-notion { margin: 10px 0 0; }
.layers-visual .layers-tier-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft), transparent);
}
.layers-visual .layers-tier-text {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-4);
}
.layers-visual .layers-tier-claude .layers-tier-text { color: var(--brand); }

/* ------- RIGHT: quiz card ------- */
.layers-quiz {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(239,58,76,0.06), transparent 70%),
    var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-xl);
  padding: 28px 28px 24px;
  display: flex; flex-direction: column;
  position: sticky;
  top: 24px;
}
.lq-head {
  border-bottom: 1px solid var(--border-faint);
  padding-bottom: 20px;
  margin-bottom: 22px;
}
.lq-eyebrow {
  display: inline-block;
  font: 600 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.lq-title {
  font: 300 26px/1.15 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.lq-title .accent { color: var(--brand); font-weight: 400; }
.lq-progress {
  display: flex; gap: 7px;
}
.lq-dot {
  width: 22px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.lq-dot.current {
  background: var(--brand);
  transform: scaleY(1.4);
}
.lq-dot.yes { background: var(--success); }
.lq-dot.no  { background: rgba(255,255,255,0.18); }

.lq-body { display: flex; flex-direction: column; }
.lq-counter {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-5);
  margin-bottom: 16px;
}
.lq-counter .sep { color: var(--fg-6, var(--fg-5)); margin: 0 4px; opacity: 0.5; }

.lq-layer-pill {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  margin-bottom: 22px;
  font: 500 12px/1 var(--font-sans);
  color: var(--fg-2);
}
.lq-tool-claude.lq-layer-pill {
  background: rgba(239,58,76,0.08);
  border-color: rgba(239,58,76,0.24);
}
.lq-layer-num {
  font: 600 11px/1 var(--font-sans);
  color: var(--brand);
  letter-spacing: 0.04em;
}
.lq-layer-name { color: var(--fg-1); font-weight: 500; }
.lq-layer-sep { color: var(--fg-5); }
.lq-layer-tier {
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-4);
}

.lq-question {
  font: 300 22px/1.35 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  min-height: 88px;
  animation: lq-q-in 360ms var(--ease-out) backwards;
}
@keyframes lq-q-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lq-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
.lq-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 56px;
  background: var(--ink-200);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  color: var(--fg-1);
  font: 600 14.5px/1 var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.lq-btn:hover { background: var(--ink-300); border-color: var(--border-medium); transform: translateY(-1px); }
.lq-btn:active { transform: translateY(0); }
.lq-btn-ico {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
}
.lq-btn-ico svg { width: 13px; height: 13px; stroke-width: 2.5; }
.lq-btn-yes .lq-btn-ico {
  background: rgba(33,213,104,0.14);
  color: var(--success);
}
.lq-btn-yes:hover {
  background: rgba(33,213,104,0.08);
  border-color: rgba(33,213,104,0.32);
}
.lq-btn-no .lq-btn-ico {
  background: rgba(255,255,255,0.06);
  color: var(--fg-3);
}

.lq-back {
  align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 2px;
  padding: 2px 0;
  background: transparent;
  border: 0;
  color: var(--fg-4);
  font: 500 16px/1 var(--font-sans);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.lq-back:hover { color: var(--fg-2); }
.lq-back span { display: inline-block; line-height: 1; }

/* v23 — Hint is positioned absolutely relative to .layers-visual so it
   sits flush under the LEFT card and never moves vertically when the
   right form's height changes. The left card itself is pinned to its
   natural height via align-self:start so it doesn't stretch with the
   grid row. */
.layers-visual { position: relative; align-self: start; }
.layers-step-hint {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  right: 0;
  margin: 0;
  justify-content: center;
  text-align: center;
}
@media (max-width: 920px) {
  /* In stacked mobile layout the hint goes back to normal flow. */
  .layers-step-hint { position: static; margin-top: 18px; }
  .layers-visual { align-self: auto; }
}

/* ------- Results ------- */
.lq-results { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 6px; }
.lq-score-wrap {
  position: relative;
  width: 140px; height: 140px;
  margin-bottom: 18px;
}
.lq-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.lq-ring-bg {
  fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 6;
}
.lq-ring-fill {
  fill: none; stroke: var(--brand); stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dasharray 1000ms cubic-bezier(0.22,0.61,0.36,1);
}
.lq-score-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lq-score-num {
  font: 200 48px/1 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.04em;
  display: flex; align-items: baseline; gap: 2px;
}
.lq-score-out {
  font: 400 18px/1 var(--font-sans);
  color: var(--fg-4);
  letter-spacing: 0;
}
.lq-score-label {
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-4);
  margin-top: 4px;
}
.lq-score-msg {
  font: 400 15px/1.55 var(--font-sans);
  color: var(--fg-2);
  margin: 8px 0 26px;
  max-width: 360px;
}
.lq-results-cta {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 100%;
}
.lq-retry {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  color: var(--fg-4);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 4px 0;
}
.lq-retry:hover { color: var(--fg-2); }
.lq-retry svg { width: 13px; height: 13px; stroke-width: 2; }

@media (max-width: 920px) {
  .layers-split { grid-template-columns: 1fr; }
  .layers-quiz { position: static; }
}
@media (max-width: 540px) {
  .layers-visual { padding: 16px 14px 14px; }
  .layer-bar { padding: 14px 14px 14px 20px; gap: 10px; grid-template-columns: 40px 1fr auto; }
  .layer-bar .lbar-tool { display: none; }
  .lbar-num { font-size: 22px; }
  .lbar-name { font-size: 15px; }
  .lq-question { font-size: 18px; min-height: 0; }
  .lq-buttons { grid-template-columns: 1fr; }
}


/* ===================== LAYERS · v3 — side brackets, neutralized colors, tighter ===================== */

/* Big numeric in heading */
.layers-section h2 .big-num {
  font-weight: 200;
  color: var(--brand);
  font-size: 1.05em;
  margin-right: 2px;
}

/* tighten the section vertically */
.layers-section { padding-top: 40px; padding-bottom: 80px; }
.layers-section .section-head { margin-bottom: 36px; }

/* Two-up grouping with side bracket */
.layers-stack-v2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
}
.layer-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: stretch;
}
.lg-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The bracket: a vertical line with small horizontal nubs at top/bottom + a label */
.lg-bracket {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.lg-bracket-shape {
  position: relative;
  width: 12px;
  align-self: stretch;
  /* vertical line */
}
.lg-bracket-shape::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--border-medium, var(--border-soft));
}
/* top + bottom nubs */
.lg-bracket-shape::after {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  height: 1px;
  background: var(--border-medium, var(--border-soft));
  top: 14px;
  box-shadow: 0 calc((100% - 28px) * 1) 0 0 var(--border-medium, var(--border-soft));
}
/* The box-shadow trick above only renders one nub. Use a real second nub via separate pseudo (drawn below). */
.lg-bracket::before, .lg-bracket::after {
  /* not used — kept reserved */
}
.lg-bracket-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.lg-bracket-label .layer-tool-img {
  width: 22px; height: 22px;
  object-fit: contain;
  opacity: 0.95;
}

/* === Neutralize the Claude-specific bar coloring ===
   The user wants Notion bars and Claude bars to look identical visually. */
.layer-bar.layer-claude .lbar-edge { background: rgba(255,255,255,0.22); }
/* When active, override back to brand for the pulse highlight — uniformly */
.layer-bar.active .lbar-edge { background: var(--brand); box-shadow: 0 0 12px rgba(239,58,76,0.55); }
/* Remove the inline tool icon spacing (we removed the element from DOM) — no-op safety */

/* Tighten bars */
.layer-bar {
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  padding: 13px 16px 13px 18px;
  border-radius: 12px;
}
.lbar-num {
  font-size: 24px;
}
.lbar-name { font-size: 16px; }
.lbar-tier { font-size: 10px; }

/* Tighten the visual container itself */
.layers-visual {
  padding: 18px;
}

/* === Tighten the quiz panel ===*/
.layers-quiz {
  padding: 24px 24px 20px;
}
.lq-head { padding-bottom: 16px; margin-bottom: 18px; }
.lq-title { font-size: 24px; margin-bottom: 14px; }
.lq-question { font-size: 20px; min-height: 76px; margin-bottom: 22px; }
.lq-buttons { gap: 8px; }
.lq-btn { height: 52px; font-size: 14px; }

/* Score panel — no more "layers in place" label, tighter spacing */
.lq-score-wrap {
  width: 128px; height: 128px;
  margin-bottom: 14px;
}
.lq-score-num { font-size: 44px; }
.lq-score-out { font-size: 17px; }
.lq-score-msg { margin: 4px 0 22px; font-size: 14.5px; }

@media (max-width: 920px) {
  .layers-visual { padding: 14px; }
}
@media (max-width: 540px) {
  .layer-group { grid-template-columns: 1fr; gap: 8px; }
  .lg-bracket {
    flex-direction: row;
    align-items: center;
    padding: 0 0 4px 4px;
  }
  .lg-bracket-shape { display: none; }
  .lg-bracket-label { flex-direction: row; align-items: center; }
}


/* ===== BRACKET SHAPE — clean version (overrides v3 attempt) ===== */
.lg-bracket {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
}
.lg-bracket-shape {
  position: relative;
  width: 14px;
  align-self: stretch;
  border-right: 1px solid var(--border-medium, rgba(255,255,255,0.14));
}
.lg-bracket-shape::before,
.lg-bracket-shape::after {
  content: "";
  position: absolute;
  right: 0;
  width: 12px;
  height: 1px;
  background: var(--border-medium, rgba(255,255,255,0.14));
}
.lg-bracket-shape::before { top: 14px; }
.lg-bracket-shape::after  { bottom: 14px; }

/* Label: logo on top, label below — vertical stack, centered vertically */
.lg-bracket-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.lg-bracket-label .layer-tool-img {
  width: 22px; height: 22px;
  object-fit: contain;
  opacity: 0.95;
}


/* ===================== PHILOSOPHY · The Paradox (closed-loop flywheel) ===================== */
.paradox {
  max-width: 1100px;
  margin: 56px auto 56px;
  padding-top: 56px;
  border-top: 1px solid var(--border-faint);
}
.paradox-head {
  text-align: center;
  margin-bottom: 40px;
}
.paradox-head .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
}
.paradox-head h3 {
  font: 300 32px/1.18 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.paradox-head h3 .accent {
  color: var(--brand);
  font-weight: 400;
  font-style: italic;
}
.paradox-lede {
  font: 400 15.5px/1.55 var(--font-sans);
  color: var(--fg-3);
  max-width: 600px;
  margin: 0 auto;
}

/* The stage holds the SVG + 4 HTML labels */
.paradox-stage {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1;
  margin: 0 auto 48px;
}
.paradox-svg {
  width: 100%; height: 100%;
  overflow: visible;
}

/* SVG arcs use the brand red */
.paradox-arc {
  fill: none;
  stroke: #ef3a4c;
  stroke-width: 1.6;
  stroke-linecap: round;
  /* gentle pulse to convey perpetual motion */
  animation: paradox-arc-pulse 4s ease-in-out infinite;
}
.paradox-arc:nth-of-type(2) { animation-delay: 1s; }
.paradox-arc:nth-of-type(3) { animation-delay: 2s; }
.paradox-arc:nth-of-type(4) { animation-delay: 3s; }
@keyframes paradox-arc-pulse {
  0%, 100% { stroke-opacity: 0.55; }
  50%      { stroke-opacity: 0.95; }
}

.paradox-dot {
  fill: #0a0a0a;
  stroke: #ef3a4c;
  stroke-width: 1.6;
}
.paradox-center-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  fill: var(--fg-5);
}
.paradox-center-text {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: -0.02em;
  fill: var(--fg-2);
}

/* The 4 nodes around the loop */
.pnode {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 8px 14px 8px 8px;
  font: 500 13px/1.2 var(--font-sans);
  color: var(--fg-1);
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  max-width: 220px;
}
.pnode-num {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.pnode-text {
  letter-spacing: -0.005em;
}
/* Position chips just outside the loop at 12/3/6/9 */
.pnode-top    { top: 0;            left: 50%;          transform: translate(-50%, -10%); }
.pnode-right  { top: 50%;          right: 0;           transform: translate(15%, -50%); }
.pnode-bottom { bottom: 0;         left: 50%;          transform: translate(-50%, 10%); }
.pnode-left   { top: 50%;          left: 0;            transform: translate(-15%, -50%); }

/* ===== Exits ===== */
.paradox-exits {
  max-width: 920px;
  margin: 0 auto;
}
.paradox-exit-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.paradox-exit-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-medium, rgba(255,255,255,0.14)), transparent);
}
.paradox-exit-tag {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}
.paradox-exit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pexit {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 22px 20px 20px;
}
.pexit-featured {
  border-color: rgba(239,58,76,0.28);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(239,58,76,0.06), transparent 70%),
    var(--surface-card);
}
.pexit-ico {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  color: var(--fg-2);
  margin-bottom: 14px;
}
.pexit-featured .pexit-ico {
  background: rgba(239,58,76,0.10);
  border-color: rgba(239,58,76,0.26);
  color: var(--brand);
}
.pexit-ico svg { width: 16px; height: 16px; stroke-width: 1.8; }
.pexit-num {
  position: absolute;
  top: 20px; right: 22px;
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.22em;
  color: var(--fg-5);
}
.pexit-name {
  font: 500 17px/1.2 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.pexit-desc {
  font: 400 13.5px/1.6 var(--font-sans);
  color: var(--fg-3);
  margin: 0;
}

@media (max-width: 860px) {
  .paradox-stage { max-width: 420px; }
  .pnode { font-size: 12px; max-width: 160px; }
  .pnode-text { white-space: normal; }
  .paradox-exit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .paradox-stage { max-width: 360px; }
  .pnode { font-size: 11px; padding: 6px 10px 6px 6px; max-width: 130px; }
  .pnode-num { width: 18px; height: 18px; font-size: 10px; }
  .paradox-head h3 { font-size: 26px; }
}


/* ========================================================
   PHILOSOPHY · Paradox v2 — side-by-side, 2-node oscillator
   Overrides earlier .paradox / .paradox-stage / .pnode rules.
   ======================================================== */
.paradox {
  /* outer container — keep border + spacing from v1 */
  display: block;
}
.paradox-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.paradox-head {
  text-align: left;
  margin: 0;
  max-width: none;
}
.paradox-head h3 {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  font-size: 30px;
}
.paradox-head .paradox-lede {
  margin-left: 0;
  margin-right: 0;
  max-width: 480px;
}

/* The 2-node oscillator stage */
.pflow-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 520/280;
}
.pflow-svg {
  width: 100%; height: 100%;
  overflow: visible;
}
/* faint static backbones under the animated dashes */
.pflow-base {
  fill: none;
  stroke: rgba(239,58,76,0.10);
  stroke-width: 1.2;
}
/* animated dashed arrows */
.pflow-arc {
  fill: none;
  stroke: #ef3a4c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 9;
  animation: pflow-dash 1.6s linear infinite;
}
.pflow-arc-bottom {
  /* reverse so the bottom curve flows right → left visually */
  animation-direction: reverse;
}
@keyframes pflow-dash {
  to { stroke-dashoffset: -15; }
}

/* Node circles, perched at left and right of the curve loop */
.pflow-node {
  position: absolute;
  top: 50%;
  width: 30%;
  aspect-ratio: 1;
  max-width: 150px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 999px;
  background: var(--surface-card);
  border: 1.5px solid var(--brand);
  padding: 12px;
  box-shadow:
    0 0 0 6px rgba(239,58,76,0.06),
    0 0 28px rgba(239,58,76,0.18),
    inset 0 1px 0 rgba(255,255,255,0.05);
  animation: pflow-node-pulse 3.2s ease-in-out infinite;
}
.pflow-node-left  { left: 0; }
.pflow-node-right { right: 0; animation-delay: 1.6s; }
@keyframes pflow-node-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(239,58,76,0.04), 0 0 24px rgba(239,58,76,0.14); }
  50%      { box-shadow: 0 0 0 8px rgba(239,58,76,0.10), 0 0 36px rgba(239,58,76,0.28); }
}
.pflow-node-eyebrow {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.24em;
  color: var(--brand);
  margin-bottom: 6px;
}
.pflow-node-name {
  font: 500 16px/1.2 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.pflow-node-sub {
  font: 400 11px/1.4 var(--font-sans);
  color: var(--fg-4);
  max-width: 100px;
}
@media (max-width: 860px) {
  .paradox-grid { grid-template-columns: 1fr; gap: 32px; }
  .paradox-head h3 { font-size: 26px; }
  .pflow-wrap { max-width: 440px; }
  .pflow-node { width: 32%; }
}
@media (max-width: 480px) {
  .pflow-node-name { font-size: 14px; }
  .pflow-node-sub { font-size: 10px; }
  .pflow-node-eyebrow { font-size: 9px; }
}

/* ========================================================
   LAYERS · v4 — logos inline, no brackets, red "no" state
   ======================================================== */

/* hide the old bracket markup if it's still in the DOM anywhere */
.lg-bracket { display: none; }
.layer-group { display: block; }
.layer-group + .layer-group { margin-top: 14px; }
.lg-bars { display: flex; flex-direction: column; gap: 6px; }

/* Add a logo cell at the front of every bar */
.layer-bar {
  grid-template-columns: 22px 36px 1fr auto;
  gap: 12px;
  padding: 13px 16px 13px 18px;
}
.lbar-logo {
  position: relative; z-index: 1;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-soft);
  transition: opacity var(--dur-base) var(--ease-out);
}
.lbar-logo img { width: 12px; height: 12px; object-fit: contain; }
/* leave .layer-claude .lbar-logo neutral too — user wants identical styling */

/* === STATE: NO → red treatment === */
.layer-bar.state-no {
  opacity: 1;                                       /* override the v2 dim */
  border-color: rgba(239,58,76,0.22);
  background: rgba(239,58,76,0.04);
}
.layer-bar.state-no .lbar-edge {
  background: var(--brand);
  opacity: 0.7;
}
.layer-bar.state-no .lbar-fill {
  background: linear-gradient(90deg, rgba(239,58,76,0.12), rgba(239,58,76,0.02) 70%, transparent);
  transform: scaleX(1);
}
.layer-bar.state-no .lbar-name { color: var(--fg-2); }
.layer-bar.state-no .lbar-tier { color: var(--fg-4); }
.lbar-ico-no {
  background: rgba(239,58,76,0.16);
  color: var(--brand);
  box-shadow: 0 0 0 1px rgba(239,58,76,0.32), 0 0 12px rgba(239,58,76,0.30);
}

/* Subtle glow on the YES check icon too — match the dot vocabulary */
.lbar-ico-yes {
  box-shadow: 0 0 0 1px rgba(33,213,104,0.40), 0 0 12px rgba(33,213,104,0.32);
}

/* ========================================================
   QUIZ · v2 — circular glowing progress dots, neutral layer pill, button dots
   ======================================================== */

/* Override the rectangle progress pills with circular glowing dots */
.lq-progress { gap: 10px; align-items: center; }
.lq-dot {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  box-shadow: none;
  transform: none;
  transition: background 200ms var(--ease-out);
}
.lq-dot.current {
  background: var(--brand);
  transform: none;
  box-shadow: 0 0 0 0 rgba(239,58,76,0.6);
  animation: lq-dot-pulse-red 1.6s var(--ease-out) infinite;
}
.lq-dot.yes {
  background: var(--success);
  box-shadow:
    0 0 0 2px rgba(33,213,104,0.16),
    0 0 12px rgba(33,213,104,0.55);
}
.lq-dot.no {
  background: var(--brand);
  box-shadow:
    0 0 0 2px rgba(239,58,76,0.16),
    0 0 12px rgba(239,58,76,0.55);
}
@keyframes lq-dot-pulse-red {
  0%   { box-shadow: 0 0 0 0 rgba(239,58,76,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(239,58,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,58,76,0); }
}

/* Neutralize the layer pill — no more red tint for Claude layers */
.lq-layer-pill {
  background: rgba(255,255,255,0.03);
  border-color: var(--border-soft);
  color: var(--fg-2);
}
.lq-layer-pill .lq-layer-num { color: var(--fg-4); }
/* .lq-tool-claude.lq-layer-pill no longer applied in JSX, but neutralize anyway */
.lq-tool-claude.lq-layer-pill {
  background: rgba(255,255,255,0.03);
  border-color: var(--border-soft);
}
.lq-tool-claude .lq-layer-num { color: var(--fg-4); }

/* Add the same dot-glow vocabulary to the Yes / Not yet button icon circles */
.lq-btn-no .lq-btn-ico {
  background: rgba(239,58,76,0.14);
  color: var(--brand);
  box-shadow:
    0 0 0 2px rgba(239,58,76,0.14),
    0 0 12px rgba(239,58,76,0.40);
}
.lq-btn-yes .lq-btn-ico {
  background: rgba(33,213,104,0.14);
  color: var(--success);
  box-shadow:
    0 0 0 2px rgba(33,213,104,0.14),
    0 0 12px rgba(33,213,104,0.40);
}
.lq-btn:hover .lq-btn-ico { transform: scale(1.05); }
.lq-btn-ico { transition: transform var(--dur-base) var(--ease-out); }


/* ============================================================
   PHILOSOPHY · Paradox v3 — proper figure-8 infinity with traveling dot
   Overrides v2 oscillator arcs.
   ============================================================ */
.pflow-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 2/1;
}
.pflow-svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.pflow-base {
  fill: none;
  stroke: rgba(239,58,76,0.14);
  stroke-width: 1.2;
}
.pflow-arc {
  fill: none;
  stroke: #ef3a4c;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 6 11;
  animation: pflow-dash 1.8s linear infinite;
}
/* override the v2 arc rule so there's no animation-direction split */
.pflow-arc-top, .pflow-arc-bottom { animation-direction: normal; }
@keyframes pflow-dash {
  to { stroke-dashoffset: -17; }
}
.pflow-dot {
  fill: #ef3a4c;
  filter: drop-shadow(0 0 10px rgba(239,58,76,0.9));
}

/* Node positions — center on the lobe centers (~170 and ~390 in 560-wide viewBox) */
.pflow-node {
  width: 23%;
  max-width: 130px;
}
.pflow-node-left  { left: 30.4%; top: 50%; transform: translate(-50%, -50%); right: auto; }
.pflow-node-right { left: 69.6%; top: 50%; transform: translate(-50%, -50%); right: auto; }

@media (max-width: 860px) {
  .pflow-wrap { max-width: 480px; }
  .pflow-node { width: 26%; }
}
@media (max-width: 480px) {
  .pflow-wrap { max-width: 360px; }
}

/* ============================================================
   LAYERS · v5 — revert to bracketed grouping, darker bg, INSTANT state changes
   ============================================================ */

/* Bring back the brackets that v4 hid */
.layer-group { display: grid !important; grid-template-columns: 1fr auto; gap: 14px; align-items: stretch; }
.layer-group + .layer-group { margin-top: 14px; }
.lg-bars { display: flex; flex-direction: column; gap: 6px; }
.lg-bracket { display: flex !important; }

/* Restore the bar grid WITHOUT the inline logo cell */
.layer-bar {
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  padding: 13px 16px 13px 18px;
  border-radius: 12px;
  /* Darken the resting background to match the earlier look */
  background: rgba(255,255,255,0.018);
  /* INSTANT state changes — only the cascade-in animation keeps moving */
  transition: none;
}
.lbar-logo { display: none; }

/* Fill sweep — no transition, instant snap to scaleX(1) when state is yes/no */
.lbar-fill {
  transition: none;
}

/* Icon — no pop animation */
.lbar-ico { animation: none !important; }

/* Active state stays subtly highlighted but no transitions */
.layer-bar.active {
  border-color: rgba(239,58,76,0.32);
  background: rgba(239,58,76,0.04);
}

/* The state-yes / state-no rules still apply their colors instantly */

/* ============================================================
   QUIZ · v3 — revert progress dots back to bar pills (+ pulse on current)
   ============================================================ */
.lq-progress { gap: 8px; align-items: center; }
.lq-dot {
  width: 24px !important;
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,0.08);
  box-shadow: none !important;
  transform: none;
  transition: background 200ms var(--ease-out), transform 200ms var(--ease-out);
  animation: none;
}
.lq-dot.current {
  background: var(--brand);
  transform: scaleY(1.6);
  animation: lq-bar-pulse 1.6s ease-in-out infinite !important;
}
.lq-dot.yes {
  background: var(--success);
  box-shadow:
    0 0 0 1px rgba(33,213,104,0.18),
    0 0 8px rgba(33,213,104,0.45) !important;
}
.lq-dot.no {
  background: var(--brand);
  box-shadow:
    0 0 0 1px rgba(239,58,76,0.18),
    0 0 8px rgba(239,58,76,0.45) !important;
}
@keyframes lq-bar-pulse {
  0%, 100% { opacity: 1;   transform: scaleY(1.6); }
  50%      { opacity: 0.55; transform: scaleY(1.6); }
}


/* ============================================================
   v6 — PARADOX (two-bar feedback loop), quote, 3-sys callouts,
        quiz instant colour + pending dots + red-not-yet hover,
        curly bracket logos.
   ============================================================ */

/* === Hide the old figure-8 / pflow visual === */
.pflow-wrap, .pflow-node, .pflow-svg { display: none !important; }

/* The paradox grid should still be 2-col on desktop */
.paradox-grid { grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }

/* === The James Clear quote sits under the lede === */
.paradox-quote {
  margin: 22px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-faint);
}
.paradox-quote-text {
  font: 300 italic 15px/1.5 var(--font-sans);
  color: var(--fg-2);
  letter-spacing: -0.005em;
  max-width: 460px;
  display: block;
}
.paradox-quote-author {
  display: inline;
  font: 600 10px/1 var(--font-sans);
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-5);
  margin-left: 6px;
  white-space: nowrap;
}
/* the old centered quote at the end of the philosophy section is gone */
.philo-quote { display: none; }

/* === The Two-Bar Feedback Loop === */
.ploop {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 6px 64px;            /* room for the curving links on each side */
  max-width: 520px;
  margin: 0 auto;
}
.ploop-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 12px;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid rgba(239,58,76,0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%),
    rgba(239,58,76,0.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 28px rgba(239,58,76,0.08);
}
.ploop-num {
  font: 200 26px/1 var(--font-sans);
  color: var(--brand);
  letter-spacing: -0.02em;
  opacity: 0.85;
}
.ploop-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ploop-title {
  font: 500 16px/1.2 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.ploop-sub {
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--fg-3);
}
.ploop-pulse {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 12px rgba(239,58,76,0.65);
  animation: ploop-pulse 1.8s ease-in-out infinite;
}
.ploop-row-bottom .ploop-pulse { animation-delay: 0.9s; }
@keyframes ploop-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* The looping connectors on each side */
.ploop-link {
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  height: auto;
  overflow: visible;
  z-index: -1;
}
.ploop-link-right { right: 0; }
.ploop-link-left  { left: 0; }
.ploop-link-base {
  fill: none;
  stroke: rgba(239,58,76,0.14);
  stroke-width: 1.4;
}
.ploop-link-arc {
  fill: none;
  stroke: #ef3a4c;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  animation: ploop-dash 1.6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(239,58,76,0.55));
}
.ploop-link-left .ploop-link-arc { animation-delay: 0.8s; }
.ploop-link-head {
  fill: #ef3a4c;
  filter: drop-shadow(0 0 6px rgba(239,58,76,0.65));
}
@keyframes ploop-dash {
  to { stroke-dashoffset: -16; }
}

@media (max-width: 860px) {
  .paradox-grid { grid-template-columns: 1fr; gap: 32px; }
  .ploop { max-width: 420px; padding: 6px 56px; }
}
@media (max-width: 480px) {
  .ploop { padding: 6px 44px; }
  .ploop-link { width: 40px; }
  .ploop-title { font-size: 14px; }
  .ploop-sub { font-size: 11.5px; }
}

/* === 3-systems cards: mini logo callouts at the bottom === */
.tsys-callout {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  align-self: flex-start;
}
.tsys-callout-logo {
  width: 18px; height: 18px;
  object-fit: contain;
}
.tsys-callout-name {
  font: 600 11.5px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.tsys-callout-claude {
  background: rgba(239,58,76,0.08);
  border-color: rgba(239,58,76,0.26);
}
.tsys-callout-claude .tsys-callout-name { color: var(--fg-1); }

/* === Quiz: INSTANT colour change on click (was: red → green flash) === */
.lbar-edge,
.layer-bar.state-yes .lbar-edge,
.layer-bar.state-no  .lbar-edge,
.layer-bar.active    .lbar-edge {
  transition: none !important;
}
.layer-bar,
.layer-bar.state-yes,
.layer-bar.state-no,
.layer-bar.active {
  transition: none !important;
}

/* === Pending circle on each layer bar (matches the button vocabulary) === */
.lbar-status { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.lbar-ico-pending {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.18);
  animation: none;
}
.lbar-ico-pending.active {
  border-style: solid;
  border-color: rgba(239,58,76,0.45);
  box-shadow:
    0 0 0 2px rgba(239,58,76,0.10),
    0 0 14px rgba(239,58,76,0.45);
  animation: lbar-pending-pulse 1.4s ease-in-out infinite;
}
@keyframes lbar-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239,58,76,0.06), 0 0 8px  rgba(239,58,76,0.35); }
  50%      { box-shadow: 0 0 0 3px rgba(239,58,76,0.16), 0 0 16px rgba(239,58,76,0.65); }
}

/* === Quiz "Not yet" button — add the red hover === */
.lq-btn-no:hover {
  background: rgba(239,58,76,0.06) !important;
  border-color: rgba(239,58,76,0.32) !important;
  transform: translateY(-1px);
}
.lq-btn-no:hover .lq-btn-ico {
  box-shadow:
    0 0 0 2px rgba(239,58,76,0.22),
    0 0 16px rgba(239,58,76,0.55);
  transform: scale(1.05);
}

/* === Quiz results: breakdown chips + tier tag === */
.lq-score-breakdown {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
  margin: 6px 0 10px;
}
.lq-score-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-soft);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--fg-2);
}
.lq-score-chip img { width: 13px; height: 13px; object-fit: contain; }
.lq-score-chip strong { color: var(--fg-1); font-weight: 600; }
.lq-score-chip-claude {
  background: rgba(239,58,76,0.08);
  border-color: rgba(239,58,76,0.26);
  color: var(--fg-1);
}
.lq-score-tier {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  text-align: center;
  margin-bottom: 8px;
}

/* === Curly-brace bracket replacing the straight-line bracket === */
.lg-bracket {
  position: relative;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  width: 96px;
  padding: 0 4px 0 0;
}
.lg-curly {
  width: 40px;
  height: 100%;
  min-height: 100px;
  overflow: visible;
}
.lg-curly-path {
  fill: none;
  stroke: rgba(255,255,255,0.18);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.lg-claude .lg-curly-path {
  stroke: rgba(239,58,76,0.55);
  filter: drop-shadow(0 0 6px rgba(239,58,76,0.35));
}
.lg-bracket-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
}
.lg-bracket-mark .layer-tool-img {
  width: 38px; height: 38px;
  object-fit: contain;
}
.lg-notion .lg-bracket-mark .layer-tool-img { filter: brightness(0.95); }

/* Make sure the old bracket shape pseudo-elements stay hidden */
.lg-bracket-shape, .lg-bracket-label { display: none !important; }

/* Grid: bars stretch, bracket sits on the right */
.layer-group {
  grid-template-columns: 1fr 110px !important;
  gap: 6px !important;
}

@media (max-width: 540px) {
  .lg-bracket { width: auto; padding: 0; justify-content: flex-start; gap: 10px; }
  .lg-curly { display: none; }
  .layer-group { grid-template-columns: 1fr !important; }
  .lg-bracket-mark { width: 32px; height: 32px; }
  .lg-bracket-mark .layer-tool-img { width: 28px; height: 28px; }
}


/* ============================================================
   v7 — Möbius strip replaces the two-bar loop. Tighter callouts.
   ============================================================ */

/* Hide the previous two-bar feedback loop */
.ploop, .ploop-row, .ploop-link { display: none !important; }

/* ===== Möbius strip stage ===== */
.mobius {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 720/320;
}
.mobius-svg { width: 100%; height: 100%; overflow: visible; }

/* the soft tinted body of the ribbon */
.mobius-body {
  fill: url(#mobius-fill);
  stroke: rgba(239,58,76,0.22);
  stroke-width: 1.4;
  filter: drop-shadow(0 8px 30px rgba(239,58,76,0.10));
}

/* halo at the central twist crossover */
.mobius-twist-halo {
  fill: url(#mobius-twist);
  opacity: 0.55;
  animation: mobius-halo 3.6s ease-in-out infinite;
}
@keyframes mobius-halo {
  0%, 100% { opacity: 0.35; r: 40; }
  50%      { opacity: 0.75; r: 56; }
}

/* the two edges */
.mobius-edge {
  fill: none;
  stroke: #ef3a4c;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 6 11;
  filter: drop-shadow(0 0 6px rgba(239,58,76,0.45));
  animation: mobius-flow 2.4s linear infinite;
}
.mobius-edge-b { animation-direction: reverse; opacity: 0.85; }
@keyframes mobius-flow {
  to { stroke-dashoffset: -17; }
}

/* travelling dot — "one continuous surface" */
.mobius-dot {
  fill: #ef3a4c;
  filter: drop-shadow(0 0 10px rgba(239,58,76,0.9));
}

/* HTML labels positioned over the SVG */
.mobius-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent),
    rgba(10,10,10,0.78);
  border: 1px solid rgba(239,58,76,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 6px 24px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  width: 168px;
  z-index: 1;
}
.mobius-label-left  { left: -8px; }
.mobius-label-right { right: -8px; }
.mobius-label-num {
  font: 700 9.5px/1 var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.9;
}
.mobius-label-title {
  font: 500 15px/1.2 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.mobius-label-sub {
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--fg-3);
}

@media (max-width: 860px) {
  .mobius { max-width: 480px; }
  .mobius-label { width: 150px; padding: 10px 12px; }
}
@media (max-width: 540px) {
  .mobius-label { width: 130px; padding: 9px 10px; }
  .mobius-label-title { font-size: 13px; }
  .mobius-label-sub { font-size: 10.5px; }
}

/* ===== Compacter Notion / Claude callouts on the 3-systems cards ===== */
.tsys-callout {
  margin-top: 14px;
  padding: 6px 11px 6px 8px;
  gap: 7px;
  border-radius: 999px;
}
.tsys-callout-logo {
  width: 14px; height: 14px;
}
.tsys-callout-name {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.14em;
}


/* ============================================================
   v8 — Compact callouts, active=neutral, Möbius real ribbon
   ============================================================ */

/* === 3-systems callouts: tighten vertical padding === */
.tsys-callout {
  margin-top: 12px;
  padding: 3px 11px 3px 8px !important;
  gap: 7px;
  align-items: center;
}
.tsys-callout-logo { width: 14px; height: 14px; }
.tsys-callout-name {
  font: 600 10.5px/1 var(--font-sans);
  letter-spacing: 0.14em;
}

/* === Layer bar status icons — ensure inline SVGs render properly === */
.lbar-status { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.lbar-ico {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.lbar-ico svg {
  width: 12px;
  height: 12px;
  display: block;
  stroke-width: 3;
}
.lbar-ico-yes svg, .lbar-ico-yes svg * { stroke: var(--success); }
.lbar-ico-no  svg, .lbar-ico-no  svg * { stroke: var(--brand); }

/* === Active question bar — NEUTRAL white tint (not red) === */
.layer-bar.active {
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.045) !important;
  /* smooth transitions back in for active ↔ yes/no swap */
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out) !important;
}
.layer-bar.active .lbar-edge {
  background: rgba(255,255,255,0.35) !important;
  box-shadow: 0 0 8px rgba(255,255,255,0.18) !important;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out) !important;
}
.layer-bar.active .lbar-name { color: #fff; }

/* === Smooth transitions for the colour change === */
.layer-bar,
.layer-bar.state-yes,
.layer-bar.state-no {
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out) !important;
}
.lbar-edge,
.layer-bar.state-yes .lbar-edge,
.layer-bar.state-no  .lbar-edge {
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out) !important;
}

/* === Pending circle on the active question — also neutral white === */
.lbar-ico-pending {
  border: 1px dashed rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.04);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.lbar-ico-pending.active {
  border-style: solid;
  border-color: rgba(255,255,255,0.55) !important;
  background: rgba(255,255,255,0.06);
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.10),
    0 0 12px rgba(255,255,255,0.35) !important;
  animation: lbar-pending-pulse-white 1.6s ease-in-out infinite !important;
}
@keyframes lbar-pending-pulse-white {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 0 6px  rgba(255,255,255,0.25); }
  50%      { box-shadow: 0 0 0 3px rgba(255,255,255,0.16), 0 0 14px rgba(255,255,255,0.55); }
}

/* Same for the quiz progress dot — current = white pulse instead of red */
.lq-dot.current {
  background: rgba(255,255,255,0.7) !important;
  animation: lq-bar-pulse 1.6s ease-in-out infinite !important;
}

/* ============================================================
   Möbius v2 — actual ribbon outline, no fill, glow, continuous loop
   ============================================================ */

/* Disable v1 visuals */
.mobius-body, .mobius-twist-halo, .mobius-edge { display: none !important; }

.mobius {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  aspect-ratio: 800/320;
}
.mobius-svg {
  width: 100%; height: 100%;
  overflow: visible;
  filter: drop-shadow(0 16px 36px rgba(239,58,76,0.18));
}

/* travelling dot — bright + glowing */
.mobius-dot {
  fill: #fff;
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 14px rgba(239,58,76,0.95));
}

/* labels — lift them slightly more so they don't sit on the strip */
.mobius-label-left  { left: -16px; }
.mobius-label-right { right: -16px; }


/* ============================================================
   v9 — Möbius v3: small, 3-D dark-red ribbon, diagonal labels, red dot
   ============================================================ */

.mobius {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 800/320;
  padding: 60px 0;        /* room for the diagonal labels above/below */
  box-sizing: content-box;
}
.mobius-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 22px 36px rgba(0,0,0,0.75));
}

/* Travelling dot — back to the brand-red dot we had before */
.mobius-dot {
  fill: #ef3a4c;
  filter: drop-shadow(0 0 6px #ef3a4c) drop-shadow(0 0 14px rgba(239,58,76,0.85));
}

/* === Diagonal label layout: top-left and bottom-right === */
.mobius-label {
  position: absolute;
  top: auto;
  bottom: auto;
  transform: none;
  width: 180px;
  padding: 11px 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent),
    rgba(10,10,10,0.85);
  border: 1px solid rgba(239,58,76,0.24);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 24px rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.mobius-label-left {
  top: 0;
  left: -8px;
}
.mobius-label-right {
  bottom: 0;
  right: -8px;
}
.mobius-label-num {
  font: 700 9.5px/1 var(--font-sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.9;
}
.mobius-label-title {
  font: 500 15px/1.2 var(--font-sans);
  color: var(--fg-1);
  letter-spacing: -0.01em;
}
.mobius-label-sub {
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--fg-3);
}

@media (max-width: 860px) {
  .mobius { max-width: 380px; padding: 50px 0; }
  .mobius-label { width: 160px; padding: 9px 11px; }
}
@media (max-width: 540px) {
  .mobius { max-width: 320px; padding: 44px 0; }
  .mobius-label { width: 140px; padding: 8px 10px; }
  .mobius-label-title { font-size: 13px; }
  .mobius-label-sub { font-size: 10.5px; }
}


/* ============================================================
   v10 — Symmetric infinity loop, labels back on the sides
   ============================================================ */

.mobius {
  max-width: 480px;
  padding: 0;           /* no diagonal-label padding any more */
}
.mobius-svg {
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.65));
}

/* Labels back to vertically-centred, on the left and right of the strip */
.mobius-label {
  position: absolute;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 148px;
  padding: 11px 13px;
}
.mobius-label-left  { left: -12px;  right: auto !important; }
.mobius-label-right { right: -12px; left: auto !important; width: 158px; }

@media (max-width: 860px) {
  .mobius { max-width: 420px; padding: 0; }
  .mobius-label { width: 134px; padding: 9px 11px; }
  .mobius-label-right { width: 144px; }
}
@media (max-width: 540px) {
  .mobius { max-width: 340px; padding: 0; }
  .mobius-label { width: 120px; padding: 8px 10px; }
  .mobius-label-right { width: 130px; }
  .mobius-label-title { font-size: 13px; }
  .mobius-label-sub { font-size: 10.5px; }
}


/* ============================================================
   v11 — CTAs in ways-out cards, callout spacing, insight line under,
        curlier brackets, white claude curly, popping dot
   ============================================================ */

/* === Ways-out card buttons === */
.pexit { display: flex; flex-direction: column; }
.pexit-desc { flex: 1; margin-bottom: 14px; }
.pexit-cta {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-medium);
  color: var(--fg-1);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.pexit-cta:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.pexit-cta .arrow { transition: transform var(--dur-base) var(--ease-out); }
.pexit-cta:hover .arrow { transform: translateX(3px); }

.pexit-cta-primary {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(239,58,76,0.28);
}
.pexit-cta-primary:hover {
  background: var(--red-400);
  box-shadow: 0 10px 22px rgba(239,58,76,0.42);
}

/* === Three-sys callouts: revert internal padding, tighten gap above === */
.tsys-callout {
  padding: 8px 12px 8px 10px !important;
  margin-top: 6px !important;
  gap: 8px;
}
.tsys-callout-logo { width: 16px; height: 16px; }
.tsys-callout-name { font-size: 11px; letter-spacing: 0.15em; }

/* the description paragraph above the callout no longer takes flex:1 —
   the card naturally compresses. Tighten the gap between desc + callout: */
.tsys-card .tsys-desc { margin-bottom: 0; flex: 0 1 auto; }

/* === Three-sys insight — red line goes UNDERNEATH the sentence === */
.three-sys-insight {
  grid-template-columns: 1fr !important;
  text-align: center;
  gap: 14px !important;
  max-width: 760px;
}
.three-sys-insight p {
  margin: 0 auto;
  max-width: 640px;
}
.three-sys-insight .tsys-insight-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(239,58,76,0.45) 50%,
    transparent);
  transform: none;
}
/* Drop the second-line scaleX trick that the v1 grid expected */
.three-sys-insight .tsys-insight-line:last-of-type { transform: none; }

/* === Curlier brackets, smaller logo column, both brackets white === */
.layer-group { grid-template-columns: 1fr 88px !important; }
.lg-bracket {
  width: 84px;
  padding: 0;
  gap: 8px;
}
.lg-curly {
  width: 32px;
  height: 100%;
  min-height: 100px;
}
.lg-curly-path {
  /* curlier: the apex now reaches further inward toward the logo,
     and the upper/lower arms come back closer to the bars */
  stroke: rgba(255,255,255,0.32);
  stroke-width: 1.6;
  filter: none;
}
/* Override the Claude-red rule — user wants both brackets in the same white */
.lg-claude .lg-curly-path {
  stroke: rgba(255,255,255,0.32) !important;
  filter: none !important;
}
.lg-bracket-mark { width: 38px; height: 38px; }
.lg-bracket-mark .layer-tool-img { width: 34px; height: 34px; }

@media (max-width: 540px) {
  .layer-group { grid-template-columns: 1fr !important; }
}

/* === Möbius dot — bigger, with a halo + small trail for visibility === */
.mobius-dot {
  fill: #ff6c7c;
  r: 9 !important;
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 10px #ff6c7c)
    drop-shadow(0 0 22px rgba(239,58,76,1));
  animation: mobius-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes mobius-dot-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px #fff)
            drop-shadow(0 0 10px #ff6c7c)
            drop-shadow(0 0 18px rgba(239,58,76,0.85));
  }
  50% {
    filter: drop-shadow(0 0 6px #fff)
            drop-shadow(0 0 16px #ff6c7c)
            drop-shadow(0 0 28px rgba(239,58,76,1));
  }
}


/* ============================================================
   v12 — dot/strip tuning, callout centering, insight line under, btn fixes
   ============================================================ */

/* === Three-sys callout: center vertically in the remaining card space
       so the gap above and below is equal. Slight padding reduction. === */
.tsys-card { padding-bottom: 24px; }                /* fixed bottom anchor */
.tsys-card .tsys-desc { flex: 0 1 auto; }
.tsys-callout {
  margin: auto 0 0 !important;                      /* push to bottom of available space */
  padding: 7px 11px 7px 9px !important;             /* 1px tighter all round */
  align-self: flex-start;
}
/* center the callout in the empty space below desc by giving it auto margins */
.tsys-callout {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* === Möbius dot: darker red, no white halo === */
.mobius-dot {
  fill: #c42030 !important;
  r: 8 !important;
  filter:
    drop-shadow(0 0 4px rgba(239,58,76,0.85))
    drop-shadow(0 0 12px rgba(239,58,76,0.55)) !important;
  animation: mobius-dot-pulse-dark 1.6s ease-in-out infinite !important;
}
@keyframes mobius-dot-pulse-dark {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(239,58,76,0.7))
            drop-shadow(0 0 9px rgba(239,58,76,0.45));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(239,58,76,0.95))
            drop-shadow(0 0 16px rgba(239,58,76,0.70));
  }
}

/* === Möbius strip: soften shadow intensity, slight opacity drop === */
.mobius-svg {
  /* v18 — drop-shadow removed; was creating a dirty black halo */
  filter: none !important;
  opacity: 1;
}

/* === Insight line under the "Notion is the system." sentence === */
.three-sys-insight {
  display: block !important;
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}
.three-sys-insight p {
  display: inline-block;
  position: relative;
  margin: 0;
  white-space: nowrap;
  padding-bottom: 14px;
  font: 300 19px/1.4 var(--font-sans);
  color: var(--fg-2);
}
.three-sys-insight p::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    rgba(239,58,76,0.0),
    rgba(239,58,76,0.55) 18%,
    rgba(239,58,76,0.55) 82%,
    rgba(239,58,76,0.0));
}
.three-sys-insight .tsys-insight-line { display: none !important; }

@media (max-width: 760px) {
  .three-sys-insight p {
    white-space: normal;
    font-size: 16px;
  }
}

/* === "Join Systemizers" CTA: dark bg, red text, red border === */
.pexit-cta:not(.pexit-cta-primary) {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(239,58,76,0.55);
  color: var(--brand);
}
.pexit-cta:not(.pexit-cta-primary):hover {
  background: rgba(0,0,0,0.75);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 2px rgba(239,58,76,0.12),
              0 6px 18px rgba(239,58,76,0.20);
  transform: translateY(-1px);
}

/* === "Book a Call" primary: keep red on hover (override the general .pexit-cta:hover) === */
.pexit-cta-primary {
  background: var(--brand) !important;
  border: 1px solid transparent !important;
  color: #0a0a0a !important;
  box-shadow: 0 6px 16px rgba(239,58,76,0.28);
}
.pexit-cta-primary:hover {
  background: var(--red-400) !important;
  border-color: transparent !important;
  color: #0a0a0a !important;
  box-shadow: 0 12px 30px rgba(239,58,76,0.50),
              0 0 0 1px rgba(239,58,76,0.6) !important;
  transform: translateY(-2px);
}


/* ============================================================
   v13 — Callout slot, card-2 styled to match its button, static dot
   ============================================================ */

/* === Callout slot: takes all empty space below desc, centers callout vertically === */
.tsys-card .tsys-desc { flex: 0 1 auto !important; }
.tsys-callout-slot {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
}
/* reset earlier auto-margin attempts on the callout itself */
.tsys-callout {
  margin: 0 !important;
  padding: 7px 11px 7px 9px !important;
}

/* === Three-ways-out card #2 — uses the same pexit-featured styling as card #3.
       (No nth-child overrides any more.) === */

/* === Möbius dot — constant colour, no pulse fade === */
.mobius-dot {
  fill: #c42030 !important;
  r: 8 !important;
  filter:
    drop-shadow(0 0 4px rgba(239,58,76,0.75))
    drop-shadow(0 0 10px rgba(239,58,76,0.45)) !important;
  animation: none !important;
}


/* ============================================================
   v14 — Override .tsys-callout's stale align-self so the slot can centre it
   ============================================================ */
.tsys-callout {
  align-self: flex-start !important;     /* keep horizontally LEFT-aligned */
  margin: 0 !important;
}
.tsys-callout-slot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;                /* vertical centre */
  align-items: flex-start;                /* horizontally left */
  width: 100%;
  min-height: 0;
  padding: 4px 0;                         /* tiny inset so the callout doesn't touch the desc or the bottom */
}


/* ============================================================
   v15 — Guaranteed visible gap above the callout (matches the bottom)
   ============================================================ */

/* Force the card to be a flex column — some browsers caching the older grid */
.three-sys-grid .tsys-card {
  display: flex !important;
  flex-direction: column !important;
}
.three-sys-grid .tsys-card .tsys-desc {
  flex: 0 1 auto !important;
  margin: 0 !important;
}

/* The slot now uses a minimum-height + symmetric padding + center alignment.
   Even when there is no extra empty space, the padding guarantees a visible
   gap above and below the callout. */
.three-sys-grid .tsys-callout-slot {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 22px 0 0 !important;             /* top-only — the card's bottom padding mirrors this below the callout */
}

/* Card bottom padding matches the slot's top padding so gap-above == gap-below */
.three-sys-grid .tsys-card {
  padding-bottom: 22px !important;
}

/* Callout itself: neutral margins, left-aligned */
.three-sys-grid .tsys-callout {
  align-self: flex-start !important;
  margin: 0 !important;
}

/* ============================================================
   v26 — Layer-group: final override (must come AFTER the v8/v9
   rules at lines 5183 + 5542 + 6001 which kept resetting it to
   grid). Goal: bars + logo are flex siblings, bars take all
   remaining space, logo bracket is fixed-width with the logo at
   flex-end. Padding tuned empirically (measured live) so the
   bars→logo gap and the logo→card-right-edge gap are both 28px.
   ============================================================ */
.layer-group {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  align-items: center !important;
}
.layer-group .lg-bars { flex: 1 1 auto !important; min-width: 0 !important; }
.layer-group .lg-bracket {
  flex: 0 0 auto !important;
  /* v26 — bracket width = 28 (bars→logo) + 44 (logo) + 10 (padding-right
     that pulls the logo away from the card-content-right edge) = 82px.
     Together with the card's 18px right padding, that gives a 28/28 split. */
  width: 82px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 10px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
}
.lg-bracket-mark {
  width: 44px !important;
  height: 44px !important;
}
.lg-bracket-mark .layer-tool-img {
  width: 42px !important;
  height: 42px !important;
}

@media (max-width: 540px) {
  .layer-group { display: block !important; }
  .layer-group .lg-bracket { justify-content: flex-start !important; }
}