/* ================================================================
   SHIFT - Onboarding site (v2) - "6 Steps" sheet
   ================================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--surface-app);
  color: var(--fg-default);
  font-family: var(--font-body);
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
button { font-family: inherit; border: 0; cursor: pointer; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Top nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  mix-blend-mode: difference;
  color: #fff;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-wordmark { height: 18px; display: flex; }
.nav-wordmark img { height: 100%; filter: invert(1); }
.nav-right {
  font: var(--text-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------- Dot rail (simple, right side) ---------- */
.rail {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
  mix-blend-mode: difference;
  color: #fff;
}
.rail-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  opacity: 0.5;
  cursor: pointer;
  transition: all 200ms ease-out;
  position: relative;
}
.rail-dot:hover { opacity: 1; }
.rail-dot.active {
  background: var(--shift-orange);
  border-color: var(--shift-orange);
  opacity: 1;
  transform: scale(1.2);
}
.rail-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font: var(--text-label);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 150ms;
  pointer-events: none;
}
.rail-dot:hover::after { opacity: 1; }
@media (max-width: 900px) { .rail { display: none; } }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 680px;
  width: 100%;
  overflow: hidden;
  background: #000;
  color: #fff;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.85) 100%);
}

/* Floating splash-screen phone on the right side of the hero */
.hero-phone {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%) rotate(8deg);
  width: clamp(240px, 26vw, 380px);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45))
          drop-shadow(0 10px 20px rgba(255, 83, 33, 0.18));
  animation: hero-phone-float 6s ease-in-out infinite;
}
.hero-phone img {
  width: 100%;
  height: auto;
  display: block;
  transform: scaleX(-1);
}
@keyframes hero-phone-float {
  0%, 100% { transform: translateY(-50%) rotate(8deg); }
  50%      { transform: translateY(calc(-50% - 12px)) rotate(7deg); }
}
@media (max-width: 1024px) {
  .hero-phone {
    right: 4vw;
    width: clamp(180px, 30vw, 260px);
    top: 22%;
    transform: translateY(0) rotate(10deg);
    animation: hero-phone-float-sm 6s ease-in-out infinite;
  }
  @keyframes hero-phone-float-sm {
    0%, 100% { transform: translateY(0) rotate(10deg); }
    50%      { transform: translateY(-10px) rotate(8deg); }
  }
}
@media (max-width: 640px) {
  .hero-phone {
    right: 20px;
    top: auto;
    bottom: 32%;
    width: 160px;
    opacity: 0.85;
  }
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 96px 96px;
  z-index: 2;
}
@media (max-width: 1024px) { .hero-content { padding: 0 32px 64px; } }
@media (max-width: 640px)  { .hero-content { padding: 0 20px 48px; } }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 24px;
  opacity: 0.9;
}
.tag-dot { width: 6px; height: 6px; background: var(--shift-orange); border-radius: 50%; display: inline-block; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 148px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  max-width: 14ch;
  text-wrap: balance;
}
.hero-title em { font-style: normal; color: var(--shift-orange); }
.hero-sub {
  font-size: 20px;
  line-height: 1.4;
  max-width: 44ch;
  margin-top: 28px;
  opacity: 0.85;
}
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  font: var(--text-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hero-scroll-cue::after {
  content: "";
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  animation: scrollCue 2s ease-in-out infinite;
}

/* === Collage Hero (overrides single-video hero) === */
.hero.hero-collage {
  height: 200vh;
  min-height: auto;
  overflow: visible;
}
.hero-collage-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.hero-collage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
}
.hero-collage-cell {
  position: relative;
  overflow: hidden;
  background: #111;
}
.hero-collage-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero.hero-collage .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero.hero-collage .hero-content {
  z-index: 3;
  transition: opacity 0.15s ease;
}
.hero.hero-collage .hero-scroll-cue {
  z-index: 4;
  transition: opacity 0.15s ease;
}
@media (max-width: 640px) {
  .hero-collage-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }
}
@keyframes scrollCue {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; }
  50%      { transform: scaleY(1); }
}

/* ================================================================
   INTRO - "Here's what to do."
   ================================================================ */
