/* ============================================================
   Need for Service — website
   Editorial White / Brand Yellow
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Fraunces:ital,opsz,wght@0,9..144,500;1,9..144,400;1,9..144,500&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* SURFACES — true white dominant, cool gray supports. */
  --ink-0:   #0b0d12;   /* deepest charcoal — text on yellow, selection */
  --ink-1:   #ffffff;   /* base bg — pure white */
  --ink-2:   #f5f6fa;   /* elevated surface — cool off-white */
  --ink-3:   #eceef5;   /* card surface */
  --ink-4:   #cbcee0;   /* borders/rules — palette light */
  --ink-5:   #8e8ea5;   /* muted/subtle — palette mid */

  /* TEXT — palette darks on light. */
  --bone:    #222330;   /* primary text — palette deep */
  --bone-2:  #45475b;   /* secondary text — palette dark */
  --bone-3:  #8e8ea5;   /* tertiary / meta — palette mid */

  --yellow:  #fdb913;   /* brand yellow — CTAs */
  --yellow-2:#e8a600;   /* hover/darker */
  --yellow-3:#9c6f00;   /* deepest — for text on light */

  --orange:  #3d4a6b;   /* brand accent — slate-blue (eyebrows, italics, decorations) */
  --orange-2:#2c3753;   /* hover/darker */
  --orange-3:#1f2842;   /* deepest — for text on light */

  --blue:    #1d4fc7;   /* darker UI blue for light bg */
  --blue-2:  #2f6df3;

  --green:   #1a8536;   /* success on light */
  --green-2: #4caf50;

  --rust:    #3d4a6b;   /* alias for accent */

  --paper:   #f5f6fa;
  --paper-2: #cbcee0;

  --maxw:    1240px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);

  /* Soft rounded — distinct from Tekmetric's hard chamfered cuts. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;

  /* Shadows tuned for light surfaces — cool tone */
  --shadow-1: 0 1px 2px rgba(61,74,107,.05), 0 8px 24px -10px rgba(61,74,107,.10);
  --shadow-2: 0 24px 50px -16px rgba(61,74,107,.16), 0 0 0 1px rgba(61,74,107,.05);
  --shadow-3: 0 32px 80px -24px rgba(61,74,107,.20), 0 0 0 1px rgba(61,74,107,.06);

  --grid-line: rgba(61,74,107,.055);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink-1);
  color:var(--bone);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--yellow);color:var(--ink-0)}

/* page-wide grid backdrop — workshop blueprint */
/* Crumpled paper texture — large fractal noise simulating folds & creases. */
body::before{
  content:"";
  position:fixed;inset:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.022' numOctaves='4' stitchTiles='stitch' seed='3' result='turb'/><feDiffuseLighting in='turb' lighting-color='white' surfaceScale='3' diffuseConstant='1'><feDistantLight azimuth='45' elevation='65'/></feDiffuseLighting></filter><rect width='100%25' height='100%25' filter='url(%23n)' fill='white'/></svg>");
  background-repeat: repeat;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:multiply;
  opacity:.55;
}
/* keep content above the grid */
.site-nav, main, section, footer, .container, header{position:relative;z-index:1}

/* ---------- Type ---------- */
.eyebrow{
  font-family:"JetBrains Mono",monospace;
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
/* Tekmetric-style tilde / squiggle accent before the eyebrow */
.eyebrow::before{
  content:"";
  width:28px;height:8px;
  background:none;
  border:0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none' stroke='%233d4a6b' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><path d='M0 4 L4 4 L7 1 L11 7 L15 1 L19 7 L22 4 L28 4'/></svg>");
  background-repeat:no-repeat;background-size:contain;background-position:left center;
  display:inline-block;
}

h1,h2,h3,h4{
  font-family:"Archivo Narrow","Archivo",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.018em;
  line-height:1.02;
  color:var(--bone);
  margin:0 0 .6em;
}
h1,h2{font-weight:800}
.display em, h1 em, h2 em{
  font-style:italic;
  font-family:"Fraunces",serif;
  font-weight:500;
  color:var(--bone);
}
.display{
  font-family:"Archivo Narrow","Archivo",sans-serif;
  font-weight:800;
  font-size:clamp(3rem, 6.8vw, 6.2rem);
  line-height:.95;
  letter-spacing:-.015em;
  text-transform:none;
}
.display em{
  font-style:normal;
  color:var(--orange);
  font-family:"Archivo",sans-serif;
  font-weight:800;
}
h2{font-size:clamp(1.9rem, 3.8vw, 3.1rem);letter-spacing:-.01em}
h3{font-size:clamp(1.25rem, 1.8vw, 1.5rem)}
h4{font-size:1.05rem;letter-spacing:0}

p{margin:0 0 1em;color:var(--bone-2)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--bone-2);max-width:52ch}
small,.meta{font-family:"JetBrains Mono",monospace;color:var(--bone-3);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative}
.container-wide{max-width:1400px;margin:0 auto;padding:0 var(--gutter)}

section{position:relative;padding:clamp(3rem,7vw,6.5rem) 0}
section + section{border-top:1px solid var(--ink-4)}

/* ---------- Nav ---------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid var(--ink-4);
}
.site-nav__inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1400px;margin:0 auto;padding:.9rem var(--gutter);
  gap:2rem;
}
.site-nav__brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0;color:var(--bone)}
.site-nav__brand img.site-nav__mark{
  height:52px;width:52px;
  /* Filter the yellow source PNG to a deep palette charcoal #222330.
     No transition — interpolating between two hue-rotate values causes a green flash. */
  filter: brightness(0) saturate(100%) invert(11%) sepia(13%) saturate(1011%) hue-rotate(202deg) brightness(96%) contrast(94%);
}
.site-nav__brand:hover .site-nav__mark{
  /* Snap to natural yellow PNG instantly */
  filter: none;
}
.site-nav__links{display:flex;gap:1.8rem;align-items:center}
.site-nav__links a{
  font-size:.9rem;color:var(--bone-2);letter-spacing:.01em;font-weight:500;
  transition:color .15s;
}
.site-nav__links a:hover{color:var(--bone)}
.site-nav__links a.is-active{color:var(--orange)}
.site-nav__cta{display:flex;align-items:center;gap:.6rem}

