/* Ported from ~/Dev/whoever-motion-lab (lab section 01); plays window.HIRE_CALL (story-call.js) and stays hidden until the hire story has a call. */
.ft { --paper: #FFFDF8; --tint: #fff3d6; }
/* 01 · The four things (#job). Calendly's timeline tab deck (parts/timeline-tab-deck), skinned as Whoever: paper
   cards, 2px ink borders, a hard ink shadow on the open card, the homepage's four badge colours as the picture
   fields. Each open card plays a small scene of the product doing that step (section.js). */

.ft-head { max-width: 1120px; margin: 0 auto 56px; padding: 0 var(--pad); text-align: center; }
.ft-head .h2 { margin: 0; }
@media (max-width: 640px) { .ft .br-d { display: none; } }

.ft-deckwrap { max-width: calc(1200px + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.ft-cap { margin: 28px auto 0; text-align: center; font: 500 .84rem/1.45 var(--sans); color: var(--ink-soft); text-wrap: balance; }
.ft-cap b { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; margin-right: 6px; }

/* ---- the deck, through its knobs (timing knobs untouched: 8 s, 500 ms widen, 120 ms hold + 180 ms snap) ---- */
.ft .ttd {
  --ttd-radius: 20px;
  --ttd-pad: 30px;                       /* 2px border + 30px pad: the open copy still lays out at 320px */
  --ttd-text-rest: 184px;                /* 248 - 2x2 border - 2x30 pad */
  --ttd-art-h: 300px;
  --ttd-shadow: 6px 6px 0 var(--ink);
  --ttd-card-bg: var(--paper);
  --ttd-bridge: var(--ink);
  --ttd-bridge-top: 38px;
  --ttd-bridge-h: 30px;
  --ttd-ink: var(--ink);
  --ttd-muted: var(--ink-soft);
  --ttd-focus: var(--cobalt);
  --ttd-title-font: 400 34px/1.1 var(--serif);
  --ttd-body-font: 400 15px/1.5 var(--sans);
}
.ft .ttd__card { border: 2px solid var(--ink); corner-shape: round; }
.ft .ttd__text { gap: 14px; }
.ft-top { display: flex; align-items: center; gap: 12px; }
.ft .ttd__title { letter-spacing: -.005em; }
.ft-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: var(--acc); font: 400 19px/1 var(--serif); padding-top: 2px; }
.ft .ttd__active p { margin: 0; }
.ft .ttd.is-row .ttd__stack { padding-bottom: 26px; }
.ft-c1 { --acc: var(--tomato); }
.ft-c2 { --acc: var(--marigold); }
.ft-c3 { --acc: var(--pink); }
.ft-c4 { --acc: var(--lilac); }

/* the picture field: the card's badge colour, ruled off from the copy */
.ft .ttd__art { border-top: 2px solid var(--ink); background: var(--acc); }
.ft .ttd__art-glow { background: var(--acc); }
.ft .ttd.is-row .ttd__art-active { width: calc(var(--ttd-active) - 4px); }
.ft .ttd:not(.is-row) .ttd__art { aspect-ratio: auto; height: 330px; max-height: none; }
.ft .ttd.is-stacked .ttd__row { max-width: 560px; margin: 0 auto; gap: 20px; }
.ft .ttd.is-stacked .ttd__card { box-shadow: 5px 5px 0 var(--ink); }
.ft .ttd.is-stacked .ttd__bridge { margin-left: 40px; }

/* resting pictures: one small paper object per step, centred in the narrow card's field */
.ft-pic { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: block; width: 132px; height: 104px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
.ft-pic i { position: absolute; display: block; border: 1.5px solid var(--ink); }
/* the paper object leaves fast as its card opens and comes back only once the scene has faded, so the two never
   sit on top of each other mid-swap (the part's own 500 ms layer crossfade is untouched) */
.ft .ttd.is-row .ttd__card .ft-pic { transition: opacity .2s ease .32s; }
.ft .ttd.is-row .ttd__card.is-active .ft-pic { opacity: 0; transition: opacity .12s ease; }
.ft-pic--talk i:nth-child(1) { left: 14px; top: 16px; width: 72px; height: 26px; background: #fff; border-radius: 10px 10px 10px 3px; }
.ft-pic--talk i:nth-child(2) { right: 14px; top: 54px; width: 80px; height: 30px; background: #e3eeff; border-radius: 10px 10px 3px 10px; }
.ft-pic--phone { width: 78px; height: 128px; border-radius: 16px; }
.ft-pic--phone i:nth-child(1) { left: 50%; top: 8px; width: 22px; height: 6px; margin-left: -11px; border: 0; background: var(--ink); border-radius: 4px; }
.ft-pic--phone i:nth-child(2) { left: 9px; top: 34px; width: 50px; height: 36px; background: #e3eeff; border-radius: 9px 9px 9px 3px; }
.ft-pic--rows { padding: 14px 14px; }
.ft-pic--rows i { position: relative; left: auto; top: auto; height: 12px; margin-bottom: 9px; border: 0; border-radius: 3px; background: var(--hair); }
.ft-pic--rows i:nth-child(odd) { width: 86%; } .ft-pic--rows i:nth-child(even) { width: 64%; }
.ft-pic--rows i:nth-child(1), .ft-pic--rows i:nth-child(2) { background: var(--marigold); }
.ft-pic--card { border-radius: 3px 12px 12px 12px; margin-top: 8px; }
.ft-pic--card i:nth-child(1) { left: -2px; top: -16px; width: 46px; height: 15px; background: var(--marigold); border-width: 2px; border-bottom: 0; border-radius: 6px 6px 0 0; }
.ft-pic--card i:nth-child(2) { left: 12px; right: 12px; bottom: 12px; height: 44px; background: var(--marigold); border-width: 1.5px; border-radius: 8px; rotate: -2deg; }

/* ---------------------------------------------------------------------------------------------------------------
   scenes: each one sits in the open card's field (380 x 300 in the row, the card's width when stacked)
   --------------------------------------------------------------------------------------------------------------- */
.ft-scene { position: absolute; inset: 0; overflow: hidden; color: var(--ink); font-family: var(--sans); }
.ft-instant, .ft-instant * { transition: none !important; }

/* shared: speech / text bubbles (the Call Card's own: employee blue, caller white, ink edge, 3px hard shadow) */
.ft-bub { position: relative; max-width: 88%; padding: 8px 12px 9px; border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font: 400 13px/1.42 var(--sans); opacity: 0; translate: 0 8px; transition: opacity .3s ease, translate .32s cubic-bezier(.22, 1, .36, 1); }
.ft-bub.is-in { opacity: 1; translate: 0 0; }
.ft-bub p { margin: 0; }
.ft-who { display: block; margin-bottom: 2px; font: 600 9.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.ft-bub--emp { margin-right: auto; background: #e3eeff; border-radius: 15px 15px 15px 4px; }
.ft-bub--emp .ft-who { color: #1f5fc4; }
.ft-bub--caller { margin-left: auto; background: #fff; border-radius: 15px 15px 4px 15px; }
/* a typing bubble that holds the reply's place until it lands */
.ft-slot { position: relative; display: flex; }
.ft-typing { position: absolute; left: 0; top: 0; padding: 10px 14px; background: #e3eeff; border: 1.5px solid var(--ink); border-radius: 15px 15px 15px 4px;
  box-shadow: 3px 3px 0 var(--ink); opacity: 0; transition: opacity .2s ease; }
.ft-typing.is-in { opacity: 1; }
.ft-dots { display: flex; gap: 4px; height: 12px; align-items: center; }
.ft-dots i { width: 6px; height: 6px; border-radius: 50%; background: #1f5fc4; opacity: .35; }
.ft-typing.is-in .ft-dots i { animation: ft-dot 1s ease-in-out infinite; }
.ft-dots i:nth-child(2) { animation-delay: .15s; } .ft-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ft-dot { 30% { opacity: 1; translate: 0 -3px; } 60% { opacity: .35; translate: 0 0; } }

/* 1 · Answers: a compact live call screen */
.ft-call { position: absolute; left: 18px; right: 18px; top: 18px; bottom: -24px; padding: 12px 14px 0;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); }
.ft-call__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.ft-status { display: inline-flex; align-items: center; gap: 8px; font: 600 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ft-status i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--kelly); border: 1.5px solid var(--ink); }
.ft-call.is-live .ft-status i { animation: ft-pulse 1.6s ease-in-out infinite; }
@keyframes ft-pulse { 50% { box-shadow: 0 0 0 4px #d8f0c8; } }
.ft-status b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-biz { padding: 5px 10px 6px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--tint); font: 600 11px/1 var(--sans); white-space: nowrap; }
.ft-call__turns { display: grid; gap: 10px; }
.ft-call .ft-bub { font-size: 14px; }

/* 2 + 4 · a phone, standing in the field and running off its foot */
.ft-phone { position: absolute; left: 50%; top: 18px; bottom: -30px; width: min(300px, calc(100% - 44px)); translate: -50% 0;
  padding: 0 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 26px; box-shadow: 5px 5px 0 var(--ink); }
.ft-phone__top { display: flex; align-items: center; justify-content: center; height: 24px; }
.ft-phone__top span { font: 600 8.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.ft-phone__who { display: flex; align-items: center; gap: 9px; padding: 4px 2px 9px; border-bottom: 1.5px solid var(--hair); }
.ft-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: var(--marigold); font: 400 17px/1 var(--serif); padding-top: 2px; }
.ft-phone__who b { display: block; font: 600 13px/1.2 var(--sans); }
.ft-phone__who small { display: block; font: 500 10.5px/1.3 var(--sans); color: var(--ink-soft); }
.ft-thread { display: grid; gap: 8px; padding-top: 8px; }
.ft-stamp { justify-self: center; font: 500 10px/1.2 var(--sans); color: var(--ink-soft); opacity: 0; transition: opacity .3s ease; }
.ft-stamp.is-in { opacity: 1; }
.ft-thread .ft-bub { font-size: 12.5px; max-width: 92%; }
.ft-viewcall { display: inline-block; margin-top: 8px; padding: 6px 13px 7px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--cream);
  font: 600 11.5px/1 var(--sans); box-shadow: 0 2px 0 var(--cobalt); transition: translate .12s ease, box-shadow .12s ease, background-color .12s ease; }
.ft-viewcall.is-press { translate: 0 2px; box-shadow: 0 0 0 var(--cobalt); background: #000; }

/* 3 · Collects: who / what / where / when filling in */
.ft-sheet { position: absolute; left: 18px; right: 18px; top: 18px; bottom: -24px; padding: 13px 16px 0;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); }
.ft-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.ft-sheet__head span { font: 600 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ft-count { font: 600 11px/1 var(--sans); padding: 5px 9px 6px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--tint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft-rows { margin: 0; padding: 0; list-style: none; }
.ft-row { display: grid; grid-template-columns: 22px 54px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 52px; padding: 6px 0; border-bottom: 1.5px dashed var(--hair); }
.ft-row:last-child { border-bottom: 0; }
.ft-tick { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--hair); background: var(--paper);
  font: 700 11px/1 var(--sans); color: transparent; transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.ft-row.is-in .ft-tick { background: var(--marigold); border-color: var(--ink); color: var(--ink); }
.ft-key { font: 600 9.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.ft-val { position: relative; justify-self: start; min-width: 0; font: 500 13.5px/1.35 var(--sans); }
.ft-val::before { content: ""; position: absolute; left: 0; top: 50%; width: 120px; max-width: 100%; height: 9px; margin-top: -4px; border-radius: 3px; background: var(--hair); transition: opacity .2s ease; }
.ft-val span { position: relative; display: inline; padding: 1px 3px; margin: 0 -3px; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background: linear-gradient(var(--marigold), var(--marigold)) 0 0 / 0% 100% no-repeat; opacity: 0;
  transition: background-size .38s cubic-bezier(.22, 1, .36, 1), opacity .15s ease; }
.ft-row.is-in .ft-val::before { opacity: 0; }
.ft-row.is-in .ft-val span { opacity: 1; background-size: 100% 100%; }
.ft-row.is-settled .ft-val span { background-size: 100% 0%; background-position: 0 100%; transition: background-size .7s ease; }

/* 4 · Reports: the summary text, then View call opens a small Call Card over it */
.ft-cc { position: absolute; left: 16px; right: 16px; bottom: -18px; padding: 14px 16px 32px; translate: 0 calc(100% + 40px);
  transition: translate .62s cubic-bezier(.22, 1, .36, 1); }
.ft-cc.is-in { translate: 0 0; }
.ft-cc__frame { position: absolute; inset: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: 4px 14px 14px 14px; box-shadow: 5px 5px 0 var(--ink); }
.ft-cc__tab { position: absolute; left: -2px; top: -21px; padding: 5px 11px 4px; background: var(--marigold); border: 2px solid var(--ink); border-bottom: 0;
  border-radius: 8px 8px 0 0; font: 600 9px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ft-cc__body { position: relative; }
.ft-cc h4 { margin: 0; font: italic 400 25px/1 var(--serif); }
.ft-cc__meta { margin: 6px 0 10px; font: 500 10.5px/1.35 var(--sans); color: var(--ink-soft); }
.ft-filed { margin: 0 -2px; padding: 9px 11px 10px; border: 1.5px solid transparent; border-radius: 10px; rotate: 0deg;
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, rotate .45s cubic-bezier(.34, 1.56, .64, 1); }
.ft-filed.is-in { background: var(--marigold); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); rotate: -1.2deg; }
.ft-filed h5 { margin: 0 0 3px; font: 600 9px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.ft-filed p { margin: 0; font: 400 11.5px/1.45 var(--sans); }

/* phones: the scenes are a little roomier when a card is the full width */
@media (max-width: 420px) {
  .ft-call, .ft-sheet { left: 14px; right: 14px; }
  .ft-cc { left: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ft-call.is-live .ft-status i, .ft-typing.is-in .ft-dots i { animation: none; }
  .ft .ttd.is-row .ttd__card .ft-pic, .ft .ttd.is-row .ttd__card.is-active .ft-pic { transition: none; }
}

/* homepage frame: #job centres its text and lays its static grid out with display: grid (which beats [hidden]) */
.ft { text-align: left; margin-top: 56px; }
#job .bsc__grid[hidden] { display: none; }
/* the deck stands in the section's hills like the static cards did (in front of them); its sample caption sits above */
.ft { position: relative; z-index: 2; }
.ft-cap--top { margin: 0 auto 26px; }