/* =====================================================================
   INFOSSEL — CRAFT LAYER
   Loaded after main.css. This is the difference between "a template with
   the brand colours dropped in" and something a designer made.

   What it changes and why:

   1. TYPE. Sora + Inter is the default stack of every AI-generated SaaS
      page. Replaced with Bricolage Grotesque — a variable grotesque with
      real optical sizing — plus an Instrument Serif italic used only for
      emphasis inside headlines. A grotesque/serif-italic pairing is a
      deliberate editorial choice; it cannot be mistaken for a default.

   2. GRADIENT TEXT. It was on 24 headings. Gradient-on-everything is the
      single loudest tell. It now appears at most once per page; emphasis
      is carried by the serif italic instead.

   3. SURFACES. Glass was on 46 elements. Frosted panels stacked on frosted
      panels flatten a page. Most surfaces are now hairline-ruled with a
      real shadow; glass is reserved for elements that genuinely float.

   4. RHYTHM. Numbered section indices, hairline rules and mono metadata,
      so the page reads as an edited document rather than a stack of cards.
   ===================================================================== */

:root {
  --font-display:'Bricolage Grotesque','Sora',system-ui,sans-serif;
  --font-accent:'Instrument Serif',Georgia,serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;

  /* Editorial scale — more contrast between levels than the default ramp */
  --display-1:clamp(2.9rem,1.6rem + 5.4vw,6.4rem);
  --display-2:clamp(2.1rem,1.4rem + 2.9vw,3.9rem);

  --rule:1px solid var(--border);
}

/* ------------------------- HEADLINE TREATMENT ----------------------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-variation-settings:'wdth' 100,'opsz' 32;
  letter-spacing:-.035em;
  text-wrap:balance;
}
h1{font-size:var(--display-1);line-height:.96;font-weight:700}
h2{font-size:var(--display-2);line-height:1.02;font-weight:700}

/* The emphasis device. Used instead of a gradient on almost every headline:
   an optical-size-tuned serif italic, slightly larger, sitting on the same
   baseline. Reads as authored, not generated. */
.em{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.01em;
  font-size:1.06em;
  padding-right:.06em;
}
.em--red{color:var(--brand-red)}
.em--navy{color:var(--blue)}