/* ---------- Features mega-menu ---------- */
.nav-dropdown{position:relative}
.nav-dropdown__trigger{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:inherit;font-size:.9rem;color:var(--bone-2);letter-spacing:.01em;font-weight:500;
  background:transparent;border:0;cursor:pointer;padding:0;
  transition:color .15s;
}
.nav-dropdown__trigger:hover,
.nav-dropdown__trigger[aria-expanded="true"]{color:var(--bone)}
.nav-dropdown__trigger.is-active{color:var(--orange)}
.nav-dropdown__trigger svg{
  transition:transform .2s ease;
  flex-shrink:0;
}
.nav-dropdown__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav-dropdown__menu{
  position:fixed;
  left:50%;transform:translateX(-50%) translateY(-8px);
  top:calc(var(--nav-h, 60px) + 8px);
  width:min(960px, calc(100vw - 2rem));
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--ink-4);
  border-radius:var(--r-md);
  box-shadow: var(--shadow-3);
  padding:1.5rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:70;
}
.nav-dropdown.is-open .nav-dropdown__menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.4rem;
}
.nav-feature{
  display:flex;gap:.85rem;align-items:flex-start;
  padding:.85rem .9rem;
  border-radius: var(--r-sm);
  border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
.nav-feature:hover{
  background:var(--ink-2);
  border-color:var(--ink-4);
}
.nav-feature__icon{
  width:36px;height:36px;flex-shrink:0;
  border-radius: var(--r-sm);
  background:rgba(61,74,107,.10);
  border:1px solid rgba(61,74,107,.30);
  display:flex;align-items:center;justify-content:center;
  color:var(--orange);
}
.nav-feature__body{flex:1;min-width:0}
.nav-feature__body strong{
  display:block;color:var(--bone);font-size:.92rem;font-weight:600;
  margin-bottom:.15rem;letter-spacing:-.005em;
}
.nav-feature__body span{
  color:var(--bone-3);font-size:.8rem;line-height:1.4;display:block;
}
.nav-feature--highlight{
  background:linear-gradient(135deg, rgba(253,185,19,.14), rgba(253,185,19,.04));
  border-color:rgba(253,185,19,.40);
  position:relative;
}
.nav-feature--highlight:hover{
  background:linear-gradient(135deg, rgba(253,185,19,.22), rgba(253,185,19,.06));
  border-color:rgba(253,185,19,.65);
}
.nav-feature--highlight .nav-feature__icon{
  background:var(--yellow);
  border:0;
  color:#1a1308;
}
.nav-feature__badge{
  display:inline-block;
  font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#0f1216;
  background:var(--yellow);
  padding:.12rem .38rem;border-radius: var(--r-xs);
  margin-left:.4rem;vertical-align:middle;line-height:1;
}
.nav-dropdown__footer{
  margin-top:.85rem;padding-top:.85rem;
  border-top:1px solid var(--ink-4);
  display:flex;justify-content:flex-end;
}
.nav-dropdown__seeall{
  font-size:.85rem;color:var(--bone-2);font-weight:500;
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.45rem .75rem;border-radius: var(--r-sm);
  transition:color .15s, background .15s;
}
.nav-dropdown__seeall:hover{color:var(--orange);background:var(--ink-2)}

/* Mobile menu — full-screen sheet style. */
@media (max-width:900px){
  /* Stack nav items as a clean column with separators. */
  .site-nav__links a,
  .nav-dropdown__trigger{
    padding:.95rem 0;
    font-size:1.05rem;
    border-bottom:1px solid var(--ink-4);
    color:var(--bone);
  }
  .site-nav__links a:last-child{ border-bottom:0 }
  .nav-dropdown{width:100%}
  .nav-dropdown__trigger{
    width:100%;
    justify-content:space-between;
    background:transparent;
    color:var(--bone);
  }
  .nav-dropdown__menu{
    position:static;
    transform:none;
    left:auto;top:auto;
    width:100%;max-width:none;
    background:transparent;
    backdrop-filter:none;
    border:0;border-radius:0;
    box-shadow:none;
    padding:.25rem 0 .5rem;
    display:none;
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav-dropdown.is-open .nav-dropdown__menu{
    display:block;
    transform:none;
  }
  .nav-dropdown__grid{
    grid-template-columns:1fr;
    gap:.15rem;
  }
  .nav-dropdown__footer{
    justify-content:flex-start;
    padding-top:.6rem;
    margin-top:.6rem;
    border-top:0;
  }
}

/* Smooth scroll + give anchors breathing room under the sticky nav */
html{scroll-behavior:smooth}
.feat[id], section[id]{scroll-margin-top:90px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
.nav-login{
  color:var(--bone-2);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.01em;
  padding:.55rem .85rem;
  border-radius:var(--r-sm);
  transition:color .15s, background .15s;
  white-space:nowrap;
}
.nav-login:hover{color:var(--bone);background:var(--ink-2)}
.nav-burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;border:1px solid var(--ink-4);border-radius:var(--r-sm);background:transparent}
@media (max-width:560px){
  .nav-login{display:none}
}
.nav-phone{
  font-family:"JetBrains Mono",monospace;color:var(--bone-3);
  font-size:.8rem;letter-spacing:.05em;
}
.nav-burger span{display:block;width:18px;height:2px;background:var(--bone);box-shadow:0 -5px 0 var(--bone),0 5px 0 var(--bone)}

@media (max-width:900px){
  .site-nav__links, .nav-phone{display:none}
  .nav-burger{display:flex}
  .site-nav__brand img.site-nav__mark{height:42px;width:42px}
  .site-nav__inner{padding:.7rem var(--gutter);gap:.75rem}
  .site-nav__cta .btn{padding:.65rem .95rem;font-size:.82rem}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.6rem;
  font-family:"Inter","Archivo",sans-serif;
  font-weight:600;font-size:.95rem;
  letter-spacing:-.005em;
  /* Subtle rounded corners on all sides — small uniform radius. */
  border-radius: 7px;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
  border:1px solid transparent;
  white-space:nowrap;
  position:relative;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn:active{transform:translateY(1px)}
.btn--primary{
  background:var(--yellow);
  color:#1a1308;
}
.btn--primary:hover{background:var(--yellow-2)}
.btn--accent{
  background:var(--orange);
  color:#fff;
}
.btn--accent:hover{background:var(--orange-2)}
.btn--ghost{
  background:#fff;
  color:var(--bone);
  border:1px solid var(--ink-4);
}
.btn--ghost:hover{background:var(--ink-2);border-color:var(--bone-2)}
.btn--dark{
  background:var(--bone);
  color:#fff;
}
.btn--dark:hover{background:#0b0d12}
.btn--lg{padding:1rem 1.8rem;font-size:1rem}
.btn__arrow{
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .18s;
  color:inherit;
}
.btn:hover .btn__arrow{transform:translateX(2px)}

/* ---------- Tags / chips ---------- */
.tag{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:"JetBrains Mono",monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;
  padding:.32rem .65rem;
  border-radius: var(--r-xs);
  background:rgba(61,74,107,.10);
  color:var(--orange-3);
  border:1px solid rgba(61,74,107,.36);
}
.tag--yellow{background:rgba(253,185,19,.14);color:var(--yellow-3);border-color:rgba(253,185,19,.42)}
.tag--blue{background:rgba(29,79,199,.10);color:var(--blue);border-color:rgba(29,79,199,.32)}
.tag--bone{background:transparent;color:var(--bone-2);border-color:var(--ink-4)}

/* ---------- Decorative elements ---------- */
.grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 25%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 25%, transparent 70%);
}
.hairline{height:1px;background:var(--ink-4);margin:2rem 0}
.corner-tick{
  position:absolute;width:14px;height:14px;
  border:1px solid var(--orange);
}
.corner-tick--tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.corner-tick--tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.corner-tick--bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.corner-tick--br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- Device mockups ---------- */
.mockup{
  position:relative;
  border-radius: var(--r-md);
  background: #fff;
  padding:8px;
  box-shadow: var(--shadow-2);
  border:1px solid var(--ink-4);
}
.mockup::before{display:none}
.mockup img{
  width:100%;
  border-radius: var(--r-sm);
  display:block;
  background:#fff;
}
.mockup--laptop{
  position:relative;
  padding:8px;
  border-radius: var(--r-md);
}
.mockup--laptop::after{display:none}
.mockup--laptop::before{
  content:"";display:block;height:0;margin:0;
}

/* Tablet frame */
.mockup--tablet{
  border-radius: var(--r-md);
  padding:14px;
  background:#fff;
  border:1px solid var(--ink-4);
  max-width:520px;
  box-shadow: var(--shadow-2);
}
.mockup--tablet::before{display:none}
.mockup--tablet img{border-radius: var(--r-sm)}
.mockup--tablet::after{display:none}

/* Browser-style frame — sharp editorial */
.frame{
  position:relative;
  background:#fff;
  border-radius: var(--r-md);
  padding:0;
  box-shadow: var(--shadow-2);
  border:1px solid var(--ink-4);
  overflow:hidden;
}
.frame__bar{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .85rem;
  background:var(--ink-2);
  border-bottom:1px solid var(--ink-4);
}
.frame__dots{display:flex;gap:.35rem}
.frame__dots span{width:10px;height:10px;border-radius:50%;background:#cdc6b3}
.frame__dots span:nth-child(1){background:#e07b6a}
.frame__dots span:nth-child(2){background:#e7b85a}
.frame__dots span:nth-child(3){background:#78b064}
.frame__url{
  flex:1;background:#fff;border-radius: 999px;padding:.32rem .85rem;
  font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--bone-3);
  border:1px solid var(--ink-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.frame img{display:block;width:100%;background:#fff}

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border:1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding:1.6rem;
  transition:border-color .18s, transform .18s, box-shadow .18s;
  position:relative;
  box-shadow: var(--shadow-1);
}
.card:hover{
  border-color:var(--orange);
  box-shadow: 0 1px 2px rgba(61,74,107,.05), 0 14px 36px -14px rgba(61,74,107,.18);
}
.card h3{margin-bottom:.35rem}
.card p{color:var(--bone-2);font-size:.95rem;margin:0}
.card__icon{
  width:42px;height:42px;border-radius: var(--r-sm);
  background:var(--yellow);
  border:0;
  display:flex;align-items:center;justify-content:center;
  color:#1a1308;
  margin-bottom:1rem;
}
.card__icon--accent{background:var(--orange);color:#fff}
.card__num{
  position:absolute;top:1.2rem;right:1.6rem;
  font-family:"JetBrains Mono",monospace;color:var(--ink-5);font-size:.72rem;letter-spacing:.1em;
}

/* ---------- Footer ---------- */
.site-foot{
  background:#fff;
  padding:4rem 0 2.2rem;
  border-top:1px solid var(--ink-4);
  position:relative;
  overflow:hidden;
}
.site-foot__grid{
  display:grid;grid-template-columns: 1.4fr repeat(3,1fr);gap:2rem;
}
.site-foot h5{
  font-family:"JetBrains Mono",monospace;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--bone-3);font-weight:600;
  margin:0 0 1rem;
}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.6rem}
.site-foot a{color:var(--bone-2);font-size:.95rem;transition:color .15s}
.site-foot a:hover{color:var(--orange)}
.site-foot__brand img{height:34px;margin-bottom:1rem}
.site-foot__brand p{max-width:30ch;font-size:.95rem;color:var(--bone-2)}
.site-foot__social{display:flex;gap:.6rem;margin-top:1.2rem}
.site-foot__social a{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink-4);
  border-radius:8px;
  color:var(--bone-2);
  background:#fff;
  transition:color .15s, border-color .15s, background .15s, transform .15s;
}
.site-foot__social a:hover{
  color:var(--orange);
  border-color:var(--orange);
  transform:translateY(-1px);
}
.site-foot__bottom{
  border-top:1px solid var(--ink-4);
  margin-top:3rem;padding-top:1.8rem;
  display:flex;justify-content:space-between;align-items:center;
  font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--bone-3);letter-spacing:.12em;
  flex-wrap:wrap;gap:1rem;
}
.site-foot__stamp{font-size:.7rem;letter-spacing:.28em;color:var(--ink-5);text-transform:uppercase}

@media (max-width:800px){
  .site-foot__grid{grid-template-columns:1fr 1fr;gap:2rem}
  .site-foot__brand{grid-column:1/-1}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: clamp(3.5rem,8vw,7rem) 0 clamp(3rem,6vw,5.5rem);
  overflow:hidden;
  background:transparent;
  border-bottom:1px solid var(--ink-4);
}
.hero__illus{
  position:absolute;right:-4%;bottom:-6%;width:70%;max-width:1000px;
  opacity:.18; filter:grayscale(1) contrast(1.1);
  pointer-events:none; z-index:0;
  mix-blend-mode:multiply;
}
.hero .container{position:relative;z-index:2}
.hero__grid{
  display:grid;
  grid-template-columns: .85fr 1.5fr;
  gap:clamp(1.25rem,3vw,3rem);
  align-items:center;
}
.hero__copy .eyebrow{margin-bottom:1.4rem}
.hero__copy h1{
  margin-bottom:1.3rem;
  font-size:clamp(2.6rem,5.2vw,4.8rem);
  word-spacing:-.02em;
}
@media (max-width:640px){
  .hero__copy h1{ font-size:2.4rem; line-height:1.02; }
}
.hero__bullets{
  list-style:none;padding:0;margin:1.5rem 0 2rem;
  display:grid;gap:.55rem;
}
.hero__bullets li{
  display:flex;align-items:flex-start;gap:.7rem;color:var(--bone-2);
  font-size:.98rem;
}
.hero__bullets li::before{
  content:"";flex-shrink:0;width:8px;height:8px;border-radius:2px;
  background:var(--orange);
  margin-top:9px;
  box-shadow:0 0 0 4px rgba(61,74,107,.18);
  transform:rotate(45deg);
}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero__trust{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--ink-4);
  display:flex;gap:2rem;flex-wrap:wrap;color:var(--bone-3);font-size:.82rem;
  font-family:"JetBrains Mono",monospace;letter-spacing:.08em;
}
.hero__trust strong{color:var(--bone);font-size:1.4rem;font-family:"Archivo Narrow",sans-serif;display:block;margin-bottom:.1rem;letter-spacing:-.01em}

.hero__mock{
  position:relative;
  transform: perspective(2400px) rotateY(-5deg) rotateX(1.5deg) scale(1.08);
  transform-origin: center center;
}
/* Larger breakpoints only: nudge the mockup right and scale it up so it
   feels bigger and more immersive on wide viewports — without clipping the
   floating badges. */
@media (min-width: 1200px){
  .hero__mock{
    margin-right: calc(-1 * var(--gutter));
    transform: perspective(2400px) rotateY(-5deg) rotateX(1.5deg) scale(1.14);
    transform-origin: center center;
  }
}
@media (min-width: 1500px){
  .hero__mock{
    margin-right: calc(-1 * var(--gutter) - 1vw);
    transform: perspective(2400px) rotateY(-5deg) rotateX(1.5deg) scale(1.18);
  }
}
.hero__mock .frame{transform:none}
.hero__badge{
  position:absolute; background:#fff; border:1px solid var(--ink-4);
  padding:.7rem .9rem; border-radius: var(--r-sm);
  display:flex;align-items:center;gap:.7rem;
  box-shadow: var(--shadow-2);
  z-index:3;
}
.hero__badge--tl{top:-20px;left:-20px;transform:rotate(-2deg)}
.hero__badge--br{bottom:-18px;right:-16px}
.hero__badge__icon{
  width:32px;height:32px;border-radius: var(--r-sm);
  background:var(--yellow);
  color:#1a1308;
  border:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.hero__badge b{font-size:.82rem;color:var(--bone);display:block;font-weight:700}
.hero__badge span{font-size:.72rem;color:var(--bone-3);font-family:"JetBrains Mono",monospace;letter-spacing:.08em}

@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero__mock{transform:none;margin-top:1rem}
}
@media (max-width:760px){
  .hero__badge--tl{display:none}
}

/* ---------- Logo strip ---------- */
.logos{
  padding:2.2rem 0;
  background:transparent;
  border-top:1px solid var(--ink-4);
  border-bottom:1px solid var(--ink-4);
}
.logos__inner{
  display:flex;align-items:center;gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap;justify-content:center;
}
.logos__label{
  font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-3);margin-right:1rem;
}
.logos__item{
  font-family:"Archivo Narrow",sans-serif;text-transform:uppercase;letter-spacing:.05em;
  color:var(--bone-2); font-weight:700; font-size:1.05rem;
  opacity:.65; transition:opacity .2s;
}
.logos__item:hover{opacity:1}

/* ---------- Feature rows (alternating) ---------- */
.feat{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap:clamp(2rem,6vw,5rem);
  align-items:center;
  padding:clamp(2rem,5vw,4.5rem) 0;
}
.feat + .feat{border-top:1px dashed var(--ink-4)}
.feat--reverse .feat__copy{order:2}
.feat__copy h2{margin-bottom:1rem}
.feat__copy .lead{margin-bottom:1.5rem}
.feat__list{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.55rem}
.feat__list li{
  display:flex;align-items:flex-start;gap:.65rem;font-size:.96rem;color:var(--bone-2);
}
.feat__list li svg{color:var(--orange);flex-shrink:0;margin-top:4px}

.feat__media{position:relative}
.feat__caption{
  position:absolute;bottom:-.3rem;left:0;right:0;text-align:center;
  font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.18em;
  color:var(--bone-3);text-transform:uppercase;
}

@media (max-width:900px){
  .feat{grid-template-columns:1fr}
  .feat--reverse .feat__copy{order:0}
}

/* ---------- Workflow story ---------- */
.story{
  position:relative;
  background:transparent;
}
.story::before{
  content:"";
  position:absolute;left:50%;top:7rem;bottom:7rem;width:1px;
  background: linear-gradient(180deg, transparent 0%, var(--ink-4) 12%, var(--ink-4) 88%, transparent 100%);
  pointer-events:none;
}
.story__row{border-top:0!important;position:relative;z-index:2}
.story__row + .story__row{margin-top:clamp(2rem,4vw,3rem)}
.story__step{
  font-family:"JetBrains Mono",monospace;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);
  font-weight:700;
  display:inline-flex;align-items:center;gap:.55rem;
  margin-bottom:1.1rem;
}
.story__step::before{
  content:"";width:26px;height:2px;background:var(--orange);
}
.story__title{
  font-family:"Archivo Narrow",sans-serif;
  font-weight:800;
  font-size:clamp(1.6rem, 2.6vw, 2.3rem);
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0 0 1rem;
  color:var(--bone);
}
.story__row p{font-size:1rem;line-height:1.6;color:var(--bone-2);margin:0 0 .85rem;max-width:52ch}
.story__kicker{
  color:var(--bone)!important;
  font-family:"Archivo Narrow",sans-serif;
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:-.005em;
  margin-top:.2rem!important;
  padding-top:.8rem;
  border-top:1px solid var(--ink-4);
}
@media (max-width:900px){
  .story::before{display:none}
}

/* ---------- Feature grid ---------- */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.featgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.featgrid{grid-template-columns:1fr}}

