/* ============================================================================
   BUILDERPRO OS MARKETING SITE — STYLESHEET
   A mosaic of rounded cards on a cool grey canvas, 6px apart, edge to edge.
   No centred container, no section margin. Structure of this file:
     1.  Font
     2.  Tokens
     3.  Fluid root font-size  <- why everything scales with the viewport
     4.  Reset (scoped to the marketing markup; the portal keeps its own)
     5.  Typography scale
     6.  Layout primitives: .section, .card, the gutter rule
     7.  Components: pill, buttons, navbar, menu, drawer, preloader
     8.  Sections: hero, logos, trades, how it works, lisa, estimator, models,
         pricing, timeline, faq, footer
     9.  Responsive
     10. Reduced motion
   ========================================================================= */

/* 1. FONT ------------------------------------------------------------------ */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');


/* 2. TOKENS ---------------------------------------------------------------- */
:root{
  --gray-100:#edf2f6;   /* the page canvas, the same grey the hero clips sit on. Never white. */
  --gray-200:#dce3ec;   /* soft fills + hover states */
  --gray-300:#bac0ca;   /* "not yet read" text in the scroll-highlight effect */
  --gray-500:#788493;   /* the slate stat card */
  --dark:#001530;       /* ALL text + primary button + menu button */
  --blue-500:#006fff;   /* THE accent. One phrase per headline, footer, pills */
  --blue-700:#003db8;
  --blue-100:#b4d2f9;   /* progress-bar fill only */
  --white:#fff;

  --stroke-dark:rgba(0,0,0,.10);
  --stroke-light:rgba(255,255,255,.15);
  --overlay:rgba(0,0,0,.70);

  --gutter:.375rem;      /* 6px. The page edge padding AND the gap between every card. */
  --radius:1rem;
  --pad:2rem;

  --h-l:5.125rem;  --h-l-lh:.90;  --h-l-ls:-.03em;
  --h-m:3.5rem;    --h-m-lh:.94;  --h-m-ls:-.03em;
  --h-s:2.5rem;    --h-s-lh:1;    --h-s-ls:-.03em;
  --t-l:1.75rem;   --t-l-lh:1.12; --t-l-ls:-.02em;
  --t-m:1.5rem;    --t-m-lh:1.16; --t-m-ls:-.02em;
  --t-s:1.25rem;   --t-s-lh:1.20; --t-s-ls:-.02em;
  --b-l:1.125rem;  --b-lh:1.40;
  --b-m:1rem;
  --b-s:.875rem;
  --caption:.75rem;

  --ease-pill:cubic-bezier(.215,.61,.355,1);
  --ease-settle:cubic-bezier(.39,.575,.565,1);
  --site-font:'General Sans','Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

/* 3. FLUID ROOT FONT-SIZE ---------------------------------------------------
   Every size below is in rem, and the root grows with the viewport, so the
   whole design scales: a 5.125rem headline is genuinely huge on a 2560px
   monitor and sane on a laptop. The portal is set in px and is unaffected. */
html{font-size:calc(.625rem + .41666667vw);}
@media (max-width:1920px){html{font-size:calc(.7rem + .41666667vw);}}
@media (max-width:1440px){html{font-size:calc(.8127rem + .2081vw);}}
@media (max-width:479px) {html{font-size:1rem;}}
@media (max-width:340px) {html{font-size:calc(.7493rem + 1.18vw);}}


/* 4. RESET ----------------------------------------------------------------- */
body.dl{
  background:var(--gray-100);
  color:var(--dark);
  font-family:var(--site-font);
  font-size:var(--b-m);
  line-height:var(--b-lh);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.dl.is-locked{overflow:hidden;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-stopped{overflow:hidden;}
/* the portal, the legal overlays and the chat keep the product typeface */
#bpx,.legal-page,.atlas-inline,.modal{font-family:var(--sans);}
body.dl ::selection{background:var(--blue-500);color:#fff;}
main.dl-page img,main.dl-page svg,main.dl-page video{display:block;max-width:100%;}
main.dl-page ul,.menu ul{margin:0;padding:0;list-style:none;}
main.dl-page h1,main.dl-page h2,main.dl-page h3,main.dl-page h4{margin:0;font-weight:600;}
main.dl-page p{margin:0;}
/* Not `button{all:unset}`: that resets box-sizing and the accordion rows overflow. */
:where(main.dl-page,.navbar,.menu,.drawer) button{appearance:none;-webkit-appearance:none;background:none;border:0;
  padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;}


/* 5. TYPOGRAPHY -------------------------------------------------------------
   Headline rule: sentence case, ends in a period, and exactly ONE phrase is
   .accent.                                                                 */
.h-l{font-size:var(--h-l);line-height:var(--h-l-lh);letter-spacing:var(--h-l-ls);font-weight:600;}
.h-m{font-size:var(--h-m);line-height:var(--h-m-lh);letter-spacing:var(--h-m-ls);font-weight:600;}
.h-s{font-size:var(--h-s);line-height:var(--h-s-lh);letter-spacing:var(--h-s-ls);font-weight:600;}
.t-l{font-size:var(--t-l);line-height:var(--t-l-lh);letter-spacing:var(--t-l-ls);font-weight:500;}
.t-m{font-size:var(--t-m);line-height:var(--t-m-lh);letter-spacing:var(--t-m-ls);font-weight:500;}
.t-s{font-size:var(--t-s);line-height:var(--t-s-lh);letter-spacing:var(--t-s-ls);font-weight:500;}
.b-l{font-size:var(--b-l);line-height:var(--b-lh);font-weight:400;}
.b-m{font-size:var(--b-m);line-height:var(--b-lh);font-weight:400;}
.b-s{font-size:var(--b-s);line-height:var(--b-lh);font-weight:400;}
.caption{font-size:var(--caption);line-height:.89;font-weight:600;text-transform:uppercase;}
.accent{color:var(--blue-500);}
.on-blue,.on-blue *{color:var(--white);}
.muted{color:var(--gray-500);}

/* SplitText needs this or descenders (g, y, p) get clipped by the line mask */
.line{padding-bottom:.85rem;margin-bottom:-.85rem;}


/* 6. LAYOUT PRIMITIVES ------------------------------------------------------
   THE RULE: no margins, no centred container. Every section is padded by
   --gutter left/right/bottom, and every card is --gutter from its neighbour. */
.section{padding-left:var(--gutter);padding-right:var(--gutter);padding-bottom:var(--gutter);}
.stack{display:flex;flex-direction:column;gap:var(--gutter);}
.row{display:flex;gap:var(--gutter);}

.card{border-radius:var(--radius);padding:var(--pad);background:var(--white);}
.card.is-outline{background:transparent;border:1px solid var(--stroke-dark);}
.card.is-blue{background:var(--blue-500);color:var(--white);}
.card.is-slate{background:var(--gray-500);color:var(--white);}
.card.is-flush{padding:0;}
.card.is-glass{background:rgba(255,255,255,.72);backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);}

/* cards are flat; only the cards floating over the hero get a shadow */
.shadow-float{box-shadow:0 0 5px rgba(0,0,0,.10);}

/* grid-paper corners, in pure CSS */
.is-grid-texture{position:relative;overflow:hidden;}
.is-grid-texture::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(0,21,48,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,21,48,.06) 1px, transparent 1px);
  background-size:2.25rem 2.25rem;
  -webkit-mask-image:
    radial-gradient(circle at 0 0,     #000 0, transparent 11rem),
    radial-gradient(circle at 100% 0,  #000 0, transparent 11rem),
    radial-gradient(circle at 0 100%,  #000 0, transparent 11rem),
    radial-gradient(circle at 100% 100%,#000 0, transparent 11rem);
          mask-image:
    radial-gradient(circle at 0 0,     #000 0, transparent 11rem),
    radial-gradient(circle at 100% 0,  #000 0, transparent 11rem),
    radial-gradient(circle at 0 100%,  #000 0, transparent 11rem),
    radial-gradient(circle at 100% 100%,#000 0, transparent 11rem);
}
.is-grid-texture>*{position:relative;}

/* the head card that opens most sections: pill, then a big heading well below it */
.sec-head-card .h-m{max-width:44rem;margin-top:5.375rem;}


/* 7. COMPONENTS ------------------------------------------------------------ */

/* 7.1 SECTION PILL — blue rounded square with a white dash, then a label.
   Both grow from width 0 when .is-split-active lands on the parent, which
   the JS adds right after the heading reveal fires.                        */
.pill{display:flex;align-items:center;gap:.75rem;height:2rem;padding-left:2.75rem;position:relative;}
.pill_icon{
  position:absolute;left:0;overflow:hidden;
  width:0;height:2rem;
  background:var(--blue-500);border-radius:.53125rem;
  display:flex;align-items:center;
  transition:width .5s var(--ease-pill);
  transition-delay:.4s;
}
.pill_dash{
  position:absolute;left:.5rem;
  width:0;height:.375rem;
  background:var(--white);
  transition:width .5s var(--ease-pill);
  transition-delay:.8s;
}
.is-split-active .pill_icon{width:2rem;}
.is-split-active .pill_dash{width:1rem;}
.is-blue .pill_icon{background:var(--white);}
.is-blue .pill_dash{background:var(--blue-500);}

/* 7.2 BUTTONS — one shape: a fully rounded uppercase pill. */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:.625rem;
  background:var(--dark);color:var(--white);border:1px solid var(--dark);
  border-radius:2.5rem;padding:.875rem 1.375rem;
  font-family:var(--site-font);font-size:.75rem;font-weight:600;line-height:.89;text-transform:uppercase;letter-spacing:0;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease;
}
.btn:hover{background:var(--blue-500);border-color:var(--stroke-light);color:var(--white);}
.btn.is-ghost{background:var(--white);color:var(--dark);border-color:var(--white);}
.btn.is-ghost:hover{background:var(--blue-500);border-color:var(--blue-500);color:var(--white);}
.btn.is-on-blue{background:var(--white);color:var(--dark);border-color:var(--white);}
.btn.is-on-blue:hover{background:var(--dark);color:var(--white);border-color:var(--dark);}
.btn.is-outline{background:transparent;color:var(--dark);border-color:var(--stroke-dark);}
.btn.is-outline:hover{background:var(--dark);color:var(--white);border-color:var(--dark);}
.btn.is-blue{background:var(--blue-500);border-color:var(--blue-500);}
.btn.is-blue:hover{background:var(--dark);border-color:var(--dark);}
.btn:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;}

.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:100%;
  background:var(--dark);color:var(--white);border:1px solid var(--dark);
  transition:all .2s ease;
}
.icon-btn:hover{background:var(--blue-500);border-color:var(--stroke-light);}
.icon-btn.is-outline{background:transparent;color:var(--dark);border-color:var(--stroke-dark);}
.icon-btn.is-outline:hover{background:var(--gray-200);border-color:var(--gray-200);}

/* 7.3 NAVBAR — fixed, no bar, sits 6px inside the viewport. */
.navbar{
  position:fixed;top:var(--gutter);left:0;right:0;z-index:110;
  padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;
}
.navbar > *{pointer-events:auto;}
/* The logo is fixed and uses mix-blend-mode so one white mark stays legible
   over white cards, blue cards and the hero alike. */
.navbar_logo{
  position:fixed;top:1.625rem;left:2.375rem;z-index:111;
  height:1.75rem;color:var(--dark);
  display:flex;align-items:center;gap:.625rem;text-decoration:none;
  font-family:var(--site-font);font-weight:700;font-size:1.375rem;letter-spacing:-.03em;line-height:1;
  transition:color .2s;
}
.navbar_logo img{width:1.75rem;height:1.75rem;flex:none;display:block;}
.navbar_logo b{color:var(--blue-500);font-weight:700;transition:color .2s;}
.navbar_logo.is-white,.navbar_logo.is-white b{color:var(--white);}
.navbar_ctas{display:flex;align-items:center;gap:1rem;margin-left:auto;padding:1rem 1rem 0 0;}
.navbar_burger{display:flex;flex-direction:column;gap:4px;align-items:center;}
.navbar_burger span{display:block;width:1.25rem;height:1px;background:currentColor;}

/* 7.4 SLIDE-OUT MENU — a column of blue cards, not a dropdown. */
.menu{
  position:fixed;top:0;right:0;bottom:0;z-index:120;
  width:33.75rem;max-width:100%;
  padding:var(--gutter);
  display:flex;flex-direction:column;gap:var(--gutter);
  visibility:hidden;                 /* off-screen position is set by GSAP */
}
.menu.is-open{visibility:visible;}
.menu_top{
  background:var(--blue-500);border-radius:var(--radius);height:4.5rem;flex:none;
  display:flex;align-items:center;justify-content:space-between;padding:0 1rem 0 1.25rem;
  color:var(--white);font-weight:700;font-size:1.25rem;letter-spacing:-.03em;
}
.menu_body{
  background:var(--blue-500);border-radius:var(--radius);flex:1;
  padding:1.5rem;display:flex;flex-direction:column;color:var(--white);overflow-y:auto;
}
.menu_link{display:block;width:100%;color:var(--white);font-size:2.5rem;font-weight:600;line-height:1;padding:.5rem 0;text-decoration:none;transition:opacity .2s;}
.menu_link:hover{opacity:.7;}
.menu_bottom{margin-top:auto;}
.menu_bottom p{margin:0 0 .25rem;opacity:.8;}
.menu_bottom a{color:var(--white);text-decoration:none;}
.menu_socials{display:flex;gap:1.625rem;align-items:flex-end;border-top:1px solid rgba(255,255,255,.2);margin-top:1.5rem;padding-top:1.5rem;}
.menu_socials a{color:var(--white);text-decoration:none;font-size:var(--b-s);font-weight:500;transition:opacity .2s;}
.menu_socials a:hover{opacity:.75;}
.menu_close{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border-radius:100%;color:var(--white);transition:transform .2s,background-color .2s;}
.menu_close:hover{transform:rotate(45deg);background:rgba(255,255,255,.15);}

/* the overlay behind menu and drawer — always .7 black + 5px blur */
.overlay{
  position:fixed;inset:0;z-index:100;
  background:var(--overlay);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.overlay.is-open{opacity:1;pointer-events:auto;}

/* 7.5 CONTACT DRAWER — slides from the right, opened by every "Get started". */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:130;
  width:34rem;max-width:100%;background:var(--white);color:var(--dark);
  padding:2.5rem;overflow-y:auto;
  visibility:hidden;                 /* off-screen position set by GSAP */
}
.drawer.is-open{visibility:visible;}
.drawer_head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;}
.drawer_field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem;}
.drawer_field input,.drawer_field textarea{
  font:inherit;font-size:var(--b-m);color:var(--dark);
  border:1px solid var(--stroke-dark);border-radius:.5rem;
  padding:.875rem 1rem;background:var(--white);width:100%;
  transition:border-color .2s;
}
.drawer_field input::placeholder,.drawer_field textarea::placeholder{color:var(--gray-300);}
.drawer_field input:focus,.drawer_field textarea:focus{outline:none;border-color:var(--blue-500);}
.drawer_field input.is-bad,.drawer_field textarea.is-bad{border-color:#d0433a;}
.drawer_two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.drawer_call{
  display:flex;align-items:center;gap:1rem;color:var(--dark);text-decoration:none;
  border:1px solid var(--stroke-dark);border-radius:.75rem;padding:.75rem 1.25rem .75rem .75rem;
  margin-bottom:1.5rem;transition:background-color .2s,border-color .2s;
}
.drawer_call:hover{background:var(--gray-100);}
.drawer_msg{margin-top:.75rem;font-size:var(--b-s);color:var(--gray-500);min-height:1.2em;}

/* 7.6 PRELOADER — a blue sheet with the name, lifts away once. */
.dl-pre{position:fixed;inset:0;z-index:1000;background:var(--blue-500);display:flex;align-items:flex-end;justify-content:flex-start;padding:0 2.5vw 1.5vw;overflow:hidden;transition:transform 1s cubic-bezier(.16,1,.3,1);}
.dl-pre b{font-family:var(--site-font);font-size:clamp(64px,19vw,300px);font-weight:600;letter-spacing:-.05em;line-height:.86;color:#fff;transform:translateY(20%);opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .6s;}
.dl-pre.in b{transform:none;opacity:1;}
.dl-pre.out{transform:translateY(-101%);}
.dl-pre.gone{display:none;}

.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--dark);color:#fff;padding:10px 14px;border-radius:8px;}
.skip:focus{left:8px;}


/* 8. SECTIONS -------------------------------------------------------------- */

/* 8.1 HERO ------------------------------------------------------------------
   Two layers pinned in one sticky stage, plus invisible trigger blocks below
   that drive the scroll story.                                             */
.hero{position:relative;}
.hero_stage{position:sticky;top:0;height:100vh;padding:var(--gutter);display:flex;gap:var(--gutter);}
.hero_left{display:flex;flex-direction:column;gap:var(--gutter);width:42%;max-width:37.5rem;}
.hero_left-top{background:var(--white);border-radius:var(--radius);height:4.5rem;flex:none;}
.hero_left-mid{background:var(--white);border-radius:var(--radius);flex:1;padding:2rem 2rem 4rem;display:flex;align-items:flex-start;}
.hero_left-bot{
  background:var(--white);border-radius:var(--radius);
  flex:1;max-height:16.875rem;padding:1.875rem 2rem 2rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:3rem;
}
.hero_right{flex:1;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--gray-100);}
.hero_right canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* the clips are 16:9 in a taller card: fit them and scale up a little, so the
   cube sits back in the frame instead of filling it. The card is painted the
   clip's own background so the letterbox is invisible. */
.hero_right.has-video{background:var(--gray-100);}
.hero_video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scale(1.32);pointer-events:none;z-index:2;opacity:0;transition:opacity .6s;}
.hero_video.is-on{opacity:1;}
/* the scroll-story clip covers the whole stage, above the dark wash: the wash
   dims the resting hero, the story stays bright */
.hero_scrub{position:absolute;inset:var(--gutter);width:calc(100% - var(--gutter)*2);height:calc(100% - var(--gutter)*2);border-radius:var(--radius);object-fit:cover;pointer-events:none;z-index:13;opacity:0;will-change:opacity;}
.hero_right.has-video canvas,.hero_right.has-video .hero_fallback{display:none;}
.hero_fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center;}
.hero_right.nogl .hero_fallback{display:flex;}
.hero_fallback i{width:34%;aspect-ratio:1;border-radius:12%;background:var(--blue-500);transform:rotate(12deg);}

/* the dark wash that comes over the whole stage as the story begins */
.hero_dark{position:absolute;inset:0;z-index:12;opacity:0;pointer-events:none;
  background:var(--overlay);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}

/* the floating glass cards that carry the story copy */
.hero_story{position:absolute;left:calc(var(--gutter)*2);bottom:calc(var(--gutter)*2);z-index:20;
  width:30.25rem;display:flex;flex-direction:column;gap:var(--gutter);opacity:0;}
.hero_story-top{
  position:relative;height:6rem;border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.72);backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);
  box-shadow:0 0 5px rgba(0,0,0,.10);
}
.hero_story-bot{
  position:relative;height:8.75rem;border-radius:var(--radius);overflow:hidden;padding:1.75rem;
  background:rgba(255,255,255,.72);backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);
  box-shadow:0 0 5px rgba(0,0,0,.10);
}
.hero_counter{position:absolute;top:1.5rem;left:1.25rem;z-index:2;
  width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;
  font-size:.875rem;font-weight:600;line-height:.9;}
