/* ==========================================================================
   Agency demo — two-pane agency workspace prototype ( /agency-demo/ only )
   Scoped to .agency-demo-page / html.agency-demo-html, so nothing here can
   reach the homepage, the Plan a Pilot page or the Companion embed.
   Type: the site's DM Sans. Surfaces: white. Accent: the site gold.
   The iPhone markup, assets and scale are reused exactly; only its size on
   this page is set here.
   ========================================================================== */

:root {
  --agency-line: #dedbd5;        /* borders                       */
  --agency-muted: #67635d;       /* muted text, 6.3:1 on white    */
  --agency-soft: #f7f6f3;        /* soft secondary background     */
  --agency-ink: #15130f;         /* main text                     */
  --agency-brand: #e6a83d;       /* site gold, demo-overridable   */
  --agency-brand-ink: #1a1305;   /* text on the brand colour      */
  --agency-hinge: 20px;
}

html.agency-demo-html { height: 100%; }

.agency-demo-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;              /* desktop: the panes own all scrolling */
  background: #fff;
  color: var(--agency-ink);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Element defaults use :where() so a single class always wins. */
.agency-demo-page :where(p) { margin: 0 0 12px; font-size: 1rem; }
.agency-demo-page :where(h1, h2, h3) {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.agency-demo-page :where(ul, ol) { margin: 0; padding: 0; }
.agency-demo-page :where(li) { font-size: 1rem; }
.agency-demo-page :where(input, textarea, select, button) { font: inherit; font-size: 1rem; }
.agency-demo-page :where(label, legend, dt, dd, figcaption, blockquote) { font-size: 1rem; }
.agency-demo-page [hidden] { display: none !important; }
.agency-demo-page :focus-visible { outline: 3px solid var(--agency-ink); outline-offset: 2px; }

/* --- Permanent shell: phone on the left, agency content on the right ------ */
.agency-demo-shell {
  position: relative;
  display: grid;
  grid-template-columns: calc(46% - 10px) var(--agency-hinge) calc(54% - 10px);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "phone hinge content";
  height: 100svh;
  min-height: 0;
  background: #fff;
}

/* --- Central hinge: a fold line, not a phone frame ----------------------- */
.agency-hinge {
  grid-area: hinge;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--agency-soft);
  border-left: 1px solid var(--agency-line);
  border-right: 1px solid var(--agency-line);
}
.agency-hinge::after { content: ""; width: 2px; background: var(--agency-ink); }

/* --- Left panel: the permanent live phone -------------------------------- */
.agency-phone-panel {
  grid-area: phone;
  min-width: 0;
  min-height: 0;
  height: 100svh;
  background: #fff;
  overflow: hidden;
}
.agency-phone-inner {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 100%;
  padding: 24px 0;
  background: #fff;
  overflow-x: clip;
}
.agency-hero-phone {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}
/* The caption hangs below the phone box without taking part in the centring,
   so the device itself sits on the pane's centre point and the gap is exact. */
.agency-hero-caption {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  width: max-content;
  max-width: 34ch;
  margin: 0;
  transform: translateX(-50%);
  color: var(--agency-muted);
  text-align: center;
}

.agency-opening-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 40px clamp(24px, 3.4vw, 64px) 0;
  background: #fff;
}
.agency-opening-title { max-width: 22ch; font-size: clamp(1.7rem, 2.4vw, 2.4rem); }
.agency-opening-lede { max-width: 58ch; margin: 18px 0 0; color: var(--agency-muted); }
.agency-opening-facts { margin: 30px 0 0; border-top: 1px solid var(--agency-line); list-style: none; }
.agency-opening-facts li { padding: 14px 0; border-bottom: 1px solid var(--agency-line); }
.agency-opening-facts strong { display: block; font-weight: 600; letter-spacing: .1em; }
.agency-opening-facts span { display: block; margin-top: 3px; color: var(--agency-muted); }
.agency-opening-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  padding: 26px clamp(24px, 3.4vw, 64px) 44px;
  background: #fff;
}
.agency-text-link {
  color: var(--agency-ink);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.agency-foot-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Left pane: identity + menu ------------------------------------------ */
.agency-master-head {
  grid-area: head;
  padding: 26px clamp(18px, 2.4vw, 30px) 0;
  background: #fff;
}
.agency-eyebrow {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--agency-muted);
}
.agency-title { font-size: 1.6rem; }
.agency-subtitle { margin: 8px 0 0; color: var(--agency-muted); }
.agency-trip {
  margin: 20px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--agency-line);
}
.agency-trip-name { margin: 0; font-weight: 600; }
.agency-trip-meta { margin: 2px 0 0; color: var(--agency-muted); }

