/* Generated by hand from the brand instance's mockups (01_comp/design/ui/sitio.html and
   rutas.html), whose values come from tokens.json. If a value here disagrees with
   tokens.json, tokens.json wins. */

:root {
  --n-000:#FFFFFF; --n-050:#F7F7F7; --n-100:#EDEDED; --n-200:#DEDEDE; --n-300:#CACACA;
  --n-400:#ABABAB; --n-500:#8C8C8C; --n-600:#6F6F6F; --n-700:#505050; --n-800:#333333;
  --n-900:#1E1E1E; --n-950:#0F0F0F; --n-1000:#050505;
  --explain:#7D4CCC; --express:#E57100; --explore:#00A398;
  --explain-tx:#6B36C4; --express-tx:#A2531D; --explore-tx:#1F756C;
  --danger:#D62530; --success:#1F7F50;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp8:32px;
  --sp10:40px; --sp12:48px; --sp16:64px; --sp20:80px; --sp24:96px;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-full:999px;
  --touch:44px; --ease:cubic-bezier(.2,0,0,1); --fast:120ms;
  --glass:rgb(0 0 0/.62);
  --wrap:1180px; --gut:24px;
}

[data-rt-product="explain"] { --accent:var(--explain-s); --accent-tx:var(--explain-a); }
[data-rt-product="express"] { --accent:var(--express-s); --accent-tx:var(--express-a); }
[data-rt-product="explore"] { --accent:var(--explore-s); --accent-tx:var(--explore-a); }
:root { --accent:var(--tx); --accent-tx:var(--tx); }

/* Theme. Dark is the site default by brand decision — prefers-color-scheme is NOT
   consulted; the visitor's explicit choice (footer toggle) wins. Two rules that are not
   cosmetic: the alternating band LIGHTENS in dark (#141414 over #0A0A0A, same measured
   separation as #F7F7F7 over white), and the accents change VALUE per theme, not just
   background — the light -tx values only reach 2.78–3.60 contrast on #0A0A0A. */
:root {
  --bg:#0A0A0A; --bg-sunken:#141414;
  --tx:#F7F7F7; --tx-2:#ABABAB; --tx-3:#8C8C8C;
  --line:#333333; --line-2:#6F6F6F;
  --nav-bg:rgb(10 10 10/.92);
  --on-tx:#0A0A0A; --btn-hover:#DEDEDE;
  --explain-s:#9C68F5; --express-s:#CD6B21; --explore-s:#28958B;
  --explain-a:#9C68F5; --express-a:#CD6B21; --explore-a:#28958B;
  --sh1:0 1px 2px rgb(0 0 0/.5);
  --sh2:0 4px 12px rgb(0 0 0/.6);
}
[data-rt-theme="light"] {
  --bg:#FFFFFF; --bg-sunken:#F7F7F7;
  --tx:#1E1E1E; --tx-2:#6F6F6F; --tx-3:#8C8C8C;
  --line:#DEDEDE; --line-2:#8C8C8C;
  --nav-bg:rgb(255 255 255/.92);
  --on-tx:#FFFFFF; --btn-hover:#333333;
  --explain-s:#7D4CCC; --express-s:#E57100; --explore-s:#00A398;
  --explain-a:#6B36C4; --express-a:#A2531D; --explore-a:#1F756C;
  --sh1:0 1px 2px rgb(0 0 0/.07),0 1px 1px rgb(0 0 0/.04);
  --sh2:0 4px 12px rgb(0 0 0/.10),0 1px 3px rgb(0 0 0/.06);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--tx);
  font-family:var(--font); font-size:16px; line-height:24px;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
a { color:inherit; }
:where(a,button,input,summary):focus-visible {
  outline:2px solid var(--tx); outline-offset:2px; border-radius:var(--r-sm);
}
.skip {
  position:absolute; left:-9999px; top:0; z-index:100; padding:10px 16px;
  background:var(--tx); color:var(--on-tx); border-radius:var(--r-sm);
}
.skip:focus { left:8px; top:8px; }

/* type */
h1,h2,h3 { margin:0; font-weight:500; letter-spacing:-.015em; }
h1 { font-size:clamp(30px,5vw,48px); line-height:1.12; }
h2 { font-size:clamp(24px,3.4vw,38px); line-height:1.18; }
h3 { font-size:20px; line-height:28px; letter-spacing:0; }
.eyebrow {
  font-size:12px; line-height:16px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tx-3); font-weight:500;
}
.lead { font-size:18px; line-height:26px; color:var(--tx-2); max-width:62ch; }
.small { font-size:14px; line-height:20px; color:var(--tx-2); }
.faint { color:var(--tx-3); }

