/* Base: variables & resets */
:root{
  --text:#1E1E1E; --bg:#fff; --ink:#1E1E1E;
  --sage:#CFE4D6;
  --blush:#F7C8D0;
  --lav:#E2D8F5;
  --brand:#E46C83;
  --brand-strong:#C66567;
  --shadow: 0 6px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --step--1: clamp(.88rem, .84rem + .3vw, 1rem);
  --step-0:  clamp(1rem, .9rem + .8vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1rem + 1.2vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.2rem + 2vw, 2rem);
  --step-3:  clamp(2rem, 1.6rem + 3vw, 2.8rem);
  --header-h: 72px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  margin:0; color:var(--text); background:var(--bg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Screen-reader-only utility */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Decorative but lightweight page background */
body::before{
  content:""; position:fixed; inset:-10vmax;
  background:
    radial-gradient(40vmax 40vmax at 5% 10%, var(--blush) 0%, transparent 60%),
    radial-gradient(30vmax 30vmax at 95% 0%, var(--lav) 0%, transparent 60%),
    radial-gradient(35vmax 35vmax at 60% 100%, var(--sage) 0%, transparent 60%);
  z-index:-1; filter:saturate(110%) contrast(105%);
}

/* Containers */
.container{width:min(1100px, 92%); margin-inline:auto}

/* A11y */
.skip-link{position:absolute; left:-9999px; top:auto}
.skip-link:focus{left:1rem; top:1rem; background:#fff; padding:.5rem .75rem; border-radius:.5rem; box-shadow:var(--shadow)}

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transform: translateZ(0);     /* lock to its own layer */
  will-change: transform;
  box-shadow: none;
}

.site-header.is-scrolled{ box-shadow: var(--shadow); }
.brand img{ display:block; width:auto; height:38px; }

.header-inner{
  height: 100%;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding: 0 clamp(.5rem, 2vw, 1rem);
}

.nav-toggle{
  border:0; background:transparent; padding:.25rem; border-radius:.75rem; line-height:0;
}

/* Mobile nav drawer*/
.nav{
  position:absolute;
  left:0; right:0;
  top: var(--header-h);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow);
  transform: translateY(-120%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;

  transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s;
  z-index: 49;
  padding: .5rem .5rem 1rem;
}

.nav.is-open{
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: transform .25s ease, opacity .2s ease;
}

.nav ul{ display:grid; gap:.25rem; }
.auth{ display:flex; gap:.5rem; margin-top:.5rem }

@media (min-width: 960px){
  .nav{
    position:static;
    top:auto;
    background:transparent;
    border:0;
    box-shadow:none;
    padding:0;
    transform:none;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    display:flex; align-items:center; gap:.5rem;
  }
  .nav ul{ display:flex; gap:.25rem; margin:0 .5rem 0 0; }
  .auth{ margin-top:0 }
  .nav-toggle{ display:none }
}

/* Clean list + link styling */
.nav ul{ list-style:none; margin:0; padding:0; }
.nav li{ margin:0; }
.nav a{
  display:block;
  text-decoration:none;
  color:var(--ink);
  font-weight:500;
  padding:.75rem 1rem;
  border-radius:.75rem;
}
.nav a:hover,
.nav a:focus-visible{ background:#fff; outline:2px solid var(--brand); outline-offset:2px; color: var(--ink);}


/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; text-decoration:none; border-radius:999px; padding:.65rem 1rem; border:1.5px solid transparent;
}
.btn.primary{ background:linear-gradient(180deg, var(--brand), var(--brand-strong)); color:#fff; box-shadow:var(--shadow) }
.btn.primary:focus-visible{ outline:3px solid #fff; outline-offset:2px }
.btn.ghost{ border-color: rgba(30,30,30,.15); color:var(--ink); background:#fff }

/* Main spacing */
.site-main{ padding-block: clamp(1rem, 1vw + .5rem, 2rem); }

/* Hero */
.hero{
  padding-block: clamp(1.25rem, 4vw, 3.25rem);
}
.hero-inner{
  text-align:left; padding:clamp(.5rem, 1vw, 1.5rem);
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.60));
  border:1px solid rgba(0,0,0,.06); border-radius:1.25rem; box-shadow:var(--shadow);
}
.hero h1{ font-size:var(--step-3); line-height:1.05; letter-spacing:-.01em; margin:.25rem 0 .75rem }
.hero p{ font-size:var(--step-0); margin:0 0 1rem; color:#333 }
.cta-row{ display:flex; gap:.5rem; flex-wrap:wrap }

/* Cards */
.features{ padding-block: clamp(1rem, 4vw, 3rem) }
.cards{ display:grid; gap:1rem; grid-template-columns:1fr }
.card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1rem; box-shadow:var(--shadow);
}
.card h3{ margin:.25rem 0 .5rem; font-size:var(--step-1) }
.card p{ margin:0; font-size:var(--step--1); color:#333 }

@media (min-width: 720px){
  .cards{ grid-template-columns: repeat(3, 1fr) }
}

/* Footer */
.site-footer{ margin-top: clamp(1.25rem, 4vw, 3rem); padding-top:1.25rem; border-top:1px solid rgba(0,0,0,.08)}
.footer-grid{
  display:grid; gap:1rem; grid-template-columns:1.2fr 1fr 1fr;
}
.footer-grid ul{ list-style:none; padding:0; margin:.25rem 0 0; display:grid; gap:.25rem }
.footer-grid a{ color:var(--ink); text-decoration:none }
.footer-grid a:hover, .footer-grid a:focus-visible{ text-decoration:underline }

.footer-meta{ padding:.75rem 0 1.25rem; color:#555 }

/* Utilities */
.subtle{ color:#555 }
.hide-sm{ display:none }
@media (min-width:720px){ .hide-sm{ display:inline } }

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Section headers */
.section-head{ text-align:left; margin-bottom: .75rem; }
.section-head h2{ font-size: var(--step-2); margin:.25rem 0 .25rem; letter-spacing:-.01em; }
.section-head p{ margin:0; color:#333; }

/* How it works */
.howitworks{ padding-block: clamp(1rem, 4vw, 2rem); }
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:start;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:.75rem; box-shadow:var(--shadow);
}
.badge-num{
  display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px;
  background:linear-gradient(180deg, var(--brand), var(--brand-strong)); color:#fff; font-weight:700;
}
.step-body h3{ margin:.1rem 0 .25rem; font-size: var(--step-1); }

/* Save teaser (masonry) */
.save-teaser{ padding-block: clamp(1rem, 4vw, 2.5rem); }
.masonry{ column-count: 2; column-gap: .75rem; }
@media (min-width: 720px){ .masonry{ column-count: 3; } }
@media (min-width: 1100px){ .masonry{ column-count: 4; } }

.pin-card{ break-inside: avoid; margin: 0 0 .75rem; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow); }
.pin-media img{ width:100%; height:auto; display:block; }
.pin-meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .5rem .6rem; }
.pin-meta .mini{ font-size: var(--step--1); color:#555; }
.pin-meta .visit{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  padding:.5rem .75rem; border-radius:999px; text-decoration:none; font-weight:700; font-size:.9rem;
  color:#fff; background:linear-gradient(180deg, var(--brand), var(--brand-strong));
}

/* Benefits */
.benefits{ padding-block: clamp(1rem, 4vw, 2.5rem); }
.benefits-grid{ grid-template-columns: 1fr; }
@media (min-width: 720px){ .benefits-grid{ grid-template-columns: repeat(4, 1fr); } }

/* For creators */
.for-creators{ padding-block: clamp(1rem, 4vw, 3rem); }
.creator-split{ display:grid; gap:1rem; }
@media (min-width: 960px){ .creator-split{ grid-template-columns: 1.2fr .8fr; align-items:center; } }
.checks{ list-style:none; margin:0 0 .75rem; padding:0; display:grid; gap:.35rem; }
.checks li{ padding-left:1.6rem; position:relative; }
.checks li::before{
  content:"✓"; position:absolute; left:.5rem; top:0; color:var(--brand-strong); font-weight:700;
}
.creator-figure{ margin:0; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; box-shadow:var(--shadow); overflow:hidden; }
.creator-figure img{ display:block; width:100%; height:auto; }

/* Testimonials */
.testimonials{ padding-block: clamp(1rem, 4vw, 2.5rem); }
.quote-grid{ display:grid; gap:.75rem; }
@media (min-width: 720px){ .quote-grid{ grid-template-columns: repeat(3, 1fr); } }
.quote{
  margin:0; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem; padding:1rem; box-shadow:var(--shadow);
}
.quote p{ margin:0 0 .5rem; }
.quote cite{ font-style:normal; color:#555; }

/* FAQ */
.faq{ padding-block: clamp(1rem, 4vw, 2.5rem); }
.faq-item{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: .85rem; padding:.5rem .75rem; margin-bottom:.5rem; box-shadow:var(--shadow);
}
.faq-item > summary{ cursor:pointer; font-weight:600; }
.faq-item[open] > summary{ color: var(--brand-strong); }

/* Final CTA */
.final-cta{ padding-block: clamp(1rem, 4vw, 2.5rem); }
.final-cta-inner{
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.7));
  border:1px solid rgba(0,0,0,.06); border-radius:1.25rem; box-shadow:var(--shadow);
  padding: clamp(.75rem, 3vw, 1.5rem);
}
.final-cta-inner h2{ margin:.25rem 0 .25rem; font-size:var(--step-2); }
.final-cta-inner p{ margin:0 0 .75rem; color:#333; }

/* Utilities */
.cta-row.center{ justify-content:center; }