/* Onboarding portal — styles shared by the GoWifi captive portal and the GoClub landing page. */

/* Nunito, self-hosted. The member is inside the walled garden until this journey
   ends, so Google Fonts is unreachable at exactly the moment the page loads. One
   variable file per subset covers weights 400–900. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/nunito-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;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/nunito-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;
}

:root {
  --navy-900: #121E33;
  --navy-800: #1A2A44;
  --navy-700: #243658;
  --magenta-700: #9B1F7C;
  --magenta-600: #B91C92;
  --magenta-500: #D42AA5;
  --magenta-100: #FBE8F4;
  --teal-500:   #2DD4BF;
  --teal-600:   #14B8A6;
  --ink:        #1A2A44;
  --ink-muted:  #5A6B85;
  --line:       #E6E9F0;
  --line-strong:#C9D0DE;
  --bg:         #F5F3F7;
  --bg-card:    #FFFFFF;
  --error:      #DC2626;
  --success:    #059669;
  --radius-lg:  20px;
  --radius-md:  14px;
  --radius-sm:  10px;
  --shadow-card: 0 12px 40px -12px rgba(26, 42, 68, 0.18), 0 2px 6px rgba(26, 42, 68, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.page { position: relative; min-height: 100vh; }
.page:before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 300px;
  background:
    radial-gradient(1000px 320px at 85% -20%, rgba(212, 42, 165, 0.35), rgba(212, 42, 165, 0) 60%),
    radial-gradient(800px 280px at 10% -10%, rgba(45, 212, 191, 0.22), rgba(45, 212, 191, 0) 65%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px 40px 20px;
}

.topbar { padding: 4px 4px 18px 4px; text-align: center; }

/* The GoClub mark is full-colour with navy text, so it needs a light ground to sit on --
   the shell behind it is a dark gradient, where it would otherwise disappear. */
.topbar .logo {
  display: inline-block;
  height: 86px;
  width: auto;
  vertical-align: middle;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 10px 18px;
  box-shadow: 0 2px 10px rgba(12, 16, 28, .18);
}

.mall-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 5px 10px 5px 9px;
  background: #F7F8FB;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--navy-800);
  max-width: 100%;
}
.eyebrow-row {
  display: block;
  margin-bottom: 12px;
  line-height: 1.1;
  text-align: center;
}
.eyebrow-row .eyebrow { margin-bottom: 0; vertical-align: middle; }
@media (max-width: 380px) {
  .mall-pill { display: inline-block; margin-left: 0; margin-top: 8px; }
  .eyebrow-row .eyebrow { display: inline-block; }
}
.mall-pill .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
}
.mall-pill b { font-weight: 900; letter-spacing: 0.1px; }

