/* ==========================================================================
   Reelio — custom component layer
   --------------------------------------------------------------------------
   Tailwind (precompiled to tailwind.css) handles layout, spacing, typography
   and colour in the markup. This file only holds the bespoke pieces that
   don't read well as utility classes: the hero carousel mechanics, the niche
   accordion, the nav dropdowns, the FAQ animation and the legal prose.
   Design tokens live in :root so both Tailwind and this file agree.
   ========================================================================== */

:root {
  /* Lock the site to its own light palette — never let the device/browser
     auto-darken (Chrome "Auto Dark Theme", in-app webviews, etc.). */
  color-scheme: light;

  --purple:      #5B47FF;
  --purple-dark: #4636CC;
  --violet:      #8129D9;
  --navy:        #171660;
  --mint:        #3DEBB0;
  --lavender:    #EDEBFC;
  --grey:        #F4F4F8;
  --paper:       #F2F2F0;
  --ink:         #171523;
  --sub:         #5B5876;
  --border:      rgba(23, 21, 35, .08);
}

body {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The brands pages swap the primary accent from purple to violet. Anything
   painted with --accent follows automatically. */
body            { --accent: var(--purple); }
body.is-brands  { --accent: var(--violet); }

/* ---------- Buttons & pills ----------------------------------------------
   Reused on every page, so they live here instead of repeating a long
   utility string in the markup. */
.btn-mint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mint);
  color: #0B2A22;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: 999px;
  transition: .2s;
}
.btn-mint:hover { transform: translateY(-2px); }

.pill-navy {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 17px 34px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
}