.intro {
  padding: 120px 32px 60px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.intro-tag {
  font: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shift-orange);
  margin-bottom: 20px;
}
.intro h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.intro p {
  font-size: 20px;
  line-height: 1.45;
  color: var(--fg-muted);
  max-width: 52ch;
  margin: 0 auto;
}

/* ================================================================
   STEPS - the vertical sheet
   ================================================================ */
.steps {
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 640px) { .steps { padding: 0 16px; } }

.step {
  background: var(--surface-card);
  border-radius: 32px;
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: center;
  box-shadow: var(--shadow-card);
  scroll-margin-top: 80px;
}
@media (max-width: 900px) {
  .step {
    grid-template-columns: 1fr;
    padding: 40px 32px;
    gap: 20px;
  }
}
@media (max-width: 640px) {
  .step { padding: 32px 24px; border-radius: 24px; gap: 16px; }
}

.step-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 200px;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--shift-orange);
  font-feature-settings: "tnum";
}
@media (max-width: 900px) { .step-num { font-size: 120px; } }
@media (max-width: 640px) { .step-num { font-size: 80px; } }

.step-body { min-width: 0; }
.step-verb {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.step-desc {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
  margin-bottom: 24px;
}
.step-desc strong { color: var(--fg-default); font-weight: 600; }

.step-media {
  margin-top: 8px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-sunken);
}
.step-media img { width: 100%; display: block; }

/* Step 1 photo */
.step-photo {
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, #F3EEE8 0%, #E8DFD6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.step-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Step 2 - download button */
.download-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  /* the QR beside the button is the taller item; without this the button
     stretches to match it and turns into a 150px slab */
  align-items: center;
}
.download-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-chip);
}
.download-qr img { display: block; width: 132px; height: 132px; }
.download-qr span {
  /* capped at the width of the code so the caption wraps instead of stretching
     the card sideways — the four languages here need one to three lines */
  max-width: 132px;
  font: var(--text-label);
  color: var(--fg-muted);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
/* Nobody scans a code with the phone that is showing it. */
@media (max-width: 640px) { .download-qr { display: none; } }
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: var(--ink-1);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--r-chip);
  font: var(--text-body-md);
  transition: all 200ms ease-out;
  min-width: 220px;
}
.download-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-cta); }
.download-btn.placeholder { background: var(--ink-3); opacity: 0.7; cursor: not-allowed; }
.download-btn.placeholder:hover { transform: none; box-shadow: none; }
.download-btn .store-icon { width: 28px; height: 28px; flex-shrink: 0; }
.download-btn .store-small { font-size: 11px; opacity: 0.7; letter-spacing: 0.1em; text-transform: uppercase; display: block; }
.download-btn .store-big { font-size: 17px; font-weight: 600; display: block; margin-top: 1px; }
.placeholder-tag {
  display: inline-block;
  font: var(--text-label);
  color: var(--fg-muted);
  margin-top: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Step 1 platform sections (iOS / Android) */
.platform-blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 8px;
}
.platform-block + .platform-block {
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.platform-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--shift-orange);
  margin-bottom: 14px;
  padding: 6px 14px;
  background: rgba(255, 83, 33, 0.08);
  border-radius: 999px;
}
.platform-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.platform-block .step-desc {
  margin-bottom: 18px;
}

/* Step 3 & 5 screenshot thumbnail */
.step-screenshot {
  max-width: 180px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-pop);
  border: 6px solid #1a1a1a;
}
.step-screenshot img { width: 100%; display: block; }

/* ================================================================
   STEP 2 - Substeps
   ================================================================ */
.substeps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.substeps-grid.substeps-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .substeps-grid.substeps-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) { .substeps-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .substeps-grid.substeps-4 { grid-template-columns: 1fr; }
}
.substep {
  background: var(--surface-sunken);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.substep-media {
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #F3EEE8 0%, #E8DFD6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.substep-media img { width: 100%; height: 100%; object-fit: cover; }
.substep-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.substep.substep-b .substep-media video { object-position: center 65%; }
.substep.substep-d .substep-media video { object-position: center 55%; }

.step-video-wrap {
  max-width: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-pop);
  aspect-ratio: 9/16;
}
.step-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.substep-placeholder {
  color: var(--fg-muted);
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  border: 1.5px dashed var(--ink-9);
  border-radius: 8px;
  margin: 16px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.substep-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--shift-orange);
  letter-spacing: -0.01em;
}
.substep-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.substep-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ================================================================
   STEP 4 - Record (good/bad reel)
   The one heavy step.
   ================================================================ */