/* ---------- Section header ---------- */
.sec-head{max-width:760px;margin:0 0 3rem}
.sec-head h2{margin-bottom:.75rem}
.sec-head p{color:var(--bone-2)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .eyebrow::before{display:none}
.sec-head--center .eyebrow::after{
  content:"";width:28px;height:8px;margin-left:.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none' stroke='%233d4a6b' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><path d='M0 4 L4 4 L7 1 L11 7 L15 1 L19 7 L22 4 L28 4'/></svg>");
  background-repeat:no-repeat;background-size:contain;background-position:center;
}

/* ---------- Stats strip ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border:1px solid var(--ink-4);
  border-radius:var(--r-md);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow-1);
}
.stats__cell{
  padding:1.8rem;
  border-right:1px solid var(--ink-4);
  position:relative;
}
.stats__cell:last-child{border-right:0}
.stats__num{
  font-family:"Archivo Narrow",sans-serif;
  font-weight:800;
  font-size:clamp(2rem,3.5vw,2.8rem);
  letter-spacing:-.02em;
  color:var(--bone);
  line-height:1;
  margin-bottom:.4rem;
}
.stats__num em{color:var(--orange);font-style:normal}
.stats__lbl{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-3)}
@media (max-width:800px){
  .stats{grid-template-columns:1fr 1fr}
  .stats__cell{border-right:0;border-bottom:1px solid var(--ink-4)}
  .stats__cell:nth-child(odd){border-right:1px solid var(--ink-4)}
  .stats__cell:nth-last-child(-n+2){border-bottom:0}
}

/* ---------- Testimonials ---------- */
.quote{
  background:#fff;
  border:1px solid var(--ink-4);
  border-radius:var(--r-md);
  padding:1.8rem;
  position:relative;
  display:flex;flex-direction:column;gap:1rem;
  height:100%;
  box-shadow: var(--shadow-1);
}
.quote__mark{
  font-family:"Fraunces",serif;color:var(--orange);
  font-size:4.5rem;line-height:.7;
  font-style:italic;font-weight:500;
  margin-top:-.5rem;
}
.quote__body{color:var(--bone);font-size:1.02rem;line-height:1.55;flex:1}
.quote__body strong{color:var(--orange-3);font-weight:700}
.quote__meta{
  display:flex;align-items:center;gap:.8rem;padding-top:1rem;border-top:1px solid var(--ink-4);
}
.quote__avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--ink-3);
  color:var(--orange-3);
  display:flex;align-items:center;justify-content:center;
  font-family:"Archivo Narrow",sans-serif;font-weight:700;font-size:1.1rem;
  border:1px solid var(--ink-4);
}
.quote__name{font-weight:600;color:var(--bone);font-size:.95rem;line-height:1.2}
.quote__role{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.1em;color:var(--bone-3);text-transform:uppercase;margin-top:.2rem}

