/* =====================================================================
   Talya case study only (loaded by .site-build/talya.py):
   real-time flights, the airport pages the kiosk opens, the kiosk's four
   languages and the passenger journey. Colours come from the Fraport TAV
   palette in case-brand.css (--bt-*); no washes, glows or gradients.
   ===================================================================== */

/* ---------- shared: stacked scenes, tab progress ---------- */
.tl-stage { position: relative; display: grid; justify-items: center; align-items: center; }
.tl-stage > .cx-pane { width: 100%; }
.tl-stage--kiosk .dv-kiosk { width: min(340px, 100%); margin: 0 auto; }
.tl-sc .bar, .tl-cap .bar, .tl-stop .bar, .tl-lang .bar { position: absolute; left: 18px; right: 18px; bottom: 7px; height: 2px; border-radius: 2px; background: var(--bt-line); opacity: 0; }
.tl-sc.is-on .bar, .tl-cap.is-on .bar, .tl-stop.is-on .bar, .tl-lang.is-on .bar { opacity: 1; }
.tl-sc .bar i, .tl-cap .bar i, .tl-stop .bar i, .tl-lang .bar i { display: block; height: 100%; background: var(--bt-acc); transform: scaleX(0); transform-origin: left; }
.is-auto :is(.tl-sc, .tl-cap, .tl-stop, .tl-lang).is-on .bar i { animation: cxBar var(--dur, 9s) linear forwards; }
.is-paused .is-on .bar i { animation-play-state: paused !important; }
:is(.tl-sc, .tl-cap, .tl-stop, .tl-lang) { font: inherit; text-align: left; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1); }
:is(.tl-sc, .tl-cap, .tl-lang):hover { transform: translateY(-1px); }
:is(.tl-sc, .tl-cap, .tl-stop, .tl-lang):active { transform: translateY(0) scale(0.99); }
:is(.tl-sc, .tl-cap, .tl-stop, .tl-lang):focus-visible { outline: 2px solid var(--bt-acc); outline-offset: 3px; }

