atlas.css

/* ============================================================
   CMO.XYZ — Atlas-style layer (after workos.com/atlas).
   White canvas, oversized tight headlines, product windows in a
   soft gray frame and a soft gray band. Light mode only.
   Loaded last; only affects the main page (body.v3x).
   ============================================================ */

:root {
  --bg: #ffffff;
  --band: #fafafa;
  --navy: #05070d;
  --frame: linear-gradient(180deg, #f4f4f5 0%, #e9e9ec 100%);
}

.v3x .bg-glow { display: none; }

/* ---- Type: big, heavy, tight ---- */
.v3x h1, .v3x h2 { letter-spacing: -0.035em; line-height: 1.02; }
.v3x .hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.25rem); letter-spacing: -0.04em; max-width: none; }
.v3x .section__head h2,
.v3x .problem h2,
.v3x .pricing h2,
.v3x .cta h2 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); letter-spacing: -0.04em; }
.v3x .section__head p,
.v3x .hero .lead,
.v3x .cta p { font-weight: 500; letter-spacing: -0.01em; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.v3x .section__head { max-width: 960px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.v3x .section__head p { max-width: 54ch; margin-inline: auto; font-size: 1.12rem; }

/* ---- Nav: logo left, black pill right, no bar ---- */
.v3x .nav { background: transparent; border: 0; backdrop-filter: none; position: absolute; inset: 0 0 auto; justify-content: space-between; }
/* The nav waits until the intro animation is over (script.js reveals it). */
.has-anim:not(.reduced) .v3x .nav { opacity: 0; visibility: hidden; }

/* ---- Hero: centered, mascot underneath ---- */
.v3x .hero.hero--center { padding-top: clamp(6rem, 14vh, 9rem); }
.v3x .hero.hero--center .orb { display: none; }
.v3x .hero__model { cursor: pointer; }

/* ---- Gradient frame (product window look) ---- */
.v3x .frame {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(10px, 2vw, 24px);
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--frame);
  border: 1px solid rgba(16, 24, 40, 0.06);
}

/* Demo: the chat sits in the frame as a macOS-style window. */
.v3x .chat { max-width: none; border-radius: 18px; background: #ffffff; color: #14181b; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 18px 40px -24px rgba(16, 24, 40, 0.25); }
.v3x .chat__bar { background: rgba(255, 255, 255, 0.85); border-bottom-color: rgba(16, 24, 40, 0.08); }
.v3x .chat__bar span:nth-child(1) { background: #ff5f57; }
.v3x .chat__bar span:nth-child(2) { background: #febc2e; }
.v3x .chat__bar span:nth-child(3) { background: #28c840; }
.v3x .chat__bar p { color: #454d51; font-weight: 600; }
.v3x .chat__body { min-height: 380px; padding: clamp(1.4rem, 3vw, 2.4rem); }
.v3x .chat .msg--agent p { background: #f2f4f5; color: #14181b; }
.v3x .chat .msg img { background: #f2f4f5; padding: 2px; }
.v3x .chat .msg--user p { background: #14181b; color: #ffffff; }
.v3x .chat__input { background: #ffffff; border-color: rgba(16, 24, 40, 0.12); color: #6b7479; margin: 0 1.2rem 1.2rem; }
.v3x .chat__input i { background: #14181b; color: #ffffff; }

/* Three-up feature row under the window. */
.v3x .trio {
  max-width: 1100px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding: 0 clamp(0rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.v3x .trio svg { width: 22px; height: 22px; color: var(--ink); margin-bottom: 1rem; }
.v3x .trio h3 { font-size: 1.05rem; letter-spacing: -0.01em; margin-bottom: 0.45rem; }
.v3x .trio p { font-size: 0.98rem; line-height: 1.55; }

/* ---- Problem: split, plain columns divided by a hairline ---- */
.v3x .problem__grid { max-width: 1100px; margin: 0 auto; gap: 0; }
.v3x .problem__col,
.v3x .problem__col--fix { background: none; color: var(--ink); box-shadow: none; border: 0; border-radius: 0; padding: 0.5rem clamp(1.5rem, 5vw, 4rem); }
.v3x .problem__col--fix { border-left: 1px solid var(--line-2); }
.v3x .problem__col h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; margin-bottom: 1.4rem; }
.v3x .problem__col--fix .problem__list li { color: var(--ink-mid); }
.v3x .problem__col--fix .problem__list--win li::before { background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }
.v3x .problem__list li { font-size: 1.05rem; }

/* ---- Capabilities: pill switcher + white window inside one frame ---- */
.v3x .tabs { max-width: 1100px; margin: 0 auto; gap: clamp(10px, 1.6vw, 18px); padding: clamp(10px, 2vw, 24px); border-radius: clamp(24px, 3vw, 40px); background: var(--frame); border: 1px solid rgba(16, 24, 40, 0.06); }
.v3x .tabs__list { padding: 5px; gap: 4px; border-radius: 999px; background: rgba(16, 24, 40, 0.05); overflow-x: auto; scrollbar-width: none; }
.v3x .tab,
.v3x .tab:not(.is-active) { background: transparent; border: 0; box-shadow: none; border-radius: 999px; padding: 0.6rem 1rem; color: #454d51; font-size: 0.92rem; }
.v3x .tab:not(.is-active):hover { color: #14181b; background: rgba(255, 255, 255, 0.6); }
.v3x .tab.is-active { background: #ffffff; color: #14181b; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 6px 16px -8px rgba(16, 24, 40, 0.25); }
.v3x .tab__bar { display: none; }
.v3x .tabs__panels { background: #ffffff; color: #14181b; border-radius: 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 18px 40px -24px rgba(16, 24, 40, 0.25); min-height: 420px; padding: clamp(1.8rem, 4vw, 3.5rem); }
.v3x .panel { grid-template-columns: 1fr 1px minmax(260px, 340px); gap: clamp(1.5rem, 4vw, 3.5rem); }
.v3x .panel::after { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; background: rgba(16, 24, 40, 0.12); }
.v3x .panel__media { grid-column: 3; grid-row: 1; }
.v3x .panel__text h3 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -0.035em; }
.v3x .panel__text p,
.v3x .panel__list li { color: #454d51; }
.v3x .panel__list li::before { background: #14181b; }
/* The window is light in both themes; keep the mockups light inside it. */
.v3x .tabs__panels .cap { padding: 0; background: none; box-shadow: none; }
.v3x .tabs__panels .cap-card { background: #f4f6f7; color: #14181b; box-shadow: none; border: 1px solid rgba(16, 24, 40, 0.08); }
.v3x .panel__media::after { right: -20px; bottom: -30px; width: 110px; height: 110px; }

/* ---- Pricing: soft gray band ---- */
.v3x .pricing { max-width: none; background: var(--band); }
.v3x .pricing > * { max-width: 1100px; margin-inline: auto; }
.v3x .tier { background: var(--surface); box-shadow: none; border: 1px solid var(--line); border-radius: 24px; }
.v3x .tier--featured { background: var(--ink); border-color: var(--ink); transform: none; }

/* ---- CTA: plain white, big headline, black pill (Atlas "Ready to meet") ---- */
.v3x .cta {
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
  color: var(--ink);
  padding-block: clamp(5rem, 11vw, 8rem);
}
.v3x .cta p { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.v3x .cta .cta__fine { color: var(--ink-soft); }
.v3x .cta .orb { display: none; }

/* ---- Footer: quiet, with the company imprint ---- */
.v3x .footer { background: var(--bg); }
.v3x .footer__imprint {
  max-width: var(--maxw);
  margin: 1.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.v3x .footer__imprint strong { color: var(--ink-mid); font-weight: 600; }
.v3x .footer__imprint a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .v3x .trio { grid-template-columns: 1fr; }
  .v3x .problem__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .v3x .problem__col--fix { border-left: 0; border-top: 1px solid var(--line-2); padding-top: 2.5rem; }
  .v3x .panel { grid-template-columns: 1fr; }
  .v3x .panel::after { display: none; }
  .v3x .panel__media { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .v3x .hero.hero--center { padding-top: 5.5rem; }
  .v3x .chat__body { min-height: 300px; }
}