.agency-master-foot {
  grid-area: foot;
  padding: 14px clamp(18px, 2.4vw, 30px) 20px;
  border-top: 1px solid var(--agency-line);
  background: #fff;
}
.agency-demo-note { margin: 0 0 10px; color: var(--agency-muted); }
.agency-demo-note strong {
  display: block;
  color: var(--agency-ink);
  font-weight: 600;
  letter-spacing: .12em;
}

/* --- Buttons ------------------------------------------------------------- */
.agency-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--agency-ink);
  border-radius: 2px;
  background: #fff;
  color: var(--agency-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.agency-btn:hover { background: var(--agency-soft); }
.agency-btn-primary {
  background: var(--agency-brand);
  border-color: var(--agency-brand);
  color: var(--agency-brand-ink);
}
.agency-btn-primary:hover { background: var(--agency-brand); filter: brightness(.94); }
.agency-btn-quiet { border-color: var(--agency-line); color: var(--agency-muted); font-weight: 500; }
.agency-btn-quiet:hover { color: var(--agency-ink); }
.agency-btn-lg { min-height: 54px; padding: 14px 24px; letter-spacing: .04em; }
.agency-link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--agency-ink);
  font: inherit;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.agency-link-btn:hover { color: var(--agency-muted); }

/* --- Menu (accessible tablist) ------------------------------------------- */
/* --- Menu: three workflow steps, then the supporting views --------------- */
.agency-menu {
  grid-area: tabs;
  min-height: 0;
  overflow-y: auto;
  padding: 18px clamp(18px, 2.4vw, 30px) 10px;
  background: #fff;
}
.agency-menu-group + .agency-menu-group { margin-top: 28px; }
.agency-menu-label {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--agency-muted);
}
.agency-tabs { display: block; }
.agency-tabs-support .agency-tab { color: var(--agency-muted); font-weight: 500; }
.agency-tabs-support .agency-tab[aria-selected="true"],
.agency-tabs-support .agency-tab[aria-selected="true"]:hover { color: #fff; }
.agency-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--agency-line);
  border-radius: 0;
  background: #fff;
  color: var(--agency-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.agency-tab:first-child { border-top: 1px solid var(--agency-line); }
.agency-tab:hover { background: var(--agency-soft); }
.agency-tab[aria-selected="true"],
.agency-tab[aria-selected="true"]:hover {
  background: var(--agency-ink);
  border-bottom-color: var(--agency-ink);
  color: #fff;
}
.agency-tab-index { color: var(--agency-muted); font-variant-numeric: tabular-nums; }
.agency-tab[aria-selected="true"] .agency-tab-index { color: rgba(255, 255, 255, .8); }

/* --- Opening benefits ---------------------------------------------------- */
.agency-benefits { margin: 26px 0 0; padding: 0; border-top: 1px solid var(--agency-line); list-style: none; }
.agency-benefits li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--agency-line); }
.agency-benefits strong { font-size: 1rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.agency-benefits span { color: var(--agency-muted); }

/* --- Workflow progress: three steps, earned by actions ------------------ */
.agency-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.agency-flow-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--agency-line);
  border-radius: 2px;
  color: var(--agency-muted);
  font-size: .96rem;
}
.agency-flow-item.is-current { border-color: var(--agency-ink); background: var(--agency-ink); color: #fff; }
.agency-flow-item.is-done { border-color: var(--agency-ink); color: var(--agency-ink); font-weight: 600; }
.agency-flow-mark { font-variant-numeric: tabular-nums; font-weight: 600; }
.agency-flow-arrow { color: var(--agency-muted); }

/* --- Compact trip summary and Companion counts -------------------------- */
.agency-summary {
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--agency-line);
  border-left: 3px solid var(--agency-brand);
  border-radius: 2px;
}
.agency-summary-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.agency-summary-meta { margin: 4px 0 0; color: var(--agency-muted); }
.agency-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.agency-counts li { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--agency-line); border-radius: 2px; }
.agency-count-value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.agency-count-label { color: var(--agency-muted); }

/* --- Readiness checklist and access window ------------------------------ */
.agency-readiness { margin: 10px 0 0; padding: 0; list-style: none; }
.agency-readiness-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--agency-line); }
.agency-readiness-mark { width: 1.2em; color: var(--agency-muted); }
.agency-readiness-item.is-done .agency-readiness-mark { color: #1f6b3a; font-weight: 700; }
.agency-access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
.agency-access > div { padding: 12px 14px; border: 1px solid var(--agency-line); border-radius: 2px; }
.agency-access dt { font-size: 1rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--agency-muted); }
.agency-access dd { margin: 4px 0 0; font-size: 1.1rem; }

