html, body {
  margin: 0;
  padding: 0;
  background: #000;
  overscroll-behavior: none;
  height: 100%;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(242, 107, 39, .3);
}

input::placeholder {
  color: #444;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 10px;
}

h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
}

a {
  color: #F26B27;
}
a:hover {
  color: #ff8a52;
}

@keyframes dcGlide {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dcStampIn {
  0% { transform: rotate(-11deg) scale(3); opacity: 0; }
  100% { transform: rotate(-11deg) scale(1); opacity: 1; }
}

/* ---------- stage / background ---------- */

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #000;
  color: #F2F2F2;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(242, 107, 39, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 107, 39, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.glow {
  position: absolute;
  width: min(90vw, 700px);
  height: min(90vw, 700px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 107, 39, 0.12) 0%, transparent 60%);
  pointer-events: none;
}
.glow-tl { top: -18%; left: -18%; }
.glow-br { bottom: -18%; right: -18%; }

/* Scrolled slide content passes underneath the fixed corner labels, dots,
   nav buttons and page number at every scroll position, not just the resting
   top/bottom — these masks give that fixed chrome an opaque backing so text
   fades out behind it instead of visually colliding with it. */
.stage::before,
.stage::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
}
.stage::before {
  top: 0;
  height: max(76px, calc(env(safe-area-inset-top) + 60px));
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .85) 55%, transparent 100%);
}
.stage::after {
  bottom: 0;
  height: max(116px, calc(env(safe-area-inset-bottom) + 100px));
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .85) 45%, transparent 100%);
}

/* ---------- corner labels ---------- */

.corner {
  position: absolute;
  font-family: 'Space Mono', monospace;
  font-size: 8.5px;
  color: #444;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 5;
  white-space: pre-line;
}
.corner-tl { top: max(16px, env(safe-area-inset-top)); left: 16px; max-width: 38vw; }
.corner-tr { top: max(16px, env(safe-area-inset-top)); right: 16px; text-align: right; max-width: 44vw; }
.corner-bl { bottom: max(16px, env(safe-area-inset-bottom)); left: 16px; }
.corner-br { bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; }

/* ---------- progress dots ---------- */