.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-header {
  padding: 26px 24px 18px 24px;
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--magenta-600);
  background: var(--magenta-100);
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
h1.title {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
h1.title .wave { display: inline-block; -webkit-animation: wave 2.2s ease-in-out infinite; animation: wave 2.2s ease-in-out infinite; transform-origin: 70% 70%; }
@-webkit-keyframes wave { 0%,60%,100% { -webkit-transform: rotate(0); } 10% { -webkit-transform: rotate(14deg);} 20% { -webkit-transform: rotate(-8deg);} 30%{-webkit-transform: rotate(14deg);} 40%{-webkit-transform: rotate(-4deg);} 50%{-webkit-transform: rotate(10deg);} }
@keyframes wave { 0%,60%,100% { transform: rotate(0); } 10% { transform: rotate(14deg);} 20% { transform: rotate(-8deg);} 30%{transform: rotate(14deg);} 40%{transform: rotate(-4deg);} 50%{transform: rotate(10deg);} }
.subtitle {
  margin: 0;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.5;
}

.steps-badge { display: block; margin-top: 14px; text-align: center; }
.steps-badge .dots { display: inline-block; vertical-align: middle; }
.steps-badge .dots span {
  display: inline-block;
  width: 28px; height: 5px;
  border-radius: 999px;
  background: var(--line);
  margin-right: 5px;
  vertical-align: middle;
  transition: background-color 260ms ease;
}
.steps-badge .dots span.active { background: var(--magenta-600); }
.steps-badge .dots span.done { background: var(--teal-500); }
.steps-badge .label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.steps-badge .label b { color: var(--navy-800); }

form { margin: 0; }
.form-body { padding: 18px 24px 0 24px; }

.field { display: block; margin: 0 0 14px 0; }
/* `display: block` above outranks the browser default for [hidden], so a hidden
   field needs this to actually stay hidden. */
.field[hidden] { display: none; }
.field label.fl {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-800);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.field .required { color: var(--magenta-600); margin-left: 2px; }
.field .hint {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 4px 0 0 0;
}

.text-input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--navy-800);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.text-input:focus {
  outline: none;
  border-color: var(--magenta-600);
  box-shadow: 0 0 0 3px rgba(185, 28, 146, 0.18);
}
.text-input::-webkit-input-placeholder { color: #9AA5BC; }
.text-input::-moz-placeholder { color: #9AA5BC; opacity: 1; }
.text-input:-ms-input-placeholder { color: #9AA5BC; }

.row2 { display: block; margin: 0 -6px; }
.row2:after { content: ""; display: table; clear: both; }
.row2 .col { float: left; width: 50%; padding: 0 6px; }
@media (max-width: 420px) {
  .row2 .col { float: none; width: 100%; padding: 0; }
}

.idtype-toggle {
  display: inline-block;
  background: #F0F2F7;
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 8px;
}
.idtype-toggle button {
  display: inline-block;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--ink-muted);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.idtype-toggle button.active {
  background: #fff;
  color: var(--navy-800);
  box-shadow: 0 2px 6px rgba(26,42,68,0.12);
}

.mobile-wrap { position: relative; display: block; }
.mobile-wrap .prefix {
  position: absolute;
  top: 0; left: 0;
  width: 70px;
  height: 100%;
  border-right: 1.5px solid var(--line-strong);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-800);
  display: block;
  line-height: 50px;
  text-align: center;
  pointer-events: none;
}
.mobile-wrap .prefix .flag {
  display: inline-block;
  width: 20px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  line-height: 0;
}
.mobile-wrap .prefix .flag svg,
.mobile-wrap .prefix .flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mobile-wrap .text-input { padding-left: 82px; }
.whatsapp-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-600);
}
.whatsapp-note .wa {
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--teal-500);
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
  margin-right: 5px;
  vertical-align: -2px;
}

.consent {
  display: block;
  background: #FAFAFC;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-top: 4px;
}
.consent + .consent { margin-top: 8px; }
.consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.consent label {
  display: block;
  position: relative;
  padding-left: 30px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
  font-weight: 600;
  cursor: pointer;
}
.consent label:before {
  content: "";
  position: absolute;
  top: 1px; left: 0;
  width: 20px; height: 20px;
  border: 2px solid var(--line-strong);
  background: #fff;
  border-radius: 6px;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.consent label:after {
  content: "";
  position: absolute;
  top: 6px; left: 5px;
  width: 11px; height: 6px;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  -webkit-transform: rotate(-45deg) scale(0);
          transform: rotate(-45deg) scale(0);
  transition: transform 160ms ease;
}
.consent input:checked + label:before {
  border-color: var(--magenta-600);
  background: var(--magenta-600);
}
.consent input:checked + label:after {
  -webkit-transform: rotate(-45deg) scale(1);
          transform: rotate(-45deg) scale(1);
}
.consent label a { color: var(--magenta-600); font-weight: 800; text-decoration: none; }
.consent label a:hover { text-decoration: underline; }

/* The terms summary, on the page above the consent box. Capped in height with its own
   scroll so a longer policy cannot push the checkbox and the submit button off screen --
   the member must still be able to reach what they are agreeing with. */
.terms-panel { margin: 0 0 14px 0; }
.terms-panel-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
/* The longer text is coming, so the box scrolls. The gradient is a scroll cue, not
   decoration: without it the text simply stops mid-sentence at the fold and reads as
   truncated, and a member agreeing to terms should be able to tell there is more. It is
   painted by the background, fixed to the bottom edge while the content scrolls under it. */
.terms-panel-body {
  max-height: 132px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
  background:
    linear-gradient(#F7F8FB 30%, rgba(247, 248, 251, 0)) local top,
    linear-gradient(rgba(247, 248, 251, 0), #F7F8FB 70%) local bottom,
    linear-gradient(rgba(26, 42, 68, 0), rgba(26, 42, 68, .14)) scroll bottom;
  background-repeat: no-repeat;
  background-size: 100% 24px, 100% 24px, 100% 14px;
  background-color: #F7F8FB;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.terms-panel-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.terms-panel-body p + p { margin-top: 10px; }

/* The wordmark inside the submit button, sized to the label beside it. */
.btn-logo {
  height: 20px;
  width: auto;
  vertical-align: middle;
  margin: 0 2px 0 6px;
}

/* A real button that reads as a link: it opens a dialog, so an anchor would be lying
   about where it goes, and a button is what keyboards and screen readers expect. */
.link-button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--magenta-600);
  font-weight: 800;
  text-decoration: none;
}
.link-button:hover { text-decoration: underline; }

.field.has-error .text-input,
.field.has-error .mobile-wrap .prefix { border-right-color: var(--error); }
.error-msg {
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--error);
}
.field.has-error .error-msg,
.q.has-error .error-msg { display: block; }
.error-msg:before {
  content: "!";
  display: inline-block;
  width: 14px; height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  background: var(--error);
  color: #fff;
  font-weight: 900;
  font-size: 10px;
  margin-right: 5px;
  vertical-align: 1px;
}

.welcome {
  display: block;
  padding: 18px 20px;
  margin: 0 24px 8px 24px;
  background: linear-gradient(135deg, #FBE8F4 0%, #EDF8F5 100%);
  border-radius: var(--radius-md);
  border: 1px solid rgba(185, 28, 146, 0.12);
  position: relative;
  overflow: hidden;
}
.welcome:before {
  content: "";
  position: absolute;
  top: -30px; right: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(185,28,146,0.12), transparent 70%);
}
.welcome .avatar {
  display: inline-block;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 40px;
  text-align: center;
  margin-right: 10px;
  vertical-align: middle;
  letter-spacing: 0.3px;
}
.welcome .text {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 58px);
}
.welcome .hi {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--magenta-600);
  margin-bottom: 2px;
}
.welcome .who {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--navy-800);
  line-height: 1.2;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.questions { padding: 4px 24px 0 24px; }