/* --- Native accordions and the Companion summary list ------------------- */
.agency-details {
  margin: 18px 0 0;
  border: 1px solid var(--agency-line);
  border-radius: 2px;
  background: #fff;
}
.agency-details > summary {
  padding: 14px 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.agency-details > summary::-webkit-details-marker { display: none; }
.agency-details > summary::after { content: '+'; float: right; color: var(--agency-muted); }
.agency-details[open] > summary { border-bottom: 1px solid var(--agency-line); }
.agency-details[open] > summary::after { content: '\2212'; }
.agency-details > summary:focus-visible { outline: 2px solid var(--agency-ink); outline-offset: -3px; }
.agency-details > *:not(summary) { margin-left: 16px; margin-right: 16px; }
.agency-details > *:last-child { margin-bottom: 14px; }
.agency-composer { margin: 14px 0; }
.agency-composer > div {
  display: grid;
  grid-template-columns: minmax(120px, 26%) minmax(0, 1fr);
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--agency-line);
}
.agency-composer dt { font-weight: 600; }
.agency-composer dd { margin: 0; color: var(--agency-muted); }
.agency-actions-wrap { flex-wrap: wrap; }

/* --- Right pane: selected panel ----------------------------------------- */
.agency-detail {
  grid-area: detail;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 30px clamp(22px, 3vw, 46px) 56px;
  background: #fff;
}
.agency-section-label {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--agency-muted);
}
.agency-panel-title { font-size: 1.55rem; }
.agency-panel-intro { margin: 10px 0 0; max-width: 64ch; color: var(--agency-muted); }
.agency-h3 { margin: 28px 0 8px; font-size: 1.05rem; }
.agency-fineprint { display: block; margin: 10px 0 0; color: var(--agency-muted); }
.agency-muted-text { color: var(--agency-muted); }
.agency-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.agency-action-status {
  margin: 18px 0 0;
  padding: 12px 15px;
  border: 1px solid var(--agency-line);
  border-left: 3px solid var(--agency-brand);
  border-radius: 2px;
  background: var(--agency-soft);
  font-weight: 600;
}
.agency-callout {
  margin: 26px 0 0;
  padding: 15px 17px;
  border: 1px solid var(--agency-line);
  border-radius: 2px;
  background: var(--agency-soft);
  color: var(--agency-muted);
}
.agency-callout-strong { color: var(--agency-ink); font-weight: 600; font-size: 1.05rem; }
.agency-error { margin: 4px 0 0; color: #7a2020; font-weight: 600; }

/* Panel switch: small fade with a short horizontal move. */
@keyframes agency-panel-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.agency-panel.is-entering { animation: agency-panel-in 180ms ease-out both; }

/* --- Shared panel blocks ------------------------------------------------- */
.agency-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0 0;
  border: 1px solid var(--agency-line);
  background: var(--agency-line);
  list-style: none;
}
.agency-metrics li { padding: 15px 16px; background: #fff; }
.agency-metric-value { display: block; font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.agency-metric-label { display: block; margin-top: 4px; color: var(--agency-muted); }

.agency-license-line { margin: 22px 0 0; }

.agency-steps {
  margin: 8px 0 0;
  border-top: 1px solid var(--agency-line);
  list-style: none;
  counter-reset: agency-step;
}
.agency-steps li {
  counter-increment: agency-step;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--agency-line);
}
.agency-steps li::before { content: counter(agency-step) "."; color: var(--agency-muted); font-weight: 600; }

.agency-pilot-list { margin: 8px 0 0; border-top: 1px solid var(--agency-line); list-style: none; }
.agency-pilot-list li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--agency-line); }
.agency-pilot-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--agency-muted);
  font-weight: 700;
}

.agency-privacy-list { margin: 22px 0 0; border-top: 1px solid var(--agency-line); }
.agency-privacy-list > div {
  display: grid;
  grid-template-columns: minmax(190px, 36%) minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--agency-line);
}
.agency-privacy-list dt { font-weight: 600; }
.agency-privacy-list dd { margin: 0; color: var(--agency-muted); }

