skin.css

/* ============================================================
   CMO.XYZ — shared page skin (soft, rounded, filled cards).
   Scoped to body.v3x. Used by both the original page (which also
   loads gradient.css) and the /v2 page (no gradient).
   ============================================================ */

.v3x {
  --r: 20px;
  --r-lg: 32px;
  --shadow-card: 0 2px 4px rgba(16, 24, 40, 0.04), 0 18px 48px -24px rgba(16, 24, 40, 0.22);
  --shadow-lg: 0 40px 90px -40px rgba(16, 24, 40, 0.30);
}
:root[data-theme="dark"] .v3x { --shadow-card: none; }

/* ---- Rounded, airy type ---- */
.v3x .hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.04em; line-height: 1; }
.v3x .hero .lead { font-size: clamp(0.95rem, 1.25vw, 1.08rem); max-width: min(64ch, 92vw); }

/* First view: headline, paragraph, capture bar and mascot all fit one screen. */
.v3x .hero.hero--center {
  min-height: calc(100svh - 4rem);
  align-content: center;
  padding-top: clamp(4rem, 10vh, 7rem);
  padding-bottom: clamp(1rem, 3vh, 2rem);
  gap: clamp(0.9rem, 2vh, 1.6rem);
}
/* A touch more breathing room between the headline and the paragraph. */
.v3x .hero.hero--center h1 { margin-bottom: 0.5rem; }
.v3x .hero.hero--center .hero__visual { width: 100%; }
.v3x .hero.hero--center .hero__model {
  width: min(540px, 92vw);
  height: min(500px, 54vh);
}
.v3x .hero.hero--center .orb { width: min(440px, 80vw); }
.v3x .section__head h2,
.v3x .problem h2,
.v3x .cta h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: -0.03em; }
/* #why headline on a single line (wraps naturally on small screens). */
.v3x .problem .section__head { max-width: none; }
@media (min-width: 720px) {
  .v3x .problem .section__head h2 { white-space: nowrap; font-size: clamp(2rem, 4vw, 3rem); }
}

/* ---- Big pill labels ---- */
.v3x .eyebrow,
.v3x .pill,
.v3x .proof__label,
.v3x .tier__tag {
  border-radius: 999px;
  background: var(--surface-2);
  border: none;
  padding: 0.5rem 1.1rem;
  font-weight: 600;
}

/* ---- Filled, borderless cards with soft shadows ---- */
.v3x .tab,
.v3x .tabs__panels,
.v3x .chat,
.v3x .proof__markers li,
.v3x .problem__col,
.v3x .tier,
.v3x .cap-card {
  border: none;
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}
.v3x .tab.is-active { background: var(--ink); color: var(--btn-ink); box-shadow: var(--shadow-lg); }
.v3x .tab.is-active .tab__icon { background: transparent; border-color: currentColor; color: inherit; }
.v3x .tab__icon { border: none; background: var(--bg); }
/* Inactive tabs: give them a clear edge so they don't blend into the page bg. */
.v3x .tab:not(.is-active) { background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); }
.v3x .tab:not(.is-active):hover { border-color: var(--ink-soft); color: var(--ink); }

/* ---- Rounder buttons ---- */
.v3x .btn { border-radius: 999px; padding-inline: 1.5rem; }
.v3x .btn--lg { padding-inline: 2rem; }

/* ---- Numbered section headings ---- */
.v3x .problem .section__head h2,
.v3x #features .section__head h2,
.v3x #demo .section__head h2,
.v3x .pricing .section__head h2 { position: relative; }
.v3x .problem .section__head,
.v3x #features .section__head,
.v3x #demo .section__head,
.v3x .pricing .section__head { counter-increment: v3sec; }
.v3x .problem .section__head .eyebrow::before,
.v3x #features .section__head .eyebrow::before,
.v3x #demo .section__head .eyebrow::before,
.v3x .pricing .section__head .eyebrow::before {
  content: "0" counter(v3sec) "  ";
  opacity: 0.5;
}
.v3x main { counter-reset: v3sec; }

/* ---- Proof markers: filled chips in a soft row ---- */
.v3x .proof__markers li { border-radius: var(--r); }
.v3x .proof__logos li { font-weight: 700; }