.step.step-record {
  grid-template-columns: 1fr;
  padding: 56px 64px;
}
@media (max-width: 640px) { .step.step-record { padding: 40px 24px; } }

.step-record-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .step-record-head { grid-template-columns: 1fr; gap: 12px; align-items: start; }
}

.rules-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
  margin-bottom: 48px;
}
@media (max-width: 640px) { .rules-row { grid-template-columns: 1fr; } }
.rule {
  background: var(--surface-sunken);
  border-radius: 20px;
  padding: 24px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.rule-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  line-height: 0.8;
  color: var(--shift-orange);
  flex-shrink: 0;
  font-feature-settings: "tnum";
}
.rule-text h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.rule-text p { font-size: 15px; color: var(--fg-muted); line-height: 1.45; }

.reel-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.reel-heading .reel-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  font: var(--text-label);
  font-weight: 600;
}
.reel-heading.good .reel-pill { background: var(--success-soft); color: var(--success); }
.reel-heading.bad  .reel-pill { background: var(--danger-soft);  color: var(--danger); }
.reel-heading .icon { width: 16px; height: 16px; }

.reel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 36px;
}
@media (max-width: 640px) { .reel-grid { grid-template-columns: 1fr 1fr; } }
.reel-clip {
  position: relative;
  aspect-ratio: 4/3;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}
.reel-clip video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.reel-clip .clip-label {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  border-radius: 100px;
  font: var(--text-label);
  font-weight: 600;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reel-clip .clip-label.good { background: var(--success); }
.reel-clip .clip-label.bad  { background: var(--danger);  }
.reel-clip .clip-caption {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  font-weight: 500;
}
.reel-clip.placeholder-clip {
  background:
    repeating-linear-gradient(45deg, #1a1a1a 0 8px, #232323 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 12px;
  text-align: center;
  padding: 16px;
}

/* ================================================================
   POV Collage
   ================================================================ */
.collage-section {
  max-width: 1440px;
  margin: 140px auto 0;
  padding: 0 32px;
}
.collage-head {
  max-width: 700px;
  margin-bottom: 48px;
}
.collage-head .tag {
  font: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shift-orange);
  margin-bottom: 16px;
}
.collage-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.collage-head p { font-size: 17px; color: var(--fg-muted); line-height: 1.5; max-width: 52ch; }

.collage {
  columns: 3;
  column-gap: 12px;
}
@media (max-width: 900px) { .collage { columns: 2; } }
@media (max-width: 520px) { .collage { columns: 1; } }
.collage-tile {
  display: block;
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #111;
  box-shadow: var(--shadow-card);
  transition: transform 200ms ease-out;
}
.collage-tile:hover { transform: translateY(-2px); }
.collage-tile img, .collage-tile video { width: 100%; display: block; }
.collage-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.collage-meta {
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  color: #fff;
  z-index: 2;
  font: var(--text-label);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.collage-meta .task { font-weight: 500; font-size: 13px; }
.collage-meta .loc  { opacity: 0.75; margin-top: 2px; font-size: 11px; }

/* ================================================================
   Privacy + FAQ
   ================================================================ */
.privacy-section {
  background: var(--ink-1);
  color: #fff;
  margin-top: 140px;
  padding: 120px 32px;
}
.privacy-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: flex-start;
}
@media (max-width: 900px) { .privacy-inner { grid-template-columns: 1fr; gap: 48px; } }

.privacy-tag {
  font: var(--text-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shift-orange);
  margin-bottom: 16px;
}
.privacy-claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
  text-wrap: balance;
}
.privacy-claim em { font-style: normal; color: var(--shift-orange); }
.privacy-video {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 28px;
}
.privacy-video video { width: 100%; height: 100%; object-fit: cover; }
.privacy-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.privacy-list li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 14px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
}
.privacy-list li strong { color: #fff; font-weight: 600; display: block; margin-bottom: 2px; }
.privacy-list li::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--shift-orange);
  border-radius: 50%;
  margin-top: 8px;
}