/* --- Seat table ---------------------------------------------------------- */
.agency-table-wrap { margin: 22px 0 0; overflow-x: auto; border: 1px solid var(--agency-line); }
.agency-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 1rem; }
.agency-table th,
.agency-table td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--agency-line); }
.agency-table thead th {
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--agency-muted);
  background: var(--agency-soft);
  white-space: nowrap;
}
.agency-table tbody tr:last-child td { border-bottom: 0; }
.agency-table tr.is-empty td { color: var(--agency-muted); }
.agency-seat-email { white-space: nowrap; }
.agency-seat-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* --- Customize fields ---------------------------------------------------- */
.agency-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 24px 0 0;
}
.agency-field { display: flex; flex-direction: column; gap: 6px; }
.agency-field-wide { grid-column: 1 / -1; }
.agency-field > label { font-weight: 600; }
.agency-field input[type="text"],
.agency-field input[type="email"],
.agency-field select,
.agency-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid var(--agency-line);
  border-radius: 2px;
  background: #fff;
  color: var(--agency-ink);
  font: inherit;
  font-size: 1rem;
}
.agency-field textarea { min-height: 96px; resize: vertical; }
/* --- Trip picture (preview only) ----------------------------------------- */
.agency-picture { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.agency-picture-btn { margin: 0; cursor: pointer; }
.agency-picture-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.agency-picture:focus-within .agency-picture-btn { outline: 3px solid var(--agency-ink); outline-offset: 2px; }
.agency-picture-file { margin: 14px 0 0; color: var(--agency-muted); word-break: break-word; }
.agency-picture-preview { margin: 14px 0 0; }
.agency-picture-preview img { display: block; max-width: 160px; height: auto; border: 1px solid var(--agency-line); border-radius: 2px; }

/* --- Lifecycle ----------------------------------------------------------- */
.agency-lifecycle { margin: 24px 0 0; padding: 0; border: 0; }
.agency-lifecycle-list { margin: 10px 0 0; border-top: 1px solid var(--agency-line); list-style: none; }
.agency-lifecycle-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 14px;
  border-bottom: 1px solid var(--agency-line);
  cursor: pointer;
}
.agency-lifecycle-item:hover { background: var(--agency-soft); }
.agency-lifecycle-item input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; }
.agency-lifecycle-body { display: block; }
.agency-lifecycle-name { display: block; font-weight: 600; }
.agency-lifecycle-detail { display: block; color: var(--agency-muted); }
.agency-lifecycle-item input:checked + .agency-lifecycle-body .agency-lifecycle-name::after {
  content: "selected";
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid var(--agency-line);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--agency-muted);
}

/* --- Step header, progress and guidance blocks --------------------------- */
.agency-step-head { margin: 0 0 22px; }
.agency-step-eyebrow {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--agency-muted);
}
.agency-step-progress { margin: 16px 0 0; }
.agency-step-track {
  height: 10px;
  border: 1px solid var(--agency-line);
  border-radius: 999px;
  background: #eceae5;
  overflow: hidden;
}
.agency-step-fill {
  display: block;
  height: 100%;
  width: 12.5%;
  background: var(--agency-ink);
  transition: width .2s ease;
}
.agency-step-text { margin: 8px 0 0; color: var(--agency-muted); }

.agency-guidance { display: grid; gap: 12px; margin: 24px 0 0; }
.agency-guidance-block {
  padding: 14px 16px;
  border: 1px solid var(--agency-line);
  border-left: 3px solid var(--agency-brand);
  border-radius: 2px;
  background: #fff;
}
.agency-guidance-block > p:last-child { margin: 0; }
.agency-guidance-block > ul:last-child,
.agency-guidance-block > dl:last-child { margin-bottom: 0; }
.agency-guidance-label {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--agency-muted);
}
.agency-checklist { list-style: none; }
.agency-checklist li { position: relative; padding: 6px 0 6px 22px; }
.agency-checklist li::before { content: "\2014"; position: absolute; left: 0; color: var(--agency-muted); }
.agency-state-list { margin: 0; border-top: 1px solid var(--agency-line); }
.agency-state-list > div {
  display: grid;
  grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--agency-line);
}
.agency-state-list dt { font-weight: 600; }
.agency-state-list dd { margin: 0; color: var(--agency-muted); }
.agency-trip-line { margin: 14px 0 0; color: var(--agency-muted); }

.agency-callout-warning {
  border-left: 3px solid var(--agency-brand);
  background: var(--agency-soft);
  color: var(--agency-ink);
}

/* Bottom step navigation */
.agency-step-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 32px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--agency-line);
}
.agency-step-nav-summary { margin: 0; color: var(--agency-muted); }
.agency-step-nav-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.agency-step-nav .agency-btn { min-height: 48px; }

/* Visited markers: a checkmark in the numbering plus the word "viewed" for
   screen readers, so the state is never signalled by decoration alone. */
.agency-tab.is-viewed .agency-tab-index { color: #1f6b3a; }
.agency-tab.is-viewed[aria-selected="true"] .agency-tab-index { color: #fff; }

/* Traveler preview: the real phone on white ------------------------------- */
.agency-preview-labels {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--agency-line);
  border-radius: 2px;
  background: var(--agency-soft);
}
.agency-preview-trip { margin: 0; font-size: 1.15rem; font-weight: 600; }
.agency-preview-line { margin: 4px 0 0; color: var(--agency-muted); }
.agency-preview-welcome { margin: 10px 0 0; }
.agency-preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agency-brand-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--agency-line);
  border-radius: 2px;
  background: var(--agency-brand);
}

/* Same phone markup, asset and scale as the homepage and Plan a Pilot. Only
   the size inside this panel is set, scoped to .agency-demo-page. The frame
   artwork is a fixed transparent image far wider than the device, so the
   horizontal overhang is clipped here — vertically nothing is clipped, which
   keeps the drop shadow intact. */
