/* ==========================================================
   Business English Mastered — brand tokens
   Source: BEM_brand_specsnew.md — exact hex codes, no approximations
   ========================================================== */
:root {
  --deep-blue-teal: #2E6B8A;   /* dominant */
  --sky-blue:        #7DC4E0;  /* secondary / accents */
  --warm-peach:      #F2A98A;  /* accent CTA */
  --powder-blue:     #E8F4F8;  /* light backgrounds */
  --charcoal:        #3A3A3A;  /* body text on light */
  --white:           #FFFFFF;

  --font-hook: 'Cormorant Garamond', serif;
  --font-title: 'Montserrat', sans-serif;
  --font-script: 'Dancing Script', cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* White, not powder-blue: the real logo badge has its own white
     ring baked into the artwork, so the page canvas needs to match
     it rather than the light-blue tone used elsewhere in the brand
     kit. White is still a valid brand background per the spec, it's
     just a different one of the approved options. Everything below
     that used to rely on white-on-powder-blue for contrast has been
     flipped to powder-blue-on-white, or shadow-based depth, instead. */
  background: var(--white);
  color: var(--charcoal);
  font-family: var(--font-title);
  line-height: 1.5;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  min-height: 100vh;
}

/* Real header: logo + wordmark, not a small IG-handle-style tag.
   "Confident with English" reads as a page header (Montserrat,
   proper weight and size), the Dancing Script treatment from the
   Canva carousel spec was designed for a small corner mark on a
   social slide, not a page header, so it isn't reused here. */
.site-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.site-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  /* No border-radius clip here on purpose: the real logo is already
     a self-contained circular badge with its own ring drawn into the
     artwork. Clipping it again with CSS risks cutting that ring off
     unevenly depending on the source file's exact padding. */
}
.site-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
  color: var(--deep-blue-teal);
}

.coach-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.coach-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.coach-line {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  margin: 0;
}

/* ---------- screens ---------- */
.screen { display: none; }
.screen.active { display: block; animation: fade-in 0.3s ease; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.eyebrow {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky-blue);
  margin: 0 0 12px;
}

h1 {
  font-family: var(--font-hook);
  font-weight: 600;
  font-size: 42px;
  line-height: 1.15;
  color: var(--deep-blue-teal);
  margin: 0 0 20px;
}

h2 {
  font-family: var(--font-hook);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.25;
  color: var(--deep-blue-teal);
  margin: 0 0 20px;
}

.lede {
  font-size: 17px;
  color: var(--charcoal);
  margin: 0 0 20px;
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--deep-blue-teal);
  color: var(--white);
}
.btn-primary:hover { box-shadow: 0 4px 14px rgba(46, 107, 138, 0.35); }

/* MailerLite's own submit button, inspected live: it renders with
   class "primary" and much flatter defaults than the rest of this
   app, 4px corners instead of 8px, no hover shadow, tight 10px
   padding instead of 14px/28px. Same brand blue, but everything
   else about it reads as a generic form button dropped onto a more
   considered page. Overriding it to match .btn-primary exactly
   rather than leaving two different button languages on one screen. */
.ml-embedded button.primary {
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  transition: transform 0.1s ease, box-shadow 0.15s ease !important;
}
.ml-embedded button.primary:hover {
  box-shadow: 0 4px 14px rgba(46, 107, 138, 0.35);
}
.ml-embedded button.primary:active {
  transform: scale(0.98);
}

/* ---------- progress ---------- */
.progress-track {
  height: 4px;
  background: var(--powder-blue);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--sky-blue);
  transition: width 0.3s ease;
}

.q-counter {
  font-size: 13px;
  color: var(--sky-blue);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* ---------- question options ----------
   Outlined in brand teal rather than filled solid: filling all 4
   answer choices the same way as the primary CTA button would make
   every question read as four identical bold blocks and blur the
   distinction between "pick one of four" and "the one primary
   action." White background, teal border, teal text at rest, and
   the fill only appears on hover, so the brand color is doing real
   work without competing with the actual primary buttons. */
.options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.option-btn {
  text-align: left;
  background: var(--white);
  border: 2px solid var(--deep-blue-teal);
  border-radius: 10px;
  padding: 16px 18px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 15px;
  color: var(--deep-blue-teal);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.option-btn:hover {
  background: var(--deep-blue-teal);
  color: var(--white);
  transform: translateY(-1px);
}
.option-btn:active {
  transform: translateY(0) scale(0.99);
}

/* ---------- result ---------- */
.cta-box {
  background: var(--powder-blue);
  border-left: 4px solid var(--warm-peach);
  border-radius: 6px;
  padding: 18px 20px;
  margin-top: 24px;
}
.cta-box p { margin: 0; font-size: 15px; color: var(--charcoal); }

#result-name {
  color: var(--deep-blue-teal);
}

@media (max-width: 480px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
}

/* Hide the freeze_point_result field MailerLite renders on the
   gate-screen form. This field exists only to carry the computed
   quiz result into MailerLite as a subscriber value (populated by
   script.js the moment the quiz finishes, see populateHiddenResultField()).
   It was never meant to be seen or edited by the visitor. MailerLite's
   drag & drop form builder has no true "hidden field" input type, so
   this is added as a normal visible field and hidden here instead.
   Class confirmed by inspecting the live rendered form, per the
   original build note in script.js. */
.ml-field-freeze_point_result {
  display: none !important;
}