/* =========================================================
   FlowLink page styles.
   Loaded after styles.css and fl-kit.css. Only holds what is
   unique to this page — shared components live in fl-kit.css.
   ========================================================= */

/* ---------------- page tokens ---------------- */
:root{
  --fl-pink-band:#a3006a;
  --fl-pink-edge:#5e003c;
}

/* ---------------- intro splash ---------------- */
body.intro-splash-active{overflow:hidden}
.intro-splash{
  position:fixed;inset:0;z-index:9999;background:var(--surface-0);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  cursor:pointer;clip-path:inset(0 0 0 0);
  transition:opacity .8s var(--ease-out),clip-path .9s var(--ease-out);
}
.intro-splash.is-hidden{opacity:0;clip-path:inset(0 0 100% 0);pointer-events:none}
.intro-splash__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.intro-splash__content{position:relative;z-index:1;text-align:center;padding:24px}
.intro-splash__line{
  font-family:'Univia Pro Ultra','Plus Jakarta Sans',sans-serif;
  font-weight:900;color:#fff;
  font-size:clamp(30px,6vw,76px);letter-spacing:-1.5px;line-height:1.15;margin:0;
}
.intro-splash__cursor{
  display:inline-block;width:4px;height:.85em;background:var(--pink);
  margin-left:6px;vertical-align:middle;animation:fl-blink-hard 1s step-end infinite;
}
.intro-splash.is-complete .intro-splash__cursor{animation:none;opacity:0;transition:opacity .3s}
.intro-splash__hint{
  position:absolute;left:0;right:0;bottom:36px;z-index:1;margin:0;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.34);
  animation:fl-fade-in .6s ease 1.8s both;
}
@keyframes fl-blink-hard{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes fl-fade-in{from{opacity:0}to{opacity:1}}

/* ---------------- nav while the accent band passes ----------------
   The fallbacks are the FlowLink magenta. Service pages override the
   three custom properties in service-accents.css, so the nav darkens
   into whatever colour that page's band is. */
body.is-pink-nav .nav{background:var(--fl-nav-band,rgba(66,0,42,.92));border-bottom-color:rgba(255,255,255,.24)}
body.is-pink-nav .nav__links a{color:rgba(255,255,255,.88)}
body.is-pink-nav .nav__links a[aria-current="page"]{color:var(--fl-nav-band-link,#ffc9e7)}
body.is-pink-nav .nav__cta{background:var(--fl-nav-band-cta,#2b001c)}

/* ---------------- hero ---------------- */
.hero-grid{overflow:hidden}
.hero-grid--mark-only{--hp:0;height:calc(100svh - 79px);min-height:540px}
.hero-grid--mark-only .hero-grid__canvas{opacity:calc(1 - var(--hp) * .55)}

.hero-meta{
  position:absolute;left:5vw;top:44px;z-index:2;margin:0;
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
  opacity:calc(1 - var(--hp) * 2.4);
}
.hero-meta__sep{color:rgba(255,255,255,.28)}
.hero-meta__dot{
  width:6px;height:6px;border-radius:9999px;background:var(--pink);flex:none;
  animation:fl-pulse 2.6s ease-out infinite;
}
@keyframes fl-pulse{
  0%{box-shadow:0 0 0 0 rgba(193,0,124,.55)}
  70%{box-shadow:0 0 0 10px rgba(193,0,124,0)}
  100%{box-shadow:0 0 0 0 rgba(193,0,124,0)}
}

.hero-cue{
  position:absolute;right:5vw;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
  opacity:calc(1 - var(--hp) * 3);
}
.hero-cue span:first-child{writing-mode:vertical-rl}
.hero-cue__line{
  width:1px;height:78px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--fl-line-strong),transparent);
}
.hero-cue__line::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:26px;background:var(--pink);
  animation:fl-cue 2.4s ease-in-out infinite;
}
@keyframes fl-cue{
  0%{transform:translateY(-28px);opacity:0}
  25%{opacity:1}
  100%{transform:translateY(78px);opacity:0}
}

.hero-lead{
  position:absolute;left:0;bottom:54px;z-index:2;width:100%;padding:0 5vw;
  transform:translate3d(0,calc(var(--hp) * -70px),0);
  opacity:calc(1 - var(--hp) * 1.35);
  will-change:transform,opacity;
}
.flowlink-mark{
  display:block;margin:0 0 26px;padding:0;pointer-events:none;
  font-size:clamp(58px,10.5vw,224px);line-height:1;letter-spacing:-.035em;
  white-space:nowrap;
}
.flowlink-mark .fl-flow{
  font-family:'Univia Pro Black','Plus Jakarta Sans',sans-serif;
  font-weight:800;color:#fff;
}
.flowlink-mark .fl-link{
  font-family:'Univia Pro Ultra','Plus Jakarta Sans',sans-serif;
  font-weight:900;color:var(--pink);
}
.flowlink-mark .ch{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.08}
.flowlink-mark .chi{
  display:block;transform:translateY(115%);
  transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--i) * 52ms + 140ms);
}
body.is-hero-ready .flowlink-mark .chi{transform:none}

