/* ==========================================================================
   Transaqo — Production Access
   Page-specific readiness, form, process, and provider-boundary components.
   ========================================================================== */

.production-access-page .breadcrumb {
  display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 20px;
}
.production-access-page .breadcrumb a { color: var(--text-faint); transition: color var(--dur) var(--ease); }
.production-access-page .breadcrumb a:hover { color: var(--brand-blue); }
.production-access-page .breadcrumb__sep { color: var(--line-strong); }
.production-access-page .inner-hero { position: relative; overflow: hidden; background: var(--bg); }
.production-access-page .inner-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 64% at 82% 18%, rgba(92,152,255,0.10), transparent 72%),
    radial-gradient(40% 45% at 4% 92%, rgba(7,194,108,0.07), transparent 72%);
}
.production-access-page .inner-hero__inner {
  position: relative; z-index: 2; display: grid; grid-template-columns: 0.98fr 1.02fr;
  gap: clamp(36px, 5vw, 76px); align-items: center; padding-block: clamp(66px, 8vw, 112px);
}
.production-access-page .inner-hero h1 { font-size: var(--fs-h1); margin-bottom: 20px; text-wrap: balance; }
.production-access-page .inner-hero h1 .grad {
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.production-access-page .inner-hero__sub {
  max-width: 590px; margin-bottom: 30px; color: var(--text-muted);
  font-size: var(--fs-body-lg); text-wrap: pretty;
}
.production-access-page .inner-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero readiness path */
.readiness-visual { padding: 18px; }
.readiness-visual__head { padding: 16px 18px 18px; border-bottom: 1px solid var(--line); }
.readiness-visual__head small { display: block; color: var(--brand-green); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; margin-bottom: 7px; }
.readiness-visual__head strong { display: block; font-family: var(--font-display); font-size: 1.12rem; }
.readiness-visual__flow { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); margin: 18px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); }
.readiness-visual__flow li { position: relative; min-width: 0; padding: 16px 12px; border-right: 1px solid var(--line); background: var(--surface); }
.readiness-visual__flow li:last-child { border-right: 0; }
.readiness-visual__flow li::after { content: ""; position: absolute; top: 24px; right: -5px; width: 9px; height: 9px; border-top: 1px solid var(--brand-blue); border-right: 1px solid var(--brand-blue); transform: rotate(45deg); z-index: 2; background: var(--surface); }
.readiness-visual__flow li:last-child::after { display: none; }
.readiness-visual__flow > li > span { display: block; color: var(--text-faint); font-family: var(--font-mono); font-size: 0.62rem; margin-bottom: 18px; }
.readiness-visual__flow strong { display: block; font-size: 0.78rem; line-height: 1.25; margin-bottom: 5px; }
.readiness-visual__flow small { display: block; color: var(--text-faint); font-size: 0.66rem; line-height: 1.35; }
.readiness-visual__flow .is-origin { background: linear-gradient(145deg, rgba(92,152,255,0.08), var(--surface)); }
.readiness-visual__flow .is-destination { background: linear-gradient(145deg, rgba(7,194,108,0.08), var(--surface)); }
.readiness-visual__flow .is-origin > span { color: var(--brand-blue); }
.readiness-visual__flow .is-destination > span { color: var(--brand-green); }
.readiness-visual__note { margin-top: 18px; color: var(--text-faint); font-family: var(--font-mono); font-size: 0.69rem; line-height: 1.55; }

