/* ═══════════════════════════════════════════════════════════════
   FoXpert for iPad — page styles.
   Prefix fi-*, so nothing in here can reach the fp-* (desktop) or
   fw-* (browser) product pages. Tokens come from mindfox-redesign.css.
═══════════════════════════════════════════════════════════════ */

/* ══ SHELL ═════════════════════════════════════════════════ */
.fi-section { padding: var(--section-padding) 0; }
.fi-section--alt { background: var(--bg-secondary); }
.fi-head { max-width: 880px; margin: 0 auto 52px; text-align: center; }
.fi-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; margin-bottom: 14px; text-wrap: balance; }
.fi-head p { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 0; }
.fi-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 14px;
}
/* Hairline that lights on hover, the same accent the sibling pages use. */
.fi-rule {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--orange), transparent);
  opacity: 0.45; transition: opacity var(--transition);
}
.fi-note {
  max-width: 820px; margin: 30px auto 0; text-align: center;
  font-size: 13px; line-height: 1.7; color: var(--text-secondary);
}

/* ══ HERO ══════════════════════════════════════════════════ */
/* Hero type, spacing and column split follow FoXpert Pro's hero exactly, so every product page
   opens at the same size. */
.fi-hero { position: relative; padding: calc(var(--section-padding) + 80px) 0 var(--section-padding); overflow: hidden; }
.fi-hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 460px at 12% 6%, rgba(255, 123, 28, 0.13), transparent 60%),
    radial-gradient(900px 500px at 92% 88%, rgba(255, 123, 28, 0.07), transparent 62%);
  pointer-events: none;
}
.fi-hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: 54px; align-items: center;
}
.fi-hero__content { max-width: 620px; }
.fi-hero__content .fi-eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; gap: 8px; }
.fi-hero__content h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 8px; }
/* Specificity note: `.fi-hero__content p` is (0,1,1), so the subline needs the
   parent in its selector or the body colour wins over it. */
.fi-hero__content p.fi-hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.28rem); font-weight: 600;
  color: var(--orange); margin-bottom: 18px;
}
.fi-hero__content p { font-size: clamp(0.97rem, 2vw, 1.08rem); line-height: 1.75; color: var(--text-secondary); margin-bottom: 26px; }
.fi-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ══ THE DEVICE ════════════════════════════════════════════
   Drawn, not photographed: 11px of bezel, an inner hairline and a
   soft outer shadow read as a tablet without pretending to be one. */
.fi-pad { margin: 0; }
.fi-pad__frame {
  position: relative; padding: 11px;
  border-radius: 26px;
  background: linear-gradient(158deg, #1c1c21, #0d0d10);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.fi-pad__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 9px;
}
.fi-pad__app { font-size: 12px; font-weight: 800; color: var(--text-primary); }
.fi-pad__app b { color: var(--orange); font-weight: 800; }
.fi-pad__pencil {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 10px; color: var(--text-muted);
}
.fi-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #28c840;
  animation: live-pulse 1.4s ease-in-out infinite;
}
/* The live region's text is swapped when the field commits, and the two sentences do not
   wrap to the same number of lines at every width. Both share one grid cell — the longer
   one invisible — so the box measures its tallest state and the swap cannot resize the
   hero. This replaces a reserved min-height, which was only ever a guess at the wrap. */
.fi-pad__cap {
  margin-top: 12px; display: grid;
  font-size: 12px; line-height: 1.6;
  color: var(--text-muted); text-align: center;
}
.fi-pad__cap-ghost, .fi-pad__cap-live { grid-area: 1 / 1; }
.fi-pad__cap-ghost { visibility: hidden; }
/* The hero is drawn and the panels below are captures, so the hero says which it is —
   a reader who has just seen a real screen should not have to guess about this one. */
.fi-pad__note {
  margin: 6px 0 0; font-size: 11px; line-height: 1.55;
  color: var(--text-muted); opacity: 0.75; text-align: center;
}

