/* ============================================================
   MOLDR · landing — instrument-panel theme
   Lifted from the app chrome: panel surfaces, stage backdrop,
   hairline rules, tight type, mono microcopy, single vermilion.
   Detailing borrows from the app itself — square LED status idiom,
   dotted log rows, square filename bullet — plus technical-drawing
   registration marks on the canvas viewport.
   This file fully replaces the previous landing.css.
   ============================================================ */

:root{
  /* app palette tokens — kept identical so site + tool read as one product */
  --accent:#e2502a; --accent-2:#ff6a3d; --accent-soft:rgba(226,80,42,.16); --accent-ink:#ffb59e;
  --text:#e8ecef; --text-2:#a6aeb4; --text-3:#6c747a;
  --panel:rgba(18,21,24,.74); --panel-2:rgba(26,30,34,.82); --raised:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --ok:#46b07f; --warn:#d99a3a; --idle:#5d666c;
  --voice:#6fb6d6;
  --r:9px; --r2:6px; --r3:4px;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sh:0 8px 30px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.05) inset;
  --bg:#0a0c0e;
  --nav-h:54px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--sans);color:var(--text);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* faint app stage radial pinned to the top, then flat page below.
     no background-attachment:fixed — avoids mobile repaint/jank. */
  background-image:radial-gradient(120% 70% at 50% -12%,#161c21 0%,#0e1215 42%,#090b0d 78%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
img,svg,canvas{display:block}
::selection{background:var(--accent-soft);color:var(--text)}

/* the app sets tabular figures app-wide on .mono; mirror it everywhere
   numbers appear so columns and timestamps line up like the tool. */
.specline .wrap,.step__tag,.cmds,.canvas-head,.canvas-status,
.terminal,.terminal__meta,.hero__note,.footer__copy{font-variant-numeric:tabular-nums}

/* shared layout container */
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;width:100%}

/* section heading — plain, confident IBM Plex Sans with a short accent tick */
.section-title{
  font-family:var(--sans);font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text);
  margin-bottom:26px;
}
.section-title::before{
  content:"";display:inline-block;width:18px;height:1px;background:var(--accent);
  vertical-align:middle;margin-right:11px;transform:translateY(-4px);
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ============================ BUTTONS ============================ */
/* app-true: primary is a solid vermilion chip; default is a raised hairline chip */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:10px 15px;border-radius:var(--r2);
  border:1px solid var(--line-2);background:var(--raised);color:var(--text);
  transition:background .16s,border-color .16s,transform .05s;white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.08);border-color:var(--text-3)}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:var(--accent);color:#120a06;border-color:transparent;font-weight:600;
  box-shadow:0 2px 12px rgba(226,80,42,.4);
}
.btn--primary:hover{background:var(--accent-2);border-color:transparent}
.btn--lg{font-size:12px;padding:13px 22px;letter-spacing:.1em}

/* ============================ NAV ============================ */
/* flat instrument bar: near-solid, hairline bottom, no glassy floating card */
.nav{
  position:sticky;top:0;z-index:40;height:var(--nav-h);
  background:rgba(10,12,14,.92);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px);
}
.nav__inner{height:100%;display:flex;align-items:center;gap:24px}
.nav__logo{
  font-weight:700;letter-spacing:.04em;font-size:16px;color:var(--text);
  display:inline-flex;align-items:baseline;
}
/* small inline accent outline of "ldr" in nav + footer */
.outln{
  color:transparent;-webkit-text-stroke:1px var(--accent);
  margin-left:.5px;
}
.nav__links{display:flex;gap:22px;margin-left:8px}
.nav__links a{
  position:relative;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--text-2);
  padding:4px 0;transition:color .14s;
}
.nav__links a:hover{color:var(--text)}
/* dimension-line hover: a 1px accent rule grows from 0 -> 100%, a drafting cue */
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width .18s ease;
}
.nav__links a:hover::after{width:100%}
.nav .btn--primary{margin-left:auto}

/* ============================ HERO ============================ */
.hero{padding:78px 0 64px;border-bottom:1px solid var(--line)}
.hero__inner{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:56px;align-items:center;
}
.hero__copy{max-width:520px}

/* wordmark: "Mo" solid, "ldr" outline accent, dropped onto its own indented line */
.wordmark{
  font-weight:700;line-height:.92;letter-spacing:-.02em;
  font-size:clamp(58px,9vw,104px);margin-bottom:22px;
}
.wm-mo{display:block;color:var(--text)}
.wm-ldr{
  display:block;margin-left:.16em;color:transparent;
  -webkit-text-stroke:2px var(--accent);
}
/* fallback: engines without -webkit-text-stroke would render the outlined
   "ldr" fully transparent (invisible). Fall back to a solid accent-ink fill. */
