/* TRUEFLOW MODAL (Fabio, 11/11): the modal that opens a TrueFlow from the library, rebuilt in the language of the home
   and of the Certified Data Room modal. Cover with the industry on the left; on the right the title, a short description,
   the channel, how it works in three steps, and the actions (Start TrueFlow, Send to someone else, which swaps in the invite form).
   Design system: radius 16 for the dialog, 8 for buttons and inputs, 999 for chips; motion 300 ms with a soft deceleration. */

.tfm[hidden] { display: none; }
.tfm { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 32px;
  background: rgba(8, 17, 34, 0.56); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: tfm-fade .3s cubic-bezier(.215, .61, .355, 1) both; }
.tfm.is-closing { animation: tfm-fade-out .2s cubic-bezier(.55, .055, .675, .19) both; }
.tfm-dialog { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); width: min(980px, 100%); height: min(600px, calc(100vh - 64px));
  background: var(--ts-surface-raised, #fff); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 64px rgba(8, 17, 34, 0.28);
  animation: tfm-rise .3s cubic-bezier(.215, .61, .355, 1) both; }
.tfm.is-closing .tfm-dialog { animation: tfm-sink .2s cubic-bezier(.55, .055, .675, .19) both; }
@keyframes tfm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tfm-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tfm-rise { from { opacity: 0; transform: translateY(16px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes tfm-sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }

/* cover */
.tfm-cover { position: relative; min-height: 0; background: #0a1a33; }
.tfm-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: tfm-zoom 1.2s cubic-bezier(.215, .61, .355, 1) both; }
@keyframes tfm-zoom { from { transform: scale(1.06); } to { transform: none; } }
.tfm-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 17, 34, 0.32) 0%, rgba(8, 17, 34, 0) 30%, rgba(8, 17, 34, 0) 70%, rgba(8, 17, 34, 0.24) 100%); }
.tfm-ind { position: absolute; z-index: 1; top: 20px; left: 20px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.94);
  font: 600 12px/16px "DM Sans", sans-serif; color: var(--ts-text-link, #0068d9); }

/* right side */
.tfm-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tfm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 0 36px; }
.tfm-kicker { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/16px "DM Sans", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-text-link, #0068d9); }
.tfm-kicker .hv3-ic { width: 16px; height: 16px; color: #007afe; }
.tfm-tools { display: flex; align-items: center; gap: 4px; }
.tfm-tool { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  font: 600 13px/18px "DM Sans", sans-serif; color: var(--ts-text-link, #0068d9); cursor: pointer; transition: background-color .35s cubic-bezier(.45, 0, .55, 1); }
.tfm-tool:hover { background: #eef5ff; transition-duration: .5s; }
.tfm-tool .hv3-ic { width: 16px; height: 16px; color: #007afe; }
.tfm-tool.is-icon { width: 36px; padding: 0; justify-content: center; color: var(--ts-text-secondary); }
.tfm-tool.is-icon svg { width: 20px; height: 20px; }
.tfm-tool.modal-star svg path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.tfm-tool.modal-star.active { color: #007afe; }
.tfm-tool.modal-star.active svg path { fill: currentColor; }
.tfm-tool:focus-visible, .tfm-btn:focus-visible { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 2px; }

.tfm-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 36px 8px; }
.tfm-scroll > * { animation: tfm-up .5s cubic-bezier(.215, .61, .355, 1) both; }
.tfm-scroll > :nth-child(2) { animation-delay: 60ms; } .tfm-scroll > :nth-child(3) { animation-delay: 120ms; } .tfm-scroll > :nth-child(4) { animation-delay: 180ms; }
@keyframes tfm-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tfm-title { margin: 0; font: 700 28px/34px Raleway, "DM Sans", sans-serif; letter-spacing: -0.01em; color: var(--ts-text-primary); text-wrap: balance; }
.tfm-desc { margin: 12px 0 0; font: 400 16px/24px "DM Sans", sans-serif; color: var(--ts-text-secondary); }
.tfm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; font: 500 13px/18px "DM Sans", sans-serif; color: var(--ts-text-muted, #6b7280); }
.tfm-ch { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #eef5ff; color: var(--ts-text-link, #0068d9); font-weight: 600; }
.tfm-meta-sep { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .6; }

.tfm-how { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ts-border-default, #e2e8ee); }
.tfm-how-t { font: 500 12px/16px "DM Sans", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ts-text-secondary); }
.tfm-how ol { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.tfm-how li { display: flex; gap: 14px; align-items: flex-start; }
.tfm-how code { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #eef5ff;
  font: 500 12px/1 "JetBrains Mono", monospace; color: var(--ts-text-link, #0068d9); }
.tfm-how li span { display: flex; flex-direction: column; gap: 2px; padding-top: 1px; font: 400 14px/20px "DM Sans", sans-serif; color: var(--ts-text-secondary); }
.tfm-how li b { font: 600 15px/20px "DM Sans", sans-serif; color: var(--ts-text-primary); }

/* actions */
.tfm-actions { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 16px 36px 28px; }
.tfm-actions[hidden] { display: none; }
.tfm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 8px;
  font: 600 15px/20px "DM Sans", sans-serif; cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background-color .35s cubic-bezier(.45, 0, .55, 1), border-color .35s cubic-bezier(.45, 0, .55, 1), box-shadow .35s cubic-bezier(.45, 0, .55, 1); }
.tfm-btn svg { width: 16px; height: 16px; }
.tfm-btn .hv3-ic { width: 16px; height: 16px; color: currentColor; }
.tfm-btn.is-primary { background: var(--ts-interactive-primary, #007afe); color: #fff; }
.tfm-btn.is-primary:hover { background: var(--ts-interactive-primary-hover, #0068d9); box-shadow: 0 4px 16px rgba(0, 122, 254, 0.18); transition-duration: .5s; }
.tfm-btn.is-ghost { background: transparent; border-color: var(--ts-border-default, #e2e8ee); color: var(--ts-text-primary); }
.tfm-btn.is-ghost:hover { border-color: rgba(0, 122, 254, 0.45); background: #fbfdff; transition-duration: .5s; }
.tfm-actions.is-invite { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid var(--ts-border-default, #e2e8ee);
  animation: tfm-up .3s cubic-bezier(.215, .61, .355, 1) both; }
.tfm-field { display: flex; flex-direction: column; gap: 6px; }
.tfm-field label { font: 600 13px/18px "DM Sans", sans-serif; color: var(--ts-text-primary); }
.tfm-field label small { font-weight: 400; color: var(--ts-text-muted, #6b7280); }
.tfm-field input { height: 44px; padding: 0 12px; border: 1px solid var(--ts-border-input, #d5dce4); border-radius: 8px; background: #fff;
  font: 400 15px/20px "DM Sans", sans-serif; color: var(--ts-text-primary); transition: border-color .2s, box-shadow .2s; }
.tfm-field input:focus { outline: none; border-color: #007afe; box-shadow: 0 0 0 3px rgba(0, 122, 254, 0.12); }
.tfm-invite-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.tfm-hint { margin: 0; font: 400 13px/18px "DM Sans", sans-serif; color: var(--ts-text-muted, #6b7280); }

.i-send { --m: url(assets/icons/export.svg); }

@media (max-width: 899px) {
  .tfm-dialog { grid-template-columns: minmax(0, 1fr); grid-template-rows: 220px minmax(0, 1fr); height: min(760px, calc(100vh - 64px)); width: min(600px, 100%); }
}
@media (max-width: 599px) {
  .tfm { padding: 0; place-items: stretch; }
  .tfm-dialog { width: 100%; height: 100%; border-radius: 0; grid-template-rows: 200px minmax(0, 1fr); }
  .tfm-ind { top: 16px; left: 16px; }
  .tfm-top { padding: 16px 12px 0 16px; }
  .tfm-tool:not(.is-icon) span:last-child { display: none; } /* phone: Customize with AI as an icon */
  .tfm-tool:not(.is-icon) { width: 40px; padding: 0; justify-content: center; }
  .tfm-tool, .tfm-tool.is-icon { width: 44px; height: 44px; }
  .tfm-scroll { padding: 12px 16px 8px; }
  .tfm-title { font-size: 24px; line-height: 30px; }
  .tfm-desc { font-size: 15px; line-height: 22px; }
  .tfm-how { margin-top: 24px; }
  .tfm-actions { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ts-border-default, #e2e8ee); }
}
@media (prefers-reduced-motion: reduce) {
  .tfm, .tfm-dialog, .tfm.is-closing, .tfm.is-closing .tfm-dialog, .tfm-cover img, .tfm-scroll > *, .tfm-actions.is-invite { animation: none; }
}
/* the official label of the second action is longer: the primary keeps its width, the second takes the rest */
.tfm-actions.flow-self { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 599px) { .tfm-actions.flow-self { grid-template-columns: minmax(0, 1fr); } }
/* the old modal styles (styles.css) give .modal-customize and .modal-star a fixed square: here the AI button keeps its label */
.tfm .tfm-tool.modal-customize { width: auto; height: 36px; padding: 0 12px; white-space: nowrap; border-radius: 8px; }
.tfm .tfm-tool.is-icon { width: 36px; height: 36px; border-radius: 8px; }
/* while the invite form is open, the steps step aside so nothing is cut in half */
.tfm.is-inviting .tfm-how { display: none; }
@media (max-width: 599px) { .tfm .tfm-tool.modal-customize { width: 44px; height: 44px; padding: 0; } .tfm .tfm-tool.is-icon { width: 44px; height: 44px; } }
.tfm.is-inviting .tfm-scroll { flex: 0 1 auto; }
.tfm.is-inviting .tfm-actions.is-invite { border-top: 0; padding-top: 24px; }
@media (max-width: 599px) { .tfm.is-inviting .tfm-scroll { flex: 1 1 auto; } }

/* ===== Lighter first level (Fabio, 11/11: "troppe informazioni, togli how it works, modale più piccola") =====
   Only cover, title, description, channel and the two actions; the dialog follows its content. */
.tfm-dialog { width: min(760px, 100%); height: auto; max-height: calc(100vh - 64px); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.tfm-cover { min-height: 340px; }
.tfm-top { padding: 16px 16px 0 28px; }
.tfm-scroll { flex: 0 1 auto; padding: 12px 28px 4px; }
.tfm-title { font-size: 24px; line-height: 30px; }
.tfm-desc { font-size: 15px; line-height: 22px; margin-top: 10px; }
.tfm-meta { margin-top: 14px; }
.tfm-actions { margin-top: auto; padding: 24px 28px 28px; }
.tfm-actions.flow-self { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tfm.is-inviting .tfm-actions.is-invite { padding-top: 20px; }
@media (max-width: 899px) {
  .tfm-dialog { width: min(520px, 100%); grid-template-columns: minmax(0, 1fr); grid-template-rows: 200px auto; height: auto; }
  .tfm-cover { min-height: 0; }
}
@media (max-width: 599px) {
  .tfm-dialog { width: 100%; height: 100%; max-height: none; grid-template-rows: 220px minmax(0, 1fr); }
  .tfm-scroll { flex: 1 1 auto; padding: 12px 16px 8px; }
  .tfm-actions { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
}
/* phone: a bottom sheet as tall as its content instead of a full screen with a gap */
@media (max-width: 599px) {
  .tfm { place-items: end stretch; }
  .tfm-dialog { height: auto; max-height: calc(100vh - 24px); border-radius: 16px 16px 0 0; grid-template-rows: 180px auto; animation-name: tfm-sheet; }
  .tfm-scroll { flex: 0 1 auto; }
  .tfm-actions { border-top: 0; padding-top: 20px; }
}
@keyframes tfm-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== Two views (Fabio, 11/11: "l'abilitazione di un terzo deve essere chiaramente una view diversa, back in alto") =====
   The right side holds two views. The invite view slides in from the right: Back on top, a round icon, its own title,
   the TrueFlow being sent as a small reference, the fields and one primary action. Going back slides the first view in from the left. */
.tfm-view { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.tfm-view[hidden] { display: none; }
.tfm-view.is-invite { background: linear-gradient(180deg, #f6faff 0%, #fff 160px); animation: tfm-in-r .3s cubic-bezier(.215, .61, .355, 1) both; }
.tfm:not(.is-inviting) .tfm-view.flow-self.was-back { animation: tfm-in-l .3s cubic-bezier(.215, .61, .355, 1) both; }
@keyframes tfm-in-r { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes tfm-in-l { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.tfm-view .tfm-actions { margin-top: auto; }
.tfm-view.is-invite .tfm-scroll { padding-top: 8px; }
.tfm-view.is-invite .tfm-scroll > * { animation: none; }
.tfm-back { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-left: -10px; padding: 0 12px 0 8px; border: 0; border-radius: 8px; background: transparent;
  font: 600 14px/20px "DM Sans", sans-serif; color: var(--ts-text-primary); cursor: pointer; transition: background-color .35s cubic-bezier(.45, 0, .55, 1); }
.tfm-back:hover { background: #eef5ff; transition-duration: .5s; }
.tfm-back:focus-visible { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 2px; }
.tfm-back .hv3-ic { width: 18px; height: 18px; color: currentColor; }
.i-back { --m: url(assets/icons/arrow-left.svg); }
.tfm-inv-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: #007afe; color: #fff; margin-bottom: 14px; }
.tfm-inv-ic .hv3-ic { width: 20px; height: 20px; color: #fff; }
.tfm-title.is-sm { font-size: 22px; line-height: 28px; }
.tfm-flowref { display: flex; align-items: center; gap: 12px; margin: 18px 0 20px; padding: 8px; border-radius: 8px; border: 1px solid var(--ts-border-default, #e2e8ee); background: #fff; }
.tfm-flowref img { width: 48px; height: 40px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; }
.tfm-flowref span { display: flex; flex-direction: column; min-width: 0; }
.tfm-flowref small { font: 500 12px/16px "DM Sans", sans-serif; color: var(--ts-text-muted, #6b7280); }
.tfm-flowref b { font: 600 14px/20px "DM Sans", sans-serif; color: var(--ts-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfm-view.is-invite .tfm-field + .tfm-field { margin-top: 14px; }
/* while inviting, the cover steps back so the eye goes to the form */
.tfm-cover img { transition: filter .3s cubic-bezier(.215, .61, .355, 1), transform .3s cubic-bezier(.215, .61, .355, 1); }
.tfm.is-inviting .tfm-cover img { filter: saturate(.6) brightness(.7); }
/* the old rules for the invite strip no longer apply */
.tfm.is-inviting .tfm-scroll { flex: 0 1 auto; }
@media (max-width: 899px) { .tfm.is-inviting .tfm-cover { display: none; } }
@media (max-width: 599px) { .tfm-back { min-height: 44px; } .tfm-view.is-invite { border-radius: 16px 16px 0 0; } }
@media (prefers-reduced-motion: reduce) { .tfm-view.is-invite, .tfm-view.flow-self.was-back { animation: none; } }
.tfm-view .tfm-actions { grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (max-width: 899px) { .tfm.is-inviting .tfm-dialog { grid-template-rows: auto; } }

/* ===== The cover never changes (Fabio, 11/11: "la cover rimane sempre uguale, cambia solo la parte di destra") =====
   Both views sit in the same grid cell: the dialog takes the height of the taller one, so switching view never resizes
   the dialog or the cover. The inactive view stays in place, invisible. The cover is never dimmed nor hidden. */
.tfm-main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.tfm-view { grid-area: 1 / 1; min-height: 0; }
.tfm-view[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.tfm-view.is-invite { animation: none; }
.tfm.is-inviting .tfm-view.is-invite { animation: tfm-in-r .3s cubic-bezier(.215, .61, .355, 1) both; }
.tfm.is-inviting .tfm-cover img { filter: none; }
@media (max-width: 899px) { .tfm.is-inviting .tfm-cover { display: block; } .tfm.is-inviting .tfm-dialog { grid-template-rows: 200px auto; } }
@media (max-width: 599px) { .tfm.is-inviting .tfm-dialog { grid-template-rows: 180px auto; } }
/* a little tighter, so the shared height stays compact */
.tfm-inv-ic { width: 40px; height: 40px; margin-bottom: 12px; }
.tfm-flowref { margin: 14px 0 16px; }
/* no icon and no TrueFlow reference in the invite view (Fabio, 11/11): title, one line, the fields */
.tfm-view.is-invite .tfm-desc { margin-bottom: 20px; }
/* industry chip on the cover, less evident (Fabio, 11/11): a small frosted pill with white text instead of the solid white one */
.tfm-ind { top: 16px; left: 16px; padding: 4px 10px; background: rgba(8, 17, 34, 0.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.22); font: 500 12px/16px "DM Sans", sans-serif; color: rgba(255, 255, 255, 0.92); }

/* ===== Invite settings from the current Portal (Fabio, 11/11) =====
   The invite view now holds the link and the advanced options, so it is placed over the first view (absolute) and scrolls
   inside: its length never changes the size of the dialog or of the cover. The dialog has a minimum height to give it room. */
.tfm-main { position: relative; }
.tfm-view.is-invite { position: absolute; inset: 0; grid-area: auto; }
.tfm-dialog { min-height: 500px; }
.tfm-view.is-invite .tfm-scroll { flex: 1 1 auto; overflow-y: auto; padding-bottom: 16px; }
.tfm-view.is-invite .tfm-actions { padding-top: 12px; border-top: 1px solid var(--ts-border-default, #e2e8ee); }
.tfm-help { font: 400 12px/16px "DM Sans", sans-serif; color: var(--ts-text-muted, #6b7280); }

.tfm-linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font: 500 13px/18px "DM Sans", sans-serif; color: var(--ts-text-secondary); }
.tfm-linkrow > span { margin-right: auto; }
.tfm-mini { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ts-border-default, #e2e8ee);
  background: #fff; font: 600 13px/18px "DM Sans", sans-serif; color: var(--ts-text-primary); cursor: pointer; transition: border-color .35s cubic-bezier(.45, 0, .55, 1); }
.tfm-mini:hover { border-color: rgba(0, 122, 254, 0.35); transition-duration: .5s; }
.tfm-mini .hv3-ic { width: 14px; height: 14px; color: #007afe; }
.tfm-mini.is-done { color: var(--ts-state-success, #157f3b); }
.tfm-mini:focus-visible { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 2px; }
.i-link { --m: url(assets/icons/arrow-top-right.svg); }
.i-qr { --m: url(assets/icons/scan.svg); }

.tfm-adv { margin-top: 16px; border-top: 1px solid var(--ts-border-default, #e2e8ee); }
.tfm-adv summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; list-style: none; cursor: pointer;
  font: 600 14px/20px "DM Sans", sans-serif; color: var(--ts-text-primary); }
.tfm-adv summary::-webkit-details-marker { display: none; }
.tfm-adv summary .hv3-ic { width: 16px; height: 16px; color: var(--ts-text-secondary); transform: rotate(90deg); transition: transform .3s cubic-bezier(.215, .61, .355, 1); }
.tfm-adv[open] summary .hv3-ic { transform: rotate(-90deg); }
.tfm-adv summary:focus-visible { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 2px; border-radius: 4px; }
.tfm-adv-body { display: grid; gap: 16px; padding: 4px 0 4px; animation: tfm-up .3s cubic-bezier(.215, .61, .355, 1) both; }
.tfm-view.is-invite .tfm-adv-body .tfm-field + .tfm-field { margin-top: 0; }
.tfm-set { display: flex; flex-direction: column; gap: 6px; }
.tfm-set-l { font: 600 13px/18px "DM Sans", sans-serif; color: var(--ts-text-primary); }
.tfm-seg { display: flex; padding: 3px; gap: 2px; border-radius: 8px; background: #f1f4f8; }
.tfm-seg label { flex: 1 1 0; position: relative; }
.tfm-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tfm-seg span { display: grid; place-items: center; min-height: 32px; padding: 0 8px; border-radius: 6px; text-align: center; cursor: pointer;
  font: 500 13px/16px "DM Sans", sans-serif; color: var(--ts-text-secondary); transition: background-color .2s, color .2s, box-shadow .2s; }
.tfm-seg input:checked + span { background: #fff; color: var(--ts-text-primary); font-weight: 600; box-shadow: 0 1px 2px rgba(8, 17, 34, 0.08); }
.tfm-seg input:focus-visible + span { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 1px; }
.tfm-tog { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.tfm-tog input { position: absolute; opacity: 0; pointer-events: none; }
.tfm-sw { flex: 0 0 auto; position: relative; width: 36px; height: 20px; margin-top: 1px; border-radius: 999px; background: #d5dce4; transition: background-color .2s; }
.tfm-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(8, 17, 34, 0.2); transition: transform .2s cubic-bezier(.215, .61, .355, 1); }
.tfm-tog input:checked + .tfm-sw { background: #007afe; }
.tfm-tog input:checked + .tfm-sw::after { transform: translateX(16px); }
.tfm-tog input:focus-visible + .tfm-sw { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 2px; }
.tfm-tog b { display: block; font: 600 13px/18px "DM Sans", sans-serif; color: var(--ts-text-primary); }
.tfm-tog small { display: block; margin-top: 2px; font: 400 12px/16px "DM Sans", sans-serif; color: var(--ts-text-muted, #6b7280); }
.tfm-otp-phone[hidden] { display: none; }
.tfm-field input[type="date"] { font-family: "DM Sans", sans-serif; }

@media (max-width: 899px) { .tfm-dialog { min-height: 0; } .tfm-main { min-height: 480px; } }
@media (max-width: 599px) { .tfm-main { min-height: min(520px, calc(100vh - 220px)); } .tfm-mini { height: 40px; } .tfm-seg span { min-height: 40px; } }

/* ===== One modal for every TrueFlow (Fabio, 11/11) =====
   Quick certifications have no photo: the cover is a deep blue field with the icon of the certification, large and calm. */
.tfm-cover-ic { display: none; }
.tfm-cover.is-icon { background: radial-gradient(120% 90% at 20% 0%, #1f6fe0 0%, #0a3d8f 45%, #081a3d 100%); }
.tfm-cover.is-icon .tfm-cover-ic { position: absolute; inset: 0; display: grid; place-items: center; }
.tfm-cover.is-icon .tfm-cover-ic::before { content: ""; position: absolute; width: 168px; height: 168px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.03), 0 0 0 56px rgba(255, 255, 255, 0.02); }
.tfm-cover.is-icon .tfm-cover-ic .hv3-ic { width: 72px; height: 72px; color: #fff; opacity: .92; animation: tfm-zoom 1.2s cubic-bezier(.215, .61, .355, 1) both; }
.tfm-cover.is-icon::after { background: none; }
.tfm-cover img[hidden] { display: none; }
@media (max-width: 899px) { .tfm-cover.is-icon .tfm-cover-ic::before { width: 120px; height: 120px; } .tfm-cover.is-icon .tfm-cover-ic .hv3-ic { width: 56px; height: 56px; } }
.i-meetings { --m: url(assets/icons/video-frame.svg); }
.i-screen { --m: url(assets/icons/screen-record.svg); }
.i-email { --m: url(assets/icons/email.svg); }
@media (max-width: 599px) { .tfm-main { min-height: min(440px, calc(100vh - 220px)); } }