.faq-head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.faq { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 22px 0;
  cursor: pointer;
}
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.faq-plus {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  position: relative;
  transition: all 200ms ease-out;
}
.faq-plus::before, .faq-plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: #fff;
}
.faq-plus::before { width: 12px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-plus::after { width: 1.5px; height: 12px; transform: translate(-50%, -50%); transition: transform 200ms ease-out; }
.faq-item.open .faq-plus { background: var(--shift-orange); }
.faq-item.open .faq-plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}
.faq-item.open .faq-a { max-height: 400px; padding-top: 14px; }

/* Final CTA */
.final-cta {
  max-width: 1200px;
  margin: 100px auto 0;
  background: var(--shift-orange);
  color: #fff;
  border-radius: 32px;
  padding: 80px 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (max-width: 640px) { .final-cta { padding: 48px 24px; border-radius: 24px; } }
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  max-width: 14ch;
}
.final-cta p { font-size: 17px; max-width: 48ch; opacity: 0.92; }
.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--ink-0);
  padding: 18px 28px;
  border-radius: 100px;
  font: var(--text-title);
  font-weight: 600;
  margin-top: 16px;
  transition: all 200ms ease-out;
  font-size: 17px;
}
.pill-cta:hover { transform: translateY(-1px); background: var(--ink-0); color: #fff; }

.site-foot {
  padding: 40px 32px;
  background: var(--ink-1);
  color: rgba(255,255,255,0.5);
  font: var(--text-meta);
  text-align: center;
}

/* ================================================================
   Tweaks panel
   ================================================================ */
.tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 100;
  background: var(--ink-1);
  color: #fff;
  padding: 20px;
  border-radius: 24px;
  box-shadow: var(--shadow-cta);
  width: 280px;
  display: none;
}
.tweaks-panel.open { display: block; }
.tweaks-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 16px;
}
.tweak-row { margin-bottom: 14px; }
.tweak-row:last-child { margin-bottom: 0; }
.tweak-row label {
  font: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: block;
  margin-bottom: 8px;
}
.tweak-options {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  padding: 3px;
  border-radius: 100px;
}
.tweak-options button {
  flex: 1;
  padding: 6px 8px;
  border-radius: 100px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  transition: all 150ms ease-out;
}
.tweak-options button.active {
  background: var(--shift-orange);
  color: #fff;
}


/* ================================================================
   ABOUT YOUR SCORE - concept break between Step 4 and Step 5.
   No payment hook. Explains what the score is + what moves it.
   ================================================================ */
.score-explainer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 32px;
}
@media (max-width: 640px) { .score-explainer { padding: 24px 20px 24px; } }

.score-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shift-orange);
  margin-bottom: 18px;
}
.score-kicker-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--shift-orange);
  box-shadow: 0 0 0 4px rgba(255, 83, 33, 0.18);
}

.score-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  max-width: 18ch;
}

.score-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: 56ch;
  margin-bottom: 40px;
}

/* -------- App-preview block: phone + short explainer -------- */
.score-preview {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  background: var(--surface-card);
  border-radius: 28px;
  padding: 40px 48px;
  margin-bottom: 56px;
  align-items: center;
}
@media (max-width: 820px) {
  .score-preview { grid-template-columns: 1fr; padding: 28px 24px; gap: 28px; }
}
.score-preview-phone {
  aspect-ratio: 9/19.5;
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  background: #f4f4f4;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.25),
    0 24px 48px rgba(0,0,0,0.32);
}
.score-preview-phone img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.score-preview-kicker {
  font: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shift-orange);
  margin-bottom: 14px;
  font-size: 12px;
}
.score-preview-copy h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  max-width: 22ch;
}
.score-preview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.score-preview-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.score-chip {
  font-family: var(--font-display);
  font-weight: 500;
  font-feature-settings: "tnum";
  font-size: 15px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--surface-sunken);
  text-align: center;
  color: var(--fg-default);
  letter-spacing: -0.01em;
}
.score-chip-good { background: rgba(34, 197, 94, 0.16); color: #7bd18e; }
.score-chip-neutral { background: var(--surface-sunken); color: var(--fg-muted); }

/* -------- Factors header -------- */
.score-factors-head {
  margin-bottom: 22px;
}
.score-factors-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 8px;
}
.score-factors-head p {
  font-size: 17px;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* -------- Two columns: boosts vs drags it down -------- */
.score-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 820px) {
  .score-columns { grid-template-columns: 1fr; }
}

