/* Growthbot — design system */
:root {
  /* Warm brand palette — cream + deep maroon, lime as the punch */
  --ink: #3E1517;
  --ink-soft: #6E4A3E;
  --muted: #9C8472;
  --line: #ECDFC4;
  --line-strong: #DAC8A2;
  --bg: #FFF8ED;
  --surface: #ffffff;
  --surface-2: #F6EEDC;
  /* Emphasis / links = maroon; primary CTA buttons = lime (see .btn-primary) */
  --accent: #3E1517;
  --accent-dark: #561E20;
  --accent-soft: #F2E2DC;
  --accent-ink: #3E1517;
  --danger: #C0392B;
  --ok: #6E9A12;            /* success (olive-lime) */
  --lime: #BDD800;
  --lime-ink: #142600;
  /* Pops */
  --yellow: #F3B43C;
  --blue:   #2E7BE4;
  --pink:   #EFA4C9;
  --orange: #E85E2B;
  --green-pop: #AAD635;
  /* Spectrum (kept for tags/dimension variety) */
  --spec-pink:        #DA4B9A;
  --spec-pink-soft:   #FBE3F0;
  --spec-blue:        #6A6BE0;
  --spec-blue-soft:   #E6E5FA;
  --spec-yellow:      #E8B845;
  --spec-yellow-soft: #FAEFCC;
  --spec-violet:      #A864D6;
  --spec-violet-soft: #F1E2FA;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(62,21,23,.06), 0 1px 1px rgba(62,21,23,.04);
  --shadow-md: 0 12px 32px -14px rgba(62,21,23,.20), 0 2px 6px rgba(62,21,23,.06);
  --shadow-lg: 0 30px 64px -22px rgba(62,21,23,.30);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; margin: 0; }
/* Page headlines use Oswald, all-caps — the brand display face. */
h1 { font-family: "Oswald", var(--font); text-transform: uppercase; font-weight: 700; letter-spacing: 0.01em; }
p { margin: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* ---- Nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,248,237,.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(232,94,43,.16); }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a { color: var(--ink-soft); font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 8px; }
.nav-links a:hover { background: var(--surface-2); text-decoration: none; }

