/* =========================================================================
   Launch With Claude · landing / waitlist
   Brand: indigo + cyan, but LIGHT gradient theme (not dark-first).
   Type:  Bricolage Grotesque (display) + Plus Jakarta Sans (body/UI).
   Color: OKLCH, neutrals tinted toward indigo. No gradient text.
   ========================================================================= */

:root {
  /* ---- Brand hue anchor (indigo ~277, cyan ~210) ---- */
  --indigo:        oklch(0.621 0.188 277);
  --indigo-deep:   oklch(0.545 0.214 277);
  --indigo-soft:   oklch(0.78  0.10  277);
  --cyan:          oklch(0.715 0.118 211);
  --cyan-bright:   oklch(0.80  0.115 205);

  /* ---- Claude clay (accent only; brand mark #D97757) ---- */
  --clay:          oklch(0.671 0.123 44);
  --clay-soft:     oklch(0.93  0.035 50);

  /* ---- Ink + neutrals (tinted toward indigo) ---- */
  --ink:           oklch(0.255 0.035 274);
  --ink-2:         oklch(0.34  0.030 274);
  --body:          oklch(0.44  0.022 274);
  --muted:         oklch(0.56  0.018 274);
  --line:          oklch(0.90  0.012 274);
  --line-2:        oklch(0.94  0.010 274);

  /* ---- Surfaces (light, faintly tinted) ---- */
  --page:          oklch(0.985 0.007 274);
  --surface:       oklch(0.997 0.004 274);
  --surface-2:     oklch(0.975 0.010 274);
  --tint-indigo:   oklch(0.962 0.022 277);
  --tint-cyan:     oklch(0.965 0.020 205);

  /* ---- Effects ---- */
  --grad-brand:    linear-gradient(118deg, var(--indigo-deep) 0%, var(--indigo) 46%, var(--cyan) 100%);
  --grad-brand-h:  linear-gradient(118deg, oklch(0.50 0.214 277) 0%, oklch(0.585 0.19 277) 46%, oklch(0.675 0.12 211) 100%);
  --ring:          oklch(0.621 0.188 277 / 0.40);

  --shadow-sm:  0 1px 2px oklch(0.45 0.06 274 / 0.06), 0 2px 6px oklch(0.45 0.06 274 / 0.05);
  --shadow-md:  0 6px 18px oklch(0.45 0.08 274 / 0.08), 0 2px 6px oklch(0.45 0.06 274 / 0.05);
  --shadow-lg:  0 24px 60px oklch(0.42 0.10 277 / 0.14), 0 8px 24px oklch(0.42 0.08 277 / 0.08);
  --shadow-cta: 0 10px 30px oklch(0.55 0.20 277 / 0.30);

  /* ---- Easing (natural deceleration, no bounce) ---- */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Space scale (4pt) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ---- Radii ---- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* ---- Type ---- */
  --display: "Schibsted Grotesk", "Plus Jakarta Sans", system-ui, sans-serif;
  --sans:    "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --t-eyebrow: 0.82rem;
  --t-body:    clamp(1rem, 0.97rem + 0.18vw, 1.12rem);
  --t-lede:    clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --t-h3:      clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --t-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --t-h1:      clamp(2.05rem, 1.1rem + 4.2vw, 4.4rem);

  --maxw: 1180px;
}

/* ----------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--body);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: oklch(0.715 0.118 211 / 0.28); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* --------------------------------------------------------- gradient field */
.bg-field { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
/* Aurora Bloom — page-wide WebGL gradient field (app.js aurora()); sits above .bg-field, behind content */
.aurora { position: fixed; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease-out-quint); }
.aurora.is-on { opacity: 1; }
.bg-field::after {           /* faint top wash so the page never reads flat */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--tint-indigo) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface) 0%, var(--page) 40%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.blob--indigo { width: 46vw; height: 46vw; top: -14vw; right: -10vw;
  background: radial-gradient(circle at 30% 30%, var(--indigo-soft), transparent 70%); }
