/* Flowza - project layer. core.css is the chassis; every choice specific to
   this subject belongs here. Do not edit core.css.

   Brand: navy dominant, cyan for highlights and actions, cool off-white and
   neutral greys for grounds. The chassis primitives are redefined here so every
   component in core.css picks up the brand without being touched. */

:root{
  /* light grounds and text on navy */
  --bone-50:  oklch(99.4% 0.002 250);   /* cards */
  --bone-100: oklch(98.3% 0.005 250);   /* THE GROUND */
  --bone-200: oklch(96.2% 0.010 250);   /* alternating band */
  --bone-300: oklch(92.5% 0.016 250);   /* body text on navy */
  --sand-400: oklch(78.0% 0.035 250);   /* muted text on navy */
  --stone-500:oklch(68.0% 0.025 255);   /* rules only */
  --stone-600:oklch(49.0% 0.030 257);   /* secondary text on light */
  /* navy */
  --ink-700:  oklch(38.0% 0.060 262);
  --ink-800:  oklch(25.0% 0.055 262);   /* text on light */
  --ink-900:  oklch(22.5% 0.062 262);   /* raised surface on navy */
  --ink-950:  oklch(18.0% 0.058 263);   /* THE NAVY GROUND */

  --accent-h: 222;
  --accent:        oklch(60% 0.13 var(--accent-h));
  --accent-weak:   oklch(94% 0.03 var(--accent-h));
  --accent-strong: oklch(47% 0.14 248);
  --cyan:          oklch(82% 0.12 210);
  --cyan-deep:     oklch(70% 0.14 225);

  --font-display: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-text:    "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-ui:      "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 8px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px oklch(25% 0.05 262 / .05), 0 12px 32px -12px oklch(25% 0.05 262 / .14);
}
[data-tone="dark"]{
  --bg-sunken: oklch(15.5% 0.052 263);
  --accent: var(--cyan);
  --rule:      color-mix(in oklab, var(--bone-300) 14%, transparent);
  --rule-soft: color-mix(in oklab, var(--bone-300) 8%, transparent);
}
body{font-family:var(--font-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.section--alt{--bg:var(--bone-200)}

/* ------------------------------------------------------------------ type -- */
.t-hero,h1,h2,h3,.t-h3{font-variation-settings:normal;font-weight:600;text-box:none}
.t-hero,h1{line-height:1.04;letter-spacing:-0.03em}
h2{font-size:var(--step-3);line-height:1.12;letter-spacing:-0.025em;max-width:20ch}
h3,.t-h3{font-size:var(--step-1);line-height:1.25;letter-spacing:-0.018em}
.prose{font-variant-numeric:normal;hyphens:manual;line-height:1.65}
.lead{font-size:var(--step-0);line-height:1.6;letter-spacing:0}
.eyebrow{font-weight:500;letter-spacing:.14em;margin-inline-end:-.14em;color:var(--accent-strong);text-box:none}
[data-tone="dark"] .eyebrow{color:var(--cyan)}
.hl{color:var(--cyan)}

/* ------------------------------------------------------------ nav + buttons -- */
.nav__brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-ui);
  font-weight:600;font-size:1.08rem;letter-spacing:-0.02em}
.brand-mark{width:1.35rem;height:1.35rem;border-radius:6px;flex:none;
  background:linear-gradient(135deg,var(--cyan),var(--accent-strong))}
.nav.is-stuck{background:color-mix(in oklab,var(--bone-50) 82%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--rule-soft)}
.btn{border-radius:10px;font-weight:500;padding:.8em 1.35em;
  background:var(--ink-950);border-color:var(--ink-950);color:var(--bone-50)}
.btn:hover{opacity:1;background:var(--ink-700);border-color:var(--ink-700)}
[data-tone="dark"] .btn:not(.btn--ghost){background:var(--cyan);border-color:var(--cyan);color:var(--ink-950);
  box-shadow:0 8px 24px -10px oklch(82% 0.12 210 / .55)}
[data-tone="dark"] .btn:not(.btn--ghost):hover{background:oklch(88% 0.1 210);border-color:oklch(88% 0.1 210)}
.btn--ghost{background:transparent;color:currentColor;border-color:color-mix(in oklab,currentColor 30%,transparent)}
.btn--ghost:hover{background:color-mix(in oklab,currentColor 8%,transparent);color:currentColor;border-color:currentColor}
.link{color:inherit}

