.ticket {
  --notch: 22px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  background: var(--card);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px rgba(24, 33, 58, 0.45);
  margin-bottom: 48px;
}
.ticket-body { padding: 28px 36px 32px; min-width: 0; border-top: 8px solid var(--carbon); }
.ticket-body h1 { margin-bottom: 18px; }
.ticket-body > p { max-width: 60ch; }

.stub {
  position: relative;
  padding: 28px 24px 32px;
  border-left: 2px dashed var(--rule);
  border-top: 8px solid var(--band);
  font-family: var(--mono);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stub::before, .stub::after {
  content: '';
  position: absolute;
  left: calc(var(--notch) / -2 - 1px);
  width: var(--notch);
  height: var(--notch);
  border-radius: 50%;
  background: var(--stock);
  border: 1px solid var(--rule);
}
.stub::before { top: calc(var(--notch) / -2 - 4px); clip-path: inset(50% 0 0 0); }
.stub::after { bottom: calc(var(--notch) / -2 - 1px); clip-path: inset(0 0 50% 0); }
.stub-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.stub-field { display: flex; flex-direction: column; gap: 2px; }
.stub-field .val {
  min-height: 1.3em;
  font-size: 20px;
  font-weight: 500;
  color: var(--carbon);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.stub-field .val.big { font-family: var(--display); font-size: 40px; font-weight: 900; line-height: 1; }
.stub-foot { margin-top: auto; font-size: 11px; color: var(--slate); letter-spacing: 0.08em; text-transform: uppercase; }
.stub-field .val.printing::after { content: '▌'; color: var(--carbon); animation: caret 0.6s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.route { display: flex; align-items: flex-end; gap: clamp(12px, 3vw, 32px); margin-bottom: 18px; }
.leg { display: flex; flex-direction: column; }
.iata {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(64px, 12vw, 128px);
  line-height: 0.85;
  color: var(--carbon);
  letter-spacing: 0.01em;
}
.plane { font-size: clamp(28px, 5vw, 48px); color: var(--ink); padding-bottom: 0.25em; }

.hero h1 { font-size: 44px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 22px 0 26px; }
.cta {
  display: inline-block;
  background: var(--carbon);
  color: #fff;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 13px 22px;
}
.cta:hover { background: #962226; }
.cta-secondary { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); }

.chat {
  background: var(--stock);
  border: 1px solid var(--rule);
  padding: 18px 20px;
  margin: 16px 0 24px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
}
.ticket .chat { margin-bottom: 0; }
.chat .msg { margin-bottom: 10px; }
.chat .msg:last-child { margin-bottom: 0; }
.chat .msg-user { font-family: var(--body); font-size: 15px; font-weight: 500; }
.chat .msg-user::before { content: 'YOU'; display: inline-block; width: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--slate); }
.chat .msg-bot::before { content: '🦞'; display: inline-block; width: 44px; font-size: 13px; }
.chat .output { padding-left: 44px; color: var(--ink); }
.chat .thinking { color: var(--slate); font-style: italic; }
.chat .price, .chat .highlight { color: var(--carbon); font-weight: 500; }
.chat .alert { color: var(--carbon); }
.chat .dim { color: var(--slate); }
.chat .msg-notify { border-left: 3px solid var(--carbon); padding-left: 12px; }
.chat .msg-notify::before { content: ''; }

.motion .chat[id] .msg { opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; }
.motion .chat[id] .msg.visible { opacity: 1; transform: none; }

.diagram { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; margin: 0 0 24px; font-family: var(--mono); font-size: 13px; }
.diagram-box, .diagram-center, .diagram-list { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--carbon); padding: 14px 16px; }
.diagram-col { display: flex; }
.diagram-col .diagram-box { flex: 1; font-weight: 500; }
.diagram-center .name { font-weight: 500; }
.diagram-center .sub { color: var(--slate); font-size: 12px; margin-top: 4px; }
.diagram-list .item:first-child { font-weight: 500; }
.diagram-list .item + .item { color: var(--slate); font-size: 12px; }
.diagram-arrow { align-self: center; padding: 0 10px; color: var(--carbon); font-size: 0; }
.diagram-arrow::before { content: '→'; font-size: 20px; }
.props { margin-bottom: 8px; }
.prop { padding: 8px 0; border-bottom: 1px dashed var(--rule); }
.prop:last-child { border-bottom: 0; }
.prop .action { font-weight: 600; }
.prop .arrow { color: var(--carbon); padding: 0 6px; }
.prop .result { color: var(--slate); }

.tools { background: var(--card); border: 1px solid var(--rule); padding: 16px 20px; margin: 16px 0 24px; font-size: 14px; }
.tools .tool { margin-bottom: 6px; }
.tools .tool::before { content: '→ '; color: var(--carbon); }
.tools .tool .desc { color: var(--slate); }

.doc { background: var(--card); border: 1px solid var(--rule); border-top: 8px solid var(--carbon); padding: 28px 36px 36px; }
.doc h2 { margin-top: 40px; padding-top: 16px; border-top: 2px dashed var(--rule); }
.doc > p:first-child { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 720px) {
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket-body { padding: 22px 20px 26px; }
  .stub { border-left: 0; border-top: 2px dashed var(--rule); padding: 22px 20px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .stub-field .val.big { font-size: clamp(22px, 7vw, 40px); white-space: normal; overflow-wrap: anywhere; }
  .stub-head, .stub-foot { grid-column: 1 / -1; }
  .stub::before, .stub::after { top: calc(var(--notch) / -2 - 1px); bottom: auto; clip-path: none; }
  .stub::before { left: calc(var(--notch) / -2 - 1px); clip-path: inset(0 0 0 50%); }
  .stub::after { left: auto; right: calc(var(--notch) / -2 - 1px); clip-path: inset(0 50% 0 0); }
  .hero h1 { font-size: 34px; }
  .chat { padding: 14px; font-size: 12px; }
  .chat .output { padding-left: 0; }
  .diagram { grid-template-columns: minmax(0, 1fr); }
  .diagram-arrow::before { content: '↓'; }
  .diagram-arrow { justify-self: center; padding: 4px 0; }
  .doc { padding: 22px 18px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion .chat[id] .msg { opacity: 1; transform: none; transition: none; }
  .stub-field .val.printing::after { display: none; }
  .toast { transition: none; }
}