.agency-phone-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 26px;
  margin: 30px 0 0;
  padding: 30px 0 0;
  overflow-x: clip;
  overflow-y: visible;
}
.agency-phone-stage { display: grid; place-items: center; width: 100%; margin: 0; }
/* The permanent left phone keeps the approved opening size: the assembly is
   resized as one unit, so the aspect ratio (858/1780) sets the width —
   ~352×730 at 1920×1080 and ~295×612 at 1200×900. The iframe's own
   --phone-demo-scale stays 0.64 and is never scaled independently. */
.agency-demo-page .silver-phone { height: min(560px, 54svh); max-width: 300px; }
.agency-demo-page .agency-phone-panel .silver-phone { height: min(730px, 68svh); max-width: 370px; }

/* The scannable QR sits in the white space to the lower left of the device and
   is bottom-aligned with it. Its width is measured from the gap between the
   pane edge and the phone, so the phone sizing above is mirrored into
   variables and the two stay in step: ~150px on a wide desktop, ~120px at
   1440, proportionally tighter on a narrow desktop pane. The image keeps its
   own square shape and white border; nothing is cropped or recoloured.
   Horizontally the QR is centred in that gap instead of pinned to the pane
   edge: the pane's left edge is x=0 and the device's left edge is
   --agency-gap-left below (the device is centred in the pane), so the centre
   of the gap is half of it and the offset is never hard-coded — both edges are
   measured, which keeps the centring at every pane width. The frame artwork's
   opaque silhouette begins within ~2px of the device box (measured across
   silver-iphone-frame.png), so that box is the device's visible edge too. */
.agency-phone-panel {
  --agency-phone-h: min(730px, 68svh);
  --agency-phone-w: min(calc(var(--agency-phone-h) * 858 / 1780), 370px);
  /* white space between the pane's left edge and the device's left edge */
  --agency-gap-left: calc((100% - var(--agency-phone-w)) / 2);
  /* the square, kept 30px clear of the device and of the pane edge */
  --agency-qr-size: min(150px, calc(var(--agency-gap-left) - 30px));
}
.agency-demo-page .agency-qr {
  position: absolute;
  /* centre of the gap, less half the square: equal white on either side */
  left: calc(var(--agency-gap-left) / 2 - var(--agency-qr-size) / 2);
  bottom: 0;
  display: block;
  width: var(--agency-qr-size);
  height: auto;
  aspect-ratio: 1 / 1;
}
.agency-phone-caption { margin: 0; max-width: 34ch; color: var(--agency-muted); text-align: center; }

/* --- Opening <-> workspace switch: restrained fade and 14px slide -------- */
@keyframes agency-view-in-right {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes agency-view-in-left {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes agency-view-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.agency-workspace.is-enter { animation: agency-view-in-right 420ms ease both; }
.agency-opening.is-enter { animation: agency-view-in-left 420ms ease both; }
.agency-opening.is-leave,
.agency-workspace.is-leave { animation: agency-view-out 420ms ease both; pointer-events: none; }

/* --- Right panel: compact navigation + one view -------------------------- */
.agency-content-panel {
  grid-area: content;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
}
.agency-content-top {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 26px clamp(22px, 3vw, 46px) 0;
  background: #fff;
  border-bottom: 1px solid var(--agency-line);
}
.agency-content-head { display: grid; gap: 2px; }
.agency-content-head .agency-title { margin: 0; }
.agency-content-trip { margin: 0; color: var(--agency-muted); }
.agency-content-brand {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--agency-muted);
}
.agency-tagline { margin: 18px 0 0; font-weight: 600; }
.agency-count-line { margin: 20px 0 0; color: var(--agency-muted); font-variant-numeric: tabular-nums; }
.agency-ready-list { margin: 22px 0 0; padding: 0; list-style: none; }
.agency-ready-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--agency-line);
}
.agency-ready-state { color: var(--agency-muted); }
.agency-ready-row.is-ready .agency-ready-state { color: var(--agency-ink); font-weight: 600; }
.agency-access-line { margin: 22px 0 0; font-variant-numeric: tabular-nums; }
.agency-trip-summary { margin: 14px 0 0; font-weight: 600; }
.agency-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}
.agency-dates > legend { padding: 0; font-weight: 600; }
.agency-dates .agency-field { margin: 0; }
@media (max-width: 900px) {
  .agency-dates { grid-template-columns: minmax(0, 1fr); }
}

.agency-nav { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 14px 0 -1px; }
.agency-nav-btn {
  min-height: 44px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--agency-muted);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.agency-nav-btn:hover { color: var(--agency-ink); }
