/* Extras on top of the wireframe's inline styles: chat, dialog, mobile type, focus. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #F5F5F2; }
a { color: #B93A12; }
a:hover { color: #8A2A0C; }
:focus-visible { outline: 3px solid #B93A12; outline-offset: 2px; }
img { max-width: 100%; }


/* Key's answers */
.chat-log { display: flex; flex-direction: column; gap: 14px; }
.chat-log:empty { display: none; }
.msg-you { align-self: flex-end; max-width: 85%; background: #14181F; color: #F5F5F2; padding: 12px 16px; border-radius: 12px 12px 4px 12px; font-size: 16px; white-space: pre-wrap; }
.msg-key { display: flex; gap: 12px; align-items: flex-start; }
.msg-key .avatar { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #B93A12; color: #fff; font-family: 'Archivo', sans-serif; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.key-answer { background: #F5F5F2; border-radius: 4px 12px 12px 12px; padding: 14px 16px; color: #14181F; font-size: 16px; min-width: 0; }
.key-answer p { margin: 0 0 10px; }
.key-answer p:last-child { margin-bottom: 0; }
.key-answer ul { margin: 0 0 10px; padding-left: 20px; }
.key-answer li { margin-bottom: 4px; }
.key-answer .thinking { color: #4A5160; font-style: italic; }
.key-answer .error { color: #8A2A0C; }
.flag-row { margin-top: 8px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.flag-row button { all: unset; cursor: pointer; color: #4A5160; text-decoration: underline; }
.flag-row input { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid #C5C8C2; border-radius: 6px; min-width: 0; flex: 1 1 180px; }

#fit-result { margin-top: 8px; }
#fit-result .key-answer { background: #1E242E; color: #F5F5F2; border: 1px solid #3A414D; }
#fit-result .key-answer a { color: #F0A27F; }
#fit-result .fit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
#fit-result .fit-actions a, #fit-result .fit-actions button { font: inherit; font-weight: 600; font-size: 15px; color: #F0A27F; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

button[disabled] { opacity: .6; cursor: default; }

/* Ask Travis dialog */
dialog.handoff { border: 0; border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: #F5F5F2; color: #14181F; font-family: 'IBM Plex Sans', 'Helvetica Neue', sans-serif; }
dialog.handoff::backdrop { background: rgba(20, 24, 31, .55); }
dialog.handoff form { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
dialog.handoff h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.75rem; }
dialog.handoff label { font-weight: 600; font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
dialog.handoff input, dialog.handoff textarea { font: inherit; font-weight: 400; font-size: 16px; border: 1px solid #C5C8C2; border-radius: 8px; padding: 12px 14px; width: 100%; background: #fff; }
dialog.handoff .check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
dialog.handoff .check input { width: auto; }
dialog.handoff .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
dialog.handoff .primary { background: #B93A12; color: #fff; border: 0; padding: 14px 24px; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; min-height: 48px; }
dialog.handoff .secondary { background: none; border: 0; color: #4A5160; font: inherit; cursor: pointer; text-decoration: underline; }
.form-status { font-size: 15px; color: #2E3440; }
.hp { position: absolute; left: -9999px; }

/* Fly-out page and case pages share the main styles */
.page-narrow { max-width: 760px; margin: 0 auto; padding: 56px 24px; }

@media (max-width: 720px) {
  .hero-h1 { font-size: 2.75rem !important; }
  .section-h2 { font-size: 2.1rem !important; }
  header nav { gap: 14px !important; font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
#fit-result .flag-row button { color: #C9CDD3; }
.tcard{cursor:default;outline-offset:3px}
.tcard .tfull{display:none;position:absolute;top:-14px;left:-14px;z-index:30;width:min(540px,calc(100vw - 32px));max-height:82vh;overflow:auto;background:#FFFFFF;border:1px solid #D9DBD6;border-top:4px solid #B93A12;border-radius:12px;padding:24px;box-shadow:0 18px 48px rgba(20,24,31,.22);font-size:16px;line-height:1.55;color:#14181F}
.tcard:nth-child(4n) .tfull,.tcard:nth-child(4n-1) .tfull{left:auto;right:-14px}
.tcard:hover .tfull,.tcard:focus .tfull,.tcard:focus-within .tfull{display:block}
.tfull-quote{margin:0 0 12px}
.tfull-by{margin:0;font-size:14px;color:#4A5160}
.tfull-by strong{color:#14181F}
@media (max-width:720px){.tcard .tfull,.tcard:nth-child(4n) .tfull,.tcard:nth-child(4n-1) .tfull{left:-8px;right:-8px;width:auto}}
@media (prefers-reduced-motion:no-preference){.tcard:hover .tfull,.tcard:focus .tfull,.tcard:focus-within .tfull{animation:tpop .16s ease-out}@keyframes tpop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}}

/* Key's intro video */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#14181F}
.video-frame iframe,.video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#14181F}
.video-poster{all:unset;cursor:pointer;position:absolute;inset:0;display:block}
.video-poster img{width:100%;height:100%;object-fit:cover;display:block}
.video-play{position:absolute;left:14px;bottom:14px;width:56px;height:56px;border-radius:50%;background:#B93A12;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(20,24,31,.35);transition:transform .15s ease}
.video-poster:hover .video-play,.video-poster:focus-visible .video-play{transform:scale(1.08)}
.video-poster:focus-visible{outline:3px solid #B93A12;outline-offset:3px}
.video-len{position:absolute;right:12px;bottom:12px;background:rgba(20,24,31,.8);color:#F5F5F2;font:500 13px 'IBM Plex Mono',monospace;padding:3px 8px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.video-play{transition:none}}

/* Video modal */
dialog.video-modal{border:0;padding:0;background:transparent;width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);overflow:visible}
dialog.video-modal::backdrop{background:rgba(20,24,31,.86)}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 96px);border-radius:12px;overflow:hidden;background:#14181F;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.video-modal-frame video{position:absolute;inset:0;width:100%;height:100%;background:#14181F}
.video-close{position:absolute;top:-48px;right:0;width:40px;height:40px;border-radius:50%;border:0;background:#F5F5F2;color:#14181F;font:700 26px/1 'Archivo',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center}
.video-close:focus-visible{outline:3px solid #B93A12;outline-offset:2px}
@media (max-width:720px){.video-close{top:-44px}}

/* picture wrappers fill their frames */
.tb-photo-pic,.video-poster picture{display:block;width:100%;height:100%}