.hero_counter svg{position:absolute;inset:0;width:100%;height:100%;}
.hero_counter circle{fill:none;stroke-width:1.5;}
.hero_counter .ring-bg{stroke:rgba(0,21,48,.15);}
.hero_counter .ring-fg{stroke:var(--blue-500);transform:rotate(-90deg);transform-origin:50% 50%;}
.hero_step-title{position:absolute;inset:0 2rem 0 5.5rem;display:flex;align-items:center;
  font-size:2rem;line-height:1;letter-spacing:-.06rem;font-weight:600;
  opacity:0;transform:translateY(-2rem);transition:transform .4s,opacity .3s;}
.hero_step-body{position:absolute;inset:1.75rem;
  opacity:0;transform:translateY(-2rem);transition:transform .4s,opacity .3s;}
.hero_step-title.is-active,.hero_step-body.is-active{opacity:1;transform:translateY(0);}
.hero_triggers{position:relative;z-index:-1;opacity:0;pointer-events:none;}
.hero_trigger{height:150vh;}
.hero_trigger.is-2,.hero_trigger.is-3{height:110vh;}

/* 8.2 LOGO MARQUEE ---------------------------------------------------------- */
.marquee{overflow:hidden;}
.marquee_track{display:flex;gap:var(--gutter);width:max-content;animation:marquee 45s linear infinite;}
.marquee_track.is-reverse{animation-direction:reverse;}
.marquee:hover .marquee_track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(calc(-50% - var(--gutter)/2));}}
.logo-tile{
  flex:none;width:21rem;height:6.25rem;          /* 3.36:1 */
  border:1px solid var(--stroke-dark);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:var(--dark);
}
.logo-tile img{height:2rem;width:auto;max-width:8.75rem;object-fit:contain;filter:grayscale(1) brightness(.2);opacity:.75;transition:filter .3s,opacity .3s;}
.logo-tile:hover img{filter:none;opacity:1;}

