/* ============================================================
   AggM8 trial skin — matches aggm8.generativesolutions.ai
   (night navy, logo gold, DM Sans). Loaded INSTEAD of
   trial-flow.css when the trial product is aggm8; self-contained
   styling for the same .trial-* markup, plus a minimal AggM8
   header that replaces the GSUK nav (hidden below).
   Palette is taken from the AggM8 logo (gold #FBC201 / charcoal
   #23272B); the night ground and type mirror aggm8-site/index.html.
   ============================================================ */

/* DM Sans — self-hosted (aggm8-site vendors the same two subsets).
   JetBrains Mono for code/creds comes from base.html's font link. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/DMSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/DMSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.brand-aggm8 {
  /* Remap the shared accents to AggM8 gold so any light component that
     leaks into this flow (flashes, links) still lands on-brand. */
  --accent:      #FBC201;
  --accent-ink:  #23272B;
  --accent-soft: rgba(251,194,1,.16);

  --ag-night:      #0a0e17;
  --ag-night-2:    #0f1520;
  --ag-night-3:    #151d2e;
  --ag-night-4:    #1c2640;
  /* Straight off the logo: gold ink, charcoal counter-ink. */
  --ag-gold:       #FBC201;
  --ag-gold-light: #FFD84D;
  --ag-gold-deep:  #C89A00;
  --ag-gold-glow:  rgba(251,194,1,.16);
  --ag-gold-line:  rgba(251,194,1,.34);
  --ag-charcoal:   #23272B;
  --ag-text:       #e2eaf2;
  --ag-dim:        #7a95aa;
  --ag-faint:      #4a6070;
  --ag-line:       rgba(255,255,255,.08);
  --ag-line-soft:  rgba(255,255,255,.06);
  --ag-red:        #ef4444;
  --ag-red-bg:     rgba(239,68,68,.12);
  --ag-green:      #22c55e;
  --ag-shadow:     0 24px 60px -24px rgba(0,0,0,.8), 0 4px 16px rgba(0,0,0,.4);

  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--ag-night);
  color: var(--ag-text);
  -webkit-font-smoothing: antialiased;
}

/* GSUK marketing nav replaced by the AggM8 header below */
body.brand-aggm8 > header.nav { display: none; }

/* ---- Minimal AggM8 header (mirrors the aggm8 site nav) ---- */
.brand-aggm8 .ag-nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.brand-aggm8 .ag-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* The lockup is the brand — no type beside it. Height-driven so the intrinsic
   width/height on the <img> reserves the right box and nothing reflows. */
.brand-aggm8 .ag-brand img {
  height: 34px;
  width: auto;
  display: block;
}
.brand-aggm8 .ag-nav__back {
  font-weight: 500;
  font-size: 15px;
  color: var(--ag-dim);
  text-decoration: none;
  transition: color .2s;
}
.brand-aggm8 .ag-nav__back:hover { color: #fff; }

/* ---- Page shell ---- */
.brand-aggm8 .trial-page {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: 24px 24px 84px;
  position: relative;
  background: var(--ag-night);
}
/* Amber/blue radial wash — the aggm8.generativesolutions.ai hero recipe */
.brand-aggm8 .trial-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 42% at 88% 2%, rgba(251,194,1,.12), transparent 62%),
    radial-gradient(45% 40% at 4% 96%, rgba(59,130,246,.09), transparent 65%);
  pointer-events: none;
}
.brand-aggm8 .trial-page > * { position: relative; }

/* ---- Two-panel signup card ---- */
.brand-aggm8 .trial-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  max-width: 980px;
  background: var(--ag-night-2);
  border: 1px solid var(--ag-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--ag-shadow);
}