@supports not ((-webkit-text-stroke:1px #000)){
  .wm-ldr,.outln{color:var(--accent-ink);-webkit-text-stroke:0}
}
.hero__sub{
  font-size:16px;line-height:1.62;color:var(--text-2);max-width:46ch;margin-bottom:30px;
}
.hero__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero__note{
  font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.02em;
  color:var(--text-3);max-width:24ch;
}

/* ---- canvas frame: an app panel with technical-drawing crop marks ---- */
.hero__canvas{min-width:0}
.canvas-frame{
  position:relative;aspect-ratio:4/3;width:100%;
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(26,32,38,.6),rgba(10,13,15,.4)),
    var(--panel);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden;
}
/* registration / crop marks at the corners — a genuine drawing detail */
.canvas-frame::before,
.canvas-frame::after{
  content:"";position:absolute;width:13px;height:13px;pointer-events:none;z-index:3;
  border:0 solid var(--line-2);
}
.canvas-frame::before{top:10px;left:10px;border-top-width:1px;border-left-width:1px}
.canvas-frame::after{bottom:10px;right:10px;border-bottom-width:1px;border-right-width:1px}
.canvas-frame #gesture-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}

/* head + status read like the app's HUD tags */
.canvas-head{
  position:absolute;top:11px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);background:rgba(0,0,0,.42);
  border:1px solid var(--line);border-radius:var(--r3);padding:4px 8px;
}
/* status indicator = the app's .led idiom: a 2px rounded SQUARE, not a circle.
   the real app has zero circular status dots. */
.track-dot{
  width:7px;height:7px;border-radius:2px;background:var(--ok);
  box-shadow:0 0 7px var(--ok);
  animation:trackpulse 1.6s ease-in-out infinite;
}
@keyframes trackpulse{0%,100%{opacity:.4}50%{opacity:1}}

.canvas-status{
  position:absolute;bottom:11px;right:12px;z-index:2;display:flex;
  border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;
  background:rgba(0,0,0,.42);
}
.canvas-status span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--text-2);
  padding:4px 9px;
}
.canvas-status span + span{border-left:1px solid var(--line)}

/* ============================ SPEC LINE ============================ */
/* honest tech list — a quiet mono ticker rule under the hero */
.specline{
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.012);
}
.specline .wrap{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--text-3);padding-top:13px;padding-bottom:13px;
  text-align:center;
}

/* ============================ HOW IT WORKS (spec sheet) ============================ */
/* NOT three cards — full-width data rows split by hairlines, mono tag left column */
.how{padding:64px 0}
.steps{border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:160px 1fr;gap:32px;
  padding:30px 0;border-bottom:1px solid var(--line);align-items:start;
}
.step__tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);
  display:flex;align-items:baseline;gap:9px;padding-top:3px;
}
/* square index tick, echoing the app's .led square */
.step__tag::before{
  content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);
  flex:0 0 auto;transform:translateY(-1px);
}
.step__body{max-width:62ch}
.step__title{font-size:17px;font-weight:600;color:var(--text);margin-bottom:9px}
.step__body p{font-size:14.5px;color:var(--text-2);line-height:1.62}

/* .cmds spans = app "key chips": subtle border, tight radius, mono. NEVER pills. */
.cmds{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.cmds span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--text-2);
  background:rgba(255,255,255,.07);border:1px solid var(--line);
  border-radius:var(--r3);padding:4px 9px;
}

/* ============================ EXAMPLE (terminal) ============================ */
.example{padding:64px 0;border-top:1px solid var(--line)}
.example__inner{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:48px;align-items:start;
}
.example__copy{position:sticky;top:calc(var(--nav-h) + 24px)}
.example__copy .section-title{margin-bottom:18px}
.example__copy p{font-size:14.5px;color:var(--text-2);line-height:1.62;max-width:40ch}

/* terminal = flat app panel; head is a quiet filename bar (no traffic lights) */
.terminal{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;
}
.terminal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.terminal__name{
  display:inline-flex;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-2);
}
/* square accent bullet before the filename — app-true marker, never a mac dot */
.terminal__name::before{
  content:"";width:6px;height:6px;margin-right:8px;flex:0 0 auto;
  background:var(--accent);border-radius:1px;
}
.terminal__meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--text-3)}
.terminal__body{
  padding:14px 16px 18px;
  font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--text);
}
.tl{display:flex;align-items:baseline;gap:10px;padding:3px 0}
/* dotted bottom rule — exact match to the app's .log li{border-bottom:1px dotted var(--line)} */
.tl:not(:last-child){border-bottom:1px dotted var(--line)}
.ts{color:var(--text-3);flex:0 0 auto;font-variant-numeric:tabular-nums}
/* role chips: you = vermilion ink, sys = green ok (matches app log colors).
   fixed width so the transcript aligns like a real log. */
.you,.sys{
  flex:0 0 44px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
}
.you{color:var(--accent-ink)}
.sys{color:var(--ok)}
/* blinking caret on the last line */
.caret{
  display:inline-block;width:7px;height:1.05em;margin-left:3px;
  background:var(--accent);transform:translateY(2px);
  animation:caretblink 1.1s step-end infinite;
}
@keyframes caretblink{0%,100%{opacity:1}50%{opacity:0}}