/* 8.3 TRADES (case-study layout) --------------------------------------------
   Left 55% is a media mosaic that cross-fades; right 45% is an accordion.  */
.cs_body{position:relative;min-height:37.5rem;}
.cs_media{position:absolute;left:0;top:0;bottom:0;width:55%;padding-right:.5rem;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);}
.cs_photo-wrap{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--gray-200);}
.cs_photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s;}
.cs_photo.is-active{opacity:1;}
.cs_stats{position:relative;}
.cs_stat{
  position:absolute;left:0;right:0;border-radius:var(--radius);padding:2rem;
  display:flex;flex-direction:column;gap:.375rem;color:var(--white);
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.cs_stat.is-active{opacity:1;pointer-events:auto;}
.cs_stat.is-top{top:0;bottom:calc(50% + var(--gutter)/2);background:var(--blue-500);}
.cs_stat.is-bot{top:calc(50% + var(--gutter)/2);bottom:0;background:var(--gray-500);}
.cs_stat .b-s{max-width:20ch;opacity:.9;}
.cs_chart{display:flex;align-items:flex-end;gap:1.25rem;height:6.75rem;margin-top:auto;margin-left:auto;width:100%;justify-content:flex-end;}
.cs_chart span{width:11px;background:rgba(255,255,255,.25);border-radius:1rem;height:0;transition:height 1.2s ease-out;}
.cs_list{margin-left:55%;display:flex;flex-direction:column;gap:var(--gutter);}
.cs_item{background:var(--white);border-radius:var(--radius);}
.cs_item-head{display:flex;align-items:center;justify-content:space-between;width:100%;padding:2rem;cursor:pointer;}
.cs_item-head .icon-btn{width:2.25rem;height:2.25rem;transition:transform .4s ease,background-color .2s;}
.cs_item.is-active .cs_item-head .icon-btn{transform:rotate(45deg);}
.cs_item-body{height:0;overflow:hidden;}
.cs_item-inner{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:0 2rem 2rem;}
.cs_item-inner .t-m{max-width:30ch;}

/* 8.4 HOW IT WORKS (solutions layout) ---------------------------------------
   Left 60% is a sticky visual; right 40% scrolls past it in 100vh blocks.  */
.sol_body{display:flex;gap:var(--gutter);align-items:flex-start;}
.sol_sticky{position:sticky;top:var(--gutter);width:60%;height:calc(100vh - var(--gutter)*2);}
.sol_visual{
  position:relative;width:100%;height:100%;padding:4rem;
  border:1px solid var(--stroke-dark);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
}
.sol_img{position:absolute;inset:4rem;width:calc(100% - 8rem);height:calc(100% - 8rem);
  opacity:0;transform:scale(.98);transition:transform .4s var(--ease-settle),opacity .2s;}
.sol_img.is-active{opacity:1;transform:scale(1);}
.sol_shot{object-fit:contain;object-position:center;border-radius:.75rem;}
.sol_scroll{flex:1;display:flex;flex-direction:column;}
.sol_block{height:100vh;display:flex;flex-direction:column;gap:var(--gutter);padding-bottom:var(--gutter);}
.sol_block-top{
  flex:1;border:1px solid var(--stroke-dark);border-radius:var(--radius);
  padding:2rem 6rem 2rem 2rem;display:flex;flex-direction:column;justify-content:space-between;
}
.sol_block-bot{
  flex:1;border:1px solid var(--stroke-dark);border-radius:var(--radius);
  padding:2rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:1.5rem;
}
.sol_chip{width:2rem;height:2rem;border:1px solid var(--stroke-dark);border-radius:.5rem;display:flex;align-items:center;justify-content:center;flex:none;}
.sol_block-bot .b-m{max-width:44ch;}

/* 8.5 LISA ------------------------------------------------------------------ */
.lisa{display:flex;gap:var(--gutter);align-items:stretch;}
.lisa_text{width:42%;flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:4rem;}
.lisa_text .b-m{max-width:44ch;color:var(--gray-500);margin-top:1rem;}
.lisa_stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:30rem;padding:2rem 1.5rem;}
body.dl .atlas-stage{width:100%;}
body.dl .blob-hint{color:var(--gray-500);font-family:var(--site-font);}
body.dl .blob-cta{color:var(--blue-500);font-weight:600;}
body.dl .atlas-inline{border-radius:var(--radius);box-shadow:none;border:1px solid var(--stroke-dark);}
body.dl .ai-ask-call,body.dl .ai-ask-text{border-radius:2.5rem;font:600 .75rem/.89 var(--site-font);letter-spacing:0;text-transform:uppercase;padding:.9375rem 1rem;box-shadow:none;}
body.dl .ai-ask-call{background:var(--dark);}
body.dl .ai-ask-call:hover{background:var(--blue-500);}
body.dl .ai-ask-text{color:var(--dark);border-color:var(--stroke-dark);}
body.dl .ai-ask-item{border-radius:.75rem .75rem .75rem .25rem;}