/* Left: pitch panel, one shade up from the card */
.brand-aggm8 .trial-pitch {
  background: linear-gradient(160deg, var(--ag-night-3), var(--ag-night-2) 70%);
  border-right: 1px solid var(--ag-line);
  color: var(--ag-text);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-aggm8 .trial-pitch h1 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 14px;
}
.brand-aggm8 .trial-pitch__lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ag-dim);
  margin: 0 0 26px;
}
.brand-aggm8 .trial-points {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.brand-aggm8 .trial-points li {
  padding: 12px 0;
  border-top: 1px solid var(--ag-line-soft);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: baseline;
}
.brand-aggm8 .trial-points li::before {
  content: "\2713";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ag-gold);
  color: var(--ag-charcoal);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  transform: translateY(3px);
}
.brand-aggm8 .trial-points strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.brand-aggm8 .trial-points span {
  display: block;
  font-size: 14px;
  color: var(--ag-dim);
  margin-top: 2px;
}
/* "How it works" steps (quick_trial) */
.brand-aggm8 .trial-steps {
  background: var(--ag-night);
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 26px;
}
.brand-aggm8 .trial-steps__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ag-faint);
  margin-bottom: 10px;
}
.brand-aggm8 .trial-steps li {
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
  color: var(--ag-dim);
}
.brand-aggm8 .trial-steps li:first-child { color: var(--ag-text); font-weight: 500; }
.brand-aggm8 .trial-steps__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ag-night-4);
  color: var(--ag-dim);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.brand-aggm8 .trial-steps li:first-child .trial-steps__num {
  background: var(--ag-gold);
  color: var(--ag-charcoal);
}

/* Readonly email chip (quick_trial token mode) */
.brand-aggm8 .trial-email-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ag-night);
  border: 1px solid var(--ag-line);
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--ag-dim);
  min-width: 0;
}
.brand-aggm8 .trial-email-chip strong {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Password requirements hint */
.brand-aggm8 .trial-hint { font-size: 12px; color: var(--ag-faint); }

.brand-aggm8 .trial-after {
  border-top: 1px solid var(--ag-line-soft);
  padding-top: 18px;
}
.brand-aggm8 .trial-after__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ag-faint);
  margin-bottom: 4px;
}
.brand-aggm8 .trial-after__price {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.brand-aggm8 .trial-after__note {
  font-size: 14px;
  color: var(--ag-dim);
  margin-left: 8px;
}

/* Right: form panel */
.brand-aggm8 .trial-form-panel { padding: 52px 44px; }
.brand-aggm8 .trial-form-panel h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 6px;
}
.brand-aggm8 .trial-form-panel .subtitle {
  font-size: 14px;
  color: var(--ag-dim);
  margin: 0 0 24px;
}
.brand-aggm8 .trial-form-panel .form { display: flex; flex-direction: column; gap: 16px; }
.brand-aggm8 .trial-page .field { display: flex; flex-direction: column; gap: 6px; }
.brand-aggm8 .trial-page .field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ag-text);
}
.brand-aggm8 .trial-page .input,
.brand-aggm8 .trial-page .select {
  width: 100%;
  padding: 11px 14px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  color: #fff;
  background: var(--ag-night);
  border: 1px solid var(--ag-line);
  border-radius: 10px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
/* Native dark select popup, and readable options on every platform */
.brand-aggm8 .trial-page .select { color-scheme: dark; }
.brand-aggm8 .trial-page .select option { background: var(--ag-night-2); color: #fff; }
.brand-aggm8 .trial-page .input::placeholder { color: var(--ag-faint); }
.brand-aggm8 .trial-page .input:focus,
.brand-aggm8 .trial-page .select:focus {
  border-color: var(--ag-gold);
  box-shadow: 0 0 0 3px rgba(251,194,1,.22);
}
.brand-aggm8 .trial-phone {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 8px;
}
.brand-aggm8 .trial-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Buttons — gold primary, charcoal ink, as in the logo lockup */
.brand-aggm8 .trial-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.brand-aggm8 .trial-page .btn--primary {
  background: var(--ag-gold);
  color: var(--ag-charcoal);
  box-shadow: 0 8px 24px -8px rgba(251,194,1,.45);
}
.brand-aggm8 .trial-page .btn--primary:hover {
  background: var(--ag-gold-light);
  color: var(--ag-charcoal);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(251,194,1,.55);
}
.brand-aggm8 .trial-page .btn:not(.btn--primary) {
  background: transparent;
  color: var(--ag-text);
  border-color: var(--ag-line);
}
.brand-aggm8 .trial-page .btn:not(.btn--primary):hover {
  border-color: var(--ag-gold);
  color: var(--ag-gold-light);
  transform: translateY(-2px);
}
.brand-aggm8 .trial-page .btn--block { width: 100%; }

.brand-aggm8 .trial-fineprint {
  text-align: center;
  font-size: 12px;
  color: var(--ag-faint);
  margin-top: 18px;
}
.brand-aggm8 .trial-page a:not(.btn):not(.ag-brand) { color: var(--ag-gold-light); text-decoration: none; }
.brand-aggm8 .trial-page a:not(.btn):not(.ag-brand):hover { text-decoration: underline; }
.brand-aggm8 .trial-alt {
  text-align: center;
  font-size: 14px;
  color: var(--ag-dim);
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--ag-line-soft);
}
.brand-aggm8 .trial-alt form { display: inline; }
.brand-aggm8 .trial-alt button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ag-gold-light);
}
.brand-aggm8 .trial-alt button:hover { text-decoration: underline; }