.agency-nav-btn[aria-selected="true"] {
  color: var(--agency-ink);
  border-bottom-color: var(--agency-ink);
}
.agency-views {
  padding-top: 40px;
  padding-right: clamp(22px, 3vw, 46px);
  padding-bottom: 40px;
  padding-left: clamp(22px, 3vw, 46px);
}
.agency-views > .agency-panel { max-width: 782px; }
.agency-views > .agency-panel > :first-child { margin-top: 0; }
.agency-content-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto clamp(22px, 3vw, 46px) 0;
  padding: 22px 0 30px;
  border-top: 1px solid var(--agency-line);
}
.agency-content-foot .agency-foot-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.agency-foot-actions .agency-btn { min-height: 44px; }

/* The cue points at the permanent phone: left on desktop, up on small screens. */
.agency-phone-cue {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin: 22px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--agency-line);
  border-left: 3px solid var(--agency-brand);
  border-radius: 2px;
}
.agency-cue-arrow::before { content: '\2190'; }
.agency-to-phone-wrap { display: none; }
.agency-to-phone { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }

/* --- Dialogs + toast ----------------------------------------------------- */
.agency-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--agency-line);
  border-radius: 2px;
  background: #fff;
  color: var(--agency-ink);
  font-size: 16px;
}
.agency-dialog::backdrop { background: rgba(21, 19, 15, .45); }
.agency-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: inherit;
  padding: 24px;
  overflow-y: auto;
}
.agency-dialog-title { margin-bottom: 6px; font-size: 1.25rem; }
.agency-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.agency-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 40;
  width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 16px;
  transform: translateX(-50%);
  border: 1px solid var(--agency-line);
  border-left: 3px solid var(--agency-brand);
  border-radius: 2px;
  background: #fff;
  color: var(--agency-ink);
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(21, 19, 15, .14);
}

/* --- Mobile / tablet: menu above one panel ------------------------------- */
@media (max-width: 900px) {
  .agency-demo-page {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  .agency-demo-shell { display: flex; flex-direction: column; height: auto; }
  .agency-phone-panel { height: auto; order: 1; padding: 20px 18px 0; overflow: visible; }
  .agency-phone-inner { min-height: 0; }
  .agency-demo-page .agency-phone-panel .silver-phone { height: min(62svh, 622px); max-width: min(78vw, 300px); }
  .agency-hero-caption { position: static; width: auto; max-width: 34ch; margin: 22px auto 0; transform: none; }
  /* Narrow screens: the QR drops below the phone and its caption at a size
     kept for scanning. It is never clipped or hidden — on a short phone it can
     extend a little past the fold, so it scrolls into view whole. */
  .agency-demo-page .agency-qr {
    position: static;
    justify-self: center;
    width: min(210px, 62vw);
    margin: 22px auto 0;
  }

  .agency-content-panel { height: auto; order: 2; overflow: visible; }
  .agency-content-top { padding: 18px 18px 0; }
  .agency-nav { flex-wrap: nowrap; gap: 0 16px; overflow-x: auto; margin: 12px 0 -1px; scrollbar-width: thin; }
  .agency-nav-btn { flex: 0 0 auto; min-height: 48px; white-space: nowrap; }

  /* Permanent content spacing on small screens. */
  .agency-views { padding-top: 24px; padding-right: 18px; padding-bottom: 32px; }
  .agency-views > .agency-panel { max-width: none; }
  .agency-content-foot { margin: 0; padding: 20px 18px 36px; }
  .agency-panel { scroll-margin-top: 86px; }
  .agency-counts,
  .agency-access { grid-template-columns: minmax(0, 1fr); }
  .agency-composer > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .agency-fields { grid-template-columns: minmax(0, 1fr); }
  .agency-privacy-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .agency-link-btn { min-height: 44px; }
  .agency-demo-page .silver-phone { height: min(600px, 62svh); max-width: 300px; }
  .agency-toast { bottom: 12px; }
}

@media (max-width: 560px) {
  .agency-actions .agency-btn { width: 100%; }
  .agency-table { min-width: 560px; }
}

/* --- Email preview + simulated delivery (prototype only) ----------------- */
.agency-delivery-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin: 20px 0 0;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--agency-muted);
}
.agency-delivery-state {
  color: var(--agency-ink);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.agency-links-ready,
.agency-demo-complete {
  margin: 22px 0 0;
  padding: 20px;
  border: 1px solid var(--agency-line);
}
.agency-links-ready-title,
.agency-demo-complete-title {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--agency-muted);
}
.agency-links-ready-count,
.agency-demo-complete-count { margin: 12px 0 0; font-weight: 600; }
.agency-demo-complete-note { margin: 10px 0 0; color: var(--agency-muted); }
.agency-links-ready .agency-actions,
.agency-demo-complete .agency-actions { margin-top: 18px; }
.agency-email-dialog { width: min(620px, calc(100vw - 32px)); }

.agency-email-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin: 18px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--agency-line);
  border-bottom: 1px solid var(--agency-line);
}
.agency-email-nav-label {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--agency-muted);
}
.agency-email-nav-name { margin: 0; font-weight: 600; }
.agency-email-nav-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

