/* ============================================================
   InstaTuition — FIA landing page
   /learn/instatuition/assets/css/insta-fia.css
   Full visual treatment. Depends on insta-global.css + insta-pages.css.
   ============================================================ */

/* ── Hero ───────────────────────────────────────────────────── */
.fl-hero {
    padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
    background:
        radial-gradient(820px 380px at 12% -15%, rgba(46, 230, 197, 0.16), transparent 62%),
        radial-gradient(620px 320px at 92% 0%, rgba(212, 175, 55, 0.10), transparent 58%);
}
.fl-hero-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--space-8, 3rem); align-items: center; }
.fl-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1.06; color: var(--white); margin: var(--space-3) 0 var(--space-4); }
.fl-hero-sub { font-family: var(--font-body); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.6; color: rgba(245, 245, 245, 0.72); margin: 0 0 var(--space-6); max-width: 580px; }

/* Floating proof card */
.fl-hero-proof { display: flex; justify-content: center; }
.fl-proof-card {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    background: var(--insta-card-2); border: 1px solid var(--insta-border);
    border-radius: 18px; padding: var(--space-6) var(--space-5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); width: 100%; max-width: 260px;
}
.fl-proof-step { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--white); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--insta-border); border-radius: 10px; padding: var(--space-3) var(--space-4); width: 100%; text-align: center; box-sizing: border-box; }
.fl-proof-step--win { background: rgba(46, 230, 197, 0.16); border-color: rgba(46, 230, 197, 0.4); color: var(--insta-teal); }
.fl-proof-note { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: rgba(245, 245, 245, 0.5); text-transform: uppercase; }
.fl-proof-card > i { color: var(--insta-teal); font-size: 0.9rem; }

/* Stat band */
.fl-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
    list-style: none; padding: var(--space-6) 0 0; margin: var(--space-6) 0 0;
    border-top: 1px solid var(--insta-border);
}
.fl-stats li { text-align: center; }
.fl-stat-num { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; background: linear-gradient(100deg, var(--insta-teal), var(--insta-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.fl-stat-label { display: block; font-family: var(--font-body); font-size: 0.82rem; color: rgba(245, 245, 245, 0.6); margin-top: var(--space-2); }

/* ── Advantages ─────────────────────────────────────────────── */
.fl-adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.fl-adv { position: relative; overflow: hidden; }
.fl-adv::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; transition: background var(--transition-base, 0.2s); }
.fl-adv:hover::before { background: var(--insta-teal); }
.fl-adv-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 13px; background: rgba(46, 230, 197, 0.12); color: var(--insta-teal); font-size: 1.3rem; margin-bottom: var(--space-4); }
.fl-adv h3 { font-family: var(--font-display); font-size: 1.15rem; color: var(--white); margin: 0 0 var(--space-2); }
.fl-adv p { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.55; color: rgba(245, 245, 245, 0.62); margin: 0; }
.fl-adv--accent { background: linear-gradient(160deg, rgba(46, 230, 197, 0.1), rgba(212, 175, 55, 0.05)); border-color: rgba(46, 230, 197, 0.35); }
.fl-adv--accent .fl-adv-icon { background: rgba(212, 175, 55, 0.16); color: var(--insta-gold); }

/* ── Paper chip (used in the specialist-options grid) ───────── */
.fl-paper { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-body); font-size: 0.92rem; color: rgba(245, 245, 245, 0.85); background: var(--insta-bg); border: 1px solid var(--insta-border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }
.fl-paper-code { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; color: var(--black); background: var(--insta-teal); padding: 4px 8px; border-radius: 7px; }

/* ── Product preview ────────────────────────────────────────── */
.fl-preview { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8, 3rem); align-items: center; }
.fl-mockup { background: var(--insta-card-2); border: 1px solid var(--insta-border); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.fl-mockup-bar { display: flex; gap: 7px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--insta-border); background: rgba(0, 0, 0, 0.2); }
.fl-mockup-bar span { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.fl-mockup-body { padding: var(--space-5); }
.fl-mockup-papers { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.fl-mockup-chip { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 700; color: rgba(245, 245, 245, 0.6); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--insta-border); padding: 5px 12px; border-radius: 8px; }
.fl-mockup-chip--on { color: var(--black); background: var(--insta-teal); border-color: var(--insta-teal); }
.fl-mockup-chat { display: flex; flex-direction: column; gap: var(--space-3); }
.fl-mockup-msg { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.45; padding: var(--space-3) var(--space-4); border-radius: 13px; max-width: 88%; }
.fl-mockup-msg--user { align-self: flex-end; background: rgba(255, 255, 255, 0.08); color: var(--white); border-bottom-right-radius: 4px; }
.fl-mockup-msg--ai { align-self: flex-start; background: rgba(46, 230, 197, 0.14); border: 1px solid rgba(46, 230, 197, 0.3); color: #d8fff7; border-bottom-left-radius: 4px; }
.fl-mockup-tag { margin-top: var(--space-4); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--insta-teal); display: flex; align-items: center; gap: var(--space-2); }

/* ── Authority ──────────────────────────────────────────────── */
.fl-authority { display: flex; gap: var(--space-6); padding: var(--space-7); align-items: flex-start; }
.fl-authority-avatar { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(46, 230, 197, 0.14); color: var(--insta-teal); font-size: 2rem; }
.fl-authority-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); margin: var(--space-2) 0 0; }
.fl-authority-role { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--insta-teal); margin: 4px 0 var(--space-3); }
.fl-authority-body p:last-child { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.65; color: rgba(245, 245, 245, 0.72); margin: 0; }

