@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* Anntie account portal — same theme + animations as the platform consoles */
:root {
  --bg: #0f1419; --panel: #1a2230; --panel2: #222d3d;
  --txt: #e6e9ee; --dim: #8b95a5; --line: #2c3a4d;
  --green: #2ecc71; --amber: #f39c12; --red: #e74c3c; --blue: #3498db;
}
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--bg); color: var(--txt);
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif; min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }
h1 { font-size: 22px; margin-bottom: 6px; }
h2 { font-size: 15px; margin-bottom: 12px; color: var(--dim);
     text-transform: uppercase; letter-spacing: .05em; }
h3 { font-size: 16px; }

/* ==========================================================================
   Account topbar — mirrors .acct-topbar in the web app
   ========================================================================== */
.topbar {
  display: flex; align-items: center; gap: 24px; padding: 0 24px;
  height: 60px; border-bottom: 1px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700;
         font-size: 15px; }
.brand .logo { width: 34px; height: 34px; border-radius: 9px; display: flex;
  align-items: center; justify-content: center; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--blue), #6c5ce7);
  box-shadow: 0 6px 18px rgba(52,152,219,.4); flex: none; }
.brand small { display: block; color: var(--dim); font-weight: 400;
               font-size: 11px; }
.nav { display: flex; gap: 4px; align-items: center; flex: 1; }
.nav a {
  color: var(--dim); padding: 8px 13px; border-radius: 8px; font-size: 13px;
  font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.nav a.on, .nav a:hover { color: var(--txt); background: var(--panel2); }
.nav-right { display: flex; align-items: center; gap: 8px; }

/* layout */
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 26px;
        animation: page-in .35s cubic-bezier(.2,.8,.3,1); }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); }
                     to   { opacity: 1; transform: none; } }
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 22px; margin-bottom: 18px;
}
.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dim { color: var(--dim); }
.big { font-size: 30px; font-weight: 700; color: var(--blue); }
.ok { color: var(--green); } .warn { color: var(--amber); } .bad { color: var(--red); }

/* generic forms (account-area pages) */
label { display: block; font-size: 12px; color: var(--dim); margin: 12px 0 4px; }
input, select {
  width: 100%; background: var(--bg); border: 1px solid var(--line);
  color: var(--txt); border-radius: 8px; padding: 9px 11px; font: inherit;
}
input:focus, select:focus { border-color: var(--blue); outline: none;
  box-shadow: 0 0 0 3px rgba(52,152,219,.15); }
.btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid
  var(--line); border-radius: 8px; background: var(--panel2); color: var(--txt);
  padding: 8px 15px; font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .15s, filter .15s, transform .1s;
}
.btn:hover { border-color: var(--blue); filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn.primary { border-color: var(--green); color: var(--green); font-weight: 600; }
.btn.danger { border-color: var(--red); color: var(--red); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.flash { color: var(--green); font-size: 13px; }
.error-msg { color: var(--red); font-size: 13px; margin-top: 8px; }

/* tables */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--dim); font-weight: 500; font-size: 12px;
     border-bottom: 1px solid var(--line); padding: 8px 10px; }
td { padding: 9px 10px; border-bottom: 1px solid var(--panel2); }
.pill { font-size: 11.5px; padding: 3px 10px; border-radius: 14px;
        border: 1px solid var(--line); color: var(--dim); }
.pill.up { color: var(--green); border-color: var(--green); }
.pill.warn { color: var(--amber); border-color: var(--amber); }

/* ==========================================================================
   Auth pages (login / signup) — same .auth-card look as the web console
   ========================================================================== */
.auth-body { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background:
    radial-gradient(1000px 500px at 20% -10%, rgba(52,152,219,.12), transparent),
    radial-gradient(800px 400px at 90% 110%, rgba(46,204,113,.10), transparent),
    var(--bg); }
.auth-wrap { width: min(430px, 92vw); }
.auth-wrap:has(.auth-card-wide) { width: min(560px, 92vw); }
.auth-card { background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px 30px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
  animation: auth-in .45s cubic-bezier(.2,.9,.3,1.2); }
.auth-card-wide { width: min(560px, 92vw); }
@keyframes auth-in { from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; } }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth-logo { width: 44px; height: 44px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--blue), #6c5ce7); flex: none;
  box-shadow: 0 6px 18px rgba(52,152,219,.4); }
.auth-logo-img { height: 44px; width: auto; max-width: 160px;
  object-fit: contain; flex: none; }
.auth-title { font-size: 18px; font-weight: 700; }
.auth-sub { font-size: 12px; color: var(--dim); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--dim); margin: 0; }
.auth-form input, .auth-form select { background: var(--panel2);
  border: 1px solid var(--line); color: var(--txt); padding: 10px 12px;
  border-radius: 8px; font-size: 14px; }
.auth-form input:focus, .auth-form select:focus { outline: none;
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(52,152,219,.15); }
.auth-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-sec { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--blue); margin-top: 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.auth-submit { justify-content: center; padding: 11px; font-size: 14px;
  font-weight: 600; margin-top: 4px; }
