/* GPT Marlon — shared styles.
   Design: Framer "adapt-hero-section". Tokens live in theme.css.
   Class names are unchanged from the previous design on purpose: every page and
   all 25 guide pages pick up the new look without per-file edits. */

@import url('theme.css');
@import url('nav.css');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  opacity: var(--noise-opacity);
}

::selection { background: var(--lavender); color: var(--btn-fg); }

/* ----------------------------------------------------- page scaffold ---- */
.page { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 8rem 2rem 4rem; }
.page-hero { text-align: left; margin-bottom: 3rem; }
.section-label {
  display: inline-block; font-family: var(--font-body);
  font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .9rem;
}
h1.page-title {
  font-family: var(--font-display); font-size: var(--fs-h1);
  line-height: 1.1; font-weight: 600; letter-spacing: -.025em;
}
h2.page-title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
/* was a purple→blue gradient; the redesign highlights with a flat accent */
/* the design highlights words with a yellow marker behind dark text */
.gradient-text {
  color: var(--btn-fg); background: var(--yellow);
  padding: 0 .18em; border-radius: 8px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  -webkit-text-fill-color: currentColor;
}
.page-sub { color: var(--muted); font-size: var(--fs-lg); line-height: 1.7; max-width: 640px; margin-top: 1.1rem; }

/* ------------------------------------------------------------ buttons ---- */
/* the design's action treatment: 2px near-black border + hard offset shadow */
.btn-primary, .btn-secondary, .btn-accent {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.3rem; border-radius: var(--r-sm);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none; cursor: pointer; color: var(--btn-fg);
  border: 2px solid var(--btn-border);
  box-shadow: var(--hard-shadow);
  transition: transform .12s var(--ease), box-shadow .12s;
}
.btn-primary:hover, .btn-secondary:hover, .btn-accent:hover {
  transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 rgba(0,0,0,.95);
}
.btn-primary:active, .btn-secondary:active, .btn-accent:active {
  transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 rgba(0,0,0,.95);
}
.btn-primary { background: var(--btn-bg); }
.btn-secondary { background: var(--cream); }
.btn-accent { background: var(--yellow); }

/* -------------------------------------------------------------- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin: 2.2rem 0; }
.card {
  background: var(--bg3); border: 2px solid var(--btn-border);
  border-radius: var(--r-lg); padding: 1.5rem 1.4rem;
  box-shadow: var(--hard-shadow);
  transition: transform .14s var(--ease), box-shadow .14s;
}
.card:hover { transform: translate(-2px,-2px); box-shadow: var(--hard-shadow-lg); }
.card h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); margin-bottom: .5rem; letter-spacing: -.01em; }
.card p { color: var(--muted); font-size: var(--fs-xs); line-height: 1.65; }
.card .emoji { font-size: 1.4rem; display: block; margin-bottom: .7rem; }

/* accent-tinted card — pass a token, e.g. style="--tint: var(--yellow)" */
.card-tint { background: var(--tint, var(--cream)); border-color: transparent; color: var(--btn-fg); }
.card-tint h3, .card-tint p { color: var(--btn-fg); }
.card-tint p { opacity: .72; }

/* --------------------------------------------------------- stat band ---- */
.stat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin: 2.2rem 0; }
.stat { background: var(--bg3); border: 2px solid var(--border-strong); border-radius: var(--r-lg); padding: 1.3rem 1.2rem; box-shadow: var(--hard-shadow); }
.stat .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.stat .lbl { color: var(--muted); font-size: var(--fs-3xs); margin-top: .45rem; letter-spacing: .04em; }

/* ------------------------------------------------------------- chips ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
/* pill chips matching the design's <mark> treatment:
   yellow = category, lavender = tool, black text, fully rounded */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: 999px;
  font-size: var(--fs-3xs); font-weight: 700; letter-spacing: .01em;
  background: var(--yellow); color: var(--btn-fg); border: none;
}
.chip-tool { background: var(--lavender-soft); color: var(--btn-fg); }