.blob--cyan   { width: 40vw; height: 40vw; top: 28vw; left: -14vw;
  background: radial-gradient(circle at 50% 50%, var(--cyan-bright), transparent 68%); opacity: 0.35; }
.blob--soft   { width: 52vw; height: 52vw; bottom: -22vw; right: -6vw;
  background: radial-gradient(circle at 50% 50%, var(--tint-indigo), transparent 70%); opacity: 0.7; }

/* ------------------------------------------------------------- structure */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.section { padding-block: clamp(var(--s-8), 6vw, var(--s-10)); }
/* soft tinted band: adds rhythm + warmth between white sections (edges fade out) */
.section--soft { position: relative; }
.section--soft::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 0%, oklch(0.955 0.016 274 / 0.75) 14%, oklch(0.955 0.016 274 / 0.75) 86%, transparent 100%);
}

.section__head { max-width: 44ch; margin-inline: auto; text-align: center; margin-bottom: var(--s-7); }
.section__head--left { margin-inline: 0; text-align: left; max-width: 30ch; }
.kicker {
  font: 600 var(--t-eyebrow)/1 var(--sans);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo-deep);
  margin-bottom: var(--s-3);
}
.kicker--center { text-align: center; }
.section__title {
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.02em;
}
.section__sub { margin-top: var(--s-4); color: var(--muted); font-size: var(--t-lede); line-height: 1.5; }

/* highlight marker: solid text, color sits BEHIND the word (not gradient text) */
.mark { position: relative; white-space: nowrap; color: var(--ink); }
.mark::before {
  content: ""; position: absolute; left: -0.06em; right: -0.06em; bottom: 0.06em; height: 0.34em;
  background: oklch(0.78 0.10 277 / 0.45); border-radius: 3px; z-index: -1;
  transform: rotate(-0.6deg);
}
.mark--cyan::before { background: oklch(0.80 0.115 205 / 0.45); }

/* ----------------------------------------------------------------- buttons */
.btn {
  --pad-y: 14px; --pad-x: 22px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2); font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: var(--pad-y) var(--pad-x); border-radius: var(--r-pill); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background .25s ease;
}
.btn--sm { --pad-y: 10px; --pad-x: 18px; font-size: 0.94rem; }
.btn--block { width: 100%; margin-top: var(--s-5); }
.btn--primary { color: oklch(0.99 0.01 274); background: var(--grad-brand); box-shadow: var(--shadow-cta); }
.btn--primary:hover { transform: translateY(-2px); background: var(--grad-brand-h); box-shadow: 0 14px 38px oklch(0.55 0.20 277 / 0.38); }
.btn--primary:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid oklch(1 0 0 / 0.45); border-top-color: oklch(1 0 0 / 0.95); animation: spin .7s linear infinite; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: 0.65; }
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.99 0.005 274 / 0.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease, transform .35s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { display: flex; align-items: center; gap: var(--s-5); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--display); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; font-size: 1.06rem; }
.brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: oklch(0.99 0.01 274); background: var(--grad-brand); box-shadow: var(--shadow-sm); }
.nav__links { display: flex; gap: var(--s-5); margin-left: auto; font-weight: 500; color: var(--ink-2); }
.nav__links a { position: relative; padding-block: 4px; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--indigo); border-radius: 2px; transition: width .2s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { margin-left: 0; }

/* -------------------------------------------------------------------- hero */
.hero { padding-block: clamp(var(--s-8), 7vw, 132px) clamp(var(--s-7), 5vw, var(--s-9)); }
.hero__inner { position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: center; }
/* soft breathing halo behind the panel, tying the starburst into the aurora */
.hero__panel::before { content: ""; position: absolute; inset: -14% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, oklch(0.671 0.123 44 / 0.20), transparent 72%);
  filter: blur(34px); animation: panel-glow 6.5s ease-in-out infinite; }
@keyframes panel-glow {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: 0.86rem; color: var(--indigo-deep);
  background: var(--tint-indigo); border: 1px solid oklch(0.621 0.188 277 / 0.18); padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: var(--s-5); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px oklch(0.715 0.118 211 / 0.2); }