/* ---- Problem: fully inverted "win" column ---- */
.v3x .problem__col--fix { background: var(--ink); color: var(--btn-ink); }
.v3x .problem__col--fix .problem__list li { color: color-mix(in srgb, var(--btn-ink) 80%, transparent); }
.v3x .problem__col--fix .problem__list--win li::before { background: var(--btn-ink); color: var(--ink); border-color: var(--btn-ink); }

/* ---- Pricing: big rounded tiers, inverted featured, lifted ---- */
.v3x .tier { border-radius: var(--r-lg); }
.v3x .tier--featured { background: var(--ink); color: var(--btn-ink); transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.v3x .tier--featured .tier__for,
.v3x .tier--featured .tier__list li { color: color-mix(in srgb, var(--btn-ink) 74%, transparent); }
.v3x .tier--featured .tier__list li::before { background: var(--btn-ink); color: var(--ink); border-color: var(--btn-ink); }
.v3x .tier__price { font-size: 2.4rem; letter-spacing: -0.03em; }
.v3x .tier--featured .tier__price { color: var(--btn-ink); }
.v3x .tier--featured .tier__per,
.v3x .tier--featured .tier__bill { color: color-mix(in srgb, var(--btn-ink) 70%, transparent); }
.v3x .tier--featured .tier__plus { color: var(--btn-ink); }
/* "Popular" tag: high contrast on the featured card in both themes. */
.v3x .tier--featured .tier__tag { background: var(--btn-ink); color: var(--ink); border: none; }
/* Featured card sits on a dark surface — invert its button so it stays visible. */
.v3x .tier--featured .btn { background: var(--btn-ink); color: var(--ink); border-color: var(--btn-ink); }
.v3x .tier--featured .btn:hover { background: var(--btn-ink); border-color: var(--btn-ink); opacity: 0.88; }
@media (max-width: 900px) { .v3x .tier--featured { transform: none; } }

/* ---- Chat bubbles extra round ---- */
.v3x .msg p { border-radius: 20px; }
.v3x .chat { border-radius: var(--r-lg); }
.v3x .chat__input { border-radius: 999px; }

/* ---- CTA as a big rounded inverted block ---- */
.v3x .cta { background: var(--ink); color: var(--btn-ink); border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.v3x .cta p { color: color-mix(in srgb, var(--btn-ink) 78%, transparent); }
/* The status message is a <p> too — keep its own fixed colors (not the CTA's). */
.v3x .cta .waitlist__msg.is-ok { color: #14181b; }
.v3x .cta .waitlist__msg.is-err { color: #b42318; }
.v3x .cta .btn { background: var(--btn-ink); color: var(--ink); border-color: var(--btn-ink); }
/* The CTA capture-bar pill is light in BOTH themes (white in light mode; the
   inverted CTA block is light in dark mode), so the button must stay dark in
   both — use fixed dark colors, not the theme-flipping button tokens. */
.v3x .cta .waitlist .btn { background: #14181b; color: #ffffff; border-color: #14181b; }
.v3x .cta .waitlist .btn:hover { background: #2b3236; border-color: #2b3236; }
/* Capture bar: a solid off-white box with a clear edge, so it never blends
   into the CTA block in either theme. Input text stays dark on the white box. */
.v3x .cta .waitlist { background: #ffffff; border: 1px solid rgba(16, 24, 40, 0.10); box-shadow: 0 14px 34px -16px rgba(16, 24, 40, 0.35); }
.v3x .cta .waitlist__input { color: #14181b; }
.v3x .cta .waitlist__input::placeholder { color: #6b7479; }
.v3x .cta .waitlist__input--url { border-left-color: rgba(16, 24, 40, 0.12); }

/* ---- Capability mockups: keep every card the same size so switching tabs
        doesn't resize the illustration ---- */
.v3x .cap { width: 100%; max-width: 330px; }
.v3x .cap-card { min-height: 300px; justify-content: center; }

/* ---------------- Mobile / small screens ---------------- */
@media (max-width: 640px) {
  .v3x .hero.hero--center {
    min-height: auto;               /* don't force a full screen; let it flow */
    padding-top: clamp(1.5rem, 7vw, 2.5rem);
    padding-bottom: clamp(2rem, 9vw, 3rem);
    gap: 1.3rem;
  }
  .v3x .hero.hero--center .hero__model {
    width: min(340px, 84vw);
    height: min(360px, 44vh);
  }
  .v3x .hero.hero--center .orb { width: min(300px, 74vw); }
}