/* ---------------------------------------------------------------- hero -- */
.hero{min-height:auto;padding-block:clamp(8rem,16vh,11rem) var(--section-y);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 36rem at 88% -10%, oklch(62% 0.14 225 / .35), transparent 60%),
    radial-gradient(40rem 30rem at -5% 110%, oklch(55% 0.13 255 / .28), transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--rule-soft) 1px,transparent 1px),linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);
          mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%)}
.hero__grid{align-items:center;row-gap:var(--s-8)}
.hero__copy{grid-column:content-start / span 6}
.hero .t-hero{font-size:clamp(2.6rem,1.6rem + 3.4vw,4.6rem);max-width:13ch}
.hero .lead{color:var(--sand-400);max-width:34rem}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-3)}
.status-dot{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;
  margin-right:.6em;vertical-align:.1em;background:var(--cyan);box-shadow:0 0 0 4px oklch(82% 0.12 210 / .18)}
.hero .eyebrow{display:inline-flex;align-items:center;padding:.5em .95em;border-radius:999px;
  border:1px solid var(--rule);background:oklch(22.5% 0.062 262 / .6);color:var(--bone-300);letter-spacing:.1em;margin-inline-end:0}

/* ------------------------------------------------ the conversation (signature) -- */
.phone{grid-column:span 5 / content-end;margin:0;justify-self:end;width:min(100%,25rem)}
.phone__bar{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);
  border:1px solid var(--rule);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--ink-900);font-size:var(--step--1);line-height:1.3}
.phone__bar strong{font-weight:600;display:block}
.phone__sub{display:flex;align-items:center;gap:.4em;color:var(--sand-400);font-size:var(--step--2)}
.phone__sub::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--cyan)}
.phone__avatar{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan-deep),var(--accent-strong));color:var(--bone-50);font-weight:600}
.phone .chat{list-style:none;margin:0;padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);
  border:1px solid var(--rule);border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:var(--bg-sunken);font-size:var(--step--1);line-height:1.45;
  box-shadow:0 40px 80px -40px oklch(10% 0.05 263 / .8)}
.msg{max-width:85%;padding:.6em .9em;border-radius:14px}
.msg--in{align-self:flex-end;background:oklch(47% 0.13 238);color:var(--bone-50);border-bottom-right-radius:4px}
.msg--out{align-self:flex-start;background:var(--ink-900);border:1px solid var(--rule-soft);border-bottom-left-radius:4px}
.msg--note{align-self:center;max-width:none;padding:.25em .85em;border-radius:999px;
  font-family:var(--font-mono);font-size:var(--step--2);color:var(--cyan);
  background:oklch(82% 0.12 210 / .08);border:1px solid oklch(82% 0.12 210 / .22)}
.menu{display:flex;flex-direction:column;margin-top:.45em;font-family:var(--font-mono);font-size:.9em;color:var(--sand-400)}
.phone figcaption{margin-top:var(--s-4);color:var(--sand-400);text-transform:none;letter-spacing:0}

/* The page's one orchestrated moment: the conversation plays once, in order. */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .chat .msg{opacity:0;transform:translateY(6px);animation:msg-in var(--dur-2) var(--ease) forwards}
  .js-reveal .chat .msg:nth-child(1){animation-delay:.5s}
  .js-reveal .chat .msg:nth-child(2){animation-delay:1.2s}
  .js-reveal .chat .msg:nth-child(3){animation-delay:2.2s}
  .js-reveal .chat .msg:nth-child(4){animation-delay:2.8s}
  .js-reveal .chat .msg:nth-child(5){animation-delay:3.3s}
  .js-reveal .chat .msg:nth-child(6){animation-delay:4.3s}
  .js-reveal .chat .msg:nth-child(7){animation-delay:4.9s}
}
@keyframes msg-in{to{opacity:1;transform:none}}

/* --------------------------------------------------------------- steps -- */
.steps>li::before{color:var(--accent-strong);font-weight:500}
.steps h3{font-size:var(--step-1)}