.hero-lead__row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:48px;flex-wrap:wrap;
}
.hero-sub{
  margin:0;max-width:52ch;font-size:17px;line-height:1.6;color:var(--t-70);
  opacity:0;transform:translateY(16px);
  transition:opacity .9s ease .9s,transform .9s var(--ease-out) .9s;
}
.hero-lead__cta{
  flex:none;opacity:0;transform:translateY(16px);
  transition:opacity .9s ease 1.05s,transform .9s var(--ease-out) 1.05s,background-color .18s ease;
}
body.is-hero-ready .hero-sub,
body.is-hero-ready .hero-lead__cta{opacity:1;transform:none}

/* ---------------- intro band ---------------- */
.fl-intro{min-height:84svh;align-items:center;justify-content:flex-start}
/* Push the animated grid to the right so the copy keeps a clean, high-contrast field. */
.fl-intro .hero-grid__canvas{
  -webkit-mask-image:radial-gradient(120% 92% at 80% 50%, #000 18%, transparent 74%);
  mask-image:radial-gradient(120% 92% at 80% 50%, #000 18%, transparent 74%);
}
.fl-intro .wide{position:relative;z-index:1;width:100%}
.fl-intro__inner{max-width:760px;padding:64px 0}
.fl-intro__inner .h-product{margin:0;font-size:clamp(38px,5.6vw,72px);line-height:1.08;letter-spacing:-.03em}
.fl-intro__lead{margin:26px 0 0;max-width:60ch;color:var(--t-70)}

/* ---------------- 02 — compare band ---------------- */
.compare-section{position:relative;padding:var(--fl-pad) 0;isolation:isolate}
/* The colour change fades in over the whole band and blends to navy at both
   edges, so there is no hard seam and no flash. */
.compare-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .9s ease;
  background:linear-gradient(180deg,
    rgba(94,0,60,0) 0%,
    rgba(94,0,60,.5) 14%,
    var(--fl-pink-band) 42%,
    var(--fl-pink-band) 58%,
    rgba(94,0,60,.5) 86%,
    rgba(94,0,60,0) 100%);
}
.compare-section.is-pink-active::before{opacity:1}

.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden}
/* Text sits on a dark translucent panel rather than directly on the pink, so
   contrast stays well above AA no matter what the band is doing. */