.rating{display:inline-flex;gap:2px;color:var(--yellow)}
.rating svg{width:14px;height:14px}

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;
  background:linear-gradient(135deg,#222330 0%, #0b0d12 100%);
  border:0;
  border-radius: var(--r-lg);
  padding:clamp(2rem,5vw,4rem);
  overflow:hidden;
  display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center;
  color:#fff;
}
.cta-banner::before{
  content:"";position:absolute;inset:0;
  background:url('../img/illus/shopfloor.png') center/cover no-repeat;
  opacity:.10;
  filter:grayscale(1);
  pointer-events:none;
  mix-blend-mode:screen;
}
.cta-banner::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.cta-banner > *{position:relative;z-index:2}
.cta-banner h2{margin-bottom:.6rem;color:#fff}
.cta-banner .eyebrow{color:var(--orange)}
.cta-banner .eyebrow::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 8' fill='none' stroke='%233d4a6b' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><path d='M0 4 L4 4 L7 1 L11 7 L15 1 L19 7 L22 4 L28 4'/></svg>");
}
.cta-banner p{color:rgba(255,255,255,.78);max-width:50ch;margin:0}
.cta-banner__actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:flex-end}
.cta-banner .btn--ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.cta-banner .btn--ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
@media (max-width:820px){
  .cta-banner{grid-template-columns:1fr}
  .cta-banner__actions{justify-content:flex-start}
}

