/* The STANDOUT AI Scorecard page (F3). Look: design/README.md ("The AOC Look") with design/tokens.css.
   Motion is the D48 exception: screen transitions, the score counting up, the radar drawing in and
   the opportunity cards arriving in sequence, all off under prefers-reduced-motion. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font); }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-weight: var(--fw-body); line-height: var(--lh-body); color: var(--aoc-ink); background: var(--aoc-white); min-height: 100vh; font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-weight: var(--fw-head); line-height: var(--lh-head); color: var(--aoc-black); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

.screen { display: none; flex-direction: column; min-height: 100vh; }
.screen.active { display: flex; animation: screen-in 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Header and footer */
header { display: grid; grid-template-columns: 160px 1fr 160px; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-6); border-bottom: 2px solid var(--aoc-black); }
.logo { font-size: 12px; font-weight: var(--fw-sub); letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.3; }
.logo strong { display: block; font-weight: var(--fw-display); letter-spacing: 0.12em; }
.page-title { font-size: 26px; font-weight: var(--fw-head); text-align: center; line-height: 1.15; }
footer { background: var(--aoc-black); color: var(--aoc-white); text-align: center; font-size: 14px; /* ruling 17: AA */ padding: var(--s-3) var(--s-4); margin-top: auto; }

/* Screen 1: landing */
.landing-body { flex: 1; display: grid; grid-template-columns: 1fr 440px; gap: var(--s-7); padding: var(--s-7) var(--s-6); max-width: 1200px; margin: 0 auto; width: 100%; align-items: start; }
.landing-body--single { grid-template-columns: 1fr; max-width: 600px; }
.landing-copy h2 { font-size: 40px; margin-bottom: var(--s-4); }
.landing-copy h2 em { font-style: normal; background: linear-gradient(transparent 52%, var(--aoc-yellow) 52%, var(--aoc-yellow) 96%, transparent 96%); padding: 0 var(--s-1); }
.landing-copy p { font-size: 17px; margin-bottom: var(--s-3); }
.landing-copy p strong { font-weight: var(--fw-sub); color: var(--aoc-black); }
.landing-copy ul { list-style: none; margin-top: var(--s-2); }
.landing-copy ul li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: 17px; margin-bottom: var(--s-2); }
.landing-copy ul li::before { content: '•'; color: var(--aoc-black); font-weight: var(--fw-display); flex-shrink: 0; }
.tag-row { display: flex; gap: var(--s-2); margin-bottom: var(--s-4); flex-wrap: wrap; }
.tag { font-size: 13px; font-weight: var(--fw-sub); letter-spacing: 0.04em; text-transform: uppercase; color: var(--aoc-black); border: 2px solid var(--aoc-black); border-radius: var(--s-4); padding: var(--s-1) var(--s-3); }

