/* ==========================================================================
   GeckoScan — "Jive" skin (matches letsjive.io)
   Uncut Sans, near-black headings on white, gray body copy, an organic colour-
   shapes backdrop, and rounded-full pill buttons that hover into playful jive
   accents. Loads AFTER style.css and only repaints — the working poster builder
   (placer geometry, drag/resize) is inherited untouched.
   ========================================================================== */

@font-face{font-family:'Uncut Sans';src:url('/static/fonts/uncut-sans/UncutSans-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Uncut Sans';src:url('/static/fonts/uncut-sans/UncutSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Uncut Sans';src:url('/static/fonts/uncut-sans/UncutSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Uncut Sans';src:url('/static/fonts/uncut-sans/UncutSans-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Uncut Sans';src:url('/static/fonts/uncut-sans/UncutSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --paper:#ffffff; --paper-deep:#f6f6f6; --surface:#ffffff;
  --ink:#181818; --ink-soft:#6d6d6d; --ink-faint:#888888;
  --line:#e8e8e8; --line-soft:#f1f1f1;
  --cool:#0590cb; --cool-deep:#0a6fb0;
  --gold:#f9c558; --pin:#181818; --pin-deep:#000000;
  --font-sans:'Uncut Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --r-sm:12px; --r:16px; --r-lg:22px;
  --shadow:0 1px 2px rgba(24,24,24,.04), 0 12px 30px rgba(24,24,24,.06);
  --shadow-lg:0 28px 60px rgba(24,24,24,.12);
  --ring:0 0 0 4px rgba(125,226,242,.55);          /* jive-teal/30 */
  /* jive accents */
  --j-yellow:#f9c558; --j-teal:#7de2f2; --j-blue:#0590cb; --j-green:#00b99a;
  --j-pink:#ffc7c7; --j-purple:#8b7fff; --j-red:#fe8363;
}

body{ background:#ffffff; color:var(--ink); font-family:var(--font-sans); }
h1,h2,h3,h4{ font-family:var(--font-sans); font-weight:800; letter-spacing:-.02em; }
a{ color:var(--ink); }
a:hover{ text-decoration:none; }

/* ---- organic colour shapes behind the hero (the Jive signature) --------- */
.hero{ position:relative; }
.hero .hero-bg{
  display:block; position:absolute; left:50%; top:-40px; transform:translateX(-50%);
  width:1600px; max-width:120vw; height:1500px; z-index:0; pointer-events:none; opacity:.85;
  background:url('/static/img/home-shapes-full.svg') no-repeat top center; background-size:1600px auto;
}
.hero .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  padding:54px 24px 80px; }
@media (max-width:760px){
  .hero .hero-bg{ background-image:url('/static/img/home-shapes-mobile.svg'); width:100vw; background-size:100vw auto; }
}

/* ---- hero copy ---------------------------------------------------------- */
.hero-lead{ text-align:center; max-width:700px; margin:0 auto; }
.hero .eyebrow{ display:none; }                       /* Jive hero has no eyebrow */
.hero h1{ font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.02; letter-spacing:-.03em; color:var(--ink); }
.hero h1 .hl{ color:var(--ink); }                     /* monochrome headline like Jive */
.hero-sub{ margin:22px auto 0; max-width:42ch; color:var(--ink-soft); font-weight:400;
  font-size:clamp(1.05rem,1.7vw,1.3rem); }
.hero-trust{ margin-top:18px; color:var(--ink-faint); font-size:.95rem; font-weight:500; }
.hero-cta{ margin-top:26px; }

/* ---- pill buttons ------------------------------------------------------- */
.btn{ border-radius:9999px; font-weight:600; font-family:var(--font-sans); transition:background .15s, color .15s, border-color .15s, transform .08s; }
.btn-primary{ background:var(--ink); color:#fff; border:1px solid var(--ink); box-shadow:none; }
.btn-primary:hover{ background:var(--j-green); border-color:var(--j-green); color:#fff; }
.btn-ghost{ background:#fff; color:var(--ink); border:1px solid #e6e6e6; box-shadow:none; }
.btn-ghost:hover{ background:var(--j-yellow); border-color:var(--j-yellow); color:var(--ink); }
.btn-ink{ background:var(--ink); color:#fff; border:1px solid var(--ink); }
.btn-ink:hover{ background:var(--j-blue); border-color:var(--j-blue); }
.btn-lg{ font-size:1.15rem; padding:.95em 2.3em; }
.btn-pink:hover{ background:var(--j-pink); border-color:var(--j-pink); color:var(--ink); }

/* ---- header / nav (centred logo, 3-up like Jive) ------------------------ */
/* Frosted, mostly see-through header (20% opacity) — the colour shapes and
   page content drift behind it; a strong blur keeps the nav legible. */
.site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.2);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(232,232,232,.6); }
.site-header .wrap{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:74px; }
.site-header .brand{ grid-column:2; justify-self:center; }
.site-header .site-nav{ grid-column:3; justify-self:end; margin-left:0; gap:10px; }
.site-nav a.navlink{ display:none; }                  /* Jive nav is just logo + auth */
.brand{ color:var(--ink); font-weight:700; font-size:1.2rem; gap:11px; }
.brand-mark{ background:var(--ink); border-radius:11px; }
.brand-mark svg{ color:#fff; width:20px; height:18px; }
.brand:hover .brand-mark{ background:var(--j-green); }

/* ---- clean white cards (the builder is .builder.card) ------------------- */
.card{ background:#fff; border:1px solid #ededed; border-radius:24px; box-shadow:0 24px 60px rgba(24,24,24,.09); }
.builder{ width:100%; max-width:940px; margin:34px auto 0; }
.builder-head h2{ font-size:1.5rem; }

/* ---- inputs + controls -------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], select, textarea{
  background:#fff; border:1px solid #e2e2e2; border-radius:12px; font-family:var(--font-sans);
}
input:focus, select:focus, textarea:focus{ border-color:var(--j-teal); box-shadow:var(--ring); }
.seg.is-on{ background:var(--ink); color:#fff; }
.opt-pad input[type="range"]{ accent-color:var(--j-blue); }
.placer-stage.drop-hover{ border-color:var(--j-blue); box-shadow:var(--ring); }
.placer-empty:hover{ border-color:var(--j-blue); color:var(--ink); }

/* ---- "how it works" (Jive: centred, icon, no heavy card) ---------------- */
section.band{ padding:64px 0; }
.section-head{ text-align:center; max-width:none; margin:0 auto 8px; }
.section-head .eyebrow{ display:none; }
.section-head h2{ font-size:clamp(2rem,4vw,2.8rem); }
.section-head p{ color:var(--ink-soft); margin-top:10px; font-size:1.15rem; }
.steps{ grid-template-columns:repeat(3,1fr); gap:48px; margin-top:48px; }
.step{ background:none; border:none; box-shadow:none; padding:0; text-align:center; max-width:320px; margin:0 auto; }
.step .num{ display:none; }
.step .rule{ display:none; }
.step .step-ic{ width:54px; height:54px; margin:0 auto 14px; display:grid; place-items:center;
  border-radius:16px; }
.step h3{ font-size:1.4rem; margin:0 0 8px; }
.step p{ color:var(--ink-soft); font-size:1.05rem; }

/* closing CTA band */
.cta-band .card{ border:none; box-shadow:none; background:none; padding:8px 24px 0; }
.cta-band h2{ font-size:clamp(2rem,4.4vw,3rem); }
.cta-band p{ color:var(--ink-soft); }

/* ---- done / progress band ---------------------------------------------- */
.done-fill{ background:var(--j-green); }

/* ---- modal (Jive: clean white, soft round) ------------------------------ */
.modal-overlay{ background:rgba(24,24,24,.45); }
.modal-card{ background:#fff; border:1px solid #ededed; border-radius:18px; box-shadow:0 30px 70px rgba(24,24,24,.3); }
.tabs{ background:var(--paper-deep); }
.tab.active{ color:var(--ink); }

/* ---- footer (centred + colourful hovers like Jive) ---------------------- */
.site-footer{ border-top:1px solid var(--line-soft); padding:48px 0; }
.site-footer .wrap{ flex-direction:column; gap:14px; justify-content:center; text-align:center; color:var(--ink-faint); }
.site-footer .brand{ justify-content:center; }
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; font-weight:500; }
.foot-links a{ color:var(--ink-soft); }
.foot-links a:nth-child(1):hover{ color:var(--j-yellow); }
.foot-links a:nth-child(2):hover{ color:var(--j-green); }
.foot-links a:nth-child(3):hover{ color:var(--j-purple); }
.foot-links a:nth-child(4):hover{ color:var(--j-red); }

/* ---- cleaner, more compact builder ------------------------------------- */
/* Calm labels everywhere (Uncut Sans, no mono/uppercase) */
.field > label, .form-label{
  font-family:var(--font-sans); text-transform:none; letter-spacing:0;
  font-weight:600; font-size:.82rem; color:var(--ink);
}
/* Layout options only appear once artwork is uploaded (they only apply to art),
   so an empty builder stays short and clean. */
.placer-opts.is-disabled{ display:none; }
/* Tighter field rhythm; drop the chatty per-field hints */
.builder .batch-fields{ gap:13px; }
.builder .field{ gap:5px; }
.builder .field .hint{ display:none; }
.builder .form-row{ grid-template-columns:1.7fr 1fr; gap:12px; }
.builder input[type="text"], .builder input[type="email"],
.builder input[type="url"], .builder input[type="number"]{ padding:.58em .8em; }
/* Reassurance → a quiet chip above the button, not a stray gray line */
.builder .builder-note{ display:block; font-size:.8rem; color:var(--ink-soft);
  background:var(--paper-deep); border-radius:10px; padding:8px 11px; margin:2px 0 0; }
/* UTM disclosure: clean + unobtrusive */
.utm-block{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:10px 12px; }
.utm-block > summary{ font-weight:600; font-size:.85rem; color:var(--ink-soft); }
.utm-block .utm-auto{ background:var(--paper-deep); color:var(--ink-soft); }
.placer-readout{ font-size:.72rem; color:var(--ink-faint); }

/* ---- desktop: title/tagline + builder SIDE BY SIDE, above the fold ------ */
@media (min-width:1041px){
  .hero .wrap{
    display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr);
    gap:44px; align-items:center; max-width:1260px; padding:32px 24px 52px;
  }
  .hero-lead{ text-align:left; max-width:none; margin:0; }
  .hero h1{ font-size:clamp(2.1rem,3vw,3rem); line-height:1.05; }
  .hero-sub{ margin:18px 0 0; max-width:44ch; }
  .hero-trust{ margin-top:14px; }
  .hero-cta{ display:none; }                       /* the builder is right here */
  .builder{ max-width:none; margin:0; }
  /* compact the builder so the Generate button clears the fold */
  .hero .builder{ padding:20px 22px 22px; }
  .hero .builder-head{ margin-bottom:10px; }
  .hero .builder-head h2{ font-size:1.2rem; }
  .hero .builder-head .panel-sub{ font-size:.84rem; margin-top:4px; }
  .hero .builder .batch-layout{ grid-template-columns:minmax(280px,300px) 1fr; gap:24px; }
}

/* ---- dashboard: adopt the same frosted jive header --------------------- */
/* The dashboard topbar was a solid dark bar with white text. Reskin it to the
   same translucent (20%) white header as the landing, and flip its text/controls
   back to ink so they stay readable on the light header. */
.topbar{ background:rgba(255,255,255,.2); color:var(--ink);
  -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(232,232,232,.6); }
.topbar .brand{ color:var(--ink); font-weight:700; }
.topbar .brand-mark{ background:var(--ink); border-radius:11px; }
.topbar .brand-mark svg{ color:#fff; width:20px; height:18px; }
.topbar .brand:hover .brand-mark{ background:var(--j-green); }
.topbar .user-email{ color:var(--ink-soft); }
.topbar .btn-ghost{ color:var(--ink); border-color:#e6e6e6; background:#fff; }
.topbar .btn-ghost:hover{ background:var(--j-yellow); border-color:var(--j-yellow); color:var(--ink); }
.plan-badge{ background:var(--paper-deep); color:var(--ink-soft); border-color:var(--line); }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }