/* ============================================================
   MODIFI × Meta — partner site
   Site-specific layout on top of the design system.
   Load order: tokens.css → base.css → components.css → site.css
   ============================================================ */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ---- Sticky top nav ---------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--mod-space-4);
  padding: var(--mod-space-3) var(--mod-gutter);
  background: color-mix(in srgb, var(--mod-ink) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #1c1c1c;
}
.nav__brand { display: flex; align-items: center; gap: var(--mod-space-2);
  font-family: var(--mod-font-rounded); font-weight: 700; letter-spacing: .02em; }
.nav__mark { width: 1.6rem; height: 1.6rem; border-radius: 0.42rem;
  background: var(--mod-yellow); display: grid; place-items: center;
  padding: .3rem; }
.nav__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav__links { display: flex; gap: var(--mod-space-5); }
.nav__links a {
  font-family: var(--mod-font-mono); font-size: var(--mod-text-label);
  letter-spacing: var(--mod-track-label); text-transform: uppercase;
  color: var(--mod-n-400); transition: color var(--mod-dur-fast);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--mod-paper); }
@media (max-width: 720px) { .nav__links { display: none; } }

/* ---- Section scaffolding ----------------------------------- */
.section { padding: var(--mod-space-10) 0; border-top: 1px solid #181818; }
.section--flush { border-top: 0; }
.section__inner { max-width: var(--mod-maxw); margin-inline: auto;
  padding-inline: var(--mod-gutter); }
.eyebrow {
  font-family: var(--mod-font-mono); font-size: var(--mod-text-label);
  letter-spacing: var(--mod-track-label); text-transform: uppercase;
  color: var(--mod-yellow); margin-bottom: var(--mod-space-4);
}
.section__lead { max-width: 46ch; color: var(--mod-n-300);
  font-size: var(--mod-text-m); line-height: 1.4; margin-top: var(--mod-space-4); }

/* ---- Hero -------------------------------------------------- */
.hero { padding: var(--mod-space-9) 0 var(--mod-space-10); }
.hero__thesis { color: var(--mod-n-600); }
.hero__turn { color: var(--mod-paper); }
.hero__sub { max-width: 40ch; color: var(--mod-n-300);
  font-size: var(--mod-text-m); line-height: 1.4; margin-top: var(--mod-space-6); }
.hero__cta { display: flex; gap: var(--mod-space-3); margin-top: var(--mod-space-7);
  flex-wrap: wrap; }

/* ---- Instrument vs performance diagram --------------------- */
.split { display: grid; gap: var(--mod-space-5);
  grid-template-columns: 1fr 1fr; margin-top: var(--mod-space-7); }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }
.split__card {
  background: var(--mod-n-900); border: 1px solid #222;
  border-radius: var(--mod-r-lg); padding: var(--mod-space-6);
}
.split__card h3 { font-family: var(--mod-font-rounded); font-size: var(--mod-text-l);
  margin-bottom: var(--mod-space-2); }
.split__card .file { font-family: var(--mod-font-mono); color: var(--mod-yellow);
  font-size: var(--mod-text-sm); }