.compare-section.is-pink-active .compare-grid{
  background:rgba(5,9,24,.66);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-color:rgba(255,255,255,.34);
  box-shadow:0 44px 120px -54px rgba(0,0,0,.95);
}
.compare-col{padding:50px 46px;position:relative}
.compare-col--good{border-left:1px solid var(--fl-line)}
.compare-col--bad::after{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;opacity:0;
  background:linear-gradient(180deg,transparent,var(--pink),transparent);
  transition:opacity .8s ease;
}
.compare-section.is-pink-active .compare-col--bad::after{opacity:1}
.compare-col__tag{
  margin:0 0 12px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.66);
}
.compare-col h3{margin:0 0 22px;font-size:clamp(21px,2.4vw,27px);line-height:1.2;color:#fff;letter-spacing:-.01em}
.compare-col ul{list-style:none;margin:0;padding:0}
.compare-col li{
  display:flex;align-items:flex-start;gap:14px;padding:15px 0;
  border-top:1px solid var(--fl-line);
  font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.9);
}
.compare-col li:first-child{border-top:0;padding-top:0}
.compare-col svg{flex:none;margin-top:3px;width:19px;height:19px}
.compare-col--bad svg{color:#ff6484}
.compare-col--good svg{color:#3aa0ff}
.compare-col--good li{font-weight:600;color:#fff}

/* ---------------- system view (animation frame) ---------------- */
/* Just a frame around the image — no fake window chrome, no status light. */
.sysview{
  position:relative;overflow:hidden;margin:0 auto;max-width:var(--shell);
  border:1px solid var(--fl-line);border-radius:var(--r-lg);background:#040a18;
  transition:border-color .45s ease;
}
.sysview:hover,.sysview:active{border-color:var(--fl-line-strong)}
.sysview img{display:block;width:100%}

/* ---------------- 04 — process timeline ---------------- */
.process-timeline{position:relative;max-width:820px;padding-left:46px;--tp:0}
.process-timeline::before{
  content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px;background:var(--fl-line);
}
.process-timeline__fill{
  position:absolute;left:6px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,var(--pink),var(--blue));
  box-shadow:0 0 14px rgba(193,0,124,.5);
  transform:scaleY(var(--tp));transform-origin:top;
}
.process-step{position:relative;padding-bottom:58px}
.process-step:last-child{padding-bottom:0}
.process-step__dot{
  position:absolute;left:-40px;margin-left:-6px;top:9px;
  width:13px;height:13px;border-radius:9999px;
  background:var(--surface-0);border:1px solid var(--fl-line-strong);
  transition:background-color .5s ease,border-color .5s ease,box-shadow .5s ease,transform .5s var(--ease-out);
}
.process-step.is-active .process-step__dot{
  background:var(--pink);border-color:var(--pink);transform:scale(1.14);
  box-shadow:0 0 0 5px rgba(193,0,124,.16),0 0 22px rgba(193,0,124,.55);
}
.process-step__k{
  margin:0 0 10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
}
/* Steps dim until the drawn line reaches them. */
.process-step h3{
  margin:0 0 12px;font-size:clamp(19px,2.1vw,25px);line-height:1.25;font-weight:700;
  color:rgba(255,255,255,.52);transition:color .5s ease;letter-spacing:-.015em;
}
.process-step.is-active h3{color:#fff}
.process-step h3::first-letter{color:var(--pink)}
.process-step p{
  margin:0;max-width:66ch;font-size:16px;line-height:1.7;
  color:rgba(255,255,255,.5);transition:color .5s ease;
}
.process-step.is-active p{color:var(--t-70)}

/* ---------------- 05 — faq ---------------- */
.qa{display:flex;flex-direction:column;gap:14px;max-width:var(--shell);margin:0 auto}
.qa__item{
  position:relative;overflow:hidden;
  border:1px solid var(--fl-line);border-radius:var(--r-md);
  background:var(--fl-surface);
  transition:border-color .35s ease,background-color .35s ease;
}
.qa__item:hover,.qa__item:active,.qa__item.is-open{border-color:var(--fl-line-strong)}
.qa__item.is-open{background:linear-gradient(180deg,rgba(20,42,92,.6),rgba(6,15,38,.92))}
.qa__toggle{
  width:100%;display:flex;align-items:center;gap:20px;
  background:none;border:none;cursor:pointer;padding:24px 26px;text-align:left;
  font:inherit;color:inherit;
}
.qa__n{
  flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--blue);transition:color .35s ease;
}
.qa__item.is-open .qa__n{color:var(--pink)}
.qa__q{flex:1;font-size:18px;font-weight:600;line-height:1.4;color:#fff;margin:0}
.qa__icon{position:relative;flex:none;width:26px;height:26px;transition:transform .4s var(--ease-out)}
.qa__item.is-open .qa__icon{transform:rotate(180deg)}
.qa__icon::before,.qa__icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--blue);
  transition:transform .3s ease,background-color .3s ease;border-radius:2px;
}
.qa__icon::before{width:17px;height:2px;transform:translate(-50%,-50%)}
.qa__icon::after{width:2px;height:17px;transform:translate(-50%,-50%)}
.qa__item.is-open .qa__icon::after{transform:translate(-50%,-50%) scaleY(0)}
.qa__item.is-open .qa__icon::before{background:var(--pink)}
/* grid-template-rows animates cleanly and survives resize, unlike max-height */
.qa__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.qa__item.is-open .qa__panel{grid-template-rows:1fr}
.qa__panel-inner{overflow:hidden}
.qa__a{margin:0;padding:0 26px 26px 66px;color:var(--t-70);line-height:1.7;font-size:16.5px;max-width:78ch}

/* ---------------- closing cta ---------------- */
.scan-section{
  position:relative;overflow:hidden;padding:clamp(92px,11vw,152px) 0;
  border-top:1px solid var(--fl-line);background:var(--surface-0);
}
.scan-section .hero-grid__canvas{
  -webkit-mask-image:radial-gradient(100% 130% at 50% 100%, #000 8%, transparent 72%);
  mask-image:radial-gradient(100% 130% at 50% 100%, #000 8%, transparent 72%);
}
.scan-section .wide{position:relative;z-index:1}
.scan-panel{max-width:820px;text-align:left}
.scan-panel h2{margin:0 0 20px}
.scan-panel p{margin:0 0 38px;color:var(--t-70);line-height:1.65;font-size:18px;max-width:58ch}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  .hero-cue{display:none}
}
@media (max-width:900px){
  .compare-grid{grid-template-columns:1fr}
  .compare-col--good{border-left:0;border-top:1px solid var(--fl-line)}
  .compare-col--bad::after{top:0;bottom:auto;left:12%;right:12%;width:auto;height:2px;
    background:linear-gradient(90deg,transparent,var(--pink),transparent)}
  .hero-lead__row{flex-direction:column;align-items:flex-start;gap:26px}
}
@media (max-width:720px){
  .compare-col{padding:34px 24px}
  .hero-grid--mark-only{min-height:0}
  .hero-meta{left:20px;top:26px;font-size:10px;letter-spacing:.18em}
  .hero-lead{padding:0 20px;bottom:40px}
  .flowlink-mark{font-size:clamp(46px,17vw,110px);margin-bottom:20px}
  .hero-sub{font-size:15.5px}
  .fl-intro__inner{padding:56px 0}
  .qa__toggle{padding:20px 20px;gap:14px}
  .qa__q{font-size:16.5px}
  .qa__a{padding:0 20px 22px 20px}
  .process-timeline{padding-left:34px}
  .process-step__dot{left:-28px}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .intro-splash{display:none}
  .flowlink-mark .chi{transform:none;transition:none}
  .hero-sub,.hero-lead__cta{opacity:1;transform:none;transition:none}
  .hero-lead,.hero-meta,.hero-cue{transform:none;opacity:1}
  .hero-meta__dot,.hero-cue__line::after,.sysview__live::before{animation:none}
  .process-step h3{color:#fff}
  .process-step p{color:var(--t-70)}
  .process-timeline__fill{transform:scaleY(1)}
}