.form-card { border: 2px solid var(--aoc-black); border-radius: var(--s-2); padding: var(--s-5) var(--s-4); background: var(--aoc-white); }
.form-card h3 { font-size: 20px; margin-bottom: var(--s-3); }
.form-card p.sub { font-size: 16px; margin-bottom: var(--s-4); }
.privacy-notice { font-size: 13px; line-height: 1.5; color: var(--aoc-muted); margin-bottom: var(--s-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.form-group { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); }
.form-group label { font-size: 13px; font-weight: var(--fw-sub); letter-spacing: 0.04em; text-transform: uppercase; color: var(--aoc-black); }
.form-group input, .form-group select { min-height: var(--tap-min); padding: var(--s-2) var(--s-3); border: 2px solid var(--aoc-line); border-radius: var(--s-1); font-size: 16px; color: var(--aoc-ink); background: var(--aoc-white); outline: none; width: 100%; }
.form-group select { appearance: auto; }
.form-group input:focus, .form-group select:focus { border-color: var(--aoc-black); }
.form-group input.error, .form-group select.error { border-color: var(--aoc-black); border-width: 3px; }
.start-problem { font-size: 15px; font-weight: var(--fw-sub); margin-top: var(--s-3); }
.start-problem:empty { display: none; }
.btn-start, .btn-next, .btn-book { display: inline-block; min-height: 52px; background: var(--aoc-yellow); color: var(--aoc-black); border: none; border-radius: var(--s-1); padding: var(--s-3) var(--s-5); font-size: 16px; font-weight: var(--fw-head); letter-spacing: 0.02em; text-decoration: none; text-align: center; }
.btn-start { width: 100%; margin-top: var(--s-2); }
.btn-start:hover, .btn-next:hover:not(:disabled), .btn-book:hover { background: var(--aoc-black); color: var(--aoc-yellow); }
.btn-start:focus-visible, .btn-next:focus-visible, .btn-book:focus-visible, .back-btn:focus-visible, .option-item:focus-visible { outline: 3px solid var(--aoc-black); outline-offset: 2px; }

/* Screen 2: questions */
.question-body { flex: 1; max-width: 760px; margin: 0 auto; padding: var(--s-5) var(--s-6) var(--s-4); width: 100%; }
.back-btn { display: inline-flex; align-items: center; min-height: var(--tap-min); min-width: var(--tap-min); background: none; border: none; font-size: 13px; font-weight: var(--fw-sub); letter-spacing: 0.1em; text-transform: uppercase; color: var(--aoc-black); padding: 0 var(--s-1); margin-bottom: var(--s-4); visibility: hidden; }
.back-btn:hover { text-decoration: underline; }
.question-text { font-size: 26px; margin-bottom: var(--s-5); }
.options-list { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.option-item { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-3); border: 2px solid var(--aoc-line); border-radius: var(--s-2); cursor: pointer; user-select: none; background: var(--aoc-white); }
.option-item:hover { border-color: var(--aoc-black); }
.option-item.selected { border-color: var(--aoc-black); box-shadow: inset 0 0 0 1px var(--aoc-black); }
.option-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--aoc-black); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.option-item.selected .option-radio::after { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--aoc-yellow); outline: 2px solid var(--aoc-black); }
.option-text { font-size: 16px; line-height: 1.45; color: var(--aoc-ink); }
.btn-next { padding: var(--s-3) var(--s-6); }
.btn-next:disabled { opacity: 0.4; cursor: not-allowed; }
.progress-footer { padding: var(--s-3) var(--s-6); border-top: 2px solid var(--aoc-black); display: flex; align-items: center; gap: var(--s-3); }
.progress-label { font-size: 13px; font-weight: var(--fw-sub); white-space: nowrap; min-width: 112px; }
.progress-bar { flex: 1; height: 6px; background: var(--aoc-line); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--aoc-yellow); border-radius: 3px; transition: width 300ms ease; }

/* Screen 4: results */
.results-body { flex: 1; max-width: 920px; margin: 0 auto; padding: var(--s-6) var(--s-6) var(--s-6); width: 100%; }
.score-hero { margin-bottom: var(--s-6); }
.score-hero-title { text-align: center; margin-bottom: var(--s-5); }
.score-hero-title p { font-size: 16px; margin-bottom: var(--s-1); }
.score-hero-title h2 { font-size: 34px; }
.score-hero-inner { display: grid; grid-template-columns: 1fr 300px; gap: var(--s-5); align-items: start; }
.score-description { font-size: 17px; line-height: 1.7; }
.score-widget { border: 2px solid var(--aoc-black); border-radius: var(--s-2); padding: var(--s-4); text-align: center; }
.score-widget-label { font-size: 16px; font-weight: var(--fw-head); line-height: 1.3; margin-bottom: var(--s-2); }
.score-number { font-size: 72px; font-weight: var(--fw-display); line-height: 1; margin-bottom: var(--s-2); font-variant-numeric: tabular-nums; }
.score-band-label { font-size: 16px; font-weight: var(--fw-head); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-3); }
.score-bar { height: 8px; background: var(--aoc-line); border-radius: 4px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 4px; width: 0; transition: width 1100ms cubic-bezier(0.2, 0.7, 0.2, 1); }

.chart-section { margin-bottom: var(--s-6); }
.section-title { font-size: 26px; margin-bottom: var(--s-2); }
.section-sub { font-size: 16px; margin-bottom: var(--s-4); max-width: 700px; }
.chart-container { max-width: 520px; margin: 0 auto; height: 380px; }

.opps-section { margin-bottom: var(--s-6); }
.opps-list { list-style: none; counter-reset: opp; }
.opp-card { counter-increment: opp; position: relative; border: 2px solid var(--aoc-line); border-radius: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-7); margin-bottom: var(--s-3); animation: card-in 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(400ms + var(--i, 0) * 250ms); }
.opp-card::before { content: counter(opp); position: absolute; left: var(--s-3); top: var(--s-4); width: 32px; height: 32px; border-radius: 50%; background: var(--aoc-black); color: var(--aoc-yellow); font-weight: var(--fw-display); font-size: 16px; display: flex; align-items: center; justify-content: center; }
@keyframes card-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.opp-pillar { font-size: 14px; font-weight: var(--fw-head); letter-spacing: 0.02em; margin-bottom: var(--s-1); }
.opp-headline { font-size: 20px; font-weight: var(--fw-head); margin-bottom: var(--s-2); line-height: 1.3; color: var(--aoc-black); }
.opp-row { font-size: 15px; line-height: 1.6; margin-bottom: var(--s-2); }
.opp-row:last-child { margin-bottom: 0; }
.opp-row strong { font-weight: var(--fw-sub); color: var(--aoc-black); }

