/* ============================================================
   GlassM8 trial skin — matches glassm8.co.uk (daylight, teal,
   Clash Display + Satoshi). Loaded INSTEAD of trial-flow.css
   when the trial product is glassm8; self-contained styling for
   the same .trial-* markup, plus a minimal GlassM8 header that
   replaces the GSUK nav (hidden below).
   Palette/typography tokens mirror glassm8-site/index.html.
   ============================================================ */

@font-face { font-family:'Clash Display'; src:url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('../fonts/ClashDisplay-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

body.brand-glassm8 {
  /* Remap the light redesign accents to GlassM8 teal so shared light
     components (KB, forms, links) land on-brand without per-page CSS. */
  --accent:      #0EA5A4;
  --accent-ink:  #FFFFFF;
  --accent-soft: #E7F4F6;

  --g8-base:       #F6F9FB;
  --g8-surface:    #FDFEFF;
  --g8-ink:        #0C1A24;
  --g8-ink-soft:   #41576A;
  --g8-ink-faint:  #738699;
  --g8-teal:       #0EA5A4;
  --g8-teal-deep:  #0B7E7D;
  --g8-teal-bright:#22D3C5;
  --g8-sky:        #E7F4F6;
  --g8-sky-deep:   #D3EAEE;
  --g8-line:       #DCE6EC;
  --g8-shadow-md:  0 10px 30px -10px rgba(12,26,36,.18), 0 4px 12px rgba(12,26,36,.06);

  font-family: 'Satoshi', system-ui, sans-serif;
  background: var(--g8-base);
  color: var(--g8-ink);
}

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

/* ---- Minimal GlassM8 header (mirrors glassm8.co.uk nav) ---- */
.brand-glassm8 .g8-nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.brand-glassm8 .g8-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--g8-ink);
  text-decoration: none;
}
.brand-glassm8 .g8-brand .mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--g8-teal), var(--g8-teal-bright));
  display: grid;
  place-items: center;
  box-shadow: 0 6px 14px -4px rgba(14,165,164,.6);
}
.brand-glassm8 .g8-brand .mark svg { width: 18px; height: 18px; }
.brand-glassm8 .g8-nav__back {
  font-weight: 600;
  font-size: 15px;
  color: var(--g8-ink-soft);
  text-decoration: none;
  transition: color .2s;
}
.brand-glassm8 .g8-nav__back:hover { color: var(--g8-ink); }

/* ---- Page shell ---- */
.brand-glassm8 .trial-page {
  min-height: calc(100vh - 72px);
  display: grid;
  place-items: center;
  padding: 24px 24px 84px;
  position: relative;
  background: var(--g8-base);
}
/* Soft teal light wash, same recipe as the glassm8.co.uk hero */
.brand-glassm8 .trial-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 88% 8%, rgba(34,211,197,.16), transparent 70%),
    radial-gradient(50% 40% at 6% 90%, rgba(14,165,164,.10), transparent 70%);
  pointer-events: none;
}
.brand-glassm8 .trial-page > * { position: relative; }

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

/* Left: daylight sky pitch panel (never dark glass) */
.brand-glassm8 .trial-pitch {
  background: var(--g8-sky);
  border-right: 1px solid var(--g8-sky-deep);
  color: var(--g8-ink);
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-glassm8 .trial-pitch__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g8-teal-deep);
  background: var(--g8-surface);
  border: 1px solid var(--g8-sky-deep);
  padding: 6px 13px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.brand-glassm8 .trial-pitch h1 {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--g8-ink);
  margin: 0 0 14px;
}
.brand-glassm8 .trial-pitch__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--g8-ink-soft);
  margin: 0 0 26px;
}
.brand-glassm8 .trial-points {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}
.brand-glassm8 .trial-points li {
  padding: 12px 0;
  border-top: 1px solid var(--g8-sky-deep);
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: baseline;
}
.brand-glassm8 .trial-points li::before {
  content: "\2713";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--g8-teal);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  transform: translateY(3px);
}
.brand-glassm8 .trial-points strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--g8-ink);
}
.brand-glassm8 .trial-points span {
  display: block;
  font-size: 14px;
  color: var(--g8-ink-soft);
  margin-top: 2px;
}
/* "How it works" steps (quick_trial) */
.brand-glassm8 .trial-steps {
  background: var(--g8-surface);
  border: 1px solid var(--g8-sky-deep);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 26px;
}
.brand-glassm8 .trial-steps__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--g8-ink-faint);
  margin-bottom: 10px;
}
.brand-glassm8 .trial-steps li {
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
  color: var(--g8-ink-soft);
}
.brand-glassm8 .trial-steps li:first-child { color: var(--g8-ink); font-weight: 500; }
.brand-glassm8 .trial-steps__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g8-sky);
  color: var(--g8-ink-faint);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.brand-glassm8 .trial-steps li:first-child .trial-steps__num {
  background: var(--g8-teal);
  color: #fff;
}

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

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

.brand-glassm8 .trial-after {
  border-top: 1px solid var(--g8-sky-deep);
  padding-top: 18px;
}
.brand-glassm8 .trial-after__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--g8-ink-faint);
  margin-bottom: 4px;
}
.brand-glassm8 .trial-after__price {
  font-family: 'Clash Display', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--g8-ink);
}
.brand-glassm8 .trial-after__note {
  font-size: 14px;
  color: var(--g8-ink-soft);
  margin-left: 8px;
}

