:root{
  --paper:#f5efe3;
  --paper-deep:#ece3d0;
  --ink:#20291f;
  --ink-soft:#4a544a;
  --euc:#2f5d43;
  --euc-deep:#193826;
  --safety:#e05f26;
  --safety-deep:#b64414;
  --line:#c9bda4;
  --card:#fffdf7;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Fraunces',Georgia,serif;
  --body:'Atkinson Hyperlegible',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);color:var(--ink);background:var(--paper);
  line-height:1.6;font-size:1.0625rem;
}
/* topographic contour texture */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'%3E%3Cg fill='none' stroke='%23c9bda4' stroke-width='1.1' opacity='.55'%3E%3Cpath d='M-20 90 C120 30 260 150 420 90 S580 130 620 70'/%3E%3Cpath d='M-20 150 C120 90 270 210 430 150 S590 190 620 130'/%3E%3Cpath d='M-20 215 C130 155 280 275 440 210 S600 250 620 195'/%3E%3Cpath d='M-20 290 C140 230 290 340 450 280 S610 320 620 260'/%3E%3Cpath d='M-20 370 C150 310 300 420 460 355 S620 400 620 335'/%3E%3Cpath d='M-20 450 C160 390 310 500 470 435 S630 480 620 415'/%3E%3Cpath d='M-20 530 C170 470 320 570 480 515 S640 560 620 495'/%3E%3C/g%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
a{color:var(--euc);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--safety-deep)}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(245,239,227,.92);
  backdrop-filter:blur(6px);border-bottom:1.5px solid var(--line);
}
.nav{display:flex;align-items:center;gap:28px;padding:14px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand .mark{
  width:38px;height:38px;border-radius:10px;background:var(--euc-deep);
  display:grid;place-items:center;color:var(--paper);flex:none;
}
.brand .mark svg{width:24px;height:24px}
.brand b{font-family:var(--serif);font-weight:900;font-size:1.35rem;letter-spacing:-.01em}
.brand small{display:block;font-size:.68rem;color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase;line-height:1.1}
.nav .links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav .links a{font-size:.92rem;font-weight:700;text-decoration:none;color:var(--ink-soft)}
.nav .links a:hover{color:var(--safety-deep)}
.nav .links a.tracks-cta{
  background:var(--safety);color:#fff;padding:5px 14px;border-radius:999px;
}
.nav .links a.tracks-cta:hover{background:var(--safety-deep);color:#fff}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px;position:relative;overflow:hidden}
.hero .kicker{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--safety-deep);margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.hero .kicker::before{content:"";width:34px;height:2px;background:var(--safety)}
.hero h1{
  font-family:var(--serif);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(2.5rem,6vw,4.3rem);line-height:1.03;max-width:15ch;
}
.hero h1 em{font-style:normal;color:var(--euc)}
.hero p.lede{max-width:52ch;margin:26px 0 8px;font-size:1.2rem;color:var(--ink-soft)}
.hero .ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:14px 26px;border-radius:999px;font-weight:700;
  text-decoration:none;font-size:1rem;border:2px solid transparent;
}
.btn.primary{background:var(--euc-deep);color:var(--paper)}
.btn.primary:hover{background:var(--euc);color:#fff}
.btn.ghost{border-color:var(--euc-deep);color:var(--euc-deep)}
.btn.ghost:hover{border-color:var(--safety-deep);color:var(--safety-deep)}
.hero .free-tag{
  font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);margin-top:14px;
}

/* honest strip */
.honest-strip{
  background:var(--euc-deep);color:#e8e2d2;padding:14px 0;font-size:.95rem;
}
.honest-strip .wrap{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.honest-strip b{color:#fff}
.honest-strip .flag{color:var(--safety);font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;flex:none}

/* ---------- sections ---------- */
section{padding:76px 0;scroll-margin-top:84px}
/* On phones the wrapped nav would permanently eat a third of the screen if
   it stayed sticky — let it scroll away instead. */
@media(max-width:720px){
  header.site{position:static}
  .nav{gap:10px 18px;padding:12px 0}
  .nav .links{gap:8px 16px}
  section{scroll-margin-top:0}
}
section.alt{background:var(--paper-deep)}
h2{
  font-family:var(--serif);font-weight:900;font-size:clamp(1.8rem,3.6vw,2.6rem);
  letter-spacing:-.015em;line-height:1.1;margin-bottom:14px;
}
.sec-kicker{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--safety-deep);margin-bottom:12px;
}
.sec-intro{max-width:62ch;color:var(--ink-soft);font-size:1.1rem;margin-bottom:40px}

/* what is meshcore */
.mesh-explain{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.mesh-explain .art{
  background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:26px;
}
.mesh-explain .art svg{width:100%;height:auto;display:block}
@media(max-width:820px){.mesh-explain{grid-template-columns:1fr}}
.plain-points{display:grid;gap:18px;margin-top:10px}
.plain-points .pt{display:flex;gap:14px}
.plain-points .pt .n{
  flex:none;width:30px;height:30px;border-radius:50%;background:var(--euc);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;font-weight:600;margin-top:2px;
}

/* how it works cards */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:960px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:22px;
  display:flex;flex-direction:column;gap:12px;position:relative;
}
.step .tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--safety-deep);
  text-transform:uppercase;
}
.step h3{font-family:var(--serif);font-weight:650;font-size:1.2rem}
.step p{font-size:.95rem;color:var(--ink-soft)}
.bubble{
  font-family:var(--mono);font-size:.83rem;background:var(--euc-deep);color:#e9f2ea;
  padding:9px 13px;border-radius:14px 14px 14px 4px;align-self:flex-start;max-width:100%;
}
.bubble.you{background:#dbe9dd;color:var(--euc-deep);border-radius:14px 14px 4px 14px;align-self:flex-end}

/* gear */
.gear{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.gear{grid-template-columns:1fr}}
.gear .g{
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:24px;
}
.gear .g .ico{font-size:1.9rem;margin-bottom:10px}
.gear .g h3{font-family:var(--serif);font-weight:650;font-size:1.15rem;margin-bottom:8px}
.gear .g p{font-size:.95rem;color:var(--ink-soft)}
.gear .g .price{font-family:var(--mono);font-size:.8rem;color:var(--safety-deep);margin-top:10px;display:block}
.device-callout{
  margin-top:26px;background:var(--euc-deep);color:#e8e2d2;border-radius:18px;
  padding:28px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
}
@media(max-width:700px){.device-callout{grid-template-columns:1fr}}
.device-callout .chip{
  width:92px;height:132px;border-radius:14px;background:#111d15;border:2px solid #3c6a4e;
  position:relative;flex:none;margin:0 auto;
}
.device-callout .chip::after{
  content:"T1000-E";position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.6rem;color:#7fa98d;letter-spacing:.08em;
}
.device-callout .chip::before{
  content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;border:2px solid #3c6a4e;
}
.device-callout h3{font-family:var(--serif);color:#fff;font-size:1.35rem;margin-bottom:8px}
.device-callout p{font-size:.98rem}
.device-callout a{color:#ffce9e}

/* ---------- guide ---------- */
.guide-step{
  display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;
  padding:44px 0;border-top:1.5px dashed var(--line);
}
.guide-step:first-of-type{border-top:none}
@media(max-width:820px){.guide-step{grid-template-columns:1fr}.guide-step .phone-col{order:-1;margin:0 auto}}
.guide-step .num{
  font-family:var(--serif);font-weight:900;font-size:3rem;color:var(--safety);
  line-height:1;margin-bottom:8px;
}
.guide-step h3{font-family:var(--serif);font-weight:650;font-size:1.5rem;margin-bottom:14px}
.guide-step ol,.guide-step ul{padding-left:22px;display:grid;gap:9px;color:var(--ink-soft)}
.guide-step li b{color:var(--ink)}
.note{
  margin-top:16px;background:#fff6e8;border:1.5px solid #ecc99a;border-radius:12px;
  padding:14px 16px;font-size:.93rem;color:#6b4b1f;
}
.note b{color:#4d3410}
.note.green{background:#eaf2ea;border-color:#b9d0ba;color:#2c4a33}
.note.green b{color:var(--euc-deep)}

/* iPhone mockup — realistic dark-mode iOS chat look */
.phone{
  width:280px;background:#1a1a1c;border-radius:44px;padding:6px;
  box-shadow:0 24px 60px -18px rgba(10,14,10,.6), 0 0 0 2px #3a3a3d,
             inset 0 0 0 1.5px #0a0a0b;
  position:sticky;top:90px;
}
.phone .screen{
  background:#000;border-radius:38px;overflow:hidden;height:580px;
  display:flex;flex-direction:column;position:relative;
  font-family:-apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;
}
/* iOS status bar + dynamic island (injected by JS) */
.phone .ios-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 22px 6px;color:#fff;font-size:.72rem;font-weight:600;
  position:relative;
}
.phone .ios-status::after{
  content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:78px;height:22px;background:#000;border-radius:12px;
  box-shadow:0 0 0 1px #111;
}
.phone .ios-status .icons{display:flex;gap:4px;align-items:center;font-size:.62rem;letter-spacing:-.5px}
.phone .notch{display:none}
.phone .bar{
  padding:6px 14px 10px;border-bottom:.5px solid #2a2a2d;display:flex;align-items:center;gap:9px;
  background:rgba(18,18,20,.96);
}
.phone .bar::before{content:"‹";color:#30d158;font-size:1.5rem;font-weight:400;margin-right:-2px;line-height:1}
.phone .bar .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#2f7d46,#193826);color:#fff;
  display:grid;place-items:center;font-size:.66rem}
.phone .bar b{font-size:.82rem;color:#fff;font-weight:600}
.phone .bar small{display:block;font-size:.6rem;color:#8e8e93}
.phone .chat{padding:12px 10px;display:flex;flex-direction:column;gap:7px;flex:1;background:#000;justify-content:flex-end;overflow:hidden;min-height:0}
/* conversation player: messages pop in like a live chat */
html.js .phone .chat.playing>*{display:none}
html.js .phone .chat.playing>.shown{display:block}
html.js .phone .chat.playing>.typing.shown{display:inline-flex}
.phone .chat>.shown{animation:msgpop .32s cubic-bezier(.2,.9,.3,1.2)}
@keyframes msgpop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.phone .typing{
  display:inline-flex;gap:4px;background:#26262a;border-radius:16px;
  border-bottom-left-radius:5px;padding:10px 13px;align-self:flex-start;
}
.phone .typing i{width:6px;height:6px;border-radius:50%;background:#8e8e93;
  animation:tdot 1.1s infinite}
.phone .typing i:nth-child(2){animation-delay:.18s}
.phone .typing i:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){
  /* demos still advance (they're instructional content) but without the
     bounce/typing motion: plain appearance + opacity-only transitions */
  .phone .chat>.shown{animation:none}
  .phone .typing i{animation:none;opacity:.6}
  .browser .scene.active .mc-progress i{animation:none;width:100%}
  .browser .scene{transition:opacity .3s linear}
}
.phone .msg{
  font-size:.72rem;line-height:1.4;padding:7px 11px;border-radius:16px;
  max-width:86%;
}
.phone .msg.bot{background:#26262a;color:#f2f2f4;border-bottom-left-radius:5px;align-self:flex-start}
.phone .msg.bot b{color:#4ade80;font-weight:600}
.phone .msg.me{background:#30b350;color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.phone .msg .t{display:block;font-size:.56rem;opacity:.55;margin-top:3px}
.phone .sysline{
  text-align:center;font-size:.6rem;color:#8e8e93;margin:3px 0;
}
/* iOS input bar + home indicator (injected by JS) */
.phone .ios-input{
  display:flex;align-items:center;gap:8px;padding:8px 12px 4px;background:rgba(18,18,20,.96);
  border-top:.5px solid #2a2a2d;
}
.phone .ios-input .plus{width:26px;height:26px;border-radius:50%;background:#26262a;color:#8e8e93;
  display:grid;place-items:center;font-size:1rem;flex:none}
.phone .ios-input .field{flex:1;border:1px solid #3a3a3d;border-radius:15px;color:#8e8e93;
  font-size:.7rem;padding:5px 12px}
.phone .ios-home{height:20px;display:grid;place-items:center;background:rgba(18,18,20,.96)}
.phone .ios-home i{width:96px;height:4px;border-radius:3px;background:#5a5a5e;display:block}
.phone-caption{
  text-align:center;font-size:.8rem;color:var(--ink-soft);margin-top:12px;font-style:italic;
}
.phone-col{width:280px}

/* ---------- prominent live status banner ---------- */
.status-banner{
  margin-top:26px;max-width:640px;border-radius:14px;padding:16px 20px;
  background:var(--card);border:1.5px solid var(--line);
  border-left:6px solid #8e8e93;box-shadow:0 8px 30px -18px rgba(30,40,30,.35);
}
.status-banner .s-head{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.status-banner .s-line{font-size:1.02rem;font-weight:700}
.status-banner .s-sub{font-size:.88rem;color:var(--ink-soft);margin-top:4px}
.status-banner.good{border-left-color:#2f7d46;background:#f0f6f0}
.status-banner.bad{border-left-color:var(--safety-deep);background:#fdf1ea}
.status-banner.good .s-line{color:#235c36}
.status-banner.bad .s-line{color:var(--safety-deep)}

/* ---------- phone app-UI scenes (real MeshCore app look, light theme) ---------- */
.phone .screen.light{background:#fafafa}
.phone .screen.light .ios-status{color:#111}
.phone .screen.light .ios-status::after{background:#111}
.phone .screen.light .ios-home i{background:#c7c7cc}
.phone .screen.light .ios-home,.phone .screen.light .ios-input{background:#fff;border-color:#e2e2e6}
.phone .screen.light .ios-input{display:none}
.phone .app-view{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.phone .app-view .scene{position:absolute;inset:0;opacity:0;transition:opacity .5s;display:flex;
  flex-direction:column;pointer-events:none}
.phone .app-view .scene.active{opacity:1}
.phone .app-head{background:#1e2a38;color:#fff;padding:10px 13px;display:flex;
  align-items:center;justify-content:space-between;font-size:.8rem;font-weight:600}
.phone .app-head small{display:block;font-size:.6rem;font-weight:400;color:#9fb0c3}
.phone .app-head .a-actions{display:flex;gap:9px;align-items:center;font-size:.85rem}
.phone .a-connect{background:#fff;color:#16202c;border-radius:999px;padding:4px 11px;
  font-size:.68rem;font-weight:700}
.phone .app-body{flex:1;background:#fafafa;padding:12px;display:flex;flex-direction:column;
  gap:9px;color:#222;position:relative}
.phone .a-center{margin:auto;text-align:center;color:#666;font-size:.7rem}
.phone .a-center .big{width:54px;height:54px;border-radius:14px;background:#9e9ea4;color:#fff;
  display:grid;place-items:center;font-size:1.5rem;margin:0 auto 8px}
.phone .a-center b{display:block;color:#222;font-size:.76rem;margin-bottom:2px}
.phone .a-row{background:#fff;border:1px solid #e4e4e8;border-radius:10px;padding:9px 12px;
  font-size:.74rem;display:flex;align-items:center;gap:9px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.phone .a-row small{color:#8a8a90;font-size:.62rem;display:block}
.phone .a-row.sel{border-color:#3a7bd5;box-shadow:0 0 0 1.5px #3a7bd5}
.phone .a-banner{background:#2196f3;color:#fff;font-size:.64rem;padding:8px 11px;line-height:1.4}
.phone .a-toast{background:#2e7d32;color:#fff;border-radius:10px;padding:9px 12px;
  font-size:.66rem;line-height:1.45;margin-top:auto}
.phone .a-toast b{display:block;font-size:.7rem}
.phone .a-menu{position:absolute;right:10px;top:8px;background:#fff;border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);padding:6px 0;font-size:.72rem;z-index:2;min-width:170px}
.phone .a-menu div{padding:8px 14px;display:flex;gap:8px;align-items:center}
.phone .a-menu div.sel{background:#e8f0fe}
.phone .a-fab{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:14px;
  background:#1e2a38;color:#fff;display:grid;place-items:center;font-size:1.4rem}
.phone .a-dialog{background:#fff;border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.3);
  padding:14px;margin:auto 8px;z-index:2}
.phone .a-dialog b{font-size:.78rem}
.phone .a-field{border:1.5px solid #3a7bd5;border-radius:8px;padding:7px 10px;font-size:.76rem;
  color:#222;margin:10px 0}
.phone .a-btnrow{display:flex;justify-content:flex-end;gap:14px;font-size:.72rem;font-weight:700;color:#3a7bd5}
.phone .a-toggle{margin-left:auto;width:36px;height:20px;border-radius:12px;background:#c7c7cc;position:relative;flex:none}
.phone .a-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .25s}
.phone .a-toggle.on{background:#34c759}
.phone .a-toggle.on::after{left:18px}
.phone .a-tabs{display:flex;background:#fff;border-top:1px solid #e2e2e6;padding:6px 0 2px}
.phone .a-tabs span{flex:1;text-align:center;font-size:.6rem;color:#8a8a90}
.phone .a-tabs span.on{color:#3a7bd5;font-weight:700}
.phone .a-tabs i{display:block;font-size:.95rem;font-style:normal}

/* ---------- LUX fleet rotating gallery ---------- */
.fleet-rotator{
  position:relative;max-width:760px;margin:0 auto;aspect-ratio:905/820;
  border-radius:16px;overflow:hidden;background:#14161a;
  border:1.5px solid #2c2f34;box-shadow:0 24px 60px -18px rgba(10,14,10,.5);
}
.fleet-rotator figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.fleet-rotator figure.active{opacity:1}
.fleet-rotator img{width:100%;height:calc(100% - 52px);object-fit:cover;object-position:center;display:block}
.fleet-rotator figcaption{
  height:52px;display:flex;align-items:center;justify-content:center;gap:6px;
  color:#d8dbd3;font-size:.85rem;padding:0 16px;text-align:center;background:#14161a;
}
.fleet-rotator figcaption b{color:#8fd6a2}

/* ---------- desktop browser mockup (computer steps) ---------- */
.browser-demo{grid-column:1/-1;margin-top:10px}
.browser{
  background:#111114;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px -18px rgba(10,14,10,.5), 0 0 0 1.5px #33333a;
  max-width:760px;margin:0 auto;
}
.browser .b-bar{display:flex;gap:10px;padding:11px 16px;background:#1d1d21;align-items:center}
.browser .b-dots{display:flex;gap:7px}
.browser .b-dots i{width:11px;height:11px;border-radius:50%;display:block}
.browser .b-dots i:nth-child(1){background:#ff5f57}
.browser .b-dots i:nth-child(2){background:#febc2e}
.browser .b-dots i:nth-child(3){background:#28c840}
.browser .b-url{flex:1;background:#0c0c0f;border-radius:8px;padding:5px 14px;color:#9a9aa4;
  font-size:.74rem;font-family:var(--mono)}
.browser .b-url b{color:#d6d6de;font-weight:500}
.browser .b-view{position:relative;height:340px;background:#0a0a0d;
  font-family:'Segoe UI',system-ui,sans-serif}
@media(max-width:640px){.browser .b-view{height:300px}}
.browser .scene{position:absolute;inset:0;opacity:0;transition:opacity .55s ease;padding:20px 24px;
  pointer-events:none;display:flex;flex-direction:column;gap:12px}
.browser .scene.active{opacity:1}
.browser .mc-logo{font-weight:900;letter-spacing:.06em;color:#fff;font-size:.95rem;font-style:italic}
.browser .mc-sub{color:#8e8e98;font-size:.78rem}
.browser .mc-filter{background:#1a1a1f;border:1px solid #2e2e36;border-radius:9px;
  color:#8e8e98;font-size:.78rem;padding:7px 13px;max-width:420px}
.browser .mc-row{background:#141419;border:1px solid #26262e;border-radius:9px;padding:9px 14px;
  color:#e8e8ee;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;max-width:420px}
.browser .mc-row.sel{border-color:#b79ef2;box-shadow:0 0 0 1px #b79ef2}
.browser .mc-row small{color:#8e8e98;font-size:.68rem}
.browser .mc-pill{display:inline-block;background:#d5c4fb;color:#26243a;border-radius:999px;
  padding:8px 18px;font-size:.78rem;font-weight:600;width:max-content}
.browser .mc-pill.ghost{background:transparent;color:#d5c4fb;border:1px solid #7a6aa8}
.browser .mc-cursor{position:absolute;font-size:1.15rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
  transition:all .8s ease;z-index:3}
.browser .mc-progress{height:9px;background:#1a1a1f;border-radius:6px;overflow:hidden;max-width:420px}
.browser .mc-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b79ef2,#d5c4fb);
  border-radius:6px}
.browser .scene.active .mc-progress i{animation:fillbar 2.4s .3s ease-in-out forwards}
@keyframes fillbar{to{width:100%}}
.browser .mc-ok{color:#4ade80;font-weight:700;font-size:.95rem}
.browser .radar{width:52px;height:52px;border-radius:50%;border:2px solid #4ade80;position:relative;margin:4px 0}
.browser .scene.active .radar::before,.browser .scene.active .radar::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #4ade80;
  animation:radarp 1.8s infinite}
.browser .scene.active .radar::after{animation-delay:.9s}
@keyframes radarp{from{transform:scale(1);opacity:.8}to{transform:scale(2.1);opacity:0}}
.browser-caption{
  text-align:center;font-size:.85rem;color:var(--ink-soft);margin-top:12px;
  font-family:var(--mono)}
.browser-caption b{color:var(--safety-deep)}

/* screenshots-to-come slot */
.shot-slot{
  border:2px dashed var(--line);border-radius:14px;padding:18px;text-align:center;
  color:var(--ink-soft);font-size:.85rem;background:rgba(255,253,247,.6);margin-top:14px;
}

/* ---------- commands table ---------- */
table.cmds{width:100%;border-collapse:collapse;background:var(--card);border:1.5px solid var(--line);border-radius:16px;overflow:hidden}
.table-wrap{overflow-x:auto;border-radius:16px}
table.cmds th,table.cmds td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.cmds th{background:var(--euc-deep);color:var(--paper);font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
table.cmds td:first-child{font-family:var(--mono);font-weight:600;white-space:nowrap;color:var(--euc-deep)}
table.cmds tr:last-child td{border-bottom:none}
table.cmds td{font-size:.95rem;color:var(--ink-soft)}

/* ---------- limits ---------- */
.limits{background:var(--euc-deep);color:#ddd6c4}
.limits h2,.limits h3{color:#fff}
.limits .sec-kicker{color:var(--safety)}
.limits .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media(max-width:820px){.limits .grid{grid-template-columns:1fr}}
.limits .l{
  border:1.5px solid #3c6a4e;border-radius:16px;padding:22px;background:rgba(0,0,0,.14);
}
.limits .l h3{font-family:var(--serif);font-size:1.15rem;margin-bottom:8px}
.limits .l p{font-size:.95rem}
.limits .big-line{
  margin-top:36px;padding:22px 26px;border-radius:14px;background:var(--safety);
  color:#fff;font-weight:700;font-size:1.1rem;text-align:center;
}

/* faq */
details{
  background:var(--card);border:1.5px solid var(--line);border-radius:14px;
  padding:18px 22px;margin-bottom:12px;
}
details summary{
  cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;position:relative;padding-right:30px;
}
details summary::after{content:"+";position:absolute;right:2px;top:0;font-family:var(--mono);color:var(--safety-deep);font-size:1.2rem}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--ink-soft);font-size:.97rem}
details p+p{margin-top:8px}

/* footer */
footer{background:var(--ink);color:#b8b4a4;padding:44px 0;font-size:.9rem}
footer .wrap{display:grid;gap:10px}
footer b{color:#e8e2d2}
footer a{color:#a9c6ae}

/* scroll-reveal is progressive enhancement: without JS everything stays visible */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none;transition:none}}