.cta-block { background: var(--aoc-black); color: var(--aoc-white); border-radius: var(--s-2); padding: var(--s-5) var(--s-4); text-align: center; margin-bottom: var(--s-4); }
.cta-title { font-size: 26px; color: var(--aoc-yellow); margin-bottom: var(--s-3); }
.cta-line { font-size: 17px; line-height: 1.6; color: var(--aoc-white); max-width: 600px; margin: 0 auto var(--s-4); }
.btn-book { padding: var(--s-3) var(--s-5); }
.btn-book:hover { background: var(--aoc-yellow); color: var(--aoc-black); text-decoration: underline; }
.cta-secondary { font-size: 15px; color: var(--aoc-white); margin-top: var(--s-4); line-height: 1.7; }
.cta-secondary a { display: inline-block; min-height: var(--tap-min); min-width: var(--tap-min); padding: var(--s-2) var(--s-2); color: var(--aoc-yellow); text-decoration: underline; font-weight: var(--fw-sub); }

.email-notice { text-align: center; padding: var(--s-2) var(--s-4) 0; font-size: 15px; }

/* Band colours: red/amber/green only here (design/README.md) */
.band-standstill { color: var(--band-standstill); }
.band-emerging { color: var(--band-emerging); }
.band-advancing { color: var(--band-advancing); }
.band-standout { color: var(--band-standout); }

/* Phones and narrow windows */
/* v3 additions (ACCEPTANCE-M3): lever label, notes, the three areas, gap and lever cards, testimonials. */
.lever-label { font-size: 14px; font-weight: var(--fw-head); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--s-2); }
.result-note { font-size: 16px; line-height: 1.6; border-left: 6px solid var(--aoc-yellow); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-4); max-width: 760px; }
.areas-section { margin-bottom: var(--s-6); }
.areas-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.area-card { border: 2px solid var(--aoc-line); border-radius: var(--s-2); padding: var(--s-4); animation: card-in 500ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(400ms + var(--i, 0) * 200ms); min-width: 0; }
.area-card.lowest { border-color: var(--aoc-black); }
.area-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.area-name { font-size: 20px; font-weight: var(--fw-head); color: var(--aoc-black); }
.area-score { font-size: 28px; font-weight: var(--fw-display); color: var(--aoc-black); }
.area-tagline { font-size: 14px; font-weight: var(--fw-sub); margin-bottom: var(--s-2); }
.area-text { font-size: 15px; line-height: 1.6; margin-bottom: var(--s-2); }
.area-build { font-size: 15px; font-weight: var(--fw-head); color: var(--aoc-black); }
.lever-findings { list-style: none; }
.lever-finding { font-size: 15px; line-height: 1.6; margin-bottom: var(--s-2); }
.testimonial { font-size: 15px; line-height: 1.6; font-style: italic; margin-top: var(--s-3); }
.testimonial cite { display: block; font-style: normal; font-weight: var(--fw-sub); margin-top: var(--s-1); }
.testimonial--hero { grid-column: 1 / -1; border-left: 6px solid var(--aoc-yellow); padding-left: var(--s-3); }
.testimonial--cta { color: var(--aoc-white); max-width: 680px; margin: var(--s-4) auto 0; }
.area-card .testimonial { font-size: 14px; }
[hidden] { display: none !important; }

@media (max-width: 900px) {
  .areas-list { grid-template-columns: 1fr; }
  header { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-3) var(--s-3); text-align: center; }
  .logo { text-align: center; }
  .page-title { font-size: 22px; }
  .landing-body { grid-template-columns: 1fr; padding: var(--s-5) var(--s-3); gap: var(--s-5); }
  .landing-copy h2 { font-size: 30px; }
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: var(--s-4) var(--s-3); }
  .question-body { padding: var(--s-4) var(--s-3) var(--s-3); }
  .question-text { font-size: 22px; }
  .progress-footer { padding: var(--s-3) var(--s-3); }
  .score-hero-inner { grid-template-columns: 1fr; }
  .results-body { padding: var(--s-5) var(--s-3); }
  .section-title { font-size: 22px; }
  .chart-container { height: 320px; }
  .opp-card { padding-left: var(--s-7); }
  .cta-block { padding: var(--s-4) var(--s-3); }
  .btn-book { width: 100%; }
}

/* Line 14: nothing animates when the device asks for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .screen.active, .opp-card, .area-card { animation: none; }
  .progress-fill, .score-bar-fill, .form-group input, .form-group select { transition: none; }
}