/* Signed-in identity chip */
.brand-aggm8 .trial-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--ag-night);
  border: 1px solid var(--ag-line);
  border-radius: 12px;
  margin-bottom: 22px;
  min-width: 0;
}
.brand-aggm8 .trial-identity__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ag-gold), var(--ag-gold-deep));
  color: var(--ag-charcoal);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.brand-aggm8 .trial-identity__name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-aggm8 .trial-identity__email {
  font-size: 12px;
  color: var(--ag-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Flash messages on the AggM8 skin ---- */
body.brand-aggm8 .flash-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px 0 !important;
}
body.brand-aggm8 .alert {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid;
  padding: 12px 16px;
}
body.brand-aggm8 .alert--info    { background: var(--ag-night-3); border-color: var(--ag-line); color: var(--ag-text); }
body.brand-aggm8 .alert--success { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #86efac; }
body.brand-aggm8 .alert--error   { background: var(--ag-red-bg); border-color: rgba(239,68,68,.35); color: #fca5a5; }

/* ---- Provisioning status card ---- */
.brand-aggm8 .trial-status-card {
  width: 100%;
  max-width: 560px;
  background: var(--ag-night-2);
  border: 1px solid var(--ag-line);
  border-radius: 24px;
  padding: 52px 44px;
  text-align: center;
  box-shadow: var(--ag-shadow);
}
.brand-aggm8 .trial-status-card h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 20px 0 8px;
}
.brand-aggm8 .trial-status-card p { color: var(--ag-dim); font-size: 15px; }
.brand-aggm8 .trial-spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border: 3px solid var(--ag-night-4);
  border-top-color: var(--ag-gold);
  border-radius: 50%;
  animation: ag-spin 1s linear infinite;
}
@keyframes ag-spin { to { transform: rotate(360deg); } }

.brand-aggm8 .trial-progress {
  width: 100%;
  height: 5px;
  background: var(--ag-night-4);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 26px;
}
.brand-aggm8 .trial-progress-bar {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, var(--ag-gold), var(--ag-gold-light));
  border-radius: 100px;
  transition: width 2s ease;
}
.brand-aggm8 .trial-progress-text {
  font-size: 13px;
  color: var(--ag-faint);
  margin-top: 12px;
}

.brand-aggm8 .trial-state-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
}
.brand-aggm8 .trial-state-icon--good { background: rgba(34,197,94,.14); color: #4ade80; }
.brand-aggm8 .trial-state-icon--bad  { background: var(--ag-red-bg); color: #fca5a5; }
.brand-aggm8 .trial-state-icon--wait { background: var(--ag-gold-glow); color: var(--ag-gold-light); }

.brand-aggm8 .trial-creds {
  background: var(--ag-night);
  border: 1px solid var(--ag-line);
  border-radius: 14px;
  padding: 20px;
  text-align: left;
  margin: 24px 0;
}
.brand-aggm8 .trial-creds > div + div {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ag-line-soft);
}
.brand-aggm8 .trial-creds__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ag-faint);
  margin-bottom: 4px;
}
.brand-aggm8 .trial-creds__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-aggm8 .trial-creds .btn--sm { padding: 6px 12px; font-size: 13px; flex-shrink: 0; }
.brand-aggm8 .trial-creds code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: #fff;
  word-break: break-all;
}
.brand-aggm8 .trial-creds a {
  font-size: 15px;
  font-weight: 700;
  word-break: break-all;
}

