@import "./comparison.css?v=4";
@import "../styles/tokens.css";
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px
}
section[id] {
  scroll-margin-top:95px
}
body {
  margin:0;
  background:var(--white);
  color:var(--night);
  font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
button,input,textarea,select {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit;
  text-decoration:none
}
button {
  cursor:pointer
}
img {
  max-width:100%;
  height:auto
}
button,input,select,textarea {
  min-width:0
}
button {
  color:inherit
}
button:disabled {
  cursor:wait
}
a,button,input,textarea,select,summary {
  outline-offset:5px
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--cobalt)
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  line-height:1.12;
  letter-spacing:-.045em
}
h2 {
  font-size:clamp(34px,3.6vw,52px);
  font-weight:600
}
h3 {
  font-weight:600
}
.container {
  width:min(1264px,calc(100% - 96px));
  margin-inline:auto
}
.section {
  padding:112px 0
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
  color:var(--cobalt);
  margin-bottom:26px
}
.eyebrow.light {
  color:var(--ice)
}
.small-line {
  width:24px;
  height:2px;
  background:var(--cobalt)
}
.muted-title {
  color:#7a8699
}
.muted {
  color:#8994a6
}
.button {
  background:var(--cobalt);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:17px 23px;
  border:1px solid transparent;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  min-height:52px;
  transition:background .22s,transform .22s,box-shadow .22s;
  white-space:nowrap
}
.button:hover {
  background:#244fe5;
  transform:translateY(-2px);
  box-shadow:0 8px 20px #315efb22
}
.button svg {
  transition:transform .25s
}
.button:hover svg {
  transform:translateX(3px)
}
.button-white {
  background:#fff;
  color:var(--night)
}
.button-white:hover {
  background:var(--cloud)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-size:14px;
  font-weight:600;
  padding:10px 0
}
.text-link:hover {
  color:var(--cobalt)
}
.icon-button {
  background:none;
  border:0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:44px;
  height:44px
}
.skip-link {
  opacity:0;
  pointer-events:none;
  position:fixed;
  left:20px;
  top:-70px;
  padding:12px;
  background:#fff;
  z-index:100
}
.skip-link:focus {
  opacity:1;
  pointer-events:auto;
  top:10px
}
.header {
  height:88px;
  position:sticky;
  top:0;
  z-index:80;
  transition:box-shadow .3s,background-color .3s,border-color .3s;
  isolation:isolate
}
.header-dark {
  background:rgba(8,15,28,.97);
  color:#fff
}
.header-light {
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line)
}
.header.is-scrolled {
  box-shadow:0 12px 35px rgba(8,15,28,.12);
  backdrop-filter:blur(14px)
}
.scroll-progress {
  position:absolute;
  z-index:2;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  background:var(--cobalt);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand {
  display:inline-flex;
  align-items:center
}
.brand-flux {
  gap:8px;
  color:#fff;
  font-size:24px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1
}
.brand-flux img {
  display:block;
  width:46px;
  height:46px;
  object-fit:contain
}
.header-light .brand-flux,.footer .brand-flux {
  color:var(--navy)
}
.desktop-nav {
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:auto;
  margin-right:30px
}
.desktop-nav a {
  font-size:12px;
  color:#b9c5d6;
  transition:color .2s;
  position:relative
}
.header-light .desktop-nav a {
  color:#526075
}
.desktop-nav a:hover {
  color:var(--cobalt)
}
.desktop-nav a:after {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-9px;
  height:2px;
  background:var(--cobalt);
  transition:right .3s cubic-bezier(.22,1,.36,1)
}
.desktop-nav a:hover:after,.desktop-nav a.is-active:after {
  right:0
}
.desktop-nav a.is-active {
  color:#fff
}
.header-light .desktop-nav a.is-active {
  color:var(--cobalt)
}
.header-cta {
  font-size:12px;
  min-height:43px;
  padding:11px 17px;
  gap:17px
}
.menu-toggle {
  display:none
}
.mobile-dialog {
  background:var(--deep);
  color:#fff;
  border:0;
  padding:26px;
  width:100%;
  max-width:none;
  height:100dvh;
  max-height:none;
  margin:0
}
.mobile-dialog::backdrop {
  background:#080f1ceb
}
.mobile-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:28px;
  font-weight:600
}
.mobile-dialog nav {
  display:flex;
  flex-direction:column;
  gap:20px;
  padding:60px 0
}
.mobile-dialog nav a {
  display:flex;
  justify-content:space-between;
  font-size:25px
}
.mobile-dialog nav .button {
  font-size:15px;
  margin-top:20px
}
.mobile-dialog p {
  color:var(--ice);
  font-size:13px
}
.hero {
  background:var(--deep);
  color:#fff;
  overflow:hidden;
  position:relative
}
.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 78% 54%,#25467a22,transparent 60%);
  pointer-events:none
}
.hero-grid {
  position:relative;
  display:grid;
  grid-template-columns:.92fr 1.15fr;
  gap:62px;
  align-items:center;
  padding-top:80px;
  padding-bottom:100px;
  min-height:645px
}
.hero-copy h1 {
  font-size:clamp(48px,5.2vw,76px);
  font-weight:600;
  letter-spacing:-.06em;
  line-height:1.05;
  margin-bottom:27px
}
.hero-copy h1 span {
  color:var(--ice)
}
.hero-copy>p {
  color:#b0bdd1;
  font-size:15px;
  line-height:1.8;
  max-width:370px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:19px;
  margin-top:32px
}
.hero-actions>span {
  font-size:10px;
  line-height:1.7;
  color:#8f9cb1
}
.hero-discover {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:37px;
  color:#a8b5ca;
  font-size:11px
}
.down-circle {
  border:1px solid #2d3b52;
  border-radius:50%;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  transition:transform .3s
}
.hero-discover:hover .down-circle {
  transform:translateY(4px)
}
.hero-visual {
  min-width:0;
  perspective:1500px
}
.demo-overline {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:8px;
  letter-spacing:.12em;
  color:#95a6c0;
  margin-bottom:16px
}
.demo-overline>span:last-child {
  margin-left:auto;
  color:#5f7596
}
.live-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ice);
  animation:live-pulse 2.4s ease-out infinite
}
.hero-app-wrap {
  transform:rotateY(-4deg) rotateX(2deg);
  transform-origin:center;
  animation:app-arrive 1.1s cubic-bezier(.22,1,.36,1);
  box-shadow:0 25px 65px #0003;
  border-radius:10px;
  transition:transform .18s ease-out;
  will-change:transform
}
.hero-app-wrap:hover {
  transform:rotateY(0deg) rotateX(0deg);
  transition:transform .18s ease-out
}
.demo-under {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:19px;
  color:#7387a5;
  font-size:9px
}
.demo-under span {
  display:flex;
  gap:6px;
  align-items:center
}
.demo-under span:last-child {
  color:#a5b8d7
}
.hero-bottom {
  position:relative;
  border-top:1px solid #ffffff12;
  padding-top:24px;
  padding-bottom:25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#99a8c0
}
.hero-bottom>span {
  font-size:8px;
  letter-spacing:.17em;
  color:#60738f
}
.hero-bottom>div {
  display:flex;
  gap:30px
}
.hero-bottom>div>span {
  display:flex;
  align-items:center;
  gap:7px
}
.hero-bottom svg {
  color:var(--ice)
}
.app-demo {
  border:1px solid #637a992e;
  border-radius:9px;
  overflow:hidden;
  background:#f7f8fb;
  color:var(--night);
  text-align:left;
  box-shadow:0 15px 45px #00000015
}
.app-browser {
  height:29px;
  background:#19263b;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 13px;
  font-size:7px;
  color:#8b9ab0
}
.app-browser>span:nth-child(2) {
  display:flex;
  align-items:center;
  gap:7px
}
.browser-dots {
  display:flex;
  gap:4px
}
.browser-dots i {
  width:4px;
  height:4px;
  background:#56657e;
  border-radius:50%
}
.app-body {
  display:flex;
  min-height:371px
}
.app-sidebar {
  flex:0 0 110px;
  background:#101e35;
  padding:19px 9px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#889bb6
}
.app-sidebar>img {
  margin:0 9px 23px
}
.app-sidebar-label {
  font-size:6px;
  letter-spacing:.12em;
  padding:0 8px;
  margin-bottom:7px
}
.app-sidebar button {
  padding:9px 6px;
  font-size:7px;
  display:flex;
  gap:7px;
  align-items:center;
  background:none;
  border:0;
  text-align:left;
  border-radius:4px;
  color:#9aabc2
}
.app-sidebar button.selected {
  color:#fff;
  background:#315efb
}
.sidebar-bottom {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  font-size:6px
}
.sidebar-bottom small {
  display:block;
  font-size:5px;
  color:#7284a0
}
.avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#283b5a;
  color:#ccd7eb;
  font-size:8px;
  flex-shrink:0
}
.avatar.pale {
  background:#e9edfb;
  color:var(--cobalt)
}
.app-workspace {
  flex:1;
  min-width:0;
  padding:0 19px 13px
}
.app-topbar {
  height:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e7ebf1;
  font-size:6px
}
.app-welcome {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:19px 0 16px
}
.tiny-label {
  font-size:5px;
  letter-spacing:.15em;
  color:#8b97ad
}
.app-welcome h3 {
  font-size:16px;
  letter-spacing:-.04em;
  margin:4px 0 5px
}
.app-welcome p {
  font-size:6px;
  color:#8792a4
}
.app-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px
}
.app-stats>div {
  background:#fff;
  border:1px solid #e7ebf1;
  padding:12px;
  border-radius:5px
}
.app-stats span {
  display:block;
  font-size:6px;
  color:#7a879d
}
.app-stats strong {
  font-size:23px;
  letter-spacing:-.05em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:500;
  line-height:1.6
}
.app-stats svg {
  color:#9aacce
}
.app-stats small {
  font-size:5px;
  color:#8e9aad
}
.app-list-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:20px;
  margin-bottom:8px;
  font-size:8px
}
.demo-search {
  display:flex;
  align-items:center;
  gap:5px;
  color:#8997ac
}
.demo-search input {
  width:64px;
  background:none;
  border:0;
  font-size:6px
}
.app-table-head {
  display:grid;
  grid-template-columns:1fr 56px 51px;
  font-size:5px;
  color:#8b96a8;
  padding:6px 4px;
  border-bottom:1px solid #e9ecf2
}
.app-table-row {
  display:grid;
  grid-template-columns:1fr 56px 51px;
  align-items:center;
  padding:8px 4px;
  border-bottom:1px solid #e9ecf2;
  font-size:6px;
  gap:0
}
.app-table-row>span:first-child {
  display:flex;
  gap:7px;
  align-items:center
}
.app-table-row small {
  display:block;
  color:#93a0b2;
  font-size:5px
}
.app-table-row>span:nth-child(2) {
  color:#7d8a9e;
  font-size:5px
}
.file-tile {
  background:#eaf0ff;
  color:#557ade;
  padding:5px;
  border-radius:4px;
  display:flex
}
.tone-1 {
  background:#f0edf9;
  color:#8870b6
}
.tone-2 {
  background:#f5f0e8;
  color:#ad9064
}
.status {
  background:#ecf0fd;
  color:#4564b0;
  border-radius:3px;
  font-size:5px;
  display:inline-flex;
  gap:5px;
  align-items:center;
  justify-content:center;
  padding:3px 5px;
  width:fit-content;
  white-space:nowrap
}
.status.complete {
  background:#eaf0f3;
  color:#536c7d
}
.demo-task {
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  margin-top:12px;
  background:#fff;
  border:1px solid #dfe6f6;
  border-radius:5px;
  text-align:left;
  font-size:6px;
  transition:background .3s
}
.demo-task>svg {
  margin-left:auto;
  color:#6c86bb
}
.demo-task small {
  display:block;
  font-size:5px;
  color:#8a97ad
}
.task-checkbox {
  height:16px;
  width:16px;
  border:1px solid #b9c8e6;
  border-radius:4px;
  display:grid;
  place-items:center
}
.is-done {
  background:#edf2ff
}
.is-done .task-checkbox {
  background:var(--cobalt);
  border-color:var(--cobalt);
  color:white
}
.demo-disclosure {
  display:block;
  font-size:5px;
  text-align:right;
  color:#9aa5b6;
  margin-top:8px
}
.team-demo>div {
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:9px
}
.team-demo small {
  display:block;
  font-size:6px;
  color:#8090a6
}
.team-demo .status {
  margin-left:auto
}
.empty-result {
  font-size:9px;
  padding:15px
}
.intro-heading {
  max-width:700px
}
.pain-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  margin-top:55px
}
.pain {
  border-top:1px solid var(--line);
  padding-top:20px
}
.index {
  font-size:10px;
  font-family:monospace;
  color:#94a0b2
}
.pain h3 {
  white-space:pre-line;
  font-size:23px;
  line-height:1.25;
  margin:20px 0 15px
}
.pain p {
  color:var(--secondary);
  font-size:13px;
  max-width:280px;
  line-height:1.8
}
.transformation {
  background:var(--cloud);
  overflow:hidden
}
.transformation .section-heading {
  margin-bottom:24px
}
.section-heading {
  margin-bottom:48px
}
.section-heading p {
  color:var(--secondary);
  font-size:14px;
  line-height:1.8;
  margin-top:24px
}
.centered {
  text-align:center
}
.centered .eyebrow {
  justify-content:center
}
.transform-controls {
  display:flex;
  justify-content:center;
  background:#e6ebf3;
  padding:4px;
  gap:3px;
  border-radius:7px;
  width:fit-content;
  margin:0 auto 18px
}
.transform-controls button {
  background:none;
  border:0;
  border-radius:5px;
  padding:9px 24px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:9px
}
.transform-controls button[aria-pressed=true] {
  background:#fff;
  color:var(--cobalt);
  box-shadow:0 2px 6px #1624420a
}
.transformation-stage {
  position:relative;
  max-width:770px;
  height:300px;
  margin:auto
}
.sheet-panel,.clean-panel {
  position:absolute;
  inset:0;
  border:1px solid #dce3ef;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 16px 40px #243c6710;
  transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .4s
}
.sheet-title {
  padding:18px 25px;
  background:#f5f7fa;
  display:flex;
  align-items:center;
  gap:10px;
  color:#6f7d91;
  font-size:12px
}
.sheet-title span:last-child {
  margin-left:auto
}
.sheet-grid {
  display:grid;
  grid-template-columns:35px 1fr 1fr 1fr;
  gap:1px;
  background:#e7ebf1
}
.sheet-grid span {
  background:#fff;
  padding:7px 15px;
  font-size:10px;
  color:#7c899e
}
.sheet-grid span:nth-child(-n+4) {
  background:#f1f3f7
}
.sheet-note {
  position:absolute;
  right:22px;
  bottom:22px;
  font-size:12px;
  color:#536786;
  background:#e9effd;
  padding:12px;
  transform:rotate(-3deg);
  box-shadow:0 4px 12px #101e350b
}
.sheet-faded {
  transform:translateX(-28px) rotate(-3deg) scale(.92);
  opacity:0;
  pointer-events:none
}
.clean-panel {
  opacity:0;
  transform:translateX(32px) scale(.97);
  pointer-events:none
}
.clean-visible {
  opacity:1;
  transform:none;
  pointer-events:auto
}
.clean-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:19px 26px;
  border-bottom:1px solid var(--line)
}
.clean-title>span:first-child {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  font-weight:600
}
.mini-symbol {
  background:var(--cobalt);
  color:#fff;
  font-size:12px;
  padding:4px 9px;
  border-radius:5px
}
.clean-title .status {
  font-size:9px
}
.clean-row {
  display:flex;
  align-items:center;
  gap:15px;
  padding:14px 26px;
  border-bottom:1px solid #eff1f5
}
.round-icon {
  width:36px;
  height:36px;
  border-radius:8px;
  background:#eef2fc;
  color:#5378cc;
  display:grid;
  place-items:center;
  flex-shrink:0
}
.clean-row strong {
  font-size:12px;
  display:block;
  font-weight:600
}
.clean-row small {
  display:block;
  font-size:10px;
  color:#8390a2
}
.clean-date {
  margin-left:auto;
  font-size:10px;
  color:#94a1b4
}
.clean-row>svg {
  color:#a2b1c7
}
.clean-summary {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#657da4;
  font-size:10px;
  padding:13px
}
.transformation-caption {
  text-align:center;
  font-size:12px;
  color:#7f8da2;
  margin-top:25px;
  min-height:2em
}
.split-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}
.split-heading p {
  max-width:285px;
  margin:0 0 4px
}
.solutions-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px
}
.solution {
  border-top:1px solid var(--line);
  padding-top:24px;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s
}
.solution:hover {
  transform:translateY(-7px);
  border-color:var(--cobalt)
}
.solution-preview {
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s
}
.solution:hover .solution-preview {
  transform:translateY(-3px);
  box-shadow:0 16px 35px rgba(22,46,84,.1)
}
.solution-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--cobalt)
}
.solution-top>span {
  font-size:10px;
  color:#9aa5b5
}
.solution h3 {
  font-size:25px;
  line-height:1.2;
  white-space:pre-line;
  margin:25px 0 17px
}
.solution>p {
  font-size:13px;
  line-height:1.8;
  color:var(--secondary);
  min-height:72px
}
.solution-preview {
  height:173px;
  background:var(--cloud);
  border-radius:7px;
  padding:18px;
  margin-top:30px;
  overflow:hidden
}
.preview-caption {
  font-size:7px;
  letter-spacing:.13em;
  color:#9aa5b6
}
.mini-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:15px
}
.mini-columns>div {
  padding:8px;
  background:#e9edf4;
  border-radius:4px
}
.mini-columns small {
  display:flex;
  justify-content:space-between;
  font-size:7px;
  color:#7f8fa7;
  margin-bottom:8px
}
.mini-columns b {
  font-weight:400
}
.mini-columns span {
  display:block;
  background:#fff;
  font-size:7px;
  padding:9px;
  margin-top:5px;
  border-radius:4px
}
.mini-columns .blue-mini {
  border-left:2px solid var(--cobalt)
}
.blue-mini i {
  display:block;
  width:60%;
  height:3px;
  background:#e6edfe;
  margin-top:10px
}
.flow-preview {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-top:24px;
  gap:8px
}
.flow-preview>span {
  color:#8da0bb;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:8px
}
.flow-preview>i {
  height:1px;
  flex:1;
  background:#d7dfef;
  margin-top:12px
}
.flow-preview small {
  font-size:8px;
  color:#7c8ba3
}
.flow-ran>span,.flow-ran small {
  color:var(--cobalt);
  transition:color .5s
}
.flow-ran>span:nth-of-type(2) {
  transition-delay:.2s
}
.flow-ran>span:nth-of-type(3) {
  transition-delay:.4s
}
.mini-action {
  background:none;
  border:0;
  font-size:8px;
  color:#496bc4;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:13px 0 0;
  margin-top:8px
}
.ai-output {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:9px;
  line-height:1.8;
  background:#fff;
  border:1px solid #e9edf5;
  padding:14px;
  margin-top:13px;
  border-radius:5px;
  min-height:65px;
  color:#70819b
}
.ai-output svg {
  flex-shrink:0;
  color:var(--cobalt)
}
.preview-ai .mini-action {
  padding-top:5px
}
.solution-label {
  display:block;
  font-size:10px;
  color:#8a97aa;
  margin-top:18px
}
.example-note {
  font-size:10px;
  color:#98a4b6;
  margin-top:26px
}
.statement {
  background:var(--night);
  color:#fff;
  padding:84px 0;
  overflow:hidden
}
.statement-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  align-items:center;
  gap:90px
}
.statement h2 {
  font-size:42px;
  line-height:1.18
}
.statement h2 span {
  color:var(--ice)
}
.statement p {
  color:#9aaac2;
  font-size:14px;
  max-width:465px;
  line-height:1.85;
  margin:24px 0 32px
}
.statement-art {
  position:relative;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:30px
}
.statement-art img {
  position:relative;
  z-index:1;
  opacity:.9
}
.statement-art>span {
  font-size:9px;
  color:#7d92b3;
  letter-spacing:.19em
}
.art-grid {
  position:absolute;
  width:290px;
  height:290px;
  top:0;
  transform:rotate(-12deg);
  border:1px solid #9cb5ff12;
  border-radius:35px
}
.art-grid:before,.art-grid:after {
  content:"";
  position:absolute;
  inset:24px;
  border:1px solid #9cb5ff12;
  border-radius:25px;
  transform:rotate(25deg)
}
.art-grid:after {
  inset:-24px;
  transform:rotate(-15deg);
  border-radius:45px
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:22px;
  margin-top:58px
}
.process-step {
  border-top:1px solid var(--line);
  position:relative;
  padding-top:23px
}
.process-step:before {
  content:"";
  position:absolute;
  top:-3px;
  left:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--cobalt)
}
.process-step:after {
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:0;
  height:1px;
  background:var(--cobalt);
  transition:width .8s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms)
}
.process-step.is-visible:after {
  width:100%
}
.process-number {
  font-size:10px;
  font-family:monospace;
  color:var(--cobalt)
}
.process-step h3 {
  font-size:19px;
  margin:21px 0 14px
}
.process-step p {
  font-size:12px;
  line-height:1.8;
  color:var(--secondary)
}
.process-step small {
  display:block;
  font-size:9px;
  color:#8f9cb0;
  margin-top:22px
}
.time-note {
  margin-top:42px;
  padding:22px 25px;
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--cloud);
  border-radius:6px;
  font-size:12px;
  color:#516784
}
.time-note span {
  font-size:10px;
  color:#8f9db1
}
.ownership {
  background:var(--cloud);
  padding:80px 0
}
.ownership-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px;
  align-items:start
}
.ownership h2 {
  font-size:42px
}
.ownership-details>div {
  display:flex;
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid #dfe5ef
}
.ownership-details>div:first-child {
  padding-top:0
}
.ownership-details>div:last-child {
  border:0;
  padding-bottom:0
}
.ownership h3 {
  font-size:16px;
  line-height:1.4;
  letter-spacing:-.02em
}
.ownership p {
  font-size:12px;
  line-height:1.8;
  color:var(--secondary);
  margin-top:6px
}
.ownership .round-icon {
  background:#e6ecf7
}
.trust {
  background:#fff
}
.trust-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:52px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.trust-grid article {
  padding:28px 25px 31px;
  border-right:1px solid var(--line);
  transition:background .3s,transform .3s
}
.trust-grid article:hover {
  background:#f7f9fd;
  transform:translateY(-4px)
}
.trust-grid article:first-child {
  padding-left:0
}
.trust-grid article:last-child {
  border-right:0;
  padding-right:0
}
.trust-grid article>span {
  font:10px monospace;
  color:var(--cobalt)
}
.trust-grid h3 {
  font-size:16px;
  margin:18px 0 10px
}
.trust-grid p {
  color:var(--secondary);
  font-size:12px;
  line-height:1.8
}
.trust-note {
  margin-top:28px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:#60738e;
  font-size:11px;
  line-height:1.7
}
.trust-note svg {
  color:var(--cobalt);
  flex:0 0 auto;
  margin-top:1px
}
.trust-note strong {
  color:var(--night)
}
.faq-grid {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px
}
.faq h2 {
  font-size:40px
}
.faq details {
  border-bottom:1px solid var(--line)
}
.faq details:first-child {
  border-top:1px solid var(--line)
}
.faq summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:21px 0;
  font-size:13px;
  font-weight:500;
  cursor:pointer
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary svg {
  flex-shrink:0;
  color:#8f9db4;
  transition:transform .25s
}
.faq details[open] summary svg {
  transform:rotate(45deg);
  color:var(--cobalt)
}
.faq details>p {
  font-size:13px;
  line-height:1.85;
  color:var(--secondary);
  padding:0 35px 23px 0;
  animation:answer-in .25s
}
.final-cta {
  background:var(--deep);
  color:#fff;
  padding:85px 0;
  position:relative;
  overflow:hidden
}
.final-cta:after {
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border:1px solid #8ea7cc12;
  border-radius:50%;
  right:-100px;
  top:45px;
  pointer-events:none
}
.final-grid {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px
}
.final-cta h2 {
  font-size:58px;
  line-height:1.1
}
.final-cta h2 span {
  color:var(--ice)
}
.final-cta p {
  font-size:14px;
  color:#9ba9be;
  margin-top:22px;
  line-height:1.8
}
.final-grid>div:last-child {
  margin-right:70px
}
.cta-reassurance {
  display:block;
  margin-top:17px;
  font-size:10px;
  line-height:1.8;
  color:#7e90ad
}
.footer {
  padding:48px 0 23px;
  background:#fff
}
.footer-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding-bottom:38px
}
.footer-main p {
  font-size:13px;
  color:#a1abb9;
  line-height:1.6;
  margin-right:auto;
  margin-left:50px
}
.footer-main strong {
  font-weight:500;
  color:#5b6b82
}
.footer-main>div {
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:6px
}
.footer-main a:hover {
  color:var(--cobalt)
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding-top:21px;
  font-size:9px;
  color:#939fb0
}
.footer-privacy {
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin:-12px 0 25px;
  padding:8px 11px;
  border:1px solid #e3e8f0;
  border-radius:6px;
  font-size:9px;
  color:#728097
}
.footer-privacy a {
  color:var(--cobalt);
  margin-left:5px
}
.privacy-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#43b884
}
.footer-bottom>div {
  display:flex;
  gap:24px
}
.footer-bottom a:hover {
  color:var(--cobalt)
}
.form-page {
  background:var(--cloud);
  padding:65px 0 90px;
  min-height:75vh
}
.form-layout {
  display:grid;
  grid-template-columns:.85fr 1.2fr;
  gap:90px;
  align-items:start
}
.form-intro {
  padding-top:35px
}
.form-intro h1 {
  font-size:52px;
  font-weight:600
}
.form-intro>p {
  font-size:14px;
  color:var(--secondary);
  line-height:1.9;
  margin-top:23px;
  max-width:340px
}
.form-benefits {
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:13px;
  font-size:12px;
  color:#667c9b
}
.form-benefits>span {
  display:flex;
  gap:10px;
  align-items:center
}
.form-card {
  padding:35px;
  background:#fff;
  border:1px solid #e4e9f2;
  border-radius:10px;
  box-shadow:0 8px 40px #101e3504
}
.form-progress-top {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#8e9bb0
}
.form-progress {
  display:flex;
  gap:5px;
  margin-top:13px;
  margin-bottom:30px
}
.form-progress>span {
  height:3px;
  flex:1;
  background:#e8edf5;
  border-radius:3px
}
.form-progress>span.active {
  background:var(--cobalt)
}
.form-card h2 {
  font-size:26px;
  margin:0 0 8px;
  letter-spacing:-.035em
}
.form-lead {
  font-size:12px;
  color:#7c8ba2;
  margin-bottom:25px
}
.field {
  display:block;
  margin-top:19px
}
.field>span,.form-legend {
  display:block;
  font-size:12px;
  font-weight:600;
  margin-bottom:8px
}
.field small {
  font-size:10px;
  font-weight:400;
  color:#8d9aaf
}
.field input,.field textarea,.field select {
  border:1px solid #dce3ee;
  background:#fff;
  padding:12px;
  font-size:12px;
  border-radius:5px;
  width:100%;
  color:var(--night)
}
.field textarea {
  resize:vertical;
  min-height:90px
}
.field input::placeholder,.field textarea::placeholder {
  color:#9aa6b8
}
.field select {
  min-height:44px
}
.field-hint {
  font-size:10px;
  color:#8492a8;
  margin-top:6px
}
.form-options {
  border:0;
  padding:0;
  margin:20px 0
}
.option-list {
  display:grid;
  grid-template-columns:1fr;
  gap:8px
}
.choice {
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid #dfe6f1;
  padding:11px 13px;
  border-radius:5px;
  font-size:12px;
  cursor:pointer;
  transition:border .2s,background .2s
}
.choice:has(input:checked) {
  background:#f0f4ff;
  border-color:var(--cobalt)
}
.choice input {
  accent-color:var(--cobalt)
}
.form-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:28px;
  gap:15px
}
.back-button {
  border:0;
  background:none;
  font-size:12px;
  color:#7a8ca6;
  padding:12px 0;
  display:flex;
  align-items:center;
  gap:8px
}
.back-button svg {
  transform:rotate(180deg)
}
.form-actions .button {
  margin-left:auto
}
.form-error {
  font-size:12px;
  background:#fff1ef;
  border:1px solid #efd5d0;
  color:#8e453b;
  padding:12px;
  border-radius:5px;
  margin:18px 0
}
.privacy-note {
  font-size:10px;
  color:#8a99ad;
  line-height:1.8;
  margin-top:25px
}
.privacy-note a {
  text-decoration:underline
}
.form-draft {
  font-size:9px;
  color:#9aa6b7;
  margin-top:12px
}
.honey {
  position:absolute;
  left:-10000px
}
.form-review {
  font-size:12px;
  color:#6f8099;
  background:var(--cloud);
  padding:16px;
  margin:18px 0
}
.form-review strong {
  color:var(--night)
}
.success-card {
  max-width:650px;
  margin:auto;
  text-align:center;
  padding:60px 35px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px
}
.success-card .round-icon {
  margin:0 auto 25px;
  width:60px;
  height:60px
}
.success-card h1 {
  font-size:40px
}
.success-card p {
  font-size:14px;
  color:var(--secondary);
  margin:20px 0
}
.legal-page {
  padding:70px 0 100px;
  min-height:70vh
}
.reading {
  width:min(740px,calc(100% - 40px));
  margin:auto
}
.legal-page h1 {
  font-size:44px;
  margin-bottom:25px
}
.legal-page h2 {
  font-size:22px;
  margin:35px 0 12px
}
.legal-page p,.legal-page li {
  font-size:14px;
  color:var(--secondary);
  line-height:1.9
}
.legal-updated {
  font-size:11px!important;
  color:#8b98aa!important
}
.legal-missing {
  display:inline-block;
  padding:3px 7px;
  border:1px solid #e6b8ad;
  border-radius:4px;
  background:#fff5f2;
  color:#9b4d40;
  font-size:11px
}
.legal-facts {
  margin:18px 0;
  border-top:1px solid var(--line)
}
.legal-facts>div {
  display:grid;
  grid-template-columns:170px 1fr;
  gap:24px;
  padding:13px 0;
  border-bottom:1px solid var(--line)
}
.legal-facts dt {
  color:#8794a8;
  font-size:12px
}
.legal-facts dd {
  margin:0;
  color:var(--night);
  font-size:13px;
  line-height:1.7
}
.cookie-status {
  display:grid;
  gap:5px;
  padding:20px 22px;
  margin:24px 0;
  border:1px solid #dce5f3;
  border-radius:8px;
  background:#f5f8ff
}
.cookie-status strong {
  font-size:14px;
  color:#244b9b
}
.cookie-status span {
  color:#647895;
  font-size:12px;
  line-height:1.7
}
.legal-table-wrap {
  overflow-x:auto;
  margin:18px 0
}
.legal-table {
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  font-size:12px;
  line-height:1.6
}
.legal-table th,.legal-table td {
  padding:12px 14px;
  border:1px solid #e0e6ef;
  text-align:left;
  vertical-align:top
}
.legal-table th {
  background:var(--cloud);
  color:#51647e
}
.draft-notice {
  background:var(--cloud);
  border-left:3px solid var(--cobalt);
  padding:18px 22px;
  font-size:12px;
  margin:25px 0
}
.legal-page a {
  text-decoration:underline
}
.motion-ready [data-reveal] {
  opacity:0;
  transform:translateY(24px) scale(.985);
  filter:blur(5px)
}
.motion-ready [data-reveal].is-visible {
  opacity:1;
  transform:none;
  filter:none;
  transition:opacity .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),transform .75s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),filter .6s ease var(--reveal-delay,0ms)
}
@keyframes live-pulse {
  0%,45% {box-shadow:0 0 0 0 rgba(156,181,255,.35)}
  80%,100% {box-shadow:0 0 0 7px rgba(156,181,255,0)}
}
@keyframes app-arrive {
  from {
    transform:translateY(22px) rotateY(-6deg) rotateX(3deg)
  }
  to {
    transform:translateY(0) rotateY(-4deg) rotateX(2deg)
  }
}
@keyframes answer-in {
  from {
    opacity:.3;
    transform:translateY(-4px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@media(min-width:1600px) {
  .hero-grid {
    min-height:720px
  }
  .hero-copy h1 {
    font-size:80px
  }
}
@media(max-width:1150px) {
  .container {
    width:calc(100% - 64px)
  }
  .hero-grid {
    gap:35px;
    grid-template-columns:.9fr 1.1fr;
    padding:65px 0 80px
  }
  .hero-copy h1 {
    font-size:54px
  }
  .hero-actions {
    flex-direction:column;
    align-items:flex-start;
    gap:12px
  }
  .hero-actions>span br {
    display:none
  }
  .hero-bottom>div {
    gap:20px
  }
  .hero-bottom>span {
    display:none
  }
  .app-sidebar {
    flex-basis:76px
  }
  .app-sidebar button span {
    font-size:6px
  }
  .sidebar-bottom>span:last-child {
    display:none
  }
  .app-workspace {
    padding:0 12px 12px
  }
  .app-welcome h3 {
    font-size:14px
  }
  .app-stats>div {
    padding:8px
  }
  .app-table-row,.app-table-head {
    grid-template-columns:1fr 45px 45px
  }
  .hero-visual {
    margin-right:-15px
  }
  .solutions-grid {
    gap:24px
  }
  .solution h3 {
    font-size:22px
  }
  .statement-grid {
    gap:40px
  }
  .statement h2 {
    font-size:35px
  }
  .process-grid {
    gap:18px
  }
  .ownership-grid,.faq-grid {
    gap:50px
  }
  .final-grid>div:last-child {
    margin-right:0
  }
  .form-layout {
    gap:45px
  }
}
@media(max-width:850px) {
  .container {
    width:calc(100% - 48px)
  }
  .desktop-nav {
    gap:18px;
    margin-right:5px
  }
  .header {
    height:76px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:45px;
    padding:55px 0
  }
  .hero-copy {
    max-width:540px
  }
  .hero-copy h1 {
    font-size:66px
  }
  .hero-copy>p {
    max-width:440px
  }
  .hero-actions {
    flex-direction:row;
    align-items:center
  }
  .hero-actions>span br {
    display:block
  }
  .hero-discover {
    display:none
  }
  .hero-visual {
    margin-right:0;
    max-width:650px;
    width:100%;
    justify-self:center
  }
  .app-body {
    min-height:375px
  }
  .app-sidebar {
    flex-basis:112px
  }
  .app-sidebar button span {
    font-size:8px
  }
  .app-workspace {
    padding:0 22px 16px
  }
  .app-welcome h3 {
    font-size:18px
  }
  .app-welcome p {
    font-size:8px
  }
  .app-stats>div {
    padding:12px
  }
  .app-stats span {
    font-size:8px
  }
  .app-stats small {
    font-size:7px
  }
  .app-table-row {
    font-size:8px
  }
  .app-table-row small {
    font-size:6px
  }
  .app-table-row>span:nth-child(2) {
    font-size:6px
  }
  .app-table-row,.app-table-head {
    grid-template-columns:1fr 65px 55px
  }
  .status {
    font-size:6px
  }
  .app-table-head {
    font-size:7px
  }
  .app-list-title {
    font-size:10px
  }
  .demo-task {
    font-size:8px
  }
  .demo-task small {
    font-size:7px
  }
  .section {
    padding:80px 0
  }
  .pain-grid {
    gap:25px
  }
  .pain h3 {
    font-size:20px
  }
  .split-heading {
    display:block
  }
  .split-heading>p {
    max-width:none;
    margin-top:20px
  }
  .solutions-grid {
    grid-template-columns:1fr;
    gap:40px
  }
  .solution {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:40px
  }
  .solution-top,.solution h3,.solution>p,.solution-label {
    grid-column:1
  }
  .solution h3 {
    font-size:26px
  }
  .solution>p {
    min-height:0
  }
  .solution-preview {
    grid-column:2;
    grid-row:1/5;
    align-self:center;
    margin:0;
    height:190px
  }
  .statement-grid {
    grid-template-columns:1fr .6fr;
    gap:30px
  }
  .statement-art img {
    width:120px
  }
  .art-grid {
    width:190px;
    height:190px;
    top:35px
  }
  .statement h2 {
    font-size:33px
  }
  .process-grid {
    grid-template-columns:repeat(3,1fr);
    row-gap:40px
  }
  .ownership-grid,.faq-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .faq-grid .section-heading {
    margin-bottom:5px
  }
  .ownership h2,.faq h2 {
    font-size:36px
  }
  .final-cta h2 {
    font-size:45px
  }
  .footer-main p {
    margin-left:10px
  }
  .footer-bottom>span:last-child {
    display:none
  }
  .form-layout {
    grid-template-columns:1fr;
    max-width:680px
  }
  .form-intro {
    padding:0
  }
  .form-intro h1 {
    font-size:44px
  }
  .form-intro>p {
    max-width:500px
  }
  .form-benefits {
    margin-top:25px
  }
  .form-page {
    padding-top:40px
  }
}
@media(max-width:600px) {
  .container {
    width:calc(100% - 40px)
  }
  .header {
    height:72px
  }
  .brand-flux img {
    width:40px;
    height:40px
  }
  .brand-flux {
    font-size:22px
  }
  .desktop-nav,.header-cta {
    display:none
  }
  .menu-toggle {
    display:flex
  }
  .hero-grid {
    padding-top:34px;
    padding-bottom:32px;
    gap:36px
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:.14em;
    margin-bottom:22px
  }
  .hero-copy h1 {
    font-size:clamp(43px,11.5vw,62px);
    letter-spacing:-.055em;
    line-height:1.06;
    margin-bottom:23px
  }
  .hero-copy>p {
    font-size:13px;
    max-width:320px
  }
  .hero-actions {
    margin-top:27px;
    gap:15px
  }
  .hero-actions>span {
    font-size:8px
  }
  .button {
    font-size:12px;
    padding:15px 18px;
    min-height:48px;
    gap:15px
  }
  .demo-overline {
    font-size:6px
  }
  .demo-overline>span:last-child {
    display:none
  }
  .hero-app-wrap {
    transform:none;
    animation:none
  }
  .app-body {
    min-height:294px
  }
  .app-sidebar {
    flex-basis:42px;
    padding:15px 5px 8px;
    align-items:center
  }
  .app-sidebar>img {
    width:21px;
    margin:0 0 18px
  }
  .app-sidebar-label,.app-sidebar button span,.sidebar-bottom {
    display:none
  }
  .app-sidebar button {
    padding:9px 6px
  }
  .app-workspace {
    padding:0 10px 10px
  }
  .app-topbar {
    height:28px;
    font-size:5px
  }
  .app-welcome {
    padding:13px 0
  }
  .app-welcome h3 {
    font-size:13px
  }
  .app-welcome p {
    font-size:6px
  }
  .app-welcome>.avatar {
    display:none
  }
  .app-stats {
    gap:5px
  }
  .app-stats>div {
    padding:7px
  }
  .app-stats span {
    font-size:5px
  }
  .app-stats strong {
    font-size:19px
  }
  .app-stats svg {
    width:13px
  }
  .app-stats small {
    font-size:5px
  }
  .app-list-title {
    font-size:7px;
    margin-top:15px
  }
  .app-table-row {
    font-size:6px;
    padding:7px 0
  }
  .app-table-row small {
    font-size:5px
  }
  .app-table-row>span:nth-child(2) {
    font-size:5px
  }
  .app-table-row,.app-table-head {
    grid-template-columns:1fr 40px 40px
  }
  .app-table-head {
    font-size:5px
  }
  .app-table-row>span:first-child {
    gap:4px
  }
  .file-tile {
    padding:3px
  }
  .status {
    font-size:5px;
    padding:2px 4px
  }
  .demo-task {
    font-size:6px;
    margin-top:10px;
    padding:8px 5px
  }
  .demo-task small {
    font-size:5px
  }
  .demo-search input {
    width:48px;
    font-size:5px
  }
  .demo-search svg {
    width:10px
  }
  .demo-under {
    font-size:7px;
    margin-top:13px
  }
  .hero-bottom {
    padding:20px 0
  }
  .hero-bottom>div {
    gap:13px;
    flex-wrap:wrap;
    font-size:8px
  }
  .hero-bottom svg {
    width:11px
  }
  .hero-bottom>div>span:last-child {
    display:none
  }
  .section {
    padding:62px 0
  }
  h2 {
    font-size:33px
  }
  .pain-grid {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:35px
  }
  .pain {
    display:grid;
    grid-template-columns:25px 1fr;
    gap:0 16px;
    padding-top:20px
  }
  .pain .index {
    padding-top:4px;
    grid-row:1/3
  }
  .pain h3 {
    font-size:21px;
    margin:0 0 10px
  }
  .pain p {
    font-size:12px;
    max-width:none
  }
  .section-heading {
    margin-bottom:32px
  }
  .section-heading p {
    font-size:13px
  }
  .transformation-stage {
    height:295px
  }
  .clean-title {
    padding:16px
  }
  .clean-title>span:first-child {
    font-size:11px;
    gap:8px
  }
  .clean-title .status {
    font-size:7px
  }
  .clean-row {
    padding:16px 13px;
    gap:10px
  }
  .clean-row strong {
    font-size:10px
  }
  .clean-row small {
    font-size:8px
  }
  .clean-date {
    font-size:8px
  }
  .clean-summary {
    font-size:8px;
    padding-inline:10px
  }
  .clean-row .round-icon {
    width:30px;
    height:30px
  }
  .sheet-title {
    padding:17px;
    font-size:10px
  }
  .sheet-grid span {
    padding:9px 5px;
    font-size:8px
  }
  .sheet-grid {
    grid-template-columns:25px 1fr 1fr 1fr
  }
  .sheet-note {
    font-size:10px
  }
  .transformation-caption {
    font-size:10px
  }
  .solution {
    display:block;
    padding-top:22px
  }
  .solution h3 {
    font-size:26px
  }
  .solution>p {
    max-width:350px;
    font-size:13px
  }
  .solution-preview {
    margin-top:23px;
    height:190px
  }
  .mini-columns small {
    font-size:9px
  }
  .mini-columns span {
    font-size:9px
  }
  .preview-caption {
    font-size:8px
  }
  .ai-output {
    font-size:11px
  }
  .mini-action {
    font-size:10px
  }
  .flow-preview small {
    font-size:10px
  }
  .statement {
    padding:60px 0
  }
  .statement-grid {
    grid-template-columns:1fr
  }
  .statement h2 {
    font-size:32px
  }
  .statement p {
    font-size:13px
  }
  .statement-art {
    display:none
  }
  .process-grid {
    grid-template-columns:1fr;
    margin-top:35px;
    gap:0
  }
  .process-step {
    display:grid;
    grid-template-columns:28px 1fr;
    gap:0 15px;
    padding:22px 0
  }
  .process-step h3 {
    margin:0 0 12px;
    font-size:21px
  }
  .process-number {
    grid-row:1/4;
    margin-top:2px
  }
  .process-step p,.process-step small {
    grid-column:2
  }
  .process-step small {
    margin-top:10px
  }
  .time-note {
    margin-top:13px;
    padding:18px;
    font-size:11px;
    align-items:flex-start
  }
  .time-note>svg {
    flex-shrink:0
  }
  .ownership {
    padding:60px 0
  }
  .ownership h2,.faq h2 {
    font-size:33px
  }
  .ownership-details>div {
    gap:14px
  }
  .ownership h3 {
    font-size:14px
  }
  .ownership p {
    font-size:11px
  }
  .faq summary {
    font-size:12px
  }
  .final-cta {
    padding:60px 0
  }
  .final-grid {
    display:block
  }
  .final-cta h2 {
    font-size:44px
  }
  .final-cta p {
    font-size:13px
  }
  .final-grid>div:last-child {
    margin-top:30px
  }
  .footer {
    padding-top:30px
  }
  .footer-main {
    flex-wrap:wrap;
    gap:20px;
    padding-bottom:25px
  }
  .footer-main .brand-flux img {
    width:40px;
    height:40px
  }
  .footer-main p {
    margin-left:auto;
    margin-right:0;
    font-size:11px
  }
  .footer-main>div {
    width:100%;
    font-size:11px
  }
  .footer-bottom {
    flex-direction:column;
    font-size:8px;
    gap:10px
  }
  .footer-bottom>div {
    gap:18px
  }
  .form-layout {
    gap:30px
  }
  .form-intro h1 {
    font-size:38px
  }
  .form-intro>p {
    font-size:13px
  }
  .form-benefits {
    font-size:11px;
    gap:8px
  }
  .form-card {
    padding:23px 19px
  }
  .form-card h2 {
    font-size:24px
  }
  .form-card .choice {
    font-size:11px;
    padding:12px 10px
  }
  .field input,.field select,.field textarea {
    font-size:16px
  }
  .field>span {
    font-size:11px
  }
  .success-card {
    padding:35px 22px
  }
  .success-card h1 {
    font-size:33px
  }
  .legal-page h1 {
    font-size:35px
  }
}
@media(max-width:900px) {
  .trust-grid {
    grid-template-columns:1fr 1fr
  }
  .trust-grid article,.trust-grid article:first-child,.trust-grid article:last-child {
    padding:25px;
    border-right:1px solid var(--line)
  }
  .trust-grid article:nth-child(2n) {
    border-right:0
  }
  .trust-grid article:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
  .footer-bottom {
    align-items:flex-start
  }
  .footer-bottom>div {
    flex-wrap:wrap;
    justify-content:center
  }
}
@media(max-width:600px) {
  .trust-grid {
    grid-template-columns:1fr;
    margin-top:35px
  }
  .trust-grid article,.trust-grid article:first-child,.trust-grid article:last-child {
    padding:22px 0;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .trust-grid article:last-child {
    border-bottom:0
  }
  .footer-privacy {
    width:100%;
    flex-wrap:wrap
  }
  .footer-privacy a {
    width:100%;
    margin:2px 0 0 14px
  }
  .footer-bottom>div {
    gap:13px 18px
  }
  .legal-facts>div {
    grid-template-columns:1fr;
    gap:4px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .hero-app-wrap {
    transform:none
  }
  .hero-app-wrap:hover {
    transform:none
  }
}
/* Hidden states must win over layout display declarations. */ [hidden] {
  display:none!important
}
.app-stats strong>[data-task-count] {
  font-size:inherit;
  color:inherit
}
@media(prefers-reduced-motion:reduce) {
  [data-reveal] {
    transform:none!important
  }
}
/* Comfortable reading scale for the finished site. */ :root {
  --secondary:#5d6d84
}
.desktop-nav a {
  font-size:14px
}
.eyebrow {
  font-size:11px
}
.hero-copy>p {
  font-size:16px
}
.hero-actions>span {
  font-size:11px
}
.pain p,.solution>p,.section-heading p,.statement p,.final-cta p {
  font-size:15px
}
.process-step p,.ownership p,.faq details>p {
  font-size:14px
}
.faq summary {
  font-size:15px
}
.example-note,.solution-label {
  font-size:12px
}
.form-lead,.field>span,.choice,.form-review {
  font-size:14px
}
.field input,.field select,.field textarea {
  font-size:15px
}
.privacy-note,.field-hint {
  font-size:12px;
  color:#667892
}
.form-draft {
  font-size:11px;
  color:#71809a
}
.form-progress-top {
  font-size:12px
}
.form-benefits {
  font-size:13px
}
@media(max-width:600px) {
  .eyebrow {
    font-size:9px
  }
  .hero-copy>p {
    font-size:14px
  }
  .hero-actions>span {
    font-size:9px
  }
  .pain p,.solution>p,.section-heading p,.statement p,.final-cta p {
    font-size:14px
  }
  .form-card .choice {
    font-size:13px
  }
  .field>span {
    font-size:13px
  }
  .field input,.field select,.field textarea {
    font-size:16px
  }
  .faq summary {
    font-size:14px
  }
  .example-note {
    font-size:11px
  }
}

/* Concrete applications and real project needs */
.hero-use-cases {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
  max-width:460px
}
.hero-use-cases span {
  padding:6px 10px;
  border:1px solid #30415b;
  border-radius:999px;
  color:#c5d0e0;
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em
}
.concrete-examples {
  background:#f6f8fc;
  border-bottom:1px solid var(--line)
}
.capability-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:60px;
  border-top:1px solid #dce2ec;
  border-left:1px solid #dce2ec
}
.capability-grid article {
  display:flex;
  gap:18px;
  min-height:152px;
  padding:28px;
  background:rgba(255,255,255,.5);
  border-right:1px solid #dce2ec;
  border-bottom:1px solid #dce2ec;
  transition:background .25s,transform .25s,box-shadow .25s
}
.capability-grid article:hover {
  position:relative;
  z-index:1;
  background:#fff;
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(23,41,70,.08)
}
.capability-grid article>span {
  flex:0 0 39px;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  background:#e7edff;
  color:var(--cobalt);
  border-radius:8px
}
.capability-grid h3 {
  margin:2px 0 8px;
  font-size:17px;
  letter-spacing:-.025em
}
.capability-grid p {
  color:var(--secondary);
  font-size:13px;
  line-height:1.65
}
.projects-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin:112px 0 38px
}
.projects-heading>span,.project-sector {
  color:var(--cobalt);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em
}
.projects-heading h3 {
  max-width:620px;
  font-size:clamp(29px,3vw,43px);
  font-weight:600
}
.project-cases {
  display:grid;
  gap:26px
}
.project-case {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);
  gap:44px;
  align-items:center;
  padding:52px;
  background:#fff;
  border:1px solid #dce2ec;
  overflow:hidden
}
.project-case:nth-child(even) .project-copy {
  order:2
}
.project-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-bottom:28px;
  padding:7px 10px;
  background:#edf1f7;
  border-radius:999px;
  color:#415068;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em
}
.project-status i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cobalt);
  box-shadow:0 0 0 4px #315efb18
}
.project-status.preparing i {
  background:#708099;
  box-shadow:0 0 0 4px #70809918
}
.project-copy h3 {
  margin:14px 0 20px;
  max-width:540px;
  font-size:clamp(28px,3vw,43px)
}
.project-copy>p {
  color:var(--secondary);
  font-size:14px;
  line-height:1.75
}
.project-copy ul {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 18px;
  margin:27px 0;
  padding:0;
  list-style:none
}
.project-copy li {
  display:flex;
  align-items:center;
  gap:8px;
  color:#3b485d;
  font-size:12px;
  font-weight:600
}
.project-copy li svg {
  flex:none;
  color:var(--cobalt)
}
.project-outcome {
  display:block;
  padding-top:21px;
  border-top:1px solid #e4e8ef;
  color:#1e2c41;
  font-size:12px;
  line-height:1.65
}
.project-visual {
  min-width:0;
  padding:24px;
  border:1px solid #23334b;
  border-radius:12px;
  background:#0c1728;
  color:#fff;
  box-shadow:0 28px 60px rgba(8,15,28,.2)
}
.case-appbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:19px;
  color:#dfe7f4;
  font-size:11px;
  font-weight:600
}
.case-appbar>span {
  display:flex;
  align-items:center;
  gap:8px
}
.case-appbar small,.project-visual small {
  color:#8190a7;
  font-size:9px;
  font-weight:500
}
.case-kpis {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:10px
}
.case-kpis>div,.client-metrics>div {
  display:grid;
  gap:4px;
  padding:16px;
  background:#131f32;
  border:1px solid #20304a;
  border-radius:7px
}
.case-kpis span,.client-metrics span {
  color:#91a0b5;
  font-size:9px
}
.case-kpis strong {
  font-size:23px;
  letter-spacing:-.04em
}
.case-chart-title {
  display:flex;
  justify-content:space-between;
  margin:25px 0 16px;
  font-size:11px
}
.case-chart-title span {
  color:#8190a7;
  font-size:9px
}
.location-bars {
  display:grid;
  gap:13px
}
.location-bars>div {
  display:grid;
  grid-template-columns:90px 1fr 57px;
  gap:10px;
  align-items:center;
  font-size:9px
}
.location-bars i {
  height:6px;
  background:#1b2a40;
  border-radius:6px;
  overflow:hidden
}
.location-bars b {
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--cobalt),#8ba8ff);
  border-radius:6px;
  transition:width 1s cubic-bezier(.22,1,.36,1) .25s
}
.project-case.is-visible .location-bars b {
  width:var(--bar)
}
.location-bars strong {
  text-align:right;
  font-size:9px
}
.machine-alert {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:23px;
  padding:12px;
  background:#fff;
  border-radius:7px;
  color:#152238
}
.machine-alert>span {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:6px;
  background:#e7edff;
  color:var(--cobalt)
}
.machine-alert>div {
  display:grid;
  margin-right:auto
}
.machine-alert strong {
  font-size:10px
}
.machine-alert b {
  padding:5px 7px;
  border-radius:4px;
  background:#fff1dc;
  color:#915700;
  font-size:8px
}
.coach-visual {
  position:relative;
  min-height:414px;
  padding:34px 100px 34px 25px;
  background:linear-gradient(145deg,#0c1728,#111f36)
}
.coach-desktop {
  min-height:344px;
  padding:20px;
  border:1px solid #24344e;
  border-radius:9px;
  background:#0a1423
}
.client-card {
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px;
  background:#141f31;
  border-radius:7px
}
.client-avatar {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  flex:none;
  background:#315efb;
  border-radius:50%;
  font-size:9px;
  font-weight:700
}
.client-card>div {
  display:grid;
  margin-right:auto
}
.client-card strong {
  font-size:10px
}
.session-count {
  padding:5px 7px;
  background:#213252;
  border-radius:5px;
  color:#b8c8ff;
  font-size:8px
}
.client-metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:11px
}
.client-metrics strong {
  font-size:10px
}
.coach-note {
  display:flex;
  gap:10px;
  margin-top:11px;
  padding:14px;
  border:1px solid #21314a;
  border-radius:7px;
  color:#90a0b7
}
.coach-note p {
  font-size:9px;
  line-height:1.6
}
.coach-note strong {
  color:#e4ebf5
}
.coach-phone {
  position:absolute;
  right:22px;
  bottom:22px;
  width:166px;
  min-height:330px;
  padding:26px 14px 14px;
  border:4px solid #2c3850;
  border-radius:24px;
  background:#f7f9fc;
  color:#152238;
  box-shadow:0 20px 45px rgba(0,0,0,.35)
}
.phone-speaker {
  position:absolute;
  top:9px;
  left:50%;
  width:42px;
  height:4px;
  transform:translateX(-50%);
  border-radius:4px;
  background:#cbd3df
}
.coach-phone .tiny-label {
  display:block;
  margin:9px 0 12px;
  color:var(--cobalt);
  font-size:7px;
  font-weight:700;
  letter-spacing:.12em
}
.coach-phone>strong {
  display:block;
  margin-bottom:2px;
  font-size:14px
}
.next-session {
  display:flex;
  gap:8px;
  margin:20px 0 12px;
  padding:10px;
  border:1px solid #dce3ee;
  border-radius:7px;
  background:#fff;
  color:var(--cobalt)
}
.next-session>div {
  display:grid
}
.next-session b {
  color:#17253b;
  font-size:8px
}
.coach-phone p {
  display:flex;
  justify-content:space-between;
  margin:13px 2px;
  font-size:8px
}
.coach-phone button {
  width:100%;
  padding:9px;
  border:0;
  border-radius:5px;
  background:var(--cobalt);
  color:#fff;
  font-size:8px;
  font-weight:700
}
.pwa-explainer {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:26px;
  margin-top:28px;
  padding:30px 34px;
  background:var(--deep);
  color:#fff
}
.pwa-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid #354760;
  border-radius:9px;
  color:var(--ice)
}
.pwa-explainer .eyebrow {
  margin-bottom:7px;
  font-size:8px
}
.pwa-explainer h3 {
  margin-bottom:5px;
  font-size:21px
}
.pwa-explainer p {
  max-width:760px;
  color:#9eacc1;
  font-size:12px
}
.pwa-explainer .button {
  background:#fff;
  color:var(--night)
}
.project-disclaimer {
  max-width:820px;
  margin:20px auto 0;
  color:#7b8799;
  text-align:center;
  font-size:10px
}
@media(max-width:1050px) {
  .project-case {
    grid-template-columns:1fr;
  }
  .project-case:nth-child(even) .project-copy {
    order:0
  }
}
@media(max-width:850px) {
  .capability-grid {
    grid-template-columns:1fr 1fr
  }
  .projects-heading {
    display:block
  }
  .projects-heading>span {
    display:block;
    margin-bottom:14px
  }
  .pwa-explainer {
    grid-template-columns:auto 1fr
  }
  .pwa-explainer .button {
    grid-column:1/-1;
    width:max-content
  }
}
@media(max-width:600px) {
  .hero-use-cases {
    margin-top:17px
  }
  .hero-use-cases span {
    font-size:9px
  }
  .capability-grid {
    grid-template-columns:1fr;
    margin-top:38px
  }
  .capability-grid article {
    min-height:auto;
    padding:22px 18px
  }
  .projects-heading {
    margin:76px 0 28px
  }
  .project-case {
    gap:30px;
    padding:25px 19px
  }
  .project-copy ul {
    grid-template-columns:1fr
  }
  .project-visual {
    padding:16px
  }
  .case-kpis {
    grid-template-columns:1fr 1fr
  }
  .case-kpis strong {
    font-size:18px
  }
  .location-bars>div {
    grid-template-columns:74px 1fr 49px
  }
  .coach-visual {
    min-height:470px;
    padding:17px
  }
  .coach-desktop {
    min-height:292px
  }
  .coach-phone {
    right:18px;
    bottom:16px;
    min-height:300px;
    transform:scale(.83);
    transform-origin:right bottom
  }
  .pwa-explainer {
    grid-template-columns:1fr;
    padding:25px 21px
  }
  .pwa-explainer .button {
    grid-column:auto;
    width:100%
  }
}
@media(prefers-reduced-motion:reduce) {
  .location-bars b {
    width:var(--bar)
  }
}