/* ============================ ACCESSIBILITY (flat columns) ============================ */
/* visually distinct from .steps: columns under a hairline top rule, accent icon */
.access{padding:64px 0;border-top:1px solid var(--line)}
.access-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.acard{
  padding:26px;
  border-right:1px solid var(--line);
}
.access-grid .acard:first-child{padding-left:0}
.access-grid .acard:last-child{border-right:none;padding-right:0}
.acard__icon{
  width:24px;height:24px;color:var(--accent);stroke-width:1.5;
  display:block;margin-bottom:16px;
}
.acard__title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:8px}
.acard p{font-size:13.5px;color:var(--text-2);line-height:1.6}

/* ============================ CTA ============================ */
/* flat panel echoing the stage radial very faintly; hairline bounded — no bloom */
.cta{padding:72px 0;border-top:1px solid var(--line)}
.cta__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
  padding:52px 32px;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  background:
    radial-gradient(120% 130% at 50% -20%,rgba(26,32,38,.55),rgba(10,13,15,0) 60%),
    var(--panel);
}
.cta__title{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-.01em;color:var(--text);max-width:18ch}
.cta__sub{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--text-3)}
.cta__inner .btn{margin-top:8px}

/* ============================ FOOTER ============================ */
.footer{border-top:1px solid var(--line);padding:26px 0 34px}
.footer__inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer__logo{font-weight:700;letter-spacing:.04em;font-size:14px;color:var(--text)}
.footer__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--text-3)}
.footer__links{display:flex;gap:18px;margin-left:auto}
.footer__links a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-2);
  transition:color .14s;
}
.footer__links a:hover{color:var(--accent-ink)}
.footer__copy{
  font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--text-3);
  width:100%;padding-top:16px;margin-top:4px;border-top:1px solid var(--line);
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:880px){
  .nav__links{display:none}
  .hero{padding:54px 0 48px}
  .hero__inner{grid-template-columns:1fr;gap:40px}
  .hero__copy{max-width:none}
  /* canvas drops below the copy when the hero stacks — better reading order */
  .hero__canvas{order:2}
  .example__inner{grid-template-columns:1fr;gap:28px}
  .example__copy{position:static}
  .step{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .step__tag{padding-top:0}
  .access-grid{grid-template-columns:1fr}
  .acard{
    border-right:none;border-bottom:1px solid var(--line);
    padding:22px 0;
  }
  .access-grid .acard:last-child{border-bottom:none}
  .access-grid .acard:first-child{padding-left:0}
}

@media (max-width:520px){
  .wrap{padding:0 18px}
  /* floor the wordmark so the "ldr" outline never overflows a narrow phone */
  .wordmark{font-size:clamp(56px,16vw,72px)}
  .hero__actions{flex-direction:column;align-items:flex-start;gap:14px}
  .hero__note{max-width:none}
  .specline .wrap{font-size:9.5px}
  .footer__links{margin-left:0;width:100%}
  .cta__inner{padding:40px 22px}
}

/* ============================ MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .track-dot{opacity:1}
  .caret{opacity:1}
}

/* ===== motion features (JS adds body.anim-on only when motion is allowed) ===== */
/* voice console: a live waveform that resolves a spoken phrase into a parsed command */
.vconsole{display:none;margin-top:15px;align-items:center;gap:12px;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--raised);max-width:380px}
body.anim-on .vconsole{display:flex}
.vconsole__bars{display:flex;align-items:center;gap:2px;height:20px;flex:0 0 auto}
.vconsole__bars i{display:block;width:2px;height:3px;border-radius:1px;background:var(--text-3);transition:background .15s}
.vconsole.is-parsing .vconsole__bars i{background:var(--accent)}
.vconsole__sep{color:var(--text-3);font-family:var(--mono);font-size:12px;flex:0 0 auto}
.vconsole__cmd{font-family:var(--mono);font-size:11.5px;color:var(--accent-ink);letter-spacing:.02em;white-space:nowrap;min-height:1.05em;flex:1 1 auto}
.vconsole__cmd::after{content:"";display:inline-block;width:6px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--accent);opacity:0}
.vconsole.is-typing .vconsole__cmd::after{animation:vcaret 1.1s step-end infinite}
@keyframes vcaret{0%,100%{opacity:1}50%{opacity:0}}

/* spec line self-test: a vermilion sensor line sweeps the tech tokens once on reveal */
.specline{position:relative;overflow:hidden}
.specline::after{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;
  background:var(--accent);box-shadow:0 0 10px 2px rgba(226,80,42,.5);opacity:0;pointer-events:none}
body.anim-on .specline.in::after{animation:specscan 1100ms ease-in-out forwards}
@keyframes specscan{0%{left:0;opacity:0}10%{opacity:.95}90%{opacity:.95}100%{left:100%;opacity:0}}

/* section accent ticks draw in as each heading enters view */
body.anim-on .section-title::before{width:0;transition:width .5s ease}
body.anim-on .section-title.in::before{width:18px}