/* Profile menu */
.profile { position: relative; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: box-shadow .15s, border-color .15s; font-family: inherit;
}
.avatar:hover { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); width: 248px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md); padding: 8px; display: none; z-index: 60;
}
.dropdown.show { display: block; }
.dropdown .dd-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.dropdown .dd-email { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown .dd-plan { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.dropdown a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; }
.dropdown a:hover { background: var(--surface-2); text-decoration: none; }
.dropdown .dd-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.dropdown a.dd-danger { color: var(--danger); }
.dropdown a.dd-danger:hover { background: #fdecec; }

/* Billing */
.billing { padding: 44px 0 70px; }
.billing h1 { font-size: 30px; margin-bottom: 4px; }
.billing .lede { color: var(--muted); margin-bottom: 26px; }
.bill-panel { padding: 8px 28px; }
.bill-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); }
.bill-row:last-child { border-bottom: none; }
.bill-row .k { color: var(--muted); font-size: 14.5px; }
.bill-row .v { font-weight: 600; font-size: 15px; }
.badge-warn { background: #fdecec; color: #a31919; border-color: #f6cccc; }
.bill-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-danger { background: #fff; color: var(--danger); border-color: #f0c4c4; }
.btn-danger:hover { background: #fdecec; text-decoration: none; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; transition: transform .04s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #FF9FC8; color: #590002; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #ffb1d3; text-decoration: none; color: #590002; }
.btn-ghost { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.btn-ghost:hover { background: #E9DCC0; border-color: transparent; text-decoration: none; }
.btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ==========================================================
   Editorial-warm homepage (.x-* — the current direction)
   ========================================================== */

.x-top {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 32px;
  background: var(--bg);
}
.x-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-weight: 700;
  font-size: 17px; letter-spacing: -0.022em;
  color: var(--ink); text-decoration: none;
}
.x-brand:hover { text-decoration: none; color: var(--ink); }
.x-dot { width: 9px; height: 9px; background: var(--accent); border-radius: 50%; }
.x-nav { display: flex; gap: 2px; }
.x-link {
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  padding: 7px 14px; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.x-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

.x-hero {
  position: relative;
  min-height: calc(100vh - 84px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: clamp(60px, 14vh, 150px) 24px 80px;
  isolation: isolate;
}
.x-stage { position: relative; z-index: 2; width: 100%; max-width: 760px; text-align: center; }

/* Hugo's brand signature — animated network of connections */
.hugo-net {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  user-select: none;
}
.hugo-net canvas { display: block; width: 100% !important; height: 100% !important; }

.x-h1 {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(40px, 5.6vw, 66px);
  line-height: 1.04; letter-spacing: -0.032em;
  color: var(--ink);
  margin: 0 0 22px;
  overflow: hidden;
  transition:
    opacity .3s ease,
    max-height .45s cubic-bezier(.32,.72,0,1) .25s,
    margin .45s cubic-bezier(.32,.72,0,1) .25s;
  max-height: 320px;
}
.x-h1.is-faded { opacity: 0; max-height: 0; margin: 0; }
.x-h1-accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.x-sub {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 auto 44px;
  overflow: hidden;
  transition:
    opacity .3s ease,
    max-height .45s cubic-bezier(.32,.72,0,1) .25s,
    margin .45s cubic-bezier(.32,.72,0,1) .25s;
  max-height: 240px;
}
.x-sub.is-faded { opacity: 0; max-height: 0; margin: 0 auto; }
.x-sub strong { color: var(--ink); font-weight: 600; }

/* ========== The morphing TOOL — input → analyzing → result ========== */
.x-tool {
  width: 100%; max-width: 660px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 42px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  transition:
    border-radius .55s cubic-bezier(.32,.72,0,1),
    box-shadow .35s ease,
    border-color .25s ease,
    max-width .55s cubic-bezier(.32,.72,0,1);
}
.x-tool:hover:not(.x-tool--analyzing):not(.x-tool--result) { border-color: var(--line-strong); }
.x-tool:focus-within:not(.x-tool--analyzing):not(.x-tool--result) {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* INPUT row */
.x-tool-input {
  display: flex; align-items: center;
  height: 78px; padding: 0 8px 0 30px; margin: 0;
  transition:
    height .5s cubic-bezier(.32,.72,0,1),
    opacity .3s ease,
    padding .5s cubic-bezier(.32,.72,0,1);
}
.x-tool-input input {
  flex: 1; min-width: 0;
  font-family: var(--font); font-weight: 500;
  font-size: 20px; letter-spacing: -0.01em;
  border: none; outline: none; background: transparent;
  color: var(--ink); padding: 0; height: 100%;
}
.x-tool-input input::placeholder { color: var(--muted); font-weight: 400; }
.x-tool-go {
  flex: 0 0 auto;
  height: 62px; padding: 0 26px;
  background: var(--accent); color: #fff; border: none;
  border-radius: 32px;
  font-family: var(--font); font-weight: 600;
  font-size: 15px; letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .15s ease, transform .1s ease;
}
.x-tool-go:hover { background: var(--accent-dark); }
.x-tool-go:active { transform: translateY(1px); }
.x-tool-go:focus { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }

/* STATUS row */
.x-tool-status {
  display: none;
  align-items: center; gap: 12px;
  padding: 18px 28px 16px;
  font-size: 14.5px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.x-tool-pulse {
  width: 9px; height: 9px;
  background: var(--accent); border-radius: 50%;
  animation: x-tool-pulse 1.4s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes x-tool-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
.x-tool-status-text { font-weight: 500; color: var(--ink); }

/* BODY container */
.x-tool-body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .65s cubic-bezier(.32,.72,0,1), opacity .35s ease;
}

/* Analyzing checklist */
.x-tool-analyzing { padding: 18px 28px 22px; display: block; }
.x-tool-analyzing .steps-list { padding: 0; margin: 0; list-style: none; }
.x-tool-foot {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted);
  font-family: var(--mono); letter-spacing: .06em;
  text-transform: uppercase;
}

/* Result */
.x-tool-result { display: none; padding: 24px 28px 28px; text-align: left; }
.x-result-eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft);
  display: inline-block;
  padding: 5px 11px; border-radius: 999px;
  margin-bottom: 14px;
}
.x-result-title {
  font-family: var(--font); font-weight: 700;
  font-size: 26px; line-height: 1.2; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 14px;
}
.x-result-summary {
  font-size: 15px; color: var(--ink-soft);
  margin: 0 0 14px;
}
.x-result-body { font-size: 15.5px; color: var(--ink-soft); line-height: 1.65; }
.x-result-body h4, .x-result-body h5, .x-result-body h6 {
  color: var(--ink); margin: 18px 0 6px;
  font-size: 15px; font-weight: 700;
}
.x-result-body p { margin: 10px 0; }
.x-result-body ul { padding-left: 22px; margin: 8px 0; }
.x-result-body li { margin: 5px 0; }
.x-result-cta {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.x-result-cta p {
  font-size: 14px; color: var(--ink-soft);
  margin: 0 0 14px; max-width: 52ch;
}

/* ===== State: ANALYZING ===== */
.x-tool--analyzing {
  border-radius: 22px;
  box-shadow: 0 30px 80px -30px rgba(13,19,32,.14);
}
.x-tool--analyzing .x-tool-input {
  height: 0; opacity: 0; pointer-events: none;
  padding-top: 0; padding-bottom: 0;
}
.x-tool--analyzing .x-tool-status { display: flex; }
.x-tool--analyzing .x-tool-body { max-height: 560px; opacity: 1; }

/* ===== State: RESULT ===== */
.x-tool--result {
  border-radius: 22px;
  box-shadow: 0 30px 80px -30px rgba(13,19,32,.14);
  max-width: 720px;
}
.x-tool--result .x-tool-input {
  height: 0; opacity: 0; pointer-events: none;
  padding-top: 0; padding-bottom: 0;
}
.x-tool--result .x-tool-status { display: flex; }
.x-tool--result .x-tool-status .x-tool-pulse { animation: none; }
.x-tool--result .x-tool-body { max-height: none; overflow: visible; opacity: 1; }
.x-tool--result .x-tool-analyzing { display: none; }
.x-tool--result .x-tool-result { display: block; }

.x-micro {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  overflow: hidden;
  transition:
    opacity .3s ease,
    max-height .45s cubic-bezier(.32,.72,0,1) .25s,
    margin .45s cubic-bezier(.32,.72,0,1) .25s;
  max-height: 80px;
}
.x-micro.is-faded { opacity: 0; max-height: 0; margin: 0; }

/* In-fold "how it works" strip — three numbered steps */
.x-steps {
  margin: 56px auto 0;
  display: inline-flex; flex-wrap: wrap; justify-content: center;
  gap: 18px 36px;
  font-size: 14.5px; color: var(--ink-soft);
  overflow: hidden;
  transition:
    opacity .3s ease,
    max-height .45s cubic-bezier(.32,.72,0,1) .25s,
    margin .45s cubic-bezier(.32,.72,0,1) .25s;
  max-height: 160px;
}
.x-steps.is-faded { opacity: 0; max-height: 0; margin: 0 auto; }
.x-step { display: inline-flex; align-items: center; gap: 10px; }
.x-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 26px;
  background: var(--accent-soft);
  border: 1px solid rgba(194, 255, 66, 0.28);
  color: var(--accent);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
}

@media (max-width: 700px) {
  .x-top { padding: 14px 16px; }
  .x-hero { padding: 24px 16px 60px; min-height: auto; }
  .x-h1 { font-size: clamp(32px, 7.6vw, 44px); margin-bottom: 36px; }
  .x-input { height: 64px; padding-left: 22px; padding-right: 6px; border-radius: 36px; }
  .x-input input { font-size: 17px; }
  .x-input-go { height: 52px; padding: 0 20px; font-size: 14px; }
  .x-ticker { font-size: 12px; padding: 7px 14px; flex-wrap: wrap; }
  .x-ticker-play { max-width: 200px; }
}

/* ---- Editorial-warm "Inside a play" section ---- */
.x-section { padding: 110px 24px 60px; }
.x-section-inner { max-width: 880px; margin: 0 auto; }
.x-section-head { text-align: center; max-width: 580px; margin: 0 auto 60px; }
.x-section-eyebrow {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.x-section-title {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.06; letter-spacing: -0.028em;
  color: var(--ink); margin: 0 0 18px;
}
.x-section-lede {
  color: var(--ink-soft); font-size: 17px; line-height: 1.55;
  max-width: 52ch; margin: 0 auto;
}

/* The play mockup */
.x-play {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 40px 30px;
  box-shadow: 0 30px 80px -32px rgba(20,17,13,.12), 0 1px 0 rgba(20,17,13,.02);
  max-width: 720px; margin: 0 auto;
}
.x-play-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.x-play-tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 5px 11px; border-radius: 999px;
  font-weight: 600;
}
.x-play-meta {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--muted);
}
.x-play-title {
  font-family: var(--font); font-weight: 700;
  font-size: 26px; line-height: 1.18; letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 28px;
}
.x-play-block { padding: 16px 0; border-top: 1px solid var(--line); }
.x-play-block:first-of-type { border-top: 1px solid var(--line); }
.x-play-label {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.x-play-block p {
  font-size: 16px; line-height: 1.62; color: var(--ink-soft);
  margin: 0;
}
.x-play-block ol {
  margin: 4px 0 0; padding: 0; list-style: none;
  counter-reset: step;
}
.x-play-block ol li {
  position: relative;
  padding: 7px 0 7px 30px;
  font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  counter-increment: step;
}
.x-play-block ol li::before {
  content: counter(step);
  position: absolute; left: 0; top: 8px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.x-play-block code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: var(--surface-2);
  padding: 2px 6px; border-radius: 4px;
  color: var(--accent-ink);
}
.x-play-foot {
  margin-top: 8px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  align-items: center;
}
.x-foot-key {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  margin-right: 5px;
}
.x-foot-sep { color: var(--line-strong); }

@media (max-width: 700px) {
  .x-section { padding: 70px 18px 40px; }
  .x-play { padding: 28px 22px 22px; border-radius: 16px; }
  .x-play-title { font-size: 22px; }
  .x-play-block p, .x-play-block ol li { font-size: 15px; }
}

/* ==========================================================
   Google-minimal homepage (.g-* — superseded; kept for older selectors)
   ========================================================== */

/* Top bar — brand left + nav right */
.g-topbar {
  position: absolute; top: 0; right: 0; left: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; z-index: 10;
}
.g-brand {
  font-family: var(--font);
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px;
}
.g-brand:hover { text-decoration: none; }
.g-brand::before {
  content: ""; width: 9px; height: 9px;
  background: var(--accent); border-radius: 50%;
}
.g-nav-right { display: flex; gap: 4px; align-items: center; }
.g-toplink {
  color: var(--ink-soft); text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.g-toplink:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

/* Centered stage */
.g-main {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 90px 20px 60px; position: relative;
}

/* Clean URL input — no search icon */
.g-input {
  display: flex; align-items: center;
  width: 100%; max-width: 580px; height: 58px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 0 6px 0 26px;
  transition: box-shadow .15s ease, border-color .15s ease;
  margin: 0 auto;
}
.g-input:hover {
  box-shadow: 0 1px 6px rgba(32,33,36,.18);
  border-color: rgba(0,0,0,0);
}
.g-input:focus-within {
  box-shadow: 0 1px 6px rgba(32,33,36,.28);
  border-color: rgba(0,0,0,0);
}
.g-input input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 17px;
  border: none; outline: none; background: transparent;
  color: var(--ink); padding: 0; height: 100%;
}
.g-input input::placeholder { color: var(--muted); }
.g-input-go {
  flex: 0 0 44px; height: 44px; padding: 0; margin-left: 8px;
  border-radius: 50%; background: var(--accent); border: none;
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, box-shadow .15s ease;
}
.g-input-go:hover { background: var(--accent-dark); }
.g-input-go:focus { outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }

/* How it works — compact strip visible in the fold */
.g-how {
  margin-top: 56px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 26px 38px;
  font-size: 14.5px; color: var(--ink-soft);
}
.g-how-step { display: inline-flex; align-items: center; gap: 10px; }
.g-how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: 0 0 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  color: var(--muted);
}

/* Multi-color wordmark logo */
.g-logo {
  font-family: var(--font);
  font-weight: 500;
  font-size: clamp(54px, 7.4vw, 90px);
  letter-spacing: -0.04em;
  margin: 0 0 38px; line-height: 1;
  user-select: none;
}
.g-logo span { display: inline-block; }

/* Google-style search pill */
.g-search {
  display: flex; align-items: center;
  width: 100%; max-width: 584px; height: 50px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 0 6px 0 16px;
  transition: box-shadow .15s ease, border-color .15s ease;
  margin: 0 auto;
}
.g-search:hover {
  box-shadow: 0 1px 6px rgba(32,33,36,.18);
  border-color: rgba(0,0,0,0);
}
.g-search:focus-within {
  box-shadow: 0 1px 6px rgba(32,33,36,.28);
  border-color: rgba(0,0,0,0);
}
.g-search-icon { display: flex; align-items: center; margin-right: 10px; flex: 0 0 20px; }
.g-search input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 16px;
  border: none; outline: none; background: transparent;
  color: var(--ink); padding: 0; height: 100%;
}
.g-search input::placeholder { color: var(--muted); }
.g-search-go {
  flex: 0 0 38px; height: 38px; padding: 0;
  border-radius: 50%; background: transparent; border: none;
  color: var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.g-search-go:hover, .g-search-go:focus { background: var(--accent-soft); outline: none; }

/* Hint under the search bar */
.g-hint {
  margin-top: 22px;
  font-size: 12px; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
  text-align: center;
}
.g-hint kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 2px 8px; border-radius: 4px;
  color: var(--ink-soft); letter-spacing: 0;
  vertical-align: 1px;
}

/* AI typing message */
.g-ai {
  margin-top: 56px;
  width: 100%; max-width: 620px;
  padding: 0 20px; min-height: 84px;
  text-align: center;
}
.g-ai-text {
  font-size: 17px; line-height: 1.6;
  color: var(--ink-soft); font-weight: 400;
  margin: 0;
}
.g-ai-text::after {
  content: ''; display: inline-block;
  width: 2px; height: 1em;
  background: var(--accent);
  margin-left: 3px; vertical-align: -2px;
  animation: g-cursor-blink 1s steps(1) infinite;
}
@keyframes g-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (max-width: 600px) {
  .g-topbar { padding: 14px 14px; }
  .g-main { padding: 56px 14px 40px; min-height: calc(100vh - 56px); }
  .g-logo { font-size: clamp(46px, 13vw, 64px); margin-bottom: 28px; }
  .g-search { height: 46px; }
  .g-ai { margin-top: 38px; }
  .g-ai-text { font-size: 15.5px; }
}

/* ---- Old layered hero (kept commented so it can be revived; superseded by .g-main) ---- */
.hero {
  position: relative;
  min-height: 820px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero-content { position: relative; z-index: 3; padding: 72px 22px 0; pointer-events: none; }
.hero-text { max-width: 540px; text-align: left; pointer-events: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid #F4C9B5;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 22px;
}
.hero-text h1 {
  font-size: clamp(38px, 4.8vw, 58px);
  font-weight: 800; line-height: 1.06; letter-spacing: -0.025em;
  margin: 0; max-width: 14ch;
}
.hero-text h1 em.hl {
  font-style: italic;
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 0 10px 2px;
  margin: 0 1px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero-text .sub {
  font-size: clamp(16.5px, 1.9vw, 19px);
  color: var(--muted); max-width: 52ch;
  margin: 22px 0 0; line-height: 1.6;
}

/* The Google-style floating input — centered, overlapping everything */
.hero-input {
  position: absolute;
  left: 50%; bottom: 90px;
  transform: translateX(-50%);
  z-index: 4;
  width: 100%; max-width: 660px;
  padding: 0 22px;
  pointer-events: auto;
}
.hero-input .analyzer-card {
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 80px -28px rgba(31,19,32,.35), 0 4px 14px rgba(31,19,32,.06);
  border-color: rgba(255,255,255,.85);
}
.hero-input .trust { margin-top: 22px; justify-content: center; }

@media (max-width: 920px) {
  .hero { min-height: auto; padding: 50px 0 32px; }
  .hero-content { padding: 0 22px; }
  .hero-text h1 { font-size: clamp(36px, 9vw, 52px); max-width: none; }
  .hero-input { position: relative; left: auto; bottom: auto; transform: none; margin: 30px auto 0; padding: 0 22px; }
}

/* ---- 3D glass-panel stack (right-side, not behind the text) ---- */
.hero-3d {
  position: absolute;
  top: 0; right: 0;
  width: min(62%, 880px);
  height: 100%;
  z-index: 1;
  user-select: none;
  pointer-events: auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 55%, rgba(226,94,62,.08), transparent 60%),
    radial-gradient(ellipse at 90% 25%, rgba(218,75,154,.06), transparent 55%);
}
.hero-3d canvas { display: block; width: 100% !important; height: 100% !important; }
/* Soft fade on the LEFT edge — blends the stack into the cream so the text breathes */
.hero-3d::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 32%;
  background: linear-gradient(to right, var(--bg), transparent);
  pointer-events: none; z-index: 2;
}
/* Soft fade at the BOTTOM — clean halo behind the floating input */
.hero-3d::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(to bottom, transparent, var(--bg) 85%);
  pointer-events: none; z-index: 2;
}
@media (max-width: 920px) {
  .hero-3d { position: relative; top: auto; right: auto; width: 100%; height: 230px; margin-top: 28px; }
  .hero-3d::before, .hero-3d::after { display: none; }
}

/* ---- Analyzer card ---- */
.analyzer { max-width: 680px; margin: 36px auto 0; }
.analyzer-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: 10px; text-align: left;
}
.toggle {
  display: inline-flex; background: var(--surface-2); border-radius: 9px; padding: 4px; gap: 4px; margin: 6px 6px 12px;
}
.toggle button {
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--muted);
  border: none; background: transparent; padding: 7px 14px; border-radius: 7px; cursor: pointer;
}
.toggle button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.field-row { display: flex; gap: 10px; padding: 0 6px 6px; align-items: stretch; }
.field-row.col { flex-direction: column; }
.analyzer input[type=text], .analyzer textarea {
  flex: 1; font-family: inherit; font-size: 16px; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 11px; padding: 14px 16px; background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s; width: 100%;
}
.analyzer textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.analyzer input:focus, .analyzer textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hint { padding: 8px 12px 6px; color: var(--muted); font-size: 13.5px; text-align: center; }
.hint strong { color: var(--ink-soft); }
.trust { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 26px; color: var(--muted); font-size: 14px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }
.check { color: var(--accent); font-weight: 700; }