/* Recreated project screens. The source captures are never shipped. */
.project-visual.app-proof {
  position:relative;
  min-height:438px;
  padding:34px 22px 22px;
  overflow:hidden;
  border-color:#dce3ef;
  border-radius:14px;
  background:#edf1f8;
  color:#152238;
  box-shadow:0 28px 60px rgba(24,45,79,.16)
}
.project-visual.app-proof.coach-visual {
  min-height:438px;
  padding:34px 22px 22px;
  background:#f1f4ef
}
.proof-label {
  position:absolute;
  z-index:4;
  top:11px;
  right:17px;
  color:#6f7f96;
  font-size:7px;
  font-weight:700;
  letter-spacing:.14em
}
.proof-window {
  position:relative;
  width:calc(100% - 54px);
  min-height:371px;
  overflow:hidden;
  border:1px solid #dbe2ed;
  border-radius:11px;
  background:#fff;
  box-shadow:0 17px 34px rgba(32,51,81,.12)
}
.proof-topbar {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  min-height:42px;
  padding:8px 14px;
  border-bottom:1px solid #e7ebf1;
  background:#fff
}
.proof-topbar strong {
  color:#1477ef;
  font-size:10px;
  letter-spacing:.11em
}
.proof-topbar>span {
  grid-column:2;
  grid-row:1;
  color:#43526a;
  font-size:9px;
  font-weight:600
}
.proof-topbar small {
  grid-column:1/-1;
  color:#9aa5b5;
  font-size:7px
}
.proof-shell {
  display:grid;
  grid-template-columns:78px 1fr;
  min-height:328px
}
.proof-shell aside {
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:13px 8px;
  border-right:1px solid #e8ecf2;
  background:#fbfcfe
}
.proof-shell aside>b {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  margin:0 5px 10px;
  border-radius:6px;
  background:#1477ef;
  color:#fff;
  font-size:8px
}
.proof-shell aside>span {
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 6px;
  border-radius:5px;
  color:#8592a5;
  font-size:7px
}
.proof-shell aside>span.active {
  background:#e8f2ff;
  color:#1477ef;
  font-weight:700
}
.proof-content {
  min-width:0;
  padding:18px;
  background:#f5f7fb
}
.proof-title {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:15px
}
.proof-title>span {
  font-size:18px;
  font-weight:700;
  letter-spacing:-.04em
}
.proof-title small {
  color:#8f9aae;
  font-size:7px
}
.proof-finance-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.proof-revenue,.proof-locations {
  min-width:0;
  padding:15px;
  border:1px solid #e1e6ee;
  border-radius:8px;
  background:#fff
}
.proof-revenue>small,.proof-locations>small {
  display:block;
  color:#8c98aa;
  font-size:7px;
  font-weight:700;
  letter-spacing:.06em
}
.proof-revenue>strong {
  display:block;
  margin:11px 0 5px;
  color:#28b865;
  font-size:25px;
  letter-spacing:-.05em
}
.proof-revenue>span {
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#758399;
  font-size:7px
}
.proof-revenue>span b {
  color:#28b865
}
.proof-revenue>i {
  display:flex;
  height:54px;
  margin-top:18px;
  border-radius:5px;
  overflow:hidden;
  background:#1477ef
}
.proof-revenue>i em {
  width:var(--slice);
  background:#a84ce1
}
.proof-revenue>i em:nth-child(2) {
  background:#ff4a42
}
.proof-revenue>i em:nth-child(3) {
  background:#ffb30f
}
.proof-locations p {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:0;
  padding:12px 0;
  border-bottom:1px solid #edf0f4;
  color:#354257;
  font-size:8px
}
.proof-locations p:last-child {
  border-bottom:0
}
.proof-locations p b {
  color:#24ae60;
  white-space:nowrap
}
.proof-locations p:last-child b {
  color:#dd8a16
}
.proof-phone {
  position:absolute;
  z-index:3;
  right:16px;
  bottom:17px;
  width:148px;
  min-height:300px;
  padding:25px 13px 14px;
  overflow:hidden;
  border:4px solid #27354a;
  border-radius:25px;
  background:#f8f9fc;
  color:#171b22;
  box-shadow:0 22px 45px rgba(12,26,49,.3)
}
.proof-phone>i {
  position:absolute;
  top:8px;
  left:50%;
  width:41px;
  height:4px;
  transform:translateX(-50%);
  border-radius:5px;
  background:#c8d0dc
}
.phone-brand {
  display:block;
  margin:7px 0 5px;
  color:#1477ef;
  font-size:7px;
  font-weight:800;
  letter-spacing:.11em
}
.proof-phone>strong {
  display:block;
  margin-bottom:13px;
  font-size:18px;
  letter-spacing:-.04em
}
.stock-row {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:37px;
  margin-bottom:7px;
  padding:8px;
  border:1px solid #dfe4ec;
  border-radius:7px;
  background:#fff;
  color:#1477ef;
  font-size:8px;
  font-weight:700
}
.stock-row span {
  margin-right:auto
}
.proof-phone>small {
  display:block;
  margin-top:15px;
  color:#929aa8;
  font-size:6px;
  font-weight:700;
  letter-spacing:.06em
}
.stock-value {
  margin:3px 0 9px!important;
  font-size:18px!important
}
.stock-map {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  grid-template-rows:25px 20px;
  gap:2px;
  height:47px
}
.stock-map span {
  grid-row:1/3;
  background:#1477ef
}
.stock-map span:nth-child(2) {
  grid-row:1;
  background:#ffac0a
}
.stock-map span:nth-child(3) {
  grid-row:2;
  background:#31ce4b
}
.stock-map span:nth-child(4) {
  grid-row:1/3;
  background:#ac4ee7
}
.coaching-window .proof-topbar strong,.coaching-phone .phone-brand {
  color:#166f5c
}
.coaching-window .proof-shell aside {
  border-color:#25453f;
  background:#112e29
}
.coaching-window .proof-shell aside>b {
  background:#197962
}
.coaching-window .proof-shell aside>span {
  color:#a4bbb5
}
.coaching-window .proof-shell aside>span.active {
  background:#24423c;
  color:#d6f3e8
}
.coach-proof-content {
  background:#f7f7f2
}
.coach-proof-banner {
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border:1px solid #b9dece;
  border-radius:9px;
  background:#f2fbf6;
  color:#17735e
}
.coach-proof-banner>div {
  display:grid;
  margin-right:auto
}
.coach-proof-banner small {
  font-size:6px;
  font-weight:700;
  letter-spacing:.08em
}
.coach-proof-banner strong {
  color:#17352f;
  font-size:10px
}
.coach-proof-banner>b {
  padding:7px 8px;
  border-radius:5px;
  background:#17735e;
  color:#fff;
  font-size:7px
}
.coach-proof-kpis {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:11px
}
.coach-proof-kpis>div {
  display:grid;
  min-height:95px;
  padding:13px;
  border:1px solid #dde4df;
  border-radius:8px;
  background:#fff
}
.coach-proof-kpis small {
  color:#6f817c;
  font-size:6px;
  font-weight:700;
  letter-spacing:.06em
}
.coach-proof-kpis strong {
  align-self:end;
  color:#17352f;
  font-size:24px
}
.coaching-phone {
  border-color:#28433d;
  background:#f8f8f3
}
.coaching-phone>strong {
  margin-top:11px;
  margin-bottom:4px;
  color:#17352f;
  font-size:14px
}
.coaching-phone>small {
  margin:0;
  color:#748680
}
.phone-session {
  display:flex;
  gap:7px;
  margin:15px 0 10px;
  padding:10px;
  border:1px solid #cfe1da;
  border-radius:7px;
  background:#fff;
  color:#17735e
}
.phone-session>span {
  display:grid
}
.phone-session b {
  color:#17352f;
  font-size:7px
}
.phone-session small {
  color:#71837d;
  font-size:6px
}
.coaching-phone p {
  display:flex;
  justify-content:space-between;
  margin:12px 2px;
  color:#65756f;
  font-size:7px
}
.phone-action {
  display:block;
  padding:9px;
  border-radius:5px;
  background:#17735e;
  color:#fff;
  text-align:center;
  font-size:7px;
  font-weight:700
}
@media(max-width:600px) {
  .project-visual.app-proof,.project-visual.app-proof.coach-visual {
    min-height:430px;
    padding:31px 12px 12px
  }
  .proof-window {
    width:100%;
    min-height:350px
  }
  .proof-shell {
    grid-template-columns:58px 1fr;
    min-height:307px
  }
  .proof-shell aside>span {
    justify-content:center
  }
  .proof-shell aside>span svg {
    flex:none
  }
  .proof-content {
    padding:13px 10px
  }
  .proof-finance-grid {
    grid-template-columns:1fr
  }
  .proof-locations {
    display:none
  }
  .proof-phone {
    right:9px;
    bottom:9px;
    transform:scale(.8);
    transform-origin:right bottom
  }
  .proof-title>span {
    font-size:15px
  }
  .coach-proof-kpis {
    grid-template-columns:1fr 1fr
  }
  .coach-proof-kpis>div:last-child {
    display:none
  }
}

