/* ─────────────────────────────────────────────────────────────────────────────
   firm-landing.css — the three shareable onboarding pages (law firms,
   accountancy firms, businesses).

   One stylesheet for all three because they are the same page with different
   words. Splitting them was how the ICAI and BCI content got mixed up in the
   first place: two files drift, and one of them ends up describing the wrong
   regulator. The kind only ever changes CONTENT, never structure.

   Tokens come from app.css. Nothing here invents a colour.
   ───────────────────────────────────────────────────────────────────────────*/

.fl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.fl-hero {
  position: relative; overflow: hidden; border-radius: 22px;
  padding: 2.6rem 2.4rem 2.8rem; margin: .5rem 0 1.5rem; color: #fff;
  background: radial-gradient(130% 150% at 0% 0%, #4B3DA0 0%, #2A2360 52%, #1E1A3E 100%);
  box-shadow: var(--shadow-md);
}
.fl-hero::after {
  content: ""; position: absolute; right: -60px; top: -70px; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(17,211,138,.22), transparent 70%); pointer-events: none;
}
.fl-hero > * { position: relative; }
.fl-hero .eyebrow { font-size: .71rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.66); }
/* app.css paints every heading with --ink; on this ground that is black on black. */
.fl-hero h1 { color: #fff; font-family: Sora, Inter, sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.4rem); letter-spacing: -.022em; margin: .45rem 0 .55rem; max-width: 20ch; }
.fl-hero .lede { color: rgba(236,234,255,.88); font-size: 1rem; line-height: 1.65; max-width: 62ch; }
.fl-hero .fl-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.35rem; }
.fl-hero .fl-note { margin-top: .8rem; font-size: .82rem; color: rgba(236,234,255,.62); }
.fl-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.15rem; }
.fl-chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem;
  background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px; padding: .42rem .7rem; color: rgba(255,255,255,.92);
}
.fl-chip svg { width: 15px; height: 15px; }

/* ── sections ─────────────────────────────────────────────────────────────── */
.fl-sec { margin: 2.6rem 0 0; }
.fl-sec > h2 { font-family: Sora, Inter, sans-serif; font-size: 1.32rem; letter-spacing: -.018em; margin-bottom: .3rem; }
.fl-sec > .sub { color: var(--muted); font-size: .88rem; line-height: 1.55; max-width: 74ch; margin-bottom: 1.1rem; }

.fl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: .9rem; }
.fl-card {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 15px;
  padding: 1.15rem 1.25rem; box-shadow: var(--shadow-sm);
}
.fl-card .ic { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--aqua); color: var(--teal-deep); margin-bottom: .6rem; }
.fl-card .ic svg { width: 18px; height: 18px; }
.fl-card h3 { font-size: 1rem; letter-spacing: -.01em; margin-bottom: .25rem; }
.fl-card p { color: var(--muted); font-size: .87rem; line-height: 1.58; }

/* ── the fork: firm or individual ─────────────────────────────────────────── */
.fl-fork { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 780px) { .fl-fork { grid-template-columns: 1fr; } }
.fl-path { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.3rem 1.35rem; display: flex; flex-direction: column; }
.fl-path.primary { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(109,91,208,.09); }
.fl-path .tag { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-deep); }
.fl-path h3 { font-size: 1.12rem; margin: .3rem 0 .35rem; letter-spacing: -.012em; }
.fl-path .who { color: var(--ink-soft); font-size: .89rem; line-height: 1.6; }
.fl-path ul { list-style: none; margin: .85rem 0 0; padding: 0; }
.fl-path li { position: relative; padding-left: 1.35rem; margin-bottom: .45rem; font-size: .87rem; color: var(--ink); line-height: 1.5; }
.fl-path li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px;
  border-radius: 2px; background: var(--cta);
}
.fl-path .caveat {
  margin-top: .8rem; padding: .6rem .7rem; border-radius: 9px;
  background: #FFFAEB; border: 1px solid #F5E3B3; color: #7A5504; font-size: .82rem; line-height: 1.5;
}
.fl-path .price { margin-top: 1rem; font-size: .95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fl-path .price span { color: var(--muted); font-weight: 400; font-size: .84rem; }
.fl-path .go { margin-top: auto; padding-top: .95rem; }

/* ── steps ────────────────────────────────────────────────────────────────── */
.fl-steps { counter-reset: s; display: grid; gap: .7rem; }
.fl-step { position: relative; padding-left: 2.9rem; }
.fl-step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-dark); color: #fff; font-weight: 700; font-size: .85rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.fl-step h4 { font-size: .96rem; margin-bottom: .15rem; }
.fl-step p { color: var(--muted); font-size: .86rem; line-height: 1.55; }