.brand-aggm8 .trial-error-detail {
  background: var(--ag-red-bg);
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #fca5a5;
  margin: 20px 0;
  word-break: break-word;
}

.brand-aggm8 .trial-status__footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--ag-line-soft);
  font-size: 13px;
  color: var(--ag-faint);
}

/* ---- Cookie banner (base.html renders it with inline light styles) ---- */
body.brand-aggm8 #cookie-banner {
  background: var(--ag-night-2) !important;
  border-top: 1px solid var(--ag-line) !important;
  box-shadow: 0 -8px 30px rgba(0,0,0,.6) !important;
}
body.brand-aggm8 #cookie-banner strong { color: #fff !important; }
body.brand-aggm8 #cookie-banner p { color: var(--ag-dim) !important; }
body.brand-aggm8 #cookie-banner a { color: var(--ag-gold-light); }
body.brand-aggm8 #cookie-banner .btn--primary {
  background: var(--ag-gold);
  color: var(--ag-charcoal);
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  padding: 11px 22px;
}
body.brand-aggm8 #cookie-banner .btn--primary:hover {
  background: var(--ag-gold-light);
  color: var(--ag-charcoal);
}

/* ---- Portal auth card (login / register / reset on the portal host) ---- */
.brand-aggm8 .portal-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--ag-night-2);
  border: 1px solid var(--ag-line);
  border-radius: 24px;
  padding: 44px 40px;
  box-shadow: var(--ag-shadow);
}
.brand-aggm8 .portal-auth-card h2 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 6px;
}
.brand-aggm8 .portal-auth-card .subtitle {
  font-size: 14px;
  color: var(--ag-dim);
  margin: 0 0 24px;
}
.brand-aggm8 .portal-auth-card .form { display: flex; flex-direction: column; gap: 16px; }
.brand-aggm8 .portal-auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
}
.brand-aggm8 .portal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ag-dim);
  cursor: pointer;
}
.brand-aggm8 .portal-check input { width: 16px; height: 16px; accent-color: var(--ag-gold); }
.brand-aggm8 .trial-page .portal-code-input {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-align: center;
}
.brand-aggm8 .portal-optional { color: var(--ag-faint); font-weight: 400; }

@media (max-width: 860px) {
  .brand-aggm8 .portal-auth-card { padding: 32px 24px; border-radius: 20px; }
}

/* ---- Mobile ---- */
@media (max-width: 860px) {
  .brand-aggm8 .ag-nav { height: 64px; padding: 0 18px; }
  .brand-aggm8 .ag-brand img { height: 28px; }
  .brand-aggm8 .trial-page { padding: 12px 16px 56px; min-height: calc(100vh - 64px); }
  .brand-aggm8 .trial-split {
    grid-template-columns: 1fr;
    max-width: 460px;
    border-radius: 20px;
  }
  /* Pitch collapses to a slim masthead; the form leads. */
  .brand-aggm8 .trial-pitch { padding: 24px; border-right: 0; border-bottom: 1px solid var(--ag-line); }
  .brand-aggm8 .trial-pitch h1 { font-size: 24px; }
  .brand-aggm8 .trial-pitch__lede,
  .brand-aggm8 .trial-points,
  .brand-aggm8 .trial-steps,
  .brand-aggm8 .trial-after { display: none; }
  .brand-aggm8 .trial-form-panel { padding: 28px 24px; }
  .brand-aggm8 .trial-two-col { grid-template-columns: 1fr; }
  /* iOS: 16px inputs prevent auto-zoom on focus */
  .brand-aggm8 .trial-page .input,
  .brand-aggm8 .trial-page .select { font-size: 16px; }
  .brand-aggm8 .trial-status-card { padding: 32px 24px; border-radius: 20px; }
}

/* ---- Reduced motion: the skin must be fully usable with no animation ---- */
@media (prefers-reduced-motion: reduce) {
  .brand-aggm8 .trial-spinner { animation: none; border-top-color: var(--ag-gold); }
  .brand-aggm8 .trial-progress-bar { transition: none; }
  .brand-aggm8 .trial-page .btn,
  .brand-aggm8 .trial-page .input,
  .brand-aggm8 .trial-page .select { transition: none; }
  .brand-aggm8 .trial-page .btn:hover { transform: none; }
}