/* ---------- Comparison table (pricing page) ---------- */
.price{
  background:#fff;
  border:1px solid var(--ink-4);
  border-radius:var(--r-lg);
  padding:2.2rem;
  position:relative;
  overflow:visible;
  box-shadow: var(--shadow-1);
}
.price--hero{
  background:#fff;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow), 0 30px 80px -28px rgba(61,74,107,.20);
}
.price__badge{
  position:absolute;top:0;right:1.5rem;transform:translateY(-50%);
  background:var(--orange);color:#fff;
  font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.4rem .8rem;border-radius: var(--r-xs);font-weight:700;
  border:0;
}
.price__plan{font-family:"JetBrains Mono",monospace;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-3);margin-bottom:.6rem}
.price__amount{
  font-family:"Archivo Narrow",sans-serif;
  font-weight:800;
  font-size:clamp(3.5rem,7vw,5.2rem);
  letter-spacing:-.02em;
  line-height:1;
  color:var(--bone);
  display:flex;align-items:flex-start;gap:.1em;
}
.price__amount sup{font-size:.45em;font-weight:700;margin-top:.45em;color:var(--bone-2)}
.price__amount span{font-size:.3em;font-weight:500;margin-top:1.9em;margin-left:.3em;color:var(--bone-3);font-family:"JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.price__sub{color:var(--bone-2);margin:.6rem 0 1.8rem;max-width:40ch}
.price__list{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:.6rem}
.price__list li{display:flex;align-items:flex-start;gap:.7rem;color:var(--bone-2);font-size:.96rem}
.price__list li svg{color:var(--orange);flex-shrink:0;margin-top:4px}
.price__cta{display:flex;gap:.7rem;flex-wrap:wrap}

.compare{
  width:100%;border-collapse:collapse;
  background:#fff;
  border:1px solid var(--ink-4);
  border-radius:var(--r-md);
  overflow:hidden;
  font-size:.93rem;
  box-shadow: var(--shadow-1);
}
.compare th, .compare td{
  padding:1rem 1.2rem;
  text-align:left;
  border-bottom:1px solid var(--ink-4);
  vertical-align:middle;
}
.compare thead th{
  background:var(--ink-2);
  font-family:"Archivo Narrow",sans-serif;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0;
  text-transform:none;
}
.compare thead th:nth-child(2){color:var(--orange-3);position:relative}
.compare tbody td:nth-child(2){background:rgba(253,185,19,.10)}
.compare tbody tr:last-child td{border-bottom:0}
.compare td:first-child{font-weight:500;color:var(--bone)}
.compare .check{color:var(--orange)}
.compare .x{color:var(--ink-5)}
.compare .num{font-family:"JetBrains Mono",monospace;color:var(--bone-2);font-size:.9rem;letter-spacing:.02em}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.6rem}
.faq details{
  background:#fff;
  border:1px solid var(--ink-4);
  border-radius:var(--r-md);
  padding:0;
  overflow:hidden;
  box-shadow: var(--shadow-1);
}
.faq summary{
  list-style:none;
  padding:1.2rem 1.4rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-weight:600;color:var(--bone);font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";
  font-family:"Archivo Narrow",sans-serif;
  color:var(--orange);font-size:1.6rem;line-height:1;
  transition:transform .2s;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.4rem 1.3rem;margin:0;color:var(--bone-2);font-size:.95rem;line-height:1.6}