/* 8.6 ESTIMATOR + MODEL SITES (kept components, restyled as cards) ---------- */
body.dl .sec-head{max-width:none;margin:0;}
body.dl .sec-head.center{text-align:left;}
body.dl .sec-head .eye{display:none;}
body.dl .sec-head h2{font:600 var(--h-m)/var(--h-m-lh) var(--site-font);letter-spacing:var(--h-m-ls);color:var(--dark);margin:5.375rem 0 0;max-width:44rem;}
body.dl .sec-head h2 em{font-style:normal;color:var(--blue-500);}
body.dl .sec-head p{color:var(--gray-500);font-size:var(--b-m);max-width:54ch;margin:1.25rem 0 0;line-height:var(--b-lh);}
body.dl #estimator,body.dl #models{padding:0 var(--gutter) var(--gutter);}
body.dl #estimator>.wrap,body.dl #models>.wrap{max-width:none;padding:0;display:flex;flex-direction:column;gap:var(--gutter);}
body.dl #estimator .sec-head,body.dl #models .sec-head{background:var(--white);border-radius:var(--radius);padding:var(--pad);margin:0!important;}
body.dl #estimator .sec-head h2,body.dl #models .sec-head h2{margin-top:5.375rem;}
body.dl #estimator .est-3up{display:none;}
body.dl #estimator .est-carousel{background:var(--white);border-radius:var(--radius) var(--radius) 0 0;padding:1.125rem 4rem 0;max-width:none;margin:0;}
body.dl #estimator .est-arrow{background:var(--white);border-color:var(--stroke-dark);box-shadow:none;color:var(--dark);}
body.dl #estimator .est-arrow:hover:not(:disabled){background:var(--blue-500);border-color:var(--blue-500);color:#fff;box-shadow:none;transform:translateY(-50%);}
body.dl #estimator .est-arrow-prev{left:.75rem;}
body.dl #estimator .est-arrow-next{right:.75rem;}
body.dl #estimator .est-viewport{border-radius:.75rem;box-shadow:none;border:1px solid var(--stroke-dark);}
body.dl #estimator .est-viewport::before{display:none;}
body.dl #estimator .est-shell{max-width:none;margin:0;border-radius:0;box-shadow:none;border:0;}
body.dl #estimator .est-cdots{max-width:none;margin:0;padding:.875rem 1.125rem 1.125rem;background:var(--white);border-radius:0 0 var(--radius) var(--radius);}
body.dl #estimator .est-cdot{font-family:var(--site-font);border-color:var(--stroke-dark);color:var(--dark);}
body.dl #estimator .est-cdot.on{background:var(--dark);border-color:var(--dark);color:#fff;}
body.dl #models .mw-grid{margin:0;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);}
body.dl #models .mw-card{background:var(--white);border-radius:var(--radius);padding:.625rem .625rem 1rem;box-shadow:none;border:0;}
body.dl #models .mw-card:hover{transform:none;}
body.dl #models .mw-site{border-radius:.75rem;box-shadow:none;border:1px solid var(--stroke-dark);}
body.dl #models .mw-card:hover .mw-site{box-shadow:none;}
body.dl #models .mw-meta{padding:.875rem .625rem 0;}
body.dl #models .mw-meta b{font-family:var(--site-font);}
body.dl #models .mw-meta span{color:var(--gray-500);}
body.dl #models>.wrap>p{background:var(--white);border-radius:var(--radius);padding:1.25rem var(--pad);margin:0!important;text-align:left!important;color:var(--gray-500);font-size:var(--b-s);}
body.dl #models>.wrap>p a{color:var(--blue-500);}
body.dl .rv,body.dl .pop{opacity:1;transform:none;}

