:root{
  --bg:#050509; --bg2:#0a0a14; --ink:#eef1f8; --steel:#8b93a8; --steel-dim:#565d70;
  --line:rgba(255,255,255,.12);
  --cyan:#7dd3fc; --violet:#c4b5fd; --gold:#fbbf87; --rose:#fca5b8;
  --display:"Space Grotesk","Arial",sans-serif;
  --serif:"Fraunces","Iowan Old Style","Georgia",serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","Courier New",monospace;
  --wrap:1160px; --gut:clamp(20px,4vw,64px);
}
*,*::before,*::after{box-sizing:border-box;}
html{background:var(--bg);}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit;}
::selection{background:var(--cyan); color:#05050a;}
h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-.01em; line-height:1.05; margin:0;}
em{font-style:italic; color:var(--cyan);}
.eyebrow{font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ===== Persistent instrument frame (ruler ticks along the viewport edges) ===== */
.instrument-frame{position:fixed; inset:0; z-index:140; pointer-events:none;}
.instrument-frame::before,.instrument-frame::after{
  content:''; position:absolute; background:var(--line);
}
.instrument-frame::before{ top:0; bottom:0; left:var(--gut); width:1px; opacity:.4; }
.instrument-frame::after{ top:0; bottom:0; right:var(--gut); width:1px; opacity:.4; }
.instrument-tick{position:absolute; width:9px; height:9px; border:1px solid var(--line); opacity:.55;}
.instrument-tick.tl{top:16px; left:calc(var(--gut) - 4px); border-right:none; border-bottom:none;}
.instrument-tick.tr{top:16px; right:calc(var(--gut) - 4px); border-left:none; border-bottom:none;}
.instrument-tick.bl{bottom:16px; left:calc(var(--gut) - 4px); border-right:none; border-top:none;}
.instrument-tick.br{bottom:16px; right:calc(var(--gut) - 4px); border-left:none; border-top:none;}
@media (max-width:760px){.instrument-frame{display:none;}}

/* ===== 3D canvas (fixed, behind everything) ===== */
#scene-canvas{position:fixed; inset:0; z-index:0; display:block; background:radial-gradient(ellipse at 50% 30%, #0d0d1c 0%, #050509 70%);}
.scene-vignette{position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(2,2,6,.75) 100%);}
.scene-grade{position:fixed; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(5,5,9,.15) 0%, transparent 12%, transparent 85%, rgba(5,5,9,.65) 100%);}

/* ===== Fixed chrome ===== */
nav{position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:22px var(--gut);}
.brand{font-family:var(--display); font-weight:700; font-size:1.2rem; letter-spacing:.01em; text-decoration:none;}
.brand::after{content:'.'; color:var(--cyan);}
.chrome-right{display:flex; align-items:center; gap:14px;}
.icon-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .2s, background .2s;}
.icon-btn:hover{border-color:var(--cyan); background:rgba(125,211,252,.08);}
.icon-btn svg{width:16px; height:16px;}

.lang-toggle{display:flex; align-items:center; height:38px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; overflow:hidden; cursor:pointer;}
.lang-toggle span{padding:0 13px; height:100%; display:flex; align-items:center; color:var(--steel); transition:color .2s, background .2s;}
.lang-toggle span.active{color:#05050a; background:var(--ink);}
.lang-toggle:hover span:not(.active){color:var(--ink);}

.progress-rail{position:fixed; top:0; left:0; right:0; height:2px; z-index:220; background:rgba(255,255,255,.06);}
.progress-rail span{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width .05s linear;}

.side-rail{position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:210; display:flex; flex-direction:column; align-items:flex-end; gap:16px;}
.side-rail-item{display:flex; align-items:center; gap:10px; cursor:pointer; background:none; border:none; padding:0;}
.side-rail-label{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-dim);
  opacity:0; transform:translateX(6px); transition:opacity .25s ease, transform .25s ease, color .25s ease; white-space:nowrap;}
