/* ==========================================================================
   Creator Site Design · creator.css
   Source of truth: postforclaim.com production markup (Framer export).
   Every token below was read from the live page: Framer :root color tokens,
   text-style presets, per element inline styles, and the compiled class CSS.
   The handful of values sampled from bitmap assets are labeled RECONSTRUCTED.

   This is the Claim creator recruitment brand: "Get paid to post on TikTok."
   Warm cream canvas, one electric blue, black ink at measured opacities,
   Inter everything. Light mode only; the production site ships no dark mode.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Canvas and surfaces (Framer tokens, cream family) ---- */
  --canvas: #efebe5;        /* page background; token 7a8e3831, set on body   */
  --surface: #f7f2ea;       /* raised cards and panels; token ade1bce3        */
  --surface-deep: #f3ece1;  /* deeper cream; token 57df5230, rarely used      */
  --surface-tan: #e7d7c1;   /* deepest warm tan; token 5f5e3c8f, reserve      */
  --surface-cool: #f7f5f2;  /* cool off white; token a0488cff, reserve        */
  --border-warm: #ded6ca;   /* warm hairline; token bd134076                  */
  --white: #ffffff;         /* phone bezels, button labels; token f8dc39cc    */
  --black: #000000;         /* ink and preloader; token 2007957d              */

  /* ---- Ink ramp: one black at measured alphas (the site never uses
         gray hexes for UI text; hierarchy is done with opacity) ---- */
  --ink: var(--black);
  --ink-56: rgba(0, 0, 0, 0.56);  /* token 563917f7 */
  --ink-48: rgba(0, 0, 0, 0.48);  /* token 4fb42c33 · secondary text, eyebrows */
  --ink-36: rgba(0, 0, 0, 0.36);  /* token e27e1031 */
  --ink-24: rgba(0, 0, 0, 0.24);  /* token 5621f77f · muted headings (losing column) */
  --ink-12: rgba(0, 0, 0, 0.12);  /* token cd4b28e8 */
  --ink-10: rgba(0, 0, 0, 0.10);  /* token 8ac726e4 */
  --ink-8:  rgba(0, 0, 0, 0.08);  /* token ee2dbcb5 */
  --ink-4:  rgba(0, 0, 0, 0.04);  /* token 849e124d · soft row and strip fill */

  /* ---- Paper ramp: white alphas for UI sitting on blue or on media ---- */
  --paper-56: rgba(255, 255, 255, 0.56);  /* token 5a8c46ea */
  --paper-48: rgba(255, 255, 255, 0.48);  /* token 10d627ba */
  --paper-24: rgba(255, 255, 255, 0.24);  /* token c2e2a410 */
  --paper-12: rgba(255, 255, 255, 0.12);  /* token 4931e0a3 */
  --paper-10: rgba(255, 255, 255, 0.10);  /* token 7325e44b */
  --paper-8:  rgba(255, 255, 255, 0.08);  /* token 63ce9049 */
  --paper-30: rgba(255, 255, 255, 0.30);  /* story progress track (inline)   */
  --paper-92: rgba(255, 255, 255, 0.92);  /* story progress fill (inline)    */

  /* ---- Brand ---- */
  --blue: #0051ff;          /* the one action color: buttons, icon chips,
                               quote card, check icons, floating app tile */
  --link: #0099ff;          /* inline text links, always underlined        */

  /* ---- Embed neutrals (used only inside the video proof cards) ---- */
  --embed-label: #6b7280;   /* "Earned:" label inside the glass counter chip */
  --embed-value: #1a1a2e;   /* counter value inside the glass counter chip   */

  /* ---- RECONSTRUCTED: payout notification chip, sampled from the
         marquee PNGs (the production ticker scrolls flat images) ---- */
  --paid-tint: #e5fff6;     /* mint chip fill        */
  --paid-border: #b6e3d1;   /* mint chip border      */
  --paid-green: #1a5e4a;    /* "Paid" label green    */
  --paid-amount: #666666;   /* gray dollar amount    */

  /* ---- Type ---- */
  --font: "Inter", "Inter Placeholder", sans-serif;
  /* Every text style on the site turns these Inter alternates on: */
  --font-features: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;

  /* ---- Radius scale ---- */
  --r-icon: 6px;    /* small blue icon squares (24px box)                  */
  --r-row: 8px;     /* soft rows: FAQ, comparison lines, nav logo tile     */
  --r-bars: 10px;   /* hamburger bars                                      */
  --r-card: 16px;   /* cards, bento tiles, phone screens, video cards      */
  --r-chip: 20px;   /* quote card, floating app tile, glass counter chip   */
  --r-frame: 24px;  /* phone bezel frame                                   */
  --r-pill: 50px;   /* every button                                        */

  /* ---- Shadows (the site is nearly shadowless; cards separate by
         surface color, not elevation) ---- */
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.10);  /* video proof cards */
  --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.10);   /* small chips       */

  /* ---- Motion ----
     Production reveals are Framer springs: damping 27, stiffness 121,
     mass 0.3. That spring is overdamped: a fast, smooth settle with no
     bounce, roughly 0.7s. The cubic-bezier below is the CSS equivalent.
     Elements start at opacity 0 and translateY(80px) (40px for small UI),
     then stagger in 0.1s steps. Page content waits ~2s for the preloader. */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --t-reveal: 0.7s;
  --reveal-distance: 80px;
  --reveal-distance-sm: 40px;
  --stagger: 0.1s;

  /* ---- Layout ---- */
  --container: 1200px;      /* nav and content width                        */
  --pad-x: 64px;            /* desktop gutter (24px on phone)               */
  --section-y: 80px;        /* standard section padding: 80px 64px          */
  /* Hero runs 120px 64px 80px. Breakpoints: desktop 1200+, tablet 810
     to 1199, phone under 810. Phone nav frame is 390px wide. */
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-feature-settings: var(--font-features);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

