/* Systaumate — maturation layer (nav, WhatsApp CTA, a11y).
   References the page's design tokens (:root vars are global). */

/* ---- Accessibility: contrast fixes ----
   --ink-3 was #8592a3 = 3.16:1 on white, below the WCAG AA 4.5:1 minimum
   for normal text. #6b7280 (the product's own muted-text token) is ~4.7:1. */
:root{--ink-3:#6b7280}
/* "Queued · gated" chip was 4.05:1 on its own tint */
.st.q{color:#5a6474}

/* ---- Accessibility: skip link ---- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--teal);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
  font-weight:640;font-size:14.5px;
}
.skip:focus{left:0}

/* ---- Accessibility: always-visible keyboard focus ---- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--teal-br);outline-offset:2px;border-radius:6px;
}

/* ---- Header CTAs: outlined secondary + filled primary, matched height ---- */
.nav-cta .login{
  display:inline-flex;align-items:center;font-size:15px;font-weight:640;
  padding:8px 18px;border-radius:12px;white-space:nowrap;
  background:#fff;color:var(--teal);border:1px solid rgba(15,171,189,.38);
  transition:transform .18s,background .2s,border-color .2s;
}
.nav-cta .login:hover{transform:translateY(-2px);background:var(--teal-soft);border-color:var(--teal-br)}
.nav-cta .btn{padding:8px 18px}

/* ---- Wordmark: raise "by Sysculus" like a superscript, tighten the gap ---- */
.brand .by{margin-left:-6px;position:relative;top:-.55em;font-size:10px}

/* ---- Section eyebrows: drop the leading dash ----
   `content:none` rather than just clearing the background: removing only the
   colour would leave the 20px bar plus the flex gap as ~29px of dead indent
   before the text. This removes the pseudo-element entirely, on every page and
   including the dark-section variants (.how / .ctaL), which only re-colour it. */
.eyebrow::before{content:none}

/* On phones the full lockup takes ~54% of a 375px viewport and crowds the
   header. Show just the gear mark + "Systaumate". */
@media(max-width:640px){
  .brand{font-size:21px;gap:8px}
  .brand svg{width:27px;height:27px}
  .brand .by{display:none}
}

/* ---- Mobile navigation (hamburger menu) ---- */
.nav-toggle{display:none;background:none;border:0;padding:9px 4px;margin-left:2px;cursor:pointer;color:var(--ink);line-height:0}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;border-radius:2px;
  transition:transform .25s var(--ease,ease),opacity .2s}
nav.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav.open .nav-toggle span:nth-child(2){opacity:0}
nav.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-cta{display:none}

@media(max-width:860px){
  /* Split header: [hamburger] [brand centred] [Log in].
     A 1fr auto 1fr grid centres the brand OPTICALLY — with space-between the
     unequal side widths (44px vs ~78px) would push it ~17px off-centre. */
  header nav{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  }
  /* flex-direction:column is essential — without it the three bars lay out
     side by side instead of stacking into a hamburger. */
  /* Tighter bar padding on phones: the default 28px left only 13px of air
     between the wordmark and the Log in button, so the centred brand read as
     crowded to one side. */
  header nav.wrap{padding-left:18px;padding-right:18px}
  .nav-toggle{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    justify-self:start;width:44px;height:44px;margin-left:-6px;padding:0;gap:5px;
  }
  .nav-toggle span{margin:0}
  /* Every header control shares a 44px box so the hamburger, wordmark and
     Log in button sit on one consistent optical line. */
  .brand{justify-self:center;min-height:44px;align-items:center}
  .nav-cta{justify-self:end;gap:0;min-height:44px;align-items:center}
  /* Button is visually 30px to match the glyph rhythm, but keeps a 44px
     touch target via an invisible overlay — so the compact look doesn't cost
     tappability (Apple HIG 44pt / Android 48dp). */
  .nav-cta .btn{
    height:30px;min-height:0;padding:0 14px;font-size:15px;white-space:nowrap;
    display:inline-flex;align-items:center;line-height:1;position:relative;border-radius:9px;
  }
  .nav-cta .btn::after{
    content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    height:44px;
  }

  /* ONE glyph size for the whole header: gear and hamburger bars are both
     30px wide, matching the button height. */
  .nav-toggle span{width:30px}
  .brand svg{width:30px;height:30px;display:block}
  /* The gear lives in an inline <span>, so it baseline-aligned and sat 4.3px
     above the centre line. Make the holder a centred flex box to kill that. */
  .brand [data-gear]{display:flex;align-items:center;justify-content:center;line-height:0}
  /* Wordmark on the same optical centre as the icons */
  .brand{font-size:21px;line-height:1}

  /* OPTICAL CENTRING.
     The left flank is a 30px hamburger glyph, the right a ~72px text button,
     so a mathematically centred brand leaves ~63px of air on the left and only
     ~23px on the right — it reads as shoved against the button. Shifting the
     brand LEFT by half that difference makes the visible air match (~43/43).
     transform is used deliberately: it moves the brand optically without
     touching layout, so it can never cause overflow. */
  .brand{transform:translateX(-20px)}

  /* secondary CTA moves into the menu so the bar can't overflow */
  .nav-cta .login{display:none}
  nav.open .navlinks{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-md);
    padding:8px 24px 20px;z-index:70;
    /* never let the panel run past the screen: cap it and scroll inside.
       dvh tracks mobile browser chrome; safe-area clears the home indicator. */
    max-height:calc(100dvh - 70px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  nav.open .navlinks a{padding:14px 2px;font-size:16px;border-bottom:1px solid var(--line-2)}
  nav.open .navlinks a:last-child{border-bottom:0}
  /* The desktop active-underline is positioned bottom:-24px, which in the
     vertical dropdown floats as a stray teal line under "Home". Hide it and
     use a left accent bar instead. */
  nav.open .navlinks a.active::after{display:none}
  nav.open .navlinks a.active{
    color:var(--teal);box-shadow:inset 3px 0 0 var(--teal-br);
    padding-left:12px;border-radius:6px;
  }
  nav.open .navlinks .menu-cta{
    display:flex;align-items:center;justify-content:center;
    margin-top:14px;padding:14px 18px;border:1px solid rgba(15,171,189,.38);border-radius:12px;
    background:#fff;color:var(--teal);font-weight:640;flex:none;
  }
}

/* ---- Phase pipeline: show the agent count on every phase ---- */
.pstep .ag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:650;color:#bfeee8;
  background:rgba(79,215,201,.14);border:1px solid rgba(79,215,201,.28);
  border-radius:6px;padding:3px 7px;margin-top:2px;align-self:flex-start;
}
.pstep .ag svg{width:12px;height:12px;color:#4fd7c9;flex:none}

/* One phase per row on phones — two-up made each card too cramped to read the
   title, the agent count and the gate together. */
@media(max-width:900px){
  .pipe{grid-template-columns:1fr}
  .pstep{min-height:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px}
  .pstep .t{flex:1}
  .pstep .g{margin-top:0}
  .pstep .ag{margin-top:0}
}

/* Very narrow phones (~320px). There isn't room here for the full optical
   nudge — at -16px the wordmark came within 1px of the hamburger. Space is so
   tight that the gaps are nearly even anyway, so barely nudge at all.
   Measured at 320: 13px left / 12px right. */
@media(max-width:340px){
  .brand{font-size:20px;gap:6px;transform:translateX(-4px)}
  .brand svg{width:26px;height:26px}
  .nav-toggle span{width:26px}
  .nav-cta .btn{padding:0 12px}
}

/* iOS Safari clips absolutely-positioned children of a backdrop-filtered
   ancestor, which cut the bottom of the open menu. Drop the blur while it's
   open (JS adds .menu-open) and use a solid background instead. */
header.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}

/* ---- Floating WhatsApp CTA (icon-only) ---- */
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;background:#25D366;color:#fff;border-radius:50%;
  box-shadow:0 8px 20px -8px rgba(37,211,102,.55);transition:transform .2s,box-shadow .25s;
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(37,211,102,.7)}
.wa-float svg{width:22px;height:22px}
@media(max-width:600px){.wa-float{right:14px;bottom:14px;width:44px;height:44px}.wa-float svg{width:21px;height:21px}}

