/* ------------------------------------------------------------------
   "Find Right Tool" product-finder quiz.
   Scoped under .frt so it never leaks into the global theme.
   Brand-aligned: inherits the theme font (Figtree) and Xappex colors.
   Ported from the prototype's <style> block.
------------------------------------------------------------------ */
.frt {
    --frt-ink: #0E1424;
    --frt-muted: #5d6b80;
    --frt-line: #dfe3f0;
    --frt-card: #fff;
    --frt-accent: #5ED4E8;        /* xappex-300 */
    --frt-accent-press: #139AB1;  /* xappex-600 */
    --frt-accent-ink: #06302e;
    --frt-warn-bg: #FFF4E2;
    --frt-warn-line: #F1C57C;
    --frt-warn-ink: #7d5400;
    --frt-orange: #fe9a00;        /* amber-500 */
    --frt-ok: #10b07f;
    --frt-grad: linear-gradient(120deg, #a07cf3 0%, #5b8ef0 48%, #22d3cb 100%);
    color: var(--frt-ink);
    line-height: 1.5;
}
.frt *, .frt *::before, .frt *::after { box-sizing: border-box; }

/* progress */
.frt-progress { display: flex; gap: 8px; margin: 0 0 24px; max-width: 620px; }
.frt-step { flex: 1; height: 6px; border-radius: 99px; background: #d7dcef; }
.frt-step.on { background: var(--frt-accent); }

/* top nav (back) */
.frt-topnav { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; min-height: 24px; }
.frt-back { background: none; border: 0; color: var(--frt-muted); font: inherit; font-size: 14px; cursor: pointer; padding: 0; font-weight: 600; }
.frt-back:hover { color: var(--frt-ink); }

/* panel */
.frt-panel { background: var(--frt-card); border: 1px solid var(--frt-line); border-radius: 16px; padding: 32px 30px; box-shadow: 0 12px 34px rgba(40, 52, 100, .08); max-width: 620px; }
.frt-kicker { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #2563d6; font-weight: 700; margin: 0 0 10px; }
/* Headings match the blog's type treatment: Figtree 600, no negative tracking. */
.frt-h1 { font-size: 40px; line-height: 1.1; margin: 0 0 10px; font-weight: 600; letter-spacing: normal; }
.frt-h2 { font-size: 26px; margin: 0 0 22px; font-weight: 600; letter-spacing: normal; }
.frt-sub { color: var(--frt-muted); margin: 0 0 24px; font-size: 16px; }

/* option cards */
.frt-cards { display: grid; gap: 10px; }
.frt-opt { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; cursor: pointer; background: #fff; border: 1.5px solid var(--frt-line); border-radius: 12px; padding: 14px 18px; font: inherit; color: inherit; transition: .12s; }
.frt-opt:hover { border-color: var(--frt-accent); box-shadow: 0 0 0 4px rgba(94, 212, 232, .18); }
.frt-lab { font-weight: 700; font-size: 15px; }
.frt-hint { display: block; font-weight: 400; color: var(--frt-muted); font-size: 13px; margin-top: 2px; }
.frt-go { margin-left: auto; color: var(--frt-muted); }
.frt-ic { min-width: 36px; height: 30px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.frt-brand { width: 26px; height: 26px; display: block; }
.frt-brand-img { width: auto; height: 26px; display: block; }
.frt-line { width: 24px; height: 24px; display: block; }
.frt-zoho { height: 17px; width: auto; display: block; }

/* start button */
.frt-startbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--frt-accent); color: var(--frt-accent-ink); font-weight: 800; border: 0; border-radius: 999px; padding: 15px 30px; font-size: 16px; cursor: pointer; }
.frt-startbtn:hover { background: var(--frt-accent-press); color: #fff; }

/* welcome (two columns: panel + illustration) */
.frt-welcome { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .frt-welcome { grid-template-columns: minmax(0, 620px) 1fr; } }
.frt-welcome-media { display: flex; justify-content: center; }
.frt-welcome-media img { max-width: 100%; height: auto; border-radius: 16px; }
@media (max-width: 859px) { .frt-welcome-media { display: none; } }

/* result grid */
.frt-resultgrid { display: grid; gap: 26px; max-width: 980px; }
@media (min-width: 780px) { .frt-resultgrid { grid-template-columns: minmax(0, 420px) 1fr; align-items: start; } }

/* form card (left) */
.frt-formcard { padding: 3px; border-radius: 20px; background: var(--frt-grad); }
.frt-inner { background: #fff; border-radius: 17px; padding: 24px; }
.frt-fc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.frt-fc-name { font-size: 21px; font-weight: 600; letter-spacing: normal; }
.frt-fc-for { color: var(--frt-muted); font-size: 13px; margin-top: 2px; }
.frt-fc-ico svg, .frt-fc-ico img { width: 32px; height: 32px; }
.frt-email { display: flex; align-items: center; border: 1px solid var(--frt-line); border-radius: 12px; padding: 13px 14px; margin-bottom: 12px; color: var(--frt-muted); font-size: 14px; }
.frt-email.err { border-color: #e0564f; box-shadow: 0 0 0 3px rgba(224, 86, 79, .12); }
.frt-email-err { display: none; color: #c0392b; font-size: 12px; margin: -6px 0 12px; }
.frt-email input { border: 0; outline: 0; font: inherit; width: 100%; color: var(--frt-ink); background: transparent; }
.frt-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--frt-accent); color: var(--frt-accent-ink); font-weight: 800; border: 0; border-radius: 12px; padding: 15px; font-size: 16px; cursor: pointer; text-decoration: none; }
.frt-cta:hover { background: var(--frt-accent-press); color: #fff; }
.frt-cta.loading { opacity: .7; pointer-events: none; }
.frt-assure { text-align: center; margin: 12px 0 0; font-size: 13px; color: var(--frt-muted); line-height: 1.5; }
.frt-assure strong { font-weight: 700; color: #3B6D11; }
.frt-assure-check { color: var(--frt-ok); font-weight: 800; }
.frt-ctasub { text-align: center; color: var(--frt-muted); font-size: 12px; margin-top: 10px; }
.frt-priv { text-align: center; color: #9aa4b6; font-size: 11px; margin-top: 10px; }
.frt-priv a { color: #2563d6; }

/* why column (right) */
.frt-why-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; margin: 4px 0 12px; }
.frt-info { width: 20px; height: 20px; border-radius: 50%; background: #e7ebf6; color: #5d6b80; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.frt-tagline { font-weight: 600; font-size: 16px; margin: 0 0 12px; }
ul.frt-bul { margin: 0; padding-left: 20px; }
ul.frt-bul li { margin: 7px 0; font-size: 15px; }
.frt-note { background: #eaf7f6; border: 1px solid #bfe7e4; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 14px 0; }
.frt-note a { color: #139AB1; font-weight: 700; }

/* secondary CTA — prominent "Talk to our team" button (right column) */
.frt-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background: var(--frt-orange); border: 0; border-radius: 14px; padding: 16px; margin-top: 22px; color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; transition: filter .15s; }
.frt-btn-secondary:hover { filter: brightness(.96); color: #fff; }

/* chat screen ("Not sure yet") */
.frt-chat-msg { background: #f4f7ff; border: 1px solid var(--frt-line); border-left: 3px solid var(--frt-accent); border-radius: 12px; padding: 14px 16px; font-size: 15px; color: var(--frt-ink); margin: 0 0 20px; }
.frt-chat-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.frt-chat-actions .frt-startbtn { border: 0; }
.frt-chat-alt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid var(--frt-line); border-radius: 999px; padding: 15px 26px; font-size: 16px; font-weight: 700; color: var(--frt-ink); text-decoration: none; background: #fff; }
.frt-chat-alt:hover { border-color: var(--frt-accent); color: var(--frt-ink); }
.frt-chat-fallback { display: none; margin: 16px 0 0; font-size: 14px; color: var(--frt-muted); }
.frt-chat-fallback.show { display: block; }
.frt-chat-fallback a { color: #139AB1; font-weight: 700; }

@media (max-width: 600px) {
    .frt-panel { padding: 24px 20px; }
    .frt-h1 { font-size: 32px; }
    .frt-chat-actions { flex-direction: column; }
    .frt-chat-actions .frt-startbtn, .frt-chat-alt { width: 100%; justify-content: center; }
}