.score-col {
  background: var(--surface-card);
  border-radius: 24px;
  padding: 28px;
  border-top: 3px solid transparent;
}
.score-col-good { border-top-color: #3ecf6a; }
.score-col-bad  { border-top-color: var(--danger); }

.score-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.score-col-good .score-col-head { color: #3ecf6a; }
.score-col-bad  .score-col-head { color: var(--danger); }
.score-col-icon { width: 22px; height: 22px; flex: 0 0 auto; }

.score-tiles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.score-tile {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px;
  background: var(--surface-sunken);
  border-radius: 14px;
}
.score-tile-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.score-tile-icon svg { width: 22px; height: 22px; }
.score-tile-icon-good {
  background: rgba(62, 207, 106, 0.14);
  color: #3ecf6a;
}
.score-tile-icon-bad {
  background: rgba(239, 68, 68, 0.14);
  color: #f77;
}
.score-tile h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.score-tile p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-muted);
  margin: 0;
}

/* ================================================================
   STEP 3 - Sign in + partner code (3-phone flow)
   ================================================================ */
.step.step-signin {
  grid-template-columns: 1fr;
  padding: 56px 64px;
}
@media (max-width: 640px) { .step.step-signin { padding: 40px 24px; } }

.signin-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 40px;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .signin-flow {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .signin-arrow { display: none; }
}

.signin-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  background: var(--surface-sunken);
  border-radius: 20px;
  position: relative;
}
.signin-card-num {
  position: absolute;
  top: -12px; left: 20px;
  width: 32px; height: 32px;
  background: var(--shift-orange);
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  font-feature-settings: "tnum";
  z-index: 2;
}
.signin-phone {
  aspect-ratio: 9/19.5;
  border-radius: 24px;
  overflow: hidden;
  background: #f4f4f4;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.25),
    0 20px 40px rgba(0,0,0,0.28);
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
}
.signin-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.signin-caption {
  display: grid;
  gap: 4px;
  padding: 2px 4px;
  text-align: center;
}
.signin-caption strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--fg-default);
}
.signin-caption span {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.45;
}
.signin-caption em {
  font-style: normal;
  font-family: var(--font-mono, var(--font-body));
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  color: var(--fg-default);
}

.signin-arrow {
  color: var(--shift-orange);
  display: grid;
  place-items: center;
  align-self: center;
  padding-top: 140px;
}
.signin-arrow svg { width: 40px; height: 24px; }

.signin-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--shift-orange-soft);
  color: #1a0800;
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 12px;
}
.signin-note .icon {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  color: var(--shift-orange);
  margin-top: 1px;
}
.signin-note strong { font-weight: 600; }

/* The code as it appears mid-sentence: same mono chip treatment everywhere the
   {code} placeholder lands, so it reads as a literal to type, not as emphasis. */
.step-desc em,
.signin-note em {
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--ink-a05);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  color: var(--fg-default);
}
.signin-note em { background: rgba(255,255,255,0.55); }