.side-rail-item:hover .side-rail-label,.side-rail-item.active .side-rail-label{opacity:1; transform:translateX(0);}
.side-rail-item.active .side-rail-label{color:var(--cyan);}
.side-rail-dot{width:7px; height:7px; border-radius:50%; background:var(--line); display:block; transition:background .3s, transform .3s; flex-shrink:0;}
.side-rail-item.active .side-rail-dot{background:var(--cyan); transform:scale(1.5);}
@media (max-width:900px){.side-rail{display:none;}}

/* ===== Chapter menu overlay ===== */
.menu-overlay{position:fixed; inset:0; z-index:300; background:rgba(5,5,9,.97); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .35s ease;}
.menu-overlay.is-open{opacity:1; visibility:visible;}
.menu-close{position:absolute; top:22px; right:var(--gut); z-index:301;}
.menu-list{list-style:none; margin:0; padding:0; text-align:center;}
.menu-list li{margin:6px 0;}
.menu-list a{font-family:var(--serif); font-size:clamp(1.8rem,5vw,3rem); text-decoration:none; color:var(--steel); transition:color .2s;
  display:inline-flex; align-items:baseline; gap:16px;}
.menu-list a:hover, .menu-list a:focus-visible{color:var(--ink);}
.menu-list .mnum{font-family:var(--mono); font-size:.9rem; color:var(--cyan); letter-spacing:.05em;}
.menu-cta{margin-top:40px; text-align:center;}

/* ===== Sections shell ===== */
section,header.hero{position:relative; z-index:2;}
section{padding:clamp(90px,14vw,170px) 0;}
.section-head{max-width:56ch; margin:0 auto clamp(40px,6vw,70px); text-align:center;}
.section-head h2{font-size:clamp(2rem,5vw,3.2rem); margin-top:12px;}
.section-head p{color:var(--steel); margin-top:16px;}
@media (max-width:640px){
  /* The fixed nav (82px tall: 22px padding + 38px icons) has no solid backdrop, so
     any section-head eyebrow that scrolls to less than that clearance visually
     interleaves with the nav's logo/toggle/icons instead of passing cleanly behind
     them. The 90px floor above leaves only 8px of clearance on phones — bumped here
     so every section's heading clears the nav with real margin to spare.
     (.servicios has its own mobile override further down, next to its base rule,
     since a media query alone doesn't out-rank a same-specificity rule that comes
     later in the file.) */
  section{padding-top:128px;}
}

/* ===== Transit corridors (brief empty-space passages between sections) =====
   Taller than they used to be on purpose: this height is what makes each journey
   between sections take more physical scrolling — the camera's travel speed is
   fixed relative to total page scroll, so a taller corridor is a slower transition. */
.transit{padding:0; min-height:168vh; display:flex; align-items:center; justify-content:center;}
.transit-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--steel-dim); opacity:0; transform:translateY(8px); transition:opacity 1.4s ease, transform 1.4s ease; text-align:center;}
.transit-label.is-active{opacity:.6; transform:translateY(0);}
@media (max-width:640px){.transit{min-height:116vh;}}
@media (max-width:480px){
  /* On a phone these corridors were still a full extra screen (116vh) of pure
     empty scroll between sections — cut well below one screen height so the
     "orbit" transit reads as a beat, not a wall of blank scrolling. */
  .transit{min-height:52vh;}
}

/* ===== HUD chrome ===== */
.hero-frame{display:flex; align-items:center; justify-content:flex-start; gap:14px; margin-bottom:clamp(24px,4vw,40px);}
.hero-frame-tick{width:18px; height:18px; border:1px solid var(--line); opacity:.55; flex-shrink:0;}
.hero-frame-tick-l{border-right:none; border-bottom:none;}
.hero-frame-tick-r{border-left:none; border-bottom:none;}
.hero-frame-label{font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-dim); white-space:nowrap;}
@media (max-width:640px){
  .hero-frame-tick{display:none;}
  /* steel-dim reads as basically invisible against the near-black background on a lot of
     phone screens — brighten it here specifically, desktop was never the complaint. */
  .hero-frame-label{color:var(--cyan); opacity:.85; white-space:normal;}
}