/* Readiness comparison */
.readiness-layout { display: grid; grid-template-columns: 0.68fr 1.32fr; gap: clamp(48px,7vw,96px); align-items: start; }
.readiness-copy h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.readiness-copy > p { color: var(--text-muted); font-size: var(--fs-body-lg); }
.mode-compare { display: grid; grid-template-columns: 1fr 64px 1fr; align-items: stretch; }
.mode-panel { border: 1px solid var(--line); background: var(--surface); padding: 26px 24px; }
.mode-panel__label { font-family: var(--font-mono); color: var(--brand-blue); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.mode-panel--production .mode-panel__label { color: var(--brand-green); }
.mode-panel h3 { font-size: 1.24rem; margin: 15px 0 17px; }
.mode-panel ul { display: flex; flex-direction: column; gap: 10px; }
.mode-panel li { position: relative; padding-left: 16px; color: var(--text-muted); font-size: 0.9rem; }
.mode-panel li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-blue); }
.mode-panel--production li::before { background: var(--brand-green); }
.mode-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-faint); }
.mode-gate::before, .mode-gate::after { content: ""; width: 1px; flex: 1; min-height: 30px; background: linear-gradient(var(--line), var(--brand-blue), var(--line)); }
.mode-gate span { margin-block: 10px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* Form refinements */
.production-form-layout { grid-template-columns: 0.57fr 1.43fr; }
.production-form .form-section { scroll-margin-top: 100px; }
.secure-submission-note { margin-top: 30px; padding: 18px 0 0; border-top: 1px solid var(--line-strong); }
.secure-submission-note strong { display: block; color: var(--brand-green); font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 7px; }
.secure-submission-note p { color: var(--text-faint); font-size: 0.82rem; }
.provider-group-help { margin-bottom: 16px; }
.provider-fieldset[aria-invalid="true"] { border-top-color: rgba(255,116,116,0.58); }
.provider-group-error { margin-top: 8px; }
.secure-inline { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 16px; padding: 14px 16px; border-left: 2px solid var(--brand-green); background: rgba(7,194,108,0.05); }
.secure-inline strong { color: var(--brand-green); font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; }
.secure-inline span { color: var(--text-muted); font-size: 0.8rem; }
.deployment-context { min-height: 50px; display: flex; flex-direction: column; justify-content: center; padding: 0 2px; }
.deployment-context > span { color: var(--text-faint); font-size: 0.78rem; margin-bottom: 3px; }
.deployment-context .textlink { font-size: 0.88rem; }
.specialist-help { margin: -8px 0 18px; }

/* Information map */
.information-map { counter-reset: info; border-top: 1px solid var(--line-strong); display: grid; grid-template-columns: 1fr 1fr; }
.information-map li { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 17px; padding: 25px 24px 25px 0; border-bottom: 1px solid var(--line); }
.information-map li:nth-child(odd) { border-right: 1px solid var(--line); }
.information-map li:nth-child(even) { padding-left: 24px; }
.information-map li > span { color: var(--brand-blue); font-family: var(--font-mono); font-size: 0.68rem; padding-top: 4px; }
.information-map h3 { font-size: 1.08rem; margin-bottom: 7px; }
.information-map p { color: var(--text-muted); font-size: 0.9rem; }

/* Seven-stage process */
.production-process { border-top: 1px solid var(--line-strong); }
.production-process li { display: grid; grid-template-columns: 58px minmax(240px,0.48fr) minmax(0,1fr); gap: 24px; padding: 27px 0; border-bottom: 1px solid var(--line); align-items: start; }
.production-process li > span { color: var(--brand-green); font-family: var(--font-mono); font-size: 0.69rem; padding-top: 4px; }
.production-process h3 { font-size: 1.12rem; }
.production-process p { color: var(--text-muted); }

/* Provider boundary */
.provider-boundary { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(48px,7vw,96px); align-items: start; padding: clamp(30px,4vw,54px); border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(92,152,255,0.05), rgba(7,194,108,0.04)); }
.provider-boundary__copy h2 { font-size: var(--fs-h2); margin-bottom: 18px; }
.provider-boundary__copy > p { color: var(--text-muted); font-size: var(--fs-body-lg); }
.provider-boundary__roles { border-top: 1px solid var(--line-strong); }
.provider-boundary__roles > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.provider-boundary__roles span { color: var(--brand-blue); font-family: var(--font-mono); font-size: 0.69rem; text-transform: uppercase; letter-spacing: 0.07em; }
.provider-boundary__roles > div:nth-child(2) span { color: var(--brand-green); }
.provider-boundary__roles p { color: var(--text-muted); font-size: 0.91rem; }