/* ------------------------------------------------------------ products -- */
.products{list-style:none;padding:0;margin-top:var(--s-8);display:grid;gap:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.product{display:flex;flex-direction:column;gap:var(--s-4);padding:clamp(1.5rem,3vw,2.5rem);
  border:1px solid var(--rule-soft);border-radius:var(--radius-lg);background:var(--bone-50);box-shadow:var(--shadow-card)}
.product__tag{align-self:flex-start;font-size:var(--step--2);font-weight:500;letter-spacing:.04em;
  padding:.3em .75em;border-radius:999px;color:var(--accent-strong);background:var(--accent-weak)}
.product .ticks{list-style:none;padding:var(--s-4) 0 0;margin-top:auto;border-top:1px solid var(--rule-soft);
  display:grid;gap:var(--s-2);font-size:var(--step--1)}
.ticks li{display:flex;gap:.7em}
.ticks li::before{content:"";flex:none;width:.85em;height:.45em;margin-top:.4em;
  border-left:1.6px solid var(--cyan-deep);border-bottom:1.6px solid var(--cyan-deep);transform:rotate(-45deg)}

/* -------------------------------------------------------------- niches -- */
.niches{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.niches>div{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);
  border:1px solid var(--rule);border-radius:var(--radius-lg);background:oklch(22.5% 0.062 262 / .55)}
.niches dt{font-size:var(--step-1);font-weight:600;letter-spacing:-0.02em}
.niches dd{margin:0;font-size:var(--step--1);color:var(--sand-400)}

/* ---------------------------------------------------------------- spec + faq -- */
.spec th{color:var(--fg-muted)}
.faq summary{font-family:var(--font-ui);font-weight:500;font-size:var(--step-1);letter-spacing:-0.015em;line-height:1.35}
.faq summary::after{color:var(--accent-strong)}

/* ---------------------------------------------------------------- close -- */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(36rem 16rem at 50% 88%, oklch(62% 0.14 225 / .22), transparent 70%)}
.cta h2{max-width:18ch;margin-inline:auto;font-size:var(--step-4)}

/* --------------------------------------------------------------- footer -- */
.footer{padding-block:var(--s-7)}
.footer__row{display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:space-between;align-items:baseline;padding-top:var(--s-6)}
.footer__links{display:flex;gap:var(--s-5);list-style:none;padding:0}

@media (max-width:48rem){
  .wrap.grid{row-gap:var(--s-7)}
  .hero__copy,.phone{grid-column:content}
  .phone{justify-self:stretch;width:100%}
  .nav__cta{display:none}
  .niches{grid-template-columns:1fr}
  .hero .t-hero{font-size:2.35rem}
}

/* ======================================================= motion + visuals == */

/* --- decision demo ------------------------------------------------------- */
@media (min-width:48.01rem){
  .decide-col{position:sticky;top:calc(var(--nav-h,4.5rem) + 2rem);align-self:start}
}
.decider{margin-top:var(--s-6);padding:var(--s-5);border-radius:var(--radius-lg);
  background:var(--bone-50);border:1px solid var(--rule-soft);box-shadow:var(--shadow-card)}
.decider__label{font-size:var(--step--2);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.decider__msg{display:flex;align-items:center;min-height:2.6rem;margin-top:var(--s-2);padding:.55em .9em;
  border-radius:12px 12px 4px 12px;background:oklch(47% 0.13 238);color:var(--bone-50);
  font-size:var(--step-0);font-weight:500;width:fit-content;min-width:3rem}
.decider__caret{display:none;width:2px;height:1.1em;margin-left:2px;background:currentColor;animation:caret 1s steps(1) infinite}
.decider.is-typing .decider__caret{display:inline-block}
.decider__line{height:1.75rem;width:1px;margin:var(--s-3) 0 var(--s-3) 1.1rem;
  background:linear-gradient(var(--cyan-deep),transparent)}
.decider__rule{margin-top:var(--s-2);font-family:var(--font-mono);font-size:var(--step--1);color:var(--accent-strong)}
.decider__res{margin-top:var(--s-1);font-weight:600;font-size:var(--step-0);letter-spacing:-0.01em}
.decider.is-flash .decider__rule,.decider.is-flash .decider__res{animation:flash var(--dur-3) var(--ease)}
@keyframes flash{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes caret{50%{opacity:0}}

.steps>li{position:relative;transition:background var(--dur-2) var(--ease)}
.steps>li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--cyan-deep);
  transition:width var(--dur-3) var(--ease)}
.steps>li.is-active::after{width:100%}
.steps>li.is-active::before{color:var(--cyan-deep)}

/* --- product visuals ----------------------------------------------------- */
.viz{position:relative;height:9.5rem;margin-bottom:var(--s-2);padding:var(--s-4);border-radius:12px;overflow:hidden;
  background:linear-gradient(160deg,var(--ink-950),var(--ink-900));color:var(--bone-300);font-size:var(--step--2)}
.viz--menu{display:flex;flex-wrap:wrap;align-content:center;gap:.5rem}
.viz--menu>span{display:inline-flex;align-items:center;gap:.4em;padding:.45em .8em;border-radius:8px;white-space:nowrap;line-height:1.2;
  background:oklch(47% 0.13 238 / .35);border:1px solid oklch(82% 0.12 210 / .25)}
