/* Mobile outer rail matched to the reference frame while preserving 320px support. */

@media (max-width: 760px) {
  :root {
    --parlo-gutter: clamp(22px, 7.7vw, 30px);
  }

  .site-header,
  .hero-inner,
  body:is([data-page="home"], [data-page="products"]) .hero-content {
    width: calc(100% - (var(--parlo-gutter) * 2)) !important;
  }

  .section::before,
  .section-light::before {
    width: calc(100% - (var(--parlo-gutter) * 2)) !important;
  }

  body:is([data-page="home"], [data-page="products"]) .entry-actions {
    width: 100% !important;
  }

  .hero-inner {
    padding-inline: 0 !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 330px !important;
    margin-inline: auto !important;
  }

  .quick-prompts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    gap: 8px !important;
  }

  .quick-prompt {
    min-height: 44px !important;
    width: 100% !important;
    padding: 8px 11px !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  .home-mode-button {
    min-height: 44px !important;
  }

  .home-product-ui {
    min-height: 0 !important;
    padding: 18px !important;
  }

  .home-ui-window {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .home-ui-metric {
    min-height: 88px !important;
    padding: 12px !important;
  }

  .home-ui-metric strong {
    font-size: 21px !important;
  }

  .home-ui-item {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .home-ui-badge {
    grid-column: 2 !important;
    justify-self: start !important;
    margin-top: 2px !important;
  }

  body[data-page="company"] .footer-wordmark,
  body[data-page="careers"] .footer-wordmark {
    font-size: min(17.5vw, 72px) !important;
  }
}

@media (max-width: 420px) {
  .hero h1,
  .hero .display-cn {
    font-size: 48px !important;
    letter-spacing: -.04em !important;
  }

  .hero-actions .button {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-inline: 11px !important;
  }

  .cta-stage h2 {
    font-size: clamp(40px, 11.4vw, 44px) !important;
    line-height: 1.03 !important;
  }

  .cta-stage h2 br {
    display: none;
  }
}

@media (max-width: 350px) {
  .hero-actions .button {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* Final motion cadence: deliberate enough to read, quick enough to stay responsive. */
.reveal,
.reveal-stagger > * {
  transition-duration: .72s !important;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1) !important;
}

.js .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .06s !important; }
.js .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .12s !important; }
.js .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .18s !important; }
.js .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .24s !important; }
.js .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .3s !important; }

/* Product evidence windows: each workflow gets its own dense, credible UI. */
.hero-copy[data-agent-label]::before {
  content: attr(data-agent-label) !important;
}

.product-ui {
  gap: 0 !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%),
    #050605 !important;
}

.product-ui-toolbar {
  min-height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--parlo-line);
  color: var(--parlo-faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.product-ui-toolbar > :last-child {
  color: color-mix(in srgb, var(--page-accent) 76%, white);
  text-align: right;
}

.product-ui-metrics {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--parlo-line);
}

.product-ui-metrics > div {
  min-width: 0;
  padding: 17px 16px;
  border-right: 1px solid var(--parlo-line);
}

.product-ui-metrics > div:last-child { border-right: 0; }
.product-ui-metrics dt {
  color: var(--parlo-faint);
  font-size: 10px;
  line-height: 1.45;
}

.product-ui-metrics dd {
  margin: 9px 0 0;
  color: var(--parlo-white);
  font-family: var(--parlo-display);
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1;
  letter-spacing: -.04em;
}

.product-ui .ui-row {
  border: 0 !important;
  border-bottom: 1px solid var(--parlo-line) !important;
  border-radius: 0 !important;
}

.product-ui .ui-row:last-child { border-bottom: 0 !important; }
.product-ui .ui-row em {
  display: block;
  margin-top: 5px;
  color: rgba(245,245,242,.56);
  font-size: 10px;
  font-style: normal;
  line-height: 1.5;
}

.resume-coverage,
.interview-question,
.interview-session-meta,
.capability-map,
.jd-preview,
.screening-criteria,
.interview-session-card,
.interview-score-grid,
.evaluation-evidence,
.product-ui-note,
.ui-confirmation {
  margin: 0;
}

.resume-coverage {
  padding: 18px;
  border-bottom: 1px solid var(--parlo-line);
}