/* ---------- Reviews page ---------- */
.review-hero{
  text-align:center; padding:clamp(3rem,7vw,6rem) 0;
  background:transparent;
}
.review-score{
  display:inline-flex;align-items:center;gap:1.2rem;padding:1rem 1.5rem;
  background:#fff;border:1px solid var(--ink-4);border-radius:var(--r-md);
  margin-bottom:2rem;
  box-shadow: var(--shadow-1);
}
.review-score__big{font-family:"Archivo Narrow",sans-serif;font-weight:800;font-size:2.8rem;line-height:1;color:var(--orange-3)}
.review-score__stars{display:flex;gap:2px;color:var(--yellow);margin-bottom:.3rem}
.review-score__stars svg{width:18px;height:18px}
.review-score__label{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--bone-3);letter-spacing:.12em;text-transform:uppercase}

.reviewgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.reviewgrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.reviewgrid{grid-template-columns:1fr}}

.breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.breakdown__bar{height:6px;border-radius:3px;background:var(--ink-4);overflow:hidden;margin-bottom:.4rem}
.breakdown__fill{height:100%;background:var(--orange);border-radius:3px}
.breakdown__lbl{font-size:.85rem;color:var(--bone-2);display:flex;justify-content:space-between}
.breakdown__lbl span{font-family:"JetBrains Mono",monospace;color:var(--bone-3);font-size:.78rem}
@media (max-width:800px){.breakdown{grid-template-columns:1fr 1fr}}

/* ---------- Page hero (inner) ---------- */
.page-hero{
  padding:clamp(3rem,6vw,5.5rem) 0 clamp(2.5rem,4vw,4rem);
  background:transparent;
  border-bottom:1px solid var(--ink-4);
  position:relative;
  overflow:hidden;
}
.page-hero__illus{
  position:absolute;right:-5%;bottom:-15%;width:46%;opacity:.16;
  pointer-events:none;filter:grayscale(1) contrast(1.1);mix-blend-mode:multiply;
}

/* Section background illustration — fixed to viewport, faded behind content.
   Hidden by default; faded in by body.past-hero (added after the hero). */
.section-illus{
  position:fixed;
  pointer-events:none;
  opacity:0;
  filter:grayscale(1) contrast(1.05) blur(.4px);
  mix-blend-mode:multiply;
  z-index:0;
  /* Soft radial fade so edges melt into the white background */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.55) 55%, transparent 82%);
          mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,.55) 55%, transparent 82%);
  -webkit-mask-mode:alpha;
  transform: translate3d(var(--illus-x,0), var(--illus-y,0), 0) rotate(var(--illus-rot,0deg)) scale(var(--illus-scale,1));
  transform-origin:center;
}
body.past-hero .section-illus{ opacity: var(--illus-op, .065); }