/* nav */
.nav {
  position:sticky; top:0; z-index:50; background:var(--nav-bg);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.nav .wrap { display:flex; align-items:center; gap:var(--sp6); height:64px; }
.nav a.logo { display:flex; align-items:center; text-decoration:none; }
.nav a.logo svg { height:20px; width:auto; display:block; }
.nav .links { display:flex; gap:var(--sp1); margin-left:var(--sp4); }
.nav .links a {
  display:flex; align-items:center; height:36px; padding:0 12px; border-radius:var(--r-sm);
  text-decoration:none; font-size:15px; color:var(--tx-2);
}
.nav .links a:hover { background:var(--bg-sunken); color:var(--tx); }
.nav .links a[aria-current="page"] { color:var(--tx); }
.nav .right { margin-left:auto; display:flex; align-items:center; gap:var(--sp2); }
details.menu { position:relative; }
details.menu>summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  height:36px; padding:0 12px; border-radius:var(--r-sm); font-size:15px; color:var(--tx-2);
}
details.menu>summary::-webkit-details-marker { display:none; }
details.menu[open]>summary { background:var(--bg-sunken); color:var(--tx); }
details.menu .panel {
  position:absolute; top:44px; left:0; width:min(560px,86vw); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh2);
  padding:var(--sp2); display:grid; gap:2px;
}
details.menu .panel a {
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp3); align-items:start;
  padding:var(--sp3); border-radius:var(--r-md); text-decoration:none;
}
details.menu .panel a:hover { background:var(--bg-sunken); }
details.menu .panel .k { font-weight:500; }
details.menu .panel .who { font-size:13px; color:var(--tx-3); display:block; margin-top:1px; }
.dot { width:8px; height:8px; border-radius:50%; margin-top:8px; }

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--touch); padding:0 20px; border-radius:var(--r-md);
  border:1px solid transparent; cursor:pointer; font:500 16px/1 var(--font);
  text-decoration:none; transition:background var(--fast) var(--ease);
}
.btn--primary { background:var(--tx); color:var(--on-tx); }
.btn--primary:hover { background:var(--btn-hover); }
.btn--secondary { background:transparent; color:var(--tx); border-color:var(--line-2); }
.btn--secondary:hover { background:var(--bg-sunken); }
.btn--sm { min-height:36px; font-size:14px; padding:0 14px; }

/* hero */
.hero { padding:var(--sp20) 0 var(--sp12); }
.hero--product { padding-top:var(--sp12); }
.hero--product h1 { max-width:16ch; }
.hero .lead { margin:var(--sp5) 0 0; }
.hero .cta, .cta { display:flex; gap:var(--sp3); margin-top:var(--sp8); flex-wrap:wrap; }

/* the embed canvas — poster and description live in the HTML; 3D replaces them on load */
.embed-slot {
  position:relative; margin-top:var(--sp10); border-radius:var(--r-lg); overflow:hidden;
  background:#0F0F0F; aspect-ratio:16/9; border:1px solid var(--line);
}
.embed-slot .poster {
  position:absolute; inset:0; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 32% 24%,#3a3226,#100e0b 72%);
}
.embed-slot .poster figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:var(--sp4);
  font-size:13px; line-height:18px; color:rgb(255 255 255/.62);
  background:linear-gradient(transparent,rgb(0 0 0/.55));
}
.embed-slot .bar {
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:2px; padding:4px; border-radius:var(--r-full); background:var(--glass);
  backdrop-filter:blur(10px); box-shadow:0 6px 20px rgb(0 0 0/.35);
}
.embed-slot .bar button {
  min-width:var(--touch); height:var(--touch); border:0; background:transparent;
  color:#fff; border-radius:var(--r-full); cursor:pointer; font:500 14px/1 var(--font);
  padding:0 14px;
}
.embed-slot .bar button:hover { background:rgb(255 255 255/.14); }
.wm {
  position:absolute; right:12px; top:12px; display:flex; align-items:center; gap:6px;
  height:28px; padding:0 11px; border-radius:var(--r-full); background:var(--glass);
  backdrop-filter:blur(8px); color:#fff; font-size:11px; text-decoration:none;
  white-space:nowrap;
}
.wm svg { height:11px; width:auto; display:block; }

