/* ------------------------------------------------------------------ *
 *  Akamai discovery form, locked stylesheet.
 *
 *  The template is the single source of truth. Fix things HERE and
 *  re-render every instance. Never edit a lead's rendered index.html.
 *
 *  Sections 1 to 3 are the canonical deliverable chrome, copied rule for
 *  rule from projects/akamai-media/mrcs/portal/assets/mrcs-portal-chrome.css
 *  per deliverable-standard.md section 4. Do not author a variant.
 *  The .mp-back hero pill is deliberately omitted; Mark flagged it as a
 *  defect on the live MRCS page.
 *
 *  Sections 4 onward are the form layer.
 * ------------------------------------------------------------------ */

/* == 1. Tokens, Harbor + Tide ====================================== */
:root {
  --mp-primary: #2D6E86;
  --mp-anchor:  #12303C;
  --mp-marine:  #245F79;
  --mp-seafoam: #79B3A6;
  --mp-surface: #EFF3F3;
  --mp-paper:   #F7FAFA;
  --mp-ink:     #10222A;
  --mp-muted:   #5a6b70;
  --mp-line:    #dbe6e6;

  /* Functional only, carrying meaning the brand palette has no token for. */
  --mp-saved:  #2FA36B;
  --mp-record: #C0453B;

  --read: 820px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--mp-surface);
  color: var(--mp-ink);
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.mp-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  width: 100%;
}

/* == 2. Sticky top bar ============================================= */
.mp-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  font-family: 'Poppins', -apple-system, sans-serif;
  transition: background .25s ease, box-shadow .25s ease;
}
/* Same container as the hero, the rail and the body, so the house icon, the
   eyebrow, the h1 and the first question all share one left edge. Left on the
   1400px .mp-wrap it put the icon at x=32 against an h1 at x=198 and hung the
   Akamai mark the same distance off the right. Canonical chrome corrected this
   on 2026-08-06; see reference/akamai-media/portal-chrome/README.md, "The three
   widths, and only three". */
.mp-topbar .mp-wrap {
  position: relative;
  z-index: 2;
  max-width: calc(var(--read) + 64px);
}
.mp-topbar.stuck {
  background: rgba(16, 46, 58, .94);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7);
}

.mp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
}
.mp-nav-left { display: flex; align-items: center; gap: 16px; min-width: 0; }

.mp-home {
  display: inline-flex;
  align-items: center;
  color: #fff;
  transition: color .2s;
  flex: 0 0 auto;
}
.mp-home:hover { color: var(--mp-seafoam); }
.mp-home svg { width: 24px; height: 24px; }

.mp-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .28); flex: 0 0 auto; }

.mp-section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-brand { display: inline-flex; opacity: .95; transition: opacity .2s; flex: 0 0 auto; }
.mp-brand:hover { opacity: 1; }
.mp-brand img { height: 24px; width: auto; display: block; }

/* == 3. Gradient hero ============================================== */
.mp-hero {
  background: linear-gradient(160deg, #102E3A 0%, #245F79 58%, #2E7E7C 130%);
  color: #fff;
  padding: 40px 0 34px;
  margin-top: -66px;
  padding-top: 106px;
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', -apple-system, sans-serif;
}
.mp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(760px 400px at 88% -18%, rgba(45, 110, 134, .5), transparent 60%);
  pointer-events: none;
}
.mp-hero .mp-wrap { position: relative; z-index: 2; max-width: calc(var(--read) + 64px); }

.mp-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  color: #a9d2c9;
  margin-bottom: 10px;
}
.mp-hero h1 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.mp-hero p {
  font-size: 15px;
  color: #d3e4e4;
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}
.mp-hero a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* == 4. Progress rail ============================================== */
/* Sits directly under the topbar. Answering is the only thing on this
   page, so the count is the only status worth showing. */
.df-rail {
  position: sticky;
  top: 54px;
  z-index: 190;
  background: rgba(247, 250, 250, .93);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mp-line);
}
.df-rail-inner {
  max-width: calc(var(--read) + 64px);
  margin: 0 auto;
  padding: 9px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--mp-muted);
}
.df-track {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: var(--mp-line);
  overflow: hidden;
}
.df-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--mp-primary), var(--mp-seafoam));
  transition: width .35s cubic-bezier(.2, .7, .3, 1);
}
.df-count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--mp-ink); flex: 0 0 auto; }
.df-saved {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mp-saved);
  font-weight: 600;
  opacity: 0;
  transition: opacity .3s;
}
.df-saved.on { opacity: 1; }
.df-saved svg { width: 13px; height: 13px; }

/* == 5. Page body ================================================== */
.df-main {
  max-width: calc(var(--read) + 64px);
  margin: 0 auto;
  padding: 34px 32px 96px;
}

