/* Season Review styles. Values are taken exactly from the Claude Design export (design-tokens.md):
   px sizes, opaque surfaces, no width breakpoints (hero H1 uses clamp only). */

/* Fonts, self-hosted from the design export. Inter is one variable file per subset (400 to 600),
   Space Grotesk the embedded latin subset (500 to 700). The design's two CDN subsets for Space Grotesk
   (latin-ext, vietnamese) are not loaded, so those glyphs fall back to sans-serif. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-greek-ext.woff2') format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/inter-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: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/fonts/space-grotesk-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; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: #0A0E14;
  color: #E6E8EC;
  min-height: 100vh;
}
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #FFFFFF; }
a { color: #00FFD1; }
a:hover { color: #7BFFE6; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 660px; margin: 48px auto 0; padding: 0 16px; }
.site-head { padding: 24px 16px 0; text-align: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #00FFD1; }
.site-foot { margin-top: 72px; padding: 0 16px 40px; text-align: center; font-size: 14px; color: #6F7886; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 8px;
  font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700;
  cursor: pointer; text-decoration: none; text-align: center;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  max-width: 100%;
}
.btn-primary, .btn-primary:hover { background: #00FFD1; color: #0A0E14; }
.btn-secondary { background: transparent; color: #00FFD1; border: 2px solid #00FFD1; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-block { display: flex; width: 100%; }

/* Landing: photo hero */
.hero { position: relative; width: 100%; min-height: 600px; display: flex; flex-direction: column; overflow: hidden; background: #0A0E14; }
.hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero-shade { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.hero-shade-x { background: linear-gradient(90deg, rgba(10,14,20,0.94) 0%, rgba(10,14,20,0.78) 42%, rgba(10,14,20,0.4) 100%); }
.hero-shade-y { background: linear-gradient(180deg, rgba(10,14,20,0.6) 0%, rgba(10,14,20,0) 28%, rgba(10,14,20,0) 62%, #0A0E14 100%); }
.hero-brand { position: relative; padding: 24px 16px 0; text-align: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #00FFD1; }
.hero-inner { position: relative; flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 64px 24px 88px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.hero h1 { max-width: 700px; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02; letter-spacing: -0.01em; color: #00FFD1; }
.hero-sub { max-width: 520px; font-size: 20px; line-height: 1.5; color: #FFFFFF; }
.hero .btn { align-self: flex-start; margin-top: 8px; }
/* Keep the copy off the driver's eyes in the mirror (57-70% across, top third of hero.jpg). */
@media (min-width: 900px) {
  .hero-img { object-position: right center; }
  .hero-shade-x { background: linear-gradient(90deg, rgba(10,14,20,0.94) 0%, rgba(10,14,20,0.82) 34%, rgba(10,14,20,0.25) 58%, rgba(10,14,20,0.1) 100%); }
  .hero h1 { max-width: 46%; font-size: clamp(34px, 4vw, 56px); }
  .hero-sub { max-width: 40%; }
}
@media (max-width: 899px) {
  .hero { min-height: 0; }
  .hero-img { position: relative; height: 56vw; max-height: 420px; object-position: 64% 30%; order: 1; }
  .hero-shade-x { display: none; }
  .hero-shade-y { top: 0; bottom: auto; height: 56vw; max-height: 420px; background: linear-gradient(180deg, rgba(10,14,20,0.6) 0%, rgba(10,14,20,0) 22%, rgba(10,14,20,0) 55%, #0A0E14 100%); }
  .hero-brand { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }
  .hero-inner { order: 2; padding: 8px 16px 48px; }
}

/* Landing: content column */
.landing { width: 100%; max-width: 692px; margin: 24px auto 0; padding: 0 16px; display: flex; flex-direction: column; align-items: center; }
.logos-band { width: 100%; margin-top: 40px; padding: 18px 0 22px; border-top: 1px solid #1C222C; border-bottom: 1px solid #1C222C; text-align: center; }
.logos-label { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #8A93A3; }
.logos-row { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; }
.logos-row img { height: 32px; width: auto; max-width: 130px; object-fit: contain; opacity: 0.95; }
.logos-row img.logo-card { background: rgba(255, 255, 255, 0.92); padding: 4px 8px; border-radius: 6px; box-sizing: content-box; }
.body-copy { width: 100%; margin-top: 36px; display: flex; flex-direction: column; gap: 18px; font-size: 17px; line-height: 1.65; color: #E6E8EC; }
.get-box { width: 100%; margin-top: 36px; padding: 24px 20px 28px; background: #141820; border: 1px solid #232934; border-radius: 12px; display: flex; flex-direction: column; gap: 16px; }
.get-box h2 { font-size: 21px; }
.get-box p { font-size: 16px; line-height: 1.65; color: #D6DAE0; }
.get-box strong { color: #FFFFFF; }
.landing > .btn { margin-top: 32px; }

/* Lead gate */
.gate { width: 100%; margin-top: 32px; padding: 24px 20px; background: #141820; border: 1px solid #0F5B4E; border-radius: 12px; }
#gate-form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field label { font-size: 14px; color: #A7AFBB; }
.field input[type="text"], .field input[type="email"] {
  width: 100%; height: 50px; padding: 0 14px;
  background: #1F242D; border: 1px solid #2C333E; border-radius: 8px;
  color: #FFFFFF; font: inherit; font-size: 16px;
}
.field input:focus { outline: none; border-color: #00FFD1; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: #D6DAE0; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #00FFD1; flex: none; }
.error { color: #FF6B6B; font-size: 14px; }
.error:empty { display: none; }
#gate-submit { margin-top: 14px; }
#gate-submit.is-incomplete { opacity: 0.45; }

/* Questionnaire header: static, not fixed */
.progress-wrap { border-bottom: 1px solid #161B23; padding: 24px 16px 12px; }
.progress-wrap.is-analysing { padding-top: 16px; }
.progress-wrap.is-analysing .back-row { display: none; }
.progress-inner { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.back-row { min-height: 22px; display: flex; }
.back-btn { align-self: flex-start; padding: 0; background: none; border: 0; font: inherit; font-size: 15px; color: #A7AFBB; cursor: pointer; touch-action: manipulation; }
.progress-top { display: flex; justify-content: space-between; align-items: center; }
.progress-label { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #00FFD1; }
.progress-bar { height: 4px; border-radius: 2px; background: #1C222C; overflow: hidden; }
.progress-fill { width: 0; height: 4px; border-radius: 2px; background: #00E0B8; }

/* Questionnaire steps */
.q-container { max-width: 660px; margin: 0 auto; padding: 12px 16px 48px; }
.q-step { display: flex; flex-direction: column; gap: 14px; }
.q-category { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #00FFD1; }
.q-text { font-size: 26px; line-height: 1.25; }
.q-hint { font-size: 14px; color: #8A93A3; }
.text-input {
  margin-top: 10px; width: 100%; min-height: 140px; padding: 14px;
  background: #181D26; border: 1px solid #2C333E; border-radius: 10px;
  color: #FFFFFF; font: inherit; font-size: 16px; resize: vertical;
}
.text-input:focus { outline: none; border-color: #00FFD1; box-shadow: 0 0 0 3px rgba(0,255,209,0.15); }
.q-step > .btn { margin-top: 10px; align-self: flex-start; }
.options { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 0 18px;
  background: #141820; border: 1px solid #232934; border-radius: 10px;
  color: #E6E8EC; font: inherit; font-size: 16px; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.option:hover, .option.selected { border-color: #00FFD1; background: #17201F; }
.option-dot { width: 18px; height: 18px; border: 2px solid #4A525E; border-radius: 50%; flex: none; }
.option:hover .option-dot { border-color: #00FFD1; box-shadow: inset 0 0 0 4px #17201F; background: #00FFD1; }
.option.selected .option-dot { border-color: #00FFD1; box-shadow: inset 0 0 0 3px #141820; background: #00FFD1; }

/* Section intro: design main padding is 120px top, the stage already gives 12px */
.info-screen { padding-top: 108px; align-items: center; text-align: center; gap: 18px; }
.info-screen h2 { font-size: 40px; line-height: 1.2; }
.info-screen > .btn { margin-top: 18px; padding: 0 32px; align-self: center; }

/* Analysing: design main padding is 110px top */
.status { padding-top: 98px; display: flex; flex-direction: column; align-items: center; gap: 44px; text-align: center; }
.status h2 { font-size: 24px; }
.sweep { width: 220px; height: 3px; border-radius: 2px; background: #1C222C; overflow: hidden; }
.sweep::after { content: ''; display: block; width: 90px; height: 3px; border-radius: 2px; background: #00FFD1; animation: sweep 1.4s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(220px); } }
@media (prefers-reduced-motion: reduce) { .sweep::after { animation: none; transform: translateX(60px); } }

/* Results */
.results-head { text-align: center; }
.results-head h1 { font-size: 32px; }
.results-head p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: #D6DAE0; }
.results-head #header-line-1 { margin-top: 14px; }
/* The gaps above the video and the button ease from 14px at 360px wide to 20px at 375px and up, so the pacing line ends inside a 360x640 first screen. */
/* Start button above the fold: right under the headline, before the score card. Same link as the closing block. */
.results-video { margin-top: clamp(14px, calc(14px + (100vw - 360px) * 0.4), 20px); }
.top-cta { margin-top: clamp(14px, calc(14px + (100vw - 360px) * 0.4), 20px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.top-cta .btn { width: 100%; }
.top-cta .pacing-line { margin-top: 10px; font-size: 14px; line-height: 1.4; color: #A7AFBB; text-wrap: balance; }
.through-line { margin-top: 20px; font-size: 16px; line-height: 1.6; color: #D6DAE0; text-align: center; }
.overall { margin-top: 32px; padding: 36px 20px 28px; background: #141820; border: 1px solid #232934; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.overall .score { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 54px; line-height: 1; color: #FFFFFF; }
.overall .band-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; }
.overall p { margin-top: 6px; font-size: 16px; line-height: 1.65; color: #E6E8EC; }
.score-red { color: #FF6B6B; }
.score-orange { color: #FFAE4C; }
.score-green { color: #5DD66B; }
.chart h2 { margin: 44px 0 18px; font-size: 21px; }
#chart { display: flex; flex-direction: column; gap: 18px; }
.bar-row { display: flex; flex-direction: column; gap: 8px; }
.bar-label { display: flex; justify-content: space-between; font-size: 15px; }
.bar-label span:last-child { font-weight: 600; white-space: nowrap; }
.bar-track { height: 12px; border-radius: 6px; background: #1C222C; }
.bar-fill { width: 0; height: 12px; border-radius: 6px; }
.bar-red { background: #FF6B6B; }
.bar-orange { background: #FFAE4C; }
.bar-green { background: #5DD66B; }
.legend { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; color: #A7AFBB; }
.legend > span { display: flex; align-items: center; gap: 7px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
#feedback { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.feedback { padding: 20px; background: #141820; border: 1px solid #232934; border-left: 4px solid; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.feedback-red { border-left-color: #FF6B6B; }
.feedback-orange { border-left-color: #FFAE4C; }
.feedback-green { border-left-color: #5DD66B; }
.feedback h3 { display: flex; justify-content: space-between; font-size: 17px; }
.feedback p { font-size: 16px; line-height: 1.6; color: #D6DAE0; }

/* Biggest opportunity (under the overall score) and the toughest-part line */
.opportunity { margin-top: 24px; padding: 24px 20px; background: #141820; border: 1px solid #232934; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.opportunity h2 { font-size: 21px; }
.opportunity h3 { font-size: 17px; color: #00FFD1; }
.opportunity p { font-size: 16px; line-height: 1.65; color: #E6E8EC; }
.toughest { margin-top: 16px; font-size: 16px; line-height: 1.6; color: #D6DAE0; text-align: center; overflow-wrap: anywhere; }

/* End block */
.end-block { margin-top: 40px; padding: 32px 20px; background: #0B171B; border: 1px solid #0F5B4E; border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.end-block h2 { font-size: 26px; }
.end-body { font-size: 16px; line-height: 1.6; color: #E6E8EC; }
.end-block .btn { margin-top: 8px; width: 100%; }

.center-msg { text-align: center; padding: 64px 0 0; }
.center-msg h1 { font-size: 26px; margin-bottom: 16px; }