/* -------- Partner code card (Step 3) -------- */
.partner-code {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px 20px;
  margin-top: 32px;
  padding: 22px 24px;
  background: var(--ink-1);
  border-radius: 20px;
}
.partner-code-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.partner-code-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.partner-code-value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.05;
  letter-spacing: 0.16em;
  color: #fff;
  /* The code is read off the screen and retyped into the app, so let a visitor
     select it by hand when the copy button is not an option. */
  user-select: all;
  -webkit-user-select: all;
  word-break: break-all;
}
.partner-code-copy {
  justify-self: end;
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--shift-orange);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background .15s ease-out, transform .1s ease-out;
}
.partner-code-copy:hover { background: var(--shift-orange-bright); }
.partner-code-copy:active { transform: scale(.97); }
.partner-code-copy.copied { background: var(--success, #1a8f3c); }
.partner-code-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.6);
}
@media (max-width: 640px) {
  .partner-code {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .partner-code-copy { justify-self: stretch; text-align: center; }
}


/* -------- Illustrated rules (Step 4 A/B) -------- */
.rule.rule-illustrated {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 0;
  background: var(--surface-sunken);
  border-radius: 20px;
  overflow: hidden;
}
.rule-media {
  aspect-ratio: 16/9;
  width: 100%;
  background: #000;
  overflow: hidden;
}
.rule-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.rule-media-diagram {
  background: #f4efe7;
}
.rule-media-diagram img {
  object-fit: contain;
  padding: 8px;
}
.rule-head {
  display: flex;
  gap: 16px;
  padding: 24px 28px 26px;
  align-items: flex-start;
}
.rule.rule-illustrated .rule-num {
  /* inherit existing rule-num styles, ensure proper sizing */
  flex: 0 0 auto;
}


/* =========================================================
   PEOPLE REEL - 3-up horizontal carousel of real sessions
   ========================================================= */
.reel-section {
  max-width: 1280px;
  margin: 96px auto 64px;
  padding: 0 24px;
}
.reel-section-head {
  max-width: 680px;
  margin: 0 auto 36px;
  text-align: center;
}
.reel-section-head .tag {
  display: inline-block;
  font: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shift-orange);
  margin-bottom: 14px;
  font-size: 12px;
}
.reel-section-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.reel-section-head p {
  font-size: 17px;
  color: var(--fg-muted);
  line-height: 1.5;
}

.people-reel-wrap {
  position: relative;
}
.people-reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 8px 4px;
}
.people-reel::-webkit-scrollbar { display: none; }

@media (max-width: 1100px) {
  .people-reel {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
}
@media (max-width: 820px) {
  .people-reel {
    grid-auto-columns: 85%;
  }
}

.people-reel-card {
  margin: 0;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 9/16;
  scroll-snap-align: start;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}
.people-reel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px rgba(0,0,0,0.4);
}
.people-reel-card:focus-visible {
  outline: 2px solid var(--shift-orange);
  outline-offset: 4px;
}
.people-reel-card.active {
  box-shadow: 0 0 0 3px var(--shift-orange), 0 24px 50px rgba(0,0,0,0.4);
}
.people-reel-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.people-reel-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 20px 18px;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
}
.people-reel-card .task {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.people-reel-card .loc {
  font-size: 13px;
  opacity: 0.8;
  letter-spacing: 0.03em;
}

.reel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: #111;
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  transition: transform 150ms ease-out, background 150ms ease-out;
  z-index: 2;
}
.reel-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.reel-nav svg { width: 22px; height: 22px; }
.reel-nav.prev { left: -20px; }
.reel-nav.next { right: -20px; }
@media (max-width: 820px) {
  .reel-nav.prev { left: 4px; }
  .reel-nav.next { right: 4px; }
}

/* ---------- Language switcher ---------- */
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 1;
}
.nav-home {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font: var(--text-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.nav-home:hover {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.6);
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.lang-btn {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 4px 7px;
  cursor: pointer;
  color: #fff;
  font: var(--text-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.lang-btn:hover { opacity: 0.8; }
.lang-btn.active { opacity: 1; }
.lang-btn.active::after {
  content: "";
  display: block;
  height: 1.5px;
  margin-top: 3px;
  background: currentColor;
}

/* ── "Nie masz jeszcze opaski?" ─────────────────────────────────────────────
   Sits at the top of step 2, immediately before "unpack the headstrap" — the
   line where somebody without the hardware discovers they are stuck. Two ways
   out, split the same way the shop section on the site does: a private person
   buys, a business does not.

   Tinted rather than white so it reads as an aside to the instructions and not
   as the next instruction. */
.nostrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
  margin: 0 0 28px;
  padding: 20px 22px;
  border: 1px solid var(--shift-orange);
  border-radius: 16px;
  background: var(--shift-orange-soft);
}

.nostrap-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--surface-black);
}

.nostrap-line {
  margin: 0 0 6px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.72);
}
.nostrap-line:last-child { margin-bottom: 0; }
.nostrap-line strong { color: var(--surface-black); }