/* Authentic application screens with all identifying data replaced. */
.project-visual.real-screens {
  position:relative;
  min-height:438px;
  padding:34px 22px 47px;
  overflow:hidden;
  border:1px solid #dce3ef;
  border-radius:14px;
  background:#edf1f8;
  color:#152238;
  box-shadow:0 28px 60px rgba(24,45,79,.16)
}
.project-visual.coach-screens {
  background:#f1f4ef
}
.real-screens .proof-label {
  color:#596b84
}
.real-desktop {
  display:block;
  width:100%;
  border:1px solid rgba(24,45,79,.12);
  border-radius:10px;
  box-shadow:0 17px 34px rgba(32,51,81,.13)
}
.real-mobile {
  position:absolute;
  z-index:3;
  right:17px;
  bottom:23px;
  width:clamp(112px,25%,157px);
  border:4px solid #26354b;
  border-radius:24px;
  box-shadow:0 22px 45px rgba(12,26,49,.32)
}
.coach-screens .real-mobile {
  border-color:#29473f
}
.screen-zoom {
  position:absolute;
  z-index:4;
  left:22px;
  bottom:13px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid #d8e0ec;
  border-radius:6px;
  background:rgba(255,255,255,.94);
  color:#31435d;
  font-size:9px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(21,40,71,.1)
}
.screen-zoom:hover {
  color:var(--cobalt)
}
@media(max-width:600px) {
  .project-visual.real-screens {
    min-height:365px;
    padding:32px 11px 46px
  }
  .real-mobile {
    right:10px;
    bottom:18px;
    width:108px;
    border-width:3px;
    border-radius:19px
  }
  .screen-zoom {
    left:11px;
    bottom:10px;
    max-width:160px
  }
}