.split__card p { color: var(--mod-n-300); margin-top: var(--mod-space-3); }
.split__card--moo { border-color: color-mix(in srgb, var(--mod-yellow) 40%, #222); }
.split__card--mod { border-color: color-mix(in srgb, var(--mod-blue) 40%, #222); }
.split__note { grid-column: 1 / -1; text-align: center; color: var(--mod-n-400);
  font-size: var(--mod-text-m); font-style: italic; margin-top: var(--mod-space-2); }

/* ---- Video tile (used by the .inputs gallery) -------------- */
.demo { display: flex; flex-direction: column; }
.demo__media {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--mod-r-lg);
  overflow: hidden; background:
    radial-gradient(120% 120% at 20% 15%, #2a2a2a, #0c0c0c 70%);
  display: grid; place-items: center;
}
.demo__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo__tag { position: absolute; z-index: 2; top: var(--mod-space-3); left: var(--mod-space-3);
  padding: .35em .8em; border-radius: var(--mod-r-pill);
  background: color-mix(in srgb, var(--mod-ink) 65%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--mod-font-mono); font-size: var(--mod-text-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--mod-paper); }
.demo__title { font-family: var(--mod-font-rounded); font-weight: 500;
  font-size: var(--mod-text-m); margin-top: var(--mod-space-4); }

/* ---- Technical onboarding ---------------------------------- */
.steps { counter-reset: step; margin-top: var(--mod-space-6); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--mod-space-4);
  padding: var(--mod-space-5) 0; border-top: 1px solid #181818; }
.step::before { counter-increment: step; content: counter(step,decimal-leading-zero);
  font-family: var(--mod-font-mono); color: var(--mod-yellow);
  font-size: var(--mod-text-sm); letter-spacing: .1em; }
.step h3 { font-family: var(--mod-font-rounded); font-size: var(--mod-text-m);
  margin-bottom: var(--mod-space-2); font-weight: var(--mod-weight-medium); }
.step p { color: var(--mod-n-300); }

.code {
  margin-top: var(--mod-space-6); border-radius: var(--mod-r-md);
  background: #0b0b0b; border: 1px solid #222; overflow-x: auto;
  padding: var(--mod-space-5); font-family: var(--mod-font-mono);
  font-size: var(--mod-text-sm); line-height: 1.7; color: var(--mod-n-200);
}
.code .c { color: var(--mod-n-500); }
.code .k { color: var(--mod-yellow); }
.code .s { color: color-mix(in srgb, var(--mod-blue) 60%, var(--mod-paper)); }

/* ---- Callout / close --------------------------------------- */
.callout { background: var(--mod-yellow); color: var(--mod-ink);
  border-radius: var(--mod-r-lg); padding: var(--mod-space-8) var(--mod-space-7); }
.callout h2 { font-size: var(--mod-text-xl); letter-spacing: var(--mod-track-tight);
  line-height: 1.05; }
.callout p { max-width: 46ch; margin-top: var(--mod-space-4); font-size: var(--mod-text-m); }

.footer { padding: var(--mod-space-7) 0; color: var(--mod-n-500);
  font-family: var(--mod-font-mono); font-size: var(--mod-text-label);
  letter-spacing: var(--mod-track-label); text-transform: uppercase; }
.footer__inner { max-width: var(--mod-maxw); margin-inline: auto;
  padding-inline: var(--mod-gutter); display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: var(--mod-space-3); }

/* ============================================================
   v2 — sections driven by the CTO technical description
   ============================================================ */

/* ---- Gesture mapping cards --------------------------------- */
.gestures { display:grid; gap:var(--mod-space-4); margin-top:var(--mod-space-7);
  grid-template-columns:repeat(4,1fr); }
@media (max-width:720px){ .gestures{ grid-template-columns:repeat(2,1fr);} }
.gesture { background:var(--mod-n-900); border:1px solid #222; border-radius:var(--mod-r-lg);
  padding:var(--mod-space-6) var(--mod-space-5); }
.gesture__glyph { font-size:2.2rem; line-height:1; }
.gesture__name { font-family:var(--mod-font-rounded); font-weight:500; margin-top:var(--mod-space-3); }
.gesture__map { margin-top:var(--mod-space-3); font-family:var(--mod-font-mono);
  font-size:var(--mod-text-micro); letter-spacing:.06em; text-transform:uppercase; }
.gesture__val { display:inline-block; margin-top:var(--mod-space-2); padding:.3em .8em;
  border-radius:var(--mod-r-pill); font-family:var(--mod-font-rounded); font-weight:500;
  background:var(--mod-blue); color:var(--mod-paper); }
.gesture__val--outro { background:var(--mod-orange); }

/* ---- App flow (numbered inline) --------------------------- */
.flow { display:grid; gap:var(--mod-space-3); margin-top:var(--mod-space-6);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.flow__step { background:var(--mod-n-900); border:1px solid #222; border-radius:var(--mod-r-md);
  padding:var(--mod-space-4); font-size:var(--mod-text-sm); color:var(--mod-n-300); }
.flow__step b { display:block; color:var(--mod-yellow); font-family:var(--mod-font-mono);
  font-size:var(--mod-text-micro); letter-spacing:.1em; margin-bottom:var(--mod-space-2); }

/* ---- Architecture diagram --------------------------------- */
.diagram { margin-top:var(--mod-space-7); }
.legend { display:flex; gap:var(--mod-space-5); margin-bottom:var(--mod-space-5);
  font-family:var(--mod-font-mono); font-size:var(--mod-text-label);
  letter-spacing:var(--mod-track-label); text-transform:uppercase; }
.legend__item{ display:inline-flex; align-items:center; gap:var(--mod-space-2); }
.dot{ width:.75rem; height:.75rem; border-radius:50%; }
.dot--meta{ background:var(--mod-blue);} .dot--modifi{ background:var(--mod-red);}

.diagram__grid { display:grid; gap:var(--mod-space-4);
  grid-template-columns:2fr 1fr; align-items:stretch; }
@media (max-width:720px){ .diagram__grid{ grid-template-columns:1fr; } }

.zone { border-radius:var(--mod-r-lg); padding:var(--mod-space-5);
  border:1px solid; position:relative; }
.zone--meta   { background:color-mix(in srgb,var(--mod-blue) 12%, #0b0b0b);
  border-color:color-mix(in srgb,var(--mod-blue) 40%, #222); }
.zone--modifi { background:color-mix(in srgb,var(--mod-red) 12%, #0b0b0b);
  border-color:color-mix(in srgb,var(--mod-red) 40%, #222); }
.zone__label { display:block; font-family:var(--mod-font-mono); font-size:var(--mod-text-micro);
  letter-spacing:.08em; text-transform:uppercase; color:var(--mod-n-300);
  margin-bottom:var(--mod-space-3); }
.zone__nodes { display:flex; gap:var(--mod-space-3); flex-wrap:wrap; }
.node { flex:1; min-width:120px; border-radius:var(--mod-r-md); padding:var(--mod-space-4);
  font-family:var(--mod-font-rounded); font-weight:500; font-size:var(--mod-text-sm);
  color:var(--mod-paper); text-align:center; }
.node--meta   { background:var(--mod-blue); }
.node--modifi { background:var(--mod-red); }

.diagram__col { display:flex; flex-direction:column; gap:var(--mod-space-4); }
.conn { display:block; text-align:center; font-family:var(--mod-font-mono);
  font-size:var(--mod-text-micro); letter-spacing:.05em; color:var(--mod-n-400);
  padding:var(--mod-space-2) 0; }
.diagram__cap { margin-top:var(--mod-space-5); color:var(--mod-n-300); max-width:60ch; }

/* ---- Roadmap timeline ------------------------------------- */
.roadmap { margin-top:var(--mod-space-7); display:grid; gap:0;
  grid-template-columns:repeat(4,1fr); }
@media (max-width:720px){ .roadmap{ grid-template-columns:1fr; } }
.rstep { position:relative; padding:var(--mod-space-5) var(--mod-space-4) 0; }
.rstep::before { counter-increment:rc; content:counter(rc,decimal-leading-zero);
  font-family:var(--mod-font-mono); color:var(--mod-yellow); font-size:var(--mod-text-sm);
  letter-spacing:.1em; }
.rstep::after { content:""; position:absolute; top:calc(var(--mod-space-5) + .35rem); left:0; right:0;
  height:2px; background:#222; z-index:-1; }
.roadmap{ counter-reset:rc; }
.rdot { width:.8rem; height:.8rem; border-radius:50%; background:var(--mod-yellow);
  margin:var(--mod-space-3) 0; }
.rstep h3 { font-family:var(--mod-font-rounded); font-size:var(--mod-text-m);
  margin-bottom:var(--mod-space-2); font-weight:var(--mod-weight-medium); }
.rstep p { color:var(--mod-n-300); font-size:var(--mod-text-sm); }
@media (max-width:720px){ .rstep::after{ display:none; } }

/* ---- Try-it app cards ------------------------------------- */
.apps { display:grid; gap:var(--mod-space-4); margin-top:var(--mod-space-7);
  grid-template-columns:repeat(3,1fr); }
@media (max-width:720px){ .apps{ grid-template-columns:1fr; } }
.app { display:flex; flex-direction:column; gap:var(--mod-space-3);
  background:var(--mod-n-900); border:1px solid #222; border-radius:var(--mod-r-lg);
  padding:var(--mod-space-6); transition:border-color var(--mod-dur-base),transform var(--mod-dur-base) var(--mod-ease-gel); }
.app:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--mod-yellow) 45%,#222); }
.app__plat { font-family:var(--mod-font-mono); font-size:var(--mod-text-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--mod-yellow); }
.app__name { font-family:var(--mod-font-rounded); font-size:var(--mod-text-l); }
.app__desc { color:var(--mod-n-300); font-size:var(--mod-text-sm); flex:1; }

/* ---- Input-examples video gallery (portrait phone demos) --- */
.inputs { display:grid; gap:var(--mod-space-4); margin-top:var(--mod-space-7);
  grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .inputs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .inputs{ grid-template-columns:1fr; } }
/* the input clips are vertical (phone screen recordings) */
.inputs .demo__media { aspect-ratio:9/16; }
.inputs .demo__media video { background:#000; }

/* ============================================================
   Rhythm — warm-paper light sections + a yellow band.
   Mirrors the deck's black / white / yellow alternation so the
   page breathes and shows more of the playful brand.
   (This is the design system's light-surface variant, scoped.)
   ============================================================ */
.section--light { background:#F6F5F1; color:var(--mod-ink); border-top-color:#e9e7e1; }
.section--light .eyebrow { color:var(--mod-ink); }
.section--light .mod-display,
.section--light h2, .section--light h3, .section--light h4 { color:var(--mod-ink); }
.section--light .section__lead { color:var(--mod-n-600); }
.section--light .split__card { background:#fff; border-color:#e7e4dc; box-shadow:var(--mod-shadow-sm); }
.section--light .split__card p { color:var(--mod-n-600); }
.section--light .split__card .file { color:#8f6a00; }
.section--light .split__card--mod .file { color:color-mix(in srgb,var(--mod-blue) 85%, #000) !important; }
.section--light .split__note { color:var(--mod-n-500); }
.section--light .split__card--moo { border-color:color-mix(in srgb,var(--mod-yellow) 60%, #e7e4dc); }
.section--light .split__card--mod { border-color:color-mix(in srgb,var(--mod-blue) 35%, #e7e4dc); }
.section--light .rstep p { color:var(--mod-n-600); }
.section--light .rstep::after { background:#e2ded4; }

/* yellow interstitial band */
.band { background:var(--mod-yellow); color:var(--mod-ink); padding:var(--mod-space-9) 0; border-top:0; }
.band .mod-display { color:var(--mod-ink); }