/* Components adapted from conceitos-mockups/escolhidos.html. */
.feature-figure { min-width: 0; }
.feature-figure figcaption { margin-top: 8px; color: var(--muted); font-size: .75rem; }

.feature-mockup {
  --g: #0e0f12;
  --p: #f7f8fa;
  --a: #3b5fcc;
  --ge: #8fb3ff;
  --c: #9aa0ab;
  --c2: #6b717c;
  --ln: rgba(255, 255, 255, .08);
  --lnd: rgba(14, 15, 18, .08);
  container-type: inline-size;
  border: 1px solid var(--lnd);
  border-radius: 22px;
  padding: clamp(14px, 3.1vw, 30px);
  background: var(--p);
  color: var(--g);
  overflow-wrap: anywhere;
}
.feature-mockup.dark, .feature-mockup.blue { background: var(--g); color: var(--p); }
.feature-mockup.blue { background: radial-gradient(ellipse at 70% 40%, #1d2b57, var(--g) 75%); }
.feature-mockup .lbl { color: var(--c2); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.feature-mockup .q { font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }

/* Pré-call: conversation, arrow and three briefing cards. */
.feature-mockup .cb { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.05fr); align-items: center; gap: clamp(12px, 2.6cqi, 24px); }
.feature-mockup .chat { padding: clamp(12px, 2.3cqi, 19px); border-radius: 20px; background: #fff; box-shadow: 0 15px 34px rgba(14, 15, 18, .1); }
.feature-mockup .chat h4 { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 10px; color: var(--c2); font-size: .8125rem; font-weight: 500; }
.feature-mockup .chat h4 span:last-child { flex: none; }
.feature-mockup .msg { width: fit-content; max-width: 88%; margin-bottom: 6px; padding: 8px 10px; border-radius: 12px; background: #f0f2f6; color: #3a3f48; font-size: .875rem; line-height: 1.4; }
.feature-mockup .msg:last-child { margin-bottom: 0; }
.feature-mockup .msg.me { margin-left: auto; background: #e4e9f5; }
.feature-mockup .msg mark { border-radius: 4px; padding: 0 2px; background: #3b5fcc29; box-shadow: inset 0 -2px 0 var(--a); color: var(--g); }
.feature-mockup .arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--a); font-size: .75rem; font-weight: 500; }
.feature-mockup .arrow svg { width: 46px; }
.feature-mockup .brief { display: grid; gap: 9px; }
.feature-mockup .bi { padding: 14px 16px; border-radius: 15px; background: var(--g); color: var(--p); }
.feature-mockup .bi .lbl { color: var(--ge); }
.feature-mockup .bi p { margin-top: 4px; font-size: clamp(1rem, 2.4cqi, 1.15rem); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
.feature-mockup .bi.hl { background: var(--a); }
.feature-mockup .bi.hl .lbl { color: #dce6ff; }

/* Treino: voice waveform, three rounds and progress. */
.feature-mockup .tvx { text-align: center; }
.feature-mockup .wave { display: flex; align-items: center; justify-content: center; gap: clamp(2px, .5cqi, 5px); height: 65px; }
.feature-mockup .wave i { width: clamp(3px, .7cqi, 6px); height: calc(var(--bar-height) * .7px); border-radius: 6px; background: var(--ge); opacity: .9; }
.feature-mockup .tvx .line { max-width: 680px; margin: 10px auto 0; font-size: clamp(1.5rem, 4.4cqi, 2.2rem); }
.feature-mockup .rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; text-align: left; }
.feature-mockup .round-dots { display: none; }
.feature-mockup .rx { display: flex; flex-direction: column; padding: 13px; border: 1px solid #ffffff1a; border-radius: 14px; background: #ffffff08; }
.feature-mockup .rx .h { display: flex; justify-content: space-between; align-items: center; color: var(--c); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.feature-mockup .rx p { margin: 8px 0 12px; color: #c9cdd4; font-size: .9375rem; line-height: 1.4; }
.feature-mockup .rx .r { margin-top: auto; padding-top: 7px; border-top: 1px solid var(--ln); font-size: .8125rem; }
.feature-mockup .rx .r.bad { color: #ffb4b4; }
.feature-mockup .rx .r.ok { color: var(--ge); }
.feature-mockup .rx.win { background: #3b5fcc2e; border-color: #8fb3ff80; }
.feature-mockup .rx.win p { color: #fff; }
.feature-mockup .mini { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: .75rem; font-weight: 600; }
.feature-mockup .mini.x { background: #ff787826; color: #ffb4b4; }
.feature-mockup .mini.v { background: var(--a); color: #fff; }
.feature-mockup .meter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; color: var(--c); font-size: .75rem; }
.feature-mockup .meter i { width: clamp(12px, 5cqi, 44px); height: 4px; border-radius: 4px; background: #ffffff1f; }
.feature-mockup .meter i.on { background: var(--ge); }

/* Coach: transcript and the suggested question. */
#e3 { padding-block: clamp(16px, 2.4vw, 28px); }
.feature-mockup .tr3 { position: relative; }
.feature-mockup .tl { display: grid; gap: 12px; }
.feature-mockup .row { display: grid; grid-template-columns: 47px minmax(0, 1fr); gap: 10px; color: #7e8590; font-size: clamp(.875rem, 2.4cqi, 1.125rem); line-height: 1.45; }
.feature-mockup .row .t { padding-top: 3px; color: var(--c2); font-size: .75rem; font-variant-numeric: tabular-nums; }
.feature-mockup .row.now { color: #fff; }
.feature-mockup .row.now .t { color: var(--ge); }
.feature-mockup .row.now mark { background: none; box-shadow: inset 0 -2px 0 var(--a); color: #fff; }
.feature-mockup .whisper { display: flex; align-items: center; gap: 14px; margin: 9px 0 0 57px; padding: 14px 17px; border: 1px solid #8fb3ff59; border-radius: 15px; background: linear-gradient(90deg, #3b5fcc40, #3b5fcc0d); }
.feature-mockup .whisper .sec { color: var(--ge); text-align: center; font-size: .75rem; line-height: 1.2; }
.feature-mockup .whisper .sec b { display: block; color: #fff; font-size: 1.75rem; font-weight: 600; }
.feature-mockup .whisper .q { font-size: clamp(1.25rem, 3.6cqi, 1.75rem); }
.feature-mockup .whisper .lbl { margin-bottom: 5px; color: var(--ge); }
.feature-mockup .fade-top { position: absolute; inset: -10px 0 auto; height: 36px; background: linear-gradient(var(--g), transparent); pointer-events: none; }
.feature-mockup .transcript-word { display: inline-block; }

/* Relatório: editorial copy and the three cards. */
.feature-mockup .ed { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 4.4cqi, 36px); }
.feature-mockup .ed .big { font-size: clamp(1.9rem, 5.5cqi, 2.85rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.feature-mockup .ed .big span, .feature-mockup .ed .by { color: var(--c2); }
.feature-mockup .ed .by { margin-top: 13px; font-size: .875rem; }
.feature-mockup .ed .side { display: grid; gap: 9px; }
.feature-mockup .ed .box { padding: 14px 16px; border-radius: 15px; background: #fff; }
.feature-mockup .ed .box p { margin-top: 4px; color: #2a2e37; font-size: .9375rem; line-height: 1.4; }
.feature-mockup .ed .box.dk { background: var(--g); color: #fff; }
.feature-mockup .ed .box.dk .lbl { color: var(--ge); }
.feature-mockup .ed .box.dk p { color: #fff; font-size: 1.0625rem; font-weight: 600; }
.feature-mockup .score { display: flex; align-items: baseline; gap: 7px; }
.feature-mockup .score b { font-size: 2.25rem; font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }

/* Follow-up: queue and approval panel. */
.feature-mockup .fq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.7fr); align-items: center; gap: clamp(14px, 3cqi, 26px); }
.feature-mockup .stack { display: grid; gap: 9px; min-width: 0; padding: 2px; }
.feature-mockup .dc { padding: 12px 13px; border: 1px solid var(--ln); border-radius: 14px; background: #1e2027; }
.feature-mockup .dc b { display: flex; justify-content: space-between; gap: 5px; font-size: .9375rem; font-weight: 600; }
.feature-mockup .dc small { display: block; margin-top: 3px; color: var(--c); font-size: .75rem; }
.feature-mockup .dc.on { background: var(--p); box-shadow: 0 0 0 2px var(--a); color: var(--g); }
.feature-mockup .dc.on small { color: var(--c2); }
.feature-mockup .temp { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #2a2e37; }
.feature-mockup .temp i { display: block; height: 100%; background: linear-gradient(90deg, var(--ge), var(--a)); }
.feature-mockup .open { min-width: 0; padding: clamp(13px, 3cqi, 24px); border: 1px solid var(--ln); border-radius: 18px; background: #16181d; }
.feature-mockup .open .top, .feature-mockup .open .ctx, .feature-mockup .open .act { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.feature-mockup .open .top { justify-content: space-between; }
.feature-mockup .open .ctx { margin-top: 12px; }
.feature-mockup .open .pill { display: inline-flex; min-height: 0; padding: 4px 8px; border: 1px solid #ffffff24; border-radius: 99px; background: transparent; color: var(--c); font-size: .75rem; font-weight: 400; }
.feature-mockup .open .msgx { margin-top: 15px; color: #fff; font-size: clamp(1.125rem, 3.3cqi, 1.5rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.3; }
.feature-mockup .open .msgx b { color: var(--ge); font-weight: 600; }
.feature-mockup .open .act { margin-top: 18px; color: var(--c); font-size: .8125rem; }
.feature-mockup .btn { min-height: 40px; padding-inline: 14px; border: 0; border-radius: 999px; background: var(--p); color: var(--g); font-size: .875rem; font-weight: 500; }
.feature-mockup .btn:disabled { cursor: default; }

@container (max-width: 565px) {
  .feature-mockup .cb, .feature-mockup .ed, .feature-mockup .fq { grid-template-columns: minmax(0, 1fr); }
  .feature-mockup .arrow svg { width: 33px; transform: rotate(90deg); }
  .feature-mockup .arrow { gap: 9px; padding-block: 5px; }
  .feature-mockup .rounds, .feature-mockup .stack {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    padding-bottom: 5px;
  }
  .feature-mockup .rx { flex: 0 0 88%; scroll-snap-align: start; }
  .feature-mockup .round-dots { display: flex; justify-content: center; gap: 6px; margin-top: 9px; }
  .feature-mockup .round-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--c2); }
  .feature-mockup .round-dots .is-current { background: var(--ge); }
  .feature-mockup .dc { flex: 0 0 69%; scroll-snap-align: start; }
  .feature-mockup .row { grid-template-columns: 33px minmax(0, 1fr); gap: 7px; }
  .feature-mockup .whisper { align-items: start; flex-direction: column; gap: 7px; margin-left: 0; }
  .feature-mockup .whisper .sec { display: flex; align-items: baseline; gap: 5px; }
  .feature-mockup .whisper .sec b { font-size: 1.375rem; }
}

@media (max-width: 700px) {
  .feature-mockup .chat .msg:not(:has(mark)) { display: none; }
  .feature-mockup .ed .big { font-size: 28px; }
}

@keyframes transcript-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes whisper-appear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  #e3[data-playing] .transcript-word { animation: transcript-appear .15s ease-out calc(var(--word-index) * 45ms) both; }
  #e3[data-playing]:not([data-suggestion-ready]) .whisper { display: none; }
  #e3[data-playing][data-suggestion-ready] .whisper { animation: whisper-appear .3s ease-out both; }
}