.resume-coverage > div,
.interview-session-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.resume-coverage > div > span,
.interview-session-meta > span {
  color: var(--parlo-faint);
  font-size: 11px;
}

.resume-coverage strong {
  display: inline-flex;
  gap: 8px;
  color: var(--parlo-white);
  font-size: 15px;
}

.resume-coverage strong span:last-child { color: var(--page-accent); }

.resume-coverage progress,
.interview-session-meta progress,
.capability-map progress {
  width: 100%;
  height: 5px;
  margin-top: 14px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  background: rgba(255,255,255,.1);
}

progress::-webkit-progress-bar { background: rgba(255,255,255,.1); }
progress::-webkit-progress-value { border-radius: 999px; background: var(--page-accent); }
progress::-moz-progress-bar { border-radius: 999px; background: var(--page-accent); }

.resume-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--parlo-line);
}

.resume-diff-grid article {
  min-height: 132px;
  padding: 18px;
  border-right: 1px solid var(--parlo-line);
}

.resume-diff-grid article:last-child { border-right: 0; }
.resume-diff-grid article > span {
  display: block;
  margin-bottom: 18px;
  color: var(--parlo-faint);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.resume-diff-grid del,
.resume-diff-grid ins {
  display: block;
  color: var(--parlo-muted);
  font-size: 12px;
  line-height: 1.65;
  text-decoration-thickness: 1px;
}

.resume-diff-grid ins { color: var(--parlo-white); text-decoration: none; }
.resume-diff-grid [data-diff="after"] { box-shadow: inset 2px 0 var(--page-accent); }

.ui-confirmation {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  border-top: 1px solid var(--parlo-line);
}

.ui-confirmation > div { min-width: 180px; flex: 1 1 220px; }
.ui-confirmation > div strong,
.ui-confirmation > div small { display: block; }
.ui-confirmation > div strong { color: var(--parlo-white); font-size: 12px; }
.ui-confirmation > div small,
.ui-action-status { margin-top: 5px; color: var(--parlo-faint); font-size: 10px; }
.ui-confirmation[data-state="complete"] { background: color-mix(in srgb, var(--page-accent) 6%, transparent); }
.ui-action[data-state="complete"] { border-color: var(--page-accent) !important; }
.button-compact { min-height: 38px !important; font-size: 11px !important; }

.interview-question {
  padding: 21px 20px;
  border-bottom: 1px solid var(--parlo-line);
  background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--page-accent) 8%, transparent), transparent 42%);
}

.interview-question > span {
  color: var(--page-accent);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.interview-question h4 {
  max-width: 32ch;
  margin: 13px 0 0;
  color: var(--parlo-white);
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.35;
}

.interview-question p { margin: 10px 0 0 !important; font-size: 11px !important; }
.interview-session-meta { padding: 15px 18px; border-bottom: 1px solid var(--parlo-line); }
.interview-session-meta progress { width: min(68%, 340px); margin-top: 0; }

.interview-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--parlo-line);
}

.product-ui-avatar-interview .interview-score-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.interview-score-grid > div {
  min-width: 0;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 9px;
  border-right: 1px solid var(--parlo-line);
}

.interview-score-grid > div:last-child { border-right: 0; }
.interview-score-grid span { color: var(--parlo-faint); font-size: 10px; }
.interview-score-grid strong { color: var(--parlo-white); font-size: 13px; }
.interview-score-grid meter { grid-column: 1 / -1; width: 100%; height: 4px; appearance: none; }
meter::-webkit-meter-bar { height: 4px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); }
meter::-webkit-meter-optimum-value { border-radius: 999px; background: var(--page-accent); }
meter::-moz-meter-bar { border-radius: 999px; background: var(--page-accent); }

.product-ui-note {
  padding: 15px 18px;
  color: var(--parlo-muted) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
}

.capability-map { padding: 8px 18px; border-bottom: 1px solid var(--parlo-line); }
.capability-map > div {
  min-height: 54px;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--parlo-line);
}
.capability-map > div:last-child { border-bottom: 0; }
.capability-map span { color: var(--parlo-muted); font-size: 11px; }
.capability-map progress { margin: 0; }
.capability-map strong { color: var(--page-accent); font-size: 10px; text-align: right; }

