/* ProfitScope landing page
   Sections: 1 overrides, 2 content blocks, 3 base + components */

/* ===== 1. CTA overrides ===== */
.blind-cta{ --btn-bg:#000000; background:#000000; margin-top:4px; }
.stmt .stmt-panel{ flex-direction:column; gap:clamp(28px,3.5vw,48px); }
.stmt-panel .order-ctas{ margin-top:0; }
.btn.btn-primary.blind-cta{ --btn-bg:#000000 !important; background:#000000 !important; }
.order-ctas{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:16px; margin-top:40px; }
.order-ctas .btn-primary{ --btn-bg:#000000; background:#000000; }
.order-ctas .btn-outline{ --btn-fg:#000000; color:#000000; border-color:#000000; --circle-color:#000000; padding:12px 32px; }

/* ===== 2. Content blocks (hero note, order sub, us-vs-them, free section) ===== */
.hero-note{ margin:-12px 0 0; font-family:"Inter",ui-sans-serif,sans-serif; font-size:14px; line-height:20px; letter-spacing:-0.14px; color:var(--ink); opacity:.8; }
.order-h2.has-sub{ margin-bottom:20px; }
.order-sub{ max-width:640px; margin:0 auto clamp(24px,calc(2.5vw + 4px),40px); text-align:center; font-family:"Inter",ui-sans-serif,sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:var(--ink-2); }
.blind-panel.is-copy{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); justify-content:normal; align-items:stretch; gap:clamp(40px,8vw,112px); padding:71px 69px; }
.blind-panel.is-copy .blind-copy{ justify-content:center; min-width:0; }
/* Us vs Them face-off */
.bf-field{ display:flex; flex-direction:column; align-items:stretch; gap:0; position:relative; min-height:0; min-width:0; justify-content:center; }
.bf-lab{ font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(0,0,0,.55); }
.bf-them{ display:flex; flex-direction:column; gap:12px; }
.bf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bf-cell{ height:64px; border-radius:14px; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.05); display:flex; align-items:center; justify-content:center; filter:grayscale(1); opacity:.7; }
.bf-cell img{ display:block; width:auto; max-width:80%; }
.bf-them-line{ margin:0; font-size:14px; color:rgba(0,0,0,.6); }
.bf-vs{ align-self:center; z-index:2; width:52px; height:52px; margin:22px 0 -26px; border-radius:50%; background:#fff; color:#000; border:3px solid #52E68F; display:grid; place-items:center; font-family:"42dot Sans","Inter",sans-serif; font-weight:600; font-size:15px; box-shadow:0 8px 22px rgba(19,55,49,.25); }
.bf-us{ flex:1; justify-content:center; position:relative; background:#000; border-radius:22px; padding:48px 44px 44px; box-shadow:0 26px 50px rgba(19,55,49,.35), 0 0 0 4px rgba(255,255,255,.55); display:flex; flex-direction:column; gap:18px; color:#fff; }
.bf-lab-us{ color:#6CDEA2; }
.bf-us-logo{ display:block; height:46px; width:auto; align-self:flex-start; }
.bf-us-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bf-us-list li{ display:flex; align-items:center; gap:12px; font-size:15px; line-height:22px; color:rgba(255,255,255,.92); }
.bf-us-list i{ flex:none; width:22px; height:22px; border-radius:50%; background:none; border:1.5px solid #8A8A8A; display:grid; place-items:center; }
.bf-us-list i svg path{ stroke:#A3A3A3; }
/* Us vs Them appear animation: logos, VS, Us card, then the ticks */
.bf-cell, .bf-vs, .bf-us, .bf-us-logo, .bf-us-list li{ opacity:0; transition:opacity .6s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.bf-cell{ transform:translateY(16px) scale(.96); }
.bf-cell:nth-child(1){ transition-delay:.05s; } .bf-cell:nth-child(2){ transition-delay:.15s; } .bf-cell:nth-child(3){ transition-delay:.25s; } .bf-cell:nth-child(4){ transition-delay:.35s; }
.bf-vs{ transform:scale(.4); transition-delay:.6s; transition-timing-function:ease, cubic-bezier(.34,1.56,.64,1); }
.bf-us{ transform:translateY(32px); transition-delay:.75s; }
.bf-us-logo{ transform:translateY(10px); transition-delay:1.05s; }
.bf-us-list li{ transform:translateY(10px); }
.bf-us-list li:nth-child(1){ transition-delay:1.2s; } .bf-us-list li:nth-child(2){ transition-delay:1.32s; } .bf-us-list li:nth-child(3){ transition-delay:1.44s; }
.bf-field.is-live .bf-cell, .bf-field.is-live .bf-vs, .bf-field.is-live .bf-us, .bf-field.is-live .bf-us-logo, .bf-field.is-live .bf-us-list li{ opacity:1; transform:none; }
.bf-cell{ opacity:0; }
.bf-field.is-live .bf-cell{ opacity:.7; }
@media (prefers-reduced-motion: reduce){ .bf-cell, .bf-vs, .bf-us, .bf-us-logo, .bf-us-list li{ transition:none; transform:none; } .bf-cell{ opacity:.7; } .bf-vs,.bf-us,.bf-us-logo,.bf-us-list li{ opacity:1; } }
.bf-us-list{ margin-top:16px; }
/* logo cards: hover state (active once the appear animation has finished) */
.bf-field.is-done .bf-cell{ transition:opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1), filter .25s ease, background .25s ease, box-shadow .3s ease; transition-delay:0s; }
.bf-field.is-done .bf-cell:hover{ filter:grayscale(.35); opacity:.92; background:rgba(255,255,255,.7); transform:translateY(-2px); box-shadow:0 8px 18px rgba(19,55,49,.1); }
@media (prefers-reduced-motion: reduce){ .bf-field .bf-cell:hover{ transform:none; } }
@media (max-width:1100px){ .blind-panel.is-copy{ grid-template-columns:1fr; } }

/* Us vs Them: floating competitor logos in the copy panel */
.blind-close .hl{ background:#fff; padding:5px 10px; border-radius:4px; -webkit-box-decoration-break:clone; box-decoration-break:clone; line-height:1.75; }
.blind-close{ font-family:"42dot Sans","Inter",sans-serif; font-weight:600; font-size:20px; line-height:28px; letter-spacing:-0.2px; color:#000; margin:0; }
.free{ background:#fff; padding:0 clamp(20px,12.5vw,200px) clamp(64px,9.6vw,154px); }
.free-wrap{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.free-wrap .sol-h2{ max-width:915px; }
.free-wrap .sol-sub{ max-width:640px; }
@media (max-width:700px){  }

/* ===== 3. Base, layout and components ===== */
:root{
  --ink:#133731;
  --ink-2:#161616;
  --mint-pale:#F5FFFA;
  --mint-mid:#D5FDE9;
  --mint-btn:#6CDEA2;
  --mint-glow-1:#52E68F;
  --mint-glow-2:#E7F67B;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* ===== PROMO MARQUEE — fixed above everything, scrolling like an ecommerce announcement bar ===== */
.promo-marquee{
  position:absolute; top:0; left:0; right:0; z-index:70;
  height:48px; overflow:hidden;
  background:#000;
  display:flex; align-items:center;
}
.promo-marquee.is-hidden{ transform:none; }
.promo-marquee{ justify-content:center; padding:0 20px; }
.promo-inner{ position:relative; z-index:1; display:flex; align-items:center; gap:22px; white-space:nowrap; }
.promo-label{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-weight:500; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:#6CDEA2;
  background:linear-gradient(100deg, #52E68F 0%, #6CDEA2 30%, #B9F7D6 43%, #FFFFFF 50%, #B9F7D6 57%, #6CDEA2 70%, #52E68F 100%);
  background-size:260% 100%; background-position:100% 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:promo-shine 2.8s ease-in-out infinite;
}
@keyframes promo-shine{ 0%{ background-position:100% 0; } 55%,100%{ background-position:-60% 0; } }
@media (prefers-reduced-motion: reduce){ .promo-label{ animation:none; background-position:50% 0; } }
.promo-text{ font-family:"Inter",ui-sans-serif,sans-serif; font-size:14px; color:rgba(255,255,255,.82); }
.promo-text u{ text-decoration-thickness:1px; text-underline-offset:3px; color:#fff; }
.promo-pill{
  font-variant-numeric:tabular-nums; min-width:0;
  display:inline-flex; align-items:center; height:26px; padding:0 14px; border:1px solid rgba(108,222,162,.5); border-radius:999px;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-weight:500; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:#6CDEA2;
}
.cd-sep{ font-style:normal; margin:0 .45em; }
@media (max-width:900px){ .promo-text{ display:none; } }
@media (max-width:520px){ .promo-inner{ gap:12px; } .promo-label{ font-size:10.5px; letter-spacing:.1em; } .promo-pill{ font-size:10px; padding:0 10px; letter-spacing:.08em; } }
@media (prefers-reduced-motion: reduce){ .promo-marquee{ transition:none; } }
body.promo-hidden{ padding-top:0 !important; }
body.over-promo .cursor-dot{ opacity:0 !important; }
.promo-marquee, .promo-marquee *{ cursor:default; }
@media (prefers-reduced-motion: reduce){
  body{ transition:none; }
}
body{
  margin:0;
  padding-top:48px; /* clears the fixed .promo-marquee */
  font-optical-sizing:none; font-variation-settings:"opsz" 24; /* Inter 24pt cut, page-wide */
  background:#fff;
  color:var(--ink);
  font-family:"Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

.hf{
  font-family:"42dot Sans", "Inter", ui-sans-serif, sans-serif;
}

/* text selection: green on light surfaces, white on dark or green surfaces */
::selection{ background:var(--mint-mid); color:var(--ink); }
::-moz-selection{ background:var(--mint-mid); color:var(--ink); }
.hero ::selection, .wall ::selection, .order-dark ::selection, .testi-panel ::selection, .apply ::selection, .blind-panel ::selection, .apply-panel ::selection{ background:#FFFFFF; color:var(--ink); }
.hero ::-moz-selection, .wall ::-moz-selection, .order-dark ::-moz-selection, .testi-panel ::-moz-selection, .apply ::-moz-selection, .blind-panel ::-moz-selection, .apply-panel ::-moz-selection{ background:#FFFFFF; color:var(--ink); }
.wall-card ::selection, .blind-card ::selection, .apply-form ::selection, .order-tip ::selection{ background:var(--mint-mid); color:var(--ink); }
.wall-card ::-moz-selection, .blind-card ::-moz-selection, .apply-form ::-moz-selection, .order-tip ::-moz-selection{ background:var(--mint-mid); color:var(--ink); }
/* the nav bar sits on a white background, so a white selection highlight
   would be invisible there, use a light green instead */
.nav ::selection{ background:var(--mint-mid); color:var(--ink); }
.nav ::-moz-selection{ background:var(--mint-mid); color:var(--ink); }

.hero{
  position:relative;
  /* Figma: nav at 25, copy at 218, wall panel at 849 (1600 canvas) */
  padding-bottom:clamp(60px,11.625vw,186px);
  background:
    linear-gradient(155.9deg, var(--mint-glow-1) 52.8%, var(--mint-glow-2) 115.5%);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#bg-grid{position:absolute; inset:0; z-index:0; display:block; pointer-events:none;}
.hero > .wrap, .hero-body{position:relative; z-index:1;}
.hero > div.wrap:first-of-type{ z-index:5; }

.wrap{max-width:1600px; margin:0 auto; width:100%; padding:0 clamp(20px,12.5vw,200px);}
img,svg{max-width:100%; display:block;}

/* ===== NAV ===== */
/* nav hides on scroll down, returns on scroll up (fixed once past the hero band) */
.nav-slot{ position:relative; }
.nav.is-fixed{ animation:none; opacity:1; position:fixed; z-index:60; top:16px; left:max(clamp(20px,12.5vw,200px), calc(50% - 600px)); right:max(clamp(20px,12.5vw,200px), calc(50% - 600px)); margin-top:0; box-shadow:0 12px 40px rgba(19,55,49,.14); transform:translateY(0); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
@media (max-width:1180px){ .nav-links{ display:none; } }
.nav.is-fixed.is-hidden{ transform:translateY(-140%); box-shadow:none; }
.nav.is-fixed.no-anim{ transition:none; }
@media (prefers-reduced-motion: reduce){ .nav.is-fixed{ transition:none; } }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:clamp(8px,0.9vw,14px);
  min-height:clamp(64px,5.375vw,86px);
  padding:14px clamp(18px,2.4vw,28px);
  gap:20px;
  background:#fff;
  border-radius:17px;
  box-shadow:0 8px 30px rgba(19,55,49,.12);
  opacity:0;
  animation:hero-appear .8s ease-out both;
}
.brand{display:flex; align-items:center; gap:12px; flex:none;}
.card-logo{ display:block; height:44px; width:auto; }
.brand-logo{ display:block; height:26px; width:auto; }
.foot-logo{ display:block; height:30px; width:auto; }
.brand .mark{
  width:50px; height:50px; border-radius:9px; flex:none;
  background:linear-gradient(152.4deg, #52E68F 34.3%, #E7F67B 128.7%);
  display:flex; align-items:center; justify-content:center;
}
.brand .mark svg{width:24px; height:27px;}
.brand .name{
  font-size:18px; font-weight:500; color:var(--ink-2);
  white-space:nowrap;
}

.nav-links{
  display:flex; align-items:center; gap:24px;
  font-size:16px; font-weight:500; letter-spacing:-0.16px;
  color:var(--ink);
  list-style:none; margin:0; padding:0;
  white-space:nowrap;
}
.nav-links a{
  display:inline-block; text-decoration:none; color:inherit;
  transition:color .35s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover{color:var(--mint-btn); transform:translateY(-2px);}
@media (max-width:900px){.nav-links{display:none;}}

.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:46px; border:none; cursor:pointer;
  font-size:16px; font-weight:500; letter-spacing:-0.16px;
  white-space:nowrap;
  text-decoration:none;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
  box-shadow:0 0 0 rgba(19,55,49,0);
}
/* subtle float on hover: lifts 2px with a soft shadow beneath */
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }
.btn:hover{transform:translateY(-2px);}
.btn-elig{
  --btn-bg:#000000; --btn-fg:var(--mint-mid); --circle-color:#FFFFFF; --circle-text:#000000;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:"42dot Sans", "Inter", ui-sans-serif, sans-serif;
  font-weight:600;
  padding:12px 24px; flex:none;
}
.btn-primary{
  --btn-bg:var(--ink); --btn-fg:var(--mint-mid); --circle-color:#FFFFFF; --circle-text:var(--ink);
  background:var(--btn-bg); color:var(--btn-fg);
  padding:12px 40px;
}
.btn-secondary{
  --btn-bg:var(--mint-btn); --btn-fg:var(--ink); --circle-color:var(--ink); --circle-text:var(--mint-mid);
  background:var(--btn-bg); color:var(--btn-fg);
  padding:12px 24px;
}
.btn-outline{
  --btn-bg:transparent; --btn-fg:var(--ink); --circle-color:var(--ink); --circle-text:var(--mint-mid);
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--ink);
  padding:12px 24px;
}

.btn-label{position:relative; z-index:2;}

/* ===== TEXT INVERT UNDER THE CURSOR CIRCLE =====
   The visible circle is a fixed page-level element with a very high
   z-index, so a locally-stacked child of the button can never paint
   above it. This layer lives at the same page level as the circle
   instead (see .cursor-inv-text, created in JS), with a higher z-index,
   so the dark text genuinely shows through on top of the circle. */
.cursor-inv-text{
  position:fixed; z-index:10000; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-family:"42dot Sans","Inter",ui-sans-serif,sans-serif;
  font-size:16px; font-weight:500; letter-spacing:-0.16px; white-space:nowrap;
  clip-path:circle(0px at 0px 0px);
}

/* ===== HERO CONTENT ===== */
.hero-body{
  display:flex;
  align-items:flex-start;
  padding:clamp(48px,6.69vw,107px) 0 clamp(64px,11.06vw,177px);
}
@keyframes bag-float{
  0%, 100%{ transform:translateY(calc(-50% - 8px)); }
  50%{ transform:translateY(calc(-50% + 8px)); }
}
@keyframes hero-appear{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
/* per-line text reveal: each line hides behind its own overflow mask and
   slides up into place, staggered line by line */
@keyframes line-reveal{
  from{ transform:translateY(110%); }
  to{ transform:translateY(0); }
}
.line-mask{display:block; overflow:hidden; padding-bottom:0.2em; margin-bottom:-0.2em;}
.line-inner{
  display:block;
  transform:translateY(110%);
  animation:line-reveal 1s cubic-bezier(.16,1,.3,1) both;
}
.line-mask:nth-child(1) .line-inner{animation-delay:.08s;}
.line-mask:nth-child(2) .line-inner{animation-delay:.18s;}
.line-mask:nth-child(3) .line-inner{animation-delay:.28s;}
.line-mask:nth-child(4) .line-inner{animation-delay:.38s;}
@keyframes bag-appear{
  from{ opacity:0; }
  to{ opacity:1; }
}
.hero-bag{
  position:absolute; z-index:1; pointer-events:none;
  /* Figma: bag box 880..1347 x, centre y 446 on the 1600 canvas; hero-body starts below the 111px nav band.
     Above 1600px the content is capped, so anchor the bag to the centred 1600 canvas instead of the viewport edge. */
  right:max(clamp(140px,15.8vw,253px), calc(50% - 547px)); top:clamp(120px,20.94vw,335px);
  width:clamp(240px,29.2vw,467px); height:auto;
  opacity:0;
  animation:bag-float 5.5s ease-in-out infinite, bag-appear .9s ease-out .35s both;
}
@media (max-width:960px){ .hero-bag{display:none;} }
.hero-inner{
  display:flex; flex-direction:column; align-items:flex-start; gap:30px;
  max-width:628px;
}
.hero-copy{
  display:flex; flex-direction:column; gap:25px; width:100%;
  opacity:0;
  animation:hero-appear .8s ease-out .12s both;
}

h1.hero-h1{
  font-family:"42dot Sans", "Inter", ui-sans-serif, sans-serif;
  font-weight:500;
  font-size:clamp(36px,6.2vw,76px);
  line-height:1.01;
  letter-spacing:-0.01em;
  color:#000000;
  margin:0;
  text-wrap:balance;
}

.hero-sub{
  font-family:"Inter", ui-sans-serif, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:24px;
  letter-spacing:-0.16px;
  color:var(--ink);
  margin:0;
  max-width:56ch;
}

.hero-ctas{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  opacity:0;
  animation:hero-appear .8s ease-out .24s both;
}
.hero-ctas .btn{
  font-family:"42dot Sans", "Inter", ui-sans-serif, sans-serif;
  font-weight:600;
}
.hero-ctas .btn-primary{ --btn-bg:#000000; background:#000000; }
.hero-ctas .btn-outline{ --btn-fg:#000000; color:#000000; border-color:#000000; --circle-color:#000000; padding:12px 32px; }


/* ===== CUSTOM CURSOR ===== */
/* the native arrow stays visible everywhere, the dot/circle is a
   decorative overlay riding alongside it, not a replacement for it */
@media (hover:hover) and (pointer:fine){
  /* clickable elements still show the native pointer hand alongside the
     custom dot/circle, so it's clear they're actually clickable */
  body.has-custom-cursor .btn, body.has-custom-cursor .built-cta, body.has-custom-cursor .pill-cta, body.has-custom-cursor .nav-links a{cursor:pointer;}
}
.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; margin:-4px 0 0 -4px;
  pointer-events:none; z-index:9999;
  transform:translate(-100px,-100px);
  transition:opacity .2s ease;
}
.cursor-dot-inner{
  width:100%; height:100%; border-radius:50%; background:var(--ink);
  transform:scale(0); /* no resting dot, only the hover circle below shows */
  transition:transform .3s cubic-bezier(.16,1,.3,1), background-color .3s ease;
}
/* on button hover the cursor itself grows and freely overlaps the button
   (it's a fixed page element, not a child of it, so nothing clips or
   masks it). Its color is set per-button in JS to that button's own
   --btn-fg, so it stays dark on the light secondary button and light on
   the two dark buttons, always contrasting with whichever it's over.
   The text underneath stays readable via .cursor-inv-text, a page-level
   layer stacked above this circle (z-index 10000 vs 9999). */
.cursor-dot.over-btn .cursor-dot-inner{
  background:var(--mint-btn);
  transform:scale(8);
  mix-blend-mode:multiply;
}
/* nav links get a smaller dot than the CTA buttons, still dark ink, no color change */
.cursor-dot.over-nav .cursor-dot-inner{
  transform:scale(6);
}

/* ===== SHARED SECTION BITS (from Figma node 681:4308, sections 2 and 3) ===== */
section{padding:clamp(64px,9vw,120px) 0;}
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--mint-btn); border:1px solid var(--mint-btn);
  border-radius:33px; padding:10px 20px;
  font-family:"Inter"; font-weight:500; font-size:13px; letter-spacing:-0.13px; color:#000;
}
.tag-outline{background:transparent; border-color:#fff; color:#fff; border-radius:10px;}

/* ===== THE WALL ===== */
/* ---- Order section ---- */
.order{ background:#fff; padding:clamp(72px,9vw,128px) clamp(20px,3.5vw,56px) 0; }
.order-wrap{ max-width:1200px; margin:0 auto; }
.order-h2{
  font-family:"42dot Sans","Inter",ui-sans-serif,sans-serif; font-weight:400;
  font-size:clamp(30px,4.6vw,60px); line-height:1.1; letter-spacing:-0.01em;
  color:var(--ink-2); text-align:center; margin:0 0 clamp(48px,6vw,96px); text-wrap:balance;
}
.order-demo{ background:#fff; border:1px solid rgba(27,27,27,.08); border-radius:27px; overflow:hidden; }
.order-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:24px 44px; min-height:74px; border-bottom:1px solid rgba(27,27,27,.08); background:#fff; position:relative; z-index:2;
}
.order-bar-title{
  font-family:"Inter",ui-sans-serif,sans-serif; font-weight:500; font-size:18px; letter-spacing:-0.03em; color:#000;
  display:inline-block; opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.order-bar-title.is-in{ opacity:1; transform:translateY(0); }
.order-bar-title.is-instant{ transition:none; }
@media (prefers-reduced-motion: reduce){
  .order-bar-title{ transition:none; }
}
.order-bar-right{ display:flex; align-items:center; gap:17px; flex:none; }
.order-steps{ display:flex; gap:6px; }
.order-step{ width:26px; height:5px; border-radius:2.5px; background:#ECECEC; border:0; padding:0; cursor:pointer; transition:background .3s; }
.order-step.is-on{ background:#6CDEA2; }
.order-step:focus-visible{ outline:2px solid #47C77B; outline-offset:3px; }
.order-replay{
  display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:0;
  font-family:"Inter",ui-sans-serif,sans-serif; font-weight:500; font-size:18px; letter-spacing:-0.03em; color:#000; cursor:pointer;
}
.order-replay:hover{ color:#47C77B; }
.order-replay:focus-visible{ outline:2px solid #47C77B; outline-offset:4px; border-radius:6px; }

.order-stage{ position:relative; overflow:hidden; }
.order-scene{ position:absolute; left:0; top:0; width:1200px; height:803px; transform-origin:0 0; }
.order-rings, .order-lines, .order-metric-lines, .order-pulse-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
/* Short bright dashes continuously travelling along the card<->chip wires,
   like data flowing back into the order -- on top of the static drawn line. */
.order-pulse-lines line{
  fill:none; stroke:url(#orderPulseGrad); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:22 130; opacity:0;
}
.order-demo[data-slide="2"] .order-pulse-lines line, .order-demo[data-slide="3"] .order-pulse-lines line{
  opacity:.9;
  animation:orderFlow 2.6s linear infinite var(--pd,0s);
}
@keyframes orderFlow{ from{stroke-dashoffset:0;} to{stroke-dashoffset:-152;} }
@media (prefers-reduced-motion: reduce){
  .order-pulse-lines line{ animation:none; opacity:0; }
}
.order-rings .ring{ transform-origin:600px 401.5px; transform:scale(.7); opacity:0; transition:transform 1.2s cubic-bezier(.16,1,.3,1), opacity .9s ease; }
.order-demo.is-playing .ring-1{ transform:scale(1); opacity:1; transition-delay:.25s; }
.order-demo[data-slide="3"] .ring-1{ stroke:none; }
.order-demo.is-playing .ring-2{ transform:scale(1); opacity:1; transition-delay:.4s; }
.order-demo.is-playing .ring-3{ transform:scale(1); opacity:1; transition-delay:.55s; }
/* Stage 0: same two rings behind the Shopify notification, popping in with
   the exact same timing/easing as the card itself instead of trailing in
   on their own slower transition. */
@keyframes ringPopIn{
  0%   { opacity:0; transform:scale(.5); }
  60%  { opacity:1; transform:scale(1.05); }
  100% { opacity:1; transform:scale(1); }
}
.order-demo.is-stage0 .ring-1{ animation:ringPopIn .65s cubic-bezier(.22,1,.36,1) .12s forwards; opacity:0; }
.order-demo.is-stage0 .ring-2{ animation:ringPopIn .65s cubic-bezier(.22,1,.36,1) .2s forwards; opacity:0; }

.order-lines line{ stroke-dasharray:200; stroke-dashoffset:200; transition:stroke-dashoffset .8s var(--p2-ease, cubic-bezier(.32,.72,0,1)); }
.order-lines line:nth-child(1){ transition-delay:.05s; }
.order-lines line:nth-child(2){ transition-delay:.12s; }
.order-lines line:nth-child(3){ transition-delay:.19s; }
.order-lines line:nth-child(4){ transition-delay:.26s; }
.order-lines line:nth-child(5){ transition-delay:.33s; }
.order-lines line:nth-child(6){ transition-delay:.4s; }
.order-lines line:nth-child(7){ transition-delay:.47s; }
.order-demo[data-slide="2"] .order-lines line, .order-demo[data-slide="3"] .order-lines line{ stroke-dashoffset:0; }

/* ---- Stage 0: a single element that IS the app icon, then smart-animates
   (morphs) into the full Shopify notification -- same box, same position,
   just its size/shape/content change, like a Figma smart-animate transition. ---- */
.order-notif{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(28px) scale(.4);
  width:120px; height:120px; border-radius:28px; background:#fff;
  box-shadow:0 14px 36px rgba(38,38,38,.14);
  padding:0; display:flex; align-items:center; justify-content:center; gap:0;
  font-family:"Inter",ui-sans-serif,sans-serif; color:#133731;
  opacity:0;
  transition:
    opacity .5s cubic-bezier(.22,1,.36,1),
    transform .5s cubic-bezier(.22,1,.36,1),
    width .55s cubic-bezier(.22,1,.36,1) .05s,
    height .55s cubic-bezier(.22,1,.36,1) .05s,
    border-radius .55s cubic-bezier(.22,1,.36,1) .05s,
    padding .55s cubic-bezier(.22,1,.36,1) .05s,
    gap .3s ease .05s,
    box-shadow .5s ease;
}
.order-demo.is-appicon .order-notif, .order-demo.is-stage0 .order-notif{
  opacity:1; transform:translate(-50%,-50%);
}
.order-demo.is-stage0 .order-notif{
  width:420px; height:108px; border-radius:18px; padding:0 28px 0 24px; gap:22px;
  align-items:center; justify-content:flex-start;
}
@keyframes badgePopIn{
  0%   { opacity:0; transform:scale(0); }
  55%  { opacity:1; transform:scale(1.3); }
  75%  { transform:scale(.92); }
  100% { opacity:1; transform:scale(1); }
}
.order-notif-badge{
  position:absolute; top:-8px; right:-10px; min-width:34px; height:34px; padding:0 7px;
  border-radius:50%; background:#FF3B30; color:#fff; border:3px solid #fff;
  font-family:"Inter",sans-serif; font-weight:700; font-size:17px; line-height:1;
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  opacity:0; transform:scale(0);
  transition:opacity .3s ease, transform .3s ease;
}
/* pops in with a bouncy overshoot shortly after the icon itself has appeared */
.order-demo.is-appicon .order-notif-badge{
  animation:badgePopIn .5s cubic-bezier(.34,1.56,.64,1) .35s forwards;
}
.order-demo.is-stage0 .order-notif-badge{ animation:none; opacity:0; transform:scale(.4); }
@media (prefers-reduced-motion: reduce){
  .order-demo.is-appicon .order-notif-badge{ animation:none; opacity:1; transform:scale(1); }
}
.order-notif-icon{
  flex:none; width:74px; height:74px; object-fit:contain; display:block;
  transition:width .4s cubic-bezier(.22,1,.36,1), height .4s cubic-bezier(.22,1,.36,1);
}
.order-demo.is-stage0 .order-notif-icon{ width:64px; height:64px; }
.order-notif-body{
  /* absolutely positioned and vertically centered against the box itself,
     so it can never be thrown off-center by flex height/content math.
     left/right match the Figma spec: 24px pad + 64px icon + 22px gap, 28px pad. */
  position:absolute; left:110px; right:28px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; justify-content:center;
}
.order-notif-head{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:12px; width:100%;
  opacity:0; transform:translateY(14px);
  /* fast, no-delay hide -- this is what runs on exit (box already shrinking) */
  transition:opacity .2s ease, transform .25s ease;
}
.order-demo.is-stage0 .order-notif-head{
  opacity:1; transform:translateY(0);
  /* delayed reveal -- only applies on the way in, since this is the more
     specific rule and wins for `transition` whenever is-stage0 is present */
  transition:opacity .35s ease .6s, transform .4s cubic-bezier(.22,1,.36,1) .6s;
}
.order-notif-title{ font-weight:600; font-size:15px; letter-spacing:-0.15px; color:#000; white-space:nowrap; flex:none; }
.order-notif-time{ font-size:12px; color:#8a8a8a; flex:none; white-space:nowrap; }
.order-notif-msg{
  font-size:14px; line-height:20px; letter-spacing:-0.1px; color:#3a3a3a; margin:4px 0 0;
  opacity:0; transform:translateY(14px);
  transition:opacity .2s ease, transform .25s ease;
}
.order-demo.is-stage0 .order-notif-msg{
  opacity:1; transform:translateY(0);
  transition:opacity .35s ease .74s, transform .4s cubic-bezier(.22,1,.36,1) .74s;
}
@media (prefers-reduced-motion: reduce){
  .order-notif, .order-notif-badge, .order-notif-icon, .order-notif-body, .order-notif-head, .order-notif-msg{ transition:none; }
}

.order-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(18px) scale(.97);
  width:359px; background:#fff; border-radius:24px;
  filter:drop-shadow(7px 14px 36px rgba(38,38,38,.06));
  padding:26px 40px; font-family:"Inter",ui-sans-serif,sans-serif; color:#133731;
  opacity:0; transition:opacity .6s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.order-demo.is-playing .order-card{ opacity:1; transform:translate(-50%,-50%); }
/* Each block inside the card slides up on its own, staggered slightly
   after one another, instead of the whole card just fading in as one flat unit. */
.order-card-head, .order-msg, .order-item, .order-rows, .order-total{
  opacity:0; transform:translateY(12px);
  transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.order-demo.is-playing .order-card-head{ opacity:1; transform:translateY(0); transition-delay:.08s; }
.order-demo.is-playing .order-msg{ opacity:1; transform:translateY(0); transition-delay:.16s; }
.order-demo.is-playing .order-item{ opacity:1; transform:translateY(0); transition-delay:.24s; }
.order-demo.is-playing .order-rows{ opacity:1; transform:translateY(0); transition-delay:.32s; }
.order-demo.is-playing .order-total{ opacity:1; transform:translateY(0); transition-delay:.4s; }
@media (prefers-reduced-motion: reduce){
  .order-card-head, .order-msg, .order-item, .order-rows, .order-total{ transition:none; }
}
.order-card-head{ display:flex; align-items:center; gap:10px; }
.order-check{ width:42px; height:42px; border-radius:50%; background:#6CDEA2; display:flex; align-items:center; justify-content:center; flex:none; }
.order-num{ font-size:10px; font-weight:500; letter-spacing:-0.1px; opacity:.4; margin-bottom:6px; }
.order-thanks{ font-family:"42dot Sans","Inter",sans-serif; font-weight:600; font-size:18px; line-height:24px; letter-spacing:-0.18px; }
.order-msg{ font-size:14px; line-height:21px; letter-spacing:-0.14px; margin:12px 0 0; padding-bottom:18px; border-bottom:1px solid #E5E5E5; }
.order-item{ display:flex; align-items:center; gap:14px; padding:19px 0 18px; border-bottom:1px solid #E5E5E5; }
.order-thumb{ position:relative; width:43px; height:43px; border-radius:6px; background:#F1F8F5; display:flex; align-items:center; justify-content:center; flex:none; margin-top:2px; }
.order-qty{ position:absolute; top:-8px; right:-7px; width:13px; height:13px; border-radius:50%; background:#133731; border:1px solid #fff; color:#fff; font-size:6px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.order-item-text{ flex:1; }
.order-item-name{ font-weight:600; font-size:14px; line-height:21px; letter-spacing:-0.14px; }
.order-item-sub{ font-size:12px; letter-spacing:-0.12px; }
.order-item-price{ font-size:14px; font-weight:500; letter-spacing:-0.14px; }
.order-rows{ padding:19px 0 18px; border-bottom:1px solid #E5E5E5; display:flex; flex-direction:column; gap:10px; }
.order-row{ display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:-0.12px; }
.order-row span:last-child{ font-size:14px; font-weight:500; }
.order-total{ display:flex; justify-content:space-between; align-items:center; padding-top:19px; font-weight:600; font-size:14px; letter-spacing:-0.14px; }
.order-total span:last-child{ font-size:16px; }

.order-chips, .order-metrics{ position:absolute; inset:0; }
.ord-chip{
  position:absolute; display:flex; align-items:center; gap:11.7px; padding:13px 18px;
  background:#fff; border:1px solid #D8EDD9; border-radius:74px; white-space:nowrap;
  font-family:"Inter",sans-serif; font-weight:700; font-size:13.2px; color:#101522;
  opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.1s + var(--i) * .09s);
}
.ord-chip img, .ord-chip svg{ display:block; flex:none; }
.ord-bing{ position:relative; width:17px; height:24px; overflow:hidden; display:block; }
.ord-bing img{ position:absolute; width:211.64%; height:150.38%; left:-64.02%; top:-25.19%; max-width:none; }
.order-demo[data-slide="2"] .ord-chip, .order-demo[data-slide="3"] .ord-chip{ opacity:1; transform:none; }

.ord-metric{
  position:absolute; display:flex; flex-direction:column; gap:6px; padding:13px 18px;
  background:#FBFEFA; border:1px dashed #A5CAA8; border-radius:12px; white-space:nowrap;
  font-family:"Inter",sans-serif; font-weight:600;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(.05s + var(--i) * .08s);
}
.ord-metric-l{ font-size:10px; text-transform:uppercase; color:#133731; opacity:.3; }
.ord-metric-v{ font-size:16px; color:#143832; }
.ord-metric.is-green .ord-metric-v{ color:#6CDEA2; }
.order-demo[data-slide="3"] .ord-metric{ opacity:1; transform:none; }
.order-metric-lines line{
  opacity:0; stroke-dasharray:220; stroke-dashoffset:220;
  transition:opacity .35s ease, stroke-dashoffset .7s cubic-bezier(.32,.72,0,1);
}
.order-metric-lines line:nth-child(1){ transition-delay:.05s; }
.order-metric-lines line:nth-child(2){ transition-delay:.11s; }
.order-metric-lines line:nth-child(3){ transition-delay:.17s; }
.order-metric-lines line:nth-child(4){ transition-delay:.23s; }
.order-metric-lines line:nth-child(5){ transition-delay:.29s; }
.order-metric-lines line:nth-child(6){ transition-delay:.35s; }
.order-metric-lines line:nth-child(7){ transition-delay:.41s; }
.order-metric-lines line:nth-child(8){ transition-delay:.47s; }
.order-metric-lines line:nth-child(9){ transition-delay:.53s; }
.order-demo[data-slide="3"] .order-metric-lines line{ opacity:1; stroke-dashoffset:0; }

.order-dark{ position:relative; margin-top:56px; border-radius:clamp(24px,3.83vw,46px); overflow:hidden; background:#000; }
.order-dark-scene{ position:absolute; left:0; top:0; width:1200px; height:418px; transform-origin:0 0; color:#fff; }
.odk-graph{ position:absolute; inset:0; width:1200px; height:418px; overflow:visible; }
.odk-line{ stroke-dasharray:1700; stroke-dashoffset:1700; transition:stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1); }
.odk-area{ opacity:0; transition:opacity 1.2s ease .6s; }
.odk-drops line{ opacity:0; transition:opacity .6s ease 1.2s; }
.odk-dot{ opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .4s ease 1.3s; }
.order-dark.is-live .odk-line{ stroke-dashoffset:0; }
.order-dark.is-live .odk-area, .order-dark.is-live .odk-drops line, .order-dark.is-live .odk-dot{ opacity:1; }
.order-dark-copy{ position:absolute; left:69px; top:64px; width:473px; height:300px; display:flex; flex-direction:column; justify-content:space-between; }
.odk-top{ display:flex; flex-direction:column; gap:40px; align-items:flex-start; }
.odk-lines{ display:flex; flex-direction:column; gap:18px; }
.order-tag{
  display:inline-flex; align-items:center; height:41px; border:1px solid rgba(255,255,255,.77); border-radius:10px;
  padding:10px 20px; font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:13px; letter-spacing:-0.13px; color:#52E68F;
}
.order-eq{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:24px; letter-spacing:-0.24px; color:#fff; white-space:nowrap; }
.odk-num{ display:inline-block; font-variant-numeric:tabular-nums; }
.order-eq, .order-result{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.order-dark.is-live .order-eq{ opacity:1; transform:none; }
.order-dark.is-live .order-result{ opacity:1; transform:none; transition-delay:.9s; }
.order-x{ color:#686868; }
.order-result{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:48px; line-height:1.2; letter-spacing:-0.48px; color:#fff; white-space:nowrap; }
.order-big{ color:#6CDEA2; font-variant-numeric:tabular-nums; }
.order-foot{ font-family:"Inter",sans-serif; font-size:16px; letter-spacing:-0.16px; color:#fff; opacity:.4; margin:0; }
.order-tip{
  position:absolute; left:934px; top:89px; width:145px; height:88px; background:#F5F8F4; border-radius:11px;
  padding:18px 21px; display:flex; flex-direction:column; gap:4px;
  opacity:0; transform:translateY(10px); transition:opacity .5s ease 1.6s, transform .6s cubic-bezier(.16,1,.3,1) 1.6s;
}
.order-dark.is-live .order-tip{ opacity:1; transform:none; }
.order-tip-num{ font-family:"Inter",sans-serif; font-weight:600; font-size:24px; letter-spacing:-0.24px; color:#47C77B; font-variant-numeric:tabular-nums; }
.order-tip-lbl{ font-family:"Inter",sans-serif; font-size:16px; color:#000; opacity:.53; }

@media (max-width:860px){
  .order-bar{ padding:16px 20px; flex-wrap:wrap; }
  .order-bar-title{ font-size:14px; }
  .order-replay{ font-size:15px; }
}

/* ---- Statement panel (Figma: 1536 x 465, radius 58, 32px side margins) ---- */
.stmt{ background:#fff; padding:clamp(72px,9.9vw,158px) clamp(16px,2vw,32px) 0; }
.stmt-panel{
  background:#F5F8F4; border-radius:clamp(28px,3.625vw,58px);
  min-height:clamp(240px,29vw,465px); display:flex; align-items:center; justify-content:center;
  padding:clamp(48px,6.8vw,109px) clamp(20px,3vw,48px);
}
.stmt-h2{
  font-family:"42dot Sans","Inter",ui-sans-serif,sans-serif; font-weight:500;
  font-size:clamp(34px,4.75vw,76px); line-height:1.08; letter-spacing:-0.01em;
  color:#000; text-align:center; max-width:1199px; margin:0; text-wrap:balance;
}
.stmt-h2 .green{ color:#47C77B; }

/* ---- Solution (Figma: 1200 wide at 200, head 915 wide, 2x2 cards 579.5 x 339) ---- */
.sol{ background:#fff; padding:clamp(80px,10.6vw,170px) clamp(20px,12.5vw,200px) 0; }
.sol-wrap{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(48px,5.1vw,82px); }
.sol-head{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; max-width:915px; }
.sol-tag{
  display:inline-flex; align-items:center; height:41px; border:1px solid rgba(34,34,34,.1); border-radius:10px;
  padding:10px 20px; font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:13px; letter-spacing:-0.13px; color:#47C77B;
}
.sol-h2{
  font-family:"42dot Sans","Inter",ui-sans-serif,sans-serif; font-weight:500;
  font-size:clamp(30px,3.75vw,60px); line-height:1.1; letter-spacing:-0.01em; color:#000; margin:0; text-wrap:balance;
}
.sol-sub{ font-family:"Inter",sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:#000; margin:0; }
.sol-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:37px 41px; }
@media (max-width:820px){ .sol-grid{ grid-template-columns:1fr; gap:24px; } }
.sol-card{
  background:#F5F8F4; border-radius:24px; min-height:339px; padding:42px 50px;
  display:flex; flex-direction:column; justify-content:center; gap:18px;
}
.sol-card > *{ max-width:479px; }
.sol-icon{ width:106px; height:106px; border-radius:11px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.sol-icon svg{ display:block; }
/* two stacked copies (dark / green gradient) crossfade quickly on hover */
.sol-icon{ position:relative; }
.sol-icon svg{ transition:opacity .22s ease; }
.sol-ic-green{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:0; }
.sol-card:hover .sol-ic-dark{ opacity:0; }
.sol-card:hover .sol-ic-green{ opacity:1; }
.sol-card h3{ font-family:"42dot Sans","Inter",sans-serif; font-weight:600; font-size:24px; line-height:33px; letter-spacing:-0.24px; color:#000; margin:0; }
.sol-card p{ font-family:"Inter",sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:#0A0F0D; opacity:.88; margin:0; }
@media (max-width:600px){ .sol-card{ padding:32px 28px; min-height:0; } }

/* ---- Blind spots (Figma: 1200 x 533 at 200, radius 47) ---- */
.blind{ background:#fff; padding:clamp(80px,13.2vw,211px) clamp(20px,12.5vw,200px) 0; }
.blind-panel{
  max-width:1200px; margin:0 auto; border-radius:clamp(24px,2.94vw,47px);
  background:linear-gradient(238.4deg, #52E68F 66.5%, #E7F67B 120.3%);
  display:grid; grid-template-columns:430px 533px; justify-content:space-between; align-items:center;
  padding:71px 46px 71px 69px; min-height:533px;
}
.blind-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.blind-tag{
  display:inline-flex; align-items:center; height:41px; border:1px solid #000; border-radius:10px; padding:10px 20px;
  font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:13px; letter-spacing:-0.13px; color:#000;
}
.blind-h2{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(30px,3.75vw,60px); line-height:1.1; letter-spacing:-0.01em; color:#000; margin:0; }
.blind-sub{ font-family:"Inter",sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:#000; margin:0; }
@media (max-width:1100px){ .blind-panel{ grid-template-columns:1fr; gap:40px; padding:48px 32px; } }

/* ---- Built by Pathfinder (Figma: 1536 x 862, radius 58, 32px margins) ---- */
.built{ background:#fff; padding:clamp(80px,11.9vw,191px) clamp(16px,2vw,32px) clamp(64px,9.6vw,154px); }
.built-panel{
  background:#F5F8F4; border-radius:clamp(28px,3.625vw,58px);
  /* panel stretches edge to edge (32px gutters); the 533 + 88 + 579 = 1200 content block stays centred */
  display:grid; grid-template-columns:533px 579px; justify-content:center; align-items:center;
  padding:134px clamp(20px,10.9vw,168px); column-gap:88px;
}
.built-diagram{ position:relative; }
.built-scene{ position:absolute; left:0; top:0; width:533px; height:518px; transform-origin:0 0; }
.bi-row{ position:absolute; left:7px; top:0; display:flex; gap:14px; }
.bi-circle{
  width:63.2px; height:62.6px; border-radius:50%; background:#fff; border:1px solid #EDEDED;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i) * .07s);
}
.bi-circle.is-meta{ border:0; }
.bi-circle.is-meta svg{ width:63.2px; height:62.6px; }
.bi-circle svg, .bi-circle img{ display:block; }
.bi-bing{ position:relative; width:22.9px; height:32.25px; overflow:hidden; display:block; }
.bi-bing img{ position:absolute; width:211.64%; height:150.38%; left:-64.02%; top:-25.19%; max-width:none; }
.bi-klav{ position:relative; width:35.8px; height:30px; overflow:hidden; display:block; }
.bi-klav img{ position:absolute; width:140.54%; height:167.74%; left:-20.27%; top:-32.26%; max-width:none; }
.built-diagram.is-live .bi-circle{ opacity:1; transform:none; }
.bi-lines{ position:absolute; inset:0; width:533px; height:518px; overflow:visible; z-index:2; pointer-events:none; }
.bi-line{ stroke-dasharray:2 2; }
.bi-mask{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) .45s; }
.bi-mask-3{ transition-delay:1.5s; transition-duration:.6s; }
.built-diagram.is-live .bi-mask{ stroke-dashoffset:0; }
.bi-dot{ opacity:0; transform:scale(.4); transform-box:fill-box; transform-origin:center; transition:opacity .35s ease 1.35s, transform .5s cubic-bezier(.16,1,.3,1) 1.35s; }
.bi-dot-2{ transition-delay:1.5s; }
/* card outline traces around as the flow reaches each card, then settles to a soft green edge */
.bi-stroke{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.bi-stroke path{ stroke:#47C77B; stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1), stroke .6s ease; }
.built-diagram.is-live .bi-stroke path{ stroke-dashoffset:0; }
.built-diagram.is-live .bi-stroke-1 path{ transition-delay:1.35s, 3s; stroke:#A6CBA9; }
.bi-card{ overflow:visible; }
/* subtle pop once the outline finishes tracing (stroke runs 1.35s -> ~2.95s) */
@keyframes bi-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.025); } 100%{ transform:scale(1); } }
.built-diagram.is-live .bi-logo{ animation:bi-pop .6s cubic-bezier(.34,1.4,.64,1) 2.95s 1 none; }
@media (prefers-reduced-motion: reduce){ .built-diagram.is-live .bi-logo{ animation:none; } }
.built-diagram.is-live .bi-dot{ opacity:1; transform:scale(1); }
.bi-card{ position:absolute; background:#fff; border:1px solid #EDEDED; border-radius:21px; opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.built-diagram.is-live .bi-card{ opacity:1; transform:none; }
.bi-logo{ left:0; top:150px; width:529px; height:122px; display:flex; align-items:center; justify-content:center; transition-delay:1.3s; }
.bi-report{ left:2px; top:330px; width:521px; height:188px; padding:27px 28px; display:flex; flex-direction:column; gap:17px; transition-delay:2s; }
.bi-report-head{ display:flex; align-items:center; gap:12px; }
.bi-doc{ width:36px; height:36px; border-radius:8px; background:#F5F8F4; display:flex; align-items:center; justify-content:center; flex:none; }
.bi-report-t{ font-family:"42dot Sans","Inter",sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.16px; color:#000; }
.bi-report-s{ font-family:"Inter",sans-serif; font-size:12px; letter-spacing:-0.12px; color:#133731; opacity:.2; margin-top:2px; }
.bi-tiles{ display:flex; gap:6px; }
.bi-tile{
  width:111.5px; height:80px; border-radius:8px; background:#F5F8F4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:10px; line-height:1.01; letter-spacing:-0.1px; color:#000; text-align:center; padding:0 14px;
}
.bi-tile-ic{ height:24px; display:flex; align-items:center; }
.built-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.built-tag{
  display:inline-flex; align-items:center; height:41px; border:1px solid rgba(34,34,34,.1); border-radius:10px; padding:10px 20px;
  font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:13px; letter-spacing:-0.13px; color:#47C77B;
}
.built-h2{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(30px,3.75vw,60px); line-height:1.1; letter-spacing:-0.01em; color:#000; margin:0; }
.built-sub{ font-family:"Inter",sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:#000; opacity:.4; margin:0; }
.built-cta{
  display:inline-flex; align-items:center; justify-content:center; width:201px; padding:12px 24px; border-radius:46px; text-decoration:none;
  background:linear-gradient(119.5deg, #52E68F 76.2%, #E7F67B 114.4%);
  font-family:"42dot Sans","Inter",sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.16px; color:#000;
}
@media (max-width:1300px){ .built-panel{ grid-template-columns:1fr; padding:64px 40px; row-gap:56px; } .built-diagram{ max-width:533px; margin-top:0; } }
@media (max-width:600px){ .built-panel{ padding:40px 20px; } }

/* ---- Testimonial (Figma: 1600 x 855 black, radius 58, copy 1200 at 200/156) ---- */
.testi{ background:#fff; padding:0; }
.testi-panel{ background:#000; border-radius:clamp(28px,3.625vw,58px); padding:clamp(72px,9.75vw,156px) clamp(20px,12.5vw,200px) clamp(72px,10vw,160px); }
.testi-inner{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:56px; }
.testi-inner > svg{ width:clamp(56px,6vw,96px); height:auto; }
.tq{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(28px,4.75vw,60px); line-height:1.35; letter-spacing:-0.01em; margin:0; color:#393838; }
.tq-w{ color:#393838; transition:color .35s ease; }
.tq-w.is-lit{ color:#fff; }
.tq-by{ font-family:"Inter",sans-serif; font-weight:500; font-size:16px; line-height:31px; letter-spacing:-0.16px; color:#fff; }

/* ---- Client outcomes (Figma: 1200 at 200, head 981 centred, card 1200 x 503 + tabs 134) ---- */
.res{ background:#fff; padding:clamp(80px,11.9vw,190px) clamp(20px,12.5vw,200px) 0; }
.res-wrap{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:clamp(28px,3vw,44px); }
.res-head{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; max-width:981px; margin:0 auto; }
.res-tag{
  display:inline-flex; align-items:center; height:41px; border:1px solid rgba(34,34,34,.1); border-radius:10px; padding:10px 20px;
  font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:13px; letter-spacing:-0.13px; color:#47C77B;
}
.res-h2{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(30px,3.75vw,60px); line-height:1.1; letter-spacing:-0.01em; color:#000; margin:0; text-wrap:balance; }
.res-subhead{ font-family:"Inter",sans-serif; font-size:16px; line-height:24px; color:#3d4a41; margin:0; white-space:nowrap; }
@media (max-width:700px){ .res-subhead{ white-space:normal; max-width:52ch; } }
/* cards stay put; switching tabs crossfades photo/kpi content in place */
.res-cases{ position:relative; min-height:clamp(420px,32vw,520px); }
.res-card{ position:absolute; inset:0; display:grid; grid-template-columns:1.05fr 1fr; border-radius:30px; overflow:hidden; opacity:0; pointer-events:none; transition:opacity 1s cubic-bezier(.4,0,.2,1); }
.res-card.is-on{ opacity:1; pointer-events:auto; }
.res-left{ position:relative; z-index:0; overflow:hidden; padding:clamp(28px,3.4vw,48px); display:flex; flex-direction:column; gap:18px; min-width:0; background:#F5F8F4; }
.res-left.on-photo::after{
  content:""; position:absolute; inset:-6%; z-index:-1;
  background-image:inherit; background-size:cover; background-position:center;
  transform:scale(1); transform-origin:center;
  transition:transform 1.4s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}
.res-left.on-photo:hover::after{ transform:scale(1.09); }
@media (prefers-reduced-motion: reduce){ .res-left.on-photo:hover::after{ transform:none; } }
.res-left.on-photo::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(0,0,0,.95) 30%, rgba(0,0,0,.66) 58%, rgba(0,0,0,.18) 100%), linear-gradient(0deg, rgba(0,0,0,.4), rgba(0,0,0,0) 42%);
}
.res-left > *{ position:relative; z-index:1; }
.res-left.on-photo .res-ctag{ color:#fff; border-color:rgba(255,255,255,.35); }
.res-left.on-photo .res-cname{ color:#fff; }
.res-left.on-photo .res-cchan{ color:rgba(255,255,255,.72); }
.res-left.on-photo .res-chero-l{ color:rgba(255,255,255,.85); }
.res-ctag{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:"42dot Sans","Inter",sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#47C77B; border:1px solid rgba(34,34,34,.14); border-radius:999px; padding:6px 14px; }
.res-cname{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(22px,2.4vw,28px); letter-spacing:-0.01em; margin:0; color:#000; }
.res-cchan{ font-family:"Inter",sans-serif; font-size:13px; color:#5b6a62; margin:-8px 0 0; }
.res-chero{ margin-top:auto; }
.res-chero-n{ display:block; font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(44px,5vw,64px); line-height:1; letter-spacing:-0.03em; color:#133731; font-variant-numeric:proportional-nums; }
.res-left.on-photo .res-chero-n{
  background:linear-gradient(120deg, #52E68F, #E7F67B 70%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.res-chero-l{ display:block; margin-top:10px; font-family:"Inter",sans-serif; font-size:16px; line-height:1.5; color:#3d4a41; max-width:38ch; }
.res-right{ position:relative; overflow:hidden; background:linear-gradient(121.6deg, #52E68F 8%, #E7F67B 120%); color:#000; padding:clamp(28px,3.4vw,48px); display:flex; flex-direction:column; justify-content:center; gap:24px; }
.res-icon{ width:32px; height:32px; opacity:.85; }
.res-kpis{ display:flex; flex-direction:column; gap:20px; }
.res-kpi + .res-kpi{ padding-top:20px; border-top:1px solid rgba(0,0,0,.14); }
.res-kpi-n{ display:block; font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(28px,2.8vw,36px); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.res-kpi-l{ display:block; margin-top:5px; font-family:"Inter",sans-serif; font-size:16px; line-height:1.45; opacity:.78; max-width:34ch; }
.res-tabs{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:calc(clamp(28px,3vw,44px) * -1 + 33px); }
.res-tabs::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2.2px; background:#DADADA; }
.res-tab-indicator{
  position:absolute; top:0; height:2.2px; background:#47C77B; left:0; width:0;
  transition:left .38s cubic-bezier(.16,1,.3,1), width .38s cubic-bezier(.16,1,.3,1);
  will-change:left, width;
}
@media (prefers-reduced-motion: reduce){ .res-tab-indicator{ transition:none; } }
.res-tab{ position:relative; height:104px; border:0; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.res-tab img{ display:block; max-width:220px; max-height:72px; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.72; transform:scale(1); transition:filter .3s, opacity .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.res-tab.is-on img{ filter:none; opacity:1; }
.res-tab:hover img{ filter:none; opacity:1; transform:scale(1.06); }
@media (prefers-reduced-motion: reduce){ .res-tab:hover img{ transform:none; } }
.res-tab:focus-visible{ outline:2px solid #47C77B; outline-offset:4px; }
.res-tab-brand{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:18px; letter-spacing:-0.01em; color:inherit; opacity:.72; filter:none; transition:opacity .3s, color .3s; }
.res-tab.is-on .res-tab-brand{ opacity:1; color:#133731; }
@media (max-width:900px){
  .res-cases{ height:auto; }
  .res-card{ position:static; grid-template-columns:1fr; height:auto; display:none; opacity:1; pointer-events:auto; border-radius:24px; }
  .res-card.is-on{ display:grid; }
  .res-left{ padding:28px; }
  .res-right{ padding:28px; }
  .res-tabs{ grid-template-columns:1fr; gap:0; }
  .res-tab{ height:90px; }
}

/* ---- Shared bits for the closing sections ---- */
.tag-green, .tag-black{
  display:inline-flex; align-items:center; height:41px; border-radius:10px; padding:10px 20px;
  font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:13px; letter-spacing:-0.13px;
}
.tag-green{ border:1px solid rgba(34,34,34,.1); color:#47C77B; }
.tag-black{ border:1px solid rgba(0,0,0,.77); color:#000; }
.h2-60{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(30px,3.75vw,60px); line-height:1.1; letter-spacing:-0.01em; color:#000; margin:0; }
.p-16{ font-family:"Inter",sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:#000; margin:0; }
.p-16.dim{ opacity:.4; }
.pill-cta{
  display:inline-flex; align-items:center; justify-content:center; width:201px; padding:12px 24px; border-radius:46px; border:0; text-decoration:none; cursor:pointer;
  background:linear-gradient(119.5deg, #52E68F 76.2%, #E7F67B 114.4%);
  font-family:"42dot Sans","Inter",sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.16px; color:#000;
}
.pill-cta:hover{ filter:brightness(1.04); }
.built-cta, .pill-cta{ --circle-color:#000000; --circle-text:var(--mint-mid); }
.pill-wide{ width:100%; }

/* ---- How it works (Figma: 1536 x 859, radius 58, copy 384 at 168/147, rail at 651, steps 649 at 719) ---- */
.how{ background:#fff; padding:clamp(24px,3vw,48px) clamp(16px,2vw,32px) 0; }
/* pull How It Works up into the empty band under the pinned Eligibility row (cards 512px + copy padding, centred in 100vh) */
/* pinned Eligibility row = 80px top + 512px cards; pull How It Works up to sit 32px (+ its own padding) under the cards */
@media (min-width:1001px){ .how{ margin-top:calc(-1 * max(0px, 100vh - 784px)); } }
/* pinned: the section is 3 screens tall; the panel sticks while the steps play through */
@media (min-width:1001px){
  .how{ height:calc(500vh + clamp(80px,11.1vw,178px)); }
  .how-pin{ position:sticky; top:0; height:100vh; display:flex; align-items:center; }
  .how-panel{ width:100%; max-height:calc(100vh - 48px); overflow:hidden; }
}
.how-panel{ background:#F5F8F4; border-radius:clamp(28px,3.625vw,58px); padding:clamp(64px,9.2vw,147px) clamp(20px,10.9vw,168px) clamp(64px,8.9vw,143px); }
.how-inner{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:384px 1fr; column-gap:clamp(40px,6.2vw,99px); align-items:start; }
.how-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.how-steps{ position:relative; padding-left:68px; display:flex; flex-direction:column; gap:44px; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.how-rail{ position:absolute; left:0; top:0; bottom:0; width:4px; background:#E5E5E5; }
.how-rail-on{ position:absolute; left:0; width:4px; background:linear-gradient(167.4deg, #52E68F 45.8%, #E7F67B 140%); transition:top .6s cubic-bezier(.16,1,.3,1), height .6s cubic-bezier(.16,1,.3,1); }
.how-step{ display:flex; flex-direction:column; gap:14px; max-width:649px; opacity:.2; transition:opacity .5s ease; }
.how-step.is-on{ opacity:1; }
.how-num{ font-family:"42dot Sans","Inter",sans-serif; font-weight:400; font-size:clamp(40px,3.75vw,60px); line-height:1.1; letter-spacing:-0.01em; color:#000; opacity:.2; }
.how-t{ font-family:"42dot Sans","Inter",sans-serif; font-weight:600; font-size:24px; line-height:33px; letter-spacing:-0.24px; background:linear-gradient(180deg,#000 0%,#001354 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.how-d{ font-family:"Inter",sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:#000; }
@media (max-width:1000px){ .how-inner{ grid-template-columns:1fr; row-gap:48px; } }

/* ---- Eligibility (Figma: copy 384 at 200, cards 717 x 512 from 683 overflowing right, gap 42) ---- */
.elig{ background:#fff; padding:0; }
@media (max-width:1000px){ .elig{ padding-top:clamp(40px,5vw,80px); } }
@media (max-width:1000px){ .elig{ overflow:hidden; } }
/* pinned horizontal scroll: the section sticks and the cards slide left as you scroll down */
@media (min-width:1001px){
  /* content sits 80px from the top of the pinned panel instead of floating in the middle of the viewport */
  .elig-pin{ position:sticky; top:0; height:100vh; display:flex; align-items:flex-start; padding-top:160px; overflow:hidden; }
  .elig-inner{ width:100%; }
  /* the whole row (copy + cards) slides left together, QClay style */
  .elig-inner{ will-change:transform; }
  .elig-track{ overflow:visible; padding-right:200px; } /* horizontal run ends with a fixed 200px right margin */
  .elig-track{ scroll-snap-type:none; }
}
.elig-inner{ display:grid; grid-template-columns:384px 1fr; column-gap:clamp(40px,6.2vw,99px); align-items:center; padding-left:clamp(20px,12.5vw,200px); }
.elig-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:28px; padding:48px 0; }
.elig-track{ display:flex; gap:42px; overflow:visible; scrollbar-width:none; padding-right:clamp(20px,12.5vw,200px); }
.elig-track::-webkit-scrollbar{ display:none; }
.elig-card{ flex:none; width:717px; height:512px; border-radius:24px; background:#F5F8F4; padding:68px; display:flex; flex-direction:column; justify-content:center; gap:23px; scroll-snap-align:start; }
/* eligibility cards: same lift as the other cards; the number warms to green */
.elig-card{ transition:transform .5s cubic-bezier(.16,1,.3,1), background-color .4s ease; }
.elig-card > *{ transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease, color .4s ease; }
.elig-card:hover{ transform:translateY(-4px); background:#F5F8F4; }
.elig-card:hover > *{ transform:translateY(-3px); }
.elig-card:hover .elig-t{ transition-delay:.05s; }
.elig-card:hover .elig-num{ opacity:1; color:#47C77B; }
@media (prefers-reduced-motion: reduce){ .elig-card:hover, .elig-card:hover > *{ transform:none; } }
.elig-num{ font-family:"42dot Sans","Inter",sans-serif; font-weight:400; font-size:clamp(40px,3.75vw,60px); line-height:1.1; letter-spacing:-0.01em; color:#000; opacity:.2; }
.elig-t{ font-family:"42dot Sans","Inter",sans-serif; font-weight:500; font-size:clamp(30px,3.75vw,60px); line-height:1.1; letter-spacing:-0.01em; color:#000; max-width:581px; }
@media (max-width:1000px){
  .elig-inner{ grid-template-columns:1fr; padding-right:clamp(20px,12.5vw,200px); }
  .elig-track{ margin:0 calc(-1 * clamp(20px,12.5vw,200px)); padding:0 clamp(20px,12.5vw,200px); overflow-x:auto; scroll-snap-type:x mandatory; }
  .elig-card{ width:min(717px,82vw); height:auto; min-height:320px; padding:40px; }
}

/* ---- FAQ (Figma: 1200 at 200, head 915, items gap 20, pill radius 88 / open 17) ---- */
.faq{ background:#fff; padding:clamp(40px,5vw,80px) clamp(20px,12.5vw,200px) 0; }

.faq-inner{ max-width:1200px; margin:0 auto; display:flex; flex-direction:column; gap:54px; }
.faq-head{ max-width:915px; margin:0 auto; text-align:center; display:flex; flex-direction:column; gap:28px; }
.faq-list{ display:flex; flex-direction:column; gap:20px; }
.faq-item{ background:#F5F8F4; border-radius:88px; transition:border-radius .3s, background-color .3s ease; }
/* hover: question turns green, row tint deepens, chevron circle darkens */
.faq-q > span{ transition:color .3s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.faq-item:not(.is-open):hover{ background:#EEF7F1; }
.faq-item:hover .faq-q > span{ color:#47C77B; transform:translateX(4px); }
.faq-item:not(.is-open):hover .faq-ic-bg{ fill:#47C77B; }
.faq-item:not(.is-open):hover .faq-ic{ color:#fff; }
@media (prefers-reduced-motion: reduce){ .faq-item:hover .faq-q > span{ transform:none; } }
.faq-item.is-open{ border-radius:32px; }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 36px; border:0; background:none; cursor:pointer; text-align:left;
  font-family:"Inter",sans-serif; font-weight:500; font-size:clamp(18px,1.5vw,24px); letter-spacing:-0.24px; color:#000; }
.faq-q:focus-visible{ outline:2px solid #47C77B; outline-offset:4px; border-radius:88px; }
.faq-ic{ flex:none; width:38px; height:38px; color:#000; transition:color .3s ease; }
.faq-ic svg{ display:block; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.faq-ic-bg{ fill:#6CDEA2; transition:fill .3s; }
.faq-item.is-open .faq-ic svg{ transform:rotate(180deg); }
.faq-item.is-open .faq-ic-bg{ fill:#000; }
.faq-item.is-open .faq-ic{ color:#fff; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1); }
.faq-a > p{ overflow:hidden; margin:0; padding:0 36px; max-width:1037px; font-family:"Inter",sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:#000; }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-item.is-open .faq-a > p{ padding-bottom:24px; }

/* ---- Apply + footer (Figma: black 1600 x 1225 top-rounded 58; form panel 1200 x 799 radius 47) ---- */
.apply{ background:#000; margin-top:clamp(100px,15.9vw,255px); border-radius:clamp(28px,3.625vw,58px) clamp(28px,3.625vw,58px) 0 0; padding:clamp(56px,7.56vw,121px) clamp(20px,12.5vw,200px) clamp(48px,6.7vw,107px); }
.apply-panel{ max-width:1200px; margin:0 auto; border-radius:clamp(24px,2.94vw,47px); background:linear-gradient(157.6deg, #52E68F 48.8%, #E7F67B 139.8%);
  display:grid; grid-template-columns:395px 572px; justify-content:space-between; align-items:start; padding:78px 70px 78px 81px; }
.apply-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; margin-top:52px; }
.apply-form{ background:#fff; border-radius:20px; padding:52px 40px; display:flex; flex-direction:column; gap:19px; }
.f-field{ display:flex; flex-direction:column; gap:8px; position:relative; }
.f-field > span{ font-family:"Inter",sans-serif; font-size:16px; line-height:24px; letter-spacing:-0.16px; color:#000; opacity:.4; }
.f-field input, .f-field select, .f-field textarea{ width:100%; border:1px solid #E5E5E5; border-radius:8px; padding:12px 24px; font-family:"Inter",sans-serif; font-size:16px; letter-spacing:-0.16px; color:#000; background:#fff; appearance:none; -webkit-appearance:none; }
.f-field textarea{ resize:vertical; min-height:76px; line-height:1.4; font-family:"Inter",sans-serif; }
.f-field input::placeholder{ color:#000; opacity:1; }
.f-field select:invalid{ color:#000; }
.f-field input, .f-field select{ transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.f-field > span{ transition:opacity .25s ease, color .25s ease; }
.f-field:hover > span, .f-field:focus-within > span{ opacity:1; }
.f-field:focus-within > span{ color:#2F9E5F; }
.f-field input:hover, .f-field select:hover, .f-field textarea:hover{ border-color:#A7E9C4; background:#F7FDF9; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{ outline:none; border-color:#47C77B; background:#fff; box-shadow:0 0 0 4px rgba(71,199,123,.18); }
.f-field input:focus::placeholder{ opacity:.35; }
.f-select > svg{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.f-select:hover > svg, .f-select:focus-within > svg{ transform:translateY(2px); }
.f-select select{ cursor:pointer; }
/* gradient pills float on hover the same way the hero buttons do */
.pill-cta, .built-cta{ transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, filter .3s ease; box-shadow:0 0 0 rgba(19,55,49,0); }
.pill-cta:hover, .built-cta:hover{ transform:translateY(-3px); filter:brightness(1.03); }
.pill-cta:active, .built-cta:active{ transform:translateY(0); }
.pill-cta:focus-visible, .built-cta:focus-visible{ outline:2px solid #133731; outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .pill-cta:hover, .built-cta:hover{ transform:none; } }
.apply-form{ transition:box-shadow .4s ease; }
.apply-form:hover{ box-shadow:0 24px 60px rgba(19,55,49,.12); }
@media (prefers-reduced-motion: reduce){ .pill-cta:hover{ transform:none; } .f-select:hover > svg{ transform:none; } }
.f-select > svg{ position:absolute; right:24px; bottom:19px; pointer-events:none; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.f-submit{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.f-note{ font-family:"Inter",sans-serif; font-size:12px; letter-spacing:-0.12px; color:#000; opacity:.4; text-align:center; }
.foot{ max-width:1200px; margin:clamp(64px,9.6vw,153px) auto 0; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:9px; }
.foot-mark{ width:45px; height:45px; border-radius:7px; background:linear-gradient(155.2deg, #52E68F 27.9%, #E7F67B 193.9%); display:flex; align-items:center; justify-content:center; }
.foot-word path{ fill:#fff; }
.foot-copy{ font-family:"Inter",sans-serif; font-size:14px; color:#BCBCBC; opacity:.8; text-align:center; }
.foot-social{ display:flex; gap:12px; }
.foot-social a{ width:34px; height:34px; border-radius:60px; background:#fff; display:flex; align-items:center; justify-content:center; }
.foot-social svg{ display:block; }
@media (max-width:1100px){ .apply-panel{ grid-template-columns:1fr; padding:40px 24px; row-gap:32px; } .apply-form{ padding:32px 24px; } }
@media (max-width:560px){ .f-row{ grid-template-columns:1fr; } .foot{ justify-content:center; text-align:center; } }


/* ---- Card hover: card lifts slightly and its content nudges a touch further, no shadow ---- */
.sol-card.rv, .wall-card.rv, .blind-card.rv{ transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); transition-delay:var(--rvd,0s); }
.sol-card.rv.is-in:hover, .wall-card.rv.is-in:hover, .blind-card.rv.is-in:hover{ transform:translateY(-4px); }
.sol-card > *, .wall-card > *, .blind-card > *{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.sol-card:hover > *, .wall-card:hover > *, .blind-card:hover > *{ transform:translateY(-3px); }
.sol-card:hover > :nth-child(2), .wall-card:hover > :nth-child(2), .blind-card:hover > :nth-child(2){ transition-delay:.04s; }
.sol-card:hover > :nth-child(3), .wall-card:hover > :nth-child(3), .blind-card:hover > :nth-child(3){ transition-delay:.08s; }
@media (prefers-reduced-motion: reduce){ .sol-card:hover, .wall-card:hover, .blind-card:hover, .sol-card:hover > *, .wall-card:hover > *, .blind-card:hover > *{ transform:none; } }

/* ---- Scroll reveal: elements slide up and fade in as they enter ---- */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); transition-delay:var(--rvd,0s); will-change:opacity,transform; }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; transition:none; } }
/* revealed CTAs still lift on hover (the .rv.is-in rule would otherwise pin their transform) */
.pill-cta.rv.is-in:hover, .built-cta.rv.is-in:hover, .btn.rv.is-in:hover{ transform:translateY(-3px); transition-delay:0s; }
.pill-cta.rv.is-in:active, .built-cta.rv.is-in:active, .btn.rv.is-in:active{ transform:translateY(0); }

/* word-by-word headline reveal (all section headlines) */
.wr .wr-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.14em; margin-bottom:-.14em; }
.wr .wr-i{ display:inline-block; transform:translateY(110%); transition:transform .85s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i) * .06s); }
.wr.is-in .wr-i{ transform:none; }
@media (prefers-reduced-motion: reduce){ .wr .wr-i{ transform:none; transition:none; } }
.wall-wrap{
  /* overlap the hero by the corner radius so the top corners cut into the real hero gradient */
  --wall-r:clamp(28px,3.625vw,58px);
  position:relative; z-index:2;
  --wall-overlap:clamp(60px,11.625vw,186px);
  margin-top:calc(-1 * var(--wall-overlap));
  /* transparent over the overlap so the hero gradient shows behind the top corners; mint below */
  background:linear-gradient(180deg, transparent var(--wall-overlap), #fff var(--wall-overlap));
  padding:0;
}
/* Figma: 1600 x 955 panel, head at 128 from top, cards at 418, 159 below, 200 side gutters */
.wall{
  position:relative;
  width:100%;
  margin:0;
  border-radius:var(--wall-r);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  padding:clamp(64px,8vw,128px) clamp(20px,12.5vw,200px) clamp(80px,9.94vw,159px);
}
.wall-tag{
  display:inline-flex; align-items:center; justify-content:center; height:41px;
  border:1px solid rgba(255,255,255,.77); border-radius:10px;
  padding:10px 20px;
  font-family:"42dot Sans","Inter",ui-sans-serif,sans-serif; font-weight:500;
  font-size:13px; letter-spacing:-0.13px; color:#52E68F;
}
.wall-head{display:flex; flex-direction:column; align-items:center; gap:17px; text-align:center; max-width:887px; margin:0 auto;}
.wall-h2{
  font-family:"42dot Sans","Inter",ui-sans-serif,sans-serif;
  font-weight:400; font-size:clamp(30px,3.75vw,60px); line-height:1.1;
  letter-spacing:-0.01em; color:#fff; margin:0; text-wrap:balance;
}
.wall-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:44px;
  max-width:1200px; margin:clamp(48px,6.25vw,100px) auto 0;
}
@media (max-width:1100px){ .wall-grid{gap:24px;} }
@media (max-width:860px){ .wall-grid{grid-template-columns:1fr;} }
.wall-card{
  background:#fff; border-radius:24px; min-height:378px; padding:54px 44px 44px;
  display:flex; flex-direction:column; gap:18px;
}
.wall-icon{
  position:relative; width:108px; height:108px; border-radius:11px;
  background:#F5F8F4; flex:none;
}
.wall-icon svg{ position:absolute; display:block; }
/* hover: glyph goes green, accent badge goes black (two stacked layers crossfade) */
.wi-layer{ position:absolute; inset:0; transition:opacity .25s ease; }
.wi-green{ opacity:0; }
.wall-card:hover .wi-dark{ opacity:0; }
.wall-card:hover .wi-green{ opacity:1; }
.wall-card h3{
  font-family:"42dot Sans","Inter",ui-sans-serif,sans-serif;
  font-weight:600; font-size:24px; line-height:28px; letter-spacing:-0.24px;
  background:linear-gradient(180deg,#000 0%,#001354 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0;
}
.wall-card h3.solid{ background:none; -webkit-background-clip:initial; background-clip:initial; color:#133731; }
.wall-card p{
  font-family:"Inter"; font-weight:400; font-size:16px; line-height:22px;
  letter-spacing:-0.16px; color:#0A0F0D; opacity:.88; margin:0;
}

/* ===== THE SOLUTION ===== */
.solution-head{max-width:920px;}
.solution-head .tag{margin-bottom:28px;}
.solution-h2{
  font-weight:400; font-size:clamp(30px,5vw,60px); line-height:1.1;
  letter-spacing:-0.01em; color:var(--ink); margin:0 0 28px; text-wrap:balance;
}
.solution-sub{
  font-family:"Inter"; font-weight:400; font-size:16px; line-height:1.5;
  letter-spacing:-0.16px; color:var(--ink); margin:0; max-width:70ch;
}
.capability-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:40px 60px;
  margin:clamp(48px,7vw,72px) 0;
}
@media (max-width:760px){ .capability-grid{grid-template-columns:1fr;} }
.capability h3{
  font-weight:500; font-size:24px; line-height:1.375; letter-spacing:-0.01em;
  color:var(--ink-2); margin:0 0 18px;
}
.capability p{
  font-family:"Inter"; font-weight:400; font-size:16px; line-height:1.5;
  letter-spacing:-0.16px; color:var(--ink); margin:0;
}

.channel-panel{
  background:var(--ink); border-radius:28px;
  padding:clamp(32px,5vw,52px);
}
.channel-h3{
  font-weight:400; font-size:clamp(28px,4.4vw,48px); line-height:1.1;
  letter-spacing:-0.01em; color:#fff; margin:14px 0 0;
}
.channel-sub{
  font-family:"Inter"; font-weight:400; font-size:16px; line-height:1.5;
  letter-spacing:-0.16px; color:#fff; margin:14px 0 0; max-width:60ch;
}
.channel-rows{
  display:flex; flex-direction:column; gap:16px;
  margin-top:clamp(32px,5vw,44px);
}
.channel-row{
  background:#fff; border-radius:15px; padding:23px 25px;
  display:flex; flex-direction:column; gap:18px;
}
.channel-row h4{
  font-weight:500; font-size:24px; line-height:1.375; letter-spacing:-0.01em;
  color:var(--ink-2); margin:0;
}
.bar-row{display:flex; align-items:center; justify-content:space-between; gap:16px;}

.bar-row span{
  font-family:"Inter"; font-weight:400; font-size:16px; letter-spacing:-0.16px;
  color:var(--ink-2); flex:none;
}

/* Form submit status */
.f-status{ margin:12px 0 0; font-size:14px; line-height:20px; color:var(--ink); }
.f-status:empty{ display:none; }