.hud-telemetry{position:fixed; bottom:24px; z-index:150; pointer-events:none; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--steel-dim); opacity:1; transition:opacity .4s ease;}
.hud-telemetry-left{left:var(--gut);}
.hud-telemetry-right{right:var(--gut);}
.hud-tag{color:var(--cyan);}
.hud-telemetry.is-landed{opacity:0;}
@media (max-width:640px){
  /* position:absolute (not fixed) anchors this to the document instead of the
     viewport, so it scrolls away with the hero instead of staying pinned on top
     of whatever content scrolls underneath — on a phone that content is the
     "Empezar una conversación" button a few hundred px down, and a fixed HUD
     would ride right over it once scrolled. Placed just under the nav, before
     the KTX-01 kicker, which is a fixed content-independent gap.
     steel-dim (the desktop value color) reads as nearly invisible on a phone
     screen — bumped to steel and given a bit more size so ALT/VEL read without squinting. */
  .hud-telemetry{position:absolute; top:90px; bottom:auto; z-index:150; font-size:.68rem; letter-spacing:.03em;
    line-height:1; color:var(--steel);}
}
@media (max-width:360px){
  /* Too narrow for both readouts at equal weight — keep ALT (left) at full strength
     and drop VEL (right) back so it's still legible but clearly secondary. */
  .hud-telemetry-right{font-size:.6rem; opacity:.65;}
}
@media (max-width:480px){
  /* Phone pulido: back to position:fixed so the readout survives the whole scroll
     (matching desktop's persistent HUD) instead of scrolling away with the hero.
     Anchored to the BOTTOM, not the top: any fixed strip near the top gets crossed
     by every piece of content as it scrolls up and out (that's what made "ALT"
     land on top of the CTA button here). H1 and the CTA both sit well above the
     bottom of the viewport and only ever move further up while scrolling from the
     top, so they can never scroll down into a bottom-anchored strip — same reason
     desktop's bottom HUD never collides with its own hero. Shrunk further ("tamaño
     chico") since the reduced hero leaves less horizontal company to share with. */
  .hud-telemetry{position:fixed; top:auto; bottom:20px; font-size:.6rem;}
}

/* ===== Hero =====
   align-items:flex-start (not center) so hero-inner anchors a fixed distance
   below the nav instead of being vertically centered — centering silently ate
   into both paddings whenever the content got taller than the leftover space,
   which is exactly what pushed the tagline into .scroll-hint. Anchoring from
   the top makes padding-bottom a real, guaranteed reservation for the hint. */
.hero{min-height:100vh; display:flex; align-items:flex-start; padding-top:110px; padding-bottom:clamp(80px,12vh,130px);}
.hero-inner{max-width:760px;}
.hero .eyebrow{margin-bottom:clamp(20px,3vw,28px);}
.hero h1{font-size:clamp(2.3rem,7vw,5.2rem); color:var(--ink); font-weight:500;}
.hero-sub{max-width:52ch; margin-top:clamp(22px,3.4vw,32px); color:var(--steel); font-size:1.1rem;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-top:clamp(36px,5.5vw,52px);}
.btn{font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; padding:15px 26px; border-radius:999px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:transform .2s, background .2s, border-color .2s; border:1px solid transparent; cursor:pointer;}
.btn-solid{background:var(--ink); color:#05050a;}
.btn-solid:hover{transform:translateY(-2px);}
.btn-outline{border-color:var(--line); color:var(--ink); background:transparent;}
.btn-outline:hover{border-color:var(--cyan); color:var(--cyan);}
.btn:active{transform:translateY(0);}
.hero-flag{margin-top:clamp(36px,6vw,56px); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--steel-dim); display:flex; align-items:center; gap:10px;}
.hero-flag::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); flex-shrink:0;}

.scroll-hint{position:absolute; bottom:34px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:.65rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel-dim); animation:hintFade 2.4s ease-in-out infinite;}
@keyframes hintFade{0%,100%{opacity:.4;}50%{opacity:1;}}
@media (max-width:480px){
  /* Phone pulido — compact entry hero: strip the initial view down to just the
     headline and the primary CTA. Everything else here is either decorative
     (KTX-01 frame, kicker, scroll hint, tagline) or gets deferred a beat so the
     first paint isn't competing for attention. body.hero-revealed is toggled by
     a small scroll listener in main.js once the visitor has scrolled a little. */
  .hero-frame,.hero .eyebrow,.scroll-hint,.hero-flag{display:none;}
  .hero-sub,.hero-ctas .btn-outline{display:none;}
  body.hero-revealed .hero-sub{display:block;}
  body.hero-revealed .hero-ctas .btn-outline{display:inline-flex;}
}

