/* Uncommon Academy brand on uncommonwaters.ai (PT, 8 Nov 2026). The Academy is its own brand now: the UA monogram,
   black and white, Inter, white buttons, orange only as a small accent. Scoped to `.ua` (the homepage Academy card)
   and `.ua-page` (the /academy page) so the Uncommon Waters look around it is untouched.
   Same values as the learner app's components/ui/ua-theme.css. */

.ua, .ua-page {
  --ua-ground: #131313;
  --ua-panel: #1a1a1a;
  --ua-panel-2: #222222;
  --ua-hair: rgba(255, 255, 255, 0.08);
  --ua-hair-2: rgba(255, 255, 255, 0.14);
  --ua-text: #f2f2f2;
  --ua-text-2: #b4b4b4;
  --ua-text-3: #8a8a8a;
  --ua-signal: #e8561a;
  --ua-green: #3fa266;
  --ua-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--ua-font);
  font-optical-sizing: auto;
}

/* The lockup is drawn as a mask over the text colour, so it is always crisp and on palette. */
.ua-lockup {
  display: block;
  background: var(--ua-text);
  -webkit-mask: url('/brand/ua-lockup-wide.svg') left center / contain no-repeat;
  mask: url('/brand/ua-lockup-wide.svg') left center / contain no-repeat;
}
.ua-lockup--wide { width: 232px; aspect-ratio: 234.782 / 43.494; }
.ua-lockup--primary {
  width: 168px;
  aspect-ratio: 766.88 / 224.993;
  -webkit-mask-image: url('/brand/ua-lockup-primary.svg');
  mask-image: url('/brand/ua-lockup-primary.svg');
}
.ua-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- The Academy card on the homepage ---------- */
.st-card.ua {
  background: rgba(19, 19, 19, 0.94);
  border: 1px solid var(--ua-hair-2);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: var(--ua-text);
}
.ua .ua-title { margin: 0 0 14px; }
.ua .st-acad-s { font: 600 17px/1.4 var(--ua-font); color: var(--ua-text); margin-top: 0; letter-spacing: -0.005em; }
.ua .st-acad-p { font: 400 14px/1.55 var(--ua-font); color: var(--ua-text-2); }
.ua .st-acad-p b { font-weight: 600; color: var(--ua-text); }
.ua .uw-facts-h {
  font: 600 12px/1.4 var(--ua-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ua-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ua .uw-facts-h::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--ua-signal); flex: none; }