/* The preview itself reads as a plain email, not another dashboard. */
.agency-email-card {
  margin: 20px 0 0;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--agency-line);
  color: var(--agency-ink);
}
.agency-email-demo-badge {
  margin: 0 0 16px;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--agency-muted);
}
.agency-email-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  margin: 0 0 20px;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--agency-muted);
}
.agency-email-meta dd { margin: 0; color: var(--agency-ink); font-size: 1rem; letter-spacing: 0; }
.agency-email-body p { margin: 0 0 14px; }
.agency-email-body p:last-child { margin-bottom: 0; }
.agency-email-cta-row { margin: 18px 0; }
.agency-email-cta {
  background: var(--agency-brand);
  border-color: var(--agency-brand);
  color: var(--agency-brand-ink);
  font-weight: 700;
}
.agency-email-dates { color: var(--agency-muted); }
#email-preview-title:focus { outline: none; }
.agency-email-dialog :focus-visible,
.agency-email-nav :focus-visible,
.agency-links-ready :focus-visible,
.agency-demo-complete :focus-visible { outline: 3px solid var(--agency-ink); outline-offset: 2px; }

@media (max-width: 900px) {
  .agency-email-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .agency-email-card { padding: 18px; }
  .agency-email-nav-actions { width: 100%; margin-left: 0; }
  .agency-email-nav-actions,
  .agency-email-dialog .agency-dialog-actions,
  .agency-links-ready .agency-actions,
  .agency-demo-complete .agency-actions { flex-direction: column; }
  .agency-email-nav-actions .agency-btn,
  .agency-email-dialog .agency-dialog-actions .agency-btn,
  .agency-links-ready .agency-actions .agency-btn,
  .agency-demo-complete .agency-actions .agency-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

/* ==========================================================================
   Typography system — the Plan a Pilot scale and palette applied to the
   right-hand agency copy only. Reference values are the actual rules in
   assets/pilot.css: DM Sans; h1 weight 600 / line-height 1.16 / ink #15130f;
   .pilot-lede 1.0625rem / 1.72 / colour #26221d; .pilot-eyebrow #55504a.
   The phone, divider, navigation, forms, tables, dialogs and footer keep
   their own compact scale, and the right-pane spacing is untouched.
   ========================================================================== */
.agency-demo-page {
  --agency-body: #26221d;         /* Plan a Pilot lede colour    */
  --agency-muted-strong: #55504a; /* Plan a Pilot eyebrow colour */
}

/* 1. Main panel headings: START, TRIP, TRAVELERS, REVIEW, QUESTIONS, PRICING, REQUEST. */
.agency-demo-page .agency-panel .agency-panel-title {
  margin: 0 0 14px;
  max-width: 32ch;
  font-size: clamp(1.9rem, 2.4vw, 2.375rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--agency-ink);
  text-wrap: balance;
}

/* 1b. A second, section-level heading inside one panel (the TRIP itinerary).
   It shares the panel-title type exactly - family, size, weight, line height,
   letter spacing and ink - and only opens up a break above itself, so the
   panel reads as two sections without a second visual system. It never
   carries [data-panel-heading]: the panel's own title stays the focus target
   and the accessible heading for the tabpanel. */
.agency-demo-page .agency-panel .agency-panel-title-section { margin-top: 32px; }

/* 1c. Days 1-4 hold one City field each. The large itinerary textareas are
   gone, so each day's own field grid closes up to a single compact
   heading-and-field pair, with the same gap repeating in all four days.
   Scoped to the day grids: the trip-details grid at the top of the panel,
   and every other panel, keep the spacing they already had. */
.agency-demo-page .agency-panel .agency-fields-day { margin-top: 18px; }

/* 2. One shared body-copy rule for every panel. */
.agency-demo-page .agency-panel :where(p) {
  max-width: 64ch;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--agency-body);
  text-wrap: pretty;
}

/* 3. Supporting bold statement: the START tagline's own spacing above, so it
   keeps its place under the panel intro. */
.agency-demo-page .agency-tagline { margin: 20px 0 0; }

/* 3b. That same supporting-statement type, reused by the three PRICING subheads
   so their size, weight, line height and ink stay the tagline's own and cannot
   drift; the family was already shared by the page. Their own .agency-h3
   margins are left alone, so the spacing above and below stays as it was. */
.agency-demo-page .agency-tagline,
.agency-demo-page .agency-panel .agency-h3.agency-pricing-subhead {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--agency-ink);
}

/* 4. Secondary copy: darker muted text, unchanged size, so hierarchy holds. */
.agency-demo-page .agency-panel-intro,
.agency-demo-page .agency-callout,
.agency-demo-page .agency-fineprint,
.agency-demo-page .agency-details p,
.agency-demo-page .agency-lifecycle-detail {
  color: var(--agency-muted-strong);
}