/* ── Where do you start (guide strip) ───────────────────────── */
.fl-start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.fl-start-card { position: relative; display: flex; flex-direction: column; }
.fl-start-card--feature { border-color: var(--insta-teal); box-shadow: 0 0 0 1px rgba(46, 230, 197, 0.4), 0 16px 40px rgba(0, 0, 0, 0.3); }
.fl-start-flag { position: absolute; top: -11px; left: var(--space-5); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); background: var(--insta-teal); padding: 3px 10px; border-radius: 12px; }
.fl-start-when { font-family: var(--font-body); font-size: 0.84rem; color: rgba(245, 245, 245, 0.6); min-height: 2.4em; }
.fl-start-tier { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); margin: var(--space-2) 0 var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); }
.fl-start-tier span { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--insta-teal); background: rgba(46, 230, 197, 0.12); padding: 3px 8px; border-radius: 10px; }
.fl-start-rec { font-family: var(--font-body); font-size: 0.84rem; line-height: 1.5; color: rgba(245, 245, 245, 0.68); margin: 0 0 var(--space-4); display: flex; gap: var(--space-2); }
.fl-start-rec i { color: var(--insta-teal); margin-top: 3px; flex-shrink: 0; }
.fl-start-papers { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.fl-start-papers span { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--black); background: var(--insta-teal); padding: 4px 11px; border-radius: 8px; }
.fl-start-award { margin-top: auto; display: flex; gap: var(--space-2); font-family: var(--font-body); font-size: 0.84rem; line-height: 1.4; color: rgba(245, 245, 245, 0.85); background: var(--insta-bg); border: 1px solid var(--insta-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.fl-start-award i { color: var(--insta-gold); margin-top: 2px; flex-shrink: 0; }
.fl-start-foot { text-align: center; margin-top: var(--space-6); }
.fl-start-foot p { font-family: var(--font-body); font-size: 0.9rem; color: rgba(245, 245, 245, 0.65); margin: 0 0 var(--space-2); }
.fl-start-help i { color: var(--insta-teal); }
.fl-start-help a { color: var(--insta-teal); font-weight: 600; }

/* ── Two routes (endpoints) ─────────────────────────────────── */
.fl-routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.fl-route { display: flex; flex-direction: column; }
.fl-route-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.4rem; margin-bottom: var(--space-4); }
.fl-route--acca { border-color: rgba(46, 230, 197, 0.4); }
.fl-route--acca .fl-route-icon { background: rgba(46, 230, 197, 0.14); color: var(--insta-teal); }
.fl-route--cat { border-color: rgba(212, 175, 55, 0.4); }
.fl-route--cat .fl-route-icon { background: rgba(212, 175, 55, 0.16); color: var(--insta-gold); }
.fl-route h3 { font-family: var(--font-display); font-size: 1.4rem; color: var(--white); margin: 0 0 var(--space-1); }
.fl-route-sub { font-family: var(--font-body); font-size: 0.95rem; color: rgba(245, 245, 245, 0.7); margin: 0 0 var(--space-4); }
.fl-route-list { list-style: none; padding: 0; margin: 0; }
.fl-route-list li { font-family: var(--font-body); font-size: 0.9rem; color: rgba(245, 245, 245, 0.78); display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; }
.fl-route-list i { margin-top: 3px; }
.fl-route--acca .fl-route-list i { color: var(--insta-teal); }
.fl-route--cat .fl-route-list i { color: var(--insta-gold); }

/* ── Specialist options ─────────────────────────────────────── */
.fl-specialist { margin-top: var(--space-6); background: var(--insta-card); border: 1px solid var(--insta-border); border-radius: var(--radius-md, 12px); padding: var(--space-6); }
.fl-specialist-title { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: 1.1rem; color: var(--white); margin: 0 0 var(--space-4); flex-wrap: wrap; }
.fl-specialist-title i { color: var(--insta-gold); }
.fl-specialist-title span { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245, 245, 245, 0.5); }
.fl-specialist-papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

/* ── Experience (CAT) ───────────────────────────────────────── */
/* Robust centering via flexbox. text-align / margin-auto inheritance is
   unreliable here (<p> children with their own max-width resist it) — this is
   the established fix from the Cabstates site audit (June 2026). */
.fl-exp-text { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 680px; margin: 0 auto var(--space-7); }
.fl-exp-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.fl-exp-route { background: var(--insta-card); border: 1px solid var(--insta-border); border-radius: var(--radius-md, 12px); padding: var(--space-6); text-align: center; }
.fl-exp-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 13px; background: rgba(46, 230, 197, 0.12); color: var(--insta-teal); font-size: 1.3rem; margin-bottom: var(--space-4); }
.fl-exp-route h4 { font-family: var(--font-display); font-size: 1.05rem; color: var(--white); margin: 0 0 var(--space-2); }
.fl-exp-route p { font-family: var(--font-body); font-size: 0.86rem; line-height: 1.5; color: rgba(245, 245, 245, 0.62); margin: 0; }
.fl-exp-note { text-align: center; margin-top: var(--space-6); font-family: var(--font-body); font-size: 0.85rem; color: rgba(245, 245, 245, 0.55); display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.fl-exp-note i { color: var(--insta-teal); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
    .fl-start-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .fl-routes { grid-template-columns: 1fr; }
    .fl-specialist-papers { grid-template-columns: 1fr; }
    .fl-exp-routes { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .fl-hero-grid { grid-template-columns: 1fr; }
    .fl-hero-proof { order: -1; max-width: 260px; }
    .fl-adv-grid { grid-template-columns: repeat(2, 1fr); }
    .fl-preview { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .fl-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
    .fl-adv-grid { grid-template-columns: 1fr; }
    .fl-authority { flex-direction: column; }
    .ip-hero-actions { flex-direction: column; align-items: stretch; }
    .ip-hero-actions .insta-btn { justify-content: center; }
}