/* Right: form panel */
.brand-glassm8 .trial-form-panel { padding: 52px 44px; }
.brand-glassm8 .trial-form-panel h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.brand-glassm8 .trial-form-panel .subtitle {
  font-size: 14px;
  color: var(--g8-ink-soft);
  margin: 0 0 24px;
}
.brand-glassm8 .trial-form-panel .form { display: flex; flex-direction: column; gap: 16px; }
.brand-glassm8 .trial-page .field { display: flex; flex-direction: column; gap: 6px; }
.brand-glassm8 .trial-page .field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--g8-ink);
}
.brand-glassm8 .trial-page .input,
.brand-glassm8 .trial-page .select {
  width: 100%;
  padding: 11px 14px;
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 15px;
  color: var(--g8-ink);
  background: var(--g8-surface);
  border: 1px solid var(--g8-line);
  border-radius: 10px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.brand-glassm8 .trial-page .input::placeholder { color: var(--g8-ink-faint); }
.brand-glassm8 .trial-page .input:focus,
.brand-glassm8 .trial-page .select:focus {
  border-color: var(--g8-teal);
  box-shadow: 0 0 0 3px rgba(14,165,164,.16);
}
.brand-glassm8 .trial-phone {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 8px;
}
.brand-glassm8 .trial-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Buttons — teal primary with the glassm8.co.uk lift */
.brand-glassm8 .trial-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Satoshi', 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;
}
.brand-glassm8 .trial-page .btn--primary {
  background: var(--g8-teal);
  color: var(--g8-surface);
  box-shadow: 0 8px 20px -8px rgba(14,165,164,.7);
}
.brand-glassm8 .trial-page .btn--primary:hover {
  background: var(--g8-teal-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(14,165,164,.75);
}
.brand-glassm8 .trial-page .btn:not(.btn--primary) {
  background: transparent;
  color: var(--g8-ink);
  border-color: var(--g8-line);
}
.brand-glassm8 .trial-page .btn:not(.btn--primary):hover {
  border-color: var(--g8-teal);
  color: var(--g8-teal-deep);
  transform: translateY(-2px);
}
.brand-glassm8 .trial-page .btn--block { width: 100%; }

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

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

/* ---- Flash messages on the GlassM8 skin ---- */
body.brand-glassm8 .flash-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px 0 !important;
}
body.brand-glassm8 .alert {
  font-family: 'Satoshi', system-ui, sans-serif;
  font-size: 14px;
  border-radius: 10px;
  border: 1px solid;
  padding: 12px 16px;
}
body.brand-glassm8 .alert--info    { background: var(--g8-sky); border-color: var(--g8-sky-deep); color: var(--g8-teal-deep); }
body.brand-glassm8 .alert--success { background: var(--g8-sky); border-color: var(--g8-sky-deep); color: var(--g8-teal-deep); }
body.brand-glassm8 .alert--error   { background: #FBEAE7; border-color: #EDCBC3; color: #B42318; }

/* ---- Auth card (login) ---- */
.brand-glassm8 .portal-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--g8-surface);
  border: 1px solid var(--g8-line);
  border-radius: 26px;
  padding: 44px 40px;
  box-shadow: var(--g8-shadow-md);
}
.brand-glassm8 .portal-auth-card .trial-pitch__eyebrow { margin-bottom: 14px; }
.brand-glassm8 .portal-auth-card h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.brand-glassm8 .portal-auth-card .subtitle {
  font-size: 14px;
  color: var(--g8-ink-soft);
  margin: 0 0 24px;
}
.brand-glassm8 .portal-auth-card .form { display: flex; flex-direction: column; gap: 16px; }
.brand-glassm8 .portal-auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
}
.brand-glassm8 .portal-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--g8-ink-soft);
  cursor: pointer;
}
.brand-glassm8 .portal-check input { width: 16px; height: 16px; accent-color: var(--g8-teal); }
.brand-glassm8 .trial-page .portal-code-input {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-align: center;
}
.brand-glassm8 .portal-optional { color: var(--g8-ink-faint); font-weight: 400; }

/* ---- Provisioning status card ---- */
.brand-glassm8 .trial-status-card {
  width: 100%;
  max-width: 560px;
  background: var(--g8-surface);
  border: 1px solid var(--g8-line);
  border-radius: 26px;
  padding: 52px 44px;
  text-align: center;
  box-shadow: var(--g8-shadow-md);
}
.brand-glassm8 .trial-status-card h2 {
  font-family: 'Clash Display', sans-serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 20px 0 8px;
}
.brand-glassm8 .trial-status-card p { color: var(--g8-ink-soft); font-size: 15px; }
.brand-glassm8 .trial-spinner {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border: 3px solid var(--g8-sky-deep);
  border-top-color: var(--g8-teal);
  border-radius: 50%;
  animation: g8-spin 1s linear infinite;
}
@keyframes g8-spin { to { transform: rotate(360deg); } }

.brand-glassm8 .trial-progress {
  width: 100%;
  height: 5px;
  background: var(--g8-sky-deep);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 26px;
}
.brand-glassm8 .trial-progress-bar {
  height: 100%;
  width: 5%;
  background: linear-gradient(90deg, var(--g8-teal), var(--g8-teal-bright));
  border-radius: 100px;
  transition: width 2s ease;
}
.brand-glassm8 .trial-progress-text {
  font-size: 13px;
  color: var(--g8-ink-faint);
  margin-top: 12px;
}

.brand-glassm8 .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-glassm8 .trial-state-icon--good { background: var(--g8-sky); color: var(--g8-teal-deep); }
.brand-glassm8 .trial-state-icon--bad  { background: #FBEAE7; color: #B42318; }
.brand-glassm8 .trial-state-icon--wait { background: var(--g8-sky); color: var(--g8-teal-deep); }

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

.brand-glassm8 .trial-error-detail {
  background: #FBEAE7;
  border: 1px solid #EDCBC3;
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #B42318;
  margin: 20px 0;
  word-break: break-word;
}

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

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