.section-illus--right     { right:-7%;  bottom:-6%; width:34vw; max-width:520px }
.section-illus--left      { left:-7%;   bottom:-6%; width:34vw; max-width:520px }
.section-illus--top-right { right:-4%;  top:8%;     width:26vw; max-width:400px }
.section-illus--top-left  { left:-4%;   top:8%;     width:26vw; max-width:400px }
.section-illus--mid-left  { left:-3%;   top:34%;    width:28vw; max-width:440px }
.section-illus--mid-right { right:-3%;  top:38%;    width:28vw; max-width:440px }
.section-illus--center    { left:50%;   top:50%;    width:46vw; max-width:640px;
                            transform: translate(-50%,-50%) rotate(var(--illus-rot,0deg)) scale(var(--illus-scale,1)); }

@media (max-width:760px){
  /* On mobile, scale the illustrations larger and bump opacity so they read
     as a backdrop while scrolling. Limit to 2 well-placed illustrations to
     avoid clutter at narrow widths. */
  .section-illus{
    width: 80vw !important;
    max-width: none !important;
    filter: grayscale(1) contrast(1.05);
  }
  body.past-hero .section-illus{ opacity: .15; }
  /* Show the bottom-right + mid-left pair only. */
  .section-illus--right,
  .section-illus--mid-left{ display: block; }
  .section-illus--left,
  .section-illus--top-right,
  .section-illus--top-left,
  .section-illus--mid-right,
  .section-illus--center{ display: none; }
}
section{position:relative;overflow:hidden}
section .container{position:relative;z-index:2}
.page-hero .container{position:relative;z-index:2}
.page-hero__grid{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.page-hero h1{font-size:clamp(2.4rem,5vw,4.4rem);margin-bottom:.8rem}
.page-hero p{max-width:58ch;color:var(--bone-2);font-size:1.1rem}
@media (max-width:760px){
  .page-hero__grid{grid-template-columns:1fr;gap:1.25rem;align-items:start}
  .page-hero__grid > div:last-child .btn{width:100%;justify-content:center}
}

/* ---------- Callout ---------- */
.callout{
  background:rgba(61,74,107,.06);
  border:1px solid rgba(61,74,107,.28);
  border-left:3px solid var(--orange);
  padding:1.3rem 1.6rem;
  border-radius: var(--r-sm);
  margin:1.5rem 0;
  font-size:.95rem;
  color:var(--bone-2);
}
.callout strong{color:var(--bone)}

/* ---------- Utility ---------- */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.mt-0{margin-top:0!important}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2.5rem}
.mb-0{margin-bottom:0!important}
.center{text-align:center}
.muted{color:var(--bone-3)}
.show-md{display:none}
@media (min-width:700px){.show-md{display:initial}}

/* ---------- Video embed ---------- */
.video-sec{padding:clamp(3rem,5vw,5rem) 0 clamp(1rem,2vw,2rem)}
.sec-head--tight{margin-bottom:clamp(1.2rem,2.5vw,2rem)}
.video-frame{
  position:relative;
  max-width:1040px;
  margin:0 auto;
  border:1px solid var(--ink-4);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow: var(--shadow-3);
  overflow:hidden;
}
.video-frame__bar{
  display:flex;gap:.4rem;align-items:center;
  padding:.65rem .9rem;
  border-bottom:1px solid var(--ink-4);
  background:var(--ink-2);
}
.video-frame__bar span{
  width:10px;height:10px;border-radius:50%;
  background:var(--ink-4);
}
.video-frame__bar span:nth-child(1){background:#e07b6a}
.video-frame__bar span:nth-child(2){background:#e7b85a}
.video-frame__bar span:nth-child(3){background:#78b064}
.video-frame__media{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
}
.video-frame__media iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}

/* ---------- Anim ---------- */
@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.rise-2{animation-delay:.1s}
.rise-3{animation-delay:.2s}
.rise-4{animation-delay:.3s}

/* ---------- Screenshot slide-in on scroll ---------- */
/* Screenshots start translated off to the side. When their parent .feat
   gets the .rise class via IntersectionObserver, they slide into place. */
.feat .feat__media{
  opacity:0;
  transform:translateX(40px) scale(.97);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),
             transform .85s cubic-bezier(.2,.7,.2,1);
}
.feat--reverse .feat__media{
  transform:translateX(-40px) scale(.97);
}
.feat.rise .feat__media{
  opacity:1;
  transform:translateX(0) scale(1);
  transition-delay:.15s;
}
@media (max-width:760px){
  .feat .feat__media,
  .feat--reverse .feat__media{
    transform:translateY(24px) scale(.98);
  }
  .feat.rise .feat__media{
    transform:translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion:reduce){
  .feat .feat__media,
  .feat--reverse .feat__media,
  .feat.rise .feat__media{
    transition:none;
    opacity:1;
    transform:none;
  }
}

/* ---------- Payments visual ---------- */
.payments-visual{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-md);
  background:#fff;
  border:1px solid var(--ink-4);
  overflow:hidden;
  isolation:isolate;
}
.payments-visual__spot,
.payments-visual__rays{display:none}
.payments-visual__hero{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  height:84%;width:auto;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
  z-index:4;
}
/* refined transaction card — bottom right */
.payments-visual__txn{
  position:absolute;
  right:5%;bottom:8%;
  width:62%;max-width:300px;
  background:#fff;
  border:1px solid var(--ink-4);
  border-radius: var(--r-sm);
  padding:.75rem .85rem;
  box-shadow: var(--shadow-2);
  z-index:6;
}
.payments-visual__txn-row{
  display:flex;align-items:center;gap:.6rem;
  margin-bottom:.55rem;
}
.payments-visual__txn-icon{
  width:24px;height:24px;flex-shrink:0;
  background:rgba(26,133,54,.10);
  border:1px solid rgba(26,133,54,.4);
  border-radius: var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--green);
}
.payments-visual__txn-body{flex:1;min-width:0}
.payments-visual__txn-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;color:var(--bone-3);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  margin-bottom:2px;
}
.payments-visual__txn-cust{
  font-size:.78rem;color:var(--bone);font-weight:600;
  letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.payments-visual__txn-amt{
  font-family:'Archivo',sans-serif;
  font-size:1rem;font-weight:800;color:var(--bone);
  letter-spacing:-.02em;line-height:1;
  flex-shrink:0;
}
.payments-visual__txn-foot{
  display:flex;align-items:center;gap:.4rem;
  padding-top:.55rem;
  border-top:1px solid var(--ink-4);
}
.payments-visual__txn-pill{
  font-family:'JetBrains Mono',monospace;
  font-size:.55rem;font-weight:700;
  color:var(--yellow-3);
  background:rgba(243,174,26,.12);
  border:1px solid rgba(243,174,26,.4);
  padding:.18rem .42rem;
  border-radius: var(--r-sm);
  letter-spacing:.05em;
}
.payments-visual__txn-pill--ghost{
  background:var(--ink-2);
  border-color:var(--ink-4);
  color:var(--bone-3);
}
.payments-visual__txn-time{
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;color:var(--bone-3);
  letter-spacing:.05em;
}
/* day stat — top left */
.payments-visual__stat{
  position:absolute;
  top:7%;left:5%;
  background:#fff;
  border:1px solid var(--ink-4);
  border-radius: var(--r-sm);
  padding:.7rem .9rem .75rem;
  box-shadow: var(--shadow-2);
  z-index:5;
}
.payments-visual__stat-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.55rem;color:var(--bone-3);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  margin-bottom:.15rem;
}
.payments-visual__stat-value{
  font-family:'Archivo',sans-serif;
  font-size:1.45rem;font-weight:800;color:var(--bone);
  letter-spacing:-.025em;line-height:1;
}
.payments-visual__stat-value span{
  color:var(--bone-3);font-size:.85em;
}
.payments-visual__stat-sub{
  margin-top:.3rem;
  font-size:.6rem;color:var(--bone-3);
  letter-spacing:.02em;
  display:flex;align-items:center;gap:.35rem;
}
.payments-visual__stat-sub::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
}
@media (max-width:760px){
  .payments-visual{aspect-ratio:1.05/1}
  .payments-visual__hero{height:88%}
  .payments-visual__stat{padding:.55rem .7rem}
  .payments-visual__stat-value{font-size:1.15rem}
  .payments-visual__txn{width:68%;padding:.6rem .7rem}
}

