.co-core-onboarding,
.co-core-roadmap,
.co-core-service-builder,
.co-core-service-gate {
  width: min(calc(100% - 2rem), 1180px);
  margin: clamp(3rem, 7vw, 6rem) auto;
}

.co-core-kicker {
  display: inline-block;
  margin-bottom: .65rem;
  color: var(--co-peach, #ff9860);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.co-core-onboarding h1,
.co-core-roadmap h1,
.co-core-roadmap h2,
.co-core-section-block h2,
.co-core-service-builder h1,
.co-core-service-builder h2 {
  margin: 0;
  font-family: var(--co-display, system-ui, sans-serif);
  letter-spacing: -.045em;
  line-height: 1.02;
}

.co-core-onboarding--welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(19rem, .75fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
}

.co-core-onboarding--welcome h1,
.co-core-onboarding-head h1,
.co-core-roadmap-hero h1,
.co-core-service-head h1 {
  max-width: 13ch;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
}

.co-core-onboarding--welcome > div > p,
.co-core-onboarding-head p,
.co-core-roadmap-hero p,
.co-core-service-head p {
  max-width: 48rem;
  color: var(--co-muted, #d7ccdf);
  font-size: 1.08rem;
}

.co-core-auth-card,
.co-core-section-block,
.co-core-preview,
.co-core-panel,
.co-core-roadmap-card,
.co-core-service-form,
.co-core-service-list {
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--co-line, rgba(255,255,255,.14));
  border-radius: var(--co-radius, 1.25rem);
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: var(--co-shadow, 0 24px 70px rgba(9,4,18,.34));
}

.co-core-auth-card h2 { margin-top: 0; }

.co-core-auth-button {
  display: flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  margin-top: .75rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: var(--co-cream, #fff7f2);
  background: rgba(255,255,255,.08);
  font-weight: 850;
  text-decoration: none;
}

.co-core-auth-button.is-google { color: #25143c; background: #fff; }
.co-core-auth-button.is-x { color: #fff; background: #050505; }
.co-core-auth-button.is-email { background: linear-gradient(115deg, var(--co-peach, #ff9860), var(--co-coral, #ff3030)); color: #170d26; }
.co-core-auth-button.is-disabled { opacity: .54; cursor: not-allowed; }

.co-core-divider { position: relative; margin: 1.25rem 0; text-align: center; color: #aa9bb9; }
.co-core-divider::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 0; width: 100%; border-top: 1px solid rgba(255,255,255,.13); }
.co-core-divider span { position: relative; z-index: 1; padding: 0 .75rem; background: #25143c; }

.co-core-help { color: #bcaec9; font-size: .85rem; }

.co-core-notice {
  width: min(calc(100% - 2rem), 1180px);
  margin: 1rem auto;
  padding: .9rem 1rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .85rem;
  background: rgba(255,255,255,.08);
}
.co-core-notice.is-success { border-color: rgba(92,225,169,.45); background: rgba(92,225,169,.12); }
.co-core-notice.is-error { border-color: rgba(255,48,48,.5); background: rgba(255,48,48,.12); }

.co-core-onboarding-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.co-core-progress {
  display: flex;
  min-width: 9rem;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 1rem;
  background: rgba(255,255,255,.06);
}
.co-core-progress strong { color: var(--co-peach, #ff9860); font-size: 2rem; line-height: 1; }
.co-core-progress span { color: #c6b9d1; font-size: .77rem; }

.co-core-step-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  padding: 0;
  margin: 2.5rem 0;
  list-style: none;
}
.co-core-step-list li { display: flex; gap: .75rem; min-width: 0; padding: 1rem; border: 1px solid var(--co-line, rgba(255,255,255,.14)); border-radius: 1rem; background: rgba(255,255,255,.045); }
.co-core-step-list li > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255,255,255,.1); font-weight: 900; }
.co-core-step-list div { display: flex; min-width: 0; flex-direction: column; }
.co-core-step-list small { color: #b7a9c5; line-height: 1.35; }
.co-core-step-list .is-complete { border-color: rgba(92,225,169,.35); }
.co-core-step-list .is-complete > span { color: #13271f; background: #5ce1a9; }
.co-core-step-list .is-current { border-color: rgba(255,152,96,.45); }
.co-core-step-list .is-locked { opacity: .58; }

.co-core-section-block { margin-top: 1.25rem; }
.co-core-offer-start { background: linear-gradient(120deg, rgba(255,152,96,.13), rgba(237,16,200,.1), rgba(64,48,192,.13)); }
.co-core-block-heading { display: grid; grid-template-columns: 1fr minmax(15rem, .65fr); gap: 1.5rem; align-items: end; margin-bottom: 1.5rem; }
.co-core-block-heading h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.co-core-block-heading p { margin: 0; color: var(--co-muted, #d7ccdf); }

.co-core-provider-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.co-core-provider-grid--three { grid-template-columns: repeat(3, 1fr); }
.co-core-provider-card { padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; background: rgba(11,5,22,.24); }
.co-core-provider-card > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.co-core-provider-card p { min-height: 5.2rem; color: #c8bad3; font-size: .86rem; line-height: 1.45; }
.co-core-provider-state { color: #ad9ebc; font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.co-core-provider-state.is-linked { color: #5ce1a9; }
.co-core-text-button { padding: 0; border: 0; color: var(--co-peach, #ff9860); background: transparent; font-weight: 850; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.co-core-coming { color: #ac9dbc; font-size: .76rem; }

.co-core-form { padding: 1.2rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; background: rgba(11,5,22,.22); }
.co-core-input-row { display: grid; grid-template-columns: 1fr auto; gap: .7rem; margin-top: .55rem; }
.co-core-input-row input { min-width: 0; padding: .78rem 1rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: #fff; background: rgba(255,255,255,.07); }
.co-core-check { display: flex; align-items: flex-start; gap: .55rem; margin-top: .9rem; color: #d7ccdf; font-size: .9rem; }
.co-core-check input { margin-top: .3rem; accent-color: var(--co-magenta, #ed10c8); }

.co-core-preview { margin-top: 1rem; }
.co-core-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.co-core-preview-head h3 { margin: 0; font-size: 1.8rem; }
.co-core-preview-head p { color: #c8bad3; }
.co-core-avatar { width: 5rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.co-core-import-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1rem; }
.co-core-import-card { display: flex; overflow: hidden; flex-direction: column; gap: .65rem; padding: .7rem; border: 1px solid rgba(255,255,255,.12); border-radius: .9rem; background: rgba(255,255,255,.04); cursor: pointer; }
.co-core-import-card img,
.co-core-import-placeholder { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: .6rem; background: linear-gradient(135deg, var(--co-indigo, #4030c0), var(--co-magenta, #ed10c8)); }
.co-core-import-card small { color: var(--co-peach, #ff9860); }

.co-core-roadmap-hero { padding: clamp(2rem, 5vw, 4rem) 0; }
.co-core-roadmap-key { display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; margin-bottom: 1.5rem; color: #c9bdd3; font-size: .82rem; }
.co-core-roadmap-key span { display: flex; align-items: center; gap: .4rem; }
.co-core-roadmap-key i { width: .65rem; aspect-ratio: 1; border-radius: 50%; background: #8e7e9d; }
.co-core-roadmap-key .is-live { background: #5ce1a9; }
.co-core-roadmap-key .is-building { background: var(--co-peach, #ff9860); }
.co-core-roadmap-key .is-planned { background: var(--co-magenta, #ed10c8); }
.co-core-roadmap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.co-core-roadmap-card h2 { margin-top: .8rem; font-size: clamp(1.65rem, 3vw, 2.4rem); }
.co-core-roadmap-card > p { color: #cfc3d8; }
.co-core-roadmap-card li { margin-bottom: .55rem; color: #ded5e5; }
.co-core-roadmap-status { display: inline-flex; padding: .3rem .55rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #d9cee1; font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.co-core-roadmap-status.is-live { color: #5ce1a9; }
.co-core-roadmap-status.is-building { color: var(--co-peach, #ff9860); }
.co-core-roadmap-status.is-planned { color: #f474dc; }
.co-core-roadmap-note { margin-top: 1.2rem; padding: clamp(1.4rem, 4vw, 2.8rem); border-radius: 1.4rem; background: linear-gradient(115deg, rgba(255,152,96,.15), rgba(237,16,200,.14), rgba(64,48,192,.18)); }
.co-core-roadmap-note h2 { font-size: clamp(2rem, 4vw, 3rem); }

.co-core-service-builder { margin-top: clamp(2rem, 5vw, 4rem); }
.co-core-service-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.3rem; }
.co-core-service-head h1 { max-width: 14ch; font-size: clamp(2.8rem, 7vw, 5.4rem); }
.co-core-service-head > div { max-width: 52rem; }
.co-core-service-gate { margin-block: clamp(3rem, 8vw, 7rem); }
.co-core-service-gate h2 { margin: 0 0 .5rem; font-size: clamp(2rem, 5vw, 3.8rem); }

.co-core-service-list { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 1rem; margin-bottom: 1rem; padding: 1rem; }
.co-core-service-list > strong { padding: .65rem 0; color: var(--co-peach, #ff9860); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.co-core-service-list > div { display: flex; overflow-x: auto; gap: .6rem; padding-bottom: .2rem; }
.co-core-service-chip { display: flex; min-width: 11rem; flex: 0 0 auto; flex-direction: column; padding: .6rem .75rem; border: 1px solid rgba(255,255,255,.12); border-radius: .8rem; color: var(--co-cream, #fff7f2); background: rgba(255,255,255,.045); text-decoration: none; }
.co-core-service-chip.is-active { border-color: rgba(255,152,96,.7); background: rgba(255,152,96,.12); }
.co-core-service-chip small { color: #bcaec9; text-transform: capitalize; }

.co-core-service-form { padding: clamp(1rem, 3vw, 2rem); }
.co-core-form-section { padding: clamp(1rem, 3vw, 1.6rem); border: 1px solid rgba(255,255,255,.1); border-radius: 1.1rem; background: rgba(11,5,22,.24); }
.co-core-form-section + .co-core-form-section { margin-top: 1rem; }
.co-core-form-heading { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.2rem; }
.co-core-form-heading > span { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #170d26; background: linear-gradient(120deg, var(--co-peach, #ff9860), var(--co-magenta, #ed10c8)); font-weight: 950; }
.co-core-form-heading h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
.co-core-form-heading p { margin: .2rem 0 0; color: #bcaec9; }
.co-core-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.co-core-form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-core-field { display: flex; min-width: 0; flex-direction: column; gap: .42rem; color: #f0e8f4; font-weight: 800; }
.co-core-field--wide + .co-core-field--wide { margin-top: 1rem; }
.co-core-field input,
.co-core-field select,
.co-core-field textarea { width: 100%; min-width: 0; padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: .75rem; color: #fff; background: rgba(255,255,255,.065); font: inherit; font-weight: 500; }
.co-core-field textarea { resize: vertical; line-height: 1.5; }
.co-core-field select { color-scheme: dark; }
.co-core-field input:focus,
.co-core-field select:focus,
.co-core-field textarea:focus { border-color: var(--co-peach, #ff9860); outline: 3px solid rgba(255,152,96,.16); }
.co-core-field small { color: #ad9ebc; font-size: .76rem; font-weight: 500; }
.co-core-form-grid + .co-core-field--wide,
.co-core-field--wide + .co-core-form-grid { margin-top: 1rem; }
.co-core-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.2rem; }
.co-core-form-actions > div { display: flex; flex-direction: column; }
.co-core-form-actions span { color: #bcaec9; font-size: .84rem; }

@media (max-width: 900px) {
  .co-core-onboarding--welcome,
  .co-core-block-heading,
  .co-core-form-grid--three { grid-template-columns: 1fr; }
  .co-core-step-list,
  .co-core-provider-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .co-core-onboarding-head { align-items: flex-start; flex-direction: column; }
	.co-core-service-head,
	.co-core-form-actions { align-items: flex-start; flex-direction: column; }
  .co-core-step-list,
  .co-core-provider-grid,
  .co-core-import-grid,
  .co-core-roadmap-grid { grid-template-columns: 1fr; }
	.co-core-form-grid,
	.co-core-service-list { grid-template-columns: 1fr; }
  .co-core-input-row { grid-template-columns: 1fr; }
  .co-core-input-row .co-button { width: 100%; }
  .co-core-provider-card p { min-height: 0; }
	.co-core-form-actions .co-button { width: 100%; }
}