/* 8.7 PRICING --------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);}
.plan{display:flex;flex-direction:column;gap:1.375rem;padding:var(--pad) var(--pad) 1.75rem;}
.plan_tag{font-size:var(--caption);font-weight:600;text-transform:uppercase;line-height:.89;color:var(--gray-500);}
.plan.is-blue .plan_tag{color:rgba(255,255,255,.8);}
.plan_desc{font-size:var(--b-s);line-height:var(--b-lh);color:var(--gray-500);}
.plan.is-blue .plan_desc{color:rgba(255,255,255,.88);}
.plan ul{display:flex;flex-direction:column;gap:.625rem;font-size:var(--b-s);}
.plan li{display:flex;gap:.625rem;align-items:flex-start;}
.plan li::before{content:'';width:1.125rem;height:1.125rem;border-radius:50%;flex:none;margin-top:1px;border:1px solid var(--stroke-dark);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001530' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/.5625rem no-repeat;}
.plan.is-blue li::before{border-color:var(--stroke-light);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");}
.plan .btn{margin-top:auto;align-self:flex-start;}
.addon{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.5rem var(--pad);}
.addon_price{font-size:1.75rem;font-weight:600;letter-spacing:-.03em;white-space:nowrap;}
.addon_price small{font-size:var(--b-s);font-weight:500;color:var(--gray-500);}
.plan-note{padding:1.25rem var(--pad);text-align:center;font-size:var(--b-s);color:var(--gray-500);}

/* 8.8 FAST-RESULTS TIMELINE ------------------------------------------------- */
.hww_graph{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 10%;margin-top:4rem;}
.hww_line{position:absolute;left:0;right:0;height:1px;padding:0 10%;display:flex;align-items:center;z-index:0;
  background-image:linear-gradient(90deg,rgba(0,21,48,0),rgba(0,21,48,.1) 10%,rgba(41,115,211,.1) 90%,rgba(0,21,48,0) 103%);}