/* "Powered by Claude Cowork" lockup (clay accent via the Cowork app icon) */
.cowork-badge { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 var(--s-2);
  font-size: 0.84rem; font-weight: 500; color: var(--muted); letter-spacing: 0.01em; }
.cowork-badge strong { color: var(--clay); font-weight: 700; }
.cowork-badge__icon { width: 22px; height: 22px; border-radius: 6px; box-shadow: var(--shadow-sm); }

/* rotating headline word: reserve width with a hidden sizer so the line never reflows */
.rotator { display: inline-grid; vertical-align: bottom; }
/* in the 3-line headline stack the rotator becomes its own block line */
.hero__title .rotator { display: grid; grid-template-columns: max-content; }
.rotator__sizer { grid-area: 1 / 1; visibility: hidden; }
.rotator__word { grid-area: 1 / 1; display: inline-block; will-change: transform, opacity;
  transition: opacity .24s var(--ease-out-quint), transform .24s var(--ease-out-quint); }
.rotator__word.is-out { opacity: 0; transform: translateY(-0.35em); }
.rotator__word.is-in  { opacity: 0; transform: translateY(0.35em); transition: none; }

/* the launching Claude starburst (signature hero moment) */
.hero__panel { position: relative; }
.launch { position: absolute; top: -22px; right: 18px; z-index: 2; width: 56px; height: 56px;
  display: grid; place-items: center; pointer-events: none;
  animation: launch-rise 0.85s var(--ease-out-expo) both; }
.launch__mark { color: var(--clay); width: 40px; height: 40px;
  filter: drop-shadow(0 6px 14px oklch(0.671 0.123 44 / 0.35));
  animation: launch-float 4.5s ease-in-out 1s infinite; }
.launch__trail { position: absolute; bottom: 40%; left: 50%; width: 3px; height: 90px;
  transform: translateX(-50%); border-radius: 3px; transform-origin: bottom center;
  background: linear-gradient(180deg, oklch(0.671 0.123 44 / 0.55), transparent 90%);
  animation: launch-trail 0.85s var(--ease-out-expo) both; }
.launch.is-pop .launch__mark { animation: launch-pop 0.55s var(--ease-out-quint); }

@keyframes launch-rise {
  0%   { transform: translateY(70px) scale(0.7); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes launch-trail {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0.2); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}
@keyframes launch-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes launch-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}
.hero__title { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.03em; display: flex; flex-direction: column; }
.hero__title-line { display: block; }
.hero__title-line--last { white-space: nowrap; }
.hero__lede { margin-top: var(--s-5); max-width: 46ch; font-size: var(--t-lede); color: var(--ink-2); line-height: 1.5; }
.hero__lede em { font-style: italic; color: var(--indigo-deep); }
.hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); padding: 0; color: var(--muted); font-size: 0.92rem; }
.hero__trust li { display: flex; align-items: center; gap: var(--s-2); }
.hero__trust li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/11px no-repeat,
    var(--grad-brand); }

/* signup */
.signup { margin-top: var(--s-6); }
.signup__row { display: flex; gap: var(--s-2); background: var(--surface); padding: 7px; border: 1px solid var(--line); border-radius: var(--r-pill); box-shadow: var(--shadow-md); max-width: 480px; }
.signup__input { flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 16px; font: 500 1rem var(--sans); color: var(--ink); }
.signup__input::placeholder { color: oklch(0.66 0.02 274); }
.signup__input:focus { outline: none; }
.signup__row:focus-within { border-color: var(--indigo-soft); box-shadow: var(--shadow-md), 0 0 0 4px oklch(0.621 0.188 277 / 0.12); }
.signup__row.is-invalid { border-color: oklch(0.62 0.2 25); box-shadow: 0 0 0 4px oklch(0.62 0.2 25 / 0.12); }
.signup__note { margin-top: var(--s-3); font-size: 0.86rem; color: var(--muted); }
.signup__note.is-error { color: oklch(0.55 0.2 25); font-weight: 500; }
.signup--center { display: flex; flex-direction: column; align-items: center; }
.signup--center .signup__row { width: 100%; }