/* ── stage: the viewer, dimmed, with the report sheet over it ──
   The desktop build opens Generate Report as a modal over the workspace, so the
   tablet does the same as a sheet. The film here is a backdrop and nothing may
   be pinned to it: object-fit crops it, and the traced outlines are aligned to
   the image's own pixels, so they live in the panels section instead. */
.fi-pad__stage {
  position: relative; display: flex; overflow: hidden;
  padding: 24px 22px 26px;
  background: #000; border-radius: 14px 14px 0 0;
}
.fi-stage__film { position: absolute; inset: 0; }
.fi-stage__film img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; }
/* Dimmed enough that the sheet is plainly the foreground, light enough that what
   is behind it still reads as a radiograph rather than as black. */
.fi-stage__film::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(76% 60% at 50% 44%, rgba(6, 6, 8, 0.34), rgba(6, 6, 8, 0.7));
}

/* ── the sheet ── */
.fi-sheet {
  position: relative; width: 100%; min-width: 0;
  border-radius: 16px; overflow: hidden;
  background: #101014; border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.6);
}
.fi-sheet__head {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 11px; background: var(--orange);
}
/* iPadOS sheets carry a grabber. It is the one piece of chrome that says this
   panel is a sheet you can pull down, not a page you navigated to. */
.fi-sheet__grab {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 4px; border-radius: 4px; background: rgba(10, 10, 12, 0.3);
}
.fi-sheet__title { font-size: 13px; font-weight: 800; color: #0A0A0C; }
.fi-sheet__x { margin-left: auto; display: inline-flex; color: rgba(10, 10, 12, 0.62); }
.fi-sheet__body { padding: 12px 14px 14px; }
.fi-sheet__legend {
  display: block; margin: 0 0 7px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange);
}

/* Template picker. The desktop build uses two radios; a tablet uses a segmented
   control, which is the same choice at a size a thumb can hit. */
.fi-seg {
  display: flex; gap: 4px; padding: 3px; margin-bottom: 13px;
  border-radius: 9px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.fi-seg__opt {
  flex: 1 1 0; min-width: 0; padding: 8px 6px; border-radius: 7px;
  font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-align: center;
}
.fi-seg__opt.is-on {
  background: rgba(255, 123, 28, 0.15); color: var(--orange);
  box-shadow: inset 0 0 0 1px rgba(255, 123, 28, 0.4);
}

/* What the app fills in by itself, so the only empty fields are the ones a
   person has to answer. */
.fi-auto {
  display: flex; flex-wrap: wrap; gap: 5px 14px; margin-bottom: 12px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 9.5px; color: var(--text-muted);
}
.fi-auto b { color: var(--text-secondary); font-weight: 600; }

/* ── fields ── */
.fi-field { margin-bottom: 10px; min-width: 0; }
.fi-fields2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fi-field__label {
  display: block; margin-bottom: 4px;
  font-size: 9.5px; font-weight: 600; color: var(--text-muted);
}
.fi-field__box {
  position: relative; display: flex; align-items: center;
  width: 100%; min-height: 44px; padding: 0 12px;
  -webkit-appearance: none; appearance: none;
  border-radius: 10px; border: 1px solid var(--border);
  background: #08080A; color: var(--text-primary);
  font-family: var(--font); font-size: 12px; text-align: left;
  overflow: hidden;
}
.fi-field__box--set { color: var(--text-secondary); }

/* The write target: the only control in this hero, and a button because the
   interaction is a tap — Enter and Space then drive it for free. */
.fi-field--write .fi-field__box {
  cursor: text; border-color: rgba(255, 123, 28, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 123, 28, 0.07);
  transition: border-color var(--transition), background var(--transition);
}
.fi-field--write .fi-field__box:hover { border-color: rgba(255, 123, 28, 0.72); }
.fi-field--write .fi-field__box:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.fi-field__cue {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.fi-field__cue svg { width: 14px; height: 14px; color: var(--orange); }
.fi-field__cue::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); animation: live-pulse 1.5s ease-in-out infinite;
}
/* Ink sits over the field, not in its text flow, so the strokes keep their own
   geometry while the typed value takes the baseline. It starts invisible: the
   dasharray that hides the strokes is set in script, and without this the whole
   word would flash on screen before that script runs. */