.hww_bar{position:relative;z-index:1;height:11px;width:0%;background:var(--blue-100);border-radius:4rem;}
.hww_tick{position:relative;z-index:1;width:1px;height:18.75rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray-300);
  background-image:linear-gradient(rgba(0,21,48,0) 5%,rgba(0,21,48,.1) 25%,rgba(0,21,48,.1) 75%,rgba(0,21,48,0) 95%);}
.hww_tick.is-active{color:var(--blue-500);}
.hww_dot{position:relative;display:flex;align-items:center;justify-content:center;}
.hww_dot::after{content:'';width:.5rem;height:.5rem;border-radius:100%;background:currentColor;transition:background-color .2s;}
.hww_pulse{position:absolute;width:1.5rem;height:1.5rem;border-radius:100%;background:rgba(0,111,255,.25);border:1px solid rgba(0,0,0,.2);opacity:0;}
.hww_icon{position:absolute;left:0;right:0;margin:0 auto;z-index:5;
  width:7.625rem;height:7.625rem;border-radius:1.5rem;background:var(--white);border:1px solid var(--stroke-dark);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .75rem rgba(255,255,255,.6);}
.hww_icon svg{width:1.75rem;height:1.75rem;}
.hww_steps{display:flex;justify-content:space-between;gap:1rem;margin-top:1.5rem;padding:0 10%;}
.hww_steps div{display:flex;flex-direction:column;gap:.25rem;}
.hww_steps span{color:var(--gray-500);}
.hww_steps b{font-weight:600;}