/* ── price ────────────────────────────────────────────────────────────────── */
.fl-price {
  background: linear-gradient(180deg, #F7FDFB, #FFFFFF);
  border: 1px solid #CDEFE0; border-radius: 18px; padding: 1.5rem 1.6rem;
  display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap;
}
.fl-price .amt { font-family: Sora, Inter, sans-serif; font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fl-price .per { color: var(--muted); font-size: .85rem; }
.fl-price .body { flex: 1 1 320px; }
.fl-price ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.fl-price li { padding-left: 1.3rem; position: relative; font-size: .87rem; margin-bottom: .35rem; line-height: 1.5; }
.fl-price li::before { content: ""; position: absolute; left: 0; top: .45em; width: 7px; height: 7px; border-radius: 2px; background: var(--cta); }

/* ── rules note (the regulator strip) ─────────────────────────────────────── */
.fl-rules {
  border: 1px solid var(--border); border-left: 3px solid var(--teal);
  background: #fff; border-radius: 12px; padding: 1rem 1.15rem;
}
.fl-rules h3 { font-size: .98rem; margin-bottom: .3rem; }
.fl-rules p { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.fl-rules .src { margin-top: .5rem; font-size: .79rem; color: var(--muted-2); }

/* ── faq ──────────────────────────────────────────────────────────────────── */
.fl-faq { border-top: 1px solid var(--border-soft); }
.fl-faq details { border-bottom: 1px solid var(--border-soft); }
.fl-faq summary {
  cursor: pointer; padding: .85rem 0; font-weight: 600; font-size: .93rem;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.fl-faq summary::-webkit-details-marker { display: none; }
.fl-faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.2rem; line-height: 1; }
.fl-faq details[open] summary::after { content: "\2212"; }
.fl-faq details p { padding: 0 0 .9rem; color: var(--muted); font-size: .88rem; line-height: 1.65; max-width: 76ch; }

/* ── closing call ─────────────────────────────────────────────────────────── */
.fl-end {
  margin-top: 2.6rem; border-radius: 18px; padding: 1.9rem 1.8rem; color: #fff;
  background: linear-gradient(135deg, #1E1A3E, #2A2360);
}
.fl-end h2 { color: #fff; font-family: Sora, Inter, sans-serif; letter-spacing: -.02em; font-size: 1.3rem; }
.fl-end p { color: rgba(236,234,255,.82); font-size: .9rem; line-height: 1.6; max-width: 62ch; margin-top: .35rem; }
.fl-end .fl-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.1rem; }

@media (max-width: 560px) {
  .fl-hero { padding: 1.8rem 1.35rem 2rem; }
  .fl-price { padding: 1.2rem 1.25rem; }
  .fl-end { padding: 1.5rem 1.3rem; }
}

/* ── a ghost button that works on the dark hero ───────────────────────────────
   app.css paints `.btn-outline` with a WHITE background. Overriding only the
   text colour inline — `color:#fff` — therefore produced a white button with
   white text, invisible against its own fill. This is the same class of bug as
   the earlier contrast sweep, so it gets a real class rather than another
   inline patch. */
.fl-ondark {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
}
.fl-ondark:hover,
.fl-ondark:focus-visible {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}