/* ---------- the kiosk's flight card: the product's extra states (renderFlightCard) ---------- */
.kx-fc-st--ok { background: rgba(34,197,94,0.20) !important; border-color: rgba(74,222,128,0.45) !important; color: #86efac; }
.kx-fc-st--warn { background: rgba(245,158,11,0.20) !important; border-color: rgba(251,191,36,0.45) !important; color: #fcd34d; }
.kx-fc-st--bad { background: rgba(239,68,68,0.20) !important; border-color: rgba(248,113,113,0.45) !important; color: #fca5a5; }
.kx-fc-st--live { background: rgba(47,211,230,0.18) !important; border-color: rgba(47,211,230,0.45) !important; color: var(--cyan); }
.kx-fc-two { display: flex; align-items: center; gap: calc(26 * var(--u)); }
.kx-fc-two > div + div { border-inline-start: 1px solid rgba(255,255,255,0.12); padding-inline-start: calc(26 * var(--u)); }
.kx-fc-chg b { color: var(--cyan); }
.kx-fc-delta { margin-inline-start: calc(8 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 700; font-style: normal; color: var(--sub); white-space: nowrap; }
.kx-fc-wx { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(16 * var(--u)); padding: calc(13 * var(--u)) calc(17 * var(--u)); border-radius: calc(12 * var(--u));
  font-size: calc(19 * var(--u)); font-weight: 600; color: var(--sub); background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.kx-fc-wx b { font-size: calc(26 * var(--u)); font-weight: 700; color: #fff; }

/* ---------- real-time flights (dark; owner, 18 Oct 2026): one flight card on the left, the 55-inch cabinet kiosk on the right ---------- */
.tl-flights { padding: 110px 0 120px; }
.tl-fl { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(40px, 7vw, 120px); align-items: center; }
.tl-fl .cs-h2 { max-width: 15ch; }
.tl-fl .cs-lead { max-width: 46ch; }
.tl-fl > .tl-stage { justify-self: center; }
.tl-fl .dv-kiosk.dv-cab { width: clamp(240px, 33vh, 310px); margin: 0 auto; }
.tl-chip { justify-self: start; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.1); color: #fff; }
.tl-chip--warn { background: rgba(245,158,11,0.2); border-color: rgba(251,191,36,0.5); color: #fcd34d; }
.tl-chip--ok { background: rgba(34,197,94,0.2); border-color: rgba(74,222,128,0.5); color: #86efac; }
.tl-fcard { max-width: 540px; margin-top: 36px; padding: 22px 24px 22px; border-radius: 22px; background: rgba(5, 20, 52, 0.42); border: 1px solid var(--bt-line);
  box-shadow: 0 24px 60px rgba(3, 14, 40, 0.26); }
.tl-fc-head { display: flex; align-items: center; gap: 12px; }
.tl-fc-code { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 0.01em; color: var(--bt-ink); }
.tl-fc-kind { font-size: 11.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bt-faint); }
.tl-fcard .tl-chip { margin-left: auto; }
.tl-fc-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 26px 0 24px; }
.tl-fc-pt b { display: block; font-family: var(--font-display); font-size: clamp(40px, 4vw, 54px); font-weight: 700; line-height: 1; letter-spacing: -0.01em; color: var(--bt-ink); }
.tl-fc-pt span { display: block; margin-top: 8px; font-size: 14px; color: var(--bt-mute); }
.tl-fc-pt em { display: block; margin-top: 3px; font-style: normal; font-size: 15px; font-weight: 600; color: var(--bt-ink); font-variant-numeric: tabular-nums; }
.tl-fc-pt.is-to { text-align: right; }
.tl-fc-path { position: relative; display: flex; align-items: center; gap: 10px; color: var(--bt-acc); }
.tl-fc-path i { flex: 1; border-top: 1.5px dashed rgba(255,255,255,0.32); }
.tl-fc-path svg { flex: none; width: 22px; height: 22px; transform: rotate(45deg); }
.tl-fc-path small { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--bt-faint); }
.tl-fc-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.tl-fc-cells > div { padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.tl-fc-cells dt { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bt-faint); }
.tl-fc-cells dd { margin: 5px 0 0; font-size: 17px; font-weight: 700; white-space: nowrap; color: var(--bt-ink); font-variant-numeric: tabular-nums; }
.tl-fc-cells .is-hl { background: var(--bt-acc-soft); border-color: var(--bt-acc-line); }
.tl-fc-cells .is-hl dd { color: var(--bt-acc); }
.tl-rule { display: flex; gap: 10px; align-items: center; max-width: 540px; margin: 20px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--bt-mute); }
.tl-rule svg { flex: none; width: 18px; height: 18px; color: var(--bt-acc); }

/* ---------- what the kiosk opens (light) ---------- */
.tl-caps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(40px, 6vw, 96px); align-items: center; }
.tl-caps-list { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 36px; max-width: 620px; }
.tl-cap { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 20px 22px; border-radius: 16px; background: transparent; border: 1px solid transparent; color: var(--bt-ink); }
.tl-cap:hover { background: var(--bt-acc-soft); }
.tl-cap.is-on { background: var(--bt-card); border-color: var(--bt-card-line); box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 8px 24px rgba(16,24,40,0.06); }
.tl-cap .ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--bt-acc-soft); color: var(--bt-acc); }
.tl-cap.is-on .ic { background: var(--bt-fill); color: var(--bt-fill-ink); }
.tl-cap .ic svg { width: 22px; height: 22px; }
.tl-cap-t b { display: block; font-size: 17px; font-weight: 600; }
.tl-cap-t small { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--bt-mute); }
.tl-also { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--bt-line); }
.tl-also ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.tl-also li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bt-card-line); background: var(--bt-card); font-size: 14px; color: var(--bt-text); }