.auth-error { background: rgba(231,76,60,.12); border: 1px solid
  rgba(231,76,60,.4); color: #f1948a; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; margin-bottom: 12px; }
.auth-foot { text-align: center; margin-top: 16px; font-size: 12px; }
.auth-alt { text-align: center; margin-top: 14px; font-size: 13px;
  color: var(--dim); }

/* ==========================================================================
   Landing hero + plan cards — staggered rise-in
   ========================================================================== */
.hero { text-align: center; padding: 84px 20px 56px;
        animation: auth-in .5s cubic-bezier(.2,.8,.3,1); }
.hero h1 { font-size: 42px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.15; margin-bottom: 10px; }
.hero h1 em { font-style: normal;
  background: linear-gradient(90deg, var(--blue), #6c5ce7);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { color: var(--dim); max-width: 560px; margin: 14px auto 28px;
          font-size: 15px; }
.hero .btn { padding: 12px 22px; font-size: 14px; }
.hero .hero-shot { display: block; width: min(960px, 100%);
  margin: 46px auto 0; border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 26px 70px rgba(0,0,0,.55); }

/* --- landing: agentic showcase ----------------------------------------- */
.hero-tag { display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--blue); padding: 6px 14px; margin-bottom: 18px;
  border: 1px solid rgba(52,152,219,.35); border-radius: 999px;
  background: rgba(52,152,219,.07); }

.stat-band { display: flex; gap: 14px; justify-content: space-between;
  flex-wrap: wrap; margin: 8px 0 30px; }
.stat { flex: 1 1 160px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 16px; }
.stat-v { font-size: 34px; font-weight: 800; line-height: 1;
  background: linear-gradient(90deg, var(--blue), #6c5ce7);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-l { color: var(--dim); font-size: 12px; margin-top: 8px; }

.feat h3 { margin: 10px 0 6px; font-size: 15px; }
.feat p { margin: 0; font-size: 13px; line-height: 1.55; }
.feat-i { width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; color: var(--blue);
  background: rgba(52,152,219,.1); border: 1px solid rgba(52,152,219,.28);
  font-size: 16px; }

.showcase { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px;
  align-items: center; margin-top: 26px; }
.showcase .shot { display: block; width: 100%; border-radius: 12px;
  border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.shot-copy h2 { font-size: 20px; color: var(--txt); margin: 0 0 10px; }
.shot-copy p { font-size: 13.5px; line-height: 1.6; }
.ticks { list-style: none; margin: 14px 0 0; padding: 0; }
.ticks li { padding: 5px 0; font-size: 13px; color: var(--txt); }
.ticks li i { color: var(--green); margin-right: 8px; }
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px; }
.step { position: relative; padding-top: 6px; }
.step h4 { margin: 10px 0 4px; font-size: 13.5px; }
.step p { margin: 0; font-size: 12.5px; line-height: 1.55; }
.step-n { width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff; border-radius: 9px;
  background: linear-gradient(135deg, var(--blue), #6c5ce7); }

.cta { text-align: center; padding: 44px 20px; }
.cta h2 { font-size: 26px; color: var(--txt); margin: 0 0 10px;
  font-weight: 800; }
.cta h2 em { font-style: normal;
  background: linear-gradient(90deg, var(--blue), #6c5ce7);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta p { margin: 0 auto 22px; max-width: 460px; }

/* platform stack — layer-by-layer */
.layers { display: flex; flex-direction: column; gap: 12px;
  margin-top: 14px; }
.layer { display: flex; gap: 16px; padding: 18px 20px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; }
.layer-n { width: 34px; height: 34px; flex-shrink: 0; display: grid;
  place-items: center; font-weight: 800; font-size: 14px; color: #fff;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), #6c5ce7); }
.layer-body h3 { margin: 4px 0 6px; font-size: 15px; }
.layer-body h3 .dim { font-size: 12px; font-weight: 400; }
.layer-body p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; }
.layer-body p.biz { margin: 0; color: var(--green); font-size: 12.5px; }
.layer-body p.biz i { margin-right: 6px; }
.layer.agentic { border-color: rgba(52,152,219,.5);
  background: linear-gradient(135deg, rgba(52,152,219,.08), var(--panel));
  box-shadow: 0 0 0 1px rgba(52,152,219,.12), 0 14px 40px rgba(0,0,0,.35); }

/* alternate showcase: copy right, image left */
.showcase.flip .shot-copy { order: 2; }
.showcase.flip .shot { order: 1; }

/* image slider — slides crossfade; first slide sets the box size */
.shot-slider { position: relative; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.shot-slider img { display: block; width: 100%;
  transition: opacity .7s ease; }
.shot-slider img + img { position: absolute; inset: 0; height: 100%;
  object-fit: cover; opacity: 0; }
.shot-slider img.active { opacity: 1; }
.shot-slider img:not(.active) { opacity: 0; }
.shot-dots { position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 8px; }
.shot-dots i { width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.35); cursor: pointer;
  transition: background .3s, transform .3s; }
.shot-dots i.active { background: var(--blue); transform: scale(1.25); }
.hero-slider { width: min(960px, 100%); margin: 46px auto 0;
  border-radius: 14px; box-shadow: 0 26px 70px rgba(0,0,0,.55); }

/* plan illustrations */
.plan-illus { display: block; width: 220px; max-width: 100%;
  height: auto; margin: 2px auto 14px; }
.plan-illus.plan-illus-svg > svg { display: block; width: 220px;
  max-width: 100%; height: auto; margin: 0 auto; }
.plan-illus.plan-illus-icon { font-size: 44px; color: var(--blue);
  text-align: center; }
.plan-card .ticks { margin-top: 10px; }

/* scroll reveal — everything else stays as-is when JS is off (no-JS: the
   .reveal class is added by markup but only matters once .in lands via JS) */
.reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; } }
.plan-card { text-align: left; animation: rise-in .5s both;
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.plan-card:hover { transform: translateY(-3px); border-color: var(--blue);
  box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.plan-card.current { border-color: var(--blue); }
.plan-card:nth-child(2) { animation-delay: .1s; }
.plan-card:nth-child(3) { animation-delay: .2s; }
.plan-card:nth-child(4) { animation-delay: .3s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; } }
.price { font-size: 24px; font-weight: 700; color: var(--blue); margin: 8px 0; }

/* ==========================================================================
   Project cards — same .proj-card grid as the web console
   ========================================================================== */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill,
  minmax(280px, 1fr)); gap: 16px; margin-bottom: 22px; }
.proj-card { background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px; display: flex; flex-direction:
  column; gap: 10px; animation: rise-in .4s both;
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.proj-card:hover { transform: translateY(-2px); border-color: var(--blue);
  box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.proj-card-top { display: flex; align-items: center; gap: 12px; }
.proj-avatar { width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-weight:
  700; font-size: 17px; color: #fff;
  background: linear-gradient(135deg, var(--blue), #6c5ce7); }
.proj-id { flex: 1; min-width: 0; }
.proj-name { font-weight: 700; font-size: 15px; }
.proj-client { font-size: 12px; color: var(--dim); display: flex; gap: 6px;
  align-items: center; }
.proj-badge { background: rgba(46,204,113,.15); color: var(--green);
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .04em; }
.proj-badge.gray { background: var(--panel2); color: var(--dim); }
.proj-meta { display: flex; gap: 14px; font-size: 11px; color: var(--dim);
  flex-wrap: wrap; }
.proj-meta span { display: flex; align-items: center; gap: 5px; }
.proj-actions { display: flex; gap: 8px; margin-top: auto; }
/* adjust lines/seats dropdown — restores old account-page controls */
.adj { position: relative; }
.adj > summary { list-style: none; cursor: pointer; user-select: none; }
.adj > summary::-webkit-details-marker { display: none; }
.adj[open] > summary { border-color: var(--blue); color: var(--blue); }
.adj-form { margin-top: 8px; min-width: 210px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.adj-lbl { display: flex; align-items: center; justify-content:
  space-between; gap: 10px; font-size: 12px; color: var(--dim);
  margin: 0 0 8px; }
.adj-lbl input { width: 76px; padding: 5px 8px; font-size: 12.5px; }
.adj-hint { font-size: 10.5px; color: var(--dim); margin: 8px 0 0;
  line-height: 1.45; }
.proj-new { align-items: center; justify-content: center; text-align: center;
  border-style: dashed; color: var(--dim); text-decoration: none; gap: 6px;
  font-weight: 600; cursor: pointer; min-height: 130px; }
.proj-new i { font-size: 22px; color: var(--blue); }
.proj-new:hover { color: var(--txt); }

/* ==========================================================================
   New-project wizard — same animated story + building overlay
   ========================================================================== */
.wiz { max-width: 640px; margin: 20px auto; }
.wiz-rail { position: relative; display: flex; justify-content: space-between;
  margin-bottom: 34px; padding: 0 6px; }
.wiz-rail::before { content: ''; position: absolute; top: 17px; left: 24px;
  right: 24px; height: 2px; background: var(--line); }
.wiz-rail-fill { position: absolute; top: 17px; left: 24px; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green)); width: 0;
  transition: width .5s cubic-bezier(.4,0,.2,1); }
.wiz-step-dot { position: relative; z-index: 1; display: flex;
  flex-direction: column; align-items: center; gap: 7px; color: var(--dim);
  font-size: 11px; width: 70px; }
.wiz-step-dot i { width: 34px; height: 34px; border-radius: 50%; display:
  flex; align-items: center; justify-content: center; background:
  var(--panel2); border: 2px solid var(--line); font-size: 13px;
  transition: all .3s; }
.wiz-step-dot.active i { border-color: var(--blue); color: var(--blue);
  box-shadow: 0 0 0 5px rgba(52,152,219,.15); transform: scale(1.1); }
.wiz-step-dot.done i { border-color: var(--green); background: var(--green);
  color: #0f1419; }
.wiz-step-dot.active, .wiz-step-dot.done { color: var(--txt); }

.wiz-stage { position: relative; }
.wiz-step { display: none; }
.wiz-step.active { display: block;
  animation: wiz-step-in .5s cubic-bezier(.2,.8,.3,1); }
@keyframes wiz-step-in { from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; } }
.wiz-kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.wiz-h { font-size: 34px; line-height: 1.12; font-weight: 800;
  margin-bottom: 14px; letter-spacing: -.01em; }
.wiz-sub { color: var(--dim); font-size: 14px; line-height: 1.6;
  margin-bottom: 24px; max-width: 480px; }
.wiz-input { width: 100%; background: var(--panel2); border: 1px solid
  var(--line); color: var(--txt); padding: 13px 15px; border-radius: 10px;
  font-size: 16px; margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s; }
.wiz-input:focus { outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(52,152,219,.15); }
.wiz-input.wiz-err { border-color: var(--red); animation: wiz-shake .4s; }
@keyframes wiz-shake { 0%,100%{transform:translateX(0)}
  25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.wiz-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wiz-lbl { display: block; font-size: 12px; color: var(--dim); margin: 0;
  margin-bottom: 12px; }
.wiz-lbl .wiz-input { margin-top: 5px; margin-bottom: 0; }
.wiz-grp { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--blue); margin: 14px 0 8px;
  border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.wiz-hint { font-size: 12px; color: var(--dim); margin: 8px 0 0; }
.wiz-nav { display: flex; justify-content: space-between; align-items:
  center; margin-top: 26px; }
.wiz-next, .wiz-launch { padding: 11px 22px; font-size: 14px; font-weight: 600; }
.wiz-review { background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px 16px; margin-bottom: 8px; }
.rev-row { display: flex; justify-content: space-between; padding: 11px 0;
  font-size: 14px; border-bottom: 1px solid var(--line); }
.rev-row:last-child { border-bottom: none; }
.rev-row span { color: var(--dim); }

/* building overlay — animated skyline + bobbing headset */
.wiz-building { position: absolute; inset: -20px; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 12px; z-index: 5; }
.wiz-building.on { display: flex; animation: auth-in .3s; }
.build-scene { position: relative; width: 280px; height: 150px;
  margin-bottom: 22px; }
.build-sky { position: absolute; bottom: 0; left: 0; right: 0; display:
  flex; align-items: flex-end; gap: 10px; justify-content: center;
  height: 100%; }
.build-tower { width: 34px; background: linear-gradient(180deg,#2c3a4d,
  #222d3d); border: 1px solid var(--line); border-bottom: none;
  border-radius: 4px 4px 0 0;
  animation: tower-rise 1s cubic-bezier(.2,.8,.3,1) both; }
.build-tower.t1 { height: 60px; animation-delay: .05s; }
.build-tower.t2 { height: 96px; animation-delay: .2s; }
.build-tower.t3 { height: 120px; animation-delay: .35s;
  background: linear-gradient(180deg, var(--blue), #2c3a4d); }
.build-tower.t4 { height: 78px; animation-delay: .5s; }
@keyframes tower-rise { from { transform: scaleY(0);
  transform-origin: bottom; } to { transform: scaleY(1); } }
.build-headset { position: absolute; bottom: 118px; left: 50%;
  transform: translateX(-50%); font-size: 30px; color: var(--green);
  animation: headset-bob 1.6s ease-in-out infinite; }
@keyframes headset-bob { 0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,-9px)} }
.build-text { font-size: 15px; color: var(--dim); font-weight: 600;
  animation: build-pulse 1.4s ease-in-out infinite; }
@keyframes build-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ==========================================================================
   Landing — light "leaping" restyle: cream canvas, ink type, forest-green
   CTAs, lime highlight markers, soft rounded cards. Scoped so the rest of
   the portal keeps the dark ops theme.
   ========================================================================== */
body.landing {
  --bg: #f4f0e8; --panel: #fffdf7; --panel2: #f1ece1;
  --txt: #16181d; --dim: #5d6570; --line: #e3dccb;
  --forest: #15382a; --lime: #d7f14e;
  font-size: 15px;
}
body.landing .wrap { max-width: 1180px; padding: 0 26px 60px;
  animation: none; }

/* topbar — cream, blurred, minimal */
body.landing .topbar {
  background: rgba(244,240,232,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); height: 64px;
}
.brand .logo-img { height: 34px; width: auto; max-width: 180px;
  object-fit: contain; }
body.landing .brand .logo { border-radius: 50%;
  background: var(--forest); box-shadow: none; }
body.landing .brand small { color: var(--dim); }
body.landing .nav a { color: var(--dim); border-radius: 999px; }
body.landing .nav a.on, body.landing .nav a:hover {
  color: var(--txt); background: rgba(21,56,42,.08); }
body.landing .nav-right .btn {
  border-radius: 999px; background: transparent; border-color: var(--line);
  color: var(--txt); padding: 9px 18px; }
body.landing .nav-right .btn.primary {
  background: var(--forest); border-color: var(--forest); color: #f4f0e8; }
body.landing .nav-right .btn.primary:hover { filter: brightness(1.15); }

/* hero — big editorial headline, pill CTAs */
body.landing .hero { padding: 96px 20px 60px; }
body.landing .hero-tag {
  color: var(--forest); background: rgba(21,56,42,.07);
  border: 1px solid rgba(21,56,42,.18); border-radius: 999px;
  font-size: 11px; letter-spacing: .12em; padding: 7px 16px; }
body.landing .hero h1 {
  font-size: clamp(40px, 5.6vw, 64px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.06; color: var(--txt); }
body.landing .hero h1 em {
  font-style: normal; background:
    linear-gradient(transparent 62%, var(--lime) 62%, var(--lime) 94%,
                    transparent 94%);
  color: var(--txt); -webkit-background-clip: initial;
  background-clip: initial;
  padding: 0 .08em; border-radius: 3px; }
body.landing .hero .hero-sub { color: var(--dim); max-width: 600px;
  margin: 18px auto 30px; font-size: 16.5px; line-height: 1.6; }
body.landing .hero-cta { display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap; }
body.landing .big-cta {
  background: var(--forest); border-color: var(--forest); color: #f4f0e8;
  border-radius: 999px; padding: 15px 30px; font-size: 15px;
  font-weight: 700; box-shadow: 0 10px 26px rgba(21,56,42,.22); }
body.landing .big-cta:hover { filter: brightness(1.12);
  transform: translateY(-1px); }
body.landing .ghost-cta {
  background: transparent; border-color: var(--line); color: var(--txt);
  border-radius: 999px; padding: 15px 26px; font-size: 15px;
  font-weight: 600; }
body.landing .ghost-cta:hover { border-color: var(--txt); }

/* capability pill row */
body.landing .cap-row { display: flex; gap: 9px; justify-content: center;
  flex-wrap: wrap; margin-top: 30px; }
body.landing .cap {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--txt); }
body.landing .cap i { color: var(--forest); font-size: 11px; }

/* product shots float on the cream canvas */
body.landing .shot-slider, body.landing .hero-slider,
body.landing .showcase .shot {
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 30px 80px rgba(22,24,29,.16); }
body.landing .hero-slider { margin-top: 56px; border-radius: 20px; }
body.landing .shot-dots i { background: rgba(22,24,29,.25); }
body.landing .shot-dots i.active { background: var(--forest); }

/* stat band — bare numbers on cream, lime under-stroke */
body.landing .stat { background: transparent; border: none;
  border-top: 2px solid var(--line); border-radius: 0;
  padding: 20px 6px 0; }
body.landing .stat-v { color: var(--forest); font-size: 40px;
  background: none; -webkit-background-clip: initial;
  background-clip: initial; }
body.landing .stat-l { color: var(--dim); font-size: 12.5px; }

/* section headers — editorial, not all-caps utility */
body.landing h2 {
  color: var(--txt); font-size: 30px; font-weight: 800;
  letter-spacing: -.02em; text-transform: none; margin: 44px 0 6px; }
body.landing h2 i { color: var(--forest); margin-right: 8px; }

/* feature cards — white cards on cream, hairline border */
body.landing .panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: 0 2px 14px rgba(22,24,29,.05); }
body.landing .feat { transition: transform .18s, box-shadow .18s; }
body.landing .feat:hover { transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(22,24,29,.10); }
body.landing .feat-i { border-radius: 12px; color: var(--forest);
  background: rgba(21,56,42,.08); border-color: rgba(21,56,42,.2); }

/* stack layers — numbered cards, agentic one gets the lime edge */
body.landing .layer { border-radius: 20px; padding: 22px 24px; }
body.landing .layer-n { background: var(--forest); border-radius: 12px;
  color: var(--lime); }
body.landing .layer.agentic {
  border-color: rgba(21,56,42,.4);
  background: linear-gradient(135deg, rgba(215,241,78,.14), var(--panel));
  box-shadow: 0 14px 40px rgba(21,56,42,.10); }
body.landing .layer-body p.biz { color: var(--forest); font-weight: 600; }

/* showcase + ticks */
body.landing .shot-copy h2 { color: var(--txt); font-size: 22px;
  font-weight: 800; letter-spacing: -.01em; text-transform: none; }
body.landing .ticks li i { color: var(--forest); }
body.landing .ticks li { color: var(--txt); }

/* steps — forest number chips */
body.landing .step-n { background: var(--forest); color: var(--lime);
  border-radius: 12px; }
body.landing .step h4 { color: var(--txt); }

/* plan cards — keep SVG accents readable on light */
body.landing .plan-card:hover { border-color: var(--forest);
  box-shadow: 0 12px 30px rgba(22,24,29,.10); }
body.landing .plan-card .btn.primary {
  background: var(--forest); border-color: var(--forest); color: #f4f0e8;
  border-radius: 999px; }
body.landing .plan-illus rect[fill="var(--panel2)"] { fill: #f1ece1; }
body.landing .plan-illus rect[fill="#161f30"] { fill: #15382a; }
body.landing .plan-illus rect[fill="var(--line)"] { fill: #d9d1bd; }
body.landing .plan-illus text { fill: var(--dim); }

/* big closing CTA — forest slab, cream text, lime button */
body.landing .cta {
  background: var(--forest); border-color: var(--forest);
  border-radius: 26px; padding: 58px 24px; margin-top: 30px; }
body.landing .cta h2 { color: #f4f0e8; font-size: 34px; }
body.landing .cta h2 em { background: none; color: var(--lime); }
body.landing .cta p { color: rgba(244,240,232,.72); }
body.landing .cta .btn.primary {
  background: var(--lime); border-color: var(--lime); color: var(--forest);
  border-radius: 999px; padding: 14px 28px; font-weight: 800;
  font-size: 14.5px; }
body.landing .cta .btn.primary:hover { filter: brightness(1.06);
  transform: translateY(-1px); }

/* pricing slab — same forest CTA look + decorative floating art */
body.landing .cta.slab-art { position: relative; overflow: hidden;
  background:
    radial-gradient(420px 260px at 85% -20%, rgba(215,241,78,.16),
                    transparent 70%),
    radial-gradient(360px 240px at 8% 110%, rgba(52,152,219,.10),
                    transparent 70%),
    var(--forest); }
body.landing .cta-art { position: absolute; inset: 0; pointer-events: none; }
body.landing .cta-art span { position: absolute; display: block; }
body.landing .cta-art .ring { border-radius: 50%;
  border: 1.5px solid rgba(215,241,78,.28); }
body.landing .cta-art .r1 { width: 240px; height: 240px;
  top: -110px; right: -70px;
  animation: slab-float 10s ease-in-out infinite; }
body.landing .cta-art .r2 { width: 130px; height: 130px;
  bottom: -60px; left: -40px; border-color: rgba(244,240,232,.18);
  animation: slab-float 12s ease-in-out -3s infinite; }
body.landing .cta-art .dot { width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); opacity: .55; }
body.landing .cta-art .d1 { top: 22%; left: 12%;
  animation: slab-float 7s ease-in-out -1s infinite; }
body.landing .cta-art .d2 { top: 60%; right: 14%;
  animation: slab-float 8s ease-in-out -4s infinite; }
body.landing .cta-art .d3 { bottom: 18%; left: 38%;
  animation: slab-float 9s ease-in-out -6s infinite; }
body.landing .cta-art .tag-ic { position: absolute; right: 8%; top: 50%;
  font-size: 56px; color: rgba(215,241,78,.13);
  animation: slab-float 11s ease-in-out -2s infinite; }
@keyframes slab-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  body.landing .cta-art * { animation: none; } }

/* ==========================================================================
   CCP Labs — research library (account-area style, dark ops theme)
   ========================================================================== */
.page-head { display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .dim { font-size: 12.5px; }

.lab-sub-band { display: flex; align-items: center; justify-content:
  space-between; gap: 18px; flex-wrap: wrap; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 20px;
  margin-bottom: 20px; }
.lab-sub-band.subscribed { border-color: rgba(46,204,113,.45);
  background: linear-gradient(135deg, rgba(46,204,113,.07), var(--panel)); }
.lab-sub-left { display: flex; align-items: center; gap: 14px; }
.lab-sub-price { font-size: 26px; font-weight: 800; color: var(--txt); }
.lab-sub-price em { font-style: normal; font-size: 13px;
  color: var(--dim); font-weight: 500; }

.lab-grid { display: grid; grid-template-columns: repeat(auto-fill,
  minmax(320px, 1fr)); gap: 16px; }
.lab-card { background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; display: flex;
  flex-direction: column; gap: 8px; animation: rise-in .4s both;
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.lab-card:hover { transform: translateY(-2px); border-color: var(--blue);
  box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.lab-card.owned { border-color: rgba(46,204,113,.35); }
.lab-card-top { display: flex; align-items: center; justify-content:
  space-between; gap: 10px; }
.lab-topic { font-size: 10.5px; font-weight: 700; text-transform:
  uppercase; letter-spacing: .07em; color: var(--blue); }
.lab-badge { font-size: 10.5px; font-weight: 700; padding: 3px 10px;
  border-radius: 10px; }
.lab-badge.free { background: rgba(46,204,113,.14); color: var(--green); }
.lab-badge.sub { background: rgba(46,204,113,.14); color: var(--green); }
.lab-badge.own { background: rgba(52,152,219,.14); color: var(--blue); }
.lab-badge.price { background: var(--panel2); color: var(--txt);
  border: 1px solid var(--line); }
.lab-card h3 { font-size: 15.5px; line-height: 1.35; }
.lab-meta { font-size: 11.5px; color: var(--dim); }
.lab-abstract { margin: 0; font-size: 13px; color: var(--dim);
  line-height: 1.55; flex: 1; }
.lab-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ==========================================================================
   Landing structure — leapingai-style menu, industries, labs band,
   book-a-demo, FAQ and footer (light theme scoped to body.landing)
   ========================================================================== */
body.landing .wrap [id] { scroll-margin-top: 84px; }

/* anon topbar menu — plain text links like leapingai */
.nav.menu a { color: var(--dim); font-weight: 600; padding: 8px 13px;
  border-radius: 999px; }
.nav.menu a:hover { color: var(--txt); }
body.landing .nav.menu a { color: var(--dim); }
body.landing .nav.menu a:hover { color: var(--txt);
  background: rgba(21,56,42,.08); }

/* section kickers — small uppercase tag line above headings */
body.landing .kicker { font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--forest);
  margin: 44px 0 6px; }
body.landing .kicker.center { text-align: center; margin-top: 0; }
body.landing .sec-lead { max-width: 780px; font-size: 15px;
  line-height: 1.65; }

/* AI-manager cards — tagline under the title */
body.landing .mgr-tag { color: var(--forest); font-weight: 700;
  font-size: 12px; margin: -3px 0 10px; }
body.landing .feat .ticks { margin-top: 8px; }
body.landing .feat .ticks li { font-size: 12.5px; }

/* problem bullets — slightly roomier list inside the panel */
body.landing .prob-list li { padding: 7px 0; font-size: 14px; }

/* two-column capability lists (RL engine) */
body.landing .ticks.cols { columns: 2; column-gap: 36px; }
body.landing .ticks.cols li { break-inside: avoid; padding: 6px 0; }

/* "no rip-and-replace" pill row */
body.landing .no-list { display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px; }
body.landing .no-list div { background: var(--panel); border: 1px solid
  var(--line); border-radius: 999px; padding: 10px 18px; font-weight: 700;
  font-size: 13.5px; color: var(--forest); }
body.landing .no-list i { color: var(--lime); margin-right: 7px; }

/* before vs after table */
body.landing .vs { background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; margin-top: 14px; }
body.landing .vs-head, body.landing .vs-row { display: grid;
  grid-template-columns: 1fr 1fr; }
body.landing .vs-head span { padding: 12px 20px; font-size: 11px;
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); }
body.landing .vs-head span:last-child { color: var(--forest);
  background: rgba(21,56,42,.05); }
body.landing .vs-row span { padding: 12px 20px; font-size: 13.5px;
  border-top: 1px solid var(--line); }
body.landing .vs-row span:first-child { color: var(--dim); }
body.landing .vs-row span:last-child { font-weight: 600;
  background: rgba(21,56,42,.05); }
body.landing .vs-row span:last-child i { color: var(--forest);
  margin-right: 8px; font-size: 11px; }

/* industries — small chip-cards grid */
body.landing .ind-grid { display: grid; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
body.landing .ind { display: flex; align-items: flex-start; gap: 12px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 15px 16px;
  transition: transform .15s, border-color .15s; }
body.landing .ind:hover { transform: translateY(-2px);
  border-color: rgba(21,56,42,.35); }
body.landing .ind i { color: var(--forest); font-size: 15px;
  margin-top: 3px; }
body.landing .ind b { display: block; font-size: 13.5px; }
body.landing .ind span { display: block; color: var(--dim);
  font-size: 11.5px; line-height: 1.45; margin-top: 2px; }

/* CCP Labs band — forest slab, lime accents */
body.landing .labs-band { background: var(--forest); border: none;
  border-radius: 26px; padding: 44px 40px; margin-top: 26px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px;
  align-items: center; }
body.landing .labs-band .hero-tag { color: var(--lime);
  background: rgba(215,241,78,.12); border-color: rgba(215,241,78,.3);
  display: inline-flex; }
body.landing .labs-band h2 { color: #f4f0e8; margin: 14px 0 10px; }
body.landing .labs-band h2 em { background: none; color: var(--lime); }
body.landing .labs-band p { color: rgba(244,240,232,.72);
  font-size: 14.5px; line-height: 1.6; margin: 0 0 20px; }
body.landing .labs-band .btn.primary { background: var(--lime);
  border-color: var(--lime); color: var(--forest); border-radius: 999px;
  padding: 13px 26px; font-weight: 800; }
body.landing .labs-band .btn.primary:hover { filter: brightness(1.07);
  transform: translateY(-1px); }
body.landing .labs-band-list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; }
body.landing .labs-band-list li { padding: 13px 4px;
  border-bottom: 1px solid rgba(244,240,232,.14); }
body.landing .labs-band-list li:last-child { border-bottom: 0; }
body.landing .labs-band-list b { display: block; color: #f4f0e8;
  font-size: 13.5px; }
body.landing .labs-band-list span { color: rgba(244,240,232,.6);
  font-size: 12px; }
@media (max-width: 860px) {
  body.landing .labs-band { grid-template-columns: 1fr; } }

/* book-a-demo — split card, light inputs */
body.landing .demo-panel { display: grid;
  grid-template-columns: 1fr 1fr; gap: 34px; padding: 40px;
  border-radius: 26px; margin-top: 26px; scroll-margin-top: 84px;
  background: linear-gradient(135deg, rgba(215,241,78,.10),
    var(--panel) 55%); }
body.landing .demo-copy h2 { margin-top: 0; }
body.landing .demo-form { display: flex; flex-direction: column;
  gap: 10px; }
body.landing .demo-form input, body.landing .demo-form select,
body.landing .demo-form textarea {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; font: inherit;
  font-size: 13.5px; color: var(--txt); width: 100%;
  box-sizing: border-box; }
body.landing .demo-form input:focus, body.landing .demo-form select:focus,
body.landing .demo-form textarea:focus {
  outline: none; border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(21,56,42,.12); }
body.landing .demo-form input::placeholder,
body.landing .demo-form textarea::placeholder { color: var(--dim); }
body.landing .demo-form .hp { position: absolute; left: -9999px;
  opacity: 0; height: 0; overflow: hidden; }
body.landing .demo-form .big-cta { justify-content: center;
  margin-top: 4px; }
body.landing .demo-thanks { display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; justify-content: center;
  background: rgba(215,241,78,.18); border: 1px solid rgba(21,56,42,.25);
  border-radius: 18px; padding: 30px; }
body.landing .demo-thanks i { font-size: 30px; color: var(--forest); }
body.landing .demo-thanks b { font-size: 17px; color: var(--txt); }
body.landing .demo-thanks p { color: var(--dim); margin: 0;
  font-size: 13.5px; line-height: 1.55; }
body.landing .demo-thanks a { color: var(--forest); font-weight: 700; }
@media (max-width: 860px) {
  body.landing .demo-panel { grid-template-columns: 1fr; } }

/* FAQ — accordion cards */
body.landing .faq { display: flex; flex-direction: column; gap: 10px;
  margin-top: 14px; }
body.landing .faq-i { background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 0; overflow: hidden; }
body.landing .faq-i summary { list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 17px 20px; font-weight: 700; font-size: 14.5px;
  color: var(--txt); }
body.landing .faq-i summary::-webkit-details-marker { display: none; }
body.landing .faq-i summary i { color: var(--forest); font-size: 13px;
  transition: transform .2s; }
body.landing .faq-i[open] summary i { transform: rotate(45deg); }
body.landing .faq-i p { margin: 0; padding: 0 20px 18px;
  color: var(--dim); font-size: 13.5px; line-height: 1.6;
  max-width: 720px; }

/* footer — forest slab */
body.landing .lfoot { background: var(--forest); color: rgba(244,240,232,.75);
  margin-top: 60px; }
body.landing .lfoot-in { max-width: 1180px; margin: 0 auto;
  padding: 52px 26px 34px; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
body.landing .lfoot-logo { display: inline-block; background: var(--lime);
  color: var(--forest); font-weight: 800; border-radius: 10px;
  padding: 6px 12px; font-size: 15px; letter-spacing: .04em; }
body.landing .lfoot-brand p { font-size: 13px; line-height: 1.6;
  margin: 14px 0 10px; max-width: 300px; }
body.landing .lfoot-fine { font-size: 11px; color: rgba(244,240,232,.5); }
body.landing .lfoot-col { display: flex; flex-direction: column;
  gap: 9px; }
body.landing .lfoot-col b { color: var(--lime); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
body.landing .lfoot-col a { color: rgba(244,240,232,.75);
  font-size: 13px; }
body.landing .lfoot-col a:hover { color: var(--lime); }
body.landing .lfoot-partners { max-width: 1180px; margin: 0 auto;
  padding: 26px 26px 34px; border-top: 1px solid rgba(244,240,232,.14); }
body.landing .lfp-h { display: block; color: var(--lime); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
body.landing .lfp-row { display: flex; flex-wrap: wrap; gap: 14px; }
body.landing .lfp { display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; min-width: 210px; border-radius: 10px;
  border: 1px solid rgba(244,240,232,.14); color: rgba(244,240,232,.75);
  text-decoration: none; transition: border-color .15s ease; }
body.landing a.lfp:hover { border-color: var(--lime); }
body.landing .lfp-logo { height: 34px; width: auto; max-width: 90px;
  object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .85; }
body.landing .lfp-tx b { display: block; font-size: 12.5px;
  color: rgba(244,240,232,.9); font-weight: 700; }
body.landing .lfp-tx span { display: block; font-size: 11.5px;
  line-height: 1.45; color: rgba(244,240,232,.55); }
body.landing .lfoot-base { max-width: 1180px; margin: 0 auto;
  padding: 16px 26px 24px; border-top: 1px solid rgba(244,240,232,.14);
  display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 11.5px; color: rgba(244,240,232,.5); }
@media (max-width: 800px) {
  body.landing .lfoot-in { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Anon topbar — centered brand+menu, products dropdown (leapingai style)
   ========================================================================== */
/* anon topbar insets match the .wrap content column (1180 + 26px pads) —
   brand starts exactly above the content, buttons end at its right edge */
.topbar.anon {
  padding: 0 max(26px, calc((100vw - 1180px) / 2 + 26px));
  gap: 26px;
}
.topbar.anon .nav.menu { flex: 1; justify-content: center; }

/* products dropdown */
.menu-drop-wrap { position: relative; display: flex; align-items: center; }
.menu-drop-wrap > a .fa-chevron-down { font-size: 9px; opacity: .65;
  transition: transform .18s; }
.menu-drop-wrap:hover > a .fa-chevron-down,
.menu-drop-wrap:focus-within > a .fa-chevron-down { transform: rotate(180deg); }
.menu-drop { display: none; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%); padding-top: 14px; z-index: 60; }
.menu-drop-wrap:hover .menu-drop,
.menu-drop-wrap:focus-within .menu-drop { display: block; }
.menu-drop-in { min-width: 290px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; padding: 8px;
  box-shadow: 0 24px 60px rgba(22,24,29,.28);
  display: flex; flex-direction: column; animation: rise-in .18s both; }
.menu-drop-in a { display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 12px; color: var(--txt); }
.menu-drop-in a i { width: 30px; height: 30px; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 12.5px;
  border-radius: 9px; color: var(--forest, var(--blue));
  background: rgba(21,56,42,.08); border: 1px solid rgba(21,56,42,.16); }
.menu-drop-in a span { display: flex; flex-direction: column; gap: 1px; }
.menu-drop-in a b { font-size: 13px; }
.menu-drop-in a small { font-size: 11px; color: var(--dim); }
.menu-drop-in a:hover { background: rgba(21,56,42,.07); }
body:not(.landing) .menu-drop-in a i { color: var(--blue);
  background: rgba(52,152,219,.12); border-color: rgba(52,152,219,.25); }
body:not(.landing) .menu-drop-in a:hover { background: var(--panel2); }

/* ==========================================================================
   CMS admin (/admin/*) — dark account theme, tab rail + editor forms
   ========================================================================== */
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 20px;
  border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.adm-tabs a { display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; color: var(--dim); border: 1px solid transparent; }
.adm-tabs a:hover { color: var(--txt); background: var(--panel2); }
.adm-tabs a.on { color: var(--blue); border-color: var(--blue);
  background: rgba(52,152,219,.10); }

.adm-sec { padding: 18px 20px; margin-bottom: 16px; }
.adm-sec h3 { margin: 0 0 14px; font-size: 14px; }
.adm-f { display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 12px; }
.adm-f > span { font-size: 11.5px; font-weight: 600; color: var(--dim);
  text-transform: lowercase; letter-spacing: .04em; }
.adm-f input, .adm-f textarea, .adm-f select, .adm-in {
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 12px; font: inherit; font-size: 13px; color: var(--txt);
  width: 100%; box-sizing: border-box; }
.adm-f textarea { resize: vertical; font-family: inherit; line-height: 1.55; }
.adm-f input:focus, .adm-f textarea:focus, .adm-in:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(52,152,219,.14); }
.adm-note { border-color: var(--green); color: var(--green);
  padding: 11px 16px; margin-bottom: 16px; font-size: 13px; }
.adm-note.warn { border-color: var(--amber); color: var(--amber); }
.adm-card { text-decoration: none; color: inherit; display: block; }
.adm-card h3 { display: flex; align-items: center; gap: 8px; }
.tbl.small td input { margin: -4px 0; }

/* media library grid */
.adm-media-grid { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.adm-media { padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.adm-media img { width: 100%; height: 110px; object-fit: cover;
  border-radius: 9px; background: var(--panel2); }
.adm-media-file { height: 110px; display: flex; align-items: center;
  justify-content: center; font-size: 28px; color: var(--dim);
  background: var(--panel2); border-radius: 9px; }
.adm-media code { font-size: 10.5px; color: var(--dim); word-break: break-all; }
.adm-media form { display: flex; justify-content: flex-end; }

/* imagelist field — appendable URL rows with thumbnails */
.il { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.il-row { display: flex; align-items: center; gap: 8px; }
.il-pv { width: 84px; height: 48px; object-fit: cover; flex: none;
  border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel2); }
.il-pv.off { display: none; }
.il-url { flex: 1; }
.il-x { flex: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: transparent;
  color: var(--dim); cursor: pointer; font-size: 11px; }
.il-x:hover { color: var(--red); border-color: rgba(231,76,60,.5); }
.il-add { align-self: flex-start; margin-top: 2px;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: 1.5px dashed rgba(46,204,113,.45); background: transparent;
  color: var(--green); font: 600 11.5px "Space Grotesk", sans-serif;
  letter-spacing: .08em; text-transform: uppercase; }
.il-add:hover { background: rgba(46,204,113,.08); }

/* ==========================================================================
   Editorial "storybook" layer — the landing reads like chapters of a book.
   Serif display (Fraunces) over grotesque labels (Space Grotesk), outlined
   chapter numerals, a loop ticker, dossier cards, stamped pills.
   Appended last so these rules win over the base landing styles above.
   ========================================================================== */
html { scroll-behavior: smooth; }
body.landing { font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; }

/* display type */
body.landing h1, body.landing h2, body.landing h3,
body.landing .shot-copy h2 {
  font-family: "Fraunces", Georgia, serif;
}
body.landing .hero h1 { font-weight: 500; letter-spacing: -.01em; }
body.landing .hero h1 em { font-style: italic; font-weight: 500; }
body.landing h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 600;
  letter-spacing: -.01em; }
body.landing h3 { font-size: 19px; font-weight: 600; }
body.landing .shot-copy h2 { font-size: 26px; font-weight: 600; }
body.landing .sec-lead { font-family: "Fraunces", Georgia, serif;
  font-size: 19px; line-height: 1.58; color: var(--txt); }
body.landing .faq-i summary { font-family: "Fraunces", Georgia, serif;
  font-size: 18px; font-weight: 600; }
body.landing .faq-i[open] { border-color: rgba(21,56,42,.4); }

/* grotesque, letterspaced kickers — the "chapter" labels */
body.landing .kicker { display: flex; align-items: center; gap: 9px;
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  letter-spacing: .16em; color: var(--forest); }
body.landing .kicker i { color: var(--forest); opacity: .8; }
body.landing .kicker.center { justify-content: center; }
body.landing .hero-tag { font-family: "Space Grotesk", sans-serif;
  font-weight: 600; }

/* ghost chapter numerals — outlined, floating top-right of each section */
body.landing .sec { position: relative; }
body.landing .ch-no {
  position: absolute; top: 6px; right: 0; line-height: .8;
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: clamp(64px, 8vw, 110px); font-weight: 500;
  color: transparent; -webkit-text-stroke: 1.5px rgba(21,56,42,.16);
  pointer-events: none; user-select: none;
}

/* ticker — the agentic loop, endlessly cycling under the hero */
body.landing .marquee { overflow: hidden; margin: 40px -26px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 13px 0; }
body.landing .marquee-t { display: inline-flex; align-items: center;
  gap: 30px; white-space: nowrap; animation: mq 26s linear infinite; }
body.landing .marquee-t span { font-family: "Space Grotesk", sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--forest); }
body.landing .marquee-t i { font-style: normal; color: var(--forest);
  opacity: .4; font-size: 10px; }
@keyframes mq { to { transform: translateX(-50%); } }

/* dropcap — the problem chapter opens like a book */
body.landing .dropcap::first-letter {
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 3.2em; font-weight: 500; float: left; line-height: .78;
  padding: 5px 12px 0 0; color: var(--forest);
}

/* the organizational stack — each layer of management indents deeper */
body.landing .layer-stack { list-style: none; padding: 0; margin: 18px 0 4px;
  counter-reset: lyr; }
body.landing .layer-stack li {
  position: relative; counter-increment: lyr;
  background: var(--panel2); border: 1px solid var(--line);
  border-left: 3px solid var(--forest); border-radius: 12px;
  padding: 12px 16px 12px 56px; margin: 9px 0; font-size: 14px;
}
body.landing .layer-stack li::before {
  content: "0" counter(lyr); position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%); font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 12px; color: var(--forest); opacity: .75;
}
body.landing .layer-stack li:nth-child(2) { margin-left: 26px; }
body.landing .layer-stack li:nth-child(3) { margin-left: 52px; }
body.landing .layer-stack li:nth-child(4) { margin-left: 78px; }
body.landing .layer-stack li:nth-child(5) { margin-left: 104px; }

/* AI-manager dossiers — roman numerals, staggered grid */
body.landing .mgr .feat { position: relative; overflow: hidden; }
body.landing .mgr-n {
  position: absolute; top: 8px; right: 16px; line-height: 1;
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 52px; color: rgba(21,56,42,.13); pointer-events: none;
}
body.landing .mgr .feat:nth-child(2) { margin-top: 26px; }
body.landing .mgr .feat:nth-child(3) { margin-top: 52px; }

/* the advantage — a pull-quote slab with a ghost asterisk */
body.landing .adv-band {
  background: var(--forest); border-color: var(--forest);
  border-radius: 26px; padding: 66px 34px; text-align: center;
  position: relative; overflow: hidden;
}
body.landing .adv-band::after {
  content: "*"; position: absolute; right: 18px; bottom: -84px;
  font-family: "Fraunces", Georgia, serif; font-size: 260px;
  color: var(--lime); opacity: .16; pointer-events: none; line-height: 1;
}
body.landing .adv-band .kicker { color: var(--lime); }
body.landing .adv-band h2 { color: #f4f0e8; font-style: italic;
  font-weight: 500; font-size: clamp(30px, 4vw, 44px); margin: 10px 0 12px; }
body.landing .adv-band p { color: rgba(244,240,232,.72);
  max-width: 620px; margin: 0 auto; }

/* RL index — numbered like a spec sheet */
body.landing .rl-panel { background: var(--panel); }
body.landing .rl-list { list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: 46px; counter-reset: rl; }
body.landing .rl-list li {
  counter-increment: rl; position: relative; break-inside: avoid;
  padding: 12px 0 12px 48px; border-bottom: 1px dashed var(--line);
  font-size: 14px; color: var(--txt);
}
body.landing .rl-list li::before {
  content: counter(rl, decimal-leading-zero); position: absolute;
  left: 0; top: 14px; font-family: "Space Grotesk", sans-serif;
  font-weight: 700; font-size: 12.5px; color: var(--forest);
}

/* console shot — tilted poster with a "live feed" sticker */
body.landing .showcase .shot.tilt { transform: rotate(-1.6deg);
  transition: transform .35s ease; position: relative; }
body.landing .showcase .shot.tilt:hover { transform: rotate(0); }
body.landing .sticker {
  position: absolute; top: -13px; left: 20px; z-index: 3;
  background: var(--lime); color: var(--forest);
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; transform: rotate(-3deg);
  box-shadow: 0 8px 18px rgba(21,56,42,.25);
}

/* "no rip-and-replace" — stamped, slightly askew */
body.landing .no-list div {
  background: transparent; border: 1.5px dashed rgba(21,56,42,.45);
  border-radius: 10px; color: var(--forest);
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  padding: 10px 16px;
}
body.landing .no-list div:nth-child(odd) { transform: rotate(-1deg); }
body.landing .no-list div:nth-child(even) { transform: rotate(1deg); }
body.landing .no-list i { color: var(--forest); }

/* before/after — "the old way" vs "the Anntie way" */
body.landing .vs-head span { font-family: "Space Grotesk", sans-serif; }
body.landing .vs-row span:first-child::before {
  content: "✕"; color: var(--red); opacity: .65; margin-right: 9px;
  font-size: 10.5px;
}
body.landing .vs-row span:first-child { text-decoration: line-through;
  text-decoration-color: rgba(22,24,29,.3); text-decoration-thickness: 1px; }

/* why-cards — ghost folio numbers bottom-right */
body.landing #why .grid { counter-reset: why; }
body.landing #why .feat { position: relative; overflow: hidden; }
body.landing #why .feat::after {
  counter-increment: why; content: counter(why, decimal-leading-zero);
  position: absolute; right: 14px; bottom: -18px; line-height: 1;
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-size: 92px; color: rgba(21,56,42,.09); pointer-events: none;
}

/* card entrance stagger inside revealed sections */
body.landing .reveal.in .feat { animation: card-in .55s backwards; }
body.landing .reveal.in .feat:nth-child(2) { animation-delay: .08s; }
body.landing .reveal.in .feat:nth-child(3) { animation-delay: .16s; }
body.landing .reveal.in .feat:nth-child(4) { animation-delay: .24s; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; } }

/* closing CTA — the last page */
body.landing .cta h2 { font-weight: 500; }
body.landing .cta h2 em { font-style: italic; }
body.landing .fin { margin-top: 30px; color: var(--lime); text-align: center;
  font-family: "Space Grotesk", sans-serif; font-size: 13px;
  letter-spacing: 1em; text-indent: 1em; opacity: .8; }

/* mobile — flatten the drama */
@media (max-width: 760px) {
  body.landing .layer-stack li { margin-left: 0 !important;
    padding-left: 48px; }
  body.landing .mgr .feat:nth-child(2),
  body.landing .mgr .feat:nth-child(3) { margin-top: 0; }
  body.landing .rl-list { columns: 1; }
  body.landing .ch-no { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing .marquee-t { animation: none; }
}

/* ==========================================================================
   App pages (/apps/*) — same storybook skin, tighter frame
   ========================================================================== */
body.landing .app-hero { padding: 60px 20px 30px; }
body.landing .app-hero h1 { font-size: clamp(38px, 5vw, 58px);
  font-weight: 500; }
body.landing .app-back { display: inline-flex; align-items: center;
  gap: 8px; font-family: "Space Grotesk", sans-serif; font-size: 12px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 18px; }
body.landing .app-back:hover { color: var(--forest); }
body.landing .app-slider { margin-top: 40px; }
body.landing .rl-list.single { columns: 1; max-width: 720px;
  margin-top: 10px; }
body.landing .next-app { display: flex; align-items: center;
  justify-content: space-between; gap: 18px; padding: 22px 26px;
  margin-top: 14px; color: var(--txt); text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s; }
body.landing .next-app:hover { transform: translateY(-2px);
  border-color: rgba(21,56,42,.4); box-shadow: 0 14px 34px rgba(22,24,29,.10); }
body.landing .next-app .kicker { margin: 0 0 4px; font-size: 10px; }
body.landing .next-app h3 { margin: 0 0 3px; }
body.landing .next-app > i { color: var(--forest); font-size: 18px; }
body.landing .next-app p { margin: 0; font-size: 13px; }

/* app-pages index — collapsible roster panel on /admin/apps */
.pgindex { padding: 0; }
.pgindex > summary { list-style: none; cursor: pointer; user-select: none;
  padding: 14px 20px; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; }
.pgindex > summary::-webkit-details-marker { display: none; }
.pgindex > summary i { color: var(--blue); font-size: 13px; }
.pgindex > summary .dim { font-weight: 400; font-size: 11.5px; }
.pgindex[open] > summary { border-bottom: 1px solid var(--line);
  color: var(--blue); }
.pgindex .tbl { margin: 12px 20px; }
.pgindex > small { display: block; padding: 0 20px 14px; }
.pg-act { display: flex; gap: 6px; justify-content: flex-end; }
.pg-act form { display: inline; }

/* ==========================================================================
   Investors (/investors) — infographic chart elements. Scoped to
   body.landing; bars animate when their .reveal parent gets .in.
   ========================================================================== */

/* growth column chart */
body.landing .ir-chart-wrap { padding: 28px 26px 18px; margin-top: 18px; }
body.landing .ir-chart { display: flex; align-items: flex-end; gap: 10px; }
body.landing .ir-col { flex: 1; min-width: 0; }
body.landing .ir-track { position: relative; height: 190px;
  display: flex; align-items: flex-end; }
body.landing .ir-bar { width: 100%; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #2a5c44, var(--forest));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .9s cubic-bezier(.22,.8,.3,1)
              calc(var(--i, 0) * 90ms); }
body.landing .ir-bar.proj {
  background: repeating-linear-gradient(-45deg, var(--lime) 0 7px,
    #b8d63e 7px 14px); }
body.landing .in .ir-bar { transform: scaleY(1); }
body.landing .ir-val { position: absolute; bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%); font-size: 11.5px;
  font-weight: 700; color: var(--forest); white-space: nowrap; }
body.landing .ir-yr { margin-top: 9px; text-align: center;
  font-size: 11px; font-weight: 600; color: var(--dim);
  letter-spacing: .04em; }
body.landing .ir-legend { display: flex; align-items: center; gap: 18px;
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--dim); flex-wrap: wrap; }
body.landing .ir-legend .dot { display: inline-block; width: 10px;
  height: 10px; border-radius: 3px; margin-right: 6px;
  vertical-align: -1px; }
body.landing .ir-legend .dot.actual { background: var(--forest); }
body.landing .ir-legend .dot.proj {
  background: repeating-linear-gradient(-45deg, var(--lime) 0 3px,
    #b8d63e 3px 6px); }
body.landing .ir-legend em { margin-left: auto; font-style: normal;
  font-size: 11.5px; }

/* market-share horizontal bars */
body.landing .ir-share-row { padding: 13px 2px 15px; }
body.landing .ir-share-row + .ir-share-row { border-top: 1px solid
  var(--line); }
body.landing .ir-share-top { display: flex; justify-content:
  space-between; align-items: baseline; margin-bottom: 7px; }
body.landing .ir-share-seg { font-weight: 700; font-size: 14px; }
body.landing .ir-share-pct { font-weight: 800; font-size: 17px;
  color: var(--forest); }
body.landing .ir-share-track { height: 12px; border-radius: 999px;
  background: var(--panel2); overflow: hidden; }
body.landing .ir-share-fill { height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--forest) 60%, #2a5c44);
  transition: width 1s cubic-bezier(.22,.8,.3,1)
              calc(var(--i, 0) * 110ms); }
body.landing .in .ir-share-fill { width: var(--w); }
body.landing .ir-share-note { margin-top: 6px; font-size: 12px;
  color: var(--dim); }

/* ROI — dark split panel */
body.landing .ir-roi { display: grid; gap: 30px; padding: 34px 30px;
  background: var(--forest); border-color: var(--forest);
  color: #f4f0e8; }
@media (min-width: 860px) {
  body.landing .ir-roi { grid-template-columns: 1.15fr 1fr;
    align-items: center; }
}
body.landing .ir-roi h2 { color: #f4f0e8; margin: 6px 0 8px; }
body.landing .ir-ticks { margin-top: 16px; }
body.landing .ir-ticks li { color: rgba(244,240,232,.85); }
body.landing .ir-ticks li i { color: var(--lime); }
body.landing .ir-roi-stats { display: grid; gap: 14px; }
body.landing .ir-roi-stat { padding: 18px 20px; border-radius: 14px;
  background: rgba(244,240,232,.07);
  border: 1px solid rgba(244,240,232,.14); }
body.landing .ir-roi-v { font-size: 34px; font-weight: 800;
  letter-spacing: -.02em; color: var(--lime); line-height: 1.1; }
body.landing .ir-roi-l { margin-top: 3px; font-size: 12.5px;
  color: rgba(244,240,232,.72); }

@media (prefers-reduced-motion: reduce) {
  body.landing .ir-bar, body.landing .ir-share-fill { transition: none; }
}

/* investors ROI — storytelling infographic on the dark panel */
body.landing .ir-story { display: block; padding: 40px 34px; }
body.landing .ir-story h2 { margin: 8px 0 10px; }
body.landing .ir-story-sub { color: rgba(244,240,232,.72);
  max-width: 660px; line-height: 1.6; margin: 0; }

/* before / after org stacks */
body.landing .ir-duo { display: grid; gap: 26px; margin-top: 30px; }
@media (min-width: 820px) {
  body.landing .ir-duo { grid-template-columns: 1fr 1fr; }
}
body.landing .ir-stack { background: rgba(244,240,232,.05);
  border: 1px solid rgba(244,240,232,.12); border-radius: 16px;
  padding: 20px 18px 22px; }
body.landing .ir-stack-t { font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,240,232,.55); text-align: center;
  margin-bottom: 14px; }
body.landing .ir-stack.ai .ir-stack-t { color: var(--lime); }
body.landing .ir-node { text-align: center; font-size: 13.5px;
  font-weight: 600; padding: 10px 14px; border-radius: 10px;
  background: rgba(244,240,232,.08);
  border: 1px solid rgba(244,240,232,.14); color: #f4f0e8; }
body.landing .ir-node.ai { background: var(--lime);
  border-color: var(--lime); color: var(--forest); font-weight: 800;
  font-size: 13px; box-shadow: 0 8px 22px rgba(215,241,78,.18); }
body.landing .ir-link { text-align: center; color:
  rgba(244,240,232,.4); font-size: 13px; line-height: 1.4; }
body.landing .ir-stack.ai .ir-link { color: rgba(215,241,78,.6); }

/* observe → act loop */
body.landing .ir-loop { display: grid; gap: 12px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
body.landing .ir-step { position: relative; padding: 16px 16px 14px;
  border-radius: 13px; background: rgba(244,240,232,.06);
  border: 1px solid rgba(244,240,232,.12); }
@media (min-width: 760px) {
  body.landing .ir-step:not(:last-child)::after { content: '→';
    position: absolute; right: -11px; top: 16px; z-index: 1;
    color: var(--lime); font-weight: 800; font-size: 13px; }
}
body.landing .ir-step-n { color: var(--lime); font-size: 11px;
  font-weight: 800; letter-spacing: .1em; margin-bottom: 5px; }
body.landing .ir-step b { font-size: 13.5px; }
body.landing .ir-step p { margin: 4px 0 0; font-size: 12px;
  line-height: 1.5; color: rgba(244,240,232,.68); }

/* the three AI managers — merged from the solution chapter */
body.landing .ir-mgrs { display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
body.landing .ir-mgr { padding: 18px 16px 14px; border-radius: 13px;
  background: rgba(244,240,232,.06);
  border: 1px solid rgba(244,240,232,.12); }
body.landing .ir-mgr-i { width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 10px;
  background: rgba(215,241,78,.12); color: var(--lime); font-size: 15px; }
body.landing .ir-mgr > b { font-size: 14px; }
body.landing .ir-mgr-tag { margin: 4px 0 10px; font-size: 11px;
  font-weight: 700; letter-spacing: .04em; color: var(--lime);
  text-transform: uppercase; }
body.landing .ir-mgr ul { margin: 0; padding: 0; list-style: none; }
body.landing .ir-mgr li { position: relative; padding: 3px 0 3px 16px;
  font-size: 12px; line-height: 1.55; color: rgba(244,240,232,.68); }
body.landing .ir-mgr li i { position: absolute; left: 0; top: 7px;
  font-size: 9px; color: var(--lime); }

/* FTE table + compression bars */
body.landing .ir-econ { display: grid; gap: 26px; margin-top: 30px;
  align-items: start; }
@media (min-width: 860px) {
  body.landing .ir-econ { grid-template-columns: 1.05fr 1fr; }
}
body.landing .ir-econ-t { font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,240,232,.55); margin-bottom: 12px; }
body.landing .ir-fte table { width: 100%; border-collapse: collapse;
  font-size: 13px; }
body.landing .ir-fte th { text-align: left; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(244,240,232,.5); padding: 0 10px 7px 0;
  border-bottom: 1px solid rgba(244,240,232,.14); font-weight: 700; }
body.landing .ir-fte td { padding: 8px 10px 8px 0;
  border-bottom: 1px solid rgba(244,240,232,.08);
  color: rgba(244,240,232,.85); }
body.landing .ir-fte td:nth-child(3) { color: var(--lime);
  font-weight: 700; }
body.landing .ir-fte tr.tot td { border-bottom: none; font-weight: 800;
  color: #f4f0e8; border-top: 1px solid rgba(244,240,232,.2); }
body.landing .ir-fte-note { margin-top: 10px; font-size: 11.5px;
  color: rgba(244,240,232,.5); line-height: 1.5; }
body.landing .ir-fte-note .ir2-note-pct { color: var(--lime); }
body.landing .ir-comp-row { display: grid;
  grid-template-columns: 84px 1fr 44px; align-items: center;
  gap: 10px; margin-bottom: 12px; font-size: 12.5px; }
body.landing .ir-comp-l { color: rgba(244,240,232,.6); }
body.landing .ir-comp-row b { text-align: right; font-size: 16px;
  color: #f4f0e8; }
body.landing .ir-comp-track { height: 14px; border-radius: 999px;
  background: rgba(244,240,232,.08); overflow: hidden; }
body.landing .ir-comp-bar { height: 100%; width: 0;
  border-radius: 999px;
  transition: width 1.1s cubic-bezier(.22,.8,.3,1) .2s; }
body.landing .ir-comp-bar.b { background: rgba(244,240,232,.35); }
body.landing .ir-comp-bar.a { background: var(--lime);
  transition-delay: .45s; }
body.landing .in .ir-comp-bar { width: var(--w); }
body.landing .ir-span { display: inline-block; margin-top: 8px;
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px;
  font-weight: 700; color: var(--lime);
  background: rgba(215,241,78,.1);
  border: 1px solid rgba(215,241,78,.3); }
body.landing .ir-span i { margin-right: 7px; font-size: 11px; }

/* numbered thesis + vision */
body.landing .ir-thesis { display: grid; gap: 14px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
body.landing .ir-t { padding-top: 14px;
  border-top: 1px solid rgba(244,240,232,.15); }
body.landing .ir-t-n { color: var(--lime); font-size: 12px;
  font-weight: 800; letter-spacing: .1em; margin-bottom: 5px; }
body.landing .ir-t b { font-size: 13.5px; display: block; }
body.landing .ir-t p { margin: 4px 0 0; font-size: 12px;
  line-height: 1.55; color: rgba(244,240,232,.68); }
body.landing .ir-vision { margin-top: 34px; padding-top: 22px;
  border-top: 1px dashed rgba(244,240,232,.18); text-align: center;
  font-size: 16.5px; font-weight: 700; line-height: 1.55;
  color: var(--lime); }

/* interactive FTE calculator — editable AI-enabled column */
body.landing .ir-fte th i { font-size: 9px; opacity: .55;
  margin-left: 5px; vertical-align: 1px; }
body.landing .ir-fte input.fte-a { width: 64px; padding: 4px 8px;
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--lime); text-align: right;
  background: rgba(215,241,78,.08);
  border: 1px solid rgba(215,241,78,.35); border-radius: 8px;
  transition: border-color .15s, background .15s, box-shadow .15s; }
body.landing .ir-fte input.fte-a:hover { border-color:
  rgba(215,241,78,.6); }
body.landing .ir-fte input.fte-a:focus { outline: none;
  border-color: var(--lime); background: rgba(215,241,78,.14);
  box-shadow: 0 0 0 3px rgba(215,241,78,.14); }
body.landing .ir-fte input.fte-a::-webkit-inner-spin-button,
body.landing .ir-fte input.fte-a::-webkit-outer-spin-button {
  opacity: .5; }
body.landing .fte-sum-a { display: inline-block; }
body.landing .fte-sum-a.pulse { animation: irpulse .45s ease; }
@keyframes irpulse { 0% { transform: scale(1); }
  40% { transform: scale(1.22); } 100% { transform: scale(1); } }
body.landing .fte-red { display: inline-block; margin-top: 12px;
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px;
  font-weight: 700; color: var(--lime);
  background: rgba(215,241,78,.1);
  border: 1px solid rgba(215,241,78,.3);
  transition: color .2s, border-color .2s, background .2s; }
body.landing .fte-red i { margin-right: 6px; font-size: 11px; }
body.landing .fte-red.bad { color: #f09b8e;
  background: rgba(240,155,142,.1);
  border-color: rgba(240,155,142,.4); }

/* fte calc — refinements: transparent spin buttons, badge order,
   dimmer illustrative-model footnote */
body.landing .ir-fte input.fte-a {
  -webkit-appearance: textfield; appearance: textfield; }
body.landing .ir-fte input.fte-a::-webkit-outer-spin-button,
body.landing .ir-fte input.fte-a::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
  opacity: 0; width: 0; height: 0; }
body.landing .ir-fte input.fte-a:hover::-webkit-outer-spin-button,
body.landing .ir-fte input.fte-a:hover::-webkit-inner-spin-button,
body.landing .ir-fte input.fte-a:focus::-webkit-outer-spin-button,
body.landing .ir-fte input.fte-a:focus::-webkit-inner-spin-button {
  -webkit-appearance: inner-spin-button; margin: 0;
  opacity: .4; width: 12px; height: auto;
  background: transparent; }
body.landing .ir-fte input.fte-a[type="number"] {
  -moz-appearance: textfield; appearance: textfield; }
body.landing .fte-red { margin-top: 14px; margin-bottom: 0;
  display: inline-flex; align-items: center; }
body.landing .ir-comp-wrap .fte-red { display: flex;
  justify-content: flex-start; width: fit-content; }
body.landing .ir-span { margin-top: 8px; }
body.landing .ir-span b { font-weight: 800; }
body.landing .ir-fte-note { color: rgba(244,240,232,.32);
  margin-top: 12px; }
body.landing .ir-span-note { margin-top: 8px; font-size: 11.5px;
  line-height: 1.5; color: rgba(244,240,232,.32); max-width: 320px; }

/* uplift story — per-function cards continuing the FTE calculator */
body.landing .ir-up { margin-top: 30px; padding-top: 22px;
  border-top: 1px dashed rgba(244,240,232,.14); }
body.landing .ir-up-grid { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin-top: 14px; }
body.landing .ir-u { padding: 12px 14px; border-radius: 12px;
  background: rgba(244,240,232,.04);
  border: 1px solid rgba(244,240,232,.1); }
body.landing .ir-u-t { display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: rgba(244,240,232,.92); }
body.landing .ir-u-l { flex-shrink: 0; font-size: 10px; font-weight: 700;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
  color: rgba(244,240,232,.6);
  background: rgba(244,240,232,.07);
  border: 1px solid rgba(244,240,232,.12);
  font-variant-numeric: tabular-nums; }
body.landing .ir-u-d { color: var(--lime);
  background: rgba(215,241,78,.09);
  border-color: rgba(215,241,78,.3); }
body.landing .ir-u-c { margin-top: 7px; font-size: 11.5px;
  line-height: 1.45; color: rgba(244,240,232,.5); }
body.landing .ir-u-up { margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed rgba(215,241,78,.22);
  font-size: 11.5px; line-height: 1.45; color: rgba(215,241,78,.85); }
body.landing .ir-u-up i { font-size: 10px; margin-right: 6px; }

/* closing value equation — components summed into the conclusion */
body.landing .ir-eq { display: flex; align-items: stretch;
  flex-wrap: wrap; gap: 10px; margin-top: 30px;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(244,240,232,.04);
  border: 1px solid rgba(244,240,232,.1); }
body.landing .ir-eq-i { display: flex; align-items: center;
  padding: 9px 14px; border-radius: 10px; font-size: 12px;
  font-weight: 700; color: rgba(244,240,232,.85);
  background: rgba(244,240,232,.06);
  border: 1px solid rgba(244,240,232,.12); }
body.landing .ir-eq-op { align-self: center; font-size: 15px;
  font-weight: 800; color: rgba(215,241,78,.7); }
body.landing .ir-eq-res { display: flex; align-items: center;
  flex: 1; min-width: 200px; padding: 9px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 800; color: var(--lime);
  background: rgba(215,241,78,.1);
  border: 1px solid rgba(215,241,78,.32); }

/* ============================================================
   IR v2 — /investors rebuild: editorial sections, hero visual,
   interactive management-compression + value simulators.
   Same story as the source design, dressed in the landing
   palette — cream canvas, ink type, forest accents, lime
   highlights, deep-forest slab for the calculator.
   ============================================================ */
/* section rhythm — numbered eyebrows, editorial sub-lines */
body.landing .ir2-sec { padding: 46px 0 10px; }
body.landing .ir2-eyebrow { display: inline-flex; align-items: center;
  gap: 8px; color: var(--forest); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; }
body.landing .ir2-eyebrow .ir2-dot { width: 7px; height: 7px;
  border-radius: 50%; background: var(--forest);
  box-shadow: 0 0 0 3px rgba(21,56,42,.12); }
body.landing .ir2-sec h2 { margin-top: 12px; }
body.landing .ir2-kick { color: var(--dim); font-size: 15.5px;
  max-width: 640px; line-height: 1.6; margin: 4px 0 24px; }

/* hero — two columns: copy + AI-core visual */
body.landing .ir2-hero { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 48px; align-items: center; padding: 84px 0 40px; }
body.landing .ir2-hero h1 { font-size: clamp(38px, 5.4vw, 60px);
  font-weight: 800; letter-spacing: -.028em; line-height: 1.05;
  color: var(--txt); margin: 16px 0 18px; }
body.landing .ir2-hero h1 em { font-style: normal; color: var(--forest);
  background: linear-gradient(transparent 62%, var(--lime) 62%,
    var(--lime) 94%, transparent 94%); padding: 0 .08em;
  border-radius: 3px; }
body.landing .ir2-sub { color: var(--dim); font-size: 16px;
  max-width: 560px; line-height: 1.6; margin: 0 0 6px; }
body.landing .ir2-hero .hero-cta { justify-content: flex-start;
  margin-top: 22px; }
body.landing .ir2-hero .cap-row { justify-content: flex-start;
  margin-top: 18px; }
body.landing .ir2-hstats { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 24px; max-width: 580px; }
body.landing .ir2-hstat { padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); }
body.landing .ir2-hstat b { display: block; font-size: 22px;
  letter-spacing: -.02em; color: var(--forest); font-weight: 800; }
body.landing .ir2-hstat > span { font-size: 10.5px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .06em; }

/* hero visual — orb, dashed rings, AI core card */
body.landing .ir2-visual { position: relative; min-height: 380px; }
body.landing .ir2-orb { position: absolute; width: 300px; height: 300px;
  right: 5%; top: 18px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(215,241,78,.5),
    rgba(21,56,42,.14) 45%, transparent 70%); }
body.landing .ir2-ring { position: absolute; border-radius: 50%;
  border: 1px dashed rgba(21,56,42,.3);
  animation: ir2spin 20s linear infinite; }
body.landing .ir2-ring.r1 { width: 260px; height: 260px; top: 90px;
  left: 60px; }
body.landing .ir2-ring.r2 { width: 380px; height: 380px; top: 30px;
  left: 0; animation-direction: reverse; }
@keyframes ir2spin { to { transform: rotate(360deg); } }
body.landing .ir2-core { position: absolute; inset: 78px 42px 66px;
  display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; border-radius: 24px;
  border: 1px solid rgba(215,241,78,.4); color: #f4f0e8;
  background: var(--forest);
  box-shadow: 0 24px 60px rgba(21,56,42,.28); }
body.landing .ir2-core .ico { font-size: 38px; color: var(--lime);
  margin-bottom: 12px; }
body.landing .ir2-core .ir2-logo { height: 44px; width: auto;
  margin-bottom: 12px; }
body.landing .ir2-core b { font-size: 20px; letter-spacing: -.01em; }
body.landing .ir2-core small { color: rgba(244,240,232,.62);
  max-width: 220px; margin-top: 8px; font-size: 12px; line-height: 1.5; }

/* thesis strip — lead sentence + three leverage items */
body.landing .ir2-thesis { border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: var(--panel);
  padding: 24px 26px; margin-top: 10px; }
body.landing .ir2-thesis-grid { display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr); gap: 20px;
  align-items: center; }
body.landing .ir2-thesis-lead { font-size: 17px; font-weight: 700;
  line-height: 1.45; }
body.landing .ir2-thesis-lead em { font-style: normal; color: var(--forest);
  background: linear-gradient(transparent 62%, var(--lime) 62%,
    var(--lime) 94%, transparent 94%); padding: 0 .05em; }
body.landing .ir2-titem b { display: block; font-size: 14px; }
body.landing .ir2-titem span { display: block; color: var(--dim);
  font-size: 12px; margin-top: 3px; }

/* 01 the shift — traditional vs agentic stacks */
body.landing .ir2-compare { display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; }
body.landing .ir2-model { padding: 26px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--panel); }
body.landing .ir2-model.ai { border-color: rgba(21,56,42,.4);
  background: linear-gradient(145deg, rgba(215,241,78,.22),
    var(--panel) 55%); }
body.landing .ir2-model h3 { font-size: 19px; margin: 0 0 8px; }
body.landing .ir2-model > p { color: var(--dim); font-size: 13.5px;
  margin: 0; }
body.landing .ir2-stack { display: flex; flex-direction: column;
  gap: 6px; margin-top: 20px; }
body.landing .ir2-node { padding: 12px 16px; border: 1px solid var(--line);
  background: rgba(21,56,42,.04); border-radius: 12px; text-align: center;
  font-weight: 700; font-size: 13.5px; }
body.landing .ir2-node.ai { border-color: rgba(21,56,42,.55);
  background: var(--lime); color: var(--forest); }
body.landing .ir2-node.ai small { font-weight: 600; }
body.landing .ir2-arrow { text-align: center; color: var(--forest);
  font-size: 15px; line-height: .8; }

/* generic numbered cards (product loop + compounding) */
body.landing .ir2-cards { display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
body.landing .ir2-card { padding: 24px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--panel);
  transition: transform .18s, box-shadow .18s; }
body.landing .ir2-card:hover { transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(22,24,29,.1); }
body.landing .ir2-card .num { font-size: 11px; color: var(--forest);
  font-weight: 800; letter-spacing: .12em; margin-bottom: 18px; }
body.landing .ir2-card h3 { font-size: 18px; margin: 0 0 8px; }
body.landing .ir2-card p { color: var(--dim); font-size: 13.5px;
  margin: 0; }
body.landing .ir2-quote { margin-top: 14px; padding: 13px 15px;
  border-left: 3px solid var(--lime); background: rgba(215,241,78,.18);
  border-radius: 0 12px 12px 0; font-size: 13px; color: var(--txt); }
body.landing .ir2-sal-w { display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel2); font-size: 12.5px; color: var(--dim); }
body.landing .ir2-sal-w > i { font-style: normal; font-size: 12.5px;
  color: var(--forest); margin: 0 1px; }
body.landing .ir2-sal { width: 34px; padding: 2px 0 2px 6px;
  font: inherit; font-size: 12.5px; border: 0; background: transparent;
  color: var(--forest); font-weight: 700;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
  appearance: textfield; }
body.landing .ir2-sal:focus { outline: none; box-shadow: none; }
body.landing .ir2-sal::-webkit-outer-spin-button,
body.landing .ir2-sal::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0; }
body.landing .ir2-sbs { display: flex; flex-direction: column;
  margin: 0 5px 0 3px; }
body.landing .ir2-sb { border: 0; padding: 0 2px; background: transparent;
  color: inherit; font-size: 9px; line-height: 1.15; cursor: pointer;
  opacity: .55; }
body.landing .ir2-sb:hover { opacity: 1; }
body.landing.ir-dark .ir2-sal-w { background: rgba(244,240,232,.07);
  border-color: rgba(244,240,232,.22); color: rgba(244,240,232,.55); }
body.landing.ir-dark .ir2-sal-w > i,
body.landing.ir-dark .ir2-sal { color: var(--lime); }
body.landing.ir-dark .ir2-sb { color: rgba(244,240,232,.55); }
body.landing.ir-dark .ir2-sb:hover { color: var(--lime); }
/* product loop — the closing "learn" card spans the full row */
body.landing #product .ir2-card:last-child { grid-column: 1 / -1;
  text-align: center; }

/* observe → act loop strip */
body.landing .ir2-loop { display: flex; align-items: center;
  justify-content: center; flex-wrap: wrap; margin: 32px auto 0; }
body.landing .ir2-loop span { padding: 11px 17px;
  border: 1px solid rgba(21,56,42,.32); background: rgba(215,241,78,.24);
  font-weight: 800; font-size: 13px; }
body.landing .ir2-loop i { font-style: normal; color: var(--forest);
  padding: 0 7px; font-weight: 800; }

/* 03 function tiles */
body.landing .ir2-funcs { display: grid; gap: 13px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
body.landing .ir2-func { padding: 19px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel);
  transition: transform .18s, border-color .18s; }
body.landing .ir2-func:hover { transform: translateY(-3px);
  border-color: rgba(21,56,42,.4); }
body.landing .ir2-func .ico { font-size: 20px; color: var(--forest);
  margin-bottom: 12px; }
body.landing .ir2-func b { display: block; margin-bottom: 6px;
  font-size: 14px; }
body.landing .ir2-func p { font-size: 12.5px; color: var(--dim); margin: 0; }

/* 04 management-compression simulator */
body.landing .ir2-comp-grid { display: grid;
  grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: start; }
body.landing .ir2-box { padding: 24px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--panel); }
body.landing .ir2-head { display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 10px; }
body.landing .ir2-head h3 { margin: 0; font-size: 18px; }
body.landing .ir2-mini { font-size: 10px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--forest); font-weight: 800;
  margin-bottom: 5px; }
body.landing .ir2-reset { border: 1px solid var(--line);
  background: var(--panel2); color: var(--txt); border-radius: 9px;
  padding: 7px 12px; font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: inherit; }
body.landing .ir2-reset:hover { border-color: var(--forest);
  color: var(--forest); }
body.landing .ir2-ctrl { display: grid; grid-template-columns: 1fr 52px;
  gap: 12px; align-items: center; padding: 12px 0;
  border-bottom: 1px solid rgba(21,56,42,.08); }
body.landing .ir2-ctrl label { font-weight: 700; font-size: 13.5px;
  margin: 0; color: var(--txt); }
body.landing .ir2-ctrl small { display: block; color: var(--dim);
  font-weight: 400; font-size: 11px; margin-top: 2px; }
body.landing .ir2-ctrl output { text-align: right; font-size: 20px;
  font-weight: 800; color: var(--forest); }
body.landing .ir2-ctrl input[type="range"] { width: 100%;
  accent-color: var(--forest); margin-top: 8px; }
body.landing .ir2-frame { margin-top: 18px; padding: 18px;
  border: 1px solid rgba(21,56,42,.28); border-radius: 16px;
  background: linear-gradient(100deg, rgba(215,241,78,.24),
    rgba(21,56,42,.05)); }
body.landing .ir2-frame b { font-size: 16px; }
body.landing .ir2-frame p { margin: 8px 0 0; font-size: 12.5px;
  color: var(--dim); }
body.landing .ir2-frame .btn { width: 100%; justify-content: center; }
body.landing .ir2-org { display: grid; grid-template-columns: 120px 1fr 44px;
  gap: 10px; align-items: center; font-size: 11.5px; color: var(--dim);
  margin-bottom: 10px; }
body.landing .ir2-org > b { text-align: right; color: var(--txt);
  font-size: 13px; }
body.landing .ir2-bar-t { height: 24px; border-radius: 8px;
  background: rgba(21,56,42,.07); overflow: hidden; }
body.landing .ir2-bar { height: 100%; border-radius: 8px;
  background: var(--forest);
  transition: width .18s; }
body.landing .ir2-metrics { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin-top: 18px; }
body.landing .ir2-metric { padding: 15px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel2); }
body.landing .ir2-metric b { display: block; font-size: 24px;
  letter-spacing: -.03em; color: var(--forest); font-weight: 800; }
body.landing .ir2-metric b.up { color: var(--forest); }
body.landing .ir2-metric b.neg { color: var(--red); }
body.landing .ir2-metric span { font-size: 10px; color: var(--dim);
  text-transform: uppercase; letter-spacing: .07em; }
body.landing .ir2-metric .pulse { animation: ir2pop .35s ease; }
@keyframes ir2pop { 40% { transform: scale(1.14); } }
body.landing .ir2-note2 { font-size: 11.5px; color: var(--dim);
  margin: 14px 0 0; }

/* 05 management layers — what changes */
body.landing .ir2-layers { display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; }
body.landing .ir2-layer { padding: 22px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--panel); }
body.landing .ir2-layer h3 { display: flex; justify-content: space-between;
  gap: 14px; align-items: baseline; font-size: 16.5px; margin: 0 0 8px; }
body.landing .ir2-layer h3 small { font-size: 10px; color: var(--forest);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 800;
  white-space: nowrap; }
body.landing .ir2-layer p { font-size: 13px; color: var(--dim); margin: 0; }
body.landing .ir2-tags { display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 14px; }
body.landing .ir2-tag { font-size: 11px; color: var(--dim);
  border: 1px solid var(--line); padding: 5px 10px; border-radius: 8px;
  background: var(--panel2); }

/* 06 total economic value cards + equation */
body.landing .ir2-tev { display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; }
body.landing .ir2-vcard { padding: 20px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel);
  transition: transform .18s, border-color .18s; }
body.landing .ir2-vcard:hover { transform: translateY(-3px);
  border-color: rgba(21,56,42,.4); }
body.landing .ir2-vcard .n { font-size: 10px; color: var(--forest);
  font-weight: 800; letter-spacing: .13em; }
body.landing .ir2-vcard h3 { font-size: 18px; margin: 8px 0 6px; }
body.landing .ir2-vcard p { font-size: 12.5px; color: var(--dim); margin: 0; }
body.landing .ir2-eq { margin-top: 22px; padding: 22px; border-radius: 16px;
  border: 1px solid rgba(21,56,42,.3); text-align: center; font-size: 15px;
  line-height: 1.7;
  background: linear-gradient(90deg, rgba(215,241,78,.28),
    rgba(21,56,42,.06)); }
body.landing .ir2-eq b { color: var(--forest); }
body.landing .ir2-eq small { display: block; color: var(--dim);
  font-size: 11.5px; margin-top: 6px; }

/* 07 value-by-function table */
body.landing .ir2-table { overflow: auto; border: 1px solid var(--line);
  border-radius: 16px; background: var(--panel); }
body.landing .ir2-table table { width: 100%; border-collapse: collapse;
  min-width: 640px; }
body.landing .ir2-table th { text-align: left; padding: 13px 16px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); background: var(--panel2);
  border-bottom: 1px solid var(--line); }
body.landing .ir2-table td { text-align: left; padding: 13px 16px;
  font-size: 13px; border-bottom: 1px solid rgba(21,56,42,.08);
  vertical-align: top; }
body.landing .ir2-table td:first-child { font-weight: 700;
  white-space: nowrap; }
body.landing .ir2-table tr:last-child td { border-bottom: 0; }
body.landing .ir2-lab { display: inline-block; font-size: 11px;
  color: var(--dim); border: 1px solid var(--line); padding: 4px 9px;
  border-radius: 8px; background: var(--panel2); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
/* CTA at the foot of the operating-layer panel — lime site-CTA look */
body.landing .ir-cta { margin-top: 28px; text-align: center; }
body.landing .ir-cta .btn.primary { background: var(--lime);
  border-color: var(--lime); color: var(--forest); border-radius: 999px;
  padding: 13px 26px; font-weight: 800; font-size: 14px; }
body.landing .ir-cta .btn.primary:hover { filter: brightness(1.06);
  transform: translateY(-1px); }

body.landing .ir2-note-pct { color: var(--forest); font-weight: 800;
  font-variant-numeric: tabular-nums; }
body.landing.ir-dark .ir2-note-pct { color: var(--lime); }

/* 08 investment-case simulator — forest calculator slab */
body.landing .ir2-roi { display: grid; grid-template-columns: .95fr 1.05fr;
  gap: 22px; align-items: start; }
body.landing .ir2-xcards { display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 26px; }
body.landing .ir2-calc { position: sticky; top: 84px; padding: 26px;
  border-radius: 22px; color: #f4f0e8;
  border: 1px solid rgba(215,241,78,.35);
  background: var(--forest);
  box-shadow: 0 24px 70px rgba(21,56,42,.3); }
body.landing .ir2-calc h3 { color: #f4f0e8; font-size: 18px; margin: 0 0 6px; }
body.landing .ir2-calc > p { color: rgba(244,240,232,.6); font-size: 13px;
  margin: 0 0 16px; }
body.landing .ir2-in { margin-bottom: 15px; }
body.landing .ir2-in label { display: flex; justify-content: space-between;
  font-size: 12.5px; color: rgba(244,240,232,.82); margin-bottom: 6px;
  font-weight: 600; }
body.landing .ir2-in output { color: var(--lime); font-weight: 800; }
body.landing .ir2-calc input[type="range"] { width: 100%;
  accent-color: var(--lime); }
body.landing .ir2-result { margin-top: 20px; padding: 18px;
  border-radius: 15px; background: rgba(215,241,78,.1);
  border: 1px solid rgba(215,241,78,.35); }
body.landing .ir2-result .lbl { font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lime); font-weight: 800; }
body.landing .ir2-result .big { font-size: 38px; font-weight: 800;
  letter-spacing: -.04em; color: var(--lime); margin-top: 4px; }
body.landing .ir2-break { display: grid; gap: 8px; margin-top: 14px; }
body.landing .ir2-break div { display: flex; justify-content: space-between;
  color: rgba(244,240,232,.72); font-size: 12.5px; }
body.landing .ir2-break b { color: #f4f0e8; }
body.landing .ir2-calc .ir2-note2 { color: rgba(244,240,232,.45); }

/* closing vision line under the CTA slab */
body.landing .ir2-fin { text-align: center; padding: 30px 20px 10px;
  color: var(--dim); font-size: 13px; }
body.landing .ir2-fin b { color: var(--txt); }

@media (max-width: 920px) {
  body.landing .ir2-hero { grid-template-columns: 1fr; padding-top: 60px; }
  body.landing .ir2-visual { min-height: 320px; }
  body.landing .ir2-thesis-grid { grid-template-columns: 1fr; gap: 14px; }
  body.landing .ir2-compare, body.landing .ir2-comp-grid,
  body.landing .ir2-layers, body.landing .ir2-tev,
  body.landing .ir2-roi, body.landing .ir2-xcards {
    grid-template-columns: 1fr; }
  body.landing .ir2-calc { position: static; }
  body.landing .ir2-org { grid-template-columns: 96px 1fr 38px; }
}
@media (prefers-reduced-motion: reduce) {
  body.landing .ir2-ring, body.landing .ir2-metric .pulse {
    animation: none; }
}

/* ============================================================
   ir-dark — the same IR page on a violet-black canvas:
   #0b0816 background, lime as THE element color, cream
   text. Scoped to /investors via body.landing.ir-dark.
   ============================================================ */
body.landing.ir-dark {
  --bg: #0b0816; --panel: #141021; --panel2: #100c1c;
  --txt: #f4f0e8; --dim: rgba(244,240,232,.6);
  --line: rgba(215,241,78,.16);
}
/* chrome */
body.landing.ir-dark .topbar {
  background: rgba(11,8,22,.82);
  border-bottom-color: var(--line); }
body.landing.ir-dark .brand .logo {
  background: var(--lime); }
body.landing.ir-dark .brand .logo i { color: var(--forest); }
body.landing.ir-dark .nav a.on, body.landing.ir-dark .nav a:hover {
  background: rgba(215,241,78,.1); color: var(--lime); }
body.landing.ir-dark .nav-right .btn.primary {
  background: var(--lime); border-color: var(--lime);
  color: var(--forest); }
/* hero + shared bits */
body.landing.ir-dark .hero-tag {
  color: var(--lime); background: rgba(215,241,78,.1);
  border-color: rgba(215,241,78,.3); }
body.landing.ir-dark .big-cta {
  background: var(--lime); border-color: var(--lime);
  color: var(--forest); box-shadow: 0 10px 26px rgba(215,241,78,.18); }
body.landing.ir-dark .cap { background: rgba(215,241,78,.07); }
body.landing.ir-dark .cap i { color: var(--lime); }
/* section accents — forest tokens become lime on dark */
body.landing.ir-dark .ir2-eyebrow,
body.landing.ir-dark .ir2-mini,
body.landing.ir-dark .ir2-card .num,
body.landing.ir-dark .ir2-vcard .n,
body.landing.ir-dark .ir2-layer h3 small { color: var(--lime); }
body.landing.ir-dark .ir2-eyebrow .ir2-dot { background: var(--lime);
  box-shadow: 0 0 0 3px rgba(215,241,78,.14); }
body.landing.ir-dark h2 i, body.landing.ir-dark .ir2-func .ico,
body.landing.ir-dark .ir2-arrow { color: var(--lime); }
/* hero headline — lime word, no marker band */
body.landing.ir-dark .ir2-hero h1 em { background: none;
  color: var(--lime); padding: 0; }
body.landing.ir-dark .ir2-hstat b,
body.landing.ir-dark .ir2-ctrl output,
body.landing.ir-dark .ir2-metric b,
body.landing.ir-dark .ir2-metric b.up { color: var(--lime); }
body.landing.ir-dark .ir2-thesis-lead em { background: none;
  color: var(--lime); padding: 0; }
/* node stacks — frosted glass; the AI node stays solid lime */
body.landing.ir-dark .ir2-node {
  background: rgba(244,240,232,.05);
  border-color: rgba(244,240,232,.14); color: var(--txt); }
body.landing.ir-dark .ir2-node.ai { background: var(--lime);
  border-color: var(--lime); color: var(--forest); }
/* loop strip — outlined lime chips */
body.landing.ir-dark .ir2-loop span {
  border-color: rgba(215,241,78,.4);
  background: rgba(215,241,78,.08); color: var(--lime); }
body.landing.ir-dark .ir2-loop i { color: var(--lime); }
/* borders & tracks that assumed a light canvas */
body.landing.ir-dark .ir2-model.ai { border-color: rgba(215,241,78,.35);
  background: linear-gradient(145deg, rgba(215,241,78,.1),
    var(--panel) 55%); }
body.landing.ir-dark .ir2-ctrl { border-bottom-color: var(--line); }
body.landing.ir-dark .ir2-ctrl input[type="range"] {
  accent-color: var(--lime); }
body.landing.ir-dark .ir2-reset:hover { border-color: var(--lime);
  color: var(--lime); }
body.landing.ir-dark .ir2-bar-t { background: rgba(244,240,232,.08); }
body.landing.ir-dark .ir2-bar { background: var(--lime); }
body.landing.ir-dark .ir2-frame {
  border-color: rgba(215,241,78,.3);
  background: linear-gradient(100deg, rgba(215,241,78,.1),
    rgba(244,240,232,.03)); }
body.landing.ir-dark .ir2-func:hover,
body.landing.ir-dark .ir2-vcard:hover {
  border-color: rgba(215,241,78,.4); }
body.landing.ir-dark .ir2-quote {
  border-left-color: var(--lime);
  background: rgba(215,241,78,.08); }
body.landing.ir-dark .ir2-eq {
  border-color: rgba(215,241,78,.3);
  background: linear-gradient(90deg, rgba(215,241,78,.12),
    rgba(244,240,232,.03)); }
body.landing.ir-dark .ir2-eq b { color: var(--lime); }
body.landing.ir-dark .ir2-table td { border-bottom-color: var(--line); }
body.landing.ir-dark .ir2-table th { background: rgba(215,241,78,.05); }
/* dark slabs stay forest but pick up lime borders to separate
   from the near-black canvas */
body.landing.ir-dark .ir2-calc {
  border-color: rgba(215,241,78,.4); }
body.landing.ir-dark .panel.cta {
  border-color: rgba(215,241,78,.35); }
/* hover glow on cards */
body.landing.ir-dark .ir2-card:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,.4); }

/* ------------------------------------------------------------------
   legal pages — /terms /privacy /cookies (cream landing chrome)
   ------------------------------------------------------------------ */
body.landing .legal-page { max-width: 780px; }
body.landing .legal-body { margin-top: 26px; }
body.landing .legal-body h2 {
  margin: 30px 0 8px; font-size: 19px; font-weight: 800;
  color: var(--ink, #1c1a16); letter-spacing: -.01em; }
body.landing .legal-body p {
  margin: 0 0 12px; font-size: 15.5px; line-height: 1.65;
  color: var(--dim); }
body.landing .legal-body ul {
  margin: 0 0 12px 20px; font-size: 15.5px; line-height: 1.65;
  color: var(--dim); }
body.landing .legal-body a { color: var(--forest); }