.ua .uw-facts li { font: 400 14px/1.5 var(--ua-font); color: var(--ua-text-2); }
.ua .uw-facts li::before { font: 600 12px/1.6 var(--ua-font); color: var(--ua-text-3); }
.ua .uw-facts b { font-weight: 600; color: var(--ua-text); }
.ua .uw-details {
  font: 600 13px/1 var(--ua-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ua-text);
  border: 1px solid var(--ua-hair-2);
  border-radius: 10px;
  background: var(--ua-panel-2);
  padding: 14px 16px;
}
.ua .uw-details:hover { background: #2a2a2a; border-color: rgba(255, 255, 255, 0.24); }
.ua .uw-price { border: 1px solid var(--ua-hair-2); border-radius: 12px; background: var(--ua-panel); }
.ua .uw-plan-n { font: 600 18px/1.2 var(--ua-font); color: var(--ua-text); }
.ua .uw-pill {
  font: 600 11px/1 var(--ua-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ua-text-2);
  border: 1px solid var(--ua-hair-2);
  padding: 4px 9px;
}
.ua .uw-plan-p { font: 600 24px/1 var(--ua-font); color: var(--ua-text); }
.ua .uw-sub { background: var(--ua-panel-2); border-top: 1px solid var(--ua-hair); }
.ua .uw-sub-n { font: 500 13.5px var(--ua-font); color: var(--ua-text-2); }
.ua .uw-sub-t { font: 600 11px/1 var(--ua-font); letter-spacing: 0; text-transform: none; color: var(--ua-green);
  border: 1px solid rgba(63, 162, 102, 0.45); border-radius: 999px; padding: 3px 8px; }
.ua .uw-sub-p { font: 600 16px/1 var(--ua-font); color: var(--ua-text); }
.ua .uw-fund { font: 400 13px/1.55 var(--ua-font); color: var(--ua-text-3); }
.ua .uw-rule { border-color: var(--ua-hair); background: var(--ua-hair); }
.ua .st-card-h { font: 600 18px/1.35 var(--ua-font); color: var(--ua-text); letter-spacing: -0.005em; }
.ua .st-card-s { font: 400 13px/1.55 var(--ua-font); color: var(--ua-text-3); }
/* Registration runs on the Academy site, so the card links there instead of carrying a form. */
.ua .ua-cta { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.ua .ua-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  font: 600 15px/1 var(--ua-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ua-ground);
  background: var(--ua-text);
  border: 0;
  border-radius: 10px;
  padding: 16px;
}
.ua .ua-cta .btn:hover { background: #ffffff; }
.ua .st-form label, .ua .st-scale legend {
  font: 500 12.5px/1.3 var(--ua-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ua-text-2);
}
.ua .st-form input[type='text'], .ua .st-form input[type='email'], .ua .st-form input[type='tel'] {
  font: 400 15px/1.4 var(--ua-font);
  color: var(--ua-text);
  background: #101010;
  border: 1px solid var(--ua-hair-2);
  border-radius: 10px;
}
.ua .st-form input:hover { border-color: rgba(255, 255, 255, 0.24); }
.ua .st-form input:focus { border-color: var(--ua-text); box-shadow: 0 0 0 3px rgba(232, 86, 26, 0.28); }
.ua .st-form .btn {
  font: 600 15px/1 var(--ua-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ua-ground);
  background: var(--ua-text);
  border: 0;
  border-radius: 10px;
  padding: 16px;
}
.ua .st-form .btn:hover { background: #ffffff; }
.ua .st-form .btn:focus-visible, .ua a:focus-visible, .ua input:focus-visible + label { outline: 2px solid var(--ua-signal); outline-offset: 2px; }
.ua .st-ends, .ua .st-pick { font-family: var(--ua-font); letter-spacing: 0; text-transform: none; color: var(--ua-text-3); }
.ua .st-steps label i { border-color: var(--ua-hair-2); }
.ua .st-steps input:checked + label i { background: var(--ua-text); border-color: var(--ua-text); }
.ua .st-steps label span { font-family: var(--ua-font); color: var(--ua-text-2); }
.ua .st-affirm { font: 400 13px/1.5 var(--ua-font); text-transform: none; letter-spacing: 0; color: var(--ua-text-2); }
.ua a { color: var(--ua-text); }
.ua .st-ok { font: 500 15px/1.5 var(--ua-font); color: var(--ua-green); }
.ua .st-err { font: 400 13px/1.5 var(--ua-font); }
.st-card.ua .st-pick { font: 400 13.5px/1.5 var(--ua-font); font-style: normal; letter-spacing: 0; color: var(--ua-text-3); border-color: var(--ua-hair-2); }

/* ---------- The Academy questions under the card ---------- */
.st-faq.ua h2 { font: 600 clamp(26px, 3vw, 34px)/1.15 var(--ua-font); letter-spacing: -0.015em; color: var(--ua-text); }
.st-faq.ua summary { font: 500 15px/1.45 var(--ua-font); color: var(--ua-text); letter-spacing: 0; text-transform: none; }
.st-faq.ua details { border-color: var(--ua-hair-2); }
.st-faq.ua details p { font: 400 14px/1.6 var(--ua-font); color: var(--ua-text-2); }
.st-faq.ua a { color: var(--ua-text); }

/* The fluency scale and the veteran affirmation, on palette (no Uncommon Waters steel blue inside the card). */
.st-card.ua .st-steps label { border-color: var(--ua-hair-2); }
.st-card.ua .st-steps label.is-hot, .st-card.ua .st-steps label:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); }
.st-card.ua .st-steps label.is-hot i { border-color: var(--ua-text-2); }
.st-card.ua .st-steps input:checked + label { border-color: var(--ua-text); background: rgba(255, 255, 255, 0.06); }
.st-card.ua .st-steps input:checked + label i { background: var(--ua-text); border-color: var(--ua-text); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1); }
.st-card.ua .st-steps input:focus-visible + label { outline: 2px solid var(--ua-signal); outline-offset: 2px; }
.st-card.ua .st-pick.is-preview { color: var(--ua-text-2); border-color: var(--ua-hair-2); }
.st-card.ua .st-pick.is-set { color: var(--ua-text); border-color: var(--ua-text-3); }
.st-card.ua .st-vet { font: 400 13px/1.5 var(--ua-font); color: var(--ua-green); }
.st-card.ua .st-affirm input, .st-card.ua .st-scale input[type='radio'] { accent-color: var(--ua-text); }