/* Doroobi Fleet pages (/doroobi-fleet/…): the animated map hero, animated icons, link cards and the topic page
   sections. Each page sets --a1 and --a2 (its colour pair, from scripts/fleet-content/scenes.js); everything else is
   Doroobi's own tokens from site.css. Built for both directions: logical properties only. */

/* ---------- the hero: the Doroobi map behind, the words on one side, live chips and a widget on the other ---------- */
.flh { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(580px, 84vh, 780px); display: flex; color: #fff;
  background: radial-gradient(70% 90% at 78% 28%, color-mix(in srgb, var(--a1) 38%, transparent), transparent 62%), radial-gradient(50% 60% at 20% 90%, color-mix(in srgb, var(--a2) 20%, transparent), transparent 70%), linear-gradient(160deg, #0B1A21 0%, #12303B 58%, #0B1A21 100%); }
/* Before the map arrives (or without WebGL): a moving survey grid in the page colours. */
.flh::before { content: ''; position: absolute; inset: -40% -10%; z-index: -2; background-image: linear-gradient(color-mix(in srgb, var(--a1) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--a1) 22%, transparent) 1px, transparent 1px);
  background-size: 48px 48px; transform: perspective(700px) rotateX(58deg); transform-origin: 50% 0; animation: flh-grid 9s linear infinite; opacity: .55; }
@keyframes flh-grid { to { background-position: 0 48px, 0 0; } }
.flh-map { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.4s ease; }
.flh-on .flh-map { opacity: 1; }
.flh-map canvas { outline: none; }
.flh-shade { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 20, 26, .92) 0%, rgba(8, 20, 26, .72) 34%, rgba(8, 20, 26, .18) 64%, rgba(8, 20, 26, 0) 80%), linear-gradient(0deg, rgba(8, 20, 26, .55) 0%, rgba(8, 20, 26, 0) 30%), linear-gradient(180deg, rgba(8, 20, 26, .5) 0%, rgba(8, 20, 26, 0) 18%); }
[dir="rtl"] .flh-shade { background: linear-gradient(270deg, rgba(8, 20, 26, .92) 0%, rgba(8, 20, 26, .72) 34%, rgba(8, 20, 26, .18) 64%, rgba(8, 20, 26, 0) 80%), linear-gradient(0deg, rgba(8, 20, 26, .55) 0%, rgba(8, 20, 26, 0) 30%), linear-gradient(180deg, rgba(8, 20, 26, .5) 0%, rgba(8, 20, 26, 0) 18%); }
.flh-in { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(1160px, 100% - 32px); padding-block: 22px 46px; }
.flh .crumbs ol, .flh .crumbs a { color: rgba(255, 255, 255, .74); }
.flh-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: end; margin-top: 12px; }
.flh-text { align-self: center; max-width: 600px; padding-block: 24px; }
.flh .eyebrow { color: color-mix(in srgb, var(--a1) 45%, #fff); }
.flh h1 { font-size: clamp(2.2rem, 4.9vw, 3.7rem); font-weight: 800; line-height: 1.06; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
[dir="rtl"] .flh h1 { line-height: 1.3; }
.flh h1 em { display: block; color: color-mix(in srgb, var(--a1) 40%, #fff); }
.flh .lead { margin: 18px 0 26px; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }
.flh .btn-ghost { color: #fff; }
.flh .btn-primary { background: var(--coral); }
.flh-tag { display: flex; align-items: baseline; gap: 10px; max-width: 36em; margin: 22px 0 0; font-size: .92rem; color: rgba(255, 255, 255, .82); }
.flh-tag .fl-tag { font-size: .8rem; }

.flh-ui { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; padding-block-end: 8px; }
.flh-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin: 0; padding: 0; list-style: none; }
.flh-chips li, .flh-widget li, .flp-f, .flp-steps li { --i: 0; }
.flh-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: .82rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(14px); animation: flh-in .7s cubic-bezier(.2, .8, .2, 1) forwards, flh-bob 5s ease-in-out infinite; animation-delay: calc(.5s + var(--i) * .35s), calc(1.5s + var(--i) * .6s); }
.flh-chips li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--a1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--a1) 60%, transparent); animation: flh-ping 2s ease-out infinite; }
.flh-chips li:nth-child(2)::before { background: var(--a2); }
.flh-chips li:nth-child(3)::before { background: var(--sun); }
.flh-chips li:nth-child(4)::before { background: var(--free); }
.flh-chips li:nth-child(even) { margin-inline-end: 34px; }
@keyframes flh-in { to { opacity: 1; transform: none; } }
@keyframes flh-bob { 50% { translate: 0 -5px; } }
@keyframes flh-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--a1) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }

.flh-widget { width: min(330px, 100%); margin: 0; padding: 16px 18px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; background: rgba(9, 22, 28, .74); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(18px) scale(.98); animation: flh-in .8s cubic-bezier(.2, .8, .2, 1) 1.2s forwards; }
.flh-widget figcaption { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 700; }
.flh-live { width: 9px; height: 9px; border-radius: 50%; background: #3DBE78; box-shadow: 0 0 0 0 rgba(61, 190, 120, .6); animation: flh-live 1.6s ease-out infinite; }
@keyframes flh-live { 70%, 100% { box-shadow: 0 0 0 8px rgba(61, 190, 120, 0); } }
.flh-widget ul { margin: 0; padding: 0; list-style: none; }
.flh-widget li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .88rem; }
.flh-widget li span { color: rgba(255, 255, 255, .78); }
.flh-widget li i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.flh-widget li i::after { content: ''; display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, var(--a1), var(--a2)); transform-origin: 0 50%; transform: scaleX(0); animation: flh-bar 1.2s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(1.6s + var(--i) * .18s); }
[dir="rtl"] .flh-widget li i::after { transform-origin: 100% 50%; background: linear-gradient(270deg, var(--a1), var(--a2)); }
@keyframes flh-bar { to { transform: scaleX(1); } }
.flh-widget small { display: block; margin-top: 8px; font-size: .72rem; color: rgba(255, 255, 255, .5); }
/* Widget kinds: a list with status dots, a ring, a temperature line, a camera frame, a clock, a battery, a phone. */
.flh-list .flh-widget li i, .flh-phone .flh-widget li i { display: none; }
.flh-list .flh-widget li span::before, .flh-phone .flh-widget li span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--a1); vertical-align: middle; }
.flh-list .flh-widget li:nth-child(2) span::before { background: var(--a2); }
.flh-list .flh-widget li:nth-child(3) span::before { background: var(--sun); }
.flh-ring .flh-widget figcaption::after, .flh-battery .flh-widget figcaption::after, .flh-clock .flh-widget figcaption::after { content: ''; margin-inline-start: auto; }
.flh-ring .flh-widget figcaption::after { width: 42px; height: 42px; border-radius: 50%; background: conic-gradient(var(--a1) 0 72%, rgba(255, 255, 255, .12) 72% 100%); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); animation: flh-spin 6s linear infinite; }
.flh-battery .flh-widget figcaption::after { width: 38px; height: 18px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 4px; background: linear-gradient(90deg, var(--free) 0 0) no-repeat 2px 2px / 0 10px; animation: flh-charge 3s ease-in-out infinite; }
@keyframes flh-charge { 0% { background-size: 0 10px; } 70%, 100% { background-size: 28px 10px; } }
.flh-clock .flh-widget figcaption::after { width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .7); border-radius: 50%; background: linear-gradient(var(--a1), var(--a1)) no-repeat 50% 4px / 2px 13px; animation: flh-spin 4s linear infinite; }
@keyframes flh-spin { to { rotate: 1turn; } }
.flh-spark .flh-widget::after { content: ''; display: block; height: 46px; margin-top: 8px; border-radius: 10px;
  background: linear-gradient(transparent 49%, rgba(255, 255, 255, .08) 50%, transparent 51%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 46' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C30 28 40 18 70 20 S110 34 140 28 180 10 210 14 250 30 300 22' fill='none' stroke='%237FE3FF' stroke-width='3'/%3E%3C/svg%3E") no-repeat 0 0 / 200% 100%;
  animation: flh-scroll 6s linear infinite; }
@keyframes flh-scroll { to { background-position: 0 0, -100% 0; } }
.flh-camera .flh-widget { position: relative; }
.flh-camera .flh-widget::before { content: ''; position: absolute; inset-inline-end: 18px; top: 14px; width: 54px; height: 36px; border: 2px solid var(--coral); border-radius: 6px; animation: flh-scan 2.4s ease-in-out infinite; }
@keyframes flh-scan { 0%, 100% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(-10px, 4px) scale(1.12); opacity: .6; } }
.flh-phone .flh-widget { border-radius: 30px; padding-top: 26px; }
.flh-phone .flh-widget::before { content: ''; position: absolute; top: 10px; left: 50%; width: 64px; height: 6px; margin-left: -32px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.flh-dark .flh-shade { background: linear-gradient(90deg, rgba(4, 12, 16, .9) 0%, rgba(4, 12, 16, .55) 40%, rgba(4, 12, 16, 0) 75%); }
[dir="rtl"] .flh-dark .flh-shade { background: linear-gradient(270deg, rgba(4, 12, 16, .9) 0%, rgba(4, 12, 16, .55) 40%, rgba(4, 12, 16, 0) 75%); }
.flh-globe { min-height: clamp(640px, 92vh, 860px); }
/* Hero variants: where the live card sits. */
.flh-v1 .flh-ui { justify-content: flex-start; }
.flh-v2 .flh-chips { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
.flh-v2 .flh-chips li:nth-child(even) { margin: 0; }
.flh-v3 .flh-ui { align-items: flex-start; }
.flh-v3 .flh-chips { align-items: flex-start; }

/* ---------- animated icons ---------- */
.fi { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; color: color-mix(in srgb, var(--a1, #0E7C7B) 85%, #000);
  background: linear-gradient(145deg, color-mix(in srgb, var(--a1, #0E7C7B) 16%, #fff), color-mix(in srgb, var(--a2, #5FE0D4) 22%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1, #0E7C7B) 18%, transparent); }
.fi svg { width: 26px; height: 26px; overflow: visible; }
.fi svg :is(path, circle, rect, ellipse) { stroke-dasharray: 100; stroke-dashoffset: 0; animation: fi-draw 1.4s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes fi-draw { from { stroke-dashoffset: 100; } }
.fi-xl { width: 64px; height: 64px; border-radius: 20px; margin-bottom: 14px; }
.fi-xl svg { width: 34px; height: 34px; }
/* Each icon moves in its own way once drawn. */
.fi svg { animation: fi-float 4s ease-in-out 1.4s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes fi-float { 50% { transform: translateY(-1.5px); } }
:is(.fi-truck, .fi-bus, .fi-taxi, .fi-mixer, .fi-bike) svg { animation-name: fi-drive; animation-duration: 2.6s; }
@keyframes fi-drive { 25% { transform: translateX(1.6px); } 75% { transform: translateX(-1.6px); } }
:is(.fi-pin, .fi-drop, .fi-box) svg { animation-name: fi-bounce; animation-duration: 2.2s; }
@keyframes fi-bounce { 0%, 100% { transform: none; } 30% { transform: translateY(-3px); } 50% { transform: translateY(0) scale(1.04, .96); } }
:is(.fi-wrench, .fi-tools, .fi-key, .fi-lock) svg { animation-name: fi-wiggle; animation-duration: 3s; }
@keyframes fi-wiggle { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 94% { transform: rotate(-4deg); } }
:is(.fi-snow, .fi-clock, .fi-help) svg { animation-name: fi-turn; animation-duration: 10s; animation-timing-function: linear; }
@keyframes fi-turn { to { transform: rotate(1turn); } }
:is(.fi-bolt, .fi-camera, .fi-chip) svg { animation-name: fi-flash; animation-duration: 2.8s; }
@keyframes fi-flash { 0%, 80%, 100% { opacity: 1; } 85% { opacity: .35; } 90% { opacity: 1; } 95% { opacity: .55; } }
:is(.fi-plane, .fi-rocket) svg { animation-name: fi-lift; animation-duration: 3.2s; }
@keyframes fi-lift { 50% { transform: translate(1.5px, -2.5px); } }
:is(.fi-route, .fi-link) svg :is(path) { stroke-dasharray: 6 4; animation: fi-flow 1.2s linear infinite; }
@keyframes fi-flow { to { stroke-dashoffset: -20; } }
:is(.fi-map3d, .fi-screen, .fi-book, .fi-flag, .fi-scale, .fi-building, .fi-home, .fi-people, .fi-crane, .fi-bin, .fi-thermo, .fi-shield, .fi-fuel, .fi-phone) svg { animation-name: fi-tilt; animation-duration: 4.5s; }
@keyframes fi-tilt { 50% { transform: rotate(-4deg) translateY(-1px); } }

/* ---------- link cards: an icon, a name, a line, the phase ---------- */
.flc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.flc { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; overflow: hidden;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, border-color .25s ease; }
.flc::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--a1), var(--a2)); transform: scaleX(.25); transform-origin: 0 50%; transition: transform .35s ease; }
[dir="rtl"] .flc::before { transform-origin: 100% 50%; }
.flc:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a1) 40%, var(--line)); box-shadow: 0 18px 34px rgba(16, 34, 43, .12); }
.flc:hover::before { transform: scaleX(1); }
.flc:hover .fi svg :is(path, circle, rect, ellipse) { animation: fi-draw 1s cubic-bezier(.5, 0, .2, 1) both; }
.flc .fi { margin-bottom: 8px; }
.flc-t { font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.flc-d { font-size: .92rem; color: var(--muted); }
.flc .fl-tag { align-self: flex-start; margin-top: 6px; }
.flc-go { position: absolute; top: 20px; inset-inline-end: 20px; color: var(--a1); font-weight: 700; transition: transform .25s ease; }
[dir="rtl"] .flc-go { transform: scaleX(-1); }
.flc:hover .flc-go { transform: translateX(4px); }
[dir="rtl"] .flc:hover .flc-go { transform: scaleX(-1) translateX(4px); }
.flc-lg { padding: 26px; }
.flc-lg .fi { width: 56px; height: 56px; }

/* ---------- the master page ---------- */
.fl-intro-1 { grid-template-columns: minmax(0, 1fr); margin-top: -46px; position: relative; z-index: 2; }
.fl-intro-1 .fl-keys { box-shadow: 0 24px 50px rgba(16, 34, 43, .12); }
.flm-group { margin-top: 38px; }
.flm-group-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; }
.flm-group-h h3 { margin: 0; font-size: 1.5rem; }
.flm-group-h p { margin: 0; color: var(--muted); flex: 1 1 280px; }
.flm-all { font-weight: 700; color: var(--teal); text-decoration: none; }
.flm-all:hover { text-decoration: underline; }

/* ---------- topic pages ---------- */
.flp .fl-sec h2 { max-width: 24em; }
.flp-intro-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.flp-intro-text p { margin: 0 0 14px; font-size: 1.06rem; line-height: 1.7; }
.flp-glance { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(16, 34, 43, .08); border-top: 4px solid var(--a1); }
.flp-glance h2 { font-size: 1.2rem !important; margin-bottom: 8px; }
.flp-glance .fl-ticks li::before { border-color: var(--a1); }
.flp-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.flp-f { position: relative; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.flp-f h3 { margin: 10px 0 6px; font-size: 1.08rem; letter-spacing: 0; }
.flp-f p { margin: 0; color: var(--muted); }
.flp-n { font-weight: 800; font-size: .9rem; color: var(--a1); letter-spacing: .06em; }
/* four looks for the features, so neighbouring pages differ */
.flp-v1 .flp-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flp-v1 .flp-f { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; border: 0; background: transparent; padding: 14px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.flp-v1 .flp-n { grid-row: span 2; font-size: 2rem; line-height: 1; color: color-mix(in srgb, var(--a1) 70%, var(--ink)); }
.flp-v1 .flp-f h3 { margin-top: 0; }
.flp-v2 .flp-f { background: linear-gradient(160deg, color-mix(in srgb, var(--a1) 10%, #fff), #fff 70%); border-color: color-mix(in srgb, var(--a1) 22%, var(--line)); }
.flp-v3 .flp-f { border: 0; border-inline-start: 4px solid var(--a1); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: 0 10px 24px rgba(16, 34, 43, .06); }
[dir="rtl"] .flp-v3 .flp-f { border-radius: var(--radius) 0 0 var(--radius); }
.flp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 22px; margin: 28px 0 0; padding: 0; list-style: none; counter-reset: s; }
.flp-steps li { position: relative; padding-top: 58px; }
.flp-steps li::before { content: ''; position: absolute; top: 21px; inset-inline-start: 44px; inset-inline-end: -22px; height: 2px; background: linear-gradient(90deg, var(--a1), transparent); }
[dir="rtl"] .flp-steps li::before { background: linear-gradient(270deg, var(--a1), transparent); }
.flp-steps li:last-child::before { display: none; }
.flp-step { position: absolute; top: 0; inset-inline-start: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--a1); color: #fff; font-weight: 800; box-shadow: 0 0 0 6px color-mix(in srgb, var(--a1) 18%, transparent); }
.flp-steps h3 { margin: 0 0 6px; font-size: 1.08rem; }
.flp-steps p { margin: 0; color: var(--muted); }
.flp-v1 .flp-steps, .flp-v3 .flp-steps { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.flp-v1 .flp-steps li, .flp-v3 .flp-steps li { padding: 0 0 26px; padding-inline-start: 66px; }
.flp-v1 .flp-steps li::before, .flp-v3 .flp-steps li::before { top: 48px; bottom: 0; height: auto; width: 2px; inset-inline-start: 21px; inset-inline-end: auto; background: linear-gradient(180deg, var(--a1), transparent); }
.flp-edge { background: radial-gradient(60% 90% at 85% 50%, color-mix(in srgb, var(--a1) 30%, transparent), transparent 70%), var(--night); }
[dir="rtl"] .flp-edge { background: radial-gradient(60% 90% at 15% 50%, color-mix(in srgb, var(--a1) 30%, transparent), transparent 70%), var(--night); }
.flp-edge h2 { color: #fff; }
.flp-edge .btn-ghost { color: #fff; }
.flp-edge-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 34px; align-items: center; }
.flp-orb { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 260px; margin-inline: auto; width: 100%; }
.fi-orb { position: relative; z-index: 1; width: 92px; height: 92px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--a1) 60%, #fff), var(--a1)); box-shadow: 0 0 60px color-mix(in srgb, var(--a1) 60%, transparent); }
.fi-orb svg { width: 44px; height: 44px; }
.flp-orb-r { position: absolute; inset: 30%; border: 2px solid color-mix(in srgb, var(--a1) 70%, transparent); border-radius: 50%; animation: flp-wave 3.6s ease-out infinite; }
.flp-orb-r.r2 { animation-delay: 1.2s; }
.flp-orb-r.r3 { animation-delay: 2.4s; }
@keyframes flp-wave { from { inset: 30%; opacity: 1; } to { inset: -6%; opacity: 0; } }
.flp-table .fl-table td:last-child { font-weight: 500; }
.flp-table tbody th { font-weight: 600; }
.flp-rel .flc-grid-rel { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 24px; }
.flp-back { margin: 22px 0 0; }
.flp-back a { font-weight: 700; color: var(--teal); text-decoration: none; }
.flp .fl-pilot { background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 72%, #0B1A21) 0%, color-mix(in srgb, var(--a1) 34%, #0B1A21) 100%); }
.flp .fl-pilot h2 { max-width: 26em; margin-inline: auto; }

/* ---------- small screens ---------- */
@media (max-width: 1040px) {
  .flh { min-height: 0; }
  .flh-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .flh-text { padding-block: 10px 0; }
  .flh-ui, .flh-chips { align-items: flex-start; }
  .flh-chips { flex-direction: row; flex-wrap: wrap; }
  .flh-chips li:nth-child(even) { margin: 0; }
  .flh-shade, [dir="rtl"] .flh-shade { background: linear-gradient(180deg, rgba(8, 20, 26, .88) 0%, rgba(8, 20, 26, .62) 55%, rgba(8, 20, 26, .3) 100%); }
  .flp-intro-grid, .flp-edge-grid { grid-template-columns: minmax(0, 1fr); }
  .flp-feat-grid, .flp-v1 .flp-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flp-orb { max-width: 180px; }
}
@media (max-width: 640px) {
  .flh-in { padding-block: 14px 30px; }
  .flh-chips li { font-size: .76rem; padding: 7px 11px; white-space: normal; }
  .flh-widget { width: 100%; }
  .flp-feat-grid, .flp-v1 .flp-feat-grid { grid-template-columns: minmax(0, 1fr); }
  .fl-intro-1 { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .flh-chips li, .flh-widget { opacity: 1; transform: none; }
  .flh-widget li i::after { transform: none; }
}

/* Stagger and bar widths without style attributes (the site's security policy allows styles from files only). */
:is(.flh-chips, .flh-widget ul, .flp-feat-grid, .flp-steps) > :nth-child(2) { --i: 1; }
:is(.flh-chips, .flh-widget ul, .flp-feat-grid, .flp-steps) > :nth-child(3) { --i: 2; }
:is(.flh-chips, .flh-widget ul, .flp-feat-grid, .flp-steps) > :nth-child(4) { --i: 3; }
:is(.flh-chips, .flh-widget ul, .flp-feat-grid, .flp-steps) > :nth-child(5) { --i: 4; }
:is(.flh-chips, .flh-widget ul, .flp-feat-grid, .flp-steps) > :nth-child(6) { --i: 5; }
:is(.flh-chips, .flh-widget ul, .flp-feat-grid, .flp-steps) > :nth-child(n+7) { --i: 6; }
.fw-10 { --w: 10%; }
.fw-15 { --w: 15%; }
.fw-20 { --w: 20%; }
.fw-25 { --w: 25%; }
.fw-30 { --w: 30%; }
.fw-35 { --w: 35%; }
.fw-40 { --w: 40%; }
.fw-45 { --w: 45%; }
.fw-50 { --w: 50%; }
.fw-55 { --w: 55%; }
.fw-60 { --w: 60%; }
.fw-65 { --w: 65%; }
.fw-70 { --w: 70%; }
.fw-75 { --w: 75%; }
.fw-80 { --w: 80%; }
.fw-85 { --w: 85%; }
.fw-90 { --w: 90%; }
.fw-95 { --w: 95%; }
.fw-100 { --w: 100%; }