/* Trip Element, built from the Figma screen in DM Sans */
.te { --ink: #222426; --mute: #676767; --line: #d1d3d3; --blue: #206ee8; position: relative; display: flex; flex-direction: column; gap: 24px; color: #262626; background: #fff; font: 400 16px/24px 'DM Sans', sans-serif; text-align: left; }
.te p { margin: 0; }
.te i { font-style: normal; }
.te button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.te-ic { flex: none; width: 24px; height: 24px; }
.te-chev { flex: none; width: 14px; height: 14px; }
.te-link { color: var(--ink); font-size: 14px; line-height: 1.1; text-underline-offset: 3px; white-space: nowrap; }
.te-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; line-height: 20px; }
.te-set > span, .te-passport { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.te-pick { position: relative; }
.te .te-passport { padding: 2px 4px; margin: -2px -4px; border-radius: 4px; transition: background-color .15s; }
.te .te-passport:hover, .te-pick.on .te-passport { background: #eef3fd; }
.te-menu { position: absolute; z-index: 6; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; min-width: 170px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.14); opacity: 0; visibility: hidden; translate: 0 -4px; transition: opacity .16s, translate .16s, visibility 0s .16s; }
.te-pick.on .te-menu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.te .te-menu button { padding: 6px 10px; border-radius: 4px; font-size: 14px; line-height: 20px; text-align: left; transition: background-color .12s; }
.te .te-menu button:hover, .te .te-menu button.hit { background: #eef3fd; }
.te .te-menu button.on { color: var(--blue); font-weight: 500; }
.te-legs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: -16px; font-size: 14px; line-height: 20px; }
.te-leg { padding: 5px 11px; border: 2px solid var(--line); border-radius: 4px; background: #f5f6f6; white-space: nowrap; }
.te-leg.on { border-color: var(--ink); background: #fff; }
.te-legs u { width: 4px; height: 16px; border-radius: 1px; background: var(--line); }
.te-trip { margin-left: auto; padding: 5px 22px; border: 2px solid var(--ink); border-radius: 4px; color: var(--ink); font-weight: 700; white-space: nowrap; }
.te-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.te-line > .te-ic { margin-right: 4px; }
.te-line b { font-weight: 700; }
.te-sum { font-size: 20px; line-height: 28px; }
.te-sum b { font-weight: 500; }
.te-need > .te-chev { margin-left: auto; width: 16px; height: 16px; }
.te-need { flex-wrap: nowrap; margin-bottom: -8px; }
.te-need > span { min-width: 0; }
.te-visa { min-height: 252px; padding-left: 37px; }
.te-sel { margin-bottom: 13px !important; color: var(--mute); font-size: 14px; }
.te-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.te-card { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.te-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px !important; color: var(--ink); line-height: 1.2; }
.te-top b { font-weight: 500; }
.te-price { color: var(--blue); white-space: nowrap; transition: scale .25s; transform-origin: 100% 50%; }
.te-price.hit { scale: 1.14; }
.te-meta { margin-bottom: 8px !important; color: var(--mute); font-size: 12px; line-height: 18px; }
.te-meta i { color: #262626; }
.te-when { display: flex; align-items: center; gap: 4px; margin-bottom: 10px !important; font-size: 11px; line-height: 16px; }
.te-when b { font-weight: 700; }
.te-clock { flex: none; width: 16px; height: 16px; }
.te .te-info { position: relative; display: grid; flex: none; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; transition: background-color .15s; }
.te .te-info:hover, .te .te-info.on { background: #eef3fd; }
.te-info .te-ic { width: 16px; height: 16px; }
.te-tip { position: absolute; z-index: 6; bottom: calc(100% + 8px); right: -24px; width: 240px; padding: 12px; border-radius: 4px; background: #333; color: #fff; font-size: 12px; font-weight: 400; line-height: 17px; text-align: left; opacity: 0; visibility: hidden; translate: 0 4px; pointer-events: none; transition: opacity .16s, translate .16s, visibility 0s .16s; }
.te-tip::after { content: ""; position: absolute; top: 100%; right: 28px; border: 5px solid transparent; border-top-color: #333; }
.te-info:hover .te-tip, .te-info:focus-visible .te-tip, .te-info.on .te-tip { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.te .te-apply { position: relative; height: 32px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.1; text-align: center; transition: background-color .15s, scale .1s; }
.te .te-apply:hover { background: #3a3d40; }
.te .te-apply:active, .te .te-apply.hit { scale: .985; }
.te .busy { color: transparent; }
.te .busy::after { content: "Opening application…"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 500; }
.te-more { align-self: center; margin-top: 10px; }
.te-new { display: block; }
.te-old { display: none; flex-direction: column; gap: 4px; max-width: 446px; }
.te-old p { display: flex; align-items: center; gap: 8px; }
.te-gt { color: var(--ink); font-size: 14px; }
.te-old .te-ic { width: 18px; height: 18px; }
.te .te-oldbtn { position: relative; display: flex; align-items: center; justify-content: space-between; height: 32px; margin-left: 26px; padding: 0 16px 0 13px; border: 1px solid var(--line); border-radius: 4px; font-size: 16px; line-height: 24px; }
.te .te-oldbtn.busy .te-chev { opacity: 0; }
.te .te-oldbtn.busy::after { color: var(--ink); }
.is-old .te-old { display: flex; }
.is-old .te-new { display: none; }
.te.is-old .te-visa { min-height: 0; }
.te-props { display: flex; flex-wrap: wrap; gap: 4px 16px; max-height: 0; overflow: hidden; color: var(--mute); font-size: 13px; line-height: 20px; opacity: 0; transition: max-height .36s cubic-bezier(.3,.7,.2,1), margin .36s cubic-bezier(.3,.7,.2,1), opacity .3s; }
.te-props span { display: inline-flex; align-items: center; gap: 4px; }
.te-props .te-chev { color: #0f7f5c; }
.has-props .te-props { max-height: 44px; margin-bottom: 12px; opacity: 1; }
.te-rows { margin-top: -24px; border-top: 1px solid var(--line); }
.te-row { display: flex; align-items: center; gap: 8px; height: 52px; border-bottom: 1px solid var(--line); }
.te-row > .te-chev { margin-left: auto; width: 16px; height: 16px; }
.te-foot { display: flex; align-items: center; gap: 8px; margin-top: -8px; }
.te-ext { flex: none; width: 12px; height: 12px; }
.te-foot > span { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 11px; white-space: nowrap; }
.te-foot img { display: block; width: auto; height: 16px; max-width: none; margin: 0; filter: brightness(0); }
/* the animated flows: all the same height, whatever doesn't fit is cut off at the bottom */
.td { margin: 24px 0 0; }
.td-panel { position: relative; height: 590px; overflow: hidden; border-radius: 10px; background: #206ee8; }
.td-steps { display: flex; justify-content: center; gap: 3px; width: max-content; margin: 12px auto; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.16); }
.td-steps span { padding: 3px 12px; border-radius: 99px; color: rgba(255,255,255,.85); font: 500 12px/18px 'Figtree', sans-serif; white-space: nowrap; transition: background-color .25s, color .25s; }
.td-steps .on { background: #fff; color: #206ee8; }
.td-box { height: 100%; margin: 0 24px; padding: 24px 20px; border-radius: 10px 10px 0 0; background: #fff; }
.td-box .te-visa { min-height: 196px; }
.td-panel .tec-cursor { opacity: 0; }
.td-panel .tec-cursor.live { opacity: 1; }
.page .td figcaption { margin-top: 10px; color: var(--mute); font-size: 13px; }
@media (max-width: 700px) {
  .td-box { margin: 0 12px; padding: 16px; }
  .td-panel { height: 880px; }
  .te .te-oldbtn { margin-left: 0; }
  .te-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .te-visa { padding-left: 0; }
  .te-sum { font-size: 18px; line-height: 25px; }
  .te-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 12px; }
  .te-line > .te-ic { margin-right: 0; }
  .te-line > .te-link { grid-column: 2; justify-self: start; white-space: normal; }
  .te-need > .te-chev { display: none; }
  .te-trip { margin-left: 0; }
  .te-tip { width: 220px; }
}
/* the cover */
.tec { position: absolute; z-index: 1; inset: 0; overflow: hidden; border-radius: inherit; background: #206ee8; opacity: 0; }
.tec.on { opacity: 1; }
.tec-stage { position: absolute; top: 0; left: 0; width: 1000px; height: 524px; overflow: hidden; transform-origin: 0 0; }
.tec-win { position: absolute; top: 46px; left: 98px; width: 804px; padding: 24px 40px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 6px #1a5bc4; }
.tec-steps { position: absolute; top: 7px; left: 50%; translate: -50% 0; display: flex; gap: 3px; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.16); opacity: 0; transition: opacity .4s; }
.tec-steps span { padding: 3px 12px; border-radius: 99px; color: rgba(255,255,255,.85); font: 500 12px/18px 'Figtree', sans-serif; white-space: nowrap; transition: background-color .25s, color .25s; }
.tec-steps .on { background: #fff; color: #206ee8; }
.tec-cursor { position: absolute; z-index: 9; top: 0; left: 0; width: 20px; height: 24px; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition: translate .65s cubic-bezier(.45,.05,.2,1), scale .12s, opacity .4s; }
.tec-cursor path { fill: #fff; stroke: #080808; stroke-width: 1.300; stroke-linejoin: round; }
.tec-cursor.press { scale: .82; }
.tec.run .tec-steps, .tec.run .tec-cursor { opacity: 1; }
.te.is-old .te-rows { margin-top: 0; }
.td-panel--props { height: 430px; }
.td-steps { position: relative; z-index: 6; }
.td-spot { position: absolute; z-index: 5; border: 2px solid #206ee8; border-radius: 10px; box-shadow: 0 0 0 1400px rgba(14,14,14,.32); opacity: 0; pointer-events: none; transition: opacity .28s; }
.td-spot.on { opacity: 1; }
.td-site { display: flex; align-items: center; gap: 20px; margin: -24px -20px 20px; padding: 14px 20px; border-bottom: 1px solid #e4e6e6; border-radius: 10px 10px 0 0; background: #f4f6fa; color: #4b5563; font: 500 13px/18px 'DM Sans', sans-serif; white-space: nowrap; }
.td-site b { color: #111; font-size: 15px; font-weight: 700; }
.td-site em { margin-left: auto; font-style: normal; }
@media (max-width: 700px) {
  .td-panel--props { height: 760px; }
  .td-site { margin: -16px -16px 16px; padding: 12px 16px; }
  .td-site span { display: none; }
}
/* tabs on the covers match the tabs in the blocks: a 30px capsule with 12px above and below */
.tec-steps { top: 14.6px; }
.tec-steps { padding: 3.66px; gap: 3.66px; }
.tec-steps span { padding: 3.66px 14.6px; font-size: 14.6px; line-height: 22px; }
.tec-win { top: 72px; padding-top: 16px; }