/* --------------------------------------------- partnerships / case study ---- */
.case-study {
  background: var(--yellow); border: 2px solid var(--border-strong);
  box-shadow: var(--hard-shadow);
  border-radius: var(--r-lg); padding: 1.8rem 1.8rem 1.6rem; margin: 2.2rem 0;
}
.case-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: -.02em; }
.case-nums { display: flex; flex-wrap: wrap; gap: 2.2rem; margin: 1.4rem 0 1.2rem; }
.case-nums div { display: flex; flex-direction: column; }
.case-nums b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.case-nums span { color: var(--muted); font-size: var(--fs-3xs); margin-top: .35rem; letter-spacing: .06em; text-transform: uppercase; }
.case-study p { color: rgba(3,3,3,.7); font-size: var(--fs-sm); line-height: 1.7; }

.why-list { list-style: none; margin: 2rem 0; }
.why-list li {
  position: relative; padding: 1rem 0 1rem 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.7;
}
.why-list li:last-child { border-bottom: 1px solid var(--border); }
.why-list li::before {
  content: '→'; position: absolute; left: 0; top: 1rem;
  color: var(--yellow); font-weight: 700;
}
.why-list b { color: var(--text); font-weight: 600; }

.final-cta {
  margin-top: 3.5rem; background: var(--lavender); color: var(--btn-fg);
  border: 2px solid var(--border-strong); box-shadow: var(--hard-shadow-lg);
  border-radius: var(--r-xl); padding: 3rem 2.5rem; text-align: center;
}
.final-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); letter-spacing: -.025em; }
.final-cta p { color: rgba(3,3,3,.72); font-size: var(--fs-sm); line-height: 1.7; max-width: 520px; margin: .9rem auto 0; }
.final-cta-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.final-cta .btn-primary { background: var(--yellow); color: var(--btn-fg); }
.final-cta .btn-secondary { border-color: rgba(3,3,3,.25); color: var(--btn-fg); }
.final-cta .btn-secondary:hover { background: rgba(3,3,3,.06); border-color: rgba(3,3,3,.5); }
@media (max-width: 640px) {
  .final-cta { padding: 2rem 1.3rem; }
  .case-nums { gap: 1.4rem; }
}

/* -------------------------------------------------------------- forms ---- */
.form-box {
  background: var(--bg3); border: 2px solid var(--border-strong);
  border-radius: var(--r-xl); padding: 2rem; max-width: 640px;
  box-shadow: var(--hard-shadow-lg);
}
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: var(--fs-2xs); font-weight: 600; margin-bottom: .4rem; color: var(--text2); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; border-radius: var(--r);
  border: 2px solid var(--border-strong); background: #fff; color: var(--text);
  font-family: inherit; font-size: var(--fs-sm); transition: box-shadow .12s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; box-shadow: var(--hard-shadow);
}
.form-note { color: var(--muted); font-size: var(--fs-3xs); margin-top: .9rem; line-height: 1.5; }
.form-status { margin-top: 1rem; font-size: var(--fs-xs); font-weight: 600; display: none; }
.form-status.ok  { display: block; color: #1a7f37; }
.form-status.err { display: block; color: #c81e78; }

/* ------------------------------------------------------------- about ---- */
.about-grid { display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: center; }
.portrait {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--border-strong); background: var(--bg3);
}
.portrait img { display: block; width: 100%; height: auto; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } .portrait { max-width: 320px; } }

