/* FLUXION design system v1 · layout grammar,
   recoloured to FLUXION teal → blue → violet. Every page must use only these tokens and components. */
@font-face { font-family: Geist; src: url('/assets/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* neutrals */
  --canvas: #FAFAF8; --mist: #F1F0EC; --white: #FFFFFF; --light: #F4F3EF;
  --ink: #111110; --body: #5C5C57; --faint: #8B8A84; --line: #E3E2DD;
  /* brand */
  --brand: #0278FD; --brand-deep: #0057C2; --brand-soft: #E3F0FF;
  --sky: #5CB2FF; --navy: #0A3FB0; --ice: #EAF3FF;
  --grad: linear-gradient(100deg, #5CB2FF 0%, #0278FD 50%, #0A3FB0 100%);
  /* FLUXION mark tile: the logo's up-right corner arrow, repeated */
  --mark-tile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%221453 -12 586 586%22%3E%3Cpath fill=%22white%22 fill-opacity=%22.2%22 d=%22M1773.5 249.868 L1699.5 249.77 C1691.62 248.39 1687.702 240.314 1681.5 235.997 C1666.824 221.399 1650.507 208.448 1636.236 193.5 A11.233 11.233 0 0 1 1645.5 177.07 L1831.5 177.147 A26.511 26.511 0 0 1 1856.098 200.5 L1855.91 376.5 C1853.127 386.456 1838.586 386.643 1833.5 378.48 A1271.034 1271.034 0 0 1 1774.91 325.5 A11.674 11.674 0 0 1 1773.942 317.5 L1773.985 250.5 L1773.5 249.868 Z%22/%3E%3C/svg%3E");
  /* night */
  --night: #111110; --night-soft: #1C1C1A; --night-line: #2E2E2B; --night-faint: #A6A59F;
  /* type */
  --f-display: Geist, system-ui, sans-serif; --wght: "wght" 450;
  --f-sans: Geist, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  /* grid + space */
  --max: 1440px; --gut: 16px; --gap: 6px;
  --sec: 80px; --sec-lg: 128px;
  /* motion */
  --ease: cubic-bezier(.23, 1, .32, 1); --t-fast: 150ms; --t: 220ms; --t-slow: 400ms;
}
@media (min-width: 768px) { :root { --gut: 32px; --sec: 104px; } }
@media (min-width: 1024px) { :root { --gut: 48px; --sec: 128px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-sans); font-size: 15px; line-height: 1.6; color: var(--ink);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; }
img[src$="mark-arrow.svg"] { height: auto; flex: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- layout ---------- */
.c { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: var(--sec) 0; }
.split-hero, .split-intro, .split-panel, .split-faq, .split-cta { display: grid; gap: 40px; }
@media (min-width: 768px) {
  .split-intro { grid-template-columns: 1.35fr 1fr; gap: 48px; }
  .split-panel { grid-template-columns: .72fr 1fr; gap: var(--gap); }
  .split-faq { grid-template-columns: 1fr 1.62fr; gap: 48px; }
  .split-cta { grid-template-columns: 1.66fr 1fr; gap: 0; }
}
@media (min-width: 1024px) { .split-hero { grid-template-columns: 1fr 428px; gap: 64px; align-items: end; } }
.g2, .g3, .g4 { display: grid; gap: var(--gap); }
.g4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- type ---------- */
.h1 { font-family: var(--f-display); font-weight: 400; font-variation-settings: var(--wght); font-size: 41.6px; line-height: .9; letter-spacing: -.045em; }
@media (min-width: 640px) { .h1 { font-size: 64px; } }
@media (min-width: 1024px) { .h1 { font-size: 86.4px; } }
.h2 { font-family: var(--f-display); font-weight: 400; font-variation-settings: var(--wght); font-size: 36.8px; line-height: 1; letter-spacing: -.04em; }
.h2-md { font-family: var(--f-display); font-weight: 400; font-variation-settings: var(--wght); font-size: 30.4px; line-height: 1.05; letter-spacing: -.035em; }
.h2-xl { font-family: var(--f-display); font-weight: 400; font-variation-settings: var(--wght); font-size: 40px; line-height: 1; letter-spacing: -.04em; }
@media (min-width: 768px) { .h2 { font-size: 52px; } .h2-md { font-size: 40px; } .h2-xl { font-size: 52px; } }
@media (min-width: 1024px) { .h2 { font-size: 70.4px; } .h2-md { font-size: 49.6px; } .h2-xl { font-size: 56px; } }
.h3 { font-family: var(--f-display); font-weight: 400; font-variation-settings: var(--wght); font-size: 20.8px; line-height: 1.2; letter-spacing: -.02em; }
@media (min-width: 1024px) { .h3 { font-size: 25.6px; } }
.stat { font-family: var(--f-display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -.05em; }
@media (min-width: 1024px) { .stat { font-size: 68px; } }
.lead { font-size: 17.37px; line-height: 1.5; color: var(--body); }
@media (min-width: 1024px) { .lead { font-size: 20.8px; } }
.p { font-size: 17px; line-height: 1.6; color: var(--body); }
.p-sm { font-size: 14px; line-height: 1.65; color: var(--body); }
.small { font-size: 12.5px; line-height: 1.5; color: var(--body); }
.mono { font-family: var(--f-mono); font-size: 13px; color: var(--body); }
.mono-xs { font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.t-brand { color: var(--brand); }
.t-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; font-weight: 500;
  height: 46px; padding: 0 20px; font-size: 15px; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn-sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn-brand { background: var(--brand); color: #fff; } .btn-brand:hover { background: var(--brand-deep); }
.btn-outline { border: 1px solid var(--line); background: var(--canvas); color: var(--ink); } .btn-outline:hover { background: #fff; }
.btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #000; }
.ar { width: 14px; height: 14px; flex: none; }
[hidden] { display: none !important; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.link { color: var(--ink); border-bottom: 1px solid var(--line); transition: border-color var(--t-fast) var(--ease); }
.link:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- gradient fields (signature) ---------- */
.field { position: relative; isolation: isolate; overflow: hidden; background-color: var(--brand); }
.field::before, .field::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.field::after { background-image: var(--mark-tile); background-size: 12px 12px; }
.field-panel::before { background:
  radial-gradient(70% 60% at 28% 20%, rgba(92,178,255,.45) 0%, rgba(92,178,255,0) 70%),
  linear-gradient(160deg, rgba(2,120,253,0) 45%, rgba(0,87,194,.55) 100%); }
.field-band::before { background:
  radial-gradient(60% 120% at 18% 30%, rgba(92,178,255,.4) 0%, rgba(92,178,255,0) 70%),
  linear-gradient(100deg, rgba(2,120,253,0) 50%, rgba(0,87,194,.5) 100%); }
.field-cta::before { background:
  radial-gradient(50% 70% at 72% 42%, #EAF3FF 0%, rgba(234,243,255,.7) 40%, rgba(234,243,255,0) 76%),
  radial-gradient(34% 55% at 6% 86%, rgba(92,178,255,.9) 0%, rgba(92,178,255,0) 72%),
  radial-gradient(30% 40% at 18% 8%, rgba(10,63,176,.75) 0%, rgba(10,63,176,0) 72%); }

/* ---------- nav ---------- */
.nav { position: relative; z-index: 50; background: var(--canvas); }
.nav .c { position: relative; display: flex; height: 64px; align-items: center; justify-content: space-between; }
.nav-logo img { height: 22px; width: auto; }
.nav-links { display: none; position: absolute; left: 50%; transform: translateX(-50%); gap: 28px; font-size: 15px; }
.nav-links a { padding: 8px 0; transition: color var(--t-fast) var(--ease); }
.nav-links a:hover, .nav-links a.on { color: var(--brand); }
.nav-cta { display: none; align-items: center; gap: 20px; font-size: 15px; }
.nav-burger { display: grid; place-items: center; width: 40px; height: 40px; }
@media (min-width: 1024px) { .nav-links, .nav-cta { display: flex; } .nav-burger { display: none; } }
.dd { position: relative; }
.dd-menu { position: absolute; left: 50%; top: 100%; width: 264px; transform: translate(-50%, -4px); padding-top: 8px;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dd-menu ul { background: #fff; border: 1px solid var(--line); padding: 6px; box-shadow: 0 16px 40px -16px rgba(18,18,17,.22); }
.dd-menu a { display: block; padding: 10px 12px; } .dd-menu a:hover { background: var(--canvas); color: var(--ink); }
.dd-menu b { display: block; font-weight: 400; font-size: 14px; } .dd-menu span { display: block; font-size: 12.5px; color: var(--faint); }

/* ---------- hero ---------- */
.hero { padding: 48px 0; }
@media (min-width: 768px) { .hero { padding: 76px 0 60px; } }
.crumb { display: flex; gap: 8px; margin: -16px 0 40px; font-family: var(--f-mono); font-size: 13px; color: var(--body); }
.crumb a:hover { color: var(--ink); } .crumb [aria-current] { color: var(--ink); }
.hero .lead { margin-bottom: 32px; }
@media (min-width: 1024px) { .hero-side { padding-bottom: 12px; } }
.hero-media { position: relative; min-height: 420px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 40px 24px; }

/* ---------- stat band ---------- */
.band { padding: 48px 0; } @media (min-width: 768px) { .band { padding: 52px 0; } }
.band-rule { position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: rgba(255,255,255,.7); }
.stat-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 150px; padding: 20px; background: rgba(248,248,246,.94); }
@media (min-width: 768px) { .stat-card { height: 176px; padding: 28px; } }
.stat-card .small { max-width: 230px; }
.stat-card svg { position: absolute; right: 20px; top: 20px; width: 16px; height: 16px; color: var(--brand); }

/* ---------- tabs ---------- */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 48px; }
.tab { position: relative; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; font-size: 14px; text-align: left;
  background: rgba(239,239,236,.6); color: var(--faint); transition: color var(--t-fast) var(--ease); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: #fff; color: var(--ink); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); }
.tab-n { display: grid; place-items: center; width: 20px; height: 20px; font-family: var(--f-mono); font-size: 10px; border: 1px solid var(--line); }
.tab[aria-selected="true"] .tab-n { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 640px) { .tab { padding: 0 10px; gap: 8px; font-size: 13px; } }
.tab-panel { margin-top: var(--gap); }
.tab-copy { background: #fff; padding: 36px 24px; }
@media (min-width: 768px) { .tab-copy { padding: 48px 40px; } }
.ticks { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; font-size: 13.5px; line-height: 1.5; }
.ticks svg { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--brand); }
.fade { animation: fx-fade var(--t) var(--ease); }
@keyframes fx-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- step rows (on fields) ---------- */
.rows { width: 100%; max-width: 460px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: #fff; }
.row.pending { background: rgba(255,255,255,.75); }
.row-n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; background: var(--ink); color: #fff; font-family: var(--f-mono); font-size: 11px; }
.row-t { flex: 1; min-width: 0; } .row-t b { display: block; font-weight: 400; font-size: 13.5px; }
.row-t span { display: block; font-family: var(--f-mono); font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.mark.done { background: var(--brand); color: #fff; } .mark.active { border: 1px solid var(--brand); color: var(--brand); } .mark.todo { border: 1px solid var(--line); }
.mark svg { width: 12px; height: 12px; } .mark.active svg { animation: fx-spin 2s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ---------- cards ---------- */
.card { background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: background-color var(--t-fast) var(--ease); }
.card .h3 { font-size: 20px; }
a.card:hover { background: var(--mist); }
.card-ic { width: 20px; height: 20px; color: var(--brand); }
.card .more { margin-top: auto; padding-top: 12px; font-size: 14px; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
.card-num { font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.list-rows { display: grid; gap: var(--gap); }
.list-row { display: grid; gap: 8px; background: #fff; padding: 22px 24px; }
@media (min-width: 768px) { .list-row { grid-template-columns: 80px 1fr 1.4fr; gap: 24px; align-items: baseline; } }

/* ---------- pills / tags / badges ---------- */
.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; background: var(--mist); font-size: 12.5px; color: var(--ink); }
a.tag:hover { background: var(--brand-soft); color: var(--brand-deep); }
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.badge::before { content: ""; width: 6px; height: 6px; background: var(--grad); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- faq ---------- */
.faq { display: grid; gap: var(--gap); align-content: start; }
.faq details { background: #fff; }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 19px 20px; font-size: 14px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; flex: none; color: var(--body); transition: transform var(--t) var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { max-width: 640px; padding: 0 20px 20px; font-size: 14px; line-height: 1.65; color: var(--body); }

/* ---------- price box ---------- */
.price { background: #fff; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.price .stat { font-size: 40px; }

/* ---------- form ---------- */
.fld { display: grid; gap: 6px; }
.fld label { font-size: 13px; color: var(--ink); }
.fld input, .fld textarea, .fld select { font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 0;
  height: 44px; padding: 0 14px; transition: border-color var(--t-fast) var(--ease); }
.fld textarea { height: 120px; padding: 12px 14px; resize: vertical; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--brand); }
.fld .hint { font-size: 12px; color: var(--faint); }

/* ---------- cta band ---------- */
.cta { padding: 56px 0; } @media (min-width: 768px) { .cta { padding: 76px 0; } }
.cta-box { max-width: 960px; margin: 0 auto; background: var(--canvas); }
.cta-main { padding: 40px 28px; } @media (min-width: 768px) { .cta-main { padding: 56px 48px; } }
.cta-main .p-sm { max-width: 420px; margin: 28px 0 32px; }
.cta-stats { display: flex; flex-direction: column; background: var(--mist); }
.cta-stats div { flex: 1; display: flex; flex-direction: column; padding: 24px 28px; border-top: 1px solid var(--line); }
.cta-stats div:first-child { border-top: 0; } .cta-stats div:last-child { justify-content: flex-end; }
.cta-stats dd { font-family: var(--f-display); font-size: 20px; letter-spacing: -.03em; } .cta-stats div:last-child dd { font-size: 24px; }
.cta-stats dt { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

/* ---------- footer ---------- */
.ftr { background: var(--night); color: #fff; padding: 72px 0 32px; }
.ftr-cols { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .ftr-cols { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.ftr h4 { font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8B8B85; margin-bottom: 16px; }
.ftr-cols a:not(.btn) { display: block; padding: 4px 0; font-size: 14px; color: #D6D6D0; } .ftr-cols a:not(.btn):hover { color: #fff; }
.ftr-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--night-line); font-size: 12.5px; color: #8B8B85; }

/* ---------- utilities ---------- */
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt48 { margin-top: 48px; }
.bg-white { background: #fff; } .bg-mist { background: var(--mist); } .bg-night { background: var(--night); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fill { background: #FFF3B0; color: #5A4A00; padding: 0 3px; }
.rv { opacity: 0; transform: translateY(12px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
}