/* 5. Compact lines stay compact: labels, counts, statuses and metadata. */
.agency-demo-page .agency-panel .agency-action-status,
.agency-demo-page .agency-panel .agency-count-line,
.agency-demo-page .agency-panel .agency-access-line,
.agency-demo-page .agency-panel .agency-delivery-line,
.agency-demo-page .agency-panel .agency-trip-summary,
.agency-demo-page .agency-panel .agency-fineprint,
.agency-demo-page .agency-panel .agency-actions,
.agency-demo-page .agency-panel .agency-to-phone-wrap,
.agency-demo-page .agency-panel .agency-picture-file,
.agency-demo-page .agency-panel .agency-h3,
.agency-demo-page .agency-panel .agency-links-ready-title,
.agency-demo-page .agency-panel .agency-links-ready-count,
.agency-demo-page .agency-panel .agency-demo-complete-title,
.agency-demo-page .agency-panel .agency-demo-complete-count,
.agency-demo-page .agency-panel .agency-demo-complete-note {
  max-width: none;
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .agency-demo-page .agency-panel .agency-panel-title {
    margin-bottom: 12px;
    font-size: clamp(1.875rem, 4.6vw, 2rem);
  }
  .agency-demo-page .agency-panel :where(p) { font-size: 1.125rem; }
  .agency-demo-page .agency-tagline,
  .agency-demo-page .agency-panel .agency-h3.agency-pricing-subhead { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .agency-panel.is-entering { animation: none; }
  .agency-demo-page *,
  .agency-demo-page *::before,
  .agency-demo-page *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Softer Agency Demo form controls */
.agency-demo-page input:not([type="file"]):not([type="radio"]):not([type="checkbox"]),
.agency-demo-page select,
.agency-demo-page textarea {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f5f4f1;
  color: #26221d;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.4;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.agency-demo-page textarea {
  padding: 16px;
  resize: vertical;
}

/* Slightly darker background when hovering with a mouse */
@media (hover: hover) {
  .agency-demo-page input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):hover,
  .agency-demo-page select:hover,
  .agency-demo-page textarea:hover {
    background: #efede9;
  }
}

/* Clear, accessible keyboard and input focus */
.agency-demo-page input:not([type="file"]):not([type="radio"]):not([type="checkbox"]):focus,
.agency-demo-page select:focus,
.agency-demo-page textarea:focus {
  outline: none;
  border-color: #15130f;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(230, 168, 61, 0.22);
}

/* Validation error */
.agency-demo-page input[aria-invalid="true"],
.agency-demo-page select[aria-invalid="true"],
.agency-demo-page textarea[aria-invalid="true"] {
  border-color: #8f2929;
  background: #fff7f6;
}

.agency-demo-page input::placeholder,
.agency-demo-page textarea::placeholder {
  color: #77716a;
  opacity: 1;
}

/* Disabled controls */
.agency-demo-page input:disabled,
.agency-demo-page select:disabled,
.agency-demo-page textarea:disabled {
  cursor: not-allowed;
  border-color: transparent;
  background: #e9e7e3;
  color: #55504a;
}

/* Keep mobile controls comfortable to tap */
@media (max-width: 900px) {
  .agency-demo-page input:not([type="file"]):not([type="radio"]):not([type="checkbox"]),
  .agency-demo-page select {
    min-height: 52px;
  }
}
  

/* ==========================================================================
   PRICING panel ( /agency-demo/ only ). The offer leads the panel: the two
   prices are set in the same type as every other panel heading, then one
   short block of copy for each audience, then the same .agency-h3 plus
   body-copy plus .agency-fineprint pattern used elsewhere on the page for
   the "Build it into your trip price" example. The three subheads carry
   .agency-pricing-subhead, so they read in the START tagline's
   supporting-statement type (rule 3b above) while keeping the .agency-h3
   rhythm. No new type or component is introduced, so nothing here styles
   anything but the two price lines and those three headings. Scoped like
   every block here: nothing outside the Agency Demo page can be reached.
   ========================================================================== */

/* Each price is a line of the single panel heading, so it keeps the
   panel-title type exactly - family, size, weight, line height, letter
   spacing and ink - and only takes a line of its own. One price per line, no
   second type system. */
.agency-demo-page .agency-panel .agency-pricing-price { display: block; }


/* Small screens. Six tabs now share the row, which already scrolls
   horizontally here: the vertical padding and the scroll margins give the 5px
   focus ring room inside the scroll container instead of clipping it. The
   margins are offset by the padding, so the row sits exactly where it did
   before and nothing else moves. */
@media (max-width: 900px) {
  .agency-nav { margin: 7px 0 -6px; padding: 5px 0; }
  .agency-nav-btn { scroll-margin: 5px; }
}