/* ---------- QuickBooks visual ---------- */
.qb-visual{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-md);
  background:#fff;
  border:1px solid var(--ink-4);
  overflow:hidden;
  padding:7%;
  display:flex;align-items:center;justify-content:center;
}
.qb-visual__spot{display:none}
.qb-visual__panel{
  position:relative;z-index:2;
  width:100%;max-width:420px;
  background:#fff;
  border:1px solid var(--ink-4);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-3);
  overflow:hidden;
}
.qb-visual__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;
  padding:.85rem 1rem;
  border-bottom:1px solid var(--ink-4);
  background:var(--ink-2);
}
.qb-visual__brand{display:flex;align-items:center;gap:.6rem}
.qb-visual__logo{
  width:32px;height:32px;flex-shrink:0;
  background:#2ca01c;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Archivo',sans-serif;
  font-weight:800;font-size:.78rem;letter-spacing:-.02em;
}
.qb-visual__brand-name{
  font-size:.82rem;color:var(--bone);font-weight:700;letter-spacing:-.01em;
  margin-bottom:1px;
}
.qb-visual__brand-status{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;color:var(--bone-3);
  display:flex;align-items:center;gap:.35rem;
  letter-spacing:.02em;font-weight:500;
}
.qb-visual__pulse{
  width:6px;height:6px;border-radius:50%;
  background:#2ca01c;
}
.qb-visual__head-stat{text-align:right}
.qb-visual__head-num{
  font-family:'Archivo',sans-serif;
  font-size:1.4rem;font-weight:800;color:var(--bone);
  letter-spacing:-.03em;line-height:1;
}
.qb-visual__head-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.55rem;color:var(--bone-3);
  text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  margin-top:2px;
}
.qb-visual__list{
  padding:.35rem 0;
}
.qb-visual__row{
  display:flex;align-items:center;gap:.65rem;
  padding:.5rem 1rem;
  border-bottom:1px solid var(--ink-3);
  position:relative;
}
.qb-visual__row:last-child{border-bottom:0}
.qb-visual__row-icon{
  width:18px;height:18px;flex-shrink:0;
  background:rgba(26,133,54,.10);
  border:1px solid rgba(26,133,54,.45);
  border-radius: var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--green);
}
.qb-visual__row-body{flex:1;min-width:0}
.qb-visual__row-name{
  font-size:.78rem;color:var(--bone);font-weight:600;
  letter-spacing:-.005em;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qb-visual__row-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;color:var(--bone-3);
  letter-spacing:.04em;margin-top:1px;
}
.qb-visual__row-amt{
  font-family:'Archivo',sans-serif;
  font-size:.85rem;font-weight:700;color:var(--bone);
  letter-spacing:-.015em;flex-shrink:0;
}
.qb-visual__foot{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:.5rem;
  padding:.85rem 1rem;
  border-top:1px solid var(--ink-4);
  background:var(--ink-2);
}
.qb-visual__foot-stat{}
.qb-visual__foot-num{
  font-family:'Archivo',sans-serif;
  font-size:.95rem;font-weight:800;color:var(--bone);
  letter-spacing:-.025em;line-height:1;
}
.qb-visual__foot-num span{color:var(--bone-3);font-size:.85em}
.qb-visual__foot-num--good{color:var(--green)}
.qb-visual__foot-label{
  font-family:'JetBrains Mono',monospace;
  font-size:.55rem;color:var(--bone-3);
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;
  margin-top:3px;
}
@media (max-width:760px){
  .qb-visual{aspect-ratio:1/1;padding:5%}
  .qb-visual__head{padding:.7rem .8rem}
  .qb-visual__row{padding:.45rem .8rem}
  .qb-visual__head-num{font-size:1.2rem}
  .qb-visual__foot-num{font-size:.85rem}
  .qb-visual__foot{padding:.7rem .8rem}
}