/* ---- Loading ---- */
/* legacy .loading rules superseded by .x-tool morph state — kept inert */
.loading { /* no-op; the morphing .x-tool now drives visibility */ }
.loading.show { /* no-op */ }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--accent-soft); border-top-color: var(--accent);
  margin: 0 auto 16px; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading .status { color: var(--ink-soft); font-weight: 500; min-height: 24px; transition: opacity .2s; }

/* Premium analyzing card with step checklist */
.analyzing-card {
  max-width: 460px; margin: 0 auto; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 24px 26px;
}
.analyzing-head { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 16px; color: var(--ink); padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.spinner-sm { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; flex: 0 0 auto; }
.steps-list { list-style: none; margin: 12px 0 0; padding: 0; }
.step-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 15px; transition: color .25s; }
.step-row .step-ico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all .25s; }
/* pending */
.step-row.pending { color: var(--muted); }
.step-row.pending .step-ico { border: 2px solid var(--line-strong); background: transparent; }
/* active */
.step-row.active { color: var(--ink); font-weight: 600; }
.step-row.active .step-ico { border: 2.5px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; }
/* done */
.step-row.done { color: var(--ink-soft); }
.step-row.done .step-ico { background: var(--accent); border: 2px solid var(--accent); }
.step-row.done .step-ico::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.analyzing-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* ---- Results ---- */
.results { display: none; padding-top: 26px; }
.results.show { display: block; }
.results-head { text-align: center; margin-bottom: 10px; }
.results-head .summary { color: var(--ink-soft); max-width: 60ch; margin: 12px auto 0; font-size: 16.5px; }
.section-label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }

.strategy-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px; box-shadow: var(--shadow-md); margin-top: 18px; position: relative;
}
.strategy-card h2 { font-size: 24px; margin: 8px 0 4px; }
.strategy-card .meta { color: var(--muted); font-size: 14px; }
.strategy-body { margin-top: 14px; color: var(--ink-soft); font-size: 16px; }
.strategy-body h4, .strategy-body h5, .strategy-body h6 { color: var(--ink); margin: 20px 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.strategy-body p { margin: 10px 0; }
.strategy-body ul { margin: 8px 0; padding-left: 22px; }
.strategy-body li { margin: 6px 0; }
.strategy-body code { font-family: var(--mono); font-size: 13.5px; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.strategy-body a { text-decoration: underline; text-underline-offset: 2px; }
.result-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.6; }
.result-note strong { color: var(--accent-ink); }

/* Locked teaser cards */
.locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.locked-card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px 30px; overflow: hidden; min-height: 230px;
}
.locked-card h3 { font-size: 19px; margin: 8px 0 12px; }
.locked-blur { filter: blur(6px); user-select: none; pointer-events: none; opacity: .9; }
.locked-blur p { margin: 9px 0; color: var(--ink-soft); }
.locked-bar { height: 11px; border-radius: 6px; background: var(--surface-2); margin: 9px 0; }
.locked-bar.w90 { width: 90%; } .locked-bar.w70 { width: 70%; } .locked-bar.w80 { width: 80%; } .locked-bar.w60 { width: 60%; }
.locked-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 22px; gap: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.92) 100%);
}
.lock-pill {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  color: var(--accent-ink); background: var(--accent-soft); border: 1px solid #F4C9B5;
  padding: 6px 13px; border-radius: 999px;
}

