/* Industry pages.

   Eight pages, one file. The shared part is small -- the kicker, headings,
   lead, buttons row, the "illustrative" note and the other-industries strip
   -- and each page then has its own hero and section layouts under its own
   prefix (bk- banking, fn- fintech, py- payments, mt- money transfer,
   cx- crypto, is- insurance, ec- e-commerce, cs- corporate services).

   Each page sets its accent on the wrapper (.in-bank, .in-fin ...) so the
   site's header, footer, buttons and final CTA stay the same everywhere
   while every industry reads as its own page. Every figure is labelled as
   illustrative and uses fictional names. */

.in {
  --ink: #161727; --body: #434357; --mute: #70707f;
  --line: rgba(22, 23, 39, .1);
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ok: #0f7a58; --ok-bg: #e9f7f1; --warn: #9a5b00; --warn-bg: #fdf4e5; --bad: #b42318; --bad-bg: #fdecea;
}
.in-bank { --in-a: #b8862b; --in-a-ink: #8a6212; --in-a-soft: #f7f0e1; --in-tint: #f8f8f9; }
.in-fin  { --in-a: #7c5cff; --in-a-ink: #5b3fe0; --in-a-soft: #f3f1fb; --in-a-light: #c5bceb; --in-tint: #f8f7fb; }
.in-pay  { --in-a: #0ea5a0; --in-a-ink: #0b8580; --in-a-soft: #e7f8f7; --in-a-light: #5eead4; --in-tint: #f2fbfa; }
.in-mt   { --in-a: #d9731a; --in-a-ink: #a4540c; --in-a-soft: #fdf1e3; --in-tint: #fbf6ee; }
.in-cx   { --in-a: #22d3ee; --in-a-ink: #0e7490; --in-a-soft: #e6fbfe; --in-a-light: #67e8f9; --in-tint: #f6f6f8; }
.in-ins  { --in-a: #1f8a5b; --in-a-ink: #146c46; --in-a-soft: #e6f5ed; --in-tint: #f3faf6; }
.in-ec   { --in-a: #e0457b; --in-a-ink: #b42e5f; --in-a-soft: #fdebf1; --in-tint: #fff7fa; }
.in-cs   { --in-a: #c2773a; --in-a-ink: #9a5a24; --in-a-soft: #f6efe7; --in-a-light: #e3a36b; --in-tint: #f7f4f0; }

/* ------------------------------------------------------------ shared */
.in-hero { position: relative; overflow: hidden; isolation: isolate; padding: 56px 0 72px; }
@media (min-width: 1024px) { .in-hero { padding: 84px 0 100px; } }
.in-hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .in-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 64px; } }
.in-copy { max-width: 600px; }

.in-kick {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12px/1 'Sora', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--in-a-ink);
}
.in-kick::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--in-a); }
.in-h1 {
  margin-top: 18px; font: 700 clamp(34px, 4.4vw, 54px)/1.06 'Sora', sans-serif;
  letter-spacing: -.035em; color: var(--ink); text-wrap: balance;
}
.in-h2 {
  margin-top: 14px; font: 600 clamp(28px, 3.2vw, 40px)/1.12 'Sora', sans-serif;
  letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
}
.in-lead { margin-top: 18px; font-size: 17.5px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.section-head .in-lead { margin-top: 16px; }
.in-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.in-ctas.center { justify-content: center; }
.in-note { margin-top: 14px; font-size: 12px; color: var(--mute); }
.in-note.center { text-align: center; }

.in-dark .in-h1, .in-dark .in-h2 { color: #fff; }
.in-dark .in-lead { color: rgba(255, 255, 255, .72); }
.in-dark .in-note { color: rgba(255, 255, 255, .45); }
.in-dark .in-kick { color: var(--in-a-light, var(--in-a)); }

.in-ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.in-ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.6; color: var(--body); }
.in-ticks li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--in-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* Statuses used in several heroes. */
.in-st { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.in-st.ok { background: var(--ok-bg); color: var(--ok); }
.in-st.warn { background: var(--warn-bg); color: var(--warn); }
.in-st.bad { background: var(--bad-bg); color: var(--bad); }

/* Other industries, at the foot of every page. */
.in-more { padding: 30px 0; border-top: 1px solid var(--line); }
.in-more .container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.in-more p { font: 700 12px 'Sora', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.in-more nav { display: flex; flex-wrap: wrap; gap: 8px; }
.in-more a {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14px; font-weight: 500; color: var(--body); transition: border-color .2s, color .2s, background .2s;
}
.in-more a:hover { border-color: var(--in-a); color: var(--ink); background: var(--in-a-soft); }
.in-more a.all { border-color: transparent; color: rgb(var(--brand-violet)); font-weight: 600; }

@keyframes in-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ================================================================ BANKING
   Light and editorial: navy and gold, a paper application file, a
   four-stop timeline and a ruled ledger of controls. */
.bk-hero { background: radial-gradient(55% 60% at 85% 25%, rgba(184, 134, 43, .12), transparent 65%), linear-gradient(180deg, #f9f9fb, #f1f1f4); }
.bk-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(22, 23, 39, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 23, 39, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(65% 75% at 72% 45%, #000, transparent 75%); mask-image: radial-gradient(65% 75% at 72% 45%, #000, transparent 75%);
}
.bk-file { position: relative; margin: 0; width: 100%; max-width: 520px; justify-self: center; }
.bk-stack { position: relative; }
.bk-file .in-note { margin-top: 30px; }
.bk-sheet {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(22, 23, 39, .04), 0 36px 70px -34px rgba(27, 27, 47, .45);
}
.bk-sheet.back { position: absolute; inset: 16px -12px -16px 16px; transform: rotate(2.4deg); background: #fbf7ee; box-shadow: 0 20px 40px -30px rgba(27, 27, 47, .35); }
.bk-head { position: relative; display: grid; gap: 6px; padding: 22px 24px 20px; background: #1b1b2f; color: #fff; }
.bk-kind { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #e3c47f; }
.bk-head b { font: 600 20px 'Sora', sans-serif; letter-spacing: -.01em; }
.bk-ref { position: absolute; right: 24px; top: 22px; font: 500 12px var(--mono); color: rgba(255, 255, 255, .55); }
.bk-parties { list-style: none; margin: 0; padding: 4px 0; }
.bk-parties li {
  display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 24px; border-top: 1px solid rgba(22, 23, 39, .07); animation: in-rise .6s both;
}
.bk-parties li:first-child { border-top: none; }
.bk-parties li:nth-child(2) { animation-delay: .15s; } .bk-parties li:nth-child(3) { animation-delay: .3s; } .bk-parties li:nth-child(4) { animation-delay: .45s; }
.bk-role { font-size: 12px; color: var(--mute); }
.bk-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bk-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 14px 24px;
  background: #fbf7ee; border-top: 1px dashed rgba(184, 134, 43, .45); font-size: 12.5px; color: #6b5a33;
}
.bk-foot b { font: 600 12.5px var(--mono); color: #8a6212; }
@media (max-width: 520px) {
  .bk-parties li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .bk-role { grid-column: 1 / -1; }
  .bk-ref { position: static; }
}

.bk-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; position: relative; }
.bk-line::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 21px; width: 2px; background: linear-gradient(180deg, #b8862b, rgba(184, 134, 43, .2)); }
.bk-line li { position: relative; padding-left: 70px; }
.bk-dot {
  position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #1b1b2f; color: #e3c47f; font: 700 15px 'Sora', sans-serif; box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(184, 134, 43, .4);
}
.bk-line h3 { font-size: 18px; padding-top: 10px; }
.bk-line p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--body); }
@media (min-width: 900px) {
  .bk-line { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .bk-line::before { top: 21px; bottom: auto; left: 12.5%; right: 12.5%; width: auto; height: 2px; background: linear-gradient(90deg, #b8862b, rgba(184, 134, 43, .25)); }
  .bk-line li { padding-left: 0; text-align: center; }
  .bk-dot { position: relative; margin: 0 auto; }
  .bk-line h3 { padding-top: 22px; }
}

.bk-ledger-wrap { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .bk-ledger-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .bk-ledger-intro { position: sticky; top: 110px; }
}
.bk-ledger { margin: 0; border-top: 2px solid #1b1b2f; counter-reset: bk; }
.bk-ledger > div { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); counter-increment: bk; }
@media (min-width: 640px) { .bk-ledger > div { grid-template-columns: 230px minmax(0, 1fr); gap: 32px; } }
.bk-ledger dt { font: 600 16px/1.35 'Sora', sans-serif; color: var(--ink); }
.bk-ledger dt::before { content: "0" counter(bk); display: block; margin-bottom: 6px; font: 600 12px var(--mono); color: #b8862b; }
.bk-ledger dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--body); }

/* ================================================================ FINTECH
   Dark violet and product-led: a phone running a sign-up with the check
   inside it, a bento grid, and a launch-to-licence path. */
.fn-hero { background: #0f0f1a; }
.fn-aurora {
  position: absolute; inset: -20% -10% -10% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 48% at 18% 30%, rgba(124, 92, 255, .38), transparent 70%), radial-gradient(34% 44% at 82% 62%, rgba(128, 70, 225, .3), transparent 70%);
  animation: fn-drift 18s ease-in-out infinite alternate;
}
@keyframes fn-drift { to { transform: translate3d(3%, -4%, 0) scale(1.05); } }
.fn-phone-wrap { position: relative; width: 100%; max-width: 460px; justify-self: center; display: flex; flex-direction: column; align-items: center; }
.fn-phone {
  position: relative; width: 280px; height: 560px; padding: 12px; border-radius: 46px;
  background: linear-gradient(160deg, #2d2e4f, #171829); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 44px 90px -34px rgba(124, 92, 255, .65);
}
.fn-notch { position: absolute; top: 22px; left: 50%; z-index: 2; width: 88px; height: 24px; margin-left: -44px; border-radius: 14px; background: #0f0f1a; }
.fn-screen { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 58px 20px 20px; border-radius: 34px; background: #fff; overflow: hidden; }
.fn-app { font: 700 13px 'Sora', sans-serif; color: #7c5cff; }
.fn-title { margin-bottom: 4px; font: 700 21px/1.15 'Sora', sans-serif; color: #151525; letter-spacing: -.02em; }
.fn-field { display: grid; gap: 2px; padding: 9px 12px; border: 1px solid #e9e8f1; border-radius: 12px; }
.fn-field span { font-size: 11px; color: #90909c; }
.fn-field b { font-size: 14px; font-weight: 600; color: #1b1b2f; }
.fn-check { position: relative; height: 54px; margin-top: 4px; border-radius: 12px; background: #f6f4fc; overflow: hidden; }
.fn-s1, .fn-s2 { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 12.5px; font-weight: 600; }
.fn-s1 { color: #5b3fe0; opacity: 0; animation: fn-s1 7s infinite; }
.fn-s2 { color: #0f7a58; background: #e9f7f1; opacity: 1; animation: fn-s2 7s infinite; }
.fn-s2 svg { color: #17b26a; flex-shrink: 0; }
.fn-spin { width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(124, 92, 255, .25); border-top-color: #7c5cff; animation: fn-spin .8s linear infinite; }
@keyframes fn-spin { to { transform: rotate(360deg); } }
@keyframes fn-s1 { 0%, 42% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes fn-s2 { 0%, 44% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
.fn-cta { margin-top: auto; padding: 13px; border-radius: 12px; background: #7c5cff; color: #fff; text-align: center; font-size: 14px; font-weight: 600; }
.fn-float {
  position: absolute; display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: fn-bob 6s ease-in-out infinite;
}
.fn-float span { font-size: 11px; color: rgba(255, 255, 255, .6); }
.fn-float b { font-size: 14px; }
.fn-float.f1 { left: 0; top: 20%; }
.fn-float.f2 { right: 0; bottom: 24%; animation-delay: -3s; }
@keyframes fn-bob { 50% { transform: translateY(-8px); } }
@media (max-width: 520px) { .fn-float { display: none; } }

.fn-bento-sec { background: #f8f7fb; }
.fn-bento { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .fn-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fn-b.big { grid-column: span 2; grid-row: span 2; }
}
.fn-b {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 22px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(22, 23, 39, .04);
  transition: transform .25s, box-shadow .25s;
}
.fn-b:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(91, 63, 224, .35); }
.fn-b-k { font: 600 12px var(--mono); color: var(--in-a-ink); }
.fn-b h3 { font-size: 19px; letter-spacing: -.015em; }
.fn-b p { font-size: 14.5px; line-height: 1.6; color: var(--body); }
.fn-b.big { padding: 32px; background: radial-gradient(70% 60% at 100% 0%, rgba(124, 92, 255, .35), transparent 70%), linear-gradient(160deg, #20213a, #0f0f1a); border: none; }
.fn-b.big .fn-b-k { color: var(--in-a-light); }
.fn-b.big h3 { color: #fff; font-size: clamp(22px, 2.4vw, 28px); }
.fn-b.big p { color: rgba(255, 255, 255, .7); max-width: 520px; }
.fn-io { display: grid; gap: 12px; margin-top: auto; padding-top: 18px; }
@media (min-width: 640px) { .fn-io { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.fn-io-box { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.fn-io-box p { font-size: 11px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--in-a-light) !important; }
.fn-io-box ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: #fff; }
.fn-io-arrow { display: grid; place-items: center; color: var(--in-a-light); }
@media (max-width: 639px) { .fn-io-arrow svg { transform: rotate(90deg); } }

.fn-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .fn-path { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fn-path li { position: relative; padding: 32px 26px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.fn-path li::before { content: ""; position: absolute; top: 0; left: 0; height: 4px; background: linear-gradient(90deg, #7c5cff, #8046e1); }
.fn-path li:nth-child(1)::before { width: 33%; } .fn-path li:nth-child(2)::before { width: 66%; } .fn-path li:nth-child(3)::before { width: 100%; }
.fn-when { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--in-a-soft); color: var(--in-a-ink); font-size: 12px; font-weight: 700; }
.fn-path h3 { margin-top: 16px; font-size: 19px; }
.fn-path p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--body); }

/* =============================================================== PAYMENTS
   Dark teal: a centred head over two payment lanes with the check in the
   middle of each, then two panels and an engineering spec sheet. */
.py-hero { background: radial-gradient(60% 55% at 50% 0%, rgba(14, 165, 160, .28), transparent 70%), linear-gradient(180deg, #04161b, #0b0b14); }
.py-copy { max-width: 780px; margin: 0 auto; text-align: center; }
.py-copy .in-kick { justify-content: center; }
.py-rail { max-width: 1040px; margin: 56px auto 0; display: grid; gap: 16px; }
.py-lane {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, 70px) minmax(0, 1.15fr) minmax(40px, 70px) minmax(0, 1fr);
  align-items: center; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .09);
}
.py-end { padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); min-width: 0; }
.py-end span, .py-gate span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.py-end b, .py-gate b { display: block; margin-top: 4px; font-size: 15px; color: #fff; overflow-wrap: anywhere; }
.py-gate { padding: 14px 16px; border-radius: 12px; text-align: center; background: linear-gradient(140deg, rgba(14, 165, 160, .28), rgba(14, 165, 160, .08)); border: 1px solid rgba(94, 234, 212, .4); box-shadow: 0 0 40px -12px rgba(94, 234, 212, .5); }
.py-gate span { color: var(--in-a-light); }
.py-track { position: relative; height: 2px; background: repeating-linear-gradient(90deg, rgba(94, 234, 212, .5) 0 6px, transparent 6px 12px); }
.py-pulse { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--in-a-light); box-shadow: 0 0 14px var(--in-a-light); animation: py-move 2.4s linear infinite; }
.py-pulse.d2 { animation-delay: 1.2s; }
@keyframes py-move { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 10px); opacity: 0; } }
.py-out { grid-column: 1 / -1; justify-self: end; margin-top: 14px; }
.py-out.ok { background: rgba(23, 178, 106, .14); color: #5fd3a0; }
.py-out.warn { background: rgba(245, 165, 36, .14); color: #f5c46b; }
@media (max-width: 759px) {
  .py-lane { grid-template-columns: 1fr; justify-items: stretch; }
  .py-track { width: 2px; height: 30px; margin: 0 auto; background: repeating-linear-gradient(180deg, rgba(94, 234, 212, .5) 0 6px, transparent 6px 12px); }
  .py-pulse { top: 0; left: -4px; animation-name: py-move-v; }
  .py-out { justify-self: center; }
}
@keyframes py-move-v { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 10px); opacity: 0; } }

.py-panels { display: grid; gap: 20px; }
@media (min-width: 900px) { .py-panels { grid-template-columns: 1fr 1fr; } }
.py-panel { position: relative; overflow: hidden; padding: 38px 34px 40px; border-radius: 24px; background: linear-gradient(170deg, #eafaf9, #fff 62%); border: 1px solid rgba(14, 165, 160, .22); }
.py-panel::after { content: attr(data-n); position: absolute; right: 22px; bottom: -34px; font: 800 140px/1 'Sora', sans-serif; color: rgba(14, 165, 160, .08); pointer-events: none; }
.py-panel.alt { background: linear-gradient(170deg, #0b2530, #07161d); border-color: transparent; }
.py-panel.alt::after { color: rgba(94, 234, 212, .07); }
.py-panel.alt h3 { color: #fff; }
.py-panel.alt .in-ticks li { color: rgba(255, 255, 255, .78); }
.py-tag { font: 700 11px 'Sora', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--in-a-ink); }
.py-panel.alt .py-tag { color: var(--in-a-light); }
.py-panel h3 { margin-top: 14px; font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -.02em; }

.py-spec-wrap { display: grid; gap: 40px; }
@media (min-width: 1024px) { .py-spec-wrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; } }
.py-spec { margin: 0; display: grid; gap: 1px; overflow: hidden; border-radius: 18px; background: rgba(22, 23, 39, .08); border: 1px solid rgba(22, 23, 39, .08); }
@media (min-width: 640px) { .py-spec { grid-template-columns: 1fr 1fr; } }
.py-spec > div { padding: 22px 22px 24px; background: #fff; }
.py-spec dt { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--in-a-ink); }
.py-spec dd { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--body); }

/* ========================================================= MONEY TRANSFER
   Warm and paper-like: a torn-edge transfer receipt, a common-name
   before/after, and a three-part record strip. */
.mt-hero { background: radial-gradient(50% 60% at 80% 30%, rgba(217, 115, 26, .12), transparent 70%), #fbf6ee; }
.mt-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(164, 84, 12, .16) 1.2px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(55% 70% at 78% 45%, #000, transparent 75%); mask-image: radial-gradient(55% 70% at 78% 45%, #000, transparent 75%);
}
.mt-rwrap { width: 100%; max-width: 440px; justify-self: center; }
.mt-receipt {
  position: relative; margin: 0; padding: 24px 24px 26px; border-radius: 18px 18px 0 0; background: #fff;
  filter: drop-shadow(0 26px 34px rgba(120, 70, 20, .18)) drop-shadow(0 1px 1px rgba(0, 0, 0, .05));
}
.mt-receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: linear-gradient(135deg, #fff 6px, transparent 0) 0 0 / 12px 12px repeat-x, linear-gradient(-135deg, #fff 6px, transparent 0) 0 0 / 12px 12px repeat-x;
}
.mt-r-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding-bottom: 16px; border-bottom: 1px dashed rgba(22, 23, 39, .16); }
.mt-r-top span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.mt-r-top b { font: 600 16px var(--mono); color: var(--ink); }
.mt-corr { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--in-a-soft); color: var(--in-a-ink) !important; }
.mt-party { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding-top: 18px; }
.mt-flag { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--in-a-soft); color: var(--in-a-ink); font: 700 12px 'Sora', sans-serif; }
.mt-party small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.mt-party b { display: block; margin-top: 2px; font-size: 16px; color: var(--ink); }
.mt-party em { font-style: normal; font-size: 12.5px; color: var(--body); }
.mt-link { position: relative; height: 34px; margin: 6px 0 -6px 19px; border-left: 2px dashed rgba(217, 115, 26, .45); }
.mt-link i { position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--in-a); animation: mt-fly 2.6s ease-in-out infinite; }
@keyframes mt-fly { 0% { transform: translateY(-14px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
.mt-r-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(22, 23, 39, .16); font-size: 12.5px; color: var(--body); }
.mt-r-foot b { font: 600 12.5px var(--mono); color: var(--in-a-ink); }
.mt-rwrap .in-note { margin-top: 26px; }

.mt-compare { display: grid; gap: 18px; max-width: 1060px; margin: 0 auto; }
@media (min-width: 900px) { .mt-compare { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: stretch; } }
.mt-col { padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.mt-col.good { border-color: rgba(217, 115, 26, .45); box-shadow: 0 24px 50px -32px rgba(217, 115, 26, .55); }
.mt-col-h { font: 700 12px 'Sora', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.mt-q { margin-top: 10px; font: 600 18px 'Sora', sans-serif; color: var(--ink); }
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.mt-chips span { padding: 6px 10px; border-radius: 8px; background: #f5f5f7; border: 1px solid rgba(22, 23, 39, .06); font-size: 12.5px; color: var(--body); }
.mt-col.good .mt-chips span { opacity: .4; text-decoration: line-through; text-decoration-color: rgba(22, 23, 39, .35); }
.mt-col.good .mt-chips span.keep { opacity: 1; text-decoration: none; background: var(--in-a-soft); border-color: rgba(217, 115, 26, .45); color: #8a4508; font-weight: 600; }
.mt-count { margin-top: 22px; font-size: 14px; color: var(--body); }
.mt-count b { margin-right: 6px; font: 700 30px 'Sora', sans-serif; color: var(--ink); }
.mt-col.good .mt-count b { color: var(--in-a-ink); }
.mt-arrow { display: grid; place-items: center; color: var(--in-a); }
@media (max-width: 899px) { .mt-arrow svg { transform: rotate(90deg); } }

.mt-rec { background: #fff; }
.mt-strip { display: grid; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid rgba(217, 115, 26, .25); }
.mt-strip > div { padding: 30px 28px; }
.mt-strip > div + div { border-top: 1px dashed rgba(217, 115, 26, .4); }
@media (min-width: 900px) {
  .mt-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mt-strip > div + div { border-top: none; border-left: 1px dashed rgba(217, 115, 26, .4); }
}
.mt-n { font: 800 46px/1 'Sora', sans-serif; color: transparent; -webkit-text-stroke: 1.5px var(--in-a); }
.mt-strip h3 { margin-top: 16px; font-size: 18px; }
.mt-strip p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--body); }

/* ================================================================= CRYPTO
   Near-black with a cyan grid: an account-review queue of people and
   companies (not wallets), a covered / use-alongside split, and a dark
   evidence row. */
.cx-hero { background: #07070d; }
.cx-grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(34, 211, 238, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(60% 70% at 70% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(60% 70% at 70% 40%, #000 30%, transparent 75%);
}
.cx-hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(40% 45% at 75% 35%, rgba(34, 211, 238, .16), transparent 70%), radial-gradient(35% 40% at 15% 85%, rgba(139, 92, 246, .18), transparent 70%); }
.cx-queue {
  position: relative; width: 100%; max-width: 560px; justify-self: center; overflow: hidden; border-radius: 18px;
  background: rgba(12, 12, 20, .88); border: 1px solid rgba(34, 211, 238, .2);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .08), 0 40px 90px -40px rgba(34, 211, 238, .45);
}
.cx-queue::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 60px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .08), transparent); animation: cx-scan 4.5s linear infinite;
}
@keyframes cx-scan { from { transform: translateY(-60px); } to { transform: translateY(340px); } }
.cx-q-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.cx-live { display: inline-flex; align-items: center; gap: 8px; color: var(--in-a-light); }
.cx-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--in-a); box-shadow: 0 0 10px var(--in-a); animation: cx-blink 1.6s ease-in-out infinite; }
@keyframes cx-blink { 50% { opacity: .3; } }
.cx-row { display: grid; grid-template-columns: 84px 78px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 15px 18px; border-bottom: 1px solid rgba(255, 255, 255, .05); animation: in-rise .6s both; }
.cx-row:nth-of-type(2) { animation-delay: .12s; } .cx-row:nth-of-type(3) { animation-delay: .24s; } .cx-row:nth-of-type(4) { animation-delay: .36s; } .cx-row:nth-of-type(5) { animation-delay: .48s; }
.cx-row code { font: 500 12px var(--mono); color: var(--in-a-light); }
.cx-type { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.cx-row b { min-width: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; color: #fff; }
.cx-row .in-st.ok { background: rgba(23, 178, 106, .14); color: #5fd3a0; }
.cx-row .in-st.warn { background: rgba(245, 165, 36, .14); color: #f5c46b; }
.cx-row .in-st.bad { background: rgba(240, 68, 56, .16); color: #f98080; }
.cx-queue .in-note { margin: 0; padding: 12px 18px 14px; }
@media (max-width: 560px) {
  .cx-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .cx-row code, .cx-type { grid-row: 1; }
  .cx-row code { grid-column: 1; } .cx-type { grid-column: 2; justify-self: end; }
}

.cx-split { display: grid; gap: 20px; max-width: 1060px; margin: 0 auto; }
@media (min-width: 900px) { .cx-split { grid-template-columns: 1.15fr .85fr; } }
.cx-yes, .cx-also { padding: 32px 30px; border-radius: 22px; }
.cx-yes { background: #fff; border: 1px solid rgba(34, 211, 238, .45); box-shadow: 0 24px 60px -36px rgba(14, 116, 144, .45); }
.cx-also { background: #f7f7f8; border: 1px solid var(--line); }
.cx-yes h3, .cx-also h3 { font-size: 20px; }
.cx-also > p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.cx-dash { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.cx-dash li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.6; color: var(--body); }
.cx-dash li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 12px; height: 2px; border-radius: 2px; background: #9f9fad; }

.cx-ev { background: #07070d; }
.cx-ev-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .cx-ev-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cx-ev-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cx-ev-card { padding: 26px 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .08); transition: border-color .25s; }
.cx-ev-card:hover { border-color: rgba(34, 211, 238, .45); }
.cx-ev-card code { font: 600 12px var(--mono); color: var(--in-a-light); }
.cx-ev-card h3 { margin-top: 14px; font-size: 17px; color: #fff; }
.cx-ev-card p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .62); }

/* ============================================================== INSURANCE
   Soft mint: a policy's life as a line with a screening at each stop, the
   four kinds of party, and an adverse-media profile for claims teams. */
.is-hero { background: radial-gradient(45% 60% at 10% 10%, rgba(31, 138, 91, .12), transparent 70%), radial-gradient(40% 50% at 95% 40%, rgba(143, 211, 176, .22), transparent 70%), linear-gradient(180deg, #f3faf6, #fff); }
.is-copy { max-width: 780px; margin: 0 auto; text-align: center; }
.is-copy .in-kick { justify-content: center; }
.is-journey { max-width: 1100px; margin: 56px auto 0; padding: 36px 28px 26px; border-radius: 26px; background: #fff; border: 1px solid rgba(31, 138, 91, .18); box-shadow: 0 30px 70px -44px rgba(20, 108, 70, .5); }
.is-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; position: relative; }
.is-line::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 11px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #1f8a5b, #8fd3b0); }
.is-line li { position: relative; padding-left: 44px; }
.is-stop { position: absolute; left: 0; top: 0; z-index: 1; width: 25px; height: 25px; border-radius: 50%; background: #fff; border: 3px solid #1f8a5b; box-shadow: 0 0 0 6px rgba(31, 138, 91, .12); }
.is-line li:nth-child(odd) .is-stop { animation: is-ping 3.2s ease-out infinite; }
.is-line li:nth-child(2) .is-stop { animation: is-ping 3.2s .8s ease-out infinite; }
.is-line li:nth-child(4) .is-stop { animation: is-ping 3.2s 2.4s ease-out infinite; }
.is-line li:nth-child(3) .is-stop { animation-delay: 1.6s; }
@keyframes is-ping { 0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, .35); } 60%, 100% { box-shadow: 0 0 0 12px rgba(31, 138, 91, 0); } }
.is-line b { display: block; font: 600 16px 'Sora', sans-serif; color: var(--ink); }
.is-line em { display: inline-block; margin-top: 8px; padding: 5px 11px; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 600; color: var(--in-a-ink); background: var(--in-a-soft); }
@media (min-width: 900px) {
  .is-line { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .is-line::before { top: 11px; bottom: auto; left: 12.5%; right: 12.5%; width: auto; height: 3px; background: linear-gradient(90deg, #1f8a5b, #8fd3b0); }
  .is-line li { padding-left: 0; text-align: center; }
  .is-stop { position: relative; display: block; margin: 0 auto 16px; }
}
.is-brokers { margin-top: 28px; padding-top: 20px; border-top: 1px dashed rgba(31, 138, 91, .3); font-size: 14px; color: var(--body); text-align: center; }
.is-brokers b { color: var(--ink); }

.is-who { display: grid; gap: 16px; }
@media (min-width: 640px) { .is-who { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .is-who { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.is-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.is-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -28px rgba(20, 108, 70, .45); }
.is-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--in-a-soft); color: var(--in-a-ink); }
.is-card h3 { margin-top: 6px; font-size: 18px; }
.is-card p { font-size: 14.5px; line-height: 1.6; color: var(--body); }
.is-as { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.is-as span { padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--in-a-ink); background: var(--in-a-soft); }

.is-adm { background: #f3faf6; }
.is-adm-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .is-adm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.is-profile { margin: 0; width: 100%; max-width: 480px; justify-self: center; padding: 26px; border-radius: 22px; background: #fff; border: 1px solid rgba(31, 138, 91, .2); box-shadow: 0 30px 60px -40px rgba(20, 108, 70, .5); }
.is-p-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.is-p-head span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.is-p-head b { font: 600 17px 'Sora', sans-serif; color: var(--ink); }
.is-p-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.is-p-stats div { padding: 16px; border-radius: 14px; background: #f6f8f7; }
.is-p-stats div.hot { background: var(--warn-bg); }
.is-p-stats b { display: block; font: 700 28px 'Sora', sans-serif; color: var(--ink); }
.is-p-stats .hot b { color: var(--warn); }
.is-p-stats span { font-size: 12.5px; color: var(--body); }
.is-p-list { margin-top: 16px; }
.is-p-list p { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.is-p-list div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.is-p-list span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--body); }

/* ============================================================= E-COMMERCE
   Rose: a seller-onboarding board, the seller-owner-payout chain, and a
   two-by-two of what scales. */
.ec-hero { background: radial-gradient(45% 55% at 90% 20%, rgba(224, 69, 123, .14), transparent 70%), radial-gradient(35% 45% at 60% 95%, rgba(255, 176, 120, .16), transparent 70%), #fff7fa; }
.ec-board {
  position: relative; width: 100%; max-width: 580px; justify-self: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(224, 69, 123, .2);
  box-shadow: 0 34px 70px -44px rgba(180, 46, 95, .55);
}
.ec-col { display: flex; flex-direction: column; gap: 8px; min-height: 240px; padding: 10px; border-radius: 14px; background: #fbf5f8; }
.ec-col-h { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 6px; font: 600 11.5px 'Sora', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ec-col-h i { padding: 1px 8px; border-radius: 999px; background: #fff; font-style: normal; color: var(--ink); }
.ec-card { display: grid; gap: 4px; padding: 11px 12px; border-radius: 11px; background: #fff; border: 1px solid rgba(22, 23, 39, .07); box-shadow: 0 1px 2px rgba(22, 23, 39, .05); animation: in-rise .6s both; }
.ec-col:nth-child(2) .ec-card { animation-delay: .25s; } .ec-col:nth-child(3) .ec-card { animation-delay: .5s; }
.ec-card b { font-size: 13px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.ec-card span { font-size: 11.5px; color: var(--mute); }
.ec-card.ok span { color: var(--ok); }
.ec-card.warn { border-color: rgba(245, 165, 36, .5); box-shadow: 0 0 0 3px rgba(245, 165, 36, .12); }
.ec-card.warn span { color: var(--warn); }
.ec-card.live { border-color: rgba(224, 69, 123, .35); }
.ec-card.live span { color: var(--in-a-ink); }
.ec-board .in-note { grid-column: 1 / -1; margin: 2px 4px 0; }
@media (max-width: 480px) { .ec-board { gap: 8px; padding: 10px; } .ec-col { padding: 7px; min-height: 200px; } .ec-card { padding: 9px; } }

.ec-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 900px) { .ec-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } }
.ec-chain li { position: relative; padding: 30px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
@media (min-width: 900px) {
  .ec-chain li:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -35px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
    background: var(--in-a) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6M8.5 5.5 11 8l-2.5 2.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
    box-shadow: 0 0 0 6px #fff;
  }
}
.ec-who { font: 700 12px 'Sora', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--in-a-ink); }
.ec-chain h3 { margin-top: 12px; font-size: 20px; }
.ec-chain p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.ec-as { display: inline-block; margin-top: 16px; padding: 4px 10px; border-radius: 6px; background: var(--in-a-soft); color: var(--in-a-ink); font-size: 12px; font-weight: 600; }

.ec-scale-sec { background: #fff7fa; }
.ec-scale { display: grid; gap: 28px 40px; max-width: 1000px; margin: 0 auto; }
@media (min-width: 760px) { .ec-scale { grid-template-columns: 1fr 1fr; } }
.ec-feat { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; }
.ec-feat-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--in-a-ink); border: 1px solid rgba(224, 69, 123, .25); box-shadow: 0 10px 24px -16px rgba(180, 46, 95, .5); }
.ec-feat h3 { font-size: 18px; }
.ec-feat p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--body); }

/* ===================================================== CORPORATE SERVICES
   Slate and copper: an ownership structure with each party screened as its
   own kind of search, a party-to-search table, and a client file. */
.cs-hero { background: radial-gradient(45% 60% at 80% 30%, rgba(194, 119, 58, .18), transparent 70%), linear-gradient(180deg, #0f0f1a, #0b0b14); }
.cs-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 14px);
}
.cs-tree { position: relative; margin: 0; width: 100%; max-width: 580px; justify-self: center; padding: 28px 22px 22px; border-radius: 22px; background: linear-gradient(170deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); }
.cs-node { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; padding: 13px 14px; border-radius: 12px; background: #161727; border: 1px solid rgba(255, 255, 255, .1); animation: in-rise .6s both; }
.cs-node span { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.cs-node b { font-size: 14px; color: #fff; overflow-wrap: anywhere; }
.cs-node .in-st { justify-self: start; margin-top: 6px; font-size: 11px; padding: 3px 8px; }
.cs-node .in-st.ok { background: rgba(23, 178, 106, .15); color: #5fd3a0; }
.cs-node .in-st.bad { background: rgba(240, 68, 56, .17); color: #f98080; }
.cs-search { font: 500 10.5px var(--mono); color: var(--in-a-light); }
.cs-node.top { width: min(100%, 300px); margin: 0 auto; background: linear-gradient(160deg, #1f2036, #161727); border-color: rgba(194, 119, 58, .55); }
.cs-lines { display: block; width: 100%; height: 48px; overflow: visible; }
.cs-lines path { fill: none; stroke: rgba(227, 163, 107, .55); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cs-kids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cs-kids .cs-node:nth-child(1) { animation-delay: .2s; } .cs-kids .cs-node:nth-child(2) { animation-delay: .35s; } .cs-kids .cs-node:nth-child(3) { animation-delay: .5s; }
.cs-tree .in-note { margin: 16px 0 0; }
.cs-lines line { display: none; stroke: rgba(227, 163, 107, .55); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
@media (max-width: 520px) {
  .cs-kids { grid-template-columns: 1fr; }
  .cs-lines { height: 24px; }
  .cs-lines path { display: none; }
  .cs-lines line { display: inline; }
}

.cs-matrix { overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(22, 23, 39, .04); }
.cs-row { display: grid; gap: 6px 28px; padding: 20px 26px; border-top: 1px solid var(--line); }
.cs-row:first-child { border-top: none; }
.cs-row.head { display: none; padding: 14px 26px; background: #0f0f1a; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
@media (min-width: 900px) {
  .cs-row { grid-template-columns: minmax(0, 1.1fr) 170px minmax(0, 1.6fr); align-items: center; }
  .cs-row.head { display: grid; }
}
.cs-party { font: 600 16px 'Sora', sans-serif; color: var(--ink); }
.cs-type { justify-self: start; padding: 5px 11px; border-radius: 8px; background: var(--in-a-soft); color: var(--in-a-ink); font-size: 13px; font-weight: 700; }
.cs-cmp { font-size: 14.5px; line-height: 1.6; color: var(--body); }

.cs-file-sec { background: #f7f4f0; }
.cs-file-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .cs-file-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.cs-folder { position: relative; width: 100%; max-width: 500px; justify-self: center; margin-top: 22px; padding: 30px 22px 22px; border-radius: 4px 18px 18px 18px; background: var(--in-a-soft); border: 1px solid rgba(194, 119, 58, .35); box-shadow: 0 30px 60px -40px rgba(120, 70, 30, .5); }
.cs-folder-tab { position: absolute; left: -1px; top: -26px; padding: 5px 16px 6px; border-radius: 10px 10px 0 0; background: var(--in-a-soft); border: 1px solid rgba(194, 119, 58, .35); border-bottom: none; font: 600 12px var(--mono); color: var(--in-a-ink); }
.cs-doc { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(22, 23, 39, .07); box-shadow: 0 1px 2px rgba(22, 23, 39, .05); }
.cs-doc + .cs-doc { margin-top: 8px; }
.cs-pdf { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 6px; background: #fdecea; color: #b42318; font: 700 9.5px 'Sora', sans-serif; letter-spacing: .04em; }
.cs-doc b { display: block; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.cs-doc small { font-size: 12px; color: var(--mute); }
.cs-folder .in-note { margin: 14px 2px 0; }


/* ===================================================== added sections
   One more section per page, each its own layout, and a shared FAQ. */
.in-tinted { background: var(--in-tint); }

/* FAQ: intro on the left, questions on the right. */
.in-faq-wrap { display: grid; gap: 36px; }
@media (min-width: 1024px) {
  .in-faq-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .in-faq-intro { position: sticky; top: 110px; }
}
.in-faq-intro a { color: var(--in-a-ink); font-weight: 600; }
.in-faq-intro a:hover { text-decoration: underline; }
.in-faq { display: grid; gap: 12px; }
.in-faq details { border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.in-faq details[open] { border-color: var(--in-a); box-shadow: 0 16px 36px -28px rgba(22, 23, 39, .35); }
.in-faq summary {
  position: relative; display: block; cursor: pointer; list-style: none; padding: 20px 56px 20px 22px;
  font: 600 16px/1.4 'Sora', sans-serif; color: var(--ink);
}
.in-faq summary::-webkit-details-marker { display: none; }
.in-faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  background: var(--in-a-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8M4 8h8' stroke='%23334467' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .25s;
}
.in-faq details[open] summary::after { transform: rotate(45deg); }
.in-faq summary:focus-visible { outline: 2px solid var(--in-a); outline-offset: 2px; border-radius: 16px; }
.in-faq details p { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--body); }

/* Banking: inside a match, on navy. */
.bk-match-sec { background: #1b1b2f; }
.bk-match-sec .in-kick { color: #e3c47f; }
.bk-match-sec .in-ticks li { color: rgba(255, 255, 255, .78); }
.bk-match-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .bk-match-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.bk-rec { margin: 0; width: 100%; max-width: 500px; justify-self: center; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.bk-rec-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: #fbf7ee; }
.bk-rec-head span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a6212; }
.bk-rec-head b { display: block; margin-top: 4px; font: 600 20px 'Sora', sans-serif; color: var(--ink); }
.bk-score { text-align: right; }
.bk-score b { font: 700 26px 'Sora', sans-serif; color: #1b1b2f; margin: 0; }
.bk-score span { letter-spacing: .04em; text-transform: none; color: var(--mute); font-weight: 500; }
.bk-rec-body { margin: 0; padding: 6px 22px; }
.bk-rec-body > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid rgba(22, 23, 39, .07); }
.bk-rec-body > div:first-child { border-top: none; }
.bk-rec-body dt { font-size: 12.5px; color: var(--mute); }
.bk-rec-body dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.bk-src { display: inline-flex; align-items: center; gap: 6px; color: #5420ac; }
.bk-src::after { content: "\2197"; font-size: 12px; }
.bk-rec .in-note { margin: 0; padding: 12px 22px 16px; background: #fbfbfb; border-top: 1px solid var(--line); color: var(--mute); }
@media (max-width: 480px) { .bk-rec-body > div { grid-template-columns: 1fr; gap: 2px; } }

/* Fintech: three answers, three branches. */
.fn-flow-sec { background: #0f0f1a; position: relative; overflow: hidden; }
.fn-flow-sec::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 50% 0%, rgba(124, 92, 255, .25), transparent 70%); pointer-events: none; }
.fn-flow { position: relative; display: grid; justify-items: center; }
.fn-src { position: relative; padding: 16px 26px; border-radius: 16px; text-align: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(197, 188, 235, .4); box-shadow: 0 0 40px -10px rgba(124, 92, 255, .6); }
.fn-src span { display: block; font: 600 12px var(--mono); color: var(--in-a-light); }
.fn-src b { display: block; margin-top: 4px; font-size: 16px; color: #fff; }
.fn-src::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 32px; margin-left: -1px; background: rgba(197, 188, 235, .45); }
.fn-branches { position: relative; width: 100%; display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) {
  .fn-branches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 30px; }
  .fn-branches::before { content: ""; position: absolute; top: 0; left: 16.67%; right: 16.67%; height: 2px; background: rgba(197, 188, 235, .45); }
  .fn-br::before { content: ""; position: absolute; left: 50%; top: -30px; width: 2px; height: 30px; margin-left: -1px; background: rgba(197, 188, 235, .45); }
}
.fn-br { position: relative; padding: 26px 24px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.fn-br-k { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); letter-spacing: .04em; }
.fn-br-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.fn-br.ok .fn-br-k { color: #5fd3a0; } .fn-br.warn .fn-br-k { color: #f5c46b; } .fn-br.bad .fn-br-k { color: #f98080; }
.fn-br h3 { margin-top: 12px; font-size: 19px; color: #fff; }
.fn-br p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .68); }

/* Payments: a key for every job. */
.py-keys-sec { background: #0b0b14; }
.py-keys-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .py-keys-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }
.py-keys { display: grid; gap: 12px; }
.py-key { padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); transition: border-color .25s, transform .25s; }
.py-key:hover { border-color: rgba(94, 234, 212, .5); transform: translateX(4px); }
.py-key-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.py-key-h b { display: inline-flex; align-items: center; gap: 10px; font: 600 14px var(--mono); color: #fff; }
.py-key-h b::before { content: ""; width: 26px; height: 26px; border-radius: 8px; background: rgba(94, 234, 212, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5.5' cy='8' r='2.5' fill='none' stroke='%235eead4' stroke-width='1.5'/%3E%3Cpath d='M8 8h6M12 8v2.5M14 8v2' stroke='%235eead4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.py-key .in-st.ok { background: rgba(23, 178, 106, .14); color: #5fd3a0; }
.py-key dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; }
.py-key dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.py-key dd { margin: 3px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .85); }
@media (max-width: 560px) { .py-key dl { grid-template-columns: 1fr 1fr; } }

/* Money transfer: an agent at the counter. */
.mt-desk-sec { background: #fbf6ee; }
.mt-desk-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .mt-desk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } }
.mt-desk { margin: 0; width: 100%; max-width: 480px; justify-self: center; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid rgba(217, 115, 26, .22); box-shadow: 0 30px 60px -40px rgba(120, 70, 20, .45); }
.mt-desk-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: #1f2037; color: #fff; font-size: 13px; font-weight: 600; }
.mt-desk-user { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.mt-desk-user::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--in-a); }
.mt-form { display: grid; gap: 12px; padding: 20px 18px; }
.mt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mt-fld { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(22, 23, 39, .12); }
.mt-fld span { font-size: 11px; color: var(--mute); }
.mt-fld b { font-size: 14px; font-weight: 600; color: var(--ink); }
.mt-form-btn { justify-self: start; padding: 10px 20px; border-radius: 10px; background: var(--in-a); color: #fff; font-size: 14px; font-weight: 600; }
.mt-desk-res { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-top: 1px dashed rgba(22, 23, 39, .14); background: #fffaf3; font-size: 13px; color: var(--body); }
.mt-desk .in-note { margin: 0; padding: 0 18px 14px; background: #fffaf3; }

/* Crypto: an institutional client, part by part. */
.cx-run-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .cx-run-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }
.cx-run-box { width: 100%; }
.cx-run { list-style: none; margin: 0; padding: 8px; border-radius: 18px; background: #0f101c; border: 1px solid rgba(34, 211, 238, .22); box-shadow: 0 30px 70px -40px rgba(14, 116, 144, .6); }
.cx-run li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 14px; border-radius: 12px; }
.cx-run li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.cx-run code { font: 600 12px var(--mono); color: var(--in-a-light); }
.cx-run b { display: block; font-size: 15px; color: #fff; }
.cx-run div span { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.cx-run .in-st.ok { background: rgba(23, 178, 106, .14); color: #5fd3a0; }
.cx-run .in-st.warn { background: rgba(245, 165, 36, .14); color: #f5c46b; }
@media (max-width: 520px) { .cx-run li { grid-template-columns: 36px minmax(0, 1fr); } .cx-run .in-st { grid-column: 2; justify-self: start; } }

/* Insurance: two ways the check runs. */
.is-ways { display: grid; gap: 20px; max-width: 1040px; margin: 0 auto; }
@media (min-width: 900px) { .is-ways { grid-template-columns: 1fr 1fr; } }
.is-way { padding: 28px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.is-way h3 { margin-top: 22px; font-size: 20px; }
.is-way p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.is-mock { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 132px; padding: 18px; border-radius: 16px; background: var(--in-tint); border: 1px dashed rgba(31, 138, 91, .3); }
.is-box { padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(31, 138, 91, .25); text-align: center; font-size: 12.5px; color: var(--body); box-shadow: 0 8px 20px -14px rgba(20, 108, 70, .5); }
.is-box b { display: block; font: 600 14px 'Sora', sans-serif; color: var(--ink); }
.is-box.am { background: var(--in-a); border-color: transparent; color: rgba(255, 255, 255, .8); }
.is-box.am b { color: #fff; }
.is-arrow { position: relative; width: 48px; height: 2px; background: rgba(31, 138, 91, .45); }
.is-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid rgba(31, 138, 91, .6); border-right: 0; }
.is-arrow i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--in-a); animation: is-go 2s linear infinite; }
@keyframes is-go { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { left: 40px; opacity: 0; } }
.is-search { width: 100%; max-width: 300px; display: grid; gap: 10px; }
.is-field { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(22, 23, 39, .12); font-size: 14px; color: var(--ink); }
.is-field::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mute); flex-shrink: 0; }
.is-field i { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--in-a); padding: 4px 10px; border-radius: 8px; }
.is-ways-foot { margin-top: 22px; text-align: center; font-size: 14.5px; color: var(--body); }

/* E-commerce: a seller's history. */
.ec-events-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .ec-events-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; } }
.ec-events-box { width: 100%; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid rgba(224, 69, 123, .2); box-shadow: 0 30px 60px -42px rgba(180, 46, 95, .5); }
.ec-events-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px 14px; border-bottom: 1px solid var(--line); }
.ec-events-h span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ec-events-h b { font: 600 13px var(--mono); color: var(--in-a-ink); }
.ec-events { list-style: none; margin: 0; padding: 0; position: relative; }
.ec-events::before { content: ""; position: absolute; left: 71px; top: 22px; bottom: 22px; width: 2px; background: rgba(224, 69, 123, .2); }
.ec-events li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px 38px; align-items: center; padding: 16px 4px; }
.ec-events li::before { content: ""; position: absolute; left: 66px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; border: 2px solid var(--in-a); }
.ec-events time { font: 600 12px var(--mono); color: var(--mute); }
.ec-events b { display: block; font-size: 14.5px; color: var(--ink); }
.ec-events div span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--body); }
.ec-events-box .in-note { margin: 6px 4px 0; }
@media (max-width: 520px) { .ec-events li { grid-template-columns: 52px minmax(0, 1fr); align-items: start; } .ec-events li::before { top: 20px; margin-top: 0; } .ec-events time { padding-top: 3px; } .ec-events li > .in-st { grid-column: 2; justify-self: start; } }

/* Corporate services: a review calendar. */
.cs-cycle { max-width: 1040px; margin: 0 auto; overflow-x: auto; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.cs-cyc-grid { min-width: 640px; }
.cs-cyc-row { display: grid; grid-template-columns: 190px repeat(12, minmax(0, 1fr)); align-items: center; border-top: 1px solid var(--line); }
.cs-cyc-row.head { border-top: none; background: #0f0f1a; }
.cs-cyc-row.head span { padding: 12px 0; text-align: center; font: 600 11px var(--mono); letter-spacing: .06em; color: rgba(255, 255, 255, .6); }
.cs-cyc-row.head span:first-child { text-align: left; padding-left: 20px; }
.cs-cyc-lab { padding: 18px 20px; }
.cs-cyc-lab b { display: block; font-size: 14.5px; color: var(--ink); }
.cs-cyc-lab small { font-size: 12px; color: var(--mute); }
.cs-cell { display: grid; place-items: center; height: 100%; min-height: 66px; border-left: 1px dashed rgba(22, 23, 39, .07); }
.cs-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--in-a); box-shadow: 0 0 0 5px rgba(194, 119, 58, .15); }
.cs-dot.hollow { background: #fff; border: 2px solid var(--in-a); box-shadow: none; }
.is-ways > * { min-width: 0; }
@media (max-width: 480px) {
  .is-way { padding: 20px; }
  .is-mock { gap: 10px; padding: 14px; }
  .is-arrow { width: 28px; }
  @keyframes is-go { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { left: 20px; opacity: 0; } }
  .is-box { padding: 10px; font-size: 11.5px; }
  .is-box b { font-size: 13px; }
}