/* ===== Reveal-on-scroll (generic) ===== */
.reveal{opacity:.35; transform:translateY(14px); transition:opacity .6s ease, transform .7s ease;}
.reveal.is-active{opacity:1; transform:translateY(0);}

/* ===== Manifiesto ===== */
.manifiesto-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,40px); max-width:920px; margin:0 auto;}
@media (max-width:760px){.manifiesto-grid{grid-template-columns:1fr;}}
.manifiesto-col{border:1px solid var(--line); border-radius:16px; padding:clamp(24px,3.5vw,34px); background:rgba(255,255,255,.02);}
.manifiesto-col h3{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; margin-bottom:20px;}
.manifiesto-col.yes h3{color:var(--cyan);}
.manifiesto-col.no h3{color:var(--steel-dim);}
.manifiesto-col ul{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
.manifiesto-col li{color:var(--steel); padding-left:22px; position:relative; line-height:1.55;}
.manifiesto-col.yes li::before{content:'+'; position:absolute; left:0; color:var(--cyan); font-family:var(--mono);}
.manifiesto-col.no li::before{content:'–'; position:absolute; left:0; color:var(--steel-dim); font-family:var(--mono);}

/* ===== Servicios ===== */
.servicios{padding-top:clamp(60px,10vw,120px);}
@media (max-width:640px){
  /* Same nav-clearance fix as the generic section rule above — kept here, after the
     base .servicios rule, so it actually wins the cascade (equal specificity, later
     source order) instead of being silently overridden by it. */
  .servicios{padding-top:112px;}
}
.service-row{max-width:820px; margin:0 auto; border-top:1px solid var(--line); padding:clamp(40px,6vw,64px) 0;}
.service-row:last-child{border-bottom:1px solid var(--line);}
.service-row .snum{font-family:var(--mono); font-size:.78rem; color:var(--service-color, var(--cyan));}
.service-row h3{font-size:clamp(1.5rem,3.4vw,2.1rem); margin-top:10px; color:var(--ink);}
.service-row p{color:var(--steel); margin-top:14px; max-width:56ch;}
.service-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.service-tags span{font-family:var(--mono); font-size:.63rem; letter-spacing:.08em; text-transform:uppercase; color:var(--service-color, var(--cyan));
  border:1px solid currentColor; opacity:.6; padding:5px 10px; border-radius:999px;}

/* ===== Proceso (mission phases with a connecting trajectory line) ===== */
.proceso-track{position:relative; max-width:760px; margin:0 auto;}
.proceso-track::before{content:''; position:absolute; left:19px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, var(--cyan), var(--violet), var(--gold), var(--rose)); opacity:.35;}
@media (max-width:640px){.proceso-track::before{left:15px;}}
.step-row{position:relative; display:grid; grid-template-columns:40px 1fr; gap:22px; padding:clamp(26px,4vw,36px) 0;}
@media (max-width:640px){.step-row{grid-template-columns:32px 1fr;}}
.step-dot{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.72rem; color:var(--cyan); position:relative; z-index:1; flex-shrink:0;}
@media (max-width:640px){.step-dot{width:32px; height:32px; font-size:.62rem;}}
.step-body h3{font-size:clamp(1.25rem,2.6vw,1.6rem); color:var(--ink);}
.step-body p{color:var(--steel); margin-top:10px; max-width:52ch;}
.proceso-note{text-align:center; color:var(--steel-dim); font-size:.9rem; max-width:52ch; margin:clamp(32px,5vw,48px) auto 0;}

/* ===== Garantías ===== */
.garantias-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; max-width:920px; margin:0 auto;}
@media (max-width:640px){.garantias-grid{grid-template-columns:1fr;}}
.garantia-card{background:var(--bg2); padding:clamp(26px,3.5vw,34px);}
.garantia-card .gnum{font-family:var(--mono); font-size:.68rem; color:var(--cyan); letter-spacing:.08em;}
.garantia-card p{color:var(--ink); margin-top:12px; font-size:1.02rem; max-width:34ch;}
/* an odd count (5 guarantees in a 2-col grid) leaves the last card alone in its own
   row — instead of stranding it, let it span the full width as a closing note. */