/* Cookie-consent styles removed: the site uses only cookieless
   Cloudflare Web Analytics, so no consent banner is required. */

/* ---- Contact: direct methods (no form) ---- */
.cdirect{max-width:960px;margin:48px auto 0}
.cdirect-lead{text-align:center;color:var(--ink-2);font-size:17px;margin:0 0 30px}
.cdirect .cnext{margin-top:26px}

/* Secondary action that shouldn't compete as a button */
.textlink{
  display:inline-flex;align-items:center;gap:7px;font-weight:640;font-size:15px;
  color:var(--teal);transition:color .18s;
}
.textlink svg{width:16px;height:16px;transition:transform .18s}
.textlink:hover svg{transform:translateX(3px)}

/* ---- Shared contact-method cards (contact + pricing) ----
   3-up cards: circular icon, name, description, value. Each channel carries
   its own tint so the three are distinguishable at a glance. */
.cmethods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
@media(max-width:820px){.cmethods{grid-template-columns:1fr;max-width:460px}}
.cmethod{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:32px 24px 24px;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s;
}
.cmethod:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--teal-br)}
.cmethod .ic{width:56px;height:56px;border-radius:999px;display:grid;place-items:center;margin-bottom:8px;border:1px solid transparent}
.cmethod .ic svg{width:26px;height:26px}
.cmethod.wa .ic{background:#e7f9ee;border-color:#c4ebd4;color:#10783f}
.cmethod.call .ic{background:var(--teal-soft);border-color:#cdebef;color:var(--teal)}
.cmethod.mail .ic{background:#efebfe;border-color:#e4dbfb;color:#6a4ce0}
/* block-level so name / description / value stack instead of running inline */
.cmethod .nm{display:block;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.cmethod .ds{display:block;font-size:14.5px;color:var(--ink-3)}
.cmethod .vl{display:block;margin-top:12px;font-size:16px;font-weight:640;color:var(--teal)}
.cmethod .vl::after{content:"→";display:inline-block;margin-left:8px;transition:transform .18s}
.cmethod:hover .vl::after{transform:translateX(4px)}

/* =========================================================================
   Richer visual layer — brings this site in line with the suite brand kit.
   The base palette is tuned for dense product UI; on a marketing page that
   reads flat, so icons get gradients + coloured glows and the footer becomes
   a dark brand surface instead of grey-on-grey.
   ========================================================================= */

/* Gradient stops are measured: white glyphs clear 3:1 on the lightest stop. */
:root{
  --g-teal:linear-gradient(135deg,#0fa2b2,#0e7490);
  --g-violet:linear-gradient(135deg,#8b6cf8,#6a4ce0);
  --g-amber:linear-gradient(135deg,#bc872d,#af6203);
  --glow-teal:0 10px 24px -10px rgba(14,116,144,.55);
  --glow-violet:0 10px 24px -10px rgba(106,76,224,.5);
}

/* Icon badges: gradient + glow instead of a flat tint */
.stepc .num{background:var(--g-teal);box-shadow:var(--glow-teal)}
.ccard .ic{background:var(--g-teal);border-color:transparent;color:#fff;box-shadow:var(--glow-teal)}
.ccard:hover .ic{transform:translateY(-2px) scale(1.04)}
.ccard .ic{transition:transform .2s cubic-bezier(.2,0,0,1)}

/* Ambient wash behind the hero so it isn't flat white */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 54% at 84% 4%, rgba(15,171,189,.13), transparent 62%),
    radial-gradient(46% 48% at 8% 2%, rgba(124,92,246,.10), transparent 58%);
}

/* ---- Dark footer: mirrors the dark CTA band so the page closes strongly ---- */
footer{
  position:relative;overflow:hidden;border-top:0;
  background:linear-gradient(180deg,#141a24 0%,#0e1116 100%);
  color:#eef0f3;
}
footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:
    radial-gradient(46% 60% at 88% 0%, rgba(15,171,189,.35), transparent 62%),
    radial-gradient(40% 55% at 6% 100%, rgba(124,92,246,.22), transparent 62%);
}
footer::after{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;opacity:.7;
  background:linear-gradient(90deg,transparent,#3ad6c9,#0fabbd,transparent);
}
footer .wrap{position:relative}
footer .brand{color:#fff}
footer .brand .by{color:#c9ced6}
/* the intro + "Architected by" lines carry an inline colour, so override them */
.fgrid p{color:#d6dae1 !important}
.fgrid p a{color:#3ad6c9 !important}
.fcol h3{color:#3ad6c9}
.fcol a{color:#f2f4f7;transition:color .18s,transform .18s}
.fcol a:hover{color:#fff;transform:translateX(3px)}
.fbar{border-top-color:rgba(255,255,255,.16);color:#d6dae1}
.fbar a{color:#f2f4f7}
.fbar a:hover{color:#fff}
/* focus rings must stay visible on the dark surface */
footer :focus-visible{outline:3px solid #3ad6c9;outline-offset:2px}