.client-shell {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
  padding-block: clamp(1.75rem, 5vw, 4.5rem) clamp(4rem, 8vw, 7rem);
}

.client-narrow { max-width: 760px; }
.client-center { text-align: center; }
.client-flow { --flow-line: #c8d5d2; }
.client-page-heading { max-width: 790px; margin: 2rem 0 clamp(2rem, 5vw, 3.5rem); }
.client-page-heading h1,
.account-heading h1,
.request-detail-heading h1,
.client-auth-copy h1,
.client-state-page h1 {
  margin: .3rem 0 .9rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 7vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.client-page-heading-split { display: flex; max-width: none; justify-content: space-between; align-items: end; gap: 2rem; }
.client-kicker { margin: 0 0 .35rem; color: var(--brand-2); font-size: .76rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.client-lede { max-width: 65ch; margin: 0; color: var(--muted); font-size: clamp(1.05rem, 2.3vw, 1.25rem); }
.client-fine-print { color: var(--muted); font-size: .88rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 440px;
  margin: 0 auto;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
}
.flow-steps span { position: relative; display: flex; align-items: center; justify-content: center; gap: .35rem; text-align: center; }
.flow-steps span::before { content: ""; position: absolute; z-index: -1; top: .78rem; left: -50%; width: 100%; border-top: 2px solid var(--flow-line); }
.flow-steps span:first-child::before { content: none; }
.flow-steps b { display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border: 2px solid var(--flow-line); border-radius: 50%; background: var(--paper); color: var(--muted); font-size: .72rem; }
.flow-steps [aria-current="step"] { color: var(--brand); }
.flow-steps [aria-current="step"] b { border-color: var(--brand); background: var(--brand); color: white; }
.flow-steps .is-complete b { border-color: var(--brand-2); background: var(--sage); color: var(--brand); }

.client-alert { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 1.5rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.client-alert strong { display: block; }
.client-alert ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.client-alert-error { display: block; border-color: #d8aaaa; background: #fff5f4; color: #721d1d; }
.client-alert-success { border-color: #9fc4ac; background: #eff8f2; color: #215c36; }
.client-alert-notice { flex-direction: column; border-color: #c2cfc9; background: var(--sage); }

.client-form { display: grid; gap: 1.15rem; }
.confirmed-tier { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.25rem; align-items: center; padding: 1.35rem; border: 2px solid var(--brand); border-radius: var(--radius); background: var(--surface); box-shadow: 0 14px 35px rgba(23, 63, 82, .1); }
.confirmed-tier h2 { margin: .2rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; }
.confirmed-tier p { margin: .25rem 0 0; color: var(--muted); }
.confirmed-tier > strong { font-family: Georgia, "Times New Roman", serif; font-size: 2.2rem; }
.confirmed-tier > a { grid-column: 1 / -1; width: fit-content; margin-top: .35rem; font-weight: 800; }
.tier-choice-group { margin: 0; padding: 0; border: 0; }
.client-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.client-tier-card { position: relative; display: flex; min-height: 315px; flex-direction: column; padding: 1.35rem; overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.client-tier-card:hover { transform: translateY(-3px); border-color: #94adaf; }
.client-tier-card.is-unavailable { cursor: not-allowed; background: #f8f6f2; }
.client-tier-card.is-unavailable:hover { transform: none; border-color: var(--line); }
.client-tier-card.is-unavailable input { cursor: not-allowed; }
.client-tier-card.is-unavailable > input,
.client-tier-card.is-unavailable > .tier-number,
.client-tier-card.is-unavailable > strong,
.client-tier-card.is-unavailable > .tier-price,
.client-tier-card.is-unavailable > .tier-description,
.client-tier-card.is-unavailable > .tier-duration { opacity: .62; }
.tier-unavailable-reason { position: absolute; top: 1.2rem; right: 3.2rem; color: #7f211f; font-size: .78rem; font-weight: 900; line-height: 1.2; }
.client-tier-card:has(input:focus-visible) { box-shadow: var(--focus); }
.client-tier-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 14px 35px rgba(23, 63, 82, .14); }
.client-tier-card input { width: 1.25rem; height: 1.25rem; margin: 0 0 1rem auto; accent-color: var(--brand); }
.client-tier-card strong { margin-top: .3rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; }
.tier-number { color: var(--brand-2); font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.tier-price { margin: .3rem 0 .9rem; font-family: Georgia, "Times New Roman", serif; font-size: 2.7rem; line-height: 1; }
.tier-description { flex: 1; color: var(--muted); }
.tier-duration { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .88rem; font-weight: 800; }
.tier-selected { position: absolute; right: 1.1rem; bottom: 1rem; color: transparent; font-size: .8rem; font-weight: 900; }
.client-tier-card:has(input:checked) .tier-selected { color: var(--brand-2); }
.consent-card,
.form-card,
.order-card,
.detail-card,
.response-card,
.download-card,
.video-capture {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface);
  box-shadow: 0 14px 42px rgba(23, 63, 82, .07);
}
.consent-card { display: grid; gap: .9rem; margin-top: 2rem; padding: clamp(1.3rem, 4vw, 2.25rem); }
.consent-card h2,
.form-card h2,
.order-card h2,
.detail-card h2,
.response-card h2,
.download-card h2,
.required-action h2 { margin: .15rem 0 .5rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.13; }
.check-row { display: grid; grid-template-columns: 1.45rem 1fr; gap: .8rem; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fbfaf7; cursor: pointer; }
.check-row:hover { border-color: #9aafb0; }
.check-row input { width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--brand); }
.check-row.has-error { border-color: var(--danger); background: #fff7f6; }

.consent-action { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .35rem; }
.consent-action > span { color: var(--muted); font-size: .88rem; }
.button-wide { width: 100%; }

.recording-flow .client-page-heading { margin-bottom: 1.2rem; }
.recording-notes { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .8rem; }
.recording-notes p { margin: 0; padding: .7rem .8rem; border-left: 3px solid #9dbab6; color: var(--muted); font-size: .86rem; }
.video-capture { padding: clamp(1rem, 3vw, 1.5rem); }
.recorder-stage,
.player-stage { position: relative; display: grid; min-height: min(70vh, 590px); place-items: center; overflow: hidden; border-radius: 18px; background: linear-gradient(145deg, #d5e5e7, #bdd9da); }
.recorder-placeholder,
.player-placeholder { display: grid; max-width: 430px; place-items: center; padding: 2rem; text-align: center; }
.recorder-icon { display: block; width: 90px; height: 70px; border: 6px solid rgba(23,63,82,.55); border-radius: 17px; }
.recorder-icon::after { content: ""; display: block; width: 28px; height: 32px; margin: 13px 0 0 74px; clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%); background: rgba(23,63,82,.55); }
.recorder-submit { margin-top: 1rem; }
.recorder-submit .button { max-width: 430px; margin-inline: auto; }
.recorder-submit .button:disabled { border-color: #c7cecf; background: #c7cecf; color: #657276; box-shadow: none; cursor: not-allowed; opacity: 1; }
.recorder-submit .client-fine-print { margin: -.5rem 0 0; text-align: center; }

.order-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1.35rem; }
.order-card p { margin: .3rem 0 0; color: var(--muted); }
.order-total { white-space: nowrap; font-family: Georgia, "Times New Roman", serif; font-size: 2.15rem; }
.order-total small { font-family: inherit; font-size: .7rem; }
.form-card { padding: clamp(1.25rem, 4vw, 2rem); }
.field-group { display: grid; gap: .4rem; }
.field-group label { font-weight: 850; }
.field-group input,
.field-group select,
.field-group textarea { width: 100%; min-height: 50px; padding: .75rem .9rem; border: 1px solid #9eb0af; border-radius: 12px; background: white; color: var(--ink); }
.field-group input:focus { border-color: var(--brand); }
.field-group.has-error input { border-color: var(--danger); background: #fffafa; }
.field-help,
.field-error { margin: 0; font-size: .86rem; }
.field-help { color: var(--muted); }
.field-error { color: #8b2020; font-weight: 750; }
.secure-note { margin: -.2rem 0 0; color: var(--muted); text-align: center; font-size: .85rem; }

.client-state-page { display: grid; justify-items: center; min-height: 67vh; align-content: center; text-align: center; }
.client-state-page .client-lede { margin-bottom: 1.5rem; }
.client-state-page .form-card { width: 100%; margin-top: 1rem; text-align: left; }
.state-symbol { display: grid; width: 4rem; aspect-ratio: 1; place-items: center; margin-bottom: 1rem; border-radius: 50%; background: #f4d3d0; color: var(--danger); font-size: 1.8rem; font-weight: 900; }
.state-symbol-success { background: var(--sage); color: #21603a; }
.account-finish { margin-top: 1.5rem; }

.client-auth-layout { display: grid; grid-template-columns: 1fr minmax(360px, .72fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; min-height: 70vh; }
.client-auth-copy h1 { max-width: 11ch; }

.account-page { display: grid; gap: 2.3rem; }
.account-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.account-heading h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.account-heading p { margin: 0; color: var(--muted); }
.required-action { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: clamp(1rem, 3vw, 1.5rem); border: 2px solid var(--accent); border-radius: var(--radius); background: #fffaf0; box-shadow: 0 14px 38px rgba(85,61,4,.09); }
.required-action p { margin: .2rem 0 0; color: var(--muted); }
.guide-note { margin: .75rem 0 0; padding: .8rem 1rem; border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0; background: rgba(255,255,255,.72); color: var(--ink); font-style: normal; }
.required-action-icon { display: grid; width: 3.6rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: #f4e1a7; color: #5c4508; font-weight: 900; }
.section-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.section-title-row h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 4vw, 2.6rem); }
.section-title-row span { color: var(--muted); }
.request-list { display: grid; gap: .8rem; }
.request-row { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.request-row-main { display: grid; grid-template-columns: minmax(130px, .7fr) 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; text-decoration: none; }
.request-row-main:hover { background: #fafbf8; }
.request-date { color: var(--muted); font-size: .88rem; }
.status-pill { display: inline-flex; min-height: 30px; align-items: center; padding: .25rem .65rem; border-radius: 999px; background: #e5eceb; color: var(--brand); font-size: .78rem; font-weight: 850; }
.status-response-ready,
.status-awaiting-rating { background: #f4e5b4; color: #654a04; }
.status-awaiting-rephrase { background: #f8d7ce; color: #75291c; }
.status-completed { background: var(--sage); color: #235c36; }
.request-row-meta { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; padding: .75rem 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
.request-row-meta a { margin-left: auto; color: var(--brand); font-weight: 800; }
.empty-state { display: grid; min-height: 340px; place-items: center; align-content: center; padding: 2rem; border: 2px dashed #bbc7c4; border-radius: var(--radius); text-align: center; }
.empty-state h3 { margin: .7rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; }
.empty-state p { max-width: 48ch; color: var(--muted); }
.empty-state-mark { display: grid; width: 4rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--sage); color: var(--brand); }
.account-signout { text-align: center; }
.text-button { min-height: 44px; padding: .4rem .8rem; border: 0; background: transparent; color: var(--brand); text-decoration: underline; cursor: pointer; }

.back-link { display: inline-flex; min-height: 44px; align-items: center; gap: .4rem; font-weight: 800; }
.request-detail-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin: 1.3rem 0 2rem; }
.request-detail-heading h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.status-line { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--brand-2); font-weight: 850; }
.status-dot { width: .65rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(213,169,71,.18); }
.retention-compact { display: grid; max-width: 330px; padding: 1rem; border-radius: 14px; background: var(--sage); }
.retention-compact span { color: var(--muted); font-size: .82rem; }
.request-detail-grid { display: grid; grid-template-columns: 1.5fr .7fr; gap: 1rem; margin: 1rem 0; }
.detail-card { padding: 1.35rem; }
.detail-card p { color: var(--muted); }
.deadline-note { padding: .8rem; border-radius: 12px; background: var(--sage); color: var(--ink) !important; }
.detail-list { display: grid; gap: .75rem; margin: 0; }
.detail-list div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 800; text-align: right; }
.response-card { margin-top: 1rem; padding: clamp(1rem, 3vw, 1.5rem); }
.response-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: .25rem .25rem 1rem; }
.response-heading > span { color: var(--muted); font-size: .85rem; }
.player-stage { min-height: min(70vh, 620px); background: linear-gradient(145deg, #d9d8e2, #c4c6d3); }
.player-placeholder { color: var(--brand); }
.player-icon { position: relative; display: grid; width: 105px; aspect-ratio: 1; place-items: center; border: 6px solid rgba(23,63,82,.5); border-radius: 50%; }
.player-icon::after { content: ""; display: block; width: 0; height: 0; margin-left: .5rem; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 29px solid rgba(23,63,82,.62); }
.rating-card,
.tip-card { margin-top: 1rem; padding: clamp(1rem, 3vw, 1.5rem); border-radius: 17px; background: #f6f7f3; }
.rating-intro h3,
.tip-card h3 { margin: .1rem 0 .3rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; }
.rating-intro p,
.tip-card p { margin: .2rem 0; color: var(--muted); }
.score-field { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.score-field legend { padding: 0 .35rem; font-weight: 850; }
.score-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; }
.score-options label { cursor: pointer; }
.score-options input { position: absolute; opacity: 0; pointer-events: none; }
.score-options span { display: grid; min-height: 48px; place-items: center; border: 1px solid #9aafae; border-radius: 12px; background: white; font-weight: 900; }
.score-options input:checked + span { border-color: var(--brand); background: var(--brand); color: white; }
.score-options input:focus-visible + span { box-shadow: var(--focus); }
.score-scale { display: flex; justify-content: space-between; margin: .35rem 0 0; color: var(--muted); font-size: .76rem; }
.tip-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tip-buttons { display: flex; gap: .5rem; }
.tip-buttons .button { min-width: 76px; }
.download-card { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; margin-top: 1rem; padding: clamp(1.2rem, 4vw, 2rem); }
.download-card p { color: var(--muted); }
.download-actions { display: grid; gap: .65rem; min-width: 230px; }
.download-actions form { margin: 0; }
.direct-download-page { gap: .8rem; }
.download-symbol { background: var(--sage); color: var(--brand); }
.download-progress-card { display: grid; width: 100%; gap: .9rem; margin-block: 1rem; text-align: left; }
.download-progress-card progress { width: 100%; height: .8rem; accent-color: var(--brand-2); }
.download-progress-card progress:not([value]) { opacity: .65; }

@media (max-width: 820px) {
  .client-tier-grid,
  .client-auth-layout,
  .request-detail-grid { grid-template-columns: 1fr; }
  .client-tier-card { min-height: 250px; }
  .client-page-heading-split,
  .account-heading,
  .request-detail-heading { align-items: start; flex-direction: column; }
  .retention-compact { width: 100%; max-width: none; }
  .required-action { grid-template-columns: auto 1fr; }
  .required-action .button { grid-column: 1 / -1; }
  .download-card { grid-template-columns: 1fr; }
  .download-actions { min-width: 0; }
}

@media (max-width: 620px) {
  .client-shell { width: min(100% - 1.15rem, 1120px); padding-top: 1.1rem; }
  .client-page-heading { margin-top: 1.4rem; }
  .flow-steps { font-size: .75rem; }
  .consent-action { align-items: stretch; flex-direction: column; }
  .consent-action .button { width: 100%; }
  .recording-notes { grid-template-columns: 1fr; }
  .order-card,
  .response-heading,
  .tip-card { align-items: stretch; flex-direction: column; }
  .recorder-stage { min-height: 0; aspect-ratio: 9 / 16; }
  .player-stage { min-height: 460px; }
  .request-row-main { grid-template-columns: 1fr auto; }
  .request-date { grid-column: 1 / -1; }
  .request-row-meta { display: grid; }
  .request-row-meta a { margin-left: 0; }
  .tip-buttons { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tip-buttons .button { min-width: 0; padding-inline: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .client-tier-card { transition: none; }
}