/* doors */
.doors {
  display:grid; gap:var(--sp4); grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:var(--sp6);
}
.door {
  display:block; text-decoration:none; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--sp6); background:var(--bg);
  transition:border-color var(--fast) var(--ease);
}
.door:hover { border-color:var(--line-2); }
.door .rule { height:3px; width:40px; border-radius:2px; background:var(--accent); margin-bottom:var(--sp4); }
.door h3 { color:var(--accent-tx); }
.door .who { font-size:13px; color:var(--tx-3); margin:2px 0 var(--sp3); }
.door p { margin:0; font-size:15px; line-height:22px; color:var(--tx-2); }
.door .go {
  display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp4);
  font-size:14px; font-weight:500; color:var(--tx);
}

/* proof */
.proof { display:grid; gap:var(--sp6); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.proof > div { border-top:1px solid var(--tx); padding-top:var(--sp4); }
.proof h3 { font-size:17px; margin-bottom:var(--sp2); }
.proof p { margin:0; font-size:15px; line-height:22px; color:var(--tx-2); }

/* sections */
section { padding:var(--sp20) 0; }
section.sunken { background:var(--bg-sunken); border-block:1px solid var(--line); }
.sechead { max-width:62ch; margin-bottom:var(--sp10); }
.sechead .eyebrow { margin-bottom:var(--sp3); }
section h2 + .lead { margin-top:var(--sp4); }

/* Accent enters ONLY at the fillet, the marks bullets, the door rule and the nav dots —
   never wide bands, never backgrounds, never as state. The fillet exists only on product
   pages, where <html> carries data-rt-product. */
html[data-rt-product] .sechead h2 { position:relative; }
html[data-rt-product] .sechead h2::before {
  content:""; position:absolute; left:-16px; top:.18em; bottom:.18em; width:3px;
  background:var(--accent); border-radius:2px;
}

/* what you bring */
.bring { display:grid; gap:var(--sp10); grid-template-columns:1.6fr 1fr; align-items:start; }
.bring h2 { margin-top:var(--sp2); }
.bring .formats { border-left:2px solid var(--line); padding-left:var(--sp6); }
.bring .mono { font-family:var(--mono); font-size:15px; line-height:24px; margin:0 0 var(--sp3); }
.bring .formats p:last-child { margin:0; }

/* page header of the minor routes and product pages */
.page { padding:var(--sp16) 0 var(--sp10); max-width:min(var(--wrap),920px); }
.page .eyebrow { margin:0 0 var(--sp3); }
.page h1 { max-width:18ch; }
.page .lead { margin-top:var(--sp5); font-size:19px; line-height:29px; max-width:60ch; }
.narrow { max-width:min(var(--wrap),820px); }
.narrow .lead { max-width:60ch; }
.narrow .small { margin-top:var(--sp4); }

/* marks lists — filled dot = measured; hollow ring = known gap, not an achievement.
   The bullet is var(--accent), which resolves to plain text color anywhere no
   data-rt-product is in scope. */
ul.marks {
  list-style:none; margin:var(--sp5) 0 0; padding:0; display:grid;
  gap:var(--sp4) var(--sp8); grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:900px;
}
ul.marks.one { grid-template-columns:1fr; gap:var(--sp4); }
ul.marks li { position:relative; padding-left:26px; font-size:17px; line-height:26px; }
ul.marks li::before {
  content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  border-radius:var(--r-full); background:var(--accent);
}
ul.marks.plain li { color:var(--tx-2); }
ul.marks.plain li::before {
  background:none; border:1.5px solid var(--line-2); width:9px; height:9px; top:8px;
}

/* ledger */
.ledger { display:grid; gap:var(--sp10) var(--sp16); grid-template-columns:1fr 1fr; align-items:start; }
.ledger > div + div { border-left:1px solid var(--line); padding-left:var(--sp10); }

/* steps — 4-up on product pages, 2-up (.two) on the minor routes */
ol.steps {
  list-style:none; margin:var(--sp8) 0 0; padding:0; counter-reset:s;
  display:grid; gap:var(--sp6) var(--sp8); grid-template-columns:repeat(4,minmax(0,1fr));
}
ol.steps.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
ol.steps li { counter-increment:s; padding-top:var(--sp5); border-top:2px solid var(--tx); }
ol.steps li::before {
  content:counter(s); display:block; font:500 13px/16px var(--font); color:var(--tx-3);
  margin-bottom:var(--sp2); font-variant-numeric:tabular-nums;
}
ol.steps h3 { font-size:17px; line-height:24px; margin:0 0 var(--sp2); }
ol.steps p { margin:0; }

/* drop zone */
.drop {
  margin:var(--sp8) 0 var(--sp4); border:2px dashed var(--line-2);
  border-radius:var(--r-lg); padding:var(--sp12) var(--sp6); text-align:center;
  background:var(--bg-sunken);
}
.drop .k { margin:0 0 var(--sp2); font-size:18px; line-height:26px; font-weight:500; }
.drop .small { margin:0 0 var(--sp5); }
.drop .btn { cursor:default; }

/* pricing tiers */
.tiers { display:grid; gap:var(--sp4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.tier { border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp6); background:var(--bg); }
.tier.is-pick { border-color:var(--tx); box-shadow:var(--sh1); }
.tier .name { font-weight:500; }
.tier .price { font-size:32px; line-height:1.1; letter-spacing:-.02em; margin:var(--sp2) 0 var(--sp1); }
.tier .price small { font-size:15px; color:var(--tx-3); letter-spacing:0; }
.tier ul { list-style:none; margin:var(--sp4) 0 var(--sp6); padding:0; display:grid; gap:8px; }
.tier li {
  font-size:14px; line-height:20px; color:var(--tx-2); display:grid;
  grid-template-columns:16px 1fr; gap:8px;
}
.tier li svg { width:16px; height:16px; margin-top:2px; color:var(--tx-3); }

/* theme toggle — achromatic on purpose: theme is a setting of the PERSON, not the
   document, so it carries no accent and pressed state travels by shape */
.theme {
  display:inline-flex; gap:2px; padding:2px; border:1px solid var(--line-2);
  border-radius:var(--r-full); background:var(--bg);
}
.theme button {
  appearance:none; border:0; background:none; color:var(--tx-3); cursor:pointer;
  font:500 12px/1 var(--font); padding:0 12px; height:28px; border-radius:var(--r-full);
}
.theme button[aria-pressed="true"] {
  background:var(--bg-sunken); color:var(--tx); box-shadow:inset 0 0 0 1px var(--line);
}
.theme button:focus-visible { outline:2px solid var(--tx); outline-offset:2px; }

/* footer */
footer { border-top:1px solid var(--line); padding:var(--sp16) 0 var(--sp12); background:var(--bg-sunken); }
footer .cols { display:grid; gap:var(--sp8); grid-template-columns:2fr repeat(3,1fr); }
footer h4 {
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-3);
  font-weight:500; margin:0 0 var(--sp3);
}
footer a { display:block; font-size:15px; color:var(--tx-2); text-decoration:none; padding:5px 0; }
footer a:hover { color:var(--tx); }
footer .logo { display:block; margin-bottom:12px; }
footer .logo svg { height:20px; width:auto; display:block; }
footer .legal {
  margin-top:var(--sp10); padding-top:var(--sp5); border-top:1px solid var(--line);
  font-size:13px; color:var(--tx-3); display:flex; gap:var(--sp4); flex-wrap:wrap;
  align-items:center;
}

@media (max-width:900px) {
  html[data-rt-product] .sechead h2::before { display:none; }
  ol.steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px) {
  .ledger { grid-template-columns:1fr; }
  .ledger > div + div { border-left:0; border-top:1px solid var(--line); padding:var(--sp8) 0 0; }
}
@media (max-width:800px) {
  .bring { grid-template-columns:1fr; }
  .bring .formats { border-left:0; border-top:2px solid var(--line); padding:var(--sp5) 0 0; }
}
@media (max-width:760px) {
  footer .cols { grid-template-columns:1fr 1fr; }
  .nav .links { display:none; }
  .hero { padding:var(--sp12) 0 var(--sp8); }
  section { padding:var(--sp12) 0; }
  ul.marks { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  ol.steps, ol.steps.two { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  /* the caption would otherwise flow under the floating toolbar pill */
  .embed-slot .poster figcaption { padding-bottom:72px; }
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; }
}