/* Copied from the approved hirequanta-unified/app/globals.css. Regenerate with design/sync-original.py. */
:root {
  --background: #fff;
  --foreground: #24242d;
  --primary: #dc354b;
  --border: #e7e7eb;
  --radius: 12px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--foreground);
  background: #fff;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  outline-offset: 5px;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
a,
button {
  transition:
    background 0.18s,
    transform 0.18s;
}
a:hover {
  color: #bd2740;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
svg {
  flex-shrink: 0;
}
header.header {
  height: 86px;
  display: flex;
  align-items: center;
  gap: 27px;
  max-width: 1440px;
  margin: auto;
  padding: 0 56px;
}
.logo {
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -1.4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.logo span:first-child {
  font-weight: 400;
}
.logo-dot {
  color: #dc354b;
  font-size: 34px;
  margin-left: 3px;
}
.searchbox {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f7f7f9;
  border: 1px solid #ebebef;
  border-radius: 7px;
  padding: 11px 15px;
  margin-left: 18px;
  flex: 1;
  max-width: 515px;
  color: #777781;
}
.searchbox input {
  border: 0;
  outline: none;
  background: none;
  width: 100%;
  font-size: 14px;
}
.searchbox kbd {
  font-size: 12px;
  border: 1px solid #dedee4;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
}
.workspace-link {
  font-size: 14px;
  margin-left: auto;
  display: flex;
  gap: 7px;
  align-items: center;
}
.signin {
  background: #dc354b;
  color: #fff;
  padding: 10px 23px;
  border-radius: 6px;
  font-size: 14px;
}
.signin:hover,
.primary:hover {
  background: #c12942;
  color: #fff;
}
.nav {
  border-top: 1px solid #f0f0f3;
  border-bottom: 1px solid #e9e9ee;
  background: #f8f8fa;
  padding: 0 max(4%, calc((100vw - 1328px) /2));
  display: flex;
  justify-content: space-between;
  gap: 24px;
  min-height: 47px;
}
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav a {
  font-size: 14px;
  white-space: nowrap;
  height: 47px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav a.active {
  color: #d72e49;
  border-bottom: 2px solid #d72e49;
}
.nav-right {
  gap: 23px;
}
.nav-right a {
  font-size: 13px;
}
.tiny-new {
  font-size: 8px;
  letter-spacing: 0.5px;
  color: #dc354b;
  align-self: flex-start;
  margin-top: 9px;
}
.home-shell {
  max-width: 1440px;
  padding: 24px 56px 68px;
  margin: auto;
}
.intro-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
  font-size: 11px;
  letter-spacing: 1.8px;
  color: #7c7c85;
}
.demo-label {
  font-size: 11px;
  letter-spacing: 0.3px;
  border: 1px solid #e7e7ed;
  border-radius: 4px;
  padding: 4px 7px;
}
.hero {
  min-height: 390px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: #f4eff1;
  position: relative;
}
.hero-copy {
  padding: 41px 40px 30px 44px;
  z-index: 1;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
}
.small-dot {
  display: inline-block;
  background: #d3334c;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.hero h1 {
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: -2.4px;
  line-height: 1.12;
  margin: 20px 0 16px;
  font-weight: 700;
}
.hero h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: #c73853;
}
.hero-copy > p {
  font-size: 15px;
  line-height: 1.7;
  color: #707079;
}
.hero-actions {
  display: flex;
  gap: 25px;
  align-items: center;
  margin-top: 27px;
}
.primary,
.secondary,
.light-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #dc354b;
  color: white;
}
.text-action {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-bottom {
  display: flex;
  gap: 7px;
  color: #82808a;
  font-size: 11px;
  margin-top: 25px;
}
.hero-preview {
  position: relative;
  background: radial-gradient(ellipse at 55% 50%, #ead9df, transparent 70%);
  min-height: 390px;
}
.hero-paper {
  position: absolute;
  width: 241px;
  left: 33%;
  top: 27px;
  transform: rotate(7deg);
  box-shadow: 0 15px 45px #3e213524;
  border-radius: 3px;
}
.resume-paper {
  padding: 25px;
  background: #fff;
  aspect-ratio: 0.707;
  color: #2d303d;
  overflow: hidden;
  text-align: left;
  font-family: Arial, sans-serif;
}
.paper-tag {
  font-size: 5px;
  letter-spacing: 1.8px;
  color: #84727b;
}
.resume-paper h3 {
  font-family: Georgia, serif;
  font-size: 21px;
  margin: 10px 0 2px;
}
.resume-paper .paper-role {
  font-size: 8px;
  color: #90546b;
}
.paper-contact {
  font-size: 5px;
  margin: 10px 0;
  border-bottom: 1px solid #e5dfe2;
  padding-bottom: 10px;
}
.resume-paper h4 {
  font-size: 6px;
  letter-spacing: 1.3px;
  margin: 14px 0 6px;
  color: #99536b;
}
.resume-paper p {
  font-size: 6px;
  line-height: 1.7;
}
.resume-paper b {
  font-size: 7px;
  display: block;
  margin-top: 8px;
}
.paper-date {
  font-size: 5px;
  color: #82838b;
  display: block;
  margin: 3px 0;
}
.score-float {
  position: absolute;
  top: 70px;
  left: 5%;
  background: white;
  border: 1px solid #eeeaed;
  border-radius: 9px;
  padding: 15px;
  box-shadow: 0 10px 25px #3122360d;
  display: flex;
  align-items: center;
  gap: 12px;
  transform: rotate(-4deg);
}
.score-icon {
  background: #eef7f2;
  color: #318361;
  padding: 10px;
  border-radius: 7px;
}
.score-float small {
  font-size: 8px;
  letter-spacing: 1px;
  display: block;
  color: #82828d;
}
.score-float strong {
  display: block;
  font-size: 14px;
  margin: 5px 0;
}
.score-float div > span {
  font-size: 10px;
}
.green {
  color: #258260;
  margin-left: 10px;
}
.check-circle {
  display: flex;
  background: #30956c;
  color: white;
  border-radius: 50%;
  padding: 3px;
  margin-left: 4px;
}
.interview-float {
  position: absolute;
  bottom: 56px;
  right: 10%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #292737;
  color: white;
  border-radius: 8px;
  padding: 17px 20px;
  transform: rotate(-3deg);
  box-shadow: 0 15px 25px #24233120;
}
.wave {
  color: #efb6c6;
}
.interview-float b {
  font-size: 12px;
}
.interview-float small {
  display: block;
  font-size: 9px;
  color: #c1bdcc;
  margin-top: 5px;
}
.interview-float .small-dot {
  background: #76bf94;
  margin-left: 18px;
}
.hero-caption {
  position: absolute;
  bottom: 21px;
  left: 34%;
  font-size: 8px;
  letter-spacing: 2px;
  color: #92808b;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.section-heading h2 {
  font-size: 25px;
  letter-spacing: -0.7px;
  font-weight: 700;
}
.section-heading p {
  color: #85838c;
  font-size: 14px;
  margin-top: 8px;
}
.tool-section {
  margin-top: 37px;
}
.muted {
  color: #85838c;
  font-size: 12px;
  display: flex;
  gap: 5px;
  align-items: center;
}
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 19px;
}
.tool-card {
  border: 1px solid #e7e3e6;
  border-radius: 9px;
  padding: 23px 23px 0;
  display: block;
  overflow: hidden;
}
.tool-card:hover {
  transform: translateY(-4px);
  color: inherit;
  box-shadow: 0 10px 22px #2424320c;
}
.pink {
  background: #fceff2;
}
.ink {
  background: #292737;
  color: #fff;
  border-color: #292737;
}
.mint {
  background: #eef5f2;
}
.sand {
  background: #f6f2e9;
}
.tool-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 27px;
}
.tool-icon {
  display: flex;
  border: 1px solid #d5c5ca;
  border-radius: 9px;
  padding: 10px;
}
.ink .tool-icon {
  border-color: #66596b;
  color: #f2c8d5;
}
.tool-top > svg {
  opacity: 0.5;
  width: 17px;
}
.tool-kind {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #8f6576;
  font-weight: 700;
}
.ink .tool-kind {
  color: #d4b2c9;
}
.mint .tool-kind {
  color: #597c6c;
}
.sand .tool-kind {
  color: #8e794f;
}
.tool-card h3 {
  font-size: 23px;
  letter-spacing: -0.7px;
  line-height: 1.25;
  margin: 10px 0 12px;
  max-width: 200px;
  font-weight: 600;
}
.tool-card p {
  font-size: 12px;
  line-height: 1.6;
  color: #807880;
  min-height: 37px;
}
.ink p {
  color: #bcb7c4;
}
.tool-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 23px;
  padding: 17px 0;
  border-top: 1px solid #00000010;
  font-size: 12px;
  font-weight: 600;
}
.ink .tool-bottom {
  border-color: #ffffff20;
}
.practice-band {
  margin: 44px 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 35px;
  background: #242333;
  border-radius: 10px;
  padding: 38px;
  color: white;
}
.practice-band .eyebrow {
  color: #d6a8ba;
}
.practice-band h2 {
  font-size: 31px;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 18px 0 13px;
}
.practice-band > div > p {
  font-size: 13px;
  color: #b6b3bf;
}
.light-btn {
  background: #fff;
  color: #32303d;
  margin-top: 25px;
  font-size: 12px;
}
.role-preview {
  border-left: 1px solid #ffffff20;
  padding-left: 32px;
}
.role-preview > div {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #e6bfcf;
  font-size: 8px;
  letter-spacing: 1px;
  margin-bottom: 25px;
}
.role-preview h3 {
  font-size: 22px;
  margin: 0 0 12px;
}
.role-preview p {
  line-height: 1.6;
}
.role-preview > span {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: #afabba;
  margin-top: 24px;
}
.role-preview a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-top: 24px;
  color: #ead1df;
}
.red-link {
  color: #d3334c;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.template-preview {
  background: #ececee;
  padding: 24px 37px 0;
  height: 250px;
  overflow: hidden;
  border-radius: 7px;
}
.template-preview .resume-paper {
  box-shadow: 0 4px 16px #0000000b;
}
.template-1 {
  background: #f0eae6;
}
.template-2 {
  background: #e8edf0;
}
.template-3 {
  background: #ede9ef;
}
.template-card > div:last-child {
  position: relative;
  padding: 16px 0;
}
.template-card h3 {
  font-size: 16px;
  font-weight: 600;
}
.template-card span {
  font-size: 12px;
  color: #8b8590;
  display: block;
  margin-top: 5px;
}
.template-card > div:last-child > svg {
  position: absolute;
  right: 0;
  top: 20px;
}
.editorial h3 {
  color: #844846;
}
.modern {
  border-top: 9px solid #354e63;
}
.modern h3 {
  font-family: Arial, sans-serif;
}
.minimal h3 {
  font-family: Arial, sans-serif;
}
.minimal h4 {
  color: #333;
}
footer {
  border-top: 1px solid #ececf0;
  max-width: 1328px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 25px;
  padding: 30px 0;
  flex-wrap: wrap;
}
footer > .logo {
  font-size: 21px;
}
footer > span {
  font-family: Georgia, serif;
  color: #89818b;
  font-style: italic;
}
footer p {
  font-size: 12px;
  margin-left: auto;
  color: #87828c;
}
footer small {
  width: 100%;
  font-size: 11px;
  color: #8d8892;
}
.secondary {
  background: white;
  color: #34323f;
  border-color: #dddde5;
}
.secondary:hover {
  background: #f8f5f7;
}
.empty-note {
  padding: 35px;
  color: #74717c;
}
@media (min-width: 1500px) {
  .hero {
    min-height: 430px;
  }
  .hero-preview {
    min-height: 430px;
  }
  .hero-copy {
    padding-top: 50px;
  }
  .hero-paper {
    width: 265px;
    top: 25px;
  }
}
@media (max-width: 1100px) {
  header.header {
    padding: 0 28px;
    gap: 18px;
  }
  .home-shell {
    padding: 24px 28px 50px;
  }
  .nav {
    padding: 0 28px;
    overflow-x: auto;
  }
  .nav-left {
    gap: 20px;
  }
  .nav-right {
    display: none;
  }
  .workspace-link {
    display: none;
  }
  .hero-copy {
    padding: 35px 28px;
  }
  .hero h1 {
    font-size: 39px;
  }
  .hero-actions {
    gap: 15px;
  }
  .hero-paper {
    left: 25%;
    width: 225px;
  }
  .score-float {
    left: 0;
  }
  .interview-float {
    right: 3%;
  }
  .tool-card {
    padding: 20px 17px 0;
  }
  .tool-card h3 {
    font-size: 21px;
  }
  .practice-band {
    gap: 23px;
    padding: 30px;
  }
  .role-preview {
    padding-left: 22px;
  }
  .template-preview {
    padding: 20px 22px 0;
  }
  footer {
    padding: 25px 28px;
  }
}
@media (max-width: 760px) {
  header.header {
    height: 70px;
    padding: 0 20px;
    gap: 17px;
  }
  .logo {
    font-size: 24px;
  }
  .searchbox {
    display: none;
  }
  .signin {
    margin-left: auto;
    padding: 9px 16px;
  }
  .nav {
    padding: 0 20px;
  }
  .nav-left {
    gap: 24px;
  }
  .nav a {
    font-size: 13px;
  }
  .home-shell {
    padding: 20px;
  }
  .intro-line {
    font-size: 9px;
    letter-spacing: 1px;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    padding: 31px 26px 20px;
  }
  .hero h1 {
    font-size: 39px;
    letter-spacing: -1.7px;
  }
  .hero-copy > p {
    font-size: 14px;
  }
  .hero-actions {
    gap: 18px;
  }
  .primary {
    padding: 12px 16px;
  }
  .text-action {
    font-size: 12px;
  }
  .hero-preview {
    min-height: 270px;
  }
  .hero-paper {
    width: 196px;
    left: 40%;
    top: 8px;
  }
  .score-float {
    left: 10%;
    top: 40px;
    transform: rotate(-4deg) scale(0.9);
  }
  .interview-float {
    bottom: 27px;
    right: 9%;
  }
  .hero-caption {
    display: none;
  }
  .hero-bottom {
    font-size: 10px;
  }
  .section-heading h2 {
    font-size: 22px;
  }
  .section-heading p {
    font-size: 13px;
    line-height: 1.5;
  }
  .section-heading .muted {
    display: none;
  }
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .tool-card {
    padding: 18px 15px 0;
  }
  .tool-top {
    margin-bottom: 20px;
  }
  .tool-icon {
    padding: 8px;
  }
  .tool-card h3 {
    font-size: 21px;
  }
  .tool-card p {
    font-size: 12px;
  }
  .tool-kind {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .tool-bottom {
    font-size: 11px;
    margin-top: 17px;
    padding: 15px 0;
  }
  .practice-band {
    grid-template-columns: 1fr;
    margin: 32px 0;
    padding: 27px;
    gap: 27px;
  }
  .role-preview {
    border-left: 0;
    border-top: 1px solid #ffffff25;
    padding: 23px 0 0;
  }
  .role-preview > div {
    margin-bottom: 15px;
  }
  .role-preview h3 {
    font-size: 23px;
  }
  .role-preview p br {
    display: none;
  }
  .role-preview > span {
    margin-top: 15px;
  }
  .role-preview a {
    margin-top: 16px;
  }
  .template-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .template-preview {
    padding: 15px 17px 0;
    height: 220px;
  }
  .red-link {
    font-size: 11px;
    max-width: 95px;
    line-height: 1.5;
  }
  .template-card h3 {
    font-size: 14px;
  }
  .template-card span {
    font-size: 10px;
  }
  footer {
    padding: 26px 20px;
    gap: 15px;
  }
  footer p {
    margin: 0;
    width: 100%;
  }
  .desktop {
    display: none;
  }
}
/* Shared working surfaces */
.studio-shell {
  max-width: 1328px;
  margin: 0 auto;
  padding: 25px 0 65px;
  min-height: 70vh;
}
.breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  text-transform: capitalize;
  color: #8a8590;
  margin-bottom: 16px;
}
.demo-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #817588;
  background: #f7f4f8;
  border: 1px solid #ece6ee;
  border-radius: 6px;
  font-size: 12px;
  padding: 10px 13px;
}
.page-title {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  margin: 35px 0 30px;
}
.page-title .eyebrow {
  color: #c33354;
}
.page-title h1 {
  font-size: 36px;
  font-weight: 650;
  letter-spacing: -1.3px;
  line-height: 1.15;
  margin: 12px 0;
}
.page-title p {
  color: #77717f;
  font-size: 15px;
  line-height: 1.6;
}
.inline-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.steps {
  display: flex;
  padding: 0;
  list-style: none;
  margin: 0 0 30px;
  gap: 24px;
  border-bottom: 1px solid #eeeaef;
  padding-bottom: 23px;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #9992a0;
}
.steps li > span {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd6e0;
  border-radius: 50%;
  font-size: 12px;
}
.steps li.done {
  color: #be2d4c;
}
.steps li.done > span {
  background: #fff0f4;
  border-color: #e7a4b6;
}
.steps li > svg {
  margin-left: 15px;
  color: #c5beca;
}
.split-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 45px;
  align-items: start;
}
.panel {
  border: 1px solid #e4deea;
  background: #fff;
  border-radius: 12px;
  padding: 29px;
}
.panel h2 {
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.5px;
}
.panel h3 {
  font-size: 17px;
  font-weight: 600;
}
.panel > p {
  color: #756e7e;
  line-height: 1.7;
  margin-top: 12px;
  font-size: 14px;
}
.upload-zone {
  border: 1.5px dashed #d3bdcd;
  border-radius: 10px;
  background: #fdf9fb;
  text-align: center;
  padding: 35px 22px;
}
.upload-icon {
  display: inline-flex;
  padding: 15px;
  background: #fce9f0;
  color: #c93258;
  border-radius: 12px;
  margin-bottom: 18px;
}
.upload-zone h3 {
  font-size: 19px;
  overflow-wrap: anywhere;
}
.upload-zone p {
  font-size: 14px;
  color: #897a88;
  margin: 10px 0 20px;
}
.upload-zone small {
  display: block;
  line-height: 1.5;
  font-size: 12px;
  color: #897a88;
  margin-top: 18px;
}
.file-picker {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.file-picker input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
.or-line {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #9b8e9c;
  font-size: 13px;
  margin: 24px 0;
}
.or-line span {
  height: 1px;
  background: #ede5ee;
  flex: 1;
}
.stack-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.mt {
  margin-top: 24px !important;
}
.resume-intro {
  background: #f4eff5;
  border-radius: 12px;
  padding: 35px;
  text-align: center;
}
.angled-paper {
  width: 240px;
  margin: 0 auto 25px;
  transform: rotate(3deg);
  box-shadow: 0 12px 30px #37263d20;
}
.resume-intro h3 {
  font-size: 23px;
  margin-bottom: 20px;
  letter-spacing: -0.6px;
}
.resume-intro > p {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #76667e;
  font-size: 14px;
  margin: 13px 0;
  text-align: left;
}
.resume-intro > p svg {
  color: #9c3a67;
}
.filter-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 23px 0;
}
.filter-chips button,
.keyword {
  padding: 10px 17px;
  border: 1px solid #e3dce7;
  border-radius: 30px;
  background: white;
  font-size: 14px;
  color: #82708b;
  display: flex;
  align-items: center;
  gap: 7px;
}
.filter-chips button.selected {
  background: #df2d52;
  border-color: #df2d52;
  color: white;
}
.template-catalog .template-preview {
  height: 370px;
  padding: 25px 30px 0;
}
.template-catalog .resume-paper {
  padding: 22px;
}
.template-catalog .resume-paper h3 {
  font-size: 21px;
}
.template-catalog button {
  text-align: left;
  border: 0;
  background: none;
}
.editor-layout {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 35px;
  align-items: start;
}
.editor-panel {
  padding: 25px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #5e536a;
  margin: 20px 0;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  border: 1px solid #dcd5e3;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  line-height: 1.6;
  color: #302538;
  font-size: 14px;
  outline-color: #cf3861;
}
.field textarea {
  resize: vertical;
  min-height: 120px;
}
.field input:focus,
.field textarea:focus {
  border-color: #cf3861;
  box-shadow: 0 0 0 3px #cf386110;
}
.two-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.assist-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c03365;
  background: #fff0f5;
  padding: 8px 12px;
  border: 1px solid #f3d3df;
  border-radius: 6px;
  font-size: 13px;
}
.editor-preview {
  padding: 25px 40px;
  background: #efedf2;
  border-radius: 10px;
  min-width: 0;
}
.preview-bar,
.preview-bottom {
  display: flex;
  justify-content: space-between;
  color: #8a7f94;
  font-size: 11px;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.preview-bottom {
  justify-content: center;
  gap: 7px;
  margin: 20px 0 0;
}
.live-paper {
  background: white;
  padding: 45px 43px;
  box-shadow: 0 8px 24px #34213c10;
  min-height: 700px;
  color: #2e2734;
  overflow-wrap: anywhere;
}
.live-paper h2 {
  font-family: Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -1px;
  margin: 20px 0 7px;
}
.live-paper h3 {
  font-size: 16px;
  color: #a5446b;
  font-weight: 400;
}
.live-paper .contact {
  font-size: 11px;
  border-bottom: 1px solid #e6dce5;
  padding: 17px 0;
  line-height: 1.6;
}
.live-paper h4 {
  font-size: 12px;
  color: #9e416b;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 24px 0 11px;
}
.live-paper section p {
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-line;
}
.live-paper.editorial h2 {
  font-style: italic;
  color: #914668;
}
.live-paper.modern {
  border-top: 13px solid #253853;
}
.live-paper.modern h2,
.live-paper.minimal h2 {
  font-family: Arial, sans-serif;
  font-weight: 600;
}
.live-paper.modern h3,
.live-paper.modern h4 {
  color: #2f5979;
}
.live-paper.minimal h3,
.live-paper.minimal h4 {
  color: #353039;
}
.design-options {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}
.design-options button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #e1dce6;
  border-radius: 8px;
  text-align: left;
}
.design-options button.selected {
  background: #fff0f5;
  border-color: #d52e58;
  color: #bd2b57;
}
.design-options button svg:last-child {
  margin-left: auto;
}
.save-status {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #458063;
  font-size: 12px;
}
.export-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}
.export-options > h2 {
  margin-top: 20px;
}
.export-options > .primary {
  width: 100%;
  margin: 20px 0;
}
.export-options > .text-action {
  margin: 0 auto 20px;
}
.success-mark {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #e4f5ed;
  color: #218762;
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  margin-top: 20px;
  border-top: 1px solid #eee8f0;
  border-bottom: 1px solid #eee8f0;
}
.export-choice div {
  flex: 1;
}
.export-choice span {
  display: block;
  font-size: 13px;
  color: #918397;
  margin-top: 7px;
}
.soft-note {
  display: flex;
  gap: 15px;
  background: #f5f0f7;
  border-radius: 9px;
  padding: 22px;
  margin-top: 25px;
  color: #75607e;
}
.soft-note p {
  font-size: 13px;
  line-height: 1.7;
  margin-top: 6px;
}
.soft-note b {
  font-size: 14px;
}
.soft-note a {
  color: #c3345c;
  font-size: 13px;
  display: block;
  margin-top: 9px;
}
.panel-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.panel-heading h2 {
  font-size: 19px;
}
.panel-heading small {
  font-size: 12px;
  color: #9b90a2;
  font-weight: 400;
}
.number-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8eaf1;
  color: #b33760;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  font-size: 12px;
  flex-shrink: 0;
}
.saved-file {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 23px;
  background: #fbf4f8;
  border: 1px solid #ecdbe6;
  border-radius: 9px;
  color: #9e3a60;
}
.saved-file div {
  flex: 1;
}
.saved-file b {
  font-size: 15px;
}
.saved-file span {
  font-size: 12px;
  display: block;
  margin-top: 7px;
  color: #93849c;
}
.explain-panel {
  background: #f5f0f7;
  border-radius: 12px;
  padding: 36px;
}
.explain-panel h2 {
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: 1.2;
  margin: 23px 0 15px;
}
.explain-panel > p {
  color: #8e7a99;
  font-size: 14px;
  line-height: 1.7;
}
.explain-row {
  display: flex;
  gap: 13px;
  align-items: start;
  padding: 17px 0;
  border-bottom: 1px solid #e7dceb;
}
.explain-row svg {
  color: #a94872;
}
.explain-row b {
  font-size: 14px;
}
.explain-row span:not(.number-chip) {
  display: block;
  font-size: 13px;
  color: #9684a0;
  margin-top: 7px;
}
.explain-row p {
  font-size: 15px;
  line-height: 1.7;
}
.explain-panel > small {
  font-size: 12px;
  color: #9986a3;
  display: block;
  line-height: 1.7;
  margin-top: 20px;
}
.score-ring {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background: conic-gradient(#d83463 0deg 309deg, #eee5ef 309deg 360deg);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.score-ring:before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: white;
}
.score-ring strong {
  position: relative;
  font-size: 43px;
  letter-spacing: -2px;
  text-align: center;
  line-height: 1.05;
}
.score-ring strong span {
  font-size: 12px;
  color: #8b7c94;
  display: block;
  margin-top: 7px;
  font-weight: 400;
  letter-spacing: 0;
}
.small-ring {
  width: 110px;
  height: 110px;
}
.small-ring strong {
  font-size: 33px;
}
.small-ring:before {
  background: #f5f0f7;
}
.report-top {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 25px;
  margin-bottom: 35px;
}
.score-card {
  display: flex;
  gap: 26px;
  align-items: center;
  border: 1px solid #e7dce9;
  border-radius: 12px;
  padding: 30px;
  background: #fffcff;
}
.score-card h2 {
  font-size: 26px;
  letter-spacing: -0.7px;
  margin: 14px 0 10px;
}
.score-card p {
  font-size: 14px;
  color: #8c7c94;
  line-height: 1.7;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e7f4ed;
  color: #3d8b69;
  border: 1px solid #d1e8da;
  border-radius: 30px;
  font-size: 11px;
  padding: 6px 10px;
}
.score-breakdown > div {
  margin: 0 0 21px;
}
.score-breakdown > div:last-child {
  margin-bottom: 0;
}
.score-breakdown > div > span {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.score-breakdown b {
  font-weight: 500;
}
[data-slot='progress-track'] {
  background: #efe8f2;
  height: 6px;
  border-radius: 5px;
  overflow: hidden;
}
[data-slot='progress-indicator'] {
  background: #cf3967;
  height: 100%;
  border-radius: 5px;
}
.report-tabs {
  margin: 0 0 15px;
}
.issue-list {
  display: grid;
  gap: 13px;
  margin-top: 17px;
}
.issue {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid #e6dfe9;
  padding: 23px 25px;
  border-radius: 9px;
}
.issue-number {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fce9ed;
  color: #c43157;
  width: 39px;
  height: 39px;
  border-radius: 9px;
  flex-shrink: 0;
}
.n1 {
  background: #fff1dd;
  color: #ba8132;
}
.n2 {
  background: #ecf3f0;
  color: #4e8c76;
}
.issue > div {
  flex: 1;
}
.issue h3 {
  font-size: 17px;
  font-weight: 550;
  line-height: 1.5;
}
.issue p {
  font-size: 14px;
  line-height: 1.65;
  color: #8a7d92;
  margin-top: 5px;
}
.issue-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c34866;
  display: block;
  margin-bottom: 5px;
}
.issue .secondary {
  font-size: 12px;
  padding: 10px 15px;
}
.next-step {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 28px;
  background: #f6f0f8;
  border-radius: 10px;
  margin-top: 32px;
}
.next-step > div {
  flex: 1;
}
.next-step h3 {
  font-size: 20px;
  letter-spacing: -0.4px;
}
.next-step p {
  font-size: 14px;
  color: #91829a;
  margin-top: 7px;
  line-height: 1.6;
}
.strength-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 20px 0;
  font-size: 15px;
  line-height: 1.6;
}
.strength-row svg {
  color: #408b6a;
}
.keyword {
  background: #eaf6ef;
  border-color: #d6eadd;
  color: #568f6e;
}
.keyword.missing {
  background: #fff5e7;
  border-color: #f0dfbd;
  color: #ac8244;
}
.match-banner {
  display: flex;
  align-items: center;
  gap: 45px;
  padding: 35px;
  background: #f8eff5;
  border-radius: 10px;
}
.match-banner > span {
  color: #957e93;
  font-size: 13px;
}
.match-banner b {
  display: block;
  font-size: 46px;
  color: #332137;
  font-weight: 500;
  margin-top: 8px;
}
.match-banner small {
  font-size: 15px;
  color: #a895ad;
}
.match-banner p {
  margin-left: auto;
  font-size: 14px;
  line-height: 1.8;
  color: #8e7697;
}
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-top: 25px;
}
.comparison h2 {
  margin-top: 15px;
}
.comparison p {
  font-size: 16px;
  line-height: 1.9;
}
.tinted {
  background: #f5faf7;
  border-color: #d6e6dc;
}
.comparison .status-pill {
  margin-top: 25px;
}
.listing-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 30px;
  align-items: start;
}
.filters {
  padding: 23px;
}
.filters h3 {
  font-size: 17px;
  margin-bottom: 9px;
}
.filters > p {
  font-size: 12px;
  margin-bottom: 22px;
}
.filters > button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 0;
  background: none;
  color: #8a7996;
  border-radius: 5px;
  margin: 3px 0;
}
.filters > button.selected {
  background: #fceaf1;
  color: #c33661;
}
.filters button > span {
  font-size: 11px;
}
.filter-tip {
  border-top: 1px solid #ece4f0;
  padding-top: 25px;
  margin-top: 22px;
  color: #9f7fae;
}
.filter-tip p {
  font-family: Georgia, serif;
  font-size: 22px;
  line-height: 1.4;
  margin-top: 12px;
}
.listing-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 17px;
  border: 1px solid #e5dde9;
  border-radius: 7px;
  margin-bottom: 24px;
  color: #b09abb;
}
.listing-search input {
  border: 0;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 14px;
}
.listing-search span {
  font-size: 12px;
}
.interview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px;
}
.interview-card {
  text-align: left;
  border: 0;
  background: none;
  min-width: 0;
}
.interview-card:hover {
  transform: translateY(-5px);
}
.interview-poster {
  padding: 22px;
  border-radius: 10px;
  min-height: 275px;
  display: flex;
  flex-direction: column;
  background: #eed9e5;
  color: #723b58;
}
.interview-poster > span,
.detail-poster > span {
  font-size: 10px;
  letter-spacing: 1.4px;
}
.poster-symbol {
  padding: 25px 0 18px;
  opacity: 0.6;
}
.interview-poster h2 {
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: -1px;
  flex: 1;
  margin: 8px 0 24px;
}
.interview-poster > div:last-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8px;
  letter-spacing: 0.7px;
  border-top: 1px solid #00000020;
  padding-top: 15px;
}
.blue {
  background: #dce9f6;
  color: #2d4e79;
}
.violet {
  background: #e6def5;
  color: #61417f;
}
.gold {
  background: #f3e8c8;
  color: #826332;
}
.teal {
  background: #d4ede5;
  color: #2c7766;
}
.orange {
  background: #f5ddd1;
  color: #99513e;
}
.interview-meta {
  padding: 17px 0;
}
.interview-meta h3 {
  font-size: 17px;
  font-weight: 600;
}
.interview-meta p {
  font-size: 13px;
  color: #8e7d9b;
  line-height: 1.65;
  margin: 8px 0 14px;
}
.interview-meta > span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #8f7b9e;
  flex-wrap: wrap;
}
.interview-meta b {
  font-weight: 400;
  color: #c94770;
  margin-left: auto;
  font-size: 10px;
}
.detail-hero {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 50px;
  background: #262138;
  color: #fff;
  border-radius: 12px;
  padding: 38px;
  margin-top: 25px;
}
.detail-poster {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 8px;
  min-height: 355px;
  color: #683752;
  background: #edcad9;
}
.detail-poster h2 {
  font-family: Georgia, serif;
  font-size: 43px;
  line-height: 1.1;
  letter-spacing: -1.3px;
  margin-top: auto;
}
.detail-copy {
  padding: 20px 0;
}
.detail-copy .eyebrow {
  color: #d4adc8;
}
.detail-copy h1 {
  font-size: 40px;
  letter-spacing: -1.4px;
  margin: 17px 0;
}
.detail-copy > p {
  color: #b4a8c5;
  font-size: 15px;
  line-height: 1.7;
}
.detail-tags {
  display: flex;
  gap: 13px;
  margin: 22px 0;
}
.detail-tags span {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ffffff25;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 5px;
  color: #cebedb;
}
.detail-callout {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #ffffff09;
  border-radius: 7px;
  padding: 17px;
  margin: 0 0 25px;
}
.detail-callout > b,
.detail-callout b {
  font-size: 14px;
}
.detail-callout p {
  font-size: 12px;
  color: #a99abb;
  margin-top: 7px;
  line-height: 1.6;
}
.detail-copy > small {
  display: block;
  font-size: 11px;
  color: #a495b7;
  margin-top: 15px;
}
.detail-about {
  max-width: 900px;
  margin: 38px auto;
}
.detail-about > h2 {
  font-size: 26px;
  margin: 20px 0;
}
.detail-about > p {
  font-size: 16px;
  line-height: 1.9;
  color: #8c799a;
}
.three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 32px 0;
}
.three-columns > div {
  padding: 22px 0;
  border-top: 1px solid #e8dded;
}
.three-columns > div > span {
  font-size: 13px;
  color: #bb7295;
}
.three-columns h3 {
  font-size: 20px;
  margin: 15px 0;
}
.three-columns p {
  font-size: 14px;
  color: #927ba0;
  line-height: 1.8;
}
.answer-method {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: #f8f2fb;
  border: 1px solid #e8dced;
  border-radius: 9px;
  margin: 25px 0;
}
.answer-method > div {
  flex: 1;
}
.answer-method b {
  font-size: 15px;
}
.answer-method p {
  font-size: 13px;
  color: #9684a1;
  margin-top: 6px;
}
.answer-method small {
  font-size: 11px;
  color: #a18fac;
  display: block;
  margin-top: 8px;
  line-height: 1.5;
}
.ready-panel {
  max-width: 650px;
  margin: 30px auto;
  padding: 35px 55px;
  text-align: center;
}
.ready-orb,
.session-orb {
  background: radial-gradient(circle at 30% 25%, #d292bb, #754794 60%, #3f285c);
  border: 1px solid #ffffff45;
  box-shadow: 0 15px 40px #75377924;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  color: #fff;
  margin: 0 auto 25px;
}
.ready-checks {
  text-align: left;
  margin: 28px auto;
  border-top: 1px solid #ebe0ed;
  border-bottom: 1px solid #ebe0ed;
  padding: 12px 0;
}
.ready-checks p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  margin: 17px 0;
  color: #8b7998;
}
.ready-checks svg {
  color: #52a480;
}
.consent {
  display: flex;
  align-items: start;
  gap: 12px;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 25px;
  color: #8d779e;
}
.consent [data-slot='checkbox'] {
  margin-top: 4px;
  flex-shrink: 0;
  border: 1px solid #c8b2d4;
  width: 19px;
  height: 19px;
  border-radius: 4px;
}
.consent [data-checked] {
  background: #ca3b6b;
  color: white;
}
.session-top {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 25px 0;
  color: #a498b4;
  font-size: 12px;
}
.session-top > span:first-child {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 1px;
}
.session-top > span:nth-child(2) {
  margin-left: auto;
}
.session-top button {
  border: 1px solid #e4daeb;
  padding: 8px 13px;
  border-radius: 6px;
  color: #ac668a;
}
.session-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  min-height: 590px;
}
.conversation {
  background: #251d36;
  border-radius: 12px;
  color: #eee3f3;
  padding: 48px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.session-orb {
  width: 115px;
  height: 115px;
  box-shadow: 0 0 50px #b765b02a;
  margin-bottom: 30px;
}
.conversation .eyebrow {
  color: #b49ac5;
}
.conversation h1 {
  font-size: 30px;
  line-height: 1.45;
  letter-spacing: -0.6px;
  margin: 25px 0;
}
.conversation > p {
  font-size: 13px;
  color: #9e87b1;
  line-height: 1.7;
}
.question-progress {
  width: 100%;
  margin-top: auto;
  padding-top: 40px;
}
.question-progress span {
  display: block;
  font-size: 11px;
  color: #a389b9;
  margin-bottom: 13px;
}
.answer-panel {
  border: 1px solid #e6dcec;
  border-radius: 12px;
  padding: 29px;
  display: flex;
  flex-direction: column;
}
.answer-panel .panel-heading {
  justify-content: space-between;
}
.answer-panel h2 {
  font-size: 19px;
  font-weight: 500;
}
.answer-panel .panel-heading > span {
  font-size: 11px;
  color: #9c89a9;
}
.answer-panel textarea {
  width: 100%;
  min-height: 280px;
  flex: 1;
  resize: vertical;
  border: 1px solid #e5daec;
  border-radius: 8px;
  padding: 18px;
  font-size: 15px;
  line-height: 1.9;
  outline-color: #cc4877;
}
.answer-panel textarea::placeholder {
  color: #b6a6c0;
}
.word-count {
  text-align: right;
  font-size: 11px;
  color: #ac9cba;
  margin: 10px 0 20px;
}
.answer-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 25px;
}
.fine-print {
  font-size: 12px !important;
  color: #9d8aac !important;
  line-height: 1.7;
  margin-top: 16px;
  display: block;
}
.answer-panel .fine-print {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 20px;
}
.interview-summary {
  display: flex;
  gap: 33px;
  align-items: center;
  background: #fbf5fd;
  border: 1px solid #e9dbf0;
  padding: 35px;
  border-radius: 12px;
}
.interview-summary h2 {
  font-size: 29px;
  letter-spacing: -0.7px;
  margin: 15px 0;
}
.interview-summary p {
  font-size: 15px;
  color: #9b81ab;
  line-height: 1.8;
  max-width: 720px;
}
.feedback-cards h2 {
  font-size: 40px;
  margin: 20px 0;
}
.feedback-cards h2 small {
  font-size: 13px;
  color: #ad9bbb;
  font-weight: 400;
}
.feedback-cards > section > span {
  font-size: 14px;
  color: #927c9f;
}
.feedback-cards p {
  margin-top: 15px;
  font-size: 14px;
}
.feedback-cards [data-slot='progress'] {
  margin-bottom: 15px;
}
blockquote {
  font-family: Georgia, serif;
  font-size: 21px;
  line-height: 1.8;
  color: #79508e;
  background: #faf5fc;
  border-left: 3px solid #d396c1;
  margin: 23px 0;
  padding: 22px;
}
.workspace-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 30px;
}
.workspace-stats > div {
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid #e8dfee;
  border-radius: 10px;
  padding: 25px;
  color: #b66e97;
}
.workspace-stats span {
  font-size: 13px;
  color: #a18aac;
}
.workspace-stats b {
  display: block;
  font-size: 31px;
  line-height: 1.2;
  color: #3a2949;
  font-weight: 500;
  margin-top: 10px;
}
.workspace-item {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-top: 18px;
}
.workspace-item > div:nth-child(2) {
  flex: 1;
}
.workspace-item h3 {
  font-size: 18px;
}
.workspace-item p {
  font-size: 13px;
  color: #9b87a7;
  margin-top: 9px;
}
.file-tile {
  background: #fbeaf2;
  color: #ba537f;
  padding: 20px;
  border-radius: 8px;
}
.icon-btn {
  display: flex;
  padding: 10px;
  border: 0;
  background: none;
  color: #a291af;
}
.empty-state {
  text-align: center;
  padding: 65px 25px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.empty-state > svg {
  color: #c098ba;
}
.empty-state p {
  margin: 0 0 10px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 50px 0 20px;
}
.price-card {
  border: 1px solid #e1d5e9;
  border-radius: 12px;
  padding: 32px;
  position: relative;
}
.price-card h2 {
  font-size: 25px;
  letter-spacing: -0.7px;
}
.price-card > p {
  font-size: 14px;
  color: #9d87ac;
  margin-top: 12px;
}
.price-card.featured {
  border: 2px solid #ce3e72;
  background: #fff9fc;
}
.popular {
  position: absolute;
  top: -14px;
  background: #ce3e72;
  border-radius: 25px;
  color: #fff;
  padding: 7px 14px;
  letter-spacing: 1px;
  font-size: 9px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.price {
  font-size: 42px;
  letter-spacing: -1.5px;
  margin: 30px 0;
}
.price small {
  font-size: 12px;
  letter-spacing: 0;
  color: #a390b0;
  margin-left: 7px;
}
.price-card > button {
  width: 100%;
  margin-bottom: 20px;
}
.plan-feature {
  display: flex;
  gap: 9px;
  align-items: center;
  font-size: 13px !important;
  margin: 15px 0 !important;
}
.plan-feature svg {
  color: #bb5c8e;
}
.centered {
  text-align: center;
}
.checkout-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}
.payment-placeholder {
  border: 1px solid #e3d5ec;
  border-radius: 8px;
  background: #faf5fc;
  padding: 24px;
  margin: 25px 0;
}
.payment-placeholder > svg {
  color: #a878bf;
  margin-bottom: 14px;
}
.payment-placeholder p {
  font-size: 14px;
  line-height: 1.8;
  color: #a28baf;
  margin-top: 9px;
}
.order-summary {
  align-self: start;
}
.order-summary > div {
  display: flex;
  gap: 15px;
  align-items: center;
  padding: 25px 0;
  margin: 15px 0;
  color: #9460ac;
  border-bottom: 1px solid #eee2f3;
}
.order-summary > p {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 20px 0;
}
.order-summary .total {
  border-top: 1px solid #e7daed;
  padding-top: 25px;
  font-size: 18px;
}
.order-summary small {
  font-size: 12px;
  color: #a58faf;
  line-height: 1.7;
}
.success-page {
  max-width: 740px;
  margin: 50px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.success-page .eyebrow {
  margin-top: 30px;
  color: #b6789e;
}
.success-page h1 {
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -1.5px;
  margin: 20px 0;
}
.success-page > p {
  color: #9d85ae;
  font-size: 15px;
  line-height: 1.8;
}
.success-page .inline-actions {
  margin-top: 30px;
  justify-content: center;
}
.success-next {
  padding: 30px;
  background: #f8f0fb;
  border: 1px solid #ede0f3;
  border-radius: 10px;
  width: 100%;
  margin: 35px 0;
}
.success-next h3 {
  font-size: 23px;
}
.success-next p {
  font-size: 14px;
  color: #a189b0;
  margin: 12px 0;
}
.success-next a {
  justify-content: center;
}
.print-resume {
  max-width: 794px;
  margin: 25px auto;
}
.print-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 25px;
}
.employer-job {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.employer-job h2 {
  margin: 15px 0 10px;
}
.employer-job p {
  font-size: 14px;
  color: #a28bad;
}
.candidate-list {
  border: 1px solid #e9deef;
  border-radius: 10px;
  padding: 0 25px;
}
.candidate-row {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 23px 0;
  border-bottom: 1px solid #eadff0;
}
.candidate-row:last-child {
  border: 0;
}
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eeddf1;
  color: #9470a3;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 13px;
}
.avatar-1 {
  background: #dff0e8;
  color: #6c9782;
}
.avatar-2 {
  background: #fcf0d6;
  color: #ac9354;
}
.candidate-row > div {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.candidate-row h3 {
  font-size: 16px;
  font-weight: 550;
}
.candidate-row p {
  font-size: 12px;
  color: #a793b2;
  margin-top: 7px;
}
.candidate-score {
  font-size: 23px;
  margin-right: 25px;
  color: #8b699c;
}
.candidate-score small {
  font-size: 11px;
  color: #b09bbb;
  display: block;
  margin-top: 4px;
}
.hq-dialog {
  max-width: 460px !important;
  width: calc(100% - 32px) !important;
  padding: 32px !important;
  background: #fff !important;
  border: 1px solid #e6d8ed;
  gap: 17px !important;
  max-height: 90dvh;
  overflow: auto;
}
.hq-dialog [data-slot='dialog-title'] {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: #392444;
}
.hq-dialog [data-slot='dialog-description'] {
  font-size: 14px;
  line-height: 1.7;
  color: #9a82ab;
}
.hq-dialog .field {
  margin: 4px 0;
}
.hq-dialog .primary {
  width: 100%;
}
.modal-brand {
  font-size: 23px;
  font-weight: 600;
  color: #b3447b;
  margin: 5px 0 15px;
}
.account-sheet {
  padding: 40px 28px !important;
  background: #fff !important;
  width: min(400px, 90vw) !important;
  gap: 20px !important;
}
.account-sheet [data-slot='sheet-title'] {
  font-size: 28px;
  letter-spacing: -1px;
  color: #38203f;
}
.account-sheet [data-slot='sheet-description'] {
  font-size: 14px;
  line-height: 1.7;
  color: #9e83b0;
}
.account-row {
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #f1e6f5;
  background: none;
  padding: 17px 0;
  font-size: 15px;
  color: #8a699f;
}
.account-row svg:last-child {
  margin-left: auto;
}
.account-foot {
  margin-top: auto;
  border-radius: 8px;
  background: #f7eafa;
  padding: 28px;
  font-size: 25px;
  letter-spacing: -0.8px;
  line-height: 1.4;
}
.account-foot em {
  font-family: Georgia, serif;
  color: #b3548b;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  padding: 15px 22px;
  background: #32203d;
  color: #fff;
  box-shadow: 0 7px 25px #37184a25;
  max-width: calc(100vw - 35px);
  width: max-content;
  border-radius: 8px;
  z-index: 100;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  line-height: 1.6;
}
.error {
  color: #c53552 !important;
}
footer .logo {
  color: #282030;
}
/* Responsive workspaces */
@media (max-width: 1440px) {
  .studio-shell {
    padding-left: 56px;
    padding-right: 56px;
  }
}
@media (max-width: 1100px) {
  .studio-shell {
    padding-left: 28px;
    padding-right: 28px;
  }
  .editor-layout {
    grid-template-columns: 380px 1fr;
    gap: 23px;
  }
  .editor-preview {
    padding: 23px;
  }
  .live-paper {
    padding: 30px;
  }
  .live-paper h2 {
    font-size: 29px;
  }
  .report-top {
    grid-template-columns: 1fr 1fr;
  }
  .score-card {
    flex-direction: column;
    align-items: start;
    padding: 25px;
  }
  .interview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .listing-layout {
    grid-template-columns: 190px 1fr;
    gap: 22px;
  }
  .filters {
    padding: 17px;
  }
  .detail-hero {
    grid-template-columns: 230px 1fr;
    gap: 30px;
    padding: 30px;
  }
  .detail-poster {
    padding: 24px;
  }
  .detail-poster h2 {
    font-size: 37px;
  }
  .detail-copy h1 {
    font-size: 34px;
  }
  .page-title h1 {
    font-size: 31px;
  }
  .page-title {
    flex-wrap: wrap;
  }
  .template-catalog .template-preview {
    height: 300px;
    padding: 20px;
  }
  .session-layout {
    gap: 20px;
  }
  .conversation {
    padding: 32px;
  }
  .conversation h1 {
    font-size: 27px;
  }
  .answer-panel {
    padding: 23px;
  }
  .answer-actions {
    flex-wrap: wrap;
  }
  .price-card {
    padding: 25px;
  }
  .plan-feature {
    font-size: 12px !important;
  }
  .next-step {
    flex-wrap: wrap;
  }
  .next-step > div {
    min-width: 220px;
  }
  .split-layout {
    gap: 25px;
  }
  .resume-intro {
    padding: 25px;
  }
  .angled-paper {
    max-width: 90%;
  }
}
@media (max-width: 760px) {
  .studio-shell {
    padding: 18px 20px 45px;
  }
  .demo-note {
    font-size: 11px;
    line-height: 1.6;
    align-items: start;
    padding: 10px;
  }
  .demo-note svg {
    margin-top: 2px;
  }
  .breadcrumb {
    font-size: 12px;
  }
  .page-title {
    margin: 26px 0 23px;
    gap: 18px;
    align-items: start;
  }
  .page-title h1 {
    font-size: 31px;
    line-height: 1.2;
    letter-spacing: -1.1px;
  }
  .page-title p {
    font-size: 14px;
  }
  .page-title .eyebrow {
    font-size: 9px;
  }
  .steps {
    gap: 13px;
    overflow-x: auto;
    margin-bottom: 25px;
    padding-bottom: 18px;
  }
  .steps li {
    font-size: 12px;
    gap: 7px;
    white-space: nowrap;
  }
  .steps li > svg {
    margin-left: 0;
    width: 11px;
  }
  .steps li > span {
    width: 22px;
    height: 22px;
  }
  .split-layout,
  .editor-layout,
  .export-layout,
  .checkout-layout,
  .report-top,
  .comparison {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .panel {
    padding: 23px;
  }
  .upload-zone {
    padding: 28px 15px;
  }
  .upload-zone h3 {
    font-size: 19px;
  }
  .stack-actions {
    flex-direction: column;
  }
  .stack-actions button {
    width: 100%;
  }
  .resume-intro {
    padding: 25px;
    display: none;
  }
  .explain-panel {
    padding: 25px;
  }
  .explain-panel h2 {
    font-size: 29px;
  }
  .explain-panel .score-ring {
    display: none;
  }
  .explain-panel h2 br {
    display: none;
  }
  .explain-panel > small {
    margin-top: 17px;
  }
  .field {
    margin: 18px 0;
    font-size: 14px;
  }
  .field input,
  .field textarea,
  .field select {
    font-size: 16px;
  }
  .two-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .two-fields .field:first-child {
    margin-bottom: 0;
  }
  .editor-panel {
    padding: 20px;
  }
  .editor-preview {
    padding: 18px 15px;
  }
  .live-paper {
    padding: 28px 23px;
    min-height: 560px;
  }
  .live-paper h2 {
    font-size: 30px;
  }
  .live-paper .contact {
    font-size: 10px;
  }
  .live-paper section p {
    font-size: 11px;
  }
  .live-paper h4 {
    font-size: 11px;
  }
  .preview-bar {
    font-size: 9px;
  }
  .page-title .inline-actions {
    width: 100%;
    justify-content: space-between;
  }
  .save-status {
    font-size: 11px;
  }
  .export-options > .text-action {
    font-size: 14px;
  }
  .template-catalog .template-preview {
    height: 250px;
    padding: 15px 20px 0;
  }
  .filter-chips {
    gap: 8px;
  }
  .filter-chips button,
  .keyword {
    padding: 9px 14px;
    font-size: 13px;
  }
  .score-card {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 23px;
  }
  .score-ring {
    width: 110px;
    height: 110px;
  }
  .score-ring strong {
    font-size: 34px;
  }
  .score-card h2 {
    font-size: 21px;
    margin: 11px 0 8px;
  }
  .score-card p {
    font-size: 12px;
  }
  .score-card .fine-print {
    font-size: 10px !important;
  }
  .score-card .status-pill {
    font-size: 9px;
  }
  .report-tabs {
    max-width: 100%;
    overflow-x: auto;
  }
  .issue {
    padding: 20px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .issue > div {
    min-width: calc(100% - 60px);
  }
  .issue h3 {
    font-size: 16px;
  }
  .issue p {
    font-size: 13px;
  }
  .issue .secondary {
    margin-left: 50px;
  }
  .issue-number {
    width: 35px;
    height: 35px;
  }
  .next-step {
    padding: 23px;
    gap: 14px;
  }
  .next-step > div {
    flex-basis: 100%;
    margin-bottom: 4px;
  }
  .next-step h3 {
    font-size: 21px;
  }
  .next-step p {
    font-size: 13px;
  }
  .next-step button {
    flex: 1;
    font-size: 12px;
    padding: 12px;
  }
  .match-banner {
    gap: 22px;
    padding: 25px;
    flex-wrap: wrap;
  }
  .match-banner p {
    margin: 0;
    flex-basis: 100%;
  }
  .match-banner b {
    font-size: 39px;
  }
  .comparison p {
    font-size: 15px;
  }
  .listing-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
  }
  .filters h3,
  .filters > p,
  .filter-tip {
    display: none;
  }
  .filters > button {
    width: auto;
    padding: 8px 13px;
    border: 1px solid #e3d6ec;
    border-radius: 25px;
    margin: 0;
    font-size: 13px;
    min-height: 40px;
  }
  .filters button > span {
    display: none;
  }
  .filters > button.selected {
    border-color: #d53c70;
    background: #d53c70;
    color: white;
  }
  .listing-search {
    padding: 12px;
    margin-bottom: 20px;
  }
  .listing-search input {
    font-size: 16px;
  }
  .listing-search span {
    font-size: 11px;
  }
  .interview-grid {
    gap: 16px;
  }
  .interview-poster {
    min-height: 230px;
    padding: 17px;
  }
  .interview-poster > span {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .poster-symbol {
    padding: 23px 0 12px;
  }
  .poster-symbol svg {
    width: 36px;
    height: 36px;
  }
  .interview-poster h2 {
    font-size: 27px;
    margin: 7px 0 18px;
  }
  .interview-poster > div:last-child {
    font-size: 6px;
    letter-spacing: 0.4px;
    gap: 4px;
  }
  .interview-poster > div:last-child svg {
    width: 16px;
  }
  .interview-meta h3 {
    font-size: 15px;
    line-height: 1.4;
  }
  .interview-meta p {
    font-size: 12px;
    margin: 7px 0 12px;
  }
  .interview-meta > span {
    font-size: 10px;
    gap: 4px;
  }
  .interview-meta b {
    display: block;
    margin: 5px 0 0;
    width: 100%;
  }
  .detail-hero {
    grid-template-columns: 1fr;
    padding: 25px;
    gap: 15px;
  }
  .detail-poster {
    min-height: 200px;
    padding: 22px;
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 15px;
  }
  .detail-poster svg {
    width: 45px;
  }
  .detail-poster > span {
    font-size: 8px;
  }
  .detail-poster h2 {
    font-size: 38px;
    grid-column: 1/-1;
    max-width: 250px;
    margin: 10px 0;
  }
  .detail-copy {
    padding: 15px 0 0;
  }
  .detail-copy h1 {
    font-size: 33px;
  }
  .detail-copy > p {
    font-size: 14px;
  }
  .detail-tags {
    gap: 7px;
    flex-wrap: wrap;
  }
  .detail-tags span {
    font-size: 11px;
    padding: 8px;
  }
  .detail-callout {
    padding: 15px;
    align-items: start;
  }
  .detail-callout p {
    line-height: 1.7;
  }
  .detail-copy > .primary {
    width: 100%;
  }
  .detail-about {
    margin-top: 25px;
  }
  .detail-about > h2 {
    font-size: 23px;
  }
  .detail-about > p {
    font-size: 14px;
  }
  .three-columns {
    grid-template-columns: 1fr;
    gap: 17px;
    margin: 25px 0;
  }
  .three-columns > div {
    padding: 15px 0;
  }
  .three-columns h3 {
    margin: 10px 0;
  }
  .answer-method {
    padding: 16px;
    gap: 12px;
  }
  .answer-method small {
    font-size: 12px;
  }
  .ready-panel {
    padding: 28px 23px;
    margin: 15px auto;
  }
  .ready-panel h2 {
    font-size: 23px;
  }
  .ready-panel > p {
    font-size: 13px;
  }
  .ready-checks p {
    font-size: 13px;
  }
  .consent {
    font-size: 13px;
  }
  .ready-panel > .primary {
    width: 100%;
  }
  .session-top {
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
  }
  .session-top > span:first-child {
    font-size: 9px;
  }
  .session-top > span:nth-child(2) {
    margin-left: auto;
  }
  .session-top button {
    margin-left: auto;
    font-size: 11px;
  }
  .session-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .conversation {
    padding: 28px 22px;
    min-height: 370px;
  }
  .session-orb {
    width: 77px;
    height: 77px;
    margin-bottom: 20px;
  }
  .session-orb svg {
    width: 36px;
  }
  .conversation .eyebrow {
    font-size: 9px;
  }
  .conversation h1 {
    font-size: 25px;
    line-height: 1.45;
    margin: 20px 0 15px;
  }
  .conversation > p {
    font-size: 12px;
  }
  .question-progress {
    padding-top: 26px;
  }
  .answer-panel {
    padding: 21px;
  }
  .answer-panel textarea {
    min-height: 220px;
    font-size: 16px;
  }
  .answer-panel .red-link {
    max-width: none;
    font-size: 13px;
  }
  .answer-actions {
    flex-wrap: nowrap;
  }
  .answer-actions .primary {
    flex: 1;
  }
  .interview-summary {
    gap: 20px;
    padding: 25px;
    align-items: start;
    flex-wrap: wrap;
  }
  .interview-summary > div:last-child {
    flex: 1;
    min-width: 180px;
  }
  .interview-summary h2 {
    font-size: 25px;
    line-height: 1.3;
  }
  .interview-summary p {
    font-size: 14px;
  }
  .feedback-cards {
    grid-template-columns: 1fr;
  }
  .feedback-cards section {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
  }
  .feedback-cards h2 {
    margin: 0;
    font-size: 29px;
  }
  .feedback-cards [data-slot='progress'] {
    grid-column: 1/-1;
    margin: 0;
  }
  .feedback-cards p {
    grid-column: 1/-1;
    margin: 0;
    font-size: 13px;
  }
  blockquote {
    font-size: 18px;
    padding: 18px;
  }
  .workspace-stats {
    gap: 10px;
  }
  .workspace-stats > div {
    padding: 16px 12px;
    gap: 12px;
    align-items: start;
    flex-direction: column;
  }
  .workspace-stats > div > svg {
    width: 20px;
  }
  .workspace-stats span {
    font-size: 11px;
  }
  .workspace-stats b {
    font-size: 25px;
    margin-top: 8px;
  }
  .workspace-item {
    gap: 14px;
    flex-wrap: wrap;
    padding: 20px;
  }
  .file-tile {
    padding: 15px;
  }
  .workspace-item h3 {
    font-size: 16px;
  }
  .workspace-item p {
    font-size: 12px;
    line-height: 1.5;
  }
  .workspace-item > .secondary {
    margin-left: 0;
    font-size: 13px;
    flex: 1;
  }
  .workspace-item > div:nth-child(2) {
    min-width: 60%;
  }
  .empty-state {
    padding: 45px 22px;
  }
  .empty-state h2 {
    font-size: 23px;
    line-height: 1.3;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 35px;
  }
  .price-card {
    padding: 30px;
  }
  .price-card h2 {
    font-size: 25px;
  }
  .price-card > p {
    font-size: 15px;
  }
  .price {
    margin: 25px 0;
    font-size: 42px;
  }
  .plan-feature {
    font-size: 14px !important;
  }
  .checkout-layout {
    gap: 20px;
  }
  .checkout-layout .order-summary {
    order: -1;
  }
  .order-summary > div {
    margin: 5px 0;
    padding: 17px 0;
  }
  .order-summary > p {
    margin: 15px 0;
  }
  .order-summary .total {
    padding-top: 18px;
  }
  .success-page {
    margin: 35px auto;
  }
  .success-page h1 {
    font-size: 36px;
    letter-spacing: -1.1px;
  }
  .success-page .inline-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .success-next {
    padding: 25px 20px;
  }
  .success-next h3 {
    font-size: 22px;
    line-height: 1.3;
  }
  .success-next .red-link {
    max-width: none;
    font-size: 14px;
  }
  .employer-job {
    flex-wrap: wrap;
  }
  .employer-job > .secondary {
    width: 100%;
  }
  .candidate-list {
    padding: 0 17px;
  }
  .candidate-row {
    gap: 12px;
    flex-wrap: wrap;
  }
  .candidate-score {
    margin-right: 0;
    font-size: 21px;
  }
  .candidate-row > .secondary {
    margin-left: 56px;
    padding: 10px 15px;
    font-size: 12px;
  }
  .candidate-row > div {
    min-width: 150px;
  }
  .candidate-row h3 {
    font-size: 15px;
  }
  .hq-dialog {
    padding: 28px 23px !important;
  }
  .hq-dialog [data-slot='dialog-title'] {
    font-size: 24px;
    line-height: 1.3;
  }
  .toast {
    bottom: 17px;
    font-size: 13px;
    padding: 12px 16px;
  }
  .print-controls {
    flex-wrap: wrap;
  }
  .print-resume .live-paper {
    min-height: 560px;
  }
  .section-heading .red-link {
    font-size: 12px;
  }
  .home-shell .tool-card p {
    font-size: 13px;
  }
  .home-shell .tool-bottom {
    font-size: 12px;
  }
  .template-preview .resume-paper {
    min-width: 0;
  }
  button,
  a.primary,
  a.secondary,
  .signin {
    min-height: 40px;
  }
  .hero .primary {
    min-height: 44px;
  }
}
@media (max-width: 380px) {
  header.header {
    padding: 0 15px;
    gap: 13px;
  }
  .logo {
    font-size: 22px;
  }
  .logo-dot {
    font-size: 29px;
  }
  .signin {
    padding: 9px 14px;
  }
  .home-shell,
  .studio-shell {
    padding-left: 15px;
    padding-right: 15px;
  }
  .hero-copy {
    padding: 26px 20px 17px;
  }
  .hero h1 {
    font-size: 35px;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 15px;
  }
  .hero-preview {
    min-height: 250px;
  }
  .hero-paper {
    left: 38%;
    width: 179px;
  }
  .interview-float {
    right: 6%;
    padding: 15px;
  }
  .score-float {
    left: 5%;
  }
  .tool-card h3 {
    font-size: 20px;
  }
  .tool-card {
    padding: 17px 13px 0;
  }
  .tool-icon {
    padding: 7px;
  }
  .tool-top {
    margin-bottom: 17px;
  }
  .tool-bottom {
    font-size: 11px !important;
    gap: 5px;
  }
  .tool-kind {
    font-size: 7px;
  }
  .interview-poster {
    min-height: 235px;
    padding: 15px;
  }
  .interview-poster h2 {
    font-size: 25px;
  }
  .panel {
    padding: 20px;
  }
  .score-card {
    flex-wrap: wrap;
  }
  .score-card > div:last-child {
    flex: 1;
    min-width: 145px;
  }
  .template-catalog .template-preview {
    padding: 12px;
    height: 215px;
  }
  .template-preview {
    padding: 12px;
    height: 200px;
  }
  .page-title h1 {
    font-size: 29px;
  }
  .answer-actions {
    flex-wrap: wrap;
  }
  .answer-actions .secondary,
  .answer-actions .primary {
    flex: 1;
  }
  .candidate-row > div {
    min-width: 130px;
  }
}
@media print {
  header.header,
  .nav,
  footer,
  .breadcrumb,
  .demo-note,
  .print-controls,
  .toast {
    display: none !important;
  }
  .studio-shell {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .print-resume {
    margin: 0 !important;
    max-width: none !important;
  }
  .live-paper {
    box-shadow: none !important;
    padding: 12mm !important;
    min-height: 0 !important;
  }
  .live-paper section {
    break-inside: avoid;
  }
  .live-paper section p {
    font-size: 11pt !important;
  }
  .live-paper .contact {
    font-size: 9pt !important;
  }
  body {
    background: white !important;
  }
  @page {
    size: A4;
    margin: 10mm;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* A confident coral-and-midnight palette with clear interactive feedback. */
:root {
  --primary: #ed3155;
  --foreground: #20263b;
  --border: #e1e5ed;
}
.primary,
.signin {
  background: #ed3155;
  box-shadow: 0 3px 0 #c71e4110;
}
.primary:hover,
.signin:hover {
  background: #cb1840;
  box-shadow: 0 7px 18px #ed315530;
  transform: translateY(-2px);
}
.primary:active,
.secondary:active {
  transform: translateY(1px);
  box-shadow: none;
}
.secondary {
  border-color: #d1d8e4;
  color: #35435c;
}
.secondary:hover {
  border-color: #ed3155;
  color: #cb1840;
  background: #fff2f5;
}
.hero {
  background: linear-gradient(112deg, #17223c 5%, #243855 70%, #3e3757);
  color: white;
}
.hero .eyebrow {
  color: #f8abbc;
}
.hero h1 em {
  color: #ffa2ba;
}
.hero-copy > p {
  color: #d0d8e4;
}
.hero-bottom {
  color: #aebdd1;
}
.hero .text-action {
  color: #f0e8ef;
}
.hero .text-action:hover {
  color: #ffb0c5;
}
.hero-preview {
  background: radial-gradient(ellipse at 60% 45%, #7385a54d, transparent 70%);
}
.hero-caption {
  color: #bac1d4;
}
.hero .score-float {
  color: #24354a;
  box-shadow: 0 15px 35px #00000030;
}
.hero .interview-float {
  background: #ec3b62;
  color: #fff;
  box-shadow: 0 12px 30px #00000030;
}
.hero .interview-float small {
  color: #ffe0e8;
}
.hero .interview-float .wave {
  color: #fff;
}
.pink {
  background: #ffe2eb;
  border-color: #f8bdce;
}
.ink {
  background: #27395b;
  border-color: #27395b;
}
.mint {
  background: #d9f1eb;
  border-color: #b5dcd0;
}
.sand {
  background: #fff0ce;
  border-color: #ecd49e;
}
.tool-card p {
  color: #625366;
  font-size: 14px;
}
.tool-card.ink p {
  color: #d1dbea;
}
.tool-card.ink .tool-kind {
  color: #ffb9cd;
}
.tool-card.ink .tool-icon {
  border-color: #71829e;
  color: #ffc5d6;
}
.tool-card h3 {
  color: #293146;
}
.tool-card.ink h3 {
  color: #fff;
}
.tool-bottom {
  font-size: 14px;
}
.tool-kind {
  color: #ab345a;
}
.tool-card:hover {
  box-shadow: 0 12px 25px #27395b19;
  border-color: #df5779;
  transform: translateY(-6px);
}
.tool-card:hover .tool-top > svg {
  opacity: 1;
  transform: translate(2px, -2px);
}
.practice-band {
  background: #162740;
}
.practice-band .eyebrow {
  color: #ff9fba;
}
.role-preview > div {
  color: #ffb3c9;
}
.role-preview a {
  color: #ffd3e0;
}
.role-preview a:hover {
  color: #fff;
}
.nav a {
  position: relative;
}
.nav a:hover {
  color: #d1254e;
}
.nav a.active {
  color: #d1254e;
}
.nav a.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #ed3155;
  left: 0;
  right: 0;
}
.nav a.active {
  border-bottom: 0;
}
.logo-dot {
  color: #ed3155;
}
.demo-note {
  background: #f1f5fb;
  border-color: #e0e7f1;
  color: #607088;
}
.page-title p,
.panel > p,
.issue p,
.next-step p,
.workspace-item p,
.interview-meta p,
.three-columns p,
.explain-panel > p,
.explain-row span:not(.number-chip),
.success-page > p,
.price-card > p {
  color: #68758a;
}
.explain-panel,
.next-step,
.resume-intro {
  background: #f0f5fa;
}
.explain-panel h2 {
  color: #233853;
}
.explain-panel .small-ring:before {
  background: #f0f5fa;
}
.soft-note {
  background: #f0f5fa;
  color: #516b89;
}
.ready-orb,
.session-orb {
  background: radial-gradient(circle at 30% 25%, #72a2d0, #335784 60%, #192b4c);
}
.conversation,
.detail-hero {
  background: #192b47;
}
.conversation .eyebrow {
  color: #e59eb5;
}
.conversation > p {
  color: #b7c8de;
}
.detail-copy > p {
  color: #c5d0e0;
}
.detail-callout p {
  color: #b6c7dc;
}
.detail-copy > small {
  color: #b3c3d9;
}
.answer-panel textarea::placeholder {
  color: #8291a7;
}
.field {
  color: #465775;
}
.score-card p,
.interview-summary p {
  color: #63758e;
}
.interview-summary {
  background: #f0f5fc;
  border-color: #dce6f4;
}
.score-card {
  background: #f8faff;
  border-color: #dce4ef;
}
.explain-row b,
.explain-row p {
  color: #3a4e6b;
}
.explain-row svg {
  color: #348770;
}
.fine-print {
  color: #6d7c92 !important;
}
.status-pill {
  color: #277452;
}
.issue-tag {
  color: #b62c51;
}
.filter-chips button.selected {
  background: #ed3155;
  border-color: #ed3155;
}
.filter-chips button:hover {
  border-color: #ed3155;
  color: #bf2749;
  background: #fff0f4;
}
.filter-chips button.selected:hover {
  background: #cb1840;
  color: white;
}
.interview-poster.rose {
  background: #f6c8d8;
  color: #702540;
}
.interview-poster.blue {
  background: #cfdef4;
  color: #244a82;
}
.interview-poster.violet {
  background: #dbd1f1;
  color: #50347f;
}
.interview-poster.teal {
  background: #c2e8dc;
  color: #1c6755;
}
.interview-poster.gold {
  background: #f9e4ae;
  color: #755212;
}
.interview-poster.orange {
  background: #f5cdbd;
  color: #8c3a25;
}
.interview-card:hover .interview-poster {
  box-shadow: 0 10px 22px #1a2b471b;
}
.interview-meta > span {
  color: #63718a;
}
.interview-meta b {
  color: #b72952;
}
.filters > button {
  color: #63718a;
}
.filters > button.selected {
  background: #ffe9ef;
  color: #ba264d;
}
.empty-state p,
.checkout-layout p,
.ready-panel > p,
.ready-checks p,
.consent {
  color: #63738b;
}
.account-sheet [data-slot='sheet-description'],
.hq-dialog [data-slot='dialog-description'] {
  color: #63758e;
}
.account-row {
  color: #405878;
}
.account-row:hover {
  color: #d02b54;
  background: #fff6f8;
}
.account-foot {
  background: #edf3fc;
  color: #29496e;
}
.account-foot em {
  color: #cb325d;
}
.order-summary > div {
  color: #3d587c;
}
.order-summary small {
  color: #657b97;
}
.candidate-row p {
  color: #6f819b;
}
.candidate-score {
  color: #3c607f;
}
.candidate-score small {
  color: #71839b;
}
.price-card.featured {
  background: #fff6f9;
  border-color: #ed3155;
}
.popular {
  background: #ed3155;
}
.toast {
  background: #20344f;
}
.secondary,
.primary {
  min-height: 44px;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #ef6e8d;
  outline-offset: 4px;
}
.searchbox:focus-within {
  border-color: #ed3155;
}
.mobile-nav,
.mobile-search,
.mobile-editor-switch {
  display: none;
}
.search-results {
  display: grid;
  gap: 5px;
}
.search-results > a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 10px;
  border-bottom: 1px solid #e6ebf2;
  font-size: 14px;
}
.search-results > a > svg:last-child {
  margin-left: auto;
}
.search-results > a:hover {
  background: #fff0f4;
  border-radius: 5px;
}
.search-dialog .listing-search {
  margin: 0;
}
.field [data-slot='select-trigger'] {
  width: 100%;
  height: 46px;
  padding: 12px;
  border-color: #d4dce8;
  border-radius: 6px;
}
.section-heading p {
  color: #6b7485;
}
.home-shell .muted {
  color: #6b7485;
}
.tool-card .tool-icon {
  border-color: #b2a5b7;
}
.tool-kind {
  font-size: 10px;
}
.home-shell .tool-section .section-heading {
  align-items: end;
}
.hero .hero-bottom {
  font-size: 12px;
}
.template-card span {
  font-size: 13px;
  color: #68758a;
}
.role-preview > span {
  font-size: 12px;
  color: #b8c7dc;
}
.role-preview p {
  color: #c2cddc;
}
.tool-card .tool-bottom > svg {
  transition: transform 0.2s;
}
.tool-card:hover .tool-bottom > svg {
  transform: translateX(4px);
}
@media (max-width: 760px) {
  body {
    padding-bottom: 76px;
  }
  .header.header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 30;
    border-bottom: 1px solid #ebedf2;
    height: 66px;
    gap: 12px;
  }
  .mobile-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border: 0;
    background: none;
    margin-left: auto;
    color: #576780;
  }
  .signin {
    margin-left: 0;
    padding: 9px 12px;
    font-size: 12px;
    min-height: 36px;
  }
  .header > a:last-child {
    display: flex;
    padding: 4px;
  }
  .nav {
    background: #f7f9fc;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar {
    display: none;
  }
  .nav a {
    height: 43px;
  }
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: #fffffff5;
    backdrop-filter: blur(12px);
    border-top: 1px solid #e0e6ef;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 9px 10px max(10px, env(safe-area-inset-bottom));
    gap: 5px;
  }
  .mobile-nav > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 3px;
    border-radius: 8px;
    font-size: 10px;
    color: #7d8aa0;
  }
  .mobile-nav > a.selected {
    background: #fff0f4;
    color: #d52c54;
  }
  .mobile-nav > a:hover {
    background: #f3f6fb;
    color: #d52c54;
  }
  .hero-copy {
    padding: 30px 25px 20px;
  }
  .hero {
    border-radius: 12px;
  }
  .hero h1 {
    font-size: 39px;
    line-height: 1.14;
  }
  .hero .hero-bottom {
    font-size: 11px;
    line-height: 1.5;
    align-items: start;
  }
  .hero-bottom svg {
    margin-top: 1px;
  }
  .hero-preview {
    min-height: 265px;
  }
  .hero-paper {
    top: 7px;
  }
  .hero .interview-float {
    bottom: 28px;
  }
  .hero-caption {
    display: none;
  }
  .home-shell .tool-card p {
    font-size: 14px;
    line-height: 1.6;
    min-height: 65px;
  }
  .home-shell .tool-bottom {
    font-size: 12px;
    gap: 8px;
  }
  .home-shell .tool-card h3 {
    font-size: 22px;
    line-height: 1.3;
  }
  .home-shell .tool-kind {
    font-size: 9px;
    line-height: 1.4;
    display: block;
    min-height: 24px;
  }
  .tool-card {
    padding-left: 16px;
    padding-right: 16px;
  }
  .tool-bottom {
    margin-top: 14px;
  }
  .tool-icon {
    padding: 9px;
  }
  .tool-top {
    margin-bottom: 22px;
  }
  .template-card span {
    font-size: 12px;
    line-height: 1.5;
  }
  .template-preview {
    height: 240px;
  }
  .mobile-editor-switch {
    display: block;
    position: sticky;
    top: 66px;
    z-index: 20;
    background: white;
    padding: 12px 0;
    margin: 0 0 15px;
  }
  .mobile-editor-switch [data-slot='tabs-list'] {
    display: flex;
    width: 100%;
    height: 44px;
    background: #f0f4f9;
    border: 1px solid #dde5ef;
    padding: 4px;
  }
  .mobile-editor-switch [data-slot='tabs-trigger'] {
    height: 34px;
    font-size: 14px;
  }
  .mobile-editor-switch [data-active] {
    background: #fff;
    color: #d12c54;
    box-shadow: 0 2px 6px #26385010;
  }
  .editor-layout.mobile-content .editor-preview {
    display: none;
  }
  .editor-layout.mobile-preview .editor-panel {
    display: none;
  }
  .toast {
    bottom: 87px;
  }
  .field [data-slot='select-trigger'] {
    font-size: 16px;
  }
  .report-tabs [data-slot='tabs-trigger'] {
    padding: 10px 12px;
    min-height: 42px;
  }
  .report-tabs {
    height: auto;
    padding: 4px;
  }
  .filter-chips {
    gap: 9px;
  }
  .filters > button {
    min-height: 44px;
    color: #526b89;
  }
  .filters > button.selected {
    background: #ed3155;
    color: white;
  }
  .account-foot {
    font-size: 25px;
  }
  .account-sheet {
    padding-bottom: 90px !important;
  }
  .section-heading p {
    font-size: 14px;
  }
  .home-shell .practice-band > div > p {
    font-size: 14px;
  }
  .role-preview > span {
    font-size: 13px;
  }
  .role-preview a {
    font-size: 14px;
  }
  .hero .text-action {
    font-size: 13px;
  }
  .hero-actions {
    gap: 18px;
    flex-wrap: wrap;
  }
  .hero .primary {
    font-size: 14px;
  }
  .template-grid {
    gap: 15px;
  }
  .studio-shell .explain-panel > small {
    color: #65788f;
  }
  .room-shell .demo-note {
    display: none;
  }
}
@media (max-width: 380px) {
  header.header {
    gap: 8px;
    padding: 0 14px;
  }
  .header .logo {
    font-size: 22px;
  }
  .header .logo-dot {
    font-size: 27px;
  }
  .mobile-search {
    width: 30px;
  }
  .signin {
    padding: 8px 10px;
  }
  .hero-copy {
    padding: 27px 20px 20px;
  }
  .hero h1 {
    font-size: 34px;
    letter-spacing: -1.5px;
  }
  .hero-actions {
    gap: 15px;
  }
  .hero-preview {
    min-height: 245px;
  }
  .home-shell .tool-card h3 {
    font-size: 20px;
  }
  .home-shell .tool-card p {
    font-size: 13px;
  }
  .tool-card {
    padding-left: 13px;
    padding-right: 13px;
  }
  .home-shell .tool-bottom {
    font-size: 11px;
  }
  .hero-paper {
    width: 175px;
  }
  .template-preview {
    height: 215px;
  }
  .template-catalog .template-preview {
    height: 215px;
  }
  .mobile-nav {
    padding-left: 6px;
    padding-right: 6px;
  }
  .mobile-nav a {
    font-size: 9px;
  }
}
@media print {
  body {
    padding: 0 !important;
  }
  .mobile-nav,
  .mobile-editor-switch {
    display: none !important;
  }
}
/* Grid children must be allowed to shrink below their content width. */
.tools-grid,
.template-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tools-grid > *,
.template-grid > *,
.three-columns > *,
.split-layout > *,
.editor-layout > *,
.session-layout > *,
.report-top > *,
.checkout-layout > * {
  min-width: 0;
}
.template-preview .resume-paper {
  width: 100%;
  min-width: 0;
}
.paper-tag {
  overflow-wrap: anywhere;
}
.template-card {
  min-width: 0;
}
.template-card h3 {
  overflow-wrap: anywhere;
}
.hero-actions > .primary {
  white-space: nowrap;
}
.hero-actions {
  flex-wrap: wrap;
}
.hero-copy > p br {
  display: none;
}
@media (min-width: 761px) and (max-width: 1000px) {
  .tools-grid,
  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tool-card {
    padding: 24px 24px 0;
  }
  .tool-card h3 {
    font-size: 27px;
    max-width: 250px;
  }
  .tool-card p {
    font-size: 14px;
    min-height: 45px;
  }
  .tool-top {
    margin-bottom: 23px;
  }
  .tool-kind {
    font-size: 11px;
  }
  .template-preview {
    height: 350px;
    padding: 28px 45px 0;
  }
  .template-preview .resume-paper {
    max-width: 260px;
    margin: auto;
  }
  .template-card span {
    font-size: 14px;
  }
  .practice-band {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .practice-band > div:first-child {
    grid-column: 1/-1;
  }
  .practice-band h2 br {
    display: none;
  }
  .practice-band .light-btn {
    margin-top: 20px;
  }
  .practice-band .role-preview {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid #ffffff20;
    padding-top: 25px;
  }
  .hero-copy {
    padding: 34px 25px;
  }
  .hero h1 {
    font-size: 38px;
  }
  .hero-actions {
    gap: 16px;
  }
  .hero .primary {
    font-size: 14px;
    padding: 13px 17px;
  }
  .hero .text-action {
    font-size: 13px;
  }
  .hero-preview {
    min-height: 450px;
  }
  .hero-paper {
    width: 215px;
    left: 18%;
    top: 37px;
  }
  .score-float {
    left: -15%;
    top: 90px;
    transform: rotate(-4deg) scale(0.85);
  }
  .interview-float {
    right: 3%;
    bottom: 70px;
    transform: rotate(-3deg) scale(0.9);
  }
  .hero-caption {
    left: 10%;
    bottom: 33px;
    white-space: nowrap;
  }
  .editor-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .editor-panel {
    padding: 20px;
  }
  .two-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .editor-preview {
    padding: 17px;
  }
  .live-paper {
    padding: 26px 20px;
  }
  .live-paper h2 {
    font-size: 28px;
  }
  .live-paper section p {
    font-size: 11px;
  }
  .live-paper .contact {
    font-size: 9px;
  }
  .hero .hero-bottom {
    font-size: 11px;
  }
  .pricing-grid {
    gap: 15px;
  }
  .price-card {
    padding: 22px 18px;
  }
  .price-card .primary,
  .price-card .secondary {
    padding: 12px 10px;
    font-size: 12px;
  }
  .price {
    font-size: 35px;
  }
  .popular {
    font-size: 8px;
    padding: 6px 9px;
  }
  .plan-feature {
    line-height: 1.6;
    align-items: start;
  }
  .detail-hero {
    grid-template-columns: 210px 1fr;
  }
  .detail-copy h1 {
    font-size: 33px;
  }
  .detail-tags {
    flex-wrap: wrap;
  }
  .session-layout {
    grid-template-columns: 1fr 1fr;
  }
  .conversation {
    padding: 30px 23px;
  }
  .conversation h1 {
    font-size: 25px;
  }
  .candidate-score {
    margin-right: 10px;
  }
  .candidate-row {
    gap: 15px;
  }
  .candidate-row .secondary {
    font-size: 12px;
    padding: 12px;
  }
  .report-top {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 760px) {
  .tools-grid,
  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .template-preview .resume-paper {
    padding: 18px 14px;
  }
  .template-preview .resume-paper h3 {
    font-size: 17px;
  }
  .template-preview .resume-paper h4 {
    font-size: 5px;
    letter-spacing: 0.6px;
  }
  .template-preview .paper-tag {
    font-size: 4px;
    letter-spacing: 1px;
  }
  .template-preview .paper-contact {
    font-size: 4px;
  }
  .template-preview .resume-paper p {
    font-size: 5px;
  }
  .template-preview .resume-paper b {
    font-size: 6px;
  }
  .template-preview .resume-paper .paper-role {
    font-size: 6px;
  }
  .home-shell .section-heading {
    gap: 15px;
  }
  .section-heading > div {
    min-width: 0;
  }
  .template-section .section-heading h2 {
    font-size: 21px;
  }
  .template-section .red-link {
    flex-shrink: 0;
  }
  .hero-preview .resume-paper h4 {
    font-size: 6px;
  }
  .steps {
    max-width: 100%;
  }
  .hero-preview .hero-paper {
    max-width: 60%;
  }
  .hero .score-float {
    max-width: 78%;
  }
}
@media (max-width: 340px) {
  .tool-card h3 {
    font-size: 18px !important;
    letter-spacing: -0.4px;
  }
  .tool-card p {
    font-size: 12px !important;
  }
  .tool-card .tool-bottom {
    font-size: 10px !important;
  }
  .tool-kind {
    letter-spacing: 0.5px !important;
  }
  .tool-icon {
    padding: 7px;
  }
  .tool-top > svg {
    width: 14px;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero .hero-actions {
    gap: 16px;
  }
  .template-preview {
    padding: 12px !important;
    height: 195px;
  }
  .template-card h3 {
    font-size: 13px;
  }
  .template-card span {
    font-size: 11px;
    max-width: 110px;
  }
  .template-card > div:last-child > svg {
    width: 13px;
  }
  .home-shell .section-heading h2 {
    font-size: 20px;
  }
  .hero .hero-bottom {
    font-size: 10px;
  }
  .interview-float {
    transform: rotate(-3deg) scale(0.85);
    transform-origin: right;
  }
  .ready-panel {
    padding: 23px 18px;
  }
}
.account-sheet {
  overflow-y: auto;
}
.hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.hero-copy {
  min-width: 0;
}
.hero h1 {
  overflow-wrap: normal;
}
.hero-copy > p {
  max-width: 560px;
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero .score-float {
    left: 2%;
    top: 106px;
    transform: rotate(-4deg) scale(0.8);
    transform-origin: left;
  }
  .hero h1 {
    font-size: 35px;
    letter-spacing: -1.7px;
  }
  .hero-copy > p {
    font-size: 14px;
  }
  .hero-caption {
    font-size: 7px;
    letter-spacing: 1px;
  }
}
@media (max-width: 760px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* White-first career studio: navy type, restrained coral, soft color fields. */
:root {
  --background: #ffffff;
  --foreground: #172238;
  --primary: #d82d50;
  --border: #e3e7ef;
  --hq-surface: #f6f8fc;
  --hq-lavender: #eeeafb;
}
header.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #ffffffed;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #e3e7ef;
}
.hero {
  background: radial-gradient(ellipse at 85% 85%, #d9d0fa 0, transparent 52%), radial-gradient(ellipse at 48% 100%, #fce3e9 0, transparent 55%), linear-gradient(120deg, #ffffff, #f2f7ff);
  color: #172238;
  border: 1px solid #e9e8f2;
}
.hero .eyebrow, .hero h1 em { color: #b52950; }
.hero-copy > p, .hero .hero-bottom, .hero-caption { color: #53617a; }
.hero .text-action { color: #263853; }
.hero .text-action:hover { color: #b52950; }
.hero-preview { background: radial-gradient(ellipse, #ffffff90, transparent 70%); }
.hero .score-float { box-shadow: 0 15px 40px #25325516; }
.hero .interview-float { background: #20344f; box-shadow: 0 12px 30px #25325522; }
.hero .interview-float small { color: #dce5f3; }
.signin { background: #172238; }
.home-shell .tool-card { background: #fff; border-color: #e3e7ef; box-shadow: 0 4px 18px #25325506; }
.home-shell .tool-card h3 { color: #172238; }
.home-shell .tool-card p { color: #53617a; }
.home-shell .tool-card .tool-kind { color: #a92b4e; }
.home-shell .tool-card .tool-icon { color: #33476d; border-color: #dce2ef; background: #f2f0fb; }
.home-shell .tool-card .tool-bottom { color: #263853; }
.home-shell .tool-card:hover { border-color: #d899ad; box-shadow: 0 12px 30px #25325512; }

.career-journey { margin: 88px 0; padding: 64px 24px 32px; border-radius: 24px; background: linear-gradient(150deg, #f4f0fc, #edf3fd 65%, #faeef2); }
.journey-heading { text-align: center; margin: 0 auto 56px; max-width: 720px; }
.journey-pill { display: inline-block; padding: 10px 16px; border: 1px solid #ded8ed; border-radius: 30px; background: #ffffffb8; font-size: 12px; letter-spacing: 1.3px; color: #65527d; font-weight: 700; }
.journey-heading h2 { margin: 22px 0 18px; font-size: clamp(32px, 4vw, 54px); letter-spacing: -2px; line-height: 1.1; color: #172238; }
.journey-heading p { font-size: 16px; line-height: 1.6; color: #53617a; }
.journey-stack { position: relative; isolation: isolate; }
.journey-card { position: sticky; top: 104px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: 44px; margin-bottom: 36px; background: #fff; border: 1px solid #e5e5ef; border-radius: 18px; box-shadow: 0 -5px 24px #34415c08, 0 16px 40px #34415c0a; min-height: 500px; }
.journey-card:last-child { margin-bottom: 0; }
.journey-card:focus-within { z-index: 5; }
.journey-step { display: flex; gap: 10px; align-items: center; color: #665181; font-size: 14px; font-weight: 600; }
.journey-number { margin-left: auto; font-size: 12px; letter-spacing: 1px; color: #707a8c; }
.journey-copy h3 { margin: 26px 0 18px; font-size: clamp(28px, 2.7vw, 39px); letter-spacing: -1.4px; line-height: 1.15; color: #172238; }
.journey-copy > p { color: #53617a; font-size: 16px; line-height: 1.7; }
.journey-copy ul { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 12px; }
.journey-copy li { display: flex; align-items: start; gap: 10px; font-size: 14px; line-height: 1.5; color: #354660; }
.journey-copy li svg { color: #28836b; margin-top: 2px; }
.journey-copy .primary { display: inline-flex; }
.journey-visual { min-width: 0; min-height: 370px; position: relative; border-radius: 16px; padding: 46px 24px 24px; display: grid; align-items: center; background: radial-gradient(ellipse at 70% 20%, #dbd4f5, transparent 70%), #f1f5fb; }
.journey-visual-1 { background: linear-gradient(135deg, #e9f7f3, #edf2fb); }
.journey-visual-2 { background: linear-gradient(135deg, #fceef1, #efeafa); }
.journey-visual-3 { background: linear-gradient(135deg, #e5ecfa, #eee9fb); }
.journey-demo { position: absolute; top: 18px; left: 24px; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #65708a; }
.journey-resume { width: min(100%, 240px); height: 320px; overflow: hidden; margin: auto; box-shadow: 0 12px 30px #24304b18; border-radius: 4px; }
.journey-resume .resume-paper { width: 100%; min-height: 340px; }
.journey-result, .journey-interview { border: 1px solid #e0e6ef; background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 10px 30px #2636500c; }
.journey-result-top, .journey-interview-head { display: flex; align-items: center; gap: 10px; color: #33496b; font-size: 14px; font-weight: 600; }
.journey-score { display: flex; align-items: baseline; gap: 7px; margin-top: 20px; }
.journey-score strong { font-size: 62px; line-height: 1; letter-spacing: -3px; color: #1b7961; }
.journey-score > span { color: #65738b; }
.journey-result > p { color: #52637a; font-size: 14px; margin: 12px 0 22px; }
.journey-meter { margin-top: 14px; font-size: 12px; color: #52637a; }
.journey-meter > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.journey-track { height: 6px; background: #edf1f5; border-radius: 5px; overflow: hidden; }
.journey-track span { display: block; height: 100%; border-radius: inherit; background: #609f92; }
.journey-edits { display: grid; gap: 18px; }
.journey-original, .journey-suggested { padding: 24px; border-radius: 12px; background: #ffffffed; border: 1px solid #e7e1ee; box-shadow: 0 8px 20px #26365008; }
.journey-edits span { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 1px; color: #746382; font-weight: 700; }
.journey-edits p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #384963; }
.journey-suggested { border-color: #cdbfe3; }
.journey-suggested small { margin-top: 16px; display: flex; align-items: center; gap: 6px; color: #28755e; font-size: 12px; }
.journey-question-label { display: block; color: #758197; font-size: 10px; letter-spacing: 1.4px; margin-top: 28px; }
.journey-interview h4 { font-size: 22px; line-height: 1.4; color: #243652; margin: 12px 0 22px; }
.journey-answer { padding: 18px; background: #f2f5fb; border-radius: 10px; color: #52637a; font-size: 14px; line-height: 1.6; }
.journey-interview-foot { display: flex; gap: 8px; align-items: center; font-size: 12px; margin-top: 20px; color: #65738b; }
.reveal-visible { animation: journey-enter 450ms ease-out both; }
.reveal-pending { opacity: 0; transform: translateY(16px); }
@keyframes journey-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1000px), (max-height: 660px) {
  .journey-card { position: relative; top: auto; gap: 28px; padding: 30px; }
}
@media (max-width: 760px) {
  .career-journey { margin: 48px 0; padding: 36px 12px 16px; border-radius: 16px; }
  .journey-heading { margin-bottom: 30px; }
  .journey-heading h2 { letter-spacing: -1.3px; }
  .journey-pill { font-size: 10px; letter-spacing: .7px; padding: 9px 12px; }
  .journey-card { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; gap: 28px; margin-bottom: 20px; }
  .journey-copy h3 { font-size: 30px; }
  .journey-step { font-size: 13px; }
  .journey-number { font-size: 10px; }
  .journey-visual { padding: 42px 14px 18px; min-height: 320px; }
  .journey-result, .journey-interview { padding: 18px; }
  .journey-original, .journey-suggested { padding: 18px; }
  .journey-copy .primary { width: 100%; justify-content: center; padding-left: 12px; padding-right: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-card { position: relative; top: auto; }
  .reveal-pending, .reveal-visible { opacity: 1; transform: none; animation: none; }
}
@media print {
  .journey-card { position: static; break-inside: avoid; }
  .reveal-pending { opacity: 1; transform: none; }
}