.viz--menu>span:not(.viz__slot)::before{content:counter(opt);counter-increment:opt;font-family:var(--font-mono);color:var(--cyan)}
.viz--menu{counter-reset:opt}
.viz--menu>.viz__slot{min-width:2.4rem;justify-content:center;background:transparent;border:1px dashed oklch(92.5% 0.016 250 / .28)}
.viz--menu>.viz__slot::after{content:"+";color:var(--sand-400)}
.funnel__col{position:absolute;top:var(--s-4);bottom:var(--s-4);width:calc((100% - 2rem - 1rem) / 3);
  display:flex;flex-direction:column;gap:.4rem;padding:.5rem;border-radius:8px;background:oklch(22.5% 0.062 262 / .7)}
.funnel__col:nth-child(1){left:1rem}
.funnel__col:nth-child(2){left:calc(1rem + (100% - 2rem - 1rem) / 3 + .5rem)}
.funnel__col:nth-child(3){left:calc(1rem + 2 * ((100% - 2rem - 1rem) / 3 + .5rem))}
.funnel__col b{font-weight:500;color:var(--sand-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.funnel__col span{height:1.3rem;border-radius:6px;background:oklch(92.5% 0.016 250 / .1)}
.funnel__mover{position:absolute;top:calc(var(--s-4) + 2.1rem);left:1.5rem;height:1.3rem;
  width:calc((100% - 2rem - 1rem) / 3 - 1rem);display:grid;place-items:center;border-radius:6px;
  background:var(--cyan);color:var(--ink-950);font-weight:600}

/* --- niches -------------------------------------------------------------- */
.niche__icon{color:var(--cyan);margin-bottom:var(--s-2)}
.niches>div{transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.niches>div:hover{border-color:oklch(82% 0.12 210 / .45);transform:translateY(-2px)}

/* --- pipeline ------------------------------------------------------------ */
ol.pipe{position:relative;list-style:none;margin-top:var(--s-4);padding:0 0 0 1.75rem;display:grid;gap:var(--s-4);
  font-size:var(--step--1)}
.pipe::before{content:"";position:absolute;left:.4rem;top:.5rem;bottom:.5rem;width:1px;background:var(--rule)}
.pipe li{position:relative;line-height:1.4}
.pipe li::before{content:"";position:absolute;left:-1.6rem;top:.3rem;width:.55rem;height:.55rem;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--accent-strong)}
.pipe li:first-child::before,.pipe li:last-child::before{background:var(--accent-strong)}
.pipe::after{content:"";position:absolute;left:calc(.4rem - 3px);top:.5rem;width:7px;height:7px;border-radius:50%;
  background:var(--cyan-deep);box-shadow:0 0 0 4px oklch(70% 0.14 225 / .2)}

/* --- typing indicator ---------------------------------------------------- */
.typing{display:inline-flex;gap:.35rem;margin-inline:auto;padding:.7rem 1rem;border-radius:16px 16px 16px 4px;
  background:var(--ink-900);border:1px solid var(--rule)}
.typing span{width:.45rem;height:.45rem;border-radius:50%;background:var(--cyan)}

@media (prefers-reduced-motion:no-preference){
  .viz--menu>span{animation:pop 6s var(--ease) infinite;animation-delay:calc(var(--k,0) * .12s)}
  .viz--menu>span:nth-child(1){--k:0}.viz--menu>span:nth-child(2){--k:1}.viz--menu>span:nth-child(3){--k:2}
  .viz--menu>span:nth-child(4){--k:3}.viz--menu>span:nth-child(5){--k:4}
  .viz--menu>.viz__slot{animation:none}
  .funnel__mover{animation:move 7s var(--ease-io) infinite}
  .pipe::after{animation:travel 4.5s var(--ease-io) infinite}
  .typing span{animation:blink 1.2s ease-in-out infinite}
  .typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
}
@keyframes pop{0%,4%{opacity:0;transform:scale(.85)}10%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes move{
  0%,18%{left:1.5rem}
  34%,52%{left:calc(1.5rem + (100% - 2rem - 1rem) / 3 + .5rem)}
  68%,90%{left:calc(1.5rem + 2 * ((100% - 2rem - 1rem) / 3 + .5rem))}
  100%{left:calc(1.5rem + 2 * ((100% - 2rem - 1rem) / 3 + .5rem));opacity:0}}
@keyframes travel{0%{top:.5rem;opacity:0}8%{opacity:1}88%{opacity:1}100%{top:calc(100% - .9rem);opacity:0}}
@keyframes blink{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}