/* Landing page layout. Light editorial page; the dark bands are where the
   engine shows. */

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--canvas); color:var(--ink); font:16px/1.6 var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
.mono{font-family:var(--font-mono)}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}

/* ---- nav ---- */
.navshell{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s}
.navshell.scrolled{border-bottom-color:var(--hair)}
.nav{display:flex; align-items:center; gap:24px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font:500 24px/1 var(--font-display); letter-spacing:-.02em; text-decoration:none}
.brand .dot{color:var(--accent)}
.brand .mark{width:30px; height:30px; border-radius:9px; background:var(--ink); color:var(--canvas); display:grid; place-items:center}
.brand .mark svg{width:20px; height:20px}
.brand.small{font-size:20px}
.links{display:flex; gap:26px; margin-left:18px}
.links a{text-decoration:none; color:var(--muted); font-size:14.5px; transition:color .2s}
.links a:hover{color:var(--ink)}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.langs{display:flex; border:1px solid var(--hair); border-radius:99px; padding:2px}
.lang{border:0; background:none; font:500 12px var(--font-body); color:var(--muted); padding:4px 9px; border-radius:99px; cursor:pointer}
.lang.on{background:var(--ink); color:var(--canvas)}

.pill{display:inline-flex; align-items:center; gap:8px; background:var(--primary-fill); color:var(--primary-fg); text-decoration:none; font-weight:500; font-size:14px; padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--primary-fill); transition:transform .2s var(--ease), box-shadow .2s}
.pill:hover{transform:translateY(-1px); box-shadow:0 6px 18px -8px rgba(21,23,28,.5)}
.pill.big{font-size:15.5px; padding:13px 22px}
.pill.ghost{background:transparent; color:var(--ink); border-color:color-mix(in srgb, var(--ink) 22%, transparent)}
.pill svg{width:14px; height:14px}
.pill.light{background:var(--canvas); color:var(--ink); border-color:var(--canvas)}
.pill.ghost.light{background:transparent; color:var(--canvas); border-color:rgba(243,241,236,.3)}

/* ---- hero ---- */
.hero{padding:72px 0 40px; position:relative}
.hero-top{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.hero[data-side="ledger-left"] .ledger{order:-1}
.hero h1{font:400 clamp(40px, 5.2vw, 72px)/1.02 var(--font-display); letter-spacing:-.035em; margin:0 0 22px; text-wrap:balance}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .sub{font-size:clamp(17px, 1.5vw, 19px); color:var(--muted); max-width:560px; margin:0; text-wrap:pretty}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.hero .cta-row{justify-content:flex-start}
.assure{list-style:none; padding:0; margin:26px 0 0; display:flex; gap:22px; justify-content:flex-start; flex-wrap:wrap; font-size:13.5px; color:var(--muted)}
.assure li{display:flex; align-items:center; gap:7px}
.assure li::before{content:""; width:14px; height:14px; border-radius:50%; background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A57' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/9px no-repeat}

/* hero ledger: a printed schedule running off the top and bottom (ledger.js) */
.ledger{position:relative; height:520px; overflow:hidden; --lh:1.75em;
  mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent); -webkit-mask-image:linear-gradient(transparent, #000 14%, #000 86%, transparent)}
.ledger-in{display:grid; grid-template-columns:repeat(2, 1fr); height:100%; opacity:var(--ledger-o, 1); color:var(--muted); transform-origin:50% 40%; transition:transform 1.2s var(--ease), opacity .4s}
.ledger[data-angle="tilt"] .ledger-in{transform:perspective(1200px) rotateX(16deg) rotateZ(-5deg) scale(1.12)}
.lcol{overflow:hidden; padding:0 26px}
.lcol + .lcol{border-left:1px solid color-mix(in srgb, var(--ink) 22%, transparent)}
.lstrip{font:400 16px/var(--lh) var(--font-mono); font-variant-numeric:tabular-nums; will-change:transform}
.lsec{padding-bottom:2.4em}
.lr{display:flex; justify-content:space-between; height:var(--lh); white-space:pre}
.lr.sub, .lr.tot{color:var(--ink)}
.lr.sub{border-top:1px solid color-mix(in srgb, var(--ink) 22%, transparent); margin-bottom:.9em}
.lr.tot{border-top:3px double color-mix(in srgb, var(--ink) 40%, transparent); font-weight:500}
.lr i{font-style:normal; color:var(--faint)}
.lr b{font-weight:inherit; transition:opacity .3s}
.lr b.out{opacity:0}
.wh{display:inline-block; height:var(--lh); overflow:hidden; vertical-align:top}
.ws{display:block; transform:translateY(calc(var(--lh) * var(--d, 0) * -1)); transition:transform .9s var(--ease) var(--w, 0s)}
.ws span{display:block; height:var(--lh)}

/* ledger dev bar (?dev or localhost) */
.ldev{position:fixed; right:16px; bottom:16px; z-index:60; font:12px/1.4 var(--font-mono); color:var(--c-ink); background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:10px; display:grid; gap:8px; min-width:300px}
.ldev.min{min-width:0}
.ldev.min .ldev-row{display:none}
.ldev-hd{display:flex; justify-content:space-between; align-items:center; gap:12px}
.ldev-hd button{all:unset; cursor:pointer; color:var(--c-muted)}
.ldev-row{display:grid; grid-template-columns:62px 1fr; align-items:center; gap:8px; color:var(--c-muted)}
.ldev-seg{display:flex; background:var(--c-panel-2); border-radius:8px; padding:2px}
.ldev-seg button{all:unset; flex:1; text-align:center; cursor:pointer; padding:3px 8px; border-radius:6px; color:var(--c-muted)}
.ldev-seg button.on{background:var(--c-line); color:var(--c-ink)}
.ldev input[type=range]{width:100%; accent-color:var(--c-green)}
.ldev-ok{display:inline-flex; align-items:center; gap:6px}
.ldev-ok::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--c-green)}
.ldev-ok.bad{color:var(--c-red)}
.ldev-ok.bad::before{background:var(--c-red)}

.hero-stage{margin-top:56px; position:relative}
.stage-glow{position:absolute; inset:8% 6% -4%; z-index:-1; border-radius:40px; background:radial-gradient(60% 60% at 30% 40%, rgba(61,214,140,.20), transparent 70%), radial-gradient(50% 60% at 75% 60%, rgba(26,32,109,.16), transparent 70%); filter:blur(40px)}
.hero-stage .note{text-align:center; font-size:13px; color:var(--faint); margin:14px 0 0}
.hero-stage .note a{color:var(--accent); text-decoration:none; font-weight:500}

/* ---- bands ---- */
.band{padding:104px 0}
.band.alt{background:var(--panel-2)}
.head{max-width:720px; margin-bottom:52px}
.kicker{display:inline-block; font:500 12.5px var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:14px}
h2{font:400 clamp(34px, 4.4vw, 54px)/1.06 var(--font-display); letter-spacing:-.03em; margin:0; text-wrap:balance}
h3{font-weight:600; font-size:17px; margin:0; letter-spacing:-.01em}
.lede{color:var(--muted); font-size:17.5px; margin:18px 0 0; text-wrap:pretty}

/* marquee */
.mq-band{padding:26px 0; border-block:1px solid var(--hair); background:var(--canvas)}
.mq{overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)}
.mq-track{display:flex; width:max-content; animation:mq 50s linear infinite}
.mq-track span, .mq-track .dupe{display:flex}
.mq-track span:not(.dupe){font:400 21px var(--font-display); color:var(--muted); padding:0 26px; white-space:nowrap; position:relative}
.mq-track span:not(.dupe)::after{content:""; position:absolute; right:-3px; top:50%; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.5}
@keyframes mq{to{transform:translateX(-50%)}}