::selection { background: var(--blue); color: var(--white); }

a.inline-link {
  color: var(--link);
  text-decoration: underline;
}

/* ==========================================================================
   Type scale
   Display faces are all Inter Medium (500) with tight tracking. Headlines
   are sentence case, never uppercase. Bold inside running text is 700.
   ========================================================================== */

.display-hero {           /* hero h1 · "Get paid to post on TikTok" */
  font-size: 100px;       /* phone: 70px */
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 100%;
  margin: 0;
}

.display-section {        /* section h2 · "Three simple steps to start" */
  font-size: 70px;        /* phone: 40px */
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 100%;
  margin: 0;
}

.display-case {           /* case study h2 · "@sydney.adams29 earned $8,000" */
  font-size: 64px;        /* phone: 36px */
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 110%;
  margin: 0;
}

.display-cta {            /* closing CTA h2 · 56px */
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 110%;
  margin: 0;
}

.display-handle {         /* testimonial handle on blue · white 48px */
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 120%;
  color: var(--white);
  margin: 0;
}

.heading-faq {            /* FAQ h2 · 40px */
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 120%;
  margin: 0;
}

.heading-quote {          /* quote body on blue · 37px white */
  font-size: 37px;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 120%;
  color: var(--white);
  margin: 0;
}

.heading-compare {        /* comparison column titles · 32px */
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 110%;
  margin: 0;
}
.heading-compare.is-muted { color: var(--ink-24); }  /* the losing column */

.heading-stat-label {     /* stat labels · "Total Views" · 28px */
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 120%;
  margin: 0;
}

.wordmark-text {          /* "Claim" next to the app icon · 26px (menu 32px) */
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 110%;
  margin: 0;
}

.stat-number {            /* animated counters · counts up from 0 on enter */
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.07em;
  line-height: 100%;
  display: flex;
  align-items: center;
}

/* Body presets (production Framer presets, desktop / tablet / phone):
   body-xl 24 / 20 / 18 · body-lg 20 / 16 / 18 · body 16 · body-18 18.
   All body text: weight 500, tracking -0.05em, line-height 150%. */
.body-xl  { font-size: 24px; font-weight: 500; letter-spacing: -0.05em; line-height: 150%; margin: 0; }
.body-lg  { font-size: 20px; font-weight: 500; letter-spacing: -0.05em; line-height: 150%; margin: 0; }
.body-18  { font-size: 18px; font-weight: 500; letter-spacing: -0.05em; line-height: 150%; margin: 0; }
.body-16  { font-size: 16px; font-weight: 500; letter-spacing: -0.05em; line-height: 150%; margin: 0; }
.caption-14 { font-size: 14px; font-weight: 500; letter-spacing: -0.05em; line-height: 150%; margin: 0; }

.text-secondary { color: var(--ink-48); }   /* subheads, captions, eyebrows */
.text-muted     { color: var(--ink-24); }

.eyebrow {                /* section kicker · "How It Works", "Questions" */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 150%;
  color: var(--ink-48);
  margin: 0;
}

/* Paragraph rhythm inside rich text: 24px between paragraphs (20px on
   smaller presets). Bold runs are weight 700. */