/* Gradient text still exists — for one moment per page, not twenty-four. */
.grad-text{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* --------------------------- SECTION INDEX -------------------------- */
/* 01 / Finance software — the numbering an editor adds, and a strong
   signal that the page was laid out rather than assembled. */
.eyebrow{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.25rem;
}
.eyebrow::before{
  content:counter(section-counter,decimal-leading-zero);
  color:var(--brand-red);font-weight:600;letter-spacing:.05em;
}
body{counter-reset:section-counter}
.section,.brand-band,.page-head,.hero{counter-increment:section-counter}
.eyebrow::after{
  content:"";width:1.75rem;height:1px;background:var(--border-strong);
  align-self:center;order:-1;display:none;
}

/* ------------------------------ SURFACES ---------------------------- */
/* Hairline + shadow instead of frosted glass. Cards sit ON the page
   rather than hovering in a blur, which is what makes a dense grid read. */
.glass{
  background:var(--surface-1);
  border:var(--rule);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 1px 2px rgba(10,18,48,.04);
  transition:border-color .3s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
[data-theme="dark"] .glass,.section--ink .glass{
  background:var(--surface-1);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
.glass--interactive:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:0 18px 40px -22px rgba(10,18,48,.28);
}
[data-theme="dark"] .glass--interactive:hover,.section--ink .glass--interactive:hover{
  box-shadow:0 20px 46px -20px rgba(0,0,0,.85);
}
/* Kill the radial mouse-glow: it was the same effect on 46 elements. */
.glass--interactive::before{display:none}

/* Only genuinely floating things keep the frost. */
.float-card,.aibar__box,.chatbot,.nav.is-stuck{
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}

/* Corner marks — a small drawn detail on the cards that matter. */
.pcard--compact{position:relative}
.pcard--compact::after{
  content:"";position:absolute;top:10px;right:10px;width:9px;height:9px;
  border-top:1px solid var(--border-strong);border-right:1px solid var(--border-strong);
  opacity:0;transition:opacity .35s var(--ease),transform .35s var(--ease);
  transform:translate(-4px,4px);
}
.pcard--compact:hover::after{opacity:1;transform:none}

/* ------------------------------- HERO ------------------------------- */
/* Asymmetric, oversized, tightly led. The old version was a centred
   two-column split — the layout every generated page arrives at. */
.hero__title{
  margin:1.75rem 0 1.5rem;
  max-width:15ch;
  font-size:var(--display-1);
  line-height:.94;
}
.hero__rotator{min-width:auto}
.hero__word{
  font-family:var(--font-accent);font-style:italic;font-weight:400;
  background:none;-webkit-background-clip:initial;background-clip:initial;
  color:var(--brand-red);letter-spacing:-.01em;
}
[data-theme="dark"] .hero__word{color:#FF4455}

.lede{
  font-size:clamp(1rem,.96rem + .3vw,1.18rem);
  line-height:1.6;max-width:54ch;color:var(--text-2);
}

/* -------------------------- MOTION PRIMITIVES ----------------------- */
/* One idea, executed properly: content rises into place on a single
   easing curve, staggered by position. Not six different effects. */
.rise{opacity:0;transform:translate3d(0,18px,0)}
.rise.is-in{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);
}

/* Headline reveal: words clip up from a mask. */
.split-line{display:block;overflow:hidden}
.split-word{
  display:inline-block;
  transform:translate3d(0,105%,0);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}
.is-revealed .split-word{transform:none}

/* Hairline rules that draw themselves in */
.rule-draw{transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.rule-draw.is-in{transform:scaleX(1)}

/* Buttons lean toward the cursor. Subtle — 4px maximum. */
.btn{will-change:transform}
.btn--primary{box-shadow:0 8px 20px -10px rgba(212,0,1,.55)}
.btn--primary:hover{box-shadow:0 14px 32px -12px rgba(212,0,1,.7)}

/* ---------------------------- BAND HEADERS -------------------------- */
.brand-band__head{border-bottom:var(--rule);align-items:end}
.brand-band__num{
  font-family:var(--font-mono);font-weight:500;letter-spacing:-.04em;
  background:none;color:var(--text);-webkit-text-fill-color:currentColor;
}
.brand-band__num::after{content:"";display:none}

.cat-group__title{font-weight:500}

/* ------------------------------- TABLES ----------------------------- */
.pdp-facts dl>div{border-bottom:var(--rule)}

/* --------------------------- REDUCED MOTION ------------------------- */
@media (prefers-reduced-motion:reduce){
  .rise,.split-word,.rule-draw{opacity:1!important;transform:none!important;transition:none!important}
}

/* ------------------------------- PRINT ------------------------------ */
@media print{
  .em{font-style:italic;color:#000}
  .eyebrow::before{content:none}
}

/* ------------------------- NAV CONTACT BLOCK ------------------------ */
/* The phone number is the primary conversion on a finance software site.
   An icon alone hides it; the number is written out wherever there is room. */
.nav-phone{
  display:none;align-items:center;gap:.6rem;padding:.4rem .85rem .4rem .5rem;
  border-radius:999px;border:var(--rule);background:var(--surface-1);
  transition:.25s var(--ease);white-space:nowrap;
}
@media (min-width:1024px){.nav-phone{display:inline-flex}}
.nav-phone:hover{border-color:var(--brand-red);transform:translateY(-1px)}
.nav-phone__icon{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--grad-brand);color:#fff;font-size:.82rem;
}
.nav-phone__text{display:grid;line-height:1.15}
.nav-phone__label{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
}
.nav-phone__num{font-family:var(--font-mono);font-size:.86rem;font-weight:500;color:var(--text)}

/* Below 1024px the number moves to the mobile bar, which is already
   thumb-reachable — a nav that wraps onto two lines is worse than an icon. */

/* =====================================================================
   NAVIGATION — mega menu
   Sized so the row can never overflow: the logo and actions are fixed,
   the link list is the only flexible element and it is allowed to shrink.
   ===================================================================== */
.nav__inner{display:flex;align-items:center;gap:1rem;min-width:0}
.brand{flex:0 0 auto}
.nav__primary{flex:1 1 auto;min-width:0;display:none}
@media (min-width:1080px){.nav__primary{display:block}}
.nav__actions{flex:0 0 auto;margin-left:auto;gap:.5rem}

.nav__menu{
  display:flex;align-items:center;gap:.15rem;list-style:none;
  padding:0;margin:0;justify-content:center;
}
.nav__item{position:static}
.nav__link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.55rem .8rem;border-radius:var(--r-sm);
  font-size:.92rem;font-weight:500;color:var(--text-2);
  background:none;border:0;cursor:pointer;white-space:nowrap;
  transition:color .2s,background .2s;
}
.nav__link:hover,.nav__link[aria-expanded="true"],.nav__link[aria-current="page"]{
  color:var(--text);background:var(--hover-tint);
}
.nav__link i{font-size:.68rem;opacity:.55;transition:transform .3s var(--ease)}
.nav__link[aria-expanded="true"] i{transform:rotate(180deg)}

/* ------------------------------ MEGA PANEL -------------------------- */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface-1);border-top:var(--rule);
  border-bottom:1px solid var(--border);
  box-shadow:0 24px 48px -28px rgba(10,18,48,.3);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.mega[hidden]{display:none}
.mega.is-open{opacity:1;transform:none;pointer-events:auto}

.mega__inner{
  width:min(1360px,100% - var(--gutter)*2);margin-inline:auto;
  display:grid;gap:2.5rem;padding:2.25rem 0 2.5rem;
}
@media (min-width:900px){.mega__inner{grid-template-columns:1fr auto}}

.mega__cols{display:grid;gap:2.5rem}
@media (min-width:700px){.mega__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

.mega__heading{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
  padding-bottom:.7rem;margin-bottom:.9rem;border-bottom:var(--rule);
}
.mega__col ul{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.mega__col a{
  display:block;padding:.55rem .7rem;border-radius:var(--r-sm);
  transition:background .2s var(--ease);
}
.mega__col a:hover{background:var(--hover-tint)}
.mega__label{display:block;font-size:.92rem;font-weight:500;color:var(--text);line-height:1.35}
.mega__desc{display:block;font-size:.79rem;color:var(--muted);margin-top:.1rem;line-height:1.4}

.mega__feature{
  display:flex;flex-direction:column;gap:.4rem;justify-content:center;
  padding:1.5rem;border-radius:var(--r-md);min-width:min(280px,100%);
  background:var(--surface-2);border:var(--rule);transition:.25s var(--ease);
}
.mega__feature:hover{border-color:var(--brand-red);transform:translateY(-2px)}
.mega__feature-title{font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.25}
.mega__feature-desc{font-size:.84rem;color:var(--text-2);line-height:1.5}
.mega__feature-go{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-red);margin-top:.4rem;
  display:flex;align-items:center;gap:.35rem;
}

/* Actions must never be pushed off screen */
.nav__cta{flex-shrink:0}
@media (max-width:1079px){.nav-phone{display:none}}
@media (max-width:600px){.nav__cta{display:none}}

/* ---------------------------- MOBILE DRAWER ------------------------- */
.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 0;z-index:990;background:var(--bg);
  padding:1.5rem var(--gutter) 4rem;overflow-y:auto;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:.3s var(--ease);
}
.mobile-menu.is-open{transform:none;opacity:1;pointer-events:auto}
.mobile-menu__group{padding-bottom:1.5rem;margin-bottom:1.5rem;border-bottom:var(--rule)}
.mobile-menu__top{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:1.3rem;margin-bottom:.75rem;color:var(--text);
}
.mobile-menu__heading{
  display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin:1rem 0 .5rem;
}
.mobile-menu ul{list-style:none;padding:0;margin:0;display:grid;gap:.1rem}
.mobile-menu ul a{display:block;padding:.55rem 0;font-size:.95rem;color:var(--text-2)}
.mobile-menu ul a:hover{color:var(--brand-red)}
.mobile-menu__cta{display:grid;gap:.6rem;margin-top:2rem}

/* ---------------------- HERO SCALE CORRECTION ----------------------- */
/* 6.4rem with a 15ch measure pushed the headline over a full viewport and
   left the supporting copy below the fold. Reduced, and the measure widened
   so it breaks into three lines rather than six. */
:root{--display-1:clamp(2.5rem,1.5rem + 3.4vw,4.3rem)}
.hero__title{max-width:19ch;line-height:1.0}
.hero{padding-top:calc(var(--nav-h) + clamp(2rem,4vw,3.5rem))}
.hero__stage{min-height:clamp(320px,40vw,440px)}

/* Phone number in the chat header — the visitor should never have to hunt
   for a way to reach a person while talking to a bot. */
.chatbot__phone{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--font-mono);font-size:.76rem;color:var(--brand-red);
  margin-top:.1rem;
}
.chatbot__phone:hover{text-decoration:underline}