/* ------------------------------------------------------------ footer ---- */
footer { position: relative; z-index: 1; background: var(--ink2); color: #fff; border-top: 2px solid var(--border-strong); padding: 2.6rem 2rem 2.2rem; margin-top: 4rem; }
.footer-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.footer-links { display: flex; gap: 1.3rem; list-style: none; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.66); text-decoration: none; font-size: var(--fs-xs); }
.footer-links a:hover { color: #fff; }
.footer-socials { display: flex; gap: .5rem; }
.footer-social {
  width: 36px; height: 36px; border-radius: var(--r-sm); border: 2px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  color: #fff; background: transparent; transition: background-color .2s, border-color .2s;
}
.footer-social:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.footer-copy { color: rgba(255,255,255,.45); font-size: var(--fs-3xs); }

.footer-social svg, .btn-secondary svg, .btn-primary svg, .ig-follow-btn svg { width: 17px; height: 17px; fill: currentColor; }
.footer-social svg { width: 16px; height: 16px; }

/* ---------------------------------------------------- community modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 440px; background: var(--cream); color: var(--btn-fg);
  border: 2px solid var(--border-strong); border-radius: var(--r-xl);
  padding: 2rem 1.9rem; box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98); transition: transform .22s var(--ease); position: relative;
}
.modal-backdrop.open .modal { transform: none; }
.modal-emoji { font-size: 2rem; }
.modal h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); margin: .5rem 0 .4rem; letter-spacing: -.02em; }
.modal p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; margin-bottom: 1.3rem; }
.modal-close { position: absolute; top: 1rem; right: 1.1rem; background: none; border: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.modal-row { display: flex; gap: .6rem; }
.modal input {
  flex: 1; min-width: 0; padding: .85rem 1rem; border-radius: var(--r-sm);
  border: 2px solid var(--border-strong); background: #fff; color: var(--btn-fg);
  font-family: inherit; font-size: var(--fs-sm);
}
.modal input:focus { outline: none; box-shadow: var(--hard-shadow); }
.modal .btn-primary { white-space: nowrap; }
.modal-status { margin-top: .9rem; font-size: var(--fs-xs); font-weight: 600; min-height: 1.1rem; }
.modal-fine { color: var(--faint); font-size: var(--fs-3xs); margin-top: .8rem; }

/* ------------------------------------------------------------ reveal ---- */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fade-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------- smooth scroll ---- */
/* Required by Lenis. Without the scroll-behavior override the native smooth
   scrolling fights the smooth scroller and the page feels sticky. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }


/* ------------------------------------------------- custom cursor ---- */
/* Ported from the Framer component "custom cursor mouse": a yellow arrow with
   a black outline and a hard offset shadow, rotated 13deg. Runs on every page. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
}
.framer-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 55px; height: 55px; padding: 4px;
  /* the arrow tip is the path's 0,0 — pull the box back so the tip sits on the pointer */
  margin: -11px 0 0 -11px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; will-change: transform;
  opacity: 0; transition: opacity .2s;
}
.framer-cursor svg {
  transform: rotate(13deg);
  filter: drop-shadow(-2px 2px 0 rgba(0,0,0,.94));
  transition: transform .18s var(--ease);
}
.cursor-ready .framer-cursor { opacity: 1; }
.cursor-hot .framer-cursor svg { transform: rotate(13deg) scale(1.25); }

/* -------------------------------------- audience demographics (live) ---- */
.aud-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.aud-card { background: var(--bg3); border: 2px solid var(--border-strong); box-shadow: var(--hard-shadow); border-radius: var(--r-lg); padding: 1.4rem 1.5rem 1.5rem; }
.aud-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1.1rem; }
.aud-name { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-3xs); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.aud-plat { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-3xs); font-weight: 600; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: .2rem .55rem; }
.aud-plat svg { width: 13px; height: 13px; fill: currentColor; }
.aud-row { display: grid; grid-template-columns: minmax(78px, 39%) 1fr auto; align-items: center; gap: .7rem; margin: .58rem 0; font-size: var(--fs-xs); }
.aud-lbl { color: var(--text2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-track { position: relative; height: 10px; background: rgba(3,3,3,.10); border-radius: 999px; overflow: hidden; }
.aud-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--lavender); transition: width .7s var(--ease); }
.aud-val { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.aud-note { color: var(--faint); font-size: var(--fs-3xs); margin-top: 1rem; }
.aud-card:not(.aud-ready) .aud-empty { display: block; color: var(--muted); font-size: var(--fs-2xs); }


/* ---- footer brand ----
   The nav rules live in nav.css and are scoped to nav.site-nav, so the footer's
   logo needs its own sizing — without it the avatar renders at natural size. */
footer .nav-logo {
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .4rem .9rem; text-decoration: none;
  background: var(--yellow); color: #030303;
  border: 2px solid #222; border-radius: 12px;
  box-shadow: 3px 3px 0 0 rgb(15,15,15);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em;
}
footer .nav-logo-icon { display: none; }
footer .nav-logo-text { font: inherit; color: inherit; }
footer .nav-logo-text span { color: #030303; }