.rich p + p { margin-top: 24px; }
.rich b, .rich strong { font-weight: 700; }

/* ==========================================================================
   Buttons
   One button style on the whole site: the blue pill. White Inter label,
   tracking -0.04em. No secondary, ghost, or outline variant exists.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--white);
  border: 0;
  border-radius: var(--r-pill);
  padding: 16px 32px;          /* nav and default */
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 150%;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s var(--ease-spring), transform 0.2s var(--ease-spring);
}
.btn:hover { opacity: 0.85; }            /* RECONSTRUCTED: hover not shipped in markup */
.btn:active { transform: scale(0.98); }

.btn-lg { padding: 16px 40px; }          /* marketing CTAs: "Start Earning Now" */
.btn-sm { padding: 8px 16px; font-size: 14px; }   /* compact variant */
.btn-nav { font-size: 14px; }            /* nav pill keeps 16px 32px padding */
.btn-block { width: 100%; }

/* ==========================================================================
   Chips and small parts
   ========================================================================== */

/* Glass counter chip overlaid on proof videos: "Earned: $8,120" */
.chip-earned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--r-chip);
  padding: 5px 12px;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.chip-earned .label { font-weight: 500; color: var(--embed-label); }
.chip-earned .value { font-weight: 700; color: var(--embed-value); }

/* RECONSTRUCTED payout notification row (production scrolls PNGs of these) */
.chip-paid {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.chip-paid .badge {
  background: var(--paid-tint);
  border: 1.5px solid var(--paid-border);
  color: var(--paid-green);
  border-radius: var(--r-row);
  padding: 4px 14px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.chip-paid .amount {
  color: var(--paid-amount);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Small blue icon square (step and bento glyphs, FAQ toggle) */
.icon-chip {
  width: 24px;
  height: 24px;
  border-radius: var(--r-icon);
  background: var(--blue);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.icon-chip.lg { width: 42px; height: 42px; border-radius: 8px; }

/* Floating app tile (hero phone dock): 80px blue tile, springs up */
.app-tile {
  width: 80px;
  height: 80px;
  border-radius: var(--r-chip);
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.app-tile img { width: 100%; height: 100%; object-fit: cover; }

/* Soft row: the workhorse list surface (FAQ, comparison lines) */
.row-soft {
  background: var(--ink-4);
  border-radius: var(--r-row);
  padding: 16px;
}

/* Comparison list line */
.check-line {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink-4);
  border-radius: var(--r-row);
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.05em;
}
.check-line svg { flex: none; width: 22px; height: 22px; }
.check-line .ic-yes { fill: var(--blue); }
.check-line .ic-no  { fill: var(--ink-48); }
.check-line.is-muted { color: var(--ink-48); }

/* ==========================================================================
   Cards
   Cards are lighter cream on the darker cream canvas. Radius 16, pad 32.
   Elevation comes from surface contrast, not shadows.
   ========================================================================== */

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 32px;
}

.card-bento {              /* "What you get" tiles: media fills, text bottom */
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.card-case {               /* case study media card: 600px tall on desktop */
  height: 600px;
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* Video proof card ("These videos paid out."): white, real shadow, 9:16 */
.card-video {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.card-video video, .card-video img.poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.card-video .chip-earned { position: absolute; top: 12px; left: 12px; }

/* Quote card: the only large blue surface, lives inside a cream letter card */
.card-quote {
  background: var(--blue);
  border-radius: var(--r-chip);
  color: var(--white);
  padding: 32px;
}
.card-quote .quote-mark { width: 40px; height: 40px; fill: var(--white); }
.card-quote .byline { color: var(--paper-56); }

/* ==========================================================================
   Phone frame (hero "Story" mock and CTA art)
   375 x 665 white bezel, radius 24, 8px padding; screen radius 16.
   ========================================================================== */

.phone {
  width: 375px;
  height: 665px;
  background: var(--white);
  border-radius: var(--r-frame);
  padding: 8px;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
}
.phone .screen {
  width: 100%;
  height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  position: relative;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.phone .screen video, .phone .screen > img.media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Story chrome: progress segments plus avatar row, white on media */
.story-progress {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 4px;
}
.story-progress i {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--paper-30);
}
.story-progress i.fill { background: var(--paper-92); }

.story-id {
  position: absolute; top: 24px; left: 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--white);
  font-size: 14px; font-weight: 600; letter-spacing: -0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.story-id .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--paper-92);
  background: var(--surface-tan);
  overflow: hidden;
}
.story-id .time { color: var(--paper-48); font-weight: 500; }

/* Burned-in payout headline on the story video */
.story-payout {
  position: absolute; top: 84px; left: 0; right: 0;
  text-align: center; color: var(--white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.story-payout .label { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.story-payout .amount { font-size: 52px; font-weight: 800; letter-spacing: -0.01em; line-height: 110%; }

/* ==========================================================================
   Navigation
   Transparent bar over the canvas; a progressive blur strip carries it.
   Container 1200, padding 24px 64px. Links 14px. Blue pill on the right.
   ========================================================================== */

.nav {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.nav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.nav .brand img { width: 32px; height: 32px; border-radius: var(--r-row); }
.nav .links { display: flex; gap: 32px; }
.nav .links a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.05em;
}
.nav .links a:hover { color: var(--ink-48); }

/* Hamburger (phone nav): two 10px-radius black bars */
.burger { display: inline-flex; flex-direction: column; gap: 5px; }
.burger i { width: 22px; height: 2.5px; border-radius: var(--r-bars); background: var(--black); }

/* ==========================================================================
   Progressive blur
   The site's signature atmosphere: a backdrop blur that fades out through
   a gradient mask instead of ending at a hard edge.
   Top strip (nav): blur 10, mask fades downward.
   Media foot (case study, letter photos): blur 12, mask fades upward.
   ========================================================================== */

.prog-blur-top {
  position: absolute; inset: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  mask: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 100%);
  -webkit-mask: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 100%);
}

.prog-blur-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 100%);
  -webkit-mask: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0) 100%);
}

/* ==========================================================================
   Ticker (marquee)
   Two uses: the social icon strip in the hero and the payout proof rail.
   Content loops linearly; the section is masked so items fade in and out
   across the outer 12.5% on each side.
   ========================================================================== */

.ticker {
  overflow: hidden;
  mask-image: linear-gradient(to right,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0) 12.5%, rgb(0 0 0) 87.5%, rgb(0 0 0 / 0) 100%);
  -webkit-mask-image: linear-gradient(to right,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0) 12.5%, rgb(0 0 0) 87.5%, rgb(0 0 0 / 0) 100%);
}
.ticker .track {
  display: flex;
  align-items: center;
  gap: 20px;              /* payout rail uses wider gaps, to taste */
  width: max-content;
  animation: ticker-scroll 22s linear infinite;
}
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }   /* duplicate the content once */
}

