/*
 * Scoped to the treatment. Vendor OAuth controls retain their brand styling.
 * Colour, surface and type come from the site tokens in css/styles.css; the
 * literals are only fallbacks so the treatment still renders if they are absent.
 */
.cc-auth-experiment {
  --auth-surface: var(--cc-surface-1, #1a1a1a);
  --auth-surface-raised: var(--cc-surface-2, #242424);
  --auth-field: var(--cc-black, #0a0a0a);
  --auth-line: var(--cc-border, #2e2e2e);
  --auth-border: #6b6b6b; /* 3:1 against both the card and the field (WCAG 1.4.11) */
  --auth-text: var(--cc-bone, #f2f2f2);
  --auth-muted: var(--cc-muted, #b3b3b3);
  --auth-accent: var(--cc-green, #95c11f);
  --auth-accent-hover: var(--cc-green-hover, #a8d62f);
  --auth-link: var(--cc-pink, #ff2d6f);
  --auth-link-hover: var(--cc-pink-hover, #ff5288);
  --auth-display: var(--cc-font-display, 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif);
  --auth-body: var(--cc-font-body, Inter, system-ui, sans-serif);
  color: var(--auth-text);
  font-family: var(--auth-body);
  font-size: 1rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------ page layout -- */
.cc-auth-page { max-width: 1120px; margin: 3rem auto 5rem; padding: 0 1.25rem; display: grid; grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: start; }

/* ------------------------------------------------------------------ intro -- */
.cc-auth-intro { padding-top: 3rem; }
.cc-auth-mark { display: block; width: 64px; height: 80px; margin-bottom: 1.5rem; filter: drop-shadow(0 0 1.5rem rgba(var(--cc-green-rgb, 149, 193, 31), .3)); }
.cc-auth-eyebrow { margin: 0; font-weight: 700; letter-spacing: .16em; font-size: .8rem; color: var(--auth-accent); }
.cc-auth-intro h1 { font-family: var(--auth-display); font-size: clamp(3.25rem, 6vw, 5.25rem); font-weight: 400; line-height: .95; letter-spacing: .02em; text-transform: uppercase; margin: 1rem 0 1.5rem; }
.cc-auth-intro h1 span { display: block; }
.cc-auth-lead { color: var(--auth-muted); font-size: 1.125rem; max-width: 26rem; margin: 0; }
.cc-auth-benefits { list-style: none; padding: 0; margin: 2.5rem 0 2rem; max-width: 26rem; border-bottom: 1px solid var(--auth-line); }
.cc-auth-benefits li { display: flex; align-items: baseline; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--auth-line); }
.cc-auth-benefits span { flex: 0 0 1.5rem; font-family: var(--auth-display); font-size: 1.25rem; letter-spacing: .04em; line-height: 1; color: var(--auth-accent); }
.cc-auth-footnote { color: var(--auth-muted); font-size: .85rem; margin: 0; }

/* ------------------------------------------------------------- form card -- */
.cc-auth-form-section { padding: 0 !important; }
.cc-auth-experiment .card, .cc-auth-experiment .modal-content { background: var(--auth-surface); border: 1px solid var(--auth-line); border-radius: 1rem; box-shadow: 0 16px 60px #0006; }
.cc-auth-form-section .card { padding: clamp(1.25rem, 3vw, 2rem); }
.cc-auth-form-section .card > .container, .cc-auth-form-section .card > .container-fluid { padding: 0 !important; }
.cc-auth-form-section .card > div > .row > div { width: 100%; }
.cc-auth-experiment .cc-auth-heading, .cc-auth-experiment .modal-title { font-family: var(--auth-display); font-size: clamp(1.6rem, 6vw, 2rem); font-weight: 400; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; color: var(--auth-text); }
.cc-auth-experiment .cc-auth-heading { margin: 0; }
.cc-auth-subtitle { color: var(--auth-muted); font-size: .95rem; margin: .5rem 0 1.5rem; text-align: left; }
.cc-auth-experiment .text-center:has(> .cc-auth-heading) { text-align: left !important; }
.cc-auth-experiment .nav-pills { padding: .3rem; background: var(--auth-field); border: 1px solid var(--auth-line); border-radius: .75rem; gap: .3rem; }
.cc-auth-experiment .nav-pills .nav-link { color: var(--auth-muted); background: transparent; font: 600 .95rem var(--auth-body); text-transform: none; border-radius: .5rem; margin: 0; padding: .8rem; min-height: 48px; }
.cc-auth-experiment .nav-pills .nav-link.active { color: var(--auth-text); background: var(--auth-surface-raised); box-shadow: inset 0 -2px 0 var(--auth-accent); }
.cc-auth-experiment .form-outline { display: flex; flex-direction: column; text-align: left; }
.cc-auth-experiment .form-outline .form-label { position: static !important; transform: none !important; order: -1; color: var(--auth-text) !important; font-size: .875rem; font-weight: 500; margin-bottom: .5rem; padding: 0 !important; }
.cc-auth-experiment .form-outline .form-notch { display: none; }
.cc-auth-experiment .form-outline .form-control { background: var(--auth-field) !important; border: 1px solid var(--auth-border) !important; border-radius: .5rem; color: #fff; min-height: 48px; padding: .7rem .85rem !important; font-size: 1rem; line-height: 1.5; }
.cc-auth-experiment .form-control:focus { outline: 2px solid var(--auth-accent); outline-offset: 2px; box-shadow: none; }
.cc-auth-experiment .form-control.is-invalid { border-color: #ffa8b0 !important; }
.cc-auth-experiment .invalid-feedback { color: #ffa8b0; }
.cc-auth-feedback { color: #ffd4d8; background: #382024; border: 1px solid #ab626c; border-radius: .5rem; padding: .85rem; margin: 1rem; }
.cc-auth-experiment .cc-auth-group { font-size: .9rem; font-weight: 700; text-align: left; padding-top: .75rem; }
.cc-auth-group p { color: var(--auth-muted); font-size: .85rem; font-weight: 400; margin: .5rem 0 0; }
.cc-auth-experiment .btn { min-height: 48px; border-radius: .6rem; text-transform: none; font: 600 .95rem var(--auth-body); box-shadow: none; }
.cc-auth-experiment .btn-success { background: var(--auth-accent) !important; color: var(--cc-black, #0a0a0a) !important; border: 1px solid transparent; }
.cc-auth-experiment .btn-success:hover { background: var(--auth-accent-hover) !important; }
.cc-auth-experiment a:not(.nav-link):not(.btn-success) { color: var(--auth-link) !important; text-underline-offset: .2em; }
.cc-auth-experiment a:not(.nav-link):not(.btn-success):hover { color: var(--auth-link-hover) !important; }
.cc-auth-experiment :is(a, button, input):focus-visible { outline: 2px solid var(--auth-accent); outline-offset: 4px; }
.cc-auth-experiment .form-check-label { color: var(--auth-muted); font-size: .875rem; line-height: 1.6; padding-left: .4rem; cursor: pointer; }
.cc-auth-experiment .form-check-input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; }
.cc-auth-experiment .text-muted { color: var(--auth-muted) !important; }

/* ---------------------------------------------------------------- modals -- */
.cc-auth-experiment .modal-dialog { max-width: 560px; }
.cc-auth-experiment .modal-header { border-bottom: 0; padding: 1.75rem 1.5rem .5rem; }
.cc-auth-experiment .modal-header .col-auto { flex: 1 1 0; min-width: 0; margin-left: 0 !important; }
.cc-auth-experiment .modal-header:has(.btn-close) .col-auto { margin-left: 2rem !important; }
.cc-auth-experiment .modal-body { padding: 1.5rem; }
.cc-auth-experiment .modal-footer { border-top-color: var(--auth-line); padding: 1rem 1.5rem; }
.cc-auth-experiment .modal-footer a { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; }
.cc-auth-experiment .modal-body .col-11 { width: 100%; }
.cc-auth-experiment #signUpModalForm { overflow-y: auto; }
.cc-auth-experiment #sign-up { padding-bottom: 0 !important; }
.cc-auth-experiment #signUpModalForm .row.g-4 > :is(.col-4, .col-5, .col-7) { width: 100%; }
.cc-auth-experiment .form-helper { position: static; color: var(--auth-muted); }

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 800px) {
  .cc-auth-page { display: block; max-width: 580px; margin-top: 1.5rem; }
  /* Brain and wordmark share the first row; the rest spans the full width. */
  .cc-auth-intro { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .75rem; padding-top: 0; }
  .cc-auth-intro > :not(.cc-auth-mark):not(.cc-auth-eyebrow) { grid-column: 1 / -1; }
  .cc-auth-mark { width: 36px; height: 45px; margin: 0; }
  .cc-auth-intro h1 { font-size: clamp(2.5rem, 11vw, 3.25rem); margin: 1.25rem 0 1rem; }
  .cc-auth-intro h1 span { display: inline; }
  .cc-auth-lead { font-size: 1rem; }
  .cc-auth-benefits, .cc-auth-footnote { display: none; }
  .cc-auth-panel { margin-top: 1.5rem; }
}
@media (max-width: 575px) {
  .cc-auth-experiment #signUpModalForm .row > .col-6 { width: 100%; }
  .cc-auth-experiment .modal-body { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-auth-experiment *, .cc-auth-experiment { transition: none !important; animation: none !important; }
}