/* hero panel: the 4-week ladder */
.hero__panel { perspective: 1000px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(var(--s-5), 2vw, var(--s-6)); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-brand); }
.panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.panel__pill { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.panel__live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: var(--cyan); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); position: relative; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--cyan); opacity: 0; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.9); opacity: 0; } }

.ladder { list-style: none; padding: 0; display: grid; gap: 2px; }
.ladder__step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; padding: var(--s-3) 0; }
.ladder__step::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: -2px; width: 2px; background: var(--line); }
.ladder__step--last::after { display: none; }
.ladder__num { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: var(--indigo-deep); background: var(--tint-indigo); border: 1px solid oklch(0.621 0.188 277 / 0.18); }
.ladder__body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.ladder__body strong { color: var(--ink); font-weight: 700; }
.ladder__body small { color: var(--muted); font-size: 0.88rem; }
.panel__foot { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--line); font-size: 0.94rem; color: var(--ink-2); }
.panel__foot strong { color: var(--indigo-deep); }

/* hero panel: Claude Cowork "build a launch kit" demo */
.cowork { display: flex; flex-direction: column; gap: var(--s-4); }
.cowork__prompt { display: flex; align-items: baseline; min-height: 2.7em;
  font-size: 0.92rem; line-height: 1.4; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.cowork__prompt::before { content: "›"; color: var(--indigo-deep); font-weight: 800; margin-right: 8px; }
.cowork__caret { display: inline-block; width: 2px; height: 1.05em; background: var(--indigo);
  margin-left: 2px; transform: translateY(2px); animation: cowork-caret 1s steps(1) infinite; }
@keyframes cowork-caret { 50% { opacity: 0; } }

.cowork__thinking { min-height: 1.2em; font-size: 0.85rem; color: var(--muted); opacity: 0; transition: opacity .3s ease; }
.cowork__thinking.is-on { opacity: 1; }
.cowork__spark { color: var(--clay); display: inline-block; animation: cowork-spin 1.4s linear infinite; }
@keyframes cowork-spin { to { transform: rotate(360deg); } }

.cowork__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.cowork__step { display: flex; flex-direction: column; gap: var(--s-2);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease-out-quint), transform .45s var(--ease-out-quint); }
.cowork__step.is-in { opacity: 1; transform: none; }
.cowork__row { display: flex; align-items: center; gap: var(--s-3); }
.cowork__check { flex: none; width: 22px; height: 22px; border-radius: 7px;
  background: var(--tint-indigo); border: 1px solid oklch(0.621 0.188 277 / 0.22); position: relative; }
.cowork__step.is-in .cowork__check::after { content: ""; position: absolute; inset: -1px; border-radius: 7px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/12px no-repeat,
    var(--grad-brand);
  animation: cowork-pop .4s var(--ease-out-quint); }
@keyframes cowork-pop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.cowork__label { font-weight: 600; color: var(--ink); font-size: 0.98rem; }

/* mini sales-page wireframe revealed under "Built the product" */
.cowork__wire { margin-left: calc(22px + var(--s-3)); display: grid; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4); }
.cowork__wire i { height: 7px; border-radius: 3px; background: var(--line-2);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out-quint); }
.cowork__wire i:nth-child(1) { width: 65%; height: 9px; background: oklch(0.78 0.10 277 / 0.5); }
.cowork__wire i:nth-child(2) { width: 100%; }
.cowork__wire i:nth-child(3) { width: 82%; }
.cowork__step.is-in .cowork__wire i { transform: scaleX(1); }
.cowork__step.is-in .cowork__wire i:nth-child(2) { transition-delay: .09s; }
.cowork__step.is-in .cowork__wire i:nth-child(3) { transition-delay: .18s; }

