/* Hitt's existing content and slide order are preserved at every viewport. */
:root {
  --ink: #191624;
  --paper: #fcfcfe;
  --violet: #6d4aff;
  --violet-deep: #4b2ed6;
  --violet-soft: #f0ecff;
  --soft: #4b465a;
  --mute: #656073;
  --hair: #e5e1ee;
  --ease-ui: cubic-bezier(.22, 1, .36, 1);
}
html { color-scheme: light; }
body { -webkit-font-smoothing: antialiased; }
#stage { width: 100vw; height: 100vh; height: 100dvh; font-size: min(1vw, 1.77778vh); }
.slide { padding-bottom: max(3.6em, 96px); }
h1, .quote, .vn, .pt, .rn { text-wrap: balance; }
.sub, .d, .vd, .pd, .learn, .vv, .foot { text-wrap: pretty; }
.stat, .vf, .proof, .ruta, .vert, .mcard { box-shadow: none; }
.col, .stat, .vf, .proof, .ruta, .vert, .mcard { border-radius: 16px; }
.stat { border-color: var(--hair); }
.cover-brand .mark { border-radius: 10px; }
.vert.a, .vert.b, .vert.c { border-top-width: 1px; }
.vert.a { background: var(--violet-soft); border-color: #d4c9ff; }
.vert.b { background: #f5f3fc; border-color: #e0daf1; }
.vert.c { background: #fff; }
.vert .vs { letter-spacing: .02em; }
.proof .learn { color: var(--soft); }
.ruta.dim { opacity: 1; }
.ruta .rt, .proof .ps { letter-spacing: .09em; }
.col.con { background: #211a35; }
.mcard.dark { background: #211a35; }
.mcard.dark .blbl, .dark .foot { color: #c3bccc; }
.mcard.dark .md { color: #d3cbdc; }
.dark .sub { color: #d3cbdc; }
.bars .bar { transform-origin: center bottom; }

/* A tactile navigation rail, inspired by Bencho's Icon bar. */
#nav {
  --progress: .083333;
  bottom: max(16px, env(safe-area-inset-bottom));
  gap: 12px;
  width: 224px;
  padding: 8px 10px 12px;
  background: #fff;
  backdrop-filter: none;
  border-radius: 24px;
  box-shadow: 0 2px 8px #19162424;
  justify-content: space-between;
  isolation: isolate;
}
#nav::before, #nav::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 2px;
}
#nav::before { background: #e8e3f2; }
#nav::after {
  background: var(--violet);
  transform: scaleX(var(--progress));
  transform-origin: left;
  transition: none;
}
#nav button {
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: #f0edf6;
  font-size: 28px;
  border-radius: 16px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 140ms var(--ease-ui), background-color 140ms ease;
}
#nav #next { color: #fff; background: var(--violet); }
#nav button:active { transform: scale(.94); }
#nav button:disabled { opacity: .35; background: #f0edf6; color: var(--ink); }
#counter { color: var(--soft); font-size: 12px; letter-spacing: 0; }
button:focus-visible, #stage > .slide:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  #nav button:hover:not(:disabled) { background: #e4dcff; color: var(--violet-deep); }
  #nav #next:hover:not(:disabled) { background: var(--violet-deep); color: white; }
}

/* Mobile is one continuous document in the original section order. */
@media (max-width: 1023px), (max-height: 520px) and (pointer: coarse) {
  html, body { width: 100%; height: auto; min-height: 100%; background: var(--paper); overflow: visible; }
  #stagewrap { position: relative; inset: auto; display: block; }
  #stage {
    width: 100%;
    height: auto;
    font-size: 16px;
    overflow: visible;
  }
  #stage > .slide {
    position: relative;
    inset: auto;
    display: flex;
    padding: 44px 22px 48px;
    overflow: visible;
    border-bottom: 1px solid var(--hair);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-top: 28px;
  }
  #stage > .slide:first-child { padding-top: max(28px, env(safe-area-inset-top)); }
  #stage > .slide .foot { display: none; }
  .rutas > .ruta:first-child .plist { display: none; }
  #stage > .slide:last-child { padding-bottom: max(48px, env(safe-area-inset-bottom)); border-bottom: 0; }
  #stage > .slide > * { flex-shrink: 0; }
  .slide.glow { background: radial-gradient(ellipse at 100% 0, #eee9ff 0, transparent 420px), var(--paper); }
  .slide.dark { background: #211a35; }
  .cover-brand { gap: 10px; font-size: 27px; letter-spacing: -.02em; }
  .cover-brand .mark { width: 38px; height: 38px; font-size: 23px; border-radius: 12px; }
  .tag {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .11em;
    font-weight: 500;
  }
  .tag .rule-l { width: 24px; margin-right: 10px; }
  h1, h1.big {
    max-width: 100%;
    font-size: clamp(30px, 8.2vw, 42px);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin-top: 16px;
  }
  .sub { max-width: 65ch; font-size: 16px; line-height: 1.65; margin-top: 20px; }
  .spacer { flex: 1 0 24px !important; }
  .foot {
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.65;
    padding-top: 20px;
    margin-top: 32px;
  }
  .stats2, .valueflow, .proof3, .rutas, .cards2, .ledger {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: none;
    gap: 16px;
    margin-top: 28px;
    min-height: auto;
  }
  .stat { padding: 24px; border-radius: 16px; background: #ffffffb3; }
  .stat .n { font-size: 56px; line-height: 1; letter-spacing: -.035em; }
  .stat .d { font-size: 16px; line-height: 1.6; margin-top: 16px; font-weight: 400; }
  .stat .s { font-size: 10px; line-height: 1.6; margin-top: 18px; letter-spacing: 0; }
  .vf, .proof, .ruta { padding: 24px; border-radius: 16px; }
  .vf .num { font-size: 11px; letter-spacing: .08em; }
  .vf .vt { font-size: 23px; line-height: 1.2; margin-top: 12px; letter-spacing: -.02em; }
  .vf .vd { font-size: 16px; line-height: 1.65; margin-top: 12px; }
  .col, .compare-slide .col { padding: 24px; border-radius: 16px; }
  .col .ct { font-size: 24px; line-height: 1.2; }
  .lrow, .compare-slide .lrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 0;
    flex: none;
    font-size: 16px;
    line-height: 1.6;
  }
  .lrow:first-of-type { margin-top: 16px; }
  .lrow .amt { max-width: 100%; text-align: left; font-family: Inter, system-ui, sans-serif; line-height: 1.6; }
  .proof .ps, .ruta .rt { font-size: 11px; line-height: 1.5; }
  .proof .pt, .ruta .rn { font-size: 24px; line-height: 1.25; margin-top: 12px; letter-spacing: -.025em; }
  .proof .pd, .ruta .vv { font-size: 16px; line-height: 1.65; margin-top: 14px; }
  .proof .learn { font-size: 15px; line-height: 1.65; padding-top: 20px; margin-top: 24px; }
  .plist { margin-top: 22px; }
  .plist li { font-size: 15px; line-height: 1.65; padding: 16px 0; }
  .plist li:first-child { padding-top: 0; }
  .verts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 28px 0 0;
    padding: 0;
    overflow: visible;
  }
  .vert { min-width: 0; padding: 26px; }
  .vert .num { font-size: 12px; letter-spacing: .04em; }
  .vert .vn { font-size: 28px; line-height: 1.15; margin-top: 14px; letter-spacing: -.03em; }
  .vert .vs { font-family: Inter, system-ui, sans-serif; font-size: 11px; line-height: 1.5; margin-top: 20px; padding: 7px 10px; }
  .vert .vd { font-size: 16px; line-height: 1.65; margin-top: 22px; }
  .mcard { padding: 24px; min-height: 420px; }
  .mcard .mt { font-size: 25px; line-height: 1.2; }
  .mcard .md { font-size: 16px; line-height: 1.65; margin-top: 12px; }
  .bars { gap: 16px; height: 210px; flex: none; margin-top: 32px; align-items: flex-end; }
  .bwrap { width: auto; min-width: 0; flex: 1; gap: 8px; }
  .bwrap .bval { font-size: 11px; letter-spacing: -.035em; white-space: nowrap; }
  .bwrap .blbl { font-size: 11px; line-height: 1.4; text-align: center; }
  .bwrap .bar { min-height: 12px; border-radius: 6px 6px 0 0; }
  .quote { font-size: clamp(31px, 8.3vw, 44px); line-height: 1.22; letter-spacing: -.025em; max-width: 100%; margin-top: 22px; }
  #stage > .slide.hitt-demo-slide {
    padding: 0;
    overflow: visible;
    border-bottom: 0;
  }
  .hitt-demo-frame { width: 100%; height: auto; flex: none; }
  #nav { display: none; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  #stage > .slide { padding-left: 8vw; padding-right: 8vw; }
  h1, h1.big, .quote { max-width: 19ch; font-size: 44px; }
  .stats2, .valueflow, .proof3, .rutas, .cards2, .ledger { max-width: 760px; }

}
@media (prefers-reduced-motion: reduce) {
  #nav::after, #nav button { transition: none; }
  #nav button:active { transform: none; }
}
@media print {
  #stage { font-size: 1vw !important; height: auto; overflow: visible; }
  #stage > .slide { padding: 4.6em 5.6em 3.6em; overflow: visible; }
  #stage > .slide.hitt-demo-slide { padding: 0; }
  #nav { display: none; }
  .verts { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 2.2em 0 0; padding: 0; }
}