/* 8.9 FAQ ------------------------------------------------------------------- */
.faq_body{display:flex;gap:var(--gutter);align-items:flex-start;}
.faq_head{width:42%;flex:none;position:sticky;top:var(--gutter);}
body.dl .faq{flex:1;max-width:none;margin:0;display:flex;flex-direction:column;gap:var(--gutter);}
body.dl .qa{background:var(--white);border-radius:var(--radius);border:0;}
body.dl .qa:last-child{border:0;}
body.dl .qa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:2rem;
  font:400 var(--b-l)/var(--b-lh) var(--site-font);letter-spacing:0;color:var(--dark);text-align:left;background:none;border:0;cursor:pointer;}
body.dl .qa-q .pm{width:2.25rem;height:2.25rem;border-radius:100%;border:1px solid var(--stroke-dark);flex:none;position:relative;transition:transform .4s ease,background-color .2s;}
body.dl .qa-q:hover .pm{background:var(--gray-200);}
body.dl .qa-q .pm::before,body.dl .qa-q .pm::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--dark);transform:translate(-50%,-50%);transition:none;opacity:1;}
body.dl .qa-q .pm::after{transform:translate(-50%,-50%) rotate(90deg);}
body.dl .qa.open .qa-q .pm{transform:rotate(45deg);}
body.dl .qa.open .qa-q .pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:1;}
body.dl .qa-a{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.65,0,.35,1);}
body.dl .qa-a p{padding:0 2rem 2rem;margin:0;color:var(--gray-500);font-size:var(--b-m);line-height:1.5;max-width:60ch;}

/* 8.10 FOOTER — two blue cards. --------------------------------------------- */
.footer_big{position:relative;display:block;margin-top:8rem;padding-bottom:2.5rem;text-decoration:none;cursor:pointer;}
.footer_big-line{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--stroke-light);}
.footer_big-fill{position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--white);transition:width 1s;}
.footer_big:hover .footer_big-fill{width:100%;}
.footer_big-arrow{
  position:absolute;right:0;bottom:2.5rem;
  width:4.25rem;height:4.25rem;border-radius:100%;border:1px solid var(--stroke-light);
  display:flex;align-items:center;justify-content:center;color:var(--white);
  opacity:0;transform:translateX(-1rem);
  transition:transform .5s,opacity .2s,color .2s,background-color .2s;
}
.footer_big:hover .footer_big-arrow{opacity:1;transform:translateX(0);}
.footer_meta{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:2.5rem;}
.footer_bottom{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.footer_links{display:flex;gap:2rem;flex-wrap:wrap;}
.footer_socials{display:flex;gap:2rem;margin-left:auto;}
.footer_meta a,.footer_bottom a{color:var(--white);text-decoration:none;}

/* hover underline used on small links */
.u-link{position:relative;display:inline-block;}
.u-link::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:currentColor;transition:width .3s ease;}
.u-link:hover::after{width:100%;}

/* the plan modal and legal overlays in the same palette */
body.dl .modal-ov{background:var(--overlay);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);}
body.dl .modal{border-radius:var(--radius);}