/* the kiosk's four languages */
.tl-langs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 72px; padding: clamp(28px, 4vw, 52px); border-radius: 24px; background: var(--bt-bg2); }
.tl-langs h3 { margin: 14px 0 12px; font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; color: var(--bt-ink); }
.tl-langs-copy p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--bt-text); max-width: 520px; }
.tl-lang-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tl-lang { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px 0 10px; border-radius: 999px; background: var(--bt-card); border: 1px solid var(--bt-card-line); color: var(--bt-ink); font-size: 14.5px; font-weight: 600; }
.tl-lang img { width: 28px; height: 28px; border-radius: 50%; }
.tl-lang.is-on { background: var(--bt-btn); border-color: var(--bt-btn); color: var(--bt-btn-ink); }
.tl-lang .bar { left: 44px; right: 18px; bottom: 6px; background: rgba(255,255,255,0.25); }
.tl-lang .bar i { background: #fff; }
.tl-bubble { padding: 24px 26px 26px; border-radius: 22px; background: #0C3A78; color: #fff; }
.tl-bubble-who { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #B9CBE3; }
.tl-bubble-who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tl-lang-stage { display: grid; margin-top: 16px; }
.tl-lang-p { display: block; }
.tl-greet { margin: 0; font-family: 'Ubuntu', var(--font-main); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: #fff; }
.tl-gloss { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.16); font-size: 14px; line-height: 1.55; color: #B9CBE3; }

/* behind every answer */
.tl-behind { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--bt-line); }
.tl-behind > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--bt-line); }
.tl-behind .ic { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--bt-acc-soft); color: var(--bt-acc); }
.tl-behind .ic svg { width: 20px; height: 20px; }
.tl-behind b { font-size: 16px; font-weight: 600; color: var(--bt-ink); }
.tl-behind span:not(.ic) { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--bt-mute); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .tl-behind { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .tl-flights { padding: 80px 0 90px; }
  .tl-fl { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .tl-fl .dv-kiosk.dv-cab { width: min(260px, 70vw); }
  .tl-caps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tl-caps-list { margin-top: 0; }
  .tl-caps-copy { display: contents; }
  .tl-caps-copy > .cx-head { order: -2; }
  .tl-caps > .tl-stage { order: -1; }
  .tl-langs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .tl-caps-list { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 5vw; scrollbar-width: none; margin: 0 -5vw; padding: 0 5vw 4px; }
  .tl-caps-list::-webkit-scrollbar { display: none; }
  .tl-cap { flex: 0 0 78%; scroll-snap-align: start; border-color: var(--bt-card-line); }
  .tl-behind { grid-template-columns: minmax(0, 1fr); }
  .tl-fcard { padding: 18px 18px 18px; }
  .tl-fc-kind { display: none; }
  .tl-fc-route { gap: 14px; margin: 22px 0 22px; }
  .tl-fc-pt b { font-size: 36px; }
  .tl-fc-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.tl-sc, .tl-cap, .tl-stop, .tl-lang) { transition: none; }
  :is(.tl-sc, .tl-cap, .tl-lang):hover { transform: none; }
}

/* ---------------------------------------------------------------------
   What the assistant does: the release record as a card grid. Dark band
   between the light capability sections, so the page gets a breath and the
   mechanisms read as one list rather than a paragraph (owner, 17 Oct 2026).
   --------------------------------------------------------------------- */
.tl-does { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 54px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); border-radius: 26px; overflow: hidden; }
.tl-does-i { padding: 30px 28px 32px; background: #0b0d14; transition: background 0.3s ease; }
.tl-does-i:hover { background: #10131d; }
.tl-does-i .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 20px; color: #7fb4ff; background: rgba(60,120,230,0.14); box-shadow: inset 0 0 0 1px rgba(120,170,255,0.18); }
.tl-does-i .ic svg { width: 21px; height: 21px; }
.tl-does-i b { display: block; font-family: var(--font-display); font-size: 17.5px; line-height: 1.3; color: #fff; }
.tl-does-i p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.62; color: rgba(255,255,255,0.62); }
/* eight cards: four by two, two by four on tablets, one column on phones (never a hole in the last row) */
@media (max-width: 1100px) { .tl-does { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) {
  .tl-does { grid-template-columns: 1fr; margin-top: 36px; border-radius: 20px; }
  .tl-does-i { padding: 24px 22px 26px; }
  .tl-does-i .ic { width: 38px; height: 38px; margin-bottom: 16px; }
  .tl-does-i b { font-size: 16.5px; }
  .tl-does-i p { font-size: 14px; }
}
/* the 55-inch cabinet kiosk in "She opens the airport's own pages": sized to the screen height, as in the flight section */
.tl-caps .dv-kiosk.dv-cab { width: clamp(240px, 33vh, 300px); margin: 0 auto; }
@media (max-width: 900px) { .tl-caps .dv-kiosk.dv-cab { width: min(260px, 70vw); } }