.nostrap-actions { display: grid; gap: 10px; justify-items: stretch; }

.nostrap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--surface-black);
  border-radius: 999px;
  background: transparent;
  color: var(--surface-black);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nostrap-btn:hover { background: var(--surface-black); color: var(--surface-white); }

/* Filled: buying is the path most readers of this guide are on. */
.nostrap-btn-buy {
  border-color: var(--shift-orange-bright);
  background: var(--shift-orange-bright);
  color: var(--surface-white);
}
.nostrap-btn-buy:hover { background: var(--surface-black); border-color: var(--surface-black); }
.nostrap-btn:focus-visible { outline: 2px solid var(--surface-black); outline-offset: 3px; }

.nostrap-have {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
}

@media (max-width: 720px) {
  .nostrap { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .nostrap-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nostrap-btn { transition: none; }
}

/* ── "Sprawdź, czy Twój telefon jest obsługiwany" ───────────────────────────
   Sits under the store button of the platform it belongs to. Collapsed by
   default: the Android list is 80 models, and printed in full it would bury the
   download button this step exists for. Searchable, because scanning 80 names
   for your own is the job a filter does better than an eye. */
.phones { margin-top: 14px; }

.phones-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  background: var(--surface-white);
  color: var(--surface-black);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.phones-toggle:hover { border-color: var(--shift-orange); }
.phones-toggle:focus-visible { outline: 2px solid var(--surface-black); outline-offset: 2px; }

/* the count is a fact, so it gets to look like one rather than like decoration */
.phones-count {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--shift-orange-soft);
  color: var(--shift-orange-bright);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.phones-toggle::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.5;
}
.phones-toggle.open::after { transform: rotate(-135deg) translate(-2px, -2px); }

.phones-panel {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  background: var(--surface-app);
}

.phones-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  background: var(--surface-white);
  font: inherit;
  /* 16px, not 14: iOS Safari auto-zooms the whole page when a focused input is
     under 16px, so tapping this box jerked the layout and re-scaled it. */
  font-size: 16px;
}
.phones-search:focus-visible { outline: 2px solid var(--shift-orange); outline-offset: 1px; }

/* Capped and scrollable. 80 names in one column ran to 2326px on a phone.
   45vh keeps the download button above it reachable; 420px stops the panel
   dominating a desktop screen too. */
.phones-scroll {
  max-height: min(45vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-top: 4px;
  padding-right: 4px;
}

.phones-hits {
  margin: 10px 0 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(0, 0, 0, 0.5);
}

.phones-group { margin-top: 14px; }
.phones-group:first-child { margin-top: 8px; }
.phones-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}
.phones-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.8);
}

.phones-empty,
/* Sits between the toggle and the collapsed panel, so it is readable without
   opening anything. For Apple this line is the actual eligibility rule and the
   list below it is only a way to double-check, which is why it is weighted
   heavier than .phones-note and carries the brand colour. */
.phones-rule {
  margin: 8px 0 0;
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--shift-orange-soft);
  color: var(--surface-black);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.phones-note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
}
.phones-empty { color: var(--surface-black); font-weight: 600; }

/* -------- Inline "ask the assistant" trigger --------
   Sits mid-sentence inside translated strings (phones.note, step3.note), so it
   is styled as a link rather than as a control. It is a <button> because it
   opens the in-page chat widget instead of navigating; a delegated listener in
   sections.jsx catches [data-shift-chat]. The global `button { border: 0 }`
   reset is why the underline has to be re-declared here. */
.chat-link {
  font: inherit;
  color: inherit;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  line-height: inherit;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 150ms ease-out;
}
.chat-link:hover,
.chat-link:focus-visible { opacity: 1; }

/* phones.note and step3.note now carry <strong> for the definitive answer that
   opens each one, so the weight has to read against their own colour. */
.phones-note strong,
.phones-empty strong { color: var(--surface-black); }