/* App Store / Google Play badges */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--navy);
  color: #fff;
  padding: 12px 22px;
  border-radius: 14px;
  white-space: nowrap;
}
.store-badge .sb-small { display: block; font-size: 11px; opacity: .75; line-height: 1.2; }
.store-badge .sb-big {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

/* ---------- Nav ----------------------------------------------------------- */
.navbar {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(23, 21, 35, .12);
}

/* Creators / Brands segmented control, centred over the bar.
   `display` is deliberately left to the markup's hidden/inline-flex utilities —
   setting it here would override them, since this file loads after tailwind.css. */
.herotabs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  gap: 4px;
  background: var(--grey);
  border-radius: 999px;
  padding: 5px;
}
.herotabs a {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
  padding: 10px 20px;
  border-radius: 999px;
  color: var(--sub);
  transition: background .25s, color .25s;
  white-space: nowrap;
}
.herotabs a.active { background: var(--accent); color: #fff; }

/* Log in / Sign up dropdowns */
.nav-dd { position: relative; }
.nav-dd .dd-chev { opacity: .9; transition: transform .18s; }
.nav-dd.open .dd-chev { transform: rotate(180deg); }
.dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 160px;
  background: #fff;
  border-radius: 14px;
  padding: 12px 6px 8px;
  box-shadow: 0 20px 45px rgba(23, 22, 96, .14), 0 0 0 1px rgba(23, 22, 96, .05);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 120;
}
.nav-dd[data-dd="signup"] .dd-menu { left: auto; right: 0; }
.nav-dd.open .dd-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dd-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--sub);
  padding: 0 14px 8px;
}
.dd-item {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.dd-item:hover { background: var(--grey); }

/* burger animation when the mobile menu is open */
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hidden via opacity rather than `display`, so it can fade — which means it has
   to be taken out of flow, or the closed menu reserves its full height. That is
   invisible on the marketing pages (fixed header) but pushes the legal pages
   down by ~500px, since their header sits in normal flow.
   Anchored to the padded nav container; only ever visible under 900px, so the
   insets match that breakpoint's `px-5` gutter. */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 20px;
  right: 20px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.mobile-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Hero ---------------------------------------------------------- */
.hero { background: var(--accent); transition: background .4s ease; }

/* Vertical (desktop) / horizontal (mobile) slide carousel. JS drives the
   translate; the axis swap happens at the 900px breakpoint below. */
.shot-viewport {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 610px;
  margin-left: auto;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
}
.shot-track {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 1s cubic-bezier(.65, .02, .25, 1);
}
.shot-slide {
  width: 100%;
  min-height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-slide.s1 { background: linear-gradient(150deg, #2E4BD8, #1A2E9E); }
.shot-slide.s2 { background: linear-gradient(150deg, #C64B2E, #8E2F1B); }
.shot-slide.s3 { background: linear-gradient(150deg, #1F6B4F, #0E3A2A); }
.shot-slide.s4 { background: linear-gradient(150deg, #6B3A9E, #3A1C5C); }
/* faint vertical scanlines over each slide */
.shot-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px);
}
.shot-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 16px 22px;
  text-align: center;
  color: #fff;
  font-size: 13.5px;
  background: linear-gradient(to top, rgba(0,0,0,.45), transparent);
}

/* the creator "link in bio" board inside each slide */
.board {
  position: relative;
  z-index: 2;
  width: 62%;
  background: #fff;
  border: 8px solid #1E3AC4;
  border-radius: 26px;
  padding: 4% 3.5% 5%;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .3);
  transform: rotate(-1.5deg);
}
.s2 .board { border-color: #B84228; }
.s3 .board { border-color: #17553E; }
.s4 .board { border-color: #552B85; }
.board .b-av {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: linear-gradient(140deg, #cfc9e8, #8c81c9);
}
.s2 .board .b-av { background: linear-gradient(140deg, #e8cfc9, #c98c81); }
.s3 .board .b-av { background: linear-gradient(140deg, #c9e8d8, #81c9a4); }
.s4 .board .b-av { background: linear-gradient(140deg, #e0c9e8, #a481c9); }
.board .b-name {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #1E3AC4;
}
.s2 .board .b-name { color: #B84228; }
.s3 .board .b-name { color: #17553E; }
.s4 .board .b-name { color: #552B85; }
.board .b-handle { text-align: center; font-size: 12.5px; color: var(--sub); margin-bottom: 18px; }
.board .b-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 11px;
  font-size: 13px;
  font-weight: 700;
}
.board .b-block.fill { background: var(--ink); color: #fff; }
.board .b-block.accent { background: var(--purple); border-color: var(--purple); color: #fff; }
.s2 .board .b-block.accent { background: #B84228; border-color: #B84228; }
.s3 .board .b-block.accent { background: #17553E; border-color: #17553E; }
.s4 .board .b-block.accent { background: #552B85; border-color: #552B85; }

/* floating status chips */
.chip {
  position: absolute;
  z-index: 3;
  background: #fff;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  white-space: nowrap;
}
.chip.c-a { top: 14%;    left: 4%;  }
.chip.c-b { top: 46%;    right: 3%; }
.chip.c-c { bottom: 22%; left: 6%;  }

.shot-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: background .3s, width .3s;
}
.shot-dots span.on { background: #fff; width: 22px; border-radius: 999px; }

/* ---------- Panels -------------------------------------------------------- */
/* Inline SVG illustrations scale with their column. */
.vis-svg { display: block; width: 100%; height: auto; max-width: 540px; margin: 0 auto; }

/* Mirrored panel: reverses column order without touching source order, so
   the copy still reads before the visual for screen readers. */
.panel-grid.reverse { direction: rtl; }
.panel-grid.reverse > * { direction: ltr; }

/* income chart card + its overlapping payout badge */
.income-visual { position: relative; }
.payout-float {
  position: absolute;
  right: -14px;
  top: 34%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 22px 45px rgba(0, 0, 0, .3);
  transform: rotate(2deg);
}

/* ---------- Niche accordion (brands) -------------------------------------- */
.niche-row { display: flex; gap: 10px; height: 520px; }
.n-item {
  flex: 0 0 74px;
  position: relative;
  display: flex;
  overflow: hidden;
  background: #fff;
  border-radius: 22px;
  cursor: pointer;
  transition: flex .5s cubic-bezier(.65, .02, .25, 1);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(129, 41, 217, .15);
}
/* let clicks land on .n-item itself, never a child */
.n-item * { pointer-events: none; }
.n-item .n-vert {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: flex-end;
  margin: 0 auto 30px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  white-space: nowrap;
}
.n-item .n-open { display: none; flex-direction: column; width: 100%; }
.n-photo {
  flex: 1;
  min-height: 0;
  width: calc(100% - 28px);
  margin: 14px 14px 0;
  border-radius: 16px;
  object-fit: cover;
  background: var(--grey);
}
.n-item.open { flex: 1 1 auto; }
.n-item.open .n-vert { display: none; }
.n-item.open .n-open { display: flex; }

/* ---------- FAQ ----------------------------------------------------------- */
.faq details {
  background: #fff;
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* Chevron marker, drawn from two borders rather than a glyph so it renders
   identically everywhere and can rotate through the open/closed states. */
.faq summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -4px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  opacity: .5;
  transform: rotate(45deg);
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.faq details p { margin-top: 16px; font-size: 15px; line-height: 1.65; color: var(--sub); }

/* ---------- Footer -------------------------------------------------------- */
.fc-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background .25s, transform .25s;
}
.fc-social a:hover { background: #fff; transform: translateY(-3px); }
.fc-social svg path { transition: fill .25s; }
.fc-social a:hover svg path { fill: var(--navy); }

/* ---------- Legal pages (terms / privacy) --------------------------------- */
.legal h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(36px, 6vw, 62px);
  letter-spacing: -.035em;
  line-height: 1.05;
  color: #1F2233;
  margin-bottom: 24px;
}
.legal .eff { font-weight: 700; font-size: 16px; color: #1F2233; margin-bottom: 26px; }
.legal h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -.01em;
  color: #1F2233;
  margin: 38px 0 20px;
}
.legal p { font-size: 16px; line-height: 1.62; color: #2B2E3D; margin-bottom: 22px; }
.legal ul { margin: 0 0 22px 22px; }
.legal li { font-size: 16px; line-height: 1.62; color: #2B2E3D; margin-bottom: 9px; list-style: disc; }
.legal strong { color: #1F2233; font-weight: 600; }
.legal a { color: var(--purple); }

/* ---------- Responsive tweaks the utilities don't cover ------------------- */
@media (max-width: 900px) {
  /* carousel slides side-by-side; JS switches to translateX to match */
  .shot-track { flex-direction: row; }
  .shot-slide { min-width: 100%; min-height: auto; height: 100%; }
  .shot-viewport, .shot-dots { max-width: 100%; margin-left: 0; }
  .shot-dots span { background: rgba(255, 255, 255, .45); }

  /* the board scales with the viewport instead of a fixed 72px avatar etc. */
  .board { width: 52%; padding: 3.5% 3% 4.5%; border-width: 6px; border-radius: 20px; }
  .board .b-av { width: 22%; height: auto; aspect-ratio: 1 / 1; margin-bottom: 5%; }
  .board .b-name { font-size: clamp(11px, 3.2vw, 16px); }
  .board .b-handle { font-size: clamp(8px, 2.2vw, 11px); margin-bottom: 6%; }
  .board .b-block {
    font-size: clamp(8px, 2.2vw, 11.5px);
    padding: 4% 5%;
    margin-bottom: 3.5%;
    border-radius: 9px;
    border-width: 1.5px;
  }
  .chip { font-size: clamp(8px, 2.4vw, 12px); padding: 2% 3.5%; }
  .shot-caption { font-size: clamp(10px, 2.8vw, 13.5px); padding: 4% 6%; }

  .panel-grid.reverse { direction: ltr; }

  /* accordion stacks and grows downward instead of sideways */
  .niche-row { flex-direction: column; height: auto; }
  .n-item { flex: none; }
  .n-item .n-vert {
    writing-mode: horizontal-tb;
    transform: none;
    align-self: center;
    margin: 22px;
  }
  .n-item.open { min-height: 380px; }

  .payout-float { right: 0; }
}