/* 9. RESPONSIVE ------------------------------------------------------------- */
@media (max-width:991px){
  :root{--h-s:3rem;}
  .hero_left{width:100%;max-width:none;}
  .hero_right{position:absolute;left:50%;right:var(--gutter);bottom:var(--gutter);height:16.875rem;}
  .hero_left-bot{width:calc(50% - var(--gutter));}
  .sol_sticky{width:50%;}
  .sol_block-top{padding-right:2rem;}
  .logo-tile{width:16rem;height:4.75rem;}
  .plans{grid-template-columns:1fr;}
  .lisa,.faq_body{flex-direction:column;}
  .lisa_text,.faq_head{width:100%;position:static;}
}
@media (max-width:767px){
  :root{
    --radius:.75rem;--pad:1.25rem;
    --h-l:3rem;--h-m:2.125rem;--h-s:1.5rem;
    --t-l:1.5rem;--t-m:1.25rem;--t-s:1.125rem;--b-l:1rem;
  }
  .card{padding:1.25rem 1.25rem 1.5rem;}
  .sec-head-card .h-m,body.dl .sec-head h2,body.dl #estimator .sec-head h2,body.dl #models .sec-head h2{margin-top:3rem;}
  /* hero becomes a plain stack; nothing is sticky, no scrub story */
  .hero_stage{position:relative;height:auto;flex-direction:column;padding-top:5.25rem;}
  .hero_left{order:1;width:100%;}
  .hero_left-top{position:absolute;top:var(--gutter);left:var(--gutter);right:var(--gutter);}
  .hero_left-mid{padding:1.5rem 1.25rem 2.5rem;}
  .hero_left-bot{width:100%;max-height:none;gap:2.5rem;padding:1.25rem;}
  .hero_right{position:relative;left:auto;right:auto;bottom:auto;width:100%;height:auto;aspect-ratio:1;order:2;}
  .hero_story,.hero_dark,.hero_scrub{display:none;}
  .hero_triggers{display:none;}
  /* trades: single column, media above the open item */
  .cs_body{display:flex;flex-direction:column;min-height:0;gap:var(--gutter);}
  .cs_media{position:relative;width:100%;height:60vw;padding:0;}
  .cs_stat.is-bot{display:none;}
  .cs_stat.is-top{bottom:0;}
  .cs_list{margin-left:0;width:100%;}
  .cs_item-head,.cs_item-inner{padding-left:1.25rem;padding-right:1.25rem;}
  /* how it works: stack, nothing sticky */
  .sol_body{flex-direction:column;}
  .sol_sticky{position:relative;top:auto;width:100%;height:auto;aspect-ratio:1;}
  .sol_visual{padding:1.5rem;}
  .sol_block{height:auto;}
  .sol_img{position:absolute;inset:1.5rem;width:calc(100% - 3rem);height:calc(100% - 3rem);}
  .sol_block-top{padding:1.25rem;gap:2rem;}
  .sol_block-bot{padding:1.25rem;}
  /* timeline rotates to vertical */
  .hww_graph{flex-direction:column;height:31.75rem;padding:5.75rem 0;margin-top:2rem;}
  .hww_line{left:50%;top:5%;bottom:5.75rem;right:auto;width:1px;height:auto;padding:0;
    background-image:linear-gradient(rgba(0,21,48,0),rgba(0,21,48,.1) 10%,rgba(41,115,211,.1) 90%,rgba(0,21,48,0) 103%);}
  .hww_bar{width:10px;height:0%;background:linear-gradient(0deg,rgba(180,210,249,0),var(--blue-100));}
  .hww_tick{width:95%;height:1px;flex-direction:row;
    background-image:linear-gradient(90deg,rgba(0,21,48,0) 5%,rgba(0,21,48,.1) 25%,rgba(0,21,48,.1) 75%,rgba(0,21,48,0) 95%);}
  .hww_icon{width:6.25rem;height:6.25rem;top:0;bottom:0;margin:auto;}
  .hww_steps{flex-direction:column;padding:0;gap:.75rem;}
  /* menu + footer */
  .menu{width:100%;}
  .menu_link{font-size:1.5rem;border-bottom:1px solid rgba(255,255,255,.2);padding:1.125rem 0 1.375rem;}
  .navbar_logo{left:1.25rem;top:1.5rem;font-size:1.25rem;}
  .navbar_ctas .btn.is-ghost{display:none;}
  .navbar_ctas{gap:.5rem;padding-right:.75rem;}
  .drawer{padding:1.5rem;}
  .drawer_two{grid-template-columns:1fr;gap:0;}
  .footer_meta{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .footer_bottom{flex-direction:column;align-items:flex-start;gap:.5rem;}
  .footer_links{flex-direction:column;gap:.5rem;}
  .footer_socials{margin-left:0;margin-top:2rem;gap:var(--gutter);}
  .footer_big{margin-top:3rem;}
  .footer_big-arrow{width:2.75rem;height:2.75rem;}
  .logo-tile{width:13rem;height:3.9rem;}
  .logo-tile img{height:1.5rem;}
  .lisa_stage{min-height:0;padding:1.5rem 1rem;}
  body.dl #estimator .est-carousel{padding:.75rem .75rem 0;}
  body.dl #models .mw-grid{grid-template-columns:1fr;}
  body.dl .qa-q{padding:1.25rem;}
  body.dl .qa-a p{padding:0 1.25rem 1.25rem;}
}

/* 10. REDUCED MOTION -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
  .marquee_track{animation:none;}
  .sol_img,.cs_photo,.cs_stat,.hero_step-title,.hero_step-body{opacity:1;transform:none;}
  .pill_icon{width:2rem;}.pill_dash{width:1rem;}
  .dl-pre{display:none;}
}

/* the how-it-works flow: a dash travels the rail once the visual is up */
.flow_dash{animation:flowDash 4s linear infinite;}
@keyframes flowDash{from{stroke-dashoffset:922;}to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){.flow_dash{animation:none;}}