/* Landing page - Creator Shout */

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(7,7,26,.62); border-bottom: 1px solid rgba(139,92,246,.16); }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem;
  text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--gradient);
  display: grid; place-items: center; font-size: 1.25rem;
  box-shadow: 0 4px 18px rgba(124,58,237,.55); }
.logo-img { height: 48px; width: auto; display: block; }
.logo-img-lg { height: 72px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { color: #fff; text-decoration: none; font-weight: 600;
  font-size: .95rem; transition: color .2s; }
.nav-links a:not(.btn):hover { color: var(--purple-light); }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 168px 0 90px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 800; margin-bottom: 22px; text-align: center; }
.hero h1 .greed { position: relative; white-space: nowrap; }
.hero h1 .greed-line { display: block; margin-top: 6px; }
.hero-sub { font-size: 1.16rem; color: #fff; margin-bottom: 36px; max-width: 560px;
  text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.hero-sub .caps { font-weight: 700; background: var(--gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.hero-proof { display: flex; gap: 26px; flex-wrap: wrap; }
.proof { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .92rem; }
.proof b { color: var(--text); font-size: 1.15rem; font-family: var(--font-head); }

/* Floating 3D phone mockup */
.phone-stage { perspective: 1400px; display: grid; place-items: center; min-height: 480px; }
.phone { width: 290px; height: 590px; border-radius: 44px; position: relative;
  background: linear-gradient(160deg, #23234d, #0e0e28 60%, #08081c);
  border: 1px solid rgba(167,139,250,.55);
  box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 80px rgba(139,92,246,.35),
    inset 0 2px 2px rgba(255,255,255,.18), inset 0 -2px 6px rgba(0,0,0,.5);
  transform: rotateY(-24deg) rotateX(7deg);
  transform-style: preserve-3d;
  animation: floaty 6s ease-in-out infinite;
  transition: transform .3s ease-out;
}
/* Phone side edge: gives the device real thickness so it reads as 3D, not a sticker.
   Full-height with the same corner radius as the phone so the top-right and
   bottom-right corners connect cleanly instead of notching. */
.phone::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: -14px; width: 28px;
  border-radius: 0 44px 44px 0;
  background: linear-gradient(90deg, #34346a 0%, #1a1a3f 45%, #0a0a20 100%);
  border: 1px solid rgba(167,139,250,.35); border-left: none;
  transform: translateZ(-10px);
  box-shadow: 8px 0 24px rgba(0,0,0,.5);
}
/* Top edge highlight for a machined-metal rim */
.phone::before {
  content: ''; position: absolute; inset: 0; border-radius: 44px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 28%);
  z-index: 2;
}
@keyframes floaty { 0%,100% { translate: 0 0; } 50% { translate: 0 -18px; } }
.phone-screen { position: absolute; inset: 12px; border-radius: 34px; overflow: hidden;
  background: linear-gradient(180deg, #141432, #0a0a20); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 10px; }
.mini-slot { border-radius: 12px; padding: 10px; text-align: center; font-family: var(--font-head);
  font-weight: 800; font-size: .8rem; letter-spacing: .08em; }
.mini-slot.open { background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(59,130,246,.35));
  border: 1.5px dashed rgba(167,139,250,.8); color: #d9ccff;
  animation: shimmer 2.4s linear infinite; background-size: 200% 200%; }
@keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.mini-slot.taken { background: var(--gradient); color: #fff; font-size: .54rem; letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(124,58,237,.5);
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.mini-slot.taken.glow { animation: adGlow 2.6s ease-in-out infinite; }
@keyframes adGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(124,58,237,.5), 0 0 6px rgba(139,92,246,.35); }
  50% { box-shadow: 0 4px 22px rgba(124,58,237,.85), 0 0 26px rgba(139,92,246,.85); }
}
.mini-slot.taken .ad-txt { color: #fff; font-weight: 800; white-space: nowrap;
  text-shadow: 0 0 10px rgba(255,255,255,.45); }
.mini-slot.taken .ad-btn { background: linear-gradient(180deg, #ffffff, #cdb9ff); color: #4c1d95;
  font-weight: 800; font-size: .48rem; letter-spacing: .06em; padding: 3px 6px;
  border-radius: 7px; white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 2px 0 #8b5cf6, 0 4px 8px rgba(0,0,0,.35); }
.mini-profile { text-align: center; padding: 6px 0; }
.mini-avatar { width: 62px; height: 62px; border-radius: 50%; margin: 0 auto 8px;
  background: var(--gradient); display: grid; place-items: center; font-size: 1.6rem;
  box-shadow: 0 0 24px rgba(139,92,246,.6); }
.mini-name { font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.mini-handle { color: var(--muted-2); font-size: .72rem; }
.mini-link { background: rgba(255,255,255,.06); border: 1px solid rgba(139,92,246,.25);
  border-radius: 12px; padding: 10px; text-align: center; font-size: .78rem; font-weight: 600; }
.mini-earn { margin-top: auto; background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.35);
  border-radius: 12px; padding: 10px; text-align: center; font-size: .75rem; color: var(--cyan); font-weight: 700; }

/* ---------- Sections ---------- */
section.block { padding: 48px 0; position: relative; scroll-margin-top: 76px; }
.center { text-align: center; }
.center .section-sub { margin: 0 auto; }

/* Section labels: header-sized white text in a purple pill (all screens) */
.center .section-label {
  display: inline-block;
  font-family: var(--font-head);
  font-size: clamp(1.615rem, 3.4vw, 2.465rem);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: rgba(139,92,246,.16);
  border: 1px solid rgba(139,92,246,.45);
  border-radius: 999px;
  padding: 10px 32px;
  margin-bottom: 18px;
  text-shadow: 0 2px 18px rgba(0,0,0,.65);
  box-shadow: 0 6px 28px rgba(139,92,246,.25), inset 0 1px 0 rgba(255,255,255,.1);
}

/* ---------- How it works: creator/advertiser tabs, each with a slideshow ---------- */
.how-tabs { display: flex; gap: 14px; justify-content: center; margin: 30px 0 26px; flex-wrap: wrap; }
.how-panel { display: none; }
.how-panel.active { display: block; animation: fadeSlide .45s ease; }
.show { position: relative; max-width: 860px; margin: 0 auto; }
.slide-stage { position: relative; overflow: hidden; touch-action: pan-y; }
.slide { position: absolute; inset: 0; opacity: 0; transform: translateX(60px) scale(.97);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.9,.3,1.2);
  pointer-events: none; display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center;
  padding: 44px 72px 44px 44px; }
.slide.active { opacity: 1; transform: none; pointer-events: auto; }
.slide.measure { position: relative !important; visibility: hidden; }
@media (max-width: 760px) {
  .slide { grid-template-columns: 1fr; text-align: center; padding: 28px 60px 24px; gap: 18px; }
  .slide-emoji { font-size: 3.2rem; }
  .slide h3 { font-size: 1.25rem; margin-bottom: 8px; }
  .slide p { font-size: .92rem; }
  .slide .step-num { font-size: .72rem; margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .nav-inner { padding: 12px 16px 14px; flex-direction: column; align-items: center; gap: 10px; }
  .logo { font-size: 1.05rem; gap: 8px; }
  .logo-mark { width: 30px; height: 30px; font-size: 1rem; border-radius: 10px; }
  .nav-links { gap: 10px; justify-content: center; flex-wrap: wrap; }
  .nav-links .btn { padding: 9px 16px; font-size: .78rem; }
}
.slide-emoji { font-size: 6rem; filter: drop-shadow(0 10px 30px rgba(139,92,246,.5));
  animation: bob 3s ease-in-out infinite; text-align: center; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
.slide h3 { font-size: 1.7rem; margin-bottom: 12px; }
.slide p { color: #fff; font-size: 1.06rem; }
.slide .step-num { font-family: var(--font-head); font-weight: 800; font-size: .8rem;
  letter-spacing: .25em; color: var(--purple-light); text-transform: uppercase; margin-bottom: 10px; display: block; }
.show-nav { display: none; }
.show-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(139,92,246,.4);
  background: rgba(139,92,246,.1); color: var(--text); font-size: 1.2rem; cursor: pointer;
  transition: all .2s; }
.show-arrow:hover { background: var(--gradient); transform: scale(1.1); }
/* side arrows: pinned to the left/right edges of the slide container */
.show-arrow.side { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; margin: 0;
  background: rgba(20,20,50,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.show-arrow.side.left { left: 10px; }
.show-arrow.side.right { right: 10px; }
.show-arrow.side:hover { transform: translateY(-50%) scale(1.12); }
.show-dots { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.show-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(139,92,246,.25);
  cursor: pointer; transition: all .25s; border: none; padding: 0; }
.show-dot.active { background: var(--gradient); transform: scale(1.35);
  box-shadow: 0 0 12px rgba(139,92,246,.7); }

/* ---------- 3D Book (fluid, centered, 2x size) ---------- */
.book-outer { display: flex; justify-content: center; width: 100%; padding: 30px 0 10px; }
.book-scene { perspective: 2200px; width: 100%; max-width: 1320px; margin: 0 auto; touch-action: pan-y; }
.book {
  --bw: min(1320px, 100%);
  position: relative;
  width: 50%;
  aspect-ratio: 660 / 920;
  transform-style: preserve-3d;
  margin: 0 auto;
}
.book.open { width: 100%; aspect-ratio: 660 / 460; }
.book-shadow { position: absolute; left: 8%; right: 8%; bottom: calc(var(--bw) * -0.0697);
  height: calc(var(--bw) * 0.0606); z-index: 0;
  background: radial-gradient(ellipse, rgba(0,0,0,.65), transparent 70%); filter: blur(6px); }
.book-back-cover { position: absolute; inset: 0; border-radius: calc(var(--bw)*0.009) calc(var(--bw)*0.027) calc(var(--bw)*0.027) calc(var(--bw)*0.009);
  background: linear-gradient(135deg, #2a1b5e, #16295e);
  box-shadow: inset 0 0 60px rgba(0,0,0,.5); }
.book-spine { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--bw) * 0.0515);
  background: linear-gradient(90deg, #3b2373, #241545);
  border-radius: calc(var(--bw)*0.009) 0 0 calc(var(--bw)*0.009);
  box-shadow: inset -4px 0 8px rgba(0,0,0,.5); z-index: 1; }
.book.open .book-spine { left: 50%; margin-left: calc(var(--bw) * -0.02575); }
.leaf { position: absolute; top: 1.5%; bottom: 1.5%; left: 50%; width: 48.5%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.35,.1,.25,1); cursor: pointer; }
.leaf.turned { transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: calc(var(--bw)*0.006) calc(var(--bw)*0.021) calc(var(--bw)*0.021) calc(var(--bw)*0.006); overflow: hidden;
  background: radial-gradient(110% 70% at 50% 0%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(105deg, #f5f1e8 0%, #efe8d8 60%, #e7dcc4 100%);
  color: #2c2340; box-shadow: inset 8px 0 18px rgba(0,0,0,.12); }
.face.back { transform: rotateY(180deg);
  border-radius: calc(var(--bw)*0.021) calc(var(--bw)*0.006) calc(var(--bw)*0.006) calc(var(--bw)*0.021);
  box-shadow: inset -8px 0 18px rgba(0,0,0,.12); }
.page-inner { padding: 2pt calc(var(--bw)*0.0576) calc(var(--bw)*0.0667); height: 100%;
  display: flex; flex-direction: column; justify-content: flex-start; position: relative; }
.page-inner.cover-inner { justify-content: flex-start; padding: calc(var(--bw)*0.0667) calc(var(--bw)*0.0576); }
.page-inner.top { justify-content: flex-start; }
.page-inner.end-inner { justify-content: center; align-items: center; }
.page-inner p { font-size: calc(var(--bw)*0.0247); line-height: 1.75; font-family: Georgia, 'Times New Roman', serif;
  color: #2b241a; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.page-num { position: absolute; bottom: calc(var(--bw)*0.0242); font-size: calc(var(--bw)*0.0182);
  color: #8a7f63; font-family: var(--font-head); }
.face.front .page-num { right: calc(var(--bw)*0.0333); } .face.back .page-num { left: calc(var(--bw)*0.0333); }
/* Cover */
.cover-face { background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(150% 130% at 50% 118%, rgba(0,0,0,.6), transparent 62%),
    linear-gradient(155deg, #472a94 0%, #2c1c6b 48%, #141b45 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 calc(var(--bw)*0.004) rgba(255,255,255,.16),
    inset 0 0 calc(var(--bw)*0.07) rgba(0,0,0,.6) !important; }
/* spine hinge shading on the cover's left edge */
.cover-face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--bw)*0.055); pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 55%, transparent);
  border-right: 1px solid rgba(255,255,255,.10); }
/* gilt frame stamped into the cover */
.cover-face::after { content: ""; position: absolute; inset: calc(var(--bw)*0.032);
  border: calc(var(--bw)*0.0032) solid rgba(216,178,106,.6); border-radius: calc(var(--bw)*0.012);
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 1px rgba(0,0,0,.4); }
.cover-inner { align-items: center; text-align: center; gap: 0; }
.cover-kicker { font-family: var(--font-head); font-size: calc(var(--bw)*0.0261); letter-spacing: .34em;
  color: var(--cyan); text-transform: uppercase; margin-bottom: calc(var(--bw)*0.0273); }
.cover-photo { width: calc(var(--bw)*0.2273); height: calc(var(--bw)*0.2273); border-radius: 50%;
  object-fit: cover; border: calc(var(--bw)*0.0061) solid rgba(255,255,255,.85);
  box-shadow: 0 0 0 calc(var(--bw)*0.0091) rgba(139,92,246,.45), 0 12px 40px rgba(0,0,0,.55);
  margin-bottom: calc(var(--bw)*0.0303); }
.cover-title { font-family: var(--font-head); font-size: calc(var(--bw)*0.0728); font-weight: 800;
  margin-bottom: calc(var(--bw)*0.0121); letter-spacing: .015em;
  background: linear-gradient(180deg, #f9ecbd 0%, #e8c877 45%, #c49a4a 75%, #f2d98d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.20)) drop-shadow(0 -1px 1px rgba(0,0,0,.55)) drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
.cover-sub { color: #c9bdf2; font-size: calc(var(--bw)*0.0357); font-style: italic; }
.click-read { position: absolute; right: calc(var(--bw)*0.0303); bottom: calc(var(--bw)*0.0273);
  font-family: var(--font-head); font-weight: 800; font-size: calc(var(--bw)*0.023); color: #ffe45e;
  text-shadow: 0 0 14px rgba(255,228,94,.8); animation: flash 1.1s steps(2) infinite; }
/* Outer cover: a true book opening in two beats. Phase 1 swings the cover edge-on
   around the closed book's spine; the spread swaps in while it's invisible;
   phase 2 lays the cover flat to the left. left/width swap instantly (masked). */
.book-cover3d { position: absolute; top: 0; bottom: 0; left: 0; width: 100%;
  transform-origin: left center; transform-style: preserve-3d; z-index: 200; cursor: pointer;
  transition: transform .45s ease-in-out, opacity .35s ease; }
.book-cover3d .face { border-radius: calc(var(--bw)*0.009) calc(var(--bw)*0.027) calc(var(--bw)*0.027) calc(var(--bw)*0.009); }
.book-cover3d.openpos { left: 50%; width: 50%; }
.book-cover3d.swing1 { transform: rotateY(-90deg); opacity: 1; }
.book-cover3d.swing2 { transform: rotateY(-165deg); opacity: 0; }
.book-cover3d.gone { visibility: hidden; }
/* Closed (portrait) cover: larger type/photo for the narrower cover */
.book.closed .cover-photo { width: calc(var(--bw)*0.32); height: calc(var(--bw)*0.32); }
.book.closed .cover-title { font-size: calc(var(--bw)*0.108); }
.book.closed .cover-sub { font-size: calc(var(--bw)*0.051); color: #d9cdf3;
  text-shadow: 0 1px 0 rgba(255,255,255,.16), 0 -1px 2px rgba(0,0,0,.6); }
.book.closed .click-read { font-size: calc(var(--bw)*0.032); }
@keyframes flash { 50% { opacity: .15; } }
.book-hint { text-align: center; color: var(--muted-2); font-size: .85rem;
  margin-top: calc(min(1320px, 100%) * 0.055); max-width: 640px; margin-left: auto; margin-right: auto; }
.book { transition: transform .5s ease; }

/* Center hero content on smaller screens */
@media (max-width: 960px) {
  .hero { text-align: center; padding: 100px 0 48px; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-cta, .hero-proof { justify-content: center; }
  .hero-cta { margin-bottom: 16px; }
  .hero-proof { gap: 14px; margin-top: 0; }
  .proof { font-size: .8rem; gap: 7px; }
  .proof b { font-size: .98rem; }
}

/* ---------- Features tabs ---------- */
.feat-quote .q-line { display: block; }
.feat-quote .sig { font-family: var(--font-sig); font-weight: 600; font-size: 1.3em;
  color: var(--text); white-space: nowrap; margin-left: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.feat-tabs { display: flex; gap: 14px; justify-content: center; margin: 40px 0 34px; flex-wrap: wrap; }
.feat-tab { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  padding: 14px 34px; border-radius: 999px; cursor: pointer; color: var(--muted);
  background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.25);
  transition: all .25s ease; }
.feat-tab.active { background: var(--gradient); color: #fff; border-color: transparent;
  box-shadow: 0 8px 30px rgba(124,58,237,.5); transform: translateY(-2px); }
.feat-panels { position: relative; max-width: 960px; margin: 0 auto; }
.feat-panel { display: none; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.feat-panel.active { display: grid; animation: fadeSlide .45s ease; }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(18px); } }
.feat { padding: 24px; }
.feat h4 { font-size: 1.02rem; margin: 12px 0 8px; }
.feat p { color: #fff; font-size: .92rem; }
.feat .icon { font-size: 1.9rem; filter: drop-shadow(0 4px 12px rgba(139,92,246,.5)); }

/* ---------- Final CTA ---------- */
.final-cta { text-align: center; padding: 55px 0 130px; }
.final-cta h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: 34px; }

/* ---------- Signup modal ---------- */
.auth-error { display: none; color: #ff8a8a; font-size: .88rem; text-align: center; margin: 12px 0 0; }
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.role-card { padding: 26px 16px; text-align: center; cursor: pointer; transition: all .22s; }
.role-card:hover { transform: translateY(-4px); border-color: var(--purple); }
.role-card.selected { border-color: var(--purple); background: var(--gradient-soft);
  box-shadow: 0 0 24px rgba(139,92,246,.35); }
.role-card .icon { font-size: 2.4rem; }
.role-card h4 { margin: 10px 0 4px; }
.role-card p { font-size: .82rem; color: var(--muted); }
.form-row { margin-bottom: 14px; }
.affil-box { background: rgba(34,211,238,.08); border: 1px dashed rgba(34,211,238,.5);
  border-radius: 12px; padding: 16px; margin: 18px 0; text-align: center; }
.affil-box code { color: var(--cyan); font-size: .95rem; word-break: break-all; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid rgba(139,92,246,.16); padding: 44px 0; text-align: center;
  color: var(--muted-2); font-size: .9rem; }
footer .tagline { font-family: var(--font-head); color: var(--muted); margin: 10px 0 4px; }

/* ---------- Desktop: hero, how-it-works, and book each fit on screen ---------- */
@media (min-width: 961px) {
  /* 1. Hero: entire top section (buttons + floating phone) above the fold */
  .hero { padding: 104px 0 24px; }
  .hero h1 { font-size: 2.5rem; margin-bottom: 18px; }
  .hero-sub { font-size: 1rem; margin-bottom: 22px; }
  .hero-cta { margin-bottom: 18px; }
  .hero-cta .btn { padding: 12px 26px; font-size: .95rem; }
  .phone-stage { min-height: 0; }
  .phone { width: 230px; height: 466px; border-radius: 36px; }
  .phone::after { border-radius: 0 36px 36px 0; }
  .phone-screen { inset: 10px; border-radius: 28px; padding: 12px 10px; gap: 7px; }
  .mini-slot { padding: 7px; font-size: .68rem; }
  .mini-slot.taken { font-size: .54rem; }
  .mini-profile { padding: 4px 0; }
  .mini-avatar { width: 46px; height: 46px; font-size: 1.2rem; margin-bottom: 6px; }
  .mini-name { font-size: .85rem; }
  .mini-handle { font-size: .64rem; }
  .mini-link { padding: 7px; font-size: .68rem; }
  .mini-earn { padding: 7px; font-size: .66rem; }

  /* 3. How it works: whole section visible without scrolling */
  #how-it-works.block { padding: 28px 0; }
  .section-title { margin-bottom: 10px; }
  .how-tabs { margin: 22px 0 20px; }
  .slide { padding: 26px 62px 26px 34px; gap: 26px; grid-template-columns: 150px 1fr; }
  .slide-emoji { font-size: 4.2rem; }
  .slide h3 { font-size: 1.35rem; margin-bottom: 8px; }
  .slide p { font-size: .95rem; }
  .slide .step-num { margin-bottom: 8px; }
  .show-dots { margin-top: 14px; }
  .show-arrow { width: 40px; height: 40px; }

  /* 4. About: book fits on screen open and closed (15% smaller) */
  #about.block { padding: 28px 0; }
  .book-scene { max-width: 612px; }
  .book-outer { padding: 12px 0 6px; }
  .book-hint { margin-top: 22px; }
}

/* Mobile: keep the hero clear of the taller stacked header.
   (Placed last so it wins over the earlier max-width:960px hero padding.) */
@media (max-width: 560px) {
  .hero { padding-top: 170px; }
}