/* ===================================================================
   CARTFIT.AI · base.css
   scroll-snap container, screens, corner marks, buttons
   load order matters — see index.html
   =================================================================== */

/* =================================================================
   SNAP CONTAINER + SCREENS
   ================================================================= */
.snap {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.snap::-webkit-scrollbar { display: none; }

.screen {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  padding: calc(var(--nav-h) + 32px) calc(var(--page-pad) + 96px) calc(var(--bar-h) + 32px) calc(var(--page-pad) + 64px);
  display: flex;
  flex-direction: column;
}

/* corner marks */
.corner {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
.corner--tl { top:    calc(var(--nav-h) + 12px); left:  calc(var(--page-pad) + 12px); border-top:    1px solid var(--line-3); border-left:   1px solid var(--line-3); }
.corner--tr { top:    calc(var(--nav-h) + 12px); right: calc(var(--page-pad) + 12px); border-top:    1px solid var(--line-3); border-right:  1px solid var(--line-3); }
.corner--bl { bottom: calc(var(--bar-h) + 12px); left:  calc(var(--page-pad) + 12px); border-bottom: 1px solid var(--line-3); border-left:   1px solid var(--line-3); }
.corner--br { bottom: calc(var(--bar-h) + 12px); right: calc(var(--page-pad) + 12px); border-bottom: 1px solid var(--line-3); border-right:  1px solid var(--line-3); }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  height: 48px; padding: 0 22px;
  border: 1px solid var(--fg-0);
  color: var(--fg-0);
  font-family: var(--font-sans);
  font-weight: 500; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  background: transparent;
  transition: background .25s, color .25s, border-color .25s;
  position: relative;
}
.btn:hover { background: var(--fg-0); color: var(--bg-0); }
.btn .arrow {
  position: relative;
  width: 16px; height: 1px;
  background: currentColor;
}
.btn .arrow i {
  position: absolute;
  right: 0; top: -3px;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn--ghost { border-color: var(--line-3); color: var(--fg-2); }
.btn--ghost:hover { background: transparent; color: var(--fg-0); border-color: var(--fg-0); }

/* ── mobile (≤768) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .screen {
    padding: calc(var(--nav-h) + 24px) 24px calc(var(--bar-h) + 24px);
  }
  .corner--tl { top: calc(var(--nav-h) + 8px); left: 8px; }
  .corner--tr { top: calc(var(--nav-h) + 8px); right: 8px; }
  .corner--bl { bottom: calc(var(--bar-h) + 8px); left: 8px; }
  .corner--br { bottom: calc(var(--bar-h) + 8px); right: 8px; }
}