/* how */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
.steps li{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-1); display:flex; flex-direction:column}
.steps .num{color:var(--faint); font-size:13px}
.steps h3{font:400 26px/1.15 var(--font-display); letter-spacing:-.02em; margin:14px 0 10px}
.steps p{color:var(--muted); margin:0 0 20px; font-size:15px}
.mini{margin-top:auto; background:var(--c-bg); color:var(--c-ink); border-radius:12px; padding:14px; display:grid; gap:7px; font-size:12.5px}
.mini span{display:flex; justify-content:space-between; gap:10px}
.mini .f{color:var(--c-blue)}
.mini b{font-weight:500}
.mini .amber{color:var(--c-amber)}
.mini .green{color:var(--c-green)}

/* agents */
.agents{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.agents article{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); padding:22px; transition:transform .3s var(--ease), box-shadow .3s}
.agents article:hover{transform:translateY(-3px); box-shadow:var(--shadow-2)}
.agents header{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.agents .ic{width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font:500 15px var(--font-mono); background:var(--c-bg); color:var(--c-ink); box-shadow:inset 0 0 0 1px #23262D}
.agents .ic.you{background:var(--canvas); color:var(--ink); box-shadow:inset 0 0 0 1px var(--hair)}
.agents .ic.you .nxm{--nxm-node:var(--amber)}
.agents dl{margin:0; display:grid; grid-template-columns:52px 1fr; gap:8px 12px; font-size:14.5px}
.agents dt{font:500 11px var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint); padding-top:3px}
.agents dd{margin:0; color:var(--muted)}
.agents article.you{background:transparent; border-style:dashed}

/* engine band */
.band.dark{background:#0B0D10; color:var(--c-ink); position:relative; overflow:hidden}
.band.dark::before{content:""; position:absolute; inset:0; background:radial-gradient(50% 50% at 80% 30%, rgba(61,214,140,.10), transparent 70%); pointer-events:none}
.band.dark .kicker{color:var(--c-green)}
.band.dark .lede{color:var(--c-muted)}
.engine-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:center; position:relative}
.ticks{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:11px}
.ticks li{position:relative; padding-left:26px; color:inherit; font-size:15.5px}
.ticks li::before{content:""; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E7A57' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/9px no-repeat}
.band.dark .ticks li{color:#C9CDD3}
.band.dark .ticks li::before{background-color:var(--c-green-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DD68C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E")}
.hint{font:12.5px var(--font-mono); color:var(--c-faint); margin-top:26px}
.engine-frame{height:520px; border-radius:var(--r-xl); overflow:hidden; border:1px solid #23262D; display:flex; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); font:13px/1.45 var(--font-body)}
.engine-frame .mono{font-family:var(--font-mono); font-size:.93em}

/* split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.split article{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl); padding:34px}
.split h3{font:400 30px/1.12 var(--font-display); letter-spacing:-.02em; margin:0 0 6px}
.split article.firm{background:var(--ink); color:var(--canvas); border-color:var(--ink)}
.split article.firm .kicker{color:var(--c-green)}
.split article.firm .ticks li::before{background-color:var(--c-green-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DD68C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E")}
.clients{margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12.5px}
.clients span{display:flex; align-items:center; gap:8px; background:#171B21; border:1px solid #23262D; border-radius:9px; padding:8px 10px; color:#C9CDD3}
.clients i{width:8px; height:8px; border-radius:3px}
.clients b{margin-left:auto; font-weight:500; color:var(--c-amber)}

/* calendar strip */
.cal-strip{display:grid; grid-template-columns:repeat(6, 1fr); gap:12px}
.cal-strip .d{background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:8px; min-height:170px}
.cal-strip .d .dt{font:500 30px/1 var(--font-display); letter-spacing:-.02em}
.cal-strip .d .dt small{display:block; font:500 11.5px var(--font-mono); color:var(--faint); text-transform:uppercase; letter-spacing:.06em; margin-top:6px}
.cal-strip .d b{font-weight:600; font-size:14px; line-height:1.3}
.cal-strip .d i{font-style:normal; font-size:12.5px; color:var(--muted)}
.cal-strip .d .by{margin-top:auto; align-self:flex-start; font:500 11px var(--font-mono); border:1px solid var(--hair); padding:2px 7px; border-radius:6px; color:var(--muted)}
.cal-strip .d.soon{border-color:color-mix(in srgb, var(--amber) 55%, transparent); box-shadow:0 0 0 4px var(--amber-soft)}
.cal-strip .d.soon .dt{color:var(--amber)}
.src{font-size:13px; color:var(--faint); margin:18px 0 0}

/* trust */
.trust{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px}
.trust div{border-top:1px solid var(--ink); padding-top:18px}
.trust p{color:var(--muted); font-size:15px; margin:10px 0 0}

/* faq */
.faq-grid{display:grid; grid-template-columns:.7fr 1.3fr; gap:48px}
.faq details{border-bottom:1px solid var(--hair); padding:18px 0}
.faq summary{cursor:pointer; list-style:none; font-weight:500; font-size:17px; display:flex; justify-content:space-between; gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:300 22px/1 var(--font-body); color:var(--faint); transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted); margin:12px 0 0; font-size:15.5px}

/* final */
.final{background:var(--ink); color:var(--canvas); padding:120px 0; text-align:center; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; inset:auto -10% -60% -10%; height:120%; background:radial-gradient(50% 50% at 50% 100%, rgba(61,214,140,.18), transparent 70%)}
.final h2{font-size:clamp(38px, 5.4vw, 68px); max-width:900px; margin:0 auto; position:relative}
.final .cta-row{position:relative}

.footer{padding:28px 0; font-size:13.5px; color:var(--muted); border-top:1px solid var(--hair)}
.footer .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.footer a{text-decoration:none; color:var(--ink)}

/* reveal */
.js-motion [data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s)}
.js-motion [data-reveal].in{opacity:1; transform:none}

/* ---- responsive ---- */
@media (max-width: 1100px){
  .cal-strip{grid-template-columns:repeat(3, 1fr)}
  .trust{grid-template-columns:repeat(2, 1fr)}
  .engine-grid{grid-template-columns:1fr; gap:40px}
}
@media (max-width: 900px){
  .hero-top{grid-template-columns:1fr}
  .hero-copy{text-align:center}
  .hero h1{font-size:clamp(40px, 7.4vw, 64px)}
  .hero .sub{margin:0 auto}
  .hero .cta-row, .assure{justify-content:center}
  .ledger{display:none}
  .links{display:none}
  .steps, .agents, .split{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr; gap:10px}
  .band{padding:76px 0}
}
@media (max-width: 600px){
  .wrap{padding:0 16px}
  .nav{gap:10px}
  .nav-right .pill{padding:7px 12px; font-size:13px}
  .hero{padding-top:44px}
  .hero-stage{margin-top:40px}
  .cal-strip{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr}
  .clients{grid-template-columns:1fr}
  .split article{padding:24px}
  .engine-frame{height:560px}
  .assure{gap:10px 18px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mq-track{animation:none}
  *{transition:none !important}
}