.q { padding: 20px 0 20px 0; border-bottom: 1px dashed var(--line); }
.q:last-child { border-bottom: none; }
.q .num-row { display: block; margin-bottom: 10px; }
.q .num {
  display: inline-block;
  min-width: 26px;
  height: 26px;
  line-height: 26px;
  padding: 0 8px;
  background: var(--navy-800);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}
.q .num .slash { opacity: 0.5; margin: 0 2px; }
.q label.q-label {
  display: block;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--navy-800);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}
.q .required { color: var(--magenta-600); margin-left: 2px; }
.q .hint {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  margin: -2px 0 12px 0;
}

.options { display: block; margin: 0; padding: 0; list-style: none; }
.options li { display: block; margin: 0 0 10px 0; }
.options .opt {
  display: block;
  position: relative;
  cursor: pointer;
  border: 1.5px solid var(--line-strong);
  background: #fff;
  padding: 13px 16px 13px 46px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy-800);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.options .opt:hover { border-color: var(--magenta-500); background: #FFFCFE; }
.options input[type="radio"],
.options input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.options .opt:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  margin-top: -10px;
  width: 20px; height: 20px;
  border: 2px solid var(--line-strong);
  background: #fff;
  border-radius: 50%;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.options.multi .opt:before { border-radius: 6px; }
.options .opt:after {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -4px;
  width: 8px; height: 8px;
  background: transparent;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  transition: background-color 160ms ease, transform 160ms ease;
}
.options.multi .opt:after {
  left: 18px;
  top: 50%;
  margin-top: -6px;
  width: 12px; height: 7px;
  background: transparent;
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
  -webkit-transform: rotate(-45deg) scale(0);
          transform: rotate(-45deg) scale(0);
  border-radius: 0;
}
.options input:checked + .opt {
  border-color: var(--magenta-600);
  background: var(--magenta-100);
  box-shadow: 0 0 0 3px rgba(185, 28, 146, 0.10);
}
.options input:checked + .opt:before {
  border-color: var(--magenta-600);
  background: var(--magenta-600);
}
.options input:checked + .opt:after {
  background: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.options.multi input:checked + .opt:after {
  background: transparent;
  -webkit-transform: rotate(-45deg) scale(1);
          transform: rotate(-45deg) scale(1);
}
.options input:focus + .opt {
  outline: none;
  box-shadow: 0 0 0 3px rgba(185, 28, 146, 0.22);
}

.card-footer {
  padding: 18px 24px 22px 24px;
  background: #FAFAFC;
  border-top: 1px solid var(--line);
}
.btn {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  border: none;
  border-radius: var(--radius-md);
  padding: 15px 18px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 160ms ease, background-color 160ms ease;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: center;
}
.btn-primary {
  background: var(--magenta-600);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(185, 28, 146, 0.55);
}
.btn-primary:hover { background: var(--magenta-700); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  background: #C9D0DE;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}
.btn .arrow { display: inline-block; margin-left: 6px; transition: transform 160ms ease; }
.btn-primary:not(:disabled):hover .arrow { -webkit-transform: translateX(3px); transform: translateX(3px); }
.btn-secondary {
  background: #fff;
  color: var(--navy-800);
  border: 1.5px solid var(--line-strong);
}
.btn-secondary:hover { border-color: var(--magenta-600); color: var(--magenta-600); }

.footnote {
  margin: 12px 0 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}
.footnote a { color: var(--magenta-600); text-decoration: none; font-weight: 700; }
.footnote a:hover { text-decoration: underline; }

.brand-footer {
  margin-top: 18px;
  text-align: center;
  color: #C9D0DE;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.brand-footer .gothrive {
  display: inline-block;
  height: 22px;
  width: 22px;
  vertical-align: middle;
  margin: 0 0 0 4px;
  border-radius: 50%;
  object-fit: cover;
}

.thanks { text-align: center; padding: 38px 28px 28px 28px; }
.thanks .mark {
  display: inline-block;
  width: 88px; height: 88px;
  border-radius: 50%;
  background: linear-gradient(145deg, #FBE8F4 0%, #F7D8EC 100%);
  position: relative;
  margin-bottom: 16px;
  -webkit-animation: pop 520ms cubic-bezier(.18,.89,.32,1.28) both;
          animation: pop 520ms cubic-bezier(.18,.89,.32,1.28) both;
}
/* The GoClub logo is wider than it is tall, so the disc constrains it by width and lets
   the height follow. */
.thanks .mark img {
  width: 68px;
  height: auto;
  max-height: 68px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
.thanks h2 {
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 8px 0;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.thanks p.lead {
  margin: 0 auto 20px auto;
  max-width: 360px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.55;
}
@-webkit-keyframes pop { 0% { -webkit-transform: scale(.4); opacity: 0; } 100% { -webkit-transform: scale(1); opacity: 1; } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 380px) {
  .shell { padding: 20px 14px 32px 14px; }
  .card-header { padding: 22px 18px 14px 18px; }
  .form-body, .questions { padding-left: 18px; padding-right: 18px; }
  .welcome { margin-left: 18px; margin-right: 18px; }
  .card-footer { padding: 16px 18px 20px 18px; }
  h1.title { font-size: 22px; }
}
@media (min-width: 720px) {
  .shell { padding-top: 44px; padding-bottom: 56px; }
  /* Scales up from the phone size, never down -- keep this above the base height. */
  .topbar .logo { height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    -webkit-animation-duration: 0.001ms !important;
            animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* POPIA perks modal */
.modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: none;
  -webkit-tap-highlight-color: transparent;
}
body.modal-open { overflow: hidden; }
.modal.open { display: block; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 30, 51, 0.72);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  animation: modalFade 220ms ease forwards;
}
.modal-sheet {
  position: absolute;
  left: 50%; top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: calc(100% - 24px);
  max-width: 380px;
  max-height: calc(100vh - 32px);
  /* dvh tracks the mobile browser's collapsing toolbar; vh does not, so on iOS Safari a
     vh-sized sheet is taller than the visible area and its footer button sits under the
     chrome. Declared after the vh line so browsers without dvh keep the old value. */
  max-height: calc(100dvh - 32px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px rgba(10, 15, 30, 0.55), 0 8px 20px -6px rgba(10, 15, 30, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: modalPop 320ms cubic-bezier(.2,.9,.3,1.1) both;
}

/* A long document rather than a short prompt: take the height that is going, so the
   member scrolls the body instead of a sheet that is mostly empty space. */
.modal-sheet-tall {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  max-width: 520px;
}
@keyframes modalFade { to { opacity: 1; } }
@keyframes modalPop {
  from { opacity: 0; -webkit-transform: translate(-50%, -46%) scale(.94); transform: translate(-50%, -46%) scale(.94); }
  to   { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
}
.modal-body { padding: 18px 24px 8px 24px; overflow-y: auto; }

/* The title bar of a long document. It stays out of the scrolling body so the member can
   always see what they are reading and always reach the way out -- on a phone the footer
   button is several screens away. */
.modal-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px 14px 24px;
  border-bottom: 1px solid var(--line);
}
/* h2 since the Terms title moved to the CMS (a dialog's own heading); h3 kept for any other sheet. */
.modal-head h2,
.modal-head h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--navy-900, #1A2A44);
}
/* 40px square: a thumb target that meets the 44px-ish guidance once its padding is
   counted, without crowding the title on a narrow screen. */
.modal-x {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 26px;
  line-height: 1;
  width: 40px;
  height: 40px;
  margin: -8px -4px 0 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modal-x:hover { background: rgba(26, 42, 68, 0.06); color: var(--navy-800); }
.modal-x:focus-visible { outline: 2px solid var(--magenta-600); outline-offset: 2px; }

.terms-body {
  padding-top: 18px;
  /* The footer is opaque and sits above the home-bar inset, so the body only needs
     enough tail padding that the last line is not flush against it. */
  padding-bottom: 18px;
  -webkit-overflow-scrolling: touch;
  /* Keep a flick inside the document instead of chaining to the page behind it. */
  overscroll-behavior: contain;
}
/* The Terms body is CMS rich text: its headings are h3 (the editor's only heading) and its
   bold is strong. The h4 and b rules stay for any hand-written sheet. */
.terms-body h3,
.terms-body h4 {
  margin: 22px 0 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--navy-900, #1A2A44);
}
.terms-body h3:first-child,
.terms-body h4:first-child { margin-top: 0; }
.terms-body p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4A5350;
}
.terms-body p:last-child { margin-bottom: 0; }
.terms-body ul,
.terms-body ol {
  margin: 0 0 12px;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4A5350;
}
.terms-body li { margin-bottom: 6px; }
.terms-body li:last-child { margin-bottom: 0; }
.terms-body b,
.terms-body strong { color: var(--navy-800, #1A2A44); font-weight: 800; }
/* Long addresses and the regulator URL must not push the sheet sideways. */
.terms-body a {
  color: var(--magenta-600);
  font-weight: 700;
  overflow-wrap: break-word;
}
/* The sanitiser drops classes, so in CMS text the callout is "a paragraph that opens in
   bold" (the default's "Note:" paragraph). :has() is progressive: an older browser shows a
   plain paragraph, which is what the text is anyway. */
.terms-body p:has(> strong:first-child),
.terms-note {
  padding: 12px 14px;
  background: #F7F8FB;
  border-left: 3px solid var(--magenta-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.modal-foot {
  flex-shrink: 0;
  padding: 14px 20px 18px 20px;
  /* The iOS home bar sits over the bottom of the sheet; without the inset the primary
     button is under it. max() keeps the normal padding where there is no inset. */
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  background: #FAFAFC;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-foot .btn { width: 100%; }

/* Full-screen loading overlay (first load of each page) */
.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(212, 42, 165, 0.38), rgba(212, 42, 165, 0) 60%),
    radial-gradient(700px 320px at 10% 110%, rgba(45, 212, 191, 0.26), rgba(45, 212, 191, 0) 65%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  transition: opacity 380ms ease;
  -webkit-tap-highlight-color: transparent;
}
.loader-inner { text-align: center; padding: 0 24px; max-width: 340px; }
.loader-logo {
  display: block;
  margin: 0 auto 20px auto;
  height: 96px;
  width: auto;
  /* Same reason as .topbar .logo: a full-colour mark on the dark gradient needs a ground. */
  background: #FFFFFF;
  border-radius: 18px;
  padding: 12px 20px;
  box-shadow: 0 4px 16px rgba(12, 16, 28, .22);
  -webkit-animation: loaderPulse 1.8s ease-in-out infinite;
          animation: loaderPulse 1.8s ease-in-out infinite;
}
.loader-title { font-size: 16px; font-weight: 800; letter-spacing: 0.5px; margin: 0 0 6px 0; color: #fff; }
.loader-sub {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 22px;
  min-height: 20px;
  transition: opacity 240ms ease;
}
.loader-track {
  position: relative;
  display: block;
  width: 200px;
  height: 4px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.loader-bar {
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 40%;
  background: linear-gradient(90deg, var(--teal-500), var(--magenta-500));
  border-radius: 999px;
  -webkit-animation: loaderSlide 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
          animation: loaderSlide 1.4s cubic-bezier(.4, 0, .2, 1) infinite;
}
@-webkit-keyframes loaderPulse { 0%, 100% { -webkit-transform: scale(1); opacity: 1; } 50% { -webkit-transform: scale(1.04); opacity: 0.88; } }
@keyframes loaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.88; } }
@-webkit-keyframes loaderSlide { 0% { left: -40%; } 100% { left: 100%; } }
@keyframes loaderSlide { 0% { left: -40%; } 100% { left: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .loader-logo, .loader-bar { -webkit-animation: none !important; animation: none !important; }
}

/* Confirmation screen: where to go next. Rendered by _Partners.cshtml. */
.next-up {
  display: block;
  background: #FAFAFC;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 0;
  text-align: left;
}
.next-up .nu-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
  text-align: center;
}
.next-up .nu-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
}
.next-up .nu-link {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 16px 12px;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.next-up .nu-link:hover {
  border-color: var(--magenta-600);
  box-shadow: 0 8px 18px -10px rgba(185, 28, 146, 0.55);
}
.next-up .nu-link:active { transform: translateY(1px); }
.next-up .nu-link img {
  display: block;
  max-width: 100%;
  height: 30px;
  width: auto;
  object-fit: contain;
}
/* Shown only when the logo file fails to load, so the link is never nameless. */
.next-up .nu-fallback {
  display: none;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-800);
}
.next-up .nu-host {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.next-up .nu-link:hover .nu-host { color: var(--magenta-600); }

/* Server-rendered messages above a form (Backend refusals, expired attempts). */
.banner {
  margin: 16px 26px 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}
.banner.bad { background: #FEF2F2; color: var(--error); }

/* Option descriptions under a label, when a question supplies them. */
.options .opt small.opt-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Multiple small forms stacked as text links in the verify step. */
.verify-actions form { margin: 0; }

/* Interstitial after the router's redirect: the loader screen, with the form that
   creates the session (visible only as a button when JavaScript is off). */
.begin-form { margin: 22px 0 0; }
.begin-form .btn { max-width: 260px; margin: 0 auto; }

/* Development-only affordances are visibly out of place on purpose. */
.dev-tools button {
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  border: 1px dashed var(--line-strong) !important;
  border-radius: 999px;
  padding: 5px 12px !important;
}
.dev-preset { border-top: 1px dashed var(--line); }
.dev-preset:first-of-type { border-top: 0; }
.dev-preset-title { margin: 0 0 4px; font-size: 16px; color: var(--navy-800); }
.dev-preset .hint { display: block; margin: 0 0 14px; font-size: 13px; color: var(--ink-muted); }
.dev-preset .field { margin-bottom: 12px; }
.dev-preset .btn { margin-top: 6px; }

.thanks .next-up { margin-bottom: 16px; }

/* CMS rich text (Inline and Html keys): the allow-list is p, br, strong, em, ul, ol, li,
   h3 and links. Neutral by design -- each place sets its own type -- so this only stops
   the first and last blocks adding space the hand-written markup never had. */
.cms > :first-child { margin-top: 0; }
.cms > :last-child { margin-bottom: 0; }
.cms a { color: var(--magenta-600); font-weight: 700; overflow-wrap: break-word; }
.cms h3 { margin: 16px 0 6px; font-size: 14.5px; font-weight: 800; color: var(--navy-800); }
.cms ul,
.cms ol { margin: 0 0 10px; padding-left: 20px; }

/* A partner with a blurb: the tile and its text side by side with the other tiles. The
   blurb sits outside the link because it may hold links of its own. */
.next-up .nu-item {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}
.next-up .nu-item .nu-link { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.next-up .nu-blurb {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-muted);
  text-align: center;
}
.next-up .nu-blurb p { margin: 0 0 6px; }