.cowork__kit { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-4); border-top: 1px dashed var(--line);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease-out-quint), transform .45s var(--ease-out-quint); }
.cowork__kit.is-in { opacity: 1; transform: none; }
.cowork__kitlabel { font-family: var(--display); font-weight: 700; color: var(--indigo-deep); font-size: 1rem; }
.cowork__kitlabel::before { content: "→ "; }
.cowork__sale { flex: none; font-size: 0.78rem; font-weight: 600; color: var(--cyan);
  background: var(--tint-cyan); border: 1px solid oklch(0.715 0.118 211 / 0.25); border-radius: var(--r-pill); padding: 4px 10px; }

/* --------------------------------------------------------------- outcome */
.stack { display: grid; gap: var(--s-3); max-width: 880px; margin-inline: auto; }
.stack__item { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-5); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.stack__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--indigo-soft); }
.stack__wk { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--indigo-deep); }
.stack__main h3 { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: var(--t-h3); letter-spacing: -0.01em; }
.stack__main p { margin-top: 4px; color: var(--body); max-width: 56ch; }
.stack__art { display: inline-flex; align-items: center; gap: 8px; justify-self: end; color: var(--cyan); }
.stack__ic { flex: none; color: var(--indigo-deep); }
.stack__arrow { flex: none; color: var(--muted); }
.stack__item:hover .stack__ic { color: var(--clay); }

/* ------------------------------------------------------------------- fit */
.fit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.fit__col { border-radius: var(--r-xl); padding: clamp(var(--s-5), 3vw, var(--s-7)); border: 1px solid var(--line); }
.fit__col--yes { background: var(--tint-indigo); border-color: oklch(0.621 0.188 277 / 0.16); }
.fit__col--no  { background: var(--surface-2); }
.fit__title { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: var(--t-h3); margin-bottom: var(--s-5); letter-spacing: -0.01em; }
.checks, .crosses { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.checks li, .crosses li { position: relative; padding-left: 38px; color: var(--ink-2); line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E") center/15px no-repeat,
    var(--grad-brand); }
.crosses li::before { content: ""; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/15px no-repeat,
    oklch(0.945 0.03 22); }

/* ------------------------------------------------------------------- how */
.how__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-5); }
.fact { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.fact__big { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); line-height: 1; color: var(--indigo-deep); letter-spacing: -0.03em; display: block; }
.fact__lead { margin-top: var(--s-3); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.fact__sub { margin-top: var(--s-2); color: var(--body); font-size: 0.96rem; }

/* ------------------------------------------------------------- different */
.different__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(var(--s-6), 5vw, var(--s-8)); align-items: start; }
.reasons { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.reason { padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: transform .25s ease, box-shadow .25s ease; }
.reason:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.reason__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--s-4);
  border-radius: var(--r-md); color: var(--indigo-deep);
  background: var(--tint-indigo); border: 1px solid oklch(0.621 0.188 277 / 0.16); }
.reason:hover .reason__icon { color: var(--clay); }
.reason h3 { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: var(--t-h3); letter-spacing: -0.01em; }
.reason p { margin-top: var(--s-3); color: var(--body); }

/* ------------------------------------------------------------------ meet */
.meet__inner { display: grid; grid-template-columns: 200px 1fr; gap: clamp(var(--s-5), 4vw, var(--s-8)); align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(var(--s-6), 4vw, var(--s-8)); box-shadow: var(--shadow-sm); }
.meet__photo { aspect-ratio: 1; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--grad-brand); box-shadow: var(--shadow-md); }
.meet__initial { font-family: var(--display); font-weight: 800; font-size: 5rem; color: oklch(0.99 0.01 274); }
.meet__copy p { margin-top: var(--s-4); color: var(--body); max-width: 60ch; }
.meet__copy .section__title { margin-top: 2px; }