@media (max-width: 560px) {
  .phones-list { grid-template-columns: 1fr; }
}

/* -------- Payout section (how the money reaches you) --------
   Mirrors .score-explainer's frame so it reads as another chapter of the guide
   rather than a bolted-on notice. */
.payout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 32px;
}
@media (max-width: 640px) { .payout { padding: 24px 20px 24px; } }

.payout-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shift-orange);
  margin-bottom: 18px;
}
.payout-kicker-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--shift-orange);
  box-shadow: 0 0 0 4px rgba(255, 83, 33, 0.18);
}

.payout-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.payout-lede {
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin-bottom: 32px;
}
.payout-lede strong { color: var(--fg-default); font-weight: 600; }

.payout-card {
  background: var(--surface-sunken);
  border-radius: 24px;
  padding: 28px 32px;
}
@media (max-width: 640px) {
  .payout-card { padding: 22px 20px; }
  /* Wrapped, a right-aligned mark sits alone under the label and reads as a
     stray; send both to the left edge so they stack as one lockup. */
  .payout-card-head { justify-content: flex-start; gap: 10px 14px; }
  .payout-mark { object-position: left center; }
}

/* Eyebrow left, partner mark right, hairline under both. Pushed apart rather
   than left-bunched: bunched, the pair floated in the corner of a 1100px card
   with the rest of the row empty, which read as an accident. Held to the two
   edges it reads as a deliberate lockup, and the hairline has something to
   span. */
.payout-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ink-a10);
}
.payout-card-cap {
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  /* Small caps sit high in their own box; nudge them onto the mark's centre. */
  transform: translateY(0.5px);
}
/* Height-driven, width auto — the artwork's proportions are unknown here, so
   fixing the height is the only way to keep any partner mark optically the same
   size whatever shape it turns out to be. object-fit guards against a file that
   ships with its own padding. */
.payout-mark {
  height: 26px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: right center;
  display: block;
}
/* Missing-file fallback. Matched to the mark's height so the row keeps its
   shape when the real file lands, and dropped from 21px display type to body
   type at the caption's weight — at 21px it read as a second heading competing
   with the section title. It must look unstyled, not like a wordmark we drew.
   See docs/partner-logos.md. */
.payout-mark-text {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: var(--fg-default);
}

.payout-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.payout-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.payout-list strong { color: var(--fg-default); font-weight: 600; }
.payout-tick {
  width: 22px; height: 22px;
  color: var(--shift-orange);
  margin-top: 1px;
}

/* Sits inside the card under the tick list, separated by a hairline. Given
   real weight rather than fine-print treatment: it changes what the payout
   figure means, and a deduction discovered later is the surprise this whole
   section exists to prevent. */
.payout-fee {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-a10);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-default);
}
.payout-fee strong { font-weight: 600; }

/* The fee turned into numbers. Inside the card, below the fee sentence it
   illustrates. A table and not prose: the point is the third column falling
   from 58% to 7,8%, and that only lands when the figures sit under each other. */
.payout-scale {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-a10);
}
.payout-scale-head {
  font: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
.payout-scale-table {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.payout-scale-table th {
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  color: var(--fg-subtle);
  padding: 0 16px 8px 0;
}
.payout-scale-table th:last-child,
.payout-scale-table td:last-child { padding-right: 0; text-align: right; }
.payout-scale-table td {
  padding: 7px 16px 7px 0;
  border-top: 1px solid var(--ink-a05);
  color: var(--fg-muted);
}
.payout-scale-table td:first-child { color: var(--fg-default); font-weight: 500; }
/* The share column is the whole argument, so it carries the emphasis. Accent
   back on the FIRST row: at a 5-hour threshold the smallest allowed settlement
   still meets the 29 zł floor, so 11,6% is the number the reader should notice
   and the one that makes the case for a bigger settlement. */
.payout-scale-table td:last-child { font-weight: 600; color: var(--fg-default); }
.payout-scale-table tbody tr:first-child td:last-child { color: var(--shift-orange); }
.payout-scale-note {
  max-width: 62ch;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.payout-scale-note strong { color: var(--fg-default); font-weight: 600; }

.payout-note {
  max-width: 70ch;
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-subtle);
}