.dots {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.dot {
  width: 20px;
  height: 2px;
  background: #222;
  transition: background .4s;
}
.dot.is-done { background: #666; }
.dot.is-active { background: #F26B27; }
.dots[hidden] { display: none; }

/* ---------- content ---------- */

.content-area {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* When content is taller than the viewport, plain `center` centers the
     overflow symmetrically — scrollTop:0 then shows the *middle* of the
     content, not the top, and the true top/bottom are unreachable in a
     sane way. `safe center` keeps centering when content fits, and falls
     back to start-alignment (a normal, fully-scrollable top-to-bottom flow)
     when it doesn't. */
  justify-content: center;
  justify-content: safe center;
  padding: clamp(20px, 6vw, 40px);
  overflow-y: auto;
}

/* Below ~700px the two-column dossier slides stack into one tall column and
   need to scroll. The corner labels/dots (top) and nav/page-number (bottom)
   are fixed overlays with no reserved space of their own, so scrolled text
   would otherwise pass underneath and collide with them — reserve clearance. */
@media (max-width: 700px) {
  .content-area {
    padding-top: max(76px, calc(env(safe-area-inset-top) + 60px));
    padding-bottom: max(116px, calc(env(safe-area-inset-bottom) + 100px));
  }
}

.slide-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slide {
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
}
.slide.is-active {
  display: flex;
  animation: dcGlide .7s cubic-bezier(.4, 0, .2, 1) both;
}

/* ---------- slide 0: hero ---------- */

.eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 5px;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.diamond { color: #F26B27; margin: 0 10px; }

.hero-title {
  font-family: 'Space Mono', monospace;
  font-size: clamp(40px, 13vw, 78px);
  font-weight: 700;
  letter-spacing: 4px;
  line-height: .95;
  text-align: center;
}
.hero-line { display: block; }
.hero-line--fg { color: #F2F2F2; }
.hero-line--orange { color: #F26B27; text-shadow: 0 0 40px rgba(242, 107, 39, 0.4); }

.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 13px;
  color: #666;
  margin-top: 36px;
  letter-spacing: 1px;
  text-align: center;
}

.hero-cta { margin-top: 44px; }

/* ---------- buttons ---------- */

.btn {
  font-family: 'Space Mono', monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* comfortable touch target on mobile regardless of the font-driven
     content height (Apple HIG / Material both recommend ~44-48px) */
  min-height: 44px;
  box-sizing: border-box;
}

.btn-outline {
  font-size: 11px;
  color: #F26B27;
  background: transparent;
  border: 1px solid #F26B27;
  padding: 14px 28px;
}
.btn-outline:hover { color: #000; background: #F26B27; }

.btn-solid {
  background: #F26B27;
  color: #000;
  border: none;
  font-size: 10px;
  padding: 12px 20px;
}
.btn-solid:hover { background: #fff; }

.btn-ghost {
  background: transparent;
  color: #888;
  border: 1px solid #444;
  font-size: 10px;
  padding: 12px 20px;
}
.btn-ghost:hover { color: #fff; background: #333; }

.btn-solid-link {
  gap: 10px;
  font-size: 11px;
  color: #fff;
  background: #F26B27;
  border: 1px solid #F26B27;
  padding: 14px 26px;
  text-decoration: none;
}
.btn-solid-link:hover { background: #fff; border-color: #fff; color: #000; }

.btn-nav {
  gap: 8px;
  font-size: 10px;
  color: #888;
  background: transparent;
  border: 1px solid #444;
  padding: 10px 16px;
}
.btn-nav:hover { color: #fff; background: #333; }

.btn-nav-orange {
  gap: 8px;
  font-size: 10px;
  color: #F26B27;
  background: transparent;
  border: 1px solid #F26B27;
  padding: 10px 16px;
}
.btn-nav-orange:hover { color: #000; background: #F26B27; }

/* ---------- slide 1: auth ---------- */

.auth-lines {
  font-family: 'Space Mono', monospace;
  text-align: left;
  max-width: 480px;
  width: 100%;
}
.auth-line {
  line-height: 2;
  transition: opacity .4s;
}

.auth-track {
  margin-top: 36px;
  width: 100%;
  max-width: 480px;
  height: 2px;
  background: #222;
  overflow: hidden;
}
.auth-fill {
  height: 100%;
  width: 0%;
  background: #F26B27;
  box-shadow: 0 0 10px #F26B27;
  transition: width .1s linear;
}

.auth-meta {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: #444;
  letter-spacing: 3px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  max-width: 480px;
  width: 100%;
}

/* ---------- shared two-column dossier layout ---------- */

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  max-width: 760px;
  width: 100%;
}
.two-col--wide {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 820px;
}

.col { padding: 0 4px; }
.col--right { text-align: right; }

.label-orange {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #F26B27;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.label-orange--tight { margin-bottom: 0; }

.rule {
  font-family: 'Space Mono', monospace;
  color: #333;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.brand-logo {
  display: block;
  height: clamp(40px, 8vw, 58px);
  width: auto;
  margin: 12px 0;
}

.copy {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  line-height: 1.9;
  color: #ccc;
  margin: 0 0 12px;
}
.copy--last { margin: 0; }
.copy--tight14 { margin: 0 0 14px; }
.copy--spaced-top { margin: 40px 0 0; }
.copy--spaced { margin: 30px 0 0; }
.copy--top22 { margin: 22px 0 0; }
.copy--top20 { margin: 20px 0 12px; }
.copy--top36 { margin: 36px 0 0; }

.hl { color: #F26B27; font-weight: 700; }
.hl--indent { margin-left: 20px; }

.redacted {
  background: #F26B27;
  color: #F26B27;
  padding: 0 6px;
  user-select: none;
}

.subhead {
  font-family: 'Space Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #F2F2F2;
  letter-spacing: 1px;
  margin: 20px 0 20px;
}
.subhead--tight {
  font-size: 18px;
  letter-spacing: normal;
  margin: 24px 0 20px;
}

.confidential-tag {
  display: inline-block;
  background: #F26B27;
  color: #000;
  padding: 4px 16px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 14px;
  transform: rotate(-8deg);
  margin: 12px 0;
}

.check-list { list-style: none; }
.check-list li {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 14px;
  padding-left: 26px;
  position: relative;
  line-height: 1.6;
}
.mark {
  position: absolute;
  left: 0;
  top: 1px;
  color: #F26B27;
  font-weight: 700;
  border: 1.5px solid #F26B27;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.most-important { margin-top: 32px; }

.handwritten {
  font-family: 'Caveat', cursive;
  color: #F26B27;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  margin-top: 10px;
}
.handwritten--spaced { font-size: 30px; margin-top: 40px; }
.handwritten--lead { font-size: clamp(26px, 5.5vw, 34px); margin-top: 24px; }

/* ---------- slide 5: manifesto ---------- */

.confidential-label {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: #F2F2F2;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.manifesto-title {
  font-family: 'Space Mono', monospace;
  font-size: clamp(15px, 3vw, 20px);
  color: #F26B27;
  letter-spacing: 1px;
  line-height: 1.3;
  margin-bottom: 28px;
}
.manifesto-title .fg { color: #F2F2F2; }
.manifesto-title .fg.big { font-weight: 700; font-size: clamp(28px, 6vw, 42px); }
.manifesto-title .fg.tiny { font-size: 9px; vertical-align: sub; }
.manifesto-title .bold { font-weight: 700; }

.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  margin-top: 12px;
}

.plain-list { list-style: none; }
.plain-list li {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 10px;
}

.stacked-type {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
}
.st { margin-top: 6px; }
.st--first { margin-top: 0; }
.st--gap { margin-top: 18px; }
.st--lg { font-size: clamp(30px, 7vw, 52px); }
.st--md { font-size: clamp(24px, 5.5vw, 42px); }
.st--sm { font-size: clamp(20px, 4.5vw, 34px); }
.st--orange { color: #F26B27; }
.st--fg { color: #F2F2F2; }

/* ---------- slide 6: coordinates ---------- */

.coords {
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  color: #F26B27;
  font-weight: 700;
  margin: 20px 0 0;
}

/* ---------- slide 7: signatures ---------- */

.signature { margin-top: 32px; }
.signature--spaced { margin-top: 28px; }
.sig-name {
  color: #F26B27;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Space Mono', monospace;
}
.sig-title {
  margin-top: 4px;
  font-size: 11px;
  color: #aaa;
  font-family: 'Space Mono', monospace;
}

/* ---------- slide 8: rsvp ---------- */

.rsvp-form {
  max-width: 520px;
  width: 100%;
  text-align: center;
}

.rsvp-lead {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  line-height: 1.9;
  color: #ccc;
  margin-bottom: 26px;
}
.rsvp-history {
  display: inline-block;
  background: #F26B27;
  color: #000;
  font-weight: 700;
  padding: 0 6px;
}

.rsvp-title {
  font-family: 'Space Mono', monospace;
  font-size: clamp(20px, 5.5vw, 30px);
  font-weight: 700;
  letter-spacing: 2px;
  color: #F2F2F2;
}
.fg-orange { color: #F26B27; }

.rsvp-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #666;
  margin-top: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.countdown {
  display: flex;
  gap: 14px;
  margin: 30px 0;
  justify-content: center;
  flex-wrap: wrap;
}
.cd-box {
  text-align: center;
  min-width: 66px;
  padding: 14px 6px;
  border: 1px solid #1a1a1a;
  background: rgba(242, 107, 39, 0.02);
}
.cd-num {
  font-family: 'Space Mono', monospace;
  font-size: 30px;
  font-weight: 700;
  color: #F26B27;
  line-height: 1;
  text-shadow: 0 0 20px rgba(242, 107, 39, 0.3);
}
.cd-label {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  color: #666;
  letter-spacing: 2px;
  margin-top: 8px;
  text-transform: uppercase;
}

.rsvp-input-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: 320px;
  margin: 0 auto;
}
.rsvp-input {
  background: transparent;
  border: none;
  border-bottom: 1px solid #333;
  padding: 12px 4px;
  color: #F2F2F2;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  width: 100%;
  text-align: center;
  letter-spacing: 1px;
  outline: none;
}
.rsvp-input.has-error { border-bottom-color: #ff6b6b; }

.rsvp-error {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #ff6b6b;
  letter-spacing: .5px;
  margin-top: 8px;
}

.rsvp-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  justify-content: center;
  flex-wrap: wrap;
}

.rsvp-done {
  text-align: center;
  max-width: 460px;
}

.done-title {
  font-family: 'Space Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
}
.done-title--orange { color: #F26B27; text-shadow: 0 0 20px rgba(242, 107, 39, 0.4); }
.done-title--muted { color: #888; }

.done-copy {
  font-family: 'Inter', sans-serif;
  color: #888;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.8;
}

.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  padding: 14px 26px;
  border: 3px double #F26B27;
  color: #F26B27;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 16px;
  transform: rotate(-11deg);
  box-shadow: 0 0 24px rgba(242, 107, 39, 0.25);
  opacity: .88;
  mix-blend-mode: screen;
  filter: saturate(1.3);
  animation: dcStampIn .5s cubic-bezier(.34, 1.56, .64, 1) forwards;
  position: relative;
}
.stamp-inner {
  position: absolute;
  inset: 5px;
  border: 1px solid #F26B27;
  opacity: .6;
}
.stamp-text {
  position: relative;
  text-shadow: 0 0 1px #F26B27, 0.5px 0.5px 0 rgba(242, 107, 39, .5);
}

.download-row { margin-top: 34px; }

.hashtag {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: #F26B27;
  margin-top: 28px;
  letter-spacing: 3px;
}

/* ---------- nav / page number ---------- */

.nav-back {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  left: 20px;
  z-index: 20;
}
.nav-next {
  position: absolute;
  bottom: max(24px, env(safe-area-inset-bottom));
  right: 20px;
  z-index: 20;
}

.page-num {
  position: absolute;
  bottom: max(60px, calc(env(safe-area-inset-bottom) + 44px));
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #444;
  letter-spacing: 3px;
  z-index: 5;
}

/* ---------- scroll hint ---------- */

.scroll-hint {
  position: absolute;
  /* Same band as the nav buttons/page-number — on every slide this strip is
     either empty (slide 8) or only occupied at the far left/right (nav
     buttons), leaving the horizontal center clear regardless of what the
     slide's own content is doing. */
  bottom: max(32px, calc(env(safe-area-inset-bottom) + 8px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #F26B27;
  pointer-events: none;
  animation: dcScrollHint 1.6s ease-in-out infinite;
}
.scroll-hint[hidden] { display: none; }
.scroll-hint-label {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
}
.scroll-hint-chevron {
  font-size: 12px;
  line-height: 1;
}
@keyframes dcScrollHint {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .5; }
  50% { transform: translateX(-50%) translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; opacity: .85; }
}

/* ---------- short viewports (landscape phones, small laptops) ---------- */
/* The hero, auth and RSVP slides are single-column with fixed vertical
   margins sized for portrait phones. In a short/landscape viewport those
   margins alone can push interactive content (the CTA button, the RSVP
   fields) below the fold with no visual cue to scroll. Tighten them here
   so these slides fit without scrolling in the common short-viewport case. */
@media (max-height: 500px) {
  .eyebrow { margin-bottom: 14px; }
  .hero-tagline { margin-top: 16px; }
  .hero-cta { margin-top: 20px; }

  .auth-track { margin-top: 18px; }

  .rsvp-lead { margin-bottom: 14px; }
  .countdown { margin: 16px 0; }
  .cd-box { padding: 8px 6px; }
  .rsvp-actions { margin-top: 14px; }
}

.rule {
  color: #cccccc !important; /* Bright Silver Gray */
  font-weight: bold;         /* Thoda mota dikhne ke liye */
  opacity: 1 !important;
}

/* 3 Columns Grid Layout - Exact Match */
.three-col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2.5rem !important;
  width: 100%;
  align-items: start;
}

/* Individual column styling */
.three-col .col {
  display: flex;
  flex-direction: column;
}

/* Brand logo fix */
.three-col .brand-logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 1.5rem;
  object-fit: contain;
}

/* Paragraph spacing */
.three-col .copy {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.three-col .copy--last {
  margin-bottom: 0;
}

/* Slide 2 Scroll */

/* Scrollbar */
/* ==========================
   Slide 2 - Vertical Layout
========================== */

.slide[data-slide="2"]{
    overflow: hidden;
}

.slide[data-slide="2"] .two-col{
    display: flex;
    flex-direction: column;
    gap: 45px;

    height: calc(100vh - 140px);
    overflow-y: auto;
    scroll-behavior: smooth;

    padding-right: 12px;
}

/* Scrollbar */

.slide[data-slide="2"] .two-col::-webkit-scrollbar{
    width:6px;
}

.slide[data-slide="2"] .two-col::-webkit-scrollbar-thumb{
    background:#F26B27;
    border-radius:20px;
}

.slide[data-slide="2"] .two-col::-webkit-scrollbar-track{
    background:transparent;
}

/* Cards */

.slide[data-slide="2"] .col{
    width:100%;
    max-width:900px;
    margin:0 auto;
}

/* ==========================
   TASO Highlight
========================== */

.slide[data-slide="2"] .col:nth-child(2){
    border:2px solid rgba(242,107,39,.45);
    border-radius:18px;
    padding:25px;
    background:rgba(242,107,39,.05);
    box-shadow:0 0 25px rgba(242,107,39,.20);
}

/* Logo */

.slide[data-slide="2"] .brand-logo{
    width:180px;
    height:auto;
    display:block;
    margin:20px auto;
    object-fit:contain;
}

/* Mobile */

@media (max-width:768px){

.slide[data-slide="2"] .two-col{
    height:calc(100vh - 120px);
    gap:30px;
}

.slide[data-slide="2"] .col:nth-child(2){
    padding:18px;
}

.slide[data-slide="2"] .brand-logo{
    width:140px;
}

}
/* TASO Image Styling */
.brand-logo {
  width: 300px;
  height: 200px;
  object-fit: contain;
  display: block;
  margin: 20px auto;
  filter: brightness(1);
}

/* TASO specific image */
.col img[src*="taso3"]{
    display: block;
    height: clamp(50px, 8vw, 58px);
    width: auto;
    margin: 12px 0;
    object-fit: contain;

    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.three-col .taso-logo{
    max-width: 180px;
    width: 100%;
    height: 58px;
    object-fit: contain;
    margin-bottom: 1.5rem;
}