/* --------------------------------------------------------------- pricing */
.price-card { max-width: 560px; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.price-card__head { text-align: center; padding: clamp(var(--s-6), 4vw, var(--s-7)) var(--s-6) var(--s-6); background: var(--tint-indigo); border-bottom: 1px solid var(--line); }
.price-card__tag { display: inline-block; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo-deep); }
.price-card__amount { margin-top: var(--s-3); }
.price-card__num { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 2.2rem + 3vw, 4.2rem); line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
.price-card__num--tbd { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); letter-spacing: -0.02em; color: var(--indigo-deep); }
.price-card__per { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); color: var(--ink-2); margin-left: 4px; letter-spacing: -0.01em; }
.price-card__cap { margin-top: var(--s-2); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.price-card__ast { color: var(--muted); font-weight: 600; }
sup.price-card__ast { font-size: 0.5em; vertical-align: super; margin-left: 1px; }
.price-card__foot { margin: var(--s-3) auto 0; font-size: 0.8rem; line-height: 1.45; color: var(--muted); max-width: 42ch; }
.price-card__body { padding: clamp(var(--s-6), 4vw, var(--s-7)); }
.price-card__inc { font-weight: 700; color: var(--ink); margin-bottom: var(--s-4); }
.checks--tight { gap: var(--s-3); }
.checks--tight li { font-size: 0.98rem; }

/* value stack: Claude-mark bullets + value tags */
.included { list-style: none; padding: 0; display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.included li { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--s-3); align-items: start;
  color: var(--ink-2); line-height: 1.45; font-size: 0.98rem; }
.included li::before { content: ""; width: 17px; height: 17px; margin-top: 3px;
  background: url("claude-mark.svg") center/contain no-repeat; }
.included__txt strong { color: var(--ink); font-weight: 700; }
.included__val { font-family: var(--display); font-weight: 700; font-size: 0.9rem; color: var(--clay);
  white-space: nowrap; text-align: right; padding-top: 1px; }
.included__total { font-size: 0.84rem; color: var(--muted); margin-bottom: var(--s-2);
  padding-top: var(--s-4); border-top: 1px dashed var(--line); }
.included__total strong { color: var(--ink-2); font-weight: 700; }

/* stakes nudge just above the buy button */
.price-card__stakes { margin-top: var(--s-5); text-align: center; font-weight: 700;
  color: var(--ink); font-size: 0.98rem; }
.price-card__stakes + .btn--block { margin-top: var(--s-3); }

.guarantee { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; margin-top: var(--s-6);
  background: var(--tint-cyan); border: 1px solid oklch(0.715 0.118 211 / 0.25); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); }
.guarantee__icon { color: var(--cyan); margin-top: 2px; }
.guarantee p { font-size: 0.94rem; color: var(--ink-2); }
.guarantee strong { color: var(--ink); }
.price-card__micro { margin-top: var(--s-3); text-align: center; font-size: 0.84rem; color: var(--muted); }

.intensive { max-width: 560px; margin: var(--s-6) auto 0; text-align: center; color: var(--muted); font-size: 0.96rem; }
.intensive strong { color: var(--ink-2); }
.intensive a { color: var(--indigo-deep); font-weight: 600; border-bottom: 1.5px solid oklch(0.621 0.188 277 / 0.3); padding-bottom: 1px; transition: border-color .2s ease; }
.intensive a:hover { border-color: var(--indigo); }

/* -------------------------------------------------------------- quotes */
.quotes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
.quote--ph { border-style: dashed; border-color: oklch(0.86 0.02 274); background: var(--surface-2); }
.quote blockquote { font-family: var(--display); font-weight: 500; font-size: 1.1rem; line-height: 1.4; color: var(--muted); }
.quote figcaption { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; }
.quote figcaption span:last-child { display: flex; flex-direction: column; }
.quote figcaption strong { color: var(--ink-2); font-size: 0.95rem; }
.quote figcaption small { color: var(--muted); font-size: 0.82rem; }
.quote__avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--line), var(--surface-2)); border: 1px dashed oklch(0.82 0.02 274); }