.growth-actions { margin: 0; padding: 0; list-style: none; }
.growth-actions li {
  min-height: 74px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--parlo-line);
}
.growth-actions li:last-child { border-bottom: 0; }
.growth-actions li > span { color: var(--page-accent); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.growth-actions strong,
.growth-actions small { display: block; }
.growth-actions strong { color: var(--parlo-white); font-size: 12px; }
.growth-actions small { margin-top: 5px; color: var(--parlo-faint); font-size: 10px; }

.jd-preview {
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(0, 1.28fr);
  gap: 22px;
  border-bottom: 1px solid var(--parlo-line);
}
.jd-preview header > span { color: var(--page-accent); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.jd-preview h4 { margin: 12px 0 0; color: var(--parlo-white); font-size: 23px; font-weight: 500; }
.jd-preview header p { margin: 8px 0 0 !important; font-size: 10px !important; }
.jd-structure { margin: 0; display: grid; gap: 12px; }
.jd-structure > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
.jd-structure dt { color: var(--parlo-faint); font-size: 9px; }
.jd-structure dd { margin: 0; color: var(--parlo-muted); font-size: 10px; line-height: 1.55; }

.publish-channel-list,
.screening-criteria { margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; }
.publish-channel-list { border-bottom: 1px solid var(--parlo-line); }
.publish-channel-list li,
.screening-criteria li {
  min-height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--parlo-line);
  border-radius: 5px;
  color: var(--parlo-muted);
  font-size: 10px;
}
.publish-channel-list strong,
.screening-criteria strong { color: var(--page-accent); font-size: 9px; font-weight: 500; }
.screening-criteria { border-bottom: 1px solid var(--parlo-line); }

.interview-session-card {
  min-height: 74px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--parlo-line);
}
.interview-session-card strong,
.interview-session-card small { display: block; }
.interview-session-card strong { color: var(--parlo-white); font-size: 12px; }
.interview-session-card small { margin-top: 5px; color: var(--parlo-faint); font-size: 10px; }
.interview-session-card .material-symbols-rounded { font-size: 18px; }

.evaluation-evidence {
  padding: 18px;
  border-bottom: 1px solid var(--parlo-line);
  color: var(--parlo-white);
  font-size: 12px;
  line-height: 1.65;
}
.evaluation-evidence cite { display: block; margin-top: 10px; color: var(--parlo-faint); font-size: 9px; font-style: normal; }

.job-link-label {
  display: inline-flex;
  margin-top: 19px;
  color: var(--parlo-faint);
  font-size: 10px;
  letter-spacing: .02em;
}
.job-card:hover .job-link-label { color: var(--parlo-white); }

@media (max-width: 760px) {
  .feature-stage,
  .feature-panel { min-height: 0 !important; }
  .product-ui { margin-top: 32px !important; }
  .product-ui-toolbar { min-height: 48px; padding: 8px 13px; font-size: 9px; }
  .product-ui-metrics > div { padding: 14px 11px; }
  .product-ui-metrics dt { font-size: 9px; }
  .product-ui-metrics dd { font-size: 21px; }
  .resume-diff-grid { grid-template-columns: 1fr; }
  .resume-diff-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--parlo-line); }
  .resume-diff-grid article:last-child { border-bottom: 0; }
  .resume-diff-grid [data-diff="after"] { box-shadow: inset 2px 0 var(--page-accent); }
  .ui-confirmation { align-items: stretch; flex-direction: column; }
  .ui-confirmation .button { width: 100% !important; }
  .interview-score-grid,
  .product-ui-avatar-interview .interview-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .interview-score-grid > div:nth-child(2n) { border-right: 0; }
  .interview-score-grid > div:nth-child(-n + 2) { border-bottom: 1px solid var(--parlo-line); }
  .capability-map > div { grid-template-columns: 86px minmax(0, 1fr) 42px; gap: 9px; }
  .jd-preview { grid-template-columns: 1fr; gap: 20px; }
  .publish-channel-list,
  .screening-criteria { padding: 12px; gap: 6px; }
  .publish-channel-list li,
  .screening-criteria li { min-height: 48px; padding: 8px 10px; align-items: flex-start; flex-direction: column; justify-content: center; }
  .interview-session-card { grid-template-columns: 35px minmax(0, 1fr); }
  .interview-session-card .score { grid-column: 2; justify-self: start; }
  .candidate-evidence-list .ui-row { align-items: start !important; }
  .job-link-label { margin-top: 16px; }
}