.df-lede {
  font-size: 16.5px;
  color: var(--mp-muted);
  margin: 0 0 10px;
}
.df-voice-hint {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0 0 34px;
  padding: 13px 16px;
  border-radius: 10px;
  background: rgba(121, 179, 166, .13);
  border: 1px solid rgba(121, 179, 166, .4);
  font-size: 14.5px;
  color: var(--mp-ink);
}
.df-voice-hint > svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; color: var(--mp-primary); }
/* Was falling through to the browser default #0000EE, which is the one colour
   on the page that belongs to no brand. Body links live inside prose the
   client reads, so they follow the primary like every other link here. */
.df-main a, .df-voice-hint a {
  color: var(--mp-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.df-main a:hover, .df-voice-hint a:hover { color: var(--mp-ink); }
.df-voice-hint .df-btn { border-color: rgba(45, 110, 134, .35); color: var(--mp-primary); }
.df-voice-hint .df-btn:hover { border-color: var(--mp-primary); background: #fff; }

.df-resume {
  display: none;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
  padding: 13px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--mp-line);
  border-left: 4px solid var(--mp-seafoam);
  font-size: 14.5px;
}
.df-resume.on { display: flex; }
.df-resume button {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--mp-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* == 6. Identity block ============================================= */
.df-id {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 34px;
}
.df-id label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.df-id input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border: 1.5px solid var(--mp-line);
  border-radius: 9px;
  background: #fff;
  color: var(--mp-ink);
  transition: border-color .2s, box-shadow .2s;
}
.df-id input:focus {
  outline: none;
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 4px rgba(45, 110, 134, .14);
}

/* == 7. Question cards ============================================= */
.df-q {
  position: relative;
  background: #fff;
  border: 1px solid var(--mp-line);
  border-left: 4px solid var(--mp-line);
  border-radius: 12px;
  padding: 22px 24px 20px;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(10px);
  animation: df-rise .5s cubic-bezier(.2, .7, .3, 1) forwards;
  transition: border-left-color .25s, box-shadow .25s;
}
@keyframes df-rise { to { opacity: 1; transform: none; } }

.df-q:focus-within { box-shadow: 0 14px 34px -26px rgba(16, 48, 60, .8); }
.df-q.answered { border-left-color: var(--mp-seafoam); }
.df-q.from-report { border-left-color: var(--mp-primary); }

.df-q-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
.df-num {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-muted);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
  min-width: 20px;
}
.df-q-text {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  color: var(--mp-ink);
}
.df-help {
  font-size: 13.5px;
  color: var(--mp-muted);
  margin: 5px 0 14px 32px;
}

/* The "why I'm asking" note, only on questions selected from the report.
   Deliberately not amber: amber already means "needs your confirmation"
   in the deliverable standard, and this is context rather than a request. */
.df-why {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 14px 32px;
  padding: 10px 13px;
  border-radius: 8px;
  background: rgba(45, 110, 134, .07);
  border: 1px solid rgba(45, 110, 134, .2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--mp-marine);
}
.df-why svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 3px; }
.df-why b { font-weight: 600; }

.df-field { margin-left: 32px; }

/* Divider announcing the questions that came out of this client's own
   report. Without it the personalisation is invisible: the questions read
   as more of the same list, and the whole point of generating them from
   report.json is that they do not. */
.df-split {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px 0 20px;
}
.df-split-line { flex: 1 1 12px; min-width: 0; height: 1px; background: var(--mp-line); }
.df-split-text { flex: 0 1 auto; min-width: 0; text-align: center; overflow-wrap: break-word; }
.df-split-text b {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mp-primary);
}
.df-split-text span { font-size: 13px; color: var(--mp-muted); }

textarea.df-input, input.df-input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  padding: 12px 14px;
  border: 1.5px solid var(--mp-line);
  border-radius: 9px;
  background: var(--mp-paper);
  color: var(--mp-ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
  resize: vertical;
}
textarea.df-input { min-height: 96px; }
textarea.df-input:focus, input.df-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--mp-primary);
  box-shadow: 0 0 0 4px rgba(45, 110, 134, .14);
}

.df-rows { display: grid; gap: 9px; }
.df-rows input.df-input { min-height: 0; }

.df-choices { display: flex; flex-wrap: wrap; gap: 9px; }
.df-choice input { position: absolute; opacity: 0; pointer-events: none; }
.df-choice span {
  display: inline-block;
  padding: 9px 15px;
  border-radius: 99px;
  border: 1.5px solid var(--mp-line);
  background: var(--mp-paper);
  font-size: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.df-choice:hover span { border-color: var(--mp-seafoam); }
.df-choice input:checked + span {
  border-color: var(--mp-primary);
  background: var(--mp-primary);
  color: #fff;
  font-weight: 500;
}
.df-choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(45, 110, 134, .18); }

/* Sites sub-blocks. Feeling comes before observation, per the 2017
   worksheet evidence in EVIDENCE.md. Order here is load-bearing. */