/* Hero social strip: black platform glyphs in a soft rounded band */
.social-strip {
  display: inline-flex;
  background: var(--ink-4);
  border-radius: 12px;
  padding: 10px 16px;
}
.social-strip svg { width: 18px; height: 18px; fill: var(--black); }

/* ==========================================================================
   FAQ accordion
   600px column of soft rows. Question 18px medium, blue toggle square.
   ========================================================================== */

.faq { width: 600px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.faq-row {
  background: var(--ink-4);
  border-radius: var(--r-row);
  padding: 16px;
}
.faq-row .q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.05em;
}
.faq-row .a {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 150%;
  color: var(--ink-48);
}
.faq-row .a p + p { margin-top: 16px; }

/* ==========================================================================
   Sections and layout
   ========================================================================== */

.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-y) var(--pad-x);
  box-sizing: border-box;
}
.section-hero { padding: 120px var(--pad-x) 80px; }

.section-head {           /* eyebrow over headline, usually centered */
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  margin-bottom: 64px;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Closing CTA: a cream card pair, text left and phone art right */
.cta-card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 80px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

/* ==========================================================================
   Preloader
   Full black cover. The app icon flies in from below the fold while
   spinning once (translateY 560, rotate 360) on the settle spring, holds,
   then the cover lifts and page content starts its staggered reveal at
   about the 2 second mark.
   ========================================================================== */

.preloader {
  position: fixed; inset: 0;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.preloader img { width: 203px; height: 203px; }

/* ==========================================================================
   Motion utilities
   Apply .reveal; add .in (via JS or on load) to land. Stagger children
   with transition-delay steps of 0.1s.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--t-reveal) var(--ease-spring),
    transform var(--t-reveal) var(--ease-spring);
  will-change: transform;
}
.reveal.sm { transform: translateY(var(--reveal-distance-sm)); }
.reveal.in { opacity: 1; transform: none; }

/* Hero headline reveals word by word: wrap each word, stagger 0.1s */
.word-reveal .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}
.word-reveal.in .w { opacity: 1; transform: none; }