/* Email-me-this-play capture */
.email-capture { margin-top: 16px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.email-capture .ec-prompt { font-weight: 600; color: var(--ink-soft); font-size: 15px; }
.email-capture form { display: flex; gap: 8px; flex: 1; min-width: 260px; justify-content: flex-end; }
.email-capture input { flex: 1; max-width: 280px; font-family: inherit; font-size: 14.5px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 9px; outline: none; }
.email-capture input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.email-capture .ec-done { display: none; color: var(--accent-ink); font-weight: 600; font-size: 14.5px; }

/* Paywall */
.paywall {
  margin-top: 22px; background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 34px 34px; text-align: center; box-shadow: var(--shadow-lg);
}
.paywall h2 { color: #fff; font-size: 27px; max-width: 22ch; margin: 0 auto; }
.paywall p { color: #b9c0cc; max-width: 52ch; margin: 14px auto 0; }
.paywall-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FCB89A; margin-bottom: 14px; }
.paywall-points { list-style: none; padding: 0; margin: 20px auto 0; max-width: 44ch; text-align: left; }
.paywall-points li { color: #dbe0e8; font-size: 15px; padding: 7px 0 7px 28px; position: relative; line-height: 1.5; }
.paywall-points li::before { content: "✓"; position: absolute; left: 0; top: 7px; color: #F08A6C; font-weight: 800; }
.paywall-points em { color: #fff; font-style: normal; font-weight: 600; }
.paywall .price { font-size: 16px; color: #fff; margin-top: 18px; font-weight: 600; }
.paywall .price b { font-size: 30px; }
.paywall .btn-primary { margin-top: 18px; }
.paywall .fineprint { color: #8a93a3; font-size: 13px; margin-top: 14px; }

/* ---- Generic sections ---- */
.section { padding: 64px 0; }
.section-tight { padding: 44px 0; }
.section h2.center { text-align: center; font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; }
.section .lede { text-align: center; color: var(--muted); max-width: 56ch; margin: 14px auto 0; font-size: 18px; }
.divider { border: none; border-top: 1px solid var(--line); margin: 0; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.step .num { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15px; }

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }

/* FAQ */
.faq { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16.5px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 700; font-size: 20px; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0; padding: 0 22px 20px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.65; }
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
.contrast .col { border-radius: var(--radius); padding: 28px; border: 1px solid var(--line); }
.contrast .bad { background: var(--surface-2); }
.contrast .good { background: var(--accent-soft); border-color: #F4C9B5; }
.contrast h3 { font-size: 17px; margin-bottom: 14px; }
.contrast ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.contrast li { margin: 9px 0; }
.contrast .bad li { color: var(--muted); }

/* Pricing */
.pricing-card {
  max-width: 460px; margin: 40px auto 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 38px; box-shadow: var(--shadow-md); text-align: center;
}
.pricing-card .amount { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; }
.pricing-card .amount span { font-size: 18px; color: var(--muted); font-weight: 600; }
.pricing-card ul { list-style: none; padding: 0; margin: 24px 0; text-align: left; }
.pricing-card li { padding: 9px 0; color: var(--ink-soft); display: flex; gap: 10px; align-items: flex-start; }
.pricing-card li::before { content: "✓"; color: var(--accent); font-weight: 800; }
.pricing-card .price-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* Billing term toggle (monthly / annual) */
.bill-toggle { display: flex; width: max-content; max-width: 100%; margin: 8px auto 22px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.bill-toggle button { font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); border: none; background: transparent; padding: 9px 18px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bill-toggle button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.bill-toggle .save { font-size: 11px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; }
.bill-toggle button.active .save { background: var(--accent); color: #fff; }
.modal-bill { width: 100%; margin: 4px 0 10px; }
.modal-bill button { flex: 1; justify-content: center; font-size: 13px; padding: 10px 6px; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--line); padding: 36px 0; color: var(--muted); font-size: 14px; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(62,21,23,.5); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-backdrop.show { display: flex; }
.modal {
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 460px; padding: 32px; max-height: 92vh; overflow-y: auto;
}
.modal h2 { font-size: 24px; }
.modal .modal-sub { color: var(--muted); margin: 8px 0 22px; font-size: 15px; }
.modal label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 6px; color: var(--ink-soft); }
.modal input, .modal textarea {
  width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.modal textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.modal input:focus, .modal textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.modal .testnote { background: var(--accent-soft); color: var(--accent-ink); border-radius: 10px; padding: 10px 13px; font-size: 13px; margin: 18px 0 0; }
.modal .swap { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.modal-close { float: right; border: none; background: none; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }

/* ---- Auth pages ---- */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 64px); padding: 30px 18px; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-md); padding: 34px; }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin-bottom: 22px; }
.auth-card label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; color: var(--ink-soft); }
.auth-card input { width: 100%; font-family: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 10px; outline: none; }
.auth-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* ---- Alerts ---- */
.alert { padding: 12px 16px; border-radius: 10px; font-size: 14.5px; margin-bottom: 16px; }
.alert-error { background: #fdecec; color: #a31919; border: 1px solid #f6cccc; }
.alert-info { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--line-strong); }
.form-error { color: var(--danger); font-size: 14px; margin-top: 10px; min-height: 18px; }

/* ---- Dashboard ---- */
.dash { padding: 40px 0 70px; }
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-head h1 { font-size: 30px; }
.dash-head .muted { color: var(--muted); margin-top: 6px; }
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--line-strong); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.value-strip { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); color: var(--muted); font-size: 14px; }
.value-strip b { color: var(--ink); font-size: 17px; font-weight: 800; margin-right: 4px; }
.dash-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; margin-top: 26px; align-items: start; }
.strategy-list { display: flex; flex-direction: column; gap: 16px; }
.s-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.s-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.s-item summary::-webkit-details-marker { display: none; }
.s-item .s-title { font-weight: 700; font-size: 17.5px; letter-spacing: -0.01em; }
.s-item .s-date { color: var(--muted); font-size: 13px; white-space: nowrap; }
.s-item .s-sum { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.s-item .s-body { padding: 0 24px 24px; border-top: 1px solid var(--line); }
.s-item[open] summary { padding-bottom: 14px; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 8px; border-radius: 6px; }
.tag-dim { color: var(--ink-soft); background: var(--surface-2); letter-spacing: .02em; text-transform: none; }
.s-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.aside-card { padding: 22px; }
.aside-card h3 { font-size: 16px; margin-bottom: 12px; }
.aside-card label { font-weight: 600; font-size: 13px; color: var(--ink-soft); display: block; margin: 12px 0 5px; }
.aside-card input, .aside-card textarea, .aside-card select { width: 100%; font-family: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 9px; outline: none; background: #fff; }
.aside-card textarea { min-height: 110px; resize: vertical; }
.social-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.social-row select { flex: 0 0 38%; padding: 9px 8px; }
.social-row input { flex: 1; }
.social-remove { flex: 0 0 auto; width: 30px; height: 34px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); border-radius: 8px; cursor: pointer; font-size: 17px; line-height: 1; }
.social-remove:hover { background: #fdecec; color: var(--danger); border-color: #f0c4c4; }
.empty { padding: 50px 30px; text-align: center; color: var(--muted); }

/* ---- Admin ---- */
.admin { padding: 40px 0 70px; }
.admin h1 { font-size: 28px; }
.admin-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 18px 0 24px; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: middle; }
.table th { background: var(--surface-2); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.table tr:last-child td { border-bottom: none; }
.table .email { font-weight: 600; }
.send-status { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.dot-spin { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: spin .8s linear infinite; display: inline-block; }
.tick { color: var(--ok); font-weight: 800; }
.cross { color: var(--danger); font-weight: 800; }

/* ---- Admin metrics ---- */
.metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 8px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.metric .m-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.metric .m-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; color: var(--ink); }
.metric.m-accent { background: var(--accent-soft); border-color: #E7CFC6; }
.metric.m-accent .m-value { color: var(--accent-ink); }

/* Admin toolbar + filters */
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 18px; }
.filter-tabs { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 4px; gap: 4px; }
.filter-tabs a { padding: 7px 16px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--muted); }
.filter-tabs a:hover { text-decoration: none; color: var(--ink); }
.filter-tabs a.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* User cards */
.user-list { display: flex; flex-direction: column; gap: 14px; }
.user-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 22px; }
.uc-main { display: grid; grid-template-columns: 1.4fr 1.3fr auto; gap: 16px; align-items: center; }
.uc-email { font-weight: 700; font-size: 16px; }
.uc-biz { color: var(--muted); font-size: 13.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.uc-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); }
.uc-stat b { color: var(--ink); }
.uc-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.inline-form { margin: 0; display: inline; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.uc-noplays { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.uc-plays { margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.uc-plays > summary { list-style: none; cursor: pointer; color: var(--accent-dark); font-weight: 600; font-size: 14px; padding: 8px 0 4px; }
.uc-plays > summary::-webkit-details-marker { display: none; }
.uc-plays > summary::before { content: "▸ "; }
.uc-plays[open] > summary::before { content: "▾ "; }
.uc-plays-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.s-mini { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.s-mini > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.s-mini > summary::-webkit-details-marker { display: none; }
.sm-title { font-weight: 600; font-size: 15px; }
.sm-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.s-mini-sum { padding: 2px 16px 0; color: var(--muted); font-size: 13.5px; }
.s-mini .strategy-body { padding: 8px 16px 16px; font-size: 14.5px; }

/* ---- Dashboard: new / unread ---- */
.new-banner {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  background: var(--accent-soft); border: 1px solid #F4C9B5; color: var(--accent-ink);
  border-radius: var(--radius); padding: 16px 20px; font-weight: 600; font-size: 15.5px;
}
.new-banner .nb-emoji { font-size: 20px; }
.pill-new {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--lime-ink); background: var(--lime); padding: 3px 8px; border-radius: 999px;
}
.s-item.is-new { border-color: #F4C9B5; box-shadow: 0 0 0 3px var(--accent-soft); }

/* Per-play flag states */
.s-item.is-star { border-color: #f4d35e; box-shadow: inset 4px 0 0 #f2c029; background: #fffdf4; }
.s-item.is-done { opacity: .68; }
.s-item.is-done .s-title-text { text-decoration: line-through; text-decoration-color: var(--muted); }
.s-flag-ind { color: #e0a800; font-weight: 800; margin-right: 2px; }
.s-item.is-done .s-flag-ind { color: var(--accent); }
.s-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; position: relative; }

/* Play status menu */
.s-menu { position: relative; margin-top: 4px; }
.s-menu-btn {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted);
  width: 30px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.s-menu-btn:hover { background: var(--surface-2); color: var(--ink); }
.s-menu-list {
  position: absolute; right: 0; top: calc(100% + 6px); width: 170px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-md); padding: 6px; display: none;
}
.s-menu.open .s-menu-list { display: block; }
.s-menu-list button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink-soft); padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.s-menu-list button:hover { background: var(--surface-2); }

/* Outcome feedback */
.outcome { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.outcome-q { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.outcome-why { color: var(--muted); font-size: 13px; margin: 4px 0 12px; max-width: 64ch; }
.outcome-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.outcome-opts button { font-family: inherit; font-size: 14px; font-weight: 700; border: none; background: var(--surface-2); color: var(--ink); padding: 10px 16px; border-radius: 999px; cursor: pointer; transition: background .12s, color .12s, transform .08s; }
.outcome-opts button:hover { background: #E9DCC0; }
.outcome-opts button:active { transform: translateY(1px); }
.outcome-opts .oc-worked.sel { background: #BDD800; color: #142600; }
.outcome-opts .oc-trying.sel { background: #F3B43C; color: #3E1517; }
.outcome-opts .oc-failed.sel { background: #E0492B; color: #fff; }

/* Legal pages */
.legal { padding: 50px 0 70px; }
.legal h1 { font-size: 32px; margin-bottom: 6px; }
.legal .legal-meta { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.legal h2 { font-size: 19px; margin: 28px 0 8px; color: var(--ink); }
.legal p, .legal li { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }

/* Toast */
.gb-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  padding: 11px 20px; border-radius: 999px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 200;
}
.gb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.copy-play { margin-bottom: 12px; }

/* Admin: free-runs table */
.url-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.url-table th, .url-table td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.url-table th { background: var(--surface-2); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.url-table tr:last-child td { border-bottom: none; }
.url-table .conv-yes { color: var(--ok); font-weight: 600; }
.url-table .conv-no { color: var(--muted); }
.avatar { position: relative; }
.avatar.has-unread::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px;
  background: var(--orange); border: 2px solid var(--bg); border-radius: 50%;
}

@media (max-width: 760px) {
  .steps, .contrast, .feature-grid, .locked-grid, .dash-grid { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 18px; }
  .strategy-card, .paywall { padding: 24px 20px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .uc-main { grid-template-columns: 1fr; gap: 10px; }
  .uc-actions { justify-content: flex-start; }
}

/* ============================================================
   LANDING PAGE REDESIGN — scoped to <body class="lp">
   Warm cream + deep maroon, with bold "bento" pops of colour.
   Redefining the design tokens on .lp recolours every existing
   landing component; the rules below add the new structure.
   ============================================================ */
.lp {
  --bg:          #FFF8ED;   /* page cream */
  --surface:     #FCF7EA;   /* cards / bubble */
  --surface-2:   #F1E7CC;   /* inset / toggles */
  --ink:         #3E1517;   /* deep maroon — text + primary */
  --ink-soft:    #6E4A3E;
  --muted:       #9C8472;
  --line:        #E5D7B8;
  --line-strong: #D2BF98;
  --accent:      #3E1517;   /* primary action = maroon */
  --accent-dark: #561E20;
  --accent-soft: #EFDFDA;
  --accent-ink:  #3E1517;
  /* the pops, straight from the reference */
  --yellow: #F3B43C;
  --blue:   #2E7BE4;
  --pink:   #EFA4C9;
  --orange: #E85E2B;
  --lime:   #AAD635;
  --cream-on-dark: #FBF3E4;
}

/* ---- Header ---- */
/* Header + hero share one green field (the frog). */
.lp .x-top { padding: 22px 30px; background: #BDD800; }
.lp .x-brand { font-weight: 800; font-size: 18px; color: #2B0A0B; }
.lp .x-dot { width: 11px; height: 11px; background: #441316; box-shadow: none; }
.lp .x-link { color: #3E1517; font-size: 14px; font-weight: 600; }
.lp .x-link:hover { background: rgba(68,19,22,.1); color: #2B0A0B; }

/* ---- Hero ---- */
.lp .x-hero {
  min-height: calc(100vh - 84px);
  justify-content: center;
  padding: 32px 24px 72px;
  background: #BDD800;
}

/* ---- Hugo: the greeting (blob + typed speech bubble) ---- */
/* Reserve a fixed block and anchor content to the BOTTOM (eyes sit just above
   the input). The bubble sizes to its text and grows upward into the reserved
   space, so the input never moves. */
.lp-greet {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 24px; margin: 0 auto 30px;
  min-height: 150px; max-height: 240px; overflow: visible;
  transition:
    opacity .3s ease,
    max-height .45s cubic-bezier(.32,.72,0,1) .25s,
    min-height .45s cubic-bezier(.32,.72,0,1) .25s,
    margin .45s cubic-bezier(.32,.72,0,1) .25s;
}
.lp-greet.is-faded { opacity: 0; min-height: 0; max-height: 0; margin: 0; overflow: hidden; }

.hugo-bubble {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border: none;
  border-radius: 22px;
  padding: 14px 24px;
  width: 460px; max-width: 88vw;
  color: var(--ink);
  font-size: 17.5px; font-weight: 600; line-height: 1.42; letter-spacing: -0.01em;
  text-align: center;
  box-shadow: none;
}
.hugo-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -8px;
  width: 16px; height: 16px;
  transform: translateX(-50%) rotate(45deg);
  background: #ffffff;
  border: none;
  border-bottom-right-radius: 5px;
}
.hugo-caret { display: none; }

/* Frhog is two eyes — solid dots. The wrapper darts around (JS sets transform);
   each eye blinks on its own (JS adds .blink), frog-style — sometimes together,
   sometimes just one. Blink = squash, snap to a solid line (— —), open. */
.hugo {
  position: relative; display: flex; gap: 13px; align-items: center;
  will-change: transform;
  transition: transform .06s cubic-bezier(.4, 0, .2, 1);
}
.eye { display: block; width: 14px; height: 14px; }
.eye-ball {
  display: block; width: 100%; height: 100%;
  background: var(--ink); border-radius: 50%;
  transform-origin: center;
}
.eye-ball.blink { animation: eye-blink .2s ease-in-out; }
@keyframes eye-blink {
  0%       { transform: scaleX(1) scaleY(1);     border-radius: 50%; }
  35%      { transform: scaleX(1) scaleY(.5);    border-radius: 50%; }  /* squash */
  50%, 62% { transform: scaleX(1.4) scaleY(.14); border-radius: 2px; }  /* wide solid line */
  100%     { transform: scaleX(1) scaleY(1);     border-radius: 50%; }  /* open */
}

/* Frhog, shrunk into the tool window: two pink (tongue) eyes that spin like a
   thinking/loading indicator while analyzing, then settle to a calm blink. */
.lp .x-tool-pulse {
  position: relative; width: 24px; height: 24px; flex: 0 0 24px;
  background: transparent; border-radius: 0; box-shadow: none; animation: none;
}
.lp .x-tool-pulse::before,
.lp .x-tool-pulse::after {
  content: ''; position: absolute; top: 50%; margin-top: -4px;
  width: 8px; height: 8px; border-radius: 50%; background: #FF9FC8;
  transform-origin: center;
}
.lp .x-tool-pulse::before { left: 1px; }
.lp .x-tool-pulse::after  { right: 1px; }
/* thinking → the pair orbits (spins) */
.lp .x-tool--analyzing .x-tool-pulse { animation: spin .85s linear infinite; }
/* result → calm, gentle blink */
.lp .x-tool--result .x-tool-pulse::before,
.lp .x-tool--result .x-tool-pulse::after { animation: eye-blink-loop 5s ease-in-out infinite; }
@keyframes eye-blink-loop {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.16); }
}
/* Brand motion (eyes, typing, FAQ) intentionally runs regardless of reduce-motion. */

/* ---- The morphing tool ---- */
/* Input field: one flat solid colour, no border, no shadow. */
.lp .x-tool {
  border: none; border-radius: 40px; background: #441316;
  box-shadow: none; transition: background-color .4s ease, border-radius .55s cubic-bezier(.32,.72,0,1), max-width .55s cubic-bezier(.32,.72,0,1);
}
.lp .x-tool:focus-within:not(.x-tool--analyzing):not(.x-tool--result) {
  border: none; box-shadow: none;
}
/* It STAYS brown when it morphs into the working/result window — light text,
   pink (tongue) accents. No colour change on submit. */
.lp .x-tool-input input { color: #fff; caret-color: #FF9FC8; }
.lp .x-tool-input input::placeholder { color: rgba(255,255,255,.6); }
.lp .x-tool-go { background: #FF9FC8; color: #590002; border-radius: 30px; font-weight: 700; }
.lp .x-tool-go:hover { background: #ffb1d3; color: #590002; }
.lp .x-tool-go:focus { box-shadow: none; }

/* In-window content on the brown card */
.lp .x-tool-status { border-bottom-color: rgba(255,255,255,.14); }
.lp .x-tool-status-text { color: #FFF1F6; }
.lp .x-tool-foot { color: rgba(255,241,246,.5); border-top-color: rgba(255,255,255,.12); }
.lp .x-tool .step-row.pending { color: rgba(255,241,246,.45); }
.lp .x-tool .step-row.pending .step-ico { border-color: rgba(255,255,255,.3); }
.lp .x-tool .step-row.active { color: #fff; }
.lp .x-tool .step-row.active .step-ico { border-color: rgba(255,159,200,.45); border-top-color: #FF9FC8; }
.lp .x-tool .step-row.done { color: rgba(255,241,246,.72); }
.lp .x-tool .step-row.done .step-ico { background: #FF9FC8; border-color: #FF9FC8; }
.lp .x-tool .step-row.done .step-ico::after { color: #590002; }
.lp .x-result-eyebrow { background: #FF9FC8; color: #590002; font-weight: 700; }
.lp .x-result-title { color: #FFF1F6; }
.lp .x-result-summary { color: rgba(255,241,246,.72); }
.lp .x-result-body { color: rgba(255,241,246,.82); }
.lp .x-result-body h4, .lp .x-result-body h5, .lp .x-result-body h6 { color: #fff; }
.lp .x-result-body code { background: rgba(255,255,255,.1); color: #FFD9E7; }
.lp .x-result-body a { color: #FF9FC8; }
.lp .x-result-cta { border-top-color: rgba(255,255,255,.14); }
.lp .x-result-cta p { color: rgba(255,241,246,.8); }
.lp .x-micro { color: #43130F; font-weight: 500; }

/* Result teaser (locked) cards — on the brown window */
.lp .locked-card { background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14); border-radius: 14px; }
.lp .locked-card h3 { color: #FFF1F6; }
.lp .section-label { color: rgba(255,241,246,.6); }
.lp .locked-bar { background: rgba(255,255,255,.16); }
.lp .lock-pill { background: #FF9FC8; color: #590002; }
.lp .locked-overlay { background: linear-gradient(180deg, rgba(68,19,22,0) 0%, rgba(68,19,22,.6) 55%, rgba(68,19,22,.94) 100%); }

/* ---- Sections ---- */
.lp .section { padding: 92px 0; }
.lp .section h2.center,
.lp .section h2 {
  font-family: "Oswald", var(--font);
  text-transform: uppercase;
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 700; line-height: 1.0; letter-spacing: 0.006em;
  color: var(--ink);
}
.lp .lede { color: var(--ink-soft); font-size: 18px; max-width: 60ch; margin: 16px auto 0; }
.lp .divider { border: none; border-top: 1px solid var(--line-strong); opacity: .5; margin: 0; }

/* ---- Bento cards: How it works (3) ---- */
.lp .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.lp .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
.lp .step {
  background: var(--yellow); border: none; border-radius: 8px;
  padding: 30px 28px 34px; color: var(--ink); box-shadow: none; position: relative;
}
.lp .step h3 { color: inherit; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; margin: 14px 0 8px; }
.lp .step p { color: inherit; opacity: .86; font-size: 15px; line-height: 1.55; }
.lp .step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--ink);
  font-weight: 800; font-size: 18px;
}
.lp .steps .step:nth-child(1) { background: var(--yellow); }
.lp .steps .step:nth-child(2) { background: var(--blue);  color: var(--cream-on-dark); }
.lp .steps .step:nth-child(3) { background: var(--pink); }
.lp .feature-grid .step:nth-child(1) { background: var(--orange); color: var(--cream-on-dark); }
.lp .feature-grid .step:nth-child(2) { background: var(--lime); }
.lp .feature-grid .step:nth-child(3) { background: var(--ink);   color: var(--cream-on-dark); }
.lp .feature-grid .step:nth-child(4) { background: var(--blue);  color: var(--cream-on-dark); }

/* ---- FAQ ---- */
.lp .faq details {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 18px; padding: 2px 22px; margin-bottom: 12px;
}
.lp .faq summary { font-weight: 700; color: var(--ink); padding: 16px 0; font-size: 16.5px; }
.lp .faq p { color: var(--ink-soft); padding-bottom: 18px; }

/* ---- Pricing ---- */
.lp .bill-toggle {
  background: var(--surface-2); border-radius: 999px; padding: 5px;
  display: flex; width: fit-content; gap: 4px; border: none; margin: 24px auto 0;
}
.lp .bill-toggle button {
  border: none; background: transparent; padding: 9px 18px; border-radius: 999px;
  font-weight: 700; font-size: 14px; color: var(--ink-soft); cursor: pointer;
}
.lp .bill-toggle button.active { background: var(--ink); color: var(--cream-on-dark); }
.lp .bill-toggle .save { color: inherit; opacity: .85; font-weight: 600; }

.lp .pricing-card {
  background: var(--ink); color: var(--cream-on-dark);
  border: none; border-radius: 32px; padding: 42px;
  max-width: 540px; margin: 30px auto 0;
  box-shadow: 0 44px 90px -44px rgba(62,21,23,.55);
}
.lp .pricing-card .amount { font-family: "Oswald", var(--font); color: var(--cream-on-dark); font-weight: 700; font-size: 60px; letter-spacing: 0.005em; }
.lp .pricing-card .amount span { color: rgba(251,243,228,.6); font-size: 18px; font-weight: 600; }
.lp .pricing-card .price-sub { color: rgba(251,243,228,.72); }
.lp .pricing-card ul li { color: rgba(251,243,228,.92); }
.lp .pricing-card .btn-primary { background: var(--cream-on-dark); color: var(--ink); }
.lp .pricing-card .btn-primary:hover { background: #fff; color: var(--ink); }
.lp .pricing-card .fineprint { color: rgba(251,243,228,.6) !important; }
.lp .pricing-card .fineprint a { color: var(--lime); }

/* ---- Signup modal ---- */
.lp .modal { background: var(--surface); border: 1.5px solid var(--line); border-radius: 26px; }
.lp .modal h2, .lp .modal label { color: var(--ink); }
.lp .modal .modal-sub { color: var(--ink-soft); }
.lp .modal input, .lp .modal textarea {
  background: var(--surface-2); border: 1.5px solid var(--line);
  border-radius: 12px; color: var(--ink);
}
.lp .modal input:focus, .lp .modal textarea:focus {
  border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px var(--accent-soft);
}
.lp .modal .btn-primary { background: #BDD800; color: #142600; }
.lp .modal .btn-primary:hover { background: #cbe61f; color: #142600; }
.lp .modal-bill button.active { background: var(--ink); color: var(--cream-on-dark); }
.lp .testnote { color: var(--muted); }
.lp .swap a { color: var(--accent-dark); }

/* ---- Footer ---- */
.lp .footer { background: transparent; border-top: 1px solid var(--line-strong); color: var(--muted); }
.lp .footer a { color: var(--ink-soft); }

/* ---- Responsive ---- */
@media (max-width: 760px) {
  .lp .steps, .lp .feature-grid { grid-template-columns: 1fr; }
  .hugo-bubble { font-size: 15.5px; max-width: 88vw; }
  .hugo { gap: 11px; }
  .hugo .eye { width: 12px; height: 12px; }
  .lp .x-hero { padding-top: 18px; min-height: auto; }
}

/* ---- FAQ: smooth accordion ---- */
.lp .faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.lp .faq summary::-webkit-details-marker { display: none; }
.lp .faq summary::after {
  content: '+'; flex: 0 0 auto;
  font-family: var(--font); font-weight: 400; font-size: 26px; line-height: 1;
  color: var(--ink); opacity: .6;
  transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .2s ease;
}
.lp .faq details[open] summary::after { transform: rotate(45deg); opacity: 1; }
.lp .faq .faq-anim {
  overflow: hidden;
  transition: height .34s cubic-bezier(.32,.72,0,1);
  will-change: height;
}

/* ---- Bento card icons (solid, before the title) ---- */
.lp .step .bento-ico { display: inline-flex; margin-bottom: 14px; }
.lp .step .bento-ico svg { width: 30px; height: 30px; display: block; }

/* ---- "Working…" animated dots in the tool foot ---- */
.lp .x-tool-foot { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.working-dots::after { content: ''; animation: working-dots 1.4s steps(1, end) infinite; }
@keyframes working-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* ---- More scannable strategy bodies (result window + dashboard) ---- */
.strategy-body h4, .strategy-body h5, .strategy-body h6 {
  margin: 26px 0 10px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; opacity: .9;
}
.x-result-body h4, .x-result-body h5, .x-result-body h6 { margin: 26px 0 10px; }
.strategy-body ol { margin: 10px 0; padding: 0; list-style: none; counter-reset: step; }
.strategy-body ol > li {
  position: relative; counter-increment: step;
  padding-left: 38px; margin: 12px 0; line-height: 1.6;
}
.strategy-body ol > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--accent-soft); color: var(--accent-ink);
}
.strategy-body ul { margin: 10px 0; padding-left: 4px; list-style: none; }
.strategy-body ul > li { position: relative; padding-left: 20px; margin: 8px 0; line-height: 1.6; }
.strategy-body ul > li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55;
}
.strategy-body p { margin: 11px 0; }

/* On the brown result window, the step numbers + bullets use the pink (tongue) accent */
.lp .x-result-body ol > li::before { background: #FF9FC8; color: #590002; }
.lp .x-result-body ul > li::before { background: #FF9FC8; opacity: 1; }

/* ---- Frhog mark (inline SVG logo) ---- */
.brand .brand-mark, .x-brand .brand-mark { height: 20px; width: auto; display: block; flex: 0 0 auto; }
.footer-brand { display: inline-flex; align-items: center; }
.footer-mark { display: inline-flex; align-items: center; margin-right: 9px; color: var(--ink); }
.footer-mark svg { height: 17px; width: auto; display: block; }
.auth-mark { display: inline-flex; color: var(--ink); margin-bottom: 18px; }
.auth-mark svg { height: 32px; width: auto; display: block; }
.auth-mark:hover { text-decoration: none; }

/* ---- Easier-on-the-eyes strategy text ---- */
.strategy-body { font-size: 16px; line-height: 1.72; }
/* The opening "Why this fits you" paragraph reads as a larger lead. */
.strategy-body > p:first-child {
  font-size: 18.5px; line-height: 1.6; margin: 2px 0 20px; font-weight: 500;
}
.strategy-body > p:first-child strong { font-weight: 700; }

/* ---- Playful motion: toggle pop + FAQ "jump" open ---- */
/* Monthly/Annual toggle: quick bounce when a side becomes active */
.lp .bill-toggle button { transition: color .15s ease, background-color .2s ease; }
.lp .bill-toggle button.active { animation: toggle-pop .3s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes toggle-pop {
  0%   { transform: scale(.84); }
  100% { transform: scale(1); }
}

/* FAQ answers jump open with a little overshoot */
.lp .faq .faq-anim { transition: height .3s cubic-bezier(.34, 1.56, .64, 1); }
.lp .faq summary::after { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; }

/* ============================================================
   LOGGED-IN AREA — jumps grid, single-jump page, business page
   ============================================================ */

/* Dashboard header CTA + soft onboarding banner */
.new-banner.nb-soft { background: #FCEFC8; border-color: #F0DC9A; color: #7A5A12; }

/* ---- Jumps grid (clickable cards, no inline expand) ---- */
.jump-grid {
  margin-top: 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.jump-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 20px 20px 16px;
  color: var(--ink); text-decoration: none;
  transition: transform .14s cubic-bezier(.34,1.4,.64,1), box-shadow .18s ease, border-color .18s ease;
  min-height: 168px;
}
.jump-card:hover {
  text-decoration: none; transform: translateY(-3px);
  border-color: var(--ink); box-shadow: var(--shadow-md);
}
.jc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jc-num {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  letter-spacing: .04em; color: var(--ink-soft);
}
.jc-hash { font-weight: 800; }
.jc-title {
  font-family: var(--font); font-size: 18px; font-weight: 700; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--ink); margin: 2px 0 0;
}
.jc-flag { color: #E0A800; margin-right: 4px; }
.jc-flag.jc-done { color: var(--ok); }
.jc-sum { color: var(--muted); font-size: 14px; line-height: 1.5; flex: 1; }
.jc-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  font-size: 12.5px; color: var(--muted);
}
.jc-date { white-space: nowrap; }
.jc-oc { font-weight: 700; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.jc-oc.oc-w { background: #BDD800; color: #142600; }
.jc-oc.oc-t { background: #F3B43C; color: #3E1517; }
.jc-oc.oc-f { background: #E0492B; color: #fff; }
.jc-open { margin-left: auto; font-weight: 700; color: var(--accent-dark); white-space: nowrap; }
.jump-card.is-new { border-color: #FF9FC8; box-shadow: 0 0 0 3px rgba(255,159,200,.28); }
.jump-card.is-done { opacity: .66; }
.jump-card.is-done .jc-title { text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* Highlighted = full green tile, dark-green ink, no outline (matches the homepage) */
.jump-card.is-star {
  background: #BDD800; border: none; box-shadow: none;
}
.jump-card.is-star .jc-num,
.jump-card.is-star .jc-hash,
.jump-card.is-star .jc-title,
.jump-card.is-star .jc-sum,
.jump-card.is-star .jc-foot,
.jump-card.is-star .jc-date,
.jump-card.is-star .jc-open,
.jump-card.is-star .jc-flag { color: #142600; }
.jump-card.is-star:hover { border: none; box-shadow: 0 14px 30px -16px rgba(20,38,0,.5); }

/* "Tell Frhog about your business" button (icon + label) */
.biz-btn { flex: 0 0 auto; }
.biz-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Mobile breathing room */
@media (max-width: 640px) {
  .dash.wrap, .jump-page, .business { padding-left: 18px; padding-right: 18px; }
  .jump-grid { gap: 13px; }
  .value-strip { gap: 14px 20px; }
  .dash-head { gap: 14px; }
  .biz-btn { width: 100%; }
}
body { overflow-x: hidden; }

/* ---- Single jump (full page) ---- */
.jump-page { padding: 30px 0 70px; }
.jump-back {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-soft); font-weight: 600; font-size: 14px; margin-bottom: 18px;
}
.jump-back:hover { color: var(--ink); text-decoration: none; }
.jump-head { margin-bottom: 18px; }
.jump-tags { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.jump-date { color: var(--muted); font-size: 13px; }
.jump-title {
  font-family: var(--font); text-transform: none; font-weight: 700;
  font-size: clamp(27px, 4vw, 40px); letter-spacing: -0.025em; line-height: 1.12; color: var(--ink);
}
.jump-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.flag-btn[data-flag="star"].on { background: #F3B43C; color: #3E1517; border-color: transparent; }
.flag-btn[data-flag="star"].on:hover { background: #f0aa28; color: #3E1517; }
.flag-btn[data-flag="done"].on { background: #BDD800; color: #142600; border-color: transparent; }
.flag-btn[data-flag="done"].on:hover { background: #b0c900; color: #142600; }
.jump-body-card { padding: 30px 34px; }
.jump-outcome { margin-top: 18px; padding: 22px 26px; border-top: none; }

/* ---- Business page ---- */
.business { padding: 30px 0 70px; }
.business .lede { color: var(--ink-soft); font-size: 16.5px; margin: 8px 0 22px; max-width: 60ch; text-align: left; }
.form-card { padding: 28px 30px; }
.form-card label { display: block; font-weight: 600; font-size: 14px; margin: 16px 0 6px; color: var(--ink); }
.form-card label:first-of-type { margin-top: 0; }
.form-card .opt { font-weight: 400; color: var(--muted); }
.form-card input, .form-card textarea, .form-card select {
  width: 100%; font-family: inherit; font-size: 15px; padding: 11px 14px;
  border: 1.5px solid var(--line-strong); border-radius: 10px; outline: none; background: var(--surface);
  color: var(--ink);
}
.form-card textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.form-card input:focus, .form-card textarea:focus, .form-card select:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-card .social-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.form-card .social-row select { flex: 0 0 38%; }
.form-card .social-row input { flex: 1; }
.form-card .social-remove {
  flex: 0 0 auto; width: 36px; height: 42px; border: 1.5px solid var(--line-strong);
  background: var(--surface); color: var(--muted); border-radius: 9px; cursor: pointer; font-size: 18px; line-height: 1;
}
.form-card .social-remove:hover { background: #fadcd6; color: var(--danger); border-color: #e6b9b0; }

@media (max-width: 900px) { .jump-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .jump-grid { grid-template-columns: 1fr; } }

.jump-num { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); }

/* ============================================================
   MOBILE polish for the landing hero/header
   ============================================================ */
@media (max-width: 600px) {
  /* Header: tighter, single line, keep brand + Log in (sections are reachable by scroll) */
  .lp .x-top { padding: 15px 16px; }
  .lp .x-brand { font-size: 16px; }
  .lp .x-brand .brand-mark { height: 18px; }
  .lp .x-nav { gap: 2px; }
  .lp .x-nav .x-link { font-size: 13px; padding: 6px 8px; white-space: nowrap; }
  .lp .x-nav .x-link[href="#how"],
  .lp .x-nav .x-link[href="#pricing"] { display: none; }

  /* Hero fills ~86% of the fold, content centred so the input is the focus (like desktop) */
  .lp .x-hero { min-height: 86vh; justify-content: center; padding: 8px 16px 28px; }
  .lp-greet { min-height: 104px; gap: 18px; margin-bottom: 22px; }

  /* Input: smaller text + button so nothing overlaps */
  .x-tool-input { height: 60px; padding: 0 6px 0 18px; }
  .x-tool-input input { font-size: 15.5px; }
  .x-tool-go { height: 46px; padding: 0 16px; font-size: 14px; border-radius: 24px; }

  /* Speech bubble: smaller text, tighter */
  .hugo-bubble { font-size: 15px; padding: 12px 18px; line-height: 1.38; }

  /* Section headlines a touch smaller so they don't dominate */
  .lp .section h2.center, .lp .section h2 { font-size: clamp(28px, 8vw, 40px); }
  .lp .section { padding: 60px 0; }
}

/* ---- Pricing: human-cost anchor + launch promo ---- */
.lp .price-anchor {
  display: flex; width: fit-content; max-width: 100%;
  align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin: 22px auto 0; padding: 12px 20px;
  background: var(--surface); border-radius: 14px;
  font-size: 15px; color: var(--ink-soft);
}
.lp .price-anchor .pa-item b { color: var(--ink); font-weight: 800; }
.lp .price-anchor .pa-vs { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.lp .price-anchor .pa-frhog { color: var(--ink); }
.lp .price-anchor .pa-frhog b { color: #2E3D10; background: #BDD800; padding: 2px 10px; border-radius: 999px; }

.lp .pricing-card { position: relative; }
.lp .pricing-card .promo-tag {
  position: absolute; top: 18px; right: 18px;
  background: #FF9FC8; color: #590002; font-weight: 800;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.lp .pricing-card .amount-was {
  font-size: 28px; font-weight: 700; letter-spacing: -.02em;
  color: rgba(251,243,228,.5); text-decoration: line-through; margin-right: 6px;
}

/* Admin: subscription-period badges */
.badge-year  { background: #EEF6CF; color: #3F5310; border-color: #CFE06A; }
.badge-month { background: var(--surface-2); color: var(--ink-soft); border-color: var(--line-strong); }

/* Admin: free/beta badge, add-free-user row, metric sublabel */
.badge-free { background: #E7E4FA; color: #4A3A8A; border-color: #D3CEF1; }
.m-sub { margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.add-free-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin: 18px 0 4px;
}
.add-free-row .afr-label { font-weight: 700; font-size: 14px; color: var(--ink); margin-right: 4px; }
.add-free-row input {
  font-family: inherit; font-size: 14px; padding: 9px 12px;
  border: 1.5px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); outline: none;
}
.add-free-row input[type="email"] { flex: 1; min-width: 180px; }
.add-free-row input[type="text"] { flex: 1; min-width: 160px; }
.add-free-row input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Floating support button (logged-in customers) */
.support-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  padding: 11px 17px; border-radius: 999px;
  font-family: var(--font); font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: background .15s ease, transform .12s ease;
}
.support-fab:hover { background: var(--accent-dark); color: #fff; text-decoration: none; transform: translateY(-1px); }
.support-fab svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .support-fab { right: 14px; bottom: 14px; padding: 10px 14px; } }

/* Billing: plan picker for pending/canceled users */
.bill-pick { align-self: center; font-weight: 700; color: var(--ink); margin-right: 2px; }

/* ---- Landing reviews / testimonials ---- */
.lp .reviews .review-card {
  position: relative; max-width: 680px; margin: 38px auto 0;
  background: var(--surface); border-radius: 18px; padding: 38px 44px 32px;
  text-align: center; box-shadow: 0 30px 60px -34px rgba(62,21,23,.28);
}
.lp .review-mark {
  display: block; font-family: "Oswald", var(--font); font-weight: 700;
  font-size: 70px; line-height: .5; height: 28px; color: #FF9FC8;
}
.lp .review-card blockquote {
  margin: 0; font-size: 20px; line-height: 1.55; letter-spacing: -.01em;
  color: var(--ink); font-weight: 500;
}
.lp .review-card figcaption { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lp .review-stars { color: #F3B43C; font-size: 18px; letter-spacing: 3px; }
.lp .review-who { color: var(--muted); font-size: 14px; font-weight: 600; }
@media (max-width: 600px) {
  .lp .reviews .review-card { padding: 30px 22px 26px; }
  .lp .review-card blockquote { font-size: 17.5px; }
}

/* ---- Product peek (looping dashboard video) ---- */
.lp .peek-frame {
  max-width: 940px; margin: 40px auto 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 44px 90px -44px rgba(62,21,23,.45);
}
.lp .peek-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.lp .peek-bar span { width: 11px; height: 11px; border-radius: 50%; }
.lp .peek-bar span:nth-child(1) { background: #E85E2B; }
.lp .peek-bar span:nth-child(2) { background: #F3B43C; }
.lp .peek-bar span:nth-child(3) { background: #AAD635; }
.lp .peek-video { display: block; width: 100%; height: auto; background: #FFF8ED; }