.garantia-card:last-child{grid-column:1/-1; text-align:center;}
.garantia-card:last-child .gnum{text-align:center;}
.garantia-card:last-child p{margin-left:auto; margin-right:auto; max-width:52ch;}
@media (max-width:640px){.garantia-card:last-child{grid-column:auto;}}

/* ===== FAQ ===== */
.faq-list{max-width:780px; margin:0 auto; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
.faq-item{background:var(--bg); padding:0;}
.faq-item summary{list-style:none; cursor:pointer; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--body); font-size:1rem; color:var(--ink); transition:background .2s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{background:rgba(255,255,255,.02);}
.faq-marker{font-family:var(--mono); font-size:1.1rem; color:var(--cyan); flex-shrink:0; transition:transform .25s ease;}
.faq-item[open] .faq-marker{transform:rotate(45deg);}
.faq-item .faq-answer{padding:0 26px 24px; color:var(--steel); max-width:64ch;}
.faq-more{text-align:center; margin-top:30px; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--steel-dim);}
.faq-more a{color:var(--steel); border-bottom:1px solid var(--line); text-decoration:none;}
.faq-more a:hover{color:var(--cyan); border-color:var(--cyan);}

/* ===== Contacto ===== */
.contacto{padding-bottom:clamp(100px,14vw,160px);}
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,80px); align-items:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-copy h2{font-size:clamp(2rem,5vw,3rem);}
.contact-copy p{color:var(--steel); margin-top:16px; max-width:40ch;}
.contact-direct{margin-top:34px; padding-top:24px; border-top:1px solid var(--line);}
.contact-direct .eyebrow{margin-bottom:10px;}
.contact-direct a{font-family:var(--mono); font-size:.95rem; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
.contact-direct a:hover{color:var(--cyan); border-color:var(--cyan);}

form{display:grid; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:640px){.form-row{grid-template-columns:1fr;}}
label{font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel); display:block; margin-bottom:8px;}
input,select,textarea{width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:13px 14px;
  color:var(--ink); font-family:var(--body); font-size:.95rem; transition:border-color .2s, background .2s;}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--cyan); background:rgba(125,211,252,.05);}
select{appearance:none; -webkit-appearance:none; cursor:pointer;}
textarea{resize:vertical; min-height:110px;}
.submit-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px;}
.form-note{font-family:var(--mono); font-size:.72rem; color:var(--steel-dim);}
.form-note.ok{color:#86efac;}
.form-note.err{color:var(--rose);}
/* honeypot field: invisible to people, bots tend to fill every field they find */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

footer{position:relative; z-index:2; padding:34px var(--gut) 46px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-dim);}
footer a{color:var(--steel-dim); text-decoration:none;}
footer a:hover{color:var(--cyan);}

/* ===== Legal pages ===== */
body.legal{line-height:1.7;}
body.legal .wrap{max-width:760px;}
body.legal nav{position:static; padding:22px var(--gut);}
body.legal .brand{border-bottom:none;}
body.legal a{color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(125,211,252,.35);}
body.legal a:hover{border-color:var(--cyan);}
body.legal .back{font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; border-bottom:none;}
body.legal main{padding:clamp(40px,8vw,90px) 0 clamp(80px,12vw,140px);}
body.legal h1{font-size:clamp(2rem,5vw,3rem); margin-top:14px;}
body.legal .meta{color:var(--steel); font-size:.92rem; margin-top:18px; padding-bottom:28px; border-bottom:1px solid var(--line);}
body.legal h2{font-size:1.25rem; margin-top:46px; margin-bottom:14px; color:var(--ink); font-family:var(--display); font-weight:600;}
body.legal p{color:var(--steel); margin:0 0 6px;}
body.legal ul{color:var(--steel); margin:0; padding-left:1.2em;}
body.legal li{margin-bottom:8px;}
body.legal footer a{border-bottom:none;}