.fi-field__ink {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 108px; height: 34px; opacity: 0; transition: opacity var(--transition);
}
.fi-field.is-writing .fi-field__ink { opacity: 1; }
.fi-ink path {
  fill: none; stroke: #FFD9B0; stroke-width: 3.2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(255, 123, 28, 0.55));
}
.fi-field__typed {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-primary);
  opacity: 0; transition: opacity var(--transition);
}
.fi-field__chip {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  padding: 3px 7px; border-radius: 20px;
  background: rgba(255, 123, 28, 0.16); border: 1px solid rgba(255, 123, 28, 0.45);
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--orange);
  opacity: 0; transition: opacity var(--transition);
}
/* Recognised: the ink hands the field over to typed text and stands down. */
.fi-field.is-filled .fi-field__ink { opacity: 0; }
.fi-field.is-filled .fi-field__typed,
.fi-field.is-filled .fi-field__chip { opacity: 1; }
.fi-field.is-filled .fi-field__box {
  border-color: rgba(255, 123, 28, 0.6); background: var(--orange-glow);
}

/* Reserved from the start, revealed when there is something to clear. `visibility` keeps
   it out of the tab order and the accessibility tree while it holds its own space, which
   is what stops the sheet — and the whole page below the hero — from jumping when the
   field commits. Measured: unhiding it moved the next section down 39.3px. */