/* Related preparation */
.related-preparation { display: grid; grid-template-columns: 0.68fr 1.32fr; gap: clamp(44px,7vw,96px); align-items: start; }
.related-preparation h2 { font-size: var(--fs-h2); }
.related-preparation__links { border-top: 1px solid var(--line-strong); }
.related-preparation__links a { display: grid; grid-template-columns: 38px minmax(180px,0.52fr) minmax(0,1fr); gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); transition: background var(--dur) var(--ease), padding var(--dur) var(--ease); }
.related-preparation__links a:hover { background: rgba(255,255,255,0.025); padding-inline: 10px; }
.related-preparation__links span { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.66rem; }
.related-preparation__links strong { font-size: 0.95rem; }
.related-preparation__links small { color: var(--text-muted); font-size: 0.82rem; }

@media (max-width: 1060px) {
  .readiness-visual__flow { grid-template-columns: repeat(3, 1fr); }
  .readiness-visual__flow li:nth-child(3) { border-right: 0; }
  .readiness-visual__flow li:nth-child(3)::after { display: none; }
  .readiness-visual__flow li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .production-form-layout { grid-template-columns: 0.66fr 1.34fr; gap: 50px; }
}

@media (max-width: 940px) {
  .production-access-page .inner-hero__inner { grid-template-columns: 1fr; }
  .production-access-page .inner-hero__media { order: -1; max-width: 760px; width: 100%; margin-inline: auto; }
  .readiness-layout, .production-form-layout, .provider-boundary, .related-preparation { grid-template-columns: 1fr; }
  .production-form-layout .form-intro { position: static; }
  .production-form-layout .form-intro__guide { grid-template-columns: 36px minmax(0,1fr) 36px minmax(0,1fr); }
}

@media (max-width: 760px) {
  .mode-compare { grid-template-columns: 1fr; gap: 12px; }
  .mode-gate { flex-direction: row; min-height: 36px; }
  .mode-gate::before, .mode-gate::after { width: auto; height: 1px; min-height: 0; min-width: 28px; }
  .mode-gate span { writing-mode: horizontal-tb; transform: none; }
  .information-map { grid-template-columns: 1fr; }
  .information-map li, .information-map li:nth-child(even) { padding: 22px 0; border-right: 0; }
  .production-process li { grid-template-columns: 42px minmax(0,1fr); gap: 16px; }
  .production-process p { grid-column: 2; }
  .provider-boundary__roles > div { grid-template-columns: 1fr; gap: 8px; }
  .related-preparation__links a { grid-template-columns: 32px minmax(0,1fr); }
  .related-preparation__links small { grid-column: 2; }
}

@media (max-width: 560px) {
  .production-access-page .inner-hero h1 { font-size: clamp(2.1rem, 8vw, 2.75rem); }
  .production-access-page .inner-hero__cta { flex-direction: column; }
  .production-access-page .inner-hero__cta .btn { width: 100%; }
  .readiness-visual { padding: 12px; }
  .readiness-visual__flow { grid-template-columns: 1fr; }
  .readiness-visual__flow li, .readiness-visual__flow li:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; }
  .readiness-visual__flow li:last-child { border-bottom: 0; }
  .readiness-visual__flow li::after { top: auto; bottom: -5px; left: 23px; right: auto; transform: rotate(135deg); }
  .readiness-visual__flow li:nth-child(3)::after { display: block; }
  .readiness-visual__flow li:last-child::after { display: none; }
  .readiness-visual__flow > li > span { margin: 2px 0 0; }
  .readiness-visual__flow strong { font-size: 0.84rem; }
  .production-form-layout .form-intro__guide { grid-template-columns: 32px minmax(0,1fr); }
  .secure-inline { grid-template-columns: 1fr; gap: 6px; }
  .provider-boundary { padding: 24px 18px; }
}