.df-site {
  border: 1px solid var(--mp-line);
  border-radius: 10px;
  padding: 15px 16px;
  margin-bottom: 11px;
  background: var(--mp-paper);
}
.df-site-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 11px;
}
.df-site-tag.like { background: rgba(121, 179, 166, .25); color: #2c5d55; }
.df-site-tag.dislike { background: rgba(192, 69, 59, .13); color: #8d332c; }
.df-sub-label { display: block; font-size: 12.5px; font-weight: 600; margin: 10px 0 5px; }
.df-site .df-sub-label:first-of-type { margin-top: 0; }

/* == 8. Answer controls ============================================ */
.df-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.df-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 99px;
  border: 1.5px solid var(--mp-line);
  background: #fff;
  color: var(--mp-muted);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.df-btn:hover { border-color: var(--mp-primary); color: var(--mp-primary); }
.df-btn:focus-visible { outline: 2px solid var(--mp-primary); outline-offset: 2px; }
.df-btn svg { width: 14px; height: 14px; }

.df-rec[data-state="recording"] {
  border-color: var(--mp-record);
  color: var(--mp-record);
  background: rgba(192, 69, 59, .06);
}
.df-rec[data-state="recording"] .df-dot {
  width: 9px; height: 9px; border-radius: 99px;
  background: var(--mp-record);
  animation: df-pulse 1.15s ease-in-out infinite;
}
@keyframes df-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.df-rec-time { font-variant-numeric: tabular-nums; }

.df-submitted .df-voice-hint,
.df-submitted .df-resume { display: none; }

.df-audio { margin-top: 10px; display: none; }
.df-audio.on { display: block; }
.df-audio audio { width: 100%; max-width: 380px; height: 34px; }

/* The transcript, shown beside the answer rather than written into it.
   Added 2026-08-24: it was stored and submitted correctly and displayed
   nowhere, so a person recording had no way to see what had been heard. */
.df-transcript {
  margin-top: 10px;
  padding: 10px 13px;
  border-left: 3px solid var(--mp-seafoam, #79B3A6);
  border-radius: 0 8px 8px 0;
  background: rgba(121, 179, 166, .09);
}
.df-transcript-label {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mp-muted);
  margin-bottom: 4px;
}
.df-transcript p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mp-ink, #10222A);
  margin: 0;
}

.df-unsure { font-style: italic; }

/* == 9. Submit ===================================================== */
.df-submit-row { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.df-submit {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 99px;
  border: 0;
  background: var(--mp-primary);
  color: #fff;
  cursor: pointer;
  transition: background .2s, transform .12s, box-shadow .2s;
  box-shadow: 0 12px 26px -16px rgba(45, 110, 134, .9);
}
.df-submit:hover { background: var(--mp-anchor); }
.df-submit:active { transform: translateY(1px); }
.df-submit[disabled] { opacity: .55; cursor: default; box-shadow: none; }
.df-submit-note { font-size: 13.5px; color: var(--mp-muted); }

.df-error {
  display: none;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(192, 69, 59, .07);
  border: 1px solid rgba(192, 69, 59, .35);
  color: #8d332c;
  font-size: 14.5px;
  line-height: 1.6;
}
.df-error.on { display: block; }

.df-done { display: none; text-align: center; padding: 60px 0 40px; }
.df-done.on { display: block; animation: df-rise .5s cubic-bezier(.2, .7, .3, 1) forwards; }
.df-done h2 { font-size: 26px; font-weight: 600; margin: 0 0 10px; }
.df-done p { color: var(--mp-muted); max-width: 460px; margin: 0 auto; }
.df-done-mark {
  width: 52px; height: 52px; border-radius: 99px;
  background: rgba(47, 163, 107, .13);
  color: var(--mp-saved);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.df-done-mark svg { width: 26px; height: 26px; }

.df-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* == 10. Narrow screens ============================================ */
@media (max-width: 620px) {
  .mp-wrap { padding: 0 20px; }
  .mp-hero { padding-top: 96px; padding-bottom: 26px; }
  .mp-section { font-size: 11px; letter-spacing: .12em; }
  .df-main { padding: 26px 20px 80px; }
  .df-rail-inner { padding: 9px 20px; }
  .df-id { grid-template-columns: 1fr; }
  .df-q { padding: 18px 16px 16px; }
  .df-help, .df-why, .df-field { margin-left: 0; }
  .df-q-text { font-size: 16px; }
  .df-submit { width: 100%; justify-content: center; }

  /* 16px is not a taste decision. iOS Safari force-zooms the whole page when
     a focused field is under 16px, so at 15px every tap on a question threw
     the layout sideways and the client had to pinch back out. Sixteen is the
     threshold, exactly. */
  textarea.df-input, input.df-input, .df-choice span { font-size: 16px; }

  /* Apple's minimum tap target is 44px and the record button measured 38.
     This is the control the whole voice route depends on, and it is being
     pressed by someone holding a phone. */
  .df-rec { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .df-unsure { min-height: 44px; }
}

/* Test mode banner, shown only on ?test=1. Loud on purpose: the test form and
   the real form are otherwise identical, and mistaking one for the other in
   either direction costs a client's answers. Added 2026-08-24. */
.df-testbar {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 9px 18px;
  background: #D9902A;
  color: #1a1206;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}