.fi-sheet__again {
  visibility: hidden;
  margin-top: 2px; padding: 9px 12px;
  border-radius: var(--radius-sm); border: 1px solid rgba(255, 123, 28, 0.45);
  background: transparent; color: var(--orange);
  font-family: var(--font); font-size: 10.5px; font-weight: 700; cursor: pointer;
  transition: background var(--transition);
}
.fi-field.is-filled ~ .fi-sheet__again { visibility: visible; }
.fi-sheet__again:hover { background: var(--orange-glow); }
.fi-sheet__foot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.fi-sheet__save {
  margin-right: auto; min-width: 0;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 9px; color: var(--text-muted);
}
.fi-sheet__btn {
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap;
}
.fi-sheet__btn--go { background: var(--orange); border-color: var(--orange); color: #0A0A0C; }

/* ── dock ── */
.fi-dock {
  display: flex; gap: 6px; padding: 8px;
  overflow-x: auto; scrollbar-width: thin;
  background: var(--bg-secondary); border-top: 1px solid var(--border);
  border-radius: 0 0 14px 14px;
}
.fi-dock__btn {
  flex: 0 0 auto;
  min-width: 46px; min-height: 46px;      /* the touch floor, asserted by the probe */
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.fi-dock__btn svg { width: 16px; height: 16px; }
.fi-dock__btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.fi-dock__btn.is-on { background: var(--orange); border-color: var(--orange); color: #0A0A0C; }

/* ══ TOUCH MODEL ═══════════════════════════════════════════ */
.fi-gests {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px; margin-bottom: 34px;
}
.fi-gest {
  position: relative; padding: 22px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--transition);
}
.fi-gest:hover { border-color: var(--border-hover); }
.fi-gest:hover .fi-rule { opacity: 1; }
.fi-gest__icon {
  width: 40px; height: 40px; margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--orange-glow); border: 1px solid rgba(255, 123, 28, 0.22);
  color: var(--orange);
}
.fi-gest__icon svg { width: 20px; height: 20px; }
.fi-gest h3 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.fi-gest p { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

.fi-swap {
  max-width: 940px; margin: 0 auto;
  padding: 24px 26px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.fi-swap__lead { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; }
.fi-swap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fi-swap li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px;
  font-size: 13px; line-height: 1.6; color: var(--text-secondary);
}
/* Numbered because the list is a set of four traded pairs, not a sequence to
   follow — the numbers are labels for reference, and they stay quiet. */
.fi-swap li span {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 10px; font-weight: 700; color: var(--orange); padding-top: 3px;
}

/* ══ HANDWRITING ═══════════════════════════════════════════ */
.fi-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fi-path {
  position: relative; padding: 26px 24px 24px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.fi-path:hover .fi-rule { opacity: 1; }
.fi-path__num {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 26px; font-weight: 800; color: rgba(255, 123, 28, 0.22);
}
.fi-path h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; padding-right: 40px; }
.fi-path p { font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); margin: 0; }

.fi-flow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px; align-items: stretch; margin-top: 22px;
}
.fi-flow__step {
  padding: 18px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.fi-flow__step b { font-size: 13px; color: var(--text-primary); }
.fi-flow__step span { font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.fi-flow__arrow { align-self: center; color: var(--orange); }
.fi-flow__arrow svg { width: 20px; height: 20px; display: block; }

/* ══ PANELS ════════════════════════════════════════════════ */
/* 1240px, not 1080: the desktop window is 1600 px of chrome, and the toolbar's own
   28 controls plus the signed-in user need the room or the last group scrolls out of
   sight — which is a piece of that window missing. */
.fi-tabs { max-width: 1240px; margin: 0 auto; }
.fi-tabs__list {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: 22px;
}
.fi-tab {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border-radius: 30px; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-secondary);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
}
.fi-tab svg { width: 15px; height: 15px; }
.fi-tab:hover { color: var(--text-primary); border-color: var(--border-hover); }
.fi-tab[aria-selected="true"] { background: var(--orange); border-color: var(--orange); color: #0A0A0C; }
.fi-panel { display: none; }
.fi-panel.is-active { display: block; }

/* ── the panels: the tablet build's own screens ──
   The drawn FoXpert Tab window that used to live here is gone. The owner supplied
   captures of the real iPad build, so the panels are what the Pro and Web pages
   already are: the app's screen at full width in a bordered card, caption under it. */
.fi-tabs__panels {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); box-shadow: var(--shadow-md);
}
.fi-panel img { width: 100%; height: auto; display: block; }

/* Scrollbars: the hero dock and the tab strip are what scroll now, and both take the
   app's own bar — an 8px track with a #444 thumb, sampled off the captures. Left to
   the platform, Chrome and Edge on Windows paint a light bar across a black dock. */
.fi-dock, .fi-tabs__list { scrollbar-width: thin; scrollbar-color: #444444 transparent; }
.fi-dock::-webkit-scrollbar, .fi-tabs__list::-webkit-scrollbar { width: 8px; height: 8px; }
.fi-dock::-webkit-scrollbar-track, .fi-tabs__list::-webkit-scrollbar-track { background: transparent; }
.fi-dock::-webkit-scrollbar-thumb, .fi-tabs__list::-webkit-scrollbar-thumb { background: #444444; border-radius: 4px; }
.fi-dock::-webkit-scrollbar-thumb:hover, .fi-tabs__list::-webkit-scrollbar-thumb:hover { background: #555555; }

.fi-panel__cap {
  padding: 14px 18px; border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.65; color: var(--text-secondary);
}
.fi-panel__cap b { color: var(--text-primary); font-weight: 600; }

/* ══ TOOLSET ═══════════════════════════════════════════════ */
.fi-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.fi-tool {
  position: relative; padding: 24px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--transition);
}
.fi-tool:hover { border-color: var(--border-hover); }
.fi-tool:hover .fi-rule { opacity: 1; }
.fi-tool h3 { display: flex; align-items: baseline; gap: 9px; font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.fi-tool h3 span {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px; font-weight: 700; color: var(--orange);
}
.fi-tool > p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.fi-pills { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fi-pills li {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  color: var(--text-secondary);
}
/* `.fi-tool > p` is (0,1,1) — the note has to carry the parent too or it loses
   its margin and colour to the base rule. */
.fi-tool > p.fi-tool__note {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12px; line-height: 1.55;
}
.fi-tool > p.fi-tool__note b { color: var(--orange); font-weight: 700; }

/* ══ COMPARISON ════════════════════════════════════════════ */
.fi-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fi-cmp__col {
  position: relative; padding: 26px 24px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.fi-cmp__col--this { border-color: rgba(255, 123, 28, 0.45); background: var(--orange-glow); }
.fi-cmp__col h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.fi-cmp__where {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 16px;
}
.fi-cmp__col ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.fi-cmp__col li { font-size: 13px; line-height: 1.6; color: var(--text-secondary); padding-left: 14px; position: relative; }
.fi-cmp__col li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
}
.fi-cmp__col li b { color: var(--text-primary); font-weight: 700; }
.fi-cmp__col a {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--orange); text-decoration: none;
}
.fi-cmp__col a:hover { text-decoration: underline; }
.fi-cmp__here {
  margin-top: auto; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}

/* ══ PLATFORM ══════════════════════════════════════════════ */
.fi-plat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.fi-plat__card {
  position: relative; padding: 24px 22px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color var(--transition);
}
.fi-plat__card:hover { border-color: var(--border-hover); }
.fi-plat__card:hover .fi-rule { opacity: 1; }
.fi-plat__icon {
  width: 40px; height: 40px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--orange-glow); border: 1px solid rgba(255, 123, 28, 0.22);
  color: var(--orange);
}
.fi-plat__icon svg { width: 20px; height: 20px; }
.fi-plat__card h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.fi-plat__card p { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ══ CTA ═══════════════════════════════════════════════════ */
.fi-cta { position: relative; padding: 92px 0; overflow: hidden; background: var(--bg-secondary); }
.fi-cta__bg {
  position: absolute; inset: 0;
  background: radial-gradient(760px 320px at 50% 0%, rgba(255, 123, 28, 0.16), transparent 65%);
  pointer-events: none;
}
.fi-cta__inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; }
.fi-cta__inner h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; margin-bottom: 14px; }
.fi-cta__inner p { font-size: 15px; line-height: 1.75; color: var(--text-secondary); margin-bottom: 26px; }
.fi-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .fi-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .fi-hero__content { max-width: 100%; }
  .fi-gests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fi-plat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .fi-cmp { grid-template-columns: minmax(0, 1fr); }
  .fi-flow { grid-template-columns: minmax(0, 1fr); }
  .fi-flow__arrow { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 768px) {
  .fi-hero { padding: calc(var(--section-padding) + 58px) 0 var(--section-padding); }
  .fi-gests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fi-tools, .fi-paths { grid-template-columns: minmax(0, 1fr); }
  .fi-pad__stage { padding: 14px 12px 16px; }
  .fi-tabs__list { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; }
  .fi-tab { flex: 0 0 auto; }
  .fi-hero__actions .mf-btn, .fi-cta__actions .mf-btn { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
  .fi-gests { grid-template-columns: minmax(0, 1fr); }
  .fi-plat { grid-template-columns: minmax(0, 1fr); }
  /* Client and Project side by side stop being legible before the sheet does. */
  .fi-fields2 { grid-template-columns: minmax(0, 1fr); }
  .fi-pad__stage { padding: 10px 8px 12px; }
  .fi-sheet__save { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fi-dot, .fi-field__cue::after { animation: none; }
  .fi-plat__card:hover, .fi-gest:hover { transform: none; }
  .mf-reveal { transition: none; }
}