/* «How it works», the parts the end adds to css/flow-a.css (owner 15–16.10): the next screen after the call —
   the agent's actions as pastel cards — and the phone rules (only the call on the iPhone, sized to the screen).
   Used by the home page (hero-video.html) and the prototype (agents-flow.html) */
.fa-h2 { margin: 0; font: 600 clamp(30px, 4.6vw, 64px)/1.04 var(--font); letter-spacing: -0.035em; text-wrap: balance; }
.fa-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fa[data-step="4"] .fa-steps li:nth-child(5) button { color: var(--ink); }

/* the end: a glass sheet over the stage; coloured results on the left, the client and the gain on the right */
.fa-end { position: absolute; inset: 0; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(24px, 4vw, 56px); border-radius: inherit; opacity: 0; visibility: hidden; perspective: 1200px;
  background: rgba(244, 245, 250, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fa-outs { display: grid; gap: 14px; justify-items: end; }
.fa-out { width: min(360px, 100%); box-sizing: border-box; padding: 16px 18px; border-radius: 20px; color: #fff; backface-visibility: hidden;
  box-shadow: 0 30px 50px -26px rgba(var(--shade), .75); }
.fa-out p { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 12.5px/1 var(--font); color: rgba(255,255,255,.85); }
.fa-out b { display: block; font: 600 clamp(17px, 1.5vw, 20px)/1.2 var(--font); letter-spacing: -0.01em; }
.fa-out small { display: block; margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.8); }
.fa-out__ok { margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ink); }
.fa .fa-out__ok .icon { width: 12px; height: 12px; }
.fa-out__ok svg { stroke-width: 3.2; }
.fa-out--sky { background: linear-gradient(150deg, #86aee0, #5f8fd0); }
.fa-out--green { background: linear-gradient(150deg, #2d9c4e, #1f7a3a); }
.fa-out--ink { background: linear-gradient(150deg, #3a3d46, #212121); }
.fa-win { display: grid; gap: 14px; justify-items: start; }
.fa-client { width: min(380px, 100%); box-sizing: border-box; padding: 18px 20px; border-radius: 22px; background: linear-gradient(150deg, #fff6ec, #fbe4d6);
  box-shadow: 0 30px 50px -28px rgba(var(--shade), .6); }
.fa-client__who { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; margin: 0; }
.fa-client__who span { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--warm); color: #fff; font-weight: 600; }
.fa-client__who b { font-size: 15px; } .fa-client__who small { font-size: 13px; color: var(--text-2); }
.fa-client q { display: block; margin: 12px 0 0; font: 500 clamp(17px, 1.5vw, 20px)/1.3 var(--font); quotes: "«" "»"; }
.fa-stars { margin: 8px 0 0; color: var(--warm); font-size: 20px; letter-spacing: 2px; } .fa-stars i { display: inline-block; font-style: normal; }
.fa-gains { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; }
.fa-gain { padding: 11px 16px; border-radius: 999px; color: #fff; font: 600 14.5px/1.2 var(--font); }
.fa-gain--0 { background: #6f9bd1; } .fa-gain--1 { background: #e8743b; } .fa-gain--2 { background: #212121; }
.fa.is-done .fa-end { display: none; }
/* the agent doing the actions: a thin line fills under each card before its tick */
.fa-out { position: relative; overflow: hidden; }
.fa-out__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.75); transform: scaleX(0); transform-origin: 0 50%; }
.fa-end__h { margin: 0 0 2px; font: 600 12px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); justify-self: stretch; }
/* the next screen, every width (owner 16.10): the call slides away → the agent doing the actions */
.fa-stage { overflow: hidden; }
.fa-win { display: none; }   /* owner 16.10: the end is the actions only */
.fa-end { grid-template-columns: minmax(0, 720px); justify-content: center; align-content: center; }
/* owner 16.10: the result cards are squares — three in a row; label on top, the result big at the bottom */
.fa-outs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); justify-items: stretch; }
.fa-end__h { grid-column: 1 / -1; }
.fa-out { width: 100%; aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 1.8vw, 24px); border-radius: var(--r-l); }
.fa-out b { font-size: clamp(18px, 2vw, 24px); line-height: 1.12; text-wrap: balance;}
/* pastel tones of the design system, dark text (owner 16.10) */
.fa-out { color: var(--ink); box-shadow: 0 1px 2px rgba(33,33,33,.04), 0 26px 44px -30px rgba(var(--shade), .55); }
.fa-out p { color: var(--text-2); } .fa-out small { color: var(--text-2); }
.fa-out { justify-content: flex-start; } .fa-out b { margin-top: auto; }   /* the result sits at the bottom */
.fa-out--sky { background: var(--sky-pastel); } .fa-out--green { background: var(--positive-tint); } .fa-out--ink { background: var(--warm-tint); }
.fa-out .fa-out__ok { background: #fff; color: var(--positive-ink); box-shadow: 0 2px 6px rgba(var(--shade), .25); }
.fa-out__bar { background: rgba(33, 33, 33, .18); }
.fa-out svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }   /* line icons, not filled squares */
.fa-out .fa-out__ok svg { stroke-width: 3.2; }
.fa[data-scene="end"] .fa-end { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fa[data-scene="end"] .fa-steps li:nth-child(4) button { color: var(--text-3); }
.fa[data-scene="end"] .fa-steps li:nth-child(5) button { color: var(--ink); }

@media (max-width: 899px) {
  /* phones: five bars in a row, and only the current step's name under them, full width (no overlapping words) */
  .fa-steps { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding-bottom: 26px; }
  .fa-steps button { padding: 6px 0; }
  .fa-steps span { position: absolute; left: 0; right: 0; top: 18px; font: 600 14px/1.2 var(--font); color: var(--ink); opacity: 0; transition: opacity .25s; pointer-events: none; }
  .fa[data-step="0"] .fa-steps li:nth-child(1) span, .fa[data-step="1"] .fa-steps li:nth-child(2) span, .fa[data-step="2"] .fa-steps li:nth-child(3) span,
  .fa[data-step="3"] .fa-steps li:nth-child(4) span, .fa[data-step="4"] .fa-steps li:nth-child(5) span { opacity: 1; }
  .fa-end { grid-template-columns: minmax(0, 440px); justify-content: center; align-content: start; gap: 12px; padding: 22px 14px; }
  .fa-outs { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* phones: two squares on top, the third centred under them */
  .fa-out { grid-column: span 2; } .fa-out:nth-of-type(3) { grid-column: 2 / span 2; }
  .fa-outs { gap: 10px; } .fa-out p { margin-bottom: 5px; } .fa-out b { font-size: 16px; } .fa-out small { font-size: 13px; }
  .fa-outs, .fa-win { justify-items: stretch; }
  .fa-out, .fa-client { width: 100%; padding: 13px 15px; }
  .fa-gains { max-width: none; }
  .fa-gain { padding: 9px 13px; font-size: 13.5px; }
  /* one screen holds the whole story: a smaller iPhone (zoom keeps its inner proportions) and a compact card under it */
  .fa-stage { gap: 12px; padding: 14px 10px 16px; }
  .fa-phone { width: 272px; }
  .fa-card { padding: 14px 16px; }
  .fa-kind { display: none; }
  .fa-card__t { font-size: 17px; }
  .fa-list { margin: 10px 0 8px; padding-top: 10px; }
  .fa-checks { gap: 5px; font-size: 13.5px; } .fa-list { display: none; }
  .fa-status { margin-top: 10px; }
  .fa-rows { margin-top: 10px; } .fa-rows li { padding: 9px 12px; font-size: 14px; }
  .fa-cur b { display: none; }
  /* owner 15.10: no big card under the iPhone; each ticked point slides out from under the iPhone as a small card */
  .fa-stage { gap: 0; }
  .fa-brief, .fa-result { padding: 0; background: none; box-shadow: none; max-width: none; margin-top: 10px; position: relative; z-index: 1; }
  .fa-phone { z-index: 3; }   /* the small cards live behind the iPhone and slide out from under it */
  .fa-brief .fa-card__t, .fa-brief .fa-status, .fa-result .fa-ok, .fa-result .fa-card__t, .fa-result .fa-sub { display: none; }
  .fa-checks { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fa-checks li, .fa-rows li { padding: 9px 11px; border-radius: 14px; background: #fff; font-size: 13px; line-height: 1.3;
    box-shadow: 0 1px 2px rgba(33,33,33,.05), 0 14px 26px -16px rgba(var(--shade), .55);
    opacity: 0; transform: translate(var(--fx, 0), -110px) rotate(var(--fr, 0)) scale(.8); transition: opacity .25s, transform .75s cubic-bezier(.34, 1.56, .64, 1); }
  .fa-checks li:has(.fa-ck[data-st="ok"]) { opacity: 1; transform: rotate(var(--rr, 0)); }
  .fa-checks li:nth-child(odd) { --fx: 40px; --fr: 8deg; --rr: -1.5deg; transform-origin: 80% 0; }
  .fa-checks li:nth-child(even) { --fx: -40px; --fr: -8deg; --rr: 1.5deg; transform-origin: 20% 0; }
  .fa-rows li:nth-child(odd) { --fr: 5deg; --rr: -0.8deg; } .fa-rows li:nth-child(even) { --fr: -5deg; --rr: 0.8deg; }
  .fa-rows li { transform: translate(0, -150px) rotate(var(--fr, 0)) scale(.85); }
  .fa-ck { width: 18px; height: 18px; }
  .fa-rows { margin: 0; display: grid; gap: 8px; box-shadow: none; }
  .fa-rows li + li { border-top: 0; }
  .fa[data-step="3"] .fa-rows li { opacity: 1; transform: rotate(var(--rr, 0)); }
  .fa[data-step="3"] .fa-rows li:nth-child(2) { transition-delay: .15s; } .fa[data-step="3"] .fa-rows li:nth-child(3) { transition-delay: .3s; }
  .fa.is-done .fa-checks li, .fa.is-done .fa-rows li { opacity: 1; transform: none; }
  /* the end, compact: one line per coloured card, a short client card, the gains as small pills */
  .fa-end { gap: 10px; padding: 14px 12px; }
  .fa-outs { gap: 10px; } .fa-out { padding: 14px; } .fa-out p { margin-bottom: 3px; } .fa-out small { display: none; } .fa-out b { font-size: 17px; }
  .fa-client { padding: 12px 14px; } .fa-client q { margin-top: 8px; font-size: 15px; } .fa-stars { margin-top: 4px; font-size: 16px; }
  .fa-gains { gap: 6px; } .fa-gain { padding: 7px 11px; font-size: 12.5px; }
  .fa[data-step="4"] .fa-brief { display: none; }
  .fa-result { display: none !important; }   /* owner 16.10: the results are the next screen, not cards under the iPhone */
  .fa-brief { display: none !important; }
  .fa-stage { min-height: 530px; align-content: center; box-sizing: border-box; }   /* owner 16.10: nothing under the iPhone — the call alone, then the actions screen */
        .fa-outs { align-content: center; }
  .fa-end { align-content: center; }
  /* scroll end: the stage clips the iPhone leaving to the left; the steps line names the last step */
  .fa-stage { overflow: hidden; }
  .fa[data-scene="end"] .fa-steps span { opacity: 0 !important; }
  .fa[data-scene="end"] .fa-steps li:nth-child(5) span { opacity: 1 !important; }
  .fa[data-scene="end"] .fa-end { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* only the results stay under the sheet, so the stage keeps one screen */
  /* while the end plays, the card under the iPhone stays put so the sheet covers the same height */
  .fa[data-end="on"] .fa-result { display: block; }
}

/* text fit (16.10 test on 10 widths × 5 languages) */
@media (max-width: 380px) {   /* narrow phones: the cards grow with long words instead of cutting them */
  .fa-out { aspect-ratio: auto; min-height: 150px; }
  .fa-out b { font-size: 15.5px; overflow-wrap: break-word; }
}
@media (min-width: 600px) and (max-width: 899px) {   /* portrait tablets: the three cards in a row, as on desktop */
  .fa-end { grid-template-columns: minmax(0, 640px); }
  .fa-outs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fa-out, .fa-out:nth-of-type(3) { grid-column: auto; }
}