.ft-wiki {
  --blue-50: oklch(97% .014 254.604);
  --blue-100: oklch(93.2% .032 255.585);
  --blue-300: oklch(80.9% .105 251.813);
  --blue-400: oklch(70.7% .165 254.624);
  --blue-600: oklch(54.6% .245 262.881);
  --blue-700: oklch(48.8% .243 264.376);
  --slate-50: oklch(98.4% .003 247.858);
  --slate-100: oklch(96.8% .007 247.896);
  --slate-200: oklch(92.9% .013 255.508);
  --slate-300: oklch(86.9% .022 252.894);
  --slate-400: oklch(70.4% .04 256.788);
  --slate-500: oklch(55.4% .046 257.417);
  --slate-600: oklch(44.6% .043 257.281);
  --slate-700: oklch(37.2% .044 257.287);
  --slate-800: oklch(27.9% .041 260.031);
  --slate-900: oklch(20.8% .042 265.755);
  --green-50: oklch(98.2% .018 155.826);
  --green-100: oklch(96.2% .044 156.743);
  --green-600: oklch(62.7% .194 149.214);
  --purple-50: oklch(97.7% .014 308.299);
  --purple-100: oklch(94.6% .033 307.174);
  --purple-600: oklch(55.8% .288 302.321);
  --orange-50: oklch(98% .016 73.684);
  --orange-100: oklch(95.4% .038 75.164);
  --orange-600: oklch(64.6% .222 41.116);
  --amber-50: oklch(98.7% .022 95.277);
  --amber-200: oklch(92.4% .12 95.746);
  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  background: var(--slate-50);
  color: var(--slate-900);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  line-height: 1.5;
}
.ft-wiki *, .ft-wiki *::before, .ft-wiki *::after { box-sizing: border-box; }
.ft-wiki :is(h1, h2, h3, h4, p, ul) { margin: 0; padding: 0; }
.ft-wiki ul { list-style: none; }
.ft-wiki a { text-decoration: none; color: inherit; }
.ft-wiki img { max-width: 100%; border: 0; }
.ft-wiki svg { display: block; }
.ft-wiki summary { list-style: none; cursor: pointer; }
.ft-wiki summary::-webkit-details-marker { display: none; }

.ft-container { max-width: 80rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }

