/* Level 3 hierarchy and a code-native phone simulation, using the shared site theme. */
.partner-nav-children { padding: 2px 0 9px 31px; }
.partner-nav-children .docs-nav-link { font-size: 11px; min-height: 31px; }
.partner-experience-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 32px 0 48px; }
.partner-experience-nav a { display: flex; align-items: center; gap: 16px; background: var(--card); padding: 22px; border-radius: var(--radius); }
.partner-experience-nav a:hover { background: var(--surface); }
.partner-experience-nav a > svg:last-child { margin-left: auto; }
.partner-experience-nav strong { display: block; font-size: 14px; font-weight: 550; }
.partner-experience-nav span span { display: block; font-size: 11px; color: var(--fg-2); margin-top: 5px; }
.partner-experience { scroll-margin-top: 100px; }
.partner-experience + .partner-experience { border-top: 1px solid var(--line-soft); margin-top: 60px; padding-top: 56px; }
.partner-experience-heading { max-width: 680px; margin-bottom: 30px; }
.partner-main .partner-experience-heading .partner-eyebrow { margin-bottom: 12px; }
.partner-main .partner-experience-heading h3 { font: 400 29px/1.2 var(--serif); letter-spacing: -.025em; margin: 0 0 14px; }
.partner-experience-heading > p:last-child { font-size: 13px; line-height: 1.85; color: var(--fg-2); }
.partner-experience-detail { max-width: 840px; margin: 24px auto 0; }
.partner-experience-detail .partner-detail-body { padding: 0; }
.partner-experience-detail .partner-flow { padding: 24px; }
/* The disclosure is narrower than the full-page Level 2 flow: use its readable vertical layout. */
.partner-experience-detail .partner-flow-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 0; }
.partner-experience-detail .partner-flow-source, .partner-experience-detail .partner-flow-output { height: auto; gap: 8px; }
.partner-experience-detail .partner-flow-label { position: static; margin-bottom: 5px; }
.partner-experience-detail .partner-flow-item { height: auto; min-height: 64px; }
.partner-experience-detail .partner-connector { width: 36px; height: 40px; justify-self: center; }
.partner-experience-detail .flow-desktop { display: none; }
.partner-experience-detail .partner-connector .flow-mobile { display: block; }
.agent-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 36px 52px; align-items: center; padding: 36px;
  background: var(--card); border-radius: 16px; }
.agent-demo-context { min-width: 0; max-width: 430px; }
.agent-demo-kicker { color: var(--fg-2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.agent-demo h4 { font-size: 21px; line-height: 1.35; letter-spacing: -.025em; font-weight: 550; margin: 14px 0; }
.agent-demo-context > p:not([class]) { color: var(--fg-2); font-size: 12px; line-height: 1.85; max-width: 390px; }
.agent-roster { display: grid; gap: 3px; margin: 28px 0 18px; padding: 5px; background: var(--surface-soft); border-radius: 13px; }
.agent-roster-item { display: flex; align-items: center; gap: 12px; border-radius: 9px; padding: 17px 12px;
  transition: background .3s ease; }
.agent-roster-item[data-active=true] { background: var(--card); }
.agent-roster-item > svg { color: var(--fg-2); }
.agent-roster-item strong { font-size: 12px; font-weight: 550; }
.agent-roster-item div span { display: block; font-size: 11px; line-height: 1.6; color: var(--fg-2); margin-top: 5px; }
.agent-roster-dot { margin-left: auto; width: 5px; height: 5px; border-radius: 50%; background: var(--marker); flex-shrink: 0; }
.agent-roster-item[data-active=true] .agent-roster-dot { background: var(--fg-2); }
.agent-demo-caption { font-size: 11px; line-height: 1.8; color: var(--fg-2); max-width: 350px; }
.agent-phone-wrap { width: 100%; max-width: 350px; justify-self: center; }
.agent-phone { position: relative; height: 550px; padding: 14px; border: 2px solid var(--line); border-radius: 42px;
  background: var(--surface-soft); box-shadow: inset 0 0 0 5px var(--card); overflow: hidden; }
.agent-phone:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.agent-phone-top { display: flex; align-items: center; justify-content: space-between; position: relative; height: 25px; padding: 0 12px; font-size: 11px; font-weight: 550; }
.agent-phone-camera { position: absolute; left: 50%; transform: translateX(-50%); width: 80px; height: 21px; border-radius: 20px; background: var(--line); }
.agent-phone-status svg { display: block; width: 42px; height: 16px; }
.agent-phone-heading { display: grid; grid-template-columns: 28px 1fr; gap: 6px 11px; margin: 36px 9px 26px; align-items: center; }
.agent-phone-heading .tn-mark { width: 27px; height: 27px; grid-row: span 2; }
.agent-phone-heading strong { font-size: 19px; font-weight: 550; letter-spacing: -.03em; }
.agent-phone-heading span { font-size: 10px; color: var(--fg-2); }
.agent-notification-stack { position: relative; display: flex; flex-direction: column; gap: 12px; height: 360px; overflow: hidden; border-radius: 16px; }
.agent-notification { position: relative; flex-shrink: 0; width: 100%; padding: 16px; border-radius: 16px;
  background: var(--card); transform-origin: top center; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.agent-notification[hidden] { display: none; }
.agent-notification[data-slot="0"] { order: 0; transform: none; animation: notification-arrive .35s cubic-bezier(.16,1,.3,1) both; }
.agent-notification[data-slot="1"] { order: 1; transform: scale(.97); opacity: .65; }
.agent-notification[data-slot="2"] { order: 2; transform: scale(.94); opacity: .35; }
.agent-notification-brand { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--fg-2); }
.agent-notification-brand .tn-mark { width: 15px; height: 15px; }
.agent-notification-brand .agent-notification-time { margin-left: auto; font-size: 9px; }
.agent-notification .agent-notification-message { font-size: 12px; line-height: 1.7; color: var(--fg); margin: 12px 0 0; }
.agent-phone-home { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); width: 96px; height: 4px; border-radius: 9px; background: var(--marker); }
.agent-demo > .partner-example-info { position: absolute; top: 10px; right: 10px; z-index: 5; }
.agent-demo .demo-a11y-pause:focus { grid-column: 1 / -1; justify-self: start; }
@keyframes notification-arrive { from { opacity: 0; transform: translateY(-24px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 1180px) {
  .agent-demo { grid-template-columns: 1fr; padding: 28px; }
  .agent-demo-context { width: 100%; max-width: none; }
  .agent-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-roster-item { align-items: flex-start; flex-wrap: wrap; }
  .agent-roster-dot { display: none; }
}
@media (max-width: 700px) {
  .partner-experience { scroll-margin-top: 166px; }
  .partner-experience-nav { grid-template-columns: 1fr; gap: 8px; margin-bottom: 36px; }
  .partner-experience-nav a { padding: 20px; }
  .agent-demo { padding: 22px 15px; gap: 28px; }
  .agent-roster { grid-template-columns: 1fr; }
  .agent-roster-item { flex-wrap: nowrap; align-items: center; }
  .agent-roster-dot { display: block; }
  .agent-phone { padding: 12px; border-radius: 36px; }
  .agent-notification { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-notification, .agent-roster-item { animation: none !important; transition: none; }
  .agent-notification-stack { overflow-y: auto; display: grid; align-content: start; gap: 10px; }
  .agent-notification[data-slot] { position: static; transform: none; opacity: 1; }
}