/* ------------------------------------------------------------------ faq */
.faq__inner { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(var(--s-6), 5vw, var(--s-8)); align-items: start; }
.accordion { display: grid; gap: var(--s-3); }
.ac { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.ac[open] { box-shadow: var(--shadow-sm); border-color: var(--indigo-soft); }
.ac summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 1.06rem; }
.ac summary::-webkit-details-marker { display: none; }
.ac__chev { width: 22px; height: 22px; flex: none; position: relative; }
.ac__chev::before, .ac__chev::after { content: ""; position: absolute; top: 50%; width: 11px; height: 2px; background: var(--indigo-deep); border-radius: 2px; transition: transform .25s ease; }
.ac__chev::before { left: 1px; transform: translateY(-50%) rotate(45deg); }
.ac__chev::after  { right: 1px; transform: translateY(-50%) rotate(-45deg); }
.ac[open] .ac__chev::before { transform: translateY(-50%) rotate(-45deg); }
.ac[open] .ac__chev::after  { transform: translateY(-50%) rotate(45deg); }
.ac__panel { padding: 0 var(--s-6) var(--s-5); color: var(--body); }
.ac__panel p { max-width: 64ch; }

/* ------------------------------------------------------------------ join */
.join { position: relative; }
.join__inner { max-width: 720px; margin-inline: auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(var(--s-7), 5vw, var(--s-9)); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.join__inner::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 80%;
  background: radial-gradient(60% 80% at 50% 0, var(--tint-indigo), transparent 70%); z-index: 0; }
.join__inner > * { position: relative; z-index: 1; }
.join__title { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.02em; }
.join__sub { margin: var(--s-4) auto 0; max-width: 50ch; color: var(--ink-2); font-size: var(--t-lede); line-height: 1.5; }
.join .signup { margin-top: var(--s-6); width: 100%; }

/* --------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--line); padding-block: var(--s-7); margin-top: var(--s-6); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.brand--foot { font-size: 1rem; }
.brand--foot .brand__mark { width: 30px; height: 30px; }
.footer__by { color: var(--muted); }
.footer__by a { color: var(--indigo-deep); font-weight: 600; }
.footer__copy { color: var(--muted); font-size: 0.88rem; }

/* ----------------------------------------------------------- sticky CTA */
.sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: oklch(0.99 0.005 274 / 0.92); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 10px 12px 10px 20px; box-shadow: var(--shadow-lg);
  transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.sticky-cta.is-shown { transform: translateY(0); }
.sticky-cta__text { display: flex; flex-direction: column; line-height: 1.2; }
.sticky-cta__text strong { color: var(--ink); font-size: 0.95rem; }
.sticky-cta__text small { color: var(--muted); font-size: 0.78rem; }

/* ------------------------------------------------------- reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* =============================================================== responsive */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__panel { order: 2; max-width: 480px; }
  .different__inner { grid-template-columns: 1fr; }
  .faq__inner { grid-template-columns: 1fr; }
  .section__head--left { max-width: 40ch; }
}
@media (max-width: 760px) {
  .nav__links { display: none; }
  .fit__grid { grid-template-columns: 1fr; }
  .reasons { grid-template-columns: 1fr; }
  .meet__inner { grid-template-columns: 1fr; text-align: center; }
  .meet__photo { width: 140px; margin-inline: auto; }
  .meet__copy p { margin-inline: auto; }
  .stack__item { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-5); }
  .stack__art { text-align: left; }
  .nav__cta { display: none; }
  .sticky-cta { display: flex; }
}
@media (max-width: 480px) {
  .signup__row { flex-direction: column; border-radius: var(--r-lg); padding: var(--s-3); }
  .signup__input { padding: 12px 14px; }
  .signup .btn { width: 100%; }
  .footer__inner { flex-direction: column; text-align: center; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .live-dot::after, .btn__spinner { animation: none; }
  .launch, .launch__mark { animation: none !important; }
  .launch__trail { display: none; }
  .rotator__word { transition: none; }
  .aurora { display: none; }                     /* fall back to the static .bg-field */
  .hero__panel::before { animation: none; opacity: 0.7; }
  /* Cowork demo: show the final assembled state, no typing/looping */
  .cowork__caret, .cowork__thinking { display: none; }
  .cowork__spark { animation: none; }
  .cowork__step, .cowork__kit, .cowork__wire i { transition: none; }
  * { scroll-behavior: auto !important; }
}