/* Header band */
.ft-header { background: var(--blue-600); color: #fff; box-shadow: var(--shadow-lg); }
.ft-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; min-height: 4rem; padding: .5rem 0; }
.ft-brand { display: flex; align-items: center; gap: .75rem; }
.ft-brand-logo { width: 2.5rem; height: 2.5rem; background: #fff; border-radius: .5rem; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: .25rem; }
.ft-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.ft-brand-text { display: block; }
.ft-brand-title { display: block; font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 700; }
.ft-brand-sub { display: block; font-size: .75rem; line-height: calc(1 / .75); color: var(--blue-100); }
.ft-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.ft-nav a { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .5rem; transition: background-color .15s; }
.ft-nav a:hover, .ft-nav a.ft-active { background: var(--blue-700); }
.ft-nav svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* Main column */
.ft-main { max-width: 80rem; margin: 0 auto; padding: 2rem 1rem; display: grid; gap: 3rem; }
.ft-main h2 { font-size: 1.5rem; line-height: calc(2 / 1.5); font-weight: 700; margin-bottom: 1.5rem; }

/* Hero */
.ft-hero { text-align: center; padding: 3rem 0; background: linear-gradient(to right, var(--blue-600), var(--blue-700)); color: #fff; border-radius: 1rem; box-shadow: var(--shadow-xl); }
.ft-hero h1 { font-size: 2.25rem; line-height: calc(2.5 / 2.25); font-weight: 700; margin-bottom: 1rem; }
.ft-hero p { font-size: 1.25rem; line-height: calc(1.75 / 1.25); color: var(--blue-100); margin: 0 auto 2rem; max-width: 42rem; }
.ft-search { position: relative; max-width: 42rem; margin: 0 auto; }
.ft-search svg { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--slate-400); }
.ft-search input { width: 100%; padding: 1rem 1.25rem 1rem 3.5rem; border: 0; border-radius: 9999px; background: #fff; color: var(--slate-900); font: inherit; box-shadow: var(--shadow-lg); outline: none; }
.ft-search input::placeholder { color: var(--slate-500); }
.ft-search input:focus { box-shadow: 0 0 0 4px var(--blue-300), var(--shadow-lg); }

/* Category cards */
.ft-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.ft-card { display: block; background: #fff; padding: 1.5rem; border-radius: .75rem; box-shadow: var(--shadow-md); border: 1px solid var(--slate-200); transition: box-shadow .15s; }
.ft-card:hover { box-shadow: var(--shadow-lg); }
.ft-card-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; }
.ft-card-icon { width: 4rem; height: 4rem; background: var(--blue-100); border-radius: .5rem; display: flex; align-items: center; justify-content: center; }
.ft-card-icon svg { width: 2rem; height: 2rem; color: var(--blue-600); }
.ft-card-text { display: block; }
.ft-card-title { display: block; font-weight: 700; font-size: 1.125rem; line-height: calc(1.75 / 1.125); margin-bottom: .25rem; }
.ft-card-sub { display: block; color: var(--slate-600); font-size: .875rem; line-height: calc(1.25 / .875); }

/* White panels */
.ft-panel { background: #fff; border-radius: .75rem; box-shadow: var(--shadow-md); padding: 2rem; }

/* What's in this wiki — steps */
.ft-steps { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
.ft-step-icon { width: 3rem; height: 3rem; border-radius: .5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.ft-step-icon svg { width: 1.5rem; height: 1.5rem; }
.ft-step-green { background: var(--green-100); } .ft-step-green svg { color: var(--green-600); }
.ft-step-purple { background: var(--purple-100); } .ft-step-purple svg { color: var(--purple-600); }
.ft-step-orange { background: var(--orange-100); } .ft-step-orange svg { color: var(--orange-600); }
.ft-step h3 { font-weight: 700; margin-bottom: .5rem; }
.ft-step p { color: var(--slate-600); font-size: .875rem; line-height: calc(1.25 / .875); }

/* How Flagtronics works */
.ft-how { border-top: 1px solid var(--slate-200); padding-top: 2rem; }
.ft-how h3 { font-size: 1.25rem; line-height: calc(1.75 / 1.25); font-weight: 700; margin-bottom: 1.5rem; text-align: center; }
.ft-tiles { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.ft-tile { text-align: center; }
.ft-tile-img { aspect-ratio: 1 / 1; background: var(--slate-100); border-radius: .5rem; overflow: hidden; margin-bottom: .75rem; transition: box-shadow .15s; }
.ft-tile-img:hover { box-shadow: var(--shadow-lg); }
.ft-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.ft-tile h4 { font-weight: 600; margin-bottom: .25rem; }
.ft-tile p { font-size: .75rem; line-height: calc(1 / .75); color: var(--slate-600); }

/* Trusted by */
.ft-trust { background: var(--slate-50); border-radius: .75rem; padding: 2rem; }
.ft-trust h3 { font-weight: 600; color: var(--slate-700); margin-bottom: 1.5rem; text-align: center; font-size: 1.25rem; line-height: calc(1.75 / 1.25); }
.ft-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ft-logo { display: flex; align-items: center; justify-content: center; padding: .75rem; background: #fff; border-radius: .5rem; transition: box-shadow .15s; }
.ft-logo:hover { box-shadow: var(--shadow-md); }
.ft-logo img { width: 100%; height: auto; object-fit: contain; max-height: 3rem; }
.ft-logo img.ft-logo-tall { max-height: 3.5rem; }

/* FAQ */
.ft-faq-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.ft-faq-head h2 { margin: 0; }
.ft-faq-icon { width: 3rem; height: 3rem; background: var(--blue-100); border-radius: .5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ft-faq-icon svg { width: 1.5rem; height: 1.5rem; color: var(--blue-600); }
.ft-faqs { display: grid; gap: 1.5rem; }
.ft-group { border: 1px solid var(--slate-200); border-radius: .5rem; }
.ft-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-radius: .5rem .5rem 0 0; font-weight: 700; transition: background-color .15s; }
.ft-group > summary:hover { text-decoration: underline; }
.ft-group-slate > summary { background: var(--slate-50); } .ft-group-slate > summary:hover { background: var(--slate-100); }
.ft-group-blue > summary { background: var(--blue-50); } .ft-group-blue > summary:hover { background: var(--blue-100); }
.ft-group-green > summary { background: var(--green-50); } .ft-group-green > summary:hover { background: var(--green-100); }
.ft-group-purple > summary { background: var(--purple-50); } .ft-group-purple > summary:hover { background: var(--purple-100); }
.ft-group-orange > summary { background: var(--orange-50); } .ft-group-orange > summary:hover { background: var(--orange-100); }
.ft-group-body { padding: 0 1.5rem; }
.ft-item { border-bottom: 1px solid var(--slate-200); }
.ft-item:last-child { border-bottom: 0; }
.ft-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; font-size: .875rem; line-height: calc(1.25 / .875); font-weight: 500; text-align: left; }
.ft-item > summary:hover { text-decoration: underline; }
.ft-group > summary::after, .ft-item > summary::after {
  content: ""; width: 1rem; height: 1rem; flex-shrink: 0;
  background: var(--slate-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s;
}
.ft-group[open] > summary::after, .ft-item[open] > summary::after { transform: rotate(180deg); }
.ft-item-a { padding-bottom: 1rem; font-size: .875rem; line-height: calc(1.25 / .875); color: var(--slate-600); }

/* Safety notice */
.ft-notice { background: var(--amber-50); border: 1px solid var(--amber-200); border-radius: .75rem; padding: 1.5rem; }
.ft-notice-inner { display: flex; align-items: flex-start; gap: 1rem; }
.ft-notice-icon { width: 2.5rem; height: 2.5rem; background: var(--amber-200); border-radius: .5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.5rem; line-height: 2rem; }
.ft-notice h3 { font-weight: 700; margin-bottom: .5rem; }
.ft-notice p { color: var(--slate-700); font-size: .875rem; line-height: calc(1.25 / .875); }

/* Footer */
.ft-footer { background: var(--slate-800); color: var(--slate-300); margin-top: 4rem; }
.ft-footer .ft-container { padding-top: 2rem; padding-bottom: 2rem; }
.ft-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.ft-footer h3 { font-weight: 700; color: #fff; margin-bottom: .75rem; }
.ft-footer p, .ft-footer ul { font-size: .875rem; line-height: calc(1.25 / .875); }
.ft-footer ul { display: grid; gap: .5rem; }
.ft-footer a:hover { color: #fff; }
.ft-footer a.ft-link-blue { color: var(--blue-400); }
.ft-footer a.ft-link-blue:hover { color: var(--blue-300); }
.ft-footer-bottom { border-top: 1px solid var(--slate-700); margin-top: 2rem; padding-top: 1.5rem; text-align: center; font-size: .875rem; line-height: calc(1.25 / .875); }

@media (min-width: 640px) {
  .ft-container { padding-left: 1.5rem; padding-right: 1.5rem; }
  .ft-main { padding-left: 1.5rem; padding-right: 1.5rem; }
  .ft-tiles { grid-template-columns: repeat(2, 1fr); }
  .ft-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .ft-cards { grid-template-columns: repeat(2, 1fr); }
  .ft-steps { grid-template-columns: repeat(3, 1fr); }
  .ft-logos { grid-template-columns: repeat(5, 1fr); }
  .ft-footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .ft-container { padding-left: 2rem; padding-right: 2rem; }
  .ft-main { padding-left: 2rem; padding-right: 2rem; }
  .ft-cards { grid-template-columns: repeat(4, 1fr); }
  .ft-tiles { grid-template-columns: repeat(5, 1fr); }
  .ft-logos { grid-template-columns: repeat(6, 1fr); }
}

/* === Wiki.js default-theme neutralization — KEEP THIS AND EVERYTHING BELOW AT EOF ===
   The page renders inside Wiki.js's .contents container, whose theme styles
   headings (colors, full-width ::after underline bars) and injects a ¶
   toc-anchor link into every h1-h6. !important because the theme selectors
   carry .v-application/.contents specificity we can't reliably out-rank. */
.ft-wiki :is(h1, h2, h3, h4) { color: inherit !important; }
.ft-wiki .ft-footer h3 { color: #fff !important; }
.ft-wiki .ft-trust h3 { color: var(--slate-700) !important; }
.ft-wiki :is(h1, h2, h3, h4)::after { display: none !important; content: none !important; }
.ft-wiki .toc-anchor { display: none !important; }
/* Theme also colors every <a> (pale blue) and prepends ▸ markers to list items. */
.ft-wiki a { color: inherit !important; text-decoration: none !important; }
.ft-wiki .ft-footer a:hover { color: #fff !important; }
.ft-wiki a.ft-link-blue { color: var(--blue-400) !important; }
.ft-wiki a.ft-link-blue:hover { color: var(--blue-300) !important; }
.ft-wiki ul li::before { content: none !important; display: none !important; }

/* === Wiki.js chrome removal — SCOPED BY LOADING *and* BY AUTH ===
   This stylesheet is linked only from full-design pages (home), so these
   site-chrome rules affect only those pages; the rest of the wiki keeps
   its top bar, search, and footer. The design supplies its own header,
   search, and footer.
   Auth gate: the top bar contains a /login link ONLY for anonymous
   visitors (logged-in users get the account menu instead — probed live
   2026-07-02), so every rule is prefixed with a body:has() keyed on that
   link. Anonymous visitors see the pure design; logged-in users get the
   full normal wiki chrome back — top bar, account/admin icons, title
   strip, footer, and standard content padding. :has() matches on the DOM
   even though the bar is display:none, so there is no circularity. */
body:has(header.v-app-bar.nav-header a[href="/login"]) header.v-app-bar.nav-header { display: none !important; }
body:has(header.v-app-bar.nav-header a[href="/login"]) .v-main { padding-top: 0 !important; } /* Vuetify sets inline 64px for the hidden bar */
body:has(header.v-app-bar.nav-header a[href="/login"]) .v-main__wrap > .v-divider { display: none !important; } /* theme divider = 1px white line above the header band */
body:has(header.v-app-bar.nav-header a[href="/login"]) .page-header-section { display: none !important; } /* gray title strip duplicating the hero */
body:has(header.v-app-bar.nav-header a[href="/login"]) footer.v-footer { display: none !important; } /* "Powered by Wiki.js" strip */
/* Full-bleed: Wiki.js's nested containers pad the content area (white gutters
   around the header band at wide viewports). Probed 2026-07-02 at 1990px. */
body:has(header.v-app-bar.nav-header a[href="/login"]) .v-main .container { padding: 0 !important; }
body:has(header.v-app-bar.nav-header a[href="/login"]) .v-main .layout.row { margin: 0 !important; }
body:has(header.v-app-bar.nav-header a[href="/login"]) .v-main .page-col-content { padding: 0 !important; }
body:has(header.v-app-bar.nav-header a[href="/login"]) .contents { padding: 0 !important; }
/* Pinned header band, matching the Figma site — anonymous only: when logged
   in the wiki's own fixed app bar returns and a second sticky bar would
   fight it. */
body:has(header.v-app-bar.nav-header a[href="/login"]) .ft-header { position: sticky; top: 0; z-index: 50; }
/* Theme paragraph margins beat the .ft-wiki reset (hero subtitle lost its
   margin:auto centering — box hugged left at wide viewports). */
.ft-wiki p { margin: 0 !important; }
.ft-wiki .ft-hero p { margin: 0 auto 2rem !important; }